/* ⛔ ไฟล์นี้ถูกสร้างด้วย tools/build_webstore.py — ห้ามแก้ที่นี่
   แก้ที่ docs/mockups/store/app.css แล้วรันสคริปต์ใหม่
   (แก้ตรงนี้จะหายทั้งหมดในบิลด์ครั้งถัดไป) */
/* ═══════════════════════════════════════════════════════════════════════
   HaruShop — ระบบดีไซน์กลาง (โลกเดียว มืดตลอด ตั้งใจ)
   สีแบรนด์มาจากเว็บเดิม HaruShop-Website: ถ่านอมแดง + ember + ทอง

   สีมีหน้าที่ตายตัว
     ember  = แบรนด์ · ปุ่มหลัก · เส้นเน้น       ทอง = ราคา · ป้ายคุ้ม
     เขียว  = สถานะสำเร็จ/ใช้งานอยู่ "เท่านั้น"   ฟ้า = ข้อมูล/สถานะสด
     แดงอ่อน = ผิดพลาด

   ⛔⛤ --ember (#FF3B3B) ใช้เป็น "พื้นปุ่ม" ไม่ได้ — ขาวบนแดงนี้ได้ 3.4:1
      ไม่ผ่าน WCAG AA · พื้นปุ่มต้องใช้ --ember-btn (#C81E1E → 5.3:1)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ฟอนต์จากเครื่องเรา (⛔ ห้ามพึ่ง CDN — กฎเดิมของโครงการ) ──
   ⛤ 2026-09-01 วัดจริงแล้วพบว่าเว็บพึ่ง Google Fonts ล้วน ๆ
      บล็อกโดเมนกูเกิล ⇒ โหลดฟอนต์ได้ 0 ตัว ตกไปฟอนต์ระบบทั้งเว็บ
      และ "ตัวสำรองในเครื่อง" ที่ program-ui.css อ้างไว้ก็ 404 มาตลอด
      (ทั้งไฟล์ไม่มีจริง และ CSP font-src ไม่มี 'self')
   ⚠ IBM Plex Mono ยังไม่มีไฟล์ในเครื่อง จึงยังดึงจากกูเกิลอยู่ตัวเดียว
     — เป็นฟอนต์ตัวเลข/รหัส ถ้าโหลดไม่ขึ้นจะตกไป monospace ของระบบ
     ซึ่งอ่านออกปกติ ไม่กระทบข้อความไทยที่เป็นเนื้อหาหลัก */
@font-face{font-family:'Anuphan'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('/web/fonts/anuphan-thai.woff2') format('woff2');
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Anuphan'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('/web/fonts/anuphan-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Anuphan'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('/web/fonts/anuphan-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:500 700;
  font-display:swap; src:url('/web/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:500 700;
  font-display:swap;
  src:url('/web/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  /* ⛔⛤ เจ้าของแจ้ง 2026-08-31: "กดแท็ปเลื่อนมีหน้าต่างสีขาว"
     เมนูของ <select> · ตัวเลือกวันที่ · แถบเลื่อน · ช่องกรอก ถูกวาดโดย
     เบราว์เซอร์เอง ไม่ใช่ CSS ของเรา ⇒ ไม่ประกาศไว้ = วาดเป็นธีมสว่างเสมอ
     แม้ทั้งหน้าจะเป็นสีดำ · โปรแกรมจริงประกาศไว้แล้ว (webui/shared/tokens.css)
     แต่เว็บร้านไม่เคยมี ⇒ ประกาศให้ตรงกัน */
  color-scheme: dark;
  /* ── พื้น: กราไฟต์เกือบดำ เย็นกว่าเดิมเล็กน้อย ── */
  --bg:#07070A;
  --bg-soft:#0C0C11;
  --surface:#12121A;
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,45,70,.24);

  /* ── ตัวอักษร ── */
  --tx:#F5F3F6;
  --tx2:#B9B2BE;
  --tx3:#9A93A1;         /* ⛔ อย่าทำให้เข้มกว่านี้ — 12.5px บนการ์ดจะหลุด WCAG AA */

  /* ── แบรนด์ ── */
  --ember:#FF2D46;        /* เส้น ไอคอน ตัวอักษรบนพื้นมืด — ห้ามเป็นพื้นปุ่ม */
  --ember-btn:#C4152B;    /* พื้นปุ่มหลัก (ขาวบนนี้ผ่าน AA) */
  --ember-lit:#FF7C8B;    /* ขอบโฟกัส · ไอคอน · ตัวอักษรเน้น */
  --ember-deep:#7A0B18;
  --gold:#FFC24D;         /* ราคา · ป้ายคุ้มสุด */
  --on-gold:#1A1206;      /* ตัวอักษรบนพื้นทอง — ⛔ ขาวบนทองตกเกณฑ์ AA */
  --ok:#7FE07F;           /* สำเร็จ / ใช้งานอยู่ เท่านั้น */
  /* ⚠ ฟ้าใช้เฉพาะ "สถานะเชิงเทคนิค" (กำลังทำงาน · จำนวนวัน · ค่าที่วัดได้)
     ห้ามเอาไปใช้เป็นสีตกแต่งทั่วไป ไม่งั้นความหมายจะเจือจนอ่านไม่ออก */
  --info:#5FD0E8;
  --warn:#E0A877;
  --bad:#FF6B5A;

  /* ── ชื่อเดิมที่โค้ดยังเรียกอยู่ (ชี้มาที่โทเคนใหม่) ── */
  --vio:var(--ember-btn);
  --vio-lit:var(--ember-lit);
  --money:var(--ok);
  --cyan:var(--info);
  --rose:var(--bad);

  /* ── ระยะ · มุม · เงา · จังหวะ ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --r:16px;
  --r-sm:10px;
  --r-lg:22px;
  --maxw:1280px;          /* ความกว้างเนื้อหาอ่านสบาย */
  --maxw-wide:1560px;     /* ความกว้างของงานภาพ/กริดการ์ด บนจอใหญ่ */
  --shadow:0 2px 4px rgba(0,0,0,.34), 0 12px 34px rgba(0,0,0,.46);
  --shadow-hi:0 4px 10px rgba(0,0,0,.40), 0 22px 54px rgba(0,0,0,.56);
  --ease:cubic-bezier(.2,.7,.3,1);
  --t-fast:150ms;
  --t:220ms;
  --t-slow:300ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:"Anuphan","IBM Plex Sans Thai",system-ui,sans-serif;
  /* พื้นหลัง: แสงแดงจุดเดียวด้านบน — ตารางกับเกรนอยู่ที่ ::before/::after
     ⚠ ห้ามใช้รูปภาพ ทุกอย่างวาดด้วย CSS ล้วน โหลดเร็วและผ่าน CSP */
  background-image:
    radial-gradient(64% 42% at 50% -8%, rgba(255,45,70,.13), transparent 70%);
  background-attachment:fixed;
  font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0}
img,svg{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--vio-lit); outline-offset:3px; border-radius:8px}
[hidden]{display:none !important}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
/* ⚠ ใช้กับงานภาพที่ต้องการพื้นที่กว้างกว่าเนื้อความ (หน้าต่างโปรแกรม) */
.wrap.wide{max-width:var(--maxw-wide)}
@media(min-width:900px){ .wrap{padding:0 32px} }

/* ══════════════ จอใหญ่: ไม่ให้เหลือขอบดำเป็นแถบกว้าง ══
   ⛔⛤ เจ้าของแจ้งว่า "เว็บไม่เต็มจอ มีขอบดำข้าง ๆ เหมือนโดนตัด"
      วัดจริงบนจอ 1905px: เนื้อหากว้าง 1280 ⇒ ว่างข้างละ 313px = 33% ของจอ
      พื้นหลังดำสนิททั้งแถบ จึงเห็นเป็นขอบดำชัด ๆ
   ⚠ ยืดเป็น 100% ไม่ได้ — บรรทัดตัวอักษรยาวเกิน ~90 ตัวจะอ่านยาก ตาหาบรรทัด
     ถัดไปไม่เจอ ⇒ ขยายเฉพาะ "หัวเว็บ · ฮีโร่ · กริดการ์ด · ท้ายเว็บ" ที่เป็นงานภาพ
     ส่วนย่อหน้ายาว ๆ ตรึงความกว้างอ่านสบายไว้เท่าเดิม */
@media(min-width:1500px){
  header.top > .wrap,
  .hero > .wrap,
  /* ⛔⛤ 2026-09-13 · หัวหน้าของหน้าย่อย (ดูโปรแกรม · คู่มือ · สินค้า ·
     กระเป๋าเงิน) ไม่เคยอยู่ในรายการนี้ ⇒ บนจอกว้าง หัวหน้ากว้าง 1280
     แต่เนื้อหาข้างล่างกว้าง 1560 ⇒ ขอบซ้ายไม่ตรงกัน เห็นชัดว่าเยื้อง */
  .prog-hero > .wrap,
  .gdhero > .wrap,
  .plhero > .wrap,
  .wlhero > .wrap,
  .sec > .wrap,
  .foot > .wrap{max-width:var(--maxw-wide)}
  .sechead p, .hero .sub, .lead, .pdbody{max-width:78ch}
}
@media(min-width:1800px){
  header.top > .wrap,
  .hero > .wrap,
  .prog-hero > .wrap,
  .gdhero > .wrap,
  .plhero > .wrap,
  .wlhero > .wrap,
  .sec > .wrap,
  .foot > .wrap{max-width:1680px}
}

/* ── ตัวอักษร ── */
.grad{
  background:linear-gradient(178deg,#FFFFFF 6%,#D3B7B1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1,h2,h3{margin:0; letter-spacing:-.015em; text-wrap:balance;
  font-family:"Space Grotesk","Anuphan",system-ui,sans-serif}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--vio-lit);
}
.lead{color:var(--tx2); font-size:15px; margin:10px 0 0}
.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}


/* ── หัวเว็บ ── */
.top{position:sticky; top:var(--toolsH,0px); z-index:80;
  background:rgba(7,8,11,.72); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:28px; min-height:68px}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; font-size:17px; letter-spacing:-.01em}
.brand .mk{width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(140deg,var(--ember),var(--ember-deep)); display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(108,90,224,.45)}
.top nav{display:none; gap:26px; font-size:14.5px; color:var(--tx2)}
@media(min-width:900px){ .top nav{display:flex} }
.top nav a{padding:8px 0; border-bottom:2px solid transparent; transition:color .18s,border-color .18s}
.top nav a:hover{color:var(--tx)}
.top nav a.on{color:var(--tx); border-bottom-color:var(--vio-lit)}
.top .sp{flex:1}
.chipacct{display:flex; align-items:center; gap:10px; min-height:44px;
  background:var(--glass-2); border:1px solid var(--line); border-radius:999px;
  padding:5px 16px 5px 5px; transition:border-color .18s, background .18s}
.chipacct:hover{border-color:var(--line-2); background:rgba(255,255,255,.08)}
/* ⛔⛤ เดิมบรรทัดนี้เขียน background เป็นไล่สีม่วงตายตัว
   `.chipacct .av` เจาะจงกว่า `.av-ember` ⇒ **สีที่ลูกค้าเลือกไม่มีวันขึ้นที่มุมขวา**
   (หน้าโปรไฟล์เปลี่ยนสีได้ แต่มุมขวาม่วงอยู่อย่างนั้น ดูเหมือนบันทึกไม่ติด)
   ⇒ เหลือแค่ background-color เป็นสีพื้นตอนยังไม่มีคลาสสี ส่วนไล่สีของแต่ละสี
     เป็น background-image ซึ่งไม่มีใครทับ จึงขึ้นได้ตามที่เลือกจริง */
.chipacct .av{width:32px; height:32px; border-radius:50%; flex:none;
  background-color:#22203C; border:1px solid var(--line-2)}
.chipacct b{font-size:13.5px; font-weight:500}

/* ── ปุ่ม ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 22px; border-radius:12px; font-size:15px; font-weight:500;
  border:1px solid var(--line-2); background:var(--glass-2); color:var(--tx);
  transition:border-color .18s, background .18s, transform .12s, filter .18s}
.btn:hover{border-color:var(--vio-lit); background:rgba(255,255,255,.08)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ember-btn); border-color:var(--ember-btn); color:#fff;
  font-weight:600; box-shadow:0 6px 20px rgba(200,30,30,.34)}
.btn.primary:hover{filter:brightness(1.12); background:var(--ember-btn)}
.btn.sm{min-height:40px; padding:0 15px; font-size:13.5px; border-radius:10px}
/* ⛤ ปุ่มจาง — สำหรับทางที่ "มีให้เลือก แต่ไม่ใช่สิ่งที่อยากให้กด"
   เช่น ยกเลิกคำสั่งซื้อ · กันกดพลาดตอนรีบ และไม่แย่งสายตาปุ่มหลัก
   ⚠ ยังต้องสูง 40px ตามเกณฑ์พื้นที่นิ้วสัมผัส ห้ามย่อกว่านี้
   ⛔⛤ 2026-09-11: `ghost` คือชื่อเดียวกันของปุ่มแบบนี้ที่หน้าหลังร้าน (รื้อ 09-11)
     เรียกใช้ — ทั้งใน HTML และผ่าน adBtn/adLink ใน app.js — แต่ไม่เคยมีใครเขียนกฎให้
     ⇒ ปุ่มรีเฟรช/ลิงก์ในหน้าแอดมินทุกหน้าออกมาเป็นปุ่มเปล่า ๆ ของ .btn ล้วน
     รับชื่อนี้เป็นชื่อพ้องเสียเลย (ตั้งใต้ .btn ไม่ใช่คลาสสั้นลอย ๆ ที่จะรั่วไปทั้งเว็บ) */
.btn.quiet,.btn.ghost{background:transparent; border-color:var(--line); color:var(--tx3);
  font-weight:500; min-height:40px; padding:0 15px; font-size:13.5px}
.btn.quiet:hover,.btn.ghost:hover{color:var(--tx2); border-color:var(--line-2);
  background:var(--glass)}
.btn.block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ── การ์ดกระจก ── */
.glass{background:var(--glass); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); backdrop-filter:blur(6px)}

/* ── หน้าแรก · ฮีโร่ ── */
.hero{position:relative; padding:64px 0 52px; text-align:center; overflow:hidden}
.hero::before{content:""; position:absolute; left:50%; top:-260px; width:900px; height:520px;
  translate:-50% 0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(108,90,224,.28), transparent 72%)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(closest-side at 12% 30%, rgba(84,200,240,.10), transparent 70%),
    radial-gradient(closest-side at 88% 20%, rgba(244,85,110,.08), transparent 70%)}
.hero > *{position:relative; z-index:1}
.live{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line);
  background:var(--glass); border-radius:999px; padding:6px 16px; font-size:12.5px;
  color:var(--tx2); font-family:"IBM Plex Mono",monospace}
.dot{width:7px; height:7px; border-radius:50%; background:var(--money);
  box-shadow:0 0 10px var(--money); animation:bp 2.4s ease-in-out infinite}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:clamp(34px,6vw,58px); font-weight:700; line-height:1.16; margin:22px 0 0}
.hero .sub{color:var(--tx2); font-size:clamp(15px,1.9vw,18px); margin:16px auto 0; max-width:52ch}
.hero .cta{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap}

/* พิสูจน์ตัวตน */
.proof{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:30px; flex-wrap:wrap}
.faces{display:flex}
.faces i{width:34px; height:34px; border-radius:50%; border:2px solid var(--bg); margin-left:-11px; display:block}
.faces i:first-child{margin-left:0}
.f1{background:linear-gradient(140deg,#7C6BF5,#4B3FA8)}
.f2{background:linear-gradient(140deg,#54C8F0,#2A6B87)}
.f3{background:linear-gradient(140deg,#F4556E,#8C2438)}
.f4{background:linear-gradient(140deg,#E9B949,#8A6A18)}
.f5{background:linear-gradient(140deg,#3FD68A,#1B6D45)}
.stars{display:flex; gap:3px; color:var(--gold)}
.proof .txt{font-size:13.5px; color:var(--tx2)}
.proof .txt b{color:var(--tx); font-weight:600}

/* แถบตัวเลข */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:44px}
@media(min-width:820px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{padding:18px 20px}
.stat b{display:block; font-family:"IBM Plex Mono",monospace; font-size:26px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat span{font-size:12.5px; color:var(--tx3)}
.stat.c b{color:var(--cyan)}
.stat.g b{color:var(--money)}

/* ── หัวข้อหมวด ── */
.sec{padding:68px 0}
.sec.tight{padding-top:0}
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:26px; flex-wrap:wrap}
.sechead h2{font-size:clamp(24px,3.2vw,32px); font-weight:700; margin-top:8px}
.sechead p{margin:8px 0 0; color:var(--tx2); font-size:14.5px; max-width:52ch}
.sechead .ico{display:inline-flex; align-items:center; gap:11px}
.sechead .ico span{width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--line); color:var(--vio-lit)}

/* ── ตะแกรง ── */
.grid{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:640px){ .grid.two,.grid.three{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .grid.three{grid-template-columns:repeat(3,1fr)} }
/* ⚠ เคยเขียน class="grid four" ทั้งที่ยังไม่มีกฎ .four ⇒ ตกเป็นคอลัมน์เดียว
   การ์ด 4 ใบยืดเป็นแถบยาว 939px เห็นเป็นช่องว่างดำทั้งจอ */
@media(min-width:640px){ .grid.four{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .grid.four{grid-template-columns:repeat(4,1fr)} }

/* ── การ์ดเหตุผล ── */
.why{padding:26px 24px}
.why .ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(108,90,224,.30),rgba(84,200,240,.14));
  border:1px solid var(--line-2); color:var(--vio-lit); margin-bottom:16px}
.why h3{font-size:17px; font-weight:600; margin-bottom:8px}
.why p{margin:0; font-size:14px; color:var(--tx2)}

/* ── การ์ดสินค้า ── */
.card{display:flex; flex-direction:column; overflow:hidden; padding:12px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
  animation:rise .5s cubic-bezier(.2,.8,.3,1) both}
.card:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow-hi)}
.card:nth-child(2){animation-delay:.07s}
.card:nth-child(3){animation-delay:.14s}
@keyframes rise{from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none}}
.art{position:relative; aspect-ratio:1/1; border-radius:11px; overflow:hidden; background:#0A0B14}
.art svg{width:100%; height:100%}
.card:hover .art svg{transform:scale(1.03)}
.art svg{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ribbon{position:absolute; top:11px; right:11px; font-size:11.5px; font-weight:600;
  padding:5px 12px; border-radius:999px; color:#fff; background:var(--rose);
  box-shadow:0 6px 18px rgba(244,85,110,.42); letter-spacing:.01em}
.ribbon.hot{background:var(--ember-btn); box-shadow:0 6px 18px rgba(200,30,30,.45)}
.ribbon.soon{background:rgba(12,14,22,.82); border:1px solid var(--line-2); color:var(--tx2); box-shadow:none}
.cbody{padding:15px 6px 6px; display:flex; flex-direction:column; gap:9px; flex:1}
.ctitle{display:flex; align-items:center; gap:9px; font-size:16.5px; font-weight:600; line-height:1.4}
.ctitle .ki{color:var(--vio-lit); flex:none}
.cdesc{margin:0; font-size:13.5px; color:var(--tx3); line-height:1.65}
.crow{display:flex; align-items:baseline; gap:12px; margin-top:auto; padding-top:4px; flex-wrap:wrap}
.price{font-size:24px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.price small{font-size:14px; font-weight:500; color:var(--tx3)}
.stock{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tx3);
  font-family:"IBM Plex Mono",monospace}
.noprice{font-size:14.5px; color:var(--tx3)}
.card .btn{margin-top:4px}

/* การ์ดหมวด */
.cat .cbody{gap:5px}
.catmeta{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--tx3);
  font-family:"IBM Plex Mono",monospace}

/* ── รีวิว ── */
.rev{padding:24px}
.rev .q{font-size:14.5px; color:var(--tx2); margin:0 0 18px; line-height:1.75}
.rev .who{display:flex; align-items:center; gap:12px}
.rev .who i{width:38px; height:38px; border-radius:50%; flex:none}
.rev .who b{display:block; font-size:14px; font-weight:600}
.rev .who span{font-size:12px; color:var(--tx3)}
.rev .stars{margin-bottom:14px}

/* ── คำถามที่พบบ่อย ── */
.faq{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--glass)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:18px 22px; font-weight:500; font-size:15px;
  display:flex; align-items:center; gap:12px; list-style:none; transition:background .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(255,255,255,.03)}
.faq summary::after{content:"+"; margin-left:auto; color:var(--vio-lit);
  font-family:"IBM Plex Mono",monospace; font-size:18px; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0; padding:0 22px 20px; color:var(--tx2); font-size:14px; max-width:74ch}

/* ── หน้าคลังคีย์ ── */
.pagehead{padding:38px 0 0}
.pagehead h1{font-size:clamp(26px,4vw,38px); font-weight:700; margin-top:8px}
.acct{display:flex; align-items:center; gap:14px; margin:24px 0 0; flex-wrap:wrap}
/* ⚠ ห้ามใส่ background แบบ shorthand ตรงนี้ — ทับตัวแปรไล่สีของ [class*="av-"]
   (ดูหมายเหตุที่ .av-ember) · ให้เหลือแค่สีพื้นตอนยังไม่มีคลาสสี */
.acct .big{width:52px; height:52px; border-radius:15px; flex:none;
  background-color:#22203C; border:1px solid var(--line-2);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:19px;
  background-position:center}
.acct .who b{display:block; font-size:16px; font-weight:600}
.acct .who span{font-size:13px; color:var(--tx3)}
.acct .sp{flex:1}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px}
.tile{padding:16px 18px}
.tile b{display:block; font-family:"IBM Plex Mono",monospace; font-size:23px; font-weight:600}
.tile span{font-size:12px; color:var(--tx3)}
.tile.g b{color:var(--money)}
.tile.c b{color:var(--cyan)}
.vgrid{display:grid; gap:18px; margin-top:22px}
@media(min-width:980px){ .vgrid{grid-template-columns:1.6fr 1fr; align-items:start} }
#keylist{display:grid; gap:16px}
/* 🏠 คลัง: แท็บ "คีย์ · จอเช่า" (2026-10-02) — โผล่เฉพาะบัญชีที่มีจอเช่า/คิว (JS)
   ⚠ แท็บจอเช่า = ซ่อนทุกอย่างของคีย์ (สรุป · ตัวกรอง · เก็บกวาด · รายการ · แผงข้าง) */
.vseg{display:flex; gap:4px; margin-top:20px; padding:4px; border-radius:14px;
  border:1px solid var(--line); background:var(--glass); max-width:420px}
.vseg[hidden]{display:none}
.vseg-b{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; padding:0 14px; border:0; border-radius:10px; background:transparent;
  color:var(--tx2); font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease)}
.vseg-b:hover{color:var(--tx)}
.vseg-b[aria-selected="true"]{color:#fff; background:rgba(255,45,70,.16);
  box-shadow:inset 0 0 0 1px rgba(255,45,70,.45)}
.vseg-n{min-width:22px; padding:1px 7px; border-radius:999px; background:var(--glass-2);
  font-size:12px; font-weight:600; color:var(--tx2); font-variant-numeric:tabular-nums}
.vseg-n:empty{display:none}
main[data-vtab="rent"] #vault-tiles, main[data-vtab="rent"] #vault-filters,
main[data-vtab="rent"] #vault-sweep, main[data-vtab="rent"] #vault-msg,
main[data-vtab="rent"] .vgrid{display:none}
.vrent{margin-top:20px}
.vrent[hidden]{display:none}
.vrent-list{display:grid; gap:14px}
@media(min-width:760px){ .vrent-list{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.vrent-all{margin-top:16px; max-width:420px}
.vrcard{display:grid; grid-template-columns:132px minmax(0, 1fr); gap:14px; padding:14px;
  align-items:start}
.vrthumb{position:relative; display:grid; place-items:center; aspect-ratio:16/9;
  border-radius:10px; overflow:hidden; background:#07070b; border:1px solid var(--line);
  color:var(--tx3)}
.vrthumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .2s var(--ease)}
.vrthumb.ok img{opacity:1}
.vrthumb-ic{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
a.vrthumb:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.vrbody{min-width:0; display:flex; flex-direction:column; gap:6px}
.vrtop{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.vrtop b{font-size:16px}
.vrleft{font-size:13.5px; color:var(--tx2)}
.vrleft[data-tone="warn"]{color:var(--warn)}
.vrleft[data-tone="bad"]{color:var(--bad)}
.vrbot{display:flex; align-items:center; gap:8px; margin:0; font-size:14px; color:var(--tx2)}
.vrsub{margin:0; font-size:13px; color:var(--tx3); line-height:1.5}
.vracts{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.vracts .btn{min-height:44px}
.vrcard.q .vrthumb{color:var(--warn)}
@media(max-width:479px){
  .vseg{max-width:none}
  .vrcard{grid-template-columns:104px minmax(0, 1fr); gap:12px; padding:12px}
  .vracts .btn{flex:1 1 auto; padding-inline:12px}
}
@media (prefers-reduced-motion:reduce){ .vrthumb img, .vseg-b{transition:none} }

.keycard{position:relative; padding:22px; overflow:hidden}
.keycard::before{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--ember),var(--gold))}
.keytop{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.tag{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--tx2)}
.tag.on{color:var(--money); border-color:rgba(63,214,138,.38); background:rgba(63,214,138,.10)}
.tag.off{color:var(--tx3)}
/* 📱 ป้ายฝั่งบนการ์ดคีย์ (2026-09-13)
   ⛔⛤ ต้องอ่านได้จากตัวอักษรด้วย ไม่ใช่พึ่งสีอย่างเดียว — คนตาบอดสีต้องแยกออก
   ⚠ สองสีนี้ต้องไม่ชนกับความหมายเดิม: เขียว=ใช้งานอยู่ · ทอง=ราคา
     ⇒ คอมใช้ฟ้า (สถานะเชิงเทคนิค) · มือถือใช้ม่วง ซึ่งยังไม่ถูกใช้ที่ไหน */
.plat{display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; padding:5px 11px; border-radius:999px; border:1px solid}
.plat.pc{color:var(--cyan); border-color:rgba(95,208,232,.42)}
.plat.android{color:#B08CFF; border-color:rgba(176,140,255,.45)}
/* 🏷 ชื่อเล่นคีย์ที่ลูกค้าตั้งเอง (2026-09-13) */
.nick{display:inline-flex; align-items:baseline; gap:6px; font-size:13.5px;
  color:var(--tx2); min-width:0}
.nick b{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:16ch}
.nick button{background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:12px; color:var(--tx3); text-decoration:underline dotted;
  text-underline-offset:3px}
.nick button:hover{color:var(--tx2)}
.keyval{font-family:"IBM Plex Mono",monospace; font-size:19px; letter-spacing:.06em; margin-left:auto}
.meter{height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin:6px 0 10px}
.meter i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--ember))}
.mrow{display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--tx3);
  font-family:"IBM Plex Mono",monospace; flex-wrap:wrap}
.kg{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:20px 0}
@media(min-width:560px){ .kg{grid-template-columns:repeat(4,1fr)} }
.kcell{background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:12px; padding:13px 15px}
.kcell b{display:block; font-family:"IBM Plex Mono",monospace; font-size:15.5px; font-weight:600;
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis}
.kcell span{font-size:11.5px; color:var(--tx3)}
.kacts{display:flex; gap:9px; flex-wrap:wrap}
.side{padding:22px}
.side h3{font-size:16.5px; font-weight:600; margin-bottom:6px}
.side .ver{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--tx3); margin-bottom:18px}
.side .btn{margin-bottom:9px}
.hashline{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--tx3);
  border-top:1px solid var(--line); padding-top:14px; margin-top:14px; word-break:break-all; line-height:1.7}
.hint{font-size:13px; color:var(--tx3); margin:12px 0 0; line-height:1.7}
.hint.bad{color:var(--rose)}
.empty{padding:38px 24px; text-align:center}
.empty h3{font-size:17px; font-weight:600; margin-bottom:8px}
.empty p{margin:0 auto; color:var(--tx3); font-size:14px; max-width:44ch}

/* ── ฟอร์ม ── */
.field{display:block; margin-bottom:14px}
.field span{display:block; font-size:13px; color:var(--tx2); margin-bottom:7px}
.input{width:100%; min-height:48px; padding:0 16px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--tx);
  font-size:14.5px; transition:border-color .18s, background .18s}
.input::placeholder{color:var(--tx3)}
.input:focus{border-color:var(--vio-lit); background:rgba(255,255,255,.06); outline:none}
.authgrid{display:grid; gap:18px; margin-top:24px}
@media(min-width:880px){ .authgrid{grid-template-columns:1fr 1fr; align-items:start} }
.pane{padding:26px}
.pane h2{font-size:19px; font-weight:600; margin-bottom:6px}
.pane > p.lead{margin-bottom:20px; font-size:14px}
.divider{display:flex; align-items:center; gap:14px; margin:20px 0; color:var(--tx3); font-size:12.5px}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}

/* ── แถบเตือนในหน้า ── */
.notice{display:flex; align-items:center; gap:14px; margin-top:18px; padding:15px 18px;
  border:1px solid rgba(233,185,73,.34); background:rgba(233,185,73,.07);
  border-radius:var(--r); flex-wrap:wrap}
.notice .ic{color:var(--gold); flex:none}
.notice b{display:block; font-size:14.5px}
.notice p{margin:2px 0 0; font-size:13px; color:var(--tx2)}
.notice .btn{margin-left:auto}
.sep{height:1px; background:var(--line); margin:20px 0}
.linky{font-size:13px; color:var(--vio-lit); padding:6px 0; text-decoration:underline;
  text-underline-offset:3px}
.linky:hover{color:var(--tx)}

/* ── ป้ายแจ้งเตือนลอย ── */
#toasts{position:fixed; right:18px; bottom:92px; z-index:110; display:grid; gap:10px;
  max-width:min(360px, calc(100vw - 36px))}
@media(min-width:900px){ #toasts{bottom:24px} }
.toast{display:flex; align-items:flex-start; gap:11px; padding:13px 16px; border-radius:13px;
  background:rgba(14,16,26,.94); border:1px solid var(--line-2); box-shadow:var(--shadow-hi);
  font-size:13.5px; animation:slidein .28s cubic-bezier(.2,.8,.3,1) both}
@keyframes slidein{from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none}}
.toast .bar{width:3px; align-self:stretch; border-radius:2px; background:var(--money); flex:none}
.toast.bad .bar{background:var(--rose)}
/* ⚠ "สำเร็จบางส่วน" ไม่ใช่สำเร็จ และไม่ใช่ล้มเหลว — ต้องอ่านออกว่าเป็นคนละอย่าง
   เช่น สร้างสินค้าผ่านแต่รูปอัปไม่ผ่าน */
.toast.warn .bar{background:var(--warn)}
.toast.info .bar{background:var(--cyan)}

/* ── ป้ายประวัติซื้อล่าสุด ── */
/* ⛔⛤ 2026-09-01 กฎ 44px ของโครงการเอง — ตรวจแล้วมีลิงก์หลุดกฎอยู่จริง
   ("ไปหน้ากระเป๋าเงิน" 22px · "เงื่อนไขการใช้งาน" 29px · เส้นทาง 35px)
   ⚠ ขยายเฉพาะ "พื้นที่กด" ไม่ขยับตัวอักษรหรือระยะห่างของแถว
     (ใช้ inline-flex + min-height ⇒ กล่องโตขึ้นแต่บรรทัดยังชิดเหมือนเดิม)
   ⚠ เฉพาะจอที่กดด้วยนิ้วเท่านั้น — บนเดสก์ท็อปเมาส์แม่นอยู่แล้ว ไม่ต้องดันระยะ */
@media (hover:none) and (pointer:coarse){
  .crumb a, .crumbs a, .foot a, .slink, .navlink{
    display:inline-flex; align-items:center; min-height:44px}
  /* ⛤ 2026-09-13: ลิงก์เส้นทางสูง 44px แล้วก็จริง แต่ **กว้างแค่ 30-38px**
     (คำสั้นอย่าง "สินค้า" / "คลังคีย์") ⇒ นิ้วยังกดพลาดไปโดนตัวข้าง ๆ ได้
     ⚠ ขยายด้วย padding แล้วหักคืนด้วย margin ติดลบ ⇒ พื้นที่กดโตขึ้น
       แต่ตัวอักษรกับระยะห่างในแถวยังอยู่ที่เดิมเป๊ะ */
  .crumb a, .crumbs a{padding-inline:7px; margin-inline:-7px}
}
/* ⚠ ลิงก์ที่แทรกอยู่กลางย่อหน้า (.linky) **ตั้งใจไม่ขยาย**
   กฎ 44px มีไว้สำหรับปุ่ม/เมนูที่ยืนเดี่ยว ๆ · ถ้าไปดันลิงก์กลางประโยคด้วย
   บรรทัดจะถ่างออกจนอ่านยาก และย่อหน้าจะดูพัง — แลกไม่คุ้ม
   คนที่กดพลาดยังกดใหม่ได้ทันที ต่างจากปุ่มยืนเดี่ยวที่พลาดแล้วไปโดนของข้าง ๆ */

/* ⛔⛤ 2026-09-02 (B14) ป้าย "เพิ่งซื้อ" เป็น position:fixed ⇒ ลอยทับเนื้อหา
   ท้ายหน้าจริง ⇒ กันพื้นที่ท้ายหน้าเท่ากับแถบแนวตั้งที่ป้ายกินจริง
   (startTicker() ใน app.js วัดจากของจริงแล้วตั้งค่าให้ ไม่ใช่เลขเดา)
   ⚠ 2026-09-11 กฎนี้เคยหายไปตอน 0017153 — เหลือแต่ฝั่ง JS ที่ตั้งค่าทิ้งไว้
     โดยไม่มีใครอ่าน แล้วมีคนมาแปะ padding-bottom:150px ไว้ "ก่อน" กฎ .foot
     ตัวจริง ซึ่งถูกกฎท้ายไฟล์ทับทิ้งทั้งอัน ⇒ ป้ายทับข้อความลิขสิทธิ์มาตลอด
     ⇒ ห้ามแก้ด้วยเลขตายอีก และห้ามวางกฎ .foot ไว้ก่อนกฎ .foot ตัวหลัก */
:root{--ticker-space:0px}
.ticker{position:fixed; left:16px; bottom:92px; z-index:105;
  display:flex; align-items:center; gap:11px; padding:10px 12px 10px 10px;
  background:rgba(14,16,26,.94); backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow-hi);
  max-width:min(320px, calc(100vw - 32px)); animation:tkin .35s cubic-bezier(.2,.8,.3,1) both}
@media(min-width:900px){ .ticker{bottom:20px} }
@keyframes tkin{from{opacity:0; transform:translateX(-18px)} to{opacity:1; transform:none}}
/* ⛤ 2026-09-01: เดิมเป็นวงกลมแดงเปล่า ๆ ไม่มีอะไรข้างในเลย
   ⇒ ดูเหมือนรูปโหลดไม่ขึ้นมากกว่าจะเป็นดีไซน์ (เจ้าของเห็นจากคลิป)
   ⚠ ใส่รูปลูกค้าจริงไม่ได้ (ข้อมูลส่วนตัว) ⇒ ใช้สัญลักษณ์คนกลาง ๆ แทน
   ⚠ ฝัง SVG เป็น mask ไม่ใช่ background-image เพื่อให้สีตามธีมได้ */
.ticker .tav{width:34px; height:34px; border-radius:11px; flex:none;
  background:linear-gradient(140deg,var(--ember-deep),var(--ember));
  position:relative}
.ticker .tav::after{content:""; position:absolute; inset:0; opacity:.82;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/17px 17px no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/17px 17px no-repeat}
.ticker .tbody{min-width:0}
.ticker b{display:block; font-size:13px; font-weight:500; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.ticker span{font-size:11.5px; color:var(--tx3); font-family:"IBM Plex Mono",monospace}
/* ⛔⛤ วัดจริง 2026-09-03: ป้ายลอยไปทับ "ปุ่ม" ในหน้าสินค้าจนกดไม่ได้
   (elementFromPoint ตรงกลางปุ่มคืนตัวป้าย ไม่ใช่ปุ่ม) — ลูกค้ากดการ์ดสินค้า
   แล้วโดนป้ายกินไปเฉย ๆ โดยไม่มีอะไรบอก
   ⇒ ตัวป้ายเป็นของ "อ่านอย่างเดียว" ⇒ ให้นิ้วทะลุผ่านไปหาของข้างล่างได้
     เหลือแค่ปุ่มปิดที่รับการกดจริง */
.ticker{pointer-events:none}
.ticker .tx{pointer-events:auto; margin-left:4px; color:var(--tx3);
  padding:6px; border-radius:8px; flex:none}
.ticker .tx:hover{color:var(--tx)}

/* ══ ปุ่ม ☰ + แผงเมนูเลื่อนขึ้นจากล่าง ══
   ⛤ มีไว้เพราะเมนูหลักถูกซ่อนตั้งแต่ต่ำกว่า 1180px ⇒ มือถือเข้าไม่ถึงสักหัวข้อ
   ⚠ จุดตัดต้องเท่ากับที่ซ่อนเมนูเป๊ะ (1180) ไม่งั้นมีช่วงที่ไม่มีทั้งสองอย่าง
      หรือมีทั้งสองอย่างพร้อมกัน */
.navbtn{display:none}
@media(max-width:1180px){ .navbtn{display:grid} }

.sheetwrap{position:fixed; inset:0; z-index:130; display:flex;
  align-items:flex-end}
.sheetbg{position:absolute; inset:0; background:rgba(0,0,0,.62);
  animation:shfade .2s ease both}
.sheetin{position:relative; width:100%; background:var(--surface);
  border-top:1px solid var(--line); border-radius:22px 22px 0 0;
  padding:10px 14px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 50px rgba(0,0,0,.6);
  animation:shup .26s cubic-bezier(.2,.8,.3,1) both;
  max-height:82vh; overflow-y:auto}
@keyframes shfade{from{opacity:0} to{opacity:1}}
@keyframes shup{from{transform:translateY(100%)} to{transform:none}}
.grab{display:block; width:42px; height:4px; border-radius:9px;
  background:var(--line); margin:0 auto 10px}
.sheetnav{display:grid}
/* ⛔ 52px ไม่ใช่เลขสวย ๆ — เป็นเป้าแตะขั้นต่ำ 44px บวกระยะกันกดพลาด */
.sheetnav a{display:flex; align-items:center; gap:12px; min-height:52px;
  padding:0 6px; color:var(--tx); font-size:15px;
  border-bottom:1px solid var(--line)}
.sheetnav a:last-child{border-bottom:0}
.sheetnav a.on{color:var(--ember-lit); font-weight:600}
.sheetnav a .sdot{width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--ember); opacity:0}
.sheetnav a.on .sdot{opacity:1}
@media(prefers-reduced-motion:reduce){
  :root:not(.hs-on) .sheetbg,:root:not(.hs-on) .sheetin{animation:none}
}
.hs-off .sheetbg,.hs-off .sheetin{animation:none}

/* ── เมนูล่างบนมือถือ ── */
.bottomnav{position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:grid; grid-template-columns:repeat(5,1fr);   /* ⚠ ต้องเท่าจำนวนปุ่มจริง ไม่งั้นตกแถวสองทับเนื้อหา */
  background:rgba(9,10,16,.92); backdrop-filter:blur(18px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:900px){ .bottomnav{display:none} }
.bottomnav a{display:grid; place-items:center; gap:4px; padding:9px 0 8px;
  font-size:11px; color:var(--tx3); transition:color .18s}
.bottomnav a.on{color:var(--vio-lit)}

/* ── ท้ายเว็บ ── */
/* ── แถบหัวบนจอมือถือจริง ──
   ⛔⛤ เจอ 2026-09-03: ชิปบัญชีกว้าง 144px ⇒ แถบหัวยาวถึง 414px
      บนจอ 320/360/390 มันล้นออกนอกจอ ชิปโดนตัดครึ่ง
   ⚠ ที่ไม่มีใครเห็นมาก่อน เพราะ **ด่านตรวจหัวเว็บเริ่มวัดที่ 768px**
     และตัววัดชั่วคราวตั้ง isMobile:true ซึ่งบังคับความกว้าง CSS เป็น 414
     เสมอไม่ว่าสั่งกี่พิกเซล ⇒ "วัดจอ 320" จริง ๆ คือวัด 414 มาตลอด
   ⇒ จอแคบเหลือแค่รูปโปรไฟล์ (ยังกดเข้าเมนูบัญชีได้เหมือนเดิม)
     ชื่อกับลูกศรไปโผล่ในเมนูที่กดเข้าไปอยู่แล้ว */
.bnm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:479px){
  .chipacct{padding:5px; gap:0}
  .chipacct > :not(.av){display:none}
  /* ⛔ ห้ามย่อปุ่มกลมให้เล็กกว่า 44px เพื่อให้พอดี — นั่นคือเป้าแตะขั้นต่ำ
     ที่ต้องรักษาไว้ · ย่อ "ระยะห่าง" กับ "ชิปบัญชี" แทน
     ⚠ กฎย่อแถบหัวเว็บของจอแคบอยู่ **ท้ายไฟล์** (ค้นคำว่า "แถบหัวเว็บจอแคบ")
       เพราะต้องอยู่หลังบล็อก max-width:760px ไม่งั้นถูกทับ */
}
@media(max-width:359px){
  .brand{font-size:14px}
  .brand .mk{width:26px; height:26px}
}

/* ── เป้าแตะบนอุปกรณ์ที่ใช้นิ้ว ──
   ⛤ กฎเดิมของโปรเจกต์ (บรรทัด ~458) ยกเว้นลิงก์กลางประโยคไว้ ถูกแล้ว —
      แต่สองอันนี้เป็นลิงก์ "ยืนเดี่ยว" ที่กดพลาดแล้วไปโดนของข้าง ๆ
      · .slink ปุ่มลัดในการ์ดขั้นตอน สูงแค่ 22px
      · เบรดครัมบ์ "หน้าแรก" สูง 35px
   ⚠ ใช้ pointer:coarse ไม่ใช่ความกว้างจอ — จอกว้างที่เป็นทัชสกรีนก็ต้องได้
     และคอมที่ย่อหน้าต่างแคบแต่ใช้เมาส์ ไม่ต้องถ่างจนย่อหน้าดูพัง */
/* ⚠ นับหน้าต่างแคบ (≤900) เป็นบริบทนิ้วด้วย — โน้ตบุ๊กจอสัมผัสกับแท็บเล็ต
   ที่รายงานว่ามีเมาส์ก็มีอยู่จริง และสองอันนี้เป็นปุ่มยืนเดี่ยว ไม่ใช่
   ลิงก์กลางย่อหน้า จึงไม่เข้าข้อยกเว้นของกฎเดิม */
@media (pointer:coarse), (max-width:900px){
  .steps3 .slink{margin-top:6px; min-height:44px; display:inline-flex;
    align-items:center}
  .crumb a{min-height:44px; display:inline-flex; align-items:center}
  /* ⛤ 2026-09-13: สูง 44px แล้วก็จริง แต่ **กว้างแค่ 30-38px** สำหรับคำสั้น
     อย่าง "สินค้า" / "คลังคีย์" ⇒ นิ้วยังกดพลาดไปโดนตัวข้าง ๆ ได้
     ⚠ ขยายด้วย padding แล้วหักคืนด้วย margin ติดลบ ⇒ พื้นที่กดโตขึ้น
       แต่ตัวอักษรกับระยะห่างในแถวอยู่ที่เดิมเป๊ะ
     ⚠ ต้องอยู่ในบล็อกนี้ ไม่ใช่บล็อก (hover:none) and (pointer:coarse)
       — ตัววัดจอมือถือใช้ hasTouch อย่างเดียว ซึ่งไม่ทำให้ hover:none ติด */
  .crumb a, .crumbs a{padding-inline:8px; margin-inline:-8px}
  /* ⛤ 2026-09-13 รอบ 9 · เส้นทางของหลังร้านเพิ่งกลายเป็นลิงก์จริง
     ⇒ ต้องได้เป้าแตะเท่ากับเส้นทางฝั่งหน้าร้าน ไม่งั้นสูงแค่ 27px */
  .adcrumb a{min-height:44px; display:inline-flex; align-items:center;
    padding-inline:8px; margin-inline:-8px}
  /* ⛔ ปุ่ม "ปุ่มลัด" ไม่มีประโยชน์บนเครื่องที่ไม่มีคีย์บอร์ด ⇒ ซ่อนไปเลย
     ดีกว่าถ่างให้ได้ขนาดนิ้วแล้วเบียดแถบบนจนของที่ใช้จริงไม่มีที่
     ⛔⛤ ต้องเขียน `.iconbtn.adkeys` ไม่ใช่ `.adkeys` เฉย ๆ — `.iconbtn.sm`
        มีน้ำหนักสองคลาส กฎคลาสเดียวแพ้เสมอ (คำสั่งในมีเดียไม่เพิ่มน้ำหนักให้)
        เคยพลาดกฎเดียวกันนี้มาแล้วกับ `.btn` */
  .iconbtn.adkeys{display:none}
  /* ป้ายปุ่มลัดในปุ่มค้นหาก็เช่นกัน — กินที่โดยไม่มีใครกดได้ */
  .adsearch kbd{display:none}
  /* ⛔⛤ แถบบนของหลังร้านไม่ตัดบรรทัด (flex ไม่ wrap) ⇒ ของที่เพิ่มเข้ามา
     ดันเกินขอบจอแคบแล้วทั้งหน้าเลื่อนซ้ายขวาได้
     ⇒ จอแคบเก็บไว้เฉพาะของที่ไม่มีทางอื่น: เมนู · เส้นทาง · ค้นหา · โหลดใหม่ · บัญชี
       "หน้าร้าน" ยังไปได้จากรางเมนูและเมนูบัญชี จึงตัดออกจากแถบบนได้ */
  .btn.adstore{display:none}
  /* เส้นทางต้องไม่ถูกบีบจนเป้าแตะแคบกว่านิ้ว — ให้ชื่อหน้าเป็นตัวที่ยอมหด */
  .adcrumb{min-width:0; overflow:hidden}
  .adcrumb a{flex:none}
  .adcrumb b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* ⛔⛤ จอ ≤520 · แถบบนของหลังร้านไม่ตัดบรรทัด ⇒ ของเกินขอบแล้วทั้งหน้าเลื่อนได้
   ⇒ เหลือแต่ไอคอน: ชื่อหน้ายังอ่านได้จากรางเมนูที่เน้นอยู่ และจากหัวเรื่องของหน้า */
@media(max-width:520px){
  .adcrumb span, .adcrumb b{display:none}
  /* ⚠ จำกัดขอบเขตไว้ที่แถบบนของหลังร้านเท่านั้น — `.btn .lb` ลอย ๆ จะไป
     ซ่อนป้ายในปุ่มของหน้าร้านทั้งเว็บด้วย */
  .adtopbar .btn .lb{display:none}
  /* เหลือแต่ไอคอนแล้วต้องยังกว้างพอนิ้ว — ไม่งั้นได้ปุ่ม 36px ที่กดพลาดตลอด */
  .adtopbar .btn.sm{padding-inline:10px; min-width:44px; justify-content:center}
}

/* ══ ปรับให้พอดีมือถือแต่ละขนาด (วัดจริง 320 / 360 / 390 / 430 / 768 / 900) ══ */

/* ── ป้าย "เพิ่งซื้อ" ──
   ⛔⛤ เดิมเป็นกล่องลอยกว้าง 320px กลางฝั่งซ้าย ⇒ บนจอ 390 มันทับการ์ดสินค้า
      และหน้าต่างโปรแกรมพอดี (เจ้าของเห็นจากภาพหน้าจอ)
   ⇒ จอแคบ: เป็นแถบบางเต็มความกว้าง "เหนือเมนูล่าง" — บังพื้นที่น้อยลงมาก
     และอ่านออกว่าเป็นของระบบ ไม่ใช่ของที่หลุดมาทับ */
@media(max-width:899px){
  .ticker{left:9px; right:9px; max-width:none; border-radius:999px;
    padding:8px 10px; gap:9px;
    bottom:calc(78px + env(safe-area-inset-bottom))}
  .ticker .tav{width:27px; height:27px; border-radius:999px}
  .ticker .tav::after{-webkit-mask-size:14px 14px; mask-size:14px 14px}
  .ticker b{font-size:12px}
  .ticker span{font-size:10px}
}
/* ⛔⛤ 2026-09-11 ตรงนี้เคยมี @media(min-width:900px){ .foot{padding-bottom:150px} }
   ซึ่ง **ไม่เคยมีผล** เพราะกฎ .foot ตัวจริงอยู่ท้ายไฟล์ (บรรทัดหลังกว่า
   น้ำหนักเท่ากัน) แล้วตั้ง padding-bottom:44px ทับทิ้ง
   ⇒ ย้ายไปแก้ที่กฎ .foot ตัวจริงด้วย max(…, var(--ticker-space)) แทน */

/* ── การ์ดสินค้าบนมือถือ: รูปเล็กซ้าย เนื้อหาขวา ──
   ⛔⛤ ของเดิมรูปเป็นสี่เหลี่ยมจัตุรัสเต็มความกว้าง ⇒ จอ 390 เห็นได้ **ใบเดียว**
      ต่อหนึ่งหน้าจอ · เลือกของเทียบกันไม่ได้เลยถ้าไม่เลื่อนไปมา
   ⚠ ใช้ min-width:0 ทุกคอลัมน์ ไม่งั้นข้อความยาวดันกริดจนล้นจอ */
@media(max-width:659px){
  .card{display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px;
    align-items:start; padding:11px}
  .art{aspect-ratio:1; border-radius:10px}
  .ribbon{top:6px; right:6px; font-size:10px; padding:3px 8px}
  .cbody{padding:0; gap:5px; min-width:0}
  .cbody p{font-size:12.5px; line-height:1.55}
  .ctitle{font-size:14.5px}
  .card:hover{transform:none}
}
@media(max-width:399px){
  .card{grid-template-columns:78px minmax(0,1fr); gap:10px}
  .ctitle{font-size:13.5px}
}

/* ── ท้ายเว็บ: 4 กลุ่มลิงก์เรียงลงมาเป็นแถวเดียว = 551px บนมือถือ ──
   ⇒ จับคู่เป็น 2 คอลัมน์ ลิงก์ทุกอันยังอยู่ครบ แค่ไม่ยาวเป็นหางว่าว */
@media(max-width:759px){
  .fgrid{grid-template-columns:1fr 1fr; gap:22px 18px}
  .fgrid > :first-child{grid-column:1 / -1}
  .fgrid ul{gap:8px; font-size:13.5px}
  .foot{padding:34px 0 96px; margin-top:40px}
}

/* ── สี่ขั้นตอน + การ์ดจุดขาย: บนมือถือเรียงเป็น "แถวนอน" ──
   ⛔⛤ เคยคิดจะทำ 2×2 แต่วัดแล้วไม่เข้าท่า: จอ 390 แบ่งสองคอลัมน์เหลือ
      คอลัมน์ละ ~178px ⇒ ข้อความไทยตกบรรทัดละ ~14 ตัวอักษร สูงกว่าเดิมอีก
   ⇒ เลขอยู่ซ้าย เนื้อหาอยู่ขวา (ท่าเดียวกับการ์ดสินค้า) อ่านไวและเตี้ยลงจริง
   ⚠ minmax(0,1fr) เสมอ — ไม่งั้นคำยาว ๆ ดันกริดจนล้นจอ */
@media(max-width:659px){
  .steps3{gap:10px}
  .steps3 .s{display:grid; grid-template-columns:38px minmax(0,1fr);
    gap:12px; padding:14px 15px; align-items:start}
  .steps3 .s .num{margin:0; grid-row:1 / span 3}
  .steps3 .s h3{font-size:15px; margin-bottom:4px}
  .steps3 .s p{font-size:13px}

  .trust{gap:10px}
  .trust .t{display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px;
    padding:13px 15px; align-items:start}
  .trust .t svg{grid-row:1 / span 2; margin-top:2px}
}

/* ⚠ ระยะล่าง = ค่าเดิม หรือพื้นที่ที่ป้าย "เพิ่งซื้อ" กินอยู่ อันไหนมากกว่า
   (บวกกันตรง ๆ ไม่ได้ — วันที่ป้ายไม่โผล่จะเหลือช่องว่างเปล่า ๆ ท้ายหน้า) */
.foot{border-top:1px solid var(--line); margin-top:56px;
  padding:44px 0 max(96px, var(--ticker-space)); background:var(--bg-soft)}
@media(min-width:900px){ .foot{padding-bottom:max(44px, var(--ticker-space))} }
.fgrid{display:grid; gap:30px}
@media(min-width:760px){ .fgrid{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.fgrid h4{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tx3); margin:0 0 14px; font-weight:400}
.fgrid ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14px; color:var(--tx2)}
.fgrid a:hover{color:var(--tx)}
.fabout{font-size:13.5px; color:var(--tx3); margin:14px 0 0; max-width:40ch}
.fbot{border-top:1px solid var(--line); margin-top:34px; padding-top:22px;
  display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--tx3)}
.fbot .sp{flex:1}

/* ── บันทึกงานออกแบบ ── */
.notes{background:var(--bg); padding:44px 0 80px; border-top:1px solid var(--line)}
.notes h2{font-size:21px; font-weight:600; margin-bottom:8px}
.ng{display:grid; gap:14px; margin-top:24px}
@media(min-width:760px){ .ng{grid-template-columns:repeat(2,1fr)} }
.nn{border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--glass)}
.nn b{display:block; font-size:14.5px; font-weight:600; margin-bottom:6px}
.nn p{margin:0; font-size:13.5px; color:var(--tx2)}
.warnbox{margin-top:20px; border:1px solid rgba(233,185,73,.34); background:rgba(233,185,73,.07);
  border-radius:14px; padding:18px 20px; font-size:13.5px; color:var(--tx2)}
.warnbox b{color:var(--gold)}
/* ⚠ :root:not(.hs-on) = ยกเว้นให้เฉพาะคนที่กด ?motion=on เอง */
@media (prefers-reduced-motion:reduce){
  :root:not(.hs-on) *{animation:none !important; transition:none !important}}


/* ── เบรดครัมบ์ (หน้าแยกกันจึงต้องบอกว่าอยู่ตรงไหน) ── */
.crumb{display:flex; align-items:center; gap:9px; padding:22px 0 0;
  font-size:13px; color:var(--tx3); flex-wrap:wrap}
.crumb a{color:var(--tx2); border-bottom:1px solid transparent; padding-bottom:1px}
.crumb a:hover{color:var(--tx); border-bottom-color:var(--line-2)}
.crumb b{color:var(--tx); font-weight:500}

/* การ์ดหมวดกดได้ทั้งใบ */
a.card{color:inherit}
a.card:focus-visible{outline:2px solid var(--vio-lit); outline-offset:3px}

/* ตัวเลขขั้นตอนในหน้าคู่มือ */
.why .ic b{font-family:"IBM Plex Mono",monospace; font-size:18px; font-weight:600;
  color:var(--vio-lit)}

/* ── ข้ามไปเนื้อหา (แป้น Tab ครั้งแรกต้องเจออันนี้) ── */
.skip{position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ember-btn); color:#fff; padding:12px 18px; border-radius:0 0 12px 0;
  font-weight:600}
.skip:focus{left:0}

/* ── ป้ายความน่าเชื่อถือ ── */
.trust{display:grid; gap:12px; grid-template-columns:1fr; margin-top:34px}
@media(min-width:640px){ .trust{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .trust{grid-template-columns:repeat(4,1fr)} }
.trust .t{display:flex; align-items:flex-start; gap:12px; padding:16px 18px; text-align:left}
.trust .t svg{color:var(--ember-lit); flex:none; margin-top:2px}
.trust .t b{display:block; font-size:14.5px; font-weight:600}
.trust .t span{font-size:12.5px; color:var(--tx3); line-height:1.6}

/* ── ขั้นตอนการทำงาน ── */
.steps3{display:grid; gap:16px; counter-reset:s}
@media(min-width:820px){ .steps3{grid-template-columns:repeat(3,1fr)} }
.steps3 .s{position:relative; padding:24px 22px}
.steps3 .s .num{display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:12px; background:rgba(255,59,59,.12); border:1px solid var(--line-2);
  color:var(--ember-lit); font-family:"IBM Plex Mono",monospace; font-weight:600;
  margin-bottom:14px}
.steps3 .s h3{font-size:16.5px; font-weight:600; margin-bottom:7px}
.steps3 .s p{margin:0; font-size:13.5px; color:var(--tx2)}

/* ── ช่องรหัสผ่านที่กดดูได้ ── */
.pw{position:relative}
.pw .input{padding-right:52px}
.pw button{position:absolute; right:8px; top:50%; translate:0 -50%; width:36px; height:36px;
  display:grid; place-items:center; border-radius:9px; color:var(--tx3)}
.pw button:hover{color:var(--tx); background:rgba(255,255,255,.06)}

/* ── ข้อความผิดใต้ช่องกรอก ── */
.input.bad{border-color:var(--bad)}
.err{display:block; font-size:12.5px; color:var(--bad); margin-top:6px; min-height:0}

/* ── โครงร่างตอนกำลังโหลด ── */
@keyframes sk{0%{opacity:.45}50%{opacity:.85}100%{opacity:.45}}
/* ⚠ เดิมโครงร่างขึ้นทันทีที่เปิดหน้า ⇒ โหลดเร็ว ๆ ก็ยังเห็นแวบหนึ่งทุกครั้ง
   รีเฟรชรัว ๆ เลยเห็นเป็นของจาง ๆ กะพริบไม่หยุด · หน่วงให้โผล่หลัง 220ms
   ถ้าข้อมูลมาก่อนก็ถูกลบไปแล้ว ลูกค้าจะไม่เห็นอะไรกะพริบเลย */
.sk{background:rgba(255,255,255,.06); border-radius:8px;
  animation:skin .12s linear 0.22s both, sk 1.3s ease-in-out 0.22s infinite}
@keyframes skin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .sk{animation:none} }

/* ── ปุ่มหลักบนแถบเมนู — จอแคบซ่อนไว้ เพราะมีเมนูล่างกับปุ่มในหน้าอยู่แล้ว ── */
.topcta{display:none}
@media(min-width:900px){ .topcta{display:inline-flex} }

/* ── สไปรต์ภาพปก: ต้องไม่กินที่ในหน้า ── */
.sprite{position:absolute; width:0; height:0; overflow:hidden}

/* ═══════════ หน้าสินค้า: แถบกรอง · โครงร่างระหว่างโหลด ═══════════ */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap}

.filters{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:26px 0 20px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{min-height:40px; padding:0 16px; border-radius:999px; font-size:14px;
  border:1px solid var(--line); background:var(--glass); color:var(--tx2);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease),
             background var(--t) var(--ease)}
.chip:hover{color:var(--tx); border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:rgba(255,59,59,.14); border-color:var(--ember);
  color:var(--tx); font-weight:600}
/* จำนวนใบในแต่ละตัวกรองของคลังคีย์ (2026-09-13) */
.chip .c{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--tx3);
  margin-left:7px}
.chip[aria-pressed="true"] .c{color:var(--tx2)}
.search{position:relative; display:flex; align-items:center; margin-left:auto; min-width:220px}
.search svg{position:absolute; left:14px; color:var(--tx3); pointer-events:none}
.search .input{padding-left:42px; min-height:40px}
@media(max-width:640px){ .search{margin-left:0; width:100%} }

.sk-line{height:12px; margin:10px 0}
.sk-art{aspect-ratio:1/1; border-radius:11px}
.w20{width:20%} .w40{width:40%} .w60{width:60%} .w90{width:90%}
.sk-row{display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; padding:16px 18px;
  border-bottom:1px solid var(--line)}

.empty-box{padding:40px 24px; text-align:center}
.empty-box h3{font-size:17px; font-weight:600; margin-bottom:8px}
.empty-box p{margin:0 auto 16px; color:var(--tx3); font-size:14px; max-width:44ch}

/* การ์ดสินค้าในแคตตาล็อก */
.card .pmeta{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.pill{font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--line);
  color:var(--tx2); background:var(--glass)}
.pill.soon{color:var(--warn); border-color:rgba(224,168,119,.34)}
.pill.gold{color:var(--gold); border-color:rgba(255,194,77,.34)}

/* ═══════════ หน้ารายละเอียดสินค้า ═══════════ */
.pdhead{display:grid; gap:24px; padding:26px 0 0}
@media(min-width:900px){ .pdhead{grid-template-columns:minmax(0,420px) 1fr; align-items:start} }
.pdart{padding:12px; border-radius:var(--r-lg)}
.pdart svg{width:100%; height:auto; border-radius:12px; display:block}
.pdinfo h1{font-size:clamp(26px,4vw,40px); margin:10px 0 0}
.pdbody{color:var(--tx2); font-size:14.5px; margin:14px 0 0; max-width:60ch}
.pdfrom{display:flex; align-items:baseline; gap:10px; margin:22px 0 0}
.from-label{font-size:13px; color:var(--tx3)}
.pdfrom .price{font-size:30px}

/* ตารางเปรียบเทียบแพ็ก */
.pktable{border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--glass)}
.pkrow{display:grid; gap:12px; align-items:center; padding:16px 18px;
  border-bottom:1px solid var(--line); grid-template-columns:1fr}
@media(min-width:760px){ .pkrow{grid-template-columns:1.6fr .8fr auto} }
.pkrow:last-child{border-bottom:0}
.pkrow.best{background:rgba(255,59,59,.06)}
.pkname{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pkname b{font-size:16px; font-weight:600}
.pksub{display:block; font-size:12.5px; color:var(--tx3); margin-top:3px}
.pkprice{display:flex; align-items:baseline; gap:8px}
.pkprice .price{font-size:22px}
.pkprice small{font-size:12px; color:var(--tx3); font-family:"IBM Plex Mono",monospace}
.pkrow .btn{justify-self:stretch}
@media(min-width:760px){ .pkrow .btn{justify-self:end; min-width:150px} }
.pkrow.off{opacity:.6}

/* รายการติ๊ก + ขั้นตอน */
.pane h2{font-size:18px; font-weight:600; margin-bottom:14px}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:14px;
  color:var(--tx2)}
.ticks li{display:grid; grid-template-columns:18px 1fr; gap:11px; align-items:start}
.ticks li::before{content:""; width:16px; height:16px; margin-top:3px; border-radius:5px;
  background:rgba(127,224,127,.16); border:1px solid rgba(127,224,127,.4)}
.steps-ol{margin:0; padding-left:20px; display:grid; gap:10px; font-size:14px;
  color:var(--tx2)}
.steps-ol li::marker{color:var(--ember-lit); font-family:"IBM Plex Mono",monospace}

/* ═══════════════════════════════════ หน้าเช็คเอาต์ · หน้าคำสั่งซื้อ ══ */

/* แถบบอกว่าตอนนี้อยู่ขั้นไหน — ⛔ สถานะต้องบอกด้วย "รูป" ไม่ใช่สีอย่างเดียว
   (ตัวเลขในวงกลม + ขีดเชื่อม) คนตาบอดสีต้องอ่านออกเท่ากัน */
.flow{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:6px 4px; align-items:center; font-size:12.5px; color:var(--tx3)}
.flow li{display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px;
  border:1px solid var(--line); border-radius:999px; background:var(--glass)}
.flow li b{display:grid; place-items:center; width:22px; height:22px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--tx3)}
.flow li.now{color:var(--tx); border-color:var(--line-2)}
.flow li.now b{background:var(--ember-btn); border-color:transparent; color:#fff}
.flow li.done{color:var(--tx2)}
.flow li.done b{background:rgba(127,224,127,.14); border-color:rgba(127,224,127,.42);
  color:var(--ok)}

/* แถวสรุปยอด */
.sumrow{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; font-size:13.5px; color:var(--tx3); border-bottom:1px solid var(--line)}
.sumrow b{color:var(--tx2); font-weight:600; font-variant-numeric:tabular-nums}
.sumrow.total{border-bottom:0; padding-top:14px; font-size:14.5px; color:var(--tx2)}
.sumrow.total b{font-size:23px}

/* ตัวเพิ่ม-ลดจำนวน — ปุ่มแตะได้จริงบนมือถือ (44px) */
.qty{display:flex; align-items:center; gap:10px; margin:16px 0 18px;
  font-size:13px; color:var(--tx3)}
.qty span{margin-right:auto}
.qbtn.qbtn{min-width:44px; min-height:44px; padding:0; display:grid; place-items:center;
  font-size:19px; line-height:1; font-family:"IBM Plex Mono",monospace}
.qnum{min-width:38px; text-align:center; font-family:"IBM Plex Mono",monospace;
  font-size:17px; color:var(--tx); font-variant-numeric:tabular-nums}

/* ป้ายสถานะเพิ่มเติมของคำสั่งซื้อ */
.tag.wait{color:var(--gold); border-color:rgba(255,194,77,.38);
  background:rgba(255,194,77,.10)}
.tag.dead{color:var(--tx3); border-color:var(--line); background:rgba(255,255,255,.03)}

/* แถวสินค้าในใบคำสั่งซื้อ — ใช้โครงเดียวกับตารางแพ็กเกจ แต่ไม่มีปุ่ม
   ⚠ ต้องอยู่ในสื่อจอกว้างเท่านั้น จอ 375 ให้ซ้อนบรรทัดเหมือนแถวปกติ
     ไม่งั้นชื่อแพ็กยาว ๆ กับราคาจะเบียดกันจนอ่านไม่ออก */
@media(min-width:760px){ .pkrow.plain{grid-template-columns:1fr auto} }

/* รายการคำสั่งซื้อย่อในหน้าคลัง */
.odrow{display:grid; gap:4px; padding:12px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit}
.odrow:last-of-type{border-bottom:0}
.odrow:hover{background:rgba(255,255,255,.02)}
.odtop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.odtop .price{font-size:15px}
.odsub{font-size:12.5px; color:var(--tx3); line-height:1.6}
.odsub.mono{font-family:"IBM Plex Mono",monospace; font-size:11px}

/* ⛔⛤ 2026-09-11 ผิวของหลังร้านรุ่นเก่า (.adnav .adtiles .adlog .adrow .adpick
   .sortbar .pagebar .adwallet .adsub .kindrow) ถูกลบทิ้งพร้อมกับโค้ดที่เรียกมัน
   — หน้าหลังร้านใช้ผิวชุดใหม่ (.adshell/.adtbl/.adstrip/...) ทั้งหมดแล้ว
   ⚠ .adcard .admeta .adacts .adedit .adimgs ยังอยู่ เพราะหน้าฝั่งลูกค้า
     กับกล่องแก้สินค้ายังใช้ของเดิม */
.adlist{display:grid; gap:12px; margin-top:20px}
.adcard{padding:18px}
.adtop{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.adtop .keyval{font-size:14px}
.admeta{display:flex; gap:6px 16px; flex-wrap:wrap; margin-top:8px; font-size:12.5px;
  color:var(--tx3)}
.adacts{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.linkbox{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tx2);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px; margin:10px 0; word-break:break-all}


/* ════════════════════════════════════════════════════════════════════
   ชั้นหน้าตาใหม่ 2026-08-31 — ต่อทับของเดิม ไม่ได้รื้อทิ้ง
   ════════════════════════════════════════════════════════════════════ */

/* ── ผิวพื้น: ตารางละเอียด + เกรนบาง ๆ ──
   ⚠ ทั้งคู่ position:fixed + pointer-events:none + z-index:0
     เนื้อหาอยู่ใน .wrap ซึ่ง position:relative อยู่แล้ว จึงลอยอยู่เหนือเสมอ */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/64px 64px;
  /* ⚠ เดิมหน้ากากแคบ 80% ⇒ กริดหายก่อนถึงขอบจอ ทำให้ขอบข้างเป็นดำตัน
     บนจอกว้าง ๆ ยิ่งเห็นชัด — ขยายให้ลามถึงขอบ */
  -webkit-mask-image:radial-gradient(ellipse 120% 62% at 50% 0%, #000 0%, transparent 82%);
          mask-image:radial-gradient(ellipse 120% 62% at 50% 0%, #000 0%, transparent 82%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
.wrap{position:relative; z-index:1}

/* ── ปุ่ม: ยกขึ้นตอนชี้ + เงาแดงบนปุ่มหลัก ── */
.btn{border-radius:999px; font-weight:600;
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease),
    background var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.btn:hover{transform:translateY(-2px); border-color:var(--line-2)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,#E01F38,var(--ember-btn));
  box-shadow:0 8px 22px rgba(196,21,43,.32)}
.btn.primary:hover{filter:none; box-shadow:0 12px 30px rgba(196,21,43,.44)}
.btn.sm{border-radius:999px}
.btn[disabled]{transform:none !important; box-shadow:none}

/* ── กระจก: ขอบบนเรืองแดงจาง ๆ ── */
.glass{background:linear-gradient(165deg,var(--surface),var(--bg-soft));
  backdrop-filter:blur(8px)}
/* css-dupe-ok: ตั้ง position:relative ให้กล่องทุกชนิดเพื่อรองรับเส้นเรือง
   ::after ด้านล่าง — ค่าตรงกับกฎเฉพาะของ .keycard ไม่ได้ทับให้เพี้ยน */
.card,.pane,.side,.keycard,.adcard{position:relative}
.card::after,.pane::after,.keycard::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ember),transparent); opacity:.42}
.card{transition:transform var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease),
  box-shadow var(--t-slow) var(--ease)}
.card:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow-hi)}

/* ── หัวเว็บ ── */
header.top{background:rgba(7,7,10,.78); backdrop-filter:blur(14px)}
header.top nav a{border-radius:9px; transition:color var(--t-fast) var(--ease),
  background var(--t-fast) var(--ease)}
.mk{box-shadow:0 0 18px rgba(255,45,70,.4)}

/* ── ฮีโร่แบบสองคอลัมน์ ── */
.hero{text-align:left; padding:72px 0 80px}
.hero::before{
  left:50%; top:-30%; width:1100px; height:640px; translate:-50% 0;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,45,70,.20), transparent 62%);
  filter:blur(22px); will-change:transform}
.hero::after{background:none}
.hgrid{display:grid; gap:44px; align-items:center}
@media(min-width:1000px){ .hgrid:not(.solo){grid-template-columns:1.02fr .98fr} }
/* ⚠ hero คอลัมน์เดียว — ข้อความยาวเกิน 70ch อ่านยาก ต้องคุมความกว้าง */
.hgrid.solo{max-width:62ch}
.hgrid.solo .sub{max-width:54ch}
.hero h1{margin:20px 0 14px}
.hero .sub{margin:0; max-width:52ch}
.hero .cta{justify-content:flex-start; margin-top:26px}
.hspec{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; font-size:12.5px;
  color:var(--tx3); font-family:"IBM Plex Mono",monospace}
.hspec b{color:var(--info); font-weight:500}

/* ── ภาพจำลองหน้าจอโปรแกรม (วาดเอง ไม่ใช่ภาพจากเกม) ── */
.shot{border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(160deg,var(--surface),var(--bg-soft));
  box-shadow:0 30px 70px rgba(0,0,0,.6); will-change:transform}
.shotbar{display:flex; align-items:center; gap:7px; padding:12px 15px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.shotbar i{width:9px; height:9px; border-radius:99px; background:#2E2E38; display:block}
.shotbar b{margin-left:8px; font-size:12px; color:var(--tx3); font-weight:500;
  font-family:"IBM Plex Mono",monospace}
.shotbody{padding:16px; display:grid; gap:12px}
.srow{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
  padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--glass)}
.srow .n{font-size:13.5px; font-weight:600}
.srow .s{font-size:11.5px; color:var(--tx3); font-family:"IBM Plex Mono",monospace}
.spark{height:64px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--glass); padding:10px 12px; display:flex; align-items:flex-end; gap:4px}
.spark i{flex:1; border-radius:3px 3px 0 0; display:block;
  background:linear-gradient(180deg,var(--ember),rgba(255,45,70,.18))}
.tag.tech{color:var(--info); border-color:rgba(95,208,232,.34);
  background:rgba(95,208,232,.08)}

/* ── แถวปุ่มชุมชน ── */
.commrow{display:flex; flex-wrap:wrap; gap:11px; margin-top:16px}
.commcard{display:grid; gap:14px; padding:24px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:linear-gradient(165deg,var(--surface),var(--bg-soft))}
@media(min-width:820px){ .commcard{grid-template-columns:1fr auto; align-items:center} }
.commcard h3{font-size:19px}
.commcard p{color:var(--tx3); font-size:13.5px; margin-top:6px; max-width:56ch}

/* ══════════════════ หน้าคู่มือใช้งาน (2026-09-13 รอบ 10) ══════════════════
   ⛔⛤ ชื่อคลาสขึ้นต้น gd ทุกตัว — เช็คแล้วว่าไม่ชนของเดิมสักชื่อ
      (ชื่อสั้น ๆ อย่าง .steps/.video เคยรั่วข้ามหน้ามาแล้วหลายรอบ)
   ⚠ แอนิเมชันทุกตัวในบล็อกนี้ "มีจุดจบ" หรือเกิดตอนชี้เท่านั้น
      ⛔ ห้ามมีอันไหนวนไม่จบ — หน้าคู่มือถูกเปิดค้างไว้ระหว่างทำตามทีละขั้น
   ⚠ กฎลดการเคลื่อนไหวรวมอยู่ที่บล็อก prefers-reduced-motion ด้านบนแล้ว
      (`*{animation:none!important;transition:none!important}`) ⇒ ที่นี่ไม่ต้องซ้ำ */
.gdhero{position:relative; overflow:hidden; padding:30px 0 8px;
  border-bottom:1px solid var(--line)}
/* แสงพื้นหลัง — ตกแต่งล้วน ไม่ขยับ ไม่กินซีพียู กดไม่โดน อ่านไม่เจอ */
.gdglow{position:absolute; inset:-30% -10% auto -10%; height:520px;
  pointer-events:none; filter:blur(70px); opacity:.5}
.gdglow i{position:absolute; display:block; border-radius:50%}
.gdglow .g1{left:4%; top:8%; width:420px; height:420px;
  background:radial-gradient(circle,rgba(255,45,70,.34),transparent 68%)}
.gdglow .g2{right:2%; top:22%; width:360px; height:360px;
  background:radial-gradient(circle,rgba(122,11,24,.42),transparent 70%)}
/* ⚠ ห้ามคุมความกว้างที่ตัวพ่อ — แถวตัวเลขสามช่องจะถูกบีบจนตกบรรทัด
   ⇒ คุมเฉพาะย่อหน้าที่ต้องอ่านเป็นบรรทัดสั้น (หัวเรื่อง + คำโปรย) */
.gdhead{position:relative; padding:26px 0 34px}
.gdhead h1{font-size:clamp(28px,4.6vw,46px); font-weight:700; line-height:1.14;
  letter-spacing:-.02em; margin-top:10px; max-width:22ch}
.gdhead .lead{max-width:56ch}
.gdhero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
/* สามตัวเลขใต้หัวเรื่อง — เส้นคั่นระหว่างช่อง อ่านเป็นชุดเดียว */
.gdfacts{display:flex; flex-wrap:wrap; gap:0 26px; margin-top:26px}
.gdfacts span{display:grid; gap:2px; padding:10px 26px 10px 0;
  border-right:1px solid var(--line)}
.gdfacts span:last-child{border-right:0; padding-right:0}
.gdfacts b{font-size:17px; font-weight:600; color:var(--tx)}
.gdfacts small{font-size:12px; color:var(--tx3)}

/* ── คลิป ── ⛔ ก่อนกดไม่มีคำขอไปหา YouTube เลย (ไม่มีรูปปกจากภายนอกด้วย)
   ⇒ ฉากหลังเป็นไล่เฉดของเราเอง ไม่ใช่ภาพ thumbnail */
/* ⚠ ไม่ปล่อยให้กว้างเต็ม .wrap — 16:9 ที่ 1200px สูง 675px กินทั้งจอ
   จนเลื่อนผ่านแล้วไม่เห็นว่ามีอะไรต่อ ⇒ คุมไว้แล้ววางกลาง */
.gdvideo{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg);
  overflow:hidden; border:1px solid var(--line-2); display:grid;
  place-items:center; cursor:pointer; max-width:960px; margin:0 auto;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,45,70,.22),transparent 62%),
    linear-gradient(165deg,var(--surface),#0A0A0E)}
/* ตารางบาง ๆ ให้พื้นหลังมีเนื้อ ไม่ใช่กล่องดำเปล่า ๆ (ไม่ใช่ภาพ ไม่โหลดอะไรเพิ่ม) */
.gdvideo::before{content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.5; -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent);
  mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent);
  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:52px 52px}
.gdvideo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.72))}
.gdvideo.on::before{display:none}
.gdvideo iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* ⛔⛤ 2026-09-13 · เจ้าของเจอเอง: "กดดูคลิปแล้ว แต่แดง ๆ ยังขึ้นกลางจอ"
   ของที่ต้องหายตอนคลิปขึ้นมีสี่อย่าง ไม่ใช่สอง — ลืมปุ่มเล่นกับพื้นหลังของเราเอง
   ⚠ ปุ่มเล่นไม่ได้แค่ "ดูเกะกะ" — มันอยู่ z-index สูงกว่าคลิป จึงกินการกด
     กลางจอไปด้วย ⇒ กดหยุด/เล่นตรงกลางคลิปไม่ติดเลย
   ⚠ ต้อง display:none ไม่ใช่ opacity:0 — จาง ๆ แต่ยังกินการกดอยู่เหมือนเดิม */
.gdvideo.on{cursor:default; border-color:var(--line); background:#000}
.gdvideo.on::after,
.gdvideo.on .gdvmeta,
.gdvideo.on .gdplay{display:none}
.gdplay{position:relative; z-index:2; width:86px; height:86px; border-radius:50%;
  border:0; cursor:pointer; display:grid; place-items:center; color:#fff;
  background:var(--ember-btn); box-shadow:0 16px 44px rgba(255,45,70,.4);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.gdplay svg{width:34px; height:34px; margin-left:5px}
/* วงแหวนขยาย — เกิดตอนชี้/โฟกัสเท่านั้น ไม่วนเองตอนอยู่เฉย ๆ */
.gdplay .ring{position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(255,45,70,.55); opacity:0; transform:scale(.86);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease)}
.gdvideo:hover .gdplay,.gdplay:focus-visible{transform:scale(1.07);
  box-shadow:0 20px 54px rgba(255,45,70,.55)}
.gdvideo:hover .gdplay .ring,.gdplay:focus-visible .ring{opacity:1; transform:scale(1)}
.gdvmeta{position:absolute; left:0; right:0; bottom:0; z-index:2; display:grid;
  gap:3px; padding:18px 22px}
.gdvmeta b{font-size:15.5px; font-weight:600}
.gdvmeta span{font-size:12px; color:var(--tx3)}
.gdchap{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:14px;
  max-width:960px; margin-left:auto; margin-right:auto}
.gdchap .sp{flex:1}

/* ── สามขั้น ── รางซ้ายเป็นเส้นต่อเนื่อง เติมสีตอนขั้นนั้นโผล่เข้าจอ */
.gdsteps{display:grid; gap:0; margin:0; padding:0; list-style:none}
.gdstep{position:relative; display:grid; grid-template-columns:26px 44px minmax(0,1fr);
  gap:0 16px; padding:0 0 30px}
.gdstep:last-child{padding-bottom:0}
.gdrail{position:relative; grid-column:1; justify-self:center; width:3px;
  background:rgba(255,255,255,.11); border-radius:3px}
.gdrail i{position:absolute; inset:0 0 auto 0; height:0; border-radius:3px;
  background:linear-gradient(180deg,var(--ember),rgba(255,45,70,.16));
  box-shadow:0 0 12px rgba(255,45,70,.45);
  transition:height 900ms var(--ease)}
.gdstep.lit .gdrail i{height:100%}
.gdrail.last{background:transparent}
.gdstep .num{grid-column:2; width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:19px; font-weight:600; color:var(--tx3);
  border:1px solid var(--line); background:var(--bg-soft);
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease), background var(--t) var(--ease)}
.gdstep.lit .num{color:#fff; border-color:transparent;
  background:linear-gradient(160deg,var(--ember),var(--ember-deep));
  box-shadow:0 10px 26px rgba(255,45,70,.34)}
.gdstep .bd{grid-column:3; padding-bottom:6px}
.gdstep h3{font-size:19px; font-weight:600; margin:9px 0 8px}
.gdstep>.bd>p{margin:0; color:var(--tx2); font-size:14.5px; max-width:66ch}
.gdul{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:7px}
.gdul li{position:relative; padding-left:19px; font-size:13.5px; color:var(--tx3)}
.gdul li::before{content:""; position:absolute; left:4px; top:8px; width:5px;
  height:5px; border-radius:50%; background:var(--ember)}
/* บรรทัด "ถ้าทำถูกจะเห็นอะไร" — ตัวเดียวที่เป็นกรอบเขียว ให้ตากวาดเจอทันที */
.gdok{margin:14px 0 0 !important; padding:10px 14px; border-radius:var(--r-sm);
  font-size:13.5px; color:var(--tx2) !important;
  border:1px solid rgba(127,224,127,.26); background:rgba(127,224,127,.06)}
.gdok b{color:var(--ok); font-weight:600}
.gdacts{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}

/* ── การ์ดสี่ใบ ── */
.gdreqs{margin-top:4px}
.gdreq .ic{width:44px; height:44px; border-radius:13px; display:grid;
  place-items:center; margin-bottom:14px; color:var(--ember-lit);
  border:1px solid var(--line-2); background:rgba(255,45,70,.08)}
.gdreq{padding:24px 22px; transition:transform var(--t) var(--ease),
  border-color var(--t) var(--ease)}
.gdreq:hover{transform:translateY(-3px); border-color:var(--line-2)}
.gdreq h3{font-size:16px; font-weight:600; margin-bottom:7px}
.gdreq p{margin:0; font-size:13.5px; color:var(--tx2)}

/* ── ทางลัดไปต่อ ── */
.gdnexts{margin-top:4px}
.gdnext{display:grid; gap:5px; padding:20px 22px; text-decoration:none;
  color:var(--tx); position:relative;
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease)}
.gdnext:hover{transform:translateY(-3px); border-color:var(--line-2)}
.gdnext b{font-size:15.5px; font-weight:600}
.gdnext span{font-size:12.5px; color:var(--tx3)}
.gdnext em{position:absolute; right:20px; top:19px; font-style:normal;
  color:var(--tx3); transition:transform var(--t) var(--ease), color var(--t) var(--ease)}
.gdnext:hover em{transform:translateX(4px); color:var(--ember-lit)}

/* ── ช่องค้นในคำถามที่เจอบ่อย ── */
.gdfhead .sp{flex:1}
.gdsearch{display:flex; align-items:center; gap:9px; padding:0 14px; min-height:42px;
  border:1px solid var(--line); border-radius:999px; background:var(--glass);
  color:var(--tx3); min-width:min(320px,100%);
  transition:border-color var(--t-fast) var(--ease)}
.gdsearch:focus-within{border-color:var(--line-2)}
.gdsearch input{flex:1; min-width:0; border:0; background:none; color:var(--tx);
  font:inherit; font-size:13.5px; outline:none}
.gdfaq details[hidden]{display:none}
.gdempty{margin:14px 2px 0; font-size:13.5px; color:var(--tx3)}

/* ══════════ หน้าสินค้า · หน้ากระเป๋าเงิน · หน้าดูโปรแกรม (2026-09-13 รอบ 11) ══
   ⛔⛤ ชื่อคลาสขึ้นต้น pl (product list) / wl (wallet) / pg (program)
      เช็คแล้วว่าไม่ชนของเดิมสักชื่อ
   ⚠ แอนิเมชันทุกตัว "มีจุดจบ" หรือเกิดตอนชี้เท่านั้น — ทุกหน้าถูกเปิดค้างได้ */

/* ── หัวหน้าแบบมีแสง (ใช้ร่วมกันหน้าสินค้า + หน้ากระเป๋าเงิน) ── */
.plhero,.wlhero{position:relative; overflow:hidden; padding:22px 0 4px}
.plglow{position:absolute; inset:-40% -10% auto -10%; height:480px;
  pointer-events:none; filter:blur(72px); opacity:.46}
.plglow i{position:absolute; display:block; border-radius:50%}
.plglow .g1{left:2%; top:10%; width:400px; height:400px;
  background:radial-gradient(circle,rgba(255,45,70,.32),transparent 68%)}
.plglow .g2{right:6%; top:26%; width:340px; height:340px;
  background:radial-gradient(circle,rgba(122,11,24,.4),transparent 70%)}
.plhead{position:relative; padding:22px 0 26px}
.plhead h1{font-size:clamp(28px,4.4vw,44px); font-weight:700; line-height:1.14;
  letter-spacing:-.02em; margin-top:10px; max-width:20ch}
.plhead .lead{max-width:58ch}

/* ── การ์ดสินค้า ── ⛔⛤ ร้านมีของแค่ 2 ชิ้น ⇒ การ์ดต้องใหญ่พอที่จะ "เต็มหน้า"
   ไม่งั้นเหลือพื้นดำครึ่งจอ อ่านแล้วเหมือนของหมด */
.plcards{gap:22px}
.plcards .card{overflow:hidden; transition:transform var(--t) var(--ease),
  border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.plcards .card:hover{transform:translateY(-5px); border-color:var(--line-2);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.plcards .art{position:relative}
/* ไล่เฉดล่างของภาพ — ตัวหนังสือใต้ภาพอ่านง่ายขึ้นโดยไม่ต้องใส่กล่องทึบ */
.plcards .art::after{content:""; position:absolute; inset:auto 0 0 0; height:46%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,10,14,.85))}
.plcards .art img{transition:transform 700ms var(--ease)}
.plcards .card:hover .art img{transform:scale(1.045)}
.plcards .crow{display:flex; align-items:baseline; gap:9px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line)}
/* ลูกศรท้ายการ์ด — บอกว่ากดได้ โดยไม่ต้องมีปุ่มจริงมาแย่งพื้นที่ */
.plcards .crow::after{content:"→"; margin-left:auto; color:var(--tx3);
  transition:transform var(--t) var(--ease), color var(--t) var(--ease)}
.plcards .card:hover .crow::after{transform:translateX(5px); color:var(--ember-lit)}

/* ── ตารางเทียบ PC / มือถือ ── */
.plcmp{display:grid; grid-template-columns:minmax(120px,.9fr) 1fr 1fr;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--glass); font-size:13.5px}
.plcmp>div{padding:13px 16px; border-bottom:1px solid var(--line)}
.plcmp>div:nth-child(3n){border-right:0}
.plcmp>div:nth-last-child(-n+3){border-bottom:0}
.plcmp .hd{background:var(--bg-soft); display:grid; gap:2px; align-content:center}
.plcmp .hd b{font-size:14.5px; font-weight:600}
.plcmp .hd span{font-size:11.5px; color:var(--tx3)}
.plcmp .rk{color:var(--tx3); background:rgba(255,255,255,.018)}
.plcmp .rv{color:var(--tx2)}
.plcmp .rv.good{color:var(--tx)}
/* ⛤ จุดเขียวหน้าข้อที่เป็นจุดแข็ง — บอกด้วยรูปทรง ไม่ใช่สีอย่างเดียว */
.plcmp .rv.good::before{content:"✓ "; color:var(--ok); font-weight:600}
@media(max-width:760px){
  .plcmp{grid-template-columns:1fr 1fr}
  .plcmp .hd:first-child{display:none}
  .plcmp .rk{grid-column:1/-1; background:var(--bg-soft); color:var(--tx2);
    font-weight:600; font-size:12.5px}
}

/* ── แถบความมั่นใจ 4 ช่อง ── */
.pltrust{display:grid; gap:18px; grid-template-columns:1fr;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  background:linear-gradient(165deg,var(--surface),var(--bg-soft))}
@media(min-width:700px){ .pltrust{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .pltrust{grid-template-columns:repeat(4,1fr)} }
.pltrust>div{display:grid; gap:5px; align-content:start}
.pltrust .ic{width:38px; height:38px; border-radius:11px; display:grid;
  place-items:center; margin-bottom:6px; color:var(--ember-lit);
  border:1px solid var(--line-2); background:rgba(255,45,70,.08)}
.pltrust b{font-size:14.5px; font-weight:600}
.pltrust span:not(.ic){font-size:12.5px; color:var(--tx3); line-height:1.65}

/* ── การ์ดยอดเงินในกระเป๋า ── */
.walletcard.wlbal{align-items:center}
.wlbal .amt{font-size:clamp(38px,6vw,56px)}
/* ⛔⛤ `.wc-side` เดิมเป็น flex:0 0 auto ⇒ ความกว้างเท่าของข้างใน
   พอใส่ปุ่มเติมด่วน 4 ปุ่มเข้าไป มันยื่นพ้นการ์ดบนจอ 320-360
   ⇒ ให้ยุบลงมาเป็นแถวของตัวเองและหดได้
   ⛔⛤ ต้องเขียน `.walletcard.wlbal .wc-side` (สามคลาส) ไม่ใช่ `.wlbal .wc-side`
      กฎเดิม `.walletcard .wc-side{flex:0 0 auto}` มีน้ำหนักเท่ากันแต่อยู่
      **ท้ายไฟล์กว่า** ⇒ มันชนะ · กับดักเดียวกับ `.btn.sm` ที่เจอมาแล้ว */
.walletcard.wlbal .wc-side{flex:1 1 240px; min-width:0}
.wlquick{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
  margin-bottom:10px}
.wlquick .btn{font-variant-numeric:tabular-nums}
.wlbal .wc-side .btn.block{width:100%}
@media(max-width:820px){ .wlquick{justify-content:flex-start} }

/* ══════════════ ศูนย์ช่วยเหลือ (2026-09-13 รอบ 12) ══════════════
   ⛤ หน้านี้คนเปิดมาตอน "กำลังหงุดหงิด" ⇒ ของชิ้นแรกต้องเป็นช่องค้น
      และทุกใบต้องมีทางไปทำต่อ ไม่ใช่อ่านจบแล้วจบกัน */
.hlhero{position:relative; overflow:hidden; padding:22px 0 4px}
.hlsearch{display:flex; align-items:center; gap:12px; margin-top:26px;
  padding:0 18px; min-height:58px; max-width:620px;
  border:1px solid var(--line); border-radius:999px; color:var(--tx3);
  background:rgba(0,0,0,.34);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.hlsearch:focus-within{border-color:var(--line-2);
  box-shadow:0 0 0 4px rgba(255,45,70,.1)}
.hlsearch input{flex:1; min-width:0; border:0; background:none; color:var(--tx);
  font:inherit; font-size:15px; outline:none}
.hlclear{border:0; background:var(--glass-2); color:var(--tx2); cursor:pointer;
  width:26px; height:26px; border-radius:999px; flex:none; font-size:12px;
  line-height:1; display:grid; place-items:center}
.hlclear:hover{background:var(--glass); color:var(--tx)}
.hlcount{margin:12px 2px 0; font-size:12.5px; color:var(--tx3); min-height:18px}

/* ── การ์ดอาการ ── */
.hlgrid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:700px){ .hlgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .hlgrid{grid-template-columns:repeat(3,1fr)} }
.hlcard{display:grid; gap:7px; align-content:start; padding:22px;
  text-decoration:none; color:var(--tx);
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease)}
.hlcard:hover{transform:translateY(-4px); border-color:var(--line-2);
  box-shadow:0 20px 44px rgba(0,0,0,.42)}
.hlcard .ic{width:40px; height:40px; border-radius:12px; display:grid;
  place-items:center; margin-bottom:6px; color:var(--ember-lit);
  border:1px solid var(--line-2); background:rgba(255,45,70,.08);
  transition:transform var(--t) var(--ease)}
.hlcard:hover .ic{transform:scale(1.06)}
.hlcard b{font-size:15.5px; font-weight:600; line-height:1.4}
.hlcard>span:not(.ic){font-size:13px; color:var(--tx3); line-height:1.7}
.hlcard em{font-style:normal; font-size:12.5px; color:var(--ember-lit);
  margin-top:6px; transition:transform var(--t) var(--ease)}
.hlcard:hover em{transform:translateX(4px)}
.hlcard[hidden]{display:none}

/* ── ชิปหมวด + คำถาม ── */
.hlcats{display:flex; gap:7px; flex-wrap:wrap}
.hlfaq details[hidden]{display:none}
.hlnone{margin:14px 2px 0; font-size:13.5px; color:var(--tx3)}

/* ── ยังไม่หาย ── ⛔ ไม่ใช่การ์ด "ทักแอดมิน" ซ้ำกับส่วนท้ายเว็บ
   ฝั่งขวาคือของที่ส่วนท้ายไม่มี: บอกว่าต้องเตรียมอะไรมาก่อนทัก */
.hlcta{display:grid; gap:22px; grid-template-columns:1fr; padding:26px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--surface),var(--bg-soft))}
@media(min-width:900px){ .hlcta{grid-template-columns:1.15fr .85fr; gap:34px} }
.hlcta h2{font-size:clamp(20px,2.6vw,26px); margin-top:6px}
.hlcta .tx>p{margin:10px 0 0; font-size:13.5px; color:var(--tx3); max-width:52ch}
.hlprep{border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; background:rgba(0,0,0,.26)}
.hlprep>b{display:block; font-size:13.5px; font-weight:600; margin-bottom:12px}
.hlprep ol{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.hlprep li{display:grid; grid-template-columns:22px 1fr; gap:11px;
  align-items:start; font-size:13px; color:var(--tx2)}
.hlprep li span{width:22px; height:22px; border-radius:7px; display:grid;
  place-items:center; font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  font-weight:600; color:var(--ember-lit);
  border:1px solid var(--line-2); background:rgba(255,45,70,.08)}
.hlprep>p{margin:14px 0 0; font-size:12px; color:var(--tx3); line-height:1.7}

/* ── หน้าดูโปรแกรม ── การ์ดตัวเลขกับแท็บให้อ่านเป็นชุดเดียวกับหน้าอื่น ── */
.pstats>div{transition:transform var(--t) var(--ease),
  border-color var(--t) var(--ease)}
.pstats>div:hover{transform:translateY(-3px); border-color:var(--line-2)}
/* ⛤ ช่องที่กำลังเปิดอยู่ต้องเด่นกว่าช่องอื่นชัด ๆ ไม่ใช่ต่างกันนิดเดียว */
.ptab.on{box-shadow:0 10px 26px rgba(255,45,70,.22)}
/* สลับหมวดแล้วเนื้อหาเลื่อนเข้ามา — จบใน 260ms ไม่วน
   ⛔⛤ ห้ามตั้งชื่อคลาสว่า `swap` เฉย ๆ — ชื่อนั้นถูกใช้แล้ว (ข้อความ "สลับ"
      ใต้ฟอร์มเข้าสู่ระบบ ซึ่งมี text-align:center) ⇒ ติดเข้าไปแล้วเนื้อหา
      ทั้งแผงหมวดกลายเป็นจัดกลาง · ตัวตรวจไม่จับให้เพราะกฎไม่ได้ประกาศซ้ำ
      และคลาสก็มีกฎรองรับอยู่แล้ว ⇒ ก่อนตั้งชื่อคลาสใหม่ต้อง grep ทุกครั้ง */
.pdetail.pdswap{animation:pgswap 260ms var(--ease) both}
@keyframes pgswap{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

@media(max-width:760px){
  .gdstep{grid-template-columns:20px 38px minmax(0,1fr); gap:0 12px}
  .gdstep .num{width:38px; height:38px; font-size:17px; border-radius:12px}
  .gdplay{width:66px; height:66px}
  .gdplay svg{width:26px; height:26px}
  .gdvmeta{padding:14px 16px}
  .gdfacts span{padding-right:18px}
}

/* ── หน้าบัญชี (เข้าสู่ระบบ · สมัครสมาชิก) ── */
.authbox{max-width:470px; margin:0 auto}
.authbox .pane{padding:28px}
.authbox h1{font-size:clamp(26px,4vw,34px)}
.field span{font-size:12.5px; color:var(--tx3)}
.input{border-radius:var(--r-sm); background:rgba(0,0,0,.35);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.input:focus{outline:none; border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(255,45,70,.16)}
.swap{text-align:center; font-size:13.5px; color:var(--tx3); margin-top:18px}
.swap a{color:var(--ember-lit); font-weight:600}
.okmark{color:var(--ok)} .badmark{color:var(--bad)}

/* ── ท้ายเว็บ ── */
.foot{background:linear-gradient(180deg,transparent,rgba(255,45,70,.035))}

/* ── การเคลื่อนไหว: เผยทีละส่วนตอนเลื่อนถึง ──
   ⛔⛤ ถ้า IntersectionObserver ไม่ทำงาน (เบราว์เซอร์เก่า/สคริปต์พัง)
      ของที่ opacity:0 จะหายถาวร = อ่านไม่ได้ ซื้อไม่ได้
      จึงตั้ง .rise ให้ "มองเห็นตามปกติ" ไว้ก่อน แล้วให้ JS เติม .anim เอง
      ⇒ ไม่มี JS = เห็นทุกอย่าง · มี JS = ได้แอนิเมชัน */
.rise.anim{opacity:0; transform:translateY(16px)}
.rise.anim.in{opacity:1; transform:none;
  transition:opacity 620ms var(--ease), transform 620ms var(--ease)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* ⚠ :root:not(.hs-on) = ยกเว้นให้เฉพาะคนที่กด ?motion=on เอง */
  :root:not(.hs-on) *,:root:not(.hs-on) *::before,:root:not(.hs-on) *::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important}
  :root:not(.hs-on) .rise.anim{opacity:1 !important; transform:none !important}
  :root:not(.hs-on) .hero::before{display:none}
  .btn:hover,.card:hover{transform:none}
}


/* ── รายละเอียดหน้าบัญชี ── */
.opt{font-style:normal; color:var(--tx3); font-weight:400; font-size:11.5px}
.authbox .hashline{margin-top:18px}
@media(max-width:900px){ .hidesm{display:none} }

/* ── เป้าแตะ ──
   ⛔ ปุ่มเล็กต้องยังแตะได้จริง — เดิม .btn.sm สูง 40px ต่ำกว่าเกณฑ์ 44px
   (ของที่เหลือแยกไปอยู่ในกฎจอแคบท้ายไฟล์ เพราะจอกว้างขนาดเดิมสวยกว่า) */
.btn.sm{min-height:44px}

/* ── หัวเว็บบนจอแคบ ──
   ⛔⛤ เดิมยัดปุ่มชุมชน+Discord+เลือกแพ็กเกจ+ชิปบัญชี ลงแถวเดียว
      จอ 375 ดันชิปบัญชีตกขอบขวา และปุ่มเหลือแต่วงกลมเปล่าเพราะข้อความถูกซ่อน
      ⇒ จอแคบเก็บแค่ แบรนด์ + ชิปบัญชี · ปุ่มชุมชน/Discord ยังอยู่ครบใน
        ฮีโร่ ท้ายเว็บ และหน้าช่วยเหลือ ซึ่งกดถึงได้เหมือนกัน */
@media(max-width:760px){
  header.top .j-line,
  header.top .j-discord,
  header.top .topcta{display:none}
  header .wrap{gap:10px}
}

/* ═══════════════════════════════ เมนูบัญชี · แจ้งเตือน · โปรไฟล์ · กระเป๋า ══ */
.acctwrap{position:relative; display:flex; align-items:center; gap:8px}
.iconbtn{position:relative; display:grid; place-items:center; width:44px; height:44px;
  border-radius:999px; border:1px solid var(--line); background:var(--glass);
  color:var(--tx2); cursor:pointer;
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease)}
.iconbtn:hover{border-color:var(--line-2); color:var(--tx)}
/* ปุ่มภาพเคลื่อนไหวตอนเปิดอยู่ — ต้องดูออกโดยไม่ต้องพึ่งสีอย่างเดียว
   (เพิ่มเส้นขอบเข้ม + จุดเรืองข้างใน ไม่ใช่แค่เปลี่ยนเฉดสี) */
#motionbtn[aria-pressed="true"]{border-color:rgba(255,45,70,.55);
  color:var(--ember-lit); box-shadow:0 0 0 1px rgba(255,45,70,.18) inset}
.iconbtn .dot{position:absolute; top:9px; right:10px; width:8px; height:8px;
  border-radius:99px; background:var(--ember); border:2px solid var(--bg)}

.acctmenu{position:absolute; right:0; top:calc(100% + 10px); width:252px; z-index:60;
  border-radius:var(--r); border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(165deg,var(--surface),var(--bg-soft));
  box-shadow:var(--shadow-hi)}
.acctmenu.wide{width:320px; max-height:420px; overflow-y:auto}
.acctmenu .mhead{display:flex; gap:11px; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--line)}
/* ⛔⛤ เคยไม่มีกฎไหนตั้งขนาดให้รูปในหัวเมนูเลย (คำนวณออกมาเป็น auto)
   ⇒ วงกลมยืดผิดรูปจนดูเหมือนโดนตัดครึ่ง (เจ้าของทัก 2026-08-31
     "กางแท็บโปรไฟล์แต่เห็นไม่ครบ")
   ⚠ .chipacct .av ตั้ง 32px ไว้ แต่เจาะจงเฉพาะชิปมุมขวา ไม่ครอบมาถึงในเมนู */
.acctmenu .mhead .av{width:40px; height:40px; flex:none; border-radius:50%;
  border:1px solid var(--line-2); background-color:#22203C;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px}
.acctmenu .mhead > div{min-width:0}
.acctmenu .mhead b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acctmenu .mhead b{display:block; font-size:14px}
.acctmenu .mhead span{font-size:11.5px; color:var(--tx3);
  font-family:"IBM Plex Mono",monospace}
.acctmenu a,.acctmenu > button{display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 16px; font-size:13.5px; color:var(--tx2); text-align:left;
  background:none; border:0; cursor:pointer; min-height:44px; text-decoration:none}
.acctmenu a:hover,.acctmenu > button:hover{background:var(--glass-2); color:var(--tx)}
.acctmenu .sepline{height:1px; background:var(--line); margin:4px 0}
.acctmenu .danger{color:var(--bad)}
.acctmenu .bal{margin-left:auto; font-family:"IBM Plex Mono",monospace;
  color:var(--gold); font-size:12.5px}
@media(max-width:520px){ .acctmenu{width:min(88vw,300px)} .acctmenu.wide{width:min(92vw,340px)} }

/* แถวแจ้งเตือน */
.ntrow{display:grid; gap:3px; padding:12px 16px; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit}
.ntrow:last-child{border-bottom:0}
.ntrow:hover{background:var(--glass-2)}
.ntrow b{font-size:13px; display:flex; align-items:center; gap:8px}
.ntrow b i{width:7px; height:7px; border-radius:99px; background:var(--ember);
  display:block; flex:none}
.ntrow span{font-size:12px; color:var(--tx3); line-height:1.6}
.ntrow .t{font-size:10.5px; color:var(--tx3); font-family:"IBM Plex Mono",monospace}

/* รูปโปรไฟล์ */
.chipacct .av,.acctmenu .av{background-size:cover; background-position:center;
  display:grid; place-items:center; font-weight:700; color:#fff; font-size:13px}
.avpick{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:16px 0 10px}
.avbig{width:88px; height:88px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:32px; font-weight:700; color:#fff;
  border:1px solid var(--line-2); background-size:cover; background-position:center}
.avgrid{display:flex; gap:9px; flex-wrap:wrap}
.avgrid button{width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  cursor:pointer; transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.avgrid button:hover{transform:translateY(-2px)}
.avgrid button[aria-pressed="true"]{border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(255,45,70,.26)}
/* ⛔⛤ สีพื้นต้องเป็น "ตัวแปรสองสี" ไม่ใช่ background: linear-gradient(...) ตรง ๆ
   เพราะ JS วาดลายประจำตัวลง background-image แบบ inline ซึ่งชนะทุกกฎ
   ⇒ ถ้าสีพื้นมาจาก shorthand background ลายจะทับไล่สีจนหายเกลี้ยง
   ตอนนี้: ลายอยู่ชั้นบน · ไล่สีอยู่ชั้นล่าง · ทั้งคู่อยู่ใน background-image
   ของ .av เอง JS จึงแค่ตั้งค่าตัวแปร --av-pat ไม่ต้องไปแตะ background */
.av-ember{--av1:#E01F38; --av2:#5A0A14}
.av-cyan{--av1:#5FD0E8; --av2:#17515F}
.av-gold{--av1:#FFC24D; --av2:#6B4A0F}
.av-green{--av1:#7FE07F; --av2:#1E5A2A}
.av-violet{--av1:#B08CFF; --av2:#3A2470}
.av-slate{--av1:#8A8F98; --av2:#33363B}
[class*="av-"]{
  background-image:var(--av-pat,none),
    linear-gradient(140deg,var(--av1,#E01F38),var(--av2,#5A0A14));
  background-size:100% 100%, cover;
  background-repeat:no-repeat, no-repeat}

/* กระเป๋าเงิน */
.walletcard{padding:26px; border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:linear-gradient(150deg,rgba(255,45,70,.12),var(--bg-soft) 62%);
  position:relative; overflow:hidden; margin-bottom:16px}
.walletcard::after{content:""; position:absolute; right:-40px; top:-40px; width:220px;
  height:220px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,45,70,.20),transparent)}
.walletcard > *{position:relative}
.walletcard .amt{font-family:"Space Grotesk",sans-serif; font-size:clamp(34px,7vw,46px);
  font-weight:700; color:var(--gold); letter-spacing:-.02em; line-height:1.1;
  font-variant-numeric:tabular-nums}
.ledger{display:grid; gap:0}
.lrow{display:grid; grid-template-columns:1fr auto; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line); font-size:13.5px; align-items:center}
.lrow:last-child{border-bottom:0}
.lrow .s{font-size:11.5px; color:var(--tx3); font-family:"IBM Plex Mono",monospace;
  word-break:break-all}
.lrow .plus{color:var(--ok); font-family:"IBM Plex Mono",monospace; font-weight:600}
.lrow .minus{color:var(--tx2); font-family:"IBM Plex Mono",monospace; font-weight:600}
.topupline{display:grid; gap:2px; padding:10px 0; border-bottom:1px solid var(--line);
  font-size:12.5px}
.topupline:last-child{border-bottom:0}

/* ช่องคูปอง + แถบจ่ายด้วยกระเป๋า */
.couponrow{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end;
  margin:16px 0 4px}
.couponrow .field{margin:0}
.sumrow.save b{color:var(--ok)}
/* ══════════════════════════ กล่องชำระเงินหน้าใบสั่งซื้อ (รื้อใหม่ 2026-09-02) ══
   ⛔⛤ ปัญหาเดิมที่รื้อทิ้ง
     · ปุ่มแดง 2 ใบบนจอเดียว ("ไปเติมเงิน" กับ "ทักแอดมินในดิสคอร์ด")
       ปุ่มแดงแปลว่า "กดอันนี้" มีสองใบเมื่อไหร่ ความหมายหายทันที
     · เรื่องทักแอดมินพูดซ้ำ 2 ที่ (กล่องเตือน + ปุ่ม)
     · ยอดที่ต้องจ่ายอยู่คนละกล่องกับปุ่มจ่าย ต้องกวาดตาหา
     · เวลาหมดอายุอยู่แถบขวา คนละสายตากับปุ่ม — สำคัญขึ้นมากหลังแก้ B4
       เพราะตอนนี้ใบที่ค้าง "กันสต๊อก" ไว้จริง
   ⚠ กติกาที่ต้องรักษาไว้: **ปุ่มแดงได้ใบเดียวต่อสถานะ**
     (มีเทสคุมใน test_order_pay_ui_2026_09_02.py) */

/* ── หัวกล่อง: ยอดที่ต้องชำระ ── */
.duehead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0;
  padding-bottom:15px; border-bottom:1px solid var(--line); margin-bottom:17px}
.duehead .lab{font-size:13.5px; color:var(--tx3); font-weight:400}
.duehead .amt{margin-left:auto; font-size:29px; font-weight:700;
  color:var(--gold); letter-spacing:-.5px; font-family:"IBM Plex Mono",monospace}

/* ── การ์ดวิธีจ่าย ── */
.method{display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:15px 16px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--glass)}
/* ⚠ สีบอกสถานะ ห้ามใช้สีเดียวสื่อความหมายอย่างเดียว — ข้อความในการ์ดบอกซ้ำเสมอ */
.method.short{border-color:rgba(255,194,77,.3); background:rgba(255,194,77,.05)}
.method.ready{border-color:rgba(127,224,127,.28); background:rgba(127,224,127,.05)}
/* ⛤ ไอคอนต้องเป็น SVG จากชุดเดียวกับทั้งเว็บ ไม่ใช่อีโมจิ
   (อีโมจิให้ระบบปฏิบัติการวาดเอง — คนละสไตล์กับเว็บ และบนวินโดวส์
    👛 ออกมาเป็นก้อนสีชมพูอ่านไม่ออก · เห็นจากภาพหน้าจอตอนตรวจ 2026-09-02)
   ⛔⛤ สัญลักษณ์ใน icons.svg **ไม่ได้ตั้ง fill/stroke ไว้เอง** — ตั้งใจให้
      รับมาจากที่ใช้งาน · โปรแกรมเดสก์ท็อปตั้งไว้ในสไตล์ฐานของมัน แต่หน้าร้าน
      ไม่เคยใช้ชุดนี้เลยไม่มีกฎรองรับ ⇒ ไม่ตั้ง = เส้นกลายเป็นพื้นทึบสีดำ
      (เจอจากภาพหน้าจอ: ไอคอนออกมาเป็นวงกลมทึบ) */
.mic svg, .clock .cic{fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.method .mic{width:40px; height:40px; flex:none; border-radius:12px; display:grid;
  place-items:center; background:var(--glass-2); border:1px solid var(--line);
  color:var(--tx2)}
.method .mic svg{width:19px; height:19px}
.method .mtxt{min-width:0; flex:1 1 180px}
.method .mtxt b{display:block; font-size:14.5px; font-weight:600}
.method .mtxt span{display:block; font-size:12.5px; color:var(--tx3); margin-top:2px}
.method .btn{margin-left:auto; flex:none}
@media(max-width:560px){ .method .btn{margin-left:0; width:100%} }

.gapline{margin:14px 0 0; font-size:13px; color:var(--tx2); line-height:1.7}
.gapline b{color:var(--gold); font-family:"IBM Plex Mono",monospace}
.gapline.soft{color:var(--tx3)}

/* ── นาฬิกาหมดอายุ ── */
.clock{display:flex; align-items:center; gap:9px; margin:16px 0 0;
  font-size:12.8px; color:var(--tx3); line-height:1.7}
.clock b{color:var(--tx2); font-weight:600; font-family:"IBM Plex Mono",monospace}
.clock .cic{width:15px; height:15px; flex:none}
/* เหลือน้อย = เปลี่ยนทั้งสีและถ้อยคำ (ดู app.js) ไม่ใช่เปลี่ยนสีอย่างเดียว */
.clock.hot{color:var(--ember-lit)}
.clock.hot b{color:var(--ember-lit)}

/* ── ขั้นตอนแบบพับเก็บ ── */
details.how{margin-top:17px; border-top:1px solid var(--line); padding-top:15px}
details.how > summary{cursor:pointer; font-size:13.5px; color:var(--tx2);
  list-style:none; display:flex; align-items:center; gap:8px; font-weight:500;
  min-height:32px}
details.how > summary::-webkit-details-marker{display:none}
details.how > summary::before{content:"▸"; color:var(--tx3); font-size:11px}
details.how[open] > summary::before{content:"▾"}
details.how > summary:focus-visible{outline:2px solid var(--ember-lit);
  outline-offset:3px; border-radius:6px}
details.how .steps-ol{margin-top:12px; font-size:13px; gap:7px}

/* ── แถวท้ายกล่อง: ทางช่วยเหลือ + ยกเลิก ── */
.payfoot{margin-top:17px; padding-top:15px; border-top:1px solid var(--line);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.payfoot p{margin:0; font-size:12.5px; color:var(--tx3); flex:1 1 250px;
  line-height:1.7}
.payfoot .btn{margin-left:auto}

/* ── กล่องข้อความตามสถานะ (แทน .ver ยาว ๆ ที่อ่านไม่ออกว่าดีหรือร้าย) ── */
.msgbox{display:flex; gap:13px; align-items:flex-start; padding:15px 17px;
  border-radius:var(--r); font-size:13.2px; line-height:1.75;
  border:1px solid var(--line); background:var(--glass); color:var(--tx3)}
.msgbox .mic{flex:none; display:grid; place-items:center; width:20px; height:20px;
  margin-top:1px; color:currentColor}
.msgbox .mic svg{width:19px; height:19px}
.msgbox.bad .mic{color:var(--ember-lit)}
.msgbox.good .mic{color:var(--ok)}
.msgbox.info .mic{color:var(--info)}
.msgbox b{color:var(--tx)}
.msgbox.bad{border-color:rgba(255,45,70,.32); background:rgba(255,45,70,.07);
  color:var(--tx2)}
.msgbox.good{border-color:rgba(127,224,127,.26); background:rgba(127,224,127,.05);
  color:var(--tx2)}
.msgbox.info{border-color:rgba(95,208,232,.24); background:rgba(95,208,232,.05);
  color:var(--tx2)}
/* ⛔ ประโยคห้ามพลาด (เช่น "อย่ากดจ่ายซ้ำ") ต้องเด่นกว่าตัวหนาธรรมดา */
.msgbox .no{color:var(--ember-lit); font-weight:700}

/* กรอบทั้งใบเปลี่ยนตามความหมาย — ผู้ใช้เห็นตั้งแต่ยังไม่ทันอ่าน */
.pane.iswarn{border-color:rgba(255,45,70,.3)}
.pane.isgood{border-color:rgba(127,224,127,.24)}

/* ── แถบฟีเจอร์จริงจากตัวโปรแกรม ── */
.featnav{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 4px}
.featgrid{display:grid; gap:14px; margin-top:18px}
@media(min-width:700px){ .featgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1060px){ .featgrid{grid-template-columns:repeat(4,1fr)} }
.feat{padding:18px; border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(165deg,var(--surface),var(--bg-soft)); position:relative;
  transition:transform var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease)}
.feat:hover{transform:translateY(-4px); border-color:var(--line-2);
  box-shadow:var(--shadow-hi)}
.feat .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-size:20px; background:rgba(255,45,70,.12); border:1px solid var(--line-2);
  margin-bottom:12px}
.feat h3{font-size:15.5px; margin-bottom:6px}
.feat p{font-size:12.5px; color:var(--tx3); line-height:1.75}
.feat .chips2{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.feat .chips2 span{font-size:10.5px; padding:4px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--tx3); font-family:"IBM Plex Mono",monospace}
/* เข้าเวทีทีละใบตอนสลับหมวด — สั้นและไม่ขวางการอ่าน */
/* ⚠ .pop เป็นของกลาง — ใช้กับอะไรก็ได้ที่ JS สร้างทีหลังแล้วอยากให้ไล่โผล่
   เคยผูกไว้กับ .feat อย่างเดียว ⇒ ที่อื่นตั้ง animationDelay ไว้แต่ไม่มีอะไรวิ่ง */
.pop{animation:featpop 320ms var(--ease) both}
@keyframes featpop{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .pop{animation:none} }

/* ฟอร์มสร้างคูปองในหลังร้าน */
.cpgrid{display:grid; gap:12px; margin-bottom:14px}
@media(min-width:680px){ .cpgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .cpgrid{grid-template-columns:repeat(4,1fr)} }
select.input{appearance:none; -webkit-appearance:none; cursor:pointer}

/* ── หัวเว็บ: ของเยอะขึ้นแล้ว (เมนู + ปุ่มชุมชน + Discord + กระดิ่ง + ชิปบัญชี) ──
   ⛔⛤ เดิมจุดตัดตั้งไว้ตอนยังมีของน้อย พอเพิ่มปุ่มแล้วคำในเมนูตัดบรรทัดกลางหัวเว็บ
      แก้สองอย่าง: ห้ามคำในเมนูตัดบรรทัดเด็ดขาด และเลื่อนจุดตัดให้กว้างขึ้น
      ของที่ถูกซ่อนยังกดถึงได้จากแถบล่าง ฮีโร่ ท้ายเว็บ และเมนูบัญชี */
header.top nav a{white-space:nowrap}
/* ⛤ 2026-09-13 · จุดตัดเดิม 1180 ตั้งไว้ตอนปุ่มชุมชน/Discord ยังเป็นปุ่มยาว
   พอเหลือแต่ไอคอนแล้ว แถวเมนูลงมาได้ถึง ~1150 โดยไม่เบียด
   (วัดจริงที่ 1181: เหลือที่ว่าง 37px) ⇒ ต่ำกว่านั้นค่อยพับเป็นปุ่มสามขีด */
@media(max-width:1149px){ header.top nav{display:none} }
/* ⛔⛤ ปุ่มบนหัวห้ามตัดบรรทัด — flex บีบให้เล็กลงได้ก่อนที่จะซ่อนตัวไหน
   ⇒ "เลือกแพ็กเกจ" เคยตกเป็น 2 บรรทัดที่ 1280px (ปุ่มหลักดูพัง)
   แถวเมนูเป็นชิ้นเดียวที่ยอมให้ยืดหดได้ ที่เหลือคงขนาดจริงเสมอ */
header.top .btn, header.top .brand, header.top .acctwrap{
  flex:0 0 auto; white-space:nowrap}
/* ⛔⛤ 2026-09-13 (เจ้าของแจ้ง: "ตัวหนังสือซ้อนกัน ตรงมุมบนเป็นหนัก")
   เดิมตั้งใจให้แถวเมนูเป็นชิ้นที่ "ยืดหดได้" (min-width:0) เพื่อให้ทุกอย่าง
   อยู่ในแถวเดียว · แต่ลิงก์ในเมนูเป็น white-space:nowrap ⇒ พอกล่องเมนูถูกบีบ
   ต่ำกว่าเนื้อหา **ตัวอักษรล้นออกนอกกล่องโดยที่กล่องไม่รู้ตัว**
   ⇒ คำในเมนูไปทับปุ่มชุมชน/Discord ตั้งแต่ราว 1181-1460px (จอโน้ตบุ๊กส่วนใหญ่)
   ⇒ **ห้ามให้อะไรในแถบหัวเว็บหดต่ำกว่าเนื้อหาเด็ดขาด** · ที่ว่างไม่พอเมื่อไหร่
     ให้ "ซ่อนของที่มีทางอื่นเข้าถึงได้" แทน ไม่ใช่บีบให้เล็กลง
   ลำดับความสำคัญของร้าน: แบรนด์ > เมนู > ปุ่มเลือกแพ็กเกจ > ชิปบัญชี >
     ไอคอน > ปุ่มชุมชน/Discord (สองอันหลังมีอยู่ในฮีโร่ · ท้ายเว็บ · หน้าช่วยเหลือ) */
header.top nav{flex:0 0 auto; min-width:auto}
/* ⛔ ปุ่มไอคอนก็ห้ามหด — เดิมไม่อยู่ในรายการข้างบน ⇒ ถูกบีบเหลือ 24px
   (ต่ำกว่าเกณฑ์เป้าแตะ 44px และเป็นตัวที่ทำให้แถวดู "เบียด") */
header.top .iconbtn{flex:0 0 auto}
/* ⛔⛤ แถบหัวเว็บถูกคุมความกว้างไว้ที่ 1280 เหมือนย่อหน้าเนื้อความ
   ทั้งที่มันเป็น "แถบเครื่องมือ" ไม่ใช่ตัวอักษรที่ต้องคุมความยาวบรรทัด
   ⇒ จอ 1340-1499 มีที่ว่างข้าง ๆ อีกข้างละ ~110px แต่ของในแถบกลับเบียดกันเอง
     (นี่คือสาเหตุที่จอโน้ตบุ๊กเจอหนักสุด) ⇒ ให้กว้างได้ตั้งแต่ต้น */
/* ⚠ ต้องอยู่ในมีเดีย ไม่งั้นไปทับกฎจอ ≥1800 ที่ตั้งไว้ 1680 (กฎท้ายไฟล์ชนะ) */
@media(max-width:1799px){ header.top > .wrap{max-width:var(--maxw-wide)} }
/* ระยะห่างหดตามจอ — ได้คืนมาเกือบ 100px ที่จอ 1280 โดยไม่ต้องซ่อนอะไรเพิ่ม */
header.top .wrap{gap:clamp(14px,1.5vw,28px)}
header.top nav{gap:clamp(15px,1.5vw,26px)}
/* ⛔⛤ ปุ่มชุมชน/Discord บนหัวเว็บ **เหลือแต่ไอคอนเสมอ** ทุกความกว้าง
   เหตุผล: สองปุ่มนี้กินรวมกัน ~282px และเป็นตัวที่ทำให้แถวแตกทุกรอบ ·
   ไอคอนไลน์กับดิสคอร์ดเป็นสัญลักษณ์ที่คนจำได้อยู่แล้ว · และทั้งสองปุ่มมีแบบ
   เต็มคำอยู่ในฮีโร่ · ท้ายเว็บ · หน้าช่วยเหลือ ⇒ ไม่มีใครหาไม่เจอ
   ⚠ ต้องซ่อนแบบ "มองไม่เห็นแต่ยังอ่านออก" ไม่ใช่ display:none —
     display:none ทำให้ปุ่มไม่เหลือชื่อให้โปรแกรมอ่านหน้าจอเลย (มีแต่ไอคอน) */
header.top .j-line .hidesm,
header.top .j-discord .hidesm{position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
@media(max-width:1340px){ header.top .j-line{display:none} }
@media(max-width:1260px){ header.top .j-discord{display:none} }
@media(max-width:860px){ header.top .topcta{display:none} }

/* ── กล่องซ้อนหน้า (แทน prompt/alert ของเบราว์เซอร์) ── */
/* ⛔⛤ ชั้นซ้อนเดิม 90 อยู่ "ใต้" แถบล่าง(100) ป้ายซื้อล่าสุด(105) และข้อความเด้ง(110)
   ⇒ บนมือถือกล่องถูกของพวกนี้ทับ · ต้องสูงกว่าทุกอันยกเว้นแถบโหลด(120)
   ⚠ ตัวกล่องยังต้องเป็นลูกของ body ด้วย ไม่งั้นชั้นซ้อนถูกขังอยู่ใน .wrap */
.modalwrap{position:fixed; inset:0; z-index:115; display:grid; place-items:center;
  padding:20px; background:rgba(4,4,6,.72); backdrop-filter:blur(6px);
  animation:mfade 180ms var(--ease)}
@keyframes mfade{from{opacity:0} to{opacity:1}}
.modalcard{width:min(460px,100%); max-height:88vh; overflow-y:auto;
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:linear-gradient(165deg,var(--surface),var(--bg-soft));
  box-shadow:var(--shadow-hi); animation:mrise 220ms var(--ease)}
@keyframes mrise{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1}}
.modalhead{display:flex; align-items:center; gap:12px; padding:18px 20px;
  border-bottom:1px solid var(--line)}
.modalhead h2{font-size:18px; margin:0}
.modalhead .iconbtn{margin-left:auto}
.iconbtn.sm{width:36px; height:36px}
.modalbody{padding:20px}
/* ⛔⛤ พบ 2026-08-31 ตอนไล่เก็บรายละเอียด: กล่องยืนยัน 16 กล่องทั่วเว็บ
   เขียนข้อความหลายบรรทัดด้วย 
 (เช่น "ยอดจะเปลี่ยนจาก X เป็น Y" ขึ้นบรรทัดใหม่)
   แต่ HTML ยุบขึ้นบรรทัดใหม่เป็นเว้นวรรคเสมอ ⇒ ทุกกล่องออกมาเป็นพืดเดียวยาวเหยียด
   ⚠ ไม่มีเทสไหนจับได้ เพราะตัวหนังสือ "อยู่ครบ" ทุกตัว แค่อ่านไม่รู้เรื่อง
   ⇒ pre-line = เคารพการขึ้นบรรทัด แต่ยังตัดคำตามความกว้างปกติ
      (pre ธรรมดาจะทำให้ข้อความยาวล้นขอบกล่อง) */
.modalbody > .ver{white-space:pre-line; line-height:1.75; margin-bottom:14px}

/* ══ กล่องเลือกแพ็ก "ต่ออายุคีย์ใบนี้" (2026-09-13) ══
   ⛔⛤ แถบล็อกฝั่งต้องอยู่บนสุดของกล่องเสมอ — ลูกค้าต้องเห็นก่อนเลือกว่า
      เวลาที่ซื้อรอบนี้จะเข้าคีย์ใบไหนและฝั่งไหน (บักเงิน 2026-09-03) */
.lockbar{display:flex; flex-direction:column; gap:3px; margin-bottom:14px;
  padding:12px 14px; border-radius:12px; border:1px solid var(--line-2);
  background:rgba(255,45,70,.06); font-size:13px; line-height:1.6}
.lockbar b{font-size:13.5px}
.lockbar span{color:var(--tx3); font-size:12.5px}
.pickgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:9px; margin-bottom:14px}
.pickitem{display:flex; flex-direction:column; gap:3px; text-align:left;
  cursor:pointer; padding:12px 13px; border-radius:12px; color:var(--tx);
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  transition:border-color .16s var(--ease), background .16s var(--ease)}
.pickitem:hover{border-color:var(--line-2); background:rgba(255,255,255,.06)}
.pickitem b{font-size:14.5px; font-weight:600}
.pickitem .price{font-family:"IBM Plex Mono",monospace; font-size:15px; color:var(--gold)}
.pickitem small{font-size:11.5px; color:var(--tx3)}
.amtpick{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.amtpick button{padding:9px 15px; min-height:44px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass); color:var(--tx2);
  cursor:pointer; font:inherit; font-size:13.5px;
  font-family:"IBM Plex Mono",monospace}
.amtpick button:hover{border-color:var(--line-2); color:var(--tx)}
.amtpick button[aria-pressed="true"]{border-color:var(--ember); color:var(--tx);
  background:rgba(255,45,70,.10)}
@media (prefers-reduced-motion: reduce){
  .modalwrap,.modalcard{animation:none}
}

/* ── ชิปบัญชีมุมขวาบน: บอกให้รู้ว่ากดได้ ── */
.chipacct{cursor:pointer; transition:border-color var(--t) var(--ease),
  background var(--t) var(--ease), transform var(--t) var(--ease)}
.chipacct:hover{border-color:var(--line-2); background:var(--glass-2);
  transform:translateY(-1px)}
.chipacct .caret{color:var(--tx3); transition:transform var(--t) var(--ease)}
.chipacct[aria-expanded="true"]{border-color:var(--line-2); background:var(--glass-2)}
.chipacct[aria-expanded="true"] .caret{transform:rotate(180deg)}
.chipacct .av{box-shadow:0 0 0 1px var(--line)}

/* ── คีย์ที่ซ่อนไว้ ── */
.hkrow{display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:12.5px}
.hkrow:last-child{border-bottom:0}
.hkrow .m{font-family:"IBM Plex Mono",monospace; color:var(--tx3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hkrow button{margin-left:auto; flex:none}

/* ── QR พร้อมเพย์ในกล่องเติมเงิน ── */
.qrbox{display:grid; justify-items:center; gap:10px; margin:16px 0 4px;
  padding:16px; border-radius:var(--r); border:1px solid var(--line);
  background:rgba(255,255,255,.03)}
.qrimg{width:min(220px,60vw); height:auto; border-radius:10px; display:block;
  background:#fff; padding:6px}
.qrbox .hint{text-align:center; margin:0}

/* ── ตัวเลขเงิน: อ่านง่ายและเรียงหลักตรงกันทุกที่ ──
   ⛤ ใช้ตัวเลขความกว้างเท่ากัน (tabular) + ไม่ให้ตัดบรรทัดกลางจำนวน
   ⚠ Space Grotesk ไม่มีเลขไทยและช่องไฟ ฿ แคบ ⇒ ระบุ ฿ ให้ห่างขึ้นเล็กน้อย */
.price,.amt,.sumrow b,.lrow .plus,.lrow .minus,.walletcard .amt{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  white-space:nowrap; letter-spacing:.01em}
.walletcard .amt{font-family:"Space Grotesk","IBM Plex Mono",monospace;
  font-weight:700; letter-spacing:-.015em; text-shadow:0 2px 18px rgba(255,194,77,.22)}
.acctmenu .bal{font-variant-numeric:tabular-nums; letter-spacing:.02em}

/* ── การ์ดสินค้าเล็กลง (เจ้าของสั่ง 2026-08-31: ของเดิมใหญ่เกินไป) ──
   ⛤ ตัวการคือภาพปกสัดส่วน 1:1 ซึ่งบนจอกว้างสูงเท่าความกว้างการ์ด (~570px)
     ลดเป็น 16:10 แล้วให้เรียง 3 ใบบนจอกว้าง ⇒ เห็นสินค้าได้มากขึ้นในหน้าจอเดียว
   ⚠ ไม่แตะ .art ของหน้ารายละเอียดสินค้า (.pdart) ซึ่งต้องการภาพใหญ่ */
#catalog .art{aspect-ratio:16/10}
#catalog .art svg{width:74%; height:74%; margin:auto}
/* ⛔⛤ 2026-09-13 · เดิมบังคับ 3 คอลัมน์ที่ ≥1000 และ 4 คอลัมน์ที่ ≥1400
   ⇒ ร้านที่มีสินค้าแค่ 2 ชิ้น (ตอนนี้จริง ๆ ก็มีเท่านี้) ได้การ์ดเล็กสองใบ
     กองอยู่มุมซ้าย เหลือพื้นดำว่างครึ่งจอ — เจ้าของเห็นแล้วบอกว่าเหมือนของหมด
   ⇒ auto-fit ยุบช่องที่ไม่มีการ์ดทิ้งเอง ⇒ มีกี่ใบก็เต็มความกว้างเสมอ
     (2 ใบ = ใหญ่เต็มครึ่งจอ · 8 ใบ = 4 คอลัมน์เหมือนเดิม) */
@media(min-width:1000px){
  #catalog.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}
#catalog .ctitle{font-size:17px}
#catalog .cdesc{font-size:12.5px; line-height:1.65}
#catalog .card{padding:10px}

/* ── หน้าไม่เจอ (404) ── */
.nfhead{padding-top:64px}
.nfacts{margin-top:26px; flex-wrap:wrap}
.nfgrid{display:grid; gap:14px}
@media(min-width:720px){ .nfgrid{grid-template-columns:repeat(2,1fr)} }
.nfcard{text-decoration:none; display:block}
.nfcard h2{margin:0 0 6px}
.nfcard .ver{margin:0}

/* ══════════════ หัวเว็บบนจอ 375 ล้นออกขวา (วัดจริง 2026-08-31) ══
   ⛔⛤ ระยะห่าง 28px ระหว่างของในหัวเว็บถูกออกแบบไว้สำหรับจอกว้าง
      พอเหลือแค่ แบรนด์ + กระดิ่ง + ชิปบัญชี บนจอ 375 ยังรวมกันได้ 370px
      ในกล่องที่กว้าง 335 ⇒ ชิปบัญชีล้นออกไป 15px ทั้งหน้าเลื่อนซ้ายขวาได้
      (เมนูล่างพลอยกว้าง 391 ตามไปด้วย เพราะหน้าเลื่อนได้แล้ว)
   ⚠ ชื่อผู้ใช้ยาวได้ถึง 20 ตัว ⇒ ต้องตัดด้วยจุดไข่ปลา ไม่ใช่ตั้งความกว้างตายตัว
   ⚠ กระดิ่งกว้างแค่ 14px = เป้าแตะเล็กเกินเกณฑ์ ทั้งที่สูงพอ */
@media(max-width:760px){
  header.top .wrap{gap:12px; padding-left:16px; padding-right:16px}
  header.top .brand{flex:none}
  header.top .iconbtn{min-width:44px; min-height:44px}
  .acctwrap{min-width:0; flex:1 1 auto; justify-content:flex-end}
  .chipacct{min-width:0; max-width:100%}
  .chipacct b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
              min-width:0}
  .bottomnav{max-width:100vw; overflow:hidden}
}

/* ══ แถบหัวเว็บจอแคบ (2026-09-13) ══
   ⛔⛤ บล็อกนี้ **ต้องอยู่หลัง** บล็อก max-width:760px ข้างบนเสมอ
      กฎข้างบนตั้ง `header.top .brand{flex:none}` และ `gap:12px` ไว้
      ซึ่งเจาะจงเท่ากันเป๊ะ ⇒ ตัวที่อยู่ท้ายไฟล์กว่าเป็นฝ่ายชนะ
      เคยเขียนไว้ที่บล็อก max-width:479px (บรรทัด ~586) แล้วไม่มีผลเลย
      ⇒ จอ 320px แถบหัวล้นออกไป 32px ทุกหน้าเมื่อล็อกอินอยู่
   ⚠ ห้ามย่อปุ่มกลมให้เล็กกว่า 44px — ย่อ "ชื่อร้าน" กับ "ระยะห่าง" แทน */
@media(max-width:479px){
  header.top .wrap{gap:7px; padding-left:11px; padding-right:11px}
  header.top .brand{flex:0 1 auto; min-width:0; gap:7px; white-space:nowrap}
  header.top .brand .bnm{min-width:0; flex:0 1 auto}
}
@media(max-width:359px){
  /* จอเล็กสุดที่ยังต้องใช้งานได้ — ชื่อร้านยอมให้หายไปเหลือแต่โลโก้
     ⚠ ลิงก์ยังมีข้อความอยู่ในโค้ด โปรแกรมอ่านหน้าจอจึงยังอ่านชื่อร้านได้
     ⛔ เหลือแต่โลโก้แล้วลิงก์กว้างแค่ 33px ⇒ ต่ำกว่าเป้าแตะขั้นต่ำ
        ต้องบังคับกว้าง 44px คืน ไม่งั้นแก้บั๊กหนึ่งไปสร้างอีกบั๊กหนึ่ง */
  header.top .brand .bnm{width:0; opacity:0}
  header.top .brand{min-width:44px; justify-content:center; gap:0}
}

/* ══════════════ เป้าแตะบนมือถือ (วัดในเบราว์เซอร์จริง 2026-08-31) ══
   ⛔ วัดจากจอ 375px แล้วพบว่าตัวกรอง/ช่องค้นหา/ปุ่มปิดแถบข่าวยังต่ำกว่า 44px
      นิ้วโป้งพลาดง่ายและกดโดนของข้าง ๆ · บนจอกว้างขนาดเดิมสวยกว่าจึงแยกกฎ
   ⚠ ปุ่มปิดแถบข่าวเดิม 25px = เล็กกว่าครึ่งหนึ่งของเกณฑ์ */
@media(max-width:760px){

  /* ⚠ ลิงก์ตัวหนังสือที่ "ทำหน้าที่เป็นปุ่ม" ก็ต้องแตะได้จริง
     (ลืมรหัสผ่าน / สมัครสมาชิก — วัดได้ 66x34 บนจอ 320) */
}

/* ══════════════ เป้าแตะสำหรับ "จอที่ใช้นิ้ว" ══
   ⛔⛤ เดิมกฎพวกนี้อยู่ในบล็อก 760px ⇒ **แท็บเล็ตแนวตั้ง (768px) หลุดหมด**
      ทั้งที่เป็นจอสัมผัสเต็มตัว · วัดด้วยตัวกวาดอัตโนมัติแล้วเจอ 8 จุดที่ 768
   ⚠ แยกจากบล็อกจัดวางโดยตั้งใจ — กฎจัดวาง (ซ่อนเมนู ฯลฯ) ใช้เกณฑ์คนละตัว
     กับกฎ "นิ้วต้องกดโดน" จึงต้องไม่ผูกอยู่ในบล็อกเดียวกัน */
@media(max-width:900px){
  /* ⛔⛤ สามอันนี้เคยอยู่ในบล็อก 760 ⇒ แท็บเล็ต 768 หลุด
     ⚠⚠ เครื่องทดสอบในเครื่อง **ซ่อนแถบข่าวไว้** (ไม่มีประวัติซื้อในฐานชั่วคราว)
        ตัวกวาดจึงไม่เห็นปุ่มปิด 25px เลยผ่านหมด — ไปเจอตอนกวาดเครื่องจริง
        ⇒ บทเรียน: กล่องทรายที่ข้อมูลไม่ครบ ซ่อนบั๊กได้ ต้องกวาดของจริงด้วย */
  .ticker .tx{min-width:44px; min-height:44px; padding:0;
              display:inline-grid; place-items:center}
  header.top .brand{min-height:44px; display:inline-flex; align-items:center}
  /* ⛤ 2026-09-13: เดิมเขียน `padding:6px 0` (ตัวย่อ) ซึ่ง **ล้าง padding
     แนวนอนที่ตั้งไว้ในบล็อกก่อนหน้าทิ้ง** ⇒ พื้นที่กดกว้างแค่ 30px สำหรับคำสั้น
     ⚠ กฎนี้อยู่ท้ายไฟล์กว่า จึงเป็นฝ่ายชนะเสมอ — ต้องเขียนแยกแกนให้ครบที่นี่
       (เจอตอนกวาดจอมือถือ 2026-09-13 · รูปแบบเดียวกับ .pdhead และ gap หัวเว็บ) */
  .crumb a{display:inline-block; padding-block:6px; padding-inline:8px;
    margin-inline:-8px}
  .chip{min-height:44px}
  .search .input{min-height:44px}
  .authbox a, .authbox .linky, .field + a, .formfoot a{display:inline-flex;
    align-items:center; min-height:44px}
  /* ⚠ ลิงก์ท้ายเว็บสูงแค่ 18px — กดพลาดไปโดนบรรทัดข้างเคียงตลอด
     (ยอมให้แถวห่างขึ้นบนจอสัมผัส ส่วนจอกว้างคงความกระชับไว้เหมือนเดิม) */
  .fgrid ul{gap:2px}
  .fgrid ul a{display:flex; align-items:center; min-height:44px}
  /* ⚠ ปุ่มลืมตาดูรหัสผ่านซ่อนอยู่ในช่องกรอก เดิม 36px — ขยายเป็น 44
     แล้วขยับช่องว่างขวาของช่องกรอกตามเพื่อไม่ให้ตัวอักษรวิ่งไปทับปุ่ม */
  .pw button{width:44px; height:44px; right:4px}
  .pw .input{padding-right:56px}
}

/* ── ปุ่มบนใบขอเติมเงิน ── */
.tuacts{margin-top:10px; gap:8px; flex-wrap:wrap}
.tuacts .btn{flex:1 1 auto; min-width:120px}
.topupline + .topupline{margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line)}

/* ── ตัวเลขบนกระดิ่ง ──
   ⚠ ต้องอ่านออกแม้เลขสองหลัก และห้ามดันปุ่มให้ขยับ (ลอยทับมุมขวาบน) */
.bellnum{position:absolute; top:2px; right:2px; min-width:17px; height:17px;
  padding:0 4px; border-radius:999px; background:var(--ember); color:#fff;
  font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
  font-variant-numeric:tabular-nums; pointer-events:none;
  box-shadow:0 0 0 2px var(--bg)}
/* css-dupe-ok: ค่าเดียวกับกฎหลักของ .iconbtn — ประกาศซ้ำตรงนี้เพื่อให้
   เห็นชัดว่า .bellnum ข้างบนต้องมีตัวยึดตำแหน่ง ไม่ได้เปลี่ยนพฤติกรรมอะไร */
.iconbtn{position:relative}

/* ── ป้ายใต้ภาพจำลองหน้าจอโปรแกรม ──
   ⛔ ต้องอ่านออกจริง ไม่ใช่ซ่อนจนไม่มีใครเห็น — เป็นคำชี้แจงว่าไม่ใช่ภาพจริง */
.shotwrap{margin:0; display:grid; gap:10px}
/* ⛔⛤ 38ch แคบเกินไปสำหรับข้อความไทย 2-3 บรรทัด — ใต้หน้าต่างโปรแกรม
   กว้าง 1,100px แต่คำบรรยายถูกบีบเป็นเสาแคบกลางจอ ตัดบรรทัดกลางคำ
   ดูเหมือนหน้าเว็บพัง (เจ้าของแจ้งจากคลิป 2026-09-01)
   ⚠ แต่กว้างเกินก็อ่านยาก — 62ch คือช่วงที่อ่านสบายสำหรับข้อความยาว
   ⚠ ห้ามใช้ % หรือ vw: บนจอแคบจะกว้างกว่ากล่องแม่ ⇒ ใช้ ch คู่กับ 100% */
.shotcap{font-size:12px; line-height:1.7; color:var(--tx3); text-align:center;
  max-width:min(62ch, 100%); margin:0 auto}
/* ขั้นตอนซื้อ 4 ขั้น — จอกว้างเรียงสี่ จอกลางเรียงสอง */
@media(min-width:640px){ .steps3.four{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .steps3.four{grid-template-columns:repeat(4,1fr)} }
.steps3 .slink{display:inline-block; margin-top:10px; font-size:13px;
  color:var(--ember-lit); text-decoration:none; font-weight:600}
.steps3 .slink:hover{text-decoration:underline}

/* ── บรรทัดเตือน "รอแอดมินส่งมอบ" ในหน้าคำสั่งซื้อ ── */
.warnline{margin-top:10px; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid rgba(255,194,77,.28); background:rgba(255,194,77,.07);
  color:var(--tx2)}

/* ══════════════ หน้าต่างโปรแกรม (ภาพจำลอง) ══
   ⛔ วาดด้วย CSS ล้วน ไม่มีภาพจากตัวเกม ไม่มีไฟล์ให้โหลดเพิ่มสักไฟล์
   ⚠ ห้ามใส่แอนิเมชันวนไม่จบ — หน้าแรกเปิดค้างไว้ทั้งวัน จะกินซีพียูเครื่องลูกค้า
     (จุดสถานะใช้แค่ไล่สีนิ่ง ๆ ไม่กะพริบ) */
.shottabs{display:flex; gap:6px; padding:9px 14px; overflow-x:auto;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.015);
  scrollbar-width:none}
.shottabs::-webkit-scrollbar{display:none}
.shottabs span{flex:none; font-size:11.5px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); color:var(--tx3); white-space:nowrap}
.shottabs span.on{color:var(--tx); border-color:rgba(255,45,70,.4);
  background:rgba(255,45,70,.1)}
.shottabs span.more{border-color:transparent; color:var(--tx3); opacity:.75}

.shotgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.scell{padding:11px 12px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--glass); display:grid; gap:2px; min-width:0}
.scell .k{font-size:10.5px; color:var(--tx3); letter-spacing:.02em}
.scell .v{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums;
  font-family:"IBM Plex Mono",monospace; line-height:1.15}
.scell .u{font-size:10px; color:var(--tx3); opacity:.85;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.shotlog{display:grid; gap:6px; padding:11px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(0,0,0,.28)}
.shotlog .lg{display:grid; grid-template-columns:auto 1fr; gap:9px;
  align-items:baseline; font-size:11.5px; min-width:0}
.shotlog .t{font-family:"IBM Plex Mono",monospace; color:var(--tx3); font-size:10.5px}
.shotlog .d{color:var(--tx2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.shotlog .d.ok{color:var(--ok)}
.shotlog .d.warn{color:var(--warn)}

.shotfoot{display:flex; flex-wrap:wrap; gap:6px}
.chipx{font-size:11px; padding:4px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--tx2); background:var(--glass)}
.chipx.more{color:var(--tx3); border-style:dashed}

/* จุดสถานะ "กำลังทำงาน" — จุดนิ่ง ไม่ใช่ไฟกะพริบ */
.tag.dotlive::before{content:""; width:6px; height:6px; border-radius:99px;
  background:var(--ok); display:inline-block; margin-right:6px;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--ok) 18%, transparent)}

@media(max-width:520px){
  .shotgrid{grid-template-columns:1fr 1fr}
  .scell:last-child{grid-column:1 / -1}
}
/* ⚠ จอ 320 แถบแท็บแน่นมาก — ตัดคำใบ้ท้ายแถวออก เหลือแท็บจอที่จำเป็นจริง */
@media(max-width:380px){ .shottabs span.more{display:none} }

.pill.warn{border-color:rgba(255,194,77,.34); color:var(--warn);
  background:rgba(255,194,77,.08)}



/* ══════════════ แสงขอบจอ ══
   ⛤ จอ 2560 ยังไงก็เหลือขอบ — ขอบนั้นต้อง "ดูตั้งใจ" ไม่ใช่ดำตัน
   ⚠ position:fixed + pointer-events:none + ไม่มีแอนิเมชันวนไม่จบ
     (หน้าแรกเปิดค้างทั้งวัน ของที่วิ่งตลอดกินซีพียูเครื่องลูกค้า) */
@media(min-width:1500px){
  .hero::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(48% 70% at 0% 40%, rgba(255,45,70,.07), transparent 70%),
      radial-gradient(48% 70% at 100% 40%, rgba(95,208,232,.05), transparent 70%);
  }
}


/* ══════════════ ช่องล่อกันบอท ══
   ⛔⛤ ห้ามใช้ display:none หรือ visibility:hidden — บอทที่เขียนดี ๆ ข้ามช่อง
      ที่ซ่อนด้วยสองอย่างนั้นได้ · ต้อง "อยู่ในหน้าจริง แต่คนมองไม่เห็น"
   ⚠ คู่กับ tabindex="-1" + aria-hidden ในตัว HTML เพื่อไม่ให้คนที่ใช้คีย์บอร์ด
     หรือโปรแกรมอ่านหน้าจอหลงมากรอก */
.trapfield{position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden}
.cfbox{margin:14px 0 0; min-height:0}
.cfbox:not([hidden]){min-height:68px}

/* ══════════════ หน้า "ดูโปรแกรม" ══
   ⚠ ภาพจำลองหน้าจอวาดด้วย CSS ล้วน — ไม่มีไฟล์ภาพให้โหลดเพิ่ม
     และไม่มีภาพจากตัวเกม (เลี่ยงเรื่องลิขสิทธิ์)
   ⛔⛤ เคยพลาด: เขียนบล็อกนี้ด้วยชื่อโทเคนที่คิดเอง (--acc --card --fg --dim)
      ทั้งห้าตัวไม่มีใน :root เลย · หน้าเว็บ "ดูเหมือนใช้ได้" เพราะสีตกทอด
      จากพ่อแม่มาบัง แต่ตัวเลขหัวหน้าหายไปทั้งแถว (พื้นไล่สีกลายเป็น none
      บนตัวอักษรโปร่งใส) ⇒ ใช้เฉพาะโทเคนที่มีจริง และมีด่าน
      tools/check_css_tokens.py คอยจับ */
.prog-hero{padding:38px 0 10px; position:relative; overflow:hidden}
.prog-hero::before{content:""; position:absolute; inset:-30% -10% auto -10%;
  height:420px; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 22% 0%,
      color-mix(in oklab,var(--ember) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 60% at 82% 10%,
      color-mix(in oklab,var(--ember-deep) 34%, transparent), transparent 70%);
  filter:blur(26px); opacity:.6}
/* ⛤ 2026-09-13 · ต้องมีระยะห่างจากเส้นทางด้านบน — ของเดิมป้าย "ภายในโปรแกรม"
   ไปติดบรรทัดเส้นทางจนอ่านเหมือนหลุดบรรทัดเดียวกัน */
.phead{position:relative; max-width:74ch; margin-top:18px}
/* ⚠ ใช้สเกลเดียวกับ .pdinfo h1 — ห้ามตั้งขนาดใหม่รายหน้า
   (ด่าน tools/design_audit.js ยอมให้ H1 มีได้ 4 ขนาดทั้งเว็บ) */
.phead h1{margin:6px 0 10px; font-size:clamp(26px,4vw,40px); line-height:1.15}
.phead .lead{color:var(--tx2); font-size:16px; line-height:1.75; max-width:66ch}

.pstats{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 4px}
.pstats>div{flex:1 1 150px; min-width:132px; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--r);
  background:color-mix(in oklab,var(--surface) 78%, transparent)}
.pstats b{display:block; font-size:26px; line-height:1.1;
  font-variant-numeric:tabular-nums;
  background-image:linear-gradient(120deg,var(--tx),var(--ember-lit));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.pstats span{display:block; margin-top:3px; font-size:12.5px; color:var(--tx3)}

/* แถวหมวด — เลื่อนข้างได้บนจอแคบ ไม่ดันหน้าให้ล้น */
.ptabs{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.ptab{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; min-height:40px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--tx2);
  font:inherit; font-size:13.5px; white-space:nowrap;
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease),
    background var(--t) var(--ease), transform var(--t) var(--ease)}
.ptab .ic{font-size:15px; line-height:1}
.ptab:hover{color:var(--tx);
  border-color:color-mix(in oklab,var(--ember) 42%, var(--line))}
.ptab.on{color:var(--tx); border-color:var(--line-2); transform:translateY(-1px);
  background:linear-gradient(120deg,
    color-mix(in oklab,var(--ember-deep) 46%, var(--surface)),
    var(--surface));
  box-shadow:0 6px 20px -13px var(--ember)}

/* ⛤ 2026-09-02 ถอดแผงภาพจำลองข้างหมวดออกแล้ว (เจ้าของจะทำคลิปสอนแทน)
   ⇒ เหลือกล่องเดียว ต้องกินเต็มความกว้าง ไม่งั้นค้างอยู่ครึ่งซ้ายแล้วขวาโล่ง */
.pgrid{display:grid; grid-template-columns:minmax(0,1fr);
  gap:18px; align-items:start; margin-top:6px}
.pdetail{padding:20px 22px; border-radius:var(--r-lg)}
/* ⛔⛤ 2026-09-13: คลาสนี้เคยชื่อ `.pdhead` ซึ่งชนกับหัวหน้ารายละเอียดสินค้า
   (product.html ใช้ `.pdhead` เป็นกริด 2 คอลัมน์ที่ยุบเป็น 1 คอลัมน์บนมือถือ)
   กฎตัวนี้อยู่ท้ายไฟล์กว่า ⇒ ชนะ ⇒ **หน้าสินค้าบนมือถือถูกบังคับเป็นแถวนอน
   ตลอดเวลา** ตัวหนังสือเลยถูกบีบเหลือ 2-3 คำต่อบรรทัด (เจ้าของส่งภาพมา)
   ⚠ คลาสในไฟล์นี้ใช้ร่วมกันทั้งเว็บ — ชื่อสั้นต้องไม่ซ้ำเด็ดขาด */
.pdehead{display:flex; align-items:center; gap:11px; margin-bottom:8px}
.pdicon{width:38px; height:38px; flex:0 0 38px; border-radius:12px;
  display:grid; place-items:center; font-size:19px;
  border:1px solid var(--line);
  background:color-mix(in oklab,var(--ember-deep) 30%, var(--surface))}
.pdetail h3{margin:0; font-size:19px}
.pdetail .ver{margin:0 0 14px; line-height:1.7}

@media(max-width:900px){
  .pgrid{grid-template-columns:1fr}
  .ptab{min-height:44px; padding:11px 15px}
}

/* ══════════════ หน้ารวมสินค้าแยกกลุ่มตามชนิด ══
   ⚠ ขึ้นหัวข้อเฉพาะตอนมีมากกว่าหนึ่งชนิด (ดู renderCatalog)
     หัวข้อลอยเดี่ยว ๆ เหนือกลุ่มเดียวอ่านแล้วงงกว่าไม่มี */
#catalog.bykind{display:block}
.kindhead{display:flex; align-items:baseline; gap:10px; margin:26px 0 14px;
  font-size:17px}
.kindhead:first-child{margin-top:4px}
.kindnum{font-size:12.5px; font-weight:400; color:var(--tx3)}
.kindgrid{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:640px){ .kindgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .kindgrid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1400px){ .kindgrid{grid-template-columns:repeat(4,1fr)} }
.pill.kindpill{border-color:var(--line-2);
  color:var(--ember-lit); background:color-mix(in oklab,var(--ember-deep) 22%,
    transparent)}

/* ── ชุดรูปโปรไฟล์ให้เลือก ──
   ⚠ รูปวาดด้วย currentColor ⇒ สีตัวอักษรต้องขาวเสมอ ไม่งั้นรูปจมพื้น */
.avicons{display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 8px}
.aviconbtn{width:46px; height:46px; border-radius:14px; flex:none;
  display:grid; place-items:center; color:#fff; cursor:pointer;
  border:1px solid var(--line);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease)}
.aviconbtn:hover{transform:translateY(-2px)}
.aviconbtn[aria-pressed="true"]{border-color:var(--ember);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--ember) 26%, transparent)}
.avletter{font-size:16px; font-weight:700}
/* ⚠ รูปในวงกลมโปรไฟล์ต้องอยู่กลางพอดี — .av เป็น grid อยู่แล้ว */
.av svg,.avbig svg,.acct .big svg{display:block}
@media(max-width:900px){ .aviconbtn{width:48px; height:48px} }

/* ── หน้าฝากขายกับเรา ──
   ⚠ ขั้นตอนเป็น "ลำดับจริง" (คุย → ตกลง → ขึ้นหน้า → เปิดขาย)
     เลขจึงมีความหมาย ไม่ใช่ของตกแต่ง */
.pnsteps{list-style:none; counter-reset:pn; margin:0; padding:0;
  display:grid; gap:12px}
.pnsteps li{counter-increment:pn; position:relative; padding:16px 18px 16px 60px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--glass)}
.pnsteps li::before{content:counter(pn); position:absolute; left:18px; top:16px;
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(140deg,var(--ember-btn),var(--ember-deep))}
.pnsteps li b{display:block; font-size:15px; margin-bottom:3px}
.pnsteps li span{font-size:13.5px; color:var(--tx2); line-height:1.7}
@media(min-width:900px){ .pnsteps{grid-template-columns:1fr 1fr} }

/* ══════════════ ชั้นตกแต่งรอบสุดท้าย ══
   ⛤ เจ้าของสั่ง 2026-08-31: "เพิ่มอนิเมะชั่นหรือฟังชั่นลูกเล่นต่าง ๆ"
   ⚠ ทุกอย่างในบล็อกนี้ต้อง "มีประโยชน์" ไม่ใช่ขยับเพื่อขยับ —
     บอกว่ากดได้ · บอกว่ากำลังโหลด · บอกว่าอันไหนสำคัญ
   ⚠ ทุกตัวเคารพ prefers-reduced-motion ผ่านกฎรวมที่บรรทัด 445 อยู่แล้ว
     (`*{animation:none !important; transition:none !important}`) */

/* ── การ์ดยกตัวตอนชี้ — บอกว่ากดได้ ──
   ⚠ ใช้ translate3d ให้ GPU ทำ ไม่บังคับคำนวณ layout ใหม่ */
.card.cat,.glass.feat,.glass.why,.glass.t{
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease)}
.card.cat:hover{transform:translate3d(0,-4px,0);
  border-color:var(--line-2); box-shadow:var(--shadow-hi)}
.glass.feat:hover,.glass.why:hover{transform:translate3d(0,-2px,0);
  border-color:color-mix(in oklab,var(--ember) 30%, var(--line))}

/* ── ปุ่มหลักมีประกายวิ่งผ่านตอนชี้ ──
   ⚠ ทำเฉพาะปุ่มหลัก ปุ่มธรรมดาไม่ต้อง ไม่งั้นทั้งหน้าวิบวับจนลายตา */
.btn.primary{position:relative; overflow:hidden}
.btn.primary::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,
    rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-120%); pointer-events:none}
.btn.primary:hover::after{transform:translateX(120%);
  transition:transform 620ms var(--ease)}

/* ── ตัวเลขสำคัญนับขึ้นตอนโผล่ (JS เป็นคนขยับ) ── */
.countup{font-variant-numeric:tabular-nums}


/* ── ปุ่มกลับขึ้นบน ── */
.totop{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom));
  width:44px; height:44px; border-radius:50%; z-index:110;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--tx2);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease)}
.totop.on{opacity:1; transform:none; pointer-events:auto}
.totop:hover{color:var(--tx); border-color:var(--line-2)}
/* ⚠ มือถือมีแถบเมนูล่างอยู่แล้ว ต้องยกขึ้นไม่ให้ทับ */
@media(max-width:900px){ .totop{bottom:calc(76px + env(safe-area-inset-bottom))} }

/* ── ไฮไลต์หัวข้อที่เพิ่งกระโดดมาจากลิงก์ #anchor ── */
:target{scroll-margin-top:88px}
.jumped{animation:jump 1.4s var(--ease)}
@keyframes jump{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--ember) 46%, transparent)}
  100%{box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion: reduce){ .jumped{animation:none} }

/* รูปสินค้าจริง — เต็มกรอบเสมอ ไม่ว่าสัดส่วนไฟล์จะเพี้ยนแค่ไหน
   ⚠ object-fit:cover ครอบให้พอดี · ของสำคัญควรอยู่กลางรูป
     (เว้นขอบว่างรอบตัวหลัก 8% ตามที่บอกเจ้าของไว้) */
.art .artimg,.pdart .artimg{width:100%; height:100%; object-fit:cover;
  display:block; border-radius:inherit}
.pdart .artimg{aspect-ratio:1/1; border-radius:12px}

/* ══════════════ หน้ากระเป๋าเงิน — โครงใหม่ ══
   ⛤ เจ้าของสั่ง 2026-08-31: "ทำหน้าเติมเงินใหม่ทั้งหมด · ตรงซองอั่งเปา
      หายากเกินไป ทำให้อยู่ที่เดียวกัน"
   ⇒ วิธีเติมเงินทุกทางเป็นการ์ดขนาดเท่ากันในแถวเดียว ไม่มีทางไหนถูกซ่อน
     ท้ายคอลัมน์ข้างจนหาไม่เจอ */
.walletcard{display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-bottom:0}
.walletcard .wc-main{flex:1 1 260px; min-width:0}
.walletcard .wc-side{flex:0 0 auto}
.walletcard .ver{margin:6px 0 0}

.paygrid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:820px){ .paygrid{grid-template-columns:1fr 1fr} }
.payway{padding:20px 22px; display:flex; flex-direction:column; gap:14px}
/* ⚠ ทางที่ปิดอยู่ต้องดูจางลง แต่ยังอ่านออก — ซ่อนไปเลยลูกค้าจะไม่รู้ว่ามีทางนี้ */
.payway.off{opacity:.62}
.pw-head{display:flex; align-items:flex-start; gap:12px}
.pw-head > div{flex:1; min-width:0}
.pw-head h3{margin:0; font-size:17px}
.pw-head p{margin:2px 0 0; font-size:12.5px; color:var(--tx3)}
.pw-ic{width:42px; height:42px; flex:none; border-radius:13px; display:grid;
  place-items:center; font-size:20px; border:1px solid var(--line);
  background:color-mix(in oklab,var(--ember-deep) 24%, var(--surface))}
.paysteps{list-style:none; counter-reset:pw; margin:0; padding:0;
  display:grid; gap:9px}
.paysteps li{counter-increment:pw; position:relative; padding-left:30px;
  font-size:13.5px; line-height:1.65; color:var(--tx2)}
.paysteps li::before{content:counter(pw); position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:7px; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:var(--tx);
  border:1px solid var(--line-2);
  background:color-mix(in oklab,var(--ember-deep) 30%, transparent)}
.payway .btn.block{margin-top:auto}
.payway .field{margin-top:2px}

.wlgrid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:900px){ .wlgrid{grid-template-columns:1.25fr .75fr} }
.wlgrid .pane h2{font-size:18px; margin:0 0 12px}

/* ⛔⛤ หน้าบูสในตัวอย่างเคยอ้างรูปแม่แบบจากตัวเกม (templates/*.png)
   พาธใช้ไม่ได้บนเว็บ ⇒ รูปไม่ขึ้น กรอบยุบ layout เละ
   และเป็นภาพจากตัวเกมซึ่งห้ามเอาขึ้นเว็บสาธารณะอยู่แล้ว
   ⇒ ตัวสกัดแทนด้วย <span> ว่าง · ตรงนี้ให้ขนาดและผิวคืน layout จะได้ไม่พัง */
.pw .power-game-icon{display:block; width:38px; height:38px; margin:0 auto 6px;
  border-radius:10px; border:1px solid var(--line);
  background:radial-gradient(circle at 50% 35%,
    color-mix(in oklab,var(--ember) 26%, transparent), transparent 70%),
    var(--glass-2)}

.btn.danger{border-color:color-mix(in oklab,var(--bad) 46%, var(--line));
  color:var(--bad)}
.btn.danger:hover{background:color-mix(in oklab,var(--bad) 14%, transparent)}

/* ══ หลังร้าน: แก้สินค้าและรูป ══ */
.adedit{display:grid; gap:8px; margin:12px 0;
  grid-template-columns:1fr}
@media(min-width:820px){
  .adedit{grid-template-columns:1.3fr 1.7fr auto auto; align-items:center}
}
.adedit .input{min-height:40px}
.adimgs{display:grid; gap:12px; grid-template-columns:1fr 1fr; margin:6px 0 12px}
.adimg{border:1px solid var(--line); border-radius:12px; padding:10px;
  display:grid; gap:6px; background:var(--glass); text-align:center}
.adimg b{font-size:12.5px}
.adimg .ver{font-size:11px; margin:0}
/* ⚠ กรอบตัวอย่างต้องสูงคงที่ ไม่งั้นการ์ดกระโดดตอนรูปโหลดเสร็จ */
.adthumb{aspect-ratio:16/10; border-radius:9px; overflow:hidden;
  background:rgba(0,0,0,.35); display:grid; place-items:center}
.adthumb img{width:100%; height:100%; object-fit:cover; display:block}
/* ⛔⛤ 2026-09-13: เคยชื่อ `.pkprice` ซึ่งชนกับราคาในแถวแพ็กหน้าสินค้า
   (จัดชิดเส้นฐาน gap 8) ⇒ กฎตัวนี้อยู่ท้ายกว่าเลยชนะทั้งเว็บ */
.orprice{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
@media(max-width:640px){ .adimgs{grid-template-columns:1fr} }

/* ── ตัวเลือกในเมนู <select> ──
   ⚠ เบราว์เซอร์วาดเมนูนี้เอง แต่งได้จำกัด · color-scheme ข้างบนทำงานหลัก
     ส่วนตรงนี้บังคับสีอีกชั้นสำหรับเบราว์เซอร์ที่ยอมให้แต่ง */
select.input option{background:var(--surface); color:var(--tx)}
select.input option:checked{background:var(--ember-deep)}
/* ลูกศรของ select — appearance:none ทำให้ลูกศรเดิมหาย ต้องวาดเอง */
select.input{padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),
    linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),
    calc(100% - 13px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}

/* ══════════════ หลังร้าน — ฟอร์มและปุ่มลบ ══
   ⛤ เจ้าของสั่ง 2026-08-31: "เพิ่มให้ลบแพ็กเกจหรืออื่น ๆ ได้ด้วย" +
     "เพิ่มสินค้าใหม่ตอนนี้เหมือนจะใช้ไม่ได้จริง" ⇒ ฟอร์มจริงกล่องเดียว */

/* กล่องฟอร์มกว้างกว่ากล่องยืนยันธรรมดา — มีหลายช่องต้องกรอก */
.modalcard.wide{width:min(560px,100%)}

/* แถวเลือกไฟล์รูปในฟอร์ม */
.filepick{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:8px}
.filepick .ver{font-size:13px; color:var(--tx3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}

/* ⛤ ข้อความผิดพลาดของฟอร์ม — อยู่ในกล่อง ไม่ใช่ toast ที่หายไปใน 3 วิ
   คนจะได้อ่านทันขณะกำลังแก้ช่องที่ผิด */
.formmsg{margin:4px 0 0; padding:10px 12px; border-radius:10px;
  font-size:13.5px; line-height:1.65; color:var(--bad);
  border:1px solid color-mix(in oklab,var(--bad) 40%, var(--line));
  background:color-mix(in oklab,var(--bad) 10%, transparent)}

/* ปุ่มเพิ่ม/ลบ อยู่คนละฝั่ง — กันกดผิดใบ */
.kacts.spread{justify-content:space-between; width:100%}

/* แถวราคาในหลังร้านมีปุ่มมากกว่าฝั่งลูกค้าหนึ่งใบ */
@media(min-width:760px){
  .pkrow.adm{grid-template-columns:1.5fr .75fr auto auto}
  .pkrow.adm .btn{min-width:0; justify-self:end}
}

/* ═══════════════════════════════════════════════════════════════════════
   หลังร้านรุ่นใหม่ (2026-09-11)
   ───────────────────────────────────────────────────────────────────────
   ⛔⛤ ทำไมต้องรื้อ: ของเดิมวางทุกอย่างเป็น "การ์ดใบใหญ่เรียงลงมา" —
      หน้าแรกเป็นการ์ดตัวเลข 8 ใบขนาดเท่ากันเป๊ะ ⇒ ทุกใบสำคัญเท่ากัน
      แปลว่าไม่มีใบไหนสำคัญ · หน้าคำสั่งซื้อ 1 จอเห็นได้ 4 ใบ และของในแต่ละใบ
      อยู่คนละตำแหน่ง ⇒ กวาดตาเทียบข้ามใบไม่ได้เลย
      เจ้าของแจ้งตรง ๆ ว่า "มองดูยากมาก ดูไม่ออกเลย"

   หลักที่ใช้แทน
     1. งานค้างที่ต้องมือมาก่อนตัวเลขสวย ๆ เสมอ
     2. ของที่เป็นรายการ = ตาราง คอลัมน์ตรงกันทุกแถว หัวตารางติดขอบบน
     3. ตัวเลขเงินชิดขวา + ฟอนต์ตัวเลขความกว้างเท่ากัน ⇒ หลักตรงกันทุกแถว
     4. สื่อสถานะด้วย "รูปทรง + คำ" ไม่ใช่สีอย่างเดียว
     5. ชื่อคอลัมน์เขียนเป็นคำที่แอดมินพูดจริง ไม่ใช่ชื่อฟิลด์ในฐาน
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --adrail:244px;
  --adline:rgba(255,255,255,.075);
  --adsurf:#111119;
  --adsurf-2:#16161F;
  --adhead:#0F0F17;
  --adline-hi:rgba(255,255,255,.16);
}

/* ── โครง ── */
.adminbody{background:var(--bg)}
.adshell{display:grid; grid-template-columns:var(--adrail) minmax(0,1fr);
  min-height:100vh}
.adbody{min-width:0; display:flex; flex-direction:column}

/* ── รางเมนู ── */
.adrail{position:sticky; top:0; height:100vh; overflow:auto; z-index:40;
  background:linear-gradient(180deg,#0B0B12,#08080C);
  border-right:1px solid var(--adline);
  padding:16px 12px 20px; display:flex; flex-direction:column; gap:3px}
.adbrand{display:flex; align-items:center; gap:10px; padding:4px 8px 14px;
  color:var(--tx); text-decoration:none}
.adbrand .mk{border-radius:9px}
.adbrand b{font-size:15px; font-weight:600; display:block; line-height:1.25}
.adbrand small{font-size:10.5px; color:var(--tx3); letter-spacing:.14em;
  text-transform:uppercase; font-family:"IBM Plex Mono",monospace}
.adgrp{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx3); padding:16px 10px 6px; font-weight:600}
.aditem{display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:10px; color:var(--tx2); font-size:13.5px; text-decoration:none;
  position:relative; transition:background var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease)}
.aditem svg{width:17px; height:17px; flex:none; opacity:.72}
.aditem .lb{min-width:0}
.aditem:hover{background:var(--glass); color:var(--tx)}
/* ⛔ ใช้ aria-current ไม่ใช่ .on — markNav() ติด .on ให้ทุกลิงก์ที่เป็น
   "ต้นทางของที่อยู่ปัจจุบัน" ⇒ /web/admin จะสว่างค้างทุกหน้าย่อย */
.aditem[aria-current="page"]{color:var(--tx); font-weight:600;
  background:linear-gradient(90deg,rgba(255,45,70,.16),rgba(255,45,70,.03))}
.aditem[aria-current="page"] svg{opacity:1; color:var(--ember-lit)}
.aditem[aria-current="page"]::before{content:""; position:absolute; left:-12px;
  top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--ember)}
.adcnt{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11px;
  font-weight:600; padding:1px 7px; border-radius:999px; background:var(--glass-2);
  color:var(--tx2); font-variant-numeric:tabular-nums}
.adcnt.hot{background:rgba(255,45,70,.2); color:#FFB3BC;
  box-shadow:inset 0 0 0 1px rgba(255,45,70,.36)}
.adfoot{margin-top:auto; padding:14px 10px 0; border-top:1px solid var(--adline);
  display:flex; flex-direction:column; gap:8px; font-size:11.5px; color:var(--tx3)}
.adback{color:var(--tx2); text-decoration:none; font-size:12.5px}
.adback:hover{color:var(--tx)}
.adsync{display:flex; align-items:center; gap:7px}
.livedot{width:7px; height:7px; border-radius:999px; background:var(--ok);
  box-shadow:0 0 0 3px rgba(127,224,127,.16); flex:none}
.livedot.stale{background:var(--warn); box-shadow:0 0 0 3px rgba(224,168,119,.16)}

/* ── แถบบน ── */
/* ⛔ ชื่อคลาสต้องไม่ใช่ .adtop — ชื่อนั้นเป็นหัวการ์ดของหน้าฝั่งลูกค้าอยู่แล้ว
   (มี flex-wrap:wrap ติดมาด้วย) ⇒ ใช้ชื่อของตัวเองจะได้ไม่รับของแถมเงียบ ๆ */
.adtopbar{position:sticky; top:0; z-index:30; display:flex; align-items:center;
  gap:12px; padding:12px 24px; border-bottom:1px solid var(--adline);
  background:rgba(7,7,10,.88); backdrop-filter:blur(14px)}
.adcrumb{font-size:12.5px; color:var(--tx3); display:flex; align-items:center;
  gap:7px; margin:0}
.adcrumb b{color:var(--tx); font-weight:500}
/* ⛔⛤ เส้นทางที่หน้าตาเหมือนกดได้ ต้องกดได้จริง — ของเดิมเป็นข้อความเปล่า
   กดแล้วได้แค่ลากคลุมตัวอักษร (เจ้าของแจ้งเอง 2026-09-13) */
.adcrumb a{color:var(--tx3); text-decoration:none; border-radius:7px;
  padding:3px 6px; margin:-3px -6px;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.adcrumb a:hover{color:var(--tx); background:var(--glass)}
.adstore svg{opacity:.8}
.adsearch svg{opacity:.8}
.adsearch kbd{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--tx3);
  border:1px solid var(--adline); border-radius:5px; padding:1px 5px; margin-left:8px;
  background:var(--glass)}
.adkeys{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--tx3)}

/* ══ ช่องค้นหาเดียวของหลังร้าน (Ctrl+K) ══
   ⛔ กล่องนี้แขวนที่ <body> เสมอ — เป็นลูกของแผงที่ overflow:hidden เมื่อไหร่
      รายการจะโดนตัดหายทันที (เคยโดนมาแล้วกับเมนูในการ์ดคีย์) */
.palwrap{align-items:flex-start}
.palcard{width:min(620px,100%); margin-top:12vh; max-height:74vh; display:flex;
  flex-direction:column; overflow:hidden}
.palhead{padding:14px 16px; border-bottom:1px solid var(--line)}
.palhead input{width:100%}
.pallist{overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:2px}
.palrow{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:transparent; border:0; border-radius:10px; padding:9px 11px;
  color:var(--tx2); cursor:pointer; font:inherit}
.palrow .t{min-width:0; display:grid}
.palrow .t b{font-size:13.5px; font-weight:600; color:var(--tx);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.palrow .t span{font-size:11.5px; color:var(--tx3)}
.palrow .k{margin-left:auto; font-size:10.5px; color:var(--tx3); flex:none;
  border:1px solid var(--adline); border-radius:999px; padding:2px 9px}
.palrow.on{background:linear-gradient(90deg,rgba(255,45,70,.16),rgba(255,45,70,.04))}
.palrow.on .t b{color:#fff}
.palfoot{padding:10px 16px; border-top:1px solid var(--line); font-size:11.5px;
  color:var(--tx3)}
.adrailbtn{display:none}
.adrailbg{position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.55)}

/* ── หน้า ── */
.adpage{padding:24px 24px 72px; max-width:1620px; width:100%}
.adhead{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin-bottom:20px}
.adhead h1{font-size:24px; font-weight:600; letter-spacing:-.015em; margin:0}
.adlead{font-size:12.5px; color:var(--tx3); margin:4px 0 0; max-width:76ch}
.adstack{display:grid; gap:16px}
.adcols{display:grid; gap:16px; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.adcols.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.adcols.start{align-items:start}

/* ── กล่องเนื้อหา ── */
.adpanel{background:var(--adsurf); border:1px solid var(--adline);
  border-radius:14px; overflow:hidden}
.adpanel>header{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--adline)}
.adpanel>header h2{font-size:14.5px; font-weight:600; margin:0}
.adwhy{font-size:12px; color:var(--tx3)}
.adnote{font-size:12px; color:var(--tx3); padding:0 16px 14px; margin:0}
/* ══ แท็บแยกกองงานในหลังร้าน (2026-09-13) ══
   ⛔⛤ เจ้าของเปิดหน้าเงินแล้วเห็นใบปนกันจนแยกไม่ออกว่าใบไหนต้องทำอะไร
      ⇒ กองที่เป็น "งานจริง" ต้องเด่นกว่ากองอื่นชัดเจน ไม่ใช่แท็บเท่ากันหมด */
.adtabs{display:flex; gap:8px; flex-wrap:wrap; padding:14px 16px;
  border-bottom:1px solid var(--line)}
.adtab{min-height:34px; padding:0 14px; border-radius:999px; font-size:13.5px;
  border:1px solid transparent; background:transparent; color:var(--tx3);
  cursor:pointer; display:inline-flex; align-items:center;
  transition:color var(--t) var(--ease), background var(--t) var(--ease)}
.adtab:hover{color:var(--tx2)}
.adtab[aria-selected="true"]{color:var(--tx); background:var(--glass);
  border-color:var(--line)}
.adtab .c{font-family:"IBM Plex Mono",monospace; font-size:11.5px; margin-left:7px;
  padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.09)}
.adtab[data-hot="1"] .c{background:var(--ember); color:#fff}
/* ══ การ์ด "งานเดียวของหน้านี้" (2026-09-13 รอบ 2) ══
   ⛔⛤ เจ้าของแจ้งว่าหลังร้านดูแล้วงง ⇒ ทุกหน้าต้องตอบคำถามเดียว
      "ตอนนี้ต้องทำอะไร" · ตัวเลขใหญ่ที่สุดในหน้า = จำนวนงานค้าง
      เป็น 0 ต้องเปลี่ยนเป็นโทนเขียวและบอกว่าว่างแล้ว ไม่ใช่ปล่อยให้ตารางเปล่าตอบแทน */
.adjob{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:18px 22px;
  border-radius:var(--r); margin-bottom:14px;
  border:1px solid rgba(63,214,138,.28); background:rgba(63,214,138,.06)}
.adjob.hot{border-color:var(--line-2); background:rgba(255,59,59,.07)}
.adjob .big{font-family:"IBM Plex Mono",monospace; font-size:36px; font-weight:600;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--money)}
.adjob.hot .big{color:var(--vio-lit)}
.adjob .t{min-width:0}
.adjob .t b{display:block; font-size:15.5px; font-weight:600}
.adjob .t span{font-size:13px; color:var(--tx3)}
.adjobmini{display:flex; gap:26px; flex-wrap:wrap; padding:0 4px 16px; margin-bottom:14px;
  border-bottom:1px solid var(--line)}
.adjobmini div{min-width:110px}
.adjobmini b{display:block; font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums}
.adjobmini span{font-size:11.5px; color:var(--tx3)}
.adjobmini .g b{color:var(--money)} .adjobmini .y b{color:var(--gold)}
.adjobmini .m b{color:var(--tx2)}

/* ══ ลิ้นชักรายละเอียด — ปุ่มที่ย้อนไม่ได้อยู่ในนี้เท่านั้น ══ */
.drawerwrap{place-items:stretch; justify-content:flex-end}
.drawercard{width:min(540px,100%); height:100%; max-height:100%; overflow-y:auto;
  background:var(--surface); border:0; border-left:1px solid var(--line-2);
  border-radius:0; display:flex; flex-direction:column}
.drawercard .modalhead{position:sticky; top:0; background:var(--surface); z-index:2}
.drbox{border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  margin-bottom:14px}
.drbox h3{font-size:13.5px; font-weight:500; color:var(--tx3); margin-bottom:9px}
.drbox.danger{border-color:var(--line-2); background:rgba(255,59,59,.05)}
.drbox.danger h3{color:var(--vio-lit)}
.drbox.danger .adfine{margin-bottom:12px; display:block}
.drkv{display:grid; grid-template-columns:auto 1fr; gap:5px 16px; font-size:13.5px;
  margin:0}
.drkv dt{color:var(--tx3)}
.drkv dd{margin:0; color:var(--tx2); min-width:0; overflow-wrap:anywhere}


/* ══ แถวแพ็กในหน้าสินค้า (2026-09-13 รอบ 3) ══
   ⛔⛤ ของเดิมเป็นตาราง 8 คอลัมน์ ⇒ ต้องกวาดตาข้ามคอลัมน์ถึงจะรู้ว่าแพ็กไหนทำเงิน
      ของใหม่วางแถบสัดส่วนรายได้ไว้กลางแถว เห็นจากหางตาได้เลย */
.adpacks{display:flex; flex-direction:column}
.adpack{display:grid; gap:14px; align-items:center; padding:12px 18px; cursor:pointer;
  border-bottom:1px solid var(--line); grid-template-columns:1fr;
  transition:background .16s var(--ease)}
@media(min-width:820px){
  .adpack{grid-template-columns:minmax(0,1.35fr) 96px minmax(100px,1.1fr) 158px auto}
}
.adpack:last-child{border-bottom:0}
.adpack:hover{background:rgba(255,255,255,.035)}
.adpack.off{opacity:.55}
.adpack .nm{font-size:14.5px; font-weight:500}
.adpack .tg{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 2px}
.adpack .pc{text-align:right}
.adpack .pc b{display:block; font-family:"IBM Plex Mono",monospace; font-size:15px;
  font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums}
.adpack .pc span{font-size:10.5px; color:var(--tx3)}
.adpack .rv span{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--tx3)}
.adpack .lm{font-size:11.5px; color:var(--tx3); line-height:1.6}
.adpack .lm b{color:var(--tx2); font-weight:500; font-family:"IBM Plex Mono",monospace}
/* แถบสัดส่วนรายได้ — เทียบกับแพ็กที่ทำเงินมากสุดของทั้งร้าน */
/* ⛔⛤ 2026-09-13: เคยชื่อ `.adbar` ซึ่งชนกับแถบกรวยคนเข้าเว็บ (สูง 30px
   ใช้ position:absolute) ที่อยู่ท้ายไฟล์กว่า ⇒ **แถบสัดส่วนรายได้ในหน้าสินค้า
   ถูกวาดเป็นแถบสูง 30px ผิดรูปมาตลอด** โดยไม่มีอะไรฟ้อง ⇒ แยกชื่อออก */
.adrev{height:6px; border-radius:999px; background:rgba(255,255,255,.07);
  overflow:hidden; margin-bottom:5px}
.adrev i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,rgba(255,59,59,.45),var(--vio))}
.adprodf{padding:11px 18px; display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  background:rgba(0,0,0,.18); border-top:1px solid var(--line)}
.adprodf .t{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--tx3)}

/* ══ บันทึกกิจกรรม — หัววันติดขอบบน + แถวที่อ่านออกจากหางตา ══ */
.addaybar{position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:9px;
  padding:10px 4px 9px; margin-top:6px;
  background:linear-gradient(180deg,var(--bg) 68%,rgba(0,0,0,0));
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--tx3)}
.addaybar b{font-family:"Anuphan",sans-serif; font-size:13.5px; font-weight:600;
  color:var(--tx2)}
.addaybar .ln{flex:1; height:1px; background:var(--line)}
.adev{display:grid; grid-template-columns:52px 26px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:9px 12px 9px 10px; border-radius:10px; cursor:pointer;
  border-left:3px solid transparent; transition:background .14s var(--ease)}
.adev:hover{background:rgba(255,255,255,.04)}
/* ⛤ สิ่งที่ผิดปกติต้องเด่นกว่าของปกติ — เห็นจากหางตาโดยไม่ต้องอ่าน */
.adev.risk{border-left-color:var(--rose); background:rgba(255,107,90,.05)}
.adev.admin{border-left-color:var(--vio)}
.adev .tm{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--tx3);
  text-align:right; font-variant-numeric:tabular-nums}
.adev .tx{min-width:0; font-size:13.5px; line-height:1.5}
.adev .tx b{font-weight:500}
.adev .tx em{font-style:normal; color:var(--tx3); font-size:12.5px}
/* ⛤ รหัสดิบยังอยู่ (ไล่บั๊กต้องใช้) แต่ไม่บังประโยคจริง — โผล่ตอนชี้เมาส์ */
.adev .raw{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--tx3);
  opacity:0; transition:opacity .14s var(--ease); white-space:nowrap}
.adev:hover .raw, .adev:focus-visible .raw{opacity:.75}

/* จำนวนกำกับบนชิปตัวกรองของหลังร้าน */
.adchip .c{font-family:"IBM Plex Mono",monospace; font-size:11px; margin-left:7px;
  padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.09);
  color:var(--tx3)}
.adchip.on .c{color:var(--tx2)}
.adchip[data-hot="1"] .c{background:var(--rose); color:#fff}

/* กล่องเตือนในลิ้นชัก — โทนส้ม ไม่ใช่แดง เพราะเป็น "ควรรู้" ไม่ใช่ "อันตราย" */
.drbox.tip{border-color:rgba(224,168,119,.32); background:rgba(224,168,119,.05)}
.drbox.tip h3{color:var(--warn)}
.drbox h3 .adtag{margin-left:8px}

/* หัวกองของใบค้างที่จัดกลุ่มตามลูกค้า */
.adgrp td{background:rgba(255,255,255,.035); font-family:"IBM Plex Mono",monospace;
  font-size:12px; color:var(--tx3); padding:9px 16px}
.adwarn{display:flex; gap:10px; align-items:flex-start; padding:11px 16px;
  font-size:12.5px; color:#F0C199; background:rgba(224,168,119,.07);
  border-bottom:1px solid rgba(224,168,119,.2)}
.adwarn.last{border-bottom:0; border-top:1px solid var(--adline)}
.adwarn.cool{color:#95E2F2; background:rgba(95,208,232,.06);
  border-color:rgba(95,208,232,.2)}
.adwarn svg{width:16px; height:16px; flex:none; margin-top:2px}
.adempty{padding:26px 16px; text-align:center; color:var(--tx3); font-size:13px}

/* ── แถบตัวเลข: แผ่นเดียวแบ่งด้วยเส้นผม (ไม่ใช่การ์ดแยกใบ) ── */
/* ⚠ 158px แคบไปจริงตอนเปิดใช้ — บรรทัดล่างของแต่ละช่องตัดคำเป็น 5 บรรทัด
   จนช่องสูงเกือบ 250px · 200px ทำให้ได้ 4-6 ช่องต่อแถวบนจอทำงานจริง
   และบรรทัดล่างจบใน 2 บรรทัด */
.adstrip{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:var(--adsurf); border:1px solid var(--adline); border-radius:14px;
  overflow:hidden}
.adstrip>div{padding:13px 16px; border-right:1px solid var(--adline);
  display:flex; flex-direction:column; gap:3px; min-width:0}
.adstrip>div:last-child{border-right:0}
.adstrip .lab{font-size:11.5px; color:var(--tx3)}
.adstrip .val{font-size:22px; font-weight:600; line-height:1.2;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}
.adstrip .val.money{color:var(--gold)}
.adstrip .val.good{color:var(--ok)}
.adstrip .val.warn{color:var(--warn)}
.adstrip .val.bad{color:#FF9BA6}
.adstrip .val.info{color:var(--info)}
/* ⛔⛤ ห้ามตั้งชื่อคลาสว่า foot ที่นี่ — .foot คือ 'ส่วนท้ายเว็บ' ของหน้าร้าน
   ซึ่งมีกฎแบบไม่จำกัดพ่อแม่ (padding 44px 0 96px + เส้นบน + พื้นหลัง)
   ⇒ บรรทัดล่างของทุกช่องตัวเลขจะสูง 158px และมีเส้นขีดกลางช่อง
   (เจอตอนเปิดดูจริง 2026-09-11 — ตัวเลขถูกดันห่างจากคำอธิบายครึ่งจอ) */
.adstrip .fnote{font-size:11.5px; color:var(--tx3); line-height:1.45}
.adstrip.inside{border:0; border-radius:0}
.adstrip.inside+.adstrip.inside{border-top:1px solid var(--adline)}
.up{color:var(--ok)}
.down{color:var(--bad)}

/* ── คิวงานที่ต้องทำ ── */
.adtodo{display:flex; align-items:center; gap:13px; padding:13px 16px;
  border-bottom:1px solid var(--adline); flex-wrap:nowrap; min-height:56px}
.adtodo:last-child{border-bottom:0}
.adtodo .ic{width:34px; height:34px; border-radius:10px; display:grid;
  place-items:center; flex:none}
.adtodo .ic svg{width:17px; height:17px}
.adtodo .tx{min-width:0; flex:1}
.adtodo .t{font-size:13.5px; font-weight:500}
.adtodo .d{font-size:12px; color:var(--tx3)}
.adtodo .n{font-family:"IBM Plex Mono",monospace; font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums; margin-left:auto}
.adtodo.hot .ic{background:rgba(255,45,70,.15); color:#FF9BA6}
.adtodo.hot .n{color:#FF9BA6}
.adtodo.warn .ic{background:rgba(224,168,119,.14); color:var(--warn)}
.adtodo.warn .n{color:var(--warn)}
.adtodo.calm .ic{background:var(--glass-2); color:var(--tx3)}
.adtodo.calm .n{color:var(--tx3)}

/* ── ป้ายสถานะ: รูปทรง + คำ ไม่ใช่สีอย่างเดียว ── */
.adtag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:600; padding:2px 9px 2px 7px; border-radius:999px; white-space:nowrap;
  background:var(--glass-2); color:var(--tx2);
  box-shadow:inset 0 0 0 1px var(--adline)}
.adtag i{width:6px; height:6px; border-radius:999px; background:currentColor; flex:none}
.adtag.ok{background:rgba(127,224,127,.13); color:#9DEB9D;
  box-shadow:inset 0 0 0 1px rgba(127,224,127,.26)}
.adtag.warn{background:rgba(224,168,119,.14); color:#F0C199;
  box-shadow:inset 0 0 0 1px rgba(224,168,119,.3)}
.adtag.bad{background:rgba(255,107,90,.14); color:#FF9B8C;
  box-shadow:inset 0 0 0 1px rgba(255,107,90,.32)}
.adtag.info{background:rgba(95,208,232,.13); color:#95E2F2;
  box-shadow:inset 0 0 0 1px rgba(95,208,232,.26)}
.adtag.gold{background:rgba(255,194,77,.13); color:#FFD98A;
  box-shadow:inset 0 0 0 1px rgba(255,194,77,.26)}
.adtag.mute i{background:var(--tx3)}
.adtag.sq{border-radius:6px}

/* ── ตาราง ── */
/* ⛔⛤ overflow-x:auto ทำให้ overflow-y กลายเป็น auto ตามสเปก ⇒ กล่องตาราง
   กลายเป็น "พื้นที่เลื่อนของตัวเอง" และ sticky ของหัวตารางจะยึดกับกล่องนั้น
   ไม่ใช่กับหน้าจอ ⇒ เลื่อนหน้าลงแล้วหัวตารางหายไปเฉย ๆ (วัดจริงแล้วหายจริง)
   ⇒ จำกัดความสูงกล่องบนจอกว้าง ให้เลื่อนในตัวเอง หัวตารางจึงค้างได้จริง
   ⚠ บนจอแคบไม่ทำ — พื้นที่เลื่อนซ้อนสองชั้นทำให้ปัดพลาดตลอด */
.adtwrap{overflow-x:auto}
@media (min-width:1061px){
  .adtwrap{max-height:calc(100vh - 220px)}
}
table.adtbl{width:100%; border-collapse:collapse; font-size:13px}
table.adtbl thead th{position:sticky; top:0; z-index:2; background:var(--adhead);
  text-align:left; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tx3); font-weight:600; padding:9px 14px; white-space:nowrap;
  border-bottom:1px solid var(--adline)}
table.adtbl th.r, table.adtbl td.r{text-align:right}
table.adtbl tbody td{padding:10px 14px; vertical-align:middle;
  border-bottom:1px solid rgba(255,255,255,.045)}
table.adtbl tbody tr:last-child td{border-bottom:0}
table.adtbl tbody tr{transition:background var(--t-fast) var(--ease)}
table.adtbl tbody tr:hover{background:rgba(255,255,255,.028)}
table.adtbl tbody tr.need td:first-child{box-shadow:inset 3px 0 0 var(--ember)}
table.adtbl tbody tr.dim{opacity:.62}
table.adtbl tbody tr.pick{cursor:pointer}
table.adtbl tbody tr.sel{background:rgba(255,45,70,.09)}
table.adtbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--ember-lit)}
td.money{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  text-align:right; font-weight:600}
td.mono, .admono{font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--tx2); font-variant-numeric:tabular-nums}
/* เลขใบกับวันที่ห้ามตัดบรรทัด — ตัดแล้วอ่านผิดใบได้ง่ายมากตอนกวาดตา */
td.mono{white-space:nowrap}
.adwho{display:flex; align-items:center; gap:9px; min-width:0}
.adwho .av{width:28px; height:28px; border-radius:999px; flex:none; display:grid;
  place-items:center; font-size:11.5px; font-weight:600; background:#241722;
  color:#E8C3CC}
.adwho .nm{font-weight:500}
.adfine{font-size:11.5px; color:var(--tx3)}
/* ⚠ margin-top:14px ของ .adacts รุ่นเก่า (ยังใช้กับการ์ดฝั่งลูกค้า) รั่วเข้ามา
   ทำให้ปุ่มในช่องตารางลอยต่ำกว่าข้อความในแถวเดียวกัน ⇒ ล้างที่นี่ให้ชัด */
/* ⛔⛤ 2026-09-13: เคยชื่อ `.adacts` ซึ่งชนกับปุ่มท้ายการ์ดใบเติมเงิน
   (บรรทัด ~921) ที่ต้องการ `margin-top` ⇒ กฎตัวนี้อยู่ท้ายกว่าเลยชนะ
   ทำให้ปุ่มท้ายการ์ดเสียระยะห่างด้านบนไปเงียบ ๆ ⇒ แยกชื่อออกจากกัน */
.adtacts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin:0}
/* ⚠ ปุ่มในช่องจัดการห้ามตัดคำ — "ลองออกคีย์ใหม่" ตัดเป็นสองบรรทัดแล้วแถวสูงไม่เท่ากัน
   กวาดตาข้ามแถวไม่ได้ทันที (ปุ่มทั้งกลุ่มขึ้นบรรทัดใหม่ได้ แค่ตัวอักษรห้ามตัด) */
.adtacts .btn{white-space:nowrap}
.adtfoot{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 16px; border-top:1px solid var(--adline); font-size:12.5px;
  color:var(--tx3); background:#0E0E15}
.adextra{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

/* ── ตัวกรอง ── */
.adfilters{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:11px 16px; border-bottom:1px solid var(--adline)}
.adchip{border:1px solid var(--adline); background:none; border-radius:999px;
  padding:5px 13px; font-size:12.5px; color:var(--tx2); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; min-height:32px}
.adchip:hover{border-color:var(--tx3); color:var(--tx)}
.adchip.on{background:var(--glass-2); color:var(--tx);
  border-color:var(--adline-hi); font-weight:600}
.adchip b{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tx3);
  font-weight:600}
.adchip.on b{color:var(--ember-lit)}
.adchip b.hot{color:#FF9BA6}
.adfind{display:flex; align-items:center; gap:7px; background:var(--bg-soft);
  border:1px solid var(--adline); border-radius:9px; padding:5px 11px;
  color:var(--tx3); min-width:240px}
.adfind input{background:none; border:0; outline:none; color:var(--tx);
  font:inherit; font-size:13px; width:100%; min-height:26px}
select.adsel{appearance:none; background:var(--bg-soft);
  border:1px solid var(--adline); border-radius:9px; color:var(--tx2);
  font:inherit; font-size:13px; padding:6px 11px; min-height:34px; cursor:pointer}

/* ── กราฟ ── */
.adchart{padding:14px 16px}
.adchart svg{width:100%; height:auto; display:block; overflow:visible}
.adlegend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--tx3);
  padding:12px 16px 0}
.adlegend span{display:flex; align-items:center; gap:6px}
.adlegend i{width:9px; height:9px; border-radius:3px; display:inline-block}
.adlegend .k1 i{background:linear-gradient(180deg,#FF2D46,#8E1226)}
.adlegend .k2 i{background:linear-gradient(180deg,#95E2F2,#1E5C6B)}

/* ══ กราฟแท่งรุ่น 2 (2026-09-13) ══
   ⛔⛤ สีของกราฟอยู่ที่นี่ที่เดียว — ของเดิมเขียนรหัสสีติดไปกับทุกชิ้นใน JS
      ⇒ เปลี่ยนธีมทีต้องไล่แก้ในสคริปต์ และไม่มีทาง :hover ได้เลย
   ⚠ .adchartbox ต้อง position:relative — กล่องชี้วางตำแหน่งเทียบกล่องนี้ */
.adchartbox{position:relative}
.adchartbox .adgl{stroke:rgba(255,255,255,.08); stroke-width:1}
.adchartbox .adgl.soft{stroke:rgba(255,255,255,.035)}
.adchartbox .adax{fill:var(--tx3); font-size:10px;
  font-family:"IBM Plex Mono",monospace}
.adchartbox .adax.now{fill:var(--tx); font-weight:600}
.adchartbox .adtop{fill:#FFC8CE; font-size:10.5px; font-weight:600;
  font-family:"IBM Plex Mono",monospace}
.adchartbox .adavg{stroke:rgba(255,220,150,.45); stroke-width:1;
  stroke-dasharray:5 5}
.adchartbox .adavgl{fill:rgba(255,220,150,.75); font-size:9.5px;
  font-family:"IBM Plex Mono",monospace}
.adchartbox .adfoot2{fill:var(--tx3); font-size:10px; font-family:Anuphan,sans-serif}
.adchartbox .adcolbg{fill:transparent}
.adchartbox .adcol.lit .adcolbg{fill:rgba(255,255,255,.05)}
.adchartbox .adbar1{transition:filter .14s var(--ease)}
.adchartbox .adcol.lit .adbar1{filter:brightness(1.35)}
.adchartbox .adhit{cursor:crosshair}
/* กล่องชี้ — ลอยเหนือกราฟ ไม่กินการชี้ของตัวเอง (ไม่งั้นกะพริบไม่จบ) */
.adtip{position:absolute; top:2px; transform:translateX(-50%); pointer-events:none;
  background:rgba(14,14,19,.97); border:1px solid var(--line-2); border-radius:10px;
  padding:8px 11px; font-size:12px; color:var(--tx2); white-space:nowrap; z-index:5;
  box-shadow:0 10px 26px rgba(0,0,0,.5); display:grid; gap:2px}
.adtip b{color:var(--tx); font-size:12.5px; font-weight:600}
.adtip .v1{color:#FFB3BC; font-family:"IBM Plex Mono",monospace}
.adtip .v2{color:#95E2F2; font-family:"IBM Plex Mono",monospace}
.adtip .sub{color:var(--tx3)}

/* ── กรวยเส้นทาง ── */
/* ⚠ กรวยยาวเต็มจอกว้าง ๆ อ่านยากกว่าเดิม — ตาต้องกวาดไกลเกินไปกว่าจะถึงตัวเลข
   ⇒ จำกัดความกว้างไว้ แล้วปล่อยที่ว่างด้านขวาแทน */
.adfunnel{display:grid; gap:9px; padding:16px; max-width:940px}
.adstep{display:grid; grid-template-columns:150px minmax(0,1fr) auto;
  align-items:center; gap:14px}
.adstep .fl{font-size:12.5px; color:var(--tx2)}
.adbar{height:30px; border-radius:7px; background:var(--glass); overflow:hidden;
  position:relative}
.adbar i{position:absolute; inset:0 auto 0 0; border-radius:7px;
  background:linear-gradient(90deg,rgba(255,45,70,.75),rgba(255,124,139,.4))}
.adbar i.good{background:linear-gradient(90deg,#4E9E5E,#7FE07F)}
.adbar b{position:absolute; left:11px; top:0; line-height:30px; font-size:12.5px;
  font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.65);
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.adpc{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--tx3);
  min-width:74px; text-align:right; font-variant-numeric:tabular-nums}

/* ── บันทึกกิจกรรมแบบภาษาคน ── */
.adfeed{display:flex; flex-direction:column}
.adline{display:grid; grid-template-columns:60px 26px minmax(0,1fr) auto; gap:11px;
  align-items:center; padding:8px 16px; font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.045)}
.adline:last-child{border-bottom:0}
.adline .tm{font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  color:var(--tx3); font-variant-numeric:tabular-nums}
.adline .ic{width:26px; height:26px; border-radius:8px; display:grid;
  place-items:center; font-size:12px; font-weight:600}
.adline .ic.sale{background:rgba(127,224,127,.13); color:var(--ok)}
.adline .ic.people{background:rgba(95,208,232,.12); color:var(--info)}
.adline .ic.money{background:rgba(255,194,77,.12); color:var(--gold)}
.adline .ic.admin{background:rgba(255,45,70,.13); color:var(--ember-lit)}
.adline .ic.risk{background:rgba(255,107,90,.14); color:var(--bad)}
.adline .ic.other{background:var(--glass-2); color:var(--tx3)}
.adline .tx b{font-weight:600}
.adline .tx em{font-style:normal; color:var(--tx3)}
.adline .raw{font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  color:#5F5966; white-space:nowrap}

/* ── หน้าลูกค้า: ตาราง + แผงข้าง ── */
.adsplit{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px;
  align-items:start}
.adside{position:sticky; top:76px}
.adsideh{display:flex; gap:12px; align-items:center; padding:16px;
  border-bottom:1px solid var(--adline)}
.adsideh .av{width:44px; height:44px; border-radius:999px; display:grid;
  place-items:center; background:#2A1A24; color:#EFC9D2; font-weight:600;
  font-size:16px; flex:none}
.adsideh .who{min-width:0}
.adsideh .who b{display:block; font-size:15px; font-weight:600}
.adtags{display:flex; gap:7px; flex-wrap:wrap; padding:12px 16px;
  border-bottom:1px solid var(--adline)}
.adkv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 14px;
  padding:13px 16px; font-size:12.5px; border-bottom:1px solid var(--adline);
  margin:0}
.adkv dt{color:var(--tx3)}
.adkv dd{margin:0; text-align:right; font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums}
.adkv dd.txt{font-family:inherit}
.adminih{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx3); padding:13px 16px 7px; font-weight:600}
.admlist{padding:0 16px 14px; display:flex; flex-direction:column; gap:7px}
.admrow{display:flex; align-items:center; gap:9px; font-size:12.5px;
  padding:8px 11px; background:var(--bg-soft); border:1px solid var(--adline);
  border-radius:9px; flex-wrap:wrap}
.admrow.gone{opacity:.6}
.admrow code{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--tx2)}
.adsidebtns{display:flex; gap:7px; flex-wrap:wrap; padding:0 16px 16px}
/* บรรทัด "ยังมีอีก N" ท้ายรายการที่ถูกตัด — ต้องมีทุกที่ที่ตัดรายการ */
.admore{display:flex; align-items:center; gap:10px; font-size:11.5px;
  color:var(--tx3); padding:2px 2px 0}
.admore a{color:var(--tx2); text-decoration:none; margin-left:auto}
.admore a:hover{color:var(--tx); text-decoration:underline}

/* ── ใบขอเติมเงิน ── */
.adslip{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:14px 16px; border-bottom:1px solid var(--adline)}
.adslip:last-child{border-bottom:0}
.adslip .amt{font-family:"IBM Plex Mono",monospace; font-size:17px; font-weight:600;
  font-variant-numeric:tabular-nums}
.adslip .row1{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.adslip .row2{font-size:12.5px; color:var(--tx2); margin-top:4px}
.adslip .row3{font-size:12px; color:var(--tx3); margin-top:2px}
.adface{width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  flex:none; background:#241722; color:#E8C3CC; font-weight:600; font-size:15px}

/* ── สินค้า ── */
.adprod{border-bottom:1px solid var(--adline)}
.adprod:last-child{border-bottom:0}
.adprodh{display:flex; align-items:center; gap:12px; padding:13px 16px;
  background:var(--adhead); flex-wrap:wrap}
.adprodh .cov{width:42px; height:42px; border-radius:10px; flex:none; display:grid;
  place-items:center; background:linear-gradient(150deg,#3A1216,#120A0C);
  box-shadow:inset 0 0 0 1px rgba(255,45,70,.28); font-size:17px; overflow:hidden}
.adprodh .cov img{width:100%; height:100%; object-fit:cover}
.adprodh .nm{font-weight:600; font-size:14px}

/* ── โครงจาง ๆ ตอนกำลังโหลด ── */
.adskel{padding:16px; display:grid; gap:9px}
.adskel i{display:block; height:12px; border-radius:6px; background:var(--glass-2)}
.adskel i.w40{width:40%}
.adskel i.w70{width:70%}

/* ── จอแคบ ── */
@media (max-width:1200px){
  .adcols, .adcols.even{grid-template-columns:minmax(0,1fr)}
  .adsplit{grid-template-columns:minmax(0,1fr)}
  .adside{position:static}
}
@media (max-width:1060px){
  .adshell{grid-template-columns:minmax(0,1fr)}
  /* ⛔ รางบนจอแคบต้องเป็นแผงที่เลื่อนเข้ามา ไม่ใช่แถวเมนูแนวนอนที่ต้องปัดหา
     — เมนูงาน 7 หัวข้อ ปัดหาแล้วพลาดง่ายตอนรีบ */
  .adrail{position:fixed; top:0; bottom:0; left:0; width:262px;
    transform:translateX(-105%); transition:transform var(--t) var(--ease)}
  .adrail.open{transform:none; box-shadow:var(--shadow-hi)}
  .adrailbtn{display:inline-flex}
  .adpage{padding:18px 14px 64px}
  .adtop{padding:10px 14px}
}
@media (max-width:720px){
  .adstep{grid-template-columns:112px minmax(0,1fr)}
  .adpc{grid-column:2; text-align:left; min-width:0}
  .adline{grid-template-columns:52px 24px minmax(0,1fr)}
  .adline .raw{display:none}
  .adslip{grid-template-columns:auto minmax(0,1fr)}
  .adslip .adacts{grid-column:1 / -1; justify-content:flex-start}
  .adhead h1{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .adrail{transition:none}
}

/* ── เก็บรายละเอียดที่เจอตอนประกอบจริง (2026-09-11) ── */
/* กลุ่มชิปที่ซ้อนอยู่ในแถบตัวกรอง ต้องไม่มีขอบ/ระยะซ้อนอีกชั้น */
.adfilters .adfilters{padding:0; border:0; gap:6px}
/* ป้ายสีของกราฟเทียบสองค่า — ต้องเป็นคลาส ไม่ใช่ style ในแท็ก (CSP) */
.adlegend i.lg-visit{background:#C4152B}
.adlegend i.lg-signup{background:#5FD0E8}
/* หน้าบันทึกกิจกรรมย้อนหลังได้ 90 วัน ⇒ ช่องเวลาต้องกว้างพอใส่ "วันที่ + เวลา" */
#al-list .adline{grid-template-columns:118px 26px minmax(0,1fr) auto}
@media (max-width:720px){
  #al-list .adline{grid-template-columns:104px 24px minmax(0,1fr)}
}
/* ปุ่มในช่องราคา (ตารางสินค้า) วางต่อจากตัวเลขในบรรทัดใหม่ ไม่ดันคอลัมน์ */
td.money .btn{margin-top:6px}


/* ══════════════════════════════════════════════════════════════
   ตัวควบคุมที่ "เบราว์เซอร์วาดเอง" — ไม่ใช่ CSS ของเรา
   ⛔⛤ เจ้าของสั่ง 2026-08-31: "กดแท็ปเลื่อนมีหน้าต่างสีขาว
      ทำให้เป็นมือโปรเก็บรายละเอียดทุกจุดไม่ใช่แค่จุดนี้"
      ⇒ ไล่หาของประเภทเดียวกันทั้งเว็บ ไม่ใช่ปะเฉพาะจุดที่ถ่ายรูปมา
      พบ 6 จุดที่เป็นอาการเดียวกันและยังไม่เคยกันไว้เลย
   ⚠ ของพวกนี้ไม่โผล่ในเทสวัดความกว้างหรือเทสโทเคน เพราะมัน "ถูกต้อง"
     ทุกอย่างในสายตาโค้ด — ผิดแค่ตอนคนเห็นจริง ๆ
   ══════════════════════════════════════════════════════════════ */

/* ── 1) ช่องที่เบราว์เซอร์เติมรหัสให้อัตโนมัติ ──
   ⛔⛤ อาการหนักสุด: Chrome ทาพื้นช่องอีเมล/รหัสผ่านเป็น "ขาวอมฟ้า"
      พร้อมตัวหนังสือสีเข้ม ⇒ หน้าเข้าสู่ระบบมีกล่องขาวโพลนกลางธีมมืด
   ⚠ background ธรรมดาทับไม่ได้ Chrome ใช้สไตล์ระดับ UA
     วิธีเดียวที่ได้ผลจริงคือยืมเงาด้านในมาทาแทนพื้น */
input.input:-webkit-autofill,
input.input:-webkit-autofill:hover,
input.input:-webkit-autofill:focus,
textarea.input:-webkit-autofill,
select.input:-webkit-autofill{
  -webkit-text-fill-color:var(--tx);
  -webkit-box-shadow:0 0 0 100px var(--surface) inset;
  box-shadow:0 0 0 100px var(--surface) inset;
  caret-color:var(--tx);
  /* ⚠ ดีเลย์ยาว ๆ คือกลเม็ดมาตรฐาน — กันภาพวูบสีขาวหนึ่งเฟรมตอนโหลด */
  transition:background-color 100000s ease-in-out 0s}

/* ── 2) แถบเลือกข้อความ ──
   ค่าปริยายเป็นน้ำเงินสด อ่านไม่ออกบนพื้นมืด */
::selection{background:color-mix(in oklab,var(--ember) 42%, transparent);
  color:#fff}

/* ── 3) กล่องติ๊ก · ปุ่มกลม · แถบเลื่อน · แถบความคืบหน้า ──
   เบราว์เซอร์ทาด้วยสีประจำตัวเอง (ฟ้า) ⇒ ไม่เข้ากับทั้งเว็บ
   ⚠ หน้าต่างโปรแกรมที่ยกมาโชว์มีกล่องติ๊ก 23 อัน โดนหมดทุกอัน */
input[type="checkbox"],input[type="radio"],
input[type="range"],progress{accent-color:var(--ember)}

/* ── 4) ปุ่ม "เลือกไฟล์" ในช่องแนบไฟล์ ──
   ⛤ ใช้ที่แนบสลิปโอนเงินกับตั้งรูปโปรไฟล์ — สองจุดที่ลูกค้าเจอบ่อย */
input[type="file"]{color:var(--tx3); font:inherit; font-size:13px}
input[type="file"]::file-selector-button{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  margin-right:10px; padding:9px 14px; border-radius:10px;
  color:var(--tx); background:var(--surface);
  border:1px solid var(--line)}
input[type="file"]::file-selector-button:hover{
  border-color:color-mix(in oklab,var(--ember) 45%, var(--line))}

/* ── 5) กากบาทล้างคำค้นในช่องค้นหา ──
   ⚠ เบราว์เซอร์วาดเป็นสัญลักษณ์ทึบสีเข้ม ⇒ จมหายไปกับพื้นมืด
     ใช้ filter กลับสีแทน เพราะแต่งสีมันตรง ๆ ไม่ได้ */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; cursor:pointer; opacity:.5;
  background:var(--tx2);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
input[type="search"]::-webkit-search-cancel-button:hover{opacity:1}

/* ── 6) ลูกศรขึ้นลงของช่องตัวเลข ──
   ⛤ หน้าเติมเงินและหน้าคูปองใช้ช่องตัวเลข 6 ช่อง
   ⚠ ลูกศรจิ๋วของเบราว์เซอร์เล็กกว่า 44px ⇒ กดยากบนมือถืออยู่แล้ว
     ซ่อนทิ้ง แล้วให้พิมพ์เอา (ทุกช่องมีปุ่ม -/+ ของเราเองอยู่แล้ว) */
input[type="number"]{-moz-appearance:textfield; appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; appearance:none; margin:0}

/* ── 7) สามเหลี่ยมของ <details> ──
   ⛤ ใช้ในคำถามที่พบบ่อย 18 อันทั่วเว็บ */
details > summary{cursor:pointer}
details > summary::marker{color:var(--tx3)}
details > summary::-webkit-details-marker{color:var(--tx3)}

/* ── ช่องข้อความยาว ──
   ⚠ .input ตั้ง padding:0 16px ไว้สำหรับช่องบรรทัดเดียว
     ใส่กับ textarea ตรง ๆ ตัวหนังสือจะติดขอบบนสนิท
   ⚠ เบราว์เซอร์ตั้งฟอนต์ของ textarea เป็นฟอนต์ระบบเสมอ ไม่สืบทอดจาก body
     ⇒ ไม่บังคับ font-family เอง จะได้ฟอนต์คนละตัวกับทั้งเว็บ */
textarea.input{padding:14px 16px; line-height:1.75; font-family:inherit;
  resize:vertical; min-height:120px}
textarea.input.tall{min-height:168px}

/* ══ ไอคอนหัวเว็บเป็นโลโก้จริงแล้ว (2026-09-01) ══
   ⚠ กฎเดิมของ .brand .mk วาดพื้นหลังไล่สีให้กล่อง svg — พอเปลี่ยนเป็น <img>
     พื้นหลังนั้นจะโผล่เป็นขอบรอบโลโก้ (โลโก้มีพื้นดำในตัวอยู่แล้ว)
   ⇒ ทับด้วยกฎเฉพาะเมื่อเป็นรูป ไม่ไปแตะกล่อง svg ที่อื่นยังใช้อยู่ */
img.mk{background:none; border:0; box-shadow:none; padding:0;
  object-fit:contain; border-radius:9px}

/* ══════════════════════════════════════════════════════════════
   กล่องที่ JS เติมเนื้อหาทีหลัง — ระหว่างรอให้โชว์โครงจาง ๆ
   ⛔⛤ เจ้าของแจ้ง 2026-09-01: "ทุกแท็ปทุกหน้าเวลากดรี" เห็นภาพแปลก
      HTML จากเซิร์ฟเป็นโครงเปล่า (หน้าสินค้า 18 KB) เนื้อหามาจาก API
      ⇒ ทุกครั้งที่โหลดจะเห็น "หัวข้อลอยอยู่เหนือช่องว่าง" ก่อนเสมอ
        แล้วเนื้อหากระโดดเข้ามาดันหน้าเลื่อน
   ⚠ ใช้ :empty ไม่ใช่คลาสที่ JS ต้องมาถอด — เติมเนื้อหาปุ๊บโครงหายเอง
     ถ้าใช้คลาส แล้ว JS พังกลางทาง โครงจะค้างถาวรแทนที่จะเป็นแค่ว่าง
   ══════════════════════════════════════════════════════════════ */
/* ⛔⛤ ต้องมี :not([hidden]) — ของบางจุด (กล่องกันบอท · เส้นคั่น) ตั้ง hidden ไว้
   แล้วให้ JS ถอดตอนถึงเวลา · display:block ที่นี่จะไป **ทับ hidden**
   ⇒ ของที่ควรซ่อนจะโผล่ขึ้นมาเป็นแถบเทาลอย ๆ ทุกหน้า
   (เกือบพลาดตอนเขียนกฎนี้เอง 2026-09-01) */
[data-fill]:empty:not([hidden]){
  display:block;
  min-height:120px;
  border-radius:var(--r-sm, 12px);
  background:
    linear-gradient(100deg, transparent 20%,
      color-mix(in oklab, var(--tx3) 9%, transparent) 42%,
      transparent 64%) 0 0 / 220% 100% no-repeat,
    color-mix(in oklab, var(--tx3) 5%, transparent);
  animation:fillwait 1.25s linear infinite}
@keyframes fillwait{from{background-position:120% 0} to{background-position:-120% 0}}

/* ความสูงที่จองไว้ต่อจุด — ใกล้ของจริงแล้วหน้าจะไม่กระโดดตอนเนื้อหามา */
[data-fill="46"]:empty:not([hidden]){min-height:46px}
[data-fill="54"]:empty:not([hidden]){min-height:54px}
[data-fill="56"]:empty:not([hidden]){min-height:56px}
[data-fill="64"]:empty:not([hidden]){min-height:64px}
[data-fill="90"]:empty:not([hidden]){min-height:90px}
[data-fill="120"]:empty:not([hidden]){min-height:120px}
[data-fill="130"]:empty:not([hidden]){min-height:130px}
[data-fill="140"]:empty:not([hidden]){min-height:140px}
[data-fill="150"]:empty:not([hidden]){min-height:150px}
[data-fill="160"]:empty:not([hidden]){min-height:160px}
[data-fill="180"]:empty:not([hidden]){min-height:180px}
[data-fill="190"]:empty:not([hidden]){min-height:190px}
[data-fill="200"]:empty:not([hidden]){min-height:200px}
[data-fill="220"]:empty:not([hidden]){min-height:220px}
[data-fill="260"]:empty:not([hidden]){min-height:260px}
[data-fill="300"]:empty:not([hidden]){min-height:300px}
[data-fill="380"]:empty:not([hidden]){min-height:380px}
[data-fill="560"]:empty:not([hidden]){min-height:560px}

/* ⚠ คนที่ตั้งเครื่องให้ลดการเคลื่อนไหว ต้องไม่เห็นแถบวิ่ง — เหลือแค่พื้นจาง */
@media (prefers-reduced-motion: reduce){
  [data-fill]:empty:not([hidden]){animation:none; background:
    color-mix(in oklab, var(--tx3) 5%, transparent)}
}
[data-fill="78"]:empty:not([hidden]){min-height:78px}

/* ══════════════════════════════════════════════════════════════
   หน้าเลื่อนทั้งแผงตอนของโหลดเสร็จ (2026-09-01)
   ⛔⛤ การ์ด "ซองอั่งเปา" ซ่อนฟอร์มไว้ (#ap-box hidden) รอเซิร์ฟบอกว่า
      เปิดรับไหม · พอฟอร์มโผล่ การ์ดสูงขึ้น แล้วทุกอย่างข้างล่างเลื่อนลง
      ทั้งแผง ⇒ กดรีเฟรชถี่ ๆ เห็นหน้ากระตุก/ซ้อนตลอด
   ⇒ ระหว่างที่ยังไม่รู้คำตอบ ให้ฟอร์ม "กินที่แต่มองไม่เห็น"
     ⚠ จองด้วยความสูงของฟอร์มจริง ไม่ใช่ตัวเลขที่เดาเอง
       เพิ่มช่องกรอกทีหลังเมื่อไหร่ ที่จองก็ขยายตามเอง
   ⚠ visibility:hidden ไม่ใช่ opacity:0 — ต้องกดไม่ได้และคีย์บอร์ดข้ามไป
   ══════════════════════════════════════════════════════════════ */
#way-angpao:not([data-known]) #ap-box[hidden]{
  display:block; visibility:hidden}

/* ยอดเงินระหว่างรอตัวเลขจริง — แถบจาง ไม่ใช่ขีดลอย ๆ */
#wl-balance:empty{min-height:46px; max-width:180px}

/* ══════════════ หน้าแรก: หน้าต่างโปรแกรมเอียง 3 มิติ ══════════════
   ⛤ ยกหน้าตาจากเว็บต้นฉบับ (HaruShop-Website) มาเขียนด้วยโทเคนของร้าน
      ไม่พึ่ง Tailwind ไม่เพิ่มไฟล์นอกสักไฟล์
   ⛔ ทุกชื่อคลาสขึ้นต้น hs-/hw- เพราะชื่อสั้น ๆ ชนของเดิมเพียบ
      (.f1 .f2 .f3 .eyebrow .lead .pill .chip .grid มีกฎแบบไม่จำกัดพ่อแม่อยู่แล้ว)
   ⛔ วาดด้วย CSS ล้วน ไม่มีภาพจากตัวเกม — เป็นภาพจำลอง ไม่ใช่ภาพหน้าจอจริง */

/* ── แสงพื้นหลังแดง (เจ้าของว่าของเดิม "มืดไป ไม่แดงเหมือนต้นฉบับ") ── */
.hero .hs-glow{position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none}
.hs-glow i{position:absolute; border-radius:50%; filter:blur(80px); display:block}
.hs-g1{top:-22rem; left:-10rem; width:52rem; height:52rem;
  background:radial-gradient(circle,rgba(255,45,70,.44),transparent 66%)}
.hs-g2{top:4%; right:-14rem; width:48rem; height:48rem;
  background:radial-gradient(circle,rgba(226,28,42,.40),transparent 66%)}
.hs-g3{bottom:-14rem; left:26%; width:40rem; height:40rem;
  background:radial-gradient(circle,rgba(255,150,95,.24),transparent 66%)}

/* ── กริดสองคอลัมน์เฉพาะหน้าแรก ──
   ⚠ ของเดิม .hgrid:not(.solo) = 1.02fr .98fr ซึ่งซ้ายกว้างกว่าขวา
      แต่ฝั่งขวาต้องอวดหน้าต่างโปรแกรม ⇒ กลับสัดส่วน */
@media(min-width:1060px){
  /* ⛔ ต้องมีที่ว่างด้านบนมากกว่าหน้าอื่น — ป้ายลอยอยู่เหนือขอบหน้าต่าง
     และ .hero{overflow:hidden} จะตัดทุกอย่างที่พ้นขอบบนทิ้งเงียบ ๆ
     ⚠ เฉพาะจอกว้าง — จอแคบซ่อนป้ายลอยอยู่แล้ว เว้นไว้ = ช่องว่างเปล่า */
  .hero.showcase{padding-top:112px}
  .hgrid.showcase{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  /* ⛔ มาสคอตห้อยต่ำกว่าขอบล่างหน้าต่าง ~74px ⇒ คำชี้แจงต้องหลบให้พ้น
     ไม่งั้นตัวหนังสือทับตัวคุกกี้ (จอแคบไม่มีมาสคอต จึงไม่ต้องเว้น) */
  .hero.showcase .hs-note{margin-top:96px}
  /* ⚠ หัวเรื่องต้องอยู่ 2 บรรทัดเสมอแบบต้นฉบับ — 3 บรรทัดเมื่อไหร่พลังหาย
     ของเดิม 6vw กว้างเกินเมื่อคอลัมน์แคบลง ⇒ ผูกกับ vw ที่เล็กลง */
  .hero .hgrid.showcase h1{font-size:clamp(36px,4.15vw,54px); line-height:1.1}
}

/* ── ตัวหน้าต่าง ── */
.hs-wrap{position:relative; perspective:1600px}
/* ⛤ เจ้าของแจ้ง 2026-09-02: "จอโปรแกรมล้น" (จอ 1920 ตัวเลขขวาโดนตัด)
   วัดที่ 1280/1440/1600/1920/2560 แล้ว: 128% ล้น 4 จาก 5 · 114% ล้น 2
   ⇒ 108% คือค่ามากสุดที่ไม่ล้นสักจอ · ยังล้นกรอบคอลัมน์ตัวเองอยู่
     (ได้ความรู้สึก "หน้าต่างใหญ่" แบบต้นฉบับ แต่ไม่มีอะไรโดนตัดทิ้ง)
   ⚠ ด่านกวาดความกว้างมองไม่เห็น เพราะยกเว้นของที่อยู่ในกล่องตัดขอบ
     ⇒ มีด่านเฉพาะใน check_hero_showcase.js วัดขอบขวาเทียบขอบจอ */
.hs-win{position:relative; width:108%; transform-origin:left center;
  /* ⛔⛤ ห้ามตั้งชื่อตัวแปรว่า --tx/--ty — ชนโทเคนสีตัวอักษรของร้าน
     ⇒ calc องศาบวกกับ "สี" เป็นค่าใช้ไม่ได้ เบราว์เซอร์ทิ้ง transform
        ทั้งบรรทัดเงียบ ๆ หน้าต่างจะแบนสนิทโดยไม่มี error สักตัว
     ⚠ อย่าเขียนรหัสสีตัวอย่างตรงนี้ — ด่านตรวจสีดิบไม่ตัดคอมเมนต์ก่อนอ่าน */
  transform:rotateY(calc(-13deg + var(--hs-ty,0deg)))
    rotateX(calc(4deg + var(--hs-tx,0deg))) rotate(-1deg) scale(.94);
  transition:transform .25s cubic-bezier(.2,.7,.25,1);
  border-radius:16px; border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(165deg,var(--surface),var(--bg-soft));
  box-shadow:0 40px 90px rgba(0,0,0,.72), 0 0 0 1px rgba(255,45,70,.10),
    0 0 90px rgba(255,45,70,.13)}

/* แถบหัวหน้าต่าง */
.hw-bar{display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-bottom:1px solid var(--line); background:rgba(0,0,0,.34)}
.hw-name{display:flex; align-items:center; gap:8px; font-size:12.5px;
  font-weight:700; white-space:nowrap}
.hw-name i{width:19px; height:19px; border-radius:6px; display:grid;
  place-items:center; font-style:normal; font-size:9.5px; font-weight:800;
  background:var(--ember-btn); color:#fff}
.hw-ver{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--tx3)}
.hw-sep{width:1px; height:15px; background:var(--line)}
.hw-page{font-size:11.5px; color:var(--tx2); display:flex; gap:6px;
  align-items:center; white-space:nowrap}
.hw-push{margin-left:auto}
.hw-chip{display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:999px; border:1px solid var(--line); background:var(--glass);
  font-size:10.5px; color:var(--tx2); white-space:nowrap}
.hw-chip s{width:5px; height:5px; border-radius:50%; background:var(--ok);
  text-decoration:none}
.hw-chip.go{background:var(--ember-btn); border-color:var(--ember-btn);
  color:#fff; font-weight:700}
.hw-btns{display:flex; gap:9px; color:var(--tx3); font-size:10px;
  padding-left:4px}

/* ตัวเนื้อหน้าต่าง */
.hw-body{display:grid; grid-template-columns:146px 1fr; min-height:436px}
.hw-rail{border-right:1px solid var(--line); padding:12px 9px;
  background:rgba(0,0,0,.22)}
.hw-rail .grp{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx3); font-family:"IBM Plex Mono",monospace; padding:6px 8px 8px}
.hw-rail span.nav{display:flex; gap:8px; align-items:center; padding:8px 9px;
  border-radius:9px; color:var(--tx2); font-size:11.5px; margin-bottom:2px}
.hw-rail span.nav.on{background:rgba(255,45,70,.13); color:var(--tx);
  border:1px solid rgba(255,45,70,.24)}
.hw-rail span.nav b{display:block; font-weight:600}
.hw-rail span.nav small{display:block; font-size:9.5px; color:var(--tx3)}
.hw-rail span.nav i{font-style:normal; font-size:12px}

.hw-main{padding:14px}
.hw-head{display:flex; align-items:center; gap:12px; padding:13px 15px;
  border-radius:13px; margin-bottom:12px;
  border:1px solid rgba(127,224,127,.24); background:rgba(127,224,127,.06)}
.hw-head .mark{position:relative; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; background:rgba(127,224,127,.14);
  color:var(--ok); font-size:15px}
/* วงแหวนหมุนรอบเครื่องหมายถูก — บอกว่า "กำลังทำงานอยู่" (ต้นฉบับ: ring-spin) */
.hw-head .mark::before{content:""; position:absolute; inset:-4px;
  border-radius:13px; pointer-events:none;
  border:1.5px dashed rgba(127,224,127,.5)}
@keyframes hsSpin{to{transform:rotate(360deg)}}
.hs-anim .hw-head .mark::before{animation:hsSpin 7s linear infinite}
.hw-head b{display:block; font-size:13.5px}
.hw-head small{display:block; font-size:10.5px; color:var(--tx3)}
.hw-big{margin-left:auto; text-align:right}
.hw-big b{font-size:22px; font-family:"IBM Plex Mono",monospace; color:var(--tx)}
.hw-big small{letter-spacing:.12em; text-transform:uppercase; font-size:9px}

.hw-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:9px;
  margin-bottom:12px}
.hw-tile{border:1px solid var(--line); border-radius:12px; padding:11px 12px;
  background:var(--glass)}
.hw-tile small{display:flex; align-items:center; gap:5px; font-size:9.5px;
  color:var(--tx3); margin-bottom:5px}
.hw-tile b{font-size:18px; font-family:"IBM Plex Mono",monospace; display:block}
.hw-tile u{display:block; text-decoration:none; font-size:9px;
  color:var(--tx3); margin-top:2px}

.hw-rows{display:grid; grid-template-columns:repeat(4,1fr); gap:9px;
  margin-bottom:12px}
.hw-row{border:1px solid var(--line); border-radius:11px; padding:9px 11px;
  background:var(--glass)}
.hw-row small{display:block; font-size:9px; color:var(--tx3);
  font-family:"IBM Plex Mono",monospace}
.hw-row b{font-size:11.5px; display:block; margin-top:2px}
.hw-row.r1 b{color:var(--ok)}   .hw-row.r2 b{color:var(--gold)}
.hw-row.r3 b{color:var(--info)} .hw-row.r4 b{color:var(--ember-lit)}

.hw-log{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.hw-log .cap{display:flex; align-items:center; gap:8px; padding:7px 11px;
  border-bottom:1px solid var(--line); background:rgba(0,0,0,.3);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx3)}
.hw-log .cap span{padding:2px 8px; border-radius:999px; background:var(--glass);
  color:var(--tx2); letter-spacing:0; text-transform:none}
.hw-log ul{margin:0; padding:8px 11px; list-style:none;
  font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--tx2)}
.hw-log li{padding:2.5px 0; display:flex; gap:9px; white-space:nowrap}
.hw-log .at{color:var(--tx3)} .hw-log .who{color:var(--ember-lit)}

/* ── ป้ายลอย ──
   ⛤ ต้องเด่นพอจะอ่านจากมุมตา — กรอบแดงเรือง + ตัวเลขใหญ่
   ⛔ ต้องลอยเหนือ/นอกหน้าต่าง ห้ามทับแถบหัวหรือเนื้อหา
      (หน้าต่างเอียง ⇒ ขอบบนลาด ต้องเผื่อระยะมากกว่ากล่องตรง ๆ)
   ⛔ และต้องไม่ชนแถบเมนูข้างบน — ช่องว่างระหว่างเมนูกับขอบหน้าต่างแคบ */
.hs-chip{position:absolute; z-index:4; padding:12px 18px; border-radius:15px;
  border:1px solid rgba(255,45,70,.42); background:rgba(14,7,10,.94);
  box-shadow:0 18px 44px rgba(0,0,0,.66), 0 0 26px rgba(255,45,70,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px)}
.hs-chip small{display:block; font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember-lit); margin-bottom:5px; opacity:.85}
.hs-chip b{font-family:"IBM Plex Mono",monospace; font-size:25px;
  font-weight:700; color:var(--tx); letter-spacing:-.5px; line-height:1.1;
  display:block; font-variant-numeric:tabular-nums}
.hs-chip b em{font-style:normal; font-size:11px; color:var(--tx3);
  margin-left:4px}
.hs-c1{top:-13%; left:8%}   .hs-c1 b{color:var(--ok)}
.hs-c2{top:-15%; right:19%} .hs-c2 b{color:var(--tx)}
.hs-c3{bottom:-9%; right:4%} .hs-c3 b{color:var(--gold)}

/* ── มาสคอต ──
   ⛤ ต้นฉบับ: คุกกี้ยืน "เกาะมุมล่างซ้ายของหน้าต่าง" ตัวคาบขอบหน้าต่างไว้
      ไม่ใช่ลอยอยู่ข้างล่างแยกกัน */
.hs-mascot{position:absolute; left:-7%; bottom:-14%; width:142px; z-index:6;
  pointer-events:none; filter:drop-shadow(0 18px 30px rgba(0,0,0,.75))}
.hs-mascot svg{width:100%; display:block}

/* ── คำชี้แจงใต้ภาพ (ห้ามหาย — เป็นภาพจำลอง ไม่ใช่ภาพหน้าจอจริง) ── */
.hs-note{margin:34px auto 0; font-size:11.5px; color:var(--tx3);
  text-align:center; max-width:min(62ch,100%)}

/* ══ จอแคบ: หน้าต่างโปรแกรมกลายเป็น "การ์ดแนวตั้ง" ══
   ⛔⛤ ของเดิมบังคับ min-width:760px แล้วให้เลื่อนซ้ายขวาเอา
      วัดจริงบนจอ 390: เห็นได้ครึ่งเดียว · หน้าแรกสูง 6,500px = 7.7 หน้าจอ
      และการปัดซ้ายขวาในหน้าที่เลื่อนลงอยู่ = ท่าที่นิ้วทำพร้อมกันไม่ได้
   ⇒ ไม่ย่อของเดิม แต่ **จัดใหม่ให้พอดีจอ**: ซ่อนเมนูซ้าย · ตัวเลข 2 คอลัมน์ ·
     จอเรียงลงมา · บันทึกเหลือ 3 บรรทัดล่าสุด แล้วมีลิงก์ไปหน้าเต็ม
   ⚠ ข้อมูลไม่หายสักอย่าง — ที่ตัดคือ "จำนวนบรรทัดที่โชว์" ไม่ใช่เนื้อหา */
@media(max-width:1059px){
  .hs-chip,.hs-mascot{display:none}
  /* ⛔ ก้อนแสงตั้งขนาดเป็น rem คงที่ (52rem = 832px) ⇒ บนจอ 320-390px
     มันยื่นพ้นขอบขวาจอ · ด่านกวาดความกว้างจับได้ ถึงหน้าจะไม่เลื่อน
     แนวนอนก็ตาม (เพราะ .hero{overflow:hidden} ตัดไว้)
     ⇒ ย่อให้พอดีจอ ไม่ใช่ไปแก้ด่าน */
  .hs-glow i{width:min(26rem,86vw); height:min(26rem,86vw)}
  .hs-g1{top:-6rem; left:-4rem}
  .hs-g2{top:22%; right:0}
  .hs-g3{bottom:-6rem; left:10%}

  .hs-wrap{overflow:visible; padding-bottom:0}
  .hs-win{transform:none; width:100%; min-width:0; transition:none;
    box-shadow:0 18px 44px rgba(0,0,0,.5)}
  .hs-note{text-align:left; margin-top:14px}

  /* แถบหัว: เหลือชื่อ+รุ่น+ปุ่มเริ่ม · ชิปที่เหลือเป็นของประดับบนจอเล็ก */
  .hw-page,.hw-btns,.hw-bar .hw-chip:not(.go){display:none}
  .hw-bar{padding:11px 12px}
  .hw-chip.go{margin-left:auto}

  /* เมนูซ้ายเป็นของสำหรับเมาส์ — บนจอเล็กกินที่ 146px โดยกดอะไรไม่ได้ */
  .hw-rail{display:none}
  .hw-body{display:block; min-height:0}
  .hw-main{padding:11px}

  .hw-head{padding:11px 12px; margin-bottom:10px}
  .hw-big{display:none}          /* เลขซ้ำกับการ์ด "รอบทั้งหมด" ข้างล่างพอดี */

  .hw-tiles{grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px}
  .hw-rows{grid-template-columns:1fr; gap:6px; margin-bottom:10px}
  /* จอเรียงลงมา: ชื่อซ้าย สถานะขวา อ่านจบในบรรทัดเดียว */
  .hw-row{display:flex; align-items:center; gap:9px; padding:10px 11px}
  .hw-row small{font-size:10px}
  .hw-row b{margin-top:0; margin-left:auto}

  /* ⚠ ตัดแค่ "จำนวนบรรทัดที่โชว์" — ของเต็มอยู่ที่ /web/program */
  .hw-log li:nth-child(n+4){display:none}
  .hw-log ul{padding:9px 11px}
  .hs-full{display:block; text-align:center; padding:13px;
    font-size:12.5px; font-weight:600; color:var(--ember-lit);
    border-top:1px solid var(--line); text-decoration:none}
}
/* ลิงก์ "ดูเต็ม ๆ" มีไว้ให้จอเล็กเท่านั้น — จอกว้างเห็นทุกอย่างอยู่แล้ว */
.hs-full{display:none}

/* จอเล็กมาก (≤400px): บีบระยะลงอีกขั้น ไม่งั้นการ์ดชนขอบ */
@media(max-width:400px){
  .hw-tiles{gap:7px}
  .hw-tile{padding:9px 10px}
  .hw-tile b{font-size:16px}
  .hw-main{padding:9px}
  .hs-note{font-size:11px}
}

/* ══ แอนิเมชันของหน้าแรก ══
   ⛔⛤ กติกาเดิมด้านบน (ห้ามแอนิเมชันวนไม่จบ เพราะหน้าแรกเปิดค้างทั้งวัน)
      ยังอยู่ครบ — แก้ด้วยการ **หยุดเองเมื่อพ้นจอหรือสลับแท็บ** ไม่ใช่ตัดทิ้ง
      วัดจริงแล้ว: เปิดครบ 1.5% ซีพียู · แรม JS เท่ากับตอนปิดหมดเป๊ะ
   ⚠ ห้ามตั้ง opacity:0 รอสคริปต์ — สคริปต์ไม่ทำงานเมื่อไหร่ = หน้าว่างถาวร
      ⇒ ของทุกชิ้นมองเห็นอยู่ก่อน แล้ว JS ค่อยเติมคลาส .hs-anim ทีหลัง */
@keyframes hsRise{from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:none}}
@keyframes hsSlide{
  from{opacity:0; transform:translateX(46px) rotateY(-20deg) rotateX(6deg)
    rotate(-1deg) scale(.94)}
  to{opacity:1}}
@keyframes hsPop{from{opacity:0; transform:translateY(10px) scale(.9)}
  to{opacity:1; transform:none}}
@keyframes hsUp{from{opacity:0; transform:translateY(26px)}
  to{opacity:1; transform:none}}
.hs-anim .hs-r{animation:hsRise .62s cubic-bezier(.2,.7,.25,1) both}
.hs-anim .hs-r1{animation-delay:.04s} .hs-anim .hs-r2{animation-delay:.12s}
.hs-anim .hs-r3{animation-delay:.20s} .hs-anim .hs-r4{animation-delay:.28s}
/* ⚠ ต้องเป็น backwards ไม่ใช่ both — ท่าจบของ hsSlide ไม่ระบุ transform
   ⇒ เบราว์เซอร์วิ่งกลับไปหาค่าของ .hs-win เอง ซึ่งมีตัวแปรเอียงตามเมาส์อยู่
      ถ้าใช้ both ท่าสุดท้ายจะค้างทับตลอดกาล เอียงตามเมาส์จะไม่ทำงาน */
.hs-anim .hs-win{animation:hsSlide .82s cubic-bezier(.2,.7,.25,1) .10s backwards}
@keyframes hsFloat{0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}}
.hs-anim .hs-chip{animation:hsPop .5s cubic-bezier(.2,.7,.25,1) backwards,
  hsFloat 4.4s ease-in-out 1.4s infinite}
.hs-anim .hs-c1{animation-delay:.72s,1.4s}
.hs-anim .hs-c2{animation-delay:.84s,2.1s}
.hs-anim .hs-c3{animation-delay:.96s,2.8s}
.hs-anim .hs-mascot{animation:hsUp .7s cubic-bezier(.2,.7,.25,1) .62s both}

/* บรรยากาศ (วน แต่หยุดเองได้) */
@keyframes hsDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(3%,-4%,0) scale(1.06)}
  66%{transform:translate3d(-3%,3%,0) scale(.96)}}
@keyframes hsAurora{0%,100%{opacity:.88} 50%{opacity:1}}
.hs-glow i{animation:hsDrift 26s ease-in-out infinite,
  hsAurora 13s ease-in-out infinite}
.hs-g2{animation-delay:-9s,-4s} .hs-g3{animation-delay:-17s,-8s}

@keyframes hsBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.hs-mascot svg{animation:hsBob 4.6s ease-in-out infinite}
@keyframes hsBlink{0%,92%,100%{transform:scaleY(0)} 95%{transform:scaleY(1)}}
.hs-lid{animation:hsBlink 5.2s ease-in-out infinite; transform-origin:center;
  transform-box:fill-box}

/* ปุ่ม "เริ่มการทำงาน" ในหน้าต่าง — เต้นเบา ๆ ให้รู้ว่ากดได้ */
@keyframes hsGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,45,70,.42)}
  60%{box-shadow:0 0 0 7px rgba(255,45,70,0)}}
.hw-chip.go{animation:hsGlow 3.4s ease-in-out infinite}

/* ตัวเลขบนป้ายลอย — กะพริบสั้น ๆ ตอน "อัปเดต" */
@keyframes hsTick{0%,88%,100%{opacity:1} 92%{opacity:.35}}
.hs-chip b{animation:hsTick 6s ease-in-out infinite}
.hs-c2 b{animation-delay:-2s} .hs-c3 b{animation-delay:-4s}

/* วงแหวนกระเพื่อมรอบจุดสถานะ (ต้นฉบับ: pulse-ring) */
@keyframes hsRing{
  0%{box-shadow:0 0 0 0 rgba(127,224,127,.42)}
  70%,100%{box-shadow:0 0 0 10px rgba(127,224,127,0)}}
.hw-chip s{animation:hsRing 2.9s ease-out infinite}

/* แสงกวาดผ่านกระจกหน้าต่าง (ต้นฉบับ: sheen)
   0-62% ซ่อนนอกจอ ⇒ เห็นแวบเดียวทุก 8.5 วิ ไม่รบกวนสายตา */
@keyframes hsSheen{
  0%,62%{transform:translateX(-130%) skewX(-18deg)}
  86%,100%{transform:translateX(230%) skewX(-18deg)}}
.hs-win::after{content:""; position:absolute; top:0; bottom:0; left:0;
  width:34%; pointer-events:none; z-index:9; opacity:.5;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.11),transparent);
  transform:translateX(-130%) skewX(-18deg)}
.hs-anim .hs-win::after{animation:hsSheen 8.5s ease-in-out 1.6s infinite}

/* ⛔ หยุดลูปทั้งหมด — ส่วนที่ทำให้ผ่านกติกา "ห้ามวนไม่จบ"
   เปิดหน้าค้างไว้ทั้งวันก็ไม่กินซีพียู */
.hs-idle .hw-chip.go, .hs-idle .hs-chip b,
.hs-idle .hs-mascot svg, .hs-idle .hs-lid, .hs-idle .hw-chip s,
.hs-idle .hs-win::after, .hs-idle .hs-glow i, .hs-idle .hs-chip,
.hs-idle .hw-head .mark::before{animation-play-state:paused}

/* เลขไล่ขึ้น — ⚠ ต้องล็อกความกว้างตัวเลข ไม่งั้นเลขเปลี่ยน = ผังหน้าขยับทุกเฟรม */
[data-hscount],[data-hsclock],[data-hstick]{font-variant-numeric:tabular-nums}
/* บรรทัดที่เพิ่งไหลเข้ามาในบันทึกการทำงาน */
@keyframes hsFeedIn{from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:none}}
.hw-log li.fresh{animation:hsFeedIn .45s ease-out both}


/* ══════════════ แถบตัวหนังสือยักษ์วิ่ง (ยกจากเว็บต้นฉบับ) ══════════════
   ⛤ ต้นฉบับ: #kinetic1 + @keyframes marquee (46s/90s linear infinite)
      ไทยตัวใหญ่ไล่สีขาว→ส้มแดง คู่กับอังกฤษตัวเล็กโมโนสเปซ คั่นด้วย /
   ⛔ เนื้อหาต้องซ้ำสองชุดเป๊ะ ๆ เพราะคีย์เฟรมเลื่อน -50% พอดี
      ถ้าใส่ชุดเดียวจะเห็นช่องว่างวิ่งผ่านทุกครั้งที่วน
   ⚠ ตัวหนังสือกว้างกว่าจอตลอด — ต้องมี overflow:hidden ที่กล่องนอก */
.kine{position:relative; overflow:hidden; padding:34px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.28)}
.kine .track{display:flex; width:max-content; gap:34px;
  will-change:transform}
.kine .grp{display:flex; align-items:baseline; gap:14px; flex:none}
.kine .th{font-family:"Space Grotesk","Anuphan",system-ui,sans-serif;
  font-size:clamp(24px,3.4vw,42px); font-weight:700; line-height:1.45;
  letter-spacing:-.01em; white-space:nowrap;
  background:linear-gradient(180deg,#fff,var(--ember-lit));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.kine .en{font-family:"IBM Plex Mono",monospace; font-weight:600;
  font-size:clamp(11px,1.15vw,15px); letter-spacing:.26em;
  text-transform:uppercase; color:rgba(255,255,255,.3); white-space:nowrap}
.kine .sl{font-size:clamp(24px,3.4vw,42px); font-weight:700;
  color:rgba(255,45,70,.45)}
/* ขอบซ้าย-ขวาจางหายไปกับพื้น ไม่ให้ตัวหนังสือโผล่มาแบบตัดตรง ๆ */
.kine::before,.kine::after{content:""; position:absolute; top:0; bottom:0;
  width:150px; pointer-events:none; z-index:2}
.kine::before{left:0; background:linear-gradient(90deg,var(--bg),transparent)}
.kine::after{right:0; background:linear-gradient(270deg,var(--bg),transparent)}
@keyframes hsMarquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.hs-run .kine .track{animation:hsMarquee 62s linear infinite}
.hs-idle-kine .kine .track{animation-play-state:paused}

/* ตาคุกกี้มองตามเมาส์ + ทั้งตัวขยับสวนเมาส์นิดหน่อย (ยกจากต้นฉบับ)
   ⛤ ต้นฉบับ: .mascot-pupil translate(--eye-x*1.8px, --eye-y*1.4px)
      และ #mascot translate3d(--look-x, --look-y, 0) */
.hs-mascot{transform:translate3d(var(--hs-lookx,0px),var(--hs-looky,0px),0);
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.hs-pupil{transform:translate(calc(var(--hs-eyex,0) * 1.8px),
  calc(var(--hs-eyey,0) * 1.4px));
  transition:transform .3s cubic-bezier(.16,1,.3,1)}

@media(max-width:1059px){ .kine{padding:22px 0} }

/* ⚠ ระบบสั่งลดการเคลื่อนไหว — ปิดให้ทั้งหมด **เว้นแต่ผู้ใช้กดเปิดเอง**
   (?motion=on) · และ ?motion=off ต้องปิดได้แม้ระบบไม่ได้สั่ง */
.hs-off .hs-glow i,.hs-off .hs-mascot svg,.hs-off .hs-lid,
.hs-off .hw-chip.go,.hs-off .hs-chip b,.hs-off .hs-chip,
.hs-off .hw-chip s,.hs-off .hs-win::after,.hs-off .hs-win,
.hs-off .hw-head .mark::before,.hs-off .hw-log li.fresh,
.hs-off .kine .track,.hs-off .hs-pupil{
  animation:none !important; transition:none !important}
@media(prefers-reduced-motion:reduce){
  :root:not(.hs-on) .hs-glow i,:root:not(.hs-on) .hs-mascot svg,
  :root:not(.hs-on) .hs-lid,:root:not(.hs-on) .hw-chip.go,
  :root:not(.hs-on) .hs-chip b,:root:not(.hs-on) .hs-chip,
  :root:not(.hs-on) .hw-chip s,:root:not(.hs-on) .hs-win::after,
  :root:not(.hs-on) .hs-win,:root:not(.hs-on) .hw-head .mark::before,
  :root:not(.hs-on) .hw-log li.fresh,
  :root:not(.hs-on) .kine .track,:root:not(.hs-on) .hs-pupil{
    animation:none !important; transition:none !important}
}

/* ══════════════ คลังคีย์ v3 (2026-09-13 รอบ 4) ══════════════
   ⛔⛤ ที่มา: เจ้าของแจ้ง "คีย์จะล้นคลังแล้วมันเกะกะ" + หน้าเดิมเยอะเกินไป
      ของเดิม 1 ใบ = 6 ปุ่มขนาดเท่ากัน + กล่องตัวเลข 4 ช่อง ⇒ ใบที่ตายแล้ว
      กินที่เท่าใบที่ใช้อยู่เป๊ะ ๆ ทั้งที่ทำอะไรกับมันไม่ได้
   ⇒ ใบที่ใช้ได้ = การ์ดเต็ม (2 ปุ่ม + เมนู ⋯) · ใบที่ตายแล้ว = แถวบาง
      · ใบที่เอาออก = ลิ้นชักพับล่างสุด
   ⚠ คลาสทุกตัวในหมวดนี้ขึ้นต้น k- เพื่อกันชนกับผิวหน้าร้าน
     (บทเรียน .foot/.adtop/.adacts รั่วข้ามหน้า 09-11) */
.vmain{min-width:0}

/* รหัสคีย์ — ชิดขวาบนจอกว้าง แต่ขึ้นบรรทัดของตัวเองบนจอแคบ
   ⚠ ห้ามปล่อยให้ดันการ์ดกว้างเกินจอ */
.kstr{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:13.5px;
  color:var(--tx2); letter-spacing:.02em; white-space:nowrap}
.kbadge{font-size:11px; font-family:"IBM Plex Mono",monospace; padding:2px 9px;
  border-radius:999px; border:1px solid var(--line); color:var(--tx3)}
.kbadge.on{color:var(--ok); border-color:rgba(127,224,127,.3); background:rgba(127,224,127,.07)}
.kbadge.perm{color:var(--gold); border-color:rgba(255,194,77,.3); background:rgba(255,194,77,.07)}
.kbadge.wait{color:var(--warn); border-color:rgba(224,168,119,.3); background:rgba(224,168,119,.07)}

/* ⛤ บรรทัดเดียวแทนกล่องตัวเลข 4 ช่อง — อ่านรวดเดียวจบ ไม่ต้องกวาดตา */
.kfacts{display:flex; gap:8px 20px; flex-wrap:wrap; font-size:13px; color:var(--tx3);
  min-width:0; overflow-wrap:anywhere; margin-top:2px}
.kfacts b{color:var(--tx2); font-weight:500}
.kfacts .mono{font-family:"IBM Plex Mono",monospace; font-size:12px}
.kfacts .warnx{color:var(--warn)}

/* เมนู ⋯ — ของที่ใช้นาน ๆ ครั้ง ไม่ควรกินที่เท่าปุ่มที่ใช้ทุกเดือน */
.kmenuwrap{position:relative; margin-left:auto; display:inline-flex}
/* ⛔⤤ ปุ่มนี้เก็บปุ่มรองทุกตัวไว้ข้างหลัง ⇒ ถ้าจางจนดูเหมือนกล่องเปล่า
   คนจะหาไม่เจอเลยว่าย้ายเครื่อง/ดาวน์โหลด/เอาออก อยู่ตรงไหน (เจอตอนเปิดหน้าจริง) */
.btn.kdot{font-family:"IBM Plex Mono",monospace; letter-spacing:.12em;
  font-size:17px; line-height:1; padding:7px 14px; color:var(--tx2)}
.btn.kdot:hover,.btn.kdot[aria-expanded="true"]{color:var(--tx);
  border-color:var(--line-2); background:var(--glass-2)}
/* ⛔⤤ เมนูต้องเป็น fixed และถูกแขวนไว้ที่ <body> เท่านั้น
   การ์ดคีย์มี `overflow:hidden` (จำเป็น — แถบไล่สีด้านบนต้องโค้งตามมุม)
   ⇒ เมนูที่เป็นลูกของการ์ด **ถูกตัดหายเกือบหมด** เห็นแค่รายการแรก
   ⚠ z-index ต้องสูงกว่าแถบบน (80) แต่ต่ำกว่ากล่องยืนยัน (115) */
/* ⚠ ต้องเป็น width ตายตัว ไม่ใช่ min-width — ตัววางเมนูวัดความสูง
   ก่อนจะรู้ว่าจะเปิดขึ้นหรือลง ถ้าความกว้างยังไม่นิ่ง ข้อความจะตัดบรรทัดต่างกัน
   ⇒ วัดความสูงผิด ⇒ เมนูล้นขอบล่างจอบนมือถือ (เจอจริงที่ 390×844) */
.kmenu{position:fixed; z-index:100; width:236px; max-width:calc(100vw - 16px);
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-hi); padding:6px; display:flex; flex-direction:column}
.kmenu button{font:inherit; font-size:13.5px; text-align:left; cursor:pointer;
  padding:8px 11px; border:0; border-radius:8px; background:transparent; color:var(--tx2)}
.kmenu button:hover{background:var(--glass-2); color:var(--tx)}
.kmenu button:disabled{opacity:.45; cursor:default}
.kmenu button .k{float:right; font-family:"IBM Plex Mono",monospace; font-size:11px;
  color:var(--tx3)}
.kmenu .ksep{border:0; border-top:1px solid var(--line); margin:5px 2px}
.kmenu button.kdanger{color:var(--bad)}
.kmenu button.kdanger:hover{background:rgba(255,107,90,.1)}

/* ⛤ ใบที่ทำอะไรไม่ได้แล้ว = แถวบาง สูงราว 1 ใน 5 ของการ์ดเต็ม */
.kbar{display:flex; align-items:center; gap:10px; padding:9px 14px; margin-bottom:7px;
  border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.018);
  font-size:13.5px; color:var(--tx3); flex-wrap:wrap}
.kbar .ic{font-size:13px; opacity:.7}
.kbar .kstr{font-size:13px; margin-left:0}
.kbar .kwhen{font-size:12.5px}
.kbar .ksp{margin-left:auto; display:flex; gap:7px; flex-wrap:wrap}

/* หัวกลุ่มคั่นในรายการ */
.kgrp{display:flex; align-items:center; gap:10px; margin:20px 0 9px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx3)}
.kgrp .ln{flex:1; height:1px; background:var(--line)}

/* แถบเก็บกวาด — โทนส้ม เพราะเป็น "ควรรู้" ไม่ใช่ "อันตราย" */
.ksweep{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid rgba(224,168,119,.28); background:rgba(224,168,119,.05);
  border-radius:12px; padding:11px 15px; margin:14px 0 0; font-size:13.5px;
  color:var(--tx2)}
.ksweep b{color:var(--warn); font-weight:600}
.ksweep .sp{margin-left:auto}

/* ลิ้นชักใบที่เอาออกแล้ว + กลุ่มใบเก่าที่พับเอง */
.kdrawer,.kold{border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.015); overflow:hidden}
.kdrawer{margin-top:18px}
.kold{margin-top:4px}
.kdrawer>summary,.kold>summary{cursor:pointer; padding:12px 16px; font-size:13.5px;
  color:var(--tx3); list-style:none; display:flex; align-items:center; gap:9px}
.kdrawer>summary::-webkit-details-marker,
.kold>summary::-webkit-details-marker{display:none}
.kdrawer>summary::before,.kold>summary::before{content:"▸"; font-size:11px;
  transition:transform .18s var(--ease)}
.kdrawer[open]>summary::before,.kold[open]>summary::before{transform:rotate(90deg)}
.kdrawer>summary:hover,.kold>summary:hover{color:var(--tx2)}
.kdbody{padding:2px 14px 12px}
.kdbody .kbar:last-child{margin-bottom:0}

@media(max-width:560px){
  /* บนจอแคบรหัสคีย์ต้องได้บรรทัดของตัวเอง ไม่ใช่ดันการ์ดกว้างเกินจอ */
  .kstr{margin-left:0; white-space:normal; overflow-wrap:anywhere; width:100%}
  .kbar .ksp{margin-left:0; width:100%}
  .kmenuwrap{margin-left:0}
}

/* ══════════════ คลังคีย์ v4 — ปักหมุด · เตือนก่อนหมด · เส้นเวลา (รอบ 5) ══════════════ */

/* ⭐ ปักหมุด — จางไว้จนกว่าจะปัก ไม่งั้นดาวเต็มหน้าจนไม่รู้ว่าอันไหนถูกปักจริง */
.kpin{border:0; background:transparent; cursor:pointer; font-size:15px; line-height:1;
  padding:3px 5px; border-radius:6px; color:var(--tx3); opacity:.42;
  transition:all .15s var(--ease)}
.kpin:hover{opacity:.9; background:var(--glass-2)}
.kpin.on{opacity:1; color:var(--gold); filter:drop-shadow(0 0 5px rgba(255,194,77,.5))}
.kpin:disabled{cursor:default}
.keycard.pinned{background:linear-gradient(180deg,rgba(255,194,77,.06),var(--glass))}
.keycard.pinned::before{background:linear-gradient(90deg,var(--gold),var(--ember))}

/* ✏ ชื่อเล่นพิมพ์ทับได้บนการ์ดเลย — ไม่ต้องเปิดกล่อง */
.knick{font:inherit; font-weight:600; font-size:15px; color:var(--tx);
  border:0; border-bottom:1px dashed transparent; background:transparent;
  padding:2px 5px; border-radius:6px 6px 0 0; min-width:80px;
  transition:all .15s var(--ease)}
.knick:hover{border-bottom-color:var(--line)}
.knick:focus{outline:0; background:rgba(255,255,255,.06); border-bottom-color:var(--ember-lit)}
.knick::placeholder{color:var(--tx3); font-weight:400; font-style:italic}
.knick:disabled{opacity:.5}

/* ราคาบนปุ่มต่ออายุ — เห็นราคาก่อนกด */
.kpx{font-family:"IBM Plex Mono",monospace; font-size:11px; opacity:.78; margin-left:7px}
/* ปุ่มคัดลอกบอกผลกับตัวเอง */
.btn.kok{background:rgba(127,224,127,.12); border-color:rgba(127,224,127,.42);
  color:var(--ok)}

/* ══════════════ 🗝 การ์ดคีย์ v7 (2026-10-03) — แผ่นปุ่มงานหลักบนการ์ด ══════════════
   เจ้าของ: "ขอลิงก์โหลด/ย้ายเครื่องต้องกด 3 ครั้ง · อยากให้สวย ใช้ง่าย ล้ำสมัย"
   ⇒ หัวการ์ดมีไอคอนฝั่ง · อายุเป็นตัวเลขใหญ่ · งาน 4 อย่างเป็นแผ่นปุ่มกดครั้งเดียว
   ⚠ คลาสใหม่ขึ้นต้น kc- ทั้งหมด (ตรวจแล้วไม่ชนของเดิม) · สีฝั่งเดิม: คอม=ฟ้า มือถือ=ม่วง */
.kc{display:grid; gap:16px; padding:20px 20px 16px; container-type:inline-size}
/* การ์ดแคบ (เช่นเรียง 2 คอลัมน์บนจอใหญ่) — แผ่นปุ่มไอคอนบน ตัวหนังสือล่าง ชื่องานไม่โดนตัด
   ⚠ วัดจากความกว้าง "การ์ด" ไม่ใช่จอ — การ์ดเดียวกันแคบ/กว้างได้ตามคอลัมน์ */
@container (max-width:680px){
  .kc-tile{flex-direction:column; align-items:flex-start; gap:8px; padding:12px}
  .kc-tt b{white-space:normal; line-height:1.3}
}
.kc.pc{--kc-acc:var(--cyan); --kc-acc-a:rgba(95,208,232,.14); --kc-acc-b:rgba(95,208,232,.38)}
.kc.android{--kc-acc:#B08CFF; --kc-acc-a:rgba(176,140,255,.15); --kc-acc-b:rgba(176,140,255,.42)}
.kc.pc::before{background:linear-gradient(90deg,var(--cyan),#7AA8FF 60%,transparent)}
.kc.android::before{background:linear-gradient(90deg,#B08CFF,#FF7AD9 60%,transparent)}
.kc.pinned::before{background:linear-gradient(90deg,var(--gold),var(--ember))}
.kc>.hint:empty{display:none}

.kc-head{display:flex; align-items:center; gap:14px; min-width:0}
.kc-ico{flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  color:var(--kc-acc); background:radial-gradient(120% 120% at 30% 20%,var(--kc-acc-a),transparent 70%),
  rgba(255,255,255,.03); border:1px solid var(--kc-acc-b);
  box-shadow:0 10px 24px -14px var(--kc-acc), inset 0 1px 0 rgba(255,255,255,.06)}
.kc-ico svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.kc-id{flex:1 1 auto; min-width:0; display:grid; gap:3px}
.kc-row1{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.kc-row2{display:flex; align-items:center; gap:8px; min-width:0}
.kc .plat{padding:2px 8px; font-size:10.5px}
.kc .knick{font-size:15.5px; padding:1px 4px; min-width:0; max-width:100%}
.kc .kstr{margin-left:0; font-size:12.5px; color:var(--tx3); letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto}
.kc-tools{display:flex; align-items:center; gap:2px; flex:none; align-self:flex-start}
.kc .kmenuwrap{margin-left:0}

.kc-life{display:flex; align-items:center; gap:18px; padding:14px 16px; border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line); min-width:0}
.kc-days{flex:none; display:grid; min-width:84px}
.kc-days b{font-family:"IBM Plex Mono",monospace; font-size:34px; line-height:1; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--tx); letter-spacing:-.02em}
.kc-days span{font-size:11.5px; color:var(--tx3); margin-top:6px}
.kc-days .kbadge{justify-self:start; margin-top:8px; font-size:10.5px}
.kc-lbar{flex:1 1 auto; min-width:0; display:grid; gap:9px}
.kc .meter{margin:0; height:8px}
.kc .kfacts{font-size:12.5px; gap:4px 16px; margin:0}

.kc-quick{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.kc-tile{display:flex; align-items:center; gap:11px; min-width:0; min-height:60px;
  padding:11px 12px; border-radius:14px; border:1px solid var(--line); cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  color:var(--tx); font:inherit; text-align:left;
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease)}
.kc-tile:hover:not(:disabled){transform:translateY(-1px); border-color:var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025))}
.kc-tile:active:not(:disabled){transform:translateY(0)}
.kc-tile:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.kc-tile:disabled{cursor:not-allowed; opacity:.48}
.kc-ti{flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  color:var(--tx2); background:rgba(255,255,255,.06)}
.kc-ti svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.kc-tt{display:grid; gap:1px; min-width:0}
.kc-tt b{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kc-tt small{font-size:11.5px; color:var(--tx3); line-height:1.35}
.kc-tile.cp .kc-ti{color:var(--gold); background:rgba(255,194,77,.12)}
.kc-tile.dl .kc-ti{color:var(--cyan); background:rgba(95,208,232,.13)}
.kc-tile.mv .kc-ti{color:#B08CFF; background:rgba(176,140,255,.14)}
.kc-tile.help .kc-ti{color:var(--ok); background:rgba(127,224,127,.11)}
.kc-tile.kok{border-color:rgba(127,224,127,.42); background:rgba(127,224,127,.09)}
.kc-tile.kok b{color:var(--ok)}
.kc-tile.busy .kc-ti{animation:kcpulse .9s var(--ease) infinite alternate}
@keyframes kcpulse{from{opacity:1} to{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .kc-tile{transition:none} .kc-tile:hover:not(:disabled){transform:none}
  .kc-tile.busy .kc-ti{animation:none}
}

.kc-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:12px; border-top:1px dashed var(--line)}
.kc .kwarn{margin:0; padding:0; border:0; flex:1 1 220px; min-width:0}
.kc-ext{margin-left:auto}

@media(max-width:640px){
  .kc{padding:16px 14px 14px; gap:14px}
  .kc-quick{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .kc-ico{width:42px; height:42px; border-radius:12px}
  .kc-life{gap:14px; padding:12px 13px}
  .kc-days{min-width:64px}
  .kc-days b{font-size:28px}
  /* รหัสคีย์ไม่ตัดกลาง — ไม่พอบรรทัดก็ลงไปบรรทัดใหม่ใต้ป้ายฝั่ง */
  .kc-row2{flex-wrap:wrap; row-gap:4px}
  .kc .kstr{width:auto; white-space:nowrap; flex:0 1 auto; font-size:12px; letter-spacing:.02em}
  .kc-ext{width:100%; justify-content:center; margin-left:0}
  /* แผ่นปุ่มบนมือถือ: ไอคอนบน ตัวหนังสือล่าง — ชื่องานต้องอ่านครบ ไม่โดนตัด "ดา…" */
  .kc-tile{flex-direction:column; align-items:flex-start; gap:8px; padding:12px; min-height:0}
  .kc-tt b{white-space:normal; font-size:13.5px; line-height:1.3}
  .kc-tt small{white-space:normal; line-height:1.35}
}

/* ══════════════ 🗂 หน้าคลัง = คีย์ + จอเช่าล้วน (2026-10-03) ══════════════
   เจ้าของ: "คลังคีย์มีแค่คลังคีย์และจอเช่า" — ความปลอดภัยบัญชีย้ายไปหน้าโปรไฟล์
   ⇒ ไม่มีกล่องข้างขวาแล้ว: รายการคีย์ได้เต็มความกว้าง จอใหญ่เรียงการ์ด 2 คอลัมน์
   ⚠ .vgrid/.acct หน้าอื่นใช้ด้วย (checkout/order/profile) ⇒ ใช้ตัวเสริม .vone เฉพาะหน้านี้ */
.vlead{margin:6px 0 2px; font-size:13.5px; color:var(--tx3)}
.vlead a{color:var(--tx2); text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:44px} /* เป้าแตะ 44px บนมือถือ */
.vlead a:hover{color:var(--tx)}
.vgrid.vone{grid-template-columns:minmax(0,1fr)}
.vone .vmain{display:grid; gap:16px; align-content:start}
.vone .vmain>.ktl, .vone .vmain>.kuse{margin:0}
@media(min-width:1180px){
  .vone #keylist{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
  .vone #keylist>:not(.keycard){grid-column:1 / -1}
}

/* ➕ ช่องผูกคีย์ — หน้าตาเหมือน "ช่องว่างรอใส่การ์ด" (เส้นประ) ท้ายรายการ */
.kc-claim{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px;
  align-items:center; padding:18px 20px; border:1px dashed var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.kc-claim-ic{grid-row:1 / span 2; width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center; font-size:22px; line-height:1; color:var(--tx2);
  border:1px dashed var(--line-2); background:rgba(255,255,255,.03)}
.kc-claim-tx h3{font-size:15px; font-weight:600; margin:0 0 2px}
.kc-claim-tx p{margin:0; font-size:12.5px; color:var(--tx3); line-height:1.5}
.kc-claim-f{grid-column:2; display:flex; gap:10px; margin-top:8px; min-width:0}
.kc-claim-f .input{flex:1 1 auto; min-width:0; font-family:"IBM Plex Mono",monospace;
  letter-spacing:.03em}
.kc-claim-f .btn{flex:none}
.kc-claim .hint{grid-column:2; margin:0}
.kc-claim .hint:empty{display:none}
@media(max-width:640px){
  .kc-claim{grid-template-columns:minmax(0,1fr); padding:16px 14px}
  .kc-claim-ic{display:none}
  .kc-claim-f,.kc-claim .hint{grid-column:1}
  .kc-claim-f{flex-direction:column}
  .kc-claim-f .btn{width:100%; justify-content:center}
}

/* 🔔 แถวสวิตช์ "เตือนก่อนใบนี้หมด" */
.kwarn{display:flex; align-items:center; gap:11px; margin-top:12px; padding-top:11px;
  border-top:1px dashed var(--line); font-size:13px; color:var(--tx3); cursor:pointer}
.kwarn.off{opacity:.62; cursor:default}
.kwarn b{color:var(--info); font-weight:500}
/* ตัวจริงคือ checkbox — ซ่อนสายตาแต่ยังโฟกัสได้ (ห้ามใช้ display:none) */
.kswin{position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none}
.ksw{position:relative; width:38px; height:21px; flex:none; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  transition:all .18s var(--ease)}
.ksw::after{content:""; position:absolute; left:2px; top:2px; width:15px; height:15px;
  border-radius:50%; background:var(--tx3); transition:all .18s var(--ease)}
.kswin:checked + .ksw{background:rgba(95,208,232,.2); border-color:rgba(95,208,232,.5)}
.kswin:checked + .ksw::after{left:19px; background:var(--info)}
.kswin:focus-visible + .ksw{outline:2px solid var(--vio-lit); outline-offset:3px}
.kswin:disabled + .ksw{opacity:.5}

/* ══ เส้นเวลาคีย์ทั้งคลัง ══
   ⚠ overflow:hidden กันป้ายชื่อที่ปลายเส้นดันจนล้นการ์ด */
.ktl{border:1px solid var(--line); border-radius:14px; background:var(--glass);
  padding:14px 18px 11px; margin-bottom:16px; overflow:hidden}
.ktl h4{margin:0 0 12px; font-size:13px; font-weight:600; color:var(--tx2);
  display:flex; align-items:center; gap:8px}
.ktl h4 span{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tx3);
  margin-left:auto}
.ktlbar{position:relative; height:44px; margin:0 26px 6px}
.ktlaxis{position:absolute; left:0; right:0; top:26px; height:1px; background:var(--line)}
.ktltick{position:absolute; top:30px; font-family:"IBM Plex Mono",monospace;
  font-size:10px; color:var(--tx3); transform:translateX(-50%); white-space:nowrap}
.ktltick i{position:absolute; left:50%; top:-5px; width:1px; height:4px;
  background:var(--line); display:block}
.ktlpin{position:absolute; top:4px; transform:translateX(-50%)}
.ktlpin b{display:block; width:11px; height:11px; border-radius:50%; margin:0 auto;
  border:2px solid var(--bg-soft)}
.ktlpin em{position:absolute; left:50%; top:-17px; transform:translateX(-50%);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-style:normal;
  white-space:nowrap; color:var(--tx3); opacity:0;
  transition:opacity .15s var(--ease)}
.ktlpin:hover em, .ktlpin:focus-within em{opacity:1}
.ktlnow{position:absolute; left:0; top:12px; bottom:8px; width:2px;
  background:var(--ember); box-shadow:0 0 8px var(--ember)}

/* ══════════════ คลังคีย์ v5 — แถบการใช้งาน + ตัวช่วยแก้ปัญหา (รอบ 6) ══════════════ */

/* แถบ "บัญชีนี้เปิดบอทจริงกี่วัน"
   ⛔ เป็นตัวเลขของ **บัญชี** ไม่ใช่ของคีย์ใบใดใบหนึ่ง — ห้ามย้ายไปวางบนการ์ด */
.kuse{border:1px solid var(--line); border-radius:14px; background:var(--glass);
  padding:13px 18px 12px; margin-bottom:14px}
.kuse h4{margin:0 0 11px; font-size:13px; font-weight:600; color:var(--tx2);
  display:flex; align-items:center; gap:8px}
.kuse h4 span{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tx3);
  margin-left:auto}
.kuserow{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.kudots{display:flex; gap:3px; flex-wrap:wrap}
.kudots i{display:block; width:7px; height:17px; border-radius:2px;
  background:rgba(255,255,255,.08)}
.kudots i.on{background:var(--ok); opacity:.85}
.kusetx{font-size:13px; color:var(--tx3)}
.kusetx b{color:var(--ok); font-weight:600; font-size:14.5px}
.kusetx b.warnx{color:var(--warn)}

/* ปุ่ม + แผ่น "คีย์ใช้ไม่ได้?" */
.btn.khelp{border-color:rgba(95,208,232,.35); color:var(--info); background:transparent}
.btn.khelp:hover{border-color:var(--info); background:rgba(95,208,232,.08)}
.kstep{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.kstep:last-of-type{border-bottom:0}
.kstep>b{flex:none; width:25px; height:25px; border-radius:50%; font-size:12px;
  display:grid; place-items:center; background:var(--glass-2); color:var(--tx2);
  font-family:"IBM Plex Mono",monospace; font-weight:500}
.kstep .t{min-width:0; font-size:13.5px}
.kstep .t .hd{font-weight:500; color:var(--tx)}
.kstep .t em{display:block; font-style:normal; color:var(--tx3); font-size:12.5px;
  margin-top:3px; line-height:1.6}
.khelpbtn{margin-top:9px}
.khelpbtn .k{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tx3);
  margin-left:7px}
.kinfo{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line)}
.kinfo h3{margin:0 0 4px; font-size:14px; font-weight:600}
.kinfoline{display:block; font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--tx2); background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:9px; padding:9px 11px; margin:9px 0 11px; overflow-wrap:anywhere;
  user-select:all}

/* ══════════════ หลังร้านบนมือถือ — เป้าแตะ (2026-09-13 · ตรวจรอบใหญ่) ══════════════
   ⛔⛤ ตัววัดจอมือถือเดิมวัดแค่หน้าฝั่งลูกค้า **หลังร้านไม่เคยถูกวัดเลยสักครั้ง**
      ทั้งที่เจ้าของเปิดดูจากมือถือเป็นหลัก (ส่งภาพหน้าจอมือถือมาตลอด)
      ⇒ พอเพิ่ม 7 หน้าหลังร้านเข้าไปวัด เจอเป้าแตะต่ำกว่า 44px ทุกหน้า
   ⚠ ขยายเฉพาะจอที่กดด้วยนิ้ว — บนเดสก์ท็อปความหนาแน่นเดิมดีอยู่แล้ว */
@media (pointer:coarse), (max-width:900px){
  /* ⭐ ปุ่มปักหมุดบนการ์ดคีย์ — ตัวดาวเล็กแค่ 23×21
     ⚠ ขยาย "พื้นที่กด" ด้วย padding แล้วหักคืนด้วย margin ติดลบ
       ⇒ ดาวยังเล็กเท่าเดิม แต่นิ้วกดโดนแน่ (ของที่เพิ่งทำวันนี้ ตรวจรอบสามเจอ) */
  .kpin{min-width:44px; min-height:44px; display:inline-grid; place-items:center;
    padding:0; margin:-11px -10px}
  /* ลิงก์ "ย้อนกลับ" สูงแค่ 21px */
  .adback{min-height:44px; display:inline-flex; align-items:center}
  /* ปุ่มเปิดรางเมนู กว้างหดตามจอจนเหลือ 33px */
  .adrailbtn{min-width:44px; flex:none}
  /* ชิปกรองสูง 33px ทุกหน้า — เป็นของที่กดบ่อยที่สุดในหลังร้าน */
  .adchip{min-height:44px}
  /* ช่องค้นหาสูง 26px · เมนูเลือกสูง 36px
     ⚠ ช่องค้นของหลังร้าน **ไม่มีคลาส** (ใช้ id อย่างเดียว) ⇒ ต้องจับด้วยชนิด
       ไม่ใช่ชื่อคลาส — จับด้วยคลาสแล้วไม่โดนเลย (เจอตอนตรวจรอบสอง) */
  select.adsel{min-height:44px}
  input[type=search], input[type=text], input[type=number],
  input[type=date], input[type=email]{min-height:44px}
}
/* ⚠ ชิปบัญชีบังคับกว้าง 44px **เฉพาะจอที่แคบจนเหลือแต่รูป** (ต่ำกว่า 480px)
   ถ้าบังคับที่จอกว้างกว่านั้นด้วย ชื่อผู้ใช้ยาว ๆ จะถูกบีบจนโดนตัดปลาย
   (เจอตอนตรวจรอบสอง: จอ 540px ชื่อ "demoadmin" โดนตัด 3px) */
@media (max-width:479px){
  .chipacct{min-width:44px; justify-content:center}
}
/* ⛔⛤ ช่วง 480-659px: แถบบนหลังร้านแน่นจนชิปบัญชีถูกบีบ แล้วชื่อผู้ใช้
   โดนตัดปลายแค่ 2-3px ("demoadmin" → "demoadmi…") ซึ่งดูเหมือนหน้าพัง
   มากกว่าดูเหมือนตั้งใจย่อ ⇒ ซ่อนชื่อไปเลยเหลือแต่รูป เหมือนที่จอแคบกว่านี้ทำ
   ⚠ ชื่อยังอยู่ในโค้ด โปรแกรมอ่านหน้าจอยังอ่านได้ (เจอตอนตรวจรอบสอง) */
@media (max-width:659px){
  .adtopbar .chipacct{min-width:44px; justify-content:center}
  .adtopbar .chipacct > :not(.av){display:none}
}


/* ══════════════════════════════════════════════════════════════════════
   💬 แชทลูกค้า ↔ แอดมิน (2026-09-15)
   ⛔⛤ ทุกคลาสฝั่งหน้าร้านขึ้นต้น .hchat- / .hmsg / .hcard · หลังร้านขึ้นต้น .cht
      และไอดีในหน้าหลังร้านขึ้นต้น #ct- (⛔ #ac- เป็นของหน้า "ลูกค้า" ไปแล้ว
      — มีเทสกันไว้ที่ test_admin_ux2_2026_09_13.py หัวข้อ [G])
      ของชุดนี้อยู่ "ทุกหน้า" จึงเป็นจุดที่คลาสชื่อสั้นรั่วแล้วเสียหายกว้างที่สุด
      (เคยเกิดมาแล้ว 2026-09-11 — คลาสหลังร้านทับผิวหน้าร้าน)
   ⛔ ห้ามมีสีดิบในบล็อกนี้นอกจากที่จำเป็นกับเงา — ใช้โทเคนจาก :root
   ══════════════════════════════════════════════════════════════════════ */

/* ── ปุ่มลอย ──────────────────────────────────────────────────
   ⛔⛤ บนมือถือต้องยกขึ้นให้พ้นเมนูล่าง 5 ปุ่ม ไม่งั้นทับปุ่ม "บัญชี" พอดี
      (.bottomnav โผล่ตั้งแต่จอแคบกว่า 900px สูงราว 58px + safe-area) */
.hchat{position:fixed; right:16px; z-index:98;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:flex-end; gap:10px}
/* ⛔⛤ แผงต้องกางขึ้น "เหนือ" ปุ่ม ไม่ใช่ใต้ปุ่ม
   ลำดับใน HTML คือ ป้ายชวนคุย → ปุ่ม → แผง (ปุ่มต้องมาก่อนแผงเพื่อลำดับ Tab
   และ aria-controls) แต่ภาพต้องกลับกัน ⇒ สั่งด้วย order ไม่ใช่สลับ HTML
   ⚠ ไม่ทำ = กล่องยึดขอบล่าง แผงจึงดันปุ่มลอยขึ้นไปกลางจอ (เจอตอนตรวจจอจริง) */
.hchat-panel{order:-2}
.hchat-tease{order:-1}
@media(max-width:899px){
  .hchat{right:12px; bottom:calc(70px + env(safe-area-inset-bottom))}
}
.hchat-btn{position:relative; display:inline-flex; align-items:center; gap:9px;
  min-height:52px; padding:0 20px 0 17px; border-radius:999px;
  background:var(--ember-btn); color:#fff; font-weight:600; font-size:14.5px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 26px rgba(196,21,43,.42), var(--shadow);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.hchat-btn:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(196,21,43,.52)}
.hchat-btn:active{transform:translateY(0)}
.hchat-btn svg{flex:0 0 auto}
/* จอแคบ = เหลือแต่ไอคอน (วงกลม) — ป้ายกินที่จนทับเนื้อหาจริง */
@media(max-width:639px){
  .hchat-btn{min-height:50px; width:50px; padding:0; justify-content:center}
  .hchat-lb{display:none}
}
.hchat-num{position:absolute; top:-5px; right:-4px; min-width:21px; height:21px;
  padding:0 5px; border-radius:999px; background:var(--gold); color:var(--on-gold);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  font-weight:600; display:grid; place-items:center; border:2px solid var(--bg-soft);
  font-variant-numeric:tabular-nums}
.hchat-ring{position:absolute; inset:-4px; border-radius:999px;
  border:2px solid var(--ember); opacity:0; pointer-events:none}
.hchat.has-new .hchat-ring{animation:hchatring 2.6s var(--ease) infinite}
@keyframes hchatring{
  0%{opacity:.5; transform:scale(1)} 70%{opacity:0; transform:scale(1.2)}
  100%{opacity:0; transform:scale(1.2)}
}
@media (prefers-reduced-motion: reduce){
  .hchat.has-new .hchat-ring{animation:none; opacity:.35}
  .hchat-btn{transition:none}
}

/* ป้ายชวนคุย — เด้งครั้งเดียว ปิดแล้วเงียบ 7 วัน */
.hchat-tease{position:relative; max-width:260px; padding:11px 30px 11px 13px;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); border-bottom-right-radius:6px; box-shadow:var(--shadow);
  font-size:13px; color:var(--tx2); line-height:1.55}
.hchat-tease b{display:block; color:var(--tx); font-size:13.5px}
.hchat-teasex{position:absolute; top:5px; right:5px; width:24px; height:24px;
  display:grid; place-items:center; border-radius:8px; color:var(--tx3)}
.hchat-teasex:hover{background:var(--glass-2); color:var(--tx)}
@media(max-width:639px){ .hchat-tease{display:none} }

/* ── แผงแชท ──────────────────────────────────────────────── */
.hchat-panel{display:flex; flex-direction:column; overflow:hidden;
  width:min(384px, calc(100vw - 32px));
  height:min(560px, calc(100vh - 140px));
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-hi)}
/* ⛔⛤ มือถือ = แผ่นเต็มจอ ไม่ใช่กล่องลอย · กล่องลอย 384px บนจอ 360px
   ทำให้ช่องพิมพ์โดนคีย์บอร์ดดันจนมองไม่เห็นสิ่งที่พิมพ์ */
@media(max-width:639px){
  .hchat.open{position:fixed; inset:0; right:0; bottom:0; z-index:130;
    display:block}
  .hchat.open .hchat-btn, .hchat.open .hchat-tease{display:none}
  .hchat.open .hchat-panel{width:100%; height:100%; max-height:none;
    border:0; border-radius:0; padding-bottom:env(safe-area-inset-bottom)}
}
.hchat-head{display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-bottom:1px solid var(--line); flex:0 0 auto;
  background:linear-gradient(180deg,
    color-mix(in oklch, var(--ember) 13%, var(--surface)), var(--surface))}
.hchat-av{position:relative; width:38px; height:38px; flex:0 0 auto;
  border-radius:12px; display:grid; place-items:center; color:#fff;
  font-weight:700; font-size:15px;
  background:linear-gradient(145deg, var(--ember-btn), var(--ember-deep))}
.hchat-dot{position:absolute; right:-2px; bottom:-2px; width:11px; height:11px;
  border-radius:50%; background:var(--tx3); border:2px solid var(--surface)}
.hchat-dot.on{background:var(--ok)}
.hchat-ttl{min-width:0; flex:1}
/* ⚠ ชื่อเรื่องยาว (เลขเรื่อง + หัวข้อ) ต้องไม่ตกบรรทัดสอง — หัวแผงจะสูงขึ้น
   แล้วเบียดพื้นที่อ่านข้อความบนจอ 360px (เจอตอนตรวจจอจริง 2026-09-15) */
.hchat-ttl b{display:block; font-size:14.5px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hchat-ttl span{display:block; font-size:11.5px; color:var(--tx3); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hchat-x{width:32px; height:32px; flex:0 0 auto; border-radius:9px;
  display:grid; place-items:center; color:var(--tx2)}
.hchat-x:hover{background:var(--glass-2); color:var(--tx)}
.hchat-body{flex:1; min-height:0; overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;
  overscroll-behavior:contain}
.hchat-foot{flex:0 0 auto; border-top:1px solid var(--line);
  padding:9px 11px; background:var(--bg-soft)}

/* ── ฟองข้อความ (ใช้ร่วมหน้าร้าน/หลังร้าน) ── */
.hmsg{max-width:84%; display:flex; flex-direction:column; gap:3px}
.hmsg .hbub{padding:9px 13px; border-radius:15px; font-size:14px; line-height:1.62;
  white-space:pre-wrap; overflow-wrap:anywhere}
/* ลิงก์ในฟองบอท/แอดมิน (chatLinkText) — สีตามฟอง ขีดเส้นใต้ให้รู้ว่ากดได้ */
.hmsg .hbub .hlink{color:inherit; text-decoration:underline; text-underline-offset:2px;
  font-weight:600}
.hmsg .hmt{font-size:10.5px; color:var(--tx3); padding:0 4px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  display:flex; align-items:center; gap:5px}
.hmsg.cust{align-self:flex-end; align-items:flex-end}
.hmsg.cust .hbub{background:var(--ember-btn); color:#fff; border-bottom-right-radius:5px}
.hmsg.admin{align-self:flex-start}
.hmsg.admin .hbub{background:var(--glass-2); border:1px solid var(--line);
  border-bottom-left-radius:5px}
.hmsg .hwho{font-size:11.5px; color:var(--ember-lit); font-weight:600; padding-left:4px}
.hmsg.system{align-self:center; max-width:100%}
.hmsg.system .hbub{background:transparent; border:1px dashed var(--line);
  color:var(--tx3); font-size:12px; text-align:center; border-radius:999px;
  padding:4px 14px}
/* ⛔⛤ โน้ตภายในต้องดูออกตั้งแต่ชายตา ไม่ใช่ต้องอ่านป้าย — สีทองไม่ซ้ำกับอะไรเลย */
.hmsg.note{align-self:stretch; max-width:100%}
.hmsg.note .hbub{background:color-mix(in oklch, var(--gold) 9%, transparent);
  border:1px dashed color-mix(in oklch, var(--gold) 38%, transparent);
  color:var(--gold); font-size:13px; border-radius:var(--r-sm)}
.hmsg .htick{color:var(--info)}
.hmsg img.hshot{border-radius:var(--r-sm); border:1px solid var(--line);
  max-width:190px; max-height:220px; object-fit:cover; cursor:zoom-in}

/* กำลังพิมพ์ */
.htyping{display:inline-flex; gap:4px; align-items:center; padding:11px 15px}
.htyping i{width:6px; height:6px; border-radius:50%; background:var(--tx3);
  animation:hbnc 1.3s infinite}
.htyping i:nth-child(2){animation-delay:.16s}
.htyping i:nth-child(3){animation-delay:.32s}
@keyframes hbnc{0%,60%,100%{transform:translateY(0); opacity:.45}
  30%{transform:translateY(-4px); opacity:1}}
@media (prefers-reduced-motion: reduce){ .htyping i{animation:none} }

/* ── การ์ดพิเศษในแชท ── */
.hcard{border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg-soft); padding:12px; display:flex; flex-direction:column;
  gap:9px; max-width:100%}
.hcard .hch{display:flex; align-items:center; gap:8px; font-size:11px;
  color:var(--ember-lit); letter-spacing:.06em; text-transform:uppercase;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.hcard .hcbig{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.hcard .hcbig b{font-size:16px}
.hcard .hcpr{margin-left:auto; font-size:16px; color:var(--gold);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.hcard .hcnote{font-size:11.5px; color:var(--tx3); line-height:1.5}
.hcard .btn{width:100%}
.hdrop{border:1px dashed var(--line-2); border-radius:var(--r-sm); padding:15px;
  text-align:center; font-size:12.5px; color:var(--tx3); width:100%;
  background:color-mix(in oklch, var(--ember) 4%, transparent)}
.hdrop:hover{border-color:var(--ember); color:var(--tx2)}

/* ── เลือกหัวข้อ / แนบบริบท ── */
.htopics{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media(max-width:379px){ .htopics{grid-template-columns:1fr} }
.htopic{display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  text-align:left; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 11px; background:var(--glass); min-height:56px;
  transition:border-color .15s var(--ease), background .15s var(--ease),
    transform .15s var(--ease)}
.htopic:hover{border-color:var(--line-2); background:var(--glass-2);
  transform:translateY(-1px)}
.htopic b{font-size:13.5px}
.htopic span{font-size:11.5px; color:var(--tx3); line-height:1.4}
.hchips{display:flex; flex-wrap:wrap; gap:6px}
.hchip{display:inline-flex; align-items:center; gap:6px; min-height:32px;
  border:1px solid var(--line); border-radius:999px; padding:4px 11px;
  font-size:12px; color:var(--tx2); background:var(--glass)}
.hchip .mono{font-size:11px; color:var(--tx3)}
.hchip[aria-pressed="true"]{border-color:var(--ember); color:var(--tx);
  background:color-mix(in oklch, var(--ember) 14%, transparent)}
.hdeflect{border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--glass); padding:11px 12px; font-size:12.5px; color:var(--tx2);
  line-height:1.6}
.hdeflect b{display:block; color:var(--tx); font-size:13px; margin-bottom:4px}
.hdeflect a{color:var(--ember-lit); border-bottom:1px solid var(--line-2)}

/* ── กล่องพิมพ์ ── */
.hcomp{display:flex; align-items:flex-end; gap:8px}
.hta{flex:1; min-width:0; background:var(--bg); border:1px solid var(--line);
  border-radius:14px; padding:9px 12px; font-size:14px; line-height:1.55;
  resize:none; min-height:40px; max-height:104px; color:var(--tx);
  font-family:inherit}
.hta:focus{border-color:var(--line-2); outline:none}
.hib{width:38px; height:38px; flex:0 0 auto; border-radius:12px; display:grid;
  place-items:center; color:var(--tx2); border:1px solid var(--line);
  background:var(--glass)}
.hib:hover{background:var(--glass-2); color:var(--tx)}
.hib.send{background:var(--ember-btn); border-color:var(--ember-btn); color:#fff}
.hib[disabled]{opacity:.42; pointer-events:none}
.hcmeta{display:flex; align-items:center; gap:8px; padding:6px 2px 0;
  font-size:11px; color:var(--tx3)}
.hcmeta .sp{flex:1}
.hrate{display:flex; gap:8px}
.hrate button{flex:1; min-height:38px; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:13px; background:var(--glass); color:var(--tx2)}
.hrate button:hover{border-color:var(--line-2); color:var(--tx)}
.hrate button[aria-pressed="true"]{border-color:var(--ok); color:var(--tx);
  background:color-mix(in oklch, var(--ok) 13%, transparent)}
.hrate button.down[aria-pressed="true"]{border-color:var(--bad);
  background:color-mix(in oklch, var(--bad) 13%, transparent)}
.hmid{margin:auto; text-align:center; padding:12px; display:flex;
  flex-direction:column; gap:7px; align-items:center}
.hmid .hemoji{font-size:30px; line-height:1}
.hmid b{font-size:15px}
.hmid p{margin:0; font-size:13px; color:var(--tx2); line-height:1.6; max-width:32ch}
.hmid .hrow{display:flex; gap:7px; justify-content:center; flex-wrap:wrap}

/* ══════════════════ หน้า /web/support ══════════════════ */
.sptrans{padding:0; overflow:hidden; margin-bottom:24px}
.sphead{display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--line)}
.sphead b{font-size:15px}
.sptbody{max-height:440px; overflow-y:auto; padding:16px; display:flex;
  flex-direction:column; gap:10px; scrollbar-width:thin}
.spfoot{border-top:1px solid var(--line); padding:11px 16px; background:var(--bg-soft)}
.sprow{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px;
  align-items:center; border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; background:var(--glass)}
.sprow.live{border-color:var(--line-2);
  background:color-mix(in oklch, var(--ember) 6%, transparent)}
.sprow .spno{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px;
  color:var(--tx3); font-variant-numeric:tabular-nums}
.sprow.live .spno{color:var(--ember-lit)}
.sprow .spmid{min-width:0}
.sprow .spr1{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sprow .spr1 b{font-size:14.5px}
.sprow .spr2{font-size:12.5px; color:var(--tx3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.sprow .spend{text-align:right; display:flex; flex-direction:column; gap:5px;
  align-items:flex-end}
.sprow .spago{font-size:11.5px; color:var(--tx3);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
/* จอแคบ: เลขเรื่องขึ้นบรรทัดบน ปุ่มลงล่างเต็มความกว้าง */
@media(max-width:560px){
  .sprow{grid-template-columns:1fr; gap:8px}
  .sprow .spend{flex-direction:row; align-items:center; width:100%}
  .sprow .spend .btn{flex:1}
}
.spwhere h2{font-size:17px; margin:0 0 6px}
.spwhere p{margin:0 0 12px; color:var(--tx2); font-size:13.5px}

/* ══════════════════════════════════════════════════════════════════════
   💬 แชท — ฟองข้อความฝั่งลูกค้า/หลังร้าน + หน้าแชทหลังร้าน (รื้อรอบ 3 · 2026-09-22)
   ⛔ คลาสขึ้นต้น .cht ทั้งหมด (#ac- เป็นของหน้าลูกค้าในหลังร้าน)
   ══════════════════════════════════════════════════════════════════════ */

/* ── เสียงที่สาม: ผู้ช่วยอัตโนมัติ ──
   ⛔⛤ ต้องแยกออกจากแอดมิน (แดง) และโน้ตภายใน (ทอง) ตั้งแต่ชายตา
      ลูกค้าต้องรู้ทันทีว่ากำลังอ่านคำตอบของเครื่อง ไม่ใช่ของคน */
.hmsg.bot{align-self:flex-start}
.hmsg.bot .hbub{background:color-mix(in oklch, var(--info) 11%, var(--surface));
  border:1px solid color-mix(in oklch, var(--info) 32%, transparent);
  border-bottom-left-radius:5px}
.hmsg.bot .hwho{color:var(--info)}
/* ⛔⛤ ในหลังร้าน "ฝั่ง" ของฟองต้องกลับด้าน — แอดมินคือคนพูดฝั่งขวา
   ที่หน้าลูกค้า ฟองแดงฝั่งขวา = "ของฉัน" ⇒ ถ้าไม่กลับด้าน แอดมินจะเห็น
   ข้อความลูกค้าเป็นฟองแดงฝั่งขวาเหมือนเป็นของตัวเอง อ่านผิดทันที
   (บักจริงจากการตรวจจอจริง 2026-09-15 · หลุดอีกครั้งตอนรื้อ 2026-09-22) */
.chtbody .hmsg.cust{align-self:flex-start; align-items:flex-start}
.chtbody .hmsg.cust .hbub{background:var(--glass-2); color:var(--tx);
  border:1px solid var(--line); border-bottom-left-radius:5px;
  border-bottom-right-radius:15px}
.chtbody .hmsg.admin{align-self:flex-end; align-items:flex-end}
.chtbody .hmsg.admin .hbub{background:var(--ember-btn); color:#fff; border:0;
  border-bottom-right-radius:5px; border-bottom-left-radius:15px}
/* ป้าย "แอดมิน" ไม่ต้องมีในมุมมองแอดมิน — ฝั่งขวาคือตัวเองอยู่แล้ว */
.chtbody .hmsg.admin .hwho{display:none}
.chtbody .hmsg.note{align-self:stretch}
/* ในหลังร้านฝั่งขวาคือ "ฝั่งเรา" — บอทก็อยู่ฝั่งเดียวกับแอดมิน แต่คนละสี */
.chtbody .hmsg.bot{align-self:flex-end; align-items:flex-end}
.chtbody .hmsg.bot .hbub{border-bottom-left-radius:15px; border-bottom-right-radius:5px}

/* ลิงก์ในคำตอบสำเร็จรูปต้องขึ้นบรรทัดของตัวเอง — ต่อท้ายย่อหน้าแล้วอ่านเป็นข้อความธรรมดา */
.hdeflect a{display:inline-block; margin-top:6px}
/* คำใบ้ปุ่ม Enter ไม่มีความหมายบนมือถือ (Enter = ขึ้นบรรทัดใหม่) */
@media(max-width:639px){ .hcmeta .hkeyhint{display:none} }

/* ⛔⛤ ปุ่ม "ขึ้นบนสุด" กับปุ่มแชทอยู่มุมเดียวกัน — เดิมทับกันจนกดผิดอัน
   (เจอตอนตรวจจอจริง 2026-09-15) · ยกปุ่มขึ้นบนไปให้พ้นความสูงปุ่มแชท
   ⚠ ต้องขยับเฉพาะหน้าที่ "มีปุ่มแชทจริง" — หน้าเข้าสู่ระบบ/สมัคร/หลังร้านไม่มี */
body:has(.hchat:not([hidden])) .totop{bottom:calc(84px + env(safe-area-inset-bottom))}
@media(max-width:900px){
  body:has(.hchat:not([hidden])) .totop{bottom:calc(138px + env(safe-area-inset-bottom))}
}

/* ══════════════════ หลังร้าน · /web/admin/chat ══════════════════
   ⛤ รื้อรอบ 3: จากสามช่อง + สถิติสองที่ + ตัวกรองสี่ชั้น
      เหลือ "สองช่อง + แถบเดียว" · ของที่ใช้วันละครั้งย้ายเข้าลิ้นชัก */

/* ── แถบเดียวบนสุด ── */
.chtbar{display:flex; align-items:center; gap:10px; margin:0 0 12px;
  position:relative; flex-wrap:wrap}
.chtbar h1{font-size:19px; margin:0; letter-spacing:-.2px}
.chtbar .sp{flex:1}
.chtpulse{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  color:var(--tx2); padding:4px 11px; border-radius:999px;
  border:1px solid var(--line-2);
  background:color-mix(in oklch, var(--ember) 9%, transparent)}
.chtpulse b{font-family:"IBM Plex Mono",ui-monospace,monospace;
  color:var(--ember-lit); font-size:13px; font-variant-numeric:tabular-nums}
.chtpulse.calm{border-color:var(--adline); background:var(--glass)}
.chtpulse.calm b{color:var(--ok)}
.chtwait{font-size:12px; color:var(--tx3);
  font-variant-numeric:tabular-nums}
.chtwait.late{color:var(--warn)}

/* ── สวิตช์บอท ── */
.chtbot{display:inline-flex; align-items:center; gap:9px; text-align:left;
  border:1px solid var(--adline); border-radius:999px; padding:5px 13px 5px 11px;
  background:var(--glass); min-height:36px}
.chtbot:hover{border-color:var(--line-2)}
.chtbotdot{width:9px; height:9px; border-radius:50%; background:var(--tx3);
  flex:0 0 auto}
.chtbot b{display:block; font-size:13px; line-height:1.25; font-weight:600}
.chtbot small{display:block; font-size:11px; color:var(--tx3); line-height:1.3}
.chtbot[aria-pressed="true"]{border-color:color-mix(in oklch, var(--ok) 34%, transparent);
  background:color-mix(in oklch, var(--ok) 8%, transparent)}
.chtbot[aria-pressed="true"] .chtbotdot{background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--ok) 22%, transparent)}
@media(max-width:560px){
  .chtbot small{display:none}
  /* ⛤ จอแคบ: ชื่อหน้าขึ้นบรรทัดของตัวเอง ที่เหลือจะได้อยู่แถวเดียวกันหมด
     (ไม่งั้นปุ่ม ⋯ ตกไปอยู่บรรทัดที่สามลอย ๆ) */
  .chtbar h1{flex:1 1 100%}
  .chtbar{gap:8px}
}

/* ── เมนู ⋯ (ของที่ใช้นาน ๆ ครั้ง) ── */
.chtmorebtn{font-size:18px; line-height:1}
.chtmenu{position:absolute; top:44px; right:0; z-index:30; min-width:200px;
  padding:6px; border-radius:12px; border:1px solid var(--adline);
  background:var(--adsurf); box-shadow:var(--shadow-hi);
  display:flex; flex-direction:column}
.chtmenu button, .chtmenu a{text-align:left; font-size:13px; color:var(--tx2);
  padding:8px 10px; border-radius:8px; text-decoration:none; display:block}
.chtmenu button:hover, .chtmenu a:hover{background:var(--glass-2); color:var(--tx)}
.chtthead .chtmenu{top:46px; right:8px}

/* ── โครงสองช่อง ── */
.chtwrap{position:relative; display:grid;
  grid-template-columns:302px minmax(0,1fr);
  border:1px solid var(--adline); border-radius:var(--r);
  background:var(--adsurf); overflow:hidden; height:min(78vh, 760px);
  min-height:460px}
@media(max-width:1100px){ .chtwrap{grid-template-columns:264px minmax(0,1fr)} }

/* ── ช่อง 1 · รายการเรื่อง ── */
.chtbox{display:flex; flex-direction:column; min-width:0; min-height:0;
  border-right:1px solid var(--adline)}

/* ⛔⛤ แถบแท็บต้องไม่มีวันล้นกรอบ: คอลัมน์ซ้ายแคบ 264px และเลขในป้ายโตได้ 3 หลัก
   ⇒ ปุ่มแบ่งความกว้างเท่ากัน (flex:1 1 0) + ตัวหนังสือย่อด้วย ellipsis
   เดิมเรียงต่อกันตามความยาวคำ พอมีปุ่ม "กรอง" ต่อท้ายเลยดันจนหลุดขอบ */
.chttabs{display:flex; align-items:stretch; gap:3px; padding:9px 10px 0;
  min-width:0}
.chttabs button{flex:1 1 0; min-width:0; display:flex; align-items:center;
  justify-content:center; gap:5px; border:1px solid transparent;
  border-radius:10px; padding:7px 6px; font-size:12.5px; color:var(--tx3);
  min-height:34px; transition:background .14s, color .14s, border-color .14s}
.chttabs button .lb{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chttabs button:hover{color:var(--tx); background:var(--glass)}
.chttabs button.on{background:color-mix(in oklch, var(--ember) 13%, transparent);
  border-color:var(--line-2); color:var(--tx); font-weight:600}
.chttabs .n{flex:0 0 auto; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--glass-2); color:var(--tx3);
  font-size:10.5px; display:grid; place-items:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.chttabs button.on .n{background:var(--ember-btn); color:#fff}

.chtsearch{position:relative; display:flex; align-items:center; gap:6px;
  padding:9px 10px; border-bottom:1px solid var(--adline)}
.chtsearch > svg{position:absolute; left:21px; top:50%; transform:translateY(-50%);
  color:var(--tx3); pointer-events:none}
.chtsearch .input{flex:1; min-width:0; border-radius:999px;
  padding:7px 28px 7px 32px; font-size:12.5px}
.chtqx{position:absolute; right:52px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; color:var(--tx3); font-size:11px}
.chtqx:hover{background:var(--glass-2); color:var(--tx)}
.chtfil{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid;
  place-items:center; border:1px solid var(--adline); color:var(--tx3);
  background:var(--glass)}
.chtfil:hover{color:var(--tx); border-color:var(--line-2)}
.chtfil.on{border-color:var(--ember); color:var(--ember-lit);
  background:color-mix(in oklch, var(--ember) 14%, transparent)}

.chtfilbox{border-bottom:1px solid var(--adline); padding:4px 10px 11px;
  background:rgba(0,0,0,.16)}
.chtlbl{display:block; font-size:10.5px; color:var(--tx3); letter-spacing:.4px;
  margin:9px 0 5px}
.chtstate{display:flex; gap:5px}
.chtstate button{border:1px solid var(--adline); border-radius:999px;
  padding:4px 11px; font-size:12px; color:var(--tx3)}
.chtstate button:hover{color:var(--tx)}
.chtstate button.on{border-color:var(--ember); color:var(--tx);
  background:color-mix(in oklch, var(--ember) 12%, transparent)}
.chtfilter{display:flex; gap:5px; flex-wrap:wrap}
.chtfilter button{border:1px solid var(--adline); border-radius:999px;
  padding:4px 10px; font-size:12px; color:var(--tx3)}
.chtfilter button:hover{color:var(--tx)}
.chtfilter button.on{border-color:var(--ember); color:var(--tx);
  background:color-mix(in oklch, var(--ember) 12%, transparent)}

.chtlist{flex:1; min-height:0; overflow-y:auto; padding:6px; scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent}
.chtrow{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px;
  width:100%; text-align:left; padding:10px; margin-bottom:4px; cursor:pointer;
  border:1px solid transparent; border-radius:12px;
  transition:background .14s, border-color .14s}
.chtrow:hover{background:var(--glass); border-color:var(--adline)}
.chtrow.on{background:color-mix(in oklch, var(--ember) 11%, transparent);
  border-color:var(--line-2)}
/* ⛤ สีหัวลูกค้าสุ่มจากชื่อ — ไล่รายการยาว ๆ แล้วตาจับ "คนเดิม" ได้เร็วกว่าอ่านชื่อ */
.chtav{width:36px; height:36px; flex:0 0 auto; border-radius:11px; display:grid;
  place-items:center; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(145deg, var(--ember-btn), var(--ember-deep));
  letter-spacing:.2px}
.chtav.h1{background:linear-gradient(145deg,#8a5a1e,#3a2408)}
.chtav.h2{background:linear-gradient(145deg,#1e6a8a,#082a3a)}
.chtav.h3{background:linear-gradient(145deg,#2f7a45,#0b2e18)}
.chtav.h4{background:linear-gradient(145deg,#6a3a8a,#250f3a)}
.chtav.h5{background:linear-gradient(145deg,#8a2e55,#3a0c20)}
.chtrow .chtmid{min-width:0}
.chtrow .chtr1{display:flex; align-items:center; gap:6px}
.chtrow .chtr1 b{font-size:13.5px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.chtrow .chtno{font-size:10.5px; color:var(--tx3);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.chtrow .chtr2{font-size:12.5px; color:var(--tx3); line-height:1.5; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chtrow .chtr2.unread{color:var(--tx2); font-weight:500}
.chtrow .chttags{display:flex; gap:4px; margin-top:5px; flex-wrap:wrap}
.chttag{font-size:10px; padding:1px 7px; border-radius:999px;
  border:1px solid var(--adline); color:var(--tx3); background:var(--glass)}
.chttag.bot{color:var(--info); border-color:color-mix(in oklch, var(--info) 30%, transparent)}
.chttag.img{color:var(--gold); border-color:color-mix(in oklch, var(--gold) 30%, transparent)}
.chttag.me{color:var(--ember-lit); border-color:var(--line-2)}
.chtrow .chtend{display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.chtage{font-size:11px; color:var(--tx3);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.chtage.late{color:var(--warn)}
.chtdot{min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--ember-btn); color:#fff; font-size:10px; display:grid;
  place-items:center; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-style:normal; font-weight:600}
.chtsep{font-size:10.5px; color:var(--tx3); padding:10px 6px 5px;
  letter-spacing:.4px}

/* ── ช่อง 2 · บทสนทนา ── */
.chtthread{display:flex; flex-direction:column; min-width:0; min-height:0}
.chtthead{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--adline);
  background:rgba(0,0,0,.14); position:relative}
.chtthead .sp{flex:1}
.chtthead .chttt{min-width:0; flex:1 1 140px}
.chtthead .chttt b{display:block; font-size:14px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.chtthead .chttt span{display:block; font-size:11.5px; color:var(--tx3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chtback{display:none}
/* ⛤ จอกลาง (แล็ปท็อป 13-14") ปุ่มหัวเรื่องตกบรรทัดสอง แล้วบทสนทนาโดนเบียด
   ⇒ ซ่อนป้ายสถานะ (ซ้ำกับป้ายในรายการอยู่แล้ว) แล้วบีบปุ่มให้อยู่แถวเดียว */
@media(max-width:1200px){
  .chtthead{flex-wrap:nowrap}
  .chtthead .pill{display:none}
  .chtthead .btn{padding:5px 9px; font-size:11.5px}
}

.chtbrief{margin:0; padding:7px 13px; font-size:12.5px; line-height:1.5;
  color:var(--tx2); border-bottom:1px solid var(--adline);
  background:color-mix(in oklch, var(--info) 7%, transparent);
  display:flex; align-items:flex-start; gap:7px}
.chtbrief::before{content:"🤖"; font-size:13px; line-height:1.3}

.chtbody{flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex;
  flex-direction:column; gap:12px; scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent}

/* ── หน้าจอตอนยังไม่ได้เลือกเรื่อง — ว่างต้องแปลว่า "ว่าง" ไม่ใช่ "พัง" ── */
.chtidle{margin:auto; width:min(520px,100%); display:flex; flex-direction:column;
  align-items:center; gap:14px; text-align:center}
.chtidle b{display:block; font-size:15px}
.chtidle span{display:block; font-size:12.5px; color:var(--tx3); margin-top:5px}
.chtempty{margin:auto; padding:26px 18px; text-align:center; color:var(--tx3);
  display:flex; flex-direction:column; align-items:center; gap:8px}
.chtempty b{font-size:14px; color:var(--tx2)}
.chtempty span{font-size:12.5px; line-height:1.6}
.chtempty.small{padding:14px 10px; font-size:12px}
.chtemoji{font-size:22px; opacity:.8}

/* ── กล่องพิมพ์ ── */
.chtfoot{flex:0 0 auto; border-top:1px solid var(--adline); padding:8px 12px 9px;
  background:rgba(0,0,0,.2); display:flex; flex-direction:column; gap:6px}
.chtfoot.note{background:color-mix(in oklch, var(--gold) 7%, rgba(0,0,0,.2))}
/* ⛔ โหมดโน้ตต้องเปลี่ยนหน้าตาช่องพิมพ์ด้วย ไม่ใช่เปลี่ยนแค่ปุ่มเล็ก ๆ ข้างบน
   — ส่งผิดช่องคือความเสียหายจริง ต้องรู้ตัวตั้งแต่ตอนกำลังพิมพ์ */
.chtfoot.note .chtta{border-color:color-mix(in oklch, var(--gold) 40%, transparent);
  background:color-mix(in oklch, var(--gold) 6%, var(--bg-soft))}
.chtfoot.note .chtsend{background:var(--gold); color:var(--on-gold)}
.chtmode button.on[data-m="note"]{background:color-mix(in oklch, var(--gold) 20%, transparent);
  color:var(--gold)}

/* ร่างจากผู้ช่วย — เหนือช่องพิมพ์ ไม่ใช่ในคอลัมน์ที่จอแคบมองไม่เห็น */
.chtsug{display:flex; align-items:center; gap:10px; padding:7px 11px;
  border-radius:12px; border:1px dashed color-mix(in oklch, var(--info) 38%, transparent);
  background:color-mix(in oklch, var(--info) 8%, transparent)}
.chtsug > b{font-size:11.5px; color:var(--info); white-space:nowrap}
.chtsug p{margin:0; flex:1; font-size:12.5px; color:var(--tx2); line-height:1.55;
  max-height:54px; overflow:hidden}
.chtsugb{display:flex; align-items:center; gap:6px}

/* รูปที่แนบไว้แต่ยังไม่ส่ง */
.chtpick{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chtpic{position:relative; width:52px; height:52px; border-radius:10px;
  overflow:hidden; border:1px solid var(--adline); flex:0 0 auto}
.chtpic img{width:100%; height:100%; object-fit:cover; display:block}
.chtpic.up::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.55)}
.chtpicx{position:absolute; top:1px; right:1px; width:18px; height:18px;
  border-radius:50%; background:rgba(0,0,0,.72); color:#fff; font-size:10px;
  display:grid; place-items:center; z-index:3}
/* ⛔ ตัวในต้องเป็น b ให้ตรงกับที่สคริปต์สร้าง — เขียนเป็น i ไว้รอบแรก
   แถบเลยไม่เคยขึ้นเลยสักครั้ง (รูปมืดลงเฉย ๆ ตอนกำลังอัป) */
.chtprog{position:absolute; left:4px; right:4px; bottom:5px; height:3px;
  border-radius:2px; background:rgba(255,255,255,.25); z-index:2; overflow:hidden}
.chtprog b{display:block; height:100%; width:45%; border-radius:2px;
  background:var(--ember); animation:chtup 1s linear infinite}
@keyframes chtup{from{transform:translateX(-100%)} to{transform:translateX(230%)}}
@media(prefers-reduced-motion:reduce){
  .chtprog b{animation:none; width:100%; opacity:.7}
}
.chtpickhint{font-size:11px; color:var(--tx3)}

.chtcanned{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
.chtcanned::-webkit-scrollbar{display:none}
.chtempty .chtemoji{font-size:22px}
.chtcanned button{border:1px solid var(--adline); border-radius:999px;
  padding:4px 11px; font-size:12px; color:var(--tx3); white-space:nowrap}
.chtcanned button:hover{border-color:var(--line-2); color:var(--tx)}

.chtcomp{display:flex; align-items:flex-end; gap:8px}
.chtta{flex:1; min-height:42px; max-height:120px; resize:none; border-radius:12px;
  border:1px solid var(--adline); background:var(--bg-soft); color:var(--tx);
  padding:11px 13px; font-size:13.5px; line-height:1.6; font-family:inherit}
.chtta:focus{outline:none; border-color:var(--line-2)}
.chtsend{width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  background:var(--ember-btn); color:#fff}
.chtsend:hover{filter:brightness(1.08)}

.chttools{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.chttools .sp{flex:1}
.chthint{font-size:11px; color:var(--tx3)}
.chtchip{border:1px solid var(--adline); border-radius:999px; padding:4px 11px;
  font-size:11.5px; color:var(--tx3); background:var(--glass)}
.chtchip:hover{border-color:var(--line-2); color:var(--tx)}
.chtchip[aria-pressed="true"]{border-color:var(--info); color:var(--info)}
.chtchip.teach{color:var(--info);
  border-color:color-mix(in oklch, var(--info) 30%, transparent)}
.chtmode{display:inline-flex; gap:3px; padding:2px; border-radius:999px;
  border:1px solid var(--adline); background:var(--glass)}
.chtmode button{border-radius:999px; padding:3px 10px; font-size:11.5px;
  color:var(--tx3)}
.chtmode button.on{background:var(--glass-2); color:var(--tx)}
.chtins{display:flex; gap:6px; flex-wrap:wrap}
.chtins button{border:1px dashed var(--line-2); border-radius:999px;
  padding:4px 11px; font-size:11.5px; color:var(--tx2)}
.chtins button:hover{color:var(--tx); background:var(--glass-2)}
.chtins .mono{color:var(--gold); margin-left:5px}

/* เรื่องที่ปิดแล้ว — ช่องพิมพ์ต้องดูออกว่าใช้ไม่ได้ ไม่ใช่ปล่อยให้พิมพ์แล้วเด้ง error */
.chtfoot.closed .chtta, .chtfoot.closed .chtsend{opacity:.45; pointer-events:none}
.chtfoot.closed .chtcanned, .chtfoot.closed .chtmode,
.chtfoot.closed .chtchip{opacity:.45; pointer-events:none}

/* ── ลิ้นชัก (ข้อมูลลูกค้า · ตัวเลข · สิ่งที่สอนไว้) ──
   ⛔ ปิดได้สามทางเสมอ: ปุ่ม ✕ ในลิ้นชัก · ฉากหลัง · Esc
      (ปุ่มที่ "เปิด" มันอยู่ใต้ลิ้นชักพอดี — บักจริงของรอบที่แล้ว) */
.chtdraw{position:absolute; top:0; right:0; bottom:0; width:320px; z-index:20;
  background:var(--adsurf); border-left:1px solid var(--adline);
  box-shadow:var(--shadow-hi); display:flex; flex-direction:column;
  animation:chtslide .18s var(--ease)}
@keyframes chtslide{from{transform:translateX(14px); opacity:.4} to{transform:none; opacity:1}}
.chtdraw > header{display:flex; align-items:center; gap:8px; padding:12px 13px;
  border-bottom:1px solid var(--adline); flex:0 0 auto}
.chtdraw > header b{flex:1; font-size:14px}
.chtdraw > div{flex:1; overflow-y:auto; padding:12px 13px; scrollbar-width:thin}
.chtctxbg{position:absolute; inset:0; z-index:15; background:rgba(4,4,8,.5)}

.chtblk{margin-bottom:16px}
.chtttl{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--tx3);
  letter-spacing:.4px; margin-bottom:7px}
.chtcnt{font-style:normal; font-size:10px; min-width:16px; height:16px; padding:0 5px;
  border-radius:999px; background:var(--glass-2); color:var(--tx3);
  display:grid; place-items:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ── หัวโปรไฟล์ลูกค้า ── */
.chtprof{display:flex; align-items:flex-start; gap:11px; padding:12px;
  border-radius:14px; border:1px solid var(--adline); background:var(--glass);
  margin-bottom:10px}
.chtav.big{width:46px; height:46px; border-radius:14px; font-size:19px}
.chtpwho{min-width:0; flex:1}
.chtpwho > b{display:block; font-size:15px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chtpuser{display:block; font-size:11.5px; color:var(--tx3);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.chtpchips{display:flex; gap:4px; flex-wrap:wrap; margin-top:6px}
.chtchip2{font-style:normal; font-size:10px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--adline); color:var(--tx3); background:var(--glass-2)}
.chtchip2.gold{color:var(--gold); border-color:color-mix(in oklch, var(--gold) 36%, transparent)}
.chtchip2.info{color:var(--info); border-color:color-mix(in oklch, var(--info) 30%, transparent)}

/* สามตัวเลขที่เปลี่ยนวิธีตอบได้จริง */
.chtpnum{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px}
.chtpn{border:1px solid var(--adline); border-radius:12px; padding:9px 8px;
  text-align:center; background:var(--glass)}
.chtpn b{display:block; font-size:14px; line-height:1.25;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.chtpn span{display:block; font-size:10px; color:var(--tx3); margin-top:3px}
.chtpn.gold b{color:var(--gold)}
.chtpn.ok b{color:var(--ok)}

/* การ์ดคีย์ + แถบอายุ */
.chtkey{border:1px solid var(--adline); border-radius:12px; padding:9px 11px;
  background:var(--glass); margin-bottom:7px}
.chtkey .row{display:flex; align-items:center; gap:7px; margin-bottom:4px}
.chtkey .row:last-child{margin-bottom:0}
.chtkey .sp{flex:1}
.chtkey .mono{font-size:12px; color:var(--tx2)}
.chtleft{font-size:12px}
.chtleft.ok{color:var(--ok)}
.chtleft.warn{color:var(--warn)}
.chtleft.hot{color:var(--bad)}
.chtleft.perm{color:var(--gold)}
/* ⛔⛤ ชื่อต้องขึ้นต้น .chtk— ห้ามใช้ .chtbar ซ้ำกับ "แถบเดียวบนสุด"
   (ชนกันรอบแรก: แถบบนสุดกลายเป็นแท่งสูง 5px แล้วหัวหน้าหายทั้งแถว) */
.chtkbar{display:block; height:5px; border-radius:3px; background:var(--glass-2);
  margin-top:7px; overflow:hidden}
.chtkbar b{display:block; height:100%; border-radius:3px; background:var(--ok)}
.chtkbar.warn b{background:var(--warn)}
.chtkbar.hot b{background:var(--bad)}

.chttag.ok{color:var(--ok); border-color:color-mix(in oklch, var(--ok) 30%, transparent)}
.chttag.warn{color:var(--warn); border-color:color-mix(in oklch, var(--warn) 32%, transparent)}
.chttag.bad{color:var(--bad); border-color:color-mix(in oklch, var(--bad) 32%, transparent)}
.chttag.off{color:var(--tx3)}

/* ทางไปหน้าที่ทำงานจริง */
.chtacts{display:flex; flex-direction:column; gap:6px}
.chtact{display:flex; align-items:center; gap:9px; padding:10px 11px;
  border-radius:12px; border:1px solid var(--adline); background:var(--glass);
  font-size:12.5px; color:var(--tx2); text-decoration:none;
  transition:border-color .14s, color .14s, background .14s}
.chtact:hover{border-color:var(--line-2); color:var(--tx); background:var(--glass-2)}
.chtact .ic{font-size:14px}
.chtact .sp{flex:1}
.chtact .go{color:var(--tx3); font-size:16px; line-height:1}

.chtkv{display:flex; align-items:center; gap:10px; font-size:12.5px;
  color:var(--tx3); padding:3px 0}
.chtkv span{flex:1}
.chtkv b{color:var(--tx2); font-weight:500}
.chtkv b.money{color:var(--ok); font-family:"IBM Plex Mono",ui-monospace,monospace}
.chtkv b.late{color:var(--warn)}
.chtdl{border:1px solid var(--adline); border-radius:12px; padding:8px 11px;
  background:var(--glass)}
.chtdl .chtkv{padding:4px 0; border-bottom:1px solid var(--adline)}
.chtdl .chtkv:last-child{border-bottom:0}
.chtitem{display:flex; align-items:center; gap:8px; padding:7px 9px;
  border-radius:10px; border:1px solid var(--adline); background:var(--glass);
  font-size:12px; margin-bottom:6px}
.chtitem .sp{flex:1}
.chtitem .mono{font-size:11.5px}

/* ตัวเลข — อยู่ในลิ้นชัก ไม่ใช่บนหัวหน้า (เดิมโผล่สองที่) */
.chtstats{display:flex; flex-direction:column; gap:8px}
.chtstat{display:flex; align-items:center; gap:9px;
  border:1px solid var(--adline); border-radius:12px; padding:9px 11px;
  background:var(--glass)}
.chtstat b{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:17px;
  line-height:1; min-width:52px; font-variant-numeric:tabular-nums}
.chtstat span{font-size:11.5px; line-height:1.3; color:var(--tx3)}
.chtstat.hot{border-color:color-mix(in oklch, var(--bad) 38%, transparent)}
.chtstat.hot b{color:var(--bad)}
.chtstat.good b{color:var(--ok)}
.chtstat.info b{color:var(--info)}
.chtstat.gold b{color:var(--gold)}
.chtbarr{display:grid; grid-template-columns:96px 1fr 26px; align-items:center;
  gap:8px; font-size:11.5px; color:var(--tx3); margin-bottom:6px}
.chtbarr i{height:6px; border-radius:3px; background:var(--glass-2);
  display:block; overflow:hidden}
.chtbarr i b{display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--ember-btn), var(--ember))}
.chtbarr > b{text-align:right; font-family:"IBM Plex Mono",ui-monospace,monospace;
  color:var(--tx2); font-size:11.5px}

/* สิ่งที่สอนบอทไว้ */
.chtkb{display:flex; flex-direction:column}
.chtkbrow{border:1px solid var(--adline); border-radius:12px; padding:9px 11px;
  background:var(--glass); margin-bottom:8px}
.chtkbrow q{display:block; font-size:12px; color:var(--tx2); margin-bottom:4px}
.chtkbrow p{margin:0 0 7px; font-size:12.5px; color:var(--tx); line-height:1.55}
.chtkbrow .row{display:flex; align-items:center; gap:8px}
.chtkbrow .row span{flex:1; font-size:10.5px; color:var(--tx3)}

/* ── กล่องซ้อนหน้า (ปิดเรื่อง · การ์ด · ปุ่มลัด) ── */
.chtpop{position:fixed; inset:0; z-index:90; background:rgba(4,4,8,.6);
  display:grid; place-items:center; padding:18px}
.chtpopin{width:min(460px,100%); border-radius:var(--r); border:1px solid var(--adline);
  background:var(--adsurf); box-shadow:var(--shadow-hi); padding:16px;
  max-height:86vh; overflow-y:auto}
.chtpopin header{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.chtpopin header b{flex:1; font-size:15px}
.chtpopin header .iconbtn{flex:0 0 auto}
.chthelp{margin:0 0 12px; font-size:12px; color:var(--tx3); line-height:1.6}
.chtpoprow{display:flex; align-items:center; gap:8px; margin-top:12px}
.chtpoprow .sp{flex:1}
.chtreasons{display:flex; flex-direction:column; gap:7px; margin-bottom:12px}
.chtreasons label{display:flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--tx2); padding:7px 10px; border-radius:10px;
  border:1px solid var(--adline); cursor:pointer}
.chtreasons label:hover{border-color:var(--line-2)}
.chtreasons label.bad{color:var(--bad)}
.chtreasons input{accent-color:var(--ember); flex:0 0 auto}
.chtkeys{display:flex; flex-direction:column; gap:8px}
.chtkeys div{display:flex; align-items:center; gap:6px; font-size:12.5px;
  color:var(--tx2)}
.chtkeys span{margin-left:6px; color:var(--tx3)}
.chtkeys kbd{font-size:11px; padding:2px 7px; border-radius:6px;
  border:1px solid var(--adline); background:var(--glass);
  font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ── จอแคบ: ช่องเดียว สลับไปมา ──
   ⛔⛤ เปิดมาต้องเจอ "รายการ" ก่อนเสมอ — เดิมเปิดมาเจอบทสนทนาของเรื่องแรก
      แล้วมองไม่เห็นเลยว่ามีงานอื่นค้างอยู่กี่เรื่อง */
@media(max-width:900px){
  .chtwrap{grid-template-columns:minmax(0,1fr); height:min(80vh,700px)}
  .chtthread{display:none}
  .chtwrap.reading .chtbox{display:none}
  .chtwrap.reading .chtthread{display:flex}
  .chtback{display:grid}
  .chtdraw{width:100%}
  .chtbar h1{font-size:17px}
}

/* ══════════════ หลังร้าน · เช่าจอ v2 — ศูนย์คุมจอเช่า (2026-09-30) ══════════════
   ตัวอย่างที่เจ้าของอนุมัติ: docs/mockups/admin-rental-v2/index.html
   แผน/สัญญา API: docs/plans/2026-09-30-rental-v2.md (หัวข้อ "API หลังบ้านใหม่")
   ⛔ ทุกคลาสในก้อนนี้ขึ้นต้นด้วย rv- — ชื่อสั้นของตัวอย่าง (.card .tab .seg .switch
      .cell .alert) ชนกับของหน้าร้าน/หน้าเช่าจอฝั่งลูกค้าแน่นอน (บทเรียน .adtop/.foot/.adbar)
      สถานะจอใช้ตัวขยาย is-use / is-ready / is-work / is-bad / is-old / is-none
   ⛔ ห้ามใช้ auto-fill/auto-fit — ระบุจำนวนคอลัมน์ตามความกว้างจอ
      (กติกาเดียวกับหน้าเช่าจอฝั่งลูกค้า: กริดซ้อนกริดแล้วความสูงแถวบาน)
   ⚠ ความกว้างที่คำนวณได้ (แถบความคืบหน้า · หน้าต่างบนภาพ Desktop) ตั้งผ่าน
     element.style ใน JS ซึ่ง CSP อนุญาต — ห้ามเขียน style="" ในมาร์กอัป */
.rv-head .sp{flex:1}
.rv-head .btn{flex:none}
.rv-ago{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--tx3);
  font-variant-numeric:tabular-nums}
.rv-ago.stale{color:var(--warn)}
.rv-msg{margin:0 0 12px}
.rv-msg:empty{display:none}

/* ── เซิร์ฟยังเป็นรุ่นเก่า (ไม่มี /overview) — บอกตรง ๆ แทนหน้าว่าง ── */
.rv-down{border:1px dashed rgba(224,168,119,.45); background:rgba(224,168,119,.06);
  border-radius:var(--r); padding:20px 22px; display:grid; gap:6px; max-width:780px}
.rv-down b{font-size:16px; color:var(--warn)}
.rv-down p{margin:0; color:var(--tx2); font-size:13.5px}
.rv-down code{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--tx3);
  overflow-wrap:anywhere}

/* ── เลือกเครื่อง (โผล่เฉพาะตอนมีมากกว่า 1 เครื่องที่ใช้งาน) ── */
.rv-hostpick{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}

/* ── แถบสถานะเครื่อง (โชว์ทุกแท็บ) ── */
.rv-strip{display:grid; gap:12px; margin-bottom:16px;
  grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr))}
.rv-kpi{border:1px solid var(--adline); border-radius:14px; padding:12px 14px;
  background:var(--adsurf); min-width:0; display:flex; flex-direction:column; gap:2px}
.rv-kpi .lab{color:var(--tx3); font-size:12px}
.rv-kpi .val{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:24px; font-weight:600; line-height:1.25; letter-spacing:-.02em;
  overflow-wrap:anywhere}
.rv-kpi .val em{font-style:normal; font-size:12.5px; color:var(--tx3); font-weight:500;
  letter-spacing:0}
.rv-kpi .val.good{color:var(--ok)}
.rv-kpi .val.warn{color:var(--warn)}
.rv-kpi .val.bad{color:var(--bad)}
.rv-kpi .val.sm{font-size:18px}
.rv-kpi .sub{font-size:12px; color:var(--tx3); line-height:1.45}
.rv-kpi .sub.gold{color:var(--gold)}
.rv-kpi .sub.warn{color:var(--warn)}
.rv-bar{height:6px; border-radius:6px; background:rgba(255,255,255,.07); margin-top:8px;
  overflow:hidden}
.rv-bar i{display:block; height:100%; width:0; background:var(--ok); border-radius:6px;
  transition:width var(--t) var(--ease)}
.rv-bar.warn i{background:var(--warn)}
.rv-bar.full i{background:var(--bad)}
.rv-host{flex-direction:row; gap:12px; align-items:flex-start}
.rv-host .t{min-width:0}
.rv-host .nm{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:16px;
  font-weight:600}
.rv-host .meta{font-size:12px; color:var(--tx3)}
.rv-host .res{display:flex; gap:4px 12px; margin-top:6px; font-size:12px; color:var(--tx2);
  flex-wrap:wrap}
.rv-host .res b{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:12.5px}
.rv-dot{width:10px; height:10px; border-radius:50%; flex:none; margin-top:7px;
  background:var(--ok); box-shadow:0 0 0 4px rgba(127,224,127,.15)}
.rv-dot.off{background:var(--bad); box-shadow:0 0 0 4px rgba(255,107,90,.15)}

/* ── แท็บ ── */
.rv-tabs{display:flex; gap:4px; border-bottom:1px solid var(--adline); margin-bottom:18px;
  overflow-x:auto; scrollbar-width:none}
.rv-tabs::-webkit-scrollbar{display:none}
.rv-tab{display:inline-flex; align-items:center; gap:7px; padding:0 16px; min-height:44px;
  border:0; border-bottom:2px solid transparent; background:none; color:var(--tx3);
  font-size:14px; white-space:nowrap; cursor:pointer; margin-bottom:-1px; flex:none;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.rv-tab:hover{color:var(--tx2)}
.rv-tab[aria-selected="true"]{color:var(--tx); border-bottom-color:var(--ember);
  font-weight:600}
.rv-badge{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  padding:0 7px; border-radius:999px; background:var(--ember-btn); color:#fff;
  line-height:18px}
.rv-badge.calm{background:var(--glass-2); color:var(--tx2)}

/* ── โครงแท็บ ── */
.rv-view{min-width:0}
.rv-view:focus{outline:none}
.rv-view:focus-visible{outline:2px solid var(--ember-lit); outline-offset:4px}
.rv-grid2{display:grid; gap:16px; align-items:start;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.rv-col{display:grid; gap:16px; min-width:0}
.rv-body{padding:14px 16px}
.rv-hint{color:var(--tx3); font-size:12.5px; margin:10px 0 0}
.rv-hint.warn{color:var(--warn)}
.rv-hint:empty{display:none}

/* ── ความจุเครื่อง: 1 ช่อง = 1 จอ ── */
.rv-cap{display:flex; gap:14px 18px; align-items:center; flex-wrap:wrap}
.rv-cells{flex:1 1 320px; min-width:0; display:grid; gap:6px;
  grid-template-columns:repeat(10,minmax(0,1fr))}
.rv-cell{height:46px; border-radius:9px; border:1px solid var(--adline); background:none;
  display:grid; place-items:center; padding:0; font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; color:var(--tx3); cursor:pointer; min-width:0}
.rv-cell:hover{border-color:var(--ember-lit)}
.rv-cell.is-use{background:rgba(255,45,70,.16); border-color:rgba(255,45,70,.4); color:#fff}
.rv-cell.is-ready{background:rgba(127,224,127,.12); border-color:rgba(127,224,127,.35);
  color:var(--ok)}
.rv-cell.is-work{background:rgba(95,208,232,.1); border-color:rgba(95,208,232,.35);
  color:var(--info)}
.rv-cell.is-bad{background:rgba(255,107,90,.12); border-color:rgba(255,107,90,.4);
  color:var(--bad)}
.rv-cell.is-old{border-color:var(--adline-hi); color:var(--tx3)}
.rv-cell.is-none{border-style:dashed; cursor:default}
.rv-cell.is-none:hover{border-color:var(--adline)}
.rv-cell.over{box-shadow:inset 0 0 0 1px var(--warn)}
.rv-limit{display:flex; align-items:center; gap:10px; flex:none}
.rv-limit .lab{font-size:12px; color:var(--tx3)}
.rv-legend{display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:12px; font-size:12px;
  color:var(--tx3)}
.rv-legend span{display:inline-flex; align-items:center; gap:6px}
.rv-legend i{width:10px; height:10px; border-radius:3px; display:inline-block}
.rv-legend i.is-use{background:rgba(255,45,70,.55)}
.rv-legend i.is-ready{background:rgba(127,224,127,.55)}
.rv-legend i.is-work{background:rgba(95,208,232,.55)}
.rv-legend i.is-bad{background:rgba(255,107,90,.55)}
.rv-legend i.is-none{border:1px dashed var(--tx3)}
/* แถวเก่า (ไม่มีจอจริง) — สีเดียวกับช่อง .rv-cell.is-old (เดิมยืมขีดประของ "ยังไม่สร้าง") */
.rv-legend i.is-old{border:1px solid var(--adline-hi); background:rgba(255,255,255,.05)}

/* ── ต้องจัดการ ── */
.rv-alert{display:flex; gap:10px 12px; align-items:flex-start; flex-wrap:wrap;
  padding:11px 12px; border-radius:12px; border:1px solid var(--adline); margin-bottom:8px}
.rv-alert:last-child{margin-bottom:0}
.rv-alert .ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  flex:none; font-size:15px; background:rgba(95,208,232,.12)}
.rv-alert .tx{flex:1 1 200px; min-width:0}
.rv-alert .tx b{display:block; font-size:13.5px; font-weight:600}
.rv-alert .tx span{color:var(--tx3); font-size:12.5px}
.rv-alert .acts{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.rv-alert.hi{border-color:rgba(255,107,90,.35); background:rgba(255,107,90,.06)}
.rv-alert.hi .ic{background:rgba(255,107,90,.15)}
.rv-alert.md{border-color:rgba(224,168,119,.35); background:rgba(224,168,119,.05)}
.rv-alert.md .ic{background:rgba(224,168,119,.15)}
.rv-calm{display:flex; gap:10px; align-items:center; color:var(--ok); font-size:13px;
  padding:6px 2px}

/* ── เกิดอะไรขึ้นบ้าง (รุ่นมืออาชีพ 10-01: ตัวกรอง · จัดกลุ่มตามวัน · แถบสีระดับ · รายละเอียดช่างพับไว้) ── */
.rv-tlchips{display:flex; gap:6px; flex-wrap:wrap; padding:12px 16px 2px}
.rv-tlbox{max-height:620px; overflow:auto; padding-bottom:6px}
.rv-tlday{font-size:12px; color:var(--tx3); padding:12px 16px 2px; font-weight:600;
  letter-spacing:.03em}
.rv-tlempty{padding:14px 16px; color:var(--tx3); font-size:13px}
.rv-tl{list-style:none; margin:0; padding:0 16px 4px}
.rv-tl li{display:grid; grid-template-columns:44px 30px minmax(0,1fr); gap:10px; padding:8px 0 8px 10px;
  border-bottom:1px solid rgba(255,255,255,.045); border-left:3px solid rgba(95,208,232,.35);
  font-size:13px}
.rv-tl li:last-child{border-bottom:0}
.rv-tl li.is-ok{border-left-color:rgba(127,224,127,.55)}
.rv-tl li.is-warn{border-left-color:var(--warn)}
.rv-tl li.is-bad{border-left-color:var(--bad)}
.rv-tl time{font-family:"IBM Plex Mono",monospace; color:var(--tx3); font-size:12px;
  font-variant-numeric:tabular-nums; padding-top:6px}
.rv-tl .ti{width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-size:14px; background:var(--glass-2)}
.rv-tl li.is-ok .ti{background:rgba(127,224,127,.12)}
.rv-tl li.is-warn .ti{background:rgba(224,168,119,.15)}
.rv-tl li.is-bad .ti{background:rgba(255,107,90,.15)}
.rv-tl p{margin:0; line-height:1.5; overflow-wrap:anywhere; padding-top:4px}
.rv-tl details{margin-top:3px}
.rv-tl summary{font-size:11.5px; color:var(--tx3); cursor:pointer; width:max-content; max-width:100%}
.rv-tl details code{display:block; margin-top:4px; padding:6px 8px; border-radius:8px;
  background:rgba(0,0,0,.3); font-family:"IBM Plex Mono",monospace; font-size:11px;
  color:var(--tx3); overflow-wrap:anywhere; white-space:pre-wrap}
.rv-who{display:inline-block; font-size:10.5px; padding:0 7px; border-radius:999px;
  background:var(--glass-2); color:var(--tx3); margin-right:6px; vertical-align:1px;
  white-space:nowrap; line-height:17px}
.rv-who.is-admin{background:rgba(255,45,70,.14); color:#FFB3BC}
.rv-who.is-cust{background:rgba(95,208,232,.12); color:var(--info)}

/* ── ภาพ Desktop ของคอมบอท ── */
.rv-desk{aspect-ratio:16/9; border-radius:12px; border:1px solid var(--adline);
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 70% 40%,rgba(95,120,255,.22),transparent 55%),
    linear-gradient(160deg,#101025,#07070d)}
/* ป้ายชื่อเดสก์ท็อปอยู่มุมขวาล่าง (เหนือทาสก์บาร์) — มุมซ้ายบนคือช่องจอแรก ป้ายทับชื่อจอ */
.rv-desk .lbl{position:absolute; right:10px; bottom:calc(3.7% + 8px); z-index:2; font-size:11px;
  color:var(--tx2); background:rgba(0,0,0,.6); padding:2px 8px; border-radius:6px}
/* ทาสก์บาร์ ~40 จาก 1080 (ตรรกะ) = 3.7% — ตรงกับที่ paintDesk หักออก */
.rv-desk .tb{position:absolute; left:0; right:0; bottom:0; height:3.7%;
  background:rgba(0,0,0,.7)}
.rv-desk .empty{position:absolute; inset:0; display:grid; place-items:center;
  color:var(--tx3); font-size:12.5px}
.rv-win{position:absolute; border-radius:3px; overflow:hidden; display:flex;
  flex-direction:column; border:1px solid rgba(255,255,255,.22); background:#1d1528;
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
.rv-win .t{height:16%; min-height:9px; background:#2b2440; font-size:9px; padding:0 5px;
  display:flex; align-items:center; color:#ddd; white-space:nowrap; overflow:hidden}
.rv-win .c{flex:1; background:linear-gradient(160deg,#6a3b1d,#241632)}
.rv-win.is-ready .c{background:linear-gradient(160deg,#1e2e1e,#15151d)}
.rv-win.is-work .c{background:linear-gradient(160deg,#12303a,#15151d)}
.rv-win.is-bad .c{background:linear-gradient(160deg,#3a1414,#15151d)}
.rv-win.is-old .c{background:#15151d}

/* ── จอทั้งหมด ── */
.rv-toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.rv-chips{display:flex; gap:6px; flex-wrap:wrap}
.rv-find{flex:1 1 220px; min-width:0}
.rv-screens{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
.rv-scr{border:1px solid var(--adline); border-radius:14px; overflow:hidden;
  background:var(--adsurf); display:flex; flex-direction:column; min-width:0}
.rv-scr.is-bad{border-color:rgba(255,107,90,.4)}
.rv-scr.flash{box-shadow:0 0 0 2px var(--ember-lit)}
.rv-th{aspect-ratio:16/9; position:relative; display:grid; place-items:center;
  text-align:center; padding:30px 14px; color:var(--tx3); font-size:12px; background:#0b0b10}
.rv-th.is-use{color:var(--tx2);
  background:radial-gradient(circle at 30% 60%,rgba(255,170,60,.28),transparent 45%),
    radial-gradient(circle at 70% 30%,rgba(120,200,255,.18),transparent 40%),
    linear-gradient(160deg,#2a1a0f,#16111f)}
.rv-th.is-ready{background:#0c140d}
.rv-th.is-work{background:#0b1216}
.rv-th.is-bad{background:#160c0c; color:var(--bad)}
.rv-th .st{position:absolute; left:8px; top:8px; font-size:11px; padding:2px 8px;
  border-radius:6px; background:rgba(0,0,0,.6); max-width:calc(100% - 16px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rv-th .tm{position:absolute; right:8px; bottom:8px; font-size:11px; padding:2px 8px;
  border-radius:6px; background:rgba(0,0,0,.6); color:var(--tx2)}
.rv-th .tm.warn{color:var(--warn)}
/* 👁 ภาพย่อจอจริง (แอดมินดูได้ทุกจอ) — วาดลง canvas ใต้ป้ายสถานะ · มีภาพแล้วซ่อนข้อความกลาง */
.rv-th canvas.rv-peek{position:absolute; inset:0; width:100%; height:100%; display:block;
  background:#000; object-fit:contain}
/* ⚠ ภาพจอแนวตั้ง/สัดส่วนอื่นห้ามถูกยืดเป็น 16:9 — object-fit ใช้กับ canvas ได้ (เว้นขอบดำแทน) */
.rv-th.has-err .ctr.ld{display:none}
.rv-th.has-img .ctr{display:none}
.rv-th .perr{position:absolute; left:8px; bottom:8px; font-size:11px; padding:2px 8px;
  border-radius:6px; background:rgba(0,0,0,.7); color:var(--warn); max-width:60%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rv-th .ctr{position:relative}
.rv-livecard{width:min(1100px,96vw); max-width:96vw}
/* ⚠ สัดส่วนตามเฟรมจริง (width/height ของ canvas) — ไม่บังคับ 16:9 · สูงเกินจอ = เว้นขอบดำ */
.rv-livecv{display:block; width:100%; height:auto; max-height:72vh; object-fit:contain;
  background:#000; border-radius:10px}
.rv-livest{font-size:12.5px; color:var(--tx2); margin:10px 0 0}
.rv-st-use{color:var(--ember-lit)}
.rv-st-ready{color:var(--ok)}
.rv-st-work{color:var(--info)}
.rv-st-bad{color:var(--bad)}
.rv-st-old{color:var(--tx3)}
.rv-bd{padding:11px 12px; display:flex; flex-direction:column; gap:7px; flex:1}
.rv-nm{display:flex; justify-content:space-between; align-items:center; gap:8px}
.rv-nm b{font-size:14px; white-space:nowrap}
.rv-nm span{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--tx3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.rv-kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 10px;
  font-size:12.5px; color:var(--tx2); margin:0}
.rv-kv dt{color:var(--tx3)}
.rv-kv dd{margin:0; text-align:right; overflow-wrap:anywhere}
.rv-kv dd.warn{color:var(--warn)}
.rv-kv dd.bad{color:var(--bad)}
.rv-prog{height:6px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden}
.rv-prog i{display:block; height:100%; width:0; background:var(--info); border-radius:6px;
  transition:width var(--t) var(--ease)}
.rv-prog.spin i{width:35%; animation:rvSlide 1.4s linear infinite}
@keyframes rvSlide{from{transform:translateX(-100%)} to{transform:translateX(290%)}}
.rv-step{font-size:12px; color:var(--info)}
.rv-acts{display:flex; gap:6px; flex-wrap:wrap; padding:10px 12px;
  border-top:1px solid var(--adline)}
.rv-acts:empty{display:none}
.rv-acts .rv-wait{font-size:12px; color:var(--tx3); align-self:center}
.rv-new{border:1px dashed rgba(255,255,255,.18); border-radius:14px; display:grid;
  place-items:center; text-align:center; padding:24px; color:var(--tx3); min-height:240px;
  font-size:13px}
.rv-new b{display:block; color:var(--tx); font-size:15px; margin:4px 0}
.rv-new .btn{margin-top:12px}
/* ⏱ ชดเชยเวลาหลายจอ (2026-10-02) — ช่องติ๊กอยู่ใต้ภาพจอ (ห้ามมีของกดได้ทับภาพเกม) */
#rv-pick.on{border-color:var(--ember); color:var(--tx); background:rgba(255,45,70,.10)}
.rv-scr.is-picked{border-color:var(--ember-lit); box-shadow:0 0 0 1px var(--ember-lit)}
.rv-pickrow{display:flex; align-items:center; gap:10px; min-height:44px; margin:-4px -4px 0;
  padding:0 8px; border-radius:10px; cursor:pointer; font-size:13px; color:var(--tx2);
  border:1px dashed var(--adline)}
.rv-pickrow input{width:20px; height:20px; flex:none; margin:0}
.rv-scr.is-picked .rv-pickrow{border-style:solid; border-color:var(--ember); color:var(--tx);
  background:rgba(255,45,70,.08)}
.rv-selbar{position:sticky; bottom:12px; z-index:20; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; margin-top:14px; padding:10px 12px; border-radius:14px;
  border:1px solid var(--line-2); background:var(--surface); box-shadow:var(--shadow-hi)}
.rv-selbar[hidden]{display:none}
.rv-selbar b{font-size:14px}
.rv-selbar .sp{flex:1}
.rv-long{display:inline}
/* ปุ่มกลับขึ้นบนลอยเหนือแถบเลือกจอ (ไม่ทับปุ่มชดเชย) — แบบเดียวกับตอนเปิดแชท */
body:has(.rv-selbar:not([hidden])) .totop{bottom:calc(96px + env(safe-area-inset-bottom))}
.rv-selbar .btn{min-height:44px}
.rv-compcard{width:min(620px,100%)}
.rv-compform .rv-hint{margin:0 0 12px}
.rv-comppre{margin:0 0 12px}
.rv-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.rv-step1{display:flex; flex-direction:column; gap:4px; min-width:0}
.rv-step1 label{font-size:12.5px; color:var(--tx3)}
.rv-step1 small{font-size:11px; color:var(--tx3)}
.rv-stepper{display:flex; align-items:stretch; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:rgba(0,0,0,.25)}
.rv-stepper button{width:44px; min-height:44px; flex:none; border:0; background:var(--glass);
  color:var(--tx); font:inherit; font-size:18px; cursor:pointer}
.rv-stepper button:hover{background:var(--glass-2)}
.rv-stepper input{flex:1; min-width:0; width:100%; border:0; background:none; color:var(--tx);
  text-align:center; font:inherit; font-family:"IBM Plex Mono",monospace; font-size:16px}
.rv-comptot{margin:12px 0 14px; font-size:14px; font-weight:600; color:var(--ok)}
.rv-comptot.warn{color:var(--warn); font-weight:500}
.rv-complab{display:block; font-size:12.5px; color:var(--tx3); margin-bottom:6px}
.rv-compwhy{min-height:44px}
.rv-compwhychips{margin:10px 0 4px}
.rv-comph3{font-size:13.5px; margin:14px 0 8px; color:var(--tx2)}
.rv-complist{list-style:none; margin:0 0 16px; padding:0; max-height:240px; overflow-y:auto;
  border:1px solid var(--line); border-radius:12px}
.rv-complist li{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 12px; border-top:1px solid var(--line); font-size:12.5px}
.rv-complist li:first-child{border-top:0}
.rv-complist .who{display:flex; flex-direction:column; min-width:0}
.rv-complist .who b{font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rv-complist .who span{color:var(--tx3); font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rv-complist .tm{flex:none; text-align:right; color:var(--tx2)}
.rv-complist .tm .old{color:var(--tx3)}
.rv-complist .tm .arr{margin:0 6px; color:var(--tx3)}
.rv-complist .tm b{color:var(--ok)}
.rv-complist li.is-bad .tm{color:var(--bad)}
/* ปุ่มยืนยันติดล่างกล่องเสมอ — รายการจอยาว/จอ 390 ต้องไม่ต้องเลื่อนหาปุ่ม */
.rv-compacts{justify-content:flex-end; position:sticky; bottom:-20px; z-index:2;
  margin:0 -20px -20px; padding:12px 20px 20px; background:var(--surface);
  border-top:1px solid var(--line)}
.rv-compres{display:flex; flex-direction:column}
.rv-compres .rv-comptot{margin-top:0}
.rv-compacts .btn{min-height:44px}
@media (max-width:520px){
  .rv-steps{grid-template-columns:minmax(0,1fr); gap:8px}
  .rv-step1{flex-direction:row; align-items:center; gap:10px}
  .rv-step1 label{flex:0 0 64px; font-size:13px; color:var(--tx2)}
  .rv-step1 .rv-stepper{flex:1}
  .rv-step1 small{display:none}
  .rv-complist li{flex-direction:column; align-items:flex-start; gap:4px}
  .rv-complist .tm{text-align:left}
  .rv-compacts .btn.primary{flex:1}
  /* แถว 1: จำนวน + เลือกทั้งหมด · แถว 2: ยกเลิก + ชดเชย (ตัวเว้นกลายเป็นตัวขึ้นบรรทัด) */
  .rv-selbar b{flex:1}
  .rv-selbar .sp{flex:1 0 100%; height:0}
  .rv-selbar .rv-long{display:none}
  #rv-sel-comp{flex:1}
  body:has(.rv-selbar:not([hidden])) .totop{bottom:calc(146px + env(safe-area-inset-bottom))}
}

/* ── สัญญา & คิว ──
   ⚠ ตารางในแผงแคบห้ามบีบจนปุ่มเรียงแนวตั้ง/อีเมลหักสามบรรทัด (เห็นตอนเปิดพรีวิวที่ 1280px)
     ⇒ ตรึงความกว้างขั้นต่ำแล้วให้เลื่อนแนวนอนในการ์ดแทน · หน้าเว็บทั้งหน้าไม่เลื่อนข้าง */
.rv-tw table.adtbl{min-width:560px}
.rv-tw table.adtbl td{white-space:nowrap}
.rv-tw .adtacts{flex-wrap:nowrap}
td.rv-left.warn{color:var(--warn)}
.rv-form{display:grid; gap:12px}
.rv-form .field{margin:0}
.rv-seg{display:flex; flex-wrap:wrap; gap:6px}
.rv-seg button{min-height:40px; padding:0 14px; border-radius:10px;
  border:1px solid var(--adline); background:var(--glass); color:var(--tx2);
  font-size:13px; cursor:pointer}
.rv-seg button:hover{border-color:var(--ember-lit); color:var(--tx)}
.rv-seg button[aria-checked="true"]{background:var(--ember-btn); border-color:transparent;
  color:#fff; font-weight:600}
.rv-days{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rv-days .input{width:120px; min-height:40px}
.rv-where{border:1px solid var(--adline); border-radius:10px; padding:9px 12px;
  font-size:13px; color:var(--tx2); margin:0}
.rv-where.q{border-color:rgba(224,168,119,.35); color:var(--warn)}
.modalbody > .rv-hint:first-child{margin:0 0 14px}
.rv-formmsg{margin:0}
.rv-formmsg:empty{display:none}
.rv-formmsg.ok{color:var(--ok)}

/* ── เครื่องมือ ── */
.rv-tools{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
.rv-tool{border:1px solid var(--adline); border-radius:14px; padding:14px;
  background:var(--adsurf); display:flex; flex-direction:column; gap:9px; min-width:0}
.rv-tool h3{margin:0; font-size:14.5px; font-weight:600; display:flex; gap:8px;
  align-items:center; flex-wrap:wrap}
.rv-tool p{margin:0; color:var(--tx3); font-size:12.5px}
.rv-last{font-size:12.5px; color:var(--tx2); padding:8px 10px; border-radius:9px;
  background:rgba(0,0,0,.25); overflow-wrap:anywhere}
.rv-last.ok{color:var(--ok)}
.rv-last.warn{color:var(--warn)}
.rv-last.bad{color:var(--bad)}
.rv-foot{display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; align-items:center}
.rv-apkpick{margin:0}
.rv-apkpick select{width:100%}
.rv-tag{font-size:10.5px; padding:1px 7px; border-radius:6px; background:rgba(255,255,255,.07);
  color:var(--tx3); margin-left:auto; font-weight:500}
.rv-tag.danger{background:rgba(255,107,90,.15); color:var(--bad)}
/* ผลตรวจสุขภาพ: จัดกลุ่มตาม group ของเซิร์ฟ · เรียง ต้องแก้ → ควรดู → รู้ไว้ → ผ่าน */
.rv-checks{display:grid; gap:12px; max-height:560px; overflow:auto}
.rv-cgrp h4{margin:0 0 2px; font-size:12px; color:var(--tx3); font-weight:600; letter-spacing:.03em}
.rv-cgrp ul{list-style:none; margin:0; padding:0; display:grid; gap:0 18px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.rv-cgrp li{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04)}
.rv-cgrp li > span:last-child{min-width:0}
.rv-cgrp li b{font-weight:600}
.rv-cgrp li em{font-style:normal; color:var(--tx3); display:block; font-size:11.5px}
.rv-fix{display:block; color:var(--warn); font-size:11.5px; margin-top:2px}
.rv-ck{flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; background:var(--glass-2); color:var(--tx3)}
.rv-ck.is-ok{background:rgba(127,224,127,.14); color:var(--ok)}
.rv-ck.is-info{background:rgba(95,208,232,.14); color:var(--info)}
.rv-ck.is-warn{background:rgba(224,168,119,.16); color:var(--warn)}
.rv-ck.is-bad{background:rgba(255,107,90,.16); color:var(--bad)}
.rv-invout{font-size:12.5px; display:grid; gap:6px; color:var(--tx2)}
.rv-invout:empty{display:none}
.rv-invout .rv-pills{display:flex; gap:4px; flex-wrap:wrap}
.rv-hostrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:9px 0;
  border-top:1px solid rgba(255,255,255,.05)}
.rv-hostrow:first-child{border-top:0; padding-top:0}
.rv-hostrow .t{flex:1 1 160px; min-width:0}
.rv-hostrow .t b{display:block; font-size:13px}
.rv-hostrow .t span{font-size:11.5px; color:var(--tx3)}
.rv-how{margin-top:16px}
.rv-how > summary{list-style:none; cursor:pointer; padding:0 16px; min-height:48px;
  display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px}
.rv-how > summary::-webkit-details-marker{display:none}
.rv-how > summary::after{content:"▾"; margin-left:auto; color:var(--tx3);
  transition:transform var(--t-fast) var(--ease)}
.rv-how[open] > summary{border-bottom:1px solid var(--adline)}
.rv-how[open] > summary::after{transform:rotate(180deg)}
.rv-howgrid{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr));
  padding:14px 16px}
.rv-howgrid h4{margin:0; font-size:14px; font-weight:600}
.rv-howgrid .rv-hint{margin:2px 0 6px}
.rv-flow{display:flex; flex-direction:column}
.rv-fs{display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px;
  align-items:start; padding:9px 0; position:relative}
.rv-fs .n{width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,45,70,.15); color:var(--ember-lit); font-weight:700; font-size:13px;
  position:relative; z-index:1}
.rv-fs:not(:last-child)::before{content:""; position:absolute; left:14px; top:40px;
  bottom:-6px; width:2px; background:var(--adline)}
.rv-fs b{display:block; font-size:13.5px; font-weight:600}
.rv-fs span{color:var(--tx3); font-size:12.5px}
.rv-fs .t{font-size:12px; color:var(--tx3); white-space:nowrap}

/* ── ตั้งค่า ── */
.rv-saved{font-size:12.5px; color:var(--tx3); min-height:20px; margin:0 0 12px}
.rv-saved.ok{color:var(--ok)}
.rv-saved.bad{color:var(--bad)}
.rv-set{display:grid; gap:16px; align-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.rv-srow{display:flex; justify-content:space-between; align-items:center; gap:10px 14px;
  flex-wrap:wrap; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05)}
.rv-srow:first-child{padding-top:0}
.rv-srow:last-child{border-bottom:0; padding-bottom:0}
.rv-srow .t{flex:1 1 220px; min-width:0}
.rv-srow .t b{display:block; font-size:13.5px; font-weight:600}
.rv-srow .t span{color:var(--tx3); font-size:12px}
.rv-stepper{display:inline-flex; align-items:center; border:1px solid var(--adline);
  border-radius:10px; overflow:hidden; flex:none}
.rv-stepper button{width:40px; height:40px; border:0; background:var(--glass);
  color:var(--tx); font-size:18px; cursor:pointer}
.rv-stepper button:hover:not(:disabled){background:var(--glass-2)}
.rv-stepper button:disabled{opacity:.35; cursor:not-allowed}
.rv-stepper output{min-width:48px; text-align:center; font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; font-size:17px; font-weight:600}
.rv-lock{font-size:12px; color:var(--tx3)}
.rv-switch{width:46px; height:26px; border-radius:99px; border:0; padding:0; flex:none;
  position:relative; cursor:pointer; background:rgba(255,255,255,.15);
  transition:background var(--t-fast) var(--ease)}
.rv-switch::after{content:""; position:absolute; left:3px; top:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform var(--t-fast) var(--ease)}
.rv-switch[aria-checked="true"]{background:var(--ember-btn)}
.rv-switch[aria-checked="true"]::after{transform:translateX(20px)}
.rv-switch:disabled{opacity:.45; cursor:not-allowed}

/* ══ 🩺 รุ่นมืออาชีพ (2026-10-01) — สุขภาพคอมบอท · ระบบสังเกตเห็น · ธุรกิจ · ผังห้องเครื่อง ══
   ตัวอย่างที่เจ้าของอนุมัติ: docs/mockups/admin-rental-pro/index.html
   ⚠ หน้าปัด/กราฟเป็น SVG ที่ JS สร้างด้วย createElementNS — สีมาจากคลาสในก้อนนี้
     (ไม่ใส่ var() ในแอตทริบิวต์ของ SVG) · ระดับใช้ตัวขยาย is-ok / is-warn / is-bad / is-na / is-info */
.rv-sech{display:flex; align-items:baseline; gap:4px 10px; flex-wrap:wrap; margin:26px 0 10px}
.rv-sech:first-child{margin-top:0}
.rv-sech h2{font-size:17px; font-weight:600; margin:0}
.rv-sech .adwhy{flex:1 1 240px}
.rv-pausedpill{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px;
  border-radius:999px; border:1px solid rgba(224,168,119,.45); background:rgba(224,168,119,.1);
  color:var(--warn); font-size:12.5px; font-weight:600; cursor:pointer; flex:none}
.rv-pausedpill:hover{border-color:var(--warn)}
.rv-lvp{font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; white-space:nowrap;
  background:var(--glass-2); color:var(--tx3)}
.rv-lvp.is-ok{background:rgba(127,224,127,.12); color:var(--ok)}
.rv-lvp.is-warn{background:rgba(224,168,119,.15); color:var(--warn)}
.rv-lvp.is-bad{background:rgba(255,107,90,.15); color:var(--bad)}
.rv-lvp.is-info{background:rgba(95,208,232,.13); color:var(--info)}
.rv-lvp.is-na{background:var(--glass-2); color:var(--tx3)}
.rv-steps{margin:8px 0 6px; padding-left:20px; font-size:13px; color:var(--tx2); line-height:1.65}
.rv-steps li{margin:2px 0}
.rv-steps b,.rv-tool p b{color:var(--tx)}
.rv-tool .rv-note{font-size:12px; color:var(--tx3); margin-top:6px}

/* ── หัวสุขภาพ (ประโยคสรุป + ตัวเลขด่วน) ── */
.rv-verdict{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px 20px;
  align-items:center; padding:18px 20px; border-radius:16px; margin-bottom:12px;
  border:1px solid var(--adline); background:var(--adsurf)}
.rv-verdict.is-ok{border-color:rgba(127,224,127,.3);
  background:radial-gradient(120% 140% at 0% 0%,rgba(127,224,127,.10),transparent 55%),var(--adsurf)}
.rv-verdict.is-warn{border-color:rgba(224,168,119,.34);
  background:radial-gradient(120% 140% at 0% 0%,rgba(224,168,119,.13),transparent 55%),var(--adsurf)}
.rv-verdict.is-bad{border-color:rgba(255,107,90,.45);
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,107,90,.15),transparent 55%),var(--adsurf)}
.rv-vring{width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  font-size:30px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.14)}
.rv-verdict.is-ok .rv-vring{box-shadow:inset 0 0 0 3px rgba(127,224,127,.5),0 0 30px rgba(127,224,127,.16)}
.rv-verdict.is-warn .rv-vring{box-shadow:inset 0 0 0 3px rgba(224,168,119,.55),0 0 30px rgba(224,168,119,.2)}
.rv-verdict.is-bad .rv-vring{box-shadow:inset 0 0 0 3px rgba(255,107,90,.6),0 0 30px rgba(255,107,90,.22)}
.rv-vtx{min-width:0}
.rv-vtitle{font-size:22px; font-weight:600; line-height:1.4; margin:0; overflow-wrap:anywhere}
.rv-vtitle .rv-lvp{font-size:12px; vertical-align:4px; margin-right:8px; padding:2px 9px}
.rv-vsub{color:var(--tx2); margin:4px 0 10px; font-size:13.5px}
.rv-vchips{display:flex; gap:8px; flex-wrap:wrap}
.rv-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--tx2);
  padding:3px 10px; border-radius:999px; background:var(--glass-2); border:1px solid var(--adline);
  max-width:100%; overflow-wrap:anywhere}
.rv-live{width:7px; height:7px; border-radius:50%; flex:none; background:var(--ok);
  box-shadow:0 0 0 3px rgba(127,224,127,.18)}
.rv-live.off{background:var(--bad); box-shadow:0 0 0 3px rgba(255,107,90,.18)}
.rv-vstats{display:grid; grid-template-columns:repeat(2,minmax(108px,auto)); gap:8px}
.rv-vstat{padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.03);
  border:1px solid var(--adline); min-width:0}
.rv-vstat small{display:block; font-size:11.5px; color:var(--tx3)}
.rv-vstat b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:19px;
  font-weight:600; white-space:nowrap}
.rv-vstat b em{font-style:normal; font-size:12px; color:var(--tx3); font-weight:500}
.rv-vstat b.gold{color:var(--gold)}
.rv-vstat b.warn{color:var(--warn)}
.rv-vstat b.good{color:var(--ok)}

/* ── 🔮 พยากรณ์ล่วงหน้า (history.forecast) — ตัวเลขใหญ่ + แถบต่อปัจจัย · ตัวจำกัดไฮไลต์แดง ── */
.rv-fc{border-radius:16px; margin-bottom:12px; padding:16px 18px; border:1px solid rgba(95,208,232,.24);
  background:radial-gradient(90% 130% at 100% 0%,rgba(95,208,232,.08),transparent 60%),
    radial-gradient(70% 120% at 0% 100%,rgba(255,45,70,.07),transparent 60%),var(--adsurf)}
.rv-fch{display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin-bottom:12px}
.rv-fch h3{margin:0; font-size:15px; font-weight:600}
.rv-fch .adwhy{flex:1 1 220px}
.rv-fcgrid{display:grid; gap:14px 24px; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.rv-fcbig{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0}
.rv-fcbig small{font-size:13px; color:var(--tx2)}
.rv-fcbig b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:44px;
  font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--info)}
.rv-fcbig b.zero{color:var(--warn)}
.rv-fcbig em{font-style:normal; font-size:15px; color:var(--tx2)}
.rv-fcsum{margin:8px 0 10px; font-size:13.5px; color:var(--tx); line-height:1.5}
.rv-fcchips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.rv-chip.is-ok{color:var(--ok); border-color:rgba(127,224,127,.35)}
.rv-chip.is-warn{color:var(--warn); border-color:rgba(224,168,119,.42)}
.rv-chip.is-bad{color:var(--bad); border-color:rgba(255,107,90,.45)}
.rv-fclines{margin:0; padding:0 0 0 18px; display:grid; gap:4px; font-size:12.5px; color:var(--tx2);
  line-height:1.5}
.rv-fcb{display:grid; gap:6px}
.rv-fcb h4{margin:0 0 2px; font-size:12px; color:var(--tx3); font-weight:600; letter-spacing:.03em}
.rv-fcrow{display:grid; gap:4px 10px; align-items:center; padding:7px 10px; border-radius:10px;
  border:1px solid transparent; grid-template-columns:minmax(0,9.5em) minmax(0,1fr) auto}
.rv-fcrow.lim{border-color:rgba(255,45,70,.42); background:rgba(255,45,70,.07)}
.rv-fcrow .lab{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:12.5px;
  color:var(--tx2); min-width:0}
.rv-fcrow .n{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:13px;
  font-weight:600; white-space:nowrap}
.rv-fcrow .n.na{color:var(--tx3); font-weight:500}
.rv-fcrow .note{grid-column:1 / -1; font-size:11.5px; color:var(--tx3); line-height:1.45}
.rv-fcbar{height:8px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; min-width:0}
.rv-fcbar i{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,rgba(95,208,232,.45),var(--info))}
.rv-fcrow.lim .rv-fcbar i{background:linear-gradient(90deg,rgba(255,45,70,.55),var(--ember))}
.rv-fctag{font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; white-space:nowrap;
  justify-self:start}
.rv-fctag.lim{background:rgba(255,45,70,.16); color:#FFB3BC}
.rv-fctag.plenty{background:rgba(127,224,127,.12); color:var(--ok)}
.rv-fctag.unk{background:var(--glass-2); color:var(--tx3)}
.rv-fctag.ai{background:rgba(95,208,232,.12); color:var(--info); font-weight:500}
.rv-fcmsg{margin:0; color:var(--tx3); font-size:13px}

/* ── หน้าปัดครึ่งวง + แถบ ── */
.rv-gauges{display:grid; gap:12px; margin-bottom:12px; grid-template-columns:repeat(4,minmax(0,1fr))}
.rv-gauges:empty{display:none}
.rv-gauge{padding:14px 14px 12px; border-radius:14px; background:var(--adsurf);
  border:1px solid var(--adline); min-width:0; display:flex; flex-direction:column}
.rv-gt{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tx2)}
.rv-gt .rv-lvp{margin-left:auto}
.rv-garc{position:relative; width:100%; max-width:190px; margin:6px auto 0}
.rv-garc svg{display:block; width:100%; height:auto}
.rv-gv{position:absolute; left:0; right:0; bottom:2px; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:26px;
  font-weight:600; line-height:1}
.rv-gv em{font-style:normal; font-size:13px; color:var(--tx3); font-weight:500}
.rv-gv.na{color:var(--tx3); font-size:22px}
.rv-gscale{display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; color:var(--tx3); width:100%; max-width:190px; margin:2px auto 0}
.rv-gsub{font-size:11.5px; color:var(--tx3); margin-top:4px}
.rv-gnote{font-size:12px; color:var(--tx2); margin:8px 0 0; line-height:1.5}
.rv-gnote b{color:var(--tx); font-weight:600}
.rv-gnote.na{color:var(--tx3)}
.rv-gbig{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:26px;
  font-weight:600; line-height:1.2; margin:10px 0 6px; overflow-wrap:anywhere}
.rv-gbig em{font-style:normal; font-size:13px; color:var(--tx3); font-weight:500}
.rv-gbig.na{font-size:20px; color:var(--tx3)}
.rv-arc{fill:none; stroke-linecap:round}
.rv-arc.bg{stroke:rgba(255,255,255,.07); stroke-width:10}
.rv-arc.z{stroke-width:2.5; stroke-linecap:butt; opacity:.65}
.rv-arc.v{stroke-width:10}
.rv-arc.is-ok{stroke:var(--ok)}
.rv-arc.is-warn{stroke:var(--warn)}
.rv-arc.is-bad{stroke:var(--bad)}
.rv-arc.is-na{stroke:var(--tx3)}
.rv-arc.v.is-ok{filter:drop-shadow(0 0 5px rgba(127,224,127,.5))}
.rv-arc.v.is-warn{filter:drop-shadow(0 0 5px rgba(224,168,119,.55))}
.rv-arc.v.is-bad{filter:drop-shadow(0 0 5px rgba(255,107,90,.6))}
.rv-meter{display:block; height:8px; border-radius:999px; background:rgba(255,255,255,.07); position:relative;
  overflow:hidden}
.rv-meter i{position:absolute; top:0; bottom:0; left:0; width:0; border-radius:999px;
  background:var(--ok)}
.rv-meter.is-warn i{background:var(--warn)}
.rv-meter.is-bad i{background:var(--bad)}
.rv-meter.cpu i{background:var(--info)}
.rv-meter.ram i{background:var(--warn)}
.rv-meter .tick{position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.4)}
.rv-slots{display:flex; gap:4px; margin:10px 0 4px}
.rv-slots i{flex:1; min-width:0; height:22px; border-radius:5px; display:grid; place-items:center;
  font-size:10px; font-style:normal; color:var(--ok); background:rgba(127,224,127,.18);
  box-shadow:inset 0 0 0 1px rgba(127,224,127,.45)}
.rv-slots i.none{background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--adline);
  color:var(--tx3)}
.rv-netrow{display:flex; gap:16px; margin:10px 0 4px}
.rv-netrow > div{flex:1; min-width:0}
.rv-netrow small{display:block; font-size:11.5px; color:var(--tx3)}
.rv-netrow b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:20px;
  font-weight:600}
.rv-netrow b em{font-style:normal; font-size:11.5px; color:var(--tx3); font-weight:500}

/* ── กราฟ 24 ชม. (SVG) — ช่วงที่ไม่มีข้อมูลเส้นขาด ไม่ลากหลอก ── */
.rv-charts{display:grid; gap:12px; margin-bottom:12px; grid-template-columns:repeat(3,minmax(0,1fr))}
.rv-charts:empty{display:none}
.rv-ch{display:block; width:100%; height:auto}
.rv-ch text{fill:var(--tx3); font-size:9.5px; font-family:"IBM Plex Mono",monospace}
.rv-ch .gl{stroke:rgba(255,255,255,.06)}
.rv-ch .thl{stroke:var(--bad); stroke-dasharray:4 4; opacity:.75}
.rv-ch text.tht{fill:var(--bad); font-family:inherit}
.rv-ch .c-cpu{stroke:var(--info); fill:var(--info)}
.rv-ch .c-gpu{stroke:var(--gold); fill:var(--gold)}
.rv-ch .c-ram{stroke:var(--warn); fill:var(--warn)}
.rv-ch .c-emu{stroke:var(--ember-lit); fill:var(--ember-lit)}
.rv-ch path.ln{fill:none; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
.rv-ch path.ar{stroke:none; opacity:.11}
.rv-ch circle.dt{stroke:none}
.rv-ch circle.mk{fill:none; stroke:var(--gold); stroke-width:1.5}
.rv-ch text.mkt{fill:var(--gold); font-family:inherit}
.rv-chleg{display:flex; gap:4px 12px; flex-wrap:wrap; font-size:11.5px; color:var(--tx3); margin-top:6px}
.rv-chleg i{display:inline-block; width:10px; height:3px; border-radius:2px; vertical-align:3px;
  margin-right:5px}
.rv-chleg i.c-cpu{background:var(--info)}
.rv-chleg i.c-gpu{background:var(--gold)}
.rv-chleg i.c-ram{background:var(--warn)}
.rv-chleg i.c-emu{background:var(--ember-lit)}
.rv-chleg i.c-th{background:var(--bad)}
.rv-chnote{font-size:12px; color:var(--tx2); margin:6px 0 0; line-height:1.5}
.rv-chempty{display:grid; place-items:center; aspect-ratio:360/150; padding:12px; text-align:center;
  border:1px dashed var(--adline); border-radius:10px; color:var(--tx3); font-size:12.5px}
.rv-sensors{display:flex; gap:6px 12px; flex-wrap:wrap; align-items:center; margin:0;
  padding:10px 14px; border-radius:12px; border:1px solid var(--adline); background:var(--adsurf);
  font-size:12.5px; color:var(--tx2)}
.rv-sensors:empty{display:none}
.rv-sensors b{color:var(--tx); font-weight:600}
.rv-sensors .na{color:var(--tx3)}

/* ── ระบบสังเกตเห็น ── */
.rv-insights{display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr))}
.rv-ins{display:flex; gap:12px; padding:14px; border-radius:14px; background:var(--adsurf);
  border:1px solid var(--adline); position:relative; overflow:hidden; min-width:0}
.rv-ins::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--info)}
.rv-ins.is-ok::before{background:var(--ok)}
.rv-ins.is-warn::before{background:var(--warn)}
.rv-ins.is-bad::before{background:var(--bad)}
.rv-ins.is-money::before{background:var(--gold)}
.rv-ins .ic{flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-size:20px; line-height:1; background:var(--glass-2)}
.rv-ins .tx{flex:1; min-width:0}
.rv-ins p{margin:0; font-size:13.5px; line-height:1.5; overflow-wrap:anywhere}
.rv-ins small{display:block; color:var(--tx3); font-size:12px; margin-top:3px; line-height:1.45}
.rv-ins .acts{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.rv-ins .src{font-size:10.5px; color:var(--tx3); margin-left:6px; white-space:nowrap}
.rv-ins.calm{grid-column:1 / -1}

/* ── ธุรกิจ ── */
.rv-bizgrid{display:grid; gap:12px; align-items:start; margin-bottom:18px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.rv-kpis{display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr))}
.rv-kpis .rv-kpi.wide{grid-column:1 / -1}
.rv-kpi .val.gold{color:var(--gold)}
.rv-kpi .sub.up{color:var(--ok)}
.rv-kpi .sub.down{color:var(--bad)}
.rv-rev{display:block; width:100%; height:auto}
.rv-rev text{fill:var(--tx3); font-size:10px}
.rv-rev text.num{font-family:"IBM Plex Mono",monospace}
.rv-rev text.now{fill:var(--gold)}
.rv-rev .gl{stroke:rgba(255,255,255,.06)}
.rv-rev rect{fill:rgba(255,194,77,.32)}
.rv-rev rect.now{fill:var(--gold)}
.rv-rev .avg{stroke:var(--tx2); stroke-dasharray:4 4; opacity:.6}
.rv-rev text.avgt{fill:var(--tx2)}

/* ── การ์ดจอ: ภาระรายจอ · บอททำอะไร · เวลาที่เหลือ ── */
.rv-scr.is-warn{border-color:rgba(224,168,119,.4)}
.rv-bot{font-size:12.5px; color:var(--tx2); margin:0; padding:7px 10px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid var(--adline); line-height:1.45}
.rv-load{display:grid; gap:6px; grid-template-columns:repeat(3,minmax(0,1fr))}
.rv-load div{font-size:10.5px; color:var(--tx3); line-height:1.3; min-width:0}
.rv-load b{display:block; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--tx); font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.rv-load b.na{color:var(--tx3); font-weight:500}
.rv-load b.warn{color:var(--warn)}
.rv-prog.is-left{height:5px}
.rv-prog.is-left i{background:var(--ok)}
.rv-prog.is-left.warn i{background:var(--warn)}
.rv-viewseg{display:inline-flex; border:1px solid var(--adline); border-radius:999px; padding:3px; flex:none}
.rv-viewseg button{min-height:32px; padding:0 13px; border-radius:999px; border:0; background:none;
  color:var(--tx3); font-size:12.5px; cursor:pointer; white-space:nowrap}
.rv-viewseg button[aria-pressed="true"]{background:var(--glass-2); color:var(--tx); font-weight:600}
.rv-rack{display:grid; gap:10px; grid-template-columns:repeat(6,minmax(0,1fr))}
.rv-slot{border-radius:12px; border:1px solid var(--adline); background:linear-gradient(180deg,#14141d,#0e0e15);
  padding:10px; display:grid; gap:6px; align-content:start; position:relative; min-width:0;
  text-align:left; color:var(--tx); font:inherit; cursor:pointer}
.rv-slot:hover{border-color:var(--ember-lit)}
.rv-slot.is-bad{border-color:rgba(255,107,90,.45)}
.rv-slot.is-warn{border-color:rgba(224,168,119,.4)}
.rv-slot b{font-size:14px}
.rv-slot small{font-size:11px; color:var(--tx3); line-height:1.35; min-height:30px; overflow-wrap:anywhere;
  white-space:pre-line}
.rv-slot .mini{display:grid; gap:3px}
.rv-slot .mini span{display:flex; align-items:center; gap:6px; font-size:10px; color:var(--tx3)}
.rv-slot .mini .rv-meter{flex:1; height:5px}
.rv-slot.is-none{border-style:dashed; background:transparent; place-items:center; align-content:center;
  text-align:center; color:var(--tx3); font-size:12px; min-height:118px; cursor:default}
.rv-slot.is-none:hover{border-color:var(--adline)}
.rv-led{position:absolute; top:10px; right:10px; width:9px; height:9px; border-radius:50%;
  background:var(--tx3)}
.rv-slot.is-use .rv-led{background:var(--ok); box-shadow:0 0 10px var(--ok)}
.rv-slot.is-work .rv-led{background:var(--info); box-shadow:0 0 10px var(--info)}
.rv-slot.is-bad .rv-led{background:var(--bad); box-shadow:0 0 10px var(--bad)}
.rv-slot.is-warn .rv-led{background:var(--warn); box-shadow:0 0 10px var(--warn)}
.rv-rackfoot{display:flex; gap:6px 14px; flex-wrap:wrap; font-size:12px; color:var(--tx3); margin-top:12px}
.rv-rackfoot span{display:inline-flex; align-items:center; gap:6px}
.rv-rackfoot i{width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--tx3)}
.rv-rackfoot i.is-use{background:var(--ok)}
.rv-rackfoot i.is-warn{background:var(--warn)}
.rv-rackfoot i.is-bad{background:var(--bad)}
.rv-rackfoot i.is-work{background:var(--info)}

/* ── เครื่องมือ: ตรวจสุขภาพ (ซ้าย) · ปิดรับลูกค้า + ส่งออก (ขวา) ── */
.rv-dgrid{display:grid; gap:14px; align-items:start; margin-bottom:14px;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.rv-dgrid > .rv-col{gap:14px}
.rv-hverdict{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 14px;
  border-radius:12px; border:1px solid var(--adline); background:rgba(255,255,255,.03)}
.rv-hverdict .ic{font-size:26px; line-height:1}
.rv-hverdict .vt{flex:1 1 220px; min-width:0}
.rv-hverdict .vt b{display:block; font-size:17px; font-weight:600; line-height:1.4}
.rv-hverdict .vt span{font-size:12px; color:var(--tx3)}
.rv-hverdict .sum{display:flex; gap:6px; flex-wrap:wrap}
.rv-hverdict.is-ok{border-color:rgba(127,224,127,.35); background:rgba(127,224,127,.06)}
.rv-hverdict.is-warn{border-color:rgba(224,168,119,.38); background:rgba(224,168,119,.06)}
.rv-hverdict.is-bad{border-color:rgba(255,107,90,.42); background:rgba(255,107,90,.07)}
.rv-maint .rv-srow{padding:0; border:0}
.rv-hc{gap:10px}

/* ── ความกว้างจอ ── */
@media (min-width:1500px){
  .rv-screens{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1500px){
  .rv-grid2.rv-ls{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1300px){
  .rv-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rv-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-gauges, .rv-insights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-rack{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rv-verdict{grid-template-columns:auto minmax(0,1fr)}
  .rv-vstats{grid-column:1 / -1; grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1200px){
  .rv-grid2, .rv-set, .rv-howgrid, .rv-dgrid, .rv-bizgrid, .rv-fcgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){
  .rv-screens{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .rv-charts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .rv-tools{grid-template-columns:minmax(0,1fr)}
  .rv-cgrp ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  /* 📱 แถบตัวเลขกระชับ — แท็บต้องโผล่ในจอแรกเร็วขึ้น (เดิมแถบนี้กินเกือบทั้งจอ 375 px) */
  .rv-strip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:12px}
  .rv-host{grid-column:1 / -1}
  .rv-kpi{padding:8px 10px}
  .rv-kpi .val{font-size:19px}
  .rv-kpi .sub{font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .rv-bar{margin-top:5px}
  .rv-cells{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rv-limit{width:100%; justify-content:space-between}
  .rv-screens{grid-template-columns:minmax(0,1fr)}
  .rv-tab{padding:0 12px}
  /* 📱 สุขภาพคอมบอท 390 px — หน้าปัด 2 คอลัมน์ · แถบ/ข้อสังเกต/ผลตรวจ คอลัมน์เดียว */
  .rv-verdict{grid-template-columns:minmax(0,1fr); gap:12px; padding:16px}
  .rv-vring{width:52px; height:52px; font-size:24px}
  .rv-vtitle{font-size:18px}
  .rv-vstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-gauges{gap:8px}
  .rv-gauge{padding:11px 10px}
  .rv-meters, .rv-insights{grid-template-columns:minmax(0,1fr)}
  .rv-gv, .rv-gbig{font-size:21px}
  .rv-gnote{font-size:11.5px}
  .rv-rack{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .rv-viewseg{order:-1}
  .rv-sech h2{font-size:16px}
  .rv-fc{padding:14px}
  .rv-fcbig b{font-size:36px}
  .rv-fcrow{grid-template-columns:minmax(0,1fr) auto; padding:7px 8px}
  .rv-fcrow .rv-fcbar, .rv-fcrow > .rv-fctag{grid-column:1 / -1; grid-row:2}
  .rv-fcrow .note{grid-row:3}
}
@media (pointer:coarse){
  .rv-stepper button{width:44px; height:44px}
  .rv-seg button{min-height:44px}
  .rv-switch{width:52px; height:30px}
  .rv-switch::after{width:24px; height:24px}
  .rv-switch[aria-checked="true"]::after{transform:translateX(22px)}
}
@media (prefers-reduced-motion:reduce){
  .rv-prog.spin i{animation:none; width:100%; opacity:.4}
  .rv-bar i, .rv-prog i, .rv-switch, .rv-switch::after{transition:none}
}

/* ── เครื่องของฉัน (เช่าจอ) ────────────────────────────────────────────── */
/* ⛔⛤ รื้อทั้งหน้า 2026-09-24: ของเดิมเป็นปุ่มกลมเรียงกอง ไม่มีชื่อกำกับ
     เจ้าของบอกตรง ๆ ว่า "ตรงกลม ๆ ดูไม่ออกเลยว่ามันเป็นอะไร"
     ⇒ ปุ่มทุกตัวต้องมี **ไอคอน + คำไทย** · งานคนละชนิดต้องอยู่คนละกล่อง
     ⇒ จอกับแผงคุมอยู่คนละคอลัมน์บนจอกว้าง จะได้ไม่ต้องเลื่อนหาปุ่ม */

/* ── 🛰 ดาดฟ้าคุมจอ (รื้อผัง 2026-09-30 · เจ้าของอนุมัติแบบ docs/mockups/rental-deck/) ──
   ผัง: แถบบน = ภาพรวมทุกจอ + สลับจอ · ซ้าย = จอสด · ขวา = แผงแท็บ
   มือถือ ≤760px: ปุ่มเริ่ม/หยุดติดแถบล่าง · แท็บติดบนตอนเลื่อน · ปุ่ม ≥44px · ช่องกรอก 16px
   ⛔ หน้านี้ตั้ง viewport-fit=cover (build_webstore) ⇒ ขอบซ้าย/ขวาต้องกันรอยบากเอง */
.rent-wrap{padding-bottom:40px}
.rent-card{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px}
.rent-card h2{margin:0; font-size:18px}
main[data-page="rental"] .wrap{padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right))}
@media(min-width:900px){
  main[data-page="rental"] .wrap{padding-left:max(32px, env(safe-area-inset-left));
    padding-right:max(32px, env(safe-area-inset-right))}
}
.rsp{flex:1}
/* ⛔ viewport-fit=cover เปิดเฉพาะหน้านี้ ⇒ ส่วนกลางของร้านที่ติดขอบซ้าย/ขวาต้องกันรอยบาก
     เองในหน้านี้ (หน้าอื่นไม่ได้เปิด cover จึงไม่ต้อง) · รอยบากด้านข้างมีแค่มือถือแนวนอน
     ⇒ จำกัดไว้ที่แนวนอนเตี้ย ไม่งั้นไปลดระยะขอบหัวเว็บบนจอคอม (32px → 16px) */
@media (orientation:landscape) and (max-height:500px){
  body:has(main[data-page="rental"]) .top > .wrap,
  body:has(main[data-page="rental"]) .foot > .wrap{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right))}
  body:has(main[data-page="rental"]) .bottomnav{
    padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
  body:has(main[data-page="rental"]) .hchat{right:max(12px, env(safe-area-inset-right))}
  body:has(main[data-page="rental"]) .totop,
  body:has(main[data-page="rental"]) #toasts{right:max(18px, env(safe-area-inset-right))}
}

/* ── แถบภาพรวมทุกจอ ── */
.rfleet{display:grid; gap:10px; margin:6px 0 16px;
  grid-template-columns:repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr)}
.rfleet[hidden]{display:none}
.rfleet > *{min-width:0}
.rkpi{position:relative; overflow:hidden; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--glass)}
.rkpi::after{content:""; position:absolute; right:-18px; bottom:-40px; width:90px;
  height:90px; border-radius:50%; background:radial-gradient(rgba(255,45,70,.12), transparent 70%);
  pointer-events:none}
.rkpi small{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tx3)}
.rkpi svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rkpi b{display:block; margin-top:2px; font:700 24px/1.3 "Space Grotesk","Anuphan",system-ui,sans-serif;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rkpi b em{margin-inline-start:5px; font-style:normal; font-size:13px; font-weight:500;
  color:var(--tx3)}
.rkpi.hot b{color:var(--ok)}
.rkpi[data-tone="warn"] b{color:var(--warn)}
.rkpi[data-tone="bad"] b{color:var(--bad)}
/* ตัวสลับจอ — จอเดียวก็ยังโชว์ (รู้ว่ากำลังดูจอไหน + ปุ่มเช่าเพิ่ม) */
.rscr{display:flex; align-items:center; gap:8px; padding:7px; overflow-x:auto;
  border-radius:14px; border:1px solid var(--line); background:var(--glass);
  scrollbar-width:thin}
.rscr-b{display:flex; align-items:center; gap:9px; min-height:46px; padding:6px 12px;
  border-radius:10px; border:1px solid transparent; background:transparent; color:var(--tx);
  font:inherit; white-space:nowrap; cursor:pointer; text-align:start;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.rscr-b:hover{background:var(--glass-2)}
.rscr-b[aria-pressed="true"]{background:var(--glass-2); border-color:var(--line-2)}
.rscr-t{display:flex; flex-direction:column; line-height:1.2}
.rscr-t b{font-size:14px; font-weight:600}
.rscr-t small{font-size:12px; color:var(--tx3)}
.rscr-b.add{margin-inline-start:auto; color:var(--ember-lit); border:1px dashed var(--line-2);
  font-size:13.5px}
.rscr-b.add svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
/* ไฟสถานะ — ⚠ ห้ามใช้สีอย่างเดียวเป็นตัวบอก มีข้อความกำกับข้าง ๆ เสมอ */
.rled{width:9px; height:9px; border-radius:50%; flex:none; background:var(--tx3)}
.rled[data-s="run"]{background:var(--ok); animation:rledPulse 2s infinite}
.rled[data-s="wait"]{background:var(--warn)}
.rled[data-s="idle"]{background:var(--tx3)}
@keyframes rledPulse{
  0%, 100%{box-shadow:0 0 0 3px rgba(127,224,127,.16), 0 0 10px rgba(127,224,127,.8)}
  50%{box-shadow:0 0 0 6px rgba(127,224,127,0), 0 0 5px rgba(127,224,127,.6)}
}

/* ── ดาดฟ้า: จอสดซ้าย · แผงแท็บขวา ── */
.rdeck{display:grid; gap:16px; align-items:start;
  grid-template-columns:minmax(0, 1.42fr) minmax(360px, 1fr)}
.rdeck > *{min-width:0}
/* ช่องสลับจอข้างตัวเลขรวมแคบเกินที่ <1400px (ชิป 2 จอ + เช่าเพิ่ม โดนตัด) ⇒ ลงแถวของตัวเอง */
@media(max-width:1400px){
  .rfleet{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .rscr{grid-column:1 / -1}
}
@media(max-width:1080px){
  .rdeck{grid-template-columns:minmax(0, 1fr)}
  .rfleet{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
/* แผงกระจก + ขอบไล่สี — ⚠ ห้าม overflow:hidden (แถบแท็บ sticky บนมือถือจะไม่ติด) */
.rpanel{position:relative; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02))}
.rpanel::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none;
  background:linear-gradient(140deg, rgba(255,45,70,.45), transparent 30%, transparent 70%,
    rgba(95,208,232,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude}
.rdev-live{padding:14px}

/* หัวจอ: ชื่อ · ภาพสด/fps · เวลาเช่าที่เหลือ */
.rdev-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:12px}
.rdev-name{display:flex; align-items:center; gap:9px; margin:0; font-size:18px;
  font-weight:700; letter-spacing:-.01em}
/* จุดสถานะภาพสด — สีเดียวจบ มีข้อความกำกับใน .rchip ข้าง ๆ เสมอ */
.rdev-dot{width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--tx3); box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.rdev-dot[data-s="live"]{background:var(--ok); box-shadow:0 0 0 4px rgba(127,224,127,.16)}
.rdev-dot[data-s="wait"]{background:var(--warn); box-shadow:0 0 0 4px rgba(224,168,119,.16)}
.rdev-dot[data-s="off"]{background:var(--bad); box-shadow:0 0 0 4px rgba(255,107,90,.16)}
.rchip{display:inline-flex; align-items:center; gap:6px; padding:4px 11px;
  border-radius:999px; border:1px solid var(--line); background:rgba(0,0,0,.25);
  font-size:12.5px; color:var(--tx2); white-space:nowrap}
.rchip svg{width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rchip[data-tone="ok"]{color:var(--ok); border-color:rgba(127,224,127,.28)}
.rchip[data-tone="warn"]{color:var(--warn); border-color:rgba(224,168,119,.28)}
.rchip[data-tone="bad"]{color:var(--bad); border-color:rgba(255,107,90,.3)}

/* ── เวทีจอ ── */
/* กรอบเครื่อง = จอ + แถบคุมใต้จอ · ⛔⛤ 2026-09-30 ห้ามมีอะไรลอยทับ canvas
   (ของเดิมปุ่มลอยมุมขวาบนกินการกดปุ่มในเกมตรงนั้น — เจ้าของเจอบนเว็บจริง) */
.rdev-frame{position:relative; border-radius:14px; padding:6px; background:#0b0b10;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--shadow)}
.rdev-screen{position:relative; border-radius:9px; overflow:hidden; background:#000}
/* ⚠ ห้ามตรึง aspect-ratio ที่นี่ — เฟรมที่คอมบอทส่งมาถูกครอปให้เหลือเฉพาะพื้นที่
   เกม สัดส่วนจึงไม่ใช่ 16:9 เป๊ะ · ตรึงไว้ = ภาพถูกยืดผิดส่วน (เจอจริง 2026-09-24)
   ให้ความสูงมาจากขนาดจริงของ canvas แทน (JS ตั้งตามเฟรมที่ได้)
   ⚠ touch-action:none กันเบราว์เซอร์มือถือแย่งการลากไปเลื่อนหน้า ⇒ ปัดจอได้จริง */
.rent-shot{display:block; width:100%; height:auto; background:#000;
  touch-action:none; cursor:crosshair}
/* ม่านคลุมตอนยังไม่มีภาพ — จอดำเปล่า ๆ แยกไม่ออกว่า "ยังไม่มา" หรือ "จอดับ" */
.rdev-veil{position:absolute; inset:0; display:grid; place-content:center;
  justify-items:center; gap:9px; padding:16px; text-align:center;
  background:rgba(7,7,10,.74); color:var(--tx2); font-size:13.5px}
.rdev-veil svg{width:28px; height:28px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.8}
/* จุดกระเพื่อมตรงที่แตะ — ไม่มีอะไรบอกว่ากดติดไหมจนกว่าเฟรมถัดไปจะมา */
.rdev-ping{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; border:2px solid var(--ember-lit); pointer-events:none;
  animation:rping .5s var(--ease) forwards}
@keyframes rping{from{transform:scale(.4); opacity:.9} to{transform:scale(1.5); opacity:0}}
@media (prefers-reduced-motion:reduce){ .rdev-ping{animation-duration:.01ms} }
/* กรอบมุม HUD — อยู่ที่ขอบกรอบเครื่อง ไม่ทับภาพเกมสักพิกเซล · ของตกแต่ง ห้ามรับการกด */
.rhud{position:absolute; inset:-1px; pointer-events:none}
.rhud i{position:absolute; width:18px; height:18px; border:2px solid var(--ember); opacity:.85}
.rhud i:nth-child(1){left:0; top:0; border-right:0; border-bottom:0; border-top-left-radius:14px}
.rhud i:nth-child(2){right:0; top:0; border-left:0; border-bottom:0; border-top-right-radius:14px}
.rhud i:nth-child(3){left:0; bottom:0; border-right:0; border-top:0; border-bottom-left-radius:14px}
.rhud i:nth-child(4){right:0; bottom:0; border-left:0; border-top:0; border-bottom-right-radius:14px}
/* แถบคุมใต้จอ: LIVE · fps/สถานะ · คำใบ้ · ภาพล่าสุด · เต็มจอ */
.rscr-bar{display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 2px 0 4px}
.rscr-bar .rchip{border:0; background:none; padding:0 2px; font-variant-numeric:tabular-nums}
.rscr-bar .rchip[hidden]{display:none}
/* ข้อความสถานะภาพสดยาวได้ (เหตุผลที่ต่อไม่ได้) — ห้ามดันปุ่มใต้จอล้นขอบ ⇒ ตัดท้ายด้วย … (ข้อความเต็มอยู่ใน title) */
.rscr-bar .rchip{min-width:0; flex:0 1 auto}
.rscr-bar .rchip > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.rlive-badge{display:none; align-items:center; gap:7px; flex:none; padding:4px 10px 4px 8px;
  border-radius:8px; border:1px solid rgba(255,45,70,.35); background:rgba(255,45,70,.12);
  font:700 11.5px/1 "Space Grotesk",system-ui,sans-serif; letter-spacing:.12em; color:#fff}
.rlive-badge i{width:7px; height:7px; border-radius:50%; background:var(--ember);
  animation:rlivePulse 1.6s infinite}
@keyframes rlivePulse{0%{box-shadow:0 0 0 0 rgba(255,45,70,.65)}
  70%{box-shadow:0 0 0 7px rgba(255,45,70,0)} 100%{box-shadow:0 0 0 0 rgba(255,45,70,0)}}
.rdev-frame[data-s="live"] .rlive-badge{display:inline-flex}
.ricbtn{display:inline-flex; align-items:center; gap:6px; flex:none; min-height:36px;
  padding:0 12px; border-radius:9px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:var(--tx); font:inherit; font-size:12.5px;
  white-space:nowrap; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.ricbtn:hover{border-color:var(--ember-lit); background:rgba(255,45,70,.08)}
.ricbtn:disabled{opacity:.5; cursor:default}
.ricbtn svg{width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rdev-tip{display:flex; align-items:center; gap:6px; margin:0; font-size:12px;
  color:var(--tx3); white-space:nowrap}
.rdev-tip svg{width:14px; height:14px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* กรอบแคบ — ตัดคำใบ้ก่อน แล้วปุ่มเหลือแต่ไอคอน (มี aria-label + title) ไม่ให้เบียดจนล้น */
.rdev-frame{container:rframe / inline-size}
@container rframe (max-width:600px){ .rdev-tip{display:none} }
@container rframe (max-width:420px){
  .ricbtn{width:40px; padding:0; justify-content:center}
  .ricbtn span{display:none}
}
/* เต็มจอ — Fullscreen API และตัวถอยของ iPhone (.rfs = กรอบเต็มหน้าต่าง)
   ⚠ ไม่มี object-fit (ขอบดำรอบภาพจะถูกนับเป็นพื้นที่จอ = แตะเพี้ยน)
   ⚠ ขยายเต็มด้านที่ชนก่อน (กว้างหรือสูง) — ภาพเล็กต้องขยายขึ้นด้วย ไม่ใช่ค้างขนาดเดิม
     สัดส่วนเฟรมไม่ใช่ 16:9 เป๊ะ ⇒ ยืดได้ไม่กี่พิกเซล ซึ่งไม่กระทบการแตะ
     (atScreen คิดแกนกว้าง/สูงแยกกันจากกรอบที่เห็นจริง) */
/* ⚠ แยกกฎ :fullscreen กับ .rfs คนละก้อน — เบราว์เซอร์ที่ไม่รู้จัก :fullscreen (Safari
     ก่อน 16.4) ทิ้ง "ทั้งก้อน" รวมกฎของ .rfs ที่ iPhone ต้องใช้ไปด้วย
   ⚠ 100% ไม่ใช่ 100vw — vw รวมแถบเลื่อนของหน้า ⇒ ภาพกว้างเกินกรอบ 15px ขอบขวาโดนตัด
   ⚠ dvh ไม่ใช่ vh — vh ของ iOS = ความสูงตอนแถบเครื่องมือซ่อน ⇒ ภาพสูงเกินกรอบ */
/* ⚠ เต็มจอทั้งกรอบ — ภาพใช้ความสูงที่เหลือหลังหักแถบคุม (--rbar) ไม่ลอยทับกัน */
.rdev-frame:fullscreen{--rbar:60px; display:flex; flex-direction:column; padding:0;
  border-radius:0; border:0; background:#000}
.rdev-frame:fullscreen .rhud{display:none}
.rdev-frame:fullscreen .rdev-screen{flex:1; min-height:0; display:grid; place-items:center;
  border-radius:0}
.rdev-frame:fullscreen .rent-shot{width:min(100%, calc((100vh - var(--rbar)) * 16 / 9));
  width:min(100%, calc((100dvh - var(--rbar)) * 16 / 9)); height:auto; max-height:100%}
.rdev-frame:fullscreen .rscr-bar{padding:8px 14px; background:#0b0b10;
  border-top:1px solid rgba(255,255,255,.06)}
.rdev-frame.rfs{--rbar:60px; position:fixed; inset:0; z-index:140; display:flex;
  flex-direction:column; border-radius:0; border:0; background:#000;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.rdev-frame.rfs .rhud{display:none}
.rdev-frame.rfs .rdev-screen{flex:1; min-height:0; display:grid; place-items:center;
  border-radius:0}
.rdev-frame.rfs .rent-shot{width:min(100%, calc((100vh - var(--rbar)) * 16 / 9));
  width:min(100%, calc((100dvh - var(--rbar) - env(safe-area-inset-top)
    - env(safe-area-inset-bottom)) * 16 / 9)); height:auto; max-height:100%}
.rdev-frame.rfs .rscr-bar{padding:8px 14px max(8px, env(safe-area-inset-bottom));
  background:#0b0b10; border-top:1px solid rgba(255,255,255,.06)}
/* ⛔⛤ .wrap ของหน้ามี z-index:1 (= กล่องซ้อนชั้นของตัวเอง) ⇒ .rfs z 140 ข้างในยังอยู่
     ใต้หัวเว็บ/เมนูล่าง/แถบล่าง — แตะปุ่มออกจากเต็มจอไม่โดน (iPhone ไม่มีปุ่ม Esc)
   ⇒ ตอนเต็มหน้าต่าง ยกทั้ง .wrap ขึ้นเหนือทุกอย่าง + ล็อกการเลื่อนหน้าข้างหลัง */
main[data-page="rental"] .wrap:has(.rdev-frame.rfs){z-index:150}
body:has(.rdev-frame.rfs){overflow:hidden}

/* ── 🤖 สถานะบอทบนการ์ด ── */
/* ⛔⛤ 2026-09-25: ของเดิมไม่มีอะไรบอกเลยว่าบอทวิ่งอยู่หรือตายไปแล้ว
   ผู้เช่ากด "เริ่มบอท" ได้แค่ toast แล้วเงียบ ⇒ นั่งรอจอที่ไม่มีอะไรเกิดขึ้น
   ⚠ บรรทัดเหตุผลมาจาก log ของบอท ยาวไม่จำกัด ⇒ ต้องตัดบรรทัดได้ ห้ามดันการ์ดแตก */
.rbot-state{display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:0 0 10px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--glass);
  font-size:12.5px; color:var(--tx2); line-height:1.45}
.rbot-state svg{width:15px; height:15px; flex:none; fill:none;
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round;
  stroke-linejoin:round}
.rbot-state[data-s="run"]{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 38%, var(--line))}
.rbot-state[data-s="bad"]{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 38%, var(--line))}
.rbot-state[data-s="idle"], .rbot-state[data-s="off"]{color:var(--tx3)}
/* ⚠ min-width:0 บนลูกของ flex — ไม่ใส่ = ข้อความยาวดันการ์ดจนจอเลื่อนแนวนอน */
.rbot-why{flex:1 1 100%; min-width:0; color:var(--tx3); font-size:11.5px;
  overflow-wrap:anywhere}

/* ── 📜 บันทึกสดของบอทบนการ์ด ── */
/* ⛔⛤ เจ้าของขอเอง 2026-09-25: ป้ายเขียว/แดงบอกได้แค่ "เริ่มได้ไหม"
   บอกไม่ได้ว่าบอทติดอยู่ตรงไหนตอนยืนนิ่ง ⇒ ต้องเห็นบรรทัดที่บอทพิมพ์จริง
   ⚠ ห้ามใช้ฟอนต์ monospace — บรรทัดเป็นภาษาไทย ฟอนต์ mono ส่วนใหญ่ไม่มีสระไทย
     แล้วจะกลายเป็นสี่เหลี่ยมเปล่า (บทเรียนเดิมของหน้านี้)
   ⚠ ความสูงต้องคงที่ ไม่งั้นการ์ดยืด-หดทุกครั้งที่บอทพิมพ์บรรทัดใหม่ */
.rlog{max-height:220px; overflow-y:auto; overscroll-behavior:contain;
  padding:8px 10px; border-radius:10px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  font-size:11.5px; line-height:1.5; color:var(--tx2)}
.rlog-line{padding:1px 0; overflow-wrap:anywhere; white-space:pre-wrap}
.rlog-line + .rlog-line{border-top:1px solid color-mix(in srgb, var(--line) 45%, transparent)}
.rlog-dim{color:var(--tx3)}
/* ⏳ กำลังเริ่ม — ยังไม่ยืนยันว่าเล่นจริง ห้ามใช้สีเดียวกับ "ทำงานอยู่" */
.rbot-state[data-s="wait"]{color:var(--warn);
  border-color:color-mix(in srgb, var(--warn) 38%, var(--line))}

/* ── แถวปุ่มของแอนดรอยด์ 7 ปุ่ม + "พิมพ์" ── */
/* ⛔ ตัวอักษรพิเศษ (⌂ ▤ ⏎ ⌫) ใช้เป็นหน้าปุ่มไม่ได้ — ฟอนต์ไทยไม่มีครบ
   เบราว์เซอร์วาดเป็นสี่เหลี่ยมเปล่า ⇒ ไอคอนจากชุดของเราเอง + คำไทยใต้ไอคอน */
.rdev-keys{display:grid; gap:6px; margin-top:10px;
  grid-template-columns:repeat(8, minmax(0, 1fr))}
.rkey{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:52px; padding:7px 2px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--tx2); font:inherit; font-size:12px;
  line-height:1.2; cursor:pointer; text-align:center;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.rkey svg{width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.rkey:hover{color:var(--tx); border-color:var(--line-2); background:var(--glass-2);
  transform:translateY(-1px)}
.rkey:active{transform:translateY(0)}
.rkey-type{color:var(--ember-lit); border-color:var(--line-2)}
.rkey-type.on{background:rgba(255,45,70,.12)}

/* ปุ่มสั่งงาน — ไอคอนซ้าย คำไทยขวา สูงเท่ากันทุกใบ */
.raction{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; padding:9px 12px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--tx); font:inherit; font-size:14px;
  font-weight:600; cursor:pointer; text-align:center; text-decoration:none;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease)}
.raction svg{width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.raction:hover:not(:disabled){border-color:var(--line-2); background:var(--glass-2)}
.raction:disabled{opacity:.5; cursor:default}
/* ปุ่มหลักมีได้ใบเดียวต่อกลุ่ม — ไม่งั้นไม่มีอะไรเด่นเลยเท่ากับไม่มีลำดับ */
.raction.go{background:linear-gradient(180deg, #d61a31, var(--ember-btn)); border-color:transparent;
  color:#fff; box-shadow:0 6px 24px rgba(196,21,43,.35)}
.raction.go:hover:not(:disabled){filter:brightness(1.12)}
.raction.danger{color:var(--bad)}
.raction.danger:hover:not(:disabled){border-color:rgba(255,107,90,.42)}
/* ปุ่มเริ่ม/หยุดตอนบอทวิ่ง — โทนหยุด (แดงอ่อน) ไม่ใช่ปุ่มหลักสีเต็ม */
.raction.stopb{background:rgba(255,107,90,.08); border-color:rgba(255,107,90,.4); color:#ffd9d4}

/* ช่องพิมพ์ข้อความเข้าจอ (ซ่อนจนกด "พิมพ์") */
.rtype-box{margin-top:8px}
.rtype-box[hidden]{display:none}
.rtype{display:flex; gap:8px}
.rtype .input{flex:1; min-width:0; min-height:44px; font-size:16px}
.rtype .raction{flex:none; padding-inline:16px}
.rnote{margin:8px 0 0; font-size:12px; color:var(--tx3); line-height:1.5}
.rnote:empty{display:none}

/* ── แผงแท็บขวา ── */
.rside{display:flex; flex-direction:column; scroll-margin-top:var(--rent-top, 0px)}
.rtabs{display:flex; gap:2px; padding:6px; border-bottom:1px solid var(--line);
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none}
.rtab{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:62px; min-height:52px; padding:8px 6px; border:0; border-radius:10px;
  background:transparent; color:var(--tx3); font:inherit; font-size:12.5px; cursor:pointer;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.rtab svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.rtab:hover{color:var(--tx)}
.rtab[aria-selected="true"]{color:var(--tx); background:var(--glass-2)}
/* ⚠ เส้นใต้ต้องอยู่ในกรอบของแถบ (แถบเลื่อนแนวนอนได้ = ตัดของที่ล้นกรอบทิ้ง) */
.rtab[aria-selected="true"]::after{content:""; position:absolute; left:28%; right:28%; bottom:-5px;
  height:2px; border-radius:2px; background:var(--ember); box-shadow:0 0 10px var(--ember)}
/* ⚠ แผงเป็น container — ฟอร์มตั้งค่าคิดจำนวนคอลัมน์จากความกว้าง "แผง" ไม่ใช่ความกว้างจอ
   (แผงข้างจอบนคอมแคบกว่าครึ่งจอ ใช้ media query = 5 คอลัมน์ยัดในแผง 560px) */
.rpane{padding:16px; container-type:inline-size; container-name:rpane;
  animation:rpaneIn .22s var(--ease)}
.rpane[hidden]{display:none}
@keyframes rpaneIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.rsechead{display:flex; align-items:center; gap:8px; margin:16px 0 8px; font-size:13px;
  font-weight:600; color:var(--tx2)}
.rpane > .rsechead:first-child{margin-top:0}
.rlink{display:inline-flex; align-items:center; gap:3px; min-height:32px; padding:0 4px;
  border:0; background:none; color:var(--ember-lit); font:inherit; font-size:12.5px; cursor:pointer}
.rlink svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transform:rotate(-90deg)}

/* ── แท็บบอท ── */
.rstatus{display:flex; gap:16px; align-items:center}
.rstatus-t{flex:1; min-width:0}
.rstatus-t .rbot-state{margin:0}
/* วงแหวน — ⚠ ไม่มีข้อมูล "ความคืบหน้าตาปัจจุบัน" จริง ⇒ หมุนวนตอนบอทเล่น ไม่ใช่ % ปลอม */
.rring{position:relative; width:96px; height:96px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.07)}
.rring::before{content:""; position:absolute; inset:0; border-radius:50%; opacity:0;
  background:conic-gradient(var(--ok) 0 100deg, transparent 100deg)}
.rring::after{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface)}
.rring[data-run="1"]::before{opacity:1; animation:rringSpin 2.4s linear infinite}
.rring[data-run="wait"]::before{opacity:1; animation:rringSpin 1.4s linear infinite;
  background:conic-gradient(var(--warn) 0 70deg, transparent 70deg)}
/* เปิดอยู่แต่ไม่ยืนยันว่าเล่น — วงนิ่งสีแดง (หมุน = ดูเหมือนกำลังทำงานอยู่) */
.rring[data-run="bad"]{background:rgba(255,107,90,.45)}
@keyframes rringSpin{to{transform:rotate(360deg)}}
.rring > span{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  line-height:1.1; text-align:center}
.rring b{font:700 22px/1.1 "Space Grotesk","Anuphan",system-ui,sans-serif}
.rring small{font-size:10.5px; color:var(--tx3)}
.rst-sub{margin:6px 0 0; font-size:12.5px; color:var(--tx3)}
.rst-sub:empty{display:none}
.rbtnrow{display:grid; grid-template-columns:1.6fr 1fr; gap:8px; margin:14px 0}
.rbtnrow.two{grid-template-columns:1fr 1fr}
.rminis{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px}
.rmini{min-width:0; padding:9px 10px; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.25)}
.rmini small{display:block; font-size:11.5px; color:var(--tx3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.rmini b{display:block; font:700 18px/1.3 "Space Grotesk","Anuphan",system-ui,sans-serif;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rmini.gold b{color:var(--gold)}
/* 20 ตาล่าสุด — ความสูง = ความยาวตา (คิดสดใน JS ผ่าน CSSOM) */
.rspark{display:flex; align-items:flex-end; gap:3px; height:48px; margin:4px 0; padding:0 2px}
.rspark i{flex:1; min-width:0; border-radius:3px 3px 0 0; opacity:.85;
  background:linear-gradient(var(--ember-lit), rgba(255,45,70,.25))}
.rspark i.gold{background:linear-gradient(var(--gold), rgba(255,194,77,.25))}
.rspark-none{align-self:center; margin:auto; font-size:12.5px; color:var(--tx3)}
.rcap{display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--tx3)}
/* บันทึกสดในแท็บบอท — สีแยกชนิดบรรทัด (แดง = ปัญหา · ทอง = ได้ของ · เขียว = สำเร็จ) */
.rpane .rlog{max-height:190px}
.rlog-line.ok{color:var(--ok)}
.rlog-line.gold{color:var(--gold)}
.rlog-line.bad{color:var(--bad)}

/* ── แท็บสถิติ ── */
.rpills{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.rpill{min-height:38px; padding:6px 14px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--tx2); font:inherit; font-size:13px; cursor:pointer}
.rpill[aria-pressed="true"]{color:var(--tx); border-color:var(--ember); background:rgba(255,45,70,.08)}
.rbars{display:flex; align-items:flex-end; gap:4px; height:110px; margin-top:4px;
  border-bottom:1px solid var(--line)}
.rbars[hidden], .rsechead[hidden]{display:none}
.rbars i{flex:1; min-width:0; border-radius:3px 3px 0 0;
  background:linear-gradient(var(--info), rgba(95,208,232,.2))}
.rtags{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:12px 0}
.rtag{display:flex; align-items:center; gap:8px; min-width:0; padding:7px 10px; border-radius:10px;
  border:1px solid var(--line); background:rgba(0,0,0,.25); font-size:13px}
.rtag span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rtag b{font-family:"Space Grotesk","Anuphan",system-ui,sans-serif}
.rtag-i{width:22px; height:22px; flex:none; object-fit:contain}

/* ── แท็บเครื่องมือ — ⛔ แค่ 2 อย่าง (รีเกม · ต่ออายุเช่า) เจ้าของตัดที่เหลือ ── */
.rtool{display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.025)}
.rtool + .rtool{margin-top:8px}
.rtool-ic{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,45,70,.12); color:var(--ember-lit)}
.rtool-ic.gold{background:rgba(255,194,77,.12); color:var(--gold)}
.rtool-ic svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.rtool-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.rtool-t b{font-size:14px}
.rtool-t small{font-size:12px; color:var(--tx3); line-height:1.45}
.rtool .raction{flex:none; min-width:112px}

/* ── แท็บช่วยเหลือ ── */
.rhealth{display:grid; gap:6px; margin-bottom:12px}
.rhl{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  border:1px solid var(--line); background:rgba(0,0,0,.25); font-size:13.5px}
.rhl svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.rhl[data-tone="ok"] svg{color:var(--ok)}
.rhl[data-tone="warn"] svg{color:var(--warn)}
.rhl[data-tone="bad"] svg{color:var(--bad)}
.rhl[data-tone="idle"] svg{color:var(--tx3)}
.rhl small{font-size:12px; color:var(--tx3); text-align:end}
.rpane > .raction.go{width:100%}
.rfaq{margin-top:4px}
.rq{border-top:1px solid var(--line); padding:0 2px}
.rq summary{display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:46px; cursor:pointer; list-style:none; font-size:13.5px; font-weight:600}
.rq summary::-webkit-details-marker{display:none}
.rq summary svg{width:16px; height:16px; flex:none; fill:none; stroke:var(--ember-lit);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--t-fast) var(--ease)}
.rq[open] summary svg{transform:rotate(180deg)}
.rq p{margin:0 0 12px; font-size:13px; color:var(--tx2); line-height:1.55}

/* ── แผงตั้งค่าบอท (อยู่ในแท็บ) ── */
.rcfg{display:grid; gap:14px}
/* กำลังอ่านค่าใหม่ — ล็อกฟอร์มเดิมไว้จนของใหม่มา (แก้ระหว่างรอ = หายตอนวาดใหม่) */
.rcfg.rbusy{pointer-events:none; opacity:.6}
.rcfg-grp{display:grid; gap:10px}
.rcfg-grp > h4{display:flex; align-items:center; gap:8px; margin:0;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ember-lit)}
.rcfg-grp > h4 svg{width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* หนึ่งค่า = หนึ่งแถวมีกรอบ — ของเดิมเป็นตารางเปล่าจนอ่านไม่ออกว่าคำไหนคู่กับช่องไหน */
/* ⚠ ตรึงความสูงขั้นต่ำ — บางแถวมีคำอธิบายใต้ชื่อ บางแถวไม่มี ปล่อยไว้
   ความสูงจะไม่เท่ากันทั้งแถบ ตาไล่ไม่ตรง (เห็นจริงตอนพรีวิว 2026-09-24) */
/* ⚠ ต้อง wrap — ชื่อยาว + ช่องตัวเลข + หน่วย รวมกันเกินความกว้างช่องได้
   (เจอจริง: หน่วย "ครั้ง" ของ "อัปเกรดกี่ครั้ง" ล้นออกนอกกรอบ 11px) */
.rrow{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:7px 10px; min-height:54px; padding:9px 11px;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.02); font-size:13px}
/* ⚠ min-width:0 อย่างเดียวทำให้คอลัมน์ชื่อถูกบีบจนตัวอักษรไทยเรียงลงมาทีละตัว
   ("วิธี/เล่น/หลัง/เข้า/ห้อง") เมื่อตัวควบคุมข้าง ๆ กว้าง — เห็นจริงตอนพรีวิว */
.rrow-t{display:flex; flex-direction:column; gap:2px; min-width:96px;
  flex:1 1 auto}
.rrow-t b{font-weight:600; color:var(--tx); line-height:1.35}
.rrow-t span{font-size:11px; color:var(--tx3); line-height:1.4}
.rrow .input{flex:none; max-width:128px; text-align:end}
.rrow select.input{text-align:start; max-width:160px}

/* สวิตช์เปิด/ปิด — ช่องติ๊กมาตรฐานเล็กเกินกดบนมือถือ และมองไม่ออกบนพื้นดำ */
.rsw{position:relative; width:46px; height:26px; flex:none}
/* ⚠ ตัวสวิตช์สูง 26px ซึ่งเล็กกว่าที่นิ้วกดสบาย — ขยาย "พื้นที่กด" ออกนอกตัวสวิตช์
   โดยไม่เปลี่ยนหน้าตา (กดพลาดบนมือถือคือเรื่องที่เจอบ่อยที่สุดของฟอร์มแบบนี้) */
.rsw input{position:absolute; inset:-9px -8px; width:auto; height:auto; margin:0;
  opacity:0; cursor:pointer; z-index:1}
.rsw i{position:absolute; inset:0; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.08); transition:background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease); display:block}
.rsw i::after{content:""; position:absolute; top:3px; inset-inline-start:3px;
  width:18px; height:18px; border-radius:50%; background:var(--tx2);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.rsw input:checked + i{background:var(--ember-btn); border-color:transparent}
.rsw input:checked + i::after{transform:translateX(20px); background:#fff}
.rsw input:focus-visible + i{outline:2px solid var(--ember-lit); outline-offset:2px}

/* 📚 งานเสริมนอกรอบ (2026-10-02) — สวิตช์ 4 ใบแบบหน้า 🏃 งาน ในโปรแกรม (เปิดได้ทีละใบ)
   ⚠ ทั้งแถวคือ <label> — แตะตรงไหนของแถวก็สลับได้ (เป้าแตะ ≥ 52px) */
.rops{display:flex; flex-direction:column; gap:8px; min-width:0}
.rops-s{margin:0; font-size:13px; font-weight:600; color:var(--tx3)}
.rops-s[data-on="1"]{color:var(--ok)}
.rops-n{margin:2px 0 0; font-size:12px; line-height:1.5; color:var(--tx3)}
.rop{border:1px solid var(--line); border-radius:12px; background:var(--glass);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.rop[data-on="1"]{border-color:var(--ember); background:rgba(255,45,70,.10);
  box-shadow:inset 0 0 0 1px rgba(255,45,70,.25)}
.rop-h{display:flex; align-items:center; gap:11px; min-height:52px; padding:8px 12px;
  cursor:pointer}
.rop-ic{width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:rgba(255,255,255,.06); font-size:18px; line-height:1}
.rop[data-on="1"] .rop-ic{background:rgba(255,45,70,.18)}
.rop-t{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.rop-t b{font-size:14px; color:var(--tx)}
.rop-st{font-size:12px; color:var(--tx3)}
.rop[data-on="1"] .rop-st{color:var(--ok)}
.rop-more{padding:0 12px 11px 59px; font-size:12.5px; line-height:1.55; color:var(--tx2)}
.rop-more[hidden]{display:none}
.rop-more p{margin:0}
.rop-more p + p{margin-top:4px; color:var(--tx3)}
@media (max-width:480px){ .rop-more{padding-inline-start:12px} }

/* ── แถบ 5 ขั้น (เรียงเหมือนหน้ารายจอในโปรแกรม) ── */
/* ⚠ 71 ช่องกางพร้อมกันคือกำแพง — โปรแกรมแบ่ง 5 ขั้น หน้านี้ก็ต้องแบ่งเหมือนกัน */
.rsteps{display:grid; gap:8px; margin-bottom:4px;
  grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (min-width:620px){ .rsteps{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (min-width:900px){ .rsteps{grid-template-columns:repeat(5, minmax(0, 1fr))} }
.rstep{display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:7px 9px; border-radius:10px;
  border:1px solid var(--line); background:var(--glass); color:var(--tx2);
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease)}
.rstep svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rstep:hover{color:var(--tx); border-color:var(--line-2)}
.rstep[aria-selected="true"]{color:#fff; background:var(--ember-btn);
  border-color:transparent}
.rcfg-grp > h4 small{margin-inline-start:auto; font-size:11px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--tx3)}

/* แถวที่ตัวควบคุมกินเต็มความกว้าง (การ์ดเลือก · ชิป · แผนที่สวิตช์) */
.rrow.wide{flex-direction:column; align-items:stretch; gap:10px;
  grid-column:1/-1}
.rrow.wide .rrow-t{flex-direction:row; align-items:baseline; gap:8px;
  flex-wrap:wrap}
/* แถวที่เพิ่งโผล่หลังกดสวิตช์ — เฟดเข้าสั้น ๆ ไม่ให้รู้สึกว่าหน้าเปลี่ยนใหม่ */
@keyframes rrowIn{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
.rrow.just-in{animation:rrowIn .2s var(--ease)}
@media (prefers-reduced-motion:reduce){ .rrow.just-in{animation:none} }

/* ชื่ออยู่บรรทัดบน ตัวเลือกอยู่บรรทัดล่าง — ใช้กับแถบปุ่มที่ยัดข้างชื่อไม่พอ */
.rrow.stack{flex-direction:column; align-items:stretch; gap:9px}

/* 🔔 ลิงก์เว็บฮุก Discord (2026-09-30) — สถานะ · ช่องวาง · คำเตือน · ปุ่มทดสอบ/ลบ */
.rwh{display:flex; flex-direction:column; gap:8px; min-width:0}
.rwh-s{margin:0; font-size:13px; color:var(--tx3)}
.rwh-s[data-on="1"]{color:var(--ok)}
/* ⚠ .rrow .input ตรึง max-width 128px (ช่องตัวเลข) — ช่องลิงก์ต้องกว้างเต็มแถว */
.rrow .rwh .input{width:100%; max-width:none; text-align:start;
  font-family:ui-monospace,Consolas,monospace; letter-spacing:.02em}
.rwh-tip{margin:0; font-size:12.5px; line-height:1.5; color:var(--tx3)}
.rwh-tip:empty{display:none}
.rwh-tip[data-tone="bad"]{color:var(--bad)}
.rwh-tip[data-tone="ok"]{color:var(--ok)}
.rwh-a{display:flex; flex-wrap:wrap; gap:8px}
/* ช่องลิงก์เว็บฮุกเป็นช่องข้อความ (ไม่ใช่ช่องรหัสผ่าน — กันตัวจัดการรหัสผ่านเด้ง) แต่ยังปิดตาไว้ */
.rwh .rwh-in{-webkit-text-security:disc; text-security:disc}
/* User ID ของดิส + คำเตือนเลขยาวเกิน */
.rdig-w{display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:0}
.rdig-w .rwh-tip{text-align:end; max-width:260px}
.rwh-a .raction[hidden]{display:none}
.rrow .rdig{max-width:210px; text-align:start; font-variant-numeric:tabular-nums}
.rrow[hidden]{display:none}
/* ช่องเดียวในหมวด — หัวข้อหมวดบอกไปแล้วว่าคืออะไร ไม่ต้องเขียนซ้ำ */
.rrow.bare{border:0; background:none; padding:0; min-height:0}
.rrow.bare > .rrow-t b{display:none}
.rrow.bare > .rrow-t{margin-bottom:2px}

/* ช่องตัวเลข + หน่วยต่อท้าย */
.rnum{display:flex; align-items:center; gap:7px; flex:none}
.rnum .input{max-width:92px; text-align:end}
.rnum-u{font-size:12px; color:var(--tx3); white-space:nowrap}
/* ช่องจำนวนแบบมีปุ่ม — กดทีละหนึ่งได้โดยไม่ต้องพิมพ์ (เหมือนหน้าจริงในโปรแกรม) */
.rnum.step{gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.rnum.step .input{max-width:56px; border:0; border-radius:0; background:none;
  text-align:center}
.rnum-b{width:30px; align-self:stretch; border:0; background:rgba(255,255,255,.05);
  color:var(--tx2); font:inherit; font-size:15px; line-height:1; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.rnum-b:hover{background:var(--glass-2); color:var(--tx)}
.rnum.step + .rnum-u{margin-inline-start:7px}

/* ตัวเลือกเดียว — ปุ่มเรียงติดกัน หรือการ์ดเมื่อมีคำอธิบาย */
.rpick{display:flex; flex-wrap:wrap; gap:8px}
.rpick > .rpick-b{flex:1 1 130px; min-width:0}
/* ตัวเลือกที่มีคำอธิบาย = การ์ด · ไม่มีคำอธิบาย = แถบปุ่มติดกัน (segmented) */
.rpick.cards > .rpick-b{flex:1 1 200px; max-width:400px}
/* ⛔⛤ เคยทำเป็นแถบเชื่อมขอบติดกัน — พอตัวเลือกยาวจนขึ้นบรรทัดใหม่
   กรอบจะแตกเป็นสองท่อนที่ขอบมนไม่ตรงกัน (เจ้าของแคปมาให้ดู 2026-09-24)
   ⇒ เป็นปุ่มแยกใบที่แบ่งความกว้างเท่า ๆ กัน · ขึ้นบรรทัดใหม่ก็ยังเป็นระเบียบ */
.rpick.seg{gap:6px}
.rpick.seg > .rpick-b{flex:1 1 auto; min-width:92px; padding:9px 14px;
  align-items:center; text-align:center}
.rpick-b{display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:9px 11px; border-radius:10px; border:1px solid var(--line);
  background:var(--glass); color:var(--tx2); font:inherit; font-size:13px;
  text-align:start; cursor:pointer;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease)}
.rpick-b small{font-size:11px; color:var(--tx3); line-height:1.4}
.rpick-t{font-weight:600}
.rpick-b:hover{color:var(--tx); border-color:var(--line-2)}
/* ⚠ ตัวที่เลือกอยู่ต้องต่างทั้ง **สีและเส้น** ไม่ใช่สีอย่างเดียว —
   คนตาบอดสีแยกจากพื้นหลังเข้ม ๆ ด้วยสีล้วนไม่ออก */
.rpick-b[aria-checked="true"]{color:var(--tx); border-color:var(--ember);
  background:rgba(255,45,70,.12); box-shadow:inset 0 0 0 1px rgba(255,45,70,.3)}
.rpick-b[aria-checked="true"] small{color:var(--tx2)}

/* หลายตัวเลือกพร้อมกัน */
.rchips{display:flex; flex-wrap:wrap; gap:8px}
.rchip-b{padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--glass); color:var(--tx2); font:inherit; font-size:12px;
  cursor:pointer; transition:color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.rchip-b:hover{color:var(--tx); border-color:var(--line-2)}
.rchip-b[aria-pressed="true"]{color:#fff; background:var(--ember-btn);
  border-color:transparent}

/* ── หมวดย่อยในแต่ละขั้น ── */
/* ⛔⛤ เจ้าของดูของเดิมแล้วบอกว่า "ไม่เป็นระเบียบ มองไม่ออกอะไรเป็นอะไร" —
   ทั้งขั้นเทลงตารางเดียวเรียงยาว สวิตช์คนละเรื่องนอนติดกัน ⇒ กล่องมีหัวข้อ */
.rcfg-grp > .rcfg-rows{display:flex; flex-direction:column; gap:11px}
.rsec2{border:1px solid var(--line); border-radius:12px; padding:10px 11px 11px;
  background:rgba(255,255,255,.018)}
.rsec2[hidden]{display:none}
/* แบบ B — ทั้งหมวดเป็นกล่องเดียว คั่นด้วยเส้นบาง ไม่ใช่กล่องย่อยลอย ๆ */
.rsec2.merged > .rcfg-rows{gap:0; display:block;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.02); overflow:hidden}
.rsec2.merged > .rcfg-rows > .rrow{border:0; border-radius:0; background:none;
  max-width:none; width:100%; min-height:48px}
.rsec2.merged > .rcfg-rows > .rrow + .rrow{border-top:1px solid var(--line)}
/* กล่องหมวดขยับขนาดตอนเปิด/ปิดช่อง — ให้ขอบกับพื้นเปลี่ยนแบบนุ่ม ไม่กระพริบ */
.rsec2{transition:border-color var(--t) var(--ease), background var(--t) var(--ease)}
.rsec2 > h5{display:flex; align-items:center; gap:7px; margin:0 0 8px;
  font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--tx)}
.rsec2 > h5 svg{width:16px; height:16px; flex:none; fill:none; stroke:var(--ember-lit);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* เส้นบาง ๆ ต่อจากหัวข้อไปสุดกล่อง — แยกหมวดด้วยสายตาโดยไม่ต้องเพิ่มกรอบซ้อน */
.rsec2 > h5::after{content:""; flex:1; height:1px; background:var(--line)}
/* ⛔ ห้ามใช้ grid auto-fill ที่นี่ — ดูหัวเรื่องบนสุดของบล็อกนี้ */
.rsec2 > .rcfg-rows{display:flex; flex-wrap:wrap; gap:8px}
/* ⛔⛤ กล่องต้องกว้าง "เท่าเดิมเสมอ" ไม่ว่าจะมีกี่กล่องในหมวด
   เจ้าของแจ้ง 2026-09-24: "กดเปิดมันจะหุบและเปลี่ยนหน้าต่างใหม่หมด"
   ต้นเหตุ: เพดานกว้าง 560px ⇒ ตอนปิดมีกล่องเดียวก็ยืดเป็น 560
   พอเปิดแล้วมี 3 กล่อง แต่ละกล่องหดเหลือ ~360 ⇒ ของที่อยู่ก่อนขยับหมด
   ⇒ ตรึงเพดานไว้ที่ความกว้างตอน "เต็มแถว 3 กล่อง" ⇒ เปิดเพิ่มก็ไม่มีอะไรขยับ */
.rsec2 > .rcfg-rows > .rrow{flex:1 1 258px; min-width:0; max-width:332px}
.rsec2 > .rcfg-rows > .rrow.wide{flex-basis:100%; max-width:none}

/* ป้าย "ขั้นนี้ไม่มีผลกับภารกิจที่เลือกอยู่" */
.rcfg-skip{display:flex; align-items:center; gap:9px; margin:0;
  padding:13px 14px; border-radius:12px; border:1px dashed var(--line);
  background:rgba(255,255,255,.02); color:var(--tx3); font-size:13px}
.rcfg-skip[hidden]{display:none}
.rcfg-skip svg{width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rcfg-grp > .rcfg-rows[hidden]{display:none}

/* ── การ์ดเปิด/ปิดที่มีรูปของจริงจากในเกม (Power+) ── */

.rcard{position:relative; display:flex; align-items:center; gap:9px;
  padding:8px 10px 8px 8px; border-radius:11px; border:1px solid var(--line);
  background:var(--glass); color:var(--tx2); cursor:pointer;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease)}
.rcard input{position:absolute; opacity:0; width:0; height:0}
/* รูปจากเกมเป็น PNG โปร่ง 68x66 — วางบนพื้นเข้มอ่อน ๆ ให้ขอบภาพไม่จมพื้นการ์ด */
.rcard-i{width:38px; height:38px; flex:none; border-radius:8px; object-fit:contain;
  background:rgba(0,0,0,.35); padding:3px;
  filter:saturate(.75) opacity(.72); transition:filter var(--t-fast) var(--ease)}
.rcard-t{display:flex; flex-direction:column; gap:1px; min-width:0}
.rcard-t b{font-size:13px; font-weight:600}
.rcard-t small{font-size:11px; color:var(--tx3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
/* จุดติ๊กมุมขวา — บอกสถานะโดยไม่บังรูป */
.rcard-k{position:relative; width:18px; height:18px; flex:none;
  margin-inline-start:auto; border-radius:6px; border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.rcard-k::after{content:""; position:absolute; inset-inline-start:5px; top:1px;
  width:5px; height:10px; border:2px solid #fff; border-block-start:0;
  border-inline-start:0; transform:rotate(42deg) scale(0);
  transition:transform var(--t-fast) var(--ease)}
.rcard:hover{color:var(--tx); border-color:var(--line-2)}
.rcard:hover .rcard-i{filter:none}
.rcard.on{color:var(--tx); border-color:rgba(255,45,70,.34);
  background:rgba(255,45,70,.10)}
.rcard.on .rcard-i{filter:none}
.rcard.on .rcard-k{background:var(--ember-btn); border-color:transparent}
.rcard.on .rcard-k::after{transform:rotate(42deg) scale(1)}
.rcard:focus-within{outline:2px solid var(--ember-lit); outline-offset:2px}

/* ขั้นของลูกโซ่ตู้คุกกี้ — การ์ดติ๊กเปิด/ปิดพร้อมคำอธิบาย (เหมือนหน้าจริงในโปรแกรม) */
.rstep2{display:flex;
  flex-direction:column; align-items:flex-start; gap:2px; padding:8px 10px;
  border-radius:10px; border:1px solid var(--line); background:var(--glass);
  color:var(--tx2); font:inherit; text-align:start; cursor:pointer;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease)}
.rstep2 b{font-size:12.5px; font-weight:600}
.rstep2 small{font-size:11px; color:var(--tx3); line-height:1.4}
.rstep2:hover{color:var(--tx); border-color:var(--line-2)}
.rstep2[aria-pressed="true"]{color:var(--tx); border-color:rgba(255,45,70,.34);
  background:rgba(255,45,70,.10)}
.rstep2[aria-pressed="true"] small{color:var(--tx2)}

/* แผนที่สวิตช์ (ชุดบูสต์ 11 ตัว · การ์ด Power+ 14 ใบ) */
/* ⛔⛤ flex-grow ทำให้ของแถวสุดท้าย "ยืด" จนกว้างไม่เท่าแถวบน (เจ้าของแคปมา
   2026-09-24) · grid ที่ระบุจำนวนคอลัมน์ **ตายตัว** ให้ทุกช่องเท่ากันเป๊ะทุกแถว
   ⚠ ห้ามใช้ auto-fit/auto-fill ที่นี่ — มันต้องเดาความกว้างตอนคิดความสูง
     แล้วได้ความสูงบานเป็นเท่าตัว (ดูหัวเรื่องบนสุดของบล็อกนี้) */
.rflags, .rcards, .rsteps2{display:grid; gap:8px;
  grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (min-width:620px){
  .rflags, .rcards, .rsteps2{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (min-width:900px){
  .rflags, .rcards, .rsteps2{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (min-width:1180px){
  .rflags, .rcards{grid-template-columns:repeat(5, minmax(0, 1fr))}
  .rsteps2{grid-template-columns:repeat(5, minmax(0, 1fr))}
}

.rflag{display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-radius:10px; border:1px solid var(--line); background:var(--glass);
  font-size:12px; color:var(--tx2); cursor:pointer;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease)}
.rflag input{position:absolute; opacity:0; width:0; height:0}
/* กล่องติ๊กที่วาดเอง — ของเบราว์เซอร์บนพื้นดำมองแทบไม่เห็นว่าติ๊กอยู่ไหม */
.rflag i{position:relative; width:18px; height:18px; flex:none; border-radius:6px;
  border:1px solid var(--line); background:rgba(255,255,255,.06);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.rflag i::after{content:""; position:absolute; inset-inline-start:5px; top:1px;
  width:5px; height:10px; border:2px solid #fff; border-block-start:0;
  border-inline-start:0; transform:rotate(42deg) scale(0);
  transition:transform var(--t-fast) var(--ease)}
.rflag.on{color:var(--tx); border-color:rgba(255,45,70,.32);
  background:rgba(255,45,70,.10)}
.rflag.on i{background:var(--ember-btn); border-color:transparent}
.rflag.on i::after{transform:rotate(42deg) scale(1)}
.rflag:focus-within{outline:2px solid var(--ember-lit); outline-offset:2px}

/* จอแคบ: ชื่อขึ้นบรรทัดบน ตัวควบคุมลงล่าง — บีบสองอย่างให้อยู่บรรทัดเดียว
   บนมือถือแล้วทั้งคู่แคบจนอ่านไม่ออกทั้งคู่ */
@media (max-width:560px){
  .rrow{flex-direction:column; align-items:stretch; gap:9px}
  .rrow-t{min-width:0}
  /* ⚠ ช่องตัวเลขยืดเต็มแถวได้ แต่ต้องให้ "หน่วย" อยู่ในกรอบด้วย
     (เดิม max-width:none ดันคำว่า "ครั้ง" หลุดออกนอกกรอบบนจอ 375px) */
  .rrow .input{max-width:none}
  .rdig-w{align-items:stretch}
  .rdig-w .rwh-tip{text-align:start; max-width:none}
  .rnum{width:100%}
  .rnum .input{flex:1 1 auto; max-width:none}
  .rrow:not(.wide) .rpick{justify-content:flex-start}
}

/* ── 💾 แถบบันทึกอัตโนมัติ (เจ้าของสั่ง 2026-09-30 · เลิกปุ่มบันทึก) ──
   ไฟ: ฟ้ากะพริบ = กำลังบันทึก · เขียว = เรียบร้อย · ส้ม = เครื่องไม่รับบางค่า · แดง = ไม่สำเร็จ
   ⚠ ห้ามใช้สีอย่างเดียว — มีข้อความกำกับในแถบเสมอ */
.rsave{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  padding:9px 12px; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.28)}
.rsave-led{width:9px; height:9px; border-radius:50%; flex:none; background:var(--tx3)}
.rsave[data-s="saving"] .rsave-led{background:var(--info); animation:rsaveBlink .6s infinite}
.rsave[data-s="saved"] .rsave-led{background:var(--ok)}
.rsave[data-s="warn"] .rsave-led{background:var(--warn)}
.rsave[data-s="err"] .rsave-led{background:var(--bad)}
.rsave[data-s="err"]{border-color:rgba(255,107,90,.4)}
.rsave-t{font-size:13.5px; font-weight:600}
.rsave-w{font-size:12.5px; color:var(--tx3)}
.rsave-sp{flex:1}
.rsave-m{flex:1 1 100%; font-size:12px; color:var(--warn); overflow-wrap:anywhere}
.rsave-m:empty{display:none}
@keyframes rsaveBlink{50%{opacity:.3}}
.raction.sm{min-height:36px; padding:6px 11px; font-size:12.5px; border-radius:9px}

/* ── 🔒 แผงตั้งค่าล็อกระหว่างบอททำงาน (เจ้าของสั่ง 2026-10-02) ──
   ช่องยังเห็นครบ (จาง + แก้ไม่ได้) ไม่ใช่ซ่อน · แตะช่อง = toast บอกเหตุผล (คลิกตกที่ .rrow)
   ⚠ ค้นหา/สลับขั้น/ทดสอบส่งดิส ([data-lockfree]) ยังกดได้ — เป็นการอ่าน ไม่ได้แก้ค่า */
.rlock{display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:14px; border:1px solid rgba(255,183,77,.45);
  background:linear-gradient(180deg, rgba(255,183,77,.14), rgba(255,183,77,.06))}
.rlock[hidden]{display:none}
.rlock-ic{display:grid; place-items:center; width:36px; height:36px; flex:none;
  border-radius:50%; background:rgba(255,183,77,.18); color:var(--warn)}
.rlock-ic svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.rlock-t{display:flex; flex-direction:column; gap:2px; flex:1 1 220px; min-width:0}
.rlock-t b{font-size:14px; line-height:1.45}
.rlock-nb{display:inline-block; max-width:100%}
.rlock-s{font-size:12.5px; color:var(--tx3); line-height:1.45}
.raction.rlock-go{min-height:44px; flex:none}
@media (max-width:760px){
  .raction.rlock-go{flex:1 1 100%}
}
.rlocked .rrow{opacity:.55; cursor:not-allowed; filter:saturate(.6)}
.rlocked .rrow *{pointer-events:none}
.rlocked .rrow [data-lockfree], .rlocked .rrow [data-lockfree] *{pointer-events:auto}
/* แถวที่เพิ่งบันทึก — กะพริบเขียวสั้น ๆ ให้เห็นว่าช่องไหนเข้าไปแล้วจริง */
@keyframes rrowSaved{0%{background:rgba(127,224,127,.16)} 100%{background:rgba(255,255,255,.02)}}
.rrow.saved{animation:rrowSaved 1.1s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .rrow.saved, .rsave[data-s="saving"] .rsave-led{animation:none}
}

/* ── 🔎 ค้นหาค่าตั้ง (บนสุดของแท็บตั้งค่า) ── */
.rfind{position:relative; display:block}
.rfind svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px;
  height:17px; fill:none; stroke:var(--tx3); stroke-width:1.8; stroke-linecap:round;
  stroke-linejoin:round; pointer-events:none}
.rfind .input{width:100%; min-height:44px; padding-left:38px}
.rrow.nomatch{display:none}
/* ค่าที่เครื่องไม่รับ — กรอบแดงค้างจนกว่าจะแก้ใหม่ (ชื่อช่องอยู่ในแถบบันทึกด้วย) */
.rrow.rejected{border-color:rgba(255,107,90,.55); box-shadow:inset 0 0 0 1px rgba(255,107,90,.35)}
/* แถบ 5 ขั้นในแผงข้างจอ — แถบเลื่อนแนวนอนแทนกริด 5 ช่อง (แผงแคบกว่าจอครึ่งหนึ่ง) */
/* ⚠ ขึ้นบรรทัดใหม่ได้ — เลื่อนแนวนอนแบบซ่อนแถบ = ขั้นท้าย ๆ โดนตัดโดยไม่มีอะไรบอก
     (จอคอม 1081–1330px แผงแคบกว่าความยาวแถบ 5 ขั้น) */
.rcfg .rsteps{display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:4px;
  border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.3)}
.rcfg .rstep{flex:1 0 auto; gap:4px; min-height:38px; padding:6px 10px; border:0;
  background:transparent; color:var(--tx3); white-space:nowrap}
.rcfg .rstep:hover{color:var(--tx)}
.rcfg .rstep[aria-selected="true"]{color:var(--tx); background:var(--glass-2)}
.rstep-n{font:600 12px/1 "Space Grotesk",system-ui,sans-serif; color:var(--ember-lit)}
/* ⚠ แผงเป็น container ⇒ นับคอลัมน์จากความกว้างแผง ไม่ใช่ความกว้างจอ
   (ต้องมี .rpane นำหน้าทุกตัว — ไม่งั้นกฎตามความกว้างจอด้านบนชนะ) */
.rpane .rflags, .rpane .rcards, .rpane .rsteps2{grid-template-columns:repeat(2, minmax(0, 1fr))}
@container rpane (min-width:600px){
  .rpane .rflags, .rpane .rcards, .rpane .rsteps2{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@container rpane (min-width:860px){
  .rpane .rflags, .rpane .rcards, .rpane .rsteps2{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
/* แผงแคบกว่า 2 กล่อง (จอคอม 1280) = 1 คอลัมน์เสมอ ⇒ ให้เต็มแผงได้ ไม่ต้องค้างที่ 332
   (กฎ "กว้างเท่าเดิม" ยังจริง — แถวเดียวต่อบรรทัดทุกกรณี ไม่มีอะไรขยับตอนเปิด/ปิดช่อง) */
@container rpane (max-width:559px){
  .rpane .rsec2 > .rcfg-rows > .rrow{max-width:none}
}

/* ── 📱🎮 มือถือ: แถบใต้จอ · แผ่นปุ่มแอนดรอยด์ · ชั้นจุดแตะ · โหมดเล่น (2026-10-02) ──
   ⛔⛤ ห้ามมีของกดได้ใน .rdev-screen (บทเรียน 09-30: ปุ่มลอยทับ canvas กินการแตะเกม)
     ⇒ ชั้นจุดแตะ = pointer-events:none · รางคุมโหมดเล่นอยู่ "ข้าง" ภาพในขอบดำ
   ⚠ ปุ่มโหมดเล่น/ปุ่มแอนดรอยด์ซ่อนบนคอม — ผังคอมเจ้าของอนุมัติแล้ว */
.rplay-b, .rkeys-b{display:none}
.rkeys-b{align-items:center; gap:5px; flex:none; min-height:44px; padding:0 10px;
  border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  color:var(--tx); font:inherit; font-size:13.5px; white-space:nowrap; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.rkeys-b svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rkeys-b .rkeys-chev{width:14px; height:14px; transition:transform var(--t-fast) var(--ease)}
.rkeys-b:hover, .rkeys-b.on{border-color:var(--ember-lit); background:rgba(255,45,70,.1)}
.rkeys-b.on .rkeys-chev{transform:rotate(180deg)}
/* ชั้นจุดแตะเหนือภาพ — ของตกแต่งล้วน ห้ามรับการกด */
.rdev-taps{position:absolute; inset:0; overflow:hidden; pointer-events:none}

/* แผ่นปุ่มแอนดรอยด์ — ติดล่าง เหนือเมนูร้าน · ไม่มีฉากมืด (ต้องเห็นผลบนจอเกมทันที) */
.rkeysheet{position:fixed; left:0; right:0; bottom:var(--rent-bnav, 0px); z-index:120;
  padding:10px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left));
  border:1px solid var(--line-2); border-bottom:0; border-radius:18px 18px 0 0;
  background:rgba(14,14,20,.97); backdrop-filter:blur(16px);
  box-shadow:0 -14px 40px rgba(0,0,0,.55); animation:rsheetIn .22s var(--ease)}
.rkeysheet[hidden]{display:none}
@keyframes rsheetIn{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
.rkeysheet-head{display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:15px}
.rkeysheet-head > svg{width:18px; height:18px; flex:none; fill:none; stroke:var(--ember-lit);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rkeysheet-x{display:grid; place-items:center; width:44px; height:44px; margin:-4px -8px -4px 0;
  border:0; border-radius:12px; background:transparent; color:var(--tx2); cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.rkeysheet-x:hover{background:var(--glass-2); color:var(--tx)}
.rkeysheet-x svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.rkeygrid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px}
.rkeygrid .rkey{min-height:60px; font-size:12.5px; color:var(--tx)}
html.rsheet-on .hchat:not(.open), html.rsheet-on .totop{display:none}
/* 💬 ปุ่มลอยหลบตอนจอเกมอยู่ในจอ (JS ใส่ html.rgame-vis) — มือถือ/แท็บเล็ตปุ่มลอยไปทับขอบขวา
   ของภาพเกม = กินการแตะเกม · เลื่อนลงไปแท็บแล้วโผล่กลับ · คอม (≥900) ไม่ทับภาพ ไม่แตะ */
@media(max-width:899px){
  html.rgame-vis .hchat:not(.open) .hchat-btn, html.rgame-vis .totop{display:none}
}

/* 🎮 โหมดเล่น — กรอบจอถูกย้ายไปแปะ body แล้วเต็มหน้าต่าง
   · data-rot="90"/"-90" = มือถือตั้ง (iPhone ล็อกแนวนอนไม่ได้) ⇒ หมุนทั้งเวที ให้ตะแคงเครื่องดู
     ขนาดเวทีสลับแกน (กว้าง = ความสูงจอ) · ระยะกันรอยบาก/แถบโฮมหมุนตามด้านที่ไปอยู่
   · data-rot="0" = เครื่องนอนอยู่แล้ว ⇒ เต็มหน้าต่างเฉย ๆ
   ⚠ ขนาดภาพตั้งจาก JS (rentFit) ตามช่องที่เหลือหลังหักราง — ไม่ใช้ object-fit
     (ขอบดำของ object-fit ถูกนับเป็นพื้นที่ภาพ = แตะเพี้ยน) */
.rplay-rail, .rplay-keys{display:none}
.rdev-frame.rplay{position:fixed; z-index:400; left:50%; top:50%; margin:0;
  width:100vw; height:100vh; width:100dvw; height:100dvh;
  transform:translate(-50%, -50%); display:flex; flex-direction:row; align-items:stretch;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  border:0; border-radius:0; background:#000; box-shadow:none; touch-action:none;
  overscroll-behavior:contain; animation:rplayIn .18s var(--ease)}
.rdev-frame.rplay[data-rot="90"]{width:100vh; height:100vw; width:100dvh; height:100dvw;
  transform:translate(-50%, -50%) rotate(90deg);
  padding:env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
    env(safe-area-inset-top)}
.rdev-frame.rplay[data-rot="-90"]{width:100vh; height:100vw; width:100dvh; height:100dvw;
  transform:translate(-50%, -50%) rotate(-90deg);
  padding:env(safe-area-inset-left) env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom)}
@keyframes rplayIn{from{opacity:0} to{opacity:1}}
.rdev-frame.rplay .rhud, .rdev-frame.rplay .rscr-bar{display:none}
.rdev-frame.rplay .rdev-screen{flex:1 1 0; min-width:0; min-height:0; display:grid;
  place-items:center; border-radius:0; background:#000}
.rdev-frame.rplay .rent-shot{max-width:none; max-height:none; margin:0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
/* รางคุมขวามือ (ในแกนของเวที) — ปุ่ม ≥48px · จางลงเองเมื่อไม่ใช้ แต่ยังกดได้ */
.rdev-frame.rplay .rplay-rail{display:flex; flex:none; flex-direction:column; align-items:center;
  gap:6px; width:66px; padding:8px 0; overflow-y:auto; scrollbar-width:none;
  border-left:1px solid rgba(255,255,255,.07); background:#08080c;
  transition:opacity .25s var(--ease)}
.rplay-rail.dim{opacity:.35}
.rplay-rail .rsp{flex:1}
.rrail-b, .rplay-rail .raction{position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; flex:none; width:56px; min-height:50px;
  padding:4px 2px; border-radius:12px; font:inherit; font-size:12px; font-weight:500;
  line-height:1.15; text-align:center; cursor:pointer; touch-action:manipulation}
.rrail-b{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--tx);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.rrail-b:hover, .rrail-b.on{border-color:var(--ember-lit); background:rgba(255,45,70,.14)}
.rrail-b[hidden]{display:none}
.rrail-b svg, .rplay-rail .raction svg{width:20px; height:20px; flex:none; fill:none;
  stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rplay-rail .raction{box-shadow:none}
.rrail-st{display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0;
  font-size:11px; color:var(--tx2); font-variant-numeric:tabular-nums; white-space:nowrap}
.rrail-st i{width:9px; height:9px; border-radius:50%; background:var(--warn)}
.rrail-st[data-s="live"] i{background:var(--ok); box-shadow:0 0 8px rgba(127,224,127,.7)}
.rrail-st[data-s="off"] i{background:var(--bad)}
/* แผงปุ่มแอนดรอยด์ข้างจอ — เปิดแล้วภาพหดหลบ (ไม่ทับภาพ) */
.rdev-frame.rplay .rplay-keys:not([hidden]){display:grid; flex:none; align-content:center;
  grid-template-columns:repeat(2, 62px); gap:6px; padding:8px; overflow-y:auto;
  scrollbar-width:none; border-left:1px solid rgba(255,255,255,.07); background:#08080c}
.rplay-keys .rkey{min-height:52px; padding:5px 2px; font-size:11px}
.rplay-ph{display:block}
/* ระหว่างโหมดเล่น: ซ่อนของทั้งหน้าที่ลอยอยู่ · ป้ายแจ้งเตือนยกขึ้นเหนือเวที */
html.rplay-on .top, html.rplay-on .bottomnav, html.rplay-on .hchat, html.rplay-on .totop,
html.rplay-on .ticker, html.rplay-on .rmbar, html.rplay-on .rsavepill,
html.rplay-on .rkeysheet{display:none}
html.rplay-on #toasts{z-index:450}

/* ── 📱 แถบล่าง (สถานะ + เริ่ม/หยุด) และป้ายบันทึก — มือถือเท่านั้น ──
   ⚠ อยู่ "เหนือ" เมนูล่าง 5 ปุ่มของร้าน (JS วัดความสูงจริงใส่ --rent-bnav)
   ⚠ ปุ่มลอยอื่น (แชท · ขึ้นบน · ป้ายเพิ่งซื้อ) ต้องยกขึ้นเท่าความสูงแถบ (--rent-mbar) */
.rmbar, .rsavepill{display:none}
.rmbar-st{flex:1; min-width:0; display:flex; align-items:center; gap:9px}
.rmbar-t{min-width:0; display:flex; flex-direction:column}
.rmbar-t b{font-size:14px; line-height:1.25}
.rmbar-t small{font-size:12px; color:var(--tx3); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.rsavepill[data-s="saving"] .rsave-led{background:var(--info); animation:rsaveBlink .6s infinite}
.rsavepill[data-s="saved"] .rsave-led{background:var(--ok)}
.rsavepill[data-s="warn"] .rsave-led{background:var(--warn)}
.rsavepill[data-s="err"] .rsave-led{background:var(--bad)}

@media(max-width:760px){
  .rent-wrap{padding-bottom:20px}
  /* 📱 2026-10-02 หัวหน้าบางลง — จอเกมต้องขึ้นมาในจอแรกโดยไม่ต้องเลื่อน
     ⚠ คิว/เช่าเพิ่มมีชิปในแถบสลับจออยู่แล้ว (รายละเอียดคิว + เพิ่มวันอยู่ที่คลัง → จอเช่า)
     ⚠ ใช้ #id — กฎหลักของกล่องพวกนี้อยู่ท้ายไฟล์ (ชนะคลาสเดียวกันที่นี่) */
  .rent-head{padding-top:12px}
  .rent-head .eyebrow, .rent-head .lead{display:none}
  .rent-head h1{margin-top:0; font-size:24px}
  #rent-queue, #rent-more, #rent-acts > .hint, #rent-remind .rremind-more{display:none}
  #rent-remind{margin-top:8px; padding:6px 6px 6px 12px; font-size:14px}
  #rent-remind > span{flex:1 1 0}
  #rent-acts{margin-top:0}
  .rfleet{display:block; margin:4px 0 10px}
  .rfleet .rkpi{display:none}
  .rscr{padding:6px; gap:6px}
  .rscr-b{padding:6px 10px}
  .rdeck{gap:12px}
  .rpanel{border-radius:14px}
  /* 📱 2026-10-02 (เจ้าของส่งภาพ iPhone): การ์ดซ้อนการ์ด + ขอบ + ช่องว่าง กินจอเกมจนเล็ก
     ⇒ จอเกมชิดขอบจอซ้าย-ขวา (ไม่มีกรอบ/แผงรอบ) · หัวบรรทัดเดียว · แถบใต้จอแถวเดียว */
  .rdev-live{padding:0; border:0; border-radius:0; background:none}
  .rdev-live::before, .rside::before{display:none}
  .rdev-head{gap:6px; margin-bottom:8px}
  .rdev-head > .rsp{display:none}
  .rdev-name{font-size:16px}
  .rchip{padding:4px 8px; font-size:12px}
  .rdev-frame{padding:0; border-radius:0; border-width:1px 0; box-shadow:none;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)))}
  .rdev-screen{border-radius:0}
  .rent-shot{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
  .rscr-bar{gap:6px; min-height:48px;
    padding:6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left))}
  /* ไฟสถานะในหัวบอก "สด" อยู่แล้ว ⇒ ป้าย LIVE ใต้จอไม่ต้องซ้ำ · ปุ่มเต็มจอแบบเดิมแทนด้วยโหมดเล่น */
  .rdev-frame[data-s="live"] .rlive-badge{display:none}
  .ricbtn[data-k="full"]{display:none}
  .rplay-b{display:inline-flex; order:-1; flex:none; min-height:44px; padding:0 14px}
  .rkeys-b{display:inline-flex}
  /* จอเล็ก — ปุ่มในแถบใต้จอเหลือแต่ไอคอน (มี aria-label + title) · เป้านิ้ว 44px */
  .ricbtn{width:44px; height:44px; padding:0; justify-content:center}
  .ricbtn span{display:none}
  .rdev-tip{display:none}
  .rhud{display:none}
  /* ปุ่มแอนดรอยด์ 8 ใบย้ายเข้าแผ่นล่าง (ปุ่ม "ปุ่ม ▾" ใต้จอ) — ไม่ค้างใต้จอให้กินที่ */
  .rdev-keys{display:none}
  .rtype-box{padding-top:2px}
  /* แท็บติดบนตอนเลื่อน — ใต้หัวเว็บที่ติดบนอยู่แล้ว (JS วัดใส่ --rent-top) */
  /* ⚠ แท็บเป็นแถบเลือกแบบปุ่มติดกัน (segmented) — แผงรอบนอกไม่มีกรอบแล้ว ไม่ซ้อนการ์ด */
  .rtabs{position:sticky; top:var(--rent-top, 0px); z-index:20; padding:4px; gap:3px;
    border:1px solid var(--line); border-radius:14px; background:rgba(12,12,17,.94);
    backdrop-filter:blur(10px)}
  .rside{border:0; border-radius:0; background:none}
  .rtab{min-width:0; min-height:48px; padding:6px 2px; font-size:12px; border-radius:10px}
  .rtab[aria-selected="true"]{color:#fff; background:rgba(255,45,70,.16);
    box-shadow:inset 0 0 0 1px rgba(255,45,70,.45)}
  .rtab[aria-selected="true"]::after{display:none}
  .rpane{padding:14px 0 12px}
  /* ปุ่มเริ่ม/หยุดย้ายไปแถบล่างแล้ว — ในแท็บเหลือปุ่มรีเกม */
  .rbtnrow.intab{grid-template-columns:1fr}
  .rbtnrow.intab .rtoggle{display:none}
  .rstatus{gap:12px}
  .rring{width:78px; height:78px}
  .rring b{font-size:19px}
  .rminis{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .rtool{flex-wrap:wrap}
  .rtool .raction{width:100%}
  .rsave-w{display:none}
  /* ไฟ + ข้อความอยู่บรรทัดเดียวกันเสมอ · ปุ่มลงบรรทัดล่างชิดขวา (จอ 320 เจอไฟลอยแยกบรรทัด) */
  .rsave-t{flex:1 1 calc(100% - 30px); min-width:0}
  .rsave-sp{display:none}
  .rsave .raction{margin-inline-start:auto}
  /* ⛔ ช่องกรอกต่ำกว่า 16px = iPhone ซูมหน้าเองตอนแตะ แล้วไม่ซูมกลับ */
  main[data-page="rental"] .input{font-size:16px}
  /* เป้าแตะ ≥ 44px */
  .rcfg .rstep, .rpill, .rcfg .rchip-b, .rcfg .rpick-b{min-height:44px}
  .rcfg .rnum-b{width:40px}
  .raction.sm{min-height:44px}

  /* ⚠ 2026-10-02 เตี้ยลง (68 → ~56px) — แถบติดล่างกินที่จอเกมทุกพิกเซล · ปุ่มยัง ≥44px */
  .rmbar:not([hidden]){display:flex; position:fixed; left:0; right:0; z-index:99;
    bottom:var(--rent-bnav, 0px); align-items:center; gap:10px;
    padding:6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
    background:rgba(10,10,14,.95); backdrop-filter:blur(14px); border-top:1px solid var(--line-2)}
  .rmbar .raction{flex:none; min-width:120px; min-height:44px}
  .rsavepill:not([hidden]){display:flex; position:fixed; left:50%; z-index:101;
    bottom:calc(var(--rent-bnav, 0px) + var(--rent-mbar, 68px) + 10px);
    align-items:center; gap:7px; max-width:calc(100vw - 24px); padding:7px 14px;
    border-radius:999px; border:1px solid var(--line); background:var(--surface);
    box-shadow:0 10px 30px rgba(0,0,0,.5); font-size:13px; white-space:nowrap; pointer-events:none;
    opacity:0; transform:translate(-50%, 16px);
    transition:opacity .2s var(--ease), transform .2s var(--ease)}
  .rsavepill.on{opacity:1; transform:translate(-50%, 0)}
  /* ⚠ เฉพาะปุ่มแชทตอน "ยังไม่เปิด" — เปิดแล้วเป็นแผ่นเต็มจอ (inset:0) ยกขึ้น = แผ่นลอย
       ค้างครึ่งจอ ข้างล่างยังกดแถบล่าง/เมนูร้านทะลุได้ */
  body:has(.rmbar:not([hidden])) .hchat:not(.open){
    bottom:calc(70px + env(safe-area-inset-bottom) + var(--rent-mbar, 68px))}
  /* ปุ่มแชทลอยเล็กลงในหน้านี้ (44px) — ทับแผงตั้งค่าน้อยลง · แชทเต็มยังเปิดจากแท็บช่วยเหลือได้ */
  body:has(.rmbar:not([hidden])) .hchat:not(.open) .hchat-btn{min-height:44px; width:44px;
    opacity:.92}
  body:has(.rmbar:not([hidden])) .hchat-panel{
    height:min(560px, calc(100vh - 140px - var(--rent-mbar, 68px)))}
  /* ขึ้นบนสุด — หน้านี้ล็อกอินเสมอ = มีปุ่มแชทเสมอ ⇒ ต้องพ้นทั้งปุ่มแชทและแถบล่าง */
  body:has(.rmbar:not([hidden])) .totop{
    bottom:calc(76px + env(safe-area-inset-bottom) + var(--rent-mbar, 68px))}
  body:has(.rmbar:not([hidden])):has(.hchat:not([hidden])) .totop{
    bottom:calc(138px + env(safe-area-inset-bottom) + var(--rent-mbar, 68px))}
  body:has(.rmbar:not([hidden])) .ticker{
    bottom:calc(78px + env(safe-area-inset-bottom) + var(--rent-mbar, 68px))}
  /* ป้ายแจ้งเตือน — เดิมทับปุ่มเริ่ม/หยุดพอดี (กดสั่งแล้วป้ายเด้งมาบังปุ่มตัวเอง 4 วิ) */
  body:has(.rmbar:not([hidden])) #toasts{bottom:calc(92px + var(--rent-mbar, 68px))}
  /* ⚠ --ticker-space วัดจากตำแหน่งป้ายจริง (ถูกยกพ้นแถบแล้ว) ⇒ ห้ามบวกแถบซ้ำ */
  body:has(.rmbar:not([hidden])) .foot{
    padding-bottom:max(calc(96px + var(--rent-mbar, 68px)), var(--ticker-space))}
}
/* จอแคบมาก (320) — ย่อป้ายอีกขั้น ไม่ให้ดันแนวนอน */
@media(max-width:350px){
  .rkey{font-size:10.5px}
  .rtab span{font-size:10.5px}
  .rmbar .raction{min-width:112px}
  .rdev-head .rchip[data-tone="ok"]{display:none}
  .rkeys-b > span{display:none}
  .rplay-b{padding:0 12px}
  .rtags{grid-template-columns:minmax(0, 1fr)}
}
@media (orientation:landscape) and (max-height:500px){
  .rmbar:not([hidden]){padding-top:6px; padding-bottom:6px}
  /* มือถือแนวนอน (เกมเป็นแนวนอน — หมุนจอดูกันบ่อย) — ภาพต้องพอดีความสูงจอ
     ไม่งั้นเห็นจอเกมไม่ครบต้องเลื่อนขึ้นลง · กว้างตามสัดส่วนเอง (width:auto)
     ⚠ พิกัดแตะยังถูก — atScreen คิดจากกรอบของ canvas ไม่ใช่กรอบรอบนอก */
  .rent-shot{width:auto; max-width:100%; margin-inline:auto;
    max-height:calc(100vh - var(--rent-top, 0px) - 24px)}
  .rtabs{position:static}
  /* มือถือนอน = ผังคอม แต่มีโหมดเล่นด้วย (เต็มจอจริงบน Android · เต็มหน้าต่างบน iPhone) */
  .rplay-b{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  .rled[data-s="run"], .rring[data-run]::before, .rlive-badge i, .rpane,
  .rsavepill[data-s] .rsave-led, .rkeysheet, .rdev-frame.rplay{animation:none}
  .rsavepill:not([hidden]), .rplay-rail, .rkeys-b, .rkeys-b .rkeys-chev{transition:none}
}

/* ── 📊 สถิติจอ · /web/rental/stats ─────────────────────────────────────────
   ยกหน้า "กล่องปริศนา" ในโปรแกรมมาทำเป็นเว็บ (เจ้าของเลือกแบบนี้ 2026-09-24)
   ⚠ ขนาดทุกตัวคุมด้วยคลาส ไม่มี style= ในไฟล์ HTML — CSP ไม่มี 'unsafe-inline'
     ใน style-src · ค่าที่คิดสด (ความยาวแถบ/เส้นกราฟ) ตั้งผ่าน .style ใน JS ได้ */
.st-bar{display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  margin-bottom:14px}
.st-pills{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
/* จอกว้างดันช่วงเวลาไปชิดขวา · จอแคบปล่อยให้ชิดซ้ายทั้งคู่ — ดันไปขวาแล้วมัน
   ไปลอยอยู่มุมขวาคนละบรรทัดกับปุ่มเลือกจอ ดูเหมือนคนละกลุ่มกัน */
@media (min-width:700px){.st-right{margin-inline-start:auto}}
.st-pill{padding:7px 15px; border-radius:999px; border:1px solid var(--line);
  background:var(--glass); color:var(--tx2); font:inherit; font-size:12.5px;
  cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.st-pill:hover{border-color:var(--line-2); color:var(--tx)}
.st-pill[aria-pressed="true"]{background:var(--ember-btn); border-color:transparent;
  color:#fff}
.st-pill:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
/* 👆 จอสัมผัส: ปุ่มเลือกจอ/ช่วงเวลาเป็นตัวคุมหลักของหน้านี้ ต้องกดโดนแน่ ๆ
   (วัดจากหน้าจริงได้ 37px — ต่ำกว่าเกณฑ์นิ้วมือ 44px) */
@media (max-width:699px){
  .st-pill{min-height:44px; display:inline-flex; align-items:center;
    padding-block:0}
}
/* แถวในตารางคือปุ่มกลาย ๆ (กดดูใบสรุป) — บนมือถือต้องสูงพอให้กดโดนเหมือนกัน */
@media (max-width:699px){
  .st-tb tbody td{padding-block:11px}
}

#st-body{display:flex; flex-direction:column; gap:13px}
.st-card{padding:15px 16px; border-radius:16px}
.st-empty{padding:26px 20px; text-align:center}

/* หัวการ์ด — ไอคอน · ชื่อ · คำอธิบายสั้น · ป้ายมุมขวา */
.st-hd{display:flex; align-items:flex-start; gap:11px; margin-bottom:13px}
.st-hd .st-ic{width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center; font-size:18px;
  background:var(--glass-2); border:1px solid var(--line)}
.st-hd h2{margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em}
.st-hd p{margin:2px 0 0; font-size:12px; color:var(--tx3); line-height:1.5}
.st-hd .st-tag{margin-inline-start:auto; flex:none}
.st-tag{font-size:10.5px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--tx3);
  white-space:nowrap}
.st-tag.hot{background:var(--ember-btn); border-color:transparent; color:#fff}

/* แถบบอกว่าช่วงที่เลือกว่าง — เป็นข้อมูล ไม่ใช่ข้อผิดพลาด จึงใช้โทนกลาง */
.st-gap{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0;
  padding:11px 14px; border-radius:12px; font-size:12.5px; color:var(--tx2);
  line-height:1.6; border:1px solid var(--line); background:var(--glass)}
.st-gap .st-pill{padding:5px 13px; font-size:12px}

/* ── 📒 ภาพรวม (ยอดสะสม) ── */
/* ⛔ คอลัมน์ตายตัวทุกช่วง — auto-fit ใน grid ซ้อน grid คิดความสูงผิดเป็นเท่าตัว
   ⚠ จำนวนคอลัมน์ต้องหารจำนวนกระเบื้องลงตัว ไม่งั้นแถวสุดท้ายแหว่ง:
     ยอดสะสม 6 ใบ → 1 / 2 / 3 / 6 · อัตรา 3 ใบ → 1 / 3
   (ของเดิมรวมเป็นกริดเดียว 9 ใบ 5 คอลัมน์ ⇒ แถวล่างเหลือ 4 ใบ ดูไม่จบ) */
.st-tiles{display:grid; gap:10px; grid-template-columns:1fr}
/* ⚠ เส้นแบ่ง 2 คอลัมน์อยู่ที่ 480px ไม่ใช่ 430 — ค่าที่กว้างที่สุดไม่ใช่ตัวเลข
   แต่เป็น "19 ชม. 8 นาที" (~150px ที่ 22px) · ที่ 430px ช่องเหลือ 190px แล้วมัน
   ตัดเป็นสองบรรทัด ทำให้กระเบื้องสูงไม่เท่ากันทั้งแถว (วัดจากหน้าจริง) */
@media (min-width:480px){
  .st-tiles{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .st-tiles .st-tile-v{font-size:19px}
}
@media (min-width:760px){.st-tiles .st-tile-v{font-size:22px}}
@media (min-width:760px){.st-tiles{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (min-width:1260px){
  .st-tiles{grid-template-columns:repeat(6, minmax(0, 1fr))}
  /* 6 ใบต่อแถวบนคอนเทนเนอร์ 1,216px = ช่องละ ~190px — เลขหลักล้านต้องเล็กลงนิด
     ไม่งั้นตัดขึ้นบรรทัดใหม่กลางตัวเลข */
  .st-tiles .st-tile-v{font-size:19px}
  .st-tiles .st-tile{gap:9px; padding:11px 12px}
}
/* อัตราต่อชั่วโมง — เป็นค่าประมาณคนละชุดกับยอดสะสม จึงแยกแถวของตัวเอง
   ⛔⛤ 3 ใบต่อแถวต้องรอถึง 700px · ที่ 540px ช่องเหลือ 160px แล้ว "162,040"
     ตัดเป็น "162,04 / 0" (วัดจากหน้าจริง) — กระเบื้องยอดสะสมไม่เจอเพราะมันมี
     2 คอลัมน์ที่ช่วงเดียวกัน ช่องจึงกว้างกว่าเท่าตัว */
.st-rates{display:grid; gap:10px; grid-template-columns:1fr; margin-top:10px}
@media (min-width:700px){.st-rates{grid-template-columns:repeat(3, minmax(0, 1fr))}}
.st-tile{display:flex; align-items:flex-start; gap:10px; min-width:0;
  border:1px solid var(--line); border-radius:13px; padding:12px 13px;
  background:rgba(255,255,255,.02);
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease)}
.st-tile:hover{border-color:var(--line-2); transform:translateY(-2px)}
/* กระเบื้อง "ต่อชั่วโมง" เป็นค่าประมาณ ไม่ใช่ยอดจริง — ต้องดูต่างจากกระเบื้องสะสม */
.st-tile.hot{background:linear-gradient(180deg, rgba(255,45,70,.10),
  rgba(255,255,255,.02)); border-color:rgba(255,45,70,.26)}
.st-tile-ic{width:32px; height:32px; border-radius:10px; flex:none; display:grid;
  place-items:center; font-size:15px; border:1px solid var(--line);
  background:var(--glass-2)}
.st-tile-ic.blue{background:rgba(96,165,250,.14); border-color:rgba(96,165,250,.3)}
.st-tile-ic.cyan{background:rgba(95,208,232,.14); border-color:rgba(95,208,232,.3)}
.st-tile-ic.amber{background:rgba(255,194,77,.14); border-color:rgba(255,194,77,.32)}
.st-tile-ic.violet{background:rgba(167,139,250,.14); border-color:rgba(167,139,250,.3)}
.st-tile-ic.green{background:rgba(74,222,128,.13); border-color:rgba(74,222,128,.28)}
.st-tile-ic.pink{background:rgba(255,107,157,.14); border-color:rgba(255,107,157,.3)}
.st-tile-tx{display:flex; flex-direction:column; min-width:0; gap:1px}
.st-tile-k{font-size:11.5px; color:var(--tx3)}
.st-tile-v{font-size:22px; font-weight:700; letter-spacing:-.03em; line-height:1.2;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
/* ⛔ ขีด — ต้องดูจาง ๆ ให้ต่างจากตัวเลขจริงทันทีที่กวาดตา */
.st-tile-v.unknown{color:var(--tx3); font-weight:600}
.st-tile-s{font-size:11px; color:var(--tx3); line-height:1.45; overflow-wrap:anywhere}
/* 📱 จอแคบกว่า 430px: สองคอลัมน์บีบจนเลขหลักล้านตัดกลางตัวเลข แต่ซ้อนกัน 9 ใบ
   ก็ยาวเกินไป ⇒ เปลี่ยนเป็น "แถว" แบบรายการบนมือถือ: ชื่ออยู่ซ้าย เลขอยู่ขวา
   สูงลดจาก ~74px เหลือ ~58px และกวาดตาอ่านเป็นคอลัมน์เดียวได้ทันที */
@media (max-width:479px){
  .st-tile{align-items:center; padding:10px 12px}
  .st-tile-tx{flex:1 1 auto; flex-direction:row; align-items:center; gap:10px;
    flex-wrap:wrap}
  .st-tile-k{order:1; flex:1 1 auto; font-size:12.5px; color:var(--tx2)}
  .st-tile-v{order:2; flex:0 0 auto; font-size:19px; text-align:end}
  .st-tile-s{order:3; flex:1 1 100%; font-size:10.5px; margin-top:-2px}
}
/* ⚠ ช่วง 430-699px กระเบื้องยอดสะสมยัง 2 คอลัมน์ (การ์ดปกติ) แต่อัตราเหลือ
   คอลัมน์เดียว ⇒ ถ้าไม่เปลี่ยนเป็นแถว จะได้การ์ดสูง ๆ 3 ใบเรียงกันเปลืองที่มาก
   (กฎซ้ำกับด้านบนโดยตั้งใจ — media query แชร์ชุดประกาศข้ามช่วงไม่ได้) */
@media (min-width:480px) and (max-width:699px){
  .st-rates .st-tile{align-items:center; padding:10px 12px}
  .st-rates .st-tile-tx{flex:1 1 auto; flex-direction:row; align-items:center;
    gap:10px; flex-wrap:wrap}
  .st-rates .st-tile-k{order:1; flex:1 1 auto; font-size:12.5px; color:var(--tx2)}
  .st-rates .st-tile-v{order:2; flex:0 0 auto; font-size:19px; text-align:end}
  .st-rates .st-tile-s{order:3; flex:1 1 100%; font-size:10.5px; margin-top:-2px}
}
.st-note{display:flex; align-items:flex-start; gap:7px; margin:12px 0 0;
  font-size:11.5px; color:var(--tx3); line-height:1.6}
.st-warn{color:#FFC24D; flex:none}

/* ── 🏅 เลเวลบัญชี ── */
.st-lvl-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.st-lvl-badge{width:78px; height:78px; flex:none; border-radius:18px; display:grid;
  place-content:center; text-align:center; border:1px solid rgba(255,45,70,.3);
  background:radial-gradient(90% 90% at 50% 0%, rgba(255,45,70,.22), transparent 72%),
    rgba(255,255,255,.03)}
.st-lvl-badge b{font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1}
.st-lvl-badge small{display:block; font-size:9.5px; letter-spacing:.16em;
  color:var(--tx3); margin-top:3px}
.st-lvl-side{flex:1 1 240px; min-width:0}
.st-lvl-side .hint{margin:0 0 9px}

/* ── 🎫 แถบตั๋วสมบัติ ── */
.st-tkt{position:relative; overflow:hidden; border-radius:18px; padding:18px 20px;
  border:1px solid rgba(255,45,70,.3); display:flex; align-items:center;
  gap:18px; flex-wrap:wrap;
  background:radial-gradient(760px 190px at 6% 0%, rgba(255,45,70,.20), transparent 68%),
    radial-gradient(520px 200px at 94% 110%, rgba(255,194,77,.13), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015))}
.st-tkt-art{position:relative; width:132px; height:74px; flex:none}
.st-tkt-art img{position:absolute; width:104px; object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.st-tkt-art img:first-child{inset-inline-start:0; top:4px; transform:rotate(-9deg)}
.st-tkt-art img:last-child{inset-inline-end:0; top:22px; transform:rotate(7deg)}
.st-tkt-lab{font-size:12px; color:var(--tx3); letter-spacing:.02em}
.st-tkt-row{display:flex; align-items:baseline; gap:9px}
.st-tkt-n{font-size:46px; font-weight:700; line-height:1; letter-spacing:-.035em;
  background:linear-gradient(180deg, #fff, var(--ember-lit));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.st-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.st-chip{display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border-radius:999px; font-size:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.3); color:var(--tx2)}
.st-chip img{width:15px; height:15px; object-fit:contain}
.st-chip b{color:var(--tx)}
/* แถบจังหวะ — แท่งที่ "ได้ตั๋ว" เรืองแสง ให้เห็นจากมุมตาว่าออกตอนไหน */
.st-spark{margin-inline-start:auto; display:flex; align-items:flex-end; gap:3px;
  height:46px}
.st-spark i{width:6px; border-radius:3px; background:rgba(255,255,255,.13);
  min-height:2px}
.st-spark i.hit{background:linear-gradient(180deg, var(--ember-lit), var(--ember-btn));
  box-shadow:0 0 12px rgba(255,45,70,.6)}

/* ── 🎁 กล่องปริศนา ── */
.st-boxtop{display:grid; gap:18px; grid-template-columns:1fr; align-items:center}
@media (min-width:820px){.st-boxtop{grid-template-columns:168px minmax(0, 1fr)}}
.st-donut{position:relative; width:168px; height:168px; justify-self:center}
.st-donut svg{transform:rotate(-90deg)}
.st-donut .st-mid{position:absolute; inset:0; display:grid; place-content:center;
  text-align:center}
.st-donut .st-mid b{font-size:32px; font-weight:700; letter-spacing:-.03em;
  line-height:1}
.st-donut .st-mid small{font-size:11px; color:var(--tx3)}
.st-blist{display:flex; flex-direction:column; gap:9px}
.st-bline{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--tx2)}
.st-bline b{color:var(--tx)}
.st-bline.col{align-items:flex-start; flex-direction:column; gap:6px}
.st-last{display:flex; gap:6px; flex-wrap:wrap}
.st-last img{width:30px; height:30px; object-fit:contain; padding:3px;
  border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--line)}
.st-last img.rare{border-color:rgba(255,107,157,.5);
  box-shadow:0 0 10px rgba(255,107,157,.3)}

/* การ์ดระดับกล่อง — คอลัมน์ตายตัว ไม่ใช่ auto-fit
   ⛔ auto-fit/auto-fill ใน grid ซ้อน grid คิดความสูงผิดเป็นเท่าตัว (บทเรียน 09-24) */
.st-tiers{display:grid; gap:11px; grid-template-columns:repeat(2, minmax(0, 1fr));
  margin-top:15px}
/* 4 ใบ ⇒ ใช้ได้แค่ 2 หรือ 4 คอลัมน์ · 3 คอลัมน์ทำให้แถวล่างเหลือใบเดียว
   760px คือจุดที่ชื่อยาวสุด ("กล่องสายรุ้ง" + อาร์ต 44px) ยังอยู่ในช่องได้ */
@media (min-width:760px){.st-tiers{grid-template-columns:repeat(4, minmax(0, 1fr))}}
.st-tier{position:relative; border:1px solid var(--line); border-radius:14px;
  padding:13px 14px; background:rgba(255,255,255,.02); overflow:hidden;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease)}
.st-tier:hover{border-color:var(--line-2); transform:translateY(-2px)}
.st-tier.rare{border-color:rgba(255,107,157,.32)}
.st-tier .st-glow{position:absolute; inset-inline-end:-28px; top:-28px;
  width:120px; height:120px; border-radius:50%; filter:blur(34px); opacity:.5}
.st-tier .st-top{display:flex; align-items:center; gap:10px; position:relative}
.st-tier img{width:44px; height:44px; object-fit:contain; flex:none}
.st-tier .st-nm{font-size:13px; font-weight:600}
.st-tier .st-en{font-size:11px; color:var(--tx3)}
.st-tier .st-rank{position:absolute; top:11px; inset-inline-end:12px}
.st-tier .st-num{display:flex; align-items:baseline; gap:8px; margin-top:11px;
  position:relative}
.st-tier .st-num b{font-size:27px; font-weight:700; letter-spacing:-.03em;
  line-height:1}
.st-tier .st-num span{font-size:11.5px; color:var(--tx3)}
.st-bar2{height:5px; border-radius:99px; background:rgba(255,255,255,.07);
  margin-top:10px; overflow:hidden}
.st-bar2 i{display:block; height:100%; border-radius:99px; width:0}
.st-tier .st-per{font-size:11px; color:var(--tx3); margin-top:7px}

/* ── 📈 กราฟผลตอบแทน ── */
.st-chart{width:100%; height:190px; display:block}
.st-legend{display:flex; gap:14px; font-size:11.5px; color:var(--tx3); margin-top:8px}
.st-legend i{width:9px; height:9px; border-radius:3px; display:inline-block;
  margin-inline-end:6px}

/* ── 🧾 รายตา + ใบสรุปของตาที่กด ── */
.st-split{display:grid; gap:12px; grid-template-columns:1fr}
/* ⛔⛤ ช่องกริดกว้างตามเนื้อในเป็นค่าปริยาย (min-width:auto) ⇒ ตารางที่กว้างกว่าจอ
   ดันทั้งหน้าให้เลื่อนซ้าย-ขวาได้ ทั้งที่ .st-scroll ตั้ง overflow-x ไว้แล้ว
   (เจอบนจอ 375px — หน้ากว้าง 517px) · min-width:0 คือสวิตช์ที่ทำให้ overflow ทำงาน */
.st-split > *{min-width:0}
@media (min-width:1000px){
  .st-split{grid-template-columns:minmax(0, 1.25fr) minmax(330px, .75fr);
    align-items:start}
  /* ⛔⛤ ตารางสูงกว่าใบสรุปหลายเท่า (1,735px vs 503px วัดจากหน้าจริง) ⇒ เลื่อนไป
     กดแถวล่าง ๆ แล้วใบสรุปหลุดจอไปแล้ว = กดแล้ว "ไม่เห็นอะไรเกิดขึ้น"
     ⛔ position:sticky แก้ไม่ได้ที่นี่ — body ของเว็บนี้ตั้ง overflow-y:auto ไว้
       สกอลล์พอร์ตจึงไม่ใช่ตัวที่เลื่อนจริง แผงเลยไม่ยอมติด (ลองแล้วบนหน้าจริง)
     ⇒ ให้ "ตาราง" เลื่อนในตัวเองแทน · ทั้งสองช่องจึงอยู่ในจอเดียวกันเสมอ */
  #st-list .st-scroll{max-height:min(560px, calc(100vh - 230px)); overflow-y:auto}
}
.st-scroll{overflow-x:auto}
.st-tb{width:100%; border-collapse:collapse; font-size:12.5px}
.st-tb th{text-align:start; font-weight:500; font-size:11px; color:var(--tx3);
  padding:0 9px 9px; border-bottom:1px solid var(--line); white-space:nowrap}
.st-tb th.n, .st-tb td.n{text-align:end; font-variant-numeric:tabular-nums}
.st-tb td{padding:9px; border-bottom:1px solid rgba(255,255,255,.05);
  white-space:nowrap}
.st-tb tbody tr{cursor:pointer; transition:background var(--t-fast) var(--ease)}
.st-tb tbody tr:hover{background:var(--glass)}
.st-tb tbody tr:focus-visible{outline:2px solid var(--ember-lit); outline-offset:-2px}
.st-tb tbody tr[aria-current="true"]{background:rgba(255,45,70,.12);
  box-shadow:inset 3px 0 0 var(--ember)}
/* แถวที่ได้ตั๋ว — ขีดแดงเรืองแสงให้เห็นตั้งแต่ยังไม่อ่านตัวเลข */
.st-tb tbody tr.tk td:first-child{position:relative}
.st-tb tbody tr.tk td:first-child::before{content:""; position:absolute;
  inset-inline-start:0; top:7px; bottom:7px; width:3px; border-radius:3px;
  background:var(--ember); box-shadow:0 0 9px rgba(255,45,70,.7)}
/* 📱 จอแคบ: ซ่อนคอลัมน์ที่ดูได้จากใบสรุปอยู่แล้ว แทนการปล่อยให้เลื่อนซ้าย-ขวา
   (เลื่อนแนวนอนในตารางบนมือถือคือสิ่งที่คนพลาดมากที่สุด — ไม่รู้ว่ามีต่อ)
   ⚠ ต้องซ่อนทั้ง th และ td ตำแหน่งเดียวกัน ไม่งั้นหัวตารางเลื่อนไปคนละช่อง
   ลำดับคอลัมน์: 1 รอบ · 2 จบเมื่อ · 3 เวลา · 4 Coins · 5 EXP · 6 กล่อง · 7 ได้พิเศษ */
@media (max-width:699px){
  .st-tb th:nth-child(3), .st-tb td:nth-child(3),
  .st-tb th:nth-child(5), .st-tb td:nth-child(5){display:none}
  .st-tb th, .st-tb td{padding-inline:6px}
  .st-tb{font-size:12px}
}
/* จอ 320-360px ยังเกินอีกนิด ⇒ ตัดคำที่เดาได้จากบริบททิ้ง (" น." · ชื่อสีตั๋ว)
   ⛔ ห้ามซ่อนทั้งคอลัมน์ตั๋ว — ของหายากที่สุดในเกม ต้องเห็นเสมอ เหลือ 🎫 ×1 */
@media (max-width:479px){
  .st-hide-s{display:none}
  .st-tb th, .st-tb td{padding-inline:5px}
}
.st-bxs{display:flex; gap:3px}
.st-bxs img{width:21px; height:21px; object-fit:contain}

.st-shot{position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  aspect-ratio:16/9; display:grid; place-items:center}
.st-shot img{width:100%; height:100%; object-fit:cover; display:block}
.st-shot .st-none{font-size:12.5px; color:var(--tx3); padding:16px; text-align:center}

/* ── 🖼 ประวัติการเปิดกล่อง (2026-09-30) ──
   การ์ดโชว์ 8 ใบ (4×2 จอกว้าง · 2×4 มือถือ — หารลงตัวทั้งคู่) · กล่อง "ดูทั้งหมด"
   เต็มจอบนมือถือ · ภาพขยาย (.st-lb) ทับทุกอย่างรวมกล่องนั้นด้วย */
.st-hd .st-gal-all{margin-inline-start:auto; flex:none}
/* ⚠ จำนวนคอลัมน์ตายตัวตามความกว้างจอ — ห้ามใช้ตัวเติมคอลัมน์อัตโนมัติในบล็อกเช่าจอ
   (เคยทำความสูงการ์ดบานเป็นเท่าตัว · ดูเทส test_rental_ui) */
.st-gal-grid{display:grid; gap:12px; grid-template-columns:repeat(5, minmax(0, 1fr))}
@media (max-width:1100px){ .st-gal-grid{grid-template-columns:repeat(4, minmax(0, 1fr))} }
@media (max-width:900px){ .st-gal-grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.st-gal-grid.peek{grid-template-columns:repeat(4, minmax(0, 1fr))}
.st-gal-it{display:flex; flex-direction:column; gap:6px; min-width:0; padding:0;
  border:0; background:none; color:inherit; font:inherit; text-align:start; cursor:zoom-in}
/* ⚠ กรอบภาพตรึงสัดส่วนไว้ก่อนภาพโหลด — ไม่งั้นตารางกระโดดทุกครั้งที่ภาพใบหนึ่งมาถึง
   (ภาพหน้ากล่องเป็นแนวนอนเสมอ · cover ตัดขอบนิดหน่อยได้ ภาพเต็มดูได้ในภาพขยาย) */
.st-gal-it img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:12px; border:1px solid var(--line); background:#0b0b10;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.st-gal-it:hover img{border-color:var(--ember-lit); transform:translateY(-2px)}
.st-gal-it:focus-visible{outline:none}
.st-gal-it:focus-visible img{outline:2px solid var(--ember-lit); outline-offset:2px}
.st-gal-it.bad img{opacity:.3}
.st-gal-cap{display:flex; align-items:center; gap:8px; padding:0 2px; font-size:12.5px;
  color:var(--tx2); font-variant-numeric:tabular-nums}
.st-gal-t{margin-inline-end:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-gal-n{color:var(--gold); white-space:nowrap}
.st-gal-tk{color:var(--ember-lit); white-space:nowrap}
.st-gal-note{margin:12px 0 0; font-size:12px; color:var(--tx3)}
@media (max-width:760px){
  .st-gal-grid, .st-gal-grid.peek{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
  .st-gal-cap{font-size:11.5px; gap:6px}
}
@media (prefers-reduced-motion:reduce){ .st-gal-it img{transition:none} }

/* กล่อง "ดูทั้งหมด" — กว้างกว่ากล่องยืนยันปกติมาก · หัวอยู่กับที่ เลื่อนเฉพาะตารางภาพ */
.st-galcard{width:min(1240px, 100%); max-height:calc(100dvh - 40px); display:flex;
  flex-direction:column; overflow:hidden}
.st-galcard .modalbody{overflow-y:auto; overscroll-behavior:contain}
.st-gal-ttl{min-width:0}
.st-gal-ttl p{margin:3px 0 0; font-size:12.5px; color:var(--tx3)}
@media (max-width:760px){
  .st-galwrap{padding:0}
  .st-galcard{width:100%; height:100dvh; max-height:none; border-radius:0; border:0}
  .st-galcard .modalbody{padding:12px}
}

/* ภาพขยาย — พื้นมืดเต็มจอ · ภาพพอดีจอเสมอ (contain) · ปุ่ม ‹ › อยู่ขอบ */
.st-lb{position:fixed; inset:0; z-index:130; display:flex; flex-direction:column;
  background:rgba(4,4,6,.94); animation:mfade 160ms var(--ease)}
.st-lb-top{display:flex; align-items:center; gap:12px;
  padding:max(12px, env(safe-area-inset-top)) 16px 10px}
.st-lb-cap{display:flex; flex-direction:column; gap:2px; min-width:0; margin-inline-end:auto;
  font-size:12.5px; color:var(--tx2)}
.st-lb-cap b{font-size:15px; color:var(--tx); font-weight:600}
.st-lb-fig{flex:1; min-height:0; display:grid; place-items:center;
  padding:0 64px max(16px, env(safe-area-inset-bottom)); touch-action:pan-y}
.st-lb-fig img{max-width:100%; max-height:100%; object-fit:contain; border-radius:12px;
  box-shadow:var(--shadow-hi); user-select:none; -webkit-user-drag:none}
.st-lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px;
  border-radius:50%; border:1px solid var(--line-2); background:rgba(18,18,26,.8);
  color:var(--tx); font-size:26px; line-height:1; cursor:pointer}
.st-lb-nav.prev{left:10px}
.st-lb-nav.next{right:10px}
.st-lb-nav:hover:not(:disabled){border-color:var(--ember-lit)}
.st-lb-nav:disabled{opacity:.25; cursor:default}
.st-lb-nav:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
/* มือถือ: ภาพกว้างเต็มจอ · ปุ่มลงไปอยู่ล่าง ไม่บังภาพ (ปัดนิ้วเปลี่ยนภาพได้อยู่แล้ว) */
@media (max-width:760px){
  .st-lb-fig{padding:0 8px 76px}
  .st-lb-nav{top:auto; bottom:max(14px, env(safe-area-inset-bottom)); transform:none}
  .st-lb-nav.prev{left:calc(50% - 56px)}
  .st-lb-nav.next{right:calc(50% - 56px)}
}
.st-rcpt{margin-top:12px; border:1px solid var(--line); border-radius:12px;
  overflow:hidden}
.st-rcpt > div{display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:9px 12px; font-size:13px}
.st-rcpt > div + div{border-top:1px solid var(--line)}
.st-rcpt span{color:var(--tx3); font-size:12px}
.st-rcpt b{font-variant-numeric:tabular-nums}
/* การ์ด "ได้ตั๋ว" ของตาที่กด — ของหายาก ห้ามให้จมอยู่ในแถวตัวเลขธรรมดา */
.st-won{margin-top:11px; display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:12px; border:1px solid rgba(255,45,70,.42);
  background:linear-gradient(90deg, rgba(255,45,70,.2), rgba(255,194,77,.07))}
.st-won img{width:34px; height:34px; object-fit:contain}
.st-won b{font-size:14px}

@media (max-width:560px){
  .st-tkt{padding:15px 16px; gap:13px}
  .st-tkt-n{font-size:38px}
  .st-spark{margin-inline-start:0; width:100%}
  .st-spark i{flex:1 1 auto; width:auto}
}

/* ══ 🛒🏠 ต่ออายุจอด้วยการซื้อ · เช่าจอเพิ่ม (2026-10-01) ══════════════════════════════
   กล่องซื้อแพ็กเช่าจอ (rentBuyModal) · ทางเลือกในหน้าสินค้า · แถบเตือน/คิวในหน้าเครื่องของฉัน */
.pickitem[aria-pressed="true"]{border-color:var(--gold);
  background:color-mix(in oklab,var(--gold) 10%, transparent)}
.rbuy .rbuy-tgt{margin-bottom:12px}
.rbuy-qty{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.rbuy-qty > span{font-size:13.5px; color:var(--tx2); margin-inline-end:auto}
.rbuy-qty output{min-width:28px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums}
.rbuy-sum{margin:12px 0 4px; font-size:13.5px; color:var(--tx2); min-height:1.5em}
.rbuy .kacts{flex-wrap:wrap}
.pdbody{white-space:pre-line}
.pkacts{display:flex; gap:8px; flex-wrap:wrap}
.pkacts .btn{flex:1 1 140px}
@media(min-width:760px){ .pkacts{justify-content:flex-end} .pkacts .btn{flex:0 0 auto} }
.rentpick{display:flex; flex-direction:column; gap:8px; padding:14px 18px; margin:0;
  border-bottom:1px solid var(--line); border-radius:0}
.rentpick b{font-size:14px}
.rentpick small{font-size:12.5px; color:var(--tx3); line-height:1.6}
.rentpick .field{margin:0}
.pksub.renewline{color:var(--gold)}
.pksub.renewline.warn{color:var(--warn)}
.co-renew{margin-top:14px}
.rent-remind{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
  padding:10px 14px; border-radius:12px; font-size:13.5px; line-height:1.55;
  border:1px solid color-mix(in oklab,var(--warn) 40%, var(--line));
  background:color-mix(in oklab,var(--warn) 9%, transparent)}
.rent-remind[data-tone="bad"]{border-color:color-mix(in oklab,var(--bad) 45%, var(--line));
  background:color-mix(in oklab,var(--bad) 10%, transparent)}
.rent-remind > svg{width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.8; color:var(--warn)}
.rent-remind[data-tone="bad"] > svg{color:var(--bad)}
.rent-remind > span{flex:1 1 220px; min-width:0}
.rent-remind b{margin-inline-end:4px}
.rent-queue{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.rq-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px;
  border:1px dashed var(--line-2); border-radius:12px; font-size:13px; color:var(--tx2)}
.rq-line > svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  color:var(--info); flex:0 0 auto}
.rq-line > span{flex:1 1 220px; min-width:0}
.rq-line b{color:var(--tx)}
.rent-acts{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
.rent-acts .hint{margin:0; font-size:12.5px}
/* 🚧 ร้านปิดรับเช่าจอใหม่ชั่วคราว — โชว์ทุกขนาดจอ (ต่างจาก .hint ที่ซ่อนบนมือถือ) */
.rent-paused{margin:0; flex-basis:100%; font-size:12.5px; color:var(--warn)}
.rentpick .rentpaused{color:var(--warn)}
.rscr-b.q{cursor:default; border-style:dashed; opacity:.85}
.rscr-b.q .rled{background:var(--info)}
/* 🛒 หลังบ้านเช่าจอ: ใบสั่งซื้อที่เปิด/ต่ออายุสัญญา (ordLinks) */
.rv-ords{margin-top:3px; line-height:1.5}
.rv-ords a{color:var(--info); text-decoration:none}
.rv-ords a:hover{text-decoration:underline}
/* กล่องซื้อเช่าจอบนมือถือ: แพ็ก 2 คอลัมน์ (คอลัมน์เดียวต้องเลื่อนยาวกว่าจะถึงปุ่มสั่ง) */
.rbuy .pickgrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
/* เช่าหลายจอ/มีคิว (JS ใส่ .many) — ชิปสลับจอลงแถวเต็มความกว้างทุกขนาดจอ */
.rfleet.many{grid-template-columns:repeat(4, minmax(0, 1fr))}
.rfleet.many .rscr{grid-column:1 / -1}
@media(max-width:1080px){ .rfleet.many{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media(max-width:760px){
  .rent-acts .hint{display:none}
  .rent-remind,.rq-line{padding:8px 10px; gap:8px}
  .rent-remind .btn,.rq-line .btn{margin-inline-start:auto}
}

/* ═════════════════════════════════════════════════════════════════════════
   ชุดกลางหลังร้าน v2 (2026-10-01) — คู่กับบล็อก "ชุดกลางของหลังร้าน v2" ใน app.js
   ⛔⛤ หน้าหลังร้านที่จะรื้อ/เพิ่ม ใช้คลาสในบล็อกนี้ ห้ามตั้งชุดใหม่ซ้ำ
      หน้าเช่าจอใช้ rv-* ของตัวเอง — ห้ามแก้ rv-* เพื่อหน้าอื่น
   สถานะ: is-ok (เขียว) · is-warn (เหลืองส้ม) · is-bad (แดง) · is-info · is-money
   ═════════════════════════════════════════════════════════════════════════ */

/* ── ไอคอนเส้น (adIco) ── */
.adi{width:16px; height:16px; flex:none; display:inline-block; vertical-align:-3px}

/* ── ชื่อคน (B1): ชื่อหลักบรรทัดบน · บรรทัดรองแยกบรรทัด · ป้ายต่อท้ายชื่อ ── */
.adwho .wt{display:flex; flex-direction:column; min-width:0; line-height:1.35}
.adwho .nm{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0;
  overflow-wrap:anywhere}
.adwho .nm .adtag{font-size:10.5px; padding:1px 7px 1px 6px}
.adwho .adfine{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:280px}

/* ── แผ่นตัวเลข adStrip (B7): คอลัมน์ลงตัวตามจำนวนช่อง · เส้นผมด้วย gap ── */
.adstrip{gap:1px; background:var(--adline)}
.adstrip>div{background:var(--adsurf); border-right:0}
.adstrip.n1{grid-template-columns:1fr}
.adstrip.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.adstrip.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.adstrip.n4, .adstrip.n8{grid-template-columns:repeat(4,minmax(0,1fr))}
.adstrip.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.adstrip.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.adstrip.n7{grid-template-columns:repeat(4,minmax(0,1fr))}
.adstrip.n7>div:last-child{grid-column:span 2}
@media (min-width:1400px){ .adstrip.n6{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:1060px){
  .adstrip.n5, .adstrip.n8{grid-template-columns:repeat(3,minmax(0,1fr))}
  .adstrip.n5>div:nth-child(n+4){grid-column:span 1}
  .adstrip.n5>div:last-child{grid-column:span 2}
}
@media (max-width:640px){
  .adstrip[class*=" n"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adstrip.odd>div:last-child, .adstrip.n5>div:last-child{grid-column:1 / -1}
  .adstrip.n7>div:last-child{grid-column:1 / -1}
  .adstrip>div{padding:11px 13px}
  .adstrip .val{font-size:19px}
}

/* ── ช่องตัวเลข KPI (adKpis — ยกแบบ rv-kpi) ── */
.adkpis{display:grid; gap:10px; grid-template-columns:repeat(4,minmax(0,1fr))}
.adkpis.n1{grid-template-columns:1fr}
.adkpis.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.adkpis.n3, .adkpis.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.adkpis.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (min-width:1400px){ .adkpis.n6{grid-template-columns:repeat(6,minmax(0,1fr))} }
.adkpi{border:1px solid var(--adline); border-radius:14px; padding:12px 14px;
  background:var(--adsurf); min-width:0; display:flex; flex-direction:column; gap:3px;
  color:var(--tx); text-decoration:none; position:relative;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
a.adkpi:hover{border-color:var(--adline-hi); background:var(--adsurf-2)}
.adkpi .lab{display:flex; align-items:center; gap:6px; color:var(--tx3); font-size:12px}
.adkpi .lab .adi{width:14px; height:14px}
.adkpi .val{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:24px; font-weight:600; line-height:1.25; letter-spacing:-.02em;
  overflow-wrap:anywhere}
.adkpi .val em{font-style:normal; font-size:12.5px; color:var(--tx3); font-weight:500;
  letter-spacing:0}
.adkpi.is-good .val, .adkpi.is-ok .val{color:var(--ok)}
.adkpi.is-warn .val{color:var(--warn)}
.adkpi.is-bad .val{color:var(--bad)}
.adkpi.is-money .val{color:var(--gold)}
.adkpi.is-info .val{color:var(--info)}
.adkpi.is-bad{border-color:rgba(255,107,90,.35)}
.adkpi .sub{font-size:12px; color:var(--tx3); line-height:1.45}
.addelta{font-size:12px; color:var(--tx3); line-height:1.45}
.addelta b{display:inline-flex; align-items:center; gap:2px; font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; font-weight:600}
.addelta b .adi{width:12px; height:12px; vertical-align:0}
.addelta b.flat{color:var(--tx2)}
@media (max-width:1060px){
  .adkpis.n5, .adkpis.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .adkpis[class*=" n"]{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .adkpis.odd>.adkpi:last-child{grid-column:1 / -1}
  .adkpi{padding:10px 12px}
  .adkpi .val{font-size:20px}
}

/* ── หัวหน้าแบบประโยคสรุป (adVerdict — ยกแบบ rv-verdict) ── */
.adverdict{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px 18px;
  align-items:center; padding:16px 18px; border-radius:16px; margin-bottom:14px;
  border:1px solid var(--adline); background:var(--adsurf)}
.adverdict.is-ok{border-color:rgba(127,224,127,.3);
  background:radial-gradient(120% 140% at 0% 0%,rgba(127,224,127,.10),transparent 55%),var(--adsurf)}
.adverdict.is-warn{border-color:rgba(224,168,119,.34);
  background:radial-gradient(120% 140% at 0% 0%,rgba(224,168,119,.13),transparent 55%),var(--adsurf)}
.adverdict.is-bad{border-color:rgba(255,107,90,.45);
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,107,90,.15),transparent 55%),var(--adsurf)}
.adverdict.is-info{border-color:rgba(95,208,232,.26)}
.adverdict .ring{width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  color:var(--tx2); box-shadow:inset 0 0 0 3px rgba(255,255,255,.14)}
.adverdict .ring .adi{width:24px; height:24px}
.adverdict.is-ok .ring{color:var(--ok); box-shadow:inset 0 0 0 3px rgba(127,224,127,.5),0 0 26px rgba(127,224,127,.14)}
.adverdict.is-warn .ring{color:var(--warn); box-shadow:inset 0 0 0 3px rgba(224,168,119,.55),0 0 26px rgba(224,168,119,.18)}
.adverdict.is-bad .ring{color:var(--bad); box-shadow:inset 0 0 0 3px rgba(255,107,90,.6),0 0 26px rgba(255,107,90,.2)}
.adverdict.is-info .ring{color:var(--info); box-shadow:inset 0 0 0 3px rgba(95,208,232,.45)}
.adverdict .tx{min-width:0}
.adverdict .t{font-size:19px; font-weight:600; line-height:1.4; margin:0; overflow-wrap:anywhere}
.adverdict .s{color:var(--tx2); margin:3px 0 0; font-size:13.5px; line-height:1.5}
.adverdict .chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px}
.adverdict .side{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.adverdict .vst{padding:7px 12px; border-radius:12px; background:rgba(255,255,255,.03);
  border:1px solid var(--adline); min-width:96px}
.adverdict .vst small{display:block; font-size:11.5px; color:var(--tx3)}
.adverdict .vst b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:18px; font-weight:600; white-space:nowrap}
.adverdict .vst b em{font-style:normal; font-size:12px; color:var(--tx3); font-weight:500}
.adverdict .vst b.good{color:var(--ok)}
.adverdict .vst b.warn{color:var(--warn)}
.adverdict .vst b.bad{color:var(--bad)}
.adverdict .vst b.money{color:var(--gold)}
@media (max-width:760px){
  .adverdict{grid-template-columns:auto minmax(0,1fr); padding:14px}
  .adverdict .ring{width:44px; height:44px}
  .adverdict .ring .adi{width:20px; height:20px}
  .adverdict .t{font-size:16.5px}
  .adverdict .side{grid-column:1 / -1; justify-content:flex-start}
  .adverdict .side .btn{flex:1 1 auto}
}

/* ป้ายสถานะแบบเม็ดยา (ในหัวสรุป · ใช้ที่อื่นได้) */
.adpill{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--tx2);
  padding:3px 10px; border-radius:999px; background:var(--glass-2);
  border:1px solid var(--adline); max-width:100%; overflow-wrap:anywhere}
.adpill .adi{width:13px; height:13px}
.adpill.is-ok{color:var(--ok); border-color:rgba(127,224,127,.35)}
.adpill.is-warn{color:var(--warn); border-color:rgba(224,168,119,.42)}
.adpill.is-bad{color:var(--bad); border-color:rgba(255,107,90,.45)}
.adpill.is-info{color:var(--info); border-color:rgba(95,208,232,.36)}
.adpill.is-money{color:var(--gold); border-color:rgba(255,194,77,.36)}

/* ── การ์ดคำแนะนำ (adInsight — ยกแบบ rv-ins) ── */
/* ⚠ จำนวนคอลัมน์ตายตัว — ห้ามใช้ auto-fit (เทส rental_ui ตรวจท้ายไฟล์: ซ้อนใน grid แล้วสูงเพี้ยน) */
.adinsights{display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1200px){ .adinsights{grid-template-columns:repeat(2,minmax(0,1fr))} }
.adins{display:flex; gap:12px; padding:14px 14px 14px 16px; border-radius:14px;
  background:var(--adsurf); border:1px solid var(--adline); position:relative;
  overflow:hidden; min-width:0}
.adins::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--info)}
.adins.is-ok::before{background:var(--ok)}
.adins.is-warn::before{background:var(--warn)}
.adins.is-bad::before{background:var(--bad)}
.adins.is-money::before{background:var(--gold)}
.adins .ic{flex:none; width:38px; height:38px; border-radius:12px; display:grid;
  place-items:center; background:var(--glass-2); color:var(--info)}
.adins.is-ok .ic{color:var(--ok)}
.adins.is-warn .ic{color:var(--warn)}
.adins.is-bad .ic{color:var(--bad)}
.adins.is-money .ic{color:var(--gold)}
.adins .ic .adi{width:19px; height:19px}
.adins .tx{flex:1; min-width:0}
.adins p{margin:0; font-size:13.5px; line-height:1.5; overflow-wrap:anywhere}
.adins small{display:block; color:var(--tx3); font-size:12px; margin-top:3px; line-height:1.45}
.adins .acts{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.adins .adinsx{flex:none; margin:-6px -6px 0 0; color:var(--tx3)}
.adins.calm{grid-column:1 / -1}
@media (max-width:640px){ .adinsights{grid-template-columns:minmax(0,1fr)} }

/* ── แถบตัวกรอง (adFilterBar + .adfilters เดิมทุกหน้า) ── */
.adfilters .adfilters.adfchips, .adfchips{padding:0; border:0; gap:6px}
.adchip:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.adfind:focus-within{border-color:var(--adline-hi); box-shadow:0 0 0 2px rgba(255,124,139,.35)}
.adfind .adi{width:14px; height:14px}
@media (max-width:640px){
  .adfilters{gap:8px; padding:10px 12px}
  /* ⛤ ช่องค้นหาขึ้นบนสุดเต็มแถว · ชิปเลื่อนแนวนอนแถวเดียว (เดิมตก 3 บรรทัด) */
  .adfilters>.adfind{order:-1; flex:1 1 100%; min-width:0}
  .adfilters>.sp{display:none}
  .adfilters>.adfilters{flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    margin:0 -12px; padding:0 12px}
  .adfilters>.adfilters::-webkit-scrollbar{display:none}
  .adfilters>.adfilters>.adchip{flex:none; scroll-snap-align:start}
  .adfilters>select.adsel{flex:1 1 auto; min-height:44px}
  .adchip{min-height:44px; padding:5px 14px}
  .adfind input{min-height:34px; font-size:16px}  /* 16px = iOS ไม่ซูมตอนแตะ */
}

/* ── ตาราง → การ์ดบนมือถือ (adTable · .adcards) ──
   ⛔⛤ เดิมบนจอ 390px ตารางโดนตัด ยอดเงินกับปุ่มจัดการอยู่นอกจอ (ต้องปัดหาในกรอบ)
   ⇒ ≤640px: แต่ละแถว = การ์ด · ช่องแรกเป็นหัวการ์ด · ช่องอื่น "ป้าย ··· ค่า" ·
     ช่องปุ่ม (td.acts) เป็นแถวท้ายการ์ด · ป้ายมาจาก data-label ที่ adTable ติดให้ */
table.adtbl tbody tr.pick:focus-visible{outline:2px solid var(--ember-lit); outline-offset:-2px}
@media (max-width:640px){
  .adtwrap.adcards{overflow:visible; max-height:none}
  .adcards table.adtbl, .adcards table.adtbl tbody{display:block; width:100%}
  .adcards table.adtbl thead{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap}
  /* ช่องข้อมูลวางเป็นตาราง 2 คอลัมน์ "ป้ายเล็กบน · ค่าล่าง" ⇒ การ์ดเตี้ยลงครึ่งหนึ่ง */
  .adcards table.adtbl tbody tr{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 14px; padding:12px 14px; border-bottom:1px solid var(--adline)}
  .adcards table.adtbl tbody tr:last-child{border-bottom:0}
  /* ⚠ block ไม่ใช่ flex — ป้ายหลายอันในช่องเดียว (adTag) ต้องเรียงต่อกันในบรรทัด ไม่ใช่ซ้อนลง */
  .adcards table.adtbl tbody td{display:block; padding:0; border:0; text-align:left; min-width:0;
    white-space:normal; overflow-wrap:anywhere}
  .adcards table.adtbl tbody td .adtag{margin:0 4px 2px 0}
  .adcards table.adtbl tbody td[data-label]::before{content:attr(data-label); display:block;
    margin-bottom:2px;
    color:var(--tx3); font-size:11.5px; font-family:"Anuphan",sans-serif; font-weight:400;
    text-align:left; letter-spacing:0; text-transform:none}
  /* หัวการ์ด = ช่องแรก (+ ช่องชื่อ/ปุ่ม/หัวกลุ่ม): เต็มความกว้าง ไม่มีป้าย */
  .adcards table.adtbl tbody td:first-child, .adcards table.adtbl tbody td.who,
  .adcards table.adtbl tbody td.acts, .adcards table.adtbl tbody td.span{grid-column:1 / -1}
  .adcards table.adtbl tbody td:first-child{font-size:14px}
  .adcards table.adtbl tbody td:first-child::before{content:none}
  .adcards table.adtbl tbody td:empty{display:none}
  .adcards table.adtbl tbody td.who::before{display:none}
  .adcards table.adtbl tbody td.acts{padding-top:4px; display:flex}
  .adcards table.adtbl tbody td.acts::before{content:none}
  .adcards table.adtbl tbody td.acts .adtacts{justify-content:flex-start; width:100%}
  .adcards table.adtbl tbody td.acts .btn{flex:1 1 auto}
  .adcards table.adtbl tbody td.span{display:block; text-align:left; margin:-12px -14px 0;
    padding:8px 14px}
  .adcards table.adtbl tbody td.span::before{content:none}
  .adcards table.adtbl tbody tr.need{box-shadow:inset 3px 0 0 var(--ember)}
  .adcards table.adtbl tbody tr.need td:first-child{box-shadow:none}
  .adcards table.adtbl tbody tr.sel td:first-child{box-shadow:none}
  .adcards table.adtbl tbody tr.sel{box-shadow:inset 3px 0 0 var(--ember-lit)}
  .adcards td.money .btn{margin-top:0}
  .adwho .adfine{max-width:62vw}
}

/* ── หน้าว่าง / กำลังโหลด / ผิดพลาด (adEmpty(opt) · adSkel · adState) ── */
.adempty.rich{display:grid; justify-items:center; gap:6px; padding:30px 18px}
.adempty.rich .ei{width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:var(--glass-2); color:var(--tx3)}
.adempty.rich .ei .adi{width:20px; height:20px}
.adempty.rich.ok .ei{color:var(--ok); background:rgba(127,224,127,.1)}
.adempty.rich b{color:var(--tx2); font-weight:600; font-size:14px}
.adempty.rich .btn{margin-top:6px}
.aderr{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 16px;
  padding:12px 14px; border-radius:12px; border:1px solid rgba(255,107,90,.35);
  background:rgba(255,107,90,.06)}
.aderr .ei{color:var(--bad); flex:none; display:grid}
.aderr .ei .adi{width:20px; height:20px}
.aderr .tx{flex:1 1 220px; display:grid; gap:2px; min-width:0}
.aderr .tx b{font-weight:600; font-size:13.5px}
.aderr .btn .adi{width:15px; height:15px}
/* ⚠ หน้าเช่าจอ (มาตรฐานที่เสร็จแล้ว) คงโครงโหลดแบบนิ่งเดิม — ไม่ใส่แสงวิ่ง */
main:not([data-page="admin-rental"]) .adskel i{position:relative; overflow:hidden}
main:not([data-page="admin-rental"]) .adskel i::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:adshim 1.3s ease-in-out infinite}
@keyframes adshim{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .adskel i::after{animation:none; display:none} }

/* ── ลิ้นชัก → แผ่นเลื่อนขึ้นจากล่างบนมือถือ (adDrawer) ── */
.drtitle{min-width:0; flex:1}
.drtitle .adfine{margin:2px 0 0}
.drgrab{display:none}
.drawercard.wide{width:min(720px,100%)}
.drawercard .modalhead .iconbtn .adi{width:18px; height:18px}
@media (max-width:640px){
  .drawerwrap{place-items:end stretch; justify-content:stretch; padding:0}
  .drawercard, .drawercard.wide{width:100%; height:auto; max-height:88vh;
    border-left:0; border-top:1px solid var(--line-2); border-radius:18px 18px 0 0;
    padding-bottom:env(safe-area-inset-bottom); animation:adsheet 220ms var(--ease)}
  .drgrab{display:block; width:40px; height:4px; border-radius:4px; background:var(--tx3);
    opacity:.5; margin:8px auto 0; flex:none}
  .drawercard .modalhead{padding:10px 16px 12px}
  .drawercard .modalhead .iconbtn.sm{width:44px; height:44px}
  .drawercard .modalbody{padding:16px}
}
@keyframes adsheet{from{transform:translateY(40px); opacity:.4} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .drawercard{animation:none} }

/* ── กราฟแท่ง: แท่งแนวนอนบนกล่องแคบ (B9) ──
   ⚠ วัดที่ความกว้างของกล่องกราฟเอง (container query) — กล่องครึ่งจอบนจอกว้างก็ได้แท่งนอน
     มี media query สำรองสำหรับเบราว์เซอร์ที่ไม่รู้จัก container query */
.adchartbox{container-type:inline-size; container-name:adchart}
.adhbars{display:none; list-style:none; margin:0; padding:2px 0 0; gap:5px}
.adhbars li{display:grid; grid-template-columns:64px minmax(0,1fr) minmax(84px,auto);
  align-items:center; gap:10px; font-size:12px; min-height:22px}
.adhbars .d{color:var(--tx3); font-family:"IBM Plex Mono",monospace; white-space:nowrap}
.adhbars li.now .d{color:var(--tx); font-weight:600}
.adhbars .b{position:relative; height:10px; border-radius:6px; background:rgba(255,255,255,.05);
  overflow:hidden; display:flex; flex-direction:column}
.adhbars .b i{display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,#4A1220,#FF2D46)}
.adhbars .b i.zero{background:none}
.adhbars .b i.v2{position:absolute; left:0; bottom:0; height:3px;
  background:linear-gradient(90deg,#1E5C6B,#95E2F2)}
.adhbars li.now .b i.v1{background:linear-gradient(90deg,#8E1226,#FF6A7C)}
.adhbars .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  color:var(--tx2); text-align:right; white-space:nowrap}
.adhbars .v small{color:#95E2F2; font-size:11px}
.adhbars li.more{display:block; color:var(--tx3); font-size:11.5px; padding-top:4px}
@container adchart (max-width:560px){
  .adchartbox>svg, .adchartbox>.adtip{display:none}
  .adhbars{display:grid}
}
@supports not (container-type:inline-size){
  @media (max-width:640px){
    .adchartbox>svg, .adchartbox>.adtip{display:none}
    .adhbars{display:grid}
  }
}

/* ── บันทึก: ไอคอนเส้นแทนตัวอักษร + ป้ายแอดมิน (B4) ── */
.adline .ic .adi, .adev .ic .adi{width:14px; height:14px}
.adev .ic{width:26px; height:26px; border-radius:8px; display:grid; place-items:center}
.adev .ic.sale{background:rgba(127,224,127,.13); color:var(--ok)}
.adev .ic.people{background:rgba(95,208,232,.12); color:var(--info)}
.adev .ic.money{background:rgba(255,194,77,.12); color:var(--gold)}
.adev .ic.admin{background:rgba(255,45,70,.13); color:var(--ember-lit)}
.adev .ic.risk{background:rgba(255,107,90,.14); color:var(--bad)}
.adev .ic.other{background:var(--glass-2); color:var(--tx3)}
.adev.byadmin{border-left-color:var(--gold)}
.adline .tx .adtag, .adev .tx .adtag{font-size:10.5px; padding:0 7px 0 6px; vertical-align:1px}
.adline .tx, .adev .tx{overflow-wrap:anywhere}
.adev:focus-visible{outline:2px solid var(--ember-lit); outline-offset:-2px}

/* ── ใบเติมเงินที่ไม่มีสลิป (B6) ── */
.adslip.noslip{background:rgba(255,107,90,.035)}
.adnoslip{display:flex; gap:7px; align-items:flex-start; margin-top:6px; font-size:12.5px;
  color:#FF9B8C; line-height:1.45}
.adnoslip .adi{width:15px; height:15px; margin-top:1px}

/* ── ป้ายเตือนในแถบสินค้า (B8) ── */
.adprodf.warn{background:rgba(224,168,119,.07)}
.adprodf.warn .t{color:#F0C199; font-family:"Anuphan",sans-serif; font-size:12.5px}

/* ═════════════════════════════════════════════════════════════════════════
   หน้าภาพรวม + บันทึกกิจกรรม รุ่น 2 (2026-10-01) — ใช้ชุดกลาง v2 ข้างบน · บล็อกนี้มีแค่ของเฉพาะสองหน้า
   ═════════════════════════════════════════════════════════════════════════ */

/* ── งานรอแอดมิน: ทั้งแถวเป็นลิงก์ (≥44px) · ตัวเลข+ลูกศรอยู่บรรทัดเดียวกับข้อความเสมอ ── */
.adtodo .ic .adi{width:17px; height:17px}
.adtodo.go{color:var(--tx); text-decoration:none; cursor:pointer;
  transition:background var(--t-fast) var(--ease)}
.adtodo.go:hover{background:rgba(255,255,255,.035)}
.adtodo.go:focus-visible{outline:2px solid var(--ember-lit); outline-offset:-2px}
.adtodo .chev{width:16px; height:16px; color:var(--tx3); flex:none}
.adtodo .n{margin-left:auto; flex:none}
.adtodo .n + .chev{margin-left:-4px}
.adtodo .tx + .chev{margin-left:auto}
#ad-todo .adempty.rich{padding:22px 16px}

/* ── แถบสุขภาพระบบ ── */
.adhealth{list-style:none; margin:0; padding:0}
.adhealth li{display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--adline);
  border-left:3px solid transparent}
.adhealth li:last-child{border-bottom:0}
.adhealth li.is-bad{border-left-color:var(--bad); background:rgba(255,107,90,.045)}
.adhealth li.is-warn{border-left-color:var(--warn)}
.adhealth .hi{flex:none; width:34px; height:34px; border-radius:10px; display:grid;
  place-items:center; background:var(--glass-2); color:var(--tx3)}
.adhealth .hi .adi{width:17px; height:17px}
.adhealth li.is-ok .hi{color:var(--ok); background:rgba(127,224,127,.1)}
.adhealth li.is-warn .hi{color:var(--warn); background:rgba(224,168,119,.12)}
.adhealth li.is-bad .hi{color:var(--bad); background:rgba(255,107,90,.13)}
.adhealth .tx{flex:1; min-width:0}
.adhealth .hd{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.adhealth .hd b{font-size:13.5px; font-weight:600}
.adhealth p{margin:3px 0 0; font-size:12.5px; color:var(--tx2); line-height:1.5;
  overflow-wrap:anywhere}
.adhealth p.todo{color:var(--tx)}
.adhealth li.is-bad p.todo{color:#FFB4A8}
.adhealth .btn{margin-top:8px}
.adtech{margin-top:6px}
.adtech summary{font-size:11.5px; color:var(--tx3); cursor:pointer; width:max-content;
  max-width:100%; min-height:28px; display:flex; align-items:center}
.adtech summary:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px; border-radius:4px}
.adtech code{display:block; margin-top:4px; padding:6px 8px; border-radius:8px;
  background:rgba(255,255,255,.04); font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  color:var(--tx3); overflow-wrap:anywhere; white-space:pre-wrap}

/* ── ส่วนอื่นของภาพรวม ── */
.ovins #ad-insights{padding:14px}
.ovrange{padding:0; border:0; gap:6px}
#ad-kpis .adkpi .addelta, #al-stats .adkpi .addelta{margin-top:1px}

/* ── ประโยคบันทึก: ชื่อคนกดได้ + "กับใคร/อะไร" ── */
.adwhob{background:none; border:0; padding:0 1px; margin:0; font:inherit; font-weight:600;
  color:var(--tx); cursor:pointer; text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.22); text-underline-offset:3px; border-radius:4px}
.adwhob:hover{color:var(--ember-lit); text-decoration-color:currentColor}
.adwhob:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.adwhob.tgwho{font-weight:500}
.adline .tx .tg, .adev .tx .tg{color:var(--tx)}
.adline .tx .tgsep, .adev .tx .tgsep{color:var(--tx3)}
.adev .chev{width:15px; height:15px; color:var(--tx3); opacity:.6}
.adev:hover .chev{opacity:1}
.drline{margin:0 0 10px; font-size:14px; line-height:1.55}
.drbox h3 .adi{width:15px; height:15px; vertical-align:-2px}
.drtech{border:1px dashed var(--line); border-radius:12px; padding:8px 14px 12px}
.drtech .drkv{margin:8px 0 10px; font-size:12px}
.drtech .drkv dd{font-size:11.5px; overflow-wrap:anywhere}

/* ── บันทึก: ตัวเลข + การ์ดความปลอดภัย ── */
.alsum{display:grid; gap:14px; margin-bottom:16px}
.alsum.two{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start}
.alsum .adkpis.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.alsec .alsech{display:flex; gap:12px; align-items:center; padding:12px 16px}
.alsec .alsech .ic{flex:none; width:38px; height:38px; border-radius:12px; display:grid;
  place-items:center; background:var(--glass-2)}
.alsec .alsech .ic .adi{width:19px; height:19px}
.alsec .ic.is-ok{color:var(--ok); background:rgba(127,224,127,.1)}
.alsec .ic.is-warn{color:var(--warn); background:rgba(224,168,119,.12)}
.alsec .ic.is-bad{color:var(--bad); background:rgba(255,107,90,.13)}
.alsec .alsech .tx{display:grid; gap:1px; min-width:0}
.alsec .alsech b{font-size:14px; font-weight:600}
.alseclist{list-style:none; margin:0; padding:0 16px 8px; display:grid; gap:2px}
.alseclist li{display:grid; grid-template-columns:minmax(0,1fr) auto 84px; gap:10px;
  align-items:baseline; padding:5px 0; font-size:12.5px; color:var(--tx2);
  border-top:1px solid rgba(255,255,255,.045)}
.alseclist li b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-weight:600; color:var(--tx3)}
.alseclist li.hot b{color:#FF9B8C}
.alseclist li small{color:var(--tx3); font-size:11.5px; text-align:right}
.alsec .adtfoot{background:none}

/* ── บันทึก: แถวกรอง — ค้นหา+ช่วงวันแถวบน · ชิปมีแถวของตัวเอง (⛔ เดิมจอ 1440 ตกบรรทัด) ── */
.alfbar{flex-wrap:nowrap}
.alfbar .adfind{flex:1 1 320px; max-width:460px}
.aldates{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.alrange{display:inline-flex; gap:8px; flex-wrap:wrap}
.alrange[hidden]{display:none}
.alrange label{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tx3)}
input.adsel[type=date]{color-scheme:dark; min-height:34px}
select.adsel:focus-visible, input.adsel:focus-visible{outline:2px solid var(--ember-lit);
  outline-offset:1px}
.alchips{padding-top:9px; padding-bottom:9px}
#al-person[hidden]{display:none}
.alperson{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px;
  border-bottom:1px solid var(--adline); background:rgba(95,208,232,.04)}
.alperson .btn .adi{width:14px; height:14px}

@media (max-width:1060px){
  .alsum.two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .adtodo{padding:12px 14px; gap:11px}
  .adtodo .n{font-size:17px}
  .adhealth li{padding:12px 14px}
  .adhealth .btn{min-height:44px}
  .ovins #ad-insights{padding:10px}
  .adins .acts .btn{min-height:44px; flex:1 1 auto}
  .ovrange{width:100%; order:3}
  .ovrange .adchip{flex:1 1 0; justify-content:center}
  .adwhob{padding:4px 1px}
  .adev{grid-template-columns:42px 26px minmax(0,1fr) 15px; gap:9px; padding:10px 8px}
  .alfbar{flex-wrap:wrap}
  .alfbar .adfind{max-width:none}
  .aldates{flex:1 1 100%; justify-content:stretch}
  .aldates>select.adsel{flex:1 1 100%; min-height:44px}
  .alrange{flex:1 1 100%}
  .alrange label{flex:1 1 0}
  .alrange input{flex:1; min-width:0; min-height:44px}
  /* ชิปหมวดเลื่อนแนวนอนแถวเดียว (แถวของตัวเอง ไม่ได้ซ้อนใน .adfilters อีกชั้น) */
  .alchips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding:8px 12px}
  .alchips::-webkit-scrollbar{display:none}
  .alchips .adchip{flex:none}
  .alperson{padding:10px 12px}
  .alperson .btn{min-height:44px}
  .alseclist li{grid-template-columns:minmax(0,1fr) auto; }
  .alseclist li small{grid-column:1 / -1; text-align:left; margin-top:-4px}
  .alsec .adtfoot .btn{min-height:44px; flex:1 1 auto}
  .drtech .btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .adtodo.go, .adev{transition:none}
}

/* ═══════════ admin-v2 · customers-chat (ลูกค้า + แชท) ═══════════
   ⓘ ใส่ CSS ของหน้านี้ใต้บรรทัดนี้เท่านั้น — กันชนกับหน้าอื่นตอนรวมงาน
   ─────────────────────────────────────────── */
/* ── หน้าลูกค้า (acx-*) ── */
.acx-list .adfbar{border-bottom:0; padding-bottom:6px}
.acx-chips{padding:4px 16px 11px; border-bottom:1px solid var(--adline)}
.acx-sort{display:inline-flex; align-items:center; gap:4px; background:none; border:0;
  padding:4px 6px; margin:-4px -6px; border-radius:7px; color:inherit; font:inherit;
  cursor:pointer; min-height:30px; text-transform:inherit; letter-spacing:inherit}
.acx-sort .adi{width:13px; height:13px; opacity:.45}
.acx-sort:hover{color:var(--tx); background:var(--glass-2)}
.acx-sort.on{color:var(--ember-lit)}
.acx-sort.on .adi{opacity:1}
.acx-sort:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
th.r .acx-sort{margin-left:auto}
.acx-keys{display:flex; align-items:center; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.acx-list td.mute{color:var(--tx3)}
.acx-list tr.pick{cursor:pointer}

/* ── การ์ดลูกค้า 360 (c3-*) · ใช้ทั้งลิ้นชักหน้าลูกค้าและแผงข้างแชท ── */
.c3{display:flex; flex-direction:column; gap:14px; min-width:0}
.c3-head{display:flex; gap:12px; align-items:flex-start; min-width:0}
.c3-av{flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  font-weight:700; font-size:19px; color:#fff;
  background:linear-gradient(135deg, var(--ember-lit), #8E1226)}
.c3-who{display:flex; flex-direction:column; gap:3px; min-width:0}
.c3-who > b{font-size:17px; line-height:1.3; overflow-wrap:anywhere}
.c3-who .adfine{overflow-wrap:anywhere}
.c3-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:3px}
.c3-sec{display:flex; flex-direction:column; gap:7px; min-width:0}
.c3-h{display:flex; align-items:center; gap:7px; margin:0; font-size:13px; font-weight:600;
  color:var(--tx2)}
.c3-h .adi{width:15px; height:15px; color:var(--tx3)}
.c3-h .sp{flex:1}
.c3-h .btn{min-height:30px}
.c3-n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tx3);
  padding:1px 7px; border-radius:999px; background:var(--glass-2)}
.c3-mini{display:inline-flex; gap:6px; flex-wrap:wrap}
.c3-risk{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px;
  border:1px solid var(--adline); background:var(--adsurf-2, rgba(255,255,255,.02))}
.c3-risk > .adi{width:17px; height:17px; margin-top:2px; flex:none}
.c3-risk > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.c3-risk b{font-size:13.5px; line-height:1.45}
.c3-risk small{font-size:12px; color:var(--tx3); line-height:1.5}
.c3-risk.is-bad{border-color:rgba(255,107,90,.45); background:rgba(255,107,90,.07)}
.c3-risk.is-bad > .adi{color:var(--bad)}
.c3-risk.is-warn{border-color:rgba(224,168,119,.42); background:rgba(224,168,119,.07)}
.c3-risk.is-warn > .adi{color:var(--warn)}
.c3-risk.is-info > .adi{color:var(--info)}
.c3-calm{display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; color:var(--ok)}
.c3-calm .adi{width:15px; height:15px}
.c3-nums{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.c3-num{border:1px solid var(--adline); border-radius:12px; padding:9px 11px; min-width:0;
  display:flex; flex-direction:column; gap:2px; background:var(--adsurf)}
.c3-num .lab{font-size:11.5px; color:var(--tx3)}
.c3-num b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:600; overflow-wrap:anywhere}
.c3-num small{font-size:11.5px; color:var(--tx3); line-height:1.4}
.c3-num.is-money b{color:var(--gold)}
.c3-num.is-ok b{color:var(--ok)}
.c3-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px;
  border:1px solid var(--adline); border-radius:10px; font-size:13px; min-width:0;
  color:var(--tx); text-decoration:none}
.c3-row .t{flex:1 1 160px; min-width:0; overflow-wrap:anywhere}
.c3-row .m{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.c3-row .m.up{color:var(--ok)}
.c3-row .m.down{color:var(--bad)}
.c3-row > .adi{width:16px; height:16px; flex:none}
.c3-row.link:hover{border-color:var(--adline-hi); background:var(--glass-2)}
.c3-row.link:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.c3-row.job.is-bad{border-color:rgba(255,107,90,.45)}
.c3-row.job.is-bad > .adi{color:var(--bad)}
.c3-row.job.is-warn{border-color:rgba(224,168,119,.42)}
.c3-row.job.is-warn > .adi{color:var(--warn)}
.c3-row.key{flex-direction:column; align-items:stretch; gap:6px}
.c3-row.key.gone{opacity:.62}
.c3-row .kt, .c3-row .ks{display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0}
.c3-row .kt code{font-family:"IBM Plex Mono",monospace; font-size:12.5px; overflow-wrap:anywhere}
.c3-row .ks .adfine.hot{color:var(--warn)}
.c3-acts{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.c3-acts .sp{flex:1}
.c3-empty{margin:0; font-size:12.5px; color:var(--tx3)}
.c3-tl{list-style:none; margin:0; padding:0 0 0 12px; border-left:2px solid var(--adline);
  display:flex; flex-direction:column; gap:8px}
.c3-tl li{display:flex; flex-direction:column; gap:1px; position:relative; font-size:13px;
  line-height:1.45}
.c3-tl li::before{content:""; position:absolute; left:-17px; top:6px; width:8px; height:8px;
  border-radius:50%; background:var(--tx3)}
.c3-tl li.adm::before{background:var(--info)}
.c3-tl time{font-size:11.5px; color:var(--tx3); font-family:"IBM Plex Mono",monospace}
.c3-tl small{color:var(--tx3); font-size:12px}
.c3-tl .adtag{font-size:10.5px; padding:1px 6px; vertical-align:1px}
.c3-kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 14px; margin:0;
  font-size:13px}
.c3-kv dt{color:var(--tx3)}
.c3-kv dd{margin:0; overflow-wrap:anywhere}
.c3-note{margin:0; font-size:12px; color:var(--tx3); line-height:1.5}
.c3-lead{margin:0 0 10px; font-size:13.5px; color:var(--tx2); line-height:1.5}
.c3-linkhost:empty{display:none}
.c3-linkhost{display:flex; flex-direction:column; gap:6px}
.c3-danger{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px;
  border:1px dashed rgba(255,107,90,.4)}
.c3-danger p{margin:0; font-size:12.5px; color:var(--tx2); line-height:1.5}
.c3-danger .btn{align-self:flex-start}
.c3-slip{border:1px solid var(--adline); border-radius:12px; overflow:hidden; margin:0 0 10px;
  background:#000; display:grid; place-items:center; max-height:56vh}
.c3-slip img{max-width:100%; max-height:56vh; object-fit:contain; display:block}
/* แผงแคบ (แชท 352px) — ตัวเลข 2 คอลัมน์ */
.c3.compact .c3-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3.compact .c3-head .c3-av{width:40px; height:40px; font-size:17px}
.c3.compact .c3-who > b{font-size:15.5px}
@media (max-width:760px){
  .c3-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .c3 .btn, .acx-list .btn, .cts-acts .btn, .cts-sla .btn{min-height:44px}
  .c3-h .btn{min-height:44px}
  .c3-acts .btn{flex:1 1 auto}
  .c3-danger .btn{align-self:stretch}
  /* ชิปกลุ่มลูกค้า: แถวเดียวเลื่อนแนวนอน (ไม่ตกเป็น 3 บรรทัด) */
  .acx-chips{padding:4px 12px 10px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .acx-chips::-webkit-scrollbar{display:none}
  .acx-chips .adchip{flex:none}
  /* ทั้งการ์ดกดได้อยู่แล้ว ⇒ ไม่ต้องมีปุ่ม "ดูข้อมูล" กินอีกแถว (หน้าเตี้ยลงเกือบครึ่ง) */
  .acx-list .adcards td.acts{display:none}
  .acx-list .adcards tbody tr{gap:6px 14px; padding:11px 14px}
}

/* ── แชท v2 (cts-*) ── */
.cts-sla{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px;
  padding:9px 12px; border-radius:12px; font-size:13.5px;
  border:1px solid rgba(255,107,90,.45); background:rgba(255,107,90,.08); color:var(--tx)}
.cts-sla > .adi{width:17px; height:17px; color:var(--bad); flex:none}
.cts-sla > span{flex:1 1 220px; min-width:0}
.chtage.cts-ok{color:var(--ok)}
.chtage.cts-warn{color:var(--warn)}
.chtage.cts-late{color:var(--bad); font-weight:600}
.cts-timer{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:3px 9px;
  border-radius:999px; border:1px solid var(--adline); white-space:nowrap}
.cts-timer .adi{width:13px; height:13px}
.cts-timer.cts-ok{color:var(--ok); border-color:rgba(127,224,127,.35)}
.cts-timer.cts-warn{color:var(--warn); border-color:rgba(224,168,119,.42)}
.cts-timer.cts-late{color:var(--bad); border-color:rgba(255,107,90,.5);
  background:rgba(255,107,90,.08)}
.cts-path{display:inline-block; padding:0 7px; margin:0 2px; border-radius:6px;
  background:var(--glass-2); border:1px solid var(--adline); font-size:.92em;
  color:var(--info); white-space:nowrap}
.cts-acts{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:0 0 8px}
.cts-acts .lab{font-size:11.5px; color:var(--tx3); margin-right:2px}
.cts-acts .cts-act{display:inline-flex; align-items:center; gap:6px}
.cts-acts .cts-act .adi{width:14px; height:14px}
.cts-acts .cts-act.is-bad{border-color:rgba(255,107,90,.5); color:#FF9B8C}
.cts-acts .cts-act.is-warn{border-color:rgba(224,168,119,.5); color:#F0C199}
.cts-sbody{display:flex; flex-direction:column; gap:14px}
.cts-ticket{padding-bottom:12px; border-bottom:1px solid var(--adline)}
.cts-x .adi{width:16px; height:16px}
.cts-canned{display:flex; flex-direction:column; gap:10px; margin-bottom:12px}
.cts-crow{display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:8px;
  align-items:end; padding:10px; border:1px solid var(--adline); border-radius:12px}
.cts-crow .field{margin:0}
.cts-crow textarea{resize:vertical; min-height:44px}
/* สรุปจากผู้ช่วย: ไอคอน SVG แทนอิโมจิ */
.chtbrief::before{content:none}
.chtbrief{display:flex; align-items:flex-start; gap:7px}
.chtbrief .adi{width:15px; height:15px; color:var(--info); margin-top:2px; flex:none}
/* ไอคอนในมาร์กอัป (data-ico → SVG) */
.chtmenu .adi{width:15px; height:15px; margin-right:7px; vertical-align:-3px; color:var(--tx3)}
.chtmorebtn .adi{width:18px; height:18px}
.chtchip .adi, .chtsug b .adi{width:14px; height:14px; margin-right:5px; vertical-align:-2px}
.chtemoji .adi{width:30px; height:30px}
.chtempty .chtemoji .adi{width:22px; height:22px}
.chtstate .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tx3)}
/* แท็บคิว 3 ชื่อยาวไม่เท่ากัน ("บอทตอบแล้ว") — กว้างตามคำ ไม่แบ่งเท่ากันจนคำถูกตัด */
.chttabs button{flex:1 1 auto; padding:7px 5px}
@media (max-width:640px){
  .cts-crow{grid-template-columns:minmax(0,1fr)}
  .cts-timer{display:none}
  .cts-acts{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -2px}
  .cts-acts::-webkit-scrollbar{display:none}
  .cts-acts .cts-act{flex:none}
  .cts-acts .lab{display:none}
}
/* ⛤ จอกว้าง: สามช่อง — แผงลูกค้า 360 เปิดค้างทางขวาตลอด (ไม่ต้องกดเปิดทุกเรื่อง) */
@media (min-width:1280px){
  .chtwrap{grid-template-columns:304px minmax(0,1fr) 340px}
  .chttabs button{font-size:12px; gap:4px}
  /* ช่องกลางแคบลง ⇒ หัวเรื่องบรรทัดเดียว (ชื่อย่อด้วย … แทนการดันปุ่มตกบรรทัด) */
  .chtthead{flex-wrap:nowrap}
  .chtthead .chttt{flex:1 1 60px}
  .chtthead .btn{padding-inline:11px}
  .chtwrap > .cts-side, .chtwrap > .cts-side[hidden]{display:flex; position:static; width:auto;
    z-index:auto; box-shadow:none; animation:none; min-width:0; min-height:0}
  .chtwrap > .cts-side .cts-x{display:none}
  .chtwrap > .cts-side:focus{outline:2px solid var(--ember-lit); outline-offset:-2px}
}
@media (prefers-reduced-motion:reduce){
  .c3-row, .acx-sort, .cts-acts .btn{transition:none}
  .chtwrap > .cts-side{animation:none}
}
/* end admin-v2 · customers-chat */


/* ═══════════ admin-v2 · orders (คำสั่งซื้อ) ═══════════
   ⓘ ใส่ CSS ของหน้านี้ใต้บรรทัดนี้เท่านั้น — กันชนกับหน้าอื่นตอนรวมงาน
   ─────────────────────────────────────────── */
.aostack>#ao-verdict>.adverdict{margin-bottom:0}

/* ── คิว "ต้องจัดการ" ── แถวละเรื่อง: ไอคอน · ประโยค · ใคร/ใบ/ยอด · ปุ่มทำต่อ */
.aoqpanel>header h2:focus{outline:none}
.aoqpanel>header h2:focus-visible{outline:2px solid var(--ember-lit); outline-offset:3px}
.aoq{list-style:none; margin:0; padding:0}
.aoqi{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px 14px;
  align-items:center; padding:13px 16px; border-bottom:1px solid var(--adline);
  position:relative}
.aoqi:last-child{border-bottom:0}
.aoqi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--info)}
.aoqi.is-bad::before{background:var(--bad)}
.aoqi.is-warn::before{background:var(--warn)}
.aoqi.is-ok::before{background:var(--ok)}
.aoqi .ic{width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--glass-2); color:var(--info)}
.aoqi.is-bad .ic{color:var(--bad); background:rgba(255,107,90,.1)}
.aoqi.is-warn .ic{color:var(--warn); background:rgba(224,168,119,.1)}
.aoqi .ic .adi{width:18px; height:18px}
.aoqi .tx{min-width:0}
.aoqi .t{margin:0; font-size:14px; font-weight:600; line-height:1.45; overflow-wrap:anywhere}
.aoqi .m{margin:3px 0 0; display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap;
  font-size:13px; color:var(--tx2); min-width:0}
.aoqi .m>b:first-child{color:var(--tx); font-weight:500; overflow-wrap:anywhere}
.aoqi small{display:block; margin-top:3px; color:var(--tx3); font-size:12px; line-height:1.5}
.aoqi .acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.aoqid{font:inherit; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--tx2);
  background:none; border:0; padding:2px 0; cursor:pointer; text-decoration:underline;
  text-decoration-color:var(--adline-hi); text-underline-offset:3px}
.aoqid:hover{color:var(--tx)}
.aoqid:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px; border-radius:4px}
.aogold{color:var(--gold); font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; font-weight:600}
.aoqpanel .admore{padding:10px 16px}

/* ── แถวกรอง: ค้นหา + ช่วงวัน + แพ็ก + วิธีจ่าย + เรียง · ชิปมีแถวของตัวเอง ── */
.aofbar .adfind{flex:1 1 260px; max-width:420px}
.aofbar #ao-clear[hidden]{display:none}
.aorange{display:inline-flex; gap:8px; flex-wrap:wrap}
.aorange[hidden]{display:none}
.aorange label{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  color:var(--tx3)}
.aochips{padding-top:9px; padding-bottom:9px; border-top:1px solid var(--adline)}
.aosum{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0;
  padding:9px 16px; font-size:12.5px; color:var(--tx3); border-top:1px solid var(--adline);
  background:rgba(255,194,77,.03)}
.aosum .adi{width:14px; height:14px}
.aosum .dotsep{opacity:.5}
#ao-sum:empty{display:none}
#ao-list>.adnote{padding-top:12px}

/* ── ตาราง: แถวกดได้ · ช่องแรกมียอด+สถานะสำหรับการ์ดมือถือ (จอกว้างซ่อน) ── */
#ao-list table.adtbl tbody tr.pick{cursor:pointer}
#ao-list table.adtbl tbody tr.pick:hover td{background:rgba(255,255,255,.02)}
#ao-list .aomob{display:none}
#ao-list .aonw{white-space:nowrap}

/* ── ลิ้นชักใบ ── */
.aodtop{display:grid; gap:8px; margin-bottom:12px}
.aodrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.aodamt{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:24px; font-weight:600; color:var(--gold); letter-spacing:-.02em}
.aodtags{display:inline-flex; gap:6px; flex-wrap:wrap}
.aodnow{margin:0; font-size:14px; line-height:1.55; color:var(--tx); padding:10px 12px;
  border-radius:10px; background:var(--glass-2); border:1px solid var(--adline)}
.aodacts{flex-wrap:wrap}
.aodwhy{display:flex; gap:7px; align-items:flex-start; margin:10px 0 0; font-size:12.5px;
  color:var(--tx3); line-height:1.5}
.aodwhy .adi{width:15px; height:15px; margin-top:2px; color:var(--info)}
.aodwho{display:flex; flex-direction:column; gap:1px; margin-bottom:8px}
.aodwho b{font-weight:600; overflow-wrap:anywhere}
.aodchips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.aotl{list-style:none; margin:0; padding:0; position:relative}
.aotl::before{content:""; position:absolute; left:13px; top:6px; bottom:6px; width:1px;
  background:var(--adline)}
.aotl li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px;
  padding:6px 0; position:relative}
.aotl .dot{width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--adsurf-2, #16161f); border:1px solid var(--adline); color:var(--info)}
.aotl .dot .adi{width:14px; height:14px}
.aotl li.is-ok .dot{color:var(--ok); border-color:rgba(127,224,127,.35)}
.aotl li.is-bad .dot{color:var(--bad); border-color:rgba(255,107,90,.45)}
.aotl li.is-warn .dot{color:var(--warn); border-color:rgba(224,168,119,.42)}
.aotl li.is-money .dot{color:var(--gold); border-color:rgba(255,194,77,.36)}
.aotl li.is-mute .dot{color:var(--tx3)}
.aotl .tx p{margin:3px 0 1px; font-size:13.5px; line-height:1.5; overflow-wrap:anywhere}
.aotech{border-style:dashed}
.aotech summary{cursor:pointer; font-size:12.5px; color:var(--tx3); min-height:28px;
  display:flex; align-items:center}
.aotech summary:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.aotech p{margin:8px 0 0; overflow-wrap:anywhere}

@media (max-width:1060px){
  .aoqi{grid-template-columns:auto minmax(0,1fr)}
  .aoqi .acts{grid-column:1 / -1; justify-content:flex-start}
}
@media (max-width:640px){
  .aofbar .adfind{max-width:none}
  .aofbar>select.adsel{flex:1 1 calc(50% - 4px); min-width:0}
  .aofbar>#ao-days{flex-basis:100%}
  .aorange{flex:1 1 100%}
  .aorange label{flex:1 1 0}
  .aorange input{flex:1; min-width:0; min-height:44px}
  .aofbar #ao-clear{flex:1 1 100%; min-height:44px}
  .aochips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding:8px 12px}
  .aochips::-webkit-scrollbar{display:none}
  .aochips .adchip{flex:none}
  .aoqi{padding:12px 14px; gap:10px 12px}
  .aoqi .acts .btn{min-height:44px; flex:1 1 auto}
  .aoqid{min-height:32px}
  .aosum{padding:9px 14px}
  /* การ์ดมือถือ: บรรทัดแรก = เลขใบ + ยอด + สถานะ · ซ่อนช่องยอด/สถานะที่ซ้ำ */
  #ao-list .aoidc{display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap}
  #ao-list .aomob{display:inline-flex; align-items:center; gap:8px; margin-left:auto}
  #ao-list .aomob .aomoney{color:var(--gold); font-size:15px}
  #ao-list .aomob .adtag{margin:0}
  #ao-list td.aohm{display:none}
  #ao-list td.acts .btn{min-height:44px}
  .aodamt{font-size:21px}
  .aodacts .btn{min-height:44px; flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  #ao-list table.adtbl tbody tr.pick:hover td{transition:none}
}
/* end admin-v2 · orders */


/* ═══════════ admin-v2 · money (เงินและคูปอง) ═══════════
   ⓘ ใส่ CSS ของหน้านี้ใต้บรรทัดนี้เท่านั้น — กันชนกับหน้าอื่นตอนรวมงาน
   ─────────────────────────────────────────── */
/* คิวตรวจสลิป — การ์ด: รูปสลิป | ยอด·คน·เช็คลิสต์ | ปุ่ม  (มือถือ: ปุ่มล่างเต็มแถว) */
.amstack .amq{display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:16px;
  align-items:start; padding:16px; border-top:1px solid var(--adline);
  border-left:3px solid transparent}
.amstack .amq.lvl-bad{border-left-color:var(--bad); background:rgba(255,107,90,.035)}
.amstack .amq.lvl-warn{border-left-color:var(--warn)}
.amstack .amq.lvl-ok{border-left-color:var(--ok)}
.amstack .amqshot{display:block; width:132px; padding:0; border:0; background:none;
  border-radius:10px; cursor:zoom-in; color:inherit; font:inherit}
.amstack .amqshot:focus-visible{outline:2px solid var(--ember-lit); outline-offset:3px}
.amshot{position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; width:100%; aspect-ratio:3/4; overflow:hidden;
  border-radius:10px; border:1px solid var(--adline); background:rgba(255,255,255,.03);
  text-align:center; padding:0}
.amshot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.amshot.big{aspect-ratio:auto; min-height:320px; max-height:72vh}
.amshot.big img{height:auto; max-height:72vh; object-fit:contain}
.amshot.none{padding:12px; border-style:dashed; border-color:rgba(255,107,90,.45);
  color:#FF9B8C}
.amshot.none .adi{width:22px; height:22px}
.amshot.none b{font-size:13px; font-weight:600}
.amshot.none .adfine{font-size:11.5px; color:var(--tx3)}
.amstack .amqmid{min-width:0; display:grid; gap:6px}
.amstack .amqtop{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.amstack .amqtop .amt, .amdrhead .amt{font-family:"IBM Plex Mono",monospace; font-size:22px;
  font-weight:600; color:var(--money); letter-spacing:-.01em}
.amstack .amqwho{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:14px}
.amstack .amqmid>.adfine{margin:0; font-size:12px}
.amstack .amqacts{display:flex; flex-direction:column; gap:8px; min-width:190px}
.amstack .amqacts .btn, .amdracts .btn{min-height:44px; justify-content:center; gap:7px}
.amstack .amqacts .btn .adi{width:16px; height:16px}

/* เช็คลิสต์ — ไอคอน + คำ (ไม่ใช้สีอย่างเดียว · มีคำซ่อนสำหรับโปรแกรมอ่านจอ) */
.amchk{list-style:none; margin:4px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px}
.amchk.full{grid-template-columns:minmax(0,1fr); gap:8px}
.amchk li{display:flex; gap:7px; align-items:flex-start; font-size:12.5px; color:var(--tx2);
  min-width:0}
.amchk .ci{flex:none; width:18px; height:18px; border-radius:999px; display:grid;
  place-items:center; margin-top:1px; background:rgba(255,255,255,.06); color:var(--tx3)}
.amchk .ci .adi{width:12px; height:12px}
.amchk .ct{min-width:0; display:grid; gap:1px}
.amchk .ct b{font-weight:500}
.amchk .ct .adfine{font-size:11.5px; color:var(--tx3); overflow-wrap:anywhere}
.amchk li.is-ok .ci{background:rgba(127,224,127,.14); color:#9DEB9D}
.amchk li.is-warn .ci{background:rgba(224,168,119,.16); color:#F0C199}
.amchk li.is-warn b{color:#F0C199}
.amchk li.is-bad .ci{background:rgba(255,107,90,.16); color:#FF9B8C}
.amchk li.is-bad b{color:#FF9B8C}
.amchk.full li{font-size:13px; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.025); border:1px solid var(--adline)}

/* ตัวช่วยตรวจสลิป (ลิ้นชักกว้าง · มือถือเป็นแผ่นล่างจากชุดกลาง)
   ⛔ ต้องผูกกับลิ้นชักของหน้านี้ (.amdr) — `.drawercard.wide` เปล่า ๆ ทับความกว้างของ
      ลิ้นชักกว้างทุกหน้า (การ์ดลูกค้า 360 ถูกยืดจาก 720 เป็น 860 ด้วย) */
.drawercard.wide:has(> .modalbody.amdr){width:min(860px,100%)}
.amdr .amdrgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:18px; align-items:start}
.amdr .amdrshot{display:grid; gap:10px; position:sticky; top:70px}
.amdr .amdrshot .btn{min-height:44px; justify-content:center}
.amdr .amdrinfo{min-width:0}
.amdr .amdrhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.amdr .amdrwho{display:grid; gap:2px; margin:8px 0 2px; font-size:14.5px}
.amdr .amdrinfo>.adfine{margin:0 0 12px}
.amdr .amdrh{font-size:13px; font-weight:500; color:var(--tx3); margin:14px 0 8px}
.amdr .amdrform{margin-top:16px; padding-top:14px; border-top:1px solid var(--adline)}
.amdr .amwhy{min-height:64px; padding:10px 14px; resize:vertical; line-height:1.5}
.amdr .input[aria-invalid="true"]{border-color:var(--bad)}
.amdr .amquick{display:flex; gap:6px; flex-wrap:wrap; margin:-6px 0 10px}
.amdr .amquick .adchip{min-height:36px; font-size:12px}
.amdr .amerr{color:#FF9B8C; min-height:1em; margin:0 0 8px}
.amdr .amdracts{display:flex; gap:10px; flex-wrap:wrap}
.amdr .amdracts .btn{flex:1 1 180px}
.amdr .amfine{margin-top:10px}

/* ปุ่มแบบลิงก์ในตาราง (ดูประวัติกระเป๋า) — ⚠ เป้ากด 44px บนมือถือ */
.amstack .amlink{display:inline-flex; align-items:center; min-height:32px; padding:0;
  margin-top:2px; border:0; background:none; color:var(--ember-lit); font:inherit;
  font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.amstack .amlink:hover{color:var(--tx)}
.amstack .amlink:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px;
  border-radius:4px}
.amstack td.who .amlink{margin-left:44px}
.amstack .amnote{color:var(--tx3); font-size:12.5px; max-width:340px; overflow-wrap:anywhere}
.amstack td.amin{color:var(--money)}
.amstack td.amout{color:var(--tx2)}

/* สมุดบัญชี */
.amstack #am-ledbar .adfbar{padding:12px 16px 4px}
.amstack .amdays{min-height:40px; width:auto; padding:0 12px}
.amstack .amledwho{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:8px 16px 4px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line-2); background:rgba(255,45,70,.05)}
.amstack .amledwho[hidden]{display:none}
.amstack .amledwho>.adi{width:18px; height:18px; color:var(--ember-lit)}
.amstack .amledwho .tx{flex:1; min-width:180px; display:grid; gap:2px}
.amstack .amledwho .btn{min-height:40px}
.amstack #am-ledsum .adstrip{margin:10px 16px}

/* คูปอง */
.amstack .amcpbox{padding:14px 16px 4px; border-bottom:1px solid var(--adline)}
.amstack .amcppv{margin:0 0 12px; color:var(--tx2)}
.amstack .amcpchips{padding:12px 16px 4px}
.amstack .amcode b{display:block; font-size:14px; letter-spacing:.02em}
.amstack .amcode .adfine{font-size:11.5px}
.amstack td .adfine{display:block}
.amstack .amsoon{color:#F0C199}
.amstack .amcpnote{padding-top:10px}

@media (max-width:900px){
  .amdr .amdrgrid{grid-template-columns:minmax(0,1fr)}
  .amdr .amdrshot{position:static}
  .amshot.big{min-height:220px; max-height:60vh}
  .amshot.big img{max-height:60vh}
}
@media (max-width:760px){
  .amstack .amq{grid-template-columns:96px minmax(0,1fr); gap:12px; padding:14px 12px}
  .amstack .amqshot{width:96px}
  .amstack .amqacts{grid-column:1 / -1; flex-direction:row; min-width:0}
  .amstack .amqacts .btn{flex:1 1 0}
  .amchk{grid-template-columns:minmax(0,1fr)}
  .amstack .amqshot .amshot.none{padding:8px 6px}
  .amstack .amqshot .amshot.none .adfine{display:none}
}
@media (max-width:640px){
  .amstack .amlink{min-height:44px}
  .amstack td.who .amlink{margin-left:0}
  .amstack .amnote{max-width:none}
  .amstack .adcards td.amnil{display:none}
  .amstack #am-ledbar .adfbar{padding:10px 12px 2px}
  .amstack .amledwho{margin:8px 12px 4px}
  .amstack #am-ledsum .adstrip{margin:8px 12px}
  .amstack .amcpchips{padding:10px 12px 2px}
  .amstack .amcpbox{padding:12px}
  .amstack .amqtop .amt{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .amstack .amq, .amshot img{transition:none; animation:none}
}
/* end admin-v2 · money */


/* ═══════════ admin-v2 · products (สินค้าและราคา) ═══════════
   ⓘ ใส่ CSS ของหน้านี้ใต้บรรทัดนี้เท่านั้น — กันชนกับหน้าอื่นตอนรวมงาน
   ─────────────────────────────────────────── */
/* หน้าสินค้าและราคา รุ่น 2 (2026-10-02) — คลาส pp* ใช้ในหน้านี้หน้าเดียว
   (ใช้ชุดกลาง adVerdict/adKpis/adInsights/adFilterBar/adDrawer ตามปกติ) */
#ap-insights:empty{display:none}
#ap-insights .ppmore{margin:8px 2px 0}
.pplist{display:block}
.ppcard{border-bottom:1px solid var(--adline)}
.ppcard:last-child{border-bottom:0}
.ppcard.open{background:rgba(255,255,255,.012)}

/* หัวการ์ด = ปุ่มพับ/กางทั้งแถบ */
.pptog{display:grid; width:100%; align-items:center; gap:4px 16px; text-align:left;
  grid-template-columns:72px minmax(0,1fr) minmax(150px,190px) minmax(110px,140px) 22px;
  grid-template-areas:"img name range sales chev";
  padding:12px 16px; min-height:72px; background:none; border:0; color:var(--tx);
  font:inherit; cursor:pointer; transition:background var(--t-fast) var(--ease)}
.pptog:hover{background:rgba(255,255,255,.03)}
.pptog:focus-visible{outline:2px solid var(--ember-lit); outline-offset:-2px; border-radius:10px}
.ppcard.open .pptog{background:var(--adhead)}
.ppimg{grid-area:img; width:72px; height:45px; border-radius:9px; overflow:hidden; display:grid;
  place-items:center; color:#E8A3AC; background:linear-gradient(150deg,#3A1216,#120A0C);
  box-shadow:inset 0 0 0 1px rgba(255,45,70,.28)}
.ppimg img{width:100%; height:100%; object-fit:cover; display:block}
.ppimg .adi{width:20px; height:20px}
.ppname{grid-area:name; min-width:0; display:flex; flex-direction:column; gap:2px}
.ppname b{font-size:15px; font-weight:600; line-height:1.35; overflow-wrap:anywhere}
.ppname small{font-size:12px; color:var(--tx3); line-height:1.4}
.pppills{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.pppills .adpill{font-size:11.5px; padding:2px 9px}
.pprange, .ppsales{display:flex; flex-direction:column; gap:1px; min-width:0}
.pprange{grid-area:range}
.ppsales{grid-area:sales; text-align:right}
.pprange b, .ppsales b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pprange b{color:var(--gold)}
.pprange small, .ppsales small{font-size:11.5px; color:var(--tx3); line-height:1.4}
.ppsales.quiet b, .ppsales.quiet small{color:var(--warn)}
.ppchev{grid-area:chev; color:var(--tx3); display:grid; place-items:center;
  transition:transform var(--t-fast) var(--ease)}
.ppcard.open .ppchev{transform:rotate(90deg); color:var(--tx)}

/* ตัวการ์ด */
.ppbody{padding:4px 16px 18px}
.ppbody[hidden]{display:none}
.ppacts{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 12px}
.ppacts .btn .adi{width:15px; height:15px; margin-right:2px}
.ppacts .btn[disabled]{opacity:.55; cursor:not-allowed}
.ppwhy{font-size:12px; color:var(--warn); line-height:1.45}
.ppnote{display:flex; gap:8px; align-items:flex-start; margin:0 0 12px; padding:9px 12px;
  border-radius:10px; background:var(--glass); font-size:12.5px; color:var(--tx2); line-height:1.5}
.ppnote .adi{margin-top:2px; color:var(--info)}
.ppnote.warn{background:rgba(224,168,119,.07); color:#F0C199}
.ppnote.warn .adi{color:var(--warn)}
.ppgrid{display:grid; gap:14px; grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  align-items:start}
.pppacks{border:1px solid var(--adline); border-radius:12px; overflow:hidden;
  background:var(--adsurf)}
.pppacks .adempty{padding:22px 14px}
.ppmore{margin:0; padding:9px 14px; font-size:12px; color:var(--tx3)}

/* แถวแพ็ก (สั้น) */
.pprow{display:grid; align-items:center; gap:4px 14px; padding:10px 14px; min-height:54px;
  grid-template-columns:minmax(0,1.5fr) minmax(92px,auto) minmax(0,1.25fr) minmax(0,1.15fr) 18px;
  border-bottom:1px solid var(--adline); cursor:pointer;
  transition:background var(--t-fast) var(--ease)}
.pprow:last-child{border-bottom:0}
.pprow:hover{background:rgba(255,255,255,.035)}
.pprow:focus-visible{outline:2px solid var(--ember-lit); outline-offset:-2px}
.pprow.off .c1 .nm, .pprow.off .c2{opacity:.6}
.pprow.warn{box-shadow:inset 3px 0 0 var(--warn)}
.pprow .c1{min-width:0}
.pprow .nm{font-size:14px; font-weight:500; overflow-wrap:anywhere}
.pprow .tg{display:flex; gap:5px; flex-wrap:wrap; margin-top:4px}
.pprow .tg .adtag{font-size:10.5px; padding:1px 7px 1px 6px}
.pprow .c2{text-align:right; display:flex; flex-direction:column}
.pprow .pc{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:14.5px; font-weight:600; color:var(--gold)}
.pprow .c2 small{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tx3)}
.pprow .c3{font-size:12px; color:var(--tx3); line-height:1.45; display:flex; gap:5px;
  align-items:flex-start; min-width:0}
.pprow .c3 .adi{width:14px; height:14px; margin-top:1px}
.pprow .c3.is-ok{color:var(--ok)}
.pprow .c3.is-warn{color:var(--warn)}
.pprow .c4{font-size:12px; line-height:1.45; min-width:0}
.pprow .c4 .s1{color:var(--tx2); display:block}
.pprow .c4 small{color:var(--tx3); font-size:11px; display:block}
.pprow .c4 .adrev{display:block; margin:4px 0 3px}
.pprow .c5{color:var(--tx3); display:grid; place-items:center}
.pprow .c5 .adi{width:15px; height:15px}

/* ข้าง: เช็คลิสต์ + ยอดขาย */
.ppside{display:grid; gap:12px}
.ppcheck, .ppstat{border:1px solid var(--adline); border-radius:12px; padding:12px 14px;
  background:var(--adsurf)}
.ppcheck h3, .ppstat h3{font-size:13px; font-weight:600; margin:0 0 9px; color:var(--tx2)}
.ppcheck h3 small{font-weight:400; color:var(--tx3); font-size:12px}
.ppcheck ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.ppcheck li{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.45}
.ppcheck li>.adi{width:15px; height:15px; margin-top:2px; flex:none}
.ppcheck li.is-ok>.adi{color:var(--ok)}
.ppcheck li.is-warn>.adi{color:var(--warn)}
.ppcheck li.is-bad>.adi{color:var(--bad)}
.ppcheck li.is-bad{color:#FF9B8C}
.ppcheck li>span{min-width:0}
.ppcheck li small{display:block; color:var(--tx3); font-size:11.5px}
.ppnums{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 6px}
.ppnums dt{font-size:11.5px; color:var(--tx3)}
.ppnums dd{margin:0; display:flex; flex-direction:column}
.ppnums dd b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:600}
.ppnums dd span{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--gold)}
.ppsparkw{margin:8px 0 4px}
.ppspark{display:block; width:100%; height:34px}
.ppspark rect{fill:rgba(255,255,255,.1)}
.ppspark rect.on{fill:var(--ember-lit)}
.ppstat .adfine{display:block; margin:2px 0 0}

/* ลิ้นชักแพ็ก + กล่องดูผลราคาในฟอร์มแก้แพ็ก */
.ppwarn{display:flex; gap:8px; align-items:flex-start; margin:0 0 10px; color:var(--warn);
  font-size:13px; line-height:1.5}
.ppwarn .adi{margin-top:2px}
.drbox .ppnote{display:block; margin:10px 0 0; padding:0; background:none; color:var(--tx3)}
.drtech summary{cursor:pointer; color:var(--tx3); font-size:12.5px; padding:6px 0}
.ppprev{border:1px solid var(--adline); border-radius:10px; padding:10px 12px; margin:2px 0 12px;
  background:var(--glass)}
.ppprev b{display:block; font-size:12.5px; font-weight:600; color:var(--tx2); margin-bottom:6px}
.ppprev ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.ppprev li{display:flex; gap:7px; align-items:flex-start; font-size:12.5px; line-height:1.45;
  color:var(--tx2)}
.ppprev li .adi{width:14px; height:14px; margin-top:2px; flex:none; color:var(--tx3)}
.ppprev li.is-ok, .ppprev li.is-ok .adi{color:var(--ok)}
.ppprev li.is-bad, .ppprev li.is-bad .adi{color:var(--bad)}
.ppprev .adfine{margin:0}

@media (max-width:1060px){
  .ppgrid{grid-template-columns:minmax(0,1fr)}
  .ppside{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .pprow{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"c1 c2" "c3 c4";
    gap:6px 12px}
  .pprow .c1{grid-area:c1}
  .pprow .c2{grid-area:c2}
  .pprow .c3{grid-area:c3}
  .pprow .c4{grid-area:c4; text-align:right}
  .pprow .c4 .adrev, .pprow .c4 small, .pprow .c5{display:none}
}
@media (max-width:640px){
  .pptog{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr) 20px;
    grid-template-areas:"img name name chev" "img range sales chev";
    gap:8px 12px; padding:12px; align-items:start}
  .ppimg{width:56px; height:56px}
  .ppname b{font-size:14.5px}
  .ppbody{padding:2px 12px 14px}
  .ppacts .btn{min-height:44px; flex:1 1 auto}
  .ppwhy{flex:1 1 100%}
  .ppside{grid-template-columns:minmax(0,1fr)}
  .pprow{padding:10px 12px; min-height:56px}
  .pprow .c3{font-size:11.5px}
  .drtech summary{min-height:44px; display:flex; align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .pptog, .pprow, .ppchev{transition:none}
}
/* end admin-v2 · products */


/* ═══════════ admin-v2 · visitors (คนเข้าเว็บ) ═══════════
   ⓘ ใส่ CSS ของหน้านี้ใต้บรรทัดนี้เท่านั้น — กันชนกับหน้าอื่นตอนรวมงาน
   ─────────────────────────────────────────── */
/* หน้าคนเข้าเว็บรุ่น 2 (2026-10-02) — คลาส av* ใช้เฉพาะหน้านี้ · ของกลางใช้ชุด v2 ข้างบน */

/* ── หัวหน้า: ชิปช่วงเวลา (เดิมมีเส้นใต้ลอยและวางไม่ตรงหัวข้อ) ── */
.avrange{padding:0; border:0; gap:6px; align-self:center}
.avrange .adchip{min-height:36px}
.avpage #av-verdict .adverdict{margin-bottom:0}
.avins #av-ins{padding:14px}
.avpage .adkpi .addelta{margin-top:1px}

/* ── เส้นทาง (นับเป็นคน) ── */
.avfunnel{padding:14px 16px 0}
.avsteps{list-style:none; margin:0; padding:0; display:grid; gap:0}
.avstep .avsrow{display:flex; gap:12px; align-items:center; padding:8px 0}
.avstep .ic{flex:none; width:34px; height:34px; border-radius:10px; display:grid;
  place-items:center; background:var(--glass-2); color:var(--tx2)}
.avstep .ic .adi{width:17px; height:17px}
.avstep.paid .ic{color:var(--ok); background:rgba(127,224,127,.1)}
.avstep .tx{flex:1; min-width:0; display:grid; gap:5px}
.avstep .hd{display:flex; align-items:baseline; gap:10px}
.avstep .hd .nm{font-size:13.5px; color:var(--tx)}
.avstep .hd b{margin-left:auto; font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; font-size:17px; font-weight:600; white-space:nowrap}
.avstep .hd b em{font-style:normal; font-size:12px; color:var(--tx3); font-weight:500}
.avstep.paid .hd b{color:var(--ok)}
.avstep small{font-size:11.5px; color:var(--tx3)}
.avbar{display:block; height:8px; border-radius:999px; background:rgba(255,255,255,.06);
  overflow:hidden}
.avbar i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#8E1226,#FF2D46)}
.avstep.paid .avbar i{background:linear-gradient(90deg,#2F6B3A,#7FE07F)}
.avbar.sm{height:5px; margin-top:5px; max-width:220px}
.avdrop{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:16px;
  padding:3px 0 3px 20px; border-left:2px dashed rgba(255,255,255,.12);
  font-size:12px; color:var(--tx3)}
.avdrop .adi{width:13px; height:13px; color:var(--tx3)}
.avstep.worst .avdrop{color:var(--warn); border-left-color:rgba(224,168,119,.55)}
.avstep.worst .avdrop .adi{color:var(--warn)}
.avdrop .adtag{font-size:10.5px; padding:0 7px 0 6px}
.avsay{display:flex; gap:9px; align-items:flex-start; margin:10px 0 0; padding:11px 13px;
  border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--adline);
  font-size:13px; line-height:1.55; color:var(--tx)}
.avsay .adi{flex:none; width:16px; height:16px; margin-top:2px; color:var(--warn)}
.avacts{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0}
.avfunnel .adnote{padding:12px 0 14px}

/* ── กำลังดูเว็บตอนนี้ ── */
#av-live{padding:0 0 4px}
.avlivetop{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:12px 16px 8px}
.avlivetop .sp{flex:1}
.avlivecount{font-size:14px; font-weight:600}
.avdot{width:9px; height:9px; border-radius:50%; background:var(--tx3); flex:none}
.avdot.on{background:var(--ok); box-shadow:0 0 0 0 rgba(127,224,127,.5);
  animation:avpulse 2s ease-out infinite}
@keyframes avpulse{70%{box-shadow:0 0 0 7px rgba(127,224,127,0)} 100%{box-shadow:0 0 0 0 rgba(127,224,127,0)}}
.avlivepages{display:flex; gap:6px; flex-wrap:wrap; padding:0 16px 10px}
.avlivepages .adpill b{font-family:"IBM Plex Mono",monospace; color:var(--tx); font-weight:600}
.avlive{list-style:none; margin:0; padding:0; max-height:360px; overflow:auto}
.avlive li{display:flex; gap:11px; align-items:center; padding:9px 16px;
  border-top:1px solid var(--adline)}
.avlive .ic, .avdevlist .ic{flex:none; width:30px; height:30px; border-radius:9px; display:grid;
  place-items:center; background:var(--glass-2); color:var(--tx2)}
.avlive .ic .adi, .avdevlist .ic .adi{width:16px; height:16px}
.avlive .tx{flex:1; min-width:0; display:grid; gap:1px}
.avlive .hd{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.avlive .hd b{font-size:13px; font-weight:600}
.avlive .hd .adtag{font-size:10.5px; padding:0 7px 0 6px}
.avlive small{font-size:11.5px; color:var(--tx3); overflow-wrap:anywhere}
.avlive .ago{flex:none; font-size:11.5px; color:var(--tx3); white-space:nowrap}

/* ── กราฟสมัครใหม่ (สเกลของตัวเอง) ── */
.avsign{margin:4px 16px 14px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--adline); background:rgba(95,208,232,.03)}
.avsignh{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px}
.avsignh .adi{width:15px; height:15px; color:var(--info)}
.avsignh small{margin-left:auto; color:var(--tx3); font-size:11.5px}
.avsigncols{list-style:none; margin:10px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr)); gap:4px; align-items:end}
.avsigncols li{display:grid; justify-items:center; gap:3px; min-width:0}
.avsigncols b{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  color:#95E2F2}
.avsigncols b.z{color:var(--tx3); font-weight:400; opacity:.6}
.avsigncols .c{display:flex; align-items:flex-end; width:100%; max-width:26px; height:46px;
  border-radius:5px; background:rgba(255,255,255,.04); overflow:hidden}
.avsigncols .c i{display:block; width:100%; border-radius:5px 5px 0 0;
  background:linear-gradient(0deg,#1E5C6B,#95E2F2)}
.avsigncols small{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--tx3)}
.avsigncols li.now small{color:var(--tx); font-weight:600}

/* ── ช่วงเวลา (วัน × ชั่วโมง) ── */
.avheatbox{padding:0 16px 14px}
.avheatbox .avsay{margin:12px 0 12px}
.avheatbox .avsay .adi{color:var(--info)}
.avheat{display:grid; gap:3px}
.avhrow{display:grid; grid-template-columns:30px repeat(24,minmax(0,1fr)); gap:3px;
  align-items:center}
.avhrow .wd{font-size:11px; color:var(--tx3)}
.avhrow.hd .hl{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--tx3)}
.avheat .cell, .avheatkey .cell{display:block; height:18px; border-radius:4px;
  background:rgba(255,255,255,.04)}
.avheat .cell.l1, .avheatkey .cell.l1{background:rgba(255,45,70,.22)}
.avheat .cell.l2, .avheatkey .cell.l2{background:rgba(255,45,70,.42)}
.avheat .cell.l3, .avheatkey .cell.l3{background:rgba(255,45,70,.66)}
.avheat .cell.l4, .avheatkey .cell.l4{background:#FF3B53}
.avheatkey{display:flex; align-items:center; gap:4px; margin-top:10px; font-size:11.5px;
  color:var(--tx3); flex-wrap:wrap}
.avheatkey .cell{width:16px; height:12px}
.avheatkey span:first-child{margin-right:2px}
.avheatkey span:last-child{margin-left:4px}

/* ── แถวอันดับกะทัดรัด (ที่มา · หน้า) — แถวเดียวกันทั้งจอกว้างและมือถือ ── */
.avrank{list-style:none; margin:0; padding:4px 16px 8px; display:grid; gap:0}
.avrank li{display:grid; gap:5px; padding:10px 0; border-bottom:1px solid var(--adline)}
.avrank li:last-child{border-bottom:0}
.avrank .avrt{display:flex; align-items:baseline; gap:8px; min-width:0}
.avrank .avrt .nm{font-size:13.5px; color:var(--tx); min-width:0; overflow-wrap:anywhere}
.avrank .avrt .adtag{font-size:10.5px; padding:0 7px 0 6px; flex:none}
.avrank .avrt .sp{flex:1}
.avrank .avrt b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600; white-space:nowrap}
.avrank .avrt .pc{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--tx3);
  min-width:38px; text-align:right}
.avrank .avbar.sm{margin-top:0; max-width:none; height:5px}
.avrank small{font-size:11.5px; color:var(--tx3); line-height:1.45}
/* หน้าที่คนเข้า: จอกว้างวางสองคอลัมน์ (เต็มความกว้างคอลัมน์เดียว = แถบยาวเกินอ่าน) */
@media (min-width:900px){
  #av-pages .avrank{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px}
  #av-pages .avrank li:nth-last-child(2):nth-child(odd){border-bottom:0}
}

/* ── ที่มา + ลิงก์ติดแท็ก ── */
.avlinks{border-top:1px solid var(--adline); padding:12px 16px 14px}
.avlinks p{margin:0 0 9px; font-size:12px; color:var(--tx3); line-height:1.5}
.avlinks .acts{display:flex; gap:6px; flex-wrap:wrap}
.avlinks .btn .adi{width:14px; height:14px}

/* ── เครื่องที่ใช้ ── */
.avdev{padding:14px 16px 0}
.avsplit{display:flex; height:14px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.05); gap:2px}
.avsplit i{display:block; height:100%}
.avsplit .d-pc, .avdevlist .d-pc .ic{background:rgba(95,208,232,.55)}
.avsplit .d-mobile, .avdevlist .d-mobile .ic{background:rgba(255,45,70,.6)}
.avsplit .d-x{background:rgba(255,255,255,.18)}
.avdevlist .d-pc .ic, .avdevlist .d-mobile .ic{color:#fff}
.avdevlist{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px}
.avdevlist li{display:flex; gap:11px; align-items:center; padding:8px 0}
.avdevlist .tx{flex:1; min-width:0; display:grid; gap:1px}
.avdevlist .hd{display:flex; align-items:baseline; gap:8px}
.avdevlist .hd b{font-size:13.5px; font-weight:600}
.avdevlist .hd .pc{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:15px;
  font-weight:600}
.avdevlist small{font-size:11.5px; color:var(--tx3)}
.avdev .adnote{padding:8px 0 14px}

/* ── หน้าที่เข้า ── */
.avpg{border-bottom:1px dotted rgba(255,255,255,.18); cursor:help}

@media (max-width:1060px){
  .avpage .adcols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .avrange{width:100%; order:3}
  .avrange .adchip{flex:1 1 0; justify-content:center; min-height:44px}
  .avins #av-ins{padding:10px}
  .avfunnel{padding:12px 14px 0}
  .avacts .btn, .avlinks .btn{min-height:44px; flex:1 1 auto}
  .avlivetop{padding:12px 14px 8px}
  .avlivepages{padding:0 14px 10px}
  .avlive li{padding:10px 14px}
  .avlive{max-height:none}
  .avsign{margin:4px 12px 12px; padding:10px}
  .avsigncols{gap:2px}
  .avsigncols b{font-size:10px}
  .avsigncols small{font-size:9.5px}
  .avheatbox{padding:0 12px 12px}
  .avhrow{grid-template-columns:24px repeat(24,minmax(0,1fr)); gap:2px}
  .avheat{gap:2px}
  .avheat .cell{height:14px; border-radius:3px}
  .avhrow.hd .hl.m6{visibility:hidden}
  .avlinks{padding:12px 14px}
  .avdev{padding:12px 14px 0}
  .avbar.sm{max-width:none}
  .avrank{padding:2px 14px 6px}
}
@media (prefers-reduced-motion:reduce){
  .avdot.on{animation:none}
}
/* end admin-v2 · visitors */


/* ═════════════════════════════════════════════════════════════════════════
   🎯 หน้าเช่าจอ "โหมดโฟกัส" (2026-10-02 · ค่าเริ่มต้นของหน้านี้ ไม่มีสวิตช์)
   เจ้าของ: "เอาของไม่จำเป็นที่รกออก ให้สะอาด อ่านง่ายที่สุด" — ผังเดิมอนุมัติแล้ว ⇒ ลดเสียงรบกวน
   ไม่ย้ายของ: ลำดับ = ชื่อจอ + เวลาเหลือ + สถานะบอท → จอเกม → ปุ่มหลัก → แท็บ
   · ตัดคำโปรย/ป้ายเล็กที่ซ้ำกับของที่อยู่ในจออยู่แล้ว · กรอบซ้อนกรอบ → เหลือชั้นเดียว
   · ป้ายรอง (ชิปเวลา · สถานะบอทในแท็บ · ตัวเลขรวม) ไม่มีกรอบของตัวเอง
   ⛔ ห้ามมีของกดได้ใน .rdev-screen (บทเรียน 09-30) — บล็อกนี้แตะแค่สี/ขอบ/ระยะ
   ⚠ ป้ายเพิ่งซื้อ/แถบอ่าน/ปุ่มขึ้นบนสุด ไม่ถูกสร้างในหน้านี้เลย (app.js: TICKER_OFF · boot)
   ═════════════════════════════════════════════════════════════════════════ */
.rent-head .eyebrow, .rent-head .lead{display:none}
.rent-head h1{margin-top:0; font-size:clamp(22px, 2.6vw, 30px)}
.pagehead.rent-head{padding-top:24px}
/* ＋ เช่าจอเพิ่ม มีชิป "เช่าเพิ่ม" ในแถบสลับจออยู่แล้ว (มีแถบเมื่อไหร่ค่อยซ่อนตัวซ้ำ) */
#rent-acts > .hint{display:none}
body:has(#rent-fleet:not([hidden])) #rent-more{display:none}
#rent-acts:not(:has(#rent-paused:not([hidden]))):has(#rent-more){margin-top:0}
body:has(#rent-fleet:not([hidden])) #rent-acts:not(:has(#rent-paused:not([hidden])))
  {display:none}
/* คิว — บรรทัดเงียบ ๆ ไม่ใช่กล่องเส้นประ */
.rq-line{border:0; padding:4px 2px; background:none}
/* ตัวเลขรวมทุกจอ — แถบเดียวไม่มีการ์ด/แสงเรือง · คั่นด้วยเส้นบาง */
.rfleet{gap:0 10px; margin:4px 0 14px}
.rkpi{border:0; border-radius:0; background:none; padding:6px 14px;
  border-inline-start:1px solid var(--line)}
.rkpi:first-child{border-inline-start:0; padding-inline-start:2px}
.rkpi::after{display:none}
.rkpi small{font-size:12px}
.rkpi b{font-size:20px}
.rscr{border-color:transparent; background:rgba(255,255,255,.025)}
.rscr-b.add{border-color:transparent; background:rgba(255,45,70,.08)}
/* แผงกระจก — ขอบไล่สีแดง-ฟ้าออก เหลือเส้นบางเส้นเดียว · มุม HUD จางลง */
.rpanel::before{display:none}
.rhud i{opacity:.45}
/* ชิปเวลาเหลือในหัวจอ — ตัวหนังสือมีสี ไม่ต้องมีกรอบ */
.rdev-head .rchip{border-color:transparent; background:rgba(255,255,255,.04)}
/* สถานะบอทในแท็บ "บอท" — ข้อความหลักของแผง ไม่ใช่กล่องอีกชั้น */
.rstatus-t .rbot-state{padding:0; border:0; background:none; font-size:14px; font-weight:600}
.rstatus-t .rbot-state svg{width:17px; height:17px}
/* ช่องเลขเล็ก — พื้นจาง ๆ ไม่มีกรอบ · แท็บบอทเหลือ 3 ช่อง (ตา/24 ชม. อยู่ในวงแหวนแล้ว) */
.rmini{border-color:transparent; background:rgba(255,255,255,.035)}
.rminis.three{grid-template-columns:repeat(3, minmax(0, 1fr))}
.rlog{border-color:transparent}
.rsechead{color:var(--tx3); font-weight:500}
/* 💬 คอม: ปุ่มแชทลอยเหลือวงกลมไอคอน — ปุ่มยาว "คุยกับแอดมิน" ทับปุ่มรีเกมในแผงขวา
   ⚠ ชื่อปุ่มสำหรับโปรแกรมอ่านจอยังอยู่ (ซ่อนด้วยตัดขนาด ไม่ใช่ display:none) */
@media(min-width:900px){
  body:has(main[data-page="rental"]) .hchat:not(.open) .hchat-btn{width:50px; min-height:50px;
    padding:0; justify-content:center; opacity:.9}
  body:has(main[data-page="rental"]) .hchat:not(.open) .hchat-lb{position:absolute; width:1px;
    height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}
@media(max-width:760px){
  .pagehead.rent-head{padding-top:10px}
  .rent-head h1{font-size:20px}
  .rminis.three{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .rmini{padding:8px 9px}
  .rmini b{font-size:17px}
}
/* 📱 เมนูล่างของร้านหลบเอง (JS: wireRentNavAutoHide ใส่ html.rnav-hide)
   ⚠ เปิดแผ่นปุ่มแอนดรอยด์อยู่ (rsheet-on) = เมนูกลับมา — แผ่นนั้นวางตัวเหนือเมนูพอดี
   ⚠ แถบเริ่ม/หยุดเลื่อนลงไปแทนที่ (ไม่ลอยค้างกลางอากาศ) · ปุ่มแชทหลบตามเมนู */
@media(max-width:899px){
  body:has(main[data-page="rental"]) .bottomnav{transition:transform .22s var(--ease)}
  html.rnav-hide:not(.rsheet-on) .bottomnav{transform:translateY(110%)}
  html.rnav-hide .hchat:not(.open) .hchat-btn{display:none}
}
@media(max-width:760px){
  .rmbar:not([hidden]){transition:bottom .22s var(--ease)}
  html.rnav-hide:not(.rsheet-on) .rmbar:not([hidden]){bottom:0;
    padding-bottom:max(6px, env(safe-area-inset-bottom))}
  html.rnav-hide:not(.rsheet-on) .rsavepill:not([hidden]){
    bottom:calc(var(--rent-mbar, 68px) + 10px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  body:has(main[data-page="rental"]) .bottomnav, .rmbar:not([hidden]){transition:none}
}

/* ══════════════ 👛 หน้ากระเป๋า v3 (2026-10-03) ══════════════
   เจ้าของ: "แปลก บอกไม่ถูก · ประวัติ/ใบขอเติมเงินยาวไปเรื่อย ๆ · อยากให้สวย เข้าใจเงินง่าย"
   ⇒ ลำดับตามคำถามในหัว: มีเท่าไหร่ → ค้างอะไรไหม → เติมยังไง → เงินไปไหน
   ⇒ ฟอนต์ Anuphan (ไทย มน อ่านสบาย) + ตัวเลขเงิน Space Grotesk แบบเลขกว้างเท่ากัน
   ⚠ คลาสใหม่ขึ้นต้น wl- / lrow2 / lic / lday / tpc — ตรวจแล้วไม่ชนของเดิม
   ⚠ สีความหมายเดิม: เขียว = เงินเข้า · ทอง = ยอดเงิน/ราคา · แดง = ปุ่มหลัก */
.wl2{--wl-in:var(--ok); --wl-out:#FF8A7A}
.wl2 .sec.tight{padding-top:22px}

/* ── การ์ดยอดคงเหลือ ── */
.wl-top{position:relative; overflow:hidden; display:grid; gap:20px 28px;
  grid-template-columns:minmax(0,1fr); align-items:center;
  padding:26px 26px 24px; border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:
    radial-gradient(90% 140% at 100% 0%,rgba(255,45,70,.20),transparent 60%),
    radial-gradient(60% 120% at 0% 100%,rgba(255,194,77,.08),transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  box-shadow:0 30px 60px -40px rgba(255,45,70,.45), inset 0 1px 0 rgba(255,255,255,.06)}
@media(min-width:860px){ .wl-top{grid-template-columns:minmax(0,1fr) minmax(0,340px)} }
.wl-bal{display:grid; gap:6px; min-width:0}
.wl-lab{font-size:13px; font-weight:600; color:var(--tx2); letter-spacing:.02em}
.wl-top .amt{font-family:"Space Grotesk","Anuphan",sans-serif; font-weight:700;
  font-size:clamp(42px,8vw,64px); line-height:1.02; letter-spacing:-.03em; color:var(--gold);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; white-space:nowrap;
  text-shadow:0 4px 28px rgba(255,194,77,.25)}
.wl-mini{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.wl-mini span{display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 8px;
  border-radius:999px; font-size:12.5px; color:var(--tx2); border:1px solid var(--line);
  background:rgba(255,255,255,.035)}
.wl-mini svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.wl-mini .in svg{color:var(--wl-in)}
.wl-mini .out svg{color:var(--wl-out)}
.wl-mini b{font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--tx);
  font-variant-numeric:tabular-nums}
.wl-top .ver{margin:4px 0 0; font-size:12.5px}
.wl-act{display:grid; gap:12px; min-width:0}
.wl-cta{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; font-size:16px; width:100%}
.wl-cta svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round}
.wl-act .wlquick{justify-content:flex-start; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.wl-act .wlquick .btn{width:100%; justify-content:center; padding-inline:6px}
.wl-shop{justify-self:center; font-size:13px; color:var(--tx3); text-decoration:none}
.wl-shop:hover{color:var(--tx)}

/* ── รอดำเนินการ ── */
.wl-pend{margin-top:18px; display:grid; gap:10px}
.wl-pend h2{font-size:15px; font-weight:600; margin:0; color:var(--warn);
  display:flex; align-items:center; gap:8px}
.wl-pend h2::before{content:""; width:8px; height:8px; border-radius:50%;
  background:var(--warn); box-shadow:0 0 0 4px rgba(224,168,119,.18)}
#wl-topups{display:grid; gap:10px}
.tpc{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:center;
  padding:14px 16px; border-radius:16px; border:1px solid rgba(224,168,119,.32);
  background:linear-gradient(180deg,rgba(224,168,119,.08),rgba(224,168,119,.02))}
.tpc.bad{border-color:rgba(255,107,90,.32);
  background:linear-gradient(180deg,rgba(255,107,90,.08),rgba(255,107,90,.02))}
.tpc .lic{color:var(--warn); background:rgba(224,168,119,.14)}
.tpc.bad .lic{color:var(--bad); background:rgba(255,107,90,.14)}
.tpc .tpc-cr{color:var(--tx3); font-weight:500}
.tpc .tpc-note{color:var(--tx2); white-space:normal}
.tpc .tuacts{grid-column:2; margin-top:8px; display:flex}
.tpc .tuacts .btn{flex:0 1 auto; min-width:0}

/* ── วิธีเติมเงิน ── */
.wl-ways .paygrid{margin-top:0}
.wl-sh h2{font-size:clamp(20px,3vw,24px); margin:0}
.wl-sh p{margin:4px 0 14px; font-size:13.5px; color:var(--tx3)}
.wl2 .pw-ic{color:var(--tx)}
.wl2 .pw-ic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.wl2 .pw-ic.qr{color:var(--cyan); background:rgba(95,208,232,.12); border-color:rgba(95,208,232,.3)}
.wl2 .pw-ic.ap{color:var(--ember-lit); background:rgba(255,45,70,.12); border-color:rgba(255,45,70,.3)}
.wl-know{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px;
  grid-template-columns:1fr}
@media(min-width:900px){ .wl-know{grid-template-columns:repeat(3,minmax(0,1fr))} }
.wl-know li{padding:12px 14px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.025); font-size:12.5px; line-height:1.6; color:var(--tx3)}
.wl-know b{display:block; color:var(--tx); font-size:13.5px; margin-bottom:2px}

/* ── ความเคลื่อนไหว ── */
.wl-hist{padding:22px 22px 18px}
.wl-hh{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:6px}
.wl-hh h2{font-size:18px; margin:0}
.wl-filt{display:inline-flex; padding:3px; gap:2px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03)}
.wl-filt button{font:inherit; font-size:12.5px; color:var(--tx3); background:transparent;
  border:0; border-radius:999px; padding:6px 13px; min-height:34px; cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease)}
.wl-filt button:hover{color:var(--tx)}
.wl-filt button[aria-pressed="true"]{color:var(--tx); background:rgba(255,255,255,.09)}
.wl-filt button:focus-visible{outline:2px solid var(--ember-lit); outline-offset:1px}
.lday{margin:14px 0 2px; padding:4px 0; font-size:12px; font-weight:600;
  color:var(--tx3); letter-spacing:.03em}
.lrow2{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:11px 8px; margin:0 -8px; border-radius:12px;
  transition:background .15s var(--ease)}
.lrow2:hover{background:rgba(255,255,255,.035)}
.lic{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none}
.lic svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.lrow2 .lic.in{color:var(--wl-in); background:rgba(127,224,127,.12)}
.lrow2 .lic.out{color:var(--wl-out); background:rgba(255,138,122,.11)}
.lrow2 .lic.k-referral{color:var(--gold); background:rgba(255,194,77,.12)}
.lmid{display:grid; gap:2px; min-width:0}
.lmid b{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lmid .s{font-size:12px; color:var(--tx3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lamt{font-family:"Space Grotesk",sans-serif; font-size:15.5px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.lamt.plus{color:var(--wl-in)}
.lamt.minus{color:var(--tx)}
.wl-empty{padding:18px 0; text-align:center}
#wl-more{margin-top:10px}
.wl-hist .hashline{margin-top:12px}
.wl-help{margin:14px 0 0; display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:8px 10px; font-size:13px; color:var(--tx3)}
.wl-help a{color:var(--tx2); text-decoration:none; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); min-height:34px; display:inline-flex; align-items:center}
.wl-help a:hover{color:var(--tx); border-color:var(--line-2)}

@media(max-width:640px){
  .wl-top{padding:22px 18px 20px}
  .wl-act .wlquick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tpc{grid-template-columns:minmax(0,1fr)}
  .tpc .lic{display:none}
  .tpc .tuacts{grid-column:1}
  .tpc .tuacts .btn{flex:1 1 0}
  .wl-hist{padding:18px 14px 14px}
  .wl-hh{flex-direction:column; align-items:stretch}
  .wl-filt{width:100%}
  .wl-filt button{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){ .lrow2,.wl-filt button{transition:none} }

/* ══════════════ 🧑‍🎨 หน้าโปรไฟล์ v2 (2026-10-03) ══════════════
   เจ้าของ: "ไม่สวย ไม่เป็นมืออาชีพ · เปลี่ยนชื่อเป็นโปรไฟล์ · แต่งได้หลากหลาย · อนิเมชันสวย"
   ⇒ การ์ดปกด้านบน = ตัวอย่างสดของทุกอย่างที่แต่ง · เนื้อหาแยก 3 แท็บ
   ⚠ คลาสใหม่ขึ้นต้น pf- (เดิมไม่มีใครใช้) · อนิเมชันทุกตัวหยุดเมื่อผู้ใช้ขอลดการเคลื่อนไหว */

/* ── สีพื้นเพิ่ม 10 สี (ต้องตรงกับ account.AVATAR_COLORS / AV_HEX ใน app.js) ── */
.av-rose{--av1:#FF7EB6; --av2:#7A1F4A}
.av-orange{--av1:#FF9A3D; --av2:#7A3A0A}
.av-teal{--av1:#3EE6C4; --av2:#0F5148}
.av-blue{--av1:#5B8CFF; --av2:#1A2A6B}
.av-sunset{--av1:#FF7A59; --av2:#7B1FA2}
.av-ocean{--av1:#4FC3F7; --av2:#1A237E}
.av-aurora{--av1:#7CFFCB; --av2:#5B2A86}
.av-sakura{--av1:#FFB7D5; --av2:#8E2C5A}
.av-night{--av1:#5A60A8; --av2:#0B0D1A}
.av-lime{--av1:#C6FF5E; --av2:#2E5A0F}

/* ⛔⛤ รูปจริงเป็น <img> ลูก (paintAvatar) — ตัดตามวงพอดี ไม่มีเส้นดำที่ขอบล่างอีก */
.avimg{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}
.hasimg{overflow:hidden}

/* ── การ์ดปก ── */
.pf2 .pf-hero{position:relative; margin-top:14px; border-radius:26px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-soft);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.8)}
.pf-cover{position:relative; height:180px; overflow:hidden; background-size:220% 220%;
  animation:pfdrift 18s ease-in-out infinite alternate}
.pf-cover::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,var(--bg-soft) 100%)}
.pf-orb{position:absolute; border-radius:50%; filter:blur(28px); opacity:.55; mix-blend-mode:screen}
.pf-orb.o1{width:220px; height:220px; left:-40px; top:-60px; background:rgba(255,255,255,.35);
  animation:pforb1 14s ease-in-out infinite alternate}
.pf-orb.o2{width:160px; height:160px; right:12%; top:10px; background:rgba(255,255,255,.22);
  animation:pforb2 17s ease-in-out infinite alternate}
.pf-orb.o3{width:120px; height:120px; left:45%; bottom:-50px; background:rgba(255,255,255,.18);
  animation:pforb1 21s ease-in-out infinite alternate-reverse}
.pf-mesh{position:absolute; inset:0; opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 90% at 70% 10%,#000,transparent 70%);
  mask-image:radial-gradient(70% 90% at 70% 10%,#000,transparent 70%)}
@keyframes pfdrift{from{background-position:0% 30%} to{background-position:100% 70%}}
@keyframes pforb1{from{transform:translate(0,0) scale(1)} to{transform:translate(60px,30px) scale(1.15)}}
@keyframes pforb2{from{transform:translate(0,0)} to{transform:translate(-50px,40px)}}

/* ปกแต่ละแบบ — ใช้ทั้งกับการ์ดปกจริงและปุ่มตัวอย่างในตัวเลือก */
.pf-hero[data-banner="ember"] .pf-cover,.pf-bsw[data-banner="ember"],.am-head[data-banner="ember"] .am-cover{
  background-image:linear-gradient(120deg,#5A0A14,#E01F38 45%,#FF7C8B 70%,#3A0610)}
.pf-hero[data-banner="galaxy"] .pf-cover,.pf-bsw[data-banner="galaxy"],.am-head[data-banner="galaxy"] .am-cover{
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 70% 60%,rgba(255,255,255,.7) 0 1px,transparent 2px),
    radial-gradient(circle at 45% 20%,rgba(255,255,255,.6) 0 1px,transparent 2px),
    linear-gradient(120deg,#0B0D2A,#3A1F7A 45%,#7B4DFF 70%,#120A30)}
.pf-hero[data-banner="sunset"] .pf-cover,.pf-bsw[data-banner="sunset"],.am-head[data-banner="sunset"] .am-cover{
  background-image:linear-gradient(120deg,#2B1055,#C74BFF 35%,#FF7A59 65%,#FFC24D)}
.pf-hero[data-banner="ocean"] .pf-cover,.pf-bsw[data-banner="ocean"],.am-head[data-banner="ocean"] .am-cover{
  background-image:linear-gradient(120deg,#0B1A3A,#3949AB 40%,#4FC3F7 75%,#B5F2FF)}
.pf-hero[data-banner="forest"] .pf-cover,.pf-bsw[data-banner="forest"],.am-head[data-banner="forest"] .am-cover{
  background-image:linear-gradient(120deg,#071A14,#0F5148 40%,#2ECC71 75%,#C6FF5E)}
.pf-hero[data-banner="mono"] .pf-cover,.pf-bsw[data-banner="mono"],.am-head[data-banner="mono"] .am-cover{
  background-image:linear-gradient(120deg,#0E0F12,#2A2D33 45%,#5A5F68 70%,#15171B)}
.pf-hero[data-banner="sakura"] .pf-cover,.pf-bsw[data-banner="sakura"],.am-head[data-banner="sakura"] .am-cover{
  background-image:linear-gradient(120deg,#3A1027,#FF6FA8 40%,#FFB7D5 70%,#FFF0F6)}
.pf-hero[data-banner="aurora"] .pf-cover,.pf-bsw[data-banner="aurora"],.am-head[data-banner="aurora"] .am-cover{
  background-image:linear-gradient(120deg,#0B0D1A,#8E5BFF 35%,#3EE6C4 65%,#7CFFCB)}

.pf-id{position:relative; display:flex; align-items:flex-start; gap:22px; padding:0 28px 24px}
/* รูปซ้อนขอบล่างของปก · ชื่อกับคำแนะนำตัวอยู่ใต้ปกเสมอ (ไม่ลอยทับลายปก) */
.pf-id .pf-avwrap{margin-top:-70px}
.pf-who{min-width:0; display:grid; gap:4px; padding-top:14px; justify-items:start}
.pf-who h1{margin:0; font-size:clamp(24px,4vw,34px); line-height:1.15; letter-spacing:-.01em;
  overflow-wrap:anywhere}
.pf-handle{margin:0; font-size:13px; color:var(--tx3); font-family:"IBM Plex Mono",monospace}
.pf-bio{margin:4px 0 0; font-size:14.5px; color:var(--tx); line-height:1.55; overflow-wrap:anywhere}
.pf-bio.pf-empty{color:var(--tx3); font-style:italic; font-size:13px}
.pf-badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.pf-badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 8px;
  border-radius:999px; font-size:11.5px; color:var(--tx2); border:1px solid var(--line);
  background:rgba(255,255,255,.04)}
.pf-badge svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.pf-badge.ok{color:var(--ok); border-color:rgba(127,224,127,.3)}
.pf-badge.dc{color:#A5B4FF; border-color:rgba(130,150,255,.35)}

/* ── กรอบรูป (ใช้ทั้งรูปใหญ่บนปกและตัวอย่างในตัวเลือก) ── */
.pf-avwrap{position:relative; flex:none; width:136px; height:136px; border-radius:50%;
  display:grid; place-items:center; padding:6px; isolation:isolate;
  background:var(--bg-soft); transition:box-shadow .3s var(--ease)}
.pf-avwrap .avbig{width:124px; height:124px; font-size:46px; border:4px solid var(--bg-soft);
  position:relative; z-index:1; box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.pf-fdemo{position:relative; width:48px; height:48px; border-radius:50%; display:grid;
  place-items:center; padding:3px; isolation:isolate; background:var(--bg-soft)}
.pf-fdemo i{display:block; width:100%; height:100%; border-radius:50%; position:relative; z-index:1;
  border:2px solid var(--bg-soft);
  background:linear-gradient(140deg,var(--fr1,#E01F38),var(--fr2,#FF7C8B))}
.pf-avwrap[data-frame="ring"],.pf-fdemo[data-frame="ring"],.am-avwrap[data-frame="ring"]{
  background:linear-gradient(135deg,var(--fr1),var(--fr2))}
.pf-avwrap[data-frame="glow"],.pf-fdemo[data-frame="glow"],.am-avwrap[data-frame="glow"]{
  background:linear-gradient(135deg,var(--fr1),var(--fr2));
  box-shadow:0 0 22px -2px var(--fr1),0 0 60px -14px var(--fr2)}
.pf-avwrap[data-frame="neon"]::before,.pf-fdemo[data-frame="neon"]::before,.am-avwrap[data-frame="neon"]::before,
.pf-avwrap[data-frame="neon"]::after,.pf-fdemo[data-frame="neon"]::after,.am-avwrap[data-frame="neon"]::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:0;
  background:conic-gradient(from 0deg,var(--fr1),transparent 30%,var(--fr2),transparent 70%,var(--fr1));
  animation:pfspin 3.2s linear infinite}
.pf-avwrap[data-frame="neon"]::after,.pf-fdemo[data-frame="neon"]::after,.am-avwrap[data-frame="neon"]::after{filter:blur(10px); opacity:.85}
.pf-avwrap[data-frame="gold"],.pf-fdemo[data-frame="gold"],.am-avwrap[data-frame="gold"]{
  background:conic-gradient(#FFE9A8,#FFC24D,#8A5A12,#FFE9A8,#FFC24D,#8A5A12,#FFE9A8);
  box-shadow:0 0 0 1px rgba(255,194,77,.5),0 0 26px -8px rgba(255,194,77,.7)}
.pf-avwrap[data-frame="pulse"],.pf-fdemo[data-frame="pulse"],.am-avwrap[data-frame="pulse"]{
  background:linear-gradient(135deg,var(--fr1),var(--fr2)); animation:pfpulse 2.2s ease-out infinite}
@keyframes pfspin{to{transform:rotate(1turn)}}
@keyframes pfpulse{0%{box-shadow:0 0 0 0 var(--fr1)} 70%{box-shadow:0 0 0 14px transparent}
  100%{box-shadow:0 0 0 0 transparent}}

/* ── แท็บ ── */
.pf-tabs{display:flex; gap:4px; padding:4px; margin:20px 0 16px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); width:max-content;
  max-width:100%; overflow-x:auto; scrollbar-width:none}
.pf-tabs::-webkit-scrollbar{display:none}
.pf-tabs button{font:inherit; font-size:14px; font-weight:600; color:var(--tx3); white-space:nowrap;
  border:0; border-radius:999px; padding:9px 18px; min-height:42px; cursor:pointer;
  background:transparent; transition:color .18s var(--ease), background .18s var(--ease)}
.pf-tabs button:hover{color:var(--tx)}
.pf-tabs button[aria-selected="true"]{color:#fff;
  background:linear-gradient(135deg,rgba(255,45,70,.85),rgba(255,124,139,.55));
  box-shadow:0 8px 22px -12px rgba(255,45,70,.9)}
.pf-tabs button:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.pf-pane:not([hidden]){animation:pfin .35s var(--ease) both}
@keyframes pfin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ── การ์ดเนื้อหา ── */
.pf-cols{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){
  .pf-cols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start}
  .pf-cols.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.pf-stack{display:grid; gap:16px; min-width:0}
.pf-card{padding:22px; min-width:0}
.pf-ch{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.pf-ch h2{margin:0; font-size:17px}
.pf-tag{font-size:11.5px; color:var(--tx3); padding:3px 10px; border-radius:999px;
  border:1px solid var(--line); white-space:nowrap}
.pf-sub{margin:20px 0 10px; font-size:13.5px; font-weight:600; color:var(--tx2)}
.pf-fine{margin:10px 0 0; font-size:12px; color:var(--tx3); line-height:1.6}
.pf-n{font-style:normal; font-size:11px; color:var(--tx3); margin-left:6px;
  font-family:"Space Grotesk",sans-serif; font-variant-numeric:tabular-nums}

.pf-drop{width:100%; display:flex; align-items:center; gap:14px; padding:16px 18px;
  border-radius:16px; border:1.5px dashed var(--line-2); background:rgba(255,255,255,.02);
  color:var(--tx); font:inherit; text-align:left; cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease)}
.pf-drop:hover,.pf-drop.over{border-color:var(--ember-lit); background:rgba(255,45,70,.06)}
.pf-drop.over{transform:scale(1.01)}
.pf-drop:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.pf-drop svg{flex:none; width:30px; height:30px; fill:none; stroke:var(--ember-lit); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.pf-drop > span{display:grid; gap:2px; min-width:0}
.pf-drop b{font-size:14px}
.pf-drop span span{font-size:12px; color:var(--tx3)}
.pf-srcbtns{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0}

.pf2 .avicons{margin:0}
.pf2 .aviconbtn{transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.pf2 .aviconbtn[aria-pressed="true"],.pf-sw[aria-pressed="true"]{animation:pfpop .32s var(--ease)}
.pf-swatches{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px}
.pf-sw{aspect-ratio:1; min-width:0; border-radius:50%; border:2px solid rgba(255,255,255,.12);
  cursor:pointer; transition:transform .16s var(--ease)}
.pf-sw:hover{transform:translateY(-2px) scale(1.06)}
.pf-sw[aria-pressed="true"]{outline:2px solid #fff; outline-offset:3px; border-color:transparent}
.pf-sw:focus-visible{outline:2px solid var(--ember-lit); outline-offset:3px}
@keyframes pfpop{0%{transform:scale(.86)} 60%{transform:scale(1.08)} 100%{transform:scale(1)}}

.pf-frames,.pf-banners{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.pf-frame,.pf-ban{display:grid; justify-items:center; gap:8px; padding:12px 8px 10px;
  border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.025);
  color:var(--tx); font:inherit; cursor:pointer; min-width:0;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease)}
.pf-frame:hover,.pf-ban:hover{border-color:var(--line-2); transform:translateY(-2px)}
.pf-frame[aria-pressed="true"],.pf-ban[aria-pressed="true"]{border-color:var(--ember-lit);
  background:rgba(255,45,70,.08); box-shadow:inset 0 0 0 1px rgba(255,124,139,.35)}
.pf-frame:focus-visible,.pf-ban:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.pf-bsw{display:block; width:100%; height:44px; border-radius:10px; background-size:200% 200%}
.pf-ban:hover .pf-bsw{animation:pfdrift 3s ease-in-out infinite alternate}
.pf-flab{font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%}
.pf2 .busy{opacity:.55; pointer-events:none}

/* ── ชวนเพื่อน ── */
.pf-ref{max-width:820px}
.pf-refhead{display:flex; gap:16px; align-items:flex-start}
.pf-refhead h2{margin:0 0 4px; font-size:19px}
.pf-refic{flex:none; width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  color:var(--gold); background:rgba(255,194,77,.12); border:1px solid rgba(255,194,77,.3)}
.pf-refic svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.pf-reflink{display:flex; gap:10px; margin:18px 0 14px; align-items:stretch}
.pf-reflink .linkbox{flex:1 1 auto; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; display:flex; align-items:center}
.pf-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.pf-stats > div{padding:14px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.025); display:grid; gap:2px}
.pf-stats b{font-family:"Space Grotesk",sans-serif; font-size:24px; color:var(--gold);
  font-variant-numeric:tabular-nums}
.pf-stats span{font-size:12px; color:var(--tx3)}
.pf-danger{color:var(--bad)}

@media(max-width:640px){
  .pf-cover{height:140px}
  .pf-id{flex-direction:column; align-items:center; text-align:center; padding:0 16px 20px; gap:4px}
  .pf-id .pf-avwrap{margin-top:-62px}
  .pf-who{justify-items:center; padding-top:6px}
  .pf-badges{justify-content:center}
  .pf-avwrap{width:118px; height:118px}
  .pf-avwrap .avbig{width:106px; height:106px; font-size:40px}
  .pf-tabs{width:100%}
  .pf-tabs button{flex:1 1 auto; padding:9px 12px; font-size:13px}
  .pf-card{padding:18px 14px}
  .pf-reflink{flex-direction:column}
  .pf-stats b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .pf-cover,.pf-orb,.pf-avwrap::before,.pf-avwrap::after,.pf-fdemo::before,.pf-fdemo::after,
  .pf-avwrap[data-frame="pulse"],.pf-fdemo[data-frame="pulse"],.am-avwrap[data-frame="pulse"],.pf-pane:not([hidden]),
  .pf-ban:hover .pf-bsw,.pf2 .aviconbtn[aria-pressed="true"],.pf-sw[aria-pressed="true"]{animation:none}
}

/* ══════════════ 👤 เมนูบัญชี v2 (2026-10-03) ══════════════
   เจ้าของ: "ออกแบบแท็บนี้ ทั้งผู้ใช้และแอดมิน สวย ดูง่าย ล้ำสมัย มีลูกเล่น"
   ⇒ หัวเมนู = ปกโปรไฟล์ย่อ (ปก/กรอบ/รูปชุดเดียวกับหน้าโปรไฟล์) · การ์ดยอดเงิน + ปุ่มเติม
   ⇒ ที่ไปบ่อยเป็นแผ่นทางลัด 2×2 มีไอคอนสี · เปิดเมนูแล้วของค่อย ๆ ไล่ขึ้นมา
   ⚠ คลาสขึ้นต้น am- · ทุก a/button ในเมนูต้องเขียนเจาะจงกว่า .acctmenu a (กฎเดิม) */
.acctmenu.am2{width:316px; padding:8px; border-radius:20px; overflow-x:hidden; overflow-y:auto;
  max-height:calc(100vh - 86px); max-height:calc(100dvh - 86px); overscroll-behavior:contain;
  transform-origin:top right; box-shadow:0 30px 70px -20px rgba(0,0,0,.75),
  0 0 0 1px rgba(255,255,255,.04)}
.acctmenu.am2:not([hidden]){animation:amIn .2s var(--ease) both}
.am2 > *{animation:amItem .32s var(--ease) both}
.am2 > :nth-child(2){animation-delay:.03s}
.am2 > :nth-child(3){animation-delay:.06s}
.am2 > :nth-child(4){animation-delay:.09s}
.am2 > :nth-child(5){animation-delay:.12s}
.am2 > :nth-child(6){animation-delay:.15s}
@keyframes amIn{from{opacity:0; transform:translateY(-8px) scale(.96)} to{opacity:1; transform:none}}
@keyframes amItem{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* หัวเมนู — ปกย่อ */
.acctmenu.am2 a.am-head{position:relative; isolation:isolate; overflow:hidden; gap:12px;
  padding:14px; margin:0 0 8px; border-radius:15px; color:#fff; min-height:0}
.am-cover{position:absolute; inset:0; z-index:-1; background-size:220% 220%;
  animation:pfdrift 14s ease-in-out infinite alternate; transition:filter .2s var(--ease)}
.am-cover::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(8,8,12,.72),rgba(8,8,12,.25) 70%,rgba(8,8,12,.1))}
.acctmenu.am2 a.am-head:hover{background:none}
.acctmenu.am2 a.am-head:hover .am-cover{filter:brightness(1.15) saturate(1.1)}
.am-avwrap{position:relative; isolation:isolate; flex:none; width:54px; height:54px; border-radius:50%;
  padding:3px; display:grid; place-items:center; background:rgba(0,0,0,.35)}
.acctmenu .am-avwrap .av{width:46px; height:46px; position:relative; z-index:1; font-size:17px;
  border:2px solid rgba(10,10,14,.9)}
.am-who{display:grid; gap:1px; min-width:0}
.am-who b{font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.am-who span{font-size:12px; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.am-role{margin-left:auto; flex:none; align-self:flex-start; font-size:10.5px; font-weight:700;
  letter-spacing:.04em; padding:3px 8px; border-radius:999px; color:var(--gold);
  background:rgba(20,14,4,.55); border:1px solid rgba(255,194,77,.45)}

/* การ์ดยอดเงิน */
.acctmenu.am2 a.am-wallet{justify-content:space-between; padding:11px 12px 11px 14px; margin:0 0 8px;
  border-radius:15px; border:1px solid rgba(255,194,77,.22); color:var(--tx);
  background:linear-gradient(135deg,rgba(255,194,77,.10),rgba(255,45,70,.06))}
.acctmenu.am2 a.am-wallet:hover{border-color:rgba(255,194,77,.45);
  background:linear-gradient(135deg,rgba(255,194,77,.16),rgba(255,45,70,.10))}
.am-wl{display:grid; gap:1px; min-width:0}
.am-wl > span{font-size:11.5px; color:var(--tx3)}
.acctmenu.am2 .am-wl .bal{margin:0; font-family:"Space Grotesk",sans-serif; font-size:21px;
  font-weight:700; color:var(--gold); line-height:1.15}
.am-top{flex:none; display:inline-flex; align-items:center; gap:5px; padding:7px 12px;
  border-radius:999px; font-size:12.5px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,#E01F38,#FF4D63); box-shadow:0 8px 18px -10px rgba(255,45,70,.9);
  transition:transform .16s var(--ease)}
.acctmenu.am2 a.am-wallet:hover .am-top{transform:translateX(-2px)}
.am-top svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}

/* แผ่นทางลัด 2×2 */
.am-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 0 6px}
.acctmenu.am2 .am-grid a.am-it{position:relative; flex-direction:column; align-items:flex-start;
  gap:9px; padding:12px; min-height:78px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.025); color:var(--tx); font-weight:600; font-size:13px;
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease)}
.acctmenu.am2 .am-grid a.am-it:hover{transform:translateY(-2px); border-color:var(--line-2);
  background:rgba(255,255,255,.06)}
.am-it svg{flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; color:var(--tx3)}
.am-grid .am-it svg{width:34px; height:34px; padding:7px; border-radius:11px; box-sizing:border-box}
.am-grid .am-it:nth-child(1) svg{color:var(--gold); background:rgba(255,194,77,.12)}
.am-grid .am-it:nth-child(2) svg{color:var(--cyan); background:rgba(95,208,232,.13)}
.am-grid .am-it:nth-child(3) svg{color:#B08CFF; background:rgba(176,140,255,.14)}
.am-grid .am-it:nth-child(4) svg{color:var(--ok); background:rgba(127,224,127,.11)}
.am-badge{position:absolute; top:9px; right:9px; min-width:20px; padding:1px 6px; border-radius:999px;
  font-size:11px; font-weight:700; text-align:center; color:#fff; background:var(--ember);
  box-shadow:0 0 0 3px var(--bg-soft); animation:amPing 2s ease-out infinite}
@keyframes amPing{0%{box-shadow:0 0 0 3px var(--bg-soft),0 0 0 3px rgba(255,45,70,.55)}
  70%{box-shadow:0 0 0 3px var(--bg-soft),0 0 0 9px rgba(255,45,70,0)}
  100%{box-shadow:0 0 0 3px var(--bg-soft),0 0 0 3px rgba(255,45,70,0)}}

/* รายการล่าง + ออกจากระบบ */
.am-list{display:grid; gap:2px; padding-top:6px; margin-top:2px; border-top:1px dashed var(--line)}
.acctmenu.am2 .am-list a.am-it{gap:11px; padding:10px 12px; min-height:44px; border-radius:12px;
  font-size:13.5px}
.acctmenu.am2 .am-list a.am-it:hover svg{color:var(--tx)}
.am-pill{margin-left:auto; font-style:normal; font-size:10.5px; font-weight:700; padding:2px 8px;
  border-radius:999px; color:var(--gold); border:1px solid rgba(255,194,77,.4)}
.acctmenu.am2 > button.am-out{gap:11px; margin-top:4px; padding:10px 12px; min-height:44px;
  border-radius:12px; font-size:13.5px}
.acctmenu.am2 > button.am-out svg{width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.acctmenu.am2 > button.am-out:hover{background:rgba(255,107,90,.10)}
.acctmenu.am2 a:focus-visible,.acctmenu.am2 button:focus-visible{outline:2px solid var(--ember-lit);
  outline-offset:-2px}

@media(max-width:520px){ .acctmenu.am2{width:min(92vw,330px)} }
@media (prefers-reduced-motion:reduce){
  .acctmenu.am2:not([hidden]),.am2 > *,.am-cover,.am-badge,.am-avwrap::before,.am-avwrap::after,
  .am-avwrap[data-frame="pulse"]{animation:none}
}

/* เมนูบัญชี v2 · ลูกเล่น — สถานะสดบนแผ่นทางลัด · ชวนเพื่อน · สวิตช์เอฟเฟกต์ */
.am-grid .am-it > span{display:grid; gap:2px; min-width:0; width:100%}
.am-grid .am-it small{font-size:11px; font-weight:500; color:var(--tx3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.am-grid .am-it small.warn{color:var(--warn)}
.am-grid .am-it small.warn::before{content:""; display:inline-block; width:6px; height:6px;
  margin-right:5px; border-radius:50%; background:var(--warn); vertical-align:middle;
  animation:amPing 2s ease-out infinite}
.am-ref{display:flex; align-items:center; gap:10px; margin:6px 0 2px; padding:10px 10px 10px 12px;
  border-radius:14px; border:1px dashed rgba(255,194,77,.35); background:rgba(255,194,77,.05)}
.am-ref > svg{flex:none; width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.am-ref > span{display:grid; min-width:0; flex:1 1 auto}
.am-ref b{font-size:13px}
.am-ref small{font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acctmenu.am2 .am-ref button.am-copy{flex:none; width:auto; min-height:34px; padding:6px 11px;
  border-radius:999px; font-size:12px; font-weight:600; color:var(--gold); cursor:pointer;
  border:1px solid rgba(255,194,77,.45); background:transparent;
  transition:background .16s var(--ease)}
.acctmenu.am2 .am-ref button.am-copy:hover{background:rgba(255,194,77,.12)}
.am-tg{display:flex; align-items:center; gap:11px; padding:10px 12px; margin-top:2px; border-radius:12px;
  cursor:pointer; color:var(--tx2); font-size:13.5px}
.am-tg:hover{background:var(--glass-2)}
.am-tg input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.am-sw{flex:none; position:relative; width:36px; height:20px; border-radius:999px;
  background:rgba(255,255,255,.12); transition:background .2s var(--ease)}
.am-sw::after{content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%;
  background:#fff; transition:transform .2s var(--ease)}
.am-tg input:checked + .am-sw{background:linear-gradient(135deg,#E01F38,#FF4D63)}
.am-tg input:checked + .am-sw::after{transform:translateX(16px)}
.am-tg input:focus-visible + .am-sw{outline:2px solid var(--ember-lit); outline-offset:2px}
.am-tgl{display:grid; min-width:0}
.am-tgl small{font-size:11px; color:var(--tx3)}
@media (prefers-reduced-motion:reduce){ .am-grid .am-it small.warn::before{animation:none} }

/* ══════════════ 🧭 หัวเว็บ v2 (2026-10-03) — header.top.tb2 ══════════════
   เจ้าของ: "ทำแท็บด้านบนใหม่ทั้งหมดอย่างละเอียด พรีเมียมเหมือนเดิม" + ถอดปุ่มกลมเปิด/ปิดภาพเคลื่อนไหว
   ⇒ แถบแก้วลอย · เส้นไล่สีใต้แถบ · เมนูเป็นกลุ่มเม็ดยาวมีไฮไลต์เลื่อนตามที่ชี้
   ⇒ หดลงตอนเลื่อนหน้า · เส้นบอกว่าอ่านหน้าไปถึงไหน · ชิปบัญชีโชว์ยอดกระเป๋า · ปุ่มหลักมีแสงวิ่ง
   ⚠ ทุกกฎขึ้นต้น header.top.tb2 — เจาะจงกว่ากฎหัวเว็บชั้นเก่า ๆ ทุกตัวในไฟล์นี้
   ⚠ ขนาด/การซ่อนตามความกว้างจอ (ปุ่มชุมชน · ปุ่มหลัก · เมนู) ยังใช้กฎเดิม ไม่แตะ */
header.top.tb2{background:rgba(9,9,13,.6); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:transparent;
  transition:background .25s var(--ease), box-shadow .25s var(--ease)}
header.top.tb2::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  pointer-events:none; opacity:.75;
  background:linear-gradient(90deg,transparent,rgba(255,45,70,.6) 22%,rgba(176,140,255,.45) 62%,transparent)}
header.top.tb2.scrolled{background:rgba(7,7,10,.88); box-shadow:0 14px 34px -20px rgba(0,0,0,.95)}
header.top.tb2 .wrap{min-height:66px; transition:min-height .25s var(--ease)}
header.top.tb2.scrolled .wrap{min-height:56px}

/* ── แบรนด์ ── */
header.top.tb2 .brand .mk{border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 20px -6px rgba(255,45,70,.75);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
header.top.tb2 .brand:hover .mk{transform:rotate(-8deg) scale(1.08)}
header.top.tb2 .bnm{font-weight:700; letter-spacing:-.015em;
  background:linear-gradient(90deg,#fff 30%,#FFC9D0); -webkit-background-clip:text; background-clip:text;
  color:transparent}

/* ── เมนูหลัก: กลุ่มเม็ดยาว + ไฮไลต์เลื่อน ── */
header.top.tb2 nav.tb-nav{position:relative; gap:2px; padding:4px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03)}
header.top.tb2 nav.tb-nav a{position:relative; z-index:1; padding:7px 14px; border:0; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--tx2); background:none; line-height:1.3;
  transition:color .2s var(--ease)}
header.top.tb2 nav.tb-nav a:hover,header.top.tb2 nav.tb-nav a.on{color:#fff; background:none}
header.top.tb2 nav.tb-nav a.on{font-weight:600}
header.top.tb2 nav.tb-nav a:focus-visible{outline:2px solid var(--ember-lit); outline-offset:1px}
.tb-ind{position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:var(--tb-w,0px);
  transform:translateX(var(--tb-x,0px)); border-radius:999px; opacity:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,45,70,.34),rgba(255,124,139,.14));
  box-shadow:inset 0 0 0 1px rgba(255,124,139,.38),0 8px 20px -10px rgba(255,45,70,.9);
  transition:transform .34s cubic-bezier(.3,1.25,.5,1),width .34s cubic-bezier(.3,1.25,.5,1),opacity .2s}
.tb-ind.show{opacity:1}

/* ── ปุ่มชุมชน (ไลน์/ดิสคอร์ด): วงกลมไอคอน สีแบรนด์ตอนชี้ ── */
header.top.tb2 .j-line,header.top.tb2 .j-discord{width:42px; height:42px; min-height:42px; padding:0;
  border-radius:50%; justify-content:center}
header.top.tb2 .j-line:hover{color:#06C755; border-color:rgba(6,199,85,.5); background:rgba(6,199,85,.08)}
header.top.tb2 .j-discord:hover{color:#8C98FF; border-color:rgba(88,101,242,.55); background:rgba(88,101,242,.1)}

/* ── ปุ่มหลัก: แสงวิ่งผ่านเป็นระยะ ── */
header.top.tb2 .topcta{position:relative; overflow:hidden; isolation:isolate; border-radius:999px;
  padding-inline:18px; background:linear-gradient(135deg,#E01F38,#FF4D63);
  box-shadow:0 10px 24px -12px rgba(255,45,70,.95)}
header.top.tb2 .topcta::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-130%); animation:tbShine 6s ease-in-out 2s infinite}
header.top.tb2 .topcta:hover{transform:translateY(-1px)}
@keyframes tbShine{0%,72%{transform:translateX(-130%)} 100%{transform:translateX(130%)}}

/* ── ปุ่มกลม (เมนูมือถือ · กระดิ่ง) ── */
header.top.tb2 .iconbtn{width:42px; height:42px; background:rgba(255,255,255,.035);
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease)}
header.top.tb2 .iconbtn:hover{transform:translateY(-1px); color:#fff}
header.top.tb2 #bell:not([hidden]) .dot:not([hidden]){animation:amPing 2s ease-out infinite}

/* ── ชิปบัญชี: รูป · ชื่อ · ยอดกระเป๋า ── */
header.top.tb2 .chipacct{gap:9px; padding:4px 12px 4px 4px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  transition:border-color .2s var(--ease), background .2s var(--ease)}
header.top.tb2 .chipacct:hover,header.top.tb2 .chipacct[aria-expanded="true"]{
  border-color:rgba(255,124,139,.45); background:rgba(255,45,70,.08)}
header.top.tb2 .chipacct .av{width:34px; height:34px}
.tb-who{display:grid; min-width:0; line-height:1.15}
.tb-who b{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:14ch}
.tb-bal{font-family:"Space Grotesk",sans-serif; font-size:11.5px; font-weight:600; color:var(--gold);
  font-variant-numeric:tabular-nums}
header.top.tb2 .chipacct .caret{transition:transform .25s var(--ease)}
header.top.tb2 .chipacct[aria-expanded="true"] .caret{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  header.top.tb2 .topcta::after,header.top.tb2 #bell .dot{animation:none}
  .tb-ind,header.top.tb2 .wrap,header.top.tb2 .brand .mk{transition:none}
}
html.hs-off header.top.tb2 .topcta::after,html.hs-off header.top.tb2 #bell .dot{animation:none}

/* ══════════════ 🔐 หน้าเข้าสู่ระบบ/สมัคร v2 (2026-10-03) ══════════════
   เจ้าของ: "สวย ดูง่าย ล้ำสมัย ไฮเทค เป็นมืออาชีพ · ช่องรหัสเชิญ · สมัครแล้วเข้าระบบเลย"
   ⇒ จอใหญ่: แผงแบรนด์ซ้าย (แสงเคลื่อนไหว + จุดเด่น/ขั้นตอน) · การ์ดฟอร์มขวา
   ⇒ จอแคบ: เหลือการ์ดฟอร์มอย่างเดียว (แผงแบรนด์ซ่อน — ไม่ให้ต้องเลื่อนหาฟอร์ม)
   ⚠ คลาสขึ้นต้น au- · .authbox/.pagehead เดิมไม่ได้ใช้ในสองหน้านี้แล้ว */
.au2{padding-top:26px; padding-bottom:56px}
.au-grid{display:grid; gap:22px; grid-template-columns:minmax(0,1fr); max-width:1040px; margin:0 auto;
  align-items:stretch}
@media(min-width:960px){ .au-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px)} }

/* ── แผงแบรนด์ ── */
.au-side{position:relative; overflow:hidden; isolation:isolate; display:none; flex-direction:column;
  justify-content:center; gap:14px; padding:44px 40px; border-radius:28px; border:1px solid var(--line-2);
  background:linear-gradient(160deg,rgba(255,45,70,.16),rgba(12,12,17,.9) 55%),var(--bg-soft)}
@media(min-width:960px){ .au-side{display:flex} }
.au-glow{position:absolute; inset:0; z-index:-1; pointer-events:none}
.au-glow i{position:absolute; border-radius:50%; filter:blur(50px); opacity:.55}
.au-glow i:nth-child(1){width:320px; height:320px; left:-90px; top:-80px; background:#E01F38;
  animation:auFloat 16s ease-in-out infinite alternate}
.au-glow i:nth-child(2){width:260px; height:260px; right:-70px; bottom:-60px; background:#7B4DFF;
  opacity:.4; animation:auFloat 20s ease-in-out infinite alternate-reverse}
.au-glow i:nth-child(3){width:180px; height:180px; left:40%; top:42%; background:#FF7C8B; opacity:.22;
  animation:auFloat 13s ease-in-out infinite alternate}
.au-side::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.16; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(80% 70% at 30% 20%,#000,transparent 75%);
  mask-image:radial-gradient(80% 70% at 30% 20%,#000,transparent 75%)}
@keyframes auFloat{from{transform:translate(0,0) scale(1)} to{transform:translate(50px,40px) scale(1.15)}}
.au-logo{width:56px; height:56px; border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 14px 34px -10px rgba(255,45,70,.85)}
.au-hi{margin:6px 0 0; font-size:clamp(28px,3vw,36px); line-height:1.15; letter-spacing:-.02em;
  background:linear-gradient(90deg,#fff 40%,#FFC9D0); -webkit-background-clip:text; background-clip:text;
  color:transparent}
.au-tag{margin:0; font-size:15px; color:var(--tx2); line-height:1.6; max-width:40ch}
.au-perks{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px}
.au-perks li{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:16px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.au-perks svg{flex:none; width:34px; height:34px; padding:7px; box-sizing:border-box; border-radius:11px;
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  color:var(--ember-lit); background:rgba(255,45,70,.13)}
.au-perks li:nth-child(2) svg{color:#B08CFF; background:rgba(176,140,255,.14)}
.au-perks li:nth-child(3) svg{color:var(--ok); background:rgba(127,224,127,.12)}
.au-perks span{display:grid; gap:2px; font-size:12.5px; color:var(--tx3)}
.au-perks b{font-size:14px; color:var(--tx)}
.au-steps{list-style:none; counter-reset:au; margin:14px 0 0; padding:0; display:grid; gap:0}
.au-steps li{counter-increment:au; position:relative; display:grid; gap:2px; padding:4px 0 18px 46px}
.au-steps li::before{content:counter(au); position:absolute; left:0; top:0; width:32px; height:32px;
  border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff;
  background:linear-gradient(135deg,#E01F38,#FF4D63); box-shadow:0 8px 18px -8px rgba(255,45,70,.9)}
.au-steps li:not(:last-child)::after{content:""; position:absolute; left:15px; top:34px; bottom:2px;
  width:2px; background:linear-gradient(180deg,rgba(255,124,139,.6),rgba(255,124,139,.05))}
.au-steps b{font-size:14.5px}
.au-steps span{font-size:12.5px; color:var(--tx3)}

/* ── การ์ดฟอร์ม ── */
.au-card{padding:26px 26px 22px; border-radius:24px; width:100%; max-width:460px; margin:0 auto;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
@media(min-width:960px){ .au-card{max-width:none} }
.au-tabs{display:flex; gap:4px; padding:4px; margin:0 0 20px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03)}
.au-tabs a{flex:1 1 0; text-align:center; padding:9px 12px; min-height:42px; display:grid; place-items:center;
  border-radius:999px; font-size:14px; font-weight:600; color:var(--tx3); text-decoration:none;
  transition:color .2s var(--ease), background .2s var(--ease)}
.au-tabs a:hover{color:var(--tx)}
.au-tabs a.on{color:#fff; background:linear-gradient(135deg,rgba(255,45,70,.85),rgba(255,124,139,.55));
  box-shadow:0 8px 22px -12px rgba(255,45,70,.9)}
.au-tabs a:focus-visible{outline:2px solid var(--ember-lit); outline-offset:2px}
.au-h{margin:0; font-size:26px; letter-spacing:-.01em}
.au-sub{margin:4px 0 18px; font-size:13.5px; color:var(--tx3)}
.au-dc{gap:10px; min-height:50px; font-weight:600; color:#fff; border-color:rgba(88,101,242,.55);
  background:linear-gradient(135deg,#5865F2,#4752C4); box-shadow:0 12px 26px -14px rgba(88,101,242,.95)}
.au-dc:hover{filter:brightness(1.08); border-color:rgba(140,152,255,.8)}
.au2 .divider{margin:16px 0}
.au-f > span{display:flex; align-items:center; justify-content:space-between; gap:8px}
.au-forgot{font-size:12.5px; font-weight:500}
.au2 .input{transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.au2 .input:focus{box-shadow:0 0 0 4px rgba(255,45,70,.14)}
.au2 .input.good{border-color:rgba(127,224,127,.5)}
.au2 .input.bad{border-color:rgba(255,107,90,.6)}
.au-caps{margin:-4px 0 10px; font-size:12px; color:var(--warn)}
.au-go{min-height:50px; font-size:15.5px; margin-top:6px}
.au-go.busy{opacity:.7; pointer-events:none}
.au-go.busy::after{content:""; width:16px; height:16px; margin-left:8px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:auSpin .7s linear infinite}
@keyframes auSpin{to{transform:rotate(1turn)}}
.au-box{margin-top:14px; padding:14px 16px; border-radius:16px; border:1px solid var(--line);
  background:rgba(255,255,255,.025); display:grid; gap:8px}
.au-note{margin:12px 0 0; padding-top:12px; border-top:1px dashed var(--line); font-size:12px;
  color:var(--tx3); line-height:1.6; text-align:center}
.au2 .swap{text-align:center; margin:14px 0 0}

/* ความแข็งรหัสผ่าน 4 ขีด · ไฟบอกรหัสตรงกัน */
.au-meter{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:-4px 0 6px}
.au-meter i{height:5px; border-radius:99px; background:rgba(255,255,255,.08);
  transition:background .25s var(--ease)}
.au-meter[data-lv="1"] i:nth-child(-n+1){background:#FF6B5A}
.au-meter[data-lv="2"] i:nth-child(-n+2){background:#E0A877}
.au-meter[data-lv="3"] i:nth-child(-n+3){background:#C6E05E}
.au-meter[data-lv="4"] i{background:var(--ok)}
.au-mtx{margin-top:0}
/* คำแนะนำใต้ช่องกรอก — เว้นห่างจากหัวข้อช่องถัดไป ไม่ให้อ่านปนกัน */
.au2 form .hint{margin:6px 0 16px; font-size:12.5px; line-height:1.55}
.au-match{font-style:normal; font-size:12px; font-weight:600; color:var(--ok)}

/* รหัสเชิญ */
.au-invite{display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px 14px; border-radius:16px;
  border:1px solid rgba(255,194,77,.4); animation:auPop .5s var(--ease) both;
  background:linear-gradient(135deg,rgba(255,194,77,.14),rgba(255,45,70,.08))}
.au-invite svg{flex:none; width:36px; height:36px; padding:7px; box-sizing:border-box; border-radius:12px;
  fill:none; stroke:var(--gold); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  background:rgba(255,194,77,.15)}
.au-invite span{display:grid; gap:1px; min-width:0}
.au-invite b{font-size:14px; color:var(--gold)}
.au-invite small{font-size:12px; color:var(--tx2)}
@keyframes auPop{from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:none}}
.au-ref .input{font-family:"IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase}

@media(max-width:520px){
  .au2{padding-top:14px}
  .au-card{padding:20px 16px 18px; border-radius:20px}
  .au-h{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .au-glow i,.au-invite,.au-go.busy::after{animation:none}
}
html.hs-off .au-glow i{animation:none}

/* คลาสแทน style ที่เคยฝังในแท็ก — สร้างโดย tools/build_webstore.py */
.u1{width:74%}