@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url("dark.css");

body, html {font-family: 'Sarabun',Arial, Helvetica, sans-serif;width: 100%!important;height: 100%!important;padding: 0!important;margin: 0!important;padding-top: 58px!important;position: relative;background-color: #ffffff;}
.container-backend { padding-top: 20px; min-height: 590px; }
.container-frontend { min-height: 590px; }
.card-height { min-height: 590px; }
a {text-decoration: none;}
.pointer,.cursor-pointer {cursor: pointer;}
.text-opa { color: rgb(134, 134, 134); }
.fontsize11 { font-size: 11px; }
.fontsize12 { font-size: 12px; }
.fontsize13 { font-size: 13px; }
.fontsize14 { font-size: 14px; }
.fontsize15 { font-size: 15px; }
.fontsize16 { font-size: 16px; }
.fontsize17 { font-size: 17px; }
.fontsize18 { font-size: 18px; }
.fontsize19 { font-size: 19px; }
.fontsize20 { font-size: 20px; }
.fontsize21 { font-size: 21px; }
.fontsize22 { font-size: 22px; }
.fontsize23 { font-size: 23px; }
.fontsize24 { font-size: 24px; }
.fontsize25 { font-size: 25px; }
.fontsize28 { font-size: 28px; }
.fontsize30 { font-size: 30px; }
.fontsize40 { font-size: 40px; }
.fontsize50 { font-size: 50px; }
.fontsize60 { font-size: 60px; }
.modal-lg-20 {max-width: 20%;}
.modal-lg-30 {max-width: 30%;}
.modal-lg-40 {max-width: 40%;}
.modal-lg-50 {max-width: 50%;}
.modal-lg-60 {max-width: 60%;}
.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%;}
.color_red,.text-red {color: #f00;}
.txt-upper { text-transform: uppercase; font-weight: 600; }
small { font-size: 12px; color: rgb(156, 156, 156); }
.icon-password {position: absolute;right: 8px;top: 6px; cursor: pointer;}
/*input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus,textarea:focus { border-color: none;box-shadow: none;outline: 0 none;}*/
.form-control:focus {  border-color: none;box-shadow: none;outline: 0 none; }
select { outline:none!important; box-shadow:none!important;cursor: pointer; }
input::placeholder,textarea::placeholder { font-size: 15px; color: rgb(190, 190, 190) !important;}
.btn-red {
    --bs-btn-color: #fff;
    --bs-btn-bg: #f50404;
    --bs-btn-border-color: #f56868;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #830404;
    --bs-btn-hover-border-color: #830404;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #830404;
    --bs-btn-active-border-color: #830404;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f56868;
    --bs-btn-disabled-border-color: #f56868;
}
.btn-mote {
    font-size: 12px;
    --bs-btn-color: #fff;
    --bs-btn-bg: #f50404;
    --bs-btn-border-color: #f56868;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #830404;
    --bs-btn-hover-border-color: #830404;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #830404;
    --bs-btn-active-border-color: #830404;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f56868;
    --bs-btn-disabled-border-color: #f56868;
}
.no-border {border: 0;box-shadow: none;}
.no-shadow { outline:none!important; box-shadow:none!important; }
.slide img { width: 100%; }
.heading {font-size: 18px;line-height: 26px;font-weight: bold;color: #00174d;}
.heading-line { font-size: 24px; color: #00174d; }
.heading-line20 { font-size: 20px; color: #00174d; }
.heading-line40 { font-size: 40px; color: #00174d; }
.heading-line-top {font-size: 18px;line-height: 21px;padding-bottom: 13px;margin-bottom: 12px;border-bottom: 1px solid #dcd7d7;}
.heading-line2 {font-size: 22px;font-weight: bold;line-height: 26px;color: #00174d;position: relative;margin: 0;margin-bottom: 16px;padding-bottom: 8px;}
.heading-line2:before {border-bottom: 1px solid #ffb511;bottom: 0;left: 0;content: "";position: absolute;width: 50px;border-width: 5px;border-radius: 999px;}
.heading-line3 {font-size: 40px;font-weight: bold;line-height: 26px;color: #00174d;position: relative;margin: 0;margin-bottom: 30px;padding-bottom: 8px;}
.heading-line3:before {border-bottom: 1px solid #ffb511;bottom: -10px;left: 0;content: "";position: absolute;width: 100px;border-width: 5px;border-radius: 999px;}
.heading-line-cow { color:#fff; font-size: 30px; }
.detail-content img{ max-width: 100%; margin-bottom: 15px; }
.banner img,img.banner { width: 100%; }
.title.line {font-size: 24px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;text-align: center;color: #00174d;position: relative;padding: 15px 0;text-align: left!important;background-color: #ffffff;border-bottom: none!important;}
.title.line:after {content: "";position: absolute;border-bottom: 4px solid #d6dde1;width: 100%;left: 0;top: calc(50% - 2px);}
.title.line>h2, .title.line>span {padding: 0 24px;background-color: #ffffff;z-index: 1;position: relative;display: inline-block;}
.title.line>h2 {font-size: 24px;margin-left: 50px;}
.line.title>.btn {z-index: 2;position: relative;float: right;top: 4px;}
.main-footer { margin-top: 30px; }

.card-custom {border: 1px solid rgba(255, 255, 255, 0.125); box-shadow: 0 0 10px rgb(0 0 0 / 10%);}
.card-itmes { border-radius: 10px; /*border: 1px solid rgba(255, 255, 255, 0.125);*/ box-shadow: 0 4px 6px rgb(0 0 0 / 10%); }
.card-itmes .subjecttitle {margin: 0;line-height: 26px;height:55px;word-break: break-word;font-size: 16px;font-weight: 700;letter-spacing: 0.003em;max-width: initial;color: rgb(29, 52, 97);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden; }
.card-itmes .subjecttitle2 {margin: 0;line-height: 26px;word-break: break-word;font-size: 16px;font-weight: 700;letter-spacing: 0.003em;max-width: initial;color: rgb(29, 52, 97);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden; }
.card-itmes .badges {font-size: 12px;border: 1px solid #fff;border-radius: 5px;display: inline-block;text-align: center;padding: 2px 4px;}
.card-itmes .badges:last-child { margin-left: 3px; }
.card-itmes .badges-primary { border: 1px solid #435b92;color: #435b92; }
.card-itmes .badges-danger { border: 1px solid #dc3545;color: #dc3545; }
.card-itmes .badges-warning { border: 1px solid #ffc107;color: #ffc107; }
.card-itmes .price {font-weight: bold;font-size: 18px;color: #00174d;}
.card-itmes .card-img-top-product {width: 100%;height: 12vw;object-fit: cover;}
.card-itmes2 .card-img-top-product {width: 100%;height: 9vw;object-fit: cover;}
.news-itmes { border-radius: 10px; box-shadow: 0 4px 6px rgb(0 0 0 / 10%); }
.news-itmes .subjecttitle {margin: 0;line-height: 26px;height:55px;word-break: break-word;font-size: 16px;font-weight: 700;letter-spacing: 0.003em;max-width: initial;color: rgb(29, 52, 97);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden; }
.news-itmes .news-img-top {width: 100%;height: 9vw;object-fit: cover;}
.download-itmes { border-radius: 10px; box-shadow: 0 4px 6px rgb(0 0 0 / 10%); }
.download-itmes .subjecttitle {margin: 0;line-height: 26px;height:25px;word-break: break-word;font-size: 16px;font-weight: 700;letter-spacing: 0.003em;max-width: initial;color: rgb(29, 52, 97);display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden; }
.download-itmes .download-img-top {width: 100%;height: 15vw;object-fit: cover;}
.service-type { text-align: center; }
.service-type img{ height: 150px; }
.service-type .title { font-size: 22px; font-weight: bold; }
.service-type .des { font-size: 14px; }
.sidebar {padding: 0 16px;border: 1px solid #ebebeb;margin-bottom: 30px;position: relative; -webkit-box-shadow: 0 4px 10px rgb(0 0 0 / 15%);box-shadow: 0 4px 10px rgb(0 0 0 / 15%); min-height: 200px; padding: 12px; background-color:#fff;}
.facebook-icon { font-size: 25px; color:#fff; }
.email-icon { font-size: 25px; color:#fff; }
.our_partner_bg { background-image: url('../images/banner-bg.jpg');background-position: center center;background-repeat: no-repeat;background-size: cover; }
.section-contact-bg { background-image: url('../images/banner-bg2.jpg');background-position: center center;background-repeat: no-repeat;background-size: cover; }
.section-contact { background-image: url('../images/contact-bg.jpg');background-position: center center;background-repeat: no-repeat;background-size: cover; }
.section-contact .section-contact-sub { padding: 15px 10px; min-height: 45vh; text-align: center; }
.section-contact .section-contact-sub h1 { font-size: 50px; color:#fff; text-transform: uppercase; font-weight: bold; }
.contact-box { padding: 30px 20px; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 25%); border:0; text-align: center; }
.contact-line-box1 { position:relative;left:60px; }
.contact-line-box1-1 { position:relative;left:30px; }
.contact-line-box2 { position:relative;left:125px; }
.section-contact-h { padding: 40px 10px; min-height: 45vh; }
.contact-from { color:#fff; }
.section-aboutus { background-image: url('../images/aboutus-bg.jpg');background-position: center center;background-repeat: no-repeat;background-size: cover; }
.section-aboutus .section-aboutus-sub { padding: 15px 10px; min-height: 45vh; text-align: center; }
.section-aboutus .section-aboutus-sub h1 { font-size: 50px; color:#fff; text-transform: uppercase; font-weight: bold; }
.section-technical { background-image: url('../images/technical-bg.jpg');background-position: center center;background-repeat: no-repeat;background-size: cover; }
.section-technical .section-technical-sub { padding: 15px 10px; min-height: 45vh; text-align: center; }
.section-technical .section-technical-sub h1 { font-size: 50px; color:#fff; text-transform: uppercase; font-weight: bold; }
.section-terms { background-image: url('../images/terms-bg.jpg');background-position: center center;background-repeat: no-repeat;background-size: cover; }
.section-terms .section-terms-sub { padding: 15px 10px; min-height: 45vh; text-align: center; }
.section-terms .section-terms-sub h1 { font-size: 50px; color:#fff; text-transform: uppercase; font-weight: bold; }
.container-sub {color: #333; font-size: 14px;}
.container-sub a { color: #333; text-decoration: none;  }
.container-sub .title { font-weight: bold;font-size: 18px;line-height: 21px;margin: 0;padding: 0 0 19px 0;border-bottom: 1px solid #dddddd; margin-bottom: 15px; }
.container-sub ul { list-style: none; margin-top: 0; padding: 0; }
.container-sub ul li {position: relative;padding-left: 20px; line-height: 25px;}
.container-sub ul li::before {content: "➤";font-family: fontello;color: rgb(13, 114, 247);position: absolute;transform: translate(0px, -50%);top: 50%;left: 0px;}
.containerflex { margin: auto;letter-spacing: 1px;display: flex;justify-content: space-between;-webkit-justify-content: space-between;font-weight: 300;}
.section-copyright {color: #888;font-size: 12px;}
.section-copyright-sub { padding-top: 15px; padding-bottom: 15px; margin-top: 30px; border-top: 4px solid #cfdfe8; }
.detail-title {font-size: 22px;line-height: 26px;color: #000;margin-bottom: 18px;}
.detail-image-slide { width: 100%; background-color: #333; min-height: 300px; }
.detail-image-slide img{ width: 100%; }
.detail-group-price { font-size: 14px; }
.detail-group-price .price { font-size: 22px;font-weight: bold;color: #00174d; }
.detail-group-price .price-old { font-size: 16px;text-decoration-line: line-through;-webkit-text-decoration-line: line-through;color: #999; }
.detail-group-price .text-downpayment {font-size: 14px;color: #999;}
.detail-group-inline .txt {font-size: 13px;line-height: 15px;margin-right: 14px;padding: 0 !important;margin-bottom: 15px;color: #999;}
.detail-box-warn {margin-top: 10px;margin-bottom: 12px;background: rgba(255,77,0,.05);padding: 13px 12px 10px 12px;}
.detail-box-warn .heading {margin-bottom: 13px;margin-top: 0;font-size: 18px;font-weight: bold;}
.detail-box-warn .desc {line-height: 20px;}
.table-responsive .dropdown {position: static !important;}
.notfound-wrapper { text-align: center; }
.container-box {padding: 20px 20px 20px 20px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.circle-box {padding: 5px 15px 7px 15px;color: #fff;background: #c70000;-moz-border-radius: 70px;-webkit-border-radius: 70px;border-radius: 70px;vertical-align: middle;}

.activemenu { color: #0d6efd !important; }

@media (max-width: 992px) {
    .card-itmes .card-img-top-product {height: 24vw;}
    .modal-lg-20 {max-width: 80%;}
	.modal-lg-30 {max-width: 80%;}
	.modal-lg-50 {max-width: 80%;}
	.modal-lg-60 {max-width: 80%;}
}
@media (max-width: 768px) {
    .card-itmes .card-img-top-product {height: 30vw;}
	.container-sub .title { padding: 15px 0 5px 0;margin-bottom: 5px; margin-top: 15px; border-top: 1px solid #dddddd; border-bottom: 1px solid #fff; }
	.container-sub ul { margin-bottom: 0; }
}
@media (max-width: 612px){
    .modal-lg-20 {max-width: 95%;}
	.modal-lg-30 {max-width: 95%;}
	.modal-lg-50 {max-width: 95%;}
	.modal-lg-60 {max-width: 95%;}
	.modal-lg-70 {max-width: 95%;}
	.modal-lg-80 {max-width: 95%;}
}
@media (max-width: 576px) {
    body, html { padding-top: 63px!important; }
    .title.line>h2 {font-size: 20px;margin-left: 15px;}
    .navbar-custom .logo img {max-height: 50px!important;}
    .news-itmes .news-img-top {height: 28vw;}
    .download-itmes .download-img-top {height: 50vw;}
}