@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: "woodmart-font";
    src: url("../fonts/font-icon.woff2") format("woff2");
}
:root {
    --primary: #ed242e;
    --primary-hover: #c62828;
}

body {
    font-family:
        "YekanBakh",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Arial,
        "Noto Sans",
        "Liberation Sans",
        sans-serif;
    direction: rtl;
}

.Footer_footer__1_KSh {
    display: none !important;
}

.el-popper {
    z-index: 999999 !important;
}

.el-select-dropdown__item.is-selected {
    color: var(--primary) !important;
}

.productTooltip {
    background: var(--primary) !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}
.productTooltip .el-popper__arrow::before {
    background: var(--primary) !important;
    box-shadow: none !important;
    border: none !important;
}

.el-pagination .el-pager .number.is-active {
    background: var(--primary);
    color: #fff;
}
.el-pagination .el-pager .number.is-active:hover {
    color: #fff !important;
}
.el-pagination .el-pager .number:hover {
    color: var(--primary);
}
.el-pagination .el-pager li:hover {
    color: var(--primary) !important;
}
.el-pagination button:hover {
    color: var(--primary) !important;
}
.el-pagination button {
    transform: rotate(180deg);
}
.el-pagination {
    direction: rtl;
}

.el-overlay {
    z-index: 99999 !important;
}
.el-overlay .el-dialog {
    border-radius: 16px !important;
}
.el-overlay .el-dialog .el-dialog__header {
    display: none !important;
}

.sectionContainer {
    width: 100%;
    max-width: 1350px;
    padding-inline: 16px;
    margin-inline: auto;
}

.sectionHeader {
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sectionHeader .headerTitle {
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 750;
    position: relative;
}
.sectionHeader .headerTitle span {
    color: var(--primary);
}
.sectionHeader .headerTitle::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: var(--primary);
    position: absolute;
    inset: auto 0 -15px;
}
.sectionHeader .headerLink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #767676;
    transition: all 0.25s ease;
    padding: 6px 12px;
    border-radius: 8px;
}
.sectionHeader .headerLink svg {
    transition: transform 0.25s ease;
}
.sectionHeader .headerLink:hover {
    color: var(--primary);
    background: rgba(237, 36, 46, 0.08);
}
.sectionHeader .headerLink:hover svg {
    transform: translateX(-3px);
}

.productThumb {
    padding: 18px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 4px 4px 28px 0 rgba(0, 0, 0, 0.1);
}
.productThumb .thumbPic {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 12px;
}
.productThumb .thumbPic a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}
.productThumb .thumbPic picture {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}
.productThumb .thumbPic img {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    border-radius: 16px;
    padding: 14px;
    -o-object-fit: contain;
    object-fit: contain;
    z-index: 1;
}
.productThumb .thumbPic .thumbDiscount {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    min-height: 15px;
    border-radius: 30px;
    font-size: 12px;
    padding: 3px 10px;
    background-color: var(--primary);
    color: #fff;
    direction: ltr;
    font-weight: 650;
}
.productThumb .thumbContent {
    width: 100%;
}
.productThumb .thumbContent .contentTitle {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 12px;
    height: 48px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.productThumb .thumbContent .contentPrice {
    padding-block: 5px 11px;
    font-weight: 600;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.productThumb .thumbContent .contentPrice.discounted {
    gap: 6px;
}
.productThumb .thumbContent .contentPrice .oldPrice {
    font-size: 0.7rem;
    color: #bbb;
    text-decoration: line-through;
}
.productThumb .thumbContent .contentPrice .newPrice {
    font-size: 0.775rem;
    color: var(--primary);
    font-weight: 650;
}
.productThumb .thumbContent .contentQuantity .quantityHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.productThumb .thumbContent .contentQuantity .quantityHeader .headerThumb {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.productThumb
    .thumbContent
    .contentQuantity
    .quantityHeader
    .headerThumb
    .thumbTitle {
    font-size: 0.75rem;
    color: #767676;
    font-weight: 550;
}
.productThumb
    .thumbContent
    .contentQuantity
    .quantityHeader
    .headerThumb
    .thumbValue {
    font-size: 0.875rem;
    font-weight: 650;
}
.productThumb .thumbContent .contentQuantity .quantityProgress {
    width: 100%;
    height: 7px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.06);
}
.productThumb .thumbContent .contentQuantity .quantityProgress .progressBar {
    /*width: 60%;*/
    height: 100%;
    border-radius: 9999px;
    background: var(--primary);
}

@media (max-width: 1024px) {
    .sectionHeader .headerTitle {
        font-size: 1.2rem;
    }
}
@media (max-width: 480px) {
    .sectionHeader .headerTitle {
        font-size: 1.1rem;
    }
    .sectionHeader .headerTitle::after {
        inset: auto 0 -16px;
    }
    .sectionHeader .headerLink {
        font-size: 0.8rem;
        padding-inline: 4px;
    }
    .productThumb {
        border-radius: 16px;
    }
    .productThumb .thumbPic img {
        border-radius: 16px;
    }
    .productThumb .thumbContent .contentTitle {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }
    .productThumb .thumbContent .contentPrice {
        min-height: 54.2px;
    }
    .productThumb .thumbContent .contentPrice.discounted {
        flex-direction: column;
        gap: 2px;
    }
    .productThumb
        .thumbContent
        .contentQuantity
        .quantityHeader
        .headerThumb
        .thumbTitle {
        font-size: 0.7rem;
    }
    .productThumb
        .thumbContent
        .contentQuantity
        .quantityHeader
        .headerThumb
        .thumbValue {
        font-size: 0.825rem;
    }
}

/* ===========
NAVBAR START
=========== */
.navbar {
    width: 100%;
    padding-top: 141px;
}
.navbar.scrolled .navbarContainer {
    position: fixed;
    inset: 0 0 auto;
}
.navbar.scrolled .navbarContainer .containerHeader {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar.scrolled .navbarContainer .containerHeader .headerContainer {
    height: 85px;
}
.navbar.scrolled .navbarContainer .containerFooter {
    display: none;
}
.navbar .navbarContainer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    z-index: 9999;
}
.navbar .navbarContainer .containerHeader {
    width: 100%;
    background: #fff;
}
.navbar .navbarContainer .containerHeader .headerContainer {
    width: 100%;
    height: 90px;
    max-height: 90px;
    max-width: 1350px;
    padding-inline: 16px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition:
        height 0.2s ease,
        max-height 0.2s ease;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerToggle {
    display: none;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerLogo {
    margin-right: -10px;
    flex-shrink: 0;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerLogo
    .navLogo {
    padding-inline: 10px;
    height: -moz-fit-content;
    height: fit-content;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerLogo
    .navLogo
    .logoThumb {
    display: flex;
    align-items: center;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerLogo
    .navLogo
    .logoThumb
    img {
    width: 172px;
    height: 58.3px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: right;
    object-position: right;
}
/* .navbar .navbarContainer .containerHeader .headerContainer .containerSearch {
  flex-grow: 1;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch {
  padding-inline: 10px;
  display: flex;
  align-items: center;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch::after {
  content: "";
  display: block;
  width: 60px;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch .searchThumb {
  width: 100%;
  display: flex;
  align-items: center;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch .searchThumb .thumbInput {
  flex-grow: 1;
  height: 46px;
  padding-inline: 16px 32px;
  border: 1px solid rgba(0, 0, 0, 0.1019607843);
  border-left: none;
  background: rgb(249, 249, 249);
  border-radius: 0 9999px 9999px 0;
  font-size: 1rem;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch .searchThumb .thumbInput::-moz-placeholder {
  font-size: 0.875rem;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch .searchThumb .thumbInput::placeholder {
  font-size: 0.875rem;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch .searchThumb .thumbButton {
  width: 46px;
  height: 46px;
  border-radius: 9999px 0 0 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch .searchThumb .thumbButton::after {
  font-size: 1.25rem;
  transition: opacity 0.2s ease;
  content: "\f130";
  font-family: "woodmart-font";
}
.navbar .navbarContainer .containerHeader .headerContainer .containerSearch .navSearch .searchThumb .thumbButton:hover::after {
  opacity: 0.7;
} */
.navbar .containerSearch {
    flex-grow: 1;
    position: relative;
}

.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerSearch
    .navSearch {
    padding-inline: 10px;
    display: flex;
    align-items: center;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerSearch
    .navSearch::after {
    content: "";
    display: block;
    width: 60px;
}

.navbar .containerSearch .searchThumb {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.navbar .containerSearch .thumbInput {
    flex-grow: 1;
    height: 46px;
    padding-inline: 18px 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: none;
    background: #f8f8f8;
    border-radius: 0 9999px 9999px 0;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.navbar .containerSearch .thumbInput:focus {
    background: #fff;
    border-color: rgba(255, 0, 0, 0.2);
}

.navbar .containerSearch .thumbButton {
    width: 46px;
    height: 46px;
    border-radius: 9999px 0 0 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
}

.navbar .containerSearch .thumbButton::after {
    content: "\f130";
    font-family: "woodmart-font";
    font-size: 1.15rem;
}

.searchDropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 100%;
    max-width: 760px;

    background: #fff;

    border-radius: 24px;

    border: 1px solid rgba(0, 0, 0, 0.06);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

    overflow: hidden;

    z-index: 200;
}

.searchResults {
    max-height: 420px;
    overflow-y: auto;
}

.searchResults::-webkit-scrollbar {
    width: 6px;
}

.searchResults::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
}

.searchItem {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 14px 18px;

    transition: all 0.25s ease;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.searchItem:hover {
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.04), transparent);

    transform: translateY(-1px);
}

.itemImage {
    width: 72px;
    height: 72px;

    border-radius: 18px;

    background: #f6f6f6;

    padding: 8px;

    flex-shrink: 0;

    overflow: hidden;
}

.itemImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    transition: transform 0.3s ease;
}

.searchItem:hover .itemImage img {
    transform: scale(1.08);
}

.itemContent {
    flex-grow: 1;
    min-width: 0;
}

.itemContent h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;

    line-height: 1.7;

    margin-bottom: 4px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.searchItem:hover h4 {
    color: var(--primary);
}

.itemCategory {
    display: block;

    font-size: 0.78rem;
    color: #888;

    margin-bottom: 8px;
}

.itemPrice {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--primary);
}

.searchFooter {
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fafafa;

    border-top: 1px solid rgba(0, 0, 0, 0.05);

    cursor: pointer;

    font-size: 0.9rem;
    font-weight: 600;

    transition: all 0.2s ease;
}

.searchFooter strong {
    color: var(--primary);
    margin-inline: 4px;
}

.searchFooter:hover {
    background: #f4f4f4;
}
.searchEmpty {
    padding: 36px 20px;

    text-align: center;

    color: #888;
    font-size: 0.9rem;
}
.searchLoading {
    padding: 10px 0;
}

.loadingItem {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 14px 18px;
}

.loadingImage {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(90deg, #f1f1f1 25%, #f7f7f7 37%, #f1f1f1 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s infinite;
}

.loadingContent {
    flex-grow: 1;
}

.loadingContent span {
    display: block;
    height: 12px;
    border-radius: 999px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #f1f1f1 25%, #f7f7f7 37%, #f1f1f1 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s infinite;
}

.loadingContent span:first-child {
    width: 65%;
}

.loadingContent span:last-child {
    width: 35%;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}
.searchDropdown-enter-active,
.searchDropdown-leave-active {
    transition: all 0.22s ease;
}

.searchDropdown-enter-from,
.searchDropdown-leave-to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}
/* MOBILE SEARCH */

.mobileSearch {
    position: fixed;
    inset: 0;
    z-index: 999999999;
}

/* OVERLAY */

.searchOverlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(3px);
}

/* CONTENT */

.searchContent {
    position: relative;

    width: 100%;
    height: 100%;

    background: #fff;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* HEADER */

.searchHeader {
    padding: calc(env(safe-area-inset-top) + 14px) 16px 16px;

    display: flex;
    align-items: center;
    gap: 12px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    background: #fff;

    flex-shrink: 0;
}

.closeSearch {
    width: 42px;
    height: 42px;

    border-radius: 14px;

    background: #f5f5f5;

    font-size: 1rem;

    flex-shrink: 0;
}

/* INPUT */

.searchInput {
    flex-grow: 1;

    display: flex;
    align-items: center;
}

.searchInput input {
    flex-grow: 1;

    height: 46px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    border-left: none;

    background: #f8f8f8;

    border-radius: 0 18px 18px 0;

    padding-inline: 16px;
    font-size: 1rem;
    transition: all 0.25s ease;
}

.searchInput input:focus {
    background: #fff;

    border-color: rgba(255, 0, 0, 0.2);

    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.05);
}

.searchInput button {
    width: 46px;
    height: 46px;

    border-radius: 18px 0 0 18px;

    background: var(--primary);

    color: #fff;

    flex-shrink: 0;
}

.searchInput button::after {
    content: "\f130";

    font-family: "woodmart-font";

    font-size: 1.1rem;
}

/* POPULAR SEARCH */

.popularSearches {
    padding: 20px 16px 0;
}

.sectionTitle {
    font-size: 0.95rem;
    font-weight: 800;

    margin-bottom: 14px;
}

.searchTags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.searchTags button {
    height: 40px;

    padding-inline: 16px;

    border-radius: 999px;

    background: #f5f5f5;

    font-size: 0.82rem;
    font-weight: 600;

    transition: all 0.2s ease;
}

.searchTags button:hover {
    background: rgba(255, 0, 0, 0.08);

    color: var(--primary);
}

/* RESULTS */

.mobileResults {
    flex-grow: 1;

    overflow-y: auto;

    padding: 16px;
}

.mobileResults::-webkit-scrollbar {
    display: none;
}

.mobileResultItem {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* IMAGE */

.mobileResultItem .itemImage {
    width: 68px;
    height: 68px;

    border-radius: 16px;

    background: #f5f5f5;

    padding: 8px;

    overflow: hidden;

    flex-shrink: 0;
}

.mobileResultItem .itemImage img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* CONTENT */

.mobileResultItem .itemContent {
    flex-grow: 1;
    min-width: 0;
}

.mobileResultItem .itemContent h4 {
    font-size: 0.9rem;
    font-weight: 700;

    color: #222;

    line-height: 1.8;

    margin-bottom: 4px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}

.mobileResultItem .itemContent span {
    display: block;

    font-size: 0.76rem;

    color: #888;

    margin-bottom: 8px;
}

.mobileResultItem .itemPrice {
    font-size: 0.9rem;
    font-weight: 800;

    color: var(--primary);
}

/* EMPTY */

.searchEmpty {
    padding: 60px 20px;

    text-align: center;

    color: #888;

    font-size: 0.9rem;
}

/* FOOTER */

.searchFooter {
    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px;

    border-top: 1px solid rgba(0, 0, 0, 0.06);

    background: #fafafa;

    font-size: 0.9rem;
    font-weight: 700;

    flex-shrink: 0;
}

.searchFooter strong {
    color: var(--primary);

    margin-inline: 5px;
}

/* LOADING */

.searchLoading {
    padding: 16px;
}

.loadingItem {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 0;
}

.loadingImage {
    width: 68px;
    height: 68px;

    border-radius: 16px;

    background: linear-gradient(90deg, #f1f1f1 25%, #f7f7f7 37%, #f1f1f1 63%);

    background-size: 400% 100%;

    animation: shimmer 1.4s infinite;
}

.loadingContent {
    flex-grow: 1;
}

.loadingContent span {
    display: block;

    height: 12px;

    border-radius: 999px;

    margin-bottom: 10px;

    background: linear-gradient(90deg, #f1f1f1 25%, #f7f7f7 37%, #f1f1f1 63%);

    background-size: 400% 100%;

    animation: shimmer 1.4s infinite;
}

.loadingContent span:first-child {
    width: 70%;
}

.loadingContent span:last-child {
    width: 40%;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* ANIMATION */

.mobileSearch-enter-active,
.mobileSearch-leave-active {
    transition: all 0.22s ease;
}

.mobileSearch-enter-from,
.mobileSearch-leave-to {
    opacity: 0;
}

.mobileSearch-enter-from .searchContent,
.mobileSearch-leave-to .searchContent {
    transform: scale(0.98);

    opacity: 0;
}
.navbar .navbarContainer .containerHeader .headerContainer .containerOptions {
    flex-shrink: 0;
    margin-left: -10px;
    display: flex;
    align-items: center;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navContact {
    display: flex;
    align-items: center;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navContact::after {
    content: "";
    display: block;
    width: 60px;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navContact
    .contactThumb {
    display: flex;
    align-items: center;
    gap: 12px;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navContact
    .contactThumb
    .thumbContent {
    text-align: center;
    font-weight: 650;
    font-size: 0.9rem;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navContact
    .contactThumb
    .thumbContent
    .contentTitle {
    color: var(--primary);
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navContact
    .contactThumb
    .thumbContent
    .contentValue {
    color: #808080;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navContact
    .contactThumb
    .thumbIcon {
    width: 30px;
    height: 30px;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navContact
    .contactThumb
    .thumbIcon
    img {
    width: 100%;
    height: 100%;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navRegister {
    display: flex;
    align-items: center;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navRegister::after {
    content: "";
    display: block;
    width: 16px;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navRegister
    .registerThumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #777;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navRegister
    .registerThumb
    .thumbIcon::after {
    font-size: 1.25rem;
    content: "\f124";
    font-family: "woodmart-font";
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navRegister
    .registerThumb
    .thumbTitle {
    font-size: 0.925rem;
    font-weight: 600;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navBasket
    .basketThumb {
    height: 40px;
    padding-inline: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navBasket
    .basketThumb
    .thumbIcon::after {
    content: "\f126";
    font-family: "woodmart-font";
    font-size: 1.25rem;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navBasket
    .basketThumb
    .thumbContent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navBasket
    .basketThumb
    .thumbContent
    .contentNum {
    font-size: 1rem;
    font-weight: 750;
}
.navbar
    .navbarContainer
    .containerHeader
    .headerContainer
    .containerOptions
    .navBasket
    .basketThumb
    .thumbContent
    .contentUnit {
    font-size: 0.825rem;
}
.navbar .navbarContainer .containerFooter {
    border-block: 3px solid #f5f5f5;
    border-inline: 4px solid var(--primary);
    border-radius: 16px;
    margin-inline: auto;
    width: calc(100% - 32px);
    max-width: 1400px;
}
.navbar .navbarContainer .containerFooter .footerContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
    height: 50px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksOverlay {
    display: none;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList {
    display: flex;
    align-items: center;
    gap: 5px 32px;
    padding-inline: 10px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb {
    font-size: 0.95rem;
    font-weight: 600;
    padding-block: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s;
    position: relative;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    transform-origin: center right;
    transition: all 0.2s;
    background: var(--primary);
    position: absolute;
    inset: auto 0 -10px;
    border-radius: 9999px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb:hover {
    color: var(--primary);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb:hover::after {
    width: 100%;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb.has-dropdown {
    cursor: pointer;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb.has-dropdown:hover
    .dropdown-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .thumbIcon {
    display: grid;
    place-items: center;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    margin-top: 0;
    border: 3px solid #f5f5f5;
    border-top: none;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container {
    display: flex;
    width: 920px;
    min-height: 480px;
    max-height: calc(100dvh - 180px);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-sidebar {
    width: 240px;
    background: #fafafa;
    border-left: 2px solid #f0f0f0;
    padding: 20px 0;
    border-radius: 0 0 13px 0;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-sidebar
    .cat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #555;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-sidebar
    .cat-item::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 0 3px 3px 0;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-sidebar
    .cat-item:hover {
    background: #ffffff;
    color: var(--primary);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-sidebar
    .cat-item.active {
    background: #ffffff;
    color: var(--primary);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-sidebar
    .cat-item.active::before {
    opacity: 1;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-sidebar
    .cat-item
    .cat-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: inherit;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content {
    flex: 1;
    padding: 28px 32px;
    overflow-y: auto;
    max-height: 580px;
    background: #fff;
    border-radius: 0 13px 13px 0;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .panel-group {
    display: none;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .panel-group.active {
    display: block;
    animation: fadeIn 0.35s ease;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section {
    margin-bottom: 36px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section:last-child {
    margin-bottom: 0;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-items
    .group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    background: transparent;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-items
    .group-item:hover {
    background: #f9f9f9;
    color: var(--primary);
    transform: translateX(-2px);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-items
    .group-item:hover
    .item-icon {
    color: var(--primary);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-items
    .group-item
    .item-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #aaa;
    transition: color 0.2s ease;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-items
    .group-item
    .item-title {
    flex: 1;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 2px solid #f0f0f0;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-footer
    .group-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    transition: gap 0.2s ease;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-footer
    .group-more:hover {
    gap: 14px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerlinks
    .linksList
    .listThumb
    .dropdown-mega
    .mega-container
    .mega-content
    .group-section
    .group-footer
    .group-more
    i {
    font-size: 12px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList {
    display: flex;
    align-items: center;
    gap: 10px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid #ccc;
    border-radius: 9999px;
    color: rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
    position: relative;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbWhatsapp {
    --social-brand-color: #25d366;
    --social-icon: "\f175";
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia {
    --social-brand-color: #59d6bd;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia::after {
    display: none;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg {
    width: 20px;
    height: 20px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path {
    transition: all 0.25s ease;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath1,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath2,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath3,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath4,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath5,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath6,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath7,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath8,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath9,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath10,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath11,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath12,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath13,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath14,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath15,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath16,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath17,
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia
    svg
    path.rubikaPath18 {
    fill: rgba(0, 0, 0, 0.4);
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath1 {
    fill: #b8ce01;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath2 {
    fill: #7db425;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath3 {
    fill: #f6a925;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath4 {
    fill: #35ac9d;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath5 {
    fill: #59d6bd;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath6 {
    fill: #ef7414;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath7 {
    fill: #e74b50;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath8 {
    fill: #794387;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath9 {
    fill: #794387;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath10 {
    fill: #4c3683;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath11 {
    fill: #4c3683;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath12 {
    fill: #e74b50;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath13 {
    fill: #0f68a0;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath14 {
    fill: #49bdca;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath15 {
    fill: #f6a925;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath16 {
    fill: #ef7414;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath17 {
    fill: #7db425;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbRubkia:hover
    svg
    path.rubikaPath18 {
    fill: #b8ce01;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbInstagram {
    --social-brand-color: #e4405f;
    --social-icon: "\f163";
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbYoutube {
    --social-brand-color: #ff0000;
    --social-icon: "\f162";
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbAparat {
    --social-brand-color: #cb2027;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbAparat::after {
    display: none;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbAparat:hover
    svg
    path {
    fill: #fff;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbAparat
    svg {
    width: 20px;
    height: 20px;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb.thumbAparat
    svg
    path {
    fill: rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb::after {
    content: var(--social-icon);
    font-family: "woodmart-font";
    position: relative;
    z-index: 2;
}
.navbar
    .navbarContainer
    .containerFooter
    .footerContainer
    .containerMedia
    .mediaList
    .lisThumb:hover {
    color: #fff;
    background-color: var(--social-brand-color);
    border-color: var(--social-brand-color);
}
.navbar .sideMenu {
    position: fixed;
    inset: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 999999;
}
.navbar .sideMenu.active {
    pointer-events: auto;
    visibility: visible;
}
.navbar .sideMenu.active .menuOverlay {
    opacity: 1;
}
.navbar .sideMenu.active .menuContent {
    transform: translateX(0);
}
.navbar .sideMenu .menuOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}
.navbar .sideMenu .menuContent {
    position: absolute;
    inset: 0 0 0 auto;
    width: 280px;
    background: #fff;
    box-shadow:
        2px 0 8px rgba(0, 0, 0, 0.1),
        4px 0 16px rgba(0, 0, 0, 0.08),
        8px 0 24px rgba(0, 0, 0, 0.06);
    transform: translateX(110%);
    transition: all 0.3s ease;
}
.navbar .sideMenu .menuContent .contentContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.navbar .sideMenu .menuContent .contentContainer .containerHeader {
    width: 100%;
    flex-shrink: 0;
    padding: 18px 16px;
    border-bottom: 1px solid #e6e6e6;
}
.navbar .sideMenu .menuContent .contentContainer .containerHeader .headerThumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerHeader
    .headerThumb
    .thumbLogo
    img {
    height: 36px;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerHeader
    .headerThumb
    .thumbTitle {
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--primary);
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerHeader
    .headerThumb
    .thumbTitle
    i {
    font-size: 1rem;
    margin-left: 6px;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerHeader
    .headerThumb
    .thumbClose {
    background: #f5f5f5;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: #767676;
    cursor: pointer;
    border-radius: 9999px;
    transition: all 0.25s ease;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerHeader
    .headerThumb
    .thumbClose.thumbBack {
    background: #fafafa;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerHeader
    .headerThumb
    .thumbClose:hover {
    background: var(--primary);
    color: #fff;
}
.navbar .sideMenu .menuContent .contentContainer .containerMain {
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: none;
}
.navbar .sideMenu .menuContent .contentContainer .containerMain .mainLinks {
    padding: 10px 12px;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks.itemsLlinks {
    padding-inline: 0;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linkThumb {
    padding: 16px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    cursor: pointer;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linkThumb:not(:last-child) {
    border-bottom: 1px solid #f5f5f5;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linkThumb
    i {
    flex-shrink: 0;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linkThumb
    i.fa-chevron-left {
    font-size: 0.75rem;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linkThumb
    span {
    flex-grow: 1;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linksGroup
    .groupHeader {
    padding: 10px 18px;
    background: #fafafa;
    color: #767676;
    font-size: 0.775rem;
    font-weight: 650;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linksGroup
    .groupMain
    .mainLink {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linksGroup
    .groupFooter {
    padding: 16px 18px;
    font-size: 0.9rem;
    color: var(--primary);
    cursor: pointer;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerMain
    .mainLinks
    .linksGroup
    .groupFooter
    i {
    margin-right: 6px;
}
.navbar .sideMenu .menuContent .contentContainer .containerFooter {
    flex-shrink: 0;
    padding: 18px 16px;
    border-top: 1px solid #e6e6e6;
}
.navbar .sideMenu .menuContent .contentContainer .containerFooter .footerMedia {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerMedia
    .mediaThumb {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid #ccc;
    border-radius: 9999px;
    color: #666;
    transition: all 0.25s ease;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerMedia
    .mediaThumb
    svg {
    width: 18px;
    height: 18px;
    fill: #666;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerMedia
    .mediaThumb:hover {
    color: #fff;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerMedia
    .mediaThumb.thumbFacebook:hover {
    background: #365493;
    border-color: #365493;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerMedia
    .mediaThumb.thumbTwitter:hover {
    background: #000;
    border-color: #000;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerMedia
    .mediaThumb.thumbWhatsapp:hover {
    background: #25d366;
    border-color: #25d366;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerMedia
    .mediaThumb.thumbInstagram:hover {
    background: linear-gradient(
        45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
    border-color: #bc1888;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerMedia
    .mediaThumb.thumbYoutube:hover {
    background: #cb2027;
    border-color: #cb2027;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerContact {
    text-align: center;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerContact
    .contactTitle {
    font-size: 0.85rem;
    color: #767676;
    margin-bottom: 6px;
}
.navbar
    .sideMenu
    .menuContent
    .contentContainer
    .containerFooter
    .footerContact
    .contantLink {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    direction: ltr;
}

@media (max-width: 1024px) {
    .navbar {
        padding-top: 60px;
    }
    .navbar.scrolled .navbarContainer .containerHeader .headerContainer {
        height: 60px;
    }
    .navbar .navbarContainer .containerHeader {
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .navbar .navbarContainer .containerHeader .headerContainer {
        height: 60px;
        display: grid;
        grid-template-columns: 72px 1fr 72px;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerToggle {
        display: block;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerToggle
        .togglerThumb {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        color: #777;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerToggle
        .togglerThumb
        .thumbIcon {
        font-size: 1.2rem;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerToggle
        .togglerThumb
        .thumbIcon::before {
        content: "\f15a";
        font-family: "woodmart-font";
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerToggle
        .togglerThumb
        .thumbTitle {
        font-size: 0.875rem;
        font-weight: 600;
    }
    .navbar .navbarContainer .containerHeader .headerContainer .containerLogo {
        margin-right: 0;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerLogo
        .navLogo
        .logoThumb
        img {
        margin-inline: auto;
        max-width: 160px;
        height: 40.7167px;
        width: auto;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerSearch {
        display: none;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerOptions {
        margin-left: 0;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerOptions
        .navContact,
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerOptions
        .navRegister {
        display: none;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerOptions
        .navBasket {
        margin-right: auto;
    }
    .navbar
        .navbarContainer
        .containerHeader
        .headerContainer
        .containerOptions
        .navBasket
        .basketThumb
        .thumbContent {
        display: none;
    }
    .navbar .navbarContainer .containerFooter {
        display: none;
    }
}
@media (max-width: 768px) {
    .navbar.scrolled .navbarContainer {
        position: absolute;
        inset: 0;
    }
}
/* ===========
NAVBAR END
=========== */
/* ===========
HERO SECTION START
=========== */
.heroSection {
    padding-block: 40px;
}
.heroSection .sectionContainer {
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
    display: grid;
    grid-template-columns: 69.498% 30.461%;
}
.heroSection .sectionContainer .containerMain {
    padding: 10px;
    margin-right: -10px;
}
.heroSection .sectionContainer .containerMain .mainThumb {
    position: relative;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
}
.heroSection .sectionContainer .containerMain .mainThumb .headerSwiper {
    position: relative;
    height: 100%;
    z-index: 1;
}
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-wrapper {
    height: 100%;
}
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-wrapper
    .swiper-slide {
    height: 100%;
}
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-pagination
    .swiper-pagination-bullet {
    width: 5px;
    height: 10px;
    background: #b0b7bf;
    opacity: 1;
    border-radius: 4px;
    transition: all 0.2s;
    margin-left: 0;
}
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    height: 15px;
    background: #ed242e;
}
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-button-next,
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-button-prev {
    width: 25px;
    height: 25px;
    color: rgba(237, 237, 237, 0.9019607843);
}
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-button-next
    svg,
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-button-prev
    svg {
    width: 25px;
    height: 25px;
}
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-button-next {
    left: 10px;
}
.heroSection
    .sectionContainer
    .containerMain
    .mainThumb
    .headerSwiper
    .swiper-button-prev {
    right: 10px;
}
.heroSection .sectionContainer .containerMain .mainThumb .thumbShape {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 35px;
    width: -moz-fit-content;
    width: fit-content;
}
.heroSection .sectionContainer .containerMain .mainThumb .thumbShape svg {
    fill: #fff;
}
.heroSection .sectionContainer .containerMain .mainThumb .headerSlide {
    display: block;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.heroSection .sectionContainer .containerAside {
    padding: 10px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    margin-left: -10px;
}
.heroSection .sectionContainer .containerAside .asideThumb {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}
.heroSection .sectionContainer .containerAside .asideThumb .thumbOverlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background-image: linear-gradient(
        200deg,
        #000000 30%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0.6;
    display: none;
}
.heroSection .sectionContainer .containerAside .asideThumb .thumbContent {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.heroSection
    .sectionContainer
    .containerAside
    .asideThumb
    .thumbContent
    .thumbTitle {
    font-size: 1.5rem;
    font-weight: 850;
    color: #fff;
    line-height: 43px;
    letter-spacing: 0.9px;
    margin-bottom: 10px;
}
.heroSection
    .sectionContainer
    .containerAside
    .asideThumb
    .thumbContent
    .thumbSubtitle {
    font-size: 0.9rem;
    font-weight: 550;
    color: #d8d8d8;
}

@media (max-width: 1024px) {
    .heroSection {
        padding-block: 16px 24px;
    }
    .heroSection .sectionContainer .containerMain .mainThumb {
        height: 320px;
    }
    .heroSection .sectionContainer .containerAside .asideThumb .thumbContent {
        padding: 14px;
    }
    .heroSection
        .sectionContainer
        .containerAside
        .asideThumb
        .thumbContent
        .thumbTitle {
        font-size: 1.2rem;
        line-height: 28px;
    }
    .heroSection
        .sectionContainer
        .containerAside
        .asideThumb
        .thumbContent
        .thumbSubtitle {
        font-size: 0.85rem;
    }
}
@media (max-width: 768px) {
    .heroSection .sectionContainer {
        grid-template-columns: 100%;
    }
    .heroSection .sectionContainer .containerMain {
        margin-right: 0;
    }
    .heroSection .sectionContainer .containerAside {
        margin-left: 0;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .heroSection .sectionContainer .containerAside .asideThumb {
        height: 162px;
    }
    .heroSection .sectionContainer .containerAside .asideThumb .thumbContent {
        padding: 16px;
    }
}
@media (max-width: 480px) {
    .heroSection .sectionContainer .containerMain {
        padding: 0 0 16px;
        border-radius: 16px;
    }
    .heroSection .sectionContainer .containerMain .mainThumb {
        height: 242px;
    }
    .heroSection .sectionContainer .containerMain .mainThumb .thumbShape {
        right: 22px;
    }
    .heroSection .sectionContainer .containerMain .mainThumb .thumbShape svg {
        width: 192px;
        height: 62.337px;
    }
    .heroSection .sectionContainer .containerAside {
        padding: 0;
        grid-template-columns: 100%;
        gap: 16px;
    }
    .heroSection .sectionContainer .containerAside .asideThumb {
        height: 132px;
        border-radius: 16px;
    }
}
/* ===========
HERO SECTION END
=========== */
/* ===========
FEATURES SECTION START
=========== */
.mainFeatures {
    margin-bottom: 42px;
}
.mainFeatures .featuresList {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mainFeatures .featuresList .listThumb {
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    box-shadow: 5px 5px 15px 0 rgba(243, 243, 243, 0.7019607843);
    padding: 14px 14px 14px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}
.mainFeatures .featuresList .listThumb .thumbIcon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.mainFeatures .featuresList .listThumb .thumbIcon img {
    width: 100%;
    height: 100%;
}
.mainFeatures .featuresList .listThumb .thumbContent {
    flex-grow: 1;
}
.mainFeatures .featuresList .listThumb .thumbContent .contentTitle {
    font-size: 0.975rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.mainFeatures .featuresList .listThumb .thumbContent .contentDesc {
    font-size: 0.75rem;
    color: #adadad;
}

@media (max-width: 1024px) {
    .mainFeatures {
        margin-bottom: 32px;
    }
    .mainFeatures .featuresList .listThumb {
        padding: 12px 12px 12px 0;
    }
    .mainFeatures .featuresList .listThumb .thumbIcon {
        width: 32px;
        height: 32px;
    }
    .mainFeatures .featuresList .listThumb .thumbContent .contentTitle {
        font-size: 0.8rem;
    }
    .mainFeatures .featuresList .listThumb .thumbContent .contentDesc {
        font-size: 0.6rem;
    }
}
@media (max-width: 768px) {
    .mainFeatures .featuresList {
        flex-wrap: wrap;
        justify-content: center;
    }
    .mainFeatures .featuresList .listThumb {
        width: calc((100% - 28px) / 3);
        flex: none;
        padding: 16px 16px 16px 0;
    }
    .mainFeatures .featuresList .listThumb .thumbIcon {
        width: 38px;
        height: 38px;
    }
    .mainFeatures .featuresList .listThumb .thumbContent .contentTitle {
        font-size: 0.915rem;
    }
    .mainFeatures .featuresList .listThumb .thumbContent .contentDesc {
        font-size: 0.725rem;
    }
}
@media (max-width: 480px) {
    .mainFeatures .featuresList {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .mainFeatures .featuresList .listThumb {
        width: 100%;
        gap: 12px;
        flex-direction: column;
        text-align: center;
        padding-inline: 0;
    }
    .mainFeatures .featuresList .listThumb:nth-child(2) {
        display: none;
    }
    .mainFeatures .featuresList .listThumb .thumbIcon {
        width: 45px;
        height: 45px;
    }
    .mainFeatures .featuresList .listThumb .thumbContent .contentTitle {
        font-size: 0.85rem;
    }
    .mainFeatures .featuresList .listThumb .thumbContent .contentDesc {
        font-size: 0.7rem;
    }
}
/* ===========
FEATURES SECTION END
=========== */
/* ===========
DISCOUNT SECTION START
=========== */
.mainDiscount {
    margin-bottom: 54px;
}
.mainDiscount .sectionContainer {
    display: grid;
    grid-template-columns: 74.666% 25%;
    align-items: center;
}
.mainDiscount .sectionContainer > .containerMain {
    width: 100%;
    background: var(--primary);
    border-radius: 20px;
    box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.2);
}
.mainDiscount .sectionContainer > .containerMain .mainHeader {
    width: calc(100% - 56px);
    margin-inline: auto;
    padding-block: 21px 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.431372549);
}
.mainDiscount .sectionContainer > .containerMain .mainHeader .headerTitle {
    position: relative;
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
.mainDiscount
    .sectionContainer
    > .containerMain
    .mainHeader
    .headerTitle::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    inset: auto 0 -18px;
}
.mainDiscount .sectionContainer > .containerMain .mainList {
    padding-block: 15px 31px;
}
.mainDiscount .sectionContainer > .containerMain .mainList .discountSwiper {
    padding-inline: 28px;
}
.mainDiscount
    .sectionContainer
    > .containerMain
    .mainList
    .discountSwiper
    .swiper-slide {
    width: auto !important;
}
.mainDiscount
    .sectionContainer
    > .containerMain
    .mainList
    .discountSwiper
    .productThumb {
    width: 216px;
}
.mainDiscount .sectionContainer .containerAside {
    width: 100%;
    height: 100%;
    padding-right: 21px;
    position: relative;
}
.mainDiscount .sectionContainer .containerAside .asideShape {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -24px;
    z-index: 2;
}
.mainDiscount .sectionContainer .containerAside .asideContainer {
    width: 100%;
    height: 100%;
    background: #dfe1e8;
    border-radius: 15px;
    padding: 21px 28px;
    display: flex;
    flex-direction: column;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerHeader {
    flex-shrink: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(14, 25, 53, 0.4117647059);
    padding-bottom: 16px;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerHeader
    .headerTitle {
    position: relative;
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 600;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerHeader
    .headerTitle::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    inset: auto 0 -18px;
}
.asideDiscount {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.asideDiscount .discountInput {
    flex-grow: 1;
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    padding-inline: 16px;
    transition: all 0.25s ease;
}
.asideDiscount .discountInput:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.asideDiscount .discountInput:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.asideDiscount .discountSubmit {
    width: 154px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

.mainDiscount .sectionContainer .containerAside .asideContainer .containerMain {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainIcon {
    margin-bottom: 20px;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainIcon
    .iconBadge {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainIcon
    .iconBadge
    span {
    position: absolute;
    font-size: 0.69rem;
    font-weight: 650;
    inset-inline: 0;
    top: 6px;
    text-align: center;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainTitle {
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainDesc {
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.8;
    color: #666;
    margin-bottom: 20px;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainTimer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainTimer
    .timerBox {
    width: 100%;
    border: 1px dashed #0e1935;
    border-radius: 10px;
    padding-block: 14px;
    text-align: center;
    background: #bcc1c8;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainTimer
    .timerBox
    .boxValue {
    font-size: 1.05rem;
    font-weight: 750;
}
.mainDiscount
    .sectionContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainTimer
    .timerBox
    .boxTitle {
    font-size: 0.9rem;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .mainDiscount {
        margin-bottom: 36px;
    }
    .mainDiscount .sectionContainer {
        grid-template-columns: 70% 30%;
    }
    .mainDiscount .sectionContainer > .containerMain .mainHeader {
        width: calc(100% - 42px);
    }
    .mainDiscount .sectionContainer > .containerMain .mainHeader .headerTitle {
        font-size: 1.1rem;
    }
    .mainDiscount .sectionContainer > .containerMain .mainList {
        padding-block: 6px 24px;
    }
    .mainDiscount .sectionContainer > .containerMain .mainList .discountSwiper {
        padding-inline: 21px;
    }
    .mainDiscount .sectionContainer .containerAside {
        padding-right: 16px;
    }
    .mainDiscount .sectionContainer .containerAside .asideContainer {
        padding: 21px;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerHeader
        .headerTitle {
        font-size: 1.1rem;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainTitle {
        font-size: 1.05rem;
        margin-bottom: 8px;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainDesc {
        font-size: 0.8rem;
        margin-bottom: 14px;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainTimer
        .timerBox {
        padding-block: 10px;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainTimer
        .timerBox
        .boxValue {
        font-size: 1rem;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainTimer
        .timerBox
        .boxTitle {
        font-size: 0.8rem;
    }
}
@media (max-width: 768px) {
    .mainDiscount .sectionContainer {
        grid-template-columns: 55% 45%;
    }
}
@media (max-width: 480px) {
    .mainDiscount .sectionContainer {
        display: flex;
        gap: 14px;
        flex-direction: column-reverse;
    }
    .mainDiscount .sectionContainer > .containerMain {
        border-radius: 16px;
    }
    .mainDiscount
        .sectionContainer
        > .containerMain
        .mainList
        .discountSwiper
        .productThumb {
        width: 194px;
    }
    .mainDiscount .sectionContainer .containerAside {
        padding-right: 0;
    }
    .mainDiscount .sectionContainer .containerAside .asideShape {
        display: none;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainIcon {
        margin-bottom: 16px;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainIcon
        > img {
        height: 72px;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainIcon
        .iconBadge {
        display: none;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainTitle {
        font-size: 0.925rem;
        margin-bottom: 3px;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainDesc {
        font-size: 0.725rem;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainTimer {
        max-width: 274px;
    }
    .mainDiscount
        .sectionContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainTimer
        .timerBox
        .boxTitle {
        font-size: 0.7rem;
    }
}
/* ===========
DISCOUNT SECTION END
=========== */
/* ===========
CUSTOM BANNER SECTION START
=========== */
.mainCustomBanner {
    margin-bottom: 42px;
}
.mainCustomBanner .sectionContainer {
    padding-bottom: 24px;
    position: relative;
}
.mainCustomBanner .sectionContainer .bannerPic img {
    width: 100%;
    max-width: 1252px;
    aspect-ratio: 1252/378;
    border-radius: 25px;
    box-shadow: 0 5px 25px 0 rgba(109, 109, 109, 0.3);
}
.mainCustomBanner .sectionContainer .containerBg {
    position: absolute;
    left: -26px;
    bottom: 0;
}
.mainCustomBanner .sectionContainer .containerBg img {
    width: 270px;
    height: 270px;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .mainCustomBanner {
        margin-bottom: 12px;
    }
    .mainCustomBanner .sectionContainer .containerBg {
        display: none;
    }
}
@media (max-width: 480px) {
    .mainCustomBanner .sectionContainer .bannerPic img {
        min-height: 132px;
        border-radius: 16px;
    }
}
/* ===========
CUSTOM BANNER SECTION END
=========== */
/* ===========
CTEGORIES SECTION START
=========== */
.categoriesSection {
    margin-bottom: 42px;
}
.categoriesSection .sectionHeader {
    margin-bottom: 4px;
}
.categoriesSection .categoriesList .categorisSwiper {
    padding-block: 24px;
}
.categoriesSection .categoriesList .swiper-slide {
    width: auto !important;
}
.categoriesSection .categoriesList .listThumb {
    width: 162.5px;
    box-shadow: 5px 5px 10px 0 rgba(243, 243, 243, 0.7);
    border: solid 1px #f0f0f0;
    padding-top: 12px;
    padding-bottom: 5px;
    border-radius: 25px;
    text-align: center;
}
.categoriesSection .categoriesList .listThumb:hover .thumbIcon img {
    transform: scale3d(1.1, 1.1, 1);
}
.categoriesSection .categoriesList .listThumb .thumbIcon {
    padding-block: 10px;
}
.categoriesSection .categoriesList .listThumb .thumbIcon img {
    transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18);
    margin-inline: auto;
    width: 45px;
}
.categoriesSection .categoriesList .listThumb .thumbContent {
    padding: 10px;
}
.categoriesSection .categoriesList .listThumb .thumbContent .thumbTitle {
    font-size: 14px;
    font-weight: 650;
    line-height: 2rem;
}
.categoriesSection .categoriesList .listThumb .thumbContent .thumbValue {
    color: var(--primary);
    font-size: 0.875rem;
}

@media (max-width: 1024px) {
    .categoriesSection {
        margin-bottom: 32px;
    }
    .categoriesSection .categoriesList .listThumb .thumbIcon img {
        width: 40px;
    }
    .categoriesSection .categoriesList .listThumb .thumbContent .thumbTitle {
        font-size: 0.9rem;
        line-height: 28px;
    }
    .categoriesSection .categoriesList .listThumb .thumbContent .thumbValue {
        font-size: 0.8rem;
    }
}
@media (max-width: 480px) {
    .categoriesSection {
        margin-bottom: 16px;
    }
    .categoriesSection .sectionContainer {
        padding-inline: 0;
    }
    .categoriesSection .sectionContainer .sectionHeader {
        width: calc(100% - 32px);
        margin-inline: auto;
    }
    .categoriesSection .sectionContainer .categoriesList .swiper {
        padding-inline: 16px;
    }
}
/* ===========
CTEGORIES SECTION END
=========== */
/* ===========
PRODUCTS SECTION END
=========== */
.productsSection {
    margin-bottom: 24px;
}
.productsSection .sectionHeader {
    margin-bottom: 12px;
}
.productsSection .productsList .swiper {
    padding-block: 24px;
}
.productsSection .productsList .swiper-slide {
    width: auto !important;
}
.productsSection .productsList .productThumb {
    width: 248.5px;
    transition: all 0.25s ease;
    box-shadow: 4px 4px 15px 0 #edf0f5;
}
.productsSection .productsList .productThumb:hover {
    box-shadow: 0 0 28px 0 #edf0f5;
    transform: translateY(-3px);
}

@media (max-width: 480px) {
    .productsSection .sectionContainer {
        padding-inline: 0;
    }
    .productsSection .sectionContainer .sectionHeader {
        width: calc(100% - 32px);
        margin-inline: auto;
    }
    .productsSection .sectionContainer .productsList .swiper {
        padding-inline: 16px;
    }
    .productsSection .sectionContainer .productsList .productThumb {
        width: 224px;
    }
}
/* ===========
PRODUCTS SECTION END
=========== */
/* ===========
VIDEOS SECTION END
=========== */
.videosSection {
    margin-bottom: 24px;
}
.videosSection .sectionHeader {
    margin-bottom: 12px;
}
.videosSection .sectionHeader .headerTitle::after {
    inset: auto 0 -12px 0;
}
.videosSection .videosList .swiper {
    padding-block: 24px;
}
.videosSection .videosList .swiper-slide {
    width: auto !important;
}
.videosSection .videosList .videoThumb {
    width: 211px;
    cursor: pointer;
    transition: transform 0.25s ease;
}
.videosSection .videosList .videoThumb:hover {
    transform: translateY(-4px);
}
.videosSection .videosList .videoThumb .thumbVideo {
    width: 100%;
    aspect-ratio: 211.417/375.85;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f5;
}
.videosSection .videosList .videoThumb .thumbVideo img,
.videosSection .videosList .videoThumb .thumbVideo video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.videosSection .videosList .videoThumb .thumbVideo .videoOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.75)
    );
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 12px 12px 6px;
}
.videosSection .videosList .videoThumb .thumbVideo .videoOverlay .videoInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}
.videosSection
    .videosList
    .videoThumb
    .thumbVideo
    .videoOverlay
    .videoInfo
    .channelAvatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--primary);
    flex-shrink: 0;
    background: #fff;
    display: grid;
    place-items: center;
}
.videosSection
    .videosList
    .videoThumb
    .thumbVideo
    .videoOverlay
    .videoInfo
    .channelAvatar
    img {
    width: 20px;
    height: 20px;
    -o-object-fit: cover;
    object-fit: cover;
}
.videosSection
    .videosList
    .videoThumb
    .thumbVideo
    .videoOverlay
    .videoInfo
    .videoTitle {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.videosSection .videosList .videoThumb .thumbVideo .videoOverlay .viewBadge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 4px 11px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    align-self: flex-start;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.videosSection
    .videosList
    .videoThumb
    .thumbVideo
    .videoOverlay
    .viewBadge
    svg {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.videosSection
    .videosList
    .videoThumb
    .thumbVideo
    .videoOverlay
    .viewBadge
    span {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.videosSection .videoModal {
    position: fixed;
    inset: 0;
    max-height: 100dvh;
    z-index: 999999;
    pointer-events: none;
    visibility: hidden;
    display: flex;
    justify-content: center;
}
.videosSection .videoModal.active {
    pointer-events: auto;
    visibility: visible;
}
.videosSection .videoModal.active .modalOverLay {
    opacity: 1;
}
.videosSection .videoModal.active .modalContent {
    opacity: 1;
    transform: translateY(0);
}
.videosSection .videoModal .closeBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.videosSection .videoModal .closeBtn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.videosSection .videoModal .closeBtn svg {
    width: 24px;
    height: 24px;
}
.videosSection .videoModal .modalOverLay {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: rgba(0, 0, 0, 0.66);
    opacity: 0;
    transition: all 0.3s ease;
}
.videosSection .videoModal .modalContent {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 560px;
    padding-inline: 16px;
    transform: translateY(12px);
    opacity: 0;
    transition: all 0.25s ease;
}
.videosSection .videoModal .modalContent .videoSwiper {
    width: 100%;
    height: 100%;
}
.videosSection .videoModal .modalContent .videoSlide {
    padding-block: 24px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 420px;
    margin-inline: auto;
}
.videosSection .videoModal .modalContent .videoSlide .videoPlayer {
    width: 88%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2b2a33;
}
.videosSection .videoModal .modalContent .videoSlide .videoPlayer video {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoPlayer
    .playPauseBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoPlayer
    .playPauseBtn.show {
    opacity: 1;
    pointer-events: all;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoPlayer
    .playPauseBtn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(1.1);
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoPlayer
    .playPauseBtn
    svg {
    width: 32px;
    height: 32px;
}
.videosSection .videoModal .modalContent .videoSlide .videoInfo {
    position: absolute;
    inset: auto 0 23px 0;
    width: 88%;
    margin-inline: auto;
    padding: 24px 20px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.videosSection .videoModal .modalContent .videoSlide .videoInfo .videoHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .videoHeader
    .headerPic {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    flex-shrink: 0;
    background: #fff;
    border: 2px solid var(--primary);
    padding: 6px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .videoHeader
    .headerPic
    img {
    width: 100%;
    height: 100%;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .videoHeader
    .headerMeta
    .headerTitle {
    color: #fff;
    font-size: 0.925rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .videoHeader
    .headerMeta
    .viewCount {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .videoHeader
    .headerMeta
    .viewCount
    svg {
    width: 16px;
    height: 16px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .relatedProduct {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .relatedProduct
    img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    padding: 6px;
    background: #f5f5f5;
    border-radius: 6px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .relatedProduct
    .productDetails {
    flex: 1;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .relatedProduct
    .productDetails
    h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .relatedProduct
    .productDetails
    p {
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .relatedProduct
    .viewProductBtn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .relatedProduct
    .viewProductBtn:hover {
    background: #d11f28;
}
.videosSection .videoModal .modalContent .videoSlide .videoInfo .actionButtons {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 20px;
    left: -74px;
    bottom: 24px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .actionButtons
    .actionBtn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .actionButtons
    .actionBtn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .actionButtons
    .actionBtn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .actionButtons
    .actionBtn.likeAction {
    height: auto;
    flex-direction: column;
    padding-block: 26px 16px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .actionButtons
    .actionBtn
    svg {
    width: 20px;
    height: 20px;
}
.videosSection
    .videoModal
    .modalContent
    .videoSlide
    .videoInfo
    .actionButtons
    .actionBtn
    span {
    font-size: 0.8rem;
    color: #fff;
    margin-top: 12px;
}

@media (max-width: 480px) {
    .videosSection .sectionContainer {
        padding-inline: 0;
    }
    .videosSection .sectionContainer .sectionHeader {
        width: calc(100% - 32px);
        margin-inline: auto;
    }
    .videosSection .videosList .videosSwiper {
        padding-inline: 16px !important;
    }
    .videosSection .videoModal .modalOverLay .closeBtn {
        position: fixed;
        z-index: 99;
    }
    .videosSection .videoModal .modalContent {
        padding-inline: 0;
    }
    .videosSection .videoModal .modalContent .videoSlide {
        padding-block: 0;
    }
    .videosSection .videoModal .modalContent .videoSlide .videoPlayer {
        width: 100%;
    }
    .videosSection .videoModal .modalContent .videoSlide .videoInfo {
        width: 100%;
        inset: auto 0 0;
        flex-direction: row;
        align-items: flex-end;
        padding: 16px;
        gap: 16px;
    }
    .videosSection
        .videoModal
        .modalContent
        .videoSlide
        .videoInfo
        .infoContent {
        flex-grow: 1;
    }
    .videosSection
        .videoModal
        .modalContent
        .videoSlide
        .videoInfo
        .actionButtons {
        position: static;
        flex-shrink: 0;
        gap: 16px;
    }
    .videosSection
        .videoModal
        .modalContent
        .videoSlide
        .videoInfo
        .actionButtons
        .actionBtn {
        width: 48px;
        height: 48px;
    }
}
/* ===========
VIDEOS SECTION END
=========== */
/* ===========
FUL BANNER SECTION START
=========== */
.mainFullBanner {
    margin-bottom: 32px;
}
.mainFullBanner .sectionContainer {
    padding-bottom: 24px;
    position: relative;
}
.mainFullBanner .sectionContainer .bannerPic img {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0 5px 25px 0 rgba(109, 109, 109, 0.3);
}

@media (max-width: 1024px) {
    .mainFullBanner {
        margin-bottom: 16px;
    }
}
@media (max-width: 480px) {
    .mainFullBanner {
        margin-bottom: 0;
    }
    .mainFullBanner .sectionContainer .bannerPic img {
        -o-object-fit: cover;
        object-fit: cover;
        min-height: 132px;
        border-radius: 16px;
    }
}
/* ===========
FUL BANNER SECTION END
=========== */
/* ===========
BRANDS SECTION END
=========== */
.brandsSection {
    margin-bottom: 46px;
}
.brandsSection .brandsList {
    padding: 14px;
    border-radius: 25px;
    border: 2px solid #f0f0f0;
    box-shadow: 5px 5px 30px 0 rgba(243, 243, 243, 0.7019607843);
    overflow: hidden;
}
.brandsSection .brandsList .swiper {
    overflow: visible !important;
}
.brandsSection .brandsList .swiper-slide {
    width: auto !important;
}
.brandsSection .brandsList .brandThumb {
    width: 206.833px;
    height: 100px;
}
.brandsSection .brandsList .brandThumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .brandsSection {
        margin-bottom: 32px;
    }
    .brandsSection .brandsList .brandThumb {
        width: 192px;
        height: 92px;
    }
}
@media (max-width: 480px) {
    .brandsSection .brandsList .brandThumb {
        width: 132.373px;
        height: 64px;
    }
}
/* ===========
BRANDS SECTION END
=========== */
/* ===========
CONTACTS SECTION END
=========== */
.contactsSection {
    margin-top: 62px;
}
.contactsSection .sectionContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.contactsSection .sectionContainer .containerPic {
    position: relative;
    padding-left: 42px;
}
.contactsSection .sectionContainer .containerPic > img {
    position: relative;
    max-width: 100%;
    max-height: 420px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    margin-inline: auto;
    z-index: 2;
}
.contactsSection .sectionContainer .containerPic .picBg {
    position: absolute;
    left: 140px;
    bottom: 14px;
    z-index: 1;
}
.contactsSection .sectionContainer .containerPic .picBg img {
    width: 260px;
    height: 260px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
}
.contactsSection .sectionContainer .containerContent {
    padding-top: 16px;
}
.contactsSection .sectionContainer .containerContent .contentTitle {
    font-size: 2rem;
    font-weight: 750;
}
.contactsSection .sectionContainer .containerContent .contentTitle span {
    display: block;
    margin-bottom: -6px;
}
.contactsSection .sectionContainer .containerContent .contentTitle img {
    width: 65px;
    height: 65px;
}
.contactsSection .sectionContainer .containerContent .contentDesc {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #636363;
    text-align: justify;
    margin-bottom: 12px;
}
.contactsSection .sectionContainer .containerContent .contentOptions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.contactsSection
    .sectionContainer
    .containerContent
    .contentOptions
    .optionBadge {
    width: -moz-fit-content;
    width: fit-content;
    padding: 6px 16px;
    background-color: #f8e8db;
    fill: #945218;
    color: #945218;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.825rem;
}
.contactsSection
    .sectionContainer
    .containerContent
    .contentOptions
    .optionLink {
    width: -moz-fit-content;
    width: fit-content;
    padding: 6px 16px;
    background-color: #000;
    fill: #fff;
    color: #fff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.825rem;
}

@media (max-width: 1024px) {
    .contactsSection .sectionContainer {
        align-items: center;
    }
    .contactsSection .sectionContainer .containerContent .contentTitle {
        font-size: 1.75rem;
    }
}
@media (max-width: 480px) {
    .contactsSection {
        margin-top: 0;
    }
    .contactsSection .sectionContainer {
        display: flex;
        flex-direction: column-reverse;
        gap: 36px;
    }
    .contactsSection .sectionContainer .containerContent .contentTitle {
        font-size: 1.5rem;
        margin-bottom: -8px;
    }
    .contactsSection .sectionContainer .containerContent .contentTitle img {
        margin-top: -12px;
    }
    .contactsSection .sectionContainer .containerPic {
        padding: 0;
    }
    .contactsSection .sectionContainer .containerPic > img {
        width: 80%;
        margin-inline: auto;
    }
    .contactsSection .sectionContainer .containerPic .picBg {
        left: 38px;
    }
    .contactsSection .sectionContainer .containerPic .picBg img {
        width: 192px;
        height: 192px;
    }
}
/* ===========
CONTACTS SECTION END
=========== */
/* ===========
FOOTER START
=========== */
.footer {
    width: 100%;
    margin-top: 40px;
}
.footer .footerHeader svg {
    fill: var(--primary);
}
.footer .footerMain {
    padding: 56px 42px 16px;
}
.footer .footerMain .mainContainer {
    display: grid;
    grid-template-columns: 25% 75%;
}
.footer .footerMain .mainContainer .containerAside {
    width: 100%;
}
.footer .footerMain .mainContainer .containerAside .asideMap {
    padding: 0 30px 30px 12px;
}
.footer .footerMain .mainContainer .containerAside .asideMap iframe {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    border-radius: 24px;
}
.footer .footerMain .mainContainer .containerMain {
    padding: 0 9px 12px;
    border-right: 3px dashed #e2e2e2;
    border-bottom: 3px dashed #e2e2e2;
    border-radius: 0 0 25px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.footer .footerMain .mainContainer .containerMain .mainThumb {
    padding-inline: 12px;
}
.footer .footerMain .mainContainer .containerMain .mainThumb .thumbHeader {
    margin-bottom: 24px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbHeader
    .headerTitle {
    font-size: 1.25rem;
    font-weight: 750;
    margin-bottom: 16px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbHeader
    .headerIcon
    img {
    width: 65px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainAddress {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 16px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainAddress
    .addressTitle {
    color: #989898;
    margin-left: 4px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainContact {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainContact
    .contactIcons {
    padding-block: 12px 16px;
    width: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: #f3f3f3;
    border-radius: 9999px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainContact
    .contactIcons
    svg {
    width: 18px;
    height: 18px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainContact
    .contactValues {
    padding-block: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainContact
    .contactValues
    .valueThumb {
    line-height: 18px;
    font-size: 0.95rem;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainMedia {
    display: flex;
    align-items: center;
    gap: 6px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainMedia
    .mediaThumb {
    cursor: pointer;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainMedia
    .mediaThumb
    svg {
    width: 35px;
    height: 35px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainMedia
    .mediaThumb.thumbRubika {
    width: 35px;
    height: 35px;
    border-radius: 9999px;
    background: #f6f7f9;
    border: 1px solid #e9eaee;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    display: grid;
    place-items: center;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainMedia
    .mediaThumb.thumbRubika
    svg {
    width: 20px;
    height: 20px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainMedia
    .mediaThumb.thumbAparat {
    width: 35px;
    height: 35px;
    background: #df0f50;
    border-radius: 9999px;
    display: grid;
    place-items: center;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainMedia
    .mediaThumb.thumbAparat
    svg {
    width: 17px;
    height: 17px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainMedia
    .mediaThumb.thumbAparat
    svg
    path {
    fill: #fff;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainLinks {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainLinks
    .linksList
    .linkThumb {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    white-space: nowrap;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainLinks
    .linksList
    .linkThumb:not(:last-child) {
    margin-bottom: 16px;
}
.footer
    .footerMain
    .mainContainer
    .containerMain
    .mainThumb
    .thumbMain
    .mainLinks
    .linksList
    .linkThumb
    i {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
}
.footer .footerFooter {
    padding: 6px 32px 28px;
    text-align: center;
    font-size: 0.925rem;
}
.footer .footerFooter a {
    color: var(--primary);
}

@media (max-width: 1280px) {
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainLinks {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}
@media (max-width: 1024px) {
    .footer .footerMain {
        padding-inline: 16px;
    }
    .footer .footerMain .mainContainer {
        grid-template-columns: 100%;
    }
    .footer .footerMain .mainContainer .containerAside {
        display: none;
    }
    .footer .footerMain .mainContainer .containerMain {
        border-right: none;
        border-radius: 0;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbHeader
        .headerTitle {
        font-size: 1.1rem;
        margin-bottom: 14px;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainLinks {
        flex-direction: row;
    }
}
@media (max-width: 768px) {
    .footer .footerMain .mainContainer .containerMain {
        grid-template-columns: 1fr 1fr;
        row-gap: 32px;
    }
}
@media (max-width: 480px) {
    .footer .footerMain {
        padding: 24px 12px 0;
    }
    .footer .footerMain .mainContainer .containerMain {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
        border-bottom-width: 2px;
    }
    .footer .footerMain .mainContainer .containerMain .mainThumb {
        padding: 0;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbHeader
        .headerTitle {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbHeader
        .headerIcon
        img {
        width: 50px;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainAddress {
        font-size: 0.85rem;
        line-height: 1.7;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainContact {
        gap: 10px;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainContact
        .contactIcons {
        gap: 14px;
        padding: 10px 0;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainContact
        .contactValues {
        gap: 14px;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainContact
        .contactValues
        .valueThumb {
        font-size: 0.85rem;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainLinks {
        gap: 10px;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainLinks
        .linkThumb {
        font-size: 0.85rem;
        gap: 10px;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainMedia {
        margin-top: 8px;
    }
    .footer
        .footerMain
        .mainContainer
        .containerMain
        .mainThumb
        .thumbMain
        .mainMedia
        .mediaThumb
        svg {
        width: 28px;
        height: 28px;
    }
    .footer .footerFooter {
        padding: 18px 12px;
        font-size: 0.8rem;
    }
}
/* ===========
FOOTER END
=========== */
/* SHOP.HTML */
/* ===========
SHOP MAIN START
=========== */
.shopMain {
    padding-block: 40px;
}
.shopMain .mainContainer {
    width: 100%;
    max-width: 1350px;
    padding-inline: 16px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
}
.shopMain .mainContainer .containerAside {
    grid-column: span 3;
}
.shopMain .mainContainer .containerAside .asideContainer {
    width: 100%;
    position: sticky;
    top: 108px;
}
.shopMain .mainContainer .containerAside .asideContainer .containerHeader {
    display: none;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup:not(:last-child) {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.105);
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup.sortGroup {
    display: none;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupTitle {
    font-size: 1.25rem;
    font-weight: 550;
    margin-bottom: 10px;
    line-height: 40px;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .categoriesList
    .listThumb {
    display: block;
    padding: 8px 0 8px 5px;
    font-size: 0.875rem;
    color: #767676;
    transition: all 0.2s;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .categoriesList
    .listThumb:hover {
    color: var(--primary);
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainPrice
    .priceSlider
    .el-slider {
    width: 99% !important;
    margin-inline: auto !important;
    --el-slider-main-bg-color: var(--primary) !important;
    --el-slider-height: 2px !important;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainPrice
    .priceSlider
    .el-slider
    .el-slider__button-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainPrice
    .priceSlider
    .el-slider
    .el-slider__button {
    width: 3px !important;
    height: 15px !important;
    border: none !important;
    background: var(--primary) !important;
    border-radius: 0 !important;
    display: block;
    margin-top: -4px;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainPrice
    .priceContent
    .contentDetails {
    font-size: 0.85rem;
    font-weight: 550;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainPrice
    .priceContent
    .contentDetails
    .detailsTitle {
    color: #767676;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainPrice
    .priceContent
    .contentOption {
    display: block;
    width: 124px;
    padding: 5px 14px;
    background: var(--primary);
    border-radius: 6px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 12px auto 0;
    transition: all 0.25s ease;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainPrice
    .priceContent
    .contentOption:hover {
    transform: translateY(-2px);
    background: var(--primary-hover);
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb:not(:last-child) {
    margin-bottom: 16px;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb.active
    .thumbContent
    .thumbCheck {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb.active
    .thumbContent
    .thumbCheck
    i {
    display: block;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb
    .thumbContent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb
    .thumbContent
    .thumbCheck {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.105);
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 0.65rem;
    display: grid;
    place-items: center;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb
    .thumbContent
    .thumbCheck
    i {
    display: none;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb
    .thumbContent
    .thumbTitle {
    font-size: 0.9rem;
    color: #767676;
}
.shopMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerGroup
    .groupMain
    .mainBrands
    .brandThumb
    .thumbCounter {
    font-size: 0.9rem;
    color: #767676;
}
.shopMain .mainContainer .containerMain {
    grid-column: span 9;
}
.shopMain .mainContainer .containerMain .mainHeaer {
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.shopMain .mainContainer .containerMain .mainHeaer .headerBreadCrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.shopMain
    .mainContainer
    .containerMain
    .mainHeaer
    .headerBreadCrumb
    .breadCrumbLink {
    transition: all 0.2s;
}
.shopMain
    .mainContainer
    .containerMain
    .mainHeaer
    .headerBreadCrumb
    .breadCrumbLink:not(:last-child) {
    color: #767676;
}
.shopMain
    .mainContainer
    .containerMain
    .mainHeaer
    .headerBreadCrumb
    .breadCrumbLink:not(:last-child):hover {
    color: var(--primary);
}
.shopMain .mainContainer .containerMain .mainHeaer .headerSort .el-select {
    width: auto !important;
}
.shopMain
    .mainContainer
    .containerMain
    .mainHeaer
    .headerSort
    .el-select
    .el-select__wrapper {
    width: 200px !important;
    text-align: right;
    border-bottom: 1px solid #333;
    box-shadow: none;
    border-radius: 0;
    padding-inline: 4px;
    font-size: 0.85rem;
}
.shopMain
    .mainContainer
    .containerMain
    .mainHeaer
    .headerSort
    .el-select
    .el-select__wrapper.is-focused {
    border-color: var(--primary);
}
.shopMain .mainContainer .containerMain .mainHeaer .headerResult {
    display: none;
}
.shopMain .mainContainer .containerMain .mainFilter {
    display: none;
}
.shopMain .mainContainer .containerMain .mainList {
    width: 100%;
    margin-bottom: 32px;
}
.shopMain .mainContainer .containerMain .mainList .listContainer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.shopMain .mainContainer .containerMain .mainList .listContainer .productThumb {
    width: 100%;
    border-radius: 16px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb:hover {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb:hover
    .thumbPic
    .thumbOptions {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic {
    width: 100%;
    position: relative;
    margin-bottom: 12px;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    > img {
    width: 100%;
    aspect-ratio: 1;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    background: #f5f5f5;
    border-radius: 16px;
    padding: 14px;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions {
    position: absolute;
    inset: auto 0 10px 0;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    padding-inline: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 25px, 0);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 6px;
    cursor: pointer;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb:hover {
    color: var(--primary);
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb
    .thumbIcon {
    font-size: 1rem;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb
    .thumbIcon::after {
    font-family: "woodmart-font";
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb
    .thumbIcon.basketIcon::after {
    content: "\f123";
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb
    .thumbIcon.searchIcon::after {
    content: "\f130";
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb
    .thumbIcon.compareIcon::after {
    content: "\f128";
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb
    .thumbIcon.favoriteIcon::after {
    content: "\f106";
    color: #000;
}

.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbPic
    .thumbOptions
    .optionThumb
    .thumbIcon.fillfavoriteIcon::after {
    content: "\f106";
    color: red;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbContent
    .contentTitle {
    font-size: 1rem;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbContent
    .contentPrice
    .oldPrice {
    font-size: 0.75rem;
}
.shopMain
    .mainContainer
    .containerMain
    .mainList
    .listContainer
    .productThumb
    .thumbContent
    .contentPrice
    .newPrice {
    font-size: 0.8rem;
}
.shopMain .mainContainer .containerMain .mainFooter {
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
}

.mainOrdeFooter {
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
}
.blogsMain .mainFooter {
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
}

.commentsContianer .mainFooter {
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
}
.shopMain .el-dialog {
    padding: 0 !important;
    width: 90% !important;
    max-width: 1024px !important;
    height: 84dvh !important;
    overflow: hidden;
}
.shopMain .el-dialog .el-dialog__body {
    height: 100%;
}
.shopMain .el-dialog .detailsShortcut {
    height: 100%;
}
.shopMain .el-dialog .detailsShortcut .shortcutContainer {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.shopMain .el-dialog .detailsShortcut .shortcutContainer .containerPic {
    width: 100%;
    height: 84dvh;
    background: #f5f5f5;
    position: relative;
    padding: 32px;
    box-shadow: inset 3px 0 12px rgba(0, 0, 0, 0.2);
}
.shopMain .el-dialog .detailsShortcut .shortcutContainer .containerPic img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerPic
    .picDiscount {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary);
    color: #fff;
    direction: ltr;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
}
.shopMain .el-dialog .detailsShortcut .shortcutContainer .containerContent {
    position: relative;
    padding: 32px;
    display: flex;
    flex-direction: column;
    color: #000;
    overflow-y: auto;
    scrollbar-width: none;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent::-webkit-scrollbar {
    display: none;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentHeader {
    flex-shrink: 0;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentHeader
    .headerClose {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentHeader
    .headerClose:hover {
    background: var(--primary);
    color: white;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentHeader
    .headerTitle {
    font-size: 1.75rem;
    font-weight: 750;
    line-height: 1.4;
    margin-block: 16px 8px;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentHeader
    .headerPrice {
    display: flex;
    align-items: center;
    gap: 16px;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentHeader
    .headerPrice
    .priceNew {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentHeader
    .headerPrice
    .priceOld {
    font-size: 1rem;
    font-weight: 550;
    color: #bbb;
    text-decoration: line-through;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain {
    flex-grow: 1;
    padding-block: 24px;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainDesc {
    font-size: 0.9rem;
    text-align: justify;
    line-height: 1.8;
    color: #666;
    margin-bottom: 24px;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainQuantity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 18px;
    background: #f8f9fa;
    border-radius: 12px;
    width: -moz-fit-content;
    width: fit-content;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainQuantity
    i {
    color: #4caf50;
    font-size: 1rem;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainQuantity
    span {
    color: #666;
    font-size: 0.8rem;
    font-weight: 600;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainPurchase {
    display: flex;
    align-items: center;
    gap: 24px;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainPurchase
    .purchaseControl {
    display: inline-flex;
    align-items: center;
    padding: 6px;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 12px;
    flex-shrink: 0;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainPurchase
    .purchaseControl
    .controlOption {
    width: 38px;
    height: 38px;
    border: none;
    background: #fff;
    color: #333;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: grid;
    place-items: center;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainPurchase
    .purchaseControl
    .controlOption:hover {
    background: var(--primary);
    color: #fff;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainPurchase
    .purchaseControl
    .controlInput {
    width: 50px;
    height: 38px;
    text-align: center;
    border: none;
    background: transparent;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainPurchase
    .purchaseOption {
    flex-grow: 1;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 650;
    transition: all 0.25s ease;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentMain
    .mainPurchase
    .purchaseOption:hover {
    background: #c62828;
    transform: translateY(-2px);
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentFooter {
    flex-shrink: 0;
    padding-top: 16px;
    border-top: 2px solid #f0f0f0;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentFooter
    .footerCategories {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentFooter
    .footerCategories
    .categoriesTitle {
    font-size: 0.825rem;
    color: #666;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentFooter
    .footerCategories
    .categoriesValue {
    display: inline-flex;
    font-size: 0.8rem;
    color: var(--primary);
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentFooter
    .footerCategories
    .categoriesValue
    a {
    display: inline-flex;
    align-items: center;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentFooter
    .footerCategories
    .categoriesValue
    a:not(:last-child)::after {
    content: ",";
    display: inline-block;
    margin-inline: 4px;
    color: #666;
    font-size: 1rem;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentFooter
    .footerOption {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: 14px;
    transition: all 0.25s ease;
}
.shopMain
    .el-dialog
    .detailsShortcut
    .shortcutContainer
    .containerContent
    .contentFooter
    .footerOption:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

@media (max-width: 1280px) {
    .shopMain .mainContainer .containerMain .mainList .listContainer {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 1024px) {
    .shopMain {
        padding-block: 32px;
    }
    .shopMain .mainContainer {
        grid-template-columns: 100%;
    }
    .shopMain .mainContainer .containerAside {
        position: fixed;
        grid-column: span 1;
        inset: 0;
        pointer-events: none;
        visibility: hidden;
        z-index: 99999;
    }
    .shopMain .mainContainer .containerAside.active {
        pointer-events: auto;
        visibility: visible;
    }
    .shopMain .mainContainer .containerAside.active .asideOverlay {
        opacity: 1;
    }
    .shopMain .mainContainer .containerAside.active .asideContainer {
        transform: translateX(0);
    }
    .shopMain .mainContainer .containerAside .asideOverlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: all 0.3s ease;
    }
    .shopMain .mainContainer .containerAside .asideContainer {
        position: absolute;
        inset: 0 0 0 auto;
        width: 280px;
        background: #fff;
        box-shadow:
            2px 0 8px rgba(0, 0, 0, 0.1),
            4px 0 16px rgba(0, 0, 0, 0.08),
            8px 0 24px rgba(0, 0, 0, 0.06);
        transform: translateX(110%);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }
    .shopMain .mainContainer .containerAside .asideContainer .containerHeader {
        width: 100%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 16px;
        border-bottom: 1px solid #e6e6e6;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerHeader
        .headerTitle {
        font-size: 1.15rem;
        font-weight: 700;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerHeader
        .headerClose {
        width: 28px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #767676;
    }
    .shopMain .mainContainer .containerAside .asideContainer .containerMain {
        flex-grow: 1;
        overflow-y: auto;
        scrollbar-width: none;
        padding-inline: 16px;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup {
        padding-block: 18px;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup:not(:last-child) {
        margin-bottom: 0;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup.sortGroup {
        display: block;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupTitle {
        font-size: 1rem;
        font-weight: 750;
        line-height: 1.5;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupMain
        .categoriesList {
        margin-top: -4px;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupMain
        .categoriesList
        .listThumb {
        padding-block: 6px;
        font-size: 0.825rem;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupMain
        .mainBrands
        .brandThumb:not(:last-child) {
        margin-bottom: 12px;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupMain
        .mainBrands
        .brandThumb
        .thumbContent
        .thumbTitle {
        font-size: 0.825rem;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupMain
        .mainBrands
        .brandThumb
        .thumbCounter {
        font-size: 0.8rem;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupMain
        .el-select
        .el-select__wrapper {
        border-radius: 10px;
        box-shadow: none;
        border: 1px solid rgba(0, 0, 0, 0.1);
        height: 42px;
        text-align: right;
        font-size: 0.825rem !important;
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupMain
        .el-select
        .el-select__wrapper:hover {
        border-color: rgba(237, 36, 46, 0.25);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.4),
            0 8px 24px rgba(237, 36, 46, 0.05),
            0 0 0 3px rgba(237, 36, 46, 0.06);
    }
    .shopMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .containerGroup
        .groupMain
        .el-select
        .el-select__wrapper.is-focused {
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.4),
            0 10px 26px rgba(237, 36, 46, 0.15),
            0 0 0 4px rgba(237, 36, 46, 0.2);
    }
    .shopMain .mainContainer .containerMain {
        grid-column: auto;
    }
    .shopMain .mainContainer .containerMain .mainHeaer {
        padding-bottom: 14px;
        margin-bottom: 0;
        border-bottom: 1px solid #e1e1e1;
    }
    .shopMain .mainContainer .containerMain .mainHeaer .headerSort {
        display: none;
    }
    .shopMain .mainContainer .containerMain .mainHeaer .headerResult {
        display: block;
        font-size: 0.85rem;
    }
    .shopMain .mainContainer .containerMain .mainFilter {
        display: block;
        padding-block: 14px;
        border-bottom: 1px solid #e1e1e1;
        margin-bottom: 18px;
    }
    .shopMain .mainContainer .containerMain .mainFilter .filterToggler {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 0.925rem;
        color: #fff;
        background: var(--primary);
        border-radius: 9px;
    }
    .shopMain .mainContainer .containerMain .mainFilter .filterToggler span {
        font-weight: 550;
    }
    .shopMain
        .mainContainer
        .containerMain
        .mainList
        .listContainer
        .productThumb
        .thumbPic
        .thumbOptions {
        padding-inline: 4px;
    }
    .shopMain
        .mainContainer
        .containerMain
        .mainList
        .listContainer
        .productThumb
        .thumbPic
        .thumbOptions
        .optionThumb {
        width: 30px;
        height: 30px;
    }
    .shopMain
        .mainContainer
        .containerMain
        .mainList
        .listContainer
        .productThumb
        .thumbPic
        .thumbOptions
        .optionThumb
        .thumbIcon {
        font-size: 0.8rem;
    }
    .shopMain .el-dialog .detailsShortcut .shortcutContainer .containerContent {
        padding: 24px;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentHeader
        .headerTitle {
        font-size: 1.45rem;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentHeader
        .headerPrice
        .priceNew {
        font-size: 0.95rem;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentHeader
        .headerPrice
        .priceOld {
        font-size: 0.85rem;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentMain
        .mainDesc {
        font-size: 0.825rem;
    }
}
@media (max-width: 768px) {
    .shopMain .productThumb .thumbContent .contentPrice {
        flex-direction: column;
        gap: 0;
        height: 60px;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentMain
        .mainPurchase {
        flex-direction: column;
        align-items: flex-start;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentMain
        .mainPurchase
        .purchaseOption {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .shopMain .mainContainer .containerMain .mainList .listContainer {
        grid-template-columns: 1fr 1fr;
    }
    .shopMain .el-dialog .detailsShortcut .shortcutContainer {
        grid-template-columns: 100%;
    }
    .shopMain .el-dialog .detailsShortcut .shortcutContainer .containerPic {
        height: auto;
        aspect-ratio: 3/2;
        padding: 0;
    }
    .shopMain .el-dialog .detailsShortcut .shortcutContainer .containerContent {
        position: static;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentHeader
        .headerTitle {
        margin-top: 0;
        font-size: 1.3rem;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentMain
        .mainPurchase {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentMain
        .mainPurchase
        .purchaseOption {
        font-size: 1.1rem;
    }
    .shopMain
        .el-dialog
        .detailsShortcut
        .shortcutContainer
        .containerContent
        .contentMain
        .mainPurchase
        .purchaseOption
        span {
        display: none;
    }
}
@media (max-width: 360px) {
    .shopMain .mainContainer .containerMain .mainList .listContainer {
        grid-template-columns: 100%;
    }
    .shopMain
        .mainContainer
        .containerMain
        .mainList
        .listContainer
        .productThumb
        .thumbContent
        .contentTitle {
        height: auto;
    }
    .shopMain
        .mainContainer
        .containerMain
        .mainList
        .listContainer
        .productThumb
        .thumbContent
        .contentPrice {
        flex-direction: row;
        gap: 6px;
        height: auto;
    }
}
/* ===========
SHOP MAIN END
=========== */
/* ===========
product MAIN END
=========== */
.productMain {
    padding-block: 40px;
}
.productMain > .mainContainer {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
    display: grid;
    grid-template-columns: 76.36% 23.64%;
}
.productMain > .mainContainer > .containerMain {
    padding-left: 28px;
}
.productMain > .mainContainer > .containerMain .mainHeader {
    width: 100%;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    margin-bottom: 28px;
    justify-content: space-between;
    border: 1px solid #ececec;
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
}
.productMain > .mainContainer > .containerMain .mainHeader .headerTitle {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 2em;
}
.productMain > .mainContainer > .containerMain .mainHeader .headerBreadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.productMain
    > .mainContainer
    > .containerMain
    .mainHeader
    .headerBreadcrumb
    .breadcrumbLink {
    transition: all 0.2s;
}
.productMain
    > .mainContainer
    > .containerMain
    .mainHeader
    .headerBreadcrumb
    .breadcrumbLink:not(:last-child) {
    color: #767676;
}
.productMain
    > .mainContainer
    > .containerMain
    .mainHeader
    .headerBreadcrumb
    .breadcrumbLink:not(:last-child):hover {
    color: var(--primary);
}
.productMain > .mainContainer > .containerMain > .mainContent .contentHeader {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-bottom: 28px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic {
    width: 100%;
    padding-left: 28px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb {
    gap: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb
    .thumbMain {
    border-radius: 25px;
    border: 1px solid #ececec;
    width: 100%;
    aspect-ratio: 1;
    max-height: 412px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    cursor: pointer;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb
    .thumbMain
    img {
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    padding: 28px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb
    .thumbSlider {
    height: 92px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb
    .thumbSlider
    .swiper {
    height: 100%;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb
    .thumbSlider
    .swiper
    .swiper-slide {
    width: auto;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb
    .thumbSlider
    .sliderThumb {
    height: 100%;
    aspect-ratio: 1;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb
    .thumbSlider
    .sliderThumb.active {
    border: 2px solid var(--primary);
    background: #fff5f5;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerPic
    .picThumb
    .thumbSlider
    .sliderThumb
    img {
    width: auto;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentTitle {
    font-size: 1.5rem;
    font-weight: 750;
    margin-bottom: 8px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentRate {
    margin-bottom: 14px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentRate
    .el-icon {
    margin-right: 0 !important;
    color: var(--primary) !important;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentRate
    .el-icon:not(.is-active) {
    color: #aeaeae !important;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentRate
    .el-icon
    svg {
    width: 16px;
    height: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPrice {
    background: #fff5f5;
    border: 1px solid #ffe0e0;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPrice
    .newPrice {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 650;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPrice
    .oldPrice {
    color: #bbb;
    font-size: 0.85rem;
    text-decoration: line-through;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentDesc {
    font-size: 0.875rem;
    line-height: 1.8;
    color: #777;
    text-align: justify;
    margin-bottom: 24px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentRemain {
    background: #e8f5e9;
    border: 2px solid #c8e6c9;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #2e7d32;
    padding: 8px 16px;
    border-radius: 12px;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 0.8em;
    font-weight: 650;
    margin-bottom: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPurchase {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPurchase
    .purchaseControl {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 6px;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 12px;
    flex-shrink: 0;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPurchase
    .purchaseControl
    .controlOption {
    width: 38px;
    height: 38px;
    border: none;
    background: #fff;
    color: #333;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: grid;
    place-items: center;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPurchase
    .purchaseControl
    .controlOption:hover {
    background: var(--primary);
    color: #fff;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPurchase
    .purchaseControl
    .controlInput {
    width: 50px;
    height: 38px;
    text-align: center;
    border: none;
    background: transparent;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPurchase
    .purchaseOption {
    flex-grow: 1;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 650;
    transition: all 0.25s ease;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentPurchase
    .purchaseOption:hover {
    background: #c62828;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentOptions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentOptions
    .otpionThumb {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    transition: all 0.25s ease;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentOptions
    .otpionThumb:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentLink {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.25s ease;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentHeader
    .headerContent
    .contentLink:hover {
    transform: translateY(-3px);
}
.productMain > .mainContainer > .containerMain > .mainContent .contentMain {
    width: 100%;
    margin-bottom: 32px;
    padding: 28px;
    border: 1px solid #ececec;
    border-radius: 26px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .contianerHeader {
    margin-bottom: 24px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .contianerHeader
    .headerTabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .contianerHeader
    .headerTabs
    .tabThumb {
    padding: 12px 28px;
    border: 1px solid #ececec;
    border-radius: 9999px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    transition: all 0.15s;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .contianerHeader
    .headerTabs
    .tabThumb:active {
    transform: scale(0.95);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .contianerHeader
    .headerTabs
    .tabThumb.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb {
    display: none;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.active {
    display: block;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb
    .thumbHeader {
    display: none;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.descThumb
    .thumbContent {
    font-size: 0.9rem;
    line-height: 2;
    text-align: justify;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.descThumb
    .thumbContent
    h2 {
    margin-bottom: 16px;
    margin-top: 32px;
    margin-right: 20px;
    line-height: 35px;
    font-weight: 700;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.descThumb
    .thumbContent
    h3 {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 1.15rem;
    font-weight: 700;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.descThumb
    .thumbContent
    a {
    color: var(--primary);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.explanationThumb
    .thumbList
    .listThumb {
    padding: 14px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.explanationThumb
    .thumbList
    .listThumb:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.explanationThumb
    .thumbList
    .listThumb
    .thumbTitle {
    color: #767676;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.explanationThumb
    .thumbList
    .listThumb
    .thumbValue {
    font-weight: 650;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .formTitle {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .addOption {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    width: 100%;
    height: 44px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 20px;
    overflow-y: auto;
    scrollbar-width: none;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb {
    padding: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    background: #fafafa;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid #e6e6e6;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbHeader
    .headerUser {
    display: flex;
    align-items: center;
    gap: 12px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbHeader
    .headerUser
    .userAvatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbHeader
    .headerUser
    .userInfo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbHeader
    .headerUser
    .userInfo
    .infoName {
    font-size: 0.9rem;
    font-weight: 650;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbHeader
    .headerUser
    .userInfo
    .infoDate {
    font-size: 0.75rem;
    color: #999;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbHeader
    .headerRate
    .el-rate
    .el-rate__icon {
    margin-inline: 0;
    font-size: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbHeader
    .headerRate
    .el-rate
    .el-rate__icon.is-active {
    color: var(--primary) !important;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .contianerList
    .listComments
    .commentThumb
    .thumbContent
    .contentText {
    font-size: 0.875rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm {
    width: 100%;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formTitle {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formSubtitle {
    font-size: 0.825rem;
    font-weight: 400;
    margin-bottom: 20px;
    color: #767676;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formRate {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formRate
    .rateLabel {
    font-size: 0.85rem;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formRate
    .rateLabel
    span {
    color: var(--primary);
    vertical-align: super;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formRate
    .el-rate
    .el-rate__icon {
    margin-inline: 0;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formRate
    .el-rate
    .el-rate__icon.is-active {
    color: var(--primary) !important;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup {
    margin-bottom: 14px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    .captchaGroup {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    .captchaGroup {
    display: grid !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 28px !important;
    grid-template-columns: 1fr 46px 1fr;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    .captchaGroup
    .groupInput {
    margin-bottom: 0;
}
.captchaGroup svg {
    flex-shrink: 0;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    span {
    width: 90%;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    span
    svg {
    flex-shrink: 0;
    border-radius: 9999px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    .captchaGroup
    .groupInput {
    flex-grow: 1;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    .groupLabel {
    font-size: 0.85rem;
    display: block;
    margin-bottom: 8px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    .groupLabel
    span {
    color: var(--primary);
    vertical-align: super;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    input.groupInput {
    width: 100%;
    height: 42px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    font-size: 1rem;
    padding-inline: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    textarea.groupInput {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 26px;
    font-size: 1rem;
    padding: 12px 16px;
    resize: none;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    .groupInput {
    transition: all 0.25s ease;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    .groupInput:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formGroup
    .groupInput:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .contentThumb.commentsThumb
    .commentsContianer
    .containerForm
    .formSubmit {
    width: 192px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 9999px;
    margin: 32px auto 0;
    font-size: 0.95rem;
    font-weight: 650;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog {
    width: 94% !important;
    max-width: 472px !important;
    color: #000;
    padding: 32px 24px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm {
    position: relative;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formClose {
    position: absolute;
    top: 0;
    left: 8px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #767676;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formTitle {
    font-size: 1.45rem;
    font-weight: 750;
    text-align: center;
    color: #000;
    margin-bottom: 20px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .formRate {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #000;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .formRate
    .rateLabel {
    font-size: 0.85rem;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .formRate
    .rateLabel
    span {
    color: var(--primary);
    vertical-align: super;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .formRate
    .el-rate
    .el-rate__icon {
    margin-inline: 0;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .formRate
    .el-rate
    .el-rate__icon.is-active {
    color: var(--primary) !important;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    .groupLabel {
    display: block;
    font-size: 0.825rem;
    margin-bottom: 8px;
    padding-right: 8px;
    color: #000;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    .groupLabel
    span {
    color: var(--primary);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    .groupInput {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.25s ease;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    .groupInput:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    .groupInput:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    input.groupInput {
    height: 46px;
    margin-bottom: 16px;
    padding-inline: 16px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .contianerGroup
    textarea.groupInput {
    padding: 16px;
    resize: none;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .formSubmit {
    width: 100%;
    margin-top: 32px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 650;
    border-radius: 10px;
    transition: all 0.25s ease;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .contentMain
    .mainContainer
    .containerMain
    .mainContent
    .el-dialog
    .commentForm
    .formContainer
    .formSubmit:hover {
    background: #d41f29;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(237, 36, 46, 0.3);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .containerFooter
    .footerTitle {
    font-size: 1.75rem;
    font-weight: 650;
    color: var(--primary);
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .containerFooter
    .footerList
    .swiper {
    padding: 24px 6px;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .containerFooter
    .footerList
    .swiper
    .swiper-slide {
    width: auto !important;
}
.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .containerFooter
    .footerList
    .productThumb {
    width: 223px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.05);
}
.productMain > .mainContainer .containerAside {
    height: 100%;
}
.productMain > .mainContainer .containerAside .asideGroup {
    border-radius: 26px;
    padding: 24px 16px;
    border: 1px solid #ececec;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.05);
}
.productMain > .mainContainer .containerAside .asideGroup:first-child {
    margin-bottom: 24px;
}
.productMain > .mainContainer .containerAside .asideGroup:last-child {
    position: sticky;
    top: 108px;
}
.productMain > .mainContainer .containerAside .asideGroup .groupTitle {
    font-size: 1rem;
    font-weight: 750;
    margin-bottom: 18px;
}
.productMain > .mainContainer .containerAside .asideGroup .groupTitle img {
    width: 65px;
    margin-top: 16px;
}
.productMain > .mainContainer .containerAside .asideGroup .categoriesList {
    height: 345px;
    overflow-y: auto;
    scrollbar-width: none;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .categoriesList
    .listThumb {
    width: 100%;
    border: 1px solid #f2f3f4;
    border-radius: 10px;
    padding: 8px 12px;
    transition:
        background 0.3s,
        border 0.3s,
        border-radius 0.3s,
        box-shadow 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .categoriesList
    .listThumb:hover {
    border-color: rgba(237, 36, 46, 0.6196078431);
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.05);
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .categoriesList
    .listThumb:not(:last-child) {
    margin-bottom: 10px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .categoriesList
    .listThumb
    .thumbContent {
    display: flex;
    align-items: center;
    gap: 8px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .categoriesList
    .listThumb
    .thumbContent
    .contentIcon {
    width: 28px;
    height: 28px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .categoriesList
    .listThumb
    .thumbContent
    .contentIcon
    svg {
    width: 28px;
    height: 28px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .categoriesList
    .listThumb
    .thumbContent
    .contentTitle {
    font-size: 0.825rem;
    font-weight: 600;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .categoriesList
    .listThumb
    .thumbCounter {
    flex-shrink: 0;
    width: 45px;
    height: 27px;
    display: grid;
    place-items: center;
    background: var(--primary);
    border-radius: 9999px;
    color: #fff;
    font-size: 14px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb {
    display: flex;
    align-items: center;
    gap: 12px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb:not(:last-child) {
    margin-bottom: 30px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbPic {
    width: 106px;
    aspect-ratio: 1;
    flex-shrink: 0;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbPic
    img {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    border-radius: 9999px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    padding: 10px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbContent {
    flex-grow: 1;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbContent
    .contentTitle {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--primary);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbContent
    .contentPrice {
    font-size: 0.9rem;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbContent
    .contentRate
    .el-rate {
    height: 24px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbContent
    .contentRate
    .el-rate
    .el-icon {
    width: 15px;
    height: 15px;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbContent
    .contentRate
    .el-rate
    .el-rate__icon {
    margin-inline: 0;
}
.productMain
    > .mainContainer
    .containerAside
    .asideGroup
    .productsList
    .listThumb
    .thumbContent
    .contentRate
    .el-rate
    .el-rate__icon.is-active {
    color: var(--primary) !important;
}
.productMain .imagesModalContainer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(2%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s;
}
.productMain .imagesModalContainer.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.productMain .imagesModalContainer .modalCloseBtn {
    cursor: pointer;
    position: absolute;
    right: 42px;
    top: 42px;
    padding: 8px;
    border: 0;
    background: none;
    z-index: 9;
    font-size: 1.1rem;
    color: #767676;
    background: #fafafa;
    border-radius: 9999px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    transition: all 0.25s ease;
}
.productMain .imagesModalContainer .modalCloseBtn:hover {
    background: var(--primary);
    color: #fff;
}
.productMain .imagesModalContainer .slideCounter {
    position: absolute;
    left: 42px;
    top: 44px;
    padding: 8px;
    font-size: 0.85rem;
}
.productMain .imagesModalContainer .modalTopnav {
    width: 100%;
    padding: 36px 0 24px;
    color: #000;
}
.productMain .imagesModalContainer .modalTopnav .topNavContainer {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.productMain
    .imagesModalContainer
    .modalTopnav
    .topNavContainer
    .topNavComlumn {
    display: flex;
    align-items: center;
}
.productMain
    .imagesModalContainer
    .modalTopnav
    .topNavContainer
    .topNavComlumn
    .propertyInfoWrapper {
    margin-right: 16px;
}
.productMain
    .imagesModalContainer
    .modalTopnav
    .topNavContainer
    .topNavComlumn
    .propertyInfoWrapper
    .propertyTitle {
    font-family: "iranyekan", sans-serif;
    font-size: 16px;
    color: #131b1f;
    margin-bottom: -2px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.productMain
    .imagesModalContainer
    .modalTopnav
    .topNavContainer
    .topNavComlumn
    .propertyInfoWrapper
    .propertyOwner {
    font-family: "iranyekanL", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #131b1f;
}
.productMain
    .imagesModalContainer
    .modalTopnav
    .topNavContainer
    .topNavComlumn
    .modalButtonWrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
    border: 1px solid #ddd;
    background-color: transparent;
    color: #242424;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.productMain
    .imagesModalContainer
    .modalTopnav
    .topNavContainer
    .topNavComlumn
    .modalButtonWrapper
    .btnDivider {
    margin-right: 13px;
    margin-left: 11px;
    width: 1px;
    height: 100%;
    background-color: #ddd;
}
.productMain
    .imagesModalContainer
    .modalTopnav
    .topNavContainer
    .topNavComlumn
    .modalButtonWrapper:first-of-type {
    margin-left: 16px;
}
.productMain
    .imagesModalContainer
    .modalTopnav
    .topNavContainer
    .topNavComlumn
    .modalButtonWrapper
    .buttonTitle {
    white-space: nowrap;
}
.productMain .imagesModalContainer .modalMainSlider {
    width: 100%;
    height: calc(100% - 172px);
}
.productMain .imagesModalContainer .modalMainSlider .mainSliderContainer {
    position: relative;
    width: 90%;
    height: 100%;
    margin: 0 auto;
}
.productMain
    .imagesModalContainer
    .modalMainSlider
    .mainSliderContainer
    .navgationCustomBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 999;
    color: var(--primary);
    font-size: 1.35rem;
}
.productMain
    .imagesModalContainer
    .modalMainSlider
    .mainSliderContainer
    .navgationCustomBtn.modalPrevBtn {
    right: 0;
}
.productMain
    .imagesModalContainer
    .modalMainSlider
    .mainSliderContainer
    .navgationCustomBtn.modalNextBtn {
    left: 0;
}
.productMain
    .imagesModalContainer
    .modalMainSlider
    .mainSliderContainer
    .swiper {
    height: 100%;
}
.productMain
    .imagesModalContainer
    .modalMainSlider
    .mainSliderContainer
    .swiper
    .swiper-button-prev,
.productMain
    .imagesModalContainer
    .modalMainSlider
    .mainSliderContainer
    .swiper
    .swiper-button-next {
    display: none;
}
.productMain
    .imagesModalContainer
    .modalMainSlider
    .mainSliderContainer
    .mainImagesWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.productMain
    .imagesModalContainer
    .modalMainSlider
    .mainSliderContainer
    .mainImagesWrapper
    .mainImage {
    display: block;
    max-width: 76%;
    max-height: 90%;
    -o-object-fit: contain;
    object-fit: contain;
    cursor: url("./images/zoomCursour.svg"), pointer;
}
.productMain .imagesModalContainer .modalPaginationSlider {
    width: 100%;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer {
    width: 90%;
    height: 100%;
    margin: 0 auto;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer
    .customPagination {
    color: #131b1f;
    margin-right: 8px;
    margin-bottom: 0.25rem;
    font-size: 14px;
    font-weight: 400;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer
    .swiper
    .swiper-wrapper {
    justify-content: center;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer
    .swiper
    .swiper-slide {
    width: auto;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer
    .swiper
    .swiper-slide-thumb-active
    .miniImageWrapper::before {
    display: block;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer
    .swiper
    .swiper-slide-thumb-active
    .miniImageWrapper
    .miniImage {
    border-color: var(--primary);
    background: #fff5f5;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer
    .miniImageWrapper {
    position: relative;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer
    .miniImageWrapper::before {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary);
    z-index: 2;
    border-radius: 8px;
}
.productMain
    .imagesModalContainer
    .modalPaginationSlider
    .modalPaginationContainer
    .miniImageWrapper
    .miniImage {
    position: relative;
    width: 92px;
    height: 92px;
    -o-object-fit: contain;
    object-fit: contain;
    z-index: 1;
    cursor: pointer;
    border: 1px solid #e6e6e6;
    padding: 6px;
    border-radius: 8px;
}

.productMain
    > .mainContainer
    > .containerMain
    > .mainContent
    .containerFooter.complementaryProducts {
    display: none;
}

@media (max-width: 1024px) {
    .productMain > .mainContainer {
        grid-template-columns: 100%;
    }
    .productMain > .mainContainer > .containerMain {
        padding-left: 0;
    }

    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .containerFooter.complementaryProducts {
        display: block;
        margin-bottom: 10px;
    }
}
@media (max-width: 768px) {
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader {
        grid-template-columns: 100%;
        gap: 28px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerPic {
        padding-left: 0;
    }
    .productMain .imagesModalContainer .modalCloseBtn {
        top: 24px;
        right: 24px;
    }
    .productMain .imagesModalContainer .slideCounter {
        top: 24px;
        left: 24px;
    }
    .productMain .imagesModalContainer .modalTopnav {
        padding-top: 50px;
        padding-bottom: 24px;
    }
    .productMain
        .imagesModalContainer
        .modalTopnav
        .topNavContainer
        .topNavComlumn
        .modalButtonWrapper {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .productMain
        .imagesModalContainer
        .modalTopnav
        .topNavContainer
        .topNavComlumn
        .modalButtonWrapper:first-of-type {
        margin: 0;
    }
    .productMain
        .imagesModalContainer
        .modalTopnav
        .topNavContainer
        .topNavComlumn
        .modalButtonWrapper
        svg {
        width: 20px;
        height: 20px;
    }
    .productMain
        .imagesModalContainer
        .modalTopnav
        .topNavContainer
        .topNavComlumn
        .modalButtonWrapper
        .btnDivider,
    .productMain
        .imagesModalContainer
        .modalTopnav
        .topNavContainer
        .topNavComlumn
        .modalButtonWrapper
        .buttonTitle {
        display: none;
    }
    .productMain .imagesModalContainer .modalMainSlider {
        height: calc(100% - 180px);
    }
    .productMain .imagesModalContainer .modalMainSlider .mainSliderContainer {
        width: 100%;
    }
    .productMain
        .imagesModalContainer
        .modalMainSlider
        .mainSliderContainer
        .swiper
        :deep(.swiper-button-prev),
    .productMain
        .imagesModalContainer
        .modalMainSlider
        .mainSliderContainer
        .swiper
        :deep(.swiper-button-next) {
        display: none;
    }
    .productMain
        .imagesModalContainer
        .modalMainSlider
        .mainSliderContainer
        .navgationCustomBtn {
        display: none;
    }
    .productMain
        .imagesModalContainer
        .modalMainSlider
        .mainSliderContainer
        .mainImagesWrapper
        .mainImage {
        max-width: 100%;
        border-radius: 0;
    }
    .productMain .imagesModalContainer .modalPaginationSlider {
        height: 104px;
    }
    .productMain
        .imagesModalContainer
        .modalPaginationSlider
        .modalPaginationContainer {
        width: 100%;
    }
    .productMain
        .imagesModalContainer
        .modalPaginationSlider
        .modalPaginationContainer
        .swiper {
        padding-inline: 5%;
    }
    .productMain
        .imagesModalContainer
        .modalPaginationSlider
        .modalPaginationContainer
        .swiper
        .swiper-wrapper {
        justify-content: flex-start;
    }
}
@media (max-width: 480px) {
    .productMain {
        padding-block: 28px;
    }
    .productMain > .mainContainer > .containerMain .mainHeader {
        border-radius: 16px;
        margin-bottom: 20px;
    }
    .productMain > .mainContainer > .containerMain .mainHeader .headerTitle {
        display: none;
    }
    .productMain
        > .mainContainer
        > .containerMain
        .mainHeader
        .headerBreadcrumb {
        font-size: 0.75rem;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader {
        gap: 20px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerPic
        .picThumb
        .thumbMain {
        min-height: auto;
        aspect-ratio: 3/2;
        border-radius: 16px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerPic
        .picThumb
        .thumbSlider {
        margin-inline: -16px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerPic
        .picThumb
        .thumbSlider
        .sliderSwiper {
        padding-inline: 16px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerContent
        .contentTitle {
        font-size: 1.35rem;
        margin-bottom: 0;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerContent
        .contentRate {
        margin-bottom: 10px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerContent
        .contentPrice {
        margin-bottom: 18px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerContent
        .contentDesc {
        font-size: 0.825rem;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerContent
        .contentPurchase
        .purchaseOption {
        font-size: 0.825rem;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerContent
        .contentOptions
        .otpionThumb {
        font-size: 0.8rem;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentHeader
        .headerContent
        .contentLink {
        font-size: 0.9rem;
    }
    .productMain > .mainContainer > .containerMain > .mainContent .contentMain {
        padding: 0;
        border: none;
        border-radius: 0;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .contianerHeader {
        display: none;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb {
        display: block;
        border: 1px solid #ececec;
        border-radius: 16px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb:not(:last-child) {
        margin-bottom: 20px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb.active
        .thumbHeader
        .headerIcon
        i {
        transform: rotate(180deg);
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb.active
        .thumbMain {
        grid-template-rows: 1fr;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb
        .thumbHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb
        .thumbHeader
        .headerTitle {
        font-size: 0.95rem;
        font-weight: 600;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb
        .thumbHeader
        .headerIcon {
        font-size: 0.7rem;
        color: #767676;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb
        .thumbHeader
        .headerIcon
        i {
        transition: all 0.25s ease;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb
        .thumbMain {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: all 0.25s ease;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb
        .thumbMain
        .mainContainer {
        overflow: hidden;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb
        .thumbMain
        .mainContainer
        .containerContent {
        overflow: hidden;
        padding: 0 16px 16px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb.descThumb
        .thumbContent {
        font-size: 0.825rem;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb.explanationThumb
        .thumbList
        .listThumb {
        font-size: 0.825rem;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb.commentsThumb
        .commentsContianer {
        grid-template-columns: 100%;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb.commentsThumb
        .commentsContianer
        .contianerList
        .formTitle {
        display: none;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb.commentsThumb
        .commentsContianer
        .contianerList
        .addOption {
        display: flex;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .contentMain
        .mainContainer
        .containerMain
        .mainContent
        .contentThumb.commentsThumb
        .commentsContianer
        .containerForm {
        display: none;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .containerFooter
        .footerTitle {
        font-size: 1.35rem;
        margin-bottom: -8px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .containerFooter
        .footerList {
        margin-inline: -16px;
    }
    .productMain
        > .mainContainer
        > .containerMain
        > .mainContent
        .containerFooter
        .footerList
        .swiper {
        padding-inline: 16px;
    }
    .productMain > .mainContainer .containerAside {
        display: none;
    }
}
/* ===========
product MAIN END
=========== */
/* ===========
BLOGS MAIN START
=========== */
.blogsMain {
    padding-block: 40px;
}
.blogsMain .mainContainer {
    width: 100%;
    max-width: 1350px;
    padding-inline: 16px;
    margin-inline: auto;
}
.blogsMain .mainContainer .containerList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.blogsMain .mainContainer .containerList .listThumb {
    width: 100%;
    position: relative;
    padding-top: 16px;
    transition: all 0.25s ease;
    cursor: pointer;
}
.blogsMain .mainContainer .containerList .listThumb:hover {
    transform: translateY(-8px);
}
.blogsMain .mainContainer .containerList .listThumb:hover .thumbPic img {
    transform: scale(1.05);
}
.blogsMain .mainContainer .containerList .listThumb:hover .thumbContent {
    box-shadow: -8px 15px 25px 0 rgba(0, 0, 0, 0.12);
}
.blogsMain
    .mainContainer
    .containerList
    .listThumb:hover
    .thumbContent
    .contentLink {
    color: var(--primary);
}
.blogsMain
    .mainContainer
    .containerList
    .listThumb:hover
    .thumbContent
    .contentLink
    i {
    transform: translateX(-4px);
}
.blogsMain .mainContainer .containerList .listThumb .thumbCreated {
    position: absolute;
    left: 16px;
    top: 0;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 0 0 16px 0;
    border-top: 3px solid var(--primary);
    background: #fff;
    z-index: 2;
}
.blogsMain .mainContainer .containerList .listThumb .thumbCreated .createdDate {
    line-height: 28px;
    font-size: 1.2rem;
    font-weight: 750;
}
.blogsMain
    .mainContainer
    .containerList
    .listThumb
    .thumbCreated
    .createdMonth {
    line-height: 23px;
    font-size: 0.85rem;
}
.blogsMain .mainContainer .containerList .listThumb .thumbPic {
    width: 100%;
    aspect-ratio: 3/2;
    max-height: 192px;
    overflow: hidden;
    border-radius: 16px;
}
.blogsMain .mainContainer .containerList .listThumb .thumbPic img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transition: all 0.25s ease;
}
.blogsMain .mainContainer .containerList .listThumb .thumbContent {
    width: calc(100% - 21px);
    background: #fff;
    box-shadow: -5px 10px 10px 0 #f2f2f2;
    border-radius: 16px;
    padding: 0 0 16px 16px;
    margin-top: -28px;
    position: relative;
    z-index: 1;
    transition: all 0.25s ease;
}
.blogsMain
    .mainContainer
    .containerList
    .listThumb
    .thumbContent
    .contentDetails {
    width: -moz-fit-content;
    width: fit-content;
    padding: 8px 24px;
    border-radius: 0 16px 0 16px;
    background: var(--primary);
    display: flex;
    align-items: center;
}
.blogsMain
    .mainContainer
    .containerList
    .listThumb
    .thumbContent
    .contentDetails
    .detailsThumb {
    font-size: 0.875rem;
    color: #fff;
}
.blogsMain
    .mainContainer
    .containerList
    .listThumb
    .thumbContent
    .contentDetails
    .detailsThumb:first-child {
    display: inline-flex;
    align-items: center;
}
/*.blogsMain .mainContainer .containerList .listThumb .thumbContent .contentDetails .detailsThumb:first-child::after {*/
/*  content: "";*/
/*  display: block;*/
/*  margin-inline: 8px;*/
/*  height: 12px;*/
/*  background: #000;*/
/*  width: 1px;*/
/*  flex-shrink: 0;*/
/*}*/
.blogsMain
    .mainContainer
    .containerList
    .listThumb
    .thumbContent
    .contentTitle {
    padding: 10px 16px 10px 0;
    font-size: 1.175rem;
    font-weight: 750;
    line-height: 2rem;
}
.blogsMain .mainContainer .containerList .listThumb .thumbContent .contentDesc {
    padding-right: 16px;
    margin-bottom: 10px;
    font-size: 0.825rem;
    color: #767676;
    line-height: 1.8;
    text-align: justify;
}
.blogsMain .mainContainer .containerList .listThumb .thumbContent .contentLink {
    padding-right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}
.blogsMain
    .mainContainer
    .containerList
    .listThumb
    .thumbContent
    .contentLink
    span {
    font-size: 0.875rem;
    font-weight: 750;
}
.blogsMain
    .mainContainer
    .containerList
    .listThumb
    .thumbContent
    .contentLink
    i {
    font-size: 0.8rem;
    transition: all 0.25s ease;
}

@media (max-width: 1024px) {
    .blogsMain .mainContainer .containerList {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .blogsMain .mainContainer .containerList {
        grid-template-columns: 100%;
    }
    .blogsMain
        .mainContainer
        .containerList
        .listThumb
        .thumbContent
        .contentDetails
        .detailsThumb {
        font-size: 0.825rem;
    }
    .blogsMain
        .mainContainer
        .containerList
        .listThumb
        .thumbContent
        .contentTitle {
        font-size: 1.05rem;
        padding-bottom: 4px;
    }
    .blogsMain
        .mainContainer
        .containerList
        .listThumb
        .thumbContent
        .contentDesc {
        font-size: 0.75rem;
    }
}
/* ===========
BLOGS MAIN END
=========== */
/* ===========
DETAILS MAIN END
=========== */
.detailsMain {
    padding-block: 40px;
}
.detailsMain .mainContianer {
    width: 100%;
    max-width: 1350px;
    padding-inline: 16px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 75% 25%;
}
.detailsMain .mainContianer .containerMain {
    padding-left: 24px;
}
.detailsMain .mainContianer .containerMain .mainContent .contentHeader {
    margin-bottom: 28px;
}
.detailsMain
    .mainContianer
    .containerMain
    .mainContent
    .contentHeader
    .headerPic {
    width: 100%;
}
.detailsMain
    .mainContianer
    .containerMain
    .mainContent
    .contentHeader
    .headerPic
    img {
    width: 100%;
    border-radius: 26px;
}
.detailsMain
    .mainContianer
    .containerMain
    .mainContent
    .contentHeader
    .headerContent {
    width: calc(100% - 196px);
    margin-inline: auto;
    background: #fff;
    border-radius: 26px;
    box-shadow: 5px 5px 45px 0 rgba(0, 0, 0, 0.1);
    padding: 18px 10px 28px;
    text-align: center;
    margin-top: -58px;
    position: relative;
    z-index: 1;
}
.detailsMain
    .mainContianer
    .containerMain
    .mainContent
    .contentHeader
    .headerContent
    .contentTitle {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 2em;
    margin-bottom: 6px;
}
.detailsMain
    .mainContianer
    .containerMain
    .mainContent
    .contentHeader
    .headerContent
    .contentDetails {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.detailsMain
    .mainContianer
    .containerMain
    .mainContent
    .contentHeader
    .headerContent
    .contentDetails
    .detailThumb {
    display: flex;
    align-items: center;
    gap: 8px;
}
.detailsMain
    .mainContianer
    .containerMain
    .mainContent
    .contentHeader
    .headerContent
    .contentDetails
    .detailThumb
    i {
    color: var(--primary);
    font-size: 0.9rem;
}
.detailsMain
    .mainContianer
    .containerMain
    .mainContent
    .contentHeader
    .headerContent
    .contentDetails
    .detailThumb
    span {
    font-size: 0.85rem;
}
.detailsMain .mainContianer .containerMain .mainContent .contentMain {
    width: 100%;
}
.detailsMain .mainContianer .containerMain .mainContent .contentMain .mainDesc {
    font-size: 0.875rem;
    line-height: 2.25;
    text-align: justify;
}
.detailsMain .mainContianer .containerAside .asideContainer {
    position: sticky;
    top: 108px;
    width: 100%;
    background: #f9f9f9;
    border-radius: 16px;
    padding: 28px 14px;
}
.detailsMain .mainContianer .containerAside .asideContainer .containerTitle {
    font-size: 1.05rem;
    font-weight: 750;
    margin-bottom: 24px;
}
.detailsMain
    .mainContianer
    .containerAside
    .asideContainer
    .containerTitle
    img {
    width: 65px;
    margin-top: 16px;
}
.detailsMain
    .mainContianer
    .containerAside
    .asideContainer
    .contianerList
    .listThumb {
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid #dfdfdf;
    display: flex;
    align-items: center;
    gap: 20px;
}
.detailsMain
    .mainContianer
    .containerAside
    .asideContainer
    .contianerList
    .listThumb:not(:last-child) {
    margin-bottom: 20px;
}
.detailsMain
    .mainContianer
    .containerAside
    .asideContainer
    .contianerList
    .listThumb
    .thumbPic {
    width: 82px;
    height: 82px;
    flex-shrink: 0;
}
.detailsMain
    .mainContianer
    .containerAside
    .asideContainer
    .contianerList
    .listThumb
    .thumbPic
    img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 9999px;
}
.detailsMain
    .mainContianer
    .containerAside
    .asideContainer
    .contianerList
    .listThumb
    .thumbContent {
    flex-grow: 1;
}
.detailsMain
    .mainContianer
    .containerAside
    .asideContainer
    .contianerList
    .listThumb
    .thumbContent
    .contentTitle {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.65;
    margin-bottom: 10px;
}
.detailsMain
    .mainContianer
    .containerAside
    .asideContainer
    .contianerList
    .listThumb
    .thumbContent
    .contentDate {
    font-size: 0.75rem;
    color: var(--primary);
}

@media (max-width: 1024px) {
    .detailsMain .mainContianer {
        grid-template-columns: 100%;
        gap: 24px;
    }
    .detailsMain .mainContianer .containerMain {
        padding-left: 0;
    }
}
@media (max-width: 768px) {
    .detailsMain
        .mainContianer
        .containerMain
        .mainContent
        .contentHeader
        .headerContent {
        width: 90%;
    }
    .detailsMain
        .mainContianer
        .containerMain
        .mainContent
        .contentHeader
        .headerContent
        .contentTitle {
        font-size: 1.45rem;
    }
    .detailsMain
        .mainContianer
        .containerMain
        .mainContent
        .contentHeader
        .headerContent
        .contentDetails
        .detailThumb
        span {
        font-size: 0.8rem;
    }
}
@media (max-width: 480px) {
    .detailsMain
        .mainContianer
        .containerMain
        .mainContent
        .contentHeader
        .headerContent {
        margin-top: -24px;
        padding: 11px 9px 18px;
    }
    .detailsMain
        .mainContianer
        .containerMain
        .mainContent
        .contentHeader
        .headerContent
        .contentTitle {
        font-size: 1.1rem;
    }
    .detailsMain
        .mainContianer
        .containerMain
        .mainContent
        .contentHeader
        .headerContent
        .contentDetails {
        gap: 16px;
    }
    .detailsMain
        .mainContianer
        .containerMain
        .mainContent
        .contentHeader
        .headerContent
        .contentDetails
        .detailThumb
        span {
        font-size: 0.75rem;
    }
}
/* ===========
DETAILS MAIN END
=========== */
/* ===========
ABOUT US MAIN END
=========== */
.aboutMain {
    padding-block: 40px;
}
.aboutMain > .mainContainer > .containerHeader {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    margin-block: 32px;
    max-width: 1350px;
    padding-inline: 16px;
    margin-inline: auto;
}
.aboutMain > .mainContainer > .containerHeader .headerPic {
    position: relative;
    width: 100%;
    padding-left: 42px;
}
.aboutMain > .mainContainer > .containerHeader .headerPic > img {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}
.aboutMain > .mainContainer > .containerHeader .headerPic .picBg {
    position: absolute;
    left: 140px;
    bottom: 100px;
    z-index: 0;
}
.aboutMain > .mainContainer > .containerHeader .headerPic .picBg img {
    width: 260px;
}
.aboutMain > .mainContainer > .containerHeader .headerContent .contentTitle {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 18px;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentTitle
    img {
    width: 65px;
    margin-top: 14px;
}
.aboutMain > .mainContainer > .containerHeader .headerContent .contentDesc {
    font-size: 0.875rem;
    line-height: 1.9;
    color: #767676;
    text-align: justify;
    margin-bottom: 20px;
}
.aboutMain > .mainContainer > .containerHeader .headerContent .contentFeatures {
    margin-bottom: 28px;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentFeatures
    .featuresThumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentFeatures
    .featuresThumb:not(:last-child) {
    margin-bottom: 8px;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentFeatures
    .featuresThumb
    i {
    color: var(--primary);
}
.aboutMain > .mainContainer > .containerHeader .headerContent .contentContact {
    display: flex;
    align-items: center;
    gap: 42px;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentContact
    .contactInfo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentContact
    .contactInfo
    .infoIcon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentContact
    .contactInfo
    .infoIcon
    img {
    width: 100%;
    height: 100%;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentContact
    .contactInfo
    .infoContent
    .contentMail {
    font-size: 1.05rem;
    font-weight: 750;
    display: block;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentContact
    .contactInfo
    .infoContent
    .contentTel {
    font-weight: 1rem;
    font-weight: 700;
    color: #666;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentContact
    .contactOption
    .optionThumb {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentContact
    .contactOption
    .optionThumb:hover {
    background: var(--primary);
    color: #fff;
}
.aboutMain
    > .mainContainer
    > .containerHeader
    .headerContent
    .contentContact
    .contactOption
    .optionThumb
    span {
    font-size: 0.95rem;
}
.aboutMain > .mainContainer > .containerMain {
    position: relative;
    padding-block: 70px;
    background: #f9f9f9;
}
.aboutMain > .mainContainer > .containerMain .mainBg {
    position: absolute;
    inset: 0;
    background-image: url("../images/home1-section-3.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}
.aboutMain > .mainContainer > .containerMain .mainContainer {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
}
.aboutMain > .mainContainer > .containerMain .mainContainer .containerHeader {
    margin-bottom: 38px;
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerHeader
    .headerDesc {
    margin-bottom: 10px;
    text-align: center;
    font-size: 1rem;
    color: var(--primary);
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerHeader
    .headerTitle {
    font-size: 1.75rem;
    font-weight: 800;
    text-align: center;
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerHeader
    .headerTitle
    img {
    width: 75px;
    margin-top: 28px;
    margin-inline: auto;
}
.aboutMain > .mainContainer > .containerMain .mainContainer .containerContent {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerContent
    .contentThumb {
    padding: 14px 14px 18px;
    background: #fff;
    border-radius: 16px;
    border-bottom: 3px solid var(--primary);
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerContent
    .contentThumb
    .thumbIcon {
    width: 67.5px;
    height: 67.5px;
    margin-bottom: 24px;
    margin-inline: auto;
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerContent
    .contentThumb
    .thumbIcon
    img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerContent
    .contentThumb
    .thumbContent {
    text-align: center;
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerContent
    .contentThumb
    .thumbContent
    .contentTitle {
    font-size: 1.15rem;
    font-weight: 750;
    margin-bottom: 8px;
}
.aboutMain
    > .mainContainer
    > .containerMain
    .mainContainer
    .containerContent
    .contentThumb
    .thumbContent
    .contentDesc {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #767676;
}
.aboutMain > .mainContainer .containerFooter {
    padding-top: 56px;
}
.aboutMain > .mainContainer .containerFooter .footerBanner {
    margin-block: 56px;
    width: 100%;
    max-width: 1350px;
    padding-inline: 16px;
    margin-inline: auto;
}
.aboutMain > .mainContainer .containerFooter .footerBanner .bannerContainer {
    border-radius: 26px;
    background-image: linear-gradient(100deg, #9033c2 25%, #f4662a 100%);
    height: 159px;
    display: grid;
    grid-template-columns: 22.973% 1fr 19.883%;
    align-items: center;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBanner
    .bannerContainer
    .continerPic {
    width: 100%;
    height: 100%;
    position: relative;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBanner
    .bannerContainer
    .continerPic
    img {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBanner
    .bannerContainer
    .contentDesc {
    color: #fff;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBanner
    .bannerContainer
    .continaerOption {
    display: flex;
    align-items: center;
    padding: 14px;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBanner
    .bannerContainer
    .continaerOption
    .optionThumb {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: white;
    border-radius: 12px;
    color: #9d39ae;
    font-size: 0.9rem;
    text-align: center;
}
.aboutMain > .mainContainer .containerFooter .footerBlogs .blogsContainer {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerHeader {
    margin-bottom: 38px;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerHeader
    .headerDesc {
    margin-bottom: 10px;
    text-align: center;
    font-size: 1rem;
    color: var(--primary);
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerHeader
    .headerTitle {
    font-size: 1.75rem;
    font-weight: 800;
    text-align: center;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerHeader
    .headerTitle
    img {
    width: 75px;
    margin-top: 28px;
    margin-inline: auto;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb {
    width: 100%;
    position: relative;
    padding-top: 16px;
    transition: all 0.25s ease;
    cursor: pointer;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb:hover {
    transform: translateY(-8px);
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb:hover
    .thumbPic
    img {
    transform: scale(1.05);
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb:hover
    .thumbContent {
    box-shadow: -8px 15px 25px 0 rgba(0, 0, 0, 0.12);
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb:hover
    .thumbContent
    .contentLink {
    color: var(--primary);
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb:hover
    .thumbContent
    .contentLink
    i {
    transform: translateX(-4px);
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbCreated {
    position: absolute;
    left: 16px;
    top: 0;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 0 0 16px 0;
    border-top: 3px solid var(--primary);
    background: #fff;
    z-index: 2;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbCreated
    .createdDate {
    line-height: 28px;
    font-size: 1.2rem;
    font-weight: 750;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbCreated
    .createdMonth {
    line-height: 23px;
    font-size: 0.85rem;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbPic {
    width: 100%;
    aspect-ratio: 3/2;
    max-height: 192px;
    overflow: hidden;
    border-radius: 16px;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbPic
    img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transition: all 0.25s ease;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent {
    width: calc(100% - 21px);
    background: #fff;
    box-shadow: -5px 10px 10px 0 #f2f2f2;
    border-radius: 16px;
    padding: 0 0 16px 16px;
    margin-top: -28px;
    position: relative;
    z-index: 1;
    transition: all 0.25s ease;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentDetails {
    width: -moz-fit-content;
    width: fit-content;
    padding: 8px 24px;
    border-radius: 0 16px 0 16px;
    background: var(--primary);
    display: flex;
    align-items: center;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentDetails
    .detailsThumb {
    font-size: 0.875rem;
    color: #fff;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentDetails
    .detailsThumb:first-child {
    display: inline-flex;
    align-items: center;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentDetails
    .detailsThumb:first-child::after {
    content: "";
    display: block;
    margin-inline: 8px;
    height: 12px;
    background: #000;
    width: 1px;
    flex-shrink: 0;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentTitle {
    padding: 10px 16px 10px 0;
    font-size: 1.175rem;
    font-weight: 750;
    line-height: 2rem;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentDesc {
    padding-right: 16px;
    margin-bottom: 10px;
    font-size: 0.825rem;
    color: #767676;
    line-height: 1.8;
    text-align: justify;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentLink {
    padding-right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentLink
    span {
    font-size: 0.875rem;
    font-weight: 750;
}
.aboutMain
    > .mainContainer
    .containerFooter
    .footerBlogs
    .blogsContainer
    .containerMain
    .mainBlogs
    .blogThumb
    .thumbContent
    .contentLink
    i {
    font-size: 0.8rem;
    transition: all 0.25s ease;
}

@media (max-width: 1024px) {
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerMain
        .mainBlogs {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 780px) {
    .aboutMain > .mainContainer > .containerHeader {
        margin-top: 0;
        display: flex;
        flex-direction: column-reverse;
        gap: 42px;
        margin-bottom: 12px;
    }
    .aboutMain > .mainContainer > .containerHeader .headerPic {
        padding-left: 0;
    }
    .aboutMain > .mainContainer > .containerHeader .headerPic > img {
        width: 90%;
    }
    .aboutMain > .mainContainer > .containerHeader .headerPic .picBg {
        left: 24px;
    }
    .aboutMain > .mainContainer > .containerHeader .headerPic .picBg img {
        width: 192px;
    }
    .aboutMain
        > .mainContainer
        > .containerHeader
        .headerContent
        .contentTitle {
        font-size: 1.5rem;
    }
    .aboutMain > .mainContainer > .containerHeader .headerContent .contentDesc {
        font-size: 0.85rem;
    }
    .aboutMain
        > .mainContainer
        > .containerHeader
        .headerContent
        .contentFeatures {
        margin-bottom: 24px;
    }
    .aboutMain
        > .mainContainer
        > .containerHeader
        .headerContent
        .contentFeatures
        .featuresThumb {
        font-size: 0.9rem;
    }
    .aboutMain
        > .mainContainer
        > .containerHeader
        .headerContent
        .contentContact {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .aboutMain
        > .mainContainer
        > .containerHeader
        .headerContent
        .contentContact
        .contactOption {
        width: 100%;
    }
    .aboutMain
        > .mainContainer
        > .containerHeader
        .headerContent
        .contentContact
        .contactOption
        .optionThumb {
        justify-content: center;
    }
    .aboutMain > .mainContainer > .containerMain {
        padding-block: 42px;
    }
    .aboutMain
        > .mainContainer
        > .containerMain
        .mainContainer
        .containerHeader {
        margin-bottom: 28px;
    }
    .aboutMain
        > .mainContainer
        > .containerMain
        .mainContainer
        .containerHeader
        .headerDesc {
        font-size: 0.9rem;
    }
    .aboutMain
        > .mainContainer
        > .containerMain
        .mainContainer
        .containerHeader
        .headerTitle {
        font-size: 1.5rem;
    }
    .aboutMain
        > .mainContainer
        > .containerMain
        .mainContainer
        .containerHeader
        .headerTitle
        img {
        margin-top: 22px;
    }
    .aboutMain
        > .mainContainer
        > .containerMain
        .mainContainer
        .containerContent {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .aboutMain
        > .mainContainer
        > .containerMain
        .mainContainer
        .containerContent
        .contentThumb
        .thumbIcon {
        width: 42px;
        height: 42px;
        margin-bottom: 16px;
    }
    .aboutMain
        > .mainContainer
        > .containerMain
        .mainContainer
        .containerContent
        .contentThumb
        .thumbContent
        .contentTitle {
        font-size: 1rem;
    }
    .aboutMain
        > .mainContainer
        > .containerMain
        .mainContainer
        .containerContent
        .contentThumb
        .thumbContent
        .contentDesc {
        font-size: 0.8rem;
    }
    .aboutMain > .mainContainer .containerFooter {
        padding-top: 32px;
    }
    .aboutMain > .mainContainer .containerFooter .footerBanner {
        margin-block: 32px 42px;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBanner
        .bannerContainer {
        display: block;
        height: auto;
        padding: 16px;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBanner
        .bannerContainer
        .continerPic {
        margin-top: -42px;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBanner
        .bannerContainer
        .continerPic
        img {
        position: static;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBanner
        .bannerContainer
        .continaerOption {
        justify-content: center;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerHeader {
        margin-bottom: 28px;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerHeader
        .headerDesc {
        font-size: 0.9rem;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerHeader
        .headerTitle {
        font-size: 1.5rem;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerHeader
        .headerTitle
        img {
        margin-top: 22px;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerMain
        .mainBlogs {
        grid-template-columns: 100%;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerMain
        .mainBlogs
        .blogThumb
        .thumbContent
        .contentDetails
        .detailsThumb {
        font-size: 0.825rem;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerMain
        .mainBlogs
        .blogThumb
        .thumbContent
        .contentTitle {
        font-size: 1.05rem;
        padding-bottom: 4px;
    }
    .aboutMain
        > .mainContainer
        .containerFooter
        .footerBlogs
        .blogsContainer
        .containerMain
        .mainBlogs
        .blogThumb
        .thumbContent
        .contentDesc {
        font-size: 0.75rem;
    }
}
/* ===========
ABOUT US MAIN END
=========== */
/* ===========
CONTACT US MAIN END
=========== */
.contactMain {
    padding-block: 40px;
}
.contactMain .mainContainer {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
}
.contactMain .mainContainer .containerHeader {
    margin-bottom: 28px;
}
.contactMain .mainContainer .containerHeader .headerContent .contentHeader {
    margin-bottom: 42px;
    text-align: center;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentHeader
    .headerMiniTitle {
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 8px;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentHeader
    .headerTitle {
    font-size: 1.85rem;
    font-weight: 800;
    margin-bottom: 16px;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentHeader
    .headerTitle
    span {
    color: var(--primary);
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentHeader
    .headerDesc {
    max-width: 758px;
    margin-inline: auto;
    font-size: 0.9rem;
    color: #767676;
    line-height: 1.8;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentHeader
    .headerIcon {
    width: 75px;
    margin: 20px auto 0;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentMain
    .mainContacts {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    max-width: 1024px;
    margin-inline: auto;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentMain
    .mainContacts
    .contactThumb {
    width: calc((100% - 56px) / 3);
    background: #fff;
    box-shadow: 0 0 10px 0 #f1f1f1;
    border-bottom: 5px solid var(--primary);
    border-radius: 16px;
    padding-block: 14px;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentMain
    .mainContacts
    .contactThumb
    .thumbIcon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentMain
    .mainContacts
    .contactThumb
    .thumbIcon
    img {
    width: 100%;
    height: 100%;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentMain
    .mainContacts
    .contactThumb
    .thumbContact {
    text-align: center;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentMain
    .mainContacts
    .contactThumb
    .thumbContact
    .contactTitle {
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 2em;
    color: #222543;
    margin-bottom: 10px;
}
.contactMain
    .mainContainer
    .containerHeader
    .headerContent
    .contentMain
    .mainContacts
    .contactThumb
    .thumbContact
    .contactDesc {
    color: #666;
    font-size: 0.925rem;
}
.contactMain .mainContainer .containerMain {
    padding-block: 48px;
}
.contactMain .mainContainer .containerMain .containerContainer {
    width: 100%;
    height: 463px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent {
    width: 100%;
    height: 100%;
    background-image: url("../images/contact-bg-min.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 50px 50px 0;
    padding: 28px 84px 28px 98px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentMiniTitle {
    font-size: 1rem;
    margin-bottom: 16px;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentTitle {
    font-size: 2rem;
    font-weight: 750;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentTitle::after {
    content: "";
    display: block;
    width: 98px;
    height: 4px;
    border-block: 1px solid #fff;
    position: absolute;
    right: 0;
    bottom: 0;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentDesc {
    font-size: 0.875rem;
    line-height: 1.8;
    margin-bottom: 24px;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentContact {
    display: flex;
    align-items: center;
    gap: 16px;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentContact
    .contactIcon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentContact
    .contactIcon
    img {
    width: 100%;
    height: 100%;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentContact
    .contactInfo
    .infoTitle {
    font-size: 0.9rem;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerContent
    .contentContact
    .contactInfo
    .infoValue {
    font-size: 1.25rem;
    font-weight: 700;
}
.contactMain .mainContainer .containerMain .containerContainer .containerMap {
    border: 1px solid #d4d4d4;
    border-right: none;
    border-radius: 50px 0 0 50px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.contactMain
    .mainContainer
    .containerMain
    .containerContainer
    .containerMap
    iframe {
    width: 100% !important;
    height: 100% !important;
}
.contactMain .mainContainer .containerFooter {
    margin-top: 24px;
}
.contactMain .mainContainer .containerFooter .footerFaq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
}
.contactMain .mainContainer .containerFooter .footerFaq .faqContent {
    width: 100%;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentMiniTitle {
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 8px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentTitle {
    font-size: 1.85rem;
    font-weight: 800;
    margin-bottom: 20px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentTitle
    img {
    width: 65px;
    margin-top: 16px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentDesc {
    font-size: 0.95rem;
    color: #767676;
    line-height: 1.8;
    margin-bottom: 24px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact {
    display: flex;
    align-items: center;
    gap: 42px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact
    .contactInfo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact
    .contactInfo
    .infoIcon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact
    .contactInfo
    .infoIcon
    img {
    width: 100%;
    height: 100%;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact
    .contactInfo
    .infoContent
    .contentMail {
    font-size: 1.05rem;
    font-weight: 750;
    display: block;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact
    .contactInfo
    .infoContent
    .contentTel {
    font-weight: 1rem;
    font-weight: 700;
    color: #666;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact
    .contactOption
    .optionThumb {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact
    .contactOption
    .optionThumb:hover {
    background: var(--primary);
    color: #fff;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqContent
    .contentContact
    .contactOption
    .optionThumb
    span {
    font-size: 0.95rem;
}
.contactMain .mainContainer .containerFooter .footerFaq .faqList .contactList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb.active
    .thumbHeader {
    border-right: 3px solid var(--primary);
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb.active
    .thumbHeader
    .headerIcon
    i {
    transform: rotate(-90deg);
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb.active
    .thumbMain {
    grid-template-rows: 1fr;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb
    .thumbHeader {
    background: #fbfbfb;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    transition: all 0.25s ease;
    cursor: pointer;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb
    .thumbHeader
    .headerTitle {
    font-size: 0.9rem;
    font-weight: 700;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb
    .thumbHeader
    .headerIcon {
    height: 14px;
    margin-top: -7px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb
    .thumbHeader
    .headerIcon
    i {
    font-size: 0.85rem;
    font-weight: 700;
    color: #767676;
    transition: all 0.25s ease;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb
    .thumbMain {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: all 0.25s ease;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb
    .thumbMain
    .mainWrapper {
    overflow: hidden;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb
    .thumbMain
    .mainWrapper
    .wrapperContainer {
    overflow: hidden;
    padding-top: 8px;
}
.contactMain
    .mainContainer
    .containerFooter
    .footerFaq
    .faqList
    .contactList
    .listThumb
    .thumbMain
    .mainWrapper
    .wrapperContainer
    .containerContent {
    background: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 0.9rem;
    text-align: justify;
    line-height: 1.8;
    color: #767676;
    border: 1px solid #dee2e6;
}

@media (max-width: 780px) {
    .contactMain
        .mainContainer
        .containerHeader
        .headerContent
        .contentHeader
        .headerMiniTitle {
        font-size: 1.05rem;
    }
    .contactMain
        .mainContainer
        .containerHeader
        .headerContent
        .contentHeader
        .headerTitle {
        font-size: 1.5rem;
    }
    .contactMain
        .mainContainer
        .containerHeader
        .headerContent
        .contentHeader
        .headerDesc {
        font-size: 0.875rem;
    }
    .contactMain
        .mainContainer
        .containerHeader
        .headerContent
        .contentMain
        .mainContacts
        .contactThumb {
        width: calc((100% - 28px) / 2);
        padding-block: 24px;
    }
    .contactMain
        .mainContainer
        .containerHeader
        .headerContent
        .contentMain
        .mainContacts
        .contactThumb
        .thumbContact
        .contactTitle {
        font-size: 1.1rem;
    }
    .contactMain
        .mainContainer
        .containerHeader
        .headerContent
        .contentMain
        .mainContacts
        .contactThumb
        .thumbContact
        .contactDesc {
        font-size: 0.9rem;
    }
    .contactMain .mainContainer .containerMain {
        padding-block: 32px;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerContent {
        padding-inline: 24px;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerContent
        .contentMiniTitle {
        font-size: 0.9rem;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerContent
        .contentTitle {
        font-size: 1.8rem;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerContent
        .contentDesc {
        font-size: 0.825rem;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerContent
        .contentContact
        .contactIcon {
        width: 32px;
        height: 32px;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerContent
        .contentContact
        .contactInfo
        .infoTitle {
        font-size: 0.825rem;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerContent
        .contentContact
        .contactInfo
        .infoValue {
        font-size: 1rem;
    }
    .contactMain .mainContainer .containerFooter .footerFaq {
        grid-template-columns: 100%;
        gap: 28px;
    }
    .contactMain
        .mainContainer
        .containerFooter
        .footerFaq
        .faqContent
        .contentMiniTitle {
        font-size: 1.05rem;
    }
    .contactMain
        .mainContainer
        .containerFooter
        .footerFaq
        .faqContent
        .contentTitle {
        font-size: 1.5rem;
    }
    .contactMain
        .mainContainer
        .containerFooter
        .footerFaq
        .faqContent
        .contentDesc {
        font-size: 0.875rem;
    }
}
@media (max-width: 480px) {
    .contactMain
        .mainContainer
        .containerHeader
        .headerContent
        .contentMain
        .mainContacts {
        gap: 18px;
    }
    .contactMain
        .mainContainer
        .containerHeader
        .headerContent
        .contentMain
        .mainContacts
        .contactThumb {
        width: 100%;
        border: 1px solid #e6e6e6;
    }
    .contactMain .mainContainer .containerMain {
        padding-block: 24px;
    }
    .contactMain .mainContainer .containerMain .containerContainer {
        grid-template-columns: 100%;
        height: auto;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerContent {
        border-radius: 26px 26px 0 0;
        padding-block: 32px;
    }
    .contactMain
        .mainContainer
        .containerMain
        .containerContainer
        .containerMap {
        aspect-ratio: 1;
        border-radius: 0 0 26px 26px;
    }
    .contactMain
        .mainContainer
        .containerFooter
        .footerFaq
        .faqContent
        .contentContact {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .contactMain
        .mainContainer
        .containerFooter
        .footerFaq
        .faqContent
        .contentContact
        .contactOption {
        width: 100%;
    }
    .contactMain
        .mainContainer
        .containerFooter
        .footerFaq
        .faqContent
        .contentContact
        .contactOption
        .optionThumb {
        justify-content: center;
    }
}
/* ===========
CONTACT US MAIN END
=========== */
/* ===========
REGISTER START
=========== */
.register {
    width: 100%;
    height: 100dvh;
    display: grid;
    place-items: center;
    padding: 16px;
}
.register .registerContent {
    position: relative;
    width: 100%;
    max-width: 400px;
    border: 1px solid #ececec;
    border-top: 5px solid var(--primary);
    border-radius: 26px;
    padding: 42px 32px 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.register .registerContent .contentBack {
    position: absolute;
    top: 52px;
    right: 32px;
    color: #767676;
}
.register .registerContent .contentBack svg {
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.register .registerContent .contentLogo {
    margin-bottom: 38px;
}
.register .registerContent .contentLogo img {
    height: 54px;
    margin-inline: auto;
}
.register .registerContent .contentTitle {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 20px;
}
.register .registerContent .contentDesc {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #3f4064;
    margin-bottom: 18px;
}
.register .registerContent .contentForm .inputGroup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.register .registerContent .contentForm .inputGroup .formInput {
    margin-bottom: 0;
}
.register .registerContent .contentForm .formInput {
    width: 100%;
    height: 44px;
    padding: 12px 16px;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-bottom: 42px;
    transition: all 0.25s ease;
}
.register .registerContent .contentForm .formInput:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.register .registerContent .contentForm .formInput:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.register .registerContent .contentForm .formInput::-moz-placeholder {
    font-size: 0.75rem;
    color: #999;
}
.register .registerContent .contentForm .formInput::placeholder {
    font-size: 0.75rem;
    color: #999;
}
.register .registerContent .contentForm .formInput.codeInput {
    text-align: center;
    letter-spacing: 12px;
}
.register .registerContent .contentForm .formSubmit {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    transition: all 0.25s ease;
}
.register .registerContent .contentForm .formSubmit:hover {
    background: #c41920;
    transform: translateY(-2px);
}
.register .registerContent .contentRule {
    margin-top: 12px;
    font-size: 0.7rem;
    text-align: center;
}
.register .registerContent .contentRule a {
    color: var(--primary);
}

/* ===========
REGISTER END
=========== */
/* ===========
PROFILE START
=========== */
.profileMain {
    padding-block: 40px;
}
.profileMain .mainContainer {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
    display: grid;
    grid-template-columns: 280px 1fr;
}
.profileMain .mainContainer .containerAside {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    position: sticky;
    top: 108px;
    border: 1px solid #e6e6e6;
    padding-block: 32px;
    border-radius: 12px;
}
.profileMain .mainContainer .containerAside .asideHeader {
    padding: 0 24px 24px;
    border-bottom: 1px solid #e6e6e6;
}
.profileMain .mainContainer .containerAside .asideHeader .headerProfile {
    margin-bottom: 16px;
}
.profileMain
    .mainContainer
    .containerAside
    .asideHeader
    .headerProfile
    .profilePic {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    font-size: 1.75rem;
    font-weight: 800;
    background: var(--primary);
    color: #fff;
    margin-inline: auto;
}
.profileMain
    .mainContainer
    .containerAside
    .asideHeader
    .headerContent
    .contentName {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
    text-align: center;
}
.profileMain
    .mainContainer
    .containerAside
    .asideHeader
    .headerContent
    .contentPhone {
    font-size: 0.875rem;
    color: #767676;
    text-align: center;
    margin-bottom: 10px;
}
.profileMain
    .mainContainer
    .containerAside
    .asideHeader
    .headerContent
    .contentEdit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--primary);
    cursor: pointer;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--primary);
}
.profileMain .mainContainer .containerAside .asideMain {
    padding-top: 12px;
}
.profileMain .mainContainer .containerAside .asideMain .mainLinks .linkThumb {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #767676;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.25s ease;
}
.profileMain
    .mainContainer
    .containerAside
    .asideMain
    .mainLinks
    .linkThumb.active {
    border-right-color: var(--primary);
    background: #fff5f5;
    color: var(--primary);
}
.profileMain
    .mainContainer
    .containerAside
    .asideMain
    .mainLinks
    .linkThumb:hover {
    background: #fafafa;
    color: var(--primary);
}
.profileMain .mainContainer .containerMain {
    padding-right: 42px;
    padding-top: 16px;
}
.profileMain .mainContainer .containerMain .mainContent {
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.profileMain .mainContainer .containerMain .mainContent .contentHeader {
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e6e6e6;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentHeader
    .headerTitle {
    font-weight: 800;
    font-size: 1.35rem;
    margin-bottom: 4px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentHeader
    .headerDesc {
    font-size: 0.9rem;
    color: #767676;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainCards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainCards
    .cardThumb {
    padding: 24px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    transition: all 0.25s ease;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainCards
    .cardThumb:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(237, 36, 46, 0.1);
    transform: translateY(-2px);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainCards
    .cardThumb
    .thumbValue {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--primary);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainCards
    .cardThumb
    .thumbTitle {
    font-size: 0.9rem;
    color: #767676;
    margin-top: -4px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders {
    width: 100%;
    background: #f9fafb;
    border-radius: 12px;
    padding: 28px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders
    .oderTitle {
    font-size: 1.1rem;
    font-weight: 750;
    margin-bottom: 20px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders
    .orderList
    .listThumb {
    width: 100%;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders
    .orderList
    .listThumb:not(:last-child) {
    margin-bottom: 14px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders
    .orderList
    .listThumb
    .thumbContent
    .contentTitle {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders
    .orderList
    .listThumb
    .thumbContent
    .contentDate {
    font-size: 0.85rem;
    color: #767676;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders
    .orderList
    .listThumb
    .thumbStat {
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders
    .orderList
    .listThumb
    .thumbStat.statDone {
    background: #d4edda;
    color: #155724;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainOrders
    .orderList
    .listThumb
    .thumbStat.statPending {
    background: #fff3cd;
    color: #856404;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable {
    width: 100%;
    padding-block: 16px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table {
    width: 100%;
    text-align: center;
    border: 1px solid #e6e6e6;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    thead
    tr {
    background: #f9fafb;
    border-bottom: 1px solid #e6e6e6;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    thead
    tr
    th {
    padding: 16px 6px;
    font-size: 0.9rem;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    tbody
    tr:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    tbody
    tr
    td {
    font-size: 0.825rem;
    padding: 14px 6px;
}
/* .profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    tbody
    tr
    td
    .orderStat {
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 650;
    display: inline-block;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    tbody
    tr
    td
    .orderStat.statDone {
    background: #d4edda;
    color: #155724;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    tbody
    tr
    td
    .orderStat.statPending {
    background: #fff3cd;
    color: #856404;
} */
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    tbody
    tr
    td
    .tableOption {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 0.8rem;
    transition: all 0.25s ease;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainTable
    table
    tbody
    tr
    td
    .tableOption:hover {
    background: var(--primary);
    color: #fff;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses {
    padding-block: 16px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb {
    width: 100%;
    padding: 24px;
    border-radius: 18px;
    border: 1px solid #ececec;
    background: #fff;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb:hover {
    border-color: rgba(255, 34, 43, 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbHeader
    .receiverInfo {
    display: flex;
    align-items: center;
    gap: 14px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbHeader
    .receiverInfo
    .receiverIcon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 34, 43, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.25rem;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbHeader
    .receiverInfo
    .receiverIcon
    svg {
    width: 24px;
    height: 24px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbHeader
    .receiverInfo
    .receiverContent {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbHeader
    .receiverInfo
    .receiverContent
    .receiverLabel {
    font-size: 0.78rem;
    color: #9a9a9a;
    font-weight: 500;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbHeader
    .receiverInfo
    .receiverContent
    .receiverName {
    font-size: 1.05rem;
    font-weight: 700;
    color: #202020;
    margin: 0;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbHeader
    .defaultBadge {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 34, 43, 0.08);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbMeta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbMeta
    .metaItem {
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbMeta
    .metaItem
    .metaLabel {
    font-size: 0.75rem;
    color: #9a9a9a;
    font-weight: 500;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbMeta
    .metaItem
    .metaValue {
    font-size: 0.95rem;
    color: #202020;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .addressBox {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .addressBox
    .addressLabel {
    font-size: 0.75rem;
    color: #9a9a9a;
    font-weight: 500;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .addressBox
    .addressText {
    font-size: 0.9rem;
    color: #202020;
    font-weight: 600;
    line-height: 1.9;
    margin: 0;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-top: 8px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbOptions
    .optionThumb {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    transition: all 0.25s ease;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbOptions
    .optionThumb:hover {
    transform: translateY(-1px);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbOptions
    .optionThumb.editThumb {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbOptions
    .optionThumb.editThumb:hover {
    background: var(--primary);
    color: #fff;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbOptions
    .optionThumb.removeThumb {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .addressesList
    .listThumb
    .thumbOptions
    .optionThumb.removeThumb:hover {
    filter: brightness(0.95);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .adressesOption {
    display: flex;
    justify-content: center;
    padding-top: 14px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .adressesOption
    .optionThumb {
    width: 272px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.25s ease;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .adressesOption
    .optionThumb:hover {
    background: #d41f29;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(237, 36, 46, 0.3);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainAddresses
    .adressesOption
    .optionThumb
    i {
    transform: rotate(45deg);
    font-size: 1rem;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog {
    width: 94% !important;
    max-width: 472px !important;
    color: #000;
    padding: 32px 24px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm {
    position: relative;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formClose {
    position: absolute;
    top: 0;
    left: 8px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #767676;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formTitle {
    font-size: 1.45rem;
    font-weight: 750;
    text-align: center;
    color: #000;
    margin-bottom: 20px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    .groupLabel {
    display: block;
    font-size: 0.825rem;
    margin-bottom: 8px;
    padding-right: 8px;
    color: #000;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    .groupLabel
    span {
    color: var(--primary);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    .groupInput {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.25s ease;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    .el-select
    .el-select__wrapper {
    width: 100%;
    height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.25s ease;
    text-align: right;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    .el-select
    .el-select__wrapper:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    .el-select
    .el-select__wrapper.is-focused {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    .groupInput:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    .groupInput:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    input.groupInput {
    height: 46px;
    margin-bottom: 20px;
    padding-inline: 16px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .contianerGroup
    textarea.groupInput {
    padding: 16px;
    resize: none;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .formSubmit {
    width: 100%;
    margin-top: 32px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 650;
    border-radius: 10px;
    transition: all 0.25s ease;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .el-dialog
    .addressForm
    .formContainer
    .formSubmit:hover {
    background: #d41f29;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(237, 36, 46, 0.3);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainProducts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainProducts
    .productThumb {
    border-radius: 20px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.05);
}
.profileMain
    .mainContainer
    .containerMain
    .mainContent
    .contentMain
    .mainProducts
    .productThumb
    .thumbPic
    img {
    border-radius: 20px;
}

@media (max-width: 1024px) {
    .profileMain .mainContainer {
        grid-template-columns: 248px 1fr;
    }
    .profileMain .mainContainer .containerMain {
        padding-right: 32px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentHeader
        .headerTitle {
        font-size: 1.1rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentHeader
        .headerDesc {
        font-size: 0.825rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainCards
        .cardThumb {
        padding: 16px 24px;
        text-align: center;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainCards
        .cardThumb
        .thumbValue {
        font-size: 2.2rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainCards
        .cardThumb
        .thumbTitle {
        font-size: 0.8rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainOrders
        .oderTitle {
        font-size: 1rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainOrders
        .orderList
        .listThumb {
        padding: 16px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainOrders
        .orderList
        .listThumb
        .thumbContent
        .contentTitle {
        font-size: 0.875rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainOrders
        .orderList
        .listThumb
        .thumbContent
        .contentDate {
        font-size: 0.8rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainOrders
        .orderList
        .listThumb
        .thumbStat {
        font-size: 0.7rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        thead
        tr
        th {
        font-size: 0.8rem;
        padding-block: 14px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr
        td {
        font-size: 0.75rem;
    }
    /* .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr
        td
        .orderStat {
        font-size: 0.7rem;
    } */
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr
        td
        .tableOption {
        font-size: 0.75rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb {
        padding: 20px;
        border-radius: 16px;
        gap: 10px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbHeader {
        gap: 14px;
        margin-bottom: 2px;
        padding-bottom: 12px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbHeader
        .receiverInfo {
        gap: 12px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbHeader
        .receiverInfo
        .receiverIcon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbHeader
        .receiverInfo
        .receiverIcon
        svg {
        width: 22px;
        height: 22px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbHeader
        .receiverInfo
        .receiverContent {
        gap: 2px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbHeader
        .receiverInfo
        .receiverContent
        .receiverLabel {
        font-size: 0.72rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbHeader
        .receiverInfo
        .receiverContent
        .receiverName {
        font-size: 0.98rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbHeader
        .defaultBadge {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbMeta {
        gap: 10px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbMeta
        .metaItem {
        gap: 4px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbMeta
        .metaItem
        .metaLabel {
        font-size: 0.72rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbMeta
        .metaItem
        .metaValue {
        font-size: 0.9rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .addressBox {
        gap: 4px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .addressBox
        .addressLabel {
        font-size: 0.72rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .addressBox
        .addressText {
        font-size: 0.86rem;
        line-height: 1.8;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbOptions {
        gap: 12px;
        padding-top: 6px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbOptions
        .optionThumb {
        height: 42px;
        font-size: 0.84rem;
        border-radius: 10px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .adressesOption
        .optionThumb {
        font-size: 0.825rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .adressesOption
        .optionThumb
        i {
        font-size: 0.9rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainProducts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .profileMain {
        padding-block: 32px;
    }
    .profileMain .mainContainer {
        grid-template-columns: 100%;
    }
    .profileMain .mainContainer .containerAside {
        position: static;
        padding-block: 0;
        border: none;
    }
    .profileMain .mainContainer .containerAside .asideHeader {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-inline: 0;
        padding-bottom: 16px;
        border-bottom: none;
    }
    .profileMain .mainContainer .containerAside .asideHeader .headerProfile {
        margin-bottom: 0;
    }
    .profileMain
        .mainContainer
        .containerAside
        .asideHeader
        .headerProfile
        .profilePic {
        margin-inline: 0;
        width: 92px;
        height: 92px;
    }
    .profileMain
        .mainContainer
        .containerAside
        .asideHeader
        .headerContent
        .contentName {
        font-size: 0.9rem;
        margin-bottom: 4px;
        text-align: right;
    }
    .profileMain
        .mainContainer
        .containerAside
        .asideHeader
        .headerContent
        .contentPhone {
        font-size: 0.825rem;
        text-align: right;
        margin-bottom: 6px;
    }
    .profileMain
        .mainContainer
        .containerAside
        .asideHeader
        .headerContent
        .contentEdit {
        font-size: 0.75rem;
        margin-inline: 0;
    }
    .profileMain .mainContainer .containerAside .asideMain {
        padding-top: 0;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
        border-bottom: 1px solid #e6e6e6;
    }
    .profileMain .mainContainer .containerAside .asideMain .mainLinks {
        display: flex;
        align-items: center;
    }
    .profileMain
        .mainContainer
        .containerAside
        .asideMain
        .mainLinks
        .linkThumb {
        padding: 10px 24px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .profileMain
        .mainContainer
        .containerAside
        .asideMain
        .mainLinks
        .linkThumb.active {
        background: transparent;
        border-right-color: transparent;
        border-bottom-color: var(--primary);
    }
    .profileMain .mainContainer .containerMain {
        padding-top: 28px;
        padding-right: 0;
    }
    .profileMain .mainContainer .containerMain .mainContent .contentHeader {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 20px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses,
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable {
        padding-block: 0;
    }
}
@media (max-width: 480px) {
    .profileMain
        .mainContainer
        .containerAside
        .asideMain
        .mainLinks
        .linkThumb {
        padding-inline: 16px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentHeader
        .headerTitle {
        font-size: 0.95rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentHeader
        .headerDesc {
        font-size: 0.75rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainCards {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainOrders {
        padding: 20px 16px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList {
        grid-template-columns: 100%;
        gap: 16px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .addressesList
        .listThumb
        .thumbAdress {
        height: auto;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainAddresses
        .adressesOption
        .optionThumb {
        width: 100%;
        border-radius: 10px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainProducts {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table {
        border: none;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        thead {
        display: none;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr:hover {
        box-shadow: 0 4px 16px rgba(237, 36, 46, 0.12);
        border-color: var(--primary);
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr
        td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e6e6e6;
        font-size: 0.875rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr
        td:last-child {
        border-bottom: none;
        padding-top: 16px;
        justify-content: center;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr
        td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #333;
        font-size: 0.85rem;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr
        td:last-child::before {
        display: none;
    }
    .profileMain
        .mainContainer
        .containerMain
        .mainContent
        .contentMain
        .mainTable
        table
        tbody
        tr
        td
        .tableOption {
        width: 100%;
        height: 42px;
        font-size: 0.875rem;
        background: var(--primary);
        color: #fff;
    }
}
/* ===========
PROFILE END
=========== */
/* ===========
SIDEBAR BASKET START
=========== */
.userBasket.active .basketoverlay {
    opacity: 1;
    pointer-events: auto;
}
.userBasket.active .basketSidebar {
    transform: translateX(0);
}
.userBasket .basketoverlay {
    position: fixed;
    inset: 0;
    opacity: 0;
    width: 100%;
    z-index: 9999;
    height: 100dvh;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}
.userBasket .basketSidebar {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-110%);
    z-index: 99999;
    width: 94%;
    max-width: 340px;
    background: #fff;
    box-shadow:
        2px 0 8px rgba(0, 0, 0, 0.1),
        4px 0 16px rgba(0, 0, 0, 0.08),
        8px 0 24px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}
.userBasket .basketSidebar .sidebarCotnainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.userBasket .basketSidebar .sidebarCotnainer .containerHeader {
    flex-shrink: 0;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
}
.userBasket .basketSidebar .sidebarCotnainer .containerHeader .headerTitle {
    font-size: 1.15rem;
    font-weight: 700;
}
.userBasket .basketSidebar .sidebarCotnainer .containerHeader .headerClose {
    width: 28px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #767676;
}
.userBasket .basketSidebar .sidebarCotnainer .containerMain {
    flex-grow: 1;
    overflow-y: auto;
    padding-inline: 16px;
    scrollbar-width: none;
}
.userBasket .basketSidebar .sidebarCotnainer .containerMain .mainList {
    height: 100%;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb {
    padding-block: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbPic {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbPic
    img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 6px;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo {
    flex-grow: 1;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoTitle {
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 2.6;
    height: 44px;
    margin-bottom: 2px;
}

.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoSubTitle {
    color: #747474;
    font-size: 14px;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoDetails {
    display: flex;
    align-items: center;
    gap: 6px;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoDetails
    .detailsCount {
    direction: ltr;
    font-size: 0.85rem;
    color: #767676;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoDetails
    .detailsPrice {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 550;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentOptions {
    flex-shrink: 0;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentOptions
    .optionRemove {
    width: 18px;
    height: 18px;
    font-size: 0.9rem;
    color: var(--primary);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.userBasket .basketSidebar .sidebarCotnainer .containerFooter {
    flex-shrink: 0;
    padding: 18px 16px;
    border-top: 1px solid #e6e6e6;
}
.userBasket .basketSidebar .sidebarCotnainer .containerFooter .footerPriceRow {
    margin-bottom: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerFooter
    .footerPriceRow
    .rowTitle {
    font-size: 0.9rem;
    color: #767676;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerFooter
    .footerPriceRow
    .rowValue {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    color: var(--primary);
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerFooter
    .footerPriceRow
    .rowValue
    .valueNum {
    font-size: 1.1rem;
    font-weight: 700;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerFooter
    .footerPriceRow
    .rowValue
    .valueUnit {
    font-size: 0.85rem;
}
.userBasket .basketSidebar .sidebarCotnainer .containerFooter .footerOptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerFooter
    .footerOptions
    .optionThumb {
    width: 100%;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 650;
    border: 1px solid var(--primary);
}
.userBasket
    .basketSidebar
    .sidebarCotnainer
    .containerFooter
    .footerOptions
    .optionThumb.lightThumb {
    background: #fff;
    color: var(--primary);
}

@media (max-width: 480px) {
    .userBasket .basketSidebar {
        max-width: 300px;
    }
    .userBasket .basketSidebar .sidebarCotnainer .containerHeader {
        padding: 14px 12px;
    }
    .userBasket .basketSidebar .sidebarCotnainer .containerHeader .headerTitle {
        font-size: 1rem;
    }
    .userBasket .basketSidebar .sidebarCotnainer .containerHeader .headerClose {
        font-size: 1rem;
    }
    .userBasket .basketSidebar .sidebarCotnainer .containerMain {
        padding-inline: 12px;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerMain
        .mainList
        .listThumb {
        padding-block: 14px;
        gap: 10px;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerMain
        .mainList
        .listThumb
        .thumbPic {
        width: 60px;
        height: 60px;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerMain
        .mainList
        .listThumb
        .thumbPic
        img {
        padding: 4px;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerMain
        .mainList
        .listThumb
        .thumbContent
        .contentInfo
        .infoTitle {
        font-size: 0.8rem;
        line-height: 1.5;
        height: 38px;
    }

    .infoSubTitle {
        color: #747474;
        font-size: 14px;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerMain
        .mainList
        .listThumb
        .thumbContent
        .contentInfo
        .infoDetails
        .detailsCount,
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerMain
        .mainList
        .listThumb
        .thumbContent
        .contentInfo
        .infoDetails
        .detailsPrice {
        font-size: 0.78rem;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerMain
        .mainList
        .listThumb
        .thumbContent
        .contentOptions
        .optionRemove {
        font-size: 0.8rem;
    }
    .userBasket .basketSidebar .sidebarCotnainer .containerFooter {
        padding: 14px 12px;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerFooter
        .footerPriceRow {
        margin-bottom: 10px;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerFooter
        .footerPriceRow
        .rowTitle {
        font-size: 0.8rem;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerFooter
        .footerPriceRow
        .rowValue
        .valueNum {
        font-size: 1rem;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerFooter
        .footerPriceRow
        .rowValue
        .valueUnit {
        font-size: 0.75rem;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerFooter
        .footerOptions {
        gap: 10px;
    }
    .userBasket
        .basketSidebar
        .sidebarCotnainer
        .containerFooter
        .footerOptions
        .optionThumb {
        height: 38px;
        font-size: 0.8rem;
    }
}
/* ===========
SIDEBAR BASKET END
=========== */
/* ===========
BASKET START
=========== */
.basketMain {
    padding-block: 40px;
}
.basketMain .mainContainer {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.basketMain .mainContainer .containerMain {
    flex: 1 0 0;
}
.basketMain .mainContainer .containerMain .mainHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 18px;
}
.basketMain .mainContainer .containerMain .mainHeader .headerTitle {
    font-size: 1.35rem;
    font-weight: 700;
}
.basketMain .mainContainer .containerMain .mainHeader .headerCounter {
    padding: 6px 16px;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 9999px;
}
.basketMain .mainContainer .containerMain .mainList .listThumb {
    padding: 16px;
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 14px;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;
}
.basketMain .mainContainer .containerMain .mainList .listThumb .thumbPic {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}
.basketMain .mainContainer .containerMain .mainList .listThumb .thumbPic img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    padding: 6px;
    background: #f5f5f5;
    border-radius: 6px;
}
.basketMain .mainContainer .containerMain .mainList .listThumb .thumbContent {
    flex-grow: 1;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoTitle {
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.5;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoPrice {
    font-size: 0.8rem;
    color: #767676;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoControl {
    width: -moz-fit-content;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    gap: 6px;
    background: #f8f9fa;
    border-radius: 8px;
    flex-shrink: 0;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoControl
    .controlOption {
    width: 26px;
    height: 26px;
    border: none;
    background: #fff;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: grid;
    place-items: center;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoControl
    .controlOption:hover {
    background: var(--primary);
    color: #fff;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoControl
    .controlInput {
    width: 26px;
    height: 26px;
    text-align: center;
    border: none;
    background: transparent;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentOptions {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentOptions
    .optionRemove {
    color: #ccc;
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentOptions
    .optionRemove:hover {
    color: var(--primary);
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentOptions
    .optionPrice {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentOptions
    .optionPrice
    .priceNum {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}
.basketMain
    .mainContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentOptions
    .optionPrice
    .priceUnit {
    font-size: 0.75rem;
    font-weight: 400;
    color: #767676;
}
.basketMain .mainContainer .containerMain .mainDiscount {
    margin-block: 32px 16px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    gap: 14px;
}
.basketMain .mainContainer .containerMain .mainDiscount .discountInput {
    flex-grow: 1;
    height: 42px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding-inline: 14px;
    font-size: 1rem;
    transition: all 0.25s ease;
}
.basketMain .mainContainer .containerMain .mainDiscount .discountInput:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.basketMain .mainContainer .containerMain .mainDiscount .discountInput:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.basketMain
    .mainContainer
    .containerMain
    .mainDiscount
    .discountInput::-moz-placeholder {
    font-size: 0.825rem;
}
.basketMain
    .mainContainer
    .containerMain
    .mainDiscount
    .discountInput::placeholder {
    font-size: 0.825rem;
}
.basketMain .mainContainer .containerMain .mainDiscount .discountSubmit {
    flex-shrink: 0;
    padding-inline: 24px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
}
.basketMain .mainContainer .containerAside {
    position: sticky;
    top: 108px;
    flex: 0.7 0 0;
    flex-grow: 0.5;
}
.basketMain .mainContainer .containerAside .asideContainer {
    width: 100%;
    border: 1px solid #e6e6e6;
    padding: 24px;
    border-radius: 8px;
}
.basketMain .mainContainer .containerAside .asideContainer .containerHeader {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e6e6e6;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerHeader
    .headerTitle {
    font-size: 1.1rem;
    font-weight: 700;
}
.basketMain .mainContainer .containerAside .asideContainer .containertransport {
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportTitle {
    font-size: 0.975rem;
    font-weight: 650;
    color: #666;
    margin-bottom: 12px;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb.active {
    border-color: var(--primary);
    background: #fff5f5;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb.active
    .thumbContent
    .contentRadio {
    position: relative;
    display: grid;
    place-items: center;
    border-color: var(--primary);
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb.active
    .thumbContent
    .contentRadio::before {
    content: "";
    display: block;
    width: 9.25px;
    height: 9.25px;
    background: var(--primary);
    border-radius: 9999px;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb:active {
    transform: scale(0.975);
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb:not(:last-child) {
    margin-bottom: 8px;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb
    .thumbContent {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb
    .thumbContent
    .contentRadio {
    width: 14px;
    height: 14px;
    border: 1px solid #aaa;
    border-radius: 9999px;
    flex-shrink: 0;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb
    .thumbContent
    .contentTitle {
    flex-grow: 1;
    font-size: 0.85rem;
    font-weight: 600;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containertransport
    .transportList
    .listThumb
    .thumbPrice {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
}
.basketMain .mainContainer .containerAside .asideContainer .containerBill {
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerBill
    .billRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 5px;
    font-size: 0.85rem;
    color: #555;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerBill
    .billRow:last-child
    .rowValue {
    color: #28a745;
    font-weight: 600;
}
.checkoutMain .mainContainer .containerAside .asideContainer .containerBill {
    padding-top: 14px;
    margin-top: 16px;
    border-top: 1px solid #e6e6e6;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerBill
    .billRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 5px;
    font-size: 0.85rem;
    color: #555;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerBill
    .billRow:last-child
    .rowValue {
    color: #28a745;
    font-weight: 600;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerPayment
    .paymentPriceRow {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 700;
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerPayment
    .paymentPriceRow
    .rowValue {
    color: var(--primary);
}
.basketMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerPayment
    .paymentOption {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 650;
}

@media (max-width: 1024px) {
    .basketMain .mainContainer {
        display: grid;
        grid-template-columns: 1fr 320px;
    }
}
@media (max-width: 768px) {
    .basketMain {
        padding-block: 32px;
    }
    .basketMain .mainContainer {
        display: block;
    }
    .basketMain .mainContainer .containerAside {
        position: static;
    }
}
@media (max-width: 480px) {
    .basketMain .mainContainer .containerMain .mainHeader {
        padding-bottom: 14px;
    }
    .basketMain .mainContainer .containerMain .mainHeader .headerTitle {
        font-size: 1.15rem;
    }
    .basketMain .mainContainer .containerMain .mainHeader .headerCounter {
        font-size: 0.75rem;
    }
    .basketMain .mainContainer .containerMain .mainList .listThumb {
        padding-inline: 8px;
    }
    .basketMain .mainContainer .containerMain .mainDiscount {
        flex-direction: column;
        margin-bottom: 24px;
    }
    .basketMain .mainContainer .containerMain .mainDiscount .discountInput {
        width: 100%;
    }
    .basketMain .mainContainer .containerMain .mainDiscount .discountSubmit {
        width: 100%;
    }
    .basketMain .mainContainer .containerAside {
        position: static;
    }
    .basketMain .mainContainer .containerAside .asideContainer {
        padding: 14px;
    }
    .basketMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerHeader
        .headerTitle {
        font-size: 0.975rem;
    }
    .basketMain
        .mainContainer
        .containerAside
        .asideContainer
        .containertransport
        .transportTitle {
        font-size: 0.9rem;
    }
}
/* ===========
BASKET END
=========== */
/* ===========
CHECKOUT END
=========== */
.checkoutMain {
    padding-block: 40px;
}
.checkoutMain .mainContainer {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-inline: 16px;
}
.checkoutMain .mainContainer .containerMain {
    width: 100%;
}
.checkoutMain .mainContainer .containerMain .mainHeader {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 18px;
    margin-bottom: 24px;
}
.checkoutMain .mainContainer .containerMain .mainHeader .headerTitle {
    font-size: 1.35rem;
    font-weight: 700;
}
.checkoutMain .mainContainer .containerMain .mainForm {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px 24px;
}
.checkoutMain .mainContainer .containerMain .mainForm .sixColumn {
    grid-column: span 6;
}
.checkoutMain .mainContainer .containerMain .mainForm .fullColumn {
    grid-column: span 12;
}
.checkoutMain .mainContainer .containerMain .mainForm .groupLabel {
    display: block;
    font-size: 0.825rem;
    margin-bottom: 8px;
    padding-right: 8px;
}
.checkoutMain .mainContainer .containerMain .mainForm .groupLabel span {
    color: var(--primary);
}
.checkoutMain .mainContainer .containerMain .mainForm .groupInput {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    padding-inline: 16px;
    transition: all 0.25s ease;
}
.checkoutMain .mainContainer .containerMain .mainForm .groupInput:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.checkoutMain .mainContainer .containerMain .mainForm .groupInput:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.checkoutMain .mainContainer .containerMain .mainForm .groupTextarea {
    width: 100%;
    resize: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    padding: 16px;
    transition: all 0.25s ease;
}
.checkoutMain .mainContainer .containerMain .mainForm .groupTextarea:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.checkoutMain .mainContainer .containerMain .mainForm .groupTextarea:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.checkoutMain .mainContainer .containerAside {
    padding-right: 42px;
}
.checkoutMain .mainContainer .containerAside .asideContainer {
    position: sticky;
    top: 108px;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 32px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
}
.checkoutMain .mainContainer .containerAside .asideContainer .containerHeader {
    padding-bottom: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerHeader
    .headerTitle {
    font-size: 1.1rem;
    font-weight: 700;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList {
    padding-inline: 8px;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb {
    padding-block: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent {
    display: flex;
    align-items: center;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentPic {
    width: 48px;
    height: 48px;
    margin-left: 10px;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentPic
    img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 4px;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentTitle {
    font-size: 0.95rem;
    font-weight: 650;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb
    .thumbContent
    .contentCount {
    font-size: 0.85rem;
    color: #767676;
    margin-right: 8px;
    font-weight: 650;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb
    .thumbPrice {
    flex-shrink: 0;
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--primary);
    font-weight: 700;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb
    .thumbPrice
    .priceOrigin {
    text-decoration: line-through;
    color: #949494;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerMain
    .mainList
    .listThumb
    .thumbPrice
    .priceUnit {
    font-size: 0.825rem;
    font-weight: 500;
    color: #767676;
}
.checkoutMain .mainContainer .containerAside .asideContainer .containerFooter {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerFooter
    .footerPriceRow {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerFooter
    .footerPriceRow
    .rowTitle {
    color: #767676;
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerFooter
    .footerPriceRow
    .rowValue {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}
.checkoutMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerFooter
    .footerOption {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 650;
}

@media (max-width: 760px) {
    .checkoutMain .mainContainer {
        grid-template-columns: 100%;
        gap: 32px;
    }
    .checkoutMain .mainContainer .containerMain .mainHeader {
        padding-bottom: 14px;
        margin-bottom: 20px;
    }
    .checkoutMain .mainContainer .containerMain .mainHeader .headerTitle {
        font-size: 1.15rem;
    }
    .checkoutMain .mainContainer .containerAside {
        padding-right: 0;
    }
    .checkoutMain .mainContainer .containerAside .asideContainer {
        padding: 20px;
    }
    .checkoutMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainList
        .listThumb
        .thumbContent
        .contentTitle {
        font-size: 0.85rem;
    }
    .checkoutMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainList
        .listThumb
        .thumbContent
        .contentCount {
        font-size: 0.8rem;
    }
    .checkoutMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerMain
        .mainList
        .listThumb
        .thumbPrice {
        font-size: 0.875rem;
    }
    .checkoutMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerFooter
        .footerPriceRow {
        font-size: 0.9rem;
    }
    .checkoutMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerFooter
        .footerPriceRow
        .rowValue {
        font-size: 1rem;
    }
    .checkoutMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerFooter
        .footerOption {
        height: 46px;
    }
}
/* ===========
CHECKOUT END
=========== */
/* ===========
PAYMENT START
=========== */
.paymentMain {
    padding-block: 40px;
}
.paymentMain .mainContainer {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
    display: grid;
    grid-template-columns: 1fr 320px;
    align-items: flex-start;
}
.paymentMain .mainContainer .containerMain {
    width: 100%;
    padding-left: 42px;
}
.paymentMain .mainContainer .containerMain .containerHeader {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 18px;
    margin-bottom: 24px;
}
.paymentMain .mainContainer .containerMain .containerHeader .headerTitle {
    font-size: 1.35rem;
    font-weight: 700;
}
.paymentMain .mainContainer .containerMain .contianerMain .mainList .listThumb {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb.active
    .thumbCheck {
    border-color: var(--primary);
    background: var(--primary);
    display: grid;
    place-items: center;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb.active
    .thumbCheck::after {
    content: "";
    width: 11px;
    height: 11px;
    display: block;
    background: #fff;
    border-radius: 9999px;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb.active
    .thumbContent {
    color: #000;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb.active
    .thumbContent
    .contentPic
    svg {
    fill: #000;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb
    .thumbCheck {
    width: 24px;
    height: 24px;
    border: 2px solid #e6e6e6;
    border-radius: 9999px;
    flex-shrink: 0;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb
    .thumbContent {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #767676;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb
    .thumbContent
    .contentPic {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb
    .thumbContent
    .contentPic
    svg {
    width: 32px;
    height: 32px;
    fill: #767676;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo {
    flex-grow: 1;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoTitle {
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.5em;
    line-height: 2;
}
.paymentMain
    .mainContainer
    .containerMain
    .contianerMain
    .mainList
    .listThumb
    .thumbContent
    .contentInfo
    .infoDesc {
    font-size: 0.9rem;
    line-height: 2;
}
.paymentMain .mainContainer .containerAside {
    height: 100%;
}
.paymentMain .mainContainer .containerAside .asideContainer {
    position: sticky;
    top: 108px;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    border: 1px solid #e6e6e6;
    padding: 24px;
    border-radius: 8px;
}
.paymentMain .mainContainer .containerAside .asideContainer .containerHeader {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e6e6e6;
}
.paymentMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerHeader
    .headerTitle {
    font-size: 1.1rem;
    font-weight: 700;
}
.paymentMain .mainContainer .containerAside .asideContainer .containerBill {
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
}
.paymentMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerBill
    .billRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 5px;
    font-size: 0.85rem;
    color: #555;
}
.paymentMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerBill
    .billRow:last-child
    .rowValue {
    color: #28a745;
    font-weight: 600;
}
.paymentMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerPayment
    .paymentPriceRow {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 700;
}
.paymentMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerPayment
    .paymentPriceRow
    .rowValue {
    color: var(--primary);
}
.paymentMain
    .mainContainer
    .containerAside
    .asideContainer
    .containerPayment
    .paymentOption {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 650;
}

@media (max-width: 768px) {
    .paymentMain {
        padding-block: 32px;
    }
    .paymentMain .mainContainer {
        grid-template-columns: 100%;
        gap: 28px;
    }
    .paymentMain .mainContainer .containerMain {
        padding-left: 0;
    }
    .paymentMain .mainContainer .containerMain .containerHeader {
        padding-bottom: 14px;
        margin-bottom: 18px;
    }
    .paymentMain .mainContainer .containerMain .containerHeader .headerTitle {
        font-size: 1.15rem;
    }
    .paymentMain
        .mainContainer
        .containerMain
        .contianerMain
        .mainList
        .listThumb {
        padding-block: 16px;
    }
    .paymentMain
        .mainContainer
        .containerMain
        .contianerMain
        .mainList
        .listThumb
        .thumbContent
        .contentPic {
        display: none;
    }
    .paymentMain
        .mainContainer
        .containerMain
        .contianerMain
        .mainList
        .listThumb
        .thumbContent
        .contentInfo
        .infoTitle {
        font-size: 0.95rem;
        line-height: 1.8;
    }
    .paymentMain
        .mainContainer
        .containerMain
        .contianerMain
        .mainList
        .listThumb
        .thumbContent
        .contentInfo
        .infoDesc {
        font-size: 0.825rem;
        line-height: 1.8;
    }
}
@media (max-width: 480px) {
    .paymentMain .mainContainer .containerMain .containerHeader {
        margin-bottom: 14px;
    }
    .paymentMain
        .mainContainer
        .containerMain
        .contianerMain
        .mainList
        .listThumb {
        padding-block: 16px;
    }
    .paymentMain
        .mainContainer
        .containerMain
        .contianerMain
        .mainList
        .listThumb
        .thumbContent
        .contentInfo
        .infoTitle {
        font-size: 0.9rem;
    }
    .paymentMain
        .mainContainer
        .containerMain
        .contianerMain
        .mainList
        .listThumb
        .thumbContent
        .contentInfo
        .infoDesc {
        font-size: 0.8rem;
    }
    .paymentMain .mainContainer .containerAside {
        position: static;
    }
    .paymentMain .mainContainer .containerAside .asideContainer {
        padding: 14px;
    }
    .paymentMain
        .mainContainer
        .containerAside
        .asideContainer
        .containerHeader
        .headerTitle {
        font-size: 0.975rem;
    }
}
/* ===========
PAYMENT END
=========== */
/* ===========
COMPARISON START
=========== */
.comparisonMain {
    padding-block: 40px;
}
.comparisonMain .mainContainer {
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding-inline: 16px;
}
.comparisonMain .mainContainer .mainHeader {
    display: none;
}
.comparisonMain .mainContainer .mainList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 24px;
}
.comparisonMain .mainContainer .mainList .listAdd {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border: 2px dashed #e6e6e6;
    border-radius: 16px;
    background: #fff;
    transition: all 0.25s;
}
.comparisonMain .mainContainer .mainList .listAdd:hover {
    border-color: var(--primary);
    background: #fffafa;
}
.comparisonMain
    .mainContainer
    .mainList
    .listAdd:hover
    .addContent
    .contentIcon {
    background: var(--primary);
    color: #fff;
}
.comparisonMain
    .mainContainer
    .mainList
    .listAdd:hover
    .addContent
    .contnetTitle {
    color: var(--primary);
}
.comparisonMain .mainContainer .mainList .listAdd .addContent {
    text-align: center;
}
.comparisonMain .mainContainer .mainList .listAdd .addContent .contentIcon {
    width: 48px;
    height: 48px;
    margin-inline: auto;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    font-size: 1.5rem;
    background: #f5f5f5;
    transition: all 0.25s;
    color: #767676;
}
.comparisonMain .mainContainer .mainList .listAdd .addContent .contnetTitle {
    font-size: 0.85rem;
    color: #767676;
    transition: all 0.25s;
}
.comparisonMain .mainContainer .mainList > .listThumb {
    border-radius: 16px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.05);
    background: #fff;
    transition: all 0.25s ease;
}
.comparisonMain .mainContainer .mainList > .listThumb .thumbPic {
    position: relative;
    padding: 20px;
}
.comparisonMain .mainContainer .mainList > .listThumb .thumbPic img {
    width: 100%;
    aspect-ratio: 3/2;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    background: #f5f5f5;
    border-radius: 16px;
    padding: 14px;
}
.comparisonMain .mainContainer .mainList > .listThumb .thumbPic .thumbDiscount {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    min-height: 15px;
    border-radius: 30px;
    font-size: 0.815rem;
    padding: 3px 10px;
    background-color: var(--primary);
    color: #fff;
    direction: ltr;
    font-weight: 650;
}
.comparisonMain .mainContainer .mainList > .listThumb .thumbContent {
    padding: 0 20px 20px;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbContent
    .contentTitle {
    font-size: 1.15rem;
    font-weight: 650;
    margin-bottom: 8px;
    line-height: 1.5;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbContent
    .contentPrice {
    display: flex;
    align-items: center;
    gap: 8px;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbContent
    .contentPrice
    .oldPrice {
    font-size: 0.875rem;
    color: #bbb;
    text-decoration: line-through;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbContent
    .contentPrice
    .newPrice {
    font-size: 0.95rem;
    color: var(--primary);
    font-weight: 650;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbFeatures
    .featuresTitle {
    background: #fafafa;
    padding: 12px 20px;
    color: #767676;
    font-size: 0.9rem;
    font-weight: 600;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbFeatures
    .featuresList
    .listThumb {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbFeatures
    .featuresList
    .listThumb:not(:last-child) {
    border-bottom: 1px solid #f1f1f1;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbFeatures
    .featuresList
    .listThumb
    .thumbTitle {
    font-size: 0.8rem;
    color: #766767;
}
.comparisonMain
    .mainContainer
    .mainList
    > .listThumb
    .thumbFeatures
    .featuresList
    .listThumb
    .thumbValue {
    font-size: 0.85rem;
}
.comparisonMain .mainContainer .el-dialog {
    width: 90% !important;
    max-width: 600px !important;
    height: 80dvh !important;
    padding: 0 !important;
}
.comparisonMain .mainContainer .el-dialog .el-dialog__body {
    width: 100% !important;
    height: 100% !important;
}
.comparisonMain .mainContainer .el-dialog .el-dialog__body .listAdd {
    width: 100%;
    height: 100%;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerHeader {
    flex-shrink: 0;
    padding: 20px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerHeader
    .headerTitle {
    font-size: 1.05rem;
    font-weight: 700;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerHeader
    .headerClose {
    width: 32px;
    height: 32px;
    background: #f5f5f5;
    border-radius: 9999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #767676;
    font-size: 1rem;
    transition: all 0.2s;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerHeader
    .headerClose:hover {
    background: var(--primary);
    color: #fff;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerForm {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerForm
    .formInput {
    width: 100%;
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 1rem;
    padding-inline: 16px;
    transition: all 0.25s ease;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerForm
    .formInput::-moz-placeholder {
    font-size: 0.825rem;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerForm
    .formInput::placeholder {
    font-size: 0.825rem;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerForm
    .formInput:hover {
    border-color: rgba(237, 36, 46, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(237, 36, 46, 0.05),
        0 0 0 3px rgba(237, 36, 46, 0.06);
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerForm
    .formInput:focus {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 26px rgba(237, 36, 46, 0.15),
        0 0 0 4px rgba(237, 36, 46, 0.2);
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList {
    flex-grow: 1;
    padding: 12px;
    overflow-y: auto;
    scrollbar-width: none;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb:hover {
    background: #fafafa;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb
    .thumbPic {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb
    .thumbPic
    img {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    padding: 4px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    border-radius: 6px;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb
    .thumbContent {
    flex-grow: 1;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb
    .thumbContent
    .contentTitle {
    font-size: 0.9rem;
    font-weight: 650;
    margin-bottom: 4px;
    color: #000;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb
    .thumbContent
    .contentPrice {
    display: flex;
    align-items: center;
    gap: 6px;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb
    .thumbContent
    .contentPrice
    .oldPrice {
    font-size: 0.7rem;
    color: #bbb;
    text-decoration: line-through;
}
.comparisonMain
    .mainContainer
    .el-dialog
    .el-dialog__body
    .listAdd
    .addContainer
    .containerList
    .listThumb
    .thumbContent
    .contentPrice
    .newPrice {
    font-size: 0.775rem;
    color: var(--primary);
    font-weight: 650;
}

@media (max-width: 1024px) {
    .comparisonMain {
        padding-block: 16px;
    }
    .comparisonMain .mainContainer .mainList {
        width: auto;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -16px;
        padding: 16px;
        gap: 18px;
    }
    .comparisonMain .mainContainer .mainList .listThumb .thumbPic {
        padding: 16px;
    }
    .comparisonMain .mainContainer .mainList .listThumb .thumbPic img {
        padding: 12px;
    }
    .comparisonMain
        .mainContainer
        .mainList
        .listThumb
        .thumbPic
        .thumbDiscount {
        font-size: 0.75rem;
    }
    .comparisonMain .mainContainer .mainList .listThumb .thumbContent {
        padding: 0 16px 16px;
    }
    .comparisonMain
        .mainContainer
        .mainList
        .listThumb
        .thumbContent
        .contentTitle {
        font-size: 0.9rem;
        font-weight: 600;
    }
    .comparisonMain
        .mainContainer
        .mainList
        .listThumb
        .thumbContent
        .contentPrice
        .oldPrice {
        font-size: 0.75rem;
    }
    .comparisonMain
        .mainContainer
        .mainList
        .listThumb
        .thumbContent
        .contentPrice
        .newPrice {
        font-size: 0.8rem;
    }
    .comparisonMain
        .mainContainer
        .mainList
        .listThumb
        .thumbFeatures
        .featuresTitle {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    .comparisonMain
        .mainContainer
        .mainList
        .listThumb
        .thumbFeatures
        .featuresList
        .listThumb {
        padding: 12px 16px;
    }
    .comparisonMain
        .mainContainer
        .mainList
        .listThumb
        .thumbFeatures
        .featuresList
        .listThumb
        .thumbTitle {
        font-size: 0.75rem;
    }
    .comparisonMain
        .mainContainer
        .mainList
        .listThumb
        .thumbFeatures
        .featuresList
        .listThumb
        .thumbValue {
        font-size: 0.8rem;
    }
}
@media (max-width: 480px) {
    .comparisonMain .mainContainer .mainHeader {
        display: block;
        margin-inline: -16px;
        padding: 16px 16px 8px;
        overflow-x: auto;
        scrollbar-width: none;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: nowrap;
    }
    .comparisonMain .mainContainer .mainHeader .headerThumb {
        white-space: nowrap;
        padding: 8px 16px;
        background: #fafafa;
        border-radius: 9999px;
        border: 1px solid #e6e6e6;
        font-size: 0.825rem;
        color: #767676;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .comparisonMain .mainContainer .mainHeader .headerThumb:active {
        transform: scale(0.95);
    }
    .comparisonMain .mainContainer .mainHeader .headerThumb.active {
        background: #fffafa;
        border-color: var(--primary);
        color: var(--primary);
    }
    .comparisonMain .mainContainer .mainHeader .headerAdd {
        white-space: nowrap;
        padding: 8px 16px;
        border-radius: 9999px;
        border: 2px dashed #e6e6e6;
        font-size: 0.825rem;
        color: #767676;
        cursor: pointer;
    }
    .comparisonMain .mainContainer .mainList {
        grid-template-columns: 100%;
    }
    .comparisonMain .mainContainer .mainList .listThumb {
        display: none;
    }
    .comparisonMain .mainContainer .mainList .listThumb.active {
        display: block;
    }
    .comparisonMain .mainContainer .mainList .listAdd {
        display: none;
    }
}
/* ===========
COMPARISON END
=========== */
/* ===========
MENUBAR START
=========== */
.menubar {
    display: none;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 999;
}
.menubar .menubarContainer {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: 64px;
    padding: 0 8px;
    position: relative;
}
.menubar .contianerThumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #888;
    font-size: 0.7rem;
    position: relative;
    transition: all 0.25s ease;
}
.menubar .contianerThumb .thumbIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.menubar .contianerThumb .thumbIcon svg {
    width: 24px;
    height: 24px;
    transition: all 0.25s ease;
}
.menubar .contianerThumb .thumbTitle {
    font-size: 0.7rem;
    font-weight: 500;
}
.menubar .contianerThumb.active {
    color: var(--primary);
    transform: scale(0.92);
}
.menubar .contianerThumb.active svg {
    fill: var(--primary);
    transform: translateY(-2px);
}
.menubar .contianerThumb.active::after {
    content: "";
    position: absolute;
    top: -8px;
    width: 20px;
    height: 3px;
    background: var(--primary);
    border-radius: 999px;
}
.menubar .contianerThumb.cart {
    position: relative;
    transform: translateY(-18px);
}
.menubar .contianerThumb.cart .cartCounter {
    position: absolute;
    top: 0;
    right: 8px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
.menubar .contianerThumb.cart .thumbIcon {
    width: 56px;
    height: 56px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(237, 36, 46, 0.35);
    display: grid;
    place-items: center;
}
.menubar .contianerThumb.cart .thumbIcon svg {
    fill: #fff;
    width: 26px;
    height: 26px;
}
.menubar .contianerThumb.cart .thumbIcon::after {
    content: "\f126";
    font-family: "woodmart-font";
    font-size: 1.5rem;
    color: #fff;
}
.menubar .contianerThumb.cart .thumbTitle {
    display: none;
}

@media (max-width: 768px) {
    .menubar {
        display: block;
    }
}
/* ===========
MENUBAR END
=========== */
.pageContent {
    padding: 40px 16px;
    display: flex;
    justify-content: center;
}
.pageContent .contentContainer {
    width: 100%;
    max-width: 900px;
}
.pageContent .contentBox {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid #f0f0f0;
}
.pageContent .contentBox > *:not(:last-child) {
    margin-bottom: 16px;
}
.pageContent .contentBox h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    margin-top: 24px;
}
.pageContent .contentBox h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 20px;
    color: #222;
}
.pageContent .contentBox p {
    font-size: 0.95rem;
    line-height: 2;
    color: #444;
}
.pageContent .contentBox img {
    width: 100%;
    border-radius: 12px;
    margin: 20px 0;
}
.pageContent .contentBox ul,
.pageContent .contentBox ol {
    padding-right: 18px;
}
.pageContent .contentBox ul li,
.pageContent .contentBox ol li {
    font-size: 0.95rem;
    line-height: 2;
    color: #444;
}
.pageContent .contentBox a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.pageContent .contentBox hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 24px 0;
}

@media (max-width: 480px) {
    .pageContent {
        padding: 24px 12px;
    }
    .pageContent .contentBox {
        padding: 20px 16px;
        border-radius: 12px;
    }
    .pageContent .contentBox h2 {
        font-size: 1.1rem;
    }
    .pageContent .contentBox h3 {
        font-size: 0.95rem;
    }
    .pageContent .contentBox p,
    .pageContent .contentBox li {
        font-size: 0.85rem;
        line-height: 1.9;
    }
    .pageContent .contentBox img {
        border-radius: 10px;
        margin: 16px 0;
    }
} /*# sourceMappingURL=style.css.map */

.otpTimer {
    margin: 15px 0;
    text-align: center;
    font-size: 14px;
}

.otpTimer strong {
    font-size: 16px;
}

.otpTimer a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: bold;
}

.text-left {
    text-align: left !important;
}

.swal2-container {
    z-index: 999999 !important;
}
.colored-toast.swal2-icon-success {
    background: #28a745 !important;
    color: #fff !important;
}

.colored-toast.swal2-icon-error {
    background: #dc3545 !important;
    color: #fff !important;
}

.colored-toast.swal2-icon-warning {
    background: #ffc107 !important;
    color: #000 !important;
}

.colored-toast .swal2-title {
    color: inherit !important;
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 6px;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    100% {
        right: 100%;
    }
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.skeleton-discount {
    width: 50px;
    height: 24px;
}

.skeleton-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.skeleton-title {
    width: 90%;
    height: 20px;
    margin: 15px 0;
}

.skeleton-price {
    width: 70%;
    height: 18px;
    margin-bottom: 10px;
}

.skeleton-price.short {
    width: 50%;
}

.skeleton-small {
    width: 80px;
    height: 16px;
}

@media (max-width: 476px) {
    .skeleton-small {
        width: 100%;
        max-width: 80px;
    }
}

.skeleton-progress {
    width: 100%;
    height: 8px;
    margin-top: 10px;
    border-radius: 10px;
}
.emptyProducts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    margin: 20px 0;
}

.emptyIcon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.emptyIcon i {
    font-size: 40px;
    color: #999;
}

.emptyProducts h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
}

.emptyProducts p {
    max-width: 400px;
    color: #777;
    line-height: 1.8;
    margin-bottom: 20px;
}

.emptyBtn {
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.emptyBtn:hover {
    opacity: 0.9;
}

.active-red {
    color: var(--primary) !important;
}
.clear-filter-btn {
    display: block;
    width: 130px;
    padding: 5px 14px;
    background: var(--primary);
    border-radius: 6px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 12px auto 0;
    transition: all 0.25s ease;
}
.productColors {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block: 12px 18px;
}

.productColors .colorItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
}

.productColors .colorItem:hover {
    border-color: #999;
}

.productColors .colorItem.active {
    border-color: #2d7ef7;
    background: #f5f9ff;
}

.productColors .colorItem input {
    display: none;
}

.productColors .colorCircle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: inline-block;
}

.productColors .colorName {
    font-size: 13px;
}
.mt-1 {
    margin-top: 1rem;
}
.basketSkeleton {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.skeletonImage {
    width: 90px;
    height: 90px;
    border-radius: 8px;
}

.skeletonContent {
    flex: 1;
}

.skeletonTitle {
    width: 70%;
    height: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.skeletonSubTitle {
    width: 40%;
    height: 14px;
    margin-bottom: 12px;
    border-radius: 4px;
}

.skeletonPrice {
    width: 30%;
    height: 16px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.skeletonControl {
    display: flex;
    gap: 10px;
}

.skeletonControl div {
    width: 40px;
    height: 35px;
    border-radius: 6px;
}

.skeletonSide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.skeletonRemove {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.skeletonTotal {
    width: 120px;
    height: 22px;
    border-radius: 4px;
}

/* Animation */
.skeletonImage,
.skeletonTitle,
.skeletonSubTitle,
.skeletonPrice,
.skeletonControl div,
.skeletonRemove,
.skeletonTotal {
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
}

@keyframes skeletonLoading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
.emptyBasket {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 20px;
}

.emptyBasketIcon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    margin-bottom: 20px;
}

.emptyBasketIcon i {
    font-size: 40px;
    color: #bdbdbd;
}

.emptyBasketTitle {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.emptyBasketText {
    color: #777;
    margin-bottom: 25px;
    max-width: 350px;
    line-height: 1.8;
}

.emptyBasketBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    background: #222;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.emptyBasketBtn:hover {
    opacity: 0.9;
}
.skeleton-checkout-box,
.skeleton-checkout-line {
    position: relative;
    overflow: hidden;
    background: #ececec;
    border-radius: 6px;
}

.skeleton-checkout-box::after,
.skeleton-checkout-line::after {
    content: "";
    position: absolute;
    top: 0;
    right: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
    animation: skeleton-checkout-loading 1.2s infinite;
}

@keyframes skeleton-checkout-loading {
    100% {
        right: 150%;
    }
}

.listThumb.skeleton-checkout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.listThumb.skeleton-checkout .thumbContent {
    display: flex;
    align-items: center;
    gap: 12px;
}

.listThumb.skeleton-checkout .contentPic {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.listThumb.skeleton-checkout .contentInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-checkout-line.title {
    width: 160px;
    height: 16px;
}

.skeleton-checkout-line.count {
    width: 50px;
    height: 12px;
}

.skeleton-checkout-line.price {
    width: 90px;
    height: 18px;
}

.emptyBlogs {
    width: 100%;
    padding: 60px 20px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
}

.emptyBlogs .emptyIcon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8f8f8;
}

.emptyBlogs .emptyIcon i {
    font-size: 35px;
    color: #bdbdbd;
}

.emptyBlogs h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.emptyBlogs p {
    margin: 0;
    color: #888;
    font-size: 14px;
}

.skeleton-box {
    position: relative;
    overflow: hidden;
    background: #ececec;
    border-radius: 8px;
}

.skeleton-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.75),
        transparent
    );
    animation: skeletonLoading 1.4s infinite;
}

@keyframes skeletonLoading {
    100% {
        left: 100%;
    }
}

/* تاریخ */
.skeletonBlog .createdDate {
    width: 38px;
    height: 28px;
    margin: 0 auto 5px;
}

.skeletonBlog .createdMonth {
    width: 55px;
    height: 16px;
    margin: 0 auto;
}

/* تصویر */
.skeletonBlog .image {
    width: 100%;
    height: 220px;
    border-radius: 12px;
}

/* نویسنده */
.skeletonBlog .author {
    width: 140px;
    height: 18px;
    margin-bottom: 15px;
}

/* عنوان */
.skeletonBlog .title {
    width: 85%;
    height: 26px;
    margin-bottom: 15px;
}

/* توضیحات */
.skeletonBlog .line {
    width: 100%;
    height: 14px;
    margin-bottom: 10px;
}

.skeletonBlog .line.short {
    width: 60%;
}

/* لینک */
.skeletonBlog .link {
    width: 100px;
    height: 18px;
    margin-top: 20px;
}

.emptyAside {
    text-align: center;
    padding: 20px;
    color: #999;
}

.emptyAside i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
    color: #bbb;
}

.emptyAside span {
    font-size: 14px;
}

.skeleton-box {
    background: #eee;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    100% {
        left: 100%;
    }
}

.skeletonVideo .videoImg {
    width: 100%;
    height: 220px;
}

.skeletonVideo .title {
    width: 70%;
    height: 14px;
    margin-top: 10px;
}

.skeletonVideo .views {
    width: 40%;
    height: 12px;
    margin-top: 8px;
}

/*-------*/

.skeleton-video-box {
    background: #eee;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton-video-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    100% {
        left: 100%;
    }
}

.skeletonVideo .videoImg {
    width: 100%;
    height: 220px;
}

.skeletonVideo .title {
    width: 70%;
    height: 14px;
    margin-top: 10px;
}

.skeletonVideo .views {
    width: 40%;
    height: 12px;
    margin-top: 8px;
}
.labelBadge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    color: #fff;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    border: 1px solid transparent;
}

.skeleton-order-box {
    height: 16px;
    background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 6px;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.w50 {
    width: 50%;
}
.w60 {
    width: 60%;
}
.w70 {
    width: 70%;
}
.w80 {
    width: 80%;
}

.skeletonRow td {
    padding: 12px 8px;
}

.skeleton-address {
    position: relative;
    overflow: hidden;
    background: #ececec;
    border-radius: 8px;
}
.skeleton-address::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
    animation: skeleton-address-loading 1.3s infinite;
}

@keyframes skeleton-address-loading {
    100% {
        transform: translateX(100%);
    }
}
.skeleton-address-card {
    pointer-events: none;
}
.skeleton-address-card .receiverIcon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
}
.skeleton-address-card .receiverContent {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skeleton-address-card .thumbMeta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.skeleton-address-card .thumbOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.skeleton-label {
    width: 70px;
    height: 11px;
}

.skeleton-name {
    width: 150px;
    height: 18px;
}

.skeleton-meta {
    width: 120px;
    height: 16px;
}
.skeleton-meta.short {
    width: 95px;
}

.skeleton-address-line {
    width: 100%;
    height: 14px;
    margin-top: 6px;
}
.skeleton-address-line.medium {
    width: 72%;
}

.skeleton-btn {
    width: 100%;
    height: 46px;
    border-radius: 12px;
}

.thumbOptions {
    display: flex;
    gap: 10px;
}

.emptyState-address {
    text-align: center;
    padding: 40px 20px;
}

.emptyState-address i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.emptyState-address h4 {
    margin-bottom: 10px;
}

.emptyState-address p {
    color: #777;
    margin-bottom: 20px;
}

.pointer {
    cursor: pointer !important;
}
.d-flex {
    display: flex;
}
.justify-content-center {
    justify-content: center;
}

.danger-btn {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 650;
    transition: all 0.25s ease;
    width: 200px;
}

.empty-comments {
    text-align: center;
    padding: 40px 20px;
    color: #777;
}

.empty-comment-icon {
    font-size: 50px;
    margin-bottom: 10px;
    opacity: 0.7;
}

.empty-comment-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #444;
}

.empty-comment-subtitle {
    font-size: 14px;
    color: #888;
}

.detailsDialog {
    height: 84dvh !important;
    max-width: 1024px !important;
    max-height: 777px !important;
    min-height: 470px !important;
    padding: 32px 24px 0 !important;
    width: calc(100% - 64px) !important;
}
.detailsDialog .el-dialog__body {
    height: 100%;
}
.detailsDialog .orderDetails {
    color: #000;
    height: 100%;
}
.detailsDialog .orderDetails .detailsContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.detailsDialog .orderDetails .detailsContainer .containerHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}
.detailsDialog .orderDetails .detailsContainer .containerHeader .headerDetails {
    gap: 12px;
    display: flex;
    align-items: center;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerHeader
    .headerDetails
    .detailsIcon {
    width: 62px;
    height: 62px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    color: var(--primary);
    background: #f1f2f1;
    border-radius: 99999px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerHeader
    .headerDetails
    .detailsIcon
    svg {
    width: 30px;
    height: 30px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerHeader
    .headerDetails
    .detailsContent
    .contentTitle {
    font-size: 1.05rem;
    font-weight: 550;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerHeader
    .headerDetails
    .detailsContent
    .contentNumber {
    font-size: 1.5625rem;
    font-weight: 800;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerHeader
    .headerDetails
    .detailsContent
    .contentRegistered {
    font-size: 0.8125rem;
    color: #767676;
}
.detailsDialog .orderDetails .detailsContainer .containerHeader .headerClose {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #767676;
}
.detailsDialog .orderDetails .detailsContainer .containerMain {
    padding: 0;
    overflow-y: auto;
    height: calc(100% - 106px);
    scrollbar-width: none;
    padding-bottom: 32px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain::-webkit-scrollbar {
    display: none;
}
.detailsDialog .orderDetails .detailsContainer .containerMain .mainHeader {
    padding: 32px;
    border-radius: 14px;
    border: 1px solid #e6e6e6;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainHeader
    .headerThumb {
    display: flex;
    align-items: center;
    gap: 16px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainHeader
    .headerThumb
    .thumbIcon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--primary);
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainHeader
    .headerThumb
    .thumbIcon
    svg {
    width: 32px;
    height: 32px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainHeader
    .headerThumb
    .thumbContent
    .contentTitle {
    font-weight: 600;
    color: #767676;
    margin-bottom: 6px;
    font-size: 0.875rem;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainHeader
    .headerThumb
    .thumbContent
    .contentValue {
    font-size: 0.9625rem;
    font-weight: 650;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainHeader
    .headerThumb
    .thumbContent
    .contentValue
    .valueStat {
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    /*background: #fff3cd;*/
    color: #856404;
}
.detailsDialog .orderDetails .detailsContainer .containerMain .mainProducts {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    margin-bottom: 24px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable {
    width: 100%;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    thead
    tr {
    background: #f7f7f9;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 14px 14px 0 0;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    thead
    tr
    th {
    padding: 12px 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #424242;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    thead
    tr
    th:first-child {
    text-align: right;
    padding-right: 24px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    tbody
    tr:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    tbody
    tr
    td {
    padding: 12px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    tbody
    tr
    td:not(:first-child) {
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    tbody
    tr
    td
    .tdProduct {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: 8px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    tbody
    tr
    td
    .tdProduct
    .productPic {
    background: #f5f5f5;
    width: 58px;
    aspect-ratio: 1;
    padding: 4px;
    border-radius: 8px;
    flex-shrink: 0;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    tbody
    tr
    td
    .tdProduct
    .productPic
    img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    tbody
    tr
    td
    .tdProduct
    .productContent
    .contentTitle {
    font-size: 0.9125rem;
    font-weight: 650;
    margin-bottom: 6px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainProducts
    .productsTable
    tbody
    tr
    td
    .tdProduct
    .productContent
    .contentWarranty {
    padding: 2px 6px;
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    border-radius: 9999px;
    font-size: 0.7125rem;
    font-weight: 600;
    width: -moz-fit-content;
    width: fit-content;
}
.detailsDialog .orderDetails .detailsContainer .containerMain .mainFooter {
    margin-bottom: 24px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainFooter
    .footerConclusion {
    border-radius: 14px;
    padding: 16px 24px;
    border: 1px solid #e6e6e6;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainFooter
    .footerConclusion
    .conclusionRow {
    display: flex;
    padding-block: 6px;
    align-items: center;
    justify-content: space-between;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainFooter
    .footerConclusion
    .conclusionRow.discountRow {
    color: var(--primary);
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainFooter
    .footerConclusion
    .conclusionRow
    .rowTitle {
    font-size: 0.875rem;
    font-weight: 550;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainFooter
    .footerConclusion
    .conclusionRow
    .rowValue {
    font-size: 0.9375rem;
    font-weight: 600;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainFooter
    .footerConclusion
    .conclusionResult {
    display: flex;
    margin-top: 10px;
    align-items: center;
    padding-block: 16px 10px;
    justify-content: space-between;
    border-top: 1px solid #e6e6e6;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainFooter
    .footerConclusion
    .conclusionResult
    .rowTitle {
    font-size: 0.9375rem;
    font-weight: 600;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainFooter
    .footerConclusion
    .conclusionResult
    .rowValue {
    font-size: 0.9625rem;
    font-weight: 650;
    color: var(--primary);
}
.detailsDialog .orderDetails .detailsContainer .containerMain .mainOptions {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 18px;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainOptions
    .optionThumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 12px;
    color: var(--primary);
    border: 1px solid var(--primary);
    transition: all 0.25s ease;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainOptions
    .optionThumb:hover {
    transform: translateY(-2px);
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainOptions
    .optionThumb.closeThumb {
    background: var(--primary);
    color: #fff;
}
.detailsDialog
    .orderDetails
    .detailsContainer
    .containerMain
    .mainOptions
    .optionThumb
    svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 1024px) {
    .detailsDialog {
        width: calc(100% - 40px) !important;
        padding: 24px 20px 0 !important;
    }
    .detailsDialog .orderDetails .detailsContainer .containerMain .mainHeader {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 24px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts {
        overflow-x: auto;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable {
        min-width: 760px;
    }
    .detailsDialog .orderDetails .detailsContainer .containerMain .mainOptions {
        gap: 14px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainOptions
        .optionThumb {
        padding: 10px 22px;
    }
}

@media (max-width: 768px) {
    .detailsDialog {
        width: calc(100% - 24px) !important;
        height: 92dvh !important;
        min-height: unset !important;
        padding: 20px 16px 0 !important;
    }
    .detailsDialog .orderDetails .detailsContainer .containerHeader {
        flex-direction: column;
        gap: 20px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails {
        width: 100%;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails
        .detailsIcon {
        width: 54px;
        height: 54px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails
        .detailsIcon
        svg {
        width: 26px;
        height: 26px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails
        .detailsContent
        .contentNumber {
        font-size: 1.35rem;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerClose {
        display: none;
    }
    .detailsDialog .orderDetails .detailsContainer .containerMain {
        height: calc(100% - 140px);
    }
    .detailsDialog .orderDetails .detailsContainer .containerMain .mainHeader {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 18px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts {
        overflow-x: auto;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable {
        min-width: 700px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainFooter
        .footerConclusion {
        padding: 18px;
    }
    .detailsDialog .orderDetails .detailsContainer .containerMain .mainOptions {
        flex-direction: column;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainOptions
        .optionThumb {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .detailsDialog {
        width: calc(100% - 16px) !important;
        padding: 16px 12px 0 !important;
        border-radius: 16px !important;
    }
    .detailsDialog .orderDetails .detailsContainer .containerHeader {
        margin-bottom: 18px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails {
        gap: 10px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails
        .detailsIcon {
        width: 48px;
        height: 48px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails
        .detailsIcon
        svg {
        width: 22px;
        height: 22px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails
        .detailsContent
        .contentTitle {
        font-size: 0.95rem;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails
        .detailsContent
        .contentNumber {
        font-size: 1.15rem;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerHeader
        .headerDetails
        .detailsContent
        .contentRegistered {
        font-size: 0.75rem;
    }
    .detailsDialog .orderDetails .detailsContainer .containerMain {
        padding-bottom: 16px;
        height: calc(100% - 87px);
    }
    .detailsDialog .orderDetails .detailsContainer .containerMain .mainHeader {
        padding: 16px;
        gap: 16px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainHeader
        .headerThumb {
        gap: 12px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainHeader
        .headerThumb
        .thumbIcon {
        width: 28px;
        height: 28px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainHeader
        .headerThumb
        .thumbIcon
        svg {
        width: 28px;
        height: 28px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainHeader
        .headerThumb
        .thumbContent
        .contentTitle {
        font-size: 0.8rem;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainHeader
        .headerThumb
        .thumbContent
        .contentValue {
        font-size: 0.875rem;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts {
        border: none;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable {
        min-width: auto;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        thead {
        display: none;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        tr {
        display: flex;
        flex-direction: column;
        border: 1px solid #e6e6e6;
        border-radius: 14px;
        padding: 16px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td:first-child {
        display: block;
        padding-bottom: 14px;
        padding-inline: 0;
        margin-bottom: 14px;
        border-bottom: 1px solid #eee;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td:nth-child(2)::before {
        content: "قیمت واحد";
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td:nth-child(3)::before {
        content: "تعداد";
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td:nth-child(4)::before {
        content: "قیمت کل";
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td:not(:first-child) {
        padding-block: 6px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td:not(:first-child)::before {
        color: #767676;
        font-size: 0.82rem;
        font-weight: 600;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td
        .tdProduct {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td
        .tdProduct
        .productPic {
        width: 64px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainProducts
        .productsTable
        tbody
        td
        .tdProduct
        .productContent
        .contentTitle {
        font-size: 0.9rem;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainFooter
        .footerConclusion {
        padding: 16px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainFooter
        .footerConclusion
        .conclusionRow
        .rowTitle,
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainFooter
        .footerConclusion
        .conclusionResult
        .rowTitle {
        font-size: 0.8125rem;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainFooter
        .footerConclusion
        .conclusionRow
        .rowValue,
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainFooter
        .footerConclusion
        .conclusionResult
        .rowValue {
        font-size: 0.875rem;
    }
    .detailsDialog .orderDetails .detailsContainer .containerMain .mainOptions {
        gap: 10px;
    }
    .detailsDialog
        .orderDetails
        .detailsContainer
        .containerMain
        .mainOptions
        .optionThumb {
        padding: 12px 16px;
        font-size: 0.875rem;
    }
}

.product-authenticity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block: 10px;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.product-authenticity svg {
    color: #22c55e;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .shopMain .mainContainer .containerAside .asideContainer .containerMain {
        max-height: 1260px;
        overflow-y: auto;
        scrollbar-width: none;
    }
}
.emptyOrders{
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.emptyOrders i{
    font-size: 6rem;
    color: #e4363eba;
}