/*@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Charmonman:wght@400;700&family=Chonburi&family=Itim&family=Kanit:wght@200;300&family=Mitr:wght@200;300&family=Pattaya&family=Pridi:wght@300;400&family=Prompt:wght@200;300&family=Sarabun:wght@200;300&family=Sriracha&display=swap');

body { font-family: 'Prompt', sans-serif; background-color: #edeef9;  padding-bottom: 30px; }
body.bg { background-color: #fff; }
.none { display:none; }
h1,h2,h3,h4,h5,h6 { margin-bottom: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color:rgb(54, 54, 54); }
a:hover { color:rgb(41, 149, 250); }
.position-zindex { z-index: 88; }
.border-radius0 {  border-radius: 0;}
.cursorpointer { cursor: pointer; }
.containerpage-center-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.form-control:focus {border-color: #333;box-shadow: none;}
.modal-center-screen {text-align: center;padding: 0!important;}
.modal-center-screen:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -4px;}
.modal-dialog-center-screen {display: inline-block;text-align: left;vertical-align: middle;width: 100%;}
.form-check a { color:rgb(0, 140, 233); }
.textupper { text-transform: uppercase; }
.image-30 { max-width: 30%; }
.image-40 { max-width: 40%; }
.image-50 { max-width: 50%; }
.image-70 { max-width: 70%; }
.image-80 { max-width: 80%; }
.image-90 { max-width: 90%; }
.image-100 { max-width: 100%; }
.fs-0 { font-size: 3.5rem!important; }
.fs-7 {font-size: 0.9rem!important;}
.fs-8 {font-size: 0.8rem!important;}
.fs-9 {font-size: 0.7rem!important;}
.fs-10 {font-size: 0.6rem!important;}
.textdecoration { text-decoration: line-through; }

.logo img { max-width: 220px; }
.logo2 img { max-width: 180px; }
.btn-sale {
  width: 800px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5px;
  z-index: 1024;
  margin: 0 auto;
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-transition: .4s;
  transition: .4s;
}
.btn-sale .btn-sale-full {
  min-width: 55%;
  width: 100%;
}

.modal-lg-20 {max-width: 20%;}
.modal-lg-30 {max-width: 30%;}
.modal-lg-50 {max-width: 50%;}
.modal-lg-70 {max-width: 70%;}
.modal-lg-80 {max-width: 80%;}
.modal-lg-90 {max-width: 90%;}
.modal-lg-95 {max-width: 95%;}
.modal-lg-100 {max-width: 100%;}

.calculator-display { background-color: #e0e0e0;color: #222;font-size: 40px;padding: 15px .75em;text-align: right; }
.calculatorsize { width: 350px; }
.calculator-key { background-color: #e0e0e0;display: -ms-grid;display: grid;grid-gap: 1px;grid-template-columns: repeat(3,1fr); }
.calculatorbuttom { background-color: #fff;padding: 15px 34px;position: relative;text-align: center;font-size: 20px;color: #000; border:0; z-index: 4; }
.calculatorbuttom:hover {background-color: rgba(236, 235, 235, 0.952); -webkit-box-shadow: inset 0px 1px 10px -6px rgba(0,0,0,0.75);-moz-box-shadow: inset 0px 1px 10px -6px rgba(0,0,0,0.75);box-shadow: inset 0px 1px 10px -6px rgba(0,0,0,0.75); }
.calculator-button-clear {position: absolute;top: 0;left: 0; height: 90px; width: 70px; background-color: #e0e0e0; border:0; z-index: 5;}
.fa-w-16 { font-size: 25px;}
.fa-w-16.colorg { color:#979797; }

.btn-group-lg>.btn, .btn-lgg {
    padding: 2rem 1rem;
    font-size: 1.8rem;
}

.dropdown-none::after {
  display: none;
}

.containerupload{height: 250px;width: 330px;position: relative;}
.containerupload .wrapperupload{position: relative;height: 200px;width: 100%;border-radius: 10px;background: #fff;border: 2px dashed #c2cdda;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.wrapperupload.active{border: none;}
.wrapperupload .image{position: absolute;height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;}
.wrapperupload img{height: 100%;width: 100%;object-fit: cover;}
.wrapperupload .icon{font-size: 100px;color: #9658fe;}
.wrapperupload .text{font-size: 13px;font-weight: 500;color: #5B5B7B;}
.wrapperupload #cancel-btn i{position: absolute;font-size: 20px;right: 15px;top: 15px;color: #9658fe;cursor: pointer;display: none;}
.wrapperupload.active:hover #cancel-btn i{display: block;}
.wrapperupload #cancel-btn i:hover{color: #e74c3c;}
.wrapperupload .file-name{position: absolute;bottom: 0px;width: 100%;padding: 5px 0;font-size: 13px;color: #fff;display: none;background: linear-gradient(135deg,#3a8ffe 0%,#9658fe 100%);}
.wrapperupload.active:hover .file-name{display: block;}
.containerupload #custom-btn{margin-top: 10px; margin-bottom: 5px; display: block;width: 100%;height: 50px;border: none;outline: none;border-radius: 25px;color: #fff;font-size: 18px;font-weight: 500;letter-spacing: 1px;text-transform: uppercase;cursor: pointer;background: linear-gradient(135deg,#3a8ffe 0%,#9658fe 100%);}
.imageFile {display: none;}
.custom-file-upload {font-size:16px;border: 2px dashed #c2cdda;display: inline-block;padding: 50px;cursor: pointer; width: 100%;}
.title-limit { display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; height: 38px; margin-bottom: 1px; }

.detail_price { font-size: 20px; }
.price_line { -webkit-text-decoration-line: line-through; text-decoration-line: line-through; text-decoration-color: #9fa2a48f!important; }
.detail_img img{ max-width: 230px; }

.navbar-expand-xl .navbar-nav .nav-link {
  padding-right: .8rem;
  padding-left: .8rem;
}

.top-1 {
  top: 5px!important;
}
.start-90 {
  left: 90%!important;
}

.karshine-layout {background: #fafafa; margin: 0; padding: 0;}
.karshine-layout, .karshine-layout * {box-sizing: border-box;}
.karshine-layout {display: flex;flex: auto;flex-direction: column;min-height: 0;}
.karshine-layout-content {flex: auto;min-height: 0;}
.karshine-layout-content .full-container {font-size: 18px;margin-bottom: 0px;height: 100%;width: 100%;}
.home {background: #ee4d2d;height: calc(100vh - 144px);margin-top: -16px;display: flex;justify-content: center;align-items: center;}
.homefooter .bottom {height: 78px;background-color: rgb(8, 8, 8);font-size: 14px;line-height: 14px;color: hsla(0,0%,100%,.5);letter-spacing: .4px;padding: 0 64px;display: flex;align-items: center;}

.home_section { background: #ff0000; }
.home_footer { background-color: rgb(8, 8, 8);font-size: 14px; padding: 20px 0; color:#fff; }
.intro-text { color: #fafafa; }

.linkmenuq a{ color: #0873a8; }
.linkmenuq a:hover{ color: #2ea9e6; }
.fs-1x { font-size:80px; }

.imgproduct { position: relative;}
.imgproduct .iconpromotion { position: absolute; z-index: 200; }
.imgproduct .iconoutofstock { position: absolute; z-index: 250; }

.form-control::placeholder { opacity: 0.7; }
.form-controlx:focus { box-shadow: 0 0 0 0.1rem rgb(13 110 253); }
.form-control-lgx {min-height: calc(1.5em + 1rem + 15px);padding: .5rem 1rem;border-radius: .3rem;}
[dir=rtl] .floating-label > input + label,
[dir=rtl] .floating-label > textarea + label {right: 0;left: auto !important;}
[dir=rtl] .floating-label > input:not([placeholder]):not([value]) + label,
[dir=rtl] .floating-label > textarea:not([placeholder]):empty + label, [dir=rtl] .floating-label > input[placeholder]:not(:placeholder-shown) + label,
[dir=rtl] .floating-label > textarea[placeholder]:not(:placeholder-shown) + label, [dir=rtl] .floating-label > input:-webkit-autofill + label,
[dir=rtl] .floating-label > textarea:-webkit-autofill + label, [dir=rtl] .floating-label > input:focus + label,
[dir=rtl] .floating-label > textarea:focus + label, [dir=rtl] .floating-label > select + label {right: 0.5rem;left: auto !important;}
.floating-label {position: relative;}
.floating-label > select + label,
.floating-label > select + label.label-sm {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.7875rem;font-size: 0.875rem;}
.floating-label > select + label.label-md {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.9rem;font-size: 1rem;}
.floating-label > select + label.label-lg {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -1.125rem;font-size: 1.25rem;}
.floating-label > select:disabled + label, .floating-label > select[readonly] + label {background-color: #e9ecef;}
.floating-label > input + label,
.floating-label > textarea + label {transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;top: 0;left: 0;color: #6c757d;pointer-events: none;font-size: 1rem;padding: calc(0.375rem + 1px) calc(0.75rem + 1px);}
.floating-label > input.form-control-sm + label,
.floating-label > textarea.form-control-sm + label {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;top: 0;left: 0;color: #6c757d;pointer-events: none;font-size: 0.875rem;padding: calc(0.25rem + 1px) calc(0.5rem + 1px);}
.floating-label > input.form-control-lg + label,
.floating-label > textarea.form-control-lg + label {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;top: 0;left: 0;color: #6c757d;pointer-events: none;font-size: 1.25rem;padding: calc(0.5rem + 1px) calc(1rem + 1px);}
.floating-label > input.form-control-lgx + label,
.floating-label > textarea.form-control-lgx + label {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;top: 0;left: 0;color: #6c757d;pointer-events: none;padding: calc(0.5rem + 8px) calc(1rem + 1px);}
.floating-label > input::placeholder,
.floating-label > textarea::placeholder {color: transparent;transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);}
.floating-label > label + input::placeholder,
.floating-label > label + textarea::placeholder {color: #6c757d;}
.floating-label > input:focus::placeholder,
.floating-label > textarea:focus::placeholder {color: #6c757d;}
.floating-label > input:focus + label,
.floating-label > input:focus + label.label-sm,
.floating-label > textarea:focus + label,
.floating-label > textarea:focus + label.label-sm {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.7875rem;font-size: 0.875rem;}
.floating-label > input:focus + label.label-md,
.floating-label > textarea:focus + label.label-md {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.9rem;font-size: 1rem;}
.floating-label > input:focus + label.label-lg,
.floating-label > textarea:focus + label.label-lg {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -1.125rem;font-size: 1.25rem;}
.floating-label > input:focus[readonly] + label,
.floating-label > textarea:focus[readonly] + label {background-color: #e9ecef;}
.floating-label > input:-webkit-autofill + label,
.floating-label > input:-webkit-autofill + label.label-sm,
.floating-label > textarea:-webkit-autofill + label,
.floating-label > textarea:-webkit-autofill + label.label-sm {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.7875rem;font-size: 0.875rem;}
.floating-label > input:-webkit-autofill + label.label-md,
.floating-label > textarea:-webkit-autofill + label.label-md {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.9rem;font-size: 1rem;}
.floating-label > input:-webkit-autofill + label.label-lg,
.floating-label > textarea:-webkit-autofill + label.label-lg {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -1.125rem;font-size: 1.25rem;}
.floating-label > input[placeholder]:not(:placeholder-shown) + label,
.floating-label > input[placeholder]:not(:placeholder-shown) + label.label-sm,
.floating-label > textarea[placeholder]:not(:placeholder-shown) + label,
.floating-label > textarea[placeholder]:not(:placeholder-shown) + label.label-sm {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.7875rem;font-size: 0.875rem;}
.floating-label > input[placeholder]:not(:placeholder-shown) + label.label-md,
.floating-label > textarea[placeholder]:not(:placeholder-shown) + label.label-md {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.9rem;font-size: 1rem;}
.floating-label > input[placeholder]:not(:placeholder-shown) + label.label-lg,
.floating-label > textarea[placeholder]:not(:placeholder-shown) + label.label-lg {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -1.125rem;font-size: 1.25rem;}
.floating-label > input[placeholder]:not(:placeholder-shown):disabled + label, .floating-label > input[placeholder]:not(:placeholder-shown)[readonly] + label,
.floating-label > textarea[placeholder]:not(:placeholder-shown):disabled + label,
.floating-label > textarea[placeholder]:not(:placeholder-shown)[readonly] + label {background-color: #e9ecef;}
.floating-label > input:not([placeholder]):not([value]) + label,
.floating-label > input:not([placeholder]):not([value]) + label.label-sm,
.floating-label > textarea:not([placeholder]):empty + label,
.floating-label > textarea:not([placeholder]):empty + label.label-sm {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.7875rem;font-size: 0.875rem;}
.floating-label > input:not([placeholder]):not([value]) + label.label-md,
.floating-label > textarea:not([placeholder]):empty + label.label-md {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -0.9rem;font-size: 1rem;}
.floating-label > input:not([placeholder]):not([value]) + label.label-lg,
.floating-label > textarea:not([placeholder]):empty + label.label-lg {position: absolute;z-index: 3;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;left: 0.5rem;padding: 0 0.3rem;color: inherit;background-color: #fff;border-radius: 0.25rem;top: -1.125rem;font-size: 1.25rem;}
.floating-label > input:not([placeholder]):not([value]):disabled + label, .floating-label > input:not([placeholder]):not([value])[readonly] + label,
.floating-label > textarea:not([placeholder]):empty:disabled + label,
.floating-label > textarea:not([placeholder]):empty[readonly] + label {background-color: #e9ecef;}

#uploader { text-align: center; width:100%; min-height:180px; background-color: rgb(238, 238, 238); border:2px dashed #b9b9b9;cursor:pointer;padding:5px;color:#555;font-weight:bold;}
#uploader:hover{color:#999;}
#filePhoto{display:none;}
#uploader .uploadimagePreview img { max-height: 180px; }
.textDrop { padding: 80px; }

.file-upload-sp {background-color: #ffffff;width: 100%;margin: 0 auto;padding:0 0 20px 0;}
.file-upload-sp-btn {width: 100%;margin: 0;color: #fff;background: #bfbfbf;border: none;padding: 10px;border-radius: 4px;border-bottom: 4px solid #15824B;transition: all .2s ease;outline: none;text-transform: uppercase;font-weight: 700;}
.file-upload-sp-btn:hover {background: #1AA059;color: #ffffff;transition: all .2s ease;cursor: pointer;}
.file-upload-sp-btn:active {border: 0;transition: all .2s ease;}
.file-upload-sp-content {display: none;text-align: center;}
.file-upload-sp-input {position: absolute;margin: 0;padding: 0;width: 100%;height: 100%;outline: none;opacity: 0;cursor: pointer;}
.image-upload-wrap {border: 4px dashed #bfbfbf;position: relative;}
.image-dropping,.image-upload-wrap:hover {background-color: #e5e5e5;border: 4px dashed #bfbfbf;}
.image-title-wrap {padding: 0 15px 15px 15px;color: #222;}
.image-title { font-size: 12px; }
.drag-text {text-align: center;}
.drag-text h3 {font-weight: 100;text-transform: uppercase;color: #15824B;padding: 30px 0; font-size: 18px;}
.file-upload-sp-image {max-height: 200px;max-width: 200px;margin: auto;padding: 10px;}
.custom-control-inline label{ cursor: pointer; }

.payment-group {display: -webkit-box;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;flex-direction: row;flex-wrap: wrap;margin: 1rem 0}
.payment-group .payment-item {-webkit-box-flex: 1;flex: 1;min-width: calc(50% - 10px);max-width: calc(50% - 10px);display: -webkit-box;display: flex;margin: 5px}
.payment-group .payment-item .payment-label {-webkit-box-flex: 1;flex: 1;display: -webkit-box;display: flex;width: 100%;border: 2px solid #ddd;padding: 5px;border-radius: 5px;margin: 0;-webkit-box-align: center;align-items: center;position: relative;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;cursor: pointer}
.payment-group .payment-item .payment-label:before {content: "\E40\E25\E37\E2D\E01";display: inline-block;width: 64px;height: 28px;border-radius: 5px;background-color: #ddd;font-size: .8rem;padding: 4px 4px 4px 28px;margin-right: 10px;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out}
.payment-group .payment-item .payment-label:after {content: "✓";display: inline-block;width: 14px;height: 14px;color: #fff;position: absolute;left: 14px;top: -10px;bottom: 0;margin: auto}
.payment-group .payment-item .payment-label:hover {background-color: #bfedff;border-color: #00adf2}
.payment-group .payment-item .payment-image {width: 36px}
.payment-group .payment-item .payment-image img {width: 100%;-webkit-filter: grayscale(100%);filter: grayscale(100%)}
.payment-group .payment-item .payment-body {-webkit-box-flex: 1;flex-grow: 1;padding: 0 10px;display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;font-size: 1rem}
.payment-group .payment-item input[type=radio] {display: none}
.payment-group .payment-item input[type=radio]:checked+label {border: 2px solid #00adf2}
.payment-group .payment-item input[type=radio]:checked+label:before {background-color: #00adf2;color: #fff}
.payment-group .payment-item input[type=radio]:checked+label .payment-image img {-webkit-filter: grayscale(0);filter: grayscale(0)}

@media (min-width: 1200px){
  .container-page {max-width: 820px;}
}

@media (max-width: 575.98px) {
  .payment-group {-webkit-box-orient:vertical;-webkit-box-direction: normal;flex-direction: column}
  .payment-group .payment-item {max-width: none;margin: 5px 0}
  .payment-group .payment-item+.payment-item {margin-left: 0;margin-top: 10px}
}

@media (max-width: 540px) {
  .modal-dialog-center-screen {width: 80%;}
  .calculatorsize { width: auto; }
  .modal-dialog { margin-left: 5px; margin-right: 5px; }
  .modal-lg-20,.modal-lg-30,.modal-lg-50,.modal-lg-70,.modal-lg-70,.modal-lg-80 {max-width: 100%;}

  .dataTables_length { margin-bottom: 5px; }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: center!important; margin-top: 10px!important; }
  .image-30,.image-40.image-50,.image-70,.image-80,.image-90 { max-width: 100%; }
}
@media (max-width: 375px) {
  .containerupload{width: 250px;}
}