@charset "utf-8";

@import url('../css/font-awesome-pro/css/all.min.css');
@import url('../scripts/fancybox-5/dist/fancybox/fancybox.css');

/************************************************************************************
CSS RESET
*************************************************************************************/

*{
	margin:0; 
	padding:0;
	outline:0; 
	box-sizing: border-box;
	text-rendering: optimizeSpeed;
}
html{height:100%;}
h1{font-size:1.4em; line-height: 1.3;}
h2{font-size:1.3em; line-height: 1.3;}
h3{font-size:1.2em;}
h4{font-size:1.1em;}
h5{font-size:1em;}
h6{font-size:.9em;}
a{text-decoration:none;} 
p{padding: 0 0 10px 0;}
img{border:0; border-spacing:0; max-width: 100%;}
img, embed{vertical-align:middle;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, img, embed {margin: 0; padding: 0; outline: 0;}
:focus {outline: 0;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0; border: 1px solid #eee}
table td, table th {border: 1px solid #eee; padding: 1.6rem;}
caption, th, td {font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong, b, h1, h2, h3, h4, h5, h6 {font-weight:700;}
em {font-style:italic;}
sup {vertical-align: super;}

input[type=text], input[type=password], input[type=file], input[type=submit], input[type=reset], input[type=search], textarea, button {-webkit-appearance: none; -moz-appearance: none; appearance: none;}

input[type=number]::-webkit-inner-spin-button {opacity: 1;}

/************************************************************************************
Reset HTML5 Elements to Block
*************************************************************************************/

main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

/************************************************************************************
CSS WEBSITE
*************************************************************************************/

:root {
	font-size: 10px;
}

html {
	overflow-x: hidden;
}
body {
	font-family: "Inter", system-ui;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background-color: #081225;	
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
	height: 100%;
	font-size: 16px;
	color: #000;
}

#wrapper {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 100%;
	height: 100%;
	position: relative;
	padding: 1.6rem;
}

.logo {
	position: fixed;
	bottom: 0;
	left: 0;
	margin: auto;
	text-align: center;
	padding: 1.2rem 2rem;
	z-index: 12;
	background-color: rgba(255,255,255,.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-top-right-radius: .8rem;
	border-top-left-radius: .8rem;
}
.logo img {
	display: inline-block;
	width: auto;
	height: 3.2rem;
}

.hea_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6rem;
	color: #fff;
}
.l_hwrap {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}
.logo_hwrap img {
	display: block;
	width: auto;
	height: 4rem;
}
.line_l_hwrap {
	width: 0.1rem;
	height: 4rem;
	background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}
.na_hwrap {
	position: relative;
	font-size: 28px;
	font-weight: 400;
	line-height: 40px;
}
.ntn_hwrap {
	display: flex;
	gap: 1rem;
	padding: 0.7rem;
	border: 0.1rem solid #33456f;
	background-color: #111d39;
	border-radius: .8rem;
	-webkit-border-radius: .8rem;
	-moz-border-radius: .8rem;
	-ms-border-radius: .8rem;
	-o-border-radius: .8rem;
}
.ntn_hwrap select {
	background: url(../imgs/arrow-down-1.svg) no-repeat center right 0.4rem;
	background-size: auto 0.8rem;
	border: 0;
	color: rgba(255,255,255,0.8);
	font-size: 12px;
	width: 5.2rem;
	height: 2.4rem;
	padding: 0 .4rem;
}
.ntn_hwrap select:focus {
	background-color: rgba(255,255,255,0.1);
	border-radius: .2rem;
	-webkit-border-radius: .2rem;
	-moz-border-radius: .2rem;
	-ms-border-radius: .2rem;
	-o-border-radius: .2rem;
}
.ntn_hwrap select option {
	color: #000;
	font-size: 12px;
}
.sty_slec {-webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
.sty_slec::-ms-expand {display: none;}

.title_wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6rem;
}
.col_title_wrap {
	flex: 1 0 20rem;
	min-width: .1rem;
	background-color: #111d39;
	color: #fff;
	padding: 2rem;
	height: 12rem;
	display: flex;
	gap: 16px;
	align-items: center;
	border-radius: .8rem;
	-webkit-border-radius: .8rem;
	-moz-border-radius: .8rem;
	-ms-border-radius: .8rem;
	-o-border-radius: .8rem;
}
.col_title_wrap_1 .content_l_col_title_wrap strong, .col_title_wrap_1 .r_col_title_wrap i {
	color: #e28c23;
}
.col_title_wrap_2 .content_l_col_title_wrap strong, .col_title_wrap_2 .r_col_title_wrap i {
	color: #a68ddc;
}
.col_title_wrap_3 .content_l_col_title_wrap strong, .col_title_wrap_3 .r_col_title_wrap i {
	color: #70c1a7;
}
.col_title_wrap_4 .content_l_col_title_wrap strong, .col_title_wrap_4 .r_col_title_wrap i {
	color: #d9968c;
}

.l_col_title_wrap {
	flex: 1;
	min-width: .1rem;
}
.r_col_title_wrap {
	width: 6.4rem;
	height: 6.4rem;
	font-size: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255,255,255,0.05);
	border-radius: .8rem;
	-webkit-border-radius: .8rem;
	-moz-border-radius: .8rem;
	-ms-border-radius: .8rem;
	-o-border-radius: .8rem;
}
.title_l_col_title_wrap {display: block;
	margin-bottom: .4rem;
	text-transform: capitalize;
	font-weight: 500;
	color: #fff;
}
.content_l_col_title_wrap {
	display: flex;
	align-items: flex-end;
	gap: 4px;
}
.content_l_col_title_wrap strong {
	font-size: 40px;
	font-weight: 500;
}
.content_l_col_title_wrap i, .content_l_col_title_wrap span {
	margin-bottom: .8rem;
}

.content_wrap {
	flex: 1;
	height: calc(100% - 192px);
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	overflow: hidden;
}
.dt_cwrap {
	flex: 1 0 40%;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.r_cwrap {
	flex: 1 0 40%;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
.r_page {
	color: #fff;
	background-color: #111d39;
	padding: 1.6rem;
	border-radius: 0.8rem;
	-webkit-border-radius: 0.8rem;
	-moz-border-radius: 0.8rem;
	-ms-border-radius: 0.8rem;
	-o-border-radius: 0.8rem;
}
.title_r_page {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.8rem;
	color: #fff;
	margin-bottom: 1.6rem;
}
.title_r_page h2 {
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
}

.bd_cwrap {
	flex: 1;
}
.content_bd_cwrap {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
.tbl_cwrap .title_r_page {
	margin-bottom: 0;
}
.num_tbl_cwrap {
	font-size: 18px;
	font-weight: 500;
}
.content_dt_cwrap {
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-color: rgba(0,0,0,0.2) #111d39;
  	scrollbar-width: thin;
}
.content_dt_cwrap::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background: #111d39;
	border-radius: 0.4rem;
	-webkit-border-radius: 0.4rem;
	-moz-border-radius: 0.4rem;
	-ms-border-radius: 0.4rem;
	-o-border-radius: 0.4rem;
}
.content_dt_cwrap::-webkit-scrollbar-thumb {
	width: 8px; 
	background-color: rgba(0,0,0,0.2);
	border-radius: 0.4rem;
	-webkit-border-radius: 0.4rem;
	-moz-border-radius: 0.4rem;
	-ms-border-radius: 0.4rem;
	-o-border-radius: 0.4rem;
}
.content_dt_cwrap::-webkit-scrollbar-track {
	padding: 4px;
}

.tb_content_wrap {
	width: 100%;
	border: 0;
}
.tb_content_wrap td {
	border: 0;
	padding: 2rem;
}
.tb_content_wrap thead {
	position: sticky;
	top: 0;
	background-color: #1d2943;
	border-bottom: 0.1rem solid rgba(0,0,0,0.2);
}
.tb_content_wrap thead td {
	font-weight: 500;
}
.tb_content_wrap tbody tr {
	border-bottom: 0.1rem solid rgba(255,255,255,0.05);
}
.tb_content_wrap tbody tr:hover {
	background-color: rgba(255,255,255,0.05);
}
.right_tb_content_wrap {
	text-align: right;
}
.pri_tb_content_wrap {
	color: #e9ca4c;
}
.rqtb_tb_content_wrap {
	display: block;
	color: #ec8888;
	font-size: 12px;
}
.rqtc_tb_content_wrap {
	display: block;
	color: #99ec88;
	font-size: 12px;
}
.st_up {
	font-size: 18px;
	color: #99ec88;
	font-weight: 500;
}
.st_down {
	font-size: 18px;
	color: #ec8888;
	font-weight: 500;
}

.f_login {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.content_f_login {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 48rem;
	max-width: 100%;
	padding: 3.2rem;
	background-color: #111d39;
	border: 0.1rem solid #33456f;
	color: #fff;
	border-radius: 0.8rem;
	-webkit-border-radius: 0.8rem;
	-moz-border-radius: 0.8rem;
	-ms-border-radius: 0.8rem;
	-o-border-radius: 0.8rem;
}

.r1_f_login {
	display: flex;
	justify-content: center;
}
.r1_f_login img {
	display: block;
	width: auto;
	height: 4.8rem;
}

.list_r2_f_login > li {
	margin-bottom: 2.4rem;
}
.list_r2_f_login > li:last-child {
	margin-bottom: 0;
}
.lb_list_r2_f_login {
	font-size: 14px;
	margin-bottom: 1.2rem;
	color: rgba(255, 255, 255, 0.8);
}
.ct_list_r2_f_login {
	position: relative;
}
.ipt_list_r2_f_login {
	width: 100%;
	height: 4.8rem;
	border: 0;
	color: #fff;
	padding: 0 1.2rem;
	background-color: #1d2943;
	font-family: "Inter", system-ui;
	border: 0.1rem solid rgba(255,255,255,0.05);
	box-sizing: border-box;
	border-radius: 0.8rem;
	-webkit-border-radius: 0.8rem;
	-moz-border-radius: 0.8rem;
	-ms-border-radius: 0.8rem;
	-o-border-radius: 0.8rem;
	transition: border 0.4s;
	-webkit-transition: border 0.4s;
	-moz-transition: border 0.4s;
	-ms-transition: border 0.4s;
	-o-transition: border 0.4s;
}
.ipt_list_r2_f_login:focus {
	border: 0.1rem solid rgba(255,255,255,0.15);
}
.but_list_r2_f_login {
	width: 100%;
	height: 4.8rem;
	border: 0;
	cursor: pointer;
	background-color: #2773dc;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	font-family: "Inter", system-ui;
	border-radius: 0.8rem;
	-webkit-border-radius: 0.8rem;
	-moz-border-radius: 0.8rem;
	-ms-border-radius: 0.8rem;
	-o-border-radius: 0.8rem;
}
.but_list_r2_f_login:hover {
	opacity: 0.96;
}
.but_list_r2_f_login:active {
	background-color: #2068ca;
}
.img_cacha {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	z-index: 1;
	display: inline-block;
	width: auto;
	height: 4rem;
	border-radius: 0.4rem;
	-webkit-border-radius: 0.4rem;
	-moz-border-radius: 0.4rem;
	-ms-border-radius: 0.4rem;
	-o-border-radius: 0.4rem;
}
.st_error {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 12px;
	color: #ec8888;
	padding-top: 1.2rem;
}

/************************************************************************************
RESPOSIVE
*************************************************************************************/



@media only screen and (max-width: 1600px) {
	.content_l_col_title_wrap strong {
		font-size: 26px;
	}
}

@media only screen and (max-width: 1440px) {
	.content_l_col_title_wrap strong {
		font-size: 20px;
	}
}

@media only screen and (max-width: 1280px) {
	html {
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		overflow-x: hidden;
	}

	.content_wrap {
		display: flex;
	}
	.dt_cwrap, .r_cwrap {
		overflow: hidden;
	}
	.col_title_wrap {
		flex-basis: 40%;
		height: 10rem;
	}
	.content_dt_cwrap {
		max-height: 50rem;
		overscroll-behavior: none;
		overflow: auto;
	}

}
@media only screen and (max-width: 1023px) {
	.na_hwrap {
		font-size: 20px;
	}
	.tb_content_wrap thead td, .tb_content_wrap {
		font-size: 16px;
	}
}

@media only screen and (min-width: 480px) and (max-device-width: 959px) and (orientation: landscape) {
	body {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	body::before {
		content: "Màn hình không hỗ trợ, vui lòng xoay đứng thiết bị để xem";
		color: #fff;
		text-align: center;
	}
	#wrapper {
		display: none;
	}
}

@media only screen and (min-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
	.col_title_wrap {
		flex-basis: 20rem;
	}
	.content_l_col_title_wrap {
		position: relative;
	}
	.content_l_col_title_wrap i, .content_l_col_title_wrap span {
		margin-bottom: 0;
		font-size: 1.2rem;
	}
	.col_title_wrap {
		padding: 1.6rem;
	}
	.r_col_title_wrap {
		width: 4.8rem;
		height: 4.8rem;
		font-size: 2.4rem;
	}
	.tb_content_wrap thead td, .tb_content_wrap {
		font-size: 1.2rem;
	}
	.title_r_page h2 {
		font-size: 1.6rem;
	}
	.tb_content_wrap td {
		padding: 1.2rem;
	}
}

@media only screen and (min-width: 540px) and (max-device-width: 960px) and (orientation: landscape) {
	.title_wrap, .content_wrap, .r_cwrap {
		gap: 1.2rem;
	}
	.r_col_title_wrap {
		width: 4rem;
		height: 4rem;
		font-size: 2rem;
	}
	.title_l_col_title_wrap {
		font-size: 1.2rem;
	}
	.content_l_col_title_wrap strong {
		font-size: 1.4rem;
		font-weight: 700;
	}
	.rqtb_tb_content_wrap, .content_l_col_title_wrap i, .content_l_col_title_wrap span {
		font-size: 1rem;
	}
}

@media only screen and (max-width: 640px) {
	.logo {
		top: 0;
		bottom: auto;
		right: 0;
	}
	.title_wrap {
		margin: 0 -1.6rem;
		padding: 0 1.6rem;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;		
	}
	.title_wrap::-webkit-scrollbar {
		display: none;
	}
	.col_title_wrap {
		flex-basis: 90%;
	}
	.content_l_col_title_wrap strong {
		font-size: 18px;
	}
	.content_l_col_title_wrap i, .content_l_col_title_wrap span {
		margin-bottom: .4rem;
		font-size: 14px;
	}
	.content_dt_cwrap {
		width: 100%;
		
	}
}

@media only screen and (max-width: 480px) {
	.r_hwrap {
		flex: 1 0 100%;
	}
	.ntn_hwrap {
		padding: 0;
		border: none;
		background: none;
	}
	.ntn_hwrap select {
		flex: 1;
		width: 100%;
		height: 4rem;
		padding: 0 1.2rem;
		background-position: center right 0.8rem;
		border: 0.1rem solid #33456f;
		background-color: #111d39;
		border-radius: 0.8rem;
		-webkit-border-radius: 0.8rem;
		-moz-border-radius: 0.8rem;
		-ms-border-radius: 0.8rem;
		-o-border-radius: 0.8rem;
	}
	.ntn_hwrap select:focus {
		border-radius: 0.8rem;
		-webkit-border-radius: 0.8rem;
		-moz-border-radius: 0.8rem;
		-ms-border-radius: 0.8rem;
		-o-border-radius: 0.8rem;
	}
	.f_login {
		background-color: #111d39;
	}
	.content_f_login {
		padding: 2.4rem;
		border: 0;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
	}

	#wrapper {
		height: auto;
	}
	.content_wrap {
		flex-direction: column;
	}
	.dt_cwrap , .r_cwrap {
		flex-basis: 100%;
		width: 100%;
	}
}

@media only screen and (max-width: 375px) {
	.logo_hwrap img {
		height: 3.2rem;
	}
	.na_hwrap {
		font-size: 16px;
	}
}