/* Dark mode */
body {
    --bs-main: #ee6119;
    --bs-main-50: #fef6ee;
    --bs-main-100: #fdead7;
    --bs-main-200: #fad2ae;
    --bs-main-300: #f7b17a;
    --bs-main-400: #f28745;
    --bs-main-500: #ee6119;
    --bs-main-600: #e04d16;
    --bs-main-700: #ba3814;
    --bs-main-800: #942e18;
    --bs-main-900: #772817;
    --bs-main-950: #40120a;
    /* Surfaces */
    --bs-body-bg: #0f1216;
    --bs-surface-bg: #151a20; /* cards, panels */
    --bs-surface-bg-o: #ffffff3d; /* cards, panels */
    --bs-surface-2-bg: #1b222b; /* modals, popovers */
    --bs-muted-bg: #0b0e12;
    /* Text */
    --bs-body-color: #e6e9ee;
    --bs-heading-color: #f2f4f7;
    --bs-text: #dedede;
    --bs-text-muted: #898989;
    --bs-placeholder-color: #7e8a96;
    --color-item-menu: rgb(239 217 180);
    /* Borders / dividers */
    --bs-border-color: #2a313a;
    --bs-border-strong: #3a4450;
    --bs-divider-color: rgba(255,255,255,0.08);
    /* Forms */
    --bs-input-bg: #12181f;
    --bs-input-color: #e6e9ee;
    --bs-input-border-color: #2f3944;
    --bs-input-placeholder-color: var(--bs-placeholder-color);
    --bs-input-focus-border-color: var(--bs-main-400); /* #f28745 */
    --bs-input-focus-ring-color: rgba(238, 97, 25, 0.35); /* from --bs-main */
    /* Links */
    --bs-link-color: var(--bs-main-400); /* #f28745 */
    --bs-link-hover-color: var(--bs-main-300); /* #f7b17a */
    /* Shadows (subtle on dark) */
    --bs-shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
    --bs-shadow-sm: 0 2px 6px rgba(0,0,0,0.30);
    --bs-shadow-md: 0 6px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.02);
    --bs-shadow-lg: 0 12px 28px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.03);
}

input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

label.checkbox {
    margin: 0;
    display: block;
    cursor: pointer;
    overflow: hidden;
    text-indent: -9999px;
    width: var(--px-48);
    height: var(--px-24);
    background: #D1D1D1;
    position: relative;
    border-radius: var(--px-60);
}

    label.checkbox:after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: var(--px-2);
        width: var(--px-20);
        height: var(--px-20);
        background: #fff;
        border-radius: var(--px-24);
        transition: 0.5s;
    }

input:checked + label.checkbox {
    background: var(--main-color);
    border: 1px solid var(--theme-mode-border);
}

    input:checked + label.checkbox:after {
        left: calc(100% - var(--px-2));
        transform: translate(-100%, -50%);
    }

label.checkbox:active:after {
    width: 130px;
}

.toggle-option {
    display: flex;
    gap: var(--px-10);
    align-items: center;
    height: var(--px-36);
}

button:not(.pswp__button) {
    z-index: 0;
    outline: unset;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

button {
    border: 0;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    height: var(--px-40);
    color: var(--bs-white);
    justify-content: center;
    min-width: var(--px-120);
    padding: 0 var(--px-16);
    background: #ee6119;
    border-radius: 6px;
    font: normal normal 700 var(--s-14);
}

    button::before {
        content: '';
        display: block;
        opacity: 1;
        position: absolute;
        transition-duration: 0.05s;
        transition-timing-function: cubic-bezier(0.6,0.0,0.2,1);
        z-index: -1;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        background: #49505770;
        border-radius: 4px;
        transform: scale(0);
        transition-property: transform,opacity;
    }

.btn:focus {
    box-shadow: unset;
}

button:active::before {
    opacity: 1;
    transform: scale(1.2);
}

button:active > * {
    animation: scale-click .2s;
}

button:active {
    background: var(--bg-light);
}

button.btn-close-popup {
    padding: 0;
    font-weight: 700;
    color: var(--bs-dark);
    font-size: var(--px-24);
}

button.closed {
    width: fit-content;
    min-width: unset;
    background: unset !important;
    border: var(--bdr-1);
    border-color: var(--bs-gray-700);
    background: var(--bs-gray-700);
}

button.disable {
    pointer-events: none;
    opacity: .3;
}

button.h-60 {
    font: normal normal 500 var(--s-18);
}

.underline {
    text-decoration: underline;
}

p {
    font-family: Sora, sans-serif;
}

.modal-backdrop.show {
    opacity: 0.8;
    backdrop-filter: blur(3px);
    z-index: -1;
}

.dropdown-toggle::after {
    display: none;
    content: unset;
}

.dropdown-menu.show {
    display: block;
    overflow: auto;
    max-height: var(--px-400);
    box-shadow: var(--shadow);
    background: #505050ad !important;
    backdrop-filter: blur(10px);
}

.dropdown-item {
    height: var(--px-50);
    color: var(--note);
    font: normal normal 400 var(--s-16);
    display: flex;
    align-items: center;
}

    .dropdown-item:hover, .dropdown-item:focus {
        color: var(--bs-main-400);
        background-color: var(--bg-light);
    }

header.container-header-layout {
    flex: 1;
    display: flex;
    align-items: center;
    padding: var(--px-16);
    max-height: var(--px-60);
    justify-content: space-between;
}

    header.container-header-layout .nav-start,
    header.container-header-layout .nav-end {
        flex: 1;
        display: flex;
        gap: var(--px-20);
    }

    header.container-header-layout .nav-end {
        justify-content: end;
        align-items: center;
    }

        header.container-header-layout .nav-end .logo-store {
            background: unset;
            border-radius: 100%;
            width: var(--px-50);
            height: var(--px-50);
        }

header .title-header {
    font: normal normal 700 var(--s-20)
}


/* KEYBOARD*/

#pin-form-modal:not(.permission) {
    width: 100vw;
    min-width: 100vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px-24);
}

#pin-form-modal.permission-form {
    background: rgb(12 12 12 / 80%);
    justify-content: center;
    height: 100%;
}

#pin-form-modal .modal-dialog {
    height: 100%;
    display: flex;
    max-width: 70vw;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    margin: 0px auto;
}

#pin-form-modal .modal-content {
    border: 0px;
    display: flex;
    gap: var(--px-32);
    flex-flow: column;
    padding-bottom: 0px;
    align-items: center;
    background: unset;
    justify-content: center;
}

#pin-form-modal .pin-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--px-12);
}

    #pin-form-modal .pin-header p {
        font: normal normal 600 var(--s-28);
        color: var(--txt-light);
    }

#pin-form-modal .pin-wrapper {
    width: 100%;
    display: grid;
    height: var(--px-32);
    margin: var(--px-32) 0 0;
    grid-gap: var( --px-10);
    justify-content: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, var( --px-44));
}

#pin-form-modal .pin-header input {
    border: 0px;
    cursor: text;
    outline: none;
    text-align: center;
    width: var(--px-20);
    height: var(--px-20);
    font-size: var(--px-20);
    border-radius: var(--px-20);
    color: var(--txt-light);
    background: var(--txt-light);
    pointer-events: none;
}

    #pin-form-modal .pin-header input.typed {
        color: var(--bs-main);
        background: var(--bs-main);
    }

#pin-form-modal .pin-form-keypad {
    display: grid;
    border-radius: 4px;
    grid-gap: var(--px-18);
    color: var(--txt-light);
    grid-template-rows: repeat(4, var(--px-80));
    grid-template-columns: repeat(3, var(--px-100));
}

    #pin-form-modal .pin-form-keypad button {
        border: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        min-width: unset;
        color: var(--txt-light);
        font: normal normal 600 var(--s-38);
        backdrop-filter: blur(4px);
        border-radius: 6px;
        border: 2px solid var(--bs-gray-700);
        background: unset;
        transition: all 0.3s ease;
        box-shadow: 0px 1px 8px rgb(96 96 96 / 69%);
    }

        #pin-form-modal .pin-form-keypad button.clear, #pin-form-modal .pin-form-keypad button.cancel {
            /* border: 0px; */
            /* background: 0px center; */
        }

        #pin-form-modal .pin-form-keypad button.cancel {
            color: var(--txt-light);
            font: normal normal 500 var(--s-18);
        }

        #pin-form-modal .pin-form-keypad button.clear i {
            font-size: var(--px-44);
            --fa-secondary-color: var(--bg-light);
            --fa-secondary-opacity: 1;
            --fa-primary-color: var(--txt-light);
            --fa-primary-opacity: 1;
        }

.blur {
    filter: blur(4px);
}

.search-form {
    flex: 1;
    display: grid;
    align-items: center;
    max-height: var(--px-48);
    padding: 0 var(--px-10);
    box-shadow: var(--shadow);
    color: var(--txt-light);
    border-radius: 6px;
    grid-template-columns: var(--px-44) 1fr;
}

.container-body-layout {
    flex: 1;
    overflow: hidden;
    max-width: unset;
}

input.no-style {
    width: 100%;
    border: none;
    outline: none;
    min-width: unset;
    box-shadow: none;
    background: unset;
    color: var(--txt-light);
    font: normal normal 500 var(--s-14);
}

    input.no-style::-webkit-input-placeholder {
        color: var(--bs-gray-400);
        font: normal normal 400 var(--s-14);
    }

.hover {
    cursor: pointer;
}

    .hover:hover {
        box-shadow: var(--shadow);
    }

box.status {
    padding: 2px 6px;
    color: var(--green);
    border-radius: var(--px-8);
    background: var(--green-o);
    font: normal normal 500 var(--s-12);
}

.group-btn {
    flex: 1;
    width: 100%;
    display: flex;
    gap: var(--px-10);
    height: var(--px-40);
    align-items: flex-end;
    justify-content: flex-end;
}

.filter-form {
    display: flex;
    gap: var(--px-10);
    align-items: center;
}

button.no-backgr {
    background: unset;
    border: var(--bdr-1);
    color: var(--txt-light);
    border-color: transparent;
}

    button.no-backgr.active {
        opacity: 1;
        background: var(--bs-main);
        color: var(--bs-main-50);
        border-radius: var(--px-24);
    }

    button.no-backgr i {
        font-size: var(--px-16);
        color: var(--bs-main);
    }

        button.no-backgr i.fa-2xl {
            font-size: var(--px-24);
        }

button.no-brd {
    border: 0;
}

button.no-stl {
    border: 0;
    justify-content: start;
    align-items: center;
    background: var(--bg-solid);
}

button.auto-w {
    width: var(--px-180);
    height: inherit;
    white-space: nowrap;
    background: unset;
}

.form-group {
    width: 100%;
    display: grid;
    border: var( --bdr-1);
    border-radius: var( --px-16);
    grid-gap: var( --px-36) var(--px-12);
    padding: var( --px-12);
    grid-template-columns: repeat(12, 1fr);
}

    .form-group .header--detail {
        position: relative;
        grid-column: span 12;
        font: normal normal 600 var(--s-24);
    }

        .form-group .header--detail::after {
            position: absolute;
            bottom: -10px;
            width: calc(100% + var(--px-48));
            content: '';
            left: calc(-1 * var(--px-24));
            border: var(--bdr-1);
        }

.form-group {
    color: var(--txt-light);
    border: unset;
    /* background: var(--bg-solid); */
}

    .form-group.bg-dark .header--detail::after {
        content: unset;
        display: none;
    }

.header--detail {
    position: relative;
    color: var(--txt-light);
    font: normal normal 600 var(--s-24);
}

    .header--detail .refresh-btn-page {
        position: absolute;
        bottom: var(--px-4);
        left: var(--px-55);
        background: var(--bs-dark);
        height: var(--px-32);
        min-width: var(--px-32);
        max-width: var(--px-32);
        border: 1px solid var(--bs-gray-600);
        border-radius: 100%;
        color: var(--bs-main);
    }

.form--input {
    display: flex;
    gap: var(--px-8);
    position: relative;
    grid-column: span 12;
    flex-direction: column;
    font: normal normal 600 var(--s-14);
}

.grid-2 {
    grid-column: span 2;
}

.grid-3 {
    grid-column: span 3;
}

.grid-4 {
    grid-column: span 4;
}

.grid-6 {
    grid-column: span 6;
}

.grid-7 {
    grid-column: span 7;
}

.grid-8 {
    grid-column: span 8;
}

.grid-9 {
    grid-column: span 9;
}

.grid-10 {
    grid-column: span 10;
}

.grid-12 {
    grid-column: span 12;
}

.form--input input {
    margin: 0;
    width: 100%;
    outline: none;
    border-radius: 6px;
    height: var(--px-44);
    border: unset;
    color: var(--txt-light);
    padding: var(--px-12);
    font: normal normal 500 var(--s-14);
    background: var(--bs-gray-dark);
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
}

.form-group.bg-dark .form--input input {
    margin: 0;
    width: 100%;
    outline: none;
    border: unset;
    height: var(--px-48);
    color: var(--txt-light);
    border-radius: var(--px-22);
    background: var(--bg-light);
    padding: var(--px-12) var(--px-16);
    font: normal normal 400 var(--s-16);
    border-color: var(--bs-gray-800);
}

.form--input .check-valid {
    display: none;
    color: var(--red);
    font: normal normal 400 var(--s-14);
}

.form--input label {
    font: normal normal 400 var(--s-14);
    color: #d1d1d1;
}

.form--input input[type="checkbox"] {
    display: none;
}

.form--input.require .check-valid {
    display: block;
}

.form--input textarea {
    margin: 0;
    width: 100%;
    outline: none;
    border: unset;
    border-radius: var(--px-6);
    max-height: var(--px-400);
    color: var(--txt-light);
    background: unset;
    border-color: var(--bs-gray-800);
    padding: var(--px-12);
    font: normal normal 400 var(--s-14);
}

.form--input button.dropdown-toggle {
    all: unset;
    background: var(--bs-gray-800);
    padding: var(--px-8);
    border-radius: 6px;
    height: var(--px-32);
    display: flex;
    align-items: center;
    width: 100%;
    font: normal normal 600 var(--s-16);
    max-width: var(--px-400);
}

div.form-upload-image {
    display: flex;
    overflow: hidden;
    position: relative;
    align-items: center;
    height: var(--px-280);
    justify-content: center;
    border-radius: var(--px-16);
    border: 2px dotted var(--bs-gray-700);
}

    div.form-upload-image p {
        font: normal normal 500 var(--s-14);
    }

    div.form-upload-image i {
        font-size: var(--px-32);
    }

    div.form-upload-image img {
        z-index: 1;
        height: 100%;
        width: 100%;
        position: absolute;
    }

    div.form-upload-image .upload-label {
        width: 100%;
        height: 100%;
        display: flex;
        cursor: pointer;
        gap: var(--px-10);
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: var(--txt-light);
        font: normal normal 500 var(--s-14);
    }

    div.form-upload-image .upload-input {
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: absolute;
    }

.form-upload-image:hover .upload-label {
    z-index: 20;
    background: #00000030;
    color: var(--bs-white);
}


/* Create a custom checkbox */
div.option.select-radio {
    display: flex;
    cursor: pointer;
    gap: var(--px-12);
    height: var(--px-44);
    color: var(--bs-gray-600);
    border-radius: var(--px-8);
    justify-content: flex-start;
    font: normal normal 400 var(--s-14);
}

    div.option.select-radio.active {
        color: var(--txt-light);
    }

    div.option.select-radio.disable {
        opacity: .6;
    }

    div.option.select-radio.no-desc {
        height: var(--px-28);
        align-items: center;
    }

.container--checkbox .checkmark {
    position: absolute;
    top: 2px;
    left: 2px;
    height: var(--px-24);
    width: var(--px-24);
    box-shadow: 0px 0px 6px #00000029;
    border: var(--bdr-2);
    border-radius: 4px;
}

    .container--checkbox .checkmark.radio {
        border-radius: 100%;
        border-color: var(--bs-main);
    }

/* When the checkbox is checked, add a blue background */
.container--checkbox {
    display: block;
    margin: 0;
    position: relative;
    cursor: pointer;
    height: var(--px-30);
    min-width: var(--px-30);
    pointer-events: none;
}

    .container--checkbox input:checked ~ .checkmark {
        background-color: var(--bs-main);
        border: 2px solid var(--bs-main);
    }

        .container--checkbox input:checked ~ .checkmark.radio {
            background: var(--bs-white);
            border: 6px solid var(--bs-main);
        }

    /* Create the checkmark/indicator (hidden when not checked) */

    .container--checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .container--checkbox input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */

    .container--checkbox .checkmark:after {
        left: var(--px-6);
        top: 2px;
        width: 6px;
        height: var(--px-14);
        border: solid #fff;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .container--checkbox .checkmark.radio:after {
        border: none;
    }

    .container--checkbox .checkmark.uncheckall:after {
        background: #FFF;
        border: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 70%;
        height: 2px;
        border-radius: 2px;
    }

.form-select-outlet {
    width: 100%;
    z-index: 7;
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    background-size: cover;
    padding: var(--px-24) 0;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: var(--bs-body-bg);
    background-image: url( /Images/background-3.jpg);
    justify-content: flex-start;
}

    .form-select-outlet header {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        padding: var(--px-20) 0;
    }

        .form-select-outlet header img {
            height: var(--px-128);
        }

        .form-select-outlet header h3 {
            margin: 0;
            font-weight: 600;
        }

.checkin-order-bpdy-page {
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    flex-direction: row;
    background: var(--bs-body-bg);
}

.outlet-list {
    f;
    f;
    flex: 1;
    width: 100%;
    display: flex;
    min-height: var(--px-140);
    max-height: var(--px-140);
    overflow: auto hidden;
    gap: var(--px-24);
    padding: var( --px-16);
    align-items: center;
    padding-bottom: 0;
    justify-content: space-between;
}

    .outlet-list box.outlet {
        display: flex;
        overflow: hidden;
        align-items: center;
        flex-direction: column;
        grid-gap: var(--px-12);
        min-width: var(--px-140);
        min-height: var(--px-140);
        max-height: var(--px-140);
    }

box.outlet .box-left {
    height: var(--px-88);
    min-width: var(--px-88);
    max-width: var(--px-88);
    overflow: hidden;
    border-radius: var(--px-120);
    border: var(--bdr-2);
    border-width: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
    font-size: var(--px-36);
    position: relative;
    transition: all .2s;
}

.outlet-list box.outlet.active .box-left {
    border-width: 6px;
    border-color: var(--bs-main);
}

box.outlet .box-right {
    flex: 1;
    display: flex;
    gap: var(--px-12);
    min-height: var(--px-24);
    text-align: center;
    flex-direction: column;
    justify-content: flex-start;
}

box.outlet .box-left img {
    width: 100%;
    height: 100%;
}

box.outlet .box-right span {
    color: var(--txt-light);
    font: normal normal 500 var(--s-20);
}

.keyboard-pin .unlock-pass {
    height: var(--px-44);
    width: 100%;
    background: var(--bs-main);
    border-radius: var(--px-22);
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 600 var(--s-20);
    color: var(--txt-light);
    max-width: var(--px-380);
}


/* SERVICE MENU */

.menu-create-page, .form-select-order {
    width: 100%;
    height: 100%;
    display: grid;
    position: fixed;
    gap: var(--px-16) 0;
    transition: left .5s;
    background: var(--bs-surface-bg);
    grid-template-columns: var(--px-200) 1fr;
}

    .menu-create-page.open, .form-select-order.open {
        left: 0;
        z-index: 7;
        gap: 0;
        /* background: white; */
        /* background-image: url(/Images/black-backgr.jpg); */
        background-size: cover;
    }

    .menu-create-page:not(.form-select-order) {
        z-index: 11;
        grid-gap: var(--px-24) 0;
        grid-template-rows: min-content;
    }

    .menu-create-page:not(.open), .form-select-order:not(.open) {
        left: 100%;
        display: none;
    }

header.title-menu {
    display: flex;
    grid-column: span 2;
    flex-direction: column;
    color: var(--note);
    gap: var(--px-24);
    padding: var(--px-16);
    padding-bottom: 0;
}

.categories-menu {
    z-index: 12;
    display: flex;
    flex-direction: column;
    color: var(--note);
    overflow: hidden auto;
    background: var(--bs-surface-bg);
    max-width: var(--px-240);
    padding-bottom: var(--px-24);
    flex: 1;
}

    .categories-menu .title-cate {
        padding: 0 var(--px-12);
        font: normal normal 500 var(--s-24);
    }

    .categories-menu.open {
        left: -100%;
    }

button.categories {
    width: 100%;
    display: flex;
    padding: 0;
    align-items: center;
    color: white;
    text-align: start;
    min-height: var(--px-48);
    padding: 0 var(--px-12) 0 0;
    background: unset;
    justify-content: space-between;
    font: normal normal 500 var(--s-18);
    font-weight: 500;
    text-transform: capitalize;
    color: var(--color-item-menu);
}

    button.categories.active {
        background: var(--bs-main);
    }

    button.categories.sub-2 {
        font: normal normal 400 var(--s-16);
        font-weight: 400;
        position: relative;
        text-transform: capitalize;
        color: var(--bs-gray-400);
        color: var(--color-item-menu);
        flex-direction: column;
        display: flex;
        gap: 0;
        align-items: flex-start;
        justify-content: center;
    }

        button.categories.sub-2 i {
            color: white;
            font: normal normal 400 var(--s-12);
        }


        button.categories.sub-2::after {
            position: absolute;
            content: '';
            bottom: -3px;
            height: 4px;
            width: 68%;
            left: 50%;
            border-radius: 100%;
            background: #c2c2c2;
            transform: translateX(-50%);
        }

        button.categories.sub-2:hover,
        .select-cate-left.select-main-menu:hover span {
            color: var(--bs-main);
        }

    button.categories count {
        width: var(--px-32);
        height: var(--px-32);
        border-radius: var(--px-32);
        background: var(--bg-light);
        color: var(--bs-main-400);
        font: normal normal 500 var(--s-16);
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--bdr-1);
    }

.cate-group {
    display: flex;
    flex-direction: column;
    border-radius: var(--px-24);
    background: var(--bg-light);
    padding: var(--px-12) var(--px-24);
    box-shadow: var(--shadow-qs-solid);
}

.cate-name {
    display: flex;
    align-items: center;
    min-height: var(--px-60);
    justify-content: space-between;
}

    .cate-name.sub-2 {
        padding-left: var(--pad-sub);
    }

    .cate-name.sub-3 {
        padding-left: calc(var(--pad-sub) * 2);
    }

    .cate-name.sub-4 {
        padding-left: calc(var(--pad-sub) * 3);
    }

    .cate-name.sub-5 {
        padding-left: calc(var(--pad-sub) * 4);
    }

    .cate-name.sub-6 {
        padding-left: calc(var(--pad-sub) * 5);
    }

    .cate-name.sub-8 {
        padding-left: calc(var(--pad-sub) * 6);
    }

    .cate-name span {
        font: normal normal 600 var(--s-18);
    }

    .cate-name button,
    button.add-on {
        background: unset;
        width: max-content;
        border: var(--bdr-1);
        min-width: var(--px-140);
        border-color: var(--bs-gray-800);
    }

        .cate-name button span,
        button.add-on span {
            font: normal normal 300 var(--s-14);
        }

        button.add-on.qty {
            width: var(--px-32);
            height: var(--px-32);
            min-width: unset;
            border: 0;
            border-radius: var(--px-32);
        }

            button.add-on.qty.hidden-when-no-select {
                background: unset;
            }

        button.add-on.no-border {
            border: 0;
            gap: var(--px-6);
            color: var(--bs-main);
            justify-content: flex-start;
        }

            button.add-on.no-border span {
                font: normal normal 500 var(--s-18);
            }

        button.add-on.only-icon {
            border: 0;
            height: 100%;
            min-width: unset;
            width: max-content;
            font-size: var(--px-20);
            color: var(--bs-gray-500);
            background: unset;
        }

            button.add-on.only-icon.collapsed .fa-chevron-down {
                transform: rotate(180deg);
                transition: all .3s;
            }

div.add-on.service {
    display: flex;
    min-width: var(--px-60);
    max-width: var(--px-60);
    height: var(--px-60);
    border-radius: var(--px-60);
    justify-content: center;
    position: absolute;
    bottom: 24px;
    right: var(--px-40);
    background: var(--bs-main);
    z-index: 123123123;
    box-shadow: var(--shadow-qs-solid);
    align-items: center;
}

    div.add-on.service #add-item-combo {
        border: 0;
        box-shadow: unset;
        font-size: var(--px-20);
        );
        )();
        )(
        -webkit-xxx-large);
        )(
        -webkit-xxx-large);
        )(-);
        )(
        --);
        )(
        -webkit-xxx-large);
        )(
        -webkit-xxx-large);
        )(-);
        )();
        );
        background: var(--bs-main);
        font-weight: 600;
        color: white;
    }

button.add-on.refresh {
    min-width: var(--px-60);
    max-width: var(--px-60);
    height: var(--px-60);
    border-radius: var(--px-60);
    justify-content: center;
    position: absolute;
    bottom: 24px;
    right: var(--px-128);
    background: var(--bs-gray-800);
    z-index: 123123123;
    box-shadow: var(--shadow-qs-solid)
}

.select-cate-left.active {
    position: relative;
    color: var(--bs-main);
}

    .select-cate-left.active::after {
        top: 50%;
        content: '';
        position: absolute;
        width: var(--px-6);
        height: var(--px-24);
        background: var(--color-selected);
        border-radius: var(--px-14);
        right: 0;
        transform: translateY(-50%);
    }

    .select-cate-left.active button {
        color: var(--color-selected);
        height: var(--px-36);
    }

.select-cate-left:not(.active) .dropdown-menu-cate {
    /* display: none !important; */
}


.select-cate-left.active .dropdown button,
.select-cate-left.active .dropdown button i {
    color: var(--txt-light);
}


.item-service {
    flex: 1;
    width: 100%;
    display: flex;
    gap: var(--px-16) var(--px-8);
    overflow: auto;
    padding: 0;
    flex-wrap: wrap;
    flex-direction: row;
}

.service-name {
    color: var(--note);
    display: flex;
    border: var(--bdr-1);
    border-color: var(--bs-gray-700);
    font: normal normal 300 var(--s-16);
    overflow: hidden;
    transition: all .2s;
    /* Ensure children have 50% height of each row */
    /* min-height: calc((100% / 2)); */
    height: calc((100% / 2 - var(--px-16)));
    width: calc((100% / var(
    --column-service)) - var(--px-8) * 1);
    flex-direction: column;
    justify-content: flex-start;
    border-radius: var(--px-16);
    position: relative;
    cursor: pointer;
}

    .service-name .flex-img {
        flex: 1;
        position: relative;
        overflow: hidden;
    }

        .service-name .flex-img .pinch-to-zoom {
            bottom: 0;
            right: 0;
            gap: 2px;
            position: absolute;
            display: none;
            flex-direction: row;
            align-items: flex-end;
            justify-content: center;
            text-align: center;
            font: normal normal 500 var(--s-14);
            backdrop-filter: blur(1px);
            padding: 4px;
            backdrop-filter: blur(2px);
        }

div.popup-content .pinch-to-zoom {
    display: flex !important;
}

.service-name img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    cursor: grab;
    z-index: 1;
}

    .service-name img:active {
        cursor: grabbing;
    }

.service-name .info-service {
    flex: 1;
    max-height: var(--px-44);
    padding: 0 var(--px-24);
    justify-content: space-between;
    font: normal normal 500 var(--s-16);
    background: var(--backgroud-item-menu);
    align-items: center;
    text-transform: capitalize;
}

.service-name price {
    position: absolute;
    top: 0;
    z-index: 1;
    left: 0;
    font-size: var(--px-16);
    font-weight: 200;
    background: var(--backgroud-item-menu);
    padding: var(--px-12);
    border-radius: 0 0 var(--px-24);
    color: var(--color-item-menu);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: var(--px-48);
}

.service-name dur {
    color: var(--bs-gray-400);
    font: italic normal 400 var(--s-14);
}

.service-name note {
    font-weight: 300;
    font-size: var(--px-14);
    color: var(--bs-gray-100);
    text-transform: math-auto;
    font-style: italic;
}

.modal-fullscreen .modal-header {
    padding: var(--px-32) var(--px-60);
}

.modal-fullscreen .modal-footer {
    color: var(--txt-light);
    padding: var(--px-12) var(--px-24);
    display: flex;
    border-top: var(--bdr-1);
    border-color: var(--bs-gray-700);
    font: normal normal 400 var(--s-15);
}

#modalListOrder .modal-footer {
    padding: 4px var(--px-16) 0;
    overflow: hidden;
    flex-direction: column;
}
/* Table reservation */
.form-select-table {
    width: 100%;
    height: 100%;
    display: grid;
    gap: var(--px-8);
    padding: 0;
    background-image: url(/Images/black-backgr.jpg);
    background-size: cover;
    grid-template-rows: min-content;
    grid-template-columns: 1fr var(--px-340);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

b {
}

.form-select-table .header--detail {
    grid-column: span 2;
}

.form-select-table .area-and-status {
    width: 100%;
    display: flex;
    gap: var(--px-32);
    flex-direction: row;
    min-height: var(--px-68);
    max-height: var(--px-68);
    align-items: center;
    padding: var(--px-20);
    justify-content: flex-start;
    overflow: auto hidden;
}

.table-area {
    flex: 1;
    display: flex;
    gap: var(--px-12);
    position: relative;
}

    .table-area::before {
        top: 50%;
        content: '';
        position: absolute;
        height: var(--px-36);
        width: var(--px-4);
        border-radius: 4px;
        left: calc(-1 * var(--px-16));
        background: var(--bs-gray-800);
        transform: translate(0, -50%);
    }

.form-select-table .area.no-backgr {
}

    .form-select-table .area.no-backgr.active {
    }

.form-select-table .table-status {
    display: flex;
    gap: var(--px-12);
    position: relative;
}

    .form-select-table .table-status::before,
    .form-select-table .table-status::after {
        top: 50%;
        content: '';
        position: absolute;
        height: var(--px-36);
        width: var(--px-4);
        border-radius: 4px;
        left: calc(-1 * var(--px-24));
        background: var(--bs-gray-800);
        transform: translate(0, -50%);
    }

    .form-select-table .table-status::after {
        left: unset;
        right: calc(-1 * var(--px-12));
    }

.form-select-table .status.no-backgr {
}

.form-select-table .status.no-backgr {
    background: unset;
    border: unset;
    color: var(--txt-light);
    white-space: nowrap;
}

    .form-select-table .status.no-backgr.active {
        border: var(--bdr-1);
    }

    .form-select-table .status.no-backgr .fa-circle {
    }

.form-select-table .table-map {
    flex: 1;
    display: flex;
    gap: var(--px-24);
    padding: var(--px-24) var(--px-16);
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: auto hidden;
    flex-direction: column;
}

.form-select-table[filter="inservice"] .box--table:not(.inservice),
.form-select-table[filter="available"] .box--table.inservice,
.form-select-table[filter="inservice"] .order-table:not(.inservice),
.form-select-table[filter="available"] .order-table.inservice {
    display: none;
}

.form-select-table .box--table {
    display: flex;
    flex-direction: column;
    color: var(--txt-light);
    position: relative;
    height: calc(var(--px-100) * var(--table-zoom) / 10);
    width: calc(var(--px-140) * var(--table-zoom) / 10);
}

    .form-select-table .box--table circle {
        left: 50%;
        z-index: 1;
        position: absolute;
        font-size: calc(var(--px-32) * var(--table-zoom) / 10);
        top: calc(-0.6 * var( --px-16)* var(--table-zoom) / 10);
        transform: translateX(-50%);
        color: #ffffff9e;
        border-radius: 100%;
    }

        .form-select-table .box--table circle.chair-2 {
            left: unset;
            right: calc(-0.6 * var(--px-16) * var(--table-zoom) / 10);
            top: 50%;
            transform: translateY(-50%);
        }

        .form-select-table .box--table circle.chair-3 {
            top: unset;
            bottom: calc(-0.6 * var(--px-16) * var(--table-zoom) / 10);
        }

        .form-select-table .box--table circle.chair-4 {
            right: unset;
            left: calc(-0.6 * var(--px-16) * var(--table-zoom) / 10);
            top: 50%;
            transform: translateY(-50%);
        }

    .form-select-table .box--table .table-detail {
        z-index: 2;
        height: 100%;
        display: flex;
        gap: var(--px-6);
        flex-direction: column;
        backdrop-filter: blur(12px);
        background: #ffffff3d;
        border-radius: var(--px-12);
        border-left-color: var(--bs-success);
        border-width: 0 0 0 3px;
        border-style: solid;
        padding: var(--px-10);
        overflow: hidden;
    }

    .form-select-table .box--table .name-table {
        /* flex: 1; */
        display: flex;
        align-items: end;
        white-space: nowrap;
        color: var(--bs-main);
        font: normal normal 600 var(--s-18);
    }

    .form-select-table .box--table .guest {
        font: normal normal 500 var(--s-13);
    }

        .form-select-table .box--table .guest i {
            font-size: var(--px-16);
        }

    .form-select-table .box--table.inservice .table-detail {
        border-color: var(--bs-yellow);
    }

    .form-select-table .box--table.guest-3.inservice circle:not(.chair-4) {
        color: var(--bs-yellow);
    }

    .form-select-table .box--table.guest-2.inservice circle:not(.chair-3, .chair-4) {
        color: var(--bs-yellow);
    }

    .form-select-table .box--table.guest-1.inservice circle:not(.chair-2, .chair-3, .chair-4) {
        color: var(--bs-yellow);
    }

    .form-select-table .box--table.isOpening circle {
        color: var(--bs-red) !important;
    }

    .form-select-table .box--table.isOpening .table-detail {
        border-left-color: var(--bs-red) !important;
    }

.group-btn-right-top {
    z-index: 6;
    gap: var(--px-12);
    right: var(--px-24);
    top: var(--px-24);
    position: absolute;
    align-items: center;
    color: var(--txt-light);
    justify-content: end;
}

button.setting-menu {
    z-index: 5;
    border: unset;
    height: var(--px-50);
    min-width: var(--px-60);
    font-size: var(--px-20);
}

    button.setting-menu i {
        color: var(--txt-light);
    }

    button.setting-menu:not(.open) i.fa-home,
    button.setting-menu.open i.fa-gear {
        display: none;
    }

.d-flex.cate-sub {
    gap: var(--px-10);
    align-items: center;
    height: var(--px-48);
    padding: 0 var(--px-16);
    position: relative;
}

    .d-flex.cate-sub .fa-corner {
        font-size: var(--px-20);
        color: var(--bs-gray-700);
        margin-bottom: var(--px-8);
    }

.select2-container {
    z-index: 1111;
}

.select-cate-left.select-main-menu {
    justify-content: space-between !important;
    padding: var(--px-8);
    z-index: 1;
    position: relative;
    border-top: 1px solid var(--bs-gray-700);
    border-bottom: 1px solid var(--bs-gray-700);
}

    .select-cate-left.select-main-menu:nth-child(2) {
        border: 0;
        z-index: 1;
    }

.form-select-table .end-bar-map {
    overflow: hidden;
    color: var(--txt-light);
    display: flex;
    flex-direction: column;
    background: #ffffff14;
    padding: var(--px-20);
    gap: var(--px-24);
    border-radius: 6px;
    transition: height 1s ease-in;
    backdrop-filter: blur(4px);
    /* margin-right: var(--px-16); */
}

    .form-select-table .end-bar-map.expand {
        min-height: calc(100% - var(--px-220) - var(--px-8));
        max-height: calc(100% - var(--px-220) - var(--px-8));
    }

    .form-select-table .end-bar-map .header-place-ord {
        display: flex;
        align-items: center;
        gap: var(--px-12);
        height: var(--px-40);
        font: normal normal 600 var(--s-18);
    }

        .form-select-table .end-bar-map .header-place-ord i {
            color: var(--bs-main);
            font-size: var(--px-20);
        }

.place-order-table {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--px-18);
    justify-items: center;
    overflow: auto;
    align-content: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
}

    .place-order-table .order-table {
        flex: 1;
        display: flex;
        align-items: flex-start;
        position: relative;
        min-height: var(--px-80);
        max-height: var(--px-80);
        border-radius: 6px;
        background: #5e5e5e33;
        color: var(--txt-light);
        min-width: var(--px-80);
        max-width: var(--px-80);
        padding: var(--px-10);
        flex-direction: column;
        font: normal normal 400 var(--s-12);
        justify-content: space-between;
        backdrop-filter: blur(2px);
    }

        .place-order-table .order-table.inservice {
            color: var(--txt-dark);
            background: var(--bs-yellow);
        }

        .place-order-table .order-table span {
            color: var(--bs-main-600);
            text-transform: uppercase;
            font: normal normal 600 var(--s-16);
        }

.start-bar-map {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    padding-left: var(--px-16);
}

.guest.d-flex.gap-1.payment {
    background: var(--bs-white);
    border-radius: var(--px-12);
    padding: 4px;
    position: relative;
    color: var(--bs-dark);
}

count {
    display: flex;
    position: absolute;
    align-items: center;
    width: var(--px-24);
    height: var(--px-24);
    top: 0;
    right: calc(-1* var(--px-4));
    justify-content: center;
    color: var(--white);
    background: var(--bs-main);
    border-radius: var(--px-24);
    font: normal normal 600 var(--s-14);
    box-shadow: var(--shadow);
}

.modal-right-side {
    right: 0;
    left: unset;
    width: var(--px-600);
    max-width: 100vw;
}

    .modal-right-side .modal-header {
        padding: var(--px-24);
    }

    .modal-right-side .modal-content {
        background: var(--bg-light) !important;
        border-left: 2px solid var(--bs-gray-700);
    }

    .modal-right-side .modal-fullscreen {
        width: 100%;
    }

#append-header-lobby-id {
    display: flex;
    gap: var(--px-24);
    align-items: center;
    position: sticky;
    top: 0px;
    z-index: 6;
    border-radius: var(--px-24) 0 0 0;
    padding: var(--px-12) var(--px-24);
}

    #append-header-lobby-id.menu.flex-column {
        gap: var(--px-16);
        padding: var(--px-8);
        min-width: 100%;
        right: 0;
        background: #0e0e0e;
    }

    #append-header-lobby-id img {
        width: var(--px-64);
        height: var(--px-64);
        border-radius: var(--px-64);
        box-shadow: 0 2px 12px #d1d1d190;
        border: 1px solid var(--bs-gray-600);
    }

.header--detail.menu {
    padding: var(--px-16) 0;
}

    .header--detail.menu img {
        width: var(--px-100);
        height: var(--px-100);
        border-radius: var(--px-100);
    }

    .header--detail.menu .title {
        font: normal normal 500 var(--s-16)
    }

#append-header-lobby-id .title {
    text-align: center;
    text-transform: capitalize;
    font: normal normal 600 var(--s-22);
}

.form-select-order .header--detail {
    grid-column: span 2;
}

.header--detail time {
    color: var(--bs-gray-500);
    font: normal normal 400 var(--s-16);
}

.expand-bill-view {
    gap: var(--px-12);
    display: flex;
    z-index: 8;
    color: var( --txt-light);
    align-items: center;
    height: var(--px-48);
    justify-content: flex-end;
}

    .expand-bill-view #rule-menu {
        flex: 1;
        width: 100%;
        text-align: end;
        position: absolute;
        padding: 0 var(--px-12);
        font: italic normal 600 var(--s-16);
        bottom: calc(-1 * var(--px-24));
    }

#append-card-order {
    height: inherit;
    font: normal normal 600 var(--s-16);
    overflow: unset;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    background: var(--bs-gray-900);
    border: 2px solid var(--bs-main-400);
}

    #append-card-order .fa-cart-shopping {
        background: var(--bs-main-200);
        padding: 8px;
        border-radius: 100%;
        height: var(--px-32);
        width: var(--px-32);
        color: var(--bs-main-600);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }

    #append-card-order .qty-card {
        background: var(--bs-green);
        height: var(--px-32);
        min-width: var(--px-32);
        font-size: var(--px-14);
        top: calc(-1 * var(--px-12));
        right: calc(-1 * var(--px-24));
        border: 4px solid var(--bg-solid);
        padding: 2px 6px;
        max-width: unset;
        width: auto;
    }

#modalListOrder {
    overflow: unset;
    max-width: var(--px-440);
}

    #modalListOrder .modal-header .current {
        color: var(--bs-gray-500);
    }

        #modalListOrder .modal-header .current span {
            font: normal normal 600 var(--s-18)
        }

    #modalListOrder .box-order {
        width: 100%;
        color: var(--bs-main-200);
        display: flex;
        grid-gap: var(--px-14) 0;
        border-color: var(--bs-gray-800);
        padding: 0 var(--px-16);
        cursor: pointer;
        align-items: center;
        position: relative;
        height: auto;
    }

        #modalListOrder .box-order:hover {
            background: var(--bs-gray-900);
        }

        #modalListOrder .box-order.open-note note {
            display: block;
        }

        #modalListOrder .box-order:not(.open-note) note {
            display: none;
        }

        #modalListOrder .box-order.text-bold {
            color: white;
        }

    #modalListOrder .form-select-table {
        display: flex;
        flex-direction: column;
        background: var(--bg-light);
        padding-top: 0;
        padding: 0;
        overflow-x: hidden;
        flex: 1;
    }

    #modalListOrder .box-order.header {
        padding: var(--px-12);
        position: sticky;
        top: -2px;
        left: 0;
        gap: var(--px-12);
        z-index: 2;
        color: var(--txt-light);
        font-size: var(--px-14);
        width: 100%;
        max-height: var(--px-60);
        border-top: 1px dashed;
        border-bottom: 1px dashed;
        background: var(--bs-gray-900);
    }

        #modalListOrder .box-order.header strong.grid-12 {
            flex: 1;
        }

    #modalListOrder .box-order .img-ord {
        display: flex;
        align-items: flex-start;
        gap: var(--px-8);
        font: normal normal 500 var(--s-12);
        z-index: 1;
        height: 100%;
        flex: 1;
    }

    #modalListOrder .box-order .box-left {
        border: 1px solid var(--bs-gray-700);
        min-width: var(--px-32);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: var(--px-8);
        position: relative;
        z-index: 1;
        background: var(--bg-light);
        height: var(--px-40);
        min-width: var(--px-40);
        border-radius: var(--px-8);
    }

    #modalListOrder .box-order .img-ord img {
        height: var(--px-40);
        width: var(--px-40);
        border-radius: var(--px-8);
        background: var(--bs-main-o);
        border: 1px solid var(--bs-gray-700);
    }

    #modalListOrder .box-order .img-ord amount {
        font: normal normal 500 var(--s-14);
        color: var(--txt-light);
        text-align: start;
    }

    #modalListOrder .box-order input.qty {
        height: var(--px-20);
        text-align: center;
        width: var(--px-20);
        pointer-events: none;
        color: var(--bs-teal);
        background: #003525;
        border-radius: var(--px-12);
        border: 1px solid;
        font: normal normal 600 var(--s-14);
    }

    #modalListOrder .box-order amount {
        text-align: end;
        font: normal normal 500 var(--s-14);
    }

    #modalListOrder .box-order.text-warning {
        z-index: 1;
        /* pointer-events: none; */
    }

    #modalListOrder .box-order button.delete {
        margin-left: auto;
        min-width: var(--px-36);
        height: var(--px-36);
        pointer-events: all;
        max-width: var(--px-36);
        font-size: var(--px-14);
        border-radius: var(--px-12);
        border-color: var(--bs-main);
    }

    #modalListOrder .box-order button.done-service.done {
        border-color: transparent;
        pointer-events: none;
        min-width: unset;
    }

    #modalListOrder .box-order button.done-service.disable {
        opacity: 1;
        pointer-events: none;
        font-size: var(--px-28);
        border-color: transparent;
        min-width: var(--px-40);
    }

    #modalListOrder .box-order:not(.item-combo, .header)::before {
        position: absolute;
        content: '';
        top: -5px;
        width: 100%;
        height: 1px;
        left: 0;
        /*background: var(--bs-gray-800);*/
    }

    #modalListOrder .info-amount {
        height: var(--px-24);
        padding-top: var(--px-8);
        align-items: center;
        font: normal normal 500 var(--s-14);
        justify-content: space-between;
        width: 100%;
        display: flex;
        color: var(--bs-gray-500);
    }

        #modalListOrder .info-amount .add-cash {
            display: flex;
            gap: var(--px-8);
            align-items: center;
        }

        #modalListOrder .info-amount.total-due {
            padding-top: var(--px-8);
            color: var(--bs-gray-100);
            border-top: 1px dashed var(--bs-gray-700);
            font: normal normal 600 var(--s-16);
        }

        #modalListOrder .info-amount.sub-amount {
            padding-top: var(--px-8);
        }

    #modalListOrder textarea {
        border: 0;
        width: 100%;
        height: var(--px-40);
        background: var(--bg-light);
        border-radius: var(--px-8);
        padding: var(--px-12);
        color: var( --txt-light);
        font: normal normal 500 var(--s-14);
    }

.lobby-setting {
    width: 100vw;
    display: flex;
    overflow: hidden;
    gap: var(--px-12);
    grid-column: span 2;
    flex-direction: column;
    color: var(--txt-light);
}

    .lobby-setting .append-all-lobby {
        display: flex;
        gap: var(--px-24);
    }

    .lobby-setting .append-all-lobby {
        width: 100%;
        height: 100%;
        display: grid;
        gap: var(--px-24);
        grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
        align-items: start;
        grid-auto-rows: min-content;
        max-height: unset;
    }

        .lobby-setting .append-all-lobby .outlet.hover {
            flex-direction: row;
            background: var(--bs-gray-900);
            border-radius: var(--px-12);
            padding: var(--px-16) var(--px-24);
        }

div.form-upload-image.circle {
    margin: auto;
    width: var(--px-320);
    height: var(--px-320);
    border-radius: var(--px-320);
}


.popup-container {
    display: flex;
    z-index: 1060;
    overflow: auto;
    max-height: 98vh;
    border-radius: 4px;
    box-shadow: var(--shadow);
    transform: translate(2px, -2px);
    background: #292929e8;
    opacity: 1 !important;
    backdrop-filter: blur(4px);
}

    .popup-container.overflow-none {
        overflow: unset;
    }

    .popup-container.box-shadow {
        box-shadow: 0px 0px 26px 0px rgba(60,64,67,0.3),0px 9px 28px 6px rgba(60,64,67,0.15)
    }

    .popup-container.visible {
        overflow: visible;
    }

    .popup-container.top-bar {
        top: var(--px-60) !important;
    }

    .popup-container.adjust-calendar {
        top: var(--px-60) !important;
        transform: translateX(-32px);
    }

    .popup-container.option-book-or-block {
        transform: translate(0, calc(-50% + var(--height-row) / 2));
    }

    .popup-container.fit-center {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        border: 0;
        box-shadow: 0px 0px 26px 0px rgb(42 42 42 / 20%), 0px 9px 28px 6px rgb(255 130 91 / 12%);
    }

    .popup-container.select-item-service {
        border-radius: var(--px-8);
        border: 0;
        box-shadow: 0 1px 20px 10px #ff572240;
        border: 2px solid var(--bs-gray-700);
    }

    .popup-container.fit-center-modal {
        z-index: 2000000;
        width: var(--px-710);
        height: calc(100% - var(--px-190));
        bottom: var(--px-100);
        left: 50% !important;
        max-height: var(--px-640);
        top: unset !important;
        right: unset !important;
        transform: translateX(-50%) !important;
        border: 2px solid var(--bs-gray);
        box-shadow: 0px 0px 26px 0px rgba(60,64,67,0.3),0px 9px 28px 6px rgba(60,64,67,0.15)
    }

        .popup-container.fit-center-modal.large {
            width: 75vw;
        }

        .popup-container.fit-center-modal.combo {
            max-height: 100%;
        }

.add-guest-note {
    display: flex;
    gap: var(--px-24);
    padding: var(--px-16);
    flex-direction: column;
    color: var(--txt-light);
    min-width: var(--px-400);
}

    .add-guest-note .h4 {
        color: var(--white-64);
    }

    .add-guest-note textarea {
        height: var(--px-80);
        border-radius: var(--px-8);
    }

    .add-guest-note .btn-continue-order {
        width: var(--px-200);
        align-items: center;
        justify-content: space-between;
    }

.adj-qty-item i {
    font-size: var(--px-24);
    color: var(--color-item-menu);
    font-weight: 900;
}

.adj-qty-item .fa-plus {
    color: var(--color-item-menu);
}

#append-info-table-header {
    display: grid;
    z-index: 100;
    grid-gap: var(--px-12);
    color: var(--txt-light);
    background: var(--bs-gradient);
    padding: var(--px-16) var(--px-24);
    grid-template-columns: 1fr 1fr max-content;
}

    #append-info-table-header .row-header {
        height: 100%;
        display: flex;
        gap: var(--px-8);
        position: relative;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;
    }

        #append-info-table-header .row-header.more-option {
            flex-direction: row;
            width: 100%;
        }

        #append-info-table-header .row-header span {
            display: flex;
            flex-direction: column;
            font: normal normal 600 var(--s-17);
            gap: var(--px-6);
        }

        #append-info-table-header .row-header strong {
            color: var(--bs-main);
            flex: 1;
            display: flex;
            align-items: center;
        }

        #append-info-table-header .row-header.grid-2 {
            display: flex;
        }

        #append-info-table-header .row-header.btn-update-table-info span {
            width: 100%;
        }

.note-ticket {
    color: var(--bs-white);
    font: normal normal 600 var(--s-14);
    margin: var(--px-8) 0;
}

    .note-ticket note {
        display: flex;
        padding: var(--px-12);
        background: var(--bs-gray-900);
        border-radius: var(--px-12);
        font: normal normal 400 var(--s-12);
    }

button.btn-view-more-service {
    bottom: -2px;
    position: absolute;
    left: 0;
    background: var( --bg-light);
    font-size: var(--px-24);
    font-weight: 300;
    min-width: var(--px-60);
    padding: 0;
    border-radius: 0 var(--px-22) 0 0;
    height: var(--px-48);
}

button.btn-add-note {
    display: none;
}

.popup-container button.btn-add-note {
    color: var(--color-item-menu);
    display: flex;
    position: absolute;
    left: var(--px-24);
    background: unset;
    font-size: var(--px-16);
}

body[templatemenu="0"] .popup-container button.btn-add-note.noted {
    color: var(--bs-main-50);
    background: var(--bs-main-900);
    font: normal normal 500 var(--s-14);
}

.popup-container button.btn-add-note.noted i::before {
    content: '\e1d9';
}

.popup-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .popup-content .service-name {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
    }

        .popup-content .service-name .flex-img {
            overflow: hidden;
            max-width: unset;
        }

        .popup-content .service-name .btn-view-more-service {
            display: none;
        }

        .popup-content .service-name .wrap-line-2 {
            -webkit-line-clamp: 2;
            display: -webkit-box !important;
        }

        .popup-content .service-name note {
            display: -webkit-box;
        }

        .popup-content .service-name .info-service {
            flex: 1;
            overflow: hidden;
            display: flex;
            max-height: var(--px-68);
            padding: var(--px-4) var(--px-24);
        }

            .popup-content .service-name .info-service .serv-name {
                flex: 1;
            }

.show-on-phone.expandPlace:not(.expand) .fa-arrows-to-dotted-line,
.show-on-phone.expandPlace.expand .fa-arrows-from-dotted-line {
    display: none;
}

.selectCountry {
    width: 500px !important;
}

.selectDefaultCountry {
    width: 500px !important;
}

.selectCountry_span {
    color: white;
    font-weight: bold;
}

#overlay {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

.is-hide {
    display: none;
}

.language-selection {
    width: max-content !important;
}

    .language-selection .btn-info {
        background-color: var(--bg-light);
        color: var(--txt-light);
        border-color: var(--bs-gray-700);
        border-radius: 6px;
        height: var(--px-48);
        border: 2px solid var(--bs-gray-600);
        min-width: var(--px-44);
    }

#append-header-lobby-id timer {
    display: flex;
    gap: var(--px-6);
    align-items: center;
    width: var(--px-120);
    font: italic normal 500 var(--s-15);
}

    #append-header-lobby-id timer i {
        color: var(--bs-yellow);
    }

.tap-to-zoom {
    color: white;
    display: flex;
    gap: var(--px-8);
    align-items: center;
    font: normal normal 500 var(--s-12);
}

h3.outlet-name {
    color: WHITE;
    text-align: center;
    margin: var(--px-26) 0;
}

.img-service.noImage {
    height: var(--px-80);
    border-radius: 100%;
    width: var(--px-80);
}

#modalListOrder .box-order dur {
    color: var(--bs-gray-600);
    font: normal normal 400 var(--s-12);
}

    #modalListOrder .box-order dur i {
        color: var(--bs-gray-600);
    }

    #modalListOrder .box-order dur.count-down {
        color: var(--bs-main);
    }

    #modalListOrder .box-order dur.count-up {
        color: var(--bs-cyan);
    }

#icon-logo-refresh {
    margin-top: -30px;
    margin-right: -60px;
    cursor: pointer;
}

img:not(#zoomableImage) {
    pointer-events: none;
}

textarea {
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
}

#append-info-order-guest {
    display: flex;
    visibility: visible !important;
    flex-direction: column;
    grid-gap: var(--px-32);
    background: var(--bs-gradient);
    padding: var(--px-16) var(--px-16) 0;
}

    #append-info-order-guest.update-table {
        margin-top: var(--px-24);
        padding: var(--px-16) var(--px-16) 0;
    }

.open-note-item {
    z-index: 20;
    gap: 1px;
    pointer-events: all;
    height: var(--px-18);
    min-width: var(--px-24);
    max-width: var(--px-24);
    font-size: var( --px-12);
    background: unset;
    color: var( --bs-main);
    pointer-events: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 0;
}

    .open-note-item i {
        font-size: var( --px-10);
        color: var(--bs-gray-500);
    }

footer.footer {
    width: 100%;
    display: flex;
    gap: var(--px-8);
    align-items: center;
    color: var(--txt-light);
    justify-content: center;
    padding: 4px var(--px-12);
    background: transparent;
    position: absolute;
    bottom: 0;
    z-index: 10;
    left: 0;
    height: var(--px-24);
    font: normal normal 500 var(--s-12);
    white-space: nowrap;
}

    footer.footer img {
        height: var(--px-20);
    }

.popup-container textarea {
    flex: 1;
    border: 0;
    border-radius: var(--px-8);
    padding: var(--px-12);
    color: var(--txt-light);
    font: normal normal 500 var(--s-14);
    max-height: var(--px-400);
    min-height: var(--px-120);
    background: var(--black-64);
}

    .popup-container textarea.add-items {
        /* max-width: 50%; */
    }

.popup-content .service-name .adj-qty-item > * {
    display: flex;
}

.suggess-guest {
    width: 100%;
    display: grid;
    grid-gap: var(--px-12);
    grid-template-columns: repeat(5, var(--px-48)) var(--px-88);
}

    .suggess-guest .select-guest-btn {
        display: flex;
        height: var(--px-48);
        min-width: var(--px-48);
        max-width: var(--px-48);
        align-items: center;
        justify-content: center;
        border-radius: var(--px-8);
        background: unset;
        border: 1px solid var(--bs-gray-700);
        font: normal normal 600 var(--s-20);
        color: var(--bs-gray-400);
    }

        .suggess-guest .select-guest-btn.active {
            color: var(--bs-main);
            border: 2px solid var(--bs-main);
        }

.adj-qty-item span.dis-qty-selected {
    height: var(--px-40);
    min-width: var(--px-40);
    border-radius: var(--px-28);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-item-menu);
    color: var(--color-selected);
    font-weight: 800;
    background: var(--color-item-menu);
    padding: 2px 6px;
    font-size: var(--px-20);
}

.popup-content .service-name span.dis-qty-selected {
    background: unset;
}

.dropdown.bill-setting {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 100%;
    /* padding: var(--px-8); */
    font-size: var(--px-28);
    color: var(--bs-gray-600);
    max-width: var(--px-48);
}

.dropdown-menu.bill.show {
    width: var(--px-260);
}

button.setting,
button.star {
    width: 95%;
    border: none;
    display: flex;
    align-items: center;
    height: var(--px-50);
    font: normal normal 400 var(--s-16);
    justify-content: flex-start;
    border-radius: 0 var(--px-20) var(--px-20) 0;
    border-left: 4px solid transparent;
    text-align: start;
}

    button.setting:hover,
    button.star:hover {
        color: var(--bg-solid);
        background: var(--bs-main-100);
        border-left: 3px solid var(--bs-main);
    }

.table {
    color: var(--txt-light);
    font: normal normal 400 var(--s-16);
}

    .table > :not(caption) > * > * {
        vertical-align: middle;
        padding: var(--px-12) var(--px-24);
        background-color: var(--bg-light);
        border-bottom-width: 1px;
        box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    }

    .table .min-w-200 {
        min-width: var(--px-200);
    }

strong.dropdown-toggle {
    cursor: pointer;
}

    strong.dropdown-toggle:hover {
        opacity: .4;
    }

.table th[scope="col"] {
    white-space: nowrap;
}

.select-guest-or-staff {
    display: flex;
    gap: var(--px-32);
    flex-direction: column;
    font: normal normal 700 var(--s-24);
    min-width: var(--px-500);
    /* height: var(--px-400); */
    max-height: var(--px-600);
    padding: var(--px-24);
    color: var(--txt-light);
    justify-content: space-between;
    box-shadow: var(--shadow-qs-solid);
}

    .select-guest-or-staff .header-g-s {
        display: flex;
        gap: var(--px-6);
        flex-direction: column;
    }

        .select-guest-or-staff .header-g-s span {
            color: var(--bs-gray-600);
            font: normal normal 400 var(--s-16);
        }

    .select-guest-or-staff .group-g-s {
        flex: 1;
        width: 100%;
        display: flex;
        gap: var(--px-12);
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .select-guest-or-staff .select-g-s {
        flex: 1;
        margin: auto;
        height: var(--px-200);
        background: #1212129e;
        border: 2px solid var(--bs-gray-700);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font: normal normal 500 var(--s-22);
        justify-content: center;
        gap: var(--px-24);
        min-width: var(--px-200);
    }

        .select-guest-or-staff .select-g-s i.fa-user {
            color: var(--bs-green);
        }

.select-items-popup {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    padding: var(--px-8) var(--px-12);
    background: var(--backgroud-item-menu);
    justify-content: flex-end;
}

    .select-items-popup button {
        color: white;
    }

button.close-popover-ct {
    position: absolute;
    right: var(--px-24);
    min-width: var(--px-40);
    border: unset;
    border-radius: 100%;
    background: var(--bs-gray-800);
    color: var(--txt-light);
    max-height: var(--px-40);
    width: var(--px-40);
}

    button.close-popover-ct i {
        color: white;
    }

.position-bottom-left {
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
}

body[templatemenu="0"] .popup-content .position-bottom-left {
    position: absolute;
    left: var(--px-20);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--px-12);
    bottom: 0px;
}

body[templatemenu="0"] .popup-content .position-bottom-left {
    bottom: var(--px-12);
}

.popup-content .info-service .w-100 {
    width: auto !important;
}

.info-service .serv-name {
    flex: 1;
    color: var(--color-item-menu);
    text-transform: capitalize;
}

    .info-service .serv-name .service-showName {
        text-transform: capitalize;
    }

    .info-service .serv-name.setting {
        width: 80%;
    }

#loadingButton {
    display: none;
    position: absolute;
    top: var(--px-90);
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    transition: top 0.3s ease;
}

    #loadingButton i {
        font-size: var(--px-32);
    }

.badge-wrapper {
    position: relative;
}

.select-notification {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    font: normal normal 700 var(--s-24);
    min-width: var(--px-500);
    height: var(--px-400);
    padding: var(--px-24);
    color: var(--txt-light);
    box-shadow: var(--shadow-qs-solid);
}

.badge {
    position: absolute;
    top: -8px;
    right: -11px;
    background: var(--bs-red);
    border-radius: 100%;
    height: var(--px-20);
    width: var(--px-20);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

.notification-list-item {
    padding: 5px 25px;
    border-bottom: 1px solid #e3e3e3;
    cursor: pointer;
}

    .notification-list-item .item-footer {
        display: flex;
        justify-content: space-between;
    }

    .notification-list-item .item-footer2 {
        display: flex;
        justify-content: space-between;
    }

        .notification-list-item .item-footer2 p {
            /* max-width: 80%; */
        }

    .notification-list-item .item-footer .from {
        color: var(--bs-main);
        max-width: 70%;
    }

    .notification-list-item .item-footer .date {
        font-size: 15px;
        font-weight: 400;
    }

    .notification-list-item .message {
        font-size: 15px;
        font-weight: 400;
    }

.group-btn-switch-setting {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    width: max-content;
    border-radius: var(--px-12);
    background: var(--bs-gray-900);
    justify-content: flex-start;
}

    .group-btn-switch-setting button {
        border: 0 !important;
        justify-content: center;
        opacity: .6;
        height: var(--px-40);
        min-width: var(--px-200);
    }

    .group-btn-switch-setting.change-guestno {
        width: 100%;
        border-radius: 0;
        position: relative;
        background: unset;
        left: calc(-1* var(--px-8));
        /* background: #000000a6; */
        /* width: calc(100% + var(--px-8)); */
        min-height: var(--px-48);
        overflow: auto hidden;
    }

    .group-btn-switch-setting button.active {
        opacity: 1;
        background: unset;
        border-radius: 0;
    }

        .group-btn-switch-setting button.active::after {
            position: absolute;
            content: '';
            bottom: -2px;
            height: 4px;
            width: 80%;
            left: 50%;
            border-radius: 100%;
            background: var(--bs-main);
            transform: translateX(-50%);
        }

    .group-btn-switch-setting button:hover {
        background: unset;
        border-radius: 0;
        opacity: 1;
        color: white;
    }

        .group-btn-switch-setting button:hover span {
            color: var(--txt-light);
        }

button.dropdown-toggle {
    border: 1px solid var(--bs-gray-800);
    color: var(--txt-light);
    display: flex;
    gap: var(--px-8);
    padding: 0 var(--px-16);
    align-items: center;
    font: normal normal 500 var(--s-14);
    background: var(--bg-light);
}

.dropdown-menu .drop-btn {
    border: 0;
    border-radius: 0;
    color: var(--txt-light);
    display: flex;
    gap: var(--px-12);
    padding: 0 var(--px-16);
    align-items: center;
    min-width: max-content;
    font: normal normal 500 var(--s-14);
}

.pos-top-right {
    top: calc((var(--px-68) / 2) - (var(--px-48) / 2));
    right: var(--px-12);
    position: absolute;
}

.dropdown-menu-cate {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

    .dropdown-menu-cate button {
        color: var(--txt-light) !important;
    }

.other-setting {
    width: 100%;
    height: 100%;
    display: flex;
    grid-column: span 2;
    flex-direction: column;
}

    .other-setting .body-setting-lang {
        display: flex;
        flex-direction: column;
        gap: var(--px-44);
        background: var(--bg-light);
        margin: var(--px-24);
        border-radius: var(--px-16);
        padding: var(--px-24);
    }

    .other-setting .footer-setting-lang {
        display: flex;
        gap: var(--px-24);
        border-radius: var(--px-16);
        padding: var(--px-24);
        justify-content: flex-end;
    }

.select-current-setting-lang {
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
}

.select-more-lang {
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
}

.other-setting span.selectCountry_span {
    font: normal normal 600 var(--s-20);
}

.other-setting #selectDefaultCountry {
    font: normal normal 600 var(--s-20);
}

.other-setting #selectCountry {
}

.other-setting .footer-setting-lang button {
    color: var(--txt-light);
    background: var(--bg-light);
    display: flex;
    align-items: center;
    gap: var(--px-16);
    border-radius: var(--px-24);
    padding: 0 var(--px-24);
    width: var(--px-240);
}

    .other-setting .footer-setting-lang button.btn-clear-trans {
        color: var(--red);
    }

.other-setting .dropdown.bootstrap-select {
}

.other-setting .dropdown-menu.show {
    padding: var(--px-16);
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    min-width: var(--px-500);
    max-width: var(--px-500);
}

.other-setting .bs-actionsbox {
    padding: 0 !important;
    margin: 0 var(--px-8);
    border-radius: var(--px-24);
    background: unset;
    width: -webkit-fill-available;
}

.other-setting .btn-group.btn-group-sm {
    display: flex;
    gap: var(--px-12);
    align-items: center;
}

.other-setting .bs-actionsbox .actions-btn.btn-light {
    border: 0;
    display: flex;
    background: unset;
    align-items: center;
    color: var(--txt-light);
    border-radius: var(--px-24);
    background: var(--bg-light);
}

.other-setting .bootstrap-select .no-results {
    width: calc(100% - var(--px-40));
    background: var(--bg-light);
    border-radius: var(--px-8);
    padding: var(--px-16) var(--px-24);
    color: var(--txt-light);
    white-space: nowrap;
}

.other-setting .bootstrap-select > .dropdown-toggle {
    background: unset !important;
}

.bootstrap-select .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
}

.form-control {
    border: 0;
    height: var(--px-48);
    border-radius: var(--px-24);
    background: var(--bg-light);
    padding: var(--px-16) var(--px-24);
}

    .form-control:focus {
        outline: 0;
        color: var(--txt-light);
        background: var(--bg-light);
        border: 1px solid var(--bs-main);
        box-shadow: unset;
    }

.modal-select-guest {
    z-index: 101;
    display: flex;
    top: calc(var(--px-150) + var(--px-8));
    position: absolute;
    flex-direction: column;
    background: var( --bg-solid);
    left: calc(-1 * var( --px-68));
    border-radius: var( --px-12) 0 0 var(--px-12);
    box-shadow: var( --shadow);
    border: 1px solid var( --bs-gray-700);
    border-right: 0;
    width: var( --px-68);
    overflow: auto;
    max-height: var( --px-500);
    padding: var( --px-16) 0;
}

    .modal-select-guest .btn-select-guest {
        background: unset;
        border-radius: 0;
        justify-content: center;
        color: var(--bs-gray-500);
        min-height: var(--px-48);
        min-width: unset;
        padding: 0;
        font-size: var(--px-16);
    }

        .modal-select-guest .btn-select-guest.title-g {
            background: var(--bs-gradient);
            color: var(--bs-gray-200);
        }

        .modal-select-guest .btn-select-guest.total-g {
            position: sticky;
            flex-direction: row-reverse;
            justify-content: center;
            top: 0;
            z-index: 1;
            background: var(--bg-solid);
        }

        .modal-select-guest .btn-select-guest.add-guest {
            z-index: 1;
            bottom: 0;
            position: sticky;
            flex-direction: row;
            margin: 0 var(--px-8);
            color: var(--bs-main);
            justify-content: flex-start;
            background: var(--bg-solid);
            border-top: 1px solid var(--bs-gray-700);
        }

        .modal-select-guest .btn-select-guest.active {
            color: var(--bs-white);
            position: relative;
            background: var(--bs-gray-900);
        }

            .modal-select-guest .btn-select-guest.active::after {
                content: '';
                position: absolute;
                height: 80%;
                width: 4px;
                left: 0px;
                border-radius: 0 4px 4px 0;
                background: var(--bs-main);
            }

        .modal-select-guest .btn-select-guest:not(.total-g) i {
            font-size: var(--px-16);
            color: var(--bs-main);
        }

        .modal-select-guest .btn-select-guest i.fa-trash-can {
            cursor: pointer;
            width: var(--px-40);
            height: var(--px-40);
            border-radius: var(--px-8);
            background: unset;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--bs-gray-600);
        }

            .modal-select-guest .btn-select-guest i.fa-trash-can:hover {
                background: var(--bs-main);
                color: var(--bs-white);
            }

#append-info-table-header .row-header strong.btn-update-table-info {
    border: 2px solid var(--bs-gray-600);
    min-width: var(--px-40);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: var(--px-40);
    max-height: var(--px-40);
    position: relative;
    width: auto;
    padding: 0 var(--px-8);
    border-radius: 6px;
}

    #append-info-table-header .row-header strong.btn-update-table-info i {
        position: absolute;
        width: var(--px-20);
        height: var(--px-20);
        border-radius: var(--px-20);
        right: calc(var(--px-12)* -1);
        bottom: calc(var(--px-8)* -1);
        outline: 5px solid var(--bg-light);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-gray-800);
        font-size: var(--px-12);
        color: var(--txt-light);
    }

.info-bill-summary {
    width: 100%;
    margin: 0;
    display: grid;
    position: relative;
    gap: var(--px-4);
    grid-template-columns: 1fr;
    grid-gap: var(--px-8);
    padding: 0 0 var(--px-12);
    flex: 1;
    max-height: max-content;
}

p#rule-cart {
    color: var(--bs-gray-500);
    font: italic normal 400 var(--s-11);
    white-space: nowrap;
}

.collapse-info-bill {
    background: unset;
    color: var(--bs-main);
    margin: auto;
}

.add-guest-note.update-table {
    gap: var(--px-24);
}

.add-guest-note .table-area {
    padding: var(--px-12);
    background: var(--bg-solid);
    border-radius: var(--px-16);
}

    .add-guest-note .table-area button {
        /* background: unset; */
        /* opacity: .5; */
    }

        .add-guest-note .table-area button.active {
            /* opacity: 1; */
            /* color: var(--bs-white); */
            /* border-color: var(--bs-main); */
        }

.add-guest-note .place-order-table {
    max-width: var(--px-500);
    justify-content: start;
    min-height: var(--px-200);
    max-height: var(--px-200);
    overflow: auto hidden;
}

.add-guest-note label {
    font: normal normal 500 var(--s-20);
}

.add-guest-note .order-table.change-table {
    background: var(--bs-gray-900);
    border: 2px solid transparent;
    cursor: pointer;
}

    .add-guest-note .order-table.change-table:hover {
        border: 2px solid var(--bs-main)
    }

    .add-guest-note .order-table.change-table.active {
        border: 2px solid var(--bs-main);
    }

.setting-content-append {
    display: flex;
    overflow: auto;
    gap: var(--px-24);
    flex-direction: column;
    padding: var(--px-24);
    grid-column: span 2;
    width: 100vw;
}

.setting-group {
    width: 70%;
    margin: auto;
    display: grid;
    grid-gap: var(--px-16);
    grid-template-columns: repeat(2, 1fr);
}

    .setting-group .title-group {
        color: var(--txt-light);
        grid-column: span 3;
        font: normal normal 600 var(--s-24);
    }

    .setting-group .box--setting {
        cursor: pointer;
        display: flex;
        gap: var(--px-12);
        min-height: var(--px-160);
        flex-direction: column;
        padding: var(--px-24);
        border-radius: var(--px-8);
        justify-content: flex-start;
        background: var(--bs-surface-2-bg);
        border: 1px solid var(--bs-gray-800);
    }

        .setting-group .box--setting:hover {
            opacity: 0.6;
        }

        .setting-group .box--setting i {
            flex: 1;
            font-size: var(--px-24);
            color: var(--bs-main);
        }

            .setting-group .box--setting i.fa-chart-line {
                color: var(--bs-cyan);
            }

            .setting-group .box--setting i.fa-ticket {
                color: var(--bs-main-300);
            }

        .setting-group .box--setting p {
            color: var(--txt-light);
            font: normal normal 600 var(--s-20);
        }

        .setting-group .box--setting span {
            flex: 1;
            color: var(--bs-gray-600);
            font: normal normal 400 var(--s-14);
        }

.header-setting-page-config {
    display: flex;
    gap: var(--px-20);
}

    .header-setting-page-config .back-main-setting {
        padding: 0;
        min-width: unset;
        width: var(--px-48);
        background: unset;
        font-size: var(--px-20);
        border: 1px solid var(--bs-gray-800);
        margin-top: var(--px-4);
        border-radius: var(--px-48);
    }

    .header-setting-page-config .title-and-desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        gap: 2px;
    }

        .header-setting-page-config .title-and-desc[tab="menu"] {
        }

        .header-setting-page-config .title-and-desc span {
            color: var(--bs-gray-600);
        }

.print-qrcode-page {
    width: 100%;
    display: flex;
    gap: var(--px-24);
    grid-column: span 2;
    padding: var(--px-24);
    flex-direction: column;
    overflow: hidden;
}

    .print-qrcode-page .table-area {
        width: 100%;
        /* background: var(--bg-light); */
        padding: var(--px-8);
        border-radius: var(--px-16);
    }

.table-map-qrcode-generate {
    flex: 1;
    height: 100%;
    display: flex;
    gap: var(--px-50);
    padding: var(--px-24) var(--px-16);
    justify-items: center;
    overflow: auto;
    align-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

    .table-map-qrcode-generate .box--table {
    }

    .table-map-qrcode-generate .box--table {
        display: flex;
        flex-direction: column;
        color: var(--txt-light);
        position: relative;
        height: var(--px-160);
        width: var(--px-160);
    }

        .table-map-qrcode-generate .box--table.map-position {
            height: calc(var(--px-100) * var(--table-zoom) / 10);
            width: calc(var(--px-140) * var(--table-zoom) / 10);
            position: absolute;
        }

        .table-map-qrcode-generate .box--table circle {
            left: 50%;
            z-index: 1;
            position: absolute;
            font-size: calc(var(--px-32) * var(--table-zoom) / 10);
            top: calc(-1 * var(--px-16) * var(--table-zoom) / 10);
            transform: translateX(-50%);
            color: #ffffff9e;
            border-radius: 100%;
        }

            .table-map-qrcode-generate .box--table circle.chair-2 {
                left: unset;
                right: calc(-1 * var(--px-16) * var(--table-zoom) / 10);
                top: 50%;
                transform: translateY(-50%);
            }

            .table-map-qrcode-generate .box--table circle.chair-3 {
                top: unset;
                bottom: calc(-1 * var(--px-16) * var(--table-zoom) / 10);
            }

            .table-map-qrcode-generate .box--table circle.chair-4 {
                right: unset;
                left: calc(-1 * var(--px-16) * var(--table-zoom) / 10);
                top: 50%;
                transform: translateY(-50%);
            }

        .table-map-qrcode-generate .box--table .table-detail {
            z-index: 2;
            height: 100%;
            display: flex;
            gap: var(--px-6);
            flex-direction: column;
            backdrop-filter: blur(4px);
            background: #ffffff3d;
            border-radius: var(--px-12);
            border-left-color: var(--bs-main-400);
            border-width: 0 0 0 4px;
            border-style: solid;
            padding: var(--px-10);
            align-items: center;
            justify-content: center;
        }

        .table-map-qrcode-generate .box--table.map-position .table-detail {
            align-items: center;
            justify-content: center;
            pointer-events: none;
            border-radius: var(--px-8);
        }

            .table-map-qrcode-generate .box--table.map-position .table-detail .name-table {
                font-size: var(--px-13);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                color: var(--bs-body-bg);
                font-weight: 800;
            }

    .table-map-qrcode-generate span.table-code {
        height: var(--px-36);
        min-width: var(--px-36);
        color: var( --bs-main-500);
        text-transform: uppercase;
        font: normal normal 700 var( --s-16);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-gray-dark);
        border-radius: 6px;
    }

    .table-map-qrcode-generate .print-qrcode-table {
        height: var(--px-32);
        color: var(--txt-light);
        font-weight: 600;
        justify-content: space-between;
        flex-direction: row-reverse;
        min-width: unset;
        background: unset;
    }

        .table-map-qrcode-generate .print-qrcode-table .fa-qrcode {
            font-size: var(--px-18);
            color: var(--bs-teal);
            display: none;
        }

.scan-qr-code-detail {
    display: flex;
    text-align: center;
    gap: var(--px-36);
    width: var(--px-500);
    flex-direction: column;
    padding: var(--px-24);
}

    .scan-qr-code-detail .illutration-qr {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        margin: auto;
    }

        .scan-qr-code-detail .illutration-qr img {
            width: var(--px-140);
            height: var(--px-140);
        }

    .scan-qr-code-detail .title-scan {
        color: var(--txt-light);
        font: normal normal 600 var(--s-28)
    }

        .scan-qr-code-detail .title-scan span {
            color: var(--bs-gray-600);
            font: normal normal 500 var(--s-20);
        }

    .scan-qr-code-detail #qr-code-portal-link {
        display: flex;
        margin: auto;
        background: var(--bs-white);
        padding: var(--px-24) 0;
        border: 1px solid var(--bs-gray-800);
        border-radius: var(--px-24);
        align-items: center;
        justify-content: center;
    }

    .scan-qr-code-detail .view-qrcode-table {
        justify-content: space-between;
    }

.container-append-service {
    height: 100%;
    display: flex;
    overflow: hidden;
    background-image: url(/Images/black-backgr.jpg);
    background-size: cover;
}

.chkbx-setting-desc {
    display: flex;
    gap: var(--px-4);
    flex-direction: column;
    text-align: start;
}

    .chkbx-setting-desc span {
        color: var(--bs-gray-600);
        font: italic normal 500 var(--s-14);
    }

.modal-body div.option.select-radio {
    gap: var(--px-12);
    height: auto;
    margin: var(--px-8) 0;
}

.info-basic-table {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}

.area-print-and-lobby {
    display: flex;
    gap: var(--px-12);
    align-items: center;
}

#combo-data-table td .productList {
    display: flex;
    gap: var(--px-8);
    flex-wrap: wrap;
}

    #combo-data-table td .productList .badge {
        position: relative !important;
        background-color: var(--bg-light);
        padding: var(--px-8);
        color: var(--txt-light);
        font: normal normal 500 var(--s-14);
    }

#comboDetails .saveButton {
    background: var(--green);
}

#combo-data-table .select2-container {
    width: 100% !important;
}

#combo-data-table .select2-selection {
    width: 100% !important;
}

#combo-data-table .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-light);
    color: #ffffff;
    padding: var(--px-12);
    border: 0;
}

    #combo-data-table .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--bs-main-900);
        padding: var(--px-8);
        color: var(--bs-main-200);
        font: normal normal 500 var(--s-14);
        overflow: inherit;
        border: 0;
        width: 96%;
    }

    #combo-data-table .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        position: absolute;
        height: var(--px-24);
        width: var(--px-24);
        border-radius: var(--px-24);
        top: -12px;
        right: -12px;
        z-index: 4;
        min-width: var(--px-28);
        left: unset;
        color: var(--bs-white);
        background: var(--bs-gray-700);
        border: 0;
        font-size: var(--px-20);
        outline: 4px solid var(--bg-light);
        font-weight: 200;
    }

#combo-data-table .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #ee6119;
    color: #ffffff;
}

.delete-icon {
    cursor: pointer;
    color: red;
}

.pencil-icon {
    cursor: pointer;
    color: var(--green);
}

.comboModal {
    width: 800px;
}

/* COMBO */
.area-combos-select {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--txt-light);
}

    .area-combos-select .combos-info {
        display: flex;
        align-items: center;
        padding: var(--px-24);
        gap: var(--px-24);
        position: sticky;
        top: 0;
        background: var(--bg-light);
        z-index: 1;
    }


        .area-combos-select .combos-info img {
            height: var(--px-160);
            width: var(--px-160);
            border-radius: var(--px-24);
        }

    .area-combos-select .info-flex {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--px-12);
    }

        .area-combos-select .info-flex .name {
            color: var(--bs-gray-200);
            font: normal normal 700 var(--s-24);
        }

        .area-combos-select .info-flex .desc {
            flex: 1;
            color: var(--bs-gray-600);
        }

        .area-combos-select .info-flex strong {
            font: normal normal 700 var(--s-28);
            color: var(--bs-teal);
        }

    .area-combos-select .combo-details {
        flex: 1;
        display: flex;
        padding: var(--px-24);
        flex-direction: column;
        gap: var(--px-24);
    }

    .area-combos-select .detail-box {
        display: flex;
        gap: var(--px-20);
        padding-bottom: var(--px-24);
        border-bottom: 1px solid var(--bs-gray-700);
        flex-direction: column;
        background: var(--bs-gray-900);
        padding: var(--px-16) var(--px-24);
        border-radius: var(--px-16);
    }

        .area-combos-select .detail-box:last-of-type {
            border-bottom: 0px solid var(--bs-gray-700);
        }

    .area-combos-select .detail-name {
        flex: 1;
        color: var(--bs-gray-200);
        font: normal normal 700 var(--s-20);
    }

    .area-combos-select .detail-quantity {
        color: var(--bs-teal);
        background: #003525;
        padding: 2px var(--px-12);
        border-radius: var(--px-12);
        display: flex;
        align-items: center;
        gap: var(--px-12);
        justify-content: space-between;
        border: 1px solid;
        font: normal normal 400 var(--s-16);
    }

    .area-combos-select .detail-adjust {
        display: flex;
        align-items: center;
        gap: var(--px-12);
    }

    .area-combos-select .adj-combo {
        background: var(--bg-solid);
        max-width: var(--px-32);
        min-width: var(--px-32);
        height: var(--px-32);
        min-height: var(--px-32);
        color: var(--bs-main);
        font-size: var(--px-16);
    }

        .area-combos-select .adj-combo.minus {
            background: unset;
            color: var(--bs-gray-300);
        }

    .area-combos-select .cate-combos {
        display: flex;
        align-items: center;
        gap: var(--px-24);
    }

    .area-combos-select .cb-group-price-add {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.select-range-end-date {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    background: var(--bg-light);
    border-radius: var(--px-8);
    box-shadow: var(--shadow-qs-solid);
    border: 1px solid var(--bs-gray-700);
    padding: var(--px-16);
    min-width: var(--px-360);
}

    .select-range-end-date .tt-d {
        color: var(--txt-light);
        font: normal normal 500 var(--s-20);
    }

    .select-range-end-date .list-duration-date {
        font: normal normal 500 var(--s-14);
        padding: var(--px-8);
        grid-gap: var(--px-24) var(--px-12);
    }

        .select-range-end-date .list-duration-date button {
            font: normal normal 500 var(--s-14);
            color: var(--txt-light);
            height: var(--px-36);
        }

        .select-range-end-date .list-duration-date input {
            background: var(--bs-dark);
        }

        .select-range-end-date .list-duration-date textarea {
            background: var(--bs-dark);
            min-height: var(--px-80);
        }

        .select-range-end-date .list-duration-date button.cancel {
            background: unset;
        }

        .select-range-end-date .list-duration-date button.confirm {
            background: var(--bs-main);
            color: var(--bs-white);
        }

#modalAddMenu div.form-upload-image {
    margin: auto;
    max-width: var(--px-440);
    min-width: -webkit-fill-available;
}

#comboDetails thead, #comboDetails tbody, #comboDetails tfoot, #comboDetails tr, #comboDetails td, #comboDetails th {
    border-color: var(--bs-gray-800);
    background: var(--bs-dark);
    font: normal normal 500 var(--s-16);
}

.manage-combo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-update-combo {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    justify-content: space-between;
}

    .action-update-combo .btn-ud-cb {
        min-width: unset;
        height: var(--px-36);
        color: var(--bs-teal);
        background: #003525;
        pointer-events: none;
    }

        .action-update-combo .btn-ud-cb.delete {
            color: var(--bs-danger);
            background: #310005;
        }

        .action-update-combo .btn-ud-cb i {
            font-weight: 500;
            height: 100%;
            width: 100%;
            pointer-events: all;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    all: unset;
    display: none;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    gap: var(--px-10);
    flex-direction: column;
}

.detail-desc-items {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
}

.cb-product-detail {
    display: grid;
    gap: var(--px-12);
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--px-12);
    border-bottom: 1px dashed var(--bs-gray-700);
    grid-template-columns: 1fr max-content;
}

    .cb-product-detail:last-of-type {
        border-bottom: 0px dashed var(--bs-gray-700);
    }

.qty-cb-select-ov {
    display: flex;
    gap: var(--px-4);
    align-items: center;
}

    .qty-cb-select-ov count {
        position: unset;
    }

.switch-combo-btn-gr {
    width: 100%;
    display: flex;
    gap: var(--px-24);
    align-items: center;
    padding: 0 var(--px-24);
}

.switch-combo-btn {
    padding: 0;
    background: unset;
    color: var(--bs-gray-500);
    justify-content: space-between;
    font: normal normal 600 var(--s-17);
    border-bottom: 3px solid transparent;
}

    .switch-combo-btn.active {
        color: var(--white);
        border-radius: 0;
        border-bottom: 3px solid var(--bs-main);
    }

    .switch-combo-btn p.request-post {
        display: flex;
        align-items: center;
        padding: var(--px-4) var(--px-8);
        border-radius: var(--px-12);
        background: var(--bs-red);
        font: normal normal 500 var(--s-13);
        gap: var(--px-4);
        color: var(--bs-gray-400);
    }

    .switch-combo-btn.accepted p.request-post {
        background: #00a171;
        color: white;
    }

    .switch-combo-btn p.request-post strong {
        color: var(--bs-white);
    }

.cb-product-detail img {
    width: var(--px-44);
    height: var(--px-44);
    border-radius: 100%;
}

.cb-product-detail p {
    text-align: start;
}

.card-item-dur {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#modalListOrder .box-order.item-combo {
    padding-left: var(--px-70);
    min-height: var(--px-32);
    max-height: var(--px-32);
    margin-top: calc(-1 * var(--px-12));
    position: relative;
}

    #modalListOrder .box-order.item-combo::after {
        content: '';
        width: var(--px-24);
        height: var(--px-55);
        position: absolute;
        border-left: 1px solid var(--bs-gray-600);
        border-bottom: 1px solid var(--bs-gray-600);
        border-bottom-left-radius: var(--px-8);
        left: var(--px-36);
        top: calc(-1 * var(--px-36));
        z-index: 0;
    }

    #modalListOrder .box-order.item-combo .card-item-name {
        color: var(--bs-white);
        font: normal normal 400 var(--s-10);
    }

    #modalListOrder .box-order.item-combo .card-item-dur {
        display: flex;
        gap: var(--px-12);
        align-items: center;
        flex-direction: row;
        justify-content: start;
    }

.service-name[iscombo="1"] div.adj-qty-item {
    display: none !important;
}

.logo-hotel.dropdown-toggle {
    min-width: var(--px-44);
    max-height: var(--px-44);
    max-width: var(--px-44);
    min-height: var(--px-44);
    background: var(--bs-gray-dark);
}

button.noti-icon {
    max-width: var(--px-44);
    min-width: var(--px-44);
    border: 1px solid var(--bs-gray-700);
    max-height: var(--px-44);
    background: var(--bs-gray-dark);
    position: relative;
    overflow: unset;
}

.card-item-name {
    display: flex;
    gap: var(--px-4);
    align-items: flex-end;
}

    .card-item-name .wrap-line-1 {
        max-width: calc(100% - var(--px-50));
    }

.qty-display {
    color: var(--bs-green);
    font: normal normal 700 var(--s-14);
}

div.group-btn-pos-fix {
    z-index: 1;
    display: flex;
    top: var(--px-16);
    position: absolute;
    flex-direction: column;
    left: calc(-1* var(--px-60));
    gap: 12px;
}

button.btn-close-popup-pos {
    display: flex;
    flex-direction: column;
    background: var(--bs-gray-800);
    box-shadow: var(--shadow);
    border: 0px solid var(--bs-gray-700);
    border-right: 0;
    width: var(--px-48);
    overflow: hidden;
    max-height: var(--px-52);
    min-width: var(--px-48);
    font-size: var(--px-20);
    height: var(--px-60);
    font-size: var(--px-20);
    border: 1px solid var(--bs-gray-700);
    box-shadow: 0px 0px 15px 5px rgb(165 165 165 / 29%);
}

    button.btn-close-popup-pos.complete {
        background: var(--bs-green);
    }

    button.btn-close-popup-pos.print {
        background: var(--bs-main);
    }

    button.btn-close-popup-pos.reload {
        background: var(--bs-gray-700);
    }

    button.btn-close-popup-pos i {
    }

discount {
    cursor: pointer;
    color: var(--bs-main-500);
    font: normal normal 400 var(--s-13);
    pointer-events: all;
    padding: 2px;
    display: flex;
    align-items: center;
    gap: var(--px-6);
    border-bottom: 1px solid;
}

    discount span {
    }

.card-item-amount {
    flex: 0;
    height: 100%;
    display: flex;
    gap: var(--px-4);
    align-items: center;
    justify-content: center;
}

.grp-btn-popup {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    justify-content: end;
    padding: var(--px-24);
}

button.header-btn {
    height: var(--px-36);
    min-width: var(--px-48);
    border: 2px solid var(--bs-main-400);
    margin-right: var(--px-12);
    border-radius: var(--px-12);
}

.btn-footer-bill-action {
    cursor: pointer;
    color: var(--bs-main);
}

    .btn-footer-bill-action:hover {
        opacity: .5;
    }

#modalListOrder .box-order {
    transition: all 0.33s;
    left: 0;
}

    #modalListOrder .box-order.active-click {
        position: relative;
        border-radius: var(--px-12);
        left: calc(-1 * var(--px-48) * 3);
    }

        #modalListOrder .box-order.active-click .img-ord {
            background: var(--bs-gray-800);
        }

        #modalListOrder .box-order.active-click .card-item-amount {
            background: var(--bs-gray-800);
            padding-right: var(--px-16);
            z-index: 1;
        }

        #modalListOrder .box-order.active-click .btn-status {
            background: var(--bs-gray-800);
            z-index: 1;
            height: 100%;
            display: flex;
            align-items: center;
            border-radius: 0 var(--px-12) var(--px-12) 0;
        }

            #modalListOrder .box-order.active-click .btn-status i.fa-ellipsis-vertical {
                display: none;
            }

.group-btn-action-ord {
    z-index: 0;
    height: 100%;
    display: none;
    position: absolute;
    align-items: center;
    justify-content: end;
    right: calc(-1 * var(--px-60) * 3 + var(--px-16));
    width: calc(var( --px-60) * 3);
    border-radius: 0 var( --px-12) var(--px-12) 0;
}

    .group-btn-action-ord button {
        color: white;
        min-width: var(--px-60) !important;
        max-width: var(--px-60) !important;
        border: 0;
        height: 100% !important;
        border-radius: 0 var( --px-12) var(--px-12) 0 !important;
        left: calc(-1 * var(--px-16)) !important;
        padding-left: var(--px-24);
    }

        .group-btn-action-ord button i {
            color: inherit;
            font-weight: 500;
        }

        .group-btn-action-ord button.delete {
            z-index: 2;
            color: var(--bs-red);
            background: #35060b;
        }

        .group-btn-action-ord button.done-service {
            z-index: 1;
            color: var(--bs-teal);
            left: calc(-2 * var(--px-16)) !important;
            background: #084734;
        }

        .group-btn-action-ord button.edit {
            z-index: 1;
            color: var(--bs-info);
            left: calc(-2* var(--px-16)) !important;
            background: #1c4d57;
        }

        .group-btn-action-ord button.discount {
            z-index: 0;
            color: var(--bs-main-400);
            left: calc(-3 * var(--px-16)) !important;
            background: var(--bs-main-800);
        }

#modalListOrder .box-order.active-click .group-btn-action-ord {
    display: flex;
}

#modalListOrder .box-order.active-click.one-btn {
    left: calc(-1 * var(--px-48) * 1);
}

    #modalListOrder .box-order.active-click.one-btn .group-btn-action-ord {
        right: calc(-1 * var(--px-60) * 1 + var(--px-16));
    }

#modalListOrder .box-order.active-click.two-btn {
    left: calc(-1 * var(--px-48) * 2);
}

    #modalListOrder .box-order.active-click.two-btn .group-btn-action-ord {
        right: calc(-1 * var(--px-60) * 2 + var(--px-16));
    }

        #modalListOrder .box-order.active-click.two-btn .group-btn-action-ord button.discount {
            left: calc(-2* var(--px-16)) !important;
        }

#modalListOrder .box-order.active-click.market-view {
    left: calc(-1 * var(--px-48) * 3);
}

    #modalListOrder .box-order.active-click.market-view.text-warning {
        left: calc(-1 * var(--px-48) * 2);
    }

    #modalListOrder .box-order.active-click.market-view .group-btn-action-ord {
        right: calc(-1 * var(--px-60) * 3 + var(--px-16));
    }

    #modalListOrder .box-order.active-click.market-view.text-warning .group-btn-action-ord {
        right: calc(-1 * var(--px-60) * 2 + var(--px-16));
    }

    #modalListOrder .box-order.active-click.market-view button.market-price {
        left: calc(-3 * var(--px-16)) !important;
        background: var(--bs-cyan);
        z-index: -1;
    }

#modalListOrder .box-order.active-click.one-btn button.discount {
    left: calc(-1* var(--px-16)) !important;
}

.grid-2.btn-status .done-service i {
    color: var(--bs-green);
}

#btn-done-order-confirm {
    background: var(--bs-dark)
}

.keypad-button-delete {
    width: 60px;
    height: 60px;
    margin: 5px;
    font-size: 20px;
}

.keypad-button {
    width: 60px;
    height: 60px;
    margin: 5px;
    font-size: 20px;
}

.modal .close {
    border-radius: 100%;
    width: var(--px-48);
    min-width: var(--px-48);
    font-size: var(--px-20);
}

.header-row-more-option {
    display: flex;
    text-align: start;
    gap: var(--px-8);
    flex-direction: column;
}

.row-more-option {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--px-12);
}

.dis-note-item {
    color: var(--bs-main-200);
    margin: 2px 0;
    font: italic normal 400 var(--s-12);
}

button.min-w-u {
    min-width: unset;
}

.dropdown-menu.show[aria-labelledby="add-item-combo"] {
    width: var(--px-240);
}

.btn-confirm {
    border: 0;
    display: flex;
    align-items: center;
    color: var(--bs-white);
    justify-content: center;
    background: #ee6119;
    border-radius: 6px;
    flex: 1;
}

div.grid-1.btn-status {
    flex: 1;
    max-width: var(--px-60);
    display: grid;
    align-items: center;
    justify-content: space-between;
    color: var(--bs-gray);
    grid-template-columns: 1fr min-content;
}

    div.grid-1.btn-status i {
        grid-column: 2/3;
    }

button.bell-concierge {
    padding: 2px;
    min-width: var(--px-40);
    height: var(--px-40);
    border: 2px solid var(--bs-gray-600);
    border-radius: 6px;
}

.category-list, .subcategory-list {
    max-height: 200px;
    overflow-y: auto;
}

.subcategory-list {
    margin-left: 20px;
}

/* Discount */

.bg-black {
    background: var(--bs-border-color) !important;
}

.bg-black-light {
    border: 1px solid var(--bs-gray-700);
    box-shadow: var(--shadow-qs-solid);
    background-color: var(--bg-light) !important;
}

.modal {
    color: var(--txt-light);
}

    .modal .modal-title {
        color: var(--bs-white);
        font: normal normal 600 var(--s-22);
        padding: var(--px-12) 0;
    }

    .modal .modal-header,
    .modal .modal-footer {
        border: 0;
        padding: var(--px-8) var(--px-16);
    }

    .modal .form-d-amount {
        width: 100%;
        display: flex;
        gap: var(--px-12);
        flex-direction: row;
        align-items: center;
    }

    .modal .show-d-amount {
        width: 100%;
        display: flex;
        gap: var(--px-12);
        align-items: center;
        height: var(--px-48);
        justify-content: flex-start;
        border-bottom: 1px solid var(--bs-gray-700);
    }

        .modal .show-d-amount strong {
            flex: 1;
            max-width: var(--px-44);
            color: var(--bs-gray-600);
            font: normal normal 600 var(--s-20);
        }

        .modal .show-d-amount input {
            width: inherit;
            flex: 1;
            background: inherit;
            border: 0;
            color: var(--bs-main);
            font: normal normal 600 var(--s-28);
            letter-spacing: 2px;
        }

    .modal .clear-amount-discount {
        min-width: 0;
        flex: 1;
        max-width: fit-content;
        height: var(--px-44);
        border-radius: var(--px-44);
        background: inherit;
    }

    .modal .group-btn-dis-switch {
        margin: auto;
        display: flex;
        width: max-content;
        align-items: center;
        height: var(--px-48);
        justify-content: center;
        padding: var(--px-4);
        border-radius: var(--px-8);
        background-color: var(--bs-gray-800);
        border: 1px solid var(--bs-gray-700);
    }

        .modal .group-btn-dis-switch .btn-discount {
            height: 100%;
            padding: 0;
            min-width: var(--px-44);
            max-width: var(--px-44);
            border-radius: var(--px-8);
        }

            .modal .group-btn-dis-switch .btn-discount svg {
                width: var(--px-24);
                height: var(--px-24);
                fill: var(--bs-gray-500);
            }

        .modal .group-btn-dis-switch .btn-split-payment {
            height: 100%;
            padding: 0;
            min-width: var(--px-88);
            border-radius: var(--px-8);
            display: flex;
            align-items: center;
            gap: var(--px-12);
            color: var(--txt-light);
            font: normal normal 500 var( --s-14);
        }

            .modal .group-btn-dis-switch .btn-split-payment i {
                font-size: var(--px-20);
            }

            .modal .group-btn-dis-switch .btn-split-payment.active {
                color: var(--bs-white);
                background: var(--bs-main);
            }

    .modal .show-curr-price {
        font: normal normal 500 var(--s-16);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--bs-gray-200);
        padding: var(--px-12) 0;
    }

        .modal .show-curr-price strong {
            color: var(--bs-teal);
        }

    .modal .form-keypad-append {
        width: 100%;
        display: grid;
        color: var(--txt-light);
        grid-template-rows: repeat(4, var(--px-80));
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        grid-gap: 0;
        border-radius: var(--px-12);
        overflow: hidden;
        border: 1px solid var(--bs-gray-800);
        padding: var(--px-12);
        background: var(--bs-gray-800);
    }

        .modal .form-keypad-append button.keypad {
            margin: 0;
            border: 0;
            padding: 0;
            background: inherit;
            font-size: var(--px-30);
            color: var(--txt-light);
            height: 100%;
            min-width: unset;
            width: auto;
            border-radius: 0;
            border-left: 1px solid var(--bs-gray-700);
            border-bottom: 1px solid var(--bs-gray-700);
        }

            .modal .form-keypad-append button.keypad:nth-child(1),
            .modal .form-keypad-append button.keypad:nth-child(4),
            .modal .form-keypad-append button.keypad:nth-child(7),
            .modal .form-keypad-append button.keypad:nth-child(10) {
                border-left: unset;
            }

            .modal .form-keypad-append button.keypad:nth-child(10),
            .modal .form-keypad-append button.keypad:nth-child(11),
            .modal .form-keypad-append button.keypad:nth-child(12) {
                border-bottom: unset;
            }

        .modal .form-keypad-append button.keypad-button-delete {
        }

    .modal .btn-discount.discountSelected {
        color: white;
        background-color: var(--bs-main);
    }

        .modal .btn-discount.discountSelected svg {
            fill: white;
        }

.mw-400 {
    max-width: var(--px-400);
}

/* Payment */
.modal-form-payment-all {
    z-index: -1;
    display: flex;
    top: 0;
    position: absolute;
    flex-direction: row;
    background: var(--bs-dark);
    left: 100%;
    border-radius: var(--px-12) 0 0 var(--px-12);
    box-shadow: var(--shadow);
    border: 1px solid var(--bs-gray-700);
    border-right: 0;
    width: var(--px-440);
    overflow: auto;
    height: 100%;
    color: var(--txt-light);
    padding: var(--px-8) var(--px-20) 0;
    transition: left .4s;
}

.select-payment-method {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    padding: var(--px-8) 0px var(--px-20);
    overflow: hidden;
    z-index: 0;
    width: 100%;
    flex: 1;
}

.header-pay {
    width: 100%;
    display: flex;
    align-items: center;
    height: var(--px-36);
    color: var(--bs-gray-200);
    font: normal normal 500 var(--s-16);
    justify-content: space-between;
}

    .header-pay p {
        margin: 0;
    }

.list-method-pay {
    display: flex;
    gap: var(--px-12);
    justify-content: flex-start;
    overflow: auto hidden;
    align-items: center;
    position: relative;
    min-height: var(--px-60);
}

.box-select-method {
    display: flex;
    cursor: pointer;
    gap: var(--px-12);
    align-items: center;
    min-width: var(--px-140);
    padding: var(--px-10);
    min-height: var(--px-80);
    flex-direction: column;
    justify-content: center;
    border-radius: var(--px-6);
    border: 1px solid var(--bs-gray-700);
    background: var(--bs-gray-800);
}

    .box-select-method i {
        font-size: var(--px-16);
    }

        .box-select-method i.fa-paper-plane {
            color: var(--bs-warning);
        }

        .box-select-method i.fa-money-bill {
            color: var(--bs-teal);
        }

        .box-select-method i.fa-credit-card {
            color: var(--bs-info);
        }

        .box-select-method i.fa-file-half-dashed {
            color: var(--bs-main);
        }

    .box-select-method span {
        white-space: nowrap;
        font: normal normal 400 var(--s-16);
    }

    .box-select-method.active {
    }

    .box-select-method img {
        height: var(--px-24);
    }

.split-payment-method {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

    .split-payment-method .header-pay {
        display: flex;
        gap: var(--px-4);
        align-items: center;
    }

button.back-form {
    min-width: var(--px-32);
    height: var(--px-32);
    padding: var(--px-12);
    border-radius: var(--px-8);
    background: inherit;
    font-size: var(--px-20);
}

.list-per-row {
    flex: 1;
    display: flex;
    overflow: auto;
    gap: var(--px-8);
    flex-direction: column;
    margin-top: var(--px-12);
}

.per-payment-row {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    border: 1px solid var(--bs-gray-700);
    padding: var(--px-2) var(--px-16);
    border-radius: var(--px-8);
    cursor: pointer;
    min-height: var(--px-60);
    padding-right: 4px;
}

.per-payment-row {
}

    .per-payment-row span {
        flex: 1;
        font: normal normal 400 var(--s-14);
    }

    .per-payment-row strong {
        font: normal normal 600 var(--s-16);
        color: var(--bs-teal);
    }

    .per-payment-row .col-one {
        font-size: var(--s-24);
    }

.delete-payment {
    background: inherit;
    min-width: unset;
}

.split-payment-method .add-more-payment {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    border: 1px solid var(--bs-gray-700);
    padding: var(--px-8) var(--px-16);
    border-radius: var(--px-8);
    cursor: pointer;
    background: unset;
    margin: var(--px-16);
    justify-content: start;
    color: var(--bs-main-400);
}

.modal.open-payment .modal-select-guest {
    top: var(--px-80);
    left: calc(-1 * (var(--px-68) + var(--px-500)));
}

.add-amount-payment-form {
    display: flex;
    flex-direction: column;
}

#modalListOrder.open-payment .modal-form-payment-all {
    left: calc(-1* var(--px-440));
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.modal.open-payment .btn-close-popup-pos {
    left: calc(-1 * (var(--px-40) + var(--px-460)));
}

    .modal:not(.open-payment) .btn-close-popup-pos .fa-arrow-right,
    .modal:not(.open-payment) .btn-close-popup-pos .collapse-btn,
    #modalListOrder.open-payment .btn-close-popup-pos .close-btn,
    #modalListOrder.open-payment #append-footer-id .select-payment-method,
    #modalListOrder.open-payment #append-footer-id .btn-close-bill-split,
    .modal.open-payment .btn-close-popup-pos .fa-xmark {
        display: none !important;
    }

#modalListOrder .info-amount.cash-payment {
    color: var(--bs-main-300);
    padding-top: 4px;
    border-top: 1px solid var(--bs-gray-700);
}

#invoiceModal .modal-dialog {
    max-width: var(--px-600) !important;
    margin: auto;
    overflow: hidden;
    height: 100vh;
    max-height: 100vh;
}

table.invoice {
    background: white;
    width: 100%;
}

    table.invoice table {
        width: 100%;
        border-collapse: collapse;
    }

    table.invoice .num {
        font-weight: 400;
    }

    table.invoice .order-num {
        font-weight: 500;
    }

    table.invoice tr, table.invoice td {
        background: white;
        text-align: left;
        font-weight: 400;
        color: black;
        padding: 2px;
    }

        table.invoice tr.header td img {
            max-width: 300px;
        }

        table.invoice tr.header td h2 {
            text-align: right;
            font-weight: 200;
            font-size: 2rem;
            color: var(--bs-main);
        }

        table.invoice tr.intro td:nth-child(2) {
            text-align: right;
        }

        table.invoice tr.details > td {
            /*padding-top: 4rem;*/
            padding-bottom: 0;
        }

        table.invoice tr.details td.id, table.invoice tr.details th.id, table.invoice tr.details td.qty, table.invoice tr.details th.qty {
            text-align: center;
        }

        table.invoice tr.details td:last-child, table.invoice tr.details th:last-child {
            text-align: right;
        }

        table.invoice tr.details table thead, table.invoice tr.details table tbody {
            position: relative;
        }

        table.invoice tr.totals td {
            padding-top: 0;
        }

        table.invoice tr.totals table tr td {
            padding-top: 0;
            padding-bottom: 0;
        }

            table.invoice tr.totals table tr td:nth-child(1) {
                font-weight: 500;
            }

            table.invoice tr.totals table tr td:nth-child(2) {
                text-align: right;
                font-weight: 200;
            }

        table.invoice tr.totals table tr:nth-last-child(2) td {
        }

            table.invoice tr.totals table tr:nth-last-child(2) td:last-child {
                position: relative;
            }

                table.invoice tr.totals table tr:nth-last-child(2) td:last-child:after {
                    content: '';
                    height: 4px;
                    width: 110%;
                    position: relative;
                    right: 0;
                    bottom: -0.575rem;
                    display: block;
                }

        table.invoice tr.totals table tr.total td {
            font-size: 1.2em;
            font-weight: 600;
        }

            table.invoice tr.totals table tr.total td:last-child {
                font-weight: 700;
            }

.additional-info {
    background-color: white;
    padding: 10px;
}

    .additional-info h5 {
        font-size: 0.8em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: black;
        margin-top: 20px;
    }

.keypad-payment-form {
    flex: 1;
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    padding: var(--px-16);
}

#btn-send-order-confirm, #btn-done-order-confirm {
    min-width: var(--px-48);
    max-width: var(--px-60);
    font-size: var(--px-20);
    padding: 0;
    background: unset;
    color: var(--bs-main);
    border: 2px solid var(--bs-gray-600);
}

#btn-confirm-add-mount {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    padding: var(--px-8) var(--px-16);
    border-radius: var(--px-8);
    cursor: pointer;
    background: unset;
    justify-content: start;
    color: var(--bs-main-400);
    border: 1px solid var(--bs-gray-700);
    flex-direction: row-reverse;
}

    #btn-confirm-add-mount i {
        margin-left: auto;
    }

.form-append-footer {
    flex: 1;
    gap: var(--px-12);
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* background: var(--bs-gray-900); */
    /* padding: var(--px-12); */
    /* border-radius: var(--px-12); */
    );
}

    .form-append-footer .ff-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--bs-gray-200);
        font: normal normal 500 var(--s-16);
    }

        .form-append-footer .ff-header button {
            background: unset;
            height: var(--px-24);
            min-width: 0;
            width: auto;
            padding: 0;
            color: var(--bs-main);
        }

    .form-append-footer .list-append-footer-track {
        gap: var(--px-12);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: center;
        overflow: auto;
        text-align: start;
        align-items: end;
    }

    .form-append-footer .footer-row {
        cursor: pointer;
        display: flex;
        border-radius: var(--px-6);
        padding: var(--px-8);
        align-items: center;
        border: 1px solid var(--bs-gray-800);
        background: var(--bs-gray-800);
        justify-content: center;
        min-height: var(--px-60);
        max-height: var(--px-60);
        flex-direction: column-reverse;
        gap: 4px;
    }

        .form-append-footer .footer-row:hover {
            color: var(--bs-white);
            background: var(--bs-main);
        }

        .form-append-footer .footer-row span {
            font: normal normal 400 var(--s-13);
        }

        .form-append-footer .footer-row img {
            height: var(--px-16);
        }

.close-form-footer {
    min-width: 0;
    flex: 1;
    max-width: var(--px-40);
    height: var(--px-40);
    border-radius: var(--px-40);
    background: inherit;
}

.box-select-method.active {
    /*border: 1px solid var(--bs-main);*/
}

.invoice-print table.invoice td.full-width-center {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.invoice-print table.invoice td.full-width-left {
    width: 100%;
    text-align: left;
    vertical-align: middle;
}

    .invoice-print table.invoice td.full-width-left .num {
        white-space: break-spaces;
    }

#invoice-img {
    width: var(--px-80);
    height: var(--px-80);
    border-radius: var(--px-80);
}

.thank-you {
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 10px;
    font-size: 12px;
}

.payment-invoices {
    font-size: 12px;
    font-weight: bold
}

@media print {
    @page {
        size: auto;
        margin: 0mm;
    }

    header, footer {
        display: none;
    }

    .thank-you {
        font-size: 0.6rem !important;
        font-weight: 300 !important;
        text-align: center !important;
        padding-top: 10px !important;
        ;
    }

    .payment-invoices {
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    td.full-width-center {
        width: 100% !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    #invoice-print {
        width: 100%;
        page-break-inside: avoid;
        background-color: red;
        margin: auto;
    }

    table.invoice .num {
        font-size: 0.6em;
    }

    table.invoice tr.header td h2 {
        font-size: 0.8rem;
    }

    table.invoice tr.totals table tr.total td {
        font-size: 0.8em;
    }

    table.invoice tr.totals table tr.total tr.subtotal {
        margin-bottom: 10px;
    }

    table.invoice tr.totals table tr.total tr.fee {
        margin-bottom: 10px;
    }

    #invoice-img {
        width: var(--px-50);
        height: var(--px-50);
    }

    table.invoice td {
        font-size: 0.8rem;
    }
}

/* Start Custom for bill */
.thank-you {
    font-weight: 400 !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    color: #363636 !important;
    font-style: italic;
}

.payment-invoices {
    font-size: 8px !important;
    font-weight: 600 !important;
    text-align: center !important;
}

table.invoice td.full-width-center {
    width: 100% !important;
    text-align: center !important;
    vertical-align: middle !important;
}

#invoice-print {
    margin: auto;
    --bs-gutter-x: 0;
    max-width: 250px;
    page-break-inside: avoid;
}

table.invoice th.price {
    text-align: center;
}

table.invoice th {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px;
    font-weight: 700;
}

table.invoice .num {
    font-size: 10px;
    white-space: pre;
}

table.invoice tr.header td h2 {
    font-size: 0.8rem;
}

table.invoice tr.totals table tr.total td {
    font-size: 10px;
}

table.invoice tr.totals table tr.total tr.subtotal {
    margin-bottom: 10px;
}

table.invoice tr.totals table tr.total tr.fee {
    margin-bottom: 10px;
}

#invoice-img {
    width: var(--px-50);
    height: var(--px-50);
    margin: 4px;
}

table.invoice td {
    font-size: 10px;
}
/* End Custom for bill */

.bankQr-setting {
    width: 100vw;
    display: flex;
    justify-content: center;
}

.accordion--setting-content.bill-image-setting {
    width: 100%;
    display: flex;
    height: 100%;
    overflow: auto;
    grid-column: span 2;
    gap: var(--px-24);
    flex-direction: column;
}

#btn-close-bill {
    grid-column: -2;
}

    #btn-close-bill.disable {
        pointer-events: none;
        background: var(--bs-gray-800);
    }

.bill-name.due-usd {
    color: var(--bs-danger);
    font-weight: 400;
}

div.divider {
    height: 100%;
    width: 1px;
    display: flex;
    border-right: 2px solid var(--bs-gray-700);
    margin: auto;
    min-height: var(--px-24);
}

div.divider-vertical {
    height: 1px;
    width: 100%;
    display: flex;
    border-top: 2px solid var(--bs-gray-700);
    margin: auto;
}

.payment-success-order {
    display: flex;
    color: var(--txt-light);
    flex-direction: column;
    min-width: var(--px-440);
}

.header-payment {
    padding: var(--px-16);
    display: flex;
    flex-direction: column;
    gap: var(--px-6);
    position: relative;
}

    .header-payment status {
        background: var(--bs-success);
        padding: 4px var(--px-12);
        border-radius: var(--px-24);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        width: min-content;
        font: normal normal 500 var(--s-14);
        height: var(--px-32);
        position: absolute;
        right: var(--px-16);
        top: var(--px-24);
    }

    .header-payment h4 {
        font: normal normal 700 var(--s-26);
        margin: 0;
    }

    .header-payment span {
        color: var(--bs-gray-600);
        font: normal normal 500 var(--s-16);
    }

.info-payment-order {
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
    margin: var(--px-16);
    border-radius: var(--px-8);
    background: var(--bs-gray-900);
    padding: var(--px-16);
}

.header-info {
    display: flex;
    flex-direction: column;
}

    .header-info strong {
        font: normal normal 600 var(--s-20);
    }

    .header-info span {
        color: var(--bs-gray-600);
        font: normal normal 500 var(--s-16);
    }

#modalListOrder.payment-successfully #append-footer-id,
#modalListOrder.payment-successfully #list-order-append-id,
#modalListOrder.payment-successfully #append-info-table-header {
    pointer-events: none;
}

#modalListOrder.payment-successfully #btn-close-bill,
#modalListOrder.payment-successfully #append-select-guest-bill {
    display: none !important;
}

.accordion--setting-content.payment-setting {
    display: flex;
    margin: auto;
    padding: 0 var(--px-24) var(--px-24);
    width: 100%;
    height: 100%;
    grid-column: span 2;
    color: var(--txt-light);
    gap: var(--px-24);
    justify-content: center;
}

.form-account-settings .title-cate,
.append-image-list .title-cate {
    height: var(--px-32);
    display: flex;
    align-items: center;
    color: var(--txt-light);
    font: normal normal 700 var(--s-16);
}

.form-account-settings {
    flex: 1;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--px-16);
    background: #1d1d1d;
    padding: var(--px-20);
    border-radius: var(--px-16);
    border: 1px solid var(--bs-gray-900);
}

.accordion--setting-content.payment-setting .form--input {
    height: auto;
}

    .accordion--setting-content.payment-setting .form--input span {
    }

    .accordion--setting-content.payment-setting .form--input input {
    }

.line-2-item-display {
    width: 100%;
    display: flex;
    gap: var(--px-4);
    align-items: center;
}

    .line-2-item-display .card-item-amount {
        flex: 1;
        justify-content: end;
    }

    .line-2-item-display.hide-detail .card-item-amount {
        justify-content: start;
    }

    .line-2-item-display.hide-detail dur,
    .line-2-item-display.hide-detail button:not(.open-note-item) {
        display: none !important;
    }

.dropdown-menu.select-guest {
    min-width: var(--px-160);
}

.select-guest button.btn-select-guest {
    background: unset;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    justify-content: space-between;
    padding: 0 var(--px-12);
}

    .select-guest button.btn-select-guest span {
    }

    .select-guest button.btn-select-guest strong {
        background: var(--bs-gray-700);
        font: normal normal 500 var(--s-12);
        border-radius: var(--px-12);
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--px-24);
        width: var(--px-24);
    }

#total-due-amount strong {
    font: normal normal 600 var(--s-16);
    color: var(--bs-main);
}

.group-btn-dms-order {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--px-6);
    margin: 0;
    flex: 1;
    max-height: var(--px-44);
    padding: var(--px-6);
    background: var(--bs-gray-900);
    border-radius: var(--px-8) var(--px-8) 0 0;
}

    .group-btn-dms-order button {
        padding: 0;
        min-width: unset;
        background: var(--bs-gray-900);
        height: var(--px-32);
        color: var(--bs-gray-500);
        padding: var(--px-8);
        width: 100%;
    }

        .group-btn-dms-order button i {
            color: var(--bs-main-300);
        }

.txt-gray {
    font-weight: 500;
    color: var(--bs-gray-500);
}

.discount-bill-display {
    width: 100%;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    max-height: var(--px-60);
    padding: var(--px-12);
    border-radius: var(--px-12);
    margin: 0 0 var(--px-12) 0;
    background: var(--bs-gray-900);
    border: 1px solid var(--bs-gray-800);
}

    .discount-bill-display.split {
        cursor: pointer;
    }

        .discount-bill-display.split:hover {
            background: var(--bs-gray-800);
        }

        .discount-bill-display.split i {
            color: var(--bs-main);
            padding: 6px;
            border-radius: var(--px-8);
            background: #40120a5e;
            font-size: var(--px-20);
        }

        .discount-bill-display.split.noClick i.fa-arrow-left {
            display: none;
        }

    .discount-bill-display .fa-badge-percent {
        color: var(--bs-teal);
        padding: 6px;
        font-size: var(--px-20);
        border-radius: var(--px-8);
        background: #1b5c007d;
    }

    .discount-bill-display .name-dis-value {
        flex: 1;
        display: flex;
        flex-direction: column;
        font: normal normal 500 var(--s-12)
    }

    .discount-bill-display .value {
        color: var(--bs-teal);
    }

    .discount-bill-display .tle {
        color: var(--bs-gray-600);
    }

    .discount-bill-display .del-discount {
        background: var(--bs-gray-900);
        min-width: unset;
        width: var(--px-32);
        height: var(--px-32);
    }

.list-group {
    display: flex;
    flex-direction: column;
    gap: var(--px-8);
    border-radius: var(--px-8);
}

.list-group-item {
    width: 100%;
    border: unset !important;
    display: flex;
    background: unset;
    color: var(--txt-light);
    padding: 4px var(--px-8);
    border-radius: var(--px-4) !important;
    display: flex;
    height: var(--px-32);
    align-items: center;
    justify-content: start;
    font: normal normal 400 var(--s-14);
}

.list-group.categories {
    background: var(--bs-gray-900);
    border: 1px solid var(--bs-gray-700);
    height: 100%;
    padding: var(--px-12);
}

.discount-popup-method-append {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    padding: 0 0 var(--px-12) 0;
}

.list-discount-method {
    display: flex;
    gap: var(--px-12);
    flex-direction: row;
    overflow: auto hidden;
    justify-content: flex-start;
}

    .list-discount-method .item-method-dis {
        display: flex;
        border: 1px solid var(--bs-gray-700);
        align-items: center;
        padding: var(--px-12);
        border-radius: var(--px-8);
        gap: var(--px-8);
        font: normal normal 500 var(--s-14);
    }

        .list-discount-method .item-method-dis i {
            color: var(--bs-teal);
        }

.list-apply-for {
    display: flex;
    gap: var(--px-12);
    flex-direction: row;
    overflow: auto hidden;
    justify-content: flex-start;
}

    .list-apply-for .item-apply-for {
        cursor: pointer;
        display: flex;
        border: 1px solid var(--bs-gray-700);
        align-items: center;
        padding: var(--px-12);
        border-radius: var(--px-8);
        gap: var(--px-8);
        min-width: var(--px-160);
        font: normal normal 500 var(--s-14);
    }

        .list-apply-for .item-apply-for:hover {
            background: var(--bs-gray-800);
        }

        .list-apply-for .item-apply-for.active i {
            font-weight: 900;
            color: var(--bs-main);
            background: white;
            font-size: var(--px-18);
            border-radius: 100%;
            height: var(--px-14);
            width: var(--px-14);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .list-apply-for .item-apply-for i {
            font-weight: 300;
            color: var(--bs-gray-600);
        }

        .list-apply-for .item-apply-for.active i::before {
            content: "\f058";
        }

        .list-apply-for .item-apply-for span {
            flex: 1;
            font: normal normal 400 var(--s-12);
            text-transform: capitalize;
        }

    .list-method-pay::-webkit-scrollbar,
    .list-apply-for::-webkit-scrollbar,
    .list-discount-method::-webkit-scrollbar {
        height: 0;
    }

#keypadModal .modal-body {
    padding-top: 0;
}

.ordered-items {
    gap: 4px;
    display: flex;
    align-items: center;
}

    .ordered-items .ordered-items-count {
        background: var(--bs-danger);
        font: normal normal 600 var(--s-11);
        border-radius: var(--px-12);
        padding: 2px 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--px-18);
        min-width: var(--px-18);
        color: white;
    }

.search-form.search-foc {
    min-height: var(--px-36);
    margin: var(--px-12) 0;
    width: 100%;
    min-width: 96%;
    background: var(--bs-gray-900);
}

.content-wrapper-custom {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    width: 100vw;
    color: var(--txt-light);
    overflow: auto;
}

    .content-wrapper-custom .chart {
        background: var(--bs-gray-900);
    }

    .content-wrapper-custom .chart-area {
        position: relative;
        height: 10rem;
        width: 100%;
    }

    .content-wrapper-custom .chart-pie {
        position: relative;
        height: 15rem;
        width: 100%;
    }


#modalListOrder.payment-successfully #append-footer-id,
#modalListOrder.payment-successfully #list-order-append-id,
#modalListOrder.payment-successfully #append-info-table-header {
    pointer-events: none;
}

#modalListOrder.role-guest-tracking .group-btn-dms-order,
#modalListOrder.role-guest-tracking .dropdown-split-bill,
#modalListOrder.role-guest-tracking #switch-setting-change-guestno,
#modalListOrder.role-guest-tracking .divider,
#modalListOrder.payment-successfully #btn-close-bill,
#modalListOrder.payment-successfully #append-select-guest-bill {
    display: none !important;
}

.add-client-order-bill {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: var(--px-16);
    border: 2px solid var(--bs-gray-700);
    background: var(--bs-gray-800);
    margin: 0 var(--px-12);
    border-radius: var(--px-8);
}

    .add-client-order-bill .name-and-info {
        flex: 1;
        display: flex;
        gap: var(--px-6);
        flex-direction: column;
        font: normal normal 600 var(--s-15);
    }

        .add-client-order-bill .name-and-info p {
            color: var(--bs-main-400);
        }

        .add-client-order-bill .name-and-info span {
            font: normal normal 400 var(--s-13);
        }

    .add-client-order-bill i.fa-duotone {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-gray-600);
        height: var(--px-44);
        width: var(--px-44);
        border-radius: var(--px-36);
        color: var(--bs-main-50);
        padding: 8px;
    }

.form-add-client-bill {
    width: 100%;
    height: 100%;
    display: flex;
    /* gap: var(--px-12); */
    flex-direction: column;
    color: var(--txt-light);
    min-width: var(--px-360);
}

    .form-add-client-bill .h4 {
        margin: 0;
        padding: var(--px-16);
        color: white;
        font-weight: 700;
        font-size: var(--px-20);
        border-bottom: 2px solid var(--bs-border-strong);
    }

    .form-add-client-bill .h5 {
        margin: 0;
        padding: var(--px-16);
        color: white;
        font-weight: 600;
        font-size: var(--px-16);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-add-client-bill .client-input-bill {
        width: 100%;
        height: auto;
        display: grid;
        gap: var(--px-32) var(--px-16);
        padding: 0 var(--px-16);
        grid-template-columns: 1fr 1fr;
    }
        /*
        .form-add-client-bill .client-input-bill .form--input {
            flex-direction: row;
            align-items: center;
            border-bottom: 2px solid var(--bs-gray-700);
            padding: 2px 0;
            min-height: var(--px-40);
            gap: var(--px-6);
            grid-column: span 1;
        }

            .form-add-client-bill .client-input-bill .form--input.note {
                flex-direction: column;
                align-items: flex-start;
                margin-top: var(--px-12);
            }

            .form-add-client-bill .client-input-bill .form--input:focus-within {
                border-bottom: 2px solid var(--bs-main);
            }

            .form-add-client-bill .client-input-bill .form--input span {
                color: var(--bs-gray-500);
                font-weight: 600;
            }

            .form-add-client-bill .client-input-bill .form--input input {
                padding: 0;
                border-radius: 0;
                background: unset;
                height: 100%;
                flex: 1;
            }

                .form-add-client-bill .client-input-bill .form--input input:focus,
                .form-add-client-bill .client-input-bill .form--input textarea:focus {
                    outline: 0 !important;
                }

            .form-add-client-bill .client-input-bill .form--input:nth-child(3) {
                grid-column: span 1;
            }

            .form-add-client-bill .client-input-bill .form--input.full,
            .form-add-client-bill .client-input-bill .form--input:nth-child(2),
            .form-add-client-bill .client-input-bill .form--input:nth-child(5),
            .form-add-client-bill .client-input-bill .form--input:last-of-type {
                grid-column: span 1;
            }*/

        .form-add-client-bill .client-input-bill .form--input {
            grid-column: span 1;
        }

            .form-add-client-bill .client-input-bill .form--input:first-of-type {
                grid-column: span 2;
            }

            .form-add-client-bill .client-input-bill .form--input:nth-child(2) {
                grid-column: span 2;
            }

            .form-add-client-bill .client-input-bill .form--input input {
                background: var(--bs-border-strong);
                border: 1px solid var(--bs-gray-800);
            }

            .form-add-client-bill .client-input-bill .form--input.note {
                grid-column: span 2;
            }

                .form-add-client-bill .client-input-bill .form--input.note textarea {
                    grid-column: span 2;
                    background: var(--bs-border-strong);
                    border: 1px solid var(--bs-gray-800);
                }

.footer-popup {
    display: flex;
    align-items: center;
    padding: var(--px-24);
    justify-content: flex-end;
}

    .footer-popup button {
        width: 50%;
        max-width: var(--px-240);
    }

div.select-payment-method.for-split.disabled > * {
    pointer-events: none;
    opacity: .5;
}

div.select-payment-method.for-split.disabled .ff-header {
    pointer-events: all;
    opacity: 1;
    z-index: 121212122;
    position: relative;
}

button.search-tax-code {
    position: absolute;
    right: var(--px-12);
    height: var(--px-32);
    min-width: var(--px-32);
    bottom: var(--px-12);
}

button.scroll-form {
    padding: 0;
    position: sticky;
    min-width: var(--px-32);
    height: var(--px-32);
    background: var(--bs-gray-900);
    box-shadow: 1px 1px 31px 2px #4545451a;
}

    button.scroll-form.left {
        left: 0;
    }

    button.scroll-form.right {
        right: 0;
    }

.form-transfer-payment {
    display: flex;
    gap: var(--px-20);
    padding: var(--px-24);
    flex-direction: column;
    color: var(--txt-light);
}

    .form-transfer-payment img {
        margin: auto;
        display: block;
        cursor: zoom-in;
        max-width: var(--px-400);
        -webkit-user-select: none;
        background-color: hsl(0, 0%, 90%);
        transition: background-color 300ms;
    }

    .form-transfer-payment p {
    }

.append-image-list {
    flex: 1;
    display: flex;
    position: relative;
    height: max-content;
    flex-direction: column;
    gap: var(--px-24);
    background: var(--bs-gray-900);
    padding: var(--px-20);
    border-radius: var(--px-16);
    max-width: var(--px-400);
    color: var(--txt-light);
}

    .form-account-settings button,
    .append-image-list button {
        position: absolute;
        right: var(--px-20);
        min-width: var(--px-60);
        height: var(--px-32);
        font-size: var(--px-12);
        top: var(--px-20);
    }

.qr-code-scan-payment-time {
    display: flex;
    flex-direction: column;
}

    .qr-code-scan-payment-time img {
        width: 100%;
        height: var(--px-80);
        margin: auto;
        object-fit: contain;
    }

.invoice-print-items tr.item {
    border-collapse: collapse;
    border-bottom: 1px dashed #a7a7a7
}

tr.item .desc {
    width: 55%; /* Adjust this to your preference */
}

td span.time-exactly {
    font-size: 9px;
    white-space: nowrap;
    padding: 5px;
}

.full-width-center.invoiceName h2 {
    font-size: 16px;
    font-weight: 700;
}

.store-name-invoice {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.group-setting-page {
    display: flex;
    gap: var(--px-16);
    flex-direction: column;
    padding: 0 var(--px-32);
    color: var(--txt-light);
    font: normal normal 700 var(--s-22);
    padding-bottom: var(--px-32);
}

    .group-setting-page .setting-option-page {
        display: grid;
        gap: var(--px-12);
        grid-template-columns: 1fr 1fr;
    }

#modal-not-found-table-qr {
}

    #modal-not-found-table-qr .modal-content {
        background: #111111 !important;
        justify-content: center;
        align-items: center;
        gap: var(--px-60);
    }

    #modal-not-found-table-qr .info-store {
        display: flex;
        gap: var(--px-24);
        flex-direction: column;
        align-items: center;
    }

        #modal-not-found-table-qr .info-store img {
            height: var(--px-160);
            width: var(--px-160);
            border-radius: var(--px-160);
        }

        #modal-not-found-table-qr .info-store .store-name {
            font: normal normal 800 var(--s-32);
            color: white;
            text-align: center;
        }

    #modal-not-found-table-qr .info-table {
        font: italic normal 300 var(--s-16);
        display: flex;
        flex-direction: column;
        text-align: center;
        color: var(--bs-gray-600);
        width: auto;
        height: auto;
        flex-wrap: nowrap;
        gap: var(--px-4);
        align-items: center;
    }

        #modal-not-found-table-qr .info-table.form-select-table {
            gap: var(--px-32);
        }

        #modal-not-found-table-qr .info-table p {
            margin: var(--px-42) 0;
            color: var(--bs-gray-400);
            font: italic normal 400 var(--s-16);
        }

button.complete-order-portal {
    border: 1px solid var(--bs-gray-700);
}

.content-reprint-custom {
    all: unset;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--txt-light);
    grid-column: span 2;
}

.content-dashboard-custom {
    height: inherit;
    display: flex;
    overflow: auto;
    flex-direction: column;
}



.reprint.reprint-filter {
    flex: 1;
    /* max-height: var(--px-76); */
    display: flex;
    padding: var(--px-12) var(--px-24);
    align-items: center;
    gap: var(--px-32);
    /* justify-content: flex-end; */
    display: flex;
    flex-wrap: wrap;
}

    .reprint.reprint-filter .filter-option-print {
        display: flex;
        gap: var(--px-12);
        align-items: center;
        white-space: nowrap;
        font: normal normal 600 var(--s-16);
        color: var(--bs-gray-500);
        justify-content: space-between;
        width: 100%;
    }

    .reprint.reprint-filter input {
        background: unset;
        padding: var(--px-12);
        border-radius: var(--px-8);
        color: var(--txt-light);
        border: 1px solid var(--bs-gray-800);
        width: var(--px-220);
        font: normal normal 500 var(--s-14);
    }

#rePrintList {
    flex: 1;
    padding: 0;
}

    #rePrintList #rePrintListTable th {
        text-align: center;
    }

.qrcode-and-print {
    display: flex;
    gap: var(--px-4);
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background: var(--bs-gray-600);
    border-radius: 6px;
    border: 1px solid var(--bs-gray-600);
    position: relative;
}

.table-detail .info-basic-table i {
    font-size: var(--px-24);
    color: var(--bs-info);
    position: absolute;
    left: -8px;
}

.popup-container button.btn-add-note span {
}

.method-and-split-form {
    flex: 1;
    display: flex;
    overflow: hidden;
    gap: var(--px-16);
    padding: 0 var(--px-8);
}

.keyboard-and-list-foc {
    flex: 1;
    display: flex;
    position: relative;
    flex-direction: column;
    padding: var(--px-4) 0px 0;
}

    .keyboard-and-list-foc::after {
        content: '';
        height: -webkit-fill-available;
        width: 1px;
        position: absolute;
        background: var( --bs-gray-700);
        left: calc(-1 * var( --px-8));
        z-index: 1;
        top: var( --px-60);
    }

.select-payment-method.for-split {
    flex: 1;
    height: auto;
    overflow: hidden;
    position: relative;
    padding: var(--px-4) 0px 0;
}

    .select-payment-method.for-split .list-method-pay:not(.dis-none) {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .select-payment-method.for-split .list-method-pay .box-select-method {
        width: 100%;
        gap: var(--px-12);
        flex-direction: row;
        align-items: center;
    }

.per-payment-row .col-split-payment {
    flex: 1;
    display: flex;
    gap: var(--px-4);
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.fa-money-bill-transfer {
    color: var(--bs-white);
    font-size: var(--px-20);
    font-weight: 300;
}

#offcanvasItemDef {
    width: var(--px-500);
    background: var(--bs-gray-900);
    color: var(--txt-light);
}

#itemDefForm input {
    color: var(--txt-light) !important;
}

#itemDefForm .select2-container {
    width: 100% !important;
}

#addNewItemDef {
    background-color: var(--stagesin-service);
}

#modalListOrder.expand-payment-order #append-footer-id {
    flex: 1;
    align-content: flex-start;
    justify-content: normal;
    flex-direction: column;
    min-height: fit-content;
}

#modalListOrder:not(.expand-payment-order) #list-order-append-id {
    display: flex !important;
}

#modalListOrder.expand-payment-order #list-order-append-id {
    flex: 1;
    overflow: hidden;
}

#modalListOrder.expand-payment-order .list-method-pay {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

    #modalListOrder.expand-payment-order .list-method-pay div.divider,
    #modalListOrder.expand-payment-order .list-method-pay .scroll-form {
        display: none;
    }

button.btn-expand-payment-order {
    background: var(--bs-gray-900);
    height: unset;
    min-width: unset;
    padding: var(--px-6) var(--px-16);
    border: 1px solid var(--bs-gray-700);
}

    button.btn-expand-payment-order.expand {
        color: var(--bs-white);
        background: var(--bs-main);
    }

.select-payment-method.for-split div.ff-header {
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
    padding: var(--px-6) 0;
}

.select-payment-method.for-split div.footer-row[method="vnpay"],
.select-payment-method.for-split div.footer-row[method="transfer"] {
    display: none;
}

.select-payment-method.for-split .list-method-pay.dis-none {
    display: none !important;
}

.header-openby-ticketno {
    gap: 4px;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    font-size: var(--px-12);
}

    .header-openby-ticketno strong:first-of-type {
        font: normal normal 600 var(--s-20);
    }

    .header-openby-ticketno strong:last-of-type {
        color: var(--bs-gray-500) !important;
        font: normal normal 500 var(--s-14);
    }

.area-note-order-bill {
    width: 100%;
    display: flex;
    gap: var(--px-12);
    padding: var(--px-8);
    border-radius: var(--px-12);
    margin: 0 0 var(--px-12) 0;
    background: var(--bs-gray-900);
    font: normal normal 400 var(--s-12);
}

    .area-note-order-bill i {
        color: var(--bs-primary);
        padding: 6px;
        font-size: var(--px-20);
        border-radius: var(--px-8);
        background: #0d6efd26;
    }

.btn-close-bill-split {
    width: 100%;
    margin: var(--px-12) 0;
}

.select-payment-method.for-split .list-append-footer-track {
    display: flex;
    flex-direction: column;
}

    .select-payment-method.for-split .list-append-footer-track .footer-row {
        min-height: var(--px-32);
        max-height: var(--px-32);
        align-items: start;
    }

.header-left-bar-page {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

#interface-status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 11px;
    color: var(--bs-gray-400);
    line-height: 1.2;
}

.interface-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--bs-gray-500);
    transition: background-color 0.4s ease;
}

#interface-status.connected .interface-dot {
    background-color: #22c55e;
    box-shadow: 0 0 5px #22c55e88;
}

#interface-status.disconnected .interface-dot {
    background-color: #ef4444;
    box-shadow: 0 0 5px #ef444488;
}

.table-custom-setting-page .table > :not(caption) > * > * {
    background-color: unset;
    padding: var(--px-8) var(--px-16);
    font: normal normal 400 var(--s-14);
    border-color: var(--bs-gray-900);
    color: var(--bs-gray-500);
}

.table-custom-setting-page .table > thead th {
    background-color: var(--bs-gray-900);
    padding: var(--px-16);
    font: normal normal 600 var(--s-14);
    border-color: var(--bs-gray-900);
    color: var(--bs-gray-300);
}

.table-custom-setting-page thead {
    position: sticky;
    top: 0px;
}

#rePrintList button.btn-reprint-page {
    background-color: var(--bs-gray-900);
}

button.btn-pos-invoice {
    border-color: var(--bs-main);
}

button.btn-pos-invoice-disabled {
    background-color: var(--bs-gray-900);
}

.accordion--setting-content.item-setting {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--txt-light);
    grid-column: span 2;
}

.group-item-page-setting {
    height: inherit;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    margin: 0 var(--px-24);
    border-radius: var(--px-12);
    border: 1px solid var(--bs-gray-900);
    background: var(--bs-gray-900);
}

    .group-item-page-setting .itemDefFilters {
        flex: 1;
        max-height: var(--px-76);
        display: flex;
        padding: var(--px-12) var(--px-24);
        align-items: center;
        gap: var(--px-32);
        justify-content: flex-end;
    }

    .group-item-page-setting .item-page-setting-filter {
        display: flex;
        gap: var(--px-12);
        align-items: center;
        white-space: nowrap;
        font: normal normal 600 var(--s-16);
        color: var(--bs-gray-500);
    }

    .group-item-page-setting input,
    .group-item-page-setting select {
        background: unset;
        padding: var(--px-12);
        border-radius: var(--px-8);
        color: var(--txt-light);
        border: 1px solid var(--bs-gray-800);
        width: var(--px-220);
        font: normal normal 500 var(--s-14);
    }


.append-all-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

    .append-all-item .group-info {
        width: fit-content;
        display: flex;
        align-items: center;
        padding: 0 var(--px-12);
        background-color: var(--bs-gray-700);
    }

        .append-all-item .group-info strong {
            flex: 1;
            padding: var(--px-16) var(--px-8);
            font: normal normal 600 var(--s-14);
            color: var(--bs-gray-300);
            min-width: var(--px-120);
            max-width: var(--px-120);
        }

        .append-all-item .group-info span {
            flex: 1;
            background-color: unset;
            padding: var(--px-8) var(--px-8);
            font: normal normal 400 var(--s-14);
            color: var(--bs-gray-500);
            min-width: var(--px-120);
            max-width: var(--px-120);
        }

        .append-all-item .group-info.item {
            border-bottom: 1px solid var(--bs-gray-900);
            background-color: unset;
            z-index: 1;
        }

        .append-all-item .group-info .text-center {
            min-width: var(--px-60);
            max-width: var(--px-60);
        }

        .append-all-item .group-info .flex--2 {
            min-width: var(--px-180);
            max-width: 100%;
        }

        .append-all-item .group-info .btn-edit-item-page-setting {
            background-color: var(--bs-gray-900);
            min-width: var(--px-40);
        }

        .append-all-item .group-info .btn-edit-item-page-setting {
            background-color: var(--bs-gray-900);
            min-width: var(--px-40);
        }

            .append-all-item .group-info .btn-edit-item-page-setting i {
                color: var(--bs-warning);
            }

        .append-all-item .group-info.item:hover {
            cursor: pointer;
            background: var(--bs-gray-800);
        }

        .append-all-item .group-info.header {
            top: 0;
            z-index: 2;
            position: sticky;
        }

#searchItemButton {
    background: var(--bs-main);
}

button.btn-send-payment-action {
    grid-column: 11 / 12;
}

#modalListOrder.client-payment-proccessing .divider,
#modalListOrder.client-payment-proccessing .scroll-form,
#modalListOrder.client-payment-proccessing .fa-arrow-left,
#modalListOrder.client-payment-proccessing .grid-1.btn-status,
#modalListOrder.client-payment-proccessing .btn-close-popup-pos,
#modalListOrder.client-payment-proccessing .group-btn-dms-order,
#modalListOrder.client-payment-proccessing .dropdown.bill-setting,
#modalListOrder.client-payment-proccessing .btn-expand-payment-order,
#modalListOrder.client-payment-proccessing .header-pay,
#modalListOrder.client-payment-proccessing .list-method-pay {
    display: none;
}

#modalListOrder.client-payment-proccessing .box-order,
#modalListOrder.client-payment-proccessing .discount-bill-display.split,
#modalListOrder.client-payment-proccessing #append-info-table-header {
    pointer-events: none;
}

#modalListOrder.client-payment-proccessing .box-select-method {
    width: 50%;
}

#modalListOrder.client-payment-proccessing {
    max-width: unset;
    width: 100vw;
}

    #modalListOrder.client-payment-proccessing button.btn-payment-vnpay-portal {
        width: -webkit-fill-available;
        height: var(--px-44);
        margin: var(--px-12);
        display: flex !important;
        background: var(--bs-success);
    }

        #modalListOrder.client-payment-proccessing button.btn-payment-vnpay-portal img {
            height: 70%;
        }

#modal-view-receipt-info {
    overflow: unset;
    max-width: var(--px-440);
}

#modalListOrder.bill-info-tracking .box-select-method:not([method="transfer"]),
#modalListOrder.bill-info-tracking .group-btn-dms-order,
#modalListOrder.bill-info-tracking .btn-close-popup-pos.complete,
#modalListOrder.bill-info-tracking .scroll-form,
#modalListOrder.bill-info-tracking .header-pay,
#modalListOrder.bill-info-tracking .fa-ellipsis-vertical,
#modalListOrder.bill-info-tracking .delete-payment,
#modalListOrder.bill-info-tracking .btn-close-bill-split,
#modalListOrder.bill-info-tracking .btn-close-popup-pos.reload {
    display: none;
}

#modalListOrder.bill-info-tracking .btn-close-popup-pos.print {
    top: calc(var(--px-40) * 2);
}

#modalListOrder.bill-info-tracking #append-info-table-header {
    pointer-events: none;
}

    #modalListOrder.bill-info-tracking #append-info-table-header button.bell-concierge {
        pointer-events: all !important;
    }

#modalListOrder.bill-info-tracking .box-select-method[method="transfer"] {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--px-12);
    align-items: center;
    font: normal normal 600 var(--s-18)
}

    #modalListOrder.bill-info-tracking .box-select-method[method="transfer"] i {
        font-size: var(--px-24);
        color: var(--bs-main);
    }

#modalListOrder .box-select-method[method="reviews"] {
    display: none;
}

#modalListOrder.bill-info-tracking .box-select-method[method="reviews"] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    #modalListOrder.bill-info-tracking .box-select-method[method="reviews"] i {
        color: var(--bs-yellow)
    }

#modalListOrder.disable .modal-content #append-footer-id,
#modalListOrder.disable .modal-content #list-order-append-id,
#modalListOrder.disable .modal-content #append-info-table-header {
    opacity: .5;
    pointer-events: none !important;
}

.categories-menu::-webkit-scrollbar-thumb {
    /* background-color: transparent !important; */
}

.group-dur-adj-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-selected-append {
    display: flex;
    gap: var(--px-12);
    padding: var(--px-8) var(--px-24);
    color: white;
    margin: var( --px-12) 0;
    position: relative;
    flex-wrap: wrap;
    flex-direction: row;
}

    .category-selected-append h1 {
        margin: 0;
        font-size: var(--px-28);
        color: var(--color-item-menu);
        text-transform: capitalize;
        display: flex;
        align-items: center;
        flex: 1;
        min-width: max-content;
        font-weight: 700;
        border-bottom: 2px solid var( --color-item-menu);
    }

    .category-selected-append .divider {
        flex: 1;
        height: 0;
        margin-top: var(--px-33);
        border: unset;
        border-top: 2px solid var(--color-item-menu);
    }

    .category-selected-append .unit-amount {
        tem-menu );
        display: flex;
        font: italic normal 500 var(--s-16);
        align-items: center;
        justify-content: end;
        color: var(--color-item-menu);
        min-width: var(--px-120);
    }

.group-filter-func-order {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    padding: var(--px-8) var(--px-20);
    position: relative;
    left: calc(-1 * var(--px-12));
    width: calc(100% + var(--px-8));
    justify-content: flex-end;
    background: var(--bs-surface-bg);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-shadow-md);
    z-index: 112;
}

    .group-filter-func-order .search-form {
        height: 100%;
        background: 0;
        border: 2px solid var(--bs-gray-600);
    }

.select-items-popup .close-zoom-btn {
    color: black;
    background: white;
    font-size: var(--px-16);
}

.opacity-blur {
    position: relative;
}

.service-name.opacity-blur::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* backdrop-filter: blur(4px); */
}

.popup-content .service-name.opacity-blur::after {
    content: unset;
}

.accordion--setting-content.categories-menu {
    top: var(--px-108);
    left: var(--px-6);
    border-radius: var(--px-12);
    overflow: auto;
    gap: var(--px-16);
}

button.add-on.delete {
    width: min-content;
    min-width: unset;
    border-radius: 100%;
    color: black;
    width: var(--px-40);
}

    button.add-on.delete i {
        color: var(--color-item-menu);
    }

.service-name .info-service.setting {
    max-height: var(--px-73);
}

label span.txt-desc {
    font: normal normal 400 var(--s-12);
}


/* CONFIG TEMPLATE*/
body[templatemenu="0"] div.form-select-table,
body[templatemenu="0"] div.container-append-service,
body[templatemenu="0"] div.form-select-order.open {
    background: var(--bg-solid) !important;
}

body[templatemenu="0"] div.categories-menu,
body[templatemenu="0"] div.menu-create-page.open,
body[templatemenu="0"] #append-header-lobby-id.menu.flex-column {
    background: var(--bg-light) !important;
}

body[templatemenu="0"] .txt-lux,
body[templatemenu="0"] .txt-lux-vibes {
    font-family: "Sora", sans-serif !important;
}


body[templatemenu="0"] .category-selected-append {
    margin: 0;
    align-items: start;
    gap: 0;
}


body[templatemenu="0"] #append-header-lobby-id .title {
    color: var(--bs-white);
    font: normal normal 700 var(--s-20);
}

body[templatemenu="0"] button.categories.sub-2::after {
    width: 100%;
    left: 50%;
    border-radius: 0;
    background: var(--bs-gray-800);
}

body[templatemenu="0"] .item-service {
    all: unset;
    height: 100%;
    width: calc(100% - var(--px-24));
    display: grid;
    gap: var( --px-8);
    overflow: hidden auto !important;
    padding: 0 var( --px-8);
    margin-top: var( --px-16);
    grid-template-rows: repeat(auto-fit, var( --px-190));
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: var( --px-68);
}

body[templatemenu="0"] .service-name {
    all: unset;
    color: var(--note);
    display: flex;
    min-height: var(--px-73);
    justify-content: space-between;
    border: var(--bdr-1);
    border-color: var(--bs-gray-700);
    font: normal normal 300 var(--s-16);
    height: var(--px-190);
    overflow: hidden;
    background: transparent;
    border-radius: 4px;
    transition: all .2s;
    position: relative;
}

    body[templatemenu="0"] .service-name .info-service {
        all: unset;
        flex: 1;
        padding: var(--px-12);
        justify-content: space-between;
        font: normal normal 500 var(--s-16);
        flex-direction: column;
    }

        body[templatemenu="0"] .service-name .info-service .serv-name {
            color: white;
        }

        body[templatemenu="0"] .service-name .info-service note {
            color: var(--bs-gray-500);
        }

body[templatemenu="0"] #append-service-order-id .info-service {
    background: var(--bs-gray-900);
}

body[templatemenu="0"] .service-name .adj-qty-item i,
body[templatemenu="0"] button.add-on.delete i,
body[templatemenu="0"] button.add-on.delete {
    color: white;
}

    body[templatemenu="0"] .service-name .adj-qty-item i.fa-plus {
        color: var(--bs-main);
    }

body[templatemenu="0"] .service-name .adj-qty-item span.dis-qty-selected {
    border: 1px solid var(--bs-main);
    color: white;
    background: var(--bs-main)
}

body[templatemenu="0"] .service-name .flex-img {
    max-width: var(--px-240);
}

body[templatemenu="0"] .service-name price {
    all: unset;
    color: var(--bs-teal);
}

body[templatemenu="0"] .popup-container.fit-right {
    /* top: var(--px-108) !important; */
    right: var(--px-12) !important;
    /* width: var(--px-800); */
}

body[templatemenu="0"] .popup-content .service-name {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    justify-content: flex-start;
    max-height: unset;
    border-radius: 0;
    background: transparent;
}

    body[templatemenu="0"] .popup-content .service-name .flex-img {
        max-width: unset;
    }

    body[templatemenu="0"] .popup-content .service-name .info-service {
        max-height: var(--px-100);
        flex-direction: row;
    }

    body[templatemenu="0"] .popup-content .service-name price {
        all: unset;
        color: var(--bs-teal);
    }

body[templatemenu="0"] .close-zoom-btn {
    color: white;
    background: var(--bg-light);
}

body[templatemenu="0"] .select-items-popup {
    background: inherit;
    border-radius: 0;
    height: var(--px-64);
}

body[templatemenu="0"] .popup-container button.btn-add-note {
    color: var(--bs-main-50);
    left: var(--px-12);
    font-size: var(--px-14);
    border: 1px solid var(--bs-gray-600);
}


body[templatemenu="0"] .popup-container dur {
}

body[templatemenu="0"] .popup-content {
    overflow: hidden;
}

/* END TEMPLATE*/

.setting-option-page textarea,
.setting-option-page input {
    font: normal normal 500 var(--s-14);
}

.setting-option-page textarea {
    height: var(--px-120);
    font: normal normal 500 var(--s-14);
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
}

.append-general-settings-config {
    width: 100%;
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
    padding: var(--px-16);
    background: 0;
    border-radius: 8px;
    border: 1px solid var(--bs-gray-800);
}

#template-menu-selection {
    height: var(--px-48);
    border-radius: var(--px-8);
    padding: var(--px-12);
    color: var(--txt-light);
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
}

#invoice-option-selection {
    background: var(--bs-border-strong);
    border: 0;
    height: var(--px-48);
    border-radius: var(--px-8);
    padding: var(--px-12);
    color: var(--txt-light);
}

#rating-option-selection {
    border: 0;
    height: var(--px-48);
    border-radius: var(--px-8);
    padding: var(--px-12);
    color: var(--txt-light);
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
}

.dropdown-menu-cate.show ~ .select-main-menu {
    z-index: 2;
}

.hasSubMenu.select-cate-left.menu-show {
    z-index: 2;
}

#bill-summary-append-id {
    padding: 0 var(--px-24);
}

.select-items-popup.bg-unset {
    background: unset;
}

textarea:focus,
input:focus {
    border: 2px solid var(--bs-main);
}

#append-service-order-id.showing-item-popup {
    width: calc(100% / 3) !important;
}

    #append-service-order-id.showing-item-popup .opacity-blur {
        width: 100% !important;
        position: relative;
    }

#drop-stasus {
    height: var(--px-44);
    max-width: var(--px-44);
    min-width: var(--px-44);
    border: 1px solid var(--bs-gray-700);
    max-height: var(--px-44);
    font-size: var(--px-16);
    background: var(--bs-gray-dark);
}

.form-select-table .box--table.guest-0 .guest.d-flex.gap-2 {
    display: none !important;
}

.form-select-table .box--table.has-paid .fa-solid.fa-circle {
}

.form-select-table .box--table.has-paid .table-detail {
    background: #ff98794a;
    border-color: var(--bs-main) !important;
}

/*RECEIPT BILL*/
#invoiceModalLabel {
    text-align: center;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: start;
    font: normal normal 700 var(--s-24);
    gap: var(--px-12);
    padding: var(--px-6);
}

.receipt-container {
    max-width: var(--px-500);
    margin: auto;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: var(--px-12);
    color: var(--bs-dark);
}

    .receipt-container .header {
        background: var(--active);
        color: white;
        text-align: center;
        display: flex;
        padding: var(--px-20);
        flex-direction: row;
        position: relative;
        z-index: 0;
        border-radius: inherit;
        padding-bottom: var(--px-40);
        align-items: center;
        justify-content: space-between;
    }

        .receipt-container .header img {
            width: var(--px-68);
            height: var(--px-68);
            border-radius: var(--px-68);
            margin-bottom: 10px;
        }

    .receipt-container .business-name {
        font-size: 18px;
        font-weight: bold;
        color: black;
    }

    .receipt-container .feedback {
        text-align: center;
        padding: 20px 10px;
    }

    .receipt-container .amount {
        display: none;
        text-align: center;
        margin: var(--px-20) 0;
        color: var(--bs-gray-900);
        font: normal normal 600 var(--s-32);
    }

    .receipt-container .items {
        padding: 0px 20px;
    }

    .receipt-container .item {
        display: flex;
        justify-content: space-between;
        text-transform: capitalize;
        font: normal normal 500 var(--s-14);
        margin: var(--px-12) 0;
    }

        .receipt-container .item.header-it {
            border-top: 1px solid var(--bs-gray-500);
            border-bottom: 1px solid var(--bs-gray-500);
            padding: var(--px-12) 0;
        }

        .receipt-container .item .fa-light {
            color: var(--bs-gray-600);
        }

        .receipt-container .item span,
        .receipt-container .item strong {
            text-align: end;
            flex: 1;
        }

            .receipt-container .item span:first-of-type,
            .receipt-container .item strong:first-of-type {
                text-align: start;
            }

        .receipt-container .item .qty {
            text-align: center;
            max-width: var(--px-20);
        }

        .receipt-container .item .price {
            max-width: var(--px-120);
            text-align: end;
        }

    .receipt-container .total {
        border-top: 1px dashed var(--bs-gray-600);
        text-transform: uppercase;
        padding: var(--px-16) 0;
        padding-bottom: 0;
        font: normal normal 700 var(--s-18);
    }

    .receipt-container .split-pay {
        border-top: 1px dashed #ccc;
        padding-top: 10px;
        text-transform: capitalize;
        color: var(--bs-gray-600);
        border-bottom: 1px dashed #ccc;
        padding-bottom: 10px;
        font-weight: 500;
    }

    .receipt-container .info-bill {
        color: var(--bs-gray-600);
        padding-top: 4px;
        font-weight: 400;
    }

    .receipt-container .border-t {
        padding-top: var(--px-12);
        border-top: 1px solid #ddd;
    }

    .receipt-container .footer {
        padding: 10px 20px;
        font-size: 14px;
        color: #555;
        border-top: 1px solid #ddd;
        border-radius: inherit;
    }

    .receipt-container .footer {
        margin-top: 8px;
        font-weight: bold;
    }

        .receipt-container .footer .change {
            margin-top: 8px;
            font-weight: bold;
        }

    .receipt-container .footer-bottom {
        text-align: center;
        font-size: 12px;
        color: #888;
        padding: 10px 0;
    }

    .receipt-container .invoice-img {
        display: flex;
        width: 100%;
        gap: 4px;
    }

        .receipt-container .invoice-img.open-signature .qr-transfer {
            display: none;
        }

        .receipt-container .invoice-img img {
            max-height: var(--px-160);
            min-width: var(--px-160);
        }

    .receipt-container #lottie-reviews-folio {
        position: absolute;
        right: 0;
        height: 70%;
        display: none;
    }

    .receipt-container .text-feedback {
        padding: 4px var(--px-16);
        font: normal normal 500 var(--s-16);
    }

    .receipt-container .feedback-icons button.noClick {
        transform: scale(1.5);
    }

.zig-zag-bottom, #feedback-area-not-review {
    background: #FFF;
    position: relative;
}

    #feedback-area-not-review:before {
        background: linear-gradient(-45deg, #FFF 16px, #fffafa 16px, blue 16px, transparent 0), linear-gradient(45deg, #FFF 16px, transparent 0);
        background-size: 15px 30px;
        background-position: left top;
        top: -30px;
        content: " ";
        display: block;
        height: 32px;
        width: 100%;
        position: absolute;
        z-index: 0;
        left: 0;
    }

    .zig-zag-bottom:after {
        background: linear-gradient(-135deg, #FFF 16px, red 0px, blue 16px, transparent 0), linear-gradient(141deg, #FFF 18px, transparent 0);
        background-position: left bottom;
        background-size: 15px 30px;
        background-repeat: repeat-x;
        content: " ";
        display: block;
        height: 32px;
        width: 100%;
        position: absolute;
        z-index: 62;
        left: 0;
        bottom: -15px;
    }

.header-top-preview {
    width: 100%;
    display: grid;
    align-items: center;
    position: relative;
    padding: var(--px-20) var(--px-20) 0;
    grid-template-columns: max-content 1fr;
    grid-gap: var(--px-16);
}

    .header-top-preview .col--2 {
        display: flex;
        gap: var(--px-4);
        color: var(--bs-gray-600);
        font: normal normal 500 var(--s-14);
        justify-content: flex-start;
    }

        .header-top-preview .col--2.span-2 {
            grid-column: span 2;
        }

        .header-top-preview .col--2 strong {
            color: var(--bs-gray-900);
            font-weight: 600;
        }


#header-top-preview:before {
    background: linear-gradient(-45deg, #FFF 16px, #fffafa 16px, blue 16px, transparent 0), linear-gradient(45deg, #FFF 16px, transparent 0);
    background-size: 15px 30px;
    background-position: left top;
    top: -30px;
    content: " ";
    display: block;
    height: 32px;
    width: 100%;
    position: absolute;
    z-index: 0;
    left: 0;
}

body[templatemenu="1"] .select-cate-left.active button {
    color: var(--bs-main-700) !important;
}

body[templatemenu="1"] .select-cate-left.active::after {
    background: var(--bs-main-700);
}

body[templatemenu="1"] .select-cate-left.active {
    /* background: var(--backgroud-item-menu) !important; */
}

.service-name .flex-img .fa-pot-food {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    font-size: var(--px-52);
}

.receipt-container .invoice-img .bill-signature {
    text-align: center;
    flex: 1;
    height: initial;
    border-radius: var(--px-8);
    display: flex;
    flex-direction: column;
    font: normal normal 500 var(--s-14);
    color: var(--bs-gray-800);
    position: relative;
    border: 1px dashed var(--bs-gray-500);
}

.receipt-container .invoice-img.open-signature .bill-signature {
    top: 50%;
    left: 50%;
    position: fixed;
    background: #FFFFFF;
    width: var(--px-640);
    height: var(--px-460);
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 20px 10px #f287454a;
    border: 2px solid var(--bs-main-400);
    overflow: hidden;
    max-width: 100%;
}

.receipt-container .bill-signature #title-canvas-sign {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid var(--bs-gray-400);
    padding: 4px var(--px-6);
    border-radius: 0 0 var(--px-12) 0;
    font: normal normal 600 var(--s-14);
}

.receipt-container .bill-signature img.sign-path {
    width: 100%;
    flex: 1;
}

.receipt-container .invoice-img #signature-bill-canvas {
    width: 100%;
    flex: 1;
}

.receipt-container .invoice-img a {
    cursor: pointer;
    display: none;
}

    .receipt-container .invoice-img a#save-canvas-sign {
        background: var(--bs-main);
        color: white;
        border-radius: 4px;
        padding: var(--px-6) var(--px-16);
    }

.receipt-container .invoice-img .group-btn-sign {
    padding: var(--px-8) var(--px-12);
    align-items: center;
    justify-content: end;
    gap: var(--px-8);
    display: flex;
    z-index: 1111;
    flex: 1;
    max-height: var(--px-48);
}

.accordion--setting-content {
    display: flex;
    gap: var(--px-24);
    grid-column: span 2;
    flex-direction: column;
    overflow: hidden;
}

#footer-invoice-append {
    display: flex;
    align-items: center;
    border-radius: 0;
}

    #footer-invoice-append .btn-preview-bill {
        min-width: min-content;
        background: unset;
        color: white;
        border: 1px solid var(--bs-gray-600);
        font: normal normal 600 var(--s-18);
        flex: 1 30%;
        border-radius: var(--px-8);
        background: var(--bs-gray-800);
        min-height: var(--px-60);
        gap: 8px;
        display: flex;
    }

        #footer-invoice-append .btn-preview-bill i {
            color: var(--bs-gray-500);
            font-weight: 300;
        }

            #footer-invoice-append .btn-preview-bill i.fa-check {
                color: var(--green);
            }

            #footer-invoice-append .btn-preview-bill i.fa-paper-plane {
                color: var(--bs-yellow);
            }

            #footer-invoice-append .btn-preview-bill i.fa-file-invoice {
                color: var(--bs-info);
            }

#footer-print-bill-append {
    display: flex;
    align-items: center;
    border-radius: 0;
}

    #footer-print-bill-append .btn-preview-bill {
        min-width: min-content;
        background: unset;
        color: white;
        border: 1px solid var(--bs-gray-600);
        font: normal normal 600 var(--s-18);
        flex: 1 25%;
        border-radius: var(--px-8);
        background: var(--bs-gray-800);
        min-height: var(--px-60);
        gap: 8px;
        display: flex;
    }

        #footer-print-bill-append .btn-preview-bill i {
            color: var(--bs-gray-500);
            font-weight: 300;
        }

            #footer-print-bill-append .btn-preview-bill i.fa-print {
            }

            #footer-print-bill-append .btn-preview-bill i.fa-star {
                color: var(--bs-yellow);
            }

            #footer-print-bill-append .btn-preview-bill i.fa-file-circle-exclamation {
                color: var(--bs-gray-400);
            }

            #footer-print-bill-append .btn-preview-bill i.fa-file-invoice {
                color: var(--bs-green);
            }

button.btn-close-modal {
    background: unset;
    min-width: unset;
    border-radius: 100%;
    font-size: var(--px-20);
    color: var(--bs-main-500);
}

#invoiceModal {
    overflow: hidden;
}

    #invoiceModal .modal-content {
        overflow: hidden;
        height: 100%;
    }

    #invoiceModal .modal-body {
        overflow: auto;
    }

.receipt-container .invoice-img.open-signature #clear-canvas-sign,
.receipt-container .invoice-img.open-signature #save-canvas-sign {
    display: flex;
}

.receipt-container #cancel-canvas-sign {
    display: none;
    position: absolute;
    right: var(--px-8);
    width: var(--px-40);
    min-width: var(--px-40);
    height: var(--px-40);
    border-radius: var(--px-40);
    top: var(--px-8);
    font-size: var(--px-20);
    background: var(--bs-gray-300);
}

.receipt-container .invoice-img.open-signature #cancel-canvas-sign {
    display: flex;
}

.receipt-container .invoice-img:not(.open-signature) #open-canvas-sign {
    display: flex;
    color: var(--bs-main-500);
    padding: var(--px-6) var(--px-16);
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    transform: translate(-50%, -50%);
    width: 100%;
    align-items: center;
    justify-content: center;
    font: normal normal 500 var(--s-18);
}

.receipt-container .invoice-img:not(.open-signature) canvas#signature-bill-canvas {
    pointer-events: none;
}

.receipt-container .invoice-img.open-signature #open-canvas-sign {
    display: none;
}

body[templatemenu="0"] #append-service-order-id.showing-item-popup {
    grid-template-columns: auto !important;
    width: calc((100% / 2) - var(--px-80)) !important;
}

body[templatemenu="0"] .service-name.opacity-blur::after {
    background: #00000000 !important;
    backdrop-filter: unset !important;
}

/* CUSTOM ITEM */
.custom-item-container {
    display: flex;
    gap: var(--px-32);
    font: normal normal 700 var(--s-24);
    min-width: var(--px-500);
    max-height: var(--px-600);
    padding: var(--px-24);
    color: var(--txt-light);
    box-shadow: var(--shadow-qs-solid);
    justify-content: space-between;
    border-radius: var(--px-12);
    overflow: hidden;
}

    .custom-item-container .custom-image-item {
        height: var(--px-400);
        width: var(--px-480);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--px-120);
        background: var(--bs-gray-900);
        border-radius: var(--px-12);
        overflow: hidden;
    }

        .custom-item-container .custom-image-item img {
            height: 100%;
            width: 100%;
        }

    .custom-item-container .form-edit-open-item-price {
        display: grid;
        grid-gap: var(--px-12);
        grid-template-columns: repeat(12, 1fr);
    }

        .custom-item-container .form-edit-open-item-price textarea {
            max-height: var(--px-80);
            min-height: var(--px-80);
        }

        .custom-item-container .form-edit-open-item-price thin {
            font: italic normal 400 var(--s-12);
        }

    .custom-item-container .custom-form-item {
        display: flex;
        height: var(--px-400);
        flex-direction: column;
        justify-content: space-between;
    }

.form-edit-open-item-price .form--input:not(:first-child, :last-child) {
    grid-column: span 6;
}

.custom-item-container input[type=number]::-webkit-inner-spin-button,
.custom-item-container input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


#modalListOrder .box-order .fa-sparkle {
    position: absolute;
    font-size: var(--px-14);
    z-index: 111;
    top: -4px;
    left: 8px;
    color: var( --bs-warning);
    background: var( --bs-gray-700);
    padding: 4px;
    border-radius: 100%;
    height: var(--px-20);
    width: var(--px-20);
    display: flex;
    align-items: center;
    justify-content: center;
}


/*LOCK*/

#lock-screen-disable-hub--auto {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99999;
    opacity: 0.9;
}

    #lock-screen-disable-hub--auto #sun {
        z-index: 5;
        border-radius: 50%;
        position: absolute;
        width: 10vmax;
        height: 10vmax;
        left: 80%;
        top: calc(50% - 8vmax);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5vmax;
        transition: all 0.3s;
        color: #fff1d2;
        cursor: pointer;
    }

        #lock-screen-disable-hub--auto #sun.center {
            transition: unset;
            background: #3d3e53;
        }

            #lock-screen-disable-hub--auto #sun.center:hover {
                border-radius: 100%;
                background: #212121;
            }

        #lock-screen-disable-hub--auto #sun:active {
            font-size: 4vmax;
        }

        #lock-screen-disable-hub--auto #sun.center {
            left: calc(50% - 10vmax / 2);
            z-index: 12;
        }


    #lock-screen-disable-hub--auto #hour {
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        top: 10%;
    }

        #lock-screen-disable-hub--auto #hour * {
            z-index: 100;
            text-align: center;
            color: white;
            padding: 0;
            margin: 0;
        }

        #lock-screen-disable-hub--auto #hour h1 {
            font-size: 6vh;
        }

        #lock-screen-disable-hub--auto #hour h2 {
            font-size: 2vh;
            font-weight: 300;
        }

    #lock-screen-disable-hub--auto .loadingio-spinner-ripple-9hrxx6hijr {
        top: calc(50% - 8vmax);
        width: 10vmax;
        height: 10vmax;
        display: flex;
        align-items: center;
        justify-content: center;
        left: calc(50% - 10vmax / 2);
        position: absolute;
        z-index: 12;
    }

    #lock-screen-disable-hub--auto .ldio-5m2p3wk1p3 {
        position: relative;
        transform: translateZ(0) scale(0.2);
        backface-visibility: hidden;
        transform-origin: 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #lock-screen-disable-hub--auto .ldio-5m2p3wk1p3 div:nth-child(1) {
            border-color: #f285008a;
        }

        #lock-screen-disable-hub--auto .ldio-5m2p3wk1p3 div {
            box-sizing: content-box;
        }

        #lock-screen-disable-hub--auto .ldio-5m2p3wk1p3 div {
            position: absolute;
            border-width: 0px;
            border-style: solid;
            opacity: 1;
            border-radius: 50%;
            animation: ldio-5m2p3wk1p3 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }

.lock-screen-disable.vertical-centered-box {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

    .lock-screen-disable .vertical-centered-box:after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em;
    }

    .lock-screen-disable .vertical-centered-box .content {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        font-size: 0;
    }


.loader-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
    margin-left: -60px;
    margin-top: -60px;
}

.loader-line-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 120px;
    margin-left: -60px;
    margin-top: -60px;
    overflow: hidden;
    transform-origin: 60px 60px;
    -webkit-mask-image: -webkit-linear-gradient(top, #000, rgba(0,0,0,0));
    animation: rotate 1.2s infinite linear;
}

    .loader-line-mask .loader-line {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
    }

#particles-background,
#particles-foreground {
    left: -51%;
    top: -51%;
    width: 202%;
    height: 202%;
    transform: scale3d(0.5, 0.5, 1);
}

#particles-background {
    background: #43332c7a;
    background-image: -moz-linear-gradient(180deg, #000 2%, #18070073 100%);
    background-image: -webkit-linear-gradient(180deg, #000 2%, #18070073 100%);
    background-image: linear-gradient(180deg, #000000 2%, #18070073 100%);
}

input.no-style:focus {
    outline: unset;
}

.search-form:focus-within {
    border: 2px solid var(--bs-main);
}

/* TABLE MAP LAYOUT */
.table-map-config .toolbar {
    background: var(--bs-gray-800);
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 var(--px-24);
    padding: var(--px-12);
    border-radius: var(--px-8);
    color: white;
    flex: 1;
    max-height: var(--px-68);
}

.table-map-config .floor-plan-wrapper {
    position: relative;
    overflow: hidden;
    flex: 1;
    margin: 0 var(--px-24);
    /* border-radius: var(--px-8); */
    margin-bottom: 4px;
}

.table-map-config .floor-plan-container {
    all: unset;
    display: flex;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    position: relative;
    background: var(--bg-solid);
    background-image: linear-gradient(to right, var(--bs-gray-900) 1px, transparent 1px), linear-gradient(to bottom, var(--bs-gray-900) 1px, transparent 1px);
    /* border-radius: var(--px-8); */
    /* Dark background */
    /* background-image: radial-gradient(circle, var(--bs-gray-800) 1px, transparent 1px); */
    background-size: 20px 20px;
}

.table-map-config .table-item {
    width: 100px;
    height: 100px;
    background: #3498db;
    color: white;
    text-align: center;
    line-height: 100px;
    position: absolute;
    border-radius: 8px;
    cursor: move;
    user-select: none;
    transform-origin: center center;
}

    .table-map-config .table-item.round {
        border-radius: 50%;
    }

.table-map-config .rotation-handle {
    width: var(--px-24);
    height: var(--px-24);
    border-radius: 50%;
    color: var(--bs-green);
    position: absolute;
    top: -24px;
    left: -12px;
    transform: translateX(-50%);
    cursor: grab;
    z-index: 1111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

    .table-map-config .rotation-handle:hover,
    .table-map-config .rotation-handle:active {
        color: var(--bs-white);
        background: var(--bs-gray-dark);
    }

.table-map-config .context-menu {
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none;
}

    .table-map-config .context-menu ul {
        list-style: none;
        margin: 0;
        padding: 5px 0;
    }

    .table-map-config .context-menu li {
        padding: 5px 20px;
        cursor: pointer;
    }

        .table-map-config .context-menu li:hover {
            background: #eee;
        }

#floor-plan-container {
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: #f9f9f9;
    position: relative;
}

#floor-plan {
    position: relative;
    transform-origin: 0 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Common Table Style */
.table-map-config .table-item {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    border: 3px solid #fff;
    background-color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    user-select: none;
    transition: border 0.2s, box-shadow 0.2s;
}

    /* Shapes */
    .table-map-config .table-item.square {
        border-radius: 12px;
    }

    .table-map-config .table-item.round {
        border-radius: 50%;
    }

    .table-map-config .table-item.oval {
        width: 160px;
        height: 80px;
        border-radius: 50px;
    }

    /* Status Colors */
    .table-map-config .table-item.available {
        background-color: #d5f5c6;
    }

.table-item.reserved {
    background-color: #ffe59d;
}

.table-map-config .table-item.filled {
    background-color: #eeeeee;
}

.table-map-config .table-item.booked {
    background-color: #eeeeee;
}

.table-item.booked::after {
    content: "Booked";
    position: absolute;
    bottom: -22px;
    background-color: #f44336;
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 12px;
}

/* Selected Table */
.table-map-config .table-item.selected {
    border: 3px solid #6d55ff;
    box-shadow: 0 0 0 3px #c6baff;
}

/* Context Menu */
.table-map-config .context-menu {
    position: absolute;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    display: none;
    min-width: 160px;
}

.table-map-config .context-menu-item {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

    .table-map-config .context-menu-item:hover {
        background-color: #f0f0f0;
    }

/* Tooltip for timer, e.g. "5m 30s" */
.table-map-config .table-item .timer {
    position: absolute;
    bottom: -20px;
    font-size: 12px;
    background-color: #e08c00;
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
}

.table-map-config select {
    height: var(--px-40);
    padding: 0 var(--px-12);
    color: white;
    appearance: none;
    background: unset;
    border: 0;
    outline: 0 !important;
}

    .table-map-config select option {
        color: black;
    }

.table-map-config .select-outlet-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--px-12);
    height: var(--px-40);
    border-radius: var(--px-8);
    background: var(--bs-gray-700);
}

.table-map-config .group-flex-end {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--px-16);
}

.table-map-config .toolbar button#zoomIn,
.table-map-config .toolbar button#zoomOut {
    background: var(--bs-gray-700);
}

.adj-qty-item {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--px-8);
}

body[templatemenu="2"] #append-service-order-id {
    display: grid;
    position: relative;
    width: 100% !important;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: var(--px-8);
}

    body[templatemenu="2"] #append-service-order-id::before {
        content: '';
        height: 100%;
        width: 1%;
        left: 50%;
        position: absolute;
        box-shadow: 20px 0px 20px 0px #ffffff8a;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    body[templatemenu="2"] #append-service-order-id.showing-item-popup::after {
        z-index: 1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #17171720;
        backdrop-filter: blur(4px);
    }

    body[templatemenu="2"] #append-service-order-id div.list-item-group {
        width: 100%;
        height: 100%;
        display: flex;
        grid-column: 2 / 3;
        flex-direction: column;
        backdrop-filter: blur(3px);
        border-radius: var(--px-8);
        padding: var(--px-16);
        gap: var(--px-12);
        overflow: hidden auto;
        background: #00000045;
    }

        body[templatemenu="2"] #append-service-order-id div.list-item-group.grid-r-2 {
            grid-row: 1 / 4;
        }

    body[templatemenu="2"] #append-service-order-id .service-name {
        width: 100%;
        height: 100%;
        border: 0;
        /* z-index: 1; */
        box-shadow: 0 1px 2px var(--bs-gray-600);
    }

        body[templatemenu="2"] #append-service-order-id .service-name.item-group-select {
            all: unset;
            width: 100%;
            display: flex;
            gap: var(--px-16);
            align-items: center;
            color: var(--color-item-menu);
            font: normal normal 400 var(--s-18);
            padding: 2px var(--px-8);
            position: relative;
        }

            body[templatemenu="2"] #append-service-order-id .service-name.item-group-select.active {
                color: var(--color-selected);
            }

            body[templatemenu="2"] #append-service-order-id .service-name.item-group-select::after {
                display: none;
            }

        body[templatemenu="2"] #append-service-order-id .service-name.item-select-hidden {
            display: none;
        }

body[templatemenu="2"] .item-group-select .service-showName {
    flex: 1;
    text-transform: capitalize;
}

.service-name .icon-best-seller {
    position: absolute;
}

body[templatemenu="2"] .service-name .icon-best-seller {
    top: var(--px-12);
    right: var(--px-12);
    width: var(--px-88);
    height: var(--px-88);
}

.service-name .icon-best-seller {
    top: var(--px-4);
    right: var(--px-4);
    width: var(--px-60);
    height: var(--px-60);
}

body[templatemenu="2"] .item-group-select .icon-best-seller {
    all: unset;
    height: var(--px-40);
}

body[templatemenu="2"] .popup-container.select-item-service {
    background: transparent;
    box-shadow: unset;
    border: unset;
}

body[templatemenu="2"] .categories-menu {
    height: 100%;
}

body[templatemenu="2"] .expand-bill-view {
}

body[templatemenu="2"] .service-name price {
    width: calc(100% - var(--px-120));
    justify-content: space-between;
}

body[templatemenu="2"] .popup-container .service-name price {
    width: auto !important;
}

    body[templatemenu="2"] .popup-container .service-name price .service-showName {
        display: none !important;
    }

body[templatemenu="2"] #append-service-order-id .service-name .info-service {
    background: transparent;
    position: absolute;
    bottom: var(--px-8);
    z-index: 1;
    right: 0;
}

body[templatemenu="0"] .popup-container .service-name .icon-best-seller {
    top: var(--px-12);
    right: var(--px-12);
    width: var(--px-120);
    height: var(--px-120);
}

body[templatemenu="2"] .popup-container .service-name .serv-name {
    /* display: none; */
}

#table-map-append-id.use-template-table-map {
    all: unset;
    display: flex;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    position: relative;
    background-image: radial-gradient(circle, var(--bs-gray-800) 1px, transparent 1px);
    background-size: 20px 20px;
    backdrop-filter: blur(4px);
    overflow: auto;
}

    #table-map-append-id.use-template-table-map .box--table {
        position: absolute;
    }

.open-end-bar {
    display: none;
}

.end-bar-map .close-end-bar {
    display: flex;
    min-width: var(--px-44);
    background: var(--bs-gray-900);
}

#form-select-table-id.close-place {
    grid-template-columns: 1fr 0;
}

    #form-select-table-id.close-place .open-end-bar {
        display: flex;
        position: fixed;
        right: 0;
        background: var( --bs-gray-900);
        top: var( --px-180);
        border-radius: 6px 0 0 6px;
        white-space: nowrap;
        min-width: var(--px-44);
        box-shadow: 0 2px 20px #FFFFFF40;
        border: 1px solid var(--bs-gray-700);
    }

        #form-select-table-id.close-place .open-end-bar i {
            color: var(--bs-main);
        }

button.setting-size-table {
    display: flex;
    position: relative;
    background: var(--bs-gray-900);
    min-width: var(--px-44);
    width: var(--px-44);
    box-shadow: 0 2px 8px #FFFFFF40;
    border: 1px solid var(--bs-gray-700);
    font-size: var(--px-20);
}

    button.setting-size-table.have-txt {
        width: var(--px-160);
        box-shadow: 0 2px 2px #FFFFFF10;
        font-size: var(--px-14);
    }

button.add-floor-plan {
    display: flex;
    position: relative;
    background: var(--bs-gray-900);
    min-width: var(--px-44);
    width: var(--px-160);
    font-size: var(--px-14);
    box-shadow: 0 2px 2px #FFFFFF10;
    border: 1px solid var(--bs-gray-700);
}

.form-adjus-table-zoom {
    display: flex;
    gap: var(--px-10);
    width: var(--px-500);
    padding: var(--px-20);
    flex-direction: column;
    position: relative;
    background: inherit;
    color: var(--txt-light);
}

    .form-adjus-table-zoom .title {
        color: var(--theme-mode-text);
        font: normal normal 700 var(--s-17);
    }

    .form-adjus-table-zoom .title-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .form-adjus-table-zoom .title-header p {
            color: var(--txt-light);
            font: normal normal 700 var(--s-20);
            padding: var(--px-16) 0;
            padding-top: 4px;
        }

    .form-adjus-table-zoom .calendar-zoom {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

        .form-adjus-table-zoom .calendar-zoom p {
            color: var(--theme-mode-text-gray);
            font: normal normal 600 var(--s-16);
        }

    .form-adjus-table-zoom button {
        height: 90%;
        display: flex;
        border-radius: 4px;
        align-items: center;
        width: var(--px-100);
        justify-content: center;
        font: normal normal 600 var(--s-14);
        color: var(--txt-light);
        background: var(--bs-gray-800);
    }

    .form-adjus-table-zoom .range-input-adjust {
        width: 100%;
        display: flex;
        gap: var(--px-10);
        position: relative;
        align-items: center;
    }

    .form-adjus-table-zoom input[type="range"] {
        width: 100%;
        border-radius: 10px;
    }

    .form-adjus-table-zoom input[type="range"] {
        color: var(--bs-main);
        --thumb-height: var(--px-30);
        --thumb-width: var(--px-30);
        --track-height: 10px;
        --track-color: rgba(0, 0, 0, 0.2);
        --brightness-hover: 85%;
        --brightness-down: 60%;
        --clip-edges: 0.125em;
    }

    .form-adjus-table-zoom input[type="range"] {
        position: relative;
        background: rgba(255, 255, 255, 0);
        overflow: hidden;
    }

        .form-adjus-table-zoom input[type="range"]:active {
            cursor: grabbing;
        }

        .form-adjus-table-zoom input[type="range"]:disabled {
            filter: grayscale(1);
            opacity: 0.3;
            cursor: not-allowed;
        }

        .form-adjus-table-zoom input[type="range"], .form-adjus-table-zoom input[type="range"]::-webkit-slider-runnable-track, .form-adjus-table-zoom input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            transition: all 100ms ease 0s;
            height: var(--thumb-height);
            outline: unset;
        }

            .form-adjus-table-zoom input[type="range"]::-webkit-slider-runnable-track, .form-adjus-table-zoom input[type="range"]::-webkit-slider-thumb {
                position: relative;
            }

            .form-adjus-table-zoom input[type="range"]::-webkit-slider-thumb {
                --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
                --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
                --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
                --clip-further: calc(100% + 1px);
                --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
                width: var(--thumb-width, var(--thumb-height));
                background-color: rgb(255, 255, 255);
                box-shadow: var(--box-fill);
                border-radius: var(--thumb-width, var(--thumb-height));
                filter: brightness(100%);
                clip-path: polygon( 100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further) );
                display: flex;
                border: 1px solid;
            }

            .form-adjus-table-zoom input[type="range"]:hover::-webkit-slider-thumb {
                filter: brightness(var(--brightness-hover));
                cursor: grab;
            }

            .form-adjus-table-zoom input[type="range"]:active::-webkit-slider-thumb {
                filter: brightness(var(--brightness-down));
                cursor: grabbing;
            }

            .form-adjus-table-zoom input[type="range"]::-webkit-slider-runnable-track {
                background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
            }

            .form-adjus-table-zoom input[type="range"]:disabled::-webkit-slider-thumb {
                cursor: not-allowed;
            }

.popup-container.adjust-table-zoom {
    transform: translate(-4px, 44px);
}

#table-map-append-id div.box--table.minimize .table-detail .guest {
    display: none !important;
}

#table-map-append-id div.box--table.scale .table-detail {
    gap: 4px;
}

    #table-map-append-id div.box--table.scale .table-detail .guest {
        font: normal normal 500 var(--s-11);
    }

    #table-map-append-id div.box--table.scale .table-detail .name-table {
        font: normal normal 600 var(--s-14);
    }

.wall-element {
    position: absolute;
    height: 20px;
    background: var(--bs-gray-700);
    cursor: move;
    border-radius: 2px;
}

    .wall-element .rotation-handle {
        position: absolute;
        top: -20px;
        right: -10px;
        cursor: pointer;
    }

    .wall-element .resize-handle {
        position: absolute;
        right: -14px;
        top: 50%;
        z-index: 2;
        cursor: ew-resize;
        font-size: var(--px-24);
        border-radius: 100%;
        transform: translate(-50%, -50%);
        color: var(--bs-main-300);
        height: var(--px-24);
        width: var(--px-24);
    }

.form-add-floor-plans {
    display: flex;
    flex-direction: column;
    color: var(--txt-light);
    padding: var(--px-16);
    gap: var(--px-16);
    min-width: var(--px-300);
}

    .form-add-floor-plans p {
        font: normal normal 600 var(--s-16);
    }

    .form-add-floor-plans .append-list-floorplans {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--px-12);
    }

.append-list-floorplans button {
    background: var(--bs-gray-800);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    height: var(--px-80);
}

    .append-list-floorplans button i {
        color: var(--bs-gray-500);
        font-size: var(--px-20);
    }

    .append-list-floorplans button span {
        font: normal normal 500 var(--s-16);
    }

.icon-decord {
    height: var(--px-40);
    width: var(--px-40);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-decord.text {
        width: var(--px-120);
    }

    .icon-decord .element i {
        font-size: var(--px-40);
        color: var(--bs-gray-400);
    }

    .icon-decord .element.flower i {
        color: var(--bs-pink);
    }

    .icon-decord .element.cashier i {
        color: var(--bs-green);
    }

    .icon-decord .element-text {
        width: 100%;
        background: var(--bs-gray-900);
        border: unset;
        outline: unset;
        border-radius: 4px;
        color: var(--txt-light);
        font: normal normal 500 var(--s-14);
        height: 100%;
        padding: 0 var(--px-12);
        text-align: center;
        border: 1px solid var(--bs-gray-700);
    }

.modal-dialog.mw-600 {
    min-width: var(--px-600);
}

.modal-dialog.mw-800 {
    min-width: var(--px-800);
}

/* REVIEW ITEMS */
#reviews-bill-modal {
    z-index: 1056;
}

#modal-feedback-review {
    z-index: 1057;
}

#reviews-bill-modal .modal-dialog.mw-800 {
    min-width: var(--px-800);
}

#reviews-bill-modal .form-reviews-bill-all {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    transform: translate(0, -12px);
    min-height: 70vh;
}

    #reviews-bill-modal .form-reviews-bill-all .thank-u-review {
        font: normal normal 600 var(--s-32);
        flex: 1;
        max-height: var(--px-100);
        color: var(--bs-main-400);
    }

#reviews-bill-modal .form-select-reviews {
    width: 100%;
    display: flex;
    align-items: center;
}

    #reviews-bill-modal .form-select-reviews .option-review-bill {
        flex: 1;
        background: unset;
        border-radius: 0;
        border: 1px solid var(--bs-gray-700);
    }

        #reviews-bill-modal .form-select-reviews .option-review-bill span {
        }

#reviews-bill-modal .list-item-reivew {
    display: grid;
    gap: 0 var(--px-16);
    overflow: auto;
    padding-right: var(--px-16);
    grid-template-columns: repeat(3, 1fr);
}

#reviews-bill-modal .modal-fullscreen .list-item-reivew {
    grid-template-columns: repeat(4, 1fr);
}

#reviews-bill-modal .item-review-bill {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    position: relative;
}

    #reviews-bill-modal .item-review-bill .review-image-item {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--bs-gray-700);
        overflow: hidden;
        border-radius: 100%;
        position: relative;
        height: var( --px-80);
        width: var( --px-80);
        top: var(--px-20);
    }

        #reviews-bill-modal .item-review-bill .review-image-item i {
            font-size: var(--px-40);
        }

        #reviews-bill-modal .item-review-bill .review-image-item img {
            width: 100%;
            height: 100%;
        }

    #reviews-bill-modal .item-review-bill .review-form-item {
        width: 100%;
        display: flex;
        background: #37373796;
        border-radius: var(--px-32);
        padding: var(--px-16);
        gap: var(--px-12);
        border: 1px solid var(--bs-gray-900);
        flex-direction: column;
        padding-top: var(--px-24);
        /*min-height: var(--px-160);*/
    }

        #reviews-bill-modal .item-review-bill .review-form-item .basic-info {
            flex: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--px-8);
            font: normal normal 500 var(--s-16);
            justify-content: center;
        }

            #reviews-bill-modal .item-review-bill .review-form-item .basic-info .name {
                text-transform: capitalize;
                font: normal normal 700 var(--s-14);
            }

                #reviews-bill-modal .item-review-bill .review-form-item .basic-info .name strong {
                    color: var(--bs-green);
                    font: normal normal 600 var(--s-14);
                    letter-spacing: 1px;
                }

            #reviews-bill-modal .item-review-bill .review-form-item .basic-info .desc {
                font: italic normal 400 var(--s-13);
            }

            #reviews-bill-modal .item-review-bill .review-form-item .basic-info .price-and-duration {
                display: flex;
                flex-direction: row-reverse;
                align-items: center;
                justify-content: space-between;
            }

                #reviews-bill-modal .item-review-bill .review-form-item .basic-info .price-and-duration strong {
                    color: var(--bs-main);
                    font-size: var(--px-24);
                }

    #reviews-bill-modal .item-review-bill.reviewed {
    }

        #reviews-bill-modal .item-review-bill.reviewed .commented {
            padding: 0 var(--px-12)
        }

        #reviews-bill-modal .item-review-bill.reviewed .fa-message-image {
            color: var(--bs-main);
            font-size: var(--px-24);
            position: absolute;
            right: -4px;
            top: -8px;
        }

#reviews-bill-modal .area-review-action {
    flex: 1;
    display: flex;
    gap: var(--px-8);
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: var(--px-8) 0;
    color: var(--bs-gray-200);
    border-radius: var(--px-24);
    background: var(--bs-gray-800);
    font: normal normal 500 var(--s-12);
    position: relative;
    /* padding-bottom: 0; */
}

#reviews-bill-modal .feedback-icons {
    display: flex;
    align-items: center;
    gap: var(--px-20);
    justify-content: center;
}

    #reviews-bill-modal .feedback-icons button {
        background: unset;
        font-size: var(--px-32);
        /* background-color: var(--bs-gray-300); */
        height: var(--px-52);
        transition: transform 0.3s ease, opacity 0.3s ease;
        min-width: var(--px-32);
        max-width: var(--px-32);
        max-height: var(--px-32);
        padding: 0;
        border-radius: 100%;
    }

        #reviews-bill-modal .feedback-icons button i {
            color: var(--bs-main);
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        #reviews-bill-modal .feedback-icons button.bad i {
            color: var(--bs-red);
        }

        #reviews-bill-modal .feedback-icons button.normal i {
            color: var(--bs-warning);
        }

        #reviews-bill-modal .feedback-icons button.great i {
            color: var(--bs-green);
        }

        #reviews-bill-modal .feedback-icons button img {
            width: var(--px-32);
            height: var(--px-32);
            opacity: 0.2;
        }

        #reviews-bill-modal .feedback-icons button:not(.rate):hover img {
            opacity: 1;
        }

        #reviews-bill-modal .feedback-icons button.rated img {
            opacity: 1;
        }

#reviews-bill-modal .rating-all-bill-option {
    display: flex;
    flex-direction: column;
    border-radius: var(--px-8);
    padding: var(--px-16);
    align-items: center;
    font: normal normal 600 var(--s-15);
    gap: var(--px-32);
    flex: 1;
    flex-wrap: nowrap;
}

    #reviews-bill-modal .rating-all-bill-option .feedback-icons {
        gap: var(--px-60);
        padding: var(--px-32);
        border-radius: var(--px-8);
        background: var(--bs-gray-800);
    }

        #reviews-bill-modal .rating-all-bill-option .feedback-icons button {
            min-width: var(--px-68);
            min-height: unset;
            max-width: unset;
            height: unset;
            max-height: unset;
            display: flex;
            flex-direction: column;
            font: normal normal 600 var(--s-16);
            border-radius: 0;
        }

            #reviews-bill-modal .rating-all-bill-option .feedback-icons button img {
                width: var(--px-68);
                height: var(--px-68);
            }

#reviews-bill-modal .header-portal-review {
    background: var(--active);
    color: white;
    text-align: center;
    display: flex;
    align-items: flex-start;
    padding: var(--px-20);
    flex-direction: column;
    position: relative;
    z-index: 0;
    border-radius: inherit;
    padding-bottom: var(--px-40);
    width: 100%;
}

    #reviews-bill-modal .header-portal-review img {
        width: var(--px-68);
        height: var(--px-68);
        border-radius: var(--px-68);
        margin-bottom: 10px;
    }

    #reviews-bill-modal .header-portal-review .business-name {
        font-size: 18px;
        font-weight: bold;
        color: black;
    }

    #reviews-bill-modal .header-portal-review #lottie-reviews-folio {
        position: absolute;
        right: 0;
        height: 70%;
    }

#modal-feedback-review .modal-header {
    display: flex;
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
}

#modal-feedback-review .feedback-container {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    align-items: flex-start;
}

#modal-feedback-review .modal-header h3 {
    margin: 0;
    font: normal normal 700 var(--s-20);
}

#modal-feedback-review .modal-header desc {
    font: italic normal 400 var(--s-14);
}

#modal-feedback-review .group-btn {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    justify-content: end;
}

    #modal-feedback-review .group-btn .btn-footer-modal {
        height: var(--px-40);
        min-width: var(--px-120);
        font: normal normal 600 var(--s-16);
    }

        #modal-feedback-review .group-btn .btn-footer-modal.cancel {
            border: 0;
            background: unset;
            color: var(--bs-gray-800);
        }

#modal-feedback-review textarea {
    border: 1px solid var(--bs-gray-500);
    border-radius: 4px;
    padding: var(--px-16);
    font: normal normal 500 var(--s-16);
    min-height: var(--px-80);
    background: var(--bs-gray-900);
    color: var(--txt-light);
}

    #modal-feedback-review textarea:hover,
    #modal-feedback-review textarea:focus {
        border: 1px solid var(--bs-main);
        outline: 1px solid var(--bs-main);
    }

#modal-feedback-review .modal-header {
    display: flex;
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--px-16);
    border-bottom: 2px solid var(--bs-gray-700);
}

#modal-feedback-review .feedback-container {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    align-items: flex-start;
}

    #modal-feedback-review .feedback-container .option.select-radio,
    .list-option-reason-void .option.select-radio {
        margin: var(--px-4) 0;
    }

        #modal-feedback-review .feedback-container .option.select-radio .chkbx-setting-desc,
        .list-option-reason-void .option.select-radio .chkbx-setting-desc {
            font: normal normal 400 var(--s-14);
        }

#modal-feedback-review .modal-header h3 {
    margin: 0;
    font: normal normal 700 var(--s-20);
}

#modal-feedback-review .modal-header desc {
    font: italic normal 400 var(--s-14);
}

#modal-feedback-review .group-btn {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    justify-content: end;
}

    #modal-feedback-review .group-btn .btn-footer-modal {
        height: var(--px-40);
        min-width: var(--px-120);
        font: normal normal 600 var(--s-16);
    }

        #modal-feedback-review .group-btn .btn-footer-modal.cancel {
            border: 0;
            background: unset;
            color: var(--bs-gray-800);
        }

#modal-feedback-review .modal-content {
    background: #000000bd;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 26px #de620078;
}

div.form-upload-image.multiple {
    width: 100%;
    gap: var(--px-12);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    padding: var(--px-12) 0;
    overflow-y: auto;
    height: auto;
    border: 0;
}

    div.form-upload-image.multiple label.upload-label {
        gap: 8px;
        width: var(--px-140);
        height: var(--px-140);
        border-radius: var(--px-8);
        border: 2px dashed var(--bs-gray-800);
        text-align: center;
        font: normal normal 500 var(--s-14);
    }


    div.form-upload-image.multiple .img-upload-multiple-item {
        position: relative;
        border-radius: 8px;
        border: 2px solid var(--bs-gray-800);
    }

div.img-upload-multiple-item .del-item-multiple {
    position: absolute;
    top: var(--px-8);
    right: var(--px-8);
    font-size: var(--px-24);
    color: violet;
    color: var(--bs-gray-600);
    background: var(--bs-gray-100);
    padding: var(--px-8);
    border-radius: var(--px-8);
    cursor: pointer;
    z-index: 3;
}

div.form-upload-image.multiple img {
    width: var(--px-140);
    height: var(--px-140);
    border-radius: var(--px-8);
    border: 0;
    text-align: center;
    outline: 0;
    position: relative;
}

#modalListOrder .info-amount[id="estimatedAmount-append-id"] {
    cursor: pointer;
    padding: 0;
    min-height: var(--px-48);
    font: normal normal 600 var(--s-15);
    color: var(--bs-teal);
    border-top: 1px solid var(--bs-gray-700);
    border-bottom: 1px solid var(--bs-gray-700);
}

    #modalListOrder .info-amount[id="estimatedAmount-append-id"] .bill-name {
        text-decoration: underline;
        font: normal normal 500 var(--s-15);
    }

.text-feedback {
    text-align: center;
    background: var(--bg-light);
    padding: 8px;
    border-radius: var(--px-8);
    font: normal normal 600 var(--s-20);
}

.list-option-reason-void {
    display: flex;
    gap: var(--px-2);
    flex-direction: column;
}

    .list-option-reason-void div.option.select-radio {
        height: var(--px-32);
    }

.form-box-comment {
    flex: 1;
    width: 100%;
    display: none;
    align-items: center;
    color: var(--bs-white);
    min-height: var(--px-32);
    border-radius: var(--px-24);
    background: var(--bs-gray-700);
    grid-template-columns: 1fr var(--px-48);
    font: normal normal 500 var(--s-12);
}

    .form-box-comment:focus-within {
    }

    .form-box-comment .text-custom {
        width: 100%;
        min-height: 100%;
        display: flex;
        height: max-content;
        align-items: center;
        padding: var(--px-8);
        padding-left: var(--px-16);
    }

        .form-box-comment .text-custom span {
            width: 100%;
            height: 100%;
            text-align: left;
            user-select: text;
            white-space: pre-wrap;
            word-break: break-word;
            font: normal normal 500 var(--s-14);
            border: unset;
            outline: unset;
        }


    .form-box-comment i {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--px-16);
    }

#noReceiptButton {
}

.lst-img-review-all {
    display: flex;
    gap: var(--px-8);
    align-items: center;
}

    .lst-img-review-all img {
        width: var(--px-60);
        height: var(--px-60);
        border-radius: var(--px-60);
    }


.service-name:not(.setting).soldOut {
    pointer-events: none !important;
}

.service-name.inactive {
    opacity: .4;
}

    .service-name.inactive .flex-img {
        mix-blend-mode: luminosity;
    }

.service-name.soldOut .adj-qty-item {
    display: none;
}

.service-name.soldOut .flex-img {
    mix-blend-mode: luminosity;
}

.service-name.soldOut .icon-sold-out {
    left: 50%;
    bottom: 50%;
    opacity: 1;
    position: absolute;
    width: var(--px-300);
    height: var(--px-100);
    transform: rotate(326deg) translate(-50%, -50%);
}

.item-group-select.soldOut .icon-sold-out {
    height: var(--px-32);
    width: fit-content;
    bottom: 20%;
}

button.category-go-back {
    min-width: unset;
}

#modalListOrder.noClick .modal-content {
    pointer-events: none !important;
}

#permission-form-modal,
#modal-edit-qty-order {
    z-index: 1062;
}

#modal-edit-qty-order {
}

    #modal-edit-qty-order .modal-title {
        width: 100%;
        text-align: center;
        font: normal normal 700 var(--s-24);
    }

    #modal-edit-qty-order #qty-display {
        all: unset;
        color: var(--bs-green);
        font: normal normal 700 var(--s-45);
        text-align: center;
        width: 100%;
        display: flex;
        height: var(--px-68);
    }

#lottie-animation-success {
    position: absolute;
    width: var(--px-140);
    height: var(--px-140);
    top: calc(-1 * var(--px-20));
}

.form-dis-payment-success {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    height: var(--px-160);
    position: relative;
    padding-bottom: var(--px-12);
}

    .form-dis-payment-success strong {
        color: #20c997;
        font: normal normal bold var(--s-28);
    }

version {
    z-index: 100;
    position: fixed;
    bottom: 4px;
    right: 4px;
    background: #0000004a;
    color: var(--bs-gray-500);
    font: normal normal 400 var(--s-12);
    backdrop-filter: blur(10px);
    padding: 1px 1px;
}

div.modal-content.form-select-table {
    display: flex;
}

#open-table-order-guest-qr {
    cursor: pointer;
}

    #open-table-order-guest-qr:hover {
        opacity: .4;
    }

#modalAddMenu .form--input textarea {
    height: var(--px-80);
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
}

#offcanvasItemDefLabel {
    margin: 0;
    font: normal normal 700 var(--s-24);
}

.group-item-page-setting .item-page-setting-filter label.container--checkbox {
    max-width: var(--px-32);
}

.group-item-page-setting .item-page-setting-filter.button-gr {
    flex: 1;
    justify-content: space-between;
}

.area-form-add-item {
    flex: 1;
    display: flex;
    gap: var(--px-16);
    flex-direction: column;
}

    .area-form-add-item .form--input {
    }

        .area-form-add-item .form--input.no-border {
            border: 0;
        }

        .area-form-add-item .form--input.add-option-iname {
            justify-content: end;
            border: 0;
            color: var(--bs-main);
            cursor: pointer;
            min-height: var(--px-12);
            display: flex;
            flex-direction: row;
        }

            .area-form-add-item .form--input.add-option-iname:hover {
                opacity: .4;
            }

        .area-form-add-item .form--input:focus-within {
            border-bottom: 2px solid var(--bs-main);
        }

        .area-form-add-item .form--input label.form-label {
            color: var(--bs-gray-200);
            font: normal normal 700 var(--s-11);
            text-transform: uppercase;
            margin: 0;
        }

        .area-form-add-item .form--input input {
        }

            .area-form-add-item .form--input input:focus,
            .area-form-add-item .form--input textarea:focus {
                border: 0 !important;
                outline: 0 !important;
            }

.group-btn-setting {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex: 1;
    padding-bottom: var(--px-12);
}

    .group-btn-setting button {
        border: 0;
        background: unset;
        flex: 1;
        font: normal normal 700 var(--s-14);
    }

        .group-btn-setting button[type="submit"] {
            flex: 3;
            background: var(--bs-main);
        }

#itemDefForm {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.offcanvas-body {
    padding: 0 var(--px-16);
}

.dropdown.select-g-order {
    flex: 1;
    display: flex;
    align-items: center;
    max-width: var(--px-120);
}

    .dropdown.select-g-order button#toggle-guest-order {
        background-color: #6f5300;
        color: white;
        border-radius: 6px;
        height: var(--px-48);
        border: 2px solid;
        border-color: #FF9800;
        font-weight: 600;
    }

.select-guest button.btn-select-guest.main {
    min-width: var(--px-220);
    justify-content: space-between;
    padding: 0 var(--px-16);
    font-weight: 600;
}

.select-guest button.btn-select-guest.active {
    background: #ee611936;
    color: var(--bs-main);
    border-radius: 0;
}

.select-guest button.btn-select-guest.main.total-g {
    font-weight: 700;
    font-size: var(--px-18);
    color: white;
    background: unset;
    margin: var(--px-12) 0;
}

.select-guest button.btn-select-guest.active strong {
    background: var(--bs-main);
    color: white;
}

#more-select-guest-bill {
    background-color: #6f5300;
    color: white;
    border-radius: 6px;
    height: var(--px-40);
    border: 2px solid;
    border-color: #FF9800;
    font-weight: 600;
    font-size: var(--px-20);
    min-width: var(--px-48);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-guest-dur {
    display: flex;
    gap: var(--px-6);
    align-items: self-end;
}

    .flex-guest-dur .open-note-item {
        gap: 2px;
        font-size: var(--px-16);
    }

        .flex-guest-dur .open-note-item i {
            font-size: var(--px-14);
        }

.group-durtion-adj-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.management--page {
    --back-management: #212729;
    /* Parent container */
    width: 100%;
    color: var(--txt-light);
    display: flex;
    overflow: hidden;
}

    .management--page .management-main-start {
        /* Main content wrapper */
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--px-16);
        padding: var(--px-16);
    }

    .management--page .manament-starts {
        /* Card group container */
        display: flex;
        align-items: center;
        gap: var(--px-16);
    }

    .management--page .manament-card {
        /* Individual card */
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--px-16);
        background-color: var(--back-management);
        padding: var( --px-16);
        border-radius: var( --px-8);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        min-width: var(--px-200);
        overflow: hidden;
    }

        .management--page .manament-card i {
            /* Icon inside card */
            height: var(--px-44);
            min-width: var(--px-44);
            border-radius: var(--px-8);
            background: var(--bs-main);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--px-20);
            color: white;
        }

        .management--page .manament-card .detail-card {
            /* Card details container */
        }

            .management--page .manament-card .detail-card p {
                /* Text label in card */
                margin: 0;
                font-size: var(--px-14);
                color: #bbb;
            }

            .management--page .manament-card .detail-card strong {
                /* Value in card */
                font-size: var(--px-20);
                color: #fff;
            }

    .management--page .management-order-overview {
        /* Charts and overview container */
        display: grid;
        align-items: center;
        gap: var(--px-16);
        grid-template-columns: repeat(6, 1fr);
        overflow: auto;
    }

    .management--page .form--chart-overview {
        /* Chart box wrapper */
        grid-column: span 2;
        display: flex;
        flex-direction: column;
        height: var(--px-360);
        background: var(--back-management);
        padding: var(--px-16);
        border-radius: var(--px-8);
        gap: var(--px-16);
    }

        .management--page .form--chart-overview.total-revenue {
            /* Specific: total revenue chart */
            grid-column: span 3;
        }

        .management--page .form--chart-overview.top-categories {
            /* Specific: top categories chart */
        }

        .management--page .form--chart-overview.total-orders {
            /* Specific: total orders chart */
            grid-column: span 3;
        }

        .management--page .form--chart-overview .header-chart {
            /* Chart header container */
            flex: 1;
            width: 100%;
            display: flex;
            max-height: var(--px-48);
            justify-content: space-between;
        }

            .management--page .form--chart-overview .header-chart .start-h-chart {
                /* Start section of chart header */
            }

                .management--page .form--chart-overview .header-chart .start-h-chart p {
                    /* Chart title */
                    margin: 0;
                    font-size: var(--px-14);
                    color: #bbb;
                }

                .management--page .form--chart-overview .header-chart .start-h-chart.only-txt p {
                    margin: 0;
                    color: #fff;
                    font-size: var(--px-18);
                    font-weight: 700;
                }

                .management--page .form--chart-overview .header-chart .start-h-chart strong {
                    /* Chart value */
                    font-size: var(--px-20);
                    color: #fff;
                }

            .management--page .form--chart-overview .header-chart .end-h-chart {
                /* End section of chart header */
                display: flex;
                align-items: center;
                gap: var(--px-16);
            }

                .management--page .form--chart-overview .header-chart .end-h-chart .btn-filter-chart {
                    /* Filter button */
                    border: 1px solid var(--bs-gray-dark);
                    background: unset;
                    font-size: var(--px-12);
                    height: var(--px-44);
                    border-radius: var(--px-8);
                }

                    .management--page .form--chart-overview .header-chart .end-h-chart .btn-filter-chart span {
                        /* Filter text */
                    }

                    .management--page .form--chart-overview .header-chart .end-h-chart .btn-filter-chart i {
                        /* Filter icon */
                    }

        .management--page .form--chart-overview .append-chart-order {
            /* Chart content container */
            flex: 1;
            width: 100%;
            display: flex;
            gap: var(--px-16);
            flex-direction: column;
        }

            .management--page .form--chart-overview .append-chart-order.revenue {
                /* Specific: revenue chart content */
            }

            .management--page .form--chart-overview .append-chart-order.top-categories {
                /* Specific: top categories chart content */
                overflow: hidden;
            }

            .management--page .form--chart-overview .append-chart-order.total-orders {
                /* Specific: total orders chart content */
            }

    .management--page .management-main-end {
        /* Right-side content container */
        flex: 1;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        gap: var(--px-16);
        padding: var(--px-16);
        max-width: var(--px-300);
    }

        .management--page .management-main-end .trending-menu-ord {
            /* Trending menu section */
            width: 100%;
            display: flex;
            gap: var(--px-16);
            flex-direction: column;
            overflow: hidden;
            border-radius: var(--px-8);
        }

            .management--page .management-main-end .trending-menu-ord .header-main-end {
                /* Header for trending menu */
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

                .management--page .management-main-end .trending-menu-ord .header-main-end p {
                    /* Section title */
                }

                .management--page .management-main-end .trending-menu-ord .header-main-end .btn-filter-chart {
                    /* Time filter button */
                    border: 1px solid var(--bs-gray-dark);
                    background: unset;
                    font-size: var(--px-12);
                    height: var(--px-36);
                    border-radius: var(--px-8);
                }

                    .management--page .management-main-end .trending-menu-ord .header-main-end .btn-filter-chart span {
                        /* Filter label */
                    }

                    .management--page .management-main-end .trending-menu-ord .header-main-end .btn-filter-chart i {
                        /* Filter icon */
                    }

            .management--page .management-main-end .trending-menu-ord .list-trending-order-append {
                /* Trending menu list container */
                display: flex;
                flex-direction: column;
                gap: var(--px-16);
                overflow: auto;
            }

                .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend {
                    /* Single trending item box */
                    display: flex;
                    gap: var(--px-16);
                    border-radius: var(--px-8);
                    padding: var(--px-16);
                    align-items: center;
                    background: var(--back-management);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                    flex-direction: column;
                }

                    .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-img {
                        /* Image container */
                        flex-shrink: 0;
                        width: 100%;
                        height: var(--px-136);
                        border-radius: var(--px-12);
                        overflow: hidden;
                        background-color: #444;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                        .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-img .img-service {
                            /* Food image */
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 12px;
                        }

                        .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-img i {
                            /* Fallback icon */
                            font-size: var(--px-40);
                        }

                    .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info {
                        /* Info section */
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                    }

                        .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info .name {
                            /* Dish name */
                            color: white;
                            font: normal normal 700 var(--s-15);
                        }

                        .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info .flex-info {
                            /* Flex container for rating and price */
                            flex: 1;
                            display: flex;
                            align-items: center;
                            gap: var(--px-12);
                            font-size: var(--px-14);
                            color: #ccc;
                        }

                        .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info .name-cate {
                            /* Star rating block */
                            font-size: var(--px-12);
                            color: var(--bs-gray-600);
                            font-weight: 500;
                        }

                        .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info .flex-info span {
                            /* Star rating block */
                        }

                            .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info .flex-info span i {
                                /* Star icon */
                                color: var(--bs-gray-600);
                                font-weight: 600;
                            }

                                .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info .flex-info span i.fa-cart-circle-check {
                                    /* Star icon */
                                    /* color: var(--bs-teal); */
                                }

                            .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info .flex-info span span {
                                /* Star score */
                                color: white;
                                font: normal normal 500 var(--s-14);
                            }

                        .management--page .management-main-end .trending-menu-ord .list-trending-order-append .box-item-trend .trend-info .flex-info strong {
                            /* Price */
                            margin-left: auto;
                            color: var(--bs-main);
                        }


    .management--page .search-filter {
        /* Search filter */
        display: flex;
        gap: var(--px-8);
        align-items: center;
        padding: var(--px-8);
        border-radius: var(--px-8);
        background: var(--bs-gray-800);
    }

        .management--page .search-filter i {
            height: var(--px-28);
            width: var(--px-28);
            font-size: var(--px-20);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .management--page .search-filter input {
            border: 0;
            outline: 0;
            padding: 0;
            background: unset;
            color: var(--txt-light);
        }

    /* Container review recent orders */


    .management--page .form--chart-overview.recent-orders {
        grid-column: span 4;
    }

    .management--page .append-chart-order.recent-orders {
    }

    .management--page .append-chart-order.recent-orders {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
        gap: var(--px-16);
        position: relative;
    }

    .management--page .item-row--ord {
        display: flex;
        gap: var(--px-16);
        align-items: center;
        font-size: var(--px-14);
        padding: 2px var(--px-12);
    }

        .management--page .item-row--ord.header {
            background: var(--bs-gray-800);
            border-radius: var(--px-8);
            position: sticky;
            z-index: 1;
            top: 0;
            font-weight: 600;
            width: fit-content;
        }

        .management--page .item-row--ord .col--item {
            flex: 1;
            white-space: nowrap;
        }

            .management--page .item-row--ord .col--item.idx {
                max-width: var(--px-60);
            }

            .management--page .item-row--ord .col--item.method {
                min-width: var(--px-120);
            }

            .management--page .item-row--ord .col--item.img {
                max-width: var(--px-68);
            }

                .management--page .item-row--ord .col--item.img img {
                    width: var(--px-68);
                    border-radius: var(--px-8);
                }

            .management--page .item-row--ord .col--item.col--menu {
                gap: 4px;
                display: flex;
                flex-direction: column;
                font: normal normal 400 var(--s-14);
                white-space: nowrap;
                min-width: var(--px-200);
            }

                .management--page .item-row--ord .col--item.col--menu span {
                    color: var(--bs-gray-500);
                    font: normal normal 400 var(--s-12);
                }

            .management--page .item-row--ord .col--item.qty {
                min-width: var(--px-48);
                max-width: var(--px-48);
            }

            .management--page .item-row--ord .col--item.price {
                color: var(--bs-main-500);
                font-weight: 700;
                max-width: var(--px-100);
                min-width: var(--px-100);
            }

        .management--page .item-row--ord.header .col--item {
            font: normal normal 600 var(--s-14);
        }

            .management--page .item-row--ord.header .col--item.price {
                color: var(--txt-light);
            }

        .management--page .item-row--ord .col--item.cus-name {
        }

        .management--page .item-row--ord .col--item.col-status {
            max-width: var(--px-108);
            font: normal normal 600 var(--s-14);
            display: flex;
            align-items: center;
            height: var(--px-36);
            border-radius: 6px;
            justify-content: center;
        }

        .management--page .item-row--ord.header .col--item.col-status {
            justify-content: start;
        }

        .management--page .item-row--ord .col--item.col-status.on.process {
            background: var(--bs-main-900);
            color: var(--bs-main-300);
        }

        .management--page .item-row--ord .col--item.col-status.completed {
            background: var(--bs-main);
            color: white;
            text-transform: uppercase;
            font: normal normal 600 var(--s-12);
        }

        .management--page .item-row--ord .col--item.col-status.cancellation {
            background: var(--black);
        }

    /* Container review item */

    .management--page .form--chart-overview.reviews {
        /* container for one review item */
        grid-column: span 6;
        height: auto;
        background: unset;
    }

    .management--page .form--chart-overview .append-chart-order.review {
        /* Chart content container */
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: var(--px-16) var(--px-64);
        flex-wrap: wrap;
        padding-left: var(--px-32);
    }

    .management--page .item-review--ord {
        /* container for one review item */
        flex: 1;
        display: flex;
        gap: var( --px-12);
        background: var( --back-management);
        padding: var( --px-16);
        border-radius: var( --px-8);
        position: relative;
        padding-left: var( --px-100);
        height: var( --px-150);
        min-width: calc(50% - var(--px-32));
        max-width: calc(50% - var(--px-32));
    }

        .management--page .item-review--ord .col--review.img {
            /* image column */
            height: var(--px-120);
            border-radius: var(--px-8);
            overflow: hidden;
            max-width: var(--px-120);
            position: absolute;
            left: calc(-1 * var(--px-32));
            box-shadow: 0 0px 10px 0px #000000e3;
            background: var(--bg-light);
        }

            .management--page .item-review--ord .col--review.img img.img-service {
                /* service image */
                height: 100%;
            }

            .management--page .item-review--ord .col--review.img i.fa-pot-food {
                /* icon inside image column */
            }

        .management--page .item-review--ord .col--review {
            flex: 1;
        }

            .management--page .item-review--ord .col--review.menu {
                /* menu column */
                gap: 4px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font: normal normal 500 var(--s-14);
            }

                .management--page .item-review--ord .col--review.menu > strong {
                    /* menu title */
                    color: white;
                    font-weight: 700;
                }

                .management--page .item-review--ord .col--review.menu > span {
                    /* menu category */
                    font-size: var(--px-12);
                    color: var(--bs-gray-600);
                }

                .management--page .item-review--ord .col--review.menu .menu--info {
                    /* menu info container */
                    flex: 1;
                    display: flex;
                    align-items: flex-end;
                    gap: 6px;
                }

                    .management--page .item-review--ord .col--review.menu .menu--info i {
                        /* icon inside menu info */
                        color: var(--bs-gray-600);
                    }

                    .management--page .item-review--ord .col--review.menu .menu--info strong {
                        /* strong number inside menu info */
                        color: white;
                        font-weight: 600;
                    }

                    .management--page .item-review--ord .col--review.menu .menu--info span {
                        /* span inside menu info */
                        color: var(--bs-gray-600);
                    }

            .management--page .item-review--ord .col--review.rate {
                /* rate column */
                flex: 2;
                font: normal normal 500 var(--s-14);
                color: var(--bs-gray-600);
                display: flex;
                flex-direction: column;
                gap: var(--px-16);
            }

                .management--page .item-review--ord .col--review.rate .rate--info {
                    /* rate info container */
                }

                    .management--page .item-review--ord .col--review.rate .rate--info i.fa-star {
                        /* star icons inside rate info */
                        color: var(--bs-gray-500);
                    }

                        .management--page .item-review--ord .col--review.rate .rate--info i.fa-star.rated {
                            /* star icons inside rate info */
                            color: var(--bs-warning);
                        }

                    .management--page .item-review--ord .col--review.rate .rate--info .over-rate {
                        /* rating text inside rate info */
                    }

                    .management--page .item-review--ord .col--review.rate .rate--info .date-rate {
                        /* date text inside rate info */
                    }

                .management--page .item-review--ord .col--review.rate .rate--message {
                    flex: 1;
                }

                    .management--page .item-review--ord .col--review.rate .rate--message p {
                        /* rate message paragraph */
                    }

                .management--page .item-review--ord .col--review.rate p.cus-reviews {
                    /* customer name */
                    font-weight: 600;
                    color: white;
                }

/* Remove background from apexcharts-svg element */
.apexcharts-svg {
    background: none !important; /* Remove background */
}

/* If needed, also remove background for the zoomable area */
.apexcharts-zoomable {
    background: none !important; /* Remove background for zoomable area */
}

.apexcharts-legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--px-12);
}

#topCategoriesChart {
    flex: 1;
    margin: auto;
    max-width: var(--px-200);
    max-height: var(--px-200);
}

.legend-grid {
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--px-8);
    white-space: nowrap;
    overflow: hidden auto;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font: normal normal 500 var(--s-12);
}

.legend-box {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-text {
    font-weight: 600;
    font-size: var(--px-12);
    color: var(--bs-gray-600);
}

.legend-percent {
    margin-left: 3px;
    color: var(--bs-gray-200);
    font-size: var(--px-14);
}

.dropdown-menu .star.active {
    background-color: var(--bs-main-900);
    font-weight: bold;
}

.form-config-info-outlet {
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
    padding: var(--px-20);
    border-radius: var(--px-8);
    margin-top: var(--px-24);
    background: var(--bs-gray-900);
    box-shadow: 0 2px 12px #00000050;
}

    .form-config-info-outlet .txt-name {
        color: white;
        font: normal normal 700 var(--s-18);
    }

    .form-config-info-outlet .store-time-config {
        height: auto;
        display: grid;
        gap: var(--px-16);
        grid-template-columns: 1fr 1fr;
    }

        .form-config-info-outlet .store-time-config .form--input {
            grid-column: span 1;
        }

            .form-config-info-outlet .store-time-config .form--input span {
                font: normal normal 700 var(--s-16);
            }

            .form-config-info-outlet .store-time-config .form--input i {
                color: var(--bs-gray-600);
            }

            .form-config-info-outlet .store-time-config .form--input input {
                font-size: var(--px-18);
                font-weight: 700;
            }

    .form-config-info-outlet .invalid {
        border: 2px solid;
        border-color: red;
        background-color: #ff000024;
    }


button.show-when-order-by-qrcode {
    background: #d7383a6e;
}

    button.show-when-order-by-qrcode i {
        color: white !important;
        font-weight: 300;
    }

    button.show-when-order-by-qrcode span {
        font: normal normal 700 var(--s-18);
        color: white;
        flex: 1;
    }


button.category-go-back i {
    font-size: var(--px-44);
    color: var(--bs-main-400);
}

.form-setting-large {
    width: 100%;
    display: grid;
    grid-gap: var(--px-24);
    grid-template-columns: 1fr 1fr;
}

.append-general-settings-send-order-by-pdaconfig {
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--bs-gray-800);
}

.form-setting--col {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
}

.form-account-settings.grid-full {
    grid-column: span 2;
}

.form-account-settings .divider-form {
    border-top: 2px solid var(--bs-gray-700);
    font: normal normal 700 var(--s-16);
    padding-top: var(--px-20);
    color: var(--txt-light);
    margin-top: var(--px-12);
}

    .form-account-settings .divider-form.no-border {
        border-top: 0;
        padding: 0;
        margin: 0;
    }

.reprint-page .tab-container {
    width: 100%;
    /* max-width: 800px; */
    padding-left: 5%;
    padding-right: 5%;
    margin: 0 auto;
}

.reprint-page .tab-header {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.reprint-page .tab-button {
    padding: 10px 20px;
    background: #ddd;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

    .reprint-page .tab-button:hover {
        background: #ddd;
    }

    .reprint-page .tab-button.active {
        background: #ee6119;
        color: white;
    }

.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}

.reprint-page .tab-content.active {
    display: block;
}

.tooltip-inner {
    background-color: #000;
    color: #fff;
    border: 1px solid #ff0000;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #ff0000;
}

.filter-option-print select {
    background: #1a1a1a;
    padding: var(--px-12);
    border-radius: var(--px-8);
    color: var(--txt-light);
    border: 1px solid var(--bs-gray-800);
    width: var(--px-220);
    font: normal normal 500 var(--s-14);
}

    .filter-option-print select option {
        background-color: #1a1a1a;
        color: var(--txt-light);
    }

.notice-input {
    display: flex;
    align-items: center;
    font: italic normal 500 var(--s-16);
    color: var(--bs-gray-200);
    grid-column: span 2;
    padding: 12px;
    background: var(--bs-gray-900);
    border-radius: 4px;
    backdrop-filter: blur(10px);
}

#filterInvoiceModal {
    position: absolute;
    /* top: 100%; */
    left: 0;
    margin-top: 5px;
}

    #filterInvoiceModal .modal-content {
        background-color: #1a1a1a;
        border: var(--txt-light) 1px solid;
    }

.filter-container {
    position: relative;
    display: inline-block;
    /* margin-bottom: 10px; */
    margin-left: auto;
    position: absolute;
    right: 20px;
    top: 16px;
}

.filter-icon {
    cursor: pointer;
    font-size: 20px;
    color: #333;
    padding: 5px;
}

.filter-popup {
    display: none;
    position: absolute;
    top: 30px;
    right: 0;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    width: 150px;
    background-color: var(--bs-surface-bg);
}

    .filter-popup label {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
    }

    .filter-popup div.option.select-radio {
        align-items: center;
    }

#invoiceTableBody .active-row td {
    background-color: var(--green);
}

.switch-payment-method {
    display: flex;
    align-items: center;
    border: 1px solid var(--bs-gray-500);
    border-radius: 8px;
    padding: 4px;
}

    .switch-payment-method .btn-sw-pay {
        flex: 1;
        background: unset;
        color: white;
        font: normal normal 600 var(--s-16);
    }

        .switch-payment-method .btn-sw-pay.active {
            background: var(--bs-gray-600);
        }

.print-by-menu {
    cursor: pointer;
    padding: 10px;
    border-radius: 100%;
    color: white !important;
    border: 2px solid var(--bs-gray-800);
}

.printer-by-menu-form {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
}

    .printer-by-menu-form .print-head {
        color: white;
        padding: var(--px-20) var(--px-16) var(--px-8);
        font: normal normal 700 var(--s-20);
    }

    .printer-by-menu-form .printer-list {
        display: flex;
        gap: var(--px-4);
        padding: 0 var(--px-16);
        flex-direction: column;
    }

    .printer-by-menu-form button.assign-printer {
        margin: 4px 16px;
    }

.nav-tabs {
    flex-wrap: nowrap;
    width: 100%;
    /* overflow: auto hidden; */
    padding-top: var(--px-40);
}

    .nav-tabs li {
        flex: 1;
    }

    .nav-tabs .nav-link {
        color: var(--bs-gray-600);
        font: normal normal 500 var(--s-16);
    }

#resetDishes {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    font: normal normal 500 var(--s-18);
}

.name-lang-css {
    font: normal normal 600 var(--s-16);
    color: var(--bs-gray-200);
}

.tab-pane.active {
    overflow: auto;
}

.box-select-method i.fa-circle-dollar {
    color: var(--bs-teal);
}

.form-guest-room {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    grid-column: span 12;
    border-radius: 4px;
    overflow: auto;
}

    .form-guest-room .item-folio-g {
        display: flex;
        padding: var(--px-20) var(--px-12);
        gap: var(--px-12);
        align-items: center;
        font: normal normal 400 var(--s-16);
        border-bottom: 1px solid var(--bs-gray-600);
    }

        .form-guest-room .item-folio-g:hover {
            cursor: pointer;
            color: white;
            background: var(--bs-main-900);
        }

        .form-guest-room .item-folio-g span {
            flex: 1;
            max-width: var(--px-60);
        }

        .form-guest-room .item-folio-g.head {
            background: var(--bs-dark);
            font: normal normal 600 var(--s-16);
        }

        .form-guest-room .item-folio-g span.name {
            max-width: unset;
        }

        .form-guest-room .item-folio-g span:last-of-type {
            max-width: var(--px-80);
        }

.form--input.search-room {
    grid-column: span 8;
}

    .form--input.search-room input {
        border-radius: 6px;
        text-transform: uppercase;
    }

button.btn-send-payment-action.search-room {
    grid-column: span 4;
    height: var(--px-48);
}

.switch-button {
    gap: 4px;
    display: flex;
    align-items: center;
    height: var(--px-44);
    border-radius: 24px;
    padding: 4px;
    border: 2px solid var(--bs-gray-700);
}

    .switch-button .btn.btn-switch {
        min-width: var(--px-32);
        height: var(--px-32);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        color: var(--bs-gray-400);
    }

        .switch-button .btn.btn-switch.active {
            color: white;
            background: var(--bs-main-500);
        }

.box--list-table {
    display: flex;
    color: var(--bs-gray-300);
    padding: var(--px-16);
    flex-direction: column;
    min-width: var(--px-400);
    border: 1px solid var(--bs-gray-800);
    border-radius: 6px;
    gap: 6px;
    backdrop-filter: blur(4px);
    background: #8888883d;
    min-height: var(--px-80);
    max-height: var(--px-80);
    width: var(--px-500);
}

    .box--list-table .row--list-table {
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--px-12);
    }

    .box--list-table .table-name {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        font: normal normal 600 var(--s-14);
    }

    .box--list-table .table-comp .ticket-no {
        color: var(--bs-main-400);
        font-weight: 300;
    }

    .box--list-table .table-name {
    }

        .box--list-table .table-name .fa-utensils {
            color: var(--bs-main-400);
            border-radius: var(--px-12);
            font-weight: 600;
            font-size: var(--px-14);
        }

    .box--list-table .table-payment {
        display: flex;
        gap: var(--px-12);
    }

        .box--list-table .table-payment strong {
            color: var(--bs-teal);
        }

    .box--list-table .group-last {
        display: flex;
        gap: 4px;
        align-items: center;
        justify-content: end;
        color: white;
        font: normal normal 500 var(--s-14);
    }

    .box--list-table .table-comp.status {
        background: #32000569;
        color: #ff5263;
        border-radius: var(--px-20);
        font: normal normal 500 var(--s-12);
        padding: 2px 6px;
        text-transform: capitalize;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

        .box--list-table .table-comp.status.sent {
            background: #00245873;
            color: var(--bs-blue);
        }

        .box--list-table .table-comp.status.completed {
            background: #00381e96;
            color: var(--bs-green);
        }

        .box--list-table .table-comp.status.paid {
            background: var(--bs-green);
            color: white;
        }

    .box--list-table .table-comp:not(.status, .table-name) i {
        color: var(--bs-gray-700);
    }

#canvas-signature {
    position: relative;
    z-index: 9999; /* above overlay */
}

#save-canvas-sign,
#clear-canvas-sign,
#cancel-canvas-sign {
    position: relative;
    z-index: 9999; /* keep buttons above overlay */
}

.page-overlay-disabled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998; /* below the canvas and buttons */
    background: rgba(255, 255, 255, 0);
    pointer-events: all;
}

.no-pointer-events {
    pointer-events: none !important;
}

#modal-add-client-bill {
    z-index: 1057;
}

.btn-payment-vnpay-portal {
    gap: 10px;
    width: 100%;
    background: var(--bs-main-400);
    display: flex;
    flex-direction: row-reverse;
    border: 0px solid var(--bs-main-300);
    margin-bottom: var(--px-16);
    justify-content: space-between;
    height: var(--px-52);
    font: normal normal 600 var(--s-16);
}

    .btn-payment-vnpay-portal i {
        font-size: var(--px-20);
    }

    .btn-payment-vnpay-portal img {
        height: var(--px-16);
        margin-right: 12px;
    }

    .btn-payment-vnpay-portal.payos {
        background: #245940c9;
    }

        .btn-payment-vnpay-portal.payos img {
            height: var(--px-20);
        }

.area-qrcode-generate {
    display: flex;
    gap: var(--px-12);
    overflow: hidden;
}

    .area-qrcode-generate .setting-qrcode-without-table {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0px;
        border-radius: 12px;
        color: var(--bs-gray-200);
        margin-bottom: auto;
        max-width: var(--px-400);
    }

        .area-qrcode-generate .setting-qrcode-without-table p {
            font: normal normal 700 var(--s-20);
        }

        .area-qrcode-generate .setting-qrcode-without-table .view-qrcode-table {
            background: var(--bs-gray-700);
        }

            .area-qrcode-generate .setting-qrcode-without-table .view-qrcode-table span {
                color: var(--bs-gray-200);
                font: normal normal 600 var(--s-14);
            }

        .area-qrcode-generate .setting-qrcode-without-table span {
            font: normal normal 400 var(--s-14);
            color: var(--bs-gray-500);
        }

        .area-qrcode-generate .setting-qrcode-without-table .info-store {
            font: normal normal 400 var(--s-14);
            color: var(--bs-gray-200);
            line-height: 24px;
        }

    .area-qrcode-generate #qrcode-without-table {
        margin-top: 8px;
        border: 1px solid var(--bs-gray-700);
        border-radius: 8px;
        height: var(--px-300);
        padding: 12px;
        width: var(--px-300);
        margin: 0 auto;
        background: white;
    }

        .area-qrcode-generate #qrcode-without-table img {
            height: 100%;
            width: 100%;
        }

.header-qrcode-without {
    gap: 4px;
    display: flex;
    flex-direction: column;
}

.area-qrcode-generate .chkbx-setting-desc p {
    font: normal normal 600 var(--s-16);
}

.area-qrcode-generate .chkbx-setting-desc span {
    font: normal normal 400 var(--s-14);
}

.area-qrcode-generate .area-scan-qrcode-default {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 12px;
    background: var(--bs-gray-900);
    color: var(--bs-gray-200);
    padding: 24px;
}

#modalListOrder.has-paid.full-page-w .info-bill-summary {
    background-image: url('/Images/paid.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
}

#btn-send-order-on-bill {
    height: var(--px-52);
    font: normal normal 600 var(--s-16);
}

.swal2-html-container textarea {
    border: unset;
    border-radius: var(--px-8);
    padding: var(--px-12);
    color: var(--txt-light);
    font: normal normal 500 var(--s-14);
    max-height: var(--px-400);
    min-height: var(--px-120);
    background: var(--black-64);
    font: normal normal 500 var(--s-14);
    width: var(--px-400);
}

    .swal2-html-container textarea:focus {
        outline: unset;
    }

.btn-done-when-has-paid {
    width: 100%;
    height: var(--px-52);
    margin-bottom: 12px;
    font: normal normal 600 var(--s-16);
}

#form-add-edit-service {
    padding: 0;
    grid-gap: var(--px-20) var(--px-12);
}

.menu-option-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    .menu-option-select div.option.select-radio {
        align-items: center;
        gap: 6px;
    }

#modalAddMenu {
    width: var(--px-480);
}

    #modalAddMenu .modal-content {
        padding: 8px;
    }

.option-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    padding: 0px;
}

    .option-item input[type="text"] {
        background: transparent;
        border: none;
        color: #fff;
        flex: 1;
        outline: none;
    }

.option-list .remove-option {
    background: none;
    border: none;
    color: #f87171;
    font-size: var(--px-16);
    cursor: pointer;
    min-width: unset;
}

.add-option-btn {
    min-width: unset;
    width: max-content;
    height: var(--px-36);
    font: normal normal 500 var(--s-14);
}

.add-note-form-popup {
    display: flex;
    flex-direction: column;
    font: normal normal 700 var(--s-22);
    min-width: var(--px-500);
    max-height: 100%;
    color: var(--txt-light);
    justify-content: space-between;
    box-shadow: 0 2px 16px #d1d1d1;
    background: #1E1E1E;
    overflow: auto;
}

    .add-note-form-popup .header-g-s {
        padding: var(--px-20);
    }

    .add-note-form-popup .group-action-note {
        gap: 8px;
        display: flex;
        flex-direction: column;
        padding: var(--px-20);
        border-top: 1px solid var(--bs-gray-700);
    }

    .add-note-form-popup .title-note {
        font: normal normal 500 var(--s-14);
        color: #d1d1d1;
    }

    .add-note-form-popup .list-option-request-order {
        gap: 2px;
        display: flex;
        flex-direction: column;
    }

        .add-note-form-popup .list-option-request-order div.option.select-radio {
            align-items: center;
        }

    .add-note-form-popup textarea {
        padding: 10px;
        background: #2a2a2a;
        border: 1px solid #3a3a3a;
        border-radius: 6px;
        color: #fff;
        font: normal normal 400 var(--s-14);
        outline: none;
        transition: border 0.3s;
    }

    .add-note-form-popup .select-items-popup {
        padding: 4px var(--px-20);
    }

footer .footer-policy {
    display: flex;
    align-items: center;
    gap: var(--px-12);
}

    footer .footer-policy .btn-text-popup {
        background: 0;
        color: var(--bs-gray-500);
        text-decoration: underline;
        font: normal normal 400 var(--s-12);
        height: var(--px-20);
        padding: 0;
        min-width: max-content;
    }

footer .logo-system {
    /* position: absolute; */
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--bs-gray-500);
    font: normal normal 400 var(--s-12);
}

.swal-title {
    max-width: 100% !important;
    text-transform: uppercase;
    color: var(--bs-gray-200) !important;
    text-align: unset !important;
    font: normal normal 700 var(--s-20) !important;
}

.swal-text {
    text-align: unset !important;
}

#form-setting-operation-outlet-full .form-setting--col,
#form-setting-setting-outlet-full .form-setting--col {
    grid-column: span 2;
}

.form--loading {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 123;
    color: white;
    display: flex;
    gap: var(--px-12);
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: var(--px-20);
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.5);
}

    .form--loading .fa-spin {
        font-size: var(--px-32);
    }

.box--list-table.has-paid {
    border: 2px solid var(--bs-main-400);
}

.order-subject {
    flex: 1;
    font: italic normal 400 var(--s-13);
}

.group-infor-client {
    display: flex;
    flex-direction: column;
    gap: var(--px-8);
    position: relative;
    border-bottom: 1px solid var(--bs-border-strong);
    padding-bottom: var(--px-12);
}

.export-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    color: white;
}

    .export-loading .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
    }

    .export-loading p {
        font-size: 16px;
        margin: 0;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


.group-filter-func-order .header--detail {
    flex: 1;
    width: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    font: normal normal 500 var(--s-18);
    text-transform: capitalize;
}

    .group-filter-func-order .header--detail img {
        height: var(--px-48);
        width: var(--px-48);
        border-radius: var(--px-48);
    }

    .group-filter-func-order .header--detail i {
        position: absolute;
        bottom: -2px;
        margin: 0 !important;
        font-size: var(--px-20);
        left: var(--px-36);
        background: var(--bs-surface-bg);
        border: 3px solid var(--bs-surface-bg);
        border-radius: 100%;
    }

.form-select-order.open.form-order-custom-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.services-append-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.btn-head-order {
    background: 0;
    border: 1px solid var(--bs-border-color)
}


.cate-block-group {
    display: flex;
    flex-direction: row;
    gap: var(--px-12);
    background: var(--bs-secondary-rgb);
}

.cate-title {
    font: normal normal 500 var(--s-18);
    text-transform: capitalize;
    border-bottom: 1px solid var(--bs-border-strong);
    padding: var(--px-12) 0;
    margin-bottom: var(--px-8);
}

.cate-count {
    font-size: var(--px-16);
    color: var(--bs-text-muted);
}

.cate-menu {
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    position: sticky;
    top: 0;
    z-index: 1;
    max-width: var(--px-240);
    min-width: var(--px-240);
    background: var(--bs-surface-bg);
    border-right: 2px solid var(--bs-border-color);
    overflow: auto;
    height: 100%;
}

.cate-list-filter {
    display: flex;
    gap: 2px;
    overflow: auto;
    flex-direction: column;
    padding: 0 12px;
}

.cate-item-filter {
    background: 0;
    color: var(--bs-text);
    min-height: var(--px-36);
    font-size: var(--px-12);
    background: transparent;
    white-space: nowrap;
    font-weight: 500;
    justify-content: start;
    max-height: var(--px-36);
    min-height: var(--px-36);
    border-radius: 24px;
    transition: all .2s;
}

    .cate-item-filter.active {
        background: var(--bs-border-color);
        color: var(--bs-body-color);
        box-shadow: var( --bs-shadow-md);
        font-weight: 700;
        border-radius: 24px;
        border: 1px solid var(--bs-border-color);
    }

.group-cate-item {
    grid-column: 1 / -1;
    color: var(--bs-text);
    font: normal normal 700 var(--s-16);
    border-bottom: 3px solid var(--bs-main-700);
    display: flex;
    align-items: center;
    gap: var(--px-8);
    height: var(--px-52);
    padding: var(--px-12);
    padding-bottom: 0;
    margin: 0 4px;
    padding-left: 0;
}

    .group-cate-item .fa-bars {
        color: var(--bs-text-muted);
        font-weight: 300;
    }

    .group-cate-item .count-service {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--px-24);
        width: var(--px-24);
        background: var(--bs-green);
        border-radius: var(--px-16);
        padding: 0;
        font: normal normal 600 var(--s-12);
        color: white;
        line-height: 2px;
    }

.item-services-append {
    flex: 1;
    display: grid;
    grid-gap: var(--px-12);
    grid-template-columns: repeat(auto-fill, minmax(var(--px-360), 1fr));
    grid-auto-rows: max-content;
    padding: var(--px-12) 0;
    overflow: auto;
    height: 100%;
}

    .item-services-append .service-name {
        all: unset;
        color: var(--bs-text);
        display: flex;
        border: 1px solid var(--bs-border-color);
        font: normal normal 300 var(--s-16);
        overflow: hidden;
        transition: all .2s;
        position: relative;
        flex-direction: column;
        background: var(--bs-surface-bg-o);
        gap: var(--px-8);
        border-radius: var(--px-12);
    }

    .item-services-append .info-img-item {
        flex: 1;
        display: flex;
        width: 100%;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .item-services-append .info-service {
        all: unset;
        display: flex;
        padding: var(--px-12);
        font: normal normal 500 var(--s-16);
        flex-direction: column;
        background: var(--bs-surface-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: 8px;
        min-height: max-content;
        margin: var(--px-8);
        margin-top: 0;
    }

    .item-services-append .service-name .pinch-to-zoom {
        bottom: 0;
        right: 0px;
        gap: 2px;
        position: absolute;
        display: none;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        font: normal normal 400 var(--s-14);
        backdrop-filter: blur(1px);
        padding: 4px;
        backdrop-filter: blur(2px);
        color: var(--bs-text-muted);
    }

.info-img-item {
    flex: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border-radius: var(--px-8);
}

    .info-img-item .pinch-to-zoom {
        bottom: 0;
        right: 0px;
        gap: 2px;
        position: absolute;
        display: none;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        font: normal normal 400 var(--s-14);
        backdrop-filter: blur(1px);
        padding: 4px;
        backdrop-filter: blur(2px);
        color: var(--bs-text-muted);
    }

body[newmenu="1"] .select-items-popup {
    background: inherit;
    border-radius: 0;
    height: var(--px-68);
}


body[newmenu="1"] .popup-content .service-name .info-service {
    max-height: var(--px-100);
    flex-direction: row;
}

body[newmenu="1"] .service-name .info-service {
    all: unset;
    display: flex;
    padding: var(--px-12);
    font: normal normal 500 var(--s-16);
    flex-direction: column;
    background: var(--bs-surface-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    min-height: max-content;
    margin: var(--px-8);
}

body[newmenu="1"] .service-name price {
    all: unset;
    color: var(--bs-teal);
}

.accordion--setting-content.container-append-service {
    flex-direction: row;
}

#append-service-order-id {
    overflow: hidden;
}

#modalListOrder .modal-fullscreen .modal-content {
    height: 100% !important;
}

#modalAddMenu {
    width: var(--px-640);
}

.form--input button.dropdown-toggle#dropdownMenuButton {
    max-width: 100%;
    width: -webkit-fill-available;
}

button.categories.sub-2 {
    font: normal normal 400 var(--s-16);
    font-weight: 400;
    position: relative;
    text-transform: capitalize;
    color: var(--bs-gray-400);
    color: var(--color-item-menu);
    flex-direction: column;
    display: flex;
    gap: 0;
    align-items: flex-start;
    justify-content: center;
    padding-left: var(--px-12);
}

.select-item-menu {
    justify-content: space-between !important;
    padding: var(--px-8);
    z-index: 1;
    position: relative;
    border-bottom: 1px solid var(--bs-border-color);
}

button.add-on.no-border.category {
    width: calc(100% - 16px);
    text-align: center;
    justify-content: center;
    height: var(--px-60);
    border: 1px dashed var(--bs-main-800);
    margin: 8px;
}

.select-cate-left.no-border button.categories.sub-2::after {
    display: none;
}

.show-item-code {
    display: flex;
    width: var(--px-68);
    height: var(--px-28);
    border-radius: var(--px-16);
    background: var(--bs-main);
    position: absolute;
    top: 4px;
    left: 4px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0px 12px #bfbfbf80;
    font: normal normal 500 var(--s-12);
    letter-spacing: 0.8px;
    z-index: 21111111;
}

.item-services-append .info-img-item {
    flex: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: var(--px-68);
    align-items: center;
    justify-content: center;
    font-size: var(--px-36);
}

#icon-logo-refresh {
    margin-top: -30px;
    margin-right: -60px;
    cursor: pointer;
    position: absolute;
    bottom: -2px;
    margin: 0 !important;
    font-size: var(--px-20);
    left: var(--px-36);
    background: var(--bs-surface-bg);
    border: 3px solid var(--bs-surface-bg);
    border-radius: 100%;
    position: absolute;
    bottom: -13px;
    left: 24px;
    background: var(--bs-dark);
    height: var(--px-32);
    min-width: var(--px-32);
    max-width: var(--px-32);
    border: 1px solid var(--bs-gray-600);
    border-radius: 100%;
    color: var(--bs-gray-300);
}

.info-bill-summary {
    width: 100%;
    margin: 0;
    display: grid;
    position: relative;
    gap: var(--px-4);
    grid-template-columns: 1fr;
    grid-gap: var(--px-8);
    padding: 0 0 var(--px-12);
    flex: 1;
    max-height: var(--px-120);
    min-height: var(--px-120);
}

#modalListOrder .modal-fullscreen .modal-content {
    height: 100dvh !important;
    min-height: unset;
}