@charset "utf-8";
/* CSS Document */

.html-embed {
    position: absolute;
    left: 0%;
    top: 0%;
    right: auto;
    bottom: auto;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.info-button {
    position: absolute;
    left: 20px;
    top: 15px;
    right: 0%;
    bottom: auto;
    z-index: 10;
    width: 30px;
    height: 30px;
    /*margin-top: 270px;*/
    /*background-image: url('../images/info.svg');*/
        background-image: url('../images/info_hide.svg');

    background-size: 100% 100%;
    cursor: pointer;
    /*background-repeat: repeat;*/
}

.left-panel-center {
  position: absolute;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
  width: 0px;
  height: 50%;
    display: block;
}

.left-panel {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  display: none;
  width: 0px;
  height: 270px;
  margin-bottom: -145px;
  margin-left: 10px;
    z-index: 1;
}

.infoDiv{
    /*visibility: hidden;*/
    position: absolute;
	top: 20px;
    padding:30px;
    min-width: 0px;
    display: none;
    width: calc(60%-20px);
    height: 85%;
    max-width: 845px;
	max-height: 550px;
	
    float: left;
    z-index: 10;

    left: 20px;
    /*top: 50%;
    transform: translate(0%, -50%);
    /*transform: translateY(-50%);
	margin: 10px;*/
    background-image: url('../images/PC/backPC.svg');
	background-repeat: no-repeat;
	background-size:cover;

	border-radius: 3% / 5%;	/*box-sizing: inherit; overflow-y: auto;*/
    border: 1px solid #FEF4DA;
	
}

.overflow-visible{
	overflow: visible!important;
}
.item{
	display: flex;
	flex-wrap: wrap;
	/*flex: 1 1 auto;*/
	margin: 0px;
	justify-content:center;
	/*flex-direction: row;
	flex:0 0 100%;*/
	max-height: 90%;
}
.col{
	flex:50%;	

	justify-content: center;
}
.text1{
	overflow-y: auto;
	max-height: 400px;
	padding-right: 10px;
	margin-top: 30px;
	position: static;
	height: 90%;
}

.text1::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 5px;
}

.text1::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.text1::-webkit-scrollbar-track {
  border-radius: 4px;
  
	background-color: rgba(120,70,34, 0.5);
  /*box-shadow: 0 0 1px rgba(255, 255, 255, .5);
	background-color:rgba(100,44,33, 0.5);*/
}
.tool{
    position: static;
   
    width: 300px;
	height: 30px;
    /*padding-right: 20px;
    padding-left: 20px;*/
    left: 20px;
    top: -10px;
	
}
.btntool{
    width: 30px;
    height: 30px;
    position: static;
    cursor: pointer;
    margin-right: 10px;
    float: left;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
}
.closebtn{
	position: absolute;
    right: 20px;
    top: 15px;
   
    bottom: auto;
    z-index: 10;
    width: 30px;
    height: 30px;

	background-image: url('../images/svg/close.svg');

    background-size: 100% 100%;
    cursor: pointer;
}

.VN{
	background-image: url("../images/svg/VN_ac.svg");	
}

.Cham{
	background-image: url("../images/svg/Cham_in.svg");
}

.Voice{
	background-image: url("../images/svg/sound.svg");
}

.infoImage{
	align-items: center!important;
	justify-content: center!important;
	display: flex!important;
	width:100%;
	position: static;
	margin-top: 30px;
	margin-bottom: 20px;
	background-repeat: no-repeat;
	box-sizing: inherit;
}

.gt{
	margin-right: 20px;
}


.btnXem3D{
    /*background-image: url('../images/PC/btnPC.svg');*/
    align-items: center!important;
	justify-content: center!important;
	display: flex!important;
    width: 88%;
    height: 10%;
    position: static;
    background-repeat: no-repeat;
    margin-left: 20px;
    /*background-size: cover;*/
    border-radius: 5% / 50%;	/*box-sizing: inherit;*/
    border: 1px solid #FEF4DA;
    background-image: linear-gradient(#8F5223, #4D3223);
    color: #FEF4DA;
	cursor: pointer;
}

.xemhienvat{
	position: absolute;
	/*overflow: hidden;*/
	width: 80%;
	height:80%;
	/*padding-top: 56.25%;  16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	display: none;
}

#iframe3dview{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
.viewPoster{
	position: absolute;
	height:450px;
	width: 318px;
	max-width: 400px;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	display: none;
	/* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.posterImage{


	width: 100%;
	height: 100%;

padding-left:70.67%; /*(318:450)*/
		overflow: hidden;
		position: relative;

}

.posterImage img{
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	object-fit: contain;
	background-image: '';
	top:0;
	bottom: 0;
	left:0;
	right:0;
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	display: none;
}
	.closebtn.btnposter{
		padding-right: 20px;
		top: 15px;
		width: 30px;
		height: 30px;
	}
.posterImage img.pot-selected{
	display: block;
}
/*.posterImage img.pot00{
	padding-top:45%; /*100/(400:180)
	width: 400px;
	height: 180px;
}
.pot-inactive{
	display: none;
}
*/
.viewXRposter{
	position: absolute;
	height:370px;
	width: 600px;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	display: none;
}
	#closePoster{
		right:0;
		margin-right: -30px;
		padding-right: 0px;
		margin-top: -30px;
		top: 0px;

		bottom: auto;
		z-index: 20;

	}
.viewXR{
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('');
	align-items: center!important;
	justify-content: center!important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	object-fit: contain;
}
	#closeXR{
		right:0;
		margin-right: -30px;
		padding-right: 0px;
		margin-top: -30px;
		top: 0px;

		bottom: auto;
		z-index: 20;

	}
.view00poster{
	position: absolute;
	height:360px;
	width: 800px;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	display: none;
}
	#close00{
		right:0;
		margin-right: -30px;
		padding-right: 0px;
		margin-top: -30px;
		top: 0px;

		bottom: auto;
		z-index: 20;

	}
.title{
    color: #FFF;
    /*margin-top: 10px;*/
    text-align: center;
    font-size: 20px;
    font-style: normal;
	left: 50%;
    top: 12%;
    transform: translate(-50%, -50%);
	 position: absolute;
}


/*.tomtat{
	overflow-y: auto;
	max-height: 90%;
	padding-right: 10px;
	margin-top: 30px;
	position: static;
}*/

.text_nd{
    color: #fff;
    text-align: justify;
    
    font-size: 14px;
  
	/*text-overflow: inherit;
	word-wrap:break-word;*/
	height:100%;
}
.text_ndcham{
    color: #fff;
    text-align: justify;
    
    font-size: 16px;

	height: 100%;
}

ul
{
    /*list-style-type: none;*/
	list-style-type: square;
	margin: 0px;
    color:#FFFFFF;
	padding: 0;
    
}
li{
	margin: 0;
	padding: 0;
}
dl{
	margin: 0; padding: 0;
}
dd{
	margin: 0;
}
.vnese{
	font-family: Roboto;
	display: block;
}
.chamese{
	font-family: 'akhar_thrah_1regular';
	display:none;
	
}
.text_gt {
	font-size: 14px;
	color: #fff;
    text-align: justify;	
}

.text_gtcham{
	font-size: 18px;
	color: #fff;
    text-align: justify;
}
.tenbtn{
	/*display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;*/
		color: #fef4da;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
	margin: 0;
}
.tenbtn.ch{
	font-size: 18px;
}

.board{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 200px;
	height:120px;
}

.keyboard{
	position: fixed;
	left: 20px;
	right:auto;
	bottom: 20px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction:row;
	flex-direction: row;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	
}

.keyboardbtn{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 40px;
	height: 40px;
	margin-right: 5px;
	margin-left:5px;
	-webkit-box-pack: center;
	-webkit-justify-content:center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: pointer;
	background-repeat: no-repeat;
	z-index: 20;
}

.keyboardbtn.up{
	position: absolute;
	bottom: 100%;
	margin-bottom: 5px;
	z-index: 20;

}
#key_Left{
	background-image: url('../images/Mobile/arrowLeft.svg');
	
}
#key_Right{
	background-image: url('../images/Mobile/arrowRight.svg');
}
#key_Up{
	background-image: url('../images/Mobile/arrowUp.svg');
}
#key_Down{
	background-image: url('../images/Mobile/arrowDown.svg');
}

@media screen and (max-width: 1024px){
	.infoDiv{

		display: none;
		width: 60%;
		height: 60%;
	}
	
	.text1{

	padding-right: 10px;
	margin-top: 40px;
	position: static;
	height: 80%;
	}
	.infoImage{

	margin-top: 40px;
	margin-bottom: 20px;
	}

}
@media screen and (max-width: 769px) {

	.infoDiv{
		padding: 15px;

		top:50%;
		left:50%;
		transform: translate(-50%, -50%);

		display: none;
		width: calc(60%-20px);
		height: 85%;
		max-width: 600px;
		max-height: 800px;
		background-image: url('../images/Mobile/back_mo.svg');
		border-radius: 5% / 3%;
	}
	

	/*.item{
		flex-direction: column;
		
	}*/
	.col{	
		flex:100%;
		justify-content:center;
}

	.text1{
		max-height: 220px;
		margin-top: 20px;
		position: static;
		height: 40%;
		padding-left:20px;
		padding-right:20px;
		margin-bottom: 20px;
	}
	.tool{
		left: 20px;
		top: 15px;
	}
	.title{
		margin-top: -15px;
	}
	.infoImage{

		padding-top: 20px;
		margin-bottom: 20px;

	}
	/*.tomtat{

		height: 60%;
		padding-left: 20px;		
		position: static;
	}*/
	.btnXem3D{
    /*background-image: url('../images/Mobile/btnM.svg');*/
		height: 30px;


	}
	.viewXRposter{
		height:246.7px;
		width: 400px;
	}
	.view00poster{
		height:270px;
		width: 600px;
	}


}

@media screen and (max-width: 479px) {
	
	.infoDiv{
		padding: 15px;

		top:50%;
		left:50%;
		transform: translate(-50%, -50%);

		display: none;
		/*width: calc(80%-20px);*/
		width: 80%;
		height: 84%;
		max-width: 400px;
		/*max-height: 650px;*/
		background-image: url('../images/Mobile/back_mo.svg');
		border-radius: 5% / 2%;
	}

	.btntool{
		width: 20px;
		height: 20px;

		margin-right: 10px;
		float: left;
	}
	.infoImage{

		margin-top: 20px;
		padding-top: 30px;
		margin-bottom: 20px;


	}
.closebtn{

    top: 15px;
    width: 20px;
    height: 20px;
}
.closebtn.btniframe{
	    top: 15px;
    width: 30px;
    height: 30px;
		
	}
	.closebtn.btnposter{
		padding-right: 20px;
		top: 15px;
		width: 30px;
		height: 30px;
	}
 .text_nd{
    color: #fff;
    text-align: justify;
    /*margin-top: 5px;*/
    font-size: 12px;
	}
.title{
    color: #FFF;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 14px;
    font-style: normal;
	}
	
.text_gt 
{
	font-size: 12px;
	color: #fff;
    text-align: justify;
}
	
	.tenbtn{

		font-size: 12px;

	}
	.tenbtn.ch{
		font-size: 14px;
	}
	.viewXRposter{
		height:222px;
		width: 360px;
	}
	.viewPoster{
		height:396px;
		width: 280px;
	}
	.view00poster{
		height:246.7px;
		width: 400px;
	}


	/*.keyboard{

	padding-left: 10px;

	
}

.keyboardbtn{

	width: 30px;
	height: 30px;
	margin-right: 5px;

}*/

}
@media screen and (max-width: 428px) {
	.view00poster{
		height:158px;
		width: 350px;
	}
	.closebtn.btnposter#close00{
		padding-right: 20px;
		top: 15px;
		width: 20px;
		height: 20px;

	}
}
@media screen and (max-width: 375px) {
	.infoDiv{
		padding: 15px;

		top:50%;
		left:50%;
		transform: translate(-50%, -50%);

		display: none;
		/*width: calc(80%-20px);*/
		width: 80%;
		height: 84%;
		max-width: 350px;
		/*max-height: 650px;*/
		background-image: url('../images/Mobile/back_mo.svg');
		border-radius: 5% / 2%;
	}
	.text1{
		max-height: 100px;
		margin-top: 15px;
		height: 40%;
		padding-left:20px;
		padding-right:20px;
		margin-bottom: 20px;
	}
		.viewXRposter{
		height:185px;
		width: 300px;
	}
	.closebtn.btnposter#closeXR{
		padding-right: 20px;
		top: 15px;
		width: 20px;
		height: 20px;
	}
	.closebtn.btnposter#close00{
		padding-right: 20px;
		top: 15px;
		width: 20px;
		height: 20px;

	}
	.closebtn.btnposter#closePoster{
				padding-right: 20px;
		top: 15px;
		width: 20px;
		height: 20px;
	}
	.viewPoster{
		height:354px;
		width: 250px;
	}
	.view00poster{
		height:135px;
		width: 300px;
	}

}

@media screen and (max-width: 320px) {
	.viewXRposter{
		height:160px;
		width: 260px;
	}
	.viewPoster{
		height:312px;
		width: 220px;
	}
	.view00poster{
		height:117px;
		width: 260px;
	}

}

@media not all and (min-resolution:.001dpcm)
{ 
@supports (-webkit-appearance:none) and (stroke-color:transparent){
	.safari_only.keyboardbtn.up{
		margin-right: -5px;
	}
}

}