@font-face {
    font-family: 'BuffaloInline2Grunge';
    src: local('BuffaloInline2Grunge'),
         url('../font/BuffaloInline2Grunge.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GentiumBookPlus';
    src: url('/public/themes/shop/royal-theme/font/GentiumBookPlus-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-family-primary: GentiumBookPlus;
    --font-family-secondary: 'BuffaloInline2Grunge';


    --font-size-primary: 1.04vw;
    --font-size-2: 1.33vw;
    --font-size-3: 1.56vw;
    --font-size-4: 2vw;
    --font-size-5: 5vw;
    --font-size-6: 7vw;

    --font-size-mobile-primary: 2.65vw;
    --font-size-mobile-2: 3.62vw;
    --font-size-mobile-3: 4.34vw;
    --font-size-mobile-3-1: 4.83vw;
    --font-size-mobile-3-2: 4.83vw;
    --font-size-mobile-3-3: 7.24vw;
    --font-size-mobile-4: 9.66vw;
    --font-size-mobile-5: 14.49vw;
    --font-size-mobile-6: 28.94vw;


    --main-bg-color: #E1DAC8;
    /* Màu nền chính */
    --header-bg-color: #D4A972;
    /* Màu nền header */
    --footer-bg-color: #DDB888;
    /* Màu nền footer */
    --primary-text-color: #060668;
    /* Màu chữ chính */
    --secondary-text-color: #ffffff;
    /* Màu chữ phụ */
    --border-color: #835322;
    /* Màu viền */
    --item-bg-color: #D9D9D9;
    /* Màu nền cho items */
    --hover-scale: 105%;
    /* Tỷ lệ mở rộng khi hover */

    --color-white: #ffffff;
    --color-black: #000000;
    --color-primary: #835322;
    --color-2: #DDB888;
    --color-3: #060668;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #835322 !important;
    box-shadow: 0 0 0 1000px var(--main-bg-color) inset !important;
}

body {
    font-family: var(--font-family-primary);
    width: 100%;
    height: auto;
    background-color: var(--main-bg-color);
    color: var(--color-primary);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    opacity: 0;
    transition: opacity 1s ease;
}

main {
    width: 100%;
    height: auto;
}



@media screen and (max-width: 765px) {
    .banner {
        height: 128.01vw;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        overflow: hidden;
        /* Ẩn phần bị tràn */
        position: relative;
        /* Đảm bảo các phần tử con bị cắt trong phạm vi */
    }

    .bg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .bg>img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .banner>img {
        width: 169.08vw;
        height: 169.08vw;
    }

    
    .banner>.divTextSky {
        font-family: var(--font-family-secondary);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        position: absolute;
        top: 14.49vw;
        z-index: 1;
        width: 100%;
        animation: textbanner 1.5s ease-out forwards;
        opacity: 0;
    }

    .banner>.divTextSky>h1 {
        text-transform: uppercase;
        font-size: 7.24vw;
        line-height: 7.24vw;
        margin-bottom: 0;
    }

    .banner>.divTextSky>h1:first-child {
        color: var(--color-3);
    }

    .banner>.divTextSky>h1:last-child {
        color: var(--color-white);
    }

    @keyframes textbanner {
        0% {
            transform: translateY(-400%);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }





    @keyframes the4div {
        0% {
            transform: translateY(400%);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }


    .banner>.divThe4 {
        width: 70%;
        height: 67.63vw;
        position: absolute;
        top: 48.30vw;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 9;
        background-color: rgba(6, 6, 104, 0.44);
        overflow: hidden;
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 0 4.83vw;
        animation: the4div 2s ease-in-out;
    }


    .banner>.divThe4 {
        flex: 1;
        display: flex;
        flex-direction: column;
        transition: all 0.5s ease-in-out;
    }

    .banner>.divThe4>div {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: all 0.5s ease-in-out;
        overflow: hidden;
        position: relative;
    }

    /* .banner > .divThe4 > div.expanding {
        transform-origin: center;
        animation: expandAnim 0.5s ease-in-out forwards;
    }
     */
    @keyframes expandAnim {
        0% {
            flex: 1;
            height: 25%;
        }

        100% {
            flex: 1;
            height: 100vh;
            /* Chiếm toàn bộ không gian màn hình */
        }
    }

    /* Khi div được mở rộng */
    .banner>.divThe4>div.expanded {
        height: 100vh;
        margin-bottom: 2.41vw;
    }

    .banner>.divThe4>div>h1 {
        font-size: 3.38vw;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .banner>.divThe4>div>h1>text {
        line-height: 100%;
        font-size: 3.62vw;
        font-family: var(--font-family-secondary);
    }


    .banner>.divThe4>div>h1>img {
        width: 3.62vw;
        height: 3.62vw;
    }

    /* H1 chiếm 25% div khi mở */
    .banner>.divThe4>div.expanded>h1 {
        flex: none;
        height: 25%;
        width: 100%;
        display: flex;
    }

    /* P chiếm 75% div khi mở và có thể cuộn */

    .banner>.divThe4>div>p {
        display: none;
    }


    .banner>.divThe4>div.expanded>p {
        display: block;
        flex: 1;
        height: 75%;
        overflow-y: auto;
        font-size: 3.86vw;
    }

    /* Khi div đầu tiên mở ra, thu nhỏ từ trên xuống */
    .banner>.divThe4>div.expand-down {
        height: 100vh;
    }

    .banner>.divThe4>div.expand-down>h1 {
        flex: none;
        height: 25%;
        width: 100%;
    }





    /* Ẩn các div khác khi mở */
    .banner>.divThe4>div.hidden {
        opacity: 0;
        height: 0 !important;
        flex: 0 !important;
        pointer-events: none;
        transition: all 1.2s ease-in-out;
    }








    .banner>.theHistory {
        display: none;
    }




    .textH1 {
        text-align: center;
        text-transform: uppercase;
        color: var(--color-3);
        font-size: var(--font-size-mobile-4);
        font-family: var(--font-family-secondary);


    }

    .textP {
        text-align: center;
        color: var(--color-white);
        font-size: var(--font-size-mobile-2);
    }



    main {
        width: inherit;
    }

    .main {
        width: inherit;
        height: auto;
        background-color: #B58F46;
    }

    .main>.bestSellers {
        width: inherit;
        height: auto;
        padding: 4.83vw;
        margin-top: 9.66vw;
    }

    .judge {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: flex-start;
        /* overflow: hidden;  */
        height: auto;
    }

    .main>.bestSellers>.judge>a {
        width: 36.23vw;
        height: 72.64vw;
        margin-top: 7.24vw;
        text-decoration: none;
    }

    .main>.bestSellers>.judge>a>div {
        background-color: transparent;
        width: inherit;
        height: 36.23vw;
    }

    .main>.bestSellers>.judge>a>div>img {
        width: 100%;
        height: 100%;
        border-radius: 4.83vw;
    }


    .main>.bestSellers>.judge>a>div:hover {
        transform: scale(var(--hover-scale));
        cursor: pointer;
    }

    .main>.bestSellers>.judge>a>p:first-of-type {
        text-align: center;
        color: var(--color-white);
        margin: 3.62vw 0;
        font-weight: bold;
        font-size: var(--font-size-mobile-2);
    }


    .main>.bestSellers>.judge>a>p:last-of-type {
        color: var(--color-white);
        font-size: 2.65vw;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        width: 100%;
    }


    .main>.viewAllProducts {
        width: 55.55vw;
        height: 12.07vw;
        line-height: 12.07vw;
        font-size: var(--font-size-mobile-3);
        font-weight: bold;
        color: var(--color-white);
        margin: auto;
        text-align: center;
        background-color: rgba(245, 245, 245, 0.27);
        border-radius: 12.07vw;
        border: var(--border-color) solid 2px;
    }


    .main>.viewAllProducts>a {
        text-decoration: none;
        color: var(--color-white);
    }



    .main>.viewAllProducts:hover {
        cursor: pointer;
        background-color: rgba(245, 245, 245, 0.10);
    }

    .main>.ourFoundation {
        width: inherit;
        height: auto;
        padding: 12.07vw 12.07vw;
    }

    .main>.ourFoundation>.judge>div {
        background-color: rgba(255, 255, 255, 0.20);
        width: 100%;
        height: auto;
        border-radius: 9.66vw;
        text-overflow: ellipsis;
        padding: 4.83vw;
        margin-bottom: 2.41vw;
        display: flex;
        flex-direction: row;
        margin-top: 4.83vw;
    }

    .main>.ourFoundation>.judge>div>h1 {
        align-self: center;
        min-width: 16.90vw;
        color: var(--color-3);
        font-weight: bold;
        font-size: 4.83vw;
    }

    .main>.ourFoundation>.judge>div>p {
        text-align: left;
        padding: 0 4.83vw;
        font-size: var(--font-size-mobile-primary);
        color: var(--color-white);
        height: auto;
    }










    /* HISTORY */

    .mainHistory {
        width: 100%;
        height: auto;
    }

    .dots {
        display: none;
    }

    .slides {
        width: 100vw;
        height: 150vw;
        overflow: hidden;
        position: relative;
        background-color: #ddd;
    }

    .slide {
        width: 100vw;
        height: 100%;
        position: absolute;
        top: 0;
        left: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
        color: white;
        transition: left 0.3s ease-out;

        display: flex;
        flex-direction: column;
        padding: 12.07vw 7.24vw;


    }

    .slide>* {
        width: 100%;
        text-align: left;
    }


    .slide:first-child {
        left: 0;
        z-index: 1;
    }




    .slide:first-child::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 7.24vw;
        height: 100%;
        background: rgba(151, 151, 151, 0.5);
        pointer-events: none;
    }

    .slide>img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        z-index: -1;
    }

    .slide>h1 {
        font-family: var(--font-family-secondary);
        font-size: var(--font-size-mobile-4);
        color: var(--color-2);

    }

    .slide>p:first-of-type {
        font-size: var(--font-size-mobile-3);
        color: var(--color-white);
    }

    .slide>p:last-of-type {
        padding-top: 2.41vw;
        font-size: var(--font-size-mobile-2);
        color: var(--color-white);
        width: 100%;
        max-height: 72.64vw;
        overflow: hidden;
        transition: overflow 0.2s ease-in-out;
        scrollbar-width: none;
        -ms-overflow-style: none;
        word-wrap: break-word;
        white-space: normal;
    }

    .slide>p:hover {
        overflow-y: auto;
    }

    .slide>p:hover::-webkit-scrollbar {
        display: block;
    }







    /*PRODUCT */

    .mainProduct {
        width: 100%;
        height: auto;
        padding: 0 7.24vw;
    }

    .outOfStock {
        font-size: 5vw;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #83532295;
        height: 30vw;
        flex: 2;
    }

    .bannerProduct {
        width: 100vw;
        height: 169.08vw;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        justify-content: center;
        overflow: hidden;
        position: relative;
        left: -7.24vw;
        ;

    }

    .mainProduct>.textH1Product {
        line-height: 12.07vw;
        margin-top: 12.07vw;
    }


    .mainProduct>p {
        text-align: center;
        font-size: 3.86vw;
        color: var(--color-primary);
        font-weight: bold;
    }


    .mainProduct>.product {
        margin-top: 4.83vw;
        display: flex;
        flex-direction: row;
        width: inherit;
        height: auto;
        position: relative;
    }

    .mainProduct>.product>.menuProduct {
        background-color: var(--color-2);
        position: absolute;
        height: auto;
        left: -35.02vw;
        transition: left 0.3s ease-in-out;
    }

    .imgClose {
        background: url('../img/close.png');
    }

    .imgOpen {
        background: url('../img/open.png');
    }

    .buttonMenu {
        position: absolute;
        top: 0;
        right: -9.66vw;
        width: 9.66vw;
        height: 9.66vw;
        background-size: 100% 100%;
        background-position: center;
        opacity: 1;
        /* Điều chỉnh độ trong suốt nếu cần */
        transition: opacity 0.5s ease-in-out;
    }

    .mainProduct>.product>.menuProduct>ul {
        height: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 4.83vw 4vw;
        list-style: none;
        width: 27.05vw;
    }


    /*

.mainProduct>.product>.menuProduct>ul {
    height: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 140px;
    list-style: none;
}

.mainProduct>.product>.menuProduct>ul>li {
    width: 100%;
    height: 29.98vw;
    padding: 7.24vw 0;
    
}
.mainProduct>.product>.menuProduct>ul>li > a {
    width: 100%;
    height: 100%; 
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7.24vw;
    text-decoration: none;
}

.mainProduct>.product>.menuProduct>ul>li:hover{
    cursor: pointer;
}
*/

    .mainProduct>.product>.menuProduct>ul>li {
        text-align: left;
        padding: 2.41vw 0;
    }

    .mainProduct>.product>.menuProduct>ul>li:hover {
        cursor: pointer;
    }

    .mainProduct>.product>.menuProduct>ul>li>a {
        width: 100%;
        height: 100%;
        text-decoration: none;
    }

    .mainProduct>.product>.menuProduct>ul>li>a>div {
        display: none;
    }


    .mainProduct>.product>.menuProduct>ul>li>a>p {
        font-size: var(--font-size-mobile-2);
        color: var(--color-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }




    .mainProduct>.product>.allProduct {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        width: 100%;
        padding: 0 7.24vw;
        gap: 10%;
    }

    .mainProduct>.product>.allProduct>div {
        height: auto;
        width: 24.15vw;
        margin: 4.83vw 2.41vw;
    }

    .mainProduct>.product>.allProduct>div>div:first-child {
        background-color: #afafaf;
        width: 24.15vw;
        height: 24.15vw;
        margin: auto;
        border-radius: 2.41vw;
    }

    .mainProduct>.product>.allProduct>div>div:first-child:hover {
        outline: 2px white solid;
    }

    .mainProduct>.product>.allProduct>div>div:first-child>img {
        height: inherit;
        width: inherit;
        border-radius: 2.41vw;
    }

    .mainProduct>.product>.allProduct>div>a {
        text-align: center;
        font-size: var(--font-size-mobile-3);
        font-family: var(--font-family-secondary);
        text-transform: uppercase;
        margin-top: 3.62vw;
        color: var(--color-3);
        color: var(--color-3);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        display: block;
        width: 100%;
    }

    .mainProduct>.product>.allProduct>div>a:hover {
        text-decoration-line: underline;
    }


    .mainProduct>.product>.allProduct>div>p:nth-child(3) {
        text-align: center;
        font-size: var(--font-size-mobile-3);
        color: var(--color-primary);

    }

    .mainProduct>.product>.allProduct>div>div:last-child {
        display: none;
    }

    .mainProduct>.product>.allProduct>div>div:last-child>div:first-child {
        height: inherit;
        background-color: #835322;
        width: 40%;
        border-radius: 3.62vw;
        color: var(--color-white);
        font-size: var(--font-size-primary);
        font-weight: bold;
        text-align: center;
        line-height: 10.86vw;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        will-change: transform;
    }

    .mainProduct>.product>.allProduct>div>div:last-child>div:first-child:hover {
        transform: scale(110%);
        cursor: pointer;
    }

    .mainProduct>.product>.allProduct>div>div:last-child>div:last-child {
        height: inherit;
        background-image: url('../img/plus.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 20%;
    }


    .mainProduct>.product>.allProduct>div>div:last-child>div:last-child:hover {
        transform: scale(110%);
        cursor: pointer;
    }

    .customerReviews {
        width: 100%;
        height: auto;
    }

    .customerReviews>.textH1Product {
        line-height: 12.07vw;
        margin-top: 12.07vw;
    }

    .customerReviews>div {
        flex: 3;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7.24vw;
        margin-top: 7.24vw;
        align-items: flex-start;
    }

    .customerReviews>div>div {
        background-color: #FFFFFF;
        min-height: 12.07vw;
        width: 90%;
        border-top-left-radius: 12.07vw;
        border-bottom-right-radius: 12.07vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .customerReviews>div>div>div {
        height: 2.41vw;
        width: inherit;
        position: relative;
    }

    .customerReviews>div>div>div>img {
        width: 12.07vw;
        height: 12.07vw;
        border-top-left-radius: 4.83vw;
        border-bottom-right-radius: 4.83vw;
        position: relative;
        top: 3.62vw;
        left: -3.62vw;
    }

    .customerReviews>div>div>div>div {
        background-image: url("../img/kep.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        width: 9.66vw;
        height: 7.24vw;
        position: relative;
        top: -15.7vw;
        left: 80%;
    }

    /* 
.customerReviews > div > div > .test {
    background-color: #835322;
    width: inherit;
    height: auto;
    top: 0px;
    left: 0px;
} */

    .customerReviews>div>div>p {
        color: var(--color-primary);
        width: 75%;
        font-size: 3.62vw;
        position: relative;
        margin-left: 12.07vw;
        margin-right: 0px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .customerReviews>div>div>p:first-of-type {
        font-weight: bold;
        margin-top: 2.41vw;
    }

    .customerReviews>div>div>p:last-of-type {
        margin-top: 4.83vw;
        margin-bottom: 4.83vw;
        margin-right: 4.83vw;
    }



    /* html{
    zoom: 1; /* Đặt zoom mặc định 
  transform: scale(1); /* Không cho phép hệ điều hành phóng to  
} */


    .slideBottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 144.92vw;
        overflow: hidden;
        margin-top: 12.07vw;
    }

    .sliderB {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

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

    .slidesB {
        display: flex;
        gap: 4.83vw;
        padding: 4.83vw 50vw;
        white-space: nowrap;
        width: auto;
        height: inherit;
        align-items: center;
        position: relative;
    }

    .slidesB::before,
    .slidesB::after {
        content: '';
        width: 50vw;
        flex-shrink: 0;
        height: 1px;
    }

    .slideB {
        flex-shrink: 0;
        width: 72.46vw;
        height: 120.77vw;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        margin: 0 12.07vw;
    }

    .slideB>img {
        width: 100%;
        height: 100%;
    }

    .slideB.active {
        opacity: 1;
    }



    .sliderControls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2.41vw;
        margin-bottom: 4.83vw;
        width: 100%;
        position: relative;
    }

    .sliderControls button {
        margin-left: 1.2vw;
        background-size: contain;
        width: 12.07vw;
        height: 12.07vw;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.3s;
    }

    .sliderControls button:first-child {
        background: url('../img/left.png') no-repeat center center;
        background-size: 4.83vw;
    }

    .sliderControls button:last-child {
        background: url('../img/right.png') no-repeat center center;
        background-size: 4.83vw;
    }


    .sliderControls button:hover:first-child {
        background: url('../img/left-hover.png') no-repeat center center;
        background-size: 4.83vw;
    }

    .sliderControls button:hover:last-child {
        background: url('../img/right-hover.png') no-repeat center center;
        background-size: 4.83vw;
    }




    .pagination {
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4.83vw;
        font-size: 7.24vw;
        margin: auto;
        padding: 2.41vw 0;
        padding-top: 7.24vw;
    }

    .pagination .page-item {
        list-style: none;
    }

    .pagination .page-link {
        color: #835322;
        text-decoration: none;
        font-size: 7.24vw;
        padding: 1.2vw 2.41vw;
        transition: 0.3s;
    }

    .pagination .page-link:hover {
        cursor: pointer;
        font-weight: bold;
    }

    .pagination .active .page-link {
        font-size: 9.66vw;
        font-weight: bold;
    }

    .pagination .prev,
    .pagination .next {
        width: 9.66vw;
        height: 9.66vw;
        background-color: transparent;
        border: none;
    }

    .pagination .prev img,
    .pagination .next img {
        width: 100%;
        height: 100%;
    }

    .popupProduct {
        display: none;
    }

    /* 

.popupProduct{
    display: flex;
    position: fixed;
    width: 100%;
    height:100vh;
    background-color: #00000020;
    top:0 ;
    left:0;
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.activePopupProduct{
    display: flex;
}

.popupProduct > .product{
    background-color: antiquewhite;
    width: 70%;
    height: auto;
    border-radius: 2.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
 
.popupProduct > .product > .productImg { 
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-self: center;
}

.popupProduct > .product > .productImg > img{ 
    width: 80%;
    aspect-ratio: 1/1;
    border-radius: 1vw;
}

.popupProduct > .product > .productInfo {
    width: 70%;
 }


.popupProduct > .product > .productInfo > .textH1{
    font-size: 25px;
    margin-top: 10px;
 }
.popupProduct > .product > .productInfo > #price-display{
    text-align: center;
    font-size: 18px
   
}

.popupProduct > .product > .productInfo > hr {
    border: #835322 solid 1px;
 }

 .popupProduct > .product > .productInfo > .radio-container {
    display: flex; 
    justify-content: center;
    align-items: center;
 }
 .rectangle-label{
    width: 10px;
 }
 .popupProduct > .product > .productInfo >  .rectangle-radio-container {
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    
}

 .popupProduct > .product > .productInfo > .rectangle-radio-container {
    display: flex; 
    justify-content: center;
    align-items: center;
 }

 
.popupProduct > .product > .productInfo > .function{
    margin-top: 10px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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



.popupProduct > .product > .productInfo > .function > .custom-input-number { 
 
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;

}

.popupProduct > .product > .productInfo > .function > .custom-input-number input {
    width: 30px;  
    height: 30px;
    text-align: center;
    font-size: var(--font-size-2);
    border: none;
    outline: none;
    background: #F8F1E4;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--color-primary);
    padding: 0; 
    font-size: 20px;
    padding-top: 5px;
 
}

.popupProduct > .product > .productInfo > .function > .custom-input-number button {
    border: none;
    padding: 1.2vw;
    cursor: pointer;   
}

.popupProduct > .product > .productInfo > .function > .custom-input-number .minus {
    font-size: 16px;
    color: var(--color-primary);
    background-color: transparent;
    font-weight: bold;
    padding-right: 8px;
}

.popupProduct > .product > .productInfo > .function > .custom-input-number .plus {
    font-size: 40px;
    color: var(--color-primary);
    background-color: transparent;
}



 
.popupProduct > .product > .productInfo > .function > .addToCart , .buyNow{
    font-size: 20px;
    color: var(--color-white);
    padding: 0;
    display: flex;
    align-items: center;
    border-radius: 2.41vw;   
    white-space: nowrap; 
    width: 50%;
}

.popupProduct > .product > .productInfo > .function > .addToCart{
    background-color: #83532250;
    border: 1px solid #835322;
    padding: 5px;
    border-radius: 10px; 
    justify-content: center;
    margin: 10px 0;
    font-size: 16px;
    
    
}

.popupProduct > .product > .productInfo > .function > .buyNow{
    background-color: #835322;
    padding: 5px;
    border-radius: 10px; 
    justify-content: center;
    margin-bottom: 30px;
    font-size: 16px;
}

 */











    /* FAQ */
    .mainFAQ {}

    .mainFAQ>h1 {
        margin-top: 12.07vw;
        font-size: 6.76vw;
    }


    .mainFAQ>div:first-of-type {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: space-evenly;
        margin: 12.07vw 0;
    }

    .mainFAQ>div>div {
        width: 100%;
        padding: 0 10vw;
    }

    .mainFAQ>div>div>div {
        display: flex;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        flex-direction: row;
        border-top: #835322 solid 2px;
        padding: 4.83vw 0;
        padding-right: 4.83vw;
        align-items: center;

    }

    .mainFAQ>div>div:last-of-type>div:last-of-type {
        border-bottom: #835322 solid 2px;
    }

    .mainFAQ>div>div>p:last-of-type {
        padding-top: 7.24vw;
    }

    .mainFAQ>div>div>div>p {
        font-size: var(--font-size-mobile-3);
        color: var(--color-primary);
        display: grid;
        place-items: center;
    }

    .mainFAQ>div>div>div>div {
        background-image: url("../img/Vector2png");
        background-size: cover;
        width: 3.62vw;
        height: 3.62vw;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s ease-in-out;
        transform-origin: center;
    }

    .mainFAQ>div>div>div>div:hover {
        cursor: pointer;
        /* transform: rotate(-45deg);
      transform-origin: center; */
    }

    .mainFAQ>div>div>p {
        /* display: none; */
        padding-left: 4.83vw;
        padding-bottom: 7.24vw;
        padding-right: 12.07vw;
        font-size: var(--font-size-mobile-2);
    }


    .faqContent {
        display: none;
    }

    .faqContent.active {
        display: block;
    }

    .icon.rotate {
        transform: rotate(-45deg);
    }



    .mainFAQ>div:last-of-type {
        background-color: #B58F46;
        padding-top: 12.07vw;
        padding-bottom: 12.07vw;
    }

    .mainFAQ>div:last-of-type>h1 {
        margin: 0;
    }

    .mainFAQ>div:last-of-type>p {}

    .mainFAQ>div:last-of-type>div {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .mainFAQ>div:last-of-type>div>iframe {
        border-radius: 4.83vw;
        margin-top: 12.07vw;
        width: 100%;
        height: 96.61vw;
    }

    .mainFAQ>div:last-of-type>div>div {
        background-color: #FFF3D9;
        border: none;
        border-radius: 4.83vw;
        height: auto;
        padding: 7.24vw;
        width: 100%;
        margin-top: 12.07vw;
    }

    .mainFAQ>div:last-of-type>div>div>ul {
        list-style: none;
    }

    .mainFAQ>div:last-of-type>div>div>ul>li:not(:last-child) {
        margin-bottom: 4.83vw;
    }

    .mainFAQ>div:last-of-type>div>div>ul>li>p:first-child {
        font-weight: bold;
        font-size: var(--font-size-mobile-2);
    }

    .mainFAQ>div:last-of-type>div>div>ul>li>p {
        text-overflow: ellipsis;
        width: inherit;
    }


    /* .mainFAQ > div:last-of-type > div > div{ 
        position: absolute;
      background-color: #060668;
      top: 72.64vw;
  } */










    /*PRODUCT DETAIL*/
    .mainProductDetail {
        width: 100%;
        height: 100%;
        padding: 4.83vw 7.24vw;
        padding-bottom: 12.07vw;
        background-color: #7a5230;
    }


    .mainProductDetail>.path {
        display: none;
    }

    .mainProductDetail>.product {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 24.15vw;
        padding-top: 7.24vw;
    }

    .mainProductDetail>.product>.productImg {
        width: 100%;
    }

    .mainProductDetail>.product>.productImg>img {
        width: 10%;
        height: 100%;
        border-radius: 12.07vw;
    }

    







    /*LOgin*/
    .popup {
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
        display: none;
    }

    .mainLogin {
        width: 100%;
        height: 100vh;
        background-color: #DDB888;
        border-top-left-radius: 12.07vw;
        border-top-right-radius: 12.07vw;
        padding: 0 16.90vw;
        padding-top: 7.24vw; 
        position: absolute;
        z-index: 2;

    }

    .mainLogin>p:first-of-type {
        text-align: center;
        font-size: var(--font-size-mobile-3);
        font-weight: bold;
        margin-bottom: 7.24vw;
    }

    .mainLogin>h1 {
        text-align: center;
        font-size: var(--font-size-mobile-3-2);
        font-family: var(--font-family-secondary);
        color: var(--color-3);
        text-transform: uppercase;
        margin-bottom: 4.83vw;
        letter-spacing: 1px;
    }

    .mainLogin>p:last-of-type {
        margin: auto;
        font-size: var(--font-size-mobile-2);
        width: 36.23vw;
        text-align: center;
        color: var(--color-primary);
        margin-bottom: 4.83vw;
    }


    .mainLogin>.loginForm>.inputWrapper {
        width: 100%;
        height: auto;
        margin-bottom: 7.24vw;
    }

    .mainLogin>.loginForm>.inputWrapper img {
        width: 6.03vw;
        height: 6.03vw;
    }

    .mainLogin>.loginForm>.inputWrapper>div {
        display: flex;
        flex-direction: row;
        border-bottom: #835322 solid 1px;
        padding-top: 7.24vw;
        padding-bottom: 2.41vw;
    }


    .mainLogin>.loginForm>.inputWrapper>div>img {
        margin-right: 4.83vw;
    }



    .mainLogin>.loginForm>.inputWrapper>div>input {
        background-color: transparent;
        border: none;
        width: 100%;
        outline: none;
        color: var(--color-primary);
    }

    .mainLogin>.loginForm>.inputWrapper>div>input::placeholder {
        /* background-color: transparent;
    border: none; */
        color: #83532270;
    }


    .mainLogin>.loginForm>.submitWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mainLogin>.loginForm>.submitWrapper>button {
        width: 90%;
        height: 12.07vw;
        background-color: #fff;
        text-align: center;
        color: var(--color-3);
        border-radius: 9.66vw;
        line-height: 12.07vw;
        margin: auto;
        margin-bottom: 7.24vw;
        border: none;
        outline: none;
    }


    .mainLogin>div:nth-of-type(1) {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mainLogin>div:nth-of-type(1)>span {
        width: 100%;
        background-color: #835322;
        height: 1px;
    }


    .mainLogin>div:nth-of-type(1)>p {
        padding: 2.41vw;
    }


    .mainLogin>div:nth-of-type(2) {
        margin-bottom: 2.41vw;
    }


    .mainLogin>div:nth-of-type(2)>div {
        width: 100%;
        height: 12.07vw;
        border-radius: 9.66vw;
        background-color: #424289;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4.83vw;
    }

    /* .mainLogin > div:nth-of-type(2) > div > img { 
    width: 30%; 
 } */

    .mainLogin>div:nth-of-type(2)>div:first-child>img {
        width: 30%;
    }

    .mainLogin>div:nth-of-type(2)>div:last-child>img {
        width: 25%;
    }


    .mainLogin>div:nth-of-type(3) {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.41vw;
    }

    .mainLogin>div:nth-of-type(3)>a:first-child {
        font-size: 2.89vw;
        color: #835322;
    }

    .mainLogin>div:nth-of-type(3)>a:last-child {
        font-weight: bold;
        text-decoration: underline;
        color: #835322;
    }






    .mainRegister { 
        width: 100%;
        height: 100vh;
        background-color: #DDB888;
        border-top-left-radius: 12.07vw;
        border-top-right-radius: 12.07vw;
        padding: 0 16.90vw;
        padding-top: 7.24vw;
        position: absolute;
        z-index: 2;
    }

    .mainRegister>p:first-of-type {
        text-align: center;
        font-size: var(--font-size-mobile-3);
        font-weight: bold;
        margin-bottom: 7.24vw;
    }

    .mainRegister>h1 {
        text-align: center;
        font-size: var(--font-size-mobile-3-2);
        font-family: var(--font-family-secondary);
        color: var(--color-3);
        text-transform: uppercase;
        margin-bottom: 4.83vw;
        letter-spacing: 1px;
    }

    .mainRegister>p:last-of-type {
        margin: auto;
        font-size: var(--font-size-mobile-2);
        width: 36.23vw;
        text-align: center;
        color: var(--color-primary);
        margin-bottom: 4.83vw;
    }




    .mainRegister>div:nth-of-type(1) {
        margin-bottom: 2.41vw;
    }


    .mainRegister>div:nth-of-type(1)>div {
        width: 100%;
        height: 12.07vw;
        border-radius: 9.66vw;
        background-color: #424289;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4.83vw;
    }


    .mainRegister>div:nth-of-type(1)>div:first-child>img {
        width: 30%;
    }

    .mainRegister>div:nth-of-type(1)>div:last-child>img {
        width: 25%;
    }


    .mainRegister>div:nth-of-type(2) {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mainRegister>div:nth-of-type(2)>span {
        width: 100%;
        background-color: #835322;
        height: 1px;
    }


    .mainRegister>div:nth-of-type(2)>p {
        padding: 2.41vw;
    }


    .mainRegister>.registerForm {
        width: 100%;
        height: auto;
        margin-bottom: 7.24vw;
    }

    .mainRegister>.registerForm img {
        width: 6.03vw;
        height: 6.03vw;
    }

    .mainRegister>.registerForm {
        width: 100%;
    }

    .mainRegister>.registerForm>.inputWrapper>div {
        display: flex;
        flex-direction: row;
        border-bottom: #835322 solid 1px;
        padding-top: 7.24vw;
        padding-bottom: 2.41vw;
    }


    .mainRegister>.registerForm>.inputWrapper>div>img {
        margin-right: 4.83vw;
    }



    .mainRegister>.registerForm>.inputWrapper>div>input {
        background-color: transparent;
        border: none;
        width: 100%;
        outline: none;
    }

    .mainRegister>.registerForm>.inputWrapper>div>input::placeholder {
        color: #83532270;
    }

    .mainRegister>.registerForm>.submitWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 7.24vw;
    }

    .mainRegister>.registerForm>.submitWrapper>button {
        width: 90%;
        height: 12.07vw;
        background-color: #fff;
        text-align: center;
        color: var(--color-3);
        border-radius: 9.66vw;
        line-height: 12.07vw;
        margin: auto;
        margin-bottom: 7.24vw;
        border: none;
        outline: none;
    }




    .mainRegister>div:nth-of-type(3) {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.41vw;
    }

    .mainRegister>div:nth-of-type(3)>a:first-child {
        font-size: 2.89vw;
        color: #835322;
    }

    .mainRegister>div:nth-of-type(3)>a:last-child {
        font-weight: bold;
        text-decoration: underline;
        color: #835322;
    }










    /* ProductDetailMobile */
    .mainProductDetail {
        display: none;
    }

    .mainProductDetailMobile {
        padding: 4.83vw 7.24vw 12.07vw 7.24vw;
    }

    /* .mainProductDetailMobile > .product {
    width: 24.15vw;
    height: 24.15vw;
    overflow: hidden;
} */

    .mainProductDetailMobile>.product>.productImg {
        width: 100%;
        height: 96.61vw;
    }

    .mainProductDetailMobile>.product>.productImg>img {
        width: 100%;
        height: 100%;

    }




    .mainProductDetailMobile>.product>.productInfo {}


    .mainProductDetailMobile>.product>.productInfo>h1 {
        margin-top: 4.83vw;
        text-align: center;
        font-size: var(--font-size-mobile-4);
    }


    .mainProductDetailMobile>.product>.productInfo>p {
        text-align: center;
        font-size: var(--font-size-mobile-4);
        color: var(--color-primary);
    }

    .mainProductDetailMobile>.product>.productInfo>hr {
        height: 2px;
        border: #835322 solid 1px;
        margin-top: 12.07vw;
    }



    .mainProductDetailMobile>.product>.productInfo>.desription {
        font-size: var(--font-size-mobile-2);
        color: var(--color-3);
        margin-top: 3.62vw;
    }



    /* .mainProductDetailMobile > .product > .productInfo > .describe:hover {
    max-height: none; 
    transition: max-height 0.3s ease-in-out
} */




    .colored-radio {
        display: none;
    }

    .radio-container {
        display: flex;
        flex-direction: row;
        gap: 4.83vw;
        margin-top: 4.83vw;
        justify-content: center;
    }

    .colored-label {
        width: 7.24vw;
        height: 7.24vw;
        margin: 1.2vw;
        border-radius: 50%;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        transition: border 0.2s;
    }



    .colored-label:before {
        content: '';
        display: inline-block;
        width: 9.66vw;
        height: 9.66vw;
        border-radius: 50%;
        border: 1px solid #835322;
        background-color: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.2s;
    }

    .colored-radio:checked+.colored-label:before {
        border: 4px solid #835322;
    }

    .rectangle-radio {
        display: none;
    }

    .rectangle-radio-container {
        display: flex;
        flex-direction: row;
        gap: 4.83vw;
        margin-top: 4.83vw;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .rectangle-label {
        min-width: 16.9vw;
        padding: 2.41vw 4.83vw;
        margin: 1.2vw;
        border-radius: 2.41vw;
        outline: 1px solid #835322;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        transition: border 0.2s, background-color 0.2s;
        color: var(--color-3);
        word-break: break-word;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .rectangle-radio:checked+.rectangle-label {
        outline: 2px solid #835322;
        background-color: #E5C396;
    }



    .mainProductDetailMobile>.product>.productInfo>.function {
        margin-top: 12.07vw;
        height: 9.66vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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



    .mainProductDetailMobile>.product>.productInfo>.function>.custom-input-number {

        display: flex;
        flex-direction: row;
        align-items: center;

    }

    .mainProductDetailMobile>.product>.productInfo>.function>.custom-input-number input {
        width: 9.66vw;
        height: 9.66vw;
        text-align: center;
        font-size: var(--font-size-2);
        border: none;
        outline: none;
        background: #F8F1E4;
        border: 2px solid var(--border-color);
        border-radius: 2.41vw;
        color: var(--color-primary);
        padding: 0;
        margin: 0 1.2vw;
        font-size: var(--font-size-mobile-3);


        /* width: 65px;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    border-radius: 3.62vw;
    background-color: #F8F1E4; 
    padding-right: 2.41vw; */
    }

    .mainProductDetailMobile>.product>.productInfo>.function>.custom-input-number button {
        border: none;
        padding: 1.2vw;
        cursor: pointer;
    }

    .mainProductDetailMobile>.product>.productInfo>.function>.custom-input-number .minus {
        font-size: 4.83vw;
        color: var(--color-primary);
        background-color: transparent;
        font-weight: bold;
    }

    .mainProductDetailMobile>.product>.productInfo>.function>.custom-input-number .plus {
        font-size: 9.66vw;
        color: var(--color-primary);
        background-color: transparent;
    }




    .mainProductDetailMobile>.product>.productInfo>.function>.addToCart,
    .buyNow {
        font-size: var(--font-size-mobile-3);
        color: var(--color-white);
        padding: 0 3.62vw;
        display: flex;
        align-items: center;
        border-radius: 2.41vw;
        white-space: nowrap;
    }

    .mainProductDetailMobile>.product>.productInfo>.function>.addToCart {
        background-color: #83532250;
        border: 2px solid #835322;

    }

    .mainProductDetailMobile>.product>.productInfo>.function>.buyNow {
        background-color: #835322;
    }



    .mainProductDetailMobile>.tab {
        width: 100%;
        display: flex;
        flex-direction: row;
        border-bottom: #835322 solid 1px;
        gap: 4.83vw;
        margin-top: 12.07vw;
    }

    .mainProductDetailMobile>.tab>div {
        width: auto;
    }

    .mainProductDetailMobile>.tab>div:last-child>span {
        color: var(--color-3);
        margin-left: 2px;
    }

    .mainProductDetailMobile>.tab>div:first-child {
        border-bottom: #835322 solid 2px;
    }

    .mainProductDetailMobile>.tab>div:last-child {}


    .mainProductDetailMobile>.mbdescribe {
        padding-top: 4.83vw;
        max-height: 8.5em;
        /* Giới hạn chiều cao tương đương 5 dòng */
        overflow: hidden;
        /* Ẩn nội dung thừa */
        font-size: var(--font-size-mobile-primaryprimary);
        color: var(--color-3);
        margin-top: 3.62vw;
        white-space: pre-line;
        padding: 0px;
    }

    .mbsee-more {
        display: block;
        font-weight: bold;
        cursor: pointer;
        /* Phong cách con trỏ */
        color: var(--color-3);
        border-bottom: #835322 solid 2px;
        padding-bottom: 2.41vw;
    }



    .mainProductDetailMobile>.reviews {
        display: none;
        flex-direction: column;
        height: auto;
        margin-top: 4.83vw;
    }


    .mainProductDetailMobile>.reviews>.userReviews {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: inherit;


    }


    .mainProductDetailMobile>.reviews>.userReviews>div {
        width: 100%;
        height: auto;
        margin-bottom: 7.24vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: #EAC28E5E;
        border-radius: 2.41vw;
    }



    .mainProductDetailMobile>.reviews>.userReviews>div>div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        min-height: 12.07vw;
        padding: 2.41vw;
        padding-left: 0;
        width: 24.15vw;
    }



    .mainProductDetailMobile>.reviews>.userReviews>div>div:first-child {
        flex: 1;
        padding: 4.83vw;
        /* padding: 7.24vw;
    padding-right: 0; */
    }


    .mainProductDetailMobile>.reviews>.userReviews>div>div:first-child>img {
        border-radius: 50%;
        outline: 2px solid white;
        width: 9.66vw;
        height: 9.66vw;
    }

    .mainProductDetailMobile>.reviews>.userReviews>div>div:last-child {
        flex: 9;
        display: flex;
        flex-direction: column;
    }



    .mainProductDetailMobile>.reviews>.userReviews>div>div:last-child>div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 12.07vw;
    }

    .mainProductDetailMobile>.reviews>.userReviews>div>div:last-child>div>p {
        font-size: var(--font-size-mobile-2);
        font-weight: bold;
    }

    .mainProductDetailMobile>.reviews>.userReviews>div>div:last-child>div>span {
        width: auto;
        margin-bottom: 4.83vw;
    }

    .mainProductDetailMobile>.reviews>.userReviews>div>div:last-child>div>span>img {
        width: 3.62vw !important;
        height: 3.62vw;
    }


    .mainProductDetailMobile>.reviews>.userReviews>div>div:last-child>p {
        max-width: 95%;
        font-size: var(--font-size-mobile-2);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .mainProductDetailMobile>.reviews>.pagination {
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 2.41vw;
        font-size: 3.62vw;
        margin-bottom: 4.83vw;
    }

    .mainProductDetailMobile>.reviews>.pagination>p:hover {
        cursor: pointer;
    }

    .mainProductDetailMobile>.reviews>.pagination>p:nth-of-type(3) {
        font-size: 4.83vw;
    }

    .mainProductDetailMobile>.reviews>.pagination>button {
        width: 4.83vw;
        height: 4.83vw;
        background-color: transparent;
        border: none;
    }

    .mainProductDetailMobile>.reviews>.pagination>button>img {
        width: 100%;
        height: 100%;
    }


    .mainProductDetailMobile>.writeReviews {
        height: auto;
    }


    .review-container {
        background-color: #EAC28E63;
        padding: 4.83vw;
        border-radius: 3.62vw;
        width: 100%;
        height: 29.98vw;
        text-align: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .review-container>input[type="text"]::placeholder {
        color: #83532270;
        font-size: var(--font-size-mobile-2);
    }

    .review-container p {
        font-size: var(--font-size-mobile-3);
        color: #7a5230;
        margin-bottom: 2.41vw;
    }

    .review-input {
        border: none;
        border-bottom: 2px solid #7a5230;
        width: 90%;
        font-size: 3.86vw;
        padding: 2.41vw 0;
        background: transparent;
        outline: none;
    }

    .post-btn {
        background-color: #7a5230;
        color: white;
        border: none;
        padding: 1.93vw 4.83vw;
        border-radius: 7.24vw;
        cursor: pointer;
        margin-top: 3.62vw;
        float: right;
        margin-right: 6.03vw;
        text-transform: uppercase;
    }

    .post-btn:hover {
        background-color: #5c3b1d;
    }


    .mainProductDetailMobile>h1 {
        font-size: var(--font-size-mobile-3-3);
        padding-top: 12.07vw;
    }


    .mainProductDetailMobile>.related {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        gap: 2.41vw;
        margin-top: 7.24vw;

    }



    .mainProductDetailMobile>.related>div {
        padding-bottom: 4.83vw;
    }
    .mainProductDetailMobile>.related>div>a {
        text-decoration: none;
    }

    .mainProductDetailMobile>.related>div>a>div {
        height: 38.64vw;
        width: 38.64vw;
        background-color: #ffffff;
        border-radius: 2.41vw;

    }

    .mainProductDetailMobile>.related>div>a>div>img {
        height: 38.64vw;
        width: 38.64vw;
        background-color: #ffffff;
        border-radius: 2.41vw;

    }

    .mainProductDetailMobile>.related>div>a>p {
        width: 38.64vw;
        text-align: center;
        font-size: var(--font-size-mobile-2);
        color: var(--color-3);
        padding-top: 4.83vw;
        font-family: var(--font-family-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .popupNoti {
        background-color: transparent;
        justify-content: center;
        align-items: center;
        display: flex;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;

        /* new: start hidden */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    .popupNoti.show {
        /* when you add .show, it fades in */
        opacity: 1;
        pointer-events: auto;
    }

    .popupNoti .popupNotiText {
        background-color: var(--color-2);
        padding: 10vw 20vw;
        border-radius: 0.52vw;
        font-size: var(--font-size-mobile-3-1);
        color: white;
        /* make sure text is readable */
        text-align: center;
        max-width: 80%;
    }


    /*  
  
 

.mainProductDetailMobile > .product {
        width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 169.08vw;
    padding-top: 7.24vw;
}

 






.mainProductDetailMobile > .titleReviews{
    font-size: var(--font-size-2);
    margin-top: 7.24vw;
}








.mainProductDetailMobile > .reviews .writeReviews{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-left: 12.07vw;
    width: 40%;
    height: inherit;  
    position: relative; 
}
 




*/





    /* CART MOBILE*/

    .mainCart {
        display: none;
    }


    .mainCartMobile {
        display: block;
        padding-left: 4.83vw;
        min-height: 241.54vw;
        padding-bottom: 12.07vw;
    }

    .mainCartMobile>.cart-item-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 4.83vw;
    }

    .mainCartMobile>.cart-item-container:first-child {
        margin-top: 4.83vw;
    }



    .mainCartMobile>.cart-item-container>.cart-item {
        position: relative;
        width: 100%;
        padding: 3.62vw 0;
        display: flex;
        align-items: center;
        transition: transform 0.3s ease-out;
        justify-content: flex-start;
        border-bottom: #835322 solid 2px;
    }

    .line {
        background-color: #835322;
        width: 100%;
        height: 2px;
    }


    .mainCartMobile>.cart-item-container>.cart-item>.item-info {
        align-items: flex-start;
        width: 40%;
        padding-left: 2.41vw;
    }


    .mainCartMobile>.cart-item-container>.cart-item>.item-info>.item-name {
        font-size: var(--font-size-mobile-3);
        text-transform: uppercase;
        color: var(--color-3);

    }


    .mainCartMobile>.cart-item-container>.cart-item>.item-info>.item-price,
    .attr {
        font-size: var(--font-size-mobile-3);
        color: var(--color-primary);
        text-align: left;
        align-self: start;

    }

    .mainCartMobile>.cart-item-container>.cart-item>.item-actions {
        align-self: flex-end;
        justify-self: flex-end;
    }

    .show-delete::after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        width: 19.32vw;
        height: 100%;
        background: linear-gradient(to left, rgba(131, 83, 34, 0.5), rgba(131, 83, 34, 0));
    }

    .show-delete .cart-item {
        transform: translateX(-14.49vw);
    }

    .show-delete .remove {
        right: -24vw;
        /* Khi vuốt đủ xa, nút xóa mới xuất hiện */
    }


    .remove {
        position: absolute;
        top: 0;
        right: -30vw;
        /* Ẩn hoàn toàn ban đầu */
        bottom: 0;
        width: 7.24vw;
        height: 7.24vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        cursor: pointer;
        transition: right 0.3s ease-out;
        align-self: center;
        margin-right: 4.83vw;
    }

    .mainCartMobile>.cart-item-container>div.cart-item>img.image {
        width: 26.57vw;
        height: 26.57vw;
        border-radius: 2.41vw;
    }




    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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



    .mainCartMobile>.cart-item-container>.cart-item>.item-actions>.custom-input-number {

        display: flex;
        flex-direction: row;
        align-items: center;


    }

    .mainCartMobile>.cart-item-container>.cart-item>.item-actions>.custom-input-number input {
        width: 6.03vw;
        height: 6.03vw;
        text-align: center;
        font-size: var(--font-size-mobile-2);
        border: none;
        outline: none;
        background: #F8F1E4;
        border: 2px solid var(--border-color);
        border-radius: 1.2vw;
        color: var(--color-primary);
        padding: 0;
        margin: 0 1.2vw;
    }

    .mainCartMobile>.cart-item-container>.cart-item>.item-actions>.custom-input-number button {
        border: none;
        padding: 1.2vw;
        cursor: pointer;
    }

    .mainCartMobile>.cart-item-container>.cart-item>.item-actions>.custom-input-number .minus {
        font-size: 3.62vw;
        color: var(--color-primary);
        background-color: transparent;
        font-weight: bold;
    }

    .mainCartMobile>.cart-item-container>.cart-item>.item-actions>.custom-input-number .plus {
        font-size: 7.24vw;
        color: var(--color-primary);
        background-color: transparent;
    }





    .mainCartMobile>.total {
        display: flex;
        flex-direction: column;
        width: 100%;
        /* justify-content: space-between; */
    }


    .mainCartMobile>.total>div:first-child {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin-right: 4.83vw;
    }

    .mainCartMobile>.total>div:first-child>div {
        display: flex;
        justify-content: space-between;
        flex-direction: row;

        padding-top: 2.41vw;
    }

    .mainCartMobile>.total>div:first-child>div>p:first-child {
        font-weight: bold;
    }

    .mainCartMobile a {
        text-decoration: none;
        width: 60%;
        height: 12.07vw;
        
        margin: auto;
        border-radius: 1.2vw;
        position: sticky;
        top: 90vh;
    }

    .mainCartMobile .checkOut {
        background-color: #835322;
        color: white;
        line-height: 12.07vw;
        text-align: center;
        font-size: var(--font-size-mobile-3-3);
        
    }

    /* .mainCartMobile {
    display: none;
} */



    .cartEmpty {
        display: flex;
        flex-direction: column;
        width: 60%;
        height: auto;
        margin: auto;
        align-items: center;
        justify-content: center;
        height: 193.23vw;
    }

    .cartEmpty>img {
        width: 12.07vw;
        height: 12.07vw;
        margin-bottom: 4.83vw;
    }

    .cartEmpty>p {
        white-space: normal;
        overflow-wrap: break-word;
        font-size: var(--font-size-mobile-3-1);
        font-style: italic;
    }

    .cartEmpty>a {
        width: 80%;
        height: 12.07vw;
        background-color: #F4F4F450;
        text-align: center;
        line-height: 12.07vw;
        border-radius: 1.2vw;
        margin-top: 4.83vw;
        color: var(--color-2);
        text-decoration: none;
        text-transform: uppercase;
    }












    .mainCheckout {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 2.6vw 7.81vw;
        gap: 5.2vw;
        justify-content: space-between;
        align-items: center;
    }

    .mainCheckout>.checkoutInfo {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        order: 2;
    }

    .titleInfo {
        font-size: var(--font-size-mobile-3);
        color: var(--color-primary);
        margin-bottom: 1.56vw;
        font-weight: bold;
        text-align: left;
    }

    .mainCheckout>.checkoutInfo>div {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mainCheckout>.checkoutInfo>.infoContact {
        display: grid;
        grid-template-columns: 2fr 2fr;
        gap: 2.6vw;

    }

    .mainCheckout>.checkoutInfo>.infoContact>input {
        border: none;
        outline: none;
        width: 100%;
        height: 8vw;
        border-bottom: #835322 solid 1px;
        background-color: transparent;
        font-size: var(--font-size-mobile-2);
        color: var(--color-primary);
        margin-bottom: 2vw;
    }

    .mainCheckout>.checkoutInfo>.infoContact>input::placeholder {
        color: #83532270;
        font-size: var(--font-size-mobile-2);
    }

    .shipping {
        margin-top: 5.2vw;
    }

    .mainCheckout>.checkoutInfo>.checkOut {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 2.6vw;
    }


    .mainCheckout>.checkoutInfo>.checkOut>div {
        height: 10vw;
        text-align: center;
        margin-top: 5vw;
        background-color: #835322;
        color: #fff;
        font-size: var(--font-size-mobile-3);
        text-transform: uppercase;
        line-height: 10vw;
        padding: 0 3vw;
    }

    .mainCheckout>.checkoutInfo>.checkOut>div:hover {
        cursor: pointer;
    }

    .mainCheckout>.checkoutInfo>.checkOut>a {
        font-size: var(--font-size-mobile-2);
        color: var(--color-primary);
        margin-top: 1.56vw;
        margin-bottom: 1.56vw;
        opacity: 0.7;
    }

    .mainCheckout>.checkoutCart {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        order: 1;
    }


    .mainCheckout>.checkoutCart>.totalInfo {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        margin-top: 1.04vw;
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: #835322 solid 2px;
        padding: 1.5vw 0;
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item:first-of-type {
        border-top: #835322 solid 2px;
    }


    .mainCheckout>.checkoutCart>.totalInfo>.item>img {
        width: 26.57vw;
        height: 26.57vw;
        border-radius: 1.56vw;
    }


    .mainCheckout>.checkoutCart>.totalInfo>.item>.item-info {
        width: 60%;
        height: 3.64vw;
        padding-left: 1.04vw;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item>.item-info>p:first-child {
        font-size: var(--font-size-mobile-3);
        text-transform: uppercase;
        color: var(--color-3);
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item>.item-info>p:nth-child(2) {
        font-size: var(--font-size-mobile-3);
        color: var(--color-primary);
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item>.quantity {
        width: 10%;
        text-align: right;
        font-size: var(--font-size-mobile-3);
    }

    .mainCheckout>.checkoutCart>.totalPrice {
        display: flex;
        flex-direction: column;
        margin-top: 1.56vw;
        gap: 1.04vw;
    }

    .mainCheckout>.checkoutCart>.totalPrice>div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .mainCheckout>.checkoutCart>.totalPrice>.totalPriceItem:last-child {
        padding-top: 0.52vw;
        border-top: #835322 solid 2px;
        margin-top: 1.56vw;
    }

    .mainCheckout>.checkoutCart>.totalPrice>.totalPriceItem:last-child>.title {
        font-weight: bold;
    }

    .mainCheckout>.checkoutCart>.totalPrice>div>p {
        font-size: var(--font-size-mobile-2);
    }

    .mainCheckout .paymentMethod {
        margin-top: 3vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .mainCheckout .paymentMethod>.titleInfo {
        margin: 0;
    }


    .mainCheckout .paymentMethod .optionPayment {
        width: 41vw;
        background-color: #83532240;
        color: var(--color-primary);
        border: #835322 solid 1px;
        font-size: var(--font-size-mobile-2);
        outline: none;
    }

    .mainCheckout .paymentMethod .optionPayment:hover {
        cursor: pointer;
    }

    .validation-error {
        color: red;
        font-size: var(--font-size-mobile-primary);
        padding: 0 5px;
        border-radius: 4px;
        z-index: 999;
    }

    @keyframes flash {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .flash-error {
        animation: flash 0.3s ease-in-out;
    }


}


@media screen and (min-width: 766px) {
    .textH1 {
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        color: var(--color-3);
        font-size: var(--font-size-5);
        font-family: var(--font-family-secondary);
    }

    .textP {
        text-align: center;
        color: var(--color-white);
        font-size: var(--font-size-3);
        margin-bottom: 5vw;
    }







    .banner {
        width: 100%;
        height: 125vw;
        display: flex;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    .banner img:first-child {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.5;
        z-index: 2;
        object-fit: cover;
    }

    .banner .bg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .banner .divTextSky {
        z-index: 3;
    }

    .banner > .divTextSky {
        font-family: 'BuffaloInline2Grunge', sans-serif;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 15.62vw;
        z-index: 3;
        animation: textbanner 2s ease-out forwards;
        opacity: 0;
    }

    .bg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .bg>img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    
    .banner>.divTextSky>h1 {
        font-family: 'BuffaloInline2Grunge', sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        font-size: var(--font-size-6);
    }

    .banner>.divTextSky>h1:first-child {
        color: var(--color-3);
    }

    .banner>.divTextSky>h1:last-child {
        color: var(--color-white);
    }

    @keyframes textbanner {
        0% {
            transform: translateY(-400%);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }


    .banner>.divThe4 {
        width: 100%;
        height: 5.20vw;
        position: absolute;
        top: 46.87vw;
        z-index: 9;
    }

    .banner>.divThe4>div {
        width: 35.5vw;
        height: 16.1vw;
        background-color: rgba(47, 44, 83, 0.7);
        position: absolute;
        color: var(--color-white);
        padding-left: 1.56vw;
        padding-right: 2.86vw;
        padding-bottom: 1.56vw;
        padding-top: 1.56vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    .banner>.divThe4>div>p {
        font-size: var(--font-size-primary);
        line-height: 2;
        overflow: hidden;
        max-height: 8vw;
        word-wrap: break-word;
        white-space: normal;
        transition: all 0.3s ease;
        color: var(--color-white);
        display: -webkit-box;
        -webkit-line-clamp: 4;
        /* Giới hạn 4 dòng */
        -webkit-box-orient: vertical;

    }


    .banner>.divThe4>div:hover {
        height: auto;
        cursor: pointer;
    }

    .banner>.divThe4>div:nth-child(1) {
        top: -4vw;
        left: 7vw;
    }

    .banner>.divThe4>div:nth-child(2) {
        top: 12vw;
        right: 7vw;
    }

    .banner>.divThe4>div:nth-child(3) {
        top: 28vw;
        left: 7vw;
    }

    .banner>.divThe4>div:nth-child(4) {
        top: 44vw;
        right: 7vw;
    }

    .banner>.divThe4>div>h1 {
        margin: 1.04vw 0px;
        text-transform: uppercase;
        color: var(--color-white);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .banner>.divThe4>div>h1>text {
        font-size: var(--font-size-4);
        font-family: var(--font-family-secondary);
        text-transform: uppercase;
        color: var(--color-white);
    }

    .banner>.divThe4>div>h1>img {
        display: none;
    }


    /* Khi hover vào div, hiển thị toàn bộ văn bản */
    .banner>.divThe4>div:hover>p {
        max-height: none;
        /* Bỏ giới hạn chiều cao */
        overflow: visible;
        /* Hiển thị phần văn bản bị ẩn */
        white-space: normal;
        /* Cho phép xuống dòng */
        display: block;
    }


    .banner>.theHistory {
        width: 15.62vw;
        line-height: 4.68vw;
        color: var(--color-white);
        font-size: var(--font-size-3);
        text-align: center;
        background-color: #06066840;
        border-radius: 2.60vw;
        border: 2px solid #060668;
        position: absolute;
        left: 50%;
        bottom: 7.81vw;
        transform: translateX(-50%);
        text-transform: uppercase;
        transition: background-color 0.3s ease;
        z-index: 9;
    }

    .banner>.theHistory:hover {
        cursor: pointer;
        background-color: #06066870;
    }

    .main {
        width: 100%;
        height: auto;
        background-color: #B58F46;
        padding-bottom: 6.77vw;
    }

    .main>.bestSellers {
        width: inherit;
        height: auto;
        padding: 2.60vw 7.80vw;
    }

    .main>.bestSellers>h1 {
        margin-top: 5.20vw;
    }

    .judge {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        margin-top: 2.08vw;
        overflow: hidden;
    }

    .main>.bestSellers {
        padding: 0 6.77vw;
    }

    .main>.bestSellers>.judge {
        padding: 0 1.04vw;
    }

    .main>.bestSellers>.judge>a {
        width: calc(24% - 1.04vw);
        margin-top: 0.52vw;
        text-decoration: none;
    }

    .main>.bestSellers>.judge>a>div {
        background-color: transparent;
        width: 100%;
        aspect-ratio: 1 / 1;

    }

    .main>.bestSellers>.judge>a>div>img {
        object-fit: cover;
        object-position: center;
        border-radius: 2.08vw;
    }

    .main>.bestSellers>.judge>a>div>img:hover {
        transform: scale(var(--hover-scale));
        cursor: pointer;
    }

    .main>.bestSellers>.judge>a>p:first-of-type {
        color: var(--color-white);
        font-size: var(--font-size-3);
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        margin-top: 1vw;
    }


    .main>.bestSellers>.judge>a>p:last-of-type {
        color: var(--color-white);
        font-size: var(--font-size-primary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* Giới hạn 2 dòng */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        width: 100%;
    }


    .main>.viewAllProducts {
        position: relative;
        width: 25.52vw;
        height: 5.20vw;
        line-height: 5.20vw;
        font-size: var(--font-size-4);
        font-weight: bold;
        color: var(--color-white);
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        background-color: rgba(245, 245, 245, 0.27);
        border-radius: 2.60vw;
        border: var(--border-color) solid 2px;
        margin-bottom: 4.68vw;
        margin-top: 5.20vw;
    }

    .main>.viewAllProducts:hover {
        cursor: pointer;
        background-color: rgba(245, 245, 245, 0.40);
    }

    .main>.viewAllProducts>a {
        text-decoration: none;
        color: var(--color-white);
    }

    .main>.ourFoundation {
        width: 100%;
        height: auto;
        padding: 2.60vw 7.81vw;
    }

    .main>.ourFoundation>h1 {
        margin-top: 0;
    }



    .main>.ourFoundation>.judge>div {
        background-color: rgba(255, 255, 255, 0.20);
        width: calc(33% - 1.04vw);
        height: auto;
        border-radius: 2.08vw;
        text-overflow: ellipsis;
        margin-bottom: 1.56vw;
    }

    .main>.ourFoundation>.judge>div>h1 {
        text-align: center;
        margin: 1.04vw 0;
        color: var(--color-3);
        font-weight: bold;
        font-size: var(--font-size-4);
    }

    .main>.ourFoundation>.judge>div>p {
        text-align: center;
        text-align-last: center;
        padding: 0 1.04vw;
        font-size: var(--font-size-primary);
        color: var(--color-white);
        height: auto;
        margin-bottom: 5.2vw;
    }








    /*PRODUCT */

    .mainProduct {
        width: inherit;
        height: auto;
        background-color: transparent;
    }

    .outOfStock {
        font-size: 1.5vw;
        display: flex;
        justify-content: center;
        align-items: start;
        color: #83532295;
        text-align: center
    }

    .bannerProduct {
        width: inherit;
        height: 36.45vw;
        background-size: 100% 100%;
        background-position: center;
        display: flex;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    .bannerProduct>img {
        background-size: 100% 100%;
        background-position: center;
        display: flex;
        justify-content: center;
    }



    .mainProduct>.textH1Product {
        line-height: 2.6vw;
        margin-top: 7.81vw;
    }


    .mainProduct>p {
        margin-top: 1.04vw;
        text-align: center;
        font-size: var(--font-size-2);
        color: var(--color-primary);
    }


    .mainProduct>.product {
        margin-top: 3.64vw;
        display: flex;
        flex-direction: row;
        width: inherit;
        height: auto;
    }

    .mainProduct>.product>.menuProduct {
        height: auto;
        flex: 2.5;
        display: flex;
        flex-direction: row;
        border-right: 2px solid var(--border-color);
    }



    .mainProduct>.product>.menuProduct>ul {
        height: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 7.29vw;
        list-style: none;
    }

    .mainProduct>.product>.menuProduct>ul>li {
        width: 100%;
        height: 6.26vw;
        padding: 1.56vw 0;

    }

    .mainProduct>.product>.menuProduct>ul>li>a {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.56vw;
        text-decoration: none;
    }

    .mainProduct>.product>.menuProduct>ul>li:hover {
        cursor: pointer;
    }


    .selectedProductMenu {
        background: linear-gradient(to right, rgba(156, 15, 15, 0) 0%, rgba(156, 15, 15, 0) 30%, #83532230 70%, #83532280 100%);
    }


    .mainProduct>.product>.menuProduct>ul>li>a>div {
        flex: 1;
        width: 100%;
        height: 100%;
    }

    .mainProduct>.product>.menuProduct>ul>li>a>div>img {
        object-fit: contain;
    }


    .mainProduct>.product>.menuProduct>ul>li>a>p {
        flex: 3;
        font-size: var(--font-size-2);
        color: var(--color-primary);
    }




    .mainProduct>.product>.allProduct {
        flex: 7.2;
        display: flex;
        padding-left: 5.2vw;
        padding-right: 7.81vw;
        height: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15.62vw, 1fr));
        gap: 3.64vw;
        overflow: hidden;
        padding-top: 2px;
    }

    .mainProduct>.product>.allProduct>div {
        height: auto;
        width: 15.62vw;
    }

    .mainProduct>.product>.allProduct>div>div:first-child {
        height: 14.58vw;
        background-color: #afafaf;
        width: 14.58vw;
        margin: auto;
        border-radius: 2.6vw;
    }

    .mainProduct>.product>.allProduct>div>div:first-child:hover {
        outline: 2px white solid;
        border-radius: 2.6vw;
    }

    .mainProduct>.product>.allProduct>div>div:first-child>img {
        height: inherit;
        width: inherit;
        border-radius: 2.6vw;
    }

    .mainProduct>.product>.allProduct>div>div:first-child>img:hover {
        cursor: pointer;
    }


    .mainProduct>.product>.allProduct>div>a {
        text-align: center;
        font-size: var(--font-size-2);
        font-family: var(--font-family-secondary);
        text-transform: uppercase;
        margin-top: 0.87vw;
        color: var(--color-3);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration-line: none;
        display: block;
        width: 100%;
    }

    .mainProduct>.product>.allProduct>div>a:hover {
        text-decoration-line: underline;
    }


    .mainProduct>.product>.allProduct>div>p:nth-child(3) {
        text-align: center;
        font-size: var(--font-size-2);
        color: var(--color-primary);

    }

    .mainProduct>.product>.allProduct>div>div:last-child {
        height: 2.6vw;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0.52vw;
        margin-top: 0.87vw;
        margin-bottom: 0.26vw;
    }

    .mainProduct>.product>.allProduct>div>div:last-child>div:first-child {
        height: inherit;
        background-color: #835322;
        border-radius: 0.87vw;
        color: var(--color-white);
        font-size: var(--font-size-primary);
        font-weight: bold;
        text-align: center;
        line-height: 2.34vw;
    }

    .mainProduct>.product>.allProduct>div>div:last-child>div:first-child:hover {
        transform: scale(110%);
        cursor: pointer;
    }

    .mainProduct>.product>.allProduct>div>div:last-child>div:last-child {
        height: inherit;
        background-image: url('../img/plus.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 20%;
    }


    .mainProduct>.product>.allProduct>div>div:last-child>div:last-child:hover {
        transform: scale(110%);
        cursor: pointer;
    }

     .mainProduct .customerReviews {
        width: 100%;
        height: auto;
    }

     .mainProduct .customerReviews>.textH1Product {
        line-height: 2.6vw;
        margin-top: 10.41vw;
    }

     .mainProduct .customerReviews>div {
        flex: 3;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5.2vw;
        margin-top: 6.77vw;
        align-items: flex-start;
    }

     .mainProduct .customerReviews>div>div {
        background-color: #FFFFFF;
        min-height: 7.81vw;
        width: 25vw;
        border-top-left-radius: 5.2vw;
        border-bottom-right-radius: 5.2vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

     .mainProduct .customerReviews>div>div>div {
        height: 0.52vw;
        width: inherit;
        position: relative;
    }

     .mainProduct .customerReviews>div>div>div>img {
        width: 5.2vw;
        height: 5.2vw;
        border-top-left-radius: 2.08vw;
        border-bottom-right-radius: 2.08vw;
        position: relative;
        top: 1.56vw;
        left: -2.6vw;
    }

     .mainProduct .customerReviews>div>div>div>div {
        background-image: url("../img/kep.png");
        background-size: 5.2vw;
        background-repeat: no-repeat;
        background-position: center;
        width: 5.2vw;
        height: 5.2vw;
        position: relative;
        top: -7.29vw;
        left: 18.22vw;
    }

    /* 
 .mainProduct .customerReviews > div > div > .test {
    background-color: #835322;
    width: inherit;
    height: auto;
    top: 0px;
    left: 0px;
} */

     .mainProduct .customerReviews>div>div>p {
        color: var(--color-primary);
        width: 75%;
        font-size: 1.04vw;
        position: relative;
        margin-left: 3.64vw;
        margin-right: 4.68vw;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

     .mainProduct .customerReviews>div>div>p:first-of-type {
        font-size: var(--font-size-primary);
        font-weight: bold;
        margin-top: 3.12vw;
    }

     .mainProduct .customerReviews>div>div>p:last-of-type {
        font-size: var(--font-size-primary);
        margin-top: 0.52vw;
        margin-bottom: 2.6vw;
    }



    /* html{
    zoom: 1; /* Đặt zoom mặc định 
  transform: scale(1); /* Không cho phép hệ điều hành phóng to  
} */
    .slideBottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 54.68vw;
        overflow: hidden;
        padding-top: 5.2vw;
        padding-bottom: 5.2vw;
    }

    .sliderB {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

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

    .slidesB {
        display: flex;
        gap: 1.04vw;
        padding: 1.04vw 50vw;
        white-space: nowrap;
        width: auto;
        height: inherit;
        align-items: center;
        position: relative;
    }

    .slidesB::before,
    .slidesB::after {
        content: '';
        width: 50vw;
        flex-shrink: 0;
        height: 1px;
    }

    .slideB {
        flex-shrink: 0;
        width: 20.83vw;
        height: 31.25vw;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        margin: 0 2.6vw;
    }

    .slideB>img {
        width: 100%;
        height: 100%;
    }

    .slideB.active {
        opacity: 1;
    }



    .sliderControls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1.04vw;
        width: 100%;
        position: relative;
    }


    .sliderControls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1.04vw;
        width: 100%;
    }

    .sliderControls button {
        width: 2.6vw;
        height: 2.6vw;
        border: none;
        cursor: pointer;
        background-color: white;
        transition: background 0.3s;
        margin: 0 0.52vw;
    }

    .sliderControls button:first-child {
        background: url('../img/left.png') no-repeat center center;
        background-size: 1.56vw;
    }

    .sliderControls button:last-child {
        background: url('../img/right.png') no-repeat center center;
        background-size: 1.56vw;
    }


    .sliderControls button:hover:first-child {
        background: url('../img/left-hover.png') no-repeat center center;
        background-size: 1.56vw;
    }

    .sliderControls button:hover:last-child {
        background: url('../img/right-hover.png') no-repeat center center;
        background-size: 1.56vw;
    }




    .pagination {
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1.04vw;
        font-size: 1.56vw;
        margin: auto;
        margin-top: 0;
        padding: 0.52vw 0; 
    }

    .pagination .page-item {
        list-style: none;
    }

    .pagination .page-link {
        color: #835322;
        text-decoration: none;
        font-size: 1.56vw;
        padding: 0.26vw 0.52vw;
        transition: 0.3s;
    }

    .pagination .page-link:hover {
        cursor: pointer;
        font-weight: bold;
    }

    .pagination .active .page-link {
        font-size: 2.08vw;
        font-weight: bold;
    }

    .pagination .prev,
    .pagination .next {
        width: 2.08vw;
        height: 2.08vw;
        background-color: transparent;
        border: none;
    }

    .pagination .prev img,
    .pagination .next img {
        width: 100%;
        height: 100%;
    }



    .f1 {
        width: 20.83vw;
        height: 31.25vw;
    }

    .f2 {
        width: 20.83vw;
        height: 26.04vw;
    }

    .f3 {
        width: 20.83vw;
        height: 20.83vw;
    }


    .popupProduct {
        display: none;
        position: fixed;
        width: 100%;
        height: 100vh;
        background-color: #00000020;
        top: 0;
        left: 0;
        z-index: 999;
        justify-content: center;
        align-items: center;
    }

    .activePopupProduct {
        display: flex;
    }

    .popupProduct>.product {
        background-color: antiquewhite;
        width: 30%;
        height: auto;
        border-radius: 2.6vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }

    .popupProduct>.product>.productImg {
        margin-top: 1.56vw;
    }

    .popupProduct>.product>.productImg>img {
        width: 15.62vw;
        aspect-ratio: 1 / 1;
        border-radius: 1vw;
    }

    .popupProduct>.product>.productInfo {
        width: 70%;
    }


    .popupProduct>.product>.productInfo>.textH1 {
        font-size: 1.56vw;
        margin-top: 0.52vw;
    }

    .popupProduct>.product>.productInfo>#price-display {
        text-align: center;
        font-size: 1.04vw;

    }

    .popupProduct>.product>.productInfo>hr {
        border: #835322 solid 1px;
    }

    .popupProduct>.product>.productInfo>.radio-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .popupProduct>.product>.productInfo>.rectangle-radio-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .popupProduct>.product>.productInfo>.function {
        margin-top: 0.52vw;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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



    .popupProduct>.product>.productInfo>.function>.custom-input-number {

        display: flex;
        flex-direction: row;
        align-items: center;
        height: 2.6vw;

    }

    .popupProduct>.product>.productInfo>.function>.custom-input-number input {
        width: 2.08vw;
        height: 2.08vw;
        text-align: center;
        font-size: var(--font-size-2);
        border: none;
        outline: none;
        background: #F8F1E4;
        border: 2px solid var(--border-color);
        border-radius: 0.56vw;
        color: var(--color-primary);
        padding: 0;
        font-size: 1.04vw;

    }

    .popupProduct>.product>.productInfo>.function>.custom-input-number button {
        border: none;
        padding: 1.2vw;
        cursor: pointer;
    }

    .popupProduct>.product>.productInfo>.function>.custom-input-number .minus {
        font-size: 1.04vw;
        color: var(--color-primary);
        background-color: transparent;
        font-weight: bold;
    }

    .popupProduct>.product>.productInfo>.function>.custom-input-number .plus {
        font-size: 2.6vw;
        color: var(--color-primary);
        background-color: transparent;
    }




    .popupProduct>.product>.productInfo>.function>.addToCart,
    .buyNow {
        font-size: 1.04vw;
        color: var(--color-white);
        padding: 0;
        display: flex;
        align-items: center;
        border-radius: 2.41vw;
        white-space: nowrap;
    }

    .popupProduct>.product>.productInfo>.function>.addToCart:hover,
    .buyNow:hover {
        cursor: pointer;
    }

    .popupProduct>.product>.productInfo>.function>.addToCart {
        background-color: #83532250;
        border: 1px solid #835322;
        padding: 0.52vw;
        border-radius: 0.52vw;
        justify-content: center;
        margin: 0.52vw 0;
        font-size: 1.04vw;


    }

    .popupProduct>.product>.productInfo>.function>.buyNow {
        background-color: #835322;
        padding: 0.52vw;
        border-radius: 0.52vw;
        justify-content: center;
        margin-bottom: 1.56vw;
        font-size: 1.04vw;
    }


    .popupNoti {
        background-color: transparent;
        justify-content: center;
        align-items: center;
        display: flex;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;

        /* new: start hidden */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    .popupNoti.show {
        /* when you add .show, it fades in */
        opacity: 1;
        pointer-events: auto;
    }

    .popupNoti .popupNotiText {
        background-color: var(--color-2);
        padding: 5vw 8vw;
        border-radius: 0.52vw;
        font-size: var(--font-size-3);
        color: white;
        /* make sure text is readable */
        text-align: center;
        max-width: 80%;
    }














    /* HISTORY */

    .mainHistory {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 54.68vw;
        overflow: hidden;
        padding-top: 5.2vw;
        padding-bottom: 5.2vw;
    }

    .mainHistory>.slider {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mainHistory>.slider::-webkit-scrollbar {
        display: none;
    }

    .mainHistory>.slider>.slides {
        display: flex;
        gap: 1.04vw;
        padding: 1.04vw 50vw;
        white-space: nowrap;
        width: auto;
        height: inherit;
        align-items: center;
        position: relative;
    }

    .mainHistory>.slider>.slides::before,
    .mainHistory>.slider>.slides::after {
        content: '';
        width: 50vw;
        flex-shrink: 0;
        height: 1px;
    }

    .mainHistory>.slider>.slides>.slide {
        flex-shrink: 0;
        width: 65vw;
        height: inherit;
        border-radius: 2.6vw;
        transform: scale(0.8);
        transition: all 0.3s ease-in-out;
        cursor: pointer;

    }

    .mainHistory>.slider>.slides>.slide>img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        border-radius: 2.6vw;
    }



    .mainHistory>.slider>.slides>.slide.active {
        opacity: 1;
        transform: scale(1);
    }

    .dots {
        margin-top: 1.04vw;
    }

    .dot {
        height: 0.87vw;
        width: 0.87vw;
        margin: 0 0.26vw;
        background-color: #06066850;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
    }

    .dot.active {
        background-color: #060668;
    }

    .slide>h1 {
        font-family: var(--font-family-secondary);
        font-size: var(--font-size-4);
        color: var(--color-2);
        margin-top: 7.81vw;
        margin-left: 2.6vw;
    }

    .slide>p:first-of-type {
        font-size: var(--font-size-2);
        color: var(--color-white);
        margin-bottom: 1.30vw;
        margin-left: 2.6vw;
    }

    .slide>p:last-of-type {
        font-size: var(--font-size-primary);
        color: var(--color-white);
        width: 45%;
        max-height: 23.43vw;
        /* Giới hạn chiều cao */
        overflow: hidden;
        /* Ẩn phần nội dung vượt quá */
        transition: overflow 0.2s ease-in-out;
        scrollbar-width: none;
        /* Ẩn scrollbar */
        -ms-overflow-style: none;
        /* Ẩn scrollbar trên IE */
        word-wrap: break-word;
        /* Xuống dòng khi hết line */
        white-space: normal;
        /* Cho phép xuống dòng */
        margin-left: 2.6vw;
    }

    .slide>p:hover {
        overflow-y: auto;
        /* Hiện scrollbar khi hover */
    }

    .slide>p:hover::-webkit-scrollbar {
        display: block;
    }








    /* FAQ */
    .mainFAQ {}

    .mainFAQ>h1 {
        margin-top: 7.81vw;
    }


    .mainFAQ>div:first-of-type {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        align-content: space-evenly;
        margin: 5.20vw 0;
    }

    .mainFAQ>div>div {

        flex: 1;
        padding: 0 5.20vw;
    }

    .mainFAQ>div>div>div {
        display: flex;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        flex-direction: row;
        border-top: #835322 solid 2px;
        padding: 1.04vw 0;
        padding-right: 1.04vw;

        align-items: center;
    }

    .mainFAQ>div>div>div.faqHeader:last-of-type {
        border-bottom: #835322 solid 2px;
    }

    .mainFAQ>div>div>p:last-of-type {
        padding-top: 1.56vw;
    }

    .mainFAQ>div>div>div>p {
        font-size: var(--font-size-2);
        color: var(--color-primary);
        display: grid;
        place-items: center;
    }

    .mainFAQ>div>div>div>div {
        background-image: url("../img/Vector2png");
        background-size: cover;
        width: 0.78vw;
        height: 0.78vw;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s ease-in-out;
        transform-origin: center;
    }

    .mainFAQ>div>div>div>div:hover {
        cursor: pointer;
        /* transform: rotate(-45deg);
      transform-origin: center; */
    }

    .mainFAQ>div>div>p {
        /* display: none; */
        padding-left: 1.04vw;
        padding-bottom: 1.56vw;
        padding-right: 2.6vw;
        font-size: var(--font-size-primary);
    }




    .faqContent {
        display: none;
    }

    .faqContent.active {
        display: block;
    }

    .icon.rotate {
        transform: rotate(-45deg);
    }



    .mainFAQ>div:last-of-type {
        background-color: #B58F46;
        padding-top: 5.20vw;
        margin-top: 10.41vw;
    }

    .mainFAQ>div:last-of-type>h1 {
        margin: 0;
    }

    .mainFAQ>div:last-of-type>p {}

    .mainFAQ>div:last-of-type>div {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding-bottom: 12.6vw;
    }

    .mainFAQ>div:last-of-type>div>iframe {
        border-radius: 2.6vw;
        margin-top: 2.6vw;
    }

    .mainFAQ>div:last-of-type>div>div {
        position: absolute;
        background-color: #FFF3D9;
        top: 1.04vw;
        right: 20.83vw;
        border: none;
        border-radius: 2.6vw;
        height: auto;
        padding: 2.6vw;
        min-width: 20%;
    }

    .mainFAQ>div:last-of-type>div>div>ul {
        list-style: none;
    }

    .mainFAQ>div:last-of-type>div>div>ul>li:not(:last-child) {
        margin-bottom: 1.56vw;
    }

    .mainFAQ>div:last-of-type>div>div>ul>li>p:first-child {
        font-weight: bold;
        font-size: var(--font-size-2);
    }

    .mainFAQ>div:last-of-type>div>div>ul>li>p {
        text-overflow: ellipsis;
        width: inherit;
    }


    /* .mainFAQ > div:last-of-type > div > div{ 
      position: absolute;
      background-color: #060668;
      top: 72.64vw;
  } */













    /* PRODUCTDETAIL */

    .mainProductDetailMobile {
        display: none;
    }

    .mainProductDetail {
        padding: 0 6.77vw;
        padding-bottom: 2.6vw;
    }

    .mainProductDetail>.path {
        width: 100%;
        padding-top: 2.6vw;
    }

    .mainProductDetail>.path>ul>li {
        color: var(--color-primary);
    }

    .mainProductDetail>.path>ul>li {
        display: inline-block;
    }

    .mainProductDetail>.path>ul li:not(:last-child)::after {
        content: "/";
        margin-left: 0.26vw;
    }

    .mainProductDetail>.path>ul>li:last-child {
        font-weight: bold;
    }

    .mainProductDetail>.path>ul>li>a {
        font-size: var(--font-size-primary);
        color: var(--color-primary);
        text-decoration: none;
    }

    .mainProductDetail>.product {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: auto;
        padding-top: 1.56vw;
    }

    .mainProductDetail>.product>.productImg {
        width: 47%;
    }

    .mainProductDetail>.product>.productImg>img {
        width: 90%;
        height: 36.45vw;
        border-radius: 2.6vw;
    }


    .mainProductDetail>.product>.productInfo {
        width: 53%;
        height: auto;
    }


    .mainProductDetail>.product>.productInfo>h1 {
        margin-top: 1.04vw;
        display: flex;
        justify-content: flex-start;
        font-size: var(--font-size-4);
    }


    .mainProductDetail>.product>.productInfo>p {
        text-align: left;
        font-size: var(--font-size-3);
        color: var(--color-primary);
    }

    .mainProductDetail>.product>.productInfo>hr {
        width: 65%;
        height: 2px;
        border: #835322 solid 1px;
        margin-top: 2.6vw;
    }

    .mainProductDetail>.product>.productInfo>.describe {
        width: 85%;
        min-height: 8em;
        /* Giới hạn chiều cao tương đương 5 dòng */
        min-height: 9em;
        overflow: hidden;
        /* Ẩn nội dung thừa */
        font-size: var(--font-size-primary);
        color: var(--color-3);
        margin-top: 0.87vw;
        white-space: pre-line;
    }

    .see-more {
        font-weight: bold;
        display: none;
        /* Ẩn liên kết này mặc định */
        cursor: pointer;
        /* Phong cách con trỏ */
        color: var(--color-3);
        border-bottom: #835322 solid 2px;
        padding-bottom: 0.52vw;
    }

    .colored-radio {
        display: none;
    }

    .radio-container {
        display: flex;
        flex-direction: row;
        gap: 1.04vw;
        margin-top: 1.04vw;
    }

    .colored-label {
        width: 2.08vw;
        height: 2.08vw;
        margin: 0.26vw;
        border-radius: 50%;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        transition: border 0.2s;
    }



    .colored-label:before {
        content: '';
        display: inline-block;
        width: 2.6vw;
        height: 2.6vw;
        border-radius: 50%;
        border: 1px solid #835322;
        background-color: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.2s;
    }

    .colored-radio:checked+.colored-label:before {
        border: 4px solid #835322;
    }

    .rectangle-radio {
        display: none;
    }

    .rectangle-radio-container {
        display: flex;
        flex-direction: row;
        gap: 1.04vw;
        margin-top: 1.04vw;
    }

    .rectangle-label {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 3vw;
        padding: 0.52vw 1.04vw;
        margin: 0.26vw;
        border-radius: 0.52vw;
        outline: 1px solid #835322;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        transition: border 0.2s, background-color 0.2s;
        color: var(--color-3);
    }


    .rectangle-radio:checked+.rectangle-label {
        outline: 2px solid #835322;
        background-color: #E5C396;
    }

    .mainProductDetail>.product>.productInfo>.function {
        margin-top: 2.6vw;
        height: 2.6vw;
        display: flex;
        flex-direction: row;
        gap: 1.56vw;
    }


    /* Ẩn mũi tên mặc định */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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



    .mainProductDetail>.product>.productInfo>.function>.custom-input-number {
        position: relative;
        width: 3.38vw;
        height: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--border-color);
        border-radius: 0.87vw;
        background-color: #F8F1E4;
        padding-right: 0.52vw;

    }

    .mainProductDetail>.product>.productInfo>.function>.custom-input-number input {
        min-width: 100%;
        /* Chiếm 100% chiều rộng */
        text-align: center;
        /* Căn giữa nội dung */
        font-size: var(--font-size-2);
        border: none;
        outline: none;
        background: transparent;
        color: var(--color-primary);
        padding: 0;
        /* Xóa padding mặc định */

    }


    /* Biểu tượng mũi tên */
    .mainProductDetail>.product>.productInfo>.function>.custom-input-number button {

        border: none;
        padding: 0.26vw;
        cursor: pointer;
        position: absolute;
        right: 0.52vw;
        background-color: transparent;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .mainProductDetail>.product>.productInfo>.function>.custom-input-number .minus {
        background-image: url("../img/down.png");
        top: 1.30vw;

    }

    .mainProductDetail>.product>.productInfo>.function>.custom-input-number .plus {
        background-image: url("../img/up.png");
        bottom: 1.30vw;
    }


    .mainProductDetail>.product>.productInfo>.function>.addToCart,
    .buyNow {
        font-size: var(--font-size-2);
        color: var(--color-white);
        padding: 0.52vw 1.56vw;
        display: flex;
        align-items: center;
        border-radius: 0.87vw;
        white-space: nowrap;
    }

    .mainProductDetail>.product>.productInfo>.function>.addToCart {
        background-color: #83532250;
        border: 2px solid #835322;

    }

    .mainProductDetail>.product>.productInfo>.function>.buyNow {
        background-color: #835322;
    }


    .mainProductDetail>.titleReviews {
        font-size: var(--font-size-2);
        margin-top: 1.56vw;
    }

    .mainProductDetail>.titleReviews>span {
        color: var(--color-3);
        margin-left: 2px;
    }

    .mainProductDetail>hr {
        width: 8%;
        height: 2px;
        border: #835322 solid 1px;
    }


    .mainProductDetail>.reviews {
        display: flex;
        flex-direction: row;
        height: auto;
        margin: 1.04vw 0;
    }

    .mainProductDetail>.reviews>.userReviews:first-child {
        display: flex;
        flex-direction: column;
        width: 60%;
        height: inherit;
        border-right: 2px solid var(--border-color);
        padding-right: 2.6vw;


    }

    .mainProductDetail>.reviews>.userReviews:last-child {
        display: flex;
        flex-direction: column;
        width: 60%;
        height: inherit; 
        padding-left: 2.6vw;


    }

    .mainProductDetail>.reviews>.userReviews>.pagination {
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 1.04vw;
        font-size: 1.56vw;
    }

    .mainProductDetail>.reviews>.userReviews>.pagination>p:hover {
        cursor: pointer;
    }

    .mainProductDetail>.reviews>.userReviews>.pagination>p:nth-of-type(3) {
        font-size: 2.08vw;
    }

    .mainProductDetail>.reviews>.userReviews>.pagination>button {
        width: 2.08vw;
        height: 2.08vw;
        background-color: transparent;
        border: none;
    }

    .mainProductDetail>.reviews>.userReviews>.pagination>button>img {
        width: 100%;
        height: 100%;
    }


    .mainProductDetail>.reviews>.userReviews>div {
        width: 100%;
        height: auto;
        margin-bottom: 1.56vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: #EAC28E5E;
        border-radius: 0.52vw;
    } 

    .mainProductDetail>.reviews>.userReviews>div>div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        min-height: 2.6vw;
        padding: 1.04vw;
        padding-left: 0;
        width: 100%;
    }



    .mainProductDetail>.reviews>.userReviews>div>div:first-child {
        flex: 2.5;
        padding: 1.56vw;
        padding-right: 0;
    }


    .mainProductDetail>.reviews>.userReviews>div>div:first-child>img {
        border-radius: 50%;
        outline: 4px solid white;
        width: 7.81vw;
        height: 7.81vw;
    }

    .mainProductDetail>.reviews>.userReviews>div>div:last-child {
        flex: 7.5;
        display: flex;
        flex-direction: column;
    }



    .mainProductDetail>.reviews>.userReviews>div>div:last-child>div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 2.6vw;
    }

    .mainProductDetail>.reviews>.userReviews>div>div:last-child>div>p {
        font-size: var(--font-size-2);
        font-weight: bold;
    }

    .mainProductDetail>.reviews>.userReviews>div>div:last-child>div>span {
        width: auto;
        margin-bottom: 1.04vw;
    }

    .mainProductDetail>.reviews>.userReviews>div>div:last-child>div>span>img {
        width: 1.04vw !important;
        height: 1.04vw;
        margin-left: 0.26vw;
    }


    .mainProductDetail>.reviews>.userReviews>div>div:last-child>p {
        max-width: 90%;
        font-size: var(--font-size-primary);
        word-wrap: break-word;
        /* Xuống dòng khi cần */
        overflow-wrap: break-word;
        /* Xuống dòng khi cần */
    }


    .mainProductDetail>.reviews .writeReviews {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-left: 2.6vw;
        width: 40%;
        height: inherit;
        position: relative;
    }


    .review-container {
        background-color: #EAC28E63;
        padding: 1.04vw;
        border-radius: 0.87vw;
        width: 100%;
        text-align: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .review-container>input[type="text"]::placeholder {
        color: #83532270;
        font-size: var(--font-size-primary);
    }

    .review-container p {
        font-size: 0.93vw;
        color: #7a5230;
        margin-bottom: 0.52vw;
    }

    .review-input {
        border: none;
        border-bottom: 2px solid #7a5230;
        width: 90%;
        font-size: 0.83vw;
        padding: 0.52vw;
        background: transparent;
        outline: none;
    }

    .post-btn {
        background-color: #7a5230;
        color: white;
        border: none;
        padding: 0.41vw 1.04vw;
        border-radius: 1.56vw;
        cursor: pointer;
        margin-top: 0.87vw;
        float: right;
        margin-right: 1.30vw;
    }

    .post-btn:hover {
        background-color: #5c3b1d;
    }



    .mainProductDetail>.related {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        gap: 6.77vw;
        margin-top: 5.2vw;

    }

    .mainProductDetail>.related>div {
        flex: 1;
        ;
    }

    .mainProductDetail>.related>div>a {
        text-decoration: none;
    }

    .mainProductDetail>.related>div>a>div {
        width: 100%;
        height: 20.83vw;
        background-color: #ffffff;
        border-radius: 2.6vw;
    }

    .mainProductDetail>.related>div>a>div>img {
        width: 100%;
        height: 20.83vw;
        background-color: #ffffff;
        border-radius: 2.6vw;
    }

    .mainProductDetail>.related>div>a>p {
        text-align: center;
        font-size: var(--font-size-4);
        color: var(--color-3);
        padding-top: 1.04vw;
        font-family: var(--font-family-secondary);
    }

    .product-description {
        max-width: 46.875vw;
        margin: 4.167vw auto;
        padding: 2.083vw;
        background: #c4a48430;
        border-radius: 0.625vw;
        box-shadow: 0 0.208vw 1.042vw rgba(0, 0, 0, 0.08);
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .product-description .textH1 {
        font-size: 1.667vw;
        font-weight: 500;
        margin-bottom: 1.823vw;
        color: var(--color-3);
        text-align: center;
        position: relative;
        padding-bottom: 1.042vw;
        letter-spacing: 0.052vw;
        transition: all 0.3s ease;
    }

    .product-description .textH1:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 4.167vw;
        height: 0.156vw;
        background: linear-gradient(90deg, #835322, #c4a484);
        transition: all 0.3s ease;
    }

    .product-description .description-content {
        line-height: 2;
        color: var(--color-3);
        font-size: 0.833vw;
        padding: 0 1.042vw 1.563vw;
        text-align: justify;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        opacity: 0;
    }

    .product-description.active .description-content {
        max-height: 2000px;
        opacity: 1;
    }

    .product-description.active .textH1 {
        margin-bottom: 2.083vw;
    }

    .product-description.active .textH1:after {
        width: 6.25vw;
        height: 0.208vw;
    }

    @keyframes slideDown {
        from {
            max-height: 0;
            opacity: 0;
        }

        to {
            max-height: 2000px;
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            max-height: 2000px;
            opacity: 1;
        }

        to {
            max-height: 0;
            opacity: 0;
        }
    }

    .describe {
        max-height: 12em;
        /* 8 dòng x 1.5em = 12em */
        overflow: hidden;
        transition: max-height 0.3s ease;
        position: relative;
        line-height: 1.5em;
    }

    .describe:hover {
        max-height: none;
    }

    .describe::after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        background: transparent;
        color: #666;
        line-height: 1.5em;
        height: 1.5em;
        display: inline;
        transform: translateX(-100%);
        margin-right: -3px;
    }

    .describe:hover::after {
        display: none;
    }

    .mainProductDetail .customerReviews {
        margin-top: 2rem;
    }

    .mainProductDetail .customerReviews>.textH1Product {
        margin-bottom: 1rem;
    }

    .mainProductDetail .customerReviews>div {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .mainProductDetail .customerReviews>div>div {
        flex: 1;
        min-width: 300px;
        background: #fff;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .mainProductDetail .customerReviews>div>div>div {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }

    .mainProductDetail .customerReviews>div>div>div>img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    .mainProductDetail .customerReviews>div>div>div>div {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .mainProductDetail .customerReviews>div>div>div>div>p {
        font-weight: 500;
    }

    .mainProductDetail .customerReviews>div>div>div>div>span {
        display: flex;
        gap: 0.25rem;
    }

    .mainProductDetail .customerReviews>div>div>div>div>span>img {
        width: 16px;
        height: 16px;
    }

    .mainProductDetail .customerReviews>div>div>p {
        color: #666;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .mainProductDetail .customerReviews>div>div>p:first-of-type {
        margin-bottom: 0.5rem;
    }

    .mainProductDetail .customerReviews>div>div>p:last-of-type {
        color: #835322;
        font-weight: 500;
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin: 2rem 0;
        margin-bottom: 7.81vw;
    }

    .pagination .page-item {
        list-style: none;
    }

    .pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1px solid #ddd;
        border-radius: 4px;
        color: #666;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .pagination .page-link:hover {
        background: #835322;
        color: white;
        border-color: #835322;
    }

    .pagination .active .page-link {
        background: #835322;
        color: white;
        border-color: #835322;
    }

    .pagination .prev,
    .pagination .next {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: none;
        cursor: pointer;
    }

    .pagination .prev img,
    .pagination .next img {
        width: 16px;
        height: 16px;
    }




    /* CART */

    .mainCartMobile {
        display: none;
    }


    .mainCart {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        padding: 2.6vw 7.81vw;
        gap: 5.2vw;
        justify-content: space-between;
    }


    .mainCart>div {
        height: auto;
        display: flex;
        flex-direction: row;
    }


    .mainCart>div:first-child {
        width: 60%;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .mainCart>div:first-child>p {
        font-size: 1.56vw;
        color: var(--color-primary);
        margin-bottom: 1.56vw;
        font-weight: bold;
        text-align: left;
    }

    .mainCart>div:first-child>div {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        padding: 1.04vw 0;
        border-bottom: #835322 solid 1px;
        align-items: center;
    }

    .mainCart>div:first-child>div:first-of-type {
        border-top: #835322 solid 1px;
    }

    .mainCart>div:first-child>div>span {
        width: 10.41vw;
        height: 10.41vw;
        /* border-radius: 1.56vw; */
    }

    .mainCart>div:first-child>div>span>img {
        width: 10.41vw;
        border-radius: 1.56vw;
    }

    .mainCart>div:first-child>div>div:first-of-type {
        width: 28.54vw;
        height: 3.64vw;
        display: flex;
        flex-direction: column;
        padding-left: 1.04vw;
        align-self: flex-start;
        margin-top: 2.08vw;

    }

    .mainCart>div:first-child>div>div:first-of-type>p:first-child {
        font-size: var(--font-size-2);
        text-transform: uppercase;
        color: var(--color-3);

    }


    .mainCart>div:first-child>div>div:first-of-type>p.item-price,
    p.attr {
        font-size: var(--font-size-2);
        color: var(--color-primary);

    }


    .mainCart>div:first-child>div>div:last-child {
        width: 18.22vw;
        height: 2.6vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-left: 2.6vw;
        align-self: flex-start;
        margin-top: 2.08vw;
    }

    .mainCart>div:first-child>div>div:last-child>div {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 0.52vw;
    }


    .mainCart>div:first-child>div>div:last-child>input {
        width: 2.6vw;
        font-size: 1.30vw;
        text-align: center;
        border: none;
        color: var(--color-primary);
        background-color: transparent;
        outline: none;
    }

    .mainCart>div:first-child>div>div:last-child>div>button {
        border: none;
        background-color: transparent;
        width: 0.87vw;
        height: 0.87vw;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .mainCart>div:first-child>div>div:last-child>div>button:hover {
        opacity: 0.5;
        cursor: pointer;
    }

    .mainCart>div:first-child>div>div:last-child>div>.plus {

        background-image: url("../img/up.png");
    }


    .mainCart>div:first-child>div>div:last-child>div>.minus {
        background-image: url("../img/down.png");
    }


    .mainCart>div:first-child>div>div:last-child>p.remove {
        width: 6.26vw;
        font-size: 1.04vw;
        font-weight: bold;
        align-self: center;
        margin-left: 2.6vw;
        text-decoration: underline;
    }

    .mainCart>div:first-child>div>div:last-child>p.remove:hover {
        opacity: 0.5;
        cursor: pointer;
    }

    /* 
.mainCart > div:first-child > div > div > div > p:first-child{
    color: #B58F46;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-mobile-3);
}

.mainCart > div:first-child > div > div > div > p:last-child{
    color: #B58F46;
    font-size: var(--font-size-mobile-1);
} */



    .mainCart>div:last-child {
        width: 30%;
        height: auto;
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-2);
    }

    .mainCart>div:last-child>p {
        font-size: 1.56vw;
        color: var(--color-primary);
        margin-bottom: 1.56vw;
        font-weight: bold;
        text-align: left;
    }

    .mainCart>div:last-child>div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }


    .mainCart>div:last-child>div:nth-of-type(1) {
        border-top: #835322 solid 1px;
        padding-top: 2.08vw;
        border-bottom: #835322 solid 1px;
        padding-bottom: 2.08vw;
        display: flex;
        flex-direction: column;
    }

    .mainCart>div:last-child>div:nth-of-type(1)>div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }



    .mainCart>div:last-child>div:nth-of-type(1)>div:first-child {
        padding-bottom: 0.52vw;
    }

    /* 
.mainCart > div:last-child > div:nth-of-type(> div){
    border-bottom: #000 solid 2px;
    padding-bottom: 2.6vw;
} */


    .mainCart>div:last-child>div:nth-of-type(2) {
        border-bottom: #835322 solid 1px;
        padding-bottom: 2.08vw;
        padding-top: 0.52vw;
    }

    .mainCart .checkOut {
        background-color: var(--secondary-text-color);
        width: 100%;
        height: 3.12vw;
        text-align: center;
        margin-top: 1.04vw;
        background-color: #835322;
        color: #fff;
        font-size: var(--font-size-3);
        text-transform: uppercase;
        line-height: 3.12vw;
        display: block;
    }


    .mainCart .checkOut:hover {
        cursor: pointer;
    }

    .mainCart>div:last-child>a {
        font-size: var(--font-size-2);
        color: var(--color-primary);
        margin-top: 1.56vw;
        opacity: 0.7;
    }





    .cartEmpty {
        display: flex;
        flex-direction: column;
        width: 60%;
        height: auto;
        margin: auto;
        align-items: center;
        justify-content: center;
        height: 52.08vw;
    }

    .cartEmpty>img {
        width: 5.2vw;
        height: 5.2vw;
        margin-bottom: 1.04vw;
    }

    .cartEmpty>p {
        white-space: normal;
        overflow-wrap: break-word;
        font-size: var(--font-size-3);
        font-style: italic;
    }

    .cartEmpty>a {
        width: 40%;
        height: 2.6vw;
        background-color: #F4F4F450;
        text-align: center;
        line-height: 2.6vw;
        border-radius: 0.26vw;
        margin-top: 1.04vw;
        color: var(--color-2);
        font-size: var(--font-size-3);
        text-decoration: none;
        text-transform: uppercase;
    }





    /*LOGIN*/


    .mainLogin {
        width: 100%;
        height: auto;
        margin-top: 2.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .mainLogin>p:first-of-type {
        display: none;
    }

    .mainLogin>h1 {
        text-align: center;
        font-size: var(--font-size-5);
        font-family: var(--font-family-secondary);
        color: var(--color-3);
        text-transform: uppercase;
        margin-bottom: 1.04vw;
        letter-spacing: 1px;
    }

    .mainLogin>p:last-of-type {
        margin: auto;
        font-size: var(--font-size-2);
        width: 100%;
        text-align: center;
        color: var(--color-primary);
        margin-bottom: 1.04vw;
    }

    .mainLogin>div,
    form {
        width: 30%;
        height: auto;
        margin: auto;
        margin-bottom: 1.56vw;
    }

    .mainLogin>form>.inputWrapper {
        height: auto;
        margin-bottom: 1.56vw;
    }

    .mainLogin>form>.inputWrapper img {
        width: 2.08vw;
        height: 2.08vw;
    }

    .mainLogin>form>.inputWrapper>div {
        display: flex;
        flex-direction: row;
        border-bottom: #835322 solid 1px;
        padding-top: 1.56vw;
        padding-bottom: 0.52vw;
        align-items: flex-end;
    }


    .mainLogin>form>.inputWrapper>div>img {
        margin-right: 1.04vw;
    }



    .mainLogin>form>.inputWrapper>div>input {
        background-color: transparent;
        outline: none;
        border: none;
        color: #835322;
        width: 100%;
        height: 2.6vw;
        padding-top: 0.93vw;
        font-size: var(--font-size-primary);
    }


    .mainLogin>form>.inputWrapper>div>input::placeholder {
        color: #83532270;
        font-size: var(--font-size-primary);
    }

    .mainLogin>form>.submitWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .mainLogin>form>.submitWrapper>button {
        height: 2.6vw;
        width: 7.81vw;
        background-color: #835322;
        text-align: center;
        color: var(--color-white);
        line-height: 2.6vw;
        margin: auto;
        margin: 2.08vw 0;
        font-size: var(--font-size-primary);
        font-weight: bold;
        outline: none;
        border: none;
    }

    .mainLogin>form>.submitWrapper>button:hover {
        cursor: pointer;
    }


    .mainLogin>div:nth-of-type(1) {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mainLogin>div:nth-of-type(1)>span {
        width: 100%;
        background-color: #835322;
        height: 1px;
    }


    .mainLogin>div:nth-of-type(1)>p {
        padding: 0.52vw;
    }


    .mainLogin>div:nth-of-type(2) {
        margin-bottom: 0.52vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .mainLogin>div:nth-of-type(2)>div {
        width: 15.62vw;
        height: 3.12vw;
        background-color: #424289;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 1.04vw;
        padding: 0.52vw 0;
    }


    .mainLogin>div:nth-of-type(2)>div:hover {
        cursor: pointer;
    }

    /* .mainLogin > div:nth-of-type(2) > div > img { 
    width: 30%; 
 } */

    .mainLogin>div:nth-of-type(2)>div:first-child>img {
        height: 80%;
        width: 100%;
        object-fit: contain;
    }

    .mainLogin>div:nth-of-type(2)>div:last-child>img {
        height: 80%;
        width: 100%;
        object-fit: contain;
    }


    .mainLogin>div:nth-of-type(3) {
        margin: 2.6vw 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.52vw;
        
        margin: auto;
        margin-top: 4vw;
        margin-bottom: 5vw;
        
    }

    .mainLogin>div:nth-of-type(3)>a:first-child {
        font-size: var(--font-size-primary);
        color: #835322;
    }

    .mainLogin>div:nth-of-type(3)>a:last-child {
        color: #835322;
        font-size: 1.56vw;
    }






    .mainRegister {
        width: 100%;
        height: auto;
        margin: auto;
        margin-top: 4.16vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }



    .mainRegister>h1 {
        text-align: center;
        font-size: var(--font-size-5);
        font-family: var(--font-family-secondary);
        color: var(--color-3);
        text-transform: uppercase;
        margin-bottom: 2.6vw;
        letter-spacing: 1px;
        white-space: nowrap;

    }



    .mainRegister>div:nth-of-type(1) {

        width: 15.62vw;
        margin: auto;
        margin-bottom: 2.6vw;
    }


    .mainRegister>div:nth-of-type(1)>div {
        width: 15.62vw;
        height: 3.12vw;
        background-color: #424289;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 1.04vw;
        padding: 0.52vw 0;
    }


    .mainRegister>div:nth-of-type(1)>div:hover {
        cursor: pointer;
    }


    .mainRegister>div:nth-of-type(1)>div>img {
        height: 80%;
        width: 100%;
        object-fit: contain;
    }




    .mainRegister>div:nth-of-type(2) {
        margin: auto;
        margin-bottom: 1vw;
        width: 30%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mainRegister>div:nth-of-type(2)>span {
        width: 100%;
        background-color: #835322;
        height: 1px;
    }


    .mainRegister>div:nth-of-type(2)>p {
        padding: 0.52vw;
    }


    .mainRegister>.registerForm {
        width: 30%;
    }


    .mainRegister>.registerForm>.inputWrapper {
        width: 100%;
        height: auto;
        margin-bottom: 1.56vw;
    }

    .mainRegister>.registerForm>.inputWrapper img {
        width: 2.08vw;
        height: 2.08vw;
    }

    .mainRegister>.registerForm>.inputWrapper>div {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        border-bottom: #835322 solid 1px;
        padding-top: 1.56vw;
        padding-bottom: 0.52vw;
        margin-bottom: 1.56vw;
    }


    .mainRegister>.registerForm>.inputWrapper>div>img {
        margin-right: 1.04vw;
    }



    .mainRegister>.registerForm>.inputWrapper>div>input {
        background-color: transparent;
        outline: none;
        border: none;
        color: #835322;
        width: 100%;
        height: 2.6vw;
        padding-top: 0.93vw;
        font-size: var(--font-size-primary);
    }

    .mainRegister>.registerForm>.inputWrapper>div>input::placeholder {
        color: #83532270;
        font-size: var(--font-size-primary);
    }

    .mainRegister>.registerForm>.submitWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mainRegister>.registerForm>.submitWrapper>button {
        height: 2.6vw;
        width: 7.81vw;
        background-color: #835322;
        text-align: center;
        color: var(--color-white);
        line-height: 2.6vw;
        margin: auto;
        margin: 2.08vw 0;
        font-size: var(--font-size-primary);
        font-weight: bold;
        outline: none;
        border: none;
    }


    .mainRegister>.registerForm>.submitWrapper>button:hover {
        cursor: pointer;
    }




    .mainRegister>div:nth-of-type(3) {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.52vw;
        margin-bottom: 5vw;
    }

    .mainRegister>div:nth-of-type(3)>a:first-child {
        font-size: var(--font-size-primary);
        color: #835322;
    }

    .mainRegister>div:nth-of-type(3)>a:last-child {
        font-size: var(--font-size-primary);
        font-weight: bold;
        text-decoration: underline;
        color: #835322;
    }




    .mainCheckout {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        padding: 2.6vw 7.81vw;
        gap: 5.2vw;
        justify-content: space-between;
    }

    .mainCheckout>.checkoutInfo {
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .titleInfo {
        font-size: 1.56vw;
        color: var(--color-primary);
        margin-bottom: 1.56vw;
        font-weight: bold;
        text-align: left;
    }

    .mainCheckout>.checkoutInfo>div {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mainCheckout>.checkoutInfo>.infoContact {
        display: grid;
        grid-template-columns: 2fr 2fr;
        gap: 2.6vw;

    }

    .mainCheckout>.checkoutInfo>.infoContact>input {
        border: none;
        outline: none;
        width: 100%;
        height: 2.6vw;
        border-bottom: #835322 solid 1px;
        background-color: transparent;
        font-size: var(--font-size-primary);
        color: var(--color-primary);
    }

    .mainCheckout>.checkoutInfo>.infoContact>input::placeholder {
        color: #83532270;
        font-size: var(--font-size-primary);
    }

    .shipping {
        margin-top: 5.2vw;
    }

    .mainCheckout>.checkoutInfo>.checkOut {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-top: 2.6vw;
    }


    .mainCheckout>.checkoutInfo>.checkOut>div {
        height: 3.12vw;
        text-align: center;
        margin-top: 1.04vw;
        background-color: #835322;
        color: #fff;
        font-size: var(--font-size-3);
        text-transform: uppercase;
        line-height: 3.12vw;
        padding: 0 1.56vw;
    }

    .mainCheckout>.checkoutInfo>.checkOut>div:hover {
        cursor: pointer;
    }

    .mainCheckout>.checkoutInfo>.checkOut>a {
        font-size: var(--font-size-2);
        color: var(--color-primary);
        margin-top: 1.56vw;
        opacity: 0.7;
    }

    .mainCheckout>.checkoutCart {
        width: 35%;
        height: auto;
        display: flex;
        flex-direction: column;
    }


    .mainCheckout>.checkoutCart>.totalInfo {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        margin-top: 1.04vw;
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: #835322 solid 2px;
        padding: 0.52vw 0;
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item:first-of-type {
        border-top: #835322 solid 2px;
    }


    .mainCheckout>.checkoutCart>.totalInfo>.item>img {
        width: 8.85vw;
        height: 8.85vw;
        border-radius: 1.56vw;
    }


    .mainCheckout>.checkoutCart>.totalInfo>.item>.item-info {
        width: 60%;
        height: 3.64vw;
        padding-left: 1.04vw;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item>.item-info>p:first-child {
        font-size: var(--font-size-2);
        text-transform: uppercase;
        color: var(--color-3);
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item>.item-info>p:nth-child(2) {
        font-size: var(--font-size-2);
        color: var(--color-primary);
    }

    .mainCheckout>.checkoutCart>.totalInfo>.item>.quantity {
        width: 10%;
        text-align: right;
        font-size: var(--font-size-2);
    }

    .mainCheckout>.checkoutCart>.totalPrice {
        display: flex;
        flex-direction: column;
        margin-top: 1.56vw;
        gap: 1.04vw;
    }

    .mainCheckout>.checkoutCart>.totalPrice>div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .mainCheckout>.checkoutCart>.totalPrice>.totalPriceItem:last-child {
        padding-top: 0.52vw;
        border-top: #835322 solid 2px;
        margin-top: 1.56vw;
    }

    .mainCheckout>.checkoutCart>.totalPrice>.totalPriceItem:last-child>.title {
        font-weight: bold;
    }

    .mainCheckout>.checkoutCart>.totalPrice>div>p {
        font-size: var(--font-size-2);
    }

    .mainCheckout .paymentMethod {
        margin-top: 3vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .mainCheckout .paymentMethod>.titleInfo {
        margin: 0;
    }


    .mainCheckout .paymentMethod .optionPayment {
        width: 20vw;
        height: 1.6vw;
        background-color: #83532240;
        color: var(--color-primary);
        border: #835322 solid 1px;
        font-size: var(--font-size-primary);
        outline: none;
    }

    .mainCheckout .paymentMethod .optionPayment:hover {
        cursor: pointer;
    }


    .validation-error {
        color: red;
        font-size: var(--font-size-primary);
        padding: 2px 5px;
        border-radius: 4px;
        z-index: 999;
    }


    @keyframes flash {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .flash-error {
        animation: flash 0.3s ease-in-out;
    }









    .mainResult {
        height: 52vw;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mainResult .result {
        height: 50%;
        width: 50%;
        background-color: #DDB888;
        border-radius: 1.04vw;
        justify-content: center;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 2.6vw;
    }

    .mainResult .result h2 {
        font-size: var(--font-size-4);
    }

    .mainResult .result p {
        font-size: var(--font-size-3);
    }


    .mainResult .result a {
        font-size: var(--font-size-2);
        color: var(--border-color);
    }

    @media screen and (min-width: 766px) {
        @keyframes cloudOverlay {
            0% {
                transform: translateY(0) scale(1);
                opacity: 0.7;
            }
            100% {
                transform: translateY(-63%) scale(1.6);
                opacity: 0.9;
            }
        }

        @keyframes textbanner {
            0% {
                transform: translateY(-400%);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .banner > img:first-child {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 2;
            object-fit: cover;
        }

        .banner > .divTextSky {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: 15.62vw;
            z-index: 3;
            opacity: 0;
            will-change: transform, opacity;
        }

        /* Chỉ chạy animation khi page đã load xong */
        html.page-loaded .banner > img:first-child {
            animation: cloudOverlay 3s ease-out forwards;
        }

        html.page-loaded .banner > .divTextSky {
            animation: textbanner 2s ease-out forwards;
            animation-delay: 0.5s; /* Delay 0.5s sau khi cloud bắt đầu animation */
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .banner > .bg {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
    }

    /* Pre-load với system font để tránh FOUT */
    .banner > .divTextSky {
        font-family: Arial, sans-serif;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 15.62vw;
        z-index: 3;
        animation: textbanner 2s ease-out forwards;
        opacity: 0;
    }

    /* Áp dụng custom font khi đã load xong */
    html.fonts-loaded .banner > .divTextSky,
    html.fonts-loaded .banner > .divTextSky > h1 {
        font-family: 'BuffaloInline2Grunge', Arial, sans-serif;
    }

    /* Toast Notification */
    .toast {
        position: fixed;
        top: 25px;
        right: 30px;
        border-radius: 12px;
        background: #fff;
        padding: 20px 35px 20px 25px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        border-left: 6px solid #4070f4;
        overflow: hidden;
        transform: translateX(calc(100% + 30px));
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
        z-index: 9999;
    }

    .toast.active {
        transform: translateX(0%);
    }

    .toast .toast-content {
        display: flex;
        align-items: center;
    }

    .toast-content .check {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 35px;
        width: 35px;
        background-color: #4070f4;
        color: #fff;
        font-size: 20px;
        border-radius: 50%;
    }

    .toast-content .message {
        display: flex;
        flex-direction: column;
        margin: 0 20px;
    }

    .message .text {
        font-size: 16px;
        font-weight: 400;
        color: #666666;
    }

    .message .text.text-1 {
        font-weight: 600;
        color: #333;
    }

    .toast .close {
        position: absolute;
        top: 10px;
        right: 15px;
        padding: 5px;
        cursor: pointer;
        opacity: 0.7;
    }

    .toast .close:hover {
        opacity: 1;
    }

    .toast .progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: #ddd;
    }

    .toast .progress:before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: #4070f4;
    }

    .toast.active .progress:before {
        animation: progress 5s linear forwards;
    }

    @keyframes progress {
        100% {
            right: 100%;
        }
    }

    /* Error Message */
    .error-message {
        display: none;
        color: #dc3545;
        font-size: 14px;
        margin: 10px 0;
        padding: 10px 15px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 100%;
    }

    /* Success Message */
    .success-message {
        background-color: #e8f5e9;
        color: #2e7d32;
        padding: 10px;
        border-radius: 4px;
        margin-top: 10px;
        border-left: 4px solid #2e7d32;
    }
} 

/* Desktop */
@media screen and (min-width: 766px) {
    .error-message-auth {
        display: none;
        font-size: 16px;
        padding: 15px 20px;
        margin: 15px 0;
        border-radius: 6px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        color: red;
    }
}

/* Mobile */
@media screen and (max-width: 765px) {
    .error-message-auth {
        display: none;
        font-size: 14px;
        padding: 10px 15px;
        margin: 10px 0;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 5vw;
        color: red;
    }
}