:root {
       --bg: #f3f6ff;
       --card: #ffffff;
       --text: #0f172a;
       --muted: #64748b;
       --line: #e8eef7;

       --primary1: #4f46e5;
       --primary2: #7c3aed;

       --shadow: 0 12px 28px rgba(15, 23, 42, .08);
       --shadow2: 0 6px 18px rgba(15, 23, 42, .06);

       --radius: 18px;
       --radius2: 14px;
   }

   * {
       box-sizing: border-box
   }

   html,
   body {
       height: 100%
   }

   body {
       margin: 0;
       font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
       color: var(--text);
       background: radial-gradient(1200px 600px at 10% 10%, rgba(79, 70, 229, .18), transparent 60%),
           radial-gradient(900px 500px at 90% 20%, rgba(124, 58, 237, .16), transparent 60%),
           radial-gradient(900px 500px at 30% 90%, rgba(79, 70, 229, .12), transparent 60%),
           var(--bg);
   }

   /* topbar (nhẹ như ảnh) */
   .topbar {
       position: sticky;
       top: 0;
       z-index: 5;
       background: rgba(255, 255, 255, .72);
       backdrop-filter: blur(10px);
       border-bottom: 1px solid rgba(232, 238, 247, .7);
   }

   .topbar .inner {
       max-width: 1180px;
       margin: 0 auto;
       padding: 12px 18px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 14px;
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 10px;
       min-width: 220px;
   }

   .logo {
       width: 34px;
       height: 34px;
       border-radius: 12px;
       background: linear-gradient(135deg, var(--primary1), var(--primary2));
       box-shadow: 0 10px 22px rgba(79, 70, 229, .25);
       display: grid;
       place-items: center;
       color: #fff;
       font-weight: 800;
       letter-spacing: .3px;
       user-select: none;
   }

   .brand .t {
       display: flex;
       flex-direction: column;
       line-height: 1.1;
   }

   .brand .t b {
       font-size: 12.5px
   }

   .brand .t span {
       font-size: 11px;
       color: var(--muted)
   }

   .top-actions {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .pill {
       height: 34px;
       padding: 0 12px;
       border-radius: 999px;
       border: 1px solid var(--line);
       background: #fff;
       display: flex;
       align-items: center;
       gap: 8px;
       box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
   }

   .pill input {
       border: 0;
       outline: 0;
       width: 260px;
       font-size: 12.5px;
       color: var(--text);
       background: transparent;
   }

   .kbd {
       font-size: 10px;
       padding: 2px 6px;
       border: 1px solid var(--line);
       border-radius: 8px;
       color: var(--muted);
       background: #f8fbff;
   }

   /* layout */
   .wrap {
       max-width: 1180px;
       margin: 0 auto;
       padding: 5% 18px 42px;
   }

   .grid {
       display: grid;
       grid-template-columns: 1.1fr .9fr;
       gap: 18px;
       align-items: stretch;
   }

   /* left hero */
   .hero {
       border: 1px solid rgba(232, 238, 247, .85);
       background: rgba(255, 255, 255, .65);
       backdrop-filter: blur(12px);
       border-radius: var(--radius);
       box-shadow: var(--shadow2);
       padding: 22px;
       position: relative;
       overflow: hidden;
       min-height: 520px;
   }

   .hero:before {
       content: "";
       position: absolute;
       inset: -40% -20% auto auto;
       width: 380px;
       height: 380px;
       background: radial-gradient(circle at 30% 30%, rgba(79, 70, 229, .35), transparent 60%),
           radial-gradient(circle at 70% 70%, rgba(124, 58, 237, .30), transparent 60%);
       filter: blur(6px);
       transform: rotate(18deg);
       opacity: .9;
   }

   .hero>* {
       position: relative;
       z-index: 1;
   }

   .hero h1 {
       margin: 0 0 8px;
       font-size: 22px;
       letter-spacing: -.2px;
   }

   .hero p {
       margin: 0 0 18px;
       color: var(--muted);
       font-size: 13px;
       line-height: 1.6;
       max-width: 520px;
   }

   .feature {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 12px;
       margin-top: 12px;
   }

   .fcard {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 16px;
       padding: 14px;
       box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
   }

   .fcard b {
       font-size: 12.5px;
       display: block;
       margin-bottom: 4px;
   }

   .fcard span {
       font-size: 12px;
       color: var(--muted);
       line-height: 1.55;
       display: block;
   }

   .mini {
       margin-top: 14px;
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
   }

   .chip {
       border: 1px solid var(--line);
       background: #fff;
       padding: 7px 10px;
       border-radius: 999px;
       font-size: 12px;
       color: #334155;
       box-shadow: 0 10px 18px rgba(15, 23, 42, .035);
   }

   /* right auth card */
   .card {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       overflow: hidden;
       min-height: 520px;
       display: flex;
       flex-direction: column;
   }

   .card-head {
       padding: 16px 16px 0;
   }

   .tabs {
       background: #f8fbff;
       border: 1px solid var(--line);
       border-radius: 999px;
       padding: 6px;
       display: flex;
       gap: 6px;
   }

   .tab {
       flex: 1;
       border: 0;
       background: transparent;
       padding: 10px 12px;
       border-radius: 999px;
       font-weight: 700;
       font-size: 12.5px;
       color: #475569;
       cursor: pointer;
       transition: .15s ease;
       user-select: none;
   }

   .tab.active {
       background: #fff;
       color: #0f172a;
       box-shadow: 0 10px 18px rgba(15, 23, 42, .06);
       border: 1px solid rgba(232, 238, 247, .9);
   }

   .card-body {
       padding: 16px;
       display: flex;
       flex-direction: column;
       gap: 12px;
       flex: 1;
   }

   .title {
       margin-top: 6px;
       display: flex;
       flex-direction: column;
       gap: 4px;
   }

   .title h2 {
       margin: 0;
       font-size: 18px;
       letter-spacing: -.2px;
   }

   .title p {
       margin: 0;
       font-size: 12.5px;
       color: var(--muted);
       line-height: 1.55;
   }

   .form {
       margin-top: 4px;
       display: grid;
       gap: 10px;
   }

   .field label {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 12px;
       color: #334155;
       margin: 0 0 6px;
       font-weight: 700;
   }

   .field .hint {
       font-weight: 600;
       color: var(--muted);
       font-size: 11px;
   }

   .input {
       position: relative;
   }

   .input input {
       width: 100%;
       height: 42px;
       padding: 0 12px;
       padding-right: 40px;
       border: 1px solid var(--line);
       border-radius: var(--radius2);
       background: #fff;
       outline: none;
       font-size: 13px;
       color: var(--text);
       transition: .15s ease;
   }

   .input input:focus {
       border-color: rgba(79, 70, 229, .55);
       box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
   }

   .eye {
       position: absolute;
       right: 10px;
       top: 50%;
       transform: translateY(-50%);
       width: 28px;
       height: 28px;
       border-radius: 10px;
       border: 1px solid rgba(232, 238, 247, .9);
       background: #fff;
       cursor: pointer;
       display: grid;
       place-items: center;
       color: #475569;
   }

   .eye:hover {
       background: #f8fbff;
   }

   .err {
       display: none;
       font-size: 12px;
       color: #ef4444;
       margin-top: 6px;
       font-weight: 600;
   }

   .field.invalid .err {
       display: block;
   }

   .field.invalid input {
       border-color: rgba(239, 68, 68, .6);
       box-shadow: 0 0 0 4px rgba(239, 68, 68, .10);
   }

   .row {
       display: flex;
       gap: 10px;
       align-items: center;
       justify-content: space-between;
       margin-top: 2px;
   }

   .row small {
       color: var(--muted);
       font-size: 12px;
   }

   .btn {
       height: 42px;
       border-radius: 14px;
       border: 1px solid transparent;
       font-weight: 800;
       font-size: 13px;
       cursor: pointer;
       transition: .15s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       user-select: none;
   }

   .btn-primary {
       color: #fff;
       background: linear-gradient(135deg, var(--primary1), var(--primary2));
       box-shadow: 0 14px 28px rgba(79, 70, 229, .22);
   }

   .btn-primary:hover {
       filter: brightness(1.03);
       transform: translateY(-1px);
   }

   .btn-ghost {
       background: #fff;
       border-color: var(--line);
       color: #334155;
   }

   .btn-ghost:hover {
       background: #f8fbff;
   }

   .btn-block {
       width: 100%;
   }

   .foot {
       padding: 14px 16px 16px;
       border-top: 1px solid rgba(232, 238, 247, .7);
       background: #fbfdff;
       color: var(--muted);
       font-size: 12px;
       line-height: 1.55;
   }

   .link {
       color: var(--primary1);
       font-weight: 800;
       text-decoration: none;
   }

   .link:hover {
       text-decoration: underline;
   }

   /* forms switching */
   .form-pane {
       display: none;
   }

   .form-pane.active {
       display: block;
       animation: fadeIn .18s ease;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(2px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* overlay processing */
   .overlay {
       position: fixed;
       inset: 0;
       background: rgba(15, 23, 42, .18);
       backdrop-filter: blur(1px);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 9999;
   }

   .overlay.show {
       display: flex;
   }

   .overlay-card {
       background: rgba(255, 255, 255, .92);
       border: 1px solid rgba(232, 238, 247, .9);
       box-shadow: var(--shadow);
       border-radius: 18px;
       padding: 16px 18px;
       min-width: 220px;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--primary1), var(--primary2));
       box-shadow: 0 10px 18px rgba(79, 70, 229, .25);
       animation: pulse .85s ease-in-out infinite;
   }

   @keyframes pulse {

       0%,
       100% {
           transform: scale(1);
           opacity: .7;
       }

       50% {
           transform: scale(1.25);
           opacity: 1;
       }
   }

   .overlay-card b {
       font-size: 13px;
       letter-spacing: .1px;
   }

   /* toast */
   .toast {
       position: fixed;
       top: 16px;
       right: 16px;
       z-index: 10000;
       display: grid;
       gap: 10px;
       width: min(360px, calc(100vw - 32px));
   }

   .toast .item {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 16px;
       box-shadow: var(--shadow2);
       padding: 12px 12px;
       display: flex;
       gap: 10px;
       align-items: flex-start;
       animation: toastIn .18s ease;
   }

   @keyframes toastIn {
       from {
           opacity: 0;
           transform: translateY(-6px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .toast .badge {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       margin-top: 4px;
       background: #22c55e;
   }

   .toast .item.err .badge {
       background: #ef4444;
   }

   .toast .item b {
       display: block;
       font-size: 12.5px;
   }

   .toast .item span {
       display: block;
       font-size: 12px;
       color: var(--muted);
       margin-top: 2px;
       line-height: 1.5;
   }

   /* ===== Select đồng bộ với input (auth/register) ===== */
   .input select {
       width: 100%;
       height: 42px;
       padding: 0 42px 0 12px;
       /* chừa chỗ icon mũi tên */
       border: 1px solid var(--line, #e8eef7);
       border-radius: var(--radius2, 14px);
       background: #fff;
       color: var(--text, #0f172a);
       font-size: 13px;
       outline: none;
       transition: .15s ease;

       /* ẩn style mặc định */
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;

       /* tránh bị zoom iOS */
       line-height: 42px;
   }

   /* focus giống input */
   .input select:focus {
       border-color: rgba(79, 70, 229, .55);
       box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
   }

   /* hover nhẹ */
   .input select:hover {
       border-color: rgba(232, 238, 247, .95);
   }

   /* mũi tên dropdown custom */
   .input {
       position: relative;
   }

   .input select+.select-caret {
       display: none;
   }

   /* phòng trường hợp bạn tạo caret thủ công */
   .input:has(select)::after {
       content: "";
       position: absolute;
       right: 14px;
       top: 50%;
       width: 8px;
       height: 8px;
       transform: translateY(-50%) rotate(45deg);
       border-right: 2px solid #64748b;
       border-bottom: 2px solid #64748b;
       pointer-events: none;
       opacity: .9;
   }

   /* trạng thái lỗi đồng bộ với .field.invalid */
   .field.invalid .input select {
       border-color: rgba(239, 68, 68, .6);
       box-shadow: 0 0 0 4px rgba(239, 68, 68, .10);
   }

   /* disabled */
   .input select:disabled {
       background: #f8fbff;
       color: #94a3b8;
       cursor: not-allowed;
   }

   /* responsive */
   @media (max-width: 980px) {
       .grid {
           grid-template-columns: 1fr;
       }

       .hero {
           min-height: auto;
       }

       .pill input {
           width: 160px;
       }
   }


   /* ===== Bootstrap-like responsive (no Bootstrap dependency) =====
   Mục tiêu: dùng breakpoints giống Bootstrap (sm/md/lg/xl/xxl)
   để layout login/auth co giãn mượt trên mọi màn hình.
   - sm: 576px
   - md: 768px
   - lg: 992px
   - xl: 1200px
   - xxl: 1400px
=============================================================== */
   :root {
       --bs-gutter-x: 1.5rem;
       /* 24px */
   }

   /* Treat existing containers like Bootstrap container */
   .topbar .inner,
   .wrap {
       width: 100%;
       margin-right: auto;
       margin-left: auto;
       padding-left: calc(var(--bs-gutter-x) * .5);
       padding-right: calc(var(--bs-gutter-x) * .5);
   }

   /* Container max-widths (Bootstrap defaults) */
   @media (min-width: 576px) {

       .topbar .inner,
       .wrap {
           max-width: 540px;
       }
   }

   @media (min-width: 768px) {

       .topbar .inner,
       .wrap {
           max-width: 720px;
       }
   }

   @media (min-width: 992px) {

       .topbar .inner,
       .wrap {
           max-width: 960px;
       }
   }

   @media (min-width: 1200px) {

       .topbar .inner,
       .wrap {
           max-width: 1140px;
       }
   }

   @media (min-width: 1400px) {

       .topbar .inner,
       .wrap {
           max-width: 1320px;
       }
   }

   /* ===== Layout breakpoints ===== */

   /* < lg (<= 991.98px): stack 1 column like Bootstrap */
   @media (max-width: 991.98px) {
       .grid {
           grid-template-columns: 1fr;
       }

       .hero {
           min-height: auto;
       }

       .card {
           min-height: auto;
       }

       .pill input {
           width: 180px;
       }
   }

   /* < md (<= 767.98px): tighten spacing */
   @media (max-width: 767.98px) {
       .wrap {
           padding-top: 26px;
       }

       /* thay vì 5% để ổn định như BS */
       .hero {
           padding: 16px;
       }

       .card-body {
           padding: 14px;
       }

       .card-head {
           padding: 14px 14px 0;
       }

       .foot {
           padding: 12px 14px 14px;
       }

       .feature {
           grid-template-columns: 1fr;
       }

       .mini {
           gap: 8px;
       }

       .chip {
           font-size: 11.5px;
           padding: 6px 9px;
       }

       .pill {
           height: 32px;
           padding: 0 10px;
       }

       .pill input {
           width: 150px;
       }

       .kbd {
           display: none;
       }
   }

   /* < sm (<= 575.98px): mobile-first polish */
   @media (max-width: 575.98px) {
       .topbar .inner {
           padding-top: 10px;
           padding-bottom: 10px;
       }

       .brand {
           min-width: 0;
       }

       .brand .t b {
           font-size: 12px;
       }

       .brand .t span {
           font-size: 10.5px;
       }

       /* hide search pill on very small screens (Bootstrap behavior) */
       .top-actions {
           display: none;
       }

       .wrap {
           padding-left: 12px;
           padding-right: 12px;
       }

       .hero h1 {
           font-size: 18px;
       }

       .hero p {
           font-size: 12.5px;
       }

       .tabs {
           padding: 5px;
       }

       .tab {
           padding: 10px 10px;
           font-size: 12px;
       }

       .btn {
           height: 44px;
       }

       /* touch target giống BS */
       .input input {
           height: 44px;
       }

       .input select {
           height: 44px;
       }
   }

   /* ===== Optional: Bootstrap-like utilities (SAFE) =====
   Không đụng class .row/.col để tránh xung đột layout hiện tại.
   Dùng prefix .bs-* nếu bạn muốn utilities kiểu Bootstrap. */

   /* container helpers */
   .bs-container {
       width: 100%;
       margin-right: auto;
       margin-left: auto;
       padding-left: calc(var(--bs-gutter-x) * .5);
       padding-right: calc(var(--bs-gutter-x) * .5);
   }

   @media (min-width: 576px) {
       .bs-container {
           max-width: 540px;
       }
   }

   @media (min-width: 768px) {
       .bs-container {
           max-width: 720px;
       }
   }

   @media (min-width: 992px) {
       .bs-container {
           max-width: 960px;
       }
   }

   @media (min-width: 1200px) {
       .bs-container {
           max-width: 1140px;
       }
   }

   @media (min-width: 1400px) {
       .bs-container {
           max-width: 1320px;
       }
   }

   /* display utilities */
   .bs-d-none {
       display: none !important;
   }

   .bs-d-block {
       display: block !important;
   }

   .bs-d-flex {
       display: flex !important;
   }

   @media (min-width: 576px) {
       .bs-d-sm-none {
           display: none !important;
       }

       .bs-d-sm-block {
           display: block !important;
       }

       .bs-d-sm-flex {
           display: flex !important;
       }
   }

   @media (min-width: 768px) {
       .bs-d-md-none {
           display: none !important;
       }

       .bs-d-md-block {
           display: block !important;
       }

       .bs-d-md-flex {
           display: flex !important;
       }
   }

   @media (min-width: 992px) {
       .bs-d-lg-none {
           display: none !important;
       }

       .bs-d-lg-block {
           display: block !important;
       }

       .bs-d-lg-flex {
           display: flex !important;
       }
   }

   /* spacing (subset useful for login) */
   .bs-mt-0 {
       margin-top: 0 !important;
   }

   .bs-mt-1 {
       margin-top: .25rem !important;
   }

   .bs-mt-2 {
       margin-top: .5rem !important;
   }

   .bs-mt-3 {
       margin-top: 1rem !important;
   }

   .bs-mt-4 {
       margin-top: 1.5rem !important;
   }

   .bs-mt-5 {
       margin-top: 3rem !important;
   }

   .bs-mb-0 {
       margin-bottom: 0 !important;
   }

   .bs-mb-1 {
       margin-bottom: .25rem !important;
   }

   .bs-mb-2 {
       margin-bottom: .5rem !important;
   }

   .bs-mb-3 {
       margin-bottom: 1rem !important;
   }

   .bs-mb-4 {
       margin-bottom: 1.5rem !important;
   }

   .bs-mb-5 {
       margin-bottom: 3rem !important;
   }

   .bs-p-0 {
       padding: 0 !important;
   }

   .bs-p-1 {
       padding: .25rem !important;
   }

   .bs-p-2 {
       padding: .5rem !important;
   }

   .bs-p-3 {
       padding: 1rem !important;
   }

   .bs-p-4 {
       padding: 1.5rem !important;
   }

   .bs-p-5 {
       padding: 3rem !important;
   }