@charset "utf-8";

@font-face {
    font-family:'DB Heavent Cond';
    src: url('../fonts/DBHeaventCond-v3.2.2.woff2') format('woff2'),
    url('../fonts/DBHeaventCond-v3.2.2.woff') format('woff'),
    url('../fonts/DBHeaventCond-v3.2.2.ttf')format("truetype");
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-FB02;
    size-adjust: 120%; 

    font-display: swap;
    }
*{ border: 0;}

@font-face {
    font-family:'DB Heavent Bold Cond';
    src: url('../fonts/DBHeaventBdCond-v3.2.2.woff2') format('woff2'),
    url('../fonts/DBHeaventBdCond-v3.2.2.woff') format('woff'),
    url('../fonts/DBHeaventBdCond-v3.2.2.ttf')format("truetype");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-FB02;
    size-adjust: 120%; 

    font-display: swap;
    }
*{ border: 0;}

/*reset*/
a{color: #2a2e2e;}
a:hover,a:focus{ text-decoration: none; outline: none!important; }
button:focus{outline: none!important;}
textarea{resize:none;}

/* Basic Styles 
-------------------------------------------------- */
h1,h2,h3{ font-family: 'DB Heavent Bold Cond'; margin: 0; padding: 0;}
h2,h3{font-size: 18px;}
body {
  font-family: 'DB Heavent Cond', 'Titillium Web', Kanit;
  font-size: 20px; /* ปรับให้ใหญ่กว่าค่าเริ่มต้น (ปกติคือ 1rem) */
  line-height: 1.4;  /* ปรับระยะห่างบรรทัดให้เหมาะสม */
  color: #555;
  background: #f5f5f5;
  overflow-x: hidden !important;
  line-height: 20px;
}
@media (max-width: 1440px) {
    body {
        font-size: 15px; /* ปรับ base ให้เล็กทั้งเว็บ */
    }
    [dir="rtl"] body {
        font-size: 15px; /* ปรับ base ให้เล็กทั้งเว็บ */
    }
}
html.active{overflow: hidden;}
a,.glyphicon,.flaticonsocial:before,.navmenu li,.faqgroup h3,button{
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
a{
  text-decoration: none;
  color: inherit;
}
.red{color: #E00000!important;}
a,span{display: inline-block;}
ul{margin: 0;}
.relative{position: relative;}
a:hover{color: #014071;}
.noborderbot{border-bottom: 0!important;}
.nopad{padding-left: 0; padding-right: 0;}
.nopadall{padding: 0!important;}
.padleft10{ padding-left: 10px;}
.padright10{ padding-right: 10px;}
.padright5{padding-right: 5px;}
.padleft5{padding-left: 5px;}
.padbot-0{padding-bottom: 0!important;}
.mbot20{margin-bottom: 20px;}
.mbot30{margin-bottom: 30px;}
.relative{position: relative;}
.mainwrapper{position: relative; height: 100%;}
.block{display: block; width: 100%;}
.b600{font-weight:500;}
.transitionside{transition: all 0.3s ease 0s; top: auto;}
/*container*/
.relative{position: relative;}
.container2{ max-width: 1400px!important; width: 100%; position: relative; margin: 0 auto;}
.glyphicon{margin-right: 5px;}

.topheader{background: #000;  color: #fff;  background-color: #344EAF;}

/*header*/
.topleft li:first-child{display: none;}
.menu-close {font-size: 10px; }
.menu-close  { position: relative; z-index: 2;float: left;padding:5px 0; text-align: center; height: 46px; width: 46px; position: relative; left: 0; transition: all 0.5s ease 0s; cursor: pointer;}  
.menu-item{position:relative; display:inline-block; width:30px; height:2px; background-color:#fff; vertical-align:middle; -webkit-transition-duration:.3s,.3s; -moz-transition-duration:.3s,.3s; -ms-transition-duration:.3s,.3s; -o-transition-duration:.3s,.3s; transition-duration:.3s,.3s; -webkit-transition-delay:.3s,0s; -moz-transition-delay:.3s,0s; -ms-transition-delay:.3s,0s; -o-transition-delay:.3s,0s; transition-delay:.3s,0s; margin-top:1px; margin-left:0px; width:28px}
.menu-item:after,  .menu-item:before{content:""; position:absolute; display:inline-block; width:30px; height:2px; left:0; background-color:#fff; -webkit-transition-duration:.3s,.3s; -moz-transition-duration:.3s,.3s; -ms-transition-duration:.3s,.3s; -o-transition-duration:.3s,.3s; transition-duration:.3s,.3s; -webkit-transition-delay:.3s,0s; -moz-transition-delay:.3s,0s; -ms-transition-delay:.3s,0s; -o-transition-delay:.3s,0s; transition-delay:.3s,0s}
.menu-item:before{top:-8px; -webkit-transition-property:top,transform; -moz-transition-property:top,transform; -ms-transition-property:top,transform; -o-transition-property:top,transform; transition-property:top,transform}
.menu-item:after{bottom:-8px; -webkit-transition-property:bottom,transform; -moz-transition-property:bottom,transform; -ms-transition-property:bottom,transform; -o-transition-property:bottom,transform; transition-property:bottom,transform}
.menu-close.active .menu-item{background-color:transparent; -webkit-transition-delay:0s,0s; -moz-transition-delay:0s,0s; -ms-transition-delay:0s,0s; -o-transition-delay:0s,0s; transition-delay:0s,0s}
.menu-close.active .menu-item:after, .menu-close.active .menu-item:before{-webkit-transition-delay:0s,.3s; -moz-transition-delay:0s,.3s; -ms-transition-delay:0s,.3s; -o-transition-delay:0s,.3s; transition-delay:0s,.3s}
.menu-close.active .menu-item:before{top:0; background:#fff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg)}
.menu-close.active .menu-item:after{bottom:0; background:#fff; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg)}

.topheader .container-fluid{padding-left: 0; padding-right: 0; display: flex; justify-content: space-between; position: relative;}
.topleft>li>a,.topright>li>a{display: flex; padding: 0 15px; align-items: center; height:47px; }
.topleft>li:hover>a:not(.hamburger),.topright>li:hover>a:not(.hamburger){background: #3048A2; color: #fff;}
.topleft>li,.topright>li{float: left; position: relative; height: 47px;}
.topleft>li{
  border-right: 1px solid #fff;
}
.topleft>li:last-child{
  border-right: 0;
}
.topheader i{font-size: 18px; margin-right: 10px;}
.topheader .topleft{float: left;}
.topright>li.mycarticon a{ background-color: #C4A271;
padding-left: 40px; height: 47px;}

.topright>li.mycarticon a:hover{ background-color: #B6915D;}
.topright .icon-shopping-cart{position: relative; top: -2px;}

.topheader .topleft .form-control{background: none; border:0; border-radius: 0; width: 100%; height: 47px; 
color: #fff;font-weight: 500; font-size: 20px;}
.topheader .topleft .form-control::placeholder {color: #fff;font-weight: 500; font-size: 20px;}
.header{background: #fff; position: absolute; width: 100%; z-index: 99; max-width: 1920px; box-shadow: 0 4px 28px rgba(0,0,0,0.1);}

.header .container-fluid{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 71px;
}

.searchtop{ width: 245px; padding-left: 30px; position: relative; height: 47px;}
.searchtop i{position: absolute; left: 15px; top: 14px;}
.topright{margin-left: auto;}
.topright>li{border-left: 1px solid #fff;}
.mycarticon{position: relative;}
.topright .numcart{padding: 2px 8px; position: absolute; left: 5px; }
/*submenutop*/
.subtop{position: absolute; width: 200px; z-index: 99; background: #f8f8f9; z-index: 100; display: none;}
.subtop:not(.sub-currency) li a:not(.red):hover{background: #344EAF; color: #fff;}
.subaccount{width: 180px; right: 0;}
.listsubtop li a,.listsubtop li a:not([href]){color:#344EAF; font-weight: 400; padding: 10px 15px;  display: block;
cursor: pointer; width: 100%;}
.listsubtop li{ border-bottom: 1px solid #bed9ec;}
.listsubtop li:last-child{ border-bottom: 0;}
.listsubtop i{opacity: 0; visibility: hidden; left:-5px; transition: all 0.3s ease 0s; }
.listsubtop a:hover i,.listsubtop a.active i{opacity: 1; visibility: visible; left: 0;}
.listsubtop span.circle {
    /* สร้างวงกลม */
    width: 30px;
    height: 30px;
    background-color: #344EAF;
    color: white;
    border-radius: 50%;
    
    /* จัดให้อยู่บรรทัดเดียวกับข้อความ */
    display: inline-flex;
    align-items: center;    /* กึ่งกลางแนวตั้ง */
    justify-content: center; /* กึ่งกลางแนวนอน */
    
    /* เว้นระยะห่างจากข้อความข้างๆ */
    margin-right: 8px;
    font-size: 14px;
    vertical-align: middle; /* ช่วยให้ฐานวงกลมตรงกับระดับตัวอักษร */
  }
.sub-currency .listsubtop li{border-bottom: 0;}
.sub-currency .listsubtop li a{padding-bottom: 0; padding-left: 20px; position: relative;}
.sub-currency{padding: 15px 0;}
.sub-currency h2{color: #606060; margin-left: 15px;}
.sub-currency .langtop{color: #606060; padding-left: 15px; padding-bottom: 10px; border-bottom: 1px solid #ccc; margin-bottom: 10px;}
.sub-currency .langtop a{ font-weight: 400;}
.sub-currency .langtop a.active{color: #344EAF; font-weight:500;}
/*menumobile*/
/*mobile menu*/
#menu:not( .mm-menu ) {
   display: none;
}
.hamburger{padding:10px;display:inline-block;cursor:pointer;transition-property:opacity,
  -webkit-filter;transition-property:opacity,filter;transition-property:opacity,filter,
  -webkit-filter;transition-duration:.15s;transition-timing-function:linear;
  font:inherit;color:inherit;text-transform:none;background-color:transparent;
  border:0;margin:0;overflow:visible;position:fixed;top:0;z-index:999; padding: 7px !important}
.hamburger:hover{opacity:.8}
.hamburger-box{width:35px;height:22px;display:inline-block;position:relative}
/* .hamburger-box::before{position:absolute;top:20px;text-transform:uppercase;font-size:10px;content:"menu"; color:#fff; width:35px;text-align:center} */
.hamburger-inner{display:block;top:50%;margin-top:-2px}
.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{width:35px;height:2px;background-color:#fff;border-radius:2px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}
.hamburger-inner::after,.hamburger-inner::before{content:"";display:block}
.hamburger-inner::before{top:-8px}
.hamburger-inner::after{bottom:-8px}
.hamburger--collapse .hamburger-inner{top:auto;bottom:0;transition-duration:.15s;transition-delay:.15s;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}
.hamburger--collapse .hamburger-inner::after{top:-16px;transition:top .3s .3s cubic-bezier(.33333,.66667,.66667,1),opacity .1s linear}
.hamburger--collapse .hamburger-inner::before{transition:top .12s .3s cubic-bezier(.33333,.66667,.66667,1),transform .15s cubic-bezier(.55,.055,.675,.19);width:20px}
.mm-wrapper_opening .hamburger--collapse .hamburger-inner{transform:translate3d(0,-10px,0) rotate(-45deg);transition-delay:.32s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}
.mm-wrapper_opening .hamburger--collapse .hamburger-inner::after{top:0;opacity:0;transition:top .3s cubic-bezier(.33333,0,.66667,.33333),opacity .1s .27s linear}
.mm-wrapper_opening .hamburger-box::before{content:"Close"}
.mm-wrapper_opening .hamburger--collapse .hamburger-inner::before{top:0;width:35px;-ms-transform:rotate(-90deg);transform:rotate(-90deg);transition:top .12s .18s cubic-bezier(.33333,0,.66667,.33333),transform .15s .42s cubic-bezier(.215,.61,.355,1)}
.mm-wrapper_opening .hamburger--arrow .hamburger-inner::before{transform:translate3d(-8px,0,0) rotate(-45deg) scale(.7,1)}
.mm-wrapper_opening .hamburger--arrow .hamburger-inner::after{transform:translate3d(-8px,0,0) rotate(45deg) scale(.7,1)}
.mm-wrapper_opening .hamburger--arrow-r .hamburger-inner::before{transform:translate3d(8px,0,0) rotate(45deg) scale(.7,1)}
.mm-wrapper_opening .hamburger--arrow-r .hamburger-inner::after{transform:translate3d(8px,0,0) rotate(-45deg) scale(.7,1)}
.mm-menu{background:#fff}
.mm-panel,.mm-panels{background:#fff}
.mm-listitem_divider{background:#fff}
.mm-menu a{text-transform:uppercase;color:#344EAF!important}
.mm-menu a:hover{color:#EC1C24!important}
.mm-btn:after{border-color:rgba(0,0,0,.1);border-color:none!important;border-width:0;border-style:solid;font:normal normal normal 24px/4px FontAwesome;content:"\f105";-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);right:23px;left:auto}
.mm-menu_offcanvas{max-width:300px; min-width: 300px;}
.mm-listview .fa-menu{position:absolute;right:23px;bottom:0;padding:14px 0; z-index:0;}
.mm-listview .fa-menu::before{color:#344EAF;font-size:18px; z-index: -2;}
.mm-menu a:hover .fa-menu::before{color:#EC1C24!important}
.mm-navbar{display:none!important}
.mm-panel{padding-top:0!important}
.mm-listitem:after{left:0}
.search-menu{border:0; text-transform: uppercase;color:#344EAF!important;width:100%;padding:5px 0;}
.search-menu::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#344EAF!important;
}
.search-menu::-moz-placeholder { /* Firefox 19+ */
  color:#344EAF!important;
}
.search-menu:-ms-input-placeholder { /* IE 10+ */
  color:#344EAF!important;
}
.search-menu:-moz-placeholder { /* Firefox 18- */
 color:#344EAF!important;
}
.search-menu:focus{outline:0;-webkit-box-shadow:none;box-shadow:none;outline:none!important}
.menu-login{background:#0059CC;color:#fff}
.menu-login a:hover{color:#fff !important}
.menu-login .fa-angle-right::before{font-size:24px}
.menu-login a{color:#fff!important; padding-top: 13px;
padding-bottom: 13px;  height: 46px;}
.menu-login .fa-menu::before{color:#fff!important}
.menu-regins{padding:0;background:#F6F6F6; border-bottom: 1px solid #fff;}
.menu-regins .half{position:relative; }
.menu-regins .half:first-child{border-right:1px solid #e5e5e5}
.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout {
   -webkit-transform: translate3d(75vw,0,0);
   transform: translate3d(75vw,0,0);
   -webkit-transform:translate3d(300px,0,0);transform:translate3d(300px,0,0)
}


/*menu*/
.logo{width: 100%; max-width: 335px; display: block; float: left; margin-top: 5px; text-align: left;}
.mainmenu> ul > li{float: left;}
.mainmenu> ul > li > a:before{position: absolute; content: ""; height: 25px; width: 1px; background: #dedede; right: 0; top: 22px;}



.mainmenu> ul > li:last-child > a:before{display: none;}
.mainmenu> ul > li > a{color: #344EAF!important;  padding: 25px 25px; position: relative; display: block;}
.mainmenu> ul > li > a:after{content:"";background: rgba(245,251,255,1); 
background: linear-gradient(to bottom, rgba(245,251,255,1) 0%, rgba(239,248,255,1) 50%, rgba(231,246,255,1) 100%);
position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; opacity: 0; transition: all 0.3s ease 0s;}

.mainmenu> ul > li.active > a:after{content: ""; opacity: 1; height: 4px; width: 100%; background: #344EAF;position: absolute; 
bottom:0; z-index: 9; left: 0;top: auto;}
.mainmenu li:hover a:after{opacity: 1;}
/* .mainmenu > ul > li:last-child > a{color: #E00000;} */

/*submenu*/
.submenu{ width: 100%;  top: 70px; background: #fafafa; position: absolute; left: 0; border-top:1px solid #344EAF; font-weight:500;
display: none;}
.tabsubmenu a{padding: 17px 25px; border-bottom: 1px solid #9EC9E5; display: block; position: relative;  
   color: #344EAF; }
.tabsubmenu .fa-caret-right{position: absolute; right: 15px; top: 20px; opacity: 0; visibility: hidden; transition: all 0.3s ease 0s;}
.tabsubmenu a:hover,.tabsubmenu a.active{background: #eef8fe;}
.tabsubmenu a:hover .fa-caret-right,
.tabsubmenu a.active .fa-caret-right{right: 20px;opacity: 1; visibility: visible;}
.tabsubdetail{padding: 20px; border-left:1px solid #9EC9E5;}
.tabsubdetail h2{padding: 10px 15px; border:1px solid #9EC9E5; border-radius: 5px;  color:#344EAF;
margin-bottom: 15px; font-weight:500;} 
.listsub li{margin-bottom: 5px;  color:#344EAF; padding-left: 15px;}
.listsub.list-50 li{float: left; width: 50%;}
.listsub.list-50 li a{color: #000;}
.closesub{display: block; width: 100%; background: #014171; widows: 100%; color: #fff; text-align: center; padding: 5px; cursor: pointer;}
.rightorline{border-right: 1px dashed #c1c1c1;}
.rightorline:before{content:"OR"; position: absolute; top: 45%; right: -15px; background:#fafafa; padding: 5px; color: #c1c1c1;
font-size: 13px; }
.tabsubdetail{display: none; height: 500px;
overflow-y: scroll;}
/*endsubmenu*/
.hide-md{display: none;}
.hide-sm{display: none;}
.hide-xs{display: none;}
/*home*/
.container-fluid{max-width: 1920px;}
.wrapbanner{ /*padding-left: 20px; padding-right: 20px;*/}
.owl-banner{/*border-radius: 15px;*/ overflow: hidden; box-shadow: 0px 0px 10px 1px rgba(204,204,204,0.46);}
.owl-banner .iten{ margin-left: -1px; margin-right: -1px;}
.owl-banner .owl-nav{position: absolute; top: 40%; margin-top: -11px; width: 100%;}
.owl-banner .owl-prev,.owl-banner .owl-next{ opacity: 0.6; position: absolute; }
.owl-banner .owl-prev{left: 20px;}
.owl-banner .owl-next{right: 20px;}
.owl-banner .owl-prev:hover,.owl-banner .owl-next:hover{opacity: 1; }
.owl-theme .owl-nav [class*="owl-"]:hover{background: #344EAF;}
.owl-banner .cover{text-align: center; position: relative; background: #fcfcfc; padding: 20px 20px 55px; width: 100%; /*left: 0; position: absolute; bottom:0px; */ }
.cover .fa-caret-up{position: absolute;
font-size: 67px;
color: #fcfcfc;
top: -44px;
left: 50%;
margin-left: -19px;
z-index: 40;}
.banner-m{display: none!important;}

.owl-banner .cover h2{font-size: 30px; color: #344EAF; font-weight:500; margin-bottom: 10px;}
.owl-banner .cover h3{font-size: 24px; margin-bottom: 0; color: #003070;}
.owl-banner.owl-theme .owl-dots{ position: absolute; bottom: 15px; width: 100%;}
.owl-banner.owl-theme .owl-dots .owl-dot span{background: #ebf6fc;}
.owl-banner.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background: #46B3FF;}

/*sidebar-home*/
.main{margin-top: 70px;}
.checkuphome{background: rgba(255,255,255,1);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 100%);  padding-top: 45px; padding-bottom: 45px; 
position: relative; overflow: hidden;}


.sidebarcheck{max-width: 245px; margin-top: 20px;}
.ageNum{position: relative;}
.ageNum .btn{
  background: #344EAF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ageNum .btn .icon-up{
  width: 10px;
  height: 10px;
  background-image: url(../images/plus.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
}
.ageNum .btn .icon-down{
  width: 10px;
  height: 10px;
  background-image: url(../images/minus.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
}

.ageNum .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up{
  border-radius: 0;
  border-top-right-radius: 10px !important;
}
.ageNum .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{
  border-radius: 0;
  border-bottom-right-radius: 10px !important;
}
.ageNum .form-control{
  padding-left: 15px; background: none;
  height: 46px;
  border-top-left-radius: 10px!important;
  border-bottom-left-radius: 10px!important;
  border:1px solid #344EAF;
}

.amount{color: #535353; font-size:20px;  }
.amount::placeholder{color: #535353!important; font-size:20px!important;  }
.isBlack{color: #000000;}
.blue,a.blue:not([href]){color: #344EAF;}
.blue2{color: #344EAF;}
.blue3{color: #0081FF;}
.bold{font-weight:500;}
.checkuphome h2{font-size: 40px; color: #344EAF; margin-bottom: 20px; font-family: 'DB Heavent Bold Cond'; font-weight: 700;}
.wrapgender{border-radius: 10px; overflow:hidden; }
.gender{float: left; width: 50%; color: #344EAF; height: 46px; padding: 0 15px 0; display: flex; align-items: center;
   justify-content: center;
cursor: pointer; transition: all 0.3s ease 0s; background-color:#E1E8FF ;}
.gender.male{border-right: 2px solid #fff;}
.gender i{    
    margin-right: 3px;
    position: relative;
    left: -4px;
}
.gender:hover,.gender.active{background: #344EAF; color: #fff;}
.gender:hover img,.gender.active img{
  filter: brightness(0) invert(1);
}
.amount::placeholder {
    color: #344EAF;
    opacity: 1;
    font-weight:500; font-size: 14px;
}
.btn-blue{background: #344EAF; color: #fff; border-radius:10px; padding: 0 20px 0 25px;  cursor: pointer; font-weight:500; font-family: 'DB Heavent Bold Cond';
font-size: 21px; display: flex; align-items: center; height: 46px;;}
.btn-blue i{margin-left: 5px; transition: all 0.3s ease 0s; font-size: 19px;}
.btn-blue:hover{  color: #fff;}

.btn-blue.icon-left i{margin-left: 10px; margin-right: 10px;}
.btn-green{background: rgb(33, 155, 120); color: #fff; border-radius: .25rem; padding: 13px 20px 13px 25px;  cursor: pointer; font-weight:500;}
.btn-green i{margin-left: 5px; transition: all 0.3s ease 0s; font-size: 19px;}
.btn-green:hover{ background: rgb(26, 117, 91); color: #fff;}

.btn-green.icon-left i{margin-left:  0; margin-right: 5px;}

.btn-red{background: #B6915D; color: #fff; border-radius: .25rem; padding: 0 20px 0 25px;  cursor: pointer; font-weight:500; display: flex;
border-radius: 10px; align-items: center;}
.btn-red i{margin-left: 5px; transition: all 0.3s ease 0s; font-size: 19px;}
.btn-red:hover{ background: #d72930;color: #fff; }

.btn-blue-line{background: #fff; border:1px solid #344EAF; color: #344EAF; border-radius: .25rem; padding: 13px 20px 13px 25px; font-weight:500;  cursor: pointer;}
.btn-blue i{margin-left: 5px; transition: all 0.3s ease 0s; font-size: 19px;}
.btn-blue-line:hover{ background: #344EAF; color: #fff;}

.btn-icon{width: 100%; position: relative; text-align: left;}
.btn-icon i{position: absolute; right: 15px; top: 15px;}

.backorcheck .btn-blue-line{background: none;}
.backorcheck .btn-blue-line:hover{ background: #344EAF; color: #fff;}
.morepac{font-size:22px; color: #344EAF; text-decoration: underline;}
.check-home{width: 335px; margin-left: -20px;}
.check-home img{
  max-width: 100%;
}
.wrapsidebarcheck{padding-right: 0; position: relative;}
.wrapsidebarcheck .transitionside:before{height: 2px;
  background: #c4a271;
left: -90%;
width: 89%;
top: .5px;
content: "";
z-index: 9;
position: absolute;}
.owl-banner.owl-carousel .owl-nav button.owl-next, .owl-banner.owl-carousel .owl-nav button.owl-prev{
padding: 7px!important;
}
.morecheck-device{ text-align: right; padding: 15px 15px; widows: 100%; color: #fff;
background: rgba(58,90,169,1); background: linear-gradient(135deg, rgba(58,90,169,1) 0%, rgba(59,165,222,1) 100%);
font-weight:500;}
/*lis t-home*/
.owl-product-mobile .item{float: left; width: 50%; padding-left: 13px; padding-right: 13px; margin-bottom: 26px;}
.row-owl{margin-left: -13px; margin-right: -13px;}
.card-home{height: 100%; background: #fff; border-radius: 10px; overflow: hidden; position: relative;
box-shadow: 0px 0px 5px 1px rgba(204,204,204,0.46); }
.shadow{box-shadow: 0px 1px 6px 0px rgba(96,96,96,0.2);}
.card-home figure{margin-bottom: 0;}
.card-home .text-card-home{padding: 15px 20px; position: relative; min-height: 210px;}
.card-home .fa-caret-up{position: absolute;
font-size: 37px;
color: #fff;
top: -24px;
left: 50%;
margin-left: -10px;}
.card-home h3{font-size: 28px; font-family: 'DB Heavent Cond'; 
  margin-bottom: 20px; }
.header-product-home{height: 145px; overflow: hidden;}
.card-home .pricebox{margin-top: 20px;  }
.card-home .price{color: #344EAF;font-size: 28px; font-family:'DB Heavent Bold Cond'; }
.card-home .addcart-icon{font-size: 25px; cursor: pointer;  width: 35px;}
.card-home p{height: 43px; overflow: hidden; }
.owl-product-home{margin-bottom: -30px;}
.owl-product-home >.col-sm-6{margin-bottom:30px; }
.card-home .tag{padding: 5px 15px; background: #FF5C62; position: absolute; left: 10px; top: 10px; font-size: 13px;
font-weight:500; color: #fff; border-radius: 5px;}


.bottomlink{border-top: 1px solid #f2f3f3; padding: 40px 0; background: #fff;}
.bottomlink li{display: block; width: 25%; float: left; text-align: center; padding-left: 10px; padding-right: 10px;}
.bottomlink p{font-weight:500;  color: #344EAF;}
.bottomlink figure{height: 61px;}
.bottomlink img{width: 50px; }
.bottomlink a{display: block; padding:30px 20px; border: 1px solid #daedff; border-radius: 10px;}
.bottomlink ul{margin-left: -10px; margin-right: -10px; }

.subscribe{padding: 40px 0; color: #fff;background: #3048A2;}
.subscribe .container{
  display: flex;
  align-items: center;
}
.subscribe .sub-left{
  flex: 0 0 40%;
  text-align: right;
  padding-right: 20px;
}
.subscribe .formrequrire{
  flex: 0 0 50%;
}
.subscribe h2{font-size: 35px; margin-bottom: 10px; }
.subscribe .form-control{ color: #535353; border: none; height: 46px;  font-size: 20px; border-radius: 10px;}
.subscribe .form-control::placeholder{
  font-size: 20px!important; color: #535353!important;
}
.subscribe .flex-sub{
  display: flex;
  align-items: center;
  gap: 15px;
}
.subscribe .flex-sub i{
  margin-right: 5px;
}
.subscribe .fa-envelope{position: absolute; left: 15px; top: 14px; }
.subscribe button{ height: 46px; border-radius: 10px;
 font-size: 22px; color: #fff; cursor: pointer;
display: flex;  align-items: center; justify-content: center;
padding: 0 20px;
box-shadow: 0 5px 5px rgba(0,0,0,0.1),inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(255,255,255,0.5);
  background: rgba(233,233,233,0.05);
    background-clip: border-box;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-clip: padding-box;}
.subscribe button:hover,.footermain .btn-direction:hover{
box-shadow:
      0 5px 5px rgba(0, 0, 0, 0.1),
      inset 1px 1px 0 rgba(255,255,255,0.5),
      inset -1px -1px 0 rgba(255,255,255,1);
      color: #fff;
}
  
.subscribe .form-control::placeholder {
    color: #344EAF; opacity: 1; font-size: 14px;
}
.help-block{margin: 0; font-size: 16px; color: red; position: absolute; bottom: -25px;}

.footermain{color: #fff; }
.footermain .socialfooter{background: url(../images/footertop.svg) no-repeat center top; background-size: cover; height: 275px;
padding-top: 150px; border-bottom: 1px solid #004470;}
.footermain .socialfooter a{color: #fff; font-size: 40px; margin-left: 25px; margin-right: 25px;}
.footermain .sidebarfooter{  background-color:#344EAF; padding:  40px 0;}
.footermain .footer-group{color: #fff;}
.footermain .btn-direction{
  margin-bottom: 30px;
  height: 46px;
  border-radius: 10px;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1),inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(255,255,255,0.5);
  background: rgba(233,233,233,0.05);
    background-clip: border-box;
  background-clip: border-box;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-clip: padding-box;
}
.footermain .fa-map-marker{margin-right: 10px;}
.footermain .fa-arrow-circle-right{float: right; margin-top: 3px;}
.footer-group li.titlef{margin-bottom: 15px;}
.footer-group li{margin-bottom: 10px;}
.footer-group  h2{ font-size: 30px;}
.footer-group{margin-bottom: 20px;}

.footermain a:hover{color: #fff;}
.linebottom{margin-left: 10px; margin-right: 10px; }
.langbottom{background: #006eb2; padding: 5px 0 40px;}
.langbottom a{color: #b2c5d3;}
.langbottom a.active{color: #fff;}
.langbottom span.circle,.lang span.circle, .havesub  span.circle {
    /* สร้างวงกลม */
    width: 30px;
    height: 30px;
    background-color: white;
    color: #344EAF;
    border-radius: 50%;
    
    /* จัดให้อยู่บรรทัดเดียวกับข้อความ */
    display: inline-flex;
    align-items: center;    /* กึ่งกลางแนวตั้ง */
    justify-content: center; /* กึ่งกลางแนวนอน */
    
    /* เว้นระยะห่างจากข้อความข้างๆ */
    margin-right: 8px;
    font-size: 14px;
    vertical-align: middle; /* ช่วยให้ฐานวงกลมตรงกับระดับตัวอักษร */
  }
.bottomsite{padding: 20px 0; background: #344EAF; }

.owl-carousel.off {
    display: block;
}
.wrapquickmenu{ border-top:5px solid #4a8bc9; background: #344EAF; position: relative;}
.wrapquickmenu i{position:absolute; left: 20px; top: 12px; color: #fff;}
.wrapquickmenu select{border: 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none; background: #344EAF;  width: 100%; padding: 10px 5px 10px 40px;color: #fff;  }
/*popup home*/
.form-control:focus{ box-shadow: none!important; } 
.btn-primary.focus, .btn-primary:focus{box-shadow: none;}
.loginpopup .help-block,.invalid-feedback{position: absolute; font-size: 13px; bottom: -20px;}
.loginpopup .modal-body{max-width: 380px; margin: 0 auto; width: 100%; padding-top: 30px; padding-bottom: 30px;}
.loginpopup .loginpic{ width: 100%; text-align: center; }
.loginpopup .loginpic img{max-width: 150px;}
.loginpopup h2{font-size: 28px; font-weight:500; color:#344EAF; margin-bottom: 15px;}
.loginpopup h3{font-size: 24px; font-weight:500; color:#344EAF; margin-bottom: 15px;}
.loginpopup .memder_id{font-size: 20px; color:#344EAF;}
.lineinput .form-control:not([autocomplete="off"]){border-radius: 10px; border: 1px solid #344EAF; color:#344EAF;font-size: 20px;}
.lineinput.nobgform .form-control{
  /* background: none!important;  */
  border-radius: 10px;
  border: 1px solid #344EAF;
  color: #344EAF;
  font-size: 20px;}
.lineinput .form-control::placeholder{color:#535353;  }
.lineinput.was-validated .form-control:valid{
  border-color: #344EAF;
}
.color-ci{
  color: #344EAF;
}
.step{

}
.lineinput.was-validated .form-control:valid:focus{
  border-color: #344EAF; box-shadow: 0!important;
}
.lineinput .form-group i{color:#344EAF; position: absolute; left: 10px; top: 12px;  }
a:not([href]){cursor: pointer;}

/*productlist*/
.main.mainnobanner{padding: 40px 0 30px; }
.main.mainhavebreadcrumb{padding-top: 20px;}
.owl-product-home .card-home{ max-width: 100%; }
.mainhavebreadcrumb .breadcrumb{margin-bottom: 0;}
.mainhavebreadcrumb ol.breadcrumb {padding-bottom: 20px;}
.page{color: #344EAF;}
.page .numpage{padding-top: 3px; text-align: center; width: 28px; font-size: 18px; height: 28px; border-radius: 100%;border:1px solid #f5f5f5; }
.page .numpage:hover,.page .numpage.active{border-color:#344EAF; color: #344EAF;}
.page .nextprevpage{}
.bg-gd{background: rgba(0,65,109,1);
background: linear-gradient(to bottom, rgba(0,65,109,1) 0%, rgba(0,78,130,1) 48%, rgba(0,110,178,1) 100%);}
.sidebarlist{background: rgba(0,100,167,1);color: #fff;
padding-top: 20px; border-radius: 10px;}
.sidebarlist a:not(.dropdown-item):hover{color: #b2c5d3;}
.sidebarlist h2{font-size: 28px; font-weight: 300;}

.sidebarlist .bootstrap-select > .dropdown-toggle{font-size: 20px;}
.small-breadcrumb{background: none; color: #fff; margin-bottom: 0; padding-left: 20px;}
.small-breadcrumb .breadcrumb-item.active{color: #fff;}
.headsidebar{padding:5px 20px 30px; border-bottom: 1px solid #5a90b6;}
.headsidebar ul{margin-top: 15px;}
.headsidebar ul li{position: relative; padding-left: 20px; margin-bottom: 3px; text-transform: uppercase;}
.headsidebar ul li i{position: absolute; left: 0; top: 2px; font-size: 14px;}
.sidebarlist .btn-primary{background: none;border:0;  padding:11px 20px 11px; text-transform: uppercase; 
position: relative; z-index: 51;}
.sidebarlist .form-control{background: none; height: 46px; }
.list-filter>li{border-bottom: 1px solid #5a90b6;}
.list-filter > li:last-child{
  border-bottom: 0;
}
.list-filter>li>a{padding:13px 20px; display: block;}
.list-filter .dropdown-toggle::after{display: none;}
.selectwrap{position: relative;display: flex;
  align-items: center;
  padding-right: 11px;}
.selectwrap .fa-chevron-down,.selectwrap .fa,.list-filter .fa-filter{position: absolute; right: 15px; top: 15px; z-index: 50;}
.bootstrap-select .dropdown-toggle:focus {
  outline: 0!important;
  outline-offset:0;
}

.breadcrumb-item + .breadcrumb-item::before{
  font-family: FontAwesome;
  content: "\f105";
  color: #82b7db;
}

.filterpopup .close{font-size: 20px;}
.filterpopup .modal-header{border-bottom:1px dashed #d2e5f1; }
.filterpopup fieldset{border-bottom:1px dashed #d2e5f1; padding-bottom: 15px; margin-bottom: 15px; }
.filterpopup h2{font-size: 28px; font-weight:500; color:#344EAF; margin-bottom: 15px;}
.closemodal{width: 30px;}
.filterpopup h3{font-size:20px ; color: #344EAF; margin-bottom: 20px; font-weight:500;}
.icheck-primary > input:first-child:checked + label::before{background-color: #344EAF;
border-color: #2e6da4;}
.filterpopup .pickcollapse i{position: absolute; right: 10px;}
.wrap-slider-range{padding-left: 15px; padding-right: 15px;}
.slider-range{margin-top: 50px; }
.slider-range.ui-widget.ui-widget-content{border:0; background: #a7a7a7;}
.slider-range .ui-state-default{
  border-radius: 100%;
  border: 1px dotted #ed656b;
  background: #fff;
  cursor: pointer;
}
.slider-range .ui-state-default.ui-state-hover{background: #ececec;}
.slider-range .ui-state-default.ui-state-active{background: #a10818;}
.slider-range.ui-slider .ui-slider-handle{
  width: 30px; height: 30px;
}
.slider-range.ui-slider .ui-slider-range{background: #e24050;}
.slider-range.ui-slider-horizontal .ui-slider-handle{top: -10px;}

#slider .ui-slider-handle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    top: -10px;
    cursor: pointer;
    touch-action: none;
    z-index: 10;
}

/* เพิ่มพื้นที่สัมผัส */
#slider .ui-slider-handle::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: -11px;
    left: -11px;
}

.value {
  position: absolute;
  top: -25px;
  left: 50%;
  margin: 0 0 0 -20px;
  width: 40px;
  text-align: center;
  display: block;
  /* optional */
  font-size: 14px;
  color: #ED656B;
}
.price-range-both.value {
  width: 200px;
  margin: 0 0 0 -50px;
  top: -26px;
}
.step-text{
  font-size: 19px!important;
}
.dropdown-menu{
  font-size: 19px;
}
.price-range-both {
  display: none; 
}
.value i {
  font-style: normal;
}
.line-right-dotted{border-right: 1px dashed #d2e5f1; }
.pickcollapse{cursor: pointer; position: relative;}
.showcollapse{display: none;}
.showfilter label{font-weight:500;}
.fil-box{background: #fff; border-radius: 5px; padding: 10px 40px 10px 15px; margin-left: 3px; margin-right: 3px;
box-shadow: 0px 1px 3px 0px rgba(96,96,96,0.2); position: relative;}
.removefilter{width: 12px; position: absolute; right: 15px; top: 9px; }

.breadcrumb{background: none; padding-top: 0;}

.cover-p-detail{background: #fff; padding: 15px 0;}
.cover-p-detail .fil-box{background: #344EAF; color: #fff; padding-right: 15px;}
.cover-p-detail .fa-caret-up{font-size: 50px; top: -33px;}

/*packagedetail*/
.packagedetail h2{font-weight:500; font-size:25px; margin-bottom: 25px; }
h2.headline{font-weight:500; font-size:30px; }
.packagedetail img{max-width: 100%; }
.packagedetail section{padding: 20px 0 20px;}
.list-include li{font-weight:500; color: #000; padding-bottom: 5px; position: relative;}
.list-include li.subinclude{padding-bottom: 10px; padding-top: 10px; margin-top: 10px; margin-bottom: 10px;}
.list-include li.subinclude:after{content: ""; position: absolute; width: 100%; height: 1px; border-bottom: 1px dotted #ccc;
left: 0; bottom: 0;}
.list-include li.subinclude:before{content: ""; position: absolute; width: 100%; height: 1px; border-bottom: 1px dotted #ccc;
left: 0; top: 0;}
.list-include li i{margin-right: 5px;}
.listsubic{color: #344EAF; margin-bottom: 5px;}
.list-prepara li{margin-bottom: 25px; position: relative; padding-left: 40px; color: #344EAF;}
.list-prepara li:last-child{margin-bottom: 0;}
.list-prepara .num-pe{ position: absolute; width: 30px; height: 30px; text-align: center; background: #344EAF; border-radius: 100%;
padding-top: 5px; left: 0; color: #fff; top: -5px;  }
.alsolike {padding-top: 20px; margin-top: 40px; border-top: 2px solid #c3d5fd;}
.abount-pacnum{max-width: 200px;}

.sidebar-detail h1{font-size: 32px!important; color: #344EAF; line-height: 1 ; margin-bottom: 20px; font-family: 'DB Heavent Cond';}
.sidebar-detail .price-p-detail{margin: 15px 0; color: #344EAF;
  font-size: 28px;
  font-family: 'DB Heavent Bold Cond';}
.abount-pacnum .input-group-btn button{ height: 38px; background: #344EAF; color: #fff; width: 38px; border-radius: 6px;
cursor: pointer; }
.abount-pacnum .form-control{ border-radius: 5px!important; margin-left: 5px; margin-right: 5px;
color: #344EAF; border-color: #344EAF; font-weight:500; background: none;}
.abount-pacnum .btn-muyadd a{max-width: 200px; width: 100%; margin-bottom: 5px; position: relative;}
.abount-pacnum .btn-muyadd a i{position: absolute; right:20px; font-size: 20px;}

.step-page{font-weight:500; background: #fff; padding: 15px;}
.step-page ul{display: flex; justify-content: center;  width: 100%; margin-bottom: 0;}
.step-page li{margin-bottom: 0; margin-right: 55px; float: left; text-align: center;  color: #9b9b9b; position: relative; }
.step-page li:last-child{margin-right: 0;}
.step-page .num-step{display: inline-block; width: 40px; height: 40px; text-align: center; padding-top: 9px; border: 1px solid #9b9b9b;
border-radius: 100%; margin-bottom: 5px;}
.step-page li.active{ color: #344EAF;}
.step-page li.active.thisstep:before{content: "";  width: 70px; margin-left: -35px; height: 3px; background: #344EAF; 
position: absolute; bottom: -15px; left: 50%;}
.step-page li.active .num-step{border-color:#344EAF; }

.wrapmycart{padding-left: 25px; padding-right: 25px;}
.mycartpage{font-weight: 600px; color: #344EAF; }
.mycartpage>li{padding: 20px 0 20px; border-bottom: 1px solid #d0e2ef;}
.mycartpage .abount-pacnum{margin-bottom: 0;}
.mycartpage .cartdetail,.mycartpage .price {padding-top: 7px; font-weight:500;}
.picker-default .dropdown-toggle{background: none; border-color: #ced4da;} 
.picker-default{display: inline-block;}
.zipcodeship{float: left; width: 33%; margin-left: 2%;}
.zipcodeship input{background: none;}

.total,.pricetotal{font-weight:500; color: #344EAF; font-size: 22px;}
.btn-buyadd{ display: flex; gap: 7px;}
.btn-buyadd .btn-iconright i{top: 11px;}
/*mycart*/
.flexlogin-box{ text-align: center; min-height: 310px; background: #fff; border-radius: 6px; padding: 30px 25px 30px; }
.flexlogin-box h2{font-weight:500; font-size:25px; color: #344EAF; margin-bottom: 20px;}
.new-user{padding-right: 40px;position: relative;}
.new-user:after{content:""; height: 100%; position: absolute; width: 1px; background: #ccc; right: -2px; top: 0; z-index: 1;}
.new-user:before{content:"OR"; position: absolute; color: #C3C3C3; font-weight:500; background: #f5f5f5; right: -20px; top: 0; padding: 10px; top: 45%; z-index: 2;}
.return-customer{padding-left:40px;}
.return-customer .needs-validation{max-width: 400px; margin: 0 auto;}
.new-user h2{margin-top: 80px;}
/*promotion*/
.promotion-period { padding-top: 40px; padding-bottom: 30px;}
.promotion-periode-box { background: #fff;border-radius: .25rem;overflow: hidden;position: relative; box-shadow: 0px 0px 5px 1px rgba(204,204,204,0.46);}
.promotion-period .title-pro-date { color:#fff; background: #FF5C62; padding:15px;}
.promotion-period .title-promtion { padding-top: 20px; padding-bottom: 20px;}
.promotion-period .title-promtion h3{ font-size: 25px;}
.promotion-period .list-promotion-periode{ padding:25px;}
.promotion-period .list-promotion-periode li:first-child{  border-top: 1px solid rgba(0,111,186,0.20); }
.promotion-period .list-promotion-periode li{ font-size: 18px; border-bottom: 1px solid rgba(0,111,186,0.20); padding-top: 20px; padding-bottom: 25px;}
.promotion-period .list-promotion-periode .btn-red{ }
.promotion-period .list-promotion-periode .btn-red i{ margin-left: 0;}
.promotion-period .pro-icon { min-width: 85px; text-align: center; }
.promotion-period .note { font-size: 12px; padding-top: 25px;  }
.aside-preriod a{padding: 15px 0;}
.morepromotion{padding: 35px 0;}

/*checkout*/
.checkoutform label{font-weight:500; color: #344EAF; font-size: 20px;}

.checkoutform label i{margin-right: 7px;}
.checkoutform .pandc{border-bottom: 1px solid #d0e2ef; margin-bottom: 20px; }
.pandc a{display: inline-block; padding: 15px 5px; font-weight:500; color: #006cff; font-size: 20px;}
.pandc a.checked{border-bottom: 3px solid #006fff; color: #344EAF;}
.lineinput.defaultline .form-control:not([autocomplete="off"])
{border-radius: 5px; border: 1px solid #90bdfc; color:#344EAF;
padding-left: 30px; padding-left: 45px; }
.lineinput.defaultline .btn{border:0; background: none; color:#344EAF; padding-left: 45px;}
.lineinput.defaultline .form-group i{ height: 100%; top: 0; padding: 10px 0 10px; width: 35px; text-align: center; left: 2px; 
  border-right: 1px solid #a9cdfb; }
.row-groupcheck.col2 .form-group{float: left;width: 50%; }
.groupcheck{padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #d0e2ef;}
.lineinput.defaultline .bootstrap-select.form-control{padding-left: 0;}
.lineinput.defaultline .no-icon .btn{padding-left: 20px;}
.lineinput.defaultline .invalid-feedback{bottom: -17px;}
.was-validated .form-control:invalid{color: #dc3545; border-color: #dc3545;}
.btn-iconright{position: relative; padding-right: 45px;}
.btn-iconright i{position: absolute; right: 15px; top: 15px;}

/*confirmation*/
.confirm h2 { font-size: 28px;  font-weight:500; }
.list-confirmation {  border-bottom: 1px solid #d0e2ef;}
.list-confirmation:first-child {border-top: 1px solid #d0e2ef;}
.link-confirm { font-size: 20px; padding:20px 30px 20px 20px; position: relative;}
.link-confirm::after { content: "\f106"; font: normal normal normal 26px/1 FontAwesome; position: absolute; right: 15px; top: 15px; }
.link-confirm.collapsed::after { content: "\f107"; }
.order-summary-item { background: #f2f3f3; border:1px solid #ebecec; padding: 25px; border-radius: 5px;margin-left: 25px;}
.order-summary-item h3{font-weight:500;}
.order-summary-detail h2{ font-weight:500;}
.list-order-item { margin-top: 15px; }
.list-order-item li{ border-top: 1px solid #d0e2ef; padding: 20px 0 }
.list-order-item li:last-child{ padding: 20px 0 0 0 }
.list-order-item .order-icon{ text-align: center; }
.list-order-item .order-icon i::before{ font-size: 24px; color:#344EAF; }
.list-order-item .order-total{ font-size: 25px; font-weight:500;  }
.list-coupon-item { margin-top:5px; margin-left: 25px;}
.list-coupon-item li{ border-bottom: 1px solid #d0e2ef; padding: 20px 0 }
.list-coupon-item li:last-child{ border-bottom: 0px solid #d0e2ef; padding: 20px 0 }
.list-coupon-item figure{margin-bottom: 0;}
.coupon-item-detail .sub-text { display:block; font-size:13px; }
.coupon-checkup-box { display: block; font-size: 25px; border: 1px solid #d0e2ef; border-radius: 15px; padding: 20px 25px; margin-bottom: 25px; margin-right: 25px; }
.contact-row { display:inline-block; padding-left: 10px; padding-right: 10px; border-right: 1px solid #000;}
.contact-row:last-child {  border-right: 0px solid #000;}
.contact-row.social .fa:before{font-size: 26px; vertical-align: -4px; padding: 0 2px;}

/*faq*/
.faqlist {margin-top: 20px;}
.faqlist h3 { color:#344EAF; font-weight:500; margin-top: 20px;padding: 10px 0;cursor: pointer;margin-top: 0;transition: all 0.3s ease 0s;position: relative;
font-size: 23px;}
.faqlist h3:after {content: "+";position: absolute;right: 5px;top: 0px;
  font-size: 30px;}
.faqlist h3.active:after {content: "-";}
.faqlist h3:hover, .faqlist h3.active {}
.faqlist li {margin-bottom: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.faqlist .faqshow {display: none;padding: 20px 0;}

/*contact*/
.title-main {padding-top: 20px;padding-bottom: 20px;}
.title-main h1{font-weight:500;}
.form-contact .form-control { background:none; padding-left: 10px; color: #344EAF; }
.form-contact .filter-option-inner-inner { color: #344EAF; }
.form-contact .btn-light { background:none; border:0px;     border-bottom: 1px solid #344EAF; border-radius: 0; width: 100%; max-width: inherit; }
.form-contact .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){ width: 100%; max-width: inherit; }


.wrapitemtoggle{padding: 15px;}
.yourcard{background: #fff; border-radius: .25rem; overflow: hidden;box-shadow: 0px 0px 5px 1px rgba(204,204,204,0.46);}
.yourcard h3 { background:#344EAF; color:#fff; padding: 13px 10px; font-size: 20px; position: relative;}  
.yourcard h3 span{ position: absolute; padding:5px 15px; background: #fffefd; color: #3c6cb4;
right: 10px; top: 8px; border-radius: 15px;}
.yourcard h3 i{margin-right: 5px; position: relative; top: -2px;}
.itemtoggle{padding: 5px 0 15px; cursor: pointer;}
.itemtoggle .fa-chevron-right{transition: all 0.3s ease 0s;}
.itemtoggle[aria-expanded="true"] .fa-chevron-right{
transform: rotate(90deg);}
.itemtoggle,.itemtoggle h2{font-weight:500; color: #344EAF;}

.wrapyourcard3 > div{font-weight:500; color: #344EAF;}
.wrapyourcard3{justify-content: space-between;}
.wrapyourcard3 .yourcard-icon{width: 5%; padding-top: 2px; }
.wrapyourcard3 .yourcard-icon i{font-size: 18px; color: #ee5f65;}
.wrapyourcard3 .yourcard-title{
  width: 57%; 
  font-weight: normal; 
  color: #344EAF;
  /* padding-left: 15px;  */
  /* padding-right: 15px; */
}
.wrapyourcard3 .yourcard-item{width: 18%; padding-right: 10px; padding-left: 10px;}
.wrapyourcard3 .yourcard-item .form-control{height: 35px;}
.wrapyourcard3 .yourcard-price{width: 20%; text-align: right; color: #344EAF;}

.list-yourcard li{padding: 15px 0; border-bottom: 1px solid #d0e2ef;}
.list-yourcard li:last-child{border-bottom: 0;}
.shippingcost{font-weight:500; padding: 15px 0; border-bottom: 1px solid #d0e2ef; border-top: 1px solid #d0e2ef;}
.shippingcost.total{font-size: 25px; border: 0;}
.btn-plusbill{background: #344EAF; color: #fff!important; font-weight: normal; padding: 5px 15px; font-size: 14px;}
.formationbox{position: relative; padding: 20px; border:1px solid #0071ff; border-radius: 5px; margin-bottom: 20px;} 
.formationbox.active{ color: #0071ff; border:3px solid #0071ff; background: #fefefe; }
.formationbox:hover{ background: #fefefe; }
.formationbox a.fa-pencil-square-o{position: absolute; right: 15px; font-size: 18px; top: 50%; margin-top: -7px; color: #0071ff;}
.fillcompany{display: none;}

.g-payment{ padding-bottom: 15px; margin-bottom: 15px;}
.g-payment label{font-weight: normal; color: #344EAF; }

.couponcode{ margin-top: 10px; }
.couponcode h2{font-size: 27px; margin-bottom: 10px; }
.couponcode .form-control{ color: #344EAF; border-color:#344EAF; height: 44px;  font-weight:500; }
.couponcode .fa-envelope{position: absolute; left: 15px; top: 14px; }
.couponcode button{position: absolute; right: 15px; height: 44px; 
 top: 0; right: 0; background: #344EAF; color: #fff; border-radius: 5px; padding:0 15px;
border-bottom-right-radius: 5px; cursor: pointer; text-align: center; padding-top: 5px;}
.couponcode .form-control::placeholder {
    color: #344EAF; opacity: 1; font-size: 14px;
}
.nameaccount{font-size: 28px; font-weight:500; color: #344EAF; margin-bottom: 15px;}
.sidebar-account{border: 1px solid #344EAF; border-radius: 5px; overflow:hidden;}
.sidebar-account li{border-bottom: 1px solid #0071ff; }
.sidebar-account li a{font-weight:500;  color: #344EAF; font-size: 20px; padding: 12px 15px; position: relative; display: block;}
.sidebar-account li a:hover,.sidebar-account li a.active{background: #e6edfa;}
.sidebar-account li a i{position: absolute; right: 10px;}
.sidebar-account li:last-child{border-bottom: 0; }
.formationbox .groupcheck{padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
.editaccount{display: none;}
.delete-box{color:#dc3545;  position: absolute; top: -20px; right: 0;
cursor: pointer; }
.addshipping{font-weight:500;}

.order-box{font-weight:500; color:#344EAF; font-size: 18px; }
.order-box .pricenum{font-weight: normal;  margin-top: 5px;}
.order-box .fa-search{padding: 10px;}
.formationbox .order-summary-item{background: none; border: 0; padding: 0; padding: 20px 0; margin: 20px 0; 
  border-top: 1px solid #0071ff; border-bottom: 1px solid #0071ff; border-radius: 0;}
.list-prepara{position: relative; }
.list-prepara li{margin-bottom: 25px; position: relative; padding-left: 40px; color: #344EAF;}
.list-prepara li:last-child{margin-bottom: 0;}
/* .list-prepara:before{ width: 2px; height: 100%; content: ''; position: absolute; left: 14px; background:#344EAF; } */
.list-prepara .num-pe{ position: absolute; width: 30px; height: 30px; text-align: center; background: #344EAF; border-radius: 100%;
padding-top: 5px; left: 0; color: #fff; top: -5px;  }


.list-prepara.list-howto{font-weight: normal;}
.list-prepara.list-howto .num-pe{ width: 70px;
  height: 70px; left: 20px; display: flex; align-items: center;justify-content: center; }
.list-prepara.list-howto li{padding-bottom: 20px; margin-bottom: 20px; padding-left: 0;}
.list-prepara.list-howto .howtobox{padding-left: 90px;}

.main-welcome p{font-weight:500; font-size: 20px;}
.main-welcome{padding-top: 150px;}

/*tab*/
.logobank {list-style: none; padding: 0; margin: 0;}
.logobank li { float: left; width: 12.5%;  border-right:none;}
.logobank li a{ display: block; position: relative; opacity: 0.3; }
.logobank li a::before{ content: ""; position: absolute; width: 100%; height: 100%; border:1px solid #bbc1bc; border-right: 0px;}
.logobank li a.active::before{ border-bottom: 3px solid #0081ff;}
.logobank li a.active::after{ content:""; bottom: -7px; left: 0; position: absolute; height: 8px; background:url(../images/ar-tab.svg) no-repeat bottom center;  width: 100%; }
.logobank li:last-child a::before{  border-right:1px solid #bbc1bc}
.logobank li a.active{opacity: 1;transform: scale(1.1);}
.logobank li img{ width: 100%;}
.tab-bank-inner {}

.title-bank { background:#ebebeb; padding:15px; margin-top: 10px; margin-bottom: 5px; }
.title-bank h3{  font-size:18px; background:none; padding: 0; }
.body-bank {}
.bank-price { border:1px solid #d3d3d3;padding:15px; }
.bank-price strong { font-size:18px; }
.bank-price span {}
.btn-blueline { color: #344EAF; border:1px solid #344EAF;border-radius: .25rem;  padding: 7px 20px 7px 25px; }

.header.active .mainmenu {margin-right: 75px; transition-delay: 0s!important;}
.mainmenu{transition-delay: 0.4s!important; transition: all 0.3s ease 0s;}
.mycarticon-mobile{background: #C4A271;

padding-left: 34px; position: fixed; right: 0; top: -71px; transition: all 0.3s ease 0s; 
z-index: 100; height: 71px; }
.mycarticon-mobile.scrollto{top: 0px;}

.mycarticon-mobile .icon-shopping-cart{position: relative; top: -2px;}

.mycarticon-mobile .numcart{padding: 2px 8px; 
 color: #fff; position: absolute; left: 15px; border-radius: 5px; font-weight: 700;}
 .mycarticon-mobile a{display: flex; height: 70px; padding-left: 15px; padding-right: 10px;
 align-items: center;}
 .full-price{font-size:18px;margin-top:10px;text-decoration: line-through!important;color:#888!important;}
 .img-package{
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.input-label{
  margin: 0px; 
  font-size: 14px;
}
.display-none{
  display: none;
}
.alert-text{
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.bootstrap-touchspin .input-group-btn-vertical{
  position: static;
  display: flex;
  flex-direction: column;
  height: 46px;
  z-index: 1;
}
.bootstrap-touchspin .input-group-btn-vertical > .btn{
  position: static;
}

.menu-top{
  display: flex;
  gap: 30px;
  align-items: center;
  list-style: none;
  margin-bottom: 0;
  position: absolute;
  left: 40%;
  transform: translateX(-50%);
  height: 100%;
}


.menu-top li a{
  color: #fff;
  font-size: 24;
  text-transform: uppercase;
}
.step{
  margin-bottom: 20px;
}
.step .step-num{
  font-size: .9em;
  text-align: center;
  margin-bottom: 10px;
  
}
.bar-step{
  width: 100%;
  max-width: 360px;
  margin: auto;
  height: 6px;
  border-radius: 99px;
  background: #E8EAED;
  overflow: hidden;
  position: relative;
}

.inner-step{
  background-color: #344EAF;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 99px;
}
.flex-social{
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.flex-social a{
  padding: 5px 10px;
}

.bottomsite{
	
width: 100%;
border: 1px solid #ccc;
padding: 25px 10px;
}


.flex-button{
  display: flex;
  gap: 5px;
}
.flex-button .submit-register{
  flex: 1;
}
.flex-button .submit-register.back{
  background-color: #E1E8FF;
  color: #344EAF;
}

.ui-slider-handle:nth-of-type(1) .price-range-min {
    top: -35px;
}

.ui-slider-handle:nth-of-type(2) .price-range-max {
    top: -20px;
}
/* ตัวอย่าง CSS สำหรับ RTL */
[dir="rtl"] .topleft,
[dir="rtl"] .topright {
  float: right;
}
[dir="rtl"] .topright {
  margin-right: auto;
  margin-left: unset;
}

[dir="rtl"] .menu-top {
  left: unset;
  right: 10%;
}
@media (max-width: 1440px) {
  [dir="rtl"] .menu-top {
    right: 2%;
  }
}
[dir="rtl"] .list-unstyled {
  padding-right: 0;
  padding-left: unset;
}
[dir="rtl"] body {
  text-align: right;
}
[dir="rtl"] .text-left {
  text-align: right !important;
}
@media (min-width: 768px) {
  [dir="rtl"] .offset-md-4 {
    margin-right: 33.333333%;
    margin-left: unset;
  }
}

/* สำหรับ RTL: จัดตำแหน่ง Checkbox/Radio และดึงเครื่องหมายถูกกลับมา */
[dir="rtl"] .icheck-primary > input + label::before {
    left: auto !important;
    right: 0 !important;
    margin-right: 0px; /* ปรับให้ตรงกับระยะห่างตัวอักษร */
}

[dir="rtl"] .icheck-primary > input + label::after {
    left: auto !important;
    right: 0 !important;
    margin-right: 15px !important; /* ดึงเครื่องหมายถูกกลับมาฝั่งขวา */
    margin-left: 0 !important;      /* ล้างค่าติดลบเดิมที่ทำให้เครื่องหมายหาย */
}

/* เว้นระยะตัวอักษรไม่ให้ทับปุ่ม */
[dir="rtl"] .icheck-primary > label {
    padding-right: 30px !important;
    padding-left: 0 !important;
}

/* กรณีแสดงผลภาษาอาหรับ ให้สลับระยะห่างของไอคอน */
[dir="rtl"] .icon-set {
    margin-right: -5px; /* เพิ่มระยะห่างด้านขวาของไอคอน */
    margin-left: 0;    /* ล้างค่าฝั่งซ้ายเดิม */
    float: none;       /* ป้องกันไอคอนลอยทับตัวหนังสือ */
    display: inline-block;
}

[dir="rtl"] .text-set {
    margin-right: 30px; /* เพิ่มระยะห่างด้านขวาของไอคอน */
}

/* หากคุณใช้ mmenu แล้วปุ่ม 'half' มีปัญหา */
[dir="rtl"] .half {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* ใช้ gap เพื่อเว้นระยะห่างระหว่างตัวหนังสือกับไอคอนโดยอัตโนมัติ */
}

[dir="rtl"] .icon-link {
    margin-right: 20px !important;
}

[dir="rtl"] .icon-right {
    padding-right: 40px !important;
}

[dir="rtl"] .icon-input {
    display: flex;
    flex-direction: row-reverse; /* สลับตำแหน่งให้ Input อยู่ขวา ไอคอนอยู่ซ้าย */
    align-items: center;
    position: relative;
    width: 100%;
}

[dir="rtl"] .logo {
  width: unset;
}

[dir="rtl"] .bi-cart3 {
  margin-right: 50px;
}

[dir="rtl"] .formationbox {
  padding-right: 40px;
}

[dir="rtl"] .discount_code{
  padding-right: 15%;
}

[dir="rtl"] .fix-ar {
  text-align: right !important;
}

[dir="rtl"] .wrapyourcard3 .yourcard-item {
  margin-right: 0px;
  margin-left: 0px;
}

[dir="rtl"] .wrapyourcard3 .yourcard-price {
  width: 20%; 
  text-align: left; 
  color: #344EAF;
}

[dir="rtl"] .wrapyourcard3 .yourcard-title {
  width: 55%;
}

[dir="rtl"] .icon-set-left {
  margin-left: 10px;    /* ล้างค่าฝั่งซ้ายเดิม */
}

[dir="rtl"] .modal-header .close {
    display: contents !important;
}

[dir="rtl"] .set-edit-icon {
    right: -30px !important
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  font-family: FontAwesome;
  content: "\f104";
  color: #82b7db;
  float: right;
  padding-left: .4rem;
  padding-right: .2rem;
}

[dir="rtl"] .list-order-item .order-icon i::before{
  font-size: 24px;
  color: #344EAF;
  content: "\f100";
}