:root {
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
body { background: #070419; color: #e9e4ff; font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
#app { height: 100%; }

/* ===== Logo Research: kính lúp con mắt, chớp mắt rồi hiện chữ M ===== */
.rlogo { --s: 64px; --dur: 6s; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; line-height: 0; }
.rlogo svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 0 calc(var(--s) * .1) #8b5cf666); }
.rlogo .iris, .rlogo .eye, .rlogo .mark, .rlogo .lensglow { transform-origin: 112px 92px; }
.rlogo .iris { animation: rs-look var(--dur) ease-in-out infinite; }
.rlogo .eye { animation: rs-eye var(--dur) ease-in-out infinite; }
.rlogo .m { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; animation: rs-m var(--dur) ease-in-out infinite; }
.rlogo .dot { fill: #34e5a0; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rlogo .dot.d1 { animation: rs-dot1 var(--dur) ease-in-out infinite; }
.rlogo .dot.d2 { animation: rs-dot2 var(--dur) ease-in-out infinite; }
.rlogo .dot.d3 { animation: rs-dot3 var(--dur) ease-in-out infinite; }
.rlogo .lensglow { opacity: 0; animation: rs-glow var(--dur) ease-in-out infinite; }
.rlogo .comet { fill: none; stroke-linecap: round; transform-origin: 112px 92px; animation: rs-spin 4.5s linear infinite; }
.rlogo .comet.c2 { animation-duration: 7s; animation-direction: reverse; }
/* Nhìn trái, phải, lên, xuống rồi thu nhỏ */
@keyframes rs-look {
  0%, 6% { transform: translate(0, 0) scale(1); }
  12%, 17% { transform: translate(-14px, 1px) scale(1); }
  24%, 29% { transform: translate(14px, 1px) scale(1); }
  34% { transform: translate(0, 0) scale(1); }
  40%, 43% { transform: translate(0, -14px) scale(1); }
  49%, 52% { transform: translate(2px, 13px) scale(1); }
  56% { transform: translate(0, 0) scale(1); }
  60%, 96% { transform: translate(0, 0) scale(.72); }
  100% { transform: translate(0, 0) scale(1); }
}
/* Chớp mắt: nhắm lại nhường chỗ cho chữ M, rồi mở ra */
@keyframes rs-eye {
  0%, 58% { transform: scale(1, 1); opacity: 1; }
  62% { transform: scale(1, .04); opacity: 1; }
  63.5%, 94.5% { transform: scale(1, .04); opacity: 0; }
  96% { transform: scale(1, .04); opacity: 1; }
  100% { transform: scale(1, 1); opacity: 1; }
}
@keyframes rs-m {
  0%, 62.5% { opacity: 0; stroke-dashoffset: 100; }
  63.5% { opacity: 1; stroke-dashoffset: 100; }
  73%, 92% { opacity: 1; stroke-dashoffset: 0; }
  95%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes rs-dot1 { 0%, 70% { opacity: 0; transform: scale(.2); } 73% { opacity: 1; transform: scale(1.3); } 76%, 92% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.2); } }
@keyframes rs-dot2 { 0%, 73% { opacity: 0; transform: scale(.2); } 76% { opacity: 1; transform: scale(1.3); } 79%, 92% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.2); } }
@keyframes rs-dot3 { 0%, 76% { opacity: 0; transform: scale(.2); } 79% { opacity: 1; transform: scale(1.3); } 82%, 92% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.2); } }
@keyframes rs-glow { 0%, 62% { opacity: 0; } 76%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes rs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rlogo .iris, .rlogo .eye, .rlogo .m, .rlogo .dot, .rlogo .lensglow, .rlogo .comet { animation: none; }
}

/* Thẻ nhỏ cạnh tên: RESEARCH (cùng kiểu thẻ SALES bên chat.malak.asia) */
.btag { display: inline-block; font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: .8px; line-height: 1; padding: 4px 7px; margin-left: 8px; border-radius: 6px; vertical-align: middle; color: #7fe3ff; background: rgba(60, 190, 255, .14); border: 1px solid rgba(90, 210, 255, .55); box-shadow: 0 0 12px -2px rgba(70, 200, 255, .45); -webkit-text-fill-color: #7fe3ff; }

/* ===== Màn hình đăng nhập ===== */
.lg { position: fixed; inset: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 14px; padding: 24px 16px; color: #e9e4ff;
  background: radial-gradient(1100px 700px at 15% 10%, #3a1a8f55, transparent 60%), radial-gradient(900px 700px at 90% 95%, #1b4fd855, transparent 60%), linear-gradient(160deg, #070419 0%, #0d0630 55%, #10073d 100%); }
.lg::before { content: ""; position: fixed; inset: -50%; z-index: 0; pointer-events: none;
  background-image: linear-gradient(#8b6cff14 1px, transparent 1px), linear-gradient(90deg, #8b6cff14 1px, transparent 1px); background-size: 56px 56px;
  transform: perspective(700px) rotateX(58deg); transform-origin: 50% 40%; animation: lg-grid 14s linear infinite;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 75%); mask-image: radial-gradient(closest-side, #000 15%, transparent 75%); }
@keyframes lg-grid { to { background-position: 0 56px, 56px 0; } }
.lg-orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; animation: lg-float 9s ease-in-out infinite alternate; }
.lg-orb.a { width: 340px; height: 340px; background: #7c3aed55; left: -80px; top: 12%; }
.lg-orb.b { width: 300px; height: 300px; background: #2563eb44; right: -60px; bottom: 8%; animation-delay: -4s; }
@keyframes lg-float { to { transform: translate(40px, -30px) scale(1.12); } }
.lg-card { position: relative; z-index: 1; flex: none; width: min(400px, 100%); text-align: center; padding: 30px 26px 22px; border-radius: 22px;
  background: linear-gradient(180deg, #ffffff12, #ffffff07); border: 1px solid #b98cff33; box-shadow: 0 30px 80px #0008, inset 0 1px 0 #ffffff1f; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lg-card .rlogo { --s: 132px; margin: 4px 0 6px; }
.lg-card h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.lg-card h1 span { background: linear-gradient(90deg, #c4a2ff, #7aa8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-card h1 .btag { font-size: 11px; position: relative; top: -3px; }
.lg-hello { height: 24px; margin: 8px 0 2px; color: #b9a8f5; font-size: 15px; transition: opacity .35s; }
.lg-sub { margin: 0 0 20px; color: #a99bdc; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-wrap: balance; }
.lg-card input { display: block; width: 100%; height: 46px; background: #0a0526aa; border: 1px solid #8b6cff55; color: #fff; border-radius: 12px; text-align: left; padding: 0 16px; letter-spacing: .04em; margin-bottom: 10px; }
.lg-card input::placeholder { color: #8d80c2; letter-spacing: normal; }
.lg-pw { position: relative; }
.lg-pw input { padding-right: 48px; }
.lg-eye { position: absolute; top: 0; right: 4px; width: 40px; height: 46px; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; color: #8d80c2; cursor: pointer; }
.lg-eye:hover, .lg-eye[aria-pressed="true"] { color: #c4a2ff; }
.lg-eye:focus-visible { outline: 2px solid #c4a2ff; outline-offset: -4px; }
.lg-card input:focus { outline: none; border-color: #b98cff; box-shadow: 0 0 0 3px #8b5cf633; }
.lg-go { position: relative; overflow: hidden; isolation: isolate; width: 100%; height: 46px; margin-top: 2px; border: 0; border-radius: 12px; font-weight: 700; font-size: 15px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #8b5cf6, #4f46e5); box-shadow: 0 8px 24px #6d3df066; }
.lg-go:hover { filter: brightness(1.1); }
.lg-go:focus-visible { outline: 2px solid #c4a2ff; outline-offset: 3px; }
/* Vệt sáng lướt ngang nút đăng nhập */
.lg-go::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, #ffffff00 25%, #ffffff55 50%, #ffffff00 75%, transparent 100%); transform: translateX(-130%) skewX(-18deg); animation: lg-shine 3.2s ease-in-out infinite; }
@keyframes lg-shine { 0% { transform: translateX(-130%) skewX(-18deg); } 45%, 100% { transform: translateX(380%) skewX(-18deg); } }
.lg-card .err { min-height: 18px; margin-top: 10px; font-size: 12.5px; color: #ff9d9d; }
.lg-card .err.info { color: #9be7ff; }
.lg-status { margin-top: 6px; font-size: 12px; color: #8d80c2; display: flex; justify-content: center; align-items: center; gap: 8px; white-space: nowrap; }
.lg-status i { width: 8px; height: 8px; border-radius: 50%; background: #34e5a0; box-shadow: 0 0 10px #34e5a0; animation: lg-blink 1.6s ease-in-out infinite; }
@keyframes lg-blink { 50% { opacity: .35; } }
.lg-markets { margin-top: 10px; font-size: 11px; letter-spacing: .06em; color: #7d70b3; }
@media (prefers-reduced-motion: reduce) { .lg::before, .lg-orb, .lg-status i, .lg-go::after { animation: none; } .lg-go::after { display: none; } }
@media (max-width: 900px) { .lg-card input { font-size: 16px; } }
@media (max-width: 380px) { .lg-card h1 { font-size: 25px; } }

/* Mạng lưới năng lực dưới khung đăng nhập */
.ainet { position: relative; z-index: 1; width: min(420px, 100%); height: auto; overflow: visible; flex: none; }
.ainet .ln { fill: none; stroke-linecap: round; }
.ainet .ln.glow { stroke: #9b6bff; stroke-width: 5; opacity: .35; animation: ai-glow 3.2s ease-in-out infinite; }
.ainet .ln.base { stroke: #8b6cff; stroke-width: 1; opacity: .5; }
.ainet .ln.flow { stroke: #d9c5ff; stroke-width: 1.6; stroke-dasharray: 3 14; animation: ai-flow 1.6s linear infinite; }
.ainet .ln.flow.f2 { animation-direction: reverse; animation-duration: 2s; }
.ainet .ln.flow.f3 { animation-duration: 2.4s; }
.ainet .spark { fill: #fff; filter: drop-shadow(0 0 4px #c4a2ff) drop-shadow(0 0 8px #8b5cf6); offset-rotate: 0deg; animation: ai-travel 3.2s ease-in-out infinite; }
.ainet .spark.s2 { animation-delay: -1.1s; animation-direction: alternate-reverse; }
.ainet .spark.s3 { animation-delay: -2.1s; animation-duration: 4s; }
.ainet .halo { fill: #8b5cf6; opacity: .14; animation: ai-halo 3s ease-in-out infinite; }
.ainet .halo.h2 { animation-delay: -1s; }
.ainet .halo.h3 { animation-delay: -2s; }
.ainet .node { fill: #140a3c; stroke: url(#ng); stroke-width: 1.4; }
.ainet .ico { fill: none; stroke: #d9c5ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ainet .lab { fill: #b9a8f5; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
@keyframes ai-flow { to { stroke-dashoffset: -34; } }
@keyframes ai-glow { 50% { opacity: .6; } }
@keyframes ai-halo { 50% { opacity: .32; } }
@keyframes ai-travel { from { offset-distance: 0%; opacity: 0; } 10%, 90% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ainet .ln, .ainet .spark, .ainet .halo { animation: none; } .ainet .spark { display: none; } }