## 5. Canonical `assets/css/02-layout.css`

Đây là nội dung canonical đề xuất. Code block này là specification; file CSS thực tế chưa được tạo.

```css
/**
 * Tan Bao Phat shared layout primitives.
 *
 * Scope: neutral containers, section spacing, flow, grids, and card sizing.
 * Excludes homepage, WooCommerce, product, article, header, footer, and mobile menu.
 */

.tbp-layout-container {
	width: min(1180px, calc(100% - 40px));
	margin-inline: auto;
}

.tbp-layout-section {
	padding-block: var(--tbp-layout-section-space, clamp(48px, 7vw, 80px));
}

.tbp-layout-flow > * {
	margin-block: 0;
}

.tbp-layout-flow > * + * {
	margin-block-start: var(--tbp-layout-flow-space, 24px);
}

.tbp-layout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tbp-layout-grid-gap, 24px);
}

.tbp-layout-grid--2,
.tbp-layout-grid--3,
.tbp-layout-grid--4 {
	grid-template-columns: repeat(var(--tbp-layout-columns, 1), minmax(0, 1fr));
}

.tbp-layout-card {
	min-width: 0;
	height: 100%;
}

@media (min-width: 768px) {
	.tbp-layout-grid--2 {
		--tbp-layout-columns: 2;
	}

	.tbp-layout-grid--3,
	.tbp-layout-grid--4 {
		--tbp-layout-columns: 2;
	}
}

@media (min-width: 1024px) {
	.tbp-layout-grid--3 {
		--tbp-layout-columns: 3;
	}

	.tbp-layout-grid--4 {
		--tbp-layout-columns: 4;
	}
}

@media (max-width: 767px) {
	.tbp-layout-container {
		width: calc(100% - 28px);
	}
}

@media (max-width: 479px) {
	.tbp-layout-container {
		width: calc(100% - 24px);
	}
}
```