/* ============================================================
   mobile-fix.css — Vá hiển thị điện thoại.

   Nạp SAU theme.css. Chỉ chứa phần theme.css còn sót:
   1. Header fixed cao hơn biến --topbar-h/--nav-h -> đè lên nội dung.
   2. Lưới khai báo bằng px hoặc "2fr 1.2fr" -> bộ chọn cũ không bắt được.
   3. column-count -> tràn ngang.
   4. Chữ/nút dài -> tràn khung.

   Dùng !important vì phải đè inline style trong HTML.
   ============================================================ */

/* ---------- 1. HEADER: chừa đúng chỗ, không hở ---------- */

@media (max-width: 900px) {
	:root {
		/* Trên điện thoại topbar xuống dòng nên cao hơn 34px.
		   Nới cả hai biến để phần bù padding của body khớp thực tế. */
		--topbar-h: 42px;
		--nav-h: 60px;
	}

	/* Chốt chặn: dù biến sai, nội dung vẫn không chui xuống dưới header. */
	.nve-header-shell {
		position: fixed;
	}

	/* Topbar: cho xuống dòng, canh giữa, không ép một hàng. */
	.nve-topbar {
		height: auto !important;
		min-height: var(--topbar-h);
		padding: 5px 0;
	}
	.nve-topbar-inner {
		padding: 0 14px !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 14px;
		height: auto !important;
		font-size: 13.5px;
	}
}

@media (max-width: 520px) {
	:root {
		--topbar-h: 40px;
		--nav-h: 56px;
	}
	.nve-topbar-inner {
		font-size: 12.5px;
	}
}

/* ---------- 2. LƯỚI: mọi kiểu khai báo -> một cột ---------- */

@media (max-width: 768px) {
	/* Lưới có cột cố định bằng px: "1fr 260px", "300px 1fr"... */
	[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}

	/* Lưới nhiều cột bằng fr: "2fr 1.2fr 1fr 1.2fr" */
	[style*="grid-template-columns:repeat"],
	[style*="grid-template-columns: repeat"] {
		grid-template-columns: 1fr !important;
	}

	/* Chia cột kiểu báo (column-count) -> một cột. */
	[style*="column-count"] {
		column-count: 1 !important;
	}

	/* Bảng rộng -> cuộn ngang trong khung, không đẩy cả trang. */
	table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
}

/* ---------- 3. KHÔNG TRÀN NGANG ---------- */

@media (max-width: 768px) {
	/* Chặn tràn ngang toàn trang. */
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Ảnh, video, iframe co theo khung. */
	img,
	video,
	iframe,
	svg {
		max-width: 100% !important;
		height: auto;
	}

	/* Phần tử đặt chiều rộng cứng > khung điện thoại. */
	[style*="width:320px"],
	[style*="width:360px"],
	[style*="width:400px"],
	[style*="min-width:320px"],
	[style*="min-width:360px"],
	[style*="min-width:400px"] {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* Chữ dài (email, URL) tự ngắt dòng thay vì đẩy khung. */
	a,
	p,
	h1,
	h2,
	h3,
	li,
	td,
	span {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Nút: cho xuống dòng, không ép một hàng. */
	[style*="white-space:nowrap"] {
		white-space: normal !important;
	}

	/* Nút dài (Gửi CV: email...) -> vừa khung, canh giữa. */
	a[style*="border-radius:999px"] {
		max-width: 100%;
		text-align: center;
		white-space: normal !important;
	}
}

/* ---------- 4. KHOẢNG ĐỆM: bớt cho vừa màn hình nhỏ ---------- */

@media (max-width: 768px) {
	/* Section padding ngang 32px+ -> 16px cho rộng chỗ đọc. */
	[style*="padding:72px 32px"],
	[style*="padding:0 32px"],
	[style*="padding:96px 32px"],
	[style*="padding:88px 32px"] {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Ô nội dung có padding lớn -> vừa phải. */
	[style*="padding:26px 30px"],
	[style*="padding:26px 24px"] {
		padding: 20px 16px !important;
	}
}

@media (max-width: 520px) {
	[style*="padding-left:16px"] {
		padding-left: 14px !important;
	}
	[style*="padding-right:16px"] {
		padding-right: 14px !important;
	}
}

/* ---------- 5. VÙNG CHẠM: đủ lớn để bấm ---------- */

@media (max-width: 768px) {
	/* Google khuyến nghị vùng chạm tối thiểu 44px. */
	.nve-navbar a,
	.nve-mobile-nav a,
	button,
	[role="button"] {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Ô nhập: 16px trở lên để iOS không tự phóng to trang. */
	input,
	select,
	textarea {
		font-size: 16px !important;
		max-width: 100%;
	}
}