:root {
  --ink: #172033;
  --muted: #687086;
  --line: #e5e7eb;
  --panel: rgba(255, 255, 255, 0.96);
  --brand: #b6222a;
  --brand2: #78151b;
  --gold: #d8a938;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(23, 32, 51, 0.14);
}
/* 3.0.15 - rendering nhe cho toan bo form */
.modal-backdrop.show {
  backdrop-filter: none !important;
}
.portal-global-loading {
  backdrop-filter: none !important;
}
.portal-content,
.right-home {
  contain: paint;
}
.form-control,
.form-select,
button,
.btn {
  touch-action: manipulation;
}
.modal.fade .modal-dialog {
  transition-duration: 0.14s !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  .modal.fade .modal-dialog,
  .form-control,
  .form-select,
  button,
  .btn {
    transition: none !important;
  }
}
html {
  scroll-behavior: smooth;
}
body {
  padding-top: 82px;
  color: var(--ink);
  background-color: #eef1f5;
  font-family: Barlow, "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}
.topbar {
  height: 70px;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
  z-index: 1030;
}
.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 4vw, 64px);
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
.brand:hover {
  color: #fff;
}
.brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand b {
  font-size: 17px;
  letter-spacing: 0.04em;
}
.brand small {
  font-size: 11px;
  color: #bac2d2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 5px;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.account-summary {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.account-summary span {
  display: flex;
  flex-direction: column;
}
.account-summary small {
  font-size: 10px;
  color: #9ba6ba;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.account-summary b {
  font-size: 13px;
  color: #fff;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.language-switch {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #657087;
  font-size: 12px;
}
.language-switch a {
  color: #aeb7c8;
  text-decoration: none;
  font-weight: 700;
}
.language-switch a.active,
.language-switch a:hover {
  color: #fff;
}
.top-link {
  color: #d8deea;
  text-decoration: none;
  font-weight: 600;
}
.btn-login {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  padding: 10px 18px;
  border-radius: 10px;
}
.container {
  max-width: 1240px;
}
.home-tab {
  min-height: 620px;
  margin-top: 28px;
}
.home-tab .left-home,
.home-tab .right-home {
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
}
.home-tab .left-home {
  border-radius: var(--radius) 0 0 var(--radius) !important;
  overflow: hidden;
}
.home-tab .right-home {
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  overflow: hidden;
}
.info-left-side {
  padding: 18px !important;
  border-bottom: 1px solid var(--line);
}
.ul-custom-home-left li {
  padding: 0 !important;
  margin: 4px 10px !important;
  border: 0 !important;
}
.nav-link-custom a {
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 15px !important;
  color: #3d4659 !important;
}
.nav-link-custom a:hover,
.nav-link-custom a.active {
  background: #f4e7e8;
  color: var(--brand) !important;
  font-weight: 700;
}
.nav-link-custom a i {
  width: 22px;
  text-align: center;
}
.right-home .left-title-home {
  padding: 24px 26px 16px !important;
  border-bottom: 1px solid var(--line);
}
.right-home .left-title-home h4 {
  color: var(--ink) !important;
  font-size: 20px;
  letter-spacing: 0.01em;
  text-transform: none !important;
  padding: 0 !important;
}
.right-home .left-title-home h4:before {
  display: none;
}
.form-right-home {
  padding: 26px !important;
}
.form-control,
.form-select,
.form-custom {
  min-height: 44px;
  border-color: #dce0e7;
  border-radius: 10px;
}
.form-control:focus,
.form-select:focus {
  border-color: #bf7377;
  box-shadow: 0 0 0 4px rgba(182, 34, 42, 0.1);
}
.btn-primary,
.btn-cus {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  border: 0 !important;
  border-radius: 10px !important;
}
.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.07);
}
.table {
  vertical-align: middle;
}
.table thead th {
  background: #f5f6f8;
  color: #4c5568;
  border-bottom: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-new,
.badge-new2 {
  animation: none !important;
}
.loading-form {
  border-radius: inherit;
}
.loading-form div > i {
  font-size: 42px !important;
}
@media (max-width: 991px) {
  body {
    padding-top: 72px;
  }
  .topbar {
    height: 62px;
  }
  .brand span {
    display: none;
  }
  .account-summary span:first-child,
  .account-summary span:nth-child(2) {
    display: none;
  }
  .home-tab .left-home,
  .home-tab .right-home {
    border-radius: 14px !important;
  }
  .topbar-inner {
    padding: 0 14px;
  }
  .topbar-actions {
    gap: 10px;
  }
  .account-summary {
    padding: 6px 10px;
  }
  .top-link {
    display: none;
  }
}
@media (max-width: 575px) {
  .brand img {
    width: 42px;
    height: 42px;
  }
  .account-summary {
    display: none;
  }
  .home-tab {
    margin-top: 12px;
  }
  .form-right-home {
    padding: 18px !important;
  }
  .right-home .left-title-home {
    padding: 20px 18px 14px !important;
  }
  .language-switch {
    font-size: 11px;
  }
}

.character-picker {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid #e3e6ec;
  border-radius: 14px;
  background: #f8f9fb;
}
.character-picker-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.character-picker-title span {
  font-size: 14px;
  font-weight: 800;
  color: #30384a;
}
.character-picker-title small {
  font-size: 12px;
  font-weight: 500;
  color: #7a8395;
}
.character-picker-value {
  display: none !important;
}
.character-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
.character-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  padding: 11px 13px !important;
  margin: 0 !important;
  border: 1px solid #dfe3ea !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #20283a !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s !important;
}
.character-card:hover {
  border-color: #bc6a70 !important;
  background: #fffafa !important;
  box-shadow: 0 7px 18px rgba(23, 32, 51, 0.08) !important;
  transform: translateY(-1px);
}
.character-card.selected {
  border-color: var(--brand) !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(182, 34, 42, 0.1) !important;
}
.character-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b6222a, #78151b);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
}
.character-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.character-details strong {
  font-size: 16px;
  font-weight: 800;
  color: #20283a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}
.character-details > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  color: #747d8f;
  font-size: 13px;
  text-transform: none;
}
.character-details em {
  font-style: normal;
  font-weight: 800;
  color: var(--brand);
}
.character-details b {
  font-weight: 600;
  color: #687185;
}
.character-details i {
  font-style: normal;
  color: #b4bac5;
}
.character-check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  border: 1px solid #d7dce4;
  border-radius: 50%;
  color: transparent;
  font-size: 13px;
  font-weight: 800;
}
.character-card.selected .character-check {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.character-picker-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #efc6c9;
  border-radius: 11px;
  background: #fff4f4;
  color: #8f1d24;
  font-size: 14px;
  font-weight: 700;
}
.character-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #c52d35;
  box-shadow: 0 0 0 4px rgba(197, 45, 53, 0.12);
}
@media (max-width: 575px) {
  .character-picker {
    padding: 11px;
  }
  .character-picker-title small {
    display: none;
  }
  .character-card {
    min-height: 62px !important;
    padding: 9px 11px !important;
  }
  .character-avatar {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    font-size: 16px;
  }
  .character-details strong {
    font-size: 15px;
  }
  .character-details > span {
    font-size: 12px;
  }
}

/* Portal 2.1 - giao dien sang, phan cap ro rang */
:root {
  --portal-primary: #2563eb;
  --portal-primary-dark: #1747b0;
  --portal-accent: #f97352;
  --portal-green: #16a36a;
  --portal-bg: #f3f7fc;
  --portal-card: #fff;
  --portal-ink: #172033;
  --portal-muted: #6c768a;
  --portal-border: #e3e9f2;
  --portal-shadow: 0 16px 42px rgba(41, 58, 85, 0.1);
}
body {
  padding-top: 80px !important;
  color: var(--portal-ink) !important;
  background:
    radial-gradient(circle at 8% 2%, rgba(37, 99, 235, 0.09), transparent 25%),
    radial-gradient(
      circle at 92% 20%,
      rgba(249, 115, 82, 0.08),
      transparent 22%
    ),
    var(--portal-bg) !important;
  font-family: Barlow, "Segoe UI", Arial, sans-serif !important;
}
.topbar {
  height: 68px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e5ebf3 !important;
  box-shadow: 0 6px 22px rgba(45, 62, 88, 0.08) !important;
}
.brand {
  color: var(--portal-ink) !important;
}
.brand:hover {
  color: var(--portal-primary) !important;
}
.brand small {
  color: #7c879a !important;
}
.topbar-actions {
  gap: 13px !important;
}
.account-summary {
  gap: 18px !important;
  padding: 8px 14px !important;
  border: 1px solid #e1e7f0 !important;
  background: #f7f9fc !important;
}
.account-summary small {
  color: #7b8598 !important;
}
.account-summary b {
  color: #253047 !important;
}
.language-switch {
  padding: 7px 10px;
  border-radius: 9px;
  background: #f1f4f8;
}
.language-switch a {
  color: #8490a3 !important;
}
.language-switch a.active,
.language-switch a:hover {
  color: var(--portal-primary) !important;
}
.top-link {
  color: #4d5a70 !important;
}
.btn-login {
  background: linear-gradient(
    135deg,
    var(--portal-primary),
    var(--portal-primary-dark)
  ) !important;
}
.portal-container {
  max-width: 1320px !important;
}
.portal-layout {
  align-items: stretch;
  min-height: 680px;
  margin-top: 24px !important;
}
.portal-sidebar,
.portal-content,
.home-tab .left-home,
.home-tab .right-home {
  border: 1px solid var(--portal-border) !important;
  background: var(--portal-card) !important;
  box-shadow: var(--portal-shadow) !important;
}
.portal-sidebar {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border-radius: 18px 0 0 18px !important;
  overflow: hidden;
}
.portal-content {
  padding: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  overflow: hidden;
}
.portal-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px;
  border-bottom: 1px solid var(--portal-border);
  background: linear-gradient(145deg, #fff, #f6f9fe);
}
.portal-profile-avatar {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--portal-primary), #6c8ff2);
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.24);
}
.portal-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.portal-profile-text strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.role-badge {
  width: max-content;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.role-member {
  color: #3660a6;
  background: #eaf1ff;
}
.role-mod {
  color: #936012;
  background: #fff2d7;
}
.role-admin {
  color: #b43b27;
  background: #ffebe6;
}
.toggle-button-menu {
  display: none !important;
  padding: 5px !important;
  background: transparent !important;
  color: var(--portal-primary) !important;
}
.portal-navigation {
  padding: 13px 10px 8px;
  overflow-y: auto;
  flex: 1;
}
.portal-nav-section {
  padding: 7px 0 10px;
  border-bottom: 1px solid #eef2f7;
}
.portal-nav-section:last-child {
  border-bottom: 0;
}
.portal-nav-section h6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 8px 12px 5px;
  color: #929bad;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.portal-nav-section h6 span {
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 8px;
  letter-spacing: 0.06em;
}
.portal-nav-staff h6 span {
  color: #976313;
  background: #fff0cc;
}
.portal-nav-admin h6 span {
  color: #ad3927;
  background: #ffe5df;
}
.portal-nav-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.portal-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin: 2px 0;
  padding: 8px 11px;
  border-radius: 10px;
  color: #4a566c;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  transition: 0.18s;
}
.portal-nav-link:hover {
  color: var(--portal-primary);
  background: #f1f6ff;
  transform: translateX(2px);
}
.portal-nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--portal-primary), #4779e5);
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.2);
}
.portal-nav-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  border-radius: 7px;
  background: #edf2fa;
  color: #60708b;
  font-size: 16px;
}
.portal-nav-link.active .portal-nav-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.17);
}
.portal-nav-link small {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 10px;
  color: #b3432e;
  background: #ffe7e1;
  font-size: 9px;
  font-weight: 800;
}
.portal-logout {
  padding: 13px;
  border-top: 1px solid var(--portal-border);
}
.portal-logout a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  color: #c74436;
  background: #fff1ef;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}
.portal-logout a:hover {
  background: #ffe5e1;
}
.account-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 31px 34px 25px;
  background: linear-gradient(125deg, #f8fbff, #fff);
}
.account-hero .eyebrow {
  color: var(--portal-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.account-hero h1 {
  margin: 5px 0 4px;
  color: #15213a;
  font-size: 26px;
  font-weight: 800;
}
.account-hero p {
  margin: 0;
  color: var(--portal-muted);
  font-size: 14px;
}
.account-server {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 205px;
  padding: 11px 14px;
  border: 1px solid #dfe7f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(45, 66, 97, 0.06);
}
.account-server > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #19ad70;
  box-shadow: 0 0 0 4px rgba(25, 173, 112, 0.12);
}
.account-server div {
  display: flex;
  flex-direction: column;
}
.account-server small {
  color: #8a94a6;
  font-size: 10px;
}
.account-server strong {
  font-size: 12px;
  color: #344057;
}
.account-balance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 34px;
  border: 1px solid var(--portal-border);
  border-radius: 13px;
  overflow: hidden;
  background: var(--portal-border);
}
.account-balance-grid > div {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: #fff;
}
.account-balance-grid small {
  color: #8a94a5;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.account-balance-grid strong {
  margin-top: 3px;
  color: #23304a;
  font-size: 16px;
}
.account-balance-grid > div:nth-child(3) strong {
  color: var(--portal-primary);
}
.account-balance-grid > div:nth-child(4) strong {
  color: var(--portal-accent);
}
.account-panel {
  margin: 25px 34px 34px;
  border: 1px solid var(--portal-border);
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
}
.account-tabs {
  display: flex;
  gap: 3px;
  padding: 8px;
  border-bottom: 1px solid var(--portal-border);
  background: #f8fafc;
}
.account-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 8px 15px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #667187 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.account-tab:hover {
  color: var(--portal-primary) !important;
  background: #edf3ff !important;
}
.account-tab.active {
  color: #fff !important;
  background: var(--portal-primary) !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.18) !important;
}
.account-tab-pane {
  display: none;
  padding: 27px;
}
.account-tab-pane.active {
  display: block;
}
.account-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 23px;
}
.account-section-heading > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 12px;
  background: #edf3ff;
  color: var(--portal-primary);
  font-size: 21px;
}
.account-section-heading h2 {
  margin: 0;
  color: #1e2940;
  font-size: 18px;
  font-weight: 800;
}
.account-section-heading p {
  margin: 3px 0 0;
  color: #7d8799;
  font-size: 12px;
}
.status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 20px;
  color: #147849;
  background: #e9f8f1;
  font-size: 11px;
  font-weight: 800;
}
.status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18a96d;
}
.account-info-grid,
.account-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.account-info-item {
  display: flex;
  flex-direction: column;
  padding: 14px 15px;
  border: 1px solid #e5eaf2;
  border-radius: 11px;
  background: #fafbfd;
}
.account-info-item.full,
.account-form .full {
  grid-column: 1/-1;
}
.account-info-item small {
  color: #8a94a6;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.account-info-item strong {
  margin-top: 4px;
  color: #29354c;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.account-security-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #dbe8ff;
  border-radius: 11px;
  color: #315caa;
  background: #f3f7ff;
}
.account-security-note > i {
  font-size: 22px;
}
.account-security-note div {
  display: flex;
  flex-direction: column;
}
.account-security-note strong {
  font-size: 12px;
}
.account-security-note span {
  margin-top: 2px;
  color: #657796;
  font-size: 11px;
}
.field-group {
  display: flex;
  flex-direction: column;
}
.field-group label {
  margin-bottom: 6px;
  color: #465269;
  font-size: 12px;
  font-weight: 800;
}
.account-form .form-control {
  height: 46px !important;
  border: 1px solid #dce3ed !important;
  border-radius: 10px !important;
  background: #fbfcfe !important;
  color: #23304a !important;
  font-size: 14px;
}
.account-form .form-control:focus {
  border-color: #6d96ef !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09) !important;
}
.otp-row {
  display: flex;
  gap: 9px;
}
.otp-row .form-control {
  flex: 1;
}
.account-primary-btn,
.account-secondary-btn {
  min-height: 43px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: none !important;
}
.account-primary-btn {
  padding: 10px 18px !important;
  color: #fff !important;
  background: linear-gradient(
    135deg,
    var(--portal-primary),
    var(--portal-primary-dark)
  ) !important;
  box-shadow: 0 7px 15px rgba(37, 99, 235, 0.2) !important;
}
.account-secondary-btn {
  white-space: nowrap;
  padding: 9px 15px !important;
  color: var(--portal-primary) !important;
  border: 1px solid #cddcff !important;
  background: #edf4ff !important;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}
.account-form label.error {
  margin: 5px 0 0;
  color: #d1463a;
  font-size: 11px;
  font-weight: 600;
}
.right-home:not(.portal-content) {
  background: #fff !important;
}
.right-home:not(.portal-content) .left-title-home {
  padding: 23px 27px 16px !important;
}
.right-home:not(.portal-content) .left-title-home h4 {
  font-size: 19px !important;
  font-weight: 800 !important;
}
.right-home:not(.portal-content) .form-right-home {
  padding: 22px 27px 28px !important;
}
@media (max-width: 991px) {
  body {
    padding-top: 71px !important;
  }
  .topbar {
    height: 61px !important;
  }
  .portal-layout {
    margin-top: 14px !important;
  }
  .account-summary span:first-child,
  .account-summary span:nth-child(2) {
    display: none !important;
  }
  .account-hero {
    padding: 25px 24px 20px;
  }
  .account-balance-grid,
  .account-panel {
    margin-left: 24px;
    margin-right: 24px;
  }
}
@media (max-width: 767px) {
  .portal-sidebar,
  .portal-content {
    border-radius: 15px !important;
  }
  .portal-sidebar {
    height: auto;
  }
  .toggle-button-menu {
    display: block !important;
  }
  .portal-navigation {
    display: none;
    max-height: 65vh;
  }
  .portal-profile {
    padding: 13px 15px;
  }
  .portal-logout {
    display: none;
  }
  .account-hero {
    align-items: flex-start;
    padding: 22px 18px;
    flex-direction: column;
  }
  .account-server {
    width: 100%;
  }
  .account-balance-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 18px;
  }
  .account-panel {
    margin: 18px;
  }
  .account-tabs {
    overflow-x: auto;
  }
  .account-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .account-tab-pane {
    padding: 20px;
  }
  .account-info-grid,
  .account-form {
    grid-template-columns: 1fr;
  }
  .account-info-item.full,
  .account-form .full {
    grid-column: auto;
  }
  .account-section-heading {
    align-items: flex-start;
  }
  .status-pill {
    display: none;
  }
}
@media (max-width: 575px) {
  .topbar-actions .account-summary {
    display: none !important;
  }
  .account-hero h1 {
    font-size: 22px;
  }
  .account-balance-grid {
    grid-template-columns: 1fr 1fr;
  }
  .account-balance-grid > div {
    padding: 11px;
  }
  .account-panel {
    margin: 15px 12px;
  }
  .account-tabs {
    padding: 6px;
  }
  .account-tab-pane {
    padding: 17px 14px;
  }
  .account-tab {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
  .account-tab i {
    display: none;
  }
  .otp-row {
    flex-direction: column;
  }
  .account-secondary-btn {
    width: 100%;
  }
  .form-actions .account-primary-btn {
    width: 100%;
  }
}

/* Portal 2.2 - xanh duong lam mau chu dao */
.portal-guest {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 14% 20%,
      rgba(78, 144, 255, 0.34),
      transparent 26%
    ),
    radial-gradient(
      circle at 88% 75%,
      rgba(15, 65, 145, 0.35),
      transparent 30%
    ),
    linear-gradient(140deg, #0b2145 0%, #123d7c 48%, #1765c7 100%) !important;
}
.portal-guest:before,
.portal-guest:after {
  content: "";
  position: fixed;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: rotate(35deg);
  z-index: 0;
}
.portal-guest:before {
  width: 360px;
  height: 360px;
  left: -150px;
  bottom: -150px;
  border-radius: 78px;
}
.portal-guest:after {
  width: 260px;
  height: 260px;
  right: -100px;
  top: 130px;
  border-radius: 65px;
}
.portal-guest .topbar {
  background: rgba(8, 29, 63, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 9px 28px rgba(0, 0, 0, 0.18) !important;
}
.portal-guest .brand {
  color: #fff !important;
}
.portal-guest .brand small {
  color: #a9c5ec !important;
}
.portal-guest .language-switch {
  background: rgba(255, 255, 255, 0.1) !important;
}
.portal-guest .language-switch a {
  color: #b9cbe4 !important;
}
.portal-guest .language-switch a.active {
  color: #fff !important;
}
.portal-guest .top-link {
  color: #d9e7fa !important;
}
.portal-guest .btn-login {
  background: #2674e8 !important;
  box-shadow: 0 7px 18px rgba(20, 93, 207, 0.35);
}
.portal-guest .portal-container {
  position: relative;
  z-index: 1;
}
.portal-guest .portal-layout {
  min-height: auto !important;
  margin-top: 0 !important;
  padding: 42px 0 58px;
  align-items: flex-start;
}
.auth-column {
  margin: auto;
}
.auth-card {
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px !important;
  background: #fff !important;
  overflow: hidden;
  box-shadow: 0 25px 65px rgba(3, 18, 43, 0.3) !important;
}
.auth-heading {
  position: relative;
  padding: 24px 30px 21px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #1758d1, #0d3f91);
  overflow: hidden;
}
.auth-heading:after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -65px;
  top: -90px;
  border: 28px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.auth-mark {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.auth-heading > span {
  display: block;
  color: #bdd5ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.auth-heading h1 {
  margin: 4px 0 2px;
  font-size: 24px;
  font-weight: 800;
}
.auth-heading p {
  margin: 0;
  color: #d9e7ff;
  font-size: 12px;
}
.auth-card-body {
  padding: 23px 30px 25px !important;
}
.auth-form label {
  margin-bottom: 6px;
  color: #34445d;
  font-size: 12px;
  font-weight: 800;
}
.auth-form label small {
  color: #8490a3;
  font-weight: 600;
}
.auth-form .form-control,
.auth-form .form-select {
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #d8e1ee !important;
  border-radius: 10px !important;
  background: #f7f9fc !important;
  color: #1d2b42 !important;
  font-size: 13px;
}
.auth-form .form-control:focus,
.auth-form .form-select:focus {
  border-color: #4380e8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(38, 116, 232, 0.11) !important;
}
.auth-form .form-select:disabled {
  color: #46556d;
  opacity: 1;
}
.auth-password-row {
  position: relative;
}
.auth-password-row .form-control {
  padding-right: 48px;
}
.auth-password-toggle {
  position: absolute !important;
  right: 5px !important;
  top: 5px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #3768b5 !important;
  background: #e9f1ff !important;
  font-size: 15px !important;
  text-transform: none !important;
}
.auth-form-links {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 13px;
}
.auth-form-links a,
.auth-switch a {
  color: #1d62cf;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}
.auth-form-links a:hover,
.auth-switch a:hover {
  text-decoration: underline;
}
.auth-submit {
  width: 100% !important;
  min-height: 45px !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2674e8, #174fb4) !important;
  box-shadow: 0 9px 20px rgba(30, 95, 202, 0.23) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}
.auth-submit:hover {
  background: linear-gradient(135deg, #1e68d9, #103f96) !important;
  transform: translateY(-1px);
}
.auth-submit:disabled {
  opacity: 0.65;
  transform: none;
}
.auth-switch {
  margin-top: 17px;
  text-align: center;
  color: #758096;
  font-size: 12px;
}
.auth-form label.error {
  display: block;
  margin: 5px 0 0;
  color: #d14343;
  font-size: 10px;
  font-weight: 600;
}
.auth-register-column {
  margin-top: -22px;
}
.auth-register-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 13px;
}
.auth-register-form > .form-group:first-child,
.auth-register-form > .auth-captcha,
.auth-register-form > .auth-submit,
.auth-register-form > .auth-switch {
  grid-column: 1/-1;
}
.auth-register-form .mb-3 {
  margin-bottom: 13px !important;
}
.auth-register-form .auth-captcha {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}
.auth-register-form .auth-switch {
  margin-top: 14px;
}
.auth-register-form .g-recaptcha {
  transform: scale(0.91);
  transform-origin: center;
}
.portal-guest .loading-form {
  background: rgba(10, 35, 75, 0.82) !important;
}
.portal-authenticated {
  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(53, 112, 208, 0.12),
      transparent 28%
    ),
    #dfe8f5 !important;
}
.portal-authenticated .topbar {
  background: linear-gradient(90deg, #0b2852, #124b92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(8, 35, 76, 0.2) !important;
}
.portal-authenticated .brand {
  color: #fff !important;
}
.portal-authenticated .brand small {
  color: #a9c5e8 !important;
}
.portal-authenticated .account-summary {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}
.portal-authenticated .account-summary small {
  color: #aac2e3 !important;
}
.portal-authenticated .account-summary b {
  color: #fff !important;
}
.portal-authenticated .language-switch {
  background: rgba(255, 255, 255, 0.1) !important;
}
.portal-authenticated .language-switch a {
  color: #b8cbea !important;
}
.portal-authenticated .language-switch a.active {
  color: #fff !important;
}
.top-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}
.top-logout:hover {
  background: #e95d4f;
  color: #fff !important;
}
.top-logout span {
  font-size: 15px;
}
.portal-authenticated .portal-sidebar {
  border-color: #173d70 !important;
  background: linear-gradient(180deg, #102f5a, #0b2447) !important;
}
.portal-authenticated .portal-profile {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.portal-authenticated .portal-profile-text strong {
  color: #fff;
}
.portal-authenticated .role-member {
  color: #c9ddff;
  background: rgba(75, 135, 230, 0.22);
}
.portal-authenticated .role-mod {
  color: #ffe1a1;
  background: rgba(232, 164, 42, 0.2);
}
.portal-authenticated .role-admin {
  color: #ffc4b7;
  background: rgba(240, 103, 72, 0.2);
}
.portal-authenticated .portal-navigation {
  scrollbar-color: #31547f transparent;
}
.portal-authenticated .portal-nav-section {
  border-color: rgba(255, 255, 255, 0.08);
}
.portal-authenticated .portal-nav-section h6 {
  color: #7fa0cb;
}
.portal-authenticated .portal-nav-link {
  color: #c4d4e9;
}
.portal-authenticated .portal-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.portal-authenticated .portal-nav-link.active {
  background: linear-gradient(135deg, #2674e8, #1a58be);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
.portal-authenticated .portal-nav-icon {
  color: #a9c6ee;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 800;
}
.portal-authenticated .portal-nav-link.active .portal-nav-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.portal-authenticated .portal-content {
  background: #f6f8fc !important;
}
.portal-authenticated .account-hero {
  background: linear-gradient(125deg, #edf4ff, #f8faff);
}
.portal-authenticated .account-panel,
.portal-authenticated .account-balance-grid {
  box-shadow: 0 10px 28px rgba(37, 58, 91, 0.06);
}
.portal-authenticated .account-info-item {
  background: #f5f8fc;
}
.portal-authenticated .section-icon {
  color: #fff;
  background: linear-gradient(135deg, #2674e8, #174fae);
  box-shadow: 0 6px 14px rgba(38, 116, 232, 0.2);
}
.account-tab i,
.account-security-note > i {
  font-style: normal;
}
.portal-authenticated .account-security-note {
  border-color: #cbdcf7;
  background: #eaf2ff;
}
.portal-authenticated .right-home:not(.portal-content) {
  background: #f8fafd !important;
}
@media (max-width: 991px) {
  .portal-guest .portal-layout {
    padding-top: 28px;
  }
  .auth-register-column {
    margin-top: 0;
  }
  .top-logout span {
    display: none;
  }
}
@media (max-width: 767px) {
  .portal-guest .portal-layout {
    padding: 20px 10px 40px;
  }
  .auth-card-body {
    padding: 20px !important;
  }
  .auth-register-form {
    grid-template-columns: 1fr;
  }
  .auth-register-form > * {
    grid-column: 1 !important;
  }
  .portal-authenticated .portal-sidebar {
    border-radius: 15px !important;
  }
  .portal-authenticated .toggle-button-menu {
    color: #fff !important;
  }
}
@media (max-width: 575px) {
  .portal-guest .topbar-actions {
    gap: 7px;
  }
  .portal-guest .top-link {
    display: none !important;
  }
  .portal-guest .btn-login {
    padding: 8px 11px !important;
    font-size: 11px;
  }
  .auth-heading {
    padding: 20px 18px 18px;
  }
  .auth-heading h1 {
    font-size: 21px;
  }
  .auth-card-body {
    padding: 18px 16px 20px !important;
  }
  .auth-register-form .g-recaptcha {
    transform: scale(0.82);
  }
  .top-logout {
    padding: 8px 9px;
  }
  .top-logout {
    font-size: 0;
  }
  .top-logout:after {
    content: "Thoát";
    font-size: 11px;
  }
}

/* Portal 3.0 - he mau xanh ngoc dong bo */
:root {
  --portal-primary: #0b9fbd;
  --portal-primary-dark: #06758d;
  --portal-primary-deep: #064f61;
  --portal-primary-soft: #e8f8fb;
  --portal-border: #d8e9ed;
  --portal-text: #17313a;
  --portal-muted: #6e858d;
  --portal-accent: #f08a5d;
}
.portal-guest {
  background:
    radial-gradient(
      circle at 15% 18%,
      rgba(60, 211, 229, 0.24),
      transparent 27%
    ),
    radial-gradient(circle at 88% 76%, rgba(4, 79, 97, 0.32), transparent 31%),
    linear-gradient(145deg, #064f61, #07839c 52%, #0b9fbd) !important;
}
.portal-guest .topbar,
.portal-authenticated .topbar {
  background: linear-gradient(90deg, #064f61, #06758d 55%, #0b9fbd) !important;
}
.portal-guest .btn-login,
.auth-submit,
.portal-primary-btn {
  background: linear-gradient(135deg, #13b5ce, #06758d) !important;
  box-shadow: 0 8px 20px rgba(6, 117, 141, 0.24) !important;
}
.auth-heading {
  background: linear-gradient(135deg, #0b9fbd, #064f61) !important;
}
.auth-heading > span {
  color: #bdeff5;
}
.auth-heading p {
  color: #d9f7fa;
}
.auth-form .form-control:focus,
.auth-form .form-select:focus,
.account-form .form-control:focus {
  border-color: #0b9fbd !important;
  box-shadow: 0 0 0 4px rgba(11, 159, 189, 0.12) !important;
}
.auth-form-links a,
.auth-switch a {
  color: #06758d;
}
.portal-authenticated {
  background:
    radial-gradient(
      circle at 88% 4%,
      rgba(11, 159, 189, 0.13),
      transparent 30%
    ),
    #e7f1f3 !important;
}
.portal-authenticated .portal-sidebar {
  border-color: #075d70 !important;
  background: linear-gradient(180deg, #075f72, #064553) !important;
}
.portal-authenticated .portal-nav-link.active {
  background: linear-gradient(135deg, #13aec9, #087d96) !important;
}
.portal-authenticated .portal-content,
.portal-authenticated .right-home:not(.portal-content) {
  background: #f8fbfc !important;
}
.portal-authenticated .account-hero {
  background: linear-gradient(125deg, #e8f8fb, #fbfefe);
}
.portal-authenticated .section-icon,
.account-tab.active {
  background: linear-gradient(135deg, #12b1cc, #06758d) !important;
}
.account-tab:hover {
  color: #06758d !important;
  background: #e8f8fb !important;
}
.portal-authenticated .account-security-note {
  color: #07637a;
  border-color: #c8eaf0;
  background: #eefbfd;
}
.portal-authenticated .account-info-item {
  background: #f5fafb;
}
.portal-nav-link small {
  color: #9e3a1e !important;
  background: #fff0e9 !important;
}
.right-home {
  border: 1px solid rgba(6, 117, 141, 0.1) !important;
  border-radius: 17px !important;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(20, 73, 84, 0.09) !important;
}
.right-home .left-title-home {
  padding: 22px 26px 16px !important;
  border-bottom: 1px solid var(--portal-border) !important;
  background: linear-gradient(120deg, #effbfd, #fff) !important;
}
.right-home .left-title-home h4 {
  margin: 0 !important;
  color: var(--portal-text) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  text-transform: none !important;
}
.page-subtitle {
  margin: 6px 0 0;
  color: var(--portal-muted);
  font-size: 12px;
}
.right-home .form-right-home {
  padding: 22px 25px !important;
}
.right-home .form-right-home .form-right-home {
  padding: 0 !important;
}
.right-home .card {
  border: 1px solid var(--portal-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.right-home .card-header {
  padding: 15px 18px !important;
  border-color: var(--portal-border) !important;
  background: #f2fafb !important;
}
.right-home .card-title {
  margin: 0 !important;
  color: var(--portal-text) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  text-transform: none !important;
}
.right-home label {
  color: #29434c;
  font-size: 12px;
  font-weight: 750;
}
.right-home .form-control,
.right-home .form-select {
  min-height: 43px;
  border: 1px solid #cfdee2;
  border-radius: 10px;
  background: #fbfdfd;
  color: #17313a;
}
.right-home .form-control:focus,
.right-home .form-select:focus {
  border-color: #0b9fbd;
  box-shadow: 0 0 0 4px rgba(11, 159, 189, 0.11);
}
.right-home .btn-primary,
.right-home .btn-cus,
.portal-primary-btn {
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0b9fbd, #06758d) !important;
  font-weight: 800 !important;
}
.right-home .btn-primary:hover,
.right-home .btn-cus:hover,
.portal-primary-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.table {
  color: #29434c;
}
.table thead th {
  padding: 12px !important;
  border-bottom: 1px solid #cce2e7 !important;
  color: #54727b !important;
  background: #eef8fa !important;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table tbody td,
.table tbody th {
  padding: 12px !important;
  border-color: #e5eff1 !important;
  vertical-align: middle;
}
.badge.bg-primary {
  background: #0b9fbd !important;
}
.badge.bg-success {
  background: #1f9d73 !important;
}
.badge.bg-danger {
  background: #e36b5b !important;
}
.dataTables_wrapper .page-item.active .page-link {
  border-color: #0b9fbd;
  background: #0b9fbd;
}
.dataTables_wrapper .page-link {
  color: #06758d;
}
.portal-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 27px 30px;
  border-bottom: 1px solid var(--portal-border);
  background: linear-gradient(120deg, #e8f8fb, #fff);
}
.portal-page-head .eyebrow {
  color: #0b9fbd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.portal-page-head h1 {
  margin: 4px 0;
  color: #17313a;
  font-size: 24px;
  font-weight: 900;
}
.portal-page-head p {
  margin: 0;
  color: #6e858d;
  font-size: 12px;
}
.portal-settings-form {
  padding: 22px;
}
.portal-config-card {
  margin-bottom: 18px;
  border: 1px solid var(--portal-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.portal-config-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--portal-border);
  background: #f5fbfc;
}
.portal-config-title > div {
  display: flex;
  flex-direction: column;
}
.portal-config-title strong {
  color: #17313a;
}
.portal-config-title small {
  color: #789099;
}
.server-state {
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 850;
}
.server-state.online {
  color: #087352;
  background: #e4f8ef;
}
.server-state.offline {
  color: #a14338;
  background: #fff0ed;
}
.portal-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--portal-border);
}
.setting-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  cursor: pointer;
}
.setting-switch > span {
  display: flex;
  flex-direction: column;
}
.setting-switch strong {
  color: #29434c;
  font-size: 12px;
}
.setting-switch small {
  color: #82959b;
  font-size: 10px;
}
.setting-switch input {
  position: absolute;
  opacity: 0;
}
.setting-switch i {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 40px;
  border-radius: 20px;
  background: #cbd8db;
  transition: 0.2s;
}
.setting-switch i:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.setting-switch input:checked + i {
  background: #0b9fbd;
}
.setting-switch input:checked + i:after {
  transform: translateX(18px);
}
.portal-rate-grid,
.portal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 17px;
}
.portal-rate-grid label,
.portal-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-form-grid .full {
  grid-column: 1/-1;
}
.portal-form-actions {
  display: flex;
  justify-content: flex-end;
}
.portal-primary-btn {
  min-height: 42px;
  padding: 10px 18px;
}
.portal-tabs {
  display: flex;
  gap: 6px;
  padding: 18px 22px 0;
}
.portal-tabs button {
  padding: 10px 16px;
  border: 0;
  border-radius: 9px;
  color: #637c84;
  background: #edf5f7;
  font-size: 12px;
  font-weight: 800;
}
.portal-tabs button.active {
  color: #fff;
  background: #0b9fbd;
}
.portal-shop-admin {
  display: none;
  padding: 17px 22px 25px;
}
.portal-shop-admin.active {
  display: block;
}
.portal-table {
  border: 1px solid var(--portal-border);
  border-radius: 12px;
  overflow: hidden;
}
.shop-admin-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-admin-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border: 1px solid var(--portal-border);
  border-radius: 9px;
  background: #f5fafb;
}
.shop-admin-item span {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}
.shop-admin-item small {
  color: #84979d;
}
.portal-modal {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}
.portal-modal .modal-header {
  color: #fff;
  background: linear-gradient(135deg, #0b9fbd, #064f61);
}
.portal-modal .modal-title {
  font-weight: 850;
}
.portal-modal .btn-close {
  filter: brightness(0) invert(1);
}
#giftList > .col-md-4 {
  width: 25%;
}
.item-box,
.gift-box {
  height: 100%;
  border: 1px solid var(--portal-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(23, 80, 91, 0.06) !important;
  transition: 0.2s;
}
.item-box:hover,
.gift-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 25px rgba(11, 159, 189, 0.14) !important;
}
@media (max-width: 1100px) {
  #giftList > .col-md-4 {
    width: 50%;
  }
}
@media (max-width: 767px) {
  .portal-page-head {
    align-items: flex-start;
    padding: 22px 18px;
    flex-direction: column;
  }
  .portal-page-head .portal-primary-btn {
    width: 100%;
  }
  .portal-switch-grid,
  .portal-rate-grid,
  .portal-form-grid {
    grid-template-columns: 1fr;
  }
  .portal-form-grid .full {
    grid-column: auto;
  }
  .portal-settings-form,
  .portal-shop-admin {
    padding: 15px;
  }
  .right-home .form-right-home {
    padding: 17px !important;
  }
}
@media (max-width: 575px) {
  #giftList > .col-md-4 {
    width: 100%;
  }
}
.portal-empty-state {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 65px 25px;
  text-align: center;
}
.portal-empty-state > span {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #06758d;
  background: #e8f8fb;
  font-size: 25px;
  font-weight: 900;
}
.portal-empty-state h2 {
  margin: 16px 0 6px;
  color: #17313a;
  font-size: 20px;
}
.portal-empty-state p {
  margin: 0 0 18px;
  color: #6e858d;
  font-size: 13px;
}

/* Portal 3.0.1 - khoi phuc anh nen sang cua giao dien goc */
.portal-guest,
.portal-authenticated {
  background-color: #f4f7f8 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(240, 248, 249, 0.2)),
    url(../../public/images/bg3.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
.portal-guest:before,
.portal-guest:after {
  display: none !important;
}
.portal-guest .portal-layout {
  min-height: calc(100vh - 62px) !important;
}
.portal-guest .auth-card {
  border-color: rgba(6, 117, 141, 0.18) !important;
  box-shadow: 0 22px 55px rgba(20, 63, 72, 0.16) !important;
}
.portal-authenticated .portal-layout {
  background: transparent !important;
}

/* Portal 3.0.2 - xanh duong hien dai, header navy tao tuong phan */
:root {
  --portal-primary: #2563eb;
  --portal-primary-dark: #1746b0;
  --portal-primary-deep: #102b67;
  --portal-primary-soft: #edf4ff;
  --portal-border: #dfe7f2;
  --portal-text: #18243b;
  --portal-muted: #718096;
  --portal-accent: #f26b4f;
}
body {
  color: #18243b !important;
}
.portal-guest,
.portal-authenticated {
  background-color: #f3f6fa !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(242, 246, 251, 0.16)),
    url(../../public/images/bg3.jpg) !important;
}
.portal-guest .topbar,
.portal-authenticated .topbar {
  height: 72px !important;
  background: linear-gradient(
    105deg,
    #10192d 0%,
    #172746 56%,
    #1c3156 100%
  ) !important;
  border-bottom: 1px solid rgba(129, 160, 213, 0.22) !important;
  box-shadow: 0 9px 26px rgba(12, 23, 43, 0.22) !important;
}
.topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px !important;
}
.brand {
  gap: 13px !important;
}
.brand img {
  width: 43px !important;
  height: 43px !important;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}
.brand b {
  color: #fff;
  font-size: 17px !important;
  font-weight: 850;
  letter-spacing: 0.02em !important;
}
.portal-guest .brand small,
.portal-authenticated .brand small {
  margin-top: 4px;
  color: #9eacc5 !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
}
.topbar-actions {
  gap: 11px !important;
}
.portal-authenticated .account-summary {
  gap: 0 !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(158, 180, 219, 0.18) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}
.account-summary span {
  position: relative;
  min-width: 72px;
  padding: 3px 12px;
}
.account-summary span + span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: rgba(184, 202, 231, 0.13);
}
.portal-authenticated .account-summary small {
  color: #8fa2c0 !important;
  font-size: 8px !important;
  font-weight: 750;
  letter-spacing: 0.11em !important;
}
.portal-authenticated .account-summary b {
  margin-top: 2px;
  color: #f8fbff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.language-switch {
  height: 40px;
  padding: 4px !important;
  border: 1px solid rgba(158, 180, 219, 0.17);
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  gap: 0 !important;
}
.language-switch span {
  display: none;
}
.language-switch a {
  min-width: 34px;
  padding: 7px 8px;
  border-radius: 7px;
  color: #9eacc4 !important;
  text-align: center;
  font-size: 10px;
  font-weight: 850 !important;
}
.language-switch a.active {
  color: #fff !important;
  background: #2563eb !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.top-logout {
  height: 40px;
  padding: 0 14px !important;
  border: 1px solid rgba(116, 148, 203, 0.28) !important;
  border-radius: 11px !important;
  color: #dce8ff !important;
  background: rgba(37, 99, 235, 0.14) !important;
  font-size: 11px !important;
}
.top-logout:hover {
  border-color: #3975f0 !important;
  background: #2563eb !important;
}
.top-logout span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px !important;
}
.portal-guest .top-link {
  color: #c5d0e2 !important;
}
.portal-guest .btn-login {
  background: linear-gradient(135deg, #3478f6, #1f55cb) !important;
  box-shadow: 0 7px 17px rgba(11, 31, 68, 0.28) !important;
}
.auth-heading {
  background: linear-gradient(135deg, #2563eb, #143d98) !important;
}
.auth-heading > span {
  color: #c8d9ff !important;
}
.auth-heading p {
  color: #e5edff !important;
}
.auth-form .form-control:focus,
.auth-form .form-select:focus,
.account-form .form-control:focus,
.right-home .form-control:focus,
.right-home .form-select:focus {
  border-color: #4b7ff0 !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}
.auth-form-links a,
.auth-switch a {
  color: #1f57c8 !important;
}
.auth-submit,
.portal-primary-btn,
.right-home .btn-primary,
.right-home .btn-cus {
  background: linear-gradient(135deg, #2f72f0, #1747b0) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2) !important;
}
.portal-authenticated .portal-sidebar {
  border-color: #172b4d !important;
  background: linear-gradient(180deg, #192e50, #101f39) !important;
}
.portal-authenticated .portal-nav-link.active {
  background: linear-gradient(135deg, #3478f6, #2056ca) !important;
}
.portal-authenticated .portal-nav-section h6 {
  color: #8297b8 !important;
}
.portal-authenticated .portal-nav-link {
  color: #c7d3e6 !important;
}
.portal-authenticated .portal-nav-icon {
  color: #abc0df !important;
}
.portal-authenticated .account-hero,
.right-home .left-title-home,
.portal-page-head {
  background: linear-gradient(120deg, #edf4ff, #fff) !important;
}
.portal-authenticated .section-icon,
.account-tab.active {
  background: linear-gradient(135deg, #3478f6, #1747b0) !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.2) !important;
}
.account-tab:hover {
  color: #2563eb !important;
  background: #edf4ff !important;
}
.portal-authenticated .account-security-note {
  color: #285ebd !important;
  border-color: #d4e2ff !important;
  background: #f2f6ff !important;
}
.right-home {
  border-color: rgba(37, 99, 235, 0.11) !important;
  box-shadow: 0 14px 36px rgba(36, 58, 96, 0.1) !important;
}
.right-home .card-header,
.portal-config-title {
  background: #f3f7ff !important;
}
.right-home .card,
.portal-config-card,
.portal-table {
  border-color: #dfe7f2 !important;
}
.table thead th {
  border-color: #d8e3f4 !important;
  color: #5f6f8a !important;
  background: #f1f5fc !important;
}
.table tbody td,
.table tbody th {
  border-color: #e8edf5 !important;
}
.badge.bg-primary,
.dataTables_wrapper .page-item.active .page-link,
.portal-tabs button.active,
.setting-switch input:checked + i {
  border-color: #2563eb !important;
  background: #2563eb !important;
}
.dataTables_wrapper .page-link,
.portal-page-head .eyebrow {
  color: #2563eb !important;
}
.portal-modal .modal-header {
  background: linear-gradient(135deg, #2563eb, #142f70) !important;
}
.portal-empty-state > span {
  color: #2563eb !important;
  background: #edf4ff !important;
}
.item-box:hover,
.gift-box:hover {
  box-shadow: 0 13px 25px rgba(37, 99, 235, 0.13) !important;
}
.character-card:hover {
  border-color: #8dacf2 !important;
  background: #f8faff !important;
}
.character-card.selected {
  border-color: #2563eb !important;
  background: #f1f6ff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}
.character-avatar {
  background: linear-gradient(135deg, #3478f6, #1747b0) !important;
}
.character-details em {
  color: #2563eb !important;
}
.character-card.selected .character-check {
  border-color: #2563eb !important;
  background: #2563eb !important;
}
@media (max-width: 991px) {
  .portal-guest .topbar,
  .portal-authenticated .topbar {
    height: 64px !important;
  }
  .topbar-inner {
    padding: 0 16px !important;
  }
  .account-summary span {
    min-width: 65px;
    padding: 3px 9px;
  }
  .account-summary span:first-child,
  .account-summary span:nth-child(2) {
    display: none;
  }
  .topbar-actions {
    gap: 8px !important;
  }
}
@media (max-width: 767px) {
  .brand img {
    width: 39px !important;
    height: 39px !important;
  }
  .language-switch {
    height: 36px;
  }
  .top-logout {
    height: 36px;
    padding: 0 10px !important;
  }
}
@media (max-width: 575px) {
  .topbar-inner {
    padding: 0 11px !important;
  }
  .brand span {
    display: flex !important;
  }
  .brand b {
    font-size: 13px !important;
  }
  .brand small {
    display: none;
  }
  .top-logout {
    font-size: 0 !important;
  }
  .top-logout:after {
    content: "Thoát";
    font-size: 10px;
  }
  .language-switch a {
    min-width: 29px;
    padding: 6px 5px;
  }
}
.character-lazy {
  min-height: 82px;
}
.character-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe5f3;
  border-radius: 13px;
  color: #31527f;
  background: linear-gradient(110deg, #f5f8fd, #edf4ff);
  overflow: hidden;
}
.character-loading .spinner-border {
  color: #2563eb;
}
.character-loading > div {
  display: flex;
  flex-direction: column;
}
.character-loading strong {
  color: #263b5b;
  font-size: 13px;
}
.character-loading small {
  margin-top: 2px;
  color: #8190a6;
  font-size: 11px;
}

/* Portal 3.0.4 - danh sach nhan vat gon, khong keo dai trang */
.character-picker {
  padding: 12px !important;
  border-color: #dce5f2 !important;
  border-radius: 13px !important;
  background: #f6f8fc !important;
}
.character-picker-title {
  margin-bottom: 9px !important;
  padding: 0 2px;
}
.character-picker-title span {
  color: #263852 !important;
  font-size: 13px !important;
}
.character-picker-title small {
  color: #7f8da2 !important;
  font-size: 10px !important;
}
.character-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 1px;
  overflow: visible !important;
}
.character-card {
  min-height: 58px !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-color: #dce4ef !important;
  border-radius: 10px !important;
}
.character-card:hover {
  transform: none !important;
}
.character-avatar {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
  border-radius: 10px !important;
}
.character-avatar svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.character-details strong {
  font-size: 14px !important;
}
.character-details > span {
  gap: 5px !important;
  margin-top: 2px !important;
  font-size: 11px !important;
}
.character-check {
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
  font-size: 10px !important;
}
.character-card.selected {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.09) !important;
}
.character-picker-status {
  padding: 11px 12px !important;
  font-size: 12px !important;
}
@media (max-width: 650px) {
  .character-grid {
    grid-template-columns: 1fr !important;
  }
  .character-picker-title small {
    display: none !important;
  }
}

/* Portal 3.0.5 - khoi tao giao dich nap tien */
.portal-deposit-page .deposit-page-body {
  padding: 0 !important;
}
.portal-deposit-page .form-right-home {
  padding: 24px !important;
}
.portal-deposit-page .form-right-home > .card-body > .row {
  margin: 0;
}
.deposit-start-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, 0.55fr);
  border: 1px solid #dce5f2;
  border-radius: 17px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(31, 55, 95, 0.08);
}
.deposit-start-main {
  padding: 32px;
}
.deposit-eyebrow {
  color: #2563eb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.17em;
}
.deposit-start-main h2 {
  margin: 7px 0 8px;
  color: #17243d;
  font-size: 25px;
  font-weight: 900;
}
.deposit-start-main > p {
  max-width: 590px;
  margin: 0;
  color: #6f7f96;
  font-size: 13px;
  line-height: 1.6;
}
.deposit-server {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 9px 12px;
  border: 1px solid #dce6f6;
  border-radius: 11px;
  background: #f5f8fe;
}
.deposit-server > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1eaf74;
  box-shadow: 0 0 0 4px rgba(30, 175, 116, 0.12);
}
.deposit-server div {
  display: flex;
  flex-direction: column;
}
.deposit-server small {
  color: #8492a7;
  font-size: 9px;
}
.deposit-server strong {
  color: #2d405e;
  font-size: 12px;
}
.deposit-benefits {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}
.deposit-benefits li {
  display: flex;
  align-items: center;
  gap: 11px;
}
.deposit-benefits li > i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  border-radius: 8px;
  color: #2563eb;
  background: #edf4ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.deposit-benefits li > span {
  display: flex;
  flex-direction: column;
}
.deposit-benefits strong {
  color: #30415d;
  font-size: 12px;
}
.deposit-benefits small {
  margin-top: 1px;
  color: #8491a4;
  font-size: 10px;
}
.btn-custom-chuyentien {
  min-height: 47px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 19px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-transform: none !important;
}
.deposit-button-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 17px;
  line-height: 1;
}
.deposit-note {
  display: block !important;
  margin: 10px 0 0 !important;
  color: #9a6d2c !important;
  font-size: 10px !important;
}
.deposit-bank-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px 22px;
  border-left: 1px solid #dce5f2;
  background: linear-gradient(155deg, #f2f6ff, #e8f0ff);
}
.deposit-bank-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #3478f6, #1747b0);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}
.deposit-bank-icon svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}
.deposit-bank-panel > span {
  margin: 14px 0 10px;
  color: #8492aa;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.deposit-bank-panel > img {
  width: 170px;
  max-width: 100%;
  height: 82px;
  object-fit: contain;
  border: 1px solid #dfe6f1;
  border-radius: 12px;
  background: #fff;
}
.deposit-auto-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}
.deposit-auto-status > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1caf72;
  box-shadow: 0 0 0 4px rgba(28, 175, 114, 0.11);
}
.deposit-auto-status > span {
  display: flex;
  flex-direction: column;
}
.deposit-auto-status strong {
  color: #31435f;
  font-size: 10px;
}
.deposit-auto-status small {
  color: #1a9b68;
  font-size: 9px;
}
@media (max-width: 850px) {
  .deposit-start-card {
    grid-template-columns: 1fr;
  }
  .deposit-bank-panel {
    padding: 22px;
    border-top: 1px solid #dce5f2;
    border-left: 0;
  }
  .deposit-start-main {
    padding: 25px;
  }
}
@media (max-width: 575px) {
  .portal-deposit-page .form-right-home {
    padding: 13px !important;
  }
  .deposit-start-main {
    padding: 21px 17px;
  }
  .deposit-start-main h2 {
    font-size: 21px;
  }
  .deposit-server {
    width: 100%;
  }
  .deposit-benefits small {
    line-height: 1.35;
  }
  .btn-custom-chuyentien {
    width: 100% !important;
  }
}

/* Portal 3.0.6 - QR va khuyen mai nap tien */
.deposit-payment-card {
  width: 100%;
  border: 1px solid #dce5f2;
  border-radius: 17px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(31, 55, 95, 0.08);
}
.deposit-payment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 25px;
  border-bottom: 1px solid #e2e9f3;
  background: linear-gradient(120deg, #f1f6ff, #fff);
}
.deposit-payment-head h2 {
  margin: 5px 0 3px;
  color: #17243d;
  font-size: 21px;
  font-weight: 900;
}
.deposit-payment-head p {
  margin: 0;
  color: #77869b;
  font-size: 11px;
}
.deposit-secure-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 20px;
  color: #13754f;
  background: #eaf8f2;
  font-size: 10px;
  font-weight: 800;
}
.deposit-secure-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1caf72;
}
.deposit-payment-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
}
.deposit-qr-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 27px;
  border-right: 1px solid #e1e8f2;
  background: #f7f9fc;
}
.deposit-qr-frame {
  width: 230px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid #d9e2ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(35, 55, 88, 0.09);
}
.deposit-qr-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}
.deposit-qr-column > small {
  margin-top: 12px;
  color: #8190a4;
  font-size: 9px;
  text-align: center;
}
.deposit-payment-info {
  padding: 25px;
}
.deposit-promotion-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border: 1px solid #d9e5fb;
  border-radius: 13px;
  background: linear-gradient(120deg, #edf4ff, #f8faff);
}
.deposit-promotion-banner > div:first-child {
  display: flex;
  flex-direction: column;
}
.promotion-kind {
  color: #2563eb;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.promotion-active-value {
  margin: 2px 0;
  color: #1747b0;
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
}
.deposit-promotion-banner small {
  color: #7e8ca0;
  font-size: 9px;
}
.promotion-timer {
  text-align: right;
}
.promotion-timer span {
  display: block;
  color: #7d8ca2;
  font-size: 9px;
}
.promotion-timer strong {
  display: block;
  margin-top: 4px;
  color: #e1593e;
  font-size: 13px;
}
.deposit-payment-card[data-state="default"] .promotion-timer strong {
  color: #18845b;
}
.promotion-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 10px 0 15px;
}
.promotion-comparison > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  border: 1px solid #e3e9f2;
  border-radius: 9px;
  background: #fafbfd;
}
.promotion-comparison small {
  color: #7b899e;
  font-size: 9px;
}
.promotion-comparison strong {
  color: #334967;
  font-size: 12px;
}
.deposit-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.deposit-detail-grid > div {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 11px 12px;
  border: 1px solid #e0e7f0;
  border-radius: 10px;
  background: #fafbfd;
}
.deposit-detail-grid .full {
  grid-column: 1/-1;
  padding-right: 84px;
}
.deposit-detail-grid small {
  color: #8390a4;
  font-size: 9px;
}
.deposit-detail-grid strong {
  margin-top: 3px;
  color: #273b59;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.deposit-detail-grid button {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  color: #2358bd;
  background: #eaf1ff;
  font-size: 9px;
  font-weight: 800;
}
.deposit-transfer-code {
  border-color: #bcd0f7 !important;
  background: #f0f5ff !important;
}
.deposit-transfer-code strong {
  color: #e14f3f !important;
  font-size: 14px !important;
}
.deposit-warning {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid #f0a23a;
  border-radius: 8px;
  background: #fff8ed;
}
.deposit-warning > strong {
  color: #7b5725;
  font-size: 10px;
}
.deposit-warning ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}
.deposit-warning li {
  position: relative;
  padding-left: 12px;
  color: #806b4c;
  font-size: 9px;
}
.deposit-warning li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e9a13f;
}
.portal-promotion-admin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding: 17px;
}
.portal-promotion-admin > label:not(.setting-switch) {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-promotion-admin label > span {
  color: #465872;
  font-size: 11px;
  font-weight: 800;
}
.promotion-event-switch {
  border: 1px solid #e0e7f2;
  border-radius: 11px !important;
}
.promotion-admin-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #d9e5fb;
  border-radius: 11px;
  background: #f1f6ff;
}
.promotion-admin-preview small {
  color: #7e8da3;
  font-size: 9px;
}
.promotion-admin-preview strong {
  color: #2563eb;
  font-size: 22px;
}
.promotion-admin-preview span {
  color: #4f6381;
  font-size: 9px;
}
@media (max-width: 850px) {
  .deposit-payment-layout {
    grid-template-columns: 1fr;
  }
  .deposit-qr-column {
    border-right: 0;
    border-bottom: 1px solid #e1e8f2;
  }
  .portal-promotion-admin {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575px) {
  .deposit-payment-head {
    align-items: flex-start;
    padding: 18px;
    flex-direction: column;
  }
  .deposit-payment-info {
    padding: 15px;
  }
  .deposit-qr-column {
    padding: 20px;
  }
  .deposit-promotion-banner {
    align-items: flex-start;
    flex-direction: column;
  }
  .promotion-timer {
    text-align: left;
  }
  .deposit-detail-grid {
    grid-template-columns: 1fr;
  }
  .deposit-detail-grid .full {
    grid-column: auto;
  }
  .deposit-warning ul {
    display: grid;
  }
}

.deposit-history-section {
  margin: 0 24px 25px;
  border: 1px solid #dce5f2;
  border-radius: 17px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(31, 55, 95, 0.07);
}
.deposit-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid #e2e9f3;
  background: linear-gradient(120deg, #f4f7fc, #fff);
}
.deposit-history-head h2 {
  margin: 5px 0 3px;
  color: #18263f;
  font-size: 20px;
  font-weight: 900;
}
.deposit-history-head p {
  margin: 0;
  color: #7d8a9d;
  font-size: 11px;
}
.history-count {
  padding: 7px 10px;
  border-radius: 20px;
  color: #2559bd;
  background: #eaf1ff;
  font-size: 10px;
  font-weight: 800;
}
.deposit-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 17px 20px;
}
.deposit-stat-grid article {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid #e1e8f2;
  border-radius: 11px;
  background: #fafbfd;
}
.deposit-stat-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
}
.deposit-stat-icon.paid {
  color: #2260d6;
  background: #eaf1ff;
}
.deposit-stat-icon.received {
  color: #12815a;
  background: #e8f8f1;
}
.deposit-stat-icon.pending {
  color: #b87818;
  background: #fff4dd;
}
.deposit-stat-grid article > div {
  display: flex;
  flex-direction: column;
}
.deposit-stat-grid small {
  color: #8290a4;
  font-size: 9px;
}
.deposit-stat-grid strong {
  margin-top: 2px;
  color: #2b3e5c;
  font-size: 13px;
}
.deposit-history-table {
  padding: 0 20px 20px;
}
.deposit-history-table .dataTables_wrapper {
  padding: 0;
}
.deposit-history-table .dataTables_filter {
  margin: 0 0 11px;
}
.deposit-history-table .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #77869c;
  font-size: 10px;
}
.deposit-history-table .dataTables_filter input {
  height: 34px;
  margin: 0 !important;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
}
.deposit-history-table .dataTables_info {
  color: #7c899d;
  font-size: 10px;
}
.deposit-history-table .dataTables_paginate {
  font-size: 10px;
}
.deposit-history-table td {
  white-space: nowrap;
  font-size: 11px;
}
.deposit-history-table td small {
  color: #8a96a8;
  font-size: 9px;
}
.deposit-code {
  color: #285dbf;
  font-size: 11px;
}
.deposit-status {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 850;
}
.deposit-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.deposit-status.success {
  color: #12734f;
  background: #e6f7ef;
}
.deposit-status.success i {
  background: #19a86f;
}
.deposit-status.pending {
  color: #9a6413;
  background: #fff2d5;
}
.deposit-status.pending i {
  background: #e3a12f;
}
.deposit-status.failed {
  color: #a54134;
  background: #ffebe7;
}
.deposit-status.failed i {
  background: #dc6252;
}
@media (max-width: 767px) {
  .deposit-history-section {
    margin: 0 13px 17px;
  }
  .deposit-stat-grid {
    grid-template-columns: 1fr;
  }
  .deposit-history-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .deposit-history-table {
    padding: 0 13px 16px;
  }
}
/* v3.0.7 - Xu to KNB calculator */
.exchange-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
  overflow: hidden;
  margin: 22px 0 34px;
  border: 1px solid #d7e4f4;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(23, 68, 130, 0.09);
}
.exchange-panel__main {
  padding: 30px;
}
.exchange-eyebrow {
  color: #2164d8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.exchange-panel h3 {
  margin: 7px 0 5px;
  color: #10213d;
  font-size: 24px;
}
.exchange-panel__main > p {
  margin: 0 0 23px;
  color: #687a96;
}
.exchange-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.exchange-meta-grid > div {
  padding: 13px 14px;
  border: 1px solid #e0e9f5;
  border-radius: 12px;
  background: #f7faff;
}
.exchange-meta-grid span {
  display: block;
  margin-bottom: 4px;
  color: #7b8ba4;
  font-size: 11px;
  text-transform: uppercase;
}
.exchange-meta-grid strong {
  display: block;
  color: #152743;
  font-size: 13px;
}
.exchange-field {
  margin-bottom: 18px;
}
.exchange-field label {
  display: block;
  margin-bottom: 8px;
  color: #253750;
  font-weight: 700;
}
.exchange-input-wrap {
  position: relative;
}
.exchange-input-wrap input {
  height: 52px;
  padding-right: 60px;
  font-size: 18px;
  font-weight: 800;
}
.exchange-input-wrap > span {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: #5e7393;
  font-weight: 700;
}
.exchange-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.exchange-presets button {
  padding: 7px 12px;
  border: 1px solid #cddcf0;
  border-radius: 999px;
  background: #f7faff;
  color: #285cae;
  font-size: 12px;
  font-weight: 700;
  transition: 0.18s;
}
.exchange-presets button:hover {
  border-color: #2e6be6;
  background: #eaf2ff;
}
.exchange-field small {
  display: block;
  margin-top: 9px;
  color: #24835d;
}
.exchange-field small.is-error {
  color: #d64a4a;
}
.exchange-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 23px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #3379ed, #174cb5);
  box-shadow: 0 10px 23px rgba(31, 91, 200, 0.25);
  color: #fff;
  font-weight: 800;
}
.exchange-submit:disabled {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.5;
}
.exchange-result {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  text-align: center;
  background: linear-gradient(145deg, #112f62, #176cc7);
  color: #fff;
}
.exchange-result__icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 30px;
}
.exchange-result > span {
  color: #c6dcff;
  font-size: 13px;
}
.exchange-result > strong {
  margin: 5px 0 0;
  font-size: 40px;
  line-height: 1;
}
.exchange-result > b {
  margin-top: 4px;
  color: #8fc5ff;
  letter-spacing: 2px;
}
.exchange-equation {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 22px 0 16px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
}
.exchange-result p {
  margin: 0;
  color: #c9ddf8;
  font-size: 12px;
}
@media (max-width: 900px) {
  .exchange-panel {
    grid-template-columns: 1fr;
  }
  .exchange-result {
    min-height: 260px;
  }
  .exchange-meta-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 576px) {
  .exchange-panel__main,
  .exchange-result {
    padding: 22px;
  }
  .exchange-panel h3 {
    font-size: 21px;
  }
  .exchange-presets button {
    flex: 1;
  }
  .exchange-result > strong {
    font-size: 34px;
  }
}

/* v3.0.8 - Giftcode center and visible KNB icon */
.exchange-result__icon svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.18));
}
.giftcode-page {
  overflow: hidden;
}
.gift-redeem-card {
  display: grid;
  grid-template-columns: minmax(225px, 0.62fr) minmax(0, 1.38fr);
  margin: 22px 24px 30px;
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 34px rgba(31, 55, 95, 0.08);
}
.gift-redeem-intro {
  padding: 29px;
  background: linear-gradient(145deg, #16376e, #176ec8);
  color: #fff;
}
.gift-redeem-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
}
.gift-redeem-icon svg {
  width: 31px;
  height: 31px;
  fill: #fff;
}
.gift-redeem-intro > span,
.gift-list-head > div > span {
  color: #9dc5ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.gift-redeem-intro h3 {
  margin: 5px 0 8px;
  font-size: 23px;
  font-weight: 900;
}
.gift-redeem-intro > p {
  margin: 0;
  color: #d0e1fa;
  font-size: 11px;
  line-height: 1.6;
}
.gift-redeem-intro ul {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.gift-redeem-intro li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dfebfc;
  font-size: 10px;
}
.gift-redeem-intro li i {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.gift-redeem-form {
  padding: 29px;
}
.gift-field {
  margin-bottom: 18px;
}
.gift-field > label {
  display: block;
  margin-bottom: 8px;
  color: #273a58;
  font-size: 12px;
  font-weight: 850;
}
.gift-field > label i {
  margin-right: 4px;
  color: #2563eb;
}
.gift-code-input {
  position: relative;
}
.gift-code-input input {
  height: 48px;
  padding: 0 44px 0 14px;
  border-radius: 11px !important;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.gift-code-input button {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  color: #72829a;
  background: #edf2f9;
  font-size: 19px;
  line-height: 1;
}
.gift-field > small {
  display: block;
  margin-top: 7px;
  color: #8996a9;
  font-size: 9px;
}
.gift-character-wrap .character-picker {
  margin-top: 0 !important;
}
.gift-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 2px;
}
.gift-form-footer > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #4f6380;
}
.gift-form-footer > div > i {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  flex: 0 0 31px;
  border-radius: 9px;
  color: #2360d0;
  background: #edf4ff;
}
.gift-form-footer > div > span {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 750;
}
.gift-form-footer small {
  margin-top: 2px;
  color: #8a97a8;
  font-size: 9px;
  font-weight: 500;
}
.gift-submit {
  display: inline-flex;
  min-width: 145px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #3478f6, #1647ad);
  box-shadow: 0 9px 19px rgba(37, 99, 235, 0.23);
  font-size: 11px;
  font-weight: 900;
}
.gift-submit:disabled {
  box-shadow: none;
  opacity: 0.65;
}
.gift-list-card {
  margin: 0 24px 28px;
  overflow: hidden;
  border: 1px solid #dce5f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 55, 95, 0.07);
}
.gift-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 21px 23px;
  border-bottom: 1px solid #e2e9f3;
  background: linear-gradient(120deg, #f2f6fd, #fff);
}
.gift-list-head > div > span {
  color: #2563eb;
}
.gift-list-head h3 {
  margin: 4px 0 3px;
  color: #1c2c47;
  font-size: 19px;
  font-weight: 900;
}
.gift-list-head p {
  margin: 0;
  color: #8190a5;
  font-size: 10px;
}
.gift-list-count {
  display: flex;
  min-width: 68px;
  align-items: center;
  flex-direction: column;
  padding: 9px 13px;
  border: 1px solid #d8e5fa;
  border-radius: 11px;
  background: #edf4ff;
}
.gift-list-count strong {
  color: #225cc8;
  font-size: 17px;
}
.gift-list-count span {
  color: #778aa8;
  font-size: 8px;
  text-transform: uppercase;
}
.gift-table-wrap {
  padding: 17px 20px 20px;
}
.gift-table-wrap .dataTables_wrapper {
  padding: 0;
}
.gift-table-wrap td {
  vertical-align: middle !important;
  color: #43546d;
  font-size: 10px;
}
.gift-code-value {
  color: #234f9e;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}
.gift-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}
.gift-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.gift-status.is-ready {
  color: #137451;
  background: #e7f8f0;
}
.gift-status.is-ready i {
  background: #1aaa72;
}
.gift-status.is-used {
  color: #8a5960;
  background: #f7edef;
}
.gift-status.is-used i {
  background: #bd727d;
}
.gift-use-code {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid #cfe0fc;
  border-radius: 8px;
  color: #245cc4;
  background: #edf4ff;
  font-size: 9px;
  font-weight: 850;
}
.gift-use-code:hover {
  color: #fff;
  background: #2563eb;
}
.gift-used-text {
  color: #9aa5b5;
  font-size: 9px;
}
.gift-table-wrap .dataTables_filter label,
.gift-table-wrap .dataTables_length label {
  color: #73839a;
  font-size: 10px;
}
.gift-table-wrap .dataTables_filter input,
.gift-table-wrap .dataTables_length select {
  height: 33px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
}
@media (max-width: 900px) {
  .gift-redeem-card {
    grid-template-columns: 1fr;
  }
  .gift-redeem-intro {
    padding: 23px;
  }
  .gift-redeem-intro ul {
    grid-template-columns: 1fr 1fr;
    margin-top: 15px;
  }
  .gift-redeem-form {
    padding: 23px;
  }
}
@media (max-width: 650px) {
  .gift-redeem-card,
  .gift-list-card {
    margin-right: 13px;
    margin-left: 13px;
  }
  .gift-redeem-form {
    padding: 19px 15px;
  }
  .gift-form-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .gift-submit {
    width: 100%;
  }
  .gift-list-head {
    align-items: flex-start;
  }
  .gift-table-wrap {
    padding: 13px;
    overflow-x: auto;
  }
  .gift-redeem-intro ul {
    grid-template-columns: 1fr;
  }
}

/* v3.0.9 - unified VCOIN/FCOIN shops */
.wallet-shop-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 22px 24px 0;
  padding: 24px 27px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(125deg, #152f60, #1d6fd1);
  box-shadow: 0 12px 27px rgba(24, 67, 132, 0.18);
}
.wallet-shop-hero > div:first-child > span {
  color: #9ec7ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.wallet-shop-hero h2 {
  margin: 5px 0 4px;
  font-size: 23px;
  font-weight: 900;
}
.wallet-shop-hero p {
  margin: 0;
  color: #d1e2fa;
  font-size: 10px;
}
.wallet-shop-balance {
  display: grid;
  min-width: 190px;
  padding: 13px 17px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  grid-template-columns: 1fr auto;
}
.wallet-shop-balance small {
  grid-column: 1/-1;
  color: #c5dafa;
  font-size: 9px;
}
.wallet-shop-balance strong {
  margin-top: 2px;
  font-size: 22px;
}
.wallet-shop-balance span {
  align-self: end;
  margin-bottom: 3px;
  color: #9bc8ff;
  font-size: 10px;
  font-weight: 850;
}
.wallet-shop-form {
  padding: 25px 24px;
}
.wallet-shop-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wallet-shop-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wallet-shop-section-head > div > span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  color: #2563eb;
  background: #edf4ff;
  font-size: 10px;
  font-weight: 900;
}
.wallet-shop-section-head h3 {
  margin: 0;
  color: #233550;
  font-size: 15px;
  font-weight: 900;
}
.wallet-shop-section-head p {
  margin: 2px 0 0;
  color: #8794a7;
  font-size: 9px;
}
.wallet-shop-section-head > small {
  color: #7a8aa1;
  font-size: 9px;
}
.character-step {
  margin-top: 25px;
}
.wallet-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}
.wallet-item-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 235px;
  align-items: center;
  flex-direction: column;
  padding: 16px 12px 13px;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  color: #263852;
  background: #fff;
  text-align: center;
  transition: 0.18s;
  overflow: hidden;
}
.wallet-item-card:hover {
  border-color: #8eb3f3;
  box-shadow: 0 10px 22px rgba(32, 74, 145, 0.11);
  transform: translateY(-2px);
}
.wallet-item-card.selected {
  border-color: #2563eb;
  background: #f3f7ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);
}
.wallet-item-card.is-disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.58;
}
.wallet-item-image {
  display: grid;
  width: 76px;
  height: 76px;
  margin-bottom: 10px;
  place-items: center;
  border: 1px solid #e1e8f2;
  border-radius: 16px;
  background: linear-gradient(145deg, #f8fafd, #edf3fb);
}
.wallet-item-image img {
  max-width: 62px;
  max-height: 62px;
  object-fit: contain;
}
.wallet-item-image > i {
  display: none;
  color: #9aa9bd;
  font-size: 30px;
}
.wallet-item-info {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
}
.wallet-item-info strong {
  display: -webkit-box;
  min-height: 36px;
  color: #20314d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.wallet-item-info small {
  margin: 4px 0;
  color: #8390a3;
  font-size: 9px;
}
.wallet-item-info b {
  color: #205dcc;
  font-size: 13px;
}
.wallet-item-info em {
  font-size: 8px;
  font-style: normal;
}
.wallet-item-limit {
  margin-top: auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #177553;
  background: #e9f8f1;
  font-size: 8px;
  font-weight: 800;
}
.wallet-item-limit.is-ended {
  color: #a24d48;
  background: #faeceb;
}
.wallet-item-check {
  position: absolute;
  right: 9px;
  top: 9px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid #d9e2ee;
  border-radius: 50%;
  color: transparent;
  background: #fff;
  font-size: 10px;
}
.wallet-item-card.selected .wallet-item-check {
  border-color: #2563eb;
  color: #fff;
  background: #2563eb;
}
.wallet-shop-empty {
  grid-column: 1/-1;
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #8391a6;
}
.wallet-shop-empty i {
  font-size: 35px;
}
.wallet-shop-characters {
  margin-bottom: 18px;
}
.wallet-shop-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px;
  border: 1px solid #dde6f2;
  border-radius: 13px;
  background: #f8fafd;
}
.wallet-shop-submit-row > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wallet-shop-submit-row > div > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: #2862ce;
  background: #eaf2ff;
}
.wallet-shop-submit-row span {
  display: flex;
  flex-direction: column;
  color: #465b79;
  font-size: 10px;
  font-weight: 750;
}
.wallet-shop-submit-row small {
  margin-top: 2px;
  color: #8593a7;
  font-size: 9px;
  font-weight: 500;
}
.wallet-buy-button {
  min-height: 43px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #3478f6, #1747b0);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.21);
  font-size: 10px;
  font-weight: 900;
}
.wallet-buy-button:disabled {
  box-shadow: none;
  opacity: 0.5;
}
.wallet-shop-history {
  margin: 0 24px 27px;
  overflow: hidden;
  border: 1px solid #dce5f2;
  border-radius: 16px;
}
.wallet-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 21px;
  border-bottom: 1px solid #e1e9f3;
  background: linear-gradient(120deg, #f3f7fd, #fff);
}
.wallet-history-head span {
  color: #2563eb;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
}
.wallet-history-head h3 {
  margin: 4px 0 0;
  color: #263852;
  font-size: 16px;
  font-weight: 900;
}
.wallet-history-head > strong {
  padding: 6px 9px;
  border-radius: 20px;
  color: #245dc5;
  background: #eaf2ff;
  font-size: 9px;
}
.wallet-history-table {
  padding: 15px 18px 18px;
  overflow-x: auto;
}
.wallet-history-table td {
  font-size: 10px;
  vertical-align: middle !important;
}
.wallet-history-table td b {
  color: #245dc5;
}
.shop-icon-preview {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  padding: 12px;
  border: 1px dashed #cad8eb;
  border-radius: 12px;
  background: #f7f9fc;
}
.shop-icon-preview > div {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  flex: 0 0 72px;
  border: 1px solid #dce5f1;
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
}
.shop-icon-preview img {
  display: none;
  max-width: 62px;
  max-height: 62px;
  object-fit: contain;
}
.shop-icon-preview > div > span {
  display: grid;
  place-items: center;
  color: #9aaac0;
  font-size: 27px;
}
.shop-icon-preview p {
  display: flex;
  margin: 0;
  flex-direction: column;
}
.shop-icon-preview strong {
  color: #31445f;
  font-size: 11px;
}
.shop-icon-preview small,
.portal-form-grid label > small {
  margin-top: 3px;
  color: #8794a7;
  font-size: 9px;
}
@media (max-width: 1100px) {
  .wallet-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .wallet-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wallet-shop-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .wallet-shop-balance {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .wallet-shop-hero,
  .wallet-shop-form,
  .wallet-shop-history {
    margin-right: 13px;
    margin-left: 13px;
  }
  .wallet-shop-form {
    padding: 20px 13px;
  }
  .wallet-item-grid {
    gap: 8px;
  }
  .wallet-item-card {
    min-height: 220px;
    padding: 13px 8px;
  }
  .wallet-item-image {
    width: 65px;
    height: 65px;
  }
  .wallet-item-image img {
    max-width: 53px;
    max-height: 53px;
  }
  .wallet-shop-submit-row {
    align-items: stretch;
    flex-direction: column;
  }
  .wallet-buy-button {
    width: 100%;
  }
  .wallet-history-table {
    padding: 12px;
  }
}
.wallet-item-image > svg {
  display: none;
  width: 34px;
  height: 34px;
  fill: #9aa9bd;
}
.shop-icon-preview > div > span svg {
  width: 30px;
  height: 30px;
  fill: #9aaac0;
}
.shop-admin-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.shop-admin-actions .btn {
  margin: 0;
}
.shop-admin-actions .shop-copy {
  color: #52657f;
  border-color: #bcc9da;
}
.shop-admin-actions .shop-copy:hover {
  color: #fff;
  border-color: #607895;
  background: #607895;
}
#shop-item-modal .modal-content {
  max-height: calc(100vh - 32px);
}
#shop-item-modal .modal-body {
  overflow-y: auto;
}

/* v3.0.10 - exchange history */
.exchange-history-card {
  margin: 0 0 28px;
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 34px rgba(31, 55, 95, 0.08);
}
.exchange-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 23px;
  border-bottom: 1px solid #e1e9f3;
  background: linear-gradient(120deg, #f2f6fd, #fff);
}
.exchange-history-head > div:first-child > span {
  color: #2563eb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.exchange-history-head h3 {
  margin: 4px 0 2px;
  color: #1d2d48;
  font-size: 19px;
  font-weight: 900;
}
.exchange-history-head p {
  margin: 0;
  color: #8090a5;
  font-size: 10px;
}
.exchange-relog-note {
  display: flex;
  max-width: 410px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid #cfe0fb;
  border-radius: 12px;
  background: #edf4ff;
}
.exchange-relog-note svg {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  fill: #2563eb;
}
.exchange-relog-note span {
  display: flex;
  flex-direction: column;
}
.exchange-relog-note strong {
  color: #2458b5;
  font-size: 10px;
}
.exchange-relog-note small {
  margin-top: 2px;
  color: #637997;
  font-size: 9px;
  line-height: 1.4;
}
.exchange-history-table {
  padding: 17px 19px 8px;
  overflow-x: auto;
}
.exchange-history-table .dataTables_wrapper {
  padding: 0;
}
.exchange-history-table td {
  vertical-align: middle !important;
  color: #40516b;
  font-size: 10px;
}
.exchange-knb-value {
  color: #175ec9;
  font-size: 11px;
}
.exchange-source,
.exchange-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}
.exchange-source.paid {
  color: #245dc4;
  background: #eaf2ff;
}
.exchange-source.support {
  color: #975e1b;
  background: #fff2dc;
}
.exchange-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.exchange-state.success {
  color: #147451;
  background: #e7f8f0;
}
.exchange-state.success i {
  background: #1aaa72;
}
.exchange-state.pending {
  color: #986116;
  background: #fff2d7;
}
.exchange-state.pending i {
  background: #e5a02d;
}
.exchange-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  padding: 13px 19px 18px;
}
.exchange-summary-grid article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 13px;
  border: 1px solid #e0e7f1;
  border-radius: 11px;
  background: #fafbfd;
}
.exchange-summary-grid article > span {
  color: #8190a5;
  font-size: 9px;
}
.exchange-summary-grid article > strong {
  margin-top: 3px;
  color: #2c405f;
  font-size: 16px;
}
.exchange-summary-grid article > small {
  color: #8795a9;
  font-size: 8px;
}
.exchange-summary-grid article.highlight {
  border-color: #cfe0fc;
  background: #edf4ff;
}
.exchange-summary-grid article.highlight strong {
  color: #205dcc;
}
.exchange-history-footnote {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 19px 19px;
  padding: 11px 13px;
  border-left: 3px solid #3478f6;
  border-radius: 8px;
  background: #f2f6fd;
}
.exchange-history-footnote i {
  margin-top: 1px;
  color: #2563eb;
}
.exchange-history-footnote p {
  margin: 0;
  color: #647792;
  font-size: 9px;
  line-height: 1.55;
}
@media (max-width: 800px) {
  .exchange-history-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .exchange-relog-note {
    max-width: none;
    width: 100%;
  }
  .exchange-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .exchange-history-table {
    padding: 13px 12px;
  }
  .exchange-summary-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .exchange-history-footnote {
    margin: 0 12px 14px;
  }
}

/* v3.0.11 - thong bao va man hinh xu ly dung chung */
.bootbox.portal-notice {
  padding-right: 0 !important;
}
.portal-notice .modal-dialog {
  max-width: 480px;
  margin: 1.75rem auto;
}
.portal-notice .modal-content {
  overflow: hidden;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff;
  box-shadow: 0 24px 70px rgba(9, 25, 52, 0.28) !important;
}
.portal-notice .modal-header {
  display: flex !important;
  align-items: center !important;
  gap: 13px;
  padding: 19px 21px !important;
  border-bottom: 1px solid #e5ebf3 !important;
  background: linear-gradient(120deg, #f3f7ff, #fff) !important;
}
.portal-notice .modal-title {
  margin: 0 !important;
  color: #1d2d48 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.25;
}
.portal-notice-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  flex: 0 0 43px;
  border-radius: 13px;
  color: #2563eb;
  background: #eaf2ff;
}
.portal-notice-icon svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}
.portal-notice .bootbox-close-button {
  position: absolute;
  right: 18px;
  top: 18px;
  margin: 0 !important;
  color: #75849a !important;
  font-size: 24px !important;
  line-height: 1 !important;
  opacity: 0.8;
}
.portal-notice .modal-body {
  padding: 20px 22px !important;
  color: #465873 !important;
  font-size: 14px !important;
  line-height: 1.65;
}
.portal-notice .bootbox-body {
  overflow-wrap: anywhere;
}
.portal-notice .modal-footer {
  gap: 9px;
  padding: 13px 20px !important;
  border-top: 1px solid #e8edf4 !important;
  background: #f8fafd !important;
}
.portal-notice .modal-footer .btn {
  min-width: 88px;
  min-height: 39px;
  margin: 0 !important;
  padding: 8px 17px !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
.portal-notice .bootbox-accept {
  color: #fff !important;
  background: linear-gradient(135deg, #3478f6, #1747b0) !important;
}
.portal-notice .bootbox-cancel {
  color: #4e607b !important;
  background: #e9eef6 !important;
}
.portal-notice-success .portal-notice-icon {
  color: #159164;
  background: #e7f8f0;
}
.portal-notice-success .bootbox-accept {
  background: linear-gradient(135deg, #20ad79, #10724f) !important;
}
.portal-notice-error .portal-notice-icon {
  color: #d14a4a;
  background: #ffeded;
}
.portal-notice-error .bootbox-accept {
  background: linear-gradient(135deg, #df5555, #ac292f) !important;
}
.portal-notice-warning .portal-notice-icon {
  color: #c98012;
  background: #fff2d8;
}
.portal-notice-warning .bootbox-accept {
  background: linear-gradient(135deg, #e6a12d, #bd7410) !important;
}
.portal-notice-confirm .portal-notice-icon {
  color: #2563eb;
  background: #eaf2ff;
}
.modal-backdrop.show {
  opacity: 0.52 !important;
  backdrop-filter: blur(3px);
}
.portal-notice.show .modal-dialog {
  animation: portalNoticeIn 0.2s ease-out;
}
@keyframes portalNoticeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
body .loading-form:not(.portal-global-loading) {
  display: none !important;
}
.portal-global-loading {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1090 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(10, 27, 55, 0.62) !important;
  backdrop-filter: blur(4px);
  color: #fff;
}
.portal-global-loading > div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  padding: 25px 22px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(26, 53, 96, 0.97),
    rgba(13, 36, 75, 0.98)
  );
  box-shadow: 0 22px 60px rgba(3, 14, 34, 0.35);
  text-align: center;
}
.portal-loader-ring {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #66a3ff;
  border-radius: 50%;
  animation: portalSpin 0.72s linear infinite;
}
.portal-global-loading strong {
  font-size: 15px;
  font-weight: 850;
}
.portal-global-loading small {
  margin-top: 5px;
  color: #b9cbe6;
  font-size: 10px;
}
@keyframes portalSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 575px) {
  .portal-notice .modal-dialog {
    margin: 16px;
  }
  .portal-notice .modal-header {
    padding: 16px 17px !important;
  }
  .portal-notice-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .portal-notice .modal-title {
    font-size: 16px !important;
  }
  .portal-notice .modal-body {
    padding: 17px !important;
    font-size: 13px !important;
  }
  .portal-notice .modal-footer {
    padding: 11px 15px !important;
  }
  .portal-notice .modal-footer .btn {
    flex: 1;
  }
  .portal-global-loading > div {
    width: 200px;
  }
}

/* v3.0.11b - can giua tieu de, khong che nut dong */
.portal-notice .modal-header {
  position: relative !important;
  display: grid !important;
  min-height: 76px;
  grid-template-columns: 48px minmax(0, 1fr) 32px !important;
  gap: 8px !important;
}
.portal-notice .portal-notice-icon {
  grid-column: 1;
  justify-self: start;
}
.portal-notice .modal-title {
  grid-column: 2;
  width: 100%;
  padding: 0 4px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.portal-notice .bootbox-close-button {
  grid-column: 3;
  position: static !important;
  justify-self: end;
  align-self: start;
  margin: 0 !important;
  padding: 2px !important;
  z-index: 2;
}
.portal-notice .modal-header:has(.bootbox-close-button) .modal-title {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 575px) {
  .portal-notice .modal-header {
    min-height: 68px;
    grid-template-columns: 42px minmax(0, 1fr) 27px !important;
  }
  .portal-notice .modal-title {
    font-size: 15px !important;
  }
}

/* v3.0.12 - Admin CP */
.admin-gift-form {
  display: grid;
  gap: 15px;
}
.admin-gift-recipient {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid #dbe7f7;
  border-radius: 13px;
  background: linear-gradient(120deg, #f1f6ff, #fff);
}
.admin-gift-recipient-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #3478f6, #1747b0);
  font-size: 22px;
}
.admin-gift-recipient > div {
  display: flex;
  flex-direction: column;
}
.admin-gift-recipient small,
.admin-gift-character header small {
  color: #2461d2;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
}
.admin-gift-recipient strong {
  color: #1d304d;
  font-size: 15px;
}
.admin-gift-recipient div span {
  color: #7d8ca2;
  font-size: 9px;
}
.admin-gift-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-gift-fields label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.admin-gift-fields label.full {
  grid-column: 1/-1;
}
.admin-gift-fields label > span {
  color: #334967;
  font-size: 10px;
  font-weight: 800;
}
.admin-gift-fields label > span i {
  margin-right: 5px;
  color: #2865d5;
  font-size: 14px;
}
.admin-gift-fields label > small {
  color: #8290a4;
  font-size: 8px;
}
.admin-gift-fields .form-control,
.admin-gift-fields .form-select {
  height: 42px !important;
}
.admin-gift-character {
  padding: 13px;
  border: 1px solid #dde6f3;
  border-radius: 13px;
  background: #f8fafd;
}
.admin-gift-character > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.admin-gift-character > header div {
  display: flex;
  flex-direction: column;
}
.admin-gift-character > header strong {
  color: #223752;
  font-size: 13px;
}
.admin-gift-character > header > span {
  padding: 4px 8px;
  border-radius: 20px;
  color: #9b6513;
  background: #fff0cf;
  font-size: 8px;
  font-weight: 850;
}
.admin-gift-character .character-picker {
  padding: 0;
  border: 0;
  background: transparent;
}
.admin-gift-character .character-picker-title {
  display: none;
}
.admin-gift-actions {
  position: sticky;
  bottom: -17px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -20px -17px;
  padding: 12px 20px;
  border-top: 1px solid #e1e8f2;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}
.admin-gift-actions > span {
  color: #73849b;
  font-size: 9px;
}
.admin-gift-actions > span i {
  color: #18a875;
}
.admin-gift-actions button {
  display: flex;
  min-width: 155px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #3478f6, #1747b0);
  box-shadow: 0 8px 17px rgba(37, 99, 235, 0.21);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
@media (max-width: 575px) {
  .admin-gift-fields {
    grid-template-columns: 1fr;
  }
  .admin-gift-fields label.full {
    grid-column: auto;
  }
  .admin-gift-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-gift-actions button {
    width: 100%;
  }
}
.admin-live-overview {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 17px 19px;
  border: 1px solid #cfe3dc;
  border-radius: 15px;
  background: linear-gradient(120deg, #f0fbf7, #fff);
  box-shadow: 0 9px 24px rgba(19, 126, 89, 0.07);
}
.admin-live-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #20b77d, #0b8058);
  box-shadow: 0 7px 16px rgba(16, 145, 98, 0.2);
}
.admin-live-icon svg {
  width: 25px;
  fill: currentColor;
}
.admin-live-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.admin-live-copy > span {
  color: #159267;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.admin-live-copy strong {
  margin-top: 2px;
  color: #1d3540;
  font-size: 17px;
}
.admin-live-copy small {
  margin-top: 2px;
  color: #788e96;
  font-size: 9px;
}
.admin-live-copy code {
  color: #23775b;
}
.admin-live-value {
  display: grid;
  min-width: 130px;
  grid-template-columns: 9px auto;
  align-items: center;
  column-gap: 8px;
  padding: 10px 14px;
  border: 1px solid #ccebdd;
  border-radius: 12px;
  background: #fff;
}
.admin-live-value i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20b77d;
  box-shadow: 0 0 0 4px rgba(32, 183, 125, 0.12);
}
.admin-live-value b {
  color: #087a55;
  font-size: 22px;
  line-height: 1;
}
.admin-live-value span {
  grid-column: 1/-1;
  margin-top: 4px;
  color: #789087;
  font-size: 8px;
  text-align: right;
}
.admin-live-value.is-error {
  border-color: #f1d2cd;
}
.admin-live-value.is-error i {
  background: #d85a4e;
  box-shadow: 0 0 0 4px rgba(216, 90, 78, 0.1);
}
.admin-live-value.is-error b {
  color: #c04b41;
}
@media (max-width: 575px) {
  .admin-live-overview {
    grid-template-columns: 42px 1fr;
    padding: 14px;
  }
  .admin-live-icon {
    width: 42px;
    height: 42px;
  }
  .admin-live-value {
    grid-column: 1/-1;
    grid-template-columns: 9px auto 1fr;
    min-width: 0;
  }
  .admin-live-value span {
    grid-column: auto;
    margin: 0;
    text-align: right;
  }
}
.admin-search-card {
  padding: 23px;
  border: 1px solid #dbe5f2;
  border-radius: 17px;
  background: linear-gradient(130deg, #f5f8ff, #fff);
  box-shadow: 0 10px 28px rgba(27, 55, 99, 0.07);
}
.admin-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 19px;
}
.admin-section-icon,
.admin-result-title > span {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  flex: 0 0 43px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #3478f6, #1747b0);
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.2);
  font-size: 20px;
}
.admin-section-heading small {
  color: #2563eb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.admin-section-heading h3 {
  margin: 3px 0;
  color: #1c2d48;
  font-size: 20px;
  font-weight: 900;
}
.admin-section-heading p {
  margin: 0;
  color: #7c8ba1;
  font-size: 10px;
}
.admin-search-box {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr) 135px;
  gap: 9px;
}
.admin-search-box .form-control,
.admin-search-box .form-select {
  height: 47px !important;
}
.admin-search-box button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 47px !important;
  border-radius: 10px !important;
}
.admin-search-help {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 12px;
  color: #71829a;
  font-size: 9px;
}
.admin-search-help i {
  margin-right: 4px;
  color: #2563eb;
}
.admin-result-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px !important;
  padding: 0 !important;
}
.admin-result-title > span {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
  font-size: 16px;
}
.admin-result-title > div {
  display: flex;
  flex-direction: column;
}
.admin-result-title strong {
  color: #263852;
  font-size: 13px;
}
.admin-result-title small {
  margin-top: 2px;
  color: #8794a7;
  font-size: 9px;
}
#load-thong-tin-admin {
  padding: 0 !important;
}
#load-thong-tin-admin .form-group {
  display: grid;
  gap: 7px;
}
#load-thong-tin-admin .form-check {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 9px 13px 9px 42px;
  border: 1px solid #dfe7f2;
  border-radius: 11px;
  background: #fff;
}
#load-thong-tin-admin .form-check:hover {
  border-color: #94b4ee;
  background: #f7faff;
}
#load-thong-tin-admin .form-check-input {
  margin-left: -27px;
}
#load-thong-tin-admin .form-check-label {
  width: 100%;
  color: #31445f;
  font-weight: 750;
}
.admin-tools {
  margin-top: 9px;
}
.admin-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.admin-tool {
  position: relative;
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #dce5f2;
  border-radius: 13px;
  color: #334966;
  background: #fff;
  text-align: left;
  transition: 0.18s;
}
.admin-tool:hover {
  border-color: #8fb1ee;
  box-shadow: 0 9px 20px rgba(30, 70, 135, 0.1);
  transform: translateY(-1px);
}
.admin-tool > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 10px;
  color: #2862ce;
  background: #eaf2ff;
  font-size: 20px;
}
.admin-tool > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.admin-tool strong {
  font-size: 11px;
}
.admin-tool small {
  margin-top: 3px;
  color: #8794a7;
  font-size: 8px;
  line-height: 1.4;
}
.admin-tool em {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 6px;
  border-radius: 20px;
  color: #996415;
  background: #fff0cd;
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
}
.admin-tool.is-pending {
  cursor: not-allowed;
  opacity: 0.72;
}
.admin-player-form {
  padding: 2px;
}
.admin-player-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-bottom: 18px;
}
.admin-player-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 12px 13px;
  border: 1px solid #dfe7f2;
  border-radius: 11px;
  background: #f8fafd;
}
.admin-player-summary span,
.admin-player-grid label > span,
.admin-wallet-title small,
.admin-server-wallets div > span {
  color: #8290a4;
  font-size: 9px;
}
.admin-player-summary strong {
  margin-top: 3px;
  color: #253955;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.admin-player-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-player-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-wallet-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 10px;
  padding-top: 18px;
  border-top: 1px solid #e3e9f2;
}
.admin-wallet-title strong {
  color: #263852;
  font-size: 13px;
}
.admin-server-wallets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.admin-server-wallets article {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 13px;
  border: 1px solid #dce6f3;
  border-radius: 13px;
  background: linear-gradient(145deg, #f7faff, #fff);
}
.admin-server-wallets header {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6ebf3;
}
.admin-server-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20ad79;
  box-shadow: 0 0 0 4px rgba(32, 173, 121, 0.11);
}
.admin-server-wallets header strong {
  color: #253955;
  font-size: 11px;
}
.admin-server-wallets header small {
  color: #8492a6;
  font-size: 8px;
}
.admin-server-wallets div {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 9px;
  background: #f3f7fd;
}
.admin-server-wallets div b {
  margin-top: 3px;
  color: #245dcc;
  font-size: 13px;
}
.admin-server-wallets .knb {
  grid-column: 1/-1;
  background: #eaf2ff;
}
.admin-player-state {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: #edf8f3;
}
.admin-player-state .state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18a66e;
}
.admin-player-state > div {
  display: flex;
  flex-direction: column;
}
.admin-player-state small {
  color: #6e8d80;
  font-size: 8px;
}
.admin-player-state strong {
  color: #147451;
  font-size: 10px;
}
.admin-save-player {
  min-height: 43px;
  padding: 10px 17px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #3478f6, #1747b0);
  font-size: 11px;
  font-weight: 850;
}
.right-home:has(#admin-search-form) #admin-modal .modal-dialog {
  max-width: 760px;
}
@media (max-width: 800px) {
  .admin-search-box {
    grid-template-columns: 1fr;
  }
  .admin-tool-grid,
  .admin-server-wallets {
    grid-template-columns: 1fr;
  }
  .admin-search-help,
  .admin-wallet-title {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 575px) {
  .admin-search-card {
    padding: 17px 13px;
  }
  .admin-section-heading p {
    line-height: 1.45;
  }
  .admin-player-summary,
  .admin-player-grid {
    grid-template-columns: 1fr;
  }
  .admin-server-wallets article {
    grid-template-columns: 1fr;
  }
  .admin-server-wallets .knb {
    grid-column: auto;
  }
}
.character-sync-button {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid #cfe0fb !important;
  border-radius: 8px !important;
  color: #205dc5 !important;
  background: #edf5ff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}
.character-sync-button:hover {
  border-color: #8eb6f2 !important;
  background: #e3efff !important;
}
.character-sync-button:disabled,
.character-lazy.is-syncing .character-sync-button {
  cursor: wait;
  opacity: 0.6;
}

/* DataTables: dong bo phan trang tren toan website, tranh chu xanh bi chim trong nen xanh. */
.dataTables_wrapper .dataTables_paginate ul.pagination {
  align-items: center;
  gap: 4px;
  margin: 4px 0 !important;
}
.dataTables_wrapper .dataTables_paginate .page-item {
  margin: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
  display: inline-grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid #d7e3ef !important;
  border-radius: 8px !important;
  color: #2563eb !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 11px;
  line-height: 1;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link:hover,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link:focus {
  border-color: #2563eb !important;
  color: #fff !important;
  background: #2563eb !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22) !important;
}
.dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
  border-color: #9abcf1 !important;
  color: #174da9 !important;
  background: #edf4ff !important;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  border-color: #e2e9f1 !important;
  color: #9aa8b9 !important;
  background: #f7f9fc !important;
  opacity: 0.72;
}
/* Tuong thich DataTables khong dung Bootstrap: nut trang nam trong the span. */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item) {
  display: inline-grid !important;
  min-width: 34px !important;
  height: 34px !important;
  place-items: center;
  margin: 0 2px !important;
  padding: 0 10px !important;
  border: 1px solid #d7e3ef !important;
  border-radius: 8px !important;
  color: #2563eb !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 11px;
  line-height: 1;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:not(.page-item),
.dataTables_wrapper .dataTables_paginate .paginate_button.current:not(.page-item):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:not(.page-item):focus {
  border-color: #2563eb !important;
  color: #fff !important;
  background: #2563eb !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):not(.current):not(.disabled):hover {
  border-color: #9abcf1 !important;
  color: #174da9 !important;
  background: #edf4ff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:not(.page-item),
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:not(.page-item):hover {
  border-color: #e2e9f1 !important;
  color: #9aa8b9 !important;
  background: #f7f9fc !important;
  opacity: 0.72;
}
.dataTables_wrapper .dataTables_paginate span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Dong bo bo loc va so dong cua tat ca DataTable. */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: #61748b !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}
.dataTables_wrapper .dataTables_length select {
  width: auto !important;
  min-width: 58px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 5px !important;
  padding: 4px 24px 4px 8px !important;
  border: 1px solid #d5e1ed !important;
  border-radius: 8px !important;
  color: #263d59 !important;
  background-color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.dataTables_wrapper .dataTables_length select option {
  color: #263d59 !important;
  background: #fff !important;
}
.dataTables_wrapper .dataTables_filter input {
  height: 34px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid #d5e1ed !important;
  border-radius: 8px !important;
  color: #263d59 !important;
  background: #fff !important;
  font-size: 10px !important;
}
.dataTables_wrapper .dataTables_info {
  color: #61748b !important;
  font-size: 10px !important;
}