/* UniStream V78 Login v155 */ body:has(#authScreen:not(.hidden)){ overflow:hidden!important; } #authScreen.v78-auth-screen{ position:fixed!important; inset:0!important; z-index:99999!important; display:grid!important; place-items:center!important; padding:24px!important; background: radial-gradient(circle at 20% 10%,rgba(28,92,145,.20),transparent 33%), linear-gradient(145deg,#061522,#071e2d 55%,#061522)!important; } #authScreen .v78-auth-card{ width:min(430px,calc(100vw - 34px))!important; padding:27px 30px 25px!important; border:1px solid #25465d!important; border-radius:14px!important; background:linear-gradient(180deg,#0a2030,#071925)!important; box-shadow:0 26px 70px rgba(0,0,0,.40)!important; } #authScreen .v78-login-brand{ margin:0 0 18px!important; padding:0 0 18px!important; border-bottom:1px solid #1b394d!important; text-align:center!important; } #authScreen .v78-login-logo{ display:block!important; width:245px!important; max-width:78%!important; height:auto!important; margin:0 auto 12px!important; padding:0!important; border:0!important; background:transparent!important; } #authScreen .v78-login-logo-light{ display:none!important; } #authScreen .v78-login-brand p{ margin:0!important; color:#a4b8c8!important; font-size:9px!important; font-weight:800!important; letter-spacing:1px!important; } #authScreen .v78-login-brand small{ display:block!important; margin-top:5px!important; color:#607b8f!important; font-size:8px!important; } #authScreen #authForm h2{ margin:0 0 17px!important; color:#f0f6fa!important; font-size:19px!important; text-align:left!important; } #authScreen #authForm>label, #authScreen #setupName label{ display:block!important; position:relative!important; margin:0 0 12px!important; color:#9db2c2!important; font-size:9px!important; font-weight:700!important; text-align:left!important; } #authScreen #authForm input:not([type="checkbox"]){ display:block!important; width:100%!important; height:40px!important; margin-top:6px!important; padding:0 11px!important; border:1px solid #2c4c62!important; border-radius:6px!important; background:#061722!important; color:#eef5f9!important; outline:none!important; font-size:11px!important; } #authScreen #authForm input:not([type="checkbox"]):focus{ border-color:#448be7!important; box-shadow:0 0 0 3px rgba(57,128,224,.13)!important; } /* PASSWORD */ #authScreen .login-password-label #authPassword{ padding-right:92px!important; } #authScreen #toggleLoginPassword{ position:absolute!important; right:6px!important; bottom:5px!important; width:auto!important; min-width:72px!important; height:30px!important; margin:0!important; padding:0 5px!important; border:0!important; border-radius:4px!important; background:transparent!important; color:#7893a7!important; box-shadow:none!important; font-size:8px!important; font-weight:600!important; text-align:right!important; } #authScreen #toggleLoginPassword:hover{ color:#dfeaf2!important; background:#102b3e!important; } /* ONE ROW: REMEMBER LEFT / FORGOT RIGHT */ #authScreen #loginOptionRow{ width:100%!important; min-height:22px!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; margin:2px 0 4px!important; padding:0!important; border:0!important; background:transparent!important; } #authScreen #loginOptionRow .remember-login{ width:auto!important; height:auto!important; min-height:0!important; display:inline-flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:5px!important; flex:0 1 auto!important; margin:0!important; padding:0!important; color:#8ea5b6!important; font-size:8px!important; line-height:13px!important; font-weight:600!important; white-space:nowrap!important; } #authScreen #loginOptionRow #rememberLogin{ appearance:auto!important; -webkit-appearance:checkbox!important; display:inline-block!important; position:static!important; width:12px!important; min-width:12px!important; max-width:12px!important; height:12px!important; min-height:12px!important; max-height:12px!important; flex:0 0 12px!important; margin:0!important; padding:0!important; border:0!important; border-radius:2px!important; background:none!important; box-shadow:none!important; transform:none!important; accent-color:#347fe6!important; } #authScreen #loginOptionRow #forgotPasswordLink{ position:static!important; display:inline-block!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; color:#69aaff!important; box-shadow:none!important; font-size:8px!important; line-height:13px!important; font-weight:700!important; white-space:nowrap!important; text-align:right!important; } #authScreen #loginOptionRow #forgotPasswordLink:hover{ color:#a0ccff!important; text-decoration:underline!important; } #authScreen .remember-note{ width:100%!important; margin:0 0 10px!important; padding:0!important; color:#526f84!important; font-size:7.5px!important; line-height:1.4!important; text-align:left!important; } #authScreen #authError{ min-height:14px!important; margin:0!important; color:#ff7c77!important; font-size:9px!important; } #authScreen #authForm>button[type="submit"]{ width:100%!important; height:40px!important; margin:3px 0 0!important; padding:0!important; border:1px solid #347fe8!important; border-radius:6px!important; background:linear-gradient(135deg,#2763d8,#2e82ef)!important; color:#fff!important; font-size:10px!important; font-weight:800!important; box-shadow:0 6px 18px rgba(31,99,208,.20)!important; } /* THEME BUTTON: OUTSIDE AUTH SCREEN */ body>#v78LoginTheme{ position:fixed!important; top:18px!important; right:20px!important; z-index:100500!important; display:grid!important; place-items:center!important; visibility:visible!important; opacity:1!important; width:34px!important; min-width:34px!important; height:34px!important; margin:0!important; padding:0!important; border:1px solid #315168!important; border-radius:8px!important; background:#0b2333!important; color:#c4d4df!important; box-shadow:0 4px 13px rgba(0,0,0,.20)!important; font-size:15px!important; cursor:pointer!important; } /* LIGHT */ html.v78-login-light #authScreen.v78-auth-screen, body.v78-login-light #authScreen.v78-auth-screen{ background:linear-gradient(145deg,#edf3f7,#fbfcfd 55%,#edf2f5)!important; } html.v78-login-light #authScreen .v78-auth-card, body.v78-login-light #authScreen .v78-auth-card{ border-color:#ccd9e2!important; background:#fff!important; box-shadow:0 24px 60px rgba(34,61,82,.14)!important; } html.v78-login-light #authScreen .v78-login-logo-dark, body.v78-login-light #authScreen .v78-login-logo-dark{ display:none!important; } html.v78-login-light #authScreen .v78-login-logo-light, body.v78-login-light #authScreen .v78-login-logo-light{ display:block!important; } html.v78-login-light #authScreen #authForm h2, body.v78-login-light #authScreen #authForm h2{ color:#173047!important; } html.v78-login-light #authScreen #authForm>label, body.v78-login-light #authScreen #authForm>label{ color:#526d80!important; } html.v78-login-light #authScreen #authForm input:not([type="checkbox"]), body.v78-login-light #authScreen #authForm input:not([type="checkbox"]){ border-color:#c4d2dc!important; background:#fff!important; color:#173047!important; } html.v78-login-light #authScreen .v78-login-brand, body.v78-login-light #authScreen .v78-login-brand{ border-bottom-color:#dce5eb!important; } html.v78-login-light #authScreen #loginOptionRow .remember-login, body.v78-login-light #authScreen #loginOptionRow .remember-login{ color:#546f82!important; } html.v78-login-light #authScreen #loginOptionRow #forgotPasswordLink, body.v78-login-light #authScreen #loginOptionRow #forgotPasswordLink{ color:#256fc8!important; } html.v78-login-light #authScreen .remember-note, body.v78-login-light #authScreen .remember-note{ color:#7b8e9d!important; } html.v78-login-light body>#v78LoginTheme, body.v78-login-light>#v78LoginTheme{ border-color:#c7d4dd!important; background:#fff!important; color:#4c687c!important; } /* RESET MODAL: đừng làm ảnh hưởng */ #forgotModal.auth-screen{ z-index:100600!important; } /* MOBILE */ @media(max-width:520px){ #authScreen .v78-auth-card{ padding:23px 19px!important; } #authScreen #loginOptionRow .remember-login, #authScreen #loginOptionRow #forgotPasswordLink{ font-size:7.5px!important; } body>#v78LoginTheme{ top:10px!important; right:10px!important; } } /* ========================================================== V156 FINAL LOGIN POSITION / OPTIONS / THEME ========================================================== */ /* * LOGIN SCREEN CHỈ CÒN 1 CHILD LAYOUT: CARD. * Flex giúp card luôn chính giữa màn hình. */ #authScreen.v78-auth-screen{ display:flex !important; align-items:center !important; justify-content:center !important; position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100vw !important; height:100vh !important; margin:0 !important; padding:20px !important; } /* CARD CENTER */ #authScreen > .v78-auth-card{ position:relative !important; margin:0 !important; transform:none !important; align-self:auto !important; justify-self:auto !important; } /* THEME BUTTON KHÔNG BAO GIỜ THAM GIA LOGIN LAYOUT */ body > #v78LoginTheme.v78-login-theme{ position:fixed !important; top:18px !important; right:20px !important; left:auto !important; bottom:auto !important; z-index:200000 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:32px !important; min-width:32px !important; max-width:32px !important; height:32px !important; min-height:32px !important; max-height:32px !important; margin:0 !important; padding:0 !important; border:1px solid #315168 !important; border-radius:7px !important; background:#0a2333 !important; color:#bad0df !important; box-shadow:none !important; font-size:14px !important; line-height:1 !important; visibility:visible !important; opacity:1 !important; } /* OPTIONS ROW */ #authScreen #loginOptionRow{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; min-height:18px !important; margin:4px 0 3px !important; padding:0 !important; border:0 !important; background:transparent !important; } /* REMEMBER LEFT */ #authScreen #loginOptionRow .remember-login{ display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; width:auto !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:0 !important; gap:5px !important; color:#829caf !important; font-size:7.5px !important; font-weight:500 !important; line-height:12px !important; white-space:nowrap !important; } #authScreen #loginOptionRow .remember-login #rememberLogin{ appearance:auto !important; -webkit-appearance:checkbox !important; position:static !important; display:inline-block !important; width:11px !important; min-width:11px !important; max-width:11px !important; height:11px !important; min-height:11px !important; max-height:11px !important; flex:0 0 11px !important; margin:0 !important; padding:0 !important; transform:none !important; border-radius:2px !important; box-shadow:none !important; accent-color:#347fe6 !important; } /* FORGOT RIGHT */ #authScreen #loginOptionRow #forgotPasswordLink{ position:static !important; display:inline-block !important; width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:#69aaff !important; box-shadow:none !important; font-size:7.5px !important; font-weight:600 !important; line-height:12px !important; text-align:right !important; white-space:nowrap !important; } /* PASSWORD MANAGER NOTE NHỎ */ #authScreen .remember-note{ margin:0 0 8px !important; color:#4f6b80 !important; font-size:7px !important; line-height:1.35 !important; text-align:left !important; } /* CARD NHỎ GỌN HƠN */ #authScreen .v78-auth-card{ width:min( 410px, calc(100vw - 40px) ) !important; padding: 25px 28px 24px !important; } /* FORM LOGO */ #authScreen .v78-login-logo{ width:235px !important; max-width:76% !important; } /* LIGHT THEME BUTTON */ html.v78-login-light body > #v78LoginTheme, body.v78-login-light > #v78LoginTheme{ border-color:#c7d4dd !important; background:#fff !important; color:#4a687d !important; } /* MOBILE */ @media(max-width:520px){ #authScreen.v78-auth-screen{ padding:14px !important; } #authScreen .v78-auth-card{ width:100% !important; max-width:390px !important; padding: 22px 19px 21px !important; } body > #v78LoginTheme.v78-login-theme{ top:10px !important; right:10px !important; } } /* V157 - nhỏ chữ Quên mật khẩu */ #authScreen #loginOptionRow #forgotPasswordLink{ font-size:7px !important; font-weight:600 !important; line-height:11px !important; } /* ========================================================== V158 - FORGOT PASSWORD MODAL ========================================================== */ #forgotModal.auth-screen{ position:fixed !important; inset:0 !important; z-index:300000 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:20px !important; background: radial-gradient(circle at 20% 10%, rgba(28,92,145,.20), transparent 33%), linear-gradient(145deg,#061522,#071e2d 55%,#061522) !important; } #forgotModal.auth-screen.hidden{ display:none !important; } #forgotModal .auth-card.reset-card{ position:relative !important; width:min(420px,calc(100vw - 40px)) !important; padding:28px 30px 26px !important; border:1px solid #25465d !important; border-radius:14px !important; background: linear-gradient(180deg,#0a2030,#071925) !important; box-shadow: 0 26px 70px rgba(0,0,0,.40) !important; color:#eaf2f7 !important; } /* LOGO */ #forgotModal .reset-card > img{ display:block !important; width:235px !important; max-width:76% !important; height:auto !important; margin:0 auto 12px !important; padding:0 !important; border:0 !important; background:transparent !important; } /* SUBTITLE */ #forgotModal .reset-card > p{ margin:0 0 22px !important; color:#8ea7b8 !important; font-size:9px !important; font-weight:700 !important; letter-spacing:2px !important; text-align:center !important; } /* TITLE */ #forgotModal h2{ margin:0 0 16px !important; color:#edf5fa !important; font-size:20px !important; font-weight:800 !important; text-align:left !important; } /* HELP BOX */ #forgotModal .reset-help{ margin:0 0 15px !important; padding:10px 12px !important; border:1px solid #214156 !important; border-radius:8px !important; background:#0b2737 !important; color:#9fb5c5 !important; font-size:10px !important; line-height:1.5 !important; } /* LABEL */ #forgotModal label{ display:block !important; margin:0 0 14px !important; color:#9fb3c2 !important; font-size:9px !important; font-weight:700 !important; text-align:left !important; } /* INPUT */ #forgotModal input{ display:block !important; width:100% !important; height:40px !important; margin-top:6px !important; padding:0 11px !important; border:1px solid #2c4c62 !important; border-radius:6px !important; background:#061722 !important; color:#edf4f8 !important; outline:none !important; font-size:11px !important; } #forgotModal input:focus{ border-color:#448be7 !important; box-shadow: 0 0 0 3px rgba(57,128,224,.13) !important; } /* ERROR */ #forgotModal .auth-message.error, #forgotModal #forgotError, #forgotModal #resetError{ min-height:14px !important; margin:0 0 5px !important; color:#ff7d78 !important; font-size:9px !important; } /* PRIMARY BUTTON */ #forgotModal button.primary{ width:100% !important; height:40px !important; margin:5px 0 8px !important; padding:0 !important; border:1px solid #347fe8 !important; border-radius:6px !important; background: linear-gradient(135deg,#2763d8,#2e82ef) !important; color:#fff !important; font-size:10px !important; font-weight:800 !important; box-shadow: 0 6px 18px rgba(31,99,208,.20) !important; } /* SECONDARY BUTTON */ #forgotModal .secondary-action{ width:100% !important; height:38px !important; margin:0 !important; padding:0 !important; border:1px solid #2b4b61 !important; border-radius:6px !important; background:#0a2637 !important; color:#b6cad8 !important; font-size:10px !important; font-weight:600 !important; box-shadow:none !important; } #forgotModal .secondary-action:hover{ background:#103248 !important; color:#fff !important; } /* CLOSE BUTTON */ #forgotModal .forgot-close{ position:absolute !important; top:12px !important; right:12px !important; width:30px !important; min-width:30px !important; height:30px !important; margin:0 !important; padding:0 !important; display:grid !important; place-items:center !important; border:1px solid #2d4c62 !important; border-radius:6px !important; background:#0a2637 !important; color:#d7e5ee !important; font-size:17px !important; box-shadow:none !important; } /* ========================================================== LIGHT MODE ========================================================== */ html.v78-login-light #forgotModal.auth-screen, body.v78-login-light #forgotModal.auth-screen{ background: linear-gradient( 145deg, #edf3f7, #fbfcfd 55%, #edf2f5 ) !important; } html.v78-login-light #forgotModal .auth-card.reset-card, body.v78-login-light #forgotModal .auth-card.reset-card{ border-color:#ccd9e2 !important; background:#fff !important; box-shadow: 0 24px 60px rgba(34,61,82,.14) !important; color:#173047 !important; } html.v78-login-light #forgotModal h2, body.v78-login-light #forgotModal h2{ color:#173047 !important; } html.v78-login-light #forgotModal .reset-card > p, body.v78-login-light #forgotModal .reset-card > p{ color:#667f91 !important; } html.v78-login-light #forgotModal .reset-help, body.v78-login-light #forgotModal .reset-help{ border-color:#d4e1e8 !important; background:#f3f7f9 !important; color:#506b7d !important; } html.v78-login-light #forgotModal label, body.v78-login-light #forgotModal label{ color:#526c7e !important; } html.v78-login-light #forgotModal input, body.v78-login-light #forgotModal input{ border-color:#c4d2dc !important; background:#fff !important; color:#173047 !important; } html.v78-login-light #forgotModal .secondary-action, body.v78-login-light #forgotModal .secondary-action{ border-color:#cad7df !important; background:#f3f7fa !important; color:#38566d !important; } html.v78-login-light #forgotModal .forgot-close, body.v78-login-light #forgotModal .forgot-close{ border-color:#c8d5de !important; background:#fff !important; color:#3b596f !important; } /* MOBILE */ @media(max-width:520px){ #forgotModal .auth-card.reset-card{ padding:24px 19px 21px !important; } } /* ========================================================== V159 - LOGIN BUTTON ABOVE / FORGOT BELOW ========================================================== */ /* Remember chỉ nhỏ gọn bên trái */ #authScreen #loginOptionRow.v159-remember-row{ display:flex !important; align-items:center !important; justify-content:flex-start !important; min-height:16px !important; margin:3px 0 2px !important; padding:0 !important; } #authScreen #loginOptionRow.v159-remember-row .remember-login{ font-size:7.5px !important; } /* Nút đăng nhập */ #authScreen #authForm > button[type="submit"]{ width:100% !important; height:40px !important; margin:5px 0 0 !important; font-size:10px !important; font-weight:800 !important; } /* Quên mật khẩu nằm dưới nút đăng nhập */ #authScreen #forgotPasswordLink{ position:static !important; display:block !important; width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:7px auto 0 !important; padding:2px 5px !important; border:0 !important; background:transparent !important; box-shadow:none !important; color:#66a8ff !important; font-size:7.5px !important; font-weight:600 !important; line-height:12px !important; text-align:center !important; cursor:pointer !important; } #authScreen #forgotPasswordLink:hover{ color:#9bc8ff !important; text-decoration:underline !important; } /* Light mode */ html.v78-login-light #authScreen #forgotPasswordLink, body.v78-login-light #authScreen #forgotPasswordLink{ color:#246dc5 !important; } /* Fix: active light-theme class on is "uns-light", not "v78-login-light" - mirror the dark/light logo swap so the black+orange wordmark shows on light bg. */ html.uns-light #authScreen .v78-login-logo-dark, body.uns-light #authScreen .v78-login-logo-dark{ display:none!important; } html.uns-light #authScreen .v78-login-logo-light, body.uns-light #authScreen .v78-login-logo-light{ display:block!important; }