/* ============================================================
   TROPHY RACING — ดีไซน์ v3 (จาก Claude Design: Trophy Racing Mobile / Desktop)
   พื้นขาว · ดำ #111 เฉพาะแถบหัว/ปุ่ม · เหลือง #FFD100 · แดงเบาะ #D7141A
   ภาพ SALEPAGE เป็นการ์ดลอยแยกชิ้น · หัวข้อ Kanit เอียงหนา · ป้ายอังกฤษ Archivo
   ใช้ร่วมกันทั้งมือถือ (m.css) และคอม (d.css) — หลังบ้าน (admin) ไม่ใช้ไฟล์นี้
   ============================================================ */
/* ฟอนต์ (css/fonts.css + css/fonts-v3.css) ลิงก์ตรงใน <head> ของทุกหน้า ก่อนไฟล์นี้ — ไม่ใช้ @import (โหลดต่อกันเป็นทอด ช้ากว่า) */

:root{
  --ink:#111; --ink-2:#2a2a2a;
  --gold:#FFD100; --gold-h:#f0c400; --gold-txt:#e0b400;
  --red:#D7141A;
  --bg:#fff; --g1:#f3f3f3; --g2:#f4f4f4; --g3:#f6f6f6; --g4:#f5f5f5; --line:#f0f0f0; --line-2:#e6e6e6;
  --muted:#777; --muted-2:#666; --muted-3:#888; --muted-4:#aaa;
  --tag:#FFF4BF; --tag-ink:#6b5500;
  --sh-banner:0 6px 18px rgba(0,0,0,.12);
  --sh-banner-d:0 8px 24px rgba(0,0,0,.12);
  --sh-card:0 4px 14px rgba(0,0,0,.09);
  --sh-card-d:0 4px 16px rgba(0,0,0,.09);
  --sh-card-hover:0 14px 30px rgba(0,0,0,.16);
  --r-lg:12px; --r:10px; --r-sm:8px;
  --f:"Kanit",system-ui,sans-serif;
  --f-en:"Archivo","Kanit",system-ui,sans-serif;
  --spring:cubic-bezier(.2,1.45,.35,1);
  --swipe:cubic-bezier(.7,0,.2,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:6px}
.noscroll{scrollbar-width:none}
.noscroll::-webkit-scrollbar{display:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;flex:none}

/* ---------- โลโก้ ---------- */
.logo{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo-mark{width:34px;height:34px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--gold);font:900 italic 15px var(--f);flex:none}
.logo-w{line-height:1}
.logo-w b{display:block;font:900 italic 17px var(--f);letter-spacing:.5px}
.logo-w b span{color:var(--gold-txt)}
.logo-w small{display:block;font:600 9px var(--f-en);letter-spacing:2px;color:var(--muted);margin-top:2px}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r);font:700 15px var(--f);white-space:nowrap;transition:background .2s,transform .15s,color .2s}
.btn:active{transform:scale(.96)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-h);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--gold)}
.btn-ink:hover{background:var(--ink-2);color:var(--gold)}
.btn-soft{background:var(--g1);color:var(--ink)}
.btn-soft:hover{background:#e9e9e9;color:var(--ink)}
.btn-line{border:2px solid var(--ink);color:var(--ink);background:#fff}
.btn-line:hover{background:var(--ink);color:var(--gold)}
.btn-big{height:52px;font:800 italic 17px var(--f)}
/* ปุ่มหลักมีแสงเต้นรอบ (จากแบบ animation) */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gold);z-index:-1;animation:trPulse 1.5s ease-out infinite}
@keyframes trPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.12,1.7);opacity:0}}

/* ---------- หัวข้อ section ---------- */
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sec-t{display:flex;align-items:center;gap:8px;font:800 italic 22px/1.1 var(--f)}
.bar{flex:none;width:12px;height:22px;background:var(--gold);transform:skewX(-18deg)}
.bar.red{background:var(--red)}
.eyebrow{display:block;font:800 10px var(--f-en);letter-spacing:2px;color:var(--red)}
.more-link{display:inline-flex;align-items:center;gap:4px;font:500 13px var(--f);color:var(--muted-2);white-space:nowrap}
.more-link:hover{color:var(--ink)}
.more-link svg{width:14px;height:14px}

/* ---------- การ์ดภาพ SALEPAGE ---------- */
.banner{display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-banner);background:#111}
.banner img{width:100%;height:auto}
a.banner{transition:transform .2s}
a.banner:active{transform:scale(.985)}

/* ---------- ชิป / แท็บ ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0}
.chip{flex:none;display:inline-flex;align-items:center;gap:5px;padding:9px 16px;border-radius:var(--r);background:var(--g1);color:var(--ink);font:500 13px var(--f);white-space:nowrap;transition:background .2s,color .2s}
.chip small{opacity:.55;font-size:inherit;font-weight:400}
.chip:hover{background:#e9e9e9;color:var(--ink)}
.chip.on,.chip[aria-selected="true"]{background:var(--ink);color:var(--gold);font-weight:600}

/* ---------- การ์ดหมวดหมู่ ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px;border-radius:var(--r);background:var(--g2);color:var(--ink);cursor:pointer;transition:background .2s}
.tile:hover{background:var(--tag);color:var(--ink)}
.tile.on{background:var(--gold)}
.tile-img{aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:#fff}
.tile-img img{width:100%;height:100%;object-fit:cover}
.tile-img img.half{width:200%;max-width:none;object-position:left center}
.tile b{font:600 13px/1.2 var(--f);text-align:center}

/* ---------- การ์ดสินค้า ---------- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pc{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);box-shadow:var(--sh-card);overflow:hidden;color:var(--ink);transition:box-shadow .25s}
.pc:hover{color:var(--ink)}
.pc-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--g4)}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-img .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted-4);font-size:12px}
.pc-badge{position:absolute;top:8px;left:8px;display:flex;gap:4px}
.pc-badge span{padding:3px 8px;border-radius:6px;background:var(--red);color:#fff;font:600 11px var(--f)}
.pc-badge span.off{background:var(--ink);color:var(--gold);font:800 italic 11px var(--f-en)}
.pc-body{flex:1;display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.tag{align-self:flex-start;padding:2px 8px;border-radius:6px;background:var(--tag);color:var(--tag-ink);font:600 10px/1.5 var(--f);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-name{font:600 14px/1.25 var(--f);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-sub{flex:1;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font:400 12px/1.3 var(--f);color:var(--muted)}
.pc-sub b{font:800 italic 15px var(--f-en);color:var(--ink)}
.pc-sub s{color:var(--muted-4)}
.pc-buy{margin-top:6px;height:36px;border-radius:var(--r-sm);background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;font:600 13px var(--f);transition:background .2s,transform .15s}
.pc:hover .pc-buy{background:var(--ink-2)}
.pc:active .pc-buy{transform:scale(.95)}

/* ---------- ช่องค้นหา ---------- */
.search{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:var(--r);background:var(--g1);color:var(--muted-3)}
.search svg{width:18px;height:18px;flex:none}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;color:var(--ink);font:400 14px var(--f)}
.search input::placeholder{color:var(--muted-3)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search:focus-within{box-shadow:0 0 0 2px var(--ink)}
/* ปุ่มล้างคำค้นหาในช่องค้นหา */
.search .x{width:28px;height:28px;margin-right:-6px;border-radius:50%;display:grid;place-items:center;color:var(--muted-2);flex:none}
.search .x:hover{background:#e6e6e6;color:var(--ink)}
.search .x .ic{width:16px;height:16px}
/* ช่องค้นหาสินค้าในหน้าหมวด (อยู่แทนบรรทัดจำนวนสินค้า) */
.in-search{height:46px}
.in-search input{font-size:15px}

/* ---------- ว่าง / โหลดเพิ่ม ---------- */
.empty{display:grid;justify-items:center;gap:8px;padding:36px 16px;border-radius:var(--r-lg);background:var(--g3);text-align:center}
.empty b{font:700 16px var(--f)}
.empty span{font-size:14px;color:var(--muted-2)}
.loadmore{display:flex;justify-content:center;padding-top:6px}
.result-line{font:500 14px var(--f);color:var(--muted-2)}
.result-line b{color:var(--ink)}

/* ---------- ท้ายหน้า ---------- */
.copy{padding:18px 8px 0;text-align:center;font:400 11px var(--f);color:#999}

/* ---------- เลื่อนแล้วโผล่ (ยิงครั้งเดียวต่อชิ้น) ---------- */
.js .rv{opacity:0;transition:opacity .45s ease var(--d,0ms),transform .65s var(--spring) var(--d,0ms)}
.js .rv-up{transform:translateY(50px) scale(.94)}
.js .rv-left{transform:translateX(-70px) skewX(-14deg)}
.js .rv-right{transform:translateX(70px) skewX(-14deg)}
.js .rv-slam{transform:scale(1.18)}
.js .rv.in{opacity:1;transform:none}
/* ภาพปาดเข้าเฉียง: ตัดที่รูปด้านใน (ถ้าตัดที่กล่อง เบราว์เซอร์จะมองว่ากล่องมองไม่เห็นและไม่เริ่มเอฟเฟกต์) */
.js .rv-clip{background:transparent;box-shadow:none;transition:box-shadow .9s}
.js .rv-clip img{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%);transition:clip-path .9s var(--swipe)}
.js .rv-clip.in{box-shadow:var(--sh-banner)}
.js .rv-clip.in img{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}

/* ---------- หน้าต่างแชท ---------- */
.chat-dlg{position:fixed;inset:auto 0 0 0;z-index:250;margin:0 auto;width:100%;max-width:440px;height:min(640px,86vh);height:min(640px,86dvh);padding:0;border:0;border-radius:16px 16px 0 0;background:#fff;color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;transform:translateY(100%);transition:transform .38s cubic-bezier(.16,1,.3,1)}
.chat-dlg:not([open]){display:none}
.chat-dlg.show{transform:none}
.chat-dlg::backdrop{background:rgba(17,17,17,.45)}
.chat-hd{flex:none;display:flex;align-items:center;gap:10px;padding:14px 14px 14px 16px;background:var(--ink);color:#fff}
.chat-hd .logo-mark{width:38px;height:38px;border:2px solid var(--gold)}
.chat-hd div{flex:1;min-width:0;line-height:1.25}
.chat-hd b{display:block;font:700 15px var(--f)}
.chat-hd small{display:flex;align-items:center;gap:6px;font:400 12px var(--f);color:#bbb}
.chat-hd small::before{content:"";width:7px;height:7px;border-radius:50%;background:#2ED47A}
.chat-x{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;flex:none}
.chat-x svg{width:18px;height:18px}
.chat-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px;background:var(--g3)}
.chat-msgs>div{max-width:84%;padding:9px 13px;border-radius:14px;font:400 14px/1.45 var(--f);white-space:pre-wrap;overflow-wrap:anywhere}
.msg-bot{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.msg-bot .who{font:600 11px var(--f);color:var(--tag-ink);margin-bottom:2px}
.msg-bot img{width:200px;max-width:100%;border-radius:8px}
.msg-bot.typing{background:none;box-shadow:none;color:var(--muted);font-size:12.5px;padding:2px 4px}
.msg-user{align-self:flex-end;background:var(--gold);border-bottom-right-radius:4px}
.chat-in{flex:none;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.chat-in input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:var(--r);border:0;background:var(--g1);outline:none;font:400 15px var(--f)}
.chat-in input:focus{box-shadow:0 0 0 2px var(--ink)}
.chat-in button{height:46px;padding:0 18px;border-radius:var(--r);background:var(--ink);color:var(--gold);font:600 14px var(--f)}
.chat-in button:disabled{opacity:.5}
.chat-off{flex:none;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:13.5px;color:var(--muted-2);text-align:center}
@media (min-width:768px){
  .chat-dlg{inset:auto 28px 96px auto;margin:0;width:400px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.28);transform:translateY(24px) scale(.97);opacity:0;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
  .chat-dlg.show{transform:none;opacity:1}
  .chat-dlg::backdrop{background:transparent}
}

/* ---------- หน้าต่างกดติดตามร้าน ---------- */
.follow-dlg{width:min(92vw,400px);padding:0;border:0;border-radius:16px;background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.follow-dlg::backdrop{background:rgba(17,17,17,.55)}
.fd-top{position:relative;background:var(--ink) center/cover no-repeat;padding:28px 20px 22px;text-align:center;color:#fff}
.fd-top::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(17,17,17,.55),rgba(17,17,17,.9))}
.fd-top>*{position:relative}
.fd-top .logo-mark{margin:0 auto 10px;width:56px;height:56px;border:3px solid #fff;font-size:24px}
.fd-top h2{font:800 italic 24px/1.15 var(--f)}
.fd-top p{margin-top:4px;font-size:14px;color:#ddd}
.fd-x{position:absolute;top:10px;right:10px;z-index:1;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center}
.fd-x svg{width:16px;height:16px}
.fd-btns{display:grid;gap:8px;padding:16px}
.fd-btn{display:flex;align-items:center;justify-content:center;height:50px;border-radius:var(--r);font:700 15px var(--f)}
.fd-btn:hover{filter:brightness(1.06)}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-clip,.js .rv-clip img{opacity:1;transform:none;clip-path:none;transition:none}
  .glow::before{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- หน้าสินค้า: หน้าต่างรีวิว VDO (sale.js เปิด /detail เป็น bottom sheet) · วิดีโอ · toast ---------- */
.detail-overlay{position:fixed;inset:0;z-index:100;background:rgba(17,17,17,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.detail-overlay.open{opacity:1}
.detail-sheet{position:absolute;left:0;right:0;bottom:0;top:16px;margin:0 auto;max-width:720px;background:#070708;border-radius:20px 20px 0 0;overflow:hidden;transform:translateY(100%);transition:transform .38s cubic-bezier(.16,1,.3,1);box-shadow:0 -10px 40px rgba(0,0,0,.35)}
.detail-overlay.open .detail-sheet{transform:none}
.detail-sheet iframe{width:100%;height:100%;border:0;display:block}
.detail-grab{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);z-index:2;pointer-events:none}
.detail-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(17,17,17,.7);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center}
.player-scrim{position:fixed;inset:0;z-index:80;background:rgba(17,17,17,.92);display:grid;place-items:center;padding:16px}
.player-box{width:min(100%,400px);aspect-ratio:9/16;background:#161618;border-radius:16px;position:relative;display:grid;place-items:center;text-align:center;padding:20px;color:#aaa;font-size:13px}
.player-box .x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--ink);color:#fff;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast .bar{width:4px;height:auto;align-self:stretch;border-radius:2px;background:#2ED47A;transform:none}
/* วงกลมโลโก้ (มือถือ+คอม): ใช้โลโก้ร้านแทนตัวอักษร TR — ต้องอยู่ท้ายไฟล์ให้ชนะกฎขนาดตัวอักษรของแต่ละจุด */
.logo-mark,.m-hd-dark .logo-mark,.d-hd .logo-mark{background:#fff url(../../assets/logo-mark.png) center/84% no-repeat;color:transparent;font-size:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}