@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
*{margin: 0; padding: 0;}
body{
	font-family: Arial, Tahoma, "Noto Sans JP", "Meiryo", sans-serif;
	font-size: 16px;
	line-height: 1.6;

	background-color: #f2f2f2;
}
.lang-vi{
	font-family: "Merriweather", Tahoma, serif;
}
.lang-ja{
	font-family: "sans-serif";
	font-size: 14pt;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }


/*COMMON*/
.DIS_PC{display: inline-block !important;}
.DIS_MB{display: none !important;}

.SPACE_50{display: block;margin-top: 50px !important;}
.SPACE_40{display: block;margin-top: 40px !important;}
.SPACE_20{display: block;margin-top: 20px !important;}

.PAD_BOT_50{display: block;padding-bottom: 50px !important;}
.PAD_BOT_30{display: block;padding-bottom: 30px !important;}

.no_lrpad{
	padding-left: 0px !important;
	padding-right: 0px !important;
	width: 100% !important;
	max-width: 1460px !important;
}

._bg_greyx01{
	background: linear-gradient(41deg,rgba(227, 227, 227, 1) 0%, rgba(179, 179, 179, 1) 50%, rgba(153, 153, 153, 1) 100%);	
}

._bg_greyx02{
	background-color: #2C2D2F;
}
._bg_greyx02 h1{
	color: #FFF;
}

._bg_white{
	background-color: #FFFFFF;
}
._bg_violet{
	background-color: #D5D8E7;
}
._bg_blue{
	background-color: #EBF6ED;
}


ul._horz_list{
	display: block;width: 100%;list-style: none;
}
ul._horz_list li{
	display: inline-block; float: left;
}

/* ĐỊNH NGHĨA STYLE CHO HEADER */
header{
	display: block;
	width: calc(100% - 60px);
	height: 60px;
	padding: 0px 30px 0px 30px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #E7E7E7;


  position: fixed;
  top: 0;
  left: 0;
  /*width: 100%;*/
  transition: transform 0.3s ease;
  z-index: 999;
}
header.hide {
  transform: translateY(-100%);
}

header.show {
  transform: translateY(0);
}

header .head_menu{
	display: inline-block;
	line-height: 60px;
}

/*List Menu*/
ul.head_menu{
	display: inline-block;
	list-style: none;
	margin-left: 30px;
	cursor: pointer;
}
ul.head_menu li{
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
}
ul.head_menu li:hover{
	background-color: #f2f2f2;
}

ul.head_menu li#active{
	height: 59px;
	border-bottom: 2px solid blue;
	background-color: #f2f2f2;
}

ul.head_menu li img{
	display: inline-block;
	width: 14px;
	margin-left: 5px;
	transform: rotate(180deg);
	transition: 0.5s;
}
ul.head_menu li:hover img{
	transform: rotate(0deg);
}


ul.submei{
	position: absolute;
	display: none;
	width: 200px;
	margin-left: -20px;
	border-radius: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 1px;

	background-color: #FFF;

	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
ul.submei li{
	display: block;
	height: 35px;
	line-height: 35px;
}
ul.submei li:hover{
	background-color: unset;
	color: blue;
}
ul.head_menu li:hover ul.submei{
	display: block;
}
ul.submei li a{
	color: black;
	text-decoration: none;
}
ul.submei li a:hover{
	color: blue;
}


.lnk_logo {
	width: 60px;
	height: 60px;
	text-decoration: none;

	background-image: url(../../img/ui/trinhvanqui.png);
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: left center;
}
#lnk_trinh{
	width: 130px;
	background-image: url(../../img/ui/txt-trinhvanqui.png);
	background-size: 140px;
	margin-right: 20px;
}

#lnk_profile{
	float: right;
	height: unset;
	line-height: unset;
	padding: 2px 15px;
	text-decoration: none;
	margin-top: 15px;
	border-radius: 15px;

	background-color: #1a4ccc;
	color: #edf2ff;
}

#btn_menu{
	display: none;
	float: right;
	width: 60px;
	margin-left: 20px;

	background-image: url(../../img/ui/ic_head_menu.png);
	background-size: 36px;
	background-repeat: no-repeat;
	background-position: center;
}
#btn_menu:hover{
	background-color: #f2f2f2;
}


/*ĐỊNH NGHĨA STYLE CHO SECTION*/
section{
	display: inline-block;
	width: 100%;
	min-height: 50px;
}
article{
	display: block;
	width: calc(100% - 40px);
	max-width: 1500px;
	padding-left: 20px;
	padding-right: 20px;
	min-height: 50px;
	margin: auto;
}

footer{
	display: block;
	width: 100%;
	min-height: 150px;
	background-color: #000;
	color: #FFF;
	padding: 20px 0px;
}

/*Footer*/
footer ul#footer_list{
	display: inline-flex;
	list-style: none;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
}
footer ul#footer_list li.main_list{
	display: inline-block;
	font-weight: bold;
	width: 25%;
}

footer ul.footer_sub_list{
	margin-top: 20px;
}
footer ul.footer_sub_list li{
	display: block;
	font-weight: normal;
	min-height: 20px;
}
footer ul.footer_sub_list li a{
	display: inline-block;
	word-wrap: break-word;
	text-decoration: none;
	color: #B4B4B4;
	min-height: 20px;
}
footer ul.footer_sub_list li a:hover{
	text-decoration: underline;
}
/*footer_sns*/
footer ul#footer_sns{
	list-style: none;
	margin-top: 15px;
}
footer ul#footer_sns li{
	display: inline-block;
	margin-left: 20px;
}
footer ul#footer_sns li:first-child{
	margin-left: 0px;
}
footer ul#footer_sns li a{
	text-decoration: none;
	color: #FFF;
}
footer ul#footer_sns li a:hover{
	color: #FFF798;
}
footer ul#footer_sns li a:active{
	color: #FFB950;
}
footer ul#footer_sns li span{
	display: block;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	background-color: #F2F2F2;
	background-image: url(../../img/ui/youtubechanel-trinhvanqui.png);
	background-size: 100%;
	border: 2px solid #000000;
	transition: 0.3s;
}
footer ul#footer_sns li:last-child span{
	background-image: url(../../img/ui/youtubechanel-quehuongtrongtim.png);
}
footer ul#footer_sns li:hover span{
	border: 2px solid white;
}
footer ul#footer_sns li label{
	font-size: 9px;
}


footer p{
	color: #939393;
	font-size: 13px;
}



/*COMMON CHO CATALOG VA ARTICLE*/
/*COMMON*/
article.single_center{
	min-height: 150px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
article.single_center h1{
	padding-bottom: 20px;
}
article.single_center a{
	display: inline-block;
	min-width: 150px;
	line-height: 40px;
	text-align: center;
	background-color: #202124;
	color: #FFF;
	border-radius: 30px;
	text-decoration: none;

	margin-top: 20px;
	margin-bottom: 20px;
}
article.single_center a._ref{
	background-color: unset;
	color: #000;
	border: 1px solid #000;
	line-height: 38px;
	margin-left: 10px;
}
article.single_center a._ref:hover{
	background-color: #f2f2f2;
}
article.single_center a._ref:active{
	background-color: #bfbfbf;
}
article.single_center p._text{
	max-width: 500px;
	margin: auto;
}
article.single_center p img{
	max-width: 100%;
}


/*List Item*/
article.list_item{
	min-height: 150px;
	padding-top: 20px;
	padding-bottom: 20px;
}
article.list_item h1{
	text-align: center;
	padding-bottom: 20px;
}
article.list_item ul{
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-row-gap: 20px;
	list-style: none;
	font-size: 0px;
}
article.list_item ul li{
	display: inline-flex;
	width: calc(25% - 15px);
	background-color: #FFFFFF;
	font-size: 16px;
	min-height: 80px;
	border-radius: 10px;
}
article.list_item ul.no-cover li{
	padding-top: 20px;
}

article.list_item ul li a{
	display: block;
	width: 100%;
	text-decoration: none;
}
article.list_item ul li a img{
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
article.list_item ul li:hover{
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
article.list_item ul li:active{
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
article.list_item ul li label{
	display: block;
	width: calc(100% - 20px);
	font-size: 11px;
	padding: 0px 10px;
	color: #909090;
}
article.list_item ul li span{
	display: block;
	width: calc(100% - 20px);
	padding: 2px 10px 5px 10px;
	color: #272727;
	font-weight: bold;
}
article.list_item ul li._space{
	height: 1px;
	min-height: unset !important;
	background-color: transparent;
}
article.list_item ul li._space:hover{
	background-color: unset;
	box-shadow: unset;
}

/*Book - extends*/
ul.list_book li{
	display: inline-flex;
	width: calc(20% - 20px);
	max-width: 200px;
	background-color: transparent;
	font-size: 16px;
	min-height: 100px;
	border-radius: unset !important;
	font-family: Tahoma;
}
ul.list_book li a img{
	width: 100%;
	border-radius: unset !important;
}

/*Panel Top Moi Page*/
.top_page_panel{
	margin-top: 60px !important;
}

/*=================================================*/
/* Comment Notice Dùng trong Bài Viết  */
/*=================================================*/
.notice {
	display: block;
	width: calc(100% - 24px);
	border: 1px solid #E3DBBC;
	padding: 10px;
	border-radius: 5px;
	background-color: #f3e7c1;
	border-left: 4px solid #F2BD41;
	color: #261E0A;
	font-size: 11pt;
}
.notice span {
	color: #bf8f1e;
}




/*Popup START***********************************/
section.popup{
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 7777;
	top: 0;
	overflow: auto;

	background-color: #FFF;

}
section.popup article{
	max-width: 1200px;
}


section.popup p.txt{
	text-indent: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 16pt;
	font-family: math, Tahoma;
}
section.popup p img{
	display: block;
	margin: auto;
	max-width: 80%;
	border: 3px solid #E5E5E5;
}
section.popup p img:hover{border-color: #D6D6D6;}
section.popup p img:active{border-color: #C1C1C1;}

section.popup p.hint{
	color: grey;
	font-size: 11pt;
	text-align: center;
	padding-top: 10px;
}

div.popup-frm{
	display: block;
	width: 100%;
}

div#popup_panel{
	height: 500px;
	background-color: #F7F7F7;
}
div#popup_panel article{
	height: 500px;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center right;
}

article#tvz-page{
	background-image: url(../../img/ui/tvz-panel-icon.jpg);
}
article#fjs-page{
	background-image: url(../../img/ui/fjn-panel-icon.png);
}
article#nihongooo-page{
	background-image: url(../../img/ui/nihongoo-panel-icon.png);
}
article#jlpttest-page{
	background-image: url(../../img/ui/jlpttest-panel-icon.png);
}

div.prod_intro{
	position: absolute;
}
div#prod_quote{
	font-size: 18pt;
	top: 150px;
}
div#prod_desc{
	top: 190px;
}
div#prod_name{
	top: 250px;
}
div#prod_name img{
	max-width: 200px;
}

div#popup_function{
	min-height: 200px;
	background-color: #2C2D2F;
	color: #FFF;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}
div#popup_function p{
	text-align: left;
	line-height: 30px;
}

div#popup_body{
	min-height: 500px;
	background-color: #FFF;
	padding-top: 50px;
	padding-bottom: 50px;
	/*text-align: center;*/
}

div#popup_body h1{
	border-left: 5px solid #2C2D2F;
	padding-left: 20px;
	margin-bottom: 20px;
}

/*Popup END*************************************/