:root {
    --shp-height-700: 700px;
    --shp-width-30: 30%;
    --shp-color-color1: rgb(247, 217, 223);
    --shp-color-color2: rgb(251, 235, 177);
    --shp-color-color3: rgb(245, 208, 167);
    --shp-color-color4: rgb(224, 244, 231);
    --shp-color-color5: rgb(208, 211, 227);
    --shp-color-color6: rgb(250, 230, 207);
    --shp-color-color7: rgb(254, 222, 235);
}

/* Helper classes */
.shp-border-color1 {
    border-color: var(--shp-color-color1) !important;
}
.shp-border-color2 {
    border-color: var(--shp-color-color2) !important;
}
.shp-border-color3 {
    border-color: var(--shp-color-color3) !important;
}
.shp-border-color4 {
    border-color: var(--shp-color-color4) !important;
}
.shp-border-color5 {
    border-color: var(--shp-color-color5) !important;
}
.shp-border-color6 {
    border-color: var(--shp-color-color6) !important;
}
.shp-border-color7 {
    border-color: var(--shp-color-color7) !important;
}
.shp-bg-color1 {
    background-color: var(--shp-color-color1) !important;
}
.shp-bg-color2 {
    background-color: var(--shp-color-color2) !important;
}
.shp-bg-color3 {
    background-color: var(--shp-color-color3) !important;
}
.shp-bg-color4 {
    background-color: var(--shp-color-color4) !important;
}
.shp-bg-color5 {
    background-color: var(--shp-color-color5) !important;
}
.shp-bg-color6 {
    background-color: var(--shp-color-color6) !important;
}
.shp-bg-color7 {
    background-color: var(--shp-color-color7) !important;
}

body {
    font-family: var(--thm-font-family);
  }
.SidebarCate {
    border-radius: .75rem;
    padding: .5rem;
    border: 1px solid var(--bs-gray-200);
}
.ContentCate{
    padding: .5rem; 
    background-color: #f8f9fa;
    border-radius: .75rem;
}
.grid {
    display: grid;
    grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
    gap: var(--bs-gap, 1.5rem);
}
.grid .g-col-4 {
    grid-column: auto/span 4;
}
.ProductContainer {
    background-color:var(--bs-white);
    padding: 1.25rem;
    transition: .15s transform ease-in-out;
    position: relative;
}
.ProductContainer:hover {
    transform: scale(.97);
    position: relative;
}
.ProductContainer_title {
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    min-height: 40px;
}
.form-option {
    font-family: var(--thm-font-family) !important;
}
.add-cart { 
    border-radius: 100px;
    padding: 3px 4px;
    width: 130px;
    height: 30px;
    line-height: 20px;
}
.add-cart span {
    color: var(--bs-white);
    font-size:x-small;
    }
.linkDetailIcon a { color: var(--bs-gray-700);}
.linkDetailIcon a:hover { color: var(--bs-gray-900);}
.linkView { width: 40px; position: absolute; top: 5px;right: 5px;}
    .News { position: absolute; top: 5px; left: 5px;}
.add-show { 
    border-radius: 100px;
    padding: 3px 4px;
    width: 30px;
    height: 30px;
    line-height: 20px;
    tran
    }
 .add-show:hover {   background: var(--bs-gray-100);}
.add-show i {
    top:4px; 
  
}
.add-show a {
    color: var(--bs-gray-500) !important;
           }
.add-show:hover a {
    color:var(--bs-gray-900) !important;
}
#divBotPaging  a { 
    color:var(--bs-gray); margin: 5px;
    text-decoration: none;
}
#divBotPaging .shp-btn.active { 
    color:var(--bs-white);
    background:var(--bs-danger);
    border-radius: 100%;
    padding: 5px;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
}
.title-text-emphasis {
    color: var(--thm-color-special-2);
    margin-left:5px;
}

#divUserPoint .ui-slider-range {
    background: var(--thm-color-special-1);
}

/* Swiper */
.row-list-navigation-next {
    background-image: url("/engine/modules/Sitesaz.Shopping/images/slideleft.png");
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left: -10px;
    right: auto;
    opacity: 0.3;
}
.row-list-navigation-prev {
    background-image: url("/engine/modules/Sitesaz.Shopping/images/slideright.png");
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left: auto;
    right: -10px;
    opacity: 0.3;
}

    .row-list-navigation-next::after, .row-list-navigation-prev::after {
        display: none;
    }
    .row-list-navigation-next:hover, .row-list-navigation-prev:hover {
        opacity:1;
    }

@media (max-width:640px) {
    .row-list-navigation-next {
        left: 5px;
    }

    .row-list-navigation-prev {
        right: 5px;
    }
}

/* Main Showcase */
.ms-category-list .category-outer-w {
    width: 145px;
}
.ms-category-list .category-bg-container {
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    left: 50%;
    top: -15%;
    transform: translateX(-50%);
}
.ms-category-list .category-bg-content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin: 5px auto;
    transition: all ease-in-out 0.5s;
}
.ms-category-list .category-outer-w:hover .category-bg-content {
  transform: scale(0.85);

}
    .ms-category-list .category-pic-w {
        width: 90px
    }
.ms-category-list .category-pic-container {
    padding-bottom: calc((93 / 93) * 100%);
    margin-bottom: 10px;
}
.ms-category-list .category-pic {
    left: auto;
    top: auto;
    object-fit: contain;
    object-position: center
}
/***************************PROFILE*******************************/
/* Style the tab */
.profile .tab {
    background-color: #fff;
    border-radius: 10px;
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: #fff;
    color: black;
    padding:10px;
    width: 100%;
    border: none;
    outline: none;
    text-align: right;
    cursor: pointer;
    transition: 0.3s;
    font-size: 15px;
    border-bottom: 1px solid #ccc;
}
.link-info { cursor: pointer;}
 
/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #f1f2f3;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #fff;
    border-right: 3px solid red;
}

/* Style the tab content */
.profile-tabcontent {
    height:100%;
    border-radius: 10px;
}
.profile .prf-height-700 {
    height: var(--shp-height-700);
}
.profile .prf-width-30 {
    width: var(--shp-width-30);
}

.profile .top-order .active {
    border-bottom: 3px solid red;
}
.prfile .top-order button .active{
    color:red;
}


/*******************END OF PROFILE****************************************/

/*******************Item Detail ****************************************/
.Contain-line { line-height: 28px; text-align: justify;}
.SumBox { width: 150px;}
.ui-slider-horizontal .ui-slider-handle { border-radius: 100%; 
      background-color: #0070ff;  border:1px solid #0070ff}
      .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header 
      .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html 
      .ui-button.ui-state-disabled:active {border-radius: 100%; 
        background-color: #0070ff !important;  border:1px solid #0070ff !important;}
.ui-widget.ui-widget-content { border:none !important; background: #ddd !important; height: 5px;}
.ui-slider-horizontal .ui-slider-handle { top: -.4em;}
.product-detail .item_color, .product-detail .item_all_color{border:1px solid #ECECEC;width:18px;height:18px;display:inline-block;background-repeat:no-repeat;background-position:center center;background-size:100%;
    border-radius:100%}
    .rad-che{display:inline-block; position:relative;border:1px solid rgba(245,247,250,.7);padding:4px 9px;margin-left:8px;min-width:95px}
    #divColor input[type=radio]:not(old){width: 30px; margin: 0;  padding: 0;font-size: 1em;
        opacity:0; position: absolute; right: 8px; height: 24px;z-index: 9; cursor: pointer;
        top: 7px;}
    #divColor input[type=radio]:not(old) + label{display:inline-block;margin-left:-2em;line-height:1.5em;font-size:0}
    #divColor input[type=radio]:not(old) + label > span{display:inline-block;width:18px;height:18px;border-radius:3px;vertical-align:bottom;position:absolute;right:-4px;top:-4px}
    #divColor input[type=radio]:not(old):checked + label > span{background-image :rgb(240,240,240);position:absolute}
    #divColor p{text-align:center;height:20px;overflow:hidden;color:#777;display:inline-block;font-size:11px;
    line-height:20px;padding:0 8px}
    #divColor input[type=radio]:not(old):checked +  label > span > span{display:block;width:20px;height:20px;
    border:2px solid #4CAF50;border-radius:100%;position:absolute;right:11px;top:6px;font-size:13px}
    .raychat_main_button.bottom { bottom: 50px !important;}
    .ui-slider-horizontal .ui-slider-handle {top: -.4em;}
    .item_color img  { width: 25px !important; height: 25px !important;}
    .accordion-body .User-Experience img { width: 100% !important; height: auto !important; margin: 20px auto;}
    .filterCate { width: 100%; margin: 10px auto; display: block !important;}
    #divWaranty .Wara-T .warantyCtrl {  height: 25px!important; width:25px !important; margin: 0 5px;}
  

 
   
   
    @media (max-width:640px) {
    .Choose { justify-content: center !important;
        position: fixed;
        padding: 7px;
        background: #fff;
        z-index: 8;
        bottom: 85px;
        left: 0;
        right: 0;
        border: 1px solid #ddd;}
   .card-body { display: block !important;}
   .card-body a{ display: block !important; width: 90%;  margin: 10px auto;}
    
    }