body {
    background-color: #1f2029;
    color: #C2C1C8;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');
    background-size: 50%;
    /*    justify-content: center; /* CÄƒn giá»¯a theo chiá»u ngang */
    /*    align-items: center; /* CÄƒn giá»¯a theo chiá»u dá»c */
}
.account {
    color: #ffeba7;
    font-size: 25px;
    box-shadow: 10px 10px 25px rgba(255, 235, 167, .2), -10px -10px 25px rgba(255, 235, 167, .2), 10px -10px 25px rgba(255, 235, 167, .2), -10px 10px 25px rgba(255, 235, 167, .2);
}
table {
    border-collapse: collapse;
    margin: 0 auto;
    /* ThÃªm thuá»™c tÃ­nh margin: 0 auto; */
}
.tap-ngang {
    width: 95.8%;
}
.tap-kichthuoc {
    width: 100%;
}
.sl_tr,
.sl_td,
.sl_th {
    border: 1px solid #ffeba7;
    text-align: center;
}

.sl_tr:hover {
    background-color: transparent;
    text-shadow: none;
    color: #C2C1C8;
    cursor: cell;
    font-weight: normal;

}

.n_th {
    border: 1px solid #ffeba7;
    background-color: #000000;
    box-shadow: 0 8px 24px 0 rgba(255, 235, 167, .2);
    color: #ffffff;
    font-size: 20px;
    height: 50px;
}

tr {
    color: #ffeba7;
    font-size: 20px;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

tr:hover {
    font-weight: bold;
    background-color: #ffeba7;
    box-shadow: 0 8px 24px 0 rgba(255, 235, 167, .2);
    color: #ff00aa;
    text-shadow: 2px 2px 5px #ffeba7;
    cursor: pointer;
    /*    transform: scale(1.01); /* hiá»‡u á»©ng phÃ³ng to nÃºt khi báº¥m */
}

table,
th,
td {
    border: 1px solid #ffeba7;
    text-align: center;
    padding: 5px;
}

h1,
h2,
h3,
h4,
h5 {
    text-align: center;
}

#edit-form {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 25%;
    transform: translate(-50%, -50%);
    padding: 10px 50px;
    z-index: 9999;
    color: #ffffff;
    font-weight: bold;
    background-color: #2a2b38;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');
    background-size: 50%;
    border: 1px solid #ffeba7;
    box-shadow: 10px 10px 25px rgba(255, 235, 167, .2), -10px -10px 25px rgba(255, 235, 167, .2), 10px -10px 25px rgba(255, 235, 167, .2), -10px 10px 25px rgba(255, 235, 167, .2);
    
    
}


#edit-form label {
    display: block;
    margin-top: 10px;
}

#edit-form input[type="text"],
#edit-form input[type="password"] {
    width: 95%;
    padding: 2px;
    margin-top: 5px;
}

#edit-form input[type="submit"] {
    margin-top: 10px;
}

#edit-form input[type="submit"]:hover {
    cursor: pointer;
    background-color: lightgray;
}

.close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: red;
    font-size: 30px;
    cursor: pointer;
}

.edit-button {
    color: #ffffff;
    background-color: #7061b4 !important;
    border: 1px solid #ffeba7 !important;
    font-size: 15px;
    padding: 5px 10px;
}

.edit-button:hover {
    font-weight: bold;
    color: #ffffff;
    background-color: #ff00aa !important;
    transform: scale(1.1);
    /* hiá»‡u á»©ng phÃ³ng to nÃºt khi báº¥m */
}

.edit-button:active {
    background-color: #00d5ff !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    /* Hiá»‡u á»©ng máº§u nÃºt" */
}

.no-edit {
    color: #ffeba7;
    font-size: 20px;
    float: right;  /* cÄƒn lá» pháº£i [ null ]*/
}


#search-container {
    text-align: right;
}

#search-input {
    /* CÃ¡c thuá»™c tÃ­nh hiá»‡n táº¡i cá»§a Ã´ input */
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 16px;
    width: 100%;
    border: 1px solid #ffeba7 !important;
    color: red;
    font-weight: bold;
}
#clear-input {
      /* CÃ¡c thuá»™c tÃ­nh hiá»‡n táº¡i cá»§a nÃºt tÃ¬m kiáº¿m */
      padding: 5px 10px;
      background-color: #00a2c2;
      border: none;
      color: white;
      border-radius: 5px;
      margin-right: 5px;
      cursor: pointer;
      font-size: 16px;
      border: 1px solid #ffeba7 !important;
      font-weight: bold;
}
#clear-input:hover {
    background-color: #0187a1;
}

#clear-input:active {
    background-color: #016c81;
    transform: scale(0.90);
    /* hiá»‡u á»©ng nháº¥n nÃºt thu nhá» */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    /* Hiá»‡u á»©ng máº§u nÃºt" */
}
#search-button {
    /* CÃ¡c thuá»™c tÃ­nh hiá»‡n táº¡i cá»§a nÃºt tÃ¬m kiáº¿m */
    padding: 5px 10px;
    background-color: #4CAF50;
    border: none;
    color: white;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid #ffeba7 !important;
}
#search-tong-nap {
    /* CÃ¡c thuá»™c tÃ­nh hiá»‡n táº¡i cá»§a nÃºt tÃ¬m kiáº¿m */
    padding: 5px 10px;
    background-color: #7061b4;
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid #ffeba7 !important;
    width: 100%;
}

#search-button:hover {
    background-color: #409244;
}

#search-button:active {
    background-color: #367c38;
    transform: scale(0.90);
    /* hiá»‡u á»©ng nháº¥n nÃºt thu nhá» */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    /* Hiá»‡u á»©ng máº§u nÃºt" */
}

#edit-lienket {
    /* CÃ¡c thuá»™c tÃ­nh hiá»‡n táº¡i cá»§a nÃºt táº£i láº¡i trang */
    padding: 10px 10px;
    background-color: #f44336;
    border: none;
    color: white;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid #ffeba7 !important;
}

#edit-lienket:hover {
    background-color: #d32f2f;
}

#edit-lienket:active {
    background-color: #b71c1c;
    transform: scale(0.90);
    /* hiá»‡u á»©ng nháº¥n nÃºt thu nhá» */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    /* Hiá»‡u á»©ng máº§u nÃºt" */
}

#search-button,
#edit-lienket,
#clear-input {
    /* CÃ¡c thuá»™c tÃ­nh hiá»‡n táº¡i cá»§a nÃºt tÃ¬m kiáº¿m vÃ  nÃºt táº£i láº¡i trang */
    width: 120px;
    /* Äáº·t kÃ­ch thÆ°á»›c mong muá»‘n cho cáº£ hai nÃºt */
}

.card-top {
    display: block;
    width: 95%;
    background-color: #2a2b38;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');
    background-size: 50%;
    border: 5px solid #ffeba7;
    box-shadow: 10px 10px 25px rgba(255, 235, 167, .2), -10px -10px 25px rgba(255, 235, 167, .2), 10px -10px 25px rgba(255, 235, 167, .2), -10px 10px 25px rgba(255, 235, 167, .2);
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    /* Cáº­p nháº­t thuá»™c tÃ­nh Ä‘á»ƒ trÃ´i ná»•i trÃªn mÃ n hÃ¬nh */
    position: fixed;
    /*    top: 50%; */
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 6%;
}

#edit-kichhoat,
#edit-exp,
#edit-xu,
#edit-xuBox,
#edit-yen,
#edit-name,
#edit-level {
    width: 95%;
    padding: 10px;
    color: rgb(255, 0, 128);
    font-size: 15px;
    background-color: #1f2029 !important;
}
/* Äá»‹nh dáº¡ng pháº§n tá»­ input */
/* Äá»‹nh dáº¡ng mÅ©i tÃªn chá»‰ lÃªn, xuá»‘ng */
.input-arrow::-webkit-inner-spin-button,
.input-arrow::-webkit-outer-spin-button {
    height: 40px;
    /* Äáº·t kÃ­ch thÆ°á»›c chiá»u cao cá»§a mÅ©i tÃªn chá»‰ lÃªn */
}


.edit-capnhat {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    background-color: #ffeba7;
    text-decoration: none;
    border-radius: 3px;
    color: #2A2B38;
    width: 100%;
    text-align: middle;
    text-weight: bold;
    font-size: 20px;
    border-radius: 8px;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.edit-capnhat:hover {
    transform: scale(1.01);
    /* PhÃ³ng to nÃºt lÃªn 110% khi hover */
    font-weight: bold;
    background-color: #ff00aa !important;
    color: #ffffff;
    box-shadow: 10px 10px 25px rgba(255, 235, 167, .2), -10px -10px 25px rgba(255, 235, 167, .2), 10px -10px 25px rgba(255, 235, 167, .2), -10px 10px 25px rgba(255, 235, 167, .2);
}

.edit-capnhat:active {
    font-weight: bold;
    background-color: #00d5ff !important;
    color: #ffffff;
    text-shadow: 2px 2px 5px #7b7b83;
    box-shadow: 0 8px 24px 0 rgba(16, 39, 112, .2);
}
#title {
    display: inline;
    text-align: center;
  }
  
  #tit {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: #ffeba7;
    text-shadow: -10px 8px 24px rgba(255,235,167,.2), 5px 5px 8px black;
    box-shadow: 10px 10px 25px rgba(255, 235, 167, .2), -10px -10px 25px rgba(255, 235, 167, .2), 10px -10px 25px rgba(255, 235, 167, .2), -10px 10px 25px rgba(255, 235, 167, .2);
  }
  
  .swal2-styled.swal2-cancel {
    border: 0;
    border-radius: 0.25em;
    background: initial;
    background-color: #ff00aa;
    color: #fff;
    font-size: 1em;
}
@media screen and (max-width: 500px) {
    .n_th {
        font-size: 15px;
    }
}
