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

header {
  border-bottom: 1px solid #eee;
}

header .header {
  max-width: 1140px;
  margin: 0 auto;
  padding: 5px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
img.promo {
  position: absolute;
  max-width: 60px;
  right: 10px;
  top: 3px;
}

/* Overlay (background dimmed effect) */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999; /* Ensure it stays on top */
      visibility: hidden; /* Hidden by default */
      opacity: 0;
      transition: visibility 0s, opacity 0.3s ease-in-out;
    }

    /* Show the modal */
    .modal-overlay.active {
      visibility: visible;
      opacity: 1;
    }

    /* Modal styles */
    .modal {
      position: relative;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      max-width: 90%;
      width: 900px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      animation: fadeIn 0.3s ease-in-out;
    }

    /* Image inside the modal */
    .modal img {
      width: 100%;
      display: block;
    }

    /* Close button */
    .modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #ff5555;
      color: white;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .modal-close:hover {
      background: #ff2d2d;
    }

    /* Fade-in animation for the modal */
    @keyframes fadeIn {
      from {
        transform: scale(0.9);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
.content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 30px;
  margin-top: 25px;
  box-shadow: rgba(0, 0, 0, 6%) 0 2px 12px 0;
}

.content .km {
  margin: 15px 0px;
}

.content .list-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.content .list-card .item {
  padding: 15px 5px;
  border: 1px solid #eee;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
}

.content .list-card .item.selected {
  border-color: #face15;
}

.content .list-card .item img {
  width: 40%;
}

.content .list-xu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* flex-wrap: wrap; */
  /* justify-content: left; */
  gap: 10px;
  margin-top: 15px;
}

.content .list-xu .item {
  padding: 15px 5px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.content .list-xu .item.selected {
  border-color: #face15;
}

.content .list-xu .item .xu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0px;
}

.content .list-xu .item .xu .currency {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  margin-bottom: 3px;
}

.content .list-xu .item .xu .sl {
  justify-content: center;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
}

.mau {
  color: #face15;
}

.maudo {
  color: #fe2c55;
}

.content .list-xu .item .price {
  font-size: 90%;
  font-style: italic;
  margin-top: 3px;
  font-weight: bold;
  color: #999;
}

.content .seri-pin {
}

.content .seri-pin .input {
  padding: 5px;
  margin: 5px 0px;
}

.content .seri-pin .input input {
  width: 100%;
  padding: 13px;
  border: 1px solid #eee;
  box-sizing: border-box;
  font-size: 16px;
}

.content .button {
  margin: 5px 0px;
}

.content .button button {
  width: 100%;
  padding: 13px;
  border: none;
  font-weight: bold;
  font-size: 105%;
  border-radius: 8px;
  background-color: #fe2c55;
  cursor: pointer;
}

.content button:hover {
  background-color: #ef2950;
  color: #fff;
}

#thongbao {
  padding: 3px 5px;
  font-style: italic;
  color: #fe2c55;
  font-size: 95%;
}

#thongbao-login {
  padding: 5px 0px;
  font-style: italic;
  color: #fe2c55;
  font-size: 95%;
  margin-top: 3px;
  margin-bottom: -10px;
}

.thongbao-don {
  padding: 3px 5px;
  font-style: italic;
  color: #fe2c55;
  font-size: 95%;
}

.title {
  font-weight: bold;
  padding: 5px;
  margin-top: 10px;
}

.title-small-login {
  font-weight: bold;
  margin: 10px 0px;
}

.t-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 25px;
  color: #000;
  margin-top: 5px;
  padding: 0 5px;
}

.t-title span {
  position: relative; /* Làm cho span trở thành phần tử cha của pseudo-element */
  display: inline-block; /* Làm cho span có chiều rộng dựa trên nội dung */
}

.t-title span:after {
  content: "";
  display: block;
  margin: 0 auto;
  height: 3px;
  width: 80%;
  background-color: #fe2c55;
  position: absolute;
  left: 0%;
  bottom: -8px;
}

.username {
  font-weight: bold;
  font-size: 115%;
  margin: 5px;
  padding: 18px 15px;
  background-color: #eee;
  border-radius: 12px;
}

.clear {
  height: 50px;
}

.login-form {
}

.login-form input {
  width: 100%;
  padding: 13px;
  border: 2px solid #eee;
  box-sizing: border-box;
  font-size: 16px;
}

.login-form button {
  width: 100%;
  padding: 13px;
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 105%;
  border-radius: 2px;
  margin-top: 15px;
  background-color: #fe2c55;
}

.login-form button:hover {
  background-color: #ef2950;
}

.login {
  display: flex;
  align-items: center;
  justify-content: left;
  cursor: pointer;
  display: flex;
}

.login svg {
}

.login span {
  margin-left: 10px;
}

.login-in {
  display: flex;
}

.login-in .left {
  display: flex;
  align-items: center;
  justify-content: left;
  cursor: pointer;
  width: 100%;
}

/*.login-in .right {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: right;*/
/*    cursor: pointer;*/
/*    width: 20%;*/
/*}*/

.login-in .right a {
  color: #fe2c55;
  text-decoration: none;
  font-style: italic;
  font-size: 80%;
}

.login-in .left .avt {
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 100px;
}

.login-in .left svg {
}

.left-content {
  margin-left: 10px;
}
.infor {
  display: flex;
  margin: 0;
  gap: 15px;
  margin-top: 5px;
}
.login-in .left p {
  margin: 0;
}
.login-in .left-content > span {
  font-weight: normal;
  font-size: 14px;
}

.infor-item > span {
  font-size: 12px;
  font-weight: normal;
}

.title-login {
  font-size: 140%;
  font-weight: bold;
  margin: 30px 0px;
  text-align: center;
}

.popup-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1 !important;
}

/* Style cho nội dung của popup */
.popup-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  margin: 0px 15px;
  transform: translateY(-50px);
  width: 400px;
  z-index: 1000;
}

@media (max-width: 499px) {
  .popup-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    margin: 0px 15px;
    transform: translateY(-50px);
    width: 100%;
    z-index: 1000;
  }
}

/* Nút đóng (x) */
.close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.disabled {
  pointer-events: none; /* Ngăn tất cả sự kiện chuột */
  opacity: 0.8; /* Làm mờ nội dung để chỉ ra tính không khả dụng */
}
.thanhtoan.disabled img {
  filter: grayscale(100%);
  opacity: 0.5;
  cursor: not-allowed;
}
.disabled * {
  color: gray; /* Đặt màu sắc của tất cả phần tử con thành màu xám */
}

.btn-non-login {
  background-color: #ff97ac;
  color: #fff;
}

.btn {
  color: #fff;
  background-color: #fe2c55;
}

.dieukhoan {
  font-size: 15px;
  font-style: italic;
  color: green;
  padding: 5px;
}
.logout {
  background: #fe2c55;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
}
.logout a {
  color: white;
}

.transaction-history {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.transaction-history .container {
  max-width: 1200px;
  margin: 30px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.transaction-history h1 {
  text-align: center;
  color: #333;
  margin: 0;
  padding: 15px 0;
  font-size: 26px;
}

.balance {
    display: flex;
    align-items: center;
    gap: 3px;
}
.name_tiktok {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Loading animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.transaction-history .table-container {
  width: 100%;
  overflow-x: auto; /* Allow horizontal scrolling */
   font-size: 12px;
}

.transaction-history
  table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  min-width: 800px; /* Minimum width for table */
}

.transaction-history
  table th,
.transaction-history table td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #ddd;
}

.transaction-history
  table th {
  background-color: #d20029;
  color: #fff;
  font-weight: bold;
}

.transaction-history
  table tr:nth-child(odd) {
  background-color: antiquewhite;
}

.transaction-history
  table tr:hover {
  background-color: #f1f1f1;
}

.transaction-history .status {
  font-weight: bold;
  text-transform: capitalize;
}

.transaction-history .status.pending {
  color: #ff9800;
}

.transaction-history .status.pending .fa {
  animation: spin 1s linear infinite;
}

.transaction-history .status.success {
  color: #4caf50;
}

.transaction-history .status.error {
  color: #f44336;
};
   /* Allow horizontal scrolling */
/* Table container for horizontal scroll */
.transaction-history .table-container {
  width: 100%;
  overflow-x: auto; /* Allow horizontal scrolling */
}

.transaction-history
  table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  min-width: 800px; /* Minimum width for table */
}

.transaction-history
  table th,
.transaction-history table td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #ddd;
}

.transaction-history
  table th {
  background-color: #d20029;
  color: #fff;
  font-weight: bold;
}

.transaction-history
  table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.transaction-history
  table tr:hover {
  background-color: #f1f1f1;
}

.transaction-history .status {
  font-weight: bold;
  text-transform: capitalize;
}

.transaction-history .status.pending {
  color: #ff9800;
}

.transaction-history .status.pending .fa {
  animation: spin 1s linear infinite;
}

.transaction-history .status.success {
  color: #4caf50;
}

.transaction-history .status.error {
  color: #f44336;
};
}

.transaction-history table {
  width: 100%;
  border-collapse: separate; /* Use separate borders for better styling */
  border-spacing: 0; /* Remove default spacing for collapsed border effect */
  margin-bottom: 20px;
  min-width: 800px; /* Minimum width for table */
  background: linear-gradient(135deg, #f5f7fa, #e4e8ec); /* Light gradient background */
  border: 1px solid #ddd;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  overflow: hidden; /* Ensure rounded corners work properly */
}

.transaction-history table th,
.transaction-history table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd; /* Light border for rows */
}

.transaction-history table th {
  background: linear-gradient(135deg, #d20029, #a40020); /* Gradient header background */
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  /* font-size: 12px; */
  letter-spacing: 0.5px;
  border-bottom: 2px solid #b00025;
}

.transaction-history table tr:nth-child(even) {
  background-color: rgba(245, 247, 250, 0.5); /* Light transparent row */
}

.transaction-history table tr:hover {
  background-color: rgba(210, 32, 65, 0.1); /* Highlight row on hover */
  transition: background-color 0.3s ease;
}

.transaction-history table tr:last-child td {
  border-bottom: none; /* Remove border for the last row */
}

.transaction-history .status {
  font-weight: bold;
  text-transform: capitalize;
}

.transaction-history .status.pending {
  color: #ff9800;
}

.transaction-history .status.pending .fa {
  animation: spin 1s linear infinite;
}

.transaction-history .status.success {
  color: #4caf50;
}

.transaction-history .status.error {
  color: #f44336;
}

/* Add rounded corners for the first and last columns */
.transaction-history table th:first-child,
.transaction-history table td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.transaction-history table th:last-child,
.transaction-history table td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
 /* Table container for horizontal scroll */
.transaction-history .table-container {
    width: 100%;
    overflow-x: auto; /* Allow horizontal scrolling */
}

.transaction-history
    table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: separate; /* Use separate borders for better styling */
  border-spacing: 0; /* Remove space between cells */
   /* Minimum width for table */
  border: none; /* Remove table border */
  border-radius: 10px; /* Rounded corners */
}

.transaction-history
    table th,
.transaction-history table td {
  padding: 12px 15px;
    text-align: left;
     border: none;
}

.transaction-history
    table th {
  background-color: #d20029;
    color: #fff;
    font-weight: bold;
}

.transaction-history
    table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.transaction-history
    table tr:hover {
  background-color: #f1f1f1;
}

.transaction-history .status {
    font-weight: bold;
    text-transform: capitalize;
}

.transaction-history .status.pending {
    color: #ff9800;
}

.transaction-history .status.pending .fa {
    animation: spin 1s linear infinite;
}

.transaction-history .status.success {
    color: #4caf50;
}

.transaction-history .status.error {
    color: #f44336;
}
.xu-km {
    font-size: 12px;
    color: #ff9404;
}
/* Responsive Design: Horizontal scroll on smaller screens */
@media (max-width: 768px) {
  .transaction-history .table-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  .transaction-history table {
    min-width: 800px; /* Ensure table retains proper structure */
  }
  .login-in .left {
    flex-direction: column;
    text-align: center;
  }
  .name_tiktok {
    flex-direction: column-reverse;
    gap: 5px;
  }
  .content .list-xu .item .xu {
    margin-top: 24px;
  }
  .login-in .left .avt {
    margin-bottom: 10px;
  }
  .left-content {
    margin: 0px;
  }
  .balance {
    flex-direction: column;
  }
  .content .list-xu{
      grid-template-columns: 1fr 1fr;
  }
  .content .list-card .item img {
  width: 60%;
}
}
.swal2-html-container {
    font-size: 0.9em !important;
    !i;
    !;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

@media (max-width: 768px) {
  .content {
    padding: 10px 16px;
  }
  .infor {
    gap: 6px;
  }
  .infor-item {
    background: white;
    padding: 3px 8px;
    border-radius: 10px;
    text-align: center;
  }
  .infor-item strong {
    font-size: 15px;
  }
}