/*@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@300;400;500;600;700&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');
    :root{
      --bluemain:#0099FF;
      --ghostwhite:#F8F8FF;
      --primary:#0d6efd;           /* Blue */
      --primary-700:#0a58ca;       /* Deeper Blue */
      --ink:#1b1f23;
      --muted:#6b7280;
      --bg:#ffffff;
      --surface:#f7f9ff;           /* very light blue surface */
      --radius:12px;
      --max:1200px;
      --ring: rgba(13,110,253,.28);
    }
    *{box-sizing:border-box}

    .row{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}
    [class*="col-"]{padding-left:0.5rem;padding-right:0.5rem;box-sizing:border-box}
    @media(max-width:575.98px){.col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}.col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%}.col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}.col-12{width:100%}}
    @media(min-width:576px) and (max-width:767.98px){.col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}.col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}.col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}.col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}}
    @media(min-width:768px) and (max-width:991.98px){.col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}.col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}}
    @media(min-width:992px) and (max-width:1199.98px){.col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}.col-lg-4{width:33.3333%}.col-lg-5{width:41.6667%}.col-lg-6{width:50%}.col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}.col-lg-9{width:75%}.col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}}
    @media(min-width:1200px){.col-xl-1{width:8.3333%}.col-xl-2{width:16.6667%}.col-xl-3{width:25%}.col-xl-4{width:33.3333%}.col-xl-5{width:41.6667%}.col-xl-6{width:50%}.col-xl-7{width:58.3333%}.col-xl-8{width:66.6667%}.col-xl-9{width:75%}.col-xl-10{width:83.3333%}.col-xl-11{width:91.6667%}.col-xl-12{width:100%}}

    body{
      margin:0;
      /*font-family: 'Anuphan', sans-serif;*/
      font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      background:var(--bg);
      color:var(--ink);line-height:1.6;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%}
    .container{
      max-width:var(--max);
      margin: auto;
      padding:0 20px
    }

    h1 {
      font-size: clamp(1.75rem, 5vw, 3rem);   /* 28px → 48px */
      font-weight: bold;
      line-height: 1.2;
    }

    h2 {
      font-size: clamp(1.5rem, 4vw, 2.25rem); /* 24px → 36px */
      font-weight: bold;
      line-height: 1.3;
      margin: 30px 0 5px 0;
    }

    h3 {
      font-size: clamp(1.25rem, 3.5vw, 1.75rem); /* 20px → 28px */
      font-weight: bold;
      line-height: 1.4;
    }

    h4 {
      font-size: clamp(1.125rem, 3vw, 1.5rem); /* 18px → 24px */
      font-weight: 600;
      line-height: 1.4;
    }

    h5 {
      font-size: clamp(1rem, 2.5vw, 1.25rem); /* 16px → 20px */
      font-weight: 600;
      line-height: 1.5;
    }

    /* ----------------------- */
    .hero-section {
      /*background: linear-gradient(rgba(0, 0, 0,0.4), rgba(0, 0, 0,0.4)),
      url('./images/banner-sub-injector-repair.jpg?ver=997') center/cover no-repeat;*/

      background: linear-gradient(145deg, #33b8ff 0%, #009eff 50%, #33b8ff 100%);
      display: flex;
      align-items: center;          /* กึ่งกลางแนวตั้ง */
      justify-content: center;      /* กึ่งกลางแนวนอน */
      text-align: center;           /* ข้อความจัดกึ่งกลาง */
      margin-bottom: 30px;
      padding: 30px 20px;
    }
    .hero-section h2 {
      font-size: clamp(30px, 4vw, 42px);
      color: #fff;
      margin: 0 0 0;
      text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    }
    .hero-section p {
      color: #fff;
      font-size: clamp(18px, 3vw, 24px);
      font-weight: 500;
      letter-spacing: 1px;
      margin: 0 0 0;
      text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    }

    .breadcrumb {
      margin: 0 0 10px;
      font-size: clamp(12px, 2vw, 16px);
    }
    .breadcrumb a {
      text-decoration: none;
      color: #0073e6;
    }
    .breadcrumb a:hover {
      text-decoration: underline;
    }
    .breadcrumb span {
      color: #777;
    }

    .card h2{
      margin: 0;
    }
    .card .subtitle{
      margin: 0 0 15px 0;
    }
    .card p{
      font-size: clamp(16px, 2vw, 18px);
    }
    .card .title-one{
      margin: 0;
      font-weight: 600;
      padding: 0 0 5px;
      border-bottom: solid 1px black;
    }
    .card .title-two{
      font-weight: 600;
      margin: 0 0;
    }
    .card .title-three{
      font-weight: normal;
      margin: 0 0;
    }
    .card .title-four{
      font-weight: normal;
      padding: 5px 0 0;
      border-top: solid 1px black;
    }

    ol{
      margin: 15px 0;
      padding: 0 0 0 20px;
      font-size: clamp(14px, 2vw, 18px);
      font-weight: 600;

    }
    .card .tips{
      margin: 0 0 10px;
    }

    .subtitle-service{
      font-size: clamp(14px, 2vw, 16px);
      line-height: 23px;
      letter-spacing: 1px;
      text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    }

    @media(max-width: 575.98px){

      .breadcrumb {
        margin: 0 0 10px;
        font-size: 12px;
      }

      .hero-section {
        background-position: 30% center;
      }

    }
    /* ----------------------- */

    .btn{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      margin: 10px 0 0 0;
      padding:.3rem 1rem;
      border-radius:999px;
      border:1px solid transparent;
      font-size: 14px;
      font-weight:650;
      cursor:pointer;
      transition:.15s ease-in-out
    }
    .btn.primary{background:var(--primary);color:#fff}
    .btn.primary:hover{background:var(--primary-700)}
    .btn.ghost{border-color:#dbe2ff;color:#0b3c9d;background:#fff}
    .btn.ghost:hover{background:#edf3ff}
    :is(a,button,input):focus{outline:3px solid var(--ring);outline-offset:2px}

    /* NAVBAR */
    .nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e9eefb}
    .nav .rowmenu{height:60px;display:flex;align-items:center}
    .brand{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
    .brand-logo {
      height: 30px;
      width: auto;
      display: block;
    }
    .spacer{flex:1}
    .menu{display:flex;gap:1rem;align-items:center;margin-left:auto}
    .menu>li{position:relative;list-style:none}
    .menu>li>a{padding:.5rem .6rem;display:flex;align-items:center;gap:.25rem;border-radius:10px}
    .menu>li>a:hover{background:#edf3ff;color:#0b3c9d}
    .caret {
      font-size: 1.2rem;
      font-weight: bold;
      opacity: 0.9;
    }
    .dropdown{
      position:absolute;left:0;top:100%;min-width:220px;background:#fff;
      border:1px solid #e9eefb;border-radius:var(--radius);
      box-shadow:0 10px 26px rgba(0,20,60,.08);
      display:none;flex-direction:column;padding:.5rem 0;z-index:200
    }
    .dropdown a{padding:.55rem 1rem;white-space:nowrap;border-radius:8px;margin:0 .25rem}
    .dropdown a:hover{background:#edf3ff;color:#0b3c9d}
    .menu>li:focus-within .dropdown,.menu>li:hover .dropdown{display:flex}
    .hamburger {
      display: none;
      border: none;
      background: none;
      font-size: 2rem;
      margin: 0 auto;   /* เว้นซ้าย-ขวาอัตโนมัติ */
    }

    /* BANNER */
    .banner {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid #e9eefb;
      height: 85vh;          /* เต็มจอ */
      /*min-height: 400px;*/      /* กันกรณีมือถือเล็กมาก */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* สไลด์ใช้ fade ด้วย opacity (ไม่ใช้ display) */
    .banner-slide{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:center;
      filter:brightness(.70);
      display:block;
      opacity:0;
      transition:opacity .8s ease;
      will-change:opacity;
      z-index:0;              /* ✅ ให้สไลด์อยู่ชั้นล่าง */
      pointer-events:none;    /* ไม่บังการคลิกปุ่ม */
    }
    .banner-slide.active{
      opacity:1;
      z-index:0;              /* ✅ ไม่ต้องดันขึ้น */
    }

    .banner-slide::before{
      content:"";
      position:absolute;
      inset:0;
      /*background:rgba(0,0,0,.30);*/
      z-index:1;              /* อยู่เหนือรูป แต่ยังอยู่ใต้ข้อความเพราะสไลด์ z=0 */
      pointer-events:none;
    }

    /* ข้อความทับบนสุดเสมอ */
    .banner-text{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      display:flex;align-items:center;justify-content:center;
      text-align:center;padding:0 10%;
      box-sizing:border-box;
      z-index:5;              /* ✅ สูงกว่าสไลด์และ overlay */
      pointer-events:none;    /* ให้คลิกปุ่มได้ */
    }
    .banner-text h1{
      color:#fff;
      font-size:clamp(1.2rem,3.5vw,2.6rem);
      line-height:1.5;
      font-weight:800;
      text-shadow:0 0 15px rgba(255,255,255,.4);
      margin:0;
    }

    /* ปุ่ม/จุดควบคุมให้ลอยบนสุด */
    .arrows{
      position:absolute;inset:0;
      display:flex;justify-content:space-between;align-items:center;
      padding:0 5px;
      z-index:10;            /* ✅ บนข้อความอีกที */
      pointer-events:none;
    }
    .arrows button{
      pointer-events:auto;
      background:transparent;border:none;color:#fff;
      font-size:1.5rem;cursor:pointer;padding:0 .5rem;
    }
    .arrows button:hover{ color:#00CCFF; }

    .dots{
      position:absolute;bottom:12px;left:0;right:0;
      display:flex;justify-content:center;gap:.4rem;
      z-index:10;
    }
    .dots button{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: none;
      background: #ccc;
      margin: 0 1px;
      transition: all 0.3s ease;
    }
    .dots button.active{
      width: 30px;        /* ยืดความกว้าง */
      height: 10px;       /* สูงเท่าเดิม */
      border-radius: 20px; /* ทำให้เป็น pill shape */
      background: #fff;
    }

    /* โปรโมชั่น */
    .promo-scroller {
      display:flex;
      gap:1rem;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      flex-wrap: nowrap;
      padding: .25rem 6vw .25rem .25rem;
      scrollbar-width: none;
      -ms-overflow-style: none;
      touch-action: pan-x pan-y;       /* ✅ อนุญาตให้ปัดได้ทั้ง 2 ทิศ */
      overscroll-behavior-x: contain;
    }
    .promo-scroller::-webkit-scrollbar{ 
      display:none;
    }
    /* Desktop: 3 ใบ + เผื่อให้ใบที่ 4 โผล่ ~30% */
    .promo-card {
      flex: 0 0 calc((100% - 1rem) / 2.3);
      min-width: 300px;
    }

    /* ระหว่างลาก/ปัด: ปิด snap ชั่วคราว */
    .promo-scroller.dragging{
      cursor: grabbing;
      user-select: none;
      scroll-behavior: auto;
    }
    /* ปิด snap ชั่วคราวบนมือถือขณะสัมผัส */
    .promo-scroller.no-snap{
      scroll-snap-type: none !important;
    }

    /* บริการของเรา */
    .service-card{
      position: relative;
      border: none;
      padding: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow);
      background: transparent;
      margin-bottom: 10px;
      min-height: 350px;
    }
    .service-card > img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;         /* เทียบเท่า background-size: cover */
      z-index: 0;                /* เป็นชั้นล่างสุด */
      transition: transform .35s ease;
    }
    .service-card::before{
      content: none;
    }
    /* Overlay gradient เหนือภาพ */
    .service-card::after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(2,6,23,.10) 60%, rgba(2,6,23,.70) 100%);
      z-index: 1;
    }
    /* ลิงก์คลุมทั้งการ์ด อยู่บนสุดเพื่อคลิกได้ */
    .service-card .link{
      position: absolute;
      inset: 0;
      display: block;
      z-index: 3;
    }
    /* เนื้อหา */
    .service-card .content{
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 12px;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,.35);
      z-index: 2; /* อยู่เหนือ overlay */
    }
    .service-card .title{
      margin: 0;
      font-weight: 800;
      font-size: 1.3rem;
      letter-spacing: .5px;
    }
    .service-card .subtitle{
      margin-top: 0;
      font-size: 1rem;
      opacity: .95;
      text-transform: uppercase;
      letter-spacing: .6px;
    }
    /* เอฟเฟกต์ hover: scale ที่รูป */
    .service-card:hover > img{
      transform: scale(1.05);
    }
    .service-card:hover::after{
      background: linear-gradient(180deg, rgba(1,157,255,.25), rgba(2,6,23,.6));
    }

    /* เกร็ดความรู้ */
    .card .title-tips{
      margin-top: -10px;
      color: #000;
      font-weight: 500;
      font-size: 1.2rem;
      letter-spacing: .2px;
    }

    /* Tablet */
    @media (max-width:1100px){
      .promo-card{ flex:0 0 calc((100% - 1rem)/2.1); }
      .promo-scroller{ padding-right:8vw; }
    }

    /* Mobile */
    @media (max-width:768px){
      .promo-card{ flex:0 0 70%; }
      .promo-scroller{ padding-right:12vw; }
    }

    /* จอเล็กมาก */
    @media (max-width:480px){
      .promo-card{ flex:0 0 85%; }
      .promo-scroller{ padding-right:15vw; }
    }

    /* รูปในการ์ด – กันลากรูปติดเมาส์ */
    .promo-card .thumb img{
      width:100%; height:auto; display:block;
      user-drag:none; -webkit-user-drag:none; pointer-events:none;
    }

    /* NEWS / KNOWLEDGE */
    .nk-tabs{display:flex;gap:.5rem;flex-wrap:wrap}
    .nk-tabs button{border:none;background:#eef4ff;color:#0b3c9d;padding:.45rem .9rem;border-radius:999px;cursor:pointer;font-weight:700}
    .nk-tabs button.active{background:var(--primary);color:#fff}
    .card{
      background:#fff;
      border:1px solid #e9eefb;
      border-radius:var(--radius);
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    /*.card .thumb{aspect-ratio:16/9;background:linear-gradient(180deg,#eef4ff,#e7f0ff)}*/
    .card .body{padding:0.8rem 1rem}
    .card .kicker{color:#0b3c9d;font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.02em}
    .card h3{
      margin: 2px 0 0;
      font-size: 1.3rem;
    }
    .meta{font-size:.9rem;color:var(--muted)}

    /* MAP */
    .mapbox{
      border:1px solid #e9eefb;
      border-radius:var(--radius);
      overflow:hidden;
      background:#fff;
      margin-bottom: 10px;
    }
    .mapbox iframe{width:100%;height:320px;border:0}
    .mapbox .body{
      padding:1rem;
      text-align: left;
    }

    /* FOOTER */
    footer{/*margin-top:2rem;*/background:#0b1b3d;color:#eaf1ff}
    .footer-grid{
      display:grid;
      grid-template-columns:2fr 1fr 1fr;
      gap:1.2rem;
      /*padding-top: 20px;*/
      padding:1rem 20px;
    }
    footer h5{margin:.2rem 0 1rem}
    footer a{color:#eaf1ff}
    .sub{
      border-top:1px solid rgba(255,255,255,.15);
      padding-top: 10px;
      padding-bottom: 10px;
      color:#cfdaf7;
      font-size:.95rem;
      text-align: center;
    }

    /* RESPONSIVE */
    @media(max-width:575.98px){
      .hamburger{
        display:block;
      }
      .menu{
        display:none;
        flex-direction:column;
        align-items:flex-start;
        background:#fff;
        position:absolute;
        top:40px;
        left:0;
        right:0;
        border-bottom:1px solid #e9eefb;
        padding:1rem;
        margin-left:0;
      }
      .menu.show{
        display:flex;
      }
      .menu>li{
        width:100%;
      }
      .dropdown{
        position:static;
        min-width:100%;
        border:none;
        box-shadow:none;
        display:none;
        padding:0;
      }
      .menu>li.open>.dropdown{
        display:flex;
      }

      .pc-break {
        display: none;
      }

      .footer-grid{
        grid-template-columns:1fr;
      }
      .fac-grid{
        grid-template-columns:repeat(1,1fr);
      }
      .banner {
        height: 30vh;        
        min-height: 100%; 
      }
      .banner-text h1{
        line-height:1.5;
        font-weight:650;
      }
      .card h3{
        font-size:1.2rem;
      }
      .card .title-tips{
        font-size: 1rem;
      }
    }
    @media(min-width:576px) and (max-width:767.98px){

      .fac-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .hamburger{
        display:block;
      }
      .menu{
        display:none;
        flex-direction:column;
        align-items:flex-start;
        background:#fff;
        position:absolute;
        top:40px;
        left:0;
        right:0;
        border-bottom:1px solid #e9eefb;
        padding:1rem;
        margin-left:0;
      }
      .menu.show{
        display:flex;
      }
      .menu>li{
        width:100%;
      }
      .dropdown{
        position:static;
        min-width:100%;
        border:none;
        box-shadow:none;
        display:none;
        padding:0;
      }
      .menu>li.open>.dropdown{
        display:flex;
      }

      .pc-break {
        display: inline;
      }

      .knowledge-grid{
        grid-template-columns:1fr;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }

      .banner {
        height: 30vh;        
        min-height: 100%; 
      }
      .banner-text h1{
        line-height:1.5;
        font-weight:650;
      }

      .card .title-tips{
        font-size: 1rem;
      }
    }
    @media(min-width:768px) and (max-width:991.98px){

      .fac-grid{
        grid-template-columns:repeat(3,1fr);
      }

      .pc-break {
        display: inline;
      }

      .banner {
        height: 50vh;        
        min-height: 100%; 
      }
      .banner-text h1{
        line-height:1.5;
        font-weight:650;
      }
      .card .title-tips{
        font-size: 1rem;
      }
    }
    @media(min-width:992px) and (max-width:1199.98px){

      .fac-grid{
        grid-template-columns:repeat(3,1fr);
      }

      .banner {
        height: 70vh;          /* เต็มจอ */
        min-height: 400px;      /* กันกรณีมือถือเล็กมาก */
      }
      .banner-text h1{
        line-height:1.5;
        font-weight:650;
      }

    }
    @media(min-width:1200px){

    }