:root {
    --primary-color: #F58E85;
    --linear--0: #FBCFC2;
    --linear--100: #FE6C5F;
}
.popup-points-free{
/* popup */

position: absolute;
width: 317px;
height: 212px;
left: calc(50% - 317px/2);
top: calc(50% - 212px/2 - 11px);
background: #d11212;
border-radius: 20px;
}

.btn-points-star {
    /* point */

box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 2px 3px 2px 6px;
gap: 1px;

height: 20px;
top: 93%;
right: 8%;

background: #FFFFFF;
border: 1px solid #F58E85;
box-shadow: 0px 1px 2px rgba(245, 142, 133, 0.22);
border-radius: 20px;

}

.text-points-star {
/* 2,000 */


font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #F58E85;
}


.bar-top {
    display: flex;
    align-items: center;
    /* Frame 13 */
height: 30px;
left: 0px;
top: 78px;

background: linear-gradient(180deg, #FBCFC2 0%, #FE6C5F 100%);

}


.box {
    /* Card Box */

width:40%;
height:auto;    

background: #FFFFFF;
border: 1px solid #F58E85;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 14px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;

}

.check-points {
    /* Check Point */

width: 100%;
height: 90px;
background: #FFFFFF;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);

}

.input-check-points {
    /* tel */

width: 80%;
height: 42px;
border-radius:15px;
border: 1px solid grey;

}

.input-check-points input {
    width: 80%;
    outline: none;
    border: none;
    text-align: center;
}

.input-check-points input::placeholder {

font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #C1C4C9;


}

.input-check-points img {
    width: 24px;
    height: 24px;
}





.btn-check-points{
    padding: 9px 18px;
    width: 75px;
    height: 42px;
    background: #F58E85;
    border-radius: 14px;
    font-family: 'Noto Sans Thai';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    border: none;
}

.product-name{
    /* ขนมแมวเลีย 5 ซอง */

font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #000000;
display: block;


}

.text-1{
 /* อย่าลืม!! ใช้คะแนนแลกของฟรีประจำเดือนนี้ */

font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #FF0000;
}

.text-2{
    /* อย่าลืม!! ใช้คะแนนแลกของฟรีประจำเดือนนี้ */
   
   font-family: 'Noto Sans Thai';
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
   color:black;
   }



.text-4 {
    font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
display: flex;
align-items: center;
text-align: center;

color: #F58E85;
}

.text-5 {
font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
display: flex;
align-items: center;
text-align: center;

color: #F58E85;
}

.text-6 {
    /* ทั้งหมด */

font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
display: flex;
align-items: center;
text-align: center;

color: #F58E85;


}



.text-price-1{
    font-family: 'Noto Sans Thai';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #F58E85;
}

.text-price-2{
font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
text-decoration-line: line-through;
color: #C9C9C9;

}

.text-qty-seller {

font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 12px;
/* identical to box height */
text-align: right;
color: #000000;

}



.categories-premium-box {
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 50px;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-sizing: border-box;
    width: 80px;
    height: 50px;
    background: #FFFFFF;
    border:none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 100px;


}

.categories-premium-box-circle {
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;

    flex: none;
    order: 1;
    flex-grow: 0;
    box-sizing: border-box;
    border:none;
    /* border-radius:50%; */


}

.bar-seller {
padding: 0 20px;
display: flex;
justify-content: space-between;
margin-top: 5px;
height: 30px;
background:url("../images/bar-seller.png");
background-repeat: no-repeat;
background-size: cover;
align-items: center;
}

.icon-arrow-right-circle {
   width: 22px;
   height: 22px;
} 


.card-box {
    /* card product */

min-width: 160px;
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;

}

.btn-buy {
    /* buy */

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 5px 6px;

width: 50px;
height: 32px;

background: #F58E85;
box-shadow: inset 0px -2px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
border: none;


/* ซื้อเลย */



font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;

color: #FFFFFF;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;

}

.btn-shipping-fast {
    /* สินค้าจัดส่งไว */

width: fit-content;
height: 20px;
padding: 0 2px;
font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 9px;
display: flex;
align-items: center;
justify-content: center;

color: #30AE9D;

border:0.5px solid #30AE9D;

}

.btn-extra-comm {
    /* EXTRA COMM */

    width: fit-content;
height: 20px;
display: flex;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
background-color:white;
border:0.5px solid #F58E85;


}

.btn-extra {
    width: fit-content;
    height: 20px;
    padding: 0 2px;
    font-family: 'Noto Sans Thai';
    font-style: normal;
    font-weight: 400;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
color: #F58E85;


}

.btn-comm {
    /* EXTRA COMM */
    width: fit-content;
    height: 20px;
    padding: 0 2px;
    font-family: 'Noto Sans Thai';
    font-style: normal;
    font-weight: 400;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;

color: #9B85F5;


}




.topic-1 {
/* ของขวัญประจำเดือน */

position: absolute;
font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;

color: #FFFFFF;


}

.topic-2 {
font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #000000;
}


.topic-3 {
font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: #000000;
}

.topic-4 {
/* สินค้าขายดี */
font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 21px;
display: flex;
align-items: center;
color: #FFFFFF;
}

.contain-box::-webkit-scrollbar {
    display: none;
}


.icon-chevron-right {
    width: 7px;
    height: 11px;
}

.contain-icon-chevron-right-card {
    top: 45%;
    right: 3%;
    z-index: 1;
}


.icon-chevron-right-card {
    width: 7px;
    height: 15px;
}


.ellipse {
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
}

.ellipse-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;

}






/********************modal**********************/

.modal-points-free {
border-radius: 20px;

}
.bg-primary-2 {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important ;
}



/*********contain popup***********/

.contain-popup-otp {
    width: 350px;background-color:#FFFFFF;
             height: 250px;left: 50%;
             transform: translate(-50%, -50%);top: 50%;z-index:999;border-radius: 20px;
             box-shadow: inset 0px -2px 3px rgba(0, 0, 0, 0.25);

}

.title-otp {
    font-family: 'Noto Sans Thai';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #333333;
}

.btn-confirm {
    width: 85px;
    height: 35px;
    border-radius: 6px;
    font-family: 'Noto Sans Thai';
    background: #C4C4C4;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #C4C4C4;
    color: #FFFFFF;
}



.contain-box-otp input {
    background: #FFFFFF;
    border: 1.48px solid #eeada7;
    border-radius: 6px;width: 45px;
    height: 50px;padding:12px 14px;outline:none;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 23px;
    font-family: 'Noto Sans Thai';
    color: #000000;
}
/***********contain popup*********************/


/****************tracking*******************/
.nav {
    --bs-nav-link-padding-y: .2rem;
}

.nav-tabs {
    --bs-nav-tabs-border-width: none
}

.nav-link {
    color: #8C8C8C;
}

.nav-link.active {
    /* color: #8C8C8C; */
    /* padding: .25rem !important; */
    border: none;
}

.nav-tabs .nav-link.active {
    border-bottom: 4px solid var(--primary-color);
    color: #8C8C8C;
}
.nav {
    flex-wrap: unset;
}

.scrollable-nav {
    overflow-x: auto;
    /* Enable horizontal scrolling */
    white-space: nowrap;
    /* Prevent items from wrapping to the next line */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.scrollable-nav::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.scrollable-nav ul {
    display: inline-flex;
    /* Align items in a row */
}

.scrollable-nav li {
    flex: none;
    /* Ensure list items do not grow to fill container */
}