@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

html, body, #main-shopping {
   scroll-behavior: smooth;
   width: 100%;
   height: 100%;
}

body {
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans JP', sans-serif !important;
   background-color: #FFFFFF;
   color: #333 !important;
}

#main-shopping {
   display: flex;
   flex-direction: column;
}

a {
   text-decoration: none !important;
   cursor: pointer;
   color: #848484;
}

li {
   list-style-type: none;
   cursor: pointer;
}

select,
input {
   height: 40px !important;
}

select,
input,textarea {
   border: 1px solid #ADADAD !important;
   box-shadow: none !important;
   font-size: 16px !important;
   border-radius: 4px !important;
   padding: 8px 16px 11px 16px !important;
   color: #333;
}

p {
   margin: 0 !important;
   padding: 0 !important;
}

label {
   margin-bottom: 2px !important;
}

img {
   object-fit: cover !important;
}

::-webkit-scrollbar {
   width: 10px;
   height: 0px;
}
::-webkit-scrollbar-thumb {
   border-radius: 6px;
   background-color: #CCC;
}

::-webkit-scrollbar-thumb:hover {
   background-color: #ADADAD;
}

.wrapper-bottom-menu::-webkit-scrollbar {
   width: 0;
   height: 0;
}

.wrapper-bottom-menu::-webkit-scrollbar-thumb {
   border-radius: 6px;
   background: transparent;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

.opacity-6 {
    opacity: .6 !important;
 }

.btn-common.disabled, .btn-common:disabled,
.btn-common-white.disabled, .btn-common-white:disabled {
   opacity: .5 !important
}

.btn-common, .btn-common-white, .btn-common> span, .btn-common-white>span {
   white-space: nowrap;
   transition: color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, width .3s ease-in-out !important;
}

input::placeholder,
textarea::placeholder {
    color: #ADADAD !important;
    font-weight: 300;
    letter-spacing: 1.5px;
}

input[type='checkbox'] {
   -webkit-appearance: none;
   border-radius: 0 !important;
   background: url('../images/checked-dis.svg') no-repeat center center;
   background-size: 72%;
   background-color: #FFF !important;
   flex-shrink: 1;
}

input[type='checkbox']:checked {
   background: url('../images/checked.svg') no-repeat center center;
   background-size: 72%;
   background-color: #FFF !important;
   border: 1px solid #366DB3 !important;
}

input[type=number] {
   -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=checkbox], input[type=radio] {
   padding: 0 !important;
   border-radius: 4px !important;
}

input[type='file'] {
   /* visibility: hidden; */
   position: absolute;
   height: 100% !important;
   width: 100%;
   top: 0;
   left: 0;
   opacity: 0;
}

input::-ms-reveal,
input::-ms-clear {
   display: none;
}

button:disabled,
.btn-common-white.disabled {
   cursor: no-drop !important;
   opacity: 0.2 !important;
}

.checkbox-custom {
   width: 24px !important;
   height: 24px !important;
   flex-shrink: 0 !important;
}

/* Custom radio */
.radio-custom {
   width: 20px !important;
   height: 20px !important;
   flex-shrink: 0;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    line-height: 24px;
    display: inline-block;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border: 1px solid #707070;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #366DB3;
    position: absolute;
    top: 8px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
/* End: custom radio */

.container {
   max-width: 1320px !important;
   margin: 0 auto;
}

.container-custom {
   margin-top: 80px;
   padding: 0 !important;
   flex: 1 1 auto;
}

.btn-common {
   position: relative;
   height: 48px;
   background-color: #366DB3;
   border-radius: 32px !important;
   font-size: 17px !important;
   color: #FFF !important;
   font-weight: 500 !important;
   line-height: 36px !important;
   border: 2px solid #366DB3;
   cursor: pointer;
   text-align: center !important;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 2px;
}

.btn-common:hover {
   background-color: #FFF;
}

.btn-common:hover span,
.btn-common:focus {
   color: #366DB3 !important;
}

.btn-common-white {
   position: relative;
   background-color: #FFF;
   color: #366DB3 !important;
   height: 48px;
   border: 2px solid #366DB3;
   border-radius: 32px;
   font-weight: 500;
   cursor: pointer;
   text-align: center !important;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 2px;
}

.btn-common-white:hover {
   background-color: #366DB3;
}

.btn-common-white:hover> span{
   color: #FFF;
}

textarea:focus,
.btn:focus, input:focus,
button:focus {
   outline: none !important;
   box-shadow: none !important;
}

.no-click {
    cursor: no-drop !important;
    opacity: 0.5;
    pointer-events: none;
}

.disabled-click {
    cursor: no-drop !important;
}

.custom-select-time.disabled-click {
    pointer-events: none;
    background-color: rgb(173 173 173 / 10%);
}

.custom-select-time.disabled-click .select-selected::after {
    background-image: none !important;
}

.w-200 {
    width: 200px !important;
}

.text-green {
   color: #366DB3 !important;
}

.text-break {
   word-break: break-all;
}

.text-33 {
   color: #333 !important;
}

.text-66 {
   color: #666 !important;
}

.text-85 {
    color: #858585 !important;
 }

.text-red {
   color: #FF0000 !important;
}

.fw-bold {
   font-weight: bold !important;
}

.fw-500 {
   font-weight: 500 !important;
}

.fw-450 {
    font-weight: 450 !important;
 }

.fw-300 {
   font-weight: 300 !important;
}

.fz-20 {
   font-size: 20px !important;
}

.fz-18 {
   font-size: 18px !important;
}

.fz-17 {
   font-size: 17px !important;
}

.fz-16 {
    font-size: 16px !important;
 }

.fz-14 {
   font-size: 14px !important;
}

.fz-13 {
   font-size: 13px !important;
}

.fz-12 {
    font-size: 12px !important;
 }

.fz-10 {
   font-size: 10px !important;
}

.ls-1 {
   letter-spacing: 2px !important;

}

.ls-n1 {
   letter-spacing: -1px !important;
}

.ls-n05 {
   letter-spacing: -.5px !important;
}

.lh-18 {
   line-height: 1.8;
}

.mt-2px {
   margin-top: 2px !important;
}

.ml-20 {
   margin-left: 20px !important;
}

.mr-20 {
   margin-right: 20px !important;
}

.mb-40 {
   margin-bottom: 40px !important;
}

.pb-20 {
   padding-bottom: 20px !important;
}

.cur-poi {
   cursor: pointer;
}

/* Header */
.header-container {
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 100;
   white-space: nowrap;
}

.header-menu {
   background-color: #FFFFFF;
   box-shadow: 0 2px 2px rgb(0 0 0 / 16%);
}

.header-menu .menu-children {
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 1320px;
   margin: 0 auto;
   height: 80px;
   overflow-x: auto;
   overflow-y: hidden;
}

.header-search {
   align-items: center;
}

.header-search .input-search {
   min-width: 330px;
   height: 48px;
   position: relative;
   margin-right: 48px;
   margin-left: 20px;
   border-radius: 8px;
   overflow: hidden;
}

.header-search input {
   background-color: rgb(173 173 173 / 10%);
   width: 100%;
   height: 48px !important;
   border-radius: 8px !important;
}

.header-search> .input-search> span {
   position: absolute;
   top: 0;
   right: 0;
   width: 80px;
   height: 100%;
   border-radius: 0 !important;
   text-align: center;
   border-top-right-radius: 8px !important;
   border-bottom-right-radius: 8px !important;
}

.header-search .drop-search {
   display: flex;
   align-items: center;
   background-color: transparent !important;
   border: none !important;
   cursor: pointer;
}

.header-search .drop-search>span {
   color: #366DB3 !important;
   font-size: 17px !important;
   font-weight: 500 !important;
   padding-right: 12px;
}

.header-search .drop-search> .img-dd {
   transition: all .4s;
}

.header-search .drop-search> .img-rou {
   transform: rotate(540deg);
}

.header-menu .menu-list>li {
   display: flex;
   align-items: center;
}

.my-home {
   margin-right: 34px;
}

.btn-cart {
   width: 182px;
}

.btn-cart:hover .cart-img {
   filter: invert(71%) sepia(74%) saturate(1900%) hue-rotate(124deg) brightness(83%) contrast(97%);
}

.header-menu .menu-logo-home {
   position: relative;
   color: #FFFFFF;
   display: flex;
   align-items: center;
   height: 100%;
}

.menu-list .menu-item-nav {
   color: #FFFFFF;
   font-weight: 500;
   font-size: 16px;
   position: relative;
}

.w-145 {
   width: 145px;
}

.btn-to-login {
   font-size: 17px;
   color: #366DB3;
   margin-right: 32px;
   font-weight: 500;
}

.btn-to-login:hover {
   text-shadow: 1px 1px 1px #366DB3;
   color: #366DB3;
}

.btn-to-register {
   font-size: 17px;
}

.auth-gr {
   margin-left: auto;
   margin-right: 20px;
}

.cart-gr, .auth-gr, .header-search {
    display: none;
    padding-left: 0;
 }

.img-menu-mobile,
.icon-home-rps {
   display: none;
   padding-left: 0;
}
/* End header */

/* Footer */
.footer-top {
   background-color: #366DB3;
   height: auto;
   color: #FFF;
   display: flex;
   padding: 15px;
   justify-content: center;
}

.footer-menu {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
   margin-bottom: 0;
   padding-left: 0;
}

.footer-item {
   width: 600px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   font-weight: 500;
}

.foo-home-show {
   display: none;
   width: 730px;
}

.footer-bottom {
   background-color: #F8F7F6;
   padding: 20px 0 12px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.contact {
   display: flex;
   margin-bottom: 50px;
   margin-top: 20px;
}

.coppy-right {
   color: #000;
   font-weight: 300;
}
/* End footer */

.login {
   margin: 0 auto;
   margin-top: 60px;
   margin-bottom: 40px;
   transition: all .3s ease-in-out;
}

.login-note {
   margin: 37px auto !important;
   text-align: center;
   color: #333;
   font-weight: 500;
   line-height: 2;
}

.login-title {
   font-size: 26px;
   color: #366DB3;
   font-weight: 500;
}

.info-login {
   width: 400px;
   margin: 40px auto;
}

.info-login label {
   font-size: 13px;
   font-weight: 500;
   color: #333;
}

.icon-password {
   position: absolute;
   right: 16px;
   bottom: 10px;
}

.container-top {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   background-color: #FFFFFF;
}

.container-top .wrapper-top {
   position: fixed;
   top: 80px;
   width: 100%;
   height: 56px;
   align-items: center;
   display: flex;
   z-index: 50;
   background-color: #f7fafd;
   border-bottom: 1px solid rgb(173 173 173 / 50%);
}

.container-top .wrapper-bottom {
   position: fixed;
   top: 136px;
   width: 100%;
   height: 100px;
   align-items: center;
   display: flex;
   z-index: 50;
   background-color: #F8F7F6;
}

.wrapper-top .menu-item-nav {
   font-size: 16px;
    line-height: 21px;
    color: #848484;
    margin-right: 24px;
    cursor: pointer;
    margin-bottom: 1px;
    font-weight: 500;
}

.wrapper-top .menu-title {
   font-size: 20px;
   line-height: 32px;
   color: #333333;
   margin-bottom: 0;
   font-weight: 500;
   max-width: 1000px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.wrapper-table {
   margin-top: 56px;
   padding-bottom: 20px;
}

.table-container {
   padding-top: 40px;
   min-height: 30vh;
}

.table-container table {
   border: none !important;
   margin-bottom: 40px;
}

.wrapper-table .item-header {
   height: 48px;
   font-size: 14px;
   font-weight: 500;
   vertical-align: middle;
   white-space: nowrap;
   background-color: rgb(173 173 173 / 40%);
}

.table thead th,
.table tbody td {
   border: none !important;
   color: #333;
}

.table tbody td {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #CDD4DB !important;
  vertical-align: middle;
  font-weight: 300;
}


.wrapper-detail {
   padding-top: 40px;
   max-width: 420px;
   margin: 0 auto;
   /* min-height: 30vh; */
}

.wrapper-detail .form-item {
   width: 100%;
}

.company-profile {
   margin-bottom: 50px;
}

.company-img {
   width: 300px;
   margin: 20px 0;
}

.transaction {
   max-width: 1080px;
   margin-bottom: 60px;
}

.transaction .sign-liquor,
.transaction .form-item,
.company-profile .form-item {
   border-bottom: 1px solid #ADADAD;
}

.wrapper-detail .form-item .title {
   width: 100%;
   font-size: 16px;
   padding-bottom: 8px;
   color: #333333;
   border-bottom: 1px solid #707070;
   margin-top: 20px;
   font-weight: 500;
   color: #333333;
}

.wrapper-detail .form-item .input-name {
   display: flex;
   margin: 20px 0;
   width: 100%;
   flex-wrap: nowrap;
   color: #333;
   font-weight: 300;
}

.form-item .input-name .icon-user {
   font-size: 13px;
   line-height: 30px;
   color: #666666;
   font-weight: 500;
   padding: 0;
   margin-bottom: 0;
   letter-spacing: 1px;
}

.form-item .input-name .lable-name {
   margin-top: 5px;
   font-size: 13px;
   white-space: nowrap;
   line-height: 19px;
   color: #666;
   font-weight: 300;
   letter-spacing: -1px;
}

.transaction .form-item .title {
   font-size: 13px;
   color: #666;
   font-weight: 500;
   border: none;
   padding-bottom: 0;
}

.transaction .form-item .input-name {
   line-height: 1.5;
   margin-top: 0;
}

.transaction .sign-liquor {
   padding-bottom: 8px;
   margin: 40px 0;
}

.wrapper-return .title {
   color: #666666 !important;
   margin-bottom: 4px;
   font-weight: 500;
}

.zip-code-input {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-60%);
   color: #333333;
   z-index: 1;
}

input[name='home_postal_code'] {
   padding-left: 34px !important;
}

input[name='delivery_postal_code'] {
    padding-left: 34px !important;
}

.w-55 {
   width: 55px;
}

.w-80 {
   width: 80px;
}

.w-112 {
   width: 112px;
   height: 40px;
}

.suggest-menu-rps,
.cart-rps,
.table-rps,
.show-address {
   display: none;
}

.card-custom {
   width: 300px;
}

.my-page-detail {
   padding-top: 80px;
   transition: all .3s;
}

.my-page-item {
   color: #333;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 235px;
   height: 150px;
   border-radius: 10px;
   box-shadow: 0 3px 5px rgb(0 0 0 / 16%);
   cursor: pointer;
}

.my-page-item:hover {
   background-color: #f7fafd;
   color: #366DB3;
   transition: all .5s ease-in-out;
}

.my-page-item> p {
   font-size: 22px;
}

.table tbody td.py-12 {
   padding-top: 12px !important;
   padding-bottom: 12px !important;
}

.order-detail {
   margin-bottom: 20px;
}

.pt-40 {
   padding-top: 40px;
}

.order-list, .order-detail {
   padding: 20px 40px;
   border-radius: 8px;
   border: 1px solid #ADADAD;
   box-shadow: 0 0 6px rgb(0 0 0 / 16%);
}

.order-list table tr,
.order-list table tbody td {
   border-bottom: 1px solid #ADADAD !important;
}

.order-list table thead th {
   color: #666 !important;
   font-size: 16px !important;
}

.order-list table tbody tr:last-child,
.order-list table tbody tr:last-child td {
   border-bottom: none !important;
}

.order-item-img {
   width: 80px;
   height: 80px;
   object-fit: cover;
}

.w-160 {
   width: 160px;
   height: 40px;
   font-size: 16px !important;
}

.input-number-custom {
   width: 40px;
   height: 24px !important;
   border: 1px solid #666666 !important;
   padding: 0 !important;
   text-align: center;
   margin: 0 7px;
   font-size: 13px !important;
   font-weight: 500;
   line-height: 24px;
}

.title-cpass-user {
   margin: 0 -40px !important;
}

.w-400 {
   max-width: 400px !important;

}
.w-680 {
   max-width: 680px !important;
}

.btn-edit-card {
   width: 105px;
   height: 40px;
   margin-right: 24px;
}

.wrapper-bottom-menu {
   display: flex;
   align-items: center;
   overflow: auto !important;
   height: 100%;
}

.wrapper-bottom-item {
   display: flex;
   width: 184px;
   justify-content: center;
   font-size: 14px;
   color: #366DB3;
   min-width: fit-content;
}

.wrapper-bottom-item:not(:last-child) {
   margin-right: 30px;
}

.wrapper-product {
   padding-top: 216px;
   padding-bottom: 20px;
}

.wrapper-product-search {
   padding-top: 96px;
}

.wrapper-product .product-group {
   padding-top: 250px;
   margin-top: -250px;
}

.wrapper-product .product-group:not(:nth-last-child(2)) {
   margin-bottom: 20px;
}

.wrapper-product .product-type {
   font-size: 20px;
   border-bottom: 1px solid rgb(12 152 87 / 30%);
   margin-bottom: 20px;
}

.wrapper-product .product-menu {
   --column-product: 6;
   display: flex;
   flex-wrap: wrap;
   margin: 0 -12px;
}

.wrapper-product .product-empty {
   width: 100%;
   text-align: center;
   margin-bottom: 40px;
   color: #666;
   font-weight: 500;
}

.wrapper-product .product-item {
   display: flex;
   flex-direction: column;
   width: calc(100% / var(--column-product));
   overflow: hidden;
   padding: 0 12px;
   margin-bottom: 60px;
}

.product-info {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.product-info .product-img >img {
   transition: all .5s ease-in-out;
}

.product-item:hover> img,
.product-info:hover .product-img >img {
   transform: scale(1.2);
}

.wrapper-product .product-img {
   width: 100%;
   height: 200px;
   overflow: hidden;
}

.wrapper-product .product-title {
   font-size: 14px;
   font-weight: 500;
   color: #000;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   margin: 8px 0 10px 0 !important;
}

.product-item .flex-fill:hover> .product-title {
    opacity: 0.5;
}

.product-sub-title {
   font-size: 13px;
   color: #666;
   font-weight: 300;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
}

.product-price {
   display: flex;
   justify-content: end;
   align-items: center;
   font-weight: 500;
   margin: 14px 0px 8px 12px;
   margin-left: auto;
   float: right;
}

.product-price-tax {
    display: flex;
    justify-content: end;
    align-items: center;
    font-weight: 500;
    margin: 0 0 9px;
    margin-left: auto;
    float: right;
 }

 .cart-price-tax {
    position: absolute;
    line-height: 21px;
    right: 0;
 }

.product-amount {
   display: flex;
   align-items: center;
   justify-content: end;
   float: right;
}

.product-amount >button {
   appearance: none;
   display: flex;
   flex-shrink: 0;
   justify-content: center;
   width: 24px;
   height: 24px;
   max-width: 24px !important;
   color: #333;
   line-height: 17px;
   border: 1px solid #333 !important;
   background-color: #fff;
   opacity: 0.8;
   font-size: 20px;
   border-radius: 4px;
   outline: none;
   cursor: pointer;
   padding: 1px 6px !important;
   font-weight: 300;
}

.product-amount >button.btn-step-down {
   line-height: 8px;
   font-size: 40px;
   font-weight: 100;
}

.btn-add-cart {
   font-size: 16px !important;
   height: 40px;
   margin-top: 16px;
}

.w-1200 {
   max-width: 1200px;
}

.product-detail-c {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
}

.product-detail-c .pdetail-img {
   width: 320px;
   min-height: 320px;
}

.product-detail-c .pdetail-info {
   display: flex;
   flex-direction: column;
   flex: 1;
   margin-left: 40px;
}

.pdetail-info .pdetail-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.product-price .text-red,
.pdetail-info .pdetail-top .text-red {
   font-size: 20px;
   font-weight: 600;
}

.wrapper-product-search .product-price .text-red.fz-18,
.product-group .product-price .text-red.fz-18 {
   margin-bottom: -1px;
}

.pdetail-info .pdetail-title {
   font-size: 18px;
   color: #333;
   font-weight: 500;
   max-width: 600px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.pdetail-info .pdetail-sub-title {
   display: flex;
   color: #666;
   font-size: 14px;
   font-weight: 300;
   padding-bottom: 20px !important;
   border-bottom: 1px solid #ADADAD;
   margin: 24px 0 40px !important;
}

.pdetail-info .pdetail-cart {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.pdetail-cart .pdetail-price {
   font-size: 21px;
   color: #333;
   font-weight: 500;
   padding-left: 20px;
}

.pdetail-cart .pdetail-price .fz-32 {
   font-size: 32px;
   font-weight: 600;
}

.pdetail-info> .pdetail-sub-title>span:first-child {
   margin-right: 70px;
}

.pdetail-cart .product-amount {
   margin-left: auto;
   margin-right: 40px;
}

.pdetail-cart .product-amount >button {
   height: 40px !important;
   width: 40px !important;
   max-width: 40px !important;
   font-size: 34px;
   line-height: 32px;
}

.pdetail-cart .product-amount >button.btn-step-down {
   line-height: 16px;
   font-size: 65px;
   font-weight: 100;
}

.pdetail-cart .input-number-custom {
   height: 40px !important;
   font-size: 16px !important;
}

.pdetail-btn-add-cart {
   width: 200px;
   margin-left: 24px;
   height: 48px;
}

.pdetail-note {
   margin: 40px 0 60px;
   line-height: 1.8;
}

.cart-detail {
   display: flex;
   border-radius: 4px;
   border: 1px solid #ADADAD;
   padding: 20px;
   width: 100%;
}

.cart-detail .pcart-img {
   width: 160px;
   height: 160px;
}

.cart-detail .pdetail-info {
   margin-left: 20px;
}

.cart-detail .pdetail-title {
   font-size: 16px;
}

.cart-detail .pdetail-sub-title {
   margin: 10px 0 24px !important;
   padding-bottom: 16px !important;
}

.price-total {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px;
   background-color: #edf4fc;
   border: 1px solid #366DB3;
   border-radius: 4px;
   box-shadow: 0 0 2px rgb(0 0 0 / 16%);
}

.cart-empty {
   font-size: 20px;
   color: #ADADAD;
   margin: 76px 0 92px;
   text-align: center;
}

.show-rps.d-flex,
.show-rps {
   display: none !important;
}

.show-ib-rps {
   display: none;
}

.payment-detail .pay-show-price {
   border-radius: 4px;
   border: 1px solid #366DB3;
   padding: 12px 20px;
   width: 100%;
   background-color: #edf4fc;
   margin-bottom: 20px;
}

.payment-detail .paytop {
   line-height: 2.2;
   font-weight: 300;
   padding-bottom: 2px;
   border-bottom: 1px solid rgb(12 152 87 / 50%);
}

.payment-detail .paybottom {
   line-height: 2.2;
   font-weight: 500;
   padding-top: 2px;
   font-size: 18px;
}

.payment-detail .pay-show-detail {
   border-radius: 4px;
   border: 1px solid #ADADAD;
   padding: 20px;
   width: 100%;
   background-color: #FFF;
}

.pay-show-detail .form-item {
   border-bottom: 1px solid #ADADAD;
   margin-bottom: 20px;
   font-weight: 300;
}

.pay-show-detail .form-item:last-child,
.pay-show-detail .form-item:last-child .form-item-info:last-child {
   margin-bottom: 0;
   border-bottom: none;
}

.pay-show-detail .form-item-info {
   margin: 20px 0;
}

.pay-show-detail .form-item-title {
   color: #366DB3;
   font-weight: 500;
   margin-bottom: -5px !important;
}

.pay-show-detail .address {
   display: flex;
   align-items: center;
   word-break: break-all;
}

.pay-show-detail .address .sort {
   width: 60px;
   height: 30px;
   background-color: rgb(12 152 87 / 15%);
   color: #366DB3;
   font-size: 14px;
   text-align: center;
   line-height: 30px;
   font-weight: 500;
   margin-left: 20px;
   flex-shrink: 0;
}

.pay-show-detail .request-cancel {
   width: 268px;
   height: 30px;
   background-color: rgb(255 0 0 / 15%);
   color: #FF0000;
   font-size: 14px;
   text-align: left;
   line-height: 30px;
   font-weight: 500;
   flex-shrink: 0;
   letter-spacing: -1px;
   text-align: center;
}

.pay-show-detail .tel {
   margin-right: 15px;
}

.pay-input-w190 {
   min-width: 190px
}

.page-home {

}

.page-home .bg-home {
   width: 100%;
   height: 100%;
}

.page-home .home-intro {
   margin: 37px 0 60px 0;
   text-align: center;
}

.heading {
   margin-bottom: 55px;
}

.heading .title {
}

.heading .sub-title {
   font-size: 20px;
   color: #366DB3;
   margin-top: -6px !important;
}

.home-intro .content {
   position: relative;
   border: 3px solid #366DB3;
   padding: 18px 20px;
   margin-right: 20px;
   font-weight: 500;
   font-size: 22px;
   line-height: 1.8;
   text-align: center;
}

.home-intro .content::before {
   content: "";
    position: absolute;
    left: 20px;
    /* background-color: rgb(12 152 87 / 10%); */
    background-color: #edf4fc;
    top: 20px;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.content-position::before {
   content: "";
    position: absolute;
    bottom: -23px;
    left: -23px;
    width: 10px;
    height: 6px;
    background-color: #FFF;
}
.content-position::after {
   content: "";
    position: absolute;
    top: -23px;
    right: -23px;
    width: 10px;
    height: 6px;
    background-color: #FFF;
}

.text-ct-28 {
   font-size: 28px;
   position: relative;
}

.text-ct-28::after {
   content: "";
   position: absolute;
   bottom: -1px;
   left: 0;
   height: 12px;
   width: 98%;
   background-color: #F39801;
   z-index: -1;
}

.bg-home-rps {
   width: 100%;
   height: 100%;
}

.home-product>div>.product-type{
   display: inline-block;
   font-size: 26px;
   color: #366DB3;
   border-bottom: 3px solid #366DB3;
   padding-bottom: 4px;
   margin-bottom: 30px;
   font-weight: 500;
}

.home-product .product-menu {
   --spacing: 30px;
   --column: 5;
   display: flex;
   flex-wrap: wrap;
   margin-left: -30px;
}

.home-product .product-item {
   margin-left: var(--spacing);
   width: calc(calc(100% / var(--column)) - var(--spacing));
   height: 126px;
   border: 1px solid #ADADAD;
   border-radius: 8px;
   margin-bottom: var(--spacing);
   overflow: hidden;
   position: relative;
}

.home-product .product-item>img {
   object-fit: cover;
   width: 100%;
   height: 100%;
   transition: all .4s ease-in-out;
}

.home-product .product-item>.card-name {
   position: absolute;
   bottom: 0;
   width: 100%;
   text-align: center;
   padding: 4px 0 !important;
   font-weight: 500;
   background-color: rgb(255 255 255 / 90%);
   display:-webkit-box;
   -webkit-line-clamp:1;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
   transition: all .3s ease-in-out;
}

.product-item:hover> .card-name {
   text-shadow: 0 0 1px #333;
}

.home-footer {
   display: none;
   min-height: 200px;
   margin-top: 30px;
   background-color: #F8F7F6;
   justify-content: center;
}

.home-footer-menu {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1320px;
   width: 100%;
}

.home-footer-menu>.home-footer-item {
   background-color: #edf4fc;
   border-radius: 6px;
   border: 2px solid #366DB3;
   color: #366DB3;
   width: 420px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   letter-spacing: -1px;
   font-weight: 500;
   transition: all .3s ease-in-out;
}

.home-footer-menu>.home-footer-item:hover,
.faq .faq-type >a:hover {
   background-color: #366DB3;
   color: #FFF;
}

/* Custom drop down list product */
.wrapper-dropdown {
   display: none;
   position: absolute;
   top: 80px;
   left: 0;
   right: 0;
   width: 100%;
   margin: 0 auto;
   background-color: #FFF;
   z-index: 99;
   box-shadow: 0 0 10px rgb(180 191 203 / 40%);
}

.wrapper-dropdown> .product-detail {
   max-width: 1320px;
   margin: 0 auto;
}

.wrapper-dropdown .close-drop-down {
   margin: 40px 0;
   float: right;
}

.wrapper-dropdown .product-type {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgb(12 152 87 / 30%);
   padding-bottom: 5px;
   margin-bottom: 20px;
}

.wrapper-dropdown .product-menu {
   display: flex;
   flex-wrap: wrap;
}

.wrapper-dropdown .product-item {
   margin-bottom: 22px;
   font-size: 14px;
   color: #366DB3;

}

.wrapper-dropdown .product-item:nth-child(6n + 1) {
   padding-left: 0 !important;
}

.wrapper-dropdown .product-item:nth-child(6n) {
   padding-right: 0 !important;
}

.wrapper-dropdown .product-item:last-child {
   margin-bottom: 60px;
}

.content-term-use {
   font-size: 16px;
   color: #333333;
   padding-bottom: 60px;
   font-weight: 300;
   padding-top: 40px;
}

.content-term-use .rules {
   margin-top: 20px;
}

.content-term-use .rules .title {
   border-bottom: 2px solid #366DB3;
   padding-bottom: 8px !important;
   font-size: 18px;
   font-weight: 500;
}

.content-term-use>div:last-child {
   color: #454545;
}

.rule-content {
   line-height: 1.8;
}

.rule-content>div {
   letter-spacing: -.5px;
}

.faq {
   padding-top: 40px;
}

.faq .faq-type {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 40px;
}

.faq .faq-type >a {
   text-align: center;
   height: 60px;
   border-radius: 6px;
   border: 2px solid #366DB3;
   width: calc(100% / 4 - 20px);
   font-size: 18px;
   font-weight: 500;
   color: #366DB3;
   padding: 13px 0;
   transition: all .3s ease-in-out;
}

.activity {
   color: #FFF !important;
   background-color: #366DB3;
   cursor: pointer;
}

.faq-gr {
   margin-bottom: 60px;
}

.faq-gr .faq-title {
   font-size: 26px;
   text-align: center;
   font-weight: 500;
   margin-bottom: 40px !important;
   padding-top: 150px !important;
   margin-top: -150px !important;
}


.faq-item-gr {
   margin-bottom: 20px;
   transform: translateZ(0);
}

.faq-gr .faq-item {
   background-color: #edf4fc;
   height: 62px;
   font-weight: 500;
   padding: 18px 16px;
   font-size: 18px;
   cursor: pointer;
}

.faq-gr .faq-rep {
   display: none;
   font-weight: 500;
   padding: 18px 16px;
   border: 2px solid #edf4fc;
}

.zoom-text {
   font-size: 36px;
   color: #366DB3;
   margin-right: 18px;
   font-weight: bold;
   font-family: 'Roboto', sans-serif;
   line-height: 0.8;
}

.usage-flow {
   padding: 40px 0 70px 0;
   max-width: 1320px;
   margin: 0 auto;
}


.use-flow>.title,
.use-when>.title {
   font-size: 30px;
   color: #366DB3;
   text-align: center;
   border-top: 4px solid #366DB3;
   border-bottom: 4px solid #366DB3;
   padding: 8px 0 !important;
   font-weight: 500;
}

.use-when>.suggest {
   max-width: 1125px;
   margin: 0 auto;
   text-align: center;
   padding: 40px 0;
}

.use-when>.suggest>img {
   max-width: 100%;
   margin-bottom: 40px;
}

.use-when .suggest-menu {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}

.use-when .suggest-item {
   position: relative;
   border: 3px solid #333333;
   border-radius: 100px;
   padding: 18px 40px;
   margin-bottom: 40px;
   font-weight: 500;
   text-shadow: 0 0 2px #FFF;
}

.use-when .suggest-item::before {
   content: "";
   position: absolute;
   left: 4px;
   background-color: #F6B64C;
   top: 4px;
   width: 101%;
   height: 106%;
   z-index: -2;
   border-radius: 100px;
}

.use-flow>.title {
   background-color: #366DB3;
   color: #FFF;
}

.use-flow .use-flow-step {
   position: relative;
   max-width: 1080px;
   margin: 0 auto;
   text-align: center;
   padding: 40px 0 0;
}

.use-flow-step .line-number {
   position: absolute;
   left: 50px;
   top: 170px;
   z-index: -1;
   height: 75%;
}

.use-flow-step .step-number {
   display: flex;
   align-items: center;
   margin-bottom: 60px;
}

.step-number .step-content {
   border: 3px solid #333333;
   border-radius: 20px;
   padding: 20px;
   margin-left: 24px;
   text-align: left;
   line-height: 1.8;
   width: 100%;
}
.step-number .step-content>.title {
  font-size: 18px;
  font-weight: 500;
}

.about-fees {
   margin-bottom: 60px;
}

.about-fees>div {
   height: 475px;
}

.about-fees>.title {
   font-size: 30px;
   color: #366DB3;
   text-align: center;
   border-top: 4px solid #366DB3;
   padding: 8px 0 !important;
   font-weight: 500;
}

.about-fees .basic-fee {
   width: 50%;
   background-color: #366DB3;
   display: flex;
   justify-content: end;
   padding: 40px 16px;
   height: 100%
}

.about-fees .delivery-charge {
   width: 50%;
   background-color: #F39801;
   display: flex;
   padding: 40px 16px;
   height: 100%;
   position: relative;
}

.about-fees .fee-content {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   border-radius: 20px;
   background-color: #FFF;
   padding: 20px 0;
   height: 310px;
   width: 100%;
   max-width: 475px;
}

.about-fees .fee-content>div {
   width: 220px;
   padding: 8px 60px;
   font-size: 20px;
   color: #FFF;
   font-weight: 500;
   text-align: center;
}

.about-fees .fee-content>.price {
   font-size: 30px;
   font-weight: 500;
}

.delivery-charge .fee-content {
   margin-left: 54px;
}

.delivery-charge .fee-content>div {
   background-color: #F39801;
}

.delivery-charge .fee-content>.price {
   line-height: 0.4;
   border-bottom: 12px solid rgb(243 152 1 / 50%);
}

.basic-fee .fee-content {
   margin-right: 54px;
   transition: all .3s;
}

.basic-fee .fee-content>div {
   background-color: #366DB3;
}

.basic-fee .fee-content>.price {
   line-height: 0.4;
   border-bottom: 12px solid rgb(12 152 87 / 50%);
}

.plus-black-big {
   position: absolute;
   top: 46%;
   left: 50%;
   transform: translate(-50%);
   z-index: 10;
}

.note-price-delivery{
   position: absolute;
   bottom: -24px;
   left: 50%;
   transform: translateX(-50%);
   color: #FFF;
   font-size: 13px;
   text-align: center;
   font-weight: 500;
   white-space: nowrap;
}

.note-price {
   position: absolute;
   bottom: 50px;
   left: 50%;
   transform: translate(-50%);
   width: 96%;
   max-width: 1080px;
   background-color: #FFF;
   color: #666;
   font-size: 15px;
   text-align: center;
   font-weight: 500;
   border-radius: 4px;
   transform: all .3s;
}

.area {
   margin: 0 auto;
   max-width: 1320px;
   border-radius: 20px;
   border: 2px solid #F39801;
   box-shadow: 10px 10px #F39801;
   padding: 24px 40px 60px;
   margin-bottom: 70px;
}

.area .heading {
   font-size: 30px;
   font-weight: bold;
   text-align: center;
   color: #F39801;
   margin-bottom: 20px !important;
}

.area .content {
   font-weight: 300;
   line-height: 1.8;
   margin-top: 4px !important;
}

.note-sale {
   background-color: #edf4fc;
   padding: 40px 0;
   margin-bottom: 60px;
}

.note-sale>.content {
   max-width: 1320px;
   margin: 0 auto;
}

.note-sale .heading {
   font-size: 20px;
   font-weight: 500;
   text-align: center;
   margin-bottom: 24px !important;
}

.table-rps {
   margin-bottom: 40px;
   margin-top: 7px;
}

.order-his-rps {
   width: 100%;
   border-radius: 4px;
   border: 1px solid #ADADAD;
   box-shadow: 0 0 6px rgb(0 0 0 / 16%);
   padding: 20px 16px;
   margin-bottom: 20px;
}

.order-his-rps .heading {
   border-bottom: 1px solid #ADADAD;
   padding-bottom: 10px !important;
   text-align: center;
}

.order-his-rps .content {
  padding: 3px 0 40px;
  line-height: 2.8;
}

.order-detail-rps{
   margin-top: 7px;
   margin-bottom: 20px;
}

.order-detail-rps, .order-list-rps {
   width: 100%;
   border-radius: 4px;
   border: 1px solid #ADADAD;
   box-shadow: 0 0 6px rgb(0 0 0 / 16%);
   padding: 20px 0;
}

.order-list-rps .heading,
.order-detail-rps .heading {
   border-bottom: 1px solid #ADADAD;
   padding: 0 16px 10px !important;
}

.order-detail-rps .content {
   padding: 0 16px;
   line-height: 2.5;
   font-size: 14px;
   padding-top: 10px;
}

.order-detail-rps .sub-content {
   padding-left: 10px;
   line-height: 1.8;
   margin-bottom: 10px;
}

.order-detail-rps .sub-content::before {
   content: '';
   position: absolute;
   top: 3px;
   bottom: 3px;
   left: 0;
   width: 1px;
   background-color: #666;
}

.order-list-rps> div:not(:last-child) {
   padding-bottom: 20px;
   border-bottom: 1px solid #ADADAD;
   margin-bottom: 20px;
}

.order-list-rps .content {
   padding: 0 16px;
   padding-top: 20px;
}

.order-list-rps .content .order-name-product{
   display:-webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
}

.order-list-rps .content>div:last-child {
   border-bottom: 1px solid #ADADAD;
   padding-bottom: 20px;
}

.order-list-rps .content:last-child> div:last-child {
   border: none;
   padding-bottom: 0;
}

.wrapper-payment {
   padding-top: 0 !important;
   margin-top: -16px;
}

.price-payment-od {
   min-width: 200px;
   text-align: right;
}

.cart-rps .product-price-rps> .text-red,
.product-price .text-red,
.pdetail-info .pdetail-top .text-red,
.pdetail-cart .pdetail-price .fz-32 {
   font-family: 'Roboto', sans-serif;
   font-weight: bold;
   line-height: 1;
}

.enter-foo {
   display: none;
}

/* Pagination */
.pagination {
   justify-content: center;
   align-items: center;
   color: #366DB3;
   margin-bottom: 0 !important;
}

.pagination .page-item {
   margin: 0 5px;
}

.page-link {
   border: 1px solid #366DB3 !important;
   color: #FFFFFF !important;
   background-color: #366DB3 !important;
}

.page-link:hover {
   background-color: #FFFFFF !important;
   color: #366DB3 !important;
   border: 1px solid #366DB3 !important;
}

.page-link-active {
   background-color: #FFFFFF !important;
   color: #366DB3 !important;
   border: 1px solid #366DB3 !important;
}

.page-item:first-child .page-link {
   border-top-left-radius: unset !important;
   border-bottom-left-radius: unset !important;
}

.page-item:last-child .page-link {
   border-top-right-radius: unset !important;
   border-bottom-right-radius: unset !important;
}

.page-item.disabled .page-link {
   background-color: #FFFFFF !important;
   color: #a9b3ba !important;
   border: 1px solid #c6cfd6 !important;
}

.page-item.active .page-link {
   z-index: auto !important;
}

.page-link {
   width: 30px;
   height: 30px;
   display: flex !important;
   align-items: center;
   justify-content: center;
}

.page-link .fa-minus-before {
   transform: rotate(90deg);
   position: absolute;
   left: 2px;
}

.page-link .fa-minus-after {
   transform: rotate(90deg);
   position: absolute;
   right: 2px;
}

.page-select {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 20px;
   color: #666;
   font-weight: 500;
}
/* End pagination */

/* Custom select */
.custom-select {
   position: relative;
   padding: 9px 20px 7px 16px !important;
   width: 100% !important;
   border: 1px solid #BBB !important;
   height: 40px !important;
   font-size: 14px;
   border-radius: 4px !important;
   color: #333333;
   background-image: none!important;
}

.custom-select select{
   display: none;
}

.select-selected:after {
   position: absolute;
   content: "";
   top: 15px;
   right: 10px;
   width: 16px;
   height: 10px;
   background-image: url(../images/down-gray.svg) !important;
   background-repeat: no-repeat;
   transition: all .3s;
}

.select-selected.select-arrow-active:after {
   transform: rotate(360deg);
}

.select-selected {
   padding: 0px 25px 0px 0px !important;
   cursor: pointer;
   user-select: none;
   font-weight: 300;
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   letter-spacing: 1.5px;
}

.custom-select.home .select-selected ,
.custom-select.delivery .select-selected ,
.custom-select.contact-js .select-selected {
    font-weight: 400 !important;
    line-height: 18px !important;
    font-size: 16px !important;
    color: #495057;
 }

.select-items div {
   color: #333333;
   cursor: pointer;
   user-select: none;
   background-color: #ffffff;
   font-weight: 300;
   padding: 11px 24px;
   /* box-shadow: 0px 1px 0px 1px rgb(0 0 0 / 15%); */
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   border: none;
   line-height: normal;
   letter-spacing: 1.5px;
   font-size: 16px;
}
.select-items div:first-child {
   margin-top: 16px;
}
.select-items div:last-child {
   margin-bottom: 16px;
   box-shadow: none;
}
.select-items {
   position: absolute;
   top: 110% !important;
   left: 0;
   right: 0;
   z-index: 99;
   overflow: auto;
   box-shadow: 0 0 10px rgb(180 191 203 / 40%);
   border-radius: 4px;
   max-height: 600px;
   background-color: #FFF;
}

.select-hide {
   display: none;
}

.select-items div:hover{
   background-color: #366DB3 !important;
   color: #ffffff !important;
   text-shadow: 1px 1px #333 !important;
}

.same-as-selected{
   position: relative;
   box-shadow: none !important;
}

.select-items::-webkit-scrollbar {
   width: 4px;
   background-color: #FFF;
}

.select-items::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background: #ADADAD;
   padding-right: 4px ;
}

.same-as-selected::before {
   content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    background: url(../images/check-select.svg) no-repeat center center;
    width: 12px;
    height: 10px;
    transform: translateY(-50%);
}

/* Custom popup delete and logout */
.swal2-popup.swal2-modal {
   padding: 40px;
   border-radius: 8px !important;
   width: 600px;
   min-height: 200px;
   justify-content: space-between;
}

.swal2-popup .swal2-actions {
   flex-wrap: nowrap !important;
   margin-top: 0 !important;
   flex-direction: row-reverse;
}

.swal2-popup .swal2-title {
   font-size: 18px !important;
   font-weight: 500;
   margin: 0 !important;
   color: #333 !important;
}

.swal2-popup #swal2-content {
   font-size: 16px !important;
   margin-bottom: 24px !important;
   margin-top: 24px !important;
   color: #333;
}

.customer-popup-logout-confirm>.swal2-actions>.swal2-cancel,
.customer-popup-confirm-delete>.swal2-actions>.swal2-cancel {
   background-color: #FFF !important;
   color: #666 !important;
   box-shadow: none !important;
   border: 2px solid #666666 !important;
   width: 200px;
   height: 48px;
   padding: 0;
   line-height: 16px;
   font-size: 17px !important;
   border-radius: 32px !important;
   margin: 0 40px 0 0 !important;
   font-weight: 500;
   transition: color .2s ease-in-out, background-color .2s ease-in-out !important;
}

.customer-popup-logout-confirm>.swal2-actions>.swal2-cancel:hover,
.customer-popup-confirm-delete>.swal2-actions>.swal2-cancel:hover {
   box-shadow: none !important;
   background-color: #ebebeb !important;
   color: #333333 !important;
   border: 2px solid #BBBBBB !important;
   background-image: none !important;
}

.customer-popup-confirm-delete>.swal2-actions>.swal2-confirm {
   background-color: #FF0034 !important;
   color: #fff;
   border-radius: unset;
   box-shadow: none !important;
   border: 2px solid #FF0000 !important;
   letter-spacing: 2px;
   width: 200px;
   height: 48px;
   padding: 0;
   line-height: 16px;
   font-size: 16px !important;
   margin-right: 15px;
   font-weight: 500;
   margin: 0 !important;
   border-radius: 36px !important;
   transition: color .2s ease-in-out, background-color .2s ease-in-out !important;
}

.customer-popup-logout-confirm>.swal2-actions>.swal2-confirm {
   background-color: #366DB3 !important;
   color: #fff;
   border-radius: unset;
   box-shadow: none !important;
   border: 2px solid #366DB3 !important;
   width: 200px;
   height: 48px;
   padding: 0;
   line-height: 16px;
   font-size: 16px !important;
   margin-right: 15px;
   font-weight: 500;
   margin: 0 !important;
   border-radius: 36px !important;
   transition: color .2s ease-in-out, background-color .2s ease-in-out !important;
}

.customer-popup-confirm-delete>.swal2-actions>.swal2-confirm:hover {
   box-shadow: none !important;
   background-color: #fff !important;
   color: #FF0034 !important;
   border: 2px solid #FF0034 !important;
   background-image: none !important;
}

.customer-popup-logout-confirm>.swal2-actions>.swal2-confirm:hover {
   box-shadow: none !important;
   background-color: #fff !important;
   color: #366DB3 !important;
   border: 2px solid #366DB3 !important;
   background-image: none !important;
}
/* End popup */

@media (min-width: 62.5625em) and (max-width: 82.8125em) {
   .container, .container.p-0, .home-footer-menu, .wrapper-dropdown {
      padding: 0 20px !important;
   }
   .header-search .input-search {
      min-width: auto;
      margin-right: 20px;
   }
   .home-bg {
      margin: 0 -20px;
   }
   .btn-to-register,
   .btn-cart{
      width: 110px;
      font-size: 15px !important;
   }
   .btn-to-login {
      font-size: 15px;
      margin-right: 20px;
      line-height: 2;
   }
   .header-search> .input-search> span {
      width: 65px;
      font-size: 15px !important;
   }
   .header-search .drop-search>span {
      font-size: 15px !important;
   }
   .my-home {
      margin-right: 16px;
   }
   .hide-rps-1300 {
      display: none;
   }
   .btn-cart-auth {
      width: 160px;
   }
   .home-product .product-menu {
      --column: 4;
   }
   .home-footer-menu>.home-footer-item {
      width: 32%;
      padding: 0 16px;
      text-align: center;
   }
   .wrapper-product .product-menu {
      --column-product: 5;
   }
   .product-info .btn-add-cart {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
   }
   input[name="keyword"]::placeholder {
      font-size: 14px !important;
      letter-spacing: .5px;
   }
   .header-search input[name="keyword"] {
      padding-left: 10px !important;
   }
   .enter-foo {
      display: block;
   }
}

/* Responsive Mobile */
@media screen and (max-width: 62.5em) {
   #main-shopping {
      display: unset;
   }
   .page-select {
      margin-left: 0;
   }
   /* Header */
   .container, .container.p-0 {
         padding: 0 16px !important;
         overflow: hidden;
   }
   .wrapper-table {
      margin-top: 60px;
   }
   .container-top .wrapper-top {
      top: 99px;
      height: auto;
      padding: 4px 0;
      border-bottom: none;
   }
   .wrapper-top .menu-title {
      font-size: 16px;
   }
   .wrapper-top span.mx-3.px-1{
      margin: 0 10px !important;
      padding: 0 !important;
   }
   .wrapper-top .menu-title.mt-n4 {
      margin-top: -4px;
   }
   .header-menu .menu-children {
      height: 100%;
      overflow: hidden;
   }
   .img-menu-mobile,
   .icon-home-rps,
   .block-rps,
   .enter-foo {
      display: block !important;
   }
   .icon-home,
   .header-search .drop-search {
      display: none;
   }
   .header-menu .menu-logo-home {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
   }
   .header-search {
      margin: 12px 0 8px;
      width: 100%;
   }
   .header-search .input-search {
      min-width: 100%;
      height: 40px;
      margin: 0;
   }
   .header-search input {
      height: 40px !important;
   }
   .cart-gr{
      position: absolute;
      right: 16px;
      top: 4px;
   }
   .page-home {
      padding-top: 20px;
   }
   .my-home {
      margin-right: 16px;
   }
   .btn-cart {
      height: 32px;
      width: 60px;
      font-size: 13px !important;
   }
   .auth-gr {
      margin-right: 0;
   }
   .cart-img.pr-2 {
      width: 16px;
      height: 16px;
      padding: 0 !important;
      margin-right: 2px !important;
   }
   .login {
      margin-top: 0;
   }
   .btn-to-login {
      margin-right: 24px !important;
   }
   .btn-to-register {
      background-color: #FFF;
      color: #366DB3;
      border: 1px solid #366DB3 !important;
   }
   .btn-to-register,
   .btn-to-login {
      font-size: 14px !important;
      width: 76px;
      height: 32px;
      margin: 4px 0;
   }
   .btn-to-register.btn-common::before {
      display: none;
   }
   /* End header */

   .hide-rps.d-flex,
   .hide-rps {
      display: none !important;
   }
   .fz-18-rps {
      font-size: 18px !important;
   }
   .fz-16-rps {
      font-size: 16px !important;
   }
   .fz-15-rps {
      font-size: 15px !important;
   }
   .fz-14-rps {
      font-size: 14px !important;
   }
   .fz-12-rps {
      font-size: 12px !important;
   }
   .text-66-rps {
      color: #666 !important;
   }
   .text-center-rps {
      text-align: center;
      align-items: center;
   }
   .w-100-rps.w-50,
   .w-100-rps {
      width: 100% !important;
   }
   .enter-rps::before {
      content: '\a';
      white-space: pre;
   }
   .enter-rps-af::after {
      content: '\a';
      white-space: pre;
   }
   .hidden-rps {
      display: none;
   }
   .d-block-rps.d-flex, .show-rps, .show-rps.d-flex {
      display: block !important;
   }
   .payment-detail .pay-show-detail {
      padding: 20px 16px;
   }
   .pay-show-detail .address {
      display: block;
      line-height: 1.8;
   }
   .pay-show-detail .tel {
      margin-right: 0;
   }
   .pay-show-detail .request-cancel {
      display: block;
      margin-top: 15px;
   }
   .login-title {
      font-size: 22px;
   }
   .home-bg {
      margin: 0 -16px;
   }
   .login-note {
      margin: 24px 0 0 !important;
      letter-spacing: -.5px;
   }
   .info-login {
      margin: 40px 0 !important;
      width: 100%;
      max-width: 400px;
   }
   .wrapper-detail {
      padding-top: 24px;
   }
   .wrapper-detail .form-item .input-name .w-100-rps {
      margin-right: 0 !important;
   }
   .mp-reset-rps.pb-4,
   .mp-reset-rps.mb-4,
   .mp-reset-rps.pb-2,
   .mp-reset-rps {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
   }
   .mb-20-rps {
      margin-bottom: 20px !important;
   }
   .mb-24-rps {
      margin-bottom: 24px !important;
   }
   .mt-40-rps {
      margin-top: 40px !important;
   }
   .mb-40-rps.mb-4,
   .mb-40-rps {
      margin-bottom: 40px !important;
   }
   .mb-60-rps {
      margin-bottom: 60px !important;
   }
   .mt-20-rps.mt-4.pt-3 {
      margin-top: 20px !important;
      padding-top: 0 !important;
   }
   .mt-20-rps,
   .mt-20-rps.m-0,
   .mt-20-rps.mt-5 {
      margin-top: 20px !important;
   }
   .mpt-0.my-4.py-3 {
      margin-top: 20px !important;
      padding-top: 0 !important;
   }
   .mr-4.pr-3.mr-30-rps {
      margin-right: 30px !important;
      padding-right: 0 !important;
   }
   .form-group.w-100.my-4.py-3 {
      padding: 0 !important;
      margin: 20px 0 !important;
   }
   .form-mt-34  {
      margin-top: 34px;
   }
   .ls-n1-rps {
      letter-spacing: -1px;
   }
   .ls-n18-rps {
      letter-spacing: -1.8px;
   }
   .my-page-detail {
      padding-top: 40px;
   }
   .my-page-item {
      width: 100%;
      height: 80px;
      max-width: 400px;
      margin: 0 auto !important;
      flex-direction: row;
      justify-content: start;
      padding-left: 53px;
   }
   .my-page-item:not(:last-child) {
      margin-bottom: 20px !important;
   }
   .my-page-item>p {
      font-size: 18px !important;
      margin-left: 32px !important;
   }
   .order-item-img {
      width: 92px;
      height: 92px;
   }
   .title-cpass-user {
      margin-top: 20px !important;
   }
   .w-400-rps {
      max-width: 400px !important;
   }
   .h-48-rps {
      height: 48px !important;
   }
   .btn-edit-card-gr {
      flex-direction: row-reverse;
   }
   .btn-edit-card-gr>div:first-child {
      flex: 1;
   }
   .btn-edit-card-gr>.delete-payment-card {
      margin-right: 40px;
   }
   .img-w-60-rps.my-4 {
      width: 60px !important;
      margin: 40px 0 !important;
   }
   .page-home .home-intro {
      margin-top: 24px;
   }
   .home-intro .heading {
      margin-bottom: 24px;
   }
   .btn-home-to-register {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 5%;
      width: 50%;
      max-width: 500px;
      min-width: 260px;
      height: 48px;
      display: flex !important;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      background-color: #F39801;
      border: 2px solid #F39801;
      border-radius: 32px;
      color: #FFF;
      padding-bottom: 2px;
      font-weight: 500;
      transition: all .3s ease-in-out;
   }
   .btn-home-to-register:hover {
      background-color: #FFF;
      color: #F39801;
   }
   .heading .title>img {
      margin: 0 auto;
   }
   .heading .sub-title {
      font-size: 16px;
   }
   .home-intro .content::before {
      left: 10px;
      top: 10px;
      width: 100.3%;
      height: 101%;
   }
   .text-ct-28::after {
      display: none;
   }
   .line-yl-rps {
      position: relative;
   }
   .line-yl-rps::before {
      content: "";
      position: absolute;
      bottom: -3px;
      left: -5px;
      height: 12px;
      width: 104%;
      background-color: #F39801;
      z-index: -1;
   }
   .home-intro .content {
      margin-right: 7px;
   }
   .home-product>div>.product-type {
      font-size: 22px;
      margin-bottom: 20px;
   }
   .home-product .product-menu {
      --column: 3
   }
   .container-top .wrapper-bottom {
      top: 138px;
      height: 80px;
   }
   .wrapper-bottom-item {
      min-width: fit-content;
      justify-content: start;
   }
   .wrapper-bottom-item:not(:last-child) {
      margin-right: 48px;
   }
   .wrapper-product .product-group {
      padding-top: 230px !important;
      margin-top: -230px;
   }
   .wrapper-product {
      padding-top: 160px;
   }

   /* Footer */
   .footer-top {
      overflow: hidden;
      height: 100%;
      padding: 0 16px;
   }
   .footer-menu {
      padding: 0;
      margin: 0;
      width: 100%;
      text-align: center;
   }
   .foo-home-hide {
      display: block;
      width: 100%;
      padding: 0;
   }
   .footer-item.px-5 {
      padding: 0 !important;
   }
   .footer-item.px-5>li:last-child {
      border-bottom: none !important;
   }
   .footer-item>li {
      padding: 20px;
      border-bottom: 1px solid #FFF;
      font-size: 14px;
   }
   .footer-bottom {
      padding-top: 40px;
   }
   .contact {
      margin-bottom: 60px;
   }
   .coppy-right {
      font-size: 13px;
   }
   .home-footer-menu {
      display: block;
      padding: 40px 16px;
   }
   .home-footer-menu>.home-footer-item {
      margin: 0 auto;
      width: 100%;
      max-width: 400px;
      padding: 0 45px;
      text-align: center;
   }
   .home-footer-menu>.home-footer-item:not(:last-child) {
      margin-bottom: 20px;
   }
   .wrapper-product .product-menu {
      --column-product: 3
   }
   .btn-add-cart {
      margin-left: 8px;
      margin-right: 8px;
   }
   .product-info {
      border-radius: 4px;
      box-shadow: 0 0 2px rgb(0 0 0 / 16%);
      border: 1px solid rgb(173 173 173 / 50%);
      padding-bottom: 20px;
   }
   .flex-fill, .product-price, .product-amount {
      padding-left: 8px;
      padding-right: 8px;
   }
   .wrapper-product .product-img {
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;
   }
   .wrapper-product-search {
      padding-top: 86px !important;
   }
   .wrapper-dropdown {
      top: 99px;
   }
   .wrapper-dropdown> .product-detail {
      padding: 0 16px;
   }
   .wrapper-dropdown .product-type {
      font-size: 18px;
   }
   .wrapper-dropdown .product-menu {
      display: none;
   }
   .wrapper-dropdown .product-item {
      display: block !important;
      padding: 0;
      margin-bottom: 18px;
      font-size: 15px;
      max-width: 100%;
      font-weight: 300;
   }
   .wrapper-dropdown .product-item:last-child {
      margin-bottom: 24px;
   }
   .wrapper-dropdown .close-drop-down {
      margin: 20px 0;
   }
   .show-category {
      padding-left: 50px;
   }
   .wrapper-return.py-4.btn-close-dd {
      padding-top: 40px !important;
   }
   .pdetail-info .pdetail-sub-title {
      padding-bottom: 15px !important;
      margin: 15px 0 10px !important;
   }
   .product-detail-c {
      margin-top: 24px;
   }
   .product-detail-c .pdetail-info {
      margin-left: 20px;
   }
   .pdetail-info .pdetail-cart {
      width: 100%;
      margin-left: auto;
      margin-top: auto;
      flex-direction: column;
      align-items: flex-end;
   }
   .pdetail-cart .product-amount {
      margin: 20px 0;
   }
   .pdetail-cart .pdetail-price {
      text-align: end;
      font-size: 18px;
   }
   .pdetail-btn-add-cart {
      float: right;
   }
   .text-truncate-custom {
      display: inline-block;
      max-width: 400px;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      vertical-align: bottom;
   }
   .wrapper-payment {
      margin-top: 0;
   }
   .request-cancel.ml-4 {
      margin-left: 0 !important;
   }
   .col-md-1.label-rps{
      flex: 0 0 100px;
      max-width: unset !important;
   }
   .col-sm-2.label-rps {
      flex: 0 0 150px;
      max-width: unset !important;
   }
   .cart-empty {
      margin: 36px 0 72px;
   }
   .cart-detail-rps{
    display: block;
    margin-top: 10px;
    font-size: 14px !important;
   }

    .product-price-tax {
        display: flex;
        justify-content: end;
        align-items: center;
        font-weight: 500;
        margin: 0 0 12px;
        margin-left: auto;
        float: right;
    }
   .faq .faq-type {
      display: block;
   }
   .faq .faq-type >a {
      padding: 0;
      display: grid;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      margin-bottom: 10px;
      height: 60px;
      line-height: 55px;
   }
   .transaction {
      padding-top: 30px !important;
   }
   .form-done-contact {
      margin-top: 36px;
   }
   .form-done-contact .my-5.py-3,
   .form-done-contact .login-title.mt-3.pt-1 {
      margin-top: 40px !important;
      padding-top: 0 !important;
   }
   .btn-common-white::before,
   .btn-common::before {
      transition: all .1s cubic-bezier(0.68, 0, 0.265, 1) !important;
   }
   .cart-rps {
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      border: 1px solid #ADADAD;
      padding: 20px 16px;
      width: 100%;
      box-shadow: 0 0 6px rgb(0 0 0 / 16%);
      margin-bottom: 16px;

   }
   .cart-rps .pcart-img-rps {
      max-width: 130px;
      width: 130px;
   }
   .cart-rps .pdetail-info-rps{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      margin-left: 8px;
   }
   .cart-rps .pdetail-sub-title-rps {
      color: #666;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.8;
      margin: 10px 0 16px !important;
   }
   .cart-rps .pdetail-sub-title-rps>span {
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
   }
   .cart-rps .product-price-rps {
      font-weight: 500;
      padding: 15px 0 13px 0;
   }
   .cart-rps .pdetail-top-rps {
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      font-size: 18px;
   }
   .usage-flow {
      padding: 100px 16px 50px;
   }
   .use-flow>.title, .use-when>.title {
      font-size: 24px;
   }
   .use-when>.suggest {
      padding: 0 16px;
      margin-bottom: 80px;
   }
   .use-when>.suggest>img {
      margin: 35px 0 26px;
   }
   .use-flow-step .step-number {
      position: relative;
      margin-bottom: 64px;
   }
   .use-flow .use-flow-step {
      padding: 80px 16px 0;
   }
   .use-flow-step .step-number>img {
      position: absolute;
      top: -37px;
      width: 64px;
   }
   .step-number .step-content {
      margin-left: 44px;
      padding: 12px 16px;
      font-size: 14px;
   }
   .step-number .step-content>.title {
     font-size: 16px;
   }
   .use-flow-step .line-number {
      left: 40px;
      top: 110px;
      height: 77%;
   }
   .about-fees>div {
      height: 430px;
   }
   .about-fees .fee-content {
      padding: 20px 15px;
   }
   .about-fees .fee-content>div {
      width: 100%;
      padding: 7px 0;
      font-size: 16px;
   }
   .about-fees .fee-content img {
      width: 72px;
   }
   .about-fees .basic-fee {
      padding-left: 16px;
   }
   .area {
      margin: 0 21px 70px 16px;
      box-shadow: 5px 10px #F39801;
      padding: 35px 16px;
   }
   .area .heading {
      font-size: 24px;
      margin-bottom: 24px !important;
   }
   .note-sale {
      padding: 40px 16px 70px;
   }
   .note-sale .heading {
      font-size: 18px;
   }
   .note-sale .fw-500 {
      margin-bottom: 12px !important;
   }
   .plus-black-big {
      width: 40px;
      top: 40%;
   }
   .about-fees .fee-content>.price {
      font-size: 22px;
   }
   .about-fees .fee-content {
      height: 220px;
   }
   .note-price {
      font-size: 13px;
      padding: 7px 0 !important;
      bottom: 40px;
   }
   .use-flow-step .step-number:last-child {
      margin-bottom: 80px;
   }
   .about-fees>.title {
      font-size: 24px;
   }
   .show-ib-rps {
      display: inline;
   }
}

@media screen and (max-width: 43.75em) {
   .home-product .product-menu {
      --column: 2;
      --spacing: 16px;
      margin-left: -16px;
   }
   .home-product .product-item>.card-name {
      font-size: 13px;
   }
   .home-product .product-item {
      height: 90px;
   }
   .wrapper-product .product-group {
      padding-top: 190px !important;
      margin-top: -190px;
   }
   .wrapper-product .product-menu {
      --column-product: 2;
      margin-bottom: 42px;
   }
   .product-group .product-menu {
      margin-bottom: 0;
   }
   .wrapper-product .product-group {
      margin-bottom: 42px;
   }
   .wrapper-product .product-group:not(:nth-last-child(2)) {
      margin-bottom: 25px;
   }
   .wrapper-product .product-item {
      margin-bottom: 18px;
   }
   .wrapper-product .product-item:nth-child(odd) {
      padding-right: 7px !important;
   }
   .wrapper-product .product-item:nth-child(even) {
      padding-left: 7px !important;
   }
   .wrapper-product .product-title {
      -webkit-line-clamp: 2;
      font-size: 13px;
   }
   .product-sub-title {
      font-size: 12px;
   }
   .fz-13-rps {
      font-size: 13px !important;
   }
   .fz-12-mb {
      font-size: 12px !important;
    }
   .container-top .wrapper-bottom {
      height: 45px;
   }
   .wrapper-product  {
      padding-top: 124px;
   }
   .wrapper-product .product-type {
      font-size: 18px;
   }
   .product-detail-c {
      display: block;
   }
   .product-detail-c .pdetail-info {
      margin-left: 0;
   }
   .pdetail-info .pdetail-title{
      -webkit-line-clamp: 3;
      margin-top: 20px !important;
   }
   .product-detail-c .pdetail-img {
      width: 100%;
      max-height: 320px;
   }
   .pdetail-info .pdetail-sub-title{
      display: block;
      padding-bottom: 11px !important;
      margin: 11px 0 10px !important;
      line-height: 1.8;
   }
   .pdetail-info .pdetail-sub-title>span{
      display: block;
   }
   .text-truncate-custom {
      max-width: 250px;
   }
   .payment-detail .pay-show-detail {
      padding: 20px 0;
   }
   .pay-show-detail .form-item {
      padding: 0 16px;
   }
   .pay-show-detail .form-item-info.flex-nowrap.dp {
      flex-wrap: wrap !important;
   }
   .pay-show-detail .form-item-info .label-rps {
      margin-bottom: 10px !important;
   }
   .img-done-payment.my-4.py-3 {
      width: 121.35px;
      margin-top: 24px !important;
      margin-bottom: 40px !important;
      padding: 0 !important;
   }
   .wrapper-payment .login-title {
      font-size: 20px;
   }
   .col-md-1.label-rps,
   .col-sm-2.label-rps {
      flex: unset;
   }
   .faq {
      padding-top: 20px;
   }
   .faq-gr:not(:last-child) {
      margin-bottom: 40px;
   }
   .faq .faq-type >a {
      height: 40px;
      line-height: 35px;
      font-size: 16px;
   }
   .faq-gr .faq-title {
      margin-bottom: 24px !important;
      font-size: 22px;
   }
   .faq-item-gr {
      margin-bottom: 16px;
   }
   .faq-gr .faq-item {
      font-size: 16px;
      height: auto;
      padding: 12px;
   }
   .faq-gr .faq-rep {
      padding: 12px;
   }
   .zoom-text {
      font-size: 24px;
      line-height: 1.2;
      margin-right: 13px;
   }
   .btn-faq-plus {
      padding-left: 20px;
   }
   .company-profile {
      margin-bottom: 40px;
   }
   .map-company.pl-4,
   .map-company.pl-5 {
      display: block;
      padding-left: 0 !important;
      margin-top: 16px;
   }
   .content-term-use {
      padding-top: 20px;
   }
   .transaction .form-item .input-name {
      line-height: 1.8;
   }
   .transaction .sign-liquor {
      padding-bottom: 8px;
      margin: 20px 0 40px;
   }
   .swal2-container {
      padding: 16px !important;
   }
   .swal2-popup.swal2-modal {
      padding: 24px 16px;
      min-height: 150px;
   }
   .customer-popup-logout-confirm>.swal2-actions>.swal2-cancel,
   .customer-popup-confirm-delete>.swal2-actions>.swal2-cancel {
      margin: 0 20px 0 0 !important;
   }
   .cart-rps .pcart-img-rps {
      max-width: 92px;
      width: 92px;
      height: 92px;
   }
   .cart-rps .pdetail-sub-title-rps {
      font-size: 14px;
   }
   .cart-rps .pdetail-top-rps {
      font-size: 16px;
   }
   .plus-black-big {
      width: 25px;
   }
   .basic-fee .fee-content {
      margin-right: 8px;
   }
   .delivery-charge .fee-content {
      margin-left: 8px;
   }
   .delivery-charge .fee-content>.price {
      line-height: 0.3;
      border-bottom: 9px solid rgb(243 152 1 / 50%);
   }
   .basic-fee .fee-content>.price {
      line-height: 0.3;
      border-bottom: 9px solid rgb(12 152 87 / 50%);
   }
}
@media screen and (max-width: 28.125em) {
   .h-40 {
      height: 40px !important;
      max-height: 40px !important;
   }
   .title-cpass-user {
      margin: 0 !important;
      margin-top: 20px !important;
   }
   .pdetail-btn-add-cart {
      width: 100%;
   }
   .wrapper-top .menu-title.mt-n4 {
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      max-width: 300px;
   }
   .text-truncate-custom {
      max-width: 130px;
   }
   .price-payment-od {
      min-width: auto;
   }
   .cart-rps .product-price-rps,
   .cart-rps .pdetail-sub-title-rps {
      font-size: 13px;
   }
   .cart-rps .product-price-rps> .text-red {
      font-size: 16px !important;
   }
   .cart-rps .pdetail-top-rps {
      font-size: 14px;
   }
   .suggest-menu-rps .suggest-item {
      width: fit-content;
      font-size: 15px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 18px;
      padding: 10px 16px;
      letter-spacing: -1px;
      white-space: nowrap;
   }
   .suggest-menu-rps >.suggest-item {
      padding: 10px 33px;
   }
   .use-when .suggest-item::before {
      left: 1px;
      top: 2px;
      width: 102%;
      height: 112%;
   }
   .note-price {
      width: 94%;
   }
   .text-left-rps {
      text-align: left;
   }
}

/* start show toast */
.toast {
    visibility: hidden;
    min-width: 400px;
    max-width: 400px;
    background-color: white !important;
    box-shadow: rgb(0 0 0 / 15%) 0px 0px 15px;
    color: black;
    text-align: center;
    border-radius: 40px;
    padding: 25px;
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    font-size: 14px;
}

.error {
    border: 1px solid #FF0000 !important;
 }

 .error-image {
     border: 1px dashed #FF0000 !important;
     color: #FF0000 !important;
  }

 .mess-error {
    font-size: 13px !important;
    color: #FF0000 !important;
 }

 .color-b9 {
    color: #B9B9B9 !important;
 }

.toast.show {
    visibility: visible;
    animation: fadein 0.5s;
}

@keyframes fadein {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}