p {
    margin: 0
}

.cancel-order-modal {
    position: fixed;
    width: 100%;
    max-width: 500px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    transition: all .3s;
    display: flex;
    align-items: start;
    justify-content: flex-end;
    left: 50%;
    top: 50%;
    padding: 0 30px;
    z-index: 2020;
    transform: translateY(-50%) translate(-50%)
}

.cancel-order-modal .cancel-order-content {
    border-radius: 15px;
    height: -webkit-fit-content !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    padding: 30px 40px 20px;
    background: #000000;
    box-shadow: 0 3px 15px 3px #ffffff59
}

.cancel-order-modal .cancel-order-content .group-btn {
    gap: 25px
}

.cancel-order-modal .cancel-order-content .group-btn span {
    height: 42px;
    border-radius: 100px;
    font-weight: 500;
    background-color: #ff9500;
    color: #fff;
    font-size: 18px;
    text-align: center;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.cancel-order-modal .cancel-order-content .group-btn span:first-child {
    color: #ff9500;
    background: transparent;
    border: 1px solid #ff9500
}

.order-header {
    display: none
}

.menu-header-nav {
    position: fixed;
    top: 0;
    height: 0;
    width: 100%;
    z-index: 1050
}

.menu-header-nav .header-nav {
    position: relative;
    top: 0;
    height: 0;
    max-width: 1660px;
    margin: auto;
    padding: 0 30px
}

.menu-header-nav .header-nav .order-navigate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    top: -1px;
    position: absolute;
    min-width: 380px;
    max-width: calc(100% - 435px);
    width: 100%;
    background: black;
    left: 102px;
    padding: 0 20px
}

.menu-header-nav .header-nav .order-navigate .nav-item {
    max-width: 150px;
    width: 150px;
    gap: 5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative
}

.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle,
.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-first {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #8c8c8c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle span,
.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-first span {
    font-size: 20px;
    line-height: 20px
}

.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-color,
.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-first {
    background-color: #f7941e
}

.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle:before,
.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-color:before {
    position: absolute;
    width: calc(100% - 32px);
    content: "";
    height: 4px;
    background-color: #d9d9d9;
    right: calc(50% + 16px)
}

.menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-color:before {
    background-color: #f7941e
}

.menu-header-nav .header-nav .order-navigate .nav-item .span-title {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.menu-conponent {
    display: flex;
    flex-direction: column;
    max-width: 1560px;
    width: 100%;
    margin: auto;
    align-items: center;
    padding: 0 30px
}

.menu-conponent .brand-content {
    flex-wrap: wrap;
    max-width: 800px;
    grid-gap: 40px;
    width: 100%;
    padding: 0 30px;
    justify-content: center
}

.menu-conponent .brand-content .brand-item {
    max-width: 180px;
    min-width: 80px;
    width: auto;
    cursor: pointer
}

.menu-conponent .brand-content .brand-item img {
    width: 100%;
    transition: all .3s
}

.menu-conponent .brand-content .brand-item img:hover {
    scale: 1.1
}

.menu-conponent .order-branch-content {
    width: calc(100% - 50px);
    margin: auto
}

.menu-conponent .order-branch-content .list-branch {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    width: 100%
}

.menu-conponent .order-branch-content .list-branch .branch-item {
    border-radius: 10px;
    width: 100%;
    position: relative;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    overflow: hidden;
    cursor: pointer;
    min-height: 120px
}

.menu-conponent .order-branch-content .list-branch .branch-item .branch-item-cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: flex-end
}

.menu-conponent .order-branch-content .list-branch .branch-item .branch-item-cover span {
    background: #ff9500;
    margin-top: 10px;
    padding: 2px 5px 2px 10px;
    border-radius: 100px 0 0 100px
}

.menu-conponent .order-branch-content .list-branch .branch-item .branch-img {
    transition: all 2s
}

.menu-conponent .order-branch-content .list-branch .branch-item .branch-info {
    position: absolute;
    top: 0;
    gap: 5px;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3), rgba(0, 0, 0, .85))
}

.menu-conponent .order-branch-content .list-branch .branch-item .branch-info span {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 3px 10px;
    gap: 10px;
    font-size: 15px;
    line-height: 17px;
    font-style: italic
}

.menu-conponent .order-branch-content .list-branch .branch-item .branch-info span img {
    width: 18px
}

.menu-conponent .order-branch-content .list-branch .branch-item .branch-info .branch-name {
    font-weight: 500;
    font-size: 19px;
    line-height: 21px;
    font-style: unset
}

.menu-conponent .order-branch-content .list-branch .branch-item:hover .branch-img {
    scale: 1.5
}

.menu-conponent .menu-container {
    width: 100%;
    margin: auto
}

.menu-conponent .menu-container .menu-title {
    padding: 15px 0
}
body::-webkit-scrollbar,.scrollbar-none::-webkit-scrollbar{display:none}
.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed!important}
.menu-conponent .menu-container .menu-title .item-comeback {
    width: 26%;
    padding: 0 10px;
    gap: 15px
}


.menu-conponent .menu-container .menu-title .menu-title-info {
    width: 74%;
    gap: 10px;
    left: 26%;
    height: 70px;
    z-index: 200
}

.menu-conponent .menu-container .menu-title .menu-title-info .menu-title-opentime div {
    display: flex;
    align-items: center;
    gap: .5rem
}

.menu-conponent .menu-container .menu-title .menu-title-info .group-find {
    max-width: 400px;
    min-width: 50px;
    width: calc(100% - 360px);
    padding: 0 10px
}

.menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find {
    border-radius: 10px;
    border: 1px solid rgb(217, 217, 217);
    padding: 7px 15px
}

.menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find img {
    width: 20px
}

.menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find div {
    justify-content: space-between
}

.menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find div input {
    width: calc(100% - 30px);
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff
}

.menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find div input ::placeholder {
    color: #d9d9d9
}

.menu-conponent .menu-container .menu-content .menu-body {
    gap: .5rem
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group {
    height: calc(100vh - 72px);
    top: 72px;
    padding-top: 15px;
    width: 100%;
    position: fixed;
    max-width: 1560px;
    margin-left: -30px;
    z-index: 1
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .menu-span {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    width: 26%;
    padding: 0 20px;
    background: rgba(60, 60, 67, .431372549);
    border-radius: 12px 12px 0 0;
    height: 50px;
    border-bottom: 1.5px solid gray;
    display: flex !important
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body {
    gap: 10px;
    width: 26%;
    left: 0;
    height: calc(100% - 50px);
    background: rgba(60, 60, 67, .431372549);
    border-radius: 0 0 12px 12px;
    margin-top: 50px;
    padding-top: 15px
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-category {
    transition: top .3s ease;
    position: absolute;
    left: 15px;
    width: 18%;
    gap: 10px;
    padding: 0 3px 5px;
    height: 100%;
    z-index: 1
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-category .category-item .category-name {
    font-size: 17px;
    line-height: 18px;
    max-width: 50px;
    transform: rotate(-180deg);
    transform-origin: 50% 50%;
    writing-mode: vertical-lr;
    white-space: nowrap;
    color: #fff;
    background: rgba(140, 140, 140, .3);
    border-radius: 10px;
    padding: 20px 0;
    transition: all .3s
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-category .category-item .category-name-active {
    background-color: #b71c1c !important
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-category .category-item .category-name:hover {
    scale: 1.02
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-subcate {
    height: 100%;
    width: calc(82% - 15px);
    left: calc(18% + 15px);
    gap: 15px;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    will-change: scroll-position;
    padding: 10px
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item {
    scroll-snap-align: start;
    padding: 10px 7px;
    background: rgba(60, 60, 67, .431372549);
    border-radius: 12px;
    gap: 10px;
    transition: all .3s
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item img {
    border-radius: 12px
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item span {
    font-size: 18px;
    line-height: 18px;
    color: #fff
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item-active {
    scale: 1.02;
    scroll-snap-align: start;
    background: #B71C1C
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item:hover {
    scale: 1.03
}

.menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-is-subcate {
    width: 82% !important;
    left: unset !important;
    margin: auto
}

.menu-conponent .menu-container .menu-content .menu-body .fixed-menu-group {
    top: 72px;
    height: calc(100vh - 72px)
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item {
    width: 74%;
    padding: 0 10px 100px;
    left: 26%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
    width: 100%;
    padding-top: 30px
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content {
    background: rgba(0, 0, 0, .7098039216);
    border: 1px solid white;
    border-radius: 10px;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    position: relative
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-soldout {
    background: rgba(95, 95, 95, .1803921569);
    border-radius: 8px;
    z-index: 100;
    justify-content: flex-start
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-soldout div {
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    font-size: 16px;
    color: #fff;
    padding: 5px 12px;
    border-radius: 0 15px 15px 0;
    background-color: #b71c1c
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-show-detail {
    left: 5px;
    top: 5px;
    width: 37px;
    height: 37px;
    border-radius: 50%
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-show-detail img {
    transition: all .3s;
    width: 23px
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-show-detail img:hover {
    scale: 1.1
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart {
    right: 5px;
    top: 5px;
    background: rgba(0, 0, 0, .3411764706);
    width: 37px;
    height: 37px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    z-index: 1
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart img {
    transition: all .1s;
    width: 60%
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart img:hover {
    scale: 1.1;
    filter: brightness(5%) sepia(100%) hue-rotate(0deg) saturate(10000%) contrast(100%)
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-img {
    width: 100%;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid white
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info {
    height: 75px;
    padding: 5px 7px;
    line-height: 20px;
    font-size: 16px;
    gap: 7px;
    justify-content: space-between
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .span-price {
    color: #b71c1c;
    font-size: 18px
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    justify-content: flex-end;
    padding: 5px
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn p {
    width: 30px;
    text-align: center;
    color: #fff;
    line-height: 22px;
    font-size: 18px;
    font-weight: 500;
    margin: 0
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus,
.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus {
    transition: all .3s;
    cursor: pointer;
    width: 12%;
    background: #B71C1C;
    border-radius: 50%
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus div,
.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus div {
    padding-top: 100%
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus div span img,
.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus div span img {
    width: 45%
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus:hover,
.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus:hover {
    scale: 1.1
}

.menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus {
    background: rgba(235, 235, 245, .6);
    position: absolute !important;
    right: calc(12% + 45px) !important
}

.menu-conponent .menu-container .none-listitems {
    color: #fff;
    font-size: 18px;
    background: #b71c1c;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 50px auto auto;
    padding: 5px 15px;
    border-radius: 100px
}

.menu-conponent .btn-scrolltop {
    position: fixed;
    bottom: 10px;
    max-width: 1560px;
    width: 100%;
    z-index: 2000
}

.menu-conponent .btn-scrolltop span {
    position: absolute;
    bottom: 13px;
    right: 15px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7941e
}

.menu-conponent .btn-scrolltop span img {
    height: 50%;
    transform: rotate(90deg);
    cursor: pointer;
    filter: brightness(0) invert(1)
}

.menu-conponent .btn-confirm-order {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    max-width: 1560px;
    width: 100%;
    z-index: 1034;
    height: 0
}

.menu-conponent .btn-confirm-order div {
    width: calc(100% - 80px);
    height: 0
}

.menu-conponent .btn-confirm-order div span {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7941E;
    border-radius: 100px;
    padding: 0 25px;
    font-size: 20px;
    bottom: 0;
    box-shadow: 0 0 8px 3px #00000040;
    position: absolute;
    cursor: pointer;
    transition: all .5s
}

.menu-conponent .btn-confirm-order div span:hover {
    border: 1px solid #F7941E;
    box-shadow: unset
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-group .menu-span,
.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-group .group-body {
    background: rgba(195, 124, 53, .2509803922)
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-group .group-body .menu-category .category-item .category-name-active {
    background-color: #c87c2a !important
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item {
    background: transparent !important
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item-active {
    scale: 1.02 !important;
    scroll-snap-align: start !important;
    background: #C87C2A !important
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content {
    background: #C87C2A;
    border: 1px solid #F26522
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-soldout div {
    background-color: #c87c2a
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-show-detail img {
    filter: brightness(0) invert(1)
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart {
    background: rgba(255, 255, 255, .2)
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-img {
    border-bottom: 1px solid #F26522
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .span-price {
    color: #2b3d20
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    justify-content: flex-end;
    padding: 5px
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn p {
    width: 30px;
    text-align: center;
    color: #fff;
    line-height: 22px;
    font-size: 18px;
    font-weight: 500;
    margin: 0
}

.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus,
.menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus {
    background: #2B3D20 !important
}

.menu-conponent .menu-container-MYLIFEBISTRO .none-listitems {
    color: #fff;
    background: #C87C2A
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-group .menu-span,
.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-group .group-body {
    background: rgba(88, 47, 10, .1411764706)
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-group .group-body .menu-category .category-item .category-name-active {
    background-color: #314031 !important
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item {
    background: transparent !important
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item-active {
    scale: 1.02 !important;
    scroll-snap-align: start !important;
    background: #314031 !important
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content {
    background: #314031;
    border: 1px solid #314031
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-soldout div {
    background-color: #314031
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-show-detail img {
    filter: brightness(0) invert(.5)
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart {
    background: rgba(88, 47, 10, .4196078431)
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-img {
    border-bottom: 1px solid #314031
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info,
.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .span-price,
.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn p {
    color: #fff
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus,
.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus {
    background: #E5DCD5 !important
}

.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus img,
.menu-conponent .menu-container-KOHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus img {
    filter: brightness(0)
}

.menu-conponent .menu-container-KOHI .none-listitems {
    color: #e5dcd5;
    background: #314031
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .menu-span {
    background: rgba(168, 62, 26, .2)
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .menu-span img {
    width: 40%;
    height: unset !important
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .group-body {
    background: rgba(168, 62, 26, .2)
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .group-body .menu-category .category-item .category-name-active {
    background-color: #a83e1a !important
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item {
    background: #E0D9CD !important;
    border-radius: 20px
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item img {
    box-shadow: 0 0 4px 3px #00000040
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item span {
    color: #a83e1a;
    font-weight: 500
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item-active {
    scale: 1.02 !important;
    scroll-snap-align: start !important;
    background: #A83E1A !important
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item-active span {
    color: #fff;
    font-weight: 500
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content {
    border: 1px solid #E0D9CD;
    background: #A83E1A;
    border-radius: 12px
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-soldout div {
    background-color: #a83e1a
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-show-detail img {
    filter: brightness(0) invert(.5)
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart {
    background: rgba(88, 47, 10, .4196078431)
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-img {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #E0D9CD
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .span-price {
    color: #e0d9cd
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn p {
    color: #fff
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus,
.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus {
    background: #E0D9CD !important
}

.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus img,
.menu-conponent .menu-container-GENSHI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus img {
    filter: brightness(.3)
}

.menu-conponent .menu-container-GENSHI .none-listitems {
    color: #a83e1a;
    background: #E0D9CD
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-group .menu-span {
    background: #20394F
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-group .menu-span img {
    width: 40%;
    height: unset !important
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-group .group-body {
    background: #20394F
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-group .group-body .menu-category .category-item .category-name-active {
    background-color: #cbae82 !important
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item {
    background: transparent !important;
    border-radius: 20px
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item span {
    color: #fff;
    font-weight: 500
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item-active {
    scale: 1.02 !important;
    scroll-snap-align: start !important;
    background: #CBAE82 !important
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item-active span {
    color: #20394f;
    font-weight: 500
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content {
    border: 1px solid #223B50;
    background: #223B50;
    border-radius: 12px
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-soldout div {
    background-color: #223b50
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-show-detail img {
    filter: brightness(0) invert(.9)
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart {
    background: rgba(88, 47, 10, .4196078431)
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-img {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #223B50
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .span-price {
    color: #cbae82
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn p {
    color: #fff
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus,
.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus {
    background: #CBAE82 !important
}

.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus img,
.menu-conponent .menu-container-SHAMOJI .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus img {
    filter: brightness(.3)
}

.menu-conponent .menu-container-SHAMOJI .none-listitems {
    color: #cbae82;
    background: #223B50
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-group .menu-span,
.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-group .group-body {
    background: rgba(195, 124, 53, .2509803922)
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-group .group-body .menu-category .category-item .category-name-active {
    background-color: #bc5100 !important
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item {
    background: transparent !important
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-group .group-body .menu-subcate .subcate-item-active {
    scale: 1.02 !important;
    scroll-snap-align: start !important;
    background: #BC5100 !important
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content {
    background: #BC5100;
    border: 1px solid #F26522
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-soldout div {
    background-color: #bc5100
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-show-detail img {
    filter: brightness(0) invert(1)
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart {
    background: rgba(255, 255, 255, .2)
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-img {
    border-bottom: 1px solid #F26522
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .span-price {
    color: #2b3d20
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    justify-content: flex-end;
    padding: 5px
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn p {
    width: 30px;
    text-align: center;
    color: #fff;
    line-height: 22px;
    font-size: 18px;
    font-weight: 500;
    margin: 0
}

.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus,
.menu-conponent .menu-container-MYLIFE .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus {
    background: #2B3D20 !important
}

.menu-conponent .menu-container-MYLIFE .none-listitems {
    color: #fff;
    background: #BC5100
}

.item-detail-container {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    background: #181818;
    width: calc(100% - 200px);
    gap: 15px;
    position: fixed;
    overflow-y: scroll;
    height: 100%;
    font-family: MTDalatSans;
    max-height: 90vh;
    border-radius: 20px;
    transition: all .3s;
    z-index: 2010
}

.item-detail-container input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin: 0;
    width: 18px;
    height: 18px;
    transition: all .3s
}

.item-detail-container input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    top: 0;
    left: 0;
    background-color: #efd5ad;
    transition: all .3s;
    border: .5px solid #2B3D20
}

.item-detail-container input[type=checkbox]:checked:before {
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 0;
    left: 0;
    background-color: #2b3d20;
    border-radius: 2px;
    border: .5px solid #2B3D20;
    transition: all .3s
}

.item-detail-container input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 3px;
    left: 6px;
    transition: all .3s
}

.item-detail-container input[type=radio] {
    cursor: pointer;
    margin: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 6;
    opacity: 0;
    transition: all .3s
}

.item-detail-container input[type=radio]:checked~.check-radio {
    border: 1px solid white;
    transition: all .3s;
    background: #EFD5AD
}

.item-detail-container input[type=radio]:checked~.check-radio:before {
    background: #2B3D20;
    transition: all .3s
}

.item-detail-container .check-radio {
    display: flex;
    position: relative;
    border: 1px solid white;
    background: #EFD5AD;
    border-radius: 100%;
    height: 18px;
    width: 18px;
    top: 0;
    left: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
    transition: all .3s
}

.item-detail-container .check-radio:before {
    display: block;
    position: absolute;
    content: "";
    border-radius: 100%;
    height: 12px;
    width: 12px;
    transition: all .3s
}

.item-detail-container .close-item {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 13px);
    top: calc(constant(safe-area-inset-top) + 13px);
    right: 15px;
    display: flex;
    gap: 10px;
    padding-left: 15px;
    z-index: 1250;
    scale: 1.2;
    cursor: pointer
}

.item-detail-container .close-item:hover {
    scale: 1.3
}

.item-detail-container .list-group-bot {
    position: fixed;
    width: 100%;
    padding: 0 20px;
    z-index: 100
}

.item-detail-container .list-group-bot .group-img-item::-webkit-scrollbar {
    display: none
}

.item-detail-container .list-group-bot .group-img-item {
    overflow-x: scroll;
    gap: 20px;
    padding: 10px 15px;
    width: 100%;
    scroll-snap-type: x mandatory
}

.item-detail-container .list-group-bot .group-img-item div {
    height: unset !important;
    width: unset !important
}

.item-detail-container .list-group-bot .group-img-item img {
    object-fit: cover;
    box-shadow: 0 1.89944px 7.59777px #00000026;
    transition: all .3s;
    width: 11vh;
    border-radius: 10px
}

.item-detail-container .list-group-bot .group-img-item span {
    color: #fff;
    font-size: 14px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.item-detail-container .list-group-bot .group-img-item .bg-active {
    background: #B71C1C
}

.item-detail-container .list-group-bot .group-img-item .bgcolor-none {
    background: transparent
}

.item-detail-container .list-group-bot .img-arrow {
    width: 14px;
    height: 16px;
    top: 44%;
    padding-right: 10px
}

.item-detail-container .list-group-bot .img-arrow img {
    transform: rotate(180deg)
}

.item-detail-container .list-group-bot .img-arrow-end {
    right: 0 !important;
    padding-left: 10px;
    padding-right: 0
}

.item-detail-container .list-group-bot .img-arrow-end img {
    transform: rotate(0)
}

.item-detail-container .item-detail-right {
    width: 100%;
    gap: 15px;
    overflow-y: scroll;
    height: 100%
}

.item-detail-container .item-detail-right .right-name {
    font-weight: 500;
    font-size: 20px;
    line-height: 22px;
    color: #fff;
    align-items: center;
    padding: 0 !important
}

.item-detail-container .item-detail-right .right-name .span-price {
    font-weight: 500
}

.item-detail-container .item-detail-right .group-quantity {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #2b3d20;
    gap: 10px
}

.item-detail-container .item-detail-right .group-quantity input {
    width: 50px;
    text-align: center;
    color: #fff;
    line-height: 22px;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    border-bottom: 1px solid
}

.item-detail-container .item-detail-right .group-quantity .img-plus,
.item-detail-container .item-detail-right .group-quantity .img-minus {
    transition: all .3s;
    cursor: pointer;
    width: 8%;
    background: #B71C1C;
    border-radius: 50%
}

.item-detail-container .item-detail-right .group-quantity .img-plus div,
.item-detail-container .item-detail-right .group-quantity .img-minus div {
    padding-top: 100%
}

.item-detail-container .item-detail-right .group-quantity .img-plus div span img,
.item-detail-container .item-detail-right .group-quantity .img-minus div span img {
    width: 45%
}

.item-detail-container .item-detail-right .group-quantity .img-plus:hover,
.item-detail-container .item-detail-right .group-quantity .img-minus:hover {
    scale: 1.1
}

.item-detail-container .item-detail-right .group-quantity .img-minus {
    background: rgba(235, 235, 245, .6)
}

.item-detail-container .item-detail-right .right-note {
    width: 100%
}

.item-detail-container .item-detail-right .right-note textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 17px;
    font-weight: 500;
    padding: 10px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border-bottom: 1px solid white;
    color: #fff
}

.item-detail-container .item-detail-right .right-note textarea::placeholder {
    color: #fff
}

.item-detail-container .item-detail-right .item-setmenu {
    font-size: 17px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    width: 100%
}

.item-detail-container .item-detail-right .item-setmenu .choiceid-null {
    gap: 10px;
    display: flex;
    flex-direction: column
}

.item-detail-container .item-detail-right .item-setmenu .choiceid-null div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px
}

.item-detail-container .item-detail-right .item-setmenu .choiceid-null div input {
    margin: 0
}

.item-detail-container .item-detail-right .item-setmenu .choiceid-null div span {
    line-height: 18px
}

.item-detail-container .item-detail-right .item-setmenu .choiceid-notnull {
    padding: 12px;
    gap: 10px;
    display: flex;
    flex-direction: column
}

.item-detail-container .item-detail-right .item-setmenu .choiceid-notnull .span-setname p {
    margin: 0
}

.item-detail-container .item-detail-right .item-setmenu .choiceid-notnull .choice-radio,
.item-detail-container .item-detail-right .item-setmenu .choiceid-notnull .choice-checkbox {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 7px
}

.item-detail-container .item-detail-right .item-setmenu .choiceid-notnull .choice-radio span,
.item-detail-container .item-detail-right .item-setmenu .choiceid-notnull .choice-checkbox span {
    line-height: 18px
}

.item-detail-container .item-detail-right .btn-addtocart {
    display: flex;
    padding: 0 40px;
    color: #fff
}

.item-detail-container .item-detail-right .btn-addtocart span {
    background: #B71C1C;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    border-radius: 100px;
    padding: 0 15px
}

.item-detail-container-MYLIFEBISTRO .list-group-bot .group-img-item .bg-active,
.item-detail-container-MYLIFEBISTRO .item-detail-right .group-quantity .img-plus,
.item-detail-container-MYLIFEBISTRO .item-detail-right .btn-addtocart span {
    background: #C87C2A
}

.item-detail-container-KOHI {
    background: #314031
}

.item-detail-container-KOHI .list-group-bot .group-img-item .bg-active {
    background: #E5DCD5
}

.item-detail-container-KOHI .list-group-bot .group-img-item .bg-active span {
    color: #314031 !important
}

.item-detail-container-KOHI .item-detail-right .group-quantity .img-plus,
.item-detail-container-KOHI .item-detail-right .group-quantity .img-minus {
    background: #E5DCD5
}

.item-detail-container-KOHI .item-detail-right .group-quantity .img-plus img,
.item-detail-container-KOHI .item-detail-right .group-quantity .img-minus img {
    filter: brightness(.3)
}

.item-detail-container-KOHI .item-detail-right .btn-addtocart span {
    background: #E5DCD5;
    color: #314031
}

.item-detail-container-GENSHI {
    background: #E0D9CD
}

.item-detail-container-GENSHI .close-item img {
    filter: grayscale(0%) sepia(150%) !important
}

.item-detail-container-GENSHI .list-group-bot .group-img-item {
    gap: 20px !important
}

.item-detail-container-GENSHI .list-group-bot .group-img-item .bg-active {
    background: #A83E1A
}

.item-detail-container-GENSHI .list-group-bot .group-img-item .bg-active span {
    color: #fff !important
}

.item-detail-container-GENSHI .list-group-bot .group-img-item .bgcolor-none {
    box-shadow: 1px 1px 4px #00000040
}

.item-detail-container-GENSHI .list-group-bot .group-img-item .bgcolor-none span {
    color: #a83e1a
}

.item-detail-container-GENSHI .list-group-bot .img-arrow img {
    filter: brightness(.5) grayscale(0%) sepia(2000%) !important
}

.item-detail-container-GENSHI .item-detail-right .right-name,
.item-detail-container-GENSHI .item-detail-right .right-name span {
    color: #a83e1a
}

.item-detail-container-GENSHI .item-detail-right .right-note textarea::placeholder {
    color: #a83e1a
}

.item-detail-container-GENSHI .item-detail-right .right-note textarea {
    color: #a83e1a;
    border-bottom: 1px solid #A83E1A
}

.item-detail-container-GENSHI .item-detail-right .group-quantity span,
.item-detail-container-GENSHI .item-detail-right .group-quantity input {
    color: #a83e1a
}

.item-detail-container-GENSHI .item-detail-right .group-quantity .img-plus,
.item-detail-container-GENSHI .item-detail-right .group-quantity .img-minus {
    background: #A83E1A
}

.item-detail-container-GENSHI .item-detail-right .btn-addtocart span {
    background: #A83E1A;
    color: #fff
}
.overflow-scroll-x {
    overflow-x: scroll;
}

.item-detail-container-SHAMOJI {
    background: #CBAE82
}

.item-detail-container-SHAMOJI .close-item img {
    filter: brightness(0) invert(1) !important
}

.item-detail-container-SHAMOJI .list-group-bot .group-img-item {
    gap: 20px !important
}

.item-detail-container-SHAMOJI .list-group-bot .group-img-item .bg-active {
    background: #223B50
}

.item-detail-container-SHAMOJI .list-group-bot .group-img-item .bg-active span {
    color: #fff !important
}

.item-detail-container-SHAMOJI .list-group-bot .group-img-item .bgcolor-none {
    box-shadow: 1px 1px 4px #00000040
}

.item-detail-container-SHAMOJI .list-group-bot .group-img-item .bgcolor-none span {
    color: #223b50
}

.item-detail-container-SHAMOJI .list-group-bot .img-arrow img {
    filter: brightness(0) invert(1) !important
}

.item-detail-container-SHAMOJI .item-detail-right .right-name,
.item-detail-container-SHAMOJI .item-detail-right .right-name span {
    color: #223b50
}

.item-detail-container-SHAMOJI .item-detail-right .right-note textarea::placeholder {
    color: #223b50
}

.item-detail-container-SHAMOJI .item-detail-right .right-note textarea {
    color: #223b50;
    border-bottom: 1px solid #223B50
}

.item-detail-container-SHAMOJI .item-detail-right .group-quantity span,
.item-detail-container-SHAMOJI .item-detail-right .group-quantity input {
    color: #223b50
}

.item-detail-container-SHAMOJI .item-detail-right .group-quantity .img-plus,
.item-detail-container-SHAMOJI .item-detail-right .group-quantity .img-minus {
    background: #223B50
}

.item-detail-container-SHAMOJI .item-detail-right .btn-addtocart span {
    background: #223B50;
    color: #fff
}

.item-detail-container-MYLIFE .list-group-bot .group-img-item .bg-active,
.item-detail-container-MYLIFE .item-detail-right .group-quantity .img-plus,
.item-detail-container-MYLIFE .item-detail-right .btn-addtocart span {
    background: #BC5100
}

.menu-conponent .menu-container .menu-content .menu-category-mobile {
    display: none;
}

.modal-find {
    justify-content: space-between; 
    align-items: center; 
    gap: 10px; 
    width: 100%;
}
.modal-find .ng-tns-c54-6{
    width: calc(100% - 20px); 
    transform: translateX(0px);
}

@media screen and (max-width: 755px) {
    .menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find {
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 45px;
    }
    .menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find .modal-find-block-input{
        width: calc(100% - 20px);
        transform: translateX(-755px);
    }
    .menu-conponent .menu-container .menu-title .menu-title-info {
        width: fit-content;
    }

    /* mobile seach active */
    .menu-conponent .menu-container .menu-title .menu-title-info.search-active,
    .menu-conponent .menu-container .menu-title .menu-title-info.search-active .group-find,
    .menu-conponent .menu-container .menu-title .menu-title-info.search-active .group-find .modal-find
    {
        width: 100% !important;
    }
    .menu-conponent .menu-container .menu-title .menu-title-info.search-active .modal-find-block-input {
        transform: translateX(0px) !important;
    }

    .select ul.category {
        position: absolute;
        z-index: 10;
        max-height: 300px;
        top: 100%;
        display: block
    }

    .menu-header-nav {
        display: none !important
    }

    .order-header {
        display: flex !important;
        height: calc(60px + env(safe-area-inset-top));
        padding-left: 20px;
        background-color: #000;
        position: fixed;
        top: 0;
        padding-top: env(safe-area-inset-top);
        z-index: 1200;
        width: calc(100% - 50px)
    }

    .menu-conponent {
        padding: 10px 0 90px
    }

    .menu-conponent .menu-router {
        display: none !important
    }

    .menu-conponent .order-navigate {
        display: none
    }

    .menu-conponent .mobile-title {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 18px;
        padding-top: 10px
    }

    .menu-conponent .brand-content {
        padding: 0 30px;
        grid-gap: 15px
    }

    .menu-conponent .brand-content .brand-item {
        max-width: 120px
    }

    .menu-conponent .order-branch-content {
        width: 100%;
        padding: 0 15px 15px
    }

    .menu-conponent .order-branch-content .list-branch {
        grid-template-columns: 1fr;
        grid-gap: 20px
    }

    .menu-conponent .order-branch-content .list-branch .branch-item {
        border-radius: 12px;
        box-shadow: 0 1.89944px 7.59777px #aba8a866
    }

    .menu-conponent .order-branch-content .list-branch .branch-item .branch-info {
        padding: 10px 5px;
        gap: 0
    }

    .menu-conponent .order-branch-content .list-branch .branch-item .branch-info span {
        font-size: 14px;
        line-height: 16px
    }

    .menu-conponent .order-branch-content .list-branch .branch-item .branch-info .branch-name {
        font-size: 17px;
        line-height: 19px
    }

    .menu-conponent .order-branch-content .list-branch .branch-item:hover .branch-img {
        scale: unset
    }

    .menu-conponent .menu-container .menu-title {
        padding: 0
    }

    .menu-conponent .menu-container .menu-title .menu-title-info {
        left: unset;
        margin-left: 0;
        height: 50px;
        position: fixed !important;
        top: calc(60px + env(safe-area-inset-top));
        z-index: 1032
    }

    .menu-conponent .menu-container .menu-title .menu-title-info .menu-title-opentime {
        display: none !important
    }

    .menu-conponent .menu-container .menu-title .menu-title-info .group-find {
        padding: 0;
        height: 100%;
        max-width: unset
    }

    .menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find {
        transition: all .3s;
        border: unset;
        border-radius: unset;
        padding: 7px 15px;
        height: 100%;
        background-color: #181818
    }

    .menu-conponent .menu-container .menu-title .menu-title-info .group-find .modal-find div input {
        font-size: 15px;
        border-bottom: 1px solid white
    }

    .menu-conponent .menu-container .menu-content .menu-category-mobile {
        display: flex;
        position: fixed;
        top: calc(60px + env(safe-area-inset-top));
        width: calc(100% - 45px);
        max-width: 531px;
        height: 50px;
        margin-left: 45px;
        z-index: 1031;
        padding: 7px 0;
        gap: 15px;
        background-color: #181818;
        scroll-snap-type: x mandatory
    }

    .menu-conponent .menu-container .menu-content .menu-category-mobile .category-item {
        scroll-snap-align: start
    }

    .menu-conponent .menu-container .menu-content .menu-category-mobile .category-item .category-name {
        scroll-snap-align: start;
        width: 150px;
        font-size: 15px;
        line-height: 17px;
        color: #fff;
        background: rgba(140, 140, 140, .3);
        border-radius: 100px;
        padding: 0 10px;
        height: 100%;
        border: 1px solid white;
        transition: all .3s
    }

    .menu-conponent .menu-container .menu-content .menu-group-mobile {
        display: flex;
        z-index: 1035;
        bottom: 0
    }

    .menu-conponent .menu-container .menu-content .menu-group-mobile .group-container {
        width: 100%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(46px + env(safe-area-inset-bottom));
        height: calc(46px + constant(safe-area-inset-bottom));
        background-color: #181818d9;
        font-size: 15px;
        line-height: 17px;
        font-weight: 500;
        padding-bottom: env(safe-area-inset-bottom);
        padding-bottom: constant(safe-area-inset-bottom)
    }

    .menu-conponent .menu-container .menu-content .menu-group-mobile .group-container .subcate-name {
        width: 75%;
        padding-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        line-height: 18px;
        font-size: 16px;
        font-weight: 400;
        border-right: 1px solid gray
    }

    .menu-conponent .menu-container .menu-content .menu-group-mobile .group-container .img-arrow {
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .menu-conponent .menu-container .menu-content .menu-group-mobile .group-container .img-arrow img {
        transition: all .3s
    }

    .menu-conponent .menu-container .menu-content .menu-group-mobile .group-container .group-content {
        bottom: calc(100% + 7px);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        align-items: center;
        right: 0;
        gap: 5px;
        display: flex;
        flex-direction: column;
        padding: 20px 30px;
        max-height: 40vh;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        transition: all .3s;
        overflow-y: scroll;
        background: rgba(24, 24, 24, .8901960784);
        border-radius: 10px;
        right: 13px
    }

    .menu-conponent .menu-container .menu-content .menu-group-mobile .group-container .group-content .title-menu {
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 30px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        border: 1px solid transparent
    }

    .menu-conponent .menu-container .menu-content .category-name-active {
        scroll-snap-align: center;
        border: 1px solid #b71c1c !important;
        background-color: #b71c1c !important
    }

    .menu-conponent .menu-container .menu-content .menu-body {
        padding-top: 50px
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-group {
        display: none !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item {
        width: 100%;
        left: 0;
        padding: 5px 15px
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items {
        padding-top: 25px;
        grid-template-columns: 1fr 1fr
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-subcate-name {
        height: 25px !important;
        font-size: 15px !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-heart {
        width: 32px;
        height: 32px
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info {
        line-height: 17px;
        font-size: 14px;
        height: 70px;
        gap: 5px
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .span-price {
        font-size: 16px
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn {
        gap: 0
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus,
    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-plus {
        width: 27px
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn p {
        font-size: 16px
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items .item-content .item-info .group-btn .img-minus {
        position: absolute;
        right: 62px !important
    }

    .menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-group-mobile .group-container {
        background-color: #2b3d20
    }

    .menu-conponent .menu-container-MYLIFEBISTRO .menu-content .menu-group-mobile .group-container .group-content {
        background: #2B3D20
    }

    .menu-conponent .menu-container-MYLIFEBISTRO .menu-content .category-name-active {
        border: 1px solid #C87C2A !important;
        background-color: #c87c2a !important
    }

    .menu-conponent .menu-container-KOHI .menu-content .menu-group-mobile .group-container {
        background-color: #2b3d20
    }

    .menu-conponent .menu-container-KOHI .menu-content .menu-group-mobile .group-container .group-content {
        background: #2B3D20
    }

    .menu-conponent .menu-container-KOHI .menu-content .category-name-active {
        border: 1px solid white !important;
        background-color: #314031 !important
    }

    .menu-conponent .menu-container-GENSHI .menu-content .menu-group-mobile .group-container {
        background-color: #e0d9cd;
        color: #a83e1a
    }

    .menu-conponent .menu-container-GENSHI .menu-content .menu-group-mobile .group-container .group-content {
        background: #E0D9CD;
        color: #a83e1a
    }

    .menu-conponent .menu-container-GENSHI .menu-content .category-name-active {
        border: 1px solid #A83E1A !important;
        background-color: #a83e1a !important;
        color: #fff
    }

    .menu-conponent .menu-container-SHAMOJI .menu-content .menu-group-mobile .group-container {
        background-color: #cbae82;
        color: #20394f
    }

    .menu-conponent .menu-container-SHAMOJI .menu-content .menu-group-mobile .group-container .group-content {
        background: #CBAE82;
        color: #20394f
    }

    .menu-conponent .menu-container-SHAMOJI .menu-content .menu-category-mobile .category-item .category-name {
        background: #CBAE82;
        border: 1px solid #20394F;
        color: #20394f
    }

    .menu-conponent .menu-container-SHAMOJI .menu-content .category-name-active {
        border: 1px solid white !important;
        background-color: #223b50 !important;
        color: #fff !important;
        font-weight: 500
    }

    .menu-conponent .menu-container-MYLIFE .menu-content .menu-group-mobile .group-container {
        background-color: #2b3d20
    }

    .menu-conponent .menu-container-MYLIFE .menu-content .menu-group-mobile .group-container .group-content {
        background: #2B3D20
    }

    .menu-conponent .menu-container-MYLIFE .menu-content .category-name-active {
        border: 1px solid #BC5100 !important;
        background-color: #bc5100 !important
    }

    .item-detail-container {
        max-height: unset !important;
        width: 100% !important;
        padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px);
        border-radius: unset
    }

    .item-detail-container .close-item img {
        width: 24px !important
    }

    .item-detail-container .item-detail-right::-webkit-scrollbar {
        display: none !important
    }

    .item-detail-container .item-detail-right {
        position: relative
    }

    .item-detail-container .item-detail-right .right-name {
        font-weight: unset;
        font-size: 18px;
        line-height: 20px
    }

    .item-detail-container .item-detail-right .right-name img {
        width: calc(100% - 20px) !important
    }

    .item-detail-container .item-detail-right .btn-addtocart span {
        height: 42px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        line-height: 18px
    }

    .item-detail-container .item-detail-right .group-quantity {
        font-size: 16px;
        line-height: 18px;
        gap: unset
    }

    .item-detail-container .item-detail-right .right-note textarea {
        font-size: 16px;
        line-height: 20px;
        color: #fff;
        gap: unset
    }

    .item-detail-container .list-group-bot {
        display: flex;
        padding: 10px 0 0;
        align-items: center;
        position: unset
    }

    .item-detail-container .list-group-bot .group-img-item {
        width: calc(100% - 28px) !important
    }

    .item-detail-container .list-group-bot .group-img-item span {
        font-size: 13px !important
    }

    .item-detail-container .list-group-bot .img-arrow {
        height: 100%;
        display: flex
    }

    .btn-confirm-order {
        bottom: calc(50px + env(safe-area-inset-bottom)) !important
    }

    .btn-confirm-order div {
        width: 100% !important;
        justify-content: center !important
    }

    .btn-confirm-order div span {
        font-size: 18px !important;
        line-height: 20px;
        height: 42px !important;
        padding: 0 20px !important
    }

    .btn-confirm-order div span:hover {
        border: none;
        box-shadow: none
    } 
}

@media screen and (min-width: 755px) {
    .item-detail-container {
        flex-direction: unset
    }

    .item-detail-container .list-group-bot {
        flex-direction: column;
        top: 0;
        position: fixed;
        padding: 0;
        display: flex;
        align-items: center;
        width: 220px;
        bottom: 0
    }

    .item-detail-container .list-group-bot .group-img-item::-webkit-scrollbar {
        display: none
    }

    .item-detail-container .list-group-bot .group-img-item {
        flex-direction: column;
        height: calc(100% - 50px);
        overflow-y: scroll;
        gap: 10px;
        padding: 10px 30px
    }

    .item-detail-container .list-group-bot .group-img-item div {
        width: 100%;
        cursor: pointer;
        max-width: unset !important
    }

    .item-detail-container .list-group-bot .group-img-item img {
        object-fit: cover;
        box-shadow: 0 1.89944px 7.59777px #00000026;
        transition: all .3s;
        width: 100%
    }

    .item-detail-container .list-group-bot .group-img-item span {
        font-size: 16px !important
    }

    .item-detail-container .list-group-bot .img-arrow {
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0
    }

    .item-detail-container .list-group-bot .img-arrow img {
        cursor: pointer;
        height: 22px;
        transform: rotate(-90deg)
    }

    .item-detail-container .list-group-bot .img-arrow-end {
        bottom: 0;
        top: unset
    }

    .item-detail-container .list-group-bot .img-arrow-end img {
        transform: rotate(90deg)
    }

    .item-detail-container .item-detail-right {
        width: calc(100% - 220px);
        position: relative;
        padding-top: 20px;
        padding-left: 0;
        z-index: 1;
        left: 220px
    }

    .item-detail-container .item-detail-right .right-name {
        width: calc(100% - 30px);
        max-width: 600px
    }

    .item-detail-container .item-detail-right .group-quantity,
    .item-detail-container .item-detail-right .right-note,
    .item-detail-container .item-detail-right .item-setmenu,
    .item-detail-container .item-detail-right .btn-addtocart {
        width: calc(100% - 70px);
        max-width: 500px
    }

    .menu-conponent {
        padding-top: 0
    }

    .logo-brand img {
        max-width: 80px
    }
}

@media screen and (min-width: 755px) and (max-width: 821px) {
    .logo-brand img {
        max-width: 80px
    }

    .menu-header-nav .header-nav .order-navigate .nav-item .nav-circle,
    .menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-first {
        width: 30px;
        height: 30px
    }

    .menu-header-nav .header-nav .order-navigate .nav-item .nav-circle span,
    .menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-first span {
        font-size: 18px;
        line-height: 18px
    }

    .menu-header-nav .header-nav .order-navigate .nav-item .nav-circle:before,
    .menu-header-nav .header-nav .order-navigate .nav-item .nav-circle-color:before {
        width: calc(100% - 30px);
        right: calc(50% + 15px)
    }

    .menu-conponent {
        padding: calc(72px + env(safe-area-inset-top)) 20px env(safe-area-inset-bottom) !important
    }

    .menu-conponent .menu-container .menu-title .menu-title-info {
        width: 67% !important;
        left: 33% !important
    }

    .menu-conponent .menu-container .menu-title .menu-title-info .menu-title-opentime {
        flex-direction: column;
        align-items: start !important;
        gap: 0 !important
    }

    .menu-conponent .menu-container .menu-title .menu-title-info .group-find {
        max-width: 260px !important;
        width: calc(100% - 250px) !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-group {
        margin-left: -20px !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-group .menu-span {
        width: calc(33% - 10px) !important;
        left: 10px !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body {
        gap: 10px !important;
        width: calc(33% - 10px) !important;
        left: 10px !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-category {
        left: 5px !important;
        width: 50px !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-subcate {
        width: calc(100% - 55px) !important;
        left: 55px !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-group .group-body .menu-is-subcate {
        width: calc(100% - 20px) !important;
        left: unset !important;
        margin: auto
    }

    .menu-conponent .menu-container .menu-content .menu-body .fixed-menu-group {
        top: 72px !important;
        height: calc(100vh - 72px) !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item {
        width: 67% !important;
        left: 33% !important
    }

    .menu-conponent .menu-container .menu-content .menu-body .menu-content-item .menu-items {
        grid-template-columns: 1fr 1fr !important
    }
}
#quickview_modal .modal-body {
    border-radius: 8px;
}