import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/# UI/properties/types/Tính tương thích (media, container)'/>

# Tính tương thích (media, container)

Các loại cấu trúc `media` và `container` điều phối việc khởi tạo các quy tắc thích nghi (`@media` và `@container`). Chúng cho phép co giãn giao diện linh hoạt dựa trên kích thước khung nhìn (viewport) hoặc giới hạn của khối cha (parent block).

Hệ thống phân tách làm bốn dạng thức thích nghi chủ đạo, được tích hợp sâu với các điểm dừng (breakpoints) của thiết kế:
- **media**: Khởi tạo điều kiện `min-width` (từ điểm chỉ định trở lên). Nếu truyền hai giá trị (ví dụ `sm,md`), hệ thống sẽ tạo dải giới hạn `(min-width: ...) and (max-width: ...)`.
- **media-max**: Khởi tạo điều kiện `max-width`. Hệ thống tự động trừ đi `1px` từ giá trị breakpoint để tránh xung đột render tại ranh giới chính xác.
- **container** / **container-max**: Vận hành tương tự media query nhưng xuất ra các quy tắc `@container`, cho phép phần tử co giãn theo kích thước của khối cha. Yêu cầu phần tử cha phải được thiết lập `container-type`.

Truy vấn thích ứng có thể được thiết lập thông qua phím tắt sử dụng ký tự phân tách `|` (ví dụ: `media-max|md`) hoặc khai báo tường minh qua thuộc tính `_type`. Giá trị (`value`) chấp nhận cả các điểm dừng được định danh trong hệ thống thiết kế (md, lg) lẫn các đơn vị CSS thô (768px).

**File Cấu hình Đầu vào (`properties.json`):**
```json
{
  "card": {
    "padding": "24px",
    
    "media-max|md": {            // Truy vấn dựa trên Viewport (media-max)
      "padding": "16px"
    },
    
    "mobile": {                  // Khai báo loại tường minh (explicit)
      "_type": "container-max",  // Truy vấn dựa trên Parent (container-max)
      "value": "400px",
      "padding": "8px"
    },
    
    "container-max|lg": {        // Phím tắt container-max
       "padding": "20px"
    }
  }
}
```

**Kết quả Biên dịch Dự kiến (SCSS Output):**
```scss
.card {
  padding: 24px;

  @media (max-width: 960px) {    // media-max|md
    padding: 16px;
  }

  @container (max-width: 400px) { // _type: container-max
    padding: 8px;
  }
  
  @container (max-width: 1200px) { // container-max|lg
    padding: 20px;
  }
}
```

### Tạo nhóm thích ứng (Media Group)

Các loại đặc biệt `media-group`, `media-max-group`, `container-group`, và `container-max-group` cho phép tự động tạo ra một tập hợp các quy tắc thích ứng cho tất cả các điểm dừng (breakpoints) có sẵn được định nghĩa trong hệ thống.

Điều này giúp loại bỏ việc phải viết thủ công từng truy vấn media khi logic thích ứng giống nhau cho các kích thước khác nhau nhưng cần được đóng gói vào các bộ chọn (selectors) riêng biệt.

**Ví dụ cấu hình (`properties.json`):**
```json
{
  "button": {
    "group|icon": {
      "_type": "media-group",
      "padding": "8px"
    }
  }
}
```

**Kết quả Biên dịch (SCSS):**
Khi sử dụng `media-group`, hệ thống sẽ tạo ra các lớp lồng nhau cho mỗi breakpoint bằng cách thêm hậu tố (ví dụ: `iconSm`, `iconMd`):
```scss
.button {
  &--iconSm { @media (min-width: 640px) { padding: 8px; } }
  &--iconMd { @media (min-width: 768px) { padding: 8px; } }
  &--iconLg { @media (min-width: 1024px) { padding: 8px; } }
  // và cứ thế cho tất cả các breakpoints...
}
```
