:root {
    --font-xs: 8px;
    --font-sm: 10px;
    --font-md: 12px;
    --font-lg: 16px;
    --font-xl: 24px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden;
    color: #121212;
    /* font-family: 'DB Heavent' !important; */
    line-height: 1.4;
    font-size: 16px;
    background-color: #FE5000;
}

.mt-f-sec, #nav_bottom {
    font-family: 'DB Heavent' !important;
}

img {
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    height: auto;
}

a,
a:hover,
a:active,
a:focus,
a:visited {
    text-decoration: none;
}

.pos {
    position: absolute;
}

.rel {
    position: relative;
}

.t_inline {
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0;
    line-height: 1.4;
    font-weight: normal;
}

.showpc {
    display: block;
}

.showmb {
    display: none;
}

.text-center {
    text-align: center !important;
}

.container {
    max-width: 575px !important;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

.obj {
    position: absolute;
}

.text-limit {
    display: -webkit-box;
    /* -webkit-line-clamp: 3; */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.remodal-close,
.remodal-close:before {
    left: auto;
    right: 0;
}


.bg_gradiusGreen {
    background: linear-gradient(180deg, var(--color_green) 0%, var(--color_light) 23%);
}

.bg_gradiusOrange {
    background: linear-gradient(180deg, var(--color_orange) 0%, var(--color_light) 23%);
}

figure {
    margin: 0;
    position: relative;
}

figure.cover {
    margin: 0;
}

figure.cover img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: center;
}

figure.contain img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: contain;
    object-position: center;
}

figure img {
    width: 100%;
    max-width: 100%;
}

.bg-main-frontend:has(main.frontend) .mb-24 {
    position: relative;
    margin-bottom: 0;
}

.bg-main-frontend:has(main.frontend) {
    background: #fff url(../images/background/bg-main-2.jpg);
    background-size: contain;
    height: 100vh;
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}

.bg-main-frontend:has(main.frontend)::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 131px;
    height: 112px;
    background-image: url(../images/static/logo-ele.png);
    background-repeat: no-repeat;
}

.header {
    margin-top: 20px;
}

.header .wrap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 255px;
    margin: 0 0 0 auto;
}

.header .img-profile {
    flex: 0 0 20%;
}

.header .img-profile figure.cover {
    --size: 75px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #8CC9FF;
    box-shadow: 0px 4px 4px rgba(26, 88, 255, 0.6);
}

.header .show-point-pf {
    flex: 0 0 50%;
}

.header .show-point-pf .button {
    background-color: #ECF5FF;
    color: var(--color-pri-deepBlue);
    text-align: center;
    padding: 0 0;
    border-radius: 30px;
    box-shadow: 0px 4px 4px rgba(0, 68, 208, 0.6);
    margin: 5px 0;
    display: inline-block;
    min-width: 140px;
}

.header .show-point-pf .button h4 {
    font-size: var(--font-lg);
    color: var(--color-pri-deepBlue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .show-point-pf .button .txt-h-b {
    font-size: 175%;
    margin-right: 5px;
}

.header .show-point-pf h2 {
    color: var(--color-txt-white);
    font-size: var(--font-md);
}

.header .show-point-pf h3 {
    color: var(--color-txt-white);
    font-size: var(--font-md);
}

/* set box width all pages */
.set-width-display {
    border-radius: 30px;
    height: calc(100vh - 196px);
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* collect-score-page */
.collect-score-page {
    margin-top: 25px;
}

/* .collect-score-page .card-addPoint { border-radius: 30px; height: calc(100vh - 217px); overflow: scroll; } */
.title-addPoint {
    background: transparent url(../images/static/collect-score-title-box.png) top no-repeat;
    background-size: cover;
    height: 60px;
    position: absolute;
    top: 95px;
    left: 50%;
    z-index: 1;
    width: 80%;
    transform: translate(-50%, 0%);
}

.title-addPoint .ele-txt {
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-addPoint .ele-txt h2 {
    font-size: var(--font-xl);
    color: var(--color-txt-white);
    text-shadow: 0px 2px 0px #2028FB;
}

.collect-score-page .card-addPoint .sub-title {
    text-align: center;
    margin-top: 25px;
}

.collect-score-page .card-addPoint .sub-title h2 {
    color: var(--color-txt-darkBlue);
    font-size: 14px;
}

.card-addPoint .wrap-boxInput {
    position: relative;
}

.card-addPoint .wrap-boxInput Input {
    border-radius: 40px;
}

.card-addPoint .wrap-boxInput Input.input-error {
    border: 1px solid #FF6D19;
}

.card-addPoint .wrap-boxInput Input.input-error::placeholder {
    color: #FF6D19;
    font-size: 14px;
}

.card-addPoint .edit-btn-input {
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 0px 4px 14px rgba(0, 61, 208, 0.2);
}

.card-addPoint .btn-delete {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-radius: 40px;
    padding: 10px;
    position: absolute;
    top: 4px;
    right: 4px;
}

.card-addPoint .btn-delete img {
    width: 15px;
}

.card-addPoint .btn-addMorecode {
    background: linear-gradient(135.16deg, #EFFAFF -36.86%, #EAF4F9 75.07%);
    border-bottom: 5px solid #7294DB;
    border-radius: 40px;
    color: var(--color-pri-deepBlue);
    font-size: 14px;
    padding: 10px 50px 8px 50px;
    line-height: 1.5;
}

.card-addPoint .btn-savePoint {
    background: linear-gradient(307.25deg, #FF6D19 34.06%, #FFC619 129.15%);
    border-bottom: 5px solid #BC4500;
    border-radius: 40px;
    color: var(--color-txt-white);
    font-size: 14px;
    padding: 10px 70px 8px 70px;
    line-height: 1.5;
    margin-top: 30px;
    display: block;
}

.card-addPoint .btn-popup-collect-points {
    display: block;
    font-size: 16px;
    color: var(--color-pri-deepBlue);
    text-decoration: underline;
    margin-top: 10px;
}

.collect-score-page .card-addPoint .wrap-btn-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
}

/* popup popup-collect-points */
.popup-collect-points .wrap-popup .edit-title-collect-points {
    width: 80%;
    height: 57px;
    top: -15px;
}

.popup-collect-points .wrap-popup .wrap-detail-pop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.popup-collect-points .wrap-popup .img-pop {
    margin: 20px 0 10px 0;
}

.popup-collect-points .wrap-popup .content-pop {
    text-align: left;
}

.popup-collect-points .wrap-popup .content-pop ul li {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
    margin-top: 5px;
}

.remodal.popup-collect-points {
    border-radius: 40px;
    padding: 35px 45px 20px 45px;
}

.remodal.remodal-close-bottom .remodal-close,
.remodal.remodal-close-bottom .remodal-close:before {
    position: relative;
}

.remodal.remodal-close-bottom .remodal-close:before {
    content: '';
}

.remodal.popup-collect-points .remodal-close {
    background: linear-gradient(307.25deg, #FF6D19 34.06%, #FFC619 129.15%);
    border-bottom: 5px solid #BC4500;
    color: var(--color-txt-white);
    font-size: 16px;
    border-radius: 40px;
    padding: 20px 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-collect-points .wrap-btn-pop-close {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.app-footer {
    position: absolute !important;
    bottom: 23px !important;
    z-index: 99;
}

.app-footer::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 65px;
    max-width: 575px;
    width: calc(100% - 30px);
    height: 60px;
    background-color: #fff;
    z-index: 0;
    transform: translate(-50%, 0px);
    border-radius: 0 0 30px 30px;
}

.app-footer .wrap-menu-list {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

.app-footer .wrap-menu-list:before {
    display: none;
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    background-color: #fff;
    width: 100%;
    /* width: 114%; */
    height: 60px;
    transform: translateX(-50%);
    border-radius: 0 0 31px 30px;
    z-index: -1;
}

.app-footer .wrap-menu-list .btn-menu {
    flex: 0 0 calc(100% / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.app-footer .wrap-menu-list .btn-menu .img {
    background: linear-gradient(153.78deg, #FFFFFF -9.11%, #FFFFFF 80.73%);
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.45), inset -2px -5px 4px rgba(2, 58, 173, 0.4);
    border-radius: 40px;
    padding: 12px 12px;
    width: fit-content;
    margin: 0 auto;
}

.app-footer .wrap-menu-list .btn-menu .img .is-active {
    display: none;
}

.app-footer .wrap-menu-list .btn-menu .txt {
    color: var(--color-txt-white);
    font-size: 14px;
    margin: 7px 0;
    position: relative;
}

.app-footer .wrap-menu-list .btn-menu.active .img {
    background: linear-gradient(153.51deg, #FFB818 -9.03%, #FF6D19 90.27%);
    box-shadow: 0px 6px 6px rgba(249, 109, 0, 0.56), inset -2px -5px 4px rgba(124, 46, 3, 0.5);
    transform: translateY(-20px);
}

.app-footer .wrap-menu-list .btn-menu.active .img .not-active {
    display: none;
}

.app-footer .wrap-menu-list .btn-menu.active .img .is-active {
    display: block;
}

.app-footer .wrap-menu-list .btn-menu.active .block-image {
    border-radius: 0 0 50px 50px;
    width: 76px;
    height: 60px;
    background-color: #fff;
    position: relative;
}

.app-footer .wrap-menu-list .btn-menu.active .block-image:before,
.app-footer .wrap-menu-list .btn-menu.active .block-image:after {
    content: '';
    position: absolute;
    top: 46px;
    transform: translate(0, -50%);
    /* border-radius: 50%; */
    --size: 30px;
    width: var(--size);
    height: var(--size);
    background-color: transparent;
    z-index: -1;
}

.app-footer .wrap-menu-list .btn-menu.active .block-image:before {

    left: -22px;
    box-shadow: 15px -19px #fff;
    border-top-right-radius: 20px;


}

.app-footer .wrap-menu-list .btn-menu.active .block-image:after {
    right: -22px;
    transform: translate(0, -50%) scaleX(-1);
    box-shadow: 15px -19px #fff;
    border-top-right-radius: 20px;
}

.app-footer .wrap-menu-list .btn-menu.active .txt::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 50%;
    width: 90%;
    height: 2px;
    background-color: #FFFFFF;
    transform: translate(-50%, -50%);
}

.btn-close-popup-noti {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    color: var(--color-txt-white);
    font-size: 16px;
    border-radius: 40px;
    padding: 8px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 165px;
    margin: 0 auto;
    pointer-events: auto;
}

.popup-notiAlert .wrap-notiAlert {
    pointer-events: none;
}

.popup-notiAlert .wrap-notiAlert h2 {
    font-size: 24px;
    color: var(--color-txt-darkBlue);
}

.popup-notiAlert .wrap-notiAlert h3 {
    font-size: 16px;
    color: var(--color-txt-darkBlue);
}

.popup-notiAlert .wrap-notiAlert .noti-fail {
    display: none;
}

.popup-notiAlert .type-danger .wrap-notiAlert .noti-fail .ele-img {
    background: url(../images/static/collect-score-img-unsuccess.png) top no-repeat;
    background-size: cover;
    max-width: 104px;
    min-height: 104px;
    margin: 0 auto;
}

.popup-notiAlert .wrap-notiAlert .noti-accept {
    display: none;
}

.popup-notiAlert .type-success .wrap-notiAlert .noti-accept .ele-img {
    background: url(../images/static/collect-score-img-success.png) top no-repeat;
    background-size: cover;
    max-width: 104px;
    min-height: 104px;
    margin: 0 auto;
}

.popup-notiAlert .type-success .wrap-notiAlert .noti-accept .ele-detail h3 {}

.popup-notiAlert .wrap-notiAlert .noti-warning {
    display: none;
}

.popup-notiAlert .type-warning .wrap-notiAlert .noti-warning .ele-img {
    background: url(../images/static/collect-score-img-unsuccess.png) top no-repeat;
    background-size: cover;
    max-width: 104px;
    min-height: 104px;
    margin: 0 auto;
}

.popup-notiAlert .wrap-notiAlert .ele-detail {
    text-align: center;
    margin: 25px 0 25px 0;
}



/* .popup-notiAlert .type-danger,
.popup-notiAlert .type-warning,
.popup-notiAlert .type-success{box-shadow: 0px -145px 0px 292px rgba(0, 0, 0, 0.5);} */

.popup-notiAlert .type-danger {
    border-radius: 40px;
    background: linear-gradient(225.95deg, #FFFFFF -83.22%, #F2F7FF 155.64%);
}

.popup-notiAlert .type-danger .wrap-notiAlert .noti-fail {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

.popup-notiAlert .type-success {
    border-radius: 40px;
    background: linear-gradient(225.95deg, #FFFFFF -83.22%, #F2F7FF 155.64%);
}

.popup-notiAlert .type-success .wrap-notiAlert .noti-accept {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

.popup-notiAlert .type-warning {
    border-radius: 40px;
    background: linear-gradient(225.95deg, #FFFFFF -83.22%, #F2F7FF 155.64%);
}

.popup-notiAlert .type-warning .wrap-notiAlert .noti-warning {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

.popup-notiAlert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    z-index: 999;
}

.popup-notiAlert .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(43, 46, 56, .9);
    /* -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px); */
    transform: scale(2.5);
    z-index: -1;
    pointer-events: auto;
}

.popup-notiAlert .type-danger,
.popup-notiAlert .type-warning,
.popup-notiAlert .type-success {
    max-width: 315px;
    margin: auto;
}


/* redeem-item-page */

.redeem-item-page {
    margin-top: 25px;
}

/* .redeem-item-page .card-redeem { border-radius: 30px; height: calc(100vh - 217px); overflow: scroll; } */
.redeem-item-page .card-redeem .sub-title {
    text-align: center;
    margin-top: 30px;
}

.redeem-item-page .card-redeem .sub-title h2 {
    color: var(--color-txt-darkBlue);
    font-size: 14px;
}

.redeem-item-page .card-redeem .wrap-btn-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.title-redeem {
    background: transparent url(../images/static/collect-score-title-box.png) top no-repeat;
    background-size: cover;
    height: 63px;
    position: absolute;
    top: 95px;
    left: 50%;
    z-index: 1;
    width: 80%;
    transform: translate(-50%, 0%);
}

.title-redeem .ele-txt {
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-redeem .ele-txt h2 {
    font-size: var(--font-xl);
    color: var(--color-txt-white);
    text-shadow: 0px 2px 0px #2028FB;
}

.redeem-item-page .card-item {
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 68, 208, 0.35);
}

.redeem-item-page .card-item .img-item {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.redeem-item-page .card-item .img-item img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.redeem-item-page .card-item .img-item {
    background-color: #ECF5FF;
}

.redeem-item-page .card-item .detail-item {
    padding: 15px 10px 10px 10px;
}

.redeem-item-page .card-item .detail-item .title-item h2 {
    color: var(--color-txt-darkBlue);
    font-size: 14px;
}

.redeem-item-page .card-item .detail-item .point-item {
    margin: 10px 0;
}

.redeem-item-page .card-item .detail-item .point-item h2 {
    color: var(--color-txt-darkBlue);
    font-size: 14px;
}

.redeem-item-page .card-item .detail-item .point-item span {
    color: var(--color-pri-deepBlue);
    font-size: 16px;
}

.redeem-item-page .btn-redeem {
    background: linear-gradient(307.25deg, #FF6D19 34.06%, #FFC619 129.15%);
    border-bottom: 5px solid #BC4500;
    border-radius: 40px;
    color: var(--color-txt-white);
    font-size: 14px;
    padding: 7px 10px 2px 10px;
    line-height: 1.5;
    display: block;
    max-width: 112px;
    margin: 0 auto;
    width: 100%;
}

.redeem-item-page .btn-nonClick {
    pointer-events: none;
    opacity: 0.5;
}

.redeem-item-page .wrap-card-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
    margin-top: 20px;
    margin-bottom: 60px;
}

/* popup-redeem-item */
.remodal.popup-redeem-item {
    border-radius: 40px;
    padding: 35px 45px 35px 45px;
    background: linear-gradient(225.95deg, #FFFFFF -83.22%, #F2F7FF 155.64%);
}

.remodal.popup-redeem-item .redeem-close {
    right: 20px;
    top: 20px;
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    border-radius: 40px;
    color: #fff;
}

.remodal.popup-redeem-item .redeem-close::before {
    font-size: 30px;
}

.popup-redeem-item .wrap-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* .popup-redeem-item .img-item {  } */
.popup-redeem-item .img-item img {
    max-width: 120px;
}

.popup-redeem-item .detail-item {
    margin: 10px 10px;
}

.popup-redeem-item .detail-item h2 {
    font-size: 16px;
    color: var(--color-txt-darkBlue);
}

.popup-redeem-item .detail-item h3 {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

.popup-redeem-item .detail-item span {
    font-size: 28px;
    color: var(--color-pri-deepBlue);
    margin-right: 5px;
}

/* .popup-redeem-item .form-item {  } */
.popup-redeem-item .edit-input-popupRedeem {
    width: 270px;
}

.popup-redeem-item .wrap-btn-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-redeem-item .wrap-btn-bottom .btn-addtoCart {
    background: linear-gradient(307.25deg, #FF6D19 34.06%, #FFC619 129.15%);
    border-bottom: 5px solid #BC4500;
    border-radius: 40px;
    color: var(--color-txt-white);
    font-size: 16px;
    padding: 10px 35px 8px 35px;
    line-height: 1.5;
    margin-top: 30px;
    display: block;
    opacity: 0.5;
    pointer-events: none;
}

.popup-redeem-item .wrap-btn-bottom .btn-addtoCart.active {
    opacity: 1;
    pointer-events: auto;
}


/* edit dropdown template */
.edit-dropdown-all {
    height: 185px;
    overflow: scroll;
    border-radius: 20px;
    z-index: 200;
}


/* popup-delivery-list */
.popup-delivery-list {
    padding: 35px 20px 35px 20px !important;
}

.popup-delivery-list .box-delivery .title-box h2 {
    font-size: 20px;
    color: var(--color-txt-darkBlue);
}

.popup-delivery-list .box-delivery {
    border-bottom: 1px solid #D7D7D7;
    padding-bottom: 30px;
}

.popup-delivery-list .box-delivery .table-list-box {
    border: 1px solid #D7D7D7;
    border-radius: 15px;
    overflow: hidden;
}

.popup-delivery-list .box-delivery .table-list-box table {
    background-color: #fff;
}

.popup-delivery-list .box-delivery .table-list-box thead {
    background: var(--color-pri-deepBlue);
    color: var(--color-txt-white);
    font-size: 14px;
}

.popup-delivery-list .box-delivery .table-list-box tr td {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
    padding: 15px 10px 15px 10px;
}

.popup-delivery-list .box-delivery .table-list-box tr th {
    padding: 15px 0;
    border: 1px solid #D7D7D7;
}

.popup-delivery-list .box-delivery .table-list-box .text-limit {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(1.4em * 1);
    line-height: 1.4em;
}

.popup-delivery-list .table-list-box .fix-w-l {
    width: 220px;
}

.popup-delivery-list .table-list-box .fix-w-r {
    width: 90px;
}

/* .popup-delivery-list .table-list-box .border-l { border-right: 1px solid red; } */

.popup-delivery-list .txt-sum-point {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 15px;
}

.popup-delivery-list .txt-sum-point .box-txt {
    margin-right: 30px;
}

.popup-delivery-list .txt-sum-point .box-txt h2 {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
}

.popup-delivery-list .txt-sum-point .box-sumPoint {
    margin-right: 60px;
}

.popup-delivery-list .txt-sum-point .box-sumPoint h2 {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
}

.popup-delivery-list .box-delivery .title-box {
    margin-bottom: 25px;
}

.popup-delivery-list .box-delivery .txt {
    margin-top: 20px;
}

.popup-delivery-list .box-delivery .txt h2 {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
    text-align: left;
}

.popup-delivery-list .box-delivery .wrap-card-editAddress {
    margin-top: 10px;
}

.popup-delivery-list .box-delivery .wrap-card-editAddress .card-editAddress .ele-name {
    text-align: left;
}

.popup-delivery-list .box-delivery .wrap-card-editAddress {
    text-align: left;
}

.popup-delivery-list .box-delivery .wrap-card-editAddress .card-editAddress {
    margin-bottom: 0;
}

.popup-delivery-list .edit-box-delivery {
    width: 100%;
}

.popup-delivery-list .edit-box-delivery .wrap-btn-addmore-add {
    display: flex;
    align-items: center;
    justify-content: center;
}


.popup-delivery-list .wrap-card-editAddress .wrap-btn-addmore-add .btn-addmoreAdd {
    background: linear-gradient(135.16deg, #EFFAFF -36.86%, #EAF4F9 75.07%);
    border-bottom: 5px solid #7294DB;
    border-radius: 40px;
    color: var(--color-pri-deepBlue);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 50px 10px 50px;
}

.popup-delivery-list .wrap-card-editAddress .wrap-btn-addmore-add .btn-addmoreAdd img {
    margin: -5px 10px 0 0;
}

.popup-redeem-item .wrap-popup .wrap-btn-delivery-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
}

.popup-redeem-item .wrap-popup .wrap-btn-delivery-list .btn-redeem-more {
    background: linear-gradient(307.25deg, #FF6D19 34.06%, #FFC619 129.15%);
    border-bottom: 5px solid #BC4500;
    border-radius: 40px;
    font-size: 16px;
    color: var(--color-txt-white);
    width: 190px;
    padding: 10px 0;
}

.popup-redeem-item .wrap-popup .wrap-btn-delivery-list .btn-confirm-sent {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    border-radius: 40px;
    font-size: 16px;
    color: var(--color-txt-white);
    width: 190px;
    padding: 10px 0;
    margin-top: 10px;
}




/* popup-successful-redemption */
.popup-successful-redemption {
    padding: 35px 35px 35px 35px !important;
}

.popup-successful-redemption .popup_in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.popup-successful-redemption .popup_in .ele-txt {
    margin-top: 20px;
    margin-bottom: 40px;
}

.popup-successful-redemption .popup_in .ele-txt h2 {
    font-size: 24px;
    color: var(--color-txt-darkBlue);
}

.popup-successful-redemption .popup_in .ele-txt h3 {
    font-size: 16px;
    color: var(--color-txt-darkBlue);
}

.popup-successful-redemption .remodal-close-succes:before {
    content: 'ตกลง';
    font-size: 16px;
    color: var(--color-txt-white);
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
}

.popup-successful-redemption .remodal-close-succes {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    width: 150px;
    border-radius: 40px;
    padding: 20px 0;
    top: 255px;
    left: 110px;
}



/* popup-unsuccessful-exchange */
.popup-unsuccessful-exchange {
    padding: 35px 35px 35px 35px !important;
}

.popup-unsuccessful-exchange .popup_in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.popup-unsuccessful-exchange .popup_in .ele-txt {
    margin-top: 20px;
    margin-bottom: 40px;
}

.popup-unsuccessful-exchange .popup_in .ele-txt h2 {
    font-size: 24px;
    color: var(--color-txt-darkBlue);
}

.popup-unsuccessful-exchange .popup_in .ele-txt h3 {
    font-size: 16px;
    color: var(--color-txt-darkBlue);
}

.popup-unsuccessful-exchange .remodal-close-succes:before {
    content: 'ตกลง';
    font-size: 16px;
    color: var(--color-txt-white);
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
}

.popup-unsuccessful-exchange .remodal-close-succes {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    width: 150px;
    border-radius: 40px;
    padding: 20px 0;
    top: 225px;
    left: 110px;
}




/* popup-addnew-address */
.popup-addnew-address {
    max-height: 630px;
}

.popup-addnew-address .wrap-popup-formNew-add .txt-title h2 {
    font-size: 20px;
    color: var(--color-txt-darkBlue);
    text-align: center;
}

.popup-addnew-address .wrap-formNew-add {
    margin-top: 30px;
}



/* profile-detail-page */
.profile-detail-page {
    margin-top: 0;
    position: relative;
}

/* .profile-detail-page { margin-top: 129px; position: relative; } */
/* .profile-detail-page .card-profile-detail { border-radius: 30px; height: calc(100vh - 217px); overflow: scroll; padding: 30px 15px; background: linear-gradient(225.95deg, #FFFFFF -83.22%, #F2F7FF 155.64%); } */
.profile-detail-page .card-profile-detail {
    padding: 30px 15px;
    background: linear-gradient(225.95deg, #FFFFFF -83.22%, #F2F7FF 155.64%);
}

.profile-detail-page .img-user {
    position: absolute;
    width: 100px;
    height: 100px;
    background-size: cover;
    top: -50px;
    left: 50%;
    z-index: 1;
    border-radius: 50%;
    box-shadow: 0px 4px 4px rgba(26, 88, 255, 0.5);
    border: 3px solid #fff;
    transform: translate(-50%, 0);
}

.profile-detail-page .card-profile-detail .box-user {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.profile-detail-page .card-profile-detail .box-user h2 {
    font-size: 20px;
    color: var(--color-pri-deepBlue);
}

.profile-detail-page .card-profile-detail .box-user h3 {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
}

.profile-detail-page .card-profile-detail .box-user span {
    font-size: 24px;
    color: var(--color-pri-orange);
}

.profile-detail-page .card-profile-detail .box-detail-user {
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(0, 61, 208, 0.2);
    border-radius: 20px;
    padding: 20px;
}

.profile-detail-page .card-profile-detail .box-detail-user .wrap-box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 10px;
}

.profile-detail-page .card-profile-detail .box-detail-user .wrap-box .title-box {
    flex: 0 0 35%;
    font-size: 14px;
    color: var(--color-txt-darkBlue);
}

.profile-detail-page .card-profile-detail .box-detail-user .wrap-box .detail-box {
    flex: 0 0 65%;
    font-size: 14px;
    color: var(--color-txt-darkBlue);
}

.profile-detail-page .card-profile-detail .wrap-edit-personalInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.profile-detail-page .card-profile-detail .btn-edit-personal {
    background: linear-gradient(135.16deg, #EFFAFF -36.86%, #EAF4F9 75.07%);
    border-bottom: 5px solid #7294DB;
    border-radius: 40px;
    color: var(--color-pri-deepBlue);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 50px 10px 50px;
}

.profile-detail-page .card-profile-detail .btn-edit-personal img {
    margin: -5px 10px 0 0;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add {
    background: #F9FAFC;
    border-radius: 20px;
    padding: 25px 20px 25px 20px;
    border: 1px solid #D8D8D8;
    position: relative;
    margin-bottom: 25px;
}

.profile-detail-page .card-profile-detail .box-detail-address .txt-title h2 {
    font-size: 16px;
    color: var(--color-pri-deepBlue);
    margin: 20px 0 10px 0;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .name-add {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 -5px;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .name-add .ele {
    flex: 0 0 45%;
    position: relative;
    padding: 0 5px;
}

.profile-detail-page .card-profile-detail .wrap-edit-personalInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.profile-detail-page .card-profile-detail .btn-edit-personal {
    background: linear-gradient(135.16deg, #EFFAFF -36.86%, #EAF4F9 75.07%);
    border-bottom: 5px solid #7294DB;
    border-radius: 40px;
    color: var(--color-pri-deepBlue);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 50px 10px 50px;
}

.profile-detail-page .card-profile-detail .btn-edit-personal img {
    margin: -5px 10px 0 0;
}

.profile-detail-page .card-profile-detail .btn-logout-edit-personal {
    background: linear-gradient(307.25deg, #ff9b18 34.06%, #ff9b18 129.15%);
    border-bottom: 5px solid #fdc89f;
    border-radius: 40px;
    font-size: 16px;
    color: var(--color-txt-white);
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .name-add .ele:first-child:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    height: 15px;
    width: 1px;
    background-color: #686869;
    transform: translate(0, -50%);
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .name-add .ele h2 {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .name-add .text-limit {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(1.4em * 1);
    line-height: 1.4em;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .name-add .ele h3 {
    font-size: 14px;
    color: #686869;
}

/* .profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .name-add .ele h3::before { content: ''; position: absolute; top: 0; left: -10px; height: 15px; width: 1px; background-color: #686869; } */

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .detail-add {
    margin: 10px 0;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .detail-add h2 {
    font-size: 14px;
    color: #686869;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .wrap-btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .wrap-btn-add .btn-address {
    border: 1px solid #0044D0;
    border-radius: 40px;
    background-color: #fff;
    color: var(--color-pri-deepBlue);
    font-size: 12px;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .ele-btn-delete .btn-delete-add {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-radius: 40px;
    padding: 8px 10px;
    position: absolute;
    top: 8px;
    right: 8px;
    border-bottom: 5px solid #123ABF;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .ele-btn-delete .btn-delete-add img {
    width: 15px;
    padding-top: 5px;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add.active {
    background: linear-gradient(135.16deg, #EFFAFF -36.86%, #EAF4F9 75.07%);
    color: var(--color-pri-deepBlue);
    box-shadow: 0px 4px 14px rgba(0, 61, 208, 0.2);
    border-bottom: 5px solid #7294DB;
}

.profile-detail-page .card-profile-detail .box-detail-address .ele-box-add .wrap-btn-add .btn-address.active {
    background: var(--color-pri-deepBlue);
    color: #fff;
}

.profile-detail-page .card-profile-detail .wrap-btn-addmore-add {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.profile-detail-page .card-profile-detail .btn-addmoreAdd {
    background: linear-gradient(135.16deg, #EFFAFF -36.86%, #EAF4F9 75.07%);
    border-bottom: 5px solid #7294DB;
    border-radius: 40px;
    color: var(--color-pri-deepBlue);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 50px 10px 50px;
}

.profile-detail-page .card-profile-detail .btn-addmoreAdd img {
    margin: -5px 10px 0 0;
}

.profile-detail-page .card-profile-detail .wrap-btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    margin-bottom: 60px;
}

.profile-detail-page .card-profile-detail .btn-logOut {
    background-color: transparent;
    color: var(--color-pri-deepBlue);
    font-size: 16px;
    text-decoration: underline;
}



/* profile-edit */
.edit-form-profile .title-edit-profile {
    text-align: center;
    margin-bottom: 25px;
}

.edit-form-profile .title-edit-profile h2 {
    font-size: 20px;
    color: var(--color-txt-darkBlue);
}

.edit-form-profile input::placeholder {
    color: #474747;
    font-size: 14px;
}

/* .edit-input { background: #FFFFFF; box-shadow: 0px 4px 14px rgba(0, 61, 208, 0.2); border-radius: 40px; padding: 10px 10px 10px 20px; border: none; color: #474747; }
.edit-input-stamp { background: #FFFFFF; box-shadow: 0px 4px 14px rgba(0, 61, 208, 0.2); border-radius: 40px; padding: 10px 10px 10px 20px; border: none; color: #474747; } */
.edit-form-profile .wrap-btn-save-edit-perso {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
    margin-bottom: 50px;
}

.edit-form-profile .wrap-btn-save-edit-perso .btn-save-edit-perso {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    border-radius: 40px;
    font-size: 16px;
    color: var(--color-txt-white);
}



/* profile page and click edit address btn in card (จะขึ้นที่อยู่ในการจัดส่ง แล้วมีปุ่ม น่าจะสำหรับคนเข้าครั้งแรก แล้วยังไม่มีข้อมูลที่อยู่) */
.wrap-frist-add-title h2 {
    font-size: 20px;
    color: var(--color-txt-darkBlue);
    text-align: center;
}

.wrap-frist-add-title h3 {
    font-size: 14px;
    color: #686869;
    position: relative;
    text-align: center;
    margin-top: 5px;
}

.wrap-frist-add {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

.wrap-frist-add .btn-frist-add {
    background: linear-gradient(135.16deg, #EFFAFF -36.86%, #EAF4F9 75.07%);
    border-bottom: 5px solid #7294DB;
    border-radius: 40px;
    color: var(--color-pri-deepBlue);
    font-size: 14px;
    padding: 10px 50px 8px 50px;
    line-height: 1.5;
}




/* address create data user */
.wrap-title-create-add {
    margin-bottom: 20px;
}

.wrap-title-create-add h2 {
    font-size: 20px;
    color: var(--color-txt-darkBlue);
    text-align: center;
}

.wrap-btn-submit-create {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

.wrap-btn-submit-create .btn-sub-create {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    border-radius: 40px;
    font-size: 14px;
    padding: 10px 50px 8px 50px;
    opacity: 0.5;
    pointer-events: none;
}

.wrap-btn-submit-create .btn-sub-create.active {
    opacity: 1;
    pointer-events: inherit;
}



/* card-editAddress */
.wrap-card-editAddress .card-editAddress {
    background: #F9FAFC;
    border-radius: 20px;
    padding: 15px;
    border: 1px solid #D8D8D8;
    position: relative;
    margin-bottom: 25px;
}

.wrap-card-editAddress .card-editAddress.active {
    background: linear-gradient(135.16deg, #EFFAFF -36.86%, #EAF4F9 75.07%);
    color: var(--color-pri-deepBlue);
    box-shadow: 0px 4px 14px rgba(0, 61, 208, 0.2);
    border-bottom: 5px solid #7294DB;
}

.card-editAddress .ele-name {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 -5px;
}

.card-editAddress .ele-name .box {
    flex: 0 0 50%;
    position: relative;
    padding: 0 5px;
}

.card-editAddress .ele-name .box:first-child:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    height: 15px;
    width: 1px;
    background-color: #686869;
    transform: translate(0, -50%);
}

.card-editAddress .ele-name .box .text-limit {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(1.4em * 1);
    line-height: 1.4em;
}

.card-editAddress .ele-name .box h2 {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
}

.card-editAddress .ele-name .box h3 {
    font-size: 14px;
    color: #686869;
}


.card-editAddress .ele-address {
    margin: 10px 0;
}

.card-editAddress .ele-address h2 {
    font-size: 14px;
    color: #686869;
}


.card-editAddress .ele-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-editAddress .ele-btn .btn-address {
    border: 1px solid #0044D0;
    border-radius: 40px;
    background-color: #fff;
    color: var(--color-pri-deepBlue);
    font-size: 12px;
    padding: 7px 5px 5px 5px;
}

.card-editAddress .ele-btn .btn-address.active {
    background: var(--color-pri-deepBlue);
    color: #fff;
}


.wrap-addressPage .pad-pagination {
    margin-bottom: 60px !important;
}




/* register-page */
.register-page .card-register {
    max-width: 350px;
    margin: 0 auto;
    border-radius: 40px;
}

.register-page .card-register .box-txt-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.register-page .card-register .box-txt-img .ele h2 {
    font-size: 14px;
    color: var(--color-txt-darkBlue);
    margin-top: 10px;
}

.register-page .wrap-register-page {
    margin-top: 35px;
}

.component-register .wrap-btn-submit-regis {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

.component-register .btn-submit-regis {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    border-radius: 40px;
    padding: 15px 0 10px 0;
    font-size: 16px;
    color: var(--color-txt-white);
    width: 245px;
    text-align: center;
}

.component-register input {
    border-radius: 40px;
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(0, 61, 208, 0.2);
    padding: 0 20px;
    border: none;
}

.component-register input::placeholder {
    font-size: 14px;
    color: var(--color-txt-grey);
}

.component-register .disable-input {
    background: #F4F4F4;
    box-shadow: none;
    pointer-events: none;
}

.component-register .disable-input::placeholder {
    color: #9F9F9F;
}

.component-register input.input-error {
    border: 1px solid #FF6D19;
}

.component-register input.input-error::placeholder {
    color: #FF6D19;
    font-size: 14px;
}

/* popup-register-successful */
.popup-register-successful {
    padding: 15px 35px 35px 35px !important;
}

.popup-register-successful .popup_in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.popup-register-successful .popup_in .ele-txt {
    margin-top: 20px;
    margin-bottom: 40px;
}

.popup-register-successful .popup_in .ele-txt h2 {
    font-size: 24px;
    color: var(--color-txt-darkBlue);
}

.popup-register-successful .popup_in .ele-txt h3 {
    font-size: 16px;
    color: var(--color-txt-darkBlue);
}

.popup-register-successful .remodal-close-succes:before {
    content: 'ตกลง';
    font-size: 16px;
    color: var(--color-txt-white);
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
}

/* .popup-register-successful .remodal-close-succes { background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%); border-bottom: 5px solid #123ABF; width: 175px; border-radius: 40px; padding: 20px 0; top: 205px; left: 110px; } */
.popup-register-successful .remodal-close-succes {
    background: linear-gradient(307.25deg, #194FFF 34.06%, #19B2FF 129.15%);
    border-bottom: 5px solid #123ABF;
    width: 175px;
    border-radius: 40px;
    padding: 20px 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 155%);
}

/* reset remodal in html top */
html.remodal-is-locked {
    overflow: unset;
    -ms-touch-action: unset;
    touch-action: unset;
}

html.remodal-is-locked {
    overflow: unset;
    -ms-touch-action: unset;
    touch-action: unset;
}

.btn-addHistoryPlay {
    background: linear-gradient(307.25deg, #FF6D19 34.06%, #FFC619 129.15%);
    border-bottom: 5px solid #BC4500;
    border-radius: 40px;
    color: var(--color-txt-white);
    font-size: 14px;
    padding: 10px 70px 8px 70px;
    line-height: 1.5;
    margin-top: 10px;
    display: block;
}