/*
Theme Name: Magic English
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*
 * Design-system map (edit here first):
 * 1) :root tokens
 * 2) Type scale (h1–h3) + .me-sec-title + .me-text-primary + .me-eyebrow*
 * 3) Links
 * 4) Flatsome buttons (.button.primary / .secondary.is-outline / .me-button--gradient)
 * 5) Shared section utilities (below)
 * Tokens + classes: .specify/memory/ui-class-registry.md — do not invent classes.
 */

/* -------------------------------------------------------------------------
   1) Tokens
   ------------------------------------------------------------------------- */
:root {
	--gold: #FFD400; /* legacy alias */
	--black: #000000; /* legacy alias */
	--bg-warm: #FFF8E1;

	--me-ink: #0A0A0A;
	--me-muted: #5C5C5C;
	--me-muted-2: #757575;
	--me-bg-warm: #FFF8E1;
	--me-bg-hero: #FDFBF7;
	--me-bg-soft: #FAFAFA;
	--me-radius-btn: 9999px;
	--me-radius-card: 16px;
	--me-pill-pte: #F5A623;
	--me-pill-det: #12A06A;
	--me-pill-career: #7B5CFF;
	--me-gradient-cta: linear-gradient(90deg, #fff8d6 8%, #ffe976 41%, #fdd400 81%);
	/* CTA band: horizontal cream → gold (Figma 1074:320) */
	--me-gradient-cta-band: linear-gradient(90deg, #fff8d6 8%, #ffe976 41%, #fdd400 81%);
	/* Partners: vertical gold → white (Figma 1227:3) */
	--me-gradient-partners: linear-gradient(180deg, #ffd400 0%, #ffffff 100%);
	--me-fs-h1: clamp(2rem, 4vw, 3rem);
	--me-fs-h2: clamp(1.75rem, 3vw, 2.5rem);
	--me-fs-h3: clamp(1.25rem, 2vw, 1.5rem);
	--me-lh-title: 1.15;
	/* Header nav (Figma 1280:1277) */
	--me-nav-fg: #424242;
	--me-nav-size: 14.5px;
	--me-nav-lh: 21.75px;
	--me-nav-weight: 600;
	/* Section rhythm — Figma Trang Chu inter-frame gap ≈ 100px → 50px each side */
	--me-section-pad-y: 50px;
	--me-section-pad-y-lg: 64px;
	/* WPForms defaults (Figma REGISTER form-card 1008:706) */
	--me-form-input-h: 47px;
	--me-form-radius: 10px;
	--me-form-border: #e8e8e8;
	--me-form-border-focus: var(--fs-color-primary);
	--me-form-placeholder: #9e9e9e;
	--me-form-label: var(--me-ink);
	/* Footer socials (Figma footer socials row) */
	--me-footer-social-bg: #2a2a2a;
	--me-footer-social-fg: #c8c8c8;
	--me-footer-social-size: 40px;
	--me-footer-social-gap: 10px;
}

/* -------------------------------------------------------------------------
   2) Type scale + shared titles / eyebrows / accent
   ------------------------------------------------------------------------- */
.page-wrapper h1,
h1 {
	font-size: var(--me-fs-h1);
	line-height: var(--me-lh-title);
	font-weight: 800;
	color: var(--me-ink);
	letter-spacing: -0.02em;
}

.page-wrapper h2,
h2,
.me-sec-title {
	font-size: var(--me-fs-h2);
	line-height: var(--me-lh-title);
	font-weight: 800;
	color: var(--me-ink);
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
}

.page-wrapper h3,
h3 {
	font-size: var(--me-fs-h3);
	line-height: 1.25;
	font-weight: 700;
	color: var(--me-ink);
}

.me-sec-title--center {
	text-align: center;
}

.me-text-primary {
	color: var(--fs-color-primary) !important;
}

.me-text-white,
.text-white {
	color: #fff !important;
}

.me-text-ink,
.text-ink {
	color: var(--me-ink) !important;
}

.me-text-muted {
	color: var(--me-muted-2) !important;
}

/* Inline highlight pill in titles (Figma span.hl-box) — black bg + white text */
.me-hl-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.12em 0.55em 0.18em;
	border-radius: 9999px;
	background: var(--me-ink);
	color: var(--gold) !important;
	line-height: 1.25;
	vertical-align: middle;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.me-sec-title .me-hl-box {
	font-weight: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}

.me-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 16px;
	border-radius: 9999px;
	background: var(--fs-color-primary);
	color: var(--me-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0 0 12px;
}

.me-eyebrow--pte {
	background: var(--me-pill-pte);
	color: #fff;
}

.me-eyebrow--det {
	background: var(--me-pill-det);
	color: #fff;
}

.me-eyebrow--career {
	background: var(--me-pill-career);
	color: #fff;
}

.me-sec-sub {
	color: var(--me-muted-2);
	font-size: 16.5px;
	line-height: 1.65;
	margin: 0 0 1.5em;
}

.me-sec-head {
	margin-bottom: 2.75rem;
}

.me-sec-head--center {
	text-align: center;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.75rem;
}

.me-sec-head--center .me-sec-sub {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

/* -------------------------------------------------------------------------
   3) Links
   ------------------------------------------------------------------------- */
.entry-content a:not(.button):not(.me-pill),
.col a:not(.button):not(.me-pill) {
	color: var(--me-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-content a:not(.button):hover,
.col a:not(.button):hover {
	color: var(--me-ink);
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
   4) Flatsome buttons — brand mapping (+ gradient modifier)
   Figma CTAs are fully rounded pills — force radius over UX Builder inline styles
   ------------------------------------------------------------------------- */
.button,
a.button,
button.button,
input[type="submit"].button,
.header .button,
.wpforms-container button.wpforms-submit,
.wpforms-container .wpforms-submit,
.wpforms-container input[type="submit"].wpforms-submit {
	border-radius: var(--me-radius-btn) !important;
}

.button.primary,
input[type="submit"].primary {
	background-color: var(--fs-color-primary);
	border-color: var(--fs-color-primary);
	color: var(--me-ink);
}

.button.primary:hover,
.button.primary:focus,
input[type="submit"].primary:hover {
	background-color: var(--fs-color-primary);
	border-color: var(--fs-color-primary);
	color: var(--me-ink);
	box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.08);
	opacity: 1;
}

.button.secondary {
	background-color: var(--fs-color-secondary);
	border-color: var(--fs-color-secondary);
	color: #fff;
}

.button.secondary.is-outline {
	background-color: transparent;
	border-color: var(--fs-color-secondary);
	color: var(--me-ink);
}

.button.secondary.is-outline:hover,
.button.secondary.is-outline:focus {
	background-color: var(--fs-color-secondary);
	border-color: var(--fs-color-secondary);
	color: #fff;
	box-shadow: none;
}

.button.me-button--gradient,
.button.primary.me-button--gradient {
	background-image: var(--me-gradient-cta);
	background-color: var(--fs-color-primary);
	border-color: transparent;
	color: var(--me-ink);
	box-shadow: 0 4px 10px rgba(255, 212, 0, 0.25);
}

.button.me-button--gradient:hover,
.button.me-button--gradient:focus,
.button.primary.me-button--gradient:hover,
.button.primary.me-button--gradient:focus {
	background-image: var(--me-gradient-cta);
	color: var(--me-ink);
	box-shadow: 0 4px 14px rgba(255, 212, 0, 0.35);
	opacity: 1;
}

.header .nav > li > a.button.primary:hover,
.header .nav > li > a.button.primary:focus {
	color: var(--me-ink);
}

/* Header primary nav — Figma a.nav-link (Plus Jakarta SemiBold 14.5 / #424242) */
.header-main .nav > li > a:not(.button),
.header-main .header-nav-main > li > a:not(.button) {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: var(--me-nav-size);
	font-weight: var(--me-nav-weight);
	line-height: var(--me-nav-lh);
	letter-spacing: 0;
	text-transform: none;
	color: var(--me-nav-fg);
}

.header-main .nav > li > a:not(.button):hover,
.header-main .nav > li > a:not(.button):focus,
.header-main .nav > li.active > a:not(.button),
.header-main .nav > li.current-menu-item > a:not(.button) {
	color: var(--me-nav-fg);
}

/* -------------------------------------------------------------------------
   5) Shared section + hero + landing utilities
   Section padding uses !important so Flatsome UX Builder padding="0px"
   inline/element styles cannot collapse the Figma ~100px inter-section gap.
   ------------------------------------------------------------------------- */
.me-section {
	padding-top: var(--me-section-pad-y) !important;
	padding-bottom: var(--me-section-pad-y) !important;
}

.me-section--hero {
	background-color: var(--me-bg-hero);
	padding-top: 56px !important;
	padding-bottom: 64px !important;
}

.me-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.me-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid rgba(10, 10, 10, 0.08);
	border-radius: 999px;
	background: #fff;
	color: var(--me-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.me-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.me-pill--pte .me-pill__dot { background: var(--me-pill-pte); }
.me-pill--det .me-pill__dot { background: var(--me-pill-det); }
.me-pill--career .me-pill__dot { background: var(--me-pill-career); }

.me-lead {
	color: var(--me-muted);
	font-size: 16px;
	line-height: 1.6;
	max-width: 34em;
	margin-bottom: 1.25em;
}

.me-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 28px;
}

.me-hero__actions .button {
	margin: 0;
}

.me-hero__proof {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--me-ink);
	font-size: 14px;
	line-height: 1.4;
}

.me-hero__avatars {
	display: flex;
	align-items: center;
}

.me-hero__avatars img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid #fff;
	object-fit: cover;
	margin-left: -10px;
	background: #ddd;
}

.me-hero__avatars img:first-child {
	margin-left: 0;
}

.me-hero__media {
	position: relative;
}

.me-hero__collage {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.me-hero__media-stack {
	display: block;
	position: relative;
}

.me-hero__media-note {
	margin: 0;
}

.me-stat-card--pte {
	position: absolute;
	left: 0;
	top: 8%;
	z-index: 2;
}

.me-stat-card--det {
	position: absolute;
	right: 0;
	top: 42%;
	z-index: 2;
}

.me-stat-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08);
	max-width: 220px;
}

.me-stat-card__score {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--fs-color-primary);
	color: var(--me-ink);
	font-weight: 800;
	font-size: 14px;
	flex: 0 0 auto;
}

.me-stat-card__score.is-det {
	background: var(--me-pill-det);
	color: #fff;
}

.me-stat-card__label {
	font-size: 12px;
	line-height: 1.35;
	color: var(--me-ink);
	margin: 0;
}

/* --- Stat band --- */
.me-section--stats {
	padding-top: var(--me-section-pad-y) !important;
	padding-bottom: var(--me-section-pad-y) !important;
}

/* Card chrome on .col-inner only — never put me-stat-col on .col (kills Flatsome padding) */
.me-section--stats .col > .col-inner {
	background: #fff;
	border-radius: var(--me-radius-card);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	padding: 28px 16px;
	text-align: center;
	height: 100%;
}

.me-stat-col__num {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--me-ink);
	margin: 0 0 8px;
}

.me-stat-col__lbl {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--me-muted-2);
	line-height: 1.5;
}

/* --- Certs --- */
.me-section--certs {
	background: var(--me-bg-soft);
	padding-top: var(--me-section-pad-y-lg) !important;
	padding-bottom: var(--me-section-pad-y-lg) !important;
}

.me-section--certs .col > .col-inner {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	padding: 28px 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.me-cert-col__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0;
}

.me-cert-col__tag {
	font-size: 13px;
	font-weight: 600;
	color: var(--me-muted-2);
	margin: 0;
}

.me-cert-col__desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--me-muted-2);
	margin: 0;
	flex: 1 1 auto;
}

.me-cert-col ul {
	margin: 0 0 12px;
	padding-left: 1.1em;
	color: var(--me-ink);
	font-size: 14px;
	line-height: 1.55;
}

/* --- Score --- */
.me-section--score {
	padding-top: var(--me-section-pad-y-lg) !important;
	padding-bottom: var(--me-section-pad-y-lg) !important;
}

.me-score-conversion {
	max-width: 920px;
	margin: 0 auto;
}

.me-score-conversion__card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 24px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.me-score-conversion__head {
	background: var(--me-ink);
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 18px 26px;
}

.me-score-conversion__head-title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: var(--fs-color-primary);
}

.me-score-conversion__head-hint {
	font-size: 12.5px;
	color: #bbb;
}

.me-score-conversion__body {
	padding: 30px 32px 34px;
}

.me-score-conversion__pte-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.me-score-conversion__pte-num {
	font-size: 68px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--me-ink);
}

.me-score-conversion__pte-max {
	font-size: 26px;
	font-weight: 700;
	color: #bdbdbd;
	margin-left: 6px;
}

.me-score-conversion__pte-lbl {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--me-muted-2);
}

.me-score-conversion__ielts-badge {
	min-width: 92px;
	padding: 14px 22px 16px;
	border-radius: 18px;
	background: var(--fs-color-primary);
	text-align: center;
	box-shadow: 0 4px 8px rgba(255, 212, 0, 0.25);
}

.me-score-conversion__ielts-val {
	display: block;
	font-size: 30px;
	font-weight: 800;
	color: var(--me-ink);
	line-height: 1;
}

.me-score-conversion__ielts-lbl {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b5500;
}

.me-score-conversion__track {
	--me-score-pct: 68.75%;
	position: relative;
	height: 12px;
	border-radius: 9999px;
	background: linear-gradient(
		90deg,
		var(--fs-color-primary) 0%,
		var(--fs-color-primary) var(--me-score-pct),
		#eee var(--me-score-pct),
		#eee 100%
	);
	margin: 8px 0 4px;
}

.me-score-conversion__range {
	position: absolute;
	inset: -10px 0;
	width: 100%;
	margin: 0;
	opacity: 0.01;
	cursor: pointer;
	z-index: 2;
}

.me-score-conversion__track::after {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--me-score-pct);
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border-radius: 50%;
	background: var(--me-ink);
	border: 5px solid var(--fs-color-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	pointer-events: none;
	z-index: 1;
}

.me-score-conversion__scale {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 700;
	color: var(--me-muted-2);
	margin-bottom: 16px;
}

.me-score-conversion__info {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--me-bg-warm);
	font-size: 14px;
	color: var(--me-ink);
}

.me-score-conversion__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.me-score-conversion__cell {
	background: var(--me-bg-soft);
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 12px 10px;
	text-align: center;
}

.me-score-conversion__cell--hl {
	grid-column: span 2;
	background: var(--fs-color-primary);
	border-color: transparent;
}

.me-score-conversion__cell-k {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--me-muted-2);
	margin-bottom: 4px;
}

.me-score-conversion__cell--hl .me-score-conversion__cell-k {
	color: #6b5500;
}

.me-score-conversion__cell-v {
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: var(--me-ink);
	line-height: 1.2;
}

.me-score-conversion__cell-v small {
	font-size: 12px;
	font-weight: 600;
	color: var(--me-muted-2);
}

.me-score-conversion__cell-s {
	display: block;
	font-size: 11px;
	color: var(--me-muted-2);
	margin-top: 2px;
}

.me-score-conversion__note {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: var(--me-muted-2);
	text-align: center;
}

/* --- AI --- */
.me-section--ai {
	background: var(--me-bg-soft);
	padding-top: var(--me-section-pad-y-lg) !important;
	padding-bottom: var(--me-section-pad-y-lg) !important;
}

.me-ai-feature {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 14px;
}

.me-ai-feature__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: var(--fs-color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--me-ink);
	font-size: 18px;
}

.me-ai-feature__title {
	margin: 0 0 4px;
	font-size: 16.5px;
	font-weight: 700;
}

.me-ai-feature__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--me-muted-2);
}

.me-ai-mock {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 16px 24px rgba(0, 0, 0, 0.12);
}

/* --- Process --- */
/* --- Process --- */
.me-section--process {
	padding-top: var(--me-section-pad-y-lg) !important;
	padding-bottom: var(--me-section-pad-y-lg) !important;
}

.me-process-col {
	text-align: center;
	padding: 8px 12px;
}

.me-process-col__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--fs-color-primary);
	color: var(--me-ink);
	font-weight: 800;
	font-size: 18px;
	margin-bottom: 14px;
}

.me-process-col__title {
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 8px;
}

.me-process-col__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--me-muted-2);
}

/* --- Trainers / Testimonials --- */
.me-section--trainers,
.me-section--testimonials {
	padding-top: var(--me-section-pad-y-lg) !important;
	padding-bottom: var(--me-section-pad-y-lg) !important;
}

.me-section--trainers .col > .col-inner,
.me-section--testimonials .col > .col-inner {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	height: 100%;
}

.me-trainer-col__media {
	aspect-ratio: 4 / 5;
	background: #eee;
	object-fit: cover;
	width: 100%;
	display: block;
}

.me-trainer-col__body,
.me-testimonial-col__body {
	padding: 16px 18px 20px;
}

.me-trainer-col__name {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 800;
}

.me-trainer-col__role {
	margin: 0;
	font-size: 13px;
	color: var(--me-muted-2);
}

.me-trainer-col__badge {
	display: inline-block;
	margin-top: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--me-bg-warm);
	font-size: 12px;
	font-weight: 700;
}

.me-testimonial-col__stars {
	color: var(--fs-color-primary);
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.me-testimonial-col__quote {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--me-ink);
}

.me-testimonial-col__who {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
}

.me-testimonial-col__meta {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--me-muted-2);
}

/* --- Picture run --- */
.me-section--picture-run {
	padding-top: var(--me-section-pad-y) !important;
	padding-bottom: var(--me-section-pad-y) !important;
	overflow: hidden;
}

.me-section--picture-run .owl-nav,
.me-section--picture-run .owl-dots {
	display: none !important;
}

.me-section--picture-run .img-inner,
.me-section--picture-run img {
	border-radius: 12px;
}

/* --- CTA band (gold gradient — not black) --- */
.me-section--cta {
	padding-top: var(--me-section-pad-y) !important;
	padding-bottom: var(--me-section-pad-y) !important;
}

.me-section--cta.me-cta-band,
.me-cta-band {
	background: var(--me-gradient-cta-band);
	color: var(--me-ink);
	border-radius: 24px;
	padding: 48px 40px;
	text-align: center;
}

.me-cta-band .me-sec-head {
	margin-left: auto;
	margin-right: auto;
}

.me-cta-band .me-sec-title,
.me-cta-band h2 {
	color: var(--me-ink);
}

.me-cta-band .me-sec-sub,
.me-cta-band p {
	color: var(--me-ink);
	opacity: 0.9;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* On gold band: primary CTA = cream/white fill; outline = ink border (Figma) */
.me-cta-band .button.primary {
	margin-right: 0;
	background: #fff !important;
	border-color: #fff !important;
	color: var(--me-ink) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.me-cta-band .button.primary:hover,
.me-cta-band .button.primary:focus {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--me-ink) !important;
	box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.me-cta-band .button.secondary.is-outline {
	background: transparent !important;
	border-color: var(--me-ink) !important;
	color: var(--me-ink) !important;
}

.me-cta-band .button.secondary.is-outline:hover,
.me-cta-band .button.secondary.is-outline:focus {
	background: var(--me-ink) !important;
	border-color: var(--me-ink) !important;
	color: #fff !important;
}

.me-cta-band .me-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
}

/* --- Partners + Press --- */
.me-section--partners {
	background: var(--me-gradient-partners);
	padding-top: var(--me-section-pad-y-lg) !important;
	padding-bottom: var(--me-section-pad-y-lg) !important;
}

.me-section--partners .me-sec-head--center {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.75rem;
}

.me-section--partners .me-sec-title--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
	text-align: center;
}

.me-section--partners .me-sec-title--center .me-hl-box {
	margin-top: 0.1em;
}

.me-section--partners .me-sec-title--center.is-inline-hl {
	display: block;
}

.me-section--partners .me-sec-title--center.is-inline-hl .me-hl-box {
	display: inline-flex;
	margin-top: 0;
}

.me-section--partners__press-head {
	margin-top: 3rem;
	margin-bottom: 2rem;
}

.me-partner-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px 28px;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.me-partner-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 56px;
	padding: 10px 16px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	font-size: 13px;
	font-weight: 700;
	color: var(--me-ink);
	text-align: center;
}

.me-partner-logo img {
	max-height: 40px;
	width: auto;
	display: block;
}

.me-section--partners .bao-chi-container {
	max-width: 1200px;
}

/* --- Blog cards --- */
.me-section--blog {
	padding-top: var(--me-section-pad-y-lg) !important;
	padding-bottom: var(--me-section-pad-y-lg) !important;
	background: var(--me-bg-soft);
}

.me-section--blog .me-blog-card .col,
.me-section--blog .me-blog-card .box,
.me-section--blog .blog-posts .col > .col-inner {
	border-radius: 18px;
}

.me-section--blog .me-blog-card .box,
.me-section--blog .blog-posts .box {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	height: 100%;
}

.me-section--blog .me-blog-card .box-image img,
.me-section--blog .blog-posts .box-image img {
	border-radius: 0;
}

.me-section--blog .me-blog-card .box-text,
.me-section--blog .blog-posts .box-text {
	padding: 18px 20px 22px;
	text-align: left;
}

/* --- Register + FAQ / form --- */
.me-section--register {
	padding-top: var(--me-section-pad-y-lg) !important;
	padding-bottom: 72px !important;
}

.me-section--register .me-sec-title {
	margin-bottom: 0.35em;
}

.me-register-form {
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08);
	padding: 32px 33px 36px;
}

/* -------------------------------------------------------------------------
   WPForms — visual defaults only (do not override WPForms column/float layout)
   Style: input / textarea / select / submit button
   ------------------------------------------------------------------------- */
.wpforms-container .wpforms-form {
	font-family: "Plus Jakarta Sans", sans-serif;
}

.wpforms-container .wpforms-title,
.wpforms-container .wpforms-description {
	display: none !important;
}

.wpforms-container .wpforms-field-label {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--me-form-label);
}

.wpforms-container .wpforms-required-label {
	color: #e53935;
}

.wpforms-container .wpforms-field-sublabel {
	font-size: 12px;
	color: var(--me-muted-2);
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="url"],
.wpforms-container input[type="password"],
.wpforms-container input[type="date"],
.wpforms-container input[type="search"],
.wpforms-container select,
.wpforms-container textarea,
.wpforms-container .wpforms-field input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select {
	height: var(--me-form-input-h);
	min-height: var(--me-form-input-h);
	padding: 12px 16px !important;
	border: 1px solid var(--me-form-border) !important;
	border-radius: var(--me-form-radius) !important;
	background: #fff !important;
	color: var(--me-ink) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpforms-container textarea,
.wpforms-container .wpforms-field textarea {
	height: auto !important;
	min-height: 84px !important;
	resize: vertical;
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
	color: var(--me-form-placeholder);
	opacity: 1;
}

.wpforms-container input:hover,
.wpforms-container textarea:hover,
.wpforms-container select:hover,
.wpforms-container .wpforms-field input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):hover,
.wpforms-container .wpforms-field textarea:hover,
.wpforms-container .wpforms-field select:hover {
	border-color: #d0d0d0 !important;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus,
.wpforms-container .wpforms-field input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus,
.wpforms-container .wpforms-field textarea:focus,
.wpforms-container .wpforms-field select:focus {
	outline: none !important;
	border-color: var(--me-form-border-focus) !important;
	box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.35) !important;
}

.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio input[type="radio"] {
	accent-color: var(--fs-color-primary);
}

/* Submit button */
.wpforms-container button.wpforms-submit,
.wpforms-container .wpforms-submit,
.wpforms-container input[type="submit"].wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 14px 24px !important;
	border: none !important;
	border-radius: var(--me-radius-btn) !important;
	background: var(--fs-color-primary) !important;
	background-image: none !important;
	color: var(--me-ink) !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(255, 212, 0, 0.35) !important;
	transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.wpforms-container button.wpforms-submit:hover,
.wpforms-container button.wpforms-submit:focus,
.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus {
	background: var(--fs-color-primary) !important;
	color: var(--me-ink) !important;
	filter: brightness(0.97);
	box-shadow: 0 6px 16px rgba(255, 212, 0, 0.45) !important;
}

.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error {
	color: #e53935 !important;
	font-size: 12.5px;
	font-weight: 500;
}

.wpforms-container .wpforms-field.wpforms-has-error input,
.wpforms-container .wpforms-field.wpforms-has-error textarea,
.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field textarea.wpforms-error {
	border-color: #e53935 !important;
}

.wpforms-container .wpforms-confirmation-container-full,
.wpforms-container .wpforms-confirmation-container {
	border: none !important;
	border-radius: 16px;
	background: var(--me-bg-warm) !important;
	color: var(--me-ink);
	padding: 20px 22px !important;
}

.me-faq-list {
	margin: 1.5rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.me-faq-item {
	border: 1px solid #eee;
	border-radius: 16px;
	margin: 0;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.me-faq-item:hover,
.me-faq-item[open] {
	border-color: var(--fs-color-primary);
	box-shadow: 0 0 0 1px var(--fs-color-primary), 0 4px 18px rgba(255, 212, 0, 0.35);
}

.me-faq-item summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	padding: 16px 48px 16px 22px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	color: var(--me-ink);
	list-style: none;
}

.me-faq-item summary::-webkit-details-marker {
	display: none;
}

.me-faq-item summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--me-ink);
	border-bottom: 2px solid var(--me-ink);
	transform: translateY(-65%) rotate(45deg);
	transition: transform 0.2s ease;
	flex: 0 0 auto;
}

.me-faq-item[open] summary::after {
	transform: translateY(-20%) rotate(225deg);
}

.me-faq-item p {
	margin: 0;
	padding: 0 22px 18px;
	color: var(--me-muted-2);
	font-size: 14px;
	line-height: 1.55;
}

/* --- Header: centered nav + yellow phone hotline (Figma 1280:1274) --- */
@media (min-width: 850px) {
	.header-main .header-inner {
		position: relative;
	}

	.header-main .header-nav-main.nav-left {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 3;
		width: max-content;
		max-width: min(56vw, 720px);
	}
	.nav>li{
		padding-left: 16px;
		padding-right: 16px;
	}
}

.header-nav .html .me-header-phone,
.me-header-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--me-ink);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}

.me-header-phone:hover,
.me-header-phone:focus {
	color: var(--me-ink);
	text-decoration: none;
	opacity: 0.9;
}

.me-header-phone__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--fs-color-primary);
	color: var(--me-ink);
	flex: 0 0 34px;
}

.me-header-phone__icon i,
.me-header-phone__icon .fas {
	font-size: 14px;
	line-height: 1;
}

.me-header-phone__num {
	color: var(--me-ink);
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

	.me-section--hero {
		padding-top: 40px !important;
		padding-bottom: 48px !important;
	}

	.me-section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.me-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.me-hero__actions .button {
		text-align: center;
	}

	.me-stat-card--pte,
	.me-stat-card--det {
		position: static;
		margin-bottom: 12px;
		max-width: none;
	}

	.me-hero__media-stack {
		display: flex;
		flex-direction: column;
	}

	.me-score-conversion__body {
		padding: 22px 16px 26px;
	}

	.me-score-conversion__pte-num {
		font-size: 48px;
	}

	.me-score-conversion__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.me-score-conversion__cell--hl {
		grid-column: span 2;
	}

	.me-cta-band {
		padding: 32px 20px;
		border-radius: 16px;
	}

	.me-cta-band__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.me-cta-band__actions .button,
	.me-cta-band .button {
		margin-right: 0;
		text-align: center;
		width: 100%;
	}

	.me-register-form {
		padding: 22px 18px 26px;
		margin-top: 1.5rem;
	}

	.me-partner-logos {
		gap: 12px;
	}

	.me-partner-logo {
		min-width: 100px;
		min-height: 48px;
		font-size: 12px;
	}
}

/* --- Footer socials (Figma: dark gray circles + muted glyphs) --- */
#footer, .dark, .dark p, .dark td{
	color: #9e9e9e;
}
#footer .follow-icons {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--me-footer-social-gap);
	width: auto;
	max-width: 100%;
	margin: 1rem 0 0;
	padding: 0;
	color: var(--me-footer-social-fg);
}

#footer .follow-icons .facebook {
	order: 1;
}

#footer .follow-icons .youtube {
	order: 2;
}

#footer .follow-icons .tiktok {
	order: 3;
}

#footer .follow-icons .button.icon,
#footer .follow-icons a.icon.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--me-footer-social-size);
	height: var(--me-footer-social-size);
	min-height: var(--me-footer-social-size);
	margin: 0;
	padding: 0 !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--me-footer-social-bg) !important;
	background-color: var(--me-footer-social-bg) !important;
	color: var(--me-footer-social-fg) !important;
	box-shadow: none !important;
	line-height: 1;
	vertical-align: middle;
}

#footer .follow-icons .button.icon > i,
#footer .follow-icons .button.icon > span,
#footer .follow-icons a.icon.button > i,
#footer .follow-icons a.icon.button > span {
	color: var(--me-footer-social-fg) !important;
	font-size: 1rem;
	line-height: 1;
	min-width: 0;
}

#footer .follow-icons .button.icon:hover,
#footer .follow-icons .button.icon:focus,
#footer .follow-icons a.icon.button:hover,
#footer .follow-icons a.icon.button:focus {
	background: #3a3a3a !important;
	background-color: #3a3a3a !important;
	border: none !important;
	color: #fff !important;
	opacity: 1;
}

#footer .follow-icons .button.icon:hover > i,
#footer .follow-icons .button.icon:hover > span,
#footer .follow-icons .button.icon:focus > i,
#footer .follow-icons .button.icon:focus > span,
#footer .follow-icons a.icon.button:hover > i,
#footer .follow-icons a.icon.button:hover > span,
#footer .follow-icons a.icon.button:focus > i,
#footer .follow-icons a.icon.button:focus > span {
	color: #fff !important;
}