/* ==========================================================================
   pt_site.css   ชุดออกแบบหน้าสาธารณะของ PTCARGO
   --------------------------------------------------------------------------
   ใช้ร่วมทุกหน้าที่คนทั่วไปเปิดดูได้  หน้าบริการ หน้าสมัคร หน้าติดตามพัสดุ
   คลาสขึ้นต้น pt- ทั้งหมด  ไม่ทับกับธีมเดิมที่ยังอยู่ในหน้าเดียวกัน

   วางบนสามอย่าง
     1 ตัวแปรสี  แก้ที่เดียวเปลี่ยนทั้งเว็บ  และมีชุดโหมดมืดให้เอง
     2 ระยะเป็นขั้น  4 8 12 16 24 32 48 64  ไม่ใส่เลขมั่ว
     3 จอแคบย่อขนาด ไม่สลับตำแหน่ง  ยกเว้นที่จำเป็นจริง ๆ
   ========================================================================== */

:root{
	--pts-brand:#ff5c00;
	/* ส้มเข้มสำหรับพื้นปุ่มที่มีตัวหนังสือสีขาวทับเท่านั้น
	   ส้มสดกับตัวหนังสือขาวได้ค่าความต่างแค่ 3.10 ต่ำกว่าเกณฑ์ 4.5  ตัวนี้ได้ 4.73
	   ★ ห้ามเอาไปใช้กับไอคอน เส้นขอบ หรือตัวหนังสือสีแบรนด์ ★ */
	--pts-brand-btn:#cc4600;
	--pts-brand-ink:#c43f00;
	--pts-brand-wash:#fff4ec;
	--pts-brand-line:#ffd9c2;

	--pts-ink:#16181d;
	--pts-ink-2:#3f4550;
	--pts-ink-3:#6b7280;
	--pts-muted:#9aa1ad;

	--pts-bg:#ffffff;
	--pts-bg-2:#f7f8fa;
	--pts-bg-3:#eef0f4;
	--pts-line:#e4e7ec;
	--pts-line-2:#d3d8e0;

	--pts-ok:#0f9b5a;
	--pts-warn:#b45309;

	--pts-sans:"IBM Plex Sans Thai","Prompt",-apple-system,"Segoe UI",sans-serif;
	--pts-mono:"IBM Plex Mono",ui-monospace,monospace;

	--pts-r:14px;
	--pts-r-sm:9px;
	--pts-shadow:0 1px 2px rgba(22,24,29,.05);
	--pts-shadow-lg:0 10px 34px rgba(22,24,29,.10);
	--pts-max:1140px;
}

@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]){
		--pts-ink:#eef1f6; --pts-ink-2:#c3c9d4; --pts-ink-3:#9aa2b1; --pts-muted:#7d8695;
		--pts-bg:#14171d; --pts-bg-2:#1a1e26; --pts-bg-3:#222733;
		--pts-line:#2a3040; --pts-line-2:#394153;
		--pts-brand-wash:#2b1608; --pts-brand-line:#4d2a14; --pts-brand-ink:#ff9a5c;
	}
}
:root[data-theme="dark"]{
	--pts-ink:#eef1f6; --pts-ink-2:#c3c9d4; --pts-ink-3:#9aa2b1; --pts-muted:#7d8695;
	--pts-bg:#14171d; --pts-bg-2:#1a1e26; --pts-bg-3:#222733;
	--pts-line:#2a3040; --pts-line-2:#394153;
	--pts-brand-wash:#2b1608; --pts-brand-line:#4d2a14; --pts-brand-ink:#ff9a5c;
}

/* ---------- พื้นฐาน ---------- */
.pt-site,.pt-site *{box-sizing:border-box}
.pt-site{
	margin:0;background:var(--pts-bg);color:var(--pts-ink);
	font-family:var(--pts-sans);font-size:16px;line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
.pt-site img{max-width:100%;height:auto;display:block}
.pt-site a{color:var(--pts-brand-ink);text-decoration:none}
.pt-site a:hover{text-decoration:underline}
.pt-site :focus-visible{outline:2px solid var(--pts-brand);outline-offset:2px;border-radius:4px}
.pt-wrap{max-width:var(--pts-max);margin:0 auto;padding:0 20px}
/* กันหน้าเลื่อนแนวนอน  ของที่กว้างเกินจอต้องเลื่อนในกล่องของตัวเอง ไม่ใช่ดันทั้งหน้า
   ★ ต้องใส่ที่ html ด้วย ★  ใส่แค่ body เบราว์เซอร์จะยกค่าไปไว้ที่ html แล้วไม่ตัดจริง
   ไฟล์นี้โหลดเฉพาะหน้าสาธารณะ จึงเขียน html ตรง ๆ ได้ ไม่กระทบหน้าอื่น */
html{overflow-x:hidden}
.pt-site{overflow-x:hidden}

/* ท้ายเว็บต้องไปติดขอบล่างจอเสมอ  หน้าที่เนื้อหาสั้นอย่างหน้าเช็คพัสดุ
   ถ้าไม่ทำ ท้ายเว็บจะลอยค้างกลางจอแล้วมีพื้นขาวโล่ง ๆ ต่อท้ายลงไป */
.pt-site{display:flex;flex-direction:column;min-height:100vh}
.pt-site > *{flex:0 0 auto}
.pt-site > .pt-foot{margin-top:auto}

/* ---------- แถบบน ---------- */
.pt-nav{position:sticky;top:0;z-index:40;background:var(--pts-bg);border-bottom:1px solid var(--pts-line)}
.pt-nav-in{display:flex;align-items:center;gap:18px;height:64px;min-width:0}
/* โลโก้ห้ามมีขีดเส้นใต้ทั้งตอนปกติและตอนชี้
   .pt-site a:hover ข้างบนขีดเส้นใต้ให้ทุกลิงก์ และเจาะจงกว่า .pt-logo:hover เฉย ๆ
   จึงต้องเขียนเป็น .pt-site a.pt-logo ให้น้ำหนักสูงกว่า ไม่งั้นทับไม่ลง */
.pt-site a.pt-logo,.pt-site a.pt-logo:hover,.pt-site a.pt-logo:focus{text-decoration:none}
.pt-logo{display:flex;align-items:center;gap:10px;flex:none}
.pt-logo img{width:38px;height:38px;border-radius:10px}
.pt-logo b{font-size:16px;font-weight:700;color:var(--pts-ink);letter-spacing:.3px;line-height:1.2}
.pt-logo b span{color:var(--pts-brand)}
.pt-logo small{display:block;font-size:11px;font-weight:400;color:var(--pts-ink-3)}
/* เมนูบน  ★ ต้องอยู่บรรทัดเดียวเสมอ ★
   ถ้าปล่อยให้ตัดคำ พอจอแคบลงหน่อยคำว่า "สั่งซื้อสินค้า" จะหักเป็นสองบรรทัด
   แถบบนสูงเกิน 64 แล้วดันปุ่มเข้าสู่ระบบตกขอบ หน้าทั้งหน้าเลื่อนแนวนอนได้ */
.pt-menu{display:flex;align-items:center;gap:4px;margin-left:auto;min-width:0;flex-wrap:nowrap}
/* ★ พอเปลี่ยนเป็นภาษาอื่น คำในเมนูยาวขึ้นมาก ★
   เช่น "ขนส่งในไทย" กลายเป็น "Transportation in Thailand"
   ถ้าไม่ยอมให้หดตัว แถบบนจะล้นจนปุ่มเข้าสู่ระบบโดนตัดหายไปครึ่งปุ่ม
   min-width 0 คือสิ่งที่ทำให้หดได้  ปกติกล่อง flex หดต่ำกว่าความกว้างข้อความไม่ได้
   หดจนไม่พอเมื่อไหร่ค่อยตัดท้ายด้วยจุดสามจุด  ยังอยู่บรรทัดเดียวเหมือนเดิม
   ชี้ที่เมนูแล้วเห็นชื่อเต็มใน title อยู่ดี */
.pt-menu a{padding:8px 13px;border-radius:var(--pts-r-sm);font-size:14.5px;font-weight:500;
	color:var(--pts-ink-2);white-space:nowrap;
	min-width:0;overflow:hidden;text-overflow:ellipsis}
.pt-menu a:hover{background:var(--pts-bg-2);color:var(--pts-ink);text-decoration:none}
.pt-menu a.is-on{background:var(--pts-brand-wash);color:var(--pts-brand-ink);font-weight:600}
.pt-nav-act{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}

/* ตัวเลือกภาษา */
.pt-lang{position:relative}
.pt-lang-b{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border-radius:var(--pts-r-sm);
	border:1px solid var(--pts-line);background:var(--pts-bg);color:var(--pts-ink-2);
	font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.pt-lang-b:hover{border-color:var(--pts-line-2)}
.pt-lang-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.pt-lang-m{position:absolute;top:calc(100% + 6px);right:0;min-width:150px;padding:5px;
	background:var(--pts-bg);border:1px solid var(--pts-line);border-radius:var(--pts-r-sm);
	box-shadow:var(--pts-shadow-lg);display:none;z-index:50}
.pt-lang.is-open .pt-lang-m{display:block}
.pt-lang-m a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;
	font-size:14px;color:var(--pts-ink-2)}
.pt-lang-m a:hover{background:var(--pts-bg-2);text-decoration:none}
.pt-lang-m a.is-on{color:var(--pts-brand-ink);font-weight:600}
.pt-lang-m b{font-family:var(--pts-mono);font-size:11px;color:var(--pts-muted);margin-left:auto;font-weight:600}

/* ---------- ปุ่ม ----------
   ★ ยกทรงมาจากหน้าแรก (bm/css/ptcargo-home.css) ★
   สูง 50 มุม 11 ตัวหนังสือ 15.5 ปุ่มหลักมีเงาส้มใต้ปุ่ม ชี้แล้วยกขึ้นหนึ่งพิกเซล
   หน้าแรกกับหน้าบริการจะได้เป็นชุดเดียวกัน ลูกค้าเห็นแล้วรู้ว่าเว็บเดียวกัน

   ต้องนำหน้าด้วย .pt-site ทุกกฎ  เพราะ .pt-site a ข้างบนเจาะจงกว่า .pt-btn
   ถ้าไม่นำหน้า ตัวหนังสือในปุ่มจะโดนสีลิงก์ทับ ปุ่มส้มจะได้ตัวหนังสือส้ม อ่านไม่ออก */
.pt-site .pt-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	height:50px;padding:0 26px;border-radius:11px;cursor:pointer;border:1px solid transparent;
	font-family:var(--pts-sans);font-size:15.5px;font-weight:600;text-decoration:none;
	background:var(--pts-bg);color:var(--pts-ink);
	transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease
}
.pt-site .pt-btn:hover{text-decoration:none;transform:translateY(-1px)}
.pt-site .pt-btn svg{width:19px;height:19px}

/* ปุ่มหลัก  พื้นส้ม ตัวหนังสือขาว มีเงาส้มจาง ๆ ใต้ปุ่ม */
.pt-site .pt-btn--go{background:var(--pts-brand-btn);color:#fff;
	box-shadow:0 10px 24px -12px rgba(255,92,0,.9)}
.pt-site .pt-btn--go:hover{background:var(--pts-brand-ink);color:#fff}

/* ปุ่มรอง  พื้นขาว ขอบเทา ชี้แล้วขอบกับตัวหนังสือเป็นสีแบรนด์ */
.pt-site .pt-btn--line{background:var(--pts-bg);border-color:var(--pts-line-2);color:var(--pts-ink)}
.pt-site .pt-btn--line:hover{border-color:var(--pts-brand);color:var(--pts-brand-ink)}

/* ปุ่มใส  ใช้ตอนไม่อยากให้แย่งสายตาปุ่มหลัก */
.pt-site .pt-btn--ghost{background:none;border-color:transparent;color:var(--pts-brand-ink)}
.pt-site .pt-btn--ghost:hover{background:var(--pts-brand-wash);border-color:transparent}

/* ขนาดเล็ก  ใช้บนแถบบน */
.pt-site .pt-btn--sm{height:42px;padding:0 18px;font-size:14px;border-radius:9px}

/* ปุ่มบนพื้นเข้ม  กลับสีเป็นขาวเหมือนที่หน้าแรกทำในแถบชวนสมัคร */
.pt-site .pt-cta .pt-btn--go{background:#fff;color:#8f2f00;
	box-shadow:0 12px 28px -14px rgba(0,0,0,.5)}
.pt-site .pt-cta .pt-btn--go:hover{background:#fff5ee;color:#8f2f00}

/* ---------- หัวหน้า ---------- */
.pt-hero{background:var(--pts-bg-2);border-bottom:1px solid var(--pts-line);padding:34px 0 38px}
.pt-crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--pts-ink-3);margin-bottom:14px}
.pt-crumb a{color:var(--pts-ink-3)}
.pt-crumb span{color:var(--pts-line-2)}
.pt-hero h1{margin:0;font-size:34px;line-height:1.25;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.pt-hero p{margin:12px 0 0;max-width:62ch;font-size:16.5px;color:var(--pts-ink-2)}
.pt-hero-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pt-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;align-items:center}
.pt-hero-art{border-radius:var(--pts-r);overflow:hidden;box-shadow:var(--pts-shadow-lg);position:relative}

/* ---------- สไลด์รูปหัวหน้า ----------
   รูปทุกใบซ้อนทับกันในกรอบเดียว ใบที่ถึงคิวทึบ ใบอื่นจางหาย
   จึงไม่ต้องขยับอะไรใน DOM ตอนเปลี่ยนรูป หน้าไม่กระตุก
   ความสูงของกรอบมาจาก ::before ไม่ได้มาจากรูป กันหน้าเด้งตอนรูปยังโหลดไม่เสร็จ
   13 ต่อ 9 เท่ากับ 1040 x 720 ซึ่งเป็นขนาดรูปหัวหน้าชุดเดิม */
.pt-slide::before{content:"";display:block;padding-top:69.2%}
.pt-slide-i{position:absolute;left:0;top:0;right:0;bottom:0;display:block;opacity:0;transition:opacity .7s ease}
.pt-slide-i.is-on{opacity:1}
.pt-slide-i img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* จุดบอกลำดับ  กดข้ามไปใบที่ต้องการได้  รูปใบเดียวไม่มีแถบนี้ */
.pt-slide-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;
	display:flex;justify-content:center;gap:7px}
.pt-slide-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
	background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.35);
	transition:width .2s ease,background .2s ease}
.pt-slide-dots button.is-on{width:22px;border-radius:5px;background:var(--pts-brand)}
@media (prefers-reduced-motion:reduce){ .pt-slide-i{transition:none} }

/* ป้ายเล็กเหนือหัวเรื่อง */
.pt-eyebrow{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;margin-bottom:12px;
	border-radius:999px;background:var(--pts-brand-wash);border:1px solid var(--pts-brand-line);
	font-size:12.5px;font-weight:600;color:var(--pts-brand-ink);letter-spacing:.02em}

/* ---------- ส่วนเนื้อหา ---------- */
.pt-sec{padding:52px 0}
.pt-sec--tint{background:var(--pts-bg-2)}
.pt-sec-h{max-width:66ch;margin-bottom:28px}
.pt-sec-h h2{margin:0;font-size:25px;line-height:1.35;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.pt-sec-h p{margin:9px 0 0;font-size:15.5px;color:var(--pts-ink-3)}

/* ---------- รายการบริการแบบมีลำดับและมีราคา ----------
   ซ้ายเลขลำดับ  กลางรายละเอียด  ขวาราคาเด่น  ราคาคือสิ่งที่คนเปิดหน้านี้มาหา */
.pt-rate{display:grid;gap:12px}
.pt-rate-i{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:start;
	padding:20px;background:var(--pts-bg);border:1px solid var(--pts-line);border-radius:var(--pts-r);
	box-shadow:var(--pts-shadow)}
.pt-rate-i:hover{border-color:var(--pts-brand-line)}
.pt-rate-n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
	background:var(--pts-brand-wash);color:var(--pts-brand-ink);
	font-family:var(--pts-mono);font-size:17px;font-weight:700}
.pt-rate-t{min-width:0}
.pt-rate-t h3{margin:0 0 6px;font-size:17.5px;line-height:1.4;font-weight:600}
.pt-rate-t p{margin:0;font-size:15px;color:var(--pts-ink-2)}
.pt-rate-t ul{margin:9px 0 0;padding:0;list-style:none}
.pt-rate-t li{position:relative;padding-left:19px;font-size:14px;color:var(--pts-ink-3);line-height:1.65}
.pt-rate-t li::before{content:"";position:absolute;left:5px;top:11px;width:5px;height:5px;border-radius:50%;
	background:var(--pts-line-2)}
.pt-rate-p{text-align:right;white-space:nowrap}
.pt-rate-p b{display:block;font-family:var(--pts-mono);font-size:22px;font-weight:700;color:var(--pts-brand-ink);
	letter-spacing:-.01em}
.pt-rate-p small{display:block;margin-top:2px;font-size:12.5px;color:var(--pts-ink-3)}
.pt-rate-p .pt-tag{margin-top:6px}

/* ป้ายสถานะเล็ก */
.pt-tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
	background:var(--pts-bg-3);color:var(--pts-ink-3)}
.pt-tag--ok{background:#e7f6ee;color:var(--pts-ok)}
.pt-tag--warn{background:#fdf1e3;color:var(--pts-warn)}

/* ---------- กล่องข้อความเตือน ---------- */
.pt-note{display:flex;gap:13px;padding:17px 19px;border-radius:var(--pts-r);
	background:var(--pts-brand-wash);border:1px solid var(--pts-brand-line)}
.pt-note svg{width:21px;height:21px;flex:none;margin-top:2px;fill:none;stroke:var(--pts-brand-ink);stroke-width:1.8;
	stroke-linecap:round;stroke-linejoin:round}
.pt-note div{min-width:0}
.pt-note b{display:block;font-size:15px;color:var(--pts-brand-ink)}
.pt-note p{margin:3px 0 0;font-size:14.5px;color:var(--pts-ink-2)}

/* ---------- ตารางสรุป ---------- */
.pt-tbl-wrap{overflow-x:auto;border:1px solid var(--pts-line);border-radius:var(--pts-r);background:var(--pts-bg)}
.pt-tbl{width:100%;border-collapse:collapse;min-width:520px}
.pt-tbl th,.pt-tbl td{padding:13px 16px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--pts-line)}
.pt-tbl th{background:var(--pts-bg-2);font-size:12.5px;font-weight:600;color:var(--pts-ink-3);
	letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pt-tbl tr:last-child td{border-bottom:0}
.pt-tbl td.num{text-align:right;font-family:var(--pts-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-tbl tbody tr:hover{background:var(--pts-bg-2)}

/* ---------- แถบชวนใช้บริการ ---------- */
.pt-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
	padding:30px 32px;border-radius:var(--pts-r);background:var(--pts-ink);color:#fff}
.pt-cta h2{margin:0;font-size:23px;line-height:1.35;font-weight:700;color:#fff}
.pt-cta p{margin:7px 0 0;font-size:15.5px;color:#c9ced8}

/* ---------- ท้ายเว็บ ---------- */
.pt-foot{background:var(--pts-bg-2);border-top:1px solid var(--pts-line);padding:40px 0 28px;margin-top:8px}
.pt-foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.pt-foot h3{margin:0 0 11px;font-size:13px;font-weight:600;color:var(--pts-ink);letter-spacing:.03em}
.pt-foot ul{margin:0;padding:0;list-style:none}
/* ★ ขนาดตัวอักษรต้องอยู่ที่ li ไม่ใช่ที่ a ★
   ท้ายเว็บมีบรรทัดที่ไม่ใช่ลิงก์ด้วย เช่นเวลาทำการ
   ถ้าตั้งขนาดไว้ที่ a บรรทัดพวกนั้นจะใหญ่กว่าเพื่อนเพราะรับขนาดจากตัวหน้า */
.pt-foot li{margin-bottom:7px;font-size:14.5px;line-height:1.65;color:var(--pts-ink-3)}
.pt-foot a{color:var(--pts-ink-3)}
.pt-foot a:hover{color:var(--pts-brand-ink)}
.pt-foot-me p{margin:10px 0 0;font-size:14px;color:var(--pts-ink-3);max-width:38ch}
.pt-foot-btm{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
	margin-top:32px;padding-top:18px;border-top:1px solid var(--pts-line);font-size:13px;color:var(--pts-muted)}

/* ---------- จอแคบ ----------
   ย่อขนาดเป็นหลัก  สลับเป็นคอลัมน์เดียวเฉพาะกริดที่แคบแล้วอ่านไม่ออกจริง ๆ */
@media (max-width:1023px){
	/* จอกลางพื้นที่ไม่พอวางเมนูเต็ม  ซ่อนไปก่อน เหลือโลโก้ ภาษา และปุ่มเข้าสู่ระบบ
	   ของเดิมซ่อนตอน 640 ช่วง 640-1000 จึงเบียดกันจนแถบบนพัง */
	.pt-menu{display:none}
}
@media (max-width:900px){
	.pt-hero-grid{grid-template-columns:1fr;gap:24px}
	.pt-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
	.pt-cta{grid-template-columns:1fr;text-align:left}
}
/* ---------- มือถือเครื่องแคบ ----------
   ★ วัดแล้วแถบบนกว้าง 399 จุดบนจอ 375 จุด ทั้งเว็บจึงเลื่อนซ้ายขวาได้ ★
   ตัวกินที่คือโลโก้ 202 จุด (คำโปรยใต้ชื่อแบรนด์ยาวกว่าชื่อแบรนด์เอง)
   บวกปุ่มภาษากับปุ่มเข้าสู่ระบบอีก 171 จุด  รวมแล้วเกินที่ว่าง 335 จุด
   ซ่อนคำโปรย ย่อตัวอักษร และลดระยะขอบ ให้ลงพอดีโดยยังอ่านออกครบ */
@media (max-width:430px){
	.pt-wrap{padding:0 14px}
	.pt-nav-in{gap:8px}
	.pt-logo{min-width:0}
	.pt-logo img{width:34px;height:34px}
	.pt-logo b{font-size:14.5px}
	.pt-logo small{display:none}
	.pt-nav-act{gap:6px}
	.pt-lang-b{padding:0 9px;font-size:13px}
	.pt-site .pt-btn--sm{height:38px;padding:0 13px;font-size:13.5px}
}
@media (max-width:640px){
	.pt-site{font-size:15.5px}
	.pt-wrap{padding:0 16px}
	.pt-nav-in{height:58px;gap:10px}
	.pt-menu{display:none}
	.pt-hero{padding:26px 0 30px}
	.pt-hero h1{font-size:26px}
	.pt-hero p{font-size:15.5px}
	.pt-sec{padding:38px 0}
	.pt-sec-h h2{font-size:21px}
	/* รายการราคา  ราคาลงมาอยู่ใต้รายละเอียด ไม่งั้นบีบจนตัวเลขตกบรรทัด */
	.pt-rate-i{grid-template-columns:38px minmax(0,1fr);gap:13px;padding:16px}
	.pt-rate-n{width:38px;height:38px;font-size:15px}
	.pt-rate-p{grid-column:2;text-align:left;margin-top:10px;padding-top:11px;border-top:1px dashed var(--pts-line)}
	.pt-rate-p b{font-size:19px}
	.pt-cta{padding:22px}
	.pt-cta h2{font-size:19px}
	.pt-foot-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
	.pt-site *{transition:none !important;animation:none !important}
}

/* ---------- ตอนสั่งพิมพ์ ---------- */
/* ==========================================================================
   หน้าเช็คสถานะพัสดุ   .tk-
   --------------------------------------------------------------------------
   ยกมาจาก bm/css/ptcargo-home.css เพราะหน้านี้ย้ายมาใช้เปลือกกลางแล้ว
   ชื่อคลาสคงเดิมทุกตัว  service/track_result.php จึงไม่ต้องแก้อะไรเลย
   สีเปลี่ยนมาใช้ตัวแปร --pts- ชุดเดียวกับทั้งหน้า จึงได้โหมดมืดมาด้วย
   ทุกกฎนำหน้าด้วย .pt-site กันชนกับธีมเดิมที่ยังอยู่ในหน้าอื่น
   ========================================================================== */
:root{
	--pts-ok-bg:#e4f4ec;   --pts-ok-ink:#12674a;
	--pts-wait:#c07a00;    --pts-wait-bg:#fff3dc;
	--pts-warn-bg:#fff8ee; --pts-warn-line:#f5d9b4; --pts-warn-ink:#8a5200;
}
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]){
		--pts-ok-bg:#12271f;   --pts-ok-ink:#5fc79b;
		--pts-wait:#e0b155;    --pts-wait-bg:#2a2211;
		--pts-warn-bg:#2a2211; --pts-warn-line:#4a3a1a; --pts-warn-ink:#e0b155;
	}
}
:root[data-theme="dark"]{
	--pts-ok-bg:#12271f;   --pts-ok-ink:#5fc79b;
	--pts-wait:#e0b155;    --pts-wait-bg:#2a2211;
	--pts-warn-bg:#2a2211; --pts-warn-line:#4a3a1a; --pts-warn-ink:#e0b155;
}

/* ---------- แถบค้นหาด้านบน ---------- */
.pt-site .tk-top{position:relative;overflow:hidden;text-align:center}
.pt-site .tk-top::before{
	content:"";position:absolute;left:-20%;right:-20%;top:-60%;height:100%;z-index:0;
	background:radial-gradient(55% 55% at 50% 45%,rgba(255,92,0,.13),transparent 70%);
	pointer-events:none}
.pt-site .tk-top .pt-wrap{position:relative;z-index:1;max-width:760px}
.pt-site .tk-top h1{margin:14px 0 0;font-size:clamp(28px,4vw,40px)}
.pt-site .tk-lead{margin:12px auto 0;max-width:34em}

/* ---------- ช่องกรอกเลขพัสดุ ---------- */
.pt-site .tk-form{display:flex;gap:10px;margin:26px auto 0;max-width:620px}
.pt-site .tk-in{flex:1;min-width:0;display:flex;align-items:center;gap:11px;
	height:54px;padding:0 16px;border-radius:13px;
	background:var(--pts-bg);border:1px solid var(--pts-line-2);
	transition:border-color .15s ease,box-shadow .15s ease}
.pt-site .tk-in:focus-within{border-color:var(--pts-brand);box-shadow:0 0 0 4px var(--pts-brand-wash)}
.pt-site .tk-in svg{width:20px;height:20px;flex:none;color:var(--pts-muted);
	fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.pt-site .tk-in:focus-within svg{color:var(--pts-brand)}
.pt-site .tk-in input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--pts-ink);
	font-family:var(--pts-mono);font-size:16px}
.pt-site .tk-in input::placeholder{font-family:var(--pts-sans);color:var(--pts-muted)}
.pt-site .tk-form .pt-btn{height:54px;flex:none}
.pt-site .tk-form .pt-btn[disabled]{opacity:.6;pointer-events:none}
.pt-site .tk-hint{margin:12px 0 0;font-size:12.5px;color:var(--pts-muted)}
@media (max-width:600px){
	.pt-site .tk-form{flex-direction:column}
	.pt-site .tk-form .pt-btn{width:100%}
}

/* ---------- พื้นที่ผลลัพธ์ ---------- */
.pt-site .tk-body .pt-wrap{max-width:820px}
.pt-site .tk-count{margin:0 0 14px;padding-bottom:12px;font-size:13px;color:var(--pts-muted);
	border-bottom:1px solid var(--pts-line)}
.pt-site .tk-note{padding:16px 18px;border-radius:var(--pts-r);font-size:14.5px;line-height:1.85;
	background:var(--pts-bg-2);border:1px solid var(--pts-line);color:var(--pts-ink-2)}
.pt-site .tk-note.is-warn{background:var(--pts-warn-bg);border-color:var(--pts-warn-line);color:var(--pts-warn-ink)}

/* ---------- การ์ดพัสดุหนึ่งใบ ---------- */
.pt-site .tk-card{margin-bottom:16px;overflow:hidden;background:var(--pts-bg);
	border:1px solid var(--pts-line);border-radius:var(--pts-r);box-shadow:var(--pts-shadow)}
.pt-site .tk-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 18px;
	background:var(--pts-bg-2);border-bottom:1px solid var(--pts-line)}
.pt-site .tk-h > div{flex:1;min-width:0}
.pt-site .tk-h b{display:block;font-family:var(--pts-mono);font-size:17px;font-weight:600;
	overflow-wrap:anywhere}
.pt-site .tk-h span{display:block;margin-top:2px;font-size:12px;color:var(--pts-muted)}
.pt-site .tk-st{flex:none;padding:4px 13px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pt-site .tk-st.is-ok{background:var(--pts-ok-bg);color:var(--pts-ok-ink)}
.pt-site .tk-st.is-go{background:var(--pts-brand-wash);color:var(--pts-brand-ink)}

/* ---------- ตัวเลขของพัสดุ ---------- */
.pt-site .tk-spec{margin:0;padding:16px 18px;border-bottom:1px solid var(--pts-line);
	display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px 20px}
.pt-site .tk-spec > div{min-width:0}
.pt-site .tk-spec dt{margin-bottom:3px;font-size:11.5px;color:var(--pts-muted)}
.pt-site .tk-spec dd{margin:0;font-family:var(--pts-mono);font-size:15px;font-weight:600;
	font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---------- ไทม์ไลน์ ---------- */
.pt-site .tk-tl{list-style:none;margin:0;padding:18px 18px 20px}
.pt-site .tk-tl li{position:relative;display:flex;gap:14px;padding:0 0 18px}
.pt-site .tk-tl li:last-child{padding-bottom:0}
.pt-site .tk-dot{position:relative;flex:0 0 13px;width:13px;height:13px;margin-top:5px;border-radius:50%;
	background:var(--pts-ok-ink);box-shadow:0 0 0 4px var(--pts-ok-bg)}
.pt-site .tk-tl li:not(:last-child) .tk-dot::after{content:"";position:absolute;left:50%;top:17px;
	width:2px;height:calc(100% + 16px);transform:translateX(-50%);background:var(--pts-line)}
.pt-site .tk-tl li.is-wait .tk-dot{background:var(--pts-wait);box-shadow:0 0 0 4px var(--pts-wait-bg)}
.pt-site .tk-tl li.is-todo .tk-dot{background:var(--pts-brand);box-shadow:0 0 0 4px var(--pts-brand-wash)}
.pt-site .tk-tl li > div{flex:1;min-width:0}
.pt-site .tk-tl time{display:block;font-family:var(--pts-mono);font-size:12.5px;font-weight:600;color:var(--pts-muted)}
.pt-site .tk-tl p{margin:2px 0 0;font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.pt-site .tk-tl a{font-weight:600}

/* ---------- โครงหลอกตอนกำลังค้นหา ---------- */
.pt-site .tk-sk{display:flex;flex-direction:column;gap:12px}
.pt-site .tk-sk i{display:block;height:20px;border-radius:8px;
	background:var(--pts-bg-2);border:1px solid var(--pts-line);animation:tk-sk 1.2s ease-in-out infinite}
.pt-site .tk-sk i:nth-child(1){height:56px}
.pt-site .tk-sk i:nth-child(2){width:82%;animation-delay:.1s}
.pt-site .tk-sk i:nth-child(3){width:64%;animation-delay:.2s}
.pt-site .tk-sk i:nth-child(4){width:45%;animation-delay:.3s}
@keyframes tk-sk{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .pt-site .tk-sk i{animation:none} }

/* ---------- คำอธิบายตอนยังไม่ได้ค้น ---------- */
.pt-site .tk-guide h2{margin:0 0 16px;font-size:19px}
.pt-site .tk-guide-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.pt-site .tk-guide-g > div{padding:18px;border-radius:var(--pts-r);
	background:var(--pts-bg-2);border:1px solid var(--pts-line)}
.pt-site .tk-guide-g b{display:block;margin-bottom:7px;font-size:15px;font-weight:600}
.pt-site .tk-guide-g p{margin:0;font-size:13.5px;line-height:1.8;color:var(--pts-ink-2)}

@media print{
	.pt-nav,.pt-cta,.pt-hero-act,.pt-foot{display:none !important}
	.pt-site{font-size:12pt}
	.pt-rate-i{break-inside:avoid;box-shadow:none}
}