/*
 * Kiem Ny - White Blue UI
 * Lop giao dien sang, sach, tong trang - xanh duong. File giu ten cu de tat ca
 * trang dang dung dark-plain.css tu dong nhan giao dien moi.
 */

:root {
  --wg-bg: #f4f8ff;
  --wg-bg-strong: #eaf2ff;
  --wg-surface: #ffffff;
  --wg-surface-soft: #eff5ff;
  --wg-surface-strong: #dce9ff;
  --wg-line: #d7e3f6;
  --wg-line-strong: #b8cdef;
  --wg-text: #203451;
  --wg-heading: #112743;
  --wg-muted: #667a96;
  --wg-primary: #2563eb;
  --wg-primary-hover: #1d4ed8;
  --wg-primary-deep: #1e40af;
  --wg-primary-soft: #e3edff;
  --wg-success: #148451;
  --wg-danger: #cf3f55;
  --wg-warning: #c68516;
  --wg-shadow-sm: 0 8px 24px rgba(31, 88, 180, 0.08);
  --wg-shadow: 0 18px 48px rgba(31, 88, 180, 0.12);
  --wg-shadow-lg: 0 28px 76px rgba(31, 88, 180, 0.16);
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) {
  color-scheme: light;

  /* Bien cua giao dien Love Pro cu duoc doi sang bang mau xanh duong. */
  --love-primary: var(--wg-primary) !important;
  --love-primary-strong: var(--wg-primary-hover) !important;
  --love-primary-deep: var(--wg-primary-deep) !important;
  --love-rose: #60a5fa !important;
  --love-blush: var(--wg-surface-soft) !important;
  --love-blush-2: var(--wg-surface-strong) !important;
  --love-plum: var(--wg-heading) !important;
  --love-muted: var(--wg-muted) !important;
  --love-gold: #d69a2d !important;
  --love-green: var(--wg-primary) !important;
  --love-blue: #357ac7 !important;
  --love-red: var(--wg-danger) !important;
  --love-white: #ffffff !important;
  --love-card: rgba(255, 255, 255, 0.94) !important;
  --love-card-solid: #ffffff !important;
  --love-line: rgba(37, 99, 235, 0.16) !important;
  --love-line-strong: rgba(37, 99, 235, 0.3) !important;
  --love-shadow-sm: var(--wg-shadow-sm) !important;
  --love-shadow: var(--wg-shadow) !important;
  --love-shadow-lg: var(--wg-shadow-lg) !important;

  /* Bien rieng cua trang dang nhap cu. */
  --rose-50: #f3f7ff !important;
  --rose-100: #e9f1ff !important;
  --rose-200: #d3e2ff !important;
  --rose-400: #60a5fa !important;
  --rose-500: var(--wg-primary) !important;
  --rose-600: var(--wg-primary-hover) !important;
  --rose-700: var(--wg-primary-deep) !important;
  --plum-900: var(--wg-heading) !important;
  --plum-700: #3e587b !important;
  --plum-500: var(--wg-muted) !important;
  --line: rgba(37, 99, 235, 0.17) !important;
  --success: var(--wg-success) !important;
  --danger: var(--wg-danger) !important;
  --white: #ffffff !important;
  --shadow: var(--wg-shadow-lg) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3),
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body {
  min-height: 100%;
  color: var(--wg-text) !important;
  background:
    radial-gradient(circle at 8% 7%, rgba(96, 165, 250, 0.19), transparent 26rem),
    radial-gradient(circle at 94% 86%, rgba(37, 99, 235, 0.11), transparent 32rem),
    linear-gradient(145deg, #f8fbff 0%, var(--wg-bg) 52%, #ffffff 100%) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body {
  color-scheme: light;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body *,
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body *::before,
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body *::after {
  border-color: var(--wg-line) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body * {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body *::before,
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body *::after {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body::before {
  opacity: 0.48 !important;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body::after {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.11), transparent 68%) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .falling-hearts,
  #fallingHearts,
  .gm-float-heart,
  .gm-magic-orb,
  .daily-coin-confetti,
  #particles-js,
  .daily-coin-glow,
  [class*="coin-orbit"],
  .gun2-ambient
) {
  display: none !important;
}

/* Be mat trang va cac khoi noi dung. */
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  header,
  nav,
  .navbar,
  footer,
  .auth-card,
  .panel,
  [class*="card"],
  [class*="panel"],
  [class*="modal-content"],
  [class*="modal-box"],
  [class*="modal-dialog"],
  [class*="popup"],
  [class*="sheet"],
  [class*="toast"],
  [class*="box"],
  [class*="tile"],
  [class*="item"],
  [class*="menu"],
  [class*="section"],
  [class*="wrap"] > [class*="inner"],
  .dropdown-menu,
  .list-group-item,
  .swal2-popup,
  table
) {
  color: var(--wg-text) !important;
  background-color: var(--wg-surface) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .auth-card,
  .card,
  [class$="-card"],
  [class*="-card "],
  [class*="panel"],
  [class*="modal-content"],
  [class*="modal-box"],
  .dropdown-menu,
  .swal2-popup
) {
  border: 1px solid var(--wg-line) !important;
  box-shadow: var(--wg-shadow-sm) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  [class*="hero"],
  [class*="banner"],
  [class*="summary"],
  [class*="welcome"]
) {
  background-color: var(--wg-surface-soft) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--wg-heading) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body a {
  color: var(--wg-primary-deep) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body a:hover {
  color: var(--wg-primary-hover) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .text-muted,
  [class*="muted"],
  [class*="hint"],
  [class*="desc"],
  [class*="note"],
  [class*="subtitle"],
  small
) {
  color: var(--wg-muted) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(i, svg, [class*="icon"], [class*="fa-"]) {
  color: var(--wg-primary) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .feature-icon,
  .tool-hero-icon,
  .gm-control-icon,
  .quick-action-icon,
  .phone-alert-benefit i
) {
  color: var(--wg-primary-deep) !important;
  border-color: var(--wg-line) !important;
  background-color: var(--wg-primary-soft) !important;
}

/* Thanh dieu huong va menu. */
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  nav,
  .navbar,
  .topbar,
  .user-page-nav,
  .gun2-global-bar
) {
  color: var(--wg-text) !important;
  border-bottom: 1px solid var(--wg-line) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 30px rgba(31, 88, 180, 0.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .navbar-toggler-icon {
  position: relative;
  width: 28px;
  height: 24px;
  background: none !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .navbar-toggler-icon::before {
  content: "\2630";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--wg-primary-deep) !important;
  font-size: 24px;
  line-height: 1;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  #navLinks,
  .nav-links,
  .drawer,
  .drawer-panel,
  .side-menu,
  .sidebar
) {
  color: var(--wg-text) !important;
  background-color: var(--wg-surface) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .drawer-head,
  .drawer-group-title,
  .drawer-section-title
) {
  color: var(--wg-heading) !important;
  background-color: var(--wg-surface-soft) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .drawer-brand,
  .drawer-close,
  .drawer-quick-action,
  .drawer-secondary,
  .drawer-menu-link,
  .drawer-menu-button,
  .feature-box,
  .menu-toggle,
  .sodu-display
) {
  color: var(--wg-text) !important;
  border: 1px solid var(--wg-line) !important;
  background-color: var(--wg-surface) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .drawer-quick-action,
  .drawer-secondary,
  .drawer-menu-link,
  .drawer-menu-button,
  .feature-box
):hover {
  border-color: var(--wg-line-strong) !important;
  background-color: var(--wg-surface-soft) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .nav-link.active,
  .tab.active,
  .tab.is-active,
  [role="tab"][aria-selected="true"],
  .filter-button.is-active,
  .gm-filter-button.is-active
) {
  color: var(--wg-primary-deep) !important;
  border-color: var(--wg-line-strong) !important;
  background-color: var(--wg-primary-soft) !important;
}

/* Form. */
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(input, select, textarea, option, .input-box, .control) {
  color: var(--wg-heading) !important;
  border-color: var(--wg-line) !important;
  background-color: var(--wg-surface) !important;
  caret-color: var(--wg-primary) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(input, select, textarea, .input-box, .control):focus,
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .input-box:focus-within {
  outline: 0 !important;
  border-color: var(--wg-primary) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body ::placeholder {
  color: #91a1b8 !important;
  -webkit-text-fill-color: #91a1b8 !important;
  opacity: 1;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body label {
  color: #38516f !important;
}

/* Nut bam. */
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  button,
  .btn,
  [class*="btn"],
  [role="button"],
  input[type="submit"],
  input[type="button"]
) {
  color: var(--wg-text) !important;
  border: 1px solid var(--wg-line) !important;
  background-color: var(--wg-surface) !important;
  box-shadow: 0 5px 14px rgba(31, 88, 180, 0.06) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  button,
  .btn,
  [class*="btn"],
  [role="button"]
):hover {
  border-color: var(--wg-line-strong) !important;
  background-color: var(--wg-surface-soft) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .btn-primary,
  .btn-success,
  [class*="btn-primary"],
  button[class*="submit"],
  a[class*="submit"],
  button[class*="confirm"],
  a[class*="confirm"],
  button[type="submit"],
  input[type="submit"],
  .login-btn,
  .gm-submit-button,
  .swal2-confirm
) {
  color: #ffffff !important;
  border-color: var(--wg-primary) !important;
  background: linear-gradient(135deg, #3b82f6 0%, var(--wg-primary) 48%, var(--wg-primary-deep) 100%) !important;
  box-shadow: 0 12px 25px rgba(30, 78, 180, 0.22) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .btn-primary,
  .btn-success,
  [class*="btn-primary"],
  button[class*="submit"],
  a[class*="submit"],
  button[class*="confirm"],
  a[class*="confirm"],
  button[type="submit"],
  input[type="submit"],
  .login-btn,
  .gm-submit-button,
  .swal2-confirm
) * {
  color: #ffffff !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .btn-primary,
  .btn-success,
  [class*="btn-primary"],
  button[class*="submit"],
  a[class*="submit"],
  button[class*="confirm"],
  a[class*="confirm"],
  button[type="submit"],
  .login-btn,
  .gm-submit-button,
  .swal2-confirm
):hover {
  border-color: var(--wg-primary-hover) !important;
  background: linear-gradient(135deg, var(--wg-primary) 0%, var(--wg-primary-hover) 100%) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .btn-danger,
  [class*="btn-danger"],
  button[class*="delete"],
  a[class*="delete"],
  .swal2-cancel,
  .swal2-deny
) {
  color: #ffffff !important;
  border-color: #c8384f !important;
  background-color: var(--wg-danger) !important;
}

/* Badge, bang du lieu va thanh tien do. */
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  [class*="badge"],
  [class*="pill"],
  [class*="tag"],
  [class*="chip"],
  [class*="tab"],
  code,
  kbd,
  pre
) {
  color: var(--wg-primary-deep) !important;
  border-color: var(--wg-line) !important;
  background-color: var(--wg-surface-soft) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body table {
  border-color: var(--wg-line) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(thead, th) {
  color: var(--wg-heading) !important;
  background-color: var(--wg-surface-soft) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body tbody tr:hover {
  background-color: #f7faff !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  [class*="progress-bar"],
  [class*="fill"],
  [class*="bar-inner"],
  [class*="bar-value"]
) {
  background-color: var(--wg-primary) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  [class*="progress"]:not([class*="progress-bar"]),
  [class*="track"]
) {
  background-color: var(--wg-surface-strong) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .text-danger,
  [class*="danger"]:not([class*="btn"]),
  [class*="error"],
  [class*="fail"],
  .invalid-feedback
) {
  color: var(--wg-danger) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .text-success,
  [class*="success"]:not([class*="btn"])
) {
  color: var(--wg-success) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .text-warning,
  [class*="warn"]
) {
  color: var(--wg-warning) !important;
}

/* Dang nhap: giu bo cuc cao cap, doi toan bo phan nhan dien sang xanh. */
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .auth-card {
  border-color: rgba(151, 183, 235, 0.72) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--wg-shadow-lg) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .visual {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 83% 14%, rgba(191, 219, 254, 0.3), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(231, 240, 255, 0.2), transparent 31%),
    linear-gradient(155deg, #16336f 0%, #1d4ed8 48%, #3b82f6 100%) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .visual :is(h1, p, span, a, i, svg) {
  color: #ffffff !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .visual h1 span,
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .visual-kicker {
  color: #dbeafe !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .visual-copy,
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .server-live {
  color: rgba(255, 255, 255, 0.82) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .brand-chip {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .brand-mark {
  color: var(--wg-primary-deep) !important;
  background-color: #ffffff !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(.panel, .google-btn) {
  background-color: #ffffff !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .field-icon {
  color: var(--wg-primary) !important;
  background-color: var(--wg-surface-soft) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .status.success {
  color: var(--wg-success) !important;
  border-color: #bde3cc !important;
  background-color: #edf9f2 !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .status.error {
  color: var(--wg-danger) !important;
  border-color: #f0c8cf !important;
  background-color: #fff3f5 !important;
}

/* Popup canh bao tren dashboard. */
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .phone-alert,
  .security-alert,
  .inventory-backup-alert,
  .nav-backdrop,
  [class*="overlay"],
  [class*="backdrop"],
  .swal2-container,
  .modal.show
) {
  background-color: rgba(13, 30, 58, 0.58) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .modal:not(.show) {
  background-color: transparent !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .phone-alert-inner,
  .security-alert-inner,
  .inventory-backup-alert-inner
) {
  color: var(--wg-text) !important;
  border-color: #cfddf3 !important;
  background-color: #ffffff !important;
  box-shadow: var(--wg-shadow-lg) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .phone-alert-hero,
  .security-alert-hero,
  .inventory-backup-alert-hero
) {
  color: #ffffff !important;
  background: linear-gradient(135deg, #173b83 0%, #2563eb 54%, #60a5fa 100%) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .phone-alert-hero,
  .security-alert-hero,
  .inventory-backup-alert-hero
) * {
  color: #ffffff !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body :is(
  .phone-alert-status,
  .phone-alert-benefit,
  .security-alert-benefit,
  .inventory-backup-alert-benefit
) {
  color: var(--wg-primary-deep) !important;
  border-color: var(--wg-line) !important;
  background-color: var(--wg-surface-soft) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .phone-alert-btn:not(.is-secondary) {
  color: #ffffff !important;
  border-color: var(--wg-primary) !important;
  background: linear-gradient(135deg, #3b82f6, var(--wg-primary-hover)) !important;
  box-shadow: 0 12px 25px rgba(30, 78, 180, 0.22) !important;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body hr {
  border-color: var(--wg-line) !important;
  opacity: 1;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body ::selection {
  color: #ffffff;
  background: var(--wg-primary);
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body::-webkit-scrollbar-track {
  background: var(--wg-bg);
}

html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body::-webkit-scrollbar-thumb {
  border: 2px solid var(--wg-bg);
  border-radius: 999px;
  background: #91add8;
}

/* Giu nguyen cach hien thi footer da ap dung truoc do o dashboard. */
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body.gun2-dashboard footer,
html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body footer:has(.footer-content) {
  display: none !important;
}

@media (max-width: 520px) {
  html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body {
    background: var(--wg-bg) !important;
  }

  html:not(.dp-game):not(#dp1):not(#dp2):not(#dp3) body .panel {
    background-color: #ffffff !important;
  }
}