/* ATX Clean comvn 1.0.2 — article CTA / contact / duplicate-video helpers
   plus mobile content-table wrapping.
   Does not reintroduce Mắt Bão / VIPCOM / mbws public names.
*/

/* The cleanup rewrite maps leftover .mbws-h2 { white-space:nowrap } (short
   homepage titles) onto the design-system class .atx-h2. The end-of-article
   contact heading "Đăng ký tư vấn" also uses .atx-h2 and must be allowed to
   wrap on narrow screens. */
.atx-contact-block h2.atx-h2,
.atx-contact-block .atx-h2,
section.atx-contact h2.atx-h2 {
	white-space: normal !important;
	overflow: visible;
	max-width: 100%;
}

/* On news articles the ate-article plugin already shows a sticky call/Zalo
   bar. The rewritten floating toolbar (.mbws_toolbar → .atx_toolbar) sits at
   right:14px;bottom:90px and overlaps the contact form fields
   ("Chương trình quan tâm", "Lời nhắn") below ~400px viewport width. */
@media (max-width: 768px) {
	body.ate-art .atx_toolbar,
	body.ate-art .atx_toolbar.atx_toolbar_right {
		display: none !important;
	}
	body.ate-art .atx-contact-block {
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	}
	body.ate-art .atx-contact-block .atx-contact-r {
		padding-right: 16px;
	}
}


/* --------------------------------------------------------------------------
   1.0.2 — mobile content tables
   Cause: ate-article.css sets `.ate-table-wrap table { width:100%; min-width:520px }`
   inside `.ate-table-wrap { overflow-x:auto }`. On a ~390px phone the table is
   forced wider than the screen; iOS Safari hides the scrollbar, so the second
   column looks clipped and does not wrap. This is theme/plugin CSS
   (ate-article 1.1.0), not an atx-oneline/nowrap rewrite. The token map does
   rename mbws-nowrap → atx-nowrap, but that class is only used on footer
   tel/email links.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* Two-column article tables must fit the content width and wrap. */
	html body.ate-art .blog-single .entry-content .ate-table-wrap {
		overflow-x: visible;
		max-width: 100%;
	}
	html body.ate-art .blog-single .entry-content .ate-table-wrap table {
		width: 100% !important;
		max-width: 100%;
		min-width: 0 !important;
		table-layout: fixed;
	}
	html body.ate-art .blog-single .entry-content .ate-table-wrap th,
	html body.ate-art .blog-single .entry-content .ate-table-wrap thead td,
	html body.ate-art .blog-single .entry-content .ate-table-wrap td {
		white-space: normal !important;
		overflow: visible !important;
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: normal;
		hyphens: manual;
		padding-left: 10px;
		padding-right: 10px;
	}
	html body.ate-art .blog-single .entry-content .ate-table-wrap table:not(:has(tr > :nth-child(3))) th:first-child,
	html body.ate-art .blog-single .entry-content .ate-table-wrap table:not(:has(tr > :nth-child(3))) td:first-child {
		width: 32%;
	}

	/* Three or more columns: keep a horizontal scroller and show a hint. */
	html body.ate-art .blog-single .entry-content .ate-table-wrap:has(table tr > :nth-child(3)),
	.atx-cmp__w:has(table tr > :nth-child(3)) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}
	html body.ate-art .blog-single .entry-content .ate-table-wrap:has(table tr > :nth-child(3)) table {
		min-width: 640px !important;
		width: max-content !important;
		max-width: none;
		table-layout: auto;
	}
	html body.ate-art .blog-single .entry-content .ate-table-wrap:has(table tr > :nth-child(3))::after,
	.atx-cmp__w:has(table tr > :nth-child(3))::after {
		content: "Vuốt ngang để xem đủ bảng \2192";
		display: block;
		font-size: 12px;
		line-height: 1.4;
		color: #6b6258;
		padding: 8px 12px 10px;
		text-align: right;
		font-weight: 500;
	}
}