/* TOAN TIN sign-in experience. Scoped to the unauthenticated app shell. */
.login-page {
  --login-ink: #142a45;
  --login-muted: #718096;
  --login-blue: #2164df;
  --login-teal: #49d6c1;
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 78% 12%, rgba(82, 135, 228, .11), transparent 28rem),
    radial-gradient(ellipse at 18% 88%, rgba(79, 209, 197, .08), transparent 26rem),
    #f3f6fb;
}

.login-main { min-height: 100svh; width: 100%; }

.tt-login-layout {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
  align-items: stretch;
  gap: clamp(22px, 3.2vw, 54px);
  width: min(1480px, 100%);
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(20px, 2.5vw, 38px);
  color: var(--login-ink);
}

.tt-login-story {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: min(830px, calc(100svh - 40px));
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(30px, 4.3vw, 66px);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(ellipse at 86% 13%, rgba(74, 135, 238, .45), transparent 33%),
    radial-gradient(ellipse at 8% 96%, rgba(39, 204, 184, .3), transparent 37%),
    linear-gradient(145deg, #0b1c36 0%, #102f5b 55%, #075462 100%);
  box-shadow: 0 28px 80px rgba(19, 49, 86, .2), inset 0 1px 0 rgba(255,255,255,.13);
}

.tt-login-story::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(216,237,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,237,255,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  mask-image: linear-gradient(145deg, #000 5%, transparent 76%);
}

.tt-login-story::after {
  position: absolute;
  z-index: -1;
  right: -170px;
  bottom: -280px;
  width: min(62vw, 650px);
  aspect-ratio: 1;
  border: 1px solid rgba(181,231,255,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(181,231,255,.035), 0 0 0 92px rgba(181,231,255,.025), 0 0 0 150px rgba(181,231,255,.018);
  content: "";
}

.tt-login-brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.tt-login-brand:focus-visible,
.tt-login-home:focus-visible,
.tt-login-register a:focus-visible {
  outline: 3px solid #69c9ff;
  outline-offset: 4px;
  border-radius: 5px;
}

.tt-login-brand__mark {
  position: relative;
  display: grid;
  width: 62px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #eaf5ff);
  box-shadow: 0 10px 26px rgba(2, 12, 31, .25);
}

.tt-login-brand__sum { color: #2164df; font-size: 1.7rem; font-weight: 850; line-height: 1; }
.tt-login-brand__code { position: absolute; right: 4px; bottom: 3px; display: grid; min-width: 23px; height: 17px; place-items: center; border: 2px solid #fff; border-radius: 999px; background: #d9f7f1; color: #087f76; font: 800 .53rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tt-login-brand__copy { display: grid; gap: 3px; }
.tt-login-brand__copy strong { font-size: 1.2rem; font-weight: 850; letter-spacing: .075em; line-height: 1.1; }
.tt-login-brand__copy small { color: rgba(239,247,255,.72); font-size: .78rem; font-weight: 550; letter-spacing: .025em; }

.tt-login-story__content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 620px;
  margin-block: auto;
  padding-block: clamp(70px, 9vh, 112px) 260px;
}

.tt-login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: #d1ecff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.tt-login-kicker i { color: #72e5d2; font-size: 1.02rem; }
.tt-login-story__content h2 { max-width: 100%; margin: 0; color: #fff; font-size: clamp(2.35rem, 4.25vw, 4.25rem); font-weight: 780; letter-spacing: -.06em; line-height: 1.055; overflow-wrap: anywhere; }
.tt-login-story__content h2 span { color: #83e1d4; }
.tt-login-story__content p { width: 100%; max-width: 510px; min-width: 0; margin: 23px 0 0; color: rgba(238,247,255,.76); font-size: clamp(1rem, 1.28vw, 1.13rem); line-height: 1.75; white-space: normal; overflow-wrap: anywhere; }

.tt-login-pill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.tt-login-pill-row span { display: inline-flex; min-height: 37px; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(203,237,255,.2); border-radius: 999px; background: rgba(255,255,255,.075); color: rgba(246,251,255,.94); font-size: .81rem; font-weight: 650; backdrop-filter: blur(10px); }
.tt-login-pill-row i { color: #81e2d3; }

.tt-login-art { position: absolute; right: 8%; bottom: 82px; width: 318px; height: 226px; }
.tt-login-art__orbit { position: absolute; inset: 13px 38px; border: 1px solid rgba(173,225,255,.35); border-radius: 50%; transform: rotate(-24deg); }
.tt-login-art__orbit--two { inset: -2px 68px; border-color: rgba(131,225,212,.38); transform: rotate(38deg); }
.tt-login-art__core { position: absolute; top: 50%; left: 50%; display: grid; width: 104px; height: 104px; place-content: center; justify-items: center; gap: 5px; border: 1px solid rgba(208,245,255,.48); border-radius: 30px; background: linear-gradient(145deg,rgba(225,249,255,.22),rgba(255,255,255,.07)); box-shadow: 0 20px 48px rgba(3,18,40,.34); backdrop-filter: blur(12px); transform: translate(-50%,-50%) rotate(-8deg); }
.tt-login-art__core i { color: #9af0e1; font-size: 1.7rem; }
.tt-login-art__core span { color: #fff; font-size: .58rem; font-weight: 850; letter-spacing: .14em; line-height: 1.12; text-align: center; }
.tt-login-art__formula { position: absolute; z-index: 2; display: flex; min-height: 42px; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid rgba(218,240,255,.26); border-radius: 13px; background: rgba(8,27,52,.78); box-shadow: 0 11px 26px rgba(4,18,39,.23); color: #e5f4ff; font-size: .92rem; font-weight: 750; backdrop-filter: blur(10px); }
.tt-login-art__formula span { color: #8ce5d7; }
.tt-login-art__formula--one { top: 7px; left: 6px; }
.tt-login-art__formula--two { top: 72px; right: -4px; }
.tt-login-art__formula--three { bottom: 0; left: 34px; }
.tt-login-art__dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #9be6dc; box-shadow: 0 0 0 6px rgba(155,230,220,.13), 0 0 20px rgba(104,235,214,.65); }
.tt-login-art__dot--one { top: 35px; right: 64px; }
.tt-login-art__dot--two { right: 17px; bottom: 35px; width: 5px; height: 5px; background: #a8ceff; }

.tt-login-story__footer { position: relative; z-index: 2; display: flex; justify-content: space-between; color: rgba(239,247,255,.56); font-size: .77rem; letter-spacing: .025em; }

.tt-login-panel { display: grid; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; place-items: center; padding: clamp(12px, 2.8vw, 44px); }
.tt-login-card { position: relative; width: 100%; max-width: 480px; min-width: 0; box-sizing: border-box; overflow: hidden; padding: clamp(32px, 3.6vw, 48px); border: 1px solid rgba(214,224,237,.92); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 28px 82px rgba(24,52,88,.11), 0 4px 14px rgba(24,52,88,.04); }
.tt-login-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, #2164df 0%, #467fe8 48%, #45cbb8 100%); content: ""; }
.tt-login-mobile-brand { display: none; }
.tt-login-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #667891; font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
.tt-login-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: #20b487; box-shadow: 0 0 0 4px #e0f8ef; }
.tt-login-card h1 { margin: 0; color: #152d4c; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 780; letter-spacing: -.05em; line-height: 1.15; }
.tt-login-intro { margin: 12px 0 31px; color: #718096; font-size: .98rem; line-height: 1.65; }

.tt-login-alert { display: flex; align-items: flex-start; margin: -8px 0 22px; padding: 13px 15px; border-radius: 14px; font-size: .9rem; line-height: 1.55; }
.tt-login-alert > i { margin-top: 2px; }
.tt-login-form { display: grid; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; gap: 20px; }
.tt-login-field { display: grid; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; gap: 9px; }
.tt-login-field label { color: #2d425e; font-size: .86rem; font-weight: 730; }
.tt-login-input { display: flex; width: 100%; min-width: 0; min-height: 57px; box-sizing: border-box; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid #d8e1ed; border-radius: 15px; background: #fff; box-shadow: 0 2px 6px rgba(20,47,81,.025); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.tt-login-input > i { flex: 0 0 auto; color: #8192a7; font-size: 1.08rem; }
.tt-login-input input { width: 0; min-width: 0; height: 55px; flex: 1 1 0%; padding: 0; border: 0; outline: 0; background: transparent; color: #142d4e; font: inherit; font-size: .95rem; }
.tt-login-input .password-toggle-wrap { position: relative; width: 0; min-width: 0; flex: 1 1 0%; }
.tt-login-input .password-toggle-wrap input { display: block; width: 100%; height: 55px; padding: 0 3rem 0 0; }
.tt-login-input .password-toggle-btn { color: #657b98; }
.tt-login-input .password-toggle-btn:hover { background: #edf4ff; color: #155fca; }
.tt-login-input .password-toggle-btn:focus-visible { outline: 2px solid #397fe0; outline-offset: 1px; }
.tt-login-input input::placeholder { color: #9aa8b8; opacity: 1; }
.tt-login-input input:-webkit-autofill,
.tt-login-input input:-webkit-autofill:hover,
.tt-login-input input:-webkit-autofill:focus,
.tt-login-input .password-toggle-wrap input:-webkit-autofill,
.tt-login-input .password-toggle-wrap input:-webkit-autofill:hover,
.tt-login-input .password-toggle-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #142d4e;
  caret-color: #142d4e;
  transition: background-color 9999s ease-out 0s;
}
.tt-login-input:focus-within { border-color: #4b83e5; background: #fff; box-shadow: 0 0 0 4px rgba(48,117,218,.13); }
.tt-login-submit { display: flex; width: 100%; min-height: 57px; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; border: 0; border-radius: 15px; background: linear-gradient(105deg,#2164df 0%,#3157c8 64%,#306bbd 100%); box-shadow: 0 13px 26px rgba(40,91,184,.23); color: #fff; font: inherit; font-size: .97rem; font-weight: 760; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; cursor: pointer; }
.tt-login-submit i { font-size: 1.08rem; transition: transform .18s ease; }
.tt-login-submit:hover { box-shadow: 0 16px 30px rgba(40,91,184,.29); filter: brightness(1.04); transform: translateY(-1px); }
.tt-login-submit:hover i { transform: translateX(3px); }
.tt-login-submit:focus-visible { outline: 3px solid #72a9f5; outline-offset: 3px; }
.tt-login-register { margin-top: 24px; color: #738198; font-size: .89rem; text-align: center; }
.tt-login-register a { color: #1d5fca; font-weight: 760; text-decoration: none; }
.tt-login-register a:hover,.tt-login-home:hover { text-decoration: underline; }
.tt-login-home { display: flex; width: fit-content; align-items: center; gap: 7px; margin: 17px auto 0; color: #687a92; font-size: .85rem; font-weight: 650; text-decoration: none; }
.tt-login-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 34px; padding-top: 19px; border-top: 1px solid #e8edf3; color: #8290a2; font-size: .77rem; text-align: center; }
.tt-login-note i { color: #3477d0; font-size: .95rem; }

@media (max-width: 920px) {
  .tt-login-layout { display: block; padding: 0; }
  .tt-login-story { min-height: 0; padding: 18px clamp(22px, 6vw, 60px) 20px; border: 0; border-radius: 0 0 28px 28px; }
  .tt-login-brand__mark { width: 48px; height: 42px; border-radius: 13px; }
  .tt-login-story__content { max-width: 620px; margin: 15px 0 0; padding: 0; }
  .tt-login-kicker { margin-bottom: 9px; font-size: .67rem; }
  .tt-login-story__content h2 { font-size: clamp(1.85rem, 4.4vw, 2.7rem); line-height: 1.1; }
  .tt-login-story__content p { max-width: 520px; margin-top: 8px; font-size: .91rem; line-height: 1.48; }
  .tt-login-pill-row { gap: 7px; margin-top: 11px; }
  .tt-login-pill-row span { min-height: 31px; padding: 5px 10px; font-size: .75rem; }
  .tt-login-art { display: none; }
  .tt-login-story__footer { display: none; }
  .tt-login-panel { padding: 22px 24px 34px; }
  .tt-login-card { max-width: 490px; padding: clamp(27px, 4vw, 39px); }
  .tt-login-intro { margin: 9px 0 22px; }
  .tt-login-form { gap: 16px; }
  .tt-login-input,.tt-login-submit { min-height: 54px; }
  .tt-login-register { margin-top: 20px; }
  .tt-login-home { margin-top: 13px; }
  .tt-login-note { margin-top: 24px; padding-top: 15px; }
}

@media (max-width: 600px) {
  .tt-login-story { min-height: 0; padding: 16px 20px 18px; border-radius: 0 0 23px 23px; }
  .tt-login-story__content { margin-top: 15px; padding-bottom: 0; }
  .tt-login-kicker { margin-bottom: 8px; font-size: .61rem; }
  .tt-login-story__content h2 { font-size: clamp(1.52rem, 6.6vw, 1.95rem); line-height: 1.1; }
  .tt-login-story__content h2 span { display: block; }
  .tt-login-story__content p { max-width: 420px; margin-top: 7px; font-size: .84rem; line-height: 1.44; }
  .tt-login-pill-row { gap: 6px; margin-top: 9px; }
  .tt-login-pill-row span { min-height: 28px; gap: 5px; padding: 4px 8px; font-size: .68rem; }
  .tt-login-art { display: none; }
  .tt-login-panel { padding: 16px 14px 26px; }
  .tt-login-card { padding: 22px 19px 23px; border-radius: 22px; }
  .tt-login-card h1 { font-size: 1.82rem; }
  .tt-login-intro { margin-bottom: 18px; font-size: .88rem; }
  .tt-login-form { gap: 14px; }
  .tt-login-input,.tt-login-submit { min-height: 52px; border-radius: 13px; }
  .tt-login-input input { height: 50px; }
  .tt-login-register { margin-top: 18px; }
  .tt-login-note { margin-top: 20px; padding-top: 13px; font-size: .71rem; }
}

@media (min-width: 921px) and (max-height: 900px) {
  .tt-login-layout { padding: 16px 24px; }
  .tt-login-story { min-height: calc(100svh - 32px); padding: 24px 32px; }
  .tt-login-story__content { padding-block: 28px 0; }
  .tt-login-story__content h2 { font-size: clamp(2.4rem, 3.55vw, 3.45rem); }
  .tt-login-story__content p { margin-top: 14px; }
  .tt-login-pill-row { margin-top: 16px; }
  .tt-login-art { right: 7%; bottom: 45px; opacity: .7; transform: scale(.78); transform-origin: right bottom; }
  .tt-login-panel { padding: 12px 18px; }
  .tt-login-card { padding: 29px; }
  .tt-login-intro { margin-bottom: 21px; }
  .tt-login-form { gap: 15px; }
  .tt-login-field { gap: 7px; }
  .tt-login-input,.tt-login-submit { min-height: 52px; }
  .tt-login-input input { height: 50px; }
  .tt-login-register { margin-top: 18px; }
  .tt-login-home { margin-top: 12px; }
  .tt-login-note { margin-top: 22px; padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-login-input,.tt-login-submit,.tt-login-submit i { transition: none; }
}