@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif+SC:wght@200..900&display=swap');

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

:root{ --gt-red:#ee212e; --gt-blue:#003462; }
body { 
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    background: #f3f3f3;
    font-family: 'Montserrat', 'Noto Serif SC', Songti SC, SimSun, sans-serif;
    font-size: 14px; font-weight: 500; color: #000; letter-spacing: 0; line-height: 1.4;
}
h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1.2; }
p { line-height: 1.4; }
p:last-child { margin-bottom: 0; }
a { text-decoration: none; color: var(--gt-red); }
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: 430px; 
    --bs-gutter-x: 1.875rem;
    padding-left: calc(.6 * var(--bs-gutter-x)); padding-right: calc(.6 * var(--bs-gutter-x));
}
.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; opacity: 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; }
[data-bs-trigger*=click] { cursor: pointer; }


/*=====================================================================*/
/* CONTENT */
/*=====================================================================*/
/*--*/
.content-wrap { padding: 30px 0; }
/*--*/
.nocontenttext { font-size: 14px; text-align: center; }
h6.nocontenttext { font-weight: 600; }
/*============================*/
/*====== 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); }

@keyframes loadFadeOut {
    100% { opacity: 0; visibility: hidden; }
}
/*====================================================================================*/
/*====== 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: "\f110"; 
    font-family: 'Font Awesome 6 Free'; font-size: 2.3em; font-weight: 700; color: #000; line-height: 1; letter-spacing: 0;
    position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -25px; z-index: 3;
    -webkit-animation: rotation 2s infinite linear; animation: rotation 2s infinite linear;
}
.loadcon.transpage { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1055; }

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
/*--*/
.loader { margin-top: 15px; margin-left: -12px; font-size: 11px; }
/*--*/
.loadindicate_msg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1055; }
.loadindicate_msg:before {
    content: ''; content: ''; width: 100%; height: 100%; background: #fff; opacity: 1;
    position: absolute; top: 0; left: 0;
}
.loadindicate_msg span { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 16px; font-weight: 600; text-align: center; line-height: 1.3; 
}
.loadindicate_msg span:before {
    content: ''; display: block; width: 18px; height: 18px; margin: 0 auto 10px;
    border: 1px solid rgba(142,142,142,0.3); border-left-color: var(--gigi-blue); border-radius: 50%; animation: wd-rotate 450ms infinite linear;
}
/*--*/
.iconimgloader { width: 100%; height: 100vh; position: absolute; z-index: 13; }
.iconimgloader:before {
    content: ''; width: 100%; height: 100%; background: #fff; opacity: 0.8;
    position: absolute; top: 0; left: 0;
}
.iconimgloader .wrap { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 
    font-size: 10px; text-align: center;
}
.iconimgloader img { width: 100px; animation: pulse 1.5s infinite linear;  }
.iconimgloader.hidden { animation: loadFadeOut 1s; animation-fill-mode: forwards; }

@keyframes loadFadeOut {
    100% { opacity: 0; visibility: hidden; }
}
@keyframes pulse {
    0% { transform:scaleX(1); }
    50% { transform:scale3d(1.1,1.1,1.1); }
    to { transform:scaleX(1); }
}
/*--*/
.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); }
}
/*====================*/
/*====== button ======*/
.btn-solid,
.btn-border {
    font-size: 14px; font-weight: 600; text-align: center;
    display: inline-flex; justify-content: center; align-items: center; flex-direction: column;
    position: relative; padding: 0.8em 1em; border-radius: 8px; cursor: pointer; transition: 0.3s ease-out;
}
.btn-solid .cn,
.btn-border .cn { /*margin-top: 2px;*/ }
.btn-solid span.cn,
.btn-border span.cn { display: inline-block; }
.btn-solid.disabled,
.btn-border.disabled { cursor: not-allowed; text-decoration: line-through; }
.btn-solid.disabled > *,
.btn-border.disabled > * { color: inherit !important; }
/*--*/
.btn-solid {
    color: #fff;
    background: var(--gt-blue); border: none;
}
.btn-solid:not(.disabled):hover,
.btn-solid:not(.disabled):focus { background: #102d46; color: #fff; }
.btn-solid.disabled { background: #d5d5d5 !important;  color: #fff;  }
/*--*/
.btn-solid.btn-fullbtm { width: 100%; border-radius: 0 !important; }
/*--*/
.btn-border { color: #000; background: none; border: 1px solid var(--gt-blue); }
.btn-border:not(.disabled):hover,
.btn-border:not(.disabled):focus { color: #000; background: #f3f3f3; border: 1px solid #8199b0; }
.btn-border.disabled { background: #efefef; border-color: inherit !important; color: #d5d5d5 !important; }
/*--*/
.btn-back {
    display: inline-flex; align-items: center; width: 1.5em; height: 1.5em; position: relative; z-index: 1; cursor: pointer;
    font-size: 16px; color: #000; line-height: 0; letter-spacing: 0;
}
/*--*/
.btn-effright { display: inline-block; }
.btn-effright > div { 
    text-align: left; line-height: 1.25; 
    position: relative; padding-right: 0.8em;
}
.btn-effright > div:after {
    content: '\f054'; font-family: 'Font Awesome 6 Free'; font-size: 0.65em; font-weight: 700; line-height: 1; letter-spacing: 0;
    position: absolute; right: 0; top: 55%; 
    transform: translate(0,-50%); transition: 0.3s ease-out;
}
.btn-effright:hover > div:after { transform: translate(5px,-50%); }
/*--*/
.btn-split-wrap [class*=btn-] { 
    width: 100%; height: 100%; 
    display: inline-flex; justify-content: center; align-items: center;
}
/*====================*/
/*====== status ======*/
.text.status { 
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    display: inline-block; padding: 2px 6px; border-radius: 100px;
}
.text.status.success { color: #17c800; background: rgba(0,200,146,0.2); }
.text.status.pending { color: #ff8521; background: rgba(247,161,90,0.2); }
.text.status.failed { color: #888; background: rgba(116,116,116,0.2); }
.text.status.preparing { color: #2184ff; background: rgba(90,130,247,0.2); }
.text.status.unpaid { color: #ff3721; background: rgb(247 90 90 / 20%); }
/*--*/
.badge.status { font-size: 12px; line-height: 1.2; }
.badge.status.success { background: #17c800; }
.badge.status.pending { background: #ff8521; }
.badge.status.available { background: #42cb91; }
.badge.status.failed,
.badge.status.bg-red { background: #ff3030; }
.badge.status.normal { background: #0a5b82; }
/*--*/
.badge.qtt { 
    font-size: 10px; font-weight: 600; color: #fff; text-align: center; line-height: 2.1;
    display: inline-block; background: var(--gt-red); padding: 0; width: 2.1em; height: 2.1em; border-radius: 50%; 
    position: absolute; top: -1em; right: -2px; z-index: 1;
}
/*--*/
.badge.indicate { position: absolute; top: -8px; right: 5px; padding: 0; z-index: 1; }
.badge.indicate .icon {
    font-size: 10px; color: #000; text-align: center; line-height: 1.7; letter-spacing: 0;
    width: 1.8em; height: 1.8em; border-radius: 50%; background: #ffcb00;
}
/*===================*/
/*====== 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;
    display: flex; align-items: center; padding: 1em 1.2em; margin: 20px auto; border: none;
}
.alert .icon-wrap { line-height: 0; flex: 0 auto; margin-right: 8px; }
.alert .icon { font-size: 1.25em; }

.alert.normal { color: #666; background-color: #f3f3f3; }
.alert.warning { color: #666; background-color: #fff3cd; }
/*--*/
.alert.notifsmall {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background-color: #008da5; display: none; z-index: 1055;
    font-weight: 600; color: #fff; text-align: center; 
    background-color: #ffeede; color: #000;
}
.alert.notifsmall > div { display: inline-block; vertical-align: middle; }
/*=======================*/
/*====== offcanvas ======*/
/*- custom disabled backdrop (index.php) -*/
.cusoffcanvas-backdrop { 
    position: fixed; top: 0px; left: 0px; z-index: 1040;
    width: 100vw; height: 100vh; background-color: #000; opacity: 0.5; 
}
/*--*/
.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 { font-size: 12px; }
.offcanvas .titlehead { font-size: 17px; font-weight: 600; line-height: 1.1; }
.offcanvas .titlehead .cn { font-size: 0.8em; display: inline-block; }
.offcanvas .descdetail { color: #666; }
.offcanvas .titlehead + .descdetail { margin-top: 2px; }
/*--*/
.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: calc(-20px + env(safe-area-inset-bottom));
}
.infocanvasbtm .offcanvas-body { padding: 40px 0px 30px; isolation: isolate; }
/*===================*/
/*====== modal ======*/
.modal .btn-close { 
    background-color: #ffc3c3; background-size: 0.75em; 
    width: 1.65em; height: 1.65em; top: -10px; 
}
.modal-content { border: none; border-radius: 10px; padding: 35px 20px 25px; }
.modal_header {
    padding: 18px 30px 15px 30px; margin-top: -35px; margin-bottom: 10px; position: relative; 
    text-align: center; word-break: break-word;
}
.modal_header .title { margin: 0; }
.modal_header .title .cn { font-size: 0.8em; display: inline-block; }
.modal_header .icon { font-size: 3.5em; margin-bottom: 13px; }
/*--*/
.successpop .modal_header .icon { color: #2d9893; }
.successpop .btn-solid { background: #2d9893; }
.successpop .btn-solid:not(.disabled):hover, 
.successpop .btn-solid:not(.disabled):focus { background: #2a6664; }
/*==================*/
/*====== 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: #000 !important;
}
.form-control::-webkit-input-placeholder { color: #888; opacity: 0.75; }
.form-control:-moz-placeholder { color: #888; opacity: 0.75; }
.form-control::-moz-placeholder { color: #888; opacity: 0.75; }
.form-control:-ms-input-placeholder { color: #888; opacity: 0.75; }
/*--*/
.form-group { position: relative; margin-bottom: 10px; }
.form-group label:not(.error) { margin-bottom: 0.3em; }
.form-control { 
    font-size: inherit; font-weight: inherit; line-height: 1.2; 
    height: 45px; border-radius: 8px; border: 1px solid #ccc; 
}
.form-control:focus { border-color: var(--gt-blue); box-shadow: none; }
select.form-control { cursor: pointer; }
textarea.autoresizing { overflow: hidden; resize: none; }
/*--*/
/*===========================*/
/*====== input STYLE 1 ======*/
.form-group.d1 { margin-bottom: 12px; }
.form-group.d1 label:not(.error) { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.form-group.d1 label small { font-weight: 500; color: #666; }
/*--*/
.form-group.d1 .form-control { font-size: 15px; font-weight: 600; padding-left: 40px; }
/*.form-group.d1 .form-control:not(:placeholder-shown) { border-color: var(--gt-blue); } */
.form-group.d1 .form-control[disabled] { 
    -webkit-text-fill-color: #888; /*for ios*/
    color: #888; 
    opacity: 1; cursor: not-allowed; 
}
/*--*/
.form_icon { position: relative; }
.form_icon > i {
    font-size: 18px; color: var(--gt-blue);
    position: absolute; left: 12px; top: 13px;
}
/*===========================*/
/*====== check / radio ======*/
.container_check,
.container_radio {
    display: block; position: relative; padding-left: 30px; margin-bottom: 5px; cursor: pointer;
    padding-top: 1px; padding-bottom: 0px;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.container_check small,
.container_radio small { font-size: 11px; color: #666; letter-spacing: 0.02em; }
.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; }
.container_check [disabled] ~ *,
.container_radio [disabled] ~ * { opacity: 0.3; cursor: auto; }
/*--*/
/*- check -*/
.container_check .checkmark {
    top: -1px; border: 1px solid transparent; background-color: #ddd;
    transition: color, background 0.3s ease-in-out;
}
.container_check .checkmark:after {
    content: '\f00c'; 
    font-family: 'Font Awesome 6 Free'; font-size: 12px; font-weight: 700; color: #fff;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;
}
.container_check:hover input:not([disabled]) ~ .checkmark { border: 1px solid var(--gt-blue); }
.container_check input:checked ~ .checkmark { background-color: var(--gt-blue); }
.container_check input:checked ~ .checkmark:after { display: block; }
/*--*/
/*- radio -*/
.container_radio .checkmark {
    top: 0; border: 1px solid #c2c2c2; border-radius: 50%; background-color: #fff;
    transition: all 0.3s ease-in-out;
}
.container_radio .checkmark:after {
    content: ''; width: 14px; height: 14px; display: block; 
    border-radius: 50%; background: var(--gt-blue);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0;
}
.container_radio:hover input:not([disabled]) ~ .checkmark { border: 1px solid #888; }
.container_radio input:checked ~ .checkmark:after { opacity: 1; }
/*=======================================*/
/*====== radio box (oconfirmation) ======*/
.radio-npu-wrap { position: relative; margin-top: 0; margin-bottom: 5px; }
.radio-npu-wrap input { position: absolute; left: -9999px; }
.radio-npu-wrap label {
    display: block; padding: 8px 13px;
    background: #f3f3f3; cursor: pointer;
    font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: 0.02em;
}
.radio-npu-wrap input:checked + label { color: #fff; background: var(--gt-blue); }
/*--*/
.radio-npu-wrap.moredesc label { padding: 0; }
.radio-npu-wrap.moredesc label span { display: block; }
.radio-npu-wrap.moredesc label span.value { padding: 8px 8px; }
.radio-npu-wrap.moredesc label span.extradesc {
    font-size: 10px; font-weight: 500; color: #fff; text-transform: uppercase;
    background: var(--gt-red); padding: 4px 8px;
}
/*===================================*/
/*====== error / required mark ======*/
.error_message { color: #ff3030 !important; }
/*--*/
label.error { 
    font-size: 10px; font-weight: 600; color: #ff3030; letter-spacing: 0.025em;
    display: block; margin: 5px 0; padding: 0px 3px 5px; 
}
label.error:empty { display: none !important; }
.form-control.error { border-color: #ff3030 !important; }
/*--*/
.result-msg > * { 
    padding: 0.75em 1em; margin-top: 6px; border-radius: 5px; 
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.result-msg > .successmsg { color: #31741d; background: rgba(58,196,17,0.15); }
.result-msg > .failedmsg { color: #ff3030; background: rgba(255,48,48,0.2); }
/*--*/
form .remark { font-size: 0.9em; font-weight: 500; color: #666; padding: 10px 15px; }
form .requiremark { font-weight: 700; color: #ff3030; }
/*=================*/
/*====== ... ======*/
.fixedbtm-wrap {
    width: 100%; padding: 14px 0px 14px; position: fixed; left: 0; bottom: 0; z-index: 2;
    background-color: #fff; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}
/*--*/
.minw-auto { min-width: auto; }
.minh-auto { min-height: auto; }
.fw-semibold { font-weight: 600; }
ol.text > li + li { margin-top: 0.6em; }
/*--*/
.overlaymask { position: relative; }
.overlaymask:before {
    content: ''; width: 100%; height: 100%; background: #fff; opacity: 0.85; 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;
    font-size: 10px; color: #000; background: #fff; border: 1px solid;
}
/*--*/
/* ** (https://codepen.io/skryptz/pen/KvRPPY) */
.lazypending { width: 100%; }
.lazypending:before {
    content: ''; aspect-ratio: 1; width: 100%; display: block;
    animation-name: shimmer;
    animation-duration: 8s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-timing-function: linear;
    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%);
}

@keyframes shimmer {
    0% { background-position: -1200px 0; }
    100% { background-position: 1200px 0; }
}
/*=================================*/
/*====== bottom quick button ======*/
.quickctabtn-wrap.fixedbtm-wrap { 
    padding: 0; left: 50%; transform: translate(-50%, 0); 
    border: 1px solid #e3e3e3; border-bottom: none; border-radius: 20px 20px 0 0; 
    text-align: center; 
}
.quickctabtn-wrap ul { 
    margin-bottom: 0; padding-left: 0px; list-style: none; line-height: 0;
    justify-content: center;
}
.quickctabtn-wrap li:first-child a { border-radius: 20px 0 0 0; }
.quickctabtn-wrap li:last-child a { border-radius: 0 20px 0 0; }
/*--*/
.quickctabtn { 
    align-content: center; position: relative; display: block; height: 100%; padding: 11px 3px; 
    color: #666; line-height: 1; 
}
.quickctabtn .icon { display: inline-block; font-size: 16px; color: #999; }
.quickctabtn .icon.home { width: 18px; filter: grayscale(1); }
.quickctabtn .desc { font-size: 9px; letter-spacing: 0.025em; margin-top: 4px; }
.quickctabtn .badge.qtt { right: 6%; }
/*--*/
.quickctabtn:hover { color: #666; }
.quickctabtn.active { background-color: #ebeff3; color: var(--gt-blue); }
.quickctabtn.active .icon { color: var(--gt-blue); }
.quickctabtn.active .icon.home { filter: grayscale(0); }
/*=================*/
/*====== ... ======*/


/*=====================================================================*/
/* HEADER */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.tophead-wrap { 
    background: #f3f3f3; min-height: 65px; padding: 20px 55px; position: relative; z-index: 2;
    display: flex; justify-content: center; align-items: center;
    text-align: center; 
}
.tophead-wrap .titlehead .title { 
    font-size: 16px; font-weight: 600; word-break: break-word;
    margin-bottom: 0; 
    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center;   
}
.tophead-wrap .titlehead .title .cn { font-size: 14px; font-weight: 500; display: inline-block; }
.tophead-wrap .titlehead .desc { font-size: 11px; color: #666; margin-top: 2px; }
.tophead-wrap .titlehead.sp2 { padding-right: 40px; position: relative; left: 20px; }
.tophead-wrap .titlehead .infoicon { position: absolute; top: 50%; right: 17px; transform: translate(0,-50%); color: #000; }
/*--*/
.tophead-wrap .btn-back { position: absolute; left: 20px; top: 50%; transform: translate(0,-50%); font-size: 13px; }
/*--*/
.tophead-wrap .iconright { 
    position: absolute; top: 50%; right: 20px; transform: translate(0,-50%);
    display: flex; align-items: center; column-gap: 5px;
}
.tophead-wrap .iconright a { 
    display: inline-block; position: relative; 
    color: #000; line-height: 0;
}
.tophead-wrap .iconright .icon { font-size: 16px; }
.tophead-wrap .iconright .text {
    position: absolute; bottom: -10px; left: 50%; transform: translate(-50%,0); 
    font-size: 8px; line-height: 1; white-space: nowrap;
}


/*=====================================================================*/
/* MEMBER REGISTRATION */
/*=====================================================================*/
/*=======================*/
/*====== mobile no ======*/
.iti--fullscreen-popup.iti--container { justify-content: center; }
.iti { width: 100%; }
.iti .iti__selected-dial-code { 
    margin-left: 0px; 
    font-size: 16px; font-weight: 600; line-height: 1; 
}
.iti input.iti__tel-input { font-size: 16px; font-weight: 600; }
/*--*/
.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 { padding: .375rem .75rem; background-color: #fff; height: 45px; border: 1px solid #ececec; outline: 0; }
/*--*/
/* ** for safari, if not will have overscroll */
/*ul.iti__country-list:not(.iti__hide) { display: grid; max-height: 130px; }*/
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 { padding: 7px 8px; }
.iti li.iti__country:not(:last-child) { border-bottom: 1px solid #ebebeb; }
.iti li .iti__country-name { width: 80%; }
.iti li .iti__dial-code { padding: 0 5px; }
/*=================*/
/*====== OTP ======*/
.otpverify-wrap .offcanvas-body { padding-top: 24px; min-height: 50vh; }
.otpverify-wrap .titlehead { margin-top: 18px; }
/*--*/
.regotp_form input.form-control { 
    font-size: 22px; font-weight: 600; text-align: center; 
    max-width: 1.8em; max-height: 1.8em; padding: 0;
    border-top: none; border-left: none; border-right: none; border-radius: 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; }
/*===============================*/
/*====== personal own info ======*/
.register-wrap { background: #fff; min-height: 100vh; }
.register-wrap .decobg { 
    height: 140px;
    background-repeat: no-repeat; background-size: cover; background-position: center;
}
/*--*/
.reg_panecon {
    background: #fff; margin-top: -24px; padding: 30px 20px 40px;
    border-radius: 15px 15px 0 0; box-shadow: 0px -14px 10px rgba(0,0,0,0.15);
}
/*--*/
/*- daterangepicker -*/
.daterangepicker { font-family: inherit; border-radius: 10px; overflow: hidden; }
.daterangepicker select.monthselect, 
.daterangepicker select.yearselect {
    font-size: 12px;
    border: 1px solid #ccc; 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: 12px; }
.daterangepicker .calendar-table td { height: 32px; line-height: 1; }
.daterangepicker td.active, 
.daterangepicker td.active:hover { background-color: var(--gt-blue); }
.daterangepicker td.disabled, 
.daterangepicker option.disabled { color: #cccccc; }


/*=====================================================================*/
/* PROFILE */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.myprofile-wrap .tophead-wrap { background: var(--gt-red); margin-top: -1px; }
.myprofile-wrap .tophead-wrap .btn-back { color: #fff; }
/*--*/
.top_userdetail { background: var(--gt-red); padding-bottom: 120px; color: #fff; }
.top_userdetail .greeting { font-size: 18px; font-weight: 700; margin-bottom: 0; }
.top_userdetail .btn-login { font-size: 12px; color: #fff; letter-spacing: 0.02em; }
/*=================*/
/*====== ... ======*/
.mbtiercard-wrap { 
    position: relative; background-color: var(--gt-blue); 
    margin-top: -100px; padding: 15px 20px; border-radius: 15px; overflow: hidden; 
    font-size: 12px; color: #fff;
}
.mbtiercard-wrap:before {
    content: ''; width: 200%; height: 200%; position: absolute; top: 50%; left: 50%; 
    transform: rotate(-45deg) translate(-50%, -50%); transform-origin: 0 0;
    background-image: url('../images/deco-rlogo.png');
}
.mbtiercard-wrap a { color: #fff; }
/*--*/
.tierstaricon { font-size: 0; }
.tierstaricon:before { 
    content: '\f005'; font-family: 'Font Awesome 6 Free'; font-size: 12px; font-weight: 700; text-align: center; line-height: 2; 
    display: inline-block; width: 2em; height: 2em; border-radius: 50%; margin-bottom: 5px; 
    background: #e3e3e3; color: #fff;
}
.tierstaricon.silver:before { background: #e3e3e3; color: var(--gt-blue); }
.tierstaricon.gold:before { background: gold; color: var(--gt-blue); }
.mbtiercard-wrap .tierlvl { 
    font-size: 18px; font-weight: 700; color: var(--gt-blue);
    background: #fff; margin: 3px 0px 5px -21px; padding: 5px 12px 5px 20px; border-radius: 0 5px 5px 0;
}
/*--*/
.mbtiercard-wrap .logo { max-width: 148px; width: 100%; }
/*--*/
.mbtiercard-wrap .pointcon { text-align: center; line-height: 1.2; }
.mbtiercard-wrap .pointcon .number { font-size: 24px; font-weight: 700; }
/*--*/
.mbtiercard-wrap .indicateprogress { text-align: center; }
.mbtiercard-wrap .indicateprogress p { line-height: 1.2; }
.mbtiercard-wrap .indicateprogress .point { font-size: 1.15em; font-weight: 700; color: #fff4cd; vertical-align: middle; padding: 0 5px; }
.mbtiercard-wrap .indicateprogress .progress { background: #ccc; height: 4px; overflow: visible; }
.mbtiercard-wrap .indicateprogress .progress-bar { background-color: var(--gt-red); }
.mbtiercard-wrap .indicateprogress .progress .gtpts {
    font-size: 25px;
    display: inline-block; width: 1em; height: 1em; background: #fff; border-radius: 50%;
    position: absolute; top: 50%; transform: translate(0, -50%);
    background-image: url(../images/logo-goodtaste.svg);
    background-repeat: no-repeat; background-position: center; background-size: 65%;
}
/*--*/
.mbtiercard-wrap .btn-solid { background: #fff; width: 100%; color: var(--gt-blue); line-height: 1.2; }
/*=================*/
/*====== ... ======*/
.cmbnavlink-wrap { margin-top: 30px; margin-bottom: 30px; padding: 0 10px; }
.cmbnavlink-wrap ul { margin: 0; padding: 0; line-height: 0; }
.cmbnavlink-wrap li { display: block; border-bottom: 1px solid #ccc; line-height: 1.2; }
.cmbnavlink-wrap li:last-child { border: none; }
.cmbnavlink-wrap li > a { 
    font-weight: 600; color: #000;
    padding: 1.1em 0; position: relative; display: flex; align-items: center;
}
.cmbnavlink-wrap li > a:not(.logout):before {
    content: '\f054'; font-family: 'Font Awesome 6 Free'; font-size: 0.8em; line-height: 1; 
    position: absolute; right: 0; top: 50%; transform: translate(0,-50%);
}
.cmbnavlink-wrap li > a .icon { 
    flex: 0 auto; max-width: 19px; margin-right: 15px; 
    font-size: 1.3em; color: var(--gt-blue); 
}
/*==================*/
/*====== edit ======*/
.editprofile-wrap { background: #fff; min-height: 100vh; }
/*--*/
.editprofile-wrap .icon.verify { left: inherit; right: 12px; color: #17c800; }
/*--*/
.btn-dlacc { 
    display: block; background: #e3e3e3; padding: 0.8em 1em; border-radius: 5px; 
    font-size: 12px; text-align: center;
}
.btn-dlacc:hover,
.btn-dlacc:focus { color: #666; }
.btn-dlacc .icon { font-size: 1.2em; margin-right: 4px; }
/*================*/
/*====== QR ======*/
.qricon .icon { 
    font-size: 20px; line-height: 1.8; text-align: center; color: var(--gt-red);
    display: inline-block; width: 1.8em; height: 1.8em; background: #fff; border-radius: 50%;
}
/*--*/
.memberqr-wrap .title { font-weight: 600; }
.memberqr-wrap .time { font-size: 12px; font-weight: 400; color: var(--gt-blue); letter-spacing: 0.05em; margin-top: 20px; }
/*--*/
.mbdetail { font-size: 10px; }
.mbdetail .left { text-transform: uppercase; }
.mbdetail .title { font-size: 1.1em; }


/*=====================================================================*/
/* LOCATION */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.loc_statusdot {
    font-size: 0; width: 7px; height: 7px; border-radius: 50%;
    position: absolute; top: 50%; right: 0; transform: translate(0,-50%);
}
[class*=loc_status].open { background: #3f9e5f; }
[class*=loc_status].close { background: #ccc; color: #000; }
[class*=loc_status].busy { background: #e88f15; }
.loc_status { 
    font-size: 10px; font-weight: 600; color: #fff; text-align: center; letter-spacing: 0.02em; 
    background: #e3e3e3; padding: 0.4em 0.65em; 
}
.loc_status.recvisit { background: var(--gt-blue); white-space: normal; font-size: 10px; text-align: left; line-height: 1.1; }
/*====================*/
/*====== search ======*/
.placesearch-wrap { background: #fff; padding: 20px; }
.placesearch-wrap .form_icon > i { font-size: 15px; top: 15px; }
.placesearch-wrap form .btn-close { background-size: 0.7em; top: 12px; right: 10px; cursor: pointer; z-index: 5; display: none; }
/*--*/
.placesearch-wrap .alert .btn-close { right: 10px; }
.placesearch-wrap .alert .btn-solid { font-size: 10px; padding: 4px 7px; border-radius: 5px; }
.placesearch-wrap .alert .icon-wrap { margin-right: 12px; }
.placesearch-wrap .alert .icon { font-size: 1.65em; }
/*==================*/
/*====== list ======*/
.loc_list > .title { font-size: 13px; font-weight: 400; }
.loc_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.loc_list li + li { 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: -5px; right: -5px; }
.loc_list .wrap { 
    display: flex; column-gap: 1.2em; 
    background: #fff; border-radius: 10px; padding: 15px 12px;
}
.loc_list li.shopclose .wrap { opacity: 0.5; }
/*--*/
.loc_list .wrap .img { max-width: 75px; border-radius: 15px; overflow: hidden; }
.loc_list .wrap .right { font-size: 11px; color: #666; letter-spacing: 0.02em; }
.loc_list .wrap .recvisit + .title { margin-top: 7px; }
.loc_list .wrap .title { 
    font-size: 15px; font-weight: 600; color: #000; letter-spacing: 0; 
    position: relative; display: inline-block; margin: 0; padding-right: 15px;
}
.loc_list .wrap .addr { margin-top: 2px; }
.loc_list .wrap .openhour { margin-top: 10px; }
/*=================*/
/*====== ... ======*/
.infoshop-wrap .title { 
    font-size: 18px; font-weight: 700; 
    position: relative; display: inline-block; padding-right: 15px;
}
.infoshop-wrap .favourite-check { top: 0; bottom: inherit; right: 0; }
/*--*/
.infoshop-wrap ul.detail { 
    font-size: 12px; font-weight: 400; letter-spacing: 0.025em; 
    padding-left: 0; margin-bottom: 0; list-style: none;
}
.infoshop-wrap ul.detail li { position: relative; padding-left: 30px; }
.infoshop-wrap ul.detail li + li { margin-top: 4px; }
.infoshop-wrap ul.detail .icon { position: absolute; top: 3px; left: 0; }
/*--*/
.infoshop-wrap .img { text-align: center; margin-bottom: 16px; border-radius: 10px; overflow: hidden; }
.infoshop-wrap .map { line-height: 0; }


/*=====================================================================*/
/* ORDER CONTENT */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.osection { 
    background-color: #fff; padding: 20px 18px;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.06); border-radius: 8px;
}
.osection:not(:first-child) { margin-top: 5px; }
.otitle { font-size: 13px; font-weight: 400; }
.odesc { font-size: 14px; font-weight: 600; margin-top: -5px; } 
.odesc > * { font-weight: 500; color: #666; line-height: 1.25; }
.odesc + .otitle { margin-top: 15px; }
/*--*/
.btn-edit-order { display: inline-block; font-size: 14px; color: var(--gt-blue); }
/*--*/
.btn-addmore,
.btn-emptycart { 
    display: inline-block; margin-top: 10px; 
    font-size: 11px; color: #000;
}
.btn-addmore .icon,
.btn-emptycart .icon { font-size: 1.15em; margin-right: 2px; vertical-align: middle; }
.btn-addmore span,
.btn-emptycart span { display: inline-block; vertical-align: top; }
/*--*/
.receipt_titlehead .title { 
    font-size: 18px; font-weight: 600; color: var(--gt-red);
    position: relative; padding-left: 28px;
}
.receipt_titlehead .title .icon { 
    font-size: 1.05em; color: #666; vertical-align: middle; 
    position: absolute; top: 0; left: 0; margin-right: 2px; 
}
.receipt_titlehead .date { 
    font-size: 14px; letter-spacing: 0.02em; color: #666; 
    margin-top: 6px; margin-left: 35px; 
}
/*--*/
.distance { 
    font-size: 10px; color: var(--gt-blue);
    position: relative; margin-top: 1px; padding-left: 15px;
}
.distance:before { 
    content: '\f3c5'; font-family: 'Font Awesome 6 Free'; font-size: 0.9em; font-weight: 700;
    position: absolute; top: 0; left: 0; 
}
/*--*/
.charlimit { font-size: 12px; color: #888; text-align: right; }
.choice_remark_default { display: flex; flex-wrap: wrap; column-gap: 5px; }
.choice_remark_default .radio-npu-wrap label { display: inline-block; }
/*--*/
.sku { 
    font-size: 9px; font-weight: 600; letter-spacing: 0.1em; line-height: 1;
    display: inline-block; background: #eee; padding: 0.3em 0.5em; overflow: hidden;
}
/*=================*/
/*====== ... ======*/
.mamount { font-weight: 700; line-height: 1; }
.mamount sup { 
    font-size: 0.6em; font-weight: 500; line-height: 1; vertical-align: top;
    top: 0px; margin-right: 0.2em;
}
.mamount .box { 
    color: #fff;
    display: inline-block; background: var(--gt-red); padding: 4px 8px; border-radius: 100px;
}
.mamount del { 
    display: block; margin-bottom: 2px; 
    font-size: 0.8em; font-weight: 500; color: #888; 
}
/*--*/
.total_price .title { font-size: 10px; color: #666; }
.total_price .mamount { font-size: 20px; font-weight: 700; }
.total_price .mamount sup { font-size: 0.5em; top: 2px; }
.total_price .mamount del { font-size: 11px; margin-bottom: 4px; }
/*=================*/
/*====== ... ======*/
.alert.set_notif { background-color: #f3f3f3; border-radius: 8px; column-gap: 10px; }
.alert.set_notif .icon-wrap { margin-right: 3px; }
.alert.set_notif .icon {
    display: inline-block; width: 1.5em; height: 1.5em; background: rgba(0,0,0,0.2); border-radius: 50%; 
    font-size: 1.5em; color: inherit; text-align: center; line-height: 1.5;
}
.alert.set_notif small { color: #555; }
.alert.set_notif .btn-solid { max-width: 55px; font-size: 11px; line-height: 1.2; }
/*--*/
.alert.set_notif.warning { background: #fff3cd; }
.alert.set_notif.warning .icon { background: #ffcb00; }
.alert.set_notif.success { color: #31741d; }
.alert.set_notif.success .icon { background: #31741d; }
.alert.set_notif.fail { color: #ff3030; }
.alert.set_notif.fail .icon { background: #ff3030; }
/*--*/
.alert.set_notif.ctajoinmb { background: #faebd7; margin: 0; }
.alert.set_notif.ctajoinmb .btn-solid { max-width: 80px; }
/*=================*/
/*====== ... ======*/
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; }
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; }
/*============================*/
/*====== 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: '\f004'; font-family: 'Font Awesome 6 Free'; font-weight: 400; font-size: 15px; color: #ff6787; line-height: 1; cursor: pointer; }
.favourite-check input:checked ~ .icon:after { font-weight: 700; }
.favourite-check input[disabled] ~ .icon:after { cursor: not-allowed; }
/*=================*/
/*====== ... ======*/
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 #e3e3e3; border-radius: 8px; padding: 12px 12px; position: relative; background: #f3f3f3;
}
ul.cart_list .wrap > .left { max-width: 75px; }
ul.cart_list .wrap .img { 
    background: #e3e3e3; max-width: 75px; aspect-ratio: 1; overflow: hidden; 
    border: 1px solid #e3e3e3; border-radius: 8px; 
}
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%; line-height: 1.25; }
ul.cart_list .wrap .sku { background: #fff; margin-bottom: 5px; align-self: self-start; }
ul.cart_list .wrap .title-en { font-size: 12px; margin-bottom: 1px; padding-right: 30px; }
ul.cart_list .wrap .title-cn { font-size: 17px; font-weight: 800; margin-bottom: 0; }
ul.cart_list .wrap ul.option {
    margin-top: 3px; margin-bottom: 15px; padding-left: 0; list-style: none;
    font-size: 10px; color: #666; letter-spacing: 0.02em;
}
ul.cart_list .wrap ul.option > li { display: flex; justify-content: space-between; column-gap: 10px; }
ul.cart_list .wrap ul.option > li + li { margin-top: 1px; }
/*--*/
ul.cart_list .wrap .qtt_price { 
    font-weight: 600; 
    align-items: end; justify-content: space-between; margin-top: auto; 
}
ul.cart_list .wrap .qtt_price .price { color: var(--gt-blue); }
/*--*/
ul.cart_list .btn-edit-order { position: absolute; top: 12px; right: 12px; }
ul.cart_list .btn-dlt-order { position: absolute; top: -6px; left: -6px; }
ul.cart_list .btn-dlt-order .icon {
    display: inline-block; width: 1.85em; height: 1.85em; border-radius: 50%; background: #7293ac;
    font-size: 12px; color: #fff; text-align: center; line-height: 1.85;
}
/*=================*/
/*====== ... ======*/
table.cart_total { width: 100%; font-size: 12px; }
table.cart_total small { font-size: 11px; font-weight: 500; color: #666; letter-spacing: 0.02em; line-height: 1.25; display: block; }
table.cart_total tr { border-bottom: 1px solid #ddd; }
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.discount { color: var(--gt-blue); }
table.cart_total tr.pts_earned { color: var(--gt-red); }
table.cart_total tr.pts_earned .icon { font-size: 20px; margin-right: 10px; }
table.cart_total tr.tax { color: #666; }
table.cart_total tr.total td { font-size: 17px; font-weight: 700; line-height: 1.25; }
table.cart_total tr.total .mamount { color: var(--gt-red); }
table.cart_total .icon { font-size: 1.25em; vertical-align: text-top; }


/*=====================================================================*/
/* MENU LIST */
/*=====================================================================*/
/*====================*/
/*====== search ======*/
.sb-search-wrap { 
    width: calc(100% - 6px); height: 45px; 
    position: absolute; top: 50%; right: 5px; margin-top: -23px;
}
.sb-search { 
    position: relative; min-width: 45px; width: 0%; height: 100%; float: right; 
    overflow: hidden; z-index: 1; transition: width 0.3s; backface-visibility: hidden; 
}
.sb-search-input {
    font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: #333;
    width: 0; height: 100%; margin-right: 45px; padding: 0; background: #fff; 
    border: none; outline: none; z-index: 1; transition: 0.3s;
    position: absolute; top: 0; right: 0;
}
.sb-icon-search, 
.sb-search-submit {
    width: 45px; height: 100%; display: block; padding: 0; cursor: pointer; 
    position: absolute; right: 0; top: 0; 
    line-height: 3.3; text-align: center;
}
.sb-icon-search { z-index: 1; }
.sb-icon-search:before { content: '\f002'; font-family: 'Font Awesome 6 Free'; font-weight: 700; }
.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(45px + 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% - 60px); padding: 5px 10px; }
.sb-search.sb-search-open .sb-search-submit { z-index: 3; }
/*=================*/
/*====== ... ======*/
.loctimeinfo { 
    display: flex; align-items: center; column-gap: 10px;
    background: #fff; margin-bottom: 3px; padding-top: 20px; padding-bottom: 15px; color: #000;
}
.loctimeinfo .logo { max-width: 28px; width: 100%; }
.loctimeinfo .name { font-size: 16px; margin-bottom: 1px; }
.loctimeinfo .name .icon { font-size: 10px; margin-left: 4px; transition: 0.3s ease-out; }
.loctimeinfo .desc { font-size: 12px; color: #666; letter-spacing: 0.025em; }
/*--*/
.orderetimep { background: #fff; margin-bottom: 3px; padding-top: 12px; padding-bottom: 12px; }
.orderetimep .title { 
    font-size: 13px; font-weight: 600;
    position: relative; padding-left: 21px; 
}
.orderetimep .title:before {
    content: '\f017'; font-family: 'Font Awesome 6 Free'; font-weight: 400;line-height: 1; letter-spacing: 0;
    position: absolute; top: 50%; left: 0; transform: translate(0, -50%);
}
/*--*/
.tablenoinfo { background: #fff; margin-bottom: 3px; padding-top: 12px; padding-bottom: 12px; }
.tablenoinfo .title { 
    font-size: 13px; font-weight: 600;
    position: relative; padding-left: 21px; 
}
.tablenoinfo .title:before {
    content: '\f6c0'; font-family: 'Font Awesome 6 Free'; font-weight: 700;line-height: 1; letter-spacing: 0;
    position: absolute; top: 50%; left: 0; transform: translate(0, -50%);
}
/*--*/
a.loctimeinfo:hover { color: #000; }
a.loctimeinfo:hover .name .icon { transform: translateX(5px); }
/*=========================*/
/*====== Listing ALL ======*/
.plist_left { max-width: 75px; width: 20%; background: #fff; padding: 0; }
.plist_left .stick { position: relative; top: 0; }
.plist_left .stick.position-fixed { max-width: 75px; width: 20%; }
.plist_left ul { margin-bottom: 0; padding-left: 0; list-style: none; }
#nav_ordermenu-swiper { max-height: calc(100vh - 5em); overflow: hidden; padding: 24px 0px 24px; }
/*--*/
.plist_right { padding: 0; }
/*==========================*/
/*====== Listing Left ======*/
ul.catnavlist li { position: relative; z-index: 1; }
ul.catnavlist > li + li { margin-top: 24px; }
ul.catnavlist li .badge.qtt { 
    font-size: 9px; width: 1.8em; height: 1.8em; line-height: 1.8;
    right: 0; top: -12px; 
}
ul.catnavlist li a { 
    display: block; padding: 0px 6px 0px 10px;
    border-left: 1px solid transparent; border-right: 1px solid transparent;
    font-size: 9px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.075em; line-height: 1.25; word-break: break-word;
}
ul.catnavlist li a .cn { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0; }
/*--*/
ul.catnavlist li.active a { color: #000; border-color: var(--gt-red); }
/*===========================*/
/*====== Listing Right ======*/
.menu_section { padding: 25px 18px; }
.menu_section .titlehead { margin-bottom: 18px; }
.menu_section .titlehead .title { 
    font-size: 13px; font-weight: 400; letter-spacing: 0.025em; 
    position: relative; margin-bottom: 0; padding-left: 22px; padding-top: 2px;
}
.menu_section .titlehead .title .cn { 
    display: block; margin-top: 5px; 
    font-size: 15px; font-weight: 800; 
}
.menu_section .titlehead .title:before {
    content: ''; width: 13px; height: calc(100% - 4px); background: var(--gt-blue); 
    position: absolute; top: 3px; 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: #fff; overflow: hidden;
    display: flex; flex-direction: column; height: 100%;
    color: #000; outline: 0;
}
/*--*/
ul.menulist .plistdesc { 
    position: relative; padding: 19px 12px 17px; word-break: break-word; 
    display: flex; flex-flow: column; flex: 1;
}
ul.menulist .plistdesc .left { max-width: 80px; width: 61%; }
ul.menulist .plistdesc .right { 
    position: absolute; right: 10px; top: 18px; 
    writing-mode: vertical-rl; text-orientation: upright; height: 105px;
    text-spacing-trim: space-first; line-height: 1.3;
}
ul.menulist .plistdesc .title-en { 
    font-size: 11px; line-height: 1.26; word-break: normal;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; 
}
ul.menulist .plistdesc .title-cn { font-size: 13px; font-weight: 800; text-shadow: 1px 1px 1px #fff, -1px -1px 2px #fff; }
/*--*/
ul.menulist ul.plistattr { display: inline-block; text-align: center; line-height: 1; }
ul.menulist ul.plistattr li { display: inline-block; line-height: 0; }
ul.menulist ul.plistattr li + li { margin-left: 2px; }
ul.menulist ul.plistattr .icon { font-size: 12px; color: var(--gt-blue); }
/*--*/
ul.menulist .plistprice { 
    position: relative; padding: 10px 12px; text-align: center; 
    display: flex; flex-flow: column; justify-content: center;
}
ul.menulist .plistprice .mamount { font-size: 12px; }
/*--*/
ul.menulist .pqccaddtc_bubble {
    position: absolute; top: 50%; right: 5px; transform: translate(0,-50%);
    display: inline-block; background: #fff; width: 1.85em; height: 1.85em; border-radius: 50%;
    font-size: 12px; font-weight: 700; color: var(--gt-red); text-align: center; line-height: 2; letter-spacing: 0.01em;
}
ul.menulist .plistaddtc .plistprice { background: var(--gt-red); }
ul.menulist .plistaddtc .plistprice del { color: #efefef; }
/*===========================*/
/*====== btm fixed con ======*/
a.btn-checkout-wrap { display: block; color: var(--gt-blue); }
a.btn-checkout-wrap .wrap { 
    display: flex; justify-content: center; align-items: center; 
    position: relative; min-height: 35px;
    line-height: 1; 
}
a.btn-checkout-wrap .text { 
    font-size: 14px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.075em; line-height: 1.2;
    margin-left: 20px;
}
a.btn-checkout-wrap .mamount { margin-top: 2px; }
/*--*/
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: 14px; font-weight: 700; color: #fff; text-align: center; line-height: 2; letter-spacing: 0.01em;
    background: var(--gt-red); width: 2em; height: 2em; border-radius: 50%;
    position: relative; top: -2px; margin-right: -10px; display: inline-block; vertical-align: middle;
}
.qtt_basket .icon { font-size: 26px; display: inline-block; vertical-align: middle; }
/*====================*/
/*====== detail ======*/
.pdetailimg { text-align: center; }
/*--*/
.pdetaildesc { padding-top: 35px; padding-bottom: 25px; }
.pdetaildesc .title-en { font-size: 14px; line-height: 1.25; }
.pdetaildesc .title-cn { font-size: 20px; font-weight: 800; line-height: 1.25; margin-top: 2px; }
.pdetaildesc .desc { font-size: 12px; font-weight: 400; letter-spacing: 0.025em; }
.pdetaildesc ul.plistattr { margin-top: 8px; }
.pdetaildesc ul.plistattr li { display: inline-block; }
.pdetaildesc ul.plistattr .icon { font-size: 14px; color: #333; }
.pdetaildesc .total_price del { text-align: center; }
/*=================*/
/*====== ... ======*/
.pdetail_choice-wrap .section { padding-bottom: 40px; }
.pdetail_choice-wrap .section .title { 
    font-size: 12px; font-weight: 500; 
    margin-bottom: 1.2em; display: flex; align-items: center; column-gap: 8px;
}
.pdetail_choice-wrap .section .title:before, 
.pdetail_choice-wrap .section .title:after { content: ''; display: inline-block; border-top: 1px solid #e3e3e3; }
.pdetail_choice-wrap .section .title:before { width: 15px; flex: 0 0 auto; }
.pdetail_choice-wrap .section .title:after { flex: 1 0 0%; }
.pdetail_choice-wrap .section .desc { 
    margin-top: -14px; padding-left: 23px;
    font-size: 11px; color: #888; letter-spacing: 0.02em;
}
.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));
}
.pdetail_choice-wrap ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.pdetail_choice-wrap ul li + li { margin-top: 10px; }
/*--*/
.pdetail_choice-wrap .remarknote { position: relative; }
.pdetail_choice-wrap .remarknote .title:before,
.pdetail_choice-wrap .remarknote .title:after { content: none; }
.pdetail_choice-wrap .remarknote .title { position: absolute; top: 12px; left: 12px; }
.pdetail_choice-wrap .remarknote .charlimit { position: absolute; top: 12px; right: 12px; }
.pdetail_choice-wrap .remarknote textarea { background: #ebebeb; padding-top: 35px; border: none; border-radius: 0; font-size: 13px; }
/*========================*/
/*====== option box ======*/
.option_boxr {
    flex: 30%;
    padding-right: calc(var(--bs-gutter-x)* .5); padding-left: calc(var(--bs-gutter-x)* .5);
    position: relative; display: inline-block; margin-bottom: 5px; 
    min-width: 80px; overflow: hidden;
}
.option_boxr input { position: absolute; left: -9999px; }
.option_boxr label { 
    display: flex; flex-direction: column; justify-content: center; height: 100%;
    background: #ebebeb; padding: 12px 8px; min-height: 60px; cursor: pointer; 
    font-size: 14px; text-align: center;
}
.option_boxr .price { font-size: 10px; color: #666; }
/*--*/
.option_boxr input:checked + label { background: var(--gt-blue); color: #fff; }
.option_boxr input:checked + label .price { color: #e3e3e3; }
.option_boxr [disabled] + label { opacity: 0.3; cursor: auto; overflow: hidden; position: relative; }
.option_boxr [disabled] + label:before {
    content: ''; width: 100%; border-top: 1px dashed; opacity: 0.5;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-17deg);
}
/*=========================*/
/*====== option list ======*/
.pdetail_choice-wrap li { position: relative; }
.pdetail_choice-wrap label.out { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; }
.pdetail_choice-wrap .numbers-row { 
    font-size: 12px;
    display: flex; max-width: 67px; margin-top: 5px; position: relative; z-index: 2; 
}
.pdetail_choice-wrap .numbers-row input[readonly] { position: static; padding: 1px 1.3rem; }
.pdetail_choice-wrap .numbers-row .button_inc { font-size: 0.5em; border-radius: 8px; }
.pdetail_choice-wrap .numbers-row .inc { background: #298c96; border-color: #298c96; }
/*--*/
.option_listr,
.option_listc { 
    display: flex; align-items: center; column-gap: 8px; margin-bottom: 0; 
    font-size: 13px; 
}
.option_listr span.right,
.option_listc span.right { margin-left: auto; order: 6; width: 25%; min-width: 70px; font-size: 11px; text-align: right; }
.option_listr span.right .icon,
.option_listc span.right .icon { font-size: 15px; }
.option_listr span.left,
.option_listc span.left { 
    display: inline-flex; align-items: center; flex-wrap: wrap; flex: 1 0 0%;
}
.option_listr span.left img,
.option_listc span.left img { 
    width: 50px; height: 50px; object-fit: contain; 
    margin-bottom: -3px; margin-top: -3px; margin-right: 15px; padding: 2px;
    border: 1px solid #e1e1e1; border-radius: 10px;
}
.option_listr span.left span,
.option_listc span.left span { display: inline-block; flex: 1 0 0%; }
.option_listr .checkmark,
.option_listc .checkmark { top: 50%; transform: translate(0,-50%); }
/*=================*/
/*====== ... ======*/
.pdetail_totaladdcart-wrap .mamount { color: var(--gt-red); }
/*--*/
.numbers-row { 
    position: relative; max-width: 100px;
    font-size: 18px; font-weight: 600;
}
.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: 1px 1.75rem; height: auto; border: none; pointer-events: none;
    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: 0.55em;
    display: inline-flex; align-items: center; justify-content: center; 
    width: 2.85em; height: 2.85em; border-radius: 50%; border: 1px solid #ccc;
    position: absolute; top: 50%; transform: translate(0,-50%); cursor: pointer; z-index: 2; 
}
.numbers-row .button_inc:before { font-family: 'Font Awesome 6 Free'; font-size: 1.2em; font-weight: 700; line-height: 1; letter-spacing: 0; }
.numbers-row .dec { left: 0px; }
.numbers-row .inc { right: 0px; background: var(--gt-red); border-color: var(--gt-red); color: #fff; }
.numbers-row .dec:before { content: '\f068'; }
.numbers-row .inc:before { content: '\2b'; }
/*--*/
.pdetail_totaladdcart-wrap .btn-solid { width: 100%; background: var(--gt-red); }
.pdetail_totaladdcart-wrap .btn-solid .cn { font-size: 13px; display: inline-block; }
.pdetail_totaladdcart-wrap .btn-solid:hover { background: #c8111d; }


/*=====================================================================*/
/* ORDER CONFIRMATION */
/*=====================================================================*/
/*========================*/
/*====== loc & time ======*/
.oconfirm_loc_time ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.oconfirm_loc_time li { position: relative; padding-left: 30px; }
.oconfirm_loc_time li + li { margin-top: 14px; }
.oconfirm_loc_time li:before {
    font-family: 'Font Awesome 6 Free'; font-size: 14px; font-weight: 700; color: var(--gt-blue); line-height: 1; 
    position: absolute; top: 0; left: 0;
}
.oconfirm_loc_time .title { font-size: 14px; font-weight: 600; color: #000; margin-bottom: 1px; }
/*--*/
.orderloc-wrap { font-size: 12px; color: #666; }
.orderloc-wrap:before { content: url('../images/logo-goodtaste.svg'); width: 20px; }
/*--*/
.ordertime-wrap:before { content: '\f017'; }
/*--*/
.ordertable-wrap:before { content: '\f6c0'; }
/*==================*/
/*====== cart ======*/
.oconfirm_order { margin-top: 5px; }
/*====================*/
/*====== Upsell ======*/
.osection.upsell { background: #f3f3f3; padding: 20px 0; box-shadow: none; }
/*--*/
.upsellslider .owl-stage { display: flex; }
.upsellslider .item { height: 100%; width: 130px; }
.upsellslider .plistproduct { 
    background: #fff; 
    display: flex; flex-direction: column; height: 100%;
}
.upsellslider .plistproduct .plistimg { border: 1px solid #e3e3e3; }
.upsellslider .plistproduct .plistdesc { 
    font-size: 11px; color: #000; line-height: 1.25; 
    padding: 10px 12px; 
    flex: 1 1 auto; display: flex; flex-direction: column;
}
.upsellslider .plistproduct .title-cn { font-size: 1.25em; font-weight: 700; }
.upsellslider .plistproduct .price { text-align: right; margin-top: auto; }
.upsellslider .plistproduct .price .mamount { margin-top: 15px; }
/*--*/
.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;
    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-]:hover { background: #fff; color: #000; }
.upsellslider .owl-nav .disabled { cursor: default; opacity: 0; visibility: hidden; }
/*=====================*/
/*====== request ======*/
.pack_select { border: 1px solid #e3e3e3; border-radius: 8px; position: relative; }
.pack_select ~ div { margin-top: 5px; }
.pack_select label { 
    margin-bottom: 0; padding: 12px 45px 12px 44px; z-index: 1; 
    font-size: 12px;
}
.pack_select .container_check .checkmark { top: 12px; left: inherit; right: 15px; }
.pack_select .icon { 
    font-size: 16px; text-align: center;
    width: 1.2em; position: absolute; top: 50%; left: 15px; transform: translate(0, -50%); 
}
/*--*/
.oconfirm_remark textarea { padding: 12px 15px; font-size: 12px; line-height: inherit; }
/*=====================*/
/*====== contact ======*/
/*.oconfirm_contact .iti .iti__selected-dial-code { margin-top: 3px; }*/
/*============================*/
/*====== payment option ======*/
.payment_select { border: 1px solid #e3e3e3; border-radius: 8px; position: relative; }
.payment_select ~ div { margin-top: 5px; }
.payment_select label { margin-bottom: 0; padding: 12px 45px 12px 40px; font-weight: 600; line-height: 1.2; }
.payment_select .container_radio .checkmark { top: 50%; left: inherit; right: 15px; transform: translate(0,-50%); }
.payment_select .icon { position: absolute; top: 16px; left: 15px; }
.payment_select .icon_logo img { width: auto; max-height: 25px; padding: 1px 3px; border: 1px solid #e3e3e3; border-radius: 6px; }
/*--*/
.payment_select.disabled { background-color: #f8f8f8; border-color: #f3f3f3; }
.payment_select.disabled .icon,
.payment_select.disabled label { opacity: 0.85; color: #999; }
/*--*/
.payment_select.gtwallet .btn-solid { 
    position: absolute; top: 50%; right: 15px; z-index: 2; transform: translate(0,-50%);
    padding: 0.6em 0.8em; border-radius: 3px; font-size: 11px; line-height: 1;
    display: none;
}
.payment_select.disabled.gtwallet label { padding-right: 80px; }
.payment_select.disabled.gtwallet .btn-solid { display: inline-block; }
/*--*/
.payment_select .ctacon {
    font-size: 10px; font-weight: 500; 
    background: #fff3cd; margin-top: 6px; padding: 1em 1em 0.8em; border-radius: 5px;
}
.payment_select .ctacon .badge { font-size: 10px; word-break: break-word; white-space: normal; }
/*--*/
.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;
    background: #f8f8f8; margin-top: 6px; padding: 0.6em 1em 0.6em 0.5em; border-radius: 5px;
    font-size: 12px; font-weight: 500; line-height: 1.1; letter-spacing: 0.025em;
}
/*--*/
.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: 16px; }

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; color: #000; 
}
ul.banklist .icon_logo img { width: auto; max-height: 30px; padding: 2px 2px; border: 1px solid #d2d9f2; border-radius: 6px; }
/*=================*/
/*====== btm ======*/
.oconfirm_paybtn .remark { line-height: 1.25; }
.oconfirm_paybtn .btn-submit { min-height: 50px; }
/*--*/
.oconfirm_paybtn .alert.ctajoinmb { border-radius: 8px 8px 0 0; }
/*=========================*/
/*====== VOUCHER ADD ======*/
.oconfirm_voucher { border-top: 1px solid #e3e3e3; margin-top: 36px; padding-top: 16px; }
.oconfirm_voucher .btn-addvoucher { 
    font-size: 12px; font-weight: 600; color: var(--gt-blue); line-height: 1.25;
    position: relative; display: block; padding-right: 1.1em;
}
.oconfirm_voucher .btn-addvoucher .icon { color: var(--gt-red); margin-right: 5px; }
.oconfirm_voucher .btn-addvoucher:after { 
    content: '\f054'; font-family: 'Font Awesome 6 Free'; font-size: 1em; line-height: 1;
    position: absolute; right: 2px; top: 50%; transform: translate(0, -50%);
}
/*--*/
.voucher_result {
    font-size: 11px; letter-spacing: 0.02em; color: #666;
    position: relative; margin-top: 10px; padding: 7px 10px; padding-right: 30px; background: #f3f3f3;
}
.voucher_result .btn-close { font-size: 9px; top: 9px; right: 10px; }
/*===========================*/
/*====== COMFIRM STORE ======*/
.alertpop-confirmstore .modal-dialog { max-width: 315px; margin-left: auto; margin-right: auto; }
.alertpop-confirmstore .modal-content { background: #f3f3f3; }
.alertpop-confirmstore .img { max-width: 100px; width: 100%; align-self: center; margin-top: -80px; border-radius: 8px; overflow: hidden; }
.alertpop-confirmstore .desc { font-size: 12px; letter-spacing: 0.02em; text-align: center; line-height: 1.25; }
.alertpop-confirmstore .loc { 
    font-size: 11px; color: #666; letter-spacing: 0.02em; text-align: center; 
    background: #fff; padding: 15px; border-radius: 8px;
}
.alertpop-confirmstore .loc .title { font-size: 14px; font-weight: 600; color: #000; margin-bottom: 2px; }


/*=====================================================================*/
/* PROCESSING */
/*=====================================================================*/
.oprocessing-wrap .total_price .icon { font-size: 22px; color: var(--gt-red); margin-right: 5px; }
.oprocessing-wrap .total_price .mamount { 
    font-size: 24px; color: var(--gt-red); vertical-align: top;
    display: inline-block; 
}
.oprocessing-wrap .total_price .mamount sup { font-weight: 600; }
/*--*/
.oprocessing-wrap ul.cart_list > li + li { margin-top: 10px; }
.oprocessing-wrap ul.cart_list .wrap { display: block; }
.oprocessing-wrap ul.cart_list .wrap ul.option { margin-top: 2px; margin-bottom: 0; }
/*--*/
.processcancel-wrap.fixedbtm-wrap { font-size: 12px; }
.processcancel-wrap .progress { background: #ccc; height: 4px; }
.processcancel-wrap .progress-bar { background-color: var(--gt-red); }
.processcancel-wrap a.btn-solid { background: var(--gt-red); min-width: 144px; font-size: 12px; }
.processcancel-wrap a.btn-solid.cancel { background: #e3e3e3; color: #333; }
.processcancel-wrap a.btn-solid.cancel:hover { color: var(--gt-blue); }


/*=====================================================================*/
/* ORDER RECEIPT */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.odetail-wrap hr { color: #999; }
/*--*/
.odetail-wrap .btn-border,
.odetail-wrap .btn-solid { min-height: 45px; }
.odetail-wrap .btn-border:hover { color: #000; background: rgba(163,178,230,0.3); border-color: transparent; }
/*--*/
.odetail-wrap .receipt_titlehead .title { font-size: 22px; }
/*--*/
.odetail-wrap ul.cart_list .wrap .title-en { 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: 38px 10px 0; overflow: hidden; }
ul.orderprocess li:before {
    content: ''; width: calc(100% + 1px); border-top: 1px dashed #ccc;
    position: absolute; top: 15px; 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 .desc { font-size: 10px; color: #666; line-height: 1.1; letter-spacing: 0.02em; }
ul.orderprocess .desc .icon { 
    font-size: 15px; color: #fff; line-height: 2; 
    display: block; width: 2em; background: #ccc; height: 2em; border-radius: 50%;
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
}
ul.orderprocess .desc img.icon { max-width: 60px; width: 100%; filter: grayscale(1); }
/*--*/
ul.orderprocess li.done:before { border-top: 1px solid var(--gt-blue); z-index: 1; }
ul.orderprocess li.done .desc { font-weight: 600; color: var(--gt-blue); }
ul.orderprocess li.done .desc .icon { background: var(--gt-blue); }
ul.orderprocess li.done .desc img.icon { filter: grayscale(0); }
/*=================*/
/*====== ... ======*/


/*=====================================================================*/
/* REWARDS */
/*=====================================================================*/
/*=======================*/
/*====== my coupon ======*/
.mycoupon { 
    align-items: center; align-content: center; 
    background: #fff; position: relative; margin: 0; padding: 8px 8px; padding-right: 40px;
    border-radius: 10px; min-height: 88px;
}
.mycoupon .img { width: 115px; padding: 5px 8px; text-align: center; }
.mycoupon .img img { max-width: 100px; max-height: 55px; }
.mycoupon .detail { min-width: 53%; padding: 5px 8px; }
.mycoupon .title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.mycoupon .desc { font-size: 11px; font-weight: 400; letter-spacing: 0.02em; margin-top: 1px; }
.mycoupon .descdate { font-size: 11px; color: #666; letter-spacing: 0.02em; margin-top: 10px; }
.mycoupon .voucher_tnc {
    display: inline-block;
    font-size: 11px; font-weight: 600; color: var(--gt-red); letter-spacing: 0.05em;
}
.mycoupon.past { color: #666; filter: grayscale(1); }
.mycoupon.past .status {
    position: absolute; top: 2px; right: 2px;
    width: auto; background: #dedede; margin: 0;
    font-size: 10px; font-weight: 500; color: #666; letter-spacing: 0.02em;
}
/*===========================*/
/*====== my point earn ======*/
.mypointearn-wrap { background: #ebebeb; margin-bottom: 16px; padding: 15px; border-radius: 10px; position: relative; overflow: hidden; }
.mypointearn-wrap:before {
    content: ''; width: 200%; height: 300%; position: absolute; top: 50%; left: 50%; 
    transform: rotate(-45deg) translate(-50%, -50%); transform-origin: 0 0;
    background-image: url('../images/deco-rlogo.png'); background-size: 130px;
    filter: brightness(0.3);
}
.mypointearn-wrap .tier { font-weight: 700; color: var(--gt-blue); }
.mypointearn-wrap .desc { font-size: 10px; color: #666; }
.mypointearn-wrap .totalpoint { font-size: 28px; font-weight: 600; line-height: 1; white-space: nowrap; }
.mypointearn-wrap .totalpoint sup { 
    font-size: 10px; font-weight: 500; letter-spacing: 0.01em; 
    vertical-align: top; top: 8px; 
}
/*===========================*/
/*====== POINT HISTORY ======*/
.pointhist_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.pointhist_list li { background: #fff; margin: 0; padding: 10px 15px 8px; border-radius: 10px; }
.pointhist_list li + li { margin-top: 5px; }
.pointhist_list li .type { font-size: 15px; font-weight: 600; line-height: 1.2; }
.pointhist_list li .date { font-size: 11px; color: #666; letter-spacing: 0.02em; text-transform: uppercase; margin-top: 8px; }
.pointhist_list li .pts { font-size: 15px; font-weight: 600; color: var(--gt-blue); }
/*--*/
.pointhist_list li.deduct .pts { color: #999; }
/*================================*/
/*====== VOUCHER ADD (page) ======*/
.voucheradd-wrap { background: #fff; padding: 20px; font-size: 12px; }
.voucheradd-wrap .form-control { font-size: 15px; font-weight: 600; padding-right: 25px; }
.voucheradd-wrap .btn-close { background-size: 0.7em; top: 15px; right: calc(69px + 5px); cursor: pointer; z-index: 3; display: none; }
.voucheradd-wrap [type=submit].btn { 
    background: var(--gt-blue); border-radius: 8px;
    font-size: 14px; font-weight: 700; color: #fff; 
}
/*--*/
.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: inherit; right: 15px; transform: translate(0, -50%); z-index: 1; }
.voucher_list .container_radio [disabled] ~ * { opacity: 0.5; border: 1px solid #e3e3e3; }
.voucher_list .container_radio input:checked ~ .checkmark:before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free'; font-size: 9px; font-weight: 700; color: #fff;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
}
/*=========================*/
/*====== REWARD LIST ======*/
.rewardlist_row { margin: 0 -5px; }
.rewardlist_col { padding: 0 5px; margin-bottom: 10px; }
.rewardlist_col .con { background: #fbfbfb; border-radius: 10px; height: 100%; overflow: hidden; }
.rewardlist_col a.detail { display: flex; flex-direction: column; height: 100%;}
/*--*/
.rewardlist_col .img { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1.6; }
/*--*/
.rewardlist_col .desc { /*margin-top: auto;*/ padding: 15px 15px; }
.rewardlist_col .desc .title { font-size: 14px; font-weight: 700; color: #333; line-height: 1.25; }
.rewardlist_col .desc .point { font-size: 12px; color: #666; margin-top: 3px; }
.rewardlist_col .desc .point del { display: block; font-size: 0.8em; color: #999; }
/*===========================*/
/*====== REWARD DETAIL ======*/
.rewardetail .img { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; }
.rewardetail .maindetail { margin-top: 24px; line-height: 1.25; }
.rewardetail .maindetail .title { font-size: 18px; font-weight: 600; }
.rewardetail .maindetail .point { font-size: 12px; color: #666; }
.rewardetail .maindetail .desc { /*margin-top: 3px;*/ }
/*--*/
.rewardetail .detail { margin-top: 25px; margin-bottom: 35px; }
.rewardetail .detail > div + div { margin-top: 13px; padding-top: 13px; border-top: 1px solid #e3e3e3; }
.rewardetail .detail .title,
.rewardetail .detail .card-header { font-size: 14px; font-weight: 600; }
.rewardetail .detail .desc,
.rewardetail .detail .card-body { font-size: 12px; color: #666; margin-top: 3px; }
/*--*/
.rewardetail .detail .card-header {
    position: relative; display: block; padding: 0; padding-right: 2em; background: none; border: none;
    color: #000; 
}
.rewardetail .detail .card-header:after { 
    content: '\f078'; font-family: 'Font Awesome 6 Free'; 
    font-size: 0.8em; font-weight: 700; line-height: 1;
    position: absolute; right: 0; top: 50%; transform: translate(0,-50%);    
}
.rewardetail .detail .card-header[aria-expanded=true]:after { content: '\f077'; }
/*--*/
.rewardetail .detail .card-body { padding: 2px 0px 5px; }
.rewardetail .detail ul,
.rewardetail .detail ol { margin-bottom: 0; margin-top: 8px; padding-left: 16px; }
.rewardetail .detail li + li { margin-top: 10px; }
/*=================================*/
/*====== REDEEM confirmation ======*/
.redeemconfirm-wrap .img { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 0.5; }
.redeemconfirm-wrap .titlehead { font-size: 14px; margin-top: 20px; }
.redeemconfirm-wrap .title { font-size: 18px; font-weight: 600; }
.redeemconfirm-wrap .point { font-size: 12px; color: #666; margin-top: 8px; }
/*--*/
/*- status -*/
.redeemstatus-wrap .img { 
    display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 0.5; margin-bottom: 15px; 
    font-size: 24px; color: var(--gt-red); 
}
.redeemstatus-wrap .titlehead { font-size: 18px; font-weight: 600; }
.redeemstatus-wrap .desc { font-size: 12px; color: #666; margin-top: 3px; }
/*========================*/
/*====== MY VOUCHER ======*/
.myvoucher-wrap .voucheradd-wrap { border-bottom: 1px solid #e3e3e3; }
.myvoucher-wrap .voucheradd-wrap label.error { margin-bottom: 0; padding-bottom: 0; }
.myvoucher-wrap .voucheradd-wrap .alert { margin-bottom: 0; }
/*--*/
ul.tabbtn-wrap { margin-bottom: 0; padding-left: 0; list-style: none; }
ul.tabbtn-wrap a {
    display: flex; justify-content: center; align-items: center; height: 100%; 
    background: #fbfbfb; padding: 1.1em 1em; border: 1px solid #fff; cursor: pointer;
    font-size: 13px; color: var(--gt-blue); text-transform: uppercase;
}
ul.tabbtn-wrap a.active { font-weight: 700; background: #fff; }
/*--*/
ul.myvoucherlist { margin-bottom: 0; padding-left: 0; list-style: none; }
ul.myvoucherlist li + li { margin-top: 5px; }
ul.myvoucherlist a { display: block; color: #000; }
/*=========================*/
/*====== MEMBER TIER ======*/
.mbtierbenefit-wrap .mbtiercard-wrap { margin-top: 0; border-radius: 15px 15px 0 0; }
.mbtierbenefit-wrap .mypointearn-wrap { border-radius: 0 0 15px 15px; }
.mbtierbenefit-wrap .mypointearn-wrap .left { font-size: 11px; }
.mbtierbenefit-wrap .mypointearn-wrap .totalpoint { font-size: 25px; color: var(--gt-blue); }
.mbtierbenefit-wrap ul.tabbtn-wrap { flex-wrap: nowrap; align-items: self-end; }
.mbtierbenefit-wrap ul.tabbtn-wrap a { padding: 1.1em 0.5em; font-size: 12px; }
.mbtierbenefit-wrap ul.tabbtn-wrap a.active { padding-top: 1.5em; border-radius: 10px 10px 0 0; }
/*--*/
ul.benefitlistnav { padding: 0 13px; margin-top: 20px; margin-bottom: 20px; list-style: none; }
ul.benefitlistnav li { background: #f9f9f9; padding: 15px 15px; }
ul.benefitlistnav li + li { margin-top: 5px; }
ul.benefitlistnav .detail .title { font-size: 15px; font-weight: 600; line-height: 1.2; }
ul.benefitlistnav .detail .desc { font-size: 11px; color: #666; letter-spacing: 0.02em; margin-top: 8px; }
/*--*/
.benefitdetail-wrap { background: #fff; padding: 15px; padding-top: 25px; border-radius: 0 0 15px 15px; }
.benefitdetail-wrap .lock { opacity: 0.5; }
.benefitdetail-wrap .titlehead { font-size: 12px; color: #666; text-align: center; margin-bottom: 1.8em; }
.benefitdetail-wrap .titlehead .title { font-size: 16px; font-weight: 600; color: #000; margin-bottom: 1px; }
ul.benefitlist { margin-bottom: 0; padding-left: 0; list-style: none; }
ul.benefitlist li {  }
ul.benefitlist li + li { margin-top: 5px; }
ul.benefitlist .img { width: 115px; padding: 5px 8px; text-align: center; }
ul.benefitlist .img img { max-width: 100px; max-height: 55px; }
ul.benefitlist .detail { min-width: 53%; padding: 5px 8px; }
ul.benefitlist .detail .title { font-size: 14px; font-weight: 600; line-height: 1.2; }
ul.benefitlist .detail .desc { font-size: 11px; color: #666; letter-spacing: 0.02em; margin-top: 8px; }


/*=====================================================================*/
/* MY ORDER */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.orderhist_list .cards + .cards { margin-top: 5px; }
.orderhist_list .cards { position: relative; }
/*--*/
.orderhist_list .btn-border { 
    font-size: 11px; line-height: 1.25; 
    min-width: 100px; z-index: 2;
}
/*--*/
.orderhist_list .btn-cardctrl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
/*--*/
.olistitemimg { display: flex; flex-wrap: wrap; gap: 3px; }
.olistitemimg .img { width: 45px; position: relative; }
.olistitemimg .img img { border: 1px solid #e3e3e3; }
/*=================*/
/*====== ... ======*/
.orderhist_list .card-header {
    position: relative; padding: 16px; background: #fff; border-radius: 10px; 
    transition: border-radius 0.1s 0.3s;
}
.orderhist_list .card-header:after { 
    content: '\f078'; font-family: 'Font Awesome 6 Free'; 
    font-size: 1em; font-weight: 700; color: var(--gt-blue); line-height: 1;
    position: absolute; right: 16px; bottom: 16px;
}
.orderhist_list .card-header .title { font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.orderhist_list .card-header .desc { 
    margin-top: 3px; margin-bottom: 0; padding-left: 0px; list-style: none; 
    font-size: 11px; color: #666; letter-spacing: 0.02em; line-height: 1.2;
}
.orderhist_list .card-header ul.desc li + li { margin-top: 2px; }
.orderhist_list .card-header .olistitemimg { margin-top: 10px; }
/*--*/
.orderhist_list .card-body { padding: 16px; border-radius: 0px 0px 10px 10px; }
.orderhist_list ul.cart_list .wrap { display: block; }
.orderhist_list ul.cart_list .wrap ul.option { margin-top: 2px; margin-bottom: 0; }
/*--*/
.orderhist_list [aria-expanded=true] + .card-header,
.orderhist_list [aria-expanded=true] ~ .card-body-wrap .card-body { background: #fff; }
.orderhist_list [aria-expanded=true] + .card-header { border-radius: 10px 10px 0 0; transition: border-radius 0s 0s; }
.orderhist_list [aria-expanded=true] + .card-header:after { content: '\f077' }


/*=====================================================================*/
/* COMBO MENU */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
[class*=cart_list] .wrap .combimg_sall { display: flex; flex-wrap: wrap; width: auto !important; max-width: none !important; aspect-ratio: inherit !important; }
[class*=cart_list] .wrap .combimg_sall img { width: auto !important; aspect-ratio: 1; border-right: 1px solid rgba(0,0,0,0.08); }
[class*=cart_list] .wrap .combimg_sall img:last-child { border-right: none; }
/*=================*/
/*====== ... ======*/
.cart_list > .combo .wrap > .left { align-content: flex-start; }
.cart_list > .combo .wrap .row-cols-2 > * { width: 47%; }
/*--*/
.cart_list > .combo .wrap ul.option > li + li { border-top: 1px solid #e3e3e3; margin-top: 8px; padding-top: 8px; }
.cart_list > .combo .wrap ul.option b { font-size: 12px; font-weight: 600; }
.cart_list > .combo .wrap ul.option ul { padding-left: 0; margin-top: 3px; list-style: none; }
.cart_list > .combo .wrap ul.option .right { white-space: nowrap; }
/*=================*/
/*====== ... ======*/
.orderhist_list ul.cart_list > .combo .wrap ul.option > li + li { border-top: none; margin-top: 5px; padding-top: 0; }
.orderhist_list ul.cart_list > .combo .wrap ul.option > li { justify-content: flex-start; }
.orderhist_list ul.cart_list > .combo .wrap ul.option .right { order: -1; }
/*--*/
.oprocessing-wrap ul.cart_list > .combo .wrap ul.option > li + li { border-top: none; margin-top: 5px; padding-top: 0; }
.oprocessing-wrap ul.cart_list > .combo .wrap ul.option > li { justify-content: flex-start; }
.oprocessing-wrap ul.cart_list > .combo .wrap ul.option .right { order: -1; }
/*=================*/
/*====== ... ======*/
.menulist-wrap.combo { background: #fff; }
.menulist-wrap.combo .choicecombo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }


/*=====================================================================*/
/* WALLET */
/*=====================================================================*/
/*====================================*/
/*====== common share (profile) ======*/
.wbalance-wrap { background: #f8f8f8; padding: 15px 20px; }
.wbalance-wrap .otitle { margin-bottom: 0; }
.wbalance-wrap .otitle .icon { font-size: 14px; color: #999; margin-right: 5px; }
.wbalance-wrap .conwrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.wbalance-wrap .mamount { font-size: 38px; font-size: clamp(1rem, 12.5vw, 2.375rem); color: #000; }
.wbalance-wrap .mamount sup { font-size: max(12px, 0.243em); top: 0.5em; }
/*--*/
.wbalance-wrap .btn-topup { color: #fff; }
.wbalance-wrap .btn-topup .icon { 
    font-size: 13px; 
    display: inline-flex; justify-content: center; align-items: center;
    width: 1.6em; height: 1.6em; background: var(--gt-red); border-radius: 50%;
}
/*=====================*/
/*====== history ======*/
.whist_list ul + .otitle { margin-top: 30px; }
.whist_list ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.whist_list ul + ul { margin-top: 5px; }
.whist_list li + li { margin-top: 5px; }
.whist_list li a { 
    color: #000; 
    display: block; background: #fff; padding: 12px 15px 10px; border-radius: 10px;
}
.whist_list li a > .row { justify-content: space-between; }
.whist_list li .desc,
.whist_list li .date { font-size: 11px; color: #666; letter-spacing: 0.02em; margin-top: 8px; }
.whist_list li .date { text-transform: uppercase; }
.whist_list li .type { font-size: 15px; font-weight: 600; line-height: 1.2; }
.whist_list li .mamount { font-size: 18px; }
.whist_list li .mamount sup { font-size: 0.5em; }
/*--*/
.whist_list li.debit .type,
.whist_list li.debit .mamount { color: var(--gt-blue); }
/*============================*/
/*====== history detail ======*/
.whist_detail .status { margin-bottom: 10px; }
.whist_detail .top .title { font-size: 18px; margin: 0; }
.whist_detail .top .title .icon { 
    color: #aaa; vertical-align: middle; 
    position: relative; top: -2px; margin-right: 6px; 
}
.whist_detail .top .date { 
    font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: #666; 
    margin-top: 4px; 
}
.whist_detail .mamount { font-size: 23px; color: var(--gt-red); margin-left: auto; }
.whist_detail .mamount sup { font-size: 0.4em; top: 3px; }
/*--*/
.whist_detail .detail { background: #f8f8f8; margin-top: 15px; padding: 15px; border-radius: 15px; }
.whist_detail .detail ul { margin-bottom: 0; padding-left: 0; list-style: none; }
.whist_detail .detail ul li { display: flex; justify-content: space-between; }
.whist_detail .detail ul li + li { margin-top: 12px; }
.whist_detail .detail .title { color: #666; width: 42%; }
.whist_detail .detail .desc { font-weight: 600; text-align: right; letter-spacing: 0.02em; word-break: break-word; }
.whist_detail .point-earn .desc { color: var(--gt-red); }
/*===================*/
/*====== topup ======*/
.amount_topup .radio-npu-wrap label { font-size: 18px; text-align: center; }
/*--*/
.wtopup-wrap .oconfirm_paybtn .alert.set_notif { margin: 0; background: #ddd; }
/*==========================*/
/*====== topup result ======*/
.wtopupresult-wrap .whist_detail .status-wrap .icon { font-size: 2em; }
.wtopupresult-wrap .whist_detail .status { font-size: 1em; margin-top: 5px; margin-bottom: 25px; }


/*=====================================================================*/
/* DASHBOARD */
/*=====================================================================*/
/*====================*/
/*====== slider ======*/
/*
 * Add default space
 * To prevent a sudden increase in page height after the Owl Carousel finished loading
*/
.herobanner-slider { overflow: hidden; }
.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.425; }
.herobanner-slider:not(.owl-loaded) .item { display: none; }
/*--*/
.herobanner-slider .owl-item .img { position: relative; overflow: hidden; }
.herobanner-slider .owl-item .img:before {
    content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    background-image: var(--backgroundslider); background-repeat: no-repeat; background-size: cover; background-position: center;
    filter: blur(12px);
}
.herobanner-slider .owl-item .img:after {
    content: ''; width: 100%; height: 100%; background: #000; opacity: 0.3;
    position: absolute; top: 0; left: 0;
}
.herobanner-slider .owl-item img { max-width: 50vh; margin: 0 auto; position: relative; z-index: 1; }
/*--*/
.herobanner-slider .owl-dots { position: absolute; bottom: 30px; right: 20px; }
.herobanner-slider .owl-dots .owl-dot span { 
    position: relative; display: block; width: 7px; height: 7px; 
    background: rgba(255,255,255,1); margin: 0 3px; 
    border: 1px solid #000; border-radius: 50%; transition: .3s ease;
}
.herobanner-slider .owl-dots .owl-dot.active span, 
.herobanner-slider .owl-dots .owl-dot:hover span { background: #000; }
/*=================*/
/*====== ... ======*/
.dash_panecon { background: #fff; margin-top: -17px; padding: 22px 20px 25px; border-radius: 15px; box-shadow: 4px 4px 0 rgba(0,0,0,0.08); position: relative; z-index: 1; }
.dash_panecon .top a { color: #000; }
.dash_panecon .top a span { font-size: 12px; color: var(--gt-red); }
.dash_panecon .top .greeting { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.dash_panecon .top .btn-login { font-size: 12px; letter-spacing: 0.02em; }
.dash_panecon .top .right { max-width: 144px; width: 100%; position: relative; }
.dash_panecon .top .loc_status {
    position: absolute; top: -22px; right: 0;
    display: inline-block; padding: 0.3em 1.5em; border-radius: 0 0 20px 20px;
}
.dash_panecon .top .loc_name {
    font-size: 10px; font-weight: 600; color: var(--gt-blue); text-align: center; letter-spacing: 0.02em;
    width: 100%; display: inline-block; background: #e3e3e3; margin-top: 6px; padding: 0.5em 0.8em; border-radius: 5px;
}
/*--*/
.dash_panecon .btm { margin-top: 30px; }
.dash_panecon .btm .btn-startorder {
    font-size: 16px; font-weight: 700;
    background: var(--gt-blue); width: 100%; min-height: 75px; padding: 0.5em 1em; border-radius: 12px; outline: 1px solid rgba(255,255,255,0.3); outline-offset: -5px;
}
.dash_panecon .btm .btn-startorder .cn { font-size: 12px; }
.dash_panecon .btm .btn-startorder .icon { font-size: 23px; margin-bottom: 8px; margin-top: 3px; max-width: 24px; }
.dash_panecon .btm .btn-startorder.btn-pickup { background: #284e76; }
.dash_panecon .btm .btn-startorder.btn-disabled { color: #999; text-decoration: none; outline: none; opacity: 0.6; background: #d5d5d5 !important; }
.dash_panecon .btm .btn-historder {
    font-size: 8px; color: #000; letter-spacing: 0.025em;
    background: #ebebeb; min-height: 75px; padding: 0.65em 1.4em; border-radius: 8px;
}
.dash_panecon .btm .btn-historder .icon { font-size: 2.3em; margin-bottom: 0.5em; }
.dash_panecon .btm .btn-historder .cn { font-size: 12px; }
.dash_panecon .btm .btn-historder .badge.qtt { top: -10px; right: -7px; }
/*============================*/
/*====== pop sign in up ======*/
.pop-signinup .modal-content { padding-top: 45px; }
/*--*/
.signinup-wrap .titlehead { font-size: 12px; color: #666; margin-bottom: 1.3em; }
.signinup-wrap .titlehead .title { font-size: 18px; color: #000; margin-bottom: 1px; }
.signinup-wrap .titlehead .title-cn { font-size: 14px; color: #000; margin-bottom: 4px; }
/*--*/
.signinup-wrap [class*=btn] { width: 100%; font-size: 16px; }
.signinup-wrap [class*=btn] .cn { font-size: 14px; }
.signinup-wrap [class*=btn] .desc { font-size: 12px; font-weight: 500; margin-top: 8px; }
.btn-login .desc { color: #ccc; }
.btn-loginguest .desc { color: #666; }
/*--*/
.ctasignup { font-size: 12px; font-weight: 600; }
.ctasignup .desc { font-size: 11px; font-weight: 500; color: #666; letter-spacing: 0.02em; }
/*=============================================*/
/*====== cta member benefit slider (pop) ======*/
.membergood-wrap .titlehead { font-size: 12px; color: #666; margin-bottom: 1.3em; }
.membergood-wrap .titlehead .title { font-size: 18px; font-weight: 600; color: #000; margin-bottom: 1px; }
/*--*/
.membergoodslider:not(.owl-loaded) { position: relative; display: block; background: url('../js/owlcarousel/ajax-loader.gif') no-repeat center; }
.membergoodslider:not(.owl-loaded):before { content: ''; display: inline-block; width: 100%; aspect-ratio: 10 / 3.65; }
.membergoodslider:not(.owl-loaded) .item { display: none !important; }
/*--*/
.membergoodslider .item .img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 0.9; }
.membergoodslider .item .title { font-size: 10px; margin-top: 8px; padding: 0 8px; }



/*=====================================================================*/
/* PAGES */
/*=====================================================================*/
/*=================*/
/*====== 404 ======*/
.errorpage-wrap .title { font-size: 28px; font-size: min(7.3vw, 28px); color: var(--gt-red); }
/*===================*/
/*====== about ======*/
.aboutus-wrap { background: #fff; min-height: 100vh; }
/*=================*/
/*====== FAQ ======*/
.faq_collapse .titlehead { color: var(--gt-red); }
.faq_collapse + .faq_collapse { margin-top: 40px; }
.faq_collapse .cards + .cards { margin-top: 12px; padding-top: 12px; border-top:1px solid #ccc; }
.faq_collapse .card-header { 
    font-size: 13px; font-weight: 600; color: #000; line-height: 1.25;
    position: relative; display: block; padding: 0; padding-right: 2em; background: none; border: none;
}
.faq_collapse .card-header:after { 
    content: '\f078'; font-family: 'Font Awesome 6 Free'; 
    font-size: 0.8em; font-weight: 700; line-height: 1;
    position: absolute; right: 0; top: 50%; transform: translate(0,-50%);
}
.faq_collapse .card-header[aria-expanded=true]:after { content: '\f077' }
/*--*/
.faq_collapse .card-body { 
    font-size: 12px; font-weight: 400; letter-spacing: 0.02em;
    margin-top: 3px; padding: 2px 0px 5px;
}
.faq_collapse .card-body ul,
.faq_collapse .card-body ol { margin-bottom: 0; margin-top: 3px; padding-left: 14px; }
.faq_collapse .card-body li + li { margin-top: 6px; }
.faq_collapse .card-body b { font-weight: 600; }
/*=================*/
/*====== t&c ======*/
/* ** (https://stackoverflow.com/a/26245056) */
.tnc-wrap { font-size: 12px; }
.tnc-wrap ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; }
.tnc-wrap ol > li { display: table; counter-increment: item; margin-bottom: 0.6em; }
.tnc-wrap ol > li:before { content: counters(item, ".") ". "; display: table-cell; padding-right: 0.6em; }
.tnc-wrap li ol > li:before { content: counters(item, ".") " "; }
/*=====================*/
/*====== dine in ======*/
.dineintableno-wrap { background: #fff; min-height: 100vh; }
/*--*/
.dineintableno_form .info { display: flex; column-gap: 10px; margin-bottom: 18px; }
.dineintableno_form .info .logo { max-width: 28px; width: 100%; }
.dineintableno_form .info .name { font-size: 16px; margin-bottom: 1px; }
.dineintableno_form .info .desc { font-size: 12px; color: #666; letter-spacing: 0.025em; }




@media only screen and (max-width: 575px) {
    .modal-dialog { padding: 0 15px; }
    /*====== ... ======*/
}
@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: 275px) {
    .whist_list li a .col-auto { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; text-align: left !important; }
}
@media only screen and (max-width: 250px) {
    .amount_topup .row-cols-3 > .col { flex: 0 0 auto; width: 100%; }
}