:root {
    --primary-one-color: #870000;
    --primary-two-color: #870000;
    --bg-charity: #8e24aa;
    --bg-cash-wallet: #1de9b6;
    --bg-consumer-wallet: #66bb6a;
    --bg-income-wallet: #536dfe;
    --bg-profitable-wallet: #ff4081;
}

.logo-custom {
    position: absolute;
    top: 20px;
    left: 20px;
}

.q-avatar {
    width: 100%;
    height: 1.5em;
    border-radius: 0;
}

.q-drawer--left.q-drawer--bordered {
    box-shadow: 0 25px 35px #0000002e;
    border-right: none;
}

.nav-custom .q-item {
    border-radius: 0 30px 30px 0;
}

.nav-custom .q-item.q-router-link--active {
    background-color: var(--primary-two-color, #162f56);
    background-image: linear-gradient(90deg, #527ae7 0, #0643eb 90%);
    color: #ffffff;

}

.nav-custom .q-item:hover {
    background-color: var(--primary-one-color, rgba(15, 36, 223, 0.1));
}

.q-layout__section--marginal {
    background-color: var(--primary-two-color, #162f56);
    background-image: linear-gradient(90deg, #527ae7 0, #0643eb 90%);
}

.q-scrollarea {
    height: calc(100% - 121px) !important;
    margin-top: 120px !important;
    padding-top: 20px;
    border-top: 1px solid hsla(0, 0%, 56%, .15) !important;
}

.card-item-custom {
    height: 91%;
    background-color: var(--primary-two-color, #162f56) !important;
    background-image: linear-gradient(90deg, #527ae7 0, #0643eb 90%) !important;
}

.card-item-custom.charity {
    background-color: var(--bg-charity, #4a148c) !important;
    background-image: linear-gradient(90deg, var(--bg-charity) 0, #4a148c 90%) !important;
}

.card-item-custom.cash-wallet {
    background-color: var(--bg-cash-wallet, #00bfa5) !important;
    background-image: linear-gradient(90deg, var(--bg-cash-wallet) 0, #00bfa5 90%) !important;
}

.card-item-custom.consumer-wallet {

    background-color: var(--bg-consumer-wallet, #1b5e20) !important;
    background-image: linear-gradient(90deg, var(--bg-consumer-wallet) 0, #1b5e20 90%) !important;
}

.card-item-custom.income-wallet {

    background-color: var(--bg-income-wallet, #304ffe) !important;
    background-image: linear-gradient(90deg, var(--bg-income-wallet) 0, #304ffe 90%) !important;
}

.card-item-custom.profitable-wallet {
    background-color: var(--bg-profitable-wallet, #c51162) !important;
    background-image: linear-gradient(90deg, var(--bg-profitable-wallet) 0, #c51162 90%) !important;
}

.fillter-custom {
    gap: 10px;
}

.fillter-custom .q-field--outlined .q-field__control {
    /* background-color: var(--primary-two-color, #162f56) !important;
    background-image: linear-gradient(90deg, #527ae7 0, #0643eb 90%) !important; */
    height: 40px;
    min-height: 40px;
}

.fillter-custom .q-field--outlined .q-field__control .q-field__append {
    height: 40px;
}

.fillter-custom .q-field--outlined .q-field__control .q-field__control-container .q-field__native {
    background-color: #ffffff00;
    border: none;
    min-height: 40px;
}

.fillter-custom .q-field--outlined .q-field__control .q-field__control-container .q-field__native:focus {
    box-shadow: none;
}

.fillter-custom .q-field--outlined .q-field__control .q-field__input {
    background-color: #ffffff00;
    border: none;
    min-height: 30px;
}

.fillter-custom .q-field--outlined .q-field__control .q-field__input:focus {
    box-shadow: none;
}

.fillter-custom .q-field--outlined .q-field__control .q-field__label {
    top: 10px;
    color: #ffffff;
}

.custom-input .q-field--filled .q-field__control {
    background-color: var(--primary-two-color, #162f56) !important;
    background-image: linear-gradient(90deg, #527ae7 0, #0643eb 90%) !important;
}

.custom-input input[type=color], .custom-input input[type=date], .custom-input input[type=datetime-local], .custom-input input[type=datetime], .custom-input input[type=email], .custom-input input[type=month], .custom-input input[type=number], .custom-input input[type=password], .custom-input input[type=search], .custom-input input[type=tel], .custom-input input[type=text], .custom-input input[type=time], .custom-input input[type=url], .custom-input input[type=week], .custom-input select, .custom-input textarea {
    background-color: #ffffff00;
    border: none;
    padding-left: 0;
    /* color: #ffffff; */
}

.custom-input input[type=checkbox]:focus,.custom-input input[type=color]:focus,.custom-input input[type=date]:focus,.custom-input input[type=datetime-local]:focus,.custom-input input[type=datetime]:focus,.custom-input input[type=email]:focus,.custom-input input[type=month]:focus,.custom-input input[type=number]:focus,.custom-input input[type=password]:focus,.custom-input input[type=radio]:focus,.custom-input input[type=search]:focus,.custom-input input[type=tel]:focus,.custom-input input[type=text]:focus,.custom-input input[type=time]:focus,.custom-input input[type=url]:focus,.custom-input input[type=week]:focus,.custom-input select:focus,.custom-input textarea:focus {
    box-shadow: none;
}

.custom-input .q-field--auto-height .q-field__control, .q-field--auto-height .q-field__native {
    min-height: 40px !important;
}

.custom-input .q-field__control {
    height: 40px !important;
}

.custom-input .q-field__marginal {
    height: 40px !important;
}
.my-card-package{
    width: 100%;
    max-width: 545px;
    padding: 10px;
}  
.card-package{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 300px;
    border-color: #527ae7;
}

.card-package:hover {
    cursor: pointer;
    box-shadow: 0 4px 8px #eb060694, 0 6px 20px #e7525200 !important;
    transform: scale(1.03);
}

.current-color{
    color: #527ae7;
}

.mx-datepicker {
    background-color: #cfcfcf !important;
}

.mx-table-date .cell.not-current-month {
    color: #000000;
}

.mx-calendar-content .cell.in-range, .mx-calendar-content .cell.hover-in-range {
    color: #000000;
    background-color: #3e6dd163;
}

.mx-calendar-content .cell.active {
    background-color: var(--primary-two-color);
}

.statistical-custom .card-item {
    height: 91%;
} 

.page-login-custom {
    
    height: 100vh;
    display: grid;
    

}

.card-login{
    border-radius: 25px!important;
}
.page-login-custom .card-item {
    box-shadow: 0 4px 8px #d4af3794, 0 6px 20px #ffd70033;
    background: #ffffff;
    max-width: 450px;
    padding: 30px 20px;
}

.page-login-custom .card-item .text-h6 {
    font-size: 30px;
    color: #162f56;
}


.page-login-custom .card-item .link-register {
    color: var(--primary-two-color, #162f56) !important;
}

.profile-list-level{
    display: flex;
    flex-direction: column-reverse;
}

.rank-achieve {
    text-align: center;
}
.rank-container {
    display: flex;
    justify-content: center;        
}

.rank-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rank-image:hover {
    transform: scale(1.1);  
}

.rank-name {
    font-weight: bold;
    margin-top: 10px;
    font-size: 12px;
}

.tooltip-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
}

.tooltip-success {
    color: #28a745;
    font-weight: bold;
}
.rank-disabled {
    filter: grayscale(100%);
    opacity: 0.6;
}
.requirement-met {
    color: #28a745; /* Màu xanh lá khi đạt */
    font-weight: bold;
}

.requirement-met::before {
    content: "✔ "; /* Dấu check */
    color: #28a745;
    font-size: 1.2em;
}

#payos-container iframe{
    z-index: 10000 !important;
 }
 

 .button-container {
    display: flex;
    justify-content: center; /* Center buttons horizontally */
    gap: 10px; /* Optional: adds space between the buttons */
    margin-bottom: 10px !important;
  }
  
  
  
  
/* Long custom */
/* Button default style */

.table-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.pagination-container {
    display: flex;
    justify-content: center; /* Center the pagination */
    width: 100%;
    margin-top: 10px; /* Add space between the table and pagination */
}


.scroll-view-sc {
    display: block;
    overflow-y: auto;
    max-height: 300px; /* Adjust based on your table height */
}

.fixed-header thead {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}


.custom-table th, .custom-table td {
    /*border: none !important;   Remove table borders */
    text-align: center; /* Center text in both header and body */
}


/* custom transaction button  padding: 20px 48px;*/
.custombutton {
  background-color: #000fdb;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 40px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.custombutton span {
  font-size: 15px;
  font-weight: bold;
}

.custombutton::before,
.custombutton::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  z-index: -1;
  background-color: #535fff;
  transition: all 0.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.custombutton::after {
  right: -30px;
  transform: translateX(30px) translateY(-110px) rotate(30deg);
}

.custombutton::before {
  left: -20px;
  transform: translateX(-10px) translateY(50px) rotate(30deg);
}

.custombutton:hover::before {
  transform: rotate(30deg) translateY(10px) translateX(-15px);
}

.custombutton:hover::after {
  transform: rotate(30deg) translateY(-70px) translateX(-30px);
}

.custombutton:hover {
  animation: wobel 0.3s ease-in-out;
}

@keyframes wobel {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.1);
  }

  60% {
    transform: scale(1.05);
  }

  80% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(1);
  }
}


/* spacing for input box */ 
.no-spacing {
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 20px !important;
} 

.no-spacing-content{
    
    margin-top: 0 !important;
    padding-bottom: 15px !important;
}



/* custom transfer method btn */

.c-button {
  color: black; /* Text color initially set to white */
  font-weight: bold;
  font-size: 12px; /* Reduced font size */
  text-decoration: none;
  padding: 0.25em 0.5em; /* Reduced padding */
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  background-color: #ffffff; /* Background color of button */
  border: none;
  overflow: hidden;
}

/* Ensure text is white even on hover */
.c-button:hover {
  color: #ffffff !important; /* Force text color to white */
}

.c-button--gooey {
  color: black;
  letter-spacing: 2px;
  border-radius: 0;
  position: relative;
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs {
  height: 100%;
  filter: url(#goo);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -3px;
  right: -1px;
  z-index: -1;
}

.c-button--gooey .c-button__blobs div {
  background-color: #06c8d9;
  width: 34%; /* Reduced width of blobs */
  height: 100%;
  border-radius: 100%;
  position: absolute;
  transform: scale(1.2) translateY(-125%) translateZ(0);
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs div:nth-child(1) {
  left: -5%;
}

.c-button--gooey .c-button__blobs div:nth-child(2) {
  left: 30%;
  transition-delay: 60ms;
}

.c-button--gooey .c-button__blobs div:nth-child(3) {
  left: 66%;
  transition-delay: 25ms;
}

/* Hover styles */
.c-button--gooey:hover {
  color: #ffffff !important; /* Force text color to white on hover */
  background-color: #ffffff;
}

.c-button--gooey:hover .c-button__blobs div {
  transform: scale(1.4) translateY(0) translateZ(0);
}



@media (max-width: 768px) {
    .order-chart-container,
    .traffic-chart-container {
      display: none;
    }
  
    .link_affiliate {
      display: none;
    }
  
    /* Dialog card size adjustments for smaller screens */
    .custom-transaction-card {
      width: 90%;
      height: auto;
      max-width: 400px;
    }
  }
  
  /* Default dialog size and styling for larger screens */
  .custom-transaction-card {
    background-color: #faf0e6;
    /*background-image: url('https://suckhoeantamviet.net/wp-content/uploads/2025/02/transaction_bkg_2.png'); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
    width: 350px;
    height: 630px;
  }

  .btntransactioncard {
    cursor: pointer;
    position: relative;
    padding: 7px 20px;
    font-size: 17px;
    color: white;
    border: black;
    border-radius: 17px;
    background-color: black;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
}

.btntransactioncard::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: #AEEA94;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.btntransactioncard:hover::before {
    scale: 1;
}

.btntransactioncard:hover {
    color: black;
    border: #AEEA94;
    scale: 1.1;
    box-shadow: 0 0px 10px #FFFBCA;
}

.button:active {
    scale: 1;
}

.consumer-discount {
    font-size: 18px; 
    font-weight: bold;
    color: #ff6600;
    background: #fff4e5;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
}


.copy-affiliate-link-btn {
    background-color: #ff6600;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.copy-affiliate-link-btn:hover {
    background-color: #cc5200;
}

#copySuccessMessage {
    font-size: 14px;
    margin-left: 10px;
    font-weight: bold;
}



.swiper {
    width: 85%;
    height: 215px;
    max-width: 340px;
    max-height: 215px;
    border-radius:36px;
    
}

.swiper-slide {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  width: 85%;
  height: 215px;
  max-height: 215px;
  border-radius:30px;
}

.wallet-no-swiper {
    max-width: 340px;
    max-height: 215px;
    overflow: hidden;
    padding: 0;
}


.custom-wallet-cardname {
position: absolute;
font-weight: bold;
top: 1em;
left:1em;
}

.custom-wallet-id {
position: absolute;
font-weight: bold;
top: 5.5em;
left:1em;
}

.custom-logo-wallet{
position: absolute;
width:60px;
height: 60px;
top: 1em;
left:12em;
opacity: 0.8;
}

.custom-wallet-cardnumber {
position: absolute;
font-weight: bold;
top:2.8em;
left:1em;
}


.custom-card-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    border-radius:16px;
    background-color: #0059e7;
    color:white;
}



.custom-header {
    background-color: white;
    color: #151d24;
}
.swiper-slide:nth-child(1n) {
    background-color: rgb(0, 140, 255);
}

.swiper-slide:nth-child(2n) {
  background-color: rgb(0, 140, 255);
}

.swiper-slide:nth-child(3n) {
  background-color: rgb(10, 184, 111);
}

.swiper-slide:nth-child(4n) {
  background-color: rgb(211, 122, 7);
}

.swiper-slide:nth-child(5n) {
  background-color: rgb(118, 163, 12);
}

.swiper-slide:nth-child(6n) {
  background-color: rgb(180, 10, 47);
}

.swiper-slide:nth-child(7n) {
  background-color: rgb(35, 99, 19);
}

.swiper-slide:nth-child(8n) {
  background-color: rgb(0, 68, 255);
}

.swiper-slide:nth-child(9n) {
  background-color: rgb(218, 12, 218);
}

.swiper-slide:nth-child(10n) {
  background-color: rgb(54, 94, 77);
}






.walletBalanceCard {
  width: fit-content;
  height: 55px;
  background-color: #1c1f2f;
  border-radius: 20px 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0px 12px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 15px;
}

.walletBalanceCardPC {
  width: fit-content;
  height: 55px;
  background-color: #1c1f2f;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0px 12px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 15px;
}
.svgwrapper {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svgwrapper svg {
  width: 100%;
}
.balancewrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  
  width: auto;
  gap: 0px;
}
.balanceHeading {
  font-size: 10px;
  color: rgb(214, 214, 214);
  font-weight: 150;
  letter-spacing: 0.6px;
}
.balance {
  font-size: 16px;
  color: white;
  font-weight: 700;
  letter-spacing: 0.5px;
}


.custom-transaction-box{
    margin:10px; 
    border-radius:15px; 
    margin-bottom:7px; 
    padding:10px; 
    padding-bottom:0px; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


.custom-sale-card {
  background-color: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-width: 320px;
  border-radius: 20px;
  gap:0px !important;
  margin-top:20px !important;
  padding:15px;
}


.custom-dash-card{
    border-radius:25px; 
    margin:10px ; 
    padding:10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.custom-level-card {
  background-color: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  gap:0px !important;
  margin-top:20px !important;
  margin:10px;
  padding-top:30px;
  line-height:0; 
  display: flex; 
  flex-direction: column;
}

.currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;  /* Adjust size */
    height: 30px; /* Adjust size */
    background-color: #10b981;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border-radius: 50%; /* Makes it a circle */
}

.title {
  display: flex;
  align-items: center;
}


.title span {
  position: relative;
  padding: 0.1rem;
  background-color: #10B981;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
}

.title span svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  height: 1rem;
}

.title-text {
  margin-left: 0.5rem;
  color: #374151;
  font-size: 14px;
}


.data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.data p {
  color: #1F2937;
  font-size: 1.5rem;
  line-height: 1rem;
  font-weight: 700;
  text-align: left;
}

.data .range {
  position: relative;
  background-color: #E5E7EB;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
}

.data .range .fill {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #10B981;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
}






.package-card {
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 2rem;
  width: 320px;
  flex-direction: column;
  border-radius: 1rem;
  background-color: #020617;
  padding: 1.5rem;
}

.package-title {
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 700;
  color: #f8fafc90;
}

.package-price {
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 700;
  color: #f8fafc;
}

.package-desc {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.625;
  text-wrap: pretty;
  color: #f8fafc90;
}

.package-lists {
  margin-bottom: 1.5rem;
  flex: 1 1 0%;
  color: #f8fafc90;
}

.package-lists .list {
  margin-bottom: 0.5rem;
  display: flex;
  margin-left: 0.5rem;
}

.package-lists .list svg {
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
  color: #0ea5e9;
}

.custom-scroll-area {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    display: block;
    max-width: 100%;
}

.custom-profile{
    width: 120px;
    height: 120px; 
    border-radius:100%;
}

.my-slide-button-container { /* Đổi tên */
  width: 100%;
  max-width: 720px;
}

.my-slide-track {
  position: relative;
  width: 100%;
  height: 60px;
  background: #ccc;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 0;
}

.my-slide-track::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* Đưa về sát đáy track */
  height: 100%; /* Để nó trùng với chiều cao của track */
  width: var(--progress, 0%);
  background: #4caf50;
  border-radius: 25px;
  transition: width 0.1s ease-out;
  z-index: 0; /* Đảm bảo nó nằm dưới thumb */
}

.my-slide-thumb {
  position: absolute;
  width: 60px;
  height: 60px;
  background: white;
  margin-left: -50px;
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: left 0.1s ease-out;
  z-index: 1; /* Thumb nằm trên progress bar */
}
.my-slide-text {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  
}


.error {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: fit-content;
  max-width: 90%;
  padding: 12px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* ← Đổi từ start sang center */
  background: #FCE8DB;
  border-radius: 8px;
  box-shadow: 0px 0px 5px -3px #111;
  margin: 0 auto; /* ← Căn giữa ngang */
}

.error__icon {
  width: 20px;
  height: 20px;
  transform: translateY(-2px);
  margin-right: 8px;
}

.error__icon path {
  fill: #EF665B;
}

.error__title {
  font-weight: 500;
  font-size: 14px;
  color: #71192F;
}

.error__close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: auto;
}

.error__close path {
  fill: #71192F;
}

.q-stepper {
  box-shadow: none !important;
  border: none !important;
}

.card-package {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.package-title {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
}

.package-price {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
}

.package-desc {
  font-size: clamp(12px, 2.5vw, 16px);
}