html{filter:grayscale(0%);}
body{margin:0px;box-sizing:border-box;font-family: 'Sarabun', sans-serif;background: #f3f4f6;}
section {}
/*section.hili{background-color:#E6E8EC;padding:20px;}
.block{padding:40px;border:2px solid #cc0033;border-radius:6px;background-color:#FFDBDB; color:#293C58;}
section.top {background-color:#f9f9fa;  }
section.mid {background-color:#F1F3F5; }
section.low {background-color:#FAFAFA;  }
.column{float:left;margin-bottom:10px;}
.column.center{width:63%;padding-top:10px;}
.column.aside{width:37%}
.row:after {content: "";display: table;clear: both;}
.pslide {width:100%;max-width: 713px;height:auto;display: block;margin-left: auto;margin-right: auto; }
.sins{float:left;border:1px solid #ffffff;margin:5px;padding-top:10px;width:15%;background-color:#ffffff;border-radius: 4px;}
.sins img{width:80px;background-color:#ffffff;border-radius: 4px;padding: 5px;}
.ins{text-align:center;}*/

/* ----------------------------------------------------------------------------- */

/*main { background: #f3f4f6;margin: 0 auto;display: flex;justify-content: center;margin-top:15px;}*/
main { background: #f3f4f6;margin: 0 auto;display: flex;justify-content: center;margin-top:15px;}
.main-container {margin-bottom:60px;max-width: 1250px;display: flex;  border:0px solid #000;}
.main-left {flex:3; width:900px; margin-right:30px;border:0px solid #000; }
/*.main-left {flex:3; width:70%; margin-right:30px;border:0px solid #000; }*/
.main-right { flex:1;width:400px; border:0px solid #000; } 
/*.main-right { flex:1;width:30%; border:0px solid #000; }*/
	.main-left{margin:0 10px;}
	.main-right{margin:0 10px;}
	
/*.menu{width:100%;margin-top:20px; border:1px solid #000;}
.smenu{background-color:#fff;  border:1px solid #ddd;border-radius:4px;color:#000;padding: 12px 20px;text-align:left;
	text-decoration: none;font-size: 16px;cursor: pointer;display: block;margin-bottom:10px;}
.smenu:hover {border-left: 4px solid #ee1c25; }
.smenu img{width:24px;vertical-align:middle;}*/

.section-hero { width: 100%;height: 300px;position: relative;margin: 20px auto;border-radius: 8px;overflow: hidden;   
	border:0px solid #000; padding-right:20px;}
.section-hero img {width: 100%; height: auto;object-fit: cover; display: block;border-radius:8px;}
.text-overlay {position: absolute;bottom: 20px;left: 20px;color: #fff;font-size: 20px;line-height: 1.4;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.7);}
	
.hero {height: 300px;position: relative;background: url('../images/photomtban.jpg') center/cover no-repeat;
	overflow: hidden; transition: background-size 0.5s ease;background-size: 100%;border-radius:8px;}
.hero::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 30%; 
	background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(255,255,255,0));}
.hero:hover {background-size: 110%; }
.hero-text {position: absolute;bottom: 20px;left: 20px;color: white;z-index: 1; }
.hero-text h1 {margin: 0;font-size: 1.8rem;}
.hero-text p {margin: 5px 0 0;font-size: 1.2rem;}	
	
.container-text {border: 1px solid #ccc;background-color: #eff6ff; padding: 20px; display: flex;align-items: flex-start;
      max-width: 100%; margin-top: 30px ; border-radius: 8px;}
.text-section { flex: 1;}
.text-section h2 { margin-top: 0;color: #333; }
.text-section p {font-size:14px;color: #374151;line-height: 1.5;}
.image-section {  margin-left: 20px; }
.image-section img { max-width: 150px; border-radius: 6px;}
	
nav {   position: sticky;  top: 0;
  overflow: hidden; z-index: 1000;  }
.topnav {overflow: hidden;}
.topnav a { float: left;color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;
	align-items:center;cursor:pointer;}
.topnav a:hover { background-color: #ee1c25;font-size: 18px}
.topnav a.active {background-color: #ee1c25;color:#fff;}
.topnav a.active2 {background-color: #b91c1c;color:#fff;}
.topnav a.active-right {background-color: #ee1c25;color:#fff;}
.topnav-right { float: right;}
.topnav .icon {display: none;}
.topnav .icon1 {display: block;}
.topnav .icon2 {display: none;}
nav{background-color: #1f2937;}
.nav-container {max-width: 1250px;margin: 0 auto;}

header {background-color: #ffffff;  width: 100%;border-bottom: 1px solid #e5e7eb;}
.header-container { max-width: 1250px;  margin: 0 auto;     padding: 10px; display: flex; flex-wrap: wrap;justify-content: space-between;
	align-items: center; }

.header-left {display: flex; align-items: center;  gap: 10px;flex: 1 1 300px; }
.logo {align-items:center; background-color: #fff; border-radius: 0px; border:0px solid #000;}
.logo img{ width: 70px; height: 70px;border:0px solid #000;}
.company-info { display: flex;flex-direction: column;justify-content: center; }
.company-info h1 { margin: 0; font-size: 30px; color: #003399; }
.company-info p {margin: 5px 0 0; font-size: 14px;color: #6b7280; }

.header-right { display: flex;flex-direction: column;align-items: flex-end;flex: 1 1 300px; gap: 8px; }
.contact-item { display: flex; align-items: center;gap: 8px;font-size: 14px;color: #374151;}
.contact-item span.icon {width: 10px; height: 10px; background-color: #fff;color: #fff;border-radius:0px;
      display: flex;align-items: center;justify-content: center; font-size: 12px;}
.icon img{ width:20px;height:20px;}

service {display: flex;justify-content: center; align-items: center;  background: #f5f5f5; }
.service-text{ margin:20px 0 10px  0;font-size:18px;font-weight:700;padding:5px 12px;border-left:5px solid #ee1c25;
			boder:0px solid #000; }
/*.service-container {width:100%;display: flex;gap:23px; border:0px solid #000;} */
/*.service-container { display: flex;flex-direction: row;gap:20px;}*/
.service-container{display: flex;flex-wrap: wrap;gap:20px;}
/*.service-box { flex: 0 0 170px;  background: #fff;border: 1px solid #dddddd;text-align: center; padding: 20px;transition: all 0.3s ease;} */
	/*.service-box{width:100%;border: 1px solid #ddd;text-align: center;background: #fff;padding: 20px;}*/
.service-box{flex:15%;background-color: #fff;padding: 10px; text-align: center;  border:1px solid #ddd;transition: all 0.3s ease;}
.service-box:hover {border-top: 4px solid #ee1c25;box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.service-icon {font-size: 40px;margin-bottom: 15px; }
.service-icon img{ width:50px;height:41px;}
.service-title {font-size: 14px;font-weight: bold;margin-bottom: 10px;}
.service-description { font-size: 12px; color: #7e7280;}

aside {width:100%;padding: 0px;margin-top:20px; border:0px solid #000; }
.search-section { margin-bottom: 20px; }
.search-section h3 { margin: 0 0 10px 0; font-size: 16px;}
.search-box {display: flex;width: 100%;height: 40px;}
.search-box input {flex: 1;border: 1px solid #d1d5db; outline: none;padding: 0 10px;border-radius: 5px 0 0 5px;
	font-size: 16px;}
.icon-box {background-color: #4b5563;display: flex;align-items: center;justify-content: center; width: 40px;
	border-radius: 0 5px 5px 0;cursor: pointer;}
.icon-box img {width: 20px;height: 20px;object-fit: contain;}
.tab { display: flex;align-items: center;padding: 10px; margin-bottom: 10px; border-radius: 5px;color: #fff;cursor:pointer;
		height:30px;position: relative;transition: background-color 0.3s;}
.tab i { margin-right: 10px; }
.tab::before { content: ""; position: absolute; left: 0;top: 0; bottom: 0;width: 5px; background-color: transparent;
      border-radius: 5px 0 0 5px; transition: background-color 0.3s;}
.tab-img{width:24px;height:20px; padding:10px;}
.tab.red {background-color: #ee1c25; }
.tab.blue {background-color: #003399;}
.tab.gray { background-color: #4a5568;}
.tab.red:hover { background-color: #b71c1c; }
.tab.blue:hover { background-color: #0d47a1;font-size:18px } 
.tab.gray:hover { background-color: #ee1c25;font-size:18px } /*#003399  */
.tab:hover::before { background-color: #e53935;}
.ad-box { margin-top: 20px;background-color: #e5e7eb; border: 1px solid #9e9e9e;border-radius: 0px;text-align: center;
      padding: 30px 10px;color: #333;height:100px;}

.circle-section { display: flex;justify-content: center;background-color:#fff; }
/*.circle-container{ display:flex;flex-wrap:wrap;gap:20px;}*/
.circle-container {width:1200px;display: flex;flex-wrap:wrap; gap:40px;} 
.box { flex: 0 0 130px; background: #fff; border: 0px solid #ccc; text-align: center;padding:40px 12px ;transition: all 0.3s ease;}

/*.box{flex:10%;text-align: center;padding:40px 12px ;}*/
.icon-circle img{width:70px;height:70px;}
.icon-circle { width: 40px;height: 40px;margin: 0 auto 15px;border-radius: 50%; background: #4b5563; display: flex;justify-content: center;
      align-items: center;font-size: 36px;color: blue;transition: color 0.3s ease;}
.icon-circle:hover { color:#fff; background: #fff; }
.title { font-size: 14px; font-weight: none;margin-top: 20px;}

footer { background-color: #1f2937; color: #fff; width: 100%;}
.footer-container {max-width: 1250px;  margin: 0 auto; padding: 20px; display: flex; flex-direction: column;}
.footer-top {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px;}
.footer-left { flex: 1 1 300px; margin-bottom: 20px; }
.footer-left h2 { margin: 0 0 10px;font-size: 20px;}
.footer-left p { margin: 5px 0; font-size: 14px;color:#9ca3af; }
.footer-right { flex: 1 1 300px; display: flex;flex-direction: column; align-items: flex-end; justify-content: center;}
.social-icons { display: flex; gap: 15px;margin-bottom: 10px;}
.social-icons a { width: 40px;height: 40px; background-color: #374151;border-radius: 50%;display: flex; align-items: center;
      justify-content: center; color: #fff;text-decoration: none;font-size: 18px;transition: background-color 0.3s;}
.social-icons a:hover { background-color: #4b5563; }
.copyright { font-size: 14px; text-align: right; color:#9ca3af; }

/* ---- end up css ------ 
@media screen and (max-width: 400px) {
body{font-size:14px;}
header h1{	font-size:26px;}
.sins{width:45%;}
footer p{font-size:12px;}
}

@media (max-width: 768px) {
	.company-info h1 {font-size: 24px;}
	.company-info p {font-size: 12px;}
	.service-container{display:flex;flex-wrap:wrap;gap:20px;}
	.service-box{flex:1 1 calc(33.33%-20px);border:0px solid #000;}
}*/

@media screen and (max-width: 1100px) {
	/*.service-container{display:flex;flex-wrap:wrap;gap:10px;}*/
main { background: #f3f4f6;margin: 0 auto;display: flex;justify-content: center;margin-top:15px;}
.main-container {margin-bottom:60px;max-width: 1100px;display: flex;  border:0px solid #000;}
.main-left {flex:3; width:700px; margin-right:30px;border:0px solid #000; }
.main-right { flex:1;width:300px; border:0px solid #000; } 
	.main-left{margin:0 10px;}
	.main-right{margin:0 10px;}
	
/*.main-right { flex:1;width:30%; border:0px solid #000; }*/
/*.main-container {max-width: 1024px;}
.main-left {flex:3; width:600px; }
.main-right { flex:1;width:200px; }*/
 .logo-grid {
    grid-template-columns: repeat(6, 1fr);
  }

}

@media screen and (max-width: 800px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon { float: right;display: block; }
.topnav-right {display: none;}
.topnav.responsive {position: relative;}
.topnav.responsive .icon { position: absolute; right: 0; top: 0;}
.topnav.responsive a { float: none; display: block;text-align: left;}
	
footer{font-size:14px;}
main{display:block;}
.main-container{flex-direction:column;padding:20px;}
.main-left,.main-right{flex:none;width:100%;border:0px solid #000;margin:0 auto;}
aside{width:100%;}
	.circle-container{display:flex;flex-wrap:wrap;gap:20px;}
	.service-container{display:flex;flex-wrap:wrap;gap:10px;}
	.service-box{flex:45%;}
}

@media screen and (max-width: 600px) {
	.container-text{flex-direction:column;}
	.circle-container{display:flex;flex-wrap:wrap;gap:10px;justify-content: center;}
	/*.service-container{display:flex;flex-wrap:wrap;gap:10px;}
	.service-box{flex:1 1 calc(33.33%-20px);}*/
	/*.service-container{ flex-direction: column;}*/
}
@media screen and (max-width: 400px) {
	.company-info h1 {  font-size: 26px;}
	.service-container{flex-direction:column;}
	 
}