@charset "UTF-8";
/* ★ เว็บ ptcargoexpress.com บนจอคอม (ส่วน 8 · 22 ต.ค. 2569) ★
   ใส่เฉพาะชุดเว็บโดย newweb/build-web.sh (แอปมือถือไม่โหลดไฟล์นี้) · โหลดหลัง pt-shop.css
   จอ ≥1024px: แถบล่างของแอป (.sp-nav) กลายเป็นเมนูซ้าย · หัวหน้าเต็มกว้าง · เนื้อหากว้างสุด ~1100px
   หน้าที่ build ใส่ .wd-nav ที่ .sp-app = หน้าในระบบ (ต้องเข้าสู่ระบบ) · หน้าสาธารณะ/เข้าสู่ระบบไม่มีเมนูซ้าย
   ต่ำกว่า 1024px หน้าตาเหมือนแอปทุกอย่าง: รายการที่ build เติม (.is-wd) และเมนูที่ build ใส่ให้หน้าไม่มีแถบล่าง (.wd-made) ซ่อนไว้ */

.sp-nav .is-wd,.sp-nav.wd-made{display:none}

@media screen and (min-width:1024px){
  .sp-app.wd-nav{--wd-side:232px;--wd-top:64px;padding-left:var(--wd-side)}
  .sp-app.wd-nav>.sp-top{margin-left:calc(-1 * var(--wd-side))}
  .sp-app.wd-nav .sp-top-row{max-width:none;padding-left:20px;padding-right:24px}
  .sp-app.wd-nav .sp-top-links{display:none}

  /* ---------- เมนูซ้าย (โฉมใหม่ 23 ต.ค. 2569 เจ้าของสั่ง "ออกแบบให้ทันสมัย") ----------
     ไอคอนอยู่ในกล่องมน 34px · หัวกลุ่มตัวเล็กสีเทา (ช้อปปิ้งและพัสดุ / การเงิน / รายได้และกิจกรรม)
     อันที่เลือก: พื้นส้มอ่อน + กล่องไอคอนส้มไล่สี ไอคอนขาว + แถบส้มซ้าย · ชี้: กล่องไอคอนส้มอ่อน */
  .sp-app.wd-nav{--wd-side:244px}
  .sp-app.wd-nav .sp-nav,.sp-app.wd-nav .sp-nav.wd-made{position:fixed;top:var(--wd-top);bottom:0;left:0;right:auto;z-index:29;display:flex;flex-direction:column;gap:3px;width:var(--wd-side);height:auto;padding:8px 14px 24px;background:linear-gradient(180deg,var(--sp-card) 0%,var(--sp-card) 70%,var(--sp-bg) 100%);border-top:0;border-right:1px solid var(--sp-line);box-shadow:4px 0 18px rgba(20,22,30,.03);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sp-line-2) transparent}
  .sp-app.wd-nav .sp-nav a,.sp-app.wd-nav .sp-nav a.is-wd{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;flex:0 0 auto;min-height:46px;padding:5px 10px 5px 6px;border-radius:12px;font-size:14.5px;font-weight:500;line-height:1.3;text-align:left;color:var(--sp-ink);transition:background-color .15s,color .15s}
  .sp-app.wd-nav .sp-nav a.is-on{font-weight:500;color:var(--sp-ink)}
  .sp-app.wd-nav .sp-nav a .sp-ic{flex:0 0 auto;box-sizing:border-box;width:36px;height:36px;padding:8px;border-radius:11px;background:var(--sp-bg);color:var(--sp-ink-2);transition:background-color .15s,color .15s}
  .sp-app.wd-nav .sp-nav a:hover{background:var(--sp-bg)}
  .sp-app.wd-nav .sp-nav a:hover .sp-ic{background:var(--sp-brand-soft);color:var(--sp-brand)}
  /* ไฮไลต์เมนูซ้าย = wd-on (build เลือกตามกลุ่มหน้า) · is-on เป็นของแถบล่างมือถือ */
  .sp-app.wd-nav .sp-nav a.wd-on{background:var(--sp-brand-soft);color:var(--sp-brand-ink);font-weight:700}
  .sp-app.wd-nav .sp-nav a.wd-on .sp-ic{background:linear-gradient(135deg,var(--sp-brand-2),var(--sp-brand));color:#fff;box-shadow:0 4px 10px rgba(242,107,29,.28)}
  .sp-app.wd-nav .sp-nav a.wd-on::after{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--sp-brand)}
  .sp-app.wd-nav .sp-nav a>span:not(.sp-badge){order:1;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sp-app.wd-nav .sp-nav .sp-badge,.sp-app.wd-nav .sp-nav .sp-badge.is-new{position:static;order:2;flex:0 0 auto;min-width:20px;height:20px;padding:0 8px;border-radius:10px;font-size:11px;font-weight:700;line-height:20px}
  /* ลำดับเมนูบนจอคอม: ซื้อ → ของเข้า → ส่ง → เงิน → อื่น ๆ (แถบล่างมือถือเรียงตามเดิม) */
  .sp-app.wd-nav .sp-nav a[href="home.html"]{order:1}
  .sp-app.wd-nav .sp-nav a[href="shop.html"]{order:2}
  .sp-app.wd-nav .sp-nav a[href="orders.html"]{order:3}
  .sp-app.wd-nav .sp-nav a[href="parcels.html"]{order:4}
  .sp-app.wd-nav .sp-nav a[href="ship.html"]{order:5}
  .sp-app.wd-nav .sp-nav a[href="wallet.html"]{order:6}
  .sp-app.wd-nav .sp-nav a[href="topup.html"]{order:7}
  .sp-app.wd-nav .sp-nav a[href="yuan.html"]{order:8}
  .sp-app.wd-nav .sp-nav a[href="aff.html"]{order:9}
  .sp-app.wd-nav .sp-nav a[href="game.html"]{order:10}
  .sp-app.wd-nav .sp-nav a[href="me.html"]{order:11}
  /* หัวกลุ่ม: ตัวเล็กสีเทาเหนือเมนูแรกของกลุ่ม (แทนเส้นคั่นเดิม) */
  .sp-app.wd-nav .sp-nav a[href="home.html"],.sp-app.wd-nav .sp-nav a[href="wallet.html"],.sp-app.wd-nav .sp-nav a[href="aff.html"]{margin-top:30px}
  .sp-app.wd-nav .sp-nav a[href="home.html"]::before,.sp-app.wd-nav .sp-nav a[href="wallet.html"]::before,.sp-app.wd-nav .sp-nav a[href="aff.html"]::before{position:absolute;left:8px;top:-23px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--sp-mute);pointer-events:none}
  .sp-app.wd-nav .sp-nav a[href="home.html"]::before{content:"\000E0A\000E49\000E2D\000E1B\000E1B\000E34\000E49\000E07\000E41\000E25\000E30\000E1E\000E31\000E2A\000E14\000E38"}
  .sp-app.wd-nav .sp-nav a[href="wallet.html"]::before{content:"\000E01\000E32\000E23\000E40\000E07\000E34\000E19"}
  .sp-app.wd-nav .sp-nav a[href="aff.html"]::before{content:"\000E23\000E32\000E22\000E44\000E14\000E49\000E41\000E25\000E30\000E01\000E34\000E08\000E01\000E23\000E23\000E21"}

  /* ---------- เนื้อหา ---------- */
  .sp-app.wd-nav>main.sp-wrap{max-width:1148px;padding-left:24px;padding-right:24px}
  .sp-app.wd-nav>main.sp-page{padding-block:18px 28px;gap:12px}
  .sp-app.wd-nav .sp-bar,.sp-app.wd-nav.has-bar .sp-bar,.sp-app.wd-nav .sp-composer{left:var(--wd-side)}
  .sp-app.wd-nav .sp-tabbar.is-stick{top:var(--wd-top)}

  /* ---------- สมัครสมาชิก: สองคอลัมน์ (ป้ายซ้ายค้างไว้ · ฟอร์มขวา) · หน้าเข้าสู่ระบบเป็นสองคอลัมน์ในตัวอยู่แล้ว ---------- */
  .sp-auth.is-reg{max-width:980px;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:32px;row-gap:0;align-items:start;padding:28px 30px}
  .sp-auth.is-reg>*{grid-column:2;margin-bottom:14px}
  .sp-auth.is-reg>:last-child{margin-bottom:0}
  /* span หลายแถว: แถวว่างไม่มีความสูง (row-gap 0 · ระยะห่างใช้ margin แทน) */
  .sp-auth.is-reg>.sp-auth-h{grid-column:1;grid-row:1 / span 30;position:sticky;top:88px;margin-bottom:0}
  /* ---------- กริดการ์ดปรับตามความกว้างกล่องจริง (22 ต.ค. 2569) ----------
     pt-shop.css ตั้ง .sp-grid 5 คอลัมน์ตามความกว้างจอ แต่เว็บมีเมนูซ้าย 232px และคอลัมน์ขวา 360px
     การ์ดสินค้าในคอลัมน์ขวาเลยถูกบีบ ชื่อสินค้าตกบรรทัดทีละคำ → ให้นับคอลัมน์จากความกว้างของกล่องที่อยู่จริง */
  .sp-app.wd-nav>main,.sp-app.wd-nav .sp-cols>*{container-type:inline-size}
  @container (max-width:880px){.sp-app.wd-nav .sp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @container (max-width:700px){.sp-app.wd-nav .sp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @container (max-width:440px){.sp-app.wd-nav .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  /* หน้าแท็บ (เช่น ร้านของฉัน แท็บหาสินค้ามาแชร์): ส่วนซ้ายถูกซ่อนหมด เหลือแค่ช่องค้น → รวมเป็นคอลัมน์เดียว การ์ดได้เต็มกว้าง */
  .sp-app.wd-nav .sp-cols:has(>.sp-page:first-child>.sp-sec[hidden]):not(:has(>.sp-page:first-child>.sp-sec:not([hidden]))){grid-template-columns:minmax(0,1fr)}
  .sp-app.wd-nav .sp-cols:has(>.sp-page:first-child>.sp-sec[hidden]):not(:has(>.sp-page:first-child>.sp-sec:not([hidden])))>aside{position:static}
  /* ขั้นตอน "ทำยังไง" ในคอลัมน์แคบ: pt-shop.css เปลี่ยนเป็นแนวนอนที่จอ ≥760px ทำให้ตัวหนังสือตกบรรทัดทีละคำ → คงแนวตั้ง */
  @container (max-width:600px){.sp-app.wd-nav .sp-howto li{flex-direction:column;align-items:center;text-align:center;padding:12px 6px}}
  /* คอลัมน์ขวาว่าง (ทุกกล่องใน aside ถูกซ่อน เช่น ร้านของฉัน แท็บสินค้าของฉัน) → เนื้อหาเต็มกว้าง ไม่เหลือที่ว่างครึ่งจอ (23 ต.ค. 2569) */
  .sp-app.wd-nav .sp-cols:has(>aside):not(:has(>aside>:not([hidden]))){grid-template-columns:minmax(0,1fr)}
  .sp-app.wd-nav .sp-cols:has(>aside[hidden]){grid-template-columns:minmax(0,1fr)}
  .sp-app.wd-nav .sp-cols:has(>aside):not(:has(>aside>:not([hidden])))>aside{display:none}
}

/* ==========================================================================
   จอคอม: เมนูบน 5 ปุ่ม + เมนูใหญ่ใต้ "บริการ" + แถวเมนูย่อยตามหมวด (เจ้าของเลือกแบบ 1+3 · 24 ต.ค. 2569)
   ต้นแบบ public_html/_delivery/mockup_desknav_20261024 · markup ใส่โดย build-web-apply.php ($wdApply)
   แทนเมนูซ้ายเดิม: แถบล่างมือถือ (.sp-nav) ซ่อนบนจอคอม เนื้อหาเต็มกว้าง · ต่ำกว่า 1024px ซ่อนของใหม่ทั้งหมด
   ========================================================================== */
.wd-top5,.wd-sub,.wd-camt,.wd-sgo{display:none}
@media screen and (min-width:1024px){
  .sp-app.wd-nav{--wd-side:0px;padding-left:0}
  .sp-app.wd-nav>.sp-top{margin-left:0}
  .sp-app.wd-nav .sp-nav,.sp-app.wd-nav .sp-nav.wd-made{display:none!important}
  .sp-app.wd-nav .sp-top-row{max-width:1196px;margin:0 auto;padding-left:24px;padding-right:24px;gap:14px}

  /* ช่องค้นหา: คำ "ค้นด้วยรูป" + ปุ่มค้นหาสีส้ม (mockup) */
  .sp-app.wd-nav .sp-top .sp-search{padding-right:5px}
  .sp-app.wd-nav .sp-top .sp-search-cam{display:inline-flex;align-items:center;gap:5px;width:auto;height:30px;padding:0 10px;border-radius:8px;background:#eef3ff;color:#1748b8}
  .wd-camt{display:inline;font-size:12px;font-weight:700;white-space:nowrap}
  .wd-sgo{display:inline-flex;align-items:center;flex:none;height:30px;margin-left:5px;padding:0 16px;border:0;border-radius:8px;background:var(--sp-brand);color:#fff!important;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .wd-sgo:hover{background:var(--sp-brand-ink)}

  /* เมนูบน 5 ปุ่ม */
  .wd-top5{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto}
  .wd-top5>a,.wd-svc>summary{display:flex;align-items:center;gap:4px;height:38px;padding:0 13px;border-radius:10px;color:rgba(255,255,255,.85);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;list-style:none}
  .wd-svc>summary::-webkit-details-marker{display:none}
  .wd-top5>a:hover,.wd-svc>summary:hover{background:rgba(255,255,255,.12);color:#fff}
  .wd-top5>a.is-on,.wd-svc>summary.is-on{background:rgba(255,255,255,.18);color:#fff}
  .wd-svc[open]>summary{background:#fff;color:#1748b8}
  .wd-svc>summary i{font-style:normal;font-size:10px;opacity:.8;transition:transform .15s}
  .wd-svc[open]>summary i{transform:rotate(180deg)}
  /* ปุ่มบนหัวเดิมที่ไม่มีใน mockup: ซ่อนบนจอคอม (ยังอยู่ในหน้าฉัน/มือถือ) */
  .sp-app.wd-nav .sp-top .sp-theme,.sp-app.wd-nav .sp-top .sp-top-fav{display:none}

  /* เมนูใหญ่ใต้ "บริการ" */
  .wd-svc{position:static}
  .wd-mega{position:absolute;z-index:40;top:100%;left:50%;transform:translateX(-50%);width:min(880px,calc(100vw - 48px));padding:18px 20px 14px;border-radius:0 0 18px 18px;background:var(--sp-card);color:var(--sp-ink);border:1px solid var(--sp-line);border-top:0;box-shadow:0 26px 50px -18px rgba(6,21,54,.55)}
  .wd-mega-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .wd-mega h4{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--sp-mute)}
  .wd-mega-g a{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;color:var(--sp-ink);font-size:14px;font-weight:600;text-decoration:none}
  .wd-mega-g a:hover{background:#eef3ff;color:#1748b8}
  .wd-mega-g a small{display:block;font-size:11.5px;font-weight:400;color:var(--sp-mute);line-height:1.3}
  .wd-mega .wd-ic5,.wd-mega .sp-ic{flex:none;width:24px;height:24px}
  .wd-mega .sp-ic{color:#1748b8}
  .wd-mega-f{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--sp-line);font-size:12.5px;color:var(--sp-ink-2)}
  .wd-mega-f a{color:#1748b8;font-weight:700;text-decoration:none}
  .sp-top{overflow:visible}

  /* แถวเมนูย่อยตามหมวด */
  .wd-sub{display:block;background:var(--sp-card);border-bottom:1px solid var(--sp-line);box-shadow:0 4px 10px -8px rgba(6,21,54,.35)}
  .wd-sub-in{display:flex;align-items:center;gap:2px;max-width:1196px;margin:0 auto;padding:0 24px;overflow-x:auto;scrollbar-width:none}
  .wd-sub-k{flex:none;margin-right:8px;font-size:12px;color:var(--sp-mute)}
  .wd-sub a{position:relative;display:flex;align-items:center;gap:7px;flex:none;height:46px;padding:0 14px;color:var(--sp-ink-2);font-size:14px;font-weight:600;text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
  .wd-sub a:hover{color:#1748b8}
  .wd-sub a.is-on{color:#1748b8;border-bottom-color:#1748b8}
  .wd-sub .wd-ic5,.wd-sub .sp-ic{width:19px;height:19px;flex:none}
  .wd-sub .sp-ic{color:currentColor}
  .wd-sub a i{min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--sp-brand);color:#fff;font:700 11px/19px var(--sp-num);font-style:normal;text-align:center}
  .wd-sub a i[hidden]{display:none}
}
/* ป้ายหัวหน้าช้อป (.sp-bnimg สูง 280px) รูปต้องสูงเต็มกล่องแล้ว contain · เดิม height:auto รูปล้นล่างโดนตัด (เห็นชัดหลังเนื้อหากว้างขึ้นเพราะถอดเมนูซ้าย) */
@media screen and (min-width:1024px){.sp-app.wd-nav .sp-page>.sp-bnimg:not(.sp-champ-bn) img{width:100%;height:100%;object-fit:contain}}
/* แถบหัวเต็มความกว้างจอ ให้ช่องค้นหากว้างพอเห็นคำ "วางลิงก์ 1688 / Taobao หรือพิมพ์ชื่อสินค้า" ครบ (mockup) */
@media screen and (min-width:1024px){
  .sp-app.wd-nav .sp-top-row{max-width:none;padding-left:28px;padding-right:28px;gap:10px}
  .sp-app.wd-nav .sp-top .sp-search{flex:1 1 auto;min-width:0}
  .wd-top5>a,.wd-svc>summary{padding:0 11px}
}
@media screen and (min-width:1024px) and (max-width:1279px){.sp-app.wd-nav .sp-top .sp-logo-t{display:none}}
/* ช่องค้นหาบนหัว ตาม mockup (เจ้าของสั่ง "เอาขอบมนให้เท่ากัน" 24 ต.ค. 2569)
   กรอบ 42px มน 14px · แว่นสีส้ม · ปุ่มค้นด้วยรูป/ค้นหา สูง 34px มน 10px เท่ากันทั้งคู่ (ขอบใน = ขอบนอก − ระยะ 4px) */
@media screen and (min-width:1024px){
  .sp-app.wd-nav .sp-top .sp-search{height:42px;padding:0 4px 0 12px;gap:8px;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .sp-app.wd-nav .sp-top .sp-search>svg{color:#ff5c00;width:20px;height:20px;flex:none}
  .sp-app.wd-nav .sp-top .sp-search-cam{height:34px;padding:0 12px 0 8px;gap:6px;border-radius:10px;background:#eaf1ff;color:#1748b8}
  .sp-app.wd-nav .sp-top .sp-search-cam svg{width:22px;height:22px}
  .sp-app.wd-nav .sp-top .wd-camt{font-size:12.5px}
  .sp-app.wd-nav .sp-top .wd-sgo{height:34px;margin-left:0;padding:0 18px;border-radius:10px;background:linear-gradient(90deg,#ff5c00,#ff8a3d);font-size:13.5px}
  .sp-app.wd-nav .sp-top .wd-sgo:hover{background:linear-gradient(90deg,#f05400,#ff7a2a)}
}
/* ระยะห่างแถบหัวลดอีกนิด ให้คำในช่องค้นหาไม่โดนตัดที่ 1280px */
@media screen and (min-width:1024px){.sp-app.wd-nav .sp-top-row{gap:8px}.sp-app.wd-nav .sp-top .sp-search-cam{padding:0 10px 0 7px;gap:5px}.wd-top5>a,.wd-svc>summary{padding:0 10px}}