/* MotionSites v2 — lengocminh.vn · PREMIUM SYSTEM COMMAND CENTER
   Nguyên tắc: motion kể chuyện, ít nhưng sâu; không tag bay, không neon; reduced-motion đầy đủ. */

:root {
  --ms-glass: rgba(255,255,255,.05);
  --ms-glass-border: rgba(255,255,255,.13);
  --ms-ai-a: rgba(88,101,242,.14);
  --ms-ai-b: rgba(147,88,242,.10);
}

/* ===== HERO — nền sâu hơn + subtle grid ===== */
.cc-hero { position:relative; overflow:hidden; background:linear-gradient(150deg,#0e0e10,#17171b 55%,#101014); }
.subtle-grid { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:44px 44px; }
.cc-hero .orb { position:absolute; width:560px; height:560px; border-radius:50%; filter:blur(100px); opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 45% 40%, var(--ms-ai-a), var(--ms-ai-b) 55%, transparent 75%); right:-140px; top:-100px; }
.cc-grid { display:grid; grid-template-columns:1fr; gap:36px; align-items:center; position:relative; z-index:2; }
@media (min-width:900px){ .cc-grid { grid-template-columns:1.02fr .98fr; } }
.cc-left .who { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cc-left .who img { width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:center top; border:2px solid var(--gold,#FFC020); }
.cc-left .who span { color:rgba(255,255,255,.72); font-size:.9rem; }

/* ===== SYSTEM COMMAND VISUAL ===== */
.system-command { position:relative; display:flex; flex-direction:column; gap:12px; }
.system-core-card { position:relative; background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border:1px solid rgba(255,192,32,.38); border-radius:18px; padding:20px 24px; color:#fff; text-align:center;
  max-width:340px; margin:0 auto; width:100%; }
.system-core-card .k { font-size:.68rem; font-weight:800; letter-spacing:.22em; color:var(--gold,#FFC020); }
.system-core-card .nm { font-family:'Fraunces',serif; font-size:1.25rem; margin:4px 0 1px; }
.system-core-card .sub { font-size:.82rem; color:rgba(255,255,255,.6); }
.system-core-card .hstate { display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-size:.74rem; font-weight:700;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:4px 12px; color:rgba(255,255,255,.85); }
.system-core-card .hstate i { width:7px; height:7px; border-radius:50%; background:#7ddb8a; font-style:normal; }
.ai-glow { box-shadow:0 0 0 1px rgba(255,192,32,.12), 0 10px 40px rgba(88,101,242,.10); }
@media (prefers-reduced-motion:no-preference){
  .ai-glow { animation:ms-glow 6s ease-in-out infinite; }
}
@keyframes ms-glow {
  0%,100% { box-shadow:0 0 0 1px rgba(255,192,32,.10), 0 10px 36px rgba(88,101,242,.08); }
  50%     { box-shadow:0 0 0 1px rgba(255,192,32,.22), 0 14px 52px rgba(147,88,242,.16); }
}
/* line hội tụ về core */
.system-line { display:block; width:100%; height:34px; }
.system-line line { stroke:rgba(255,192,32,.25); stroke-width:1; }
@media (prefers-reduced-motion:no-preference){
  .system-line line { stroke-dasharray:4 5; animation:ms-dash 9s linear infinite; }
}
@keyframes ms-dash { to { stroke-dashoffset:-90; } }
/* 3 case card */
.system-cases { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:560px){ .system-cases { grid-template-columns:1fr; } }
.system-case-card { background:var(--ms-glass); border:1px solid var(--ms-glass-border); border-radius:14px; padding:13px 14px; color:#fff; }
.system-case-card .ab { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px;
  background:rgba(255,192,32,.14); color:var(--gold,#FFC020); font-weight:800; font-size:.72rem; letter-spacing:.04em; margin-bottom:8px; }
.system-case-card strong { display:block; font-size:.84rem; line-height:1.35; }
.system-case-card small { color:rgba(255,255,255,.55); font-size:.72rem; }
@media (prefers-reduced-motion:no-preference){
  .system-case-card:nth-child(1){ animation:ms-float 9s ease-in-out infinite; }
  .system-case-card:nth-child(3){ animation:ms-float 11s ease-in-out infinite; animation-delay:-4s; }
}
@keyframes ms-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
/* 5 module */
.system-modules { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.system-module { border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:6px 14px; font-size:.76rem; font-weight:700;
  color:rgba(255,255,255,.75); background:rgba(255,255,255,.03); }
.system-module i { font-style:normal; color:var(--gold,#FFC020); margin-right:6px; font-size:.68rem; }
/* status */
.system-status { text-align:center; font-size:.74rem; color:rgba(255,255,255,.5); letter-spacing:.03em; }
.system-status b { color:rgba(255,255,255,.75); font-weight:700; }

/* ===== ECOSYSTEM BOARD (thay node network) ===== */
.eco { position:relative; background:#141416; color:#fff; padding:64px 0; overflow:hidden; }
.eco h2 { color:#fff; } .eco .eyebrow { color:var(--gold,#FFC020); }
.ecosystem-board { position:relative; margin-top:20px; }
.ecosystem-core { max-width:330px; margin:0 auto 14px; text-align:center; background:var(--gold,#FFC020); color:#1a1a1a;
  border-radius:16px; padding:14px 22px; font-weight:800; }
.ecosystem-core small { display:block; font-weight:600; font-size:.75rem; color:rgba(26,26,26,.72); }
.ecosystem-board .conn { display:block; width:2px; height:22px; margin:0 auto 14px; background:linear-gradient(rgba(255,192,32,.5), rgba(255,192,32,.08)); }
.ecosystem-cases { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:820px){ .ecosystem-cases { grid-template-columns:repeat(4,1fr); } }
.ecosystem-case { background:var(--ms-glass); border:1px solid var(--ms-glass-border); border-radius:14px; padding:14px 16px;
  transition:border-color .3s ease, background .3s ease; }
.ecosystem-case:hover { border-color:rgba(255,192,32,.45); background:rgba(255,255,255,.07); }
.ecosystem-case .ab { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px;
  background:rgba(255,192,32,.14); color:var(--gold,#FFC020); font-weight:800; font-size:.68rem; margin-bottom:8px; }
.ecosystem-case strong { display:block; font-size:.86rem; }
.ecosystem-case small { color:rgba(255,255,255,.55); font-size:.73rem; }
.ecosystem-modules { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.ecosystem-modules .system-module { color:rgba(255,255,255,.65); }

/* ===== BENTO / CASE / SHOWCASE (hover có chiều sâu, không đồng loạt) ===== */
.bento .card { transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.bento .card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.10); border-color:rgba(255,192,32,.5); }
.case-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.case-chips span { font-size:.72rem; border:1px solid var(--border,#E4E0D6); border-radius:999px; padding:3px 10px; color:#666; background:#fff; }

/* ===== AI BRAIN MODULE MAP (trang minh-ai-brain — giữ, bớt động) ===== */
.brainmap { position:relative; background:#141416; border-radius:22px; padding:26px 18px; margin-top:18px; overflow:hidden; }
.brainmap .orb { position:absolute; width:380px; height:380px; border-radius:50%; filter:blur(70px); opacity:.55;
  background:radial-gradient(circle, var(--ms-ai-a), var(--ms-ai-b) 60%, transparent 78%); left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; }
.brainmap .inner { position:relative; height:430px; }
.brainmap svg.links { position:absolute; inset:0; width:100%; height:100%; }
.brainmap svg.links line { stroke:rgba(167,139,250,.26); stroke-width:1; }
.bnode { position:absolute; transform:translate(-50%,-50%); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  color:#fff; border-radius:12px; padding:10px 15px; font-size:.82rem; font-weight:600; white-space:nowrap; transition:border-color .3s; }
.bnode:hover { border-color:#a78bfa; }
.bnode.center { background:linear-gradient(135deg,#5865f2,#8b5cf6); border:none; font-weight:800; padding:15px 22px; font-size:.95rem; }
.bnode[data-p="c"]{ left:50%; top:50%; } .bnode[data-p="1"]{ left:50%; top:7%; } .bnode[data-p="2"]{ left:83%; top:22%; }
.bnode[data-p="3"]{ left:90%; top:53%; } .bnode[data-p="4"]{ left:78%; top:84%; } .bnode[data-p="5"]{ left:50%; top:94%; }
.bnode[data-p="6"]{ left:22%; top:84%; } .bnode[data-p="7"]{ left:10%; top:53%; } .bnode[data-p="8"]{ left:17%; top:22%; }
@media (max-width:760px){
  .brainmap .inner { height:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .brainmap svg.links { display:none; }
  .bnode { position:static; transform:none; white-space:normal; }
  .bnode.center { grid-column:1/-1; text-align:center; }
}

/* ===== STATS ===== */
.stats { background:#141416; color:#fff; padding:52px 0; }
.stats-row { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; text-align:center; margin-top:8px; }
@media (min-width:761px){ .stats-row { grid-template-columns:repeat(5,1fr); } }
.stat .n { font-family:'Fraunces',serif; font-size:2.3rem; font-weight:700; color:var(--gold,#FFC020); }
.stat .n small { font-size:1.3rem; }
.stat .l { font-size:.85rem; color:rgba(255,255,255,.65); margin-top:2px; }

/* ===== SHOWCASE ngang ===== */
.showcase { overflow-x:auto; display:flex; gap:14px; padding:6px 4px 14px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.showcase::-webkit-scrollbar { height:8px; } .showcase::-webkit-scrollbar-thumb { background:#ddd; border-radius:99px; }
.show-card { flex:0 0 250px; scroll-snap-align:start; background:#fff; border:1px solid var(--border,#E4E0D6); border-radius:16px; padding:18px 20px; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease; }
.show-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.09); }
.show-card .k { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text,#8a6a00); }
.show-card h3 { font-family:'Be Vietnam Pro',sans-serif; font-size:.98rem; margin:6px 0 4px; color:var(--ink,#1a1a1a); }
.show-card p { font-size:.85rem; color:#666; }

/* ===== PAIN CARDS (số thứ tự thay emoji — premium) + CTA STRIP ===== */
.pain { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.65;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.pain .pic { flex:none; width:34px; height:34px; border-radius:10px; background:var(--cream,#F8F6F1);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; color:var(--gold-text,#8a6a00); letter-spacing:.03em; }
.pain strong { color:var(--ink,#1a1a1a); }
@media (hover:hover){
  .pain:hover { transform:translateX(4px); border-left-color:var(--ink,#1a1a1a); box-shadow:0 8px 20px rgba(0,0,0,.07); }
}
@media (hover:none){
  .pain:active, .card:active, .show-card:active { transform:scale(.985); box-shadow:0 4px 14px rgba(0,0,0,.08); }
}
.cta-strip { background:var(--cream,#F8F6F1); border:1px solid var(--border,#E4E0D6); border-radius:16px;
  padding:18px 22px; margin:34px auto 0; display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; }
.cta-strip p { margin:0; font-size:.97rem; }
.cta-strip .btn { padding:11px 22px; font-size:.92rem; }
@media (max-width:600px){ .cta-strip { flex-direction:column; align-items:stretch; text-align:center; } .cta-strip .btn { width:100%; text-align:center; } }

/* ===== MAGNETIC + REVEAL ===== */
.btn.magnetic { will-change:transform; transition:transform .18s ease-out, filter .2s; }
.ms-reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.ms-reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .ai-glow, .system-case-card, .system-line line { animation:none !important; }
  .btn.magnetic { transition:none !important; }
  .ms-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===== LIQUID GLASS v2 — vien gradient-stroke bang mask (port tu spec, thuan CSS) ===== */
.system-core-card, .system-case-card, .ecosystem-case, .stat-card-glass {
  border:none !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10), 0 8px 28px rgba(0,0,0,.30);
}
.system-core-card::before, .system-case-card::before, .ecosystem-case::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.system-core-card, .system-case-card, .ecosystem-case { position:relative; overflow:hidden; }
/* core card: vien vang-am dam hon (diem nhan trung tam) */
.system-core-card::before {
  background:linear-gradient(180deg, rgba(255,192,32,.55) 0%, rgba(255,192,32,.18) 22%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 60%, rgba(255,192,32,.18) 80%, rgba(255,192,32,.5) 100%);
}
.ecosystem-case:hover { border-color:transparent; }

/* ===== BLUR TEXT — H1 hero hien tung tu (port BlurText, thuan JS/CSS) ===== */
.blur-word { display:inline-block; }
@media (prefers-reduced-motion:no-preference){
  .blur-word { filter:blur(10px); opacity:0; transform:translateY(20px);
    transition:filter .7s ease, opacity .7s ease, transform .7s ease; }
  .blur-word.in { filter:blur(0); opacity:1; transform:none; }
}

/* ===== TIN HIEU SONG (de xuat motionsites — 3 muc web Thay Minh) ===== */
/* 1a. Orb troi cham 45s */
@media (prefers-reduced-motion:no-preference){
  .cc-hero .orb { animation:ms-drift 45s ease-in-out infinite alternate; }
}
@keyframes ms-drift {
  0%   { transform:translate(0,0) scale(1); }
  50%  { transform:translate(-120px,60px) scale(1.08); }
  100% { transform:translate(-40px,140px) scale(.96); }
}
/* 1b. Vet scan mo quet doc hero 18s/lan */
.cc-hero .scanline { position:absolute; left:0; right:0; top:-140px; height:140px; pointer-events:none; z-index:1;
  background:linear-gradient(transparent, rgba(255,192,32,.045), transparent); }
@media (prefers-reduced-motion:no-preference){
  .cc-hero .scanline { animation:ms-scan 18s linear infinite; }
}
@keyframes ms-scan { 0%{ top:-140px; } 100%{ top:110%; } }
/* 2. Con tro terminal nhap nhay o status */
@media (prefers-reduced-motion:no-preference){
  .system-status b::after { content:"▍"; color:var(--gold,#FFC020); margin-left:2px; animation:ms-blink 1.1s steps(1) infinite; }
}
@keyframes ms-blink { 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
/* 3. Stats so kieu bang dieu khien (mono) */
.stat .n { font-family:ui-monospace,'Cascadia Mono',Consolas,'Courier New',monospace; font-weight:600; letter-spacing:-1px; }

/* ===== HOVER "NỔI" cho card hệ sinh thái (như Bee's Home) + số stat nảy (07/07) ===== */
@media (hover:hover){
  .system-case-card, .ecosystem-case { transition:transform .25s ease, box-shadow .25s ease; }
  .system-case-card:hover, .ecosystem-case:hover {
    transform:translateY(-5px);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.14), 0 18px 44px rgba(0,0,0,.46);
  }
  /* viền vàng-ấm sáng lên khi hover */
  .system-case-card:hover::before, .ecosystem-case:hover::before {
    background:linear-gradient(180deg, rgba(255,192,32,.66) 0%, rgba(255,192,32,.22) 30%, rgba(255,255,255,0) 55%, rgba(255,192,32,.22) 80%, rgba(255,192,32,.60) 100%);
  }
}
@media (hover:none){
  .system-case-card:active, .ecosystem-case:active { transform:scale(.985); }
}
/* Số thống kê "nổi lên" (nảy + rõ dần) khi cuộn tới — đồng bộ với count-up */
.stat .n { display:inline-block; }
@media (prefers-reduced-motion:no-preference){
  .stat.in .n { animation:ms-pop .62s cubic-bezier(.2,.85,.25,1.15) both; }
}
@keyframes ms-pop { 0%{ transform:scale(.55); opacity:.15; } 60%{ transform:scale(1.14); opacity:1; } 100%{ transform:scale(1); } }
/* nhãn dưới số hiện mượt theo sau */
@media (prefers-reduced-motion:no-preference){
  .stat.in .l { animation:ms-fadeup .6s ease .12s both; }
}
@keyframes ms-fadeup { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Đồng bộ hover cho lộ trình (.step) + thẻ tài liệu (.doc-card) — như Bee's Home */
@media (hover:hover){
  .step { transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .step:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.07); border-color:rgba(255,192,32,.55); }
  .doc-card { transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  .doc-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.09); border-color:rgba(255,192,32,.55); }
}
@media (hover:none){
  .step:active, .doc-card:active { transform:scale(.99); }
}