@charset "UTF-8";
/* CSS Document */ 
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');

html {font-size: 16px; background: #ffffff;}

.lang-en body {font-family: "Roboto", sans-serif; font-size: 0.825rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.8; color: #474747;}
.lang-en h1 {font-family: "Lato", sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: 0.03em; color: #000;}
.lang-en h2 {font-family: "Lato", sans-serif; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.03em; color: #000;}
.lang-en h3 {font-size: 1.375rem; font-weight: 700;} 
.lang-en h4 {font-size: 1rem; font-weight: 600; line-height: 1.6;}   

.lang-th body {font-family: "Roboto", "Noto Sans Thai", sans-serif!important; font-size: 0.825rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.8; color: #474747;}
.lang-th h1 {font-family: "Roboto", "Noto Sans Thai", sans-serif!important; font-size: 2rem; font-weight: 700; letter-spacing: 0.03em; color: #000;}
.lang-th h2 {font-family: "Roboto", "Noto Sans Thai", sans-serif!important; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.03em; color: #000;}
.lang-th h3 {font-size: 1.375rem; font-weight: 700;} 
.lang-th h4 {font-size: 1rem; font-weight: 600; line-height: 1.6;} 
 
.lang-ja body {font-family: "Roboto", "Kosugi", sans-serif!important; font-size: 0.825rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.8; color: #474747;}
.lang-ja h1 {font-family: "Roboto", "Kosugi", sans-serif!important; font-size: 2rem; font-weight: 700; letter-spacing: 0.03em; color: #000;}
.lang-ja h2 {font-family: "Roboto", "Kosugi", sans-serif!important; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.03em; color: #000;}
.lang-ja h3 {font-size: 1.375rem; font-weight: 700;} 
.lang-ja h4 {font-size: 1rem; font-weight: 600; line-height: 1.6;}   
 
.headline-page h1 {font-family: 'Lato', sans-serif; font-size: 1.725rem; font-weight: 900; letter-spacing: 0.03em;}
.headline-page h5{font-size: 0.875rem!important; margin-top: 15px; margin-bottom: 15px; color: #474747!important;}  

.bg-blue-light{background: #F7F6FA;}
.pill-nav > * > * {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.pill-nav > .uk-active > * {
  width: 28px;
  border-radius: 999px;
  background: #fff;
}
/*tag*/
 a.uk-label.uk-label-secondary {color: #fff; background: #333;}
 a:hover.uk-label.uk-label-secondary {color: #fff; background: #333;}
 .uk-label {margin-bottom: 5px;}

.uk-card .uk-label a{text-decoration: none; color: #fff;}
.uk-card .uk-label a:hover{text-decoration: underline; color: #fff;} 
 
.uk-accordion-title {font-size: 1rem; font-weight: 500; padding:0 0 1rem 0; border-bottom: 1px solid #ddd; position: relative;}   

/* content box */
.uk-accordion-content {background: #F7F6FA; padding: 1.5rem 2rem; margin-top: 0; border: 0; border-top: none; font-size: 0.825rem;} 
.uk-accordion {margin: 0; padding: 0; list-style: none;}  
.loadmore {background: #ACB2BB; color: #fff; border:1px #ACB2BB solid;} 
.blue-dot::before { content: "• ";color: #034EA2;}
 

/* navigator */  
/* ====== HEADER OVER BANNER ====== */
.page-header {top: 0; left: 0; right: 0; z-index: 20; padding:0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent); transition: background 0.3s ease;}
.logo-wrap {position: relative; z-index: 999;}
.logo-default {display: block; height: 45px; width: auto;}
.logo-hover {display: none;  height: 45px; width: auto;} 
 
.page-header .uk-navbar-nav > li > a {color: #fff; transition: all 0.3s ease; font-weight: 400;}
.page-header .uk-navbar-nav > li > a:hover{color: #034EA2!important; font-weight: 400;}
 
.page-header.scrolled {
  background: #fff !important;
  transition: none; /* ไม่มี delay ตอนเปิด search */
}
.page-header:hover::before{content: ""; position: absolute; bottom: 0; right: 0; left: 0; height: 1px; background-color: #e8e8e8;}
/* ====== HOVER / SCROLLED EFFECT ====== */
.page-header:hover,
.page-header.scrolled {background: #fff;}
.page-header.scrolled::before {content: ""; position: absolute; bottom: 0; right: 0; left: 0; height: 1px; background-color: #e8e8e8;}
 
.page-header .uk-navbar-container {background: none;}
.scrollable-dropdown {max-height: 100vh; overflow-y: auto;} 
 
.page-header .uk-navbar-dropdown-width-5 {width: 100%; margin: 0 auto;} 

.page-header:hover .uk-navbar-nav > li > a,
.page-header:hover .uk-icon-link,
.page-header.scrolled .uk-navbar-nav > li > a,
.page-header.scrolled .uk-icon-link {color: #000;}

.page-header:hover .logo-default,
.page-header.scrolled .logo-default {display: none;}

.page-header:hover .logo-hover,
.page-header.scrolled .logo-hover {display: block;} 
 
.page-header h5{color: #000; font-size: 1.125rem!important; font-weight: 600;}
.page-header p{color: #474747; font-size: 0.75rem;}

.page-header .btn-get-started {display: inline-flex; align-items: center; gap: 8px; 
background-color: #1564FF; color: #ffffff; font-weight: 500; border-radius: 999px;
text-decoration: none; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 10px rgba(21, 100, 255, 0.3); text-transform: capitalize;}  
.page-header .btn-get-started:hover {background-color: #004DCC;  color: #ffffff; transform: translateY(-1px);}

.page-header .uk-navbar-toggle.search-button {color: #fff;} 
.page-header:hover .uk-navbar-toggle.search-button,
.page-header.scrolled .uk-navbar-toggle.search-button {color: #000;}  

.page-header .uk-navbar-toggle.search-button-mb {color: #fff;} 
.page-header:hover .uk-navbar-toggle.search-button-mb,
.page-header.scrolled .uk-navbar-toggle.search-button-mb {color: #000;}  
 
.search-box .uk-search-input {background: #fff; border:none; border-bottom: 1px solid #e8e8e8; font-size: 1.2rem; color: #000;} 
.search-box .uk-search-input:focus{border-bottom: 2px solid #2f62f6;} 
.search-sg-links h3 {font-size: 0.725rem; font-weight: 400; color: #aaa;}
.search-sg-links a {font-size: 1rem; color: #000;}
.search-sg-links a:hover {text-decoration: underline; color: #2f62f6;}


.page-header {top: 0; left: 0; right: 0; z-index: 20; padding:0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent); transition: background 0.3s ease;}
.logo-wrap {position: relative; z-index: 999;}
.logo-default {display: block; height: 45px; width: auto;}
.logo-hover {display: none;  height: 45px; width: auto;} 
 
.page-header .uk-navbar-nav > li > a {color: #fff; transition: all 0.3s ease; font-weight: 400;}
.page-header .uk-navbar-nav > li > a:hover{color: #034EA2!important; font-weight: 400;}
 
.page-header.scrolled {
  background: #fff !important;
  transition: none; /* ไม่มี delay ตอนเปิด search */
}
.page-header:hover::before{content: ""; position: absolute; bottom: 0; right: 0; left: 0; height: 1px; background-color: #e8e8e8;}
/* ====== HOVER / SCROLLED EFFECT ====== */
.page-header:hover,
.page-header.scrolled {background: #fff;}
.page-header.scrolled::before {content: ""; position: absolute; bottom: 0; right: 0; left: 0; height: 1px; background-color: #e8e8e8;}
 
.page-header .uk-navbar-container {background: none;}
.scrollable-dropdown {max-height: 100vh; overflow-y: auto;} 
 
.page-header .uk-navbar-dropdown-width-5 {width: 100%; margin: 0 auto;} 

.page-header:hover .uk-navbar-nav > li > a,
.page-header:hover .uk-icon-link,
.page-header.scrolled .uk-navbar-nav > li > a,
.page-header.scrolled .uk-icon-link {color: #000;}

.page-header:hover .logo-default,
.page-header.scrolled .logo-default {display: none;}

.page-header:hover .logo-hover,
.page-header.scrolled .logo-hover {display: block;} 
 
.page-header h5{color: #000; font-size: 1.125rem!important; font-weight: 600;}
.page-header p{color: #474747; font-size: 0.75rem;}

.page-header .btn-get-started {display: inline-flex; align-items: center; gap: 8px; 
background-color: #1564FF; color: #ffffff; font-weight: 500; border-radius: 999px;
text-decoration: none; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 10px rgba(21, 100, 255, 0.3); text-transform: capitalize;}  
.page-header .btn-get-started:hover {background-color: #004DCC;  color: #ffffff; transform: translateY(-1px);}

.page-header .uk-navbar-toggle.search-button {color: #fff;} 
.page-header:hover .uk-navbar-toggle.search-button,
.page-header.scrolled .uk-navbar-toggle.search-button {color: #000;}  

.page-header .uk-navbar-toggle.search-button-mb {color: #fff;} 
.page-header:hover .uk-navbar-toggle.search-button-mb,
.page-header.scrolled .uk-navbar-toggle.search-button-mb {color: #000;}  
 
.search-box .uk-search-input {background: #fff; border:none; border-bottom: 1px solid #e8e8e8; font-size: 1.2rem; color: #000;} 
.search-box .uk-search-input:focus{border-bottom: 2px solid #2f62f6;} 
.search-sg-links h3 {font-size: 0.725rem; font-weight: 400; color: #aaa;}
.search-sg-links a {font-size: 1rem; color: #000;}
.search-sg-links a:hover {text-decoration: underline; color: #2f62f6;}

/* main menu bg white */ 
.mn-white {background:#FFF !important;}
.mn-white::before {content: ""; position: absolute; bottom: 0;right: 0; left: 0; height: 1px; background-color: #e8e8e8;}
.mn-white .logo-hover {display:block;}
.mn-white .logo-default {display:none;}
.mn-white .uk-navbar-nav > li > a {color: #000 !important;}
.mn-white .uk-navbar-toggle.search-button {color: #000 !important;}
.mn-white .uk-navbar-toggle.search-button-mb {color: #000 !important;}
.mn-white .menu-toggle .bar, .page-header.scrolled .menu-toggle .bar {background-color: #1564FF;}
 

/* ===== Hamburger base ===== */
.menu-toggle {width: 22px; height: 15px; position: relative;display: flex; flex-direction: column; justify-content: space-between;
background: none; border: none; cursor: pointer; padding: 0; z-index: 1000;}
.menu-toggle .bar {height: 2px; background-color: #fff; transition: 0.3s ease; border-radius: 2px;}

/* Hover OR scroll → change color #1564FF */
.page-header:hover .menu-toggle .bar,
.page-header.scrolled .menu-toggle .bar {background-color: #1564FF;}

/* Opened state */
.menu-toggle.open .bar:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
.menu-toggle.open .bar:nth-child(2) {opacity: 0;}
.menu-toggle.open .bar:nth-child(3) {transform: rotate(-45deg) translate(4px, -4px);}


.nav-mb {top: 80px; z-index: 9999!important;} 
.nav-mb .uk-nav-default > li{font-size: 1.5rem; color: #000; font-weight: 500; }  
.nav-mb .uk-nav-default > li > a {color: #000; padding: 15px 0; }
  
 .nav-mb .uk-nav-default > li > a {
  display: flex;
  align-items: center; /* จัดกลางแนวตั้ง */
  justify-content: space-between; /* ดันไอคอนไปขวา */
}

/*nav-product*/ 
.nav-product {padding-top: 20px; padding-bottom: 30px;}
.nav-product a:hover {text-decoration: none;}
.nav-product .product-card {display: block; background: #F7F6FA; border-radius: 12px; padding: 20px 10px; text-decoration: none; transition: box-shadow 0.3s ease;}
.nav-product .product-card:hover {box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.nav-product .product-card-box {margin-bottom:0;}
.nav-product .product-card-box img {max-width: 25%; margin: 10px 20px 20px 20px;}
.nav-product .product-card-text h4 {margin-bottom: 0; color: #000; transition: color 0.3s ease; font-size: 0.875rem; font-weight: 500;}
.nav-product .product-card:hover .product-card-text h4 {color: #034EA2;}  
 
.nav-application {padding-top: 20px; padding-bottom: 50px;}
.nav-application a:hover {text-decoration: none;}
.nav-application .application-card {display: block; border-radius: 12px; padding: 20px 10px; text-decoration: none; transition: box-shadow 0.3s ease;}
.nav-application .application-card:hover {background: #F7F6FA; box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.nav-application .application-card-box {margin-bottom:0;}
.nav-application .application-card-box img {max-width: 25%; margin: 10px 20px 20px 20px;}
.nav-application .application-card-text h4 {margin-bottom: 0;color: #000; transition: color 0.3s ease; font-size: 0.875rem; font-weight: 500;}
.nav-application .application-card:hover .application-card-text h4 {color: #034EA2;}  
 
.nav-support {padding-top:0; padding-bottom: 50px;}
.nav-support a:hover {text-decoration: none;}
.nav-support .support-card {display: block; padding: 20px; text-decoration: none; transition: box-shadow 0.3s ease;}
.nav-support .support-card:hover {background: #F7F6FA;} 
.nav-support .support-card-text h4 {margin-bottom: 0;color: #000; transition: color 0.3s ease; font-size: 0.875rem;}
.nav-support .support-card:hover .support-card-text h4 {color: #034EA2;}  

.nav-aboutus {padding-top:0;}
.nav-aboutus a:hover {text-decoration: none;}
.nav-aboutus .aboutus-card {display: block; padding: 20px; text-decoration: none; transition: box-shadow 0.3s ease;}
.nav-aboutus .aboutus-card:hover {background: #F7F6FA;} 
.nav-aboutus .aboutus-card-text h4 {margin-bottom: 0;color: #000; transition: color 0.3s ease; font-size: 0.875rem; font-weight: 500;}
.nav-aboutus .aboutus-card-text p {margin: 0; font-size: 0.75rem;}
.nav-aboutus .aboutus-card:hover .aboutus-card-text h4 {color: #034EA2;}    
 
/* Banner slide */  
.hero-banner { z-index: 1;}
.slideshow-banner .custom-dotnav > * > * {width: 10px; height: 10px; border-radius: 50%; background-color: #aaa; border:1px #aaa solid; transition: all 0.3s ease;} 
.slideshow-banner .custom-dotnav > .uk-active > * {width: 40px;border-radius: 999px; background:#fff; border:1px #aaa solid;} 



.main-industrie {background:#ECEBF2;}
.main-industrie h1{color: #034EA2;}
.main-industrie h5{color: #000; font-size: 0.75rem!important;}
.main-industries-card {position: relative; border-radius: 10px; overflow: hidden;  height: auto; min-height: 250px; display: block;}
.main-industries-card-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;} 
.main-industries-card-bg img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;} 
.main-industries-card::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1;}
.main-industries-card-overlay {position: relative; z-index: 2; padding: 20px; color: white; text-align: left;} 
.main-industries-card-overlay h5 {margin-bottom: 10px;  font-size: 0.875rem!important; font-weight: 700; color: #fff;} 
.main-industries-card-overlay p {margin: 0; font-size: 0.75rem; line-height: 1.6; font-weight: 300;} 

.main-product-line .uk-card{border-radius: 10px;}
.main-product-line .uk-card-default { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.02);}
.main-product-line .uk-card-body {padding: 20px;} 
.main-product-line .uk-card-media-top img{border-top-left-radius: 10px; border-top-right-radius: 10px;}
.main-product-line h3{font-size: 0.875rem; color: #000; text-align: left;}
.main-product-line p{font-size: 0.75rem; color: #2B2B2B; text-align: left;}
.main-product-line .uk-slidenav {color: #aaaaaa;}
.main-product-line .uk-slidenav:hover {color: #000000;}
.main-product-line .uk-dotnav > * > * {background: #ffffff;} 
.main-product-line .uk-dotnav > * > :active {background-color: #aaaaaa;}
.main-product-line .uk-dotnav > .uk-active > * {background-color: #aaaaaa;} 
 
.main-showcaserobot-info h2 {margin-bottom: 10px;} 
.main-showcaserobot-info h3 {margin-bottom: 20px; margin-top: 20px; color: #333;}  
.main-showcaserobot-info .subheadline {margin-bottom: 10px; color: #333; line-height: 1.5; font-weight: 400;} 
 
.main-showcaserobot-info h5 {margin-bottom: 0; margin-top: 0;padding: 0; line-height: 1;} 
.main-showcaserobot-info .number {color: #0056ba;font-size: 3rem; font-weight: 600; margin-right: 10px;} 
.main-showcaserobot-info .unit {color: #2B2B2B;font-size: 1rem; font-weight: 600; } 
.main-showcaserobot-info  p {font-size: 0.875rem; color: #2B2B2B; font-weight: 500; padding: 0; margin-top: 0;}

.main-showcaserobot .btn-learn-more {display: inline-flex; align-items: center; padding: 5px 20px; text-transform: none; background-color: #0056ba; color: #fff;
text-decoration: none; font-weight: 500; border-radius: 500px; font-size: 0.875rem; transition: background-color 0.2s ease;} 
.main-showcaserobot .btn-learn-more:hover {color: #6094fa; background: #000;} 
.main-showcaserobot .btn-learn-more .arrow {font-size: 1.25rem; line-height: 1; width: 30px; text-align: right;} 

.main-showcaserobot .note {font-size: 12px; color: #2b2b2b;} 
.main-showcaserobot .image-container {position: relative; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: flex-end; min-height: 100%;} 
.main-showcaserobot .image-container img {max-width: 100%; max-height: 100%; object-fit: contain;} 

.whyautomation h5 {font-size: 1.125rem; font-weight: 700; line-height: 1.6;}
.whyautomation p{color: #2B2B2B; font-size: 0.75rem;}

.main-whyotc h2{margin-bottom: 30px!important; color: #3C3C3C;}
.main-whyotc p{color: #2B2B2B; font-size: 0.75rem; font-weight: 500;}
.main-whyotc .counter-number {font-size: 2.625rem; font-family: 'Roboto', sans-serif;} 

.main-showcaserobot {background: #fff;}

.main-vdo-present h2 {color: #000;}
.main-vdo-present h3 {color: #034EA2;}
.main-vdo-present p{color: #000; margin: 0 0 5px 0;}
.main-vdo-present a {color: #fff;font-size: 0.825rem; font-weight: 600; letter-spacing: 0.01em; background: #034EA2; padding: 12px 35px; border-radius: 50px;}
.main-vdo-present a:hover {color: #6094fa; background: #000; text-decoration: none;}
 
footer {font-size: 0.75rem; font-weight: 300; letter-spacing: 0.03rem; color: #ccc;}
footer h5 {font-size: 0.875rem; font-weight: 500;} 
footer a.footer-link:hover {color: #1564FF; text-decoration: none;}
footer.uk-section {padding-bottom: 15px;}
footer .uk-text-small {font-size: 0.75rem;}
footer .footer-contact {font-size: 0.7875rem; font-weight: 500;}
footer .footer-copyright {font-size: 0.875rem; color: #fff;}
footer .footer-policy {font-size: 0.825rem; color: #fff;}
footer .footer-policy:hover{color: #1e87f0; text-decoration: none;}
footer .uk-icon-button{width: 30px; height: 30px;}
  
.footer-button {font-size: 0.875rem; font-weight: 500; line-height: 1rem; border-radius: 999px; padding: 10px 20px; background: #034EA2; margin-bottom: 10px; 
text-transform: none; min-width: 180px;}
.footer-button:hover{background: #000;}
.ft-logo {max-width: 100px;}


/*change language*/
.main-lang {background: #034EA2; color: #fff; padding: 0 10px; border-radius: 3px; text-transform: capitalize;}
.main-lang:hover {background: #034EA2; color: #fff; padding: 0 10px; border-radius: 3px;} 

.main-language-dropdown {border-radius: 3px; background: #333; color: #ffffff; padding: 0;text-transform: capitalize;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.main-language-dropdown .uk-nav li a { padding: 5px 20px; display: block; color: #ffffff}
.main-language-dropdown .uk-nav li a:hover {background-color: #034EA2; color: #fff; border-radius: 3px;}

.btn-language{background: none; text-transform: capitalize; color: #ffffff;}
.btn-language:hover{color: #1e87f0;}

.language-dropdown {border-radius: 5px; background-color: #034EA2; color: #ffffff; padding: 0;  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.language-dropdown .uk-nav li a { padding: 5px 20px; display: block; color: #ffffff}
.language-dropdown .uk-nav li a:hover {background-color: #fff; color: #034EA2; border-radius: 5px;}


.main-lang-mb{background: #034EA2; color: #fff; padding: 0 10px; border-radius: 3px; text-transform: capitalize; font-size: 0.725rem;}
.main-lang-mb:hover {background: #034EA2; color: #fff; padding: 0 10px; border-radius: 3px;} 

.main-lang-mb svg {width: 12px; height: 12px;} 


.main-language-dropdown-mb {border-radius: 3px; background: #333; color: #ffffff; padding: 0;text-transform: capitalize; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
z-index: 10000;} 
.main-language-dropdown-mb .uk-nav li a { padding: 3px 10px; display: block; color: #ffffff; font-size: 1rem;}
.main-language-dropdown-mb .uk-nav li a:hover {background-color: #034EA2; color: #fff; border-radius: 3px;}

.backmenu svg{color: #2f62f6; width: 30px;}

.floating-buttons {position: fixed; bottom: 30px; right: 20px; z-index: 10; display: flex; flex-direction: column; gap: 12px;} 
.floating-buttons svg{width: 30px; height: 30px;} 
.floating-btn {background-color: #333; color: white; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
transition: background-color 0.2s ease;} 
.floating-btn:hover {background-color: #000; color: white;}
  

/*news*/ 
.news h3 {font-family: 'Lato', sans-serif; font-size: 1.725rem; font-weight: 900;  letter-spacing: 0.03em; color:#000;} 
.news h4{margin-top: 10px;  margin-bottom: 10px;}
.news h5{color: #494949; font-size:0.75rem;}

.news .uk-button{min-width: 240px;} 
.news .uk-button-link {border:0;}
.news .uk-cover-container {aspect-ratio: 5 / 3;}

/*support*/ 
.support-ctm-sv-info .uk-button{background: #fff; color: #000;}
.support-ctm-sv-contact h5{color: #fff; margin-bottom: 10px; font-size: 0.875rem;}
.support-ctm-sv-contact a{ color: #fff; font-size: 1.325rem;}

.support-distributor h1{font-family: 'Lato', sans-serif; font-size: 1.725rem; font-weight: 900; letter-spacing: 0.03em;}
.support-distributor input.uk-input {font-size: 0.825rem; border: 1px solid #F7F6FA; transition: border-color 0.3s, box-shadow 0.3s;} 
.support-distributor input.uk-input:focus {color: #000; font-weight: 700; border: 1px #034EA2 solid; outline: none;} 
.support-distributor input.uk-input:not(:placeholder-shown) {color: #000; font-weight: 700;}

.support-ctm-sv-casestudies h2{font-family: 'Roboto', sans-serif; font-size: 1.325rem; font-weight: 600; line-height: 1.6;}  
.support-ctm-sv-casestudies h4{margin-top: 10px;  margin-bottom: 10px;}

.support-ctm-sv-casestudies .relatedcase {list-style-type: disc;} 
.support-ctm-sv-casestudies .relatedcase li { border-bottom: 1px #ccc solid; list-style-position: inside;padding: 1rem 2rem 1rem 2rem; margin-left: 0; margin-top: 0;}
.support-ctm-sv-casestudies .relatedcase li:first-child{ border-top: 1px #ccc solid;}
.support-ctm-sv-casestudies .relatedcase li::marker {color: #034EA2;}

.support-classroom .uk-dotnav > * > * {background-color: #fff; transition: all 0.3s ease;}
.support-classroom .uk-dotnav > .uk-active > * {background-color: #AAAAAA;}


/*

.support-casestudies h3 {color: #034EA2;} 

*/
.support-casestudies h2 {color: #fff!important;}
.support-casestudies .uk-button{min-width: 240px;} 
.support-casestudies .uk-button-link {border:0;}
   
.support-casestudies .case-studies-card {background: #fff; border-radius: 12px; overflow: hidden; transition: background 0.3s ease;}
.support-casestudies .case-studies-card:hover {background: #F7F6FA!important;}  
.support-casestudies .uk-label a{color: #fff;text-decoration: none;}
.support-casestudies .uk-label a:hover {text-decoration: underline;}

.support-casestudies .filter-button {background-color: #034EA2; color: #fff; font-weight: 600; letter-spacing: 0.03em; padding: 15px 10px 15px 15px;
border: none; border-radius: 6px; min-width: 240px;  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center;}
.support-casestudies .filter-button:hover {background-color: #002a5e;}
.support-casestudies .filter-button:focus {outline: none; box-shadow: 0 0 0 2px rgba(0,60,130,0.4);}
.support-casestudies .filter-dropdown-box {min-width: 240px!important; box-sizing: border-box; border-radius: 6px;}
.support-casestudies .filter-dropdown-box .uk-input{background: #F7F6FA;} 

/*industries*/ 
.industries h3 {color: #000;}
.industries .industries-card {background: #fff; border-radius: 12px; overflow: hidden; transition: background 0.3s ease;}
.industries .industries-card:hover {background: #F8F8F8!important;} 

.industries .app-unit {display: inline-block; text-decoration: none; color: inherit;} 
.industries .app-icon-box {background: #fff; border-radius: 8px; transition: box-shadow 0.3s ease; width: 100%; aspect-ratio: 1 / 1; /* 1:1 กล่องจัตุรัส */}

.industries .app-unit:hover .app-icon-box {box-shadow: 0 4px 12px rgba(0,0,0,0.1);} 
.industries .app-icon-box img {max-width: 40%;}  
.industries .app-caption {margin: 15px auto 0 auto; font-weight: 600; font-size: 0.75rem; width: 100%;}
.industries .app-unit:hover .app-caption {color: #034EA2;} 

/*applications*/ 
.applications a:hover {text-decoration: none;}
.applications .app-card {display: block; background: #F7F6FA; border-radius: 12px; padding: 20px; text-decoration: none; transition: box-shadow 0.3s ease;}
.applications .app-card:hover {box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.applications .app-card-box {margin-bottom: 10px;}
.applications .app-card-box img {max-width: 25%; margin: 20px 20px 40px 20px;}
.applications .app-card-text h4 {margin-bottom: 5px;color: #000; transition: color 0.3s ease;}
.applications .app-card:hover .app-card-text h4 {color: #034EA2;}
.applications .app-card-text p {font-size: 0.75rem; color: #666;}
.applications .app-card:hover .app-card-text p {font-size: 0.75rem; color: #000; text-decoration: none;}

.applications .applications-box {position: relative; border-radius: 20px; overflow: hidden; transition: box-shadow 0.3s ease; aspect-ratio: 4 / 5;} 
.applications .applications-box img {object-fit: cover; width: 100%; height: 100%;}

.applications .applications-overlay {background: linear-gradient(to top, rgba(0,0,0, 0.5) 70%, rgba(0,0,0,0) 100%);
color: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; transition: color 0.3s ease; padding:10px 30px;}
.applications .applications-overlay h5{color: #fff; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em;}
.applications .applications-overlay p{color: #fff; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.03em;}

.applications .applications-box:hover {box-shadow: 0 8px 20px rgba(0,0,0,0.3);} 
.applications .applications-box:hover .applications-overlay {text-decoration: underline;}
.applications .applications-box:hover .applications-overlay p {text-decoration: underline;} 

.applications .category {margin-top: 30px;}
.applications .category-title {padding: 10px 20px;} 
.applications .category-title h5{font-weight: 600;}
.applications .app-info {padding: 10px;}
.applications .app-info img {max-width: 100%; border-radius: 20px;}


/*products*/ 
.products .products-card {background: #fff; border-radius: 12px; overflow: hidden; transition: background 0.3s ease;}
.products .products-card:hover {background: #F8F8F8!important;} 

.products .app-unit {display: inline-block; text-decoration: none; color: inherit;} 
.products .app-icon-box {background: #fff; border-radius: 8px; transition: box-shadow 0.3s ease; width: 100%; aspect-ratio: 1 / 1; /* 1:1 กล่องจัตุรัส */}

.products .app-unit:hover .app-icon-box {box-shadow: 0 4px 12px rgba(0,0,0,0.1);} 
.products .app-icon-box img {max-width: 40%;}  
.products .app-caption {margin: 15px auto 0 auto; font-weight: 600; font-size: 0.75rem; width: 100%;}
.products .app-unit:hover .app-caption {color: #034EA2;}
.products .products-card .uk-label a{text-decoration: none; color: #fff;}
.products .products-card .uk-label a:hover{text-decoration: underline; color: #fff;} 

.products.uk-checkbox {margin-right: 10px;}

.products .uk-cover-container {aspect-ratio: 5 / 3;}

.filter-desktop {background: #004c99; padding: 20px; border-radius: 6px; color: #fff;} 
.filter-desktop p {font-size: 1rem; font-weight: 600; margin-bottom: 10px;} 
.filter-desktop input[type="text"] {width: 100%; padding: 10px 15px; border: none; background: #fff; color: #333;} 

.checkbox-grid label {display: flex; align-items: center;} 
.checkbox-grid input[type="checkbox"] {width: 18px; height: 18px; border-radius: 0; border: 0;} 
.count {opacity: 0.9;}
 
.filter-desktop, .filter-mobile { margin-bottom: 20px;}
.filter-desktop label {display: inline-block; width: 48%; margin: 4px 0; }

.filter-mobile {background: #004c99; padding: 10px; border-radius: 6px;}

.filter-mobile .filter-row {padding: 10px 0 10px 10px; display: flex; justify-content: space-between; align-items: center;} 
.filter-mobile input[type="text"] {width: 50%; padding: 10px 15px; border: 0;}

.filter-mobile button {background: none; border: none; color: #fff; font-size: 0.875rem; cursor: pointer; display: flex; align-items: center;} 
.filter-mobile button::after {content: ""; margin-left: 6px;} 
.filter-mobile .dropdown {display: none; margin-top: 10px; padding: 0 20px 10px 20px;} 
 
.filter-mobile .dropdown label {display: flex; align-items: center; color: #fff;} 
.filter-mobile .dropdown input[type="checkbox"] {margin-right: 6px;}

.products-content .canvas-container {aspect-ratio: 5 / 3; width: 100%; position: relative;} 
.products-content .canvas-container canvas {width: 100%; height: 100%; display: block;} 

.download-product-info {position: relative; width: 100%; aspect-ratio: 12 / 1.5; overflow: hidden;}

.download-product-info img {width: 100%;height: 100%; object-fit: cover; display: block;} 
.blue-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);} 
.banner-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; text-align: center;}
.banner-content img {width: 15px; height: auto; display: inline-block; margin-left: 5px;}
.download-btn {border-radius: 50px; font-weight: bold; text-decoration: none; padding: 15px 30px;} 
.download-btn .download-icon {margin-left: 8px; font-size: 1.2em;} 
  
.contactus input.uk-input {font-size: 0.825rem; border: 1px solid #F7F6FA; transition: border-color 0.3s, box-shadow 0.3s;} 
.contactus input.uk-input:focus {color: #000; font-weight: 700; border: 1px #034EA2 solid; outline: none;} 
.contactus input.uk-input:not(:placeholder-shown) {color: #000; font-weight: 700;}

.contactus textarea.uk-textarea {font-size: 0.825rem; border: 1px solid #F7F6FA;transition: border-color 0.3s, box-shadow 0.3s;} 
.contactus textarea.uk-textarea:focus {color: #000; font-weight: 700; border: 1px solid #034EA2; outline: none;} 
.contactus textarea.uk-textarea:not(:placeholder-shown) {color: #000; font-weight: 700;}

.contactus .contact-social .uk-icon-button{background: #034EA2; color: #fff;}
.contactus .contact-social .uk-icon-button:hover {background: #fff; color: #034EA2;} 

.company .uk-cover-container {aspect-ratio: 5 / 3;}
.company .uk-card-body{padding: 20px 0 30px 0;} 
.company .uk-card-body h4 {margin-bottom: 0;} 
.company .uk-card-body p {margin: 0; padding-top: 10px;} 
.company .uk-card-body {color:#000;}
.company .uk-card-body a{color:#000;}
.company .uk-card-body a:hover{color:#034EA2;} 
.company .uk-card-body .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {stroke: #f8f8f8; fill: #000;}

.global-nw .uk-button{background: #034699; color: #fff; border-radius: 50px;}
.global-nw .uk-button:hover{background: #333;} 

.global-nw-company h3{font-size: 1.25rem; font-weight: 400; color: #000;} 
.global-nw-company .uk-text-small{font-size: 0.75rem;} 

.global-nw-company .uk-accordion-content {background: #FFF;  padding: 1.5rem 0; margin-top: 0; border: 0; border-top: none;font-size: 0.825rem;} 

.split-button {display: flex; border-radius: 999px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.1); font-size: 0.75rem; 
font-weight: 400; width: fit-content;}

.split-left,
.split-right {display: flex; align-items: center; justify-content: center; height: 48px; width: 60px;} 
.split-right {width: 140px; letter-spacing: 0.3em; color: #fff; justify-content: flex-start; padding-left: 16px;} 
.split-left {background: #2b2b2b; color: #fff;} 
.split-right.blue {background: #0047AB;} 
.split-right.red {background: #D60000;}


.map-container {position: relative; width: 100%; margin: auto;} 
.map-container .uk-marker {padding: 0; background: #034EA2;color: #034EA2; border-radius: 50%; width: 8px; height: 8px; border: 1px solid #fff; 
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);}
.map-container .red {background: #D60000; color:#D60000;}
.map-popup .uk-modal-header {background: #0047AB; padding: 15px 30px;}
.map-popup .uk-modal-header.red{background: #D60000!important;}
.map-popup .uk-modal-title {color: #fff; font-size: 0.875rem;}
.map-popup .uk-modal-body {padding:10px;font-size: 0.75rem;}
.map-popup .uk-modal-body p{margin: 5px;}

.global-nw-manufacturing .uk-card {background: #034EA2; color: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.global-nw-manufacturing .uk-card-title{font-size: 0.875rem; color: #fff;}
.global-nw-manufacturing p{font-size: 0.75rem;}

.global-nw-manufacturing .uk-card-media-top img{aspect-ratio: 5 / 3;}   
.global-nw-manufacturing .uk-card.active {background-color: #002c70; color: white; transition: all 0.3s ease; z-index: 1; position: relative;}
 
/* ปุ่ม nav ปกติ (วงกลม สีเทา) */
.global-nw-manufacturing .uk-dotnav > * > a { background-color: #838383; border-radius: 50%; width: 10px; height: 10px; transition: all 0.3s ease; display: inline-block;}

/* Active button (horizontal ellipse, blue) */
.global-nw-manufacturing .uk-dotnav > .uk-active > a {background-color: #002c70; width: 28px; border-radius: 999px;}
.policy h3{color: #333333;}
 
  
 @media (max-width: 1200px) { 
.page-header .logo-default {width: 90px; height: auto;}
.page-header:hover .logo-default,
.page-header.scrolled .logo-default {display: none; width: 90px; height: auto;}
.page-header:hover .logo-hover,
.page-header.scrolled .logo-hover {display: block; width: 90px; height: auto;} 
	 
.mn-white .logo-hover { width: 90px; height: auto;} 
}
 

@media (max-width: 960px) { 
.main-whyotc .counter-number {font-size: 2rem;}

.support-casestudies .filter-button {padding: 10px;}
.support-casestudies .filter-dropdown-box {width:100%!important;} 
.applications .applications-box {aspect-ratio: 5 / 3;} 
}

@media (max-width: 768px) {
html {font-size: 14px; } 
.download-product-info {aspect-ratio: 12 / 3.5;}
	
.global-nw-manufacturing .uk-card-body {padding:20px 15px;}
}

/*mobile*/
@media (max-width: 640px) { 
.main-whyotc .counter-number { font-size: 1.5rem; /* 24px */ }
.products-content .uk-card-body {padding-left: 0; padding-right: 0;} 

.map-popup .uk-modal-body .uk-grid-margin {margin-top: 10px;}
}


@media (max-width: 480px) {
  html {font-size: 12px;}
}

/*overide*/