* {
    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;

}

.backgroundHistory {
    /* 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.mission-menu {
    background: url('../img/MenuMission.png');
}

.icon.promotionMenu {
    background: url('../img/MenuPromotion.png');
}

.icon.promotionMenu:active {
    background: url('../img/MenuPromotionActive.png');
}

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

.icon.activityMenu:active {
    background: url('../img/MenuActivityActive.png');
}

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

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

.icon.missionMenu {
    background: url('../img/target-menu.png');
}

.icon.missionMenu:active {
    background: url('../img/target-menu.png');
}

.icon.mission-star-inactive {
    background: url('../img/star-inactive.svg');
}

.icon.mission-star-active {
    background: url('../img/star-active.svg');
}

.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: auto;
    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: 100%;
    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;
}

.reward {
    padding: 24px 16px 50px 0px !important;
}

.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: 90%;
}

.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, #520000);
}

.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, #520000);
    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;
}


.promo-box ul {
    padding-left: 16px !important;
    /* เยื้องเฉพาะ list */
}


.accept b {
    margin: 0;
}

.accept {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100% !important;
    height: 36px;
}

.acceptRewordh6 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100% !important;
    line-height: 1.5;
    height: 44px;
}

.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: #520000;
}

.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: #B40000 !important;
    border: 1px solid #B40000 !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, #FF0000 1.99%, #520000 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, #520000);
    /* 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, #520000);

    /* 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, #520000);
}

.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, #520000);
    /* 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, #520000);

    /* 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, #520000);
    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(180deg, #F00 -25%, #950000 10%, #520000 40%);
}

.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, #B40000);
    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, #B40000);
    border: 1px solid #B40000;

}

.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, #B40000);
    border: 1px solid #B40000;
    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;
}

.contenPartyNew {
    display: flex;
    padding: 16px 16px;
    flex-direction: column;
    gap: 10px;
}

.contenPartyNew h6 {
    text-align: left !important;
}

.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, #B40000);
    /* h5/bold */
    font-size: 20px;
    font-family: Anuphan-bold;
    /* font-weight: 700; */
    line-height: 24px;
    margin: 0px;
}

.star {
    width: 24px;
    background: #fff;
    border-radius: 100%;
    padding: 2px;
    margin: 3px;
}

.starBig {
    width: 50px;
    background: #fff;
    border-radius: 100%;
    padding: 4px;
    margin: 5px;
}

.party img {
    display: flex;
    width: 175px;
    height: 175px;
    /* padding: 0px 0px 14.667px 0px; */
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.partyNew img {
    display: flex;
    width: 85vw;
    height: auto;
    /* padding: 0px 0px 14.667px 0px; */
    justify-content: center;
    align-items: center;
    border-radius: 18px;
}

.banner {
    padding: 0px 16px 16px 16px;
}

.banner img {
    display: flex;
    width: 100%;
    height: auto;
    /* padding: 0px 0px 14.667px 0px; */
    justify-content: center;
    align-items: center;
    border-radius: 18px;
}

.banner {
    padding: 0px 16px 16px 16px;
}

.banner img {
    display: flex;
    width: 100%;
    height: auto;
    /* padding: 0px 0px 14.667px 0px; */
    justify-content: center;
    align-items: center;
    border-radius: 18px;
}

.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;
}

.gapAutoCenter {
    padding: 0px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    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, #520000);
    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;

}

.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, #FF0000 1.13%, #520000 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: #B40000;
    border-radius: 50px;
    border: 1px solid #B40000;
    justify-content: center;
}

.sendOTP .btn:hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    width: 311px;
    height: 46px;
    /* Primary/Red-Medium */
    background: #B40000;
    border-radius: 50px;
    border: 1px solid #B40000;
    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; */
}

.ellipNew {
    position: absolute;
    /* display: absolute; */
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 119px;
    width: 72px;
    height: 72px;
}

.ellipNew 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;
}

.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,
.dateStart {
    color: #FFFFFF;
}

.code {
    color: var(--based-white, #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, #520000);
    /* 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: #B40000;
    border: 1px solid #B40000;
    border-radius: 50px;
}

.makeSue {
    width: 100%;
}

.makeSue .btn {
    color: var(--based-white, #FFF) !important;
    /* h6/medium */
    font-size: 14px;
    font-family: Anuphan;
    font-weight: 500;
    line-height: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: 50px;
    background: var(--primary-red-medium, #4b5563);
    border: 1px solid #4b5563;

}

.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, #B40000);
    border: 1px solid #B40000;
}

.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: #B40000;

}

.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: #520000;
}

.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;
}

.footerMoedaold {
    position: absolute;
    bottom: 0;
    width: 90%;
    height: 34%;
    padding: 0;
}

.footerMoeda {
    position: absolute;
    bottom: 0;
    width: 90%;
    height: 17%;
    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;
}

a:action {
    color: #10B981;
}

.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: 45px;
    /* 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: #B40000;


    /* 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: #B40000;
    border-radius: 50px;
    border: 1px solid #B40000;
    margin: 0;
}

.luckyWin h5 {
    color: var(--primary-red-bold, #520000);

    /* 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: #B40000;
    border-radius: 50px;
    border: 1px solid #B40000;
    margin: 0;
}

.memberData h5 {
    margin: 0;
}

.point .pointTitle,
.point .pointRow {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #520000;
    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
}

.point b {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #520000;
    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
}

.numPoint .btn {
    color: #520000;
    float: right;
    color: var(--primary-red-bold, #520000);
    text-decoration: none;
    /* Body-2/medium */
    font-size: 14px;
    font-family: Anuphan;
    font-weight: 700;
    line-height: 18px;
    margin-top: -5px;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
    color: #520000 !important;
}

.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: #B40000;
    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: var(--gradient-gold, linear-gradient(225deg, #F9E7A9 0%, #F6BA13 100%));
}

.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, #520000);
    /* 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, #520000);

    /* Caption/medium */
    font-family: Anuphan;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.kanaaOld p {
    color: var(--primary-red-bold, #520000);
    font-family: Anuphan;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;

}

.dueDatePoint p {
    padding: 0px;
    color: var(--primary-red-bold, #520000);
    font-size: 12px;

    white-space: nowrap;
    overflow: visible;
    position: relative;
    z-index: 1;
    margin: 0px;
}

.textPoint p {
    padding: 0px;
    color: var(--primary-red-bold, #520000);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    z-index: 1;
    margin: 0px;
}

.dueDate p {
    padding: 8px 0 8px 17px;
    color: var(--primary-red-bold, #520000);
    /* Caption/medium */
    font-family: Anuphan;
    font-size: 13px;
    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, #520000);
    /* 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, #520000);

    /* h5/bold */
    font-family: Anuphan;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 120% */
    text-align: center;
}

.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, #520000);
    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;
    width: 92vw;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 12px;
}

.newRe {
    color: var(--primary-red-bold, #520000);

    /* 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, #520000);
    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;
}

.rewordAllNew {
    width: 95%;
    height: auto;
    border-radius: 18px;
    border: 1px solid var(--grey-300, #E5E7EB);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    display: flex;
}

.acceptRewordTitle {
    font-size: 13px;
    /* font-weight: bold; */
    /* color: #000; */
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding: 0 10px;
    height: 40px;
}

.RewordDetailTitle {
    font-size: 18px;
    font-weight: bold;
    /* color: #000; */
    /* line-height: 1.4; */
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding: 10px 10px 0px 10px;
}

.RewordDetailDescription {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    line-height: 1.4;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding: 0 10px;
}

.RewordDetailCondition {
    font-size: 14px;
    font-weight: normal;
    color: #000;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding: 0 10px;
}

.RewordHistortCard {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 12px;
    width: 92vw;
    margin: 0 !important;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
}

.RewordImage {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.RewordHistortRedeem {
    font-size: 14px;
    /* font-weight: bold;
  color: #000; */
    line-height: 1.4;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.RewordHistortTitle {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    line-height: 1.2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.RewordHistortDate {
    font-size: 12px;

    color: #000;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center;
}

.RewordHistortNumber {
    font-size: 18px;
    font-weight: normal;
    color: #000;
    line-height: 1.4;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.RewordHistortPoint {
    display: flex;
    align-items: center;
    gap: 6px;
}

.RewordHistortPoint .star-icon {
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 100%;
    padding: 2px;
}

.RewordHistortPoint b {
    font-size: 14px;
    font-weight: normal;
    color: rgba(127, 29, 29, 1);
    ;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center;
}

.reward-bottom-bar {
    background-color: #d10000;
    color: white;
    padding: 10px 8px 6px;
    border-radius: 0 0 18px 18px;
    text-align: left;
    width: 100%;
}

.reward-bottom-bar .reward-point {
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: left;
}

.reward-bottom-bar .star-icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    background: #fff;
    border-radius: 100%;
    padding: 2px;
}

.reward-bottom-bar .reward-count {
    color: #fff;
    text-align: center;
}

.reward-bottom-bar .reward-expire {
    font-size: 10px;
    color: #fff;
    margin-left: 35px;
}

.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, #FBBF24);
    color: var(--primary-red-bold, #520000);

    /* 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;
}

.closeModelOnImage .btn {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    background-color: #ffffff7a;
    color: #000;
    border-radius: 50%;
    font-size: 30px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeReword .btn {
    text-decoration: none;
    border-radius: 50px;
    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 0px;
    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 0px;
    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, #520000);
    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, #FBBF24);
    border: 1px solid #FBBF24;
}

.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: #B40000;
    border: 1px solid #B40000;
    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;
    border-radius: 8px;
}

.rewordImgNew img {
    width: 100%;
    height: auto;
    padding: 10px 10px 0px 10px;
    border-radius: 20px;
}

.pointRewardRed p,
.pointRewardGreen p {
    margin: 0;
}

.accuPoint {
    color: var(--primary-red-bold, #520000);

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

.history {
    padding: 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Caption/medium */
    width: 23vw;
    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: #520000 !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, #520000);
}

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;

}

.detailShopold {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 23px; */
}

.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: 8px 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;
    }

    .gap10 {
        gap: 0px !important;
    }

}

@media screen and (min-width: 360px) {
    .ellip img {
        width: 65px;
        height: 65px;
    }

    .ellip {
        width: 72px;
        height: 72px;
    }

    .rowEllip {
        height: 66px;
    }

    .memberCard {
        padding: 0 16px;
    }

    .errorDiv {
        top: calc(50%/2)
    }

    .promotion {
        height: 155px;
    }

    .point-sub-head-2 {
        font-size: 14px;
    }

    .coverData {
        width: 78vw;
    }

    .numPoint .btn {
        font-size: 13px !important;
    }

    .nameShop {
        font-size: 16px !important;
    }

}

@media screen and (min-width: 375px) {

    .pointRewardGreen,
    .pointRewardRed {
        font-size: 12px;
    }

    .pointRe {
        width: 35%;
    }

    .accuPoint {
        font-size: 14px;
    }

    .dueDate p {
        padding: 8px 0 8px;
    }

    .coverData {
        width: 75vw;
    }

    .nameShop {
        font-size: 17px !important;
    }
}

@media screen and (min-width: 390px) {

    .nameShop {
        font-size: 18px !important;
    }
}

@media screen and (min-width: 400px) {

    .promotion {
        height: 170px;
    }

    .coverData {
        width: 68vw;
    }

    .gap10 {
        gap: 10px !important;
    }

}

@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;
    }
}