@charset "UTF-8";
.ad-providers {
  border-radius: 4px;
  box-shadow: 0 0 4px #678ba7;
  background-color: #fffdfd;
}

.ad-data-form-locations-text {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #adadad;
  border-radius: 6px;
  padding: 6px;
  margin: 4px 0;
}

a.detail-cus-nav-link {
  color: #333;
  border: 1px solid #c3c3c3;
  margin: 2px 0;
}
a.detail-cus-nav-link:hover {
  background-color: #007bff;
  color: #fff;
}

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

.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-gray {
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px #787878;
}
.table-gray thead {
  background-color: #e9e9e9;
  color: #333;
}
.table-gray 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;
}

.text-number {
  color: #0527cd !important;
}

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

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

.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;
}

.text-expiring {
  color: #ff8d00 !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;
}

.text-gold {
  color: #f7bf66;
}

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

.copy {
  cursor: pointer;
}

.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;
}
.modal-loading .icon {
  border: 12px solid lightgray;
  width: 60px;
  height: 60px;
  border-top: 12px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 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;
}

@media (min-width: 992px) {
  .col-lg-12-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.wrapper-btn-list-price-vps {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  height: 600px;
  overflow-y: auto;
}

.nav-link.btn-show-list-price-vps {
  width: 100%;
  border: 1px solid #d7d7d7;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.nav-link.btn-show-list-price-vps:hover {
  background: #95a6b9;
  outline: unset;
}
.nav-link.btn-show-list-price-vps.active {
  background: #95a6b9;
  outline: unset;
}
.nav-link.btn-show-list-price-vps:focus-visible {
  outline: unset;
}
.nav-link.btn-show-list-price-vps i {
  font-size: 32px;
  width: 40px;
}
.nav-link.btn-show-list-price-vps .wrapper-description-btn-list-price-vps {
  width: 100%;
  text-align: start;
  margin-left: 6px;
}

.wrapper-description-list-price-vps {
  color: #0f3754;
}

.s-wrapper-price-vps {
  border-radius: 4px;
  box-shadow: 0 4px 32px 0 rgba(10, 14, 29, 0.0196078431), 0 8px 64px 0 rgba(10, 14, 29, 0.0784313725);
  margin: 4px 0;
}

.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 div.create-proxy-link {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  color: #333;
  margin: 0;
}
.box-create-proxy div.create-proxy-link .wrapper-create-price {
  text-align: end;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.box-create-proxy .wrapper-create-img {
  height: 100%;
  display: flex;
  align-items: center;
}
.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;
  border: 1px solid;
}
.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;
  }
}
.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;
}
.affiliates .bg-affiliates-payment {
  background-color: #f9f9f9;
}

.wrapper-create-vps {
  border-radius: 6px;
  box-shadow: 0 0px 4px #2b67a5;
  border: 1px solid #7285e1;
  padding: 0;
}
.wrapper-create-vps .border-bottom-vps {
  border-bottom: 2px solid #3e7ec1;
}
.wrapper-create-vps .img-flag-country {
  height: 20px;
  border-radius: 3px;
}
.wrapper-create-vps .data-center {
  border: 2px solid #688dd7;
  border-radius: 6px;
  margin: 4px;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  min-width: 180px;
}
.wrapper-create-vps .data-center.inactive {
  cursor: default;
  border-color: #b5b5b5;
  color: #b5b5b5;
}
.wrapper-create-vps .data-center.checked {
  box-shadow: 0 0 8px #436de1;
  border-color: #436de1;
  color: #436de1;
}
.wrapper-create-vps .data-center .input-data-center {
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.wrapper-create-vps .data-center .input-data-center.inactive {
  cursor: default;
}
.wrapper-create-vps .data-center img {
  height: 20px;
  border-radius: 3px;
}
.wrapper-create-vps .data-center .out-of-stock {
  position: absolute;
  top: -12px;
  right: -6px;
  border-radius: 4px;
  background-color: #a7a7a7;
  font-size: 12px;
  color: white;
  padding: 2px;
}
.wrapper-create-vps .wrapper-show-products {
  max-height: 300px;
  overflow-y: auto;
}
.wrapper-create-vps .wrapper-show-products .product {
  border-radius: 6px;
  border: 1px solid gray;
  padding: 8px;
  width: 100%;
  margin: 6px 0;
  cursor: default;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.wrapper-create-vps .wrapper-show-products .product.active {
  cursor: pointer;
}
.wrapper-create-vps .wrapper-show-products .product.checked {
  box-shadow: 0 0 8px #436de1;
  border-color: #436de1;
  color: #436de1;
}
.wrapper-create-vps .wrapper-show-products .product .input-product {
  width: 24px;
  height: 24px;
}
.wrapper-create-vps .wrapper-show-products .product .input-product.active {
  cursor: pointer;
}
.wrapper-create-vps .wrapper-show-products .product .out-of-stock {
  border-radius: 4px;
  background-color: #a7a7a7;
  font-size: 12px;
  color: white;
  padding: 2px;
}

header {
  min-height: 130px;
}
@media screen and (min-width: 600px) {
  header body#newSite {
    margin-top: -7px !important;
  }
}
@media screen and (max-width: 600px) {
  header #header20 .s-hide {
    display: none;
  }
  header #header20 .m-show {
    display: none;
  }
  header #header20 .l-show {
    display: none;
  }
  header #header20 .s-show {
    display: block;
  }
  header #header20 .col-s-center {
    /*margin: 0 auto !important;*/
    margin-left: auto !important;
    margin-right: auto !important;
    float: none;
  }
}

#header20 {
  z-index: 999;
}

#header20 .pointer {
  cursor: pointer;
}

.side-hover {
  padding-top: 25px;
}

#header20 * {
  line-height: 27px;
  text-align: left;
}

#header20 .link20 {
  font-weight: 600;
  color: #0050D7;
  text-decoration: none;
}

#header20 .link20:hover {
  color: #0056b3;
}

#header20 .baseline {
  color: #555555;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  display: block;
  cursor: pointer;
}

#header20 .menu20Content a {
  position: relative;
  z-index: 9;
}

#header20 .westSide .baseline {
  margin-left: 0.5em;
}

#header20 .newButton20 {
  margin: 1em auto;
  background: #0050D7;
  color: #fff;
  text-decoration: none;
  box-shadow: 0px 4px 6px rgba(0, 14, 156, 0);
  border-radius: 6px;
  display: inline-block;
  padding: 0.3em 1em;
  box-sizing: border-box;
}

#header20 .newButton20:hover {
  border-color: #000E9C;
  background-color: #000E9C;
  color: #fff !important;
  text-decoration: none;
}

#header20 .newButton20:active {
  border-color: #00185E;
  background-color: #00185E;
  color: #fff !important;
  text-decoration: none;
}

#header20 .white {
  color: #fff !important;
}

#header20 .col-s-1 {
  width: calc(8.3333333333% - 16px - 0px);
}

#header20 .col-s-1:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-1.noMargin {
  width: calc(8.3333333333% - 0px);
}

#header20 .col-s-1.noMargin-s {
  width: calc(8.3333333333% - 0px);
}

#header20 .col-s-1.border {
  width: calc(8.3333333333% - 1px - 0px);
}

#header20 .col-s-1.borderWithMargin {
  width: calc(8.3333333333% - 16px - 2px - 0px);
}

#header20 .col-s-2 {
  width: calc(16.6666666667% - 16px - 0px);
}

#header20 .col-s-2:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-2.noMargin {
  width: calc(16.6666666667% - 0px);
}

#header20 .col-s-2.noMargin-s {
  width: calc(16.6666666667% - 0px);
}

#header20 .col-s-2.border {
  width: calc(16.6666666667% - 1px - 0px);
}

#header20 .col-s-2.borderWithMargin {
  width: calc(16.6666666667% - 16px - 2px - 0px);
}

#header20 .col-s-3 {
  width: calc(25% - 16px - 0px);
}

#header20 .col-s-3:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-3.noMargin {
  width: calc(25% - 0px);
}

#header20 .col-s-3.noMargin-s {
  width: calc(25% - 0px);
}

#header20 .col-s-3.border {
  width: calc(25% - 1px - 0px);
}

#header20 .col-s-3.borderWithMargin {
  width: calc(25% - 16px - 2px - 0px);
}

#header20 .col-s-4 {
  width: calc(33.3333333333% - 16px - 0px);
}

#header20 .col-s-4:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-4.noMargin {
  width: calc(33.3333333333% - 0px);
}

#header20 .col-s-4.noMargin-s {
  width: calc(33.3333333333% - 0px);
}

#header20 .col-s-4.border {
  width: calc(33.3333333333% - 1px - 0px);
}

#header20 .col-s-4.borderWithMargin {
  width: calc(33.3333333333% - 16px - 2px - 0px);
}

#header20 .col-s-5 {
  width: calc(41.6666666667% - 16px - 0px);
}

#header20 .col-s-5:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-5.noMargin {
  width: calc(41.6666666667% - 0px);
}

#header20 .col-s-5.noMargin-s {
  width: calc(41.6666666667% - 0px);
}

#header20 .col-s-5.border {
  width: calc(41.6666666667% - 1px - 0px);
}

#header20 .col-s-5.borderWithMargin {
  width: calc(41.6666666667% - 16px - 2px - 0px);
}

#header20 .col-s-6 {
  width: calc(50% - 16px - 0px);
}

#header20 .col-s-6:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-6.noMargin {
  width: calc(50% - 0px);
}

#header20 .col-s-6.noMargin-s {
  width: calc(50% - 0px);
}

#header20 .col-s-6.border {
  width: calc(50% - 1px - 0px);
}

#header20 .col-s-6.borderWithMargin {
  width: calc(50% - 16px - 2px - 0px);
}

#header20 .col-s-7 {
  width: calc(58.3333333333% - 16px - 0px);
}

#header20 .col-s-7:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-7.noMargin {
  width: calc(58.3333333333% - 0px);
}

#header20 .col-s-7.noMargin-s {
  width: calc(58.3333333333% - 0px);
}

#header20 .col-s-7.border {
  width: calc(58.3333333333% - 1px - 0px);
}

#header20 .col-s-7.borderWithMargin {
  width: calc(58.3333333333% - 16px - 2px - 0px);
}

#header20 .col-s-8 {
  width: calc(66.6666666667% - 16px - 0px);
}

#header20 .col-s-8:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-8.noMargin {
  width: calc(66.6666666667% - 0px);
}

#header20 .col-s-8.noMargin-s {
  width: calc(66.6666666667% - 0px);
}

#header20 .col-s-8.border {
  width: calc(66.6666666667% - 1px - 0px);
}

#header20 .col-s-8.borderWithMargin {
  width: calc(66.6666666667% - 16px - 2px - 0px);
}

#header20 .col-s-9 {
  width: calc(75% - 16px - 0px);
}

#header20 .col-s-9:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-9.noMargin {
  width: calc(75% - 0px);
}

#header20 .col-s-9.noMargin-s {
  width: calc(75% - 0px);
}

#header20 .col-s-9.border {
  width: calc(75% - 1px - 0px);
}

#header20 .col-s-9.borderWithMargin {
  width: calc(75% - 16px - 2px - 0px);
}

#header20 .col-s-10 {
  width: calc(83.3333333333% - 16px - 0px);
}

#header20 .col-s-10:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-10.noMargin {
  width: calc(83.3333333333% - 0px);
}

#header20 .col-s-10.noMargin-s {
  width: calc(83.3333333333% - 0px);
}

#header20 .col-s-10.border {
  width: calc(83.3333333333% - 1px - 0px);
}

#header20 .col-s-10.borderWithMargin {
  width: calc(83.3333333333% - 16px - 2px - 0px);
}

#header20 .col-s-11 {
  width: calc(91.6666666667% - 16px - 0px);
}

#header20 .col-s-11:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-11.noMargin {
  width: calc(91.6666666667% - 0px);
}

#header20 .col-s-11.noMargin-s {
  width: calc(91.6666666667% - 0px);
}

#header20 .col-s-11.border {
  width: calc(91.6666666667% - 1px - 0px);
}

#header20 .col-s-11.borderWithMargin {
  width: calc(91.6666666667% - 16px - 2px - 0px);
}

#header20 .col-s-12 {
  width: calc(100% - 16px - 0px);
}

#header20 .col-s-12:not(.noMargin) {
  margin: 0 8px;
}

#header20 .col-s-12.noMargin {
  width: calc(100% - 0px);
}

#header20 .col-s-12.noMargin-s {
  width: calc(100% - 0px);
}

#header20 .col-s-12.border {
  width: calc(100% - 1px - 0px);
}

#header20 .col-s-12.borderWithMargin {
  width: calc(100% - 16px - 2px - 0px);
}

#header20 ul li {
  margin-left: 0px;
}

.bg-muted {
  background-color: #f8faff;
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
}

@media screen and (max-width: 991px) { /*1159*/
  .menu20 .menu20Content .title {
    box-sizing: border-box;
  }
  .menu20 .menu20Content .title a {
    padding-left: 0.5em !important;
  }
  .mega-menu {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  #header20 .col-m-1 {
    width: calc(8.3333333333% - 16px - 0px);
  }
  #header20 .col-m-1:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-1.noMargin {
    width: calc(8.3333333333% - 0px);
  }
  #header20 .col-m-1.noMargin-s {
    width: calc(8.3333333333% - 0px);
  }
  #header20 .col-m-1.border {
    width: calc(8.3333333333% - 1px - 0px);
  }
  #header20 .col-m-1.borderWithMargin {
    width: calc(8.3333333333% - 16px - 2px - 0px);
  }
  #header20 .col-m-2 {
    width: calc(16.6666666667% - 16px - 0px);
  }
  #header20 .col-m-2:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-2.noMargin {
    width: calc(16.6666666667% - 0px);
  }
  #header20 .col-m-2.noMargin-s {
    width: calc(16.6666666667% - 0px);
  }
  #header20 .col-m-2.border {
    width: calc(16.6666666667% - 1px - 0px);
  }
  #header20 .col-m-2.borderWithMargin {
    width: calc(16.6666666667% - 16px - 2px - 0px);
  }
  #header20 .col-m-3 {
    width: calc(25% - 16px - 0px);
  }
  #header20 .col-m-3:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-3.noMargin {
    width: calc(25% - 0px);
  }
  #header20 .col-m-3.noMargin-s {
    width: calc(25% - 0px);
  }
  #header20 .col-m-3.border {
    width: calc(25% - 1px - 0px);
  }
  #header20 .col-m-3.borderWithMargin {
    width: calc(25% - 16px - 2px - 0px);
  }
  #header20 .col-m-4 {
    width: calc(33.3333333333% - 16px - 0px);
  }
  #header20 .col-m-4:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-4.noMargin {
    width: calc(33.3333333333% - 0px);
  }
  #header20 .col-m-4.noMargin-s {
    width: calc(33.3333333333% - 0px);
  }
  #header20 .col-m-4.border {
    width: calc(33.3333333333% - 1px - 0px);
  }
  #header20 .col-m-4.borderWithMargin {
    width: calc(33.3333333333% - 16px - 2px - 0px);
  }
  #header20 .col-m-5 {
    width: calc(41.6666666667% - 16px - 0px);
  }
  #header20 .col-m-5:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-5.noMargin {
    width: calc(41.6666666667% - 0px);
  }
  #header20 .col-m-5.noMargin-s {
    width: calc(41.6666666667% - 0px);
  }
  #header20 .col-m-5.border {
    width: calc(41.6666666667% - 1px - 0px);
  }
  #header20 .col-m-5.borderWithMargin {
    width: calc(41.6666666667% - 16px - 2px - 0px);
  }
  #header20 .col-m-6 {
    width: calc(50% - 16px - 0px);
  }
  #header20 .col-m-6:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-6.noMargin {
    width: calc(50% - 0px);
  }
  #header20 .col-m-6.noMargin-s {
    width: calc(50% - 0px);
  }
  #header20 .col-m-6.border {
    width: calc(50% - 1px - 0px);
  }
  #header20 .col-m-6.borderWithMargin {
    width: calc(50% - 16px - 2px - 0px);
  }
  #header20 .col-m-7 {
    width: calc(58.3333333333% - 16px - 0px);
  }
  #header20 .col-m-7:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-7.noMargin {
    width: calc(58.3333333333% - 0px);
  }
  #header20 .col-m-7.noMargin-s {
    width: calc(58.3333333333% - 0px);
  }
  #header20 .col-m-7.border {
    width: calc(58.3333333333% - 1px - 0px);
  }
  #header20 .col-m-7.borderWithMargin {
    width: calc(58.3333333333% - 16px - 2px - 0px);
  }
  #header20 .col-m-8 {
    width: calc(66.6666666667% - 16px - 0px);
  }
  #header20 .col-m-8:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-8.noMargin {
    width: calc(66.6666666667% - 0px);
  }
  #header20 .col-m-8.noMargin-s {
    width: calc(66.6666666667% - 0px);
  }
  #header20 .col-m-8.border {
    width: calc(66.6666666667% - 1px - 0px);
  }
  #header20 .col-m-8.borderWithMargin {
    width: calc(66.6666666667% - 16px - 2px - 0px);
  }
  #header20 .col-m-9 {
    width: calc(75% - 16px - 0px);
  }
  #header20 .col-m-9:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-9.noMargin {
    width: calc(75% - 0px);
  }
  #header20 .col-m-9.noMargin-s {
    width: calc(75% - 0px);
  }
  #header20 .col-m-9.border {
    width: calc(75% - 1px - 0px);
  }
  #header20 .col-m-9.borderWithMargin {
    width: calc(75% - 16px - 2px - 0px);
  }
  #header20 .col-m-10 {
    width: calc(83.3333333333% - 16px - 0px);
  }
  #header20 .col-m-10:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-10.noMargin {
    width: calc(83.3333333333% - 0px);
  }
  #header20 .col-m-10.noMargin-s {
    width: calc(83.3333333333% - 0px);
  }
  #header20 .col-m-10.border {
    width: calc(83.3333333333% - 1px - 0px);
  }
  #header20 .col-m-10.borderWithMargin {
    width: calc(83.3333333333% - 16px - 2px - 0px);
  }
  #header20 .col-m-11 {
    width: calc(91.6666666667% - 16px - 0px);
  }
  #header20 .col-m-11:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-11.noMargin {
    width: calc(91.6666666667% - 0px);
  }
  #header20 .col-m-11.noMargin-s {
    width: calc(91.6666666667% - 0px);
  }
  #header20 .col-m-11.border {
    width: calc(91.6666666667% - 1px - 0px);
  }
  #header20 .col-m-11.borderWithMargin {
    width: calc(91.6666666667% - 16px - 2px - 0px);
  }
  #header20 .col-m-12 {
    width: calc(100% - 16px - 0px);
  }
  #header20 .col-m-12:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-m-12.noMargin {
    width: calc(100% - 0px);
  }
  #header20 .col-m-12.noMargin-s {
    width: calc(100% - 0px);
  }
  #header20 .col-m-12.border {
    width: calc(100% - 1px - 0px);
  }
  #header20 .col-m-12.borderWithMargin {
    width: calc(100% - 16px - 2px - 0px);
  }
}
@media only screen and (min-width: 992px) { /*1159*/
  #header20 .col-l-1 {
    width: calc(8.3333333333% - 16px - 0px);
  }
  #header20 .col-l-1:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-1.noMargin {
    width: calc(8.3333333333% - 0px);
  }
  #header20 .col-l-1.noMargin-s {
    width: calc(8.3333333333% - 0px);
  }
  #header20 .col-l-1.border {
    width: calc(8.3333333333% - 1px - 0px);
  }
  #header20 .col-l-1.borderWithMargin {
    width: calc(8.3333333333% - 16px - 2px - 0px);
  }
  #header20 .col-l-2 {
    width: calc(16.6666666667% - 16px - 0px);
  }
  #header20 .col-l-2:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-2.noMargin {
    width: calc(16.6666666667% - 0px);
  }
  #header20 .col-l-2.noMargin-s {
    width: calc(16.6666666667% - 0px);
  }
  #header20 .col-l-2.border {
    width: calc(16.6666666667% - 1px - 0px);
  }
  #header20 .col-l-2.borderWithMargin {
    width: calc(16.6666666667% - 16px - 2px - 0px);
  }
  #header20 .col-l-3 {
    width: calc(25% - 16px - 0px);
  }
  #header20 .col-l-3:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-3.noMargin {
    /*width: calc(3/12 * 100% - 0 * 1px);*/
    width: 250px;
  }
  #header20 .col-l-3.noMargin-s {
    width: calc(25% - 0px);
  }
  #header20 .col-l-3.border {
    width: calc(25% - 1px - 0px);
  }
  #header20 .col-l-3.borderWithMargin {
    width: calc(25% - 16px - 2px - 0px);
  }
  #header20 .col-l-4 {
    width: calc(33.3333333333% - 16px - 0px);
  }
  #header20 .col-l-4:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-4.noMargin {
    width: calc(33.3333333333% - 0px);
  }
  #header20 .col-l-4.noMargin-s {
    width: calc(33.3333333333% - 0px);
  }
  #header20 .col-l-4.border {
    width: calc(33.3333333333% - 1px - 0px);
  }
  #header20 .col-l-4.borderWithMargin {
    width: calc(33.3333333333% - 16px - 2px - 0px);
  }
  #header20 .col-l-5 {
    width: calc(41.6666666667% - 16px - 0px);
  }
  #header20 .col-l-5:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-5.noMargin {
    width: calc(41.6666666667% - 0px);
  }
  #header20 .col-l-5.noMargin-s {
    width: calc(41.6666666667% - 0px);
  }
  #header20 .col-l-5.border {
    width: calc(41.6666666667% - 1px - 0px);
  }
  #header20 .col-l-5.borderWithMargin {
    width: calc(41.6666666667% - 16px - 2px - 0px);
  }
  #header20 .col-l-6 {
    width: calc(50% - 16px - 0px);
  }
  #header20 .col-l-6:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-6.noMargin {
    width: calc(50% - 0px);
  }
  #header20 .col-l-6.noMargin-s {
    width: calc(50% - 0px);
  }
  #header20 .col-l-6.border {
    width: calc(50% - 1px - 0px);
  }
  #header20 .col-l-6.borderWithMargin {
    width: calc(50% - 16px - 2px - 0px);
  }
  #header20 .col-l-7 {
    width: calc(58.3333333333% - 16px - 0px);
  }
  #header20 .col-l-7:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-7.noMargin {
    width: calc(58.3333333333% - 0px);
  }
  #header20 .col-l-7.noMargin-s {
    width: calc(58.3333333333% - 0px);
  }
  #header20 .col-l-7.border {
    width: calc(58.3333333333% - 1px - 0px);
  }
  #header20 .col-l-7.borderWithMargin {
    width: calc(58.3333333333% - 16px - 2px - 0px);
  }
  #header20 .col-l-8 {
    width: calc(66.6666666667% - 16px - 0px);
  }
  #header20 .col-l-8:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-8.noMargin {
    width: calc(66.6666666667% - 0px);
  }
  #header20 .col-l-8.noMargin-s {
    width: calc(66.6666666667% - 0px);
  }
  #header20 .col-l-8.border {
    width: calc(66.6666666667% - 1px - 0px);
  }
  #header20 .col-l-8.borderWithMargin {
    width: calc(66.6666666667% - 16px - 2px - 0px);
  }
  #header20 .col-l-9 {
    width: calc(75% - 16px - 0px);
  }
  #header20 .col-l-9:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-9.noMargin {
    width: calc(75% - 0px);
  }
  #header20 .col-l-9.noMargin-s {
    width: calc(75% - 0px);
  }
  #header20 .col-l-9.border {
    width: calc(75% - 1px - 0px);
  }
  #header20 .col-l-9.borderWithMargin {
    width: calc(75% - 16px - 2px - 0px);
  }
  #header20 .col-l-10 {
    width: calc(83.3333333333% - 16px - 0px);
  }
  #header20 .col-l-10:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-10.noMargin {
    width: calc(83.3333333333% - 0px);
  }
  #header20 .col-l-10.noMargin-s {
    width: calc(83.3333333333% - 0px);
  }
  #header20 .col-l-10.border {
    width: calc(83.3333333333% - 1px - 0px);
  }
  #header20 .col-l-10.borderWithMargin {
    width: calc(83.3333333333% - 16px - 2px - 0px);
  }
  #header20 .col-l-11 {
    width: calc(91.6666666667% - 16px - 0px);
  }
  #header20 .col-l-11:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-11.noMargin {
    width: calc(91.6666666667% - 0px);
  }
  #header20 .col-l-11.noMargin-s {
    width: calc(91.6666666667% - 0px);
  }
  #header20 .col-l-11.border {
    width: calc(91.6666666667% - 1px - 0px);
  }
  #header20 .col-l-11.borderWithMargin {
    width: calc(91.6666666667% - 16px - 2px - 0px);
  }
  #header20 .col-l-12 {
    width: calc(100% - 16px - 0px);
  }
  #header20 .col-l-12:not(.noMargin) {
    margin: 0 8px;
  }
  #header20 .col-l-12.noMargin {
    width: calc(100% - 0px);
  }
  #header20 .col-l-12.noMargin-s {
    width: calc(100% - 0px);
  }
  #header20 .col-l-12.border {
    width: calc(100% - 1px - 0px);
  }
  #header20 .col-l-12.borderWithMargin {
    width: calc(100% - 16px - 2px - 0px);
  }
  #header20 .l-hide {
    display: none;
  }
  #header20 #header20 .offBg .row div.col-s-12.col-m-12.col-l-3 {
    margin-right: 0px !important;
  }
}
#header20 {
  position: absolute;
  top: 0;
  width: 100%;
}

#header20 .clear:before, #header20 .flex:before, #header20 .row:before, #header20 .clear:after, #header20 .flex:after, #header20 .row:after {
  content: "";
  display: table;
}

#header20 .clear:after, #header20 .flex:after, #header20 .row:after {
  clear: both;
}

#header20 .clear, #header20 .flex, #header20 .row {
  zoom: 1;
}

#header20 .txtRight {
  text-align: right;
}

#header20 #direction .item {
  flex-wrap: wrap;
}

#header20 div.wrapper, #header20 div.row {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

#header20 .mobileSupportMenu {
  display: none;
}

#header20 .clear:before, #header20 .flex:before, #header20 .row:before, #header20 .clear:after, #header20 .flex:after, #header20 .row:after {
  content: "";
  display: table;
  width: 0px !important;
}

#header20 .clear:after, #header20 .flex:after, #header20 .row:after {
  clear: both;
}

#header20 .clear, #header20 .flex, #header20 .row {
  zoom: 1;
}

#header20 .col-s-12, #header20 .col-m-12, #header20 .col-l-12, #header20 .col-s-11, #header20 .col-m-11, #header20 .col-l-11, #header20 .col-s-10, #header20 .col-m-10, #header20 .col-l-10, #header20 .col-s-9, #header20 .col-m-9, #header20 .col-l-9, #header20 .col-s-8, #header20 .col-m-8, #header20 .col-l-8, #header20 .col-s-7, #header20 .col-m-7, #header20 .col-l-7, #header20 .col-s-6, #header20 .col-m-6, #header20 .col-l-6, #header20 .col-s-5, #header20 .col-m-5, #header20 .col-l-5, #header20 .col-s-4, #header20 .col-m-4, #header20 .col-l-4, #header20 .col-s-3, #header20 .col-m-3, #header20 .col-l-3, #header20 .col-s-2, #header20 .col-m-2, #header20 .col-l-2, #header20 .col-s-1, #header20 .col-m-1, #header20 .col-l-1 {
  float: left;
  position: relative;
  min-height: 1px;
}

#header20 div.wrapper, #header20 div.row {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

#header20 .full {
  width: 100%;
}

#header20 .half {
  width: 50% !important;
}

#header20 .row.wrapper {
  max-width: 1280px;
  margin: 0 auto;
}

#header20 .fw100 {
  font-weight: 100;
}

#header20 .fw200 {
  font-weight: 200;
}

#header20 .fw400 {
  font-weight: bold;
}

#header20 .fw600 {
  font-weight: 600;
}

#header20 .fw700 {
  font-weight: 700;
}

#header20 .fw900 {
  font-weight: 900;
}

#header20 .row, #header20 .wrapper {
  margin: 0 auto;
  box-sizing: border-box;
}

#header20 #balanceMobile, #header20 #profileContainer {
  display: none;
}

#header20 #balanceMobile *, #header20 #profileContainer * {
  text-align: center;
}

#header20 .support {
  margin-top: -39px;
  margin-left: 500px;
  text-align: right;
  color: #fff;
}

#header20 .support .menuLink {
  color: #fff !important;
}

#header20 .support .headerHelpMenu {
  color: #fff !important;
}

#header20 .support .headerHelpMenu .menuLink {
  color: #0d55d4 !important;
}

#header20 .support * {
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  vertical-align: middle;
}

#header20 .support * .chLangTitl {
  color: #051d62 !important;
}

#header20 #changeLanguage {
  top: 50px !important;
}

#header20 #languageChooser {
  margin-bottom: 3px !important;
}

#header20 #languageChooser + .menu20Content ul li {
  width: 100%;
}

#header20 .noMargin {
  margin: 0px;
}

#header20 .noPadding {
  padding: 0px;
}

#header20 .headerHelpMenu {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  line-height: 2em;
  cursor: default;
}

#header20 .headerHelpMenu * {
  box-sizing: border-box;
}

#header20 .support .form * {
  color: #212529 !important;
  font-weight: normal;
}

.login-box {
  position: absolute;
  left: -100px;
  padding: 10px 10px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 2px;
  width: 300px;
  z-index: 99999;
  display: none;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px;
  color: #0d55d4 !important;
  border-radius: 10px;
}

.login-box .btn {
  width: 100%;
  margin-top: 10px;
  background-color: #1f85ec;
  color: #fff;
}

.login-box .btn:hover {
  background-color: #136edd;
}

#header20 .headerHelpMenu ul {
  color: #0d55d4 !important;
  display: none;
  position: absolute;
  z-index: 9999999;
  background: #FFF;
  border-radius: 10px;
  padding: 0;
  margin: 0 !important;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px;
  /*left: calc(50% - 69px);*/
  left: -37px;
  min-width: 115px;
  top: 30px;
  text-align: center;
}

#header20 .headerHelpMenu:hover ul {
  display: block;
}

#header20 .headerHelpMenu:hover ul:before {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  background: #FFF;
  position: absolute;
  transform: rotate(45deg);
  top: -5px;
  left: calc(50% - 6px);
  box-shadow: rgba(0, 0, 0, 0.1) -3px -3px 2px;
  z-index: -1;
}

#header20 .headerHelpMenu:hover ul li {
  list-style: none;
  margin: 0 !important;
}

#header20 .headerHelpMenu:hover ul li:first-child {
  margin-top: 4px;
  border-radius: 10px 10px 0 0;
}

#header20 .headerHelpMenu:hover ul li:last-child {
  border-radius: 0 0 10px 10px;
}

#header20 .headerHelpMenu:hover ul li:last-childa:after {
  content: "";
  border-bottom: solid #b3b3b3 0px;
}

#header20 .headerHelpMenu:hover ul li:hover {
  background: #c0f1fe;
}

#header20 .headerHelpMenu:hover ul li a {
  color: #0d55d4 !important;
  padding: 4px 8px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

#header20 .headerHelpMenu:hover ul li a:after {
  content: "";
  display: block;
  width: 85%;
  border-bottom: solid #b3b3b3 1px;
  margin-top: 4px;
  position: absolute;
}

#header20 .headerHelpMenu:hover ul {
  text-align: center !important;
}

#header20 .fsrem1 {
  font-size: 1rem !important;
}

@media screen and (min-width: 768px) {
  #header20 .flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  #header20 #direction .item {
    flex-wrap: wrap;
  }
  #header20 .flex-container .item {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: inherit;
  }
  #header20 .flex-container .item.stretch {
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  #header20 .row.flex-container {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  #header20 #changeLanguage * .chLangTitl {
    margin-top: 0px;
  }
}
@media screen and (min-width: 992px) { /*1159*/
  #block-ocmsheaderblock #header20 #ucartzLogo img {
    margin: 7px auto !important;
  }
  #header20 .a6dU7ec,
  #header20 .a6dU7eb,
  #header20 .a6dU7e {
    position: relative;
    text-decoration: none;
  }
  #header20 .a6dU7ec:after,
  #header20 .a6dU7eb:after,
  #header20 .a6dU7e:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scaleX(0);
    transform-origin: 0% 50%;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.8);
    transition: transform 1s;
  }
  #header20 .a6dU7ec:hover:after, #header20 .a6dU7ec.hovered:after,
  #header20 .a6dU7eb:hover:after,
  #header20 .a6dU7eb.hovered:after,
  #header20 .a6dU7e:hover:after,
  #header20 .a6dU7e.hovered:after {
    transform: translateX(-50%) scaleX(1);
  }
  #header20 .a6dU7ec:after {
    background-color: #000E9C;
    height: 1px;
  }
  #header20 .a6dU7eb:after {
    background-color: #000E9C;
    height: 3px;
  }
  #header20 .menu20 {
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 7px 0;
    background: #fff;
  }
  #header20 .menu20 .contentTitle {
    line-height: 62px;
    font-size: 1.3em;
  }
  #header20 .menu20 .eastSide {
    background-color: #A1A9FF;
    margin: 0 0 0 8px !important;
    float: right;
    padding: 0 1em;
  }
  #header20 .menu20 a:hover {
    color: #000E9C !important;
  }
  #header20 .menu20 ul {
    margin: 0;
    padding: 0;
  }
  #header20 .menu20 ul.l2 .contentTitle {
    margin-top: -30px !important;
  }
  #header20 .menu20 ul li.l1 {
    margin: 0px;
    padding: 0px 7px;
  }
  #header20 .menu20 ul li,
  #header20 .menu20 ul li .menu20Content a {
    color: #343399;
    line-height: 62px;
    float: left;
    list-style: none;
    padding: 0em 1em;
    font-weight: bold;
    font-size: 14px;
  }
  #header20 .menu20 ul li .menu20Content a {
    line-height: 20px;
    padding: 0.5em 0px;
    text-decoration: none;
  }
  #header20 .menu20 ul li .menu20Content a b {
    color: #0050d7 !important;
  }
  #header20 .menu20 ul li .menu20Content a:hover b {
    color: #000E9C !important;
  }
  #header20 .menu20 ul li .menu20Content a span {
    color: #555;
    font-weight: normal;
    text-decoration: none !important;
  }
  #header20 .menu20 ul .menuTitle {
    color: #343399;
    line-height: 62px;
    padding: 0em 1em;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
  }
  #header20 .menu20 ul .menuTitle:hover {
    color: #000E9C !important;
  }
  #header20 .menu20 ul li:hover {
    color: #000E9C;
    cursor: pointer;
  }
  #header20 .menu20 ul li.hover .menu20Content {
    box-shadow: inset rgba(0, 0, 0, 0.1) 0 3px 3px, rgba(0, 0, 0, 0.2) 0px 3px 3px;
    display: block;
    position: absolute;
    background: #fff;
    left: 0px;
    width: 100%;
    border-radius: 0 0 10px 10px;
  }
  #header20 .menu20 .menu20Content {
    display: none;
    cursor: initial;
    overflow: hidden;
    padding: 0;
  }
  #header20 .menu20 .menu20Content .discover {
    line-height: 62px;
    font-size: 1em;
    float: none;
    cursor: pointer;
  }
  #header20 .menu20 .menu20Content .title {
    font-size: 1em;
    line-height: 1em;
    clear: both;
    padding: 1em;
    box-sizing: border-box;
    color: #0050D7;
  }
  #header20 .menu20 .menu20Content .title.noL3 {
    padding: 0px !important;
  }
  #header20 .menu20 .menu20Content .title.noL3 a {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
  }
  #header20 .menu20 .menu20Content .title.noL3 a:hover {
    color: #000E9C !important;
  }
  #header20 .menu20 .menu20Content .title a {
    padding: 0px;
  }
  #header20 .menu20 .menu20Content .title:hover, #header20 .menu20 .menu20Content .title.hovered {
    color: #000E9C;
    background: #A1A9FF;
  }
  #header20 .menu20 .menu20Content .title:hover:after, #header20 .menu20 .menu20Content .title.hovered:after {
    content: "";
    float: right;
    font-size: 1.6em;
    font-weight: 900;
    margin-right: 0.1em;
    background: url("../img/header/chevron.svg") center center no-repeat;
    height: 18px;
    width: 18px;
    transform: rotate(-90deg);
    position: relative;
    animation: animateleft 0.2s;
  }
  @keyframes animateleft {
    from {
      left: -300px;
      opacity: 0;
    }
    to {
      left: 0;
      opacity: 1;
    }
  }
  #header20 .menu20 .menu20Content .title:hover.noL3:after, #header20 .menu20 .menu20Content .title.hovered.noL3:after {
    background: none;
    float: none;
    display: block;
  }
  #header20 .menu20 .menu20Content .l3Title {
    margin: 1em 0 0 8px;
    width: 100%;
  }
  #header20 .menu20 .menu20Content .l3 {
    max-height: 450px; /* Điều chỉnh chiều cao tối đa */
    overflow-y: auto; /* Bật thanh cuộn dọc */
    overflow-x: hidden; /* Ẩn thanh cuộn ngang (nếu có) */
    padding-right: 10px; /* Thêm khoảng cách để tránh tràn thanh cuộn */
  }
  #header20 .menu20 .menu20Content .l3 li {
    padding-left: 1em;
    box-sizing: border-box;
  }
  #header20 .menu20 .menu20Content .l3 li a:hover {
    color: #00185E !important;
  }
  #header20 .menu20 .menu20Content hr {
    width: 98%;
    clear: both;
    border-color: #ccc;
    margin: 0;
  }
  #header20 .menu20 .menu20Content .quickAction {
    color: #122844;
    line-height: 62px;
  }
  #header20 .menu20 .menu20Content .offBg2 hr {
    margin-top: 0;
    border-color: #BEF1FF;
  }
  #header20 .menu20 .menu20Content .fakeColumn {
    height: 100vh;
    position: absolute;
    top: 0px;
    z-index: 0;
    /*width: calc((3/12 * 100%) - 5 * 1px + 2px);*/
    width: 250px;
  }
  #header20 .menu20 .menu20Content .fakeColumn.fC2 {
    margin-left: calc(37.5% - 5px);
  }
  #header20 .menu20 .menu20Content .fakeColumn.fC3 {
    margin-left: calc((37.5% - 5px) * 2);
  }
  #header20 .menu20 .menu20Content ul {
    position: relative;
  }
  #header20 .menu20 .menu20Content ul:not(.l3) {
    margin: 2em 0em;
  }
  #header20 .menu20 .menu20Content ul.l2 {
    margin: 0.5em 0 2em 0em;
    padding: 0px;
  }
  #header20 .menu20 .menu20Content ul li:not(.col-s-6) {
    width: 100%;
    float: none;
    padding: 0px;
  }
  #header20 .menu20 .menu20Content ul li:not(.col-s-6) .content {
    display: none;
    position: absolute !important;
    right: 40px;
    top: 0px;
  }
  #header20 .menu20 .menu20Content ul li:not(.col-s-6):hover .content, #header20 .menu20 .menu20Content ul li:not(.col-s-6).hovered .content {
    display: block;
    z-index: 1;
    /*padding-left: 20px;*/
  }
  #header20 .offBg {
    background-color: #343399;
  }
  #header20 .offBg2 {
    background-color: #ddf7ff;
  }
  #header20 .a5efd {
    animation: opac 0.8s;
  }
  @keyframes opac {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  #header20 .a5etf {
    position: relative;
    animation: animatetop 0.4s;
  }
  @keyframes animatetop {
    from {
      top: -300px;
      opacity: 0;
    }
    to {
      top: 0;
      opacity: 1;
    }
  }
  #header20 .a5elt {
    position: relative;
    animation: animateleft 0.4s;
  }
  @keyframes animateleft {
    from {
      left: -300px;
      opacity: 0;
    }
    to {
      left: 0;
      opacity: 1;
    }
  }
  #header20 .oHide {
    overflow: hidden;
  }
  #header20 .leftLightBlueBorder {
    box-shadow: #A1A9FF -3px 0px 0px 0px;
  }
  #header20 .rightLightBlueBorder {
    box-shadow: #A1A9FF 3px 0px 0px 0px;
  }
  #header20 .ham {
    display: none;
  }
  #header20 .v2 .menu20Content .l2 {
    margin-top: 2em !important;
  }
  #header20 .s-hide {
    display: none;
  }
  #header20 .m-show {
    display: none;
  }
  #header20 .l-show {
    display: block;
  }
  #header20 .s-show {
    display: hide;
  }
}
@media screen and (max-width: 991px) { /*1159*/
  main#main {
    margin: 50px 0 0 0 !important;
  }
  #header20 {
    z-index: 999999999;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0;
  }
  #header20 .baseline {
    display: none;
  }
  #header20 .contentTitle, #header20 hr {
    display: none;
  }
  #header20 .westSide .txtRight a {
    display: none;
  }
  #header20 .westSide .l2 a {
    color: #0050D7;
    padding: 0.5em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }
  #header20 .westSide .l2 a:hover {
    color: #122844;
  }
  #header20 .westSide .l2 a span {
    display: none;
  }
  #header20 .eastSide {
    background-color: #ddf7ff;
    margin: 0px !important;
    width: 100% !important;
  }
  #header20 .eastSide .quickAction, #header20 .eastSide hr {
    display: none;
  }
  #header20 .eastSide a {
    color: #0050D7;
    text-decoration: none;
    padding: 0.5em 1.5em;
    font-weight: bold;
  }
  #header20 #balanceMobile {
    display: block !important;
    float: right;
    margin-right: 1em;
  }
  #header20 #profileContainer {
    background: #def8ff;
    padding: 1em;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
  }
  #header20 #profileContainer .card {
    background: #fff;
    box-shadow: 0px 0px 6px rgba(0, 14, 156, 0.1019607843);
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px;
    text-align: center;
  }
  #header20 #profileContainer .card p {
    text-align: left;
  }
  #header20 #profileContainer .card img {
    max-width: 120px;
    margin-top: 1em;
  }
  #header20 #profileContainer .card .link20 {
    padding: 1em;
    display: block;
  }
  #header20 .hamburger {
    display: inline-block;
    margin: 0 8px 16px 0;
    cursor: pointer;
    /* ONE */
  }
  #header20 .hamburger .line {
    width: 25px;
    height: 5px;
    background-color: #ffffff;
    display: block;
    margin: 3px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  #header20 .hamburger:hover {
    cursor: pointer;
  }
  #header20 .hamburger.is-active .line:nth-child(2) {
    opacity: 0;
  }
  #header20 .hamburger.is-active .line:nth-child(1) {
    -webkit-transform: translateY(5px) rotate(45deg);
    -ms-transform: translateY(5px) rotate(45deg);
    -o-transform: translateY(5px) rotate(45deg);
    transform: translateY(5px) rotate(45deg);
  }
  #header20 .hamburger.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-5px) rotate(-45deg);
    -ms-transform: translateY(-5px) rotate(-45deg);
    -o-transform: translateY(-5px) rotate(-45deg);
    transform: translateY(-5px) rotate(-45deg);
  }
  #header20 .support {
    display: none;
  }
  #header20 .offBg {
    background: #2f066e;
    height: 51px;
  }
  #header20 .offBg #ucartzLogo img {
    display: none;
  }
  #header20 .offBg #ucartzLogo:before {
    content: "";
    background: url("https://www.ucartz.com/img/header/chevron.svg") center center no-repeat;
    height: 51px;
    width: 198px;
    display: inline-block;
  }
  @keyframes animatetop {
    from {
      top: -300px;
      opacity: 0;
    }
    to {
      top: 0;
      opacity: 1;
    }
  }
  @keyframes animateleft {
    from {
      left: -300px;
      opacity: 0;
    }
    to {
      left: 0;
      opacity: 1;
    }
  }
  #header20 .menu20 {
    display: none;
    position: relative;
    z-index: 9;
    background: #fff;
  }
  #header20 .menu20 .row {
    margin: 0px;
    padding: 0px;
  }
  #header20 .menu20.is-active {
    display: block;
    animation: animateleft 0.4s;
  }
  #header20 .menu20 .menu20Content {
    display: none;
    position: relative;
    animation: animateleft 0.4s;
  }
  #header20 .menu20 .menu20Content.is-active {
    display: block;
  }
  #header20 .menu20 .menu20Content ul.l3 {
    display: none;
    overflow: hidden;
    padding: 0 0 0 1em;
  }
  #header20 .menu20 .menu20Content ul.l3 .l3Title {
    display: none;
  }
  #header20 .menu20 .menu20Content ul.l3 li {
    position: relative;
    animation: animatetop 0.4s;
  }
  #header20 .menu20 .menu20Content ul.l3 li a {
    color: #0050D7;
    font-weight: bold;
    text-decoration: none;
  }
  #header20 .menu20 .menu20Content ul.l3 li a:hover {
    color: #00185E !important;
  }
  #header20 .menu20 .menu20Content ul.l3 li a span {
    display: none;
  }
  #header20 .menu20 .menu20Content .title, #header20 .menu20 .menu20Content ul.l2 li {
    width: 100%;
  }
  #header20 .menu20 .menu20Content .title, #header20 .menu20 .menu20Content .title a {
    color: #0050D7;
    padding: 0.5em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }
  #header20 .menu20 .menu20Content .title:hover, #header20 .menu20 .menu20Content .title a:hover {
    color: #00185E !important;
  }
  #header20 .menu20 .menu20Content .title:not(.noL3).hidd:before {
    display: none;
  }
  #header20 .menu20 .menu20Content .title a, #header20 .menu20 .menu20Content .title a a {
    padding: 0;
  }
  #header20 .menu20 .menu20Content .title:not(.noL3):before {
    content: "";
    float: right;
    font-size: 1.6em;
    font-weight: 900;
    margin: 0 1em 0.1em 0.5em;
    background: url("https://www.ucartz.com/img/header/chevron.svg") center center no-repeat;
    height: 18px;
    width: 18px;
    position: relative;
    animation: animateleft 0.4s;
  }
  @keyframes animateleft {
    from {
      left: -300px;
      opacity: 0;
    }
    to {
      left: 0;
      opacity: 1;
    }
  }
  #header20 .menu20 .menu20Content .title:not(.noL3).active:before {
    transform: rotate(180deg);
  }
  #header20 .menu20 .menu20Content .title:not(.noL3).nbfr:before {
    background: none;
  }
  #header20 .menu20 .menuTitle {
    cursor: pointer;
    color: #00185E;
    padding: 0.5em 1em;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    border-bottom: solid #bbb 1px;
    box-sizing: border-box;
    text-decoration: none;
  }
  #header20 .menu20 .menuTitle:after {
    content: "";
    float: right;
    font-size: 1.6em;
    font-weight: 900;
    margin: 0.15em 0.1em 0;
    background: url("https://www.ucartz.com/img/header/chevron.svg") center center no-repeat;
    height: 18px;
    width: 18px;
    transform: rotate(-90deg);
    position: relative;
    animation: animateleft 0.4s;
  }
  @keyframes animateleft {
    from {
      left: -300px;
      opacity: 0;
    }
    to {
      left: 0;
      opacity: 1;
    }
  }
  #header20 .menu20 .menuTitle.active {
    color: #00185E;
    font-weight: bolder;
  }
  #header20 .menu20 .menuTitle.active:after {
    float: left;
    transform: rotate(90deg);
    margin-left: -5px;
  }
  #header20 .menu20 ul {
    padding: 0px;
    margin: 0px;
    width: 100%;
  }
  #header20 .menu20 ul li {
    list-style: none;
    width: 100%;
  }
  #header20 .menu20 ul li a {
    box-sizing: border-box;
    font-size: 14px;
  }
  #header20 .mobileSupportMenu {
    display: block;
  }
  #header20 .mobileSupportMenu .menu20 {
    background-color: #000E9C;
  }
  #header20 .mobileSupportMenu .menu20 .menuTitle {
    border-color: #0022b2;
    text-decoration: none;
  }
  #header20 .mobileSupportMenu .menu20 .menuTitle:after {
    background-color: #000E9C;
  }
  #header20 .mobileSupportMenu .menu20 .menu20Content {
    background-color: #000E9C;
    max-height: 500px; /* Điều chỉnh chiều cao tối đa */
    overflow-y: auto; /* Bật thanh cuộn dọc */
    overflow-x: hidden; /* Ẩn thanh cuộn ngang (nếu có) */
    padding: 10px; /* Thêm khoảng cách để tránh tràn thanh cuộn */
  }
  body div#main {
    margin: 50px auto 0 auto !important;
  }
}
div.dialog-off-canvas-main-canvas #header {
  min-height: initial !important;
}

/* header currency selection start */
#header #languageChooser, header #languageChooser, #header20 #languageChooser {
  display: inline-block;
  outline: none;
}

#header a#languageChooser,
#header span#languageChooser, header a#languageChooser,
header span#languageChooser, #header20 a#languageChooser,
#header20 span#languageChooser {
  background-image: url("../img/header/currency.png") !important;
  width: 30px;
  height: 26px;
  margin: -2px 10px 0 5px;
  background-size: 25px;
  border: none;
  background-repeat: no-repeat;
}

/* header currency selection end */
/* header part end here */
.sub-menu-title {
  font-size: 18px;
}

.ucartz-label-btn {
  position: absolute;
  background-color: #343399;
  opacity: 0.9;
  border-radius: 10px;
  margin-top: 1px;
  margin-left: 15px;
  padding: 2px;
  color: #fff;
  background: #343399;
  letter-spacing: 1px;
  font-size: 8px;
  padding: 1px 2px;
  border-radius: 6px;
  color: #fff;
  font-weight: 100;
  line-height: 15px !important;
}

.ucartz-stick-btn {
  position: absolute;
  background-color: #343399;
  border-radius: 10px;
  margin-top: 1px;
  padding: 2px;
  color: #fff;
  background: #343399;
  letter-spacing: 1px;
  font-size: 8px;
  padding: 2px 3px;
  border-radius: 6px;
  color: #fff;
  font-weight: 100;
  line-height: 15px !important;
}

.icon-state {
  text-align: center;
  margin: auto;
}

.des-sub-menu-title {
  margin-top: -5px;
}

.fixed-top-mobile {
  position: fixed;
  top: 52px;
}

.fixed-nav {
  position: fixed;
  top: 0px;
  right: -325px;
}

#balanceMobile {
  position: fixed;
  top: -2px;
  right: 0px;
}

#header20 .header-user-profile-wrapper {
  position: relative;
}
#header20 .header-user-profile-wrapper:hover .header-user-profile-list {
  display: block;
}
#header20 .header-user-profile-wrapper .header-user-profile-list {
  display: none;
  z-index: 999;
  background: #fff;
  border-radius: 6px;
  list-style: none;
  padding: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  box-shadow: 0 4px 32px 0 rgba(10, 15, 30, 0.0196078431), 0 8px 64px 0 rgba(10, 15, 30, 0.1019607843);
  width: max-content;
}
#header20 .header-user-profile-wrapper .item-user-profile {
  color: #343399;
  line-height: 32px;
  padding: 4px 6px;
  border-radius: 6px;
  width: 100%;
  font-weight: bold;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 16px;
}
#header20 .header-user-profile-wrapper .item-user-profile:hover {
  background-color: #343399;
  color: #fff !important;
}
#header20 .header-user-profile-wrapper .item-user-profile i {
  width: 24px;
}

.footer {
  position: relative;
  margin-top: 250px;
  color: #fff;
  font-family: "Times New Roman", sans-serif;
}
.footer .top-footer-wrapper {
  min-height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 22px;
  transform: translateY(-50%);
  background: #0a20ad;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.footer .top-footer-wrapper .text-support {
  font-size: 2rem;
}
.footer .top-footer-wrapper .btn-support {
  border-radius: 5px;
  font-size: 18px;
  padding: 16px;
  color: #354e97;
}
.footer .content-footer-wrapper {
  overflow: hidden;
  padding-top: 150px;
  background: url(/img/footer-bg.jpg);
}
.footer .content-footer-wrapper .content-footer-item-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 40px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.footer .content-footer-wrapper .content-footer-item-wrapper {
  font-size: 1.1rem;
  margin: 1rem 0;
}
.footer .content-footer-wrapper .content-footer-item-wrapper .payments-img-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.footer .content-footer-wrapper .content-footer-item-wrapper .payments-img-wrapper .payments-img {
  border-radius: 4px;
  height: 40px;
}
.footer .content-footer-wrapper .link-services-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  font-size: 14px;
  padding: 16px 0;
}
.footer .content-footer-wrapper .link-services-wrapper .link-services-item {
  padding: 0.5rem 0;
  text-align: center;
}
.footer .bottom-footer-wrapper {
  background-color: #0a0056;
  font-size: 0.9em;
  padding: 10px 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5019607843);
}

.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: 110px;
}
.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;
}

.result-deposit-wrapper {
  display: none;
}
.result-deposit-wrapper.show {
  display: block;
}

.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%);
  }
}
.fw-300 {
  font-weight: 300;
}

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

.custom-font {
  font-family: "Roboto", sans-serif;
}

.configurations-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;
}
.configurations-wrapper .heading-wrapper {
  padding: 8px;
  color: #373e89;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.configurations-wrapper .info-wrapper {
  padding: 12px;
}

.configurations-wrapper .info-wrapper .resource-parameters-wrapper .service-type-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.configurations-wrapper .info-wrapper .resource-parameters-wrapper .service-type-wrapper .service-type-heading {
  text-align: center;
  font-weight: 500;
  padding: 4px 0;
}
.configurations-wrapper .info-wrapper .resource-parameters-wrapper .service-type-wrapper .service-type-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  height: 100%;
}
.configurations-wrapper .info-wrapper .resource-parameters-wrapper .service-type-wrapper .service-type-icon-wrapper .type {
  border: 2px dashed #007bff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #007bff;
}
.configurations-wrapper .info-wrapper .resource-parameters-wrapper .parameters-wrapper .parameters-heading {
  font-weight: 500;
  list-style: none;
}

.configurations-wrapper .info-wrapper .os-wrapper .os-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.configurations-wrapper .info-wrapper .os-wrapper .os-wrapper .os-heading {
  text-align: center;
  font-weight: 500;
  padding: 4px 0;
}
.configurations-wrapper .info-wrapper .os-wrapper .os-wrapper .os-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  height: 100%;
}
.configurations-wrapper .info-wrapper .os-wrapper .os-wrapper .os-icon-wrapper .os-icon {
  border-radius: 50%;
  border: 1px solid #91c4fb;
  width: 100px;
  height: 100px;
}
.configurations-wrapper .info-wrapper .os-wrapper .os-wrapper .os-icon-wrapper .os-text {
  text-align: center;
}
.configurations-wrapper .info-wrapper .os-wrapper .authentication-wrapper .authentication-heading {
  padding: 4px 0;
  font-weight: 500;
  text-align: center;
}

.configurations-wrapper .period-price-wrapper .heading-wrapper {
  padding: 0 8px;
  color: #373e89;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.configurations-wrapper .period-price-wrapper .options-wrapper {
  padding: 12px;
  user-select: none;
}
.configurations-wrapper .period-price-wrapper .options-wrapper .list-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}
.configurations-wrapper .period-price-wrapper .options-wrapper .list-options .option-wrapper {
  border: 2px solid transparent;
  border-radius: 6px;
  background: #f7f7f8;
  cursor: pointer;
}
.configurations-wrapper .period-price-wrapper .options-wrapper .list-options .option-wrapper label {
  cursor: pointer;
}
.configurations-wrapper .period-price-wrapper .options-wrapper .list-options .option-wrapper.checked {
  background: #fff;
  border-color: #4ca717 !important;
  border-width: 2px;
  font-weight: 700;
  transition: all 0.05s ease;
}
.configurations-wrapper .period-price-wrapper .options-wrapper .list-options .option-wrapper .item-wrapper {
  padding: 6px;
}

.payment-wrapper {
  background-image: linear-gradient(to top, #3171a7, #5958c5);
  border-radius: 16px;
  padding: 12px;
  color: #fff;
  margin: 8px 0;
}
.payment-wrapper .payment-heading {
  text-align: center;
  padding: 0 8px 8px 8px;
}
.payment-wrapper .payment-heading .heading-text {
  font-size: 20px;
  font-weight: 700;
}
.payment-wrapper .payment-info .info-wrapper {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.22);
  padding: 2px 8px;
  opacity: 0.8;
}
.payment-wrapper .payment-info .info-wrapper:last-child {
  border-bottom: none;
  opacity: 1;
}
.payment-wrapper .payment-info .payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}
.payment-wrapper .payment-info .totalCost-text {
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
}
.payment-wrapper .payment-info .quantity-input {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-align: center;
  padding: 4px;
  width: 80px;
}
.payment-wrapper .payment-info .quantity-input::-webkit-inner-spin-button,
.payment-wrapper .payment-info .quantity-input ::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.payment-wrapper .payment-info .quantity-input:focus-visible {
  outline: 2px solid #65d1f5;
  color: #0040ff;
}

.account-wrapper {
  border-radius: 16px;
  color: #000;
  margin: 8px 0;
}

.cart .account-wrapper .lr-form {
  position: relative;
  margin-bottom: 0.3rem;
}
.cart .account-wrapper .lr-form-group {
  margin-bottom: 0.3rem;
}
.cart .account-wrapper .lr-form-label {
  font-size: 12px;
  margin-bottom: 0;
}
.cart .account-wrapper input.lr-form-input {
  border-color: #96b0bd;
}
.cart .account-wrapper input.lr-form-input:focus {
  border-color: rgba(255, 115, 0, 0.2509803922);
  box-shadow: 0 0 0 0.2rem rgba(255, 115, 0, 0.2509803922);
}
.cart .account-wrapper .lr-form-input ~ .lr-form-label {
  position: absolute;
  bottom: 8px;
  margin-bottom: 0;
  left: 12px;
}
.cart .account-wrapper button.lr-btn-submit {
  border-radius: 8px;
  color: #ffc899;
  background-image: linear-gradient(to left, #409cd9, #137ec5);
  padding: 6px;
  cursor: pointer;
  border: none !important;
  font-weight: 700;
  border-radius: 12px;
  margin-top: 4px;
  width: 100%;
  font-size: 18px;
}
.cart .account-wrapper button.lr-btn-submit:hover {
  background-image: linear-gradient(to right, #409cd9, #137ec5);
}
.cart .account-wrapper button.lr-btn-submit:focus {
  outline: none !important;
}
.cart .account-wrapper button.lr-btn-submit:focus-visible {
  outline: none !important;
}
.cart .account-wrapper .password-meter {
  height: 8px;
  --color: red;
}
.cart .account-wrapper .password-meter::-webkit-meter-optimum-value {
  background: var(--color);
}
.cart .account-wrapper .btn-send-email-verification-code {
  color: #007bff;
  cursor: pointer;
  border-radius: 4px;
}
.cart .account-wrapper .btn-send-email-verification-code:hover {
  border: 1px solid #007bff;
  color: #007bff;
}
.cart .account-wrapper .user-lr .wrapper-service-list {
  box-shadow: 0 0 4px #da7c2a;
  border-radius: 6px;
  overflow: hidden;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-proxy {
  text-align: start;
  padding: 12px 6px;
  font-size: 20px;
  border-radius: 8px;
  background-color: #ecf9f2;
  color: #14a580;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-proxy:hover {
  background-color: #14a580;
  color: #ecf9f2;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-proxy.active {
  background-color: #14a580;
  color: #ecf9f2;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-proxy:focus {
  box-shadow: none;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-proxy i {
  text-align: center;
  width: 30px;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-vps {
  text-align: start;
  padding: 12px 6px;
  font-size: 20px;
  border-radius: 8px;
  background-color: #ecf1f9;
  color: #3b64a1;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-vps:hover {
  background-color: #3b64a1;
  color: #ecf1f9;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-vps.active {
  background-color: #3b64a1;
  color: #ecf1f9;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-vps:focus {
  box-shadow: none;
}
.cart .account-wrapper .user-lr .wrapper-service-list .lr-btn-list-services-vps i {
  text-align: center;
  width: 30px;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-proxy .lr-btn-service-proxy {
  text-align: start;
  border: 1px solid #e1e1e1;
  background-color: #fcfffc;
  font-weight: 500;
  padding: 0.5rem;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-proxy .lr-btn-service-proxy:hover {
  border-color: #28a745;
  background-color: #e1f5e1;
  box-shadow: 0 0 4px #28a745;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-proxy .lr-btn-service-proxy.active {
  border-color: #28a745;
  background-color: #e1f5e1;
  box-shadow: 0 0 4px #28a745;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-proxy .lr-btn-service-proxy i {
  width: 20px;
  text-align: center;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-available-countries {
  border: 2px solid #46bd80;
  border-radius: 6px;
  padding: 8px 0;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-available-countries.show {
  max-height: 100%;
  overflow-y: unset;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-available-countries img {
  border-radius: 4px;
  height: 100%;
  box-shadow: 0 0 6px #b5b5b5;
  width: 30px;
  margin-right: 2px;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-available-countries .lr-btn-country-proxy {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  text-align: start;
  border: 1px solid #e1e1e1;
  background-color: #fcfffc;
  color: #333;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-vps .lr-btn-service-vps {
  text-align: start;
  border: 1px solid #e1e1e1;
  background-color: #f8faff;
  font-weight: 500;
  padding: 0.5rem;
  display: flex;
  align-items: center;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-vps .lr-btn-service-vps:hover {
  border-color: #72a6df;
  background-color: #e4eef9;
  box-shadow: 0 0 4px #70a5df;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-vps .lr-btn-service-vps.active {
  border-color: hsl(211, 63%, 66%);
  background-color: #e4eef9;
  box-shadow: 0 0 4px #70a5df;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-vps .lr-btn-service-vps img {
  border-radius: 4px;
  height: 100%;
  box-shadow: 0 0 4px #c9c9c9;
  width: 34px;
  margin-right: 6px;
}
.cart .account-wrapper .user-lr .wrapper-service-list .wrapper-service-list-vps .table-service-list .os-product {
  width: max-content;
}
.cart .account-wrapper .s-wrapper-price-vps {
  border-radius: 4px;
  box-shadow: 0 4px 32px 0 rgba(10, 14, 29, 0.0196078431), 0 8px 64px 0 rgba(10, 14, 29, 0.0784313725);
  margin: 4px 0;
}
.cart .account-wrapper .form-lr {
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 32px 0 rgba(10, 15, 30, 0.0196078431), 0 8px 64px 0 rgba(10, 15, 30, 0.1019607843);
}
.cart .account-wrapper .form-set-new-pw {
  background: #fff9ed;
  padding: 12px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 32px 0 rgba(10, 15, 30, 0.0196078431), 0 8px 64px 0 rgba(10, 15, 30, 0.1019607843);
}
.cart .account-wrapper .tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 4px 0;
  border-radius: 6px;
  overflow: hidden;
}
.cart .account-wrapper .tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.cart .account-wrapper .tab-group .tab a {
  display: block;
  text-decoration: none;
  padding: 8px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: max-content;
  min-width: 100%;
  text-align: center;
  cursor: pointer;
  transition: 0.5s ease;
}
.cart .account-wrapper .tab-group .tab a:hover {
  background: rgb(16.7569444444, 111.125, 173.7430555556);
  color: #ffc899;
}
.cart .account-wrapper .tab-group .tab a.heading-reset-password,
.cart .account-wrapper .tab-group .tab a.heading-set-new-password {
  padding: 8px 1px;
  background: rgb(255, 234, 175);
  color: #333;
  font-size: 18px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  cursor: unset !important;
}
.cart .account-wrapper .tab-group .tab a.heading-reset-password:hover,
.cart .account-wrapper .tab-group .tab a.heading-set-new-password:hover {
  background: rgb(255, 234, 175);
  color: #333;
}
.cart .account-wrapper .tab-group .active a {
  background: #137ec5;
  color: #ffc899;
}
.cart .account-wrapper .tab-group h1 {
  text-align: center;
  color: #ffc899;
  font-weight: 300;
  margin: 0 0 40px;
}
.cart .account-wrapper .tab-group label {
  position: absolute;
  transform: translateY(6px);
  left: 13px;
  color: rgba(255, 200, 153, 0.5);
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
.cart .account-wrapper .tab-group label .req {
  margin: 2px;
  color: #137ec5;
}
.cart .account-wrapper .tab-group label.active {
  transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
.cart .account-wrapper .tab-group label.active .req {
  opacity: 0;
}
.cart .account-wrapper .tab-group label.highlight {
  color: #ffc899;
}
.cart .account-wrapper .tab-group input, .cart .account-wrapper .tab-group textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffc899;
  border-radius: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cart .account-wrapper .tab-group input:focus, .cart .account-wrapper .tab-group textarea:focus {
  outline: 0;
  border-color: #137ec5;
}
.cart .account-wrapper .tab-group textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}
.cart .account-wrapper .tab-content-lr > div:last-child {
  display: none;
}
.cart .account-wrapper .field-wrap {
  position: relative;
  margin-bottom: 40px;
}
.cart .account-wrapper .top-row:after {
  content: "";
  display: table;
  clear: both;
}
.cart .account-wrapper .top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.cart .account-wrapper .top-row > div:last-child {
  margin: 0;
}
.cart .account-wrapper .button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #137ec5;
  color: #ffc899;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.cart .account-wrapper .button:hover, .cart .account-wrapper .button:focus {
  background: rgb(16.7569444444, 111.125, 173.7430555556);
}
.cart .account-wrapper .button-block {
  display: block;
  width: 100%;
}
.cart .account-wrapper .forgot {
  margin-top: -20px;
  text-align: right;
}
.cart .account-wrapper .btn-customer-service {
  background: #fff;
  color: #1da1f2;
  font-weight: 700;
}
.cart .account-wrapper .btn-customer-service:hover {
  background: #1da1f2;
  color: #fff;
}

.empty-services-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;
}

.cart .available-countries-wrapper .tab-available-countries-wrapper .list-btn-type-service .btn-type-service.active {
  color: #dc3545;
}

.cart .available-countries-wrapper .tab-available-countries-wrapper .list-btn-type-service .btn-type-service {
  color: #a37474;
}

@media (max-width: 578px) {
  .parameters-wrapper {
    text-align: center;
  }
  .authentication-wrapper {
    text-align: center;
  }
}
.checkout .services-wrapper .checkout-heading {
  padding: 8px 0;
  color: #373e89;
  font-size: 20px;
  font-weight: 700;
}
.checkout .services-wrapper .services-content-wrapper {
  box-shadow: rgba(16, 26, 51, 0.08) 0px 0px 0px 1px, rgba(16, 26, 51, 0.08) 0px 8px 16px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
}
.checkout .services-wrapper .services-content-wrapper .services-heading {
  border: none;
  border-radius: 0;
  width: 100%;
  color: #373e89;
  background-color: #f7f7f8;
  font-weight: 700;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkout .services-wrapper .services-content-wrapper .services-info-wrapper {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}
.checkout .services-wrapper .services-content-wrapper .services-info-wrapper .services-info-item {
  text-align: center;
}
.checkout .services-wrapper .services-content-wrapper .services-footer {
  border: none;
  border-radius: 0;
  width: 100%;
  background-color: #f7f7f8;
  font-weight: 700;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkout .services-wrapper .services-content-wrapper .services-footer .service-billing-status {
  color: #ff7300;
}
.checkout .services-wrapper .services-content-wrapper .services-footer .service-billing-status.success {
  color: #007bff;
}

.checkout-wrapper .checkout-heading {
  padding: 8px 0;
  color: #373e89;
  font-size: 20px;
  font-weight: 700;
}
.checkout-wrapper .checkout-content-wrapper .tab-checkout-wrapper {
  box-shadow: rgba(16, 26, 51, 0.08) 0px 0px 0px 1px, rgba(16, 26, 51, 0.08) 0px 8px 16px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f7f7f8;
}

.checkout-wrapper .list-btn-checkout .btn-checkout {
  border: none;
  border-radius: 0;
  flex: 1 1;
  width: 100%;
  cursor: pointer;
  color: #939393;
  background-color: #fff;
  transition: all 0.1s ease;
}
.checkout-wrapper .list-btn-checkout .btn-checkout:focus,
.checkout-wrapper .list-btn-checkout .btn-checkout :focus-visible {
  border: none;
  outline: none;
}
.checkout-wrapper .list-btn-checkout .btn-checkout.active {
  color: #373e89;
  background-color: #f7f7f8;
  font-weight: 700;
}

.checkout-wrapper .list-checkout {
  padding: 8px;
}
.checkout-wrapper .list-checkout .item-checkout-wrapper {
  padding: 8px;
}
.checkout-wrapper .list-checkout .btn-confirm-checkout {
  width: 100%;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #007bff;
  color: #0c62bd;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.2s ease;
}
.checkout-wrapper .list-checkout .btn-confirm-checkout:focus, .checkout-wrapper .list-checkout .btn-confirm-checkout:focus-visible {
  outline: none;
}
.checkout-wrapper .list-checkout .btn-confirm-checkout:hover {
  background-color: #007bff;
  color: #fff;
  font-weight: 700;
}

.result-checkout-wrapper .success-result-checkout-wrapper {
  display: none;
}
.result-checkout-wrapper .success-result-checkout-wrapper.show {
  display: block;
}
.result-checkout-wrapper .success-result-checkout-wrapper .success-result-checkout-heading {
  padding: 8px 0;
  color: #373e89;
  font-size: 20px;
  font-weight: 700;
}
.result-checkout-wrapper .error-result-checkout-wrapper {
  display: none;
}
.result-checkout-wrapper .error-result-checkout-wrapper.show {
  display: block;
}
.result-checkout-wrapper .error-result-checkout-wrapper .error-result-checkout-heading {
  padding: 8px 0;
  color: #ff5436;
  font-size: 20px;
  font-weight: 700;
}

.stepper-box {
  margin: 0 0 1rem 0;
}

.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
@media (max-width: 768px) {
  .stepper-item {
    font-size: 12px;
  }
}
.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 3px solid #ccc;
  width: 100%;
  top: 30px;
  left: -50%;
  z-index: 2;
}
.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 3px solid #ccc;
  width: 100%;
  top: 30px;
  left: 50%;
  z-index: 2;
}
.stepper-item .step-counter {
  color: #fff;
}
.stepper-item .step-name {
  color: #ccc;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
  font-size: 24px;
}

.stepper-item.completed {
  font-weight: bold;
}
.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 3px solid #4bb543;
  width: 100%;
  top: 30px;
  left: 50%;
  z-index: 3;
}
.stepper-item.completed .step-counter {
  background-color: #4bb543;
  color: #fff;
}
.stepper-item.completed .step-name {
  color: #4bb543;
}

.stepper-item.error {
  font-weight: bold;
}
.stepper-item.error::after {
  position: absolute;
  content: "";
  border-bottom: 3px solid #ccc;
  width: 100%;
  top: 30px;
  left: 50%;
  z-index: 3;
}
.stepper-item.error .step-counter {
  background-color: #dc3545;
  color: #fff;
}
.stepper-item.error .step-name {
  color: #dc3545;
}

.stepper-item.active {
  font-weight: bold;
}
.stepper-item.active::after {
  position: absolute;
  content: "";
  border-bottom: 3px solid #4bb543;
  width: 50%;
  top: 30px;
  left: 50%;
  z-index: 3;
}
.stepper-item.active .step-counter {
  border: 2px solid #4bb543;
  background-color: #fff;
  color: #4bb543;
}
.stepper-item.active .step-name {
  color: #4bb543;
}

.stepper-item.active.error {
  font-weight: bold;
}
.stepper-item.active.error::after {
  position: absolute;
  content: "";
  border-bottom: 3px solid #ccc;
  width: 50%;
  top: 30px;
  left: 50%;
  z-index: 3;
}
.stepper-item.active.error .step-counter {
  border: 2px dashed #dc3545;
  background-color: #fff;
  color: #dc3545;
}
.stepper-item.active.error .step-name {
  color: #dc3545;
}

.stepper-item:first-child::before {
  content: none;
}

.stepper-item:last-child::after {
  content: none;
}

.about-brand-wrapper {
  padding: 1rem 0;
}
.about-brand-wrapper .about-brand-heading {
  color: #5d5d5d;
  font-weight: 700;
  font-size: 24px;
  font-family: "Times New Roman", Sans-serif;
}
.about-brand-wrapper .img-about-brand-wrapper .img-about-brand {
  width: 100%;
  border-radius: 12px;
}
.about-brand-wrapper .content-about-brand-wrapper {
  color: #333333;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-family: "Times New Roman", Sans-serif;
}

.available-countries-wrapper {
  padding: 1rem 0;
}
.available-countries-wrapper .tab-available-countries-wrapper {
  box-shadow: rgba(16, 26, 51, 0.08) 0px 0px 0px 1px, rgba(16, 26, 51, 0.08) 0px 8px 16px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f7f7f8;
}
.available-countries-wrapper .tab-available-countries-wrapper .list-btn-type-service .btn-type-service {
  border: none;
  border-radius: 0;
  flex: 1 1;
  width: 100%;
  cursor: pointer;
  color: #939393;
  background-color: #fff;
  transition: all 0.1s ease;
}
.available-countries-wrapper .tab-available-countries-wrapper .list-btn-type-service .btn-type-service:focus,
.available-countries-wrapper .tab-available-countries-wrapper .list-btn-type-service .btn-type-service :focus-visible {
  border: none;
  outline: none;
}
.available-countries-wrapper .tab-available-countries-wrapper .list-btn-type-service .btn-type-service.active {
  color: #373e89;
  background-color: #f7f7f8;
  font-weight: 700;
}
.available-countries-wrapper .tab-available-countries-wrapper .item-type-service-wrapper {
  padding: 0.3rem 1rem;
}
.available-countries-wrapper .available-countries-heading {
  color: #5d5d5d;
  font-weight: 700;
  font-size: 18px;
  font-family: "Times New Roman", Sans-serif;
}
.available-countries-wrapper .available-countries-content-wrapper {
  max-height: 190px;
  overflow-y: auto;
  border-radius: 8px;
  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;
  padding: 8px;
}
.available-countries-wrapper .available-countries-content-wrapper .country-img-wrapper {
  text-align: start;
  border: 1px solid #a9bbcf;
  background-color: #f8faff;
  font-weight: 500;
  padding: 0.5rem;
  display: flex;
  align-items: center;
}
.available-countries-wrapper .available-countries-content-wrapper .country-img-wrapper:hover {
  border-color: hsl(211, 63%, 66%);
  background-color: #beddff;
  box-shadow: 0 0 4px #70a5df;
}
.available-countries-wrapper .available-countries-content-wrapper .country-img-wrapper .country-img {
  border-radius: 4px;
  height: 100%;
  box-shadow: 0 0 4px #c9c9c9;
  width: 34px;
  margin-right: 6px;
}

.videos-wrapper {
  padding: 1rem 0;
}
.videos-wrapper .videos-heading {
  color: #5d5d5d;
  font-weight: 700;
  font-size: 24px;
  font-family: "Times New Roman", Sans-serif;
}
.videos-wrapper .video-player-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.videos-wrapper .video-player {
  border-radius: 6px;
  background: #000;
  aspect-ratio: 16/9;
}
.videos-wrapper .playlist-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}
.videos-wrapper .video-list {
  max-height: 500px;
  overflow-y: auto;
}
.videos-wrapper .video-item {
  padding: 6px;
  border-radius: 6px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8f9fa;
}
.videos-wrapper .video-item:hover {
  background: #e9ecef;
  transform: translateX(5px);
}
.videos-wrapper .video-item.active {
  background: #e9ecef;
  border-left: 4px solid #0d6efd;
}
.videos-wrapper .video-thumbnail {
  width: 120px;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 6px;
}
.videos-wrapper .video-info h5 {
  font-size: 1rem;
  margin-bottom: 5px;
}
.videos-wrapper .video-info p {
  font-size: 0.875rem;
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .videos-wrapper .video-list {
    max-height: 400px;
  }
  .videos-wrapper .video-thumbnail {
    width: 100px;
    height: 56px;
  }
}

.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;
}

.user-profile-change-info {
  padding: 4px 15px;
  box-shadow: 0 0 5px #c3c3c3;
  border-radius: 5px;
}

.m-user-profile-input-group {
  overflow-x: auto;
}

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

.user-security-change-password {
  max-width: 500px;
  box-shadow: 0 0 5px #9b9b9b;
  padding: 4px 15px;
}

.user-profile-input-group {
  max-width: 17rem;
  flex: 1 1 100%;
  border-radius: unset;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.user-profile-input-group-text {
  min-width: 120px;
  border-radius: unset;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.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;
}

.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;
}

/* CSS cho toggle khi checked */
#toggle-2fa:checked {
  background: #0ea5e9 !important;
}

#toggle-2fa:checked + #knob {
  left: 23px !important;
}

.security-wrapper .twofa-status-box {
  background: #f8f9fa;
  border: 1px solid #e1e1e1;
  padding: 12px 15px;
  border-radius: 8px;
}

.security-wrapper .twofa-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #ececec;
  font-size: 14px;
}

.security-wrapper .twofa-item:last-child {
  border-bottom: none;
}

.security-wrapper .btn {
  font-weight: 600;
}

/* ====== START Profile with ZNS, EMAIL CHANGE, TAX ====== */
.contact-email,
.contact-phone {
  font-weight: 600;
  font-size: 16px;
  color: #1f2937;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.btn-edit-inline {
  border: none;
  background: transparent;
  padding: 2px 4px;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn-edit-inline:hover {
  opacity: 1;
  transform: scale(1.08);
}

.security-row {
  flex-wrap: nowrap;
}

.security-row__left {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 12px;
}

.security-row__right {
  flex: 0 0 auto;
}

.security-row__btn {
  width: auto;
}

/* Mobile: xuống dòng + button full width */
@media (max-width: 576px) {
  .security-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .security-row__left {
    width: 100%;
    margin-right: 0;
  }
  .security-row__right {
    width: 100%;
    margin-top: 10px;
    text-align: left;
  }
  .security-row__btn {
    width: 100%;
    display: inline-flex;
    justify-content: center;
  }
}
.account-info-text {
  font-weight: 600;
  font-size: 16px;
  color: #1f2937;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.security-row--stack {
  gap: 0;
}

.security-row__action {
  width: 100%;
}

@media (max-width: 576px) {
  .security-row__action button {
    width: 100%;
  }
}
/* ====== END Profile with ZNS, EMAIL CHANGE, TAX ====== */
.acc-verify {
  /* Màu mô tả dòng KYC theo trạng thái (giống trang /user/kyc) */
  /* Panel CTA xác minh danh tính (gom 2 nút Zalo / KYC) */
  /* Khối gom danh tính (Zalo + KYC) */
}
.acc-verify .av-head {
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef1f6;
}
.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 {
  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-edit {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
}
.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-tag--oneof {
  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-muted {
  background: #eef1f6;
  color: #6b7382;
}
.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-cta {
  border: 1px solid #cfe0ff;
  background: linear-gradient(135deg, #f2f7ff, #eaf1ff);
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0 2px;
}
.acc-verify .av-cta-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.acc-verify .av-cta-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2f6bff;
  color: #fff;
  font-size: 17px;
  box-shadow: 0 6px 14px rgba(47, 107, 255, 0.3);
}
.acc-verify .av-cta-title {
  font-weight: 700;
  font-size: 14.5px;
  color: #12306e;
}
.acc-verify .av-cta-sub {
  font-size: 12.5px;
  color: #4b6088;
  margin-top: 2px;
}
.acc-verify .av-cta-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.acc-verify .av-cta-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  text-decoration: none;
  border-radius: 11px;
  padding: 12px 14px;
  border: 1px solid #d5dce6;
  background: #fff;
  cursor: pointer;
  transition: 0.15s ease;
}
.acc-verify .av-cta-btn > i {
  font-size: 18px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.acc-verify .av-cta-btn .t {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  color: #1f2a44;
}
.acc-verify .av-cta-btn .d {
  display: block;
  font-size: 11.5px;
  color: #8a93a3;
  margin-top: 1px;
}
.acc-verify .av-cta-btn:hover {
  border-color: #2f6bff;
  box-shadow: 0 8px 18px rgba(47, 107, 255, 0.16);
  transform: translateY(-1px);
}
.acc-verify .av-cta-btn--zalo > i {
  color: #0068ff;
}
.acc-verify .av-cta-btn--kyc > i {
  color: #16a34a;
}
@media (max-width: 576px) {
  .acc-verify .av-cta-actions {
    grid-template-columns: 1fr;
  }
}
.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-btn--fill {
  background: #2f6bff;
  color: #fff;
}
.acc-verify .av-btn--fill:hover {
  background: #1e50d8;
  border-color: #1e50d8;
  color: #fff;
}
.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-identity .av-row:first-of-type {
  border-top: 1px solid #eef1f6;
}
.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-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: 100px;
  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);
  }
}
.av-modal {
  /* Input-group: bo góc ngoài, vuông mối nối trong (email modal có nhiều input-group) */
}
.av-modal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(16, 26, 51, 0.22);
}
.av-modal .modal-header {
  background: linear-gradient(135deg, #2f6bff, #1e50d8);
  border-bottom: none;
  padding: 15px 20px;
  align-items: center;
}
.av-modal .modal-header .modal-title {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.av-modal .modal-header .btn-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  box-shadow: none;
}
.av-modal .modal-header .btn-close .far, .av-modal .modal-header .btn-close .fas, .av-modal .modal-header .btn-close i {
  color: #fff;
}
.av-modal .modal-header .btn-close:hover {
  background: rgba(255, 255, 255, 0.32);
}
.av-modal .modal-body {
  padding: 20px;
}
.av-modal .modal-body .form-label {
  font-weight: 600;
  font-size: 13px;
  color: #344054;
  margin-bottom: 6px;
}
.av-modal .modal-body .form-control {
  border-radius: 10px;
  border: 1px solid #d5dce6;
  padding: 10px 12px;
  font-size: 14px;
}
.av-modal .modal-body .form-control:focus {
  border-color: #2f6bff;
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.14);
}
.av-modal .modal-body hr {
  border-color: #eef1f6;
  opacity: 1;
}
.av-modal .modal-body .text-muted {
  font-size: 12.5px;
}
.av-modal .modal-footer {
  border-top: 1px solid #f1f3f5;
  padding: 14px 20px;
  gap: 8px;
}
.av-modal .btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 9px 18px;
}
.av-modal .btn-success {
  background: #16a34a;
  border-color: #16a34a;
}
.av-modal .btn-success:hover {
  background: #128a3e;
  border-color: #128a3e;
}
.av-modal .input-group {
  border-radius: 10px;
}
.av-modal .input-group > .form-control, .av-modal .input-group > .input-group-text, .av-modal .input-group > .btn {
  border-radius: 0;
}
.av-modal .input-group > :first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.av-modal .input-group > :last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.av-modal .input-group-text {
  background: #f3f5f8;
  border: 1px solid #d5dce6;
  color: #495057;
  font-size: 12.5px;
  font-weight: 600;
}
.av-modal .modal-body .alert {
  border-radius: 12px;
  font-size: 13px;
}
.av-modal .modal-body .alert-info {
  background: #eaf3ff;
  border-color: #cfe3ff;
  color: #0b4d8f;
}

.profile-tabnav-wrap {
  margin-bottom: 18px;
}

.profile-tabnav {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  background: #eef1f6;
  padding: 5px;
  border-radius: 12px;
}
.profile-tabnav .nav-link {
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: #4b5563;
  background: transparent;
  display: inline-flex;
  align-items: center;
  transition: 0.15s ease;
}
.profile-tabnav .nav-link i {
  color: inherit !important;
  font-size: 1em;
}
.profile-tabnav .nav-link:hover {
  color: #2f6bff;
}
.profile-tabnav .nav-link.active {
  background: #fff;
  color: #2f6bff;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.12);
}

.av-modal .av-modal-lead {
  font-size: 13.5px;
  color: #4b5563;
  margin-bottom: 14px;
  line-height: 1.55;
}
.av-modal .av-modal-note {
  display: block;
  background: #fff9ee;
  border: 1px solid #ffe0a3;
  color: #8a6d00;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.av-modal .av-modal-note > i {
  color: #f0a500;
}

.acc-verify .av-idhead-note--warn {
  color: #8a6d00;
}

.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;
}

.wrapper-2fa .alert {
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.wrapper-2fa .alert-info {
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
}
.wrapper-2fa .alert-warning {
  background: #fff3e0;
  border-left: 4px solid #ff9800;
}
.wrapper-2fa .alert-success {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
}
.wrapper-2fa .benefits-box {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 6px;
  margin: 20px 0;
}
.wrapper-2fa .benefits-box ul {
  margin: 10px 0;
  padding-left: 20px;
}
.wrapper-2fa .benefits-box li {
  margin: 8px 0;
}
.wrapper-2fa .btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}
.wrapper-2fa .btn-large {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-weight: bold;
}
.wrapper-2fa .steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}
.wrapper-2fa .step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrapper-2fa .step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #757575;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.wrapper-2fa .step.active .step-number {
  background: #2196f3;
  color: white;
}
.wrapper-2fa .step-label {
  margin-top: 8px;
  font-size: 14px;
  color: #757575;
}
.wrapper-2fa .step.active .step-label {
  color: #2196f3;
  font-weight: bold;
}
.wrapper-2fa .step-line {
  width: 80px;
  height: 2px;
  background: #e0e0e0;
  margin: 0 10px;
}
.wrapper-2fa .qr-container {
  text-align: center;
  margin: 30px 0;
}
.wrapper-2fa .qr-box {
  background: white;
  padding: 20px;
  display: inline-block;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
}
.wrapper-2fa .qr-image {
  width: 250px;
  height: 250px;
}
.wrapper-2fa .manual-entry {
  margin-top: 15px;
  text-align: left;
}
.wrapper-2fa .secret-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  margin-top: 10px;
}
.wrapper-2fa .secret-box code {
  flex: 1;
  font-family: monospace;
  font-size: 14px;
}
.wrapper-2fa .btn-copy {
  padding: 6px 12px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.wrapper-2fa .verify-container {
  margin-top: 30px;
}
.wrapper-2fa .verify-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 20px 0;
}
.wrapper-2fa .otp-input {
  flex: 1;
  padding: 15px;
  font-size: 24px;
  text-align: center;
  font-family: monospace;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
}
.wrapper-2fa .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}
.wrapper-2fa .info-card {
  text-align: center;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}
.wrapper-2fa .info-icon {
  font-size: 36px;
  margin-bottom: 10px;
}
.wrapper-2fa .form-group {
  margin: 15px 0;
}
.wrapper-2fa .form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.wrapper-2fa .form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 16px;
}
.wrapper-2fa .form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.wrapper-2fa .error-message {
  color: #f44336;
  margin-top: 10px;
  padding: 10px;
  background: #ffebee;
  border-radius: 4px;
}
.wrapper-2fa .actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.wrapper-2fa .modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.wrapper-2fa .modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}
.wrapper-2fa .backup-codes-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
  font-family: monospace;
}
.wrapper-2fa .backup-codes-list div {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  text-align: center;
}
.wrapper-2fa .warning {
  color: #ff9800;
  font-weight: bold;
}
.wrapper-2fa .backup-container {
  margin: 10px 0 15px 0;
  padding: 4px 12px;
  background: #f9f9f9;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
}
.wrapper-2fa .backup-header h4 {
  font-size: 15px;
  margin: 0;
}
.wrapper-2fa .backup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper-2fa .backup-actions button {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.wrapper-2fa .btn-copy {
  background: #4caf50;
  color: white;
  margin-right: 6px;
}
.wrapper-2fa .btn-copy:hover {
  background: #43a047;
}
.wrapper-2fa .btn-download {
  background: #1976d2;
  color: white;
}
.wrapper-2fa .btn-download:hover {
  background: #1565c0;
}
.wrapper-2fa .backup-list {
  list-style: none;
  padding-left: 0;
  margin-top: 8px;
  margin-bottom: 8px;
}
.wrapper-2fa .backup-item {
  font-family: monospace;
  background: #fff;
  border: 1px solid #ddd;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  color: #c62828;
  font-size: 13px;
}

.security-wrapper {
  /* Nút bật */
  /* Nút tắt */
  /* Nút disabled */
  /* Mobile */
}
.security-wrapper .tab-content-wrapper {
  background: #fff;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid #edf0f5;
  box-shadow: 0 12px 34px rgba(16, 26, 51, 0.07), 0 2px 6px rgba(16, 26, 51, 0.04);
}
.security-wrapper .security-card {
  border: 1px solid #e3e6ee;
  border-radius: 12px;
  padding: 18px 22px;
  background: #fff;
  transition: 0.2s ease;
}
.security-wrapper .security-card:hover {
  border-color: #c9d4f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.security-wrapper .security-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 3px;
  color: #2b2f33;
}
.security-wrapper .btn-2fa-on {
  background: #27ae60;
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  border: none;
  font-weight: 500;
  transition: 0.2s;
}
.security-wrapper .btn-2fa-on:hover {
  background: #219653;
}
.security-wrapper .btn-2fa-off {
  border: 1px solid #bfc6d6;
  background: #f8f9fc;
  color: #555;
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 500;
  transition: 0.2s;
}
.security-wrapper .btn-2fa-off:hover {
  background: #eceffc;
}
.security-wrapper .btn-2fa-disabled {
  background: #f1f1f1;
  border: 1px solid #ddd;
  color: #888;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: not-allowed !important;
}
.security-wrapper .btn-2fa-disabled a {
  color: #666;
  text-decoration: none;
}
@media (max-width: 576px) {
  .security-wrapper .security-card {
    padding: 14px 16px;
  }
}

.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;
}

/* VPS products admin — /admin/servers/products (admin/servers/products.hbs). Scope: .vps-products-v2 */
.vps-products-v2 {
  padding-bottom: 32px;
}
.vps-products-v2 .vp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.vps-products-v2 .vp-head h3 {
  margin-bottom: 4px;
}
.vps-products-v2 .vp-head-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vps-products-v2 .vp-head-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  color: #4a5260;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  transition: border-color 0.15s, color 0.15s;
}
.vps-products-v2 .vp-head-link i {
  font-size: 12px;
  color: #5f6775;
}
.vps-products-v2 .vp-head-link:hover {
  border-color: #2482e5;
  color: #2482e5;
  text-decoration: none;
}
.vps-products-v2 .vp-head-link:hover i {
  color: #2482e5;
}
.vps-products-v2 .vp-add-product {
  position: relative;
}
.vps-products-v2 .vp-add-product > summary {
  list-style: none;
  cursor: pointer;
}
.vps-products-v2 .vp-add-product > summary::-webkit-details-marker {
  display: none;
}
.vps-products-v2 .vp-add-product[open] > summary {
  border-color: #2482e5;
  color: #2482e5;
}
.vps-products-v2 .vp-add-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 26, 51, 0.14);
  padding: 10px;
}
.vps-products-v2 .vp-add-menu-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #868e96;
  margin-bottom: 6px;
}
.vps-products-v2 .vp-add-list {
  max-height: 320px;
  overflow-y: auto;
}
.vps-products-v2 .vp-add-item {
  color: #212529;
  text-decoration: none;
}
.vps-products-v2 .vp-add-item:hover {
  color: #2482e5;
  text-decoration: none;
}
.vps-products-v2 .vp-add-item.is-current {
  background: #e6f1fb;
  font-weight: 600;
}
@media (max-width: 575px) {
  .vps-products-v2 .vp-add-menu {
    left: 0;
    right: auto;
  }
}
.vps-products-v2 .vp-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #868e96;
}
.vps-products-v2 .vp-sub b {
  color: #212529;
}
.vps-products-v2 .vp-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ced4da;
}
.vps-products-v2 .vp-text-warn, .vps-products-v2 .vp-text-warn b {
  color: #d98a00;
}
.vps-products-v2 .vp-alert {
  border-radius: 10px;
}
.vps-products-v2 .vp-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
}
.vps-products-v2 .vp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (min-width: 1200px) {
  .vps-products-v2 .vp-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
  .vps-products-v2 .vp-bulk {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
}
.vps-products-v2 .vp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: #fff;
  line-height: 1.3;
}
.vps-products-v2 .vp-btn--primary {
  background: #2482e5;
  color: #fff;
}
.vps-products-v2 .vp-btn--primary:hover {
  background: #0c447c;
  color: #fff;
}
.vps-products-v2 .vp-btn--danger {
  background: #fff;
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.45);
}
.vps-products-v2 .vp-btn--danger:hover {
  background: #dc3545;
  color: #fff;
}
.vps-products-v2 .vp-btn--outline {
  color: #0c447c;
  border-color: #cfd8e3;
}
.vps-products-v2 .vp-btn--outline:hover {
  border-color: #2482e5;
  color: #2482e5;
}
.vps-products-v2 .vp-link {
  background: none;
  border: none;
  padding: 0;
  color: #2482e5;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.vps-products-v2 .vp-link:hover {
  text-decoration: underline;
}
.vps-products-v2 .vp-toolbar {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e9ecef;
}
.vps-products-v2 .vp-toolbar .form-control {
  font-size: 13px;
  border-radius: 8px;
  height: 34px;
  padding: 4px 10px;
}
@media (max-width: 991px) {
  .vps-products-v2 .vp-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .vps-products-v2 .vp-filter-text {
    grid-column: 1/-1;
  }
}
.vps-products-v2 .vp-selbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 14px;
  font-size: 13px;
  color: #495057;
  background: #f8f9fb;
  border-bottom: 1px solid #e9ecef;
}
.vps-products-v2 .vp-check-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}
.vps-products-v2 .vp-selbar-info {
  color: #868e96;
}
.vps-products-v2 .vp-selbar-info b {
  color: #212529;
}
.vps-products-v2 .vp-table-wrap {
  max-height: 72vh;
  overflow: auto;
}
.vps-products-v2 .vp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}
.vps-products-v2 .vp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8f9fb;
  color: #495057;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 12px;
  border-bottom: 1px solid #eef0f3;
  white-space: nowrap;
}
.vps-products-v2 .vp-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f3f5;
  font-size: 13px;
  color: #212529;
  vertical-align: middle;
}
.vps-products-v2 .vp-row {
  cursor: pointer;
}
.vps-products-v2 .vp-row:hover {
  background: #f8fbff;
}
.vps-products-v2 .vp-row.is-selected {
  background: #e6f1fb;
}
.vps-products-v2 .vp-col-check {
  width: 36px;
}
.vps-products-v2 .vp-row-check, .vps-products-v2 .vp-check-all input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.vps-products-v2 .vp-plan {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
.vps-products-v2 .vp-muted {
  color: #868e96;
  font-size: 12px;
}
.vps-products-v2 .vp-nowrap {
  white-space: nowrap;
}
.vps-products-v2 .vp-flag {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.vps-products-v2 .vp-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 20px;
  background: #eef0f3;
  font-weight: 600;
  font-size: 12px;
  cursor: help;
  white-space: nowrap;
}
.vps-products-v2 .vp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 320px;
}
.vps-products-v2 .vp-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f3f5;
  font-size: 11.5px;
  white-space: nowrap;
}
.vps-products-v2 .vp-pill {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.vps-products-v2 .vp-pill--ok {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}
.vps-products-v2 .vp-pill--warn {
  background: rgba(245, 159, 0, 0.14);
  color: #d98a00;
}
.vps-products-v2 .vp-pill--muted {
  background: #eef0f3;
  color: #6c757d;
}
.vps-products-v2 .vp-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #d5dce6;
  border-radius: 8px;
  color: #2482e5;
}
.vps-products-v2 .vp-edit:hover {
  background: #2482e5;
  border-color: #2482e5;
  color: #fff;
}
.vps-products-v2 .vp-empty {
  text-align: center;
  color: #adb5bd;
  padding: 36px 12px;
}
.vps-products-v2 .vp-empty i {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}
.vps-products-v2 .vp-bulk {
  padding: 14px;
}
.vps-products-v2 .vp-bulk-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0c447c;
}
.vps-products-v2 .vp-step + .vp-step {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #e9ecef;
}
.vps-products-v2 .vp-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.vps-products-v2 .vp-step-label span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2482e5;
  color: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vps-products-v2 .vp-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.vps-products-v2 .vp-target {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
}
.vps-products-v2 .vp-target.is-active {
  border-color: #2482e5;
  background: #e6f1fb;
  color: #0c447c;
  font-weight: 600;
}
.vps-products-v2 .vp-hint {
  font-size: 12.5px;
  color: #868e96;
  margin-bottom: 8px;
}
.vps-products-v2 .vp-confirm-all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(220, 53, 69, 0.07);
  color: #dc3545;
  font-size: 13px;
  margin: 0;
  cursor: pointer;
}
.vps-products-v2 .vp-scope {
  margin-top: 8px;
  font-size: 13px;
  color: #495057;
}
.vps-products-v2 .vp-scope b {
  color: #0c447c;
}
.vps-products-v2 .vp-list-search {
  margin-bottom: 6px;
  border-radius: 8px;
  font-size: 12.5px;
}
.vps-products-v2 .vp-list {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 4px;
}
.vps-products-v2 .vp-list--tall {
  max-height: 300px;
}
.vps-products-v2 .vp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
}
.vps-products-v2 .vp-item:hover {
  background: #f8f9fb;
}
.vps-products-v2 .vp-item.is-checked {
  background: #e6f1fb;
}
.vps-products-v2 .vp-item[hidden] {
  display: none;
}
.vps-products-v2 .vp-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vps-products-v2 .vp-item-count {
  font-size: 11.5px;
  color: #868e96;
}
.vps-products-v2 .vp-cov {
  font-size: 11px;
  font-weight: 700;
  color: #adb5bd;
  font-variant-numeric: tabular-nums;
}
.vps-products-v2 .vp-cov.is-full {
  color: #198754;
}
.vps-products-v2 .vp-cov.is-part {
  color: #d98a00;
}
.vps-products-v2 .vp-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: #f1f3f5;
  border-radius: 9px;
  margin-bottom: 10px;
}
.vps-products-v2 .vp-tab {
  flex: 1;
  border: none;
  background: none;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
}
.vps-products-v2 .vp-tab.is-active {
  background: #fff;
  color: #0c447c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.vps-products-v2 .vp-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 6px;
}
.vps-products-v2 .vp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.vps-products-v2 .vp-pill--danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  margin-left: 6px;
}
.vps-products-v2 .vp-tools {
  margin-top: 16px;
}
.vps-products-v2 .vp-tools summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: #495057;
}
.vps-products-v2 .vp-tools summary small {
  font-weight: 400;
}
.vps-products-v2 .vp-tools[open] summary {
  border-bottom: 1px solid #e9ecef;
}
.vps-products-v2 .vp-tools-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  padding: 14px;
}
@media (max-width: 575px) {
  .vps-products-v2 .vp-tools-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vps-products-v2 .vp-tool-group {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.vps-products-v2 .vp-tool-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #0c447c;
  margin-bottom: 4px;
}
.vps-products-v2 .vp-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  margin: 0;
}
.vps-products-v2 .vp-tool + .vp-tool {
  border-top: 1px solid #f1f3f5;
}
.vps-products-v2 .vp-tool-info {
  min-width: 0;
  flex: 1;
}
.vps-products-v2 .vp-tool-name {
  font-weight: 600;
  font-size: 13px;
  color: #212529;
}
.vps-products-v2 .vp-tool-info small {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 2px;
}
.vps-products-v2 .vp-tool-input {
  margin-top: 6px;
  max-width: 200px;
}
.vps-products-v2 .vp-tool-input .form-control {
  border-radius: 8px;
}
.vps-products-v2 .vp-tool .vp-btn {
  flex-shrink: 0;
  padding: 6px 11px;
  font-size: 12.5px;
}
.vps-products-v2 .vp-tool--danger .vp-tool-name {
  color: #dc3545;
}
.vps-products-v2 .vp-tool.is-running {
  opacity: 0.75;
}
.vps-products-v2 .vp-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* VPS add product — /admin/servers/add-product?datacenter= (admin/servers/add-products.hbs). Scope: .vps-add-product-v2 */
.vps-add-product-v2 {
  position: relative;
  left: 50%;
  width: min(1640px, calc(100vw - 48px));
  margin-left: calc(-1 * min(820px, calc(50vw - 24px)));
  padding: 8px 0 96px;
  color: #1f2733;
  font-size: 14px;
}
.vps-add-product-v2 .ap-muted {
  color: #7b8494;
  font-weight: 400;
}
.vps-add-product-v2 .ap-flag {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.vps-add-product-v2 .ap-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.vps-add-product-v2 .ap-head h3 {
  margin: 2px 0 4px;
  font-size: 24px;
  font-weight: 700;
}
.vps-add-product-v2 .ap-crumb {
  font-size: 13px;
  font-weight: 600;
  color: #7b8494;
  text-decoration: none;
}
.vps-add-product-v2 .ap-crumb:hover {
  color: #2482e5;
  text-decoration: none;
}
.vps-add-product-v2 .ap-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #7b8494;
}
.vps-add-product-v2 .ap-sub b {
  color: #1f2733;
}
.vps-add-product-v2 .ap-sub .is-warn, .vps-add-product-v2 .ap-sub .is-warn b {
  color: #d98a00;
}
.vps-add-product-v2 .ap-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ced4da;
}
.vps-add-product-v2 .ap-head-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vps-add-product-v2 .ap-head-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  color: #4a5260;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.vps-add-product-v2 .ap-head-link:hover {
  border-color: #2482e5;
  color: #2482e5;
  text-decoration: none;
}
.vps-add-product-v2 .ap-head-link--primary {
  background: #2482e5;
  border-color: #2482e5;
  color: #fff;
}
.vps-add-product-v2 .ap-head-link--primary:hover {
  background: #0c447c;
  border-color: #0c447c;
  color: #fff;
}
.vps-add-product-v2 .ap-alert {
  border-radius: 10px;
}
.vps-add-product-v2 .ap-alert ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-weight: 400;
  font-size: 13px;
}
.vps-add-product-v2 .ap-card {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
  margin-bottom: 16px;
}
.vps-add-product-v2 .ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}
.vps-add-product-v2 .ap-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.vps-add-product-v2 .ap-btn--primary {
  background: #2482e5;
  color: #fff;
}
.vps-add-product-v2 .ap-btn--primary:hover:not(:disabled) {
  background: #0c447c;
}
.vps-add-product-v2 .ap-btn--outline {
  background: #fff;
  border-color: #dfe3ea;
  color: #4a5260;
}
.vps-add-product-v2 .ap-btn--outline:hover:not(:disabled), .vps-add-product-v2 .ap-btn--outline.is-on {
  border-color: #2482e5;
  color: #2482e5;
}
.vps-add-product-v2 .ap-input {
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  color: #1f2733;
}
.vps-add-product-v2 .ap-input:focus {
  outline: none;
  border-color: #2482e5;
  box-shadow: 0 0 0 3px rgba(36, 130, 229, 0.15);
}
.vps-add-product-v2 .ap-chip {
  padding: 4px 10px;
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  background: #fff;
  color: #7b8494;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vps-add-product-v2 .ap-chip.is-on {
  background: #e6f1fb;
  border-color: #b9d6f5;
  color: #0c447c;
}
.vps-add-product-v2 .ap-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e3e7ee;
}
.vps-add-product-v2 .ap-toolbar-title {
  font-size: 15px;
  font-weight: 700;
  margin-right: 4px;
}
.vps-add-product-v2 .ap-toolbar-title i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-add-product-v2 .ap-search {
  width: 200px;
}
.vps-add-product-v2 .ap-groups {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
}
.vps-add-product-v2 .ap-hint {
  padding: 8px 14px;
  background: #f7f9fc;
  border-bottom: 1px solid #e3e7ee;
  font-size: 12.5px;
  color: #5a6475;
  line-height: 1.6;
}
.vps-add-product-v2 .ap-hint i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-add-product-v2 .ap-hint code {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 4px;
  padding: 0 4px;
  color: #0c447c;
  font-size: 12px;
}
.vps-add-product-v2 .ap-table-wrap {
  overflow-x: auto;
  max-height: 68vh;
  overflow-y: auto;
}
.vps-add-product-v2 .ap-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.vps-add-product-v2 .ap-table th, .vps-add-product-v2 .ap-table td {
  padding: 6px 7px;
  border-bottom: 1px solid #eef1f5;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
.vps-add-product-v2 .ap-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 700;
  color: #5a6475;
  border-bottom: 1px solid #e3e7ee;
  user-select: none;
}
.vps-add-product-v2 .ap-table thead th[data-field] {
  cursor: pointer;
}
.vps-add-product-v2 .ap-table thead th[data-field]:hover {
  color: #2482e5;
  background: #eef4fb;
}
.vps-add-product-v2 .ap-table thead th[data-field] {
  text-decoration: underline dotted #b3bccb;
  text-underline-offset: 3px;
}
.vps-add-product-v2 .ap-table thead th.is-editing::after {
  content: "\f303";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 9px;
  margin-left: 4px;
}
.vps-add-product-v2 .ap-table thead th.is-editing {
  background: #e6f1fb;
  color: #0c447c;
}
.vps-add-product-v2 .ap-table th[data-type=text], .vps-add-product-v2 .ap-table td[data-type=text], .vps-add-product-v2 .ap-table .ap-info, .vps-add-product-v2 .ap-table .ap-th-info {
  text-align: left;
}
.vps-add-product-v2 .ap-table th[data-type=bool], .vps-add-product-v2 .ap-table td[data-type=bool] {
  text-align: center;
}
.vps-add-product-v2 .ap-table th[data-group=price], .vps-add-product-v2 .ap-table td[data-group=price] {
  background-image: linear-gradient(rgba(36, 130, 229, 0.035), rgba(36, 130, 229, 0.035));
}
.vps-add-product-v2 .ap-table tbody tr:hover td {
  background-color: #fafcff;
}
.vps-add-product-v2 .ap-table .ap-col-plan {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  font-weight: 700;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  box-shadow: 1px 0 0 #e3e7ee;
}
.vps-add-product-v2 .ap-table thead .ap-col-plan {
  z-index: 4;
  background: #f7f9fc;
  font-family: inherit;
  font-size: 12px;
}
.vps-add-product-v2 .ap-table tbody tr:hover .ap-col-plan {
  background: #fafcff;
}
.vps-add-product-v2 .ap-table .ap-info {
  color: #7b8494;
  font-size: 12.5px;
}
.vps-add-product-v2 .ap-table .ap-blank {
  color: #c3c9d3;
}
.vps-add-product-v2 .ap-table tr.is-off td:not(.ap-actions) {
  color: #9aa3b0;
}
.vps-add-product-v2 .ap-table tr.is-off .ap-col-plan {
  text-decoration: line-through;
  text-decoration-color: #c3c9d3;
}
.vps-add-product-v2 .ap-table [hidden] {
  display: none !important;
}
.vps-add-product-v2 .ap-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.vps-add-product-v2 .ap-pill--ok {
  background: #e3f4ea;
  color: #198754;
}
.vps-add-product-v2 .ap-pill--off {
  background: #fdecee;
  color: #dc3545;
}
.vps-add-product-v2 .ap-pill--star {
  background: #fff3d6;
  color: #9a6200;
}
.vps-add-product-v2 .ap-cell.is-dirty {
  background: #fff6d6 !important;
  box-shadow: inset 2px 0 0 #e6a700;
}
.vps-add-product-v2 .ap-cell.is-invalid {
  background: #fde8ea !important;
  box-shadow: inset 2px 0 0 #dc3545;
}
.vps-add-product-v2 .ap-cell-input {
  width: 100%;
  min-width: 70px;
  height: 28px;
  padding: 2px 6px;
  border: 1px solid #c9d2df;
  border-radius: 6px;
  font-size: 13px;
  text-align: inherit;
  background: #fff;
  color: #1f2733;
}
.vps-add-product-v2 .ap-cell-input:focus {
  outline: none;
  border-color: #2482e5;
  box-shadow: 0 0 0 2px rgba(36, 130, 229, 0.18);
}
.vps-add-product-v2 td[data-type=price] .ap-cell-input, .vps-add-product-v2 td[data-type=number] .ap-cell-input {
  width: 96px;
}
.vps-add-product-v2 td[data-type=number] .ap-cell-input {
  width: 72px;
}
.vps-add-product-v2 td[data-type=text] .ap-cell-input {
  min-width: 110px;
}
.vps-add-product-v2 .ap-cell-check {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
}
.vps-add-product-v2 .ap-fill-row th {
  top: 30px !important;
  padding: 4px 8px !important;
  background: #eef4fb !important;
  text-transform: none !important;
  cursor: default !important;
}
.vps-add-product-v2 .ap-fill-row th::after {
  content: none !important;
}
.vps-add-product-v2 .ap-fill-row .ap-cell-input {
  border-style: dashed;
  border-color: #8fb8e8;
  font-weight: 400;
}
.vps-add-product-v2 .ap-fill-row .ap-fill-label {
  font-size: 11px;
  color: #0c447c;
  text-align: left;
}
.vps-add-product-v2 .ap-actions {
  text-align: right;
}
.vps-add-product-v2 .ap-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #5a6475;
  font-size: 12px;
  text-decoration: none;
}
.vps-add-product-v2 .ap-icon-btn:hover {
  background: #e6f1fb;
  color: #2482e5;
}
.vps-add-product-v2 .ap-icon-btn--danger:hover {
  background: #fdecee;
  color: #dc3545;
}
.vps-add-product-v2 .ap-empty {
  padding: 28px 14px;
  text-align: center;
  color: #7b8494;
}
.vps-add-product-v2 .ap-empty i {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
  opacity: 0.5;
}
.vps-add-product-v2 .ap-savebar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #1f2733;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 26, 51, 0.3);
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
  justify-content: center;
}
.vps-add-product-v2 .ap-savebar[hidden] {
  display: none;
}
.vps-add-product-v2 .ap-savebar-info {
  font-size: 13px;
  margin-right: 6px;
}
.vps-add-product-v2 .ap-add > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.vps-add-product-v2 .ap-add > summary::-webkit-details-marker {
  display: none;
}
.vps-add-product-v2 .ap-add > summary i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-add-product-v2 .ap-add > summary::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  color: #7b8494;
  transition: transform 0.15s;
}
.vps-add-product-v2 .ap-add[open] > summary::after {
  transform: rotate(180deg);
}
.vps-add-product-v2 .ap-add > summary small {
  margin-left: auto;
  font-size: 12.5px;
}
.vps-add-product-v2 .ap-add-body {
  border-top: 1px solid #e3e7ee;
  padding: 4px 14px 14px;
}
.vps-add-product-v2 .ad-products-add-box {
  background: transparent;
  padding: 0 !important;
  margin: 0 !important;
}
.vps-add-product-v2 .ad-providers {
  width: 100%;
  padding: 0 !important;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.vps-add-product-v2 .ad-providers > .row {
  margin: 0 !important;
}
.vps-add-product-v2 .ad-providers .col-12.row {
  margin-top: 0 !important;
}
.vps-add-product-v2 .ad-providers [class*=col-] {
  padding-left: 6px;
  padding-right: 6px;
}
.vps-add-product-v2 .ad-providers > .row > .col-12 {
  padding-left: 0;
  padding-right: 0;
}
.vps-add-product-v2 .ad-providers .col-12.row > span.text-primary {
  display: block;
  width: 100%;
  margin: 14px 6px 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e3e7ee;
  font-size: 12px;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0c447c !important;
}
.vps-add-product-v2 .ad-providers label.fw-600, .vps-add-product-v2 .ad-providers [class*=col-] > span.font-weight-bold, .vps-add-product-v2 .ad-providers label.mb-0 {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600 !important;
  color: #5a6475;
}
.vps-add-product-v2 .ad-providers label.text-danger, .vps-add-product-v2 .ad-providers span.text-danger {
  color: #dc3545 !important;
}
.vps-add-product-v2 .ad-providers input[type=text], .vps-add-product-v2 .ad-providers input[type=number], .vps-add-product-v2 .ad-providers select {
  width: 100% !important;
  height: 34px;
  padding: 4px 10px !important;
  border: 1px solid #d5dae3 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  background-color: #fff;
  color: #1f2733;
  box-shadow: none;
}
.vps-add-product-v2 .ad-providers input:focus, .vps-add-product-v2 .ad-providers select:focus {
  outline: none;
  border-color: #2482e5 !important;
  box-shadow: 0 0 0 3px rgba(36, 130, 229, 0.15);
}
.vps-add-product-v2 .ad-providers input[readonly] {
  background: #f3f5f8;
  color: #6b7482;
}
.vps-add-product-v2 .ad-providers input:required:placeholder-shown, .vps-add-product-v2 .ad-providers select:required:invalid {
  border-left: 3px solid #f0b4ba !important;
}
.vps-add-product-v2 .ad-providers .mb-2 {
  margin-bottom: 10px !important;
}
.vps-add-product-v2 .ad-providers h6 {
  font-size: 13px;
  color: #7b8494;
  margin: 0 6px;
}
.vps-add-product-v2 .ad-providers .ap-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 6px 6px !important;
  max-height: 220px;
  overflow-y: auto;
}
.vps-add-product-v2 .ad-providers .ap-checks .ad-data-box-input {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0 !important;
}
.vps-add-product-v2 .ad-providers .ad-data-form-locations-text {
  display: inline-flex !important;
  width: auto;
  margin: 0;
  padding: 4px 10px 4px 8px !important;
  border: 1px solid #d5dae3;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #4a5260;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
}
.vps-add-product-v2 .ad-providers .ad-data-form-locations-text.is-checked {
  background: #e6f1fb;
  border-color: #9cc6f2;
  color: #0c447c;
  font-weight: 600;
}
.vps-add-product-v2 .ad-providers .ad-data-form-input-locations {
  width: 15px;
  height: 15px;
  margin-right: 6px !important;
}
.vps-add-product-v2 .ap-checks-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0 6px 8px;
  font-size: 12.5px;
}
.vps-add-product-v2 .ap-checks-bar .ap-input {
  height: 30px;
  width: 200px;
}
.vps-add-product-v2 .ap-checks-count {
  color: #7b8494;
}
.vps-add-product-v2 .ap-checks-count b {
  color: #1f2733;
}
.vps-add-product-v2 .ap-link {
  border: 0;
  background: none;
  padding: 0;
  color: #2482e5;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.vps-add-product-v2 .ap-link:hover {
  text-decoration: underline;
}
.vps-add-product-v2 .ad-providers > .row.mt-2 {
  margin: 14px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid #e3e7ee;
}
.vps-add-product-v2 .ad-providers > .row.mt-2 > .col-12 {
  text-align: right;
  padding: 0 6px;
}
.vps-add-product-v2 .ad-providers > .row.mt-2 span.font-weight-bold {
  display: none !important;
}
.vps-add-product-v2 .ad-providers button[type=submit] {
  width: auto !important;
  min-width: 200px;
  padding: 9px 22px;
  border: 0;
  border-radius: 8px;
  background: #2482e5;
  font-size: 14px;
  font-weight: 700;
}
.vps-add-product-v2 .ad-providers button[type=submit]:hover {
  background: #0c447c;
}
@media (max-width: 767px) {
  .vps-add-product-v2 {
    width: calc(100vw - 20px);
    margin-left: calc(-50vw + 10px);
  }
  .vps-add-product-v2 .ap-groups {
    margin-left: 0;
  }
  .vps-add-product-v2 .ap-search {
    width: 100%;
  }
  .vps-add-product-v2 .ap-table .ap-col-plan {
    position: static;
    box-shadow: none;
  }
  .vps-add-product-v2 .ad-providers button[type=submit] {
    width: 100% !important;
  }
}

/* VPS detail product — /admin/servers/detail-product/:_id (admin/servers/detail-product.hbs). Scope: .vps-detail-product-v2 */
.vps-detail-product-v2 {
  padding-bottom: 110px;
  color: #1f2733;
  font-size: 14px;
}
.vps-detail-product-v2 .dp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.vps-detail-product-v2 .dp-head h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 4px;
  font-size: 24px;
  font-weight: 700;
}
.vps-detail-product-v2 .dp-flag {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.vps-detail-product-v2 .dp-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.vps-detail-product-v2 .dp-crumb {
  color: #7b8494;
  text-decoration: none;
}
.vps-detail-product-v2 .dp-crumb:hover {
  color: #2482e5;
  text-decoration: none;
}
.vps-detail-product-v2 .dp-sep {
  color: #c3c9d3;
}
.vps-detail-product-v2 .dp-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #7b8494;
}
.vps-detail-product-v2 .dp-sub b {
  color: #1f2733;
}
.vps-detail-product-v2 .dp-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ced4da;
}
.vps-detail-product-v2 .dp-head-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vps-detail-product-v2 .dp-head-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  color: #4a5260;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.vps-detail-product-v2 .dp-head-link:hover {
  border-color: #2482e5;
  color: #2482e5;
  text-decoration: none;
}
.vps-detail-product-v2 .dp-alert {
  border-radius: 10px;
}
.vps-detail-product-v2 .dp-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.vps-detail-product-v2 .dp-pill--ok {
  background: #e3f4ea;
  color: #198754;
}
.vps-detail-product-v2 .dp-pill--off {
  background: #fdecee;
  color: #dc3545;
}
.vps-detail-product-v2 .dp-pill--star {
  background: #fff3d6;
  color: #9a6200;
}
.vps-detail-product-v2 .dp-copy {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.vps-detail-product-v2 .dp-copy:hover {
  border-bottom-color: #b3bccb;
}
.vps-detail-product-v2 .dp-copy.is-copied {
  color: #198754 !important;
}
.vps-detail-product-v2 .dp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.vps-detail-product-v2 .dp-tile {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  min-width: 0;
}
.vps-detail-product-v2 .dp-tile-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7b8494;
}
.vps-detail-product-v2 .dp-tile-value {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.vps-detail-product-v2 .dp-tile-value--price {
  color: #dc3545;
}
.vps-detail-product-v2 .dp-tile-value--warn {
  color: #d98a00;
}
.vps-detail-product-v2 .dp-tile-note {
  margin-top: 2px;
  font-size: 12px;
  color: #7b8494;
  overflow-wrap: anywhere;
  min-height: 18px;
}
.vps-detail-product-v2 .dp-card {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
  margin-bottom: 16px;
}
.vps-detail-product-v2 .dp-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid #e3e7ee;
  font-size: 15px;
  font-weight: 700;
}
.vps-detail-product-v2 .dp-form-title i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-detail-product-v2 .dp-link {
  font-size: 13px;
  font-weight: 600;
  color: #2482e5;
  text-decoration: none;
}
.vps-detail-product-v2 .dp-link i {
  margin: 0 0 0 4px;
  font-size: 11px;
}
.vps-detail-product-v2 .dp-link:hover {
  text-decoration: underline;
}
.vps-detail-product-v2 .dp-section {
  padding: 12px 16px 4px;
  border-bottom: 1px solid #f0f2f6;
}
.vps-detail-product-v2 .dp-section-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0c447c;
}
.vps-detail-product-v2 .dp-section-title small {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #7b8494;
}
.vps-detail-product-v2 .dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px 12px;
  margin-bottom: 10px;
}
.vps-detail-product-v2 .dp-grid--prices {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.vps-detail-product-v2 .dp-field {
  display: block;
  margin: 0;
  min-width: 0;
}
.vps-detail-product-v2 .dp-field > span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6475;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vps-detail-product-v2 .dp-field > span small {
  font-weight: 400;
  color: #a0a8b5;
}
.vps-detail-product-v2 .dp-field > span.dp-key {
  color: #dc3545;
}
.vps-detail-product-v2 .dp-field input, .vps-detail-product-v2 .dp-field select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-size: 13.5px;
  background-color: #fff;
  color: #1f2733;
}
.vps-detail-product-v2 .dp-field input:focus, .vps-detail-product-v2 .dp-field select:focus {
  outline: none;
  border-color: #2482e5;
  box-shadow: 0 0 0 3px rgba(36, 130, 229, 0.15);
}
.vps-detail-product-v2 .dp-field input[readonly] {
  background: #f3f5f8;
  color: #6b7482;
}
.vps-detail-product-v2 .dp-field.is-dirty input, .vps-detail-product-v2 .dp-field.is-dirty select {
  background-color: #fff6d6;
  border-color: #e6a700;
}
.vps-detail-product-v2 .dp-price input {
  text-align: right;
  font-weight: 600;
}
.vps-detail-product-v2 .dp-price-hint {
  display: block;
  min-height: 17px;
  margin-top: 2px;
  font-size: 11.5px;
  font-style: normal;
  color: #7b8494;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vps-detail-product-v2 .dp-picker-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.vps-detail-product-v2 .dp-picker-bar input[type=search] {
  height: 30px;
  width: 200px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-size: 13px;
}
.vps-detail-product-v2 .dp-picker-bar input[type=search]:focus {
  outline: none;
  border-color: #2482e5;
}
.vps-detail-product-v2 .dp-picker-count {
  color: #7b8494;
}
.vps-detail-product-v2 .dp-picker-count b {
  color: #1f2733;
}
.vps-detail-product-v2 .dp-picker-count.is-dirty b {
  color: #b07a00;
}
.vps-detail-product-v2 .dp-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  color: #2482e5;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.vps-detail-product-v2 .dp-linkbtn:hover {
  text-decoration: underline;
}
.vps-detail-product-v2 .dp-linkbtn.is-on {
  color: #0c447c;
  text-decoration: underline;
}
.vps-detail-product-v2 .dp-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 232px;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 2px;
}
.vps-detail-product-v2 .dp-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px 4px 8px;
  border: 1px solid #d5dae3;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #4a5260;
  cursor: pointer;
  white-space: nowrap;
}
.vps-detail-product-v2 .dp-check input {
  width: 15px;
  height: 15px;
  margin: 0;
}
.vps-detail-product-v2 .dp-check.is-checked {
  background: #e6f1fb;
  border-color: #9cc6f2;
  color: #0c447c;
  font-weight: 600;
}
.vps-detail-product-v2 .dp-check.is-changed {
  box-shadow: 0 0 0 2px #f2d27a;
}
.vps-detail-product-v2 .dp-check[hidden] {
  display: none;
}
.vps-detail-product-v2 .dp-picker-empty {
  font-size: 13px;
  color: #7b8494;
  padding: 4px 2px;
}
.vps-detail-product-v2 .dp-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 26, 51, 0.14);
}
.vps-detail-product-v2 .dp-savebar.is-dirty {
  background: #1f2733;
  border-color: #1f2733;
  color: #fff;
}
.vps-detail-product-v2 .dp-savebar-info {
  margin-right: auto;
  font-size: 13px;
  color: #7b8494;
}
.vps-detail-product-v2 .dp-savebar.is-dirty .dp-savebar-info {
  color: #fff;
  font-weight: 600;
}
.vps-detail-product-v2 .dp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}
.vps-detail-product-v2 .dp-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.vps-detail-product-v2 .dp-btn--primary {
  background: #2482e5;
  color: #fff;
}
.vps-detail-product-v2 .dp-btn--primary:hover:not(:disabled) {
  background: #0c447c;
}
.vps-detail-product-v2 .dp-btn--outline {
  background: #fff;
  border-color: #dfe3ea;
  color: #4a5260;
}
.vps-detail-product-v2 .dp-btn--outline:hover:not(:disabled) {
  border-color: #2482e5;
  color: #2482e5;
}
.vps-detail-product-v2 .dp-table-wrap {
  overflow-x: auto;
}
.vps-detail-product-v2 .dp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vps-detail-product-v2 .dp-table th, .vps-detail-product-v2 .dp-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #eef1f5;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}
.vps-detail-product-v2 .dp-table th {
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 700;
  color: #5a6475;
}
.vps-detail-product-v2 .dp-table .dp-num {
  text-align: right;
}
.vps-detail-product-v2 .dp-table .dp-plan a {
  font-weight: 700;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #1f2733;
  text-decoration: none;
}
.vps-detail-product-v2 .dp-table .dp-plan a:hover {
  color: #2482e5;
}
.vps-detail-product-v2 .dp-table tbody tr:hover td {
  background: #fafcff;
}
.vps-detail-product-v2 .dp-table tr.is-off td {
  color: #9aa3b0;
}
.vps-detail-product-v2 .dp-table tr.is-current td {
  background: #e6f1fb;
}
.vps-detail-product-v2 .dp-table tr.is-current .dp-plan a {
  color: #0c447c;
}
.vps-detail-product-v2 .dp-table .dp-blank {
  color: #c3c9d3;
}
.vps-detail-product-v2 .dp-actions {
  text-align: right !important;
}
.vps-detail-product-v2 .dp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #5a6475;
  font-size: 12px;
  text-decoration: none;
}
.vps-detail-product-v2 .dp-icon-btn:hover {
  background: #e6f1fb;
  color: #2482e5;
}
.vps-detail-product-v2 .dp-icon-btn--danger:hover {
  background: #fdecee;
  color: #dc3545;
}
.vps-detail-product-v2 .dp-empty {
  text-align: center !important;
  color: #7b8494;
  padding: 20px !important;
}
@media (max-width: 575px) {
  .vps-detail-product-v2 .dp-grid, .vps-detail-product-v2 .dp-grid--prices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vps-detail-product-v2 .dp-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vps-detail-product-v2 .dp-picker-bar input[type=search] {
    width: 100%;
  }
  .vps-detail-product-v2 .dp-savebar {
    justify-content: stretch;
  }
  .vps-detail-product-v2 .dp-savebar .dp-btn {
    flex: 1;
    justify-content: center;
  }
}

/* Locations + Operating systems — /admin/servers/add-location, /admin/servers/operating-system(/:_id). Scope: .vps-catalog-v2 */
.vps-catalog-v2 {
  left: 50%;
  width: min(1640px, calc(100vw - 48px));
  max-width: none;
  margin-left: calc(-1 * min(820px, calc(50vw - 24px)));
  padding-bottom: 80px;
  color: #1f2733;
  font-size: 14px;
}
.vps-catalog-v2 .vc-muted {
  color: #7b8494;
  font-weight: 400;
}
.vps-catalog-v2 .vc-blank {
  color: #c3c9d3;
}
.vps-catalog-v2 .vc-nowrap {
  white-space: nowrap;
}
.vps-catalog-v2 .vc-text-warn, .vps-catalog-v2 .vc-text-warn b {
  color: #d98a00;
}
.vps-catalog-v2 .vc-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.vps-catalog-v2 .vc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.vps-catalog-v2 .vc-head h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 4px;
  font-size: 24px;
  font-weight: 700;
}
.vps-catalog-v2 .vc-head h3 > i {
  color: #2482e5;
  font-size: 20px;
}
.vps-catalog-v2 .vc-crumb {
  font-size: 13px;
  font-weight: 600;
  color: #7b8494;
  text-decoration: none;
}
.vps-catalog-v2 .vc-crumb:hover {
  color: #2482e5;
  text-decoration: none;
}
.vps-catalog-v2 .vc-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #7b8494;
}
.vps-catalog-v2 .vc-sub b {
  color: #1f2733;
}
.vps-catalog-v2 .vc-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ced4da;
}
.vps-catalog-v2 .vc-head-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vps-catalog-v2 .vc-head-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  color: #4a5260;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.vps-catalog-v2 .vc-head-link:hover {
  border-color: #2482e5;
  color: #2482e5;
  text-decoration: none;
}
.vps-catalog-v2 .vc-head-link--primary {
  background: #2482e5;
  border-color: #2482e5;
  color: #fff;
}
.vps-catalog-v2 .vc-head-link--primary:hover {
  background: #0c447c;
  border-color: #0c447c;
  color: #fff;
}
.vps-catalog-v2 .vc-alert {
  border-radius: 10px;
}
.vps-catalog-v2 .vc-card {
  display: block;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
  margin-bottom: 16px;
}
.vps-catalog-v2 .vc-card-title {
  padding: 12px 16px;
  border-bottom: 1px solid #e3e7ee;
  font-size: 15px;
  font-weight: 700;
}
.vps-catalog-v2 .vc-card-title i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-catalog-v2 .vc-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.vps-catalog-v2 .vc-pill--ok {
  background: #e3f4ea;
  color: #198754;
}
.vps-catalog-v2 .vc-pill--off {
  background: #fdecee;
  color: #dc3545;
}
.vps-catalog-v2 .vc-type {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  background: #eef1f5;
  color: #4a5260;
}
.vps-catalog-v2 .vc-type--windows {
  background: #e6f1fb;
  color: #0c447c;
}
.vps-catalog-v2 .vc-type--linux {
  background: #fff3d6;
  color: #8a5a00;
}
.vps-catalog-v2 .vc-type--ala {
  background: #efe9fb;
  color: #5b3aa6;
}
.vps-catalog-v2 .vc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e3e7ee;
}
.vps-catalog-v2 .vc-input {
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  color: #1f2733;
}
.vps-catalog-v2 .vc-input:focus {
  outline: none;
  border-color: #2482e5;
  box-shadow: 0 0 0 3px rgba(36, 130, 229, 0.15);
}
.vps-catalog-v2 .vc-search {
  width: 240px;
}
.vps-catalog-v2 .vc-count {
  margin-left: auto;
  font-size: 13px;
  color: #7b8494;
}
.vps-catalog-v2 .vc-count b {
  color: #1f2733;
}
.vps-catalog-v2 .vc-table-wrap {
  overflow: auto;
  max-height: 72vh;
}
.vps-catalog-v2 .vc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.vps-catalog-v2 .vc-table th, .vps-catalog-v2 .vc-table td {
  padding: 7px 9px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: middle;
  text-align: left;
}
.vps-catalog-v2 .vc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 700;
  color: #5a6475;
  white-space: nowrap;
  border-bottom: 1px solid #e3e7ee;
}
.vps-catalog-v2 .vc-table .vc-num {
  text-align: right;
  white-space: nowrap;
}
.vps-catalog-v2 .vc-table .vc-pid {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vps-catalog-v2 .vc-table thead .vc-pid {
  font-family: inherit;
  text-transform: uppercase;
  color: #0c447c;
}
.vps-catalog-v2 .vc-table td.vc-pid.is-empty {
  color: #c3c9d3;
}
.vps-catalog-v2 .vc-table tbody tr.vc-row:hover td {
  background: #fafcff;
}
.vps-catalog-v2 .vc-table tr.vc-row.is-open td {
  background: #e6f1fb;
  border-bottom-color: transparent;
}
.vps-catalog-v2 .vc-table tr.is-off td {
  color: #9aa3b0;
}
.vps-catalog-v2 .vc-table tr.is-off .vc-name {
  text-decoration: line-through;
  text-decoration-color: #c3c9d3;
}
.vps-catalog-v2 .vc-name {
  font-weight: 700;
  white-space: nowrap;
}
.vps-catalog-v2 .vc-table tbody .vc-row > td:first-child {
  min-width: 170px;
}
.vps-catalog-v2 .vc-table .vc-muted {
  white-space: nowrap;
}
.vps-catalog-v2 .vc-actions {
  text-align: right !important;
  white-space: nowrap;
}
.vps-catalog-v2 .vc-table td.vc-actions, .vps-catalog-v2 .vc-table thead th:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: #fff;
  box-shadow: -1px 0 0 #eef1f5;
}
.vps-catalog-v2 .vc-table thead th:last-child {
  z-index: 3;
  background: #f7f9fc;
}
.vps-catalog-v2 .vc-table tr.vc-row:hover td.vc-actions {
  background: #fafcff;
}
.vps-catalog-v2 .vc-table tr.vc-row.is-open td.vc-actions {
  background: #e6f1fb;
}
.vps-catalog-v2 .vc-edit-row > td > form {
  position: sticky;
  left: 16px;
  width: min(1560px, calc(100vw - 100px));
}
.vps-catalog-v2 .vc-table [hidden] {
  display: none !important;
}
.vps-catalog-v2 .vc-edit-row > td {
  background: #f7faff;
  padding: 12px 16px 14px !important;
  border-bottom: 2px solid #c9dcf3 !important;
}
.vps-catalog-v2 .vc-add > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.vps-catalog-v2 .vc-add > summary::-webkit-details-marker {
  display: none;
}
.vps-catalog-v2 .vc-add > summary i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-catalog-v2 .vc-add > summary::after {
  content: "\f078";
  margin-left: auto;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  color: #7b8494;
  transition: transform 0.15s;
}
.vps-catalog-v2 .vc-add[open] > summary::after {
  transform: rotate(180deg);
}
.vps-catalog-v2 .vc-add[open] > summary {
  border-bottom: 1px solid #e3e7ee;
}
.vps-catalog-v2 .vc-add-body {
  padding: 4px 16px 14px;
}
.vps-catalog-v2 .vc-subtitle {
  margin: 10px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0c447c;
}
.vps-catalog-v2 .vc-subtitle--first {
  margin-top: 12px;
}
.vps-catalog-v2 .vc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px 12px;
}
.vps-catalog-v2 .vc-field {
  display: block;
  margin: 0;
  min-width: 0;
}
.vps-catalog-v2 .vc-field > span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6475;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vps-catalog-v2 .vc-field > span small {
  font-weight: 400;
  color: #a0a8b5;
}
.vps-catalog-v2 .vc-field > span.vc-req::after {
  content: " *";
  color: #dc3545;
}
.vps-catalog-v2 .vc-field input, .vps-catalog-v2 .vc-field select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-size: 13.5px;
  background-color: #fff;
  color: #1f2733;
}
.vps-catalog-v2 .vc-field input:focus, .vps-catalog-v2 .vc-field select:focus {
  outline: none;
  border-color: #2482e5;
  box-shadow: 0 0 0 3px rgba(36, 130, 229, 0.15);
}
.vps-catalog-v2 .vc-field input[readonly] {
  background: #f3f5f8;
  color: #6b7482;
}
.vps-catalog-v2 .vc-field.is-dirty input, .vps-catalog-v2 .vc-field.is-dirty select {
  background-color: #fff6d6;
  border-color: #e6a700;
}
.vps-catalog-v2 .vc-usage, .vps-catalog-v2 .vc-hint {
  margin-top: 12px;
  font-size: 12.5px;
  color: #5a6475;
}
.vps-catalog-v2 .vc-usage i, .vps-catalog-v2 .vc-hint i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-catalog-v2 .vc-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e3e7ee;
}
.vps-catalog-v2 .vc-spacer {
  flex: 1;
}
.vps-catalog-v2 .vc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.vps-catalog-v2 .vc-btn:hover {
  text-decoration: none;
}
.vps-catalog-v2 .vc-btn--primary {
  background: #2482e5;
  color: #fff;
}
.vps-catalog-v2 .vc-btn--primary:hover {
  background: #0c447c;
  color: #fff;
}
.vps-catalog-v2 .vc-btn--outline {
  background: #fff;
  border-color: #dfe3ea;
  color: #4a5260;
}
.vps-catalog-v2 .vc-btn--outline:hover {
  border-color: #2482e5;
  color: #2482e5;
}
.vps-catalog-v2 .vc-btn--ghost {
  padding: 4px 10px;
  background: transparent;
  color: #2482e5;
}
.vps-catalog-v2 .vc-btn--ghost:hover, .vps-catalog-v2 .vc-btn--ghost.is-on {
  background: #e6f1fb;
}
.vps-catalog-v2 .vc-btn--danger-outline {
  background: #fff;
  border-color: #f2c4c9;
  color: #dc3545;
}
.vps-catalog-v2 .vc-btn--danger-outline:hover {
  background: #fdecee;
}
.vps-catalog-v2 .vc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #5a6475;
  font-size: 12px;
  text-decoration: none;
  vertical-align: middle;
}
.vps-catalog-v2 .vc-icon-btn:hover {
  background: #e6f1fb;
  color: #2482e5;
}
.vps-catalog-v2 .vc-tools > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.vps-catalog-v2 .vc-tools > summary::-webkit-details-marker {
  display: none;
}
.vps-catalog-v2 .vc-tools > summary i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-catalog-v2 .vc-tools > summary small {
  font-size: 12.5px;
}
.vps-catalog-v2 .vc-tools-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}
.vps-catalog-v2 .vc-tools-body form {
  margin: 0 !important;
}
.vps-catalog-v2 .vc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  max-height: 320px;
  overflow-y: auto;
}
.vps-catalog-v2 .vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5260;
  text-decoration: none;
  background: #fff;
}
.vps-catalog-v2 .vc-chip small {
  font-weight: 400;
  color: #7b8494;
}
.vps-catalog-v2 .vc-chip:hover {
  border-color: #2482e5;
  color: #2482e5;
  text-decoration: none;
}
.vps-catalog-v2 .vc-chip.is-off {
  color: #9aa3b0;
  text-decoration: line-through;
}
.vps-catalog-v2 .vc-empty {
  padding: 28px 14px;
  text-align: center;
  color: #7b8494;
}
.vps-catalog-v2 .vc-empty i {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
  opacity: 0.5;
}
@media (max-width: 767px) {
  .vps-catalog-v2 {
    width: calc(100vw - 20px);
    margin-left: calc(-50vw + 10px);
  }
  .vps-catalog-v2 .vc-search {
    width: 100%;
  }
  .vps-catalog-v2 .vc-count {
    margin-left: 0;
  }
  .vps-catalog-v2 .vc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================================
 * Giao diện chung các trang admin: providers, provider detail, cloud-country, datacenters, datacenter detail,
 * custom-image, add-cloud. Scope: .vps-ui (mỗi view bọc <div class="content vps-ui">). JS đi kèm: js/admin/vps-admin-ui.js
 * ========================================================================== */
.vps-ui {
  left: 50%;
  width: min(1500px, calc(100vw - 48px));
  max-width: none;
  margin-left: calc(-1 * min(750px, calc(50vw - 24px)));
  padding-bottom: 90px;
  color: #1f2733;
  font-size: 14px;
}
.vps-ui .ui-muted {
  color: #7b8494;
  font-weight: 400;
}
.vps-ui .ui-blank {
  color: #c3c9d3;
}
.vps-ui .ui-nowrap {
  white-space: nowrap;
}
.vps-ui .ui-mono {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.vps-ui .ui-text-warn, .vps-ui .ui-text-warn b {
  color: #d98a00;
}
.vps-ui .ui-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.vps-ui .ui-flag--lg {
  width: 30px;
  height: 21px;
  vertical-align: -4px;
}
.vps-ui [hidden] {
  display: none !important;
}
.vps-ui .ui-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.vps-ui .ui-head h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 4px;
  font-size: 24px;
  font-weight: 700;
}
.vps-ui .ui-head h3 > i {
  color: #2482e5;
  font-size: 20px;
}
.vps-ui .ui-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.vps-ui .ui-crumb {
  color: #7b8494;
  text-decoration: none;
}
.vps-ui .ui-crumb:hover {
  color: #2482e5;
  text-decoration: none;
}
.vps-ui .ui-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #7b8494;
}
.vps-ui .ui-sub b {
  color: #1f2733;
}
.vps-ui .ui-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ced4da;
}
.vps-ui .ui-head-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vps-ui .ui-head-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  color: #4a5260;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.vps-ui .ui-head-link:hover {
  border-color: #2482e5;
  color: #2482e5;
  text-decoration: none;
}
.vps-ui .ui-head-link--primary {
  background: #2482e5;
  border-color: #2482e5;
  color: #fff;
}
.vps-ui .ui-head-link--primary:hover {
  background: #0c447c;
  border-color: #0c447c;
  color: #fff;
}
.vps-ui .ui-alert {
  border-radius: 10px;
}
.vps-ui .ui-card {
  display: block;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 26, 51, 0.04);
  margin-bottom: 16px;
}
.vps-ui .ui-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid #e3e7ee;
  font-size: 15px;
  font-weight: 700;
}
.vps-ui .ui-card-title i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-ui .ui-card-body {
  padding: 12px 16px 14px;
}
.vps-ui .ui-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.vps-ui .ui-tile {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  min-width: 0;
}
.vps-ui .ui-tile-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7b8494;
}
.vps-ui .ui-tile-value {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.vps-ui .ui-tile-note {
  margin-top: 2px;
  font-size: 12px;
  color: #7b8494;
  overflow-wrap: anywhere;
}
.vps-ui .ui-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.vps-ui .ui-pill--ok {
  background: #e3f4ea;
  color: #198754;
}
.vps-ui .ui-pill--off {
  background: #fdecee;
  color: #dc3545;
}
.vps-ui .ui-pill--warn {
  background: #fff3d6;
  color: #9a6200;
}
.vps-ui .ui-pill--info {
  background: #e6f1fb;
  color: #0c447c;
}
.vps-ui .ui-pill--muted {
  background: #eceff3;
  color: #4a5260;
}
.vps-ui .ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid #d5dae3;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4a5260;
  text-decoration: none;
  background: #fff;
  white-space: nowrap;
}
.vps-ui a.ui-chip:hover {
  border-color: #2482e5;
  color: #2482e5;
  text-decoration: none;
}
.vps-ui .ui-chip.is-off {
  color: #9aa3b0;
}
.vps-ui .ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vps-ui .ui-copy {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.vps-ui .ui-copy:hover {
  border-bottom-color: #b3bccb;
}
.vps-ui .ui-copy.is-copied {
  color: #198754 !important;
}
.vps-ui .ui-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e3e7ee;
}
.vps-ui .ui-input {
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  color: #1f2733;
}
.vps-ui .ui-input:focus {
  outline: none;
  border-color: #2482e5;
  box-shadow: 0 0 0 3px rgba(36, 130, 229, 0.15);
}
.vps-ui .ui-search {
  width: 240px;
}
.vps-ui .ui-count {
  margin-left: auto;
  font-size: 13px;
  color: #7b8494;
}
.vps-ui .ui-count b {
  color: #1f2733;
}
.vps-ui .ui-table-wrap {
  overflow: auto;
  max-height: 72vh;
}
.vps-ui .ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.vps-ui .ui-table th, .vps-ui .ui-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: middle;
  text-align: left;
}
.vps-ui .ui-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 700;
  color: #5a6475;
  white-space: nowrap;
  border-bottom: 1px solid #e3e7ee;
}
.vps-ui .ui-table .ui-num {
  text-align: right;
  white-space: nowrap;
}
.vps-ui .ui-table tbody tr[data-row]:hover td {
  background: #fafcff;
}
.vps-ui .ui-table tr[data-row].is-open td {
  background: #e6f1fb;
  border-bottom-color: transparent;
}
.vps-ui .ui-table tr.is-off td {
  color: #9aa3b0;
}
.vps-ui .ui-table tr.is-off .ui-name {
  text-decoration: line-through;
  text-decoration-color: #c3c9d3;
}
.vps-ui .ui-name {
  font-weight: 700;
  white-space: nowrap;
}
.vps-ui .ui-table td.ui-actions, .vps-ui .ui-table thead th.ui-actions {
  position: sticky;
  right: 0;
  z-index: 1;
  text-align: right;
  white-space: nowrap;
  background: #fff;
  box-shadow: -1px 0 0 #eef1f5;
}
.vps-ui .ui-table thead th.ui-actions {
  z-index: 3;
  background: #f7f9fc;
}
.vps-ui .ui-table tr[data-row]:hover td.ui-actions {
  background: #fafcff;
}
.vps-ui .ui-table tr[data-row].is-open td.ui-actions {
  background: #e6f1fb;
}
.vps-ui .ui-edit-row > td {
  background: #f7faff;
  padding: 12px 16px 14px !important;
  border-bottom: 2px solid #c9dcf3 !important;
}
.vps-ui .ui-edit-row > td > form {
  position: sticky;
  left: 16px;
  width: min(1420px, calc(100vw - 100px));
}
.vps-ui .ui-empty {
  padding: 28px 14px;
  text-align: center;
  color: #7b8494;
}
.vps-ui .ui-empty i {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
  opacity: 0.5;
}
.vps-ui .ui-subtitle {
  margin: 12px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0c447c;
}
.vps-ui .ui-subtitle:first-child {
  margin-top: 0;
}
.vps-ui .ui-subtitle small {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #7b8494;
}
.vps-ui .ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 12px;
}
.vps-ui .ui-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.vps-ui .ui-split {
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.vps-ui .ui-field {
  display: block;
  margin: 0;
  min-width: 0;
}
.vps-ui .ui-field > span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6475;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vps-ui .ui-field > span small {
  font-weight: 400;
  color: #a0a8b5;
}
.vps-ui .ui-field > span.ui-req::after {
  content: " *";
  color: #dc3545;
}
.vps-ui .ui-field input:not([type=checkbox]), .vps-ui .ui-field select, .vps-ui .ui-field textarea {
  display: block;
  width: 100%;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-size: 13.5px;
  background-color: #fff;
  color: #1f2733;
}
.vps-ui .ui-field textarea {
  height: auto;
  min-height: 64px;
  padding: 6px 10px;
  resize: vertical;
}
.vps-ui .ui-field input:focus, .vps-ui .ui-field select:focus, .vps-ui .ui-field textarea:focus {
  outline: none;
  border-color: #2482e5;
  box-shadow: 0 0 0 3px rgba(36, 130, 229, 0.15);
}
.vps-ui .ui-field input[readonly] {
  background: #f3f5f8;
  color: #6b7482;
}
.vps-ui .ui-field.is-dirty input, .vps-ui .ui-field.is-dirty select, .vps-ui .ui-field.is-dirty textarea {
  background-color: #fff6d6;
  border-color: #e6a700;
}
.vps-ui .ui-field--check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5260;
  cursor: pointer;
}
.vps-ui .ui-field--check input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.vps-ui .ui-secret {
  position: relative;
}
.vps-ui .ui-secret input {
  padding-right: 36px !important;
}
.vps-ui .ui-secret button {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 28px;
  height: 26px;
  border: 0;
  background: transparent;
  color: #7b8494;
  cursor: pointer;
  border-radius: 6px;
}
.vps-ui .ui-secret button:hover {
  background: #e6f1fb;
  color: #2482e5;
}
.vps-ui .ui-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e3e7ee;
}
.vps-ui .ui-spacer {
  flex: 1;
}
.vps-ui .ui-hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: #5a6475;
}
.vps-ui .ui-hint i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-ui .ui-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 26, 51, 0.14);
}
.vps-ui .ui-savebar.is-dirty {
  background: #1f2733;
  border-color: #1f2733;
  color: #fff;
}
.vps-ui .ui-savebar-info {
  margin-right: auto;
  font-size: 13px;
  color: #7b8494;
}
.vps-ui .ui-savebar.is-dirty .ui-savebar-info {
  color: #fff;
  font-weight: 600;
}
.vps-ui .ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.vps-ui .ui-btn:hover {
  text-decoration: none;
}
.vps-ui .ui-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.vps-ui .ui-btn--primary {
  background: #2482e5;
  color: #fff;
}
.vps-ui .ui-btn--primary:hover:not(:disabled) {
  background: #0c447c;
  color: #fff;
}
.vps-ui .ui-btn--outline {
  background: #fff;
  border-color: #dfe3ea;
  color: #4a5260;
}
.vps-ui .ui-btn--outline:hover {
  border-color: #2482e5;
  color: #2482e5;
}
.vps-ui .ui-btn--ghost {
  padding: 4px 10px;
  background: transparent;
  color: #2482e5;
}
.vps-ui .ui-btn--ghost:hover, .vps-ui .ui-btn--ghost.is-on {
  background: #e6f1fb;
}
.vps-ui .ui-btn--danger-outline {
  background: #fff;
  border-color: #f2c4c9;
  color: #dc3545;
}
.vps-ui .ui-btn--danger-outline:hover {
  background: #fdecee;
}
.vps-ui .ui-btn--sm {
  padding: 4px 10px;
  font-size: 12.5px;
}
.vps-ui .ui-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #5a6475;
  font-size: 12px;
  text-decoration: none;
  vertical-align: middle;
}
.vps-ui .ui-icon-btn:hover {
  background: #e6f1fb;
  color: #2482e5;
}
.vps-ui .ui-picker-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.vps-ui .ui-picker-bar input[type=search] {
  height: 30px;
  width: 200px;
  padding: 4px 10px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-size: 13px;
}
.vps-ui .ui-picker-count {
  color: #7b8494;
}
.vps-ui .ui-picker-count b {
  color: #1f2733;
}
.vps-ui .ui-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  color: #2482e5;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.vps-ui .ui-linkbtn:hover, .vps-ui .ui-linkbtn.is-on {
  text-decoration: underline;
}
.vps-ui .ui-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px;
}
.vps-ui .ui-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px 4px 8px;
  border: 1px solid #d5dae3;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #4a5260;
  cursor: pointer;
  white-space: nowrap;
}
.vps-ui .ui-check input {
  width: 15px;
  height: 15px;
  margin: 0;
}
.vps-ui .ui-check.is-checked {
  background: #e6f1fb;
  border-color: #9cc6f2;
  color: #0c447c;
  font-weight: 600;
}
.vps-ui .ui-check.is-changed {
  box-shadow: 0 0 0 2px #f2d27a;
}
.vps-ui .ui-check--warn {
  border-style: dashed;
  border-color: #e6a700;
}
.vps-ui .ui-tools > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.vps-ui .ui-tools > summary::-webkit-details-marker {
  display: none;
}
.vps-ui .ui-tools > summary i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-ui .ui-tools > summary small {
  font-size: 12.5px;
}
.vps-ui .ui-tools-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 16px 14px;
}
.vps-ui .ui-tool {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  background: #fafbfd;
}
.vps-ui .ui-tool .ui-field {
  min-width: 220px;
}
.vps-ui .ui-tool--danger {
  border-color: #f2c4c9;
  background: #fff8f8;
}
.vps-ui .ui-add > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.vps-ui .ui-add > summary::-webkit-details-marker {
  display: none;
}
.vps-ui .ui-add > summary i {
  color: #2482e5;
  margin-right: 4px;
}
.vps-ui .ui-add > summary::after {
  content: "\f078";
  margin-left: auto;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  color: #7b8494;
  transition: transform 0.15s;
}
.vps-ui .ui-add[open] > summary::after {
  transform: rotate(180deg);
}
.vps-ui .ui-add[open] > summary {
  border-bottom: 1px solid #e3e7ee;
}
.vps-ui .ui-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.vps-ui .ui-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  background: #fff;
  color: #4a5260;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}
.vps-ui .ui-tab small {
  font-weight: 600;
  color: #7b8494;
  text-transform: none;
}
.vps-ui .ui-tab:hover {
  border-color: #2482e5;
  color: #2482e5;
  text-decoration: none;
}
.vps-ui .ui-tab.is-active {
  background: #2482e5;
  border-color: #2482e5;
  color: #fff;
}
.vps-ui .ui-tab.is-active small {
  color: #dbeafb;
}
.vps-ui .ui-tile--btn {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.vps-ui .ui-tile--btn:hover {
  border-color: #2482e5;
}
.vps-ui .ui-tile--btn.is-on {
  border-color: #2482e5;
  box-shadow: inset 0 0 0 1px #2482e5;
  background: #e6f1fb;
}
.vps-ui .ui-tile--warn .ui-tile-value {
  color: #d98a00;
}
.vps-ui .ui-tile--danger .ui-tile-value {
  color: #dc3545;
}
.vps-ui .ui-tile-value small {
  font-size: 12px;
  font-weight: 600;
}
.vps-ui .ui-btn--danger {
  background: #dc3545;
  color: #fff;
}
.vps-ui .ui-btn--danger:hover:not(:disabled) {
  background: #b02a37;
  color: #fff;
}
.vps-ui .ui-icon-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.vps-ui .ui-icon-btn--danger:hover {
  background: #fdecee;
  color: #dc3545;
}
.vps-ui .ui-table .ui-sel {
  width: 36px;
  padding-right: 0;
  text-align: center;
  cursor: pointer;
}
.vps-ui .ui-table .ui-sel input {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}
.vps-ui .ui-table thead th.ui-sel {
  z-index: 3;
}
.vps-ui .ui-table tr[data-row].is-selected td, .vps-ui .ui-table tr[data-row].is-selected td.ui-actions {
  background: #fff6e0;
}
.vps-ui .ui-table tr[data-row].is-selected td:first-child {
  box-shadow: inset 3px 0 0 #d98a00;
}
.vps-ui .ui-bulkbar {
  margin-top: 0;
}
.vps-ui .ui-bulkbar.is-dirty .ui-btn--outline {
  background: transparent;
  border-color: #4a5260;
  color: #fff;
}
.vps-ui .ui-bulkbar.is-dirty .ui-btn--outline:hover {
  border-color: #fff;
}
@media (max-width: 767px) {
  .vps-ui {
    width: calc(100vw - 20px);
    margin-left: calc(-50vw + 10px);
  }
  .vps-ui .ui-search {
    width: 100%;
  }
  .vps-ui .ui-count {
    margin-left: 0;
  }
  .vps-ui .ui-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vps-ui .ui-grid--wide {
    grid-template-columns: 1fr;
  }
  .vps-ui .ui-split {
    grid-template-columns: 1fr;
  }
}

/* ---------- /admin/servers/queues ---------- */
.vps-queues .ui-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.vps-queues .ui-tile--btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  width: auto;
  padding: 6px 12px;
  border-radius: 999px;
}
.vps-queues .ui-tile--btn .ui-tile-label {
  order: 1;
  font-size: 11px;
}
.vps-queues .ui-tile--btn .ui-tile-label.ui-mono {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.vps-queues .ui-tile--btn .ui-tile-value {
  order: 0;
  margin: 0;
  font-size: 15px;
}
.vps-queues .ui-tile--btn .ui-tile-note {
  order: 2;
  margin: 0;
  font-size: 11.5px;
}
.vps-queues .ui-tile--btn .ui-tile-value small {
  font-size: 11.5px;
}
.vps-queues .ui-table td {
  line-height: 1.35;
}
.vps-queues .ui-table tr.is-orphan td:not(.ui-actions):not(.ui-sel) {
  color: #8a93a2;
}
.vps-queues .q-ellipsis {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vps-queues .q-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
}
.vps-queues .q-kv {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
  font-size: 13px;
}
.vps-queues .q-kv dt {
  color: #7b8494;
  font-weight: 600;
}
.vps-queues .q-kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.vps-queues .ui-text-danger, .vps-queues .ui-text-danger b {
  color: #dc3545;
}
.vps-queues a.ui-tile--btn:hover {
  text-decoration: none;
}
.vps-queues .q-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.vps-queues .q-pills .ui-pill {
  padding: 0 7px;
  font-size: 10.5px;
}
.vps-queues .q-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid #e3e7ee;
  font-size: 13px;
}
.vps-queues .q-pager .ui-btn {
  min-width: 32px;
  justify-content: center;
}
.vps-queues .q-pager .is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.vps-queues .q-pager-gap {
  padding: 0 4px;
  color: #7b8494;
}
.vps-queues .q-body {
  max-height: 220px;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 991px) {
  .vps-queues .q-detail {
    grid-template-columns: 1fr;
  }
}

/* ---------- Modal xác nhận (Bootstrap) — đặt ngoài .vps-ui nên style riêng ---------- */
.ui-confirm-modal .modal-dialog {
  max-width: 460px;
}
.ui-confirm-modal .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
  color: #1f2733;
  font-size: 14px;
  overflow: hidden;
}
.ui-confirm-modal .ucm-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 14px;
}
.ui-confirm-modal .ucm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: #fdecee;
  color: #dc3545;
  font-size: 16px;
}
.ui-confirm-modal .ucm-text {
  flex: 1;
  min-width: 0;
}
.ui-confirm-modal .ucm-title {
  margin: 2px 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.ui-confirm-modal .ucm-desc {
  margin: 0;
  color: #7b8494;
  font-size: 13px;
  line-height: 1.45;
}
.ui-confirm-modal .ucm-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: -4px -6px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7b8494;
  cursor: pointer;
}
.ui-confirm-modal .ucm-close:hover {
  background: #f1f3f6;
  color: #1f2733;
}
.ui-confirm-modal .ucm-list {
  max-height: 280px;
  margin: 0 20px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  background: #fafbfc;
}
.ui-confirm-modal .ucm-item {
  padding: 8px 12px;
  border-top: 1px solid #e3e7ee;
}
.ui-confirm-modal .ucm-item:first-child {
  border-top: 0;
}
.ui-confirm-modal .ucm-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ui-confirm-modal .ucm-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
}
.ui-confirm-modal .ucm-item-tag {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff3d6;
  color: #9a6200;
  font-size: 11px;
  font-weight: 700;
}
.ui-confirm-modal .ucm-item-meta {
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7b8494;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}
.ui-confirm-modal .ucm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px 18px;
}
.ui-confirm-modal .ucm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.ui-confirm-modal .ucm-btn--ghost {
  background: #fff;
  border-color: #d5dae2;
  color: #1f2733;
}
.ui-confirm-modal .ucm-btn--ghost:hover {
  background: #f4f6f9;
}
.ui-confirm-modal .ucm-btn--danger {
  background: #dc3545;
  color: #fff;
}
.ui-confirm-modal .ucm-btn--danger:hover:not(:disabled) {
  background: #b02a37;
}
.ui-confirm-modal .ucm-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ---------- /admin/services/add-cloud (chọn nhanh) ---------- */
.vps-add-cloud .ac-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.vps-add-cloud .ac-main .ui-card {
  margin-bottom: 10px;
}
.vps-add-cloud .ac-side {
  position: sticky;
  top: 120px;
}
.vps-add-cloud .ac-section {
  padding: 10px 14px 12px;
}
.vps-add-cloud .ac-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  margin-bottom: 8px;
}
.vps-add-cloud .ac-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2482e5;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.vps-add-cloud .ac-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0c447c;
}
.vps-add-cloud .ac-picked {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2733;
}
.vps-add-cloud .ac-picked:not(:empty)::before {
  content: "\f00c";
  margin-right: 5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: #198754;
}
.vps-add-cloud .ac-head-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.vps-add-cloud .ac-head-tools .ui-input {
  height: 30px;
  width: 190px;
  font-size: 12.5px;
}
.vps-add-cloud .ac-head-tools select.ui-input {
  width: 150px;
}
.vps-add-cloud .ac-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12.5px;
  color: #4a5260;
  cursor: pointer;
  white-space: nowrap;
}
.vps-add-cloud .ac-empty {
  font-size: 13px;
  color: #7b8494;
}
.vps-add-cloud .ac-customer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.vps-add-cloud .ac-customer .ui-input {
  width: 380px;
  max-width: 100%;
}
.vps-add-cloud .ac-customer-info {
  font-size: 13px;
}
.vps-add-cloud .ac-dc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
  max-height: 236px;
  overflow-y: auto;
  padding: 2px;
}
.vps-add-cloud .ac-dc {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 36px;
  padding: 0 8px 0 10px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: #1f2733;
  text-align: left;
}
.vps-add-cloud .ac-dc .ui-flag {
  flex: 0 0 20px;
  margin: 0;
}
.vps-add-cloud .ac-dc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.vps-add-cloud .ac-dc-id {
  flex-shrink: 0;
  font-size: 11.5px;
  color: #7b8494;
}
.vps-add-cloud .ac-dc-count {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef1f5;
  font-size: 11.5px;
  font-weight: 700;
  color: #5a6475;
}
.vps-add-cloud .ac-dc:hover {
  border-color: #2482e5;
}
.vps-add-cloud .ac-dc.is-off {
  opacity: 0.55;
}
.vps-add-cloud .ac-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
}
.vps-add-cloud .ac-product {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: #1f2733;
}
.vps-add-cloud .ac-product:hover {
  border-color: #2482e5;
}
.vps-add-cloud .ac-product-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.vps-add-cloud .ac-product-plan {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 700;
}
.vps-add-cloud .ac-product-price {
  font-size: 12.5px;
  font-weight: 700;
  color: #dc3545;
  white-space: nowrap;
}
.vps-add-cloud .ac-product-config {
  font-size: 12.5px;
  color: #4a5260;
}
.vps-add-cloud .ac-product .ui-pill {
  padding: 0 6px;
  font-size: 10.5px;
}
.vps-add-cloud .ac-dc.is-selected, .vps-add-cloud .ac-product.is-selected {
  border-color: #2482e5;
  background: #e6f1fb;
  box-shadow: inset 0 0 0 1px #2482e5;
}
.vps-add-cloud .ac-pick-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 6px 0;
}
.vps-add-cloud .ac-pick-row + .ac-pick-row {
  border-top: 1px dashed #e3e7ee;
}
.vps-add-cloud .ac-pick-label {
  padding-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5a6475;
}
.vps-add-cloud .ac-pick-label b {
  color: #dc3545;
}
.vps-add-cloud .ac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vps-add-cloud .ac-os-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vps-add-cloud .ac-os-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.vps-add-cloud .ac-os-group-title {
  flex: 0 0 58px;
  padding-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #7b8494;
}
.vps-add-cloud .ac-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #3a4250;
  white-space: nowrap;
  cursor: pointer;
}
.vps-add-cloud .ac-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.vps-add-cloud .ac-chip i {
  font-size: 13px;
  color: #8a93a2;
}
.vps-add-cloud .ac-chip .ui-flag {
  margin: 0;
}
.vps-add-cloud .ac-chip:hover {
  border-color: #2482e5;
}
.vps-add-cloud .ac-chip:focus-within {
  box-shadow: 0 0 0 3px rgba(36, 130, 229, 0.2);
}
.vps-add-cloud .ac-chip.is-checked {
  border-color: #2482e5;
  background: #2482e5;
  color: #fff;
  font-weight: 600;
}
.vps-add-cloud .ac-chip.is-checked i {
  color: #fff;
}
.vps-add-cloud .ac-summary dl {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 5px 8px;
  margin: 0 0 10px;
  font-size: 13px;
}
.vps-add-cloud .ac-summary dt {
  color: #7b8494;
  font-weight: 600;
}
.vps-add-cloud .ac-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.vps-add-cloud .ac-missing {
  min-height: 18px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: #d98a00;
}
.vps-add-cloud .ac-submit {
  width: 100%;
  justify-content: center;
  padding: 10px;
  font-size: 14px;
}
@media (max-width: 991px) {
  .vps-add-cloud .ac-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .vps-add-cloud .ac-side {
    position: static;
  }
}
@media (max-width: 575px) {
  .vps-add-cloud .ac-head-tools {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
  }
  .vps-add-cloud .ac-head-tools .ui-input {
    min-width: 0;
  }
  .vps-add-cloud .ac-head-tools .ui-input {
    flex: 1 1 140px;
    width: auto;
  }
  .vps-add-cloud .ac-pick-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .vps-add-cloud .ac-os-group {
    flex-direction: column;
    gap: 4px;
  }
  .vps-add-cloud .ac-os-group-title {
    flex: none;
    padding-top: 0;
  }
}

.vps-ui .ui-proxy-card .ui-card-title small {
  font-size: 12px;
  font-weight: 400;
}
.vps-ui .ui-proxy-row {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 210px minmax(240px, 1fr) auto;
  gap: 10px 14px;
  align-items: start;
  padding: 10px 16px;
  border-bottom: 1px solid #eef1f5;
}
.vps-ui .ui-proxy-row:last-child {
  border-bottom: 0;
}
.vps-ui .ui-proxy-list:not(.ui-proxy-list--inline) .ui-proxy-row:first-child {
  background: #f9fbfd;
}
.vps-ui .ui-proxy-list--inline {
  position: sticky;
  left: 16px;
  width: min(1420px, calc(100vw - 100px));
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
}
.vps-ui .ui-proxy-list--inline .ui-proxy-row {
  grid-template-columns: minmax(160px, 220px) 210px minmax(240px, 1fr) auto;
}
.vps-ui .ui-proxy-name b {
  display: block;
  font-size: 13.5px;
}
.vps-ui .ui-proxy-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}
.vps-ui .ui-proxy-status .ui-mono {
  font-size: 12px;
  color: #4a5260;
}
.vps-ui .ui-proxy-cell {
  white-space: nowrap;
}
.vps-ui .ui-proxy-cell .ui-mono {
  margin-top: 3px;
  font-size: 12px;
}
.vps-ui .ui-seg {
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: #eceff3;
}
.vps-ui .ui-seg button {
  flex: 1;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #4a5260;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.vps-ui .ui-seg button:hover:not(.is-on) {
  color: #2482e5;
}
.vps-ui .ui-seg button.is-on {
  background: #2482e5;
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 26, 51, 0.15);
}
.vps-ui .ui-seg--onoff button.is-on[data-value=true] {
  background: #198754;
}
.vps-ui .ui-seg--onoff button.is-on[data-value=false] {
  background: #fff;
  color: #1f2733;
}
.vps-ui .ui-proxy-url .ui-input {
  width: 100%;
  height: 36px;
}
.vps-ui .ui-proxy-url .ui-input:disabled {
  background: #f3f5f8;
}
.vps-ui .ui-proxy-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 0;
  font-size: 12px;
  color: #5a6475;
  cursor: pointer;
}
.vps-ui .ui-proxy-clear[hidden] {
  display: none !important;
}
.vps-ui .ui-proxy-msg {
  margin-top: 4px;
  font-size: 12.5px;
  color: #7b8494;
  overflow-wrap: anywhere;
}
.vps-ui .ui-proxy-msg.is-ok {
  color: #198754;
}
.vps-ui .ui-proxy-msg.is-error {
  color: #dc3545;
}
.vps-ui .ui-proxy-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 900px) {
  .vps-ui .ui-proxy-row, .vps-ui .ui-proxy-list--inline .ui-proxy-row {
    grid-template-columns: 1fr;
  }
}

.email-change-verify-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: 24px;
}
.email-change-verify-wrapper .step-wrapper {
  margin-bottom: 1rem;
}
.email-change-verify-wrapper .step-wrapper .step-heading {
  font-size: 24px;
  font-weight: 700;
  color: #274b9d;
  margin-bottom: 4px;
}
.email-change-verify-wrapper .step-wrapper .step-content-wrapper {
  padding: 16px 24px;
  border: 1px solid #a7a7a7;
  border-radius: 12px;
  color: #5d5d5d;
}
.email-change-verify-wrapper .step-wrapper .step-content-wrapper.active {
  background-color: #51b16d;
  color: #fff;
  border-color: #51b16d;
}
.email-change-verify-wrapper .step-wrapper .step-content-wrapper .icon-email-wrapper {
  font-size: 30px;
  padding: 8px 16px 8px 0;
  margin: 2px;
}
.email-change-verify-wrapper .step-wrapper .step-content-wrapper .info-email-wrapper {
  margin: 2px;
}
.email-change-verify-wrapper .step-wrapper .step-content-wrapper .info-email-wrapper .info-email-heading {
  font-size: 24px;
  font-weight: 700;
}
.email-change-verify-wrapper .step-wrapper .step-content-wrapper .info-email-wrapper .email-address {
  font-style: italic;
}
.email-change-verify-wrapper .resend-email-wrapper .btn-resend-email {
  color: #258bcf;
  padding: 4px;
  font-weight: 500;
  cursor: pointer;
}
.email-change-verify-wrapper .resend-email-wrapper .btn-resend-email:hover {
  color: #0099ff;
  text-decoration: underline;
}
.email-change-verify-wrapper .resend-email-wrapper .result-resend-email {
  font-size: 14px;
  color: #f15e1a;
  font-weight: 700;
  font-style: italic;
}
.email-change-verify-wrapper .btn-back-profile {
  font-weight: 700;
  color: #5d5d5d;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.email-change-verify-wrapper .btn-back-profile:hover {
  background-color: #518bb1;
  color: #fff;
}

.validate-password-register-wrapper .validate-password-register-item {
  display: flex;
  align-items: center;
}
.validate-password-register-wrapper .validate-password-register-item .icon-validate {
  width: 24px;
  text-align: center;
}
.validate-password-register-wrapper .validate-password-register-item .text-validate {
  color: #28a745;
  font-weight: 500;
  line-height: 1;
  font-size: 14px;
  font-style: italic;
}
.validate-password-register-wrapper .validate-password-register-item.invalid .text-validate {
  font-weight: 400;
  color: #333;
  font-style: inherit;
}

.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;
  }
}

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

a:hover {
  text-decoration: none;
}

.primary-bg-color {
  background-color: #eee;
  border-radius: 4px;
}

.content {
  position: relative;
  top: 51px;
  display: block;
  min-width: auto;
  min-height: 100vh;
  bottom: 50px;
}

.text-gold {
  color: #f7bf66;
}

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

.navbar-color {
  background-image: linear-gradient(to left, rgb(55, 53, 191), rgb(52, 51, 153));
}

.welcome-navbar {
  background-image: linear-gradient(to left, rgb(55, 53, 191), rgb(52, 51, 153));
}

.welcome-brand {
  color: rgba(255, 255, 255, 0.9333333333);
}

.welcome-brand:hover {
  color: rgba(255, 255, 255, 0.9333333333);
}

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

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

.dropdown {
  z-index: 99999;
}

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

.fixed-top-mobile {
  margin-top: -1px;
}

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

.user-lr .icon-zingserver {
  border: 3px #e3e3e3;
  border-radius: 50%;
  border-style: solid;
  height: 70px;
  width: 70px;
}

body {
  padding-top: 125px;
}

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

.nav-link {
  color: rgba(221, 221, 221, 0.9333333333);
}

.nav-link:hover {
  color: #fff;
}

.nav-link-text {
  color: rgba(255, 255, 255, 0.8666666667);
  font-size: 0.9rem;
  font-weight: 500;
}

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

.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;
}

.note-box {
  background-color: #FFFF99;
  display: block;
}

.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);
}

.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;
}

.label-create {
  display: inline-block;
  min-width: 50px;
}

.create-head-box {
  background-color: #eeeff1;
  color: #231832;
}

.create-head-title {
  padding-left: 30px;
  padding-top: 5px;
}

.create-body-box {
  min-height: 100vh;
  background-color: #eeeff1;
  display: block;
}

.create-box-config {
  background-color: #eeeff1;
}

.select-proxy-block {
  display: block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  min-height: 35px;
  margin-bottom: 15px;
}

.country-proxy-block {
  display: block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  min-height: 225px;
  margin-bottom: 10px;
}

.form-check {
  margin: 5px 0 0 5px;
  min-width: 85px;
}

.form-check-label {
  font-size: 1.1rem;
  min-width: 105px;
}

.country-title-block {
  margin: 5px 0 0 5px;
  min-width: 85px;
}

.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: #03e9f4;
}

.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;
}

.icon-copy {
  color: #ddd;
}

.user-running-check-box-all,
.vps-check-box {
  height: 20px;
  width: 20px;
  cursor: pointer;
}

#user-vps select {
  width: max-content;
  cursor: pointer;
}

#coupon-modal ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #17a2b8;
}
#coupon-modal :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #17a2b8;
  opacity: 1;
}
#coupon-modal ::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #17a2b8;
  opacity: 1;
}
#coupon-modal :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #17a2b8;
}
#coupon-modal ::-ms-input-placeholder { /* Microsoft Edge */
  color: #17a2b8;
}
#coupon-modal ::placeholder { /* Most modern browsers support this now. */
  color: #17a2b8;
}

#restart-content-modal {
  display: flex;
}

#form-check-all {
  cursor: pointer;
  display: block;
  padding: 0.375rem 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #ff7100;
  background-clip: padding-box;
  border: 1px solid #ff7100;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#form-check-all label {
  cursor: pointer;
}

.btn-close-modal {
  padding: 0 10px;
}

.btn-close-modal:hover {
  cursor: pointer;
}

.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);
}

.m-0 {
  margin: 0;
}

.p-0 {
  padding: 0;
}

.full-w {
  width: 100% !important;
}

.full-h {
  height: 100%;
}

.max-full-w {
  max-width: 100%;
}

.flex-1 {
  flex: 1 1;
  width: 100%;
}

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

[data-title] {
  position: relative;
  cursor: pointer;
}

[data-title]:hover:after {
  opacity: 1;
  visibility: visible;
}

[data-title]:after {
  content: attr(data-title);
  top: -100%;
  left: 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;
}

.form-search {
  padding: 4px 10px;
  background-image: linear-gradient(360deg, rgb(55, 53, 191), rgb(52, 51, 153));
  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;
}

.header-s-img {
  height: 14px;
  vertical-align: unset;
}

.user-clouds-all-s-img {
  height: 14px;
}

.user-vps-label {
  align-items: center;
  min-width: 155px;
  justify-content: center;
  padding: 5px;
  box-shadow: 0 0 4px black;
  border: none;
  color: black;
}

.user-vps-label-input {
  height: 30px;
  width: 30px;
}

.user-vps-label-text {
  margin-left: 5px;
  font-weight: 700;
}

.user-vps-label-box-img {
  margin: 5px;
  height: 25px;
}

.user-vps-label-img {
  height: 100%;
  border-radius: 7px;
  box-shadow: 0 0 7px white;
}

.user-vps-box-card {
  display: flex;
  justify-content: center;
}

.user-vps-card {
  border: 1px solid #0d6efd;
  border-radius: 12px;
  display: block;
  max-width: 18.3125rem;
}

.user-vps-card:hover {
  border: 1px solid #0d6efd;
  border-radius: 12px;
  display: block;
  max-width: 18.3125rem;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.user-vps-list {
  border: unset;
  padding: 0.5rem 0.25rem;
  display: block;
}

.user-vps-card-heading-text {
  font-weight: 500;
}

.user-vps-card-img {
  border-radius: 4px;
  height: 18px;
  width: 29px;
}

.user-vps-list-text {
  color: #142149;
}

.user-vps-card-footer {
  padding: 0.25rem 1.25rem 0.5rem 1.25rem;
}

.user-config-vps-form-check {
  align-items: unset;
}

.user-config-vps .user-config-vps-form-check-input {
  margin-top: 0.3rem;
  margin-left: -0.5rem;
}

.user-config-list-group-item {
  border-radius: 5px;
  box-shadow: 0 0 2px black;
}

.user-billing-new-invoices-card {
  max-width: 400px;
  box-shadow: 0 0 4px rgb(107, 107, 107);
  border-radius: 4px;
}

.user-billing-new-invoices-btn {
  text-align: start;
}

.user-billing-new-invoices-text {
  word-break: break-word;
}

.user-billing-invoices-card {
  box-shadow: 0 0 4px black;
  border-radius: 4px;
  flex: 0 0;
  margin: 0 8px;
  min-width: 21rem;
  margin-right: auto;
}

.user-new-invoices .user-billing-new-invoices-list {
  border-radius: unset;
  margin: unset;
}

.user-billing-tu-bank {
  max-width: unset;
}

.user-billing-tu-card {
  width: 136px;
  border: none;
  border-radius: 7px;
  border: solid 1px #dee2e6;
  box-shadow: 0 0 4px black;
}

.user-billing-tu-card-body {
  display: flex;
  padding: 0.15rem;
  min-height: 40px;
  justify-content: space-evenly;
  align-items: center;
}

.user-billing-tu-card-text,
.user-billing-tu-card-title {
  margin: unset;
}

.user-billing-tu-card-img-bank {
  height: 100%;
}

.user-billing-input {
  max-width: 24rem;
  outline: 1px solid #eb8f8d;
  outline-style: auto;
}
.user-billing-input:focus {
  box-shadow: unset;
  outline: 1px solid #d33545;
  border: unset;
  outline-style: auto;
}

.user-welcome-dashboard-icon {
  font-size: 40px;
}

.user-welcome-dashboard-btn {
  text-decoration: none !important;
  color: unset;
  font-size: 18px;
  font-weight: 500;
}

.user-welcome-dashboard-btn:hover {
  color: unset;
}

.wc-card-text {
  min-height: 72px;
}

.amt-1 .amt-2 {
  position: relative;
  width: 100%;
  height: 100%;
}

.amt-1:before,
.amt-1:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #b621fe;
  transition: all 1s ease;
}

.amt-1:before {
  height: 0%;
  width: 2px;
}

.amt-1:after {
  width: 0%;
  height: 2px;
}

.amt-1:hover {
  background: rgb(247, 150, 192);
  background: radial-gradient(circle, rgb(247, 150, 192) 0%, rgb(118, 174, 241) 100%);
  box-shadow: none;
}

.amt-1:hover:before {
  height: 100%;
}

.amt-1:hover:after {
  width: 100%;
}

.amt-1 .amt-2:hover {
  color: #fff;
}

.amt-1 .amt-2:before,
.amt-1 .amt-2:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #b621fe;
  transition: all 1s ease;
}

.amt-1 .amt-2:before {
  width: 2px;
  height: 0%;
}

.amt-1 .amt-2:after {
  width: 0%;
  height: 2px;
}

.amt-1 .amt-2:hover:before {
  height: 100%;
}

.amt-1 .amt-2:hover:after {
  width: 100%;
}

.bg-running {
  background-color: #89d8d3;
  background-image: linear-gradient(315deg, #74b1ad 0%, #03c8a8 74%);
  border: none;
  color: #fff;
  box-shadow: 0 0 8px #727272;
}

.bg-date-end {
  background: rgb(255, 151, 0);
  background-image: linear-gradient(315deg, rgb(255, 178, 62) 0%, rgb(255, 151, 0) 74%);
  border: none;
  color: #fff;
  box-shadow: 0 0 8px #727272;
}

.bg-canceled {
  background: rgb(255, 27, 0);
  background: linear-gradient(0deg, rgb(108, 117, 125) 0%, rgb(83, 84, 85) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 0 8px #727272;
}

.bg-all {
  background: rgb(0, 172, 238);
  background: linear-gradient(0deg, rgb(0, 172, 238) 0%, rgb(2, 126, 251) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 0 8px #727272;
}

.notification {
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  width: 100%;
  border-radius: 4px;
}

.wc-note-button {
  background: linear-gradient(to right, red, purple);
  padding: 5px 30px;
  color: white;
  border: none;
  opacity: 0.7;
}

.wc-note-button:hover {
  background: linear-gradient(to right, purple, red);
}

.wc-form-card {
  position: relative;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  padding: 3px;
}

.wc-form-box {
  background-color: #fff;
}

.bg-box-lr {
  background-color: rgb(235, 235, 235);
  border-radius: 16px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  width: 70vw;
}

.lr-form-group-input {
  background-color: #fff;
  border-radius: 50px !important;
  padding: 8px 15px 8px 15px !important;
  width: 100%;
  box-sizing: border-box;
  border: none !important;
  border: 1px solid rgb(167, 167, 167) !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 400;
}

.lr-form-group-input:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #1a75a7 !important;
  outline-width: 0;
  font-weight: 400;
}

.lr-box {
  border: none;
}

.lr-box-1 {
  padding: 10px;
}

.lr-box-2 {
  border-top-left-radius: 50px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 16px;
  background-image: linear-gradient(to left, rgb(55, 53, 191), rgb(52, 51, 153));
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.lr-box-2-list {
  display: -webkit-box;
  align-items: center;
  font-size: 18px;
  margin-bottom: 4px;
}

#logo {
  width: 70px;
  height: 60px;
}

.heading {
  margin-bottom: 60px !important;
}

.user-lr .lr-form-group-input::placeholder {
  color: rgb(104, 104, 104) !important;
  opacity: 1;
}

.user-lr .lr-form-group-input:-ms-input-placeholder {
  color: rgb(104, 104, 104) !important;
}

.user-lr .lr-form-group-input::-ms-input-placeholder {
  color: rgb(104, 104, 104) !important;
}

.lr-form-group-label {
  font-size: 12px;
  margin-bottom: 0.25rem;
  padding: 0;
}

.lr-btn {
  border-radius: 50px;
  color: #fff;
  background-image: linear-gradient(to right, rgb(55, 53, 191), rgb(52, 51, 153));
  padding: 8px;
  cursor: pointer;
  border: none !important;
  margin-top: 4px;
  width: 100%;
  font-size: 20px;
}

.lr-btn-change {
  border-radius: 50px;
  color: #fff;
  background-image: linear-gradient(to left, #dbe900, #f98d00);
  padding: 8px;
  cursor: pointer;
  border: none !important;
  margin-top: 4px;
  width: 100%;
  font-size: 20px;
}

.lr-btn:hover {
  color: #fff;
  background-image: linear-gradient(to right, #1a75a7, #00b0f9);
}

.lr-btn-change:hover {
  color: #fff;
  background-image: linear-gradient(to right, #dbe900, #f98d00);
}

.lr-btn:focus {
  outline: none;
}

.bottom {
  width: 100%;
  margin-top: 50px !important;
}

.sm-text {
  font-size: 15px;
}

.user-lr .lr-to-login-link {
  color: #1977aa;
  text-decoration: none;
  border-radius: 50px;
  background-color: #fff;
  padding: 6px;
  cursor: pointer;
  border: 2px solid #1a75a7 !important;
}

.user-lr .lr-to-login-link:hover {
  color: #fff !important;
  background-image: linear-gradient(to right, #1a75a7, #00b0f9);
}

.error {
  color: red;
}

.icon-show-rePassword,
.icon-show-password {
  font-size: 18px;
  z-index: 999;
}

.box-show-pw {
  margin-left: -40px;
}

.icon-show-password:hover,
.icon-show-rePassword:hover {
  cursor: pointer;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.user-lr .social-btn {
  cursor: pointer;
  height: 46px;
  width: 46px;
  font-family: "Titillium Web", sans-serif;
  color: #333;
  border-radius: 10px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
  background: white;
  margin: 5px;
  transition: 1s;
  text-decoration: none;
  user-select: none;
}

.social-btn .social-btn-text {
  width: 0px;
  overflow: hidden;
  transition: 1s;
  text-align: center;
}

.social-btn:hover {
  width: 130px;
  border-radius: 5px;
}

.social-btn:hover .social-btn-text {
  width: max-content;
}

.social-links .social-btn-icon {
  color: #1da1f2;
  font-size: 32px;
}

.social-links .social-btn-text {
  color: #1da1f2;
}

.ad-bg-box-lr {
  background-color: rgb(235, 235, 235);
  border-radius: 16px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  width: 35rem;
}

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

.ad-detail_cust-form {
  min-width: 100%;
}

.ad-detail-cus-nav-pills {
  flex-direction: column;
}

.detail-cus-nav-link {
  width: 100%;
}

#ad-detail-cus .ad-detail-cus-input-topup {
  min-width: 175px;
  border-radius: 0.25rem;
  padding: 10px;
}

.ad-banks-form-input {
  padding: 8px;
}

.ad-banks-form-note {
  height: 66px;
}

.ad-box-providers {
  border-radius: 4px;
}

.ad-data-form-box-locations {
  height: 200px;
  overflow-y: scroll;
}

.ad-data-form-input {
  padding: 4px;
}

.ad-data-form-provider {
  width: max-content;
  padding: 6px;
}

.ad-data-form-input-locations {
  width: 20px;
  height: 20px;
}

.ad-location-form {
  box-shadow: 0 0 4px black;
  border-radius: 4px;
  flex: 0 0;
  margin: 8px;
}

.ad-location-update-group-text {
  min-width: 139px;
  padding: 0.5rem;
  background-color: #e6faff;
}

.ad-location-add-group-text {
  min-width: 139px;
  padding: 0.5rem;
  background-color: #28a745;
  color: #fff;
}

.ad-location-add-data-input {
  width: 24px;
  height: 24px;
  margin-right: 2px;
}

.ad-location-add-data-label {
  font-size: 24px;
  margin-bottom: unset;
  text-transform: uppercase;
}

.ad-os-form {
  box-shadow: 0 0 4px black;
  border-radius: 4px;
  flex: 0 0;
  margin: auto;
  max-width: 350px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.ad-os-update-group-text {
  min-width: 111px;
  padding: 0.5rem;
  background-color: #e6faff;
}

.ad-os-add-group-text {
  min-width: 111px;
  padding: 0.5rem;
  background-color: #28a745;
  color: #fff;
}

.ad-os select {
  font-size: 1.5rem;
  border-radius: 4px;
}

.ad-detail-data-card {
  box-shadow: 0 0 4px black;
  border-radius: 4px;
}

.ad-detail-data-location-text:nth-of-type(2n) {
  color: rgb(98, 0, 255) !important;
}

.ad-products-add-box select {
  width: 100%;
  padding: 4px;
  font-size: 20px;
  border-radius: 4px;
}

.ad-get-origin-product select {
  padding: 4px;
  font-size: 20px;
  border-radius: 4px;
}

@media (min-width: 1024px) {
  .d-l-none {
    display: none !important;
  }
  .col-l-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .col-l-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 740px) {
  .d-ml-none {
    display: none !important;
  }
  .col-ml-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 1023px) {
  .col-m-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-m-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 1 1 25%;
    max-width: 25%;
  }
  .col-m-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333%;
    flex: 1 1 33.3333%;
    max-width: 33.3333%;
  }
  .col-m-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .col-m-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .d-m-none {
    display: none !important;
  }
  .m-justify-content-around {
    justify-content: space-around !important;
  }
  .user-all-clouds-card-header {
    border-bottom: 1px solid white;
  }
  .user-lr .social-btn {
    width: 130px;
  }
  .social-btn .social-btn-text {
    overflow: unset;
    text-align: center;
    width: unset;
  }
}
@media (max-width: 739px) {
  .d-s-none {
    display: none !important;
  }
  .col-s-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .s-full-w {
    width: 100% !important;
  }
  .s-flex-1 {
    flex: 1 1;
  }
  .s-justify-content-around {
    justify-content: space-around !important;
  }
  .s-user-config-list-group-item {
    height: 200px;
    overflow-y: scroll;
  }
  .s-user-billing-invoices-card {
    box-shadow: 0 0 4px black;
    border-radius: 4px;
    max-width: 20rem;
    margin: auto;
  }
  .s-user-billing-new-invoices-card {
    margin: auto;
    max-width: 400px;
    box-shadow: 0 0 2px black;
  }
  .s-ad-detail-cus-nav-pills {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    justify-content: space-evenly;
    margin: 10px 0;
    padding: 5px;
    box-shadow: 0 0 5px #ababab;
    border-radius: 2px;
  }
  .detail-cus-nav-link {
    flex: 1 1;
    min-width: 140px;
    text-align: center;
  }
}
@media (max-width: 500px) {
  .col-ss-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 1 1 25%;
    max-width: 25%;
  }
  .ss-full-w {
    width: 100%;
  }
}
@media (max-width: 352px) {
  .ss-order-1 {
    order: 1;
  }
  .ss-order-2 {
    order: 2;
  }
}
.card-plan-user-welcome {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border-radius: 15px;
}

.card:hover .img-location img {
  border-color: #ffc107;
  transition: 0.7s;
}

.img-background img {
  height: 200px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 100%;
}

.img-location img {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 5px solid white;
  margin-top: -50px;
}

.text-description-datacenter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 500;
  text-align: center;
}

/* Background */
#button-installing {
  display: flex;
  align-items: center; /* Đảm bảo loader và text căn giữa theo chiều dọc */
  justify-content: flex-start; /* Đảm bảo các phần tử nằm cạnh nhau */
  gap: 10px; /* Khoảng cách giữa loader-container và text */
  position: relative;
}

.loader {
  width: 100%;
  height: 100%;
}

.loader {
  width: 20px;
  height: 20px;
}

.loader path {
  fill: #fff;
  transform-origin: center;
  animation: rotate 1.5s linear infinite;
}

.loaderreverse {
  animation-direction: reverse !important;
}

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

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