/* ============================================================================
 * vault8.css — Vault8 Fulfillment landing
 * แนวคิดสี: เหล็กตู้เซฟ (เขียวเข้มอมเทา) + ทองเหลืองของหน้าปัด
 * ========================================================================== */
:root {
  /* สีแบรนด์ Vault8 (จากโลโก้): แดงเลือดหมู · เทาถ่าน · ขาว */
  --ink: #B91F2E;          /* แดงแบรนด์ — พื้นส่วนเด่น (hero · CTA) */
  --ink-2: #93182A;        /* แดงเข้ม — กล่องบนพื้นแดง */
  --char: #3A3A3D;         /* เทาถ่าน (จากเลข 8 ในโลโก้) — ขั้นตอน · footer · หัวหลังบ้าน */
  --accent: #B91F2E;       /* แดงสำหรับจุดเน้นบนพื้นขาว */
  --brass: #FFD5D9;        /* ตัวเน้นบนพื้นแดง/เทา (ชมพูอ่อนเกือบขาว) */
  --brass-ink: #93182A;
  --on-ink: #FFFFFF;
  --on-ink-2: #FFE4E7;     /* ข้อความรองบนพื้นแดง */
  --bg: #F7F6F6;
  --paper: #FFFFFF;
  --tint: #FBEEEF;
  --line: #EADFE1;
  --text: #1F1A1B;
  --muted: #6B6264;
  --ok: #1F7A4D;
  --warn: #A35F00;
  --err: #B3261E;
  --pri: #B91F2E;
  --pri-text: #FFFFFF;
  --shadow: 0 1px 2px rgba(60, 10, 18, .06), 0 8px 24px rgba(60, 10, 18, .06);
  --r: 14px;
  --font: "IBM Plex Sans Thai", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141213; --paper: #1D1A1B; --tint: #2A1D1F; --line: #3A2F31;
    --text: #F3EEEF; --muted: #B5AAAC; --pri: #DA2C3F; --pri-text: #FFFFFF; --accent: #FF6B79;
    --ok: #5CC28D; --warn: #E3B04B; --err: #F2827A;
    --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141213; --paper: #1D1A1B; --tint: #2A1D1F; --line: #3A2F31;
  --text: #F3EEEF; --muted: #B5AAAC; --pri: #DA2C3F; --pri-text: #FFFFFF; --accent: #FF6B79;
  --ok: #5CC28D; --warn: #E3B04B; --err: #F2827A;
  --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
body.lock { overflow: hidden; }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.mono { font-family: var(--mono); font-feature-settings: "zero"; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hero :focus-visible, .sec-dark :focus-visible, .cta :focus-visible, .svc-main :focus-visible, .foot :focus-visible { outline-color: #fff; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.eyebrow { font: 600 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1.5px solid transparent; font: 600 15px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-pri { background: var(--pri); color: var(--pri-text); }
.btn-pri:hover:not(:disabled) { filter: brightness(1.15); }
.btn-line { border-color: var(--line); background: var(--paper); color: var(--text); }
.btn-line:hover { border-color: var(--text); }
.btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-brass { background: #fff; color: var(--ink); }
.btn-brass:hover { filter: brightness(1.06); }
.btn-wline { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-wline:hover { border-color: #fff; }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wm { font: 700 20px/1 var(--mono); letter-spacing: .06em; }
.wm b { color: var(--accent); }
.brand .sub { font: 600 10px/1 var(--mono); letter-spacing: .18em; color: var(--muted); padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; white-space: nowrap; }
@media (max-width: 1240px) { .nav { gap: 0; margin-left: 4px; } .nav a { padding: 8px 8px; font-size: 15px; } }
.nav a:hover { color: var(--text); background: var(--tint); }
.top-cta { margin-left: auto; display: flex; gap: 8px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 0 11px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; }
.drawer { border-top: 1px solid var(--line); background: var(--paper); padding: 12px 16px 20px; display: grid; gap: 4px; }
.drawer a:not(.btn) { padding: 12px 8px; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 8px; }
@media (max-width: 1079px) {
  .nav, .top-cta { display: none; }
  .burger { display: block; }
}
@media (min-width: 1080px) { .drawer { display: none !important; } }

/* ---------- hero ---------- */
.hero { background: var(--ink); color: var(--on-ink); padding: 72px 0 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; position: relative; }
.hero .eyebrow { color: var(--brass); }
.hero h1 { font-size: clamp(36px, 5.2vw, 60px); color: #fff; }
.hero h1 em { font-style: normal; color: var(--brass); }
.lede { margin-top: 20px; font-size: 18px; color: var(--on-ink-2); max-width: 54ch; }
.hero-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .btn-pri { background: #fff; color: var(--ink); }
.hero .btn-pri:hover { filter: none; background: var(--brass); }
.hero-points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; color: var(--on-ink-2); }
.hero-points li { display: flex; gap: 10px; align-items: baseline; }
.hero-points li::before { content: ""; width: 8px; height: 8px; flex: none; border: 2px solid #fff; transform: rotate(45deg) translateY(-1px); }

.rack { background: var(--ink-2); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.rack-head, .rack-foot { display: flex; justify-content: space-between; font: 600 12px/1 var(--mono); letter-spacing: .12em; color: rgba(255,255,255,.72); }
.rack-foot { justify-content: flex-start; gap: 8px; margin-top: 14px; letter-spacing: .02em; font-family: var(--font); font-size: 13px; color: var(--on-ink-2); }
.rack-foot .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.bins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.bins span { aspect-ratio: 1 / .78; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  display: flex; align-items: flex-end; padding: 8px; font: 600 12px/1 var(--mono); color: rgba(255,255,255,.55); }
.bins .on { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); color: #fff; }
.bins .pick { background: #fff; color: var(--ink); border-color: #fff; }

/* live strip */
.live { margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.25); position: relative; }
.lv { padding: 22px 20px 24px 0; }
.lv + .lv { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.25); }
.lv dt { font-size: 13px; color: var(--brass); }
.lv dd { margin: 6px 0 0; font-size: 22px; color: #fff; font-weight: 600; }
.lv-src { grid-column: 1 / -1; font-size: 12px; color: var(--brass); padding-bottom: 18px; }
.lv-src::before { content: "● "; color: #fff; }
.lv-src.err { color: #fff; font-weight: 600; }
.lv-src.err::before { content: "▲ "; color: #fff; }

@media (max-width: 900px) {
  .hero { padding-top: 48px; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-vis { max-width: 360px; }
  .live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv:nth-child(odd) { padding-left: 0; border-left: 0; }
  .lv:nth-child(even) { padding-left: 16px; }
  .lv dd { font-size: 18px; }
}
@media (max-width: 600px) { .hero-vis { display: none; } }

/* ---------- sections ---------- */
.sec { padding: 96px 0; }
.sec-tint { background: var(--tint); }
.sec-dark { background: var(--char); color: var(--on-ink); }
.sec-dark .eyebrow { color: var(--brass); }
.sec-h { max-width: 640px; margin-bottom: 40px; }
.sec-h h2 { font-size: clamp(28px, 3.4vw, 40px); }
.sec-h p:not(.eyebrow) { margin-top: 12px; color: var(--muted); font-size: 17px; }
.sec-dark .sec-h p:not(.eyebrow) { color: #D6D2D3; }
.sec-h-row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
@media (max-width: 560px) { .sec-h-row { flex-wrap: wrap; align-items: flex-start; } }
.lnk { font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 700px) { .sec { padding: 64px 0; } }

/* services */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-main { grid-row: span 3; background: var(--ink); color: var(--on-ink); border-radius: var(--r); padding: 32px; display: flex; flex-direction: column; }
.svc-main .tag { align-self: flex-start; font: 600 12px/1 var(--mono); letter-spacing: .08em; color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 6px 10px; }
.svc-main h3 { font-size: 30px; margin-top: 20px; color: #fff; }
.svc-main p { margin-top: 12px; color: var(--on-ink-2); }
.mini-flow { list-style: none; padding: 0; margin: auto 0 0; padding-top: 32px; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: f; }
.mini-flow li { counter-increment: f; font-size: 14px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; }
.mini-flow li::before { content: counter(f) " "; font-family: var(--mono); color: var(--brass); }
.svc-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.svc-card svg { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc-card h3 { font-size: 18px; margin-top: 16px; }
.svc-card p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.svc-link { background: var(--tint); border-color: transparent; text-decoration: none; }
.svc-link:hover { border-color: var(--accent); }
@media (max-width: 1000px) { .svc { grid-template-columns: 1fr 1fr; } .svc-main { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 600px) { .svc { grid-template-columns: 1fr; } .svc-main { padding: 24px; } }

/* flow */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.steps li { padding: 0 20px 0 0; position: relative; }
.steps li + li { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.16); }
.steps .n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; }
.steps h3 { font-size: 18px; margin-top: 14px; color: #fff; }
.steps p { margin-top: 8px; color: #D6D2D3; font-size: 15px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li, .steps li + li { padding: 20px 0 20px 56px; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .steps .n { position: absolute; left: 0; top: 16px; }
  .steps h3 { margin-top: 0; }
}

/* pricing */
.price-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow); }
.rates { padding: 8px 0; overflow-x: auto; }
.rates table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rates th, .rates td { text-align: left; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.rates tr:last-child td { border-bottom: 0; }
.rates th { font-size: 13px; color: var(--muted); font-weight: 500; }
.rates td.v { font-family: var(--mono); font-weight: 600; text-align: right; }
.rates th.r { text-align: right; }
.rates td.na { color: var(--muted); text-align: right; font-size: 14px; }
.rates .grp td { padding-top: 18px; font-weight: 600; }
.rates-foot { padding: 12px 24px 8px; font-size: 13px; color: var(--muted); }
.rates .state { margin: 16px 24px; }
.calc h3 { font-size: 18px; margin-bottom: 16px; }
.fld { display: grid; gap: 6px; margin: 0 0 14px; border: 0; padding: 0; }
.fld > span, .fld legend { font-size: 14px; color: var(--muted); padding: 0; margin-bottom: 6px; }
.fld input, .fld select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); padding: 0 12px; font: 500 16px var(--font); }
.fld input:focus, .fld select:focus { border-color: var(--text); outline: none; }
.dims { grid-template-columns: repeat(3, 1fr); }
.dims legend { grid-column: 1 / -1; }
.note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cout { margin-top: 16px; padding: 16px; border-radius: 10px; background: var(--tint); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cout .cv { font: 600 26px/1 var(--mono); color: var(--accent); }
.cwhy { display: grid; gap: 4px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.cwhy .pick { color: var(--text); font-weight: 600; }
.cdis { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cwarn { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); font-size: 14px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

/* ค่าบริการ fulfillment (จาก /fees) — ส่วนหลักของหน้า */
#pricing .sec-h-row p:not(.eyebrow) { margin-top: 8px; color: var(--muted); font-size: 15px; }
.fee-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 24px; }
.fee-nav a { text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.fee-nav a:hover { border-color: var(--accent); color: var(--accent); }
.fee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fee-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px 8px; scroll-margin-top: 90px; }
.fee-card.wide { grid-column: 1 / -1; }
.fee-card.wide ul { columns: 2; column-gap: 40px; }
.fee-card.wide li { break-inside: avoid; }
.fee-card.hot { border: 2px solid var(--accent); box-shadow: 0 16px 40px rgba(185, 31, 46, .12); }
.fee-card h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 8px; }
.fee-card .fi { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); display: grid; place-items: center; flex: none; }
.fee-card .fi svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fee-card ul { list-style: none; margin: 0; padding: 0; }
.fee-card li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.fee-card small { display: block; color: var(--muted); font-size: 13px; }
.fee-card .fp { text-align: right; white-space: nowrap; }
.fee-card .fp b { font-size: 18px; color: var(--accent); }
.fee-card .fp b.free { color: var(--ok); }
.fee-terms { margin: 20px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.fee-terms b { color: var(--text); }
.sec-import { background: var(--bg); }
@media (max-width: 900px) {
  .fee-grid { grid-template-columns: 1fr; }
  .fee-card.wide ul { columns: 1; }
}

/* JST */
.jst-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jst-flow li { display: flex; gap: 16px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.jst-flow .n { color: var(--accent); font-weight: 600; font-size: 14px; padding-top: 2px; }
.jst-flow p { color: var(--muted); font-size: 14px; }
.jst-flow .jst-cta { background: none; border: 0; padding: 4px 0 0; }

/* tracking */
.trk { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.trk h2 { font-size: clamp(28px, 3.4vw, 40px); }
.trk > div > p:not(.eyebrow) { margin-top: 12px; color: var(--muted); }
.trk-form { display: flex; gap: 8px; }
.trk-form input { flex: 1; min-width: 0; min-height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--text); padding: 0 16px; font-size: 16px; }
.trk-form input:focus { border-color: var(--text); outline: none; }
.trk-form input[aria-invalid="true"] { border-color: var(--err); }
.trk-form .btn { min-height: 52px; }
#trkOut:not(:empty) { margin-top: 14px; }
.tcard { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; padding: 18px; }
.tcard.ok { border-left-color: var(--ok); } .tcard.warn { border-left-color: var(--warn); } .tcard.err { border-left-color: var(--err); }
.tcard .th { display: flex; gap: 12px; align-items: flex-start; }
.tcard .th svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.tcard.ok .th svg { color: var(--ok); } .tcard.warn .th svg { color: var(--warn); } .tcard.err .th svg { color: var(--err); }
.tcard .th p, .tcard > p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.tno { display: inline-block; margin-top: 12px; font: 600 14px var(--mono); padding: 4px 8px; border-radius: 6px; background: var(--tint); }
.tsteps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.tsteps li { display: flex; gap: 10px; align-items: center; }
.tsteps .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); }
.tsteps .done { color: var(--text); } .tsteps .done .dot { background: var(--ok); border-color: var(--ok); }
.tsteps .now { color: var(--text); font-weight: 600; } .tsteps .now .dot { border-color: var(--accent); background: var(--accent); }
.tsrc { display: block; margin-top: 12px; font-size: 12px; color: var(--muted); }
.tacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 900px) { .trk { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 480px) { .trk-form { flex-direction: column; } }

/* state box (ว่าง / ต่อไม่ได้) */
.state { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 10px; background: var(--tint); grid-column: 1 / -1; }
.st-ic svg { width: 22px; height: 22px; color: var(--muted); }
.st-tx { display: grid; gap: 2px; font-size: 14px; } .st-tx span { color: var(--muted); }
.state > a { margin-left: auto; font-weight: 600; font-size: 14px; white-space: nowrap; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--text); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* news */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.nc:hover { border-color: var(--text); }
.nc .art { aspect-ratio: 3 / 2; background: var(--tint); display: grid; place-items: center; }
.nc .art img { width: 100%; height: 100%; object-fit: cover; }
.nc .bd { padding: 18px; display: grid; gap: 6px; }
.nc h3 { font-size: 17px; }
.nc p { color: var(--muted); font-size: 14px; }
.nc time { font-size: 13px; color: var(--muted); }
.cat-tag { justify-self: start; font: 600 11px/1 var(--mono); letter-spacing: .06em; padding: 5px 8px; border-radius: 4px; background: var(--tint); }
@media (max-width: 900px) { .news { grid-template-columns: 1fr; } }

/* faq */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 24px var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 20px; color: var(--muted); }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 0; } }

/* cta */
.cta { background: var(--ink); color: #fff; padding: 72px 0; }
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta h2 { font-size: clamp(26px, 3.2vw, 38px); }
.cta p { margin-top: 10px; color: var(--on-ink-2); max-width: 52ch; }
.cta-act { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) { .cta-in { flex-direction: column; align-items: flex-start; } }

/* footer */
.foot { background: var(--char); color: #D6D2D3; padding: 32px 0; font-size: 14px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.brand-foot .wm { color: #fff; font-size: 17px; }
.foot .wm b, .top-admin .wm b, .auth-side .wm b { color: #FF8A95; }
/* โลโก้บนพื้นสีเข้ม — วางบนแผ่นขาวให้เห็นทั้งแดงและเทา */
.foot .brand img, .top-admin .brand img, .auth-side .brand img { background: #fff; border-radius: 8px; padding: 3px; }
.foot .copy { margin-left: auto; }
@media (max-width: 700px) { .foot .copy { margin-left: 0; } }

/* ---------- รูปจริงของแบรนด์ ---------- */
.photo { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--tint); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-photo { aspect-ratio: 4 / 4.6; border: 4px solid #fff; box-shadow: 0 30px 60px rgba(60, 0, 10, .35); transform: rotate(1.5deg); }
.hero-vis { position: relative; }

/* มาตรฐานคลัง */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proof-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--r); padding: 24px; }
.proof-card .pn { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #fff; background: var(--accent); padding: 5px 10px; border-radius: 999px; }
.proof-card h3 { font-size: 19px; margin-top: 14px; }
.proof-card p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 12px; margin-top: 24px; }
.gallery .photo:first-child { grid-row: span 2; }
.gallery .photo:nth-child(4) { grid-column: span 2; }
@media (max-width: 800px) {
  .proof-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 160px; }
  .gallery .photo:first-child { grid-row: auto; grid-column: span 2; }
  .gallery .photo:nth-child(4) { grid-column: auto; }
}

/* ---------- นำเข้าจากจีน (พาร์ทเนอร์ PTCARGO) ---------- */
.china { background: linear-gradient(180deg, var(--tint), var(--bg)); border-top: 1px solid var(--line); }
.china-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.china .eyebrow { color: var(--accent); }
.china h2 { font-size: clamp(30px, 3.8vw, 46px); }
.china h2 em { font-style: normal; color: var(--accent); }
.china-lede { margin-top: 16px; font-size: 17px; color: var(--muted); max-width: 58ch; }
.china-lede b { color: var(--text); }
.china .hero-act { margin-top: 28px; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.chain li { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; padding: 12px 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; position: relative; }
.chain li + li { margin-top: 22px; }
.chain li + li::before { content: ""; position: absolute; left: 41px; top: -23px; width: 2px; height: 22px; background: var(--accent); }
.chain li + li::after { content: ""; position: absolute; left: 37px; top: -7px; border: 5px solid transparent; border-top-color: var(--accent); }
.chain .ci { grid-row: span 2; width: 52px; height: 52px; border-radius: 12px; background: var(--tint); display: grid; place-items: center; font-size: 24px; }
.chain small { color: var(--muted); font-size: 13px; }
.chain .me { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 14px 30px rgba(185, 31, 46, .25); }
.chain .me small { color: var(--on-ink-2); }
.chain .me .ci { background: #fff; }
.china-svc { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.china-svc li { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 16px 18px; display: grid; gap: 4px; }
.china-svc span { color: var(--muted); font-size: 14px; }
.china-note { margin-top: 16px; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .china-top { grid-template-columns: 1fr; gap: 32px; }
  .china-svc { grid-template-columns: 1fr; }
}

/* ---------- ภาพประกอบ (ใช้จนกว่าจะมีรูปจริง) ---------- */
.illus { display: block; width: 100%; height: auto; }
.hero-illus { border-radius: 22px; box-shadow: 0 30px 60px rgba(60, 0, 10, .35); }
.china-illus { margin-top: 40px; border-radius: 22px; border: 1px solid var(--line); }
.proof-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: center; }
.proof-wrap .proof-grid { grid-template-columns: 1fr; }
.proof-illus { border-radius: 22px; }
@media (max-width: 800px) { .proof-wrap { grid-template-columns: 1fr; } }

/* แถบราคาเริ่มต้นบน hero (2 ช่อง) */
.live { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.lv dd { font-size: 30px; }
@media (max-width: 900px) { .lv dd { font-size: 22px; } }

/* ศักยภาพคลัง */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 32px; background: color-mix(in srgb, #fff 24%, var(--ink)); color: #fff; border-radius: var(--r); overflow: hidden; }
.stats > div { padding: 24px 28px; background: var(--ink); }
.stats dt { font-size: 14px; color: var(--brass); }
.stats dd { margin: 6px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stats b { font-size: clamp(34px, 4.4vw, 52px); line-height: 1; }
.stats span { font-size: 15px; color: var(--on-ink-2); }
@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div { padding: 16px 16px; }
  .stats b { font-size: 28px; }
}

/* ฟอร์มขอใบเสนอราคา (ส่วน CTA) */
.lead-form { margin-top: 28px; background: rgba(255,255,255,.96); color: var(--text, #1d1a1b); border-radius: 18px; padding: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.lead-form h3 { font-size: 22px; margin: 0 0 4px; }
.lead-form .lf-sub { color: #6b6266; margin: 0 0 16px; }
.lf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.lead-form label > span { display: block; font-size: 13px; color: #6b6266; margin-bottom: 4px; }
.lead-form input:not([type=checkbox]), .lead-form textarea, .lead-form select { width: 100%; min-height: 44px; border: 1px solid #e3d9db; border-radius: 10px; padding: 8px 12px; font: 500 15px inherit; background: #fff; color: #1d1a1b; }
.lead-form textarea { min-height: 64px; }
.lead-form input:focus, .lead-form textarea:focus { outline: 2px solid #B91F2E; outline-offset: 1px; }
.lead-form select:focus { outline: 2px solid #B91F2E; outline-offset: 1px; }
.lead-form input[aria-invalid], .lead-form select[aria-invalid] { border-color: #B91F2E; }
.lf-ch { border: 0; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.lf-ch legend { font-size: 13px; color: #6b6266; margin-bottom: 6px; width: 100%; }
.lf-ch label { display: inline-flex; gap: 6px; align-items: center; font-size: 15px; }
.lf-ch input { width: 18px; height: 18px; accent-color: #B91F2E; }
.lf-note { display: block; }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lf-act { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.lf-msg { margin: 0; font-weight: 600; color: #127A3E; } .lf-msg.bad { color: #B91F2E; }

/* รูปมีคำบรรยาย */
.photo { position: relative; }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; font-size: 13px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.photo figcaption b { display: block; font-size: 15px; }

/* ศักยภาพ — ทีมงาน 24 ชม. */
.cap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.cap h2 { font-size: clamp(28px, 3.4vw, 42px); }
.cap-lede { margin-top: 14px; font-size: 17px; color: var(--muted); max-width: 60ch; }
.cap-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; }
.cap-nums > div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.cap-nums dt { font-size: 13px; color: var(--muted); }
.cap-nums dd { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.cap-nums b { display: block; font-size: 24px; line-height: 1.2; color: var(--accent); }
.cap-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.cap-list li { font-size: 14px; color: var(--muted); padding-left: 16px; border-left: 3px solid var(--accent); }
.cap-list b { display: block; color: var(--text); font-size: 15px; }
.cap-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.cap-pics .photo:first-child { aspect-ratio: 3 / 4; }
.cap-pics .photo:nth-child(2) { aspect-ratio: 3 / 4; margin-top: 48px; }
@media (max-width: 900px) {
  .cap { grid-template-columns: 1fr; gap: 28px; }
  .cap-pics .photo:nth-child(2) { margin-top: 0; }
}
@media (max-width: 560px) { .cap-list { grid-template-columns: 1fr; } }

/* รถขนส่ง + ศูนย์กระจายสินค้า */
.fleet-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.fleet-nums > div { border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 14px 16px; }
.fleet-nums dt { font-size: 13px; color: var(--brass); }
.fleet-nums dd { margin: 4px 0 0; font-size: 14px; color: #D6D2D3; }
.fleet-nums b { font-size: 30px; line-height: 1.1; color: #fff; }
.fleet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fleet .photo { aspect-ratio: 16 / 10; background: #2c2c2f; }
.hubs { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; margin-top: 32px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 24px; }
.hubs-map { margin: 0; }
.hubs-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.hm-land { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.75); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.hm-route { fill: none; stroke: #FF8A95; stroke-width: 1.6; stroke-dasharray: 4 4; opacity: 0; }
.hm-truck { fill: #fff; stroke: var(--ink); stroke-width: 1.2; offset-path: path("M76 161L86 142Q72 92 40 41"); opacity: 0; }
.hm-pin { fill: #E5394B; opacity: 0; }
.hm-pin circle { fill: #fff; }
.hm-ring { fill: none; stroke: #FF8A95; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hm-tx { font: 700 15px var(--font); fill: #fff; opacity: 0; }
.hubs-map.go .hm-land { animation: hm-draw 1.6s ease forwards; }
.hubs-map.go .hm-pin { animation: hm-drop .6s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.hubs-map.go .hm-ring { animation: hm-pulse 1.8s ease-out infinite; }
.hubs-map.go .hm-tx { animation: hm-fade .5s ease 1.9s forwards; }
.hubs-map.go .hm-route { animation: hm-fade .4s ease 2s forwards, hm-dash 1s linear 2s infinite; }
.hubs-map.go .hm-truck { animation: hm-fade .3s ease 2.2s forwards, hm-run 4s ease-in-out 2.2s infinite alternate; }
@keyframes hm-draw { 70% { stroke-dashoffset: 0; fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes hm-drop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes hm-pulse { from { opacity: .7; transform: scale(.4); } to { opacity: 0; transform: scale(2.2); } }
@keyframes hm-fade { to { opacity: 1; } }
@keyframes hm-dash { to { stroke-dashoffset: -8; } }
@keyframes hm-run { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .hm-land { stroke-dashoffset: 0; fill-opacity: 1; } .hm-pin, .hm-tx, .hm-route { opacity: 1; } .hm-truck { display: none; }
}
.hubs h3 { font-size: 22px; }
.hubs-at { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hubs-at span { background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
.hubs-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.hubs-list li { font-size: 14px; color: #D6D2D3; padding-left: 14px; border-left: 3px solid #FF8A95; }
.hubs-list b { display: block; color: #fff; font-size: 15px; }
@media (max-width: 900px) {
  .fleet-nums, .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hubs { grid-template-columns: 140px 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .hubs { grid-template-columns: 1fr; }
  .hubs-map { max-width: 180px; }
  .hubs-list { grid-template-columns: 1fr; }
  .fleet-nums b { font-size: 24px; }
}

/* โลโก้ลูกค้า */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.logos li { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.logos img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }

/* ฟอร์มขอใบเสนอราคา — ลูกค้าแนะนำจาก PTCARGO */
.lf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.lf-ref { margin: 0; display: grid; justify-items: end; line-height: 1.2; padding: 8px 14px; border-radius: 12px; background: #FBEEEF; border: 1px solid #F1D3D7; }
.lf-ref small { font-size: 12px; color: #6b6266; }
.lf-ref b { font: 700 15px var(--mono); color: #B91F2E; letter-spacing: .02em; }
.lf-src { margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px dashed #e3d9db; }
@media (max-width: 560px) { .lf-ref { justify-items: start; } }