:root {

	--fs-white: #fff;
	--fs-black: #171717;
	--fs-red: #B2243C;
	--fs-beige: #FFFEF7;

	--black-02: #222;
	--grey-01: #F8F8F8;
	--grey-02: #F3F3F3;
	--grey-03: #E9E9E9;
	--grey-035: #8E8E8E;
	--grey-04: #C2C2C2;
	--grey-05: #B7B7B7;
	--grey-06: #9B9B9B;
	--grey-07: #808080;

	--grey-text: #8E8E8E;
	--grey-info: #B7B7B7;

	--light-green: #00BDB5;
	--green-yes: #74CC66;
	--goldenrod: #E6A032;
	--blue-grey: #6699cc;
	--blue: #69c;
	--yellow-02: #FDEED8;
	--blue-02: #D3E2F0;

	--star-size: 1rem;

	--bs-body-font-size: 1rem;
	--bs-heading-color: #171717;

	--bs-danger-rgb: 178, 36, 60;
	--bs-success-rgb: 99, 204, 166;
	--bs-border-radius: 4px;
	--bs-border-color: var(--grey-03);
	--bs-link-hover-color: var(--black-02);

	accent-color: var(--black-02);
}

body {padding-bottom: 0 !important; background: var(--grey-01)}
h1, .h1 {font-size:6rem; font-weight: 700;}
h2, .h2 {font-size:4.75rem; font-weight: 700;}
h3, .h3 {font-size:3.75rem; font-weight: 700;}
h4, .h4 {font-size:3.06rem; font-weight: 700;}
h5, .h5 {font-size:2.4375rem; font-weight: 700;}
h6, .h6 {font-size:2rem; font-weight: 700;}
b, .b {font-weight: 600;}
.bolder {font-weight: 700;}
.boldest {font-weight: 900;}
.thin {font-weight: 300;}
img {max-width: 100%;}
.fs-s {font-size: .75rem !important;}
.fs-sm {font-size: 1rem !important;}
.fs-m {font-size: 1.125rem !important;}
.fs-ml {font-size: 1.25rem !important;}
.fs-l {font-size: 1.5rem !important;}
.fs-xl {font-size: 2rem !important;}
.fs-xxl {font-size: 3rem !important;}

a {
	color: var(--bs-body-color);
	text-decoration: none;
}
a.underline, .underline{
	text-decoration: underline
}

.modal.show {display: block;}
.modal.fade {background: #00000060;}

.mt-03 {margin-top: .75rem !important;}
.mt-6 {margin-top: 1.5rem !important;}
.mt-8 {margin-top: 2rem !important;}
.mt-12 {margin-top: 3rem !important;}
.mt-17 {margin-top: 4.25rem !important;}
.mt-20 {margin-top: 5rem !important;}
.mt-24 {margin-top: 6rem !important;}
.mt-28 {margin-top: 7rem !important;}
.mt-49 {margin-top: 12.25rem !important;}

.mb-8 {margin-bottom: 2rem}
.mb-12 {margin-bottom: 3rem}
.mb-20 {margin-bottom: 5rem}
.mb-40 {margin-bottom: 10rem}

.p-6 {padding:1.5rem}
.p-8 {padding:2rem}
.py-8 {padding-top:2rem;padding-bottom:2rem;}
.py-12 {padding-top:3rem;padding-bottom:3rem;}
.py-15 {padding-top:4rem;padding-bottom:3.75rem;}
.py-16 {padding-top:4rem;padding-bottom:4rem;}

.px-8 {padding-left:2rem;padding-right:2rem;}
.px-17 {padding-left:4.25rem;padding-right:4.25rem;}

.pb-20 {padding-bottom:5rem;}

.br-2 {border-radius: .5rem;}

.gap-6 {gap:1.5rem}
.gap-8 {gap:2rem}
.gap-12 {gap:3rem}
.gap-20 {gap:5rem}
.column-gap-24{column-gap:6rem}
.w-08 {width:2rem;min-width:2rem}
.w-050 {width:12.5rem}
.w-212{width: 53rem}

.fs-05 {font-size: 5rem;}

.fs-red,.err{color: var(--fs-red) !important}
.fs-white{color: var(--fs-white)}
.fs-blue{color: var(--blue) !important}

.black-02 {color:var(--black-02);}
.grey-035 {color: var(--grey-035)}
.grey-04 {color: var(--grey-04)}
.grey-05 {color: var(--grey-05)}
.grey-06 {color: var(--grey-06)}
.grey-07 {color: var(--grey-07)}
.grey {color: var(--grey-text)}
.grey-info {color: var(--grey-info)}
.light-green {color: var(--light-green) !important}
.green-yes {color: var(--green-yes) !important}
.grey-03{color: var(--grey-03)}
.goldenrod{color: var(--goldenrod);}
.blue-grey{color: var(--blue-grey);}
.yellow-02{color: var(--yellow-02);}

.b-none {border: none !important;}
.b-grey-r-solid {border: 1px solid var(--grey-04); }
.b-black-02-solid {border: 1px solid var(--black-02); }
.b-red-solid {border: 1px solid var(--fs-red); }

.bt-black-02-solid {border-top: 1px solid var(--black-02); }
.bt-grey-3-solid {border-top: 1px solid var(--grey-03); }
.bl-grey-3-solid {border-left: 1px solid var(--grey-03); }
.bb-grey-3-solid {border-bottom: 1px solid var(--grey-03); }
.bb-grey-6-solid {border-bottom: 1px solid var(--grey-06); }

.bb-black-02-dashed {border-bottom: 1px dashed var(--black-02); }

.bg-grey-1 {background: var(--grey-01)}
.bg-fs-red{background: var(--fs-red);}
.bg-fs-white{background: var(--fs-white) !important;}
.bg-grey-01{background: var(--grey-01);}
.bg-grey-02{background: var(--grey-02);}
.bg-grey-03{background: var(--grey-03) !important;}
.bg-black-02{background: var(--black-02);}
.bg-light-green{background: var(--light-green);}
.bg-green-yes{background: var(--green-yes);}
.bg-yellow-02{background: var(--yellow-02) !important;}
.bg-blue-02{background: var(--blue-02) !important;}

.d-none-no-i:not(:has(i)) {
	display: none;
}
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.fs-field {
	font-size: 0.75rem;
	height: 3rem;
	padding: 1rem;
	width: 100%;
	border: none;
}
textarea.fs-field {
	height: auto;
}
.square {
	width: 16px;
	height: 16px;
	display: inline-block;
}
.btn-rounded {
	border-radius: 50px;
	background: #fff;
	padding: 10px 20px;
}
.btn-outline {
	color: var(--black-02);
	background: #fff;
	box-shadow: 0 0 1px #000;
	border: none;
}
.btn-outline:hover {
	background: var(--grey-02);
}


.btn-fs{padding:.5rem 1rem}
.btn-fs-lg { padding: 1.5rem 2rem}
.btn-fs-lg-2 { padding: 1rem 2rem; font-weight: 700;}
.btn-fs-lg-3 { padding: 1rem 1.75rem}

.btn-white, .btn-white:hover {background: var(--fs-white); color:var(--black-02) !important}
.btn-grey-03 { background: var(--grey-03); }
.btn-grey-03:hover { background: var(--grey-04); }
.btn-grey-05 { background: var(--grey-05); }
.btn-grey-05:hover { background: var(--grey-04); }
.btn-red { background: var(--fs-red); color: var(--fs-white)}
.btn-red:hover { background: #7b0e20; color: var(--fs-white)}
.btn-teal{color: #14B8A6;border:1px solid #14B8A6;}
.btn-teal{color: #14B8A6;border:1px solid #14B8A6;}
.btn-teal:hover{background: #14B8A6;color:#fff; border:1px solid #14B8A6;}
.btn-sm-bg {
	font-size: .75rem;
	padding: 1rem;
	font-weight: 600;
}
.btn-show-modal {
	padding: 1rem 1.5rem;
	background: var(--grey-03);
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
}
.btn-show-modal:hover {
	background: var(--grey-04);
}

.alert:has(.alert-content:empty) { display: none !important;}

.new-tag{
	width: 43px;
	height: 33px;
	flex-grow: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	padding: 0;
}
.new-icon {
    width: 43px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
    border-radius: 28px;
    background-color: #e6a032;
    color: #fff;
    font-size: .875rem;
}

.fs-close {
	z-index: 1;
}
.close-tooltip, .fs-tooltips {
	cursor: pointer;
}
.tooltip {
	--bs-tooltip-bg: #fff;
	--bs-tooltip-color: var(--black-02);
	--bs-tooltip-opacity: 1;
	--bs-tooltip-max-width: 360px;
}

.tooltip-inner {
	border: 1px solid var(--black-02);
	padding: 24px;
	text-align: left !important;
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
	border-right-color: var(--black-02);
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before{
	border-top-color: var(--black-02);
}
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-left .tooltip-arrow::before {
	border-left-color: var(--black-02);
}

.fs-tooltip {
	display: none;
	position: absolute;
	left: 0;
	bottom: 3rem;
	background: #fff;
	border: 1px solid var(--black-02);
    padding: 1rem;
    border-radius: var(--bs-tooltip-border-radius);
    border-radius: 8px;
    z-index: 10;
	width: 24rem;
	text-align: left;
	color: var(--bs-body-color) !important;
}
.fs-tooltip::before {
	--bs-tooltip-arrow-width: 0.8rem;
    --bs-tooltip-arrow-height: 0.4rem;
	content: '';
	border: solid transparent;
	border-top-color: var(--black-02);
    bottom: -14px;
	left: -19px;
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
	border-width: .4rem .4rem 0;
	position: absolute; 
	transform: translate3d(173.5px, 0px, 0px);
}
.fs-tooltip.left {
	left: -27rem;
}
.fs-tooltip.left::before {
	left: 18.5rem;
}

.fs-tooltips.on + .fs-tooltip, .fs-tooltips:hover + .fs-tooltip {
	display: block;
}
.fs-tooltips.on, .fs-tooltips:hover {
	color: var(--fs-red);
}

.nav-link {
	font-weight: 600;
	padding: 1rem;
	color: var(--grey-text);
	border-radius: 8px 8px 0px 0px !important;
}
.nav-link.active {
	border: none;
	border-bottom: 4px solid var(--black-02) !important;
	background: var(--grey-02) !important;
}

.full-only-child:only-child {
	width: 100%;
}

.no-border {
	border: none !important;
}

.card {
	border: none;
}
.table>:not(caption)>*>th {
	border-color: var(--black-02);
}

.table-b-black-02 {
	--bs-border-color: var(--black-02);
}

.table-round-border {
	border-spacing: 0;
	border-collapse: unset;
}
.table-round-border td {
	border: 1px solid var(--black-02);
}
.table-round-border td:not(:last-child) {
	border-right: none;
}
.table-round-border tr:not(:last-child) td {
	border-bottom: none;
}
.table-round-border tr:last-child td:only-child {
	width: 100% !important;
}
.table-round-border tr:first-child td:first-child {
	border-top-left-radius: 8px;
}
.table-round-border tr:first-child td:last-child {
	border-top-right-radius: 8px;
}
.table-round-border tr:not(.d-none):last-child td:first-child {
    border-bottom-left-radius: 8px;
}
.table-round-border tr:not(.d-none):last-child td:last-child {
    border-bottom-right-radius: 8px;
}
.table-underline .row:last-child > * {
	border-bottom: none;
}
.table-h-border th {
	border-color: var(--black-02);
	font-weight: 600;
}
.table-h-border tr:last-child > td {
	border-bottom: none;
}
.b-black-02-solid table {
	margin-bottom: 0;
}

.short-line {
	height: 4px;
	width: 40px;
}
.v-up {
	transform: translateY(-5px);
}
.video-responsive {
    aspect-ratio: 16 / 9;
    width: 100%;
}
.hr-black-dashed {
	height: 0;
	border-top: 1px dashed var(--black-02);
}
.hr-grey-04-solid {
	height: 0;
	margin: 0;
	border-top: 1px solid var(--grey-04);
}
.hr-grey-03-solid {
	height: 0;
	margin: 0;
	border-top: 1px solid var(--grey-03);
}
.hr-fs-white-solid {
	height: 0;
	margin: 0;
	border-top: 1px solid var(--fs-white);
}

.red-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--fs-red);
}
.red-dot.lg {
	width: 8px;
	height: 8px;
}
.on-off.on, .on .on-off.off {
	display: block;
}
.on-off.off, .on .on-off.on {
	display: none;
}

.rounded-circle {
	width: 55.5px;
	height: 55.5px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #B7B7B7;
}
.rounded-circle.md {
    min-width: 48px;
    width: 48px;
    height: 48px;
}

.pagination {
	align-items: center;
}

.pagination .list {
	display: flex;
	flex-direction: row;
	gap: .5rem;
	align-items: center;
}

.pagination .list a.page {
	display: flex;
	width: 32px;
	height: 32px;
	padding: 4px 12px;
	justify-content: center;
	align-items: center;
	border-radius: .5rem;
	font-size: .75rem;
}

.pagination .active {
	color: var(--fs-white);
	background: var(--black-02);
}

.strike-through {
	transform: translateY(-10px);
}

header {
	position: sticky;
	top: 0;
	background: var(--fs-white);;
	z-index: 1000;
}
header.sticky {
	border-bottom: 1px solid var(--grey-03);
}

header .logo {
	height: 35px;
}
.page-header {
    padding: 12px 0;
    column-gap: 1rem;
    z-index: 1;
	transition: .3s;
}

.nav {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}
.avatar {
	width: 29px;
	height: 29px;
	border-radius: 50%;
}
.avatar.lg {
	width: 48px;
	height: 48px;
}
.avatar.xl, .rounded-circle.xl {
	min-width: 64px;
	width: 64px;
	height: 64px;
}
.rounded-circle.md {
	min-width: 48px;
	width: 48px;
	height: 48px;
}
.dot {
	background: var(--grey-04);
	width: 4px;
	height: 4px;
	border-radius: 50%;
}

#top-menu {
    justify-content: center;
}
#top-menu a {
	font-weight: 600;
}
.ajax-login {
	cursor: pointer;
}

.break {
    flex-basis: 100%;
    height: 0;
}

.sm-appear, .md\:d-block, .md\:d-flex {
    display: none!important;
}

.dropdown-toggle-vn{
	padding: 25px 15px !important;
}
.dropdown-toggle::after {
	display: none;
}

header .search {
	border-radius: 50px;
	background: var(--grey-03);
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 8px 8px 8px 16px;
	width: 265px;
}
header .search input {
	border: none;
	background: var(--grey-03);
	width: 215px;
}
header .search button {
	border:none;
	color:#fff;
	background: var(--grey-05);
	height: 32px;
	width: 32px;
	min-width: 32px;
}
header .search button:hover {
	background: var(--fs-red);
}
.hamburger {
    order: 5;
    font-size: 1.5rem;
	padding: 0;
}
.expand-wrap {
	position: relative;
}
header .expand-wrap {
	width: 64px;
	height: 34px;
}
header .lang {
	height: 34px;
	border: 1px solid var(--grey-04);
	border-radius: 4px;	
	padding: 3px 5px;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	cursor: pointer;
}
header .lang.on {
	background: #fff;
}
header .lang i {
	color: #6C757D;
}
header .lang .b-grey-r-solid {
	display: flex;
	align-items: center;
	background-color: #fff;
}

body:has(.s-smp):has(.page-header.on) header:not(.sticky) {position: absolute; width: 100%; background: var(--fs-white);}
body:has(.s-smp) .page-header.on {align-items: start !important;}

body:has(.s-smp) .page-header:not(.on) img.logo { content:url("/logo/logow.svg") }

body:has(.s-smp) .page-header:not(.on) .top-nav, body:has(.s-smp) .page-header:not(.on) .user-nav > :not(.expand-wrap)  {display: none !important}

body:has(.s-smp) .hamburger {display: block !important}
body:has(.s-smp) .page-header:not(.on) .hamburger i, body:has(.s-smp) .page-header:not(.on) .expand-wrap .expand:not(.on) i {color:var(--fs-white) !important}
body:has(.s-smp) .page-header:not(.on) .hamburger{ order: 3 !important}

.expand {
	overflow: hidden;
}
.expand.on {
	position: absolute;
	top: 0;
	height: auto !important;
	padding-bottom: 5px;
}
.expand.on .fa-caret-down {
	transform: rotate(180deg);
}
.expand > div {
	height: 24px;
	display: flex;
	gap: 8px;
	align-items: center;
}
header .lang img {
	height: 24px;
}
header .divider {
	width: 1px;
	height: 36px;
	background: var(--fs-red);
}
footer {
	background: #F3F3F3;
	margin-top: 3rem;
}
footer .container {
	display: flex;
	padding: 2rem 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
}
footer li {
	padding-bottom: 10px;
}
.page-footer {
	padding-top: 1.5rem;
	border-top: 1px dashed #ccc;
	width: 100%;
}

.round-end {
	border-radius: 100px !important;
}
.no-list-style {
	list-style: none;
	padding-left: 0;
}
.img-bg {
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.clamp-2-ellipsis {
    overflow: hidden;
    -webkit-line-clamp: 2 !important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.clamp-3-ellipsis {
    overflow: hidden;
    -webkit-line-clamp: 3 !important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.clamp-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.clamp-two {
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
}
.clamp-three {
    line-clamp: 3 !important;
    -webkit-line-clamp: 3 !important;
}
.clamp-six {
	line-clamp: 6 !important;
    -webkit-line-clamp: 6 !important;
}
.clamp-eight {
	line-clamp: 8 !important;
    -webkit-line-clamp: 8 !important;
}
.clamp-nine {
	line-clamp: 9 !important;
    -webkit-line-clamp: 9 !important;
}
.show .clamp-ellipsis {
	line-clamp: unset !important;
	-webkit-line-clamp: unset !important;
}
.show-more.on i.fa-angle-down, .show .show-clamp .fa-angle-down {
	transform: rotate(180deg);
}

.show-modal, .show-more, .show-clamp {
	cursor: pointer;
}

.show-more-box.on .d-none {
	display: block !important;
}
.show-more-box.on tr.d-none {
	display: table-row !important;
}
.show-more-box.on td.d-none {
	display: table-cell !important;
}

.stars {
	--percent: calc(var(--rating) / 5 * 100%);
	letter-spacing: 2px;
	display: inline-block;
	font-size: var(--star-size);
	font-family: Times; /* make sure ★ appears correctly */
	line-height: 1;
}
.stars.fs-2 {
	letter-spacing: 5px;
}
.stars::before {
	content: '\2605\2605\2605\2605\2605';
	background: linear-gradient(90deg,#000000 var(--percent), #aaa var(--percent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.stars.white::before {
	content: '\2605\2605\2605\2605\2605'; /*'★★★★★';*/
	background: linear-gradient(90deg,#ffffff var(--percent), #aaa var(--percent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.img-circle {
	border-radius: 50%;
}
/*
.tags {
	display: flex;
	gap: 1rem
}
.tags .label {
	color: #333;
	padding: 8px 16px;
	line-height: 1;
	border-radius: 50px !important;
	border: 1px solid #666;
	white-space: nowrap;
}*/
.tags {
	flex-wrap: wrap;
	display: flex;
	gap: .5rem;
}
.tags .label {
	font-size: .75rem;
	padding: 6px 8px;
	border: 0;
	background: var(--grey-03);
	border-radius: 50px !important;
	white-space: nowrap;
}
.tags .date {
	flex-grow: 1;
	text-align: right;
}

.filter label {
	padding: 6px 12px;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	border-radius: 8px;
	border: 1px solid #B7B7B7;
	cursor: pointer;
}
.filter label:has(:checked), .filter label.on {
	background: var(--grey-03);
}
.filter label input[type="checkbox"] {
	display: none;
}

.blog-img {
	display: block;
	height: 200px;
	border-radius: 16px 16px 0 0;
}
.blog-meta {
	border-radius: 0 0 16px 16px;
}

.school {
	position: relative;
	display: flex;
	flex-direction: column;
}
.school .medal {
	left: 36px;
	font-size: 1rem;
	padding-top: 1.25rem;
}
.medal {
	position: absolute;
	color: #222;
	background: #fff;
	font-size: 1.125rem;
	font-weight: 600;
	top: 0;
	left: 109px;
	padding: 2rem 1rem .75rem 1rem;
	border-radius: 0 0 16px 16px;
}

.school-img {
	display: block;
	height: 300px;
	border-radius: 24px 24px 0 0;
}
.school-text {
	border-radius: 0 0 24px 24px;
	width: 100%;
}
.school-name {
	height: 4.5rem;
	display: flex;
	align-items: center;
}
.school-name .flag {
	height: 24px;
}
.school-section {
	border-bottom: 1px solid #E9E9E9;
	padding: 1.5rem 1.5rem 1rem;
}
.school-meta-basic {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid #E9E9E9;
}
.school-sub-sec {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
}
.school-sub-sec:first-child {
	border-right: 1px solid #E9E9E9;
}
.school-rating {
	padding: 1rem 1.5rem;
}
.school_score {
	color: #fff;
	width: 36px;
	min-width: 36px;
	height: 36px;
	background: var(--fs-red);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.school_score.white {
	background-color: #fff;
	color: var(--fs-black);
}
.school_score.large {
	width: 48px;
	height: 48px;
	min-width: 48px;
}
.save.on i {
	font-weight: 900;
}
.badge-smp {
	color: var(--fs-black);
	font-size: 12px;
	font-weight: 400;
	padding: 6px 8px;
	border-radius: 100px;
	background: rgba(0, 189, 181, 0.30);
}
.v-schools .school-img{height:220px} 
.v-schools .school-section{padding:1rem 1.5rem .75rem} 
.v-schools .school-rating {padding: .75rem 1.5rem}
.v-schools .school .medal {padding-top: .75rem;font-size: .87rem;}
.school-name-v img {height: 20px}

.pagination .pages a {
    font-size: .75rem;
}
@keyframes rotate {
	0%, 12.66%, 100% {transform:translate3d(0,0,0);}
	16.66%, 29.32% {transform:translate3d(0,-25%,0);}
	33.32%,45.98% {transform:translate3d(0,-50%,0);}
	49.98%,62.64% {transform:translate3d(0,-75%,0);}
	66.64%,79.3% {transform:translate3d(0,-50%,0);}
	83.3%,95.96% {transform:translate3d(0,-25%,0);}
	/* 0%, 20%, 100% {transform:translate3d(0,0,0);}
	20%, 40% {transform:translate3d(0,-33.33%,0);}
	40%, 60% {transform:translate3d(0,-66.66%,0);}
	60%,95.96% {transform:translate3d(0,-33.33%,0);} */
}

.top-nav li.active a, .top-nav li:hover a {
	color: var(--fs-red);
	border-bottom: 2px solid var(--fs-red);
}
#top-menu, .top-nav {
	display: flex;
	column-gap: 3rem;
}


#main-nav.on {
	row-gap: 1rem;
}

#main-nav.on #top-menu {
	display: flex !important;
	top: 30px;
	flex-direction: column;
	order: 3;
	row-gap: 2rem;
	padding-bottom: 2rem;
}

#main-nav.on button i.fa-bars::before{
	content: "\f00d";
}
#main-nav.on .top-nav {
	flex-direction: column;
	width: 100%;
}
#main-nav.on .top-nav li {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--grey-02);
	width: 100%;
    text-align: center;
}
#main-nav.on .top-nav li:hover {
	background: var(--grey-02);
}
#main-nav.on .top-nav li:hover a{
	color: var(--fs-red);
}
#main-nav.on .hamburger {
	display:block;
}

.page-header.navbar .dropdown-extended .dropdown-menu.dropdown-menu-list a {
    display: block;
    font-weight: 400;
    line-height: 20px;
    white-space: normal;
    font-size: 13px;
    text-shadow: none
}

.page-header.navbar .dropdown-extended .dropdown-menu.dropdown-menu-list a:hover {
    opacity: 1;
    text-decoration: none
}

.dropdown-menu-list li a {
    padding: 5px 10px 5px!important;
    color: #616d7d
}

.dropdown-menu-list li a:hover {
    color: #262626;
    background: #eee
}

.dropdown-menu-list li img {
    width: 18px;
    height: 18px;
    vertical-align: -4px
}

.dropdown-menu-list .badge {
    background-color: #a1112e;
    height: 18px!important;
    width: 18px!important;
    padding: 0!important;
    line-height: 18px
}

.dropdown-menu-list .title {
    font-weight: 700;
    padding: 5px 10px 5px!important
}

.dropdown-menu-list hr {
    margin: 5px 0
}

.fs-nav-3 {
    order: 4
}

.fs-nav-3 .dropdown-menu {
    right: 10px;
    left: auto
}

.sec-chart {
	width: 100%;
	text-align: left;
	margin-top: 20px;
}
.sec-chart .labels {
	position: relative;
	margin-top: .5rem;
	font-size: .75rem;
}
.sec-chart .labels > * {
	position: absolute;
}
.sec-chart .labels > *:nth-child(1) {
	left: -5px;
}
.sec-chart .labels > *:nth-child(2) {
	left: calc(25% - 10px);
}
.sec-chart .labels > *:nth-child(3) {
	left: calc(50% - 10px);
}
.sec-chart .labels > *:nth-child(4) {
	left: calc(75% - 10px);
}
.sec-chart .labels > *:nth-child(5) {
	left: calc(100% - 20px);
}
.sec-chart .bars {
	align-items: baseline;
	height: 10px;
}
.sec-chart .bars > * {
	width: 25%;
	height: 8px;
	position: relative;
	background-color: var(--grey-03);
	border-left: 1px solid var(--black-02);
}
.sec-chart .bars > *:last-child {
	border-right: 1px solid var(--black-02);
}
.sec-chart .bars > *.active {
	background-color: var(--fs-red);
}

.modal-fullscreen-sm-down .fs-close {
	position: absolute;
	left: 1.05rem;
	top: 0.65rem;
}
.modal-fullscreen-sm-down .modal-body {
	padding: 1.75rem 2rem 2rem;
}
.modal-fullscreen-sm-down .modal-header {
	border-bottom: none;
	justify-content: center;
}
.full-modal .modal-body {
	overflow-y: auto;
	height: calc( 100vh - 63px);
}

.sm\:d-block, .sm\:d-flex {
	display: none !important;
}

.fa-eye-slash.toggle-password {
    color: var(--grey-05, #B7B7B7);
}

.fs-nav .dropdown-menu{
	/*width: 300px;*/
	border-radius: 8px;
	background: #FFF;
	
	/* Drop shadow 2 */
	box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.05), 0px 0px 24px 0px rgba(0, 0, 0, 0.05);
}
.fs-nav .menu-item{
	display: flex;
	padding: 16px;
	align-items: center;
	gap: 16px;
	font-weight: 400 !important;
}
#loginmodal.modal{
	z-index: 10000;
}
.on-mobile {
	display: none !important;
}
.page-title {
	margin-top: 1.5rem;
	margin-bottom: 3rem;
	padding-bottom: 3rem;
}
.nav-shadow{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
	display: none;
	--bs-backdrop-zindex: 10;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.7;
}
/** fix tom-select */
.ts-control, .ts-control input, .ts-dropdown {
	font-size: 1rem !important;
}

.select_lang .modal-dialog{
	width: 20rem;
}
.select_lang .modal-body > * {
	display: flex;
	flex-direction: row;
	gap: .75rem;
	padding: 1rem 2rem;
	align-items: center;
}
.select_lang .modal-body > *:not(:first-child) {
	border-top: 1px solid var(--grey-03);
}
.select_lang a.lang:hover {
	background: var(--grey-03);
}
.modal.blur {
	backdrop-filter: blur(8px);
}
.locked-box {
	position: relative;
}
.locked-box::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15rem;
	background: linear-gradient(-180deg,rgba(255,255,255,0) 0,#fff 70%);
	border-radius: 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl);
	z-index: 1;
}
.locked-box .ajax-login {
	z-index: 2;
	position: relative;
}

.feedback-a-numbers {flex-wrap: wrap;margin-bottom: .5rem;}
@media (max-width: 1400px) and (min-width: 991.98px){
	header > .container { 
		width: 100%; 
		max-width: calc(100% - 6rem);
		margin-left: 3rem !important; 
		margin-right: 3rem !important; 
	}

	#top-menu, .top-nav {
		column-gap: 2rem;
	}
}
@media (max-width: 1280px){
	header img.logo { content:url("/logo/logo15.svg") }
}
@media (max-width: 1150px){
	#top-menu, .top-nav {
		column-gap: 1rem;
	}
	header .search {
		width: 235px;
		gap: 10px;
	}
	header .search input {
		width: 170px;
	}
	header .username {
		display: none;
	}
}
@media (max-width: 1030px){
	#top-menu, .top-nav {
		column-gap: 1rem;
	}
}
@media (max-width: 991.98px){
	.md\:d-none {
		display: none !important;
	}
	.md\:d-block {
		display: block !important;
	}
	.md\:d-flex {
		display: flex !important;
	}
	.md\:flex-column {
		flex-direction: column !important;
	}
	.md\:flex-column-reverse {
		flex-direction: column-reverse !important;
	}
	.md\:flex-row {
		flex-direction: row !important;
	}
	.md\:mb-8 {
		margin-bottom: 2rem !important;
	}

	header {
		background: var(--fs-white);
		position: relative;
	}
	header img.logo { content:url("/logo/logo15.svg") }

	header .search {
		width: auto;
	}
    .hamburger {
        display:block;
		order: 1;
    }
    .page-header {
        padding-right: 0
    }
	#top-menu {
		margin-left: 0 !important;
	}
	#main-nav:not(.on) #top-menu > *:not(.search-box) {
		display: none !important;
		position: relative !important;
	}
	#top-menu > .search-box {
		flex-grow: 0 !important;
	}
	.on #top-menu {
		width: 100%;
	}
	#main-nav.on .hamburger {
		order: 1;
	}
	.logout {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.logout a {
		font-weight: 300 !important;
	}
	body:has(.navbar.on) .nav-shadow{
		display: block;
		opacity: 0.7;
	}	
}

@media (max-width: 767.98px) {
	.container.px-0 {
		padding-left: calc(var(--bs-gutter-x) * .5) !important;
		padding-right: calc(var(--bs-gutter-x) * .5) !important;
	}
	h1, .h1 {font-size:3.06rem}
	h2, .h2 {font-size:2.75rem}
	h3, .h3 {font-size:1.5rem}
	h4, .h4 {font-size:2rem}
	h5, .h5 {font-size:1.4375rem}
	h6, .h6 {font-size:1rem}

	.fs-xl {font-size: 1.5rem !important;}
	.fs-l {font-size: 1.125rem !important;}

	.sm\:mt-3 {margin-top: 1rem !important;}
	.sm\:mt-6 {margin-top: 1.5rem !important;}
	.sm\:mt-8 {margin-top: 2rem !important;}

	.sm\:mb-6 {margin-bottom: 1.5rem !important;}
	.sm\:mb-8 {margin-bottom: 2rem !important;}

	.sm\:d-none {
		display: none !important;
	}
	.sm\:d-block {
		display: block !important;
	}
	.sm\:d-flex {
		display: flex !important;
	}

	.sm\:flex-column {
		flex-direction: column !important;
	}
	.sm\:flex-column-reverse {
		flex-direction: column-reverse !important;
	}
	.sm\:flex-row {
		flex-direction: row !important;
	}
	.sm\:flex-wrap {
		flex-wrap: wrap !important;
	}
	.sm\:gap-3 {
		gap: 1rem !important;
	}
	.sm\:mb-3 {
		margin-bottom: 1rem !important;
	}
	.sm\:mb-4 {
		margin-bottom: 1.5rem !important;
	}
	.sm\:mb-8 {
		margin-bottom: 2rem !important;
	}

	.sm\:h-scroll-list {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		padding-bottom: 1rem;
		overflow-x: scroll;
	}
	.sm\:h-scroll-list > * {
		width: 85%;
	}

	.sm\:row-gutter.row {
		row-gap: 1.5rem;
	}

	.full-modal {
		position: fixed;
		z-index: 2000;
		background: #fff;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.full-modal-title {
		flex-direction: row-reverse !important;
	}
	.full-modal-title i.fa-xmark {
		flex-grow: 1;
	}
	
	.modal .modal-dialog {
		margin: auto;
	}
	.modal .modal-content {
		border-radius: 0;
	}
	.modal-fullscreen-sm-down .fs-close {
		left: 0.5rem;
	}
	.modal-fullscreen-sm-down .fs-close i::before, .full-modal-title i.fa-xmark::before {
		content: "\f104";
		font-size: 1.5rem;
	}
	.modal-fullscreen-sm-down .modal-header {
		justify-content: start;
		padding-left: 3rem;
	}
	.modal-fullscreen-sm-down .modal-body {
		padding: 1.75rem 1.5rem 2rem;
	}
	.modal-title.fs-5 {
		font-size: 1.125rem !important;
	}
	.tab-box .tab-pane {
		overflow-x: auto;
	}
	.tab-box .nav-tabs .nav-link {
		width: 100%;
		border-bottom: 1px solid var(--grey-03);
		text-align: left;
	}
	.tab-box .nav-tabs .nav-link.active {
		border-width: 1px !important;
		border-radius: 0 !important;
	}


	.dropdown-toggle-vn{
		padding: 12px 10px !important;
	}
	.sm-appear {
		display: block !important;
	}
	.sm-flex-disappear {
		display: none !important;
	}
	header .container, footer .container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.page-footer {
		flex-direction: column-reverse;
		font-size: .75rem;
		align-items: flex-start !important;
		gap: 1.5rem;
	}

	.school-name {
		height: 3rem;
	}
	.school-section {
		padding: 1rem;
	}
	.school-sub-sec {
		flex-direction: row;
		align-items: center;
		gap:.5rem;
	}
	.school-meta-basic .row {
		gap: .5rem;
	}
	.school-meta {
		flex-direction: column-reverse !important;
		align-items: flex-start !important;
	}
	.school-meta > * {
		width: 100%;
		font-size: .75rem !important;
		padding: 12px 16px;
	}
	.school-meta .fs-l {
		font-size: 1rem !important;
	}
	.school_score {
		width: 24px;
		height: 24px;
		min-width: 24px;
	}
	.schools .school-img {
		height: 200px;
		border-radius: 16px 16px 0 0;
	}
	.school-text {
		border-radius: 0 0 16px 16px;
	}
	.table-underline > *:not(:last-child), .table-underline > .row > *:not(:last-child) {
		border-bottom: 1px solid var(--grey-03);
	}

	.tags .label {
		font-size: 1rem;
		font-weight: 300;
		padding: 8px 12px;
	}

	.off-mobile{
		display: none !important;
	}
	.on-mobile {
		display: flex !important;
	}
	.page-title {
		margin-bottom: 0rem;
	}
}