/* OneCAD — Cổng đăng nhập nền tảng chưa có app (HST-7, anh Tâm duyệt 18/10/2026): cong/forma-viet.html, cong/iot.html */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#050a14;--ink:#eef5fb;--ink2:#b9c8d6;--mute:#8fa4b8;--dim:#5d7186;--line:rgba(160,210,240,.14);
 --mono:'JetBrains Mono',ui-monospace,monospace}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
svg{display:block}

/* màu riêng nền tảng — lấy theo nen-tang-dark.css */
[data-np=nexus]{--a:#7ab8ff;--b:#1f6fd6;--c:#6fa8ff;--s:rgba(20,120,212,.5);--np1:#1478d4;--np2:#8cc8ff}
[data-np=portal]{--a:#6cc8ff;--b:#1a8be0;--c:#5cbcff;--s:rgba(40,160,240,.45);--np1:#2aa0f0;--np2:#9edcff}
[data-np=academy]{--a:#5fe0cf;--b:#1fb5a0;--c:#3fd0bb;--s:rgba(31,181,160,.45);--np1:#1fb5a0;--np2:#6ff0dc}
[data-np=fm]{--a:#74e0a6;--b:#25a060;--c:#4fd08a;--s:rgba(40,170,100,.45);--np1:#2bb36a;--np2:#9af0c0}
[data-np=forma]{--a:#b4e07a;--b:#5fae32;--c:#8fd05a;--s:rgba(108,192,74,.45);--np1:#6cc04a;--np2:#c6f08a}
[data-np=iot]{--a:#ffcf7a;--b:#e88a2c;--c:#f7a64a;--s:rgba(243,154,43,.45);--np1:#f39a2b;--np2:#ffd49a}
.tile{display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--a),var(--b));border-radius:10px}
.tile svg{width:58%;height:58%}
/* ========== CỔNG ĐĂNG NHẬP (khuôn chung) ========== */
.gate{position:relative;min-height:100vh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.gbg{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(46% 62% at 70% 46%,color-mix(in srgb,var(--np1) 24%,transparent),transparent 70%),
  radial-gradient(40% 50% at 96% 6%,rgba(20,120,212,.14),transparent 70%),#050a14}
.gbg::before{content:"";position:absolute;inset:0;
 background:repeating-linear-gradient(0deg,rgba(120,200,220,.045) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(120,200,220,.045) 0 1px,transparent 1px 48px);
 -webkit-mask:radial-gradient(70% 80% at 60% 45%,#000 30%,transparent 85%);mask:radial-gradient(70% 80% at 60% 45%,#000 30%,transparent 85%)}
.gbg canvas{position:absolute;inset:0;width:100%;height:100%}
.gbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,20,.92) 0%,rgba(5,10,20,.6) 36%,rgba(5,10,20,.05) 64%),linear-gradient(180deg,rgba(5,10,20,0) 72%,#050a14 100%)}

/* thanh trên chung */
.gnav{height:72px;flex:none;display:flex;align-items:center;gap:18px;padding:0 max(32px,calc((100vw - 1296px)/2));
 background:rgba(5,10,20,.72);box-shadow:0 1px 0 rgba(160,210,240,.1);backdrop-filter:blur(14px)}
.gnav .home{display:flex;flex:none}
.gnav .logo{height:38px;width:auto}
.gnav .sep{color:#3b5064;font-size:22px;font-weight:300;margin:0 -2px}
.gnav .plat{display:flex;align-items:center;gap:11px}
.gnav .plat .tile{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 4px rgba(255,255,255,.05),0 6px 18px var(--s)}
.gnav .plat b{display:block;font-size:15.5px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.15}
.gnav .plat small{display:block;font-size:12px;color:var(--mute);line-height:1.3}
.gnav .sp{flex:1}
.gnav .back{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:#e6f0f8;
 border:1px solid rgba(190,225,250,.22);background:rgba(255,255,255,.04)}
.gnav .back svg{width:16px;height:16px}
.gnav .adsk{height:24px;width:auto;opacity:.95;padding-left:18px;border-left:1px solid var(--line);box-sizing:content-box}

.gmain{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:64px;align-items:start;align-content:center;
 width:100%;max-width:1296px;margin:0 auto;padding:64px 32px 40px}
.gleft{padding-top:6px;max-width:680px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
 color:color-mix(in srgb,var(--c) 55%,#fff);padding:7px 14px 7px 11px;border-radius:999px;
 border:1px solid color-mix(in srgb,var(--c) 34%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent)}
.eyebrow .ebg{font-family:'Be Vietnam Pro';font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border-radius:5px;background:rgba(243,154,43,.16);color:#ffbf73;border:1px solid rgba(243,154,43,.4)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.gleft h1{margin-top:24px;font-size:50px;line-height:1.04;font-weight:800;letter-spacing:-.035em;color:#fff}
.gleft h1 em{font-style:normal;display:block;background:linear-gradient(95deg,var(--np2),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.gleft .lead{margin-top:18px;font-size:16.5px;line-height:1.6;color:#a9bccd;max-width:540px}
.bens{list-style:none;margin-top:24px;display:grid;gap:13px}
.bens li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:#dce7f0}
.ck{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:-1px;
 background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 42%,transparent);color:var(--np2)}
.ck svg{width:12px;height:12px}

/* thẻ khuyến khích (cùng kiểu mọi app) */
.slot{margin-top:34px;display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;max-width:560px;
 background:linear-gradient(180deg,rgba(14,28,48,.72),rgba(8,16,30,.78));border:1px solid var(--line);box-shadow:0 20px 50px -24px rgba(0,0,0,.7);backdrop-filter:blur(10px)}
.slot .si{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--np2);
 background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 32%,transparent)}
.slot .si svg{width:22px;height:22px}
.slot .sx{flex:1;min-width:0}
.slot .st{white-space:nowrap;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#7f95aa}
.slot .st b{font-family:'Be Vietnam Pro';font-size:10.5px;letter-spacing:.08em;font-weight:700;padding:3px 8px;border-radius:6px;background:rgba(243,154,43,.16);color:#ffbf73;border:1px solid rgba(243,154,43,.4)}
.slot p{margin-top:6px;font-size:14.5px;font-weight:600;line-height:1.4;color:#fff}
.slot .go{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;font-size:13.5px;font-weight:700;color:#e6f0f8;
 background:rgba(255,255,255,.05);border:1px solid rgba(190,225,250,.22);white-space:nowrap}
.slot .go svg{width:14px;height:14px}

/* thẻ đăng nhập (cùng kích thước mọi app) */
.card{position:relative;width:452px;height:596px;display:flex;flex-direction:column;padding:30px 32px 26px;border-radius:24px;
 background:linear-gradient(180deg,rgba(16,30,52,.74),rgba(8,16,30,.82));border:1px solid rgba(170,215,245,.18);
 box-shadow:0 40px 90px -36px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset,0 1px 0 rgba(255,255,255,.07) inset;backdrop-filter:blur(22px) saturate(1.2)}
.card::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:.75}
.chd{display:flex;align-items:center;gap:12px}
.chd .tile{width:46px;height:46px;border-radius:13px;box-shadow:0 0 0 5px rgba(255,255,255,.05),0 0 30px var(--s)}
.chd .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f95aa;line-height:1.5}
.chd .k b{display:block;color:color-mix(in srgb,var(--c) 55%,#fff);font-weight:500}
.card h2{margin-top:20px;font-size:24px;white-space:nowrap;line-height:1.18;font-weight:800;letter-spacing:-.025em;color:#fff}
.card h2 em{font-style:normal;background:linear-gradient(95deg,var(--np2),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.card .sub{margin-top:8px;font-size:14px;line-height:1.55;color:#a9bccd;height:44px;overflow:hidden}
.btn-id{margin-top:20px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:11px;font-size:16px;font-weight:700;color:#fff;
 background:linear-gradient(100deg,#1478d4,#1fb5a0);box-shadow:0 10px 30px -8px rgba(31,181,160,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-id .idb{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.btn-id svg{width:18px;height:18px}
.ways{margin-top:16px}
.ways .wl{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#7f95aa}
.ways .wl::before,.ways .wl::after{content:"";flex:1;height:1px;background:var(--line)}
.chips{list-style:none;margin-top:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.chip{height:58px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
 background:rgba(255,255,255,.035);border:1px solid rgba(190,225,250,.14);font-size:11px;font-weight:600;color:#cfdbe6;text-align:center;line-height:1.1}
.chip svg{width:17px;height:17px}
.note{margin-top:16px;display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:12px;height:68px;overflow:hidden;
 background:color-mix(in srgb,var(--c) 8%,rgba(8,16,30,.5));border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.note svg{flex:none;width:17px;height:17px;color:var(--np2);margin-top:1px}
.note span{font-size:13px;line-height:1.5;color:#c9d7e3}
.note b{color:#fff;font-weight:700}
.btn-sec{margin-top:12px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:600;color:#e6f0f8;
 background:rgba(255,255,255,.04);border:1px solid rgba(190,225,250,.24)}
.btn-sec svg{width:16px;height:16px}
.cft{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;line-height:1.5;color:#7f95aa}
.cft svg{flex:none;width:18px!important;height:18px!important}
.cft svg{width:14px;height:14px;color:#6fd0bf}
.cft b{color:#cfe3f0;font-weight:600}

.gfoot{flex:none;height:56px;display:flex;align-items:center;gap:22px;padding:0 max(32px,calc((100vw - 1296px)/2));border-top:1px solid rgba(160,210,240,.08);
 font-size:13px;color:#7f95aa;background:rgba(4,8,16,.6)}
.gfoot .sp{flex:1}
.gfoot a:hover{color:#fff}

/* điện thoại */
@media (max-width:760px){
 .gnav{height:60px;gap:10px;padding:0 16px}
 .gnav .logo{height:30px}
 .gnav .plat .tile{width:30px;height:30px;border-radius:9px}
 .gnav .plat b{font-size:14px}.gnav .plat small{display:none}
 .gnav .back{width:40px;padding:0;justify-content:center}.gnav .back span{display:none}
 .gnav .adsk{display:none}
 .gbg::after{background:linear-gradient(180deg,rgba(5,10,20,.55) 0%,rgba(5,10,20,.82) 50%,#050a14 100%)}
 .gmain{display:flex;flex-direction:column;gap:0;padding:28px 16px 28px}
 .gleft{display:contents}
 .eyebrow{font-size:10px;letter-spacing:.12em;align-self:flex-start}
 .gleft h1{font-size:30px;margin-top:18px}
 .btn-sec{font-size:13px;padding:0 10px;gap:7px}
 .card h2{font-size:22px;white-space:normal}
 .note{height:auto;min-height:66px}
 .gleft .lead{font-size:15px;margin-top:12px}
 .bens{margin-top:18px;gap:10px}.bens li{font-size:14.5px}
 .eyebrow{order:1}.gleft h1{order:2}.gleft .lead{display:none}
 .card{order:3;width:100%;height:auto;margin-top:22px;padding:24px 20px 20px}
 .bens{order:4;margin-top:26px!important}
 .card .sub{height:auto}
 .cft{margin-top:18px}
 .slot{order:5;margin-top:20px;flex-wrap:wrap}
 .slot .go{width:100%;justify-content:center}
 .slot .st{white-space:normal;flex-wrap:wrap;row-gap:6px}
 .chips{gap:6px}.chip{height:56px;font-size:10.5px}
 .gfoot{height:auto;flex-wrap:wrap;gap:8px 16px;padding:18px 16px;justify-content:center}.gfoot .sp{display:none}
 .gfoot .cp{width:100%;text-align:center}
}

/* tương tác + trợ năng (bổ sung khi code) */
.gnav .back,.slot .go,.btn-id,.btn-sec{transition:background .2s,border-color .2s,filter .2s,transform .2s}
.gnav .back:hover,.slot .go:hover,.btn-sec:hover{background:rgba(255,255,255,.09);border-color:rgba(190,225,250,.4)}
.btn-id:hover{filter:brightness(1.08);transform:translateY(-1px)}
a:focus-visible{outline:2px solid var(--np2);outline-offset:3px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.btn-id:hover{transform:none}}