@font-face {
    font-family: 'NotoSans-regular';
    src: url('../fonts/NotoSansThai-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root{
    --red:#c95151;/*#dc3545*/
    --reds:#dc3545;
    --fontc:#666;
    --white:#fff;
}
body, html{
    font-family: 'NotoSans-regular' !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff !important;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

a , .page-link{
    text-decoration: none;
    color: #666;
}
a :hover , .page-link:hover{
    color:  var(--red)!important;
}

/* --------  Scrollbar -----------*/
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px grey;
  border-radius: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 2px;
}
/* --------  End Scrollbar -----------*/

/* --------  loading animation -----------*/
.bg_loading{
    position:absolute;
    height: 100%;
    width: 100%;
    background-color:#fff ;
    background-image: url();
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    z-index: 98; 
}
.spinner {
    left:50%;
}

.spinner {
    left:50%;
    position:absolute;
    margin: 19% auto auto auto;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 10px;
    z-index: 99;
}
.spinner > div {
    background-color: var(--red);
    height: 100%;
    width: 7px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}
.black > div { background:rgba(0,0,0,0.5); height: 60% }

    .spinner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .spinner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    .spinner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
    @-webkit-keyframes stretchdelay {
      0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
      20% { -webkit-transform: scaleY(1.0) }
    }

    @keyframes stretchdelay {
      0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      } 20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }



*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
/* --------   end  loading animation -----------*/

/* --------   popup -----------*/

/* พื้นหลังมืด */
    .popup-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .popup-overlay.active {
      display: flex;
    }

    /* กล่อง popup */
    .popup-box {
      position: relative;
      background: none;
      padding: 0px;
      border-radius: 10px;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      animation: fadeIn 0.4s ease;
    }

    .popup-box img {
      width: 100%;
      border-radius: 8px;
      display: block;
    }

    /* ปุ่มปิด */
    .btn-close {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #ff4d4d;
      border: none;
      color: #fff;
      font-size: 1.1em;
      padding: 3px 10px 10px 10px;
      cursor: pointer;
      border-radius: 8px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9); }
      to   { opacity: 1; transform: scale(1); }
    }

/* ------- end popup ----------*/

/*  ------ Custom Form ------  */
.form-check-input:checked {
    background-color: var(--red)!important;
    border-color: var(--red)!important;
}

.form-control:focus {
    border-color: var(--red)!important;
    box-shadow: none;
}

.form-select:focus {
    border-color: var(--red)!important;
    box-shadow: none;
}
/*  ------ End Custom Form ------  */

/* -------- back to top icon ---------*/
.back-top {
    position: fixed;
    bottom: 50px;
    margin-right: 0px;
    right: 4px;
    z-index: 5000;
}
.back-top a {
    width: 40px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    font-size: 12px;
}
.back-top a:hover {
    color: #000;
}
.back-top a:hover span {
    background-color: #222;
}

.back-top span {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    margin-bottom: 7px;
    background: #999 url(../images/systems/up-arrow.png) no-repeat center center;
    background-size: 30px;
}
/* -------- end back to top icon ---------*/

/* ----------- Navbar ----------- */
.nav-right{
    text-align: right;
    font-size: 0.9em;
}
.nav-top a:hover{
    color: var(--red);
    text-decoration: none !important;
}

.top-link{
    color: var(--fontc) !important;
}
.top-link a:hover{
    color: var(--red) !important;
}

/* ----------- End Navbar ----------- */

/* ------------ Footer --------------- */
.wp-link{
    background-color: rgba(245, 245, 245, 0.8);
    padding: 20px 0;
}
.contact{
    background-color: rgba(221, 221, 221, 0.8);
    padding: 20px 0;
}
.coppyright{
    color: var(--white);
    background-color: rgba(154, 38, 38, 0.7);
    padding: 20px 0;
}
.cx a{
    color: var(--white);
}
.cx a:hover{
    color: #333;
}
.cb{
    border-right: 1px solid rgba(116, 116, 116, 0.2);
}
.ce{
    border-right: 1px solid rgba(77,77,76,0.2);
    text-align: left;
}
/* ------------ End Footer ------------ */
/* ------------ product ------------- */
.cs-product{
    float: left;
    border:1px dashed #e5e5e5;
    margin: 0 !important;
    padding: 6px !important;
}
.cs-product:hover {
    opacity: 1.0;
    color: var(red);
    border:1px solid var(red); 
    z-index: 90;
    box-shadow:0px 0px 10px rgba(156, 75, 75, 1);
    -moz- box-shadow:0px 0px 10px rgba(156, 75, 75, 1);
    -webkit- box-shadow:0px 0px 10px rgba(156, 75, 75, 1);
    -o- box-shadow:0px 0px 10px rgba(156, 75, 75, 1);
}
.cs-title{
    padding-top: 10px;
    min-height: 70px; 
    max-height: 70px; 
    text-align: left; 
    font-size: 1.0em;
}

/* ------------ endproduct ------------- */
/* --------- product images slide ------ */
.cursor {
  cursor: pointer;
}
.PdSlides{
    min-height: 330px;
    max-height: 330px;
    text-align: center;
    display: grid;
    place-items: center;
}
.PdSlides img {
  vertical-align: middle;
  object-fit: contain;
}
/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 45%;
    padding: 16px 10px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev {
    left: 0;
    border-radius: 0 3px 3px 0; 
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
}

/*----------- end product images slide ------------ */

.bg-white{
    background-color: var(--white) !important;
}
.mobile-icon{
    text-align: center;
    color: var(--fontc);
}
.mobile-icon img{
    height: 35px; 
    display: block; 
    margin: auto;
    color: var(--fontc);
}
.mobile-icon-t{
    text-align: center;
    font-size: 0.7em;
    color: var(--fontc);
}
.mobile-icon-f{
    text-align: center;
    font-size: 1.5em;
    color: var(--fontc);
    margin-bottom: -5px;
}
.text-center{
    text-align: center !important;
}
.text-right{
    text-align: right !important;
}
.text-left{
    text-align: left !important;
}
.text-a:hover{
    color: var(--red);
    cursor: pointer;
}
.form-control-c{
    border: 1px solid #ced4da !important; 
    border-left: 0 !important;
    background-color: #ffffff !important;
}
.form-control-c:focus {
    border-color: #ced4da !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.input-group-text-c{
    background-color: #fff !important;
    border-right: 0 !important;
}
.cs-nav{
    border-bottom: 1px solid #f3f0f0 !important;
}
.mobile{
    margin-bottom: 60px !important;
}
.desktop{
    margin-top: 0px !important;
}
.cart a{
    color: var(--reds);
}
.cart a:hover{
    color: var(--red);
}
.card{
    border-color: #00000014 !important;
}
.card-bank{
    min-height: 480px;
    max-height: 480px;
}
.ct{
    color: #999;
}
.cm-a{
    text-decoration:none;
    color:#999;
    text-align: center;
}
.cm{
    border: 1px solid #999; 
    border-radius: 10px;
}
.cm:hover{
    border-color: var(--red)!important;
}
.cm-icon{
    font-size: 1.8em; 
    padding-top: 10px;
}
.cm-text{
    margin-top: -5px;
    padding-bottom: 10px; 
    font-size:0.8em;
}
.wp-h3-text{
    font-size: 1.3em !important;
    color: var(--fontc) !important;
}
.c-icon-qt-active{
    background-color: #fa7f30; 
    border-radius: 50%; 
    padding: 5px; 
    text-align: center; 
    min-height: 40px; 
    max-height: 40px; 
    min-width: 40px; 
    max-width: 40px; 
    color:#fff;
}

.c-icon-bl-active{
    background-color: #5498f4; 
    border-radius: 50%; 
    padding: 5px; 
    text-align: center; 
    min-height: 40px; 
    max-height: 40px; 
    min-width: 40px; 
    max-width: 40px; 
    color:#fff;
}
.c-icon-iv-active{
    background-color: #1cc3a6; 
    border-radius: 50%; 
    padding: 5px; 
    text-align: center; 
    min-height: 40px; 
    max-height: 40px; 
    min-width: 40px; 
    max-width: 40px; 
    color:#fff;
}
.c-icon-qt, .c-icon-iv, .c-icon-bl{
    border: 1px solid #e1e1e1;
    color:#e1e1e1; 
    border-radius: 50%; 
    padding: 5px; 
    text-align: center; 
    min-height: 40px; 
    max-height: 40px; 
    min-width: 40px; 
    max-width: 40px; 
}

.text-icon-co{
    padding-top:3px; 
    font-weight:bold;
}
.icon-active{
    color: var(--red) !important;
}
.cm-active{
    border-color: var(--red) !important;
}
.nav-link{
    color: #999 !important;
}
.nav-link.active{
    color: var(--red)!important;
}

@media (max-width: 720px) {
    .cat-icon {
        margin-top:10px;
    }
    .cm-icon{
    font-size: 1.2em; 
    padding-top: 10px;
}
}