@charset "UTF-8";
.bg-lr {
  background-color: #fff;
  box-shadow: 0 1px 6px #359e99;
}

.btn-show-collapse {
  color: #17a2b8;
  background-color: #edfdff;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid #7bbfc9;
}
.btn-show-collapse:focus {
  outline: 0;
  box-shadow: unset;
}
.btn-show-collapse.collapsed {
  background-color: #fff;
}

.wrapper-btn-list-price-proxy .btn-show-list-price-proxy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: unset;
  color: #4e4e4e;
  cursor: pointer;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy.active {
  outline: unset;
  color: #fff;
  background-color: #44b4b7;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy:focus-visible {
  outline: unset;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy:hover {
  outline: unset;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy .wrapper-description-btn-list-price-proxy {
  flex: 1 1;
  text-align: start;
  margin-left: 6px;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy .icon-create-proxy-ipv4 {
  font-size: 40px;
  background-color: #ccebff;
  color: rgb(0, 140, 255);
  padding: 6px;
  width: 60px;
  border-radius: 6px;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy .icon-create-proxy-rotating {
  font-size: 40px;
  background-color: #fbd5d5;
  color: rgb(237, 28, 28);
  padding: 6px;
  width: 60px;
  border-radius: 6px;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy .icon-create-proxy-static {
  font-size: 40px;
  background-color: #ceceff;
  color: rgb(0, 15, 124);
  padding: 6px;
  width: 60px;
  border-radius: 6px;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy .icon-create-proxy-static-server2 {
  font-size: 40px;
  background-color: #da251d;
  color: #ffff00;
  padding: 6px;
  width: 60px;
  border-radius: 6px;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy .icon-create-proxy-ipv6 {
  font-size: 40px;
  background-color: #daefd6;
  color: rgb(94, 189, 34);
  padding: 6px;
  width: 60px;
  border-radius: 6px;
}
.wrapper-btn-list-price-proxy .btn-show-list-price-proxy .icon-create-proxy-gaming {
  font-size: 40px;
  background-color: #ffdecf;
  color: rgb(243, 114, 22);
  padding: 6px;
  width: 60px;
  border-radius: 6px;
}

.wrapper-list-price-country-proxy {
  color: #333;
  font-weight: 500;
  border-radius: 4px;
  box-shadow: 0 0 4px #b5b5b5;
  padding: 4px;
  width: 120px;
}
.wrapper-list-price-country-proxy img {
  box-shadow: 0 0 2px rgb(167, 167, 167);
  border-radius: 4px;
}
.wrapper-list-price-country-proxy .text-country {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines to show */
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.wrapper-list-price-country-proxy[data-title] {
  position: relative;
  cursor: pointer;
}
.wrapper-list-price-country-proxy[data-title]:hover:after {
  opacity: 1;
  visibility: visible;
}
.wrapper-list-price-country-proxy[data-title]:after {
  content: attr(data-title);
  top: -20px;
  left: 0;
  right: 0;
  white-space: nowrap;
  box-shadow: 1px 1px 3px #222222;
  opacity: 0;
  font-size: 1rem;
  z-index: 99999;
  visibility: hidden;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  display: block;
  background-color: rgb(90, 90, 90);
  color: #fff;
  position: absolute;
  border-radius: 4px;
  font-weight: 400;
  text-align: center;
  padding: 0 8px;
  width: max-content;
}

swiper-container {
  width: 100%;
  height: 100%;
}

swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact a.btn-contact {
  outline: unset;
  color: #fff;
  font-size: 20px;
}
.contact a.btn-contact:hover {
  opacity: 0.8;
}
.contact a.btn-contact.btn-contact-messenger {
  background-image: linear-gradient(30deg, #0695FF, #A334FA);
}
.contact a.btn-contact.btn-contact-telegram {
  background-color: #229ED9;
}
.contact a.btn-contact.btn-contact-zalo {
  background-color: #0A68FE;
}
.contact button.btn-show-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: unset;
  cursor: pointer;
  background-color: #44b4b7 !important;
  color: #fff;
}
.contact button.btn-show-contact:focus {
  outline: unset !important;
}
.contact button.contact-btn-register {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: unset;
  cursor: pointer;
  background-color: #447ab7;
  color: #fff;
}
.contact button.contact-btn-register:focus {
  outline: unset !important;
}
.contact a.contact-btn-back-home {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: unset;
  cursor: pointer;
  background-color: #49a9cf;
  color: #fff;
}
.contact a.contact-btn-back-home:focus {
  outline: unset !important;
}

.s-wrapper-list-price-country-proxy {
  width: 50px;
}
.s-wrapper-list-price-country-proxy .text-country {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines to show */
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.wrapper-check-country {
  margin: 8px;
  padding: 2px;
  border-radius: 7px;
  box-shadow: 0 0px 3px #bdbdbd;
  width: 94px;
}
.wrapper-check-country input {
  width: 30px;
  height: 30px;
  margin-right: 2px;
  cursor: pointer;
}
.wrapper-check-country .wrapper-label-check-country {
  display: flex;
  align-items: center;
}
.wrapper-check-country .wrapper-label-check-country img {
  box-shadow: 0 0 2px rgb(167, 167, 167);
  border-radius: 4px;
  height: 100%;
}
.wrapper-check-country .name-check-country {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines to show */
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.wrapper-check-country[data-title] {
  position: relative;
  cursor: pointer;
  word-break: break-all;
}
.wrapper-check-country[data-title]:hover:after {
  opacity: 1;
  visibility: visible;
}
.wrapper-check-country[data-title]:after {
  content: attr(data-title);
  top: -20px;
  right: 0;
  white-space: nowrap;
  box-shadow: 1px 1px 3px #222222;
  opacity: 0;
  font-size: 1rem;
  z-index: 99999;
  visibility: hidden;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  display: block;
  background-color: rgb(90, 90, 90);
  color: #fff;
  position: absolute;
  border-radius: 4px;
  font-weight: 400;
  text-align: center;
  padding: 0 8px;
  width: max-content;
}

.admin-rvn-products-wrapper .product-grid {
  display: grid;
  gap: 4px;
  max-width: 600px;
}
.admin-rvn-products-wrapper .rvn-product {
  padding: 6px;
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: grab;
  font-size: 14px;
}
.admin-rvn-products-wrapper .rvn-product .order {
  font-weight: bold;
  width: 24px;
  text-align: center;
  background: #eee;
  border-radius: 4px;
}
.admin-rvn-products-wrapper .dragging {
  opacity: 0.5;
  background: #d1e7ff;
}

.admin-service-stats {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-service-stats__header {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.admin-service-stats__header-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.admin-service-stats__header-desc {
  font-size: 14px;
  color: #666;
  margin: 5px 0 0 0;
}

.admin-service-stats__section {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.admin-service-stats__section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.admin-service-stats__section-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.admin-service-stats__btn {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.admin-service-stats__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-service-stats__btn-update {
  background: #28a745;
  color: #fff;
  border: none;
}

.admin-service-stats__btn-update:hover:not(:disabled) {
  background: #218838;
}

.admin-service-stats__btn-delete {
  background: #dc3545;
  color: #fff;
  border: none;
}

.admin-service-stats__btn-delete:hover:not(:disabled) {
  background: #c82333;
}

.admin-service-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.admin-service-stats__card {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  padding: 12px;
}

.admin-service-stats__card-header {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
}

.admin-service-stats__card-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin: 0;
  word-break: break-word;
}

.admin-service-stats__card-body {
  margin-bottom: 10px;
}

.admin-service-stats__stat {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

.admin-service-stats__stat:last-child {
  border-bottom: none;
}

.admin-service-stats__stat-label {
  color: #666;
  font-weight: 500;
}

.admin-service-stats__stat-value {
  font-weight: 600;
  color: #333;
}

.admin-service-stats__stat-value--active {
  color: #28a745;
}

.admin-service-stats__stat-value--expired {
  color: #dc3545;
}

.admin-service-stats__stat-value--users {
  color: #007bff;
}

.admin-service-stats__card-actions {
  display: flex;
  gap: 6px;
}

.admin-service-stats__btn-sm {
  flex: 1;
  padding: 6px 8px;
  border: none;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
  text-decoration: none;
}

.admin-service-stats__btn-sm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-service-stats__btn-delete-sm {
  background: #dc3545;
  color: #fff;
}

.admin-service-stats__btn-delete-sm:hover {
  background: #c82333;
}

.admin-service-stats__empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.admin-service-stats__empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.5;
}

.detail-customer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}

.detail-customer-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 650;
  margin: 0;
}
.detail-customer-title i {
  color: #64748b;
}

.detail-customer-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: #0d6efd;
  background: #fff;
  border: 1px solid #e5e7eb;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.detail-customer-back:hover {
  background: #f7f7f8;
  border-color: #cbd0d6;
  color: #0a58ca;
}

.detail-customer {
  --dc-primary: #2563eb;
  --dc-primary-d: #1d4ed8;
  --dc-ink: #1f2937;
  --dc-muted: #6b7280;
  --dc-border: #e2e5e9;
  --dc-surface: #ffffff;
  --dc-surface-2: #f7f7f8;
  --dc-run: #15803d;
  --dc-exp: #b45309;
  --dc-warning: #ffc107;
  --dc-cancel: #b4232f;
  --dc-radius: 8px;
  --dc-radius-sm: 6px;
  color: var(--dc-ink);
  font-size: 0.875rem;
}
.detail-customer .text-danger {
  color: var(--dc-cancel) !important;
}
.detail-customer .text-success {
  color: var(--dc-run) !important;
}
.detail-customer .text-info,
.detail-customer .text-primary {
  color: var(--dc-primary) !important;
}
.detail-customer .fw-700 {
  font-weight: 700;
}
.detail-customer > .content > .alert {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--dc-radius-sm);
  box-shadow: none;
}
.detail-customer > .content > .alert.alert-success {
  color: var(--dc-run);
  background: #f7faf8;
  border-color: #dce8e0;
}
.detail-customer > .content > .alert.alert-danger {
  color: var(--dc-cancel);
  background: #fbf8f8;
  border-color: #eadcde;
}
.detail-customer > .content > .alert .btn-close {
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.detail-customer .dc-card {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 16px;
}
.detail-customer .dc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--dc-border);
  background: var(--dc-surface);
  flex-wrap: wrap;
}
.detail-customer .dc-head__meta {
  min-width: 0;
}
.detail-customer .dc-head__name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: 650;
}
.detail-customer .dc-head__fullname {
  color: var(--dc-ink);
}
.detail-customer .dc-head__fullname:hover {
  color: var(--dc-primary);
}
.detail-customer .dc-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.detail-customer .dc-head__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.detail-customer .dc-inline {
  margin: 0;
  display: inline-flex;
}
.detail-customer .dc-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid var(--dc-border);
  background: var(--dc-surface-2);
  text-decoration: none;
}
.detail-customer .dc-pill i {
  font-size: 7px;
}
.detail-customer .dc-pill--ok {
  color: var(--dc-run);
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.detail-customer .dc-pill--danger {
  color: var(--dc-cancel);
  background: #fff1f2;
  border-color: #fecdd3;
}
.detail-customer .dc-pill--warn {
  color: var(--dc-exp);
  background: #fffbeb;
  border-color: #fde68a;
}
.detail-customer .dc-pill--role {
  color: #4338ca;
  background: #eef2ff;
  border-color: #c7d2fe;
  text-transform: capitalize;
}
.detail-customer .dc-pill--neutral {
  color: #64748b;
  background: #f8fafc;
  border-color: #dbe1e8;
}
.detail-customer .dc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.detail-customer .dc-btn i {
  color: inherit !important;
}
.detail-customer .dc-btn:hover {
  transform: translateY(-1px);
}
.detail-customer .dc-btn--primary {
  background: var(--dc-primary);
  border-color: var(--dc-primary);
  color: #fff;
}
.detail-customer .dc-btn--primary:hover {
  background: var(--dc-primary-d);
  border-color: var(--dc-primary-d);
  color: #fff;
}
.detail-customer .dc-btn--green {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.detail-customer .dc-btn--green:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.detail-customer .dc-btn--warn {
  background: #b77900;
  border-color: #b77900;
  color: #fff;
}
.detail-customer .dc-btn--warn:hover {
  background: #946200;
  border-color: #946200;
  color: #fff;
}
.detail-customer .dc-btn--danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.detail-customer .dc-btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.detail-customer .dc-btn--ghost {
  background: #fff;
  border-color: var(--dc-border);
  color: var(--dc-ink);
}
.detail-customer .dc-btn--ghost:hover {
  background: var(--dc-surface-2);
  border-color: #cbd0d6;
  color: var(--dc-ink);
}
.detail-customer .dc-btn--o-primary {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--dc-primary);
}
.detail-customer .dc-btn--o-primary:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: var(--dc-primary-d);
}
.detail-customer .dc-btn--o-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: var(--dc-exp);
}
.detail-customer .dc-btn--o-warn:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
.detail-customer .dc-btn--xs {
  padding: 5px 10px;
  font-size: 12px;
}
.detail-customer a.dc-btn {
  color: #0d6efd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.detail-customer a.dc-btn:hover {
  color: #0a58ca;
}
.detail-customer .dc-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--dc-border);
  border-bottom: 1px solid var(--dc-border);
}
.detail-customer .dc-kpi {
  background: #fff;
  padding: 11px 16px;
}
.detail-customer .dc-kpi__label {
  color: var(--dc-muted);
  font-size: 12px;
  margin-bottom: 2px;
}
.detail-customer .dc-kpi__value {
  color: var(--dc-ink);
  font-size: 17px;
  font-weight: 650;
}
.detail-customer .dc-kpi--balance {
  background: #fff;
  box-shadow: none;
}
.detail-customer .dc-kpi--balance .dc-kpi__label {
  color: var(--dc-muted);
  font-weight: 400;
}
.detail-customer .dc-kpi--balance .dc-kpi__value {
  color: #dc2626 !important;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.detail-customer .dc-body {
  display: grid;
  grid-template-columns: 320px 1fr;
}
.detail-customer .dc-contact {
  padding: 16px 18px;
  border-right: 1px solid var(--dc-border);
}
.detail-customer .dc-services {
  padding: 16px 18px;
}
.detail-customer .dc-sec-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dc-muted);
  margin: 0 0 12px;
}
.detail-customer .dc-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  align-items: baseline;
}
.detail-customer .dc-dl__k {
  color: var(--dc-muted);
  white-space: nowrap;
}
.detail-customer .dc-dl__v {
  font-weight: 600;
  min-width: 0;
}
.detail-customer .dc-break {
  word-break: break-word;
}
.detail-customer .dc-unverified {
  margin-left: 6px;
}
.detail-customer .dc-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.detail-customer .dc-svc {
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-sm);
  padding: 11px 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.detail-customer .dc-svc:hover {
  background: var(--dc-surface-2);
  border-color: #cbd0d6;
}
.detail-customer .dc-svc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.detail-customer .dc-svc__name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}
.detail-customer .dc-svc__total {
  flex-shrink: 0;
  color: #fff;
  background: var(--dc-primary);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  line-height: 1.5;
}
.detail-customer .dc-svc__total small {
  color: inherit;
  opacity: 0.8;
  font-weight: 500;
  font-size: 10.5px;
}
.detail-customer .dc-svc__total:hover {
  color: #fff;
  background: var(--dc-primary-d);
}
.detail-customer .dc-svc--single {
  display: flex;
  align-items: center;
}
.detail-customer .dc-svc--single .dc-svc__top {
  margin-bottom: 0;
  width: 100%;
}
.detail-customer .dc-svc__stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.detail-customer .dc-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 4px;
  border-top: 1px solid #f0f1f2;
  color: var(--dc-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.detail-customer .dc-stat span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.detail-customer .dc-stat i {
  font-size: 8px;
}
.detail-customer .dc-stat b {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--dc-primary);
  font-weight: 750;
  text-align: right;
  transition: color 0.12s ease, background 0.12s ease;
}
.detail-customer .dc-stat:hover {
  color: var(--dc-ink);
  background: #eff6ff;
}
.detail-customer .dc-stat:hover b {
  color: #fff;
  background: var(--dc-primary);
}
.detail-customer .dc-stat--run i {
  color: var(--dc-run);
}
.detail-customer .dc-stat--exp i {
  color: var(--dc-warning);
}
.detail-customer .dc-stat--cancel i {
  color: #64748b;
}
.detail-customer .dc-svc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.detail-customer .dc-copy {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--dc-primary) !important;
  background: #eff6ff;
  border-bottom: 1px dashed #93c5fd;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.detail-customer .dc-copy::after {
  content: "\f0c5";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.72em;
  margin-left: 6px;
  opacity: 0.65;
}
.detail-customer .dc-copy:hover {
  background: #dbeafe;
  color: var(--dc-primary-d) !important;
  border-color: var(--dc-primary);
}
.detail-customer .dc-copy:hover::after {
  opacity: 0.9;
}
.detail-customer .mb-detail-nav-pills {
  box-shadow: none;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 8px;
  gap: 2px;
}
.detail-customer .mb-detail-nav-pills .nav-link {
  min-width: auto;
  text-align: left;
  padding: 9px 12px;
  font-size: 13.5px;
  border: 1px solid transparent !important;
  border-radius: var(--dc-radius-sm) !important;
  font-weight: 500;
  color: var(--dc-ink) !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.detail-customer .mb-detail-nav-pills .nav-link:hover {
  background: var(--dc-surface-2);
}
.detail-customer .mb-detail-nav-pills .nav-link.active {
  background: var(--dc-primary) !important;
  border-color: var(--dc-primary) !important;
  color: #fff !important;
  font-weight: 650;
}
.detail-customer .detail-updateinfo {
  padding: 20px 22px;
  background: var(--dc-surface);
  box-shadow: none;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  min-height: 320px;
}
.detail-customer .detail-updateinfo h6 {
  font-size: 15px;
  font-weight: 700;
  color: var(--dc-ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dc-border);
}
.detail-customer .detail-updateinfo .form-group {
  margin-bottom: 14px;
}
.detail-customer .detail-updateinfo .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dc-ink);
  line-height: 1.2;
  margin-bottom: 5px;
  padding: 0;
}
.detail-customer .detail-updateinfo .form-control,
.detail-customer .detail-updateinfo .custom-select,
.detail-customer .detail-updateinfo .form-select {
  height: auto;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--dc-border);
  border-radius: 6px;
  color: var(--dc-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.detail-customer .detail-updateinfo .form-control:focus,
.detail-customer .detail-updateinfo .custom-select:focus,
.detail-customer .detail-updateinfo .form-select:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}
.detail-customer .detail-updateinfo .form-control:disabled, .detail-customer .detail-updateinfo .form-control[readonly],
.detail-customer .detail-updateinfo .custom-select:disabled,
.detail-customer .detail-updateinfo .custom-select[readonly],
.detail-customer .detail-updateinfo .form-select:disabled,
.detail-customer .detail-updateinfo .form-select[readonly] {
  background: var(--dc-surface-2);
  color: var(--dc-muted);
}
.detail-customer .detail-updateinfo .input-group {
  margin-bottom: 14px;
}
.detail-customer .detail-updateinfo .input-group .input-group-text {
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dc-ink);
}
.detail-customer .detail-updateinfo .input-group > :not(:first-child) {
  margin-left: -1px;
}
.detail-customer .detail-updateinfo .input-group > :not(:first-child):not(:last-child) {
  border-radius: 0;
}
.detail-customer .detail-updateinfo .input-group > :first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.detail-customer .detail-updateinfo .input-group > :last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.detail-customer .detail-updateinfo .input-group:focus-within {
  z-index: 1;
}
.detail-customer .detail-updateinfo .btn {
  border-radius: 6px;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 16px;
}
.detail-customer .detail-updateinfo .btn-primary,
.detail-customer .detail-updateinfo .btn-info {
  background: var(--dc-primary);
  border-color: var(--dc-primary);
  color: #fff;
}
.detail-customer .detail-updateinfo .btn-primary:hover,
.detail-customer .detail-updateinfo .btn-info:hover {
  background: var(--dc-primary-d);
  border-color: var(--dc-primary-d);
}
.detail-customer .detail-updateinfo .btn-outline-primary {
  border-color: #cbd0d6;
  color: var(--dc-primary);
}
.detail-customer .detail-updateinfo .btn-block {
  width: 100%;
}
.detail-customer .detail-updateinfo .btn-link {
  padding: 4px 0;
  font-weight: 600;
  text-decoration: none;
}
.detail-customer .detail-updateinfo .btn-link:hover {
  text-decoration: underline;
}
.detail-customer .detail-updateinfo .form-check {
  padding: 8px 0 8px 28px;
  min-height: auto;
}
.detail-customer .detail-updateinfo .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  margin-left: -28px;
  cursor: pointer;
}
.detail-customer .detail-updateinfo .form-check-label {
  font-weight: 500;
  cursor: pointer;
}
.detail-customer .detail-updateinfo .form-check-inline {
  margin-right: 16px;
}
.detail-customer .detail-updateinfo .alert {
  border-radius: 8px;
  font-size: 13px;
}

@media (max-width: 991.98px) {
  .detail-customer .dc-body {
    grid-template-columns: 1fr;
  }
  .detail-customer .dc-contact {
    border-right: none;
    border-bottom: 1px solid var(--dc-border);
  }
  .detail-customer .dc-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767.98px) {
  .detail-customer .dc-head {
    align-items: flex-start;
  }
  .detail-customer .dc-head__actions {
    margin-left: 0;
    width: 100%;
  }
  .detail-customer .dc-head__actions .dc-btn,
  .detail-customer .dc-head__actions .dc-inline {
    flex: 1 1 auto;
  }
  .detail-customer .dc-head__actions .dc-btn {
    justify-content: center;
  }
  .detail-customer .dc-svc-links .dc-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}
@media (max-width: 739px) {
  .detail-customer .mb-detail-nav-pills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
    padding: 6px;
  }
  .detail-customer .mb-detail-nav-pills .nav-link {
    min-width: 0;
    flex: none;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.2;
    padding: 9px 6px;
  }
}
@media (max-width: 479.98px) {
  .detail-customer .dc-kpis {
    grid-template-columns: 1fr;
  }
  .detail-customer .dc-svc-grid {
    grid-template-columns: 1fr;
  }
}
.kyc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.kyc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.kyc-switch .kyc-slider {
  position: absolute;
  inset: 0;
  background: #ced4da;
  border-radius: 24px;
  transition: 0.2s;
  cursor: pointer;
}

.kyc-switch .kyc-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.kyc-switch input:checked + .kyc-slider {
  background: #0d6efd;
}

.kyc-switch input:checked + .kyc-slider::before {
  transform: translateX(18px);
}

.kyc-row:hover {
  background: rgba(13, 110, 253, 0.03);
}

/* Segmented control (chọn 1 trong 2 hướng) */
.kyc-seg {
  display: inline-flex;
  border: 1px solid #ced4da;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.kyc-seg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.kyc-seg label {
  margin: 0;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #495057;
  background: #fff;
  cursor: pointer;
  transition: 0.15s;
  user-select: none;
}

.kyc-seg label + input + label {
  border-left: 1px solid #ced4da;
}

.kyc-seg input:checked + label {
  background: #0d6efd;
  color: #fff;
}

.kyc-seg input:focus-visible + label {
  outline: 2px solid rgba(13, 110, 253, 0.4);
  outline-offset: -2px;
}

.kyc-section-title {
  font-weight: 700;
  font-size: 12.5px;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.kyc-list-v2 .klv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.kyc-list-v2 .klv-head h5 {
  margin: 0;
  font-weight: 700;
  color: #212529;
}

.kyc-list-v2 .klv-head .klv-sub {
  font-size: 12.5px;
  color: #868e96;
  margin-top: 2px;
}

.kyc-list-v2 .klv-btn-primary {
  background: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kyc-list-v2 .klv-btn-primary:hover {
  background: #0b5ed7;
  color: #fff;
}

.kyc-list-v2 .klv-toolbar {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
}

.kyc-list-v2 .klv-toolbar .form-control, .kyc-list-v2 .klv-toolbar .custom-select {
  border-radius: 8px;
  font-size: 13.5px;
}

.kyc-list-v2 .klv-filter-btn {
  border-radius: 8px;
  font-weight: 600;
}

.kyc-list-v2 .klv-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
}

.kyc-list-v2 table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.kyc-list-v2 thead th {
  background: #f8f9fb;
  color: #495057;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 11px 14px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
  white-space: nowrap;
}

.kyc-list-v2 tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f3f5;
  font-size: 13.5px;
  color: #212529;
  vertical-align: middle;
}

.kyc-list-v2 tbody tr:last-child td {
  border-bottom: none;
}

.kyc-list-v2 tbody tr:hover {
  background: #f8fbff;
}

.kyc-list-v2 .klv-cid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: #495057;
}

.kyc-list-v2 .klv-email {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
}

.kyc-list-v2 .klv-email:hover {
  text-decoration: underline;
}

.kyc-list-v2 .klv-date {
  color: #868e96;
  font-size: 12.5px;
  white-space: nowrap;
}

.kyc-list-v2 .klv-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.kyc-list-v2 .klv-pill--ok {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}

.kyc-list-v2 .klv-pill--warn {
  background: rgba(245, 159, 0, 0.14);
  color: #d98a00;
}

.kyc-list-v2 .klv-pill--danger {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.kyc-list-v2 .klv-pill--muted {
  background: #eef0f3;
  color: #6c757d;
}

.kyc-list-v2 .klv-pill--info {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

.kyc-list-v2 .klv-tag-admin {
  margin-left: 6px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(111, 66, 193, 0.12);
  color: #6f42c1;
  font-weight: 600;
}

.kyc-list-v2 .klv-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid #d5dce6;
  border-radius: 8px;
  color: #0d6efd;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.kyc-list-v2 .klv-view:hover {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

.kyc-list-v2 .klv-empty {
  text-align: center;
  color: #adb5bd;
  padding: 36px 12px;
}

.kyc-list-v2 .klv-empty i {
  font-size: 26px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.6;
}

.kyc-list-v2 .klv-pager {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
}

.kyc-list-v2 .klv-pager a {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  color: #495057;
  font-size: 13px;
  text-decoration: none;
  background: #fff;
}

.kyc-list-v2 .klv-pager a:hover {
  border-color: #0d6efd;
  color: #0d6efd;
}

.kyc-list-v2 .klv-pager .active a {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.kyc-list-v2 .klv-pager .disabled a {
  opacity: 0.4;
  pointer-events: none;
}

.kyc-detail-v2 .kdv-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.kyc-detail-v2 .kdv-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid #d5dce6;
  border-radius: 8px;
  color: #495057;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
}

.kyc-detail-v2 .kdv-back:hover {
  border-color: #0d6efd;
  color: #0d6efd;
}

.kyc-detail-v2 .kdv-topbar h5 {
  margin: 0;
  font-weight: 700;
  color: #212529;
}

.kyc-detail-v2 .kdv-spacer {
  flex: 1;
}

.kyc-detail-v2 .kdv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.kyc-detail-v2 .kdv-pill--ok {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}

.kyc-detail-v2 .kdv-pill--warn {
  background: rgba(245, 159, 0, 0.16);
  color: #d98a00;
}

.kyc-detail-v2 .kdv-pill--danger {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.kyc-detail-v2 .kdv-pill--muted {
  background: #eef0f3;
  color: #6c757d;
}

.kyc-detail-v2 .kdv-tag {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

.kyc-detail-v2 .kdv-tag--admin {
  background: rgba(111, 66, 193, 0.12);
  color: #6f42c1;
}

.kyc-detail-v2 .kdv-tag--ai {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

.kyc-detail-v2 .kdv-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
  margin-bottom: 16px;
  overflow: hidden;
}

.kyc-detail-v2 .kdv-card > .kdv-hd {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f3f5;
  font-weight: 700;
  font-size: 14px;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.kyc-detail-v2 .kdv-card > .kdv-hd .kdv-hd-note {
  font-weight: 400;
  font-size: 12px;
  color: #868e96;
}

.kyc-detail-v2 .kdv-card > .kdv-bd {
  padding: 16px 18px;
}

.kyc-detail-v2 .kdv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 20px;
}

.kyc-detail-v2 .kdv-kv .k {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #868e96;
  font-weight: 600;
  margin-bottom: 2px;
}

.kyc-detail-v2 .kdv-kv .v {
  font-size: 14px;
  color: #212529;
  font-weight: 500;
}

.kyc-detail-v2 .kdv-kv .v a {
  color: #0d6efd;
  text-decoration: none;
}

.kyc-detail-v2 .kdv-kv .v a:hover {
  text-decoration: underline;
}

.kyc-detail-v2 .kdv-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Action bar */
.kyc-detail-v2 .kdv-action {
  border-color: #ffe08a;
}

.kyc-detail-v2 .kdv-action > .kdv-hd {
  background: rgba(245, 159, 0, 0.08);
}

.kyc-detail-v2 .kdv-btnrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.kyc-detail-v2 .kdv-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.kyc-detail-v2 .kdv-btn--approve {
  background: #198754;
  color: #fff;
}

.kyc-detail-v2 .kdv-btn--approve:hover {
  background: #157347;
}

.kyc-detail-v2 .kdv-btn--ai {
  background: #fff;
  color: #0d6efd;
  border: 1px solid #9ec5fe;
}

.kyc-detail-v2 .kdv-btn--ai:hover {
  background: #eff6ff;
}

.kyc-detail-v2 .kdv-btn--reject {
  background: #dc3545;
  color: #fff;
}

.kyc-detail-v2 .kdv-btn--reject:hover {
  background: #bb2d3b;
}

.kyc-detail-v2 .kdv-divider {
  border-top: 1px dashed #e9ecef;
  margin: 16px 0;
}

.kyc-detail-v2 .kdv-reject-label {
  font-size: 13px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 6px;
  display: block;
}

.kyc-detail-v2 .kdv-reject textarea {
  border-radius: 9px;
  font-size: 13.5px;
}

/* Ô sửa thông tin xác minh (admin đối chiếu ảnh) */
.kyc-detail-v2 .kdv-editnote {
  font-size: 12.5px;
  color: #8a6d00;
  background: rgba(245, 159, 0, 0.08);
  border: 1px solid rgba(245, 159, 0, 0.22);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.kyc-detail-v2 .kdv-editgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.kyc-detail-v2 .kdv-editgrid .full {
  grid-column: 1/-1;
}

.kyc-detail-v2 .kdv-fld label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #868e96;
  font-weight: 600;
  margin-bottom: 4px;
}

.kyc-detail-v2 .kdv-fld input, .kyc-detail-v2 .kdv-fld select {
  width: 100%;
  border: 1px solid #d5dce6;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13.5px;
  background: #fff;
}

.kyc-detail-v2 .kdv-fld input:focus, .kyc-detail-v2 .kdv-fld select:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.kyc-detail-v2 .kdv-fld .hint {
  font-size: 11px;
  color: #adb5bd;
  margin-top: 3px;
}

.kyc-detail-v2 .kdv-datewrap {
  position: relative;
}

.kyc-detail-v2 .kdv-datewrap input#kdvBirthday {
  padding-right: 44px;
}

.kyc-detail-v2 .kdv-calbtn {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 32px;
  height: 32px;
  border: none;
  background: #eef4ff;
  color: #0d6efd;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kyc-detail-v2 .kdv-calbtn:hover {
  background: #dce9ff;
}

.kyc-detail-v2 .kdv-datenative {
  position: absolute;
  right: 8px;
  bottom: 4px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
}

.kyc-detail-v2 .kdv-genders {
  display: flex;
  gap: 8px;
}

.kyc-detail-v2 .kdv-genders input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.kyc-detail-v2 .kdv-genders label {
  margin: 0;
  flex: 1;
  text-align: center;
  padding: 8px 14px;
  border: 1px solid #d5dce6;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  background: #fff;
}

.kyc-detail-v2 .kdv-genders input:checked + label {
  border-color: #0d6efd;
  background: #eff6ff;
  color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.kyc-detail-v2 .kdv-tools .kdv-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  background: #fff;
}

.kyc-detail-v2 .kdv-tools .kdv-del {
  color: #dc3545;
  border-color: #f1aeb5;
}

.kyc-detail-v2 .kdv-tools .kdv-del:hover {
  background: #fff5f5;
}

.kyc-detail-v2 .kdv-tools .kdv-reset {
  color: #6c757d;
  border-color: #d5dce6;
}

.kyc-detail-v2 .kdv-tools .kdv-reset:hover {
  background: #f8f9fb;
}

/* Compare table */
.kyc-detail-v2 .kdv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.kyc-detail-v2 .kdv-table th {
  background: #f8f9fb;
  color: #495057;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  padding: 9px 12px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
}

.kyc-detail-v2 .kdv-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f3f5;
  color: #212529;
}

.kyc-detail-v2 .kdv-table tr:last-child td {
  border-bottom: none;
}

.kyc-detail-v2 .kdv-ok {
  color: #198754;
  font-weight: 700;
}

.kyc-detail-v2 .kdv-no {
  color: #dc3545;
  font-weight: 700;
}

.kyc-detail-v2 .kdv-na {
  color: #adb5bd;
}

/* Images */
.kyc-detail-v2 .kdv-imgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.kyc-detail-v2 .kdv-img {
  border: 1px solid #eef0f3;
  border-radius: 10px;
  overflow: hidden;
  background: #fafbfc;
}

.kyc-detail-v2 .kdv-img .cap {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  border-bottom: 1px solid #f1f3f5;
}

.kyc-detail-v2 .kdv-img .box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  padding: 8px;
}

.kyc-detail-v2 .kdv-img img {
  max-width: 100%;
  max-height: 170px;
  border-radius: 6px;
  display: block;
}

.kyc-detail-v2 .kdv-license iframe {
  width: 100%;
  height: 600px;
  border: 1px solid #eef0f3;
  border-radius: 8px;
}

/* Alerts */
.kyc-detail-v2 .kdv-note {
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.kyc-detail-v2 .kdv-note--warn {
  background: rgba(245, 159, 0, 0.1);
  color: #8a6d00;
  border: 1px solid rgba(245, 159, 0, 0.25);
}

.kyc-detail-v2 .kdv-note--info {
  background: rgba(13, 110, 253, 0.07);
  color: #084298;
  border: 1px solid rgba(13, 110, 253, 0.2);
}

/* AI result */
.kyc-detail-v2 .kdv-ai > .kdv-hd {
  background: rgba(13, 202, 240, 0.08);
}

/* History */
.kyc-detail-v2 .kdv-hist-item {
  border: 1px solid #eef0f3;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fafbfc;
}

.kyc-detail-v2 .kdv-hist-item:last-child {
  margin-bottom: 0;
}

.kyc-detail-v2 .kdv-hist-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.kyc-detail-v2 .kdv-hist-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kyc-detail-v2 .kdv-hist-thumbs .t {
  text-align: center;
}

.kyc-detail-v2 .kdv-hist-thumbs img {
  max-height: 84px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.kyc-detail-v2 .kdv-hist-thumbs .cap {
  font-size: 11px;
  color: #868e96;
  margin-top: 3px;
}

.providers-v2 .pv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}

.providers-v2 .pv-head h5 {
  margin: 0;
  font-weight: 700;
  color: #212529;
}

.providers-v2 .pv-sub {
  font-size: 12.5px;
  color: #868e96;
  margin-top: 2px;
}

.providers-v2 .pv-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.providers-v2 .pv-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 500;
  word-break: break-word;
}

.providers-v2 .pv-alert > span {
  flex: 1;
}

.providers-v2 .pv-alert--ok {
  background: rgba(25, 135, 84, 0.1);
  color: #146c43;
  border: 1px solid rgba(25, 135, 84, 0.25);
}

.providers-v2 .pv-alert--danger {
  background: rgba(220, 53, 69, 0.08);
  color: #b02a37;
  border: 1px solid rgba(220, 53, 69, 0.25);
}

.providers-v2 .pv-alert-close {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  padding: 2px 6px;
  cursor: pointer;
}

.providers-v2 .pv-alert-close:hover {
  opacity: 1;
}

.providers-v2 .pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.15s;
}

.providers-v2 .pv-btn--primary {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.providers-v2 .pv-btn--primary:hover {
  background: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}

.providers-v2 .pv-btn--ghost {
  background: #fff;
  border-color: #d5dce6;
  color: #495057;
}

.providers-v2 .pv-btn--ghost:hover {
  border-color: #0d6efd;
  color: #0d6efd;
}

.providers-v2 .pv-btn--danger {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.providers-v2 .pv-btn--danger:hover {
  background: #bb2d3b;
  color: #fff;
}

.providers-v2 .pv-link {
  font-size: 13px;
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
}

.providers-v2 .pv-link:hover {
  text-decoration: underline;
}

.providers-v2 .pv-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  background: #fff;
  color: #495057;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.15s;
}

.providers-v2 .pv-icon-btn:hover {
  border-color: #0d6efd;
  color: #0d6efd;
  background: #f3f8ff;
}

.providers-v2 .pv-icon-btn--danger:hover {
  border-color: #dc3545;
  color: #dc3545;
  background: #fff5f5;
}

.providers-v2 .pv-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
  margin-bottom: 16px;
  overflow: hidden;
}

.providers-v2 .pv-hd {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f3f5;
  font-weight: 700;
  font-size: 14px;
  color: #212529;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.providers-v2 .pv-hd i {
  color: #868e96;
  margin-right: 4px;
}

.providers-v2 .pv-hd-note {
  font-weight: 400;
  font-size: 12px;
  color: #868e96;
}

.providers-v2 .pv-bd {
  padding: 16px 18px;
}

.providers-v2 .pv-card--editing {
  background: #fffbea;
  border-color: #ffd43b;
  box-shadow: 0 0 0 3px rgba(255, 212, 59, 0.25);
}

.providers-v2 .pv-card--editing > .pv-hd {
  background: #fff3bf;
  border-bottom-color: #ffe066;
}

.providers-v2 .pv-card--editing > .pv-hd i {
  color: #e67700;
}

.providers-v2 .pv-card--editing .pv-section-title {
  border-top-color: #ffe8a1;
}

.providers-v2 .pv-card--editing .pv-form-footer {
  border-top-color: #ffe8a1;
}

.providers-v2 .pv-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 20px;
  background: #eef0f3;
  color: #495057;
  font-size: 12px;
}

.providers-v2 .form-control, .providers-v2 .custom-select {
  border-radius: 8px;
  font-size: 13.5px;
  border-color: #d5dce6;
  height: 36px;
}

.providers-v2 .form-control:focus, .providers-v2 .custom-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.providers-v2 .pv-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #495057;
}

.providers-v2 .pv-section-title {
  font-weight: 700;
  font-size: 12px;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px dashed #e9ecef;
}

.providers-v2 .pv-bd > .pv-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.providers-v2 .pv-hint {
  margin-left: 6px;
  font-weight: 400;
  font-size: 12px;
  color: #868e96;
  text-transform: none;
  letter-spacing: 0;
}

.providers-v2 .pv-grid {
  margin: 0 -6px;
  row-gap: 10px;
}

.providers-v2 .pv-grid > [class*=col] {
  padding: 0 6px;
}

.providers-v2 .pv-inline {
  display: flex;
  gap: 8px;
}

.providers-v2 .pv-inline .form-control {
  flex: 1;
  min-width: 0;
}

.providers-v2 .pv-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #868e96;
  cursor: pointer;
}

.providers-v2 .pv-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f1f3f5;
}

.providers-v2 .pv-seg {
  display: inline-flex;
  border: 1px solid #d5dce6;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.providers-v2 .pv-seg--full {
  display: flex;
  width: 100%;
}

.providers-v2 .pv-seg--full label {
  flex: 1;
  text-align: center;
}

.providers-v2 .pv-seg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.providers-v2 .pv-seg label {
  margin: 0;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  transition: 0.15s;
  user-select: none;
  white-space: nowrap;
}

.providers-v2 .pv-seg label + input + label {
  border-left: 1px solid #d5dce6;
}

.providers-v2 .pv-seg label:hover {
  background: #f3f8ff;
}

.providers-v2 .pv-seg input:checked + label {
  background: #0d6efd;
  color: #fff;
}

.providers-v2 .pv-seg input:focus-visible + label {
  outline: 2px solid rgba(13, 110, 253, 0.4);
  outline-offset: -2px;
}

.providers-v2 .pv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.providers-v2 .pv-chip {
  margin: 0;
  cursor: pointer;
}

.providers-v2 .pv-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.providers-v2 .pv-chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #d5dce6;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #495057;
  background: #fff;
  transition: 0.15s;
  user-select: none;
}

.providers-v2 .pv-chip span::before {
  content: "\f067";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: #adb5bd;
}

.providers-v2 .pv-chip:hover span {
  border-color: #0d6efd;
}

.providers-v2 .pv-chip input:checked + span {
  background: rgba(13, 110, 253, 0.1);
  border-color: #0d6efd;
  color: #0d6efd;
}

.providers-v2 .pv-chip input:checked + span::before {
  content: "\f00c";
  color: #0d6efd;
}

.providers-v2 .pv-chip input:focus-visible + span {
  outline: 2px solid rgba(13, 110, 253, 0.4);
}

.providers-v2 .pv-proxy-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 290px minmax(220px, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0;
  border-bottom: 1px solid #f1f3f5;
}

.providers-v2 .pv-proxy-row:last-child {
  border-bottom: none;
}

.providers-v2 .pv-proxy-row:hover {
  background: #fafcff;
}

.providers-v2 .pv-proxy-row .pv-seg {
  justify-self: start;
}

.providers-v2 .pv-proxy-title {
  font-weight: 700;
  font-size: 13.5px;
  color: #212529;
  margin-bottom: 3px;
}

.providers-v2 .pv-proxy-url .pv-check {
  display: flex;
}

.providers-v2 .pv-proxy-actions {
  display: flex;
  gap: 6px;
}

@media (max-width: 991.98px) {
  .providers-v2 .pv-proxy-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.providers-v2 .pv-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.providers-v2 .pv-pill--ok {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}

.providers-v2 .pv-pill--info {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

.providers-v2 .pv-pill--danger {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.providers-v2 .pv-pill--muted {
  background: #eef0f3;
  color: #6c757d;
}

.providers-v2 .pv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 340px;
}

.providers-v2 .pv-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: #f1f3f5;
  color: #495057;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.providers-v2 .pv-tag--soft {
  background: #f3f8ff;
  color: #3d5a80;
}

.providers-v2 .pv-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #495057;
}

.providers-v2 .pv-muted {
  color: #868e96;
}

.providers-v2 .pv-small {
  font-size: 11.5px;
}

.providers-v2 .pv-warn {
  color: #d98a00;
  font-size: 12px;
  font-weight: 600;
}

.providers-v2 .pv-table-wrap {
  overflow-x: auto;
}

.providers-v2 .pv-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.providers-v2 .pv-table thead th {
  background: #f8f9fb;
  color: #495057;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
  white-space: nowrap;
}

.providers-v2 .pv-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f3f5;
  font-size: 13.5px;
  color: #212529;
  vertical-align: middle;
}

.providers-v2 .pv-table tbody tr:last-child td {
  border-bottom: none;
}

.providers-v2 .pv-table tbody tr:hover {
  background: #f8fbff;
}

.providers-v2 .pv-table .pv-row-active, .providers-v2 .pv-table .pv-row-active:hover {
  background: #fff8db;
  box-shadow: inset 3px 0 0 #f59f00;
}

.providers-v2 .pv-name {
  font-weight: 700;
}

.providers-v2 .pv-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.providers-v2 .pv-empty {
  text-align: center;
  color: #adb5bd;
  padding: 36px 12px;
}

.providers-v2 .pv-empty i {
  font-size: 26px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.6;
}

.providers-v2 .pv-modal {
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 26, 51, 0.15);
}

.providers-v2 .pv-modal .modal-header, .providers-v2 .pv-modal .modal-footer {
  border-color: #f1f3f5;
}

.providers-v2 .pv-modal .modal-body {
  font-size: 13.5px;
}

.btn-inactive {
  border: 1px solid !important;
  background-color: #fff !important;
}
.btn-inactive:hover {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
}
.btn-inactive.btn-active {
  color: #fff;
  background-color: #007bff !important;
  border-color: #007bff !important;
}
.btn-inactive.active {
  color: #fff;
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.btn-gray {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  color: rgb(4, 82, 251);
  background-color: rgb(236, 237, 239);
  box-shadow: none;
  width: max-content;
  text-transform: none;
  min-width: auto;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.btn-gray:hover {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
}
.btn-gray.btn-active {
  color: #fff;
  background-color: #007bff !important;
  border-color: #007bff !important;
}
.btn-gray.active {
  color: #fff;
  background-color: #007bff !important;
  border-color: #007bff !important;
}
.btn-gray:focus {
  box-shadow: unset !important;
}

.table-recent-recharge {
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px #5d8fa7;
}
.table-recent-recharge thead {
  background-color: #5d8fa7;
  color: white;
}
.table-recent-recharge thead th {
  border-top: unset;
}

.modal-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1090;
  display: none;
  background-color: #bfbfbf;
  opacity: 0.8;
  overflow: hidden;
  outline: 0;
}
.modal-loading.show {
  display: block;
}

@media (min-width: 992px) {
  .col-lg-12-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 1400px) {
  .col-xxl-12-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xxl-12-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 1800px) {
  .col-2xl-12-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-2xl-12-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
:root {
  --width-nav-left: 300px;
  --height-nav-bar:62px;
}

.fh {
  height: 100% !important;
}

.fw {
  width: 100% !important;
}

.my-container {
  padding: 24px 12px;
}

#nav li {
  list-style: none;
  border-radius: 6px;
}

#nav .nav-left ul {
  padding: 0;
}

#nav .nav-left li a {
  border-radius: 6px;
  padding: 10px;
}

.text-balance {
  font-weight: 500;
  color: #ffde81 !important;
}

.body-nav {
  padding-top: var(--height-nav-bar);
  padding-left: var(--width-nav-left);
  transition: padding-left 0.5s;
}
.body-nav.out {
  padding-left: 100px;
}

.nav-top {
  height: 62px;
}

.nav-top-admin {
  background-image: linear-gradient(to left, #1d1d1d, #333);
}

.nav-top-tools {
  display: flex;
  align-items: center;
  margin-bottom: unset;
  padding-inline-start: unset;
}

.nav-top-item {
  color: white !important;
  padding: 16px;
  border-radius: 4px;
  transition: background-color 0.2s ease-out;
  align-items: center;
}
.nav-top-item:hover {
  text-decoration: unset !important;
  background-color: #06a374;
}

.nav-form-search {
  display: flex;
  align-items: center;
  margin: 0 6px;
}

.nav-icon {
  width: var(--width-nav-left);
  text-align: center;
}
.nav-icon:hover {
  background-color: unset;
}

.nav-btn-search {
  border: unset;
  padding: 8px;
  background-color: #ff7b00;
  color: white;
  border-radius: 4px;
  transition: background-color 0.2s ease-out;
}
.nav-btn-search:hover {
  background-color: #fc9928;
}

.btn-close-nav-left {
  text-align: center;
  padding: 6px;
  margin-bottom: 0.25rem;
  border-radius: 2px;
  background-color: #28a586;
  color: white;
}
.btn-close-nav-left:hover {
  cursor: pointer;
}

.nav-left {
  margin-top: var(--height-nav-bar);
  padding-bottom: var(--height-nav-bar);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #231832;
  color: #aed3ff;
  font-size: 18px;
  list-style: none;
  height: 100%;
  overflow-y: scroll;
  width: var(--width-nav-left);
  border-right: 1px solid rgb(173, 173, 173);
  z-index: 99;
  transition: width 0.5s;
}
.nav-left::-webkit-scrollbar {
  display: none;
}
.nav-left.c {
  width: 100px;
}
.nav-left li {
  padding: 2px;
}

a.brand-nav-left {
  color: #fff;
}
a.brand-nav-left:hover {
  text-decoration: unset !important;
  color: #fff;
}

.nav-left-admin.c {
  width: 100px;
}

.nav-left-wrapper-sub-nav.c {
  display: none;
}

.nav-left-wrapper-sub-nav-icon {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
.nav-left-wrapper-sub-nav-icon.o {
  opacity: 1;
  visibility: visible;
}

.nav-left-title {
  margin: 2px;
  font-size: 14px;
  opacity: 0.7;
  text-align: center;
}

.nav-left-list-title {
  position: relative;
  padding: 4px;
  border-radius: 6px;
  transition: background-color 0.2s ease-out;
}
.nav-left-list-title:hover {
  cursor: pointer;
  background-color: #b5d0e9;
  color: #785513;
  font-weight: 700;
}
.nav-left-list-title.change-color {
  background-color: #b5d0e9;
  color: #785513;
  font-weight: 700;
}
.nav-left-list-title i {
  width: 20px;
  margin-right: 8px !important;
  text-align: center;
}

.nav-left-list {
  display: none;
  list-style: none;
  padding: 0;
}
.nav-left-list.o {
  display: block;
}
.nav-left-list i {
  width: 16px;
  margin-right: 4px !important;
  text-align: center;
}

.sub-nav-icon-list {
  position: fixed;
  left: 99px;
  width: 250px;
  top: var(--height-nav-bar);
  background-color: #dfdfdf;
  color: black;
  box-shadow: 0 0 8px grey;
  height: 100%;
  font-size: 16px;
  opacity: 0;
  overflow-y: auto;
  visibility: hidden;
  transition: all 0.5s;
}
.sub-nav-icon-list li {
  margin: 8px 0;
}
.sub-nav-icon-list li:hover {
  background-color: #333;
  color: white;
}
.sub-nav-icon-list li a {
  color: unset;
  padding: 12px 0;
}

.nav-icon-item:hover {
  background-color: #516b83;
}
.nav-icon-item:hover .sub-nav-icon-list {
  visibility: visible;
  opacity: 1;
}

.text-small {
  font-size: 14px;
}

.nav-left-link {
  display: block;
  padding: 10px;
  width: 100%;
  transition: background-color 0.2s ease-out;
  color: #b2dbff;
}
.nav-left-link:hover {
  text-decoration: unset !important;
  cursor: pointer;
  background-color: #b5e9d2;
  color: #333;
  font-weight: 600;
}

.suv-nav-left-link {
  display: block;
  padding: 4px;
  color: #333;
}
.suv-nav-left-link:hover {
  text-decoration: unset !important;
}

.footer {
  color: white;
  padding-left: var(--width-nav-left);
  transition: padding-left 0.5s;
}
.footer.out {
  padding-left: 100px;
}

.s-nav-top {
  padding: 0 12px 12px;
  color: #fff;
}

.modal-wrapper-nav-left {
  max-width: unset !important;
  margin: unset !important;
  min-height: 100%;
  position: relative;
}

.modal-nav-left-content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: var(--width-nav-left);
}

.modal-nav-left-body {
  background-color: #333;
  color: #aed3ff;
  font-size: 18px;
  list-style: none;
  height: 100%;
  overflow-y: scroll;
  z-index: 99;
  transition: width 0.5s;
  margin-bottom: unset;
  padding-left: 0;
  padding-top: 1px;
}

.btn-header-open {
  background-color: unset;
  border: unset;
}
.btn-header-open:hover {
  background-color: unset;
}

.modal-header-nav-left {
  background-color: #abc9bd;
  padding: 0.65rem;
  color: #0d9166;
  border: none;
}

.footer-container {
  color: #d4d4d4;
  padding: 0.75rem;
  padding-bottom: 0.25rem;
}

.text-des-footer {
  color: #9d9d9d;
}

.btn-footer-tool {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: unset;
  outline: 1px solid #706969;
  width: max-content;
  border-radius: 4px;
  padding: 0.15rem 0.375rem;
  margin: 4px 0;
  font-size: 1rem;
  line-height: 1.5;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-footer-tool:hover {
  text-decoration: underline;
  color: #5597d1;
}

.toast-container {
  position: fixed;
  top: 0;
  right: 0;
  padding-top: calc(var(--height-nav-bar) + 12px);
  padding-right: 12px;
  z-index: 999999;
}

.toast {
  min-width: 250px;
  max-width: 400px;
  padding: 15px 20px;
  border-radius: 5px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.95rem;
  animation: slideInLeft 0.4s ease-out;
  opacity: 0.95;
}

.toast-success {
  background-color: #28a745;
}

.toast-error {
  background-color: #dc3545;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 0.95;
  }
}
@media (max-width: 1199px) {
  .body-nav {
    padding-left: 100px;
  }
  .nav-left {
    width: 100px;
  }
  .nav-left-wrapper-sub-nav {
    display: none;
  }
  .nav-left-wrapper-sub-nav-icon {
    visibility: visible;
    opacity: 1;
  }
  .close-nav-left-icon {
    display: none !important;
  }
  .footer {
    padding-left: 100px;
  }
  .nav-icon {
    width: 200px;
  }
}
@media (max-width: 767px) {
  .body-nav {
    padding-left: unset !important;
  }
  .footer {
    padding-left: unset !important;
  }
}
.reset-this {
  all: initial;
}

.redo-fieldset {
  border: 1px solid #747474;
  border-radius: 4px;
  padding: 10px;
}
.redo-fieldset.create-fieldset {
  box-shadow: 0 3px 6px #51af87;
  border: unset;
}
.redo-fieldset.notifications-fieldset {
  box-shadow: 0 3px 6px #ed916d;
  border: unset;
}
.redo-fieldset.list-service-fieldset {
  box-shadow: 0 3px 6px #3f83b1;
  border: unset;
}
.redo-fieldset.info-fieldset {
  box-shadow: 0 3px 6px #7686cb;
  border: unset;
}
.redo-fieldset.list-btn-proxy-fieldset {
  box-shadow: 0 2px 5px #b5b5d7;
  border: unset !important;
}
.redo-fieldset.info-zingproxy-fieldset {
  box-shadow: 0 3px 6px #80c9a7;
  border: unset;
}
.redo-fieldset.info-zingserver-fieldset {
  box-shadow: 0 3px 6px #76acdb;
  border: unset;
}
.redo-fieldset.info-clouding-fieldset {
  box-shadow: 0 3px 6px #e59c69;
  border: unset;
}

.redo-legend {
  color: black;
}
.redo-legend .create-heading {
  border-radius: 4px;
  padding: 4px;
  background-color: #45b397;
  color: #fff;
}
.redo-legend .notifications-heading {
  border-radius: 4px;
  padding: 4px;
  background-color: rgba(205, 97, 83, 0.9019607843);
  color: #fff;
}
.redo-legend .list-service-heading {
  border-radius: 4px;
  padding: 4px;
  background-color: #6689bd;
  color: #fff;
}
.redo-legend .info-heading {
  border-radius: 4px;
  padding: 4px;
  background-color: #bdb9eb;
  color: rgb(132, 52, 183);
}
.redo-legend .item-service-heading {
  padding: 0 6px;
  color: #616489;
  background-color: #e3e6ef;
  border-radius: 4px;
}
.redo-legend .info-zingproxy-heading {
  border-radius: 4px;
  padding: 4px;
  background-color: #d4edea;
  color: #12ab64;
}
.redo-legend .info-zingserver-heading {
  border-radius: 4px;
  padding: 4px;
  background-color: #cadfeb;
  color: #3481b7;
}
.redo-legend .info-clouding-heading {
  border-radius: 4px;
  padding: 4px;
  background-color: #e9e0d1;
  color: #f37508;
}

.btn-link-service {
  background-color: #d5e5ed;
  border-color: #d5e5ed;
  box-shadow: 0 2px 4px;
}
.btn-link-service:hover {
  background-color: #adceed;
  border-color: #adceed;
}

.text-expiring {
  color: #f9661f !important;
}

.text-number {
  color: #002bff !important;
}

.content-create-proxy {
  height: 400px;
  overflow-y: scroll;
  padding: 6px;
}
.content-create-proxy::-webkit-scrollbar {
  width: 10px;
}
.content-create-proxy::-webkit-scrollbar-thumb {
  background: rgba(81, 175, 134, 0.5058823529);
}

.box-create-proxy {
  box-shadow: 0 1px 6px #51af87;
  border-radius: 4px;
  margin: 10px 0;
}
.box-create-proxy a.create-proxy-link {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  color: #333;
  margin: 0;
}
.box-create-proxy a.create-proxy-link .wrapper-create-price {
  text-align: end;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.box-create-proxy a.create-proxy-link:hover {
  text-decoration: unset;
  animation: bgCreateProxy 0.8s linear forwards;
  color: #ffffff;
}
.box-create-proxy a.create-proxy-link:hover h4 {
  font-size: 1.65rem;
  color: #e11111 !important;
}
.box-create-proxy a.create-proxy-link:hover h5 {
  color: rgba(19, 73, 195, 0.8);
  font-size: 1.35rem;
}
.box-create-proxy .wrapper-create-img .icon-create-proxy {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 72px;
  font-size: 40px;
  border-radius: 10px;
}
.box-create-proxy .wrapper-create-img .icon-create-proxy.icon-create-proxy-ipv4 {
  font-size: 40px;
  background-color: #ccebff;
  color: rgb(0, 140, 255);
}
.box-create-proxy .wrapper-create-img .icon-create-proxy.icon-create-proxy-rotating {
  font-size: 40px;
  background-color: #fbd5d5;
  color: rgb(237, 28, 28);
}
.box-create-proxy .wrapper-create-img .icon-create-proxy.icon-create-proxy-static {
  font-size: 40px;
  background-color: #ceceff;
  color: rgb(0, 15, 124);
}
.box-create-proxy .wrapper-create-img .icon-create-proxy.icon-create-proxy-static-server2 {
  font-size: 40px;
  background-color: #da251d;
  color: #ffff00;
}
.box-create-proxy .wrapper-create-img .icon-create-proxy.icon-create-proxy-ipv6 {
  font-size: 40px;
  background-color: #daefd6;
  color: rgb(94, 189, 34);
}
.box-create-proxy .wrapper-create-img .icon-create-proxy.icon-create-proxy-gaming {
  font-size: 40px;
  background-color: #ffdecf;
  color: rgb(243, 114, 22);
}

.wrapper-list-proxy button {
  font-size: 18px;
}

.wrapper-info .wrapper-info-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper-info .wrapper-info-img img {
  border-radius: 4px;
  width: 100px;
}
.wrapper-info .wrapper-info-img img.img-zingproxy {
  background-color: #c3e1df;
}
.wrapper-info .wrapper-info-img img.img-zingserver {
  background-color: #c3d2e1;
  padding: 12px;
}
.wrapper-info .wrapper-info-img img.img-clouding {
  background-color: #e3dad3;
  padding: 12px 0;
}
.wrapper-info p {
  font-size: 18px;
}

@keyframes bgCreateProxy {
  0% {
    background-color: #a6c2bb;
  }
  50% {
    background-color: #83b3a7;
  }
  to {
    background-color: #45b397;
  }
}
@media (max-width: 767px) {
  .col-description {
    order: 3;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #4bc1a7;
    margin-top: 12px;
  }
}
.create-body-box {
  background-color: #eeeff1;
  color: black;
  padding: 12px;
  border-radius: 6px;
}
.create-body-box .wrapper-search-country {
  padding: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 2px solid #959595;
}
.create-body-box .wrapper-search-country .input-search-country {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border 0.2s;
}
.create-body-box .wrapper-search-country .input-search-country:focus {
  border-color: #409eff;
}
.create-body-box .wrapper-country-select {
  width: 130px;
  border-radius: 12px;
  padding: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 0;
  user-select: none;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11);
}
.create-body-box .wrapper-country-select:hover {
  background: #7b5aaa;
  color: #ffffff;
  font-weight: 500;
}
.create-body-box .wrapper-country-select.selected {
  background: #452476;
  color: #ffffff;
  font-weight: 500;
}
.create-body-box .wrapper-country-select[data-title] {
  position: relative;
  cursor: pointer;
}
.create-body-box .wrapper-country-select[data-title]:hover:after {
  opacity: 1;
  visibility: visible;
}
.create-body-box .wrapper-country-select[data-title]:after {
  content: attr(data-title);
  top: unset;
  bottom: 0px;
  left: 0;
  right: 0;
  white-space: nowrap;
  box-shadow: 1px 1px 3px #222222;
  opacity: 0;
  font-size: 1rem;
  z-index: 99999;
  visibility: hidden;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  display: block;
  background-color: rgb(90, 90, 90);
  color: #fff;
  position: absolute;
  border-radius: 4px;
  font-weight: 400;
  text-align: center;
  padding: 0 8px;
  width: max-content;
}
.create-body-box .wrapper-country-select .country-img {
  width: 32px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #dadada;
}
.create-body-box .wrapper-country-select .country-text {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: unset !important;
}
.create-body-box .create-body-box {
  min-height: 100vh;
  background-color: #eeeff1;
  display: block;
}
.create-body-box .form-check {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.create-body-box .form-check-label {
  font-size: 1.1rem;
  margin-right: 1.6rem;
  cursor: pointer;
}
.create-body-box .country-title-block {
  margin: 5px 0 0 5px;
  min-width: 85px;
  width: 100%;
  font-weight: 700;
}
.create-body-box .form-check-input {
  width: 36px;
  height: 36px;
  margin-left: unset;
}
.create-body-box .agree-term-box .form-check-input {
  width: 20px;
  height: 16px;
  position: unset;
  margin: 0 4px 0 0;
}
.create-body-box .server {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  border: 1px solid transparent;
  width: 128px;
  height: 50px;
  user-select: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11);
}
.create-body-box .server.server-wrapper {
  flex: 1;
  text-align: center;
  background: #ffffff;
  border: 2px solid transparent;
  padding: 0;
  width: unset;
  height: unset;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.create-body-box .server.server-wrapper.green:hover {
  background: #30bf5a;
  color: #ffffff;
  font-weight: 500;
}
.create-body-box .server.server-wrapper.green.active {
  background: #30bf5a;
  color: #ffffff;
  font-weight: 500;
}
.create-body-box .server.server-wrapper:hover {
  background: #639fdd;
  color: #ffffff;
  font-weight: 500;
}
.create-body-box .server.server-wrapper.active {
  background: #2482e5;
  color: #ffffff;
  font-weight: 500;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper {
  /* Ẩn select gốc */
  /* Button hiển thị */
  /* Dropdown */
  /* Options */
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-isp-vn {
  display: none;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-btn {
  background: white;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-btn:hover {
  border-color: #999;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-btn img {
  max-width: 60px;
  max-height: 20px;
  display: none; /* Ẩn mặc định */
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-btn img[src]:not([src=""]) {
  display: block; /* Hiện khi có src */
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-btn span {
  flex: 1;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-btn:after {
  content: "▼";
  color: #999;
  font-size: 12px;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-dropdown {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 8px;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 999;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .select-dropdown.show {
  display: block;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .option-isp {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .option-isp:hover {
  background: #f8f8f8;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .option-isp.selected {
  background: #f0f0f0;
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .option-isp img {
  max-width: 60px;
  max-height: 20px;
  display: none; /* Ẩn mặc định */
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .option-isp img[src]:not([src=""]) {
  display: block; /* Hiện khi có src */
}
.create-body-box .show-payment-info-wrapper .show-isp-wrapper .show-isp-wrapper {
  position: relative;
}

.create-proxy-datacenter-wrapper {
  /* mỗi item là label */
  /* radio input */
  /* nhóm bên trái */
  /* giữa */
  /* dòng được chọn */
  /* làm chữ đậm khi chọn */
}
.create-proxy-datacenter-wrapper .country-list-wrapper {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper {
  flex: 1;
  background: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-content {
  padding: 4px 0;
  border-bottom: 1px solid #e0e0e0;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item {
  margin: 14px 0;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item label {
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item input[type=number],
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item input[type=text] {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border 0.2s;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item input[type=number]:focus,
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item input[type=text]:focus {
  border-color: #409eff;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item input[type=radio] {
  width: 16px;
  height: 16px;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item select {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border 0.2s;
  margin-bottom: 15px;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item select:focus {
  border-color: #409eff;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item select.payment-info-prices {
  font-size: 16px;
  font-weight: bold;
  color: #de635d;
  margin-top: 5px;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item .payment-info-price {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
  margin-top: 5px;
  text-align: end;
}
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item .custom-port-wrapper,
.create-proxy-datacenter-wrapper .show-payment-info-wrapper .payment-info-item .custom-authentication-wrapper {
  padding: 8px;
  border: 1px solid #ebe9e9;
  border-radius: 12px;
  background-color: #f7f7f7;
}
.create-proxy-datacenter-wrapper .country-list {
  max-height: 600px;
  overflow-y: auto;
  font-family: "Inter", sans-serif;
}
.create-proxy-datacenter-wrapper .country-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  margin: 0;
}
.create-proxy-datacenter-wrapper .country-item:last-child {
  border-bottom: none;
}
.create-proxy-datacenter-wrapper .country-item:hover {
  background-color: #886fb2;
  color: #ffffff;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.create-proxy-datacenter-wrapper .country-item:hover .price {
  color: #ffbb73;
}
.create-proxy-datacenter-wrapper .country-radio {
  margin-right: 10px;
  accent-color: #007bff;
  transform: scale(1.1);
}
.create-proxy-datacenter-wrapper .country-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 20%;
  font-size: 14px;
}
.create-proxy-datacenter-wrapper .flag {
  width: 24px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #dcdcdc;
}
.create-proxy-datacenter-wrapper .country-name {
  font-weight: 500;
}
.create-proxy-datacenter-wrapper .country-mid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 20%;
  font-size: 14px;
}
.create-proxy-datacenter-wrapper .country-mid .country-mid-head {
  font-size: 13px;
}
.create-proxy-datacenter-wrapper .country-mid .country-mid-text {
  font-weight: 600;
}
.create-proxy-datacenter-wrapper .country-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 20%;
  font-size: 14px;
}
.create-proxy-datacenter-wrapper .country-right .country-right-head {
  font-size: 13px;
}
.create-proxy-datacenter-wrapper .country-right .country-right-text {
  font-weight: 600;
}
.create-proxy-datacenter-wrapper .price {
  color: #d32f2f;
}
.create-proxy-datacenter-wrapper .country-item:has(input[type=radio]:checked) {
  background: #452476;
  color: #ffffff;
  font-weight: 500;
  border-radius: 6px;
}
.create-proxy-datacenter-wrapper .country-item:has(input[type=radio]:checked) .price {
  color: #ff834f;
}
.create-proxy-datacenter-wrapper .country-item:has(input[type=radio]:checked) .country-name,
.create-proxy-datacenter-wrapper .country-item:has(input[type=radio]:checked) .country-mid-text {
  font-weight: 700;
}

.create-residential-static .heading-create {
  padding: 12px;
  border-bottom: 1px solid #d8d8d8;
  color: #000;
  font-weight: 600;
}
.create-residential-static .wrapper-select-server {
  box-shadow: none;
  border: 1px solid #8b8fb5;
}
.create-residential-static .wrapper-select-server .server {
  box-shadow: none;
  border-radius: 8px;
  border: 1px solid #8b8fb5;
}
.create-residential-static .wrapper-select-server .server:hover {
  cursor: pointer;
  background-color: #6158bf;
  color: #fff;
  border: 1px solid #6158bf;
}
.create-residential-static .wrapper-select-server .server.active {
  background-color: #6158bf;
  color: #fff;
  border: 1px solid #6158bf;
}
.create-residential-static .wrapper-select-server .server label {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.create-residential-static .wrapper-select-server .input-select-server {
  width: 30px;
  height: 30px;
}
.create-residential-static .wrapper-select-server .input-select-server:hover {
  cursor: pointer;
}
.create-residential-static .content-create input {
  padding: 8px;
  outline-color: #ff6700;
  border-radius: 6px;
  border: 1px solid #adadad;
}
.create-residential-static .content-create input:focus {
  outline-style: solid;
}
.create-residential-static .content-create input.max {
  border-bottom-right-radius: unset;
  border-top-right-radius: unset;
}
.create-residential-static .content-create select {
  padding: 10px 2px;
  border-radius: 6px;
  border: 1px solid #adadad;
  outline-color: #ff6700;
  width: 100%;
  vertical-align: middle;
}
.create-residential-static .content-create select:focus {
  outline-style: solid;
}
.create-residential-static .content-create select option:hover {
  cursor: pointer;
}
.create-residential-static .content-create .max-value {
  padding: 8px;
  text-align: center;
  min-width: 80px;
  border: 1px solid #adadad;
  border-left: unset;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.create-residential-static .content-create hr {
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  width: 100%;
  padding: 8px 0;
}

.user-list-residential-static .btn-state-list-rs {
  border: 1px solid;
  background-color: #fff;
}
.user-list-residential-static .btn-state-list-rs:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.user-list-residential-static .btn-state-list-rs.active {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.user-list-residential-static #select-action,
.user-list-residential-static #select-date {
  font-size: 18px;
  width: max-content;
}

.wrapper-detail-proxy {
  border: 1px solid #1ca4e5;
  border-radius: 6px;
  background-color: #f3f3f3;
}
.wrapper-detail-proxy .heading-detail-proxy {
  padding: 8px;
  text-align: center;
  font-weight: 600;
  color: white;
  background-color: #1ca4e5;
}
.wrapper-detail-proxy .body-detail-proxy {
  padding: 8px;
}
.wrapper-detail-proxy .body-detail-proxy .item-detail-proxy {
  border-bottom: 1px solid #c1c1c1;
  padding: 4px 0;
}
.wrapper-detail-proxy .body-detail-proxy .item-detail-proxy:last-child {
  border-bottom: none;
}

.wrapper-renew-proxy {
  border: 1px solid;
  border-radius: 6px;
  background-color: #ededed;
}
.wrapper-renew-proxy .heading-renew-proxy {
  padding: 8px;
  text-align: center;
  font-weight: 600;
  color: white;
}
.wrapper-renew-proxy .body-renew-proxy {
  padding: 6px 8px;
}
.wrapper-renew-proxy .body-renew-proxy .heading-input {
  width: 90px;
}
.wrapper-renew-proxy .body-renew-proxy input {
  outline-color: #f5780e;
}

.wrapper-note-proxy {
  border: 1px solid #28a745;
  border-radius: 6px;
  background-color: #ededed;
}
.wrapper-note-proxy .heading-note-proxy {
  padding: 8px;
  text-align: center;
  font-weight: 600;
  color: white;
  background-color: #6ca579;
}
.wrapper-note-proxy .body-note-proxy {
  padding: 12px 12px 8px;
}

.wrapper-fix-box {
  border: 1px solid #304df5;
  border-radius: 6px;
  background-color: #ededed;
}
.wrapper-fix-box .heading-note-proxy {
  padding: 8px;
  text-align: center;
  font-weight: 600;
  color: white;
  background-color: #6ca579;
}
.wrapper-fix-box .body-note-proxy {
  padding: 12px 12px 8px;
}

.detail-proxy-residential-vietnam .wrapper-heading-detail-proxy {
  padding: 32px;
  border-radius: 16px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(16, 26, 51, 0.08) 0px 0px 0px 1px, rgba(16, 26, 51, 0.08) 0px 8px 16px;
}
.detail-proxy-residential-vietnam .wrapper-content-detail-proxy .wrapper-detail-proxy-rvn {
  max-width: 800px;
  background-color: rgb(245, 247, 250);
  border-radius: 16px;
  padding: 12px;
}
.detail-proxy-residential-vietnam .wrapper-content-detail-proxy .wrapper-detail-proxy-rvn .body-detail-proxy .item-detail-proxy {
  border-bottom: 1px solid rgba(16, 26, 51, 0.0784313725);
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
}
.detail-proxy-residential-vietnam .wrapper-content-detail-proxy .wrapper-detail-proxy-rvn .body-detail-proxy .item-detail-proxy:last-child {
  border-bottom: none;
}
.detail-proxy-residential-vietnam .wrapper-content-detail-proxy .wrapper-detail-proxy-rvn .body-detail-proxy .item-detail-proxy .label {
  width: 140px;
  font-size: 14px;
}
.detail-proxy-residential-vietnam .wrapper-content-detail-proxy .wrapper-note-proxy-rvn {
  width: 100%;
  padding: 28px;
  border-radius: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px dashed rgba(16, 26, 51, 0.16);
}
.detail-proxy-residential-vietnam .wrapper-content-detail-proxy .wrapper-note-proxy-rvn.bg-noted {
  background-color: rgba(253, 233, 56, 0.16) !important;
  border: 1px solid rgba(253, 233, 56, 0.16) !important;
}

.bg-detail-proxy-dc {
  background-color: #f5f5f5;
  border: 1px solid #c5c5c5;
  border-radius: 6px;
}
.bg-detail-proxy-dc .heading-detail-proxy-dc {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #bbbbbb;
  font-size: 20px;
}
.bg-detail-proxy-dc .heading-detail-proxy-dc i {
  font-size: 16px;
  color: #333;
}

.label-detail-proxy-dc {
  min-width: 100px;
  margin-bottom: 0;
  padding: 0.25rem;
  font-size: 12px;
}

.icon-loading {
  height: 100px;
}

.loading {
  width: 80px;
  height: 40px;
  position: relative;
}

.loading::before,
.loading::after {
  position: absolute;
  content: "";
  background-color: #33da99;
  top: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  mix-blend-mode: multiply;
  animation: loading 2s linear infinite;
}

.loading::after {
  background-color: #24b2e3;
  animation-delay: 1s;
}

@keyframes loading {
  0%, 100% {
    top: 6px;
    left: 0;
    width: 28px;
    height: 28px;
    z-index: 0;
  }
  25% {
    top: 0;
    width: 40px;
    height: 40px;
    z-index: 1;
    left: 20px;
  }
  50% {
    top: 6px;
    width: 28px;
    height: 28px;
    left: 48px;
  }
  75% {
    top: 8px;
    width: 28px;
    height: 28px;
    left: 26px;
  }
}
.affiliates .copy-input:focus {
  box-shadow: unset;
  border-color: initial;
}
.affiliates .wrapper-aff-stat {
  box-shadow: 0 2px 6px #a9a9a9;
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 1.4rem;
}
.affiliates .wrapper-aff-stat .icon-aff-stat {
  margin-right: 8px;
}
.affiliates .wrapper-aff-stat .text-aff-stat {
  font-size: 14px;
}

.wrapper-top-up {
  border-radius: 6px;
  border: 1px solid rgb(49, 136, 49);
  padding: 8px;
}
.wrapper-top-up .img-bank {
  max-width: 100%;
  height: auto;
  max-height: 150px;
}
.wrapper-top-up input.input-top-up {
  font-size: 32px;
  padding: 4px;
  border-radius: 8px;
  border: 2px solid #72a972;
  color: #4951bb;
  font-weight: 500;
  text-align: right;
}
.wrapper-top-up input.input-top-up:focus-visible {
  outline-color: #137ec5 !important;
}
.wrapper-top-up .btn-top-up {
  border-radius: 12px;
  padding: 6px 24px;
  width: 100%;
  font-size: 28px;
}
.wrapper-top-up #result-currency-to-word {
  color: #4951bb;
  font-weight: 500;
}
.wrapper-top-up .amount-tag {
  border: 1px dashed #568d73;
  border-radius: 2px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 400;
  color: #4951bb;
  margin: 2px 3px;
  padding: 1px 2px;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 767px) {
  .img-bank {
    max-height: 60px !important;
  }
}
.card-billing {
  padding: 1rem;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  max-width: 20rem;
}
.card-billing.paid {
  border: 2px solid #2cc37d;
}
.card-billing.paid .wrapper-status {
  color: #2cc37d;
}
.card-billing.paid .ZP-payment {
  color: #2cc37d;
}
.card-billing.paid .wrapper-amount {
  color: #2cc37d;
}
.card-billing.paid .text-bank {
  color: #2cc37d;
}
.card-billing.unpaid {
  border: 2px solid #2c94c3;
}
.card-billing.unpaid .wrapper-status {
  color: #dc3545;
}
.card-billing.unpaid .ZP-payment {
  color: #2c94c3;
}
.card-billing.unpaid .wrapper-amount {
  color: #dc3545;
}
.card-billing.unpaid .text-bank {
  color: #dc3545;
}
.card-billing .wrapper-header-billing {
  text-align: center;
}
.card-billing .wrapper-header-billing .circle-waiting {
  padding: 8px;
  border: 2px dashed #dc3545;
  color: #dc3545;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-billing .wrapper-body-billing {
  list-style: none;
  padding: 0;
  margin: 0;
}
.card-billing .wrapper-body-billing .wrapper-info-li {
  padding: 10px 0;
  color: #004caf;
  font-weight: 600;
}
.card-billing .wrapper-body-billing .wrapper-info-li .transfer-content {
  text-align: center;
  padding: 6px;
  cursor: pointer;
  border: 2px dashed #004caf;
  border-radius: 6px;
  color: #004caf;
  font-weight: 700;
  background: #fff;
}
.card-billing .wrapper-footer-billing {
  text-align: center;
}
.card-billing .wrapper-footer-billing .btn-transfer {
  border: 2px solid #2c94c3;
  border-radius: 6px;
  color: #2c94c3;
  font-weight: 700;
  background: #fff;
}
.card-billing .wrapper-footer-billing .btn-transfer.paid {
  border-color: #2cc37d;
  color: #2cc37d;
  font-size: 14px;
}
.card-billing .wrapper-footer-billing .btn-transfer:hover {
  background-color: #2c94c3;
  color: #fff;
}
.card-billing .wrapper-footer-billing .btn-transfer:hover.paid {
  background-color: #2cc37d;
}
.card-billing .wrapper-footer-billing .btn-text-transfer {
  border-radius: 6px;
  color: #2c94c3;
  font-weight: 700;
  background: #fff;
  cursor: default;
}
.card-billing .wrapper-footer-billing .btn-text-transfer.paid {
  border-color: #2cc37d;
  color: #2cc37d;
  font-size: 14px;
}

.container-success-invoice {
  max-width: 380px;
  margin: 30px auto;
  overflow: hidden;
}

.printer-top {
  z-index: 1;
  border: 6px solid #666666;
  height: 6px;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #333333;
}

.printer-bottom {
  z-index: 0;
  border: 6px solid #666666;
  height: 6px;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #333333;
}

.paper-container {
  position: relative;
  overflow: hidden;
  height: 467px;
}

.paper {
  background: #ffffff;
  position: absolute;
  z-index: 2;
  margin: 0 12px;
  margin-top: -12px;
  border: 1px solid #d9dbe4;
  border-radius: 8px;
  animation: print 1800ms cubic-bezier(0.68, -0.55, 0.265, 0.9);
  -moz-animation: print 1800ms cubic-bezier(0.68, -0.55, 0.265, 0.9);
}

.main-contents {
  margin: 0 12px;
  padding: 24px;
}

.jagged-edge {
  position: relative;
  height: 20px;
  width: 100%;
  margin-top: -1px;
}

.jagged-edge:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%);
  background-size: 16px 40px;
  background-position: 0 -20px;
}

.success-icon {
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  height: 100%;
  margin: 36px 0;
  color: #359d00;
}

.success-title {
  font-size: 22px;
  text-align: center;
  color: #666;
  font-weight: bold;
  margin-bottom: 16px;
}

.success-description {
  font-size: 15px;
  line-height: 21px;
  color: #999;
  text-align: center;
  margin-bottom: 24px;
}

.order-details {
  text-align: start;
  color: #333;
  font-weight: bold;
}
.order-details .order-number-label {
  font-size: 15px;
  line-height: 21px;
  color: #999;
}
.order-details .order-number {
  line-height: 36px;
  font-size: 18px;
  margin-bottom: 6px;
  text-align: center;
}

.order-footer {
  text-align: center;
  line-height: 18px;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: bold;
  color: #999;
}

/* Spinners */
.section-white {
  color: #4e4f51;
  background: #fff;
}

.section-white .loader-spinner div:after {
  background: #4e4f51;
}

.loader-spinner {
  display: inline-block;
  position: relative;
  color: official;
  height: 300px;
  width: 300px;
}

.loader-spinner div {
  animation: loader-spinner 1.2s linear infinite;
  transform-origin: 150px 150px;
}

.loader-spinner div:after {
  display: block;
  position: absolute;
  top: 40px;
  left: 140px;
  border-radius: 10px;
  content: " ";
  height: 70px;
  width: 20px;
}

.loader-spinner div:nth-child(1) {
  animation-delay: -1.1s;
  transform: rotate(0deg);
}

.loader-spinner div:nth-child(2) {
  animation-delay: -1s;
  transform: rotate(30deg);
}

.loader-spinner div:nth-child(3) {
  animation-delay: -0.9s;
  transform: rotate(60deg);
}

.loader-spinner div:nth-child(4) {
  animation-delay: -0.8s;
  transform: rotate(90deg);
}

.loader-spinner div:nth-child(5) {
  animation-delay: -0.7s;
  transform: rotate(120deg);
}

.loader-spinner div:nth-child(6) {
  animation-delay: -0.6s;
  transform: rotate(150deg);
}

.loader-spinner div:nth-child(7) {
  animation-delay: -0.5s;
  transform: rotate(180deg);
}

.loader-spinner div:nth-child(8) {
  animation-delay: -0.4s;
  transform: rotate(210deg);
}

.loader-spinner div:nth-child(9) {
  animation-delay: -0.3s;
  transform: rotate(240deg);
}

.loader-spinner div:nth-child(10) {
  animation-delay: -0.2s;
  transform: rotate(270deg);
}

.loader-spinner div:nth-child(11) {
  animation-delay: -0.1s;
  transform: rotate(300deg);
}

.loader-spinner div:nth-child(12) {
  animation-delay: 0s;
  transform: rotate(330deg);
}

@keyframes loader-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 991px) {
  .loader-spinner {
    height: 180px;
    width: 180px;
  }
  .loader-spinner div {
    transform-origin: 90px 90px;
  }
  .loader-spinner div:after {
    top: 10px;
    left: 85px;
    height: 50px;
    width: 10px;
  }
}
/* End Spinners */
@keyframes print {
  0% {
    transform: translateY(-90%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes print {
  0% {
    -webkit-transform: translateY(-90%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
@-moz-keyframes print {
  0% {
    -moz-transform: translateY(-90%);
  }
  100% {
    -moz-transform: translateY(0%);
  }
}
@-ms-keyframes print {
  0% {
    -ms-transform: translateY(-90%);
  }
  100% {
    -ms-transform: translateY(0%);
  }
}
.profile-change-info {
  padding: 4px 15px;
  box-shadow: 0 0 5px #c3c3c3;
  border-radius: 5px;
}

@media (max-width: 1023px) and (min-width: 740px) {
  .profile-input-group {
    flex: 1 1 100%;
    border-radius: 2px;
  }
  .profile-input-group-text {
    width: 100%;
  }
}
@media (max-width: 739px) {
  .profile-input-group {
    flex: 1 1 100%;
    border-radius: 2px;
  }
  .profile-input-group-text {
    width: 100%;
  }
}
.btn-send-auth-code {
  color: #006df9;
  cursor: pointer;
  margin-right: 6px;
}

.counter-send-auth-code {
  border-radius: 50%;
  border: 3px dashed #3a83f7;
  color: #ff6000;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
}

.input-auth-code {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  padding: 4px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #1454cf;
}
.input-auth-code:focus {
  color: #1454cf;
}
.input-auth-code:focus-within {
  color: #1454cf;
}
.input-auth-code.invalid {
  box-shadow: 0 0 0 0.2rem rgba(255, 86, 0, 0.25);
  border-color: #ff4b00;
}

.user-profile-change-info .btn-email-change {
  color: #3a83f7 !important;
  font-size: 14px;
}
.user-profile-change-info .btn-email-change:hover {
  border: 1px solid #3a83f7;
}

/* CSS cho hiệu ứng rung */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}
.shake {
  animation: shake 0.3s ease-in-out;
}

.email-change-wrapper {
  border-radius: 16px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(16, 26, 51, 0.08) 0px 0px 0px 1px, rgba(16, 26, 51, 0.08) 0px 8px 16px;
  overflow: hidden;
  margin: 8px 0;
  padding: 16px;
  max-width: 600px;
}

/* Tabs tài khoản — bo góc, active rõ. Ghi đè glow xám (0 0 5px) có sẵn */
#v-pills-tab.mb-detail-nav-pills {
  box-shadow: none !important;
  padding: 0;
  margin-top: 0;
  gap: 8px;
}

#v-pills-tab .nav-link {
  border: 1px solid #e6ebf4 !important;
  border-radius: 11px;
  color: #495057;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 16px;
  background: #fff;
  transition: 0.15s;
}

#v-pills-tab .nav-link:hover {
  border-color: #b9c6e6 !important;
  color: #0d6efd;
}

#v-pills-tab .nav-link.active {
  background: #0d6efd;
  border-color: #0d6efd !important;
  color: #fff !important;
}

/* Card ngoài: thay glow xám bằng viền mảnh + shadow mềm; bỏ card lồng bên trong */
#v-pills-tabContent.detail-updateinfo {
  box-shadow: 0 4px 18px rgba(16, 26, 51, 0.06) !important;
  border: 1px solid #e9edf4;
  border-radius: 14px;
  padding: 20px 22px;
}

#v-pills-tabContent > .tab-pane {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

#v-pills-tabContent .detail_customer-update {
  width: 100%;
}

/* Thẻ trạng thái xác minh */
.acc-verify {
  /* Icon 1 màu đồng nhất (trạng thái đã có badge bên phải) */
  /* Nhắc "1 trong 2" (danh tính) — legacy hint */
  /* Badge trạng thái từ chối */
  /* Khối gom "danh tính = Zalo hoặc KYC" (1 trong 2) */
  /* Khối VAT */
  /* Highlight dòng bị redirect tới */
}
.acc-verify .av-head {
  margin-bottom: 6px;
}
.acc-verify .av-title {
  font-weight: 700;
  font-size: 16px;
  color: #1f2a44;
}
.acc-verify .av-sub {
  font-size: 12.5px;
  color: #8a93a3;
  margin-top: 2px;
}
.acc-verify .av-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid #eef1f6;
}
.acc-verify .av-row.first {
  border-top: none;
}
.acc-verify .av-ico, .acc-verify .av-ico.ok, .acc-verify .av-ico.warn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: #eef1f7;
  color: #64748b;
}
.acc-verify .av-main {
  flex: 1;
  min-width: 0;
}
.acc-verify .av-label {
  font-weight: 600;
  font-size: 14px;
  color: #1f2a44;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acc-verify .av-value {
  font-size: 13px;
  color: #6b7382;
  margin-top: 3px;
  word-break: break-all;
}
.acc-verify .av-note {
  font-size: 12px;
  color: #8a93a3;
  margin-top: 4px;
}
.acc-verify .av-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.acc-verify .av-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.acc-verify .av-tag--req {
  background: #fde7e9;
  color: #dc3545;
}
.acc-verify .av-tag--topup {
  background: #e7f0ff;
  color: #2f6bff;
}
.acc-verify .av-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}
.acc-verify .av-ok {
  background: #e2f6ea;
  color: #1a9d5a;
}
.acc-verify .av-pending {
  background: #fff2d8;
  color: #d98a00;
}
.acc-verify .av-btn {
  border: 1px solid #2f6bff;
  color: #2f6bff;
  background: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.acc-verify .av-btn:hover {
  background: #2f6bff;
  color: #fff;
}
.acc-verify .av-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #fff9ee;
  border: 1px solid #ffe0a3;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 12.5px;
  color: #8a6d00;
  margin: 12px 0 2px;
}
.acc-verify .av-hint i {
  margin-top: 2px;
}
.acc-verify .av-danger {
  background: #fde7e9;
  color: #dc3545;
}
.acc-verify .av-kyc--rejected .av-value {
  color: #dc3545;
}
.acc-verify .av-kyc--pending .av-value {
  color: #d98a00;
}
.acc-verify .av-tag--oneof {
  background: #e7f0ff;
  color: #2f6bff;
}
.acc-verify .av-identity {
  border: 1px solid #eef1f6;
  border-radius: 12px;
  margin: 8px 0;
  padding: 2px 14px 6px;
}
.acc-verify .av-identity--need {
  border-color: #cfe0ff;
  background: linear-gradient(135deg, #f6f9ff, #eef4ff);
}
.acc-verify .av-idhead {
  padding: 12px 0 4px;
}
.acc-verify .av-idhead-title {
  font-weight: 700;
  font-size: 14px;
  color: #12306e;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acc-verify .av-idhead-title > i {
  color: #2f6bff;
}
.acc-verify .av-idhead-note {
  font-size: 12.5px;
  color: #4b6088;
  margin-top: 4px;
}
.acc-verify .av-idhead-note--warn {
  color: #8a6d00;
}
.acc-verify .av-identity .av-row:first-of-type {
  border-top: 1px solid #eef1f6;
}
.acc-verify .av-vat {
  border-top: 1px solid #eef1f6;
  margin-top: 4px;
  padding-top: 16px;
}
.acc-verify .av-vat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acc-verify .av-vat-info {
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
}
.acc-verify .av-kv {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
}
.acc-verify .av-kv .k {
  color: #8a93a3;
  min-width: 90px;
  flex-shrink: 0;
}
.acc-verify .av-kv .v {
  color: #1f2a44;
  font-weight: 500;
}
.acc-verify .av-vat-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.acc-verify .ms-auto {
  margin-left: auto;
}
.acc-verify .av-focus {
  box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.35);
  background: #f5f8ff;
  border-radius: 12px;
  padding-left: 12px;
  padding-right: 12px;
  margin: 4px -12px;
  animation: avPulse 1.4s ease-in-out 2;
}

@keyframes avPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
  }
}
.kyc-user-v2 > h5 {
  font-weight: 700;
  color: #212529;
  margin-bottom: 16px;
}

.kyc-user-v2 .alert {
  border-radius: 12px;
}

/* Form dạng card */
.kyc-user-v2 .kyc-upload-wrapper {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 2px 14px rgba(16, 26, 51, 0.05);
}

.kyc-user-v2 .form-label {
  font-weight: 600;
  font-size: 13.5px;
  color: #344054;
  margin-bottom: 6px;
}

.kyc-user-v2 .form-control, .kyc-user-v2 .custom-select {
  border: 1px solid #d5dce6;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 14px;
  height: auto;
}

.kyc-user-v2 .form-control:focus, .kyc-user-v2 .custom-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
  outline: none;
}

.kyc-user-v2 .form-control[readonly] {
  background: #f3f5f8;
  color: #495057;
}

.kyc-user-v2 small.text-muted {
  font-size: 12px;
}

/* Chọn loại tài khoản */
.kyc-user-v2 #kycTypeSelect {
  max-width: 300px;
  font-weight: 600;
}

/* Nhóm Tỉnh/Xã */
.kyc-user-v2 .input-group-text {
  border-radius: 10px 0 0 10px;
  background: #f3f5f8;
  border: 1px solid #d5dce6;
  border-right: none;
  font-size: 13px;
  font-weight: 600;
  color: #495057;
}

.kyc-user-v2 .input-group .custom-select {
  border-radius: 0 10px 10px 0;
}

/* File input đẹp hơn */
.kyc-user-v2 input[type=file].form-control {
  padding: 9px 12px;
  cursor: pointer;
}

.kyc-user-v2 input[type=file].form-control::file-selector-button {
  border: none;
  background: #eef4ff;
  color: #0d6efd;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 13px;
  margin-right: 12px;
  cursor: pointer;
}

.kyc-user-v2 input[type=file].form-control::file-selector-button:hover {
  background: #dce9ff;
}

/* Giới tính: radio pill */
.kyc-user-v2 .kuv-radios {
  display: flex;
  gap: 10px;
}

.kyc-user-v2 .kuv-radios input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.kyc-user-v2 .kuv-radios label {
  margin: 0;
  flex: 1;
  text-align: center;
  padding: 10px 16px;
  border: 1px solid #d5dce6;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  background: #fff;
  transition: 0.15s;
}

.kyc-user-v2 .kuv-radios input:checked + label {
  border-color: #0d6efd;
  background: #eff6ff;
  color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.kyc-user-v2 .kuv-radios label:hover {
  border-color: #9ec5fe;
}

/* Ngày sinh: ô mask + nút chọn lịch */
.kyc-user-v2 .kuv-datewrap {
  position: relative;
}

.kyc-user-v2 .kuv-datewrap .form-control {
  padding-right: 46px;
}

.kyc-user-v2 .kuv-calbtn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: #eef4ff;
  color: #0d6efd;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kyc-user-v2 .kuv-calbtn:hover {
  background: #dce9ff;
}

.kyc-user-v2 .kuv-datenative {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
}

/* Nút gửi */
.kyc-user-v2 #kycPersonalSubmitBtn, .kyc-user-v2 #kycBusinessSubmitBtn {
  border-radius: 10px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14.5px;
  margin-top: 6px;
}

.kyc-choose-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 16px;
  background: #eef1f8;
  min-height: calc(100vh - 60px);
}

.kyc-choose-page .kcc-card {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(16, 26, 51, 0.1);
  padding: 34px 34px 28px;
}

.kyc-choose-page .kcc-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #d8f3e3;
  color: #1a9d5a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}

.kyc-choose-page .kcc-title {
  font-weight: 800;
  color: #1f2a44;
  margin: 0 0 10px;
  font-size: 24px;
}

.kyc-choose-page .kcc-sub {
  color: #5b6472;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.kyc-choose-page .kcc-opt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1.5px solid #e3e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: 0.15s;
  background: #fff;
}

.kyc-choose-page .kcc-opt:hover {
  border-color: #b9c6e6;
}

.kyc-choose-page .kcc-opt.is-active {
  border-color: #2f6bff;
  background: #f5f8ff;
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.1);
}

.kyc-choose-page .kcc-opt input {
  position: absolute;
  opacity: 0;
}

.kyc-choose-page .kcc-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #c3ccdb;
  margin-top: 2px;
  position: relative;
  transition: 0.15s;
}

.kyc-choose-page .kcc-opt.is-active .kcc-radio {
  border-color: #2f6bff;
}

.kyc-choose-page .kcc-opt.is-active .kcc-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #2f6bff;
}

.kyc-choose-page .kcc-opt-title {
  display: block;
  font-weight: 700;
  color: #1f2a44;
  font-size: 15px;
  margin-bottom: 4px;
}

.kyc-choose-page .kcc-opt-desc {
  display: block;
  color: #6b7382;
  font-size: 13px;
  line-height: 1.55;
}

.kyc-choose-page .kcc-done {
  color: #1a9d5a;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
}

.kyc-choose-page .kcc-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #f6f8fb;
  border: 1px solid #e9edf4;
  border-radius: 12px;
  padding: 13px 15px;
  color: #5b6472;
  font-size: 12.5px;
  line-height: 1.55;
  margin: 6px 0 20px;
}

.kyc-choose-page .kcc-note i {
  color: #8a93a3;
  margin-top: 2px;
}

.kyc-choose-page .kcc-actions {
  display: flex;
  justify-content: flex-end;
}

.kyc-choose-page .kcc-btn-primary {
  background: #2f6bff;
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 13px 26px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: 0.15s;
}

.kyc-choose-page .kcc-btn-primary:hover {
  background: #1f57e6;
}

@media (max-width: 520px) {
  .kyc-choose-page .kcc-actions {
    justify-content: stretch;
  }
  .kyc-choose-page .kcc-btn-primary {
    width: 100%;
  }
}
.create-residential-vietnam .btn-sort-service-type {
  background-color: #f2f4f7;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: #333;
  font-weight: 500;
}
.create-residential-vietnam .btn-sort-service-type:hover {
  border: 1px solid #007bff;
  color: #007bff;
}
.create-residential-vietnam .btn-sort-service-type.active {
  border: 1px solid #007bff;
  color: #007bff;
}
.create-residential-vietnam .btn-sort-service-ip-version {
  background-color: #f2f4f7;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: #333;
  font-weight: 500;
}
.create-residential-vietnam .btn-sort-service-ip-version:hover {
  border: 1px solid #007bff;
  color: #007bff;
}
.create-residential-vietnam .btn-sort-service-ip-version.active {
  border: 1px solid #007bff;
  color: #007bff;
}
.create-residential-vietnam .btn-sort-option {
  color: #333;
  opacity: 0.7;
}
.create-residential-vietnam .btn-sort-option.active {
  opacity: 1;
  color: #007bff;
  font-weight: 600;
}
.create-residential-vietnam .more-info-btn:focus {
  outline: none;
  box-shadow: none;
}
.create-residential-vietnam .more-info-btn.show {
  background-color: #1976d2;
  color: #fff;
}
.create-residential-vietnam .btn-sort-service-modal {
  background-color: #f2f4f7;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: #333;
  font-weight: 500;
}
.create-residential-vietnam .btn-sort-service-modal:hover {
  border: 1px solid transparent;
  color: #007bff;
}
.create-residential-vietnam .btn-sort-service-modal.active {
  border: 1px solid #007bff;
  color: #007bff;
}

@media (max-width: 767px) {
  .more-info-wrapper {
    width: 100%;
    margin: 0;
  }
}
.proxy-create-v2 {
  background: #eef2f7;
  color: #1f2a37;
  padding: 16px;
  border-radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.proxy-create-v2 .pcv2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.proxy-create-v2 .pcv2-head .pcv2-head-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2482e5, #4aa3ff);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  box-shadow: 0 6px 14px rgba(36, 130, 229, 0.3);
}
.proxy-create-v2 .pcv2-head h6 {
  font-size: 19px;
  letter-spacing: 0.2px;
}
.proxy-create-v2 .pcv2-alerts:empty {
  display: none;
}
.proxy-create-v2 .pcv2-alerts .alert {
  margin-bottom: 14px;
}
.proxy-create-v2 .pcv2-panel {
  background: #fff;
  border: 1px solid #e7ebf0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
  overflow: hidden;
}
.proxy-create-v2 .pcv2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}
.proxy-create-v2 .pcv2-left-head {
  padding: 16px 16px 4px;
}
.proxy-create-v2 .pcv2-left-head span {
  font-size: 14px;
}
.proxy-create-v2 .search-country-box {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 16px 0;
  border: 1.5px solid #e7ebf0;
  border-radius: 9px;
  padding: 0 12px;
  height: 42px;
  background: #fff;
  transition: 0.15s;
}
.proxy-create-v2 .search-country-box:focus-within {
  border-color: #2482e5;
  box-shadow: 0 0 0 3px #e6f1fb;
}
.proxy-create-v2 .search-country-box i {
  color: #6b7280;
  font-size: 14px;
}
.proxy-create-v2 .search-country-box .input-search-country {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #1f2a37;
  height: 100%;
}
.proxy-create-v2 .country-quick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px 4px;
}
.proxy-create-v2 .country-quick-row .lbl {
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 700;
}
.proxy-create-v2 .country-quick-row .country-quick-chips {
  display: inline-flex;
  gap: 7px;
  flex-wrap: wrap;
}
.proxy-create-v2 .country-quick-row .quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e7ebf0;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  color: #1f2a37;
}
.proxy-create-v2 .country-quick-row .quick-chip img {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
}
.proxy-create-v2 .country-quick-row .quick-chip:hover {
  border-color: #2482e5;
  color: #2482e5;
  background: #e6f1fb;
}
.proxy-create-v2 .country-item, .proxy-create-v2 .pcv2-lh {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.proxy-create-v2 .pcv2-lh {
  padding: 11px 16px;
  margin-top: 12px;
  background: #f3f6fa;
  border-top: 1px solid #e7ebf0;
  border-bottom: 1px solid #e7ebf0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
}
.proxy-create-v2 .pcv2-lh .r {
  text-align: right;
}
.proxy-create-v2 .country-list {
  max-height: 620px;
  overflow-y: auto;
}
.proxy-create-v2 .country-item {
  padding: 7px 16px;
  margin: 0;
  border-bottom: 1px solid #eef1f5;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  color: #1f2a37;
}
.proxy-create-v2 .country-item:last-of-type {
  border-bottom: none;
}
.proxy-create-v2 .country-item .flag {
  width: 32px;
  height: 22px;
  object-fit: cover;
  border-radius: 4px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  flex: none;
}
.proxy-create-v2 .country-item .pcv2-c-name {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.proxy-create-v2 .country-item .country-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proxy-create-v2 .country-item .pcv2-c-plan {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.proxy-create-v2 .country-item .pcv2-c-type {
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
}
.proxy-create-v2 .country-item .pcv2-c-price {
  text-align: right;
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
}
.proxy-create-v2 .country-item .pcv2-c-price small {
  display: block;
}
.proxy-create-v2 .country-item .price {
  display: block;
  color: #de635d;
  font-weight: 800;
  font-size: 15px;
}
.proxy-create-v2 .country-item .badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
}
.proxy-create-v2 .country-item:hover {
  background: #886fb2;
  color: #fff;
}
.proxy-create-v2 .country-item:hover .country-name,
.proxy-create-v2 .country-item:hover .pcv2-c-plan,
.proxy-create-v2 .country-item:hover .pcv2-c-type,
.proxy-create-v2 .country-item:hover .pcv2-c-isp,
.proxy-create-v2 .country-item:hover .pcv2-c-price {
  color: #fff;
}
.proxy-create-v2 .country-item:hover .price {
  color: #ffbb73;
}
.proxy-create-v2 .country-item:has(input[type=radio]:checked) {
  background: #452476;
  color: #fff;
}
.proxy-create-v2 .country-item:has(input[type=radio]:checked) .country-name,
.proxy-create-v2 .country-item:has(input[type=radio]:checked) .pcv2-c-plan,
.proxy-create-v2 .country-item:has(input[type=radio]:checked) .pcv2-c-type,
.proxy-create-v2 .country-item:has(input[type=radio]:checked) .pcv2-c-isp,
.proxy-create-v2 .country-item:has(input[type=radio]:checked) .pcv2-c-price {
  color: #fff;
}
.proxy-create-v2 .country-item:has(input[type=radio]:checked) .country-name,
.proxy-create-v2 .country-item:has(input[type=radio]:checked) .pcv2-c-plan {
  font-weight: 700;
}
.proxy-create-v2 .country-item:has(input[type=radio]:checked) .price {
  color: #ff834f;
}
.proxy-create-v2 .message-not-found-country {
  padding: 16px;
  font-weight: 500;
}
.proxy-create-v2 .pcv2-c-isp {
  font-size: 13px;
  color: #1f2a37;
  font-weight: 600;
}
.proxy-create-v2.pcv2-5col .pcv2-lh,
.proxy-create-v2.pcv2-5col .country-item {
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1fr);
}
@media (max-width: 700px) {
  .proxy-create-v2.pcv2-5col .pcv2-lh,
  .proxy-create-v2.pcv2-5col .country-item {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .proxy-create-v2.pcv2-5col .pcv2-lh span:nth-child(3),
  .proxy-create-v2.pcv2-5col .pcv2-lh span:nth-child(4),
  .proxy-create-v2.pcv2-5col .country-item .pcv2-c-type,
  .proxy-create-v2.pcv2-5col .country-item .pcv2-c-isp {
    display: none;
  }
}
.proxy-create-v2 .pcv2-right {
  position: sticky;
  top: 16px;
}
.proxy-create-v2 .show-payment-info-wrapper .summary-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  background: linear-gradient(135deg, #0c447c, #2482e5);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.proxy-create-v2 .show-payment-info-wrapper .payment-info-content {
  padding: 4px 18px;
}
.proxy-create-v2 .payment-info-item {
  padding: 11px 0;
  margin: 0;
}
.proxy-create-v2 .payment-info-item:empty {
  display: none;
}
.proxy-create-v2 .payment-info-item label {
  display: block;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 7px;
}
.proxy-create-v2 .payment-info-item .text-danger {
  color: #de635d;
}
.proxy-create-v2 .payment-info-item input[type=number],
.proxy-create-v2 .payment-info-item input[type=text],
.proxy-create-v2 .payment-info-item select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid #e7ebf0;
  border-radius: 9px;
  outline: none;
  background: #fff;
  font-size: 14px;
  color: #1f2a37;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 0;
}
.proxy-create-v2 .payment-info-item input[type=number]:focus,
.proxy-create-v2 .payment-info-item input[type=text]:focus,
.proxy-create-v2 .payment-info-item select:focus {
  border-color: #2482e5;
  box-shadow: 0 0 0 3px #e6f1fb;
}
.proxy-create-v2 .payment-info-item select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.proxy-create-v2 .payment-info-item select.payment-info-prices {
  color: #de635d;
  font-weight: 700;
  font-size: 15px;
}
.proxy-create-v2 .payment-info-item input[type=radio] {
  width: 16px;
  height: 16px;
  accent-color: #2482e5;
}
.proxy-create-v2 .payment-info-item .custom-port-wrapper,
.proxy-create-v2 .payment-info-item .custom-authentication-wrapper {
  padding: 10px;
  border: 1px solid #e7ebf0;
  border-radius: 10px;
  background: #f7f9fc;
  margin-top: 8px;
}
.proxy-create-v2 .payment-info-item .custom-port-wrapper .input-group,
.proxy-create-v2 .payment-info-item .custom-authentication-wrapper .input-group {
  display: flex;
}
.proxy-create-v2 .payment-info-item:has(.payment-info-price) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff5f4;
  border: 1px solid #f6d4d2;
  border-radius: 10px;
  padding: 13px 15px;
  margin-top: 6px;
}
.proxy-create-v2 .payment-info-item:has(.payment-info-price) > label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1f2a37;
}
.proxy-create-v2 .payment-info-item:has(.payment-info-price) .payment-info-price {
  text-align: right;
}
.proxy-create-v2 .payment-info-item:has(.payment-info-price) .payment-info-price #totalCost {
  color: #de635d;
  font-size: 23px;
  font-weight: 800;
}
.proxy-create-v2 .payment-info-item:has(.payment-info-price) .wrapper-error-balance {
  width: 100%;
}
.proxy-create-v2 .show-country-wrapper .row {
  justify-content: flex-start !important;
  margin: 0 !important;
}
.proxy-create-v2 .show-country-wrapper .row:has(.show-country-img) {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #e6f1fb;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
  padding: 7px 11px;
}
.proxy-create-v2 .show-country-wrapper .show-country-img {
  height: 18px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.proxy-create-v2 .show-country-wrapper .show-country-name {
  font-weight: 700;
  font-size: 13.5px;
  margin-left: 0 !important;
}
.proxy-create-v2 .show-isp-wrapper {
  position: relative;
}
.proxy-create-v2 .show-isp-wrapper .select-isp-vn {
  display: none;
}
.proxy-create-v2 .show-isp-wrapper .select-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1.5px solid #e7ebf0;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.proxy-create-v2 .show-isp-wrapper .select-btn:hover {
  border-color: #b9c2cf;
}
.proxy-create-v2 .show-isp-wrapper .select-btn:focus-within {
  border-color: #2482e5;
  box-shadow: 0 0 0 3px #e6f1fb;
}
.proxy-create-v2 .show-isp-wrapper .select-btn img {
  max-width: 60px;
  max-height: 20px;
  display: none;
}
.proxy-create-v2 .show-isp-wrapper .select-btn img[src]:not([src=""]) {
  display: block;
}
.proxy-create-v2 .show-isp-wrapper .select-btn span {
  flex: 1;
  font-size: 14px;
}
.proxy-create-v2 .show-isp-wrapper .select-btn::after {
  content: "▼";
  color: #6b7280;
  font-size: 11px;
}
.proxy-create-v2 .show-isp-wrapper .select-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #e7ebf0;
  border-radius: 9px;
  margin-top: 6px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
  z-index: 999;
}
.proxy-create-v2 .show-isp-wrapper .select-dropdown.show {
  display: block;
}
.proxy-create-v2 .show-isp-wrapper .option-isp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
}
.proxy-create-v2 .show-isp-wrapper .option-isp img {
  max-width: 60px;
  max-height: 20px;
  display: none;
}
.proxy-create-v2 .show-isp-wrapper .option-isp img[src]:not([src=""]) {
  display: block;
}
.proxy-create-v2 .show-isp-wrapper .option-isp:hover {
  background: #e6f1fb;
}
.proxy-create-v2 .show-isp-wrapper .option-isp.selected {
  background: #eef2f8;
}
.proxy-create-v2 .wrapper-error-balance {
  margin-top: 4px;
}
.proxy-create-v2 .agree-term-box {
  margin-top: 10px;
}
.proxy-create-v2 .agree-term-box:empty {
  display: none;
}
.proxy-create-v2 .agree-term-box label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  cursor: pointer;
}
.proxy-create-v2 .agree-term-box .form-check-input {
  position: static;
  margin: 2px 0 0;
  width: 17px;
  height: 17px;
  accent-color: #2482e5;
  flex: none;
}
.proxy-create-v2 .agree-term-box h6 {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}
.proxy-create-v2 .agree-term-box a {
  color: #2482e5;
  text-decoration: none;
}
.proxy-create-v2 .agree-term-box a:hover {
  text-decoration: underline;
}
.proxy-create-v2 .wrapper-description:not(:empty) {
  background: #fff7f6;
  border: 1px solid #f6d9d7;
  border-radius: 9px;
  padding: 10px 12px;
}
.proxy-create-v2 .pcv2-terms {
  padding: 6px 18px 0;
}
.proxy-create-v2 .pcv2-cta {
  padding: 10px 18px 18px;
}
.proxy-create-v2 .pcv2-cta .btn-primary {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 11px;
  background: #2482e5;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 18px rgba(36, 130, 229, 0.28);
  transition: 0.15s;
}
.proxy-create-v2 .pcv2-cta .btn-primary:hover:not(:disabled) {
  background: #0c447c;
}
.proxy-create-v2 .pcv2-cta .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
@media (max-width: 991px) {
  .proxy-create-v2 .pcv2-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .proxy-create-v2 .pcv2-right {
    position: static;
  }
}
@media (max-width: 575px) {
  .proxy-create-v2 .pcv2-lh,
  .proxy-create-v2 .country-item {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .proxy-create-v2 .pcv2-lh span:nth-child(3),
  .proxy-create-v2 .country-item .pcv2-c-type {
    display: none;
  }
}

.admin-security {
  font-size: 16px;
}
.admin-security #deviceAccordion {
  width: 100%;
}
.admin-security #deviceAccordion .accordion-item {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.admin-security #deviceAccordion .accordion-button {
  width: 100%;
  padding: 16px 20px;
  background: #fff;
  box-shadow: none;
  color: inherit;
}
.admin-security #deviceAccordion .accordion-button:focus {
  box-shadow: none;
}
.admin-security #deviceAccordion .accordion-button::after {
  flex-shrink: 0;
  margin-left: 12px;
}
.admin-security #deviceAccordion .accordion-button > .deviceHeaderRow {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-security #deviceAccordion .deviceHeaderLeft,
.admin-security #deviceAccordion .deviceHeaderMid,
.admin-security #deviceAccordion .deviceHeaderRight {
  display: flex;
  align-items: center;
  min-width: 0;
}
.admin-security #deviceAccordion .deviceHeaderLeft {
  flex: 1 1 40%;
  gap: 10px;
}
.admin-security #deviceAccordion .deviceHeaderLeft .deviceName {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.admin-security #deviceAccordion .deviceHeaderMid {
  flex: 0 0 auto;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.admin-security #deviceAccordion .deviceHeaderMid small {
  font-size: 15px;
}
.admin-security #deviceAccordion .deviceHeaderMid .lastSeenValue {
  font-weight: 600;
}
.admin-security #deviceAccordion .deviceHeaderRight {
  flex: 1 1 40%;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}
.admin-security #deviceAccordion .deviceHeaderRight .badge {
  font-size: 14.5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
}
.admin-security #deviceAccordion .accordion-body {
  padding: 20px;
  font-size: 15.5px;
}
.admin-security #deviceAccordion .accordion-body h5 {
  font-size: 17px;
}
.admin-security #deviceAccordion .accordion-body .table {
  font-size: 15px;
}
.admin-security #deviceAccordion .accordion-body .table th {
  font-weight: 600;
}
@media (max-width: 768px) {
  .admin-security #deviceAccordion .accordion-button {
    padding: 14px 14px;
  }
  .admin-security #deviceAccordion .accordion-button > .deviceHeaderRow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .admin-security #deviceAccordion .deviceHeaderLeft {
    flex: 1 1 auto;
    width: 100%;
  }
  .admin-security #deviceAccordion .deviceHeaderMid {
    justify-content: flex-start;
  }
  .admin-security #deviceAccordion .deviceHeaderRight {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

label:hover,
select:hover {
  cursor: pointer;
}

.primary-color {
  background-color: rgb(0, 64, 102);
}

.text-info-server {
  color: #007bfe !important;
}

.content {
  display: block;
  min-width: auto;
  min-height: 100vh;
}

.text-gold {
  color: #f7bf66;
}

.text-white {
  color: rgb(224, 221, 221);
}

.navbar-color {
  background-color: #231832;
}

.admin-navbar-color {
  background-color: #e3f2fd;
}

.admin-header-color {
  background-color: #343a40;
}

.dropdown {
  z-index: 99999;
}

.fixed-top-2 {
  margin-top: 32px;
}

.text-height {
  line-height: 0.5rem;
  padding: 0.1rem;
}

.flex-1 {
  flex: 1 1 !important;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.bg-orange {
  background-color: #e05d06;
}

.text-orange {
  color: #e05d06;
}

.btn-orange {
  background-color: #e05d06;
  border-color: #e05d06;
  color: #fff;
}
.btn-orange:hover {
  background-color: #ff9b58;
  border-color: #ff9b58;
}
.btn-orange:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 155, 88, 0.25);
}

.border-orange {
  border: 1px solid #f19152 !important;
}

.btn-sort {
  background-color: #d8e1e9;
  border-color: #d8e1e9;
  color: #3e4246;
}
.btn-sort:hover {
  background-color: #dff0ff;
  border-color: #0079f3;
  color: #0079f3;
}

.custom-select {
  cursor: pointer;
  color: #333;
}

li.disabled:hover {
  cursor: not-allowed;
}

.nav-link-admin {
  color: #333;
}

.ml-16 {
  margin-left: 16px;
}

.m-0 {
  margin: 0;
}

.card {
  border: solid 1px #17a2b8;
}

.card .btn-copy {
  word-break: break-all;
}

.col-a-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.fw-700 {
  font-weight: 700;
}

.form-search {
  padding: 6px;
  background-image: linear-gradient(360deg, #79d9cc, #80d1fb);
  border-radius: 3px;
}

.form-search-input {
  padding: 8px;
  outline-offset: unset;
  outline: 1px solid #343a40;
  border: unset;
  border-radius: 4px;
  width: 185px;
}

.form-search-btn {
  border: unset;
  padding: 8px;
  background-color: #343a40;
  color: white;
  border-radius: 4px;
}
.form-search-btn:hover {
  background-color: #ff7100;
}

.nav-top-hieght {
  height: 55px;
}

.text-black {
  color: #333 !important;
}
.text-black.active {
  color: #fff !important;
}

.nav-link {
  color: #ccc;
  min-width: 140px;
  flex: 1 1;
}

.nav-link-text {
  color: #ccc;
  font-size: 0.9rem;
  font-weight: 500;
}

.dropdown-item {
  padding-left: 5px;
}

#header-user .box-icon-notification {
  color: #ff7d21;
}
#header-user .box-icon-notification:hover {
  cursor: pointer;
  opacity: 0.8;
}
#header-user .box-icon-notification::after {
  content: unset;
}

.fa-play-circle,
.fa-sign-in-alt,
.fa-info-circle {
  color: #377eda;
  font-size: 0.9rem;
}

.fa-exclamation-circle,
.fa-folder-open, .fa-user-cog,
.fa-user-cog {
  color: #ffc107;
  font-size: 0.9rem;
}

.fa-ban,
.fa-sliders-h,
.fa-sign-out-alt {
  color: #ff4107;
  font-size: 0.9rem;
}

.fa-user-circle {
  color: rgba(0, 198, 0, 0.9);
  font-size: 0.9rem;
}

.fa-leanpub {
  color: rgba(254, 255, 254, 0.9);
}

.fa-user {
  color: rgba(0, 198, 0, 0.9);
}

.user-profile-icon, .user-balance-icon {
  color: rgba(254, 255, 254, 0.9);
  padding-left: 10px;
  font-size: 0.9rem;
}

.user-profile-name {
  position: relative;
  font-size: 1rem;
  color: #ffc107;
  font-weight: 400;
}

.icon-ipv4 {
  font-size: 1rem;
  color: #007bff;
  font-weight: 600;
}

.icon-ipv6 {
  font-size: 1rem;
  color: #329944;
  font-weight: 600;
}

.icon-gaming-proxy {
  font-size: 1rem;
  color: #f77801;
  font-weight: 600;
}

.footer {
  background-color: #241d2e;
}

.footer-widget {
  min-height: 50px;
  color: #ccc;
}

.widget-title {
  padding: 10px 0;
}

.copyright-text {
  padding: 10px 15px;
  color: #ccc;
}

.selector-for-some-widget {
  box-sizing: content-box;
}

h1 {
  color: green;
}

.top-nav {
  height: 35px;
}

.navbar-text {
  padding: 0;
  margin: 0;
}

.home-page {
  min-height: 1000px;
  border: 1px solid #ccc;
}

.sum-proxy-order {
  min-height: 315px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.quantity-row {
  margin: 10px 5px;
}

.quantity-row-title {
  display: block;
  margin-left: 5px;
  margin-top: 5px;
}

.x-row {
  display: block;
  margin-top: 5px;
}

.quantity-input-btn {
  margin-left: -6px;
}

.term-creating {
  display: block;
  margin-top: 21px;
}

.agree-term-box {
  display: block;
  margin-top: 6px;
}

.pay-box-config {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 50px;
}

.btn-create-area {
  margin: 12px 0 12px -20px;
}

.form-message {
  text-align: left;
  color: #ff4107;
}

.form-label {
  font-weight: 400;
  padding-bottom: 2px;
  line-height: 1.1rem;
  font-size: 1.1rem;
}

.btn-copy {
  background-color: #fff;
  color: #06000e;
  border: #fff;
  padding: 0 1;
}
.btn-copy:hover {
  cursor: pointer;
}

.text-copy {
  word-break: break-all;
  padding: 0 1;
}
.text-copy:hover {
  cursor: pointer;
}

.icon-copy {
  color: #ddd;
}

.copy:hover {
  cursor: pointer;
}

.input-topup {
  border: solid 1px #28a745;
}

#generator-invoice .card {
  border: solid 1px #d35f33;
}

.link-btn-payment, .link-btn-proxies {
  text-decoration: none;
  color: #fff;
}

.link-btn-ticket {
  text-decoration: none;
  color: rgb(2, 0, 0);
}

.link-btn-users {
  text-decoration: none;
  color: rgb(2, 0, 0);
}

.form-inline {
  padding: 10px;
  background-image: linear-gradient(360deg, #004066, #231832);
  border-radius: 3px;
}

.form-inline-input {
  padding: 8px;
  outline-offset: unset;
  outline: none;
  border-radius: 4px;
  width: 185px;
}

.form-inline-button {
  padding: 8px;
  border-radius: 4px;
}

.form-inline-button:hover {
  background-color: #ff6c1d;
  color: white;
  cursor: pointer;
}

.server {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  box-shadow: 0 0 2px #929191;
  border: 1px solid #d3c5c5;
  width: 128px;
  height: 50px;
}

#create-form .table {
  margin-bottom: unset;
}

#create-form .table-responsive-sm {
  margin-left: unset;
  margin-right: unset;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3019607843);
}

#create-form .table-responsive-xl {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3019607843);
}

#create-form .table .table-bordered {
  margin-bottom: 0;
}

#create-form .table tbody {
  display: flex;
  flex-direction: column;
}

#create-form .table tr {
  display: flex;
}

#create-form .table th {
  flex-basis: 40%;
  max-width: 40%;
}

#create-form .table td {
  flex-basis: 60%;
  max-width: 60%;
}

.input-group > .form-control {
  flex: 1 1 50%;
  min-width: 38px;
}

.input-group .input-group-box2 {
  flex: 1 1 50%;
}

.full-w {
  width: 100%;
}

.full-h {
  height: 100%;
}

.renew-table-responsive-sm {
  margin: 12px 0 12px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3019607843);
  display: block;
  width: 100%;
  overflow-x: auto;
}

.renew-container .agree-term-box .form-check-input {
  margin-left: unset;
}

.renew-container .agree-term-box label {
  margin-bottom: unset;
  margin-left: 0.9rem;
}

.renew-container .btn-create-area {
  margin: 12px 0 12px 0;
}

.renew-container .table-bordered {
  margin-bottom: unset;
}

.renew-container .renew-form-control {
  flex: 1 1 70%;
}

.renew-container .renew-input-group-append {
  flex: 1 1 30%;
}

.renew-container .renew-form-control2 {
  flex: 1 1 55%;
}

.renew-container .renew-input-group-append2 {
  flex: 1 1 45%;
}

.renew-input-group-text {
  width: 100%;
}

.extend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.extend small {
  margin-right: 5px;
}

.modal-note {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.modal-note-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.modal-note-container {
  background-color: #fff;
  width: 90vh;
  min-height: 65vh;
  flex-direction: column;
  z-index: 3;
  box-shadow: 0 0 20px #4e4e4e;
}

.note-container-flex {
  flex-grow: 1;
}

.modal-note-heading {
  padding: 10px 35px;
  text-align: center;
  border-bottom: 1px solid black;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-note-form {
  padding: 10px;
}

.modal-note-container .modal-note-close {
  padding: 5px;
  text-align: center;
}

.footer-link-login-instructions {
  overflow: auto;
}

.topup-card {
  width: 140px;
  border: none;
  border-radius: 7px;
  border: solid 2px #ff8e00;
}

.topup-card-body {
  display: flex;
  padding: 0.25rem;
  min-height: 40px;
  justify-content: space-evenly;
  align-items: center;
}

.topup-card-title,
.topup-card-text {
  margin: unset;
}

.topup-bank {
  max-width: unset;
}

.security-row-change-password {
  justify-content: center;
  margin-top: 12px;
}

.security-change-password {
  max-width: 500px;
  box-shadow: 0 0 5px rgb(155, 155, 155);
  padding: 4px 15px;
}

#check-box-all,
#proxy-check-box {
  height: 16px;
  width: 16px;
}

#user-running select {
  height: 36px;
  font-size: 18px;
}

.card-running {
  max-width: 400px;
}

#mb-check-box-all,
#mb-proxy-check-box {
  height: 24px;
  width: 24px;
}

.box-sort {
  background-color: whitesmoke;
  padding: 8px;
  border-radius: 4px;
}

.box-action {
  background-color: whitesmoke;
  padding: 8px;
  border-radius: 4px;
}

.wrapper-btn-sort {
  position: relative;
}
.wrapper-btn-sort .list-btn-sort {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 36px;
  right: -3px;
  padding: 2px;
  background-color: #fff;
  box-shadow: 0 0 2px #dd8144;
  border-radius: 4px;
  z-index: 999;
}
.wrapper-btn-sort .list-btn-sort .btn-sort {
  color: #3e4246;
  margin: 1px 0;
}
.wrapper-btn-sort .list-btn-sort .btn-sort.bg-active {
  background-color: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.wrapper-btn-sort .list-btn-sort .btn-sort:hover {
  border-color: var(--orange);
  background-color: var(--orange);
  color: #fff;
}
.wrapper-btn-sort:hover .list-btn-sort {
  display: flex;
}

.table-all {
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px #4cb3a0;
}
.table-all thead {
  background-color: #4cb3a0;
  color: white;
}
.table-all thead th {
  border-top: unset;
}

.table-running {
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px #5d8fa7;
}
.table-running thead {
  background-color: #5d8fa7;
  color: white;
}
.table-running thead th {
  border-top: unset;
}

.table-expiring {
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px #a3944c;
}
.table-expiring thead {
  background-color: #a3944c;
  color: white;
}
.table-expiring thead th {
  border-top: unset;
}

.table-cancelled {
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px #4a4847;
}
.table-cancelled thead {
  background-color: #4a4847;
  color: white;
}
.table-cancelled thead th {
  border-top: unset;
}

.table-orange {
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px #f36526;
}
.table-orange thead {
  background-color: #f36526;
  color: white;
}
.table-orange thead th {
  border-top: unset;
}

#user-expiring select {
  height: 36px;
  font-size: 18px;
}

.card-expiring {
  max-width: 400px;
}

.sort-hover {
  position: relative;
  list-style: none;
  width: max-content;
  padding: 0;
}
.sort-hover:hover .list-sort {
  display: block;
}

.btn-sort-hover {
  padding: 6px 12px;
  color: #007bff;
  width: 150px;
  background-color: white;
  border: 1px solid #007bff;
}
.btn-sort-hover:hover {
  cursor: pointer;
}

.list-sort {
  width: 150px;
  position: absolute;
  list-style: none;
  background-color: white;
  border: 1px solid #007bff;
  border-top: none;
  padding: 0;
  margin: 0;
  display: none;
  z-index: 999999;
}

.sort-item {
  margin: 2px 0;
}

.select-modal-renew-proxy {
  font-size: 18px;
  text-align: center;
  width: 100%;
}

.modal-proxy-container {
  max-width: 444px;
  margin: auto;
}

.modal-renew-proxy-ip {
  word-break: break-all;
}

.ad-invoices-form-inline {
  margin: 12px 0;
  border-radius: 3px;
}

.ad-invoices-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.ad-invoices-card-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px;
}

.ad-invoices-item-choose {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.detail_customer-update {
  min-width: 100%;
}

.detail-card-body {
  min-height: 136px;
}

.detail-card-body-last {
  display: flex;
  align-items: center;
}

.detail-card-body-btn {
  width: 100%;
}

.mb-detail-nav-pills {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 10px 0;
  padding: 5px;
  box-shadow: 0 0 5px #ababab;
  border-radius: 2px;
}

.detail-updateinfo {
  box-shadow: 0 0 5px #8f8e8e;
  padding: 16px;
  border-radius: 5px;
  margin: 10px 0;
}

.allemail-search {
  margin: 5px -15px;
}

.allemail-search-list {
  padding: 0;
}

.allemail-card {
  padding: 0;
  margin: 10px 0;
}

.allemail-card-body {
  text-align: center;
  font-weight: 600;
  background-color: #9bd2db;
  font-size: 2.2rem;
  line-height: 0.2rem;
}

.ad-proxy-card-id {
  padding: 10px 20px;
}

.ad-proxy-card-server {
  text-align: end;
  padding: 10px 20px;
}

.ad-proxy-input {
  width: 100%;
  padding: 4px;
  border: 1px solid #4f81a3;
}

.ad-proxy-lable {
  margin-bottom: 16px;
}

.ad-update-proxy-heading-label {
  width: 110px;
  font-size: 14px !important;
}

.ad-proxy-card {
  margin: 24px 0;
}

.ad-proxy-card-body {
  border-top: 1px solid rgb(199, 199, 199);
  border-bottom: 1px solid rgb(199, 199, 199);
}

.ad-proxy-card-head {
  justify-content: space-between;
}

.ad-proxy-card-footer {
  display: flex;
  justify-content: space-between;
}

.ad-proxy-card-footer-btn {
  flex: 1 1 50%;
  max-width: 50%;
}

.ad-proxy-country-end-icon {
  height: 20px;
}

.ad-proxy-form-check {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 5px;
  width: 100%;
  justify-content: flex-start;
}

.content .ad-proxy-form-check-input {
  width: 26px;
  height: 26px;
  position: unset;
  margin-right: 5px;
  margin-top: unset;
}

.ad-proxy-form-check-lable {
  word-wrap: break-word;
  word-break: break-all;
  margin-right: unset;
  flex-basis: 90%;
}

.ad-proxy-card-list-heading {
  font-weight: 700;
  text-align: center;
  padding: 6px;
}

.ad-addproxies-input-group-text {
  min-width: 100px;
}

.ad-billing-prices-add {
  box-shadow: 0 0 4px black;
  padding: 10px;
  border-radius: 4px;
}

.ad-security-message,
.ad-security-change-password-box {
  justify-content: center;
}

.ad-security-change-password {
  max-width: 500px;
  box-shadow: 0 0 4px black;
  padding: 10px;
  border-radius: 4px;
}

.form-notification {
  padding: 6px;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  box-shadow: 0 0 8px #333b70;
}

.btn-notification {
  height: max-content;
}

.box-card-description {
  display: -webkit-box;
}

.box-card-description {
  --line-height: 20px;
  line-height: var(--line-height);
  min-height: calc(var(--line-height) * 3);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
}

.box-card-email {
  --line-height: 20px;
  line-height: var(--line-height);
  min-height: calc(var(--line-height) * 2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
}

.input-email-list-modal {
  width: 100%;
  display: flex;
}

#input-email {
  width: 100%;
}

.checked-all-input-email-modal {
  margin: 0 15px;
  height: max-content;
}

.invalid-email {
  color: red;
  display: none;
}
.invalid-email.invalid {
  display: inline-block;
}

.invalid-same-email {
  color: red;
  display: none;
}
.invalid-same-email.invalid {
  display: inline-block;
}

.invalid-email-modal {
  color: red;
  display: none;
}
.invalid-email-modal.invalid {
  display: inline-block;
}

.invalid-same-email-modal {
  color: red;
  display: none;
}
.invalid-same-email-modal.invalid {
  display: inline-block;
}

.modal-notification {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  outline: 0;
}
.modal-notification.open {
  display: flex !important;
}

.modal-notification-layout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: black;
  opacity: 0.5;
}

.modal-notification-content {
  border-radius: 6px;
  margin: 8px;
  width: 500px;
  background-color: white;
  z-index: 200;
}

#modalDetail-ofUserEmail {
  padding: 4px;
  width: 100%;
  margin: 4px 0;
}

.notification-icon {
  font-size: 22px;
  position: relative;
}

.notification-icon-length {
  position: absolute;
  top: -2px;
  right: 5px;
  background-color: #ff7d21;
  color: white;
  font-size: 11px;
  border: 1px solid;
  border-radius: 50%;
  padding: 0px 5px;
  font-weight: 700;
}

.notification-item {
  border-radius: 4px;
  padding: 8px;
  margin: 1px 0;
}
.notification-item:hover {
  cursor: pointer;
}

.notification-item-new {
  background-color: #e6e7e7;
}

.header-wrapper-notifications {
  right: 0;
  left: unset;
  padding: 4px;
}

::-webkit-datetime-edit {
  font-size: 18px;
  text-transform: uppercase;
}

::-webkit-datetime-edit-text {
  padding: 0 0.3em;
}

::-webkit-inner-spin-button {
  display: none;
}

::-webkit-calendar-picker-indicator {
  font-size: 18px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px; /* Chiều rộng vừa phải */
  height: 20px; /* Chiều cao tương đương kích thước chữ */
  vertical-align: middle; /* Căn giữa switch với văn bản */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px; /* Đảm bảo switch bo tròn */
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px; /* Kích thước nút tương đương với chiều cao switch */
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff;
}

input:checked + .slider:before {
  transform: translateX(20px); /* Điều chỉnh khoảng cách di chuyển */
}

input[name=autoChangeIP] {
  width: 80px;
  vertical-align: middle; /* Căn giữa input với dòng chữ */
}

input[name=autoChangeIP]:disabled {
  background-color: #f0f0f0;
}

/* Thông báo nhỏ ở dưới input */
.validation-message {
  color: red;
  font-size: 0.9rem;
  display: none; /* Ẩn mặc định */
}

@media (min-width: 1024px) {
  .pc-hidden {
    display: none;
  }
}
@media (min-width: 740px) {
  .pctl-hidden {
    display: none;
  }
}
@media (max-width: 1023px) {
  .server {
    padding: 12px 0;
    margin-bottom: 12px;
  }
  .table th {
    flex-basis: 47%;
    max-width: 47%;
  }
  .table td {
    flex-basis: 53%;
    max-width: 53%;
  }
  .tlmb-hidden {
    display: none;
  }
  .tlmb-full-w {
    width: 100%;
  }
  .ad-card-list-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .ad-card-list-items {
    margin: 4px;
  }
  .ad-card-list-heading {
    font-weight: 700;
  }
  .ad-allproxies-card {
    margin: 24px 0;
    box-shadow: 0 0 10px #525252;
  }
  .ad-allproxies-card-body {
    border-top: 1px solid rgb(199, 199, 199);
    border-bottom: 1px solid rgb(199, 199, 199);
  }
  .ad-allproxies-card-head {
    justify-content: space-between;
  }
  .ad-allproxies-card-footer {
    display: flex;
    justify-content: space-around;
  }
  .ad-allproxies-card-footer-btn {
    flex: 1 1 50%;
    max-width: 49%;
  }
  .ad-allproxies-country-end-icon {
    height: 20px;
  }
  .ad-allproxies-card-id {
    padding: 10px 20px;
  }
  .ad-allproxies-card-server {
    text-align: end;
    padding: 10px 20px;
  }
  .ad-billing-prices-list-group-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .ad-billing-prices-list-input {
    flex: 1 1;
    margin-left: 5px;
  }
}
@media (max-width: 1023px) and (min-width: 740px) {
  .form-check-label {
    margin-right: unset;
  }
  .col-m-4 {
    flex: 1 1 33.3333%;
    max-width: 33.3333%;
  }
  .col-m-6 {
    flex: 1 1 50%;
    max-width: 50%;
  }
  .col-m-12 {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .allemail-resent-at {
    font-weight: 500;
  }
}
@media (max-width: 739px) {
  .col-s-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .mb-full-w {
    width: 100%;
  }
  .server {
    margin: 12px 0;
  }
  .content {
    min-height: unset;
  }
  .select-proxy-block > .form-check > .form-check-label {
    margin-bottom: 24px;
    flex-basis: 20%;
    text-align: start;
    margin-right: unset;
  }
  .country-title-block {
    margin: unset;
    padding: 5px;
  }
  .country-proxy-block {
    padding: 5px;
  }
  .country-proxy-block > .form-check > .form-check-input {
    margin-bottom: unset;
    min-width: 36px;
  }
  .card {
    margin-bottom: 12px;
    border: solid 1px #17a2b8;
  }
  .card_head {
    display: flex;
    justify-content: space-between;
  }
  .card-id {
    margin-left: 5px;
  }
  .card-country {
    text-align: end;
    margin-right: 5px;
  }
  .country-end-icon {
    height: 20px;
  }
  .card-text {
    text-align: start;
  }
  .btn-ip {
    width: 100%;
    text-align: start;
    padding: unset;
  }
  .card__footer {
    display: flex;
    justify-content: space-between;
  }
  .card-main-behavior {
    text-align: center;
  }
  .mobile-hidden {
    display: none;
  }
  .renew-table-responsive-sm {
    padding: 5px;
  }
  .renew-text-heading {
    margin-left: 16px;
  }
  .recent-recharge-card-title {
    margin-top: 12px;
  }
  .recent-recharge-card {
    width: 100%;
    margin-top: 24px;
  }
  .recent-recharge-card-item {
    font-weight: 700;
    padding-left: 5px;
  }
  .recent-recharge-card-body {
    padding: 0.75rem;
    background-color: #91c39d;
    font-weight: 700;
    text-align: center;
  }
  .recent-recharge-card-footer {
    padding: 0.5rem;
  }
  .recent-recharge-card-list {
    display: flex;
    flex-wrap: wrap;
  }
  .recent-recharge-card-button {
    width: 100%;
  }
  .service-mb {
    border-radius: 2px;
    margin-bottom: 12px;
    box-shadow: 0 0 5px #837f7f;
    background-color: #d4edda;
  }
  .service-mb-col {
    font-weight: 400;
    font-size: 18px;
    border: 1px solid #ababab;
    color: #0c641f;
    padding: 4px;
  }
  .generator-card-text-item {
    margin: 4px;
    font-weight: 400;
  }
  .mb-detail-nav-pills {
    flex-direction: row;
  }
  .nav-link {
    text-align: left;
  }
}
@media (max-width: 575.98px) {
  .create-box-config .table-responsive-sm {
    margin: 0;
  }
}
@media (max-width: 490px) {
  .select-proxy-block > .form-check > .form-check-label {
    flex-basis: 50%;
  }
  .table th {
    flex-basis: 47%;
    max-width: 47%;
  }
  .table td {
    flex-basis: 53%;
    max-width: 53%;
  }
}
@media (max-width: 350px) {
  .country-proxy-block > .form-check {
    margin: 10px 1px;
  }
}
.spinner-rotate {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=app.css.map */