/* ==========================================================================
   MathX - KHUNG dung chung: header + menu + thanh quote + footer + nut FAB
   Tach tu homev2.css de cac trang CU cung dung duoc bo khung moi.

   KHAC homev2.css o hai diem, va ca hai deu co y:

   1. KHONG co reset toan cuc. homev2.css dat
        ul { list-style: none; margin: 0; padding: 0 }
        h1..h5, p { margin: 0 }
      ngoai moi selector - an toan o trang chu moi (file chi nap o do) nhung nap
      len trang cu la moi danh sach mat dau dau dong. O day reset duoc bo trong
      .mxh nen chi cham vao khung.

   2. Chi chua khung, khong co style noi dung trang chu.

   Dung kem front/v2/headerMxh.php + footerMxh.php. Hai file do dong the .mxh
   NGAY SAU header va mo lai TRUOC footer, nen noi dung trang nam NGOAI .mxh -
   font, mau chu va reset o day khong cham toi noi dung cu.
   ========================================================================== */


.mxh {
	--mxh-font: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
	--mxh-green: #71BB44;
	--mxh-green-dark: #5EA436;
	--mxh-green-deep: #4E8A2C;
	--mxh-green-text: #3F6A28;
	--mxh-green-title: #3E9B3E;
	--mxh-orange: #F26626;
	--mxh-orange-dark: #D9501A;
	--mxh-blue: #1E49B8;
	--mxh-ink: #22301C;
	--mxh-ink-2: #3D4839;
	--mxh-ink-3: #4A5646;
	--mxh-muted: #5A6555;
	--mxh-muted-2: #6C7767;
	--mxh-muted-3: #94A08F;
	--mxh-line: #EBF1E5;
	--mxh-line-2: #EAF0E4;
	--mxh-line-3: #E7EFE1;
	--mxh-frame: #AFD494;
	--mxh-tint: #F2F8EC;
	--mxh-tint-2: #EAF4E1;

	font-family: var(--mxh-font);
	/* Hai dong nay o homev2.css khong co - trang chu lay mac dinh cua trinh duyet.
	   O day phai viet ro vi style.css cu ep "html, html * { font-size: 15px;
	   line-height: 1.5em }". Gia tri dat o day dung bang cai trang chu dang chay. */
	font-size: 16px;
	line-height: normal;
	color: var(--mxh-ink);
	background: #FFFFFF;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Reset: dong y het homev2.css nhung DONG TRONG .mxh. Do uu tien van thap
   (0-1-1) nen moi rule theo class ben duoi de dang ghi de. */
.mxh, .mxh *, .mxh *:before, .mxh *:after { box-sizing: border-box; }
.mxh h1, .mxh h2, .mxh h3, .mxh h4, .mxh h5, .mxh p, .mxh figure { margin: 0; }
.mxh ul { list-style: none; margin: 0; padding: 0; }
.mxh img { max-width: 100%; }
.mxh input::placeholder, .mxh textarea::placeholder { color: #A7B3A2; }

/* Van la "html, html *" cua style.css cu: do uu tien 0-0-1 nhung no dat thang len
   TUNG the con, nen chan luon co che ke thua tu .mxh - chu trong khung bi thu ve
   15px va doi sang mau #333. Rule duoi day (0-1-0) noi lai chuoi ke thua.
   Khong dung shorthand "font: inherit" vi se xoa ca font-weight mac dinh cua
   h3, h5, strong, b. Moi rule dat ro co (font-size|color) ben duoi deu tu 0-1-0
   tro len nen van thang rule nay. */
.mxh * { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }

.mxh a { color: var(--mxh-green-deep); text-decoration: none; }
.mxh a:hover { color: var(--mxh-orange); }

@keyframes mxh-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mxh-pop { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }

/* --------------------------------------------------------------- Header -- */
.mxh-header {
	position: sticky; top: 0; z-index: 50; width: 100%;
	background: rgba(255,255,255,.96);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--mxh-line);
}

.mxh-topbar { background: #F7FBF4; border-bottom: 1px solid var(--mxh-line); }
/* Cac container duoi day vua co max-width vua co padding ngang 32px, nen be rong noi
   dung that chi con 1136px - hep hon banner 64px. Nang max-width len 1264 (= 1200 + 2x32)
   de noi dung dung 1200px, thang hang voi .mxh-banner__box o moi be rong man hinh.
   Giu lai padding 32px vi day cung la le trai/phai khi man hinh nho hon 1264px. */
.mxh-topbar__in {
	max-width: 1264px; margin: 0 auto; padding: 8px 32px;
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	font-size: 13.5px; font-weight: 600; color: var(--mxh-ink-3);
}
.mxh .mxh-topbar__brand { display: flex; align-items: center; gap: 8px; color: var(--mxh-ink-3); }
.mxh .mxh-topbar__brand img { width: 24px; height: 24px; object-fit: contain; }
.mxh .mxh-topbar__brand-link { display: flex; align-items: center; gap: 8px; color: inherit; }
.mxh .mxh-topbar__brand-link:hover { color: var(--mxh-green-deep); }
.mxh .mxh-topbar__sites { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.mxh .mxh-topbar__sites a { font-weight: 800; color: var(--mxh-green-deep); }
.mxh .mxh-topbar__sites a:hover { color: var(--mxh-orange); text-decoration: underline; }
.mxh .mxh-topbar__sites i { font-style: normal; font-weight: 400; color: var(--mxh-muted-3); }
.mxh-topbar__links { display: flex; align-items: center; gap: 20px; }
.mxh .mxh-topbar__item {
	display: flex; align-items: center; gap: 7px;
	background: none; border: none; padding: 0;
	font-family: inherit; font-size: 13.5px; font-weight: 600;
	color: var(--mxh-ink-3); cursor: pointer;
}
.mxh .mxh-topbar__item svg { flex: none; }
.mxh .mxh-topbar__item:hover { color: var(--mxh-green-deep); }
.mxh .mxh-topbar__phone { color: var(--mxh-orange); cursor: default; }
.mxh .mxh-topbar__cta { font-weight: 700; color: var(--mxh-orange); }
.mxh .mxh-topbar__cta:hover { color: var(--mxh-orange-dark); }

.mxh-bar {
	max-width: 1264px; margin: 0 auto; padding: 12px 32px;
	display: flex; align-items: center; gap: 18px; position: relative;
}
.mxh-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.mxh-logo img { width: 46px; height: 46px; object-fit: contain; }
.mxh-wordmark { font-weight: 900; font-size: 26px; letter-spacing: -.5px; color: var(--mxh-green); }
.mxh-wordmark i { font-style: normal; color: var(--mxh-orange); }

.mxh-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; justify-content: flex-end; }
.mxh-nav__item { position: relative; }
.mxh .mxh-nav__link {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 12px; border-radius: 10px;
	font-size: 14.5px; font-weight: 700; letter-spacing: .2px;
	color: #3D4839; background: transparent; white-space: nowrap;
	transition: background .15s, color .15s;
}
.mxh .mxh-nav__link b { font-size: 10px; opacity: .75; font-weight: 400; }
.mxh-nav__item:hover > .mxh-nav__link,
.mxh-nav__item.is-open > .mxh-nav__link { background: var(--mxh-orange); color: #FFFFFF; }
/* Muc dang xem: chu cam (khong to nen, de khong lan voi trang thai hover). */
.mxh .mxh-nav__link.is-active { color: var(--mxh-orange); }
.mxh-nav__item:hover > .mxh-nav__link.is-active { color: #FFFFFF; }

.mxh-drop { position: absolute; top: 100%; left: 0; padding-top: 8px; z-index: 60; display: none; }
.mxh-nav__item:hover .mxh-drop,
.mxh-nav__item.is-open .mxh-drop { display: block; }
.mxh-drop__in {
	background: #FFFFFF; border: 1px solid var(--mxh-line); border-radius: 16px;
	box-shadow: 0 18px 44px rgba(34,48,28,.16); padding: 12px;
	animation: mxh-pop .16s ease-out;
}
.mxh-drop--sm .mxh-drop__in { min-width: 220px; }
.mxh-drop--lg .mxh-drop__in { min-width: 260px; }
.mxh-drop a {
	display: block; padding: 9px 12px; border-radius: 9px;
	font-size: 14px; font-weight: 600; color: #3D4839; white-space: nowrap;
}
.mxh-drop a:hover { background: var(--mxh-tint); color: var(--mxh-green-deep); }
.mxh-drop__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; }
.mxh-drop__grid a { font-weight: 700; text-align: center; }
.mxh-drop__sep { height: 1px; background: #EEF3EA; margin: 8px 4px; }
.mxh-drop a.is-accent { font-weight: 700; text-align: center; color: var(--mxh-orange); }
.mxh-drop a.is-accent:hover { background: #FDF1EA; color: var(--mxh-orange); }

.mxh-burger {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 46px; height: 46px; padding: 0 11px;
	border: 1px solid #DCE9D2; border-radius: 14px; background: #FFFFFF;
	cursor: pointer; margin-left: auto;
}
.mxh-burger span { display: block; height: 2.5px; border-radius: 999px; background: var(--mxh-green-deep); }
.mxh-burger span:last-child { background: var(--mxh-orange); }

.mxh-mobilemenu {
	position: absolute; left: 12px; right: 12px; top: 100%; margin-top: 8px;
	background: #FFFFFF; border: 1px solid var(--mxh-line); border-radius: 18px;
	box-shadow: 0 18px 40px rgba(34,48,28,.16); padding: 14px;
	display: none; flex-direction: column; gap: 2px;
	max-height: 70vh; overflow: auto; z-index: 60;
}
.mxh-mobilemenu.is-open { display: flex; }
.mxh-mobilemenu a { color: #3D4839; padding: 13px 14px; border-radius: 12px; font-weight: 700; font-size: 15px; }
.mxh-mobilemenu a:hover { background: var(--mxh-tint); }
/* Nhan nhom cho muc co nhieu trang con (LOP HOC): khong bam duoc, chi de phan doan. */
.mxh-mobilemenu__label {
	padding: 13px 14px 6px; font-weight: 900; font-size: 12px;
	letter-spacing: 1.1px; text-transform: uppercase; color: var(--mxh-muted-3);
}
/* Trang con thut vao va co gach doc de thay ro la thuoc muc tren. */
.mxh .mxh-mobilemenu__sub { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--mxh-line); }
.mxh .mxh-mobilemenu__sub:hover { border-left-color: var(--mxh-green); }
.mxh .mxh-mobilemenu__login {
	margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
	background: #FFFFFF; color: var(--mxh-green-text); border: 1.5px solid #DCE9D2;
	font-family: inherit; font-size: 15px; font-weight: 700; padding: 14px 20px;
	border-radius: 999px; cursor: pointer;
}
.mxh .mxh-mobilemenu__login:hover { border-color: var(--mxh-green); color: var(--mxh-green); }
.mxh-mobilemenu__cta {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--mxh-green); color: #FFFFFF; border: none;
	font-family: inherit; font-size: 15px; font-weight: 700; padding: 15px 20px;
	border-radius: 999px; cursor: pointer;
}
.mxh-mobilemenu__cta:hover { background: var(--mxh-green-dark); }

/* ------------------------------------------------------------ Quote bar -- */
.mxh-quote { background: var(--mxh-orange); padding: 18px 32px; }
.mxh-quote__in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.mxh-quote__text {
	flex: 1 1 420px; min-width: 0;
	font-style: italic; font-weight: 700; font-size: 16px; line-height: 1.5; color: #FFFFFF;
}
.mxh-quote__side { display: flex; align-items: center; gap: 14px; flex: none; }
/* Do YouTube tren nen cam thi bi lut, nen them vien trang + bong dam cho nut noi len. */
.mxh-quote__play {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 40px; border-radius: 10px;
	border: 2.5px solid #FFFFFF; background: #FF0000;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(88,18,6,.45), 0 1px 3px rgba(0,0,0,.28);
	transition: transform .18s, background .18s, box-shadow .18s;
}
.mxh-quote__play svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mxh-quote__play:hover {
	background: #E60000; transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(88,18,6,.52), 0 1px 3px rgba(0,0,0,.28);
}
.mxh-quote__play:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.mxh-quote__owl { width: 52px; height: 42px; object-fit: contain; flex: none; }
.mxh .mxh-quote__btn {
	background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.65); border-radius: 999px;
	padding: 11px 22px; font-family: inherit; font-size: 14px; font-weight: 700; color: #FFFFFF;
	cursor: pointer; white-space: nowrap;
}
.mxh .mxh-quote__btn:hover { background: #FFFFFF; color: var(--mxh-orange); }
.mxh .mxh-quote__btn--solid { background: #FFFFFF; border-color: #FFFFFF; color: var(--mxh-orange); }
.mxh .mxh-quote__btn--solid:hover { background: #FFF3EC; color: var(--mxh-orange); }


/* ---------------------------------------------------------------- Footer -- */
.mxh-footer { background: var(--mxh-orange); color: #FFFFFF; padding: 56px 32px 0; }
.mxh-footer a { color: #FFFFFF; }
.mxh-footer a:hover { color: #FFE3D2; }
.mxh-footer__grid {
	max-width: 1200px; margin: 0 auto;
	display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
	gap: 40px 32px; align-items: start; text-align: left;
}
.mxh-footer h5 { margin: 0 0 18px; font-weight: 900; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #FFE04A; }
.mxh-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.mxh-footer__info { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.6; }
.mxh-footer__links { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mxh-footer__links a,
.mxh-footer__links button { font-size: 14.5px; font-weight: 500; }
.mxh-footer__ask { background: none; border: none; padding: 0; font-family: inherit; font-weight: 700; color: #FFE04A; cursor: pointer; }
.mxh-footer__ask:hover { color: #FFFFFF; }
.mxh-footer__badge { width: 190px; max-width: 100%; margin: 22px 0 0; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.14); display: block; }
.mxh-footer__badge img { width: 100%; display: block; }
/* Icon mang xa hoi: vong tron trang mo tren nen cam, hover thi dao thanh nen trang
   voi mau thuong hieu cua tung mang. Glyph dung fill="currentColor" nen chi doi color. */
.mxh-footer__social {
	max-width: 1200px; margin: 34px auto 0;
	display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.mxh-footer__social-label { font-size: 14.5px; font-weight: 700; color: #FFE04A; }
.mxh-footer__social-list { display: flex; align-items: center; gap: 12px; }
.mxh .mxh-social {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 999px; flex: none;
	background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.55); color: #FFFFFF;
	transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.mxh .mxh-social:hover { background: #FFFFFF; border-color: #FFFFFF; transform: translateY(-2px); }
.mxh .mxh-social--fb:hover { color: #1877F2; }
.mxh .mxh-social--yt:hover { color: #FF0000; }
.mxh .mxh-social--zalo:hover { color: #0068FF; }
.mxh .mxh-social--tiktok:hover { color: #111111; }
.mxh .mxh-social:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.mxh-social svg { display: block; }

.mxh-footer__bottom {
	max-width: 1200px; margin: 38px auto 0; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.28);
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	font-size: 13.5px; color: rgba(255,255,255,.92); text-align: center;
}

/* --------------------------------------------------------- FAB va modal -- */
.mxh .mxh-fab {
	position: fixed; right: 20px; bottom: 20px; z-index: 60;
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--mxh-orange); color: #FFFFFF; border: none; font-family: inherit;
	font-size: 15px; font-weight: 700; padding: 15px 20px; border-radius: 999px; cursor: pointer;
	box-shadow: 0 12px 28px rgba(242,102,38,.36);
}
.mxh .mxh-fab:hover { background: var(--mxh-orange-dark); }
.mxh .mxh-fab i { font-style: normal; font-size: 18px; line-height: 1; }

.mxh-modal {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 100; background: rgba(24,36,18,.55);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	display: none; align-items: flex-start; justify-content: center;
	padding: 24px 16px; overflow-y: auto; animation: mxh-fade .18s ease-out;
}
.mxh-modal.is-open { display: flex; }
.mxh-modal__box {
	position: relative; width: 100%; max-width: 560px; margin: auto; background: #FFFFFF;
	border-radius: 24px; padding: 34px 34px 32px; box-shadow: 0 30px 70px rgba(12,24,8,.35);
	animation: mxh-pop .22s ease-out;
}
.mxh-modal__box--auth { max-width: 440px; }
.mxh-modal__close {
	position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 999px;
	border: none; background: #F2F6EE; color: var(--mxh-muted); font-family: inherit; font-size: 17px; cursor: pointer;
}
.mxh-modal__close:hover { background: #E4EEDA; }
.mxh-modal__kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.1px; color: var(--mxh-orange); margin-bottom: 10px; }
.mxh-modal__title { margin: 0 0 8px; font-weight: 900; font-size: 26px; color: var(--mxh-ink); }
.mxh-modal__desc { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--mxh-muted-2); }
.mxh-modal form { display: flex; flex-direction: column; gap: 14px; }
.mxh-modal__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
/* Khong dung flex o day: nhan + dau * + chu thich phai nam cung mot dong,
   con o nhap thi xuong dong duoi. */
.mxh-mfield { display: block; font-size: 13px; font-weight: 600; color: var(--mxh-ink-3); }
.mxh-mfield em { font-style: normal; font-weight: 400; color: var(--mxh-muted-3); }
.mxh-mfield input,
.mxh-mfield select,
.mxh-mfield textarea {
	display: block; margin-top: 7px;
	width: 100%; padding: 13px 14px; border: 1px solid #DCE4D4; border-radius: 12px;
	font-family: inherit; font-size: 15px; color: var(--mxh-ink); background: #FFFFFF; outline: none; resize: vertical;
}
.mxh-mfield input:focus,
.mxh-mfield select:focus,
.mxh-mfield textarea:focus { border-color: var(--mxh-green); }
.mxh-btn-green {
	margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--mxh-green); color: #FFFFFF; border: none; font-family: inherit;
	font-size: 16px; font-weight: 700; padding: 16px 20px; border-radius: 999px; cursor: pointer;
	box-shadow: 0 10px 24px rgba(113,187,68,.28);
}
.mxh-btn-green:hover { background: var(--mxh-green-dark); }
.mxh-modal__foot { margin: 2px 0 0; font-size: 12px; color: var(--mxh-muted-3); text-align: center; }
.mxh-modal__done { padding: 26px 4px 8px; text-align: center; display: none; }
.mxh-modal__done.is-on { display: block; }
.mxh-modal__done-icon {
	width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 999px; background: #E4F3D8;
	color: var(--mxh-green-deep); font-size: 30px; display: flex; align-items: center; justify-content: center;
}
.mxh-modal__done h3 { margin: 0 0 10px; font-weight: 900; font-size: 24px; color: var(--mxh-ink); }
.mxh-modal__done p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--mxh-muted-2); }
.mxh-modal__done button {
	background: var(--mxh-green); color: #FFFFFF; border: none; font-family: inherit;
	font-size: 15px; font-weight: 700; padding: 14px 30px; border-radius: 999px; cursor: pointer;
}
.mxh-modal__done button:hover { background: var(--mxh-green-dark); }
.mxh-modal__pane { display: block; }
.mxh-modal.is-sent .mxh-modal__pane { display: none; }
.mxh-modal.is-sent .mxh-modal__done { display: block; }

.mxh-auth__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.mxh-auth__brand img { width: 40px; height: 40px; object-fit: contain; }
.mxh-auth__brand span { font-weight: 900; font-size: 24px; letter-spacing: -.5px; color: var(--mxh-green); }
.mxh-auth__brand i { font-style: normal; color: var(--mxh-orange); }
.mxh-auth__tabs { display: flex; gap: 4px; padding: 4px; background: #F2F6EE; border-radius: 999px; margin-bottom: 22px; }
.mxh-auth__tab {
	flex: 1; padding: 12px 16px; border-radius: 999px; border: none; cursor: pointer;
	font-weight: 700; font-size: 15px; font-family: inherit; background: transparent; color: var(--mxh-muted);
}
.mxh-auth__tab.is-active { background: var(--mxh-green); color: #FFFFFF; }
.mxh-auth__title { margin: 0 0 2px; font-weight: 900; font-size: 22px; color: var(--mxh-ink); }
.mxh-auth__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.mxh-auth__meta label { display: flex; align-items: center; gap: 8px; color: var(--mxh-ink-3); font-weight: 500; }
.mxh-auth__meta a { font-weight: 600; }

/* Hai form (dang nhap / dang ky) nam canh nhau, tab quyet dinh form nao hien. */
.mxh-auth__form { display: flex; flex-direction: column; gap: 14px; }
.mxh-auth__form[data-mxh-authform='register'] { display: none; }
.mxh-modal.is-register .mxh-auth__form[data-mxh-authform='login'] { display: none; }
.mxh-modal.is-register .mxh-auth__form[data-mxh-authform='register'] { display: flex; }
/* Form dang ky nhieu truong hon nen noi rong hop thoai. */
.mxh-modal.is-register .mxh-modal__box--auth { max-width: 560px; }

.mxh-auth__msg {
	display: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
	background: #FDECE3; border: 1px solid #F7C9B2; color: #B4441A;
	font-size: 14px; font-weight: 600; line-height: 1.5;
}
.mxh-auth__msg.is-on { display: block; }
.mxh-auth__msg.is-ok { background: #EDF7E4; border-color: #D5E9C4; color: var(--mxh-green-text); }
.mxh-mfield i { font-style: normal; color: var(--mxh-orange); }

.mxh-video { align-items: center; padding: 40px; z-index: 120; background: rgba(18,26,14,.72); }
.mxh-video__box {
	position: relative; width: 100%; max-width: 900px; background: #0C1409; border-radius: 20px;
	overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: mxh-pop .22s ease-out;
}
.mxh-video__close {
	position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 999px;
	border: none; background: rgba(255,255,255,.92); color: var(--mxh-ink); font-size: 18px; font-weight: 700; cursor: pointer;
}
.mxh-video__close:hover { background: #FFFFFF; color: var(--mxh-orange); }
.mxh-video__frame { width: 100%; aspect-ratio: 16 / 9; min-height: 240px; background: #000000; }
.mxh-video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.mxh-noscroll { position: fixed; left: 0; right: 0; width: 100%; }


/* ================================================== Responsive (chi khung) == */
@media (max-width: 1179px) {
	.mxh-bar { gap: 10px; }
	.mxh-wordmark { display: none; }
	.mxh-nav__link { padding: 8px 7px; font-size: 13px; }
}

@media (max-width: 1079px) {
	.mxh-nav { display: none; }
	.mxh-burger { display: flex; }
}

@media (max-width: 1039px) {
	.mxh-topbar { display: none; }
	.mxh-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 759px) {
	.mxh-bar { padding: 12px 18px; gap: 12px; }
	.mxh-quote { padding: 16px 18px; }
	.mxh-quote__in { gap: 14px; }
	.mxh-quote__text { font-size: 15px; }
	.mxh-footer { padding: 40px 18px 0; }
	.mxh-footer__grid { grid-template-columns: minmax(0,1fr); gap: 30px; text-align: center; }
	.mxh-footer__col { align-items: center; }
	.mxh-footer__links { align-items: center; }
	.mxh-footer__badge { margin-left: auto; margin-right: auto; }
	.mxh-footer__social { flex-direction: column; gap: 14px; margin-top: 28px; }
	.mxh-fab span { display: none; }
	.mxh-modal__box { padding: 24px 20px 26px; }
	.mxh-modal__row { grid-template-columns: minmax(0,1fr); }
}