@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@property --alpha {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

* {
	box-sizing: border-box;
	margin: 0;
}

html {
	min-height: 100%;
	position: relative;
}

body {
	font-size: 14px;
	font-family: "Inter", serif;
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* color: #fff; */
}

::placeholder {
	color: #999 !important;
	opacity: 0.7 !important;
}

.body-container {
	flex: 1;
}

.body-container__page .wrapper {
	background: rgba(238, 243, 250, 1) url('../img/lines.svg');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center top;
	align-items: center;
}

.body-container__page .main-wrapper {
	padding-top: 1rem;
}

.bg-light-blue {
	background-color: rgba(236, 244, 255, 1);
}

.intro {
	flex-direction: column;
	background-image: url('../img/background/BG.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	align-items: center;
	color: #fafafa;
}

.intro .section__container {
	min-height: 450px;
}

.section__container img {
	max-width: 100%;
}

/*
.intro-block {
	width: 100%;
	gap: 10px;
	border-radius: 8px;
	padding: 16px;
	color: #fafafa;
	border-width: 1px;
	border: 1px solid rgba(231, 236, 243, 0.4);
	background-color: rgba(250, 250, 250, 0.05);
	backdrop-filter: blur(8px);
}
*/
.intro-block a {
	border: 1px solid rgba(250, 250, 250, 1);
	border-radius: 8px;
	background: linear-gradient(93.89deg, #2A51DF 0.2%, #322CE3 22.82%, #3282F2 100%);
	color: #fafafa;
	min-width: 300px;
	padding-top: 10px;
	padding-right: 12px;
	padding-bottom: 10px;
	padding-left: 12px;
	gap: 8px;
	border-radius: 6px;
	border-width: 1px;
	-webkit-transition: background-image 500ms linear;
	-ms-transition: background-image 500ms linear;
	transition: background-image 500ms linear;
}

.intro-block a:hover {
	background: linear-gradient(93.89deg, #DF362A 0.2%, #E3432C 22.82%, #F26E32 100%);
	color: #fafafa;
}

.intro-block .intro-block-title {
	font-size: 1.5rem;
}

/* Right Column */
.right-block a,
.right-block img {
	width: 100%;
}

/* Navigation */
#logo {
	transition: 0.4s;
	height: 60px;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

nav#toc {
	border-right: 2px #F37032 solid;
}

.transition img {
	opacity: 20%;
	width: 100%;
}

.site__header {
	background-color: #001731;
	height: 110px;
}

.navbar {
	width: 100%;
	max-width: 1400px;
	padding: 1rem;
	margin: auto;
	justify-content: center;
}

.nav-item a {
	color: #fff;
	font-weight: 700;
}

.nav-item a:hover {
	color: #F37032;
}

#main-menu>li>a {
	display: inline;
	font-size: 15px;
}

.dropdown:hover>.dropdown-menu {
	display: block;
}

.dropdown>.dropdown-toggle:active {
	pointer-events: none;
}

.dropdown .dropdown-menu {
	left: 10px !important;
	border-radius: 13px;
}

.dropdown-item {
	color: #383838 !important;
	font-weight: bold;
}

.dropdown-item:hover {
	color: #F37032 !important;
	background-color: transparent !important;
}

.dropdown-item:active {
	background-color: transparent !important;
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu a::after {
	transform: rotate(-90deg);
	position: absolute;
	right: 6px;
	top: .8em;
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-left: .1rem;
	margin-right: .1rem;
}

.navbar-toggler {
	position: absolute;
	right: 20px;
}

/* \*Navigation*\ */

.logo {
	width: auto;
	height: 80px;
}

.logo-vnnic {
	width: auto;
	height: 60px;
}

.container {
	max-width: 1400px !important;
	padding: 0 2rem !important;
}

.section__container {
	max-width: 1400px !important;
	padding: 1rem;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
}

.section__intro {
	max-width: 32rem;
	font-size: 18px;
}

.intro-image {
	max-width: 100%;
	overflow: hidden;
	flex: 1 0 100%;
}

.intro-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 100px;
}

.intro-btn {
	width: 400px;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(34, 34, 34, 0.1);
	border-radius: 50px;
	color: #123c8b;
	text-decoration: none !important;
	transition: 0.3s;
}

.intro-btn-inside {
	border: 1px solid rgba(34, 34, 34, 0.1);
	background: #fff;
	border-radius: 50px;
	margin: 7px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.intro-btn:hover {
	color: #F37032;
	transform: translateY(10px);
}

.intro-btn:hover #triangle {
	transform: rotate(90deg);
}

.intro-btn-inside span:first-child {
	width: 50px;
	margin-right: auto;
	visibility: hidden;
}

.intro-btn-inside div:last-child {
	margin-left: auto;
}

.section__container .card {
	border-radius: 15px;
}

.chart-border {
	border: 2 px solid #E5E5E5;
	border-radius: 10 px;
	padding: 15 px;
}

.home-title {
	font-style: normal;
	font-weight: 600 !important;
	line-height: 50px;
	font-size: 2rem;
}

.orange {
	color: #F37032 !important;
}

.blue {
	color: #133c8b !important;
}

.nav-pills {
	margin-top: 1rem;
	justify-content: space-evenly;
}

#main-menu .nav-link {
	/* max-width: 180px; */
	text-align: center;
	display: flex;
	align-items: center;
}

.stats-number {
	font-size: 36px;
}

.lg {
	background-color: rgba(19, 60, 139, 0.25);
}

/* Footer */
.footer-container {
	background: #00203d;
}

.footer-text {
	color: #fff;
}

.footer-title {
	font-weight: 800;
	font-size: 26px;
}

.footer-menu {
	display: flex;
	flex-wrap: no-wrap;
}

.footer-menu__column {
	flex: 1 0 20%;
	padding: 0 1rem;
}

.footer-menu__title,
.footer-menu__title a {
	font-weight: bold;
	margin-bottom: 1rem;
	color: #fff;
	font-size: 16px;
}

.footer-menu__title a {
	text-decoration: none;
}

.footer-menu__title a:hover {
	color: #F37032;
}

.footer-menu__list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.footer-menu__item,
.footer-menu__item a {
	margin-bottom: 0.5rem;
	font-size: 14px;
	color: #fff;
}

.footer-menu__item a:hover {
	color: #F37032;
}

footer a {
	text-decoration: none !important;
}

.footer-address {
	font-size: 14px;
}

/*\* Footer *\*/

#v-pills-tab a {
	color: #909090;
	font-size: 20px;
	font-weight: bold;
}

#v-pills-tab a:hover {
	color: #133c8b;
}

#main-menu .nav-link.active {
	color: #133c9b !important;
	border: none;
}

.tm-bg-primary-dark {
	background-color: #FFFFFF;
}

.tm-block {
	border-radius: 13px;
	padding: 20px;
	/* -webkit-box-shadow: 1px 1px 10px 2px rgba(69, 92, 113, 0.25);
	-moz-box-shadow: 1px 1px 10px 2px rgba(69, 92, 113, 0.25);
	box-shadow: 1px 1px 10px 2px rgba(69, 92, 113, 0.25); */
	border: 2px solid #dadada;
}

.big-title {
	/* padding: 20px; */
	font-weight: 800;
	font-size: 1.2rem;
	color: #123c8b;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

#submit-domain {
	transition-duration: 0.3s;
	background-color: #F37032;
	color: #fff;
	font-weight: bold;
	border: none;
}

#submit-domain:hover {
	background-color: #E24900;
}

#brdd {
	display: none;
	transition: 0.4s;
}

#brcd {
	transition: 0.4s;
}

/*Highcharts css*/
.highcharts-title {
	text-transform: none !important;
	font-size: 20px !important;
}

/*\Highcharts css\*/

/* Credits */
.highcharts-credits {
	cursor: pointer;
	fill: #ee3d85 !important;
	font-size: 0.8em !important;
	font-weight: 700;
	transition: fill 250ms, font-size 250ms !important;
	;
}

.highcharts-credits:hover {
	fill: #ee3d85 !important;
	font-weight: 700;
	font-size: 1em !important;
}

/*\ Credits \*/

/* Badges */
.badge-text {
	font-size: 1rem;
	font-weight: 600;
}

.badge-primary-text {
	font-size: 2rem;
	font-weight: bold;
}

/*\ Badges \*/

/* TABS */
/* Style the tab */
.tab {
	overflow: hidden;
	align-self: flex-start;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
	border-radius: 15px;
	margin-left: 0.25rem;
}

/* Change background color of buttons on hover */
.tab button:hover {
	color: #fff;
}

#all-label:hover {
	background-color: #133c8b;
}

#info-label:hover {
	background-color: #66ad54;
}

#warning-label:hover {
	background-color: #ff9019;
}

#error-label:hover {
	background-color: #ec3545;
}

/* Create an active/current tablink class */
.tablinks {
	font-weight: 600;
}

.tab button.active {
	color: #fff;
}

#all-label.active {
	background-color: #133c8b;
}

#info-label.active {
	background-color: #66ad54;
}

#warning-label.active {
	background-color: #ff9019;
}

#error-label.active {
	background-color: #ec3545;
}

/* Style the tab content */
.tabcontent {
	display: none;
	margin-top: 1rem;
	/* border: 1px solid #ccc; */
	border-top: none;
}

.content-entry {
	display: flex;
	position: relative;
	padding: 1rem;
	margin-bottom: 0.5rem;
	background-color: #f1f1f1;
}

.content-entry::before {
	content: "";
	position: absolute;
	width: 7px;
	height: 100%;
	left: 0;
	top: 0;
}

.content-module {
	min-width: 15%;
	flex-shrink: 0;
	font-weight: 700;
}

.content-level {
	min-width: 12%;
	flex-shrink: 0;
	font-weight: 800;
}

.content-message {
	flex: 1;
	overflow-wrap: anywhere;
}

.info-content::before {
	background: #66ad54;
}

.info-content .content-level {
	color: #66ad54;
}

.warning-content::before {
	background: #ff9019;
}

.warning-content .content-level {
	color: #ff9019;
}

.error-content::before {
	background: #ec3545;
}

.error-content .content-level {
	color: #ec3545;
}

.count-message {
	color: #fff;
	background-color: #6c767d;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	border-radius: 15px;
	font-size: 75%;
	display: inline-block;
}

/* SELECT DATE FORM */
.text-pick-date {
	margin: auto;
	font-weight: bold;
	font-size: 17px;
}

.form-date {
	display: flex;
	justify-content: space-between;
}

#datepicker {
	height: 42px;
	padding: .6rem 1.5rem;
	cursor: pointer;
	appearance: none;
	border: 2px solid #dadada;
	border-radius: 13px;
	/* box-shadow: 1px 1px 10px 2px rgba(69, 92, 113, 0.25); */
}

.label-filter {
	pointer-events: none;
	position: absolute;
	right: 2rem;
	top: .6rem;
}

.datepicker-filter {
	border-radius: 10px;
	justify-self: right;
	position: relative;
}

.divider:after,
.divider:before {
	content: "";
	flex: 1;
	height: 1px;
	background: #eee;
}

/* box sidebar */
.box-sidebar .body {
	background-color: #fff;
	border-radius: 8px;
}

.box-sidebar ul.list {
	padding: 1rem 1rem;
	margin: 0;
}

.box-sidebar .list>li {
	list-style: none;
}

.box-sidebar .list .link {
	padding: 10px 15px;
	position: relative;
	display: block;
}

.box-sidebar .list a {
	text-decoration: none;
	color: #0E0E0F;
}

.box-sidebar .list>li.active {
	border-left: 2px solid rgba(19, 60, 139, 1);
}

.box-sidebar .list>li:hover,
.box-sidebar .list>li.active {
	background: rgba(236, 244, 255, 1);
}

.box-sidebar .list>li.active a,
.box-sidebar .list>li a:hover {
	color: rgba(19, 60, 139, 1);
	font-weight: bold;
}

/* account content */
.account-content {
	background-color: #fff;
	border-radius: 8px;
	padding: 1rem 1rem;
	margin: 0;
}

.account-content h5 {
	color: rgba(19, 60, 139, 1);
}

/* button custom */

.btn-custom {
	background: linear-gradient(93.89deg, #2A51DF 0.2%, #322CE3 22.82%, #3282F2 100%);
	color: #fafafa;
}

.btn-custom:hover {
	background: linear-gradient(93.89deg, #DF362A 0.2%, #E3432C 22.82%, #F26E32 100%);
	color: #fafafa;
}

.btn-orange {
	background-color: #F37032 !important;
	color: white !important;
}


/* datatable custom */
.custom-tbl {
	padding: 15px;
	border-radius: 8px;
	background-color: rgba(236, 244, 255, 1);
}

.custom-tbl thead th {
	vertical-align: top;
}

.pages-title {
	color: #133c9b;
}

.form-group label {
	font-weight: bold;
	font-size: 1rem;
	opacity: 70%;
}

.noi-dung {
	font-size: 14.5px;
	word-spacing: 0px;
	line-height: 1.5;
	text-align: justify;
}

/* Step bar */
#announce-progress .bg-blue {
	background-color: #133c8b;
}

#announce-progress .bg-orange {
	background-color: #F37032;
}

/* Home search block */
#homeSearchBlock {
	background-image: url('../img/background/home-search-bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #fafafa;
	padding: 10px;
}

#homeSearchBlock img {
	max-height: 150px;
}

#searchBlock {
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	border: 1px solid rgba(231, 236, 243, 0.4);
	flex: 1;
}

#searchBlock button:hover {
	color: #F37032;
}

/* Content */
.content-w-remove-style {
	font-size: 14px;
}

.content-w-remove-style .content-subject a {
	color: #F37032;
	font-weight: bold;
}

.content-w-remove-style #view-count {
	opacity: 60%;
	font-style: italic;
}

.separator {
	border-top: 2px dashed #333;
	opacity: 30%;
	margin: 20px 0;
	width: 100%;
}

/* copy button */
.verification-div .copy-btn {
	width: 150px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.verification-div .input-group .form-control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	cursor: pointer;
}

/* news block home */
.news-block {
	padding: 20px;
	margin-top: 20px;
	border-radius: 8px;
	background-color: #ECF4FF;
	overflow: hidden;
}

.news-block img {
	object-fit: cover;
}

.text-truncate-multiline {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* HOME - Organization section */


/* ------------------------------------ RESPONSIVE ------------------------------------ */
@media (min-width : 1199.5px) {
	.nav-item {
		padding-left: 1rem;
	}
}

@media (min-width : 992px) {

	#main-menu>li:first-child::before {
		display: none;
	}

	#main-menu .nav-link {
		padding: 0rem 1rem;
	}

	.navbar {
		padding: 0.6rem 2rem;
	}
}

@media only screen and (min-width: 768px) {

	.intro-image {
		flex: 1 0 30%;
	}
}

@media (max-width : 991.5px) {

	#organization-section .nav-link {
		width: 100%;
	}

	#main-menu .nav-link {
		padding-right: 1rem !important;
		padding-left: 1rem !important;
	}

	.body-container {
		background-size: 160%;
	}
}

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

	.form-date {
		flex-direction: column;
		align-items: center;
	}

	/* MOBILE MENU */
	#mobile-menu {
		display: block;
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
		background: #fff;
		transition: all 0.5s;
		transform: translate(-100%);
		opacity: 0;
		visibility: hidden;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0 30px;
	}

	#mobile-menu a {
		color: #123c8b;
	}

	#mobile-menu a:active {
		color: #F37032;
	}

	#mobile-menu a:hover {
		color: #F37032;
	}

	.open {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translate(0) !important;
	}

	.menu-mb__close {
		line-height: 1;
	}

	.menu-mb__close path {
		fill: #123c8b;
	}

	.menu-mb__head {
		display: flex;
		padding: 20px 0;
		margin-bottom: 15px;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #b3b3b3;
	}

	.menu-mb__logo img {
		height: 50px;
		width: auto;
	}

	.menu-mb__list,
	.menu-mb__sub {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	.menu-mb__item a {
		padding: 15px 0;
		display: block;
		font-weight: 700;
		font-size: 16px;
		text-transform: uppercase;
	}

	.menu-mb__item.has-child {
		position: relative;
		overflow: hidden;
	}

	.menu-mb__sub {
		display: none;
	}

	.menu-mb__sub-item {
		padding-left: 20px;
	}

	.menu-mb__sub-item a {
		text-transform: none;
		font-weight: 500;
	}

	.menu-mb__item.has-child i {
		float: right;
	}

	.menu-mb__item.has-child.open .menu-mb__sub {
		display: block;
	}

	.menu-mb__item.has-child.open i {
		transform: rotate(180deg);
	}

	.content-module {
		min-width: 25%;
	}

	.content-level {
		min-width: 15%;
	}
}

/* tablet */
@media (max-width : 767.5px) {

	.big-title {
		font-size: 35px;
	}

	.body-container {
		background-size: 150%;
	}

	.content-module {
		min-width: 30%;
	}

	.content-level {
		min-width: 15%;
	}
}

/* mobile */
@media (max-width: 575.9px) {

	.intro-content {
		margin-top: 70px;
	}

	.big-title {
		font-size: 25px;
	}

	.intro-btn {
		width: 350px;
	}

	.footer-menu__column {
		padding: 0 0.5rem;
	}

	.footer-menu__title,
	.footer-menu__title a {
		font-size: 14px;
	}

	.footer-menu__item a {
		font-size: 12px;
	}

	.footer-title {
		font-size: 18px
	}

	.section__intro {
		font-size: 14px;
	}

	.body-container {
		background-size: 300%;
	}

	h1.home-title {
		text-align: center;
	}

	.stats-method-btn,
	.internet-type-btn {
		margin: auto;
	}

	.stats-method-btn {
		margin-top: 10px;
	}

	.content-module {
		min-width: 35%;
	}

	.content-level {
		min-width: 20%;
	}

	.content-entry {
		font-size: 12px;
	}

	.tab button {
		font-size: 15px;
		padding: 8px 10px;
	}

	#submit-domain {
		font-size: 14px;
	}

	.logo-vnnic {
		height: 45px;
	}

	.home-title {
		font-size: 1.5rem;
	}

	.intro-block .intro-block-title {
		font-size: 16px;
	}
}