:root{
  --ink:#0d1117; --ink2:#3d4553; --mute:#737c8a; --line:#e3e7ee; --wash:#f6f8fb;
  --o:#ff5a00; --o2:#ff8a1f; --o-d:#d94400; --o-w:#fff1e6;
  --blue:#2563eb; --blue-d:#1b429c; --ok:#0bab57; --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:"IBM Plex Sans Thai",Tahoma,sans-serif;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mono{font-family:"IBM Plex Mono",monospace}
.draft{background:#fffbea;border-bottom:1px solid #f0e3b8;padding:10px 0;font-size:13px;color:#6b5d20}

/* แถบเรทแบบ Kalodata  แน่น ๆ มีชิป */
.rate{background:#0d1117;color:#fff;font-size:13px}
.rate .wrap{display:flex;align-items:center;gap:8px;height:44px;overflow-x:auto;white-space:nowrap;
  scrollbar-width:none}
.rate .wrap::-webkit-scrollbar{display:none}
.rate .d{color:rgba(255,255,255,.5);margin-right:6px}
.rate .c{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}
.rate .c b{color:#fff;font-weight:600}
.rate .up{color:#4ade80;font-size:11px}

/* เมนู */
.hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line)}
/* ★ ต้องเป็น .hd>.wrap ลูกโดยตรงเท่านั้น ห้ามเขียน .hd .wrap ★
   ลิ้นชักเมนูมือถือ .mnav อยู่ข้างใน header นี้ และข้างในมี .wrap ของตัวเองอีกชั้น
   เขียนแบบลูกหลานแล้วกฎนี้ไปโดนลิ้นชักด้วย ลิงก์ข้างในกลายเป็นแถวแนวนอนสูง 70px
   บีบจนตัวหนังสือตกบรรทัด ทะลุออกมาทับหน้าแรก (เจอจริง 12 ต.ค. 2569 กดปุ่มขีดสามขีดบน iPhone) */
.hd>.wrap{display:flex;align-items:center;gap:6px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand img{width:38px;height:38px;border-radius:9px}
.brand b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.brand i{font-style:normal;color:var(--o)}
/* ★ ห้ามใส่ text-transform:uppercase หรือ letter-spacing กับบรรทัดนี้ ★
   ข้อความมาจากไฟล์กลาง inc/brand.php ซึ่งตอนนี้เป็นภาษาไทย  ไทยโดนเว้นระยะตัวอักษรแล้วสระลอยอ่านไม่ออก */
.brand em{font-style:normal;display:block;font-size:11px;color:var(--mute);line-height:1.3}
.menu{display:flex;align-items:center;gap:2px;margin-left:22px}
.menu>a,.menu>.dd>button{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border:0;background:none;
  border-radius:9px;font:inherit;font-size:14px;color:var(--ink2);text-decoration:none;cursor:pointer;white-space:nowrap}
.menu>a:hover,.menu>.dd>button:hover{background:var(--wash);color:var(--ink)}
.dd{position:relative}
.dd-p{position:absolute;top:calc(100% + 8px);left:0;min-width:286px;padding:8px;border-radius:14px;background:#fff;
  border:1px solid var(--line);box-shadow:0 22px 54px -24px rgba(13,17,23,.45);
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:.16s}
.dd:hover .dd-p,.dd:focus-within .dd-p{opacity:1;visibility:visible;transform:none}
.dd-p a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink2);text-decoration:none}
.dd-p a:hover{background:var(--o-w);color:var(--o-d)}
.hd-sp{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.hd-sp .lg{font-size:14px;color:var(--ink2);text-decoration:none;padding:8px 10px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:20px;height:20px}
.mnav{display:none;border-top:1px solid var(--line);background:#fff;padding:8px 0 16px}
.mnav.on{display:block}
.mnav a{display:block;padding:11px 4px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink2);text-decoration:none}
.mnav a:last-child{border-bottom:0}
.mnav .sub{padding-left:16px;font-size:14px;color:var(--mute)}
/* เข้าสู่ระบบ อยู่บนสุดของลิ้นชัก ย้อมส้มให้เด่นกว่าเมนูอื่น */
.mnav .is-login{color:var(--o);font-weight:600}

/* ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border:0;
  border-radius:11px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .12s,box-shadow .12s,background .15s,border-color .15s}
.btn svg{width:18px;height:18px}
.b-o{background:var(--o);color:#fff;box-shadow:0 4px 0 var(--o-d),0 10px 22px rgba(255,90,0,.34)}
.b-o:hover{background:#ff6a14;transform:translateY(-1px);box-shadow:0 5px 0 var(--o-d),0 14px 26px rgba(255,90,0,.4)}
.b-o:active{transform:translateY(3px);box-shadow:0 1px 0 var(--o-d),0 5px 10px rgba(255,90,0,.3)}
.b-blue{background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-d),0 10px 20px rgba(10,40,100,.26)}
.b-blue:hover{background:#1d4ed8;transform:translateY(-1px)}
.b-blue:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.b-line{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.b-line:hover{border-color:#c7cdd7;background:var(--wash)}
.b-sm{height:40px;padding:0 16px;font-size:13.5px;border-radius:9px;box-shadow:0 3px 0 var(--o-d)}
.b-sm:active{box-shadow:0 1px 0 var(--o-d)}

/* ====== ส่วน AI แบบ Kalopilot ====== */
.ai{position:relative;overflow:hidden;background:#0d1117;color:#fff;padding:62px 0 70px}
.ai::before{content:"";position:absolute;left:50%;top:-260px;width:1000px;height:620px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,90,0,.42),transparent 70%);pointer-events:none}
.ai::after{content:"";position:absolute;right:-180px;bottom:-240px;width:620px;height:620px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(37,99,235,.3),transparent 70%);pointer-events:none}
.ai .wrap{position:relative;z-index:2;text-align:center}
.ai-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:99px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:600}
.ai-badge em{font-style:normal;padding:2px 8px;border-radius:99px;background:var(--o);color:#fff;font-size:11px}
.ai h1{margin:20px 0 0;font-size:clamp(28px,3.9vw,46px);line-height:1.28;letter-spacing:-.028em;font-weight:700;color:#fff}
.ai h1 span{background:linear-gradient(95deg,#ff8a1f,#ff5a00 45%,#ff3d7f);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.ai .sub{margin:16px auto 0;max-width:46em;font-size:16px;color:rgba(255,255,255,.66)}

.ask{margin:34px auto 0;max-width:780px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:16px 16px 13px;text-align:left;backdrop-filter:blur(8px)}
.ask textarea{display:block;width:100%;min-height:62px;resize:none;border:0;background:none;outline:none;
  color:#fff;font:inherit;font-size:16px;line-height:1.7}
.ask textarea::placeholder{color:rgba(255,255,255,.45)}
.ask-b{display:flex;align-items:center;gap:10px;margin-top:8px}
.ask-b .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;
  background:rgba(255,255,255,.08);font-size:12.5px;color:rgba(255,255,255,.75)}
.ask-b .pill svg{width:14px;height:14px}
.ask-go{margin-left:auto;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:13px;
  background:var(--o);color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(255,90,0,.5)}
.ask-go:hover{background:#ff6a14}
.ask-go svg{width:20px;height:20px}

.qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;margin-top:20px;text-align:left}
.q{display:block;padding:15px 16px;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);color:#fff;text-decoration:none;transition:.15s;cursor:pointer}
.q:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.q i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;margin-bottom:10px;
  background:rgba(255,90,0,.18);color:var(--o2);font-style:normal}
.q i svg{width:17px;height:17px}
.q b{display:block;font-size:14px;font-weight:600}
.q span{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.6}
.ai-note{margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.45)}

/* แถบตัวเลขใต้ AI */
.nums{background:#fff;border-bottom:1px solid var(--line)}
/* ★ ห้ามมี padding ซ้ายขวา ★ พื้นของ wrap เป็นสีเส้นไว้ทำเส้นคั่น 1px
   ถ้าเหลือ padding 20px ไว้ แถบสีเส้นจะโผล่เป็นขีดเทาสองข้าง ดูเหมือนขอบขาด
   เอาออกให้การ์ดกินเต็มความกว้าง เหลือแต่เส้นคั่นบาง ๆ ตามที่ตั้งใจ (12 ต.ค. 2569) */
.nums .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);padding-left:0;padding-right:0;max-width:none}
/* ★ ต้องเจาะจงลูกชั้นเดียว ★ เขียน .nums div เฉย ๆ มันจับ .wrap ไปด้วย
   .wrap เลยได้ padding ตามไป แล้วพื้นสีเส้นของมันโผล่เป็นกรอบเทารอบการ์ด (แก้ 12 ต.ค. 2569) */
.nums .wrap > div{background:#fff;padding:22px 14px;text-align:center}
.nums b{display:block;font-size:25px;font-weight:600;letter-spacing:-.02em}
.nums span{font-size:12.5px;color:var(--mute)}

/* หมวด */
.sec{padding:78px 0}
.sec-alt{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:99px;
  background:var(--o-w);color:var(--o-d);font-size:12.5px;font-weight:600}
.tag b{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.sh{max-width:42em;margin:0 0 38px}
.sh.mid{margin-left:auto;margin-right:auto;text-align:center}
.sh .tag{margin-bottom:13px}
.sh h2{margin:0;font-size:clamp(24px,2.8vw,33px);line-height:1.35;letter-spacing:-.024em;font-weight:700}
.sh p{margin:11px 0 0;font-size:16px;color:var(--ink2)}

.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;transition:.15s}
.card:hover{border-color:#c7cdd7;box-shadow:0 20px 44px -28px rgba(13,17,23,.4);transform:translateY(-2px)}
.card i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;margin-bottom:14px;
  background:var(--o-w);color:var(--o);font-style:normal}
.card i svg{width:20px;height:20px}
.card h3{margin:0 0 5px;font-size:16px;font-weight:600;line-height:1.45}
.card p{margin:0;font-size:14px;color:var(--ink2);line-height:1.78}

.g3i{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.pc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:.15s}
.pc:hover{border-color:#c7cdd7;box-shadow:0 20px 44px -28px rgba(13,17,23,.4);transform:translateY(-2px)}
.pc img{display:block;width:100%;height:176px;object-fit:cover}
.pc div{padding:18px 18px 20px}
.pc h3{margin:0 0 4px;font-size:16.5px;font-weight:600}
.pc p{margin:0 0 13px;font-size:13.5px;color:var(--ink2)}
.pc dl{display:flex;gap:20px;margin:0;padding-top:13px;border-top:1px solid var(--line)}
.pc dt{font-size:11px;color:var(--mute);margin:0}
.pc dd{margin:1px 0 0;font-size:15px;font-weight:600;letter-spacing:-.01em}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(225px,100%),1fr));gap:24px}
.step{padding-top:16px;border-top:3px solid var(--o)}
.step:last-child{border-top-color:var(--line)}
.step b{display:block;font-size:12px;color:var(--o-d);margin-bottom:4px}
.step h3{margin:0 0 4px;font-size:15.5px;font-weight:600}
.step p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.75}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:11px}
.gal img{display:block;width:100%;height:172px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}

.faq{max-width:830px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:17px 22px;font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;border-right:2px solid var(--mute);
  border-bottom:2px solid var(--mute);transform:rotate(45deg);transition:.18s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0;padding:0 22px 19px;font-size:14.5px;color:var(--ink2)}

.cta{padding:0 0 84px}
.cta .box{border-radius:22px;padding:56px 38px;text-align:center;color:#fff;position:relative;overflow:hidden;background:#0d1117}
.cta .box::before{content:"";position:absolute;inset:0;
  background:radial-gradient(62% 125% at 50% -12%,rgba(255,90,0,.46),transparent 62%)}
.cta .box>*{position:relative}
.cta h2{margin:0;font-size:clamp(24px,2.9vw,33px);letter-spacing:-.024em;font-weight:700;color:#fff}
.cta p{margin:12px auto 0;max-width:40em;color:rgba(255,255,255,.74);font-size:16px}
.cta .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:27px}
.cta .b-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cta .b-line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
.cta small{display:block;margin-top:16px;font-size:13px;color:rgba(255,255,255,.56)}

@media (max-width:980px){
  .menu,.hd-sp .lg{display:none}
  .burger{display:inline-flex}
  .nums .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec{padding:56px 0}
  .ai{padding:46px 0 54px}
}
@media (max-width:560px){
  .ask{border-radius:16px}
  .gal img{height:148px}
  .cta .box{padding:42px 20px}
  .cta .acts .btn{flex:1 1 100%}
}

/* สินค้าฮิตในตลาด  การ์ดแน่น ๆ แบบ Kalodata */
/* แท็บแพลตฟอร์ม  ใช้สีจริงของแต่ละเจ้า */
.hot-tabs{display:flex;gap:8px;margin:-18px 0 20px;flex-wrap:wrap}
.hot-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 17px;border:1px solid var(--line);
  border-radius:99px;background:#fff;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;
  transition:.15s}
.hot-tab::before{content:"";width:9px;height:9px;border-radius:50%;background:#c7cdd7}
.hot-tab[data-hot=tiktok]::before{background:linear-gradient(135deg,#25f4ee,#fe2c55)}
.hot-tab[data-hot=shopee]::before{background:#ee4d2d}
.hot-tab[data-hot=lazada]::before{background:linear-gradient(135deg,#0f146d,#f759a7)}
.hot-tab:hover{border-color:#c7cdd7;transform:translateY(-1px)}
.hot-tab.on{color:#fff;border-color:transparent}
.hot-tab[data-hot=tiktok].on{background:#0d1117}
.hot-tab[data-hot=shopee].on{background:#ee4d2d}
.hot-tab[data-hot=lazada].on{background:#1a1f71}
.hot-tab.off{opacity:.45;cursor:not-allowed}
.hot-tab.off::before{background:#c7cdd7}
.hot-tab em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--mute)}

/* ★ ต้องเป็น auto-fill ไม่ใช่ auto-fit ★ (แก้ 11 ต.ค. 2569)
   auto-fit จะยุบช่องที่ว่างทิ้ง แล้วยืดการ์ดที่เหลือให้เต็มแถว
   วันไหนแพลตฟอร์มไหนมีสินค้าแค่ 2 ชิ้น การ์ดจะบวมเต็มจอทันที (เจอมาแล้วกับ Lazada)
   auto-fill เก็บช่องว่างไว้ การ์ดจึงคงขนาดเดิมเสมอไม่ว่าจะมีกี่ชิ้น */
.hot-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:14px}
.hot-grid.on{display:grid}
.hot{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff;transition:.15s}
.hot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--o),var(--o2))}
.hot:hover{border-color:#c7cdd7;box-shadow:0 20px 44px -24px rgba(13,17,23,.45);transform:translateY(-3px)}
[data-hotp=tiktok] .hot::before{background:linear-gradient(90deg,#25f4ee,#fe2c55)}
[data-hotp=shopee] .hot::before{background:linear-gradient(90deg,#ff7337,#ee4d2d)}
[data-hotp=lazada] .hot::before{background:linear-gradient(90deg,#1a1f71,#f759a7)}
.hot-im{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(160deg,#fff6ef,#f2f5fa)}
.hot-im img{width:100%;height:100%;object-fit:cover;display:block}
.hot-rk{position:absolute;left:9px;top:11px;padding:4px 10px;border-radius:8px;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.03em;box-shadow:0 4px 10px rgba(0,0,0,.28)}
[data-hotp=tiktok] .hot-rk{background:#fe2c55}
[data-hotp=shopee] .hot-rk{background:#ee4d2d}
[data-hotp=lazada] .hot-rk{background:#1a1f71}
.hot-grid .hot:nth-child(1) .hot-rk{background:linear-gradient(135deg,#ff8a1f,#ff5a00)}
.hot-nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:12px 13px 0;font-size:13px;line-height:1.55;color:var(--ink);font-weight:400}
.hot-pr{margin:7px 13px 0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--o-d);
  font-family:"IBM Plex Mono",monospace}
.hot-d{display:flex;gap:10px;margin:10px 10px 11px;padding:9px 10px;border-radius:10px;background:var(--wash)}
.hot-d>div{flex:1 1 0;min-width:0}
.hot-d dt{margin:0;font-size:10.5px;color:var(--mute);white-space:nowrap}
.hot-d dd{margin:1px 0 0;font-size:13.5px;font-weight:600;font-family:"IBM Plex Mono",monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-d>div:first-child dd{color:#0bab57}
.hot-d dd small{font-weight:400;color:var(--mute);font-size:11px}
@media (max-width:560px){ .hot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .hot-nm{font-size:12.5px} }

/* ======================================================================
   แบบร่าง 4  ชุดสีสัน  (11 ต.ค. 2569)
   ★ ส้มยังเป็นสีหลัก ★ สีอื่นเป็นแค่สีคั่นของไอคอน ป้ายหมวด และเส้นหัวการ์ด
   เอาไว้ไล่สายตาเหมือนหน้า kalodata ไม่ได้เอามาทำพื้นใหญ่ ๆ
   ====================================================================== */
:root{ --c1:#ff5a00; --c2:#2563eb; --c3:#0bab57; --c4:#8b5cf6; --c5:#ec4899; --c6:#0891b2; }

/* ---- ไอคอนคำถามในกล่อง AI  ไล่สีทีละใบ ---- */
.qs .q:nth-child(1) i{background:rgba(255,90,0,.2);color:#ff9a4d}
.qs .q:nth-child(2) i{background:rgba(37,99,235,.24);color:#8ab4ff}
.qs .q:nth-child(3) i{background:rgba(11,171,87,.22);color:#5fe0a0}
.qs .q:nth-child(4) i{background:rgba(236,72,153,.22);color:#ff9ac8}

/* ---- แถบตัวเลข  ใส่เส้นสีหัวช่องกับเลขไล่สี ---- */
.nums .wrap > div{position:relative;padding-top:22px}
.nums div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.nums .wrap > div:nth-child(1)::before{background:linear-gradient(90deg,#ff8a1f,#ff5a00)}
.nums .wrap > div:nth-child(2)::before{background:linear-gradient(90deg,#60a5fa,#2563eb)}
.nums .wrap > div:nth-child(3)::before{background:linear-gradient(90deg,#34d399,#0bab57)}
.nums .wrap > div:nth-child(4)::before{background:linear-gradient(90deg,#c4b5fd,#8b5cf6)}
.nums b{-webkit-background-clip:text;background-clip:text;color:transparent}
.nums .wrap > div:nth-child(1) b{background-image:linear-gradient(120deg,#ff8a1f,#ff5a00)}
.nums .wrap > div:nth-child(2) b{background-image:linear-gradient(120deg,#60a5fa,#1b429c)}
.nums .wrap > div:nth-child(3) b{background-image:linear-gradient(120deg,#34d399,#07894a)}
.nums .wrap > div:nth-child(4) b{background-image:linear-gradient(120deg,#a78bfa,#6d28d9)}

/* ---- ป้ายหมวด  เปลี่ยนสีได้รายหมวด ---- */
.tag.t-b{background:#e8f0ff;color:#1b429c}
.tag.t-g{background:#e4f8ee;color:#07894a}
.tag.t-v{background:#f1ebff;color:#6d28d9}
.tag.t-p{background:#ffe9f3;color:#be1d64}

/* ---- การ์ดบริการ  ไอคอนคนละสี + เส้นสีโผล่ตอนชี้ ---- */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.card:hover::before{transform:scaleX(1)}
.card:nth-child(1) i{background:#fff1e6;color:#ff5a00} .card:nth-child(1)::before{background:linear-gradient(90deg,#ff8a1f,#ff5a00)}
.card:nth-child(2) i{background:#e8f0ff;color:#2563eb} .card:nth-child(2)::before{background:linear-gradient(90deg,#60a5fa,#2563eb)}
.card:nth-child(3) i{background:#e4f8ee;color:#0bab57} .card:nth-child(3)::before{background:linear-gradient(90deg,#34d399,#0bab57)}
.card:nth-child(4) i{background:#f1ebff;color:#8b5cf6} .card:nth-child(4)::before{background:linear-gradient(90deg,#c4b5fd,#8b5cf6)}
.card:nth-child(5) i{background:#ffe9f3;color:#ec4899} .card:nth-child(5)::before{background:linear-gradient(90deg,#f9a8d4,#ec4899)}
.card:nth-child(6) i{background:#e0f6fb;color:#0891b2} .card:nth-child(6)::before{background:linear-gradient(90deg,#67e8f9,#0891b2)}

/* ---- การ์ดวิธีขนส่ง  ป้ายมุมรูป ---- */
.pc{position:relative}
.pc .pcb{position:absolute;left:12px;top:12px;z-index:2;padding:5px 12px;border-radius:99px;
  font-size:11.5px;font-weight:600;color:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.pc:nth-child(1) .pcb{background:linear-gradient(120deg,#ff8a1f,#ff5a00)}
.pc:nth-child(2) .pcb{background:linear-gradient(120deg,#38bdf8,#1b429c)}
.pc:nth-child(3) .pcb{background:linear-gradient(120deg,#a78bfa,#6d28d9)}
.pc dd.mono{color:var(--o-d)}

/* ---- แถบโปรโมชัน  พื้นรูป AI ส้มสด  กลางภาพโล่งไว้ให้ข้อความ ---- */
.promo{padding:0 0 10px;margin-top:-18px}
.promo .in{position:relative;overflow:hidden;border-radius:22px;padding:42px 36px;min-height:216px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:url("/bm/img/hm_band.webp") center 82%/cover no-repeat,
             linear-gradient(118deg,#ff6a14,#ff8a1f 52%,#ffb061);
  box-shadow:0 26px 54px -30px rgba(255,90,0,.75)}
.promo .in::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,86,0,.94) 4%,rgba(255,108,16,.76) 44%,rgba(255,138,31,.34) 86%)}
.promo .tx{position:relative;flex:1 1 440px;min-width:0;color:#fff}
.promo .pb{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:99px;
  background:rgba(255,255,255,.24);font-size:12px;font-weight:600;backdrop-filter:blur(4px)}
.promo h2{margin:11px 0 0;font-size:clamp(21px,2.5vw,29px);line-height:1.36;letter-spacing:-.022em;
  font-weight:700;color:#fff}
.promo p{margin:8px 0 0;font-size:15px;color:rgba(255,255,255,.92)}
.promo .ac{position:relative;flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap}
.promo .b-w{background:#fff;color:var(--o-d);box-shadow:0 4px 0 #c93d00,0 12px 24px rgba(120,40,0,.3)}
.promo .b-w:hover{background:#fff6ef;transform:translateY(-1px)}
.promo .b-w:active{transform:translateY(3px);box-shadow:0 1px 0 #c93d00}
/* ปุ่มรองอยู่บนรูปสว่าง ต้องมีพื้นทึบพอ ไม่งั้นตัวหนังสือขาวจมหาย */
.promo .b-gh{background:rgba(176,52,0,.46);color:#fff;border:1px solid rgba(255,255,255,.72);
  backdrop-filter:blur(3px)}
.promo .b-gh:hover{background:rgba(176,52,0,.66)}

/* ---- สี่ขั้นตอน  ใส่รูปประกอบกับสีประจำขั้น ---- */
.steps{gap:18px}
.step{position:relative;padding:0 0 18px;border-top:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff;transition:.15s}
.step:hover{border-color:#c7cdd7;box-shadow:0 20px 44px -28px rgba(13,17,23,.4);transform:translateY(-2px)}
.step:last-child{border-top-color:var(--line)}
.step .sim{display:grid;place-items:center;height:132px;overflow:hidden}
/* ★ ล็อกสูงเป็นพิกเซล ★ height:100% ในช่อง grid หาความสูงไม่เจอ รูปจะกางเท่าความกว้างการ์ด (เจอมาแล้ว) */
.step .sim img{display:block;height:118px;width:auto;max-width:92%;object-fit:contain}
.step b{position:absolute;left:12px;top:12px;z-index:2;margin:0;padding:4px 11px;border-radius:99px;
  font-size:11.5px;font-weight:600;color:#fff}
.step h3{margin:6px 16px 4px}
.step p{margin:0 16px}
.step:nth-child(1){background:linear-gradient(180deg,#fff4ec,#fff 58%)} .step:nth-child(1) b{background:linear-gradient(120deg,#ff8a1f,#ff5a00)}
.step:nth-child(2){background:linear-gradient(180deg,#eef4ff,#fff 58%)} .step:nth-child(2) b{background:linear-gradient(120deg,#60a5fa,#2563eb)}
.step:nth-child(3){background:linear-gradient(180deg,#eafaf2,#fff 58%)} .step:nth-child(3) b{background:linear-gradient(120deg,#34d399,#0bab57)}
.step:nth-child(4){background:linear-gradient(180deg,#f6f0ff,#fff 58%)} .step:nth-child(4) b{background:linear-gradient(120deg,#a78bfa,#7c3aed)}

/* ---- คำถามพบบ่อย  เปิดอยู่ให้มีแถบส้ม ---- */
.faq details[open]{background:linear-gradient(90deg,#fff8f3,#fff 42%);box-shadow:inset 3px 0 0 var(--o)}
.faq details[open] summary{color:var(--o-d)}

/* ---- แถบที่มาของตัวเลขใต้สินค้าฮิต  (แทน .hot-note เดิม) ---- */
.hot-src{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 0;padding:16px 18px;
  border-radius:16px;border:1px solid #ffd9bf;
  background:linear-gradient(118deg,#fff6ef,#fff1e6 48%,#ffeaf3)}
.hot-src>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,#ff8a1f,#ff5a00);color:#fff;
  box-shadow:0 8px 18px -8px rgba(255,90,0,.9)}
.hot-src>i svg{width:21px;height:21px}
.hot-src .tx{flex:1 1 340px;min-width:0}
.hot-src .tx b{display:block;font-size:14.5px;font-weight:600;line-height:1.55}
.hot-src .tx b u{text-decoration:none;color:var(--o-d);font-size:16px}
.hot-src .tx span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink2);line-height:1.6}
.hot-src .btn{flex:none}
@media (max-width:620px){ .hot-src{padding:14px} .hot-src .btn{width:100%} }

/* ---- กล่องปิดท้าย  ใส่รูปส้มเป็นพื้น ---- */
.cta .box{background:#ff5a00 url("/bm/img/hm_band.webp") center 88%/cover no-repeat}
.cta .box::before{background:linear-gradient(168deg,rgba(255,112,22,.84),rgba(193,50,0,.93))}
.cta .box small{color:rgba(255,255,255,.8)}
.cta .box p{color:rgba(255,255,255,.93)}
.cta .box .b-o{background:#fff;color:var(--o-d);box-shadow:0 4px 0 #a83200,0 12px 26px rgba(90,26,0,.4)}
.cta .box .b-o:hover{background:#fff6ef}
.cta .box .b-o:active{box-shadow:0 1px 0 #a83200}
.cta .box .b-line{border-color:rgba(255,255,255,.62)}

@media (max-width:860px){
  .promo .in{padding:26px 20px}
  .promo .ac{flex:1 1 100%}
  .promo .ac .btn{flex:1 1 100%}
}

/* ======================================================================
   ภาพรวมตลาด  แบบแผงหมวดของ kalodata
   ข้อมูลจริงจาก pt_mf_cat (งานดึงของระบบ margin) ★ หน้าเว็บไม่เรียก API เอง ★
   ====================================================================== */
.catsec{background:
  radial-gradient(60% 90% at 8% 0%,#fff3ea,transparent 62%),
  radial-gradient(56% 86% at 96% 10%,#f2ecff,transparent 60%),
  radial-gradient(70% 70% at 60% 100%,#e9f7ff,transparent 64%),#fff}
.catsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px;margin:0 0 26px}
.catsum div{position:relative;padding:18px 18px 16px;border-radius:16px;background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 40px -32px rgba(13,17,23,.6);overflow:hidden}
.catsum div::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px}
.catsum div:nth-child(1)::before{background:linear-gradient(90deg,#ff8a1f,#ff5a00)}
.catsum div:nth-child(2)::before{background:linear-gradient(90deg,#60a5fa,#2563eb)}
.catsum div:nth-child(3)::before{background:linear-gradient(90deg,#34d399,#0bab57)}
.catsum b{display:block;font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.2;
  font-family:"IBM Plex Mono",monospace;-webkit-background-clip:text;background-clip:text;color:transparent}
.catsum div:nth-child(1) b{background-image:linear-gradient(120deg,#ff8a1f,#ff5a00)}
.catsum div:nth-child(2) b{background-image:linear-gradient(120deg,#60a5fa,#1b429c)}
.catsum div:nth-child(3) b{background-image:linear-gradient(120deg,#34d399,#07894a)}
.catsum span{display:block;margin-top:3px;font-size:12.5px;color:var(--mute)}

.cats{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));gap:9px}
.cats li{display:grid;grid-template-columns:30px minmax(0,1fr) 104px 74px;align-items:center;gap:12px;
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:.15s}
.cats li:hover{border-color:#c7cdd7;box-shadow:0 16px 34px -26px rgba(13,17,23,.5);transform:translateY(-1px)}
.cats i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-style:normal;
  font-size:12px;font-weight:700;color:#fff;font-family:"IBM Plex Mono",monospace}
.cats .nm{min-width:0}
.cats .nm b{display:block;font-size:13.5px;font-weight:600;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cats .bar{display:block;height:5px;margin-top:5px;border-radius:99px;background:#eef1f6;overflow:hidden}
.cats .bar em{display:block;height:100%;border-radius:99px}
.cats .rv{text-align:right;font-size:13.5px;font-weight:600;font-family:"IBM Plex Mono",monospace;
  letter-spacing:-.01em;white-space:nowrap}
.cats .gw{justify-self:end;display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:600;font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.cats .gw.up{background:#e4f8ee;color:#07894a}
.cats .gw.dn{background:#ffe9ec;color:#c81e3a}
.cats .gw.fl{background:var(--wash);color:var(--mute)}
.cat-note{margin:18px 0 0;font-size:12.5px;color:var(--mute)}
@media (max-width:560px){
  .cats li{grid-template-columns:26px minmax(0,1fr) 72px;gap:9px;padding:10px}
  .cats .gw{grid-column:2 / -1;justify-self:start;margin-top:2px}
  .cats .rv{font-size:12.5px}
}

/* ป้ายเปอร์เซ็นต์โตบนรูปสินค้า  ข้อมูลจริงจากคอลัมน์ growth */
.hot-gw{position:absolute;right:9px;top:11px;padding:4px 9px;border-radius:8px;
  font-size:11px;font-weight:700;font-family:"IBM Plex Mono",monospace;
  box-shadow:0 4px 10px rgba(0,0,0,.22)}
.hot-gw.up{background:#0bab57;color:#fff}
.hot-gw.dn{background:#fff;color:#c81e3a}

/* ======================================================================
   ฉากพื้นหลังรายหมวด  (รูปให้ AI วาด  อยู่ที่ /bm/img/hm_*.webp)
   ชั้นบนสุดเป็นฝ้าขาวเสมอ เพื่อให้ตัวหนังสือดำกับการ์ดขาวยังอ่านออก
   ชั้นถัดมาเป็นวงสีจาง ๆ ไว้เติมสีสันแบบ kalodata
   ชั้นล่างสุดคือรูปจริง
   ====================================================================== */
.hotsec{background:
  radial-gradient(42% 56% at 97% 4%,rgba(236,72,153,.17),transparent 64%),
  radial-gradient(40% 52% at 2% 94%,rgba(37,99,235,.15),transparent 64%),
  linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.93)),
  url("/bm/img/hm_hot.webp") center/cover no-repeat,#fff}

#feature.sec-alt{background:
  radial-gradient(38% 52% at 4% 8%,rgba(139,92,246,.15),transparent 64%),
  linear-gradient(90deg,rgba(246,248,251,.94) 44%,rgba(246,248,251,.72) 100%),
  url("/bm/img/hm_services.webp") right center/cover no-repeat,var(--wash)}

#ship{background:
  radial-gradient(44% 48% at 6% 2%,rgba(8,145,178,.14),transparent 62%),
  linear-gradient(180deg,rgba(255,255,255,.96) 54%,rgba(255,255,255,.74) 100%),
  url("/bm/img/hm_shipping.webp") center bottom/cover no-repeat,#fff}

#how{background:
  radial-gradient(40% 52% at 98% 92%,rgba(255,90,0,.15),transparent 64%),
  linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.95)),
  url("/bm/img/hm_four_steps.webp") center/cover no-repeat,#fff}

#gal.sec-alt{background:
  radial-gradient(40% 54% at 96% 6%,rgba(11,171,87,.15),transparent 64%),
  linear-gradient(90deg,rgba(246,248,251,.74) 0%,rgba(246,248,251,.95) 46%),
  url("/bm/img/hm_warehouse.webp") left center/cover no-repeat,var(--wash)}

/* หมวดคำถามพบบ่อย  ไม่ใส่รูป ใช้แค่วงสีจาง ไม่งั้นหน้ารกเกิน */
#faq{background:
  radial-gradient(44% 56% at 4% 4%,rgba(37,99,235,.11),transparent 64%),
  radial-gradient(40% 52% at 97% 96%,rgba(255,90,0,.13),transparent 64%),#fff}

/* ======================================================================
   แถบแพลตฟอร์ม  ซื้อจากจีน / ขายในไทย
   ====================================================================== */
.plats{border-bottom:1px solid var(--line);background:
  linear-gradient(100deg,#fff7f1,#fff 38%,#f4f8ff 100%)}
.plats .wrap{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;padding-top:17px;padding-bottom:17px}
.plats .grp{display:flex;align-items:center;gap:11px;flex-wrap:wrap;min-width:0}
.plats .lb{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--mute);white-space:nowrap}
.plats .sep{width:1px;height:26px;background:var(--line);flex:none}
.pl{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 7px;border-radius:99px;
  background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px -3px rgba(13,17,23,.3)}
.pl img,.pl i{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;flex:none;font-style:normal}
.pl img{object-fit:contain}
.pl i svg{width:15px;height:15px}
.pl b{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pl-1688 b{color:#f60} .pl-tb b{color:#ff4400} .pl-tm b{color:#e60012}
.pl-tk i{background:#0d1117;color:#fff} .pl-tk b{color:#0d1117}
.pl-sp i{background:#ee4d2d;color:#fff}  .pl-sp b{color:#ee4d2d}
.pl-lz i{background:linear-gradient(135deg,#0f146d,#f759a7);color:#fff} .pl-lz b{color:#1a1f71}
@media (max-width:760px){ .plats .sep{display:none} .plats .wrap{gap:10px 14px} }

/* ======================================================================
   บล็อก  วิเคราะห์ตลาด คิดต้นทุน รู้กำไร แล้วค่อยยิงแอด
   ====================================================================== */
.adssec{position:relative;overflow:hidden;color:#fff;padding:66px 0 70px;
  background:url("/bm/img/hm_ads.webp") center 84%/cover no-repeat,#ff5a00}
.adssec::before{content:"";position:absolute;inset:0;
  background:linear-gradient(166deg,rgba(255,106,16,.9) 4%,rgba(226,66,0,.86) 56%,rgba(176,44,0,.9) 100%)}
.adssec .wrap{position:relative;z-index:2}
.adssec .sh{max-width:46em;margin:0 auto 30px;text-align:center}
.adssec .tag{background:rgba(255,255,255,.22);color:#fff}
.adssec .tag b{background:#fff}
.adssec h2{margin:13px 0 0;color:#fff;font-size:clamp(24px,3vw,35px);line-height:1.32;
  letter-spacing:-.026em;font-weight:700}
.adssec h2 em{font-style:normal;display:inline-block;padding:0 10px;border-radius:10px;
  background:#fff;color:var(--o-d)}
.adssec .sh p{margin:13px 0 0;color:rgba(255,255,255,.92);font-size:16px}

.ads3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px}
.ads3 article{display:flex;flex-direction:column;padding:20px 20px 22px;border-radius:18px;background:#fff;
  color:var(--ink);box-shadow:0 22px 46px -26px rgba(96,26,0,.7)}
.ads3 .im{display:grid;place-items:center;height:104px;margin:-4px 0 8px;overflow:hidden}
.ads3 .im img{display:block;height:100px;width:auto;max-width:92%;object-fit:contain}
.ads3 h3{margin:0 0 5px;font-size:16.5px;font-weight:600}
.ads3 p{margin:0;font-size:14px;color:var(--ink2);line-height:1.75}
.ads3 ul{list-style:none;margin:12px 0 0;padding:13px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px}
.ads3 li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink2)}
.ads3 li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  background:var(--o-w) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d94400' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px 10px no-repeat}
.ads-do{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.ads-do .b-w{background:#fff;color:var(--o-d);box-shadow:0 4px 0 #a83200,0 12px 26px rgba(90,26,0,.42)}
.ads-do .b-w:hover{background:#fff6ef;transform:translateY(-1px)}
.ads-do .b-w:active{transform:translateY(3px);box-shadow:0 1px 0 #a83200}
.ads-do .b-gh{background:rgba(150,38,0,.4);color:#fff;border:1px solid rgba(255,255,255,.66)}
.ads-do .b-gh:hover{background:rgba(150,38,0,.62)}
.ads-note{margin:18px 0 0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.78)}
@media (max-width:560px){ .ads-do .btn{flex:1 1 100%} }

/* ตัวเปลี่ยนภาษาบนแถบบน  ตัวแปลทั้งหน้าเป็นของกลาง dashboard/inc/lang.php
   ★ ต้องมี data-no-tr ★ ไม่งั้นชื่อภาษาในเมนูโดนแปลตามไปด้วย อ่านไม่รู้เรื่อง */
.lgp{position:relative;flex:none}
.lgp>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-size:13.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.lgp>summary::-webkit-details-marker{display:none}
.lgp>summary:hover{border-color:#c7cdd7;background:var(--wash)}
.lgp>summary svg{width:16px;height:16px;flex:none;color:var(--o)}
/* ★ ไม่เอาลูกศร ★ เจ้าของสั่ง 12 ต.ค. 2569  จอแคบซ่อนชื่อภาษาอยู่แล้ว
   เหลือลูกโลกกับลูกศรติดกันดูรก  ลูกโลกบอกอยู่แล้วว่าเป็นปุ่มเปลี่ยนภาษา */
.lgp>summary::after{content:none}
.lgp-l{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:268px;padding:8px;
  border-radius:14px;background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 56px -24px rgba(13,17,23,.5);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.lgp-l b{grid-column:1 / -1;padding:4px 10px 6px;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lgp-l a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  font-size:13.5px;color:var(--ink2);text-decoration:none;white-space:nowrap;overflow:hidden}
.lgp-l a:hover{background:var(--o-w);color:var(--o-d)}
.lgp-l a.on{background:var(--o);color:#fff}
.lgp-l a i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  font-family:"IBM Plex Mono",monospace;opacity:.65}
@media (max-width:980px){ .lgp>summary span{display:none} .lgp>summary{padding:0 9px} }

/* ======================================================================
   สไลด์ป้ายโฆษณา  เต็มความกว้างจอ
   ★ ห้ามเอาไปใส่ใน .wrap ★ ต้องเต็มจอ ส่วนข้อความค่อยจำกัดความกว้างข้างใน
   รูปพื้นวาดให้ของอยู่ขวา ซ้ายโล่ง แล้วทับฝ้าสีประจำสไลด์ไล่จากซ้าย
   ★ ข้อความไม่ได้อยู่ในรูป ★ ตัวแปลทั้งหน้าจึงแปลสไลด์ได้ด้วย
   ====================================================================== */
.slid{position:relative;overflow:hidden;background:#0d1117;
  border-bottom:1px solid rgba(255,255,255,.08)}
.sl-track{display:flex;transition:transform .5s cubic-bezier(.4,.1,.2,1);will-change:transform}
/* ★ แถบเตี้ย ★ เจ้าของสั่ง "ไม่ต้องให้กรอบสูงมาก"  ของ kalodata สูงแค่ร้อยกว่า
   ข้อความกับปุ่มจึงวางเรียงแนวนอน ไม่ใช่ซ้อนกันลงมาเหมือนเดิม */
.sl{position:relative;flex:0 0 100%;min-width:100%;min-height:150px;display:flex;align-items:center;
  color:#fff;background-position:center right;background-size:cover;background-repeat:no-repeat}
.sl::before{content:"";position:absolute;inset:0}
.sl-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:18px 66px;
  display:flex;align-items:center;gap:26px}
.sl .tx{min-width:0;flex:1 1 auto}
.sl .st{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;
  background:rgba(255,255,255,.26);font-size:11.5px;font-weight:600;backdrop-filter:blur(4px)}
.sl h2{margin:7px 0 0;max-width:17em;font-size:clamp(19px,2.2vw,27px);line-height:1.3;
  letter-spacing:-.026em;font-weight:700;color:#fff}
.sl p{margin:5px 0 0;max-width:40em;font-size:13.5px;color:rgba(255,255,255,.88);line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl .btn{flex:none;background:#fff;color:#0d1117;
  box-shadow:0 4px 0 rgba(0,0,0,.3),0 12px 24px rgba(0,0,0,.3)}
.sl .btn:hover{background:#f6f8fb;transform:translateY(-1px)}
.sl .btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}

.sl-ar{position:absolute;top:50%;z-index:5;display:grid;place-items:center;width:40px;height:40px;
  margin-top:-20px;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;
  backdrop-filter:blur(6px);box-shadow:0 6px 18px -6px rgba(0,0,0,.6);transition:.15s}
.sl-ar:hover{background:rgba(255,255,255,.92);transform:scale(1.06)}
.sl-ar svg{width:18px;height:18px;color:#fff}
.sl-ar:hover svg{color:#0d1117}
.sl-ar.pv{left:16px} .sl-ar.nx{right:16px}
.sl-dots{position:absolute;left:0;right:0;bottom:11px;z-index:5;display:flex;gap:6px;justify-content:center}
.sl-dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.45);transition:.18s}
.sl-dots button.on{width:24px;background:#fff}
@media (max-width:1100px){ .sl-in{padding:18px 58px} .sl p{display:none} }
@media (max-width:760px){
  .sl{min-height:0}
  .sl-in{display:block;padding:20px 20px 36px}
  .sl h2{max-width:none;font-size:19px}
  .sl p{display:block;margin-top:6px;white-space:normal;max-width:none;font-size:13px}
  .sl .btn{margin-top:14px;width:100%;justify-content:center}
  .sl-ar{display:none}
}

/* ฝ้าสีประจำสไลด์  ไล่จากทึบฝั่งซ้ายที่วางข้อความ ไปจางฝั่งขวาที่เป็นรูป */
.sl-ai::before{background:linear-gradient(96deg,#3b1f96 2%,#3b1f96dd 38%,#3b1f9644 72%,#3b1f9600 100%)}
.sl-market::before{background:linear-gradient(96deg,#0b4ea2 2%,#0b4ea2dd 38%,#0b4ea244 72%,#0b4ea200 100%)}
.sl-ship::before{background:linear-gradient(96deg,#bd3300 2%,#bd3300dd 38%,#bd330044 72%,#bd330000 100%)}
.sl-money::before{background:linear-gradient(96deg,#07794a 2%,#07794add 38%,#07794a44 72%,#07794a00 100%)}
.sl-qc::before{background:linear-gradient(96deg,#0b6b84 2%,#0b6b84dd 38%,#0b6b8444 72%,#0b6b8400 100%)}
.sl-deli::before{background:linear-gradient(96deg,#9c1152 2%,#9c1152dd 38%,#9c115244 72%,#9c115200 100%)}

/* ======================================================================
   บล็อก "ดูตลาด คิดต้นทุน รู้กำไร"  เปลี่ยนจากพื้นส้มเป็นพื้นสว่าง
   ★ ห้ามเป็นส้ม ★ เพราะท้ายหน้าเป็นส้มอยู่แล้ว สองก้อนติดกันแล้วหน้าทื่อ
   ====================================================================== */
.adssec{color:var(--ink);padding:74px 0 78px;background:
  radial-gradient(58% 80% at 4% 0%,#fff1e6,transparent 60%),
  radial-gradient(54% 76% at 98% 4%,#eaf1ff,transparent 58%),
  radial-gradient(64% 70% at 54% 102%,#f1ebff,transparent 62%),#fff}
.adssec::before{display:none}
.adssec .tag{background:var(--o-w);color:var(--o-d)}
.adssec .tag b{background:var(--ok)}
.adssec h2{color:var(--ink)}
.adssec h2 em{background:linear-gradient(120deg,#ff8a1f,#ff5a00);color:#fff;
  box-shadow:0 10px 24px -12px rgba(255,90,0,.9)}
.adssec .sh p{color:var(--ink2)}
.ads3 article{border:1px solid var(--line);box-shadow:0 22px 46px -34px rgba(13,17,23,.6);
  position:relative;overflow:hidden}
.ads3 article::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px}
.ads3 article:nth-child(1)::before{background:linear-gradient(90deg,#60a5fa,#2563eb)}
.ads3 article:nth-child(2)::before{background:linear-gradient(90deg,#ff8a1f,#ff5a00)}
.ads3 article:nth-child(3)::before{background:linear-gradient(90deg,#34d399,#0bab57)}
.ads-do .b-w{background:var(--o);color:#fff;box-shadow:0 4px 0 var(--o-d),0 12px 26px rgba(255,90,0,.38)}
.ads-do .b-w:hover{background:#ff6a14}
.ads-do .b-w:active{box-shadow:0 1px 0 var(--o-d)}
.ads-do .b-gh{background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ads-do .b-gh:hover{background:var(--wash);border-color:#c7cdd7}
.ads-note{color:var(--mute)}

/* ======================================================================
   ท้ายหน้าเต็มจอ   แถบชวนสมัคร + ท้ายหน้าพื้นเข้ม
   ★ เต็มความกว้างจอ ★ ไม่ใช่กล่องมุมมนลอยอยู่กลางหน้าแบบเดิม
   ====================================================================== */
/* สไลด์ที่เพิ่มทีหลัง  เลือกสีให้ไม่ซ้ำกับหกใบแรก */
.sl-ff::before{background:linear-gradient(96deg,#0b6353 2%,#0b6353dd 38%,#0b635344 72%,#0b635300 100%)}
.sl-studio::before{background:linear-gradient(96deg,#5b21b6 2%,#5b21b6dd 38%,#5b21b644 72%,#5b21b600 100%)}
.sl-sniper::before{background:linear-gradient(96deg,#141821 2%,#141821e0 38%,#14182155 72%,#14182100 100%)}
.sl-partner::before{background:linear-gradient(96deg,#06303a 2%,#06303add 38%,#06303a44 72%,#06303a00 100%)}

.ftcta{position:relative;overflow:hidden;color:#fff;text-align:center;padding:62px 0 66px;
  background:url("/bm/img/hm_band.webp") center 86%/cover no-repeat,#ff5a00}
.ftcta::before{content:"";position:absolute;inset:0;
  background:linear-gradient(168deg,rgba(255,112,22,.88) 2%,rgba(221,62,0,.9) 58%,rgba(168,42,0,.94) 100%)}
.ftcta .wrap{position:relative;z-index:2}
.ftcta h2{margin:0;font-size:clamp(24px,3vw,35px);line-height:1.32;letter-spacing:-.026em;
  font-weight:700;color:#fff}
.ftcta p{margin:13px auto 0;max-width:42em;font-size:16px;color:rgba(255,255,255,.93)}
.ftcta .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.ftcta .b-w{background:#fff;color:var(--o-d);box-shadow:0 4px 0 #a83200,0 12px 26px rgba(90,26,0,.44)}
.ftcta .b-w:hover{background:#fff6ef;transform:translateY(-1px)}
.ftcta .b-w:active{transform:translateY(3px);box-shadow:0 1px 0 #a83200}
.ftcta .b-gh{background:rgba(160,40,0,.38);color:#fff;border:1px solid rgba(255,255,255,.66)}
.ftcta .b-gh:hover{background:rgba(160,40,0,.6)}
.ftcta small{display:block;margin-top:17px;font-size:13px;color:rgba(255,255,255,.82)}

.ft{background:#0d1117;color:rgba(255,255,255,.66);font-size:14px}
.ft a{color:rgba(255,255,255,.66);text-decoration:none}
.ft a:hover{color:#fff}
.ft-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:30px 26px;
  padding:52px 0 40px}
.ft-br{display:flex;align-items:center;gap:11px;text-decoration:none}
.ft-br img{width:42px;height:42px;border-radius:10px}
.ft-br b{display:block;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.015em;line-height:1.2}
.ft-br i{font-style:normal;color:var(--o2)}
.ft-br em{font-style:normal;display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.ft-ab{margin:15px 0 0;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.56);max-width:30em}
.ft-so{display:flex;gap:9px;margin-top:16px}
.ft-so a{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);transition:.15s}
.ft-so a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.ft-so svg{width:18px;height:18px}
/* เป็น h3 ไม่ใช่ h4  หน้ามี h1 แล้ว h2 ถ้าข้ามไป h4 โปรแกรมอ่านหน้าจอไล่ลำดับหัวข้อผิด */
.ft-c h3{margin:0 0 13px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.44)}
.ft-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft-c li{font-size:14px;line-height:1.5}
.ft-c .nw{display:inline-flex;align-items:center;gap:6px}
.ft-c .nw::after{content:"ใหม่";padding:1px 7px;border-radius:99px;background:var(--o);color:#fff;
  font-size:10px;font-weight:700}
.ft-pl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.1)}
.ft-pl span{font-size:12px;color:rgba(255,255,255,.44);margin-right:4px}
.ft-pl .pl{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none}
.ft-pl .pl b{color:rgba(255,255,255,.86)}
.ft-bt{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:17px 0 26px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;color:rgba(255,255,255,.44)}
.ft-bt .lk{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:860px){
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;padding:40px 0 30px}
  .ft-br{grid-column:1 / -1}
  .ftcta .acts .btn{flex:1 1 100%}
}

/* ★ แถบบนจอเล็กล้น ★ พอเพิ่มปุ่มเลือกภาษาเข้าไป แบรนด์ + ภาษา + สมัคร + เบอร์เกอร์
   รวมกันกว้างเกิน 375px หน้าเลยเลื่อนซ้ายขวาได้ทั้งหน้า  ต้องหดทุกชิ้นพร้อมกัน */
@media (max-width:560px){
  .hd>.wrap{gap:4px;padding-left:14px;padding-right:14px}
  /* ★ บรรทัดใต้ชื่อต้องขึ้นบนมือถือด้วย ★ เจ้าของสั่ง 12 ต.ค. 2569  ของเดิมซ่อนไว้
   ข้อความยาวกว่าชื่อ จึงต้องยอมให้กล่องแบรนด์หดตัวได้ (flex:0 1 auto + min-width:0) แล้วตัดด้วยจุดไข่ปลา
   ไม่งั้นหัวเว็บจะกว้างเกินจอบนมือถือเล็ก */
  .brand{min-width:0;flex:0 1 auto}
  .brand img{width:33px;height:33px}
  .brand>span{min-width:0;overflow:hidden}
  /* ★ ห้ามใส่ text-overflow กับก้อนชื่อ ★ ชื่อแบรนด์ห้ามโดนตัด  ให้ตัดเฉพาะบรรทัดใต้ชื่อซึ่งยาวกว่า */
  .brand b{font-size:14.5px;white-space:nowrap}
  .brand em{display:block;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-sp{gap:6px}
  .hd-sp .b-sm{padding:0 11px;font-size:12.5px}
  .lgp>summary{padding:0 8px;gap:0}
  .burger{width:38px;height:38px}
}

/* ======================================================================
   แก้ตามที่เจ้าของสั่ง 11 ต.ค. 2569
   ====================================================================== */

/* ★ ไม่เอาขอบสีหัวการ์ด ★ เจ้าของบอก "ไม่เอาขอบสีๆ"
   สีสันให้ไปอยู่ที่ตัวเลข ไอคอน ชิป และป้ายแทน ไม่ใช่แถบสีบนขอบกล่อง */
.nums .wrap > div::before,
.catsum div::before,
.ads3 article::before,
.card::before,
.hot::before{display:none}
.nums .wrap > div{padding-top:22px}

/* ★ ป้ายส้มในหัวข้อเคยทับบรรทัดบน ★
   em เป็น inline-block มีพื้นหลัง กล่องมันสูงกว่าบรรทัด พอ line-height แคบเลยเบียดขึ้นไป
   ต้องให้มันลงบรรทัดของตัวเองแล้วเว้นระยะบนล่างให้พอ */
.adssec h2{line-height:1.42}
.adssec h2 em{display:inline-block;margin-top:10px;padding:5px 16px;border-radius:12px;
  line-height:1.4;vertical-align:middle}

/* ที่มาข้อมูลในหมวดภาพรวมตลาด */
.cat-src{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.cat-src span.lb{font-size:12px;color:var(--mute);margin-right:2px}

/* โลโก้ Shopee ใช้เส้นจริง  ตัวกล่องจึงต้องเป็นสีแบรนด์แล้ววางเส้นสีขาวทับ */
.pl-sp i svg{width:14px;height:14px}
.pl-lz i{background:none;box-shadow:none}
.pl-lz i img{width:22px;height:22px;object-fit:contain}
.ft-pl .pl-lz i{background:none}

/* ปุ่มคู่ใต้บล็อกยิงแอด  ให้ห่างขึ้นและหักบรรทัดเร็วขึ้น ไม่ให้ชนกัน */
.ads-do{gap:14px}
@media (max-width:700px){ .ads-do .btn{flex:1 1 100%} }

/* รูปสินค้าขายดีที่สุดของหมวด  วางหลังเลขอันดับ */
.cats li{grid-template-columns:28px 42px minmax(0,1fr) 104px 74px}
.cats .pic{display:block;width:42px;height:42px;border-radius:9px;overflow:hidden;flex:none;
  background:var(--wash);border:1px solid var(--line)}
.cats .pic img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){
  .cats li{grid-template-columns:24px 34px minmax(0,1fr) 72px}
  .cats .pic{width:34px;height:34px;border-radius:8px}
}

/* ======================================================================
   สไลด์  ใช้ป้ายที่ AI เขียนตัวหนังสือไทยมาในรูปแล้ว
   จอใหญ่   โชว์รูปอย่างเดียว ทั้งใบกดได้
   จอเล็ก   ซ่อนรูป เพราะย่อแล้วตัวหนังสือในรูปเล็กเกินอ่าน  เปลี่ยนไปใช้ข้อความ html
   ====================================================================== */
/* ★ อย่าให้แถบสูงเกิน ★ เจ้าของสั่ง "ไม่ต้องให้กรอบสูงมาก"
   รูปเป็น 3:1 จอ 1366 จะได้ 451px ซึ่งสูงไป เลยตัดบนล่างลงเหลือ 360
   ใช้ 100% auto ไม่ใช่ cover เพราะ cover จะไปตัดด้านข้าง ซึ่งเป็นที่อยู่ของตัวหนังสือ
   ตอนสั่งวาดบอกไว้แล้วว่าขอบบนล่าง 12% ต้องว่าง ตัดตรงนั้นจึงไม่โดนอะไร */
.sl{display:block;text-decoration:none;aspect-ratio:1824 / 608;min-height:0;max-height:360px;
  background-position:center;background-size:100% auto;background-repeat:no-repeat}
.sl::before{display:none}
.sl-in{display:none}
.sl-ai{background-image:url("/bm/img/bn_ai.webp")}
.sl-market{background-image:url("/bm/img/bn_market.webp")}
.sl-ship{background-image:url("/bm/img/bn_ship.webp")}
.sl-money{background-image:url("/bm/img/bn_money.webp")}
.sl-qc{background-image:url("/bm/img/bn_qc.webp")}
.sl-deli{background-image:url("/bm/img/bn_deli.webp")}
.sl-ff{background-image:url("/bm/img/bn_ff.webp")}
.sl-studio{background-image:url("/bm/img/bn_studio.webp")}
.sl-sniper{background-image:url("/bm/img/bn_sniper.webp")}
.sl-partner{background-image:url("/bm/img/bn_partner.webp?v=5")}
@media (max-width:760px){
  .sl{background-image:none;aspect-ratio:auto;min-height:0}
  .sl::before{display:block;inset:0}
  .sl-in{display:block;padding:22px 20px 38px}
  .sl h2{max-width:none;font-size:19px}
  .sl p{display:block;margin-top:6px;white-space:normal;max-width:none;font-size:13px}
  .sl .btn{margin-top:14px;width:100%;justify-content:center}
}

/* ======================================================================
   กล่องช่องทางติดตาม  ยกมาจาก bm/css/ptcargo-home.css ทั้งบล็อก
   ★ อย่าแก้ที่นี่ ★ ของจริงอยู่ไฟล์นั้น ที่นี่เป็นแค่สำเนาสำหรับหน้าแบบร่าง
   ====================================================================== */
.hm-so-wrap{padding-top:0}
.hm-so-wrap .hm-so{max-width:1180px;margin:0 auto}
/* ==========================================================================
   กล่องช่องทางติดตาม PTCARGO บนหน้าแรก  TikTok · LINE · Facebook (11 ต.ค. 2569)
   พื้นดำสไตล์ TikTok  ตั้งใจให้ต่างจากการ์ดอื่นของหน้าแรก เพราะเป็นของนอกบ้าน
   ตัววาด dashboard/inc/pt_home_social.php
   ========================================================================== */
.hm-so{position:relative;display:flex;align-items:center;gap:30px;overflow:hidden;
	margin:0 0 14px;padding:26px 30px;border-radius:18px;background:#0f0f10;color:#fff}
.hm-so::before{content:"";position:absolute;left:-90px;top:-90px;width:300px;height:300px;
	border-radius:50%;background:#25f4ee;opacity:.13;pointer-events:none}
.hm-so::after{content:"";position:absolute;right:120px;bottom:-120px;width:290px;height:290px;
	border-radius:50%;background:#fe2c55;opacity:.15;pointer-events:none}
.hm-so-t{position:relative;z-index:2;flex:1 1 auto;min-width:0}
.hm-so-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 9px;
	border-radius:99px;background:rgba(255,255,255,.1);font-size:12px;font-weight:600}
.hm-so-chip svg{width:15px;height:15px}
.hm-so h2{margin:12px 0 6px;font-size:25px;font-weight:700;line-height:1.35;color:#fff}
.hm-so h2 em{font-style:normal;color:#ff8a3d}
.hm-so p{margin:0 0 16px;font-size:13.5px;color:#b9bcc2;max-width:430px}

/* รายการช่องทาง  แถวละช่อง  ปุ่มอยู่ท้ายแถว มีได้มากกว่าหนึ่งปุ่ม */
.hm-so-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
	max-width:460px}
.hm-so-l li{display:flex;align-items:center;gap:12px;padding:9px 10px 9px 9px;
	border-radius:14px;background:rgba(255,255,255,.07)}
.hm-so-ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
	border-radius:12px;background:#fff;color:#0f0f10}
.hm-so-ic svg{width:21px;height:21px}
.hm-so-l .is-line .hm-so-ic{background:#06c755;color:#fff}
.hm-so-l .is-facebook .hm-so-ic{background:#1877f2;color:#fff}
.hm-so-nm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.hm-so-nm b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-so-nm small{font-size:11.5px;color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ป้ายสถานะการเชื่อมแจ้งเตือน  ยกมาจากการ์ดไลน์เขียวเดิม */
.hm-so-tag{align-self:flex-start;margin-top:3px;padding:2px 9px;border-radius:99px;
	background:rgba(255,255,255,.14);font-style:normal;font-size:10.5px;font-weight:600;color:#ffd79a;
	white-space:nowrap}
.hm-so-tag.is-ok{background:rgba(6,199,85,.22);color:#7ff0b0}
/* ปุ่มท้ายแถว  ★ ต้องเป็นคอลัมน์ ★ สองปุ่มเรียงข้างกันแล้วแถวยาวเกินบนจอแคบ */
.hm-so-act{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:5px}
.hm-so-act .lcta-on{display:flex;flex-direction:column;gap:5px}
.hm-so-cta,.hm-so-cta2{display:block;padding:7px 15px;border-radius:99px;
	font-size:12.5px;font-weight:600;white-space:nowrap;text-align:center;text-decoration:none;color:#fff}
.hm-so-cta{background:#fe2c55}
.hm-so-cta:hover{background:#e31f46;color:#fff}
.hm-so-cta2{background:rgba(255,255,255,.16)}
.hm-so-cta2:hover{background:rgba(255,255,255,.28);color:#fff}
.hm-so-l .is-line .hm-so-cta{background:#06c755}
.hm-so-l .is-line .hm-so-cta:hover{background:#05a648}
.hm-so-l .is-facebook .hm-so-cta{background:#1877f2}
.hm-so-l .is-facebook .hm-so-cta:hover{background:#1263cf}

/* กรอบมือถือ */
.hm-so-ph{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center;gap:12px}
.hm-so-dev{position:relative;width:190px;height:352px;padding:7px;border-radius:30px;
	background:#000;box-shadow:0 18px 40px -18px rgba(0,0,0,.75),0 0 0 1px #2a2a2d inset;
	transform:rotate(5deg)}
.hm-so-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:5;
	width:58px;height:15px;border-radius:99px;background:#000}
.hm-so-scr{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;
	background:#17171a}
/* ★ ตัวเล่นของ TikTok มีความกว้างขั้นต่ำของตัวเอง (ราว 325px) ★
   ยัดใส่จอมือถือกว้าง 176px ตรง ๆ ไม่ได้ มันจะดันจนมีแถบเลื่อนและคลิปโดนตัดข้าง
   จึงให้ iframe กางเต็มขนาดที่มันต้องการก่อน แล้วค่อยย่อทั้งก้อนด้วย transform
   176 / 325 = 0.5415   สูง 700 ย่อแล้วได้ 379 ซึ่งสูงกว่าจอ 338 พอดี
   ส่วนเกินด้านล่างคือแถบชื่อช่องของ TikTok ตั้งใจให้ล้นออกนอกจอไป เหลือแต่ตัวคลิป */
.hm-so-scr iframe{display:block;border:0;position:absolute;left:0;top:0;
	width:325px;height:700px;transform:scale(.5415);transform-origin:top left}
.hm-so-cover{display:block;width:100%;height:100%;padding:0;border:0;position:relative;
	background:#17171a;cursor:pointer}
.hm-so-cover img{display:block;width:100%;height:100%;object-fit:cover}
.hm-so-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
	background:rgba(0,0,0,.45);box-shadow:0 0 0 2px rgba(255,255,255,.75) inset}
.hm-so-play svg{width:22px;height:22px;margin-left:3px;color:#fff}
.hm-so-cover:hover .hm-so-play{background:#fe2c55;box-shadow:none}
.hm-so-cap{position:absolute;left:10px;right:10px;bottom:12px;text-align:left;
	color:#fff;font-size:11px;line-height:1.45;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.hm-so-cap b{display:-webkit-box;font-weight:400;font-size:10.5px;opacity:.9;
	overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* ภาพหน้าช่องจริงที่แคปไว้  ใช้ตอนที่ยังไม่มีปกคลิป */
.hm-so-shot{position:absolute;inset:0;display:block;text-decoration:none}
.hm-so-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.hm-so-shot-c{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
	justify-content:center;gap:7px;padding:26px 10px 14px;color:#fff;font-size:12.5px;font-weight:600;
	background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.55) 55%,transparent)}
.hm-so-shot-c svg{width:16px;height:16px}
.hm-so-shot:hover .hm-so-shot-c{color:#fff;background:linear-gradient(to top,#fe2c55,rgba(254,44,85,.5) 55%,transparent)}
/* จอมือถือตอนกำลังโหลดตัวเล่นของ TikTok  ภาพรองกันจอวาบขาว */
.hm-so-live{position:absolute;inset:0;background:#17171a}
.hm-so-ph-img{position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;object-position:top;opacity:.55}
.hm-so-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	display:flex;gap:5px}
.hm-so-load i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.35;
	animation:hmSoBlink 1.1s infinite}
.hm-so-load i:nth-child(2){animation-delay:.18s}
.hm-so-load i:nth-child(3){animation-delay:.36s}
@keyframes hmSoBlink{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .hm-so-load i{animation:none;opacity:.6} }
/* รูปเล็กสลับคลิป ตอนที่ยังไม่มีรูปปก  ใช้เลขลำดับแทน */
.hm-so-dot b{display:grid;place-items:center;width:100%;height:100%;
	color:#fff;font-size:14px;font-weight:700}
.hm-so-blank{position:absolute;inset:0;display:flex;flex-direction:column;
	align-items:center;justify-content:center;gap:8px;color:#fff;text-decoration:none}
.hm-so-blank:hover{color:#fff;background:rgba(255,255,255,.05)}
.hm-so-blank svg{width:40px;height:40px;opacity:.9}
.hm-so-blank b{font-size:15px}
.hm-so-blank i{font-style:normal;font-size:11.5px;color:#9aa0a6}

/* แถบเลือกคลิป */
.hm-so-dots{display:flex;flex-direction:column;gap:8px}
.hm-so-dot{width:40px;height:56px;padding:0;border:2px solid transparent;border-radius:9px;
	overflow:hidden;background:#2a2a2d;cursor:pointer;opacity:.6}
.hm-so-dot img{display:block;width:100%;height:100%;object-fit:cover}
.hm-so-dot:hover{opacity:.9}
.hm-so-dot.is-on{border-color:#fe2c55;opacity:1}

@media (max-width:860px){
 .hm-so{flex-direction:column;text-align:center;gap:20px;padding:22px 16px}
 .hm-so p{margin-left:auto;margin-right:auto}
 .hm-so-l{max-width:none;width:100%;text-align:left}
 /* ★ ปุ่มอยู่ขวาเสมอ ★ (เจ้าของสั่ง 11 ต.ค. 2569)
    เคยให้ปุ่มตกลงบรรทัดล่างตอนจอแคบ เพราะตอนนั้นมีสองปุ่มแล้วแถวยาวเกิน
    ตอนนี้รวมเหลือปุ่มเดียวแล้ว กว้างพอ ให้อยู่ขวาเหมือนจอใหญ่
    ชื่อช่องยาวเกินก็ตัดด้วยจุดไข่ปลา ปุ่มไม่ขยับ */
 .hm-so-l li{flex-wrap:nowrap}
 .hm-so-nm{flex:1 1 auto;min-width:0}
 .hm-so-nm b,.hm-so-nm small{white-space:nowrap;
   overflow:hidden;text-overflow:ellipsis}
 .hm-so-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .hm-so-act{flex:0 0 auto}
 .hm-so-cta{padding:8px 13px;font-size:12px}
 .hm-so-dev{transform:none}
 .hm-so-ph{flex-direction:column}
 .hm-so-dots{flex-direction:row}
 .hm-so::after{right:-90px}
}

/* ======================================================================
   การ์ดบริการ  มีรูปจริงด้านบน ไอคอนย้ายไปเป็นป้ายมุมรูป
   รูปอยู่ที่ bm/img/sv_*.webp  บางใบมีโลโก้จริงแปะไว้มุมล่างซ้ายของรูป
   ====================================================================== */
.card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card .cim{position:relative;display:block;aspect-ratio:4 / 3;overflow:hidden;background:var(--wash)}
.card .cim img{display:block;width:100%;height:100%;object-fit:cover}
.card i{position:absolute;left:12px;top:12px;z-index:2;margin:0;width:38px;height:38px;border-radius:11px;
  box-shadow:0 8px 20px -8px rgba(13,17,23,.75)}
.card h3{margin:16px 18px 5px}
.card p{margin:0 18px 20px}

/* ======================================================================
   กล่องคำตอบของผู้ช่วย AI บนหน้าแรก
   ====================================================================== */
.ask-ans{display:none;margin:14px auto 0;max-width:780px;text-align:left;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:18px 20px;backdrop-filter:blur(8px)}
.ask-ans.on{display:block}
.ask-ans .who{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  color:rgba(255,255,255,.72)}
.ask-ans .who b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,#ff8a1f,#ff5a00);color:#fff;font-size:11px}
.ask-ans .tx{margin-top:10px;font-size:15px;line-height:1.85;color:rgba(255,255,255,.94)}
.ask-ans .tx a{color:#ffb061}
.ask-ans.bad .tx{color:#ffc9a8}
.ask-ans .nx{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ask-ans .nx button{padding:7px 14px;border:1px solid rgba(255,255,255,.22);border-radius:99px;
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:12.5px;cursor:pointer;transition:.15s}
.ask-ans .nx button:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.ask-go[disabled]{opacity:.55;cursor:default}
.ask-dot{display:inline-block;width:6px;height:6px;margin-left:3px;border-radius:50%;
  background:currentColor;animation:askb 1s infinite}
.ask-dot:nth-child(2){animation-delay:.16s} .ask-dot:nth-child(3){animation-delay:.32s}
@keyframes askb{0%,80%{opacity:.25}40%{opacity:1}}

/* ปุ่มแนบรูป กับ รูปที่แนบแล้ว ใต้ช่องถาม AI */
/* ★ ปุ่มกับ label ไม่รับฟอนต์กับ white-space ของหน้า ★ (แก้ 12 ต.ค. 2569)
   พอเปลี่ยนจาก span เป็น button/label  button ไปใช้ฟอนต์ Arial ของเบราว์เซอร์
   และทั้งคู่ย่อตัวลงได้ ตัวหนังสือเลยตกบรรทัดเป็นสองแถว ดูเหมือนปุ่มพัง
   ต้องสั่ง font:inherit กับ white-space:nowrap และห้ามให้ย่อ */
.ask-b .pill{cursor:pointer;border:1px solid transparent;transition:.15s;
  font:inherit;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.75);
  white-space:nowrap;flex:none;-webkit-appearance:none;appearance:none}
/* ★ ปุ่มส่งต้องไม่ถูกบีบ ★ พอป้ายสองอันห้ามย่อ แรงบีบไปลงที่ปุ่มส่งแทน
   จอ 375 ปุ่มกลมถูกบีบเหลือกว้าง 32 สูง 44 กลายเป็นวงรี */
.ask-go{flex:none}
/* จอแคบมากปล่อยให้ป้ายตกบรรทัดได้ ดีกว่าบีบปุ่มส่ง */
@media (max-width:420px){ .ask-b{flex-wrap:wrap} .ask-go{margin-left:auto} }
.ask-b .pill:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26)}
.ask-b .pill input[type=file]{display:none}
.ask-pv{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ask-pv figure{position:relative;margin:0;width:54px;height:54px;border-radius:11px;overflow:hidden;
  border:1px solid rgba(255,255,255,.22)}
.ask-pv img{width:100%;height:100%;object-fit:cover;display:block}
.ask-pv button{position:absolute;right:2px;top:2px;width:18px;height:18px;padding:0;border:0;
  border-radius:50%;background:rgba(13,17,23,.8);color:#fff;font:inherit;font-size:12px;line-height:1;
  cursor:pointer}

/* จอเล็กกว่า 345px ไม่มีที่พอสองบรรทัด  ยอมทิ้งบรรทัดใต้ชื่อ เก็บชื่อแบรนด์ไว้เต็ม ดีกว่าชื่อโดนตัดเป็น PTCARGO E... */
/* ต่ำกว่า 375px หัวเว็บมีของแน่นเกินไป ยอมทิ้งบรรทัดใต้ชื่อ เอาพื้นที่คืนให้ชื่อแบรนด์ */
@media (max-width:359px){ .brand em{display:none} }