/* Basic CSS */
:root {
    --swiper-navigation-size-mobile: 32px;
    --circle-button-margin-top: 120px;
    --swiper-container-sub-product-height-mobile: 35vw;
    --swiper-container-sub-product-height-sm: 11.5vw;
    --swiper-container-sub-product-height-lg: 9vw;
    --musta-background: #6b0000;
    --musta-background-bold: #400000;
    --musta-color-0: #000000;
    --musta-color: #fff0e6;
    --musta-color-hover: #fff0b3;
    --musta-color-2: #1a1a1a;
    --musta-color-3: #ffd700;
    --musta-color-3-hover: #ffeb8d;
    --musta-color-button: #aaff00;
    --musta-color-button-hover: #ccff33;
    --musta-color-4: #ff7f50;
    --musta-color-4-hover: #ffa57a;
    --blue-color-hover: #008cff;
}
@keyframes colorChange {
    0% {
        background-color: red;
        color: #ffffff;
    }
    25% {
        background-color: orange;
        color: #000000;
    }
    50% {
        background-color: yellow;
        color: #000000;
    }
    75% {
        background-color: lime;
        color: #000000;
    }
    100% {
        background-color: red;
        color: #ffffff;
    }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
      30% { transform: translateY(-10px); }
      50% { transform: translateY(0); }
      70% { transform: translateY(-5px); }
}
.musta-color {
    color: var(--musta-color) !important;
}
a.musta-color:hover {
    color: var(--musta-color-hover);
}
.musta-color-hover:hover {
    color: var(--musta-color-hover);
}
.musta-text-color-3 {
    color: var(--musta-color-3) !important;
}
a.musta-text-color-3:hover {
    color: var(--musta-color-3-hover) !important;
}
body {
    background-color: var(--musta-background) !important;
    color: var(--musta-color);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--musta-color);
}
.h1-breadcrumb {
    display: inline;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}
.card {
    background-color: #400000;
}
.breadcrumb-item.active {
    color: var(--musta-color-2);
}
.attr-nav>ul>li>a {
    color: var(--musta-color);
}
.attr-nav>ul>li>a:hover {
    color: var(--musta-color-hover);
}
.cart-box span {
    color: var(--musta-color-0);
}
.main-container {
    margin: 0 100px;
}
.type-lb .sale {
    animation: colorChange 2s infinite;
}
.center-x {
    justify-content: center;
    display: flex;
}
.center-y {
    align-items: center;
    display: flex;
}
.right-x {
    justify-content: flex-end;
    display: flex;
}
.border-radius-5 {
    border-radius: 5px;
}
a.blue-color-hover {
    color: blue !important;
}
a.blue-color-hover:hover {
    color: var(--blue-color-hover) !important;
}
.a-style,
.breadcrumb-link {
    cursor: pointer;
    color: var(--musta-background) !important;
}
.a-style:hover,
.breadcrumb-link:hover {
    color: var(--musta-background) !important;
}
.a-style-orange {
    cursor: pointer;
    color: var(--musta-color-4) !important;
}
.a-style-orange:hover {
    cursor: pointer;
    color: var(--musta-color-4-hover) !important;
}
.a-style-black {
    cursor: pointer;
    color: black !important;
}
.a-style-dark {
    cursor: pointer;
    color: var(--musta-color-2) !important;
}
.a-style-dark-gray {
    cursor: pointer;
    color: #333333 !important;
}
.text-note {
    font-size: 14px !important;
    color: blue;
}
.text-blue-bold {
    color: blue !important;
    font-weight: bold !important;
}
.text-black-bold {
    color: black !important;
    font-weight: bold !important;
}
.standard-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
}
.color-musta-bg1 {
    color: var(--musta-background) !important;
}
.color-musta-bg2 {
    color: var(--musta-background-bold) !important;
}
.background-musta-bg1 {
    background-color: var(--musta-background) !important;
}
.background-musta-bg2 {
    background-color: var(--musta-background-bold) !important;
}
.color-blue {
    color: blue !important;
}
a.color-blue:hover {
    color: #0388cc !important;
}
.color-sky {
    color: #0388cc;
}
.color-orange {
    color: orange;
}
.color-gray {
    /* color: #8a8a8f; */
    color: #565659;
}
.color-dark {
    color: var(--musta-color-2) !important;
}
.color-black {
    color: black;
}
.color-red {
    color: red !important;
}
.fs12 {
    font-size: 12px !important;
}
.fs14 {
    font-size: 14px !important;
}
.fs16 {
    font-size: 16px !important;
}
.fs18 {
    font-size: 18px !important;
}
.fs20 {
    font-size: 20px !important;
}
.fs22 {
    font-size: 22px !important;
}
.fw400 {
    font-weight: 400 !important;
}
.fw-bold {
    font-weight: 700 !important;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-none {
    cursor: none;
}
/* End Basic CSS */
/* Quill Blot CSS */
.blog-container img {
    max-width: 100%;
    height: auto;
}
.blog-container {
    margin: 1rem 3rem;
}
.blog-container,
#quill-output,
#quill-editor {
    overflow-wrap: break-word;
    overflow: visible;
    white-space: normal;
}
/* End Quill Blot CSS */
.swiper-container {
    width: 100%;
    overflow: hidden;
}
.swiper-container-sub-product {
    height: var(--swiper-container-sub-product-height-mobile);
    padding-top: 10px;
    background-color: var(--musta-background);
}
.swiper-container.swiper-container-blog {
    aspect-ratio: 3 / 1;
    border-radius: 10px;
}
.swiper-container-product-module,
.swiper-container-sub-product {
    visibility: hidden; /* Ẩn ban đầu */
}
.module-max-height {
    max-height: calc(24vw + 68px); /* 992 - 1199px */
}
.swiper-slide {
    margin-right: 10px;
}
.swiper-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
}
.swiper-container.circle-button {
    margin-top: var(--circle-button-margin-top) !important; /* 768 - 991px */
}
.circle-button:hover {
    background-color: var(--musta-color);
}
.circle-button.swiper-button-prev {
    left: 16px;
}
.circle-button.swiper-button-next {
    right: 16px;
}
.circle-button.swiper-button-next,
.circle-button.swiper-button-prev {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-top: 120px;
}
.circle-button.swiper-button-next:after,
.circle-button.swiper-button-prev:after {
    font-size: 15px;
    font-weight: 700;
}
.module-title {
    text-transform: capitalize;
    color: var(--musta-color);
    font-size: 26px;
}
.profile-left-menu {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid darkgrey;
    border-radius: 2px;
    padding: 20px 10px;
}
.profile-left-menu.active {
    background-color: darkgrey;
}
input[type="radio"] {
    border: 2px solid white;
    appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
input[type="radio"]:checked {
    background-color: #435dd8;
    border: 2px solid #435dd8;
    -webkit-animation: puls 0.7s forwards;
    animation: pulse 0.7s forwards;
}
input[type="radio"]:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: var(--musta-color);
    transform: scale(0);
}
input[type="radio"]:checked::before {
    transform: scale(1);
}
.btn-block-2 {
    display: block;
    width: 90%;
    margin: auto;
}
.checkout-address-div {
    padding-top: 8px !important;
    background-color: #f3f3f3;
    border: 1px solid;
    border-radius: 2px;
}
.dropdown-short {
    min-width: 6rem !important;
}
.quantity-btn {
    align-items: center;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    color: var(--musta-color);
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    font-weight: 500;
    height: 36px;
    justify-content: center;
    width: 36px;
}
.quantity-control .quantity-btn {
    border: none;
}
.quantity-group {
    border: 1px solid #b6b6b6;
    border-radius: 999px;
}
.quantity-group .quantity-box {
    height: 32px;
    width: 48px !important;
    cursor: auto;
}
.quantity-group .quantity-btn {
    height: 32px;
    width: 32px;
}
button.quantity-btn:hover {
    color: var(--musta-color-button) !important;
}
.cart-btn {
    background: var(--musta-color-button) !important;
    border: 1px solid #ee4d2d;
    color: black;
    overflow: visible;
    position: relative;
    width: 180px;
}
.cart-btn:hover {
    background: var(--musta-color-button-hover) !important;
}
.btn-musta {
    background: var(--musta-color-button);
    color: black;
}
.btn-musta:hover {
    background-color: var(--musta-color-button-hover);
}
.btn-musta-3 {
    background: var(--musta-color-3);
    color: black;
}
.btn-musta-3:hover {
    background: var(--musta-color-3-hover);
}
.btn-musta-4 {
    background: var(--musta-color-4);
    color: black;
}
.btn-musta-4:hover {
    background: var(--musta-color-4-hover);
}
.btn-musta-bg1 {
    background: var(--musta-background);
    color: white;
}
.btn-musta-bg1:hover {
    background: var(--musta-background-bold);
    color: white;
}
.btn-buy {
    background: var(--musta-color-3);
    color: black;
    overflow: visible;
    position: relative;
    width: 180px;
}
.btn-buy:hover {
    background-color: var(--musta-color-3-hover);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: black;
}
.btn-review {
    background: var(--musta-color-4);
    width: 125px;
}
.btn-review:hover {
    background: var(--musta-color-4-hover);
}
.btn-outline-secondary-musta {
  color: var(--musta-color-0);
  border-color: var(--musta-color);
  background-color: var(--musta-color);
}

.btn-outline-secondary-musta:hover {
  color: var(--musta-color-0);
  background-color: var(--musta-color-button-hover);
  border-color: var(--musta-color-button-hover);
}
.product-attribute {
    color: var(--musta-color);
}
input[type="radio"]:checked + label {
    border-color: var(--musta-color);
    color: #6b0000;
    background-color: var(--musta-color);
}
.prevent-default {
    cursor: auto;
}
.variant-label:hover {
    background-color: #ffcf20 !important;
    color: black !important;
    border: 1px solid black !important;
}
.page-item .page-link {
    font-size: 13px;
}
.no-margin p,
.no-margin form {
    margin: 0 !important;
}
.btn-paginate {
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-card-content-container {
    padding: 15px 16px 4px 16px;
}
.product-card-content-container .product-name {
    color: var(--musta-color-2);
}
.product-icon-container img {
    border-radius: 5px;
    width: 64px;
    height: 64px;
    object-fit: cover;
    position: absolute;
}
.product-icon-container {
    border-radius: 5px;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.edit-blog-img-container {
    width: 100%;
    max-height: 150px;
}
.edit-blog-img-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.blog-img-container {
    width: 100%;
    height: calc(100vw / 3) !important;
    display: flex !important;
}
.blog-img-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.login-img-container {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.login-img-container img {
    height: 100%;
    width: auto;
    object-fit: cover;
}
.width84 {
    width: 84px;
}
.width95 {
    width: 95px;
}
.btn-small {
    width: 68px;
    font-size: 14px;
    margin: 0 6px 0 0;
}
.btn-large {
    padding: 10px 15px;
    border-radius: 3px;
}
.btn-tab {
    width: 100%;
}
.btn-pink {
    color: var(--musta-color);
    background-color: #f52ef5;
    border-color: #f52ef5;
}
.btn-cyan {
    color: var(--musta-color);
    background-color: #2ef5f5;
    border-color: #2ef5f5;
}
.red-tick {
    color: red;
    font-size: 20px;
}
.strikethrough {
    text-decoration: line-through;
    color: gray;
}
.status-label {
    display: inline-block;
    width: 7.5rem;
    padding: 4px 0px;
    color: var(--musta-color);
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
}
.form-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8); /* Màu nền mờ */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
.row .vertical-line {
    width: 1px;
    --bs-gutter-x: 0;
    height: 360px;
    background: #e7e7e7;
    margin-left: 16px;
    margin-right: 16px;
}
.small-price {
    font-weight: 700;
    color: black;
}
.small-price-order {
    font-weight: 700;
    color: var(--musta-color);
}
.height-responsive {
    height: 100%;
}
.card-registration .select-input.form-control[readonly]:not([disabled]) {
    font-size: 1rem;
    line-height: 2.15;
    padding-left: 0.75em;
    padding-right: 0.75em;
}
.card-registration .select-arrow {
    top: 13px;
}
.form-header {
    font-weight: 500;
    font-size: 1.5rem;
}
.form-title {
    font-size: 18px;
    font-weight: 700;
}
.sign-form-close {
    position: absolute;
    right: 8px;
    top: 3px;
}
#loginPopup,
#registerPopup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30;
}
.link-info {
    color: #0dcaf0 !important;
}
.link-info:focus,
.link-info:hover {
    color: #3dd5f3 !important;
}
.brand-name {
    color: orange;
}
.flex-space-between {
    display: flex;
    justify-content: space-between; /* Đẩy các phần tử ra hai bên */
    align-items: center; /* Căn giữa theo chiều dọc */
}
.navbar-cart-height {
    height: 56.6px;
}
.cart-e2-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    padding: 0;
}
.sf-navbar {
    background-color: var(--musta-background) !important;
    padding-top: 0;
    padding-bottom: 0;
}
.sf-banner {
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}
.sf-banner-view {
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}
.sf-mb-banner-view {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
.signup-form {
    background-color: var(--musta-background);
    max-width: unset;
}
.login-card {
    background-color: var(--musta-color-button-hover);
    border-radius: 12px;
    margin-top: 20px;
}
.login-card-mobile {
    background-color: var(--musta-color-button-hover);
    border-radius: 12px;
    margin-top: 40px;
}
.login-mh-mobile {
    min-height: 60px;
}
.login-fs-mobile {
    font-size: 1.5rem;
}
.default-logo {
    height: 160px;
    width: 160px;
    object-fit: cover;
}
.main-logo {
    width: 160px;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 10px;
}
.main-logo.logo-width {
    width: 140px;
}
.custom-checkbox {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    background: #0388cc;
    outline-color: #0388cc;
}
.popup-content {
    background-color: var(--musta-color);
    padding: 20px;
    border-radius: 10px;
    position: relative;
    width: 300px;
}
.process-container {
    background: var(--musta-background);
}
.navbar-container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--musta-background);
    -webkit-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.15);
}
.breadcrumb-container {
    background: #e9ecef;
}
.process-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 24px 0px;
}
.process-box li {
    font-size: 24px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.008em;
    color: var(--musta-color);
    padding: unset;
}
.process-box li.active {
    color: var(--musta-color-2);
}
.content-container {
    background-color: var(--musta-background);
}
.banner-container {
    /* margin: 0 2rem;
    padding-top: 1.5rem; */
}
.navbar-logo {
    margin-left: 2rem;
}
.note-textarea-container {
    height: 90px;
    display: flex;
    margin-bottom: 30px;
    margin: 20px 0 !important;
}
.note-textarea-container .note-textarea {
    border: 1px solid #e8e8e8;
    flex: 1;
    padding-left: 6px;
    border-radius: 6px;
}
.language-box {
    padding: 0px 4px;
    font-size: 14px;
    width: 90px;
}
.text-description {
    text-indent: 30px;
    text-align: justify;
    font-size: 16px;
}
.simple-table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: separate;
    border-spacing: 0;
}
.simple-table thead th {
    vertical-align: bottom;
    border-bottom: 1px solid #ccc;
}
.simple-table th,
.simple-table td {
    background-color: var(--musta-background-bold);
    border: none;
    padding: 12px 8px;
    text-align: left;
    vertical-align: center;
}
.icon-box-in-cart {
    margin-top: 16px;
    padding: 16px;
    background: white;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
}
.icon-box-in-cart img {
    display: flex;
    margin: auto;
    width: 120px;
}
.icon-box-in-cart .note-txt {
    padding-top: 16px;
    font-style: italic;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: var(--musta-color-2);
}
.order-box {
    padding: 16px;
    background: var(--musta-background-bold);
    border: 1px solid #e7e7e7;
    border-radius: 4px;
}
.capitalize {
    text-transform: capitalize;
}
/* Storefront CSS*/
.empty-product-block {
    background: #f7f8f9;
}
.homepage-block-title {
    text-align: center;
    color: var(--musta-color);
    font-size: 26px;
}
.homepage-block-title:before {
    content: "";
    background: #040303;
    width: 50px;
    height: 5px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 1;
    border-radius: 3px;
}
.homepage-block-title:after {
    content: "";
    width: 280px;
    height: 5px;
    background: #e5e9ed;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    border-radius: 3px;
}
.category-dropdown-menu {
    min-width: 260px !important;
    border-radius: 0 !important;
}
.hover-border-left {
    border-left: 3px solid transparent;
    transition: border-color 0.3s;
}
#dropdownMenu_login a {
    min-width: 12rem;
    border-left: 3px solid transparent;
    transition: border-color 0.3s;
}
.hover-border-left:hover,
#dropdownMenu_login a:hover {
    background-color: #920000;
    border-left: 3px solid;
}
.border-left-3 {
    border-left: 3px solid;
}
.menu-category-part-main {
    border-bottom: 3px solid transparent;
    transition: border-color 0.3s;
}
.menu-category-part-main:hover {
    border-bottom: 3px solid;
}
.blog-title {
    color: var(--musta-color-3);
    font-size: 3rem;
}
/* End Storefront CSS */
/* Storefront product CSS */
.product-container {
    padding: 16px 16px 40px 16px;
}
.simple-table .price-col {
    width: 16%;
}
.product-name {
    text-transform: capitalize;
    color: var(--musta-color);
    font-weight: 500 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    height: 2.8em;
    line-height: 1.4em !important;
    padding-bottom: 0 !important;
    margin-bottom: 6px;
}
.product-name-in-cart {
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}
.product-name-in-cart-box {
    flex-grow: 1; /* phần tử này chiếm không gian còn lại */
    min-width: 0; /* phần tử không vượt ra ngoài */
}
.in-cart-remove-btn {
    width: 80px;
    line-height: 1.4;
    font-size: 14px;
}
.part-cart-container {
    display: flex;
    align-items: flex-end;
    margin: unset;
    padding: 12px 0;
}
.sale-price-num {
    font-size: 32px;
    font-weight: 700;
    line-height: 130%;
    color: var(--musta-color-3) !important;
}
.price-num {
    font-size: 16px;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
    color: #868686;
    text-decoration: line-through;
}
.price-discount {
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: #d04124;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    background-color: var(--musta-color);
    border-radius: 4px;
}
.price-discount-block {
    display: block;
    background-color: var(--musta-color);
    overflow: hidden;
    padding: 0px 2px;
    width: 45px;
    border: 1px solid #d04124;
    border-radius: 4px;
    margin-bottom: 8px;
}
.note-from-brand-box {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis; /* Thêm dấu "..." */
    transition: max-height 0.3s ease; /* Hiệu ứng chuyển động */
    padding-bottom: 0px !important;
    margin-bottom: 6px;
}
.expanded {
    -webkit-line-clamp: unset; /* Hiển thị toàn bộ nội dung */
}
.note-from-brand-box p {
    margin: 0;
    color: var(--musta-color-2);
    font-family: none;
    letter-spacing: 0.02rem;
}
.product-detail img {
    height: auto;
    width: 100%;
    object-fit: cover;
}
.navbar-collapse {
    margin-top: 50px;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent !important;
    box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.33);
    position: absolute;
    z-index: 20;
    background: var(--musta-color);
    min-height: 300px;
    max-height: calc(100vh - 60px) !important;
    height: calc(100vh - 60px);
    width: 300px;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}
.navbar-collapse.show {
    transform: translateX(0);
}
.navbar-expand-lg .navbar-toggler.category-toggler {
    display: block !important;
}
.navbar-expand-lg .navbar-collapse.collapse:not(.show) {
    display: none !important;
}
/* End Storefront product CSS */
/* Storefront filter-sort */
.filter-sort {
    background: #f7f8f9;
    border-left: 1px solid #eee;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    padding: 8px 0;
    display: inline-block;
    width: 100%;
    color: #1a1a1a !important;
}
.filter-sort ul li {
    text-align: left;
    padding: 4px 15px;
    border-bottom: 1px solid #eee;
}
.filter-sort ul li:hover {
    background-color: #f5f5f5;
    border-left: 3px solid;
}
.filter-sort ul {
    display: none;
    width: 240px;
    position: absolute;
    right: 15px;
    background: #f7f8f9;
    border: 1px solid #eee;
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    z-index: 100;
}
.filter-sort-mobile {
    margin-bottom: 20px;
    width: 240px !important;
}
.filter-sort-mobile ul {
    left: auto !important;
    right: 16px !important;
    transform: none !important;
    width: 220px;
}
/* End Storefront filter-sort */
.category-toggler {
    background-color: #fafafa;
    border: 2px solid black !important;
    border-radius: 3px !important;
    margin-left: 15px;
    margin-right: 0 !important;
    padding: 5px 10px !important;
    position: relative;
    z-index: 20;
}
.menu-category-part {
    padding: 3px 0;
}
.hidden {
    visibility: hidden;
}
.btn-black {
    color: var(--musta-color);
    background-color: black;
}
.review-star {
    color: var(--musta-color-3);
    font-size: 18px;
    line-height: 1.2;
}

.review-img {
    border-radius: 5px;
    margin: 0 2px 5px 0;
    max-width: 170px;
}

.review-img-admin {
    max-width: 45px !important;
}
.seo-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.group-tab {
    border-bottom: 1px solid var(--musta-background-bold);
    border-top: 1px solid var(--musta-background-bold);
    background-color: var(--musta-background-bold);
}
.btn-tab-center {
    border-left: 1px solid var(--musta-background) !important;
    border-right: 1px solid var(--musta-background) !important;
}
.text-active {
    color: var(--musta-color-3);
}
.text-unactive {
    color: var(--musta-color);
}
@media (max-width: 399px) {
    .review-img {
        max-width: 140px;
    }
}

@media (max-width: 599px) {
    .navbar-cart-height {
        height: 47px;
    }
    .note-textarea-container {
        margin: 12px 0 !important;
    }
}
@media (max-width: 767px) {
    .main-logo {
        width: 100px;
    }
    .process-box {
        gap: 12px;
        padding: 16px 0px;
    }
    .process-box li {
        font-size: 16px;
    }
    .pt-mobile-3 {
        padding-top: 1rem;
    }
    .language-box {
        width: 80px;
    }
    .product-container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    .product-card-content-container {
        padding-top: 12px;
    }
    .product-mobile-padding {
        padding: 0 5px;
    }
    .icon-box-in-cart {
        left: 0;
        right: 0;
        display: flex;
    }
    .icon-box-in-cart img {
        max-width: 50px;
        padding-right: 8px;
    }
    .icon-box-in-cart .note-txt {
        padding-top: 0;
    }
    .navbar-collapse {
        margin-top: 40px;
        left: 0;
        width: 100vw;
    }
    .category-toggler {
        margin-left: 10px;
        margin-right: 15px !important;
    }
    .dropdown-menu.sf-navbar-dropdown.mobile {
        left: -35px;
    }
    .swiper-container.circle-button {
        display: none !important;
    }
    .product-module-body {
        padding: 0;
    }
    .swiper-container.swiper-container-blog {
        aspect-ratio: 2 / 1;
        border-radius: 5px;
    }
    .swiper-button-next,
    .swiper-button-prev {
        width: calc(var(--swiper-navigation-size-mobile) / 1.6) !important;
        height: var(--swiper-navigation-size-mobile) !important;
        margin-top: calc(
            100vw / 4 - (var(--swiper-navigation-size-mobile) / 2)
        ) !important;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 20 !important;
    }
    .module-max-height {
        max-height: calc(54vw + 114px) !important;
    }
    .blog-img-container {
        width: 100%;
        height: calc(100vw / 2) !important;
    }
    .blog-container {
        margin: 0 10px 10px 10px;
    }
    .blog-title {
        font-size: 2rem;
    }
    .text-description {
        font-size: 15px;
    }
}
@media (max-width: 991px) {
    .login-img-container {
        padding-top: 90%;
    }
    .login-img-container img {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .row .vertical-line {
        display: none;
    }
    .mobile-font {
        font-size: 0.75rem;
    }
    .mobile-hidden {
        display: none;
    }
    .height-responsive {
        height: 100vh !important;
    }
    .sf-banner {
        aspect-ratio: 2 / 1;
    }
    .banner-container {
        /* margin: 0 15px;
        padding-top: 15px; */
    }
    .navbar-logo {
        margin-left: 1rem;
    }
    .module-max-height {
        max-height: calc(32vw + 90px); /* 768 - 991px */
    }
}
@media (max-width: 1199px) {
    .main-container {
        margin: 0;
    }
}
@media (min-width: 576px) {
    .swiper-container-sub-product {
        height: var(--swiper-container-sub-product-height-sm); /* 576 - 991px */
    }
}
@media (min-width: 768px) {
    .sf-search-form {
        width: 240px;
    }
    .review-img {
        max-width: 220px;
    }
    .review-img-admin {
        max-width: 70px !important;
    }
}
@media (min-width: 992px) {
    .sf-search-form {
        min-width: 400px;
    }
    .navbar-cart-height {
        height: 81.6px;
    }
    .popup-content {
        width: 360px;
    }
    .main-logo.logo-width {
        width: 300px;
    }
    .edit-blog-img-container {
        max-height: 300px;
    }
    .swiper-container.circle-button {
        margin-top: calc(
            var(--circle-button-margin-top) - 30px
        ) !important; /* 992 - 1199px */
    }
    .swiper-container-sub-product {
        height: var(--swiper-container-sub-product-height-lg);
    }
}
@media (min-width: 1200px) {
    .content-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .sf-search-form-container {
        margin-right: 80px;
    }
    .sf-search-form {
        min-width: 500px;
    }
    .module-max-height {
        max-height: calc(24vw + 52px);
    }
    .swiper-container.circle-button {
        margin-top: calc(
            var(--circle-button-margin-top) - 10px
        ) !important; /* 1200 - 1439px */
    }
    .swiper-button-next,
    .swiper-button-prev {
        margin-top: calc(
            (100vw - 200px) / 6 - (var(--swiper-navigation-size) / 2)
        ) !important;
    }
    .swiper-button-prev.circle-button {
        left: var(--swiper-navigation-sides-offset, 10px) !important;
        right: auto;
        margin-top: 120px !important;
    }
    .swiper-button-next.circle-button {
        right: var(--swiper-navigation-sides-offset, 10px) !important;
        left: auto;
        margin-top: 120px !important;
    }
    .swiper-button-prev {
        left: var(--swiper-navigation-sides-offset, 110px) !important;
        right: auto;
    }
    .swiper-button-next {
        right: var(--swiper-navigation-sides-offset, 110px) !important;
        left: auto;
    }
}
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
    .sf-search-form-container {
        margin-right: 300px;
    }
    .circle-button {
        margin-top: calc(var(--circle-button-margin-top) + 20px) !important;
    }
}