@import "variable.less";
@img: "/static/image/baihoc/mobile";
/*===============================================*/
html, body{overflow-x: visible;}
.navbar{display: none;}
#wrapper{margin-top: 0px;}
#m-top-banner, .m-footer{display: none;}
.navigation_tree{display: none;}
.lt123_box_gopy {
    background-image: url("/static/image/bg_baoloi.png");
    background-repeat: no-repeat;
    height: 480px;
    position: absolute;
    width: 320px;
    z-index: 9999;
    left: 50%;
    margin-left: -160px;
    top: 10vh;
}
.lt123_gopy_title {
    background-image: url("/static/image/gopy_txt.png");
    background-position: left 10px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #d4d3d1;
    cursor: move;
    height: 45px;
    margin-left: 20px;
    margin-top: 15px;
    width: 86%;
}
.lt123_gopy_noti {
    color: #7c7c7c;
    font-family: Times New Roman;
    font-size: 14px;
    font-style: italic;
    line-height: 23px;
    margin-left: 20px;
    margin-top: 10px;
    text-align: justify;
    width: 86%;
}
.lt123_gopy_area {
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    font-family: Times New Roman;
    font-size: 14px;
    font-style: italic;
    height: 90px;
    margin-bottom: 15px;
    margin-left: 11px;
    margin-top: 20px;
    padding: 10px 0 10px 12px;
    width: 88%;
}
.lt123_box_gopy .lt123_btn_sent {
    background-color: #3493bc;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    display: block;
    float: right;
    font-family: arial;
    font-size: 14px;
    margin-right: 25px;
    margin-top: 0;
    padding: 3px 40px;
    text-align: center;
}
.lt123_box_gopy .lt123_btn_close {
    color: #ed1c24;
    cursor: pointer;
    float: right;
    font-family: arial;
    margin-right: 42px;
    margin-top: 0;
    padding: 3px 5px;
}
.lt123_box_gopy .technic_err {
    color: #7c7c7c;
    font-family: Times New Roman;
    font-size: 14px;
    font-style: italic;
    margin-left: 15px;
}
.box_thank_send .thank_txt {
    background-image: url("/static/image/thankyou_txt.png");
    background-position: center top;
    background-repeat: no-repeat;
    color: #7c7c7c;
    font-family: Times New Roman;
    font-size: 14px;
    font-style: italic;
    margin-top: 130px;
    padding-top: 35px;
    text-align: center;
}
.box_thank_send .thank_txt span {
    color: #ed1c24;
}
.ch_error {
    clear: both;
    color: #dd5555;
    font-size: 13px;
    margin: 0 10px;
}
.ch_error label {
    border: 1px solid #d1d3d4;
    border-radius: 3px;
    width: 98%;
}
.ch_error input.ch_radio:empty {
    display: none;
    margin-left: -999px;
}
.ch_error input.ch_radio:empty ~ label {
    -moz-user-select: none;
    cursor: pointer;
    float: left;
    line-height: 2em;
    margin-top: 20px;
    position: relative;
    text-indent: 2.5em;
}
.ch_error input.ch_radio:empty ~ label::before {
    background: #d1d3d4 none repeat scroll 0 0;
    border-radius: 3px 0 0 3px;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 1.8em;
}
.ch_error input.ch_radio:hover:not(:checked) ~ label::before {
    content: "✔";
    text-indent: 0.5em;
}
.ch_error input.ch_radio:hover:not(:checked) ~ label {
    color: #888;
}
.ch_error input.ch_radio:checked ~ label::before {
    background-color: #a4b420;
    color: #ffffff;
    content: "✔";
    text-indent: 0.5em;
}
.ch_error input.ch_radio:focus ~ label::before {
    box-shadow: 0 0 0 3px #999;
}
.cl_green {
    color: #61be6d;
}
.cl_blue {
    color: #0076a1;
}
.cl_orange {
    color: #ff9900;
}
/*===============================================*/
#lesson-detail-page{
	.m-ldp-title{padding: 2vw;
		*{display: inline-block; vertical-align: middle;}
		.m-ldpt-back-arrow{width: 17px}
		.m-ldpt-name{cursor: pointer;vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 68vw; text-transform: none; padding: 0vw 0vw 0vw 2vw;font-size: 20px;font-weight: bold;}
		.m-ldpt-star{background-image: url("@{public-img}/m-star.png");background-repeat: repeat-x;height: 20px;margin-top: 0.9vh;
			img{width: 6vw; margin-left: -1vw;}
		}
                ._1ss{width:20px;}
                ._2ss{width:40px;}
                ._3ss{width:60px;}
                ._ss{background: none;height: 0;margin-top: 0.8vh;color: #FDEDAC;font-weight: bold;font-size: 4.5vw;text-transform: none;}
	}
	.m-ldp-info{padding:24px 0px 0px;position: absolute;top: 0; width: 98%;
		.m-ldpi-left{margin-right: 1vw;display: inline-block;padding: 10px; background-color: #fff981; border-radius: 0px 30px 30px 0px; vertical-align: middle;
			.m-ldpil-ques{}
			.m-ldpil-time{padding: 0vw 3vw; color: #8d7900;}
		}
		.m-ldpi-score{background-color: #dd5555; font-size:24px; vertical-align: middle; padding: 6px 16px; border-radius: 30px;}
		.m-ldpi-err{cursor: pointer;vertical-align: middle; display: inline-block; padding: 10px 0px;
			*{display: inline-block; vertical-align: middle;}
			img{width: 23px;}
		}
	}
	.m-l-quiz{}
	.m-ldp-btn{margin: 8vw 0vw 25vw 0vw;
		img{position: relative; cursor: pointer; &:active{top: 2px;}}
		.m-ldpb-submit{width: 48vw;}
		.m-ldpb-next{width: 75vw;}
	}
	.m-lq-result{padding: 4vw 0vw 0vw 0vw;
		.m-lqr-correct{}
		.m-lqr-incorrect{
			.m-lqri-key{padding: 4vw 0vw 0vw 0vw;}
			.m-lqri-detail{
				.m-ldpb-detail{width: 75vw; position: relative; cursor: pointer; &:active{top: 2px;}}
			}
		}
	}
	#m-ldp-result-icon{
		.m-ldpri_slogan, .m-ldpri_icon{top: 50%; left: 50%; position: fixed;}
		.m-ldpri_icon_correct{max-width: 120px; max-height: 96px; margin-left: -60px; margin-top: -96px;}
		.m-ldpri_slogan_correct{max-width: 310px; max-height: 72px; margin-left: -155px;}
		.m-ldpri_icon_incorrect{max-width: 116px; max-height: 116px; margin-top: -116px; margin-left: -58px;}
		.m-ldpri_slogan_incorrect{max-width: 329px; margin-left: -164px;}
	}
	#final-result-complete{background-size: 100% 100%; position: fixed; width: 100vw; height: 100vh; background-image: url("@{img}/m-q-fr-bg.png"); top: 0vw; left: 0vw; overflow: auto; overflow-y: scroll; opacity: 0; /*padding-top: 16vw; background-position: 0vw 16vw;*/ 
		.color-tyle-1{color: #fff200; text-shadow: 2px 0 0 #a86800, -2px 0 0 #a86800, 0 2px 0 #a86800, 0 -2px 0 #a86800, 1px 1px #a86800, -1px -1px 0 #a86800, 1px -1px 0 #a86800, -1px 1px 0 #a86800;}
		.color-tyle-2{color: #ffffff; text-shadow: 2px 0 0 #442204, -2px 0 0 #442204, 0 2px 0 #442204, 0 -2px 0 #442204, 1px 1px #442204, -1px -1px 0 #442204, 1px -1px 0 #442204, -1px 1px 0 #442204;}
		.color-tyle-3{color: #fff200; text-shadow: 2px 0 0 #442204, -2px 0 0 #442204, 0 2px 0 #442204, 0 -2px 0 #442204, 1px 1px #442204, -1px -1px 0 #442204, 1px -1px 0 #442204, -1px 1px 0 #442204;}
		.m-ldpfrc-percent{position: relative;
			.m-ldpfrcp-bg{width: 100%;}
			.m-ldpfrcp-number{font-size: 15vw; top: 7vw; width: 28vw; left: 35vw; border-radius: 50%; height: 28vw; line-height: 28vw; font-weight: bold;}
		}
		.m-ldpfrc-chestnut{position: relative; margin-top: -22vw;
			.m-ldpfrcc-achieve{width: 20vw; margin: 0vw -1.6vw;}
			.m-ldpfrcc-miss{width: 16vw; margin: 0vw 0.6vw;}

			.chestnut{display: inline-block; position: relative; vertical-align: middle;
				.chestnut_i {background-image: url("/file/luyenthi123/common/baitap/image/chestnut_i.png"); width: 20vw; height: 20vw; background-position: center; background-repeat: no-repeat; opacity: 1.3; background-size: 23vw;
				
				}.chestnut_i_static{background-image: url("/file/luyenthi123/common/baitap/image/chestnut_miss.png"); background-size: 95%;}
			}
		}
		.m-ldpfrc-chestnut-achie{
			.m-ldpfrc-content{padding: 3vw 0vw 2vw 0vw;
				*{vertical-align: middle;}
				img{width: 7vw; margin-right: 1vw;}
				div{
					&:nth-child(2){font-size: 6.5vw; font-weight: bold;}
				}
			}    
			.m-ldpfrc-chestnut{position: relative; margin-top: -18vw; opacity: 0;
				.m-ldpfrcc-content{background-color: #ffbb51; margin-right: 1vw;
					#_rsp_f_total{position: absolute; margin-top: 1px;}
				}
			}	
			.m-ldpfrc-achie{opacity: 0;
				.m-ldpfrca-content{background-color: #00e4ff; margin-left: 1vw;
					#_rsp_f_achie{position: absolute; margin-top: 1px;}
				}
			}			
		}
		.m-ldpfrc-score{font-size: 24vw; width: 100%; color: #fff; text-shadow: 2px 0 0 #78736f, -2px 0 0 #78736f, 0 2px 0 #78736f, 0 -2px 0 #78736f, 1px 1px #78736f, -1px -1px 0 #78736f, 1px -1px 0 #78736f, -1px 1px 0 #78736f; top: 54vw; font-weight: bold;}
		.m-ldpfrc-list-score{border: 0px; list-style: disc; color: #cdcdcd; box-shadow: none; margin: 4vw 0vw 4vw 0vw; padding-left: 17vw;
			li{opacity: 0;
				> div{
					span{
						&:nth-child(1){color: #583b1e;}
						&:nth-child(2){color: #dd5555;}
					}					
				}
			}
		}		
		.m-ldpfrc-button{padding: 0vw 10vw 0vw 10vw; overflow: hidden; position: relative; height: 52vw;
			.m-ldpfrc-btn{border-radius: 30px; margin-bottom: 3vw; height: 11vw; position: relative; font-size: inherit; top: 100%;
				.glyphicon{width: 7vw; margin: 2vw 0vw 0vw 3vw; position: absolute; left: 0px;}
				&:nth-child(1) .glyphicon{
					.keyframes(rotate;
						{from {transform: rotate(0deg);} to {transform: rotate(360deg);}
					});
					.animation(rotate 1s linear infinite);
				}
				&:nth-child(2) .glyphicon{
					.keyframes(translate;
						{0% {transform: translate(5px, 0px);} 100% {transform: translate(-5px, 0px);}
					});
					.animation(translate 0.5s linear infinite alternate);
				}
				&:nth-child(3) .glyphicon{
					.keyframes(fade-in;
						{0% { opacity: 0; } 100% { opacity: 1; }
					});
					.animation(fade-in 0.5s linear infinite alternate);
				}
				&:active{position: relative; top:2px;}
			}
		}
	}
	#final-modal-miss{font-size: 5vw;
		.modal-dialog{margin-top: 25vh;
			.m-fmm-intro{padding: 6vw; text-align: justify;}
			.m-fmm-btn{font-size: inherit; margin-bottom: 3vw; padding: 2.5vw;}
		}
	}
	#modal-vip-only{font-size: 5vw;
		.modal-dialog{margin-top: 25vh;
			.m-mvo-intro{padding: 6vw; text-align: justify;}
			.m-mvo-btn{font-size: inherit; margin-bottom: 3vw; padding: 2.5vw;}
		}
	}		
}
//======== quiz 1 =======================
#m-l-quiz-content{
	input[type="text"]{padding: 0vw 1vw; text-align: center;}	
	.m-l-quiz-1{padding: 0vw 4vw;
		.m-lq1-intro{color: #b98300;}
		.m-lq1-pic{margin: 4vw auto;}
		.m-lq1-ques{
			.m-lq1-answer-input{width: 15vw; height: 6vw; font-size: inherit; color: #000; background-color: #fff; background-image: none; border: 1px solid #ccc; opacity: 1;}
		}
	}
	.m-l-quiz-2{padding: 0vw 4vw;
		.m-lq2-intro{color: #b98300;}
		.m-lq2-pic{margin: 4vw auto;}
		.m-lq2-ques{margin-bottom: 4vw;}
		.m-lq2-select{
			.m-lq2-option{width: 45%; padding: 3.5vw; font-size: inherit; margin: 1%; position: relative;
				&:active{top: 2px;}
			}.m-lq2-choice{background-color: #ff298e; border-color: #ff298e;}
		}
	}
}
.m-page{max-width: 750px;
    margin: 0px auto;}
//======== keyboard =======================
#m-keyboard{background-color: #7e2a3a; display: none; max-height: 290px;      
            bottom: 0px;width: 100%;max-width: 750px;
	.m-k-head{color: #fff; padding: 10px;
		.glyphicon {padding: 0vw 10px;}
		.m-caret-left{vertical-align: middle;width: 18px;
			height: 30px; margin-right:20px;}
		.m-caret-right{vertical-align: middle; width: 18px;
			height: 30px;}	
	}
	.m-k-table{margin-bottom: 0px;
		.m-key{border:6px solid #7e2a3a; font-size:30px; padding: 2px 10px;vertical-align: middle;width: 20%;
			height: 54px;
			&:active{opacity: 0.8;}
		}
		.m-k-white{background-color: #fff;}
		.m-k-blue{background-color: #00aeda;}
		.m-k-yellow{background-color: #f7c743;}
		.m-k-miss{background-color: transparent;}
		.m-k-green{background-color: #65b24a; color: #fff;}
		.m-k-red{background-color: #f91700;font-size: 2px;}
		.m-k-enter{ font-weight: normal; vertical-align: middle; font-size: 16px;
			img{width: 24px;}
		}
		.m-k-delete{ position: relative;
                    img{position: absolute;left: 0px;
					width: 100%;top: 10px;
					max-width: 100px;}
		}
		.m-k-close{font-size: 4vw;}
	}
}
.bg_btclass_right._kt{
	left: 0px;
    top: 0;
    z-index: 9999;
    position: fixed;
}