* {
    margin: 0;
    padding: 0;
}
.background{
    /* background-color: #F8F8F8 !important; */
    background-image: linear-gradient(rgba(249, 250, 251, 1), rgb(255 255 255));
    position: absolute;
    width: 100vw;
    height: 100vh;
    
}
.container-fluid{
    --bs-gutter-x: 2.5rem !important;
    padding: 0px 16px !important;
    letter-spacing: 0px !important;
}
.menu-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 5px;

    flex: none;
    order: 0;
    flex-grow: 0;
}
.scroller .detaCover:last-child > .cover{
   
    /* background-color: #000000; */
    /* margin-right: 40px; */
    width: 10px;
    /* margin-right: 10px; */
    border: 1px solid #fff0;
    pointer-events: none;
  }
  .id0{
    width: 3px !important;
}
  .scroller .detaCover:first-child {
    /* background-color: #000000; */
    padding-left: 16px;
  }
.scrollerMenu > li:first-child{
    margin-left: 16px;
}
.scrollerMenu:last-child{
    margin-right: 40px;
}
.scroller {
    text-align: left;
    width: 100vw;
    height: auto;
    overflow-x: scroll;
    display: flex;
    box-sizing: border-box;
    border: none;
    /* border-radius: 20px; */
    scroll-snap-type: x mandatory;
    gap:16px;
  }
  .scroller > .cover {
    flex: 0 0 auto;
    /* width: 100%; */
    /* background-color: #663399; */
    color: #000;
    border-radius: 20px;
    border: 1px solid var(--grey-300, #E5E7EB);
    display: flex;
    width: 290px; 
    align-items: flex-start;
    scroll-snap-align: end;
  }

.headTab{
    font-family: Anuphan;
    font-weight: 500;
    line-height: 18px;
    border-radius: 50px;
    border: 1px solid var(--grey-300, #E5E7EB);
    display: flex;
    height: 31px;
    padding: 12px 16px;
    align-items: center;
    color: var(--grey-900, #111827);
    margin: 5px;
    }
.scrollmenu {
    text-align: left;
    width: 100vw;
    /* height: 20px; */
    overflow-x: scroll;
    display: flex;
    box-sizing: border-box;
    /* border: 1px solid #000; */
    scroll-snap-type: x mandatory;
  }
li>.nav-link {
    /* flex: 0 0 250px; */
  width: 100%;
  /* background-color: #663399; */
  /* color: #fff; */
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
  }
  .nav-item{
    line-height: 18px;
  }
  .dateDue{
    font-family: 'Anuphan';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    color: var(--based-white, #FFF);
  }
.richMenu .icon {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-size: 100% !important;
    display: inline-block;
    border-radius: 50%;
    /* opacity: .7; */
}
.menu-block.router-link-exact-active .icon + .text-danger {
    opacity: 1;
}
.menu-block.router-link-exact-active .icon {
    box-shadow: 0 5px 20px rgb(0 0 0 / 20%);
    margin-top: 0;
    opacity: 1;
}
.icon.promotionMenu {
    background: url('../img/tcp/MenuPromotion.png') ;
}

.icon.activityMenu {
    background: url('../img/tcp/MenuActivity.png');
}

.icon.surveyMenu {
    background: url('../img/tcp/MenuSurvey.png');
}


.img,
.next {
    display: block;
    margin: auto;
}

.snpcard {
    background: #dcdcdc;
    padding: 8px 5px;
}


.back {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
    position: absolute;
}

.back i {
    padding-left: 31%;
    padding-top: 50%;
}

.bg-img {
    background-color: #dcdcdc;
    border-radius: 15px 15px 15px 15px;
    padding: 15px;
}

.otp {
    margin-top: 10px;
    margin-left: 30px;
    width: 100%;
}

.codeOtp {
    width: 70%;
    margin-left: 15%;
}

.cardDetail {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}
.member-detail {
    font-size: 14px;
    color: #505050;
}
.card-link {
    text-decoration: none
}
.point-label {
    font-size:16px;
    color: #505050;
}
.big {
    font-size: 35px;
}
.bigPoint{
    font-size: 32px;
}

.qr {
    width: 50%;
}
.qr-full {
    width: 100%;
}
.claim{
    display: flex;
/* width: 375px;*/
height: 100vh; 
padding: 24px 16px 50px 16px;
flex-direction: column;
align-items: center;
gap: 18px;
flex-shrink: 0;
border-radius: 30px 30px 0px 0px;
box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.05);
}

.edit{
    width: 80%;
    margin-left: 10%;
}

.cencel{
    width: 100%;
    text-align: center;
}

.score{
    margin-top: 20px;
    padding: 20px;
    border-radius: 20px;
    box-shadow:  0 5px 20px rgba(0,0,0,.2);
    color: #505050;
    position: relative;
    text-align: left;
}
.score.not-active {
    background: #E4E4E4;
}
.score + .score {
    margin-top: 20px;
}
.dPoint {
    padding: 0 !important;
    
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 11px;
align-self: stretch;
}
.iPoint{
    background-color: #dcdcdc;
    border-radius: 15px;
}
/* .iPoint img {
    max-width: 100%;
} */

.iPoint i{
    margin-top: 30px;
    font-size: 75px;
}

.rPoint{
    padding-bottom: 0;
    padding-right: 0;
    margin-bottom: 0;
    margin-right: 0;
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 100px;
    font-size: 14px;
}
.point-head {
    font-size: 16px;
    /* margin-top: 5px; */
}
.point-sub-head b {
    font-size: 14px;
}
.point-sub-head-2 {
    /* Body-2/medium */
    font-size: 14px;
    font-family: Anuphan-Bold;
    font-style: normal;
    /* font-weight: 600; */
    line-height: 18px;

}
.tab-content{
    /* display: flex; */
    /* width: 375px; */
    /* height: 358px; */
    /* padding: 24px 16px 50px 16px; */
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
/* 
.row {
    margin: 10px;
} */

.section-title {
    font-size: 24px;
    margin: 30px 0 20px;
    display: block;
}
.pl-0 {
    padding-left: 0 !important;
}
.pr-0 {
    padding-right: 0 !important;
}
/**** Radio CSS ****/
.form-check-input {
    height: 24px !important;
    width: 24px !important;
}
.cond .form-check-input[type=checkbox]{
    border-radius:100% !important;
}
.form-check-input:checked {
    background-color: #E12F2E !important;
    border-color: #E12F2E !important;
}
.form-switch .form-check-input {
    width: 42px !important;
}
.custom-radios div {
    display: inline-block;
}
.custom-radios input[type=radio]+label span {
    background-color: #E12F2E;
    background-color: #FFFFFF;
    border: 2px solid #BAB8B8;
}

.custom-radios input[type=radio]:checked+label span {
    background-color: #E12F2E;
    border: 0;
}
.custom-radios input[type=radio]:checked+label span img {
    opacity: 1;
}
/**** Radio CSS ****/
.custom-radios div {
    display: inline-block;
}

.custom-radios input[type=radio] {
    display: none;
}

.custom-radios input[type=radio]+label {
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.custom-radios input[type=radio]+label span {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    line-height: 24px;
}

.custom-radios input[type=radio]+label span img {
    opacity: 0;
    transition: all 0.3s ease;
    width: 14px;
}

.custom-radios input[type=radio]:checked+label span img {
    opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

hr {
    border: 0 ;
    border-bottom: 1px solid #E5E7EB ;
}

.btn-danger {
    background-color: #E12F2E !important;
}
.btn-default {
    color: #E12F2E !important;
}
input[type="text"], input[type="number"] {

    font-size: 16px;
    width: 311px;
    font-family: 'Anuphan';
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}
input:read-only {
  background-color: #F9FAFB;
}

input::placeholder { /* Firefox 18- */
    font-size: 16px;
}

.row-content {
    padding: 0 15px;
}
.row-content.with-back {
    padding: 50px 25px 0;
}
.member-data-row .btn {
    margin: 0;
}
.member-data-row .row-label {
    color: #505050;
}
.member-card {
    font-size: 11px;
}
.btn.point-reload {
    width: 100px;
    font-size: 12px;
    padding: 3px 10px 3px 5px;
    margin: 15px 0 10px;
    color: #BAB8B8;
    border: 1px solid #BAB8B8;
}
/**** Radio CSS ****/
.custom-radios div {
    display: inline-block;
}

.custom-radios input[type=radio] {
    display: none;
}

.custom-radios input[type=radio]+label {
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.custom-radios input[type=radio]+label span {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    line-height: 24px;
}

.custom-radios input[type=radio]+label span img {
    opacity: 0;
    transition: all 0.3s ease;
    width: 14px;
}

.custom-radios input[type=radio]:checked+label span img {
    opacity: 1;
}

.error {
    color: #ff0000;
    /* margin-top: 3px; */
    font-size: 12px;
    display: flex;
    align-items: center;
    gap:4px;
}
/* .error label{
            padding: 4px 4px 3px 4px;
    } */

.modal-header button {
    border: none;
    background: none;
    font-size: 30px;
    line-height: 16px;
}
.use,.unuse,.barCode{
    padding: 20px;
}

.use{
    margin: auto;
    padding-left: 80px;
    background-color: #E12F2E;
    color: #fff;
    border-radius: 50px 50px 50px 50px;
    position: absolute;
}

.unuse{
    margin: auto;
    padding-left: 230px;
    background-color: #dcdcdc;
    border-radius: 50px 50px 50px 50px;
    z-index: -1;
    color: #A9A9A9;
}
.barCode{
    padding-left: 20px;
    padding-left: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.activerichMenu{
    width: 90%;
    background: #E12F2E;
    border-radius: 50px 50px 50px 50px;
    position: relative;
    color: #fff;
    margin-top: 5px;
}

.notActive{
    width: 80%;
    background: #dcdcdc;
    border-radius: 50px 50px 50px 50px;
    position: absolute;
}

.imgQr img,.imgBar img{
    height: 100px;
}

.imgQr{
    padding-left: 35%;
    margin-top: 20px;
}

.imgBar{
    margin-top: 20px;
    text-align: center;
}

.bg-c0c0c0{
    background-color: #C0C0C0;
}
.online{
    margin-top: 20px;
    margin-left: 5%;
    padding-left: 10px;
    padding-top: 20px;
    border-radius: 20px;
    width: 90%;
    box-shadow:  0 5px 20px rgba(0,0,0,.2);
}

.warn{
    margin-top: 20px;
    padding: 10px;
    border: 2px solid #E12F2E;
    border-radius: 20px;
}
.promotion{
    box-sizing: border-box;

    /* Auto layout */

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    gap: 12px;
    width: 92vw;
    height: 165px;
    margin: 0px !important;
    /* Grey/300 */

    border: 1px solid #E5E7EB;
    border-radius: 18px;

}
.promotionImg{
    width: 145px;
    height: 145px;
    border-radius: 8px;

    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.warn .b-icon.bi{
    font-size: 30px;
    margin-left: 10px;
    margin-top: 10px;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.extI{
    width: 150px;
    height: 150px;
    background: #dcdcdc;
    border-radius: 100%;
}

.extI i{
    font-size: 75px;
    padding-left: 25%;
    padding-top: 50%;
}

.ext{
    margin-top: 25%;
    margin-left: 35%;
}
.activeBar{
    background: #E12F2E;
    border-radius: 50px 50px 50px 50px;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 165px;
    position: absolute;
    padding-top: 15px;
    padding-bottom: 15px;
}

.notActiveBar{
    background: #dcdcdc;
    margin-left: 20px;
    border-radius: 50px 50px 50px 50px;
    z-index: -1;
    color: #A9A9A9;
    padding-top: 20px;
    padding-bottom: 20px;
}

.close{
    margin-left: -15px;
}

.activeQr{
    background: #E12F2E;
    border-radius: 50px 50px 50px 50px;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 25px;
    position: absolute;
    padding-top: 15px;
    padding-bottom: 15px;
}

.notActiveQr{
    background: #dcdcdc;
    margin-left: 20px;
    border-radius: 50px 50px 50px 50px;
    z-index: -1;
    color: #A9A9A9;
    padding-top: 20px;
    padding-bottom: 20px;
}

.imgSoon{
    margin-top: 110px !important;
    text-align: center;
}

.imgSoon img{
    width: 100px;
    height: 100px;
    margin-bottom: 30px;
}

.priSoon{
    margin-left: 90px;
    font-size: 20px;
}


/**** Modal CSS ****/
.phoneError,.redeem,.threemonth{
    width: 80% !important;
    margin-top: 15%;
    margin-left: 10%;
    border-radius: 25px !important;

}
.promotion-modal {
    width: 80% !important;
    max-width: 400px;
    margin: 10% auto;
    border-radius: 25px !important;
}
.bodyPhoneError,.redeemQr,.threeBody{
    text-align: center;
}

.redeemQr{
    padding-bottom: 20px;
}
.redeemQr img {
    margin: 0 auto;
}
.confirm-cencel{
    text-align: center;
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.inline-btn button {
    width: 40%;
    display: inline-block;
    margin: 10px 0;
}

/**** Tabs CSS ****/
.promotion .nav-link{
    width: 150px;
    text-align: center;
    color: #A9A9A9 !important;
    padding: 12px 0;
    border-radius: 50px !important;
}

.promotion .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: #E12F2E !important;
    border-radius: 50px;
    color: #fff !important;
}

.promotion .nav {
    background-color: #dcdcdc;
    border-radius: 50px;
    text-align: center !important;
    width: 300px !important;
    margin: 0 auto;
}

.qrCode .nav-link{
    width: 106px;
    text-align: center;
    color: #A9A9A9 !important;
    border-radius: 50px !important;
    line-height: 18px;
}

.qrCode .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: #E12F2E !important;
    border-radius: 50px;
    color: #fff !important;
}

.qrCode .nav {
    background-color: #dcdcdc;
    border-radius: 50px;
    width: 220px;
    margin: 0 auto;
    border: 3px solid #dcdcdc;
}
.qrCode .nav li {
    width: 50%;
}
.warning-modal-text {
    font-size: 20px;
    color: #505050;
}

.point-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.content-loading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 60vh;
    justify-content: center;
}

.list,.reward{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 16px 50px 16px;
    gap: 24px;
    width: 100% !important;
    background: #FFFFFF;
    box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.05);
    border-radius: 30px 30px 0px 0px;
}
.listSlide{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0px 50px 0px;
    gap: 24px;
    width: 100% !important;
    background: #FFFFFF;
    box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.05);
    border-radius: 30px 30px 0px 0px;
}
/* #g4{
    margin-right: 30px;
} */
#g1{
    margin-left: 16px;
}
/* #g4{
    margin-right: 5px;
} */
#g5{
    border: none;
    padding: 5px;
    pointer-events: none;
}
li#g5 .active{
    background-color: #fff0;
} 

.richMenu{
  text-align: center;
  width: 75%;
}
.memuRich{
    gap: 10px;
}

.newS ,.newSPromotion {
    /* Auto layout */
    display: flex;
    padding: 4px 8px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    border-radius: 30px;
    background: var(--gradient-gold, linear-gradient(225deg, #F9E7A9 0%, #F6BA13 100%));
    font-size: 12px !important;
    font-family: Anuphan-Bold;
    /* font-weight: 600; */
    line-height: 16px;
    /* width: 50px; */
    color: var(--primary-red-bold, #151f6d);
}
.newSPromotion{
    position: absolute;
    display: flex;
    margin-bottom: 80px;
    margin-left: 50px;
}
.newSDetail{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 8px;

    position: absolute;

    width: 50px;
    height: 24px;
    right: 4px;
    top: 0px;

/* Gradient/Gold */

    background: linear-gradient(237.8deg, #F9E7A9 1.99%, #F6BA13 102.79%);
    border-radius: 4px;
}
.newAct{
 color: var(--primary-red-bold, #151f6d);
 display: flex;
 padding: 4px 8px;
 justify-content: flex-start;
 align-items: center;
 gap: 10px;
 border-radius: 30px;
 background: var(--gradient-gold, linear-gradient(225deg, #F9E7A9 0%, #F6BA13 100%));
 font-size: 12px !important;
 font-family: Anuphan-Bold;
 line-height: 16px;
 margin-left: 210px;
 margin-bottom: -40px;
 line-height: 16px;
 z-index: 9;
}

.accept b {
    margin: 0;
  }
  
  .accept {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 70% !important;
  }
  .acceptDes{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100% !important;
  }
  .title{
    width: 80% !important;
  }
  .acceptReword{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 30% !important;
  }
  .nameShopName{
    display: flex;
  align-items: center;
  gap: 19px;
  }
.newSDetail p{
    position: absolute;
    top: 3px;
    width: 35px;
    height: 18px;
    font-family: Anuphan-Bold;
    /* font-weight: 500; */
    font-size: 12px;
    line-height: 18px;
    color: #151f6d;
}
.promotion {
    display: flex;
    align-items: center;
    /* padding: 0px !important; */
}
.detailNone{
    color: var(--grey-400, #9CA3AF);

    /* Body-1/medium */
    font-size: 16px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
}
.promotion .proEmpty{
    width: 189px;
    /* margin: 0px 70px; */
}
.seeMore .btn, .seeMore .btn:active{
    /* margin: 24px 35% 0; */
    width: 105px;
    height: 32px;
    background: #151f6d !important;
    border: 1px solid #151f6d !important;
    color: #FFFFFF;
    border-radius: 50px;
    padding: 0;

}
.arrow{
    width: 24px;
    height: 24px;
}
.bgHrader{
    /* position: absolute; */
    width: 100%;
    height: 274px;
    left: calc(50% - 375px/2);
    top: 77px;

    /* Gradient/Red */

    background: linear-gradient(237.8deg, #FFf 1.99%, #151f6d 102.79%);
}
.banner{
    width: 100%;
    border-radius: 8px;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}
.headerDetail{
    display: flex;
    align-items: center;
    padding: 16px 18px 17px;
    justify-content: space-between;
}
.circle{
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    border-radius: 43px;
    background: #FFF;
    display: flex;
    align-items:center;
  }
  .divCircle{
    display: flex;
     align-items:center;
     padding: 11px;

  }
  .nameClaim{
    /* margin: auto;   */
   /* width: 50%;  */
   margin-top: 60px;
  }
.nameClaim h5{
    color: var(--primary-red-bold, #151f6d);
    /* h5/bold */
    font-size: 20px;
    font-family: Anuphan-bold;
    /* font-weight: 700; */
    line-height: 24px;
    margin: 0;
}
.detail{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: -webkit-fill-available;
}
.time{
    display: flex;
    width: -webkit-fill-available;
    padding: 13px 16px;
    border-radius: 18px;
    border: 1px solid var(--grey-300, #E5E7EB);
    /* display: flex; */
    align-items: baseline;
    /* padding: 16px 18px 17px; */
    justify-content: space-between;
}
.headTime{
    color: var(--grey-500, #6B7280);
    /* h6/bold */
    font-size: 16px;
    font-family: Anuphan-bold;
    /* font-weight: 700; */
    line-height: 22px;
    /* position: absolute;
    top:70px; */
    text-align:left; 
    width:100px; 
    height:auto;  
    float:left;
    padding-top: 0;
}
.itemOne h6{
    color: var(--primary-red-bold, #151f6d);

    /* Body-1/medium */
    font-family: Anuphan-bold;
    font-size: 16px;
    font-style: normal;
    /* font-weight: 500; */
    line-height: 22px; /* 137.5% */
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.itemOne{
    border-radius: 30px;
background: var(--gradient-gold, linear-gradient(225deg, #F9E7A9 0%, #F6BA13 100%));
}
.itemTwo h6{
    color: var(--based-white, #FFF);
    /* Body-1/medium */
    font-family: Anuphan-bold;
    font-size: 16px;
    font-style: normal;
    margin: 0;
    /* font-weight: 500; */
    line-height: 22px; /* 137.5% */
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.itemTwo{
    border-radius: 30px;
    background: var(--primary-red-bold, #151f6d);
}
.itemThree h6{
    color: var(--based-white, #FFF);

    /* Body-1/medium */
    font-family: Anuphan-bold;
    font-size: 16px;
    font-style: normal;
    /* font-weight: 500; */
    line-height: 22px; /* 137.5% */
    margin: 0;
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.itemThree{
    border-radius: 30px;
background: var(--grey-400, #9CA3AF);
}
.detailItem{
    border: 1px solid var(--grey-300, #E5E7EB);
    width: -webkit-fill-available;
    padding: 13px 16px;
    border-radius: 18px;
    /* border: 1px solid var(--grey-300, #E5E7EB); */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}
.timeItem{
    display: flex;
    width: -webkit-fill-available;
    align-items: baseline;
    /* padding: 16px 18px 17px; */
    justify-content: space-between;
}
.listName{
    width: 100%;
    
}
.dItem{
    display: flex;
align-items: flex-start;
gap: 9px;
align-self: stretch;
}
.nameItem h6 ,.nameItem p{
    margin: 0;
}
.nameItem p{
    color: var(--primary-red-bold, #151f6d);
    /* Body-2/medium */
    font-family: Anuphan;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
}
.detailTime{
    display: flex;
    flex-direction: column;
    align-self: stretch;
    color: var(--grey-900, #111827);
    text-align: right;

    /* h6/medium */
    font-size: 16px;
    font-family: Anuphan-bold;
    
    line-height: 22px;
}
.viewAward p{
    color: var(--primary-red-bold, #151f6d);

    /* Caption/medium */
    font-family: Anuphan;
    font-size: 12px;
    font-style: normal;
    line-height: 16px; /* 133.333% */
    margin: 0;
}
.detailTimeDate{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-self: stretch;
    color: var(--primary-red-bold, #151f6d);
    text-align: right;

    /* Body-2/medium */
    font-size: 14px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 18px;
}
.detailPro{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 22px;
    width: 92%;
    margin-left: 16px;
    margin-right: 16px;
    position: absolute;
    top: 84px;
    padding-bottom: 85px;

}
.headDetail{
    color: #fff;
    display: flex;
    /* width: 273px; */
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}
.containerLucky{
    width: 100%;
}
.wrapLucky{
    display: flex;
    /* padding-left: 16px;
    padding-right: 16px; */
    /* top: 191px; */
    /* padding: 0 16px; */
    width: 100vw;
    height: 100vh;
    background: linear-gradient(190.97deg, #fff 1.13%, #151f6d 88.25%);
}
.headerIcon{
    position: absolute;
    top:16px;
    left: 16px;;
}
.lucky{
    display: flex;
width: 100vw;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3px;
color: var(--based-white, #FFF);
}
.errorlo{
    height: 100vh;
    border-radius: initial !important;
    
}
.maintenace{
    width: 100%;
    height: auto;

}
.gap36{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}
.errorDiv{
    width: 100%;
    padding: 0 16px;
    position: absolute;
    top: calc(40%/2);
    /* left:  calc(50% - 375px/2); */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    text-align: center;
    }
    .left{
        top: calc(40%/2);
        left:0
    }
    .inter{
        text-align: center !important;
    }
   
    .interP p{
        color: var(--based-black, #000);
text-align: center;

/* Body-2/medium */
font-family: Anuphan;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
margin: 0;
width: 80%;
margin-left: 10%;
    }
    .internet h5{
        color: var(--primary-red-medium, #151f6d);
        text-align: center;
        
        /* h5/bold */
        font-family: Anuphan-bold;
        font-size: 20px;
        font-style: normal;
        /* font-weight: 700; */
        line-height: 24px; /* 120% */
        margin: 0;
    }
    .gap7Error{
        display: flex;
flex-direction: column;
/* align-items: flex-start; */
gap: 7px;
    }
    .sorry p{
        color: var(--based-black, #000);
text-align: center;

/* Body-2/medium */
font-family: Anuphan-bold;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
margin: 0;
    }
.contentLucky{
    position: absolute;
    top: calc(15%/2);
    /* bottom: 296px; */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
}


.activeCho {
    opacity: 0.4;
  }
.imgLucky{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    padding: 0 16px 0 16px;
}

.sendLucky{
    width: 100%;
}
.sendLucky .btn{
    color: var(--based-white, #FFF);
    /* h6/medium */
    font-size: 16px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: -webkit-fill-available;
    margin: 0 16px;
    padding: 12px;
    border-radius: 50px;
    background: var(--primary-red-medium, #151f6d);
    border: 1px solid #151f6d;

}
.sendSurvey{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}


.textAtea{
    color: var(--fg-3, #A6A6A6);

/* Caption/medium */
font-family: Anuphan;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 133.333% */
}
.answerText{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.return .btn{
    position: absolute;
    bottom: 55px;
    left: 16px;
    width: 40%;
    border-radius: 50px;
    border: 1px solid var(--grey-900, #111827);
    background: var(--based-white, #FFF);
    color: var(--grey-900, #111827);
    padding: 12px;
}
.sendBtnSurvey .btn{
    position: absolute;
    right: 16px;
    bottom: 55px;
    width: 40%;
    border-radius: 50px;
    background: var(--primary-red-medium, #151f6d);
    border: 1px solid #151f6d;
    padding: 12px;
}
.sendSurvey b{
    color: var(--black, #000);
    /* Body-2/bold */
    font-size: 14px;
    font-family: Anuphan-bold;
    /* font-weight: 700; */
    line-height: 18px;
}
.questNo{
    color: var(--black, #000);
/* Body-2/bold */
font-size: 14px;
font-family: Anuphan-bold;
/* font-weight: 700; */
line-height: 18px;
}
.quest{
    display: flex;
/* width: 339px; */
/* width: 100%; */
flex-direction: column;
    color: var(--black, #000);
/* h6/medium */
font-size: 16px;
font-family: Anuphan;
font-weight: 500;
line-height: 22px;
margin-bottom: 21px;
}
.gap17{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    width: 100%;
}
.col10{
    padding-right: 0 !important;
    width: 86% !important;
}
.col2{
    display: flex;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: end;
    width: 7% !important;
}
.textBox{
    width: 100%;
}
.bar{
    width: 100%;
}
.answer{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.listSurvey{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 16px 50px 16px;
    gap: 24px;

    width: 100% !important;

    /* Based/White */

    background: #FFFFFF;
    box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.05);
    border-radius: 30px 30px 0px 0px;

    position: absolute;
    right: 0px;
    left: 0px;
}
.contenParty{
    display: flex;
    padding: 35px 16px;
    flex-direction: column;
    align-items: center;
    gap: 23px;
}
.dateLucky p{
    margin-bottom: 0 !important;
    color: var(--based-black, #000);
text-align: center;
/* Body-2/medium */
font-size: 14px;
font-family: Anuphan;
font-weight: 500;
line-height: 18px;
}
.headerLucky h5{
    color: var(--primary-red-medium, #151f6d);
/* h5/bold */
font-size: 20px;
font-family: Anuphan-bold;
/* font-weight: 700; */
line-height: 24px;
margin: 0px;
}
.party img{
    display: flex;
    width: 175px;
    height: 175px;
    /* padding: 0px 0px 14.667px 0px; */
    justify-content: center;
    align-items: center;
}
.gap12{
    display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.gap14{
    display: flex;
    align-items: center;
    gap: 14px;
}
.gap5{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.gap4{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.gap9{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
width: 100%;
}
.gapAuto{
    padding: 0px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0 !important;
    align-self: stretch;
}
.modal-content{
    border-radius: 30px !important;
    width: -webkit-fill-available;
    margin: 0 8px;
}
.iconSeed{
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 2px solid #fff;
}
.wrapSurvey{
    border-radius: 30px;
    background: var(--grey-50, #F9FAFB);
}
.percent{
    position: absolute;
    top: 77px;
    left: 16px;
    right: 16px;
    /* width: 90vw; */
}
.a{
    display: flex;
    /* padding: 12px 20px; */
    justify-content: center;
    align-items: center;
    /* gap: 4px; */
    /* flex: 1 0 0; */
    /* align-self: stretch; */
    border-radius: 8px;
    background: var(--primary-red-bold, #151f6d);
    width: 44px;
    height: 44px;
    /* align-items: flex-start; */
    flex-shrink: 0;
}
.b{
    display: flex;
    /* padding: 12px 20px; */
    justify-content: center;
    align-items: center;
    /* gap: 4px; */
    /* flex: 1 0 0; */
    /* align-self: stretch; */
    border-radius: 8px;

    border: 2px solid var(--grey-500, #6B7280);
    width: 44px;
    height: 44px;
    /* align-items: flex-start; */
    flex-shrink: 0;
}
.a p{
    color: var(--text-white, #FFF);
    text-align: center;

    /* Body/Medium */
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 0;
}
.b p{
    color: var(--text-black, #000);
text-align: center;
/* Body/Medium */
font-size: 16px;
/* font-family: FC Sound; */
font-weight: 500;
line-height: 24px;
margin-bottom: 0;
}
.yes ,.no{
    display: flex;
    align-items: center;
}
.yes p,.no p{

    color: var(--text-black, #000);
    /* text-align: center; */

    /* Body/Medium */
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 0;
}
.gaps{
    gap: 16px;
}
.gap16{
    display: flex;
    /* width: 339px; */
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.detailPromotion h6 ,.conditionPromotion h6 {

    /* Body-2/bold */
    /* font-family: "Anuphan-Bold"; */
    /* font-style: normal; */
    font-size: 18px;
    line-height: 18px;
    color: #000000;
}
.detailPromotion p,.conditionPromotion p,.ppp p{
    margin-top: 9px;
    /* width: 339px; */
    font-family: 'Anuphan';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 0;
    color: #000000;
}
.divider{
    border-bottom: 1px solid #E5E7EB;
    width: 100%;
}
.iconAsset{
    width: 51px;
    height: 51px;
    border-radius: 100%;

}
.iconFrame{
    width: 43px;
    height: 43px;
    position: absolute;
    top:4px;
    right: 12px;
}
.iconAF{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    /* gap: 280px; */
    position: absolute;
    width: 95vw;
    height: 51px;
    left: 20px;
    top: 16px;
    right: 12px;

}
.qr-render{
    height: 107px !important
}
.qr-render img {
    margin: 25px auto 0;
}
.qr-render,.barcode-render {
    margin-top: 25px;
    text-align: center;
}
.barcode-render svg {
    width: 210px !important;
    height: 107px !important;
}
.container-fluid .b-sidebar-body {
    padding: 25px 13px;
    position: relative;
}
.container-with-logo {
    padding: 0 25px;
}
/**** Condition CSS ****/
.condition{
    margin-left: -20px !important;
    padding-top: 5px;
    color: #505050;
    font-size: 14px;
}
.force-condition {
    color: #505050;
    font-size: 14px;
}
.custom-form-label {
    margin-bottom: 3px;
}

.barcode-full svg {
    width: 160px !important;
    height: 90px !important;
}
.consent-content a {
    display: inline;
}
/**** load page ****/

.wrap {
    display: flex;
    width: 100vw;
    height: 100vh;
    /* left: 0px; */
    background: linear-gradient(190.97deg, #fff 1.13%, #151f6d 88.25%);
}
.imgSess img{
    position: absolute;
    width: 120px;
    height: 120px;
    left: calc(50% - 120px/2 - 0.5px);
    top: calc(50% - 120px/2);
}
.login{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
    gap: 30px;
    position: absolute;
    /* width: 90vw; */
    /* height: 456px; */
    left: calc(50% - 343px/2);
    top: calc(50% - 456px/2 + 0.5px);
    background: #FFFFFF;
    border-radius: 30px;
}

.propertyOn{
    position: absolute;
    width: 18px;
    height: 16px;
    /* top: calc(50% - 16px/2 + 0.5px);  */
    right: 30px;
    z-index: 2; 
}
.refShow{
    font-size: 12px;
    height: 16px;
    /* display: flex; */
    width: 100%;
}
.refCode{
    width: 100%;
    color: #111827;
    /* position: absolute;
    left: 5px; */
    font-size: 12px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 16px;
}
.setOTP{
    width: 100%;
    color: #6B7280;
    padding-right: 0px !important;
    padding-left: 0px !important;
    text-align: center;
    /* position: fixed;
    right: 0; */
    font-size: 12px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 16px;
}
.refCode div,.setOTP div{
    margin: 0;
}
.refTime{
    display: flex;
    flex-direction: column;
    /* align-items: center;
    padding: 0px; */
    gap: 11px;
}

.comfirmOTP img {
    display: block;
    margin: auto;
}
.comfirmOTP{
    background: #FFFFFF;
    padding: 40px 16px;
    border-radius: 30px;
    position: absolute;
    left: calc(50% - 343px/2);
    top: calc(50% - 456px/2 + 0.5px);
}
.sendOTP .btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    width: 311px;
    height: 46px;
    /* Primary/Red-Medium */
    background: #151f6d ;
    border-radius: 50px;
    border: 1px solid #151f6d;
    justify-content: center;
}
.sendOTP .btn:hover{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    width: 311px;
    height: 46px;
    /* Primary/Red-Medium */
    background: #151f6d ;
    border-radius: 50px;
    border: 1px solid #151f6d;
    justify-content: center;
}
.shopName,.numPhone{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.shopName img{
    width: 22px;
    height: 22px;
    /* Inside auto layout */
    position: absolute;
    /* left: 8.38%;
    right: 9.38%;
    top: 55.25%;
    bottom: 17.71%; */
}
.proHead,.surMake{
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.surMake{
position: absolute;
left: -16px;
height: 500px;

}
.listSur{
    height: 80vh;
    /* border-radius: 29px; */
    background: var(--primary-colors-white, #FFF);

    /* Reward-Card */
    box-shadow: 0px 0px 13px 0px rgba(75, 75, 75, 0.05);
    border-radius: 30px 30px 0 0 ;
    padding: 40px 16px 0 16px;
}
.numPhone img{
    width: 22px;
    height: 22px;
    position: absolute;
    
}
.input-field{
    width: 100%;
    padding:12px 12px 12px 42px !important;
}
.field-hints-otp{
    font-size: 12px;

}

.memberCard{
    /* margin: 10px; */
    /* margin-top: 28px; */
    border: none !important;
    background-color: transparent !important;
    width: 100vw;
    padding: 0 16px;
    /* padding-bottom: 0px;
     padding-top: 0px; */
}

.otpForm{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 11px;
    width: 311px;
    height: 137px;
    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
}
.rowEllip{
    width: 100%;
    height: 72px;
    /* gap: 119px; */
}
.ellip{
    position: absolute;
    /* display: absolute; */
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 119px;
    width: 72px;
    height: 72px;
  /* Inside auto layout */
}
.ellip img{
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    isolation: isolate;
    width: 72px;
    height: 72px;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}
.nameShop,.code{
    color: #fff;
}
.dateStart{
    color: #151f6d;
}
.code{
    color:  #fff;

/* Body-2/medium */
font-size: 14px;
font-family: Anuphan;
font-weight: 500;
line-height: 18px;
}
.nameShop{
    /* width: 136px; */
    height: 24px;
    margin-bottom: 0px;
}
.dateStart{
    /* position: absolute;
    bottom: 45px; */
    font-size: 12px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 16px;
}
 .richMenuRectangle{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* padding: 0px 16px; */
    gap: 116px;

    position: absolute;
    width: 343px;
    height: 456px;
    left: calc(50% - 343px/2);
    top: calc(50% - 456px/2 + 0.5px);
    background: #FFFFFF;
    border-radius: 30px;
  }
  .login img ,.comfirmOTP img{
    width: 106px;
    height: 106px;

  }
  .icon-img{
    width: 22px;
    height: 22px;
  }

  .cardInput{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 18px;

  }
.nameShopDetail{
    box-sizing: border-box;
    gap: 15px;
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 30px;
}
.nameDetail{
    gap: 24px;
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 16px; */
    width: 100%;

}
.record{
    gap: 15px;
}
.record .btn{
    color: var(--primary-red-bold, #151f6d);
    /* Body-1/medium */
    font-size: 16px;
    font-family: Anuphan-bold;
    /* font-weight: 500; */
    line-height: 22px;
    text-decoration: none;
}

.iconName img{
    width: 72px;
    height: 72px;
}
.scanCoupon .btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    width: 80vw;
    background: #151f6d;
    border: 1px solid #151f6d;
    border-radius: 50px;
}
.makeSue{
    width: 100%;
}
.makeSue .btn{
    color: var(--based-white, #FFF);
    /* h6/medium */
    font-size: 16px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    padding: 12px;
    border-radius: 50px;
    background: var(--primary-red-medium, #151f6d);
    border: 1px solid #151f6d;

}
.nameShopname {
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 19px;
}
.gap19{
    display: block;
    gap: 19px;
}
.cardEnd{
    margin-right: 30px;
    padding-right: 30px;
}
.fontItem{

    font-size: 14px;
font-family: Anuphan;
font-weight: 500;
line-height: 18px;
color: var(--grey-900, #111827);
}

.font{
    color: var(--grey-900, #111827);
    /* Body-2/medium */
    font-family: Anuphan;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}
.backAct{
    position: absolute;
    left: 16px;
    top: 25px;
}
.backAct .btn{
    border-radius: 50px;
background: var(--primary-red-medium, #151f6d);
border: 1px solid #151f6d;
}
.permissions{

/* h6/bold */

font-family: 'Anuphan-bold';
font-style: normal;
/* font-weight: 700; */
font-size: 16px;
line-height: 22px;
/* identical to box height, or 138% */
margin-bottom: 0;

/* Primary/Red-Medium */

color: #151f6d;

}
.nameShopDetail b{
    font-family: 'Anuphan';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 22px;
/* identical to box height, or 138% */


/* Primary/Red-Bold */

color: #151f6d;
}
  .otpForm{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 11px;
    width: 311px;
    height: 137px;
    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
  }
  .edit img{
    position: absolute;
    width: 24px;
    height: 24px;
    left: 70px;
    top: 65px;

    /* Inside auto layout */

    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
  }

 .moeda{
    width: 30.57px;
    height: 30px;

    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
 }
 .footerMoeda{
    position: absolute;
    bottom: 0;
    width: 90%;
    height: 2rem;
    padding: 0;
 }
 .footer{
    position: absolute;
    bottom: 10px;
    width: 90%;
    height: 2rem;
    padding: 0;
 }
 .dateExpire{
    display: flex;
    flex-direction: column;
    align-self: stretch;
 }
 .moeda{
    width: 30.57px;
    height: 30px;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
 }
 .cover{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
    /* width: 286px; */
    height: auto;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
 }
 .cover:nth-last-child{
    margin-right: 25px;
 }
 .timeOut .btn{
    font-family: 'Anuphan-Bold';
    font-size: 14px;
    font-style: normal;
    line-height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 4px 4px 10px;
    /* width: 73%; */
    /* Primary/Red-Medium */
    /* padding: 4px ; */
    border-radius: 50px;
    border: 1px solid #D9D9D9;
    margin: 0;
    gap: 4px;
    background: var(--success-300, #D9D9D9);
    /* color: #000; */
 }
.done .btn{
    font-family: 'Anuphan-Bold';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 4px 4px 10px;
    /* width: 73%; */
    /* Primary/Red-Medium */
    /* padding: 4px ; */
   
    border-radius: 50px;
    border: 1px solid #ECFDF5;
    margin: 0;
    display: flex;
padding: 4px 10px;
justify-content: center;
align-items: center;
gap: 4px;

background: var(--success-300, #ECFDF5);
color: var(--success-400, #34D399);

/* Body-2/medium */
font-family: Anuphan;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
}
 .coverDetail h6{
    /* h6/medium */

    font-family: 'Anuphan';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    height:35px;
    /* or 138% */


    /* Black */

    color: #000000;


    /* Inside auto layout */

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
 }
 .coverDetail b{

    width: 266px;
    height: 18px;

    /* Body-2/medium */

    font-family: 'Anuphan';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    /* identical to box height, or 129% */


    /* Primary/Red-Medium */

    color: #151f6d;


    /* Inside auto layout */

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
 }
 .coverDetail p{

    width: 266px;
    height: 36px;
    margin: 0;
    /* Body-2/medium */

    font-family: 'Anuphan';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    /* or 129% */


    /* Grey/500 */

    color: #6B7280;


    /* Inside auto layout */

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
 }
 .gap12detail .data ,.gap9 .data {   
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical;
        width: 100% !important; 
        white-space: nowrap;    
 }
 /* .coverDetail .data h1, .coverDetail .data h2,.coverDetail .data h3,.coverDetail .data h4 .coverDetail .data h5,  .coverDetail .data h6{
    font-size: 14px !important;
 }
 .coverDetail .accept h1, .coverDetail .accept h2,.coverDetail .accept h3,.coverDetail .accept h4 .coverDetail .accept h5,  .coverDetail .accept h6{
    font-size: 14px !important;
 } */
 .coverImg{
    /* position: absolute; */
    width: 100%;
    height: 148.96px;
    left: 10px;
    top: 10px;
    border-radius: 16px;
    /* margin: 10px; */
 }
 .check .btn{
    font-family: 'Anuphan-Bold';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 4px 4px 10px;
    /* width: 73%; */
    /* Primary/Red-Medium */
    /* padding: 4px ; */
    background: #151f6d;
    border-radius: 50px;
    border: 1px solid #151f6d;
    margin: 0;
 }
 .luckyWin h5{
    color: var(--primary-red-bold, #151f6d);

/* h5/bold */
font-family: Anuphan-bold;
font-size: 20px;
font-style: normal;
margin: 0;
line-height: 24px; /* 120% */
 }
 .detailLucky{
    display: flex;

padding: 24px 16px 50px 16px;
flex-direction: column;
align-items: center;
gap: 18px;
 }
 .gap12detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
  }
 .coverData{
    display: flex;
    padding: 10px 10px 18px 10px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 75vw;
    /* margin-right: 25px; */
 }

 .checkSurvey .btn{
    font-family: 'Anuphan-Bold';
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 4px 4px 4px 10px;
    /* width: 45%; */
    /* Primary/Red-Medium */
    /* padding: 4px ; */
    background: #151f6d;
    border-radius: 50px;
    border: 1px solid #151f6d;
    margin: 0;
 }
.memberData h5{
    margin: 0;
}
 .point b{
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #151f6d;
    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
 }
 .numPoint .btn{
    color: #151f6d;
    float:right;
    color: var(--primary-red-bold, #151f6d);
    text-decoration: none;
    /* Body-2/medium */
    font-size: 14px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 18px;
    margin-top: 4px;
 }
 .leo{
    background: #FFFFFF;
    border-radius: 22px;
    /* width: 115px; */
    height: 28px;
    padding: 3px 10px 3px 10px;
    position: absolute;
    top: 17px;
    right: 18px;
    letter-spacing: 0px;
 }
 .leo h6{
    height: 22px;
    letter-spacing: 0px;
    font-style: normal;
    line-height: 22px;
    margin-bottom: 0;
    display: flex;
    color: #151f6d;
    justify-content: flex-end;

 }
 .goodFriend{
    padding-left: 0 !important;
    padding-right: 5px !important;
 }
 .pet{
    width: 16px;
    height: 16px;
 }
.petlabel{
    display: flex;
    padding-top: 3px;
}
 .icon-infornation {
    content: url('../img/icon/infornation.png');
    display: inline-block;
    width: 18px;
    height: 18px;
    background-attachment: fixed;
    background-position: 100% 100%;
    padding-bottom: 3px;
    padding-left: 3px;
}
.goldBar{
    padding-left: 14px;
    border-radius: 17px;
background: #151f6d;
}
.gap7{
    display: inline-flex;
align-items: center;
gap: 7px;
}
.gap8{
    display: flex;
align-items: flex-end;
gap: 8px;
}
.gap4 p{
    margin: 0;
}
.scoreAll h5 {
    color: var(--primary-red-bold, #fff);
    /* h5/bold */
    font-family: Anuphan-bold;
    font-size: 20px;
    font-style: normal;
    /* font-weight: 700; */
    line-height: 24px; /* 120% */
    margin-bottom: 0;
}
.kanaa p{
    color: var(--primary-red-bold, #fff);

/* Caption/medium */
font-family: Anuphan;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 133.333% */
}
.dueDate p{
    padding: 0 0 8px 17px;
    color: var(--primary-red-bold, #fff);
    /* Caption/medium */
    font-family: Anuphan;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
    margin: 0;
}
.eorpw{
    width: 100%;
}
.gap29{
    padding-top: 29px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 29px;
    width: 100%;
}
.gap24{
    display: flex;
width: 100%;
/* padding: 24px 16px 50px 16px; */
flex-direction: column;
/* align-items: center; */
gap: 24px;
}
.historyPoint{
    position: absolute;
    right: 16px;
}
.history .btn{
    margin: 0;
    font-family: Anuphan;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
    text-decoration: none;
    color: var(--primary-red-bold, #151f6d);
    /* padding: 3px 10px 3px 15px; */
}
.claimReword{
    display: flex;
width: 100%;
padding: 24px 16px 50px 16px;
flex-direction: column;
align-items: center;
gap: 25px;
}
.nameCollectionHistory h5{
    margin: 0;
}
.nameCollectionHistory{
    color: var(--primary-red-bold, #151f6d);

/* h5/bold */
font-family: Anuphan;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 120% */
}
.collName{
    color: var(--grey-900, #111827);
    align-self: stretch;
    /* h6/medium */
    font-family: Anuphan;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 137.5% */
    width: 100%;
}
.collection{
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    display: flex;
    width: -webkit-fill-available;
    padding: 13px 16px;
    border-radius: 18px;
    border: 1px solid var(--grey-300, #E5E7EB);
    /* display: flex; */
    align-items: baseline;
    /* padding: 16px 18px 17px; */
    justify-content: space-between;
}
.collName h6{
    margin: 0;
}
.collName p{
    margin: 0;
    color: var(--primary-red-bold, #151f6d);
    align-self: stretch;
    /* Body-2/medium */
    font-family: Anuphan;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
}
.dataColl{
    margin-top: 6px;
}
.pointRe{
    display: flex;
align-items: center;
gap: 9px;
width: 30%;
}
.pointRewardGreen{
    color: var(--success-500, #10B981);
    text-align: right;
    /* Body-2/medium */
    font-family: Anuphan;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
    text-align: end;
    width: 100px;
}
.pointRewardRed{
    color: var(--error-500, #EF4444);

/* Body-2/medium */
font-family: Anuphan;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
text-align: end;
width: 100px;
}
.reword{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 12px;
}
.newRe{
    color: var(--primary-red-bold, #151f6d);

/* Caption/medium */
font-family: Anuphan-bold;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 133.333% */
border-radius: 30px;
background: var(--gradient-gold, linear-gradient(225deg, #F9E7A9 0%, #F6BA13 100%));
position: absolute;
right: 25px;
top: 20px;
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
gap: 10px;
}
.dateRewo p{
    color: var(--primary-red-bold, #151f6d);
text-align: center;

/* Caption/medium */
font-family: Anuphan;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 133.333% */
margin: 0;
}
.inProgress,.statusAll,.delivery,.doneRe{
    width: 100%;
}
.inProgress{
    display: flex;
    width: 100%;
    padding: 4px;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    flex-shrink: 0;
    border-radius: 50px;
background: var(--info-50, #EFF6FF);
 /* 128.571% */
}
.inProgress p{
    text-align:center;
    width: 100%;
    color: var(--info-500, #3B82F6);

    /* Body-2/medium */
    font-family: Anuphan;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    margin: 0;
}
.delivery{
    display: flex;
padding: 4px 6px;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
border-radius: 50px;
background: var(--warning-50, #FFFBEB);
}
.delivery p{
    color: var(--warning-500, #F59E0B);

/* Body-2/medium */
font-family: Anuphan;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
text-align: center;
margin: 0;
}
.doneRe{
    display: flex;
padding: 4px 6px;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
border-radius: 50px;
background: var(--success-300, #ECFDF5);
}
.doneRe p{
    color: var(--success-500, #10B981);

/* Body-2/medium */
font-family: Anuphan;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
margin: 0;
text-align: center;
}

.rewordCon .col-6:nth-child(2n) .rewordAll{
    position: absolute;
    right: 0;
    
}

.rewordAll{
    width: 95%;
    /* margin-right: 10px; */
    height: auto;
    border-radius: 18px;
    border: 1px solid var(--grey-300, #E5E7EB);
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap:12px;
    margin-bottom: 16px;
    display: flex;
}
.reBtnOk, .reBtn,.homeReword ,.status{
    width: 100%;
}
.reBtnShow{
    display: flex;
    width: 146px;
    padding: 5px 6px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    background: var(--warning-400, #151f6d);
    color: var(--primary-red-bold, #fff);

    /* Body-2/medium */
    font-family: Anuphan-bold;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
}
.reBtnShowNo{
    display: flex;
width: 145px;
justify-content: center;
align-items: center;
gap: 9px;
color: var(--grey-400, #9CA3AF);

/* Body-2/medium */
font-family: Anuphan;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
}
.closeModel .btn{
    border: none;
    background: none;
    color: #000;
    position: absolute;
    right: 15px;
    top: 15px;
}
.homeReword .btn{
    text-decoration: none;
    display: flex;
    /* width: 311px; */
    padding: 12px;
    flex-direction: column;
    align-items: center;
    color: var(--grey-600, #4B5563);
    width: 100%;
    background: none;
    border: none;
    /* h6/medium */
    font-family: Anuphan;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 137.5% */
}
.gap5Reword{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
width: 100%;
}
.h5 h5{
    margin: 0;
}
.detailRe p{
    color: var(--grey-400, #9CA3AF);
text-align: center;

/* Body-2/medium */
font-family: Anuphan;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
width: 100%;
margin: 0;
}
.drtailReword{
    color: var(--based-black, #000);
text-align: center;

/* Body-2/medium */
font-family: Anuphan;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
width: 100%;
}
.drtailReword p{
    margin: 0;
}
.reBtn .btn{
    display: flex;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: 1 0 0;
    border-radius: 50px;
    width: 100%;
    color: var(--grey-400, #9CA3AF);
    /* Body-2/medium */
    font-family: Anuphan;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
    background: none;
    border: none;
}
.reBtn {
    display: flex;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: 1 0 0;
    border-radius: 50px;
    width: 100%;
    color: var(--grey-400, #9CA3AF);
    /* Body-2/medium */
    font-family: Anuphan;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
    background: none;
    border: none;
}
.reBtnOk .btn{
    display: flex;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: 1 0 0;
    border-radius: 50px;
  
    color: var(--primary-red-bold, #fff);
    width: 100%;
    /* Body-2/medium */
    font-family: Anuphan-bold;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
    background: var(--warning-400, #151f6d);
    border: 1px solid #151f6d;
}
.seeReword{
    display: flex;
padding: 4px 4px 4px 10px;
justify-content: center;
align-items: center;
}
.seeReword .btn{
/* margin: 24px 35% 0; */
width: 105px;
height: 32px;
background: #151f6d;
border: 1px solid #151f6d;
color: #FFFFFF;
border-radius: 50px;
padding: 0;

}
.hReword h6{
    margin: 0;
}
.rewordImg{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}
.rewordCon .col-6{
    padding: 0 !important;
    
}
.rewordImg h6{
    margin: 0;
}
.rewordImg img{
    width: 100%;
    height: auto;
}
.pointRewardRed p,.pointRewardGreen p{
    margin: 0;
}
.accuPoint{
    color: var(--primary-red-bold, #fff);

    /* Body-2/medium */
    font-family: Anuphan;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
}
.history{
    padding: 3px 10px 3px 15px;
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    /* Caption/medium */
    width: 161px;
    height: 30.182px;
    flex-shrink: 0;
    border-radius: 17px 0px;
    background: var(--based-white, #FFF);
}
 .tagMenu{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 0px 0px;
    gap: 23px;
    position: absolute;
    /* width: 375px; */
    /* left: calc(50% - 375px/2); */
    width: 100%;
    left: calc(50% - 100%/2);
 }
 .nav{
    --bs-nav-link-color:color: #111827 !important;
 }
 .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    display: flex;
    flex-direction: row;
    align-items: center;
/* Primary/Red-Bold */
    background: #151f6d !important;
    border-radius: 50px;
/* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
 }
.scrollerMenu::-webkit-scrollbar {
    display: none;/* กำหนดความกว้างของ scroll */
    }
.scroller :-webkit-scrollbar {
    display: none;/* กำหนดความกว้างของ scroll */
    }
.scrollerMenu {
    text-align: left;
    overflow-x: scroll;
    display: flex;
    box-sizing: border-box;
    scroll-snap-type: x mandatory;
    align-items: flex-start;
    gap: 9px;
    margin-left: 0px !important;
    /* margin-right: 20px; */
  }
  .scrollerMenu > li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: end;
    height: 31px;
    padding: 12px 16px;
    border-radius: 50px;
    border: 1px solid var(--grey-300, #e5e7eb);
    background: var(--based-white, #fff);
    color: var(--grey-900, #111827);
    font-size: 14px;
    font-family: Anuphan;
    font-style: normal;
    /* font-weight: 600; */
    line-height: 18px;
  }
  ul {
    padding-left: 0px !important;
  }
  li.active,
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    color: var(--white, #fff);
    background: var(--primary-red-bold, #151f6d);
  }

  p.detailTime, p.detailTimeDate {
    margin-bottom: 6px;
  }
.nav-link{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 50px !important;
 }
 .card-header-pills{
    gap: 9px;
    padding-left: 2px !important;
 }
 .card-header{
    padding-left:11px !important;
    background-color: #fff !important;
    border: none !important;
    padding-top: 0px !important;
 }

 .menu{
    width: 50px;
    height: 50px;

    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
 }
 .word{
    /* Body-2/medium */
    /* font-family: 'Anuphan-Semi-Bold';
    font-style: normal;
    font-weight: 600 !important; */
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    color: #111827;
    margin: 0;

 }
 .detailShop{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 23px;
 }
 .gap10{
    display: inline-flex;
flex-direction: column;
/* align-items: flex-start; */
gap: 10px;
 }
  .text {
    color: #E12F2E;
    display: inline-block;
    margin-left: 10px;
    font-size: 20px;
  }
  @media screen and (max-width: 320px) {  
    .tagMenu{
        left: calc(50% - 320px/2);
    }
     .rowEllip{
        height: 50px;
     }
    .claim {
        height: 100%;
    }
    .col2{
        width: 6% !important;
    }
    .permissions{
        font-size: 14px;
    }
    .font{
        font-size: 13px;
    }
    .memberData h5{
        font-size: 16px !important;
        margin: 0;
    }
    .collName h6{
        font-size: 14px !important;
    }
    .pointRewardGreen,.pointRewardRed{
        font-size: 12px;
    }
    .pointRe{
        width: 35%;
    }
    .accuPoint{
        font-size: 14px;
    }
    .dueDate p{
        padding: 0 0 8px;
    }
    
}
@media screen and (min-width: 320px){
    .ellip img{
        width: 50px;
        height: 50px;
     }
     .ellip{
        width: 50px;
        height: 50px;
     }
     .rowEllip{
        height: 50px;
    }
    .promotion{
        height: 135px;
    }
    .point-sub-head-2{
        font-size: 12px;
    }
    .coverData{
        width: 88vw;
    }
    
}
 @media screen and (min-width: 360px) {
    .ellip img{
        width: 72px;
        height: 72px;
     }
     .ellip{
        width: 72px;
        height: 72px;
     }
     .rowEllip{
        height: 72px;
    }
    .memberCard {
        padding: 0 16px;
    }
    .errorDiv{
        top: calc(50%/2)
    }
    .promotion{
        height: 155px;
    }
    .point-sub-head-2{
        font-size: 14px;
    }
    .coverData{
        width: 78vw;
    }
    
}
@media screen and (min-width: 375px) {
    .pointRewardGreen,.pointRewardRed{
        font-size: 12px;
    }
    .pointRe{
        width: 35%;
    }
    .accuPoint{
        font-size: 14px;
    }
    .dueDate p{
        padding: 0 0 8px;
    }
    .coverData{
        width: 75vw;
    }
}
/* @media screen and (min-width: 390px) {
    .memberCard {
        padding: 0 16px;
    }
} */
@media screen and (min-width: 400px) {
    
    .promotion{
        height: 170px;
    }
    .coverData{
        width: 68vw;
    }
}
@media screen and (min-width: 539px) {
    .col2{
        width: 5% !important;
    }
    .col10{
        width: 90% !important;
    }

}
@media screen and (min-width: 599px) {
    .col2{
        width: 4% !important;
    }
    .col10{
        width: 91% !important;
    }
}
@media screen and (min-width: 639px) {
    .col2{
        width: 4% !important;
    }
    .col10{
        width: 92% !important;
    }
}
@media screen and (min-width: 799px) {
    .col2{
        width: 3.5% !important;
    }
    .col10{
        width: 93% !important;
    }
}
@media screen and (min-width: 899px) {
    .col2{
        width: 3% !important;
    }
    .col10{
        width: 94% !important;
    }
}