@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root{
  --blue:#0757b7; --blue2:#0b74e5; --navy:#062b63; --ink:#102a43;
  --muted:#64748b; --line:#dbe7f4; --light:#f4f8fc; --white:#fff;
  --shadow:0 18px 55px rgba(6,43,99,.12); --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,"Noto Sans Thai",sans-serif;color:var(--ink);background:#fff;line-height:1.7}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.container{width:min(1500px,92%);margin:auto}
.section{padding:50px 0}
.section-head{text-align:left;max-width:720px;margin:0 auto 55px}
.eyebrow{
  display:inline-flex;
  gap:9px;
  align-items:center;
  color:var(--blue);
  font-size:.78rem;font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase}
.eyebrow:before{content:"";width:30px;height:2px;background:var(--blue)}
h1,h2,h3{line-height:1.15;color:var(--navy)}
h1{font-size:clamp(2.7rem,6vw,5.3rem);letter-spacing:-.045em}
h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.03em}
h3{font-size:1.25rem}
h4{font-size:1.8rem}
.section-head p{margin-top:18px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;
  justify-content:center;gap:9px;border-radius:999px;padding:14px 24px;font-weight:800;border:1px solid transparent;transition:.3s}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 28px rgba(7,87,183,.22)}
.btn-primary:hover{background:var(--navy);transform:translateY(-3px)}
.btn-outline{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-outline:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}
.navbar{position:fixed;z-index:1000;top:0;left:0;
  width:100%;background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);border-bottom:1px solid rgba(219,231,244,.75)}
.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--navy)}
.logo-mark{
  width:60px;
  height:60px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  }
.brand small{display:block;font-size:.67rem;letter-spacing:.08em;color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:30px;font-size:.88rem;font-weight:700;color:#193b68}
.nav-links a{position:relative;padding:28px 0}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:2px;background:var(--blue);transition:.3s}
.nav-links a:hover:after,.nav-links a.active:after{right:0}
.nav-toggle{display:none;border:0;background:none;font-size:1.7rem;color:var(--navy)}
.hero{
  min-height:790px;
  padding-top:78px;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#fff 0%,rgba(255,255,255,.96) 34%,rgba(255,255,255,.25) 72%,rgba(255,255,255,.05)),url("../images/hh2.png") center/cover}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:100px;background:linear-gradient(180deg,transparent,#fff)}
.hero-content{max-width:1500px;position:relative;z-index:2}
.hero-content p{font-size:1.08rem;color:#3f5872;max-width:600px;margin:25px 0 32px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.hero-tag{display:inline-block;margin-bottom:20px;background:rgba(7,87,183,.08);
  color:var(--blue);padding:7px 13px;border-radius:999px;font-weight:800;font-size:.78rem}
/*.page-hero{padding:175px 0 95px;background:linear-gradient(100deg,rgba(6,43,99,.95),rgba(7,87,183,.72)),
url("https://images.unsplash.com/photo-1586864387967-d02ef85d93e8?auto=format&fit=crop&w=2200&q=80") center/cover;color:#fff} */
.page-hero{padding:175px 0 95px;background:linear-gradient(100deg,rgba(6,43,99,.95),rgba(7,87,183,.72)),
url("../images/HQ03.jpg?auto=format&fit=crop&w=2200&q=80") top/cover;color:#fff}
.page-hero h1{color:#fff;font-size:clamp(2.6rem,5vw,4.6rem)}
.page-hero p{max-width:650px;margin-top:18px;color:#e8f2ff}
.stats{background:var(--navy);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:36px 20px;text-align:center;border-right:0px solid rgba(255,255,255,.15)}
.stat:last-child{border-right:0}.stat strong{font-size:2.5rem;display:block}.stat span{color:#cbdcf3;font-size:.9rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-n4{display:grid;grid-template-columns:repeat(4,1fr);gap:70px;align-items:center}
.image-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#ddd}
.image-card img{width:100%;height:100%;object-fit:cover}
.tall{height:560px}.wide{height:360px}
.eyebrow{display:inline-block;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:2px;margin-bottom:13px}
.eyebrow.light{color:#bcd7ff}
.check-list{list-style:none;margin:25px 0;display:grid;gap:13px}
.check-list li{display:flex;gap:12px;align-items:flex-start}
.check-list li:before{content:"✓";flex:0 0 25px;height:25px;border-radius:50%;background:#e7f1ff;color:var(--blue);display:grid;place-items:center;font-weight:900}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:0 10px 35px rgba(6,43,99,.06);transition:.35s}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.icon{width:58px;height:58px;border-radius:17px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-size:1.5rem;margin-bottom:22px}
.card p{color:var(--muted);font-size:.92rem;margin-top:10px}
.blue-section{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff}
.blue-section h2,.blue-section h3{color:#fff}.blue-section p{color:#dceaff}
.solution-card{padding:0;overflow:hidden;position:relative;min-height:360px}
.solution-card img{height:230px;width:100%;object-fit:cover;transition:.7s}
.solution-card:hover img{transform:scale(1.07)}
.solution-body{padding:24px}.solution-body a{color:var(--blue);font-weight:800;font-size:.85rem}
.product-card{overflow:hidden;padding:0}
.product-card img{height:245px;width:100%;object-fit:cover}
.product-body{padding:24px}
.product-meta{display:flex;justify-content:space-between;gap:12px;margin-top:15px;color:var(--muted);font-size:.82rem}
.badge{display:inline-block;background:#edf5ff;color:var(--blue);padding:5px 10px;border-radius:999px;font-weight:800}
.cta{padding:80px 0;background:var(--light)}
.cta-box{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:30px;padding:55px;display:flex;align-items:center;justify-content:space-between;gap:30px;overflow:hidden;position:relative}
.cta-box:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid rgba(255,255,255,.15);right:-100px;top:-130px}
.cta-box h2{color:#fff}.cta-box p{color:#dceaff;margin-top:12px}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}
.contact-info{background:var(--navy);color:#fff;border-radius:var(--radius);padding:40px}
.contact-info h3{
  color:#fff}.contact-item{display:flex;gap:15px;margin-top:25px}.contact-item b{display:block}.contact-item span{color:#cbdcf3;font-size:.9rem}
.form{padding:40px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:7px;margin-bottom:18px}.field.full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:800}.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:13px;padding:13px 15px;outline:none;background:#fbfdff}.field textarea{min-height:150px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(7,87,183,.08)}
.footer{background:#031a3c;color:#bcd0e9;padding:65px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr 1fr;gap:45px}
.footer h3{color:#fff;font-size:1rem;margin-bottom:17px}
.footer a{display:block;margin:8px 0;font-size:.88rem}
.footer a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);margin-top:45px;padding-top:22px;display:flex;justify-content:space-between;gap:15px;font-size:.8rem}
.reveal{opacity:0;transition:opacity .8s ease,transform .8s ease}.reveal.active{opacity:1;transform:none}.slide-up{transform:translateY(50px)}.slide-left{transform:translateX(-60px)}.slide-right{transform:translateX(60px)}.zoom{transform:scale(.88)}.fade{transform:none}
.stagger:nth-child(1){transition-delay:.05s}.stagger:nth-child(2){transition-delay:.12s}.stagger:nth-child(3){transition-delay:.19s}.stagger:nth-child(4){transition-delay:.26s}.stagger:nth-child(5){transition-delay:.33s}.stagger:nth-child(6){transition-delay:.4s}
.reveal-image{overflow:hidden;border-radius:var(--radius)}.reveal-image img{transform:scale(1.16);transition:transform 1.2s ease}.reveal-image.active img{transform:scale(1)}
.parallax{background-attachment:fixed}
@media(max-width:900px){
  .nav-toggle{display:block}.nav-links{position:absolute;top:78px;left:0;right:0;background:#fff;display:none;flex-direction:column;align-items:stretch;padding:12px 5%;box-shadow:0 15px 30px rgba(0,0,0,.08)}.nav-links.open{display:flex}.nav-links a{padding:12px 0}.nav-links a:after{bottom:5px}
  .grid-2,.contact-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat{border-bottom:1px solid rgba(255,255,255,.15)}
  .hero{min-height:730px;background-position:65% center}.hero-content{max-width:620px}.tall{height:430px}.footer-grid{grid-template-columns:1fr 1fr}.cta-box{display:block}
}
@media(max-width:560px){
  .section{padding:72px 0}.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.brand{font-size:.86rem}.brand small{font-size:.57rem}.logo-mark{width:38px;height:38px}.hero{min-height:720px;background-position:62% center}.hero-content p{font-size:.98rem}.page-hero{padding:145px 0 75px}.stats-grid{grid-template-columns:1fr 1fr}.stat strong{font-size:2rem}.stat{padding:25px 10px}.cta-box,.contact-info,.form{padding:28px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}
}
.company-video {
    padding: 100px 20px;
    background: #f4f7fb;
}

.container {
    max-width: 1200px;
    margin: auto;
}

.section-heading {
    text-align: center;
    margin-bottom: 40px;
}

.section-heading span {
    color: #1d5fa7;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.section-heading h2 {
    font-size: 40px;
    margin: 15px 0;
    color: #123456;
}

.section-heading p {
    color: #666;
}

.youtube-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.youtube-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
}

/* Link images */
.image-hotspot {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.image-hotspot img {
    display: block;
    width: 100%;
    height: 235px;
}


/* พื้นที่ Link */
.hotspot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    width: 80px;
    height: 65px;

    border: 2px solid transparent;

    transition: all 0.3s ease;

    cursor: pointer;
    /*    border: 2px solid red;
    background: rgba(255, 0, 0, 0.15); */
}

.hotspot span {
    opacity: 0;
    transform: translateY(10px);

    padding: 8px 14px;

    background: rgba(6, 43, 99, 0.9);
    color: white;

    border-radius: 5px;

    font-size: 13px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.hotspot:hover span {
    opacity: 1;
    transform: translateY(0);
}
/* Warehouse */
.hotspot-ACW1 {
    left: 13%;
    top: 25%;
}


/* Office */
.hotspot-ACW2 {
    left: 40%;
    top: 45%;
}


/* Production */
.hotspot-ONW1 {
    left: 68%;
    top: 25%;
}
.hotspot-KRW1 {
    left: 68%;
    top: 65%;
}