/**
 * pp-elements-mobile.css — hiển thị bảng giá dạng THẺ trên mobile
 * ---------------------------------------------------------------
 * Mỗi máy (mỗi <tr>) thành 1 thẻ; các <td> xếp dọc "Nhãn : Giá trị" lấy từ
 * data-label. Vẫn giữ nguyên <table> + <thead> ngữ nghĩa (chỉ ẩn bằng CSS)
 * nên bot Google/đọc màn hình vẫn hiểu -> tốt cho SEO & a11y.
 *
 * Áp dụng ≤ 549px. Dùng !important để GHI ĐÈ các rule !important trong
 * pp-elements.css ( .pp-table-scroll{overflow-x:auto!important} và
 * .pp-table{min-width:560px} ) vốn ép cuộn ngang gây tràn/cắt chữ.
 */
@media (max-width: 549px) {

	/* Tắt cuộn ngang, cho bảng co về đúng bề ngang màn hình. */
	.photocopy-pricing-section .pp-table-scroll {
		overflow: visible !important;
	}
	.photocopy-pricing-section .pp-table {
		min-width: 0 !important;
		width: 100% !important;
		display: block;
	}

	/* Ẩn thead nhưng GIỮ trong DOM (SEO + screen-reader). */
	.photocopy-pricing-section .pp-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.photocopy-pricing-section .pp-table tbody { display: block; }

	/* Mỗi máy = 1 thẻ. */
	.photocopy-pricing-section .pp-table tbody tr {
		display: block;
		width: 100%;
		border: 1px solid var(--bd);
		border-radius: var(--ra);
		background: #fff;
		padding: 4px 14px;
		margin-bottom: 12px;
		box-shadow: var(--sh);
		animation: none;           /* tắt fade-in stagger cho gọn */
	}
	.photocopy-pricing-section .pp-table tbody tr:hover {
		transform: none;
		box-shadow: var(--sh);
		background: #fff;
	}

	/* Mỗi ô = 1 hàng "Nhãn .... Giá trị". */
	.photocopy-pricing-section .pp-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		width: 100%;
		padding: 10px 0;
		border: 0;
		border-bottom: 1px solid #eef1f5;
		text-align: right;
		white-space: normal !important;
		word-break: break-word;
	}
	.photocopy-pricing-section .pp-table tbody tr td:last-child {
		border-bottom: 0;
	}

	/* Nhãn cột lấy từ data-label (cột trái, cố định 40%). */
	.photocopy-pricing-section .pp-table td::before {
		content: attr(data-label);
		flex: 0 0 40%;
		max-width: 40%;
		text-align: left;
		font-weight: 700;
		font-size: 12px;
		line-height: 1.35;
		letter-spacing: .2px;
		color: var(--mu);
		text-transform: uppercase;
	}

	/* Phần giá trị: cho phép co & xuống dòng trong 60% còn lại. */
	.photocopy-pricing-section .pp-table td > * { min-width: 0; }

	/* Cột tốc độ: giữ "Nhãn .... giá trị"; ẩn icon đồng hồ (chỉ trang trí). */
	.photocopy-pricing-section .pp-table td.pp-speed {
		justify-content: space-between;
	}
	.photocopy-pricing-section .pp-table td.pp-speed .pp-speedico {
		display: none;
	}
}