microsoft___style_reference:
  info: "> Corporate blue retail catalog — tưởng tượng logo 4 ô vuông trên nền sàn trưng bày trắng với một điểm nhấn xanh duy nhất dẫn dắt mọi tương tác."

  theme: "light"

  info: "Microsoft.com là một bề mặt store-and-marketing doanh nghiệp: một canvas gần trắng được điểm xuyết bởi một màu xanh doanh nghiệp sống động duy nhất, với các product card nổi trên độ cao nhẹ (subtle elevation) và hero banner một màu. Segoe UI vận hành toàn bộ hệ thống — một humanist grotesque mang phong cách tiện dụng và tự tin, không mang tính editorial. Nhịp điệu thị giác tuân theo grid: hàng sản phẩm 4 cột, các dải max-width căn giữa, và các hero section xen kẽ giữa ảnh chụp lifestyle pha xanh và card overlay trắng tinh. Các component cảm giác nhẹ, phẳng và chức năng — radii tối thiểu, border mảnh, một shadow stack duy nhất, không có decorative gradient — để ảnh sản phẩm đảm nhận phần nặng về thị giác, trong khi accent xanh đánh dấu mọi hành động."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Microsoft Blue | `#0067b8` | `--color-microsoft-blue` | Primary action background, link text, navigation accents, icon strokes — thẩm quyền màu sắc duy nhất trong hệ thống, dùng cho mọi CTA dạng filled và interactive highlights |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page background, card surfaces, button text trên nền xanh, surface elevation |"
    info: "| Mist Gray | `#f2f2f2` | `--color-mist-gray` | Footer background, subtle surface tone, page canvas bên dưới card |"
    info: "| Carbon Black | `#000000` | `--color-carbon-black` | Primary text, card borders, hairline dividers — màu typographic và cấu trúc chủ đạo |"
    info: "| Steel Gray | `#616161` | `--color-steel-gray` | Secondary text, navigation text, muted UI elements, footer copy |"
    info: "| Graphite | `#262626` | `--color-graphite` | Body text variant, list borders, navigation dividers, secondary headings |"
    info: "| Deep Charcoal | `#171717` | `--color-deep-charcoal` | Dense text blocks, list separators, button border variant — màu neutral tối nhất sau pure black |"

  tokens___typography:

    segoe_ui___typeface_duy_nhất_trên_toàn_bộ_hệ_thống___navigation__body__headings__buttons__footer__weight_400_là_workhorse__weight_600_dành_riêng_cho_headings_và_button_labels_để_tạo_contrast_giữa_các_section_mà_không_cần_đổi_font_family__tỉ_lệ_humanist_và_open_apertures_của_segoe_ui_mang_lại_cho_hệ_thống_giọng_điệu_điềm_tĩnh__tự_tin_của_doanh_nghiệp___type_không_biểu_diễn__nó_cung_cấp_thông_tin_____font_segoe_ui:
      - "**Thay thế:** Open Sans, Source Sans Pro, hoặc system-ui — các lựa chọn miễn phí có chung DNA humanist grotesque với Segoe UI"
      - "**Weights:** 400, 600"
      - "**Kích thước:** 11px, 13px, 14px, 15px, 16px, 29px, 37px"
      - "**Line height:** 1.00–2.27 (thay đổi theo ngữ cảnh: 1.0 cho nav icons, 1.2 cho hero, 1.33–1.5 cho body, 2.27 cho hero subtext)"
      - "**Vai trò:** Typeface duy nhất trên toàn bộ hệ thống — navigation, body, headings, buttons, footer. Weight 400 là workhorse; weight 600 dành riêng cho headings và button labels để tạo contrast giữa các section mà không cần đổi font family. Tỉ lệ humanist và open apertures của Segoe UI mang lại cho hệ thống giọng điệu điềm tĩnh, tự tin của doanh nghiệp — type không biểu diễn, nó cung cấp thông tin."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1 | — | `--text-caption` |"
      info: "| heading-sm | 29px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 37px | 1.2 | — | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 2px |"
      info: "| cards | 0px |"
      info: "| inputs | 2px |"
      info: "| buttons | 2px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.13) 0px 3px 7px 0px, rgba(0, 0, 0, 0.11) ...` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    primary_action_button:
      vai_trò: "Filled CTA dùng cho 'Mua ngay', 'Tải xuống ngay', 'Tham gia ngay', 'Tìm hiểu thêm'"

      info: "Background #0067b8, text #ffffff, Segoe UI weight 600, 15px, 2px border-radius, padding dọc 12px × ngang 16px, không border. Khoảng cách 8px giữa icon và label. Text trên nền xanh đặc, không có outlined variant — chromatic filled là kiểu CTA duy nhất."

    ghost_text_link:
      vai_trò: "Inline links trong navigation rows, card text links, footer links"

      info: "Không background, không border. Text #0067b8, Segoe UI weight 400, 15px. Underline xuất hiện khi hover. Khoảng cách 7–8px giữa icon và text. Màu xanh của link đảm nhận tất cả — không cần button chrome."

    product_card:
      vai_trò: "Grid card cho Surface, Xbox, phụ kiện và khuyến mãi phần mềm"

      info: "Bề mặt trắng (#ffffff) với hairline border (1px #000000 hoặc gần đen ở độ mờ thấp). Không border-radius. Card shadow: rgba(0,0,0,0.13) 0px 3px 7px 0px + rgba(0,0,0,0.11) 0px 1px 2px 0px. Ảnh sát mép trên, padding 24px cho khối text. Headline Segoe UI 600 cỡ 24–29px, description weight 400 cỡ 14–15px, CTA button ở dưới cùng."

    hero_card_overlay:
      vai_trò: "Card text trắng xếp chồng lên hero ảnh xanh"

      info: "Background trắng (#ffffff), padding 32–48px, không border, không radius. Headline Segoe UI 600 cỡ 29–37px màu #000000. Body text 15px weight 400. Primary button bên dưới. Card được đặt lệch trái trên nền ảnh hero full-bleed màu xanh."

    category_icon_link:
      vai_trò: "Icon + label links cho 'Mua laptop Surface', 'Mua console và game Xbox', v.v."

      stack_căn_giữa: "icon line đơn giản (24px) phía trên label. Label màu #0067b8, Segoe UI 400, 15px. Khoảng cách 5–8px giữa icon và text. Không background, không border. Sắp xếp thành hàng 5 cột với khoảng cách đều nhau."

    top_navigation_bar:
      vai_trò: "Sticky header với logo Microsoft, product links và account controls"

      info: "Background trắng. Logo Microsoft (4-color square) căn trái. Nav links Segoe UI 400, 15px, màu #616161 hoặc #000000. Cụm căn phải: dropdown, search, cart icon, sign-in button (circular avatar hoặc text). Padding ngang 8px trên links. Không visible border-bottom."

    hero_banner:
      vai_trò: "Full-width promotional section với ảnh sản phẩm hoặc lifestyle"

      info: "Full-bleed background image (blue gradient hoặc ảnh lifestyle). White card overlay đặt trái hoặc giữa. Bên phải có thể chứa product render. 'Copilot+PC' hoặc tên sản phẩm bằng text trắng lớn Segoe UI 600 xếp chồng lên ảnh. Dot-pagination indicator bên dưới."

    carousel_pagination_dots:
      vai_trò: "Slide indicator cho hero carousel"

      info: "Hàng các chấm tròn nhỏ, đường kính ~8px. Active dot filled #000000, inactive dots outlined hoặc #616161. Đi kèm mũi tên chevron trái/phải. Click targets 40px+."

    feature_band:
      vai_trò: "Full-width promotional section (ví dụ: Microsoft Edge, AI for Earth)"

      info: "Full-bleed ảnh nền lifestyle/landscape. White card overlay (padding 32px) chứa heading, description và CTA. Ảnh kéo dài edge-to-edge. Khối text căn trái bên trong overlay card."

    section_heading_group:
      vai_trò: "Khối text phía trên card grid hoặc content row"

      info: "Segoe UI 600, 24–29px, #000000. Subtext tùy chọn cỡ 15px weight 400, #616161. Margin-bottom 16–20px trước khi grid bắt đầu."

    4_column_card_grid:
      vai_trò: "Product hoặc content grid layout"

      info: "4 cột bằng nhau với gap 16–24px. Mỗi ô là một Product Card. Grid nằm bên trong max-width container với padding ngang đối xứng."

    footer:
      vai_trò: "Site-wide footer với links và legal"

      info: "Background #f2f2f2. Links Segoe UI 400, 13px, #616161. Tổ chức thành danh sách nhiều cột. Top border hoặc separator. Copyright và legal text cỡ 11–13px."

    back_to_top_button:
      vai_trò: "Floating scroll-to-top control"

      info: "Fixed góc dưới phải. Background trắng, border 1px #000000, radius 2px. Text 'Lên đầu trang' Segoe UI 400, 13px, #000000. Icon mũi tên lên. Shadow nhỏ để tạo độ nổi."

  do_s_and_don_ts:

    nên:
      - "Dùng #0067b8 làm màu chromatic duy nhất cho mọi filled action buttons, link text và active navigation indicators"
      - "Đặt button border-radius là 2px — bo góc nhẹ, không phải dạng pill"
      - "Chỉ áp dụng card shadow stack (rgba(0,0,0,0.13) 0 3px 7px + rgba(0,0,0,0.11) 0 1px 2px) cho product cards trong grids"
      - "Dùng Segoe UI weight 600 cho headings, card titles và button labels; weight 400 cho mọi body, nav và link text"
      - "Duy trì base spacing unit là 8px — dùng các bước 8/16/24/48px cho padding, margins và gaps"
      - "Xếp lớp white overlay cards (padding 32–48px, không border) lên trên ảnh hero full-bleed để text dễ đọc"
      - "Giữ card grids ở 4 cột bằng nhau với gap 16–24px bên trong container max-width 1200px"

    không_nên:
      - "Không thêm màu thương hiệu khác — hệ thống chỉ có monochrome cộng với #0067b8"
      - "Không dùng border-radius lớn hơn 2px trên buttons, inputs hoặc cards — giữ các cạnh gần như sắc"
      - "Không áp dụng shadows cho navigation bars, buttons hoặc text blocks — chỉ dùng cho product cards"
      - "Không dùng Segoe UI weights khác ngoài 400 và 600 — không có weight 300 siêu nhẹ hoặc 700 đậm"
      - "Không tạo outlined hoặc ghost button variants — mọi hành động đều là filled blue hoặc simple text links"
      - "Không thêm decorative gradients — hệ thống dựa vào photography và flat surfaces"
      - "Không dùng icons fully saturated — category icons nên có kiểu outline stroke 1.5–2px màu #616161 hoặc #000000"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Primary page background — sàn trưng bày |"
    info: "| 1 | Card Surface | `#ffffff` | Product cards, hero overlays, content blocks — cùng màu trắng với canvas nhưng được nâng lên nhờ border và shadow |"
    info: "| 2 | Muted Surface | `#f2f2f2` | Footer background, subtle section differentiation |"

  elevation:

    - "**Product Card:** `rgba(0, 0, 0, 0.13) 0px 3px 7px 0px, rgba(0, 0, 0, 0.11) 0px 1px 2px 0px`"

  imagery:

    info: "Photography chủ đạo là sản phẩm, lifestyle là thứ yếu. Hero sections sử dụng studio renders pha xanh của thiết bị Surface và tay cầm Xbox trên nền gradient, hoặc ảnh chụp phong cảnh không khí (hồ, núi) cho các câu chuyện thương hiệu như Microsoft Edge hay AI for Earth. Ảnh product card là các crop sát trên nền trắng hoặc nền theo ngữ cảnh, không có người mẫu trong grid chính. Icon style nhất quán là outlined line-art (stroke 1.5–2px) màu xám trung tính, dùng cho category navigation. Logo Microsoft 4 màu (ô đỏ/xanh lá/xanh dương/vàng) là điểm đánh dấu nhiều màu duy nhất trong hệ thống."

  layout:

    info: "Container max-width 1200px căn giữa với các hero section full-bleed phá vỡ bố cục. Hero pattern: ảnh full-viewport-width hoặc blue gradient với card text trắng xếp chồng bên trái và product render hoặc text thương hiệu bên phải. Nhịp điệu section: xen kẽ canvas trắng và dải ảnh xanh, mỗi dải cao 480–600px, cách nhau bằng gap dọc 48px. Sắp xếp nội dung: hero → icon-link row (5 cột) → 4-column product card grid → full-bleed feature band → một 4-column grid khác. Navigation là sticky top bar, không có sidebar. Trang có mật độ thông tin cao nhưng thoáng — khoảng cách dọc rộng giữa các section ngăn grid trông chật chội."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000 (hairline, 1px)"
    - "accent: #0067b8 (links, icons, navigation)"
    - "primary action: #0067b8 (filled action)"
    - "muted surface: #f2f2f2 (footer)"

    3_5_example_component_prompts:

    - "Tạo một Primary Action Button: background #0067b8, text #ffffff, radius 9999px, padding pill dạng gọn. Dùng filled treatment này cho CTA chính."

    - "*Tạo một hero section với overlay card:* Full-bleed blue gradient background (linear từ #0050a0 đến #003a75). White overlay card bên trái: rộng 400px, padding 48px, không radius, không border, background trắng. Headline: Segoe UI 600, 37px, #000000. Body: Segoe UI 400, 15px, #000000. Primary button (background #0067b8, text trắng, Segoe UI 600, 15px, radius 2px, padding 12px 16px). Bên phải: product render hoặc text thương hiệu lớn màu trắng Segoe UI 600, 48px."

    - "*Tạo một category icon-link row:* Hàng 5 cột, căn giữa, gap 24px giữa các item. Mỗi item: icon outlined 24px (#616161, stroke 1.5px) xếp chồng phía trên label. Label Segoe UI 400, 15px, #0067b8. Không background, không border. Items là links với underline khi hover."

    - "*Tạo một top navigation bar:* Background trắng, padding dọc 16px. Trái: logo Microsoft 4 ô vuông (16px). Giữa: nav links Segoe UI 400, 15px, #616161 với padding ngang 16px. Phải: search icon, cart icon, sign-in button — tất cả #000000, icons 24px. Không border-bottom, không shadow."

  similar_brands:

    - "**Apple** — Cùng pattern hero ảnh full-bleed với text sản phẩm căn giữa và white text cards trên nền không khí; nhịp điệu product grid với khoảng cách rộng"
    - "**Dell** — Corporate enterprise catalog layout với 4-column product grids, single accent color và hệ thống type tiện dụng gần với Segoe UI"
    - "**Samsung** — Hero card overlay + product grid structure với một màu thương hiệu chủ đạo trên canvas gần trắng và các component flat, tối giản"
    - "**HP** — Light-theme retail catalog với blue accent, card-based product showcases và shadow chỉ dùng hạn chế trên cards"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-microsoft-blue: #0067b8;
          --color-pure-white: #ffffff;
          --color-mist-gray: #f2f2f2;
          --color-carbon-black: #000000;
          --color-steel-gray: #616161;
          --color-graphite: #262626;
          --color-deep-charcoal: #171717;
        
          /* Typography — Font Families */
          --font-segoe-ui: 'Segoe UI', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1;
          --text-heading-sm: 29px;
          --leading-heading-sm: 1.2;
          --text-heading: 37px;
          --leading-heading: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 2px;
        
          /* Named Radii */
          --radius-tags: 2px;
          --radius-cards: 0px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.13) 0px 3px 7px 0px, rgba(0, 0, 0, 0.11) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-card-surface: #ffffff;
          --surface-muted-surface: #f2f2f2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-microsoft-blue: #0067b8;
          --color-pure-white: #ffffff;
          --color-mist-gray: #f2f2f2;
          --color-carbon-black: #000000;
          --color-steel-gray: #616161;
          --color-graphite: #262626;
          --color-deep-charcoal: #171717;
        
          /* Typography */
          --font-segoe-ui: 'Segoe UI', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1;
          --text-heading-sm: 29px;
          --leading-heading-sm: 1.2;
          --text-heading: 37px;
          --leading-heading: 1.2;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-sm: 2px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.13) 0px 3px 7px 0px, rgba(0, 0, 0, 0.11) 0px 1px 2px 0px;
        }