/* ====== ก้อนดำ (โครงเดิม) ====== */
.subHeader .menuControl {
  background:#000;
  color:#fff;
  margin-left:64px;
  padding:25px 64px;
  border-radius:12px;
  overflow:hidden;
  box-sizing:border-box;
  display:block;
}

/* ====== โครงใน section ====== */
.subHeader .menuControl .sec-solutions{
  grid-template-columns: auto minmax(0,1fr) clamp(320px,28%,420px);
  padding-top:0;
  box-sizing:border-box;
  display:grid;
  column-gap:16px;
  align-items:start;
}

.subHeader .menuControl .sec-label{
  grid-column:1;
  align-self:start;
  padding:10px 0;
}
.subHeader .menuControl .sec-label .label-text{
  font-size:18px; 
  font-weight:700; 
  line-height:1.15; 
  color:#fff;
  word-break:break-word;
}
.subHeader .menuControl .sec-label .label-go{ display:none; }

.subHeader .menuControl .sec-flow{
  grid-column:2;

  --row:45px;

  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: repeat(5, var(--row));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  gap:12px 22px;

  overflow-x:auto;
  overflow-y:hidden;

  padding:10px 64px 100px 64px;
  border-right:1px solid #0d78d5;
  box-sizing:border-box;
  width: 95%;
}

.subHeader .menuControl .sec-flow::-webkit-scrollbar{ height:6px; }
.subHeader .menuControl .sec-flow::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28); border-radius:3px;
}

.subHeader .menuControl .sec-item{
  display:flex; align-items:center; gap:10px;
  height:var(--row);
  padding:0 10px;
  margin:0;
  border:0;
  border-radius:20px;
  transition:background .15s ease;
  min-width:0;
}
.subHeader .menuControl .sec-item:hover{ background:#0d78d5; }
.subHeader .menuControl .sec-item .ico{ width:25px; height:25px; flex:0 0 22px; display:grid; place-items:center; margin: 5px 10px; }
.subHeader .menuControl .sec-item .ico img{
  width:100%;
  height:100%;
  object-fit:contain;

  border:none;
  outline:1px solid #fff;
  outline-offset:6px;
  border-radius: 5px;
}
.subHeader .menuControl .sec-item .name{
  flex:1; 
  color:#fff; 
  font-size:14px; 
  font-weight:600;
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  min-width:0;
}
.subHeader .menuControl .sec-item .go{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  width:22px; 
  height:22px; 
  border-radius:50%;
  background:#fff; 
  color:#000; 
  font-weight:700;
  cursor: pointer;
}

.subHeader .menuControl .sec-blue{
  grid-column:3;
  align-self:stretch;
  height:100%;
  display:flex;
  min-width:0;
}
.subHeader .menuControl .sec-blue .card{
  width:100%;
  background:#0d78d5; 
  color:#fff;
  padding:12px;
  box-sizing:border-box;
  display:flex; 
  flex-direction:column;
  height:100%;
}
.subHeader .menuControl .sec-blue .title{ font-size:13px; font-weight:800; margin:0 0 8px; }

.subHeader .menuControl .sec-blue .list{ list-style:none; margin:0; padding:0; }
.subHeader .menuControl .sec-blue .list li{ margin:0; }
.subHeader .menuControl .sec-blue .list a{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; color:#fff; text-decoration:none; font-size:13.5px; font-weight:600;
  position:relative;
}
.subHeader .menuControl .sec-blue .list a::after{
  content:"›"; opacity:0; transform:translateX(-4px);
  width:22px; height:22px; border-radius:50%;
  background:#fff; color:#000; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  transition:opacity .15s ease, transform .15s ease;
}
.subHeader .menuControl .sec-blue .list a:hover{ text-decoration:underline; }
.subHeader .menuControl .sec-blue .list a:hover::after{ opacity:1; transform:none; }

/* pager */
.subHeader .menuControl .sec-blue .pager{
  margin-top:auto; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex; gap:4px;
}
.subHeader .menuControl .sec-blue .pager .p{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-right:6px;
  text-decoration:none; font-size:13px; font-weight:600;
  color:#fff;
}
.subHeader .menuControl .sec-blue .pager .p.active{
  border-radius:50%;
  background:#fff;
  color:#0d78d5;
  font-weight:700;
}

@media (max-width:768px){
  .subHeader .menuControl{ padding:12px; border-radius:10px; }
  .subHeader .menuControl .sec-solutions{ grid-template-columns:1fr; }
  .subHeader .menuControl .sec-blue{ display:none; }
  .subHeader .menuControl .sec-flow{
    display:block;
    overflow-x:hidden;
    padding:8px 0;
    border-right:0;
  }
}

.subHeader .subMenu .menuControl { padding-left:64px; }


.w-60 {
    width: 60%!important
}

.vdoWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vdoWrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-auto .d-flex {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.m-auto .d-flex img {
  border: 2px solid #fff;
  border-radius: 10px;
  margin-right: 20px;
}

.m-auto .d-flex h3 {
  text-align: center;
}

@media (min-width: 768px) {
  .m-auto .d-flex {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .m-auto .d-flex h3 {
    text-align: left;
  }
}

.cardProtect .imgBox{ position:relative; }
.cardProtect .imgBox .img-thumb{
  flex: 1 0 auto;
  width: 100%;
  height: auto;
  display: block;
}
.cardProtect .imgBox .img-cover{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity .2s ease-in-out;
}
.cardProtect:hover .imgBox .img-cover{ opacity:1; }

.footerWrapper{ position:relative; background:transparent; padding:32px 0 28px; }
.footerWrapper .container{ position:relative; z-index:1; }
.footerWrapper .footerGrid{
  display:grid;
  grid-template-columns: 320px 1fr 240px;
  gap:24px;
  align-items:start;
}

.footerWrapper .foot-left .logo img{ height:44px; width:auto; }
.footerWrapper .foot-left .cols{ margin:20px 0 16px; }
.footerWrapper .foot-left .qrCode img{ width:144px; height:144px; display:block; }
.footerWrapper .foot-left .idCode{ margin-top:12px; }

.footerWrapper .idCode .btnLine{
  display:inline-block; margin-top:0; padding:10px 16px;
  background:#2b2b2b; color:#fff; border-radius:10px;
  text-decoration:none; font-weight:700; font-size:14px; line-height:1;
}
.footerWrapper .idCode .btnLine:hover{ opacity:.9; }

.footerWrapper .ps-card{ background:#0a0a0a; color:#fff; border-radius:28px; padding:28px 32px; }
.footerWrapper .ps-title{ font-size:20px; font-weight:700; margin:0 0 18px; }
.footerWrapper .ps-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px 36px;
}
.footerWrapper .ps-link{
  display:flex; align-items:center; gap:12px;
  color:#eaeaea; text-decoration:none; font-weight:600; letter-spacing:.2px;
}
.footerWrapper .ps-link:hover{ color:#fff; }
.footerWrapper .ps-link img{
  width:36px; height:36px;
  border:2px solid #fff; border-radius:50%;
  object-fit:contain; display:inline-block; flex:0 0 auto;
}
.footerWrapper .ps-txt{ font-size:14px; text-transform:uppercase; }

.footerWrapper .who-title{ margin:6px 0 14px; font-size:20px; font-weight:700; color:#111; }
.footerWrapper .who-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.footerWrapper .who-list a{ color:#111; text-decoration:none; font-weight:600; }
.footerWrapper .who-list a:hover{ text-decoration:underline; }

/* Bottom bar (Address + Contact) */
.footerWrapper .foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}
.footerWrapper .foot-bottom .address{
  max-width:520px; color:#111; font-size:14px; line-height:1.5;
}
.footerWrapper .contact-list{ display:flex; gap:28px; align-items:center; }
.footerWrapper .contact-item{
  display:flex; align-items:center; gap:10px; color:#111; text-decoration:none; font-weight:700;
}
.footerWrapper .ci{
  width:36px; height:36px; border-radius:50%; background:#1f73bd; display:inline-block; position:relative;
}
.footerWrapper .ci:before{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; background:#fff;
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
}
.footerWrapper .ci-phone:before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6.6 10.8c1.3 2.6 3.4 4.7 6 6l2-2c.2-.2.5-.3.8-.2c.9.3 1.9.5 2.9.5c.4 0 .7.3.7.7V19c0 .6-.5 1-1.1 1C9.4 20 4 14.6 4 8.1C4 7.5 4.4 7 5 7h3.2c.4 0 .7.3.7.7c0 1 .2 2 .5 2.9c.1.3 0 .6-.2.8l-1.6 1.4Z"/></svg>'); }
.footerWrapper .ci-mail:before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4l-8 5L4 8V6l8 5l8-5v2Z"/></svg>'); }

/* ===================== White Card Background ===================== */
.footerWrapper .container::before{
  content:""; position:absolute;
  top:0; right:0; bottom:0; left:0;
  background:#fff; border-radius:28px; z-index:0;
}
.footerWrapper .footerGrid,
.footerWrapper .foot-bottom{
  position:relative; z-index:1; padding:28px 36px;
}

/* ===================== Responsive ===================== */
@media (max-width:1199.98px){
  .footerWrapper .footerGrid{ grid-template-columns:280px 1fr 220px; }
  .footerWrapper .ps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:991.98px){
  .footerWrapper .container::before{
    top:12px; right:16px; bottom:16px; left:16px; border-radius:22px;
  }
  .footerWrapper .footerGrid,
  .footerWrapper .foot-bottom{ padding:20px; }
  .mainFooter .qrCode {
    max-width: 1000px;
  }
}
@media (max-width:767.98px){
  .footerWrapper .footerGrid{ grid-template-columns:1fr; gap:18px; }
  .footerWrapper .foot-bottom{
    flex-direction:column; align-items:start; justify-content:center; text-align:start; gap:12px;
  }
  .footerWrapper .foot-bottom .address{ max-width:none; }
  .footerWrapper .contact-list{ justify-content:center; }
  .footerWrapper .ps-grid{ grid-template-columns:1fr; }

  .footerWrapper .foot-left .logo{
    text-align: center;
    margin: 0 auto;
  }
  .footerWrapper .foot-left .logo img{
    display: block;
    margin: 0 auto;
  }
}
@media (max-width:575.98px){
  .footerWrapper .container::before{
    top:0; right:12px; bottom:0; left:12px; border-radius:18px;
  }
  .footerWrapper .footerGrid,
  .footerWrapper .foot-bottom{ padding:16px; }
}

.footerWrapper .ps-link{
  padding: 5px 0;
}

.footerWrapper .foot-right{
  justify-self: end;
  text-align: right;
}
.footerWrapper .who-list a{
  font-weight: 400;
}

.footerWrapper .foot-bottom .address{
  font-size:16px;
  line-height:1;
  color:#111;
}
.footerWrapper .foot-bottom .address p{
  margin:0;
}
.footerWrapper .foot-bottom .address p + p{
  margin-top:4px;
}
.footerWrapper .foot-bottom .address .h5{
  font-size:18px;
  font-weight:400;
  margin:0 0 6px;
}

@media (max-width: 767.98px){
  .footerWrapper .foot-left .cols{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .footerWrapper .foot-left .qrCode img{ margin: 0 auto; }
  .footerWrapper .foot-left .idCode{ margin-top: 8px; text-align: center; }
  .footerWrapper .idCode .btnLine{ margin-top: 8px; }

  .footerWrapper .foot-right{
    justify-self: auto;
    text-align: center;
  }
  .footerWrapper .who-list{
    align-items: center;
  }

  .footerWrapper .contact-list{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center; 
    gap: 10px;
  }
  .footerWrapper .contact-list .contact-item[href^="tel:"]{ order: 1; }
  .footerWrapper .contact-list .contact-item[href^="mailto:"]{ order: 2; }
}

/* ซ่อน/แสดง desktop vs mobile */
.sec-solutions-mobile{ display:none; }
@media (max-width: 767.98px){
  .subHeader .subMenu .menuControl {
    padding-left: 0px;
  }

  .subHeader .menuControl .sec-solutions{ display:none; }
  .subHeader .menuControl .sec-solutions-mobile{ display:block; }

  .subHeader .container{ padding-left:0; padding-right:0; }

  .subHeader .menuControl{
    background: transparent !important;
    color: inherit;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }

  .subHeader .menuControl .sec-solutions{ display:none !important; }
  .subHeader .menuControl .sec-solutions-mobile{
    display:block;
    width:100%;
  }

  .sec-solutions-mobile .acc-item{ border-bottom:1px solid rgba(0,0,0,.1); }
  .sec-solutions-mobile .acc-head{ padding:14px 16px; }
  .sec-solutions-mobile .acc-body{ padding:0 16px 12px 44px; }

  .sec-solutions-mobile .acc-topbar{
    position: sticky; top: 0; background:#fff; z-index: 2;
  }

  .subHeader .sec-item .ico img,
  .subHeader .sec-solutions-mobile .acc-head .ico img{
    filter:
      drop-shadow(0 0 1px rgba(0,0,0,.55))
      drop-shadow(0 0 2px rgba(0,0,0,.35))
      drop-shadow(0 1px 0 rgba(0,0,0,.25))
      drop-shadow(0 -1px 0 rgba(0,0,0,.25))
      drop-shadow(1px 0 0 rgba(0,0,0,.25))
      drop-shadow(-1px 0 0 rgba(0,0,0,.25));
  }

  .subHeader .sec-item .ico,
  .subHeader .sec-solutions-mobile .acc-head .ico{
    width:36px; height:36px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.08);
  }
  .subHeader .sec-item .ico img,
  .subHeader .sec-solutions-mobile .acc-head .ico img{
    max-width:22px; max-height:22px; object-fit:contain;
  }
}

/* สไตล์ accordion (mobile) */
.sec-solutions-mobile .acc-list{
  list-style:none; padding:0; margin:0;
}
.sec-solutions-mobile .acc-item{
  border-bottom:1px solid rgba(0,0,0,.08);
}

.sec-solutions-mobile .acc-head{
  width:100%;
  display:flex; align-items:center; gap:12px;
  background:transparent; border:0; padding:12px 0;
  font: inherit; color: inherit; text-align:left;
}
.sec-solutions-mobile .acc-head .ico img{
  width:28px; height:28px; object-fit:contain; display:block;
}
.sec-solutions-mobile .acc-head .name{
  flex:1 1 auto;
}
.sec-solutions-mobile .acc-head .go{
  margin-left:auto; font-size:22px; line-height:1; user-select:none;
}
.sec-solutions-mobile .acc-body{
  display:none;
  list-style:none; padding:0 0 10px 44px; margin:0;
}
.sec-solutions-mobile .acc-item.open .acc-body{ display:block; }
.sec-solutions-mobile .acc-product a{
  display:block; padding:6px 0; text-decoration:none; color:inherit;
}
.sec-solutions-mobile .acc-product a:hover{ text-decoration:underline; }
.sec-solutions-mobile .acc-empty{
  color:#777; padding:6px 0 10px 0;
}

.sec-solutions-mobile .acc-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; width:100%;
}
.sec-solutions-mobile .acc-title{
  font-size:20px; font-weight:800; line-height:1.1;
}

.itemBG {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.itemBG video,
.itemBG .bgImage {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ให้ครอบเต็ม */
  display: block;
}
.itemBG .bgImage {
  background-size: cover;
  background-position: center;
}