/* หน้า public โลกอนาคต บนเว็บ ptcargoexpress (เจ้าของสั่งทำจริง 24 ต.ค. 2569 · ตัวแปลง newweb/build-web-apply.php ใส่ให้เฉพาะเว็บ ไม่แตะแอป)
   ต้นแบบ _delivery/mockup_pub_future_20261024 (24 ต.ค. 2569 เจ้าของสั่ง "สไตล์เดียวกัน ไม่ต้องจัดเรียงเหมือนกัน สี theme เดียวกัน header footer ตัวเดียวกัน พื้นหลังโลกอนาคต มีภาพเคลื่อนไหว")
   ใช้ต่อจาก pt-shop.css + pub-shell.css · เนื้อหาเดิมของแต่ละหน้า (sp-*) วางบนการ์ดขาวอ่านง่าย ลอยบนพื้นกรมท่าเคลื่อนไหว */
body.sp.pf{background:#040b1c;color:#0f172a;font-family:var(--fb)}
.pf .sp-app{position:relative;z-index:1;background:transparent;min-height:100vh}
.pf h1,.pf h2,.pf h3{font-family:var(--fh)}

/* ---------- พื้นหลังโลกอนาคต (ติดจอ ไม่เลื่อนตาม) ---------- */
.pf-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(1100px 620px at 85% -10%,rgba(53,212,255,.18),transparent 62%),radial-gradient(900px 640px at -12% 34%,rgba(255,106,19,.16),transparent 60%),linear-gradient(180deg,#040b1c 0%,#071636 55%,#040b1c 100%)}
.pf-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.pf-globe{position:absolute;right:-10vw;top:6vh;width:min(52vw,640px);aspect-ratio:1;border-radius:50%;opacity:.42;mix-blend-mode:screen;
  background:url(../img/fx/fut_globe.webp) center/cover;animation:pfSpin 140s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 58%,transparent 71%);mask-image:radial-gradient(circle,#000 58%,transparent 71%)}
.pf-grid{position:absolute;left:-60%;right:-60%;bottom:-6%;height:52%;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(53,212,255,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(53,212,255,.2) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 90%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 90%);animation:pfGrid 5s linear infinite}
.pf-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;animation:pfOrb 18s ease-in-out infinite alternate}
.pf-orb.is-a{width:440px;height:440px;left:-140px;top:22%;background:#ff6a13}
.pf-orb.is-b{width:560px;height:560px;right:-200px;top:52%;background:#1d5bff;animation-duration:26s}
.pf-scan{position:absolute;left:0;right:0;top:-10%;height:2px;background:linear-gradient(90deg,transparent,rgba(53,212,255,.9),rgba(255,154,61,.9),transparent);box-shadow:0 0 18px rgba(53,212,255,.7);opacity:.55;animation:pfScan 9s linear infinite}
@keyframes pfSpin{to{transform:rotate(360deg)}}
@keyframes pfGrid{to{background-position:0 64px,0 0}}
@keyframes pfOrb{to{transform:translate(90px,-70px) scale(1.18)}}
@keyframes pfScan{0%{top:-5%}100%{top:105%}}
@media (prefers-reduced-motion:reduce){.pf-globe,.pf-grid,.pf-orb,.pf-scan{animation:none}.pf-scan{display:none}}
@media (max-width:640px){.pf-globe{width:90vw;right:-35vw;top:10vh;opacity:.3}.pf-orb{filter:blur(50px)}}

/* ---------- เนื้อหา ---------- */
.pf main.sp-page{position:relative;padding-top:104px;padding-bottom:56px}
.pf main.au-wrap{position:relative;padding-top:96px}
.pf .sp-sec,.pf .sp-card,.pf .sp-auth,.pf .sp-form,.pf .au-card{background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.6);border-radius:20px;box-shadow:0 18px 50px rgba(2,8,23,.45),0 0 0 1px rgba(53,212,255,.06)}
.pf main>.sp-note,.pf main>p,.pf main>.sp-sec-h h2{color:#c7d5f2}
.pf .sp-btn.is-pri{background:linear-gradient(135deg,#ff6a13,#ff4d00);border-color:transparent;color:#fff;box-shadow:0 10px 26px rgba(255,106,19,.35)}

/* หัวหน้าเนื้อหา: กระจกกรมท่า + ภาพจริงด้านขวา + เส้นนีออน */
.pf{--px-img:url(pub/pub-warehouse.webp)}
.pf .sp-hero:not(.is-img):not(.is-deliv),.pf .sp-auth-h,.pf .sp-land:not(.is-ban){position:relative;overflow:hidden;min-height:210px;padding:30px 26px;border:1px solid rgba(53,212,255,.22);border-radius:22px;color:#fff;
  background:linear-gradient(90deg,rgba(4,11,28,.94) 0%,rgba(6,18,44,.8) 45%,rgba(4,11,28,.2) 100%),var(--px-img) right center/cover no-repeat,#061331;
  box-shadow:0 24px 60px rgba(2,8,23,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.pf .sp-hero:not(.is-img):not(.is-deliv)::after,.pf .sp-auth-h::after,.pf .sp-land:not(.is-ban)::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,#35d4ff,#ff9a3d,transparent);background-size:200% 100%;animation:pfLine 4s linear infinite}
@keyframes pfLine{to{background-position:-200% 0}}
.pf .sp-hero .sp-hero-t,.pf .sp-land .sp-hero-t{position:relative;z-index:1}
.pf .sp-hero .sp-hero-t small,.pf .sp-auth-h small,.pf .sp-land small{align-self:flex-start;display:inline-block;padding:4px 12px;border:1px solid rgba(53,212,255,.45);border-radius:99px;background:rgba(53,212,255,.1);color:#35d4ff;font-size:12px;letter-spacing:.06em}
.pf .sp-hero h1,.pf .sp-hero h2,.pf .sp-auth-h h1,.pf .sp-auth-h h2,.pf .sp-land h1,.pf .sp-land h2{color:#fff;font-size:clamp(24px,3.4vw,36px);font-weight:700;line-height:1.25;text-wrap:balance}
.pf .sp-hero p,.pf .sp-auth-h p,.pf .sp-land p{color:#c7d5f2;opacity:1;max-width:560px}
.pf .sp-hero .sp-kpis>div,.pf .sp-auth-h .sp-kpis>div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pf .sp-hero .sp-kpis b,.pf .sp-auth-h .sp-kpis b{color:#fff}
.pf .sp-hero .sp-kpis span,.pf .sp-auth-h .sp-kpis span{color:#9fb3d9}
@media (max-width:640px){
  .pf main.sp-page{padding-top:88px}
  .pf .sp-hero:not(.is-img):not(.is-deliv),.pf .sp-auth-h,.pf .sp-land:not(.is-ban){min-height:180px;padding:22px 18px;background:linear-gradient(180deg,rgba(4,11,28,.5) 0%,rgba(4,11,28,.93) 72%),var(--px-img) center/cover no-repeat,#061331}
}
/* รูปหัวหน้าต่อหน้า (คลาส px-* ที่ตัวสร้าง mockup ใส่บน body) */
.pf.px-port{--px-img:url(pub/pub-port.webp)}
.pf.px-qc{--px-img:url(pub/pub-qc.webp)}
.pf.px-docs{--px-img:url(pub/pub-docs.webp)}
.pf.px-deliv{--px-img:url(pub/pub-delivery.webp)}
.pf.px-hub{--px-img:url(pub/pub-hub.webp)}
/* แถบบนทึบตั้งแต่แรก (หน้าเนื้อหาไม่มีภาพเต็มจอให้ลอยทับ) */
.pf .nav{background:rgba(4,11,28,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.pf .lx-foot{position:relative;z-index:1}
/* หน้าสั้น: ท้ายหน้าชิดล่างจอ */
.pf main.sp-page{min-height:calc(100vh - 330px)}

/* ---------- หน้าเข้าสู่ระบบ (.au-*) ฝั่งซ้ายเป็นภาพโลกอนาคตแทนภาพดินปั้น ---------- */
.pf main.au-wrap{min-height:100vh;padding-top:72px}
.pf .au-side{top:72px;height:calc(100vh - 72px);background:transparent;border-right:1px solid rgba(53,212,255,.16)}
.pf .au-side picture{display:none}
/* เจ้าของสั่ง 24 ต.ค. "เอารูปพื้นหลังออก เหลือแต่พื้นหลังรูปโลก" · ปิดชั้นไล่สีครีม/กรมท่าของ pt-shop.css (.au-side:after) ที่ซ้อนอยู่ */
.pf .au-side::after{display:none}
.pf .au-side .au-logo{display:none}
.pf .au-side-copy h2{color:#fff;font-family:var(--fh);text-shadow:0 4px 24px rgba(0,0,0,.45)}
.pf .au-side-copy>.au-tr{background:rgba(53,212,255,.1);border:1px solid rgba(53,212,255,.4);color:#bfeeff}
.pf .au-points li{background:rgba(8,22,49,.62);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none}
.pf .au-points b{color:#fff}
.pf .au-points em{color:#9fb3d9}
.pf .au-hours{background:rgba(8,22,49,.7);border:1px solid rgba(255,255,255,.14);color:#c7d5f2}
.pf .au-hours b{color:#fff}
.pf .au-main{background:transparent}
.pf .au-card{box-shadow:0 30px 70px rgba(2,8,23,.6),0 0 0 1px rgba(53,212,255,.12)}
.pf .au-main>p,.pf .au-main>small,.pf .au-foot{color:#9fb3d9}
@media (max-width:899px){.pf .au-side{position:relative;top:auto;height:260px}}

/* ---------- 27 ต.ค. 2569 เจ้าของสั่ง: หน้าสมัคร "สีพื้นหลังเพี้ยน" · โลโก้ให้เหมือนกัน เอาพื้นขาวออก · รองรับ dark mode ----------
   การ์ดขาวของหน้า public ทับธีมมืดของ pt-shop.css (ตัวหนังสือสีอ่อน ช่องกรอกดำ) → โหมดมืดใช้การ์ดกรมท่าเข้ม
   โหมดมืด = ตามเครื่อง (ไม่ได้เลือกสว่างเอง) หรือกดเลือกมืด แบบเดียวกับ pt-shop.css */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .pf .sp-sec,:root:not([data-theme=light]) .pf .sp-card,:root:not([data-theme=light]) .pf .sp-auth,:root:not([data-theme=light]) .pf .sp-form,:root:not([data-theme=light]) .pf .au-card{background:rgba(12,22,44,.94);border-color:rgba(53,212,255,.16);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(53,212,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}
:root[data-theme=dark] .pf .sp-sec,:root[data-theme=dark] .pf .sp-card,:root[data-theme=dark] .pf .sp-auth,:root[data-theme=dark] .pf .sp-form,:root[data-theme=dark] .pf .au-card{background:rgba(12,22,44,.94);border-color:rgba(53,212,255,.16);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(53,212,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* โลโก้บนการ์ดสมัคร = โลโก้ตัวเดียวกับแถบบน (img/pt_logo.png) ไม่มีพื้นขาว */
.pf .sp-reg-hd img{content:url(../img/pt_logo.png);background:transparent;box-shadow:none;border-radius:0}
/* หน้าเช็คพัสดุ (px-deliv · 7 พ.ย. 2569): เงากล่องหัว .sp-hero (position:relative) วาดทับกล่องขาวด้านล่างที่เป็น static → ยกกล่องขาวขึ้นชั้นเดียวกัน วาดทีหลังจึงอยู่บนเงา */
.pf.px-deliv main>.sp-sec,.pf.px-deliv main>.sp-stack{position:relative}