/* Nút cảnh báo (Warning Button) */
.btn.btn-warning {
    color: #ffc107 !important;
    background-color: #fff7df;
    text-align: center;
    border-radius: 99px;
    font-size: 90%;
    padding: 4px;
    width: 100%;
}
p.flatsome_after_account_user {
    margin-top: 10px;
    margin-bottom: 0px !important;
    padding-bottom: 0px;
}

.nav-vertical.nav-line>li.is-active a { color: #ef3713 !important; }   .nav-vertical.nav-line>li>a:before { background-color: #ef3713; }
.btn.btn-success {
    color: #134e4a !important;
    background-color: #ccfbf1;
    text-align: center;
    border-radius: 99px;
    font-size: 90%;
    padding: 4px;
    width: 100%;
}

.btn.btn-danger {
    color: #dc3545 !important;
    background-color: #ffbcc3;
    text-align: center;
    border-radius: 99px;
    font-size: 90%;
    padding: 4px;
    width: 100%;
}

        .wallet-transaction-history {
            width: 100%;
            border-collapse: collapse;
        }
        .wallet-transaction-history th,
        .wallet-transaction-history td {
            border: 1px solid #ddd;
            padding: 8px !important;
            text-align: center;
        }
        .wallet-transaction-history th {
            background-color: #f4f4f4;
        }

         .user-top-up-history {
            width: 100%;
            border-collapse: collapse;
        }
        .user-top-up-history th,
        .user-top-up-history td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        .user-top-up-history th {
            background-color: #f4f4f4;
        }

        .table-woocommerce-account-my tbody { font-size: 90%; }

.my-account-header.page-title.normal-title { background-color: unset; border: unset; }  .my-account-header * { color: #fff; }

.page-wrapper.my-account.mb p,.page-wrapper.my-account.mb a,.page-wrapper.my-account.mb span ,.page-wrapper.my-account.mb label{
    color: #fff;
}

.user-top-up-card-history span {
    color: #666 !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

span.text-pin {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  color: #fff !important;
  background-color: #3498db !important;
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 3px solid #2980b9 !important;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin: 2px 0;
}

span.text-serial {
  font-family: 'Consolas', monospace;
  font-weight: 500;
  color: #fff !important;
  background-color: #27ae60 !important;
  padding: 3px 6px;
  border-radius: 3px;
  border-bottom: 2px solid #219653 !important;
  letter-spacing: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-block;
  margin: 2px 4px;
}


span.text-pin {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  color: #fff;
  background-color: #3498db;
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 3px solid #2980b9;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin: 2px 4px 2px 0;
  white-space: nowrap;
}

span.text-serial {
  font-family: 'Consolas', monospace;
  font-weight: 500;
  color: #fff;
  background-color: #27ae60;
  padding: 3px 6px;
  border-radius: 3px;
  border-bottom: 2px solid #219653;
  letter-spacing: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-block;
  margin: 2px 0 2px 4px;
  white-space: nowrap;
}

/* Media query đảm bảo hiển thị ngang trên thiết bị di động */
@media (max-width: 768px) {
  span.text-pin, 
  span.text-serial {
    display: inline-block;
    width: auto;
    float: none;
    clear: none;
  }
  
 
}






.text-type {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
}


.text-success {
    background-color: #d7f5ea !important;
    color: #0c6e47 !important;
}


.text-danger {
    background-color: #fde9ea !important;
    color: #d63638 !important;
}