/**
 * 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. */
	.hc-wp :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;
	}

	/* Ngoại lệ: bốn khối đặt tên "-grid" nhưng thực chất là slider ngang
	 * (`grid-auto-flow: column` + `overflow-x: auto`). Ép chúng về một cột tạo
	 * ra đúng một rãnh `1fr` co lại còn 42–58px cho thẻ giá đầu tiên, những thẻ
	 * sau rơi vào rãnh tự động nên vẫn rộng bình thường — nhìn như thẻ đầu bị
	 * nghiến nát. Trả chúng về đúng rãnh mà CSS của trang đã tính. */
	.hc-wp .htdrive-pricing-grid,
	.hc-wp .vdb-opensearch-pricing-grid,
	.hc-wp .vdb-redis-pricing-grid,
	.hc-wp .vmks-pricing-grid {
		grid-template-columns: none !important;
	}

	/* Hàng ngang cho xuống dòng thay vì tràn ra ngoài màn hình. */
	.hc-wp :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. */
	.hc-wp :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. */
	.hc-wp :where(main, .site-content, .entry-content, .hcpk-page) :where(div, section, article) {
		max-width: 100% !important;
	}

	/* Ngoại lệ: đường ray của slider chạy bằng JavaScript.
	 *
	 * slick tự đo rồi ghi bề rộng thật vào thuộc tính style — trên trang chủ là
	 * `.slick-track { width: 7866px }` cho 23 slide, mỗi slide `float: left`
	 * rộng 342px. Quy tắc `max-width: 100%` ngay trên đè lên con số đó và ép
	 * đường ray còn 342px, nên 23 slide rơi xuống thành 23 hàng: khối hero cao
	 * 8.540px và cả trang chủ dài 31.409px, phần lớn là khoảng trắng.
	 *
	 * Đây là các phần tử duy nhất trong trang mà bề rộng lớn hơn màn hình là
	 * đúng: chúng nằm trong `.slick-list`/`.splide__track` vốn đã cắt và cuộn.
	 * Độ đặc hiệu của selector lớp (0,1,0) thắng `:where()` ở trên (0,0,0). */
	.hc-wp .slick-list,
	.hc-wp .slick-track,
	.hc-wp .slick-slide,
	.hc-wp .splide__track,
	.hc-wp .splide__list,
	.hc-wp .splide__slide {
		max-width: none !important;
	}

	/* Ảnh và khung nhúng không đẩy trang rộng ra. */
	.hc-wp :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ì. */
	.hc-wp :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ư. */
	div.hc-wp,
	div.hc-wp {
		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 */
	.hc-wp :where(.dva-filters) {
		grid-template-columns: 1fr !important;
	}

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

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

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