/* ============================================================================
home.css — หน้าแรกองค์กร PTCARGO EXPRESS (Corporate Logistics Redesign)
----------------------------------------------------------------------------
★ ไฟล์นี้เป็นของหน้า index เท่านั้น — ไม่มีหน้าอื่นโหลด
(ตรวจแล้ว: assets/css/home.css ถูกอ้างจาก index.html ไฟล์เดียว)
จึงกำหนด token ของหน้านี้เองได้ โดยไม่แตะ shared/css/tokens.css
ที่อีก 219 หน้าใช้ร่วมกัน
★ ทิศทางสี = Corporate Navy + Orange ตาม Owner directive
ของเดิมทั้งระบบเป็นโทนกาแฟ/ครีม ซึ่งอ่านเป็น "แอปสมาชิก" ไม่ใช่ "เว็บบริษัท"
หน้านี้จึงคุมสีเองทั้งหมด แต่ยัง fallback ไป token กลางถ้าโหลดไม่ทัน
★ ตัวอักษรสีส้มบนพื้นสว่าง ใช้ --or-text (#C2410C · contrast 5.18 บนขาว)
ไม่ใช่ --or-500 (#FF7A00 · 2.6) ซึ่งตกเกณฑ์ 4.5
★ ตัวอักษรรอง ใช้ --tx-3 (#475569) แทน #64748B ที่ directive ระบุ
เพราะ #64748B บนพื้น --bg-3 (#F2F5F9) ได้ 4.35 ซึ่งตกเกณฑ์
#475569 ได้ 6.93 บนพื้นเดียวกัน และ 7.5+ บนขาว → เลือกตัวที่ผ่าน
★ ฟอนต์ใช้ของที่มีในโปรเจกต์ (self-hosted · shared/fonts/)
Mitr = หัวข้อ · Prompt = เนื้อความ · ไม่โหลดฟอนต์จากภายนอก
(shared/css/fonts.css ระบุว่า Google Fonts ถูกบล็อกในจีน)
★ ยังไม่มีไฟล์ภาพจริง — ใช้ .art (gradient + line motif) แทน
ห้ามใส่ ![]()
ชี้ไฟล์ที่ยังไม่มี เพราะจะเกิด asset 404
รายการภาพที่ต้อง generate อยู่ใน docs/ui/INDEX_IMAGE_ASSETS.md
★ §22 เครื่องคำนวณ และ §23 ช่องทางชำระเงิน ยกมาจาก canonical (fbded501)
แล้วแปลงเป็นชุด token navy ของหน้านี้ — ตรรกะและข้อความไม่เปลี่ยน
ดู reports/uiux/index-redesign/CONFLICT_MAP_REBASE.md
========================================================================== */
/* ═════════════════════════ 1 · tokens (page-local) ═════════════════════════ */
body.home{
/* navy */
--nv-900:#08213D; --nv-800:#0D1B2A; --nv-700:#102A43; --nv-600:#1B3A5C;
--nv-500:#27496D;
/* orange */
--or-600:#F26522; --or-500:#FF7A00; --or-400:#FF8A1F;
--or-text:#C2410C; /* ส้มสำหรับ "ตัวอักษร" บนพื้นสว่าง (5.18 บนขาว) */
/* ★ ส้มสำหรับ "พื้นปุ่มที่มีตัวอักษรขาวทับ" — เจ้าของสั่ง 2026-09-06
"ปุ่มที่เป็นสีส้มไม่ใช้ฟอนต์สีเข้ม ให้ใช้สีขาว"
ขาวบน --or-600 (#F26522) ได้ 3.14 ซึ่งตกเกณฑ์ AA
จึงไม่ได้แค่เปลี่ยนสีตัวอักษร แต่ทำพื้นส้มให้เข้มขึ้นด้วย
ขาวบน #C2410C = 5.11 ผ่าน AA พร้อมมีระยะเผื่อ
⇒ ได้ทั้งสองอย่าง: ตัวอักษรขาวตามที่สั่ง และเทสต์ contrast ยังเขียว */
--or-btn:#C2410C; --or-btn-hover:#A8380A;
--or-soft:#FFF1E6;
/* surfaces */
--bg:#FFFFFF; --bg-2:#F7F9FC; --bg-3:#F2F5F9;
/* text */
--tx:#102033; --tx-2:#334155; --tx-3:#475569;
--tx-onnavy:#FFFFFF; --tx-onnavy-2:#C6D4E4;
/* lines */
--bd:#E2E8F0; --bd-2:#CBD5E1; --bd-navy:rgba(255,255,255,.14);
/* elevation — เบา ไม่ใช้เงาหนักตาม directive */
--sh-1:0 1px 2px rgba(16,32,51,.05);
--sh-2:0 4px 16px -6px rgba(16,32,51,.14);
--sh-3:0 14px 34px -18px rgba(8,33,61,.34);
/* rhythm */
--r-sm:6px; --r:8px; --r-lg:8px; --r-pill:999px;
--sec-y:clamp(48px,7vw,84px);
}
/* ═════════════════════════ 2 · base ═════════════════════════ */
*{box-sizing:border-box}
html{margin:0;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* clip ไม่ใช่ hidden — hidden ทำให้ body กลายเป็นกล่องเลื่อนที่เลื่อนไม่ได้ แล้วล้อเมาส์ตาย (2026-09-06) */
body.home{
margin:0;background:var(--bg);color:var(--tx);
font-family:var(--fb,'Prompt',system-ui,sans-serif);
font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
/* ★ ต้องมาก่อนคลาสที่ตั้ง display เอง
[hidden] ของ UA เป็นแค่ display:none ที่ specificity ต่ำ — .btn{display:inline-flex}
หรือ .rateNote{display:flex} จะทับได้ ทำให้ปุ่ม data-member-only โผล่ให้ guest เห็น
และบรรทัดเรตแลกเปลี่ยนโชว์ทั้งที่ยังไม่มีค่า (ตรวจพบจาก tests/ui/index-home) */
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--fd,'Mitr',system-ui,sans-serif);font-weight:600;
line-height:1.28;letter-spacing:0;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.in{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
@media(max-width:479px){ .in{padding-inline:16px} }
/* ★ header เป็น sticky สูง 70px — ถ้าไม่กันระยะไว้ การกดเมนู #services / #tracking
จะเลื่อนให้หัวข้อของ section ไปอยู่ "ใต้" header พอดี (ผู้ใช้เห็นเนื้อหากลางเรื่อง)
scroll-margin-top ทำให้จุดหยุดต่ำลงมาเท่าความสูง header + ระยะหายใจ */
section[id],main[id]{scroll-margin-top:86px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--nv-800);color:#fff;
padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-size:14px}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--or-500);outline-offset:2px;border-radius:6px}
.onnavy :focus-visible,.hero :focus-visible,.trk :focus-visible{outline-color:var(--or-400)}
/* ═════════════════════════ 3 · buttons ═════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:0 22px;border:1.5px solid transparent;border-radius:var(--r);
font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:15px;
white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s}
.btn:active{transform:translateY(1px)}
/* ★ ปุ่มหลัก: ตัวอักษรขาวบนส้มเข้ม
เดิมใช้ตัวอักษรน้ำเงินเข้มบนส้มสด เพราะขาวบน #F26522 ได้แค่ 3.14 (ตกเกณฑ์ AA)
เจ้าของสั่ง 2026-09-06 ให้ใช้ตัวอักษรขาว ⇒ แก้ที่ "พื้น" แทนที่จะยอมให้ contrast ตก
ขาวบน --or-btn (#C2410C) = 5.11 · hover #A8380A = 6.4 ทั้งคู่ผ่าน AA */
.btn-pri{background:var(--or-btn);color:#fff;box-shadow:var(--sh-2)}
.btn-pri:hover{background:var(--or-btn-hover)}
.btn-nav{background:var(--nv-800);color:#fff}
.btn-nav:hover{background:var(--nv-700)}
.btn-out{background:transparent;color:var(--tx);border-color:var(--bd-2)}
.btn-out:hover{border-color:var(--nv-700);color:var(--nv-700)}
.btn-ghostw{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghostw:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
/* ═════════════════════════ 4 · header ═════════════════════════ */
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--bd)}
.hd .in{display:flex;align-items:center;gap:16px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:none;min-height:48px}
.brand img{width:36px;height:36px;object-fit:contain;flex:none}
.brand span{display:flex;flex-direction:column;line-height:1.06}
.brand b{font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:18px;color:var(--nv-800)}
.brand i{font-style:normal;font-size:9.5px;letter-spacing:0;font-weight:600;color:var(--or-text)}
.nav{display:none;align-items:center;gap:2px;margin-inline:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-sm);
font-size:14.5px;color:var(--tx-2);transition:color .14s,background .14s}
.nav a:hover{color:var(--nv-700);background:var(--bg-3)}
.nav a[aria-current="page"]{color:var(--or-text);font-weight:500}
.acts{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.acts .lg{display:none}
/* hamburger */
.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
flex:none;border:1.5px solid var(--bd);border-radius:var(--r-sm);background:#fff;
color:var(--nv-800);cursor:pointer}
.burger:hover{border-color:var(--bd-2)}
.burger svg{width:22px;height:22px}
.burger .x{display:none}
.burger[aria-expanded="true"] .m{display:none}
.burger[aria-expanded="true"] .x{display:block}
/* drawer */
.drawer{position:fixed;inset:70px 0 0;z-index:55;background:#fff;overflow-y:auto;
padding:8px 0 40px;border-top:1px solid var(--bd)}
.drawer[hidden]{display:none}
.drawer nav{display:grid;padding:8px 0}
.drawer nav a{display:flex;align-items:center;min-height:52px;padding:0 4px;
font-size:16px;color:var(--tx);border-bottom:1px solid var(--bd)}
.drawer nav a:hover{color:var(--or-text)}
.drawer .dacts{display:grid;gap:10px;margin-top:20px}
.drawer .dacts .btn{width:100%}
body.lock{overflow:hidden}
@media(min-width:1080px){
.nav{display:flex}
.burger{display:none}
.drawer{display:none!important}
.acts .lg{display:inline-flex}
}
@media(min-width:600px) and (max-width:1079px){
.acts .md{display:inline-flex}
}
@media(max-width:599px){
.acts .md{display:none}
}
/* ═════════════════════════ 5 · art placeholders ═════════════════════════
★ ยังไม่มีไฟล์ภาพจริง — บล็อกนี้คือภาพประกอบชั่วคราวที่ "ตั้งใจออกแบบ"
ไม่ใช่กล่องว่างหรือ broken image ดู docs/ui/INDEX_IMAGE_ASSETS.md
เมื่อได้ไฟล์ .webp จริงแล้ว ให้เพิ่ม ![]()
ทับใน .art (ดู DELIVERY.md) */
.art{position:relative;overflow:hidden;background:
radial-gradient(120% 90% at 78% 12%,rgba(255,138,31,.30) 0%,rgba(255,138,31,0) 55%),
linear-gradient(145deg,var(--nv-700) 0%,var(--nv-900) 100%);
display:grid;place-items:center;color:#fff}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
background-size:34px 34px}
.art>svg{position:relative;width:44%;max-width:132px;height:auto;
color:rgba(255,255,255,.34);stroke-width:1.1}
.art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ═════════════════════════ 6 · hero ═════════════════════════ */
.hero{position:relative;isolation:isolate;overflow:hidden;
background:linear-gradient(140deg,var(--nv-700) 0%,var(--nv-800) 46%,var(--nv-900) 100%)}
/* ภาพพื้นหลัง hero (ชั่วคราว) — เส้นเส้นทางโลจิสติกส์ + แสงส้มมุมขวา
จุด focus อยู่ขวา · ข้อความอยู่ซ้าย จึงไม่ทับกัน ตาม directive */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
background:
radial-gradient(70% 85% at 88% 26%,rgba(255,138,31,.34) 0%,rgba(255,138,31,0) 62%),
radial-gradient(46% 62% at 64% 88%,rgba(39,73,109,.75) 0%,rgba(39,73,109,0) 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:48px 48px;
-webkit-mask-image:linear-gradient(105deg,transparent 30%,#000 100%);
mask-image:linear-gradient(105deg,transparent 30%,#000 100%)}
/* เส้นเส้นทางจีน→ไทย ลอยด้านขวา — decorative ล้วน */
.hero .lanes{position:absolute;z-index:-1;right:-6%;top:50%;transform:translateY(-50%);
width:min(620px,58%);height:auto;color:rgba(255,138,31,.5);display:none}
.hero .in{position:relative;padding-block:clamp(56px,9vw,104px);
display:grid;gap:34px;align-items:center}
.hcopy{max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
font-size:12.5px;font-weight:500;letter-spacing:0;color:#FFD3AE;
background:rgba(255,138,31,.14);border:1px solid rgba(255,138,31,.36);
padding:7px 15px;border-radius:var(--r-pill)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--or-400);flex:none}
.hero h1{color:#fff;font-size:32px;line-height:1.14;letter-spacing:0}
.hero h1 em{font-style:normal;color:var(--or-400)}
.hero .lede{margin-top:20px;max-width:560px;font-size:15px;
color:var(--tx-onnavy-2);line-height:1.72}
.hero .accent{margin-top:16px;display:inline-flex;align-items:center;gap:10px;
font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:15px;color:#fff}
.hero .accent::before{content:"";width:28px;height:2px;background:var(--or-500);flex:none}
.hcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hsub{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;
padding-top:22px;border-top:1px solid var(--bd-navy)}
.hsub a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
font-size:14.5px;color:var(--tx-onnavy-2)}
.hsub a:hover{color:#fff}
.hsub svg{width:17px;height:17px;color:var(--or-400);flex:none}
@media(min-width:900px){
.hero .lanes{display:block}
.hero .in{padding-right:clamp(20px,6vw,90px)}
}
/* ═════════════════════════ 7 · trust strip ═════════════════════════ */
.trust{background:var(--nv-900);border-top:1px solid var(--bd-navy)}
.trust ul{display:grid;grid-template-columns:1fr;gap:0}
.trust li{display:flex;gap:14px;align-items:flex-start;padding:22px 0;
border-bottom:1px solid var(--bd-navy)}
.trust li:last-child{border-bottom:0}
.trust svg{width:26px;height:26px;color:var(--or-400);flex:none;margin-top:2px}
.trust b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;
font-size:15.5px;color:#fff}
.trust span{display:block;font-size:13.5px;color:var(--tx-onnavy-2);margin-top:3px;line-height:1.6}
@media(min-width:700px){
.trust ul{grid-template-columns:repeat(2,1fr);gap:0 40px}
.trust li:nth-last-child(-n+2){border-bottom:0}
}
@media(min-width:1080px){
.trust ul{grid-template-columns:repeat(4,1fr);gap:0 34px}
.trust li{border-bottom:0;padding:26px 0}
}
/* ═════════════════════════ 8 · section shell ═════════════════════════ */
.sec{padding-block:var(--sec-y)}
.sec.tint{background:var(--bg-2)}
.sec.tint2{background:var(--bg-3)}
.sechd{max-width:720px;margin-bottom:34px}
.sechd.ctr{margin-inline:auto;text-align:center}
.kicker{display:block;font-size:12.5px;font-weight:600;letter-spacing:0;
text-transform:uppercase;color:var(--or-text);margin-bottom:12px}
.sec h2{font-size:24px;color:var(--tx)}
.sec .dek{margin-top:14px;font-size:14.5px;color:var(--tx-3);line-height:1.72}
.sechd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
flex-wrap:wrap;margin-bottom:30px}
.sechd-row .sechd{margin-bottom:0}
/* ★ แทน style="margin-top:44px" และ style="font-size:19px" ที่เคยเขียน inline
ค่าเท่าเดิมทุกตัว — โปรเจกต์ห้าม inline CSS · ใช้ .sec .subhd ให้ specificity ชนะ .sec h2 */
.sechd-row.spaced{margin-top:44px}
.sec .subhd{font-size:19px}
.more{display:inline-flex;align-items:center;gap:6px;min-height:44px;
font-size:14.5px;font-weight:500;color:var(--or-text)}
.more:hover{text-decoration:underline}
.more svg{width:16px;height:16px}
/* ═════════════════════════ 9 · services ═════════════════════════ */
.svcs{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:620px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.svcs{grid-template-columns:repeat(3,1fr)}}
.svc{display:flex;flex-direction:column;height:100%;background:#fff;
border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--sh-1);transition:transform .18s,box-shadow .18s,border-color .18s}
.svc:hover,.svc:focus-visible{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--bd-2)}
.svc .art{aspect-ratio:4/3}
.svc .bd{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc h3{font-size:18px;color:var(--tx)}
.svc p{font-size:14px;color:var(--tx-3);line-height:1.68}
.svc .go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;
font-size:14px;font-weight:500;color:var(--or-text)}
.svc .go svg{width:15px;height:15px;transition:transform .18s}
.svc:hover .go svg{transform:translateX(4px)}
/* ═════════════════════════ 10 · tracking ═════════════════════════ */
.trk{position:relative;overflow:hidden;
background:linear-gradient(120deg,var(--nv-800) 0%,var(--nv-900) 100%)}
.trk::before{content:"";position:absolute;inset:0;
background:radial-gradient(58% 78% at 76% 18%,rgba(255,138,31,.20) 0%,rgba(255,138,31,0) 62%)}
.trk::after{content:"";position:absolute;inset:0;opacity:.42;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:40px 40px}
.trk .in{position:relative;z-index:1}
.trk .sechd h2{color:#fff}
.trk .sechd .dek{color:var(--tx-onnavy-2)}
.trk .kicker{color:var(--or-400)}
.tform{display:flex;flex-wrap:wrap;gap:12px;max-width:660px}
.tfield{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.24);
border-radius:var(--r);padding-inline:16px;transition:border-color .15s,background .15s}
.tfield:focus-within{border-color:var(--or-400);background:rgba(255,255,255,.11)}
.tfield svg{width:19px;height:19px;color:#8FA6C0;flex:none}
.tfield input{flex:1;min-width:0;min-height:52px;border:0;outline:0;background:transparent;
color:#fff;font-family:inherit;font-size:15.5px}
.tfield input::placeholder{color:#7C93AC}
.tform .btn{flex:0 0 auto}
@media(max-width:479px){ .tform .btn{width:100%} }
.thelp{margin-top:14px;font-size:13px;color:#8FA6C0;display:flex;align-items:flex-start;gap:8px}
.thelp svg{width:15px;height:15px;flex:none;margin-top:3px}
/* ผลลัพธ์ติดตาม — ทุกสถานะเป็นความจริงจาก API เท่านั้น */
.tout{margin-top:24px;max-width:760px}
.tout:empty{margin-top:0}
.tcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);
border-radius:var(--r-lg);padding:22px}
.tcard.ok{border-color:rgba(34,197,94,.42);background:rgba(34,197,94,.09)}
.tcard.warn{border-color:rgba(255,138,31,.46);background:rgba(255,138,31,.10)}
.tcard.err{border-color:rgba(248,113,113,.46);background:rgba(248,113,113,.10)}
.tcard .th{display:flex;align-items:flex-start;gap:12px}
.tcard .th svg{width:22px;height:22px;flex:none;margin-top:2px;color:var(--or-400)}
.tcard.ok .th svg{color:#4ADE80}
.tcard.err .th svg{color:#FCA5A5}
.tcard b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:16px;color:#fff}
.tcard p{margin-top:5px;font-size:14px;color:var(--tx-onnavy-2);line-height:1.68}
.tcard .tno{display:inline-block;margin-top:10px;font-family:var(--fn,'Space Grotesk',monospace);
font-size:13.5px;letter-spacing:0;color:#fff;background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);padding:5px 12px}
.tcard .tacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* ป้ายบอกที่มาของข้อมูล — ต้องมีเสมอเมื่อแสดงผลจริง */
.tsrc{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
font-size:11.5px;letter-spacing:0;color:#8FA6C0}
.tsrc::before{content:"";width:5px;height:5px;border-radius:50%;background:#4ADE80;flex:none}
.tsteps{display:grid;gap:0;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.tsteps li{display:flex;gap:12px;align-items:center;padding:9px 0;font-size:14px;color:var(--tx-onnavy-2)}
.tsteps .dot{width:11px;height:11px;border-radius:50%;flex:none;
background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.3)}
.tsteps li.done .dot{background:#4ADE80;border-color:#4ADE80}
.tsteps li.done{color:#fff}
.tsteps li.now .dot{background:var(--or-400);border-color:var(--or-400);
box-shadow:0 0 0 4px rgba(255,138,31,.22)}
.tsteps li.now{color:#fff;font-weight:500}
/* spinner ระหว่างรอผล */
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.28);
border-top-color:var(--or-400);border-radius:50%;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* ═════════════════════════ 11 · search / shop (ข้อมูลจริงจาก API) ══════════ */
.sbox{max-width:760px}
.sfield{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--bd);
border-radius:var(--r);padding:6px 6px 6px 16px;box-shadow:var(--sh-2);
transition:border-color .15s,box-shadow .15s}
.sfield:focus-within{border-color:var(--or-500);box-shadow:0 0 0 4px rgba(255,122,0,.14)}
.sfield>svg{width:20px;height:20px;color:var(--tx-3);flex:none}
.sfield input{flex:1;min-width:0;min-height:52px;border:0;outline:0;background:transparent;
font-family:inherit;font-size:15.5px;color:var(--tx)}
.sfield input::placeholder{color:#94A3B8}
/* ตัวอักษรขาวบนส้มเข้ม — เหตุผลเดียวกับ .btn-pri */
.sgo{flex:none;min-height:48px;padding:0 22px;border:0;border-radius:var(--r-sm);cursor:pointer;
background:var(--or-btn);color:#fff;font-family:var(--fd,'Mitr',sans-serif);
font-weight:500;font-size:14.5px;transition:background .15s}
.sgo:hover{background:var(--or-btn-hover)}
.sgo[disabled]{cursor:progress;opacity:.65}
@media(max-width:520px){ .sgo{padding:0 16px} }
.plats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.plat{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;cursor:pointer;
border:1.5px solid var(--bd);background:#fff;color:var(--tx-2);border-radius:var(--r-pill);
font-family:inherit;font-size:13.5px;font-weight:500;transition:all .14s}
.plat:hover{border-color:var(--bd-2)}
.plat[aria-selected="true"]{background:var(--nv-800);border-color:var(--nv-800);color:#fff}
.sres{margin-top:26px}
.cats{display:flex;flex-wrap:wrap;gap:9px}
.cat{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);
background:#fff;border:1.5px solid var(--bd);font-size:14px;color:var(--tx-2);transition:all .14s}
.cat:hover{border-color:var(--or-500);color:var(--or-text)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1180px){.grid{grid-template-columns:repeat(5,1fr)}}
.pc{display:block;background:#fff;border:1px solid var(--bd);border-radius:var(--r);
overflow:hidden;transition:transform .16s,box-shadow .16s}
.pc:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pc .im{position:relative;aspect-ratio:1/1;background:var(--bg-3);display:grid;place-items:center;overflow:hidden}
.pc .im img{width:100%;height:100%;object-fit:cover;display:block}
.pc .im .ph{width:30px;height:30px;color:#B4C2D3}
.pc .bd{padding:12px}
.pc .tt{font-size:13px;line-height:1.5;color:var(--tx-2);display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.pc .pr{margin-top:7px;font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:15px;color:var(--or-text)}
.pc .pr small{font-weight:400;font-size:11.5px;color:var(--tx-3);margin-left:5px}
.pc .mt{margin-top:4px;font-size:11.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{position:absolute;top:8px;left:8px;background:rgba(8,33,61,.86);color:#fff;font-size:10px;
padding:4px 9px;border-radius:var(--r-pill);letter-spacing:0}
/* ═════════════════════════ 12 · how it works ═════════════════════════ */
/* ═══════════════ ขั้นตอนการใช้บริการ ═══════════════
เจ้าของสั่ง 2026-09-06 "ออกแบบตรงบทความตรงนี้ใหม่ให้สวยกว่านี้
ใส่สีส้มเข้าไปด้วย และทำให้มันเคลื่อนไหวได้"
★ เดิม: หมายเลขเป็นวงกลมขาวขอบเทา มีแค่ขั้นแรกที่เป็นกรมท่า ⇒ ทั้งแถวดูจืด
ใหม่: ทุกขั้นเป็นวงส้มไล่สี มีวงแหวนรอบนอก และเส้นเชื่อมเป็นไล่สีส้ม
★ การเคลื่อนไหวทำงานก็ต่อเมื่อ JS เติมคลาส .anim ให้เท่านั้น
ค่าตั้งต้น (ไม่มีคลาส) = มองเห็นครบทุกขั้น
⇒ JS พังหรือ IntersectionObserver ไม่มี ก็ยังอ่านได้ทั้งหมด ไม่มีของหายไป */
.steps{counter-reset:s;display:grid;gap:0;position:relative;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;display:grid;
grid-template-columns:auto 1fr;gap:18px;padding-bottom:30px}
.steps li:last-child{padding-bottom:0}
/* ── หมายเลขขั้น ── */
.steps .n{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;flex:none;
display:grid;place-items:center;
background:linear-gradient(140deg,var(--or-500),var(--or-600));
color:#fff;border:0;
font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:18px;
box-shadow:0 8px 18px -10px var(--or-600)}
/* วงแหวนรอบนอก — ทำให้หมายเลขเด่นขึ้นโดยไม่ต้องเพิ่มขนาด */
.steps .n::after{content:"";position:absolute;inset:-5px;border-radius:50%;
border:2px solid var(--or-500);opacity:.28}
/* ── เส้นเชื่อม ── */
.steps li:not(:last-child)::before{content:"";position:absolute;left:25px;top:52px;bottom:8px;
width:3px;border-radius:99px;
background:linear-gradient(180deg,var(--or-500),rgba(242,101,34,.18));
transform-origin:top center}
.steps h3{font-size:17px;margin:11px 0 0;line-height:1.42}
.steps p{margin-top:6px;font-size:14px;color:var(--tx-3);line-height:1.68}
/* ── ปุ่มอ่านต่อ (ย้ายออกมาจากขั้นที่ 3) ── */
.steps-cta{display:flex;justify-content:center;margin-top:34px}
.steps-cta a{display:inline-flex;align-items:center;gap:8px;min-height:46px;
padding:0 22px;border-radius:var(--r-pill);
font-size:14.5px;font-weight:500;color:var(--or-text);
background:var(--or-soft);border:1px solid rgba(242,101,34,.28);
transition:background .18s,border-color .18s,transform .18s}
.steps-cta svg{width:15px;height:15px;transition:transform .18s}
@media(hover:hover){
.steps-cta a:hover{background:var(--or-btn);border-color:var(--or-btn);color:#fff}
.steps-cta a:hover svg{transform:translateX(3px)}
}
@media(min-width:900px){
.steps{grid-template-columns:repeat(5,1fr);gap:20px}
.steps li{grid-template-columns:1fr;gap:0;padding-bottom:0}
.steps li:not(:last-child)::before{left:52px;top:24px;bottom:auto;right:-20px;
width:auto;height:3px;
background:linear-gradient(90deg,var(--or-500),rgba(242,101,34,.18))}
.steps h3{margin-top:18px}
}
/* ═══ การเคลื่อนไหว — ทำงานเฉพาะเมื่อ JS เติม .anim ═══ */
.steps.anim li{opacity:0;transform:translateY(14px)}
.steps.anim li.in{animation:stepIn .62s cubic-bezier(.2,.7,.3,1) forwards;
animation-delay:calc(var(--i,0) * 110ms)}
@keyframes stepIn{to{opacity:1;transform:none}}
/* เส้นเชื่อมวาดตัวเองตอนขั้นนั้นโผล่ */
.steps.anim li:not(:last-child)::before{transform:scaleY(0)}
.steps.anim li.in:not(:last-child)::before{
animation:lineY .5s ease forwards;animation-delay:calc(var(--i,0) * 110ms + 240ms)}
@keyframes lineY{to{transform:scaleY(1)}}
/* วงแหวนกะพริบเบา ๆ ทีละขั้น — บอกว่ามันคือลำดับที่เดินไปข้างหน้า */
.steps.anim li.in .n::after{animation:ringPulse 2.6s ease-out infinite;
animation-delay:calc(var(--i,0) * 320ms)}
@keyframes ringPulse{
0%{transform:scale(1);opacity:.28}
55%{transform:scale(1.28);opacity:0}
100%{transform:scale(1.28);opacity:0}
}
@media(min-width:900px){
.steps.anim li:not(:last-child)::before{transform:scaleX(0);transform-origin:left center}
.steps.anim li.in:not(:last-child)::before{animation-name:lineX}
@keyframes lineX{to{transform:scaleX(1)}}
}
/* ★★ สถานะ "บังคับให้เห็น" — ไม่พึ่งอนิเมชันเลย
เจอตอนตรวจ 2026-09-06: ถ้าหน้าถูกเปิดในแท็บพื้นหลัง (cmd-click)
เบราว์เซอร์หยุดอนิเมชัน CSS ไว้ที่ currentTime 0 ⇒ ขั้นตอนค้างที่ opacity 0
ทางถอยเดิมของผมเติมคลาส .in ซึ่ง "สั่งให้อนิเมชันเล่น" — ไม่ได้ทำให้เห็น
⇒ ทางถอยที่พึ่งสิ่งที่กำลังพังอยู่ ใช้ไม่ได้
คลาสนี้ตั้งค่าปลายทางตรง ๆ jsจึงบังคับให้เห็นได้เสมอ */
.steps.anim li.shown{opacity:1;transform:none;animation:none}
.steps.anim li.shown:not(:last-child)::before{transform:none;animation:none}
/* ★ ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว = แสดงครบทันที ไม่มีอนิเมชันใด ๆ */
@media(prefers-reduced-motion:reduce){
.steps.anim li{opacity:1;transform:none;animation:none}
.steps.anim li:not(:last-child)::before{transform:none;animation:none}
.steps.anim li.in .n::after{animation:none}
}
/* ═════════════════════════ 13 · why / features ═════════════════════════ */
.whys{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.whys{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.whys{grid-template-columns:repeat(3,1fr)}}
.why{background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);padding:26px;height:100%}
.why .ic{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;
background:var(--or-soft);color:var(--or-text);margin-bottom:16px}
.why .ic svg{width:23px;height:23px}
.why h3{font-size:17px}
.why p{margin-top:8px;font-size:14px;color:var(--tx-3);line-height:1.68}
/* ═════════════════════════ 14 · network / operations (split) ═════════════ */
.split{display:grid;gap:32px;align-items:center}
@media(min-width:960px){
.split{grid-template-columns:1fr 1fr;gap:56px}
.split.rev .fig{order:2}
}
.split .fig{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.split .fig .art{aspect-ratio:16/9}
.split .sechd{margin-bottom:22px}
.mlist{display:grid;gap:14px}
.mlist li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--tx-2);line-height:1.66}
.mlist svg{width:20px;height:20px;color:var(--or-600);flex:none;margin-top:3px}
.modes{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.mode{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
border-radius:var(--r-pill);border:1.5px solid var(--bd);background:#fff;
font-size:13.5px;font-weight:500;color:var(--tx-2)}
.mode svg{width:17px;height:17px;color:var(--or-600)}
/* บนพื้น navy */
.onnavy{background:var(--nv-800);color:#fff}
.onnavy h2{color:#fff}
.onnavy .dek,.onnavy .mlist li{color:var(--tx-onnavy-2)}
.onnavy .kicker{color:var(--or-400)}
.onnavy .mlist svg{color:var(--or-400)}
.onnavy .mode{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.onnavy .mode svg{color:var(--or-400)}
/* ═════════════════════════ 15 · standards (แทน testimonial) ═════════════ */
.stds{display:grid;gap:0;border:1px solid var(--bd);border-radius:var(--r-lg);
background:#fff;overflow:hidden}
.stds li{display:flex;gap:16px;align-items:flex-start;padding:22px;border-bottom:1px solid var(--bd)}
.stds li:last-child{border-bottom:0}
.stds .n{font-family:var(--fn,'Space Grotesk',monospace);font-size:13px;font-weight:600;
color:var(--or-text);flex:none;padding-top:2px;min-width:26px}
.stds b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:15.5px;color:var(--tx)}
.stds span{display:block;margin-top:5px;font-size:14px;color:var(--tx-3);line-height:1.66}
@media(min-width:820px){
.stds{grid-template-columns:repeat(2,1fr)}
.stds li:nth-child(odd){border-right:1px solid var(--bd)}
.stds li:nth-last-child(-n+2){border-bottom:0}
}
/* ═════════════════════════ 16 · rates ═════════════════════════ */
.rates{overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--bd);border-radius:var(--r-lg);background:#fff}
.rates table{width:100%;min-width:520px;border-collapse:collapse}
.rates caption{text-align:left;padding:0}
.rates th,.rates td{padding:14px 18px;text-align:right;font-size:14px;
border-bottom:1px solid var(--bd)}
.rates th{background:var(--bg-2);color:var(--tx-3);font-weight:500;font-size:12.5px;
letter-spacing:0;text-transform:uppercase}
.rates th:first-child,.rates td:first-child{text-align:left}
.rates tbody tr:last-child td{border-bottom:0}
.rates td.v{font-family:var(--fd,'Mitr',sans-serif);font-weight:600;color:var(--nv-700)}
.rates td.na{color:var(--tx-3);font-size:13px}
.rateNote{margin-top:14px;font-size:13.5px;color:var(--tx-3);
display:flex;align-items:flex-start;gap:8px}
.rateNote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--or-500);
flex:none;margin-top:8px}
/* ═════════════════════════ 17 · news ═════════════════════════ */
.news{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:660px){.news{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.news{grid-template-columns:repeat(3,1fr)}}
.nc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);
border-radius:var(--r-lg);overflow:hidden;height:100%;transition:transform .16s,box-shadow .16s}
.nc:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.nc .art{aspect-ratio:3/2}
.nc .bd{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.nc .cat-tag{align-self:flex-start;font-size:11.5px;font-weight:600;letter-spacing:0;
text-transform:uppercase;color:var(--or-text);background:var(--or-soft);
padding:4px 11px;border-radius:var(--r-pill)}
.nc h3{font-size:16px;line-height:1.44}
.nc p{font-size:13.5px;color:var(--tx-3);line-height:1.62}
.nc time{margin-top:auto;padding-top:12px;font-size:12.5px;color:var(--tx-3);
font-family:var(--fn,'Space Grotesk',monospace)}
/* ═════════════════════════ 18 · faq ═════════════════════════ */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding-inline:20px}
.faq details[open]{border-color:var(--bd-2)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;
justify-content:space-between;gap:16px;min-height:60px;padding-block:14px;
font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:15.5px;color:var(--tx)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;flex:none;
border-right:2px solid var(--tx-3);border-bottom:2px solid var(--tx-3);
transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq p{padding-bottom:20px;font-size:14.5px;color:var(--tx-3);line-height:1.72}
/* ═════════════════════════ 19 · state box (ไม่มีข้อมูล) ═════════════════
★ ใช้เมื่อ API ไม่ตอบ/ไม่มีข้อมูล — ห้ามแสดงของปลอมแทน */
/* ═══ กล่องบอกสถานะ — ออกแบบใหม่ตามคำสั่งเจ้าของ 2026-09-06
"ออกแบบข้อความนี้ใหม่และแสดงให้เต็ม"
★ ปัญหาเดิม: กล่องถูกใส่ลงใน .news ซึ่งเป็นกริด 3 คอลัมน์
กล่องจึงกินแค่คอลัมน์เดียว ดูเหมือนการ์ดหลุดมาใบเดียว ไม่ใช่ข้อความของทั้งบล็อก
⇒ grid-column:1/-1 ให้กินเต็มแถวเสมอ ไม่ว่าจะอยู่ในกริดกี่คอลัมน์
★ เลย์เอาต์เปลี่ยนจากกองกลางสามบรรทัด เป็นแถวเดียว ไอคอน | ข้อความ | ปุ่ม
อ่านจบในบรรทัดเดียวและสูงน้อยลง (พื้นที่หน้าแรกมีค่า)
★ ธีมส้มตามหน้าอื่น — ขีดสีส้มด้านซ้ายบอกว่าเป็นแถบสถานะ ไม่ใช่การ์ดเนื้อหา */
.state{grid-column:1/-1;
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
background:linear-gradient(100deg,var(--or-soft),#fff 62%);
border:1px solid rgba(242,101,34,.24);border-left:4px solid var(--or-600);
border-radius:var(--r);padding:18px 20px}
.state .st-ic{flex:none;width:42px;height:42px;border-radius:8px;display:grid;place-items:center;
background:#fff;border:1px solid rgba(242,101,34,.22);color:var(--or-text)}
.state .st-ic svg{width:21px;height:21px}
.state .st-tx{flex:1 1 240px;min-width:0}
.state b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;
font-size:15.5px;color:var(--tx);margin-bottom:3px;line-height:1.4}
.state .st-tx>span{display:block;font-size:13.5px;color:var(--tx-3);line-height:1.6}
.state a{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 20px;
border-radius:var(--r-pill);background:var(--or-btn);color:#fff;
font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:14px;
transition:background .18s,transform .18s}
.state a svg{width:14px;height:14px;transition:transform .18s}
@media(hover:hover){
.state a:hover{background:var(--or-btn-hover);transform:translateY(-1px)}
.state a:hover svg{transform:translateX(3px)}
}
@media(max-width:520px){
.state{gap:12px}
.state a{width:100%;justify-content:center}
}
.tint .state,.tint2 .state{background:linear-gradient(100deg,var(--or-soft),#fff 62%)}
/* skeleton */
.sk{position:relative;overflow:hidden;background:var(--bg-3);border-radius:var(--r-sm)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
animation:skshine 1.3s infinite}
@keyframes skshine{100%{transform:translateX(100%)}}
.sk-card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.sk-card .sk-im{aspect-ratio:1/1;border-radius:0}
.sk-card .sk-im.news-sk{aspect-ratio:3/2} /* แทน style="aspect-ratio:3/2" ค่าเท่าเดิม */
.sk-card .sk-bd{padding:12px;display:grid;gap:8px}
.sk-card .sk-l{height:11px}
.sk-card .sk-l.s{width:60%}
.sk-chip{height:44px;width:110px;border-radius:var(--r-pill)}
.sk-row{height:48px}
.sk-stack{display:grid;gap:8px}
/* ═════════════════════════ 20 · final cta ═════════════════════════ */
/* ★ เจ้าของสั่ง 2026-09-06 "ออกแบบส่วนด้านล่างใหม่ทั้งหมด ... theme สีส้ม
ส้ม น้ำตาล น้ำเงิน" ⇒ CTA นับเป็น "ส่วนด้านล่าง" ด้วย
เดิมเป็นกรมท่า ซึ่งพอวางเหนือฟุตเตอร์น้ำตาลแล้วอ่านเป็นคนละหน้า
เปลี่ยนเป็นส้ม→น้ำตาลเข้ม ให้ไล่ลงไปหาพื้นฟุตเตอร์ (#241A12) ต่อเนื่องกัน
★ ย่อ padding ลงจาก 52-78px เหลือ 34-48px ตามที่สั่งว่า "ให้เล็กลง" */
.fcta{position:relative;overflow:hidden;
background:linear-gradient(135deg,#C2410C 0%,#8A4A1E 52%,#3A2617 100%)}
.fcta::before{content:"";position:absolute;inset:0;
background:radial-gradient(58% 100% at 84% 42%,rgba(255,138,43,.30) 0%,rgba(255,138,43,0) 64%)}
.fcta .in{position:relative;z-index:1;padding-block:clamp(34px,5vw,48px);
display:grid;gap:20px;align-items:center}
.fcta h2{font-size:23px;color:#fff;max-width:640px}
.fcta p{margin-top:10px;font-size:14px;color:rgba(255,236,222,.9);max-width:560px}
.fcta .btns{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:900px){
.fcta .in{grid-template-columns:1fr auto;gap:48px}
.fcta .btns{justify-content:flex-end}
}
/* ═════════════════════════ 21 · footer ═════════════════════════
ออกแบบใหม่ตามคำสั่งเจ้าของ 2026-09-06
"ให้เล็กลงและสวยกว่านี้ เส้นใช้สีสัน และ theme สีส้ม · ส้ม น้ำตาล น้ำเงิน"
★ ของเดิม 1340px บนมือถือ เพราะทุกลิงก์เป็นปุ่มสูง 44px เรียงลงมา 4 คอลัมน์
ตัวใหม่ใช้ 3 คอลัมน์ตั้งแต่จอมือถือ + ลิงก์แถวละ 28px ⇒ เตี้ยลงมาก
แต่ยังกดง่ายเพราะระยะห่างแนวตั้งพอ และแตะได้ทั้งแถว
★ พื้นเปลี่ยนจากกรมท่า (--nv-900) เป็นน้ำตาลเข้ม = สี "น้ำตาล" ในชุดที่สั่ง
ให้ส้มเด่นขึ้นกว่าบนพื้นกรมท่าเดิม
★ "เส้นใช้สีสัน" = เส้นคาดหัวฟุตเตอร์ไล่ ส้ม→น้ำตาล→น้ำเงิน
และหัวคอลัมน์แต่ละอันมีขีดสีของตัวเอง (ส้ม/น้ำตาล/น้ำเงิน ตามลำดับ) */
.ft{--f-bg:#241A12;--f-tx:#E6D8CB;--f-tx2:#A8927F;--f-line:rgba(255,255,255,.09);
--f-o:#FF8A2B;--f-n:#D89A5C;--f-b:#7FB4F5;
position:relative;background:var(--f-bg);color:var(--f-tx);padding-bottom:0}
/* เส้นสีคาดหัวฟุตเตอร์ — ส้ม น้ำตาล น้ำเงิน
★ ครั้งแรกทำเป็นแถบไล่ติดกันยาวเต็มความกว้าง แต่ CTA เหนือมันเป็นพื้นส้ม
⇒ ช่วงสีส้มของเส้นกลืนไปกับพื้น อ่านออกแค่ช่วงน้ำเงิน (เห็นตอนตรวจหน้าจริง)
★ แก้เป็นสามขีดแยกกัน มีช่องพื้นเข้มคั่น ⇒ อ่านเป็น "สามสี" เสมอ
ไม่ว่าอะไรอยู่ข้างบน */
.ftline{height:4px;background:var(--f-bg);display:flex;gap:3px;padding:0 0 0 0}
.ftline::before,.ftline::after,.ftline>i{content:"";flex:1;border-radius:0 0 3px 3px}
.ftline::before{background:var(--f-o)}
.ftline>i{background:var(--f-n)}
.ftline::after{background:var(--f-b)}
.ft .in{padding-block:26px 0}
/* ── หัว: แบรนด์ + ช่องทางติดต่อ ── */
.fhead{display:flex;flex-wrap:wrap;gap:18px 24px;align-items:flex-start;
padding-bottom:20px;border-bottom:1px solid var(--f-line)}
.fbrand{display:flex;align-items:center;gap:11px;color:inherit;flex:1 1 240px;min-width:0}
.fbrand img{width:30px;height:30px;object-fit:contain;flex:none}
.fbrand b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;
font-size:15px;color:#fff;letter-spacing:0}
.fbrand small{display:block;margin-top:2px;font-size:12px;color:var(--f-tx2);line-height:1.5}
.fquick{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none}
.fquick a,.fquick span{display:inline-flex;align-items:center;gap:6px;
min-height:32px;padding:0 11px;border-radius:var(--r-pill);
font-size:12px;color:var(--f-tx);
background:rgba(255,255,255,.05);border:1px solid var(--f-line)}
.fquick svg{width:14px;height:14px;flex:none}
.fquick .q-o svg,.fquick li.q-o svg{color:var(--f-o)}
.fquick li.q-n svg{color:var(--f-n)}
.fquick li.q-b svg{color:var(--f-b)}
/* ── สามคอลัมน์ลิงก์ ── */
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 14px;
padding-block:20px}
.fcol{display:grid;align-content:start;gap:1px;min-width:0}
.fcol h3{margin:0 0 9px;font-size:12px;font-weight:600;letter-spacing:0;
text-transform:uppercase;color:#fff;
padding-left:9px;position:relative}
/* ขีดสีประจำคอลัมน์ — ส้ม น้ำตาล น้ำเงิน */
.fcol h3::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;
border-radius:99px;background:var(--c,var(--f-o))}
.fcol.c-o h3::before{background:var(--f-o)}
.fcol.c-n h3::before{background:var(--f-n)}
.fcol.c-b h3::before{background:var(--f-b)}
/* ★ ห้ามใช้ overflow-wrap:anywhere กับข้อความไทย — มันตัดกลางคำ
("นโยบายความเป็นส่วน|ตัว") เพราะไทยไม่มีช่องว่างให้เบรก
ใช้ break-word ซึ่งตัดเฉพาะเมื่อคำยาวเกินกล่องจริง ๆ */
.fcol a{display:block;padding:5px 0;font-size:12.5px;line-height:1.45;
color:var(--f-tx2);overflow-wrap:break-word;word-break:normal}
/* ── แถบล่างสุด ── */
.fbot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
padding-block:14px 18px;border-top:1px solid var(--f-line)}
.fbot p{margin:0;font-size:11.5px;color:var(--f-tx2)}
.fbot .fnote{flex:1 1 auto;min-width:0}
.fdot{width:4px;height:4px;border-radius:50%;background:var(--f-o);flex:none}
@media(hover:hover){
.fcol a:hover{color:var(--f-o)}
.fcol.c-n a:hover{color:var(--f-n)}
.fcol.c-b a:hover{color:var(--f-b)}
.fquick a:hover{border-color:var(--f-o);color:#fff}
.fbrand:hover b{color:var(--f-o)}
}
@media(min-width:768px){
.ft .in{padding-block:32px 0}
.fcols{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;max-width:720px}
.fhead{flex-wrap:nowrap;align-items:center}
.fquick{justify-content:flex-end}
}
/* ═════════════════════════ 22 · เครื่องคำนวณค่าขนส่ง ═════════════════════
★ ย้ายมาจาก canonical (fbded501) แล้วแปลงเป็นชุด token navy ของหน้านี้
ตรรกะไม่เปลี่ยน: ไม่มีเรตในระบบ = ปิดปุ่มและบอกว่า "ยังไม่ได้กำหนด"
ห้ามโชว์ตัวเลขตัวอย่าง เพราะลูกค้าเอาไปคิดต้นทุนจริง */
.calcbox{background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);
padding:clamp(20px,3vw,30px);box-shadow:var(--sh-1)}
.cfields{display:grid;gap:16px}
@media(min-width:760px){ .cfields{grid-template-columns:1.1fr .8fr 1.5fr} }
.cf{display:block;min-width:0}
.cf>span{display:block;font-size:13px;font-weight:500;color:var(--tx-2);margin-bottom:7px}
.cf select,.cf input{width:100%;min-width:0;min-height:48px;border:1.5px solid var(--bd);
border-radius:var(--r-sm);padding:0 13px;font-family:inherit;font-size:15px;
color:var(--tx);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.cf select:focus,.cf input:focus{border-color:var(--or-500);box-shadow:0 0 0 4px rgba(255,122,0,.14)}
.cf select:disabled,.cf input:disabled{background:var(--bg-3);color:var(--tx-3);cursor:not-allowed}
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:0}
/* ตัวอักษรขาวบนส้มเข้ม — เหตุผลเดียวกับ .btn-pri */
.cgo{margin-top:18px;min-height:48px;padding:0 28px;border:0;border-radius:var(--r-sm);cursor:pointer;
background:var(--or-btn);color:#fff;font-family:var(--fd,'Mitr',sans-serif);
font-weight:500;font-size:15px;transition:background .15s}
.cgo:hover{background:var(--or-btn-hover)}
/* ★ เคยสงสัยว่ากฎนี้ไม่ทำงาน เพราะวัดแล้วพื้นยังเป็นส้ม
ที่จริงกฎถูกต้องอยู่แล้ว — สาเหตุคือ transition:background ค้างอยู่ที่เฟรมแรก
เพราะตอนวัดแท็บถูกซ่อน (document.hidden) เบราว์เซอร์จึงหยุด transition
ยืนยันด้วย getAnimations(): CSSTransition playState running · currentTime 0
⇒ เป็นข้อจำกัดของการวัด ไม่ใช่บั๊กของหน้า จึงคืนกฎเดิมไว้ตามนั้น */
.cgo:disabled{background:var(--bg-3);color:var(--tx-3);cursor:not-allowed}
.calcNote{margin-top:12px;font-size:13px;line-height:1.65;color:var(--tx-3)}
.cres:not(:empty){margin-top:20px;padding-top:20px;border-top:1px dashed var(--bd-2)}
.cout{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cout .cl{font-size:14px;color:var(--tx-2)}
.cout .cv{font-family:var(--fd,'Mitr',sans-serif);font-size:26px;
font-weight:600;color:var(--nv-700)}
.cwhy{display:grid;gap:5px;margin-top:12px}
.cwhy span{font-size:13.5px;color:var(--tx-3);line-height:1.6}
.cwhy .pick{color:var(--or-text);font-weight:500}
.cdis{margin-top:14px;font-size:12.5px;line-height:1.65;color:var(--tx-3)}
.cwarn{font-size:14px;color:var(--or-text);font-weight:500}
.calcmore{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:6px}
.calcmore a{display:inline-flex;align-items:center;min-height:44px;
font-size:13.5px;font-weight:500;color:var(--or-text)}
.calcmore a:hover{text-decoration:underline}
/* ═════════════════════════ 23 · ช่องทางชำระเงิน ═════════════════════════
★ ย้ายมาจาก canonical (fbded501) — แสดงเฉพาะช่องทางที่มีหน้าใช้งานจริง */
.pays{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){ .pays{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .pays{grid-template-columns:repeat(4,1fr)} }
.pays a{display:flex;gap:14px;align-items:flex-start;height:100%;background:#fff;
border:1px solid var(--bd);border-radius:var(--r-lg);padding:20px;
box-shadow:var(--sh-1);transition:transform .16s,box-shadow .16s,border-color .16s}
.pays a:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--bd-2)}
.pays .pb{display:block;min-width:0}
.pays b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;
font-size:15.5px;color:var(--tx)}
.pays .pb span{display:block;margin-top:4px;font-size:13.5px;line-height:1.62;color:var(--tx-3)}
.paynote{margin-top:18px;font-size:13.5px;color:var(--tx-3)}
/* ไอคอนสีประจำช่องทาง — พื้นอ่อน ตัวอักษรเข้ม ผ่านเกณฑ์ contrast บนพื้นขาว */
.pays .ic{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none}
.pays .ic svg{width:22px;height:22px}
.pays .ic.o{background:#FFF1E6;color:#C2410C}
.pays .ic.b{background:#E8EFFC;color:#1D4ED8}
.pays .ic.g{background:#E3F4EC;color:#0F766E}
.pays .ic.p{background:#F1E9FB;color:#6D28D9}
/* ═════════════════════════ 24 · motion ═════════════════════════ */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important}
.svc:hover,.pc:hover,.nc:hover,.pays a:hover,.btn:active{transform:none}
}
/* ═══════════════ 14 · โซน ecommerce / shipping ═══════════════
เจ้าของสั่ง 2026-09-06: "อยากได้สไตล์ ecommerce + shipping
โดยแสดง ecommerce ก่อนด้านบน และด้านล่างเป็น shipping ·
section ecommerce ใช้สีส้ม · section shipping ให้สีน้ำเงิน"
ทำเป็นการสลับ token ชุดเดียว (--zone-*) ไม่ใช่เขียนกฎซ้ำสองชุด
⇒ เพิ่มโซนใหม่ภายหลังทำได้ด้วยการนิยาม --zone-* อย่างเดียว
★ สีตัวอักษรใช้ค่าที่ผ่าน contrast ที่หัวไฟล์ระบุไว้แล้ว
ส้ม = --or-text (5.18 บนขาว) ไม่ใช่ --or-500 (2.6 · ตกเกณฑ์) */
.zone{
--zone-accent:var(--or-600);
--zone-text:var(--or-text);
--zone-soft:var(--or-soft);
--zone-line:rgba(242,101,34,.22);
}
.zone-ship{
--zone-accent:var(--nv-600);
--zone-text:var(--nv-700);
--zone-soft:#EEF3F9;
--zone-line:rgba(27,58,92,.18);
background:var(--bg-2);
}
/* เส้นคาดบางบนหัวโซน = ตัวบอกว่าเปลี่ยนโซนแล้ว (ไม่ใช้แถบสีหนา) */
.zone-shop{border-top:3px solid var(--or-600)}
.zone-ship{border-top:3px solid var(--nv-600)}
/* section ที่มีพื้นของตัวเองอยู่แล้ว ต้องไม่ถูกพื้นโซนทับซ้อน */
.zone-ship .sec.tint,.zone-ship .sec.tint2{background:transparent}
/* ★ ลบกฎ ".zone-ship .kicker{color:var(--zone-text)}" ออกแล้ว 2026-09-06
ค่าเดิมของ .kicker คือ --or-text (ส้ม) ซึ่งอ่านออกทั้งบนพื้นสว่างและพื้นเข้ม
ส่วนที่ผมเปลี่ยนไปเป็นกรมท่า อ่านไม่ออกบนพื้นเข้ม และไม่ได้ดีกว่าเดิมบนพื้นสว่าง
⇒ กฎนี้ไม่ได้แก้ปัญหาอะไร มีแต่สร้างบั๊ก จึงถอดออกทั้งอัน ไม่ใช่ไล่ยกเว้นทีละ section */
.zonehd{max-width:760px;margin-bottom:30px}
.zonetag{display:inline-flex;align-items:center;gap:8px;
font-family:var(--fm,inherit);font-size:12px;font-weight:600;letter-spacing:0;
color:#fff;background:var(--zone-accent);
padding:7px 14px;border-radius:var(--r-pill);margin-bottom:16px}
.zonetag svg{width:15px;height:15px;flex:none}
.zonehd h2{font-size:24px;color:var(--tx);margin:0}
.zonehd .dek{margin-top:12px;font-size:14.5px;color:var(--tx-3);line-height:1.72}
/* ── ข้อความบอกโควตาทดลองค้นหาของผู้ที่ยังไม่ล็อกอิน ── */
.strial{display:flex;align-items:center;gap:8px;margin:14px 0 0;
font-size:12.5px;line-height:1.6;color:var(--tx-3);
background:var(--zone-soft);border:1px solid var(--zone-line);
border-radius:var(--r-sm);padding:10px 13px}
.strial b{color:var(--zone-text);font-weight:600}
/* ── รางสินค้าแยกตามหมวด ──
เลื่อนแนวนอนในรางของตัวเอง หน้าเว็บจึงไม่เลื่อนออกด้านข้าง */
.rail-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
margin:36px 0 14px}
.rail-hd h3{font-size:17px;color:var(--tx);margin:0}
.rail-hd .n{font-size:12.5px;color:var(--tx-3);white-space:nowrap}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(158px,42vw);
gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;padding-bottom:6px;
scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--bd-2);border-radius:99px}
}
@media(min-width:768px){
.rail{grid-auto-columns:minmax(200px,22vw)}
}
/* ═══════════════ 15 · การ์ดสินค้า — โครงเดียวกับหน้า ptcargo shopping ═══════════════
เจ้าของสั่ง 2026-09-06 "โซน ecommerce อยากให้แสดงสินค้าเหมือนตรงหน้า ptcargo shopping"
★ ลอกโครงและสัดส่วนมาจาก modules/member/assets/css/shopping.css:311-490
แต่แปลงสีเป็นชุด token ของหน้านี้ (navy/orange) ไม่ใช่ชุดกาแฟของหน้าสมาชิก
⇒ หน้าตาการ์ดเหมือนกัน แต่ยังกลมกลืนกับหน้าแรก */
.pcard{position:relative;display:block;
background:var(--bg);border:1px solid var(--bd);border-radius:8px;
padding:10px 10px 12px;color:inherit;
transition:border-color .16s,box-shadow .16s,transform .16s}
.pcard .pimg{position:relative;display:grid;place-items:center;
aspect-ratio:1/1;border-radius:8px;overflow:hidden;color:rgba(255,255,255,.92)}
.pcard .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
z-index:2;opacity:0;transition:opacity .25s}
.pcard .pimg img.ok{opacity:1}
.pcard .ph-ic{width:30px;height:30px;opacity:.75;z-index:1}
.pcard .ptit{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;margin-top:9px;height:34px;
font-size:12.5px;line-height:1.35;color:var(--tx)}
.pcard .pmeta{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.pcard .pprice{font-family:var(--fd,inherit);font-weight:600;font-size:15px;color:var(--or-text)}
.pcard .pthb{font-size:11px;color:var(--tx-3)}
.pcard .pshop{display:flex;align-items:center;gap:5px;margin-top:6px;
font-size:10.5px;color:var(--tx-3);padding-right:34px}
.pcard .pshop .tag{flex:none;background:var(--or-soft);color:var(--or-text);
padding:1px 6px;border-radius:6px;font-weight:500}
.pcard .pshopname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pgo{position:absolute;right:10px;bottom:11px;
width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
background:linear-gradient(135deg,var(--or-500),var(--or-600));color:#fff;
box-shadow:0 6px 14px -6px var(--or-600)}
.pcard .pgo svg{width:15px;height:15px}
@media(hover:hover){
.pcard:hover{border-color:var(--or-400);box-shadow:var(--sh-2);transform:translateY(-2px)}
}
/* .grid เดิมของหน้านี้เป็น 2 คอลัมน์ — ขยายตามจอเหมือนหน้า shopping */
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.grid{grid-template-columns:repeat(5,1fr)}}
/* ═══════════════ 16 · ไอคอนมีสี ═══════════════
เจ้าของสั่ง 2026-09-06 "อยากให้หน้า index ดูมีสีสันกว่านี้ และใช้ icon svg ที่มีสีสัน"
★ ไม่ได้คิดจานสีใหม่ — หน้านี้มีระบบอยู่แล้วที่ `.pays .ic.o/.b/.g/.p`
(ส้ม/น้ำเงิน/เขียว/ม่วง · บรรทัด 667-670) จึงยกจานสีนั้นขึ้นเป็น utility กลาง
แล้วให้บล็อกอื่นใช้ร่วม ⇒ ทั้งหน้าใช้จานเดียวกัน ไม่ใช่สองระบบแข่งกัน
★ เพิ่มอีก 2 สี (ชมพู · อำพัน) ให้ครบ 6 เพราะบล็อกที่ยาวสุดมี 6 ช่อง
★ ตรวจโครงจริงก่อนเขียนแล้ว: ตัวถือไอคอนคือ `.why .ic` · `.trust li>svg` ·
`.mode svg` · `.pays .ic` เท่านั้น (ไม่มี .svc-ic/.ops/.net อย่างที่เดาไว้ตอนแรก) */
.ic.o{background:#FFF1E6;color:#C2410C}
.ic.b{background:#E8EFFC;color:#1D4ED8}
.ic.g{background:#E3F4EC;color:#0F766E}
.ic.p{background:#F1E9FB;color:#6D28D9}
.ic.k{background:#FCE9F1;color:#A8306B}
.ic.a{background:#FDF0D6;color:#8A5A06}
/* ── "ทำไมต้อง PTCARGO" 6 การ์ด — เดิมส้มเหมือนกันหมดทั้ง 6 ใบ ──
ไล่สีตามลำดับ เพื่อให้แต่ละใบแยกจากกันด้วยสี ไม่ใช่ด้วยข้อความอย่างเดียว */
.why:nth-child(6n+1) .ic{background:#FFF1E6;color:#C2410C}
.why:nth-child(6n+2) .ic{background:#E8EFFC;color:#1D4ED8}
.why:nth-child(6n+3) .ic{background:#E3F4EC;color:#0F766E}
.why:nth-child(6n+4) .ic{background:#F1E9FB;color:#6D28D9}
.why:nth-child(6n+5) .ic{background:#FCE9F1;color:#A8306B}
.why:nth-child(6n+6) .ic{background:#FDF0D6;color:#8A5A06}
/* ── แถบจุดเด่นบนพื้นน้ำเงินเข้ม ──
ที่นี่ใช้แผ่นสีอ่อนไม่ได้ (แสบตาบนพื้นเข้ม) จึงใช้แผ่นโปร่งแล้วให้ "เส้นไอคอน" เป็นตัวมีสีแทน
สีที่เลือกสว่างพอบนพื้น --nv-900 ทั้งสี่ตัว */
.trust li>svg{box-sizing:content-box;padding:9px;border-radius:8px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.trust li:nth-child(4n+1)>svg{color:#FFA45C}
.trust li:nth-child(4n+2)>svg{color:#7FB4F5}
.trust li:nth-child(4n+3)>svg{color:#63D2A4}
.trust li:nth-child(4n+4)>svg{color:#D6A9F0}
/* ── ชิป "โหมดขนส่ง" — ไล่สีเช่นกัน ── */
.mode:nth-child(3n+1) svg{color:#C2410C}
.mode:nth-child(3n+2) svg{color:#1D4ED8}
.mode:nth-child(3n+3) svg{color:#0F766E}
/* ═══════════════ 17 · เพิ่มสีสันให้โซนช้อป ═══════════════
เจ้าของสั่ง 2026-09-06 "อยากให้หน้า index ดูมีสีสันกว่านี้"
โซนช้อปเดิมเป็นพื้นขาวล้วน ทั้งที่เป็นโซนหลักของหน้า ⇒ ให้พื้นอุ่นแบบไล่สี
★ ใช้สีอ่อนมาก (#FFF9F4) เพื่อไม่ให้แย่งความสนใจจากรูปสินค้าซึ่งเป็นพระเอก
การ์ดสินค้ายังเป็นพื้นขาว --bg จึงลอยเด่นขึ้นกว่าเดิมด้วย */
.zone-shop{
background:
radial-gradient(70% 42% at 88% 0%,rgba(255,138,31,.13) 0%,rgba(255,138,31,0) 60%),
radial-gradient(58% 38% at 4% 12%,rgba(242,101,34,.09) 0%,rgba(242,101,34,0) 58%),
linear-gradient(180deg,#FFF9F4 0%,#FFFDFB 62%,#FFFFFF 100%)}
/* แท็บแหล่งสินค้า — ตัวที่เลือกอยู่ใช้ส้มของโซน ไม่ใช่กรมท่า
(กรมท่าเป็นสีของโซนขนส่ง การใช้ในโซนช้อปทำให้สองโซนอ่านไม่ต่างกัน) */
.zone-shop .plat[aria-selected="true"]{
background:linear-gradient(135deg,var(--or-500),var(--or-600));
border-color:var(--or-600);color:#fff;
box-shadow:0 8px 18px -10px var(--or-600)}
/* หัวราง — ขีดสีนำหน้าชื่อหมวด ทำให้รางแต่ละอันแยกกันด้วยสายตา */
.rail-hd h3{position:relative;padding-left:12px}
.rail-hd h3::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
border-radius:99px;background:linear-gradient(180deg,var(--or-500),var(--or-600))}
/* หัวโซนไม่ให้ถูก header ที่ปักหมุดบังตอนกดลิงก์มาที่ #shop
(รูปนี้เจอตอนตรวจจริง: แท็บ E-COMMERCE ถูกบังครึ่งใบ) */
.zone[id],.zone-shop{scroll-margin-top:96px}
/* โซนขนส่ง — ให้พื้นไล่สีน้ำเงินคู่กับโซนช้อง เพื่อให้สองโซนหนักเท่ากัน
★ เดิมเป็น --bg-2 (#F7F9FC) เทาจนแทบไม่ต่างจากขาว ⇒ อ่านไม่ออกว่าเปลี่ยนโซนแล้ว */
.zone-ship{
background:
radial-gradient(66% 40% at 6% 0%,rgba(27,58,92,.10) 0%,rgba(27,58,92,0) 58%),
radial-gradient(54% 34% at 94% 16%,rgba(29,78,216,.07) 0%,rgba(29,78,216,0) 56%),
linear-gradient(180deg,#F4F8FD 0%,#F9FBFE 60%,#FFFFFF 100%)}
/* หัวข้อในโซนขนส่งใช้กรมท่า ให้เข้าชุดกับแถบบนของโซน */
/* ★ ลบกฎ ".zone-ship .sec h2{color:var(--nv-800)}" ออกแล้ว 2026-09-06
ค่าเดิมคือ --tx (#102033) ส่วนที่ผมทับไปคือ --nv-800 (#0D1B2A) — ตาแยกไม่ออก
แต่ specificity สูงพอจะชนะ .trk .sechd h2 และ .onnavy ⇒ หัวข้อบนพื้นเข้มหายไป
พลาดสองรอบเพราะไล่ยกเว้นทีละ section แทนที่จะถามว่ากฎนี้จำเป็นไหม (ไม่จำเป็น) */
/* ═══════════════ 18 · แผ่นภาพประกอบ .art ให้มีสี ═══════════════
เจ้าของสั่ง 2026-09-06 "ใช้ icon svg ที่มีสีสัน"
.art เดิม = พื้นกรมท่าเหมือนกันทุกใบ + ไอคอนสีขาวจาง 34% ⇒ อ่านเป็นสีเทาทั้งแถบ
★ แก้สองชั้น
1. ไอคอนสว่างขึ้นและมีสีประจำใบ (ไม่ใช่ขาวจาง)
2. แสงเรืองมุมขวาบนของแต่ละใบเปลี่ยนสีตาม ⇒ ใบข้าง ๆ ไม่ซ้ำกัน
★ ยังคงพื้นกรมท่าไว้ เพราะเป็นชุดสีของโซนขนส่งตามที่เจ้าของสั่ง
สิ่งที่เพิ่มคือ "สำเนียงสี" ต่อใบ ไม่ใช่เปลี่ยนโทนทั้งโซน */
.art>svg{color:rgba(255,255,255,.62);stroke-width:1.25}
.svcs>*:nth-child(6n+1) .art>svg{color:#FFB068}
.svcs>*:nth-child(6n+2) .art>svg{color:#8FC0F7}
.svcs>*:nth-child(6n+3) .art>svg{color:#6FD9AE}
.svcs>*:nth-child(6n+4) .art>svg{color:#C3A2F2}
.svcs>*:nth-child(6n+5) .art>svg{color:#F79CC4}
.svcs>*:nth-child(6n+6) .art>svg{color:#F5CE72}
.svcs>*:nth-child(6n+2) .art{background:
radial-gradient(120% 90% at 78% 12%,rgba(96,165,250,.34) 0%,rgba(96,165,250,0) 55%),
linear-gradient(145deg,var(--nv-700) 0%,var(--nv-900) 100%)}
.svcs>*:nth-child(6n+3) .art{background:
radial-gradient(120% 90% at 78% 12%,rgba(52,211,153,.30) 0%,rgba(52,211,153,0) 55%),
linear-gradient(145deg,var(--nv-700) 0%,var(--nv-900) 100%)}
.svcs>*:nth-child(6n+4) .art{background:
radial-gradient(120% 90% at 78% 12%,rgba(167,139,250,.32) 0%,rgba(167,139,250,0) 55%),
linear-gradient(145deg,var(--nv-700) 0%,var(--nv-900) 100%)}
.svcs>*:nth-child(6n+5) .art{background:
radial-gradient(120% 90% at 78% 12%,rgba(244,114,182,.30) 0%,rgba(244,114,182,0) 55%),
linear-gradient(145deg,var(--nv-700) 0%,var(--nv-900) 100%)}
.svcs>*:nth-child(6n+6) .art{background:
radial-gradient(120% 90% at 78% 12%,rgba(251,191,36,.30) 0%,rgba(251,191,36,0) 55%),
linear-gradient(145deg,var(--nv-700) 0%,var(--nv-900) 100%)}
/* ═══════════════ 19 · กระเบื้องหมวดหมู่ — ชุดเดียวกับหน้า shopping ═══════════════
เจ้าของสั่ง 2026-09-06 "ให้แสดงสินค้าเหมือนกันหน้า shopping"
★ ยกจาก modules/member/assets/css/shopping.css (.cats/.cat/.cat .ci)
แปลงเฉพาะ token สี: --ink-2 -> --tx-2 · --cream-2 -> --or-soft · --sun-deep -> --or-text
★ สีของแต่ละกระเบื้องมาจากตัวแปร --c/--t ที่ JS ใส่ให้รายหมวด
⇒ ไอคอน 12 สี ต่างกันจริงทั้ง 12 ช่อง ตรงกับที่สั่งว่าอยากได้ icon svg มีสีสัน */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 4px;
padding:6px 0 4px;background:transparent}
@media(min-width:560px){.cats{grid-template-columns:repeat(6,1fr)}}
.cat{display:block;background:transparent;padding:12px 4px 10px;text-align:center;
border-radius:8px;color:inherit;border:0;min-height:0;
transition:background .18s,transform .16s;
opacity:0;animation:catUp .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes catUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
.cat{opacity:1;animation:none}
}
.cat .ci{width:48px;height:48px;margin:0 auto 8px;border-radius:8px;
background:linear-gradient(150deg,#fff,var(--t,var(--or-soft)));
color:var(--c,var(--or-text));
display:grid;place-items:center;font-size:23px;position:relative;overflow:hidden;
box-shadow:0 7px 16px -9px color-mix(in srgb,var(--c,#EF5F06) 55%,transparent);
transition:transform .2s,box-shadow .2s}
.cat .cn{font-size:11.5px;color:var(--tx-2);display:block;line-height:1.2;font-weight:500}
.cat:active{transform:scale(.94)}
@media(hover:hover){
.cat:hover{background:#fff}
.cat:hover .ci{transform:translateY(-2px)}
}
/* ═══════════════ 20 · โซนช้อปให้เหมือนหน้า shopping ═══════════════
เจ้าของสั่ง 2026-09-06 "เอาให้เหมือนทั้งตรงช่องค้นหา Flash Sale และ สินค้า
ถ้ายังไม่มีสินค้าก็ให้แสดงเป็นไม่มีสินค้า"
★ ยกจาก modules/member/assets/css/shopping.css แปลงเฉพาะ token สี
--ink -> --tx · --muted -> --tx-3 · --cream -> #FFF8F2 · --line -> --bd
--sun/--sun-deep -> --or-500/--or-600 */
.zone-shop{padding-block:0}
/* ── แถบค้นหาส้ม ── */
.searchband{position:relative;overflow:hidden;padding:18px 0 22px;color:#fff;
background:linear-gradient(120deg,#FF8A2B,#F0590A,#FF7A1A,#F0590A);
background-size:300% 300%;animation:gshift 11s ease infinite}
@keyframes gshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* ★ ถอดวงกลมลอย (.blob) ออกแล้ว — กติกา "do not add discrete orbs,
gradient orbs, or bokeh blobs as decoration or backgrounds" */
.searchband .in{position:relative;z-index:1}
.sbar{display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px;
padding:6px 6px 6px 14px;box-shadow:0 12px 30px -14px rgba(150,60,0,.6);
transition:box-shadow .18s ease}
.sbar>svg{width:20px;height:20px;color:var(--tx-3);flex:none}
.sbar input{flex:1;min-width:0;border:none;outline:none;background:transparent;
font-size:14.5px;color:var(--tx);min-height:44px}
.sbar input::placeholder{color:#9AA6B5}
.sbar button{flex:none;border:none;cursor:pointer;color:#fff;
background:var(--or-btn);
font-family:var(--fd,inherit);font-weight:500;font-size:14px;
padding:11px 18px;border-radius:8px}
.searchband .plats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.searchband .plat{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;
cursor:pointer;border-radius:var(--r-pill);font-size:13px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff}
.searchband .plat[aria-selected="true"]{background:#fff;color:#C2410C;border-color:#fff;
font-weight:600;box-shadow:none}
.shint{margin-top:11px;font-size:12px;color:rgba(255,255,255,.92);
display:flex;align-items:center;gap:6px}
.searchband .strial{margin-top:12px;background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.28);color:#fff}
.searchband .strial b{color:#fff}
/* ── Flash Sale ── */
.flash{position:relative;color:#fff;padding-bottom:6px;
background:linear-gradient(135deg,#FF7A45 0%,#F5321F 52%,#DA1414 100%)}
.flashhead{display:flex;align-items:center;gap:12px;padding-block:14px 10px}
/* ★ ห้ามใช้ชื่อ .ft — home.css:585 ใช้ .ft เป็น "ส่วนท้ายเว็บ" อยู่แล้ว
(พื้นกรมท่า + padding-block 44px) พอเอามาใช้ซ้ำ ป้าย Flash Sale
เลยมีกล่องกรมท่าทับ · เจอตอนตรวจหน้าจริง จึงเปลี่ยนเป็น .fsale-t */
.flashhead .fsale-t{display:flex;align-items:center;gap:7px;
font-family:var(--fd,inherit);font-weight:600;font-size:17px;color:#fff}
.flashhead .fsale-z{display:inline-flex;align-items:center}
.flashhead .cd{display:flex;gap:5px;margin-left:auto;align-items:center;
font-family:var(--fm,inherit);font-weight:600;font-size:13px}
.flashhead .cd b{background:rgba(0,0,0,.24);border-radius:6px;padding:2px 6px;
font-variant-numeric:tabular-nums}
.flash .prow{padding-bottom:16px}
.flash .needapi{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);
color:#fff}
/* ── หัวข้อแต่ละช่อง ── */
.shopsec{padding-block:22px}
.shopsec.band{background:rgba(255,255,255,.6)}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-bottom:16px}
.sechead .lft{display:flex;align-items:center;gap:8px;min-width:0}
.sechead .emo{display:inline-flex;color:var(--or-600);font-size:19px}
.sechead h2{font-size:17px;color:var(--tx);margin:0}
.sechead .more{flex:none;font-size:13px;color:var(--or-text);font-weight:500}
/* ── แถวเลื่อนแนวนอน + กริด ── */
.prow{display:flex;gap:12px;align-items:stretch;overflow-x:auto;
scroll-snap-type:x proximity;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.prow::-webkit-scrollbar{display:none}
.prow .pcard{flex:none;width:150px;scroll-snap-align:start}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:stretch}
@media(min-width:560px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.pgrid{grid-template-columns:repeat(5,1fr)}}
/* ── กล่อง "ยังไม่มีสินค้า" — แบบเดียวกับ .needapi ของหน้า shopping ── */
.needapi{width:100%;box-sizing:border-box;flex:none;margin:2px 0 10px;
padding:22px 16px;text-align:center;font-size:12.5px;color:var(--tx-3);
background:#FFF8F2;border:1px dashed var(--bd-2);border-radius:8px}
.pgrid .needapi,.prow .needapi{grid-column:1/-1}
@media(prefers-reduced-motion:reduce){
.searchband{animation:none}
}
/* ═══════════════ 23 · บทความความร่วมมือ PTCARGO ft. ZTO ═══════════════
เจ้าของสั่ง 2026-09-06 ให้ใส่บทความนี้ในช่อง hero พร้อมที่วางโลโก้พันธมิตร
★ hero เป็นพื้นกรมท่า บทความจึงเป็นการ์ดโปร่งบนพื้นนั้น ไม่ใช่กล่องขาว
(กล่องขาวบนกรมท่าจะแย่ง h1 เป็นจุดสนใจหลักของ hero)
★ ใช้ชุดสีเดียวกับส่วนท้าย: ส้ม น้ำตาล น้ำเงิน */
/* ★ เดิมเป็นการ์ดโปร่งซ้อนอยู่ใน hero — ผิดกติกาสองข้อ
"never put hero text or the primary experience in a card"
"Do not style page sections as floating cards"
ตอนนี้เป็นแถบเต็มความกว้างของตัวเอง พื้นกรมท่า ไม่มีกรอบไม่มีเงา */
.zto-band{--z-o:#FF8A2B;--z-n:#D89A5C;--z-b:#7FB4F5;
background:linear-gradient(140deg,var(--nv-700),var(--nv-900));color:var(--tx-onnavy-2)}
.zto-band .in{max-width:1200px}
.zto-tag{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:0;
color:var(--z-o)}
.zto-band h2{margin:0;font-size:22px;color:#fff;line-height:1.3;max-width:22ch}
.zto-band h2 .ft-x{color:var(--z-n);font-style:italic;font-weight:400}
.zto-lede{margin:9px 0 0;font-size:13.5px;line-height:1.72;color:var(--tx-onnavy-2)}
.zto-lede b{color:#fff;font-weight:600}
.zto-pts{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:10px}
.zto-pts li{display:flex;gap:11px;align-items:flex-start;
font-size:13px;line-height:1.62;color:var(--tx-onnavy-2)}
.zto-pts b{display:block;color:#fff;font-weight:600;font-size:13.5px;margin-bottom:1px}
.zto-pts em{font-style:normal;color:var(--z-o);font-weight:600}
.zto-pts .zi{flex:none;width:34px;height:34px;border-radius:8px;
display:grid;place-items:center;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.zto-pts .zi svg{width:17px;height:17px}
.zto-pts .p-o .zi{color:var(--z-o)}
.zto-pts .p-n .zi{color:var(--z-n)}
.zto-pts .p-b .zi{color:var(--z-b)}
/* ── ที่วางโลโก้พันธมิตร ── */
.zto-partners{margin-top:16px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.12)}
.zp-h{margin:0 0 9px;font-size:11px;letter-spacing:0;color:#8FA3B8}
.zp-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
/* ── โลโก้จริง: sprite ใบเดียว ตัดด้วย background-position ──
ไฟล์ shared/assets/partners/partner-logos.png (512x341 · 103 KB)
ย่อจากต้นฉบับที่เจ้าของส่งมา 1536x1024 1.3 MB ด้วย scratchpad/shrink.py
★ พื้นแผ่นเป็นสีขาว ไม่ใช่โปร่ง — เพราะโลโก้ในไฟล์มีทั้งดำ (SHEIN · ตัวอักษร TikTok)
และกรมท่า (Lazada) ซึ่งจะจมหายบนพื้นกรมท่าของ hero
พื้นขาวเป็นวิธีมาตรฐานของแถบโลโก้พันธมิตรอยู่แล้ว และทำให้ทุกแบรนด์อ่านออกเท่ากัน
★ ตัวเลขทุกตัวใน .pl-* สร้างด้วย scratchpad/sprite_css.py จากการสแกน alpha
ห้ามแก้ด้วยมือ — ถ้าเปลี่ยนรูปหรือขนาด ให้รันสคริปต์ใหม่ */
.plogo{display:inline-flex;align-items:center;justify-content:center;
min-width:76px;height:38px;padding:0 11px;border-radius:8px;
background:#fff;border:1px solid rgba(255,255,255,.14)}
.pl{display:block;background-image:url("../../shared/assets/partners/partner-logos.png");
background-repeat:no-repeat}
/* --- generated: อย่าแก้ตัวเลขด้วยมือ ใช้ scratchpad/sprite_css.py --- */
.pl-zto{width:59.6px;height:24.0px;background-size:182.5px 121.5px;background-position:-14.9px -8.4px}
.pl-tiktok{width:76.5px;height:24.0px;background-size:182.5px 121.5px;background-position:-96.8px -8.4px}
.pl-lazada{width:84.0px;height:22.3px;background-size:173.9px 115.8px;background-position:-10.3px -39.1px}
.pl-1688{width:58.5px;height:24.0px;background-size:187.1px 124.6px;background-position:-118.8px -42.0px}
.pl-alibaba{width:84.0px;height:13.3px;background-size:108.3px 72.2px;background-position:-12.3px -40.0px}
.pl-shein{width:84.0px;height:19.8px;background-size:214.7px 143.0px;background-position:-11.9px -112.1px}
.pl-eveandboy{width:84.0px;height:18.6px;background-size:201.3px 134.1px;background-position:-108.4px -105.1px}
@media(min-width:768px){
/* บนจอกว้าง วางข้อความซ้าย รายการขวา ให้แถบไม่ยาวเป็นเส้นเดียว */
.zto-band .in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);
gap:36px 48px;align-items:start}
.zto-tag,.zto-band h2,.zto-lede{grid-column:1}
.zto-pts{grid-column:2;grid-row:1/4;margin-top:0}
.zto-partners{grid-column:1/-1}
}
@media(prefers-reduced-motion:no-preference){
@media(hover:hover){
.plogo{transition:border-color .18s,background .18s}
.plogo:hover{border-color:var(--z-o);background:rgba(255,138,43,.1)}
}
}
/* ═══════════════ 24 · สไลด์โปรโมชัน ═══════════════
เจ้าของสั่ง 2026-09-06 "ใส่ slider เข้าไปด้วย และเอาปุ่มลิงก์ออก"
★ กำหนดอัตราส่วน 1180:460 ไว้ตายตัว ⇒ กันหน้ากระตุกตอนรูปโหลดเสร็จ
(รูปมีขนาดจริงเท่านี้ ไม่ได้เดา) */
.bannerwrap{padding-block:16px 4px}
.banner{position:relative;border-radius:var(--r-lg);overflow:hidden;
background:var(--bg-3);box-shadow:var(--sh-2)}
.bslides{position:relative;aspect-ratio:1180/460}
.bslide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;
pointer-events:none}
.bslide.on{opacity:1;pointer-events:auto}
.bslide img{width:100%;height:100%;object-fit:cover;display:block}
.bnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
display:grid;place-items:center;
background:rgba(16,32,51,.42);color:#fff;backdrop-filter:blur(3px);
transition:background .18s}
.bnav svg{width:17px;height:17px}
.bnav.prev{left:10px}
.bnav.next{right:10px}
.bdots{position:absolute;left:0;right:0;bottom:10px;z-index:2;
display:flex;justify-content:center;gap:6px}
.bdot{width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer;
background:rgba(255,255,255,.5);transition:width .22s,background .22s}
.bdot.on{width:20px;background:#fff}
@media(hover:hover){
.bnav:hover{background:rgba(16,32,51,.72)}
.bdot:hover{background:rgba(255,255,255,.85)}
}
/* จอเล็กมาก ปุ่มลูกศรกินพื้นที่รูป — เหลือแค่จุดก็พอ (ปัดนิ้วได้อยู่แล้ว) */
@media(max-width:420px){
.bnav{width:30px;height:30px}
.bnav.prev{left:6px}
.bnav.next{right:6px}
}
@media(prefers-reduced-motion:reduce){
.bslide{transition:none}
}
/* ═══════════════ 25 · ส่วน "จีนไปทั่วโลกทางอากาศ" ═══════════════
เจ้าของสั่ง 2026-09-06 "บทความนี้ให้เปลี่ยนเป็น จีนไปทั่วโลกผ่านช่องทาง Air ราคาไม่แพง"
★ .mlist li เดิมสีเป็น --tx-2 (เข้ม) ซึ่งอ่านออกเพราะ .onnavy มีกฎของตัวเองอยู่แล้ว
แต่ตัวหนา ที่เพิ่งเพิ่มต้องขาวจัดขึ้นเพื่อให้แยกจากคำอธิบาย */
.onnavy .mlist b{color:#fff;font-weight:600}
/* ★ .mode เปลี่ยนจาก เป็น แล้ว ⇒ ต้องมีสถานะ hover/focus
ไม่งั้นดูเหมือนป้ายเฉย ๆ ทั้งที่กดได้ */
a.mode{transition:background .18s,border-color .18s,transform .18s}
@media(hover:hover){
a.mode:hover{background:var(--or-soft);border-color:var(--or-500);
color:var(--or-text);transform:translateY(-1px)}
}
/* ป้าย "เร็ว ๆ นี้" — เจ้าของยืนยัน 2026-09-06 ว่าบริการทางอากาศยังไม่เปิด
★ ต้องอ่านออกชัดตั้งแต่แวบแรก ไม่ใช่ตัวเล็กจาง ๆ ที่คนมองข้าม
เพราะถ้าพลาดไป ลูกค้าจะเข้าใจว่าสั่งได้แล้ว */
.soon{display:inline-flex;align-items:center;margin-left:8px;
padding:2px 9px;border-radius:var(--r-pill);
font-size:10.5px;font-weight:600;letter-spacing:0;
background:var(--or-btn);color:#fff;
text-transform:none;vertical-align:middle}
/* ── มือถือ: สไลด์เต็มขอบจอ ──
เจ้าของสั่ง 2026-09-06 "mobile version ทำให้รูปสไลด์แสดงเต็มจอ เฉพาะมือถือ"
★ .in มี padding-inline 20px ⇒ ถอยมาร์จินออก 20px ทั้งสองข้างเพื่อทะลุกรอบ
(ไม่ใช้ 100vw เพราะ 100vw นับรวมความกว้างของแถบเลื่อน ทำให้ล้นออกด้านข้าง)
★ มุมมนและเงาต้องเอาออกด้วย ไม่งั้นเห็นมุมโค้งลอยติดขอบจอ */
@media(max-width:767px){
/* ★ .bannerwrap มีคลาส .in ติดอยู่ด้วย ซึ่งตั้ง width:100% ไว้แล้ว
⇒ พอเอา padding-inline ออก content box ก็เต็มจอพอดีอยู่แล้ว
ห้ามใส่ margin-inline:-20px เพิ่ม เพราะ width:100% ทำให้กล่องไม่ขยายตาม
มันจะแค่ "เลื่อนไปทางซ้าย 20px" = ล้นซ้ายและเหลือช่องว่างขวา
(วัดจริงตอนตรวจ: left -20 width 430 บนจอ 430) */
.bannerwrap{padding-inline:0;padding-block:0 4px}
.banner{border-radius:0;box-shadow:none}
}
/* ── เก็บช่องว่างรอบสไลด์ ──
เจ้าของสั่ง 2026-09-06 "ช่องว่าง slider เอาออกด้วย"
★ ช่องว่าง 26px ใต้สไลด์ไม่ได้มาจากตัวสไลด์ แต่มาจาก #searchResult
ซึ่งตอนยังไม่ได้ค้นหาจะสูง 0 แต่ยังกิน margin-top:26px อยู่
⇒ ใช้ :empty ตัดระยะทิ้งตอนยังไม่มีผลค้นหา · พอค้นหาแล้วมีเนื้อหา ระยะกลับมาเอง */
.sres:empty{margin:0;padding:0}
@media(max-width:767px){
.bannerwrap{padding-block:0}
}
/* ═══════════════ 26 · ภาพจริงเข้าแทน placeholder ═══════════════
เจ้าของส่งไฟล์ชุดแรก 11 ใบมาให้ 2026-09-06 แล้วสั่ง "เอาไปใส่ได้เลย"
★ ภาพในการ์ดบริการ/เครือข่าย/ศูนย์ปฏิบัติการ ใส่เป็น ![]()
ใน .art
ซึ่ง .art>img{position:absolute;inset:0;object-fit:cover} รองรับไว้อยู่แล้ว
⇒ ไอคอน SVG เดิมยังอยู่ข้างใต้เป็นภาพสำรอง ถ้าไฟล์หายจะเห็นไอคอนแทนกล่องว่าง
★ hero กับพื้นหลังช่องติดตามพัสดุเป็น background ของ pseudo-element
จึงใส่เป็น background-image ทับไล่สีเดิม (คงไล่สีไว้ใต้ภาพเป็น fallback) */
/* ── hero 1920x900 ── */
.hero::before{
background:
linear-gradient(100deg,rgba(13,27,42,.94) 0%,rgba(13,27,42,.72) 38%,rgba(13,27,42,.30) 62%,rgba(13,27,42,.18) 100%),
radial-gradient(70% 85% at 88% 26%,rgba(255,138,31,.30) 0%,rgba(255,138,31,0) 62%),
url("../images/index/index-hero-logistics.webp") center right/cover no-repeat,
linear-gradient(140deg,var(--nv-700) 0%,var(--nv-800) 46%,var(--nv-900) 100%)}
/* ★ ชั้นไล่สีเข้มด้านบนจำเป็น — hero มีทั้งหัวข้อขาวและบทความ ZTO ทับอยู่
ถ้าปล่อยภาพล้วน ตัวหนังสือจะอ่านไม่ออกตรงส่วนที่ภาพสว่าง
ไล่จากเข้มมากฝั่งซ้าย (ที่ข้อความอยู่) ไปโปร่งฝั่งขวา (ที่ภาพเป็นพระเอก) */
/* ── พื้นหลังช่องติดตามพัสดุ 1920x600 ── */
.trk::before{
background:
linear-gradient(180deg,rgba(13,27,42,.90),rgba(8,33,61,.93)),
radial-gradient(58% 78% at 76% 18%,rgba(255,138,31,.20) 0%,rgba(255,138,31,0) 62%),
url("../images/index/tracking-network-background.webp") center/cover no-repeat}
@media(max-width:767px){
/* ★ มือถือ: ข้อความกินเต็มความกว้าง ไม่ได้อยู่แค่ครึ่งซ้ายเหมือนเดสก์ท็อป
⇒ ชั้นบังต้องเข้มสม่ำเสมอทั้งแผ่น ไม่ใช่ไล่จากซ้ายไปขวา
ไม่งั้นบรรทัดที่ทอดไปถึงฝั่งขวาจะไปอยู่บนส่วนที่ภาพสว่างและอ่านยาก */
.hero::before{
background:
linear-gradient(180deg,rgba(13,27,42,.90) 0%,rgba(13,27,42,.80) 45%,rgba(13,27,42,.88) 100%),
radial-gradient(70% 60% at 82% 18%,rgba(255,138,31,.26) 0%,rgba(255,138,31,0) 64%),
url("../images/index/index-hero-logistics.webp") center/cover no-repeat,
linear-gradient(140deg,var(--nv-700) 0%,var(--nv-800) 46%,var(--nv-900) 100%)}
}
/* ★ ซ่อนไอคอนสำรองเมื่อมีภาพจริง — เจ้าของรายงาน 2026-09-06 ว่าไอคอนบังรูป
สาเหตุ: .art>img เป็น absolute ส่วน .art>svg เป็น relative ทั้งคู่ไม่มี z-index
และ