/* ==========================================================================
   Tâm Lý Ngọt Ngọt - CSS chính
   Mục lục:
   01. Biến màu & nền tảng
   02. Tiện ích chung (eyebrow, heading, nút, checklist)
   03. Header & top bar
   04. Hero
   05. USP bar
   06. Sứ mệnh & form đăng ký
   07. Khóa học (lưới + bộ lọc)
   08. Dịch vụ & thẻ (card)
   09. Chatbot
   10. Profile & hành trình
   11. Con số
   12. Social
   13. Cảm nhận học viên
   14. Blog
   15. CTA band & FAQ
   16. Page banner, timeline, liên hệ
   17. Trang chi tiết khóa học
   18. Bài viết
   19. Footer
   20. Nút nổi & popup
   21. Hiệu ứng
   22. Responsive
   ========================================================================== */

/* ==========================================================================
   01. Biến màu & nền tảng
   ========================================================================== */
:root {
	--tl-pink: #f24a79;
	--tl-pink-deep: #c9325f;
	--tl-pink-soft: #ffe4ec;
	--tl-blush: #fff5f8;
	--tl-ink: #3b1d2a;
	--tl-muted: #7a6170;
	--tl-khaki: #aba388;
	--tl-line: #f6d3de;
	--tl-white: #ffffff;
	--tl-radius: 16px;
	--tl-shadow: 0 10px 30px rgba(201, 50, 95, 0.1);
	--tl-shadow-lg: 0 24px 60px rgba(201, 50, 95, 0.16);
}

body {
	color: var(--tl-ink);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	color: var(--tl-ink);
	text-wrap: balance;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(242, 74, 121, 0.35);
	outline-offset: 2px;
}

.tlnn-i {
	flex: none;
	width: 18px;
	height: 18px;
	vertical-align: -3px;
}

/* ==========================================================================
   02. Tiện ích chung
   ========================================================================== */
.tlnn-eyebrow {
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tl-pink);
}

.tlnn-head {
	max-width: 680px;
	margin: 0 auto 36px;
}

.tlnn-head h2 {
	margin-bottom: 10px;
	font-size: clamp(26px, 3.2vw, 36px);
}

.tlnn-head p:last-child {
	margin-bottom: 0;
	color: var(--tl-muted);
}

.tlnn-head em,
.tlnn-hl {
	font-style: normal;
	color: var(--tl-pink);
}

.tlnn-btn-pill,
.button.tlnn-btn-pill {
	border-radius: 99px;
}

/* Nút: chữ thường cho cảm giác nhẹ nhàng, hợp thương hiệu */
.button,
button.button,
input[type="submit"] {
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Flatsome đặt .white { color: #666 !important } nên cần !important để giữ chữ hồng */
.button.white:not(.is-outline) {
	color: var(--tl-pink-deep) !important;
}

.button .tlnn-i {
	margin-left: 4px;
}

.tlnn-checks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlnn-checks li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 8px;
	list-style: none;
}

.tlnn-checks li .tlnn-i {
	margin-top: 4px;
	color: var(--tl-pink);
}

.tlnn-checks-box {
	padding: 18px 20px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	background: var(--tl-blush);
}

.tlnn-checks-box .tlnn-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 18px;
}

.tlnn-stars {
	letter-spacing: 2px;
	color: #f5a623;
}

.tlnn-sec-pink {
	background: linear-gradient(180deg, var(--tl-pink-soft), var(--tl-blush));
}

/* ==========================================================================
   03. Header & top bar
   ========================================================================== */
.tlnn-topbar {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	align-items: center;
}

.tlnn-topbar a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: inherit;
}

.tlnn-topbar a:hover {
	opacity: 0.85;
}

#header .nav > li > a {
	font-weight: 600;
}

#header .header-button .button {
	margin: 0;
	white-space: nowrap;
}

/* Flatsome nhuộm nút header theo màu chữ menu: trả về màu hồng thương hiệu */
#header .header-button .button.primary:not(.is-outline) {
	border-color: var(--tl-pink);
	background-color: var(--tl-pink);
	color: var(--tl-white);
}

#header .header-button .button.primary:not(.is-outline):hover {
	border-color: var(--tl-pink-deep);
	background-color: var(--tl-pink-deep);
}

.page-header-excerpt {
	display: none;
}

.header-search .icon-search {
	font-size: 17px;
}

.header-main .header-search > a,
.header-main .header-search-lightbox > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--tl-line);
	border-radius: 50%;
}

.header-main .header-search > a:hover,
.header-main .header-search-lightbox > a:hover {
	border-color: transparent;
	background: var(--tl-pink);
	color: var(--tl-white);
}

/* Icon tìm kiếm: bỏ gạch chân của menu (nav line-bottom) áp nhầm vào icon và nút */
.header-main .header-search > a::before,
.header-main .header-search-lightbox > a::before,
.header-main .header-button-1 a::before,
.header-main .header-button-2 a::before {
	display: none !important;
}

.header-main .header-search > a,
.header-main .header-search-lightbox > a {
	padding: 0 !important;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* Lightbox tìm kiếm: một hộp trắng duy nhất gồm tiêu đề, ô nhập (nút nằm trong ô),
   từ khóa gợi ý và kết quả tìm nhanh */
.mfp-bg.off-canvas,
.mfp-bg {
	background: rgba(59, 29, 42, 0.72);
}

#search-lightbox {
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 28px 28px 24px;
	border-radius: 24px;
	background: var(--tl-white);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	text-align: left;
	color: var(--tl-ink);
}

.mfp-content:has(#search-lightbox) {
	vertical-align: top;
	margin-top: 12vh;
}

.tlnn-search-head {
	margin-bottom: 16px;
}

.tlnn-search-head b {
	display: block;
	font-size: 20px;
	line-height: 1.3;
	color: var(--tl-ink);
}

.tlnn-search-head span {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--tl-muted);
}

#search-lightbox .searchform-wrapper {
	width: 100%;
	margin: 0;
}

#search-lightbox .searchform .flex-row {
	position: relative;
	align-items: center;
}

#search-lightbox .searchform .flex-col {
	padding: 0;
}

#search-lightbox .searchform .flex-col:last-child {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
}

#search-lightbox .searchform .search-field {
	height: 56px;
	margin: 0;
	padding: 0 64px 0 22px;
	border: 2px solid var(--tl-line);
	border-radius: 99px;
	background: var(--tl-blush);
	box-shadow: none;
	font-size: 16px;
	color: var(--tl-ink);
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

#search-lightbox .searchform .search-field::placeholder {
	color: #a88d99;
}

#search-lightbox .searchform .search-field:focus {
	border-color: var(--tl-pink);
	background: var(--tl-white);
	box-shadow: 0 0 0 4px rgba(242, 74, 121, 0.15);
}

#search-lightbox .searchform .ux-search-submit {
	display: grid;
	place-items: center;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: var(--tl-pink) !important;
	box-shadow: none;
	line-height: 1;
	color: var(--tl-white);
}

#search-lightbox .searchform .ux-search-submit i {
	top: 0;
	margin: 0;
	font-size: 17px;
}

#search-lightbox .searchform .ux-search-submit:hover {
	background: var(--tl-pink-deep) !important;
	box-shadow: none;
	transform: none;
}

/* Từ khóa gợi ý */
.tlnn-search-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 14px;
}

.tlnn-search-tags > span {
	font-size: 13px;
	color: var(--tl-muted);
}

.tlnn-search-tags button {
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--tl-line);
	border-radius: 99px;
	background: var(--tl-white);
	font-size: 13px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tl-pink-deep);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.tlnn-search-tags button:hover {
	border-color: var(--tl-pink);
	background: var(--tl-pink);
	color: var(--tl-white);
}

/* Đang có kết quả thì ẩn dòng gợi ý cho gọn */
#search-lightbox .searchform:has(.autocomplete-suggestion) + .tlnn-search-tags {
	display: none;
}

/* Kết quả tìm nhanh: nằm trong hộp, không tách khối riêng */
#search-lightbox .live-search-results {
	position: static;
	margin: 0;
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

#search-lightbox .autocomplete-suggestions {
	position: static !important;
	width: 100% !important;
	max-height: 320px !important;
	margin-top: 14px;
	overflow-y: auto;
	border: 0;
	border-top: 1px solid var(--tl-line);
	background: none;
	box-shadow: none;
}

#search-lightbox .autocomplete-suggestion {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 8px;
	border-bottom: 1px solid var(--tl-line);
	border-radius: 12px;
	background: none;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	color: var(--tl-ink);
	cursor: pointer;
}

#search-lightbox .autocomplete-suggestion:last-child {
	border-bottom: 0;
}

#search-lightbox .autocomplete-suggestion .search-name {
	font-size: 15px;
	font-weight: 500;
}

#search-lightbox .autocomplete-suggestion strong {
	color: var(--tl-pink-deep);
}

#search-lightbox .autocomplete-suggestion img,
#search-lightbox .autocomplete-suggestion .search-image {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
}

#search-lightbox .autocomplete-suggestion:hover,
#search-lightbox .autocomplete-selected {
	background: var(--tl-blush);
}

@media (max-width: 549px) {
	#search-lightbox {
		padding: 22px 18px 18px;
		border-radius: 20px;
	}

	.mfp-content:has(#search-lightbox) {
		margin-top: 8vh;
	}
}

/* ==========================================================================
   04. Hero
   ========================================================================== */
.tlnn-hero {
	overflow: hidden;
	background: radial-gradient(900px 480px at 85% 15%, #ffd6e3 0%, transparent 60%), linear-gradient(180deg, #fff7fa, var(--tl-pink-soft)) !important;
}

.tlnn-hero .tlnn-hero-row > .col {
	padding-bottom: 0;
}

.tlnn-hero-txt > .col-inner {
	padding-bottom: 56px;
}

.tlnn-badge {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 18px;
	padding: 8px 16px;
	border-radius: 99px;
	background: var(--tl-white);
	box-shadow: var(--tl-shadow);
	font-size: 13px;
	font-weight: 600;
	color: var(--tl-pink-deep);
}

.tlnn-badge span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tl-pink);
}

.tlnn-hero-title {
	margin-bottom: 16px;
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.18;
}

.tlnn-hero-title mark {
	padding: 0 4px;
	background: linear-gradient(transparent 60%, rgba(242, 74, 121, 0.25) 0);
	color: var(--tl-pink-deep);
}

.tlnn-lead {
	max-width: 54ch;
	font-size: 17px;
	color: var(--tl-muted);
}

.tlnn-proof p {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tl-muted);
}

.tlnn-proof b {
	color: var(--tl-ink);
}

.tlnn-avatars {
	display: inline-flex;
}

.tlnn-avatars img {
	width: 36px;
	height: 36px;
	margin-left: -8px;
	border: 2px solid var(--tl-white);
	border-radius: 50%;
	object-fit: cover;
}

.tlnn-avatars img:first-child {
	margin-left: 0;
}

.tlnn-hero-media > .col-inner {
	position: relative;
	max-width: 430px;
	margin: 0 auto;
}

.tlnn-hero-media > .col-inner::before {
	content: "";
	position: absolute;
	inset: 6% -6% 0 6%;
	border-radius: 240px 240px 0 0;
	background: linear-gradient(180deg, var(--tl-pink), #ff9ab6);
}

.tlnn-hero-photo {
	position: relative;
	margin-bottom: 0 !important;
}

.tlnn-hero-photo img {
	border: 8px solid var(--tl-white);
	border-bottom: 0;
	border-radius: 220px 220px 0 0;
	background: var(--tl-pink-soft);
}

.tlnn-float-card {
	position: absolute;
	z-index: 2;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--tl-white);
	box-shadow: var(--tl-shadow);
	animation: tlnn-bob 4s ease-in-out infinite;
}

.tlnn-float-card p {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.3;
}

.tlnn-float-card b {
	display: block;
	font-size: 16px;
	color: var(--tl-pink-deep);
}

.tlnn-float-card.fc1 {
	top: 36%;
	left: -28px;
}

.tlnn-float-card.fc2 {
	right: -14px;
	bottom: 16%;
	animation-delay: 1.5s;
}

.tlnn-fc-ic {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--tl-pink-soft);
	color: var(--tl-pink);
}

@keyframes tlnn-bob {
	50% {
		transform: translateY(-8px);
	}
}

/* ==========================================================================
   05. USP bar
   ========================================================================== */
.tlnn-usp .col {
	padding-bottom: 0;
}

.tlnn-usp-item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 20px 6px;
	color: var(--tl-white);
}

.tlnn-usp-item .ic {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

.tlnn-usp-item b {
	display: block;
	font-size: 14.5px;
	color: var(--tl-white);
}

.tlnn-usp-item small {
	font-size: 12.5px;
	opacity: 0.88;
}

.tlnn-usp .col + .col .tlnn-usp-item {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	padding-left: 20px;
}

/* ==========================================================================
   06. Sứ mệnh & form đăng ký
   ========================================================================== */
.tlnn-mission-txt h2 {
	margin-bottom: 14px;
	font-size: clamp(26px, 3vw, 34px);
}

.tlnn-mission-txt p {
	color: var(--tl-muted);
}

.tlnn-form {
	position: relative;
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 30px 26px;
	border: 1px solid var(--tl-line);
	border-radius: 20px;
	background: var(--tl-white);
	box-shadow: var(--tl-shadow);
}

.tlnn-form::before {
	content: "";
	position: absolute;
	top: -10px;
	right: 18px;
	left: 18px;
	height: 10px;
	border-radius: 10px 10px 0 0;
	background: var(--tl-pink);
}

.tlnn-form.is-popup {
	border: 0;
	box-shadow: none;
}

.tlnn-form.is-popup::before {
	display: none;
}

.tlnn-form__title {
	margin: 0;
	font-size: 22px;
	text-align: center;
}

.tlnn-form__sub {
	margin: 0 0 4px;
	font-size: 14px;
	text-align: center;
	color: var(--tl-muted);
}

.tlnn-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tl-ink);
}

.tlnn-field input,
.tlnn-field select,
.tlnn-field textarea {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--tl-line);
	border-radius: 10px;
	background: var(--tl-blush);
	box-shadow: none;
	font-size: 15px;
	color: var(--tl-ink);
}

.tlnn-field textarea {
	height: auto;
	min-height: 84px;
	padding: 10px 14px;
	resize: vertical;
}

.tlnn-field input:focus,
.tlnn-field select:focus,
.tlnn-field textarea:focus {
	border-color: var(--tl-pink);
	background: var(--tl-white);
	box-shadow: none;
}

.tlnn-field .is-invalid {
	border-color: #e5484d;
	background: #fff4f4;
}

.tlnn-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.tlnn-field-row.is-stack {
	grid-template-columns: 1fr;
}

.tlnn-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tlnn-form__btn.button {
	width: 100%;
	height: 50px;
	margin: 4px 0 0;
	border-radius: 99px;
	font-size: 15px;
}

.tlnn-form__btn.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.tlnn-form__msg:empty {
	display: none;
}

.tlnn-form__msg {
	padding: 12px;
	border-radius: 10px;
	font-size: 14px;
	text-align: center;
}

.tlnn-form__msg.is-ok {
	background: #e9f8ef;
	color: #1d6b3d;
}

.tlnn-form__msg.is-error {
	background: #fff1f1;
	color: #b42318;
}

.tlnn-form__or {
	margin: 0;
	font-size: 13px;
	text-align: center;
	color: var(--tl-muted);
}

.tlnn-form__or a {
	font-weight: 600;
	text-decoration: underline;
	color: var(--tl-pink-deep);
}

/* ==========================================================================
   07. Khóa học
   ========================================================================== */
.tlnn-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 28px;
}

.tlnn-tab {
	height: 40px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--tl-line);
	border-radius: 99px;
	background: var(--tl-white);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tl-muted);
	cursor: pointer;
}

.tlnn-tab.is-active,
.tlnn-tab:hover {
	border-color: var(--tl-pink);
	background: var(--tl-pink);
	color: var(--tl-white);
}

.tlnn-courses {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

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

.tlnn-courses.cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tlnn-course {
	display: flex;
	flex-direction: column;
	text-align: left;
	overflow: hidden;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	background: var(--tl-white);
	transition: transform 0.25s, box-shadow 0.25s, opacity 0.6s;
}

.tlnn-course:hover {
	transform: translateY(-6px);
	box-shadow: var(--tl-shadow);
}

.tlnn-course.is-hidden {
	display: none;
}

.tlnn-coach-grid {
	max-width: 960px;
	margin: 0 auto;
}

.tlnn-course__foot .button {
	white-space: nowrap;
}

.tlnn-course__img {
	position: relative;
	display: block;
	aspect-ratio: 364 / 201;
	overflow: hidden;
}

.tlnn-course__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.tlnn-course:hover .tlnn-course__img img {
	transform: scale(1.05);
}

.tlnn-course__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 99px;
	background: var(--tl-white);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tl-pink-deep);
}

.tlnn-course__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.tlnn-course__cat {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tl-khaki);
}

.tlnn-course__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
}

.tlnn-course__title a {
	color: var(--tl-ink);
}

.tlnn-course__title a:hover {
	color: var(--tl-pink-deep);
}

.tlnn-course__desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tl-muted);
}

.tlnn-course__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 12.5px;
	color: var(--tl-muted);
}

.tlnn-course__meta span {
	display: inline-flex;
	gap: 5px;
	align-items: center;
}

.tlnn-course__meta .tlnn-i {
	width: 15px;
	height: 15px;
}

.tlnn-course__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px dashed var(--tl-line);
}

.tlnn-course__foot .button,
.tlnn-course__cta .button {
	margin: 0;
}

.tlnn-course__cta {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.tlnn-price {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tl-pink-deep);
}

.tlnn-price small {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--tl-muted);
}

.tlnn-price.is-lg {
	font-size: 26px;
}

.tlnn-icon-btn {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--tl-line);
	border-radius: 50%;
	background: var(--tl-blush);
	color: var(--tl-pink-deep);
}

.tlnn-icon-btn:hover {
	background: var(--tl-pink);
	color: var(--tl-white);
}

/* ==========================================================================
   08. Dịch vụ & thẻ
   ========================================================================== */
.tlnn-card > .col-inner {
	position: relative;
	height: 100%;
	overflow: hidden;
	padding: 30px 26px;
	border: 1px solid var(--tl-line);
	border-radius: 18px;
	background: var(--tl-white);
	transition: transform 0.25s, box-shadow 0.25s, opacity 0.6s;
}

.tlnn-card:hover > .col-inner {
	transform: translateY(-5px);
	box-shadow: var(--tl-shadow);
}

.tlnn-card h3 {
	position: relative;
	margin: 14px 0 10px;
	font-size: 19px;
}

.tlnn-card p {
	position: relative;
	font-size: 14.5px;
	color: var(--tl-muted);
}

.tlnn-card p:last-child {
	margin-bottom: 0;
}

.tlnn-card a.tlnn-more {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-weight: 600;
	color: var(--tl-pink-deep);
}

.tlnn-num {
	position: absolute;
	top: -12px;
	right: 0;
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var(--tl-pink-soft);
}

.tlnn-ic {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: var(--tl-pink);
	color: var(--tl-white);
}

.tlnn-ic .tlnn-i {
	width: 22px;
	height: 22px;
}

.tlnn-ic.is-soft {
	background: var(--tl-pink-soft);
	color: var(--tl-pink-deep);
}

.tlnn-card.is-hl > .col-inner {
	border: 0;
	background: linear-gradient(160deg, var(--tl-pink), #ff7ea0);
}

.tlnn-card.is-hl h3,
.tlnn-card.is-hl p,
.tlnn-card.is-hl a.tlnn-more {
	color: var(--tl-white);
}

.tlnn-card.is-hl .tlnn-num {
	color: rgba(255, 255, 255, 0.2);
}

.tlnn-card.is-hl .tlnn-ic {
	background: var(--tl-white);
	color: var(--tl-pink);
}

.tlnn-step-n {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--tl-pink);
	font-size: 18px;
	font-weight: 700;
	color: var(--tl-white);
}

/* ==========================================================================
   09. Chatbot
   ========================================================================== */
.tlnn-bot-feat {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 12px;
	padding: 14px 16px;
	border: 1px solid var(--tl-line);
	border-radius: 12px;
	background: var(--tl-white);
}

.tlnn-bot-feat .tlnn-ic {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--tl-pink-soft);
	color: var(--tl-pink-deep);
}

.tlnn-bot-feat b {
	display: block;
	font-size: 14.5px;
}

.tlnn-bot-feat em {
	display: block;
	font-size: 13.5px;
	font-style: normal;
	color: var(--tl-muted);
}

.tlnn-disclaim {
	padding: 10px 14px;
	border-left: 3px solid var(--tl-khaki);
	border-radius: 0 8px 8px 0;
	background: rgba(171, 163, 136, 0.1);
	font-size: 12.5px;
	color: var(--tl-muted);
}

.tlnn-chat {
	display: flex;
	flex-direction: column;
	height: 560px;
	overflow: hidden;
	border: 1px solid var(--tl-line);
	border-radius: 22px;
	background: var(--tl-white);
	box-shadow: var(--tl-shadow-lg);
}

.tlnn-chat__head {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 18px;
	background: linear-gradient(120deg, var(--tl-pink), #ff7ea0);
	color: var(--tl-white);
}

.tlnn-chat__av {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tl-white) url("../img/logo-mark.png") center / 86% no-repeat;
}

.tlnn-chat__av::after {
	content: "";
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 11px;
	height: 11px;
	border: 2px solid var(--tl-white);
	border-radius: 50%;
	background: #3ddc84;
}

.tlnn-chat__who b {
	display: block;
	font-size: 16px;
	color: var(--tl-white);
}

.tlnn-chat__who small {
	font-size: 12px;
	opacity: 0.9;
}

.tlnn-chat__acts {
	display: flex;
	gap: 6px;
	margin-left: auto;
}

.tlnn-chat__acts button {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	color: var(--tl-white);
	cursor: pointer;
}

.tlnn-chat__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
	padding: 18px;
	background: linear-gradient(180deg, var(--tl-blush), var(--tl-white));
}

.tlnn-msg {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-line;
}

.tlnn-msg time {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	opacity: 0.6;
}

.tlnn-msg--bot {
	align-self: flex-start;
	border: 1px solid var(--tl-line);
	border-bottom-left-radius: 4px;
	background: var(--tl-white);
}

.tlnn-msg--user {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: var(--tl-pink);
	color: var(--tl-white);
}

.tlnn-typing {
	display: inline-flex;
	align-self: flex-start;
	gap: 4px;
	padding: 12px 14px;
	border: 1px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-white);
}

.tlnn-typing i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tl-pink);
	animation: tlnn-dot 1s infinite;
}

.tlnn-typing i:nth-child(2) {
	animation-delay: 0.15s;
}

.tlnn-typing i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes tlnn-dot {
	50% {
		opacity: 0.25;
		transform: translateY(-3px);
	}
}

.tlnn-chat__chips {
	display: flex;
    flex-wrap: wrap;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 14px 0;
	scrollbar-width: none;
}

.tlnn-chip {
	flex: none;
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--tl-pink);
	border-radius: 99px;
	background: var(--tl-white);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tl-pink-deep);
	cursor: pointer;
}

.tlnn-chip:hover {
	background: var(--tl-pink-soft);
}

.tlnn-chat__input {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 12px 14px 8px;
}

.tlnn-chat__input textarea {
	flex: 1;
	min-width: 0;
	height: 44px;
	min-height: 44px;
	max-height: 110px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--tl-line);
	border-radius: 22px;
	background: var(--tl-blush);
	box-shadow: none;
	font-size: 14px;
	line-height: 1.4;
	resize: none;
}

.tlnn-chat__input textarea:focus {
	border-color: var(--tl-pink);
	background: var(--tl-white);
	box-shadow: none;
}

.tlnn-chat__input button {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tl-pink);
	color: var(--tl-white);
	cursor: pointer;
}

.tlnn-chat__foot {
	margin: 0;
	padding: 0 14px 10px;
	font-size: 11px;
	text-align: center;
	color: var(--tl-muted);
}

/* Khung chat nổi */
.tlnn-chat--float {
	position: fixed;
	right: 18px;
	bottom: 96px;
	z-index: 1001;
	display: none;
	width: min(380px, calc(100vw - 24px));
	height: min(560px, calc(100vh - 140px));
}

.tlnn-chat--float.is-open {
	display: flex;
	animation: tlnn-pop 0.25s ease-out;
}

@keyframes tlnn-pop {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}
}

/* Trang chatbot: chọn trợ lý */
.tlnn-chat-page {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.tlnn-personas {
	display: grid;
	gap: 12px;
}

.tlnn-persona {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 14px;
	border: 2px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-white);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--tl-ink);
	cursor: pointer;
}

.tlnn-persona.is-on {
	border-color: var(--tl-pink);
	background: var(--tl-blush);
}

.tlnn-persona.is-soon {
	opacity: 0.55;
	cursor: default;
}

.tlnn-persona b {
	display: block;
	font-size: 15px;
}

.tlnn-persona small {
	font-size: 12.5px;
	color: var(--tl-muted);
}

/* ==========================================================================
   10. Profile & hành trình
   ========================================================================== */
.tlnn-pf-img img {
	border-radius: 200px 200px 24px 24px;
	box-shadow: var(--tl-shadow);
}

.tlnn-pf-name {
	margin-bottom: 4px;
	font-size: clamp(28px, 3.4vw, 40px);
	letter-spacing: 0.02em;
}

.tlnn-pf-role {
	font-weight: 600;
	color: var(--tl-pink-deep);
}

.tlnn-quote {
	margin: 10px 0 0;
	padding: 18px 20px;
	border: 0;
	border-radius: 14px;
	background: var(--tl-pink-soft);
	font-size: 14.5px;
	font-style: italic;
	color: var(--tl-ink);
}

.tlnn-quote cite {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	font-style: normal;
	font-weight: 600;
	color: var(--tl-pink-deep);
}

/* Hành trình: cụm vòng tròn so le như bản thiết kế, có đường nối mảnh phía sau */
.tlnn-journey-head {
	padding-left: 16px;
	border-left: 3px solid var(--tl-pink);
}

.tlnn-journey-head h2 {
	margin-bottom: 6px;
	font-size: clamp(26px, 3vw, 34px);
}

.tlnn-journey-head em {
	font-style: normal;
	color: var(--tl-pink);
}

.tlnn-journey-head p:last-child {
	margin-bottom: 0;
	color: var(--tl-muted);
}

.tlnn-journey-row {
	position: relative;
	padding: 24px 0 8px;
}

.tlnn-journey-row::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 4%;
	left: 4%;
	height: 120px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C120 0 220 120 340 60 S560 0 680 70 880 120 1000 40' fill='none' stroke='%23f6b3c7' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	transform: translateY(-60%);
	pointer-events: none;
}

.tlnn-journey-row > .col {
	position: relative;
	z-index: 1;
}

.tlnn-journey {
	margin: 0 auto;
	text-align: center;
}

.tlnn-journey .image-lightbox {
	display: block;
}

.tlnn-journey .img-inner {
	overflow: visible;
	background: none;
}

.tlnn-journey .img-inner img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border: 6px solid var(--tl-white);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px var(--tl-pink-soft), 0 12px 28px rgba(201, 50, 95, 0.14);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.tlnn-journey-row > .col:nth-child(odd) .tlnn-journey .img-inner img {
	box-shadow: 0 0 0 4px var(--tl-pink-deep), 0 12px 28px rgba(201, 50, 95, 0.14);
}

/* Kích thước + độ lệch dọc tạo nhịp so le */
.tlnn-journey-row > .col:nth-child(1) .tlnn-journey {
	max-width: 92%;
	transform: translateY(-14px);
}

.tlnn-journey-row > .col:nth-child(2) .tlnn-journey {
	max-width: 74%;
	transform: translateY(34px);
}

.tlnn-journey-row > .col:nth-child(3) .tlnn-journey {
	max-width: 100%;
	transform: translateY(-6px);
}

.tlnn-journey-row > .col:nth-child(4) .tlnn-journey {
	max-width: 72%;
	transform: translateY(40px);
}

.tlnn-journey-row > .col:nth-child(5) .tlnn-journey {
	max-width: 94%;
	transform: translateY(-18px);
}

.tlnn-journey-row > .col:nth-child(6) .tlnn-journey {
	max-width: 78%;
	transform: translateY(26px);
}

/* Chú thích nằm dưới ảnh, không bị khung tròn che */
.tlnn-journey .caption {
	position: static;
	margin-top: 14px;
	padding: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	opacity: 1;
	visibility: visible;
	color: var(--tl-muted);
	transform: none;
	transition: color 0.25s;
}

.tlnn-journey:hover .img-inner img {
	transform: scale(1.06);
	box-shadow: 0 0 0 4px var(--tl-pink), 0 18px 36px rgba(201, 50, 95, 0.26);
}

.tlnn-journey:hover .caption {
	color: var(--tl-pink-deep);
}

/* Icon kính lúp: đặt theo tâm ảnh vuông (margin-top % tính theo chiều rộng), không theo khung có chú thích */
.tlnn-journey .img-inner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-top: 50%;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%23c9325f' stroke-width='2'/%3E%3Cpath d='M16 16l4 4M11 8.5v5M8.5 11h5' stroke='%23c9325f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity 0.25s, transform 0.25s;
	pointer-events: none;
}

.tlnn-journey:hover .img-inner::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Tắt overlay zoom mặc định của Flatsome để không đè lên vòng tròn */
.tlnn-journey.image-zoom img,
.tlnn-journey .image-zoom img {
	transform: none;
}

/* ==========================================================================
   11. Con số
   ========================================================================== */
.tlnn-stat > .col-inner {
	padding: 24px 16px;
	border: 1px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-white);
	text-align: center;
}

.tlnn-stat-num {
	display: block;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--tl-pink);
}

.tlnn-stat p {
	margin: 0;
	font-size: 13.5px;
	color: var(--tl-muted);
}

/* ==========================================================================
   12. Social
   ========================================================================== */
.tlnn-social {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.tlnn-soc {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 24px 20px;
	border: 1px solid var(--tl-line);
	border-radius: 18px;
	background: var(--tl-white);
	color: var(--tl-ink);
	transition: transform 0.25s, box-shadow 0.25s, opacity 0.6s;
}

.tlnn-soc:hover {
	transform: translateY(-5px);
	box-shadow: var(--tl-shadow);
	color: var(--tl-ink);
}

.tlnn-soc__ic {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--tl-pink);
	color: var(--tl-white);
}

.tlnn-soc__ic .tlnn-i {
	width: 24px;
	height: 24px;
}

.tlnn-soc--tiktok .tlnn-soc__ic {
	background: #111111;
}

.tlnn-soc--youtube .tlnn-soc__ic {
	background: #ff0033;
}

.tlnn-soc--facebook .tlnn-soc__ic {
	background: #1877f2;
}

.tlnn-soc__name {
	font-size: 17px;
}

.tlnn-soc__desc {
	font-size: 13.5px;
	color: var(--tl-muted);
}

.tlnn-soc__more {
	font-size: 13px;
	font-weight: 600;
	color: var(--tl-pink-deep);
}

/* ==========================================================================
   13. Cảm nhận học viên
   ========================================================================== */
.tlnn-tcard > .col-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px;
	border: 1px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-white);
}

.tlnn-tcard .tlnn-q {
	height: 18px;
	margin-bottom: 10px;
	font-size: 44px;
	font-weight: 700;
	line-height: 0.8;
	color: var(--tl-pink);
}

.tlnn-tcard p {
	font-size: 14px;
}

.tlnn-who {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: auto;
}

.tlnn-who i {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tl-pink-soft);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	color: var(--tl-pink-deep);
}

.tlnn-who b {
	display: block;
	font-size: 14px;
}

.tlnn-who small {
	font-size: 12px;
	color: var(--tl-muted);
}

/* ==========================================================================
   14. Blog
   ========================================================================== */
.tlnn-posts .post-item .box-image {
	overflow: hidden;
	border-radius: 14px;
}

.tlnn-posts .post-item .box-text {
	padding: 14px 2px 0;
}

.tlnn-posts .post-title {
	font-size: 16.5px;
	line-height: 1.4;
}

.tlnn-posts .is-divider {
	display: none;
}

.tlnn-posts .badge.post-date .badge-inner {
	border-radius: 10px;
	background: var(--tl-white);
	color: var(--tl-pink-deep);
}

.blog-archive .post-item .box-image,
.blog-single .entry-image img {
	border-radius: 14px;
}

.blog-archive .badge .badge-inner,
.blog-single .badge .badge-inner {
	border-radius: 10px;
}

/* Trang Blog: lưới thẻ bài viết */
#post-list .post-item > .col-inner {
	height: 100%;
}

#post-list .box-blog-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-white);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

#post-list .box-blog-post:hover {
	border-color: #f6b3c7;
	box-shadow: var(--tl-shadow);
	transform: translateY(-5px);
}

/* Flatsome đặt margin auto cho .box-image: trong flex sẽ co về 0, nên ép full chiều rộng */
#post-list .box-blog-post .box-image {
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
}

#post-list .box-blog-post .box-image img {
	transition: transform 0.5s;
}

#post-list .box-blog-post:hover .box-image img {
	transform: scale(1.06);
}

#post-list .box-blog-post .box-text {
	flex: 1;
	padding: 18px 20px 20px;
}

#post-list .post-title {
	margin-bottom: 8px;
	font-size: 17px;
	line-height: 1.4;
}

#post-list .post-title a {
	transition: color 0.2s;
}

#post-list .box-blog-post:hover .post-title a {
	color: var(--tl-pink-deep);
}

#post-list .is-divider {
	display: none;
}

#post-list .from_the_blog_excerpt {
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--tl-muted);
}

#post-list .badge.post-date {
	top: 12px;
	left: 12px;
}

#post-list .badge .badge-inner {
	border-radius: 10px;
	background: var(--tl-white);
	color: var(--tl-pink-deep);
}

@media (min-width: 550px) and (max-width: 849px) {
	#post-list .row.large-columns-2 > .col {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@media (hover: none) {
	#post-list .box-blog-post:hover {
		transform: none;
	}
}

.widget-area .widget {
	margin-bottom: 24px;
	padding: 20px;
	border: 1px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-white);
}

.widget-area .widget-title {
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tl-ink);
}

.widget-area .is-divider {
	height: 2px;
	max-width: 100%;
	background: var(--tl-pink-soft);
}

.tlnn-side-cta {
	padding: 4px 0;
	color: var(--tl-white);
}

.widget_custom_html:has(.tlnn-side-cta) {
	border: 0;
	background: linear-gradient(160deg, var(--tl-pink), #ff8fae);
}

.widget_custom_html:has(.tlnn-side-cta) .widget-title {
	color: var(--tl-white);
}

.widget_custom_html:has(.tlnn-side-cta) .is-divider {
	background: rgba(255, 255, 255, 0.35);
}

.tlnn-side-cta .button {
	margin: 0 0 8px;
}

/* ==========================================================================
   15. CTA band & FAQ
   ========================================================================== */
.tlnn-cta-band > .col-inner {
	padding: 44px 40px;
	border-radius: 26px;
	background: linear-gradient(120deg, var(--tl-pink), #ff8fae);
	color: var(--tl-white);
}

.tlnn-cta-band h2 {
	margin-bottom: 8px;
	font-size: clamp(24px, 3vw, 32px);
	color: var(--tl-white);
}

.tlnn-cta-band p {
	margin-bottom: 0;
	opacity: 0.92;
}

.tlnn-cta-band .button {
	margin: 6px 10px 6px 0;
}

.tlnn-faq {
	max-width: 840px;
	margin: 0 auto;
}

.tlnn-faq .accordion-item {
	margin-bottom: 12px;
	overflow: hidden;
	border: 1px solid var(--tl-line);
	border-radius: 14px;
	background: var(--tl-white);
}

.tlnn-faq .accordion-title {
	padding: 18px 56px 18px 20px;
	border: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--tl-ink);
}

.tlnn-faq .accordion-title.active {
	border: 0;
	background: var(--tl-blush);
	color: var(--tl-pink-deep);
}

/* Nút mũi tên FAQ: khóa cứng 30x30 (Flatsome đặt min-height cho button làm méo thành bầu dục) */
.tlnn-faq .accordion-title .toggle {
	top: 50%;
	right: 14px;
	left: auto;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 30px !important;
	min-width: 30px;
	height: 30px !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0;
	line-height: 1 !important;
	border-radius: 50%;
	aspect-ratio: 1;
	background: var(--tl-pink-soft);
	color: var(--tl-pink-deep);
	transform: translateY(-50%);
}

.tlnn-faq .accordion-title .toggle i {
	top: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1;
	transition: transform 0.25s;
}

.tlnn-faq .accordion-title.active .toggle {
	background: var(--tl-pink);
	color: var(--tl-white);
}

.tlnn-faq .accordion-title.active .toggle i {
	transform: rotate(180deg);
}

.tlnn-curri .accordion-inner ul {
	margin: 0 0 0 18px;
}

.tlnn-faq .accordion-inner {
	padding: 4px 20px 18px;
	color: var(--tl-muted);
}

/* ==========================================================================
   16. Page banner, timeline, liên hệ
   ========================================================================== */
.tlnn-banner {
	position: relative;
	overflow: hidden;
	background: radial-gradient(700px 300px at 90% 0%, #ffd0de 0%, transparent 60%), linear-gradient(180deg, #fff7fa, var(--tl-pink-soft)) !important;
}

.tlnn-banner::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 20px;
	width: 380px;
	max-width: 55%;
	height: 70px;
	opacity: 0.45;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 70'%3E%3Cpath fill='none' stroke='%23aba388' stroke-width='2.5' d='M0 45h120l10-10 8 10h20l10-42 12 62 10-30h30l8-14 8 22 8-26 8 18h128'/%3E%3C/svg%3E") no-repeat right center / contain;
	pointer-events: none;
}

.tlnn-banner h1 {
	margin: 10px 0 10px;
	font-size: clamp(30px, 4vw, 46px);
}

.tlnn-banner p {
	max-width: 62ch;
	margin-bottom: 0;
	font-size: 16px;
	color: var(--tl-muted);
}

.tlnn-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 13px;
	color: var(--tl-muted);
}

.tlnn-crumbs a {
	font-weight: 500;
	color: var(--tl-pink-deep);
}

.tlnn-crumbs .tlnn-i {
	width: 14px;
	height: 14px;
}

.tlnn-story-img {
	position: relative;
}

.tlnn-story-img img {
	border-radius: 24px;
}

.tlnn-exp {
	position: absolute;
	right: -10px;
	bottom: 28px;
	padding: 16px 20px;
	border-radius: 16px;
	background: var(--tl-white);
	box-shadow: var(--tl-shadow);
	text-align: center;
}

.tlnn-exp p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--tl-muted);
}

.tlnn-exp b {
	display: block;
	font-size: 34px;
	line-height: 1;
	color: var(--tl-pink);
}

.tlnn-tl-row {
	position: relative;
}

.tlnn-tl-row::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--tl-line);
	transform: translateX(-50%);
}

.tlnn-tl-row::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	border: 4px solid var(--tl-white);
	border-radius: 50%;
	background: var(--tl-pink);
	box-shadow: 0 0 0 2px var(--tl-pink);
	transform: translate(-50%, -50%);
}

.tlnn-tl-row > .col:first-child > .col-inner {
	padding-right: 32px;
}

.tlnn-tl-row > .col:last-child > .col-inner {
	padding-left: 32px;
}

.tlnn-tl-row .img-inner {
	overflow: hidden;
	border-radius: 16px;
}

.tlnn-tl-row .img-inner img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.tlnn-yr {
	margin-bottom: 4px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--tl-pink);
}

.tlnn-contact-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.tlnn-cc {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 24px 20px;
	border: 1px solid var(--tl-line);
	border-radius: 18px;
	background: var(--tl-white);
}

.tlnn-cc__ic {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--tl-pink);
	color: var(--tl-white);
}

.tlnn-cc b {
	font-size: 16px;
}

.tlnn-cc p {
	margin: 0;
	font-size: 14px;
	color: var(--tl-muted);
}

.tlnn-cc a {
	color: var(--tl-ink);
}

.tlnn-map iframe {
	display: block;
	width: 100%;
	min-height: 440px;
	border: 0;
	border-radius: 20px;
	background: repeating-linear-gradient(45deg, var(--tl-blush) 0 14px, var(--tl-pink-soft) 14px 28px);
}

/* Trang dịch vụ */
.tlnn-sd-media > .col-inner {
	position: relative;
}

.tlnn-sd-media .img-inner {
	overflow: hidden;
	border-radius: 24px;
}

.tlnn-sd-media .img-inner img {
	aspect-ratio: 5 / 4;
	object-fit: cover;
}

.tlnn-sd-num {
	position: absolute;
	top: 14px;
	left: 26px;
	z-index: 1;
}

.tlnn-sd-num p {
	margin: 0;
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var(--tl-white);
	text-shadow: 0 4px 18px rgba(201, 50, 95, 0.45);
}

.tlnn-svc-row h2 {
	font-size: clamp(24px, 2.8vw, 32px);
}

/* ==========================================================================
   17. Trang chi tiết khóa học
   ========================================================================== */
.tlnn-cd-hero {
	padding: 40px 0 48px;
	background: linear-gradient(180deg, #fff7fa, var(--tl-pink-soft));
}

.tlnn-cd-title {
	margin: 4px 0 12px;
	font-size: clamp(28px, 3.6vw, 42px);
}

.tlnn-cd-lead {
	font-size: 16px;
	color: var(--tl-muted);
}

.tlnn-cd-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	font-size: 14px;
}

.tlnn-cd-meta > span {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.tlnn-cd-meta .tlnn-i {
	color: var(--tl-pink);
}

/* Giảng viên trong phần đầu trang chi tiết khóa học */
.tlnn-cd-author {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	max-width: 620px;
	margin-top: 28px;
	padding: 18px 20px;
	border: 1px solid var(--tl-line);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: var(--tl-shadow);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.tlnn-cd-author:hover {
	border-color: #f6b3c7;
	transform: translateY(-3px);
}

.tlnn-cd-author__img {
	width: 96px;
	height: 96px;
	border: 4px solid var(--tl-white);
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--tl-pink-soft);
	object-fit: cover;
	object-position: top;
}

.tlnn-cd-author__label {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tl-pink);
}

.tlnn-cd-author__txt b {
	display: block;
	font-size: 18px;
	color: var(--tl-ink);
}

.tlnn-cd-author__txt p {
	margin: 4px 0 6px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tl-muted);
}

.tlnn-cd-author__txt a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--tl-pink-deep);
}

.tlnn-cd-author__txt a .tlnn-i {
	transition: transform 0.25s;
}

.tlnn-cd-author__txt a:hover {
	color: var(--tl-pink);
}

.tlnn-cd-author__txt a:hover .tlnn-i {
	transform: translateX(4px);
}

@media (max-width: 549px) {
	.tlnn-cd-author {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;
		padding: 14px;
	}

	.tlnn-cd-author__img {
		width: 72px;
		height: 72px;
	}
}

.tlnn-cd-side > .col-inner {
	position: sticky;
	top: 110px;
}

.tlnn-buybox {
	overflow: hidden;
	border: 1px solid var(--tl-line);
	border-radius: 20px;
	background: var(--tl-white);
	box-shadow: var(--tl-shadow-lg);
}

.tlnn-buybox__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.tlnn-buybox__in {
	display: grid;
	gap: 10px;
	padding: 22px;
}

.tlnn-buybox__in .button {
	margin: 0;
}

.tlnn-buybox__in .tlnn-checks {
	margin-top: 6px;
	font-size: 13.5px;
}

.tlnn-cd-content {
	padding-top: 48px;
	padding-bottom: 32px;
}

.tlnn-cd-content h2 {
	margin: 36px 0 16px;
	font-size: 24px;
}

.tlnn-cd-content .col-inner > h2:first-child,
.tlnn-cd-content .entry-content > *:first-child h2 {
	margin-top: 0;
}

.tlnn-learn .tlnn-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 24px;
	padding: 22px 24px;
	border: 1px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-blush);
}

.tlnn-cd-aside {
	position: sticky;
	top: 110px;
}

.tlnn-widget {
	margin-bottom: 22px;
	padding: 22px;
	border: 1px solid var(--tl-line);
	border-radius: 16px;
	background: var(--tl-white);
}

.tlnn-widget__title {
	display: block;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--tl-pink-soft);
	font-size: 16px;
}

.tlnn-widget--cta {
	border: 0;
	background: linear-gradient(160deg, var(--tl-pink), #ff8fae);
	color: var(--tl-white);
}

.tlnn-widget--cta .tlnn-widget__title {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--tl-white);
}

.tlnn-widget--cta .button {
	margin: 0;
	color: var(--tl-pink-deep) !important;
}

.tlnn-mini {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tl-ink);
}

.tlnn-mini img {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
}

.tlnn-mini small {
	display: block;
	font-weight: 400;
	color: var(--tl-muted);
}

.tlnn-buybar {
	display: none;
}

.tlnn-who-card > .col-inner {
	height: 100%;
	padding: 18px;
	border: 1px solid var(--tl-line);
	border-radius: 14px;
	background: var(--tl-white);
	font-size: 14px;
}

.tlnn-who-card .tlnn-i {
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 6px;
	color: var(--tl-pink);
}

.tlnn-author > .col-inner {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 22px;
	border: 1px solid var(--tl-line);
	border-radius: 18px;
	background: var(--tl-white);
}

.tlnn-author .img {
	margin: 0 !important;
}

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

.tlnn-author h3 {
	margin-bottom: 6px;
}

.tlnn-author p {
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--tl-muted);
}

/* ==========================================================================
   18. Bài viết
   ========================================================================== */
.tlnn-toc {
	margin: 0 0 28px;
	padding: 18px 22px;
	border: 1px solid var(--tl-line);
	border-radius: 14px;
	background: var(--tl-blush);
}

.tlnn-toc b {
	display: block;
	margin-bottom: 8px;
}

.tlnn-toc ol {
	margin: 0 0 0 20px;
}

.tlnn-toc li {
	margin-bottom: 4px;
}

.tlnn-toc a {
	color: var(--tl-pink-deep);
}

.blog-single .entry-content h2 {
	scroll-margin-top: 100px;
}

.tlnn-entry-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	margin: 28px 0;
	padding: 22px;
	border-radius: 16px;
	background: linear-gradient(120deg, var(--tl-pink), #ff8fae);
	color: var(--tl-white);
}

.tlnn-entry-cta b {
	color: var(--tl-white);
}

.tlnn-entry-cta span {
	font-size: 14px;
	opacity: 0.92;
}

.tlnn-entry-cta .button {
	margin: 0;
	color: var(--tl-pink-deep) !important;
}

.entry-content blockquote {
	border-left: 4px solid var(--tl-pink);
	border-radius: 0 12px 12px 0;
	background: var(--tl-blush);
}

/* ==========================================================================
   19. Footer
   ========================================================================== */
.tlnn-footer {
	color: #f3dde5;
}

.tlnn-footer h4 {
	margin-bottom: 14px;
	font-size: 15px;
	color: var(--tl-white);
}

.tlnn-footer p {
	color: #f3dde5;
}

.tlnn-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlnn-footer li,
.tlnn-footer .col-inner ul li {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.tlnn-footer a {
	color: #f3dde5;
}

.tlnn-footer a:hover {
	color: #ff9ab6;
}

.tlnn-ft-logo {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--tl-white);
}

.tlnn-ft-logo img {
	width: auto;
	height: 50px;
}

.tlnn-contact-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.tlnn-contact-list .tlnn-i {
	margin-top: 3px;
	color: #ff9ab6;
}

.tlnn-soc-icons {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.tlnn-soc-icons a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--tl-white);
}

.tlnn-soc-icons a:hover {
	background: var(--tl-pink);
	color: var(--tl-white);
}

.absolute-footer {
	font-size: 12.5px;
}

/* ==========================================================================
   20. Nút nổi & popup
   ========================================================================== */
.tlnn-fabs {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 1000;
	display: grid;
	gap: 10px;
	justify-items: end;
	pointer-events: none;
}

/* Chỉ nút tròn nhận chuột, khung bao không che nội dung phía dưới */
.tlnn-fabs > * {
	pointer-events: auto;
}

.tlnn-fabs > .tlnn-fab-tip {
	pointer-events: none;
}

.tlnn-fab {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tl-white);
	cursor: pointer;
}

.tlnn-fab:hover {
	color: var(--tl-white);
	transform: translateY(-2px);
}

.tlnn-fab--zalo {
	background: #0068ff;
}

.tlnn-fab--call {
	background: #22b14c;
}

.tlnn-fab--chat {
	position: relative;
	width: 58px;
	height: 58px;
	background: var(--tl-pink);
}

.tlnn-fab--chat .tlnn-i {
	width: 26px;
	height: 26px;
}

.tlnn-fab--chat::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--tl-pink);
	border-radius: 50%;
	animation: tlnn-ring 2s infinite;
}

@keyframes tlnn-ring {
	to {
		opacity: 0;
		transform: scale(1.5);
	}
}

.tlnn-fab-tip {
	padding: 8px 12px;
	border-radius: 12px 12px 4px 12px;
	background: var(--tl-white);
	box-shadow: var(--tl-shadow);
	font-size: 13px;
	transition: opacity 0.3s;
}

.tlnn-fab-tip.is-hide {
	opacity: 0;
	pointer-events: none;
}

.tlnn-lightbox {
	overflow: hidden;
	border-radius: 20px;
}

.tlnn-lightbox .tlnn-form {
	padding: 30px 26px 24px;
}

/* ==========================================================================
   20b. Hover thống nhất cho nút và item
   - Nút: nhấc nhẹ 2px + bóng hồng, đổi màu nền rõ ràng.
   - Thẻ (card): nhấc 5-6px, viền chuyển hồng, bóng mềm.
   - Link chữ: đổi sang hồng đậm, mũi tên trượt sang phải.
   ========================================================================== */
.button,
.tlnn-tab,
.tlnn-chip,
.tlnn-icon-btn,
.tlnn-fab,
.tlnn-soc-icons a,
.tlnn-chat__input button,
.tlnn-chat__acts button {
	transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s;
}

/* Nút chính (nền hồng) */
.button.primary:not(.is-outline):hover,
.button.primary:not(.is-outline):focus-visible {
	border-color: var(--tl-pink-deep);
	background-color: var(--tl-pink-deep);
	box-shadow: 0 8px 20px rgba(201, 50, 95, 0.28);
	color: var(--tl-white);
	transform: translateY(-2px);
}

/* Nút viền hồng */
.button.primary.is-outline:hover,
.button.primary.is-outline:focus-visible {
	border-color: var(--tl-pink);
	background-color: var(--tl-pink);
	box-shadow: 0 8px 20px rgba(201, 50, 95, 0.22);
	color: var(--tl-white);
	transform: translateY(-2px);
}

/* Nút trắng (trên nền hồng) */
.button.white:not(.is-outline):hover,
.button.white:not(.is-outline):focus-visible {
	border-color: var(--tl-pink-soft) !important;
	background-color: var(--tl-pink-soft) !important;
	box-shadow: 0 8px 20px rgba(59, 29, 42, 0.18);
	color: var(--tl-pink-deep) !important;
	transform: translateY(-2px);
}

.button.white.is-outline:hover,
.button.white.is-outline:focus-visible {
	border-color: var(--tl-white) !important;
	background-color: var(--tl-white) !important;
	color: var(--tl-pink-deep) !important;
	transform: translateY(-2px);
}

.tlnn-widget--cta .button:hover,
.tlnn-entry-cta .button:hover {
	color: var(--tl-pink-deep) !important;
}

.tlnn-side-cta .button.is-outline:hover {
	color: var(--tl-pink-deep) !important;
}

/* Header: ô tìm kiếm + nút menu mobile */
/* Flatsome tô icon header bằng !important: dùng #header để thắng, icon trắng trên nền hồng */
#header .header-main .header-search > a:hover,
#header .header-main .header-search > a:hover i,
#header .header-main .header-search-lightbox > a:hover,
#header .header-main .header-search-lightbox > a:hover i {
	color: var(--tl-white) !important;
}

.header-main .nav-icon a:hover,
.header-main .mobile-nav .icon-menu:hover {
	color: var(--tl-pink-deep) !important;
}

.header-nav-main > li > a:hover {
	color: var(--tl-pink) !important;
}

/* Tab lọc, chip chat, nút icon */
.tlnn-tab:hover {
	transform: translateY(-1px);
}

.tlnn-chip:hover {
	border-color: var(--tl-pink-deep);
	color: var(--tl-pink-deep);
	transform: translateY(-1px);
}

.tlnn-icon-btn:hover {
	border-color: var(--tl-pink);
	transform: translateY(-2px);
}

.tlnn-chat__input button:hover {
	background: var(--tl-pink-deep);
	transform: scale(1.06);
}

.tlnn-chat__acts button:hover {
	background: rgba(255, 255, 255, 0.35);
}

.tlnn-fab:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
	transform: translateY(-3px);
}

.tlnn-fab--zalo:hover {
	background: #0057d6;
}

.tlnn-fab--call:hover {
	background: #1c9a41;
}

.tlnn-fab--chat:hover {
	background: var(--tl-pink-deep);
}

.tlnn-soc-icons a:hover {
	transform: translateY(-2px);
}

/* Link chữ có mũi tên */
.tlnn-card a.tlnn-more .tlnn-i {
	transition: transform 0.25s;
}

.tlnn-card a.tlnn-more:hover .tlnn-i {
	transform: translateX(4px);
}

.tlnn-card:not(.is-hl) a.tlnn-more:hover {
	color: var(--tl-pink);
}

.tlnn-card.is-hl a.tlnn-more:hover {
	opacity: 0.85;
}

.tlnn-soc__more {
	transition: letter-spacing 0.25s;
}

.tlnn-soc:hover .tlnn-soc__more {
	letter-spacing: 0.02em;
}

.tlnn-crumbs a:hover,
.tlnn-form__or a:hover,
.tlnn-cc a:hover,
.tlnn-mission-txt a:hover {
	color: var(--tl-pink);
	text-decoration: underline;
}

/* Thẻ: viền chuyển hồng khi hover */
.tlnn-course:hover,
.tlnn-soc:hover,
.tlnn-cc:hover {
	border-color: #f6b3c7;
}

.tlnn-card:not(.is-hl):hover > .col-inner {
	border-color: #f6b3c7;
}

.tlnn-card.is-hl:hover > .col-inner {
	box-shadow: 0 18px 40px rgba(201, 50, 95, 0.3);
}

.tlnn-card .tlnn-ic {
	transition: transform 0.3s;
}

.tlnn-card:hover .tlnn-ic {
	transform: rotate(-8deg) scale(1.06);
}

.tlnn-soc__ic {
	transition: transform 0.3s;
}

.tlnn-soc:hover .tlnn-soc__ic {
	transform: scale(1.08);
}

.tlnn-cc {
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.tlnn-cc:hover {
	box-shadow: var(--tl-shadow);
	transform: translateY(-5px);
}

.tlnn-course__title a {
	transition: color 0.2s;
}

.tlnn-course:hover .tlnn-course__title a {
	color: var(--tl-pink-deep);
}

/* Cảm nhận, con số, ô ai nên học, tính năng chatbot */
.tlnn-tcard > .col-inner,
.tlnn-stat > .col-inner,
.tlnn-who-card > .col-inner,
.tlnn-bot-feat,
.tlnn-persona {
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.tlnn-tcard:hover > .col-inner,
.tlnn-stat:hover > .col-inner,
.tlnn-who-card:hover > .col-inner {
	border-color: #f6b3c7;
	box-shadow: var(--tl-shadow);
	transform: translateY(-5px);
}

.tlnn-bot-feat:hover {
	border-color: #f6b3c7;
	box-shadow: var(--tl-shadow);
	transform: translateX(4px);
}

.tlnn-persona:not(.is-soon):hover {
	border-color: var(--tl-pink);
	transform: translateY(-2px);
}

/* Blog: ảnh zoom, tiêu đề đổi màu */
.tlnn-posts .post-item .box-image img,
.blog-archive .post-item .box-image img {
	transition: transform 0.5s;
}

.tlnn-posts .post-item:hover .box-image img,
.blog-archive .post-item:hover .box-image img {
	transform: scale(1.06);
}

.tlnn-posts .post-item .post-title,
.blog-archive .post-item .post-title {
	transition: color 0.2s;
}

.tlnn-posts .post-item:hover .post-title,
.blog-archive .post-item:hover .post-title {
	color: var(--tl-pink-deep);
}

/* Related / mini item, FAQ, timeline */
.tlnn-mini span {
	transition: color 0.2s;
}

.tlnn-mini:hover span {
	color: var(--tl-pink-deep);
}

.tlnn-mini img {
	transition: transform 0.3s;
}

.tlnn-mini:hover img {
	transform: scale(1.05);
}

.tlnn-faq .accordion-title {
	transition: background-color 0.2s, color 0.2s;
}

.tlnn-faq .accordion-title:hover {
	background: var(--tl-blush);
	color: var(--tl-pink-deep);
}

.tlnn-faq .accordion-title:hover .toggle {
	background: var(--tl-pink);
	color: var(--tl-white);
}

.tlnn-tl-row .img-inner img,
.tlnn-sd-media .img-inner img,
.tlnn-pf-img img,
.tlnn-story-img img {
	transition: transform 0.5s;
}

.tlnn-tl-row .img:hover .img-inner img {
	transform: scale(1.05);
}

.tlnn-sd-media:hover .img-inner img {
	transform: scale(1.04);
}

.widget-area .widget a {
	transition: color 0.2s;
}

.widget-area .widget a:hover {
	color: var(--tl-pink);
}

.tagcloud a:hover {
	border-color: var(--tl-pink);
	background: var(--tl-pink);
	color: var(--tl-white);
}

/* Thiết bị cảm ứng: không nhấc thẻ khi chạm */
@media (hover: none) {
	.tlnn-course:hover,
	.tlnn-soc:hover,
	.tlnn-cc:hover,
	.tlnn-card:hover > .col-inner,
	.tlnn-tcard:hover > .col-inner,
	.tlnn-stat:hover > .col-inner,
	.tlnn-who-card:hover > .col-inner,
	.tlnn-bot-feat:hover {
		transform: none;
	}
}

/* ==========================================================================
   21. Hiệu ứng hiện dần (chỉ áp dụng khi JS thêm .is-pre)
   ========================================================================== */
.is-pre {
	opacity: 0.001;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.tlnn-card.is-pre > .col-inner {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tlnn-float-card,
	.tlnn-fab--chat::before,
	.tlnn-typing i {
		animation: none;
	}

	.is-pre {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   22. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.tlnn-courses,
	.tlnn-courses.cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tlnn-social,
	.tlnn-contact-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tlnn-chat-page {
		grid-template-columns: 1fr;
	}

	.tlnn-personas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 849px) {
	.tlnn-hero-txt > .col-inner {
		padding-bottom: 8px;
	}

	.tlnn-hero-media > .col-inner {
		max-width: 340px;
	}

	.tlnn-float-card.fc1 {
		left: -8px;
	}

	.tlnn-float-card.fc2 {
		right: -8px;
	}

	.tlnn-usp .col:nth-child(3) .tlnn-usp-item {
		border-left: 0;
		padding-left: 6px;
	}

	.tlnn-usp .col:nth-child(-n+2) .tlnn-usp-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	}

	.tlnn-journey-row::before {
		display: none;
	}

	.tlnn-journey-row > .col:nth-child(n) .tlnn-journey {
		max-width: 100%;
		transform: none;
	}

	.tlnn-journey-row > .col {
		padding-bottom: 20px;
	}

	.tlnn-journey .caption {
		margin-top: 8px;
		font-size: 12px;
	}

	.tlnn-tl-row::before {
		left: 8px;
		transform: none;
	}

	.tlnn-tl-row::after {
		top: 18px;
		left: 2px;
		transform: none;
	}

	.tlnn-tl-row > .col {
		padding-left: 36px;
	}

	.tlnn-tl-row > .col > .col-inner {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.tlnn-tl-row.is-rev > .col:first-child {
		order: 2;
	}

	.tlnn-tl-row .tlnn-tl-txt {
		text-align: left !important;
	}

	.tlnn-cd-side > .col-inner,
	.tlnn-cd-aside {
		position: static;
	}

	.tlnn-buybar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: space-between;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--tl-white);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
	}

	.tlnn-buybar .button {
		margin: 0;
	}

	.single-khoa_hoc #footer {
		padding-bottom: 70px;
	}

	.tlnn-fabs.has-buybar {
		bottom: 84px;
	}

	.tlnn-cta-band > .col-inner {
		padding: 32px 24px;
	}
}

@media (max-width: 549px) {
	.tlnn-courses,
	.tlnn-courses.cols-2,
	.tlnn-courses.cols-4,
	.tlnn-social,
	.tlnn-contact-cards,
	.tlnn-personas {
		grid-template-columns: 1fr;
	}

	.tlnn-checks-box .tlnn-checks,
	.tlnn-learn .tlnn-checks,
	.tlnn-field-row {
		grid-template-columns: 1fr;
	}

	.tlnn-usp-item {
		padding: 14px 2px;
	}

	.tlnn-usp .col + .col .tlnn-usp-item {
		padding-left: 10px;
	}

	.tlnn-usp-item .ic {
		width: 36px;
		height: 36px;
	}

	.tlnn-form {
		padding: 26px 18px;
	}

	.tlnn-chat {
		height: 520px;
	}

	.tlnn-chat--float {
		right: 12px;
		bottom: 84px;
		height: calc(100vh - 120px);
	}

	.tlnn-fab-tip {
		display: none;
	}

	.tlnn-fab {
		width: 46px;
		height: 46px;
	}

	.tlnn-fab--chat {
		width: 54px;
		height: 54px;
	}

	.tlnn-banner::after {
		display: none;
	}

	.tlnn-exp {
		right: 10px;
	}

	.header-main .header-search > a,
	.header-main .header-search-lightbox > a {
		width: 36px;
		height: 36px;
	}

	#header .header-button-2 .button {
		min-height: 34px;
		padding: 0 12px;
		font-size: 13px;
		line-height: 32px;
	}

	.tlnn-author > .col-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
}