/* Màn hình đăng nhập: nhận diện TT 4.0, cân đối hai nửa và tối ưu cho màn hình nhỏ. */
#login {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:clamp(18px, 3vw, 42px); overflow-y:auto; isolation:isolate;
  background:
    radial-gradient(900px 620px at -8% -10%, rgba(47,128,237,.2), transparent 66%),
    radial-gradient(760px 560px at 108% 108%, rgba(34,160,107,.16), transparent 64%),
    linear-gradient(135deg, #edf3fb 0%, #f7f9fc 50%, #edf7f5 100%);
}
#login::before, #login::after { content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(2px); pointer-events:none; }
#login::before { width:260px; height:260px; left:7%; bottom:-130px; border:1px solid rgba(47,128,237,.18); box-shadow:0 0 0 42px rgba(47,128,237,.035), 0 0 0 92px rgba(47,128,237,.025); }
#login::after { width:190px; height:190px; right:8%; top:-95px; border:1px solid rgba(232,72,61,.14); box-shadow:0 0 0 36px rgba(232,72,61,.025); }

.login-shell {
  position:relative; width:min(1260px, 100%); min-height:min(790px, calc(100vh - clamp(36px, 6vw, 84px)));
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(440px,.94fr); overflow:hidden;
  background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.92); border-radius:28px;
  box-shadow:0 30px 90px rgba(30,48,76,.18), 0 2px 8px rgba(30,48,76,.06);
}
.login-shell::after { content:""; position:absolute; left:calc(53% - 1px); top:9%; bottom:9%; width:1px; background:linear-gradient(transparent, rgba(214,222,233,.9), transparent); pointer-events:none; }

/* Nửa giới thiệu. */
.login-hero {
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:13px; min-width:0;
  padding:clamp(26px, 3vw, 42px); text-align:center; overflow:hidden;
  background:radial-gradient(540px 300px at 16% 7%, rgba(57,169,236,.13), transparent 72%), linear-gradient(155deg, #eaf6ff 0%, #f5faff 52%, #eef9f4 100%);
}
.login-hero::before { content:""; position:absolute; inset:auto -100px -150px auto; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(34,160,107,.11), transparent 68%); pointer-events:none; }
.login-hero img { position:relative; display:block; width:100%; aspect-ratio:16 / 8.55; object-fit:cover; border:1px solid rgba(255,255,255,.72); border-radius:21px; box-shadow:0 18px 42px rgba(21,80,130,.22), 0 2px 8px rgba(21,80,130,.08); }
.company { position:relative; margin-top:5px; color:var(--text); font-size:clamp(13px, 1.12vw, 15px); font-weight:750; line-height:1.45; letter-spacing:.055em; text-transform:uppercase; text-wrap:balance; }
.eyebrow { color:var(--primary-600); font-size:12px; font-weight:750; letter-spacing:.19em; text-transform:uppercase; }
.login-hero h2 { max-width:560px; margin:3px auto 0; color:var(--text); font:750 clamp(26px, 2.35vw, 35px)/1.18 var(--font); letter-spacing:-.035em; text-wrap:balance; }
.login-hero p { max-width:48ch; margin:3px auto 4px; color:var(--text-2); font-size:13.5px; line-height:1.6; }
.login-feats { position:relative; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:6px; text-align:left; }
.login-feat { display:flex; align-items:center; gap:12px; min-width:0; padding:12px 14px; border:1px solid rgba(219,226,236,.88); border-radius:14px; background:rgba(255,255,255,.82); box-shadow:0 8px 22px rgba(31,52,81,.065); backdrop-filter:blur(10px); }
.login-feat i { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px; color:var(--primary-600); background:linear-gradient(145deg, var(--primary-050), #fff); box-shadow:inset 0 0 0 1px rgba(232,72,61,.08); }
.login-feat i svg { width:20px; height:20px; }
.login-feat b { display:block; font-size:13.5px; font-weight:700; }
.login-feat span { display:block; margin-top:1px; color:var(--text-3); font-size:12px; line-height:1.35; }

/* Nửa đăng nhập. */
.login-form { position:relative; width:min(520px, 100%); align-self:center; justify-self:center; display:grid; align-content:center; gap:18px; min-width:0; padding:52px clamp(38px, 5vw, 70px); }
.login-brand { display:flex; align-items:center; gap:11px; width:max-content; margin-bottom:10px; }
.login-brand__mark { position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg, var(--primary), var(--primary-600)); box-shadow:0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent); }
.login-brand__mark::after { content:""; position:absolute; right:3px; bottom:3px; width:7px; height:7px; border:2px solid #fff; border-radius:50%; background:var(--success); }
.login-brand__mark svg { width:23px; height:23px; }
.login-brand > span:last-child { display:grid; line-height:1.2; }
.login-brand b { color:var(--text); font-size:15px; letter-spacing:.02em; }
.login-brand small { margin-top:3px; color:var(--text-3); font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.login-form h2 { margin-top:7px; color:var(--text); font-size:clamp(28px, 2.3vw, 35px); font-weight:750; line-height:1.15; letter-spacing:-.04em; }
.login-form .lead { margin-top:9px; color:var(--text-2); font-size:14px; }
.login-form .field { gap:7px; }
.login-form .field > span { color:var(--text); font-size:13.5px; font-weight:650; }
.in { position:relative; display:block; }
.in > svg { position:absolute; z-index:1; left:16px; top:50%; width:20px; height:20px; transform:translateY(-50%); color:#8996aa; pointer-events:none; }
.login-form .in input { min-height:54px; padding:0 48px; border:1px solid #dce3ed; border-radius:13px; background:#f7f9fc; box-shadow:0 2px 6px rgba(24,42,68,.035); font-size:14.5px; }
.login-form .in input:hover { border-color:#cbd4e1; background:#fff; }
.login-form .in input:focus { border-color:color-mix(in srgb, var(--primary) 72%, #fff); background:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 11%, transparent), 0 4px 12px rgba(24,42,68,.05); }
.login-form .in:focus-within > svg { color:var(--primary); }
.eye { position:absolute; z-index:2; right:8px; top:50%; width:38px; height:38px; display:grid; place-items:center; transform:translateY(-50%); border:0; border-radius:9px; background:none; color:var(--text-3); }
.eye:hover, .eye[aria-pressed="true"] { color:var(--text); background:var(--hover); }
.eye svg { width:20px; height:20px; }
.eye .slash { display:none; }
.eye[aria-pressed="true"] .slash { display:inline; }
.login-row { display:flex; flex-wrap:wrap; gap:9px 16px; justify-content:space-between; align-items:center; font-size:13.5px; }
.login-row label { display:flex; align-items:center; gap:8px; color:var(--text-2); cursor:pointer; }
.login-row input { width:17px; height:17px; accent-color:var(--primary); }
.linklike { border:0; background:none; padding:0; color:var(--primary-600); font-weight:600; }
.linklike:hover { text-decoration:underline; text-underline-offset:3px; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:10px; height:54px; border:0; border-radius:13px; color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-600)); box-shadow:0 12px 26px color-mix(in srgb, var(--primary) 28%, transparent); font-size:15.5px; font-weight:700; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.login-submit:hover { transform:translateY(-2px); filter:saturate(1.08); box-shadow:0 16px 30px color-mix(in srgb, var(--primary) 34%, transparent); }
.login-submit:active { transform:translateY(0); }
.login-submit:disabled { opacity:.6; cursor:default; transform:none; }
.login-submit svg { width:19px; height:19px; transition:transform .18s ease; }
.login-submit:hover svg { transform:translateX(3px); }
.login-note { display:flex; align-items:center; gap:10px; margin-top:4px; padding-top:17px; border-top:1px solid var(--border); color:var(--text-3); font-size:12.5px; line-height:1.45; }
.login-note i { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--success-050); color:var(--success); }
.login-note i svg { width:14px; height:14px; }
.login-err, .login-info { padding:10px 12px; border-radius:10px; font-size:13px; }
.login-err { color:var(--danger-600); background:var(--danger-050); }
.login-info { color:var(--text-2); background:var(--surface-2); }

@media (prefers-reduced-motion: no-preference) {
  .login-shell { animation:login-in .42s cubic-bezier(.2,.75,.25,1) both; }
  @keyframes login-in { from { opacity:0; transform:translateY(10px) scale(.99); } to { opacity:1; transform:none; } }
}

@media (max-width:900px) {
  #login { display:block; padding:18px; }
  .login-shell { width:min(720px, 100%); min-height:0; margin:auto; grid-template-columns:minmax(0,1fr); border-radius:22px; }
  .login-shell::after { display:none; }
  .login-hero { display:grid; grid-template-columns:minmax(210px,.8fr) minmax(0,1fr); grid-template-rows:auto auto auto 1fr; align-items:center; gap:8px 22px; padding:22px; text-align:left; border-bottom:1px solid var(--border); }
  .login-hero img { grid-row:1 / 5; height:100%; min-height:190px; aspect-ratio:auto; }
  .login-hero .company { margin:0; font-size:12px; }
  .login-hero .eyebrow { font-size:10.5px; }
  .login-hero h2 { margin:0; font-size:24px; }
  .login-hero p { margin:0; font-size:12.5px; }
  .login-feats { display:none; }
  .login-form { width:min(560px,100%); padding:38px 40px 42px; }
}

@media (max-width:640px) {
  #login { padding:0; background:#f5f7fb; }
  #login::before, #login::after { display:none; }
  .login-shell { width:100%; min-height:100vh; border:0; border-radius:0; box-shadow:none; }
  .login-hero { display:block; padding:12px 12px 0; border:0; background:#f5f7fb; }
  .login-hero img { width:100%; height:148px; min-height:0; border-radius:16px; object-position:center 42%; box-shadow:0 10px 24px rgba(21,80,130,.14); }
  .login-hero .company { position:absolute; left:24px; right:24px; bottom:12px; margin:0; padding:7px 10px; border-radius:9px; color:#fff; background:rgba(17,31,51,.72); backdrop-filter:blur(8px); font-size:10.5px; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.2); }
  .login-hero > .eyebrow, .login-hero > h2, .login-hero > p, .login-feats { display:none; }
  .login-form { width:100%; padding:28px 22px 34px; gap:16px; }
  .login-brand { margin-bottom:4px; }
  .login-brand__mark { width:40px; height:40px; border-radius:12px; }
  .login-form h2 { font-size:28px; }
  .login-form .lead { margin-top:7px; }
  .login-form .in input { min-height:52px; }
}

@media (max-width:380px) {
  .login-hero img { height:124px; }
  .login-form { padding-inline:18px; }
  .login-form h2 { font-size:25px; }
  .login-row { align-items:flex-start; flex-direction:column; }
}

/* Bản sắc trẻ trung: màu tươi, hình khối mềm và chuyển động nhỏ. */
#login {
  background:
    radial-gradient(circle at 14% 17%, rgba(68,190,255,.26) 0 7%, transparent 24%),
    radial-gradient(circle at 88% 84%, rgba(93,220,176,.23) 0 8%, transparent 27%),
    radial-gradient(circle at 88% 9%, rgba(255,111,97,.16) 0 5%, transparent 20%),
    linear-gradient(135deg, #edf7ff 0%, #f8f6ff 48%, #effbf6 100%);
}
#login::before {
  left:-70px; bottom:-115px; width:300px; height:300px;
  border:0; background:linear-gradient(145deg, rgba(66,181,255,.18), rgba(119,98,255,.08));
  box-shadow:none; transform:rotate(18deg); border-radius:42% 58% 64% 36% / 46% 38% 62% 54%;
}
#login::after {
  right:-55px; top:-95px; width:260px; height:260px;
  border:0; background:linear-gradient(145deg, rgba(255,101,91,.16), rgba(255,194,88,.1));
  box-shadow:none; transform:rotate(-22deg); border-radius:58% 42% 38% 62% / 40% 61% 39% 60%;
}
.login-shell {
  border-radius:34px;
  border-color:rgba(255,255,255,.96);
  box-shadow:0 34px 100px rgba(50,70,110,.18), 0 8px 28px rgba(90,105,140,.08);
}
.login-shell::after { display:none; }
.login-hero {
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.9) 0 2px, transparent 3px) 0 0 / 22px 22px,
    linear-gradient(145deg, #dff5ff 0%, #eef0ff 52%, #fff1eb 100%);
}
.login-hero::before {
  right:-120px; bottom:-175px; width:430px; height:430px;
  background:linear-gradient(145deg, rgba(255,123,98,.15), rgba(255,199,92,.06));
  border-radius:48% 52% 66% 34% / 38% 58% 42% 62%;
  transform:rotate(24deg);
}
.login-hero::after {
  content:""; position:absolute; left:-45px; top:42%; width:120px; height:120px;
  border:22px solid rgba(91,173,255,.09); border-radius:50%; pointer-events:none;
}
.login-hero img {
  z-index:1; border:5px solid rgba(255,255,255,.92); border-radius:28px;
  box-shadow:0 22px 48px rgba(45,116,168,.23), 0 7px 0 rgba(255,255,255,.5);
  transform:rotate(-.45deg);
}
.company {
  z-index:1; width:max-content; max-width:100%; margin:9px auto 0; padding:7px 15px;
  border:1px solid rgba(255,255,255,.95); border-radius:999px;
  background:rgba(255,255,255,.7); box-shadow:0 7px 20px rgba(60,82,120,.07);
  backdrop-filter:blur(10px);
}
.login-hero .eyebrow { z-index:1; width:max-content; margin-inline:auto; color:#f05247; }
.login-hero h2 { position:relative; z-index:1; font-size:clamp(28px, 2.55vw, 38px); }
.login-hero h2::after {
  content:""; position:absolute; left:25%; right:25%; bottom:-7px; height:7px;
  border-radius:50%; background:linear-gradient(90deg, transparent, rgba(255,111,91,.38), transparent);
  transform:rotate(-1deg);
}
.login-hero p { position:relative; z-index:1; }
.login-feats { z-index:1; gap:14px; }
.login-feat {
  border:1px solid rgba(255,255,255,.96); border-radius:18px;
  background:rgba(255,255,255,.8); box-shadow:0 12px 28px rgba(55,76,113,.09);
  transition:transform .18s ease, box-shadow .18s ease;
}
.login-feat:first-child { transform:rotate(-1deg); }
.login-feat:last-child { transform:rotate(1deg); }
.login-feat:hover { transform:translateY(-3px) rotate(0); box-shadow:0 17px 32px rgba(55,76,113,.13); }
.login-feat:first-child i { color:#2489ef; background:linear-gradient(145deg, #e5f4ff, #fff); box-shadow:inset 0 0 0 1px rgba(36,137,239,.1); }
.login-feat:last-child i { color:#f05247; background:linear-gradient(145deg, #ffebe8, #fff); }

.login-form {
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(255,126,102,.09), transparent 32%),
    radial-gradient(circle at 2% 100%, rgba(80,185,255,.08), transparent 30%),
    #fff;
}
.login-form::before {
  content:""; position:absolute; right:-42px; top:75px; width:92px; height:92px;
  border:16px solid rgba(255,111,91,.055); border-radius:50%; pointer-events:none;
}
.login-brand__mark {
  border-radius:15px; background:linear-gradient(145deg, #ff6b5f, #e64266);
  box-shadow:0 10px 24px rgba(230,66,102,.26); transform:rotate(-3deg);
}
.login-brand small { color:#8b86aa; }
.login-form .eyebrow {
  display:inline-flex; width:max-content; padding:5px 10px; border-radius:999px;
  color:#e84b54; background:#fff0ee; letter-spacing:.15em;
}
.login-form h2 { font-size:clamp(30px, 2.5vw, 38px); }
.login-form .in input {
  min-height:56px; border:1.5px solid #e2e4ef; border-radius:16px;
  background:#f8f8fc;
}
.login-form .in input:hover { border-color:#cfd2e3; background:#fff; }
.login-form .in input:focus {
  border-color:#ff6b61;
  box-shadow:0 0 0 4px rgba(255,107,97,.12), 0 8px 20px rgba(80,68,120,.06);
}
.login-form .in:focus-within > svg { color:#f05247; }
.login-row input { accent-color:#f05247; }
.linklike { color:#e64a50; }
.login-submit {
  height:56px; border-radius:16px;
  background:linear-gradient(115deg, #f0443d 0%, #ff6759 55%, #ff874c 100%);
  box-shadow:0 14px 30px rgba(244,73,65,.29);
}
.login-submit:hover { box-shadow:0 18px 34px rgba(244,73,65,.36); }
.login-note {
  margin-top:2px; padding:12px 14px; border:0; border-radius:13px;
  color:#728198; background:linear-gradient(90deg, #effbf6, #f7fbff);
}
.login-note i { background:#dff7ec; }

@media (prefers-reduced-motion: no-preference) {
  .login-hero::after { animation:login-float 5s ease-in-out infinite; }
  .login-brand__mark { animation:brand-bob 3.8s ease-in-out infinite; }
  @keyframes login-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
  @keyframes brand-bob { 0%,100% { transform:rotate(-3deg) translateY(0); } 50% { transform:rotate(1deg) translateY(-3px); } }
}

@media (max-width:900px) {
  .login-shell { border-radius:28px; }
  .login-hero .company { width:auto; margin:0; padding:5px 10px; }
  .login-hero .eyebrow { margin-inline:0; }
  .login-hero h2::after { left:0; right:45%; }
  .login-form { background:#fff; }
}

@media (max-width:640px) {
  #login { background:linear-gradient(180deg, #e7f7ff 0 225px, #fff 225px); }
  .login-shell { border-radius:0; }
  .login-hero { background:transparent; }
  .login-hero img { border-width:4px; border-radius:22px; transform:none; box-shadow:0 14px 30px rgba(45,116,168,.2); }
  .login-hero .company { width:auto; border:0; border-radius:12px; background:rgba(20,37,60,.76); box-shadow:none; }
  .login-form { border-radius:26px 26px 0 0; }
  .login-form::before { display:none; }
  .login-form .eyebrow { padding:4px 9px; }
  .login-form h2 { font-size:30px; }
  .login-note { padding:11px 12px; }
}

/* Khối giới thiệu: chữ gọn, có thứ bậc rõ và không tranh sự chú ý với ảnh đội xe. */
.login-copy {
  position:relative;
  z-index:1;
  width:min(100%, 570px);
  margin:8px auto 3px;
  text-align:center;
}
.login-copy .company {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:auto;
  margin:0 0 12px;
  padding:0;
  border:0;
  border-radius:0;
  color:#68758a;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.035em;
  text-transform:none;
}
.login-copy .company::before {
  content:"";
  width:30px;
  height:3px;
  flex:none;
  border-radius:999px;
  background:linear-gradient(90deg, #f05247 0 48%, #2687d8 48% 100%);
}
.login-copy .eyebrow {
  width:auto;
  margin:0 0 7px;
  color:#e84b54;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  text-transform:none;
}
.login-hero .login-slogan {
  display:grid;
  gap:0;
  width:auto;
  max-width:100%;
  margin:0;
  padding-bottom:0;
  font-size:clamp(31px, 2.8vw, 42px);
  font-weight:780;
  line-height:1.16;
  letter-spacing:-.05em;
}
.login-slogan::after { display:none; }
.login-slogan > span { display:block; }
.login-slogan > span:last-child { color:#223149; }
.login-hero .login-slogan + p {
  display:block;
  max-width:none;
  margin:15px auto 0;
  padding:0;
  border:0;
  border-radius:0;
  color:#637086;
  background:none;
  box-shadow:none;
  font-size:13.5px;
  line-height:1.65;
}
/* câu mô tả 2 dòng: dòng dưới là "Quản lý phạt nguội tập trung" */
.login-hero .login-slogan + p > span { display:block; }

@media (max-width:900px) {
  .login-copy { margin:0; }
  .login-copy .company { margin:0 0 7px; font-size:11px; }
  .login-copy .company::before { width:22px; }
  .login-copy .eyebrow { margin-bottom:4px; font-size:11.5px; }
  .login-hero .login-slogan { margin:0; padding:0; font-size:24px; line-height:1.18; }
  .login-hero .login-slogan + p { margin:9px auto 0; padding:0; font-size:12px; line-height:1.5; }
}

@media (max-width:640px) {
  .login-copy { position:static; margin:0; }
  .login-copy .company {
    position:absolute;
    left:24px;
    right:24px;
    bottom:12px;
    display:block;
    margin:0;
    padding:7px 10px;
    color:#fff;
    background:rgba(20,37,60,.76);
    font-size:10.5px;
    text-align:center;
  }
  .login-copy .company::before,
  .login-copy .eyebrow,
  .login-copy .login-slogan,
  .login-copy .login-slogan + p { display:none; }
}

/* chọn ngôn ngữ ở góc trên bên phải khung đăng nhập */
.login-lang { position:absolute; top:18px; right:18px; display:flex; gap:2px; padding:3px; border-radius:9px; background:var(--muted-bg); }
.login-lang button { padding:5px 10px; border:0; border-radius:7px; background:none; color:var(--text-2); font-size:12.5px; font-weight:500; }
.login-lang button[aria-pressed="true"] { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }