:root {
  --web-cms-primary: #007bff;
  --web-cms-background: #f3faff;
  --web-cms-text: #111827;
  --web-cms-logo-width: 220px;
  --web-cms-login-image: none;
  --web-cms-main-image: none;
  --web-cms-dark-image: none;
  --web-cms-dark-background: #07101d;
  --web-cms-dark-surface: #0d1928;
  --web-cms-dark-text: #eaf0f8;
  --web-cms-font-family: inherit;
  --web-cms-title-size: 0px;
  --web-cms-content-size: 0px;
  --web-cms-banner-desktop-height: 340px;
  --web-cms-banner-mobile-height: 340px;
  --web-cms-banner-desktop-radius: 18px;
  --web-cms-banner-mobile-radius: 13px;
}

html[data-web-theme-enabled="true"] body[data-page="user"]:not(.user-authenticated) {
  background-color: var(--web-cms-background) !important;
}

html[data-web-theme-enabled="true"][data-web-theme-has-login-image="true"] body[data-page="user"]:not(.user-authenticated) {
  background-image: var(--web-cms-login-image) !important;
  background-position: var(--user-profile-bg-pc-position, 50% 50%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

html[data-web-theme-enabled="true"] body[data-page="user"].user-authenticated {
  background-color: var(--web-cms-background) !important;
}

html[data-web-theme-enabled="true"][data-web-theme-has-main-image="true"] body[data-page="user"].user-authenticated {
  background-image: var(--web-cms-main-image) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Khi QTV đã cấu hình ảnh nền bên trong, bỏ toàn bộ lớp galaxy/wave mặc định để ảnh CMS không bị che. */
html[data-web-theme-enabled="true"][data-web-theme-has-main-image="true"] body[data-page="user"].user-authenticated::before,
html[data-web-theme-enabled="true"][data-web-theme-has-main-image="true"] body[data-page="user"].user-authenticated::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

html[data-web-theme-enabled="true"] body.dark-mode[data-page="user"]:not(.user-authenticated),
html[data-web-theme-enabled="true"] body.dark-mode[data-page="user"].user-authenticated {
  background-color: var(--web-cms-dark-background, #111827);
}

html[data-web-theme-enabled="true"][data-web-theme-has-dark-image="true"] body.dark-mode[data-page="user"]:not(.user-authenticated),
html[data-web-theme-enabled="true"][data-web-theme-has-dark-image="true"] body.dark-mode[data-page="user"].user-authenticated {
  background-image: var(--web-cms-dark-image) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html[data-web-theme-enabled="true"] #webUserBrandLogo {
  width: min(100%, var(--web-cms-logo-width));
  height: auto;
  object-fit: contain;
}

.web-theme-banners[hidden] {
  display: none !important;
}

.web-theme-banners {
  width: min(100%, 1180px);
  display: grid;
  gap: 12px;
  margin: 0 auto 18px;
}

.web-theme-banner {
  display: block;
  overflow: hidden;
  border-radius: var(--web-cms-banner-desktop-radius);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(20, 68, 112, .12);
}

.web-theme-banner picture,
.web-theme-banner img {
  display: block;
  width: 100%;
}

.web-theme-banner img {
  height: auto;
  max-height: var(--web-cms-banner-desktop-height);
  object-fit: cover;
}

html[data-web-theme-enabled="true"][data-web-theme-dark-colors="true"] body.dark-mode[data-page="user"] {
  color: var(--web-cms-dark-text);
  background-color: var(--web-cms-dark-background);
}

html[data-web-theme-enabled="true"][data-web-theme-dark-colors="true"] body.dark-mode[data-page="user"] :is(.user-login-card, .user-card-panel, .user-top-card) {
  color: var(--web-cms-dark-text);
  background-color: var(--web-cms-dark-surface);
}

html[data-web-theme-enabled="true"][data-web-theme-custom-font="true"] body[data-page="user"] {
  font-family: var(--web-cms-font-family);
}

html[data-web-theme-enabled="true"][data-web-theme-title-size="true"] body[data-page="user"] .check-bank-title {
  font-size: var(--web-cms-title-size);
}

html[data-web-theme-enabled="true"][data-web-theme-content-size="true"] body[data-page="user"] :is(.user-lookup-form, .result-panel) {
  font-size: var(--web-cms-content-size);
}

@media (max-width: 920px) {
  .web-theme-banners {
    gap: 8px;
    margin-bottom: 12px;
  }

  .web-theme-banner {
    border-radius: var(--web-cms-banner-mobile-radius);
  }

  .web-theme-banner img {
    max-height: var(--web-cms-banner-mobile-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-theme-banner {
    scroll-behavior: auto;
  }
}

/* V24: nền đăng nhập CMS phải áp trực tiếp lên lớp login phủ toàn viewport. */
html[data-web-theme-enabled="true"][data-web-theme-has-login-image="true"] body[data-page="user"] .user-login-screen {
  background-color: var(--web-cms-background) !important;
  background-image: var(--web-cms-login-image) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* Khi QTV có ảnh nền đăng nhập, tắt các lớp trang trí nền mặc định để không che ảnh CMS. */
html[data-web-theme-enabled="true"][data-web-theme-has-login-image="true"] body[data-page="user"] .login-contours,
html[data-web-theme-enabled="true"][data-web-theme-has-login-image="true"] body[data-page="user"] .login-earth,
html[data-web-theme-enabled="true"][data-web-theme-has-login-image="true"] body[data-page="user"] .login-moon,
html[data-web-theme-enabled="true"][data-web-theme-has-login-image="true"] body[data-page="user"] .login-solar {
  display: none !important;
  animation: none !important;
}

/* V35: user profile backgrounds win over QTV theme only after login and only for the matching viewport. */
@media (min-width: 921px) {
  html[data-user-profile-bg-pc="true"] body[data-page="user"].user-authenticated {
    background-image: var(--user-profile-bg-pc) !important;
    background-position: var(--user-profile-bg-pc-position, 50% 50%) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }
  html[data-user-profile-bg-pc="true"] body[data-page="user"].user-authenticated::before,
  html[data-user-profile-bg-pc="true"] body[data-page="user"].user-authenticated::after {
    display: none !important;
    content: none !important;
  }
}
@media (max-width: 920px) {
  html[data-user-profile-bg-mb="true"] body[data-page="user"].user-authenticated {
    background-image: var(--user-profile-bg-mb) !important;
    background-position: var(--user-profile-bg-mb-position, 50% 50%) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }
  html[data-user-profile-bg-mb="true"] body[data-page="user"].user-authenticated::before,
  html[data-user-profile-bg-mb="true"] body[data-page="user"].user-authenticated::after {
    display: none !important;
    content: none !important;
  }
}