/* Chocon Keycloak theme assets: v4 */
/****************************************************************************
 *  A. NỀN & FLEXBOX CANH GIỮA
 ****************************************************************************/
html,
body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Tránh scroll ngang, nhưng vẫn cho phép scroll dọc khi form quá cao (màn hình thấp). */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  /* Đổi nền: subtle gray để card nổi bật hơn */
  background: #f5f7fb !important; /* trước đây là #ffffff */
  font-family: Inter, sans-serif !important;
}

/* ============================================================
 * Viewport-fit + bo góc (Facebook-like)
 * - Mục tiêu: các màn Keycloak không xuất hiện thanh cuộn
 * - Giữ cân đối trên màn hình lớn, co gọn theo chiều cao
 * ============================================================ */
:root {
  /* Bo góc "card/form ngoài cùng" (khối trắng bao toàn bộ nội dung) */
  --ck-radius-card: 16px;
  --ck-radius-control: 12px;
  --ck-viewport-pad: 20px;
  --ck-page-max-w: 1280px;
  --ck-page-pad-x: 16px;
  --ck-topbar-h: 64px;
  --ck-topbar-gap: 20px;
  --ck-footer-h: 48px;
  --ck-card-max-h: calc(100dvh - (var(--ck-topbar-h) + var(--ck-footer-h) + var(--ck-viewport-pad) * 2 + var(--ck-topbar-gap)));
  /* Card width: tham chiếu modal OAuth phổ biến (Facebook/Google) để cân đối hơn */
  --ck-content-max-w: 520px;
}

body {
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
}

.ck-auth-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.ck-auth-topbar__inner {
  max-width: var(--ck-page-max-w);
  margin: 0 auto;
  padding: 0 var(--ck-page-pad-x);
  height: var(--ck-topbar-h);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}

.ck-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.ck-brand img {
  width: 40px;
  height: 40px;
  display: block;
}

.ck-brand__text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
}

.ck-brand__suffix {
  color: #4b5563;
}

.ck-auth-topbar__lang {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.ck-auth-topbar__lang-placeholder {
  width: 40px;
  height: 40px;
  display: inline-block;
}

.ck-auth-page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: calc(100dvh - var(--ck-topbar-h));
}

.ck-auth-main {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ck-topbar-gap) var(--ck-page-pad-x);
  box-sizing: border-box;
}

@media (min-width: 640px) {
  :root { --ck-page-pad-x: 24px; }
}

@media (min-width: 1024px) {
  :root { --ck-page-pad-x: 32px; }
}

.pf-v5-c-login {
  display: block !important;
  width: 100%;
  max-width: var(--ck-content-max-w);
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  /* Vô hiệu padding mặc định */
  --pf-v5-c-login__container--PaddingLeft: 0 !important;
  --pf-v5-c-login__container--PaddingRight: 0 !important;
}

/****************************************************************************
 *  B. CONTAINER CHÍNH
 ****************************************************************************/
.pf-v5-c-login__container {
  display: grid !important;
  grid-template-columns: 1fr !important;           /* chỉ 1 cột */
  grid-template-rows: auto 1fr auto !important;
  gap: 0 !important;

  width: 100% !important;
  max-width: 100% !important;

  background: #ffffff !important;
  border-radius: var(--ck-radius-card) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  /* Quan trọng: clip nội dung theo bo góc để không còn góc nhọn + cho phép scroll khi form quá cao */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background-clip: padding-box !important;
  max-height: var(--ck-card-max-h) !important;
  transform-origin: center top;

  margin: 0 auto !important;
  padding-inline: 0 !important;
}

@media (max-width: 540px) {
  .pf-v5-c-login__container {
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.pf-v5-c-login__footer {
  display: none !important;        /* tránh chiếm chỗ */
}

/****************************************************************************
 *  C. CỘT CỐ ĐỊNH CHO CÁC KHỐI CON
 ****************************************************************************/
.pf-v5-c-login__header,
.pf-v5-c-login__main,
.pf-v5-c-login__footer {
  grid-column: 1 !important;       /* luôn ở cột 1 */
}

/****************************************************************************
 *  D. KHỐI MAIN (FORM)
 ****************************************************************************/
.pf-v5-c-login__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;            /* khoảng cách dọc đều 16 px */
  /* Card padding: theo nhịp 4px, đủ “thở” trên màn lớn nhưng vẫn gọn */
  padding: 32px 32px 28px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* PF mặc định gán background+shadow cho main nhưng không có radius → dễ thấy góc nhọn.
     Card thực tế được style ở .pf-v5-c-login__container, nên main chỉ là “nội dung”. */
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: var(--ck-radius-card) !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  /* Không tạo thanh cuộn trong card. Responsive theo chiều cao sẽ đảm bảo fit. */
  max-height: none !important;
}

.pf-v5-c-login__main-header {
  /* PF default padding khá lớn → card bị cao và dư khoảng trống.
     Để main padding quản lý spacing đồng nhất. */
  padding: 0 !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}

.pf-v5-c-login__main-body {
  /* PatternFly mặc định chừa padding-bottom lớn (~64px) để đặt footer.
     Theme này đã có footer riêng, nên giảm để tránh khoảng trống dư dưới form. */
  padding-bottom: 0 !important;
}

/****************************************************************************
 *  E. HEADER & TITLE
 ****************************************************************************/
#kc-header { display: none !important; }

#kc-page-title {
  font-size: 26px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 !important;
}

/****************************************************************************
 *  F. INPUTS & LABELS
 ****************************************************************************/
.pf-v5-c-form__label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.pf-v5-c-form {
  /* PatternFly default form grid gap khá lớn (24px) → làm card đăng ký quá cao */
  gap: 16px !important;
  row-gap: 16px !important;
}
.pf-v5-c-form .pf-v5-c-form__group {
  /* Khi form dùng grid gap, bỏ margin nhóm để tránh cộng dồn khoảng cách */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pf-v5-c-form-control {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  background: #eef4ff !important;
  border: 1px solid #d7dee9 !important;
  border-radius: var(--ck-radius-control) !important;
  box-shadow: none !important;
  background-image: none !important;
  box-sizing: border-box !important;
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-visible {
  border-color: #635bff !important;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18) !important;
  outline: none !important;
}

.pf-v5-c-form__group {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Giảm khoảng cách nút Gửi với ô OTP */
.pf-v5-c-form__group.pf-m-action {
  margin-top: 8px !important;   /* mặc định PatternFly ~24px */
}

/****************************************************************************
 *  G. INPUT PASSWORD + TOGGLE
 ****************************************************************************/
.password-row-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px;
  padding-top: 8px;
}

.password-input-group {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.password-input-group input {
  width: 100% !important;
  background: #eef4ff !important;
  border: 1px solid #d7dee9 !important;
  border-radius: var(--ck-radius-control) !important;
  padding: 0 48px 0 16px !important;
  font-size: 16px !important;
  height: 48px !important;
  box-sizing: border-box !important;
}

.password-input-group input:focus,
.password-input-group input:focus-visible {
  border-color: #635bff !important;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18) !important;
  outline: none !important;
}

.password-input-group button {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  color: #64748b !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 150ms ease, color 150ms ease !important;
}

.password-input-group button:hover,
.password-input-group button:focus,
.password-input-group button:active {
  border: none !important;
  box-shadow: none !important;
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
  outline: none !important;
}

.password-input-group img {
  width: 20px !important;
  height: 20px !important;
}

/****************************************************************************
 *  H. CHECKBOX & BUTTONS
 ****************************************************************************/
.checkbox {
  margin: 0 0 12px 0 !important;
}
.checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  font-size: 14px !important;
  padding: 6px 0 !important;
  cursor: pointer !important;
}
.checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
}

#kc-login,
#kc-register {
  width: 100% !important;
  height: 48px !important;
  margin-bottom: 0 !important;     /* để separator cân đối */
  padding: 0 16px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: #635bff !important;
  border: none !important;
  border-radius: var(--ck-radius-control) !important;
  cursor: pointer !important;
}
#kc-login:hover,
#kc-register:hover { background: #5046e5 !important; }

/****************************************************************************
 *  I. SEPARATOR "HOẶC"
 ****************************************************************************/
.custom-login-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 !important;
}
.custom-login-separator hr {
  flex: 1;
  border: 0;
  height: 1px;
  background: #eaeaea;
}
.custom-login-separator span {
  font-size: 13px;
  color: #94a3b8;
}

/****************************************************************************
 *  J. SOCIAL LOGIN BUTTON
 ****************************************************************************/
.kc-social-list-stripe {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* chỉ 1 nút Google nên không cần margin-top */
.kc-social-btn-stripe {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 16px !important;
  border: 1px solid #ddd !important;
  border-radius: var(--ck-radius-control) !important;
  background: #fff !important;
  color: #444 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.2s !important;
}
.kc-social-btn-stripe:hover { background: #f7f7f7 !important; }
.kc-social-icon { height: 18px !important; width: auto !important; }

/****************************************************************************
 *  K. REGISTRATION LINK
 ****************************************************************************/
#kc-registration-container {
  font-size: 15px !important;      /* tăng nhẹ */
  text-align: center !important;
  margin-top: 10px !important;
}
#kc-registration-container a {
  color: #635bff !important;
  text-decoration: none !important;
}
#kc-registration-container a:hover { text-decoration: underline !important; }

/* Footer */
.pf-v5-c-login__main-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  padding: 12px 0 !important;
  /* Đưa footer vào flow để tránh phải chừa padding đáy + tránh gây scroll */
  position: static !important;
  width: 100% !important;
  text-align: center !important;
  z-index: 1000 !important;
}

#kc-footer-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  width: 100% !important;
  max-width: var(--ck-page-max-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--ck-page-pad-x) 16px !important;
  text-align: center !important;
}

#kc-footer-links a {
  color: #6b7280 !important;
  text-decoration: none !important;
}
#kc-footer-links a:hover {
  text-decoration: underline !important;
}

/* Reset password instruction text */
.pf-v5-c-login__main-footer-band,
#kc-reset-instruction {
  color: #6b7280 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.forgot-link {
  font-size: 14px !important;
  color: #635bff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 6px !important;
  margin-right: -6px !important;
}
.forgot-link:hover { text-decoration: underline !important; }

#kc-registration-container a,
#kc-info a,
#kc-form-options a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
}

#kc-header-wrapper{background:none !important; text-indent:0 !important; width:auto !important; height:auto !important;}

/* ===== Language switcher (match dashboard UI) ===== */
.ck-lang{
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
}
.ck-lang__trigger{
  cursor: pointer;
  border: 1px solid #e5e7eb !important;
  background: rgba(255,255,255,0.70) !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  height: 40px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  font: inherit;
  color: inherit;
}
.ck-lang__trigger::-moz-focus-inner{border:0;}
.ck-lang__trigger:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ck-lang[data-open="true"] .ck-lang__trigger{
  background: rgba(255,255,255,0.92);
}
.ck-lang__trigger:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(17,78,241,0.20), 0 2px 6px rgba(0,0,0,0.10);
}
.ck-lang__flag{
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e5e7eb !important;
}
.ck-lang__flag img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ck-lang__short{
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #111827;
  display: inline-block;
}
.ck-lang__menu{
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 10px) !important;
  width: 208px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  z-index: 9999 !important;
}
.ck-lang__menu{display:none !important;}
.ck-lang[data-open="true"] .ck-lang__menu{display:block !important;}
.ck-lang:not([data-js="true"]):focus-within .ck-lang__menu{display:block !important;}
.ck-lang__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
  color: inherit;
}
.ck-lang__item:hover{
  background: rgba(0,0,0,0.04);
}
.ck-lang__item.is-selected{
  background: rgba(0,0,0,0.06);
}
.ck-lang__item-flag{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.14);
  display: inline-flex;
}
.ck-lang__item-flag img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ck-lang__item-label{
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.66);
}
.ck-lang__item.is-selected .ck-lang__item-label{
  font-weight: 600;
  color: rgba(0,0,0,0.90);
}
.ck-lang__check{
  color: #635bff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ---------- OTP QR code sizing ---------- */
#kc-totp-secret-qr-code,
#kc-totp-secret-qr-code img,
#kc-qr-code,
#kc-qr-code img {
  width: 180px !important;
  height: 180px !important;
  max-width: 180px !important;
  max-height: 180px !important;
  display: block !important;
  margin: 0 auto 16px auto !important;
}

/* ---------- OTP/TOTP helper text & steps ---------- */
.ck-helper-text {
  margin: 8px 0 0 0 !important;
  font-size: 14px !important;
  color: rgba(0, 0, 0, 0.62) !important;
  line-height: 1.35 !important;
}
.kc-totp-steps {
  padding-left: 18px !important;
  margin: 0 0 14px 0 !important;
}
.kc-totp-steps > li {
  margin: 6px 0 !important;
}
.kc-totp-apps {
  margin: 6px 0 0 0 !important;
  padding-left: 18px !important;
}

/* ============================================================
 * Responsive theo CHIỀU CAO (ưu tiên bỏ scroll trên màn hình thấp)
 * ============================================================ */
@media (max-height: 760px) {
  :root { --ck-viewport-pad: 12px; --ck-footer-h: 52px; --ck-topbar-h: 60px; --ck-topbar-gap: 16px; --ck-content-max-w: 500px; }
  #kc-page-title { font-size: 22px !important; }
  .pf-v5-c-login__main { padding: 28px 24px 20px !important; gap: 14px !important; }
  .ck-brand img { width: 32px; height: 32px; }
  .custom-login-separator { margin: 12px 0 !important; }
  #kc-registration-container { margin-top: 10px !important; }
  .pf-v5-c-login__container {
    max-height: var(--ck-card-max-h) !important;
    transform: scale(0.97);
  }
}

@media (max-height: 680px) {
  :root { --ck-radius-control: 10px; --ck-viewport-pad: 10px; --ck-footer-h: 48px; --ck-topbar-h: 56px; --ck-topbar-gap: 12px; --ck-content-max-w: 480px; }
  #kc-page-title { font-size: 20px !important; margin: 0 !important; }
  .pf-v5-c-login__main { padding: 22px 18px 18px !important; gap: 12px !important; }
  .ck-brand img { width: 30px; height: 30px; }
  .pf-v5-c-form__label { font-size: 13px !important; margin-bottom: 4px !important; }
  .pf-v5-c-form-control { font-size: 15px !important; height: 44px !important; padding: 0 12px !important; }
  .password-input-group input { height: 44px !important; }
  #kc-login, #kc-register, .kc-social-btn-stripe { height: 44px !important; font-size: 15px !important; }
  .checkbox { margin: 0 0 10px 0 !important; }
  #kc-registration-container { margin-top: 8px !important; }
  #kc-footer-links { padding: 12px 0 !important; }
  .pf-v5-c-login__container {
    max-height: var(--ck-card-max-h) !important;
    transform: scale(0.94);
  }

  /* Update-password có inline style margin-top: 1rem → giảm cho màn thấp */
  .password-row-header { padding-top: 4px !important; }
  .password-row-header[style] { margin-top: 0.5rem !important; }

  /* TOTP: giảm QR + spacing để tránh vượt chiều cao */
  #kc-totp-secret-qr-code,
  #kc-totp-secret-qr-code img,
  #kc-qr-code,
  #kc-qr-code img {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    margin-bottom: 10px !important;
  }
  .kc-totp-steps { margin-bottom: 10px !important; }
  .kc-totp-steps > li { margin: 4px 0 !important; }
  .ck-helper-text { font-size: 13px !important; }
}

/* Cực thấp (landscape / màn nhỏ): scale nhẹ để tránh overflow */
@media (max-height: 560px) {
  .pf-v5-c-login__container {
    transform: scale(0.9);
    transform-origin: center top;
  }
  #kc-totp-secret-qr-code,
  #kc-totp-secret-qr-code img,
  #kc-qr-code,
  #kc-qr-code img {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
  }
}

/* Desktop (>= MacBook Air 2017): luôn thấy card + footer, không hiển thị thanh cuộn */
@media (min-height: 900px) and (min-width: 1024px) {
  html,
  body {
    overflow: hidden !important;
  }

  .pf-v5-c-login__container {
    overflow-y: hidden !important;
  }
}

/* Đảm bảo mọi lớp "thân" đều bo tròn nếu Keycloak đổi cấu trúc (PF v5 / legacy) */
#kc-content,
#kc-content-wrapper,
.card-pf {
  border-radius: var(--ck-radius-card) !important;
  overflow: hidden !important;
}