mintlify___style_reference:
  info: "> Khu vườn mây trên mặt bàn kính. Bầu trời vẽ tay và một sản phẩm tài liệu chung một khung hình — nơi duy nhất mà màu sắc và ý tưởng giao thoa trước khi trang web lắng xuống tông trắng tĩnh lặng."

  theme: "light"

  info: "Mintlify vận hành theo kỷ luật gần như đơn sắc tuyệt đối: canvas trắng, text gần đen, và một màu xanh lá tươi duy nhất là điểm nhấn màu duy nhất xuyên suốt toàn bộ giao diện. Hero là ngoại lệ có chủ đích — một cảnh quan mây vẽ tay trên nền gradient teal đậm, với sản phẩm tài liệu nổi ở tiền cảnh như minh chứng sống động. Mọi thứ phía sau đều quay về bề mặt trắng khắc khổ, typography Inter dày đặc, và hình khối component giữ góc vuông (button radius 4px, card radius 16–24px) thay vì dạng pill hay bo tròn quá mức. Màu sắc xuất hiện như dấu câu chức năng: xanh lá cho active state, brand link, và icon trang trí; đen cho variant button filled duy nhất. Elevation được thì thầm, không bao giờ tuyên bố — shadow nằm ở opacity 0.03–0.05 và được cảm nhận hơn là nhìn thấy."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Mint Green | `#0c8c5e` | `--color-mint-green` | Brand link, active nav state, feature icon, decorative dot trong eyebrow label, đường gạch chân mảnh trên inline code reference — điểm nhấn màu duy nhất trong hệ thống đơn sắc, được đặt có chủ đích để làm cho các khoảnh khắc chức năng trở nên nổi bật |"
    info: "| Ink Black | `#08090a` | `--color-ink-black` | Neutral hỗ trợ tối cho text, icon và độ tương phản mạnh. Không nâng lên làm màu CTA chính |"
    info: "| True Black | `#000000` | `--color-true-black` | Body text, link default trước hover, icon stroke, và footer rule — neutral chủ lực chịu hầu hết tải typography |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, text button trên nền tối, input field — lớp nền cơ bản mà mọi thứ khác nằm trên |"
    info: "| Mist Gray | `#f2f2f2` | `--color-mist-gray` | Divider nhẹ, hairline stroke trên card, background ít quan trọng, và hiệu ứng hover mờ nhất |"
    info: "| Cloud Gray | `#dddddd` | `--color-cloud-gray` | Input border, card outline khi hover, divider line phụ cần rõ hơn Mist một chút |"

  tokens___typography:

    inter___universal_typeface___họ_font_duy_nhất_trong_hệ_thống__dùng_cho_headline__body__nav__button__input_và_code__không_có_display_face__không_có_mono_override_hiển_thị_____font_inter:
      - "**Thay thế:** Inter (Google Fonts) — cũng có thể dùng IBM Plex Sans hoặc General Sans làm giải pháp thay thế mở nếu Inter không khả dụng."
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 13, 14, 15, 16, 18, 20, 24, 40, 57"
      - "**Line height:** 1.10, 1.15, 1.30, 1.33, 1.50, 1.71"
      - "**Letter spacing:** Tight ở kích thước lớn: -0.02em ở 57px, -0.01em từ 40px xuống 16px, neutral ở 13–14px, +0.05em trên eyebrow label uppercase nhỏ nhất"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Vai trò:** Universal typeface — họ font duy nhất trong hệ thống. Dùng cho headline, body, nav, button, input và code. Không có display face, không có mono override hiển thị."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | 0.65px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 40px | 1.15 | -0.4px | `--text-heading` |"
      info: "| display | 57px | 1.1 | -1.14px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 201 | 201px | `--spacing-201` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 4px |"
      info: "| cards | 16px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"
      info: "| largeContainers | 24px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `lab(2.42579 -0.165291 -0.470081 / 0.03) 0px 2px 4px 0px` | `--shadow-sm` |"
      info: "| sm-2 | `lab(100 0 0 / 0.05) 0px 2px 4px 0px` | `--shadow-sm-2` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 12px"

  components:

    primary_filled_button:
      vai_trò: "Hành động có trọng số cao nhất — variant button filled tối duy nhất trong hệ thống"

      info: "Radius 4px, nền Ink Black (#08090a), text Paper White (#ffffff), Inter 14–15px weight 500, padding 8px 16px. Mang shadow lab opacity 0.03. Dùng cho 'Start for free' và mũi tên submit email."

    ghost_navigation_button:
      vai_trò: "Hành động điều hướng phụ, không cạnh tranh với CTA chính"

      info: "Nền trong suốt, text True Black, không border, Inter 14px weight 500, hover thêm hiệu ứng nền Mist Gray nhẹ. Dùng cho 'Contact sales' trong nav."

    hero_email_input:
      vai_trò: "Form thu thập lead trong hero với submit tích hợp"

      info: "Nền trắng, border Cloud Gray, radius 4px trên outer pill, trường text bên trong nằm sát với nút submit tròn tối màu bên phải chứa icon mũi tên phải. Placeholder 'Email address' màu xám nhạt, Inter 14–15px."

    documentation_product_card:
      vai_trò: "Hero showcase — giao diện sản phẩm được render dưới dạng card nổi"

      info: "Radius 16px, bề mặt trắng, shadow lab opacity 0.05, padding bên trong ~24px. Chứa sidebar trái (active state Mint Green, dòng icon + label), vùng nội dung chính với tab navigation, và TOC 'On this page' bên phải. Đây là nơi duy nhất Mint Green được dùng làm indicator active trong sidebar."

    customer_story_card:
      vai_trò: "Đơn vị bằng chứng xã hội trong grid 3 cột"

      info: "Radius 16px, bề mặt trắng, border 1px #f2f2f2, padding trong 24px. Nửa trên là ảnh full-bleed với gradient overlay nhẹ; nửa dưới chứa đoạn mô tả (16px, weight 400) và text link 'Read story →' bằng Inter weight 500."

    feature_capability_card:
      vai_trò: "Dùng trong grid 'Built for the intelligence age' để giải thích khả năng nền tảng"

      info: "Radius 16px, nền tint Mint Green nhẹ, padding 24px, eyebrow label dạng small caps Mint Green ở 13px letter-spacing +0.05em, body copy Ink Black ở 16px."

    partner_logo_tile:
      vai_trò: "Logo wall — grid tín hiệu tin cậy"

      info: "Không background, không border, render ở chế độ grayscale trên trang trắng. Logo nằm trên grid baseline đồng nhất, 4 logo mỗi hàng với column gap 24px. Không hover state — đây là trust marker tĩnh."

    top_navigation_bar:
      vai_trò: "Điều hướng chính của trang"

      info: "Nền trắng, nằm trên cả hero tối và vùng nội dung trắng. Logo ở ngoài cùng bên trái (mark Mint Green + wordmark đen). Nav link ở giữa-trái bằng Inter 14px weight 500 True Black. 'Contact sales' ghost button và 'Start for free' filled button căn phải. Không bottom border — nav đọc như nổi trên trang."

    sidebar_navigation_item:
      vai_trò: "Sidebar tài liệu trong sản phẩm"

      info: "Inter 16px weight 400, text True Black, padding dọc 6px, indent trái 8px. Active state tô nền tint Mint Green nhẹ và chuyển text sang Mint Green. Icon 16px stroke 1.5, Mint Green khi active, True Black khi inactive."

    eyebrow_label:
      vai_trò: "Label section uppercase nhỏ phía trên feature card và capability header"

      info: "Inter 13px weight 500, Mint Green, letter-spacing +0.05em, uppercase. Đọc như category tag, không phải heading — luôn đi kèm với heading lớn hơn bên dưới."

  do_s_and_don_ts:

    do:
      - "Dùng Inter cho mọi thứ — không có display face hay mono override trong hệ thống."
      - "Chỉ dùng Mint Green (#0c8c5e) cho active state, brand link, icon trang trí và eyebrow label — không bao giờ dùng làm nền diện rộng hay button background."
      - "Đặt button radius 4px và card radius 16px — hệ thống vuông vức, không dạng pill."
      - "Tighten letter-spacing xuống -0.02em ở 57px và -0.01em từ 40–16px; nới lỏng lên +0.05em chỉ trên eyebrow label uppercase 13px."
      - "Dùng Ink Black (#08090a) cho nền filled button và true black (#000000) cho body text — giữ hai neutral này ở vai trò riêng biệt."
      - "Để hero là khoảnh khắc màu sắc duy nhất trên trang — quay về bề mặt trắng và text đen cho mọi thứ dưới fold."
      - "Giới hạn shadow ở offset 2px với opacity 3–5%; nếu component cần tách biệt hơn, dùng border 1px #dddddd thay thế."

    don_t:
      - "Không dùng pill button, radius 9999px, hay avatar bo tròn — hệ thống cam kết 4px / 16px / 24px."
      - "Không đặt Mint Green trên button fill, nền lớn, hay hero text — nó mất bản sắc khi dùng ở quy mô lớn."
      - "Không dùng accent color thứ hai — quy tắc đơn sắc-cộng-một-xanh-là neo của thương hiệu."
      - "Không đặt body text dưới 14px hay dùng line-height lỏng hơn 1.5 — readability là bất khả thương lượng."
      - "Không thêm gradient, glassmorphism, hay shadow màu — ngôn ngữ elevation phẳng và chính xác."
      - "Không dùng illustration style bên ngoài hero cloud landscape — phần còn lại của site là UI thuần túy."
      - "Không đặt page background khác ngoài trắng — không off-white canvas, không dark mode surface trong vùng nội dung."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Page canvas và background chủ đạo cho mọi section nội dung sau hero |"
    info: "| 1 | Mist Gray | `#f2f2f2` | Card wash nhẹ và section separator tinh tế khi cần bước ra khỏi trắng |"
    info: "| 2 | Hero Teal | `#0c8c5` | Dải hero tối full-bleed với cloud illustration — bề mặt màu duy nhất trong hệ thống |"
    info: "| 3 | Ink Black | `#08090a` | Bề mặt filled button và UI element tối nhất; ngữ cảnh text đảo ngược trên nền tối |"

  elevation:

    - "**Primary Filled Button:** `lab(2.42579 -0.165291 -0.470081 / 0.03) 0px 2px 4px 0px`"
    - "**Card and Elevated Surface:** `lab(100 0 0 / 0.05) 0px 2px 4px 0px`"

  imagery:

    info: "Ngôn ngữ hình ảnh chia làm hai thanh ghi. Hero mang một cloud landscape vẽ tay — những đám mây tích mềm mại với tông vàng ấm và kem, đặt trên nền gradient teal-to-mint đậm, được vẽ theo phong cách gần với minh họa sách thiếu nhi hơn là marketing công nghệ. Đây là hình ảnh biểu cảm duy nhất trên toàn bộ site. Dưới fold, hình ảnh chuyển sang product screenshot và customer photography: customer story card dùng ảnh tĩnh 16:9 với gradient overlay nhẹ làm mờ cạnh dưới để text dễ đọc. Partner logo được render ở grayscale. Không có 3D render trừu tượng, không geometric pattern, không decorative gradient. Bản thân product UI (mockup tài liệu trong hero) được xem như tài sản hình ảnh chính trên trang."

  layout:

    info: "Trang mở đầu với hero tối full-viewport (teal gradient + cloud illustration) chứa headline stack căn giữa, email input, và một mockup sản phẩm tài liệu lớn nổi, tràn qua cạnh dưới hero vào vùng trắng bên dưới. Product mockup đóng vai trò cầu nối thị giác giữa hero biểu cảm và các section nội dung khắc khổ. Dưới hero, layout chuyển sang container căn giữa max-width 1200px với section gap 80px. Các section xen kẽ giữa headline + paragraph + card grid căn giữa (3 cột cho customer story, 2 cột cho feature card) và logo wall band. Navigation là một top bar ngang duy nhất, sticky khi scroll, trong suốt trên hero và trắng trên vùng nội dung. Trang rộng rãi — comfortable density, khoảng thở hào phóng, không có khối thông tin dày đặc hay body content đa cột."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "primary action: không có màu CTA riêng biệt"
    - "accent / brand: #0c8c5e (Mint Green)"
    - "text: #000000 (body) / #08090a (heading, button surface)"
    - "background: #ffffff (Paper White)"
    - "border / divider: #f2f2f2 (Mist Gray) / #dddddd (Cloud Gray)"

    info: "Example Component Prompts:"
    - "Tạo top navigation bar: nền trắng, không bottom border, căn giữa max-width 1200px. Logo bên trái (mark Mint Green #0c8c5e + wordmark đen). Nav link ở giữa-trái bằng Inter 14px weight 500, #000000. Bên phải: 'Contact sales' ghost text link và một filled button — nền Ink Black #08090a, text trắng, radius 4px, padding 8px 16px, Inter 14px weight 500."
    - "Tạo hero section: nền teal đậm full-bleed (#0c8c5e) với cloud landscape minh họa. Headline căn giữa bằng Inter 57px weight 600, #ffffff, letter-spacing -1.14px. Subtext bằng Inter 18px weight 400, #ffffff ở opacity 80%. Email input: nền trắng, radius 4px, border 1px #dddddd, placeholder 'Email address' màu xám nhạt, với nút submit tròn tối màu bên phải chứa icon mũi tên phải màu trắng."
    - "Tạo customer story card: bề mặt trắng, radius 16px, border 1px #f2f2f2, padding 24px. Nửa trên là ảnh 16:9 phủ kín card edge-to-edge với gradient fade dưới đáy. Bên dưới: mô tả bằng Inter 16px weight 400, #000000, tối đa hai dòng. Dưới cùng: text link 'Read story →' bằng Inter 14px weight 500, #000000."
    - "Tạo feature capability card: nền tint Mint Green nhẹ (rgba của #0c8c5e ở ~6% opacity), radius 16px, padding 24px. Eyebrow label bằng Inter 13px weight 500, #0c8c5e, letter-spacing 0.65px, uppercase. Body heading bằng Inter 20px weight 600, #08090a. Mô tả bằng Inter 16px weight 400, #000000."
    - "Tạo partner logo wall: nền trắng, không container, 4 logo mỗi hàng với column gap 24px, tất cả logo render ở grayscale, căn giữa dọc trên baseline đồng nhất. Không hover state, không border."

  similar_brands:

    - "**Linear** — Cùng kỷ luật single-accent — giao diện đơn sắc với một màu sống động làm mọi công việc thương hiệu, typography Inter, button góc vuông, shadow chính xác"
    - "**Vercel** — Cùng mực gần đen trên canvas trắng tinh, một khoảnh khắc màu sắc duy nhất mỗi trang, tracking Inter tight, button radius 4px"
    - "**Resend** — Cùng pattern đơn sắc-cộng-một-accent với Inter, bố cục product-as-hero, và cùng cam kết về whitespace giữa các section"
    - "**Notion** — Cùng cách tiếp cận documentation-product-as-marketing, section trắng sạch sẽ, và sử dụng màu sắc hạn chế chỉ cho functional state"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-mint-green: #0c8c5e;
          --color-ink-black: #08090a;
          --color-true-black: #000000;
          --color-paper-white: #ffffff;
          --color-mist-gray: #f2f2f2;
          --color-cloud-gray: #dddddd;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: 0.65px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.24px;
          --text-heading: 40px;
          --leading-heading: 1.15;
          --tracking-heading: -0.4px;
          --text-display: 57px;
          --leading-display: 1.1;
          --tracking-display: -1.14px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-201: 201px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-tags: 4px;
          --radius-cards: 16px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
          --radius-largecontainers: 24px;
        
          /* Shadows */
          --shadow-sm: lab(2.42579 -0.165291 -0.470081 / 0.03) 0px 2px 4px 0px;
          --shadow-sm-2: lab(100 0 0 / 0.05) 0px 2px 4px 0px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-mist-gray: #f2f2f2;
          --surface-hero-teal: #0c8c5;
          --surface-ink-black: #08090a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-mint-green: #0c8c5e;
          --color-ink-black: #08090a;
          --color-true-black: #000000;
          --color-paper-white: #ffffff;
          --color-mist-gray: #f2f2f2;
          --color-cloud-gray: #dddddd;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: 0.65px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.24px;
          --text-heading: 40px;
          --leading-heading: 1.15;
          --tracking-heading: -0.4px;
          --text-display: 57px;
          --leading-display: 1.1;
          --tracking-display: -1.14px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-201: 201px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Shadows */
          --shadow-sm: lab(2.42579 -0.165291 -0.470081 / 0.03) 0px 2px 4px 0px;
          --shadow-sm-2: lab(100 0 0 / 0.05) 0px 2px 4px 0px;
        }