@charset "UTF-8";
/*Slide*/
@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}
.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, -30px);
    right: auto;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -30px);
    left: auto;
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #3e3d42;
    font-size: 1rem;
}
.swiper-button-prev{
    transform: rotate(180deg);
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: '\e902'
}

/* .swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
} */

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: '\e902'
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 20px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 22px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px));
    display: inline-block;
    /* border-radius: var(--swiper-pagination-bullet-border-radius, 50%); */
    background: url(../images/dot.svg);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .3)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: url(../images/dot-active.svg);
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 2px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active {
    pointer-events: auto
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-cube .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}
/*Slide*/
/*Font chữ*/
@font-face {
  font-family: 'NTJSans-Medium';
  src: url('../font/NTJSans-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NTJSans-Regular';
  src: url('../font/NTJSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NTJSans-Light';
  src: url('../font/NTJSans-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NTJSans-Bold';
  src: url('../font/NTJSans-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NTJDisplay-Light';
  src: url('../font/NTJDisplay-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NTJDisplay-SemiBold';
  src: url('../font/NTJDisplay-SemiBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'icomoon';
  src: url('../font/icomoon.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'new-icomoon';
  /* src: url('../font/new-icomoon.eot'); */
  src:
    /* url('../font/new-icomoon.eot') format('embedded-opentype'), */
    /* url('../font/new-icomoon.ttf') format('truetype'), */
    url('../font/new-icomoon.woff') format('woff');
    /* url('../font/new-icomoon.svg') format('svg'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'icomoon-mobile';
  /* src: url('../font/mobile/icomoon.eot'); */
  src: 
    /* url('../font/mobile/icomoon.eot') format('embedded-opentype'), */
    /* url('../font/mobile/icomoon.ttf') format('truetype'), */
    url('../font/mobile/icomoon.woff') format('woff');
    /* url('../font/mobile/icomoon.svg') format('svg'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'iconUser';
  src: 
    /* url('../font/icon-user/icomoon.eot') format('embedded-opentype'), */
    /* url('../font/icon-user/icomoon.ttf') format('truetype'), */
    url('../font/icon-user/icomoon.woff') format('woff');
    /* url('../font/icon-user/icomoon.svg') format('svg'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  
}
@font-face {
  font-family: 'iconPayment';
  src: 
       /* url('../font/icon-payment/icomoon.eot') format('embedded-opentype'), */
       /* url('../font/icon-payment/icomoon.ttf') format('truetype'), */
       url('../font/icon-payment/icomoon.woff') format('woff');
       /* url('../font/icon-payment/icomoon.svg') format('svg'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  
}
@font-face {
  font-family: 'iconShopping';
  src: 
    /* url('../font/icon-shoping/icomoon.eot') format('embedded-opentype'), */
    /* url('../font/icon-shoping/icomoon.ttf') format('truetype'), */
    url('../font/icon-shoping/icomoon.woff') format('woff');
    /* url('../font/icon-shoping/icomoon.svg') format('svg'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'iconDelete';
  /* src:  url('../font/icon-delete/icomoon.eot?8ysqn4'); */
  src:
    /* url('../font/icon-delete/icomoon.eot?8ysqn4#iefix') format('embedded-opentype'), */
    /* url('../font/icon-delete/icomoon.ttf?8ysqn4') format('truetype'), */
    url('../font/icon-delete/icomoon.woff?8ysqn4') format('woff');
    /* url('../font/icon-delete/icomoon.svg?8ysqn4#icomoon') format('svg'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* h3 {
    font-family: 'MyCustomFont', sans-serif;
    font-size: 2rem;
    font-weight: bold;
} */
h1{
  font-family: 'NTJDisplay-SemiBold', sans-serif;
  font-size: 1.75rem;
  /* text-transform: uppercase; */
  font-weight: 400;
  margin: 2rem auto 1rem auto;
  color: #A2041B;
  letter-spacing: 0.5px;
}
h2,
h4 {
  font-family: 'NTJDisplay-SemiBold', sans-serif;
  font-size: 1.75rem;
  /* text-transform: uppercase; */
  font-weight: 400;
  /* margin: 2rem auto 1rem auto; */
  color: #A2041B;
  letter-spacing: 0;
}
h3 {
  font-family: 'NTJSans-Medium', sans-serif;
  color: #3e3d42;
  text-transform: uppercase;
  font-weight: 400;
  /* margin: 2rem auto 1rem auto; */
  font-size: 1.2rem;
  letter-spacing: 0.5px;

}

p,
a,
th,
td {
  font-family: 'NTJSans-Medium', sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
  /* letter-spacing: 0.75px; */
}

label {
  font-family: 'NTJSans-Medium', sans-serif;
}
/*Font chữ*/

/* Màu sắc và font */
:root {
    --black: #252525;
    --red: #a2041b;
    --white: #FFFFFF;
    --grey: #eaeaea;

    --primary-color: #FFF4E8;
    --primary-color-dark: #FFF4E8;
    --primary-color-tint-1: #3bc4ac;
    --primary-color-tint-2: #56d4bc;
    --primary-color-tint-3: #71e3cc;
    --primary-color-tint-4: #8bf3dc;
    --primary-color-tint-5: #a6f3eb;
    --medium-font: 'NTJSans-Medium', sans-serif;
    --bold-font: 'NTJSans-Bold',sans-serif;
    --link-color: #6f6f6f;
    --nav-width: 75%;
    --nav-padding: 0.875em 1em;
    --nav-border-color: #a6f3eb;
    --nav-background-color: #FFF4E8;
    --nav-icon-font: 'Material Icons';
    --nav-icon-arrow-right: 'chevron_right';
    --nav-icon-arrow-left: 'chevron_left';
    --nav-level-border-color: #20b49c;
    --nav-level-background-color: #FFF4E8;
    --nav-level3-background-color: #8bf3dc;
    --nav-level4-background-color: #71e3cc;
    --nav-level5-background-color: #56d4bc;
}

* {
    box-sizing: border-box;
}

html,
body {
    overscroll-behavior-y: none;
}

a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Change the white to any color */
.information-col .support .submenu input:-webkit-autofill,
.information-col .support .submenu input:-webkit-autofill:hover, 
.information-col .support .submenu input:-webkit-autofill:focus, 
.information-col .support .submenu input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #a2041b inset !important; /* Màu nền */
    -webkit-text-fill-color: #FFFFFF !important; /* Màu chữ */
}

/* Change the white to any color */
.menu-search input:-webkit-autofill,
.menu-search input:-webkit-autofill:hover, 
.menu-search input:-webkit-autofill:focus, 
.menu-search input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #FFF4E8 inset !important; /* Màu nền */
    -webkit-text-fill-color: #3e3d42 !important; /* Màu chữ */
}
/* ::selection {
    background-color:transparent;
    color:teal;
}
::-moz-selection {
    background-color:transparent;
    color:teal;
} */
/* #promo-banner {
    display: none;
  }
  
#promo-banner.show {
    display: flex;
}
   */
body {
    font-family: var(--medium-font);
    font-weight: 400;
    color: #3e3d42;
    line-height: 1.5;
    font-size: 0.875rem;
    overflow: auto;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    height: auto;
    width: 100%;
    margin: 0 auto;
    width: 100%;
}

body.no-roll {
    overflow: hidden;
}

input,
button {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    width: 100%;
    line-height: inherit;
}

input:focus,
button:focus {
    outline: none !important;
}

button {
    overflow: visible;
    text-transform: none;
}

img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
    /*Chặn hiển thị nền xanh khi nhấn nhanh*/
    user-select: none;
    -webkit-user-select: none;
    /*Chặn hiển thị nền xanh khi nhấn nhanh*/
}

/*Start Bong bóng contact */
.back-to-top{
    position: sticky;
    z-index: 3;
}
.icon-arrow-right {
    font-family: 'icomoon' !important;
    color: #A2041B;
    position: fixed;
    bottom: 4.25rem;
    right: 2.4rem;
    font-size: 1.5rem;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    transform: rotate(-90deg);
    transition: background-color 0.3s;
}

.icon-arrow-right::before {
    content: '\e902';
}
.icon-arrow-right.at-footer{
    position: absolute;
    bottom: 0;
}
.menu-bar-content .container .mennu .menu-item:nth-last-child(2) h2 a {
    color: #a2041b;
}

/* Arrow indicator */
.arrow {
    position: absolute;
    bottom: -0.625rem;
    right: 1.25rem;
    width: 0;
    height: 0;
    border-left: 0.625rem solid transparent;
    border-right: 0.625rem solid transparent;
    border-top: 0.625rem solid #FFFFFF;
}

#chatButton {
    position: fixed;
    bottom: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 1.25rem;
    width: 3.125rem;
    background-color: #A2041B;
    height: 3.125rem;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    padding: 0;
    /* border: 2px solid #FECB8B; */
    overflow: hidden;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
    transition: background 0.3s, transform 0.1s;
    animation: flip 0.6s ease;
    animation: pulse 1.5s ease infinite;
}

/* Hiệu ứng pulse */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(179, 30, 30, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 0.625rem rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* Hiệu ứng ripple */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

/* #chatButton img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
} */
#chatButton .icon-chat-open svg{
    width: 1.5rem;
    height: 1.5rem;
    color: #FFFFFF;
    line-height: 1.5rem;
    font-size: 1.5rem;
    margin: auto;
    position: absolute;
    top: -0.675rem;
    left: -0.695rem;
}

#chatButton span {
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: block;
  position: relative;
}

#chatButton .icon-chat-close svg{
    width: 0.75rem;
    height: 0.75rem;
    color: #FFFFFF;
    line-height: 0.75rem;
    font-size: 0.75rem;
    margin: auto;
    position: absolute;
    top: -0.375rem;
    left: -0.35rem;
}
#chatButton .icon-chat-close {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

#chatButton.open .icon-chat-open {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

#chatButton.open .icon-chat-close {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* CSS cho khung chat */
#chatBox {
    position: fixed;
    bottom: 5.2rem;
    right: 1rem;
    width: 9.425rem;
    background: #FFFFFF;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    display: none;
    /* padding: 0.938rem; */
    display: none;
    padding: 0.375rem 0;
    z-index: 1000;
    transform-origin: bottom right;
}

.chat-item {
    display: flex;
    align-items: center;
    padding: 0.2715rem 0.5rem;
    margin-bottom: 0.625rem;
    border-radius: 0.313rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.chat-item:hover {
    background-color: #f5f5f5;
    transform: translateX(0.313rem);
}

/* Hiệu ứng click cho chat-item */
.chat-item:active {
    transform: scale(0.95);
    background-color: #e0e0e0;
}

/* Hiệu ứng ripple cho chat-item */
.chat-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, .1) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

.chat-item:active::after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}
.chat-item svg {
    /* color: #3EB891; */
    width: 1.25rem;
    height: 1.25rem;
    position: relative;
    top: 0.25rem;
    margin-right: 0.625rem;
}
.chat-item img {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.625rem;
}

.chat-item span {
    font-size: 0.938rem;
    color: #3B3B3B;
}

@keyframes flip {
    0% {
        transform: rotateY(0);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0);
    }
}

/* Animation khi mở chatBox */
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        transform: scale(1.1);
    }

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

/* Animation khi đóng chatBox */
@keyframes scaleOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

#chatBox.active {
    display: block;
    animation: scaleIn 0.3s ease forwards;
}

#chatBox.closing {
    animation: scaleOut 0.3s ease forwards;
}

/* Animation cho từng chat item khi xuất hiện */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.chat-item {
    opacity: 0;
    animation: slideInRight 0.3s ease forwards;
}

.chat-item:nth-child(1) {
    animation-delay: 0.1s;
}

.chat-item:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-item:nth-child(3) {
    animation-delay: 0.3s;
}

/*End Bong bóng contact */

.menu-bar-content {
    background: #FFF4E8;
    position: relative;
    padding-top: 0.376rem;
}

.menu-content.about-ngoctham-sub-menu {
    position: absolute;
    left: 0;
    width: 100%;
    background: #fff4e8;
    z-index: 10;
    opacity: 0;
    display: none;
    border-top: 1px solid #555;
    top: 100%;
    transition: all 0.3s ease;
}
/*Menubar v2*/
/* .menu-bar-content .mennu > li:hover .menu-content.about-ngoctham-sub-menu {
    opacity: 1;
    display: block;
} */
.menu-bar-content .mennu .menu-item.active .menu-content.about-ngoctham-sub-menu{
    opacity: 1;
    display: block;
}
.menu-content .menu-content-title {
    display: grid;
    grid-template-columns: repeat(3,1fr); /* hoặc 300px tùy ý ảnh */
    max-width: 90rem;
    margin: 0 auto;
}
.menu-content .menu-content-title .left-five{
    min-width: 21.75%;
    padding-right: 1.5rem;
}
.menu-content .menu-content-title .left-five.level2-center{ 
    padding-left: 6.5rem;
}
.menu-content .container-title {
    display: flex;
    padding: 1rem 1rem 2rem 5.25rem;
    justify-content: start;
    grid-column: span 2;
}
.menu-content .container-img {
    display: flex;
    padding: 2rem 5.25rem 2rem 0;
    justify-content: end;
    position: relative;
}
.right-seven .see-more {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 7.25rem;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.5rem;
  color: #a2041b;
  text-decoration: none;
  border-radius: 0.25rem;
  font-weight: 500;
}
.container-img .see-more::after{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #a2041b;
    margin-left: 0.5rem;
    content: '\e902';
}
/**/

ul,
ol,
dl {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-content .about-menu {
    display: grid;
    gap: 0.75rem;
    align-items: center;
    /* margin-top: -0.5rem; */
    padding-top: 0.875rem;
}

.menu-bar-content .container .mennu .menu-content.about-ngoctham-sub-menu .container-title .left-five p {
    font-family: var(--bold-font);
    text-transform: uppercase;
    font-size: 0.875rem;
    color: #6f6f6f;
}

.menu-bar-content .container.parent .mennu .menu-item h2 {
    font-size: 0.875rem;
    margin: 0 1.875rem;
    text-align: center;
}

.menu-content .about-menu .menu-item-child {
    /* height: 2rem; */
    padding-bottom: 0.5rem;
}

.menu-content .about-menu .menu-item-child h3,
.nav-items .nav-item h3 {
    font-size: smaller;
    margin: 0;
    text-transform: none;

}
.right-seven {
  position: relative;
  display: inline-block;
  min-height: 17.5rem;
}

.menu-content .right-seven img {
    width: 100%;
    min-height: 17.5rem;
    display: block;
    object-fit: cover;
}

.border-top {
    border-top: 0.25rem solid #a2041b !important;
}

.menu-logo {
    text-align: center;
    padding: 0.938rem;
}

.menu-logo img {
    max-width: 100%;
    height: auto;
}

.menu-top {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.menu-top .toggle-menu a,
.menu-content .menu-item a {
    color: #6f6f6f;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: .0.313rem;
    white-space: nowrap;
    text-decoration: none;
    padding: 0 1.25rem 0.625rem;
}

.menu-item .about-ngoctham-sub-menu a:hover,
.menu-search.active i:hover {
    color: #a2041b;
}
.left-column .title-gold{
    font-family: var(--bold-font);
}
.left-column.show .title-gold{
    font-family: var(--bold-font);
    margin-top: 0.25rem;
}
.left-column.show,
.toggle-menu.icon-close{
    color: #a2041b !important;
    cursor: pointer;
}

.icon-gold {
    font-family: 'new-icomoon';
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-top: -0.45rem;
}
.icon-gold::before {
    content: '\e900';
}

.header .title-header .center-column h1 {
    margin: 0;
}
.header.menu-header{
    border-top: 0.125rem solid #a2041b;
}
.header {
    padding: 0.42rem 0;
}
.title-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--medium-font);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    padding: 0.75rem 2.25rem 0.25rem 2.25rem;
    margin: 0 auto;
    /* max-width: 104rem; */
    text-align: center;
    z-index: 1;
    position: relative;
}
/* .left-column, .right-column,.nav-top{
    margin-top: 0.5rem;
} */
.icon-user{
    font-family: 'iconUser' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-user::before{
    content: "\e900";
    font-size: 1rem;
}
.icon-shopping{
    font-family: 'iconShopping' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    position: relative;
    top: 0.125rem;
    /* line-height: 1; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-shopping::before{
    content: "\e900";
    font-size: 1rem;
}
.icon-user.toggle-user:hover,.toggle-shopping.icon-shopping:hover {
    cursor: pointer;
    color: #FECB8B;
}
.icon-close,
/* .icon-user, */
.icon-menu,
.icon-search,
.icon-wishlist,
.icon-wishlist-checked,
.new-icon-font {
    font-family: 'icomoon-mobile' !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    font-size: 1rem;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* padding-right: 0.5rem; */
}

[class*=" icon-"] i,
[class^=icon-] i {
    font-style: normal;
}

/* Ẩn icon-wishlist-checked mặc định */
.icon-wishlist-checked {
    display: none;
}
.swal2-toast.custom-warning{
    background-color: #FFFFFF !important;
}
/* Khi hover vào icon-wishlist, ẩn icon-wishlist và hiển thị icon-wishlist-checked */
.toggle-heart:hover .icon-wishlist,.checked-hover:hover .icon-wishlist {
    display: none;
    /* Ẩn icon-wishlist khi hover vào .toggle-heart */
}
.wishlist-empty.emptyy,.sidebarShopping-content .text-shop.emptyy{
    font-family: "NTJDisplay-SemiBold",sans-serif;
    font-size: 1.75rem;
    color: #3e3d42;
    margin: 1rem auto;
}
.wishlist-empty,.sidebarShopping-content .text-shop{
    font-family: var(--medium-font);
    font-size: 1rem;
    line-height: 1.4;
    padding: 1rem 2rem;
    margin: 0;
}
@keyframes heartbeat {
    0% { transform: scale(1); }
    30% { transform: scale(1.1); } /* Phóng to nhẹ */
    50% { transform: scale(1); }
    70% { transform: scale(1.1); } /* Lặp lại nhịp */
    100% { transform: scale(1); }
}
.toggle-heart:hover .icon-wishlist-checked,.checked-hover:hover .icon-wishlist-checked {
    display: inline-block;
    transition: transform 0.3s ease;
    animation: heartbeat 1s infinite;
    /* Hiển thị icon-wishlist-checked khi hover */
}
.icon-wishlist-checked {
    pointer-events: auto;
}
.icon-wishlist-checked .path1,
.icon-wishlist-checked .path2 {
    pointer-events: none;
}

/* Thêm hiệu ứng hover cho các phần tử bên trong icon-wishlist-checked */
.icon-wishlist-checked.hover .path1,
.icon-wishlist-checked.hover .path2 {
    transition: all 0.3s ease;
}

.icon-wishlist-checked .path1::before {
    content: "\e908";
    color: #FECB8B;
}

.icon-wishlist-checked .path2::before {
    content: "\e909";
    position: absolute;
    right: 0;
    /* margin-left: -1rem; */
    color: #a2041b;
}

.icon-menu:before {
    content: "\e902";
}

.icon-wishlist:before {
    content: "\e901";
}

.icon-search:before {
    content: "\e903";
    cursor: pointer;
}

.icon-close:before {
    content: "\e907";
}

.left-column {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 6.5rem;
    gap: 0.5rem;
    cursor: pointer;
    color: #6f6f6f;
}

.left-column:hover,
.right-column .icon-search:hover {
    color: #FECB8B;
}

.right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    color: #6f6f6f;
}

.center-column {
    margin: 0 auto;
}

.center-column img {
    max-width: 100%;
    position: relative;
    left: 1.75rem;
    cursor: pointer;
}

.toggle-heart {
    margin-top: 0.35rem;
    cursor: pointer;
}

.toggle-heart,
.toggle-shop {
    position: relative;
}

.toggle-heart img,
.toggle-shop img {
    max-width: none;
}

.number-heart {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background-color: #a2041b;
    color: #FFFFFF;
    width: 0.9rem;
    text-align: center;
    font-size: 0.7rem;
    height: 0.9rem;
    border-radius: 50%;
    cursor: pointer;
}

.right-column .toggle-shop .number-shop {
    position: absolute;
    top: -0.5rem;
    justify-content: center;
    align-items: center;
    right: -0.875rem;
    background-color: #a2041b;
    color: #FFFFFF;
    padding-top: 0.25rem;
    width: 1.125rem;
    cursor: pointer;
    font-size: 0.75rem;
    height: 1.125rem;
    text-align: center;
    line-height: 1;
    border-radius: 50%;
}
.menu-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #FFF4E8;
}
.menu-dark-bg{
    display: none;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    z-index: 2;
}
.gold-center {
    position: absolute;
    top: 100%; /* nằm ngay dưới .left-column */
    left: 0;
    background-color: #FFF4E8;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.5s ease, max-height 0.5s ease;
    z-index: 0;
}
.gold-price {
    display: flex;
    background-color: #FFF4E8;
    padding-bottom: 4rem;
    padding-top: 2rem;
    width: 100%;
    height: auto;
}
.gold-center.show {
    max-height: 60rem; /* đặt đủ lớn cho nội dung thực tế */
    transform: translateY(0);
    z-index: 1;
}


.gold-price h2 {
    margin: auto;
}
.menu-search-all{
    /* padding: 0 8.5rem; */
    position: absolute;
    width: 100%;
    background-color: #FFF4E8;
}
.menu-search {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
    opacity: 0;
    width: 100%;
    padding: 0 6.25rem;
    pointer-events: none;
    position: relative;
    margin: 0 auto;
    height: 6rem;
    max-height: 0;
    overflow: hidden;
    background-color: #FFF4E8;
    z-index: 0;
}
.menu-search .icon-search{
    font-size: 1.875rem;
    color: #959595;
    position: absolute;
    bottom: 2rem;
    right: 7rem;
}
.menu-search.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    max-height: 6rem;
}

.menu-search input {
    font-family: "NTJ Sans",sans-serif;
    /* height: 45%; */
    border: none;
    /* margin-top: 0.5rem; */
    color: #6f6f6f;
    background-color: #FFF4E8;
    font-size: 2rem;
    border-bottom: 1px solid #FECB8B;
}
/* .menu-search input::placeholder{
    color: #959595;
} */
.menu-search-all .search-all{
    max-height: 32rem;
    overflow-y: auto;
    display: none;
    margin: 0 6.25rem;
    flex-direction: column;
    transition: all 0.25s ease; /* thêm mượt */
    transform: translateY(-5px);
    opacity: 0;
}
.menu-search-all .search-all.show{
    display: flex;
    transform: translateY(0);
    opacity: 1;
}
.menu-search-all .search-all .search-item:nth-child(even){
    background-color: #f8ede0;
}
.menu-search-all .search-all .search-item a{
    margin-bottom: 1rem;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1rem;
}
.menu-search-all .search-all .search-item-none{
    margin: 1rem 0;
}
.menu-search-all .search-all .search-item:hover{
    background-color: #a2041b;
    color: #FFFFFF;
}
.menu-search-all .search-all .search-item span,
.menu-search-all .search-all .search-item-none span{
    font-family: 'NTJDisplay-SemiBold',sans-serif;
    font-size: 1.25rem;
}
.menu-search-all .search-all .search-item img{
    width: 4.375rem;
    height: 4.375rem;
    object-fit: cover;
}
.menu-search img {
    position: relative;
    cursor: pointer;
    right: 2rem;
}

.menu-bar-content .mennu {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 70rem;
    margin: 0 auto;
    /* height: 3rem; */
}
/* .menu-bar-content .mennu .menu-item{
    padding-right: 3rem;
} */
.menu-bar-content .mennu .menu-item {
    /* height: 3rem; */
    font-size: 1rem;
    transition: .3s;
    padding: 0.891rem 0;
    width: 100%;
    border-bottom: 1px solid transparent;
}

/* .menu-bar-content .mennu>li:hover  */
.menu-bar-content .mennu .menu-item.active
{
    border-bottom: 1px solid #a2041b;
}

/* .menu-bar-content .mennu>li:hover>p>a {
    color: #a2041b;
} */

.menu-item .a-padding {
    transition: color 0.3s ease;
}

.menu-item.active .a-padding {
    color: #a2041b;
    /* Màu khi menu xuất hiện */
}

.menu-bar-content .mennu .menu-item .menu-content.about-ngoctham-sub-menu li a {
    font-family: var(--medium-font) !important;
    /* padding: 0.938rem 0; */
    width: 100%;
    font-weight: 500;
    letter-spacing: 0.25px;
    /* min-height: 4.125rem; */
    display: block;
    text-transform: uppercase;
    color: #6f6f6f;
    text-align: left;
    transition: .3s;
    font-size: 0.875rem;
}

.a-padding {
    font-family: 'NTJSans-Bold', sans-serif !important;
    padding: 0;
    text-transform: uppercase;
    width: 100%;
    letter-spacing: .5px;
    font-weight: 500;
    /* display: block; */
    color: #6f6f6f;
    cursor: pointer;
    text-align: center;
    transition: .3s;
    font-size: 0.875rem;
    white-space: nowrap;
    /* position: relative; */
    /* left: 1.5rem; */
}

.a-padding:hover {
    color: #a2041b;
}

/* .menu-bar-content .mennu .menu-item .menu-content .left-five a {
    text-align: left;
} */

.menu-bar-content .mennu .menu-item .menu-content .left-five a:hover {
    color: #a2041b;
}

.menu-content .about-menu.bst {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.25rem; /* khoảng cách ngang */
    row-gap: 1rem;     /* khoảng cách dọc – bạn điều chỉnh số này tùy ý */
}
footer {
    background-color: #a2041b;
    color: #fff4e8;
    padding: 2.75rem 3.563rem 3.75rem 3.563rem;
    min-height:38.75rem;
    margin: 0 auto;
}

.information-col {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    gap: 0.5rem;
    padding: 0 3.563rem 2.125rem 3.563rem;
    margin: 0 auto;
}
.information-col .support:nth-child(1), .information-col .support:nth-child(2) {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}
.information-col .support:nth-child(3) {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 39.66667%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 39.66667%;
    flex: 0 0 39.66667%;
    max-width: 39.66667%;
}
.information-col .support:nth-child(4) {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.footer-title {
    font-family: 'NTJSans-Bold', sans-serif !important;
    text-transform: uppercase;
    line-height: 1.5;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: #FECB8B;
}
.container-end {
    display: flex;
    padding: 3.125rem 3.563rem 3.125rem 3.563rem;
    position: relative;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    margin: 0 auto;
}

.container-end::before {
    content: "";
    position: absolute;
    top: 0;
    left: 3.563rem;
    right: 3.563rem;
    height: 1px;
    background-color: #d60726;
}

.col-lg-3-footer {
    text-align: end;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-lg-6-footer {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
.ls-sub-menu {
    visibility: hidden;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    border-top: 1px solid #cdcdcd;
    padding: 0;
    margin: 0;
    list-style-type: none;
    z-index: 101
}

.container-end p {
    color: #FECB8B;
    /* font-weight: bold; */
    vertical-align: middle;
}
.footer-end{
    margin: 0 auto;
    text-align: center;
    max-width: 90rem;
}
.footer-end span, .footer-end a{
    font-size: 0.625rem;
}
.footer-end p {
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.5;
}

footer .support .submenu .input {
    border-radius: 0;
    color: #FFFFFF;
    background-color: transparent;
    border: none;
    font-size: 0.875rem;
    border-bottom: 1px solid #FECB8B;
    padding: 0.25rem 0;
    width: calc(100% - 1rem);
    margin-bottom: 1.25rem;
    box-sizing: border-box;
}

footer .support .submenu .input::placeholder {
    color: #FECB8B;
}

.utility-icons .icons svg {
    width: 1.5rem;
}

.utility-icons .icons svg {
    fill: #FFFFFF;
    transition: fill 0.3s ease;
    /* Thêm hiệu ứng chuyển đổi */
}

.utility-icons .icons svg:hover {
    fill: #FECB8B;
}

footer .support .submenu ul {
    padding: 0;
}
footer .support form .input-footer{
    position: relative;
}
footer .support form .input-footer:first-of-type{
    margin-bottom: 1rem;

}
footer .support form {
    padding-top: 0.5rem;
}
footer .support .submenu .title-p{
    max-width: 25rem;
}
footer .support .submenu .input-footer label {
  position: absolute;
  left: 0;
  top: 0.25rem;
  color: #FECB8B;
  font-size: 0.875rem;
  pointer-events: none;
  transition: 0.4s ease all;
  padding: 0;
}
footer .support .submenu .input-footer input:focus + label,
footer .support .submenu .input-footer input:not(:placeholder-shown) + label {
  top: -1rem;
  font-size: 0.75rem;
}
footer .support .submenu ul li {
    margin-bottom: 0.1rem;
}

footer .support .submenu .submenu p {
    color: white;
    font-size: 0.9rem;
}

footer ul {
    list-style-type: none;
    padding: 0;
}

footer ul li {
    margin-bottom: 0.5rem;
}

footer .support .submenu li h3 {
    font-size: 1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

footer ul li a {
    color: #fff4e8;
    text-transform: none;
    text-decoration: none;
    font-size: 1rem;
}

footer ul li a:hover {
    color: #FECB8B;
}
.submit-text {
    color: #FFFFFF;
    font-family: "NTJSans", sans-serif;
    /* font-weight: 700; */
    font-size: 1rem;
    text-align: center;
    padding: 0.3rem 2rem;
    border: 1px solid #FECB8B;
    cursor: pointer;
}

.btn-submit {
    display: flex;
    justify-content: center;
    align-items: center;
}

.submit-text:hover {
    color: #FECB8B;
}

.utility-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 2.25rem;
}

.utility-icons .img-icon .notification-icon {
    width: 100% !important;
    /* height: auto; */
    border-radius: 0.25rem !important;
    margin-top: -0.5rem;
    height: 2.5rem !important;
}

.utility-icons .icons .img-icon img {
    width: 100%;
    height: auto;
    /* height: 2rem; */
    border-radius: 0.25rem;
    /* border-radius: 50%; */
    object-fit: cover;
}

.utility-icons .icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 0.938rem;
    gap: 1.25rem;

}

.utility-icons .icons .img-icon.zalo img {
    background-color: #FFFF;
}

.icons a img {
    width: 100%;
    height: 100%;
}

.left-section {
    flex: 0.85;
    margin-right: 1.75rem;
    text-align: center;
    position: relative;
}

.left-section .header {
    font-family: 'NTJDisplay-SemiBold',sans-serif;
    color: #3c3c42;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0.75px;
}

.right-section {
    flex: 3;
}
.time-gold{
    position: absolute;
    top: 80%;
    text-align: left;
    left: 32%;
}
.unit {
    font-family: var(--bold-font);
    /* padding-top: 10rem; */
    /* padding-left: 1.75rem; */
    color: #a2041b;
    margin: 0;
    /* font-weight: bold; */
}
.unit span{
    font-family: var(--medium-font);
    color: #3c3c42;
}
.time {
    margin: 0;
    /* font-size: 1rem; */
    /* padding-left: 1.125rem; */
    color: #3c3c42;
}

.gold-price .table {
    width: 80%;
    border-collapse: collapse;
}

.table th{
    font-family: 'NTJSans-Bold', sans-serif;
    padding: 0.25rem 0;
    text-align: left;
    border-bottom: 1px solid #a2041b;
    color: #a2041b;
    /* font-weight: bold; */
    letter-spacing: 0;
    font-size: 0.875rem;
}
.table .name-gold{
    font-family: 'NTJSans-Bold', sans-serif;
}
.table td {
    /* font-family: 'NTJSans-Bold', sans-serif; */
    padding: 0.5rem 0.25rem;
    text-align: left;
    letter-spacing: 1.8px;
    font-size: 1.125rem;
    color: #212529;
    border-bottom: 1px solid #efd8b6;
}
/* .table tr:hover {
    background-color: #fceddc;
} */

.nav-top {
    display: none;
    position: relative;
    /* visibility: visible; */
    /* Hiển thị nav-top */
    align-items: center;
    z-index: 101;
    padding: 0.5rem 1rem 0.75rem 0;
}

.nav-top .menu-mobile {
    margin-right: auto;
    cursor: pointer;
    display: none;
    color: #6f6f6f;
}

.icon-menu {
    transition: color 0.3s ease, transform 0.3s ease;
}

.icon-menu:before {
    transition: transform 0.3s ease;
}

.nav-is-toggled .icon-menu:before {
    content: "\e907";
    color: #a2041b;
}

.nav-is-toggled .icon-menu {
    transform: scale(1.1);
}

.nav-is-toggled .nav-drill {
    transform: translateX(0);
}
.nav-items.nav-expand-content .nav-item.nav-expand .nav-link.nav-expand-link{
    padding: 0 0 0.5rem 0;
    font-size: 1rem;
    margin: 0;
}
.nav-link.nav-back-link {
    border-bottom: 1px solid #a2041b;
    margin-bottom: 1rem !important;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 500;

}

.nav-is-toggled::after {
    opacity: 1;
    visibility: visible;
}

.nav-drill {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--nav-background-color);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: 0.45s;
    z-index: 1003;
    transform: translateX(-100%);
}
.btn-close-drill::before{
    font-family: 'icomoon-mobile' !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    font-size: 1rem;
    padding-right: 1rem;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e907";
}
/* .nav-is-toggled .right-column{
    visibility: hidden;
} */
.btn-close-drill{
    font-family: var(--bold-font);
    letter-spacing: .75px;
    color: #A2041B;
    text-transform: uppercase;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
}
.menu-nav-items{
    font-family: var(--bold-font);
    color: #a2041b;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #a2041b;
}
.nav-is-toggled .left-column {
    visibility: hidden;
}

.nav-items {
    flex: 0 0 100%;
}

.nav-items h2 {
    font-size: 0;
}

.nav-link {
    display: block;
    padding: var(--nav-padding);
    background-color: var(--nav-background-color);
    color: var(--link-color);
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 300;
}

.nav-expand-content {
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 6rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background-color: var(--nav-level-background-color);
    transition: 0.3s;
    visibility: hidden;
}


.nav-expand-content .nav-link {
    background-color: var(--nav-level-background-color);
}

.nav-expand-content .nav-back-link {
    font-family: 'NTJSans-Bold', sans-serif;
    text-align: center;
    color: #A2041B !important;
    padding: 0;
}

.nav-expand-content .nav-back-link::before {
    display: inline-block;
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 2 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e902";
    font-size: 1rem !important;
    transform: rotate(180deg);
    position: absolute;
    top: 4.5rem;
    left: 1rem;
}
.nav-items.nav-level-1{
    border-top: 4px solid #a2041b;
    padding-top: 5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    position: relative;
}
.nav-expand-link{
    font-family: var(--medium-font);
    color: #3e3d42;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1rem;
    padding: 0 0 1rem 0;
}
.nav-expand-text {
    font-family: var(--medium-font);
    color: #3e3d42;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1rem;
    padding: 1rem 0;
}
.nav-itemss.nav-expand-end {
    opacity: 0;
    transform: translateY(-16px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease, opacity 0.7s ease, transform 0.7s ease;
}

.nav-itemss.nav-expand-end.active {
  opacity: 1;
  transform: translateY(0);
  max-height: 62.5rem;
}

p.nav-link.nav-expand-link,
/* p.nav-link.nav-expand-text, */
.nav-expand-content .nav-link {
    margin-top: -1rem;
    margin-bottom: 0;
}
/* .nav-items.nav-expand-content .nav-item.item-end .nav-link{
    margin: -1rem 0 -1rem 0;
} */
.nav-items .nav-item h3 a {
  padding: 1rem 0; /* mặc định cho tất cả */
  font-size: 0.875rem;
}

.nav-items .nav-item:nth-of-type(2) h3 a {
  padding-top: 1rem; /* áp dụng riêng cho dòng đầu tiên */
}
.nav-items .nav-item h3{
    /* padding: 0 0 1rem 0; */
    margin: 0;
}
.nav-link.nav-expand-link:hover,
.nav-link:hover,.nav-link.nav-expand-text.active {
    color: #a2041b;
}

.nav-item h3 a{
    font-family: var(--medium-font);
    color: #3e3d42;
    text-transform: uppercase;
}
.nav-item.nav-expand p.nav-expand-link::after {
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 2 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e902";
    margin-top: -0.375rem;
    /* transform: rotate(90deg); */
    font-size: 0.875rem !important;
}
.nav-item.nav-expand h2 .nav-expand-link::after,.nav-link.nav-expand-text::after {
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: 400;
    /* position: relative; */
    margin-top: -0.25rem;
    font-variant: normal;
    text-transform: none;
    line-height: 2 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e902";
    font-size: 0.875rem !important;
    display: inline-block;
    transition: transform 0.4s ease;
}
.nav-link.nav-expand-text.active::after {
    transform: rotate(90deg);
}
.nav-expand-shop {
    text-transform: uppercase;
    font-size: 1rem;
    color: #3e3d42;
    padding: 0 0 1rem 0;
}
.nav-drill .nav-level-1 .nav-item.nav-expand:nth-last-child(2) h2 a {
    color: #a2041b;
}
.nav-expand.active>.nav-expand-content {
    transform: translateX(0);
    visibility: visible;
}

.sidebar-heart,
.sidebar-shopping,.session-login {
    position: fixed;
    right: -27.5rem;
    top: 0;
    max-width: 27.5rem;
    height: 100%;
    background: #FFFFFF;
    transition: right 0.6s ease-in-out;
    z-index: 1001;
}

.list-gridHeart .wishlist-empty.emptyy,.sidebarShopping-content .text-shop.emptyy{
    margin-top: 10rem;
}
.img-gridHeart img {
    max-width: 10.563rem;
    max-height: 10.563rem;
    object-fit: cover;
}
/* .scroll-shopping{
    display: flex;
    margin-bottom: 1rem;
    justify-content: center;
    align-items: center;
    gap: 1rem;
} */
.gridHeart,.scroll-shopping {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}
.gridHeartOne{
    margin-left: 1rem;
    margin-right: 0.25rem;
    border: transparent;
    height: 1px;
    background-color: #a2041b;
}
.sidebarHeart-content .list-gridHeart .gridHeart:last-of-type + .gridHeartOne {
  display: none;
}
.bottom-gridHeart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    gap: 1rem;
}
.name-gridHeart {
    margin: 0.15rem;
    font-weight: 500;
}
.text-gridHeart{
    position: relative;
}
.text-gridHeart p,
.text-gridHeart div,
.text-gridHeart a {
    margin: 0;
    padding: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.text-gridHeart div{
    padding: 0.25rem;
}
.add-gridHeart:hover,
.delete-gridHeart:hover,
.delete-gridHeart:hover::after,
.add-gridHeart:hover::after,.btn-delete:hover{
    color: #a2041b;
}
.btn-delete::before{
    font-size: 0.875rem;
    content: "\e904";
}
.add-gridHeart::after{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #3e3d42;
    position: absolute;
    top: 0.18rem;
    right: -0.75rem;
    content: '\e902';
}
.delete-gridHeart{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #3e3d42;
    position: absolute;
    top: 0.5rem;
    right: -0.625rem;
    cursor: pointer;
    z-index: 1;
}
.delete-gridHeart::after{
    content: '\e904';
}
.sidebarShopping-content .ty-price-num,.list-gridHeart .ty-price-num{
    text-decoration: underline;
}
.text-gridHeart .name-gridHeart span,.session-content a{
    position: relative;
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    padding-bottom: 0.25rem;
}
.name-information span{
    position: relative;
    display: inline-block;   /* hoặc block */
    white-space: normal;     /* cho phép xuống hàng */
    word-break: break-word;  /* tự động xuống khi quá dài */
    padding-bottom: 0.25rem;
}
.name-information{
    padding-bottom: 1.5rem;
    cursor: pointer;
}
.text-gridHeart .name-gridHeart span::after,.session-content a::after,.name-information span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #a2041b;
    /* Màu gạch chân */
    transition: width 0.5s ease-in-out;
}

.text-gridHeart .name-gridHeart span:hover::after,.session-content a:hover::after,.name-information span:hover::after {
    width: 100%;
}
/*User login*/
.session-content{
    padding: 15rem 4rem;
}
.session-content h2{
    font-size: 2rem;
    margin: 0;
}
.session-content div{
    margin-top: 0.5rem;
    padding: 0.5rem 0;
}
.content-order::after,
.personal-Information::after,
.signIn-Information::after,
.content-preferences::after,
.content-addresses::after,
.content-signOut::after{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #3e3d42;
    margin-left: 0.5rem;
    content: '\e902';
}
/**/
.btn-gridHeart{
    display: none;
    justify-content: space-between;
    border-top: 1px solid #a2041b;
    gap: 1rem;
    margin: auto 2rem auto 2rem; /* Đẩy phần này xuống cuối */
    padding: 2rem 0;
}

.list-heart {
    display: flex;
    background-color: #F7F7F7;
    flex-direction: column;
    align-items: center;
    /* Căn giữa nội dung theo chiều ngang */
    text-align: center;
    cursor: pointer;
}

.list-heart:hover {
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.2);
}

.heartlist {
    display: flex;
    justify-content: end;
    width: 100%;
    height: 1.5rem;
    padding: 0 0.5rem;
    align-items: center;
    position: relative;
}

.list-heart img {
    max-width: 13rem;
    max-height: 13rem;
    -webkit-transition: all .25s;
    transition: all .25s;
    object-fit: cover;
}

.text-heart {
    width: 100%;
    text-align: left;
    padding: 0 0.5rem;
}

.name-heart {
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
}

.price-heart {
    margin: 0;
    font-size: 0.875rem;
    color: #a2041b;
}
/* .list-shopping {
    overflow-y: auto;
    height: 32rem;
    padding: 2rem;
    font-size: 0.9rem;
    position: relative;
} */
.list-gridHeart,.list-shopping {
    overflow-y: auto; /* Cuộn nếu nội dung dài */
    margin-bottom: 1rem; /* Tạo khoảng cách với nút dưới */
    /* max-height: 48rem; */
    height: 32rem;
    /* min-height: 41rem; */
    margin: 1rem 1rem 0 1rem;
}
.sidebar-heart.active,
.sidebar-shopping.active,.session-login.active {
    right: 0;
    overflow: auto;
}
.sidebarHeart-content h2,
.sidebarShopping-content h2 {
    font-size: 1.5rem;
    margin: 0 auto;
}

.list-title {
    background-color: #FFF4E8;
    padding: 1rem;
}
.list-title h2{
    text-transform: uppercase;
}

.show-shoping {
    border-top: 1px solid #a2041b;
    margin: auto 2rem auto 2rem; /* Đẩy phần này xuống cuối */
    padding: 1.5rem 0;
}
/* .show-shoping a{
    position: relative;
} */
.show-shoping a::after{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 1rem;
    /* margin-left: 0.5rem; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #3e3d42;
    position: relative;
    top: 0.125rem;
    left: 0.5rem;
    /* top: 2.25rem; */
    /* left: 10rem; */
    content: '\e902';
}
/* .scroll-shopping::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background-color: #a2041b;
} */
.subtotal-text{
    font-family: 'NTJSans-Bold',sans-serif;
    font-size: 1rem;
}
.subtotal-amount{
    /* font-size: 1.125rem; */
    text-transform: uppercase;
    cursor: pointer;
}

.list-information {
    display: grid;
    position: relative;
    grid-template-columns: repeat(1, 3fr);
    gap: 0;
}

.listImg img {
    display: block;
    margin: 0;
    max-width: 10.563rem;
    max-height: 10.563rem;
}

.quantity-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.quantity-section .btn-group {
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 0.25rem;
}

.quantity-section .btn-quantity {
    width: 1.875rem;
    height: 1.5rem;
    text-align: center;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
}

.quantity-section .quantity-display {
    width: 1.875rem;
    height: 1.5rem;
    border: none;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    text-align: center;
    line-height: 1.5rem;
    background: white;
}

.quantity-section .price {
    font-size: 1rem;
}

.subtotal {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    /* padding: 0 2rem 1.25rem 2rem; */
    margin: 0 2rem;
    padding: 1rem 0.5rem;
    color: #a2041b;
    border: 1px solid #a2041b;
}
.btn-quantity:hover {
    opacity: 0.7;
}
.total {
    font-weight: 700;
}

.amount,.show-shoping a:hover,.show-shoping a:hover::after {
    color: #a2041b;
}

.btn-view {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2rem;
}
.btn-viewWish::after{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #3e3d42;
    margin-left: 0.5rem;
    content: '\e902';
}
.btn-viewWish:hover,.btn-viewWish:hover::after{
    color: #a2041b;
}
.btn-viewCart,
.btn-checkout {
    font-family: 'NTJSans-Bold', sans-serif;
    color: #A2041B;
    width: 100%;
    text-align: center;
    background: #fff;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid #A2041B;
    padding: 0.625rem 1.25rem;
}

.btn-viewCart:hover,
.btn-checkout:hover {
    background-color: #A2041B;
    color: #FECB8B;
    border: 1px solid #FECB8B;
}

.btn-delete {
    font-family: 'icomoon' !important;
    position: absolute;
    right: -0.25rem;
    top: -0.875rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    cursor: pointer;
}

.closeHeart-btn,
.closeShopping-btn {
    font-family: 'icomoon-mobile', sans-serif !important;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    background: none;
    border: none;
    color: #a2041b;
    font-size: 1rem;
    cursor: pointer;
}

.closeHeart-btn::before,
.closeShopping-btn::before{
    content: '\e907';
}
.overlaybar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 200;
}
.overlaysearch {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 9;
}
.overlay-heart,
.overlay-shopping,.overlay-login{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 999;
}

.overlay-heart.active,
.overlay-shopping.active,.overlay-login.active,.overlaybar.active,.overlaysearch.active,.nav-is-toggled .overlaybar {
    opacity: 1;
    visibility: visible;
    overflow: hidden;
}

.ul-level1 {
    padding-left: 2rem;
    font-size: 0.9rem;
    line-height: 1.8;
    word-break: keep-all;
    list-style-type: disc;
}

.ul-level2 {
    padding-left: 3rem;
    word-break: keep-all;
    list-style-type: circle;
}
/* .parallax.breadcrumb{
    display: none;
} */
.breadcumb {
    max-width: 90rem;
    margin: 1rem auto;
    padding-left: 2rem;
}

.breadcumb li {
    display: inline-block;
    position: relative;
}

.breadcumb li a,
.breadcumb li span {
    font-family: "NTJSans-Regular",sans-serif;
    font-size: 0.75rem;
    color: #3e3d42;
}

.breadcumb li a span:hover {
    color: #a2041b;
}

.breadcumb li:after {
    content: '\2022';
    color: #3e3d42;
    font-size: 0.9rem;
    padding: 0 0.5rem;
}

/* Ẩn dấu chấm ở phần tử cuối cùng */
.breadcumb li:last-child:after {
    content: none;
}
.error-message {
    color: red;
    font-size: 0.875rem;
    padding-bottom: 0.625rem;
    display: block;
}
.support .submenu .success-message{
    text-align: center;
}
.success-message {
    color: #F7F7F7;
    font-size: 0.875rem;
    padding-bottom: 0.625rem;
    display: block;
}
.promo-banner {
  width: 100%;
  height: 2.25rem;
  background-color: #a2041b;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
  z-index: 201;
  display: flex;
  justify-content: center;
  transform: max-height 0.5 ease;
}

.promo-banner-inner {
  width: 100%;
  transition: transform 0.7s ease-in-out;
}
.promo-banner-inner .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
}
.promo-banner a {
  padding-top: 0.125rem;
  font-size: 0.875rem;
  text-align: center;
}
.promo-banner span {
  display: block; /*-webkit-box*/
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0;
  padding: 0 0.5rem;
  margin-top: 0.125rem;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  transition: all 0.3s ease;
}

.promo-banner span.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: unset;
}
.promo-banner .see-more {
  font-size: 0.75rem;
  color: #fff;
  text-decoration: underline;
  margin-top: 0.25rem;
  cursor: pointer;
}

.promo-banner span:hover {
  text-decoration: underline;
  cursor: pointer;
}
.hidden {
    display: none;
    transform: translateY(-100%);
}
@media (min-width: 1440px) and (max-width: 1620px)
{
    .table td{
        padding: 0.25rem;
    }
    .gold-price{
        padding-bottom: 2rem;
    }
}
@media (min-width: 1024px) and (max-width: 1440px) {
     .container-img .see-more{
        right: 47%;
     }
    .left-section{
        flex: 1.25;
    }
    .utility-icons .icons svg {
        width: 1.125rem;
    }
    .menu-bar-content .mennu {
        padding: 0 1rem;
    }
    .table td{
        padding: 0.25rem;
    }
    .gold-price{
        padding-bottom: 2rem;
    }
    .information-col .support:nth-child(1),
    .information-col .support:nth-child(2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.66667%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .information-col .support:nth-child(3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 29.66667%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 29.66667%;
        flex: 0 0 29.66667%;
        max-width: 29.66667%;
    }

    .information-col .support:nth-child(4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 35%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 35%;
    }
}
@media(min-width: 1024px) and (max-width:1270px){
    .menu-bar-content .container.parent .mennu .menu-item h2{
        margin: 0 0.75rem;
    }
}
@media (max-width: 1024px) {
    .nav-top {
        display: flex;
    }
    .time-gold{
        top: 80%;
        left: 20%;
    }
    .title-header{
        padding: 0 2.25rem 0 2.25rem;
    }
    .menu-bar-content{
        display: none;
    }
    .nav-top .menu-mobile {
        display: block;
    }
    .table td{
        font-size: 1rem;
    }
    .utility-icons .icons svg {
        width: 1.125rem;
    }
    .nav-top .menu-mobile span{
        font-family: "NTJSans-Bold",sans-serif;
        position: absolute;
        font-size: 0.875rem;
        text-transform: uppercase;
        left: 1.5rem;
        top: 0.175rem;
        color: #A2041B;
    }
    .promo-banner{
        z-index: 0;
    }
    .overlaysearch{
        top: 6.25rem;
    }
    .col-lg-6-footer{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 33.333%;
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    .col-lg-3-footer{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 33.333%;
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    .utility-icons .icons{
        gap: 0.5rem;
    }
    .div-icon-mobile .toggle-shopping .icon-user{
        font-size: 1.125rem;
    }
    .div-icon-mobile .toggle-shopping .icon-user:hover{
        color: #FECB8B;
    }
    .div-icon-mobile .toggle-shopping .icon-user span:hover{
        color: #a2041b;
    }
    .nav-drill {
        display: flex;
    }
    .nav-is-toggled .menu-bar{
        z-index: 4;
    }
    .header-div img{
        top: 0 !important; 
    }
    .right-column{
        gap: 1.25rem;
        padding-right: 0;
    }
    .center-column img{
        position: relative;
        left: -2.5rem;
        max-width: 15rem;
        height: auto;
    }
    .right-column a,.right-column .icon-user,.right-column .toggle-heart{
        display: none;
    }
    .menu-bar-content .mennu {
        display: none;
        padding: 0;
    }
    footer{
        padding: 2.75rem 2rem;
    }
    .information-col .support:nth-child(1),
    .information-col .support:nth-child(2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.66667%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .information-col .support:nth-child(3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 29.66667%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 29.66667%;
        flex: 0 0 29.66667%;
        max-width: 29.66667%;
    }

    .information-col .support:nth-child(4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 35%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 35%;
    }
    .header .right-column .search {
        width: 15rem;
    }

    .gold-price {
        padding: 1.875rem 1rem;
    }
    .div-icon-mobile{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: absolute;
        width: 88.5%;
        top: 24.5rem;
        padding: 1rem 0;
        color: #6f6f6f;
        border-top: 1px solid #A2041B;
    }
    .div-icon-mobile .toggle-heart span{
        position: absolute;
        text-transform: uppercase;
        top: 0;
        left: 1.5rem;
        color: #3c3c42;
        font-size: 1rem;
    }
    .div-icon-mobile .toggle-heart span:hover{
        color: #a2041b;
    }
    .div-icon-mobile .icon-user.toggle-user span{
        font-family: var(--medium-font);
        text-transform: uppercase;
        position: absolute;
        color: #3c3c42;

        left: 1.5rem;
        top: 4.125rem;
        font-size: 1rem;
    }
    .left-column{
        width: 6.375rem;
    }
    .menu-search{
        padding: 0 3.125rem;
    }
    .menu-search-all .search-all{
        margin: 0 3.125rem;
    }
    .menu-search .icon-search{
        right: 4.5rem;
    }
    .right-section {
        flex: 2;
    }
}
@media(min-width:768px){
    .menu-bar,footer,.banner-main,.promo-banner{
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .js-loaded .menu-bar,.js-loaded footer,.js-loaded .banner-main,.js-loaded .promo-banner{
        opacity: 1;
    }
}
@media (max-width: 768px) {
    .unit {
        padding-top: 1.25rem;
        text-align: left;
        padding-left: 0;
    }
    .footer-end {
        padding: 3.125rem 0 1.5rem 0;
    }
    .footer-end span br{
        display: nonex;
    }
    .time-gold{
        position: unset;
    }
    .time-gold .time br{
        display: none;
    }
    .menu-search .icon-search{
        font-size: 1.25rem;
    }
    .menu-search.active{
        max-height: 4rem;
    }
    .menu-search-all .search-all .search-item span, .menu-search-all .search-all .search-item-none span{
        font-size: 1rem;
    }
    .menu-search-all .search-all .search-item img {
        width: 3.125rem;
        height: 3.125rem;
        object-fit: cover;
    }
    .menu-search .icon-search{
        right: 4rem;
    }
    .menu-search input{
        border-radius: 0 !important;
        margin-top: 0;
        font-size: 1.5rem;
    }
    .menu-search .icon-search{
        bottom: 1.25rem;
    }
    .time{
        text-align: left;
        padding-left: 0;

    }
    .col-lg-6-footer{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-lg-3-footer{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .table td{
        font-size: 1rem;
        padding: 0.75rem 0.5rem 0 0;
        letter-spacing: .5px;
    }
    .sidebar-heart,
    .sidebar-shopping,.session-login {
        right: -48rem;
        width: 100%;
    }
    .center-column img {
        position: relative;
        top: -0.25rem;
        left: 0;
        aspect-ratio: 160 / 27;
        max-width: 10rem;
        height: auto;
    }
    .gold-center.show .table{
        width: 100%;
    }
    .menu-bar-content .mennu {
        padding: 0;
    }
    .gold-center {
        max-height: unset;
        height: 0;
        transition: transform 0.3s ease, height 0.3s ease;
    }
    .gold-center.show {
        position: absolute;
        top: -2rem;
        height: 62rem;
        max-height: unset;
    }
    body.js-loaded.overflow-hidden {
        overflow: hidden;
    }
    .left-column.show .icon-close
    {
        position: absolute;
        z-index: 2 !important;
        top: 0;
        right: 4rem;
    }
    .left-column {
        width: 2.5rem;
        position: relative;
        left: 1.25rem;
    }

    .title-gold {
        display: none;
    }
    footer {
        padding: 1.875rem 1.5rem;
        min-height: 20rem;
    }
    .gold-price {
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        margin-top: -1rem;
    }
    .left-section {
        flex: 1;
        margin-right: 0;
        order: 0;
    }

    .right-section {
        margin-top: 8rem;
        flex: 0.5;
        order: 0;
    }
    .gold-price .left-section .header{
        display: none;
        visibility: hidden;
    }
    .menu-bar-content {
        display: none;
    }
    .menu-bar .header{
        padding: 0;
    }
    .title-header{
        padding: 0.625rem 1.25rem 0.625rem 1.25rem;
        z-index: auto;
    }
    .icon-gold{
        margin-top: -0.25rem;
    }
    .nav-top{
        padding: 0;
    }
    .menu-bar .menu-bar-content.show {
        display: block;
    }

    .menu-bar-content {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff4e8;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
        padding: 1.25rem;
        z-index: 10;
    }
    .menu-bar-content .menu-top {
        display: block;
        text-align: center;
    }

    .menu-bar-content .toggle-menu {
        display: block;
        padding: 0.625rem;
    }

    .menu-top .toggle-menu a {
        display: block;
        padding: 0.625rem;
        color: #6f6f6f;
        text-transform: uppercase;
    }

    .menu-top .toggle-menu a:hover {
        color: #a2041b;
    }
    .breadcumb {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .breadcumb li {
        flex: 0 0 auto;
        margin-right: 0.5rem;
    }
    .footer-title{
        margin-bottom: 0.25rem;
    }
    .utility-icons{
        margin-top: 3.125rem;
    }
    .utility-icons .icons{
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: nowrap;
    }
    .utility-icons .icons svg{
        width: 2.188rem;
    }
    .information-col {
        display: flex;
        flex-direction: column;
        padding: 0 0 1rem 0;
    }
    .information-col .support:nth-child(1),
    .information-col .support:nth-child(2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .information-col .support:nth-child(3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .information-col .support:nth-child(4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer-title::after {
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\e902";
        font-size: 0.875rem;
        margin-left: 0.75rem;
        display: inline-block;
        transition: transform 0.3s ease;
    }
    .footer-title.rotated::after{
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-0.625rem);
        transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    }
    .submenu.active {
        max-height: 18.75rem;
        opacity: 1;
        transform: translateY(0);
    }
    /* .submenu.active li {
        opacity: 0;
        transform: translateY(-0.625rem);
        animation: fadeInSlideDown 0.3s ease forwards;
    }
    .submenu.active li:nth-child(1) { animation-delay: 0.1s; }
    .submenu.active li:nth-child(2) { animation-delay: 0.2s; }
    .submenu.active li:nth-child(3) { animation-delay: 0.3s; }
    @keyframes fadeInSlideDown {
        from {
            opacity: 0;
            transform: translateY(-0.625rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    } */
    .container-end {
        border-top:none;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 1.5rem 2rem 0 2rem;
    }
    .container-end p{
        font-size: 0.75rem;
    }
    .footer-end span, .footer-end a{
        font-size: 0.625rem;
        letter-spacing: 0;
    }
    footer .container-end img {
        position: static;
        width: 6rem;
    }
    footer ul li a{
        font-size: 0.875rem;
    }
    .container-end p:first-child{
        display: none;
    }
    .container-end::before {
        content: "";
        position: absolute;
        top: 0;
        left: 1.563rem;
        right: 1.563rem;
        height: 1px;
        background-color: #d60726;
    }
    .promo-banner{
        height: 2.375rem;
    }
}
@media (max-width: 480px) {
    .nav-top .menu-mobile {
        display: block;
    }
    .information-col .support:nth-child(1),
    .information-col .support:nth-child(2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }
    .right-section{
        margin-top: 4rem;
    }
    .btn-delete{
        right: -0.625rem;
        top: -1rem;
    }
    footer .support .submenu .input-footer label{
        top: -0.125rem;
    }
    .promo-banner a{
        font-size: 0.75rem;
    }
    footer .support .submenu .input {
        width: 100%;
        font-size: 1rem;
    }
    .menu-search .icon-search{
        right: 2.5rem;
    }
    footer .support .submenu .input-footer input {
        transform: scale(0.875);
        transform-origin: top left;
        width: calc(100% / 0.875);
        height: calc(100% / 0.875);
    }
    .information-col .support:nth-child(3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }
    
    .information-col .support:nth-child(4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .list-gridHeart {
        grid-template-columns: 1fr;
    }
    .heartlist {
        padding: 0.5rem;
    }
    .list-heart img {
        max-width: 19rem;
        max-height: 19rem;
    }
    .utility-icons .icons{
        flex-wrap: wrap;
        padding: 0 2rem;
    }
    .utility-icons .img-icon .notification-icon{
        display: block;
        width: 40% !important;
        margin: 0 auto;
        height: auto !important;
    }
    .quantity-section {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .bottom-gridHeart {
        gap: 2rem;
    }

    .icon-search,
    .icon-wishlist,
    .icon-gold {
        padding-right: 0;
    }

    .center-column {
        padding: 0 0.25rem;
    }

    .right-column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding-right: 0.25rem;
    }
    .left-section {
        flex: 1;
        margin-right: 1.25rem;
        margin-bottom: 0;
    }
    .menu-bar-content {
        display: none;
    }

    .menu-bar .menu-bar-content.show {
        display: block;
    }
    .menu-search{
        padding: 0 2rem;
    }
    .menu-search-all .search-all{
        margin: 0 2rem;
    }
    .menu-bar-content {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff4e8;
        box-shadow: 0px 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
        padding: 1.25rem;
        z-index: 10;
    }

    .menu-bar-content .menu-top {
        display: block;
        text-align: center;
    }

    .menu-bar-content .toggle-menu {
        display: block;
        padding: 0.625rem;
    }
    .menu-top .toggle-menu a {
        display: block;
        padding: 0.625rem;
        color: #6f6f6f;
        text-transform: uppercase;
    }
    .menu-top .toggle-menu a:hover {
        color: #a2041b;
    }
}
#loading {
    display: none;
}

.loadingLoader {
    width: 2.125rem;
    height: 2.125rem;
    margin: 1.563rem 0 0 1.563rem;
    border-radius: 50%;
    background-color: #979797;
    display: flex;
    position: relative;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.loadingLoader::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    left: 0.125rem;
    top: 0.75rem;
    border-radius: 50%;
    background-color: #FFFFFF;
    animation: spin 1s linear infinite;
    transform-origin: 1rem center;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loadingbg {
    background-color: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10001;
    opacity: 0.2;
}