/* font */

@font-face {
    font-family: "ibm";
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/IBMPlexSansThai-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/IBMPlexSansThai-Regular.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/IBMPlexSansThai-Regular.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/IBMPlexSansThai-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: "ibm";
    font-style: bold;
    font-weight: 700;
    src: url('../fonts/IBMPlexSansThai-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/IBMPlexSansThai-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/IBMPlexSansThai-Bold.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/IBMPlexSansThai-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: "ibmlb";
    font-style: bold;
    font-weight: 600;
    src: url('../fonts/IBMPlexSansThai-SemiBold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/IBMPlexSansThai-SemiBold?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/IBMPlexSansThai-SemiBold.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/IBMPlexSansThai-SemiBold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: "ibmmedium";
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/IBMPlexSansThai-Medium.eot'); /* IE9 Compat Modes */
    src: url('../fonts/IBMPlexSansThai-Medium.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/IBMPlexSansThai-Medium.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/IBMPlexSansThai-Medium.ttf')  format('truetype'); /* Safari, Android, iOS */
}


body { font-family:'ibm';width:100%; margin:0;}
p { font-size:18px; }
.alignleft, .entry-left {float:left;}
.alignright, .entry-right {float: right;}
.textright {text-align: right;}
.textleft {text-align: left;}
.textcenter {text-align:center;}
.header { background: #CF9E3F;height:34px;padding:8px 0;color:#ffffff;}
.canvas-inner { width:1140px;margin:0 auto;overflow:hidden;}
.header-inner {font-size:16px;display:block;line-height:34px;}
.header img {margin:0 auto;overflow:hidden;padding-right:5px;}
.contact a{color:#ffffff;text-decoration: none;}
.logo img{line-height:102px;padding:16px 0;}
.menu-section {font-family: 'ibmlb';}
.menu > li a {font-size:20px; color: #071726;text-decoration:none;line-height:102px;display:inline-block;width:131px;text-align:center;}
.menu > li a:hover {background: url('../images/bg-menu-active.png') no-repeat 3px 25px;color:#ffffff;}
.top-nav {display: flex;flex-direction: row;align-items: center;justify-content: space-between;color: #FFF;height: 102px;}
.menu {display: flex;flex-direction: row;list-style-type: none;margin: 0;padding: 0;}
.menu > li {margin: 0 1rem;overflow: hidden;}
.menu-button-container {display: none;height: 100%;width: 48px;cursor: pointer;flex-direction: column;justify-content: center;align-items: center;background: url("../images/bg-hamburger.png") no-repeat 0px;}
#menu-toggle {display: none;}
.menu-button,.menu-button::before,.menu-button::after {display: block;background-color: #fff;position: absolute;height: 4px;width: 30px;transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);border-radius: 2px;}
.menu-button::before {content: '';margin-top: -8px;}
.menu-button::after {content: '';margin-top: 8px;}
#menu-toggle:checked + .menu-button-container .menu-button::before {margin-top: 0px;transform: rotate(405deg);}
#menu-toggle:checked + .menu-button-container .menu-button {background: rgba(255, 255, 255, 0);}
#menu-toggle:checked + .menu-button-container .menu-button::after {margin-top: 0px;transform: rotate(-405deg);}
h2 {font-size:40px;font-family: "ibmlb";text-align:center;padding-top:20px;margin-bottom:15px;}
.product-section {width:966px;margin:0 auto;overflow:hidden;}
.product-list { width:304px; margin-right:24px;display:block;border: 1px solid #D0D5DD;border-radius:18px;float:left;padding-bottom:20px;margin-bottom:24px;}
.product-list.last{margin-right:0px;}
.product-img {background:#F2F4F6;width:304px;height:300px;border-radius: 18px 18px 0 0;text-align:center;position:relative;}
.product-detail { padding: 0 10px;}
.product-detail a {text-decoration: none;color:#071726;}
.orderline a, .orderline-product-detail a, .call-product-detail a {text-decoration: none;color:#ffffff;}
.call-product-detail a,.orderline-product-detail a {display:block;}
p.price {font-size:25px; font-weight:bold;color:#FF335B;margin-bottom:0;}
p.freeship, p.cod, p.fastdeli {font-family: "ibmlb"; font-size:14px;margin:0;display: inline-block;padding: 3px;border-radius: 5px;}
p.freeship { color:#3B82F6; background: #e1ecfd;}
p.cod {color:#FF9900; background: #fdf5e7;}
p.fastdeli { color: #FF335B; background: #fcecef;margin-top:5px;}
p.sold {font-size:14px; color:#646E7F;}
.orderline {background: #00C300;font-family: "ibmlb"; font-size:18px;color:#ffffff;padding:0 16px;display:inline-block;height:46px;line-height:52px;width: 105px;text-align: center;border-radius: 50px;}
.seedetail {color:#1D364D;font-family: "ibmlb"; font-size:18px;border:1px solid #D0D5DD;padding:0 16px;display:inline-block;height:46px;line-height:46px;width: 105px;text-align: center;border-radius: 50px;}
.seedetail a {text-decoration: none; color: #1D364D;}
.badge {font-family: "ibmlb"; font-size:14px;height:23px;text-align: center;position:absolute;top:0;left:0;display:block;color: #ffffff;}
.bestseller {background: url("../images/bestseller.png") no-repeat;width:65px;}
.discount {background: url("../images/discount.png") no-repeat;width:81px;}
.review { background:#CF9E3F;padding: 40px 0;color:#ffffff;}
.review h2{padding-top:0;margin-top:0;}
.review p {font-family: "ibmmedium";font-size:20px;margin:0;}
.reward {padding-bottom:40px;}
.reward-list {width:966px;margin:0 auto;overflow:hidden;}
.reward-list .reward-img {display: inline-block;margin-right:24px;}
.reward-list .reward-img.last {margin-right:0;}
.aboutus-section {background: #f9f5ed;}
.aboutus-inner {width:1140px;padding: 40px 0;margin: 0 auto;overflow:hidden;}
.aboutus-inner p {font-size:20px;}
.aboutus-head {overflow: hidden;}
.aboutus-head-right {width: 660px;}
.aboutus-head p {margin:0;}
.aboutus-head-left {padding: 30px 0;}
.aboutus-img{margin:20px 0;}
.contactus-section {padding-bottom:40px;}
.contactus-section p, .contactus-section-productdetail p {font-family: "ibmmedium"; font-size:20px;}
.contactus-section-productdetail {padding-bottom:40px;background:#FAF5EC;}
.contactus-section a, .contactus-section-productdetail a {color:#ffffff;text-decoration: none;}
.qrcode {width:283px;background:#CF9E3F;border-radius:16px;padding:16px;margin: 0 auto;}
.qrcode p {color:#ffffff;font-family: "ibmlb"; font-size:24px;margin:0;line-height:32px;}
.footer {background: #CF9E3F;height:106px;line-height:106px;color:#ffffff;font-size:16px;}
.footer img.logo-footer {line-height:106px;padding:30px 0;}
.row {width: 100%; overflow: hidden;}
.col1, .col2, .col3 {width: 33%;float:left;}
.footer a {display: inline-block;width:60px;padding: 14px 0;}
.slide img {margin-top:0 !important;}
.product-detail-section {overflow: hidden;margin:0 auto;}
.container-image-slider {max-width: 434px;margin: 0 auto;}
.product-img-order {width:434px;height:434px;border-radius: 18px 18px 0 0;text-align:center;position:relative;}
.slider-image-section, .product-detail-right {margin:30px 0;}
.product-detail-right {width:666px;}
.product-detail-right p{margin:10px 0;}
.product-name {font-family: "ibmlb"; font-size:30px; color:#000000;line-height:30px;}
.product-detail-right p.price {font-size:40px;line-height:40px;}
.product-detail-right p.sold {display: inline-block;}
.select-product-section {padding: 16px 16px 0 16px; background:#CF9E3F;border-radius: 16px;font-family: "ibmlb";color:#ffffff;}
.select-product-section .header {font-size:20px;padding:0;margin: 0 0 12px 0;}
ul.package-list {padding:0;margin:0;}
ul.package-list li {list-style-type: none; display: inline-block;margin:0 10px 20px 0;}
ul.package-list li a {text-decoration:none;color:#ffffff;padding:4px 8px;border: 1px solid #ffffff;border-radius: 50px;}
ul.package-list li a:hover, ul.package-list li a.selected {color:#CF9E3F; background: #ffffff;}
.paid-detail, .delivery-detail { font-family: "ibmmedium"; font-size: 14px; color:#3B82F6;overflow:hidden;margin-top:15px;}
.paid-detail div, .delivery-detail div {float: left;}
.delivery-detail {margin-top:0;}
.orderline-product-detail, .call-product-detail {font-family: "ibmlb"; font-size:18px;color:#ffffff;padding:0 16px;display:inline-block;height:46px;line-height:52px;width: 43%;text-align: center;border-radius: 50px;}
.orderline-product-detail {background: #00C300;}
.call-product-detail {background: #3B82F6;}
.button-section {overflow:hidden;margin-top:30px;}
.detail-section {float:none; overflow: hidden;margin-bottom:30px;}
#priceproduct2,#priceproduct3,#priceproduct4,#priceproduct5,#reviewtab {display:none;}
.detail-inner-section { background:#f9f9f9;padding:24px;border-radius:16px;}
.nav {font-family: "ibmlb";}
ul.nav-tabs {list-style-type: none; margin:0;padding:0;}
ul.nav-tabs li {margin-right:15px;}
ul.nav-tabs li, ul.nav-tabs li a {display: inline-block;font-size:20px;color:#9FA5AE;}
ul.nav-tabs li a.active {color:#000000;border-bottom: 1px solid #000;}
ul.nav-tabs li a{text-decoration: none;}
.tab-content {font-size:16px;color:#000000;}
.bold {font-weight:bold;}
#reviewtab {text-align: center;padding:20px 0 0 0;}
#reviewtab img {width: 300px;height:auto;}
.visible-desktop {display: block;}
.visible-mobile {display: none;}


/* Slick */
.slider {width: 90%;margin: 50px auto;}
.slick-slide {margin: 0px 20px;}
.slick-slide img {width: 100%;}
.slick-prev:before,.slick-next:before {color: black;}
.slick-slide {transition: all ease-in-out .3s;opacity: .2;}
.slick-active {opacity: .5;}
.slick-current {opacity: 1;}


@media (max-width: 1024px) {
    .responsive{width:100% !important;height:auto !important;}
    .hidden-mobile {display:none;}
    .product-section,.aboutus-inner,.aboutus-head-right {width:100% !important;}
    .canvas-inner {width:94%;overflow: hidden;padding:0 16px;}
    .product-list {margin-right:0;margin: 0 auto;}
    .header .contact {float:none;overflow:hidden;}
    .header .contact div {width: 45%;}
    .header .contact .entry-left {text-align:right;}
    .top-nav{height:82px;}
    .logo img { width:169px; height:auto;}
    .menu-button-container {display: flex;}
    .menu {position: absolute;top: 82px;margin-top: 50px;left:0;flex-direction: column;width: 100%;justify-content: center;align-items: center;z-index :100;}
    #menu-toggle ~ .menu li {height: 0;margin: 0;padding: 0;border: 0;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
    #menu-toggle:checked ~ .menu li {height: 2.5em;padding: 0.5em;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
    .menu > li {display: flex;justify-content: center;margin: 0;padding: 0.5em 0;width: 100%;color: #000;background-color: #fff;}
    .menu > li:not(:last-child) {border-bottom: 1px solid #444;}
    .menu > li a {line-height:44px;background:none;color:#000 !important;}
    .menu > li a:hover{background:none;}
    .product-list {margin-right:8px !important;margin-bottom:14px !important;}
    .aboutus-head-left {float:none; text-align:center;}
    .container-image-slider {width: 100%;max-width: 100%;}
    .product-img-order {width:100%; height:auto;}
    .product-detail-right {width: 100%;}
}

@media (max-width: 820px) {
    .product-list { clear: both;float: none;margin: 14px auto !important;}
    .reward-list,.reward-img {width:100%;}
    .reward-list .reward-img { text-align:center;}
}

@media (max-width: 768px) {
    
}

@media (max-width: 575px) {
    .slider {width: 85% !important;margin:20px auto !important;}
    .slick-slide {margin: 0 5px !important;}
    .responsive90 {width: 90% !important; height: auto;}
    .hidden-mobile, .visible-desktop {display: none;}
    .visible-mobile {display: block;}
    .button-section, .col1, .col2, .col3 {width: 100%;}
    .orderline-product-detail, .call-product-detail {width: 90%;float:none;margin-bottom:15px;}
    #reviewtab img, .row {width:100%; height:auto;}
    .footer {height:auto; line-height:normal;}
    .col1, .col2, .col3 {text-align: center;}
}