:root {
	--font-family: 'Mitr', 'Pridi', "Kanit", 'Source Sans Pro', sans-serif;
	--color-main: #85FFE8;
}

body {
	padding: 0;
	margin: 0;
	font-size: 16px; /* 16px */
	font-weight: normal;
	font-variant: normal;
	overflow-x: hidden;
	font-family: var(--font-family);
}

body.bg-img {
	background: url('../img/bg/bg_main.png') no-repeat; 
	background-attachment: fixed;
  	background-position: center;
	background-size: 100% 100%;
}

.font-pridi {
	font-family: "Pridi" !important;
}

.font-kanit {
	font-family: "Kanit" !important;
}

.f-xs {
	font-size: 14px;
}

/* width */
::-webkit-scrollbar {
	width: 9px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
	opacity: 0.1;
}

/* Handle */
::-webkit-scrollbar-thumb {
	border-radius: 30px;
	background: #95A5A6; 
	opacity: 0.1;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #BFC9CA; 
}

a:hover {
	color: #000 !important;
}

img {
	font-size: 12px !important;
	max-width: 100%;
	height: auto;
}

button {
	outline: 0 !important;
}

/* .wrapper {
	padding: 10px 0;
	background-color: #fff;
} */

.content {
	padding: 20px 0;
}

@media (min-width: 992px) {
	.content {
		padding: 30px 0;
	}
}

@media (min-width: 1200px) {
	.content {
		padding: 50px 0;
	}
}

.d-table {
	width: 100%;
	height: 100%;
}

.d-table-cell {
	vertical-align: middle;
}

.ptb-100 {
	padding-top: 100px;
	padding-bottom: 100px;
}

.pt-70 {
	padding-top: 70px;
}

.pb-70 {
	padding-bottom: 70px;
}

.pb-100 {
	padding-bottom: 100px;
}

.pt-100 {
	padding-top: 100px;
}

.text-red {
	color: #F96864 !important;
}

.text-orange {
	color:#F8AA3C !important;
}

.text-green {
	color:#2caf92 !important;
}

.text-youtube {
	color: #cc0000 !important;
}

.text-line {
	color: #07b53b !important;
}

.text-facebook {
	color: #1877f2 !important;
}

.text-gray {
	color: #747576 !important;
}

.text-blue {
	color: rgb(0, 13, 169) !important;
}

.text-blue2 {
	color: #1F1973 !important;
}

.text-black {
	color: #000 !important;
}

.color-text {
	color: #5764ec;
}

.right-by {
	color: #000;
	font-size: 17px;
	font-weight: 600;
}

ul { /*dl, ol,*/
	padding: 0;
	margin: 0;
	list-style: none;
}

.layout-detail > ul {
	padding-left: 2rem;
}

.padding-section {
	padding: 80px 0;
}

a {
	text-decoration: none;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
	will-change: transform;
	outline: 0 !important;
	color: #0b0b31;
}

a:hover {
	text-decoration: none;
	color: #5764ec;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	font-family: var(--font-family);
}

p {
	font-size: 16px;
	line-height: 1.8;
	color: #747576;
	margin-bottom: 15px;
	font-weight: 400;
	font-family: var(--font-family);
}

p:last-child {
	margin-bottom: 0;
}

.bg-gradient {
	background-image: linear-gradient(rgba(255,0,0,0) 0%, rgba(255,0,0,0) 60%, var(--color-main) 80%, #7EFAF6 100%) !important;
} 

.bg-gradient-main {
	background-image: linear-gradient(rgba(255,0,0,0) 0%, rgba(255,0,0,0) 30%, var(--color-main) 60%, #7EFAF6 100%) !important;
} 

.bg-green {
	background-color: #88DECA !important;
}

.bg-blue-gradient {
	background-image: linear-gradient(#C8F2F1 0%, #E4FBF9 100%) !important;
} 

.bg-card-detail {
	background-color: #E4FBF9 !important;
}

.bg-qa-qs {
	background-color: #ECF8F6 !important;
}

.bg-file, .bg-danger2 {
	background-color: #F09BAF !important;
}

.bg-file.disabled {
	background-color: #6c757d !important;
	pointer-events: none;
    opacity: .65;
}

.bg-blue {
	background-color: #7BCFD1 !important;
}

.bg-orange {
	background-color: #F7A65D !important;
}

.bg-grey {
	background-color: rgba(136, 116, 181, .11) !important;
}

.bg-red {
	background-color: #F96864 !important;
}

.bg-ping {
	background-color: #F7ABB5 !important;
}

.bg-default {
	background-color: #C0E7DF !important;
}

.btn {
	font-size: 13px !important;
}

.btn-default {
	background-color: #32C9A8;
	/* border-color: #32C9A8; */
	color: #fff;
}

.btn-search {
	background-color: #F7A65D;
	border-color: #F7A65D;
	color: #fff;
}

.btn-orange {
	background-color: #FFB776;
	border-color: #FFB776;
	color: #000;
}

.btn-default span {
	display: none;
}

.btn-login {
	background-color: #007bff;
	border-color: #007bff;
	color: #fff;
}

.btn-login:hover {
	background-color: #0062cc;
	border-color: #0062cc;
	color: #fff;
}

@media (min-width: 992px) {
	.btn-default span {
		display: inline;
	}
}

.btn-default.btn-like.active {
	color: #fff;
	background-color: #dc3545;
	border-color: #dc3545;
}

.btn-default.btn-fav.active {
	color: #fff;
	background-color: #F4D03F;
	border-color: #F4D03F;
}

.btn-default:disabled {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}

.btn-primary, .btn-primary-2 {
	border: none;
	display: inline-block;
	line-height: initial;
	border-radius: 3px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	padding: 12px 30px;
	position: relative;
	z-index: 1;
	font-size: 15px;
	font-weight: 600;
}

.btn-lern {
	color: #fff !important;
	background-color: #F7ABB5 !important; 
	border-color: #F7ABB5 !important;
}

.btn-lern:hover {
	color: #fff !important;
	background-color: #e38e99 !important; 
	border-color: #e38e99 !important; 
}

.btn-outline-warning {
	color: #F4831B !important;
    border-color: #F4831B !important;
}

.btn-outline-warning:hover {
	background-color: #F4831B;
	color: white !important;
}

.btn-primary {
	display: inline-block;
	color: #000;
	background-image: linear-gradient(135deg, #58EBCA 0%, #58EBCA 50%, #2CAF92 50%, #2CAF92 100%);
	background-position: right center;
	text-align: center;
	text-decoration: none;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: color, background;
	transition-property: color, background;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	background-size: 270% auto;
}

.btn-primary-2 {
	display: inline-block;
	color: #000;
	background-image: linear-gradient(135deg, #F96864 0%, #F96864 50%, #F99B45 50%, #F99B45 100%);
	background-position: right center;
	text-align: center;
	text-decoration: none;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: color, background;
	transition-property: color, background;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	background-size: 270% auto;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary-2:hover, .btn-primary-2:focus {
	color: #000;
	background-position: left center;
	-webkit-box-shadow: unset !important;
	-moz-box-shadow: unset !important;
	box-shadow: unset !important;
}

.btn-mr-right-20 {
	margin-right: 20px;
}

.section-title {
	text-align: center;
	margin-bottom: 50px;
}

.section-title h6 {
	font-size: 15px;
	color: #ff561d;
	font-weight: 700;
	margin-bottom: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.section-title h2 {
	font-size: 38px;
	color: #0b0b31;
	font-weight: 800;
	margin: 0;
}

.button-top {
	position: fixed;
	cursor: pointer;
	top: 0;
	right: 35px;
	color: #ffffff;
	background-color: #5764ec;
	z-index: 4;
	width: 45px;
	text-align: center;
	height: 45px;
	line-height: 45px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .9s;
	transition: .9s;
	border-radius: 0;
}

.button-top.active {
	top: 85%;
	-webkit-transform: translateY(-98%);
	transform: translateY(-98%);
	opacity: 1;
	visibility: visible;
}

.button-top i {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: 0 auto;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.button-top i:last-child {
	opacity: 0;
	visibility: hidden;
	top: 60%;
}

.button-top::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #ff561d;
	opacity: 0;
	visibility: hidden;
	border-radius: 0;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.button-top:hover, .button-top:focus {
	color: #ffffff;
}

.button-top:hover::before, .button-top:focus::before {
	opacity: 1;
	visibility: visible;
}

.button-top:hover i:first-child, .button-top:focus i:first-child {
	opacity: 0;
	top: 0;
	visibility: hidden;
}

.button-top:hover i:last-child, .button-top:focus i:last-child {
	opacity: 1;
	visibility: visible;
	top: 50%;
}

.navbar-expand-lg .navbar-collapse {
	display: none;
}

.nav-body {
	padding-right: 0;
	padding-left: 0;
}

.nav-body .navbar {
	padding-right: 0;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 0;
}

.nav-body .navbar ul {
	padding-left: 0;
	list-style-type: none;
	margin-bottom: 0;
}


.nav-body .navbar i {
	padding: 7.5px;
}

.nav-body .navbar .navbar-nav {
	margin: auto;
}

.nav-body .navbar .navbar-nav .nav-item {
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 0;
	padding-right: 0;
}

.nav-body .navbar .navbar-nav .nav-item a {
	font-size: 14px; /* 16px */
	font-weight: 300;
	color: #333;
	font-weight: bold;
	text-transform: capitalize;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-left: 13px;
	margin-right: 13px;
}

@media (min-width: 1200px) {
	.nav-body .navbar .navbar-nav .nav-item a {
		margin-left: 13px;
		margin-right: 13px;
	}
}

@media (min-width: 1400px) {
	.nav-body .navbar .navbar-nav .nav-item a {
		margin-left: 20px;
		margin-right: 20px;
	}
}

.nav-body .navbar .navbar-nav .nav-item a i {
	font-size: 10px;
	position: relative;
	top: -1px;
	margin-left: 1px;
}

/* .nav-body .navbar .navbar-nav .nav-item:last-child a {
	margin-right: 0;
}

.nav-body .navbar .navbar-nav .nav-item:first-child a {
	margin-left: 0;
} */

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu {
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	background: #ffffff;
	position: absolute;
	border: none;
	top: 80px;
	left: 0;
	width: 235px;
	z-index: 1050 !important;
	display: block;
	opacity: 0;
	visibility: hidden;
	border-radius: 0;
	/* -webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; */
	padding: 0;
	margin: 0;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li {
	padding: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	/*dashed*/
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li a::before {
	position: absolute;
	left: -5px;
	top: 50%;
	width: 0;
	height: 1px;
	background-color: #58EBCA;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}

.nav-body .navbar-collapse ul.navbar-nav a.nav-link:hover, .nav-body .navbar-collapse ul.navbar-nav .nav-item .dropdown-menu .nav-item a.nav-link:hover {
	color: #fff;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li a {
	text-transform: capitalize;
	padding: 0;
	margin: 0;
	color: #0b0b31;
	font-size: 14px;
	font-weight: 400;
	position: relative;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li a:hover::before, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li a:focus::before, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li a.active::before {
	width: 5px;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
	left: -245px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
	color: #696997;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: -245px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: -245px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: 195px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: 195px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: 195px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li.active a {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: 0px;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li.active a {
	color: #58EBCA;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: 0px;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.nav-body .navbar .navbar-nav .nav-item:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: 100%;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.nav-body .navbar .navbar-nav .nav-item .dropdown-menu.dropdown-menu-end {
	right: 0 !important;
	left: auto !important;
}

.nav-body .navbar .navbar-login {
	margin-left: 0px;
	margin-top: 0px;
	display: flex;
}

.nav-search {
	position: fixed;
	width: 100%;
	top: 61px;
	padding: 5px;
	background-color: #fff;
	padding: 10px 0;
}

.navbar-login .nav-item {
	align-items: center;
}

.navbar-login .nav-item a {
	margin: 0 5px !important;
}

.nav-body .black-logo {
	display: none;
}

.dropdown-main-top {
	width: 260px !important;
}

.p-5px {
	padding: 5px !important;
}

.navbar-top-name-area {
	width: 65px;
	text-align: end;
}

.navbar-top-name {
	font-size: 18px;
}

.navbar-top-img {
	width: 51px;
	height: 51px;
	overflow: hidden;
	border-radius: 50%;
	background-color: #fff;
	border: 1px solid #F8F9FA;
	margin: 5px;
}

.navbar-top-img img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.navbar-top-img > .badge {
	width: 24px;
	height: 24px;
	padding: 6px !important;
    font-size: 10px;
    font-weight: 400;
    position: absolute;
	vertical-align: middle;
	text-align: center;
    right: 0;
    top: 5;
	z-index: 99;
	border-radius: 50%;
}

.menu-top-img {
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 50%;
	/* background-color: #fff; */
	margin: auto;
	border: 1px solid #F8F9FA;
}

.menu-top-img img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.navbar-area {
	background-color: #ffffff;
	position: relative;
	z-index: 999;
	width: 100%;
	height: auto;
	-webkit-box-shadow: 0 0px 8px 0 rgba(108, 112, 138, 0.15);
	-moz-box-shadow: 0 0px 8px 0 rgba(108, 112, 138, 0.15);
	box-shadow: 0 0px 8px 0 rgba(108, 112, 138, 0.15);
}

.navbar-area.this-sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	-webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
	box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
	background: #ffffff !important;
}

.nav-body.nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	-webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
	box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
	background: var(--color-main);
	will-change: transform;
}

.navbar-area.this-sticky .navbar-nav .nav-item a {
	color: #333;
}

.navbar-area.this-sticky .navbar-nav .nav-item a:hover, .navbar-area.this-sticky .navbar-nav .nav-item a:focus, .navbar-area.this-sticky .navbar-nav .nav-item a.active {
	color: #58EBCA;
}

.navbar-area.this-sticky .nav-body .navbar-brand .footer-logo-img {
	display: none;
}

.footer-logo-img {
	width: 100px;
	height: auto;
}

.navbar-area.this-sticky .nav-body .navbar-brand .black-logo {
	display: block;
}

@media only screen and (max-width: 991px) {
	.navbar-area.this-sticky {
		border-bottom: none;
		-webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.navbar-area.this-sticky .logo .footer-logo-img {
		display: none;
	}
	.navbar-area.this-sticky .logo .black-logo {
		display: block;
	}
	.nav .logo-menu {
		position: relative;
	}
	.nav .logo-menu.mean-container .mean-nav ul {
		font-size: 14px;
	}
	.nav .logo-menu.mean-container .mean-nav ul li a {
		font-size: 15px;
	}
	.nav .logo-menu.mean-container .mean-nav ul li a.active {
		color: #5764ec;
	}
	.nav .logo-menu.mean-container .mean-nav ul li li a {
		font-size: 15px;
	}
	.nav .logo-menu.mean-container .navbar-nav {
		overflow-y: scroll;
		height: 336px;
		-webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
	}
	.nav .logo-menu.mean-container .others-options {
		display: none;
	}
	.nav .mean-container a.meanmenu-reveal {
		color: #0b0b31;
	}
	.nav .mean-container a.meanmenu-reveal span {
		background: #0b0b31;
	}
	.nav .logo {
		position: relative;
		width: 50%;
		z-index: 999;
	}
	.nav .logo .footer-logo-img {
		display: block;
	}
	.nav .logo .black-logo {
		display: none;
	}
}

.nav-body .navbar .option-item {
	margin-right: 30px;
	position: relative;
}

.nav-body .navbar .option-item .search-btn {
	font-size: 15px;
	color: #737373;
	cursor: pointer;
	background: transparent;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 3px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.nav-body .navbar .option-item .close-btn {
	font-size: 15px;
	color: #737373;
	cursor: pointer;
	display: none;
	background: transparent;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 3px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.nav-body .navbar .option-item .close-btn.active {
	display: block;
}

.search-overlay {
	display: none;
}

.search-overlay.search-popup {
	position: absolute;
	top: 60px;
	width: 350px;
	background: #ffffff;
	z-index: 2;
	right: 0;
	padding: 20px;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	margin-top: 0;
}

.search-overlay.search-popup .search-form {
	position: relative;
}

.search-overlay.search-popup .search-form .search-input {
	display: block;
	width: 100%;
	height: 50px;
	line-height: initial;
	border: 1px solid #e0e0e0;
	color: #02162e;
	outline: 0;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	padding-top: 4px;
	padding-left: 10px;
}

.search-overlay.search-popup .search-form .search-button {
	position: absolute;
	right: 0;
	top: 0;
	height: 50px;
	background: #5764ec;
	border: none;
	width: 50px;
	line-height: 53px;
	outline: 0;
	color: #ffffff;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	padding: 0;
}

.search-overlay.search-popup .search-form .search-button i {
	font-size: 15px;
}

.banner-area {
	background-color: #fff;
	background: url("../img/banner/banner_220311.jpg") no-repeat;
	background-position: 100% 80%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	z-index: 1;
	margin-top: 61px;
	height: 250px; /* height: 450px; */
}

.banner-middle {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
}

.banner-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0.6;
}

@media (min-width: 992px) {
	.banner-middle {
		position: absolute;
		content: "";
		width: 50%;
		height: 60%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%)
	}
}

.banner-middle .container {
	position: relative;
	z-index: 3;
}

.banner-content {
	width: 100%;
	height: 100%;
	padding: 20px 0;
}

.banner-title {
	color: #333;
	font-size: 45px;
	font-weight: 800;
	margin-bottom: 20px;
}

.banner-description {
	max-width: 500px;
}

.banner-description p {
	margin-bottom: 0;
	color: #333;
	font-size: 18px;
}

.banner-btn-box {
	margin-top: 25px;
}

.carousel-indicators {
	margin-bottom: 0;
}

.banner-bottom {
	width: 65%;
	height: 35%;
	background-color: #fff;
	position: absolute;
	left: 0px;
	bottom: 0px;
	opacity: 0.8;
	padding: 5px 10px;
	align-items: center;
}

.banner-right {
	width: 26%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	right: 0px;
	top: 0px;
	overflow: visible;
	opacity: 0.8;
	padding: 10px;
	align-items: center;
}

@media (min-width: 576px) {
	.banner-right {
		width: 26%;
		height: 100%;
		padding: 10px;
	}
}

@media (min-width: 768px) {
	.banner-right {
		width: 28.5%;
		height: 100%;
		padding: 20px;
	}
}

@media (min-width: 992px) {
	.banner-area {
		height: 500px;
	}
}

@media (min-width: 1200px) {
	.banner-area {
		height: 550px;
	}
	.banner-right {
		width: 26%;
		height: 100%;
		padding: 20px;
	}
}

@media (min-width: 1400px) {
	.banner-area {
		height: 630px;
	}
	.banner-right {
		width: 25%;
		height: 100%;
		padding: 20px;
	}
}

.banner-right .carousel-inner {
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.carousel .carousel-inner {
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.carousel-item {
	text-align: center;
	/* padding: 10px; */
}

.carousel-item p {
	font-size: 15px;
}

@media (min-width: 768px) {
	.carousel-item p {
		font-size: 15px;
	}
}

@media (min-width: 992px) {
	.carousel-item p {
		font-size: 18px;
	}
}

@media (min-width: 1200px) {
	.carousel-item p {
		font-size: 20px;
	}
}

@media (min-width: 1400px) {
	.carousel-item p {
		font-size: 22px;
	}
}

.banner-logo {
	width: 180px;
	height: 183px;
	margin-bottom: 30px;
}

.banner-logo2 {
	width: auto;
	height: 100%;
}

.icon-area {
	/* background-image: linear-gradient(rgba(255,0,0,0) 0%, rgba(255,0,0,0) 90%,#fff 100%); */
	background: url('../img/bg/bg_icon.png') no-repeat; 
	background-position: center;
	background-size: 100% 100%;
}
img.img-icon {
	object-fit: cover;
	width: 120px;
	height: 60px;
}
img.img-icon2 {
	width: 90px;
	height: 50px;
}

@media (min-width: 768px) {
	img.img-icon {
		width: 100px;
		height: 70px;
		margin: auto;
	}
}

@media (min-width: 992px) {
	img.img-icon {
		width: 110px;
		height: 80px;
		margin: auto;
	}
}

@media (min-width: 1200px) {
	img.img-icon {
		width: 130px;
		height: 90px;
		margin: auto;
	}
}

.law-area {
	background-image: linear-gradient(#fff 0%, #fff 90%, rgba(255,0,0,0) 100%);
}

.law-title {
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qa-title {
	position: absolute;
	top: -70px;
    right: calc(50% - 181px);
	margin: auto;
}

div.qa-content .card-body {
	z-index: 88 !important;
}


.qa-content h2 {
	color: #fff;
	font-size: 38px;
	font-weight: 800;
	margin-bottom: 10px;
}

.qa-content p {
	color: #fff;
	font-size: 15px;
	font-weight: 400;
}

.qa-table {
	border: 3px solid #7BCFD1;
}

.qa-table td:first-child {
	width: 15%;
}

.qa-table td:last-child {
	width: 85%;
}

.qa-table td {
	padding: 10px; 
}

.qa-table p {
	font-family: 'Pridi';
	color: #212529;
}

.btn-qa-user {
	background-color: #90E8D8;
	font-size: 8px;
	min-width: 120px;
	width: auto;
	height: 70px;
	margin: 5px;
}

.btn-qa-user p {
	font-size: 14px;
	color: #000;
}

.btn-qa-user img {
	padding: 5px;
	width: auto;
	height: 30px;
}
.btn-qa-user:hover {
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075) !important;
}

.btn-qa-user:active {
	zoom: 95%;
}

.qa-menu-user {
	justify-content: center !important;
}

@media (min-width: 992px) {
	.qa-menu-user {
		justify-content: flex-end !important;
	}
}

.qa-me-img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
}

.qa-me-img img {
	width: 100%;
	height: auto;
}

.qa-me-detail p {
	color: #000;
	font-family: "Pridi";
	display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qa-me-detail a {
	display: flex;
	justify-content: center;
}

.qa-home-img {
	padding: 20px 60px;
}

@media (min-width: 768px) {
	.qa-home-img {
		padding: 25px;
	}
}

@media (min-width: 992px) {
	.qa-home-img {
		padding: 30px;
	}
}

@media (min-width: 1200px) {
	.qa-home-img {
		padding: 35px;
	}
}

.qa-home-img img{
	width: 100%;
	height: auto;
}

.logo-main {
	width: auto;
	height: 52px;
}

.left-sidebar-area {
	width: 0;
	height: 0;
	position: fixed;
	z-index: 9999;
	background-color: red;
}

.left-sidebar {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}

.left-sidebar-area.active .left-sidebar {
	width: 250px;
}

.left-sidebar a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 18px;
	color: #fff;
	display: none;
	transition: 0.3s;
}

.left-sidebar-area.active .left-sidebar a {
	display: block;
	transition: 0.3s;
}

.left-sidebar a:hover {
	color: #f1f1f1;
}

.left-sidebar a span {
	font-size: 12px;
}

.left-sidebar .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
	z-index: 10000;
}

.card-box {
	position: relative;
	z-index: 1;
	padding: 35px 25px;
	text-align: center;
	border-radius: 5px;
	background-color: #ffffff;
	margin-bottom: 30px;
	-webkit-box-shadow: -1px 3px 20px 0px rgba(82, 90, 101, 0.1);
	-moz-box-shadow: -1px 3px 20px 0px rgba(82, 90, 101, 0.1);
	box-shadow: -1px 3px 20px 0px rgba(82, 90, 101, 0.1);
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
	will-change: transform;
}

.card-box:before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	min-width: 100%;
	/* border-bottom: 3px solid #5764ec; */
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	transform: scaleX(0);
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
	will-change: transform;
}

.card-box:hover:before {
	transform: scaleX(1);
}

.card-box .services-icon {
	position: relative;
	display: inline-block;
	z-index: 1;
	width: 80px;
	height: 80px;
	line-height: 80px;
	border: 1px solid #f5f6ff;
	border-radius: 50%;
	color: #5764ec;
	margin-bottom: 20px;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.choose-item {
	position: relative;
	z-index: 1;
	margin-top: 20px;
}

.choose-item-icon {
	position: absolute;
	left: 0;
	top: 0;
}

.choose-item-icon .choose-item-icon-number {
	/* background: url(../img/circle-border.svg) 0 0 no-repeat; */
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	width: 64px;
	height: 64px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/* align-items: center; */
	flex-wrap: nowrap;
}

.choose-body {
	padding-left: 85px;
	padding-top: 20px;
}

.choose-body h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
}

.card-box:hover .choose-item-number-bg span {
	color: #5764ec;
}

.choose-item-number-bg {
	position: absolute;
	top: -40px;
	left: 10px;
	width: 120px;
	z-index: -1;
	text-align: right;
}

.choose-item-number-bg span {
	font-size: 12.5rem;
	color: rgba(0, 0, 0, .03);
	font-weight: 700;
	line-height: 1;
}

.card-box:hover .services-icon {
	border-color: #5764ec;
	color: #ffffff;
	-webkit-transform: scale(.98);
	-moz-transform: scale(.98);
	-ms-transform: scale(.98);
	-o-transform: scale(.98);
	transform: scale(.98);
}

.card-box .services-icon::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #f5f6ff;
	z-index: -1;
	border-radius: 50%;
	margin: 5px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.card-box:hover .services-icon::before {
	background: #5764ec;
}

.card-box .services-icon i::before {
	font-size: 35px;
}

.card-box h3 {
	font-size: 18px;
	margin-bottom: 0;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
	will-change: transform;
}

.card-box h3 a {
	display: inline-block;
}

.card-box p {
	font-size: 15px;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
	will-change: transform;
	margin-top: 15px;
	margin-bottom: 0;
}

.card-box .services-btn {
	margin-top: 16px;
}

.card-box .services-btn .services-btn-one {
	display: inline-block;
	font-size: 15px;
	color: #5764ec;
	font-weight: 700;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
	will-change: transform;
}

.card-box .services-btn i {
	position: relative;
	color: #5764ec;
	top: 1px;
	font-weight: bold;
	-webkit-transition: all 400ms ease-out;
	transition: all 400ms ease-out;
}

.card-box .services-btn i::before {
	font-size: 14px;
}

.card-box:hover {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}

.card-box:hover h3 {
	color: #333;
}

.card-box:hover h3 a {
	color: #333;
}

.card-box:hover p {
	color: #333;
}

.card-box:hover .services-btn .services-btn-one {
	color: #333;
}

.card-box:hover .services-btn i {
	color: #333;
}

.search-area {
	background-color: #DFF6F4;
	margin-top: 61px;
	padding: 10px 0;
}

.search-area.this-sticky {
	position: sticky;
	top: 61px;
	left: 0;
	width: 100%;
	z-index: 990;
}

.title-main-area {
	margin-top: 61px;
	padding: 20px 0;
}

.m-top {
	margin-top: 61px;
}

@media (min-width: 992px) {
	.title-main-area {
		padding: 30px 0;
	}
}

@media (min-width: 1200px) {
	.title-main-area {
		padding: 40px 0;
	}
}

.title {
	font-weight: 500;
	margin-bottom: 20px;
}

.page-title {
	font-weight: 400;
	padding: 5px 0;
}

/* .content-left {
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	border: 1px solid #;
} */

ul.content-left li.nav-item a {
	font-size: 14px;
	padding: 15px;
	color: #212529;
	display: -webkit-box;
    /* -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
    overflow: hidden;
}

ul.content-left li.nav-item {
	margin: 3px 0;
	background-color: #7BCFD1;
}

ul.member-top-menu li.nav-item.color-blue {
	background-color: #7BCFD1;
}

ul.content-left li.nav-item:hover {
	color: #212529;
	background-color: #C9EBF3;
}

ul.content-left li.nav-item.active {
	background-color: #C9EBF3;
}

ul.content-left li.nav-item.color-orange, ul.member-top-menu li.nav-item.color-orange {
	background-color: #FFB776 !important;
}

ul.content-left li.nav-item.color-orange.active {
	background-color: #fff !important;
	border: 5px solid #FFB776;
}

ul.content-left li.nav-item.color-red, ul.member-top-menu li.nav-item.color-red {
	background-color: #F7ABB5 !important;
}

ul.content-left li.nav-item.color-red.active {
	background-color: #fff !important;
	border: 5px solid #F7ABB5;
}

ul.content-left li.nav-item.color-green, ul.member-top-menu li.nav-item.color-green {
	background-color: #7BCFD1 !important;
}

ul.content-left li.nav-item.color-green.active {
	background-color: #fff !important;
	border: 5px solid #7BCFD1;
}

ul.content-left li.nav-item.color-orange:hover, ul.content-left li.nav-item.color-red:hover, ul.content-left li.nav-item.color-green:hover {
	opacity: 90%;
}

.nav-img {
	width: 25px;
	height: 25px;
}

.nav-tabs-page .nav-link {
	font-size: 18px;
	color:#F8AA3C;
}

.sortby {
	padding: 6px;
}

.row-sortby-area {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #daf9d2;
	justify-content: center !important;
}

@media (min-width: 992px) {
	.row-sortby-area {
		margin-bottom: 5px;
		border: none;
		justify-content: flex-end !important;
	}
}

.btn-list {
	background-color: #fff;
	border: 1px solid #adadad;
}

.btn-list.active, .btn-list:hover, .btn-list:focus {
	background-color: #e6e6e6;
}

.tab-pane {
	padding: 20px;
	background-color: #fff;
}

.tab-content {
	border-top: none;
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-color: #dee2e6 !important;
  	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.card-list-img {
	cursor: pointer;
}

.card-list-img:hover {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	padding-bottom: 10px;
}

.card-list-img .card .card-body {
	height: 78px;
}

.card-img-area {
	width: 100%;
	height: 180px;
	overflow: hidden;
}

@media (min-width: 768px) {
	.card-img-area {
		height: 150px;
	}
}
@media (min-width: 992px) {
	.card-img-area {
		height: 145px;
	}
}

@media (min-width: 1200px) {
	.card-img-area {
		height: 160px;
	}
}

@media (min-width: 1400px) {
	.card-img-area {
		height: 180px;
	}
}

.card-img-area img.card-img-size {
	width: 100%;
	height: 100%;
	/* object-fit: cover; */
}

.card-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
	overflow: hidden;
	color: #000;
}

.card-list-singer:hover {
	/* background-color: #C0E7DF; */
	-webkit-box-shadow: 0px 0px 17px 0 #00000038;
	-moz-box-shadow: 0px 0px 17px 0 #00000038;
	-ms-box-shadow: 0px 0px 17px 0 #00000038;
	box-shadow: 0px 0px 17px 0 #00000038;
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	border-color: #198754;
}

.card-list-singer p , .card-list-img p {
	font-size: 14px;
}

.card-list-qa-me.active {
	background-color: #E5F5F2;
}

/* .row-title-detail, .row-border-bottom {
	border-bottom: 1px solid #dee2e6;
} */

.row-border-top {
	border-top: 1px solid #dee2e6;
}

.layout-detail p {
	font-family: "Pridi";
	color: #000;
}

.btn-share {
	width: 40px;
	height: 40px;
	border: 1px solid #CFCECE;
	border-radius: 50%;
	margin: 10px;
}

.btn-share:hover {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.btn-share:active {
	zoom: 95%;
}

@media (min-width: 768px) {
	.btn-share {
		width: 65px;
		height: 65px;
	}
}

.contact-card {
	min-height: 300px;
	overflow: hidden;
}

.contact-map {
	position: absolute;
	width: 100%;
	height: auto;
}

@media (min-width: 992px) {
	.contact-card {
		height: 450px;
	}
	.contact-map {
		width: 100%;
		height: 100%;
	}
}

@media (min-width: 1200px) {
	.contact-card {
		height: 500px;
	}
	.contact-map {
		width: 100%;
		height: 100%;
	}
}

.contact-card.contact-details {
	overflow-y: auto;
}

.contact-card p {
	color: #000;
	font-size: 15px;
}

.contact-card i {
	color: #7BCFD1;
	font-size: 20px;
}

.map-area {
	padding: 10px;
}

@media (min-width: 768px) {
	.map-area {
		padding: 30px;
	}
}

@media (min-width: 992px) {
	.map-area {
		padding: 50px;
	}
}

.about-card-img img {
	width: 100%;
	height: 100%;
}

.about-card-hover {
	display: none;
	position: absolute;
	top: 10px;
	left: 15px;
	right: 15px;
	bottom: 10px;
	z-index: 2;
	transition: .3s all;
    animation: fadeIn .3s ease-in;
	/* -webkit-transition: all .5s;
	transition: all .5s; */
	background-image: linear-gradient(135deg, #58EBCA 0%, #58EBCA 50%, #2CAF92 50%, #2CAF92 100%);
	overflow: auto;
}

.about-card:hover .about-card-hover {
	transition: .3s all;
    animation: fadeIn .3s ease-in;
	display: block;
}

.about-card-hover p {
	color: #000;
	padding: 8px;
}

.about-hover-text {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	text-align: center;
	overflow: hidden;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	will-change: transform;
}

.about-card-detail {
	margin-top: 10px;
	height: 49px;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

a.link-service:hover .card {
	-webkit-box-shadow: 0px 0px 17px 0 #00000038;
	-moz-box-shadow: 0px 0px 17px 0 #00000038;
	-ms-box-shadow: 0px 0px 17px 0 #00000038;
	box-shadow: 0px 0px 17px 0 #00000038;
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	background-color: #ffffff;
	border-color: #ffffff;
}

#training-carousel {
	width: 100%;
	max-height: 650px;
	overflow: hidden;
}

#training-carousel .carousel-inner {
	height: 100%;
}

#training-carousel .carousel-inner .carousel-item img {
	width: 100%;
}

.title-training {
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #000;
}

.waiting {
	width: 100px;
	height: auto;
}

.inhouse-img {
	width: 60%;
	height: auto;
	padding: 50px 0;
}

.padding-course {
	padding: 20px 0;
}

.video-main {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	/* padding-top: 25px; */
	height: 0;
}

.video-main iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-des {
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
	text-align: justify !important;
	font-weight: 300;
	margin: 0;
}

.video-list-area {
	/* max-height: 333px; */
	height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* @media (min-width: 992px) {
	.video-list-area {
		max-height: 350px;
	}
}

@media (min-width: 1200px) {
	.video-list-area {
		max-height: 380px;
	}
}

@media (min-width: 1400px) {
	.video-list-area {
		max-height: 540px;
	}
} */

.video-list {
	height: 100%;
}

.video-item {
	display: flex;
	padding: 10px;
	border-radius: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	cursor: pointer;
}

.video-item:hover {
	background-color: #F4F6F6;
}

.video-img {
	object-fit: cover;
    width: 180px;
    height: 90px;
    overflow: hidden;
	text-align: center;
}

.video-img img{
	width: auto;
	height: 100%;
}

.video-info {
	padding: 0 10px;
	width: 100%;
	height: 100%;
}

.video-title {
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	margin: 0;
	color: #000;
}

.video-description {
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
	margin: 0;
}

.direct-chat-msg {
    margin-bottom: 10px;
}

.direct-chat-info {
    display: flex;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.direct-chat-img {
    border-radius: 50%;
    float: left;
    height: 40px;
    width: 40px;
    overflow: hidden;
}

.direct-chat-img img {
    width: 100%;
    height: auto;
	vertical-align: top;
	border-style: none;
}

/* .direct-chat-text {
    border-radius: 0.3rem;
    background: #d2d6de;
    border: 1px solid #d2d6de;
    color: #000;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
} */

.testing-title {
	position: absolute;
	top: -70px;
    right: calc(50% - 181px);
	margin: auto;
}

.testing-content {
	padding: 20px;
}

@media (min-width: 992px) {
	.testing-content {
		padding: 15% 0;
	}
}

/* @media (min-width: 1400px) {
	.testing-content {
		padding: 25% 0;
	}
} */

.test-title {
	padding: 0px 0;
	text-align: center;
	padding: 60px 0;
}

img.test-title-img {
	max-width: 380px;
	width: 100%;
	height: auto;
}

.test-title h3 {
	font-size: 15px;
}

@media (min-width: 768px) {
	.test-title {
		padding: 110px 0;
	}
	.test-title h3 {
		font-size: 20px;
	}
}

@media (min-width: 992px) {
	.test-title {
		padding: 120px 0;
	}
	.test-title h3 {
		font-size: 24px;
	}

}

@media (min-width: 1200px) {
	.test-title {
		padding: 120px 0;
	}
}

.test-banner-area {
	background-image: linear-gradient(#fff 0%, var(--color-main) 100%) !important;
	position: relative;
	z-index: 1;
	margin-top: 61px;
	width: 100%;
    /* padding: 10px 0; */
}

.test-banner-area .test-banner-middle {
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
}

.test-img-card {
	max-width: 400px;
	width: 100%;
	height: auto;
}

img.test-img-reward {
	object-fit: cover;
	width: 70px;
	height: 78px;
}

.test-p-reward {
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-reward-name {
	font-size: 12px;
}

.icon-reward {
	position: absolute;
	top: 20px;
	right: 10px;

}

.icon-reward img {
	width: 100%;
	height: auto;
}

.choice-title span {
	font-size: 10px;
}
.choice-title {
	display: inline-block;
	background-color: #fff;
	border-radius: 50%;
	border: 1px solid #90E8D8;
	width: 34px !important;
	height: 34px !important;
    padding: 9px 0;
    text-align: center;
	margin: 1.25px;
}

.choice-title:hover {
	background-color: #F2F3F4;
}

.choice-title.active {
	background-color: #7BCFD1;
}

.choice-sticky {
	position: sticky;
	top: 71px;
}

/* .choice-id {
	padding-top: 72px;
} */

.g-chart {
	width: 100%; 
}

.footer {
	background: #BBFFF7;
	padding: 20px 0;
}

/* @media (min-width: 992px) {
	.footer-about {
		padding-right: 50px;
	}
} */

.footer-details {
	zoom: 100%;
}

@media (min-width: 768px) {
	.footer-details {
		zoom: 60%;
	}
}

@media (min-width: 992px) {
	.footer-details {
		zoom: 65%;
	}
}

@media (min-width: 1200px) {
	.footer-details {
		zoom: 80%;
	}
}

@media (min-width: 1400px) {
	.footer-details {
		zoom: 100%;
	}
}

.footer-logo {
	margin-bottom: 20px;
	display: inline-block;
}

.footer-details h5 {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	margin-bottom: 25px;
}

.footer-details p {
	font-size: 15px;
	color: #000;
}

.footer-details ul li {
	margin-bottom: 8px;
	color: #000;
}

.footer-details ul li:last-child {
	margin-bottom: 0px;
}

.footer-details ul li a, .text-black-link {
	display: inline-block;
	font-size: 15px;
	color: #000;
}

.footer-details ul li a:hover, .text-black-link:hover {
	color: #2471A3;
	text-decoration: underline;
}

.footer-contact-info .footer-contact-list li span {
	display: inline-block;
	color: #000;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
}

.footer-ic-social {
	margin-top: 10px;
}

.footer-ic-social li {
	margin-right: 10px;
	display: inline-block;
}

.footer-ic-social li a {
	color: #fff !important;
	font-size: 20px !important;
	width: 40px;
	height: 40px;
	line-height: 0;
	border-radius: 3px;
	text-align: center;
	border: 1px solid transparent;
	border-radius: 30px;
	display: block;
	padding: 10px 5px;
}

.footer-ic-social li a.facebook {
	background: #1877f2;
}

.footer-ic-social li a.twitter {
	background: #1D9BF0;
}

.footer-ic-social li a.line {
	background: #07b53b;
}

.footer-ic-social li a.youtube {
	background: #cc0000;
}

.footer-ic-social li:hover a {
	background: #000;
}

.footer-logo-link {
	width: 25px;
	height: 25px;
	margin-left: 5px;
}

.copyright {
	background-color: var(--color-main);
	/*#1f1f1f;*/
	padding: 10px 0;
}

.copyright p {
	color: #000;
	font-size: 15px;
}

.select2, .select2bs {
	width: 100% !important;
}

li.select2-results__option {
	border-bottom: 1px solid #daf9d2;
}

.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
	background-color: #58EBCA !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection:focus {
  border-color: #ced4da;
}
select.form-control+.select2-container {
	display: block;
}
select.form-control.d-none+.select2-container {
	display: none;
}
.page-length {
	width: 100px !important;
	margin: 5px;
}

.nav-item > button.nav-link {
	padding: 10px 30px;
}

.nav.nav-tabs.nav-tabs-page li.nav-item button.nav-link {
	width: 100%;
}

.pagination {
	margin-top: 1px;
}

.paginationjs-pages, .paginationjs-nav, .paginationjs-go-input, .paginationjs-go-button, .page-length .s2bs {
	margin: 5px;
}

.text-justify {
	text-align: justify !important;
}

.modal-share .modal-content {
	background: url('../img/character/bg_share.png') no-repeat; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #C0E7DF;
}

.modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 26px;
	z-index: 500;
}

.modal-close:hover {
	color: #198754;
}

.input-group-append button.btn {
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.file-upload {
	width: 100%;
	text-align: start;
}

.file-upload a {
	font-size: 15px;
	color: #000;
}

.file-upload-name {
	width: 85%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 300;
}

.file-upload-remove {
	margin-left: 5px;
	width: 10%;
	text-align: end;
	opacity: 0.5;
}

.file-upload-list {
	max-width: 350px;
}

.file-upload-remove:hover {
	opacity: 1;
	zoom: 110%;
}

.file-upload-remove:active {
	opacity: 1;
	zoom: 100%;
}

.icon-like, .icon-fav, .icon-remove, .link-detail , .link-menu {
	color: #D6DBDF;
	font-size: 25px;
}

.icon-like:hover, .icon-fav:hover, .icon-remove:hover, .link-detail:hover {
	color: #AEB6BF;
}

.icon-like:active, .icon-like.active, .text-like.active, .icon-remove:active {
	color: #dc3545;
}

.icon-fav.active, .icon-fav:active, .text-fav.active {
	color: #F4D03F;
}

.link-detail:hover p, .link-detail:active p, .link-detail:active i {
	color: #157347;
}

.card > .badge {
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    right: -8px;
    top: -10px;
}

.card > .badge.popular{
    font-size: 30px;
	color: #FFB838;
    position: absolute;
    right: -8px;
    top: -15px;
	/* transform: rotate(25deg); */
	padding: 0;
}

.card > .badge.badge-title {
    font-size: 20px;
    font-weight: 400;
    position: absolute;
    right: calc(50% - 15px);
    top: -20px;
}

.badge-title {
	padding: 10px 15px;
	border-radius: 50%;
}

.btn-xs {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

.text-xs {
    font-size: .875rem;
}

.text-bold {
	font-weight: bold;
}

.collapse-icon {
	position: absolute;
	top: 5px;
	right: 16px;
	font-size: 30px;
}

.rating {
	color:#D5DBDB;
}

.rating.active {
	color:#F4D03F;
}

.link-icon-home:hover {
	zoom: 90%;
}

.link-icon-home:active {
	zoom: 100%;
}

.ez-loading {
	width: 160px;
	height: auto;
}

.loading {
	width: 50px;
	height: 50px;
}

.ribbon-wrapper {
    height: 70px;
    overflow: hidden;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 70px;
    z-index: 10;
}

.ribbon-wrapper .ribbon {
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
    font-size: .8rem;
    line-height: 100%;
    padding: .375rem 0;
    position: relative;
    right: -2px;
    text-align: center;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 40%);
    text-transform: uppercase;
    top: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 90px;
}

.ribbon-wrapper .ribbon::after, .ribbon-wrapper .ribbon::before {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #9e9e9e;
    bottom: -3px;
    position: absolute;
}

.ribbon-wrapper .ribbon::after {
    right: 0;
}

.ribbon-wrapper.ribbon-xl {
	height: 180px;
	width: 180px;
}

.ribbon-wrapper.ribbon-xl .ribbon {
    right: -13px;
    top: 31px;
    width: 240px;
}

.upload-zone {
    background-color: #F2FFF9;
    border-radius: 5px;
    padding: 20px;
	border: 1px dashed #F8AA3C;
}
.upload-drop .btn {
    overflow: hidden;
    position: relative;
}
.upload-drop .btn > input[type='file'] {
    background: #ffffff;
    cursor: inherit;
    display: block;
    font-size: 100px;
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    outline: none;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}
.img-status {
	width: 150px;
	height: auto;
}
.highlight {
	background-color: #FFFF00;
}
.ez-chat {
	transition: 1s all;
    animation: fadeIn 1s ease-out;
	cursor: pointer; 
	position: fixed; 
	bottom: 0px; 
	right: 20px; 
	z-index: 20000000;
}
.form-control.error {
	border-color: #dc3545;
	/* padding-right: 2.25rem; */
	background-position: right calc(.375em + .1875rem) center;
	background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
label.error {
	color: #dc3545;
}
.error .select2-selection {
	border: 1px solid #dc3545;
}
.border-red {
	border: 1px solid #dc3545;
}
.pass-not-match {
	font-size: 12px;
}
.cur-pointer {
	cursor:pointer;
}

.fs-7 {
	font-size: 12px !important;
}

.select2-selection.error {
	border: 1px solid #dc3545;
}

.nav-item.card {
	border-radius: 0;
}

#carouselBanner {
	opacity: 1;
}

.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.input-group input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append button{
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.nav-link-search i, .nav-link-search:active i {
	color: #333;
	opacity: 1;
}

.h-0 {
	height: 0;
}

.bcpy {
	-moz-user-select: none;  
	-webkit-user-select: none;  
	-ms-user-select: none;  
	-o-user-select: none;  
	user-select: none;
}

.gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title * {
	font-size: 22px !important;
	font-family: 'Mitr', sans-serif;
    transition: 0.3s;
}

.gsc-url-top, .gsc-table-result, .gs-snippet {
	font-size: 16px !important;
	font-family: 'Mitr', sans-serif;
    transition: 0.3s;
}

.btn-d {
	font-size: 15px;
    padding: 15px;
    color: #212529;
    display: block;
	width: 50%;
    overflow: hidden;
	border-radius: 3px;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
	background-color: #F7ABB5 !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.dpdpa--popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1), 0 2px 4px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.1), 0 8px 16px 0 rgba(0,0,0,0.1), 0 16px 32px 0 rgba(0,0,0,0.1);
    line-height: 1.6;
    z-index: 9999999997;
    opacity: 0;
    transform: translateY(30px); /* เลือกขนาดที่คุณต้องการให้เริ่มต้น */
    visibility: visible;
    transition: 1s all;
    animation: fadeIn 1s ease-out;
    display: none;
}

.dpdpa--popup.active {
    opacity: 1;
    transform: translateY(0);
    transition: 1s all;
    animation: fadeIn 1s ease-in;
    display: block;
}

.form-control {
	font-size: 14px !important;
}

.content-center {
	align-content: center;
}

.badge {
	padding: .25em .45em;
	font-weight: normal;
}

@media (max-width: 1024px) {
	.translate-middle {
		transform: translate(-90%, -50%) !important;
	}
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.rounded-circle {
    border-radius: 50%;
}

.text-ellipsis {
	align-content: center; 
	white-space: nowrap;
	overflow: hidden; 
	text-overflow: ellipsis;
}

.input-group > i.icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #ced4da;
    cursor: pointer;
    z-index: 99;
    font-size: 18px;
    text-align: right;
    line-height: 3rem;
    width: 2rem;
}

.input-group > i.icon:hover {
    transition: 0.3s all;
    color: #727272 !important;
}

.name-list, .remove-list {
	line-height: 24px;
	transition: 0.5s all;
}

.remove-list {
	opacity: 0;
}

.name-list.active,
.remove-list.active {
	cursor: pointer;
	opacity: 1;
	color: #F96864 !important;
	text-decoration: underline;
}

.btn-outline-success:hover {
	color: #fff !important;
}

.font-12 {
	font-size: 12px !important;
}

.font-14 {
	font-size: 14px !important;
}

.font-15 {
	font-size: 15px !important;
}

.font-16 {
	font-size: 16px !important;
}

.self-center {
	align-self: center;
}  

.video-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.video-title {
	font-size: 14px;
	margin-bottom: auto;
}

.playing-status {
	margin-top: 14px;
	font-size: 12px;
	color: #28a745;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: absolute;
    bottom: 5px;
    right: 10px;
}

.visualizer {
	display: inline-flex;
	align-items: center;
	margin-right: 6px;
}

.visualizer span {
	width: 3px;
	height: 12px;
	margin: 0 1px;
	background: #28a745;
	animation: bounce 1s infinite ease-in-out;
}

.visualizer span:nth-child(1) { animation-delay: 0s; }
.visualizer span:nth-child(2) { animation-delay: 0.2s; }
.visualizer span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
	0%, 100% { transform: scaleY(0.3); }
	50% { transform: scaleY(1); }
}

.video-item.playing {
	background-color: rgba(0, 0, 0, .05);
	/* background: linear-gradient(135deg, rgba(40,167,69,0.2), rgba(40,167,69,0.05)); */
	/* border: 1px solid rgba(40,167,69,0.4); */
	box-shadow: 0 4px 10px rgba(40,167,69,0.2);
	animation: glowPulse 2s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

/* @keyframes glowPulse {
	0%, 100% {
		box-shadow: 0 0 10px rgba(40,167,69,0.3);
	}
	50% {
		box-shadow: 0 0 20px rgba(40,167,69,0.5);
	}
} */

.start-85 {
	left: 85% !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 2rem;
}

.select2-container--bootstrap4 .select2-selection--single {
    height: calc(2rem + 2px) !important;
}

#card_identical_content > div {
	width: 100%;
	max-width: 280px;
}

.icon-certificate {
	display: inline-block;
	width: 28px;
	height: 28px;
	background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 20H5C3.89543 20 3 19.1046 3 18V4C3 2.89543 3.89543 2 5 2H19C20.1046 2 21 2.89543 21 4V18C21 19.1046 20.1046 20 19 20H17.5M12 19C13.6569 19 15 17.6569 15 16C15 14.3431 13.6569 13 12 13C10.3431 13 9 14.3431 9 16C9 17.6569 10.3431 19 12 19ZM12 19L12.0214 18.9998L8.82867 22.1926L6.00024 19.3641L9.01965 16.3447M12 19L15.1928 22.1926L18.0212 19.3641L15.0018 16.3447M9 6H15M7 9.5H17"/></svg>') no-repeat center;
	background-size: contain;
}

.icon-certificate-buycourse {
	display: inline-block;
	width: 26px;
	height: 26px;
	background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23E9E628" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 20H5C3.89543 20 3 19.1046 3 18V4C3 2.89543 3.89543 2 5 2H19C20.1046 2 21 2.89543 21 4V18C21 19.1046 20.1046 20 19 20H17.5M12 19C13.6569 19 15 17.6569 15 16C15 14.3431 13.6569 13 12 13C10.3431 13 9 14.3431 9 16C9 17.6569 10.3431 19 12 19ZM12 19L12.0214 18.9998L8.82867 22.1926L6.00024 19.3641L9.01965 16.3447M12 19L15.1928 22.1926L18.0212 19.3641L15.0018 16.3447M9 6H15M7 9.5H17"/></svg>') no-repeat center;
	background-size: contain;
}

.icon-certificate-testcourse {
	display: inline-block;
	width: 28px;
	height: 28px;
	background: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 37 37" xmlns="http://www.w3.org/2000/svg"><path d="M6.07031 4.625C5.07368 4.625 4.11786 5.02091 3.41314 5.72564C2.70841 6.43036 2.3125 7.38618 2.3125 8.38281V17.5403C3.58494 15.9195 5.42767 14.845 7.46498 14.536C9.50229 14.227 11.5808 14.7067 13.2766 15.8773C14.9724 17.0478 16.158 18.8211 16.5914 20.8357C17.0249 22.8502 16.6737 24.9541 15.6094 26.7186V28.9062H30.9297C31.9263 28.9062 32.8821 28.5103 33.5869 27.8056C34.2916 27.1009 34.6875 26.1451 34.6875 25.1484V8.38281C34.6875 7.38618 34.2916 6.43036 33.5869 5.72564C32.8821 5.02091 31.9263 4.625 30.9297 4.625H6.07031ZM10.4062 11.5625H26.5938C26.9004 11.5625 27.1945 11.6843 27.4113 11.9012C27.6282 12.118 27.75 12.4121 27.75 12.7188C27.75 13.0254 27.6282 13.3195 27.4113 13.5363C27.1945 13.7532 26.9004 13.875 26.5938 13.875H10.4062C10.0996 13.875 9.8055 13.7532 9.58866 13.5363C9.37182 13.3195 9.25 13.0254 9.25 12.7188C9.25 12.4121 9.37182 12.118 9.58866 11.9012C9.8055 11.6843 10.0996 11.5625 10.4062 11.5625ZM18.5 20.8125C18.5 20.5058 18.6218 20.2117 18.8387 19.9949C19.0555 19.7781 19.3496 19.6562 19.6562 19.6562H26.5938C26.9004 19.6562 27.1945 19.7781 27.4113 19.9949C27.6282 20.2117 27.75 20.5058 27.75 20.8125C27.75 21.1192 27.6282 21.4133 27.4113 21.6301C27.1945 21.8469 26.9004 21.9688 26.5938 21.9688H19.6562C19.3496 21.9688 19.0555 21.8469 18.8387 21.6301C18.6218 21.4133 18.5 21.1192 18.5 20.8125ZM15.0312 22.5469C15.0312 24.2335 14.3612 25.851 13.1686 27.0436C11.976 28.2362 10.3585 28.9062 8.67188 28.9062C6.98526 28.9062 5.36773 28.2362 4.17512 27.0436C2.9825 25.851 2.3125 24.2335 2.3125 22.5469C2.3125 20.8603 2.9825 19.2427 4.17512 18.0501C5.36773 16.8575 6.98526 16.1875 8.67188 16.1875C10.3585 16.1875 11.976 16.8575 13.1686 18.0501C14.3612 19.2427 15.0312 20.8603 15.0312 22.5469ZM13.875 28.7467C12.4187 29.9727 10.5755 30.6436 8.67188 30.6406C6.76825 30.6436 4.92501 29.9727 3.46875 28.7467V33.5312C3.4688 33.7374 3.52396 33.9398 3.62852 34.1174C3.73307 34.2951 3.88322 34.4416 4.06342 34.5417C4.24361 34.6418 4.4473 34.6919 4.65338 34.6869C4.85946 34.6818 5.06044 34.6217 5.2355 34.5129L8.67188 32.3738L12.1082 34.5129C12.2834 34.6218 12.4845 34.6819 12.6907 34.6869C12.8968 34.6919 13.1006 34.6417 13.2808 34.5414C13.4611 34.4411 13.6112 34.2945 13.7157 34.1167C13.8201 33.9389 13.8752 33.7363 13.875 33.5301V28.7467Z" fill="%23E9E628"/></svg>') no-repeat center;
	background-size: contain;
}

.icon-certificate-buyclip {
	display: inline-block;
	width: 26px;
	height: 26px;
	background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%2308BDFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 20H5C3.89543 20 3 19.1046 3 18V4C3 2.89543 3.89543 2 5 2H19C20.1046 2 21 2.89543 21 4V18C21 19.1046 20.1046 20 19 20H17.5M12 19C13.6569 19 15 17.6569 15 16C15 14.3431 13.6569 13 12 13C10.3431 13 9 14.3431 9 16C9 17.6569 10.3431 19 12 19ZM12 19L12.0214 18.9998L8.82867 22.1926L6.00024 19.3641L9.01965 16.3447M12 19L15.1928 22.1926L18.0212 19.3641L15.0018 16.3447M9 6H15M7 9.5H17"/></svg>') no-repeat center;
	background-size: contain;
}

.icon-certificate-testclip {
	display: inline-block;
	width: 28px;
	height: 28px;
	background: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 37 37" xmlns="http://www.w3.org/2000/svg"><path d="M6.07031 4.625C5.07368 4.625 4.11786 5.02091 3.41314 5.72564C2.70841 6.43036 2.3125 7.38618 2.3125 8.38281V17.5403C3.58494 15.9195 5.42767 14.845 7.46498 14.536C9.50229 14.227 11.5808 14.7067 13.2766 15.8773C14.9724 17.0478 16.158 18.8211 16.5914 20.8357C17.0249 22.8502 16.6737 24.9541 15.6094 26.7186V28.9062H30.9297C31.9263 28.9062 32.8821 28.5103 33.5869 27.8056C34.2916 27.1009 34.6875 26.1451 34.6875 25.1484V8.38281C34.6875 7.38618 34.2916 6.43036 33.5869 5.72564C32.8821 5.02091 31.9263 4.625 30.9297 4.625H6.07031ZM10.4062 11.5625H26.5938C26.9004 11.5625 27.1945 11.6843 27.4113 11.9012C27.6282 12.118 27.75 12.4121 27.75 12.7188C27.75 13.0254 27.6282 13.3195 27.4113 13.5363C27.1945 13.7532 26.9004 13.875 26.5938 13.875H10.4062C10.0996 13.875 9.8055 13.7532 9.58866 13.5363C9.37182 13.3195 9.25 13.0254 9.25 12.7188C9.25 12.4121 9.37182 12.118 9.58866 11.9012C9.8055 11.6843 10.0996 11.5625 10.4062 11.5625ZM18.5 20.8125C18.5 20.5058 18.6218 20.2117 18.8387 19.9949C19.0555 19.7781 19.3496 19.6562 19.6562 19.6562H26.5938C26.9004 19.6562 27.1945 19.7781 27.4113 19.9949C27.6282 20.2117 27.75 20.5058 27.75 20.8125C27.75 21.1192 27.6282 21.4133 27.4113 21.6301C27.1945 21.8469 26.9004 21.9688 26.5938 21.9688H19.6562C19.3496 21.9688 19.0555 21.8469 18.8387 21.6301C18.6218 21.4133 18.5 21.1192 18.5 20.8125ZM15.0312 22.5469C15.0312 24.2335 14.3612 25.851 13.1686 27.0436C11.976 28.2362 10.3585 28.9062 8.67188 28.9062C6.98526 28.9062 5.36773 28.2362 4.17512 27.0436C2.9825 25.851 2.3125 24.2335 2.3125 22.5469C2.3125 20.8603 2.9825 19.2427 4.17512 18.0501C5.36773 16.8575 6.98526 16.1875 8.67188 16.1875C10.3585 16.1875 11.976 16.8575 13.1686 18.0501C14.3612 19.2427 15.0312 20.8603 15.0312 22.5469ZM13.875 28.7467C12.4187 29.9727 10.5755 30.6436 8.67188 30.6406C6.76825 30.6436 4.92501 29.9727 3.46875 28.7467V33.5312C3.4688 33.7374 3.52396 33.9398 3.62852 34.1174C3.73307 34.2951 3.88322 34.4416 4.06342 34.5417C4.24361 34.6418 4.4473 34.6919 4.65338 34.6869C4.85946 34.6818 5.06044 34.6217 5.2355 34.5129L8.67188 32.3738L12.1082 34.5129C12.2834 34.6218 12.4845 34.6819 12.6907 34.6869C12.8968 34.6919 13.1006 34.6417 13.2808 34.5414C13.4611 34.4411 13.6112 34.2945 13.7157 34.1167C13.8201 33.9389 13.8752 33.7363 13.875 33.5301V28.7467Z" fill="%2308BDFF"/></svg>') no-repeat center;
	background-size: contain;
}


/* Responsive */
/* xxl */
@media (min-width: 1400px) {
	.font-xxl-40 {
		font-size: 40px;
	}

	.font-xxl-32 {
		font-size: 32px;
	}
}

/* xl */
@media (min-width: 1200px) {

}

/* lg */
@media (min-width: 992px) {

}

/* md */
@media (min-width: 768px) {
	.text-md-dark {
		color: #212529 !important;
	}

	.text-md-center {
		text-align: center;
	}

	.font-md-14 {
		font-size: 14px !important;
	}

	.font-md-18 {
		font-size: 18px;
	}

	#card_identical_content > div {
		max-width: 300px;
	}
}

/* sm */
@media (min-width: 576px) {

}