Dịch Vụ LMS & AI Automation – NIE.vn
/* NATIVE NIE.VN LIGHT THEME DESIGN SYSTEM – 100% BLENDED INTEGRATION */
:root {
–white: #ffffff;
–bg-light: #f6f8fb;
–bg-card: #ffffff;
–blue: #2563eb;
–blue-dark: #1d4ed8;
–cyan: #06b6d4;
–green: #10b981;
–text-primary: #0f172a;
–text-secondary: #475569;
–text-muted: #64748b;
–border: rgba(15, 23, 42, 0.08);
–font-family: ‘Plus Jakarta Sans’, system-ui, -apple-system, sans-serif;
–transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body.nie-native-page {
background-color: var(–white);
color: var(–text-secondary);
font-family: var(–font-family);
font-size: 15px;
line-height: 1.6;
overflow-x: hidden;
}
/* Native NIE Container */
.nie-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
/* Typography */
h1, h2, h3, h4 {
font-family: var(–font-family);
color: var(–text-primary);
line-height: 1.25;
font-weight: 800;
}
.nie-text-blue { color: var(–blue); }
.text-blue { color: var(–blue); }
.text-green { color: var(–green); }
/* Native Pebble Card Component */
.card-pebble {
background: var(–bg-light);
border: 1px solid var(–border);
border-radius: 18px;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
transition: var(–transition);
}
.card-pebble:hover {
border-color: rgba(37, 99, 235, 0.3);
box-shadow: 0 8px 30px rgba(37, 99, 235, 0.08);
}
/* Native Buttons */
.nie-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background: linear-gradient(135deg, var(–blue), var(–cyan));
color: var(–white) !important;
font-family: var(–font-family);
font-size: 14px;
font-weight: 700;
border-radius: 12px;
text-decoration: none !important;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
transition: var(–transition);
}
.nie-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
}
.nie-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background: var(–white);
color: var(–text-primary) !important;
font-family: var(–font-family);
font-size: 14px;
font-weight: 700;
border-radius: 12px;
text-decoration: none !important;
border: 1px solid var(–border);
cursor: pointer;
transition: var(–transition);
}
.nie-btn-outline:hover {
border-color: var(–blue);
color: var(–blue) !important;
}
.full-width { width: 100%; }
/* Header Bar */
.nie-site-header {
position: sticky;
top: 0;
width: 100%;
z-index: 999;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(–border);
padding: 14px 0;
}
.nie-header-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nie-brand-logo-img {
height: 42px;
}
.nie-desktop-nav {
display: flex;
gap: 28px;
}
.nie-nav-item {
color: var(–text-secondary) !important;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: var(–transition);
}
.nie-nav-item:hover,
.nie-nav-item.active {
color: var(–blue) !important;
}
/* Hero Section */
.nie-hero-section {
padding: 60px 0;
background: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.04) 0%, transparent 60%);
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 48px;
align-items: center;
}
.nie-pill-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.2);
border-radius: 20px;
font-size: 11px;
font-weight: 700;
color: var(–blue);
margin-bottom: 20px;
}
.pill-dot {
width: 7px;
height: 7px;
background: var(–green);
border-radius: 50%;
}
.nie-hero-title {
font-size: 44px;
margin-bottom: 18px;
letter-spacing: -0.5px;
}
.nie-hero-subtitle {
font-size: 16px;
color: var(–text-secondary);
margin-bottom: 32px;
}
.hero-form-card {
padding: 24px;
background: var(–white);
}
.quick-form-flex {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
}
.form-input-wrap select,
.form-input-wrap input {
width: 100%;
padding: 13px 16px;
background: var(–bg-light);
border: 1px solid var(–border);
border-radius: 10px;
color: var(–text-primary);
font-size: 14px;
outline: none;
}
.form-input-wrap select:focus,
.form-input-wrap input:focus {
border-color: var(–blue);
}
.form-trust-text {
font-size: 12px;
color: var(–text-muted);
margin-top: 12px;
}
/* Visual Card Preview */
.preview-card-box {
padding: 20px;
background: var(–white);
}
.preview-card-header {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(–border);
margin-bottom: 16px;
}
.dot-red { width: 10px; height: 10px; background: #ef4444; border-radius: 50%; }
.dot-yellow { width: 10px; height: 10px; background: #f59e0b; border-radius: 50%; }
.dot-green { width: 10px; height: 10px; background: #10b981; border-radius: 50%; }
.preview-url { font-size: 11px; color: var(–text-muted); font-family: monospace; margin-left: 8px; }
.mini-metrics-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.mini-metric {
background: var(–bg-light);
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
}
.m-title { font-size: 10px; color: var(–text-muted); }
.m-val { font-size: 15px; font-weight: 800; margin-top: 2px; }
.preview-console-box {
background: #0f172a;
color: #cbd5e1;
padding: 14px;
border-radius: 10px;
font-family: monospace;
font-size: 12px;
}
.log-line { margin-bottom: 6px; }
.blue-tag { color: var(–cyan); }
.green-tag { color: var(–green); }
/* Metrics Section */
.nie-metrics-bar {
border-y: 1px solid var(–border);
background: var(–bg-light);
padding: 36px 0;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.metric-num {
font-size: 40px;
font-weight: 800;
display: block;
}
.metric-text {
font-size: 13px;
color: var(–text-muted);
}
/* Services Section */
.nie-services-section { padding: 70px 0; }
.nie-section-header-center { text-align: center; margin-bottom: 48px; }
.nie-sub-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(–blue); display: block; margin-bottom: 8px; }
.nie-section-header-center h2 { font-size: 34px; margin-bottom: 10px; }
.nie-section-header-center p { color: var(–text-muted); font-size: 15px; }
.services-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
padding: 32px;
background: var(–white);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.service-card.featured-service {
border-color: var(–blue);
box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12);
}
.service-icon-box {
width: 46px;
height: 46px;
border-radius: 12px;
background: rgba(37, 99, 235, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.service-card h3 { font-size: 22px; margin-bottom: 12px; }
.service-desc { font-size: 14px; color: var(–text-muted); margin-bottom: 20px; }
.service-checklist { list-style: none; margin-bottom: 28px; }
.service-checklist li { margin-bottom: 10px; font-size: 14px; color: var(–text-secondary); }
/* Comparison Matrix */
.nie-comparison-section { padding: 60px 0; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.comp-card { padding: 32px; background: var(–white); }
.comp-head { display: inline-block; padding: 4px 12px; border-radius: 10px; font-size: 11px; font-weight: 700; margin-bottom: 20px; }
.red-head { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.blue-head { background: rgba(37, 99, 235, 0.1); color: var(–blue); }
.comp-list { list-style: none; }
.comp-list li { margin-bottom: 14px; font-size: 14px; color: var(–text-secondary); }
/* ROI Calculator */
.nie-roi-section { padding: 70px 0; }
.roi-calculator-box {
padding: 36px;
background: var(–white);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: center;
}
.slider-field { margin-bottom: 28px; }
.slider-info { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.slider-info strong { font-size: 16px; }
input[type=”range”] {
width: 100%;
accent-color: var(–blue);
cursor: pointer;
}
.roi-outputs-col { display: flex; flex-direction: column; gap: 16px; }
.out-box { background: var(–bg-light); border: 1px solid var(–border); border-radius: 12px; padding: 18px; }
.out-label { font-size: 12px; color: var(–text-muted); }
.out-val { font-size: 28px; font-weight: 800; display: block; margin: 4px 0; }
.out-note { font-size: 12px; color: var(–text-muted); }
/* Pricing Grid */
.nie-pricing-section { padding: 70px 0; }
.pricing-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-card {
padding: 32px;
background: var(–white);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.pricing-card.featured {
border-color: var(–blue);
box-shadow: 0 8px 30px rgba(37, 99, 235, 0.15);
}
.popular-tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(–blue), var(–cyan));
color: var(–white);
padding: 3px 14px;
border-radius: 12px;
font-size: 10px;
font-weight: 800;
}
.plan-top h3 { font-size: 24px; margin-bottom: 4px; }
.plan-desc { font-size: 13px; color: var(–text-muted); margin-bottom: 20px; }
.plan-price { margin-bottom: 24px; }
.amount { font-size: 36px; font-weight: 800; color: var(–text-primary); }
.unit { font-size: 13px; color: var(–text-muted); }
.plan-features { list-style: none; margin-bottom: 28px; }
.plan-features li { margin-bottom: 12px; font-size: 14px; color: var(–text-secondary); }
/* Lead Section */
.nie-lead-section { padding: 70px 0; }
.lead-card-box { padding: 40px; background: var(–white); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.lead-info-col h2 { font-size: 32px; margin-bottom: 14px; }
.lead-info-col p { color: var(–text-muted); margin-bottom: 24px; }
.contact-meta p { margin-bottom: 8px; font-size: 14px; }
.lead-form-col form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(–text-secondary); }
.form-group input, .form-group select {
padding: 13px 16px;
background: var(–bg-light);
border: 1px solid var(–border);
border-radius: 10px;
color: var(–text-primary);
font-size: 14px;
outline: none;
}
.form-group input:focus, .form-group select:focus { border-color: var(–blue); }
/* Footer & Modal */
.nie-site-footer {
background: var(–bg-light);
border-top: 1px solid var(–border);
padding: 36px 0;
text-align: center;
}
.copyright { font-size: 12px; color: var(–text-muted); margin-top: 4px; }
.nie-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 3000; }
.nie-modal-backdrop.active { display: flex; }
.nie-modal-card { background: var(–white); padding: 36px; max-width: 420px; }
.modal-icon { font-size: 48px; margin-bottom: 12px; }
/* Clients & Partners Section */
.nie-clients-section {
padding: 80px 0;
background: var(–bg-light);
border-top: 1px solid var(–border);
border-bottom: 1px solid var(–border);
}
.clients-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.client-card {
background: var(–white);
padding: 32px 28px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
border: 1px solid var(–border);
border-radius: 18px;
transition: var(–transition);
}
.client-card:hover {
transform: translateY(-4px);
border-color: rgba(37, 99, 235, 0.4);
box-shadow: 0 12px 36px rgba(37, 99, 235, 0.12);
}
.client-badge {
font-size: 11px;
font-weight: 800;
color: var(–blue);
background: rgba(37, 99, 235, 0.08);
padding: 6px 12px;
border-radius: 20px;
letter-spacing: 0.5px;
margin-bottom: 14px;
}
.client-card h3 {
font-size: 20px;
margin-bottom: 4px;
color: var(–text-primary);
}
.client-domain {
font-size: 13px;
font-weight: 600;
color: var(–cyan);
margin-bottom: 14px;
}
.client-desc {
font-size: 14px;
color: var(–text-secondary);
line-height: 1.6;
margin-bottom: 24px;
flex-grow: 1;
}
.client-link-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: var(–blue);
text-decoration: none !important;
padding: 8px 16px;
background: rgba(37, 99, 235, 0.06);
border-radius: 10px;
transition: var(–transition);
}
.client-link-btn:hover {
background: var(–blue);
color: var(–white) !important;
}
/* Responsive */
@media (max-width: 900px) {
.nie-desktop-nav { display: none; }
.hero-grid, .services-grid-3, .clients-grid-3, .comparison-grid, .roi-calculator-box, .pricing-grid-3, .lead-card-box { grid-template-columns: 1fr; }
.quick-form-flex { grid-template-columns: 1fr; }
.metrics-grid { grid-template-columns: repeat(2, 1fr); }
.nie-hero-title { font-size: 32px; }
}
HỆ SINH THÁI CHUYỂN ĐỔI SỐ & AI 2026
Chuyển Đổi Số Giáo Dục Tự Động Hóa AI Toàn Diện
Tối ưu hóa 80% chi phí vận hành & nguồn lực nhân sự cho Trung tâm Giáo dục, Doanh nghiệp và Solopreneurs với Nền tảng LMS hiện đại, Động cơ NIE OPC và Giọng đọc AI ElevenLabs.
Năng Suất AI
+450%
Tiết Kiệm/Tháng
18.5M VNĐ
Uptime chuẩn SEO
99.85%
[NIE OPC]: Tự động tạo 10 bài viết chuẩn SEO
[ElevenLabs TTS]: Đã xuất audio Tiếng Việt (320kbps)
[LMS Hub]: 1,480 học viên đang học mượt mà
500+
Bài giảng & Khóa học số hóa
80%
Chi phí vận hành được cắt giảm
99.8%
Tốc độ & Uptime chuẩn SEO
50+
Trung tâm & Doanh nghiệp tin dùng
1. Nền Tảng LMS Giáo Dục Số
Số hóa bài giảng video, tài liệu PDF bảo mật chống tải về, quản lý học viên và ngân hàng đề thi AI tự động.
Bảo mật bài giảng, chống quay màn hình/tải về.
Tự động hóa tạo đề thi trắc nghiệm & chấm điểm.
Quản lý tiến độ học tập & xuất chứng chỉ tự động.
Khởi Tạo LMS Này
2. Động Cơ NIE OPC (SEO AI)
Sáng tạo bài viết chuẩn SEO chất lượng cao chỉ với 1-Click, tự động xuất bản trực tiếp lên trang WordPress nie.vn.
Tự động nghiên cứu từ khóa & lập dàn ý SEO.
Kết nối trực tiếp WordPress REST API tự đăng bài.
Chuẩn hóa thẻ Heading, Meta & Schema tự động.
Trải Nghiệm NIE OPC
3. Giọng Đọc AI ElevenLabs TTS
Chuyển đổi văn bản thành giọng đọc truyền cảm chuẩn MC Tiếng Việt phục vụ tạo bài giảng & video ngắn.
Giọng đọc tự nhiên như người thật.
Đa dạng ứng dụng: Đọc bài giảng, sách nói, video.
Xuất file âm thanh MP3/WAV 320kbps sắc nét.
▶ Nghe Giọng Đọc Demo
THƯƠNG HIỆU CAO CẤP
Ngọc Sơn Cá Sấu
ngocsoncasau.com
Hệ thống thương mại điện tử sản phẩm đồ da cao cấp chính hãng, tối ưu hóa trải nghiệm khách hàng và chuẩn SEO Google.
Truy cập ngocsoncasau.com ↗
THỜI TRANG ĐỒ DA
Ngọc Sơn Leather
leather.ngocsoncasau.com
Nền tảng trưng bày bộ sưu tập thời trang da cá sấu cao cấp với giao diện hiện đại, mượt mà trên mọi thiết bị.
Truy cập leather.ngocsoncasau.com ↗
DOANH NGHIỆP & CÔNG NGHỆ
VAQ Group
vaq.vn
Hệ sinh thái giải pháp doanh nghiệp, tư vấn & hạ tầng chuyển đổi số toàn diện cho tổ chức.
Truy cập vaq.vn ↗
CÁCH VẬN HÀNH TRUYỀN THỐNG
❌ Tốn 100 – 300 triệu xây dựng phần mềm riêng cồng kềnh.
❌ Phải chi trả mức lương cao cho đội ngũ Content & IT vận hành.
❌ Website cũ tải chậm, không chuẩn SEO, ít truy cập tự nhiên.
❌ Quản lý bài học và thi cử thủ công tốn nhiều giờ lao động.
GIẢI PHÁP ĐỘT PHÁ TỪ NIE.VN
Tiết kiệm 80% chi phí, triển khai hoàn thiện ngay trong 24h.
Tự động hóa bài viết SEO & giọng đọc AI đỉnh cao chỉ với 1 người.
Website chuẩn SEO Google, điểm tốc độ Core Web Vitals 95+.
LMS thông minh tự động hóa tạo đề thi, chấm điểm & xuất chứng chỉ.
Ngân Sách Tiết Kiệm Mỗi Tháng
21,800,000 VNĐ
Cắt giảm 80% so với thuê nhân sự thủ công
Thời Gian Tiết Kiệm
185 Giờ/Tháng
Tăng gấp 5x tốc độ vận hành công việc
Starter
Solo Creator / Giảng viên tự do
490.000đ
/ tháng
Access Tool AI & ElevenLabs TTS
Thư viện Prompt Marketing & SEO
Sáng tạo 20 bài viết SEO/tháng
Hỗ trợ kỹ thuật 24/7
Chọn Gói Starter
PHỔ BIẾN NHẤT
Pro School
Trung tâm & Cơ sở Giáo dục
1.990.000đ
/ tháng
Trọn bộ Gói Starter
Nền tảng LMS Quản lý 500 Học viên
Động cơ NIE OPC tạo bài viết SEO 1-Click
Ngân hàng đề thi & Chấm điểm AI
Tùy chỉnh Tên miền riêng (Domain)
Đăng Ký Gói Pro
Enterprise
Doanh nghiệp & Tập đoàn lớn
TƯ VẤN
/ theo nhu cầu
LMS Không giới hạn quy mô
Thiết kế Web High-SEO riêng biệt
Đào tạo & Chuyển giao AI Workflow 1-1
SLA Cam kết vận hành 99.9%
Liên Hệ Tư Vấn
🎉
Đăng Ký Thành Công!
Cảm ơn bạn đã quan tâm đến giải pháp của **NIE.vn**. Đội ngũ chuyên gia NIE sẽ liên hệ hỗ trợ bạn qua Zalo/SĐT trong vòng 15 phút.
Đóng & Tiếp Tục Trải Nghiệm
// CLEAN CORPORATE TECH LANDING PAGE CONTROLLER – NIE.VN (2026)
document.addEventListener(‘DOMContentLoaded’, () => {
// 1. Interactive ROI Savings Calculator Logic
const sliderArticles = document.getElementById(‘slider-articles-input’);
const sliderStudents = document.getElementById(‘slider-students-input’);
const labelArticles = document.getElementById(‘label-articles-val’);
const labelStudents = document.getElementById(‘label-students-val’);
const resMoney = document.getElementById(‘res-money-val’);
const resHours = document.getElementById(‘res-hours-val’);
function calculateProROI() {
if (!sliderArticles || !sliderStudents) return;
const articles = parseInt(sliderArticles.value, 10);
const students = parseInt(sliderStudents.value, 10);
labelArticles.textContent = `${articles} Bài`;
labelStudents.textContent = `${students.toLocaleString(‘vi-VN’)} Người`;
// 280,000 VND saved per article + 15,000 VND per student/month
const totalMoneySaved = (articles * 280000) + (students * 15000);
const totalHoursSaved = Math.round((articles * 4) + (students * 0.15));
resMoney.textContent = `${totalMoneySaved.toLocaleString(‘vi-VN’)} VNĐ`;
resHours.textContent = `${totalHoursSaved.toLocaleString(‘vi-VN’)} Giờ/Tháng`;
}
if (sliderArticles && sliderStudents) {
sliderArticles.addEventListener(‘input’, calculateProROI);
sliderStudents.addEventListener(‘input’, calculateProROI);
calculateProROI();
}
// 2. ElevenLabs Sound Demo Audio Toggle Mock
const btnSoundDemo = document.getElementById(‘btn-sound-demo’);
if (btnSoundDemo) {
btnSoundDemo.addEventListener(‘click’, () => {
if (btnSoundDemo.textContent.includes(‘▶’)) {
btnSoundDemo.textContent = ‘⏸ Đang Phát Giọng AI Demo…’;
btnSoundDemo.style.background = ‘#10b981’;
btnSoundDemo.style.color = ‘#fff’;
} else {
btnSoundDemo.textContent = ‘▶ Nghe Giọng Đọc Demo’;
btnSoundDemo.style.background = ‘rgba(255, 255, 255, 0.05)’;
btnSoundDemo.style.color = ‘#f8fafc’;
}
});
}
// 3. Form Submissions & Modal Triggers
const heroForm = document.getElementById(‘hero-quick-form’);
const mainForm = document.getElementById(‘main-pro-lead-form’);
const proModal = document.getElementById(‘pro-modal’);
const closeProModalBtn = document.getElementById(‘close-pro-modal’);
function handleProSubmit(e) {
e.preventDefault();
if (proModal) {
proModal.classList.add(‘active’);
}
e.target.reset();
}
if (heroForm) heroForm.addEventListener(‘submit’, handleProSubmit);
if (mainForm) mainForm.addEventListener(‘submit’, handleProSubmit);
if (closeProModalBtn) {
closeProModalBtn.addEventListener(‘click’, () => {
proModal.classList.remove(‘active’);
});
}
if (proModal) {
proModal.addEventListener(‘click’, (e) => {
if (e.target === proModal) {
proModal.classList.remove(‘active’);
}
});
}
});
