.social-plugin {
	display: flex;
	margin-top: 10px;
}

/* Transition All */
.transition,
.btn-frame .kenit-alo-circle-fill,
.control-owl button,
.carousel-comment-media .carousel-control a span,
.scale-img img,
.scale-img:hover>img,
.support-online .kenit-alo-circle-fill {
	transition: 0.3s all;
}

.cart-head {
	border: 1px solid #fff;
	padding: 10px;
	border-radius: 5px;
	position: relative;
	color: #fff;
}

.cart-head:hover {
	color: #fed402;
}

.cart-head i {
	font-size: 20px;
}

.cart-head .count-cart {
	position: absolute;
	z-index: 999;
	color: #fff;
	background: #f00;
	border-radius: 50%;
	top: -10px;
	right: 20px;
	width: 20px;
	height: 20px;
	text-align: center;
}

a.cart-header {
	position: relative;
}

a.cart-header span {
	position: absolute;
	top: 0px;
	right: 0px;
	color: #fff;
	font-size: 11px;
	width: 17px;
	height: 17px;
	text-align: center;
	border-radius: 50%;
}

/* Sort */
.sort-select {
	display: flex;
	justify-content: end;
	margin: 20px 0px;
	position: relative;
}

.sort-select .click-sort {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	padding: 6px 10px 6px 8px;
	margin: 0px;
}

.sort-select-main {
	display: grid;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
	position: absolute;
	padding: 0 7px;
	top: 30px;
	right: 0;
	width: 160px;
	z-index: 2;
}

.sort-select-main p {
	border-bottom: 1px solid #f1f1f1;
	margin: 0px;
	order: 2;
}

.sort-select-main p:has(.check) {
	order: 1;
}

.sort a {
	color: #000;
	font-size: 14px;
	line-height: 17px;
	padding: 11px 3px;
	display: block;
	cursor: pointer;
}

.sort a.check i {
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	transform: scale(var(--ggs, 1));
	width: 22px;
	height: 16px;
	border: 2px solid transparent;
	border-radius: 100px;
	vertical-align: middle;
}

.sort a.check i::after {
	content: '';
	display: block;
	box-sizing: border-box;
	position: absolute;
	left: 3px;
	top: -4px;
	width: 6px;
	height: 10px;
	border-width: 0 2px 2px 0;
	border-style: solid;
	transform-origin: bottom left;
	transform: rotate(45deg);
}

.sort-select .sort-show {
	padding-right: 12px;
	position: relative;
}

.sort-select .sort-show::before {
	content: '';
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #333;
	content: '';
	height: 0;
	position: absolute;
	top: 6px;
	right: 0;
	width: 0;
}

/* Contact */
.contact-map {
	position: relative;
	height: 500px;
	margin-top: 30px;
}

.contact-map iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

/*  breadCrumbs */
.breadCrumbs {
	padding: 14px 0;
	background: linear-gradient(180deg, #fff8f2 0%, #fdf0e5 100%);
	border-bottom: 1px solid #f4ddc9;
}

.breadCrumbs nav {
	max-width: 100%;
}

.breadCrumbs ol.breadcrumb {
	--bs-breadcrumb-margin-bottom: 0;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	max-width: 100%;
	margin: 0;
	padding: 8px 20px;
	list-style: none;
	font-size: 14px;
	line-height: 22px;
	white-space: nowrap;
	background: #fff;
	border: 1px solid #f2e3d4;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(191, 111, 43, .09);
	overflow-x: auto;
	scrollbar-width: none;
}

.breadCrumbs ol.breadcrumb::-webkit-scrollbar {
	display: none;
}

.breadCrumbs .breadcrumb-item {
	display: inline-flex;
	align-items: center;
	padding: 0;
}

/* mũi tên phân cách — đè lên dấu "/" mặc định của Bootstrap */
.breadCrumbs .breadcrumb-item + .breadcrumb-item::before {
	content: "";
	flex: none;
	float: none;
	width: 14px;
	height: 14px;
	margin: 0 8px;
	padding: 0;
	background-color: #c8b5a3;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

.breadCrumbs .breadcrumb-item a,
.breadCrumbs .breadcrumb-item > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4a4a4a;
	text-decoration: none;
	transition: color .18s ease;
}

.breadCrumbs .breadcrumb-item a:hover,
.breadCrumbs .breadcrumb-item a:focus-visible {
	color: #ff6700;
}

.breadCrumbs .breadcrumb-item.active > span {
	color: #ff6700;
	font-weight: 600;
}

.breadCrumbs__nha {
	flex: none;
	margin-top: -1px;
}

/* tên khóa học có thể rất dài — cắt bớt để dải không đẩy ngang cả trang */
.breadCrumbs .breadcrumb-item.active > span > span {
	display: inline-block;
	max-width: 46ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

@media screen and (max-width: 768px) {
	.breadCrumbs {
		padding: 10px 0;
	}

	.breadCrumbs ol.breadcrumb {
		padding: 7px 14px;
		font-size: 13px;
	}

	.breadCrumbs .breadcrumb-item + .breadcrumb-item::before {
		margin: 0 6px;
	}

	.breadCrumbs .breadcrumb-item.active > span > span {
		max-width: 24ch;
	}
}

.grid-properties {
	display: flex;
	gap: 10px;
}

.grid-properties span {
	position: relative;
	border: 1px solid #ddd;
	padding: 5px 15px;
	cursor: pointer;
}

.grid-properties span:hover,
.grid-properties span.active {
	border: 1px solid #f00;
	color: #f00;
}

.grid-properties span:hover:after,
.grid-properties span.active:after {
	content: '';
	border: 0.9375rem solid transparent;
	border-bottom: 0.9375rem solid var(#d0011b, #ee4d2d);
	bottom: 0;
	position: absolute;
	right: -0.9375rem;
}

.grid-properties span.outstock {
	pointer-events: none;
	background-color: #fafafa;
	color: rgba(0, 0, 0, 0.26);
	cursor: not-allowed;
}

/* scrollToTop */
.scrollToTop {
	width: 41px;
	height: 41px;
	text-align: center;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position: fixed;
	bottom: 65px;
	right: 25px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

/* Hidden Google Captcha */
.grecaptcha-badge {
	display: none !important;
	width: 0px !important;
	height: 0px !important;
	visibility: hidden !important;
	overflow: hidden;
}

[x-cloak] {
	display: none !important;
}
/* ==========================================================================
   Cột bản đồ ở chân trang
   ==========================================================================
   Bản đồ vốn nằm cuối trang Liên hệ; đưa xuống đây thành một cột riêng để
   trang nào cũng thấy đường tới học viện.
   -------------------------------------------------------------------------- */
.footer-col-map { min-width: 0; }

/* Chân trang vốn có bốn cột chiếm trọn bề ngang; thêm cột bản đồ thì phải chia
   lại theo lưới, nếu không cột thứ năm bị đẩy xuống hàng riêng. */
.footer-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media (min-width: 992px) {
	.footer-top {
		display: grid;
		/* Còn 4 cột: cột đầu ôm cả logo, thông tin liên hệ và mạng xã hội
		   nên phải rộng hơn hẳn ba cột còn lại. */
		/* Cột "Liên kết nhanh" tự chia làm hai cột con, nên bề rộng phải đủ cho
		   HAI chữ cạnh nhau chứ không phải một. Trước để tối thiểu 110px, chia
		   đôi còn 73px mỗi bên trong khi "Về chúng tôi" cần 89px — chữ gãy làm
		   hai dòng. Nay để 215px, mỗi cột con hơn 100px.
		   Cột "Chính sách" giữ 215px vì chữ dài nhất cần 208px.
		   Cột đầu giữ tối thiểu 306px vì ảnh logo rộng cứng bấy nhiêu. */
		grid-template-columns: minmax(360px, 1.3fr) minmax(215px, .75fr) minmax(215px, .8fr) minmax(0, 1.15fr);
		gap: 1.5rem;
	}

	.footer-top > div { width: auto; max-width: none; }
}

/* Cột "Liên kết nhanh" vốn chia hai cột con; từ khi thêm cột bản đồ thì mỗi
   cột con chỉ còn hơn 80px, không đủ cho "Về chúng tôi" hay "Dịch vụ". */
@media (max-width: 1400px) {
	.footer-gridview.jj-grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

.footer-gridview .item,
.footer-listview .item { font-size: 14px; line-height: 1.7; }

.footer-map {
	overflow: hidden;
	border-radius: 10px;
	background: rgb(255 255 255 / 8%);
}

.footer-map__frame {
	display: block;
	width: 100%;
	height: 190px;
	border: 0;
	filter: grayscale(20%);
}

@media (max-width: 991.98px) {
	.footer-map__frame { height: 220px; }
}

/* Ảnh trong thẻ bài viết / khóa học: cắt vừa khung thay vì bóp méo.
   Ảnh nguồn có đủ khổ dọc, ngang, vuông nên phải ép về chung một tỉ lệ. */
.tintuc_list_nb-pic img,
.tintuc_list_nb-pic picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

/* ==========================================================================
   Rê chuột vào liên kết chân trang
   ==========================================================================
   Trước đây không có quy tắc rê chuột nào cho hai cột liên kết — quét cả 57
   tệp kiểu đang tải đều không thấy. Bấm vào thì được nhưng rê chuột không có
   dấu hiệu gì, khó biết chỗ nào bấm được.

   Nền chân trang #21242a nên chọn cam nhạt --light-primary-color: tương phản
   6,45:1, sáng hơn cam chính nên nổi rõ hơn trên nền tối.

   Hai cột có cấu trúc khác nhau: "Liên kết nhanh" gói chữ trong <span> và phủ
   một thẻ liên kết rỗng lên trên, còn "Chính sách" thì chính .item là thẻ
   liên kết. Nên phải khai cho cả hai dạng.
   -------------------------------------------------------------------------- */

.footer-gridview .item,
.footer-gridview .item span,
.footer-listview .item {
	transition: color .25s ease;
}

.footer-gridview .item:hover,
.footer-gridview .item:hover span,
.footer-listview .item:hover,
.footer-listview .item:focus-visible {
	color: var(--light-primary-color, #ff8635);
}

/* Ba icon mạng xã hội cũng nên có dấu hiệu khi rê tới */
.footer-social a { transition: opacity .25s ease, transform .25s ease; }
.footer-social a:hover { opacity: .82; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Dải chuyên mục trên trang Blog

   Bản gốc để ba mục con ngay trên danh sách bài. Dùng lại đúng màu cam chủ đạo
   và kiểu viên thuốc như các nút khác trong site cho đồng bộ.
   -------------------------------------------------------------------------- */
.blog-muc {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 1.75rem;
}

.blog-muc__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.15rem;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 999px;
	background: #fff;
	color: var(--secondary-color, #171717);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.blog-muc__item:hover {
	border-color: var(--primary-color, #ff6700);
	color: var(--primary-color, #ff6700);
}

.blog-muc__item--dang-xem {
	border-color: var(--primary-color, #ff6700);
	background: var(--primary-color, #ff6700);
	color: #fff;
}

.blog-muc__item--dang-xem:hover { color: #fff; }

/* Số bài: nền mờ để không tranh chỗ với tên mục */
.blog-muc__so {
	padding: .1rem .5rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 6%);
	font-size: 13px;
	font-weight: 700;
}

.blog-muc__item--dang-xem .blog-muc__so { background: rgb(255 255 255 / 25%); }

@media (max-width: 575.98px) {
	.blog-muc { gap: .45rem; }
	.blog-muc__item { padding: .45rem .9rem; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Trang Kênh thông tin (mục Video trong menu Album)
   -------------------------------------------------------------------------- */
.ktt-the {
	overflow: hidden;
	border-radius: 12px;
	background: #000;
}

.ktt-the img.w-100 {
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Nút play co theo bề rộng thẻ, giữ đúng tỉ lệ như bản gốc */
.ktt-play {
	width: calc(82 / 412 * 100%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Album ảnh dưới bài viết (chuyên mục Album)

   Ba cột, tự xuống hàng cho tới hết ảnh. Khổ hẹp thu còn hai rồi một cột.
   -------------------------------------------------------------------------- */
.album-anh { margin-top: 2.5rem; }

.album-anh__tieude {
	margin-bottom: 1.25rem;
	color: var(--secondary-color, #171717);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	text-transform: uppercase;
}

.album-anh__luoi {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.album-anh__o {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: rgb(0 0 0 / 4%);
	line-height: 0;
}

.album-anh__o img {
	width: 100%;
	height: 100%;
	aspect-ratio: 413 / 310;
	object-fit: cover;
	transition: transform .35s ease;
}

.album-anh__o:hover img { transform: scale(1.05); }

@media (max-width: 767.98px) {
	.album-anh__luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

@media (max-width: 479.98px) {
	.album-anh__luoi { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Lịch khai giảng — ảnh khai ở Cấu Hình Web → Lịch khai giảng, dùng chung cho
   trang Liên hệ, cuối trang khóa học và khối trên chân trang chủ.
   ========================================================================== */

.lkg {
	width: 100%;
}

.lkg img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

/* Khối trên chân trang chủ: lịch bên trái cao hơn form bên phải khá nhiều,
   để mặc định thì form dính đỉnh còn khoảng trống dồn hết xuống dưới. */
.wrap-dknt .row { align-items: center; }

/* Thân bài do quản trị nhập nên có thể lẫn URL dài không có chỗ ngắt. Ở khổ
   điện thoại một địa chỉ web dài hơn bề ngang cột là đẩy tràn cả trang sang
   ngang. Cho phép ngắt giữa chuỗi khi không còn cách nào khác. */
.content-main,
.baonoidung {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Cột bên trang chi tiết — thẻ "Bài viết mới"
   ========================================================================== */

.sb {
	padding: 22px 20px;
	border: 1px solid #f3e6da;
	border-radius: 22px;
	background: #fffdfb;
	box-shadow: 0 6px 26px rgb(158 92 32 / 7%);
}

.sb__dau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	/* vạch cam ngắn nằm dưới tiêu đề, phần còn lại là vạch xám nhạt */
	background:
		linear-gradient(var(--primary-color, #f5670f), var(--primary-color, #f5670f)) left bottom / 58px 3px no-repeat,
		linear-gradient(#f0e6dd, #f0e6dd) left bottom / 100% 1px no-repeat;
}

.sb__tieude {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--secondary-color, #171717);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
}

.sb__mic {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--primary-color, #f5670f);
}

.sb__mic svg { width: 22px; height: 22px; }

.sb__tatca {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 7px 8px 7px 14px;
	border: 1px solid #f7ddc7;
	border-radius: 999px;
	background: #fff5ec;
	color: var(--primary-color, #f5670f);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.sb__tatca-mt {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--primary-color, #f5670f);
	color: #fff;
}

.sb__tatca-mt svg { width: 14px; height: 14px; }

.sb__tatca:hover,
.sb__tatca:focus-visible {
	border-color: var(--primary-color, #f5670f);
	background: var(--primary-color, #f5670f);
	color: #fff;
}

.sb__tatca:hover .sb__tatca-mt,
.sb__tatca:focus-visible .sb__tatca-mt {
	background: #fff;
	color: var(--primary-color, #f5670f);
}

.sb__ds {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid #f2e7dc;
	border-radius: 15px;
	background: #fff;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sb__link:hover,
.sb__link:focus-visible {
	border-color: rgb(245 103 15 / 45%);
	box-shadow: 0 6px 18px rgb(245 103 15 / 12%);
	transform: translateY(-1px);
}

.sb__anh {
	flex: none;
	width: 104px;
	height: 78px;
	border-radius: 11px;
	overflow: hidden;
	background: #f4f1ee;
}

.sb__anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.sb__link:hover .sb__anh img { transform: scale(1.06); }

.sb__noidung {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.sb__ten {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	color: var(--primary-color, #f5670f);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.38;
	text-transform: uppercase;
}

.sb__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	color: #8d8d8d;
	font-size: 11.5px;
	line-height: 1.4;
}

.sb__meta-o {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.sb__meta-o svg {
	flex: none;
	width: 13px;
	height: 13px;
}

@media screen and (max-width: 991.98px) {
	.sb { margin-top: 8px; }
}

@media screen and (max-width: 420px) {
	.sb { padding: 18px 14px; border-radius: 18px; }
	.sb__tieude { font-size: 17px; }
	.sb__tatca { padding: 6px 6px 6px 11px; font-size: 12px; }
	.sb__anh { width: 88px; height: 66px; }
	.sb__ten { font-size: 12.5px; }
}

/* Trang Lịch khai giảng: ảnh lịch dọc nên giới hạn bề ngang rồi canh giữa,
   để nguyên thì ảnh kéo cao gần hết màn ở khổ máy tính. */
.lkg-trang {
	max-width: 560px;
	margin: 0 auto 2.5rem;
}

.lkg-trang__form {
	max-width: 820px;
	margin: 2.5rem auto 0;
}