/* ============================================================================
 * ptcargo-shipping.css — MOBILE Source-of-Truth for
 * modules/shipping/pages/ptcargo-shipping.html (PTCARGO SHIPPING landing/hub)
 * ----------------------------------------------------------------------------
 * De-inlined verbatim from the page's THREE inline <style> blocks, concatenated
 * in document order (combine-pass 2026-07-19):
 *   (1) base kit (orange :root + header/search/systems/product/… template kit)
 *   (2) red-theme override (:root -> red #FF3D2E/#D8190B + hero.red/.logo .mark…)
 *   (3) #xcontent — the Express-home content actually rendered (xhero/trust/calc/
 *       xstats/svc/wh/why + red section accents).
 * Effective ACCENT = RED (block 2 overrides block 1's orange) — do NOT recolor.
 * Phone view byte-equivalent. Template classes the current body does not use
 * (search/systems/product-grid/flash/cats/chips/compare/impgrid/rateteaser/addr/
 * guides/faq/banner) are KEPT verbatim (conservative — unused = no render effect).
 * Desktop light-2026 layer = ptcargo-shipping.desktop.css (>=768).
 * ========================================================================== */

  :root{
    --sun:#FF7A1A; --sun-deep:#EF5F06; --ember:#FF3D2E; --gold:#FFB23E;
    --cream:#FFF8F2; --cream-2:#FFEFE2; --paper:#FFFFFF;
    --ink:#2A2016; --ink-2:#6E5C4C; --muted:#7A6A57; --line:#F2E6D8; /* QA UX-CONTRAST-SHIP-01: darkened #9A8b7c→#7A6A57 (~5:1 AA) */
    --clay:#C8692B; --clay-soft:#FBEEE2; --leaf:#1E9E6A; --leaf-soft:#E6F6EE;
    --fd:'Mitr',sans-serif; --fb:'Prompt',sans-serif; --fm:'Prompt',monospace;
    --sh:0 12px 34px -22px rgba(120,70,20,.5);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;overflow-x:hidden}
  body{font-family:var(--fb);color:var(--ink);background:var(--cream);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  h1,h2,h3,.disp{font-family:var(--fd);font-weight:600;line-height:1.2;margin:0}
  .wrap{width:100%;max-width:820px;margin:0 auto}

  /* ---------- header ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(255,248,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .hd{display:flex;align-items:center;gap:7px;padding:12px 13px}
  .burger{width:40px;height:40px;border:none;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
  .logo{display:flex;align-items:center;gap:7px;font-family:var(--fd);font-weight:700;font-size:18px;color:var(--ink);margin-right:auto}
  .logo .mark{width:30px;height:30px;border-radius:11px;background:linear-gradient(135deg,var(--sun),var(--sun-deep));display:grid;place-items:center;color:#fff;font-size:16px;box-shadow:0 6px 16px -6px var(--sun)}
  .hicon{width:40px;height:40px;border:none;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);position:relative}
  .hicon .dot{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--ember);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;font-family:var(--fb)}

  /* ---------- search ---------- */
  .searchband{background:linear-gradient(135deg,#FF8A2B,#F0590A);padding:16px 16px 20px;color:#fff}
  .sbar{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:6px 6px 6px 14px;box-shadow:0 12px 30px -14px rgba(150,60,0,.6)}
  .sbar svg{color:var(--sun);flex:none}
  .sbar input{flex:1;border:none;outline:none;font-family:var(--fb);font-size:14.5px;color:var(--ink);background:transparent;min-width:0}
  .sbar input::placeholder{color:#C6B4A4}
  .sbar button{border:none;background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff;font-family:var(--fd);font-weight:500;font-size:14px;padding:10px 18px;border-radius:11px;cursor:pointer;flex:none}
  .plats{display:flex;gap:8px;margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .plats::-webkit-scrollbar{display:none}
  .plat{flex:none;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:500;padding:6px 14px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap}
  .plat.on{background:#fff;color:var(--sun-deep);border-color:#fff;font-weight:600}
  .shint{margin-top:11px;font-size:12px;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:6px}

  /* ---------- system switch ---------- */
  .systems{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
  .sysbtn{border-radius:18px;padding:18px 16px;color:#fff;cursor:pointer;position:relative;overflow:hidden;min-height:112px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--sh)}
  .sysbtn.shop{background:linear-gradient(150deg,#FF9A3D,#EA5A08)}
  .sysbtn.imp{background:linear-gradient(150deg,#D9803F,#A9531F)}
  .sysbtn .ic{position:absolute;top:14px;right:14px;font-size:30px;opacity:.9}
  .sysbtn .t{font-family:var(--fd);font-weight:600;font-size:18px}
  .sysbtn .s{font-size:12px;opacity:.92;margin-top:2px}

  /* ---------- section shells ---------- */
  section{padding:6px 0 4px}
  .sechead{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;gap:10px}
  .sechead .lft{display:flex;align-items:center;gap:9px;min-width:0}
  .sechead .emo{font-size:20px}
  .sechead h2{font-size:18px}
  .sechead .more{font-size:12.5px;color:var(--sun-deep);font-weight:500;flex:none;font-family:var(--fb)}
  .band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

  /* product row / grid — full bleed, flat cards (no radius on card face) */
  .prow{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0 0 14px}
  .prow::-webkit-scrollbar{display:none}
  .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  @media(min-width:560px){.pgrid{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:820px){.pgrid{grid-template-columns:repeat(4,1fr)}}
  .pcard{background:var(--paper);padding:10px 10px 12px;cursor:pointer;position:relative}
  .prow .pcard{flex:none;width:150px;scroll-snap-align:start;border-right:1px solid var(--line)}
  .pimg{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(45deg,#faf3ea,#faf3ea 10px,#f4ebe0 10px,#f4ebe0 20px);display:grid;place-items:center;color:#CBB9A6}
  .pimg .ph-ic{width:30px;height:30px;opacity:.7}
  .pbadge{position:absolute;top:7px;left:7px;background:var(--ember);color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:7px;font-family:var(--fb)}
  .pfav{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:#C9B4A2}
  .ptit{font-size:12.5px;color:var(--ink);margin-top:8px;line-height:1.35;height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pmeta{display:flex;align-items:baseline;gap:6px;margin-top:6px}
  .pprice{font-family:var(--fd);font-weight:600;color:var(--sun-deep);font-size:15px}
  .pold{font-size:11px;color:var(--muted);text-decoration:line-through}
  .pshop{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:10.5px;color:var(--muted)}
  .pshop .tag{background:var(--cream-2);color:var(--clay);padding:1px 6px;border-radius:6px;font-weight:500}
  .padd{position:absolute;bottom:11px;right:10px;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 14px -6px var(--sun)}

  /* flash sale */
  .flash{background:linear-gradient(135deg,#FF5436,#E01F1F);color:#fff}
  .flashhead{display:flex;align-items:center;gap:12px;padding:14px 16px 10px}
  .flashhead .ft{font-family:var(--fd);font-weight:700;font-size:19px;display:flex;align-items:center;gap:7px}
  .cd{display:flex;gap:5px;margin-left:auto;align-items:center;font-family:var(--fm);font-weight:600}
  .cd b{background:rgba(0,0,0,.28);padding:3px 7px;border-radius:7px;font-size:13px;min-width:26px;text-align:center}
  .flash .prow .pcard{background:#fff;border-right-color:rgba(255,255,255,.25)}

  /* categories */
  .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
  @media(min-width:560px){.cats{grid-template-columns:repeat(6,1fr)}}
  .cat{background:var(--paper);padding:14px 6px;text-align:center;cursor:pointer}
  .cat .ci{width:44px;height:44px;margin:0 auto 6px;border-radius:14px;background:var(--cream-2);display:grid;place-items:center;font-size:21px}
  .cat span{font-size:11px;color:var(--ink-2);display:block;line-height:1.2}

  /* trending chips */
  .chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 16px}
  .chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:6px}
  .chip .rank{font-family:var(--fd);color:var(--ember);font-weight:600}

  /* compare feature */
  .compare{margin:6px 16px 16px;background:linear-gradient(135deg,#FFF3E8,#FFE9D6);border:1px solid var(--cream-2);border-radius:18px;padding:18px}
  .compare h3{font-size:16px;display:flex;align-items:center;gap:8px}
  .compare p{font-size:13px;color:var(--ink-2);margin:6px 0 12px}
  .cmprow{display:flex;gap:8px}
  .cmp{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center}
  .cmp .p{font-family:var(--fd);font-weight:600;color:var(--sun-deep);font-size:14px}
  .cmp.best{border-color:var(--leaf);background:var(--leaf-soft)}
  .cmp.best .p{color:var(--leaf)}
  .cmp small{font-size:10px;color:var(--muted);display:block}

  /* import services */
  .impgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  @media(min-width:640px){.impgrid{grid-template-columns:repeat(3,1fr)}}
  .impcard{background:var(--paper);padding:16px 14px;cursor:pointer}
  .impcard .ii{width:42px;height:42px;border-radius:12px;background:var(--clay-soft);display:grid;place-items:center;font-size:20px;margin-bottom:9px}
  .impcard .it{font-family:var(--fd);font-weight:500;font-size:14px}
  .impcard .is{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}

  .rateteaser{margin:12px 16px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh)}
  .rateteaser .rh{background:linear-gradient(135deg,#D9803F,#A9531F);color:#fff;padding:16px 18px}
  .rateteaser .rh .t{font-family:var(--fd);font-weight:600;font-size:17px}
  .rateteaser .rh .s{font-size:12px;opacity:.9}
  .rateteaser .rb{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .rateteaser .rprice b{font-family:var(--fd);font-weight:700;color:var(--clay);font-size:24px}
  .rateteaser .rprice span{font-size:12px;color:var(--muted)}
  .btnclay{background:linear-gradient(135deg,var(--clay),#9d4a1c);color:#fff;font-family:var(--fd);font-weight:500;font-size:13.5px;padding:11px 18px;border-radius:12px;border:none;cursor:pointer;flex:none}

  .warncard{margin:6px 16px 16px;background:#FFF4EC;border:1px solid #FBD9C2;border-radius:16px;padding:16px 18px}
  .warncard .wt{font-family:var(--fd);font-weight:500;font-size:15px;color:var(--clay);display:flex;align-items:center;gap:8px}
  .warncard ul{margin:8px 0 0;padding-left:20px;font-size:13px;color:var(--ink-2)}
  .warncard li{margin:3px 0}

  .addr{margin:6px 16px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
  .addr .at{font-family:var(--fd);font-weight:500;display:flex;align-items:center;gap:8px}
  .addr .abox{background:var(--cream);border-radius:11px;padding:12px 14px;margin-top:10px;font-size:13px;color:var(--ink-2);line-height:1.6}
  .addr .copy{margin-top:10px;background:var(--cream-2);color:var(--clay);border:none;border-radius:10px;padding:9px 14px;font-family:var(--fb);font-weight:500;font-size:12.5px;cursor:pointer}

  /* guides */
  .guides{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  @media(min-width:640px){.guides{grid-template-columns:repeat(3,1fr)}}
  .guide{background:var(--paper);padding:15px 14px;cursor:pointer;display:flex;align-items:center;gap:11px}
  .guide .gi{width:38px;height:38px;border-radius:11px;background:var(--cream-2);display:grid;place-items:center;font-size:18px;flex:none}
  .guide .gt{font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}

  /* faq */
  .faq{padding:6px 16px 20px}
  .qa{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:9px;overflow:hidden}
  .qa .q{padding:14px 16px;font-family:var(--fd);font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
  .qa .q .cv{transition:.2s;flex:none;color:var(--sun)}
  .qa .a{padding:0 16px;max-height:0;overflow:hidden;transition:.25s;font-size:13px;color:var(--ink-2)}
  .qa.open .a{max-height:200px;padding:0 16px 14px}
  .qa.open .q .cv{transform:rotate(180deg)}

  /* footer */
  footer{background:#2A2016;color:#EAD9C7;padding:26px 16px 30px;margin-top:12px}
  .fcta{background:linear-gradient(135deg,var(--sun),var(--sun-deep));border-radius:18px;padding:20px;text-align:center;margin-bottom:22px}
  .fcta .t{font-family:var(--fd);font-weight:600;font-size:18px;color:#fff}
  .fcta .s{font-size:13px;color:rgba(255,255,255,.92);margin:4px 0 12px}
  .fcta .b{display:inline-block;background:#fff;color:var(--sun-deep);font-family:var(--fd);font-weight:600;font-size:14px;padding:11px 26px;border-radius:12px}
  .fcols{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;font-size:13px}
  .fcols h4{font-family:var(--fd);font-weight:500;font-size:14px;color:#fff;margin:0 0 8px}
  .fcols a{display:block;color:#C3AF9C;margin:5px 0}
  .fbar{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:16px;font-size:11.5px;color:#9A8672;text-align:center;font-family:var(--fm)}

  /* section anchor spacing under sticky header */
  #shop,#import{scroll-margin-top:64px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  :focus-visible{outline:2px solid var(--sun);outline-offset:2px}

  /* desktop niceties */
  @media(min-width:820px){
    .searchband,.systems,.sechead,.chips,.faq{max-width:820px;margin-left:auto;margin-right:auto}
    .sbar{max-width:720px}
  }

  /* ============ motion / liveliness ============ */
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes bpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  @keyframes shine{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(260%) skewX(-18deg)}}
  @keyframes gshift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-7deg)}}
  @keyframes glowband{0%,100%{box-shadow:inset 0 0 0 rgba(255,255,255,0)}50%{box-shadow:inset 0 0 44px rgba(255,255,255,.2)}}
  @keyframes floatblob{0%,100%{transform:translate(0,0)}33%{transform:translate(14px,-16px)}66%{transform:translate(-12px,10px)}}

  /* scroll reveal */
  .reveal{opacity:0}
  .reveal.in{animation:fadeUp .6s cubic-bezier(.2,.7,.3,1) forwards}

  /* animated search band + floating blobs */
  .searchband{position:relative;overflow:hidden;background:linear-gradient(120deg,#FF8A2B,#F0590A,#FF7A1A,#F0590A);background-size:300% 300%;animation:gshift 11s ease infinite}
  .searchband .blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.16);filter:blur(3px);animation:floatblob 9s ease-in-out infinite;pointer-events:none;z-index:0}
  .searchband .wrap{position:relative;z-index:1}

  /* banner carousel */
  .bannerwrap{padding:14px 16px 2px}
  .banner{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--sh);aspect-ratio:16/6}
  .bslide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
  .bslide.on{opacity:1}
  .bph{width:100%;height:100%;margin:0;display:grid;place-items:center;position:relative;overflow:hidden;background:repeating-linear-gradient(45deg,#FFEEDD,#FFEEDD 14px,#FFE4CE 14px,#FFE4CE 28px)}
  .bph::after{content:"" attr(data-label) "  ·  1600×600";font-family:var(--fm);font-size:12px;color:#C89A6E;font-weight:500;position:relative;z-index:1;text-align:center;padding:0 12px}
  .bph .sheen{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:220% 100%;animation:shimmer 2.6s linear infinite}
  .bdots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:4}
  .bdot{width:7px;height:7px;border-radius:50%;background:rgba(200,150,90,.5);cursor:pointer;transition:.25s}
  .bdot.on{width:22px;border-radius:4px;background:var(--sun)}

  /* product placeholder shimmer + hover lift */
  .pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:220% 100%;animation:shimmer 2.4s linear infinite;pointer-events:none}
  .pimg .ph-ic{position:relative;z-index:1}
  .pcard{transition:transform .18s ease,box-shadow .18s ease}
  @media(hover:hover){.pcard:hover{transform:translateY(-5px);box-shadow:0 18px 32px -18px rgba(150,80,20,.55);z-index:2}}
  .padd{transition:transform .14s ease}.padd:active{transform:scale(.82)}
  .pfav{transition:transform .15s,color .15s}
  @media(hover:hover){.pcard:hover .pfav{color:var(--ember)}}
  .cat .ci{transition:transform .2s}
  @media(hover:hover){.cat:hover .ci{animation:bob .6s ease}}
  .chip{transition:transform .15s,border-color .15s}
  @media(hover:hover){.chip:hover{transform:translateY(-2px);border-color:var(--sun)}}

  /* flash sale liveliness */
  .flash{animation:glowband 2.8s ease-in-out infinite}
  .flashhead .ft .z{display:inline-block;animation:bpulse 1s ease-in-out infinite;transform-origin:center}

  /* system tiles: bg-image layer + overlay + shine + floating icon */
  .sysbtn{overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
  .sysbtn.shop{background:#EA5A08}.sysbtn.imp{background:#A9531F}
  .sysbtn .sysbg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat}
  .sysbtn.shop .ov{background:linear-gradient(150deg,rgba(255,154,61,.82),rgba(234,90,8,.92))}
  .sysbtn.imp .ov{background:linear-gradient(150deg,rgba(217,128,63,.82),rgba(169,83,31,.92))}
  .sysbtn .ov{position:absolute;inset:0;z-index:1}
  .sysbtn>.ic,.sysbtn>.t,.sysbtn>.s{position:relative;z-index:2}
  .sysbtn .ic{animation:floaty 3.6s ease-in-out infinite}
  .sysbtn::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-130%) skewX(-18deg);z-index:3;pointer-events:none}
  @media(hover:hover){.sysbtn:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 20px 40px -18px rgba(120,60,10,.6)}.sysbtn:hover::after{animation:shine 1s ease}}
  .sysbg[data-label]::before{content:"<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-.14em;flex:none"><rect x="3" y="7" width="18" height="13" rx="2.5"/><path d="M8 7l1.5-2.5h5L16 7"/><circle cx="12" cy="13.5" r="3.2"/></svg> " attr(data-label);position:absolute;left:9px;bottom:9px;font-family:var(--fm);font-size:9px;color:rgba(255,255,255,.72);border:1px dashed rgba(255,255,255,.45);padding:2px 7px;border-radius:6px;z-index:0}

  .fcta .b{transition:transform .15s}
  @media(hover:hover){.fcta .b:hover{transform:scale(1.04)}}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important}
    .reveal{opacity:1!important}
    .searchband{background:linear-gradient(120deg,#FF8A2B,#F0590A)}
  }
  /* fix: การ์ดที่มี margin ด้านข้าง ห้ามกว้าง 100% (จะเลยจอ) — ให้ width auto */
  .compare,.rateteaser,.warncard,.addr{width:auto;max-width:none}

.ptdrop{position:fixed;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -14px rgba(80,40,10,.42);z-index:200;display:none;overflow:hidden;min-width:210px}
.ptdrop.open{display:block;animation:ptd .16s ease}
@keyframes ptd{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ptdrop.lang{min-width:158px;padding:5px}
.ptdrop.lang button{display:block;width:100%;border:none;background:none;font-family:var(--fb);font-size:13.5px;color:var(--ink);padding:11px 13px;border-radius:9px;cursor:pointer;text-align:left}
.ptdrop.lang button.on{background:var(--cream-2);color:var(--sun-deep);font-weight:500}
.udhead{display:flex;align-items:center;gap:11px;padding:15px 15px 13px;background:linear-gradient(135deg,var(--cream-2),#fff)}
.uav{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;box-shadow:var(--sh)}
.uav svg{width:100%;height:100%;display:block}
.udhead .un{font-family:var(--fd);font-weight:500;font-size:14px}
.udhead .ue{font-size:11px;color:var(--muted)}
.uwallet{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 12px 8px;padding:11px 13px;background:var(--cream);border:1px solid var(--line);border-radius:12px}
.uwallet .wl{font-size:11px;color:var(--ink-2)}
.uwallet .wv{font-family:var(--fd);font-weight:600;color:var(--sun-deep);font-size:17px;line-height:1.1}
.uwallet button{border:none;background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff;font-family:var(--fb);font-size:12px;padding:8px 13px;border-radius:9px;cursor:pointer;flex:none}
.uitems{padding:2px 6px}
.uitems button{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;font-family:var(--fb);font-size:13.5px;color:var(--ink);padding:11px 12px;border-radius:9px;cursor:pointer;text-align:left}
.uitems button svg{width:17px;height:17px;color:var(--ink-2);flex:none}
.uitems button:active{background:var(--cream-2)}
.ulogout{display:flex;align-items:center;gap:11px;width:calc(100% - 12px);border:none;background:none;font-family:var(--fb);font-size:13.5px;color:var(--ember);padding:12px;margin:4px 6px 8px;border-top:1px solid var(--line);cursor:pointer;text-align:left}
.ulogout svg{width:17px;height:17px;color:var(--ember);flex:none}
.hicon.hasav{padding:0}
.hicon.hasav .uav{width:30px;height:30px;box-shadow:none}
.ptov{position:fixed;inset:0;background:rgba(30,18,8,.5);display:none;align-items:flex-end;justify-content:center;z-index:210}
.ptov.open{display:flex}
.ptsheet{background:#fff;width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:18px 18px 24px;animation:ptup .25s ease}
@keyframes ptup{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.ptsheet h3{font-family:var(--fd);font-weight:500;font-size:17px;text-align:center;margin:0 0 14px}
.ptsheet input,.ptsheet select,.ptsheet textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-family:var(--fb);font-size:14px;margin-bottom:10px;background:var(--cream);color:var(--ink);outline:none}
.ptsheet input:focus,.ptsheet select:focus,.ptsheet textarea:focus{border-color:var(--sun)}
.ptsheet .bigbtn{width:100%;border:none;border-radius:12px;padding:13px;font-family:var(--fd);font-weight:500;font-size:15px;background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff;cursor:pointer}
.ptsheet .ghostbtn{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px;font-family:var(--fb);font-size:14px;background:#fff;color:var(--ink-2);cursor:pointer;margin-top:9px}
.leofab{position:fixed;right:16px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 12px 30px -8px rgba(200,90,10,.5);z-index:150;display:grid;place-items:center;overflow:hidden;border:2px solid #fff;animation:fabIn .4s ease}
@keyframes fabIn{from{transform:scale(0)}to{transform:scale(1)}}
.leofab svg{width:100%;height:100%}
.leofab::after{content:"";position:absolute;top:2px;right:2px;width:12px;height:12px;background:var(--leaf);border:2px solid #fff;border-radius:50%}

.ptnavov{position:fixed;inset:0;background:rgba(30,18,8,.5);z-index:220;opacity:0;visibility:hidden;transition:.25s}
.ptnavov.open{opacity:1;visibility:visible}
.ptnav{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:330px;background:#fff;z-index:230;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:0 0 40px -10px rgba(0,0,0,.4)}
.ptnav.open{transform:none}
.ptnav-hd{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff;padding:18px 15px 15px;display:flex;align-items:center;gap:11px}
.ptnav-hd .mk{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:18px;flex:none}
.ptnav-hd .bd{flex:1;font-family:var(--fd);font-weight:600;font-size:16px;line-height:1.1}
.ptnav-hd .bd span{font-size:10.5px;font-weight:400;opacity:.9;display:block;font-family:var(--fb)}
.ptnav-hd .cx{border:none;background:rgba(255,255,255,.18);color:#fff;width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:19px;line-height:1;display:grid;place-items:center;flex:none}
.ptnav-body{flex:1;overflow-y:auto;padding:8px 10px 20px}
.ptnav-sec{font-size:10.5px;color:var(--muted);font-weight:500;padding:13px 12px 5px;letter-spacing:.03em}
.ptnav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:var(--ink);text-decoration:none;font-size:14px;font-family:var(--fb)}
.ptnav a:active{background:var(--cream-2)}
.ptnav a svg{width:19px;height:19px;color:var(--sun-deep);flex:none}


:root{--sun:#FF3D2E;--sun-deep:#D8190B;--ember:#FF6A1A;--gold:#FF8A3D;
 --cream:#FFF6F3;--cream-2:#FFE4DE;--clay:#D8190B;--clay-soft:#FCE3DF;--clay-deep:#9E1006;}
.logo .mark{background:linear-gradient(135deg,#FF3D2E,#D8190B);box-shadow:0 6px 16px -6px #FF3D2E}
.hero{color:#fff;padding:24px 16px 26px;position:relative;overflow:hidden}
.hero.red{background:linear-gradient(120deg,#FF5A3C,#C01810,#FF3D2E);background-size:250% 250%;animation:gshift 11s ease infinite}
.hero .eb{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;position:relative;z-index:1}
.hero h1{font-family:var(--fd);font-weight:700;font-size:26px;margin:6px 0 4px;color:#fff;position:relative;z-index:1}
.hero p{font-size:13px;opacity:.95;margin:0 0 14px;position:relative;z-index:1}
.hero .blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.15);filter:blur(3px);animation:floatblob 8s ease-in-out infinite;pointer-events:none;z-index:0}
.hero .cta{display:inline-block;background:#fff;color:#C01810;font-family:var(--fd);font-weight:600;font-size:14px;padding:11px 22px;border-radius:12px;position:relative;z-index:1}
.rateteaser .rh{background:linear-gradient(135deg,#FF5A3C,#C01810)}
.rateteaser .rprice b{color:#C01810}
.btnclay{background:linear-gradient(135deg,#FF3D2E,#9E1006)}
.warncard{background:#FFF1EE;border-color:#F8C9BF}
.warncard .wt{color:#C01810}


/* ============================================================
   EXPRESS HOME CONTENT — redesigned to match approved mockup
   (mobile-first · red corporate theme · content area only)
   ============================================================ */

/* ---------- hero ---------- */
.xhero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(115deg,#3A0703 0%,#6E0F06 46%,#9E1006 100%);padding:30px 18px 64px}
.xhero .scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.xhero .scene svg{position:absolute;right:-58px;bottom:-6px;width:340px;height:auto;opacity:.5}
.xhero .glow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,61,46,.4),transparent 70%);top:-70px;right:-50px;z-index:0}
.xhero .eb{position:relative;z-index:1;font-family:var(--fm);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#FFB4A3;display:flex;align-items:center;gap:8px}
.xhero .eb::before{content:"";width:22px;height:2px;background:#FF3D2E;border-radius:2px}
.xhero h1{position:relative;z-index:1;font-family:var(--fd);font-weight:700;font-size:29px;line-height:1.22;margin:12px 0 0;color:#fff}
.xhero h1 .hl{color:#FF6A50}
.xhero p{position:relative;z-index:1;font-size:13px;line-height:1.7;color:rgba(255,235,228,.92);margin:12px 0 16px;max-width:330px}
.xhero .callpill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#9E1006;font-family:var(--fd);font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:999px;box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.xhero .callpill svg{width:16px;height:16px}

/* ---------- trust strip (overlaps hero) ---------- */
.trust{position:relative;z-index:2;margin:-44px 16px 0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -22px rgba(120,20,8,.45);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.trust .ti{padding:14px 12px;display:flex;gap:10px;align-items:flex-start}
.trust .ti:nth-child(odd){border-right:1px solid var(--line)}
.trust .ti:nth-child(-n+2){border-bottom:1px solid var(--line)}
.trust .tic{width:34px;height:34px;border-radius:11px;background:var(--clay-soft);color:#C01810;display:grid;place-items:center;flex:none}
.trust .tic svg{width:18px;height:18px}
.trust .tt{font-family:var(--fd);font-weight:500;font-size:12.5px;line-height:1.25;color:var(--ink)}
.trust .ts{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.35}
@media(min-width:640px){.trust{grid-template-columns:repeat(4,1fr)}.trust .ti{border-bottom:none!important}.trust .ti:not(:last-child){border-right:1px solid var(--line)}}

/* ---------- freight calculator ---------- */
/* .calc box → shared .card (uniform card box + padding); inner .calc* theme kept */
.calc h3{font-family:var(--fd);font-weight:600;font-size:16.5px;display:flex;align-items:center;gap:8px}
.calc h3 svg{width:18px;height:18px;color:#C01810;flex:none}
.calc .route{display:flex;align-items:center;gap:8px;margin-top:13px}
.calc .sel{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1.5px solid var(--line);background:var(--cream);border-radius:12px;padding:12px 12px;font-size:13px;color:var(--ink);cursor:pointer;min-width:0}
.calc .sel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc .sel svg{width:14px;height:14px;color:var(--muted);flex:none}
.calc .swap{width:34px;height:34px;border:none;border-radius:50%;background:var(--clay-soft);color:#C01810;display:grid;place-items:center;cursor:pointer;flex:none}
.calc .swap svg{width:16px;height:16px}
.calc .wrow{display:flex;gap:8px;margin-top:10px}
.calc .win{flex:1;display:flex;align-items:center;border:1.5px solid var(--line);background:var(--cream);border-radius:12px;padding:4px 12px;gap:8px}
.calc .win label{font-size:10px;color:var(--muted);display:block}
.calc .win input{border:none;background:transparent;outline:none;font-family:var(--fb);font-size:14.5px;color:var(--ink);width:100%;padding:2px 0}
.calc .win .unit{font-family:var(--fd);font-weight:500;font-size:13px;color:var(--ink-2);flex:none;border-left:1px solid var(--line);padding-left:10px}
.calc .go{flex:none;border:none;border-radius:12px;background:linear-gradient(135deg,#FF3D2E,#C01810);color:#fff;font-family:var(--fd);font-weight:600;font-size:14px;padding:0 18px;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:0 10px 22px -10px #E01F1F}
.calc .go svg{width:14px;height:14px}
.calc .go:active{transform:scale(.97)}
/* estimator v2 — ประเภทสินค้า/ช่องทาง + กว้าง×ยาว×สูง แถวเดียวกับน้ำหนัก + ผลลัพธ์ */
.calc .crow{display:flex;gap:8px;margin-top:13px}
.calc .dimrow{display:flex;gap:8px;margin-top:10px}
.calc .cfield{flex:1;min-width:0}
.calc .cfield label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:4px;font-family:var(--fd)}
.calc .ci{display:flex;align-items:center;border:1.5px solid var(--line);background:var(--cream);border-radius:12px;padding:0 12px;gap:8px}
.calc .ci input,.calc .ci select{border:none;background:transparent;outline:none;font-family:var(--fb);font-size:14.5px;color:var(--ink);width:100%;padding:11px 0;min-width:0}
.calc .ci select{cursor:pointer;font-family:var(--fd);font-weight:500}
.calc .ci .unit{font-family:var(--fd);font-weight:500;font-size:12.5px;color:var(--ink-2);flex:none;border-left:1px solid var(--line);padding-left:9px}
.calc .ci:focus-within{border-color:#E01F1F;box-shadow:0 0 0 3px rgba(224,31,31,.1)}
.calc #calcBtn{width:100%;justify-content:center;margin-top:12px;padding:13px 18px}
.calc .calcres{margin-top:14px;border:1.5px solid #FFD4C9;background:#FFF6F3;border-radius:14px;padding:14px 16px}
.calc .calcres.warn{border-color:#FADFB0;background:#FEF6E7;color:#8A5A0A;font-size:13px}
.calc .calcres .cr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.calc .calcres .cr-l{font-size:13px;color:var(--ink-2)}
.calc .calcres .cr-v{font-family:var(--fd);font-weight:700;font-size:24px;color:#C01810}
.calc .calcres .cr-sub{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.calc .calcres .cr-note{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.55}
.calc .calcres .cr-note a{color:#C01810;font-weight:600}
@media(max-width:560px){.calc .dimrow{flex-wrap:wrap}.calc .dimrow .cfield{flex:1 1 46%}}
/* รูปที่ตั้งจาก admin แทนที่ placeholder .ph */
.ph.has-img{padding:0;background:none}
.ph.has-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ---------- red stats band ---------- */
.xstats{margin:16px 16px 6px;border-radius:20px;background:linear-gradient(120deg,#FF5A3C,#C01810,#E01F1F);background-size:250% 250%;animation:gshift 12s ease infinite;color:#fff;box-shadow:0 16px 36px -18px rgba(190,25,15,.65);overflow:hidden}
.xstats .row{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:16px 6px 10px}
.xstats .row::-webkit-scrollbar{display:none}
.xstats .st{flex:none;width:33.33%;min-width:112px;scroll-snap-align:start;text-align:center;padding:0 8px;position:relative}
.xstats .st + .st::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:rgba(255,255,255,.28)}
.xstats .st .si{margin:0 auto 7px;width:30px;height:30px;color:#FFD9CF}
.xstats .st .si svg{width:100%;height:100%}
.xstats .st b{font-family:var(--fd);font-weight:700;font-size:16px;display:block;line-height:1.15}
.xstats .st span{font-size:10.5px;opacity:.92;display:block;margin-top:1px;line-height:1.3}
.xstats .dots{display:flex;justify-content:center;gap:6px;padding:0 0 12px}
.xstats .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}
.xstats .dots i.on{width:18px;border-radius:4px;background:#fff}

/* ---------- services scroll ---------- */
.svcrow{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:2px 16px 16px}
.svcrow::-webkit-scrollbar{display:none}
.svc{flex:none;width:172px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);cursor:pointer;transition:transform .18s ease}
@media(hover:hover){.svc:hover{transform:translateY(-4px)}}
.svc .ph{aspect-ratio:4/3;position:relative;overflow:hidden;background:repeating-linear-gradient(45deg,#FBEBE7,#FBEBE7 12px,#F6DFD9 12px,#F6DFD9 24px);display:grid;place-items:center;color:#D3958A}
.svc .ph svg{width:34px;height:34px;position:relative;z-index:1}
.svc .ph::before{content:"<svg viewBox='0 0 24 24'/> " attr(data-label);position:absolute;left:7px;bottom:6px;font-family:var(--fm);font-size:8.5px;color:#C08A7E;border:1px dashed #E2B6AC;padding:1px 6px;border-radius:5px;z-index:2;background:rgba(255,255,255,.65)}
.svc .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:220% 100%;animation:shimmer 2.6s linear infinite;pointer-events:none}
.svc .sb{padding:11px 12px 13px}
.svc .stt{font-family:var(--fd);font-weight:600;font-size:13.5px;color:#C01810;line-height:1.3}
.svc .sds{font-size:11px;color:var(--ink-2);line-height:1.5;margin-top:5px}

/* ---------- warehouses ---------- */
.whlist{padding:2px 16px 8px;display:grid;gap:12px}
@media(min-width:640px){.whlist{grid-template-columns:1fr 1fr}}
.wh{display:flex;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);cursor:pointer;position:relative}
.wh .ph{width:38%;min-width:118px;position:relative;background:repeating-linear-gradient(45deg,#FBEBE7,#FBEBE7 12px,#F6DFD9 12px,#F6DFD9 24px);display:grid;place-items:center;color:#D3958A}
.wh .ph svg{width:32px;height:32px;position:relative;z-index:1}
.wh .ph::before{content:attr(data-label);position:absolute;left:6px;bottom:6px;font-family:var(--fm);font-size:8.5px;color:#C08A7E;border:1px dashed #E2B6AC;padding:1px 6px;border-radius:5px;z-index:2;background:rgba(255,255,255,.65)}
.wh .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:220% 100%;animation:shimmer 2.6s linear infinite;pointer-events:none}
.wh .wb{flex:1;padding:13px 46px 13px 14px;min-width:0}
.wh .wt{font-family:var(--fd);font-weight:600;font-size:15px}
.wh .ws{font-size:11px;color:var(--muted);margin-top:1px}
.wh ul{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.wh li{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--ink-2);line-height:1.4}
.wh li svg{width:13px;height:13px;color:#C01810;flex:none;margin-top:1.5px}
.wh .arr{position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#FF3D2E,#C01810);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px -8px #E01F1F}
.wh .arr svg{width:14px;height:14px}

/* ---------- why PT CARGO ---------- */
.whyhead{text-align:center;font-family:var(--fd);font-weight:600;font-size:18px;padding:18px 16px 12px}
.whygrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 20px}
@media(min-width:640px){.whygrid{grid-template-columns:repeat(3,1fr)}}
.why{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center}
.why .wi{width:40px;height:40px;margin:0 auto 8px;border-radius:12px;background:var(--clay-soft);color:#C01810;display:grid;place-items:center}
.why .wi svg{width:20px;height:20px}
.why .wl{font-size:11.5px;color:var(--ink-2);line-height:1.45}
.why .wl b{display:block;font-family:var(--fd);font-weight:500;font-size:12.5px;color:var(--ink);margin-bottom:2px}

/* fix: การ์ดที่มี margin ด้านข้าง ห้ามกว้าง 100% (จะเลยจอ) — แพทเทิร์นเดียวกับ
   .compare/.rateteaser/.warncard/.addr ของไฟล์เดิม เพราะติด class .wrap (width:100%) */
.trust,.calc,.xstats{width:auto;max-width:none}

/* section head link color on red theme */
.sechead .more{color:#C01810}