@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    border: none;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

::selection {
    color: #fff;
    background: #333
}

::-moz-selection {
    color: #fff;
    background: #333
}

::placeholder {
    color: #aaa;
    font-size: 22px;
    font-weight: normal;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #aaa;
    font-size: 22px;
    font-weight: normal
}

::-ms-input-placeholder {
    color: #aaa;
    font-size: 22px;
    font-weight: normal
}

body {
    --color-blue: #162570;
    --color-dropblue: #8b92b8;
    --color-sky: #188cde;
    --color-dropsky: #4bb4ff;
    --color-white: #fff;
    --color-dropwhite: #f6f6f8;
    --color-dropwhitefooter: #ededf3;
    --color-dropblack: #333;
    --color-dropgray: #ededf3;
    --color-drop999: #999;
    --color-text-gray: #868d98;
    --color-text-dropblue: #99a2c7;
    --color-e4e4e4: #e4e4e4;
    --color-drop-gray-fill: #e0e0e6;
    --color-ddd: #ddd;
    --color-whiteblue: #c8cde2;
    --color-line-dropblue: #7480bd;
    --color-bg-dropblue: #f0f4fd;
    --color-bg-checklist: #e3eaf9;

    font-family: 'Roboto Condensed', 'Prompt', Arial, Helvetica, sans-serif;
    font-weight: 400; font-size: 19px; color: var(--color-dropblack); 
    line-height: 1.5;
    background: var(--color-white);
    font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    width: 100%;
    overflow-x: hidden
}
a,
a:active,
a:focus,
a:hover {
    -webkit-tap-highlight-color: transparent
}

button:hover {
    transition: all .3s ease;
}

input,textarea,button { font-family: 'Roboto Condensed', 'Prompt', Arial, Helvetica, sans-serif;
    font-weight: 400; font-size: 19px; color: var(--color-dropblack); 
    line-height: 1.5; }

a,
abbr,
acronym,
address,
applet,
b,
big,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
tfoot,
tt,
u,
ul,
var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: 0 0
}

ol,
ul {
    list-style: none
}

li {
    position: relative;
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

:focus {
    outline: 0
}

ins {
    text-decoration: none
}

del {
    text-decoration: line-through
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

body,
html {
    height: 100%
}

a {
    display: block;
    color: var(--color-black);
    transition: all .3s ease;
    user-select: none
}

a:hover {
    color: var(--color-yellow)
}

img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: all .3s ease
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-bottom: 30px;
}

h1 {
    font-size: 60px;
    font-weight: 700;
}

h2 { font-size: 60px; font-weight: 700; line-height: 1.2; text-transform:uppercase; color:var(--color-blue); }
h3 { font-size:46px; line-height:1.2; color:var(--color-blue); }

p {
    margin-bottom: 18px
}

small {
    font-size: 17px;
    color: var(--color-aaa)
}

b,
strong {
    font-weight: 700
}

main {
    position: relative;
    width: 100%;
}

section {
    position: relative;
    width: 100%;
}

header {
    position: relative;
}

figure {
    position: relative
}

time {
    position: relative;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--color-drop2gray);
    z-index: 1
}

label {
    display: inline-flex;
    padding-bottom: 5px
}

body>header {
    position: fixed;
    width: 100%;
    height: 140px;
    padding: 0;
    /*background: var(--color-white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    overflow: inherit;*/
    z-index: 999999;
    transition: all .2s ease;
}

:lang(th) .home-app>article .rows article h3,
:lang(th) .home-certified>article .rows article h3 { font-size:36px; font-weight:600 }
:lang(th) h2 { font-size:40px; }
:lang(th) .home-purposes li h3 { font-weight:500 }
:lang(th) .home-process h3 { font-weight:600; font-size:20px; }
:lang(th) .page-about-mission>article .rows article h3,:lang(th) .page-services-beam h3,:lang(th) .page-services-monitor h3 { font-weight:600 }
:lang(th) .page-services-beam li p { font-size:17px }

.home-certified h3:before,
.page-about-mission h3:before,
.title-line-under:before { content:''; position:absolute; width: 40px; height:3px; background:var(--color-sky); left: 0;  bottom:-5px; }

.editor p { color:var(--color-text-gray); }

.header-less { height:80px; background:var(--color-white); box-shadow:rgba(0,0,0,.1) 0 4px 12px; transition: all 0.2s ease}
.header-less .header-fixed .logo { padding: 0; transition: all .2s ease; }
.header-less .main-menu a { color:var(--color-dropblack); }
.header-less .main-menu a:hover { border:1px solid var(--color-ddd); color:var(--color-sky); }
.header-less .main-menu .active a:hover { border:1px solid var(--color-sky); }

.header-fixed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: min(100%, 1680px);
    height: 100%;
    padding: 0 30px;
    margin: 0 auto;
    overflow: inherit;
}

.header-fixed .logo {
    position: relative;
    display: flex;
    width: auto;
    height: 100%;
    padding: 20px 0;
    background: var(--color-yellow);
    z-index: 9;
    cursor: pointer; transition: all .2s ease;
}

.header-fixed .logo a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.header-fixed .logo figure {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    transition: all .2s ease
}

.header-fixed .logo img {
    position: relative;
    width: initial;
    height: 100%;
    margin: 0 auto;
    transition: all .2s ease
}

.main-menu {
    position: relative; margin-right: 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
    height: 100%;
    z-index: 1;
}
.main-menu a { position: relative; text-transform:uppercase;  font-size: 20px;
    color: var(--color-white);
    line-height: 1.2;
    font-weight: 400; padding: 8px 22px; border-radius: 90px;
    cursor: pointer; border:1px solid rgba(255, 255, 255, .0); 
  }
  .main-menu a:hover { border:1px solid rgba(255, 255, 255, .5); }
/*.main-menu a:after { content:''; position:absolute; width: 100%; height:2px; background:var(--color-sky); bottom:-2px; left: 0; }*/
.main-menu ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.main-menu li {
    position: relative;
    margin: 0 3px;
    user-select: none;
}


.main-menu .current a { border:1px solid var(--color-sky); 

}

.main-menu .nofocus {
    opacity: 0.5;
    transition: all 0.3s ease;
}



.open-nav {
    opacity: 1;
    visibility: visible;
    right: 0 !important;
    transition-timing-function: cubic-bezier(.76, .22, .38, .9);
    transition-duration: .5s;
    webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.show-nav {
    right: 0 !important;
    -webkit-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -moz-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -o-transition: all .8s cubic-bezier(1, .1, .2, 1);
    transition: all .8s cubic-bezier(1, .1, .2, 1)
}

.menu-toggle {
    display: none;
    justify-content: center;
    align-items: center;
    position: relative;
    width: auto;
    height: 40px; background: none;
    overflow: hidden;
    border-radius: 0;
    padding: 0; margin-left: 20px;
    cursor: pointer;
}

.menu-toggle:hover .menu-icon {}

.menu-toggle:hover .menu-icon.is-clicked::before,
.menu-toggle:hover .menu-icon.is-clicked::after { 
/*    background: var(--color-blue);*/
}

.menu-toggle:hover .menu-icon::before,
.menu-toggle:hover .menu-icon::after {
/*    background: var(--color-white);
    transition: all 0.3s ease;*/
}

.menu-text { color:var(--color-white); text-transform:uppercase; font-size:20px; line-height:1.2; font-weight:400; margin-right:10px; }

.menu-icon {
    position: relative;
    display: flex;
    right: 0;
    width: 28px;
    height: 2px;
    background: var(--color-sky);
    transition: all .3s ease;
    text-indent: -99999px;
    display: block;
}

.menu-icon::after,
.menu-icon::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--color-sky);
    right: 0;
    -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
    -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
    transition: transform .3s, top .3s, background-color 0s;
    transition: all .3s ease
}

.menu-icon::before {
    top: -8px
}

.menu-icon::after {
    top: 8px
}

.menu-icon.is-clicked {
    background: rgb(235, 0, 139, 0);
    background: linear-gradient(220deg, rgba(235, 0, 139, 0) 0, rgba(243, 113, 37, 0) 0)
}

.menu-icon.is-clicked::before {
    background: var(--color-sky);
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.menu-icon.is-clicked::after {
    background: var(--color-sky);
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.menu-icon span {
    position: relative;
    display: block;
    overflow: hidden;
}

.nav-overay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 888;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease
}

.active-nav-overay {
    opacity: 1;
    visibility: visible;
    transition: all .4s ease
}

.nav-mobile {
    position: fixed;
    width: 50%;
    height: 100%;
    padding: 120px 30px 30px ;
    margin: 0;
    right: -50%;
    top: 0;
    overflow: hidden;
    z-index: 999;
    background: var(--color-blue);
    -webkit-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -moz-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -o-transition: all .8s cubic-bezier(1, .1, .2, 1);
    transition: all .8s cubic-bezier(1, .1, .2, 1)
}

.nav-mobile .menu {
    position: relative;
    width: 100%;
}

.nav-mobile .menu a { color:var(--color-white); text-transform:uppercase; }

.nav-mobile li { padding: 10px 0;
    border-top: 1px solid #c8cde238;
}
.nav-mobile .menu li:first-child { border-top:none; }
.nav-mobile .current a {
    color: var(--color-sky);
}

.nav-mobile-fix {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden
}

.header-less .lang span { color:var(--color-dropblack); }
.header-less .lang span:hover { color:var(--color-sky); transition: all 0.3s ease; }
.header-less .btn-social { background:url(../images/icon-social-black.svg) no-repeat center;background-size:80%;  }
.header-less .menu-text { color:var(--color-dropblack); }
/*.header-less .menu-icon,.header-less .menu-icon::after, .header-less .menu-icon::before { background:var(--color-sky); }
.header-less .menu-icon.is-clicked { background:rgb(255, 255, 255, 0) }
.header-less .menu-icon.is-clicked::after, .header-less .menu-icon.is-clicked::before { background:var(--color-sky); }*/

.lang { margin-left:20px }
.lang span { color:var(--color-white); cursor: pointer; transition: all 0.3s ease; }

.social-topbar { position:relative;  cursor:pointer; }
.btn-social { position: relative; display:block; width: 36px; height:36px; text-indent:-9999px; background:url(../images/icon-social.svg) no-repeat center; background-size:80%; }
.social-topbar:hover > .show-social { visibility: visible; opacity: 1; transition: all 0.2s ease; }

.show-social { visibility: hidden; opacity: 0; transition: all 0.2s ease; position: absolute; width: 40px; top: 100%; left: -50%; right: -50%; margin-left: auto; margin-right: auto; padding: 5px; z-index: 999;  background: var(--color-dropgray); border-radius: 4px; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); }
.show-social:after { content:""; position: absolute; width: 0; height: 0;  bottom: 100%; left: 0; right: 0; margin-left: auto; margin-right: auto; border: solid transparent; pointer-events: none; border-bottom-color: var(--color-dropgray); border-width: 4px; }

.social-topbar .social { width: 28px; height: 28px; }
.social-topbar .header-fixed .icon-youtube { background-size:50% }
.social-topbar .lists-social { display: flex; flex-direction: column; row-gap:5px; justify-content:center; }


/**/
.page-box {
    padding: 80px 0;
}

.page-box>article,
body>footer article {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 auto;
    width: min(100%, 1280px);
    height: inherit;
    padding: 0 30px;
}

.page-contact-form form { width: 100%; display: flex; flex-wrap: wrap; flex-direction:column; }
.page-contact-form article header { width: 100%; text-align: center; }

.page-box>article>header {
    width: 100%;
    text-align: center;
}


h2 em {
    font-style: normal; color: var(--color-sky); font-weight: 400;
}

.page-box img { border-radius:1.6rem; box-shadow:0 8px 20px 0 rgba(0,0,0,.1) }

.rows { display:flex; flex-direction:row; width: 100%; flex-wrap:wrap; }
.custom-list-50 { display: grid; grid-template-columns: repeat(2, 1fr); gap:12px 10px; margin: 25px 0 }
.custom-list-50 li, .custom-list-100 li { padding-left:40px;  }
.custom-list-50 li:before,.custom-list-100 li:before { content:''; position:absolute; width: 32px; height:32px; background: var(--color-bg-checklist) url(../images/icon-checklist-sky.svg) no-repeat center; background-size:24px; border-radius:50%; left:0; top: -5px; }

.custom-list-100 { display: grid; grid-template-columns: repeat( 1fr); gap:12px 10px; margin: 25px 0 }

/*Btn Link*/
.btn-link { display:inline-block; margin-top:15px; width: min(190px, 100%); }
.btn-link a { display: inline-flex; width: 100%; padding: 12px 36px; border-radius:90px; justify-content: center; text-transform:uppercase; color: var(--color-white); background:var(--color-blue); box-shadow:0 8px 20px 0 rgba(0,0,0,.1) }
.btn-link a:hover { background:var(--color-sky); }

/*Box Cover*/
.box-cover { height:700px; padding: 30px 0;  }
.box-cover article { position: relative; display: flex; width: min(100%, 1620px); height: 100%; margin: 0 auto; padding: 0 30px; justify-content:center; align-items:center; text-align: center; color:var(--color-white); text-shadow:1px 5px 5px rgba(0, 0, 0, .5) }
.box-cover article:before { content:''; position: absolute; width: 100%; height: 20px; background:var(--color-blue); bottom: -30px; left:0; right:0; margin:0 auto; }
.box-cover article h1 { line-height:1; font-size:100px; text-transform:uppercase; }
.box-cover article h1 strong { font-weight:400}

.on-page-other { height:500px;  }
.on-page-other article { text-shadow:1px 2px 2px rgba(0, 0, 0, .5)   }
.on-page-other header { position:absolute; right:0; bottom: 0; }

/*Breadcrumb*/
.breadcrumb { position:absolute; left: 0; bottom: 0; display:flex; flex-wrap:wrap; column-gap:5px;  justify-content: center; font-size:14px; text-transform:uppercase; }
.breadcrumb a { }
.breadcrumb .icon-home { display: block; width: 20px; height: 20px; position:relative; text-indent:-9999px; background:url(../images/icon-home.svg) no-repeat center; background-size:100%; }
.breadcrumb .icon-line { position: relative; display: inline-flex; width: 50px; height: 20px; margin:0 15px; }
.breadcrumb .icon-line:before { content:''; position:absolute; width: 100%; height:1px; background:var(--color-white); left: 0; right: 0; top: 0; bottom: 0; margin:auto; }

/*Home About*/
.home-about article { display:flex; flex-wrap:wrap; }
.home-about article header { display: flex; flex-direction: column; justify-content: center; width: 50%; height: 480px; text-align:left; padding-right:60px; z-index:1 }
.home-about article figure { width: 50%; position:relative; }
/*.home-about article figure:before { content:''; position:absolute; width: 100px; height:100px; border-radius: 50%; border:14px solid var(--color-blue); right:-50px; bottom:0; }*/
.home-about article figcaption { text-indent:-9999px; }

.home-about article .mini-img { position:absolute; z-index:2; bottom: 0; left: 0; width: 50%; height:60%;  }
.home-about article .big-img { position: absolute; z-index:1; top: 0; right:0; width: 80%; height:90%;  }

/**/
#particles-js { position: absolute;  width: 100%; height: 100%; top: 0;  background-color: transparent;  z-index: 0;}


/*Home App*/
.home-app header { margin: 0 auto; width: min(1280px, 100%); padding: 0 40px; z-index:1 }
.home-app header h2 { text-align:center; }
.home-app:before { content:''; position:absolute; width: 100%; height:30%; background:linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(240, 244, 253, 1) 50%, rgba(240, 244, 253, 1) 100%); bottom:0; left:0; } 
.home-app:after { content:''; position:absolute; width: 100%; height:30%; background:linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(240, 244, 253, 1) 50%, rgba(240, 244, 253, 1) 100%); top:0; left:0; } 
.home-app>article { padding-top: 60px; padding-bottom: 60px; z-index:1; border-bottom:1px solid var(--color-bg-checklist); }
.home-app>article:last-child { border-bottom:none; }
.home-app>article header { padding-bottom:40px  }
.home-app>article .rows article { width: 50%; display:flex; flex-direction:column; justify-content:center; }
.home-app>article .rows article em { font-style: normal; color: var(--color-sky); font-weight: 400; }
.home-app>article .rows figure { width: 50%; }
.home-app>article .rows figcaption { position:absolute; padding: 10px 26px; z-index:1; background:var(--color-sky); border-radius:1.6rem 0 1.6rem 0; color:var(--color-white); right:0; bottom:0; } 
.home-app>article:nth-child(even) .rows article { padding-right:7% }
.home-app>article:nth-child(odd) .rows article {  order:2; padding-left:7% }
.home-app>article:nth-child(odd) .rows figure { order:1 }

/*Home Benefits*/
.home-benefits ul { display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:35px; width: min(960px, 100%); margin-left:auto; margin-right:auto; margin-top:40px }
.home-benefits li { padding-left:100px }
.home-benefits li figure { position:absolute; width: 80px; height:80px; left: 0; top: -20px; border-radius: 90%; padding: 15px; box-shadow:0 10px 14px rgba(0, 0, 0, .05); }
.home-benefits li figure img { box-shadow:none; border-radius:0 }
.home-benefits li figcaption { text-indent:-9999px; position:absolute; z-index:-1 }

/*Home Improved*/
.home-improved { padding-top:0; padding-bottom:100px }
.home-improved>article header { position:absolute; left:0; padding: 0 10%; bottom: 60px; z-index:1; color:var(--color-white); text-align:left; }
.home-improved>article header h2 { color:var(--color-white); font-weight:400; line-height:1 }
.home-improved>article header h2 strong { display:block; }
.home-improved>article picture { position:relative;  width: 100%; border-radius:1.6rem; overflow:hidden; box-shadow:0 8px 20px 0 rgba(0,0,0,.1) }
.home-improved>article picture:after { content:''; position:absolute; width: 100%; height:100%; background: rgba(4, 23, 59, 0.7); background:linear-gradient(180deg,rgba(255, 255, 255, 0) 20%, rgba(4, 23, 59, 0.7) 100%);bottom: 0; left:0 }
.home-improved>article picture img { box-shadow:none; }

/*Home Purposes*/
.home-purposes { background:var(--color-blue); }
.home-purposes h2 { color:var(--color-white); }
.home-purposes ul { display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:35px; width: min(960px, 100%); margin-left:auto; margin-right:auto; margin-top:40px }
.home-purposes li { padding-left:100px; min-height:80px; display:flex; align-items:center; }
.home-purposes li h3 { font-size:20px; margin-bottom:0; padding-bottom: 0; color:var(--color-white); }
.home-purposes li p { color:var(--color-text-dropblue); line-height:1.4; font-size:16px; color:var(--color-whiteblue); }
.home-purposes li figure { position:absolute; width: 80px; height:80px; left: 0; top: 0; border-radius: 90%; padding: 15px; border:1px dashed var(--color-line-dropblue); }
.home-purposes li figure img { box-shadow:none; border-radius:0 }
.home-purposes li figcaption { text-indent:-9999px; position:absolute; z-index:-1 }

/*Home Process*/
.home-process header { margin: 0 auto; width: min(1200px, 100%); padding: 0 30px; z-index:1 }
.home-process header h2 { text-align:center; }
.home-process .rows { display:grid; grid-template-columns:repeat(5, 1fr); grid-gap:0 }
.home-process .rows article { width: 100%; display:flex; flex-direction: column; justify-content:center; align-items:center; }
.home-process img { box-shadow:none; border-radius:0; padding-bottom:20px }
.home-process h3 { margin-top: 60px; font-size:24px; min-height:50px; }
.home-process article figure { width: 100%; background:var(--color-bg-dropblue); background:linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(240, 244, 253, 1) 50%, rgba(240, 244, 253, 1) 100%);  }
.home-process article:first-child figure:after { display:none; }
.home-process article:last-child figure:before { display:none; }
.home-process article figure:before { content:''; position:absolute; width: 35%; height:1px; border-bottom:1px solid var(--color-sky); bottom:-1px; right:0; z-index:1 }
.home-process article figure:after { content:''; position:absolute; width: 35%; height:1px; border-bottom:1px solid var(--color-sky); bottom:-1px; left:0; z-index:1 }
.home-process article figcaption { text-indent:-9999px; position:absolute; z-index:-1 }
.home-process .number { width: 100%; position:relative; z-index:2 }
.home-process .number span { position:absolute; display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; top: -35px; left: 0; right: 0; margin-left: auto; margin-right: auto; font-weight: 700; font-size: 22px; border-radius:50%; color: var(--color-sky); background:var(--color-white); box-shadow:0 0 45px rgba(0,0,0,.09) }

/*Home Certified*/
.home-certified { background:var(--color-dropwhite); }
.home-certified header { margin: 0 auto; text-align: center; width: min(1200px, 100%); padding: 0 30px; z-index: 1;}
.home-certified>article { width: min(960px, 100%); padding: 60px 0; z-index:1; border-bottom:1px solid var(--color-bg-checklist); }
.home-certified>article:last-child { border-bottom:none; }
.home-certified>article header { padding-bottom:40px  }
.home-certified>article .rows article { width: 65%; display:flex; flex-direction:column; justify-content:center; padding-right:7% }
.home-certified>article .rows figure { width: 35%; height: fit-content; border-radius:1.6rem; box-shadow:0 8px 20px 0 rgba(0,0,0,.1); padding: 20px; background:var(--color-white); }
.home-certified>article .rows figure img { border-radius:0; box-shadow:none; }
.home-certified>article .rows figcaption { position:absolute; text-indent:-9999px; } 


/*About*/
.page-about-vision .editor { text-align:center; }
.page-about-vision p { color:var(--color-dropblack); width: 100%; }
.page-about-vision f { margin-top:40px; }
.page-about-vision figure { margin-top:30px }
.page-about-vision figcaption { position:absolute; text-indent:-9999px }

.page-about-mission { margin-top:-120px }
.page-about-mission header { margin: 0 auto; width: min(1280px, 100%); padding: 0 40px; z-index:1; text-align:center; }
.page-about-mission header h2 { text-align:center; }
.page-about-mission:after { content:''; position:absolute; width: 100%; height:30%; background:linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(240, 244, 253, 1) 50%, rgba(240, 244, 253, 1) 100%); top:0; left:0; } 
.page-about-mission>article { padding-top: 30px; z-index:1;  }
.page-about-mission>article header { padding-bottom:40px  }
.page-about-mission>article .rows { display:grid; grid-template-columns:repeat(3, 1fr); grid-gap: 30px;}
.page-about-mission>article .rows article { width: 100%; display:flex; flex-direction:column; border-radius:1.6rem; }
.page-about-mission>article .rows article h3 { margin-top: 20px; font-size:24px; padding-bottom:3px;  }
.page-about-mission>article .rows figure { width: 100%; }
.page-about-mission>article .rows figure img {  box-shadow:0 8px 20px 0 rgba(0,0,0,.1); }
.page-about-mission>article .rows figcaption { text-indent:-9999px; } 

.page-about-certified { background:var(--color-dropwhite); }
.page-about-certified header { margin: 0 auto; text-align: center; width: min(1200px, 100%); padding: 0 30px; z-index: 1;}
.page-about-certified>article {  padding: 60px 0; z-index:1; }
.page-about-certified>article header { padding-bottom:40px  }
.page-about-certified img { border-radius:0; box-shadow:none;  }
.page-about-certified figcaption { position:absolute; text-indent:-9999px }

/*Our Service*/
.page-services-beam header p { color:var(--color-dropblack); }
.page-services-beam ul { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 30px; margin-top:30px }
.page-services-beam li {  border-radius:1.6rem; border:1px solid var(--color-bg-checklist); padding:20px; transition:all 0.3s ease }
.page-services-beam li:hover { box-shadow:0 8px 20px 0 rgba(0,0,0,.1); transition:all 0.3s ease }
.page-services-beam figure { margin-bottom: 15px; width: 120px; height: 120px; background:var(--color-bg-checklist); border-radius:50%; padding: 20px }
.page-services-beam img { width: 100%; box-shadow:none; border-radius:0 }
.page-services-beam figcaption { text-indent:-9999px; }
.page-services-beam h3 { font-size:24px; padding-bottom:3px; }

.page-services-monitor {  }
.page-services-monitor:after { content:''; position:absolute; width: 100%; height:70%; background:linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(240, 244, 253, 1) 50%, rgba(240, 244, 253, 1) 100%); top:0; left:0; } 
.page-services-monitor ul { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 30px; z-index:1 }
.page-services-monitor img { position:relative; z-index:1  }
.page-services-monitor figure:after { content:''; position:absolute; width: 100%; height:50%; background:var(--color-sky); left:0; bottom: 20px;  z-index:0; border-radius:0 0 1.6rem 1.6rem }
.page-services-monitor figcaption { text-indent:-9999px; }
.page-services-monitor h3 { font-size:24px; }

/*Clients*/
.page-clients header p { color:var(--color-dropblack); }
.page-clients .tab-content ul { display: grid; grid-template-columns: 1fr 1fr; width: 100%; grid-gap: 30px; margin-top:30px }
.page-clients .tab-content li { display: flex; flex-wrap: wrap;  flex-direction: column; border-radius:1.6rem; border:1px solid var(--color-bg-checklist); padding:20px; transition:all 0.3s ease }
.page-clients .tab-content li:hover { box-shadow:0 8px 20px 0 rgba(0,0,0,.1); transition:all 0.3s ease }
.page-clients .tab-content figure { margin-bottom: 30px; border-radius:0; }
.page-clients .tab-content img { width: initial; height: 60px; object-fit: contain; box-shadow:none; border-radius:0 }
.page-clients .tab-content figcaption { text-indent:-9999px; position:absolute; }
.page-clients .tab-content h3 { width: 100%; flex-grow: 1; font-size:24px; margin-bottom:10px; font-weight:400 }
.page-clients .tab-content li p { width: 100%; padding-top: 15px; margin-bottom:0; /*border-top:1px dashed var(--color-bg-checklist);*/ }

/*Contact*/

.page-contact h3 { margin-top: 30px; margin-bottom:30px; text-transform:uppercase; }
.page-contact .rows { display:grid; grid-template-columns:50% auto auto; grid-gap: 20px;  }
.page-contact .rows h4 { font-size: 24px; color:var(--color-blue); text-transform:uppercase; }
.page-contact>article>article { position: relative; width: 100%; height: 460px; background: var(--color-dropwhitefooter); border-bottom: 4px solid var(--color-blue) }
.page-contact iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; box-shadow:0 8px 20px 0 rgba(0,0,0,.1) }

.page-contact .rows article:first-child address { margin-bottom:30px; }
.page-contact .rows article:first-child a { display: inline-flex; text-decoration:none; }
.page-contact .rows article:first-child a:hover { color:var(--color-sky); }
.page-contact .rows article p { margin-bottom:0; font-size:17px }
.page-contact .rows article address { font-size:17px; font-style:normal; }
.page-contact .rows article time { margin-bottom:30px; }
.page-contact .rows article:first-child p:first-letter { font-weight:500 }
.page-contact .lists-social { display: flex; flex-wrap:wrap; column-gap: 10px; }
.page-contact .btn-get-direction { position:absolute; display: flex; justify-content: center; align-items: center; text-transform: uppercase; background: var(--color-blue); color: var(--color-white); z-index:1; left:10px; bottom:10px; height: 46px;
    padding: 0 20px 0 40px;
    font-size: 15px;
    font-weight: 500;
    text-align: center; }
.page-contact .btn-get-direction:hover { color:var(--color-sky); }
.page-contact .btn-get-direction:before { content:''; position:absolute; width: 30px; height: 30px; background:url(../images/icon-get-direct.svg) no-repeat center; background-size:80%; left:5px; top:0; bottom:0; margin-top:auto; margin-bottom:auto; }

.page-contact-form { background:var(--color-dropwhite); }
.page-contact-form ul { width: 100%; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.page-contact-form li { position:relative; }
.page-contact-form li:last-child { grid-column: span 2; }
.page-contact-form label { display:block; width: 100%; }
.page-contact-form input,.page-contact-form textarea { padding: 10px 20px; width: 100%; border-radius:6px; border:1px solid var(--color-white); transition:all 0.3s ease }
.page-contact-form input:hover,.page-contact-form textarea:hover { border:1px solid var(--color-bg-checklist); box-shadow:0 8px 20px 0 rgba(0,0,0,.1); transition:all 0.3s ease }

.page-contact-form button { cursor: pointer; margin: 0 auto; display: inline-flex; width: min(200px, 100%); padding: 12px 36px; border-radius:90px; justify-content: center; text-transform:uppercase; color: var(--color-white); background:var(--color-blue); box-shadow:0 8px 20px 0 rgba(0,0,0,.1);transition:all 0.3s ease  }
.page-contact-form button:hover { background:var(--color-sky); box-shadow:0 8px 20px 0 rgba(0,0,0,.15); }



/**/
.btn-arrow { padding-left:34px; display:inline-flex; transition:all 0.3s ease}
.btn-arrow:before { content:''; position:absolute; width: 30px; height:30px; left:20px; background:url(../images/icon-arrow-click.svg) no-repeat center; background-size:100%; }
.btn-arrow:hover { color:var(--color-sky); transition:all 0.3s ease }

/**/
body>footer { position: relative;  padding:  0; background: var(--color-blue); color: var(--color-dropblack); }

body>footer>article:first-child { width: 100%; background:var(--color-dropwhitefooter); }

footer .logo-footer { display:block; width: min(100%, 1280px); padding: 60px 30px 40px 30px; margin:0 auto; display:flex; flex-wrap:wrap; }
footer .logo-footer figure { display: flex; align-items: center;}
footer .logo-footer figure img { width: 60px; height:60px; }
footer .logo-footer figure figcaption { padding-left: 20px; font-size:24px; font-weight:700; color:var(--color-blue); text-transform:uppercase; }

footer .rows { margin: 0 auto; width: min(100%, 1280px); display:grid; grid-template-columns:50% auto auto; grid-gap:20px; padding-bottom:60px; padding-left:30px; padding-right:30px; }
footer .rows h2 { display: block; width: 100%; font-size:18px; }
footer .rows article { align-content: flex-start; padding: 0 }
footer .rows article:first-child address { margin-bottom:30px; }
footer .rows article:first-child a { text-decoration:none; }
footer .rows article:first-child a:hover { color:var(--color-sky); }
footer .rows article p { margin-bottom:0; font-size:17px }
footer .rows article address { font-size:17px; font-style:normal; }
footer .rows article time { margin-bottom:30px; }

footer .rows article:first-child p:first-letter { font-weight:500 }

body>footer>article:last-child { color:var(--color-whiteblue); font-size:17px  }
body>footer>article:last-child ul { display: flex; flex-wrap: wrap; column-gap: 15px; margin-left:auto; margin-top:30px; }
body>footer>article:last-child ul li a:hover { color:var(--color-sky); }

body>footer .lists-social { display: flex; flex-wrap:wrap; column-gap: 10px; }


.social {  width: 40px; height: 40px;  text-indent:-9999px; background-repeat:no-repeat; background-position:center; background-color:var(--color-blue); border-radius:50%; }
.icon-facebook {
    background-image: url(../images/icon-facebook-white.svg);
    background-size: 50%;
}
.icon-facebook:hover { background-color:#0866ff }

.icon-youtube {
    background-image: url(../images/icon-youtube-white.svg);
    background-size: 50%;
}
.icon-youtube:hover { background-color:#f42e3b; }

.icon-tiktok {
    background-image: url(../images/icon-tiktok-white.svg);
    background-size: 70%;
}

.icon-instagram {
    background-image: url(../images/icon-instagram-white.svg);
    background-size: 54%;
}
.icon-instagram:hover { background-color:#c134a5 }

.icon-line {
    background-image: url(../images/icon-line-white.svg);
    background-size: 54%;
}
.icon-line:hover { background-color:#00c300 }

body>footer p {
    display: block;
    width: 100%;
}

body>footer p a {
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body>footer .copyright {
    padding-top: 30px; display: inline-flex; width: auto;
}


.siteby {
    padding: 0 0 30px 0;
    font-size: 12px;
    letter-spacing: 2px; color: #3a50bb;
}

.siteby a {
    text-decoration: none; color: #3a50bb;
}

/*cookie consent*/
.cookie-consent {
    position: fixed;
    bottom: 10px;
    right: 0;
    left: 0;
    padding: 20px;
    width: 100%;
    max-width: 1660px;
    margin: 0 auto;
    z-index: 4
}

.cookie-consent .box {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    padding: 20px;
        background: var(--color-white);
    border-radius: 4px;
    box-shadow: 0px 1px 8px 1px rgb(12 23 83 / 20%);
}

.cookie-consent .text {
    flex: 1;
    padding-right: 20px;
    color: var(--color-black);
}

.cookie-consent .text p {
    margin-bottom: 0
}

.cookie-consent .text a {
    display: inline-flex;
    color: var(--color-sky);
}

.cookie-consent .text a:hover {
   color: var(--color-blue);
}

.cookie-consent .btn-consent {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap
}

.cookie-consent .btn-consent span {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
    width: 150px;
    height: 40px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
    background: var(--color-blue);
    border-radius: 4px;
    transition: all .3s ease
}

.cookie-consent .btn-consent span:hover {
    background: var(--color-sky);
    transition: all .3s ease
}


/**/
.spam-recaptcha { display:flex; width: 100%; justify-content:center; margin-top:15px; margin-bottom:15px; }

/**/
.arrow-rotate {
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 15px;
    color: var(--color-orange);
    font-size: 24px;
    transition: transform 0.5s ease;
    /* ทำให้การหมุนเป็น smooth */
    transform: rotate(90deg);
    /* หมุนลูกศ 90 องศา */
}

.arrow-rotate.rotate {
    transform: rotate(-90deg);
    /* หมุนลูกศร 90 องศา */
}


/* --- Tabs  --- */
.tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 auto; width: 100%;
    border-bottom: 1px solid var(--color-sky);

}

.tab-button {
    width: min(150px, 100%);
    padding: 15px 20px;
    border: none;
    background: var(--color-dropwhitefooter);
    cursor: pointer;
    color: var(--color-dropblack); font-family: 'Roboto Condensed', 'Prompt', Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    transition: 0.3s;
    border-radius: 10px 10px 0 0;
    line-height: 1;
    text-transform: uppercase;
}

.tab-button.active {
    background: var(--color-sky);
    color: white;

}

/* --- Content --- */
.tab-content {
    display: none;
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
}

.tab-content.active {
    display: block;
}


/**/
.lazy-loaded {
    transition: all .3s ease;
    opacity: 1
}

img[data-src] {
    opacity: 0
}

img.lazyloaded {
    opacity: 1;
    transition: all .3s ease
}
.hide {
    display: none !important
}

.show {
    display: block !important
}

.error {
    color: #fa5058;
    font-size: 14px;
    font-weight: 400
}


/* Loading Popup  */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.loading-box {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    padding: 5px;
    width: 80px;
    height: 80px;
    align-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, .3);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 10px;
    text-align: center;
}

.loading-box:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 18px;
    background: #fff;
    display: flex;
    margin: auto;
}

.loading-spinner {
    width: 44px;
    z-index: 1;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #f9bf45 94%, #0000) top/7px 7px no-repeat,
        conic-gradient(#0000 30%, #f9bf45);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 7px), #000 0);
    animation: spin 1s infinite linear;
}

@keyframes spin {
    100% {
        transform: rotate(1turn)
    }
}

/*  Alert Popup  */

.alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.alert-overlay.show {
    opacity: 1;
    visibility: visible;
    display: flex !important;
}

.alert-popup {
    position: relative;
    width: min(100%, 260px);
    background: rgba(255, 255, 255, .3);
    padding: 5px;
    border-radius: 22px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 15px;
    text-align: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.alert-popup.show {
    opacity: 1;
    transform: scale(1);
}

.alert-popup.hide {
    opacity: 0;
    transform: scale(0.9);
}

.alert-box {
    padding: 12px 15px;
    border-radius: 18px;
    background: white;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
}

.alert-icon .fas {
    display: inline-flex;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin-right: 10px;
}

.alert-popup .icon-Sucess {
    background: #35c753 url(../images/icon-set-alert.svg) no-repeat 0 0;
    background-size: 168px 42px
}

.alert-popup .icon-Error {
    background: #ed3136 url(../images/icon-set-alert.svg) no-repeat -42px 0;
    background-size: 168px 42px;
}

.alert-popup .icon-Warning {
    background: #ffbe28 url(../images/icon-set-alert.svg) no-repeat -84px 0;
    background-size: 168px 42px;
}

.alert-popup .icon-Information {
    background: #318ae9 url(../images/icon-set-alert.svg) no-repeat -126px 0;
    background-size: 168px 42px;
}

.alert-popup .icon-Loading {
    background: #ededfc url(../images/icon-set-loading.svg) no-repeat center;
    background-size: 42 42px;
}

.alert-icon {
    display: flex;
}

.alertText {
    flex: 1;
    font-size: 16px;
    color: #666;
    font-weight: 600;
    text-align: left;
}

/* Confirm Popup */
.confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.confirm-overlay.show {
    opacity: 1;
    visibility: visible;
}

.confirm-box {
    width: min(100%, 400px);
    background: white;
    padding: 20px;
    color: #555;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
}

.confirm-box .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-right: 30px;
}

.confirm-box .des {
    font-size: 16px;

    margin-bottom: 20px;
}

.confirm-box .confirm-btn {
    display: flex;
    justify-content: flex-end;
}

.confirm-box .btn-cancel,
.confirm-box .btn-confirm {
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

.confirm-box .btn-cancel {
    background: #fff;
    border: 1px solid #f1f1f1;
    color: #555;
    font-weight: normal;
    margin-right: 12px;
}

.confirm-box .btn-cancel:hover {
    background: #f1f1f1;
}

.confirm-box .btn-confirm {
    background: #ff4d4d;
    color: white;
}

.confirm-box .btn-confirm:hover {
    background: #ff1a1a;
}

.confirm-box .btn-close {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 6px;
    background: #fff;
    transition: all 0.3s ease;
}

.confirm-box .btn-close:hover {
    transition: all 0.3s ease;
    background: #e9e9e9
}

.confirm-box .btn-close svg {
    height: 18px;
    width: 18px;
    position: relative;
}