/**
 * Mobile/tablet overrides for the design template (assets/gepmath/css/style.css).
 * style.css is a compiled export with no SCSS source, so responsive fixes live here
 * and load last. Everything except the empty-cart button and the admin-bar reset
 * sits inside a max-width query, so desktop layouts are untouched.
 */

/* Core adds class "mobile" to #wpadminbar on mobile UAs, so the theme's drawer
   rules (.mobile: translateX(-100%), overflow hidden, flex) hit the admin bar
   and pushed it off-screen for logged-in users. Undo them. */
#wpadminbar.mobile {
	bottom: auto;
	display: block;
	overflow: visible;
	border-top: 0;
	transform: none;
	transition: none;
}

/* ---------- Shared: forms, tap targets ---------- */
@media screen and (max-width: 768px) {
	/* Safari iOS zooms into any field under 16px. */
	input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	select,
	textarea {
		font-size: 16px !important;
	}

	.header .mncart-btn {
		min-width: 4rem;
		min-height: 4rem;
	}

	/* Drawer menu rows: 44px tap height. */
	.mobile-nav .menu-list > .menu-item > a,
	.mobile-nav .menu-list .menu-list .menu-item > a {
		display: flex;
		align-items: center;
		min-height: 4.4rem;
	}

	.mobile-nav .menu-list > .menu-item > a {
		font-size: 1.6rem;
		font-weight: 500;
	}

	.mobile-nav .menu-list .menu-item > a i {
		margin-left: auto;
		width: 4.4rem;
		height: 4.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* MobileModule.js adds a chevron to every link inside a dropdown, including
	   leaf items that have nothing to expand. */
	.mobile-nav .menu-list .menu-list .menu-item:not(.dropdown):not(.mega) > a > i {
		display: none;
	}

	/* Posts/courses without a featured image: keep a tinted box instead of blank space. */
	.nws-img-inner {
		background-color: var(--input);
	}
}

/* ---------- Home hero (.bnh) ---------- */
@media screen and (max-width: 1000px) {
	.bnh-row {
		flex-direction: column;
	}

	.bnh-col:nth-child(1),
	.bnh-col:nth-child(2) {
		width: 100%;
	}

	.bnh-desc {
		gap: 3.2rem;
		padding-bottom: 2.4rem;
	}

	.bnh .title-pri {
		line-height: 1.25;
	}

	.bnh-img {
		width: 100%;
		max-width: 36rem;
		margin: 0 auto;
	}

	.bnh .bnh-robot-inner {
		width: 16rem;
	}

	.bnh .decor {
		width: 30vw;
		top: auto;
		bottom: 18%;
		right: 4%;
	}

	.bnh-bottom .bnh-tt {
		--f-sz: 7.2rem;
	}

	/* Orange spiral sat on top of the heading once the columns stacked. */
	.bnh .footer-head-decor {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	/* The fixed side tab covered text in every section on phones; the hero
	   already shows the same "Đăng ký học thử" button above the fold. */
	.bnh-link {
		display: none;
	}
}

/* ---------- Home quote + stats (.infoh) ---------- */
@media screen and (max-width: 1000px) {
	.infoh-item,
	.infoh-item:nth-child(n) {
		width: 50%;
		--rtop: 0;
		--rright: 0;
		--rbottom: 0;
		--rleft: 0;
	}

	.infoh-item:nth-child(n) .infoh-item-inner {
		--ptop: 2.8rem;
		--pbottom: 2.8rem;
		--pleft: 1.6rem;
		--pright: 1.6rem;
		align-items: flex-start;
	}

	/* Quote and photo take a full row; stats pair up 2 × 3. */
	.infoh-item:nth-child(1),
	.infoh-item:nth-child(4) {
		width: 100%;
	}

	.infoh-item:nth-child(1) .infoh-item-inner {
		--ptop: 4rem;
		--pbottom: 3.2rem;
	}

	.infoh-item:nth-child(2) { --rtop: 3.2rem; }
	.infoh-item:nth-child(3) { --rright: 3.2rem; }
	.infoh-item:nth-child(8) { --rbottom: 3.2rem; --rleft: 3.2rem; }

	.infoh-item:nth-child(4) .infoh-item-inner {
		--ptop: 0;
		--pbottom: 0;
		--pleft: 0;
		--pright: 0;
	}

	.infoh-item:nth-child(4) .infoh-inner,
	.infoh-item:nth-child(4) .infoh-img,
	.infoh-item:nth-child(4) .infoh-img .inner {
		width: 100%;
	}

	.infoh-item:nth-child(4) .infoh-img img {
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		display: block;
	}

	.infoh-item:nth-child(7) .infoh-item-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.infoh-desc {
		gap: 1.6rem;
	}

	.infoh-desc .ic {
		width: 3.6rem;
	}

	.infoh-desc .tt {
		line-height: 1.4;
	}

	.infoh-item .numb {
		line-height: 1;
	}

	.infoh-item .text {
		font-size: 1.5rem;
		line-height: 1.4;
	}

	/* Decorations and the robot were placed for the 3-column desktop grid. */
	.infoh-wr .firestart,
	.infoh-wr .spring,
	.infoh-robot {
		display: none;
	}
}

/* ---------- Course & post grids ---------- */
@media screen and (max-width: 768px) {
	.row.gm-grid > .col-4 {
		width: 50%;
	}
}

@media screen and (max-width: 450px) {
	/* Course archive: two cards per row instead of one full-screen card each. */
	.hot-courses .row.row-3 .col {
		width: 50%;
	}

	.hot-courses .nws,
	.gm-grid .nws {
		gap: 1rem;
	}

	.hot-courses .nws-tt,
	.gm-grid .nws-tt {
		font-size: 1.5rem;
		line-height: 1.4;
	}

	.hot-courses .nws-img,
	.gm-grid .nws-img {
		border-radius: 1.2rem;
	}
}

/* ---------- Home bottom nav bar ---------- */
@media screen and (max-width: 768px) {
	/* Keep the footer and back-to-top clear of the fixed .navbar (home only). */
	body.home .footer {
		padding-bottom: 8rem;
	}

	.back-to-top {
		--wh: 4.4rem;
	}

	/* Lift the bar above the iPhone home indicator. */
	.navbar {
		bottom: calc(1rem + env(safe-area-inset-bottom));
	}
}

/* ---------- My account ---------- */
@media screen and (max-width: 1000px) {
	.myacc.pd-80 {
		padding-top: 2.4rem;
	}

	/* Title on the left, menu button on the same row at the right. The first
	   column is widened by .row's negative margin, so anchor to .myacc-bdy. */
	.myacc-bdy {
		position: relative;
	}

	.myacc-col:nth-child(1) {
		position: static;
	}

	.myacc-head.mb-40 {
		min-height: 4.4rem;
		justify-content: center;
		padding-right: 11rem;
		margin-bottom: 1.6rem !important;
	}

	.myacc-head .myacc-tt {
		text-align: left;
		line-height: 1.3;
	}

	.myacc-side-btn {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		z-index: 16;
		width: auto;
		height: 4.4rem;
		padding: 0 1.6rem;
		gap: .8rem;
		border-radius: 10rem;
		color: var(--color-pri);
		font-weight: 600;
	}

	.myacc-side-btn::after {
		content: 'Menu';
		font-size: 1.4rem;
	}

	.myacc-side-btn.active {
		background-color: var(--color-pri);
		color: var(--white);
	}

	.myacc-side-btn.active i {
		color: var(--white);
	}

	/* The menu drops right under the button instead of a fixed panel near the
	   header, which overlapped the button and clipped "Đăng xuất". */
	.myacc-side {
		position: absolute;
		top: 5.6rem;
		left: auto;
		right: 0;
		width: min(30rem, calc(100vw - 3.2rem));
		max-height: none;
		transform: translateY(-.8rem);
	}

	.myacc-side .myacc-it {
		min-height: 4.4rem;
	}

	.myacc-side.open {
		transform: translateY(0);
	}

	.myacc-dashboard-welcome {
		padding: 2rem;
		margin-bottom: 1.6rem;
		border-radius: 1.6rem;
	}

	.myacc-dashboard-welcome .welcome-title {
		font-size: 1.8rem;
		line-height: 1.3;
		margin-bottom: .8rem;
	}

	.myacc-dashboard-welcome .welcome-text {
		font-size: 1.5rem;
	}

	/* Quick links as a 2 × 2 tile grid instead of four full-width rows. */
	.myacc-dashboard-links {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2rem;
	}

	.myacc-dashboard-link {
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1.6rem;
		min-height: 11.2rem;
		padding: 1.6rem;
		border-radius: 1.6rem;
	}

	.myacc-dashboard-link .link-icon {
		width: 4.4rem;
		height: 4.4rem;
		color: var(--color-pri);
		font-size: 1.8rem;
	}

	.myacc-dashboard-link .link-text {
		font-size: 1.5rem;
		line-height: 1.35;
	}
}

/* ---------- Cart (empty state) ---------- */
@media screen and (max-width: 768px) {
	.woocommerce-cart .wc-empty-cart-message,
	.woocommerce-cart .return-to-shop {
		padding: 0 1.6rem;
	}
}

.woocommerce-cart .return-to-shop {
	text-align: center;
	margin: 2.4rem 0 var(--dist80);
}

.woocommerce-cart .return-to-shop .wc-backward {
	display: inline-flex;
	align-items: center;
	min-height: 4.4rem;
	padding: 0 2.4rem;
	border-radius: 10rem;
	background-color: var(--color-pri);
	color: var(--white);
	font-weight: 600;
}