/**
 * Xếp chồng nội dung trên màn hình hẹp.
 *
 * Trước tệp này, nhiều khối lưới và hàng flex giữ nguyên số cột trên điện thoại
 * nên trang bị kéo ngang thay vì dài xuống. Toàn site có 1.113 khai báo lưới
 * nhiều cột và 1.481 khối flex không khai báo flex-wrap, nên sửa từng trang là
 * không khả thi; ở đây đặt một lớp quy tắc chung cho màn hình nhỏ.
 *
 * Cách viết: bọc trong :where() để độ đặc hiệu bằng 0, cộng với !important.
 * Nhờ vậy quy tắc này thắng mọi khai báo thường của từng trang, nhưng vẫn nhường
 * chỗ cho trang nào đã cố ý đặt !important cho màn hình hẹp.
 *
 * Chỉ áp dụng trong vùng nội dung. Header, mega menu và footer giữ nguyên vì
 * chúng có bố cục riêng và đã chạy đúng.
 */

@media (max-width: 640px) {

	/* Lưới nhiều cột về một cột. Bám theo quy ước đặt tên của theme:
	   518/1.113 khai báo lưới dùng hậu tố -grid, phần còn lại chủ yếu là
	   -list, -cards, -items, -plans, -row, -cols. */
	:where(main, .site-content, .entry-content, .hcpk-page)
	:where(
		[class*="-grid"], [class*="__grid"],
		[class*="-cards"], [class*="__cards"],
		[class*="-plans"], [class*="__plans"],
		[class*="-items"], [class*="__items"],
		[class*="-list"],  [class*="__list"],
		[class*="-cols"],  [class*="__cols"]
	) {
		grid-template-columns: 1fr !important;
	}

	/* Hàng ngang cho xuống dòng thay vì tràn ra ngoài màn hình. */
	:where(main, .site-content, .entry-content, .hcpk-page)
	:where([class*="-row"], [class*="__row"], [class*="-flex"], [class*="__flex"]) {
		flex-wrap: wrap !important;
	}

	/* Con của flex và grid mặc định không co nhỏ hơn nội dung, đây là nguyên
	   nhân tràn ngang phổ biến nhất mà nhìn CSS không thấy. */
	:where(main, .site-content, .entry-content, .hcpk-page)
	:where(div, section, article, ul, ol, dl, figure, p) {
		min-width: 0 !important;
	}

	/* Khối đặt bề rộng cứng lớn hơn màn hình. */
	:where(main, .site-content, .entry-content, .hcpk-page) :where(div, section, article) {
		max-width: 100% !important;
	}

	/* Ảnh và khung nhúng không đẩy trang rộng ra. */
	:where(main, .site-content, .entry-content, .hcpk-page)
	:where(img, video, iframe, svg, canvas) {
		max-width: 100% !important;
		height: auto;
	}

	/* Bảng dữ liệu không xếp chồng được mà vẫn phải đọc theo cột, nên cho cuộn
	   ngang trong chính nó thay vì kéo cả trang. Bảng nào đã nằm trong khung
	   cuộn sẵn thì quy tắc này không đổi gì. */
	:where(main, .site-content, .entry-content, .hcpk-page) table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Chặn kéo ngang ở mức trang. Đặt cuối cùng để dọn nốt phần dư. */
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
 * Bốn khối không theo quy ước đặt tên nên quy tắc chung ở trên không bắt được.
 * Liệt kê đích danh sau khi rà toàn bộ CSS tìm khối rộng tối thiểu vượt 360px.
 * ----------------------------------------------------------------------- */
@media (max-width: 640px) {

	/* Bộ lọc tên miền: 5 cột × 180px = 900px */
	:where(.dva-filters) {
		grid-template-columns: 1fr !important;
	}

	/* Bảng so sánh Email Hybrid: 3 cột × 170px = 510px */
	:where(.ehb-compare-table) {
		grid-template-columns: 1fr !important;
	}

	/* Dải logo đối tác ở trang chủ: 3 cột × 150px = 450px */
	:where(.home-partner-logo-cloud) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Ảnh minh hoạ vCloudStack đặt min-width 760px */
	:where(.vcs-model__media) img {
		min-width: 0 !important;
		width: 100% !important;
	}
}