@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Fira+Code:wght@400;500&display=swap');

:root {

/* =====================================================
   SÂN KHẤU 3D DESIGN SYSTEM
   Technology / AI / Web 3D / Professional Software
===================================================== */


/* =====================================================
   1. BRAND COLORS
===================================================== */

--brand-cyan: #00E5FF;
--brand-blue: #007BFF;
--brand-purple: #6C63FF;

--brand-dark: #050816;
--brand-white: #FFFFFF;

/* Legacy aliases kept for older pages during the design-system migration. */
--primary: var(--brand-cyan);
--primary-dark: var(--brand-blue);
--bg-light: var(--bg-surface);
--bg-hover: var(--bg-card-hover);
--border: var(--border-light);
--border-color: var(--border-light);
--text-main: var(--text-body);

/* Typography legacy aliases */
--font-main: var(--font-family);
--font-display: var(--font-display);
--font-mono: var(--font-mono);
--fw-normal: var(--fw-regular);
--fw-medium: var(--fw-medium);
--fw-bold: var(--fw-bold);


/* =====================================================
   2. BRAND GRADIENT
===================================================== */

--gradient-primary:
linear-gradient(
135deg,
#00E5FF 0%,
#007BFF 55%,
#6C63FF 100%
);


--gradient-cyan:
linear-gradient(
90deg,
#00E5FF,
#007BFF
);


--gradient-dark:
linear-gradient(
180deg,
#050816,
#0B1026
);


--gradient-card:
linear-gradient(
145deg,
rgba(0,229,255,.15),
rgba(0,123,255,.05)
);



/* =====================================================
   3. WEBSITE BACKGROUND
===================================================== */

--bg-body:
#050816;

--bg-header:
rgba(5,8,22,.85);

--bg-section:
#080D22;

--bg-surface:
#0B1026;

--bg-card:
#10172F;

--bg-card-hover:
#152044;

--bg-overlay:
rgba(5,8,22,.75);

--bg-glass:
rgba(15,23,55,.65);



/* =====================================================
   4. TEXT SYSTEM
===================================================== */

--text-heading:
#FFFFFF;

--text-body:
#D7E1F5;

--text-secondary:
#B7C3E0;

--text-muted:
#7180A3;

--text-disabled:
#4B5875;

--text-brand:
#00E5FF;



/* =====================================================
   5. BORDER SYSTEM
===================================================== */

--border-light:
rgba(255,255,255,.08);

--border-default:
rgba(255,255,255,.12);

--border-brand:
rgba(0,229,255,.35);

--border-active:
rgba(0,229,255,.8);



/* =====================================================
   6. SHADOW SYSTEM
===================================================== */

--shadow-sm:
0 5px 15px rgba(0,0,0,.25);


--shadow-md:
0 15px 40px rgba(0,0,0,.35);


--shadow-lg:
0 30px 80px rgba(0,0,0,.55);


--shadow-neon:
0 0 20px rgba(0,229,255,.35);



/* =====================================================
   7. GLOW EFFECT
===================================================== */

--glow-cyan:
0 0 10px rgba(0,229,255,.8),
0 0 30px rgba(0,229,255,.5),
0 0 70px rgba(0,229,255,.25);


--glow-blue:
0 0 20px rgba(0,123,255,.7),
0 0 50px rgba(0,123,255,.35);



/* =====================================================
   8. GLASS UI
===================================================== */

--glass-bg:
rgba(10,18,45,.75);

--glass-blur:
blur(20px);

--glass-border:
1px solid rgba(255,255,255,.08);



/* =====================================================
   9. BUTTON SYSTEM
===================================================== */


/* Primary */

--button-primary-bg:
var(--gradient-primary);

--button-primary-text:
#050816;


/* Secondary */

--button-secondary-bg:
transparent;

--button-secondary-border:
rgba(0,229,255,.5);

--button-secondary-text:
#00E5FF;


/* Danger */

--button-danger:
#FF4560;




/* =====================================================
   10. PRODUCT PACKAGE
   Gói ứng dụng thiết kế 3D
===================================================== */

--package-basic:
#64748B;

--package-standard:
#00E5FF;

--package-pro:
#007BFF;

--package-enterprise:
#6C63FF;


--package-feature:
rgba(0,229,255,.12);



/* =====================================================
   11. SERVICE DESIGN 3D
===================================================== */

--service-design:
#00E5FF;

--service-render:
#007BFF;

--service-consult:
#6C63FF;



/* =====================================================
   13. NEWS
===================================================== */

--news-category:
#00E5FF;

--news-date:
#7180A3;

--news-card:
#10172F;



/* =====================================================
   14. CONTACT
===================================================== */

--contact-icon:
#00E5FF;

--contact-success:
#00FF99;

--contact-input:
#0B1026;

--contact-placeholder:
#7180A3;



/* =====================================================
   15. 3D ENGINE OBJECT COLOR
===================================================== */


--3d-stage:
#111827;


--3d-floor:
#1F2937;


--3d-led:
#00E5FF;


--3d-truss:
#8A94A6;


--3d-light:
#FFD700;


--3d-camera:
#FF4560;



/* =====================================================
   16. STATUS
===================================================== */

--success:
#00FF99;


--warning:
#FFB800;


--error:
#FF4560;


--info:
#00E5FF;



/* =====================================================
   17. TYPOGRAPHY (CHUYÊN NGHIỆP CHO WEB 3D & CÔNG NGHỆ)
===================================================== */

/* Font Families */
--font-main:
"Be Vietnam Pro",
"Inter",
"Noto Sans",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;


--font-display:
"Be Vietnam Pro",
"Inter",
"Noto Sans",
system-ui,
sans-serif;

--font-mono:
"JetBrains Mono",
"Fira Code",
"Consolas",
"Monaco",
"Courier New",
monospace;


/* Font Weights */
--fw-thin: 100;
--fw-extralight: 200;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;


/* Line Heights (Tối ưu độ thoáng cho giao diện kỹ thuật) */
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-normal: 1.5;
--lh-relaxed: 1.75;
--lh-loose: 1.9;


/* Letter Spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.05em;
--tracking-uppercase: 0.08em;



/* =====================================================
   18. FONT SIZE (HỆ THỐNG CỠ CHỮ CHUẨN RESPONSIVE)
===================================================== */

--fs-2xs:
10px;

--fs-xs:
12px;

--fs-sm:
14px;

--fs-md:
16px;

--fs-lg:
18px;

--fs-xl:
24px;

--fs-2xl:
32px;

--fs-3xl:
40px;

--fs-hero:
56px;

--fs-display:
72px;


/* Semantic Typography Variables */
--text-hero-size: var(--fs-hero);
--text-hero-weight: var(--fw-bold);
--text-hero-line: var(--lh-tight);

--text-h1-size: var(--fs-4xl);
--text-h1-weight: var(--fw-bold);
--text-h1-line: var(--lh-tight);

--text-h2-size: var(--fs-3xl);
--text-h2-weight: var(--fw-semibold);
--text-h2-line: var(--lh-snug);

--text-h3-size: var(--fs-2xl);
--text-h3-weight: var(--fw-semibold);
--text-h3-line: var(--lh-snug);

--text-title-size: var(--fs-xl);
--text-title-weight: var(--fw-semibold);
--text-title-line: var(--lh-normal);

--text-body-size: var(--fs-md);
--text-body-weight: var(--fw-regular);
--text-body-line: var(--lh-normal);

--text-small-size: var(--fs-sm);
--text-small-weight: var(--fw-regular);
--text-small-line: var(--lh-normal);

--text-caption-size: var(--fs-xs);
--text-caption-weight: var(--fw-medium);
--text-caption-line: var(--lh-normal);

--body-font: var(--font-family);
--body-size: var(--fs-md);
--body-weight: var(--fw-regular);
--body-line-height: var(--lh-normal);

--heading-font: var(--font-display);
--heading-weight: var(--fw-bold);
--heading-color: var(--text-heading);

--button-font: var(--font-family);
--button-size: var(--fs-sm);
--button-weight: var(--fw-semibold);
--button-letter-spacing: var(--tracking-wide);

--table-font: var(--font-family);
--table-size: var(--fs-sm);
--table-weight: var(--fw-regular);

--input-font: var(--font-family);
--input-size: var(--fs-md);
--input-weight: var(--fw-regular);

--code-font: var(--font-mono);
--code-size: var(--fs-sm);
--code-weight: var(--fw-medium);



/* =====================================================
   19. BORDER RADIUS
===================================================== */

--radius-sm:
8px;

--radius-md:
16px;

--radius-lg:
24px;

--radius-xl:
32px;

--radius-pill:
999px;



/* =====================================================
   20. SPACING
===================================================== */

--space-1:
4px;

--space-2:
8px;

--space-3:
12px;

--space-4:
16px;

--space-5:
24px;

--space-6:
32px;

--space-7:
48px;

--space-8:
64px;

--space-9:
96px;



/* =====================================================
   21. ANIMATION
===================================================== */

--transition-fast:
.2s ease;


--transition-normal:
.35s ease;


--transition-slow:
.6s ease;

}