@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

    .twi-user-auth-section,
    .twi-user-auth-section * {
      box-sizing: border-box;
      font-family: "Manrope", Arial, Helvetica, sans-serif !important;
      font-synthesis: none !important;
      text-rendering: geometricPrecision !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
    }

    .twi-user-auth-section {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 78px 22px 88px;
      background:
        radial-gradient(circle at 12% 18%, rgba(255, 196, 0, .16), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(0, 101, 195, .14), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 55%, #ffffff 100%);
      color: #07356f;
    }

    .twi-user-auth-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgba(0, 59, 131, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 59, 131, .035) 1px, transparent 1px);
      background-size: 42px 42px;
      opacity: .62;
      pointer-events: none;
    }

    .twi-ua-wrap {
      width: min(1180px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 28px;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }

    .twi-ua-intro,
    .twi-ua-card {
      border-radius: 34px;
      background: rgba(255, 255, 255, .94);
      border: 1px solid rgba(7, 53, 111, .08);
      box-shadow: 0 26px 70px rgba(7, 53, 111, .11), inset 0 1px 0 rgba(255, 255, 255, .96);
      overflow: hidden;
      position: relative;
    }

    .twi-ua-intro {
      padding: 38px;
      background:
        radial-gradient(circle at 16% 14%, rgba(255, 196, 0, .18), transparent 34%),
        radial-gradient(circle at 88% 88%, rgba(255, 255, 255, .12), transparent 36%),
        linear-gradient(135deg, #003b83, #0065c3);
      color: #ffffff;
    }

    .twi-ua-badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 34px;
      padding: 0 14px;
      margin-bottom: 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .14);
      border: 1px solid rgba(255, 255, 255, .18);
      color: rgba(255, 255, 255, .92);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .twi-ua-badge::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 6px rgba(34, 197, 94, .18);
    }

    .twi-ua-intro h2 {
      margin: 0;
      font-size: clamp(30px, 3vw, 48px);
      line-height: 1.16;
      font-weight: 800;
      letter-spacing: -1px;
      text-transform: uppercase;
    }

    .twi-ua-intro p {
      margin: 16px 0 0;
      color: rgba(255, 255, 255, .86);
      font-size: 15px;
      line-height: 1.85;
      font-weight: 600;
    }

    .twi-ua-benefits {
      list-style: none;
      padding: 0;
      margin: 30px 0 0;
      display: grid;
      gap: 14px;
    }

    .twi-ua-benefits li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: rgba(255, 255, 255, .92);
      font-size: 14px;
      line-height: 1.65;
      font-weight: 700;
    }

    .twi-ua-benefits li span {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .14);
      color: #facc15;
      font-weight: 800;
    }

    .twi-ua-card-head {
      padding: 30px 32px 18px;
      border-bottom: 1px solid rgba(7, 53, 111, .08);
      background:
        radial-gradient(circle at 10% 10%, rgba(0, 101, 195, .08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .twi-ua-card-head h3 {
      margin: 0;
      color: #07356f;
      font-size: 30px;
      line-height: 1.24;
      font-weight: 800;
      letter-spacing: -.6px;
    }

    .twi-ua-card-head p {
      margin: 8px 0 0;
      color: #64748b;
      font-size: 14px;
      line-height: 1.65;
      font-weight: 600;
    }

    .twi-ua-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 18px 32px 0;
    }

    .twi-ua-tab {
      min-height: 68px;
      border: 1px solid rgba(7, 53, 111, .11);
      border-radius: 20px;
      background: #ffffff;
      color: #07356f;
      cursor: pointer;
      transition: .22s;
      padding: 10px 14px;
      display: flex;
      gap: 12px;
      align-items: center;
      text-align: left;
    }

    .twi-ua-tab:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 93, 204, .22);
      box-shadow: 0 14px 28px rgba(7, 53, 111, .08);
    }

    .twi-ua-tab-icon {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      background: #eef6ff;
      color: #005dcc;
      font-size: 18px;
      font-weight: 800;
    }

    .twi-ua-tab-text strong {
      display: block;
      font-size: 15px;
      line-height: 1.25;
      font-weight: 800;
    }

    .twi-ua-tab-text span {
      display: block;
      margin-top: 4px;
      color: #64748b;
      font-size: 12px;
      line-height: 1.25;
      font-weight: 700;
    }

    .twi-ua-tab.active {
      color: #ffffff;
      background: linear-gradient(135deg, #005dcc, #003b83);
      box-shadow: 0 18px 38px rgba(0, 93, 204, .24);
      border-color: transparent;
      transform: translateY(-2px);
    }

    .twi-ua-tab.active .twi-ua-tab-icon {
      background: rgba(255, 255, 255, .16);
      color: #ffffff;
    }

    .twi-ua-tab.active .twi-ua-tab-text span {
      color: rgba(255, 255, 255, .78);
    }

    .twi-ua-form-area,
    .twi-ua-logged-panel {
      padding: 26px 32px 32px;
    }

    .twi-ua-form {
      display: none;
      gap: 16px;
    }

    .twi-ua-form.active {
      display: grid;
    }

    .twi-ua-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .twi-ua-field {
      display: grid;
      gap: 7px;
    }

    .twi-ua-field.full {
      grid-column: 1 / -1;
    }

    .twi-ua-field label {
      color: #334155;
      font-size: 13px;
      font-weight: 800;
    }

    .twi-ua-field input {
      width: 100%;
      min-height: 50px;
      border: 1px solid rgba(7, 53, 111, .13);
      border-radius: 15px;
      background: #ffffff;
      color: #17315f;
      padding: 0 15px;
      outline: none;
      font-size: 14px;
      font-weight: 600;
      transition: .2s;
    }

    .twi-ua-field input:focus {
      border-color: #0065c3;
      box-shadow: 0 0 0 5px rgba(0, 101, 195, .08);
    }

    .twi-ua-check {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #475569;
      font-size: 13px;
      line-height: 1.65;
      font-weight: 700;
    }

    .twi-ua-check input {
      margin-top: 3px;
    }

    .twi-ua-turnstile {
      min-height: 76px;
      padding: 12px;
      border-radius: 18px;
      background: #f8fbff;
      border: 1px dashed rgba(7, 53, 111, .16);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .twi-ua-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .twi-ua-submit,
    .twi-ua-secondary,
    .twi-ua-text-btn {
      min-height: 52px;
      padding: 0 22px;
      border-radius: 15px;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      transition: .22s;
      text-decoration: none !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .twi-ua-submit {
      border: 0;
      color: #ffffff !important;
      background: linear-gradient(135deg, #005dcc, #003b83);
      box-shadow: 0 18px 38px rgba(0, 93, 204, .24);
    }

    .twi-ua-secondary {
      border: 1px solid rgba(7, 53, 111, .13);
      color: #07356f !important;
      background: #ffffff;
    }

    .twi-ua-text-btn {
      min-height: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: #005dcc !important;
      box-shadow: none;
      font-size: 13px;
      text-decoration: underline !important;
      text-underline-offset: 4px;
    }

    .twi-ua-submit:hover,
    .twi-ua-secondary:hover {
      transform: translateY(-3px);
    }

    .twi-ua-submit:disabled,
    .twi-ua-secondary:disabled {
      opacity: .65;
      cursor: not-allowed;
      transform: none;
    }

    .twi-ua-message {
      min-height: 28px;
      color: #64748b;
      font-size: 13px;
      line-height: 1.6;
      font-weight: 700;
    }

    .twi-ua-message.ok {
      color: #16a34a;
    }

    .twi-ua-message.error {
      color: #dc2626;
    }

    .twi-ua-helper-box {
      padding: 16px;
      border-radius: 18px;
      background: #f8fbff;
      border: 1px solid rgba(7, 53, 111, .08);
      color: #475569;
      font-size: 13px;
      line-height: 1.7;
      font-weight: 650;
    }

    .twi-ua-logged-panel {
      display: none;
    }

    .twi-ua-logged-card {
      border-radius: 26px;
      padding: 24px;
      background:
        radial-gradient(circle at 14% 14%, rgba(250, 204, 21, .18), transparent 32%),
        linear-gradient(135deg, #003b83, #0065c3);
      color: #ffffff;
      overflow: hidden;
      position: relative;
    }

    .twi-ua-logged-card::after {
      content: "";
      position: absolute;
      right: -42px;
      bottom: -48px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
    }

    .twi-ua-userline {
      display: flex;
      gap: 14px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .twi-ua-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      padding: 4px;
      background: rgba(255, 255, 255, .22);
      box-shadow: 0 16px 30px rgba(0, 0, 0, .16);
      flex: 0 0 auto;
    }

    .twi-ua-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      background: #ffffff;
    }

    .twi-ua-userline strong {
      display: block;
      color: #ffffff;
      font-size: 22px;
      line-height: 1.25;
      font-weight: 800;
    }

    .twi-ua-userline span {
      display: block;
      margin-top: 5px;
      color: rgba(255, 255, 255, .82);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 650;
      word-break: break-word;
    }

    .twi-ua-logged-desc {
      margin: 18px 0 0;
      color: rgba(255, 255, 255, .86);
      font-size: 14px;
      line-height: 1.75;
      font-weight: 650;
      position: relative;
      z-index: 2;
    }

    .twi-ua-logged-actions {
      margin-top: 22px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      position: relative;
      z-index: 2;
    }

    .twi-ua-logged-actions .twi-ua-secondary {
      background: rgba(255, 255, 255, .13);
      color: #ffffff !important;
      border-color: rgba(255, 255, 255, .22);
      box-shadow: none;
    }

    @media (max-width: 980px) {
      .twi-ua-wrap {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .twi-user-auth-section {
        padding: 56px 16px 64px;
      }

      .twi-ua-intro,
      .twi-ua-card-head,
      .twi-ua-form-area,
      .twi-ua-logged-panel {
        padding-left: 20px;
        padding-right: 20px;
      }

      .twi-ua-grid,
      .twi-ua-tabs {
        grid-template-columns: 1fr;
      }

      .twi-ua-tabs {
        padding-left: 20px;
        padding-right: 20px;
      }

      .twi-ua-actions,
      .twi-ua-logged-actions {
        display: grid;
      }

      .twi-ua-submit,
      .twi-ua-secondary {
        width: 100%;
      }
    }

/* Core SSO: chỉ hiển thị khi provider đã cấu hình và được bật. */
.twi-ua-sso[hidden],
.twi-ua-provider[hidden],
.twi-ua-modal[hidden] { display: none !important; }

.twi-ua-sso { margin: 0 0 22px; }
.twi-ua-provider {
  width: 100%; min-height: 48px; display: flex; align-items: center;
  justify-content: center; gap: 11px; margin: 0 0 10px; padding: 11px 16px;
  border: 1px solid #d7e1ef; border-radius: 12px; background: #fff;
  color: #17345e; font: inherit; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 20px rgba(15,47,102,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.twi-ua-provider:hover { transform: translateY(-1px); border-color: #a9c6ee; box-shadow: 0 12px 24px rgba(15,47,102,.1); }
.twi-ua-provider:disabled { opacity: .65; cursor: wait; transform: none; }
.twi-ua-provider-mark {
  width: 25px; height: 25px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; background: #4285f4;
  font-size: 14px; font-weight: 900; flex: 0 0 auto;
}
.twi-ua-provider-mark-ms { border-radius: 2px; background: transparent; display: grid; grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 10px); gap: 2px; }
.twi-ua-provider-mark-ms i { display:block; background:#f25022; }
.twi-ua-provider-mark-ms i:nth-child(2){background:#7fba00}.twi-ua-provider-mark-ms i:nth-child(3){background:#00a4ef}.twi-ua-provider-mark-ms i:nth-child(4){background:#ffb900}
.twi-ua-divider { display:flex; align-items:center; gap:12px; margin:17px 0 2px; color:#7890ae; font-size:12px; font-weight:700; text-align:center; }
.twi-ua-divider::before,.twi-ua-divider::after { content:""; height:1px; background:#e3eaf3; flex:1; }

.twi-ua-modal { position:fixed; inset:0; z-index:999999; display:grid; place-items:center; padding:20px; }
.twi-ua-modal-backdrop { position:absolute; inset:0; background:rgba(4,21,48,.62); backdrop-filter:blur(3px); }
.twi-ua-modal-dialog { position:relative; z-index:1; width:min(520px,100%); border-radius:20px; background:#fff; padding:28px; box-shadow:0 30px 80px rgba(4,21,48,.3); }
.twi-ua-modal-dialog h3 { margin:0 36px 8px 0; color:#0f2f66; font-size:23px; }
.twi-ua-modal-dialog > p { margin:0 0 20px; color:#5d708b; line-height:1.65; }
.twi-ua-modal-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; border-radius:50%; background:#f0f4fa; color:#405a7e; font-size:24px; cursor:pointer; }
.twi-ua-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.twi-ua-sso-email-confirm { margin:15px auto 0; display:block; }
body.twi-ua-modal-open { overflow:hidden; }
@media(max-width:620px){.twi-ua-modal-dialog{padding:24px 20px}.twi-ua-modal-actions{grid-template-columns:1fr}.twi-ua-modal-actions .twi-ua-submit,.twi-ua-modal-actions .twi-ua-secondary{width:100%}}