/* Đăng nhập / đăng ký: chia đôi toàn màn hình.
   Bên trái là mảng màu thương hiệu kèm minh họa sản phẩm; bên phải là form trên nền trang. */
.auth { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(480px,1fr); min-height: 100dvh; background: var(--bg); }

/* Mảng thương hiệu */
.auth-brand { --ink: #ffffff; --muted: #c9dcf2; position: relative; display: flex; flex-direction: column; gap: 40px; padding: 40px clamp(40px,4.5vw,88px); overflow: hidden; background: #0a3f78; color: var(--ink); }
:root[data-theme='dark'] .auth-brand { background: #0e2f55; }
/* Hai mảng sắc chéo lớn ở góc: tạo chiều sâu bằng màu phẳng, không dùng gradient. */
.auth-brand::before, .auth-brand::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.auth-brand::before { width: 620px; height: 620px; right: -260px; top: -240px; background: #0d5cab; opacity: .55; }
.auth-brand::after { width: 420px; height: 420px; left: -200px; bottom: -220px; background: #0a8bb3; opacity: .22; }
.auth-brand > * { position: relative; z-index: 1; }
.brand-on-dark { --brand-smart-top: #ffffff; --brand-smart-bottom: #e4eefb; --brand-ocr-top: #9fd0ff; --brand-ocr-bottom: #6aa7ff; }
.brand-on-dark .brand-symbol-light { display: none; }
.brand-on-dark .brand-symbol-dark { display: block; }
.auth-brand .brand-symbol { width: 40px; height: 40px; }
.auth-brand .brand-wordmark { font-size: 23px; }
.auth-brand-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 680px; }
.auth-brand h2 { font-size: clamp(30px,2.4vw,42px); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
.auth-brand-body > p { margin-top: 14px; max-width: 480px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* Minh họa: trang văn bản nghiêng như bản scan, kết quả bóc tách nổi chồng ở góc.
   Vùng được đánh dấu trên trang và trường kết quả dùng chung một màu để người xem nối được hai bên. */
.auth-visual { --c-cyan: #0a8bb3; --c-violet: #7b4fd6; --c-teal: #0f8a7e; position: relative; height: 360px; max-width: 600px; margin: 36px 0 0; }
.auth-doc { position: absolute; left: 0; top: 0; width: 330px; height: 350px; padding: 18px 20px; overflow: hidden; border-radius: 4px; background: #fdfdfb; color: #2a2f38; font: 7px/1.5 'Times New Roman', Georgia, serif; transform: rotate(-3deg); box-shadow: 0 24px 50px #021a3566, 0 2px 6px #021a3533; }
.doc-head { display: flex; justify-content: space-between; gap: 10px; text-align: center; }
.doc-head span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.doc-head b { font-size: 6.5px; }
.doc-head em { font-size: 6.5px; text-decoration: underline; }
.auth-doc mark { margin-top: 4px; padding: 1px 4px; border-radius: 2px; color: inherit; font-size: 7px; }
.hl-cyan { background: color-mix(in srgb, var(--c-cyan) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-cyan) 70%, transparent); }
.hl-violet { background: color-mix(in srgb, var(--c-violet) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-violet) 65%, transparent); font-style: italic; }
.hl-teal { background: color-mix(in srgb, var(--c-teal) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-teal) 65%, transparent); }
.doc-title { display: block; margin-top: 18px; text-align: center; font-size: 11px; letter-spacing: .04em; }
.doc-subject { display: table; margin: 4px auto 12px; font-weight: 700; }
.doc-lines { display: grid; gap: 5px; margin: 6px 0 8px; }
.doc-lines i { display: block; height: 3px; border-radius: 1px; background: #d9dde3; }
.doc-lines i:last-child { width: 62%; }
.doc-article { display: block; font-size: 7px; }
.doc-sign { position: absolute; right: 26px; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 7px; }
.doc-sign i { width: 64px; height: 18px; border-bottom: 1.5px solid #3b5ea8; border-radius: 0 0 50% 50%; transform: rotate(-6deg); }
/* Vạch quét: một chuyển động duy nhất của cảnh, chậm và lặp lại */
.doc-scan { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-cyan) 22%, transparent)); border-bottom: 1.5px solid var(--c-cyan); animation: doc-scan 4.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes doc-scan { 0% { transform: translateY(-40px); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 92%, 100% { transform: translateY(360px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .doc-scan { display: none; } }
.auth-result { position: absolute; right: 0; bottom: 0; width: 330px; border-radius: 10px; background: #ffffff; color: #16202e; box-shadow: 0 24px 50px #021a3566, 0 2px 6px #021a3533; overflow: hidden; }
.auth-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e2e6ec; font-size: 13px; font-weight: 600; }
.auth-result-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.auth-result-head .icon { width: 16px; height: 16px; color: var(--c-violet); }
.auth-done { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; background: #e9f6ef; color: #1d6f4c; font-size: 12px; font-weight: 500; }
.auth-done .icon { width: 12px; height: 12px; color: currentColor; }
.auth-result dl { margin: 0; padding: 4px 16px 8px; }
.auth-result dl > div { padding: 9px 0; border-bottom: 1px solid #eef1f5; }
.auth-result dl > div:last-child { border-bottom: 0; }
.auth-result .hue-cyan { --c: var(--c-cyan); } .auth-result .hue-violet { --c: var(--c-violet); } .auth-result .hue-teal { --c: var(--c-teal); }
.auth-result dt { display: flex; align-items: center; gap: 8px; color: #56647a; font-size: 12px; }
.auth-result dt i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.auth-result dd { margin: 2px 0 0 16px; font-size: 14px; font-weight: 600; }

/* Ba năng lực, mỗi năng lực mang màu nhận diện của khu chức năng trong workspace */
.auth-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 36px 0 0; padding: 0; list-style: none; }
.auth-features li { display: flex; flex-direction: column; gap: 10px; }
.auth-features .hue-cyan { --hue: #7ccbe2; } .auth-features .hue-violet { --hue: #bba8ef; } .auth-features .hue-teal { --hue: #7fd1c4; }
.auth-feature-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--hue); background: color-mix(in srgb, var(--hue) 14%, transparent); }
.auth-feature-icon .icon { width: 19px; height: 19px; }
.auth-features strong { display: block; font-size: 14px; font-weight: 600; }
.auth-features span:not(.auth-feature-icon) { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-brand-foot { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.auth-brand-foot .icon { width: 15px; height: 15px; }

/* Cột form */
.auth-main { display: flex; flex-direction: column; padding: 28px clamp(32px,4vw,72px); }
.auth-top { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.auth-home { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.auth-home:hover { color: var(--link); }
.auth-home .icon { width: 16px; height: 16px; }
.auth-form { width: 100%; max-width: 420px; margin: auto; padding: 32px 0; }
.auth-partner { display: block; width: 128px; height: auto; aspect-ratio: 1442.48 / 254.69; margin-bottom: 32px; color: #006bb0; }
:root[data-theme='dark'] .auth-partner { color: #69b3f2; }
.auth-form h1 { font-size: 30px; letter-spacing: -.02em; line-height: 1.2; }
.auth-lead { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.auth-form form { margin-top: 28px; }
.auth-form .field { margin: 0 0 18px; }
.auth-form .field label { font-size: 14px; margin-bottom: 8px; }
.auth-form .input { min-height: 44px; padding: 10px 13px; border-radius: 6px; font-size: 15px; box-shadow: none; }
.auth-password { position: relative; }
.auth-password .input { padding-right: 48px; }
.auth-password-toggle { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
.auth-password-toggle:hover { color: var(--ink); background: var(--hover); }
.auth-password-toggle .icon { width: 18px; height: 18px; }
.auth-captcha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.auth-captcha img { display: block; width: 120px; height: 40px; border: 1px solid var(--line); border-radius: 6px; background: #f2f2f2; object-fit: cover; }
.auth-captcha .input { text-transform: uppercase; }
@media (max-width: 420px) { .auth-captcha { grid-template-columns: 1fr auto; } .auth-captcha .input { grid-column: 1 / -1; } }
.auth-submit, .auth-demo { min-height: 46px; border-radius: 6px; font-size: 15px; font-weight: 500; box-shadow: none; }
.auth-submit { margin-top: 6px; }
.auth-demo { gap: 8px; }
.auth-demo .icon { width: 17px; height: 17px; color: var(--hue-cyan); }
.auth-note { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.auth-switch { margin-top: 20px; color: var(--muted); font-size: 14px; text-align: center; }
.auth-switch a { font-weight: 600; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0 16px; color: var(--muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.auth-copy { color: var(--faint); font-size: 12px; text-align: center; }
.auth .formhint { font-size: 13px; }

@media (max-width: 1100px) {
  .auth { grid-template-columns: minmax(0,1fr) minmax(440px,1fr); }
  .auth-features { grid-template-columns: 1fr; gap: 14px; }
  .auth-features li { flex-direction: row; align-items: center; gap: 12px; }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-main { padding: 20px; }
}
/* Màn thấp (laptop 15.6" scale 125%, ~864px): thu cảnh minh họa để chân panel không bị cắt. */
@media (max-height: 920px) and (min-width: 861px) {
  .auth-brand { gap: 24px; padding-block: 28px; }
  .auth-brand h2 { font-size: clamp(28px,2.2vw,36px); }
  .auth-brand-body > p { margin-top: 10px; font-size: 15px; }
  .auth-visual { height: 290px; margin-top: 24px; }
  .auth-doc { width: 290px; height: 290px; padding: 14px 16px; }
  .auth-result { width: 310px; }
  .auth-result dl > div { padding: 7px 0; }
  .auth-features { margin-top: 24px; }
}