/* ══════════════════════════════════════════════════════════
   โทน ขาว + ฟ้า · หัวเรื่องตัวใหญ่น้ำหนักบาง (Kanit 300/400)
   ฟ้าหลัก #1668C4 เลือกให้เข้ากับกรมท่าในโลโก้ ไม่ตีกัน
   ══════════════════════════════════════════════════════════ */
:root{
  --ground:#FFFFFF;   --tint:#F5F8FC;     --tint-2:#E9F1FA;
  --ink:#1F2C3A;      --body:#4C5866;     --muted:#7E8B99;
  --line:#E2EAF3;     --line-2:#EFF4F9;
  --blue:#1668C4;     --blue-deep:#0E4C93; --blue-bright:#2E9BF0;
  --blue-soft:#E8F1FB; --on-blue:#FFFFFF;
  --hero-1:#0E4C93;   --hero-2:#1B76D1;   --on-hero:#FFFFFF;
  --hero-ov:linear-gradient(135deg,rgba(11,62,122,.95) 0%,rgba(20,105,190,.90) 58%,rgba(40,146,231,.84) 130%);
  --red:#E8232A;
  --lift:0 1px 2px rgba(31,44,58,.05), 0 14px 34px -16px rgba(22,104,196,.30);
  --lift-2:0 2px 6px rgba(31,44,58,.07), 0 26px 56px -22px rgba(22,104,196,.42);

  --f-head:"Kanit","Noto Sans Thai",system-ui,sans-serif;
  --f-body:"Noto Sans Thai","Kanit",system-ui,sans-serif;

  --wrap:1200px; --r:10px; --r-lg:16px; --pill:999px;
  --logo-bg:transparent; --logo-pad:0;
  --t1:1.0625rem; --t2:1.25rem; --t3:1.75rem; --t4:2.4rem; --t5:3rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101820; --tint:#161F29;    --tint-2:#1C2733;
    --ink:#EAF1F8;    --body:#A9B6C4;    --muted:#7A8794;
    --line:#26323F;   --line-2:#1B242E;
    --blue:#4EA4F5;   --blue-deep:#2E86DC; --blue-bright:#6FBBFF;
    --blue-soft:#132539; --on-blue:#08131F;
    --hero-1:#0A2B4E;  --hero-2:#124A85;  --on-hero:#EAF1F8;
    --hero-ov:linear-gradient(135deg,rgba(4,20,38,.96) 0%,rgba(10,48,90,.93) 58%,rgba(15,66,120,.90) 130%);
    --red:#FF4C52;   --logo-bg:#FFFFFF; --logo-pad:6px 11px;
    --lift:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.8);
    --lift-2:0 2px 6px rgba(0,0,0,.55), 0 26px 56px -22px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#101820;   --tint:#161F29;    --tint-2:#1C2733;
  --ink:#EAF1F8;      --body:#A9B6C4;    --muted:#7A8794;
  --line:#26323F;     --line-2:#1B242E;
  --blue:#4EA4F5;     --blue-deep:#2E86DC; --blue-bright:#6FBBFF;
  --blue-soft:#132539; --on-blue:#08131F;
  --hero-1:#0A2B4E;   --hero-2:#124A85;  --on-hero:#EAF1F8;
  --hero-ov:linear-gradient(135deg,rgba(4,20,38,.96) 0%,rgba(10,48,90,.93) 58%,rgba(15,66,120,.90) 130%);
  --red:#FF4C52;     --logo-bg:#FFFFFF; --logo-pad:6px 11px;
  --lift:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.8);
  --lift-2:0 2px 6px rgba(0,0,0,.55), 0 26px 56px -22px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--body);
     font-family:var(--f-body); font-size:var(--t1); line-height:1.8; -webkit-font-smoothing:antialiased}
/* ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงตัดบรรทัดกลางคำได้ (เจอจริง: "ติด/ตั้ง")
   keep-all บังคับให้ตัดที่ช่องว่างเท่านั้น */
h1,h2,h3,h4{font-family:var(--f-head); color:var(--ink); margin:0; line-height:1.3;
            text-wrap:balance; word-break:keep-all; overflow-wrap:break-word}
h1{font-weight:300} h2{font-weight:300} h3{font-weight:500} h4{font-weight:500}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:26px}
section{padding:92px 0}
.tinted{background:var(--tint)}

.kicker{display:block; font-family:var(--f-head); font-weight:500; font-size:.92rem;
        letter-spacing:.08em; color:var(--blue); text-transform:uppercase; margin-bottom:12px}
.sec-head{max-width:62ch; margin-bottom:52px}
.sec-head.mid{margin-inline:auto; text-align:center}
.sec-head h2{font-size:var(--t4)}
.sec-head p{margin-top:16px; font-size:var(--t2); color:var(--body); font-weight:400}

.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 30px; border-radius:var(--pill);
     font-family:var(--f-head); font-weight:500; font-size:1rem; text-decoration:none;
     background:var(--blue); color:var(--on-blue); border:2px solid var(--blue); cursor:pointer;
     transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, color .18s, border-color .18s}
.btn:hover,.btn:focus-visible{background:var(--blue-deep); border-color:var(--blue-deep);
     transform:translateY(-2px); box-shadow:var(--lift-2)}
.btn-o{background:transparent; color:var(--blue); border-color:var(--blue)}
.btn-o:hover,.btn-o:focus-visible{background:var(--blue); color:var(--on-blue)}
.btn-w{background:var(--on-hero); color:var(--hero-1); border-color:var(--on-hero)}
.btn-w:hover,.btn-w:focus-visible{background:transparent; color:var(--on-hero); border-color:var(--on-hero)}

/* ── หัวเว็บ ─────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--ground) 92%,transparent);
     backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2)}
.top-in{display:flex; align-items:center; gap:30px; height:80px}
/* โลโก้เป็นกรมท่าเข้ม อยู่บนพื้นมืดแล้วจม — ธีมมืดจึงรองพื้นขาวให้ ธีมสว่างโปร่งใส */
.logo{margin-right:auto; text-decoration:none; display:flex; align-items:center;
      background:var(--logo-bg); padding:var(--logo-pad); border-radius:8px}
.logo img{height:44px; width:auto}
.nav{display:flex; gap:28px}
.nav a{font-family:var(--f-head); font-weight:400; font-size:1rem; text-decoration:none;
       color:var(--body); position:relative; padding:6px 0}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
              background:var(--blue); border-radius:2px; transition:right .24s cubic-bezier(.2,.7,.3,1)}
.nav a:hover,.nav a:focus-visible{color:var(--blue)}
.nav a:hover::after,.nav a:focus-visible::after{right:0}

/* ── ฮีโร่ฟ้า ────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:82px 0 92px; color:var(--on-hero);
      background-image:var(--hero-ov), url("/img/videowall.jpg");
      background-size:cover; background-position:center; background-repeat:no-repeat}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(52% 62% at 88% 8%, rgba(255,255,255,.16) 0%, transparent 62%)}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
         gap:56px; align-items:center}
.hero h1{font-size:var(--t5); color:var(--on-hero); font-weight:300}
.hero h1 b{font-weight:600}
.hero .kicker{color:color-mix(in srgb,var(--on-hero) 82%,transparent)}
.hero-lead{margin-top:22px; font-size:var(--t2); max-width:36ch;
           color:color-mix(in srgb,var(--on-hero) 88%,transparent)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.hero-facts{display:flex; gap:38px; flex-wrap:wrap; margin-top:42px; padding-top:28px;
            border-top:1px solid color-mix(in srgb,var(--on-hero) 26%,transparent)}
.hero-facts b{display:block; font-family:var(--f-head); font-weight:500; font-size:var(--t3); color:var(--on-hero)}
.hero-facts small{font-size:.94rem; color:color-mix(in srgb,var(--on-hero) 76%,transparent)}

/* ── การ์ดรูปตัดอาคาร (ขาวลอยบนฟ้า) ─────────────────── */
.viz{background:var(--ground); border-radius:var(--r-lg); padding:26px; box-shadow:var(--lift-2)}
.viz-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:16px}
.viz-head h3{font-size:1.12rem}
.viz-head small{font-family:var(--f-head); color:var(--blue); font-weight:500}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.chips button{font-family:var(--f-head); font-weight:400; font-size:.9rem; padding:8px 17px;
  border-radius:var(--pill); background:var(--ground); color:var(--body);
  border:1.5px solid var(--line); cursor:pointer; transition:all .16s}
.chips button:hover{color:var(--blue); border-color:var(--blue)}
.chips button[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:var(--on-blue)}
.viz-note{margin-top:18px; padding:15px 18px; border-radius:var(--r); background:var(--blue-soft);
  font-size:.95rem; color:var(--body); display:flex; gap:11px; align-items:flex-start}
.viz-note b{color:var(--blue); flex:none; font-family:var(--f-head); font-weight:500}

/* ── ภาพ 3 มิติ ประเภทอาคาร ────────────────────────────
 * เวทีคุมสัดส่วน 3:2 ไว้ตายตัว รูปทุกใบถูกครอปมาเป็น 3:2 เท่ากันหมดแล้ว
 * ความสูงจึงไม่กระโดดตอนสลับอาคาร (ก่อนหน้านี้ไฟล์ต้นฉบับมีทั้ง 3:2 และ 4:3)
 * ป้ายชื่ออุปกรณ์เป็น "ข้อความจริง" ทับบนรูป ไม่ใช่ตัวอักษรที่ AI วาดมาในภาพ
 * (AI เขียนไทยในภาพเพี้ยนเสมอ และ Google อ่านตัวอักษรในรูปไม่ออก) */
.viz-stage{position:relative; border-radius:var(--r); overflow:hidden; background:#07203f;
  aspect-ratio:3/2; box-shadow:inset 0 0 0 1px rgba(120,180,255,.16); container-type:inline-size}
.viz-shot{position:absolute; inset:0; opacity:0; transition:opacity .35s ease}
.viz-shot.on{opacity:1}
.viz-shot[hidden]{display:none}
.viz-shot img{width:100%; height:100%; object-fit:cover; display:block}
/* ป้ายเกาะขอบซ้าย-ขวาของเฟรม ไม่ผูกกับพิกัด x ของวงกลมในภาพ
 * เพราะวงกลมของแต่ละใบเยื้องกันเล็กน้อย แต่ทุกใบอยู่ชิดขอบเหมือนกัน */
.pin{position:absolute; left:2.6%; transform:translateY(-50%); max-width:44%;
  font-family:var(--f-body); font-size:.76rem; font-weight:600; line-height:1.35; color:#eaf3ff;
  background:rgba(5,20,46,.78); border:1px solid rgba(125,185,255,.5); border-radius:var(--pill);
  padding:3px 11px; white-space:nowrap; pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.pin.r{left:auto; right:2.6%}
.pin.y1{top:25.5%} .pin.y2{top:62%} .pin.y3{top:91.5%}
.viz-more{display:block; margin-top:14px; font-family:var(--f-head); font-weight:500;
  font-size:.92rem; color:var(--blue); text-decoration:none}
.viz-more:hover,.viz-more:focus-visible{text-decoration:underline}
/* สำรองให้เบราว์เซอร์เก่าที่ยังไม่รู้จัก container query (ตัวใหม่ใช้ @supports ด้านล่างแทน) */
@media (max-width:560px){ .pin{font-size:.62rem; padding:2px 7px; max-width:46%} }
/* ป้ายต้องย่อ-ขยายตามความกว้างของ "เวที" ไม่ใช่ตามความกว้างจอ
 * เพราะการ์ดนี้อยู่ในคอลัมน์ที่กว้างไม่เท่ากันในแต่ละช่วงจอ (ฮีโร่ 2 คอลัมน์ vs เรียงลงมาชั้นเดียว)
 * ใช้ media query อย่างเดียวจะได้ป้ายใหญ่เกินตอนจอกว้างแต่การ์ดแคบ — ต้องอยู่หลัง media query ถึงจะชนะ */
@supports (font-size:1cqw){ .pin{font-size:clamp(.58rem,2.4cqw,.8rem); padding:.22em .8em} }

/* ── การ์ดประเภทอาคาร (ใช้ภาพ 3 มิติชุดเดียวกับฮีโร่) ──
 * รูปย่อคนละไฟล์กับฮีโร่ (bld-xxx-sm.jpg ~57KB) การ์ดกว้างจริงแค่ ~300px
 * ถ้าใช้ไฟล์ 1200px ใบเดียวกันคือโหลดเกินจำเป็น 3 เท่าโดยไม่ได้อะไรเพิ่ม */
.card-b{padding:0; gap:0; overflow:hidden}
.card-b .thumb{aspect-ratio:3/2; background:#07203f; overflow:hidden}
.card-b .thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card-b:hover .thumb img,.card-b:focus-visible .thumb img{transform:scale(1.05)}
.card-b .thumb.blank{display:grid; place-items:center; background:var(--blue-soft); color:var(--blue)}
.card-b .thumb.blank svg{width:46px; height:46px; stroke:currentColor; fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round}
.card-b .bd{padding:24px 26px 28px; display:flex; flex-direction:column; gap:11px}
.card-b .sys{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px}
.card-b .sys span{font-family:var(--f-head); font-weight:400; font-size:.78rem; color:var(--blue);
  background:var(--blue-soft); border-radius:var(--pill); padding:3px 10px; white-space:nowrap}

/* ── แถบจุดเด่น ─────────────────────────────────────── */
.props{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.prop{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding:8px}
.circ{width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
      background:var(--blue-soft); color:var(--blue); flex:none}
.circ svg{width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.6;
          stroke-linecap:round; stroke-linejoin:round}
.prop h3{font-size:1.16rem}
.prop p{font-size:.94rem}

/* ── กริดการ์ด ───────────────────────────────────────── */
.grid{display:grid; gap:20px}
.g4{grid-template-columns:repeat(4,1fr)}
.gauto{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--ground); border:1px solid var(--line); border-radius:var(--r);
      padding:30px 26px; display:flex; flex-direction:column; gap:13px;
      text-decoration:none; color:inherit;
      transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s}
.card:hover,.card:focus-visible{transform:translateY(-5px); box-shadow:var(--lift); border-color:var(--blue)}
.card h3{font-size:1.24rem}
.card p{font-size:.94rem}
.ico{width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
     background:var(--blue-soft); color:var(--blue); flex:none}
.ico svg{width:25px; height:25px; stroke:currentColor; fill:none; stroke-width:1.6;
         stroke-linecap:round; stroke-linejoin:round}
.tag{font-family:var(--f-head); font-size:.72rem; font-weight:500; letter-spacing:.1em;
     color:var(--blue); align-self:flex-start}

/* ── ทำไมต้องเรา ─────────────────────────────────────── */
.why{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.why-list{display:flex; flex-direction:column; gap:22px}
.why-item{display:flex; gap:16px; align-items:flex-start}
.why-item .mark{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
                background:var(--blue); color:var(--on-blue)}
.why-item .mark svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.6;
                    stroke-linecap:round; stroke-linejoin:round}
.why-item h3{font-size:1.14rem; margin-bottom:3px}
.why-item p{font-size:.94rem}

/* ── ขั้นตอน ─────────────────────────────────────────── */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative}
.flow::before{content:""; position:absolute; left:7%; right:7%; top:31px; height:2px;
  background:linear-gradient(90deg,var(--line),var(--blue),var(--line)); border-radius:2px}
.stepc{position:relative; display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.stepc .dot{width:62px; height:62px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--ground); border:2px solid var(--blue); color:var(--blue);
  font-family:var(--f-head); font-weight:500; font-size:1.2rem; z-index:1}
.tinted .stepc .dot{background:var(--tint)}
.stepc h3{font-size:1.1rem}
.stepc p{font-size:.92rem}

/* ── ผลงาน / ลูกค้า (รอข้อมูลจริง) ─────────────────── */
.slot{border-radius:var(--r); border:2px dashed color-mix(in srgb,var(--blue) 45%,var(--line));
      background:var(--blue-soft); min-height:200px; padding:24px;
      display:flex; flex-direction:column; justify-content:flex-end; gap:6px}
.slot b{font-family:var(--f-head); font-weight:500; font-size:1.06rem; color:var(--blue)}
.slot span{font-size:.92rem}
.brands{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px}
.brand-grp h3{font-family:var(--f-head); font-size:1rem; font-weight:500; color:var(--ink);
  margin:0 0 10px; padding-bottom:8px; border-bottom:2px solid var(--blue); word-break:keep-all}
.brand-grp ul{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.brand-grp li{background:var(--ground); border:1px solid var(--line); border-radius:var(--pill);
  padding:6px 13px; font-size:.9rem; color:var(--body)}
.clients{display:flex; flex-wrap:wrap; gap:10px}
.clients span{background:var(--ground); border:1px solid var(--line); border-radius:var(--pill);
  padding:9px 18px; font-size:.93rem; color:var(--ink)}
.logos{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.logos div{aspect-ratio:5/3; border-radius:var(--r); border:1.5px dashed var(--line);
  display:grid; place-items:center; color:var(--muted); font-size:.82rem; text-align:center; padding:8px}

/* ── ปิดท้าย ─────────────────────────────────────────── */
.close{border-radius:var(--r-lg); padding:64px 56px; color:var(--on-hero);
  background:linear-gradient(120deg,var(--hero-1) 0%,var(--hero-2) 70%,var(--blue-bright) 140%);
  display:grid; grid-template-columns:1.2fr .9fr; gap:46px; align-items:center}
.close h2{color:var(--on-hero); font-size:var(--t4)}
.close p{margin-top:16px; font-size:var(--t2); color:color-mix(in srgb,var(--on-hero) 85%,transparent)}
.close .btn{margin-top:28px}
/* ฝั่งซ้ายมีที่ว่างใต้ปุ่มโทรอยู่แล้ว (ความสูงถูกดันด้วยฝั่งขวาที่มี 4 กลุ่ม) — วาง QR ตรงนั้นแทน
 * ที่จะไปแนบใน .reach-grp เพราะจะทำให้กลุ่มนั้นสูงผิดปกติจนกลุ่มอื่นเบียดกัน (ลองมาแล้ว)
 * ไม่ตั้ง height:100%/justify-content:space-between เพราะจะดันทั้งบล็อกไปชิดขอบล่างสุด
 * ปล่อยให้ไหลตามเนื้อหาแทน แล้วให้ align-items:center ของ .close (grid) ลอยบล็อกทั้งก้อน
 * ไปกึ่งกลางแนวตั้งของแถวเอง (แถวสูงกว่าเพราะฝั่งขวามี 4 กลุ่ม) — ผลคือ QR ลงมาอยู่แถวกลาง ๆ พอดี */
.close-left{display:flex; flex-direction:column; align-items:flex-start; gap:26px}
/* QR ต้องมีพื้นขาวรองเสมอ (quiet zone) ไม่งั้นสแกนบนพื้นน้ำเงินเข้มของ section นี้ไม่ติด
 * align-self:flex-end ดันไปชิดขอบขวาของคอลัมน์ซ้าย (ใกล้เส้นแบ่งคอลัมน์) ตามจุดที่ผู้ใช้ชี้ไว้ */
.qr-card{flex:none; align-self:flex-end; background:#fff; border-radius:10px; padding:10px;
  text-align:center; width:108px}
.qr-card img{width:100%; height:auto; display:block; border-radius:2px}
.qr-card span{display:block; margin-top:6px; font-family:var(--f-body); font-size:.7rem; font-weight:600;
  color:#0a1f3d; line-height:1.3}
.reach{display:flex; flex-direction:column; gap:20px}
.reach-grp{padding-left:15px; border-left:2px solid color-mix(in srgb,var(--on-hero) 38%,transparent)}
.reach-grp h4{font-family:var(--f-head); font-size:.8rem; font-weight:500; letter-spacing:.06em;
  color:color-mix(in srgb,var(--on-hero) 68%,transparent); margin-bottom:5px}
.reach-grp a{display:block; font-family:var(--f-head); font-size:1.1rem; font-weight:500;
  text-decoration:none; padding:2px 0; transition:opacity .16s}
.reach-grp a:hover,.reach-grp a:focus-visible{opacity:.72; text-decoration:underline}

/* แกลเลอรีหน้างาน — ใบแรกกินสองช่องให้เป็นจุดนำสายตา ไม่ใช่ตารางแบน ๆ */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.gal figure{margin:0; position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--tint-2); aspect-ratio:4/3}
.gal figure.wide{grid-column:span 2; grid-row:span 2; aspect-ratio:auto}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption b{display:block; font-weight:600; font-size:.78rem; opacity:.82; margin-bottom:2px}
.gal figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px;
  color:#fff; font-size:.86rem; line-height:1.5;
  background:linear-gradient(to top,rgba(6,20,36,.88) 0%,rgba(6,20,36,.55) 55%,transparent 100%)}
.why-photo{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift); margin-bottom:26px}
.why-photo img{width:100%; height:auto; display:block}
@media (max-width:760px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure.wide{grid-column:span 2; grid-row:auto; aspect-ratio:4/3}
}
/* ทีมงาน — รูปสูงเรียงแถว ให้เห็นคนทำงานจริง ไม่ใช่การ์ดข้อความอีกชุด */
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px}
.team figure{margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4;
  background:var(--tint-2); position:relative}
.team img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.team figure:hover img{transform:scale(1.05)}
.team figcaption{position:absolute; left:0; right:0; bottom:0; padding:30px 14px 13px; color:#fff;
  font-size:.85rem; line-height:1.5;
  background:linear-gradient(to top,rgba(6,20,36,.9) 0%,rgba(6,20,36,.55) 55%,transparent 100%)}
@media (max-width:900px){ .team{grid-template-columns:repeat(2,1fr)} }
/* ไอคอนโซเชียลท้ายเว็บ */
.social{display:flex; gap:10px}
.social a{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--line); color:var(--ink-2, var(--body));
  transition:border-color .18s, color .18s, transform .18s}
.social a:hover,.social a:focus-visible{border-color:var(--blue); color:var(--blue); transform:translateY(-2px)}
.social svg{width:20px; height:20px; fill:currentColor}
footer{border-top:1px solid var(--line); padding:44px 0 58px}
.foot{display:flex; gap:22px; flex-wrap:wrap; justify-content:space-between; align-items:center;
      color:var(--muted); font-size:.9rem}
.foot img{height:34px}
.foot .logo-chip{background:var(--logo-bg); padding:var(--logo-pad); border-radius:8px; display:inline-flex}

@media (max-width:1000px){
  .hero-in,.why{grid-template-columns:1fr; gap:40px}
  .g4,.gauto,.g3,.props{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)} .flow::before{display:none}
  .logos{grid-template-columns:repeat(3,1fr)}
  .close{grid-template-columns:1fr; padding:44px 30px}
  /* จอแคบคอลัมน์เดียว ไม่มี "ขอบคอลัมน์ขวา" ให้ QR ชิดแล้ว — กลับไปชิดซ้ายเหมือนข้อความอื่นในบล็อกนี้ */
  .qr-card{align-self:flex-start}
  .nav{display:none}
  :root{--t5:2.35rem; --t4:1.9rem; --t2:1.12rem}
}
@media (max-width:620px){
  .g4,.gauto,.g3,.props,.flow{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  section{padding:62px 0}
}

.article .shot{margin:28px 0}
/* aspect-ratio จากขนาดจริงของไฟล์ + height:auto — เบราว์เซอร์กันที่ไว้ให้ก่อนรูปมาถึง หน้าไม่กระตุก */
.article .shot img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);display:block}
.article .shot figcaption{margin-top:8px;font-size:13.5px;color:var(--muted);word-break:keep-all}
/* รูปหน้างานส่วนใหญ่ถ่ายแนวตั้งจากมือถือ ปล่อยเต็มความสูงจริงแล้วรูปเปิดเรื่องสูงเกือบ 950px
   = ต้องเลื่อนสองจอกว่าจะเจอตัวบทความ · ครอบไว้ที่ 460px แล้วครอปตรงกลางแทน */
.article .shot.hero img{max-height:460px;object-fit:cover;object-position:center}
.article .shot.vid{position:relative}
/* กรอบ 16:9 ให้คลิป ไม่ต้องเดาความสูง และไม่กระตุกตอน iframe โหลดเสร็จ */
.article .shot.vid iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:14px;display:block}
.article .gallery{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.article .gallery h2{margin-bottom:4px}
@media (min-width:760px){
  /* แกลเลอรีท้ายบทความเรียงสองคอลัมน์บนจอกว้าง รูปหน้างานส่วนใหญ่เป็นแนวตั้ง เรียงเดี่ยวแล้วหน้ายาวมาก */
  .article .gallery{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
  .article .gallery h2{grid-column:1/-1}
}

/* ── หน้าบทความ ── */
.article{max-width:760px;padding:120px 24px 80px}
.article .crumb{font-size:14px;color:var(--muted);margin-bottom:18px}
.article .crumb a{color:var(--blue);text-decoration:none}
/* ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงตัดกลางคำได้ทุกที่ ต้องสั่ง keep-all ที่หัวเรื่องเสมอ */
.article h1{font-family:Kanit,sans-serif;font-weight:300;font-size:clamp(28px,4vw,42px);
  line-height:1.35;color:var(--ink);word-break:keep-all;margin:0 0 14px}
.article h2{font-family:Kanit,sans-serif;font-weight:400;font-size:22px;color:var(--ink);
  word-break:keep-all;margin:38px 0 12px}
.article h3{font-family:Kanit,sans-serif;font-weight:500;font-size:18px;color:var(--ink);
  word-break:keep-all;margin:28px 0 10px}
.article .lead{font-size:18px;color:var(--body);line-height:1.8;margin:0 0 28px}
.article p{color:var(--body);line-height:1.9;margin:0 0 16px}
.article li{color:var(--body);line-height:1.9;margin-bottom:8px}
.article ul,.article ol{padding-left:22px;margin:0 0 18px}
.article strong{color:var(--ink);font-weight:600}
.article .cta{margin-top:48px;padding:26px;border-radius:14px;background:var(--blue-soft);
  border:1px solid var(--line)}
.article .cta b{display:block;font-family:Kanit,sans-serif;font-weight:500;font-size:19px;
  color:var(--ink);margin-bottom:6px}
.article .cta p{margin-bottom:16px}
.article .cta .btn{margin-right:10px}
.article .cta .btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.cards{display:grid;gap:14px}
.cards .card{display:block;padding:20px;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;background:var(--ground);transition:.2s}
.cards .card:hover{border-color:var(--blue);box-shadow:var(--lift)}
.cards .card b{display:block;font-family:Kanit,sans-serif;font-weight:500;font-size:18px;
  color:var(--ink);word-break:keep-all;margin-bottom:6px}
.cards .card span{color:var(--body);font-size:15px;line-height:1.7}

/*
 * สินค้าในหน้าโซลูชัน — แถวละ 5 ใบบนจอคอม แล้วลดหลั่นลงตามความกว้าง
 * ไม่ใช้ auto-fill เพราะต้องการ "5 ใบพอดี" บนจอคอมจริง ๆ ไม่ใช่แล้วแต่ความกว้างจะหารลงตัว
 * บนมือถือเหลือ 2 ใบ — ถ้าดัน 5 ใบลงไปจริง รูปจะกว้างราว 60px อ่านชื่อรุ่นไม่ออกเลย
 */
/*
 * หน้าโซลูชันกินพื้นที่ซ้าย-ขวามากกว่าโซนอื่นของเว็บ (--wrap 1200px) เพราะเป็นหน้าดูของ ไม่ใช่หน้าอ่าน
 * ยิ่งกว้าง รูปสินค้ายิ่งใหญ่ — ที่ 1720px รูปได้ราว 320px ต่อใบ เทียบกับ 222px ตอน 1240px
 * ยังต้องมีเพดาน ไม่ปล่อย 100% เพราะบนจอ 4K การ์ด 5 ใบจะยืดจนตัวหนังสือลอยห่างกันผิดสัดส่วน
 */
.catalog{max-width:min(96vw,1720px)}
/* หัวเรื่องกับย่อหน้านำยังกว้างเท่าหน้าบทความ — บรรทัดยาว 1240px อ่านแล้วสายตาหลงบรรทัด */
.catalog .crumb,.catalog h1,.catalog .lead{max-width:760px}
/*
 * ชิปกรองแบรนด์ — ทำหน้าตาให้เหมือนปุ่มเลือกประเภทอาคารที่ฮีโร่หน้าแรก (ปุ่มเม็ดยา ขอบบาง)
 * แทนโหลดสี/ขอบใหม่ ให้ผู้ใช้คุ้นตาว่าเป็นตัวกรองแบบเดียวกันทั้งเว็บ
 */
.brand-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.brand-filter button{font-family:Kanit,sans-serif;font-size:13.5px;padding:7px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--body);cursor:pointer}
.brand-filter button:hover{border-color:var(--blue);color:var(--blue)}
.brand-filter button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.solution-products{grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1100px){ .solution-products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .solution-products{grid-template-columns:repeat(2,1fr)} }
.solution-products .card{padding:0;overflow:hidden;display:flex;flex-direction:column}
/* [hidden] มี specificity เท่ากับ selector attribute ธรรมดา แพ้ ".solution-products .card" ข้างบนที่ตั้ง
   display:flex ไว้ — ไม่ประกาศ rule นี้ทับ การ์ดที่ชิปกรองแบรนด์ตั้ง hidden ให้จะยังโชว์อยู่เหมือนเดิม (บั๊กจริงที่เจอ) */
.solution-products .card[hidden]{display:none}
/* จัตุรัส + object-fit:cover — รูปสินค้าคนละสัดส่วนกัน ถ้าไม่บังคับ ความสูงการ์ดในแถวเดียวกันจะเบี้ยว */
.solution-products .shot{margin:0}
.solution-products .shot img{aspect-ratio:1/1;object-fit:cover;border-radius:0;border:0;
  border-bottom:1px solid var(--line)}
.solution-products .shot figcaption{margin:8px 14px 0;font-size:12.5px;line-height:1.6}
/* ชื่อแบรนด์ตัวใหญ่ขึ้น — เป็นสิ่งแรกที่ลูกค้ากวาดตาหาเวลาเทียบรุ่น (ผู้ใช้ขอ 2026-08-31) */
.solution-products .tag{display:inline-block;margin:12px 14px 0;font-family:Kanit,sans-serif;
  font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);font-weight:600}
/* การ์ดกว้างขึ้นเป็น ~320px แล้ว ชื่อรุ่นขนาด 16px เลยดูเล็กเกินสัดส่วน */
.solution-products h3{margin:6px 14px 0;font-family:Kanit,sans-serif;font-weight:500;font-size:18px;
  line-height:1.45;color:var(--ink);word-break:keep-all}
.solution-products .p-spec{margin:8px 14px 0;font-size:13.5px;line-height:1.7;color:var(--body)}
.solution-products ul.p-spec{padding-left:18px}
.solution-products ul.p-spec li{margin-bottom:3px}
.solution-products .card > a{margin:10px 14px 14px;font-size:13px;display:inline-block}
/* ดันลิงก์สเปกไปชิดล่างเสมอ ปุ่มของทุกใบในแถวจะได้อยู่ระดับเดียวกันแม้สเปกยาวไม่เท่ากัน */
.solution-products .card > a:last-child{margin-top:auto}

/* แบนเนอร์เลื่อนหน้าแรก */
.banner-slider{padding:0}
.bnr-wrap{position:relative;width:100%;aspect-ratio:16/6;overflow:hidden;background:var(--card)}
.bnr-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.bnr-slide.on{opacity:1;pointer-events:auto}
.bnr-slide img{width:100%;height:100%;object-fit:cover;display:block}
.bnr-caption{position:absolute;left:5%;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;
  max-width:46%}
.bnr-caption h2{margin:0;font-family:Kanit,sans-serif;font-weight:600;color:#fff;
  font-size:clamp(24px,4vw,44px);line-height:1.25;text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)}
.bnr-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:2}
.bnr-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.bnr-dot.on{background:#fff}
@media (max-width:640px){
  .bnr-wrap{aspect-ratio:4/5}
  .bnr-caption{left:6%;right:6%;max-width:none;top:12%;transform:none}
}

/* วิดีโอผลงาน */
/* flex ไม่ใช่ grid เพราะการ์ด 16:9 กับ 9:16 กว้างไม่เท่ากัน ต้องปล่อยให้ห่อบรรทัดตามความกว้างจริง */
.vid-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.vid-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ground)}
.vid-card iframe{width:100%;border:0;display:block}
.vid-card p{margin:10px 14px;font-size:14px;color:var(--body)}
.vid-landscape{width:min(360px,100%)}
.vid-landscape iframe{aspect-ratio:16/9}
.vid-portrait{width:min(220px,100%)}
.vid-portrait iframe{aspect-ratio:9/16}

/* สินค้าแนะนำ — คลิปนางแบบสินค้า ผสมได้ทั้ง 16:9 (แนวนอน) และ 9:16 (แนวตั้งสไตล์ TikTok/Reels) ในกริดเดียวกัน */
.feat-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.feat-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ground)}
.feat-card iframe{border:0;display:block}
.feat-card p{margin:10px 14px;font-size:14px;color:var(--body)}
.feat-landscape{width:min(360px,100%)}
.feat-landscape iframe{width:100%;aspect-ratio:16/9}
.feat-portrait{width:min(220px,100%)}
.feat-portrait iframe{width:100%;aspect-ratio:9/16}

.dgm{margin:34px 0;padding:0}
.dgm-scroll{overflow-x:auto;padding:2px 2px 6px;
  border:1px solid var(--line);border-radius:14px;background:var(--blue-soft)}
/* ผังต้องแสดงขนาดจริงเสมอ (width:auto + max-width:none) แล้วเลื่อนแนวนอนเอา
   ถ้าใส่ width:100% เบราว์เซอร์จะย่อผังกว้าง ๆ ลงมาพอดีกรอบ แล้วตัวหนังสือไทยเหลือไม่กี่พิกเซล
   จนอ่านไม่ออก — เจอมาแล้วกับผัง cctv ที่มี 5 สถานี · อ่านได้จริงสำคัญกว่าเห็นครบในภาพเดียว */
.dgm-scroll svg{display:block;width:auto;height:auto;max-width:none;padding:10px 14px}
.dgm .stn rect{fill:var(--ground);stroke:var(--blue);stroke-width:1.5}
.dgm .ico{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dgm .nm{fill:var(--ink);font-family:Kanit,sans-serif;font-weight:500;font-size:15px;text-anchor:middle}
.dgm .sb{fill:var(--muted);font-size:12.5px;text-anchor:middle}
.dgm .arw path{fill:none;stroke:var(--blue);stroke-width:1.6;opacity:.75}
.dgm .arw .head{fill:var(--blue);stroke:none;opacity:.75}
.dgm .lk{fill:var(--muted);font-size:12px;text-anchor:middle}
/* word-break:keep-all กันภาษาไทยถูกตัดกลางคำ ("ออกแบบ ติด/ตั้ง") — บั๊กเดิมที่เจอมาแล้วในหน้าแรก */
.dgm figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:center;word-break:keep-all}