#index-section {
    background-image: url('/images/giftcode/giftcode.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}
#index-section::-webkit-scrollbar {
    display: none;
}
#menu-right-section, #nav-section {
    color: #000;
}
.header-wrapper, .header-wrapper a{
    color: #fff;
}
.token-info, .token-info-history, .token-info-packages {
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05); /* Giảm độ mờ để trong suốt hơn, giống gương */
    box-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.2), /* Bóng nhẹ để tạo chiều sâu */
      inset 0 0 10px rgba(255, 255, 255, 0.5); /* Hiệu ứng sáng bóng bên trong */
    backdrop-filter: blur(3px); /* Tăng độ mờ để giống gương hơn */
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.6); /* Viền sáng hơn, tạo cảm giác phản chiếu */
    outline: 1px solid rgba(255, 255, 255, 0.8); /* Thêm outline sáng để tăng hiệu ứng gương */
}
.token-info-history, .token-info-packages {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}
.token-info-packages-items {
    background: #fd7e141c;
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3), inset 0 0 10px rgba(253, 126, 20, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(253, 126, 20, 0.6);
    outline: 1px solid rgba(253, 126, 20, 0.8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin: 10px;
    gap: 20px;
}
.package-image img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.package-info {
    padding: 10px;
}
.package-buy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, sans-serif;
}
.package-buy span {
    color: #ffc107;
    font-size: 20px;
    font-weight: 700;
}
.select-package {
    background: #fd7e14c7;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
table {
    color: #ffffffbd !important;
}
code {
    font-weight: 700;
    font-size: 100%;
}
.col-6.col-xl-4 {
    padding: 0;
}
.stat-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
.stat-card i {
    position: absolute;
    bottom: 10px;
    right: 10px;  /* Đặt icon ở góc dưới bên phải */
    font-size: 44px;  /* Phóng to icon */
    color: rgba(255, 255, 255, 0.3);  /* Màu icon nhẹ */
}
.transaction-list {
    width: 100%;
}
hr {
    border-top: 2px solid rgb(255 255 255 / 10%);
}
.transaction-detail code {
    font-family: Arial, sans-serif;
}
.best-seller{
    position: absolute;
    top: -10px;
    right: -10px;
}
.best-seller img {
    width: 70px;
}
.hot-deal {
    position: absolute;
    top: -10px;
    right: 10px;
}
.hot-deal img {
    width: 110px;
}
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.payment-method {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}
.pay-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.pay-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
}
.pay-list img {
    width: 120px;
}
.pay-finish {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}
.pay-finish h5 {
    margin: 0;
}
.pay-finish span {
    color: #dc3545;
    font-size: 20px;
    font-weight: 700;
}
@media (max-width: 767px) {
    .package-buy span {
        font-size: 14px;
    }
    .package-buy i {
        font-size: 14px;
    }
}
@media (max-width: 1024px) {
    .stat-number {
        font-size: 16px;
    }
}
.stat-number {
    font-size: 22px;
    font-weight: bold;
    color: #ffc107;
    font-family: Arial, sans-serif;
}
.stat-number span {
    font-size: 16px;
    color: #fd7e14;
}
.custom-divider {
    padding: 30px 0;
}
.back-token{
    border: 1px solid #ccc;
    margin: 5px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.home-token {
    margin: 5px;
    height: 30px;
    width: 30px;
}
.pay-items {
    position: absolute;
    top: 0px;
    right: 0;
    font-size: 14px;
    font-weight: 700;
    height: 24px;
    background: #fd7e1461;
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3), inset 0 0 10px rgba(253, 126, 20, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(253, 126, 20, 0.6);
    outline: 1px solid rgba(253, 126, 20, 0.8);
    border-radius: 0 5px;
    display: flex;
    align-items: center;
    padding: 2px;
}
.pay-items img {
    width: 30px;
}