/* WP SkinMan Core — QUY CHUẨN KHOẢNG CÁCH (dùng chung mọi website chạy WP SkinMan; owner 13/10/2026 20:07)
   Module "spacing" (modules/layout/spacing.php) nạp tệp này ở mọi trang.
   Chỉ có 2 chỗ chỉnh:
   (a) Lề mép trang: Customizer của Blocksy → General → Layout → Content Edge Spacing (theo máy tính / máy tính bảng / điện thoại).
       Web Nam Long đặt điện thoại 4% mỗi bên (khoảng 16px ở màn 390px). Mọi dải tràn ngang (nền xanh, chân trang) tự theo số này.
   (b) Các biến ngay dưới đây: lề trong của khung có nền / có viền, khung lồng trong khung, thụt đầu dòng danh sách.
   Quy tắc trên điện thoại (dưới 690px):
   - Chữ trong cột, nhóm KHÔNG có nền, KHÔNG có viền: thẳng hàng với mép khung nội dung (bỏ padding viết tay trong khối, kể cả padding
     10–35px chuyển từ web cũ).
   - Khung có nền hoặc viền: lề trong --skm-box-pad; khung có nền nằm trong khung có nền: --skm-box-pad-nested.
   - Danh sách: thụt --skm-list-indent thay vì 40px của trình duyệt.
   - Chân trang: logo + chữ đứng cạnh nhau (nhóm "không xuống dòng") được xuống dòng để chữ không bị đẩy vào giữa. */
:root {
	--skm-edge: calc((100vw - var(--theme-container-edge-spacing, 92vw)) / 2);
	--skm-box-pad: 16px;
	--skm-box-pad-nested: 12px;
	--skm-list-indent: 1.25em;
	--skm-footer-logo: 72px;   /* logo chân trang trên điện thoại (nằm trên dòng chữ) */
}
@media (max-width: 689.98px) {
	/* Vùng áp dụng: nội dung trang/bài, nội dung dưới danh mục, mô tả sản phẩm, các vùng đầu/chân trang dựng bằng khối */
	:is(.entry-content, .skm-term-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .skm-zone)
	:is(.wp-block-column, .wp-block-columns, .wp-block-group):not(.has-background):not(.has-border-color):not([style*="border-width"]):not([style*="border-style"]):not(.alignfull):not(.skm-zone__inner > *) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	:is(.entry-content, .skm-term-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .skm-zone)
	:is(.wp-block-column, .wp-block-columns, .wp-block-group):is(.has-background, .has-border-color, [style*="border-width"], [style*="border-style"]):not(.alignfull) {
		padding-left: var(--skm-box-pad) !important;
		padding-right: var(--skm-box-pad) !important;
	}
	:is(.entry-content, .skm-term-content, .skm-zone) :is(.has-background, .has-border-color)
	:is(.wp-block-column, .wp-block-columns, .wp-block-group):is(.has-background, .has-border-color):not(.alignfull) {
		padding-left: var(--skm-box-pad-nested) !important;
		padding-right: var(--skm-box-pad-nested) !important;
	}
	/* Dải tràn ngang có nền trong nội dung: lề bằng lề mép trang. Dải không có nền (ví dụ banner đầu trang chủ tự lo lề bên trong) để nguyên.
	   Vùng đầu/chân trang: hàng ngoài cùng luôn lấy lề mép trang (nền nằm ở chính vùng). */
	.entry-content > .alignfull.has-background,
	.skm-zone__inner > :is(.wp-block-group, .wp-block-columns),
	.skm-zone__inner > .wp-block-group > .alignfull {
		padding-left: var(--skm-edge) !important;
		padding-right: var(--skm-edge) !important;
	}
	/* Khối "tràn ngang" nằm trong khung nội dung (nội dung dưới danh mục): cho tràn ra hết bề ngang màn hình như ở trang thường,
	   chữ bên trong thẳng hàng với mép trang (không cộng thêm lề khung). */
	.skm-term-content > .alignfull {
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: var(--skm-edge) !important;
		padding-right: var(--skm-edge) !important;
	}
	:is(.entry-content, .skm-term-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .skm-zone)
	:is(ul.wp-block-list, ol.wp-block-list, ul:not([class]), ol:not([class])) {
		padding-left: var(--skm-list-indent);
	}
	[class*="skm-zone--footer"] .wp-block-group.is-nowrap { flex-wrap: wrap; }
	[class*="skm-zone--footer"] .wp-block-group.is-nowrap > .wp-block-image img { width: var(--skm-footer-logo) !important; }
	/* Hộp của WP SkinMan Core (mục lục, cam kết, báo giá, sản phẩm cùng loại, tin tức) */
	:is(.optionman-toc__box, .skm-promises, .skm-cta, .skm-related, .skm-news) {
		padding-left: var(--skm-box-pad);
		padding-right: var(--skm-box-pad);
	}
}