html,
body {
    padding: 0;
    margin: 0;
    /* overflow-x: hidden !important; */
}
body {
    color: #6a6a6a;
    background: #fff;
    font-family: "Prompt", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    overflow-x: hidden;
}
a {
    outline: 0;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}
a:focus {
    outline: 0;
}
a:hover {
    text-decoration: none;
}

b {
    font-weight: 600;
}
button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color;
}

*::selection {
    background: #a0d3f2;
    color: #ffffff;
}
*::-moz-selection {
    background: #a0d3f2;
    color: #ffffff;
}

.h5,
h5 {
    font-size: 1rem;
}

#cm {
    box-shadow: 0 0.625rem 1.875rem rgb(3 3 3 / 12%) !important;
    border: 1px solid #00000030;
}
.btn-link {
    font-weight: inherit;
    color: inherit;
    text-decoration: inherit;
}

.btn-link:hover {
    text-decoration: none;
}

.p {
    font-size: 18px;
    font-weight: 300;
}

.border-radius-15 {
    border-radius: 15px;
}

.border-radius-5 {
    border-radius: 15px;
}

.container-xxl {
    --bs-gutter-x: 1.5rem;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-right: auto;
    margin-left: auto;
}

.bg-pink {
    background-color: #fe42a1;
}
.bg-orange {
    background-color: #fe634d;
}

.cursor-pointer {
    cursor: pointer;
}

.ribbon-white-bottom-right {
    position: absolute;
    padding: 0 10px;
    bottom: 10px;
    right: 10px;
    background: white;
    color: black;
    border-radius: 50px;
}

.ribbon-green-top-right {
    position: absolute;
    padding: 0 10px;
    top: 10px;
    right: 10px;
    background: #4db848;
    color: white;
    border-radius: 50px;
}

@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1320px;
    }
}

#section-promotion,
#section-product,
#section-flashsale,
#section-flashsale-best-price,
#section-page {
    padding: 20px 0px;
}

#section-promotion {
    padding-bottom: 0;
}

#section-link {
    padding-bottom: 30px;
    padding-top: 10px;
}

#section-flashsale {
    padding: 50px 0px;
    background: #c4e3f7;
}
#section-flashsale-best-price {
    padding: 50px 0px;
    background: #ffc107;
}

#section-login {
    padding: 50px 0px;
    min-height: 100vh;
    /* background: url(../images/section-login.png); */
    background: white;
    background-attachment: fixed;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}

#section-login .sub-title {
    font-size: 18px;
    font-weight: 500;
}

.item-product {
    margin-bottom: 15px;
    position: relative;
    border: 1px solid #00000000;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
}

.item-product:hover {
    border: 1px solid #00000059;
}

.item-product .add-to-cart span {
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product .add-to-cart span:hover {
    background-color: #28a745a1;
    color: white;
}

#buttonfav span {
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#buttonfav span:hover {
    background-color: #28a745a1;
    color: white;
}

.item-product .tag {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 3;
    font-size: 14px;
    text-align: center;
    width: 40px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    text-transform: uppercase;
}

.item-product .tag-recommended {
    width: 70px;
    height: 85px;
}

.tag-recommended img {
    width: 150px;
}
.item-product .tag-new {
    background-color: #007bff;
    color: #ffffff;
}

.item-product .tag-hot {
    background-color: #dc3545;
    color: #ffffff;
}

.item-product .tag-sale {
    background-color: #fff053;
    color: #dc3545;
}

.item-product .tag-gimmick {
    position: absolute;
    top:8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: black;
}

.tag-best-price {
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: #089048;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.tag-best-price img {
    width: 60px;
}

.item-product:hover .tag-best-price img {
    transform: scale(1.2) !important;
}

.item-product .tag-new:before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: -10px;
    border-left: 20px solid #007bff;
    border-right: 20px solid #007bff;
    border-bottom: 10px solid transparent;
}

.item-product .tag-hot:before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: -10px;
    border-left: 20px solid #dc3545;
    border-right: 20px solid #dc3545;
    border-bottom: 10px solid transparent;
}

.item-product .tag-sale:before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: -10px;
    border-left: 20px solid #fff053;
    border-right: 20px solid #fff053;
    border-bottom: 10px solid transparent;
}

.item-product .img-product {
    position: relative;
    overflow: hidden;
}
.item-product .img-product img {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product:hover .img-product img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product .img-product .product-option {
    text-align: center;
    position: absolute;
    bottom: -55px;
    left: 0;
    right: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product:hover .img-product .product-option {
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 2;
}

.item-product:hover .btn-outline-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.getfav {
    background: white;
}

.item-product .img-product .product-option .btn-outline-secondary {
    /* color: #d4d4d4;
    background: #f8f8f8;
    border-color: #d4d4d4; */
    color: #007bff;
    background: white;
    border-color: #007bff;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product .img-product .product-option .btn-outline-secondary.active {
    color: #ffffff !important;
    background: #007bff !important;
    border-color: #007bff !important;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product .img-product .product-option .btn-outline-secondary:hover {
    color: #ffffff !important;
    background: #007bff !important;
    border-color: #007bff !important;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product .img-product .product-option a i {
    color: #007bff;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.item-product .img-product .product-option a.active i {
    color: #ffffff;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product .img-product .product-option .btn-outline-secondary:hover i {
    color: #ffffff !important;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-product .img-product .product-option h4 {
    color: #000000;
    background: rgb(255 255 255 / 0.8);
    padding: 10px 15px;
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
}

.item-product .text-product {
    text-align: center;
    margin-top: 0px;
}

.item-product .text-product h4 {
    font-size: 18px;
    line-height: 24px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    padding: 0px 5px;
}

.item-product .text-product p {
    font-size: 16px;
    color: #6f6f6f;
}

.item-product .text-product s {
    color: #bbbbbb;
}

.item-product .text-product-flashsale {
    text-align: center;
}

.item-product .text-product-flashsale .price {
    font-size: 20px;
    font-weight: 500;
    display: inline-block;
    color: #dc3545;
}

.item-product .text-product-flashsale s {
    color: #bbbbbb;
}

.item-product .text-product-flashsale .qty {
    font-size: 16px;
    display: inline-block;
    float: right;
    color: #6f6f6f;
}

.text-head-index {
    color: #000000;
    margin-bottom: 3rem;
    position: relative;
    margin-left: 20px;
}

.zoonblog {
    margin-bottom: 1rem;
}

.text-head-index::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 70px;
    height: 3px;
    background: #007bff;
}

.text-head-flashsale-index {
    color: #000000;
    margin-bottom: 1rem;
    position: relative;
    text-transform: uppercase;
}

.text-head-flashsale-index span {
    color: #000000;
    font-weight: 300;
}

.link-page {
    position: absolute;
    top: 15px;
    right: 0px;
    color: #000000;
    font-size: 16px;
    font-weight: 300;
}

.item-howto {
    position: relative;
    text-align: center;
    display: block;
    padding: 30px;
    background: #f5f5f5;
    min-height: 420px;
    margin-top: 90px;
}

.item-howto .numb {
    position: absolute;
    top: -45px;
    left: 35%;
    right: 0;
    display: inline-block;
    width: 80px;
    height: 80px;
    font-size: 45px;
    line-height: 75px;
    font-weight: 500;
    background: #4caf50;
    border-radius: 100%;
    color: #ffffff;
}

.item-howto h4 {
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    color: #009688;
}

.breadcrumb {
    background: none;
    padding: 33px 0 27px 0;
    margin: 0;
    position: relative;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.breadcrumb .container {
    margin-top: 0;
}

.breadcrumb ul {
    position: relative;
    padding-inline-start: 0px;
    margin-bottom: 0px;
}

.breadcrumb ul li:not(:last-child) {
    border-right: 1px solid #e9e9e9;
}

.breadcrumb ul li {
    font-size: 12px;
    line-height: 21px;
    display: inline-block;
    padding: 0 14px;
}

.breadcrumb ul li:last-child {
    color: #54b848;
}

.breadcrumb ul li a {
    color: #777;
    display: inline-block;
    transition: all 0s linear;
    -ms-transition: all 0s linear;
    -webkit-transition: all 0s linear;
    -o-transition: all 0s linear;
}

.breadcrumb ul li a:hover {
    color: #007bff;
}

.breadcrumb ul li:first-child {
    padding-left: 0;
}

.zoonblog .card {
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card:hover {
    background: #4db848;
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card span .btn-warning {
    color: #ffffff;
    background-color: #ff6b01;
    border-color: #ff6b01;
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card:hover span {
    color: #ffffff;
    background-color: #333333;
    border-color: #333333;
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card img {
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card:hover img {
    -webkit-filter: brightness(125%);
    -moz-filter: brightness(125%);
    -khtml-filter: brightness(125%);
    -o-filter: brightness(125%);
    -ms-filter: brightness(125%);
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card-text {
    color: #6f6f6f;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card:hover .card-text {
    color: #ffffff;
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card-title {
    color: #333333;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.zoonblog .card:hover .card-title {
    color: #ffffff;
    -webkit-transition: all 0.2s ease-in-out;
    -khtml-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.box-zoom {
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.box-zoom p {
    color: #6c757d;
    font-size: 18px !important;
    margin-top: 15px !important;
    margin-bottom: 30px !important;
}

.box-zoom-img {
    background-color: #ffffff;
    width: 100%;
}

.box-zoom img {
    opacity: 0.8;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.zoom-zoom {
    box-shadow: none;
    background-color: transparent;
    transition: none;
    border: 0;
    border-radius: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    background: rgb(160 211 242 / 75%);
    line-height: 10px;
    display: block;
    border: 0;
    position: absolute;
    right: 15px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    margin-top: -40px;
    padding: 12px 5px;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.box-zoom:hover img {
    opacity: 1;
}

.box-zoom:hover .zoom-zoom {
    color: #a0d3f2;
    width: 65px;
    height: 65px;
    font-size: 30px;
    background: rgba(255, 255, 255, 0.7);
    padding: 18px 5px;
    margin-top: -65px;
}

/* 多選框 */
.item-code-checkbox input[type="checkbox"] {
    display: none;
}
.item-code-checkbox input[type="checkbox"] + label {
    display: block;
    cursor: pointer;
    background-color: #fff;
    border: solid 1px #dddddd;
    border-left: solid 0px;
    padding: 0px 0px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-code-checkbox input[type="checkbox"]:checked + label {
    background-color: #81d4fa;
    color: #ffffff;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-code-checkbox label img {
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -khtml-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-code-checkbox input[type="checkbox"]:checked + label img {
    -webkit-filter: brightness(150%);
    -moz-filter: brightness(150%);
    -khtml-filter: brightness(150%);
    -o-filter: brightness(150%);
    -ms-filter: brightness(150%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-code-checkbox .text-code-checkbox h5 {
    font-size: 1rem;
    margin-bottom: 0px;
}

.item-code-checkbox .text-code-checkbox p {
    font-size: 12px;
    margin-bottom: 0px;
}

.item-code-checkbox .text-code-checkbox span {
    border: solid 1px #ff9800;
    background: #ff9800;
    color: #fdfdfd;
    padding: 2px 10px;
    font-size: 12px;
    margin-top: 5px;
    display: inline-block;
    border-radius: 5px;
}

.item-code-checkbox .text-code-checkbox*::selection {
    background: transparent;
    color: #ffffff;
}

.item-code-checkbox .text-code-checkbox*::-moz-selection {
    background: transparent;
    color: #ffffff;
}

.product-big-title-area {
    /*background: url(../images/crossword.png) repeat scroll 0 0 #4db848;*/
    background: #4db848;
}

/*.product-bit-title h2 {
  font-family: raleway;
  font-size: 50px;
  font-weight: 200;
  margin: 0;
  padding: 50px 0;
  color: #fff;
  }*/

.product-bit-title h2 {
    /*font-family: raleway;*/
    font-size: 25px;
    font-weight: 200;
    margin: 0;
    padding: 20px 0;
    color: #fff;
}

.item-coupon {
    display: block;
    /*cursor: pointer;*/
    background-color: #fff;
    border: solid 1px #dddddd;
    border-left: solid 0px;
    padding: 0px 0px;
    margin-bottom: 20px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-coupon h5 {
    font-size: 1rem;
    margin-bottom: 0px;
}

.item-coupon p {
    font-size: 12px;
    margin-bottom: 0px;
}

.item-coupon span {
    border: solid 1px #ff9800;
    background: #ff9800;
    color: #fdfdfd;
    padding: 2px 10px;
    font-size: 12px;
    margin-top: 5px;
    display: inline-block;
    border-radius: 5px;
}

.coupon-img {
    position: relative;
}

.coupon-img::before {
    content: "";
    width: 10px;
    height: 20px;
    background: #ffffff;
    position: absolute;
    left: -5px;
    top: 40%;
    z-index: 10;
    border-top-right-radius: 100% !important;
    border-bottom-right-radius: 100% !important;
}

.coupon-img::after {
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0;
    top: 0;
    border-left: dashed 2px #ffffff;
}

.user-coin {
    margin-top: 35px;
    background: #4caf50;
    color: #ffffff;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.user-coin h4 {
    border-bottom: 1px solid #fafafa;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.user-coin p {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 0px;
}

.user-coin img {
    vertical-align: bottom;
}

/*......................................*/
.qa-box {
    margin-bottom: 10px;
}

.qa-title {
    background: #e6e6e6;
    text-decoration: none;
    display: block;
    border-bottom: 0px solid #ffffff;
    padding: 10px 15px;
    text-align: left;
    position: relative;
}

.qa-title {
    color: #333333;
    font-weight: 600;
    font-size: 18px;
}

.qa-title:hover,
.qa-title:focus {
    color: #333333;
}

.box-icon span {
    position: absolute;
    top: 25%;
    right: 22px;
    /*background-color: #ffffff;*/
    transition: all 0.3s;
}

.box-icon span:nth-child(2) {
    transform: rotate(90deg);
}
.opened span {
    transform: rotateX(180deg);
    opacity: 1;
}
.opened span:nth-child(2) {
    transform: rotate(360deg);
    opacity: 1;
}

.qa-content {
    display: none;
    padding: 15px;
    padding-top: 0px;
    color: #444;
    background-color: #e6e6e6;
}

.qa-content .thumbnail {
    padding: 10px 15px;
    background-color: #fff;
    border: 0px solid #fff;
    border-radius: 0px;
    margin-bottom: 0px;
}

.qa-content .thumbnail li {
    margin-top: 5px;
}

.qa-content .thumbnail .btn-coin {
    display: block;
    padding: 10px 0px;
    font-weight: 400;
    color: #000000;
    border-bottom: 1px solid #dedede;
}

.qa-content .thumbnail .btn-coin .text {
    margin-top: 10px;
    color: #000000;
}

.qa-content .thumbnail .btn-coin:last-child {
    border-bottom: 0px solid #dedede;
}

.qa-content .thumbnail .btn-coin:hover {
    background: #eeeeee;
    color: inherit;
}

.qa-content .thumbnail .btn-coin span {
    background: #607d8b;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 3px;
    min-width: 115px;
    display: inline-block;
}

.pay-box {
    border: 1px solid #a3a3a3;
}

.pay-box h5 {
    color: #265aff;
}

.pay-h {
    background: #cccccc;
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    padding: 15px;
}

.pay-h span {
    color: #4b67ca;
}

.pay-body {
    padding: 15px;
}

.pay-body .form-control {
    display: block;
    width: 100%;
    height: 45px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    -webkit-appearance: none;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s,
        box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -webkit-transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
}

.pay-body label span {
    color: #c4c4c4;
}

.advertisement-box {
    border: 1px solid #ad8100;
    padding: 30px;
}

.advertisement-box h2 {
    font-size: 25px !important;
    font-weight: 600 !important;
    color: #ad8100;
    margin-bottom: 15px !important;
}

.advertisement-box h3 {
    font-size: 23px;
    font-weight: 600 !important;
    color: #ff7f00;
    margin-bottom: 40px !important;
}

.advertisement-box h4 {
    font-size: 20px;
    font-weight: 600 !important;
    color: #59b200;
}

.advertisement-box p {
    color: #545454;
    margin-bottom: 10px !important;
}

.advertisement-box h5 {
    color: #858585;
    font-size: 16px;
    font-weight: 600 !important;
    margin-bottom: 0px !important;
}

.advertisement-box u {
    color: #858585;
    font-size: 16px;
    font-weight: 600 !important;
}

.advertisement-h {
    background: #cccccc;
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    padding: 15px;
}

.advertisement-h span {
    color: #4b67ca;
}

.advertisement-body {
    padding: 15px;
}

.advertisement-body .form-control {
    display: block;
    width: 100%;
    height: 45px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    -webkit-appearance: none;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s,
        box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -webkit-transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
}

#box-adver-form .select-option:before {
    background-image: url(../images/icon-arrow-dropdown.svg);
    content: "";
    position: absolute;
    right: 10px;
    top: 0px;
    bottom: 0;
    width: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

.advertisement-body label span {
    color: #c4c4c4;
}

.display-advertising {
    font-family: "Prompt", sans-serif;
    padding: 100px 0px;
}

.display-advertising:nth-child(even) {
    background: #e4e4e4;
}

.display-advertising h2 {
    font-weight: 600;
    margin-bottom: 20px !important;
}
.display-advertising h3 {
    font-weight: 600;
    font-size: 18px;
    padding: 0px 0px 15px 0px !important;
    margin-bottom: 20px !important;
}
.display-advertising p {
    font-weight: 400;
    margin-bottom: 40px !important;
}

ul.li-chevron-right li:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f054";
    color: #c6a455;
    margin-left: 0px;
    font-size: 20px;
    padding-right: 9px;
}

.display-advertising img {
    margin-bottom: 30px;
}

.display-advertising .img-pc {
    max-width: 264px;
    display: inline-block;
}

.select-option:before {
    background-image: url(../images/icon-arrow-dropdown.svg);
    content: "";
    position: absolute;
    right: 10px;
    top: 15px;
    bottom: 0;
    width: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

.cd:before {
    background-image: url(../images/icon-cd.png);
    content: "";
    position: absolute;
    right: 10px;
    top: 20px;
    bottom: 0;
    width: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

.btn-pay {
    font-family: "Prompt", sans-serif;
    font-size: 20px;
    display: block;
    padding: 15px 0px;
    text-align: center;
    margin-bottom: 1px;
    margin-top: 15px;
    line-height: 1.42857143;
    background-color: #ae8200;
    border: 1px solid #ae8200;
    color: #ffffff;
    border-radius: 0px;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.btn-pay:hover {
    background-color: #ffffff;
    border: 1px solid #ae8200;
    color: #ae8200;
}

.btn-back {
    display: block;
    padding: 15px 0px;
    font-weight: 500;
    font-size: 16px;
}

.btn-back:hover {
    color: #ae8200;
}

.text-info {
    color: #006cd8;
}

.item-sme {
    background: #ebebeb;
    display: block;
    padding-top: 15px;
    padding-bottom: 20px;
    font-size: 25px;
    font-weight: 600;
    border-radius: 50px;
    margin-bottom: 50px;
}

.item-sme img {
    position: absolute;
    z-index: 1;
    right: 0px;
    margin-top: -30px;
}

.item-sme .sub-item {
    position: absolute;
    top: 40px;
    left: -80px;
    font-size: 14px;
    min-width: 225px;
    font-weight: 400;
    text-align: right;
    background: #383838;
    color: #ffffff;
    padding: 5px 15px;
    border-radius: 25px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-sme:hover .sub-item {
    min-width: 300px;
    background: #ae8200;
}

.dropdown-menu {
    max-height: 500px;
    overflow-y: auto;
}

.user-img-profile {
    width: 30px;
    border-radius: 50%;
}
/*................................................*/

/* -------------------------------------- */

ol {
    counter-reset: li;
    list-style: none;
    /* list-style: decimal; */
    font: 15px;
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

ol ol {
    margin: 0 0 0 2em;
}

/* -------------------------------------- */

.rectangle-list li {
    position: relative;
    display: block;
    /*padding: 15px;*/
    padding: 0.4em;
    margin: 0.5em 0 0.5em 2.5em;
    background: transparent;
    /*color: #ffffff;*/
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rectangle-list li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2.5em;
    top: 25px;
    margin-top: -1em;
    background: #a0d3f2;
    color: #ffffff;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}

.rectangle-list li:after {
    position: absolute;
    content: "";
    border: 0.5em solid transparent;
    left: -1em;
    top: 25px;
    margin-top: -0.5em;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rectangle-list li:after {
    left: -0.5em;
    border-left-color: #a0d3f2;
}

/* -------------------------------------- */

.item-promotion {
    overflow: hidden;
    position: relative;
    display: block;
}

.item-promotion .img-promotion {
    overflow: hidden;
    border-radius: 15px;
}

.item-promotion .img-promotion img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-promotion:hover .img-promotion img {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-promotion .text-promotion {
    opacity: 0;
    padding: 15px;
    background: rgb(26 178 234 / 90%);
    position: absolute;
    left: 15px;
    top: 15px;
    bottom: 15px;
    right: 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border-radius: 15px;
}

.item-promotion:hover .text-promotion {
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.item-promotion:hover .text-promotion ul {
    color: #fff;
}
.item-promotion .text-promotion h4 {
    color: #ffffff;
}

.item-promotion .text-promotion p {
    color: #ffffff;
}

.match {
    color: white;
    border-radius: 7px;
    padding: 0px 10px;
    background-color: #28a745cf;
}

.no-match {
    color: white;
    border-radius: 7px;
    padding: 0px 10px;
    background-color: rgb(196, 65, 65);
}

.form-contents {
    display: contents;
}

.container-600 {
    max-width: 600px;
    margin: 0 auto;
}

.point-warpper {
    max-width: 600px;
    margin: 0 auto !important;
    background-color: #ffe6af75;
    padding: 55px;
    margin-bottom: 40px !important;
    box-shadow: 10px 9px 105px -20px rgb(255 202 78);
    border: 1px solid black;

    .point {
        font-size: 50px;
        margin-top: 16px;
        font-weight: 800;
    }

    .my-point {
        font-size: 18px;
    }

    .expired-point {
        text-align: right;
    }

    .point-image {
    }
}

.btn-points {
    text-align: center;
    font-size: 22px;
    line-height: 24px;
    display: block;
    padding: 15px 15px;
    color: #ffffff !important;
    background-color: #000000;
    border-color: #4db848;
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#user-points-btn .active {
    background-color: #4db848;
}

.btn-points:hover {
    text-align: center;
    line-height: 24px;
    display: block;
    padding: 15px 15px;
    color: #ffffff !important;
    background-color: #4db848;
    border-color: #4db848;
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.button-exchange-point {
    background-color: #000000;
    padding: 10px 15px;
    border-radius: 15px;
    color: white;
}

.hover-data:hover {
    background-color: #cfe7ce !important;
    font-weight: 500;
}

@media (max-width: 576px) {
    .btn-points {
        font-size: 15px;
        img {
            width: 20px;
            height: 20px;
        }
    }
    .point-warpper {
        padding: 45px 25px;

        .point {
            font-size: 30px;
            margin-top: 10px;
        }

        .my-point {
            font-size: 16px;
        }

        .expired-point {
            font-size: 16px;
        }

        .point-image {
            width: 35px;
            height: 35px;
        }
    }
}

.pe-none {
    pointer-events: none;
    background-color: #9f9f9f !important;
}

.user-active {
    text-align: center;
    font-size: 22px;
    line-height: 24px;
    display: block;
    padding: 15px 15px;
    color: #ffffff;
    background-color: #4db848;
    border-color: #4db848;
    -webkit-transition: all 0.5s ease-in-out;
    -khtml-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.ul-points ul li:before {
    font: normal normal normal 14px/1 IcoFont;
    content: "\ea6d";
    color: #ef721f;
    margin-left: -27px;
    font-size: 20px;
    padding-right: 9px;
}

.ul-points ul {
    padding-inline-start: 25px;
    list-style: none;
}

.qa-content .thumbnail {
    padding: 10px 15px;
    background-color: #fff;
    border: 0px solid #fff;
    border-radius: 0px;
    margin-bottom: 0px;
}

.thumbnail li {
    margin-top: 5px;
}

.thumbnail .btn-coin {
    display: block;
    padding: 10px 0px;
    font-weight: 400;
    color: #000000;
    border-bottom: 1px solid #dedede;
}

.thumbnail .btn-coin .text {
    margin-top: 10px;
    color: #000000;
}

.btn-primary {
    background-color: #007bff !important;
}

/*.thumbnail .btn-coin:last-child{
 border-bottom: 0px solid #dedede;

}
*/

/*.thumbnail .btn-coin:hover {
 background: #eeeeee;
 color: inherit;
}
*/
.progress-small-text {
    align-items: center;
    height: inherit;
    color: white;
    font-size: 12px;
    font-weight: 400;
}
.progress {
    background-color: #dc354570 !important;
    border-radius: 20px;
}

.fire-icon {
    width: 25px !important;
    position: absolute;
    z-index: 1;
    top: -12px;
    left: 0;
}

.fire-icon-text {
    position: absolute;
    z-index: 1;
    top: -23px;
    color: #dc3545;
    right: 6px;
    margin-top: 6px;
    font-size: 11px;
}

.progress-bar {
    background-color: #dc3545;
}

.thumbnail .btn-coin span {
    background: #607d8b;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 3px;
    min-width: 115px;
    display: inline-block;
}

.dropdown-body-menu {
    position: absolute;
    box-shadow: 4px 4px 9px 0px #0000005c;
    border-radius: 9px;
    margin-top: -11px;
}

@media (max-width: 992px) {
    #section-promotion,
    #section-product,
    #section-flashsale,
    #section-flashsale-best-price,
    #section-page {
        padding: 30px 0px;
    }

    #section-login {
        background-position: top center;
        padding: 24px 0px;
    }
    .slick-next {
        right: 5px;
    }
    .slick-prev {
        left: 5px;
    }

    .dropdown-body-menu {
        position: relative;
        display: flex !important;
        box-shadow: none;
        border-radius: 0;
        margin-top: 0;
    }
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.flash-sale-product {
    display: flex;
    flex-direction: column;
    height: 205px;
    justify-content: space-between;
    padding: 0 10px;
    justify-content: space-between;
}

.modal.fade.show {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.main-search {
    border-radius: 30px;
    /* box-shadow: 4px 6px 17px #3030302b; */
    border: 1px solid #00000024;
    background-color: white;
    border-radius: 15px;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 44px;
    margin-top: 28px;
}

#live-search-home {
    top: 45px;
    left: 0;
    width: 100%;
    display: none;
    border-radius: 15px 15px 20px 20px;
    z-index: 99999;
    box-shadow: 1px 6px 14px #000000a3;
}

#live-search-input-home {
    font-size: 25px;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
    background-color: white;
    width: auto;
    color: black;
    border: none;
}

#optionhome {
    font-size: 25px;
    -webkit-appearance: none;
    text-align: center;
    background-color: white;
    color: black;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    border: none;
    border-left: 4px solid #29a745 !important;

    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" version="1.1" fill="black" height="1em" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
    background-position: right 22px center;
    background-repeat: no-repeat;
    background-size: auto 30%;
    outline: none;
    -moz-appearance: none;
    appearance: none;
}

.main-search button {
    background-color: #29a745;
    font-size: 24px;
    border-radius: 15px !important;
    color: white;
    padding: 0 40px;
}

.main-search button:hover {
    background-color: #29a745cc;
    color: white;
}

.main-search .icofont-search {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    font-weight: 600;
}

#live-search-data-home a:hover {
    background-color: #eee9e94d;
    color: #29a745 !important;
    border-radius: 15px;
}

#live-search-input-home:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#optionhome:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}

@media (max-width: 992px) {
    .main-search {
        margin-bottom: 30px;
    }

    #live-search-input-home {
        font-size: 16px;
    }

    #optionhome {
        font-size: 14px;
    }

    #live-search-input-home {
        width: 100px;
    }

    .main-search button {
        font-size: 16px;
        margin-left: 0 !important;
        padding: 0 20px;
    }

    #live-search-data-home a div {
        font-size: 16px;
    }

    #live-search-data-home a small {
        font-weight: 500;
    }
}

@media (max-width: 576px) {
    .item-product .text-product h4 {
        font-size: 14px;
    }

    .item-product .text-product p span {
        font-size: 14px;
    }
}

@media (max-width: 550px) {
    #live-search-input-home {
        font-size: 16px;
    }

    #live-search-data-mobile {
        font-size: 14px !important;
    }

    #optionhome {
        font-size: 13px;
        width: 35%;
        text-align: left;
    }

    #live-search-input-home {
        width: 100px;
    }

    .main-search button {
        font-size: 16px;
        margin-left: 0 !important;
        padding: 0 10px;
        border-radius: 10px !important;
    }

    #live-search-data-home a div {
        font-size: 16px;
    }

    #live-search-data-home a small {
        font-weight: 500;
    }
}

.add-to-cart {
    margin: auto 0;
}

#section-mobile-app-bar {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    background-color: #29a745;
    padding: 10px 0px;
    font-size: 20px;
}

#section-mobile-app-bar i {
    position: relative;
}

#section-mobile-app-bar a {
    text-align: center;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

#section-mobile-app-bar p {
    font-size: 13px;
    margin: 0;
    color: white;
}

#section-mobile-app-bar .cartbug {
    position: absolute;
    top: 0px;
    left: 18px;
    /* right: 5px; */
    font-size: 10px;
    line-height: 14px;
    color: #ffffff;
    background: #ef1919;
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    font-style: initial;
}

#section-mobile-app-bar .fabbug {
    position: absolute;
    top: 0px;
    left: 18px;
    /* right: 5px; */
    font-size: 10px;
    line-height: 14px;
    color: #ffffff;
    background: #ef1919;
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    font-style: initial;
}

#live-search-data-mobile {
    font-size: 16px;
}

.menu-tag-new {
    position: absolute;
    top: -4px;
    right: 0px;
    font-size: 10px;
    background: #28a745;
    height: 13px;
    padding: 0px 6px;
    border-radius: 25px;
    color: white;
    line-height: 15px;
}

.special-deal-card {
    border: 2px solid #89639a;
    background-color: #f9f2fe;
    padding: 10px 5px;
    font-size: 16px;
    font-weight: 600;
    color: black;
}

.special-deal-card .special-deal-amount {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.special-deal-card .special-deal-amount div {
    background-color: #efddfa;
    padding: 8px 15px;
    border-radius: 15px;
    margin: 0 5px;
    font-size: 18px;
}

.special-deal-card .special-deal-price {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.special-deal-card .special-deal-price span:nth-child(2) {
    font-size: 14px;
}

.special-deal-card .special-deal-action {
    display: flex;
    justify-content: center;
}

.special-deal-card .special-deal-action button {
    border-radius: 15px;
    padding: 5px 15px;
    background-color: #700eba;
    border: none;
    color: antiquewhite;
}

.special-deal-card .special-deal-action button:disabled {
    background-color: #b161ed;
}

.tag-product-point {
    position: absolute;
    top: 0;
    left: 60px;
    z-index: 3;

    img {
        width: 30px;
    }
}

.tag-item-carts-count {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
    height: 30px;
    width: 60px;
    font-size: 16px;
    border-radius: 9px;
    padding: 0 0;
    text-align: center;
    align-items: center;
    align-content: center;
    background-color: #28a745;
    color: white;
}

.point-product-detail {
    font-weight: 600;
    color: black;

    img {
        width: 25px;
        margin-bottom: 12px;
        color: #000000;
    }
}

.point-product-cart {
    font-weight: 400;
    font-size: 14px;
    color: black;

    img {
        width: 25px;
        margin-bottom: 12px;
        color: #000000;
    }
}

.add-to-cart small {
    float: right;
    width: max-content;
}

.dropdown-body-menu-top {
    display: none;
    overflow: hidden;
    position: absolute;
    z-index: 99;
    top: 25px;
    left: -15px;
    width: 125px;
    background-color: #ffffff;
    box-shadow: 4px 4px 9px 0px #0000005c;
    border-radius: 9px;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.dropdown-body-menu-top div {
    padding: 10px 0;
    position: relative;
}

.dropdown-header-menu-top {
    display: inline;
    position: relative;
}

.dropdown-header-menu-top::before {
    content: "";
    background: #dddddd;
    position: absolute;
    top: 5px;
    left: -3px;
    width: 1px;
    height: 20px;
}

.dropdown-header-menu-top:hover .dropdown-body-menu-top {
    display: block;
}

.dropdown-body-menu-top div::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0px;
    right: 0px;
    height: 5px;
    background: transparent;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.dropdown-body-menu-top div:hover::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 5px;
    background: #4db848;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.button-contact {
    background-color: #8aec9c;
    color: black;
    border-color: black;
    border-radius: 10px;
}

.form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #c3c3c3;
    opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #c3c3c3;
}

.form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #c3c3c3;
}

#remember {
    accent-color: #d3d3d3;
}

.video-responsive {
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.video-responsive iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 15px;
}

.admin-contact-wrapper {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 1;
    color: white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
}

.admin-contact-badge {
    background-color: #dc3545;
    padding: 3px 8px;
    border-radius: 0 25px 25px 0;
}

.best-price-badge {
    background-color: #57ab39;
    padding: 3px 8px;
    border-radius: 0 25px 25px 0;
}

.admin-contact-button {
    min-width: 100px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    height: 31px;
    padding: 3px 0 !important;
    a {
        color: #dc3545;
    }
}
.admin-contact-button:hover {
    background-color: #dc3545;
    a {
        color: white;
    }
}

/* ===== Product Exp Badge (mini) ===== */
.product-exp-mini {
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1;
    text-align: center;
}

.product-exp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.product-exp-badge svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.product-exp-normal {
    background: #f5f5f5;
    color: #666;
    border-color: #e0e0e0;
}

.product-exp-warning {
    background: #fff3e0;
    color: #e65100;
    border-color: #ffcc80;
}

.product-exp-expired {
    background: #ffebee;
    color: #c62828;
    border-color: #ef9a9a;
}

@media (max-width: 576px) {
    .product-exp-badge {
        font-size: 10px;
        padding: 2px 6px;
    }
}