:root{
      --primary: #1f4e79;
      --accent: #ff9800;
      --success: #2e7d32;
      --bg: #ffffff;
      --muted: #f2f4f7;
      --text: #0b1b2b;
      --card-shadow: 0 6px 18px rgba(31,78,121,0.08);
      --radius: 10px;
      --max-width: 1200px;
      --gap: 24px;
    }
    *{box-sizing:border-box}
    html,body{}
	button { font-family: inherit; /* ใช้ฟอนต์เดียวกับ parent */ font-size: inherit; /* ใช้ขนาดเดียวกับ parent */ }
    body{
      margin:0;
	   font-family:'kanit', sans-serif;
     /* font-family: "kanit", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;*/
      color:var(--text);
     background:linear-gradient(180deg,#fbfdff 0%, #f7fbff 100%);
	  /*background:#ccc;*/
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
	 
    }

	header {width: 100%;background: #f5f5f5;box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: fixed; top: 0; left: 0;z-index: 1000; }
	.header-container { max-width: 1200px; margin: auto;display: flex; align-items: center;justify-content: space-between;padding: 10px 20px;}
	.logo img {width: 200px;height: 66px;object-fit: contain; }

	nav { display: flex; gap: 20px;}
	nav a {text-decoration: none; color: #333;font-weight: bold;padding: 8px 12px;border-radius: 4px; transition: all 0.3s ease;}
	nav a:hover {background: #ff9800; color: #fff;}
	.menu-toggle { display: none;flex-direction: column;cursor: pointer; }
	.menu-toggle span { height: 3px; width: 25px;background: #333; margin: 4px 0; transition: 0.3s;}
    
    .cta{
      background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700;
      box-shadow:0 6px 18px rgba(255,152,0,0.18);
    }
	.btn{ background:#fff;color:#000;text-decoration:none;padding:10px 16px;margin-top:10px;}
	.btn:hover{ background:var(--accent);color:#fff;text-decoration:none;}
	
	/* Banner */
	.hero-gallery{margin:20px 0;margin-top:120px;}
	.hero-gallery img{border-radius:12px;width:100%;height:auto;}

    /* Hero */
	main{max-width:var(--max-width);margin:32px auto;padding:0 20px;border:0px solid #000;}
    .hero{
      background:linear-gradient(90deg, rgba(31,78,121,0.1), rgba(46,125,50,0.1));
      border-radius:16px;padding:36px;display:grid;grid-template-columns:1fr;gap:24px;align-items:center;box-shadow:var(--card-shadow);
    }

    .hero h1{margin:0;font-size:28px;color:var(--primary);}
	.hero h2{margin:12px 0 18px;font-size:24px;color:#333;}
    .hero p{margin:12px 0 18px;color:#555}
    .hero {text-align:center;}
	.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
	.hero-contact{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
    .btn-primary{background:var(--primary);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;}
    .btn-outline{border:2px solid var(--primary);color:var(--primary);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;background:transparent}
    .hero-card{background:#fff;
      border-radius:12px;padding:2px;box-shadow:var(--card-shadow);
    }
	.herosub-text{text-align:center;color:#1f4e79;font-size:16px;margin-top:40px;}
	
	/* logo-slider */
	.logo-slider{ background:#f7f9fc;overflow:hidden;text-align:center;padding:60px 20px;}
	.slider-container{max-width:1200px;overflow:hidden;position:relative;margin:0 auto;}
	.slider-track{ display:flex;width:max-content;animation:scroll 40s linear infinite;}
	.slider-track:hover{animation-play-state:paused;cursor:pointer;}
	.slide{width:300px;height:220px;display:flex;align-items:center;justify-content:center;padding:0 10px;}
	.slide img{border:0px solid #003366;background:#fbfbfb;width:100%;height:auto;border-radius:8px;filter:grayscale(30%);transition:0.3s;}
	.slide img:hover{filter:grayscale(0%);transform:scale(1.05);}
	@keyframes scroll{ 0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
	
	/* Modal */
	.modal {display: none;position: fixed;z-index: 1000;padding-top: 60px;left: 0;top: 0;width: 100%;
		height: 100%;overflow: hidden;backdrop-filter: blur(6px);background-color: rgba(0,0,0,0.6);}
	.modal-content {margin: auto;display: block;max-width: 80%;border-radius: 10px;box-shadow: 0 6px 16px rgba(0,0,0,0.3);border:0px solid #fff;}

	#caption {margin: 20px auto;text-align: center;color: #fff;font-size: 18px;max-width: 80%;}
	.close {position: absolute;top: 20px;right: 35px;color: #fff;font-size: 40px;font-weight: bold;cursor: pointer;}
	.close:hover { color: #ffd700; }

	/* ลูกศรใน modal */
	.arrow {position: absolute;top: 30%;font-size: 40px;color: #fff;cursor: pointer; padding: 10px;user-select: none;}
	.arrow.left { left: 20px; }
	.arrow.right { right: 20px; }
	.arrow:hover { color: #ffd700; }
	
	.contact{display:grid;grid-template-columns:1fr 760px;gap:18px;margin-top:12px}
    .contact-line{display:flex;flex-direction:column;gap:8px}
    .contact-line .phone{font-weight:800;color:var(--primary);font-size:20px;}
    .small{font-size:15px;color:#6b7b8f}

    /* Sections */
    section{margin-top:28px;max-width:var(--max-width);margin:32px auto;padding:0 20px;border:0px solid #000;}
    .grid{display:grid;gap:var(--gap);}
	.grid-ground{background-color:#edd081;}
	
	/*service*/
    .services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
    .card{background:#fff;padding:18px;border-radius:12px;box-shadow:var(--card-shadow);}
    .icon{
      width:56px;height:56px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;margin-bottom:12px;
    }
	.icon img{ width:80px;height:80px;}
    .areas{display:flex;gap:12px;flex-wrap:wrap}
    .area{background:var(--muted);padding:10px 14px;border-radius:8px;font-weight:700;color:var(--primary)}

    /* Testimonials */
    .testimonials{display:grid;grid-template-columns:1fr;gap:12px}
    .testimonial{background:linear-gradient(180deg,#fff,#fbfdff);padding:16px;border-radius:12px;border-left:4px solid var(--primary)}
    .meta{display:flex;gap:12px;align-items:center}
    .avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#90caf9,#1f4e79);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

    /* Promo */
    .promo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border-radius:12px;background:linear-gradient(90deg,#fff7ed,#fff);border:1px solid rgba(255,152,0,0.08)}
    .promo .left{display:flex;flex-direction:column;gap:6px}
    .badge{background:var(--success);color:#fff;padding:6px 10px;border-radius:8px;font-weight:700}
	
	.ilink a {color:#fff;text-decoration:none;}
	.ilink a:hover{color:#ff6600;}
	
    /* Menu Tab */
    .tabs {display: flex; border-bottom: 2px solid #1f4e79; margin-bottom: 20px;}
    .tab { flex: 1;text-align: center; padding: 10px;cursor: pointer;background: #f7fbff;color: #1f4e79;font-weight: bold;
		transition: background 0.3s; border-radius: 8px 8px  0 0;}
    .tab:hover {background: #dce9f7;}
    .tab.active { background: #ff9800;color: #fff; }

    /* เContent Tab */
	.tab-content-prof{border-radius:16px;padding:20px;
		background:linear-gradient(90deg, rgba(31,78,121,0.1), rgba(46,125,50,0.1));box-shadow:var(--card-shadow);}
    .tab-content { display: none;padding: 10px;border-radius: 8px;}
    .tab-content.active {display: block; }

    /* color pastel */
    .termite { /*background: #d9ead3; */}      /* กำจัดปลวก */
    .pipe {  /*background: #cfe2f3;*/ }         /* วางท่อกันปลวก */
   /* .insect { background: #fce5cd; }       /* กำจัดแมลงรบกวน */
   /* .service { background: #e2f0d9; }      /* บริการหลังการขาย */

    /* Grid gallery*/
    .gallery { display: flex; flex-wrap: wrap; gap: 15px;}
    .card-tab { background: #fff;border-radius: 8px;border:1px solid #fff;box-shadow: 0 2px 5px rgba(0,0,0,0.1);overflow: hidden;display: flex;flex-direction: column;}
	.gallery .card-tab {width: calc(33.333% - 10px); }
    .card-tab img { width: 100%; height: auto; object-fit: cover; }
    .card-content { padding: 10px; }
    .card-content h4 {margin: 5px 0;color: #1f4e79;}
    .card-content p {margin: 5px 0; font-size: 14px; color: #333;}
    .card-content .date {font-size: 14px; color: #666; }
    .card-content button { font-size:14px;margin-top: 10px; padding: 6px 12px; background: #1f4e79; color: #fff; border: none; border-radius: 4px; cursor: pointer;}
    .card-content button:hover { background: #163a5a; }
	.standard img{ height:110px; width:140px;}
	.profile-messbox-container{display:flex;flex-direction:row;gap:60px;justify-content:center;border:0px solid #ddd;
		border-radius:8px;background:linear-gradient(90deg, rgba(31,78,121,0.1), rgba(46,125,50,0.1));padding:20px 0;}
	.profile-messbox select{padding:10px;font-size:16px;border-radius:4px;font-family:'kanit', sans-serif;}
	.profile-messbox{margin-bottom:10px;text-align:right;}
	.card-tabtext {border:0px solid #fff;overflow: hidden;display: flex;flex-direction: column;margin-bottom:40px;}
	.card-tabtext h3{border:0px solid #000;margin:1px;}
	.card-tabtext h2{border:0px solid #000;margin:1px;color:var(--primary);}
	.card-tabtext p{margin:1px;border:0px solid #000;color:#333;}
	
	
	/* float Icon line*/
		.floating-icons{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:998;}
	.floating-icons a{display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;
		background-color:#00c300;color:white;font-size:24px;text-decoration:none;box-shadow:0 4px 6px rgba(0,0,0,0.2);
		transition:transform 0.2s,background-color:0.2s;}
	.floating-icons a:hover {transform:scale(1:1);}
	.floating-icons a.back-to-top{font-size:16px;background-color:#333;}

	/* QR Code */
    .btnline {
      background-color: #28a745; color: #fff;border: none;padding: 10px 20px;margin: 10px;border-radius: 6px;
	  cursor: pointer;}
    .btnline:hover { background-color: #1e7e34; }
    .iconline { font-size: 32px;cursor: pointer;margin: 10px; }
    .modalline { display: none;position: fixed;z-index: 1000; left: 0;top: 0; width: 100%; height: 100%;
		background-color: rgba(0,0,0,0.5);}
    .modalline-content { background-color: #fff; margin: 10% auto; padding: 20px; border-radius: 8px;width: 300px; text-align: center; }
    .modalline-content h3 {  margin-top: 0;}

    .modalline-content img { width: 100px;  height: 100px; margin: 10px 0; }
    .close-btnline {background-color: #007BFF; color: #fff; border: none; padding: 10px 20px; border-radius: 6px;
		cursor: pointer;}
    .close-btnline:hover { background-color: #0056b3; }
	
	 footer { background: #1f4e79;color: #fff; padding: 40px 20px 20px;}
	.footer-container {max-width: 1200px; margin: auto;display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
	.footer-container h3 {margin-bottom: 15px;color: #ff9800; }
	.footer-container p, 
	.footer-container a {color: #fff;font-size: 16px; line-height: 1.6;}
	.footer-links ul { list-style: none;padding: 0; }
	.footer-links li { margin-bottom: 8px;}
	.footer-links a { text-decoration: none;transition: color 0.3s;}
	.footer-links a:hover { color: #ff9800;}
	.footer-btn {background: #ff9800; color: #fff;border: none; padding: 10px 20px;border-radius: 4px;cursor: pointer; transition: background 0.3s; }
	.footer-btn:hover { background: #e68900;}
	.footer-bottom {text-align: center; margin-top: 30px; font-size: 13px;border-top: 1px solid rgba(255,255,255,0.2);padding-top: 15px;}
	.footer-line img{ border:4px solid #fff;border-radius:4px;}
 
	.mySlides {display: none;}
	img {vertical-align: middle;}

	.slideshow-container {position: relative; margin: auto;}
	.text {color: #f2f2f2; font-size: 15px;padding: 8px 12px; position: absolute; bottom: 8px;width: 100%; text-align: center;}
	.numbertext {color: #f2f2f2; font-size: 12px;padding: 8px 12px;position: absolute; top: 0;}
	.dot{ height: 15px; width: 15px; margin: 0 2px;background-color: #bbb; border-radius: 50%;display: inline-block; transition: background-color 0.6s ease;}
	.active1 {background-color: #717171;}
	.fade {animation-name: fade; animation-duration: 1.5s;}
	@keyframes fade { from {opacity: .4}  to {opacity: 1}}
	
	.gallery-profile {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
    .gallery-profile img { width: 100%; height: auto; transition: transform 0.3s ease; cursor: pointer;border-radius:6px; }
    .gallery-profile img:hover { transform: scale(1.05); }
    /* Lightbox */
    .lightbox { display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(0,0,0,0.8);justify-content: center;align-items: center; }
    .lightbox img { max-width: 90%;  max-height: 80%; }
    .close, .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2em; color: white; 
		cursor: pointer; user-select: none; }
    .close { top: 20px; right: 30px; transform: none; }
    .prev { left: 30px; }
    .next { right: 30px; }

	/* On smaller screens, decrease text size */
	@media only screen and (max-width: 300px) {
		.text {font-size: 11px}
	}
	 
    /* Responsive */
    @media (max-width:880px){
      .hero{grid-template-columns:1fr; padding:20px}
      .hero-card{order:2}
      .header-grid{flex-direction:column;align-items:flex-start;gap:10px}
      footer{flex-direction:column;align-items:flex-start}
	  .profile-messbox-container{flex-direction:column;align-items:right;gap:10px;padding:20px ;}
	  .profile-messbox select{width:100%;}
    }
	
    /* Responsive Tab */
    @media (max-width: 768px) {
     .gallery .card-tab { width: calc(50% - 10px); }
    }
	
    @media (max-width: 600px) {
     .gallery .card-tab {  width: 100%; }
	 .contact{grid-template-columns:1fr}
	 .standard img{ height:80px; width:100px;}
	 .hero-gallery{margin-top:120px;}
	 .herosub-text{font-size:12px;}
	 .logo-header img{ width:150px;height:50px;}
    }
	
	@media (max-width: 768px) {
		nav { position: absolute; top: 90px;left: 0;right: 0; background: #f5f5f5;flex-direction: column; align-items: center;
			display: none;}
		nav a { width: 100%;text-align: center;border-radius: 0px;}
		nav.active {display: flex;}
		.menu-toggle {display: flex;}
	   }

	 @media (max-width: 768px) {
		.footer-container { flex-direction: column;align-items: center;text-align: center; }
	}