/* ============================================================
   ดีไซน์ v5 — ใช้กับทุกหน้า (body.v5) ตั้งแต่ 27 ต.ค. 2026
   ตามเอกสาร "สรุปการปรับปรุงเว็บไซต์ 26 ต.ค. 2569" (ไฟล์ "ข้อมูลทำเว็บไซต์")
   - โทนสีตามสไลด์: เทาอมน้ำเงิน (Slate) โมโนโทน แทนแดงสด
   - โลโก้: RJCE ทอง + RUIJING แดงเข้ม (logo-rjce-gold*.svg)
   ============================================================ */

body.v5 {
  --in-red: #434F5A;          /* สีหลัก (accent4 ในสไลด์) — ปุ่ม / จุดเน้น */
  --in-red-dk: #22282D;       /* hover */
  --in-red-lt: #A9B6C3;       /* จุดเน้นบนพื้นเข้ม */
  --in-bar: #FFFFFF;
  --in-grey: #F5F3F4;         /* พื้นเทาอ่อนตามสไลด์ */
  --in-off: #FAF9F9;
  --in-border: #DCDCDC;
  --in-line: #DCDCDC;
  --in-slate: #323B44;        /* section เข้ม */
  --in-deep: #22282D;         /* footer */
  --in-ink: #404040;          /* ตัวอักษร */
  --in-muted: #6B7178;
  --c-navy: #323B44;
  --c-accent: #434F5A;
}

/* ค่าสีที่เขียนตายตัวใน industrial.css */
body.v5 .i-cta::after { background: linear-gradient(90deg, rgba(34,40,45,.95) 30%, rgba(34,40,45,.72)); }
body.v5 .i-type:hover::after { background: linear-gradient(0deg, rgba(50,59,68,.92) 0%, rgba(50,59,68,.45) 70%); }
body.v5 .i-cert { border-color: rgba(67,79,90,.25); }
body.v5 .i-table td.is-hl { background: rgba(67,79,90,.07); }
body.v5 .v4-search__results mark { background: rgba(105,123,141,.2); }
@media (hover: hover) and (pointer: fine) {
  body.v5 .v4-search::before { background-image: linear-gradient(105deg, transparent 35%, rgba(105,123,141,.22) 50%, transparent 65%); }
  body.v5 .v4-search:hover { border-color: rgba(67,79,90,.45); box-shadow: 0 0 0 4px rgba(67,79,90,.08), 0 6px 18px rgba(34,40,45,.08); }
}
body.v5 .v4-search:focus-within { border-color: var(--in-red); box-shadow: 0 0 0 4px rgba(67,79,90,.12); }
@media (max-width: 600px) {
  body.v5 .v4-search:focus-within { border-color: transparent; box-shadow: none; }
}

/* ---------- ประเภทงาน 3 กลุ่ม (สไลด์ 8) ---------- */
.v5-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 4vw, 48px); }
.v5-type { background: #fff; border: 1px solid var(--in-border); display: flex; flex-direction: column; }
.v5-type__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--in-grey); }
.v5-type__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--in-ease); }
.v5-type:hover .v5-type__media img { transform: scale(1.04); }
.v5-type__body { padding: 24px 24px 28px; }
.v5-type h3 { font-size: 1.25rem; font-weight: 700; color: var(--in-deep); }
.v5-type ul { margin-top: 14px; display: grid; gap: 8px; }
.v5-type li { position: relative; padding-left: 18px; color: var(--in-ink); font-size: .9375rem; }
.v5-type li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 2px; background: var(--in-red); }
@media (max-width: 860px) { .v5-types { grid-template-columns: 1fr; max-width: 560px; } }

/* พื้นเข้ม: ปุ่มหลักและไอคอนต้องเป็นสีอ่อน ไม่งั้นกลืนกับพื้นเทาเข้ม */
body.v5 .i-cta .i-btn--primary { background: #fff; color: var(--in-deep); border-color: #fff; }
body.v5 .i-cta .i-btn--primary:hover { background: var(--in-grey); color: var(--in-deep); }
body.v5 .i-pillar__ico { background: #A9B6C3; stroke: var(--in-deep); }

/* ---------- เคอร์เซอร์หัวเชื่อม (เฉพาะจอที่ใช้เมาส์) ----------
   จุดคลิก = ปลายลวดเชื่อม (2,2) · ลิงก์/ปุ่มใช้หัวเชื่อมที่มีไฟ · ช่องพิมพ์คงเคอร์เซอร์ตัว I ปกติ
   ประกายไฟตอนคลิกอยู่ใน assets/js/weld.js */
@media (hover: hover) and (pointer: fine) {
  body.v5, body.v5 * { cursor: url(../img/cursor-torch.svg) 2 2, auto; }
  body.v5 a, body.v5 a *, body.v5 button, body.v5 button *, body.v5 [role="button"], body.v5 [role="tab"],
  body.v5 label, body.v5 summary, body.v5 select, body.v5 .lang__menu li { cursor: url(../img/cursor-torch-hot.svg) 2 2, pointer; }
  body.v5 input, body.v5 textarea, body.v5 [contenteditable="true"] { cursor: text; }
}

/* ---------- Hero: สูงขึ้น + หัวข้อบรรทัดเดียว (จอกว้าง ≥ 900px) ----------
   ขนาดตัวอักษรคำนวณจากความกว้างที่มีจริง ÷ ความยาวหัวข้อ (หน่วย em) ของแต่ละภาษา
   EN ≈ 34.7em · TH ≈ 41.6em · ZH ≈ 20.4em (วัดด้วย Playwright) — จอมือถือยังตัดบรรทัดตามปกติ */
body.v5 .v4-hero__media { height: clamp(380px, 72vh, 900px); }
/* จอเตี้ย (เช่น 1920×1080 ที่ 100% เหลือพื้นที่ ~870px) รูปสูงที่สุดเท่าที่หัวข้อและเส้นคั่นใต้รูปยังอยู่ในจอแรก (คำโปรยเลื่อนลงไปได้) */
body.v5 .v4-hero__media { height: clamp(380px, min(72vh, 100vh - 280px), 900px); height: clamp(380px, min(72svh, 100svh - 280px), 900px); }
body.v5 .v4-hero__text { padding-block: clamp(32px, 3.4vw, 52px) clamp(36px, 4vw, 60px); }
@media (min-width: 900px) {
  /* ภาพสูงที่สุดเท่าที่หัวข้อ 1 บรรทัดยังอยู่ในจอแรกพอดี: เหลือพื้นที่ = แถบเมนู + ระยะบนหัวข้อ + ความสูงหัวข้อ + ระยะเผื่อ 12px */
  body.v5 .v4-hero__media {
    --hero-title-h: 44px;
    --hero-title-gap: clamp(14px, 1.1vw, 20px);
    --hero-reserve: calc(clamp(88px, 6.6vw, 113px) + var(--hero-title-gap) + var(--hero-title-h) + 12px);
    height: clamp(380px, 100vh - var(--hero-reserve), 1200px);
    height: clamp(380px, 100svh - var(--hero-reserve), 1200px);
  }
  body.v5 .v4-hero__text { padding-top: clamp(14px, 1.1vw, 20px); }   /* ให้ตรงกับ --hero-title-gap */
  body.v5 .v4-hero__title { max-width: none; white-space: nowrap; font-size: min(2.25rem, calc(min(100vw - 72px, 1256px) / 36.5)); }
  body.v5 .v4-hero__title:lang(th) { font-size: min(1.95rem, calc(min(100vw - 72px, 1256px) / 43.5)); }
  /* จีน: ตัวเล็กลงและบรรทัดสูงเท่าภาษาอื่น ภาพจึงสูงเท่ากันทุกภาษา (ลูกค้าขอ 8 พ.ย. 2026) */
  body.v5 .v4-hero__title:lang(zh) { font-size: min(2.25rem, calc(min(100vw - 72px, 1256px) / 21.5)); line-height: 1.2; }
  body.v5 .v4-hero__title .phrase { display: inline; }
}
@media (max-width: 600px) {
  body.v5 .v4-hero__media { height: clamp(260px, 52vh, 440px); }   /* มือถือ: สูงขึ้นจากเดิมเล็กน้อย แต่ยังเห็นหัวข้อในจอแรก */
}

/* ---------- รอบ 2 (27 ต.ค.): ประเภทงานไม่มีหัวข้อใหญ่ · ตัวกรองผลงาน · วิสัยทัศน์เป็นหัวข้อ ---------- */
.v5-eyebrow-center { justify-content: center; text-align: center; }
.v5-types-section .v5-types { margin-top: clamp(20px, 2.4vw, 32px); }
.v5-filters { margin: 0 0 clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 8px; }
.v5-vision { max-width: 30em; font-size: clamp(1.45rem, 1rem + 1.4vw, 2.2rem); line-height: 1.4; }
.v5-vision:lang(th) { line-height: 1.55; }
.v5-team { grid-template-columns: repeat(3, 1fr); max-width: none; margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 860px) { .v5-team { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- รอบ 4: วิสัยทัศน์พื้นสีเดียวกับส่วนท้ายเว็บ ไม่มีลายตาราง ---------- */
body.v5 #vision { background: var(--in-deep); }
body.v5 #vision::before { display: none; }

/* ---------- ป๊อปอัปขอใบเสนอราคา (assets/js/quote-popup.js) ---------- */
.v5-pop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.v5-pop[hidden] { display: none; }
.v5-pop__backdrop { position: absolute; inset: 0; background: rgba(34,40,45,.62); opacity: 0; transition: opacity .25s var(--in-ease); }
.v5-pop__panel {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: #fff; border-top: 4px solid var(--in-red); padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 30px 70px rgba(34,40,45,.35); opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity .3s var(--in-ease), transform .3s var(--in-ease);
}
.v5-pop.is-in .v5-pop__backdrop { opacity: 1; }
.v5-pop.is-in .v5-pop__panel { opacity: 1; transform: none; }
body.v5-pop-open { overflow: hidden; }
.v5-pop__x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--in-muted); }
.v5-pop__x:hover { background: var(--in-grey); color: var(--in-deep); }
.v5-pop__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.v5-pop__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; color: var(--in-deep); padding-right: 36px; }
.v5-pop__sub { margin-top: 6px; color: var(--in-muted); font-size: .9375rem; }
.v5-pop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 20px; }
.v5-pop__grid .field--full { grid-column: 1 / -1; }
.v5-pop .field label { display: block; font-size: .875rem; font-weight: 600; color: var(--in-deep); margin-bottom: 6px; }
.v5-pop .field input, .v5-pop .field select, .v5-pop .field textarea {
  width: 100%; padding: 11px 12px; font: inherit; font-size: .9375rem; color: var(--in-ink);
  background: var(--in-off); border: 1px solid var(--in-border); border-radius: 2px;
}
.v5-pop .field input:focus, .v5-pop .field select:focus, .v5-pop .field textarea:focus { outline: none; background: #fff; border-color: var(--in-red); box-shadow: 0 0 0 3px rgba(67,79,90,.12); }
.v5-pop .field.has-error input, .v5-pop .field.has-error select { border-color: #B42318; }
.v5-pop__status { min-height: 1.4em; margin-top: 12px; font-size: .875rem; color: var(--in-muted); }
.v5-pop__status[data-state="error"] { color: #B42318; }
.v5-pop__status[data-state="ok"] { color: #1E6B45; font-weight: 600; }
.v5-pop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; }
.v5-pop__later { font-size: .9375rem; color: var(--in-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .v5-pop { padding: 0; align-items: end; }
  .v5-pop__panel { width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }
  .v5-pop__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .v5-pop__panel, .v5-pop__backdrop { transition: none; } }
.v5-pop .field label.req::after { content: ' *'; color: #B42318; }
.v5-pop .field { margin: 0; }

/* ============================================================ อาคารประกอบตามการเลื่อน (ลูกค้าอนุมัติ 27 ต.ค. 2026) */
.v5-build { display: none; }

@media (min-width: 1640px) {
  .v5-build {
    --gutter: calc((100vw - 1320px) / 2);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: fixed; z-index: 5; right: 0; top: calc(50% + 36px); transform: translateY(-50%);
    width: var(--gutter); padding-inline: 18px; pointer-events: none;
  }
}
.v5-build__svg { display: block; width: min(100%, 230px); height: min(64vh, 520px); overflow: visible; }

/* ชิ้นส่วน */
.v5-build [data-fx] { transform-box: fill-box; will-change: transform, opacity; }
.v5-build [data-fx="rise"] { transform-origin: 50% 100%; }
.b-ground { stroke: #8D969E; stroke-width: 2; }
.b-hatch { stroke: #A9B0B6; stroke-width: 1; }
.b-footing { fill: #B9B3A8; }
.b-col { fill: #6F7C88; }
.b-beam { fill: #55626E; }
.b-brace, .b-truss { fill: none; stroke: #8E9AA5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.b-glass { fill: #A8BFCF; fill-opacity: .55; stroke: #7F8D99; stroke-width: 1; }
.b-mullion { stroke: #7F8D99; stroke-width: 1; }
.b-sign { fill: #2B3238; stroke: #C2A574; stroke-width: 1.2; }
.b-sign__t { fill: #D2B88A; font: 700 14px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; }
.v5-build__sparks circle { fill: #FFC86B; }

/* ป้ายความคืบหน้า */
.v5-build__meta {
  display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.88); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 14px rgba(34,40,45,.10);
  font-size: .78rem; color: #404040; white-space: nowrap; backdrop-filter: blur(6px);
}
.v5-build__pct { font-variant-numeric: tabular-nums; color: #22282D; min-width: 3.2ch; text-align: right; }
.v5-build__done { display: none; color: #22282D; font-weight: 600; }
.v5-build.is-done .v5-build__label, .v5-build.is-done .v5-build__pct { display: none; }
.v5-build.is-done .v5-build__done { display: inline; }
.v5-build.is-done .v5-build__done::before { content: '✓ '; color: #3E8E5E; }

/* ---------------------------------------------------------------- รอบแก้ 29 ต.ค. 2026 */
/* ไอคอนทีมงาน 3 ฝ่าย (รูปขาวดำจากลูกค้า ทำพื้นโปร่งใส) */
.v5-team__ico { display: block; width: clamp(104px, 9vw, 136px); height: auto; margin: 0 auto 14px; }
/* ข้อความใต้หัวข้อหลักที่ลูกค้าให้ตัดออก (ว่างในบางภาษา) */
.i-pagehero__sub:empty { display: none; }
/* ขั้นตอนการทำงานเหลือ 5 ขั้น (ตัดติดตั้งระบบ) */
@media (min-width: 1025px) { .i-steps { grid-template-columns: repeat(5, 1fr); } }
/* ส่วนท้ายเว็บ: หัวข้อโซลูชันเป็นลิงก์ (ไม่มีรายการด้านล่างแล้ว) */
.i-footer h3 a { color: inherit; }
.i-footer h3 a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* ปุ่มภาษาแสดงชื่อภาษา (English / ไทย / 中文) — ตัวอักษรไทยห้ามมีระยะห่างตัวอักษร ไม่เช่นนั้นสระและวรรณยุกต์เพี้ยน */
.v5 .lang__btn { letter-spacing: 0; font-family: var(--font-body); font-size: .875rem; font-weight: 500; }
/* ปุ่มขอใบเสนอราคาลอยตามการเลื่อน (มุมขวาล่าง ถัดจากปุ่มกลับขึ้นบน) */
.v5-fab { position: fixed; right: 84px; bottom: 24px; z-index: 90; height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px;
  background: var(--in-red); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 3px; font-weight: 600; font-size: .9375rem; box-shadow: 0 8px 24px rgba(34,40,45,.28);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease; }
.v5-fab.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.v5-fab:hover { background: var(--in-red-dk); color: #fff; }
.v5-fab__ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.v5-pop-open .v5-fab, body[data-desc-key="v3.seo.contact.d"] .v5-fab { display: none; }   /* หน้าติดต่อมีฟอร์มอยู่แล้ว */
@media (max-width: 600px) { .v5-fab { right: 80px; bottom: 24px; padding: 0 14px; font-size: .875rem; } }
/* ปุ่มขอใบเสนอราคาบนแถบเมนู (3 พ.ย. 2026): ปุ่มเข้ม ไอคอนในวงกลม ลูกศรเลื่อนเมื่อชี้ และแสงวาบผ่านเป็นระยะ */
.v5-hquote { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 6px; margin-left: 4px;
  background: linear-gradient(135deg, #434F5A 0%, #22282D 100%); color: #fff; border-radius: 999px; font-weight: 600; font-size: .9375rem; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(34,40,45,.22), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .25s ease, box-shadow .25s ease; }
.v5-hquote:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(34,40,45,.3), inset 0 1px 0 rgba(255,255,255,.16); }
.v5-hquote__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14); }
.v5-hquote__ico svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v5-hquote__arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.v5-hquote:hover .v5-hquote__arr { transform: translateX(4px); }
.v5-hquote::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform: skewX(-18deg);
  animation: v5-hquote-sheen 6s ease-in-out 2s infinite; }
@keyframes v5-hquote-sheen { 0%, 78% { left: -60%; } 100% { left: 130%; } }
.v5-hquote:focus-visible { outline: 2px solid #434F5A; outline-offset: 3px; }
@media (max-width: 1280px) { .v5-hquote { padding-right: 14px; font-size: .875rem; } .v5-hquote__arr { display: none; } }
@media (max-width: 1180px) { .v5-hquote { display: none; } }   /* จอเล็ก/มือถือ: ใช้ปุ่มในเมนู ☰ และปุ่มลอย */
@media (prefers-reduced-motion: reduce) { .v5-hquote::after { animation: none; } .v5-hquote, .v5-hquote__arr { transition: none; } }