Bộ Quy Chuẩn Đen & Xanh Nước Biển (Ocean Blue 3D)
Hệ thống quy chuẩn thiết kế theo phong cách Neo-Studio Solid 3D Extrusion (chân đế đổ bóng đặc không blur, không viền đen thô, bo góc chuẩn mực 12px - 16px) với tone màu chủ đạo là Đen Sâu (Obsidian Black) và Xanh Nước Biển (Electric Ocean Blue).
Quy Chuẩn Nút Bấm 3D Xúc Giác (Ocean Blue 3D Buttons)
Triết lý: Bo góc chuẩn mực rounded-xl (12px) hoặc rounded-lg (10px). Hiệu ứng gờ nổi 3D đặc chân đế box-shadow: 0 5px 0 #172554. Khi bấm (active) sẽ lún xuống translateY(3px) và shadow giảm còn 0 2px 0.
Nút trắng tinh tế tương phản cực cao trên nền tối obsidian, chân đế xám bạc đặc.
Nút phức hợp gồm khối icon Xanh nước biển 40x40px độc lập và khối chữ Midnight Carbon 3D.
Nút chất liệu Carbon dập khối, đường highlight ánh sáng mép trên (border-top 1px rgba white 0.2).
Nút chủ đạo đại diện thương hiệu Quick AI Agency, sắc xanh đại dương mãnh liệt với chân đế #172554.
Màu xanh lam băng / Cyan điểm nhấn công nghệ cao rực rỡ, chân đế #0284c7.
Phong cách bo tròn viên thuốc (Pill) cao cấp từ bản thiết kế Nexsas với quầng sáng xanh nước biển.
Cụm Phím Mini 3D (.btn-3d-mini)
Dành cho mạng xã hội, toolbar điều khiển, hành động phụ với kích thước chuẩn 38x38px.
Hệ Thống Thẻ Card 3D Clean (Obsidian & Ocean Blue)
Quy tắc: Bo góc rounded-2xl (16px). Không viền đen thô, không bóng mờ nhòe. Lớp chuẩn class="card-3d" với chân đế box-shadow: 0 4px 0 #070910 và viền mờ màu xanh nước biển border: 1px solid #1c2337.
Công Nghệ Tia Sáng Chạy Viền Card (Traveling Border Beam)
Kỹ thuật tạo tia sáng quét quang phổ dọc theo viền card bằng CSS hiện đại offset-path: rect(0% auto 100% auto round 16px) kết hợp @keyframes ai-kw-generator-border-animation. Chỉ cần thêm 1 dòng thẻ duy nhất vào bên trong bất kỳ card nào:
<div class="ai-kw-generator-border-animation size-[40px]" aria-hidden="true"></div>
Sunset Coral Glow
Tia sáng cam san hô rực lửa giống 100% trong ảnh chi tiết viền card tham khảo.
Electric Ocean Blue
Màu chủ đạo nhận diện thương hiệu Quick AI Agency, xanh đại dương quét mượt mà.
Cyber Aqua Spark
Màu xanh lam băng công nghệ cao, dành cho cụm máy chủ, node và tính năng AI Engine.
<div class="relative bg-[#0f1320] border border-[#1c2337] rounded-2xl p-6">
<!-- Chỉ cần chèn 1 dòng này vào đầu card: -->
<div class="ai-kw-generator-border-animation size-[40px]" aria-hidden="true"></div>
<!-- Nội dung của Card nằm ở đây -->
<h3 class="text-white font-bold">Card Title</h3>
</div>
QUICK AI AGENCY
STRATEGIC PARTNER 2026Cam kết độc quyền lãnh thổ 15 dặm với hạ tầng AI tự động hóa thế hệ mới:
Trung Đức
Founder & Chief Architect
Hơn 8 năm xây dựng hệ thống tăng trưởng & phễu AI tự động hóa cho hàng chục thương hiệu lớn tại Việt Nam và Hoa Kỳ.
Sẵn Sàng Xây Dựng Cỗ Máy Đón Khách Tự Động?
Chúng tôi triển khai toàn bộ Voice AI Agent, hệ thống kịch bản, bảng điều khiển chuyển đổi và bảo lãnh hợp đồng bằng văn bản.
Resource Allocation
Thẻ Hình Học Wireframe 3D & Hào Quang Xanh Nước Biển (Theo Ảnh Design 4 & 5)
Concentric AI Core
Hào quang xanh nước biển mô phỏng quỹ đạo xử lý song song.
Venn Intersect
Kết hợp đa kênh: Voice + Chat + CRM Funnel.
Precision Isometric Cubes
Khối lập thể kỹ thuật chuẩn xác theo ảnh thiết kế số 5.
Faceted Crystal Polyhedron
Cấu trúc đa diện 3D không gian tối giản, tinh tế.
Bảng Giá AI SaaS Chuẩn Nhận Diện (Obsidian & Ocean Blue Pricing)
Đồng bộ 100% với hệ quy chuẩn thiết kế: Hệ phông chữ toàn diện Sora (Lightweight 300 & 400 nét mỏng hiện đại), thẻ bo góc 28px nền tối Obsidian (#090c15), viền navy mờ (#1c2337), huy hiệu Popular Cyber Cyan (#00F0FF), quầng hào quang xanh đại dương góc phải (.pricing-ocean-glow), tích xanh công nghệ và tia sáng viền Ocean Blue.
Starter
Best for startup and small teams
Starter includes:
- Up to 10,000 keyword credits per month
- 5 active projects across domains or clients
- AI keyword suggestions for up to 5 languages
- SERP overview and basic difficulty scores
- CSV export of keyword lists and clusters
- Email support with 48-hour response time
Pro
Best for growing businesses and teams
Pro includes:
- 100,000+ keyword credits per month
- Unlimited projects and workspaces
- One-click keyword clustering and topic grouping
- Content brief generation for every keyword cluster
- Team seats with role-based access control
- Priority chat support and onboarding call
Sử dụng các class đồng bộ: .pricing-card-saas cho thẻ bo góc 28px nền Obsidian tối và viền navy (#1c2337), .badge-neon-popular cho huy hiệu Popular Cyber Cyan (#00F0FF), .pricing-ocean-glow cho hào quang xanh nước biển lan toả mờ ảo góc phải dưới, và .btn-pill-action cho nút bấm tròn trắng tuyết với hiệu ứng quầng sáng xanh khi di chuột.
Bộ Mã Màu Chuẩn Thống Nhất (Black & Ocean Blue Tokens)
Màu sắc chủ đạo chính thức của website Quick AI Agency: Đen Obsidian (#07080c) kết hợp cùng Xanh Nước Biển (Electric Ocean Blue #1D6EFB) và Cyber Cyan (#00F0FF). Nhấp vào bất kỳ ô màu nào để copy trực tiếp mã HEX.
A. Ocean Blue & Electric Cobalt (Màu Nhấn Chủ Đạo Của Website)
B. Cyber Cyan & Aqua Glow (Điểm Nhấn Neon & Tốc Độ AI)
C. Deep Obsidian & Midnight Slate (Màu Nền Đen & Bề Mặt Tối)
D. Hệ Màu Trạng Thái (Semantic Status System)
Hệ Thống Typography & Cấp Độ Chữ (Type Hierarchy)
Phông chữ chính: Plus Jakarta Sans / Inter. Phông kỹ thuật: font-mono (JetBrains Mono / Consolas).
Quy tắc Tracking: Các tiêu đề từ 20px trở lên >= 20px luôn dùng tracking-tight. Các nhãn kỹ thuật in hoa luôn dùng tracking-wider hoặc tracking-widest.
Bảng Cấp Độ Chữ Chuẩn (Scale Hierarchy)
8 Levels48px / tracking-tight
30px / font-black
Xây Dựng Cỗ Máy Đón Khách Tự Động Cho Doanh Nghiệp
20px / font-extrabold
Strategic Partner Agreement & Exclusivity
16px / font-bold
Voice AI Agent Gọi Lại Tức Thì Trong 3 Giây
11px / uppercase / wider
14px / text-gray-300
Chúng tôi xây dựng hệ thống tự động đón khách, tối ưu tỷ lệ chuyển đổi và tự động hóa toàn bộ quy trình tiếp cận bằng công nghệ AI thoại thông minh.
12px / font-medium
font-mono / 12px
Bộ Chữ Gradient Kỹ Thuật (Text Gradients)
CSS Webkit-ClipDành cho tiêu đề thương hiệu Quick AI Agency, số liệu tăng trưởng và cam kết chất lượng.
Dành cho các tính năng công nghệ cốt lõi, tốc độ phản hồi và trạng thái AI.
Dành cho hạ tầng máy chủ, thống kê số liệu và nhãn công nghệ cao.
AI Cheat Sheet & Interactive Prompt Surfaces
Tái hiện chân thực 100% các thành phần AI cao cấp: Khung nhập Prompt với quầng sáng **Xanh nước biển & Cyan** ấm phía góc phải dưới, bộ lọc tags gợi ý, visualizer sóng âm thanh AI Voice và các khối hành động tự động hóa.
AI Content Engine
Live Voice Synthesis Ready
Automated Workflow Triggers
4 ChannelsTrụ Cột Công Nghệ Tự Động Hóa
Save Time
Let AI handle competitive research and trend analysis 24/7 without manual intervention.
Precision Targeting
Find long-tail and intent-driven customer segments with maximum buying power.
Stay Updated
Real-time insights keep your growth strategy ahead of the industry curve.
Better Content Fit
Get personalized content funnels that match genuine customer search queries.
Quy Chuẩn Bảng Dữ Liệu & Thẻ Chỉ Số (Data Grid & Metrics)
Thiết kế bảng SaaS chuyên nghiệp: Font font-mono cho các trường định danh ID, IP, Latency. Huy hiệu trạng thái vuông thu gọn text-[10px] w-2 h-2. Thước đo tiến trình 3D đặc màu xanh nước biển.
AI AGENT DEPLOYMENT LOGS
5 Active| AGENT ID | CLIENT / DOMAIN | VOICE ENGINE | LATENCY | STATUS | CONVERSION RATE | ACTION |
|---|---|---|---|---|---|---|
| #QA-9021 |
Elite Medical Spa
elitespa.com
|
ElevenLabs v2.5 | 38ms | ĐANG CHẠY |
|
|
| #QA-8842 |
Saigon Dental Clinic
sgdental.vn
|
Deepgram Nova-2 | 42ms | HOÀN TẤT |
|
|
| #QA-7619 |
Austin Aesthetic Studio
austinstudio.us
|
OpenAI Realtime | 65ms | CHỜ XỬ LÝ |
|
Quy Chuẩn Biểu Mẫu & Điều Khiển (Forms & Controls)
Nguyên tắc: Input bo góc rounded-xl (12px). Thanh tìm kiếm kiểu viên thuốc với **quầng sáng xanh nước biển (Ocean Blue Glow)**. Custom Dropdown với thẻ ping trạng thái xanh mượt mà. Thẻ chọn 3D và công tắc xúc giác.
1. Inputs & Glowing Search Pill (From Design Image 4)
2. Thẻ Chọn Cấu Hình 3D & Toggle Xúc Giác
Hệ Thống Huy Hiệu & Tags Vuông Kỹ Thuật (Technical Square Tags)
Phong cách chuẩn mực: Góc vuông sắc nét rounded-[2px], khối vuông chỉ báo bên trái Square Indicator w-2.5 h-2.5 màu Xanh nước biển `#1D6EFB`, chữ in hoa đậm dãn cách kỹ thuật uppercase font-bold tracking-wider text-[11px].
1. Technical Square Tags (Chuẩn Đen & Xanh Nước Biển)
2. Huy Hiệu Tròn (Pill Badges) & Live Status
Quy Chuẩn Thước Đo Khoảng Cách & Bố Cục Lưới (Spacing & Layout Grid)
Hệ thống khoảng cách của Quick AI Agency được chuẩn hóa dựa trên nguyên lý Soft 4px / 8px Grid System. Toàn bộ lề trong (padding), lề ngoài (margin), khoảng cách giữa các phần tử (gap) và độ cong bo viền (border-radius) đều tuân theo tỷ lệ toán học nghiêm ngặt để tạo sự liền mạch và cao cấp.
1. Bảng Thước Đo Lũy Tiến Khoảng Cách (Spacing Tokens)
2. Hệ Thống Bo Góc Nhận Diện (Radius Hierarchy)
Technical Square Indicator
Dành cho các thẻ tag nhãn kỹ thuật, chỉ báo trạng thái máy chủ, badge góc nhọn.
Compact & Mini Buttons
Dành cho cụm nút mini 38x38px, icon container, dropdown menu items.
Tactile Buttons & Inputs
Chuẩn mực cho toàn bộ Nút bấm 3D chính (.btn-3d-blue, .btn-3d-carbon) và Form inputs.
Standard Studio Card (.card-3d)
Chuẩn mực cho hầu hết các thẻ Card 3D nội dung, Bảng dữ liệu và Dialog.
Large SaaS Pricing & Footer
Dành cho Thẻ bảng giá SaaS lớn (.pricing-card-saas) và Thẻ Footer thả nổi bo góc.
Pill Buttons & Badges
Nút bấm viên thuốc trắng tuyết (.btn-pill-action), Search Pill, Status Badges.
3. Khung Chứa (Containers) & Hệ Thống Lưới 12 Cột
Main Page Canvas
Khung chuẩn mực cho toàn bộ Header, Hero, Section, Footer trên website.
Pricing & Form Canvas
Bảng giá 2 thẻ (Starter/Pro) và các biểu mẫu đăng ký dịch vụ chuyên sâu.
Cosmic Horizon CTA
Khối CTA Trái đất vòm xanh, tiêu đề trung tâm, đoạn văn dẫn nhập.
Body Text & Dialogs
Đoạn văn mô tả bài viết, modal thông báo, dialog xác nhận.
4. Bộ Thử Nghiệm Khoảng Cách Thời Gian Thực
Dynamic Spacing Container
Khoảng đệm (padding), khoảng cách (gap) và bo góc (radius) đang phản hồi tức thì theo thanh trượt của bạn.
5. Ma Trận Khoảng Cách Chuẩn (Component Spacing Matrix)
Cheat Sheet| THÀNH PHẦN (COMPONENT) | PADDING NỘI BỘ | KHOẢNG CÁCH GAP | BO GÓC (RADIUS) | GHI CHÚ ÁP DỤNG |
|---|---|---|---|---|
| Nút Bấm 3D (.btn-3d-blue) | px-6 py-3 (24px, 12px) |
gap-2 (8px) | rounded-xl (12px) |
Solid 3D shadow: 0 5px 0 #172554 |
| Nút Viên Thuốc (.btn-pill-action) | px-8 py-3.5 (32px, 14px) |
gap-2.5 (10px) | rounded-full (9999px) |
Quầng sáng Electric Blue aura khi hover |
| Thẻ Card 3D Chuẩn (.card-3d) | p-6 sm:p-8 (24px, 32px) |
gap-4 / space-y-4 | rounded-2xl (16px) |
Chân đế đặc 0 4px 0 #070910, viền #1c2337 |
| Thẻ Bảng Giá SaaS (.pricing-card-saas) | p-8 sm:p-10 (32px, 40px) |
gap-6 / space-y-6 | rounded-3xl (28px) |
Quầng sáng góc phải dưới (.pricing-ocean-glow) |
| Thẻ Footer Thả Nổi | p-8 sm:p-14 (32px, 56px) |
gap-10 sm:gap-12 | rounded-[32px] |
Đặt trong max-w-7xl px-4 pb-16 |
| Khối CTA Trái Đất Cosmic Horizon | pt-20 pb-28 (sm:pt-36 sm:pb-48) |
space-y-6 (24px) | rounded-none |
Khối vòm hành tinh xanh phủ toàn chiều ngang |
