# ContainerNode

Block container có max-width cố định, căn giữa theo chiều ngang. Dùng để tạo section có width bị giới hạn (ví dụ: content area trong một full-width background section).

## Resolved name

`Container`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |

`hidden` hỗ trợ responsive: `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.

### `sx` props

```ts
sx?: {
  // size
  height?: number | string

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // background
  backgroundColor?: string
  backgroundImage?: string
  backgroundPosition?: string
  backgroundRepeat?: string
  backgroundSize?: string
  backgroundAttachment?: string
  background?: string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { BoxNode, ContainerNode } from '@janbox/storefront-builder';

// Full-width background, content bị giới hạn width
<BoxNode sx={{ backgroundColor: '#f5f5f5' }}>
  <ContainerNode sx={{ paddingTop: 48, paddingBottom: 48 }}>
    ...
  </ContainerNode>
</BoxNode>

// Responsive padding
<ContainerNode
  sx={{
    paddingTop: 24,
    paddingBottom: 24,
    md: {
      paddingTop: 48,
      paddingBottom: 48,
    },
  }}
>
  ...
</ContainerNode>
```

## Rules

- **Canvas**: yes — chứa bất kỳ node con nào.
- **canMoveIn**: không giới hạn node type.