/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.20.4
*/
.header-top {
	.container {
		max-width: 95% !important;

		.flex-left {
			padding: 0;
		}
	}
}
.header-main {
	.container {
		max-width: 95% !important;
	}
}
.header-main .nav > li > a {
	line-height: 24px;
	font-size: 16px;
	text-transform: capitalize;
	font-weight: 500;
}
.cta-btn {
	--main: #30358b;
	--accent: #f1a61f;

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 60px;
	height: 56px;
	padding: 0 30px 0 16px;
	border-radius: 100px;
	background: var(--main);
	color: #fff;
	font-weight: 700;
	font-size: 22px;
	overflow: hidden;
	text-decoration: none;
	border: 3px solid var(--main);
}

/* viên bi */
.cta-btn::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 3px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
}

/* bung full */
.cta-btn:hover::before {
	width: calc(100% - 12px);
	padding: 5px;
	border-radius: 99px;
	overflow: hidden;
}

/* icon */
.cta-icon {
	img {
		position: absolute;
		bottom: 18px;
		left: 18px;
		transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

/* text */
.cta-text {
	z-index: 1;
	transition: 0.45s;
	color: #f1a61f;
	font-weight: bold;
}

/* hover outline */
.cta-btn:hover {
}

.cta-btn:hover .cta-text {
	color: var(--accent);
}

.cta-btn:hover .cta-icon img {
	transform: rotate(45deg);
	transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyBlackItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyBlackItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyBlackItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyBlackItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyBlackItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyBlackItalic.svg#SVN-GilroyBlackItalic')
			format('svg');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyBold.eot');
	src:
		url('./assets/fonts/SVN-GilroyBold.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyBold.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyBold.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyBold.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyBold.svg#SVN-GilroyBold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyBoldItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyBoldItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyBoldItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyBoldItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyBoldItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyBoldItalic.svg#SVN-GilroyBoldItalic')
			format('svg');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyHeavyItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyHeavyItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyHeavyItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyHeavyItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyHeavyItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyHeavyItalic.svg#SVN-GilroyHeavyItalic')
			format('svg');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyBlack.eot');
	src:
		url('./assets/fonts/SVN-GilroyBlack.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyBlack.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyBlack.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyBlack.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyBlack.svg#SVN-GilroyBlack') format('svg');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyItalic.svg#SVN-GilroyItalic')
			format('svg');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-Gilroy.eot');
	src:
		url('./assets/fonts/SVN-Gilroy.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/SVN-Gilroy.woff2') format('woff2'),
		url('./assets/fonts/SVN-Gilroy.woff') format('woff'),
		url('./assets/fonts/SVN-Gilroy.ttf') format('truetype'),
		url('./assets/fonts/SVN-Gilroy.svg#SVN-Gilroy') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyLight.eot');
	src:
		url('./assets/fonts/SVN-GilroyLight.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyLight.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyLight.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyLight.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyLight.svg#SVN-GilroyLight') format('svg');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyHeavy.eot');
	src:
		url('./assets/fonts/SVN-GilroyHeavy.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyHeavy.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyHeavy.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyHeavy.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyHeavy.svg#SVN-GilroyHeavy') format('svg');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroySemiBoldItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroySemiBoldItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroySemiBoldItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroySemiBoldItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroySemiBoldItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroySemiBoldItalic.svg#SVN-GilroySemiBoldItalic')
			format('svg');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyMediumItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyMediumItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyMediumItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyMediumItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyMediumItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyMediumItalic.svg#SVN-GilroyMediumItalic')
			format('svg');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyMedium.eot');
	src:
		url('./assets/fonts/SVN-GilroyMedium.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyMedium.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyMedium.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyMedium.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyMedium.svg#SVN-GilroyMedium')
			format('svg');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyLightItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyLightItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyLightItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyLightItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyLightItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyLightItalic.svg#SVN-GilroyLightItalic')
			format('svg');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy XBold';
	src: url('./assets/fonts/SVN-GilroyXBold.eot');
	src:
		url('./assets/fonts/SVN-GilroyXBold.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyXBold.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyXBold.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyXBold.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyXBold.svg#SVN-GilroyXBold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyThinItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyThinItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyThinItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyThinItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyThinItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyThinItalic.svg#SVN-GilroyThinItalic')
			format('svg');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy XLight';
	src: url('./assets/fonts/SVN-GilroyXLightItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyXLightItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyXLightItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyXLightItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyXLightItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyXLightItalic.svg#SVN-GilroyXLightItalic')
			format('svg');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroySemiBold.eot');
	src:
		url('./assets/fonts/SVN-GilroySemiBold.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroySemiBold.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroySemiBold.woff') format('woff'),
		url('./assets/fonts/SVN-GilroySemiBold.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroySemiBold.svg#SVN-GilroySemiBold')
			format('svg');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy';
	src: url('./assets/fonts/SVN-GilroyThin.eot');
	src:
		url('./assets/fonts/SVN-GilroyThin.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyThin.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyThin.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyThin.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyThin.svg#SVN-GilroyThin') format('svg');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy XBold';
	src: url('./assets/fonts/SVN-GilroyXBoldItalic.eot');
	src:
		url('./assets/fonts/SVN-GilroyXBoldItalic.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyXBoldItalic.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyXBoldItalic.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyXBoldItalic.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyXBoldItalic.svg#SVN-GilroyXBoldItalic')
			format('svg');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SVN-Gilroy XLight';
	src: url('./assets/fonts/SVN-GilroyXLight.eot');
	src:
		url('./assets/fonts/SVN-GilroyXLight.eot?#iefix')
			format('embedded-opentype'),
		url('./assets/fonts/SVN-GilroyXLight.woff2') format('woff2'),
		url('./assets/fonts/SVN-GilroyXLight.woff') format('woff'),
		url('./assets/fonts/SVN-GilroyXLight.ttf') format('truetype'),
		url('./assets/fonts/SVN-GilroyXLight.svg#SVN-GilroyXLight')
			format('svg');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

/* Usage example */
body {
	font-family: 'SVN-Gilroy', sans-serif;
}

.text-title h1 {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 800;
	text-align: center;
	color: var(--primary-color);
	margin: 0;
}

.text-title p {
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0%;
	text-align: justify;
}
.button span {
	display: inline-block;
	line-height: 1.6;
	font-size: 17px;
}
.header-nav-main {
	justify-content: center;
	gap: 10px;
	flex-wrap: nowrap;
}
.header-search {
	margin: 0;
	a {
		color: white !important;
		.icon-search {
			font-size: 16px;
			background: var(--fs-color-secondary);
			padding: 10px;
			border-radius: 50%;
		}
	}
}
.header-main .header-inner {
	padding: 10px 0;
}
.text-title-sec2 h3 {
	font-size: 16px;
	font-weight: 500;
	color: #1d4ed8;
	text-align: center;

	margin: 0;
}
.text-title-sec2 h2 {
	font-size: 36px;
	line-height: 1.2;
	font-weight: 800;
	text-align: center;
	color: #1e293b;
	margin: 0;
	padding: 10px 0;
}
.text-title-sec2 p {
	font-size: 18px;
	line-height: 1.8;
	text-align: center;
	color: #475569;
	margin: 0;
	padding: 1rem 0 2rem 0;

	width: 63%;
	display: flex;
	margin: auto;
}
.img-border img {
	border-radius: 8px;
}
.img-inner.image-zoom-long {
	border-radius: 8px;
}

.stack-gtcl .text p {
	/* height: 130px; */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	margin: 0;
	padding-top: 1rem;
}
.stack-gtcl .text h4 {
	font-size: 16px;
	padding-bottom: 2rem;
}
.stack-gtcl {
	display: flex;
	max-width: 1250px;
	margin: auto;
}
.stack-gtcl .col-inner:hover {
	transform: scale(1.1);
	transition: transform 0.3s ease-in-out;
}
.tabs-home li a {
	border: none;
	border-radius: 8px;
}
.tabs-home li a span {
	padding: 10px;
}
.tabs-home .nav-vertical + .tab-panels {
	border-left: none;
	flex: 1;
	margin-top: 0 !important;
	padding: 0 30px 30px;
	justify-content: center;
	display: flex;
	flex-direction: column;
	align-items: baseline;
	padding: 0 50px;
}
p {
	text-align: justify;
}
.tabs-home .tab-panels p {
	margin: 0;
}
.tabs-home .nav-vertical > li + li {
	border-top: none;
}

.tabs-home .nav-pills > li.active > a {
	color: white !important;
}
.bg-text {
	background: #f0fdf4;
	padding: 15px;
	margin-top: 1rem;
	border-radius: 8px;
}
.tabbed-content .nav-vertical {
	padding-top: 0;
	width: 30%;
}
.tabs-icon.tabs-home li a span {
	font-size: 17px;
	text-transform: none;
}
.stack-hest {
	display: flex;
	max-width: 1250px;
	margin: auto;
}
.stack-hest .col-inner {
	border: 1px solid black;
}
.stack-hest .col-inner:hover {
	border: 1px solid var(--primary-color);
	transform: scale(1.05);
	transition: transform 0.3s ease-in-out;
}
.flex-col-css {
	display: flex;
}
.col-rot {
	order: -1;
}
.wpcf7-form-control-wrap input {
	border-radius: 6px;
}
.wpcf7-form-control-wrap textarea {
	border-radius: 6px;
}
.wpcf7-spinner {
	display: none;
}
.wpcf7-form-control.wpcf7-submit {
	width: 100%;
	border-radius: 8px;
}
.widefat td p {
	margin: 2px 0 0.8em;
	color: white !important;
}
#logo img {
	max-height: 85px !important;
}
.stuck #logo img {
	max-height: 80px !important;
}
.copyright-footer {
	font-size: 20px;
	color: black;
}
.stuck .header-main .nav > li > a {
	line-height: 20px !important;
}
.video-responsive-container {
	iframe {
		width: 100% !important;
	}
}
.lightbox-content {
	background-color: #fff;
	box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, 0.15);
	margin: 0 auto;
	max-width: 875px !important;
	position: relative;
	border-radius: 8px;
}
/* KHÓA HỌC TRANG CHỦ SHORTCODE khoahoc_home */
/* .container-khoahoc-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 100%;
} */

.course-item {
	width: 100%;
	box-sizing: border-box;
}
.container-khoahoc-wrapper .tutor-meta,
.container-khoahoc-wrapper .tutor-course-ratings {
	display: none;
}
.container-khoahoc-wrapper .tutor-course-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	-webkit-box-orient: vertical;
	height: 75px;
}
.container-khoahoc-wrapper .tutor-course-name a {
	color: var(--primary-color);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: 0.5px;
}
.container-khoahoc-wrapper .tutor-ratio-16x9 {
	padding-top: 0;
	height: 250px;
	width: 100%;
}
.container-khoahoc-wrapper .tutor-card.tutor-course-card {
	box-shadow:
		0 10px 20px rgba(0, 0, 0, 0.19),
		0 6px 6px rgba(0, 0, 0, 0.22);
	border: 1px solid var(--fs-color-secondary);
}
.container-khoahoc-wrapper .tutor-card.tutor-course-card:hover {
	transform: scale(1.02);
	transition: transform 0.3s ease-in-out;
}
.p-0 p {
	margin: 0;
}
.section4 .slider .row {
	max-width: 65%;
	opacity: 1;
	margin-left: 0;
	margin-right: 0;
}
.section4 .slider .row p {
	font-weight: 400;
	font-size: 21px;
	line-height: 30px;
	letter-spacing: 0%;
}
.text.p-0 {
	margin-top: 3rem;
}
.custom-marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
}
.marquee-track {
	display: flex;
	width: max-content;
	animation: marqueeScroll 25s linear infinite;
	align-items: center;
	gap: 30px;
}
.marquee-track .img {
	width: auto !important;
}
.marquee-track img {
	width: 500px;
	height: auto;
	margin-right: 20px;
	flex-shrink: 0;
	object-fit: contain;
}
.img-cham img {
	width: 15px !important;
}
@keyframes marqueeScroll {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}

.custom-marquee:hover .marquee-track {
	animation-play-state: paused;
}
.acc-home-css .accordion-item {
	margin-bottom: 1rem;
}
.acc-home-css .accordion-item a {
	width: 30%;
	border: 1px solid;
	border-radius: 99px;
	padding: 10px 10px;
}
.acc-home-css .accordion-item .accordion-inner {
	display: block;
	background: #f5e5be70;
	border-radius: 8px;
	margin-top: 1rem;
	width: 70%;
	padding: 10px;
	margin-left: 2rem;
}
.acc-home-css .accordion-item p {
	margin: 0;
	font-size: 20px;
}
.accordion .toggle {
	right: 0 !important;
	left: unset;
}
.acc-home-css .accordion-item a span {
	font-size: 20px;
}
.account-name::before {
	content: '\ef68';
	font-family: 'tabler-icons';
	font-size: 16px;
	margin-left: 5px;
}
.account-name {
	text-transform: capitalize;
	cursor: pointer;
	font-weight: bold;
	font-size: 20px;
	color: var(--primary-color);

	cursor: pointer;
	font-weight: bold;
}
img.avatar.avatar-36.photo.account-avatar-img {
	width: 20px;
	height: 20px;
}
.account-name::after {
	content: '\ea5f';
	font-family: 'tabler-icons';
	font-size: 16px;
	margin-left: 5px;
}
.single-tutor-top {
	/* padding-top: 50px !important;
	padding-bottom: 50px;
	background: black; */
}

.tutor-course-details-title {
	color: var(--primary-color) !important;
	text-transform: uppercase;
	font-size: 32px;
	font-weight: 900;
	margin-top: 30px;
	line-height: 1.2;
	margin-bottom: 20px;
}
.content-tutor p {
	padding-left: 0 !important;
	color: var(--fs-color-success);
	text-align: justify;
	font-size: 1.15rem;
	margin-top: 1rem;
}

.list-benefit li {
	align-items: center;
	color: black;
	gap: 10px;
	width: 100% !important;
	font-size: 18px;
}
.list-benefit {
	flex-direction: column !important;
	color: #fff;
}
.tutor-course-details-tab .tutor-course-details-content,
.tutor-course-details-tab .tutor-course-details-widget,
.tutor-course-details-tab .tutor-is-sticky {
	display: none;
}
.tutor-course-details-tab .tutor-mt-40 {
	margin-top: 0px !important;
}
.tutor-single-course-sidebar-more .tutor-course-details-instructors {
	display: none;
}
.tutor-single-course-sidebar-more .tutor-course-details-instructors + div {
	border-top: 1px solid var(--tutor-border-color);
	padding-top: 24px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.tutor-fs-5 {
	font-size: 25px;
}
.tutor-related .tutor-course-filter {
	display: none;
}
.title-related-tutor.title-will-learn {
	text-align: center;
	margin-top: 1rem;
}
.container.section-title-container {
	display: none;
}
.section-title b {
	background-color: currentColor;
	display: block;
	flex: 1;
	height: 2px;
	opacity: 0;
}
.container-khoahoc-wrapper .tutor-card-footer {
	padding: 16px 20px;
	border-radius: 0 0 5px 5px;
	/* display: NONE; */
}
.header-button {
	display: none;
}
.login form {
	background: #fff;
	padding: 30px 25px;
	box-shadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.1);
	border-radius: 20px !important;
}
.text-product-home {
	font-size: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 50px;
}

/* .tutor-card-footer.tutor-info-bottom {
display: none;
} */

span.amount {
	color: RED;
	font-weight: 700;
	white-space: nowrap;
}
.woocommerce-customer-details {
	display: none;
}
.btn.btn-primary-checkout {
	background: black;
	border-radius: 8px;
}
.tutor-modal-body {
	box-shadow:
		0 10px 20px rgba(0, 0, 0, 0.19),
		0 6px 6px rgba(0, 0, 0, 0.22);
	border: 1px solid var(--fs-color-secondary);
	border-radius: 14px;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details
	li {
	font-size: 18px;
}
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
	display: none;
}
.woocommerce-order-details {
	display: none;
}
.fs20-bg {
	color: var(--fs-color-primary);
	font-weight: bold;
	font-size: 28px;
	text-align: center;
	text-transform: capitalize;
}
.fs20-bg-p {
	color: var(--fs-color-primary);
	font-weight: bold;
	font-size: 28px;
	text-align: center;
	text-transform: capitalize;
	margin-bottom: 0;
}
.woocommerce-info.message-wrapper {
	background: var(--fs-color-secondary);
}
.tutor-dashboard .tutor-frontend-dashboard-header {
	position: relative;
	/* padding-bottom: 25px; */
	background: var(--fs-color-secondary);
	padding: 20px;
}
/* .woocommerce-Price-amount.amount bdi {
	color: aliceblue;
	font-size: 28px;
} */
.col-inner-custom-p20 .woocommerce-Price-amount.amount bdi,
.total .woocommerce-Price-amount.amount bdi {
	color: black;
	font-size: 20px;
}
.text-checkout {
	background: var(--fs-color-secondary);
	padding: 10px;
	text-align: center;
}

/* CHÂN ĐẾ PUREHIGH */
.cf7-phone-pill {
	margin-top: 1rem;
	.wpcf7 .wpcf7-not-valid-tip {
		transform: translatey(-44px) !important;
	}

	p {
		margin: 0;
		display: flex;
		align-items: center;
		gap: 0;
		background: white;
		border-radius: 999px;
		padding: 6px;
		border: 2px solid #fff;
		box-shadow: 0 4px 60px 0 rgba(40, 55, 79, 0.1);
		width: 50%;
	}

	.wpcf7-form-control-wrap {
		flex: 1;
	}

	input[type='email'] {
		width: 100%;
		background: transparent;
		border: none;
		color: rgba(13, 13, 13, 0.6);
		font-size: 16px;
		padding: 18px 24px;
		outline: none;
		box-shadow: none;
		margin-bottom: 0;

		&::placeholder {
			color: rgba(13, 13, 13, 0.6);
			opacity: 0.9;
			font-weight: 400;
		}
	}
	input[type='submit'] {
		background: #30358b !important;
		color: var(--text-main-color);
		border: none;
		padding: 3px 16px;
		font-size: 12px;
		font-weight: 600;
		cursor: pointer;
		white-space: nowrap;
		transition: all 0.3s ease;
		margin: 0;
		border-radius: 99px;
		line-height: 1;
		background: var(--color-2);
		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
		width: max-content;
		color: white;
		margin-right: 10px;
		margin: 10px;
	}

	.wpcf7-spinner {
		display: none;
	}
}
.row-divided > .col + .col:not(.large-12) {
	border-left: 3px solid #ececec;
	padding: 0 20px;
}
.ft-sec1 {
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	padding: 60px 0 !important;
	overflow: hidden;
	h3 > span {
		color: var(--title, #202020);

		font-size: 70px !important;
		font-style: normal;
		font-weight: 600;
		line-height: 100%; /* 70px */
		letter-spacing: 0.7px;
		&:last-child {
			font-size: 35px !important;
			font-weight: 500;
		}
	}

	.large-3 {
		flex-basis: 25%;
		max-width: 25%;
		margin: 0;
		padding: 0;
		@media (max-width: 767px) {
			flex-basis: 100%;
			max-width: 100%;
			margin: 0 10px;
		}
	}
	.icon-inner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-box-img {
		width: 80px !important;
		transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);

		img {
			background: #fff;
			border-radius: 50%;
			display: block;
			transform-origin: center center;
			transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
	}

	p {
		margin: 0;
		padding: 0;
		opacity: 0;
		transform: translateY(40px);
		transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		width: 85%;
	}

	.icon-box-text {
		transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.col-inner {
		margin: 10px 0;
	}
	/* HOVER */
	.col-inner:hover {
		/* chữ trượt từ dưới lên */
		p {
			opacity: 1;
			transform: translateY(0);
		}

		/* icon xoay đúng tâm */
		.icon-box-img .icon-inner {
			transform: rotate(106deg);
		}

		/* đẩy block số % lên nhẹ */
		.icon-box-text {
			transform: translateY(-6px);
		}
	}
}

.ft-sec2 {
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	padding: 60px 0 !important;
	overflow: hidden;
	margin-top: -3rem;

	.large-6 {
		margin: 0;
		padding: 0;
	}
	p {
		margin: 0;
		padding: 0;
	}
	.col-6-icon {
		.icon-box {
			margin-bottom: 1rem;
			border-bottom: 1px solid rgba(255, 255, 255, 0.38);
			padding-bottom: 10px;
		}
		p {
			span {
				font-size: 20px !important;
				strong {
					margin-left: 2rem;
				}
			}
		}
	}
	/* khóa layout icon */
	.icon-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.icon-box-img {
		img {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 99px;
			background: transparent;
			transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
	}

	.icon-box {
		position: relative;
	}

	.icon-box:hover {
		/* xoay mượt + scale nhẹ */
		.icon-inner {
			transform: rotate(106deg) scale(1.08);
		}

		img {
			background-color: var(--color-1);
			border-radius: 99px;
		}
	}
	.icon-contact-ft {
		border: none !important;
		img {
			border-radius: unset !important;
			background: unset !important;
			transition: unset !important;
		}
	}

	.icon-contact-ft .icon-box {
		align-items: center;
		h3 {
			margin: 0;
			font-size: 24px;
		}
	}
	.ux-menu.stack {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		.ux-menu-link__link {
			color: #fff;
			text-align: right;
			font-family: SVN-Gilroy;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: 24px; /* 133.333% */
			text-decoration-line: underline;
			text-decoration-style: solid;
			text-decoration-skip-ink: none;
			text-decoration-thickness: auto;
			text-underline-offset: auto;
			text-underline-position: from-font;
			opacity: 0.6;
		}
	}
}
.mb-0.pb-0 {
	@media (max-width: 767px) {
		text-align: left;
	}
}
h2 {
	@media (max-width: 767px) {
		font-size: 32px !important;
	}
	span {
		@media (max-width: 767px) {
			font-size: 32px !important;
		}
	}
}
.sec-about {
	h2 {
		color: var(--main-2, #30358b);
		font-family: SVN-Gilroy;
		font-size: 60px;
		font-style: normal;
		font-weight: 700;
		line-height: 100%;
		@media (max-width: 767px) {
			font-size: 40px;
		}
		strong {
			color: var(--main-1, #f1a61f);
			text-align: center;
			font-family: SVN-Gilroy;
			font-size: 60px;
			font-style: normal;
			font-weight: 700;
			line-height: 100%; /* 60px */
			margin-bottom: 20px;
			@media (max-width: 767px) {
				font-size: 40px;
			}
		}
	}
	p {
		color: var(--body-text, #333);
		text-align: center;
		font-family: SVN-Gilroy;
		font-size: 20px;
		font-style: normal;
		font-weight: 400;

		letter-spacing: 0.4px;
		margin: 0;

		margin-bottom: 0px;
		@media (max-width: 767px) {
			font-size: 18px !important;
			text-align: justify !important;
			span {
				font-size: 18px !important;
				text-align: justify !important;
			}
		}
	}
	.row-icon {
		.col-inner {
			height: 100%;
			@media screen and (max-width: 767px) {
				padding: 20px 30px !important;
			}
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url('../../uploads/2026/01/docs.png') center center;
				border-radius: 12px;
				transition: background 0.3s ease;
				z-index: 1;
			}
		}
	}
	h3 {
		color: var(--main-2, #30358b);
		font-family: SVN-Gilroy;
		font-size: 40px;
		font-style: normal;
		font-weight: 700;
		line-height: 100%;
		strong {
			color: var(--main-1, #f1a11f);
			text-align: center;
			font-family: SVN-Gilroy;
			font-size: 40px;
			font-style: normal;
			font-weight: 700;
			line-height: 100%; /* 60px */
			margin-bottom: 20px;
		}
	}
	.icon-box-img {
		height: 50px;
	}
	.col-6-mv {
		.icon-box {
			align-items: center;
			margin-bottom: 17px;
			.icon-box-img {
				height: 100% !important;
			}
			img {
				height: 100% !important;
			}
		}
		h4 {
			margin: 0;
		}
		p {
			height: 100%;
			margin-bottom: 10px;
		}
	}
}

.sec-exe {
	.mb-2 {
		p {
			margin-bottom: 1rem;
		}
	}
	p {
		margin: 0;
		padding: 0;
	}
	.text {
		h3 {
			span {
				@media screen and (max-width: 767px) {
					font-size: 28px !important;
				}
			}
		}
		p {
			span {
				@media screen and (max-width: 767px) {
					font-size: 18px !important;
				}
			}
		}
	}
}
.social-icons-ft {
	display: flex !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 0 !important;
	justify-content: space-around !important;
}
.social-icons-ft img {
	width: 30px !important;
	height: 30px !important;
	object-fit: contain;
}
.sec-lead {
	@media screen and (max-width: 767px) {
		padding: 0 !important;
	}
	.section-content {
		.row {
			.col-p-0 {
				padding: 0;
			}
		}
	}
	.box-image {
		h4 {
			margin-bottom: 10px;
		}
		&::before {
			content: '';
			position: absolute;
			top: 7%;
			left: 80%;
			width: 45px;
			height: 50px;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 12px;

			background: url('../../uploads/2026/01/arrow-lead.png') center
				center;
			background-repeat: no-repeat;
			z-index: 99;
			transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
		img {
			background: var(--fs-color-secondary);
			padding: 20px;
			border-radius: 20px;
			overflow: hidden;
		}
	}
	.box:hover .box-image::before {
		transform: rotate(106deg);
		z-index: 999;
		transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.box-text.text-center {
		padding: 10px 0;
		.text {
			p {
				text-align: justify;
				span {
					font-size: 18px !important;
					color: #333333;
					text-align: justify;
				}
			}
		}
	}
	.flickity-button.flickity-prev-next-button.next {
		position: absolute;
		top: -80%;
		z-index: 999;
		opacity: 1;

		border-radius: 8px;
		svg {
			border-radius: 8px !important;

			filter: invert(1);
			border: 1px solid !important;
		}
	}
	.flickity-button.flickity-prev-next-button.previous {
		position: absolute;
		top: -80%;
		z-index: 999;
		opacity: 1;
		border-radius: 8px;
		right: 0;
		left: 90%;
		svg {
			border-radius: 8px !important;

			filter: invert(1);
			border: 1px solid !important;
		}
	}
	ol.flickity-page-dots {
		display: none;
	}
}
.sec-cer {
	.img-inner.dark {
		padding: 13px 21px 14px 22px;
		border-radius: 12px;
		border: 3px solid var(--Color, #02326d);
	}
}

.home-blog .tabbed-content .nav {
	padding: 8px 15px;
	width: max-content;
	overflow: hidden;
	margin: 0 auto;
	border-radius: 12px;
	background: rgba(241, 166, 31, 0.15);
	margin-bottom: 65px;
	margin-top: 20px;
}

.home-blog .tabbed-content .nav .tab.active a {
	border-radius: 10px;
}

.home-blog .tabbed-content .nav .tab a {
	padding: 4px 30px;
}

.home-blog .tabbed-content .nav .tab a span {
	font-weight: 500;
	font-size: 24px;
	text-transform: capitalize;
}

.home-blog .post-item .box {
	border-radius: 10px;
	overflow: hidden;

	border: 1px solid #ccc;
	.box-image {
		padding: 5px;
		border-radius: 8px;
		overflow: hidden;
		background: white;
		img {
			border-radius: 12px;
		}
	}
	.post-title {
		color: black;
		font-size: 20px;
	}
}
.home-blog .post-item .box .box-text {
	text-shadow: none;
	padding: 10px;
}

.home-blog .post-item .box .box-text .is-divider {
	display: none;
}
.home-blog {
	span.page-number.current {
		border-radius: 5px;
		background: transparent;
		color: var(--primary-color);
	}
	a.page-number {
		border: none;
		&:hover {
			border-radius: 5px;
			background: transparent;
			color: var(--primary-color);
		}
	}
}
.sec-program {
	.col-inner {
		height: 100%;
		.banner {
			@media screen and (max-width: 767px) {
				min-height: 315px !important;
			}
		}
		h3 {
			@media screen and (max-width: 767px) {
				font-size: 24px !important;
			}
			span {
				@media screen and (max-width: 767px) {
					font-size: 24px !important;
				}
			}
		}
		p {
			@media screen and (max-width: 767px) {
				font-size: 24px !important;
			}
			span {
				@media screen and (max-width: 767px) {
					font-size: 16px !important;
				}
			}
		}
	}
	.col-1-bg .col-inner {
		position: relative;
		overflow: hidden;
		background: #30358b;
	}

	/* Lớp phủ */
	.col-1-bg .col-inner::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: #10122e; /* MÀU TÍM PHỦ */
		z-index: 0;
		transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Khi hover -> quét phủ full */
	.col-1-bg .col-inner:hover::before {
		left: 0;
	}

	/* Nội dung nằm trên lớp phủ */
	.col-1-bg .col-inner > * {
		position: relative;
		z-index: 2;
	}

	.col-3-bg .col-inner {
		position: relative;
		overflow: hidden;
		background: #f1a61f;
	}

	/* Lớp phủ */
	.col-3-bg .col-inner::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: #10122e; /* MÀU TÍM PHỦ */
		z-index: 0;
		transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Khi hover -> quét phủ full */
	.col-3-bg .col-inner:hover::before {
		left: 0;
	}
	.col-3-bg .col-inner:hover .text h3 {
		color: var(--accent) !important;
	}
	/* Nội dung nằm trên lớp phủ */
	.col-3-bg .col-inner > * {
		position: relative;
		z-index: 2;
	}
}

.sec-our {
	.box-image {
		border-radius: 20px;
		border: 1px solid #e9ebf3;
		background: #fff;
		padding: 55px 28px;
		img {
			height: 50px;
		}
	}
	.box-text {
		display: none;
	}
}

.sec-why {
	.section-bg {
		background: url(./images/why.png) no-repeat;
		background-size: 100% 100%;
		width: 29%;
		height: 100%;
		@media (max-width: 767px) {
			background: url(./images/social.png) no-repeat;
			width: 100% !important;
		}
	}

	.accordion .toggle {
		color: currentColor;
		opacity: 1;
		left: -20px !important;
		top: 10%;
		transform: unset !important;
	}
	.accordion .toggle::before {
		background: white !important;
		position: absolute;
		width: 35px;
		height: 30px;
		content: '';
		overflow: hidden;
		border-radius: 99px;
	}
	.accordion-title {
		border: none;
		background: transparent;
		span {
			color: #0c0e0f;
			font-family: SVN-Gilroy;
			font-size: 20px;
			font-style: normal;
			font-weight: 700;
			line-height: 31.72px;
		}
	}
	.accordion-item {
		border: 2px solid var(--fs-color-primary);
		border-radius: 12px;
		box-shadow: 0 1px 1px 0px #f1a61f;
		margin-bottom: 25px;
	}
	.acc-1 .icon-angle-down:before {
		content: '';
		display: block;
		width: 28px; /* chỉnh theo size svg */
		height: 28px;
		background: url(./images/1.svg) no-repeat center;
		background-size: 100% 100%;
	}
	.acc-1 .icon-angle-down:after {
		display: none !important;
	}

	.acc-2 .icon-angle-down:before {
		content: '';
		display: block;
		width: 28px; /* chỉnh theo size svg */
		height: 28px;
		background: url(./images/4.svg) no-repeat center;
		background-size: 100% 100%;
	}
	.acc-2 .icon-angle-down:after {
		display: none !important;
	}
	.acc-3 .icon-angle-down:before {
		content: '';
		display: block;
		width: 28px; /* chỉnh theo size svg */
		height: 28px;
		background: url(./images/3.svg) no-repeat center;
		background-size: 100% 100%;
	}
	.acc-3 .icon-angle-down:after {
		display: none !important;
	}
	.acc-4 .icon-angle-down:before {
		content: '';
		display: block;
		width: 28px; /* chỉnh theo size svg */
		height: 23px;
		background: url(./images/2.svg) no-repeat center;
		background-size: 100% 100%;
	}
	.acc-4 .icon-angle-down:after {
		display: none !important;
	}

	.acc-1 .icon-angle-down::after {
		background: white;
	}
}
.accordion .accordion-item {
	transition: all 0.25s ease;
}
.accordion .accordion-item:hover {
	background: #f7f7f7;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}
input[name='tutor_profile_job_title'],
.tutor-dashboard-menu-item.tutor-dashboard-menu-reviews,
li.tutor-dashboard-menu-item.tutor-dashboard-menu-my-quiz-attempts,
li.tutor-dashboard-menu-item.tutor-dashboard-menu-question-answer {
	display: none !important;
}
li.tutor-dashboard-menu-item.tutor-dashboard-menu-announcements {
	display: none;
}
li.tutor-dashboard-menu-item.tutor-dashboard-menu-quiz-attempts {
	display: none;
}
li.tutor-dashboard-menu-item.tutor-dashboard-menu-withdraw {
	display: none;
}
.account-dropdown a:hover {
	background: var(--primary-color);
	padding: 5px 10px;
	border-radius: 8px;
	border: 1px solid var(--fs-color-primary);
	color: black !important;
}
.tutor-dashboard-header-display-name.tutor-color-black {
	color: white;
}
.thankyou-custom {
	background: var(--fs-color-secondary);
	padding: 20px;
	border-radius: 8px;
}
.vietqr-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	h2,
	p {
		color: white;
		text-align: center;
	}
}
p.vietqr-info-text {
	border-radius: 8px;
	background: var(--main-1, #f1a61f);
	padding: 0;
	margin: 0;
	padding: 10px;
	margin: 20px 0;
}
.vietqr-info {
	td {
		color: white;
		border: none;
	}
}
.col-inner.vietqr-thankyou {
	padding: 40px 30px;
	background: #efeded;
	border-radius: 20px;
	.vietqr-title {
		text-align: center;
		margin-bottom: 1rem;
	}
}
.vietqr-row {
	justify-content: space-between;
	.woocommerce-Price-amount.amount bdi {
		color: black;
		font-size: 18px;
	}
}
/* CONSULTING SERVICE */
.sec-consul {
	h2 {
		color: var(--main-2, #30358b);
		text-align: center;

		font-size: 40px;
		font-style: normal;
		font-weight: 600;
		line-height: 120%; /* 48px */
		@media (max-width: 767px) {
			font-size: 28px;
		}
	}
	p span {
		@media (max-width: 767px) {
			font-size: 20px !important;
		}
	}
	.row-icon-col {
		.col-inner {
			height: 270px;
			position: relative;
			overflow: hidden;

			.icon-box {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.icon-box-text {
					h3 {
						position: relative;
						z-index: 99;
						color: white;
						font-size: 28px;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
					}
					p {
						position: relative;
						z-index: 99;
						color: white;
						font-size: 16px;
						font-style: normal;
						font-weight: 400;
						line-height: 125%; /* 20px */
						width: 80%;
						display: flex;
						margin: auto;
					}
				}
			}
		}
		.col-inner::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 270px;
			background: url('../../uploads/2026/01/circle.png') center center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
}
/* ==== HOVER TAM GIÁC ==== */
.sec-consul .row-icon-col .col-inner {
	position: relative;
	overflow: hidden;
	height: 270px;
}

.sec-consul .row-icon-col .col-inner::before {
	transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Khi hover đổi hình */
.sec-consul .row-icon-col .col-inner:hover::before {
	background: url('../../uploads/2026/01/circle-den.png') no-repeat;
	background-size: 100% 100%;
}

/* Giữ chữ luôn nổi trên */
.sec-consul .row-icon-col .icon-box-text {
	position: relative;
	z-index: 5;
}

.sec-disco {
	.accordion .toggle {
		color: currentColor;
		opacity: 1;
		left: 10px !important;
		top: 10%;
		transform: unset !important;
	}

	.accordion-title {
		border: none;
		background: transparent;
		span {
			color: white;

			font-size: 20px;
			font-style: normal;
			font-weight: 700;
			line-height: 31.72px;
			margin-left: 2rem;
		}
	}
	.accordion-item {
		border: none;
		border-radius: 12px;
		box-shadow: none;
		margin-bottom: 25px;
		border-radius: 12px;
		background: #121212;
	}
	.acc-1 .icon-angle-down:before {
		content: '';
		display: block;
		width: 48px;
		height: 27px;
		background: url(./images/01.png) no-repeat center;
		background-size: cover;
	}
	.acc-1 .icon-angle-down:after {
		display: none !important;
	}

	.acc-2 .icon-angle-down:before {
		content: '';
		display: block;
		width: 48px;
		height: 27px;
		background: url(./images/02.png) no-repeat center;
		background-size: cover;
	}
	.acc-2 .icon-angle-down:after {
		display: none !important;
	}
	.acc-3 .icon-angle-down:before {
		content: '';
		display: block;
		width: 48px;
		height: 27px;
		background: url(./images/03.png) no-repeat center;
		background-size: cover;
	}
	.acc-3 .icon-angle-down:after {
		display: none !important;
	}
	.acc-4 .icon-angle-down:before {
		content: '';
		display: block;
		width: 48px;
		height: 23px;
		background: url(./images/04.png) no-repeat center;
		background-size: cover;
	}
	.acc-4 .icon-angle-down:after {
		display: none !important;
	}
	.acc-5 .icon-angle-down:before {
		content: '';
		display: block;
		width: 48px;
		height: 27px;
		background: url(./images/05.png) no-repeat center;
		background-size: cover;
	}
	.acc-5 .icon-angle-down:after {
		display: none !important;
	}
	.acc-6 .icon-angle-down:before {
		content: '';
		display: block;
		width: 48px;
		height: 27px;
		background: url(./images/06.png) no-repeat center;
		background-size: cover;
	}
	.acc-6 .icon-angle-down:after {
		display: none !important;
	}
	.accordion .accordion-item:hover {
		background: #121212 !important;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
		border-radius: 12px;
	}
	.accordion-inner span {
		color: white;
	}
}
.sec-program {
	.col-inner {
		.img {
			justify-content: center;
			display: flex;
			margin: auto;
		}
		.text p {
		}
	}
	.col-right-6 {
		img {
			z-index: 99;
		}
		.overlay {
			background-color: var(--fs-color-primary) !important;
		}
		.banner-layers {
			a {
				z-index: 999;
			}
			.text-box {
				z-index: 9999;
			}
		}
	}
}
.sec-program-1 {
	.banner {
		background: white;
		border-radius: 32px;
		.banner-inner {
			background: white;
			border-radius: 32px;
			.banner-bg img {
				border-radius: 32px;
				background: white;
			}
		}
		a {
			z-index: 99;
		}
	}
}

/* TRANG BOOKS */
/* ===== WooCommerce Product Filter CSS ===== */

.woo-filter-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* Search Bar */
.search-bar-wrapper {
	position: relative;
	max-width: 600px;
	margin: 0 auto 30px;
}

.search-bar-wrapper input {
	width: 100%;
	padding: 14px 60px 14px 24px;
	background: #30358b;
	border: 3px solid #30358b;
	border-radius: 50px;
	font-size: 16px;
	outline: none;
	color: #ffffff;
	transition: all 0.3s ease;
	height: 45px;
}

.search-bar-wrapper input::placeholder {
	color: white;
	font-size: 16px;
}
/* input[type='text'] {
	color: white !important;
} */
.popup-form input[type='text'] {
	color: black !important;
}
.search-bar-wrapper input:focus {
	border-color: #4a50c4;
	background: #3a408f;
}

.search-bar-wrapper button {
	position: absolute;
	right: 6px;
	top: 37%;
	transform: translateY(-50%);

	border: none;
	border-radius: 50%;
	width: 25px;
	height: 30px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	padding: 0;
}

/* Filter Form */
.filter-form {
	display: flex;
	gap: 10px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.filter-form input {
	flex: 1;
	min-width: 200px;
	padding: 10px 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 14px;
}

.filter-form button {
	padding: 10px 25px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s;
}

.btn-filter {
	background: #3b5998;
	color: white;
}

.btn-filter:hover {
	background: #2d4373;
}

.btn-reset {
	background: #e74c3c;
	color: white;
}

.btn-reset:hover {
	background: #c0392b;
}

/* Loading Spinner */
#loading {
	text-align: center;
	padding: 40px;
}

.spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3b5998;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
	margin: 0 auto;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ===== DESKTOP: Grid 4 cột ===== */
.products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.mobile-only {
	display: none;
}

/* Product Card */
.product-card {
	position: relative;
	overflow: hidden;
	transition: transform 0.3s;
}

.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Discount Badge */
.discount-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #e74c3c;
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	font-size: 14px;
	z-index: 10;
}

/* Product Image */
.product-image {
	position: relative;
	height: 310px;
	overflow: hidden;
}

.product-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
	height: 310px;
	object-fit: contain;
}

.product-card:hover .product-image img {
	transform: scale(1.05);
}

/* Product Info */
.product-info {
	padding: 15px;
}

.product-title {
	font-size: 21px;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: black;
	/* min-height: 40px; */
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-author {
	font-size: 13px;
	color: #666;
	margin: 0 0 10px 0;
	color: var(--main-2, #30358b);
	font-family: SVN-Gilroy;
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

/* Price */
.product-price {
	margin: 10px 0;
	display: flex;
	justify-content: end;
	align-items: center;
}
.old-price {
	text-decoration: line-through;
	color: #999;
	font-size: 16px;
	margin-right: 10px;
}

.new-price {
	color: #f1a61f;
	font-size: 24px;
	font-weight: bold;
}

/* Button */
.btn-intro {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 10px;
	background: #f39c12;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-weight: 600;
	transition: background 0.3s;
}

.btn-intro:hover {
	background: #e67e22;
}

/* No products */
.no-products {
	text-align: center;
	padding: 40px;
	color: #999;
	font-size: 18px;
}

/* ===== TABLET: 3 cột ===== */
@media (max-width: 1024px) {
	.products-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}
}

/* ===== MOBILE: Slider ===== */
@media (max-width: 768px) {
	.desktop-only {
		display: none !important;
	}

	.mobile-only {
		display: block !important;
	}

	.filter-form {
		flex-direction: column;
	}

	.filter-form input {
		min-width: 100%;
	}

	/* Swiper Slider */
	.products-slider {
		padding: 20px 40px;
	}

	.swiper-slide {
		display: flex;
		justify-content: center;
	}

	.swiper-slide .product-card {
		max-width: 300px;
		width: 100%;
	}

	/* Swiper Navigation */
	.swiper-button-prev,
	.swiper-button-next {
		color: #3b5998;
		width: 35px;
		height: 35px;
	}

	.swiper-button-prev:after,
	.swiper-button-next:after {
		font-size: 20px;
	}

	.swiper-pagination-bullet-active {
		background: #3b5998;
	}
}

.sec-detail-sp {
	.flickity-slider {
		img {
			width: 355px;
			height: 456px;
			object-fit: contain;
			display: flex;
			margin: auto;
		}
	}
	.badge {
		height: 40px !important;
		pointer-events: none;
		width: 40px !important;
		margin-left: 0.6em !important;
		.badge-inner {
			background: red !important;
			.onsale {
				font-size: 18px;
			}
		}
	}
	.product-title.product_title {
		font-size: 30px !important;
	}
	.ux-quantity.quantity.buttons_added.form-flat {
		display: none;
	}
}
div#tab-description {
	border: 2px solid #ddd;
	padding: 20px;
	border-radius: 16px;
	p {
		margin: 0;
		font-size: 18px;
	}
}
.sec-news {
	.box-image {
		border-radius: 20px;
	}
	.box-text.text-left {
		padding: 0;
		border-radius: 0 0 20px 20px;
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.52) 34.36%,
			rgba(0, 0, 0, 0.85) 100%
		) !important;
		padding: 25px;
		margin: 0;
		max-width: 100%;
		margin-top: -9rem;
		h5 a {
			color: white;
			overflow: hidden;
			color: var(--white, #fff);
			text-overflow: ellipsis;

			font-size: 26px;
			font-style: normal;
			font-weight: 700;
			line-height: 120%; /* 33.6px */
			display: -webkit-box;
			-webkit-line-clamp: 1;
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
		.from_the_blog_excerpt {
			color: white;
			overflow: hidden;
			color: var(--white, #fff);
			text-overflow: ellipsis;

			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: 120%; /* 33.6px */
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			align-self: stretch;
		}
		.post-meta.is-small.op-8 {
			opacity: 1;
			color: white;
			font-weight: bold;
		}
	}
}

/* AUTHOR */
.author-box-flatsome {
	display: flex;
	gap: 20px;
	/* align-items: center; */
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 12px;
	background: #fafafa;
	/* margin-top: 30px; */
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
	flex-direction: column;
	align-items: center;
}

.author-avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
}

.author-name {
	font-size: 18px;
	font-weight: 600;
	color: #f1a61f;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
.author-desc {
	color: black;
	font-size: 18px;
}
div#respond {
	display: none;
}
.sec-origin {
	.row {
		.col {
			height: 100%;
			.col-inner {
				height: 100%;
				.box-text.text-center {
					vertical-align: bottom !important;
					padding: 0 48px !important;
					@media (max-width: 767px) {
						padding: 0px !important;
					}
					.text {
						display: flex;
						flex-direction: column;
						align-items: start;
						height: 100%;
						margin: auto;
						gap: 90px;
						@media (max-width: 767px) {
							gap: 35px;
							margin-top: 1rem;
						}
						p {
							font-size: 20px;
							font-weight: 500;
							line-height: 140%;
							letter-spacing: 0.24px;
							text-align: justify !important;
							width: 80%;
							color: #393939;
							max-height: 5.6em; /* ~4 dòng */
							overflow: hidden;
							transition: max-height 0.45s
								cubic-bezier(0.4, 0, 0.2, 1);
							@media (max-width: 767px) {
								width: 100% !important;
							}
						}
						h3 {
							text-align: left;
							color: #393939;
							font-family: SVN-Gilroy;
							font-size: 32px;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
							text-transform: capitalize;
							@media (max-width: 767px) {
								font-size: 18px;
								font-style: normal;
								font-weight: 400;
								line-height: normal;
								text-transform: capitalize;
								font-weight: bold;
								width: 60%;
							}
						}
					}
				}
			}
		}
	}
	.btn-readmore {
		display: inline-block;
		margin-top: 14px;
		font-size: 16px;
		font-weight: 600;
		color: #30358b;
		cursor: pointer;
		text-decoration: underline;
		transition: 0.25s;
		margin: 0;
		position: absolute;
		bottom: 30%;
		right: 10%;
		@media (max-width: 767px) {
			bottom: 0%;
			right: 0%;
		}
		&:hover {
			opacity: 0.7;
		}
	}
	.text {
		h2 {
			@media (max-width: 767px) {
				text-align: center;
				display: flex;
				justify-content: center;
			}
			span {
				@media (max-width: 767px) {
					font-size: 32px !important;
					text-align: center;
					display: flex;
					justify-content: center;
				}
			}
		}
	}
}
.sec-origin .text p.is-open {
	max-height: 2000px;
}

/* PAGE C-EXCE */
.sec-c-ex {
	.icon-box-text {
		h3 {
			font-size: 28px;
		}
		p {
			font-size: 18px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
	}
}
.sec-m-exe {
	.text {
		h2 {
			@media (max-width: 767px) {
				text-align: center;
				display: flex;
				justify-content: center;
			}
			span {
				@media (max-width: 767px) {
					font-size: 28px !important;
				}
			}
		}
	}
}

/* COURSES */
.courses-grid-home {
	.course-grid-image {
		img {
			width: 100%;
			border-radius: 20px;
		}
	}
	.course-grid-excerpt {
		margin: 0;
		margin-bottom: 10px;
	}
	.course-detail-icons {
		.row-icon-detail {
			.col {
				margin: 0;
				padding: 0 15px;
			}
		}
		.icon-box-text {
			p {
				width: 80%;
			}
		}
	}
}
.sec-2.sec-kh-page.course-grid-item {
	padding: 10px;
	border: 2px solid #30358b;
	border-radius: 12px;
}
.khoahoc-home-cta {
	display: flex;
	justify-content: center;
}
.custom.html_topbar_right {
	.social-icons-ft img {
		width: 40px !important;
		height: 25px !important;
		object-fit: contain;
	}
}
ul.header-nav.header-nav-main.nav.nav-right.nav-size-medium.nav-spacing-large.nav-uppercase {
	gap: 0 !important;
}
/* SECTION NIỀM VUI */
.tutor-course-details-page .tutor-container {
	width: 100%;
	max-width: 100%;
	padding: 0;
}
.tutor-course-details-header img {
	height: 400px;
	object-fit: cover;
	object-position: center bottom;
	width: 100%;
}
.tutor-course-featured-image {
	position: relative;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		background: linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.2) 0%,
			rgba(0, 0, 0, 0.2) 100%
		);
	}
}

.tutor-course-details-page .breadcrumb {
	color: #fff;
	font-size: 20px;
	position: absolute;
	padding: 50px 40px;
	text-transform: uppercase;
	z-index: 9;
}
.tutor-col-xl-12.details-main-content {
	width: 80%;
	margin: auto;
	margin-bottom: 3rem;
}
.course-cta {
	margin-top: 16px;
}

.btn-join-course {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 48px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.btn-buy-course {
	background: #b44c82;
	color: #fff;
}

.btn-enter-course {
	background: var(--fs-color-secondary);
	color: #fff;
	text-transform: capitalize;
	&:hover {
		color: var(--primary-color);
	}
}
.tutor-course-details-page .breadcrumb a {
	color: #fff;
	/* font-size: 14px; */
	text-transform: uppercase;
	background: var(--fs-color-secondary);
	padding: 5px 20px;
	border-radius: 8px;
	font-weight: bolder;
	span {
		font-weight: bold;
	}
}
.details-main-content {
	.course-instructor {
		border-top: 1px solid #ccc;
		margin-top: 16px;
		.instructor-label {
			color: #595959;
			text-align: left;
			font-family: SVN-Gilroy;
			font-size: 16px;
			font-style: normal;
			font-weight: 600;
			margin-top: 16px;
		}
		.icon-box-img {
			width: 32px !important;
		}
		p.instructor-name {
			color: #45556c;
			text-align: left;
			font-family: SVN-Gilroy;
			font-size: 18px;
			font-style: normal;
			font-weight: 600;
			line-height: 120%;
			margin-bottom: 5px;
		}
		p.instructor-title {
			color: #62748e;
			font-family: SVN-Gilroy;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 120%;
			/* 			margin-bottom: 12px; */
		}
	}
	.course-tag {
		padding: 12px !important;
		color: var(--fs-color-primary);
		text-align: center;
		font-size: 20px;
		font-style: normal;
		font-weight: bold;
		line-height: 100%;
		border-radius: 8px;
		background: var(--fs-color-secondary);
		text-transform: uppercase;
	}
	.course-meta-top {
		display: flex;
		justify-content: space-between;
	}
	.course-date {
		color: var(--accent);
		font-size: 20px;
		font-weight: bold;
	}
	button.share-btn-img {
		padding: 0;
		margin: 0;
		margin-top: -6px;
		img {
			filter: brightness(0.5);
		}
	}
}
.tutor-single-course-sidebar.tutor-sidebar-sticky {
	overflow-y: unset !important;
}
.details-main-content {
	.content-tutor {
		background: #f1a61f4d;
		padding: 20px;
		border-radius: 5px;
		margin-top: 2rem;
		.p-text-mota {
			padding-left: 0 !important;
			color: var(--fs-color-success);
			text-align: justify;
			font-size: 36px !important;
			margin-top: 0;
			margin: 0;
		}
		h2 {
			font-size: 24px;
		}
		ul {
			margin-left: 4rem;
			li {
				font-size: 18px;
			}
		}
	}
	.tutor-single-course-sidebar-more {
		background: #f1a61f4d;
		padding: 20px;
		border-radius: 5px;
		margin-top: 2rem;

		.tutor-course-details-widget {
			background: transparent;
			border: none;
			padding: 0;
			.tutor-course-details-widget-title {
				padding-left: 0 !important;
				color: var(--fs-color-success);
				text-align: justify;
				font-size: 36px !important;
				margin-top: 0;
				margin: 0;
			}
			ul {
				margin-left: 2rem;
				li {
					font-size: 18px;
					span {
						color: black;
					}
				}
			}
		}
	}
	.tutor-course-details-widget {
		background: #f1a61f4d;
		padding: 20px;
		border-radius: 5px;
		margin-top: 2rem;
		.title-will-learn {
			padding-left: 0 !important;
			color: var(--fs-color-success);
			text-align: justify;
			font-size: 36px !important;
			margin-top: 0;
			margin: 0;
		}
	}
}
.tutor-btn-show-more.tutor-btn.tutor-btn-ghost {
	display: none;
}
.tutor-related .courses-grid-home {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 40px;
	margin: 0 100px;
}

/* PAGE COLSULTING */
.row-icon-colsul {
	.col {
		padding: 0 50px;

		.col-inner {
			height: 339px;
			background: var(--fs-color-secondary);
			border-radius: 50% !important;
			display: flex;
			align-items: center;

			/* THÊM */
			transition: all 0.35s ease;

			.icon-box-text {
				color: white;

				/* THÊM */
				transition: all 0.35s ease;

				h3 {
					color: white;
					font-size: 28px;
					margin: 0;

					/* THÊM */
					transition: all 0.35s ease;
				}
				p {
					text-align: center;
					width: 80%;
					display: flex;
					margin: auto;

					/* THÊM */
					transition: all 0.35s ease;
				}
			}
		}

		/* HOVER */
		.col-inner:hover {
			background: #000;
			transform: translateY(-6px);
			box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
		}

		.col-inner:hover .icon-box-text h3,
		.col-inner:hover .icon-box-text p {
			color: #fff;
		}
	}
}
.sidebar-menu.no-scrollbar {
	.header-search {
		display: none;
	}
	li.html.custom.html_topbar_right {
		display: none;
	}
	li.html.custom.html_top_right_text {
		display: none;
	}
}
.tutor-frontend-dashboard.tutor-dashboard-student {
	background: #cccccc3d;
	.tutor-frontend-dashboard-header {
		display: none !important;
	}
	.tutor-frontend-dashboard-maincontent {
		padding: 10px 0px;
		.tutor-dashboard-permalinks {
			border-radius: 12px;
			background: white;
			box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
			padding: 20px;
			&::before {
				display: none !important;
			}
		}
	}

	.tutor-dashboard-content {
		border-radius: 12px;
		background: white;
		box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
		padding: 20px;
		margin: 0;

		.tutor-fs-4 {
			display: none;
			.tutor-mb-32 {
				display: none !important;
			}
		}
	}
	div#tutor_profile_cover_photo_editor {
		height: 100% !important;
	}
}
.tutor-dashboard-setting-profile.tutor-dashboard-content-inner
	.tutor-row:nth-child(3),
.tutor-dashboard-setting-profile.tutor-dashboard-content-inner
	.tutor-row:nth-child(4) {
	display: none !important;
}
.tutor-dashboard-setting-profile.tutor-dashboard-content-inner input {
	color: black !important; /* màu chữ khi gõ */
}

.tutor-dashboard-setting-profile.tutor-dashboard-content-inner
	input::placeholder {
	color: black;
	opacity: 1;
}
.course-grid-title {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.4;
	height: 50px;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	-webkit-box-orient: vertical;
}
/* COURSE - GRID */

/* ===== LAYOUT TỔNG THỂ 3-9 COLUMNS ===== */
.khoahoc-grid-sidebar-wrapper {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 30px;
	max-width: 90%;
	margin: 0 auto;

	/* ===== SIDEBAR BÊN TRÁI ===== */
	.khoahoc-sidebar {
		background: #fff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		height: fit-content;
		position: sticky;
		top: 20px;
	}

	.sidebar-menu {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.menu-item {
		position: relative;
	}

	.menu-link {
		display: block;
		padding: 12px 16px;
		color: #333;
		text-decoration: none;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.menu-item:hover .menu-link,
	.menu-item.active .menu-link {
		background: #3b5998;
		color: #fff;
	}

	.submenu-toggle {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		cursor: pointer;
		padding: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666;
		transition: transform 0.3s ease;
	}

	.menu-item.active .submenu-toggle {
		color: #fff;
	}

	.menu-item.open .submenu-toggle svg {
		transform: rotate(180deg);
	}

	.submenu {
		display: none;
		padding-left: 20px;
		margin-top: 5px;
	}

	.menu-item.open .submenu {
		display: block;
	}

	.submenu-item {
		padding: 8px 16px;
		border-radius: 6px;
		margin-bottom: 3px;
	}

	.submenu-item a {
		color: #666;
		text-decoration: none;
		font-size: 14px;
		display: block;
	}

	.submenu-item:hover,
	.submenu-item.active {
		background: #f0f0f0;
	}

	.submenu-item:hover a,
	.submenu-item.active a {
		color: #3b5998;
	}

	/* ===== MAIN CONTENT BÊN PHẢI ===== */
	.khoahoc-main-content {
		min-height: 500px;
	}

	/* Filter bar phía trên */
	.course-filters-top {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		background: #fff;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 30px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		.course-search-wrapper {
			margin-bottom: 0 !important;
			.course-search-form {
				width: 75%;
				.course-search-input {
					margin: 0;

					border-radius: 8px;
					border: 1px solid rgba(90, 88, 84, 0.26);
					background: #fafafa;
					padding: 25px;
				}
				.course-search-btn {
					position: absolute;
					right: 8px;
					top: 50%;
					transform: translateY(-50%);
					background: var(--fs-color-secondary);
					border: none;
					border-radius: 6px;
					/* width: 40px; */
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					transition: background 0.3s ease;
					margin: 0;
				}
			}
		}
	}

	.filter-left {
		flex: 1;
	}

	.results-count {
		font-size: 16px;
		color: white;
		background: var(--fs-color-primary);
		padding: 10px 15px;
		border-radius: 8px;
		display: inline-block;
	}

	.results-count span {
		font-weight: 700;
	}

	.filter-right {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.filter-dropdown {
		position: relative;
	}

	.filter-dropdown-btn {
		padding: 10px 20px;
		border: none;
		border-radius: 20px;
		background: #f5f5f5;
		color: black;
		font-size: 14px;
		font-weight: 400;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
		transition: all 0.3s ease;
	}

	.filter-dropdown-btn:hover {
		background: #e8e8e8;
	}

	.filter-dropdown.active .filter-dropdown-btn {
		background: #a24186;
		color: #fff;
	}

	.filter-dropdown-content {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		background: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		border-radius: 8px;
		padding: 10px;
		min-width: 180px;
		z-index: 1000;
		margin-top: 8px;
	}

	.filter-dropdown.active .filter-dropdown-content {
		display: block;
	}

	.filter-dropdown-content label {
		display: flex;
		align-items: center;
		padding: 8px 12px;
		cursor: pointer;
		transition: background 0.2s;
		border-radius: 4px;
		gap: 8px;
	}

	.filter-dropdown-content label:hover {
		background: #f5f5f5;
	}

	.filter-sort {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		color: black;
		white-space: nowrap;
	}

	.sort-select {
		border: 1px solid #ddd;
		padding: 8px 12px;
		border-radius: 6px;
		font-size: 14px;
		cursor: pointer;
		background: #fff;
		margin: 0;
	}

	/* ===== GRID KHÓA HỌC (style từ khoahoc_home) ===== */
	.courses-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 25px;
		margin-bottom: 40px;
	}

	.course-grid-item {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
	}

	.course-grid-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* Image */
	.course-grid-image {
		position: relative;
		overflow: hidden;
	}

	.course-grid-image img {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	/* Badge */
	.course-badge {
		position: absolute;
		top: 10px;
		right: 10px;
		padding: 5px 12px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		color: #fff;
	}

	.course-badge.zoom-online {
		background: var(--primary-color);
		font-size: 18px;
		border-radius: 10px;
		text-transform: uppercase;
	}

	.course-badge.video {
		background: var(--fs-color-secondary);
		font-size: 18px;
		border-radius: 10px;
		text-transform: uppercase;
	}

	/* Content */
	.course-grid-content {
		padding: 20px;
	}

	.course-grid-title {
		margin: 0 0 10px;
		font-size: 18px;
		line-height: 1.4;
	}

	.course-grid-title a {
		color: #333;
		text-decoration: none;
	}

	.course-grid-title a:hover {
		color: #0066ff;
	}

	.course-grid-excerpt {
		color: #666;
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 15px;
	}

	/* Price Wrapper */
	.course-price-wrapper {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
	}

	.course-price-regular {
		font-size: 18px;
		font-weight: 700;
		color: #333;
	}

	.course-price-regular.strikethrough {
		text-decoration: line-through;
		color: #999;
		font-size: 16px;
		font-weight: 400;
	}

	.course-price-sale {
		font-size: 20px;
		font-weight: 700;
		color: #ff4444;
	}

	.course-price-free {
		font-size: 18px;
		font-weight: 700;
		color: #ff4444;
		text-transform: uppercase;
	}

	/* Detail Icons */
	.course-detail-icons {
		margin: 0;
		padding: 0;
		border-top: unset;
		border-bottom: unset;
		.col.small-12.large-12 {
			padding: 0;
		}
	}

	/* Pagination */
	.course-pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-top: 40px;
	}

	.course-pagination a,
	.course-pagination span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		border: 1px solid #ddd;
		color: #666;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	.course-pagination a:hover,
	.course-pagination .current {
		background: #a24186;
		color: #fff;
		border-color: #a24186;
	}

	.no-courses {
		grid-column: 1 / -1;
		text-align: center;
		padding: 60px 20px;
		color: #999;
		font-size: 16px;
	}

	/* ===== RESPONSIVE ===== */
	@media (max-width: 1024px) {
		.khoahoc-grid-sidebar-wrapper {
			grid-template-columns: 1fr;
		}

		.khoahoc-sidebar {
			position: static;
			order: 2;
		}

		.khoahoc-main-content {
			order: 1;
		}

		.courses-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 768px) {
		.course-filters-top {
			flex-direction: column;
			align-items: flex-start;
			gap: 15px;
		}

		.filter-right {
			width: 100%;
			justify-content: space-between;
		}

		.courses-grid {
			grid-template-columns: 1fr;
		}

		.sidebar-menu {
			max-height: 400px;
			overflow-y: auto;
		}
	}
}
/* ĐĂNG KÝ - ĐĂNG NHẬP */
.header-nav.header-nav-main {
	.header-search {
		margin: 0;
	}
	.html_topbar_left {
		margin: 0;
		.tutor-login-register-buttons {
			display: flex;
			gap: 15px;
		}
	}
}
.btn-dangky {
	background: white;
	color: var(--primary-color) !important;
	padding: 10px 16px;
	border-radius: 99px;
	margin-right: 10px;
	border-bottom: 2px solid rgba(162, 65, 134, 0.2);
	font-size: 16px;
	border: 1px solid var(--primary-color);
	backdrop-filter: blur(12px);
	width: 100px;
	text-align: center;
	text-transform: uppercase;
}

.btn-dangky:hover {
	background: var(--primary-color);
	color: white !important;
	font-size: 16px;
	backdrop-filter: blur(12px);
}

.btn-dangnhap {
	padding: 10px 16px;
	border-radius: 99px;
	border: 1px solid var(--primary-color);
	background: var(--primary-color) !important;
	color: white !important;
	font-size: 16px;
	backdrop-filter: blur(12px);
	width: 100px;
	text-align: center;
	text-transform: uppercase;
}

.btn-dangnhap:hover {
	background: white !important;
	color: var(--primary-color) !important;
	font-size: 16px;
	backdrop-filter: blur(12px);
}
/* PURE HAPPINESS */
.sec-research {
	.col-bg-linear {
		.col-inner {
			border-radius: 48px;
			background: var(
				--color-2,
				linear-gradient(180deg, #fdf4d3 1.92%, #cce98f 100%)
			);
			padding: 32px 22px;
			h3 {
				font-size: 28px;
				line-height: 100%;
				font-weight: 700;
			}
			p {
				margin: 0;
				text-align: center;
				font-size: 16px;
				color: var(--fs-color-secondary);
				font-weight: 500;
				line-height: 130%;
			}
		}
	}
	.col-5-icon-df {
		padding: 0;
		.icon-box {
			display: flex;
			align-items: center;
			p {
				margin: 0;
			}
		}
	}
}

.sec-model {
	.img-docs {
		img.size-full.alignnone {
			margin-bottom: 0;
		}
	}
	.d-flex-wrap {
		.box {
			display: flex;
			flex-direction: column-reverse;
		}
	}
}
.sec-founder {
	.box-text.text-center {
		left: 50%;
		margin: 10% 0;
		transform: translateX(-50%);
		width: 90%;
		border-radius: 8px;
		background: var(
			--color-2,
			linear-gradient(180deg, #fdf4d3 1.92%, #cce98f 100%)
		);
		display: flex;
		justify-content: center;
	}
}
.sec-nation {
	.text {
		h2 {
			@media (max-width: 767px) {
				margin-top: 1rem;
			}
			span {
				@media (max-width: 767px) {
					font-size: 28px !important;
				}
			}
		}
	}
	.text-mb {
		span {
			@media (max-width: 767px) {
				font-size: 20px !important;
			}
		}
	}
}
.text-mb {
	span {
		@media (max-width: 767px) {
			font-size: 20px !important;
		}
	}
}
.stack-exce {
	img {
		height: 65px !important;
	}
}

.sec-faculty {
	.box-text.text-center {
		left: 50%;
		margin: 10% 0;
		transform: translateX(-50%);
		width: 90%;
		border-radius: 8px;
		background: #30358b;
		display: flex;
		justify-content: center;
	}
}
.img-radius {
	img {
		border-radius: 24px;
	}
}
.sec-exe-include {
	.col-inner {
		height: 200px;
		display: flex;
		align-items: center;
	}
}
.text-mb-leader {
	p {
		span {
			@media (max-width: 767px) {
				font-size: 30px !important;
			}
		}
		strong {
			@media (max-width: 767px) {
				font-size: 30px !important;
			}
		}
	}
}
.row-get-started {
	.text {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		left: 10%;
		gap: 150px;
		h4 {
			text-align: left !important;
			color: white !important;
			font-size: 32px;
			font-weight: 700;
			line-height: 100%;
		}
	}
	.cta-btn {
		width: max-content;
	}
}
.d-flex-col {
	padding: 0;
	margin: 0;
	margin-bottom: 1rem;
	.col-inner {
		display: flex;
		gap: 30px;
		justify-content: center;
		.img {
			margin: 0 !important;
			img {
				height: 70px;
				object-fit: contain;
			}
		}
	}
}
.sec-certi {
	.col-inner {
		.box-image {
			height: auto;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			padding: 6px;
			border: 1px solid var(--fs-color-secondary);
			border-radius: 8px;
		}
	}
}
.row-icon-v {
	.col-inner {
		border-radius: 12px;
		border: 1px solid var(--main-2, #30358b);
		background: #fff;
		padding: 24px 20px;
		height: 100%;
		.icon-box {
			height: 100%;
			.text {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.icon-box-text {
				height: 100%;
			}
		}
		h3 {
			font-size: 32px;
			font-style: normal;
			font-weight: 700;
			line-height: 130%;
		}
		p {
			font-size: 20px;
			font-style: normal;
			font-weight: 400;
			line-height: 140%;
			margin: 0;
			color: #797979;
			width: 80%;
			display: flex;
			margin: auto;
		}
		.icon-box-img {
			border-radius: 5px;
			background: #fff;
			box-shadow:
				0 82px 80px 0 rgba(0, 0, 0, 0.06),
				0 41.513px 34.875px 0 rgba(0, 0, 0, 0.04),
				0 16.4px 13px 0 rgba(0, 0, 0, 0.03),
				0 3.588px 4.625px 0 rgba(0, 0, 0, 0.02);
			width: 60px !important;
			padding: 10px;
			position: absolute !important;
			top: -10%;
			left: -3%;
		}
	}
}

.sec-com-vision {
	.col-inner {
		.text.number {
			display: flex;
			justify-content: center;
			p {
				font-size: 20px;
				color: var(--fs-color-primary);
				font-weight: 600;
				text-align: center;
				display: inline;
				margin: 0;
				border-radius: 6px;
				border: 1px solid var(--main-1, #f1a61f);
				background: #fff;
				box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
				padding: 8px 16px;
				margin-bottom: 25px;
			}
		}
		.text.col-khung {
			padding: 16px;
			border-radius: 12px;
			background: #fff;
			box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
			border-top: 4px solid #f1a61f;
			height: 100%;
			h4 {
				font-size: 22px;
				font-weight: 600;
				color: var(--fs-color-primary);
				line-height: 140%;
				height: 70px;
				border-bottom: 3px solid rgba(48, 53, 139, 0.5);
			}
			p {
				color: #4e4e4e;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 140%;
				text-align: left;
			}
		}
	}
}
.row-capa {
	h3 {
		height: 60px;
	}
}
.col-height-when {
	.row {
		.col-inner {
			height: 100%;
		}
	}
}
.text-under {
	p {
		span {
			border-bottom: 2px solid var(--fs-color-primary);
		}
	}
}
span.tutor-badge-label.label-success {
	display: flex;
	width: 130px;
	height: 32px;
	padding: 8px 14px;
	justify-content: center;
	align-items: center;
	background: #d8ffea;
	color: #0f994f;
	font-size: 16px;
	font-weight: 700;
}
span.tutor-badge-label.label-warning {
	display: flex;
	width: 130px;
	height: 32px;
	padding: 8px 14px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	background: #ffefd8;
	color: #ff9500;
	font-size: 16px;
	font-weight: 700;
}