.card-body.p-0 .table tbody>tr>td:last-of-type, .card-body.p-0 .table tbody>tr>th:last-of-type, .card-body.p-0 .table tfoot>tr>td:last-of-type, .card-body.p-0 .table tfoot>tr>th:last-of-type, .card-body.p-0 .table thead>tr>td:last-of-type, .card-body.p-0 .table thead>tr>th:last-of-type {
  padding-right: 0.8rem !important;
}
/* countdown flash-sale */
.countdown {
    font-size: 1rem;
}

.countdown2 {
    font-size: 1rem;
}

.pb-6, .py-6 {
  padding-bottom: 4rem!important;
}

.cm{
    padding-right:2px  !important;
    padding-left:2px  !important;
}

.flash-sale {
    font-size: 36px;
}

.table2 {
    width: 100%;
    margin-bottom: 0rem;
    background-color: transparent;
    border-color: #fff;
    border-spacing: 0px;
}
.c-p-2 {
    padding-right:0.5rem !important;
    padding-top: 0rem !important;
    padding-bottom:0.5rem !important;
}

@media only screen and (max-width: 390px) {
    .flash-sale {
        font-size: 22px;
    }
    .countdown {
        font-size: 0.8rem;
    }
    .countdown2 {
        font-size: 0.5rem;
    }
}
/* จบ countdown flash-sale */

    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }



    @media only screen and (max-width: 800px) {
        /* Force table to not be like tables anymore */
        #no-more-tables table,
        #no-more-tables thead,
        #no-more-tables tbody,
        #no-more-tables th,
        #no-more-tables td,
        #no-more-tables tr {
        display: block;
        }
         
        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
        }
         
        
          
        #no-more-tables td {
        /* Behave like a "row" */
        position: relative;
        padding-left: 30%;
        white-space: normal;
        text-align:right;
        background-color: #fff;
        }
         
        #no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */

        left: 10px;
        width: 30%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
        }
         
        /*
        Label the data
        */
        #no-more-tables td:before { content: attr(data-title); }
        }
      



        #thumbnail {
            text-align: center;
            padding-bottom: 10px;
          }

        #thumbnail img{
            max-width: 100%;
            padding-bottom: 5px;
          }
          
          .img-gallery {
            text-align: center;
        }         
          .img-gallery img{
            max-width: 100%;
            
        }


        .bf {
            font-size: 50px;
        }
        
        .tf {
            font-size: 30px;
        }

        .hide {
            display: none;
          }

          [class*=icheck-] {
            min-height: 22px;
            margin-top: 0px!important;
            margin-bottom: 0px!important;
            padding-left: 0;
        }

        [class*=icheck-]>input:first-child {
            position: absolute!important;
            opacity: 0;
            margin: 0;
        }

        [class*=icheck-]>label {
            padding-left: 39px!important;
            min-height: 22px;
            line-height: 25px;
            display: inline-block;
            position: relative;
            vertical-align: top;
            margin-bottom: 0;
            font-weight: 400;
            cursor: pointer;
        }

        [class*=icheck-]>input:first-child+input[type=hidden]+label::before, [class*=icheck-]>input:first-child+label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 25px;
            height: 25px;
            border: 4px solid #D3CFC8;
            border-radius: 0;
            margin-left: -39px;
        }

        [class*=icheck-]>input:first-child:checked+input[type=hidden]+label::after, [class*=icheck-]>input:first-child:checked+label::after {
            content: "";
            display: inline-block;
            position: absolute;
            top: 0;
            left: 2px;
            width: 6px;
            height: 15px;
            border: 2px solid #fff;
            border-left: none;
            border-top: none;
            transform: translate(7.75px,4.5px) rotate(45deg);
            -ms-transform: translate(7.75px,4.5px) rotate(45deg);
        }


           body.modal-open {
            padding-right: 17px;
        
            }

            @media only screen and (max-width: 800px) {
                body.modal-open {
                    padding-right: 0px;
                
                    }
                  
            }
            .checked {
                color: orange;
              }

            .img-gallery2 {
                text-align: center;
              
            }         
            .img-gallery2 img {
                width: 80px;
                height: 80px;
                object-fit: cover;
                /*max-width: 100%;
                /*max-height: 100%;*/
              }
              .rounded-circle {
                border-radius: 100%!important;
            }

              .img-gallery3 {
                text-align: center;
               
            }         
            .img-gallery3 img {
                width: 200px;
                height: 200px;
                object-fit: cover;
                max-width: 100%;
                max-height: 100%;
              }
    
              .pic{
                width: 40%;
              }
              .info{
                width: 60%;
              }
              @media only screen and (max-width: 800px) {
                .img-gallery2 img {
                    width: 40px;
                    height: 40px;
                    object-fit: cover;
                    max-width: 100%;
                    max-height: 100%;
                  }
                  .img-gallery3 img {
                    width: 150px;
                    height: 150px;
                    object-fit: cover;
                    /*max-width: 100%;
                    max-height: 100%;*/
                  }

                  
            }

            .buttonfix {
                height: 100px;
                width: 100%;
                z-index: 100;
                position: fixed;
                left: 0;
                bottom: 0;
                text-align: center;
                }

                .bg-1{
                  background-color: #f0f0f1;
                }
                .w-1000{
                    width: 820px;
                    max-width: 100%;
                    margin: auto;
                    overflow-x: hidden;
                    background-color: #fff;
                }


                
              @media only screen and (max-width: 800px) {
                .w-1000{
                    width: 100%;
                    max-width: 100%;
                    margin: auto;
                    overflow-x: hidden;
                }
                  
            }



              th.st{
                
                width: -webkit-max-content;
                width: -moz-max-content;
                width: max-content;
               
               
            }
          

            .sb tr{
              border-left: none !important;
              border-right: none !important;
              border-bottom: none !important;
              
              border-collapse: collapse;

          }

           table.sb{
            border: none  !important;
            border-collapse: collapse;
        }

        .font-s{
          font-size:  1.5rem;
        }

        .font-img{
          font-size:  8rem;
        }

        h3.title{
          font-size:  1.5rem;
        }
                
        @media only screen and (max-width: 800px) {
          .font-s{
            font-size:  1rem;
          }
          h4.title{
            font-size:  1rem;
          }
          h3.title{
            font-size:  1rem;
          }

          .font-img{
            font-size:  5.5rem;
          }
            
      }

    
      .form-element {
        border-collapse: collapse;
      }
      .form-element input {
        display:none;
      }
      .form-element label {
        width:100%;
        display:flex;

        justify-content:center;
        height:100%;
        cursor:pointer;
        border:1px solid #ddd;
        background:#fff;
     

        transition:all 200ms ease-in-out;
        border-radius:10px;
      }
   

      .form-element label:before {
        content: "✓";
        position: absolute;
        width: 25px;
        height: 25px;
        top: 12px;
        left: 12px;
        background: #dc3545;
        color: #fff;
        text-align: center;
        line-height: 23px;
        font-size: 18px;
        font-weight: 600;
        border-radius: 50%;
        opacity: 0;
        transform: scale(0.2);
        transition: all 100ms ease-in-out;
        z-index: 1000;
    }
      .form-element input:checked + label:before {
        opacity:1;
        transform:scale(1);
      }
      .form-element input:checked + label .icon {
        color:#dc3545;;
      }
      .form-element input:checked + label .title {
        color:#dc3545;
      }
      .form-element input:checked + label {
        border:1px solid #dc3545;;
      }

      .fixed-bottom-foot {
        position: fixed;
        bottom: 0;
        z-index: 1030;
        padding: 5px;
        right: 0;
        left: 0;
        margin: 0;
    }

    .fixedbutton {
      position: fixed;
      bottom: 0;
      z-index: 1000;
      padding: 5px;
      right: 0;
      left: 0;
      margin: 0;
  }

    .w-1000-foot{
      width: 820px;
    max-width: 100%;
    margin: auto;
    }


/* The Modal (background) */
.modal {
  z-index: 1050; /* Sit on top */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */


/* The Close Button */
.close {

  font-size: 50px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.btn-label {
	position: relative;
	left: -16px;
	display: inline-block;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px 0 0 3px;
  font-size: 30px;
}

.btn-labeled {
	padding-top: 0;
	padding-bottom: 0;
}

#order-section{
  display:none;
}

tr.card-salepage{
 
  margin-bottom: 1rem;
  background-color: #fff;
  background-clip: border-box;
  border: 0 solid rgba(0,0,0,.125);
  border-radius: 0.25rem;

}

.card-header{
  background-color: #fff;
}
.card2{
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0 solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
  
  box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
  margin-bottom: 1rem;

}

@media only screen and (max-width: 800px) {
  .card2 {
    background: none;
    border:  none;
    box-shadow:none;
    }

}

.text-center-text{
  text-align: left;
}

.text-center-but{
  text-align: center;
}
@media only screen and (max-width: 800px) {
  .text-center-but {
    text-align: right;
    }

.text-center-text{
  text-align: right;
}
}
/* css แบ่งหน้า */
.browse_page{   
  clear:both;   
  margin-left:12px;   
  height:25px;   
  margin-top:5px;   
  display:block;   
}   
.browse_page a,.browse_page a:hover{   
  display:block;   
  width: 2%;
  font-size:14px;   
  float:left;   
  margin:0px 5px;
  border:1px solid #CCCCCC;   
  background-color:#F4F4F4;   
  color:#333333;   
  text-align:center;   
  line-height:22px;   
  font-weight:bold;   
  text-decoration:none;   
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; 
}   
.browse_page a:hover{   
  border:1px solid #CCCCCC;
  background-color:#999999;
  color:#FFFFFF;   
}   
.browse_page a.selectPage{   
  display:block;   
  width:45px;   
  font-size:14px;   
  float:left;   
  margin-right:2px;   
  border:1px solid #CCCCCC;
  background-color:#999999;
  color:#FFFFFF;   
  text-align:center;   
  line-height:22px;    
  font-weight:bold;   
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; 
}   
.browse_page a.SpaceC{   
  display:block;   
  width:45px;   
  font-size:14px;   
  float:left;   
  margin-right:2px;   
  border:0px dotted #0A85CB;   
  background-color:#FFFFFF;   
  color:#333333;   
  text-align:center;   
  line-height:22px;   
  font-weight:bold;   
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; 
}   
.browse_page a.naviPN{   
  width:50px;   
  font-size:12px;   
  display:block;   
/*    width:25px;   */
  float:left;   
  border:1px solid #CCCCCC;
  background-color:#999999;
  color:#FFFFFF;   
  text-align:center;   
  line-height:22px;   
  font-weight:bold;      
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; 
}  
/* จบ css แบ่งหน้า */