.login-page{
  min-height:100vh;
  min-height:100svh;
  max-width:100%;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 78% 18%,rgba(252,251,247,.14),transparent 28%),
    linear-gradient(145deg,var(--indigo),var(--forest));
  color:var(--surface)
}
.purchase-flow [data-login-view="journey"]{display:none!important}.purchase-flow [data-close-account]{display:none!important}

.login-shell{
  width:min(calc(100% - 32px),1050px);
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:28px;
  margin:auto;
  padding:28px 0
}

.login-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--surface);
  font-weight:600
}

.login-brand small{
  display:block;
  color:rgba(252,251,247,.6);
  font:400 .56rem var(--mono);
  letter-spacing:.08em
}

.login-panel{
  display:grid;
  grid-template-columns:1fr 420px;
  align-items:stretch;
  gap:70px
}

.login-copy{
  max-width:520px;
  display:flex;
  flex-direction:column
}

.login-copy .eyebrow{
  color:rgba(252,251,247,.58)
}

.login-copy h1{
  margin:13px 0 20px;
  font-size:clamp(3rem,7vw,6rem);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:.94
}

.login-copy>p:last-of-type{
  color:rgba(252,251,247,.72);
  font:400 1.05rem/1.7 var(--story)
}

.login-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:25px
}

.login-benefits span{
  padding:7px 10px;
  border:1px solid rgba(252,251,247,.22);
  border-radius:999px;
  color:rgba(252,251,247,.75);
  font-size:.68rem
}

.login-box{
  position:relative;
  overflow:hidden;
  min-height:640px;
  padding:26px;
  border:1px solid rgba(252,251,247,.25);
  border-radius:16px;
  background:var(--surface);
  color:var(--charcoal);
  box-shadow:0 24px 70px rgba(0,0,0,.2)
}

.login-slider{
  position:relative;
  min-height:560px
}

.login-view{
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(36px);
  transition:
    transform .32s cubic-bezier(.22,.61,.36,1),
    opacity .22s ease,
    visibility .22s ease
}

.login-view.is-active{
  position:relative;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0)
}

.login-view.is-leaving{
  transform:translateX(-36px);
  opacity:0
}

.login-view[hidden]{
  display:block
}

.login-view__header{
  margin-bottom:20px
}

.login-view__header .eyebrow{
  margin:0 0 6px;
  color:var(--stone);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase
}

.login-view__header h2{
  margin:0 0 8px;
  color:var(--forest);
  font-size:1.6rem;
  font-weight:500;
  letter-spacing:-.025em
}

.login-view__header p:last-child{
  margin:0;
  color:var(--stone);
  font-size:.75rem;
  line-height:1.6
}

.login-back{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  margin:0 0 16px;
  padding:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:transparent;
  color:var(--forest);
  font-size:1.1rem;
  cursor:pointer
}

.login-back:hover{
  background:rgba(25,57,44,.06)
}

.login-qr{
  position:relative;
  overflow:hidden;
  height:180px;
  display:grid;
  place-content:center;
  gap:7px;
  margin-bottom:15px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:
    linear-gradient(
      45deg,
      rgba(38,62,92,.04) 25%,
      transparent 25% 75%,
      rgba(38,62,92,.04) 75%
    ) 0 0/28px 28px;
  text-align:center
}

.login-qr video{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#101b17
}

.login-qr video:not([hidden])~.qr-corners{
  z-index:2;
  display:grid;
  place-items:center;
  width:116px;
  height:116px;
  margin:auto;
  border:3px solid rgba(255,255,255,.9);
  border-radius:16px;
  color:transparent;
  box-shadow:0 0 0 999px rgba(0,0,0,.18)
}

.login-qr video:not([hidden])~strong,
.login-qr video:not([hidden])~small{
  position:relative;
  z-index:2;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.8)
}

.login-qr .qr-corners{
  font-size:3.2rem;
  color:var(--forest)
}

.login-qr strong{
  color:var(--forest);
  font-size:.85rem
}

.login-qr small{
  color:var(--stone);
  font-size:.65rem
}

.login-view--journey [data-login="scan"] + [data-login="image"]{
  margin-top:12px
}

.login-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0;
  color:var(--stone);
  font-size:.65rem
}

.login-divider:before,
.login-divider:after{
  content:"";
  height:1px;
  flex:1;
  background:var(--border)
}

.login-box form{
  display:grid;
  gap:10px
}

.login-box input{
  min-width:0;
  max-width:100%;
  font-size:16px;
  line-height:1.35;
  letter-spacing:.08em;
  text-transform:uppercase
}

.account-form input{
  letter-spacing:0;
  text-transform:none
}

.account-entry{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--border);
  text-align:center
}

.account-entry--desktop{
  width:100%;
  margin-block:auto;
  align-self:center;
  border-top-color:rgba(252,251,247,.22);
  text-align:left
}

.login-copy .account-entry--desktop p{
  color:rgba(252,251,247,.65)
}

.account-entry--desktop .btn{
  min-height:52px;
  border-color:rgba(252,251,247,.45);
  color:var(--surface)
}

.account-entry--desktop .btn:hover{
  background:var(--surface);
  color:var(--forest)
}

.account-entry--mobile{
  display:none
}

.account-entry p{
  margin:0 0 12px;
  color:var(--stone);
  font-size:.72rem
}

.account-entry__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.account-entry__actions .btn{
  width:100%
}

.account-switch{
  margin-top:18px
}

.text-action{
  width:100%;
  margin-top:15px;
  border:0;
  background:transparent;
  color:var(--indigo);
  font-size:.72rem;
  text-decoration:underline;
  cursor:pointer
}

.login-status{
  min-height:22px;
  margin:13px 0 0;
  color:var(--success);
  font-size:.72rem;
  text-align:center
}

.login-note{
  margin:0;
  color:rgba(252,251,247,.45);
  font-size:.62rem;
  text-align:center
}

@media(max-width:850px){
  .login-panel{
    grid-template-columns:1fr;
    align-items:start;
    gap:34px
  }

  .login-copy{
    max-width:700px;
    display:block
  }

  .login-copy h1{
    font-size:clamp(3rem,13vw,5rem)
  }

  .login-box{
    width:min(100%,480px);
    min-height:0;
    margin:auto;
    scroll-margin-top:12px
  }

  .login-slider{
    min-height:0
  }

  .login-view.is-active{
    min-height:0
  }

  .account-entry--desktop{
    display:none
  }

  .account-entry--mobile{
    display:block
  }
}

@media(max-width:520px){
  .login-shell{
    width:100%;
    padding:20px 14px
  }

  .login-copy h1{
    font-size:3rem
  }

  .login-benefits{
    display:grid
  }

  .login-box{
    min-height:0;
    padding:18px
  }

  .login-slider{
    min-height:0
  }

  .login-qr{
    height:170px;
    min-height:0
  }

  .account-entry__actions{
    grid-template-columns:1fr 1fr
  }
}

/* =========================================================
   CJE Discovery Login
   Mobile slide / interaction fix
   ========================================================= */

.login-slider {
    position: relative;
    overflow: hidden;
}

/* View mặc định */
.login-view {
    position: absolute;
    inset: 0;
    width: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(32px);

    transition:
        transform .32s ease,
        opacity .24s ease,
        visibility 0s linear .32s;
}

/* View đang hiển thị */
.login-view.is-active {
    position: relative;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);

    transition:
        transform .32s ease,
        opacity .24s ease;
}

/* View đang rời */
.login-view.is-leaving {
    position: absolute;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-32px);
}

/* hidden luôn thắng mọi trạng thái */
.login-view[hidden] {
    display: none !important;
}

/* Bảo đảm controls nhận touch */
.login-view button,
.login-view a,
.login-view input,
.login-view select,
.login-view textarea,
.account-entry,
.account-entry__actions {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* Touch behavior */
.login-view button,
.login-view a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {

    .login-slider {
        width: 100%;
        overflow: hidden;
    }

    .login-view {
        width: 100%;
    }

    .account-entry__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .account-entry__actions .btn {
        width: 100%;
        min-height: 48px;
    }

    .login-back {
        min-height: 44px;
        cursor: pointer;
        touch-action: manipulation;
    }
}