﻿ 
.dropdown-item.active, .dropdown-item:active
{
	background-color:#3ebc92;
}


.navbar-nav .dropdown-menu {
	text-align: center;
}

@media (min-width: 962px) {
	.navbar-nav .dropdown-menu {
		position: absolute !important;
		text-align: left;
	}
}

@media (max-width: 961px) {
	.navbar-nav .dropdown-menu {
		border: none;
	}
}
 

	@media (min-width: 1200px) {
		.container,
		.container-lg,
		.container-md,
		.container-sm,
		.container-xl {
			max-width: 1280px;
		}
	}

	 

	header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9998;
		background-color: #fff;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	}

		header .wrapper {
			display: flex;
			align-items: center;
			padding: 10px 0;
			justify-content: flex-start;
		}

	@media only screen and (max-width: 991px) {
		header .wrapper {
			justify-content: space-between;
			padding: 11px 0;
		}
	}

	@media only screen and (min-width: 992px) {
		header .wrapper {
			flex-wrap: nowrap;
		}

			header .wrapper .navbar-collapse {
				display: flex;
				flex-direction: row;
			}
	}

	header .logo {
		margin-right: 30px;
	}

		header .logo img {
			height: 30px;
		}

	@media only screen and (max-width: 667px) {
		header .logo img {
			height: 20px;
		}
	}

	@media only screen and (max-width: 991px) {
		header .logo {
			margin-left: 0.75rem;
		}
	}

	@media only screen and (max-width: 320px) {
		header .logo {
			margin-left: 0;
		}
	}

	header .menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 100%;
	}

		header .menu a {
			color: #2f2f2f;
			text-transform: uppercase;
			text-decoration: none;
			font-size: 16px;
			font-family: "Barlow", sans-serif;
			font-weight: 500;
		}

		header .menu .left ul {
			list-style: none;
			padding: 0;
			margin: 0;
			text-align: center;
		}

			header .menu .left ul li {
				display: inline-block;
			}

				header .menu .left ul li a {
					padding: 8px 0.5vw 8px 0.5vw;
					display: block;
				}

	@media only screen and (min-width: 992px) {
		header .menu .left ul {
			flex-direction: row;
		}
	}

	header .menu .right {
		display: flex;
		align-items: center;
	}

		header .menu .right .signup a {
			color: #4086F4; /* #3ebc92;*/
			font-weight: 600;
			margin: 0 15px;
		}

		header .menu .right .login a {
			font-weight: 600;
		}

		header .menu .right .login span {
			/*	background-color: #e6e6e6;
	border-radius: 50%;*/
			/*margin-left: 5px;*/
			padding: 5px 10px;
			display: inline-block;
		}

			header .menu .right .login span i {
				font-size: 14px;
				color: rgba(67, 67, 67, 0.5);
				display: inline-block;
				padding-left: 5px;
			}

	header .hamburger span {
		display: block;
		background: #000;
		width: 24px;
		height: 3px;
		border-radius: 3px;
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
		transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
	}

		header .hamburger span:nth-child(2) {
			margin: 4px 0;
		}

	header .hamburger.toggled span:first-child {
		-webkit-transform: translateY(6px) rotate(45deg);
		transform: translateY(6px) rotate(45deg);
	}

	header .hamburger.toggled span:nth-child(2) {
		opacity: 0;
	}

	header .hamburger.toggled span:last-child {
		-webkit-transform: translateY(-8px) rotate(-45deg);
		transform: translateY(-8px) rotate(-45deg);
	}

	@media only screen and (min-width: 992px) {
		header .hamburger {
			display: none;
		}
	}

	main {
		margin-top: 60px;
	}

	@media only screen and (max-width: 992px) {
		main {
			margin-top: 50px;
		}
	}

	.btn-header-free-trial {
		background-color: #4086F4;
		color: #fff;
		border-radius: 6px;
		padding: 5px 25px;
		outline: 0;
		border: none;
		display: inline-block;
	}

		.btn-header-free-trial a {
			color: #fff;
			display: block;
		}

	footer {
		background-color: #333333;
	}

		footer .wrapper {
			padding: 60px 0 20px;
		}

		footer .logo-footer {
			height: auto;
			width: 100%;
			max-width: 100%;
		}

	@media only screen and (max-width: 991px) {
		footer .logo-footer {
			width: 50%;
			height: auto;
			margin-bottom: 20px;
		}
	}

	footer h4 {
		color: #7db1f7;
		font-size: 19px;
		font-weight: 500;
		margin-bottom: 15px;
	}

	footer p {
		color: #fff;
		font-weight: 400;
	}

	footer a {
		color: #fff;
		font-weight: 400;
		display: block;
		text-decoration: none;
		margin-bottom: 10px;
	}

		footer a:hover {
			color: #fff;
		}

	footer form {
		position: relative;
		width: 100%;
	}

	@media only screen and (max-width: 991px) {
		footer form {
			width: 75%;
		}
	}

	@media only screen and (max-width: 727px) {
		footer form {
			width: 100%;
		}
	}

	footer form ::placeholder {
		font-weight: 500;
		color: #434343;
	}

	footer form input {
		border-radius: 6px;
		width: 100%;
		padding: 10px 100px 10px 10px;
		outline: none;
		border: 0;
	}

footer form button {
	background-color: #4086f4;
	color: #fff;
	position: absolute;
	border-radius: 6px;
	padding: 5px 15px;
	margin-bottom: 0;
	top: 5px;
	right: 5px;
	outline: none;
	border: 0;
}

	footer .col-lg-12 {
		border-top: 1px solid #707070;
		margin-top: 20px;
	}

		footer .col-lg-12 div {
			color: #fff;
			margin-top: 20px;
		}

	/*# sourceMappingURL=style.css.map */
	.login-box-msg {
		width: 100%;
		display: block;
		text-align: center;
		color: red;
		text-align: center;
		margin-bottom: 5px;
	}

	.loader-wrapper {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: #e9eaefbf;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loaded .loader-wrapper {
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all 0.8s ease-out;
		transition: all 0.8s ease-out;
	}

	.loader-wrapper .loader {
		font-size: 10px;
		margin: 50px auto;
		text-indent: -9999em;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: #0033c4;
		background: -moz-linear-gradient(left, #0033c4 10%, rgba(0, 0, 0, 0) 42%);
		background: -webkit-linear-gradient(left, #0033c4 10%, rgba(0, 0, 0, 0) 42%);
		background: -o-linear-gradient(left, #0033c4 10%, rgba(0, 0, 0, 0) 42%);
		background: -ms-linear-gradient(left, #0033c4 10%, rgba(0, 0, 0, 0) 42%);
		background: linear-gradient(to right, #0033c4 10%, rgba(0, 0, 0, 0) 42%);
		-webkit-animation: loading 1.4s infinite linear;
		animation: loading 1.4s infinite linear;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
	}

		.loader-wrapper .loader.loader:before {
			width: 50%;
			height: 50%;
			background: #0033c4;
			border-radius: 100% 0 0 0;
			position: absolute;
			top: 0;
			left: 0;
			content: "";
		}

		.loader-wrapper .loader.loader:after {
			background: #e9eaef;
			width: 75%;
			height: 75%;
			border-radius: 50%;
			content: "";
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}

	@-webkit-keyframes loading {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes loading {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}


.customScrollBar::-webkit-scrollbar {
	width: 2px;
}
/* Track */
.customScrollBar::-webkit-scrollbar-track {
	background: #f1f1f1;
}
/* Handle */
.customScrollBar::-webkit-scrollbar-thumb {
	background: #888;
}
	/* Handle on hover */
	.customScrollBar::-webkit-scrollbar-thumb:hover {
		background: #555;
	}



	 
/* Hiển thị submenu khi hover trên desktop */
.custom-nav-item:hover .custom-submenu {
	display: block;
}

/* Đảm bảo mũi tên và submenu không hiển thị trên mobile */
@media (max-width: 768px) {
	.custom-arrow {
		display: none; /* Ẩn mũi tên trên mobile */
	}

	.custom-submenu {
		display: none !important; /* Ẩn submenu trên mobile */
	}
}



.custom-nav-item {
	position: relative;
}

	.custom-nav-item > a {
		text-decoration: none;
		display: inline-flex !important; /* Giữ mũi tên cạnh chữ Features */
		align-items: center;
		padding: 10px 15px;
		color: #333;
	}

		.custom-nav-item > a .custom-arrow {
			margin-left: 5px;
			width: 0;
			height: 0;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 5px solid #333;
			transition: transform 0.3s ease; /* Thêm hiệu ứng chuyển động cho mũi tên */
		}

	.custom-nav-item:hover > a .custom-arrow {
		transform: rotate(180deg); /* Xoay mũi tên khi hover */
	}

.custom-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none; /* Ẩn menu con ban đầu */
	position: absolute;
	top: 100%;
	left: 0;
	background-color: white;
	border: 1px solid #ddd;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	width: auto; /* Tự động điều chỉnh chiều rộng */
	white-space: nowrap; /* Ngăn ngắt dòng */
}

	.custom-submenu li {
		display: block !important; /* Bắt buộc mỗi mục con nằm dọc */
		text-align:left;
	}

		.custom-submenu li a {
			display: block; /* Đảm bảo link chiếm toàn bộ chiều ngang */
			padding: 10px 15px;
			text-decoration: none;
			color: #333;
		}

			.custom-submenu li a:hover {
				background-color: #f0f0f0;
			}

/* Hiển thị submenu khi hover (desktop) */
.custom-nav-item:hover .custom-submenu {
	display: block;
}


/* Hiển thị submenu khi hover trên desktop */
@media (min-width: 768px) {
	.custom-nav-item:hover .custom-submenu {
		display: block;
	}
}
