:root{

    --color-pri-deepBlue: #0044D0;
    --color-pri-blue: #19B2FF;
    --color-pri-orange: #FF6D19;
    --color-pri-yellow: #FFC619;

    --color-sec-lightBlue: #C7E1FF;
    --color-sec-lightOrange: #FFD9B7;

    --color-txt-darkBlue: #060544;
    --color-txt-darkGrey: #364258;
    --color-txt-grey: #808080;
    --color-txt-white: #FFFFFF;
    --color-txt-orange: #FF6D19; 

    --color-bg-black: #000000;
    --color-bg-white: #F9FAFC;
    --color-bg-lightGrey: #EAECF1;

    --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; /*scroll-behavior: smooth;*/}
body {overflow-x: hidden; color:#000; background: #fff; font-family: 'scg_reg', sans-serif !important; line-height: 1.4; font-size: 16px; color: var(--color_dark);}
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;}
.text-bold{font-family: 'scg_bol', sans-serif !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%);}

.breadcrumb{margin-bottom: 35px;}
.breadcrumb > ul{
    display: flex;
    align-items: center;
    margin: 0 -10px;
}
.breadcrumb ul > li{
    position: relative;
    padding: 0 10px;
    font-size: 18px;
}
.breadcrumb ul li:not(:last-child){font-family: "scg_bol", sans-serif;}
.breadcrumb ul li:not(:last-child):before{
    --size: 8px;
    content: '';
    position: absolute;
    top: 46%;
    right: 0;
    width: var(--size);
    height: var(--size);
    border-top: 2px solid var(--color_dark);
    border-right: 2px solid var(--color_dark);
    transform: rotate(45deg) translate(0, -50%);
}

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; /*overflow: hidden;*/ 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; }
/* .bg-main > div { background: #fff url(../images/background/bg-main.jpg) top no-repeat; background-size: cover; max-width: 575px; margin: 0 auto; height: 100vh;} */

.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; font-family: 'scg_bol'; 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 { font-family: 'scg_bol'; color: var(--color-txt-white); font-size: var(--font-md); }
.header .show-point-pf h3 { font-family: 'scg_reg'; color: var(--color-txt-white); font-size: var(--font-md); }


/* Login page */
.wrap-login-page { background: #fff url(../images/background/bg-main-2.jpg) top no-repeat; background-size: cover; min-height: 667px; width: 100%; height: 100%; }
.wrap-login-page .box-img { max-width: 300px; margin: 0 auto; padding: 50px 0 10px 0; }

.wrap-login-page .wrap-login { background: #fff; border-radius: 40px 40px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.wrap-login-page .wrap-login .box-logo { margin-top: 30px; }
.wrap-login-page .wrap-login .box-logo img { width: 200px; }

.wrap-login-page .wrap-login .box-txt { margin: 15px 0 25px 0; }
.wrap-login-page .wrap-login .box-txt h2 { font-family: 'scg_bol'; font-size: 14px; color: var(--color-txt-darkBlue); }

.wrap-login-page .wrap-login .box-btn-login { padding-bottom: 46px; }
.wrap-login-page .wrap-login .box-btn-login .btn-login-line { background: linear-gradient(286.81deg, #44BA27 20.22%, #4ADB25 112.34%); border-bottom: 5px solid #0F4900; border-radius: 40px; font-family: 'scg_bol'; font-size: 16px; color: var(--color-txt-white); padding: 12px 40px 12px 40px; }
.wrap-login-page .wrap-login .box-btn-login .btn-login-line a { display: flex; align-items: center; justify-content: center; }
.wrap-login-page .wrap-login .box-btn-login .btn-login-line img { margin-right: 10px; }






/* set box width all pages */
.set-width-display { border-radius: 30px; height: calc(100vh - 196px); position: relative; overflow-y: scroll; overflow-x: hidden;}
/* .set-width-display { border-radius: 30px; height: calc(100vh - 168px); position: relative; overflow-y: scroll; overflow-x: hidden;} */
/* .set-line-bar-front .set-width-display::before{
    content: '';
    position: fixed;
    left: 50%;
    bottom: 68px;
    bottom: 65px;
    max-width: 575px;
    width: calc(100% - 30px);
    height: 60px;
    background-color: #fff;
    z-index: 1;
    transform: translate(-50%, 0px);
    border-radius: 0 0 30px 30px;
} */
/* .set-width-display { border-radius: 30px; height: calc(100vh - 217px); position: relative; overflow: scroll; } */






/* 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-family: 'scg_bol'; 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 { font-family: 'scg_bol'; 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-family: 'scg_reg'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_reg'; 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-family: 'scg_reg'; 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-family: 'scg_bol'; 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 { font-family: 'scg_reg'; 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-family: 'scg_bol'; 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 when user click add point */
/* .popup-notiAlert { position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 315px; margin: 0 auto; } */
/* .popup-notiAlert .cursor-pointer {  } */

.popup-notiAlert .wrap-notiAlert { pointer-events: none; }
.popup-notiAlert .wrap-notiAlert h2 { font-family: 'scg_bol'; font-size: 24px; color: var(--color-txt-darkBlue); }
.popup-notiAlert .wrap-notiAlert h3 { font-family: 'scg_reg'; 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 { font-family: 'scg_bol'; }

.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 .overlay{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transform: scale(2.5);
    z-index: -1;
} */

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


/* .item-list{display: flex; width: 100%; text-align: center; justify-content: space-between; border-radius: 35px; position: relative;}
.item-list > li{width: 115px; height: 90px;}
.item-list li .btn-menu .txt{color: #fff; font-size: 14px; font-family: 'scg_bol', sans-serif;}
.item-list .block-image{margin-bottom: 30px;}
.item-list .block-image img{width: fit-content; margin: 0 auto;}
.indication{
    position: absolute;
    top: -50%;
    left: 25px;
    width: 63px;
    height: 65px;
    background-color: #fff;
    border-radius: 50%;
    border: 8px solid #0a74f4;
    z-index: -1;
    transform: translate(0, 50%);
    transition: 0.5s;
}
.indication:before,
.indication:after{
    content: '';
    position: absolute;
    --size: 30px;
    top: 34%;
    width: var(--size);
    height: var(--size);
    background-color: transparent;
    box-shadow: 0 -10px 0 0 #0a74f4;
}
.indication:before{ 
    left: -34px; 
    border-top-right-radius: 50px;
}
.indication:after{ 
    right: -34px; 
    border-top-left-radius: 50px;
} */


/* 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 { font-family: 'scg_bol'; 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-family: 'scg_bol'; 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 { font-family: 'scg_bol'; 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 { font-family: 'scg_reg'; color: var(--color-txt-darkBlue); font-size: 14px; }
.redeem-item-page .card-item .detail-item .point-item span { font-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; font-size: 16px; color: var(--color-txt-darkBlue); }
.popup-redeem-item .detail-item h3 { font-family: 'scg_reg'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; font-size: 14px; }
.popup-delivery-list .box-delivery .table-list-box tr td { font-family: 'scg_reg'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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; font-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; font-size: 24px; color: var(--color-txt-darkBlue); }
.popup-successful-redemption .popup_in .ele-txt h3 { font-family: 'scg_reg'; font-size: 16px; color: var(--color-txt-darkBlue); }
.popup-successful-redemption .remodal-close-succes:before { content: 'ตกลง'; font-family: 'scg_bol' !important; 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-family: 'scg_bol'; font-size: 24px; color: var(--color-txt-darkBlue); }
.popup-unsuccessful-exchange .popup_in .ele-txt h3 { font-family: 'scg_reg'; font-size: 16px; color: var(--color-txt-darkBlue); }
.popup-unsuccessful-exchange .remodal-close-succes:before { content: 'ตกลง'; font-family: 'scg_bol' !important; 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-family: 'scg_bol'; 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-family: 'scg_bol'; font-size: 20px; color: var(--color-pri-deepBlue); }
.profile-detail-page .card-profile-detail .box-user h3 { font-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_reg'; 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; font-family: 'scg_bol'; 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-family: 'scg_bol'; 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 .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-family: 'scg_bol'; 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-family: 'scg_reg'; 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-family: 'scg_reg'; 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-family: 'scg_reg'; 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; font-family: 'scg_bol'; 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-family: 'scg_reg'; 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-family: 'scg_bol'; font-size: 20px; color: var(--color-txt-darkBlue); }
.edit-form-profile input::placeholder { color: #474747; font-family: 'scg_reg'; 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-family: 'scg_bol'; font-size: 16px; color: var(--color-txt-white); }



/* profile page and click edit address btn in card (จะขึ้นที่อยู่ในการจัดส่ง แล้วมีปุ่ม น่าจะสำหรับคนเข้าครั้งแรก แล้วยังไม่มีข้อมูลที่อยู่) */
.wrap-frist-add-title h2 { font-family: 'scg_bol'; font-size: 20px; color: var(--color-txt-darkBlue); text-align: center; }
.wrap-frist-add-title h3 { font-family: 'scg_reg'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; font-size: 14px; color: var(--color-txt-darkBlue); }
.card-editAddress .ele-name .box h3 { font-family: 'scg_reg'; font-size: 14px; color: #686869; }
/* .card-editAddress .ele-name .box h3::before { content: ''; position: absolute; top: 0; left: -10px; height: 15px; width: 1px; background-color: #686869; } */


.card-editAddress .ele-address { margin: 10px 0; }
.card-editAddress .ele-address h2 { font-family: 'scg_reg'; 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-family: 'scg_reg'; 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-family: 'scg_bol'; 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-family: 'scg_bol'; 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-family: 'scg_reg'; 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-family: 'scg_reg'; 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-family: 'scg_bol'; font-size: 24px; color: var(--color-txt-darkBlue); }
.popup-register-successful .popup_in .ele-txt h3 { font-family: 'scg_bol'; font-size: 16px; color: var(--color-txt-darkBlue); }
.popup-register-successful .remodal-close-succes:before { content: 'ตกลง'; font-family: 'scg_bol' !important; 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; }