@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,GRAD,wdth,wght@8..144,-200..150,25..151,100..1000&display=swap');


/* 
 * prevent jquery anchor delay 
 * (https://www.educba.com/jquery-scroll-anchor/)
 */
@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:auto}}

:root{ --gigi-blue:#012e73; --gigi-lblue:#00a3e0; --gigi-lgreen:#bde9c9; --gigi-darkblue:#122337; --border-lightblue:#a3b2e6; --gigi-oldblue:#004bc8; --gigi-oldblue2:#0c78f2; --gigilogo-path1:#012e73; --gigilogo-path2:#00a3e0; }
body { 
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	background: #ffffff;
	font-family: 'Roboto Flex', sans-serif; font-variation-settings: "wdth" 25;
    font-size: 15px; font-weight: 400; color: #122337; letter-spacing: 0.02em; line-height: 1.2;
}
h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1.1; }
p { line-height: 1.3; }
p:last-child { margin-bottom: 0; }
a { text-decoration: none; color: var(--gigi-lblue); }
a:hover, 
a:focus { color: #0a58ca; }
a[href*=mailto],
a[href*=http] { word-break: break-word; }
b, strong { font-size: 1.05em; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; }
.row { --bs-gutter-x: 1.875rem; }
.g-0, 
.gx-0 { --bs-gutter-x: 0; }
.g-1, 
.gx-1 { --bs-gutter-x: 0.25rem; }
.g-2, 
.gx-2 { --bs-gutter-x: 0.5rem; }
.g-3, 
.gx-3 { --bs-gutter-x: 1rem; }
.g-4, 
.gx-4 { --bs-gutter-x: 1.5rem; }
.g-5, 
.gx-5 { --bs-gutter-x: 3rem; }
.btn-close { position: absolute; top: 15px; right: 20px; transition: 0.3s ease-out; z-index: 1; }
.btn-close.white { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; }
.btn-close:hover { transform: scale(0.85); }
.offcanvas.offcanvas-bottom { height: auto; }
.tooltip { 
    font-family: 'Roboto Flex', sans-serif;
    font-size: 12px; font-weight: 500; line-height: 1.25;
}
.tooltip-inner { 
    background: #f3f3f3; padding: 1em; border-radius: 10px; 
    color: var(--gigi-darkblue); text-align: left;
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, 
.bs-tooltip-end .tooltip-arrow::before { border-right-color: #f3f3f3; }
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, 
.bs-tooltip-top .tooltip-arrow::before { border-top-color: #f3f3f3; }
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, 
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #f3f3f3; }
[data-bs-trigger*=click] { cursor: pointer; }
/*--*/
[class*=" cif-"], 
[class^=cif-] { font-size: 18px; vertical-align: middle; width: 2.333333em; height: 1.2em; }


@media only screen and (min-width: 1400px) {
	.container { max-width: 1300px; }
}


/*=====================================================================*/
/* CONTENT */
/*=====================================================================*/
/*body .material-symbols-outlined { display: none; }*/
body.donegmiconload .material-symbols-outlined { display: inline-block; }
/*--*/
.container,
.container-mobile {
    --bs-gutter-x: 1.875rem;
    padding-left: calc(.6 * var(--bs-gutter-x)); padding-right: calc(.6 * var(--bs-gutter-x));
}
.container-mobile { 
    max-width: 414px; width: 100%; 
    margin-right: auto; margin-left: auto; 
}
/*--*/
.content-wrap { padding: 30px 0; }
/*--*/
.nocontent { font-size: 0.9em; color: #666; text-align: center; }
.nocontent .icon.main { font-size: 3.6em; font-weight: 300; max-width: 50px; margin-bottom: 6px; opacity: 0.4; }
.nocontent .head { letter-spacing: 0; font-weight: 600; text-align: center; }
/*--*/
[class*=logo] { display: inline-block; }
[class*=logo] img,
[class*=logo] svg { width: 100%; image-rendering: -webkit-optimize-contrast; }
/*============================*/
/*====== page preloader ======*/
.pre_loader { 
    display: flex; align-items: center; justify-content: center; 
    background: white; width: 100%; height: 100%; 
    position: fixed; left: 0; top: 0; z-index: 99999; 
}
.pre_loader.hidden { animation: loadFadeOut 1s; animation-fill-mode: forwards; }
.pre_loader img { max-width: 310px; }
.pre_loader .loader { position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, 0); }
/*--*/
.pre_loader .video-wrap { 
    background-repeat: no-repeat; background-size: contain; background-position: center;
    position: relative; width: 60vh; aspect-ratio: 9 / 16; 
}
.pre_loader .video-wrap > .ratio { position: absolute; left: 50%; transform: translate(-50%,0); }
.pre_loader .ratio-9x16 { --bs-aspect-ratio: 177.78%; }

@keyframes loadFadeOut {
    100% { opacity: 0; visibility: hidden; }
}
/*============================*/
/*====== page preloader ======*/
.iconimgloader { width: 100%; height: 100vh; position: fixed; z-index: 13; text-align: center; }
.iconimgloader:before {
    content: ''; width: 100%; height: 100%; background: #fff; opacity: 1;
    position: absolute; top: 0; left: 0;
}
.iconimgloader .wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.iconimgloader .logo { width: 70px; }
.iconimgloader .logo-text { width: 130px; color: var(--gigi-lblue); }
.iconimgloader .loader { position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, 0); }
.iconimgloader.hidden { animation: loadFadeOut 1s; animation-fill-mode: forwards; }
/*====================================================================================*/
/*====== loader (container transition / load more indication / btn action load) ======*/
.loadcon { position: relative; }
.loadcon:before {
    content: ''; width: 100%; height: 100%; background: #fff; opacity: 0.65; z-index: 3;
    position: absolute; top: 0; left: 0;
}
.loadcon:after {
    content: ''; 
    position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; z-index: 3;
    /*
     * https://css-loaders.com/dots/
    */
    width: 35px; aspect-ratio: 1;
    --_g: no-repeat radial-gradient(circle closest-side, #122337 90%, #0000);
    background: var(--_g) 0 0, var(--_g) 0 100%, var(--_g) 100% 100%; background-size: 35% 40%;
    animation: l11 1s infinite linear;
}
.loadcon.transpage { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1055; }

@keyframes l11 {
    25% { background-position: 100% 0, 0 100%, 100% 100%; }
    50% { background-position: 100% 0, 0 0, 100% 100%; }
    75% { background-position: 100% 0, 0 0, 0 100%; }
    100% { background-position: 100% 100%, 0 0, 0 100%; }
}
/*--*/
.loader { margin-top: 10px; }
/*--*/
.actionbtn { position: relative; }
.actionbtn:after {
    content: ''; display: inline-block; width: 18px; height: 18px; margin-top: -9px; margin-left: -9px;
    position: absolute; top: 50%; left: 50%; opacity: 0; vertical-align: middle;
    border: 1px solid rgba(255,255,255,.3); border-left-color: #ccc; border-radius: 50%;
    transition: opacity 0s ease;
}
.actionbtn.loading { color: transparent !important; }
.actionbtn.loading:after { opacity: 1; transition: opacity .25s ease; animation: wd-rotate 450ms infinite linear; }

.actionbtn.loading input { color: transparent !important; width: 100%; }

@keyframes wd-rotate {
    100% { transform: rotate(360deg); }
}
/*========================================*/
/*====== tab (reward, notification) ======*/
ul.tabbtn-wrap { margin-bottom: 0; padding-left: 0; list-style: none; }
.tabbtn-wrap { background-color: #f8f8f8; }
.tabbtn-wrap a {
    display: flex; justify-content: center; align-items: center; height: 100%; position: relative; padding: 1.1em 1em; transition: 0.3s ease-out; cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--gigi-blue); text-transform: uppercase; 
}
.tabbtn-wrap a:after {
    content: ''; width: 100%; height: 2px; z-index: -1; background: var(--gigi-blue); 
    position: absolute; bottom: -2px; transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.tabbtn-wrap a.nav_left:after { left: 100%; }
.tabbtn-wrap a.nav_right:after { left: -100%; }
.tabbtn-wrap a.active { font-weight: 800; }
.tabbtn-wrap a.active:after { left: 0; }
/*====================*/
/*====== button ======*/
.btn-solid,
.btn-border {
    font-variation-settings: "wdth" 150;
    font-size: 12px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.075em; line-height: 1.1;
    display: inline-flex; justify-content: center; align-items: center;
    position: relative; padding: 0.5em 1em; border-radius: 100px; cursor: pointer;
}
/*--*/
.btn-solid {
    color: #fff;
    background: var(--gigi-darkblue); border: none; min-width: 110px; min-height: 45px; overflow: hidden; 
    transition: background 0.1s 0s ease-out;
}
.btn-solid:before { 
    content: ''; position: absolute; bottom: 0px; left: 0; 
    width: 100%; height: 100%; background: rgba(255,255,255,0.15); border-radius: inherit;
    transform: scale(0,1); transform-origin: 100% 0;
    transition: transform .3s cubic-bezier(.165,.84,.44,1) 0s;
}
.btn-solid div { position: relative; z-index: 1; }
.btn-solid:not(.disabled):hover,
.btn-solid:not(.disabled):focus { color: #fff; }
.btn-solid:not(.disabled):hover::before { 
    transform: scale(1); transform-origin: 0 0;
    transition: transform .45s cubic-bezier(.86,0,.07,1) 0s; 
}
.btn-solid.disabled { background: #c3c3c3 !important; cursor: not-allowed; color: #fff; text-decoration: line-through; }
/*--*/
.btn-solid.btn-fullbtm,
.btn-border.btn-fullbtm { width: 100%; border-radius: 0 !important; min-height: 50px; }
.btn-solid.btn-fullbtm { background: var(--gigi-blue); }
.btn-solid.btn-fullbtm:before { border-radius: 0 !important; }
/*--*/
.btn-border { 
    color: var(--gigi-darkblue); 
    background: none; border: 1px solid; 
    transition: background 0.3s ease-out;
}
.btn-border.disabled { background: #efefef; cursor: not-allowed; border-color: inherit !important; color: #c3c3c3 !important; text-decoration: line-through; }
.btn-border.disabled > * { color: #c3c3c3; }
/*--*/
.btn-effright { display: inline-flex; align-items: center; }
.btn-effright > div { 
    text-align: left; line-height: 1; 
    position: relative; width: 100%; padding-right: 1.1em;
}
.btn-effright > div:after {
    content: '\e5cc'; font-family: 'Material Symbols Outlined'; font-size: 1em; line-height: 1; letter-spacing: 0;
    position: absolute; right: 0; top: 50%; transform: translate(0,-50%); transition: 0.3s ease-out;
}
.btn-effright:hover > div:after { transform: translate(5px,-50%); }
/*--*/
.btn-split-wrap [class*=btn-] { 
    height: 100%; 
    display: inline-flex; justify-content: center; align-items: center;
}
.btn-split-wrap .btn-solid { border: 1px solid transparent; }
/*==========================*/
/*====== switch check ======*/
/* ** (https://codepen.io/alvarotrigo/pen/jOaXGyq) */
.btn-switchcheck { font-size: 11px; font-weight: 700; color: #363636; text-transform: uppercase; line-height: 1; letter-spacing: 0.1em; }
.btn-switchcheck input { position: absolute; opacity: 0; left: -9999px; }
.btn-switchcheck label {
    display: block; width: 115px; height: 26px; background: #e2e4ec; border-radius: 26px;
    position: relative; overflow: hidden; cursor: pointer; transition: all 0.3s ease;
}
.btn-switchcheck label:before {
    content: attr(data-on);
    position: absolute; top: 50%; right: 12px; transform: translate(0,-50%);
}
.btn-switchcheck label:after {
    content: attr(data-off); line-height: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 50%; height: calc(100% - 4px); background: #fff; border-radius: 26px;
    box-shadow: 0px 0px 6px -2px rgba(17,17,17,0.3);
    position: absolute; left: 2px; top: 50%; transform: translate(0,-50%);
    transition: all 0.3s ease;
}
.btn-switchcheck input:checked + label:before { content: attr(data-off); right: auto; left: 15px; }
.btn-switchcheck input:checked + label:after { content: attr(data-on); left: calc(50% - 2px); }
/*====================*/
/*====== status ======*/
.text.status { font-size: 11px; font-weight: 900; letter-spacing: 0.075em; text-transform: uppercase; }
.text.status.success { color: #00c892; }
.text.status.pending { color: #f7a15a; }
.text.status.failed { color: #f76c5a; }
/*--*/
.badge.status { 
    font-variation-settings: "GRAD" 150, "wdth" 25;
    font-size: 12px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; 
}
.badge.status.success { color: var(--gigi-blue); background: var(--gigi-lgreen); }
.badge.status.pending { color: var(--gigi-blue); background: #ffcca1; }
.badge.status.failed { color: var(--gigi-blue); background: #ffa599; }
.badge.status.bg-red { background: #f76c5a; }
.badge.status.normal { background: var(--gigi-darkblue); }
/*--*/
.badge.loc_status { font-size: 11px; }
.badge.loc_status.open { color: var(--gigi-blue); background: var(--gigi-lgreen); }
.badge.loc_status.close { color: var(--gigi-darkblue); background: #dedede; }
.badge.loc_status.busy { color: var(--gigi-darkblue); background: #f0e3ce; }
.badge.loc_status.recvisit { 
    font-size: 10px; white-space: normal; 
    background: var(--gigi-darkblue); padding: 0.4em 0.65em; border-radius: 4px;
}
/*--*/
.badge.icon { 
    font-size: 18px; font-weight: 700; color: #fff; text-align: center; line-height: 1.7;
    display: inline-block; width: 1.7em; height: 1.7em; background: var(--gigi-lblue); border-radius: 50%; padding: 0px ;
    position: absolute; top: 0; left: 0; z-index: 1;
}
/*--*/
.badge.qtt { 
    font-size: 11px; font-weight: 700; color: #fff; text-align: center; line-height: 1.7;
    display: inline-block; background: var(--gigi-oldblue); border-radius: 100px; padding: 0px 7px;
    position: absolute; top: -1em; right: -2px; z-index: 1;
}
/*--*/
.badge.entrycount {
    font-size: 14px; font-weight: 600; color: var(--gigi-darkblue);
    display: inline-flex; align-items: center; vertical-align: text-top;
    background: #fff; border-radius: 100px; padding: 2px 10px;
}
.badge.entrycount .icon { font-size: 1.25em; font-weight: 400; margin-right: 5px; color: #2eb0aa; }
/*===================*/
/*====== alert ======*/
.alertdot { position: relative; }
.alertdot:before {
    content: ''; display: inline-block; border-radius: 50%; 
    width: 1em; height: 1em; background: #ff6450; font-size: 11px;
    position: absolute; top: -0.45em; right: -2px;
}
/*--*/
.alert { 
    font-size: 12px; line-height: 1.1;
    display: flex; align-items: center; padding: 0.8em 0.8em; margin: 20px auto; border: none;
}
.alert .icon-wrap { line-height: 0; flex: 0 auto; margin-right: 6px; }
.alert .icon { font-size: 1.5em; }

.alert.normal { color: #666; background-color: #f3f3f3; }
/*--*/
.alert.notifsmall {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background-color: var(--gigi-darkblue); display: none; z-index: 1055;
    font-weight: 600; color: #fff; text-align: center; 
}
.alert.notifsmall > div { display: inline-block; vertical-align: middle; }
/*=======================*/
/*====== offcanvas ======*/
/*- custom disabled backdrop -*/
.cusoffcanvas-backdrop { 
    position: fixed; top: 0px; left: 0px; z-index: 1040;
    width: 100vw; height: 100vh; background-color: var(--gigi-darkblue); opacity: 0.5; 
}
/*--*/
.offcanvas-backdrop { background-color: var(--gigi-darkblue); }
.offcanvas-body::-webkit-scrollbar { width: 10px; }
.offcanvas-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); background-clip: padding-box; border: 3px solid transparent; border-radius: 10px; height: 8%; }
.offcanvas-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.02); background-clip: padding-box; border: 2px solid transparent; border-radius: 10px; }
/*--*/
.offcanvas .titlehead { 
    font-variation-settings: "wdth" 125; 
    font-size: 18px; font-weight: 800; letter-spacing: 0;
}
.offcanvas .stitle { font-size: 14px; font-weight: 400; color: #666; }
.offcanvas .btn-solid, 
.offcanvas .btn-border { border-radius: 8px; width: 100%; }
.offcanvas .btn-solid { background: var(--gigi-blue); }
.offcanvas .btn-solid:before { border-radius: 0; background: rgba(0,0,0,0.1); }
.offcanvas .btn-border { border: 1px solid var(--border-lightblue); color: var(--gigi-blue); }
.offcanvas .btn-border:hover { border-color: var(--gigi-blue); }
/*--*/
.infocanvasbtm.offcanvas { 
    border-radius: 20px 20px 0 0; max-height: 80vh; height: auto; overflow: hidden;
    /* for ios safe area use, <meta content="viewport-fit=cover"> */
    padding-bottom: env(safe-area-inset-bottom, 20px);
}
.infocanvasbtm .offcanvas-body { font-size: 14px; padding: 35px 0px 30px; isolation: isolate; }
/*--*/
.infocanvasright.offcanvas-end.offcanvas { 
    max-width: 400px; width: 85%;
    border: none; border-radius: 20px 0 0 20px; 
}
.infocanvasright.offcanvas-end .offcanvas-body { isolation: isolate; }
/*===================*/
/*====== modal ======*/
.modal-backdrop { background-color: var(--gigi-darkblue); }
.modal-content { background: #f3f3f3; border: none; border-radius: 20px; padding: 35px 20px 25px; }
.modal_header {
    background-color: #f3f3f3; width: calc(100% + 40px); 
    padding: 18px 50px 15px 50px; margin-top: -35px; margin-bottom: 16px; 
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); border-radius: 20px 20px 0 0;
    position: relative; top: 0; left: -20px; color: var(--gigi-darkblue); text-align: center;
}
.modal_header .title { 
    font-variation-settings: "GRAD" 150, "wdth" 112.5;
    font-size: 20px; line-height: 1.05; letter-spacing: 0;
    margin: 0; 
}
/*--*/
.modal .btn-solid, 
.modal .btn-border { 
    letter-spacing: 0.05em;
    border-radius: 10px; width: 100%;
}
.modal .btn-solid { background: var(--gigi-darkblue); }
.modal .btn-solid:before { border-radius: 0; background: rgba(255,255,255,0.1); }
.modal .btn-solid.okclose { width: calc(100% + 20px); margin: 8px -10px -10px; }
.modal .btn-border { border: 1px solid var(--gigi-darkblue); color: var(--gigi-darkblue); }
/*--*/
.modal .btn-split-wrap.full { width: calc(100% + 40px); margin-bottom: -25px; position: relative; top: 0; left: -20px; }
.modal .btn-split-wrap.full [class*=btn] { 
    min-height: 54px; border-color: #d2d2d2; 
    font-size: 13px; font-weight: 900; 
}
.modal .btn-split-wrap.full .left [class*=btn] { border-radius: 0 0 0 20px; border-left: none; border-bottom: none; border-right: none; }
.modal .btn-split-wrap.full .right [class*=btn] { border-radius: 0 0 20px 0; border-right: none; border-bottom: none; }
.modal .btn-split-wrap.full .btn-solid { background: #e7e7e7; color: var(--gigi-darkblue); }
/*--*/
.modal-video .btn-close { top: inherit; bottom: calc(100% + 5px); right: 0; }
.modal-video .ratio { 
    overflow: hidden; border-radius: 15px; 
    /* for safari usage */
    isolation: isolate;
}
/*--*/
.alertpop_succ .btn-close { filter: invert(1); }
.alertpop_succ .modal_header { background-color: var(--gigi-lgreen); }
/*--*/
.pop-msg .btn-close { width: 3em; height: 3em; top: 0; right: 0; }
/*==================*/
/*====== form ======*/
/* temp solution way to remove autofill bg color*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: var(--gigi-darkblue) !important;
}
.form-control::-webkit-input-placeholder { color: #c6cbde; opacity: 0.5; }
.form-control:-moz-placeholder { color: #c6cbde; opacity: 0.5; }
.form-control::-moz-placeholder { color: #c6cbde; opacity: 0.5; }
.form-control:-ms-input-placeholder { color: #c6cbde; opacity: 0.5; }
/*--*/
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/*--*/
.form-group { position: relative; margin-bottom: 12px; }
.form-control { 
    font-variation-settings: "wdth" 25;
    font-size: inherit; font-weight: inherit; line-height: 1.2; letter-spacing: 0.02em; 
    height: 45px; border-radius: 8px; border: 1px solid #d1d8f2; 
}
.form-control:focus { border-color: var(--gigi-blue); box-shadow: none; }
select.form-control { cursor: pointer; }
textarea.autoresizing { overflow: hidden; resize: none; }
/*===========================*/
/*====== input STYLE 1 ======*/
.form-group.d1 { margin-bottom: 5px; }
.form-group.d1 label { 
    font-size: 12px; color: #666; 
    padding: 10px 15px 0; cursor: text; position: absolute; z-index: 1;
}
/*--*/
.form-group.d1 .icon { 
    position: absolute; right: 15px; top: 50%; transform: translate(0,-50%); z-index: 1;
    font-size: 1.65em; color: #666; line-height: 0; 
}
.form-group.d1 .icon span { font-size: 1em; }
.form-group.d1 .icon.pw_eye_hideon { z-index: 2; }
/*--*/
.form-group.d1 .deco { 
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; 
    border-radius: 8px; border: 1px solid #d1d8f2; overflow: hidden; transition: 0.3s; 
}
.form-group.d1 .deco:before, 
.form-group.d1 .deco:after {
    content: ''; width: 0; height: 0; background-color: #f8f8f8; 
    position: absolute; left: 0; top: 0; transition: 0.3s;
}
.form-group.d1 .deco:after { left: auto; right: 0; top: auto; bottom: 0; }
/*--*/
.form-group.d1 .form-control {
    font-variation-settings: "GRAD" 35, "wdth" 62.5;
    font-size: 20px; font-weight: 600; letter-spacing: 0.01em;
    background-color: transparent; box-shadow: none; border: none; border-radius: 0px; height: 100%; padding: 28px 60px 8px 15px; position: relative; z-index: 1; 
}
.form-group.d1 .form-control:focus ~ .deco { border-color: var(--gigi-blue); }
.form-group.d1 .form-control:focus ~ .deco:before,
.form-group.d1 .form-control:focus ~ .deco:after { width: 50%; height: 100%; }
/*--*/
.form-group.d1 select.form-select { background: none; }
/*--*/
.form-group.d1 .input-group select.form-select {
    max-width: 100px; padding: 0 15px; align-self: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px;
}
.form-group.d1 .input-group .form-control:last-child { 
    min-height: 60px; padding: 10px 15px; border-left: 1px solid #d2d9f2 !important;
}
/*--*/
.form-group.d1.xlabel .form-control { padding-top: 8px; min-height: 60px; }
/*--*/
.form-group.d1 .form-control[disabled] { 
    -webkit-text-fill-color: #666; /*for ios*/
    color: #666; 
    opacity: 1; cursor: not-allowed; 
}
.form-group.d1 .form-control[disabled] ~ .deco { background: #fff; border-color: #f3f3f3; }
/*===========================*/
/*====== check / radio ======*/
.container_check,
.container_radio {
    display: block; position: relative; padding-left: 30px; margin-bottom: 5px; cursor: pointer;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.container_check small,
.container_radio small { font-size: 12px; font-weight: 400; color: #666; }
.container_check input,
.container_radio input { position: absolute; opacity: 0; left: -9999px; }
.container_check .checkmark,
.container_radio .checkmark { position: absolute; left: 0; height: 20px; width: 20px; }
/*--*/
/*- check -*/
.container_check .checkmark {
    top: -1px; border: 2px solid #fff; border-radius: 3px; background-color: #ebebeb;
    transition: color, background 0.3s ease-in-out;
}
.container_check .checkmark:after {
    content: '\e92f'; 
    font-family: 'Material Symbols Outlined'; font-size: 20px; font-weight: 400; color: var(--gigi-lgreen); line-height: 1.2; letter-spacing: 0;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;
}
.container_check:hover .checkmark { border: 2px solid rgba(0,75,200,0.2); }
.container_check input:checked ~ .checkmark { 
    background-color: var(--gigi-blue); border: 2px solid transparent; 
    box-shadow: 0px 0px 0px 2px rgba(1,46,115,0.3); 
}
.container_check input:checked ~ .checkmark:after { display: block; }
/*--*/
/*- radio -*/
.container_radio .checkmark {
    top: 0; border: 2px solid rgba(0,75,200,0.2); border-radius: 50%; background-color: #fff;
    transition: all 0.3s ease-in-out;
}
.container_radio .checkmark:after {
    content: ''; width: 10px; height: 10px; display: block; 
    border-radius: 50%; background: var(--gigi-blue);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0;
}
.container_radio:not(.disabled):hover .checkmark { border: 2px solid var(--gigi-blue); }
.container_radio input:checked ~ .checkmark { 
    border: 2px solid var(--gigi-blue); 
    box-shadow: 0px 0px 0px 2px rgba(0,75,200,0.2); 
}
.container_radio input:checked ~ .checkmark:after { opacity: 1; }

.container_radio.disabled { cursor: auto; }
.container_radio.disabled .checkmark { display: none; }
/*===================================*/
/*====== radio box (pass share) ======*/
.radio-npu-wrap { position: relative; margin-top: 0; margin-bottom: 8px; }
.radio-npu-wrap input { position: absolute; left: -9999px; }
.radio-npu-wrap label {
    position: relative; display: block; padding: 8px 8px; min-width: 100px; width: 100%;
    background: #f3f3f3; border-radius: 6px; cursor: pointer; overflow: hidden;
    font-size: 30px; font-weight: 600; color: var(--gigi-blue); text-align: center; line-height:1; 
}
.radio-npu-wrap label span { position: relative; z-index: 1; }
.radio-npu-wrap label:before { content: none; }
.radio-npu-wrap label:after {
    content: ''; width: 100%; height: 100%; background: var(--gigi-blue); border-radius: 0; 
    position: absolute; top: 0px; left: 0px; opacity: 0; 
    transform: scale(0); transition: all 0.2s ease;
}
.radio-npu-wrap input:checked + label { color: #fff; }
.radio-npu-wrap input:checked + label:after { opacity: 1; transform: scale(1); }
/*=================*/
/*====== ... ======*/
.numbers-row { position: relative; }
.numbers-row input[type=number] { -moz-appearance: textfield; }
.numbers-row input[type=number]::-webkit-outer-spin-button,
.numbers-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numbers-row input {
    padding: 0.375rem 1.75rem; border: 1px solid #a3aeff !important; border-radius: 100px; height: 42px;
    font-variation-settings: "wdth" 75;
    font-size: 19px; font-weight: 700; color: var(--gigi-blue) !important; text-align: center;
}
.numbers-row input[readonly] { background-color: #fff; }
.numbers-row input:focus { outline: none; box-shadow: none; }
.numbers-row .button_inc {
    font-size: 18px; color: var(--gigi-blue); line-height: 0;
    position: absolute; top: 50%; transform: translate(0,-50%); cursor: pointer; z-index: 2; 
    display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 100%;
}
.numbers-row .button_inc:before { font-family: 'Material Symbols Outlined'; font-size: 1.35em; font-weight: 300; line-height: 1; letter-spacing: 0; }
.numbers-row .button_inc:hover { color: var(--gigi-darkblue); }
.numbers-row .dec { left: 0px; }
.numbers-row .inc { right: 0px; }
.numbers-row .dec:before { content: '\e15b'; }
.numbers-row .inc:before { content: '\e145'; }
/*===================================*/
/*====== error / required mark ======*/
.error_message { color: #ee5151 !important; }
/*--*/
label.error { 
    font-size: 12px; font-weight: 600; color: #f76c5a; letter-spacing: 0.025em;
    display: block; margin: 5px 0; padding: 0px 3px 5px; 
}
label.error:empty { display: none !important; }
.form-control.error { border-color: #f76c5a !important; }
/*--*/
.result-msg > * { 
    border: 1px solid; padding: 0.5em 1em; margin-top: 6px; border-radius: 5px; 
    font-size: 13px; font-weight: 600; line-height: 1.1;
}
.result-msg > .successmsg { color: #4bb471; background: rgba(0,200,146,0.1); }
.result-msg > .failedmsg { color: #f76c5a; background: rgba(247,108,90,0.15); }
/*--*/
form .remark { font-size: 0.84em; color: #666; line-height: 1.05; padding: 10px 15px; }
form .requiremark { font-weight: 700; color: #f76c5a; }
/*=================*/
/*====== ... ======*/
.filtercat-wrap { padding-top: 16px; padding-bottom: 16px; }
.filtercat-wrap ul { margin-bottom: 0; padding-left: 0; list-style: none; white-space: nowrap; display: flex; }
.filtercat-wrap ul.owl-carousel:after {
    content: ''; border-right: 1px solid var(--border-lightblue); height: calc(100% + 6px);
    position: absolute; top: 50%; right: -1px; transform: translate(0,-50%);
}
.filtercat-wrap ul li { display: inline-block; margin-right: 5px; }
.filtercat-wrap ul li:last-child { margin-right: 0; }
.filtercat-wrap ul li a { 
    font-variation-settings: "GRAD" 0, "wdth" 25;
    font-size: 13px; font-weight: 500; color: var(--gigi-blue); text-transform: none; letter-spacing: 0.02em;
    padding: 0.5em 1em; 
}
.filtercat-wrap ul li a.active { color: #fff; background-color: var(--gigi-blue); }
/*--*/
.filtercat-wrap .owl-carousel { line-height: 0; }
.filtercat-wrap .owl-carousel .owl-item { float: none; display: inline-block; }
/*============================*/
/*====== favourite love ======*/
.favourite-check {
    position: absolute; bottom: 12px; right: 15px; z-index: 1;
    font-size: 0; line-height: 1; letter-spacing: 0;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.favourite-check input { position: absolute; opacity: 0; left: -9999px; }
.favourite-check .icon:after { content: '\e87d'; font-family: 'Material Symbols Outlined'; font-size: 20px; color: #ff6787; cursor: pointer; }
.favourite-check input:checked ~ .icon:after { font-variation-settings: "FILL" 1, "wght" 400; }
.favourite-check input[disabled] ~ .icon:after { cursor: not-allowed; }
/*=================*/
/*====== ... ======*/
.fixedbtm-wrap {
    width: 100%; padding: 17px 0px; position: fixed; left: 0; bottom: 0; z-index: 2;
    background-color: #fff; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
}
.fixedbtm-wrap .btn-solid, 
.fixedbtm-wrap .btn-border { font-size: 11px; }
/*--*/
.bordround-tiny { border-radius: 5px; padding: 0.65em 0.8em; }
.minw-auto { min-width: auto; }
.minh-auto { min-height: auto; }
.fw-semibold { font-weight: 600; }
/*--*/
.overlaymask { position: relative; }
.overlaymask:before {
    content: ''; width: 100%; height: 100%; background: #fff; opacity: 0.55; z-index: 2;
    position: absolute; top: 0; left: 0;
}
.overlaymask > .badge.status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
/*--*/
/* ** (https://codepen.io/skryptz/pen/KvRPPY) */
.lazypending { /*width: 100%;*/ padding: 0 !important; }
.lazypending:before {
    content: ''; aspect-ratio: 1; width: 100%; display: block; float: left;
    animation-name: shimmer;
    animation-duration: 8s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-timing-function: linear;
    /*background: #f8f8f8; */
    background-image: linear-gradient(to right, rgba(248,248,248,1) 4%, rgba(243,243,243,0.85) 25%, rgba(248,248,248,1) 36%);
}
.plistaddtc .lazypending:before {
    background-image: linear-gradient(to right, rgba(248,248,248,0.3) 4%, rgba(240,227,206,1) 25%, rgba(248,248,248,0.3) 36%);
}

@keyframes shimmer {
    0% { background-position: -1200px 0; }
    100% { background-position: 1200px 0; }
}

.lazypending img { position: absolute; }
/*--*/
.cta_rateapp-wrap { position: relative; background: #ecf1fa; padding: 12px 8px; border-radius: 8px; margin: 8px 0; }
.cta_rateapp-wrap .img img { max-width: 75px; border-radius: 8px; position: relative; top: 1px; }
.cta_rateapp-wrap .title { font-variation-settings: "wdth" 125; font-size: 15px; font-weight: 700; }
.cta_rateapp-wrap .desc { font-size: 12px; color: #666; letter-spacing: 0.025em; margin-top: 3px; }
.cta_rateapp-wrap .btn-solid {
    font-size: 8px; font-weight: 900; 
    min-width: auto; min-height: auto; background: var(--gigi-lblue); margin-top: 13px; padding: 0.85em 1em; border-radius: 5px;
}
.cta_rateapp-wrap .btn-close { top: 10px; right: 10px; }
/*=================*/
/*====== ... ======*/


/*=====================================================================*/
/* HEADER */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.innerback.tophead-wrap { 
    min-height: 70px; background: var(--gigi-blue); padding: 25px 55px; 
    border-radius: 0 0 20px 20px; position: relative; z-index: 2;
    color: #fff; text-align: center; 
}
.innerback.tophead-wrap .titlehead .title { 
    font-variation-settings: "wdth" 150;
    font-size: 18px; font-weight: 1000; color: #fff; text-transform: uppercase; letter-spacing: 0; word-break: break-word;
    margin-bottom: 0; 
}
.innerback.tophead-wrap .titlehead .desc { margin-top: 2px; font-size: 12px; }
.innerback.tophead-wrap .titlehead.sp2 { padding-right: 40px; position: relative; left: 20px; }
/*--*/
.innerback.tophead-wrap .btn-back {
    display: inline-block; cursor: pointer; z-index: 1;
    position: absolute; left: 15px; top: 50%; transform: translate(0,-50%);
    font-size: 30px; color: #fff; line-height: 0; letter-spacing: 0;
}
.innerback.tophead-wrap .btn-back .icon { font-size: 1em; }
/*--*/
.innerback.tophead-wrap .iconright { 
    position: absolute; top: 50%; right: 20px; transform: translate(0,-50%);
    display: flex; align-items: center; column-gap: 5px;
}
.innerback.tophead-wrap .iconright > [class*=icon] { 
    display: inline-block; position: relative; 
    font-weight: 300; color: #fff; line-height: 0;
}
.innerback.tophead-wrap .iconright .text {
    font-variation-settings: "wdth" 25;
    font-size: 9px; line-height: 1; white-space: nowrap; letter-spacing: 0.01em;
    position: absolute; bottom: -10px; left: 50%; transform: translate(-50%,0); 
}


/*=====================================================================*/
/* MEMBER REGISTRATION */
/*=====================================================================*/
.register-wrap { font-size: 14px; }
.register-wrap > div { padding-bottom: 100px; }
.register-wrap .logo-text-wrap svg { max-width: 180px; color: var(--gigi-lblue); }
/*--*/
.register-wrap .content-wrap { max-width: 414px; margin: 0 auto; padding: 35px 0px; }
.register-wrap .titlehead { text-align: center; }
.register-wrap .titlehead .title { 
    font-variation-settings: "wdth" 150;
    font-size: 22px; font-weight: 1000; color: var(--gigi-blue); letter-spacing: 0; text-transform: uppercase; 
    margin-bottom: 2px; 
}
/*--*/
.register-wrap form .btn-solid { 
    width: 100%; 
    font-variation-settings: "wdth" 150; font-size: 12px;
}
.register-wrap form .btn-solid:before { background: rgba(155,155,155,0.1); }
/*=======================*/
/*====== mobile no ======*/
.iti--fullscreen-popup.iti--container.iti--country-search { justify-content: center; }
.iti { width: 100%; }
.iti__selected-country,
input.iti__tel-input { font-variation-settings: "wdth" 25; font-size: 20px; font-weight: 600; letter-spacing: 0.05em; }
.iti--show-selected-dial-code .iti__selected-country { background: none; }
.iti__arrow {
    font-family: 'Material Symbols Outlined'; font-size: 16px; line-height: 1; letter-spacing: 0;
    border: none; width: auto; height: auto; margin-left: 3px;
}
.iti__arrow:before { content: '\e5cf'; }
/*--*/
.iti--inline-dropdown .iti__dropdown-content { 
    white-space: normal; box-shadow: 0px 0px 7px rgba(0,0,0,0.1); 
    border: none; border-radius: 0 0 10px 10px;
}
.iti__search-input { 
    font-variation-settings: "wdth" 25; letter-spacing: 0.02em;
    padding: .375rem .75rem; background-color: #fff; height: 45px; border-bottom: 1px solid #ececec; outline: 0; 
}
/*--*/
/* ** for safari, if not will have overscroll */
ul.iti__country-list:not(.iti__hide) { display: grid; max-height: 280px; }
ul.iti__country-list::-webkit-scrollbar { width: 10px; }
ul.iti__country-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); background-clip: padding-box; border: 3px solid transparent; border-radius: 10px; height: 8%; }
ul.iti__country-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.02); background-clip: padding-box; border: 2px solid transparent; border-radius: 10px; }
/*--*/
.iti li.iti__country { font-size: 14px; font-weight: 500; padding: 7px 8px; }
.iti li.iti__country:not(:last-child) { border-bottom: 1px solid #ebebeb; }
.iti__flag-box { margin-left: 5px; }
.iti__country-name { width: 80%; }
.iti__dial-code { padding: 0 5px; }
/*=================*/
/*====== OTP ======*/
.regotp_form input.form-control { 
    font-size: 25px; font-weight: 600; text-align: center; 
    max-width: 1.8em; max-height: 1.8em; padding: 0;
}
.regotp_form input[type=number] { -moz-appearance: textfield; }
.regotp_form input[type=number]::-webkit-outer-spin-button,
.regotp_form input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/*--*/
#resend_code { max-width: 320px; margin: 6px auto 0; }
#resend_code .btn-solid {
    font-weight: 700; color: var(--gigi-darkblue); text-transform: capitalize; letter-spacing: 0.02em;
    background: #f3f3f3; 
}
#resend_code .btn-solid:before { content: none; }
/*=================*/
/*====== ... ======*/
.keyinrefer-wrap { background: #f8f8f8; padding: 20px; border-radius: 15px; }
/*--*/
/*- daterangepicker -*/
.daterangepicker {
    font-family: inherit;
    border: none; border-radius: 10px; overflow: hidden;
    box-shadow: 0 2px 3px rgba(10,10,10,0.1), 0 0 0 1px rgba(10,10,10,0.05);
}
.daterangepicker select.monthselect, 
.daterangepicker select.yearselect {
    font-variation-settings: "wdth" 25;
    font-size: 13px; font-weight: 600; color: var(--gigi-blue); letter-spacing: 0.02em;
    border: 1px solid #d5d9e7; border-radius: 5px; padding: 2px 5px;
    background-color: #fff; background-repeat: no-repeat; background-position: right 0.45em center; background-size: 10px 10px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.daterangepicker .calendar-table tr:last-child th { font-weight: 700; padding-top: 10px; }
.daterangepicker .calendar-table th, 
.daterangepicker .calendar-table td { font-size: 13px; font-weight: 600; }
.daterangepicker .calendar-table td { height: 32px; line-height: 1; border-radius: 12px !important; }
.daterangepicker td.active, 
.daterangepicker td.active:hover { background-color: var(--gigi-lblue); }
.daterangepicker td.disabled, 
.daterangepicker option.disabled { color: #eee; }
/*--*/
/*- pw -*/
input#signup_pw.keying + .deco { border-radius: 8px 8px 0 0; }

ul.pw-msg { 
    margin-top: -5px; margin-bottom: 5px; padding: 1em 1.2em 0.8em; list-style: none; border: 1px solid #d1d8f2;  border-top: none; border-radius: 0 0 8px 8px;
    font-size: 12px; font-weight: 500; color: #666;
}
ul.pw-msg li { position: relative; }
ul.pw-msg .pw-strength { margin-bottom: 4px; }
ul.pw-msg .pw-strength b { font-weight: 600; color: var(--gigi-darkblue); }
ul.pw-msg li.c_invalid:before,
ul.pw-msg li.c_valid:before { 
    font-family: 'Material Symbols Outlined'; font-size: 1.4em; line-height: 1; letter-spacing: 0; vertical-align: middle; 
    padding-right: 3px; 
}
ul.pw-msg li.c_invalid:before { content: '\e5c9'; }
ul.pw-msg li.c_valid:before { content: '\e86c'; }
.c_valid { color: #00c892; }
.c_invalid { color: #f76c5a; }


/*=====================================================================*/
/* WALLET */
/*=====================================================================*/
/*====================================*/
/*====== common share (profile) ======*/
.wbalance-wrap { background: #f8f8f8; }
.wbalance-wrap .btn-switchcheck { 
    position: relative; top: -30px; margin-bottom: -22px; 
    font-size: 9px; font-weight: 900; font-variation-settings: "GRAD" 150, "wdth" 25;
}
.wbalance-wrap .btn-switchcheck label { width: 140px; }
/*--*/
.wbalancecon .stitle { font-size: 12px; font-weight: 500; color: #666; letter-spacing: 0.025em; margin-bottom: 0px; }
.wbalancecon .conwrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.wbalancecon .mamount { 
    font-size: 50px; font-size: clamp(1rem, 13.5vw, 4.5rem); font-variation-settings: "wdth" 87.5; font-weight: 500;
    color: var(--gigi-blue); letter-spacing: 0.025em;
}
.wbalancecon .mamount sup { font-size: max(10px, 0.1em); top: 0.6em; }
.wbalancecon .mamount .cent { font-weight: 600; top: 3px; }
.wbalancecon .btn-topup .icon { 
    font-size: 16px; font-weight: bold; color: #ffead4; 
    display: inline-flex; justify-content: center; align-items: center;
    width: 1.6em; height: 1.6em; background: var(--gigi-lblue); border: 1px solid var(--gigi-lblue); border-radius: 50%;
}
/*--*/
.wbalancecon.staff {
    position: absolute; transform: translateX(-100%); opacity: 0; visibility: hidden; 
    transition: transform .3s ease-in-out;
}
.wbalancecon.staff .icon { 
    display: inline-block; max-width: 50px; padding: 9px 3px;
    font-size: 26px; color: var(--gigi-blue); 
}
/*--*/
.wbalancecon.staff.show { position: relative; transform: none; opacity: 1; visibility: visible; }
.wbalancecon.ewallet { transition: transform .3s ease-in-out; }
.wbalancecon.ewallet.none { position: absolute; transform: translateX(100%); opacity: 0; visibility: hidden; }
/*==============================================*/
/*====== payment option (topup, checkout) ======*/
.payment_select-wrap { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.payment_select { position: relative; overflow: hidden; display: flex; }
.payment_select ~ div { border-top: 1px solid #ddd; }
.payment_select label { 
    flex: 1 0 0%; align-content: center; min-height: 49px; margin-bottom: 0; padding: 12px 45px 12px 5px; z-index: 1; 
    font-size: 15px; font-weight: 600; line-height: 1;
}
.payment_select .container_radio .checkmark { top: 50%; left: inherit; right: 15px; transform: translate(0,-50%); }
.payment_select > .icon { 
    font-size: 20px; font-weight: 400; text-align: center;
    width: 32px; margin-top: 12px; margin-left: 8px; 
}
.payment_select > .icon.icon_logo img { padding: 0; border: none; }
.payment_select .icon_logo img { background: #fff; width: auto; max-height: 25px; padding: 1px 3px; border: 1px solid #eee; border-radius: 6px; }
/*--*/
.payment_select.disabled { background-color: #f8f8f8; border-color: rgba(209,216,242,0.5); }
.payment_select.disabled .icon,
.payment_select.disabled label { opacity: 0.5; }
/*--*/
.payment_select.gigiwallet .btn-solid { 
    min-width: auto; min-height: auto; 
    position: absolute; top: 50%; right: 15px; z-index: 2; transform: translate(0,-50%);
    font-size: 10px; letter-spacing: 0.02em; line-height: 1; padding: 0.8em 1em;
    display: none;
}
.payment_select.disabled.gigiwallet label { padding-right: 95px; }
.payment_select.disabled.gigiwallet .btn-solid { display: inline-block; }
/*--*/
.payment_select .ctacon {
    font-size: 11px; font-weight: 400; line-height: 1.1; 
    background: #e9f4fc; margin-top: 6px; padding: 0.5em 0.7em; border-radius: 5px; 
}
.payment_select .ctacon .badge {
    background: var(--gigi-blue); color: #7accc8;
    font-size: 11px; font-weight: 600; letter-spacing: 0.01em; word-break: break-word; white-space: normal;
}
/*--*/
.payment_select .indicatestar {
    font-size: 12px; color: #fff; line-height: 1;
    position: absolute; top: 0.2em; right: 0.3em; padding: 0; z-index: 1;
}
.payment_select .indicatestar:before {
    content: ''; width: 4em; height: calc(100% + 1em); background: #004bc8; z-index: -1;
    position: absolute; top: -2.5em; right: -1.5em;
    transform: rotate(41deg); transform-origin: 0 100%;
}
.payment_select .indicatestar .icon { font-variation-settings: 'FILL' 1; font-size: 1em; position: static; }
/*--*/
.payment_select .choicebank { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.payment_select .resultcbank {
    display: flex; column-gap: 10px; align-items: center;
    font-size: 12px; font-weight: 500; line-height: 1.1; 
    background: #f8f8f8; margin-top: 6px; padding: 0.6em 1em 0.6em 0.5em; border-radius: 5px;
}
/*--*/
.banklist-wrap .offcanvas-header { border-bottom: 1px solid #ebebeb; }
.banklist-wrap .offcanvas-header .btn { padding: 0; line-height: 0; }
.banklist-wrap .offcanvas-header .title { margin-bottom: 0; font-size: 17px; font-weight: 600; }

ul.banklist { padding-left: 0; margin-bottom: 0; list-style: none; }
ul.banklist li { display: block; border-bottom: 1px solid #ebebeb; }
ul.banklist li:last-child { border-bottom: none; }
ul.banklist li > a { 
    display: flex; column-gap: 10px; align-items: center;
    position: relative; padding: 0.8em 1.2em; font-size: 13px; color: var(--gigi-darkblue); 
}
ul.banklist .icon_logo img { background: #fff; width: auto; max-height: 25px; padding: 1px 3px; border: 1px solid #eee; border-radius: 6px; }
/*=====================*/
/*====== history ======*/
.wallethist-wrap .wbalance-wrap { padding: 52px 20px 12px 20px; margin-top: -30px; }
/*--*/
.wallethist_list .stitle { font-size: 14px; font-weight: 400; color: #666; margin-bottom: 6px; }
.wallethist_list ul + .stitle { margin-top: 30px; }
.wallethist_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.wallethist_list ul + ul { margin-top: 5px; }
.wallethist_list li + li { margin-top: 5px; }
.wallethist_list li a { 
    color: var(--gigi-darkblue); 
    display: block; border: 1px solid #d1d8f2; border-radius: 10px; margin: 0; padding: 12px 0; 
}
.wallethist_list li .desc,
.wallethist_list li .date { font-size: 14px; color: #666; margin-top: 5px; }
.wallethist_list li .date { font-size: 13px; text-transform: uppercase; }
.wallethist_list li .type { 
    font-variation-settings: "wdth" 125;
    font-size: 17px; font-weight: 800; letter-spacing: 0;
}
.wallethist_list li .mamount { font-variation-settings: "wdth" 87.5; font-size: 28px; font-weight: 500; }
.wallethist_list li .mamount sup { top: 0.36em; }
/*--*/
.wallethist_list li.debit .type,
.wallethist_list li.debit .mamount { color: var(--gigi-lblue); }
/*============================*/
/*====== history detail ======*/
.wallethist_detail  > div:not(.detail):not(.status-wrap) { border-bottom: 1px solid #d1d8f2; margin-bottom: 14px; padding-bottom: 14px; }
/*--*/
.wallethist_detail .titlehead .title { 
    font-variation-settings: "wdth" 125;
    font-size: 20px; font-weight: 800; color: var(--gigi-blue); letter-spacing: 0;
    margin: 0; 
}
.wallethist_detail .titlehead .title .icon { 
    font-size: 1.35em; font-weight: 300; color: #aaa; vertical-align: middle; 
    position: relative; top: -2px; margin-right: 2px; 
}
.wallethist_detail .titlehead .date { 
    font-variation-settings: "wdth" 25;
    font-size: 14px; font-weight: 400; color: #666; letter-spacing: 0.01em;
    margin-top: 5px; 
}
/*--*/
.wallethist_detail .mamount { 
    font-variation-settings: "GRAD" 50, "wdth" 75;
    font-size: 48px; font-weight: 400; color: var(--gigi-blue); 
}
.wallethist_detail .mamount sup { font-weight: 600; }
.wallethist_detail .mamount .cent { font-weight: 500; top: 2.5px; }
/*--*/
.wallethist_detail .status-wrap { text-align: center; margin-top: -14px; margin-bottom: 20px; }
.wallethist_detail .status { position: relative; top: -9px; font-size: 11px; }
/*--*/
.wallethist_detail .point-earn { display: flex; justify-content: space-between; align-items: center; }
.wallethist_detail .point-earn > div { flex: 0 auto; }
.wallethist_detail .point-earn .title { color: #666; }
.wallethist_detail .point-earn .desc { font-size: 17px; font-weight: 600; color: var(--gigi-lblue); }
/*--*/
.wallethist_detail .detail { padding-top: 10px; }
.wallethist_detail .detail ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.wallethist_detail .detail ul li + li { margin-top: 18px; }
.wallethist_detail .detail .title { color: #666; }
.wallethist_detail .detail .desc { font-weight: 600; margin-top: 2px; }
/*===================*/
/*====== topup ======*/
.amount_topup .dashbalance {
    margin-top: -16px; margin-bottom: 6px;
    /*display: flex; column-gap: 5px; align-items: center; justify-content: space-between;*/
}
.amount_topup .aremark { padding-left: 12px; text-indent: -12px; }
.amount_topup .radio-npu-wrap label { 
    align-content: center; min-width: inherit; height: 100%; padding: 0; background: #fff; border: 1px solid #d1d8f2;
    font-size: 20px;
}
.amount_topup .radio-npu-wrap label span { display: block; }
.amount_topup .radio-npu-wrap label span.value { padding: 8px 8px; min-width: 8vw; }
.amount_topup .radio-npu-wrap label span.extradesc {
    font-size: 8px; font-weight: 900; color: var(--gigi-blue); text-transform: uppercase; letter-spacing: 0.075em;
    background: var(--gigi-lgreen); padding: 5px 8px;
}
.amount_topup .radio-npu-wrap .badge { 
    font-size: 7px; font-weight: 900; color: var(--gigi-blue); text-transform: uppercase; letter-spacing: 0.075em;
    background: #fbeccf; padding: 4px 6px; border-radius: 4px;
    position: absolute; top: -8px; left: 0px; z-index: 1;
}
/*--*/
.method_topup .alert .icon { font-size: 2em; color: var(--gigi-blue); }


/*=====================================================================*/
/* PROFILE */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.btn-edit-profile { 
    position: absolute; right: 20px; bottom: 10px; z-index: 1;
    font-size: 14px; font-weight: 600; color: #859abb; letter-spacing: 0.02em;
}
.btn-edit-profile:hover,
.btn-edit-profile:focus { color: #fff; }
/*--*/
.scanicon { fill: #fff; }
/*=================*/
/*====== ... ======*/
.namedeco-bubble { 
    width: 1.8em; height: 1.8em; background: var(--gigi-blue); border: 2px solid var(--gigi-blue); border-radius: 50%; 
    font-size: 28px; text-align: center; line-height: 1.6; 
    filter: drop-shadow(4px 3px 3px rgba(0,0,0,0.15));
}
.namedeco-bubble svg text {
    fill: transparent; stroke: var(--gigi-lblue); stroke-width: 2.8px;
    font-size: 72px; font-variation-settings: "wdth" 62.5; font-weight: 800; text-transform: uppercase; letter-spacing: 0;
}
/*--*/
.mbrdetailcon { background: #f8f8f8; padding: 18px 15px 15px 15px; border-radius: 40px; }
.mbrdetailcon .name { font-size: 21px; font-variation-settings: "wdth" 125; font-weight: 900; color: var(--gigi-blue); letter-spacing: 0; line-height: 1; word-break: break-word; }
.mbrdetailcon .name a.btn-edit { 
    margin-left: 1px;
    font-size: 20px; color: var(--gigi-darkblue); vertical-align: middle; line-height: 1;
}
.mbrdetailcon .name a.btn-edit .icon { font-size: 1em; }
.membersincedate { font-size: 12px; letter-spacing: 0.025em; margin-top: 0px; }
/*--*/
.mbrdetailcon .badge {
    display: table; background: #fff; margin-top: -25px; margin-bottom: 7px; padding: 5px 6px;
    font-size: 10px; font-weight: 900; color: var(--gigi-darkblue); letter-spacing: 0.05em;
}
.mbrdetailcon .badge span { font-weight: 400; text-transform: none; letter-spacing: 0.025em; }
.mbrdetailcon .badge.tier1 { background: #bdd6e9; }
.mbrdetailcon .badge.tier2 { background: var(--gigi-lgreen); }
.mbrdetailcon .badge.tier3 { background: #ffbfb7; }
.mbrdetailcon .badge.tier4 { background: #c8e5ff; }
/*=================*/
/*====== ... ======*/
.own-profile-wrap .alert { margin: 12px auto; }
/*--*/
.own-profile-wrap .tel { font-size: 14px; font-weight: 600; color: var(--gigi-blue); letter-spacing: 0.05em; }
.own-profile-wrap .tel .flag { margin-right: 3px; }
.own-profile-wrap .tel .flag i { font-size: 9px; }
.own-profile-wrap .tel .number { vertical-align: middle; }
.own-profile-wrap .email { font-size: 14px; word-break: break-word; margin-top: 1px; }
.own-profile-wrap .email span { vertical-align: middle; }
.own-profile-wrap .email .icon.verify.success { font-size: 1.2em; color: #00c892; }
.own-profile-wrap .gender { font-size: 12px; }
.own-profile-wrap .dob { 
    font-size: 12px; margin-top: 2px; 
    display: inline-flex; align-items: center; column-gap: 3px;
}
.own-profile-wrap .dob .icon { font-size: 1.2em; font-weight: 500; color: var(--gigi-blue); vertical-align: middle; }
/*=================*/
/*====== ... ======*/
.myprofile-wrap .wbalance-wrap { padding: 15px 20px 10px 20px; border-radius: 12px; }
/*=================*/
/*====== ... ======*/
.profile-menulink-wrap { padding-top: 0; }
.profile-menulink-wrap ul { margin-bottom: 0; padding-left: 0; line-height: 0; }
.profile-menulink-wrap li { display: block; border-bottom: 1px solid #eee; line-height: 1; }
.profile-menulink-wrap li:last-child { border: none; }
.profile-menulink-wrap li.stitle {
    margin-top: 18px; border: none;
    font-size: 12px; color: #666; letter-spacing: 0.025em;
}
.profile-menulink-wrap a { 
    padding: 0.65em 0; position: relative; 
    display: flex; align-items: center;
    font-weight: 500; color: var(--gigi-darkblue);
}
.profile-menulink-wrap a:not(.logout):before {
    content: '\e5cc'; font-family: 'Material Symbols Outlined'; font-size: 18px; line-height: 1; letter-spacing: 0;
    position: absolute; right: 0; top: 50%; transform: translate(0,-50%);
}
.profile-menulink-wrap a .icon { flex: 0 auto; margin-right: 15px; color: #666; }
.profile-menulink-wrap a .logo-wrap svg { max-width: 25px; }
.profile-menulink-wrap a .badge { font-size: 11px; border-radius: 80px; }
/*=================*/
/*====== ... ======*/
.pop-profileqr .modal-dialog.modal-fullscreen { padding: 0; }
.pop-profileqr .modal-content { 
    display: flex; justify-content: center; min-height: 100%; height: auto; background: var(--gigi-blue); 
    text-align: center; color: #fff; 
}
.pop-profileqr .logo svg { max-width: 185px; margin: 0 auto; }
.pop-profileqr .boxwrap { 
    max-width: 250px; background: #fff; margin: 30px auto 10px; padding: 20px 15px;
    border-radius: 15px; box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    color: var(--gigi-darkblue); 
}
.pop-profileqr .name { 
    font-variation-settings: "wdth" 125;
    font-size: 20px; font-weight: 800; color: var(--gigi-oldblue); letter-spacing: 0; 
}
.pop-profileqr .btn-close {
    font-size: 20px;
    background-color: #fff; background-size: 0.7em; width: 1.3em; height: 1.3em; border-radius: 50%;
    position: static; opacity: 1; 
}
/*=================*/
/*====== ... ======*/
.infodesc-birthday-wrap .desc { text-align: left; color: #444; }
.infodesc-birthday-wrap .desc h6 { font-weight: 600; color: var(--gigi-darkblue); }
.infodesc-birthday-wrap .desc b,
.infodesc-birthday-wrap .desc strong { font-size: 1em; font-weight: 600; color: var(--gigi-darkblue); }
.infodesc-birthday-wrap .desc ul,
.infodesc-birthday-wrap .desc ol { margin-bottom: 0; padding-left: 14px; line-height: 1.3; }
.infodesc-birthday-wrap .desc li + li { margin-top: 8px; }
.infodesc-birthday-wrap .desc .wrap { background: #f8f8f8; padding: 20px; border-radius: 12px; }
/*==================*/
/*====== edit ======*/
.dlacc-wrap { 
    background: rgb(247,108,90,0.15); padding: 0.6em 0.6em; border-radius: 5px; 
    font-size: 14px; font-weight: 500;
}
.btn-dlacc { display: inline-block; color: #666; }
.btn-dlacc:hover,
.btn-dlacc:focus { color: #666; }
.btn-dlacc .icon { font-size: 1.7em; color: #f76c5a; vertical-align: middle; }


/*=====================================================================*/
/* ORDER CONTENT */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.obgrey { background-color: #f3f3f3; }
.osection { background: #fff; padding-top: 20px; padding-bottom: 20px; margin-top: 3px; }
.osection.top { margin-top: -30px; margin-bottom: 3px; padding-top: 60px; padding-bottom: 22px; background: #fff; }
.container > .osection,
.container-mobile > .osection,
.split_row > div > .osection { padding-left: 18px; padding-right: 18px; }
.otitle { font-size: 14px; font-weight: 400; color: #666; }
.odesc { 
    font-variation-settings: "wdth" 75;
    font-size: 15px; font-weight: 700; margin-top: -6px; 
} 
.odesc > * { font-weight: 500; color: #666; }
.odesc + .otitle { margin-top: 15px; }
/*--*/
.btn-edit-order { 
    display: inline-block; 
    font-size: 13px; font-weight: 600; color: #859abb; text-transform: none;
}
/*--*/
.btn-emptycart,
.btn-addmore {
    display: inline-flex; align-items: center; column-gap: 3px; margin-top: 10px; 
    font-size: 13px; color: var(--gigi-darkblue); 
}
.btn-emptycart .icon { font-size: 1.65em; }
.btn-addmore { font-size: 1em; font-weight: 700; }
/*.btn-addmore .icon { font-size: 1.3em; }*/
/*=================*/
/*====== ... ======*/
.mamount { line-height: 1; letter-spacing: 0; }
.mamount sup { 
    font-size: 0.343em; font-weight: 500; letter-spacing: 0.025em; line-height: 1; vertical-align: top;
    top: 5px; margin-right: 0.2em;
}
.mamount .cent { 
    font-size: 0.57em; font-weight: 600; letter-spacing: 0.025em; vertical-align: top; 
    position: relative; top: 1.5px;
}
/*--*/
.total_price .title { font-size: 11px; color: #666; letter-spacing: 0.025em; }
.total_price .mamount { font-variation-settings: "GRAD" 50, "wdth" 75; font-size: 30px; font-weight: 500; }
/*--*/
.price del { display: block; font-size: 0.8em; font-weight: 500; color: #999; }
/*=================*/
/*====== ... ======*/
table.cart_total { width: 100%; font-size: 13px; }
table.cart_total tr { border-bottom: 1px solid #eee; }
table.cart_total tr:last-child { border-bottom: none; }
table.cart_total td { padding: 10px 5px 6px; vertical-align: top; }
table.cart_total td:first-child { padding-left: 0; width: 80%; }
table.cart_total td:last-child { padding-right: 0; width: 20%; text-align: right; }
table.cart_total tr:last-child td { padding-top: 15px; }
table.cart_total tr.msave td { color: var(--gigi-blue); }
table.cart_total tr.msave b { font-weight: 600; }
table.cart_total tr.pts_earned { color: var(--gigi-blue); }
table.cart_total tr.pts_earned .icon { font-size: 26px; vertical-align: middle; margin-right: 5px; }
table.cart_total tr.pts_earned small { color: #666; }
table.cart_total tr.tax { color: #666; }
/*table.cart_total tr.discount td:last-child { color: #f76c5a; }*/
table.cart_total tr.total td { font-size: 18px; font-weight: 800; letter-spacing: 0.05em; line-height: 1; }
table.cart_total tr.total small { font-size: 13px; font-weight: 500; color: #666; letter-spacing: 0.025em; }
table.cart_total tr.total .mamount { color: var(--gigi-blue); }
table.cart_total .icon { font-size: 1.25em; vertical-align: text-top; }
/*=================*/
/*====== ... ======*/
.alert.prepare_msg { 
    background: #f5f1ea; padding: 10px 15px; border-radius: 10px; 
    color: var(--gigi-darkblue);
}
.alert.prepare_msg .icon {
    display: inline-block; width: 1.5em; height: 1.5em; background: #ffcb00; border-radius: 50%; 
    font-size: 1.5em; text-align: center; line-height: 1.5;
}
/*--*/
.alert.set_notif { 
    background-color: #f3f3f3; border: 1px dashed; border-radius: 8px;
    color: var(--gigi-blue); line-height: 1.25;
}
.alert.set_notif .icon-wrap { margin-right: 15px; }
.alert.set_notif .icon {
    display: inline-block; width: 1.5em; height: 1.5em; background: var(--gigi-blue); border-radius: 50%; 
    font-size: 1.65em; color: #fff; text-align: center; line-height: 1.5;
}
.alert.set_notif small { color: #555; }

.alert.set_notif .btn-solid { 
    min-width: auto; min-height: auto; max-width: 55px;
    font-size: 10px; font-weight: 900; line-height: 1; 
}

.alert.set_notif.success { color: #00916a; }
.alert.set_notif.success .icon { background: #00916a; }
.alert.set_notif.fail { color: #f76c5a; }
.alert.set_notif.fail .icon { background: #f76c5a; }
/*=================*/
/*====== ... ======*/
ul.plistattr { margin-bottom: 0; padding-left: 0; list-style: none; }
ul.plistattr .icon { font-size: 18px; }
/*--*/
ul.symbolmean { 
    margin-bottom: 0; padding-left: 0; list-style: none; 
    font-size: 13px; 
}
ul.symbolmean li { display: inline-block; margin-right: 20px; margin-bottom: 5px; }
ul.symbolmean span { vertical-align: middle; color: #666; }
ul.symbolmean span.icon { font-size: 1.3em; color: var(--gigi-darkblue); }
ul.symbolmean span.icon img { width: 0.75em; }
/*=================*/
/*====== ... ======*/
.transimg { text-align: center; display: flex; align-items: center; justify-content: center; }
.transimg img { max-width: 73%; margin-top: auto; }
.transimg img.lazypending { max-width: 100%; }
.transimg.hoverimg { position: relative; align-items: flex-start; }
.transimg.hoverimg img:first-child { margin-left: -2%; }
.transimg.hoverimg img.hover { margin-left: -43%; max-width: 61%; }
/*=================*/
/*====== ... ======*/
ul.cart_list { margin-bottom: 0; padding-left: 0; list-style: none; }
ul.cart_list > li + li { margin-top: 5px; }
ul.cart_list .wrap { 
    display: flex; gap: 1em; flex-wrap: wrap;
    border: 1px solid #d1d8f2; border-radius: 10px; padding: 12px 12px; position: relative;
}
ul.cart_list .wrap > .left { max-width: 98px; }
ul.cart_list .wrap .img { 
    background: #fbeccf; 
    background-repeat: no-repeat; background-position: center; background-size: cover;
    max-width: 98px; width: 100%; border-radius: 10px; overflow: hidden; text-align: center; aspect-ratio: 1; 
}
ul.cart_list .wrap .img img { width: 100%; height: 100%; object-fit: contain; }
/*--*/
ul.cart_list .wrap .desc { display: flex; flex-direction: column; height: 100%; }
ul.cart_list .wrap .title { 
    font-variation-settings: "wdth" 75;
    font-size: 15px; font-weight: 700; 
    margin: 0; padding-right: 40px; 
}
ul.cart_list .wrap ul.option {
    margin-top: 15px; margin-bottom: 15px; padding-left: 0; list-style: none;
    font-size: 12px; color: #666; letter-spacing: 0.02em;
}
ul.cart_list .wrap ul.option > li { display: flex; justify-content: space-between; }
ul.cart_list .wrap ul.option > li + li { margin-top: 1px; }
ul.cart_list .wrap ul.option > li .right { padding-left: 10px; }
/*--*/
ul.cart_list .wrap .qtt_price { 
    font-size: 15px; font-weight: 600; 
    align-items: end; justify-content: space-between; margin-top: auto; 
}
ul.cart_list .wrap .qtt_price .price { color: var(--gigi-blue); }
ul.cart_list .wrap .qtt_price .price sub {
    bottom: 0.5px; margin-right: 1px;
    font-size: 9px; font-weight: 500; letter-spacing: 0.05em;
}
ul.cart_list .wrap .qtt_price .price del { text-align: right; }
/*--*/
ul.cart_list .btn-edit-order { position: absolute; top: 12px; right: 12px; }
ul.cart_list .btn-dlt-order { position: absolute; top: 6px; left: 6px; line-height: 0; }
ul.cart_list .btn-dlt-order .icon {
    display: inline-block; width: 1.2em; height: 1.2em; border-radius: 50%; background: #666;
    font-size: 20px; color: #fff; text-align: center; letter-spacing: 0; line-height: 1.2;
}
/*=================*/
/*====== ... ======*/
.rcmmd-wrap { background: #f8f4f1; padding: 15px 15px; border-radius: 12px; }
.rcmmd-wrap .img img { max-width: 95px; border-radius: 8px; position: relative; top: 1px; }
.rcmmd-wrap .title { font-size: 15px; font-weight: 600; }
.rcmmd-wrap .desc { font-size: 13px; color: #666; letter-spacing: 0.025em; margin-top: 6px; }
.rcmmd-wrap .btn-solid { 
    font-size: 9px; color: #fff;
    width: auto; min-width: auto; min-height: auto; background: #0c7bf4; margin-top: 15px; padding: 0.65em 1em; border-radius: 6px;
}
/*=================*/
/*====== ... ======*/
ul.ownpasstag-wrap { padding-left: 0; margin-bottom: 0; list-style: none; }
ul.ownpasstag-wrap li {
    font-size: 12px; font-weight: 600; color: #0c7bf4; white-space: nowrap;
    display: inline-block; margin-bottom: 3px; border: 1px solid; border-radius: 5px;
}
ul.ownpasstag-wrap li span { display: inline-block; padding: 0.3em 0.5em; }
ul.ownpasstag-wrap li span.right { border-left: 1px solid; }
/*=================*/
/*====== ... ======*/
.remark.charlimit { padding: 5px 0px 0px; margin-bottom: 0px; text-align: right; }
.choice_remark_default { display: flex; flex-wrap: wrap; column-gap: 5px; }
.choice_remark_default .radio-npu-wrap { margin-bottom: 1px; }
.choice_remark_default .radio-npu-wrap label {
    display: inline-block; min-width: auto; width: auto;
    font-size: 13px; color: var(--gigi-lblue); text-align: left; line-height: 1.1; 
}
.choice_remark_default .radio-npu-wrap label:after { background: #dce8f1; }
.choice_remark_default .radio-npu-wrap input:checked + label { color: var(--gigi-lblue); }
/*=================*/
/*====== ... ======*/
.oconfirm_paybtn .btn-solid { min-height: 55px; }


/*=====================================================================*/
/* LOCATION */
/*=====================================================================*/
/*=========================*/
/*====== locate icon ======*/
.pickuplocation-wrap .innerback.tophead-wrap button,
.pickuplocstate-wrap .innerback.tophead-wrap button { border: none; background: none; padding: 0; }
.pickuplocation-wrap .innerback.tophead-wrap button .icon,
.pickuplocstate-wrap .innerback.tophead-wrap button .icon { font-size: 22px; }
/*====================*/
/*====== search ======*/
.placesearch-wrap {
    width: calc(100% + 36px); position: relative; top: 0; left: -18px;
    background: #f8f8f8; padding: 20px; padding-top: 50px; margin-top: -30px; border-radius: 0 0 20px 20px;
}
.placesearch-wrap .form-group.d1 .deco { border-radius: 8px !important; }
.placesearch-wrap .form-group.d1 .deco:before, 
.placesearch-wrap .form-group.d1 .deco:after { background: #fff; }
.placesearch-wrap .form-group.d1 .form-control { padding-right: 15px; }
.placesearch-wrap .form-group.d1 select.form-control { padding-right: 35px; }
.placesearch-wrap .form-group.d1 .icon { right: 5px; }
.placesearch-wrap .btn-close { background-size: 0.7em; top: 20px; right: calc(45px + 5px); cursor: pointer; z-index: 5; display: none; }
/*==================*/
/*====== list ======*/
.loc_list > .stitle,
.locstate_list > .stitle { font-size: 14px; font-weight: 400; color: #666; }
.loc_list ul,
.locstate_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.loc_list li + li,
.locstate_list li + li { margin-top: 5px; }
.loc_list ul + .stitle { margin-top: 30px; }
.loc_list ul + ul { margin-top: 5px; }
.loc_list li { position: relative; }
.loc_list a.linkoutletpick { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.loc_list a.linkoutletinfo { position: relative; z-index: 1; outline: 0; }
.loc_list .badge.qtt { top: -8px; right: -5px; font-size: 13px; }
.loc_list .wrap { 
    display: flex; gap: 1.2em; 
    border: 1px solid #d1d8f2; border-radius: 10px; margin: 0; padding: 15px 12px; transition: 0.3s ease-out;
}
/*--*/
.loc_list .wrap .left { 
    /* for ios usage, so i need to make its parent {z-index:1;} also, if not if only apply to <a>  will not work, and {height: 100%;} dunno will have other problem or not, current is for the purpose of: dont make whole .left take place */
    position: relative; z-index: 1; height: 100%; 
    margin-bottom: 25px;
}
.loc_list .wrap .img { max-width: 65px; border-radius: 8px; overflow: hidden; margin-bottom: -8px; }
.loc_list .wrap .left .badge.loc_status { width: 100%; font-size: 10px; border-radius: 0 0 8px 8px; position: relative; }
/*--*/
.loc_list .wrap .right { 
    position: relative; padding-right: 20px; order: -1;
    font-size: 13px; color: #666; line-height: 1.25;
}
.loc_list .wrap .right:after {
    content: "\e5cc"; font-family: 'Material Symbols Outlined'; font-size: 1.3em; font-weight: 400; line-height: 1; letter-spacing: 0;
    position: absolute; top: 0; right: -4px;
}
.loc_list .wrap .recvisit + .title { margin-top: 7px; }
.loc_list .wrap .title { 
    font-variation-settings: "wdth" 112.5;
    font-size: 18px; font-weight: 800; color: var(--gigi-darkblue); letter-spacing: 0; 
    margin: 0; 
}
.loc_list .wrap .orderb4 { 
    font-size: 11px; font-weight: 500; color: var(--gigi-darkblue); letter-spacing: 0.025em;
    display: inline-block; background: #ececec; position: relative; margin-bottom: 6px; padding: 3px 8px 3px 22px; border-radius: 30px;
}
.loc_list .wrap .orderb4:before {
    content: '\e889'; font-family: 'Material Symbols Outlined'; font-size: 1.2em; font-weight: 500; color: var(--gigi-blue);
    position: absolute; top: 2px; left: 6px;
}
.loc_list .wrap .distance { 
    font-size: 11px; font-weight: 600; color: var(--gigi-darkblue);
    position: relative; margin-top: 3px; padding-left: 15px;
}
.loc_list .wrap .distance:before {
    content: '\e0c8'; font-family: 'Material Symbols Outlined'; font-size: 1em; font-weight: 700;
    position: absolute; top: 0px; left: 0;
}
.loc_list .wrap .addr { margin-top: 5px; }
.loc_list .wrap .openhour { margin-top: 20px; font-size: 11px; line-height: 1.25; }
/*--*/
.loc_list li.shopclose .wrap { background: rgb(255,255,255,0.6); }
.loc_list li.shopclose .right { opacity: 0.4; }
.loc_list li.shopclose .img img { opacity: 0.3; }
.loc_list li.shopclose .img { position: relative; }
.loc_list li.shopclose .img:before,
.loc_list li.shopclose .img:after { content: 'z'; font-family: sans-serif; font-weight: 700; color: #000; position: absolute; }
.loc_list li.shopclose .img:before { top: 26px; left: 27px; }
.loc_list li.shopclose .img:after { top: 15px; left: 34px; }
.loc_list li:not(.shopclose) .wrap:hover { box-shadow: 4px 4px 0 rgba(0,0,0,0.08); border-color: var(--border-lightblue); }
/*=================*/
/*====== ... ======*/
.infolistshop-wrap .icon { font-size: 1.2em; vertical-align: middle; }
.infolistshop-wrap h5.title { 
    font-variation-settings: "wdth" 125; 
    font-size: 20px; font-weight: 800; letter-spacing: 0; 
}
.infolistshop-wrap .detail { font-size: 13px; color: #666; }
.infolistshop-wrap .detail .left { float: left; padding-right: 5px; }
.infolistshop-wrap .detail .right { display: block; overflow: hidden; }
.infolistshop-wrap img { border-radius: 10px; }
/*--*/
ul.facility {
    padding: 14px 8px 6px; margin-top: 20px; margin-bottom: 0; list-style: none;
    background: #f3f3f3; border-radius: 10px;
    display: flex; flex-wrap: wrap;
}
ul.facility li { width: 33%; margin-bottom: 6px; padding: 0 5px; }
ul.facility span.left { float: left; padding-right: 5px; font-size: 10px; }
ul.facility span.right { display: block; overflow: hidden; }
ul.facility span.right .title { font-size: 13px; font-weight: 600; }
ul.facility span.right .desc { font-size: 11px; color: #666; /*margin-top: 3px;*/ }
/*=================*/
/*====== ... ======*/
.locstate_list li a { 
    display: flex; align-items: center;
    background: #fff; position: relative; min-height: 78px; padding: 15px 18px; overflow: hidden;
    border: 1px solid #d1d8f2; border-radius: 10px; /*box-shadow: 5px 6px 10px rgba(0,0,0,0.08);*/
}
.locstate_list li .name { 
    font-variation-settings: "wdth" 112.5;
    font-size: 20px; font-weight: 800; color: var(--gigi-darkblue); letter-spacing: 0; line-height: 1.05;
    position: relative; z-index: 1; max-width: 60%;
}
.locstate_list .img { position: absolute; right: 18px; max-width: 66px; }


/*=====================================================================*/
/* MENU LIST */
/*=====================================================================*/
.sbaromenulist-wrap { background: #f3f3f3; }
/*--*/
ul.catnavlist li .badge.qtt,
ul.menulist .pqccaddtc_bubble,
.qtt_basket .qtt { 
    font-variation-settings: "wdth" 75;
    background: var(--gigi-lgreen); color: var(--gigi-blue);
}
/*====================*/
/*====== search ======*/
.sb-search-wrap { 
    width: calc(100% - 60px); height: 45px; 
    position: absolute; top: 50%; right: 42px; margin-top: -23px;
}
.sb-search { 
    position: relative; min-width: 40px; width: 0%; height: 100%; float: right; 
    overflow: hidden; z-index: 1; transition: width 0.3s; backface-visibility: hidden; 
}
.sb-search-input {
    font-variation-settings: "wdth" 25;
    font-size: 14px; color: #333;
    width: 0; height: 100%; margin-right: 40px; padding: 0; background: #f8f8f8; 
    border: none; outline: none; z-index: 1; transition: 0.3s;
    position: absolute; top: 0; right: 0;
}
.sb-icon-search, 
.sb-search-submit {
    width: 40px; height: 100%; display: block; padding: 0; cursor: pointer; 
    position: absolute; right: 0; top: 0; 
    line-height: 2.2; text-align: center;
}
.sb-icon-search { z-index: 1; }
.sb-icon-search:before { content: '\e8b6'; font-family: 'Material Symbols Outlined'; font-size: 21px; }
.sb-search-submit { opacity: 0; color: transparent; border: none; outline: none; z-index: -1; }
.sb-search-wrap .btn-close { background-size: 0.7em; top: 12px; right: calc(40px + 5px); cursor: pointer; z-index: 5; display: none; }
/*--*/
/*- open -*/
.sb-search.sb-search-open { width: 100%; } 
.sb-search.sb-search-open .sb-search-input { width: calc(100% - 40px); padding: 5px 10px; }
.sb-search.sb-search-open .sb-search-submit { z-index: 3; }
/*=================*/
/*====== ... ======*/
.loctimeinfo-wrap { margin-top: -30px; margin-bottom: 3px; padding-top: 60px; padding-bottom: 22px; background: #fff; }
/*--*/
.orderlocname { margin-bottom: 2px; }
.orderlocname .title { 
    font-variation-settings: "wdth" 125;
    font-size: 20px; font-weight: 900; color: var(--gigi-blue); letter-spacing: 0;
    position: relative; margin-bottom: 0;
}
.orderlocname .btn-edit-order { 
    margin-left: 8px; position: absolute; bottom: 2px;
    font-size: 18px; font-weight: 600; vertical-align: top;
}
.orderlocname .btn-edit-order.icon { font-weight: 500; }
/*--*/
.orderlocdesc { font-size: 13px; color: #666; letter-spacing: 0.025em; }
.orderlocdesc .btn-effright { font-size: 12px; color: #666; letter-spacing: 0.025em; outline: 0; }
/*--*/
.orderetimep .title { 
    font-variation-settings: "wdth" 25;
    font-size: 16px; font-weight: 800; color: var(--gigi-blue); text-transform: uppercase; letter-spacing: 0.02em;
    position: relative; padding-left: 26px; 
}
.orderetimep .title:before {
    content: '\e8b5'; font-family: 'Material Symbols Outlined'; font-size: 19px; font-weight: 400; color: var(--gigi-darkblue); line-height: 1; letter-spacing: 0;
    position: absolute; top: -1px; left: 0;
}
.orderetimep .indicatedesc { 
    font-size: 12px; color: #555; letter-spacing: 0.02em;
    background: #f3f3f3; margin-top: 6px; padding: 6px 12px; border-radius: 6px; position: relative; overflow: hidden;
}
.orderetimep .indicatedesc:before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--gigi-blue); }
.orderetimep .indicatedesc b { color: var(--gigi-blue); }
/*=================*/
/*====== ... ======*/
.voucherlistag-wrap { margin-bottom: -8px; }
/*--*/
/* (https://codepen.io/alvarotrigo/pen/poKzROr) */
.voucherlistag-wrap a.btn-effright { 
    position: relative; width: 100%; padding: 8px 10px 5px; border-radius: 5px; overflow: hidden; 
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%, transparent 75%) left / 20px 20px repeat, #012e7314;
    color: var(--gigi-darkblue); 
}
.voucherlistag-wrap a.btn-effright:before {
    content: ''; width: 70px; height: 100%; background-image: linear-gradient(to right, transparent, #eaeef5 50%);
    position: absolute; top: 0; right: 0; z-index: 1;
}
.voucherlistag-wrap a.btn-effright > div:after { z-index: 1; }
/*--*/
ul.vouchertag { padding-left: 0; margin-bottom: 0; list-style: none; display: flex; column-gap: 4px; }
ul.vouchertag li {
    font-size: 11px; font-weight: 600; color: var(--gigi-lblue); white-space: nowrap;
    display: inline-block; margin-bottom: 3px; padding: 0.3em 0.5em; border: 1px solid; border-radius: 5px;
}
/*--*/
/*.voucherlistagpop-wrap .titlehead { font-size: 18px; font-weight: 600; }*/
/*=================*/
/*====== ... ======*/
.infoshop-wrap .title { font-size: 17px; font-weight: 600; }
.infoshop-wrap .detail { font-size: 13px; color: #666; }
.infoshop-wrap .detail p { line-height: 1.2; }
.infoshop-wrap img { max-width: 80px; height: 100%; aspect-ratio: 1; border-radius: 5px; }
/*=========================*/
/*====== Listing ALL ======*/
.plist_left { max-width: 70px; width: 20%; background: #f3f3f3; padding: 0; }
.plist_left .stick { position: relative; top: 0; }
.plist_left .stick.position-fixed { max-width: 70px; width: 20%; }
.plist_left ul { margin-bottom: 0; padding-left: 0; list-style: none; }
#nav_ordermenu-swiper { max-height: calc(100vh - 5em); overflow: hidden; }
/*--*/
.plist_right { padding: 0; }
/*==========================*/
/*====== Listing Left ======*/
ul.catnavlist li { background: #f3f3f3; border-radius: 10px; z-index: 1; }
ul.catnavlist li a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 65px; text-align: center; }
ul.catnavlist li a .img { padding: 6px 4px 0px; }
ul.catnavlist li a .img img { max-width: 70%; }
ul.catnavlist li a .img + .desc { padding: 6px 4px 10px; font-size: 8px; }
ul.catnavlist li a .desc { 
    font-variation-settings: "GRAD" 150, "wdth" 25;
    font-size: 9px; font-weight: 600; color: var(--gigi-darkblue); text-transform: uppercase; letter-spacing: 0.075em; word-break: break-word;
    padding: 10px 6px ;
}
ul.catnavlist li .badge.qtt { 
    font-size: 10px; width: 1.8em; height: 1.8em; line-height: 1.8;
    right: 0; top: 0; padding: 0;
}
/*--*/
ul.catnavlist li.active { background: #fff; border-radius: 0; z-index: 0; }
ul.catnavlist li:not(:last-child).active:before,
ul.catnavlist li:not(:first-child).active:after {
    content: ''; width: 1em; height: 1em; background: #ffffff;
    position: absolute; right: 0; font-size: 20px;
}
ul.catnavlist li.active:before { bottom: -0.5em; }
ul.catnavlist li.active:after { top: -0.5em; }
ul.catnavlist li.active .desc { font-weight: 700; color: var(--gigi-blue); }
/*===========================*/
/*====== Listing Right ======*/
.menu_section { background: #fff; padding: 30px 18px 25px 21px; }
.menu_section + .menu_section { margin-top: 3px; }
.menu_section .titlehead { margin-bottom: 1.6em; }
.menu_section .titlehead .title { 
    font-variation-settings: "GRAD" 150, "wdth" 150;
    font-size: 22px; font-weight: 900; color: var(--gigi-blue); text-transform: uppercase; letter-spacing: 0; 
    position: relative; left: -20px; padding-left: 20px; margin-bottom: 3px;
}
.menu_section .titlehead .title:before {
    content: ''; width: 15px; border-top: 1px solid; margin-top: 4px; margin-right: 10px;
    position: absolute; left: 0;
}
/*==================*/
/*====== list ======*/
ul.menulist { margin: 0 -5px; padding-left: 0; list-style: none; }
ul.menulist li.menu_item { padding: 0 5px; margin-bottom: 10px; position: relative; }
ul.menulist .plistproduct { 
    position: relative; background: #f3f3f3; border-radius: 15px; overflow: hidden;
    display: flex; flex-direction: column; height: 100%; align-items: center;
    color: var(--gigi-darkblue); outline: 0;
}
ul.menulist .plistproduct.plistaddtc { background: #fbeccf; }
/*--*/
ul.menulist ul.plistattr { position: absolute; top: 9px; left: 9px; z-index: 1; text-align: center; }
ul.menulist ul.plistattr li { line-height: 0; }
ul.menulist ul.plistattr li + li { margin-top: 4px; }
ul.menulist ul.plistattr .icon { font-size: 15px; font-weight: 400; }
ul.menulist ul.plistattr .icon.ac_unit { font-size: 14px; }
/*--*/
ul.menulist .pqccaddtc_bubble {
    position: absolute; top: 5px; right: 5px; z-index: 1;
    display: inline-block; width: 2.15em; height: 2.15em; border-radius: 50%;
    font-size: 13px; font-weight: 700; text-align: center; line-height: 2.25;
}
/*--*/
ul.menulist .plistproduct.plistpnew:before {
    content: ''; width: 100%; height: 54%;
    position: absolute; top: 0; left: 0; opacity: 0.7; filter: grayscale(1);
    background-image: url(../images/v3/text-new.png); background-size: 34px;
}
ul.menulist .indicatenew {
    font-variation-settings: "GRAD" 150, "wdth" 25;
    font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1;
    height: 30px; position: absolute; right: 0.3em; bottom: 0.2em; z-index: 1;    
}
ul.menulist .indicatenew:before {
    content: ''; width: 6em; height: calc(100% + 1em); background: var(--gigi-lblue);
    position: absolute; bottom: -3em; left: -0.9em; z-index: -1;
    transform: rotate(-47deg); transform-origin: 0 100%;
}
ul.menulist .indicatenew .text {
    position: absolute; bottom: -0.05em; right: -1.05em;
    transform: rotate(-47deg); transform-origin: 0 100%;
}
/*--*/
ul.menulist .plistimg { 
    background-repeat: no-repeat; background-position: center; background-size: cover; position: relative;
    margin: 6px 6px 0; border-radius: 15px; overflow: hidden; align-self: stretch; text-align: center;
}
ul.menulist .transimg { padding-bottom: 5px; max-width: 800px; }
/*--*/
ul.menulist .plistdesc { 
    padding: 14px 12px; word-break: break-word;
    display: flex; flex-flow: column; flex: 1; width: 100%; position: relative;
}
ul.menulist .plistdesc .title { font-size: 15px; font-weight: 600; line-height: 1.15; margin-bottom: 15px; }
ul.menulist .plistdesc .price { 
    margin-top: auto; 
    font-size: 13px; font-weight: 600; color: var(--gigi-blue); letter-spacing: 0.02em;
}
ul.menulist .plistdesc .price sub { 
    bottom: 0; margin-right: 1px;
    font-size: 9px; font-weight: 500; letter-spacing: 0.05em;
}
/*--*/
ul.menulist .badge.status { font-size: 10px; padding: .5em .65em; }
/*====================*/
/*====== detail ======*/
.pdetail_top-wrap { background: #d9e3ec; /*background: #eeedf0;*/ }
/*--*/
.pdetailimg { text-align: center; }
.pdetailimg.transimg { max-width: 800px; margin: 0 auto; margin-bottom: 30px; }
.pdetailimg.transimg img { max-width: 78%; }
.pdetailimg.hoverimg img.hover { max-width: 66%; }
/*--*/
.pdetaildesc { position: relative; padding-top: 15px; padding-bottom: 23px; }
.pdetaildesc ul.plistattr { text-align: right; }
.pdetaildesc ul.plistattr li { display: inline-block; }
.pdetaildesc ul.plistattr + .cat { margin-top: 0; }
.pdetaildesc .cat { 
    font-size: 13px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.075em; 
    margin-bottom: 3px; margin-top: 12px;
}
.pdetaildesc .title { 
    font-variation-settings: "wdth" 125;
    font-size: 20px; font-weight: 800; letter-spacing: 0; 
}
.pdetaildesc .desc { margin-top: 15px; font-size: 14px; color: #666; }
.pdetaildesc .desc h6 { 
    font-size: 16px; font-weight: 500; color: var(--gigi-darkblue); letter-spacing: 0.01em;
    margin-bottom: 2px; 
}
.pdetaildesc .total_price { margin-top: 25px; padding-top: 12px; border-top: 1px solid #d3d3d3; }
.pdetaildesc .price .mamount { color: var(--gigi-blue); }
.pdetaildesc .price del { font-size: 14px; letter-spacing: 0.02em; }
/*=================*/
/*====== ... ======*/
.pdetail_choice-wrap .section { padding-top: 30px; padding-bottom: 30px; }
.pdetail_choice-wrap .section + .section { border-top: 1px solid #d1d8f2; }
.pdetail_choice-wrap .section .title { 
    font-size: 17px; font-weight: 600;
    margin-bottom: 0.7em; 
}
.pdetail_choice-wrap .section .desc { 
    margin-top: -10px; margin-bottom: 10px;
    font-size: 13px; letter-spacing: 0.02em; color: #666; 
}
.pdetail_choice-wrap .section .d-flex { 
    --bs-gutter-x: 0.25rem; 
    margin-right: calc(-.5* var(--bs-gutter-x)); margin-left: calc(-.5* var(--bs-gutter-x));
}
/*=================================*/
/*====== bigradio / bigcheck ======*/
.pdetail_choice-wrap [class*=big] {
    display: flex; flex-direction: column;
    flex: 0 0 auto; width: 33.3333333333%; max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5); padding-left: calc(var(--bs-gutter-x)* .5);
    position: relative; margin-bottom: 5px; 
    min-width: 80px; overflow: hidden;
}
.pdetail_choice-wrap [class*=big] input { position: absolute; left: -9999px; }
.pdetail_choice-wrap [class*=big] label { 
    display: flex; flex-direction: column; width: 100%; height: 100%;
    padding: 0; border-radius: 15px; border: 1px solid transparent; cursor: pointer; 
    font-size: 13px; text-align: center; letter-spacing: 0.02em;
}
.pdetail_choice-wrap [class*=big] label:before {
    content: ''; width: calc(100% - var(--bs-gutter-x)); height: 100%; border: 1px solid #d2d2d2; border-radius: 15px;
    position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);
}
.pdetail_choice-wrap [class*=big] .img { display: block; width: 100%; }
.pdetail_choice-wrap [class*=big] .img img { border-radius: 14px 14px 0 0; }
.pdetail_choice-wrap [class*=big] .transimg img { max-width: 85%; }
.pdetail_choice-wrap [class*=big] .transimg.hoverimg img.hover { margin-left: -50%; max-width: 70%; }
.pdetail_choice-wrap [class*=big] label .labeldesc { margin-top: 8px; padding: 6px 8px 12px; }
.pdetail_choice-wrap [class*=big] label .labeldesc small {
    font-size: 11px; color: #888; line-height: 1.1;
    display: block; margin-top: 5px;
}
.pdetail_choice-wrap [class*=big] .price { 
    font-size: 11px; color: #666; letter-spacing: 0.025em; 
    padding: 0px 8px 12px; margin-top: auto;
}
.pdetail_choice-wrap .bigcheck label:after {
    content: ''; width: 1.2em; height: 1.2em; border: 1px solid #e1e1e1; border-radius: 50%;
    position: absolute; top: 5px; right: 5px;
    font-family: 'Material Symbols Outlined'; font-size: 17px; font-weight: 400; color: #fff; line-height: 1.2; letter-spacing: 0;
}
/*--*/
.pdetail_choice-wrap [class*=big] input:checked + label { padding: 5px; }
.pdetail_choice-wrap [class*=big] input:checked + label img { border-radius: 10px 10px 0 0; }
.pdetail_choice-wrap [class*=big] input:checked + label:before { border: 2px solid var(--gigi-blue); }
.pdetail_choice-wrap .bigcheck input:checked + label:after { content: '\e92f'; border-color: transparent; background: var(--gigi-blue); }
.pdetail_choice-wrap [class*=big] [disabled] + label { opacity: 0.3; border-color: transparent; cursor: auto; }
.pdetail_choice-wrap [class*=big] [disabled] + label img { opacity: 0.3; }
.pdetail_choice-wrap [class*=big].overlaymask:before { width: calc(100% - 4px); left: 2px; border-radius: 15px; }
.pdetail_choice-wrap [class*=big].overlaymask label { opacity: 0.5; }
/*--*/
.pdetail_choice-wrap .numbers-row { margin: 6px 8px 8px; }
.pdetail_choice-wrap .numbers-row input { position: static; height: 30px; font-size: 14px; }
.pdetail_choice-wrap .numbers-row .button_inc { width: 30px; }
.pdetail_choice-wrap .numbers-row .button_inc:before { font-size: 1em; }
/*=================*/
/*====== ... ======*/
.pdetail_totaladdcart-wrap .total_price { margin-bottom: 7px; }
.pdetail_totaladdcart-wrap .total_price .title { font-size: 13px; position: relative; top: 3px; }
.pdetail_totaladdcart-wrap del { font-size: 14px; color: #999; }
.pdetail_totaladdcart-wrap .mamount { color: var(--gigi-blue); }
/*--*/
.pdetail_totaladdcart-wrap .btn-solid { 
    font-variation-settings: "GRAD" 150, "wdth" 150;
    font-size: 12px; font-weight: 500; letter-spacing: 0.05em; border-radius: 100px; 
    background: var(--gigi-blue); width: 100%; min-width: auto; min-height: 42px; padding: 14px 10px;
}
.pdetail_totaladdcart-wrap .btn-split-wrap > *:last-child .btn-solid.btn-fullbtm { background: #0c7bf4; color: #fff; }
/*===========================*/
/*====== btm fixed con ======*/
a.btn-checkout-wrap { display: block; padding: 14px 0px; }
a.btn-checkout-wrap .wrap { 
    display: flex; justify-content: center; align-items: center; 
    position: relative; min-height: 45px;
    color: var(--gigi-blue); line-height: 1; 
}
a.btn-checkout-wrap .total_price .mamount sup { top: 3px; }
a.btn-checkout-wrap .text.btn-solid { 
    font-variation-settings: "GRAD" 150, "wdth" 150;
    font-size: 10px; font-weight: 300;
    min-height: 33px; min-width: auto; background: var(--gigi-blue); margin-left: 10px; padding: 0.5em 1.3em;
}
/*--*/
a.btn-checkout-wrap .total_price,
a.btn-checkout-wrap .qtt_basket  { position: absolute; top: 50%; transform: translate(0, -50%); }
a.btn-checkout-wrap .total_price { left: 0; }
a.btn-checkout-wrap .qtt_basket { right: 0; }
/*--*/
a.btn-checkout-wrap.disabled { cursor: auto; }
a.btn-checkout-wrap.disabled .wrap,
a.btn-checkout-wrap.disabled .total_price .title { color: #aaa; }
a.btn-checkout-wrap.disabled .text.btn-solid { background: #ccc; }
/*--*/
.qtt_basket .qtt {
    font-size: 13px; font-weight: 700; text-align: center; line-height: 2;
    width: 2em; height: 2em; border-radius: 50%;
    position: relative; top: 10px; margin-right: -10px; display: inline-block; vertical-align: middle;
}
.qtt_basket .icon { font-size: 25px; display: inline-block; vertical-align: middle; }
/*=================*/
/*====== ... ======*/
.editcartconfirm-wrap .offcanvas-body { padding-top: 30px; padding-bottom: 25px; }
.editcartconfirm-wrap .titlehead { font-size: 20px; padding-right: 24px; }
.editcartconfirm-wrap .fixedbtm-wrap { padding: 14px 0px; }
.editcartconfirm-wrap ul.cart_list .wrap { border-color: transparent; background: #f6f6f6; }


/*=====================================================================*/
/* MENU DETAIL (Narrow) */
/*=====================================================================*/
.pdetail-wrap.d_narrow.infocanvasbtm.offcanvas { max-height: 83vh; }
/*--*/
.pdetail-wrap.d_narrow .pdetail_top-wrap { padding-top: 18px; padding-bottom: 18px; }
/*--*/
.pdetail-wrap.d_narrow .pdetailimg { margin-bottom: 0; }
.pdetail-wrap.d_narrow .pdetailimg:not(.transimg) { border-radius: 15px; overflow: hidden; }
.pdetail-wrap.d_narrow .pdetailimg.transimg img:only-child { max-width: 78%; }
.pdetail-wrap.d_narrow .pdetailimg.hoverimg img { max-width: 95%; margin-left: -6%; }
.pdetail-wrap.d_narrow .pdetailimg.hoverimg img.hover { max-width: 83%; margin-left: -55%; }
.pdetail-wrap.d_narrow ul.plistattr { display: flex; column-gap: 6px; justify-content: center; margin-top: 6px; }
.pdetail-wrap.d_narrow ul.plistattr .icon { font-size: 15px; }
/*--*/
.pdetail-wrap.d_narrow .pdetaildesc { padding: 0; height: 100%; display: flex; flex-direction: column; }
.pdetail-wrap.d_narrow .pdetaildesc .cat { font-size: 10px; font-weight: 800; }
.pdetail-wrap.d_narrow .pdetaildesc .title { font-variation-settings: "wdth" 100; font-size: 18px; line-height: 1.1; }
.pdetail-wrap.d_narrow .pdetaildesc .desc { margin-top: 4px; font-size: 12px; }
.pdetail-wrap.d_narrow .pdetaildesc .total_price { margin-top: auto; margin-bottom: 3px; padding-top: 20px; border: none; }
.pdetail-wrap.d_narrow .pdetaildesc .total_price del { font-size: 11px; }
.pdetail-wrap.d_narrow .pdetaildesc .total_price .mamount { font-size: 24px; }
/*=================*/
/*====== ... ======*/
.pdetail-wrap.d_narrow .section textarea.form-control { font-variation-settings: "wdth" 75; font-weight: 600; font-size: 15px; letter-spacing: 0; }
/*=================*/
/*====== ... ======*/
.pdetail-wrap.d_narrow .fixedbtm-wrap { padding: 14px 0px 16px; }
.pdetail-wrap.d_narrow .pdetail_totaladdcart-wrap .total_price .title { font-size: 12px; top: 2px; }
.pdetail-wrap.d_narrow .pdetail_totaladdcart-wrap .mamount { font-size: 26px; }
.pdetail-wrap.d_narrow .pdetail_totaladdcart-wrap .btn-solid { min-height: 38px; padding: 10px 10px; font-size: 11px; }
.pdetail-wrap.d_narrow .numbers-row input { height: 38px; font-size: 16px; }
/*=================*/
/*====== ... ======*/
.pdetail-wrap.d_narrow .pdetail_choice-wrap .section { padding: 16px 18px; background: #fff; }
.pdetail-wrap.d_narrow .pdetail_choice-wrap .section + .section { border-top: 2px solid #ededed; }
.pdetail-wrap.d_narrow .pdetail_choice-wrap .section .title-wrap { gap: 2px; margin-bottom: 8px; }
.pdetail-wrap.d_narrow .pdetail_choice-wrap .section .title { 
    font-variation-settings: "wdth" 87.5; font-size: 14px; font-weight: 700; letter-spacing: 0;
    margin-bottom: 0;
}
.pdetail-wrap.d_narrow .pdetail_choice-wrap .section .desc { margin-top: 1px; margin-bottom: 0; font-size: 12px; }
.pdetail-wrap.d_narrow .pdetail_choice-wrap .section .desc.select_options { margin-top: 1px; font-size: 11px; }
/*--*/
.row-cols-1 > [class*=big] { width: 100%; }
.row-cols-2 > [class*=big] { width: 50%; }
.row-cols-4 > [class*=big] { width: 25%; min-width: auto; }
/*--*/
.pdetail-wrap.d_narrow [class*=big]:not(.hrz) label { background: #fff; }
.pdetail-wrap.d_narrow [class*=big]:not(.hrz) .right { padding: 8px 6px; }
.pdetail-wrap.d_narrow [class*=big]:not(.hrz) .right .labeldesc { padding: 0; margin: 0; line-height: 1.05; }
.pdetail-wrap.d_narrow [class*=big]:not(.hrz) .right .price { padding: 0; }
.pdetail-wrap.d_narrow [class*=big]:not(.hrz) .right .labeldesc + .price { margin-top: 10px; }
/*=================*/
/*====== ... ======*/
[class*=big].hrz label { 
    flex-direction: row; column-gap: 7px; align-items: center; 
    background: #fff; padding: 5px 5px; border: none; 
    text-align: left;
}
[class*=big].hrz label:before { border-radius: 12px; }
[class*=big].hrz label .img { width: 75px; }
[class*=big].hrz label .img img { border-radius: 8px; }
[class*=big].hrz label .right { flex: 1 0 0%; display: flex; flex-direction: column; justify-content: center; height: 100%; }
[class*=big].hrz label .right .labeldesc { padding: 3px 12px 3px 0; margin-top: 0; font-size: 12px; line-height: 1.05; }
[class*=big].hrz label .right .labeldesc small { font-size: 10px; color: #777; margin-top: 0px; }
[class*=big].hrz label .right .labeldesc * + small { margin-top: 2px; }
[class*=big].hrz label .right .price { padding: 8px 4px 2px; align-self: end; }
[class*=big].hrz.nodesc .img { width: 100%; }
[class*=big].hrz.nodesc .img img { border-radius: 11px; }
[class*=big].hrz.nodesc.short label { padding: 3px; }
[class*=big].hrz.nodesc.short .img { height: 65px; }
[class*=big].hrz.nodesc.short .img img { object-fit: cover; width: 100%; height: 100%; }
[class*=big].hrz input:checked + label img { border-radius: 8px; padding: 1px; }
/*--*/
.bigradio.hrz label:after {
    content: ''; width: 1.25em; height: 1.25em; border: 1px solid #e1e1e1; border-color: transparent; border-radius: 50%;
    position: absolute; top: 3px; right: 5px;
    font-family: 'Material Symbols Outlined'; font-size: 15px; font-weight: 400; color: #fff; line-height: 1.1; letter-spacing: 0; text-align: center;
}
.bigradio.hrz input:checked + label:after { content: '\e92f'; border-color: transparent; background: var(--gigi-blue); }
/*--*/
.bigcheck.hrz label .labeldesc .badge { font-size: 9px; white-space: normal; margin-bottom: 5px; padding: 4px 6px; }
.bigcheck.hrz label:after { content: '\2b'; width: 1.25em; height: 1.25em; font-size: 15px; color: #999; text-align: center; line-height: 0.8; }
.bigcheck.hrz input:checked + label:after { color: #fff; line-height: 1.1; }
/*.bigcheck.hrz input:checked + label:before { border: 1px solid transparent; }*/
/*.bigcheck.hrz input:checked + label img { border-radius: 8px; border: 2px solid var(--gigi-blue); padding: 3px; }*/
/*=================*/
/*====== ... ======*/
.divide_title { 
    display: flex; align-items: center; width: 100%; margin: 15px 0; 
    font-size: 12px; color: #666; 
}
.divide_title span { padding-left: 15px; padding-right: 15px; }
.divide_title:before,
.divide_title:after { content: ''; flex: 1 0 0%; min-width: 20px; border-top: 1px solid #ccc; }
/*=================*/
/*====== ... ======*/
.pdetail-wrap.d_narrow .section.milk .bigradio.hrz label .img { width: 60px; }
/*--*/
.pdetail-wrap.d_narrow .section.addon { background: #faefdf; }
.pdetail-wrap.d_narrow .section.addon .bigcheck.hrz label:before { border: transparent; }
.pdetail-wrap.d_narrow .section.addon .bigcheck.hrz input:checked + label:before { border: 2px solid var(--gigi-blue); }
.pdetail-wrap.d_narrow .section.addon .btn-effright { font-size: 12px; font-weight: 600; color: var(--gigi-blue); }


/*=====================================================================*/
/* ORDER CONFIRMATION */
/*=====================================================================*/
.pickupconfirm-wrap { background: #f3f3f3; }
/*--*/
.pickupconfirm-wrap .orderlocname { position: relative; padding-left: 26px; }
.pickupconfirm-wrap .orderlocname:before {
    content: '\e0c8'; font-family: 'Material Symbols Outlined'; font-size: 19px; font-weight: 400; color: var(--gigi-darkblue); line-height: 1; letter-spacing: 0;
    position: absolute; top: -1px; left: 0;
}
/*--*/
.oconfirm_order ul.cart_list .wrap { border-color: transparent; background: #f6f6f6; }
/*====================*/
/*====== Upsell ======*/
.plistproduct.tiny { 
    display: block; background: #f6f6f6; border: 1px solid transparent; border-radius: 10px; padding: 10px 10px;
    color: var(--gigi-darkblue);
}
.plistproduct.tiny .plistimg { background: #f3f3f3; max-width: 70px; border-radius: 8px; overflow: hidden; }
.plistproduct.tiny .transimg { padding-bottom: 5px; }
.plistproduct.tiny .plistdesc { display: grid; height: 100%; word-break: break-word; }
.plistproduct.tiny .title { font-size: 14px; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; margin-bottom: 15px; }
.plistproduct.tiny .price { font-size: 13px; font-weight: 600; margin-top: auto; }
.plistproduct.tiny .price sub { 
    bottom: 1px; margin-right: 1px;
    font-size: 9px; font-weight: 500; letter-spacing: 0.05em;
}
/*--*/
.upsellslider .owl-nav { margin: 0; }
.upsellslider .owl-nav .owl-prev { left: -10px; }
.upsellslider .owl-nav .owl-next { right: -10px; }
.upsellslider .owl-nav button[class*=owl-] { 
    font-size: 20px; color: #999; line-height: 2.4;
    width: 2em; height: 2em; background: #fff; border-radius: 50%; margin: 0; outline: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); 
    position: absolute; top: 50%; transform: translate(0,-50%);
}
.upsellslider .owl-nav button[class*=owl-] i { font-size: 1em; font-weight: 700; }
.upsellslider .owl-nav button[class*=owl-]:hover { background: #fff; }
.upsellslider .owl-nav button[class*=owl-]:hover i { color: var(--gigi-blue); }
.upsellslider .owl-nav .disabled { cursor: default; opacity: 0; visibility: hidden; }
/*--*/
.upsellslider .item { position: relative; min-width: 235px; max-width: 235px; overflow: hidden; height: 100%; }
/*--*/
.upsellslider .owl-stage { display: flex; }
.upsellslider .item,
.plistproduct.tiny,
.plistproduct.tiny > div { height: 100%; }
/*=================*/
/*====== ... ======*/
.pack_select { border: 1px solid #d1d8f2; border-radius: 8px; position: relative; }
.pack_select ~ div { margin-top: 5px; }
.pack_select label { 
    margin-bottom: 0; padding: 12px 45px 12px 50px; z-index: 1; 
    font-size: 15px; font-weight: 600; 
}
.pack_select .container_check .checkmark { top: 12px; left: inherit; right: 15px; }
.pack_select .icon { 
    font-size: 25px; font-weight: 300;
    position: absolute; top: 9px; left: 15px; width: 1em; 
}
.pack_select.more .left { margin-right: 5px; }
.pack_select.more .right { margin-left: auto; color: var(--gigi-blue); }
.pack_select.more .infoicon { line-height: 0; vertical-align: middle; }
.pack_select.more .infoicon .icon { position: static; font-size: 1.1em; font-weight: 500; }
/*=================*/
/*====== ... ======*/
.oconfirm_remark textarea { 
    padding: 12px 15px; 
    font-variation-settings: "GRAD" 35, "wdth" 62.5;
    font-size: 18px; font-weight: 600; letter-spacing: 0.01em;
}
.oconfirm_remark textarea::-webkit-input-placeholder { color: #7d87aa; opacity: 1; font-size: 14px; font-weight: 200; letter-spacing: 0.02em; }
.oconfirm_remark textarea:-moz-placeholder { color: #7d87aa; opacity: 1; font-size: 14px; font-weight: 200; letter-spacing: 0.02em; }
.oconfirm_remark textarea::-moz-placeholder {  color: #7d87aa;opacity: 1; font-size: 14px; font-weight: 200; letter-spacing: 0.02em; }
.oconfirm_remark textarea:-ms-input-placeholder { color: #7d87aa; opacity: 1; font-size: 14px; font-weight: 200; letter-spacing: 0.02em; }
/*=========================*/
/*====== VOUCHER ADD ======*/
.btn-addvoucher { 
    font-variation-settings: "GRAD" 35, "wdth" 112.5;
    font-size: 16px; font-weight: 800; color: var(--gigi-blue); letter-spacing: 0.01em;
    background-image: linear-gradient(to right, #e3e9ff 0%, #eff2ff 100%);
    position: relative; border-radius: 8px; min-height: 65px; padding: 0.5em 1em; overflow: hidden;
}
.btn-addvoucher > div { display: inline-flex; align-items: center; }
.btn-addvoucher .icon {
    font-size: 18px; color: #fff; text-align: center; line-height: 1.5;
    display: inline-block; background: var(--gigi-blue); width: 1.5em; height: 1.5em; border-radius: 50%; margin-right: 8px;
}
.btn-addvoucher .icon.deco { position: absolute; bottom: -10px; right: -6px; margin: 0; opacity: 0.2; font-size: 30px; }
/*--*/
.addvoucher_result {
    font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: #666;
    position: relative; margin-top: 5px; padding: 10px 15px; border: 1px solid #e4e8f5; border-radius: 8px;
}
.addvoucher_result:before { 
    content: '\e638'; font-family: 'Material Symbols Outlined'; font-size: 22px; font-weight: 300; color: var(--gigi-blue); line-height: 0; letter-spacing: 0; vertical-align: middle;
    display: inline-block; margin-top: -2px; margin-right: 5px;
}
.addvoucher_result .btn-close { font-size: 10px; top: 12px; right: 16px; }
/*===========================*/
/*====== COMFIRM STORE ======*/
.alertpop-confirmstore .modal-dialog { max-width: 315px; margin-left: auto; margin-right: auto; }
.alertpop-confirmstore .modal_header .title { font-size: 16px; line-height: 1.15; }
.alertpop-confirmstore .img { align-self: center; text-align: center; }
.alertpop-confirmstore .img img { border-radius: 8px; }
.alertpop-confirmstore .desc { font-size: 12px; color: #555; }
.alertpop-confirmstore .desc .title { font-size: 18px; font-weight: 600; color: var(--gigi-darkblue); }
.alertpop-confirmstore .distance { 
    font-size: 11px; font-weight: 600; color: var(--gigi-darkblue);
    position: relative; margin-top: 3px; padding-left: 15px;
}
.alertpop-confirmstore .distance:before {
    content: '\e0c8'; font-family: 'Material Symbols Outlined'; font-size: 1em; font-weight: 700;
    position: absolute; top: 0px; left: 0;
}
.alertpop-confirmstore .btn-solid, 
.alertpop-confirmstore .btn-border { 
    font-size: 10px; line-height: 1.05;
    border-radius: 6px; min-height: 40px; padding: 8px 10px; 
}


/*=====================================================================*/
/* PROCESSING */
/*=====================================================================*/
.oprocessing-wrap .osection:nth-last-child(2) { margin-bottom: 50px; }
.oprocessing-wrap .total_price .icon { font-size: 32px; font-weight: 300; margin-right: 5px; }
.oprocessing-wrap .total_price .mamount { 
    font-size: 48px; font-weight: 400; color: var(--gigi-blue); vertical-align: top;
    display: inline-block; 
}
.oprocessing-wrap .total_price .mamount sup { font-weight: 600; }
.oprocessing-wrap .total_price .mamount .cent { font-weight: 500; top: 3px; }
/*--*/
.oprocessing-wrap ul.cart_list > li + li { margin-top: 18px; }
.oprocessing-wrap ul.cart_list .wrap { display: block; padding: 0; border: none; }
.oprocessing-wrap ul.cart_list .wrap .title { padding: 0; }
.oprocessing-wrap ul.cart_list .wrap ul.option { margin-top: 2px; }
/*--*/
.processcancel-wrap.fixedbtm-wrap { padding: 25px 0px; font-size: 14px; }
.processcancel-wrap .progress { background: #c8ccdd; height: 4px; }
.processcancel-wrap .progress-bar { background-color: var(--gigi-lblue); }
.processcancel-wrap a.btn-solid { 
    background: var(--gigi-lblue); padding: 1.2em 1.5em; min-width: 132px; min-height: auto;
    font-size: 10px; font-weight: 900;
}
.processcancel-wrap a.btn-solid.cancel { background: #d1d8f2; color: var(--gigi-blue); }
.processcancel-wrap a.btn-solid.cancel:hover { color: var(--gigi-blue); }


/*=====================================================================*/
/* ORDER RECEIPT */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.pickupdetail-wrap .btn-solid { border-radius: 8px; }
.pickupdetail-wrap .btn-border { 
    min-height: 45px; width: 100%; border-color: #c8d4dd; border-radius: 8px;
    font-size: 11px; 
}
.pickupdetail-wrap .btn-border:hover { color: var(--gigi-blue); background: rgba(163,178,230,0.3); border-color: transparent; }
/*--*/
.pickupdetail-wrap ul.cart_list .wrap { border-color: transparent; background: #f6f6f6; }
.pickupdetail-wrap ul.cart_list .wrap .title { padding-right: 0; }
/*===========================*/
/*====== order process ======*/
ul.orderprocess { 
    margin: 0 auto; padding-left: 0px; list-style: none; 
    display: flex; justify-content: center; width: 100%; text-align: center; 
}
ul.orderprocess li { flex: 1 0 0%; max-width: 135px; position: relative; padding: 20px 10px 0; overflow: hidden; }
ul.orderprocess .desc { font-size: 12px; color: #666; line-height: 1.1; }
ul.orderprocess .desc .icon { 
    font-size: 30px; font-weight: 300; color: #aaa; line-height: 1; 
    display: block; margin-top: 10px; 
}
ul.orderprocess .desc img.icon { max-width: 60px; width: 100%; filter: grayscale(1); }
/*--*/
ul.orderprocess li:before {
    content: ''; width: calc(100% + 1px); border-top: 1px dashed var(--border-lightblue);
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
}
ul.orderprocess li:first-child:before { left: inherit; transform: none; }
ul.orderprocess li:last-child:before { left: inherit; right: 0; }

ul.orderprocess li:after { 
    content: ''; font-size: 10px; width: 1em; height: 1em; 
    display: inline-block; border: 1px solid #dce8f1; border-radius: 50%; background: #dce8f1; 
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
}
/*--*/
ul.orderprocess li.done:after { background: var(--gigi-lblue); border-color: var(--gigi-lblue); }
ul.orderprocess li.done:before { border-top: 1px solid var(--gigi-lblue); z-index: 1; }
ul.orderprocess li.done .desc { 
    font-variation-settings: "wdth" 112.5; 
    font-size: 12px; font-weight: 700; color: var(--gigi-darkblue); letter-spacing: 0.01em;
}
ul.orderprocess li.done .desc .icon { color: var(--gigi-darkblue); }
ul.orderprocess li.done .desc img.icon { filter: grayscale(0); }
/*--*/
ul.orderprocess + .btn-refresh-wrap { text-align: center; margin-bottom: -8px; margin-top: 12px; }
.btn-refresh-wrap .btn-solid {
    font-size: 10px; font-weight: 800; color: var(--gigi-darkblue) !important; letter-spacing: 0.05em; line-height: 1;
    background: #f3f3f3; border-radius: 100px; /*min-height: auto; min-width: auto;*/
}
.btn-refresh-wrap .btn-solid .icon { font-size: 1.5em; }
/*=================*/
/*====== ... ======*/
.receipt_titlehead .title { 
    font-variation-settings: "wdth" 125;
    font-size: 22px; font-weight: 800; color: var(--gigi-blue); 
    margin: 0; position: relative; padding-left: 35px;
}
.receipt_titlehead .title .icon { 
    font-size: 1.35em; font-weight: 300; color: #aaa; 
    position: absolute; top: -3px; left: 0; margin-right: 2px; 
}
/*--*/
.odesc.addr { position: relative; padding-left: 25px; }
.odesc.addr .favourite-check { left:0; right:inherit; bottom:inherit; }
.odesc.addr .btn-effright { font-variation-settings: "wdth" 25; font-size: 13px; color: #666; margin-left: 3px; }
.odetail_tooltip[data-popper-placement^=top] .tooltip-arrow::before,
.odetail_tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--gigi-lblue); }
.odetail_tooltip[data-popper-placement^=right] .tooltip-arrow::before,
.odetail_tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--gigi-lblue); }
.odetail_tooltip .tooltip-inner { background: var(--gigi-lblue); color: #fff; }


/*=====================================================================*/
/* MY ORDER */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.myorder_list .cards { position: relative; }
.myorder_list .cards + .cards { margin-top: 5px; }
.myorder_list .cards .btn-cardctrl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
/*--*/
.myorder_list .cards .btn-solid,
.myorder_list .cards .btn-border { 
    font-variation-settings: "wdth" 25;
    font-size: 11px; font-weight: 900; color: var(--gigi-blue) !important; line-height: 1; vertical-align: middle;
    min-width: 100px; min-height: 30px; margin-top: 3px; padding: 0.65em 0.8em; z-index: 2;
}
.myorder_list .cards .btn-solid { background: rgba(0,163,224,0.15); }
.myorder_list .cards .btn-border { border-color: rgba(0,163,224,0.4); }
.myorder_list .cards .btn-border:hover { background: rgba(0,163,224,0.15); border-color: transparent; }
.myorder_list .cards .btn-rate .icon { font-variation-settings: 'FILL' 1; font-size: 1.3em; color: #ff9200; margin-right: 2px; }
.myorder_list .cards .btn-oreorder { background: var(--gigi-lgreen); }
.myorder_list .btn-solid.actionbtn { 
    background: #f3f3f3; border-radius: 8px; min-height: auto; padding: 1.25em 0.8em;
    font-size: 11px; font-weight: 600; color: var(--gigi-blue);
}
.myorder_list .btn-solid.actionbtn .icon { font-size: 1.3em; margin-left: 2px; }
.myorder_list .remark { font-size: 11px; color: #666; margin-top: 6px; }
/*=================*/
/*====== ... ======*/
.myorder_list .card-header {
    position: relative; padding: 16px; background: #fff; 
    border: 1px solid #d1d8f2; border-radius: 10px; transition: border 0.3s, border-radius 0.1s 0.3s;
}
.myorder_list [data-bs-toggle] + .card-header:after { 
    content: '\e5cf'; font-family: 'Material Symbols Outlined'; 
    font-size: 1.8em; font-weight: 300; color: var(--gigi-lblue); line-height: 1; letter-spacing: 0;
    position: absolute; right: 16px; bottom: 10px;
}
.myorder_list .card-header .title { font-size: 16px; font-weight: 600; margin-bottom: 0; }
.myorder_list .card-header .desc { 
    margin-top: 3px; margin-bottom: 0; padding-left: 0px; list-style: none; 
    font-size: 12px; color: #666; 
}
.myorder_list .card-header ul.desc li + li { margin-top: 1px; }
/*--*/
.myorder_list .card-header ul.cart_list { margin-top: 8px; display: flex; flex-wrap: wrap; }
.myorder_list .card-header ul.cart_list > li { display: inline-block; margin-right: 3px; margin-top: 3px; }
.myorder_list .card-header ul.cart_list .wrap { display: block; padding: 0; border: none; }
.myorder_list .card-header ul.cart_list .wrap .img { width: 35px; height: 35px; border-radius: 6px; }
.myorder_list .card-header ul.cart_list .badge.qtt { font-size: 9px; font-weight: 900; top: -0.6em; right: -1px; }
/*--*/
.myorder_list .total_price .mamount { font-size: 26px; font-weight: 400; color: var(--gigi-blue); }
.myorder_list .total_price .mamount sup { top: 3px; }
.myorder_list .total_price .mamount .cent { letter-spacing: 0.05em; }
/*=================*/
/*====== ... ======*/
.myorder_list .card-body { 
    padding: 16px; border: 1px solid #d1d8f2; border-top: 0; border-radius: 0px 0px 10px 10px; 
}
.myorder_list .card-body ul.cart_list .wrap { display: block; padding: 0; border: none; }
.myorder_list .card-body ul.cart_list .wrap .title { padding: 0; }
.myorder_list .card-body ul.cart_list .wrap ul.option { margin-top: 2px; }
.myorder_list .card-body ul.cart_list .wrap ul.option > li { display: block; }
.myorder_list .card-body .btn-solid { background: var(--gigi-lgreen); }
/*=================*/
/*====== ... ======*/
.myorder_list [aria-expanded=true] + .card-header,
.myorder_list [aria-expanded=true] ~ .card-body-wrap .card-body { background: #eff4f7; border-color: transparent; }
.myorder_list [aria-expanded=true] + .card-header { 
    border-bottom: 1px dashed #d1d8f2; 
    border-radius: 10px 10px 0 0; transition: border-radius 0s 0s;
}
.myorder_list [aria-expanded=true] + .card-header:after { content: '\e5ce' }
/*=================*/
/*====== ... ======*/
.odetailsplitcon { display: flex; flex-direction: column; }
.odetailsplitcon .osection { padding-left: 18px; padding-right: 18px; }


/*=====================================================================*/
/* REWARDS */
/*=====================================================================*/
.rwdptshare .innerback.tophead-wrap { border-radius: 0; }
.rwdptshare .innerback.tophead-wrap .btn-back, 
.rwdptshare .innerback.tophead-wrap .titlehead .title, 
.rwdptshare .innerback.tophead-wrap .iconright > [class*=icon] { color: var(--gigi-lblue); }
/*--*/
/*-- my total point --*/
.mypointearn-wrap { background: var(--gigi-blue); padding-top: 0px; padding-bottom: 48px; text-align: center; }
.mypointearn-wrap .stitle { font-size: 13px; color: #7799cc; }
.mypointearn-wrap .totalpoint { margin-top: 5px; }
.mypointearn-wrap .desc { font-size: 11px; color: #7799cc; margin-top: 3px; }
/*--*/
.mtoplapcon { background: #fff; margin-top: -25px; border-radius: 20px 20px 0 0; }
/*================================*/
/*====== button page change ======*/
.pagechgbtn-wrap { 
    border-bottom: 1px solid #d1d8f2; 
    padding-top: 16px; padding-bottom: 16px; 
}
.pagechgbtn-wrap a { 
    display: flex; justify-content: center; align-items: center; 
    background: #f8f8f8; padding: 0.5em 1em; min-height: 50px; height: 100%; border-radius: 8px; transition: 0.3s ease-out;
    font-size: 14px; font-weight: 800; color: var(--gigi-blue); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1;
}
.pagechgbtn-wrap a:not(.active):hover { box-shadow: 0px 0px 0 2px rgba(0,0,0,0.08); }
.pagechgbtn-wrap a.active { background-color: var(--gigi-blue); color: #fff; }
/*===========================*/
/*====== point history ======*/
.pointhist_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.pointhist_list ul + ul { margin-top: 5px; }
.pointhist_list li + li { margin-top: 5px; }
.pointhist_list li a { 
    color: var(--gigi-darkblue); 
    border: 1px solid #d1d8f2; border-radius: 10px; 
    margin: 0; padding: 12px 0;
}
.pointhist_list li .type { font-variation-settings: "wdth" 125; font-size: 16px; font-weight: 800; letter-spacing: 0; }
.pointhist_list li .date { font-size: 13px; color: #666; text-transform: uppercase; margin-top: 5px; }
.pointhist_list li .pts { font-size: 17px; font-weight: 600; color: var(--gigi-lblue); letter-spacing: 0.04em; }
/*--*/
.pointhist_list li.deduct .pts { color: #f76c5a; }
/*=========================*/
/*====== reward list ======*/
.rewardlist_row { margin: 0 -5px; }
.rewardlist_col { padding: 0 5px; margin-bottom: 10px; }
.rewardlist_col .con { 
    background: #f3f3f3; border-radius: 10px; overflow: hidden; height: 100%; 
    display: flex; flex-direction: column;
}
.rewardlist_col a.detail { 
    display: block; padding: 15px 15px; color: var(--gigi-darkblue); 
    display: flex; flex-direction: column; height: 100%; position: relative;
}
.rewardlist_col .titlehead { 
    font-variation-settings: "wdth" 125;
    font-size: 15px; font-weight: 800; letter-spacing: 0; line-height: 1.15; word-break: break-word;
    position: absolute; left: 0; top: 0; width: 100%; padding: 14px;
}
.rewardlist_col .img { display: flex; align-items: center; justify-content: center; margin: 50px auto 20px; width: 100%; min-height: 130px; }
.rewardlist_col .img img { max-width: 120px; max-height: 130px; }
/*--*/
.rewardlist_col .point_progress { font-size: 13px; color: #666; margin-top: auto; }
.rewardlist_col .point_progress .title { 
    font-size: 11px; line-height: 1.05; 
    position: relative; top: -2px;
}
.rewardlist_col .point_progress .pts_indication del { display: block; font-size: 0.8em; color: #999; }
.rewardlist_col .point_progress .progress { background: #c8ccdd; height: 4px; margin-top: 5px; }
.rewardlist_col .point_progress .progress-bar { background-color: var(--gigi-lblue); }
/*--*/
.rewardlist_col a.btn-solid { 
    min-width: auto; min-height: auto; border-radius: 0; padding: 14px 10px; background: var(--gigi-lgreen); display: block; width: 100%; margin-top: -8px;
    font-size: 11px; font-weight: 900; color: var(--gigi-blue) !important; letter-spacing: 0.025em;
}
.rewardlist_col a.btn-solid:before { border-radius: 0; }
/*--*/
.rewardlist_col.redeemok .con { background: #fbeccf; }
/*===========================*/
/*====== reward detail ======*/
.rewardetail .img { text-align: center; }
.rewardetail .img img { max-width: 160px; max-height: 150px; }
.rewardetail .titlehead {
    font-variation-settings: "wdth" 125; 
    font-size: 18px; font-weight: 800; text-align: center; letter-spacing: 0; 
    margin-top: 25px; 
}
/*--*/
.rewardetail .detail { margin-top: 40px; }
.rewardetail .detail > div + div { margin-top: 14px; padding-top: 14px; border-top: 1px solid #d1d8f2; }
.rewardetail .detail .title,
.rewardetail .detail .card-header { font-size: 16px; font-weight: 600; }
.rewardetail .detail .desc,
.rewardetail .detail .card-body { font-size: 14px; color: #666; margin-top: 1px; }
/*--*/
.rewardetail .detail .card-header {
    position: relative; display: block; padding: 0; padding-right: 2em; background: none; border: none;
    color: var(--gigi-darkblue); 
}
.rewardetail .detail .card-header:after { 
    content: '\e5cf'; font-family: 'Material Symbols Outlined'; font-size: 1.2em; line-height: 1; letter-spacing: 0;
    position: absolute; right: 0; top: 50%; transform: translate(0,-50%);
}
.rewardetail .detail .card-header[aria-expanded=true]:after { content: '\e5ce' }
/*--*/
.rewardetail .detail .card-body { padding: 2px 0px 5px; letter-spacing: 0.025em; }
.rewardetail .detail .card-body ul { margin-bottom: 0; margin-top: 10px; padding-left: 18px; }
.rewardetail .detail .card-body ul li + li { margin-top: 12px; }
/*--*/
.rewardetail .detail .desc .btn-solid {
    font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0.025em;
    min-width: auto; min-height: auto; padding: 5px 10px; border-radius: 5px;
}
/*=================================*/
/*====== reward detail (pop) ======*/
.rewardesc-wrap .rewardetail .titlehead { margin-top: 0; }
.rewardesc-wrap .rewardetail .point { 
    font-size: 14px; color: #666; text-align: center;
    margin-top: 3px; margin-bottom: 20px; 
}
.rewardesc-wrap .btn-solid { background: var(--gigi-lblue); }
/*=======================================*/
/*====== redeem confirmation (pop) ======*/
.redeemconfirm-wrap .img { display: flex; align-items: center; justify-content: center; margin: 30px auto; min-height: 100px; }
.redeemconfirm-wrap .img img { max-width: 160px; max-height: 150px; }
.redeemconfirm-wrap .point { font-size: 14px; color: #666; margin-top: 3px; }
.redeemconfirm-wrap .btn-solid { background: var(--gigi-lblue); }
.redeemconfirm-wrap .btn-border { background: #f8f8f8; border-color: transparent; }
/*=================================*/
/*====== redeem status (pop) ======*/
.redeemstatus-wrap .desc { font-size: 14px; color: #666; margin-top: 5px; }
.redeemstatus-wrap .btn-solid { background: var(--gigi-lblue); }
.redeemstatus-wrap [class*=icon-] svg circle,
.redeemstatus-wrap [class*=icon-] svg path { opacity: 0; stroke-linecap: round; }
.redeemstatus-wrap [class*=icon-] svg circle { stroke-dasharray: 240px, 240px; stroke-dashoffset: 480px; }
/*--*/
.redeemstatus-wrap .icon-success svg path { stroke-dasharray: 50px, 50px; stroke-dashoffset: 0px; }
.redeemstatus-wrap .icon-failed svg path { stroke-dasharray: 65, 65; stroke-dashoffset: 0; }
/*--*/
.redeemstatus-wrap.show [class*=icon-] svg circle { opacity: 1; animation: svg-checkmark-circle 0.6s ease-in-out backwards; }
.redeemstatus-wrap.show .icon-success svg path { opacity: 1; animation: svg-checkmark 0.25s ease-in-out 0.7s backwards; }
.redeemstatus-wrap.show .icon-failed svg path { opacity: 1; animation: svg-failmark 0.25s ease-in-out 0.7s backwards; }
/*--*/
@keyframes svg-checkmark {
    0% { stroke-dashoffset: 50px; } 
    100% { stroke-dashoffset: 0; }
}
@keyframes svg-checkmark-circle {
    0% { stroke-dashoffset: 240px; } 
    100% { stroke-dashoffset: 480px; }
}
@keyframes svg-failmark {
    0% { stroke-dashoffset: 65px; } 
    100% { stroke-dashoffset: 0; }
}
/*=======================*/
/*====== my reward ======*/
.voucheradd-wrap {
    width: calc(100% + 36px); position: relative; top: 0; left: -18px;
    padding: 20px; 
}
.voucheradd-wrap .form-group.d1 .deco { border-radius: 8px !important; }
.voucheradd-wrap .form-group.d1 .deco:before, 
.voucheradd-wrap .form-group.d1 .deco:after { background: #fff; }
.voucheradd-wrap .form-group.d1 .form-control { padding-right: 15px; }
.voucheradd-wrap .btn-close { background-size: 0.7em; top: 20px; right: calc(67px + 5px); cursor: pointer; display: none; }
.voucheradd-wrap input::-webkit-input-placeholder { opacity: 0.7; }
.voucheradd-wrap input:-moz-placeholder { opacity: 0.7; }
.voucheradd-wrap input::-moz-placeholder { opacity: 0.7; }
.voucheradd-wrap input:-ms-input-placeholder { opacity: 0.7; }
.voucheradd-wrap [type=submit].btn { 
    font-variation-settings: "wdth" 50;
    font-size: 12px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--gigi-blue); padding: 8px 12px; border-radius: 8px;
}
/*--*/
.voucheradd-wrap .btn-scan { background: #f3f3f3; height: calc(100% - 2px); margin-top: 1px; border-radius: 6px 0 0 6px; }
.voucheradd-wrap .btn-scan svg { fill: var(--gigi-blue); }
/*--*/
ul.myrewardlist { margin-bottom: 0; padding-left: 0; list-style: none; }
ul.myrewardlist li { margin-bottom: 5px; }
ul.myrewardlist li:last-child { margin-bottom: 0; }
ul.myrewardlist a { display: block; }
/*--*/
.mycoupon { 
    position: relative; align-items: center; align-content: center; min-height: 88px; margin: 0; padding: 8px 8px; padding-right: 40px; color: var(--gigi-darkblue);
    border: 1px solid #d1d8f2; border-radius: 10px; transition: 0.3s ease-out;
}
.mycoupon .img { width: 95px; padding: 5px 8px; text-align: center; }
.mycoupon .img img { max-height: 55px; }
.mycoupon .detail { min-width: 50%; padding: 5px 8px; }
.mycoupon .title { font-variation-settings: "wdth" 125; font-size: 15px; font-weight: 800; letter-spacing: 0; }
.mycoupon .desc { font-size: 12px; color: #666; margin-top: 3px; }
.mycoupon .desc_alert { font-size: 10px; font-weight: 600; color: #f76c5a; margin-top: 10px; }
.mycoupon .voucher_tnc a,
.mycoupon .voucher_tnc span {
    font-size: 9px; font-weight: 700; color: var(--gigi-blue); line-height: 1; 
    position: absolute; right: 3px; bottom: 3px; /*z-index: 1;*/
    display: inline-block; background: #ebebeb; padding: 5px 8px; border-radius: 8px;
}
/*--*/
.mycoupon.past { color: #666; filter: grayscale(1); }
.mycoupon .status { 
    position: absolute; top: 2px; right: 2px; 
    width: auto; background: #dedede; margin: 0; 
    font-size: 11px; font-weight: 100; color: var(--gigi-darkblue); text-transform: none;
}
.mycoupon .badge.qtt {
    width: inherit; margin-top: 0; background: #7accc8; top: 3px; right: 3px;
    font-size: 11px; color: var(--gigi-blue);
}
/*================================*/
/*====== VOUCHER ADD (page) ======*/
.pickupvoucher-wrap .voucheradd-wrap { background: #f8f8f8; padding-top: 50px; margin-top: -30px; border-radius: 0 0 20px 20px; }
/*--*/
.voucher_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.voucher_list .container_radio { padding-left: 0; }
.voucher_list .container_radio .checkmark { top: 50%; left: 15px; transform: translate(0, -50%); }
.voucher_list .mycoupon { padding-left: 40px; }
.voucher_list .mycoupon:hover { box-shadow: none !important; }


/*=====================================================================*/
/* DASHBOARD */
/*=====================================================================*/
.dashsplitcon { display: flex; flex-direction: column; }
/*=================*/
/*====== top ======*/
.dashtop-wrap { padding: 14px 0; }
/*--*/
.dashtop-wrap > .d-flex { align-items: flex-start; column-gap: 7px; }
.dashtop-wrap .logo svg,
.dashtop-wrap .logo img { max-width: 22px; width: 100%; }

a.dashprofile { display: inline-block; }
.dashprofile .greet_text { font-size: 12px; color: var(--border-lightblue); line-height: 1.1; }
.dashprofile .name { font-size: 17px; font-weight: 600; color: var(--gigi-blue); margin-top: 1px; }
/*--*/
.dashbalance { text-align: right; }
.dashbalance a { display: inline-block; }
.dashbalance .title { font-size: 12px; color: var(--border-lightblue); line-height: 1.125; }
.dashbalance .balance { font-size: 17px; font-weight: 600; color: var(--gigi-blue); margin-top: 1px; }
.dashbalance .balance sup { 
    top: 0px; margin-right: 0.15em;
    font-size: 8px; font-weight: 400; letter-spacing: 0.035em; vertical-align: super;
}
/*=========================*/
/*====== hero slider ======*/
/*
 * Add default space
 * To prevent a sudden increase in page height after the Owl Carousel finished loading
*/
.herobanner-slider:not(.owl-loaded) { position: relative; display: block; background: url('../js/owlcarousel/ajax-loader.gif') no-repeat center; }
.herobanner-slider:not(.owl-loaded):before { content: ''; display: inline-block; width: 100%; aspect-ratio: 10 / 12.35; }
.herobanner-slider:not(.owl-loaded) .item { display: none; }
/*--*/
.herobanner-slider { border-radius: 20px; overflow: hidden; }
.herobanner-slider .owl-dots { 
    position: absolute; /*top: 20px;*/ bottom: 30px; right: 0px; 
    display: flex; flex-direction: column; align-items: end; row-gap: 6px;
}
.herobanner-slider .owl-dots .owl-dot span { 
    position: relative; display: block; width: 14px; height: 1px; 
    background: rgba(255,255,255,1); margin: 0; border-radius: 0; 
    transition: .3s ease;
}
.herobanner-slider .owl-dots .owl-dot.active span, 
.herobanner-slider .owl-dots .owl-dot:hover span { background: var(--gigi-oldblue); width: 22px; }
/*--*/
.herobanner-slider .video-wrap { 
    background-repeat: no-repeat; background-size: contain; background-position: center;
    position: relative; width: 100%; aspect-ratio: 4 / 5; 
}
.herobanner-slider .video-wrap > .ratio { position: absolute; left: 50%; transform: translate(-50%,0); }
.herobanner-slider .ratio-4x5 { --bs-aspect-ratio: 124.78%; }
/*=================*/
/*====== ... ======*/
.btn-wrap.gx-2 { --bs-gutter-x: 9px; margin-top: 18px; margin-bottom: 16px; }
.btn-dash { 
    display: block; position: relative; height: 100%; min-height: 80px; backface-visibility: hidden;
    color: var(--gigi-blue) !important;
}
.btn-dash svg { transform: translateZ(0); }
.btn-dash .icon { 
    position: absolute; right: 1px; bottom: 1px; max-width: 30px; width: 26%; 
    font-size: 1.5em; color: var(--gigi-oldblue); text-align: center; line-height: 1; 
}
/*--*/
.btn-dash .info { 
    width: 100%; height: 100%; padding: 9px 10px; 
    display: flex; flex-direction: column; justify-content: flex-end; 
    container-type: inline-size;
}
.btn-dash .title { 
    font-size: 9px; font-size: max(9px, 2cqw); font-weight: 600; color: #666; letter-spacing: 0.02em; line-height: 1.1;
    margin-bottom: auto;
}
.btn-dash .no { 
    font-variation-settings: "GRAD" 50, "wdth" 50; 
    font-size: 15px; font-size: max(15px, 4cqw); font-weight: 700; line-height: 1.05; letter-spacing: 0.075em; 
    margin-top: 12px; 
}
.btn-dash .no sup { font-size: 0.6em; font-weight: 600; letter-spacing: 0.05em; top: -0.4em; margin-right: 1px; }
.btn-dash .no span { font-weight: 100; }
.btn-dash .unit { 
    font-variation-settings: "GRAD" 150, "wdth" 25;
    font-size: 8px; font-size: max(8px, 2.3cqw); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; 
    margin-top: 2px; width: 70%; 
}
/*--*/
.btn-dash .bg { 
    --gigi-lblue:rgba(0,163,224,0.3); backface-visibility: hidden;
    display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; z-index: -1; 
    position: absolute; top: 0; height: 100%; width: 100%;
}
.btn-dash .bg .top,
.btn-dash .bg .btm_l { background: #fff; border: 1px solid var(--gigi-lblue); }
.btn-dash .bg .top {
    flex: 1; min-height: 30px; width: 100%; border-radius: 10px 10px 0 0; z-index: 1;
    border-bottom: none;
}
.btn-dash .bg .btm_l {
    flex: 1 0 0%;
    border-radius: 0 0 0 10px; z-index: 1; border-top: none; border-right: none; margin-top: -2px;
}
.btn-dash .bg .btm_r { 
    width: calc(41% + 3px); aspect-ratio: 1; max-width: 50px; margin-top: -3px; margin-left: -5px;
}
.btn-dash .bg .btm_r svg { width: 100%; height: 100%; position: relative; top: 1px; }
/*--*/
.ribbon-voucher { position: absolute; top: -9px; left: 10px; width: 70%; max-width: 100px; z-index: 1; }
.ribbon-voucher:after {
    content: ''; position: absolute; top: 0; right: -6px; width: 0; height: 0; 
    border-style: solid; border-width: 9px 0 0 6px;
    border-color: transparent transparent transparent #afadaa;
}
.ribbon-voucher > span {
    font-variation-settings: "GRAD" 100, "wdth" 25;
    font-size: min(3vw, 10px); font-weight: 600; color: #ff166a; white-space: nowrap;
    display: flex; align-items: center; background: #fff5e6; padding: 0.65em 0.61em;
    border-radius: 10px 0 4px 4px; border: 1px solid #f6e0be; 
}
.ribbon-voucher > span:after { 
    content: '\e5cc'; font-family: 'Material Symbols Outlined'; 
    font-size: 1.3em; font-weight: 500; line-height: 0.5; letter-spacing: 0;
    position: absolute; right: 3px;
}
/*--*/
.btn-tiercup .deco-blink {
    position: absolute; right: 0; width: 40px; mask-size: 100%; mask-repeat: no-repeat;
    background-image: linear-gradient(to bottom, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
}
.btn-tiercup .deco-blink img { opacity: 0; }
.btn-tiercup .icon { padding: 2px; }
.btn-tiercup .circleprgbar svg { width: 115%; }
.btn-tiercup .circleprgbar svg circle { stroke-width: 5px; }
.btn-tiercup .circleprgbar svg circle:first-child { stroke: #e3e3e3; }
.btn-tiercup .circleprgbar svg circle:last-child { stroke: var(--gigi-blue); }
.btn-tiercup .circleprgbar img { max-height: 18px; }
.btn-tiercup .icon.og { padding: 0; width: 27%; }
.btn-tiercup .icon.og .circleprgbar svg { display: none; }
.btn-tiercup .icon.og .circleprgbar img { max-height: 28px; }
.btn-dailycheck .icon { padding: 2px; }
.btn-dailycheck.alertdot .no { color: #bbb; }
.btn-dailycheck.alertdot:before { font-size: 10px; background: #ff1d00; top: -0.4em; right: 10px; }
.btn-dailycheck.checked:before {
    content: '\e5ca';
    font-family: 'Material Symbols Outlined'; font-size: 12px; font-weight: 700; color: #fff; text-align: center; line-height: 1.5;
    display: inline-block; background: var(--gigi-lblue); width: 1.5em; height: 1.5em; border-radius: 50%;
    position: absolute; top: 5px; right: 5px;
}




/*=================*/
/*====== ... ======*/
a.btn-pickup {
    display: flex; justify-content: space-between; align-items: center;
    position: relative; background: #f3f3f3; min-height: 75px; padding: 13px 15px; border-radius: 12px;
}
a.btn-pickup .stitle { font-size: 11px; color: #666; letter-spacing: 0.025em; }
a.btn-pickup .title { max-width: 120px; width: 100%; margin-top: 6px; }
a.btn-pickup .icon { font-size: 20px; font-weight: 400; color: var(--gigi-lblue); }
/*=====================*/
/*====== reorder ======*/
.dashreorder.cards { background: #f8f8f8; border-radius: 12px; }
/*--*/
a.btn-reorder { 
    display: flex; justify-content: space-between; align-items: center; 
    position: relative; background: #f3f3f3; padding: 13px 15px; min-height: 61px; 
    border-bottom: 1px solid transparent; border-radius: 12px;
}
a.btn-reorder .title { max-width: 150px; width: 100%; }
a.btn-reorder .icon { font-size: 24px; font-weight: 400; color: var(--gigi-lblue); line-height: 0; }
a.btn-reorder[aria-expanded="true"] { 
    border-color: #e3e3e3; border-radius: 12px 12px 0 0; 
    background-image: linear-gradient(to bottom, #f3f3f3 0%, #ffffff 100%); 
}
a.btn-reorder[aria-expanded="true"] .icon:before { content: '\e5ce'; }
/*--*/
.dashreorder.cards .card-body { padding: 16px; }
.dashreorder.cards .card-body + .card-body { border-top: 1px solid #e3e3e3; }
/*--*/
.dashreorder.cards ul.desc { 
    margin-bottom: 0; padding-left: 0px; list-style: none; 
    font-size: 12px; color: #666;
}
.dashreorder.cards ul.desc li + li { margin-top: 1px; }
/*--*/
.dashreorder.cards ul.cart_list { 
    margin-top: 8px; margin-bottom: 5px;
    display: inline-flex; flex-wrap: wrap; 
}
.dashreorder.cards ul.cart_list > li { display: inline-block; margin-right: 3px; margin-top: 3px; }
.dashreorder.cards ul.cart_list .wrap { display: block; padding: 0; border: none; }
.dashreorder.cards ul.cart_list .wrap .img { width: 50px; height: 50px; border-radius: 8px; /*border: 1px solid var(--gigi-lblue);*/ }
.dashreorder.cards ul.cart_list .wrap .img img { width: 100%; height: 100%; object-fit: contain; }
/*--*/
.dashreorder.cards .totalitem { font-size: 12px; color: #666; letter-spacing: 0.025em; }
.dashreorder.cards .badge.qtt { font-size: 9px; padding: 0px 5px; top: -0.5em; }
/*--*/
.dashreorder.cards .total_price .mamount { font-size: 23px; color: var(--gigi-blue); }
.dashreorder.cards .total_price .mamount sup { top: 3px; }
.dashreorder.cards .total_price .mamount .cent { letter-spacing: 0.075em; }
/*--*/
.dashreorder.cards .btn-solid { 
    font-variation-settings: "wdth" 25;
    font-size: 11px; font-weight: 900; color: var(--gigi-blue); line-height: 1; 
    min-width: 100px; min-height: auto; background: #e9ecef; padding: 0.65em 0.8em;
}
.dashreorder.cards .btn-reordernow { background: var(--gigi-lgreen); }
.dashreorder.cards .btn-detail { 
    font-variation-settings: "GRAD" 0, "wdth" 25;
    font-weight: 600; text-transform: none; letter-spacing: 0.02em; 
    min-width: auto; padding-right: 20px; 
}
.dashreorder.cards .btn-detail:after {
    content: '\e5cc'; font-family: 'Material Symbols Outlined'; font-size: 1em; line-height: 1; letter-spacing: 0;
    position: absolute; right: 6px; top: 50%; transform: translate(0, -50%);
}
/*====================*/
/*====== slider ======*/
.promobanner-slider:not(.owl-loaded) { position: relative; display: block; background: url('../js/owlcarousel/ajax-loader.gif') no-repeat center; }
.promobanner-slider:not(.owl-loaded):before { content: ''; display: inline-block; width: 100%; aspect-ratio: 10 / 3; }
.promobanner-slider:not(.owl-loaded) .item { display: none; }
/*--*/
.promobanner-slider { margin-top: 16px; border-radius: 10px; overflow: hidden; }
.promobanner-slider .owl-dots { position: absolute; top: -3px; right: 10px; }
.promobanner-slider .owl-dots .owl-dot span { 
    position: relative; display: block; width: 6px; height: 6px; 
    background: rgba(255,255,255,1); margin: 0 2px; 
    border: 1px solid var(--gigi-blue); border-radius: 50%; 
    transition: .3s ease;
}
.promobanner-slider .owl-dots .owl-dot.active span, 
.promobanner-slider .owl-dots .owl-dot:hover span { background: var(--gigi-blue); }
/*========================*/
/*====== promo list ======*/
.notifdetail-wrap .conwrap { max-width: 1000px; margin-left: auto; margin-right: auto; }

/*=============================*/
/*====== promo container ======*/
.promocon-wrap { --bs-gutter-x: 0.625rem; margin-top: 16px; text-align: center; }
.promocon-wrap a img { border-radius: 10px; }
/*--*/
.promosq .d-flex { flex-direction: column; justify-content: space-between; height: 100%; }
.promosq .d-flex > div:last-child { margin-top: 5px; }




/*=====================================================================*/
/* RATING */
/*=====================================================================*/
.rating-wrap .titlehead .title {
    font-variation-settings: "wdth" 112.5;
    font-size: 22px; font-weight: 900; color: var(--gigi-blue); letter-spacing: 0;
    margin-bottom: 2px;
}
.rating-wrap textarea { font-size: 18px; font-weight: 600; }
.rating-wrap textarea::-webkit-input-placeholder { color: #7d87aa; opacity: 1; font-size: 15px; font-weight: 400; }
.rating-wrap textarea:-moz-placeholder { color: #7d87aa; opacity: 1; font-size: 15px; font-weight: 400; }
.rating-wrap textarea::-moz-placeholder {  color: #7d87aa;opacity: 1; font-size: 15px; font-weight: 400; }
.rating-wrap textarea:-ms-input-placeholder { color: #7d87aa; opacity: 1; font-size: 15px; font-weight: 400; }
/*=================*/
/*====== ... ======*/
.satisfy-rate-wrap { display: inline-block; margin-top: 10px; padding-top: 40px; position: relative; }
/*--*/
label.satisfy_rate { font-size: 0; line-height: 1; letter-spacing: 0; }
label.satisfy_rate input { position: absolute; opacity: 0; left: -9999px; }
label.satisfy_rate .icon { font-size: 40px; color: #aaa; position: relative; cursor: pointer; }
label.satisfy_rate .bubble {
    font-size: 10px; font-weight: 900; color: #fff; text-align: center; letter-spacing: 0.075em; line-height: 1.2; text-transform: uppercase;
    background: var(--gigi-blue); padding: 0.7em 0.8em; border-radius: 8px 8px;
    position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);
    filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.1)); white-space: nowrap; opacity: 0;
}
label.satisfy_rate .bubble:before {
    content: ' '; width: 0; height: 0;
    position: absolute; top: 0; left: 50%; margin-left: -10px; margin-top: -10px;
    border: 10px solid; border-color: transparent transparent transparent var(--gigi-blue);
}
label.satisfy_rate .bubble span { position: relative; }
label.satisfy_rate input#ls_start ~ .bubble { font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0.025em; }
/*--*/
label.satisfy_rate input:checked ~ .icon { color: var(--gigi-lblue); }
label.satisfy_rate input:checked ~ .bubble { opacity: 1; }
label.satisfy_rate input#perfect:checked ~ .icon { animation: tada; animation-duration: 1s; }
label.satisfy_rate input#perfect:checked ~ .icon:after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; opacity: 0;
    width: 4px; height: 4px; border-radius: 50%; animation: firework-11 0.5s ease forwards 0.1s;
}
label.satisfy_rate input[disabled] ~ .icon { cursor: not-allowed; }

@keyframes ripples {
    0% { width: 100%; height: 100%; opacity: 0; }
    55% { opacity: 0.5; }
    100% { width: calc(100% + 10px); height: calc(100% + 10px); opacity: 0; }
}
/* **(https://getcssscan.com/css-checkboxes-examples?ref=beautifulbuttons-bottom) */
@keyframes firework-11 {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
    }
    30% { opacity: 1; }
    100% {
        opacity: 0;
        box-shadow: 0 -19px 0 0px #4F29F0, 18px -12px 0 0px #4F29F0, 18px 12px 0 0px #4F29F0, 0 19px 0 0px #4F29F0, -18px 12px 0 0px #4F29F0, -18px -12px 0 0px #4F29F0;
    }
}
/*=================*/
/*====== ... ======*/
.satisfy-point-wrap .d-flex { 
    --bs-gutter-x: 0.25rem; 
    margin-right: calc(-.5* var(--bs-gutter-x)); margin-left: calc(-.5* var(--bs-gutter-x));
}
.satisfy-point-wrap .bigcheck {
    display: flex; flex-direction: column; flex: 33.3333333333%;
    padding-right: calc(var(--bs-gutter-x)* .5); padding-left: calc(var(--bs-gutter-x)* .5); margin-bottom: 5px; 
}
.satisfy-point-wrap .bigcheck input { position: absolute; left: -9999px; }
.satisfy-point-wrap .bigcheck label { 
    display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%;
    padding: 16px 8px; border-radius: 25px; border: 1px solid #eee; cursor: pointer; 
    font-variation-settings: "wdth" 150; font-size: 11px; text-align: center;
}
.satisfy-point-wrap .bigcheck input:checked + label { border: 1px solid var(--gigi-lgreen); background: var(--gigi-lgreen); }
/*=================*/
/*====== ... ======*/
ul.ratecart_list { margin-bottom: 0; padding-left: 0; list-style: none; }
ul.ratecart_list > li + li { margin-top: 12px; }
ul.ratecart_list .wrap { background: #f6f6f6; border-radius: 10px; padding: 12px 12px; }
ul.ratecart_list .wrap .left { max-width: 98px; }
ul.ratecart_list .wrap .img { background: #fbeccf; max-width: 98px; border-radius: 10px; overflow: hidden; text-align: center; aspect-ratio: 1; }
ul.ratecart_list .wrap .img img { width: 100%; height: 100%; object-fit: contain; }
ul.ratecart_list .wrap .title { font-variation-settings: "wdth" 75; font-size: 15px; font-weight: 700; margin: 0; }
ul.ratecart_list .wrap .price { margin-top: 5px; color: #666; }
/*--*/
label.statisfy_like { 
    font-size: 0; line-height: 1; letter-spacing: 0; 
    display: inline-block; margin-right: 15px; 
}
label.statisfy_like input { position: absolute; opacity: 0; left: -9999px; }
label.statisfy_like .icon { 
    font-size: 25px; font-weight: 400; color: #aaa; 
    display: inline-block; position: relative; cursor: pointer; 
}

label.statisfy_like input:checked ~ .icon { color: var(--gigi-lblue); }
label.statisfy_like input[id*=il_like]:checked ~ .icon { animation: pulse; animation-duration: 0.5s; }
/*--*/
.satisfy-item-wrap textarea { background: rgba(255,255,255,0.75); padding: 12px 15px; border: none; border-radius: 10px; font-size: 15px; }


/*=====================================================================*/
/* MEMBER TIER */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.circleprgbar {
    position: relative; max-width: min(10vw, 46px); width: 100%; padding: 0;
    display: inline-flex; align-self: flex-start;
}
.circleprgbar:before { content: ''; display: inline-block; width: calc(100% - 5px); padding-bottom: calc(100% - 5px); margin: auto; border-radius: 50%; }
.circleprgbar svg {
    width: 111%; 
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg);
}
.circleprgbar svg circle { 
    fill: transparent; stroke-width: 6px;
    stroke-dasharray: calc(2 * 3.14 * 30px); 
}
.circleprgbar svg circle:first-child { stroke: #2a4e84; stroke-dashoffset: 0; }
.circleprgbar svg circle:last-child { 
    stroke: #fff; 
    stroke-dashoffset: calc((2 * 3.14 * 30px) * ((100 - var(--percentage)) / 100)); 
}
.circleprgbar .img,
.circleprgbar img { 
    max-height: 36px;
    position: absolute; bottom: 0; top: 0; left: 0; right: 0; margin: auto;
    font-size: 1.6em; text-align: center; line-height: 1.6;
}
/*--*/
.totalpoint { 
    font-variation-settings: "wdth" 125; 
    font-size: min(14vw, 54px); font-weight: 900; color: #eee; letter-spacing: -0.025em; line-height: 1; white-space: nowrap; 
    margin-top: -6px;
}
.totalpoint .icon { 
    display: inline-block; max-width: 0.7em; width: 100%; margin-right: 6px; position: relative; top: -0.1em;
    line-height: 0; vertical-align: middle;
}
.totalpoint sup { 
    font-variation-settings: "wdth" 25; 
    font-size: min(14px, 0.35em); font-weight: 400; letter-spacing: 0.01em; 
    vertical-align: top; top: 0.7em; margin-left: 5px;
}
/*========================*/
/*====== top detail ======*/
.membertier-wrap .innerback.tophead-wrap { border-radius: 0; color: var(--gigi-lblue); }
.membertier-wrap .innerback.tophead-wrap .btn-back,
.membertier-wrap .innerback.tophead-wrap .titlehead .title { color: var(--gigi-lblue); }
.membertier-wrap .innerback.tophead-wrap .titlehead .desc { font-size: 12px; }
/*--*/
.mbrdetail-wrap {
    position: relative; z-index: 3;
    background: var(--gigi-blue); border-radius: 0 0 20px 20px; padding-top: 5px; padding-bottom: 25px;
    font-size: 13px; color: var(--gigi-lblue);
}
.mbrdetail-wrap .mbrcard { padding-right: 5px; position: relative; }
.mbrdetail-wrap .mbrcard img { border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; }
.mbrdetail-wrap .mbrcard img.deco { 
    max-width: 80px; width: 20%; border: none; border-radius: 0; 
    position: absolute; left: 0; top: 100%; transform: rotate(173deg); 
}
/*--*/
.mbrdetail-wrap .desc { 
    display: flex; flex-direction: column; padding-top: 3px; padding-bottom: 5px; 
    line-height: 1.25; 
}
.mbrdetail-wrap .stitle { font-size: 11px; color: #7799cc; margin-bottom: 10px; }
.mbrdetail-wrap .mbrname { display: inline-block; font-size: 18px; font-weight: 600; color: #fff; }
.mbrdetail-wrap .totalpoint { font-size: min(9vw, 32px); color: #eee; letter-spacing: -0.005em; }
.mbrdetail-wrap .totalpoint + .sdesc { margin: 3px 0px 20px 16px; font-size: 10px; text-indent: -16px; }
.mbrdetail-wrap .totalpoint + .sdesc .icon { font-size: 1.3em; font-weight: 300; vertical-align: middle; margin-right: 3px; }
/*--*/
.collectedcup { position: relative; }
.collectedcup .num { font-variation-settings: "wdth" 125; font-size: min(5.5vw, 26px); font-weight: 900; color: #fff; }
.collectedcup .num a { color: #fff; }
.collectedcup .num span { font-size: 0.9em; font-weight: 100; }
.collectedcup .info-wrap { padding-right: 5px; }
.collectedcup .icon.info { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 600; color: var(--gigi-lblue); }
.collectedcup .sdesc { font-size: 11px; letter-spacing: 0.025em; line-height: 1.33; margin-top: 8px; }
.collectedcup .title { font-variation-settings: "wdth" 125; font-size: min(4.5vw, 22px); font-weight: 900; color: #fff; line-height: 1.05; }
.collectedcup .deco { position: absolute; right: 0; top: 0; width: 50%; max-width: 120px; }
/*--*/
.mbrdetail-wrap .smalltnc { 
    font-size: 11px; color: #7799cc; letter-spacing: 0.025em; 
    margin-top: 40px; 
}
.mbrdetail-wrap .smalltnc p { margin-bottom: 0; padding-left: 5px; text-indent: -5px; line-height: 1.15; }
.mbrdetail-wrap .smalltnc p + p { margin-top: 3px; }
/*--*/
.corp.membertier-wrap { background: var(--gigi-lblue); min-height: 100vh; padding-bottom: 50px; position: relative; }
.corp.membertier-wrap .footnote {
    font-variation-settings: "wdth" 150;
    font-size: 12px; font-weight: 400; color: #fff; text-align: center; letter-spacing: 0;
    position: absolute; bottom: 29px; left: 50%; transform: translate(-50%, 0); opacity: 0.3;
}
.corp .mbrdetail-wrap { padding-bottom: 40px; }
.corp .mbrdetail-wrap .collectedcup .title { color: #c8e5ff; }
.corp .mbrdetail-wrap .collectedcup .sdesc { font-size: 13px; line-height: 1.2; }
.corp .mbrcta-wrap { border-radius: 0; }
/*======================*/
/*====== cta part ======*/
.mbrcta-wrap { background: var(--gigi-lblue); margin-top: -25px; padding-top: 60px; padding-bottom: 30px; border-radius: 0 0 20px 20px; position: relative; z-index: 2; }
/*--*/
.mbrcta-wrap .btn-split-wrap { margin: -12px -18px 0; }
.mbrcta-wrap .btn-split-wrap .btn-solid {
    flex-direction: column; width: 100%; min-height: 150px; border-radius: 0; 
    font-variation-settings: "wdth" 112.5; font-size: 18px; text-transform: none; letter-spacing: 0;
}
.mbrcta-wrap .btn-split-wrap .btn-solid:before { content: none; }
.mbrcta-wrap .btn-split-wrap .btn-solid img { max-height: 60px; margin-bottom: 6px; }
.mbrcta-wrap .btn-myreward { background: #379dc9; }
.mbrcta-wrap .btn-refer { background: #3a94c9; }
/*--*/
.mbrcta-wrap .btn-effright { font-size: 12px; color: #fff; }
/*============================*/
/*====== daily check-in ======*/
.dailycheck-wrap { max-width: 600px; margin: 0 auto; padding: 0px 20px; text-align: center; }
.dailycheck-wrap .titlehead { 
    font-variation-settings: "wdth" 112.5;
    font-size: 18px; font-weight: 700; color: #d7ecfc; letter-spacing: 0; 
    margin-bottom: 6px;
}
.dailycheck-wrap .titlehead .infoicon { vertical-align: sub; line-height: 0; display: inline-block; }
.dailycheck-wrap .titlehead .icon { font-size: 1.05em; color: #d7ecfc; }
.dailycheck-wrap .btn-solid {
    font-size: 10px;
    background: #307ab0; min-height: auto; padding: 13px 18px; margin-top: 20px; border: 1px solid transparent; z-index: 1;
}
.dailycheck-wrap .btn-solid:before { content: none; }
.dailycheck-wrap .btn-solid .clickopen {
    width: 100%; height: 100%; background: transparent;
    position: absolute; top: 0; left: 0; cursor: pointer;
}
.dailycheck-wrap .btn-solid.checked { background: var(--gigi-lblue); border-color: rgba(255,255,255,0.2); }
/*--*/
ul.indicate { padding-left: 0; margin-bottom: 0; list-style: none; }
ul.indicate.row-cols-7 li { flex: 0 0 auto; width: 14.285714%; padding: 0 0px; }
ul.indicate li .desc { font-size: 8px; font-weight: 600; color: #fff; letter-spacing: 0.075em; text-align: center; text-transform: uppercase; }
/*--*/
.pointcoin { position: relative; }
.pointcoin .pts {
    display: inline-block; position: absolute; top: 51%; left: 50%; transform: translate(-50%, -50%);
    font-size: 15px; font-weight: 700; color: #d7ecfd; text-align: center; line-height: 0.8;
    /* font-variation-settings: "GRAD" 150, "wdth" 112.5; */
}
.pointcoin .pts small { display: block; font-size: 0.4em; letter-spacing: 0.1em; margin-top: 3px; }
.pointcoin .img {
    background-image: url(../images/icon-gigicoin-bw.svg);
    background-repeat: no-repeat; background-size: auto 82%; background-position: center; 
    width: 100%; aspect-ratio: 1; opacity: 0.2;
}
/*--*/
ul.indicate li.today .desc { font-weight: 900; }
ul.indicate li.checked .pointcoin .img { background-image: url(../images/icon-gigicoin.svg); background-size: auto 88%; opacity: 1; }
ul.indicate li.checked .pointcoin .pts { display: none; }
ul.indicate li.today.checked .pointcoin { animation: custbounceInDown 0.5s ease-out forwards; }

@keyframes custbounceInDown { 
    0%,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
    0% { opacity: 0; transform: translate(0,-100px) scaleY(1); }
    60% { opacity: 1; transform: translate(0,10px) scaleY(.9); }
    75% { transform: translate(0,-5px) scaleY(.95); }
    90% { transform: translate(0,5px) scaleY(.985); }
    to { transform: translate(0); }
}
/*========================*/
/*====== point part ======*/
.mbrpoint-wrap {
    margin-top: -25px; margin-bottom: 25px; padding: 0;
    letter-spacing: 0.025em; text-align: center;
}
/*--*/
.mbrpoint-wrap .mainshow { position: relative; z-index: 1; background: var(--gigi-lblue); padding: 50px 18px 0; }
.mbrpoint-wrap .mainshow:before {
    content: ''; width: 100%; height: 30px; background: var(--gigi-lblue); border-radius: 0 0 20px 20px;
    position: absolute; left: 0; bottom: -25px;
}
.mbrpoint-wrap .mainshow:after {
    content: ''; width: 100%; height: calc(100% - 14px); opacity: 0.8;
    position: absolute; top: -18px; left: 0;
    background-image: url(../images/v3/deco-mbrearnpoint.png); background-size: 66px; background-position: center;
}
/*--*/
.mbrpointearn { position: relative; z-index: 1; }
.mbrpointearn .title { font-size: 13px; color: #fff; }
.mbrpointearn .desc { font-size: 11px; color: #d7ecfc; text-align: right; letter-spacing: 0.025em; margin-top: 9px; }
.mbrpointearn .desc .icon { font-size: 1.3em; font-weight: 300; vertical-align: middle; margin-right: 3px; }
/*--*/
.btn-earnmore {
    display: inline-block; background: #0690c7; min-width: 162px; padding: 10px 16px; border-radius: 15px 15px 0 0;
    position: relative; top: 25px;
    font-size: 11px; font-weight: 500; color: #fff !important; text-align: left;
}
.btn-earnmore:before {
    content: '\e5cf'; font-family: 'Material Symbols Outlined'; font-size: 1.2em; line-height: 1; letter-spacing: 0;
    position: absolute; right: 10px; top: 50%; transform: translate(0, -50%);
}
.btn-earnmore[aria-expanded="true"]:before { content: '\e5ce'; }
/*--*/
/*
 * NEEDED (.collapsecon { display: table; width: 100%; })
 * wu da wu zhuang made it, thanks god thanks earth
 * dunno y, if dont have this, the collapse will looks cacat
*/
.collapsecon { display: table; width: 100%; position: relative; }
.collapsecon .earnmore { background: #0390c7; border-radius: 0 0 20px 20px; margin-bottom: -25px; }
.collapsecon .card-body { padding: 50px 18px 18px; }
/*--*/
.earnmore .btn-split-wrap .btn-solid {
    font-size: min(3.08vw, 12px); 
    color: var(--gigi-darkblue); letter-spacing: 0.065em; text-align: left;
    width: 100%; border: none; border-radius: 5px; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1); justify-content: start; overflow: visible;
}
.earnmore .btn-split-wrap .btn-refer { background: #52d9ff; }
.earnmore .btn-split-wrap .btn-checkin { background: #f0e1c7; }
.earnmore .btn-split-wrap .btn-refer img {
    position: absolute; right: -2%; top: -4%;
    width: 28%; max-width: 54px;
}
.earnmore .btn-split-wrap .btn-checkin img {
    position: absolute; right: -3%; top: -10%;
    width: 33%; max-width: 64px;
}
.earnmore .btn-effright { font-size: 12px; color: #fff; }
/*=====================================*/
/*====== Benefits (tab + slider) ======*/
.mbrbenefit-wrap { background: #f3f3f3; margin-top: -25px; padding-top: 65px; padding-bottom: 30px; border-radius: 0 0 20px 20px; }
/*--*/
.mbrbenefit-wrap .titlehead {
    display: flex; align-items: center; column-gap: 20px; margin-bottom: 16px;
    font-variation-settings: "wdth" 112.5; 
    font-size: 30px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.1;
}
.mbrbenefit-wrap .titlehead:before { content: ''; flex: 1; height: 1px; background: rgba(0,163,224,0.4); order: 1; }
.mbrbenefit-wrap .titlehead .icon { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 600; color: var(--gigi-lblue); margin-left: -10px; }
/*--*/
.mbrbenefit_tabbtn { --bs-gutter-x: 1px; }
.mbrbenefit_tabbtn a {
    position: relative; display: block; height: 100%; padding: 28px 6px 45px; border-radius: 15px 15px 0 0; cursor: pointer; align-content: space-around;
    font-variation-settings: "wdth" 125; 
    font-size: 16px; font-weight: 900; color: var(--gigi-darkblue); text-align: center; letter-spacing: -0.05em; line-height: 1;
}
.mbrbenefit_tabbtn a small {
    font-variation-settings: "wdth" 25; 
    font-size: 10px; font-weight: 500; color: var(--gigi-lblue); letter-spacing: 0.025em;
    position: absolute; left: 50%; top: 13px; transform: translate(-50%, 0);
}
.mbrbenefit_tabbtn li:nth-child(1) a { background: #e5e5e5; margin-top: 15px; }
.mbrbenefit_tabbtn li:nth-child(2) a { background: #d9d9d9; margin-top: 10px; }
.mbrbenefit_tabbtn li:nth-child(3) a { background: #cccccc; margin-top: 5px; }
.mbrbenefit_tabbtn li:nth-child(4) a { background: #bfbfbf; }
/*--*/
.mbrbenefit_tabcontent { background: #fff; border-radius: 20px; min-height: 200px; margin-top: -20px; position: relative; align-content: center; }
.mbrbenefit_tabcontent .owl-height { transition: none; }
/*--*/
ul.mbrbenefitlist { margin-bottom: 0; padding-left: 0; list-style: none; overflow: hidden; }
ul.mbrbenefitlist li + li { border-top: 1px solid #d9d9d9; }
ul.mbrbenefitlist .row { align-items: center; align-content: center; column-gap: 25px; margin: 0; padding: 15px 20px; }
ul.mbrbenefitlist .img { background: #eee; width: 62px; padding: 0; border-radius: 18px; text-align: center; }
ul.mbrbenefitlist .detail { min-width: 50%; padding: 5px 0; }
ul.mbrbenefitlist .title { font-size: 14px; font-weight: 600; }
ul.mbrbenefitlist .title b { font-weight: 700; }
ul.mbrbenefitlist .desc { font-size: 11px; color: #666; letter-spacing: 0.025em; margin-top: 3px; }
ul.mbrbenefitlist .point_progress { font-size: 10px; color: #666; letter-spacing: 0.025em; margin-top: 10px; }
ul.mbrbenefitlist .point_progress .progress {background: #c8ccdd; height: 4px; margin-top: 4px; }
ul.mbrbenefitlist .point_progress .progress-bar { background-color: var(--gigi-lblue); }
ul.mbrbenefitlist .focus .row { box-shadow: 0 0 10px rgba(1,46,115,0.15); }
ul.mbrbenefitlist .focus .img { width: 70px; }
ul.mbrbenefitlist .focus .img img { transform: scale(1.3); }
ul.mbrbenefitlist .focus .title { font-variation-settings: "wdth" 125; font-size: 1.1em; font-weight: 900; }
/*========================*/
/*====== tier color ======*/
.tier1 .totalpoint { color: #eee; }
.tier2 .totalpoint { color: var(--gigi-lgreen); }
.tier3 .totalpoint { color: #ffbfb7; }
.tier4 .totalpoint { color: #c8e5ff; }
/*--*/
.mbrbenefit_tabbtn li a.active.tier1 { background: #bdd6e9; }
.mbrbenefit_tabbtn li a.active.tier2 { background: var(--gigi-lgreen); }
.mbrbenefit_tabbtn li a.active.tier3 { background: #ffbfb7; }
.mbrbenefit_tabbtn li a.active.tier4 { background: var(--gigi-blue); color: #fff; }
.tier1 ul.mbrbenefitlist .img { background: #bdd6e9; }
.tier2 ul.mbrbenefitlist .img { background: var(--gigi-lgreen); }
.tier3 ul.mbrbenefitlist .img { background: #ffbfb7; }
.tier4 ul.mbrbenefitlist .img { background: #c8e5ff; color: #fff; }
/*--*/
ul.lock.mbrbenefitlist .img { background: #ccc; position: relative; filter: grayscale(1); }
ul.lock.mbrbenefitlist .img:before {
    content: ''; width: 100%; height: 100%; background: #000; border-radius: 18px;
    position: absolute; top: 0; left: 0; opacity: 0.35;
}
ul.lock.mbrbenefitlist .img:after {
    content: '\e897'; font-family: 'Material Symbols Outlined'; font-size: 1.35em; color: #fff;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
/*========================*/
/*====== FAQ button ======*/
.btn-mbrfaq {
    display: flex; align-items: center; 
    position: relative; padding: 22px 25px 22px 0; 
    font-variation-settings: "wdth" 25; font-size: 22px; font-weight: 800; color: var(--gigi-darkblue) !important; text-transform: uppercase; letter-spacing: 0.01em;
}
.btn-mbrfaq .icon { max-width: 60px; margin-right: 24px; }
.btn-mbrfaq .desc { font-size: 13px; font-weight: 500; color: #666; text-transform: none; letter-spacing: 0.01em; }
.btn-mbrfaq:before {
    content: '\e5cc'; font-family: 'Material Symbols Outlined'; font-size: 24px; font-weight: 400; color: var(--gigi-lblue); line-height: 0;
    position: absolute; right: 0; top: 50%; transform: translate(0,-50%);
}
/*=================================*/
/*====== FAQ detail (canvas) ======*/
.faq_collapse { padding: 20px 0 30px; }
.faq_collapse .cards + .cards { margin-top: 16px; padding-top: 16px; border-top: 1px solid #cee1e7; }
.faq_collapse .card-header { 
    font-size: 15px; font-weight: 600; color: var(--gigi-darkblue); letter-spacing: 0.016em; /*line-height: 1.15;*/
    position: relative; display: block; padding: 0; padding-right: 1.8em; background: none; border: none;
}
.faq_collapse .card-header:after { 
    content: '\e5cf'; font-family: 'Material Symbols Outlined'; 
    font-size: 1.2em; line-height: 1; letter-spacing: 0;
    position: absolute; right: 0; top: 50%; transform: translate(0,-50%);
}
.faq_collapse .card-header[aria-expanded=true]:after { content: '\e5ce' }
/*--*/
.faq_collapse .card-body { 
    font-size: 14px; color: #666; 
    margin-top: 3px; padding: 5px 0px 5px;
}
.faq_collapse .card-body p { line-height: 1.2; }
.faq_collapse ol,
.faq_collapse ul { margin-bottom: 0; padding-left: 14px; }
.faq_collapse .card-body > ol > li + li,
.faq_collapse .card-body > ul > li + li { margin-top: 12px; }
/*===========================*/
/*====== point history ======*/
.mycupearn-wrap { padding-bottom: 12px; }
.mycupearn-wrap .title { font-weight: 500; letter-spacing: 0.01em; }
.mycupearn-wrap .title small { font-weight: 400; color: #666; }
.mycupearn-wrap .desc { font-size: 13px; color: #666; margin-top: 10px; }
/*--*/
.mycupearn-wrap .collectedcup .num { color: var(--gigi-blue); padding-right: 10px; }
.mycupearn-wrap .circleprgbar { max-width: min(11vw, 40px); }
.mycupearn-wrap .circleprgbar svg circle:first-child { stroke: #e3e3e3; }
.mycupearn-wrap .circleprgbar svg circle:last-child { stroke: var(--gigi-blue); }
.mycupearn-wrap .circleprgbar img { max-height: 29px; }
/*--*/
.cupearnhist_list .stitle { font-size: 14px; font-weight: 400; color: #666; margin-bottom: 6px; }
.cupearnhist_list ul + .stitle { margin-top: 35px; }
.cupearnhist_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.cupearnhist_list ul + ul { margin-top: 5px; }
.cupearnhist_list li + li { margin-top: 5px; }
.cupearnhist_list li a { 
    color: var(--gigi-darkblue); 
    border: 1px solid #d1d8f2; border-radius: 10px; 
    margin: 0; padding: 12px 0;
}
.cupearnhist_list li .type { font-variation-settings: "wdth" 125; font-size: 17px; font-weight: 800; }
.cupearnhist_list li .date { font-size: 13px; color: #666; text-transform: uppercase; margin-top: 5px; }
.cupearnhist_list li .qtt { font-size: 17px; font-weight: 600; color: var(--gigi-lblue); }
.cupearnhist_list li .unit { font-size: 10px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.05em; }
/*=================*/
/*====== ... ======*/
.pop-infodesc .modal-dialog { max-width: 320px; margin-left: auto; margin-right: auto; }
.pop-infodesc .modal-content { padding: 35px 15px 25px; font-size: 14px; }
.pop-infodesc .modal_header { width: calc(100% + 30px); padding: 14px 25px; left: -15px; }
.pop-infodesc .modal_header .title { font-size: 20px; }
.pop-infodesc .btn-solid.okclose { width: calc(100% + 10px); margin: 20px -5px -15px; }
/*--*/
.pop-infodesc ol,
.pop-infodesc ul { margin-bottom: 0; padding-left: 14px; }
.pop-infodesc .modal-content > ol > li + li,
.pop-infodesc .modal-content > ul > li + li { margin-top: 12px; }
.pop-infodesc ol > li ul li { margin-top: 2px; }



/*=====================================================================*/
/* OTHERs */
/*=====================================================================*/



/*=====================================================================*/
/* PAGEs */
/*=====================================================================*/
/*=====================*/
/*====== MESSAGE ======*/
.message-wrap .btn-closemsg {
    display: inline-block; background: #ebebeb; width: 1.5em; height: 1.5em; border-radius: 50%; cursor: pointer; 
    font-size: 27px; color: var(--gigi-darkblue); line-height: 1.8;
}
.message-wrap .btn-closemsg .icon { font-size: 1em; }
/*--*/
.message-wrap .icon { font-size: 52px; color: var(--gigi-lblue); }
.message-wrap .textitle {
    font-variation-settings: "wdth" 150;
    font-size: 32px; font-weight: 1000; color: var(--gigi-blue); text-transform: uppercase;
}
.message-wrap .desc { width: 80%; margin: 0 auto; }
/*--*/
.message-wrap.alertmsg .tophead-wrap { background: #f76c5a; }
.message-wrap.alertmsg .icon { color: #f76c5a; }
/*==========================*/
/*====== NOTIFICATION ======*/
.notifinbox-wrap .innerback.tophead-wrap .titlehead .title span { font-variation-settings: "wdth" 25; font-size: 0.8em; vertical-align: top; }
/*--*/
.notif_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.notif_list li + li { margin-top: 5px; }
.notif_list li a.wrap { 
    display: flex; column-gap: 0.8em; 
    padding: 14px 15px; border: 1px solid #d1d8f2; border-radius: 8px; color: var(--gigi-darkblue); 
}
.notif_list li .img { align-self: flex-start; background: #eee; max-width: 40px; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; position: relative; order: 1; }
.notif_list li .img:before {
    content: '\e3f4'; font-family: 'Material Symbols Outlined'; font-size: 1em; line-height: 1; letter-spacing: 0;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.notif_list li img { max-width: 40px; border-radius: 5px; position: relative; z-index: 1; }
.notif_list .head { display: flex; justify-content: space-between; gap: 0.65em; width: 100%; }
.notif_list .head .title { font-variation-settings: "wdth" 150; font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: 0; }
.notif_list .head .date { width: 88px; font-size: 12px; color: #666; text-align: right; line-height: 1.1; }
.notif_list .desc { font-size: 14px; color: #666; }
/*--*/
.notif_list li.unread a { position: relative; background: #eaf6ff; }
.notif_list li.unread a:before {
    content: ''; font-size: 8px; display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: #f76c5a;
    position: absolute; top: 10px; left: 11px;
}
/*--*/
.notifdetail-wrap .date { 
    font-size: 12px; color: #666; line-height: 1.1; text-transform: uppercase;
    margin-top: -15px; padding: 0 18px;
}
.notifdetail-wrap .img { margin-top: 10px; margin-bottom: 16px; padding: 0; text-align: center; }
.notifdetail-wrap .detail { padding: 0 18px; }
.notifdetail-wrap .title { font-variation-settings: "wdth" 150; font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: 0; }
/*=====================================*/
/*====== GIFT CARD - Redeem code ======*/
.gcrdmcodeform .title { font-variation-settings: "wdth" 112.5; font-size: 17px; font-weight: 700; letter-spacing: 0; }
/*--*/
/*- history list -*/
.gchist_list .stitle { font-size: 14px; font-weight: 400; color: #666; }
.gchist_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.gchist_list ul + ul { margin-top: 5px; }
.gchist_list li + li { margin-top: 5px; }
.gchist_list li .wrap { 
    color: #666;
    display: block; padding: 12px 10px; background: #fff; border: 1px solid #d1d8f2; border-radius: 10px;
}
.gchist_list li .wrap .left { width: 48%; }
.gchist_list li .wrap .right { text-align: right; }
.gchist_list li .gcdesgin_feat {
    position: relative; height: 200px; border-radius: min(3.5vw, 15px); overflow: hidden; 
    background-repeat: no-repeat; background-size: 100%;
}
.gchist_list li .mamount { font-variation-settings: "wdth" 75; font-size: 26px; font-weight: 500; color: var(--gigi-blue); }
.gchist_list li .mamount sup { top: 3px; }
.gchist_list li .mamount .cent { letter-spacing: 0.05em; }
.gchist_list li .type { 
    margin-top: 5px;
    font-variation-settings: "wdth" 150; font-size: 13px; font-weight: 600; color: var(--gigi-darkblue); letter-spacing: 0;
}
.gchist_list li .code { font-size: 13px; margin-top: 5px; }
.gchist_list li .date { font-size: 13px; text-transform: uppercase; }
/*=================*/
/*====== ... ======*/



@media only screen and (min-width: 690px) and (max-width: 1200px) {
    .container-mobile { max-width: 1200px; }
    .row-cols-cust-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
    /*--*/
    .infocanvasbtm.bcanvrght { 
        top: 0; right: 0; left: inherit; max-width: 400px; width: 50%; transform: translateX(100%);
        border: none; border-radius: 0; 
        max-height: inherit; height: auto; overflow: hidden;
        /* for ios safe area use, <meta content="viewport-fit=cover">*/
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }
    .infocanvasbtm.bcanvrght.show { transform: none; }
    .infocanvasbtm.bcanvrght .offcanvas-body { isolation: isolate; }
    .infocanvasbtm.bcanvrght .fixedbtm-wrap {
        max-width: 400px; width: 50%; 
        left: inherit; right: 0;
    }
    .pdetail-wrap.d_narrow.infocanvasbtm.offcanvas { max-height: inherit; }
    /*--*/
    .split_row { display: flex; }
    .split_row .col-left,
    .split_row .col-right { flex: 0 0 auto; width: 50%; }
    .split_row .col-right { border-left: 3px solid transparent; }
    .split_row .col-right .osection:first-child { margin-top: 0 !important; }
    .split_row.orderconfirm .oconfirm_order { margin-top: 0; height: 100%; }
    /*--*/
    /*[chatGPT]*/
    /*[Gemini]*/
    .odetailsplitcon {
        display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: max-content 1fr;
        grid-template-areas:
            "one three"
            "two three";
    }
    .odetailsplitcon > :nth-child(1) { grid-area: one; }
    .odetailsplitcon > :nth-child(2) { grid-area: two; display: flex; flex-direction: column; }
    .odetailsplitcon > :nth-child(3) { grid-area: three; min-height: 96vh; margin-left: 3px; margin-top: -30px; padding-top: 60px; }
    /*--*/
    .dashsplitcon {
        display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: max-content 1fr;
        grid-template-areas: "one three" "two three";
    }
    .dashsplitcon > :nth-child(1) { grid-area: one; min-width: 0; padding-right: 18px; }
    .dashsplitcon > :nth-child(2) { grid-area: two; min-width: 0; padding-right: 18px; }
    .dashsplitcon > :nth-child(3) { grid-area: three; margin-top: -16px; padding-left: 18px; }
    .dashreorder.cards { margin-bottom: 16px; }
    .dashreorder.cards a.btn-reorder:not([aria-expanded="false"]) { border-color: #e3e3e3; border-radius: 12px 12px 0 0; background-image: linear-gradient(to bottom, #f3f3f3 0%, #ffffff 100%); }
    .dashreorder.cards .collapse { display: block; }
    .dashreorder.cards a[aria-expanded="false"] + .collapse { display: none; }
    .dashreorder.cards a[aria-expanded="true"] + .collapse { display: block; }
    /*--*/
    .offcanvas.rewardesc-wrap .offcanvas-body { display: flex; flex-direction: column; }
    .offcanvas.rewardesc-wrap .offcanvas-body > :nth-child(1) { height: 100%; }
    .offcanvas.redeemstatus-wrap .offcanvas-body { display: flex; flex-direction: column; }
    .offcanvas.redeemstatus-wrap .offcanvas-body > :nth-child(1) { height: 100%; align-content: center; }
    /*--*/
    .mbrdetail-wrap > div { max-width: 500px; margin-left: auto; margin-right: auto; }
    .mbrdetail-wrap .mbrcard { max-width: 220px; }
    .mbrdetail-wrap > .row { justify-content: space-around; }
    .dailycheck-wrap { max-width: 400px; }
    .mbrcta-wrap .btn-split-wrap > :nth-child(1) .btn-solid { padding-left: 30%; }
    .mbrcta-wrap .btn-split-wrap > :nth-child(2) .btn-solid { padding-right: 30%; }
    .mbrbenefit-wrap .titlehead,
    .mbrbenefit-wrap .mbrbenefit_tabbtn,
    .mbrbenefit-wrap .mbrbenefit_tabcontent,
    .btn-mbrfaq { max-width: 500px; margin-left: auto; margin-right: auto; }
    /*--*/
    /*.pickuplocation-wrap .col-left { width: 35%; }
    .pickuplocation-wrap .col-right { width: 65%; }
    .placesearch-wrap { width: auto; height: 100%; }
    .placesearch-wrap form .row { display: block; }
    .placesearch-wrap form .row > div { width: 100%; }*/
}
@media only screen and (max-width: 575px) {
    .modal-dialog { padding: 0 15px; }
    /*====== ... ======*/
    .pop-expcard .modal-dialog { max-width: 90%; }
    /*====== ... ======*/
    .pdetailimg.transimg { max-width: 330px; }
}
@media only screen and (max-width: 359px) {
    .walletdetails .btm .col-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    /*--*/
    .gchist_list li .wrap .left { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}
@media only screen and (max-width: 350px) {
    .amount_topup .row-cols-3 > .col { flex: 0 0 auto; width: 50%; }
}
@media only screen and (max-width: 250px) {
    .amount_topup .row-cols-3 > .col { flex: 0 0 auto; width: 100%; }
}