/* ==========================================================================
   MathX - 3 trang con cua muc LOP HOC
     /online.html             front::v2_lophoconline
     /trung-tam-offline.html  front::v2_trungtamoffline
     /giao-vien.html          front::v2_giaovien
   Chuyen the tu ban thiet ke trong docs/MathX-lophoc-online-redesign,
   docs/MathX-trungtam-offline-redesign va docs/MathX-giaovien-redesign.

   File nay nap SAU homev2.css nen dung lai het cac khoi da co o do:
     .mxh-frame + .mxh-frame__legend   khung co o tieu de tren vien
     .mxh-lead                          doan mo dau can giua
     .mxh-signup__* .mxh-field          o dang ky va cac truong nhap
     .mxh-steps .mxh-step__*            quy trinh 4 buoc
     .mxh-banner__*                     carousel banner (homev2.js dieu khien)
     .mxh-btn-primary .mxh-go .mxh-date .mxh-more .mxh-imgslot
   O day chi khai bao nhung khoi that su moi.

   Breakpoint dung dung cua homev2.css: 1179 / 1079 / 1039 / 759.
   ========================================================================== */

/* ===================================================== Dau trang (hero) ==
   Ca 3 trang mo dau bang mot dai nen #F6FBF2 - dung mau nen .mxh-banner cua
   trang chu - de tieu de trang khong bi lo lung tren nen trang.
   Khong dung the trang co vien o day: ngay ben duoi la .mxh-frame voi o tieu de
   cung la the trang vien xanh, hai cai chong nhau se roi. */
.mxl-hero { background: #F6FBF2; border-bottom: 1px solid var(--mxh-line); padding: 40px 32px 34px; }
.mxl-head { max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mxl-head__title { font-weight: 900; font-size: 34px; line-height: 1.2; letter-spacing: .6px; color: var(--mxh-green-title); text-wrap: pretty; }
/* Cum MATH/X hai mau, giong .mxh-frame__legend cua trang chu. */
.mxl-head__title em { font-style: normal; color: var(--mxh-green-title); }
.mxl-head__title i { font-style: normal; color: var(--mxh-orange); }
.mxl-head__desc { max-width: 720px; font-size: 16px; line-height: 1.75; color: var(--mxh-muted); text-wrap: pretty; }
/* Gach ngang net dut: dung lai net cua .mxh-step__line de dong bo. */
.mxl-head__rule { width: 64px; border-top: 2px dashed #C7DEB4; }
/* Trang giao vien: ngay duoi hero la .mxh-banner, cung mau nen #F6FBF2. Neu giu
   duong vien duoi cua hero thi giua mot vung nen lien tuc lai co mot vach ke vo
   nghia -> bo vien va thu padding de hai dai doc thanh mot khoi. */
.mxl-hero--flush { border-bottom: none; padding-bottom: 14px; }
.mxl-banner { padding-top: 6px; }

/* Nut goi hanh dong nhac lai. O dang ky nam giua trang nen dau trang can mot
   duong dan nhanh - chi can o dien thoai, ban may tinh an di. */
.mxl-cta { display: none; }

/* ============================================ Video mo phong (trang online) ==
   Cot trai la video, cot phai la 3 loi the. */
.mxl-showcase { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 30px; align-items: start; }
.mxl-video__wrap { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mxl-video {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
	border-radius: 20px; overflow: hidden; background: #0C1409;
	box-shadow: 0 16px 40px rgba(34,48,28,.18);
}
.mxl-video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Dai chon lop: moi nut doi src cua iframe (lophoc.js).
   O dien thoai chuyen sang cuon ngang (xem media query 759). */
.mxl-video__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mxl-video__tabs button {
	cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--mxh-ink-3);
	background: #FFFFFF; border: 1.5px solid var(--mxh-line-2); border-radius: 999px; padding: 8px 16px;
	transition: border-color .15s, color .15s, background .15s;
}
.mxl-video__tabs button:hover { border-color: var(--mxh-frame); color: var(--mxh-green-deep); }
.mxl-video__tabs button.is-active { background: var(--mxh-orange); border-color: var(--mxh-orange); color: #FFFFFF; }
/* Link cuoi dai: dan xuong khoi khoa hoc, khong phai mot lop nen de kieu chu thuong. */
.mxh .mxl-video__tabs a {
	display: inline-flex; align-items: center; padding: 8px 16px;
	font-size: 13.5px; font-weight: 800; color: var(--mxh-green-deep);
}
.mxh .mxl-video__tabs a:hover { color: var(--mxh-orange); }

.mxl-perks { display: flex; flex-direction: column; gap: 16px; }
.mxl-perk { display: flex; align-items: flex-start; gap: 12px; background: var(--mxh-tint); border: 1px solid var(--mxh-line-3); border-radius: 14px; padding: 14px 16px; }
.mxl-perk svg { flex: none; margin-top: 1px; }
.mxl-perk span { font-size: 13.5px; font-weight: 700; line-height: 1.5; letter-spacing: .2px; color: var(--mxh-ink-2); text-transform: uppercase; }

/* ================================================= The khoa hoc (2 trang) ==
   Trang online 4 khoa, trang trung tam dung lai y nguyen 4 khoa do.
   The doc: panel anh xanh o tren, chu o duoi. */
.mxl-courses { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.mxl-course {
	display: flex; flex-direction: column;
	background: #FFFFFF; border: 1px solid var(--mxh-line-2); border-radius: 20px;
	overflow: hidden; box-shadow: 0 8px 22px rgba(34,48,28,.05);
}
.mxl-course__art {
	padding: 18px 18px 22px; min-height: 200px;
	background: linear-gradient(165deg,#7FC552 0%,#5EA436 100%);
	display: flex; flex-direction: column; align-items: center; text-align: center;
}
.mxl-course__plate {
	flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
	border: 2.5px solid rgba(255,255,255,.9); border-radius: 16px; padding: 16px 12px; background: rgba(255,255,255,.14);
}
.mxl-course__kicker { font-size: 16px; font-weight: 900; letter-spacing: 3.5px; color: #FFFFFF; }
/* Ten khoa: chu cam co vien mong nhu the khoa hoc dang chay tren
   truongtoanmathx.vn. text-shadow re hon -webkit-text-stroke o day vi chu chi 2 dong. */
.mxl-course__name {
	font-size: 21px; font-weight: 900; line-height: 1.2; letter-spacing: .3px; color: #FFD8A8;
	text-shadow: 0 1px 0 #B8480F, 0 2px 6px rgba(43,74,20,.45);
}
.mxl-course__body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mxl-course__title { font-weight: 900; font-size: 18px; letter-spacing: .2px; line-height: 1.3; color: var(--mxh-green-title); }
/* Doan mo ta khoa hoc. Can le hai ben theo yeu cau; text-wrap: pretty giu cho
   dong cuoi khong tro troi mot chu. */
.mxl-course__goal {
	font-size: 14.5px; line-height: 1.65; color: var(--mxh-ink-2);
	text-align: justify; text-wrap: pretty;
}
.mxl-course__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--mxh-line-3); display: flex; flex-direction: column; gap: 12px; }
.mxh .mxl-course__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--mxh-orange); }
.mxh .mxl-course__cta:hover { color: var(--mxh-orange-dark); }

/* ============================================= Co so (trang trung tam) ==
   Luoi 3 cot x 2 hang. O 1136px moi the con 366px nen dia chi va so dien thoai
   doc thoang, hai duong dan xep ngang duoc. */
.mxl-places { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.mxl-place {
	display: flex; flex-direction: column; gap: 11px;
	background: #FFFFFF; border: 1px solid var(--mxh-line-2); border-radius: 18px;
	padding: 18px 20px 16px; box-shadow: 0 8px 22px rgba(34,48,28,.05);
	transition: box-shadow .18s, transform .18s;
}
.mxl-place:hover { box-shadow: 0 16px 32px rgba(34,48,28,.12); transform: translateY(-2px); }
/* The so hieu va ten co so nam cung mot dong.
   KHONG dung flex-wrap: "Co so 1 Trung Hoa Nhan Chinh" can ~280px ma the chi rong
   250-325px tuy be rong man hinh, nen wrap la the lai roi xuong dong - dung cai
   khach bao loi. Thay vao do cho rieng ten co dan (min-width:0): the so hieu luon
   o lai dong dau, ten dai qua thi tu ngat dong ben trong cot cua no.
   baseline de chu tren the va ten co so nam tren cung mot duong chan chu. */
.mxl-place__head { display: flex; align-items: baseline; gap: 10px; }
.mxl-place__no {
	flex: none; display: inline-flex; align-items: center;
	background: var(--mxh-tint-2); border-radius: 999px; padding: 5px 12px;
	font-size: 11px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--mxh-green-deep);
}
.mxl-place__name { min-width: 0; font-weight: 900; font-size: 18px; line-height: 1.3; letter-spacing: .2px; color: var(--mxh-orange); }
.mxl-place__addr { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--mxh-ink-2); }
.mxl-place__addr svg { flex: none; margin-top: 2px; }
.mxl-place__acts {
	margin-top: auto; padding-top: 13px; border-top: 1px solid var(--mxh-line-3);
	display: flex; align-items: center;
}
.mxh .mxl-place__act { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--mxh-green-deep); }
.mxh .mxl-place__act:hover { color: var(--mxh-orange); }

/* Dai lien he cuoi trang trung tam. */
.mxl-contact {
	max-width: 1200px; margin: 15px auto 15px;
	background: var(--mxh-tint); border: 1px solid var(--mxh-line-3); border-radius: 20px;
	padding: 22px 28px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 28px; align-items: center;
}
.mxl-contact__row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--mxh-ink-2); }
.mxl-contact__row svg { flex: none; margin-top: 2px; }
.mxl-contact__row strong { font-weight: 800; color: var(--mxh-ink); }
.mxh .mxl-contact__row a { color: inherit; }
.mxh .mxl-contact__row a:hover { color: var(--mxh-orange); }

/* ==================================================== Thanh tich (2 trang) ==
   Bai viet that cua chuyen muc Thanh tich hoc sinh. Dung lai .mxl-newscard cua
   khoi tin ben duoi nhung xep 4 cot thay vi 3, de hai khoi lien nhau khong
   nhin nhu mot khoi bi lap lai. */
.mxl-winsgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.mxl-winsgrid .mxl-newscard__title { font-size: 14.5px; -webkit-line-clamp: 2; }

/* ================================================= Tin tuyen sinh (2 trang) == */
.mxl-newsgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.mxh .mxl-newscard {
	display: flex; flex-direction: column; gap: 12px; background: #FFFFFF;
	border: 1px solid var(--mxh-line-2); border-radius: 16px; padding: 14px;
	box-shadow: 0 8px 22px rgba(34,48,28,.05); color: inherit;
}
.mxh .mxl-newscard:hover { box-shadow: 0 14px 30px rgba(34,48,28,.11); color: inherit; }
/* 1:1 cho khop anh thumb tin (admin ep ve 400x400) - 4:3 cat mat 1/4 anh. */
.mxl-newscard__img { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--mxh-tint); display: block; }
.mxl-newscard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gioi han 3 dong: tieu de tin dai ngan rat khac nhau, khong chan thi cac the lech nhau. */
.mxl-newscard__title {
	font-weight: 800; font-size: 15.5px; line-height: 1.45; color: var(--mxh-ink);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mxl-newscard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mxl-newslist { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px 26px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--mxh-line-3); }
.mxh .mxl-newslist a { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--mxh-ink); }
.mxh .mxl-newslist a:hover { color: var(--mxh-orange); }
.mxl-newslist i { flex: none; margin-top: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--mxh-green); }

/* ======================================= Bang thay co (trang giao vien) ==
   Mui ten dat NGOAI khung nen .mxg-teachers la luoi 48px / con lai / 48px. */
.mxg-teachers { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; gap: 16px; align-items: center; }
.mxh .mxg-arrow {
	width: 48px; height: 48px; border-radius: 999px;
	border: 1.5px solid var(--mxh-frame); background: #FFFFFF; color: var(--mxh-green-text);
	cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.mxh .mxg-arrow:hover { border-color: var(--mxh-green); color: var(--mxh-green); }
/* Ghim ve hai mep ngoai cua cot 48px, de mui ten khong troi vao giua neu
   cot rong ra. Hai class nay cung la cho lophoc.js bat su kien. */
.mxg-arrow--prev { justify-self: start; }
.mxg-arrow--next { justify-self: end; }
.mxg-view { overflow: hidden; }
/* 4 the mot trang: moi the = (100% - 3 khoang 20px) / 4. Track rong dung 100%
   khung nen 8 the tran ra phai va bi cat - dung y do.
   Doi trang bang transform: mot trang di duoc 100% + 20px (be rong khung cong
   mot khoang), cong thuc nay dung voi moi so the/trang (xem lophoc.js). */
.mxg-track { display: flex; gap: 20px; align-items: stretch; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.mxg-card {
	flex: 0 0 calc((100% - 60px) / 4);
	display: flex; flex-direction: column; gap: 12px;
	background: #FFFFFF; border: 1px solid var(--mxh-line-2); border-radius: 18px;
	padding: 14px 14px 16px; text-align: left; font-family: inherit;
	box-shadow: 0 8px 22px rgba(34,48,28,.05); cursor: pointer;
	transition: box-shadow .18s, transform .18s, border-color .18s;
}
.mxg-card:hover { box-shadow: 0 16px 32px rgba(34,48,28,.12); transform: translateY(-2px); }
/* The dang chon (lophoc.js gan .is-active, cung ten voi cac dot cua homev2.css):
   vien xanh dam + bong day hon, de thay ro la bam duoc. */
.mxg-card.is-active { border-color: var(--mxh-green); box-shadow: 0 16px 34px rgba(94,164,54,.20); }
/* Anh chan dung deu 264x310 nen khung lay dung ti le do: khong cat mat nguoi
   nhu khung 4:3 truoc day, va moi the cao bang nhau. */
.mxg-card__photo { border-radius: 12px; overflow: hidden; background: var(--mxh-tint); aspect-ratio: 264 / 310; }
.mxg-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.mxg-card__name { font-weight: 900; font-size: 17px; line-height: 1.3; color: var(--mxh-orange); }
/* Cac dong gioi thieu. So dong moi thay co mot khac (3 hoac 4) nen khong dat
   chieu cao co dinh; align-items: stretch cua .mxg-track lo cho cac the bang nhau. */
.mxg-card__lines { display: flex; flex-direction: column; gap: 7px; }
.mxg-card__line {
	position: relative; padding-left: 15px;
	font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--mxh-ink-2);
}
/* Dau cham dau dong: ve bang CSS vi the nam trong <button>, khong dung <ul> duoc. */
.mxg-card__line::before {
	content: ''; position: absolute; left: 0; top: 7px;
	width: 6px; height: 6px; border-radius: 999px; background: var(--mxh-green);
}
.mxg-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; }
.mxg-dots button {
	width: 9px; height: 9px; background: #CBDCBD; border-radius: 999px; border: none; padding: 0;
	cursor: pointer; transition: width .25s ease, background .25s ease;
}
.mxg-dots button.is-active { width: 26px; background: var(--mxh-green); }

/* ===================================================== Responsive: 1264 ==
   .mxh-section rong toi da 1264px (homev2.css) nen tu 1264 tro len khung khong
   gian ra nua - do la be rong duy nhat ma 4 the khoa hoc con du cho chu.
   Hep hon thi moi the chi con 174-226px chu, doan mo ta can le hai ben bi gian
   chu ra 3.5-4.9 lan dau cach. Ha xuong 2 the mot hang: 4 khoa thanh luoi 2x2
   can doi, xuong 3 the thi hang duoi tro troi mot the. */
@media (max-width: 1263px) {
	.mxl-courses { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===================================================== Responsive: 1180 == */
@media (max-width: 1179px) {
	/* Cot loi the thu lai truoc, video van la phan quan trong nhat. */
	.mxl-showcase { grid-template-columns: minmax(0,1fr) 280px; gap: 22px; }
	.mxl-course__title { font-size: 17px; }
	.mxl-place__name { font-size: 17px; }
	/* 4 the thay co o be rong nay con ~230px, chu con doc duoc nhung the anh
	   bat dau chat - ha xuong 3 the mot trang (JS doc lai so nay). */
	.mxg-card { flex: 0 0 calc((100% - 40px) / 3); }
}

/* ===================================================== Responsive: 1040 == */
@media (max-width: 1039px) {
	.mxl-hero { padding: 32px 18px 28px; }
	.mxl-head__title { font-size: 28px; }
	.mxl-head__desc { font-size: 15px; }

	/* Video xuong tren, loi the xuong duoi. */
	.mxl-showcase { grid-template-columns: minmax(0,1fr); gap: 24px; }
	.mxl-places { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.mxl-winsgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.mxl-newsgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.mxl-newslist { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.mxl-contact { grid-template-columns: minmax(0,1fr); gap: 12px; }
	.mxg-card { flex: 0 0 calc((100% - 20px) / 2); }
}

/* ====================================================== Responsive: 760 == */
@media (max-width: 759px) {
	.mxl-hero { padding: 26px 16px 24px; }
	.mxl-head { gap: 14px; }
	.mxl-head__title { font-size: 23px; line-height: 1.3; }
	.mxl-head__desc { font-size: 14.5px; line-height: 1.7; text-align: left; }

	/* Nut goi hanh dong nhac lai: 54px cao, tren nguong vung bam 44px. */
	.mxl-cta { display: block; padding: 18px 16px 0; }
	.mxh .mxl-cta a {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		background: var(--mxh-orange); color: #FFFFFF; border-radius: 999px;
		min-height: 54px; padding: 0 22px;
		font-size: 16px; font-weight: 800; letter-spacing: .3px;
		box-shadow: 0 12px 26px rgba(242,102,38,.28);
	}
	.mxh .mxl-cta a:hover { background: var(--mxh-orange-dark); color: #FFFFFF; }

	/* Dai chon lop: cuon ngang thay vi xuong 3 dong. */
	.mxl-video__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
	.mxl-video__tabs button { flex: none; font-size: 13px; padding: 8px 14px; }
	.mxl-perk span { font-size: 13px; }

	.mxl-courses { grid-template-columns: minmax(0,1fr); gap: 18px; }
	.mxl-course__body { padding: 18px; gap: 12px; }
	.mxl-course__title { font-size: 17.5px; }
	.mxl-course__art { min-height: 152px; padding: 16px 16px 20px; }
	.mxl-course__kicker { font-size: 14px; }
	.mxl-course__name { font-size: 20px; }

	.mxl-places { grid-template-columns: minmax(0,1fr); gap: 12px; }
	.mxl-place { padding: 15px 16px 14px; }
	.mxl-place__addr { font-size: 13.5px; }

	/* Thanh tich: 2 the mot hang o dien thoai, anh 4:3 nen van doc duoc tieu de. */
	.mxl-winsgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
	.mxh .mxl-winsgrid .mxl-newscard { padding: 10px; gap: 9px; }
	.mxl-winsgrid .mxl-newscard__title { font-size: 13.5px; }
	/* 8 the anh 4:3 xep doc la qua dai tren dien thoai. Giu 4 the, con lai da co
	   trong trang chuyen muc ma nut "Xem tat ca" ngay ben duoi tro toi. */
	.mxl-winsgrid .mxl-newscard:nth-child(n+5) { display: none; }

	/* 3 the tin anh 4:3 xep doc la ~750px toan anh. Giu the dau, hai tin con lai
	   da co trong danh sach ngay ben duoi. */
	.mxl-newsgrid { grid-template-columns: minmax(0,1fr); gap: 14px; }
	.mxl-newsgrid .mxl-newscard:nth-child(n+2) { display: none; }
	.mxl-newslist { grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 18px; padding-top: 18px; }
	.mxh .mxl-newslist a { font-size: 14px; padding: 11px 0; border-bottom: 1px solid var(--mxh-line-2); }
	.mxh .mxl-newslist a:last-child { border-bottom: none; }

	/* Mot the thay co moi trang; ca the la mot nut nen vung bam rat rong. */
	.mxg-teachers { grid-template-columns: 40px minmax(0,1fr) 40px; gap: 10px; }
	.mxh .mxg-arrow { width: 40px; height: 40px; }
	.mxg-card { flex: 0 0 100%; border-radius: 16px; }
	.mxg-card__name { font-size: 18px; }
	.mxg-card__line { font-size: 13.5px; }
	.mxg-dots { margin-top: 20px; gap: 7px; }

	.mxl-contact { margin-top: 22px; padding: 18px 16px; border-radius: 16px; }
}