/**
 * CMP LMS — Layout (Tutor Starter base + CMP structure).
 *
 * Header/nav dùng style mặc định Tutor Starter (Customizer + style.min.css).
 *
 * @package CMP_LMS
 */

/* —— Typography (Vietnamese, Tutor Starter rhythm) —— */
body.cmp-tutor-starter-layout,
body.cmp-tutor-starter-layout button,
body.cmp-tutor-starter-layout input,
body.cmp-tutor-starter-layout select,
body.cmp-tutor-starter-layout textarea {
	font-family: var(--ts-font-body);
	color: #344050;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.cmp-tutor-starter-layout button.tutor-enroll-course-button {
	color: var(--ts-enroll-button-text);
}
ul.tutor-dashboard-permalinks {
    list-style: none;
	margin-top: 40px;
}
body.cmp-tutor-starter-layout h1,
body.cmp-tutor-starter-layout h2,
body.cmp-tutor-starter-layout h3,
body.cmp-tutor-starter-layout h4,
body.cmp-tutor-starter-layout h5,
body.cmp-tutor-starter-layout h6 {
	font-family: var(--ts-font-heading);
	color: var(--ts-text-strong);
}
body.cmp-tutor-starter-layout h3.cmp-footer__heading {
	color: var(--ts-text-footer);
}
body.cmp-tutor-starter-layout .cmp-lms-shell {
	width: 100%;
}

body.cmp-tutor-starter-layout .navbar-brand .cmp-nav-brand__img {
	height: 40px;
	width: auto;
	max-width: min(200px, 42vw);
	object-fit: contain;
}

/* —— Fixed site header / navbar #0066ff ——
   Nền dùng gradient rất nhẹ (cùng tông primary, chỉ đậm hơn ở đáy) để có chiều
   sâu thay vì một mảng phẳng, và box-shadow rộng/mềm hơn để tách hẳn khỏi nội
   dung/ảnh hero ngay bên dưới — trước đó viền quá mỏng nên header trông dính
   liền vào ảnh, thiếu phân cấp. */
body.cmp-tutor-starter-layout.cmp-fixed-header header.header-default,
body.cmp-tutor-starter-layout.cmp-fixed-header header.header-transparent,
body.cmp-tutor-starter-layout.cmp-fixed-header header.header-sticky.sticky-on,
body.cmp-tutor-starter-layout.cmp-fixed-header header.header-transparent.is-sticky {
	position: fixed !important;
	top: var(--cmp-wp-admin-bar-height, 0px) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: var(--cmp-header-fixed-z, 1020);
	background: linear-gradient(180deg, var(--ts-primary, #0066ff) 0%, var(--ts-primary-dark, #0052cc) 130%) !important;
	border-bottom: none !important;
	box-shadow: 0 6px 24px rgba(10, 30, 90, 0.22);
}

body.cmp-tutor-starter-layout.cmp-fixed-header .header-default .navbar,
body.cmp-tutor-starter-layout.cmp-fixed-header .header-transparent .navbar {
	min-height: var(--cmp-header-height);
	background: transparent !important;
	overflow: visible;
}

@media (min-width: 992px) {
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav {
		display: flex !important;
		position: static !important;
		left: auto !important;
		top: auto !important;
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
		background: transparent !important;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0;
		width: auto;
		height: auto;
		box-shadow: none;
		overflow: visible;
	}

	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-toggler {
		display: none !important;
	}
}

body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav {
	gap: 2px;
}

/* Mục nav: bỏ gạch chân mảnh (dễ bị chìm trên nền màu, trông "trơ") — thay
   bằng pill nền trắng mờ khi hover/active, rõ ràng và hiện đại hơn. */
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li > a,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li > a:visited,
body.cmp-tutor-starter-layout.cmp-fixed-header .header-transparent .navbar-nav > li > a {
	position: relative;
	display: inline-block;
	color: var(--cmp-header-fg, #fff) !important;
	font-family: var(--ts-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	padding: 9px 16px;
	border-radius: 999px;
	background: transparent;
	filter: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li > a:hover,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li > a:focus,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li:hover > a {
	color: var(--cmp-header-fg, #fff) !important;
	background: rgba(255, 255, 255, 0.14);
	opacity: 1 !important;
	text-decoration: none !important;
	filter: none !important;
	text-shadow: none !important;
	font-weight: 600;
	padding: 9px 16px;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li.current-menu-item > a,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li.current-menu-ancestor > a {
	color: var(--ts-primary, #0066ff) !important;
	background: #fff;
	opacity: 1 !important;
	text-decoration: none !important;
	filter: none !important;
	text-shadow: none !important;
	font-weight: 600;
	padding: 9px 16px;
}

/* Tutor Starter core (style.min.css) tự vẽ 1 gạch chân ::after cho mục nav
   đang active với "width:51.6% !important" riêng, không phụ thuộc theme con —
   nếu không tắt hẳn ở đây, gạch chân cũ đó vẫn lòi ra bên dưới/bên phải pill
   nền trắng mới thêm ở trên vì 2 hệ thống chỉ báo chồng lên nhau. */
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li:not(.icon) > a::after,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .sub-menu a::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
	background: none !important;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .sub-menu {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	padding: 8px 0;
	min-width: 220px;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .sub-menu a {
	color: #1e293b !important;
	font-family: var(--ts-font-body);
	font-size: 0.9rem !important;
	font-weight: 500;
	padding: 11px 20px !important;
	text-decoration: none !important;
	filter: none !important;
	text-shadow: none !important;
	background: transparent;
	transition: color 0.15s ease, background-color 0.15s ease;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .sub-menu a:hover,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .sub-menu a:focus,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .sub-menu .current-menu-item > a {
	color: var(--ts-primary, #0066ff) !important;
	background: #eef3ff;
	padding: 11px 20px !important;
	filter: none !important;
}

@media (max-width: 991px) {
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li > a,
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li > a:visited,
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li > a:hover,
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li > a:focus,
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li.current-menu-item > a,
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li.current-menu-ancestor > a,
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav > li:hover > a {
		color: #1e293b !important;
		background: transparent;
		border-radius: 0;
		filter: none !important;
		padding: 8px 0;
	}

	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .menu-item a:hover,
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .menu-item a:focus,
	body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-nav .menu-item.current-menu-item > a {
		color: var(--ts-primary, #0066ff) !important;
		background: #eef3ff;
		padding-left: 0;
	}
}

body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-toggler .toggle-icon span,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-toggler .toggle-icon::before,
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-toggler .toggle-icon::after {
	background: var(--cmp-header-fg, #fff) !important;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .cart-contents,
body.cmp-tutor-starter-layout.cmp-fixed-header .cart-contents svg,
body.cmp-tutor-starter-layout.cmp-fixed-header .btn-cart,
body.cmp-tutor-starter-layout.cmp-fixed-header .tutor_native_cart_count {
	color: var(--cmp-header-fg, #fff) !important;
	fill: currentColor;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .search-field input {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--cmp-header-fg, #fff);
}

body.cmp-tutor-starter-layout.cmp-fixed-header .search-field input::placeholder {
	color: var(--cmp-header-fg-muted);
}

body.cmp-tutor-starter-layout.cmp-fixed-header .btn-getstarted {
	background: #fff !important;
	color: var(--cmp-header-bg, #0066ff) !important;
	border-color: #fff !important;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .btn-getstarted:hover {
	background: var(--ts-surface-soft) !important;
	color: var(--ts-primary-dark) !important;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-submenu span[role="button"],
body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-landing-explore span {
	color: var(--cmp-header-fg, #fff) !important;
}

/* Khu vực tài khoản (avatar + tên + mũi tên): trước đó chỉ là chữ/icon nổi
   trực tiếp trên nền xanh, không có điểm tựa thị giác nào — bọc lại thành
   một "chip" bo tròn, có nền mờ + viền quanh avatar, và một đường phân cách
   mảnh trước đó để tách hẳn khỏi menu điều hướng. */
body.cmp-tutor-starter-layout.cmp-fixed-header .navbar-utils {
	gap: 10px;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-menu-items {
	position: relative;
	padding-left: 18px;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-menu-items::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 24px;
	background: rgba(255, 255, 255, 0.25);
}

body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-submenu {
	border-radius: 999px;
	padding: 4px 14px 4px 4px;
	transition: background-color 0.18s ease;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-submenu:hover,
body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-submenu:focus-within {
	background: rgba(255, 255, 255, 0.14);
}

body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-submenu .tutor-avatar {
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-submenu span[role="button"] {
	font-weight: 600;
	font-size: 0.9375rem !important;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .tutor-header-profile-submenu svg {
	opacity: 0.85;
}

/* Dropdown "admin ▾" — bản làm lại thứ 3.
   Bản "dính liền header" (thứ 2) dùng position:fixed neo theo lề phải
   VIEWPORT — sai vì Tutor Starter đổi thứ tự cột trong .navbar theo biến thể
   navbar-left/-center/-right (CSS grid grid-auto-flow:column), nên khu vực
   tài khoản không phải lúc nào cũng nằm ở lề phải — khi nó rơi sang cột
   trái, box vẫn neo cứng bên phải viewport nên "trôi" hẳn khỏi trigger,
   không cân đối chút nào (đúng như phản hồi).
   Fix đúng gốc rễ: bám vào .tutor-header-profile-menu-items — ancestor bọc
   trực tiếp avatar/tên, đã có sẵn position:relative từ theme gốc — nên dù
   trigger rơi vào cột nào của grid, dropdown luôn bung ra ĐÚNG ngay dưới nó.
   Thêm mũi tên nhỏ (::before) chỉ thẳng lên avatar để rõ ràng đây là menu
   của mục đó, không phải một box rời rạc lơ lửng. */
body.cmp-tutor-starter-layout .tutor-header-submenu {
	display: block !important;
	position: absolute !important;
	top: calc(100% + 14px) !important;
	right: 0 !important;
	left: auto !important;
	width: 300px;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--ts-surface, #fff) !important;
	border: 1px solid var(--ts-border, #e3e6eb) !important;
	border-radius: var(--ts-radius-md, 12px);
	box-shadow: var(--ts-shadow-md, 0 8px 28px rgba(30, 30, 44, 0.08)), 0 4px 10px rgba(15, 40, 120, 0.1);
	overflow: visible;
	z-index: 20;
}

/* Mũi tên chỉ lên trigger — hình vuông 12x12 xoay 45°, chỉ 2 cạnh trên/trái
   có viền để trông như phần nhô ra liền khối của box bên dưới. */
body.cmp-tutor-starter-layout .tutor-header-submenu::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 22px;
	width: 12px;
	height: 12px;
	background: var(--ts-surface, #fff);
	border-left: 1px solid var(--ts-border, #e3e6eb);
	border-top: 1px solid var(--ts-border, #e3e6eb);
	transform: rotate(45deg);
}

@media (max-width: 380px) {
	body.cmp-tutor-starter-layout .tutor-header-submenu {
		width: calc(100vw - 24px);
	}
}

body.cmp-tutor-starter-layout .cmp-account-menu {
	padding: 18px 20px 12px;
}

body.cmp-tutor-starter-layout .cmp-account-menu__name {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--ts-text-strong, #0f172a);
	padding-bottom: 14px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--ts-border, #e3e6eb);
}

/* Danh sách 3 mục điều hướng xếp dọc — icon bên trái, nhãn bên phải, mỗi
   mục 1 hàng riêng (đã bỏ kiểu lưới 3 cột ngang trước đó theo yêu cầu). */
body.cmp-tutor-starter-layout .cmp-account-menu__grid {
	list-style: none;
	margin: 0 0 8px;
	padding: 4px 0;
}

body.cmp-tutor-starter-layout .cmp-account-menu__grid > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	margin: 2px 0;
	border-radius: var(--ts-radius-sm, 8px);
	color: var(--ts-text-strong, #0f172a);
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.cmp-tutor-starter-layout .cmp-account-menu__grid > li > a .tutor-dashboard-menu-item-icon {
	color: var(--ts-muted, #64748b);
	font-size: 16px;
	transition: color 0.15s ease;
}

body.cmp-tutor-starter-layout .cmp-account-menu__label {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
}

body.cmp-tutor-starter-layout .cmp-account-menu__grid > li > a:hover,
body.cmp-tutor-starter-layout .cmp-account-menu__grid > li > a:focus-visible {
	background: var(--ts-primary-soft, rgba(0, 102, 255, 0.1));
	color: var(--ts-primary, #0066ff);
}

body.cmp-tutor-starter-layout .cmp-account-menu__grid > li > a:hover .tutor-dashboard-menu-item-icon,
body.cmp-tutor-starter-layout .cmp-account-menu__grid > li > a:focus-visible .tutor-dashboard-menu-item-icon {
	color: var(--ts-primary, #0066ff);
}

/* "Đăng xuất" — hàng riêng, đầy đủ chiều rộng, tách khỏi lưới phía trên
   bằng viền + tông đỏ khi hover (hành động khác nhóm điều hướng còn lại). */
body.cmp-tutor-starter-layout .cmp-account-menu__footer {
	border-top: 1px solid var(--ts-border, #e3e6eb);
	margin: 0 -20px;
	padding: 4px 20px 4px;
}

body.cmp-tutor-starter-layout .cmp-account-menu__footer > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	margin: 4px 0;
	border-radius: var(--ts-radius-sm, 8px);
	color: var(--ts-text-strong, #0f172a);
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.cmp-tutor-starter-layout .cmp-account-menu__footer .tutor-dashboard-menu-item-icon {
	color: var(--ts-muted, #64748b);
	font-size: 16px;
	transition: color 0.15s ease;
}

body.cmp-tutor-starter-layout .cmp-account-menu__footer > a:hover,
body.cmp-tutor-starter-layout .cmp-account-menu__footer > a:focus-visible {
	background: rgba(220, 38, 38, 0.08);
	color: #dc2626;
}

body.cmp-tutor-starter-layout .cmp-account-menu__footer > a:hover .tutor-dashboard-menu-item-icon,
body.cmp-tutor-starter-layout .cmp-account-menu__footer > a:focus-visible .tutor-dashboard-menu-item-icon {
	color: #dc2626;
}

body.cmp-tutor-starter-layout.cmp-fixed-header .site-content {
	/* html.admin-bar đã margin-top — chỉ bù chiều cao header fixed */
	padding-top: var(--cmp-header-height, 72px);
}

/* WP admin bar: header fixed ngay dưới #wpadminbar */
body.admin-bar.cmp-fixed-header {
	--cmp-wp-admin-bar-height: 32px;
	--cmp-header-stack-top: calc(var(--cmp-wp-admin-bar-height) + var(--cmp-header-height, 72px));
}

@media screen and (max-width: 782px) {
	body.admin-bar.cmp-fixed-header {
		--cmp-wp-admin-bar-height: 46px;
	}
}

body.cmp-lms-canvas.cmp-fixed-header {
	--cmp-header-height: 0px;
}

body.cmp-lms-canvas.cmp-fixed-header .site-content {
	padding-top: 0;
}

/* Tutor LMS buttons — align with BizNext button style (bo góc 12px, không
   còn pill 999px, xem cmp-tutor-starter-tokens.css --ts-radius-btn) */
body.cmp-tutor-starter-layout .tutor-btn-primary,
body.cmp-tutor-starter-layout .tutor-button-primary,
body.cmp-tutor-starter-layout .btn-getstarted {
	border-radius: var(--ts-radius-btn);
}

/* —— CMP footer (Tutor Starter dark footer palette) —— */
.cmp-footer {
	background: var(--ts-footer-bg);
	color: var(--ts-footer-text);
	font-size: 0.875rem;
	line-height: 1.6;
	margin-top: 0;
}

.cmp-footer__container {
	/* Khớp max-width/padding với .navbar ở header (tutorstarter: max-width 1280px,
	   padding 17px 30px) để logo "BizNext" ở footer thẳng hàng theo chiều dọc với
	   logo ở header. */
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 30px;
}

.cmp-footer__top {
	padding: 28px 0 20px;
}

.cmp-footer__brand-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.cmp-footer__logo img {
	height: 36px;
	width: auto;
	display: block;
}

.cmp-footer__operated {
	opacity: 0.85;
	font-size: 0.8125rem;
	padding-left: 16px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.cmp-footer__fpt-logo {
	height: 24px;
	width: auto;
}

.cmp-footer__fpt-text {
	display: none;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
}

.cmp-footer__fpt-text.is-visible {
	display: inline;
}

.cmp-footer__divider {
	border: 0;
	height: 1px;
	margin: 0;
	background: rgba(255, 255, 255, 0.14);
}

.cmp-footer__main {
	padding: 40px 0 44px;
}

.cmp-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1.2fr 1fr 1fr 0.9fr;
	gap: 32px 40px;
}

.cmp-footer__col {
	min-width: 0;
}

.cmp-footer__heading {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--ts-footer-text);
	letter-spacing: 0.01em;
}

.cmp-footer__text {
	margin: 0 0 12px;
	opacity: 0.85;
}

.cmp-footer__text--small {
	font-size: 0.8125rem;
	line-height: 1.6;
}

.cmp-footer__text--icon {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.cmp-footer__text a {
	color: var(--ts-footer-text);
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.cmp-footer__text a:hover {
	color: #fff;
	opacity: 1;
}

.cmp-footer__icon {
	flex-shrink: 0;
	margin-top: 2px;
	opacity: 0.75;
}

.cmp-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.cmp-footer__social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--ts-footer-text);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cmp-footer__social-btn:hover {
	background: var(--ts-surface);
	color: var(--ts-primary);
	transform: translateY(-2px);
}

.cmp-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cmp-footer-links li {
	margin-bottom: 10px;
}

.cmp-footer-links a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.875rem;
	font-family: var(--ts-font-body);
	transition: color 0.15s ease, opacity 0.15s ease;
}

.cmp-footer-links a:hover,
.cmp-footer-links a:focus {
	color: #fff;
	text-decoration: none;
	opacity: 1;
}

.cmp-footer__bottom {
	padding: 18px 0;
	text-align: center;
}

.cmp-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.75;
	letter-spacing: 0.01em;
}

/* Blog archive */
.cmp-archive--blog {
	padding: 48px 0 64px;
}

.cmp-archive__header {
	margin-bottom: 32px;
}

.cmp-archive__title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0;
	color: var(--ts-text-strong);
}

.cmp-archive__pagination {
	margin-top: 40px;
	text-align: center;
}

.cmp-archive__pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cmp-archive__pagination a,
.cmp-archive__pagination span {
	padding: 8px 14px;
	border-radius: var(--ts-radius-sm);
	border: 1px solid var(--ts-border);
	text-decoration: none;
	color: var(--ts-text-strong);
}

.cmp-archive__pagination .current {
	background: var(--ts-primary);
	color: var(--ts-surface);
	border-color: var(--ts-primary);
}

/* Tutor Starter footer widgets — show when used alongside CMP footer on other templates */
body.cmp-tutor-starter-layout .footer-widgets {
	background: var(--ts-footer-bg);
}

/* —— Floating buttons —— */
.cmp-floating {
	position: fixed;
	right: 16px;
	bottom: 24px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cmp-floating__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	text-decoration: none;
	font-size: 0.6875rem;
	font-weight: 700;
	/* Viền sáng quanh mọi nút để luôn nổi trên mọi nền (kể cả nền footer cùng màu) */
	box-shadow: var(--ts-shadow-md), 0 0 0 2px rgba(255, 255, 255, 0.85);
	transition: transform 0.15s, box-shadow 0.15s;
}

.cmp-floating__btn:hover {
	transform: translateY(-2px);
	animation-play-state: paused;
}

.cmp-floating__btn--phone,
.cmp-floating__btn--messenger {
	background: var(--ts-primary);
	color: var(--ts-surface);
}

.cmp-floating__btn--zalo {
	background: var(--ts-surface);
	color: #0068ff;
}

.cmp-floating__btn--top {
	background: var(--ts-primary-dark);
	color: var(--ts-surface);
}

/* .cmp-floating__btn--messenger đóng vai trò icon "tin nhắn" khi đã đăng
   nhập (mở popup chat nội bộ) — cần position:relative để badge số tin chưa
   đọc định vị đúng theo góc của chính nút này, không dùng riêng
   .cmp-floating__btn--chat nữa (đã gộp làm 1, xem floating-actions.php). */
.cmp-floating__btn--messenger {
	position: relative;
}

.cmp-floating__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #dc2626;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 18px;
	box-shadow: 0 0 0 2px var(--ts-surface, #fff);
}

.cmp-floating__badge[hidden] {
	display: none;
}

/* Hiệu ứng rung rinh nhẹ định kỳ để thu hút chú ý — chỉ áp cho nhóm liên hệ
   (phone/Zalo/Messenger), không áp cho nút lên-đầu-trang. Lặp mỗi 3.5s, phần
   lắc chiếm ~1s cuối chu kỳ nên rõ ràng, dễ nhận ra hơn là chỉ nhấp nháy chớp nhoáng. */
@keyframes cmp-float-wiggle {
	0%, 74%, 100% {
		transform: rotate(0deg) scale(1);
	}
	79% {
		transform: rotate(-13deg) scale(1.1);
	}
	83% {
		transform: rotate(11deg) scale(1.1);
	}
	87% {
		transform: rotate(-9deg) scale(1.06);
	}
	91% {
		transform: rotate(6deg) scale(1.03);
	}
	96% {
		transform: rotate(-3deg) scale(1.01);
	}
}

.cmp-floating__btn--phone,
.cmp-floating__btn--zalo,
.cmp-floating__btn--messenger {
	animation: cmp-float-wiggle 3.5s ease-in-out infinite;
}

.cmp-floating__btn--zalo {
	animation-delay: 0.15s;
}

.cmp-floating__btn--messenger {
	animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	.cmp-floating__btn--phone,
	.cmp-floating__btn--zalo,
	.cmp-floating__btn--messenger {
		animation: none;
	}
}

@media (max-width: 992px) {
	.cmp-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 24px;
	}

	.cmp-footer__col--contact {
		grid-column: 1 / -1;
	}
}

@media (max-width: 576px) {
	.cmp-footer__container {
		padding: 0 16px;
	}

	.cmp-footer__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cmp-footer__bottom {
		padding: 16px 0;
	}

	.cmp-floating {
		right: 10px;
		bottom: 16px;
	}

	.cmp-floating__btn {
		width: 44px;
		height: 44px;
	}
}