/* =====================================================================
   EVO FUTURE : สไตล์ชีทหน้าร้านใหม่   ทำตามม็อกอัพที่พี่วีส่งมา
   ---------------------------------------------------------------------
   เขียนขึ้นใหม่ทั้งหมด ไม่ใช้ Bootstrap
   ไม่ยุ่งกับ stylesheets/ , stylesheet9/ , assets9/ ของเดิมเลยแม้แต่บรรทัดเดียว

   *** กฎเหล็กของไฟล์นี้ ***
   แบนเนอร์แรก (.hero) ต้องเป็น "แนวนอน" เสมอ ทุกขนาดจอ
   ห้ามซ้อนเป็นแนวตั้งบนมือถือเด็ดขาด เพราะจะกินพื้นที่จอจนต้องเลื่อนยาว
   วิธีบังคับ : ใช้ aspect-ratio + max-height คุมไว้ ไม่ใช้ grid ที่พับลงมา
   รูปสินค้าในแบนเนอร์บนมือถือจะกลายเป็นฉากหลัง ข้อความทับอยู่ด้านหน้า
   แบนเนอร์จึงกว้างกว่าสูงตลอด ดูรายละเอียดที่หัวข้อ 5

   สีทั้งหมดอยู่ในบล็อก :root ข้างล่างที่เดียว
   ===================================================================== */

/* ---------- 1. ตัวแปร  (แก้ธีมที่นี่ที่เดียว) ---------- */
:root {
  --page:      #eef1f7;
  --page-2:    #f7f9fc;
  --card:      #ffffff;
  --ink:       #0d1526;
  --ink-2:     #5b6b82;
  --ink-3:     #93a3ba;
  --line:      #e2e8f2;
  --line-2:    #eef2f8;

  --navy:      #070d24;
  --navy-2:    #101a44;
  --navy-3:    #1b2a63;

  --blue:      #2563eb;
  --blue-2:    #3b82f6;
  --blue-3:    #60a5fa;
  --blue-soft: #eaf1ff;
  --violet:    #8b5cf6;
  --violet-2:  #a78bfa;

  --gold:      #f5b120;
  --green:     #10b981;
  --rose:      #f43f5e;

  --shell:     1440px;
  --r-sm:      10px;
  --r:         16px;
  --r-lg:      22px;
  --r-xl:      28px;

  /* แถบจุดเด่นลอยทับขอบล่างแบนเนอร์ลึกเท่านี้  .hero ต่อพื้นเบลอลงไปเท่ากันพอดี
     แก้ค่านี้ที่เดียว สองส่วนขยับตามกัน  (มือถือตั้งค่าใหม่ในหัวข้อ 12) */
  --feats-overlap: 42px;

  /* เงาซ้อนหลายชั้น ให้ดูมีความลึกจริง ไม่ใช่เงาแบนชั้นเดียว */
  --sh-1: 0 1px 2px rgba(13, 21, 38, .05),
          0 2px 6px rgba(13, 21, 38, .04);
  --sh-2: 0 2px 4px rgba(13, 21, 38, .05),
          0 8px 18px rgba(13, 21, 38, .07),
          0 1px 0 rgba(255, 255, 255, .9) inset;
  --sh-3: 0 4px 8px rgba(13, 21, 38, .06),
          0 18px 36px rgba(13, 21, 38, .12),
          0 1px 0 rgba(255, 255, 255, .95) inset;
  --sh-blue: 0 8px 18px rgba(37, 99, 235, .28),
             0 2px 5px rgba(37, 99, 235, .22);

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. รีเซ็ต  (จำกัดขอบเขตไว้ ไม่กระทบหน้าเก่า) ----------
   ไฟล์นี้ถูกโหลดในทุกหน้าของเว็บ รวมหน้าเก่าที่ยังใช้ดีไซน์เดิมอยู่
   ถ้ารีเซ็ตแบบครอบทั้งหน้า (body, img, a, ul, button) จะไปพังหน้าเก่าทันที

   จึงจำกัดไว้ 2 ขอบเขตเท่านั้น
     body.evo-shop   หน้าที่ใช้ดีไซน์ใหม่เต็มรูปแบบ
     .evo-part       หัวเว็บ / ท้ายหน้า / เมนูล่าง ที่แทรกอยู่ในหน้าเก่า
   หน้าเก่าจึงได้หัวกับท้ายแบบใหม่ โดยเนื้อหาตรงกลางไม่ถูกแตะเลย */

.evo-shop, .evo-shop *, .evo-shop *::before, .evo-shop *::after,
.evo-part, .evo-part *, .evo-part *::before, .evo-part *::after { box-sizing: border-box; }

body.evo-shop {
  margin: 0;
  background: var(--page);
  background-image:
    radial-gradient(1100px 560px at 82% -6%, rgba(99, 140, 255, .16), transparent 62%),
    radial-gradient(880px 480px at 6% 12%,  rgba(139, 92, 246, .1),  transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Prompt', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* หัวเว็บและท้ายหน้า ต้องตั้งฟอนต์เองด้วย เพราะหน้าเก่าใช้ฟอนต์คนละตัว */
.evo-part {
  font-family: 'Prompt', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* *** สำคัญ : ห้ามเขียนว่า body.evo-shop img ***
   `body.evo-shop img` มีน้ำหนักตัวเลือก (0,1,2) ซึ่งสูงกว่ากฎเฉพาะเจาะจง
   อย่าง `.top-logo img` หรือ `.pcard-img img` ที่มีน้ำหนักแค่ (0,1,1)
   ผลคือกฎรีเซ็ตจะไปทับกฎของแต่ละส่วนทั้งหมด รูปโลโก้กับรูปสินค้าจะบานเป็นขนาดเต็ม

   ใช้ `.evo-shop img` แทน น้ำหนักจะเป็น (0,1,1) เท่ากับกฎอื่น
   และเพราะบล็อกนี้อยู่ต้นไฟล์ กฎที่เขียนทีหลังจึงทับได้ตามปกติ */
.evo-shop img, .evo-part img { max-width: 100%; height: auto; display: block; border: 0; }
.evo-shop a,   .evo-part a   { color: inherit; text-decoration: none; }
.evo-shop button, .evo-shop input, .evo-shop select,
.evo-part button, .evo-part input, .evo-part select { font: inherit; color: inherit; }
/* *** ระวัง : กฎนี้มีน้ำหนัก (0,1,1) ***
   สูงกว่ากฎที่เขียนด้วยคลาสเดี่ยวอย่าง .btn-primary ซึ่งมีแค่ (0,1,0)
   ปุ่มที่เป็น <button> จริง ๆ จึงโดนลบพื้นหลังทิ้ง กลายเป็นปุ่มขาวจืด
   แก้โดยเขียนกฎปุ่มเป็น  .btn-primary, button.btn-primary { ... }
   เพิ่ม button. เข้าไปให้น้ำหนักเท่ากัน แล้วกฎที่อยู่ทีหลังในไฟล์จะชนะ
   ถ้าเพิ่มปุ่มแบบใหม่ในอนาคต อย่าลืมทำแบบเดียวกัน */
.evo-shop button, .evo-part button { cursor: pointer; background: none; border: 0; }
.evo-shop ul,  .evo-part ul  { list-style: none; margin: 0; padding: 0; }
.evo-shop li,  .evo-part li  { list-style: none; }
.evo-shop h1, .evo-shop h2, .evo-shop h3, .evo-shop h4,
.evo-part h1, .evo-part h2, .evo-part h3, .evo-part h4 {
  margin: 0; font-weight: 600; line-height: 1.24; text-wrap: balance;
}

.num { font-variant-numeric: tabular-nums; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 26px;
}
.grow { flex: 1 1 auto; min-width: 0; }

/* ฉากดาว ใช้ซ้ำได้ทั้งหัวเว็บ แบนเนอร์ การ์ดกรมท่า และท้ายหน้า
   ซ้อน 3 ชั้น ดาวเล็ก ดาวใหญ่ แสงออโรรา ให้เกิดความลึก */
.starry {
  position: relative;
  isolation: isolate;
  background-color: var(--navy);
}
.starry::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,.7),  transparent),
    radial-gradient(1px   1px   at 33% 68%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 58% 18%, rgba(255,255,255,.6),  transparent),
    radial-gradient(1px   1px   at 77% 55%, rgba(255,255,255,.4),  transparent),
    radial-gradient(1.4px 1.4px at 89% 28%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px   1px   at 45% 88%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 22% 47%, rgba(255,255,255,.4),  transparent),
    radial-gradient(1px   1px   at 66% 78%, rgba(255,255,255,.3),  transparent),
    radial-gradient(1.6px 1.6px at 95% 68%, rgba(255,255,255,.5),  transparent);
}
/* ชั้นแสงออโรรา ให้พื้นหลังไม่ตันและมีระยะลึก */
.starry::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 420px at 76% -10%, rgba(96, 132, 255, .34), transparent 66%),
    radial-gradient(700px 400px at 14% 108%, rgba(139, 92, 246, .26), transparent 64%),
    radial-gradient(520px 300px at 50% 50%,  rgba(37, 99, 235, .12),  transparent 70%);
}

/* =====================================================================
   3. หัวเว็บ
   ===================================================================== */
.top { position: sticky; top: 0; z-index: 80; }

.top-a {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 15px 0;
  color: #fff;
}
.top-logo img {
  height: 42px;
  width: auto;
  filter: drop-shadow(0 3px 10px rgba(96, 165, 250, .32));
}

/* ช่องค้นหา ยกลอยด้วยเงาขาวด้านใน + เงาเข้มด้านนอก */
.srch {
  flex: 1 1 auto;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 0 7px 0 20px;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, .18),
    0 10px 24px rgba(0, 0, 0, .16),
    0 1px 0 rgba(255, 255, 255, .8) inset;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.srch:focus-within {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, .35),
    0 12px 28px rgba(0, 0, 0, .2);
}
.srch > svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.srch input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0; outline: none; background: none;
  padding: 13px 0;
  font-size: 14.5px;
  color: var(--ink);
}
.srch input::placeholder { color: var(--ink-3); }
.srch button {
  flex: none;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--sh-blue);
  transition: filter .18s var(--ease), transform .18s var(--ease);
}
.srch button:hover { filter: brightness(1.09); transform: translateY(-1px); }

.top-acts { display: flex; align-items: center; gap: 4px; flex: none; }

.act {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-radius: 13px;
  color: rgba(255, 255, 255, .88);
  font-size: 13.5px;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.act:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transform: translateY(-1px);
}
.act svg { width: 21px; height: 21px; flex: none; }

.act-badge {
  position: absolute;
  top: 1px; left: 25px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6b81, var(--rose));
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  font-style: normal;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2.5px var(--navy), 0 3px 7px rgba(244, 63, 94, .5);
}

/* ---------- เมนูย่อยของปุ่มบัญชี  เอาเมาส์ไปวางแล้วเลื่อนลงมา ----------
   ทำด้วย CSS ล้วน ไม่ใช้ JavaScript
   เคยมีบทเรียนจากเมนูฝั่งสมาชิกมาแล้วว่า ถ้าเขียนตัวจับการคลิกเพิ่มเอง
   มันจะไปชนกับตัวจับของธีมเดิม แล้วเมนูดับทั้งแถบ

   :focus-within ใส่ไว้ด้วย เพื่อให้คนที่กด Tab ไล่ทีละปุ่มเปิดเมนูได้เหมือนกัน

   ช่องว่างระหว่างปุ่มกับกล่องเมนูเปิดไว้ 10px  ถ้าปล่อยว่างจริง ๆ
   เมาส์ที่เลื่อนลงมาจะหลุด :hover ก่อนถึงเมนู แล้วเมนูจะหุบใส่หน้า
   จึงใช้ ::before คลุมช่องว่างนั้นไว้แบบใส ๆ ให้เมาส์เดินผ่านได้      */
/* แถบบนต้องอยู่เหนือแถบเมนูขาว ไม่งั้นเมนูย่อยจะถูกแถบขาวบังครึ่งบน
   สาเหตุ  .starry ใส่ isolation: isolate ไว้ เพื่อกันดาวพื้นหลัง (z-index -2)
   ไม่ให้ทะลุไปอยู่หลังทั้งหน้า  ผลข้างเคียงคือมันสร้างชั้นการวาดของตัวเอง
   ลูกที่อยู่ข้างในจึงยกตัวเองขึ้นเหนือพี่น้องนอกกล่องไม่ได้ ต่อให้ z-index สูงแค่ไหน
   ส่วน .top-b ใช้ backdrop-filter ซึ่งสร้างชั้นการวาดเหมือนกันและอยู่ทีหลัง
   จึงทับขึ้นมา  แก้ที่ตัวกล่องแทน ยกทั้งแถบขึ้นหนึ่งชั้น
   จำกัดไว้ใต้ .top เท่านั้น ท้ายหน้าที่ใช้ .starry เหมือนกันจะไม่ถูกกระทบ */
.top .starry { z-index: 2; }

.act-has { position: relative; }
.act-caret {
  display: inline-flex;
  margin-left: -3px;
  transition: transform .2s var(--ease);
}
.act-caret svg { width: 13px; height: 13px; transform: rotate(90deg); }
.act-has:hover .act-caret { transform: translateY(1px); }

.acmenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  min-width: 216px;
  padding: 8px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(7, 13, 36, .22), 0 2px 6px rgba(7, 13, 36, .1);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .18s var(--ease), transform .2s var(--ease-out), visibility .18s;
}
.acmenu::before {            /* สะพานให้เมาส์เดินจากปุ่มลงมาถึงเมนู */
  content: '';
  position: absolute;
  left: 0; right: 0; top: -12px;
  height: 12px;
}
.acmenu::after {             /* หัวลูกศรชี้ขึ้นไปที่ปุ่ม */
  content: '';
  position: absolute;
  top: -6px; right: 22px;
  width: 11px; height: 11px;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.act-has:hover .acmenu,
.act-has:focus-within .acmenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.acmenu-hd {
  display: block;
  padding: 8px 13px 9px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acmenu a {
  display: block;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.acmenu a:hover { background: var(--blue-soft); color: var(--blue); }
.acmenu-line {
  display: block;
  height: 1px;
  margin: 6px 9px;
  background: var(--line-2);
}
.acmenu a.acmenu-out { color: var(--rose); }
.acmenu a.acmenu-out:hover { background: #fff1f3; color: var(--rose); }

/* เครื่องที่ไม่มีเมาส์ (มือถือ แท็บเล็ต จอสัมผัส) ปิดเมนูย่อยไปเลย
   เพราะ :hover บนจอสัมผัสจะค้างอยู่หลังแตะ กลายเป็นเมนูเปิดทับหน้าจอ
   เขียนแยกจาก max-width เพราะแท็บเล็ตจอใหญ่ก็ไม่มีเมาส์เหมือนกัน */
@media (hover: none) {
  .acmenu    { display: none; }
  .act-caret { display: none; }
}

/* แถวหมวดหมู่ พื้นขาว */
.top-b {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(13, 21, 38, .05);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.top-b::-webkit-scrollbar { display: none; }
.top-b ul {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 26px;
  white-space: nowrap;
}
.top-b a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 15px;
  font-size: 14.5px;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.top-b a::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 0;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  transform: scaleX(0);
  transition: transform .24s var(--ease-out);
}
.top-b a:hover { color: var(--blue); }
.top-b a.is-on { color: var(--blue); font-weight: 500; }
.top-b a.is-on::after { transform: scaleX(1); }
.top-b a svg { width: 17px; height: 17px; }

/* =====================================================================
   4. โครงเนื้อหา
   ===================================================================== */
.wrap { padding: 24px 0 0; }

/* =====================================================================
   5. แบนเนอร์หลัก   *** ต้องเป็นแนวนอนเสมอ ***
   ---------------------------------------------------------------------
   ใช้ aspect-ratio บังคับสัดส่วนกว้าง:สูง ไม่ปล่อยให้ความสูงยืดตามเนื้อหา
   จอใหญ่  21:9      จอกลาง 2:1      มือถือ 16:9
   ทุกค่ากว้างกว่าสูงทั้งหมด จึงไม่มีทางกลายเป็นแนวตั้ง
   max-height กันไว้อีกชั้น เผื่อจอกว้างมากจนแบนเนอร์สูงเกินไป
   ===================================================================== */
/* สไลด์เป็น "รูปล้วน" ไม่มีตัวหนังสือหรือป้ายทับ
   เพราะลูกค้าจะทำรูปเองแล้วเพิ่มสไลด์ได้ไม่จำกัดผ่านหน้าแอดมิน
   ถ้าเราวางตัวหนังสือทับ มันจะไปชนกับตัวหนังสือที่อยู่ในรูปของเค้าเอง */
.hero {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  /* สัดส่วนถูกกำหนดจาก PHP ตามขนาดรูปจริงของลูกค้า (ดู index-new.php)
     ค่าตรงนี้เป็นค่าสำรองเผื่ออ่านขนาดรูปไม่ได้ */
  aspect-ratio: 21 / 9;
  min-height: 200px;
  /* *** กับดัก aspect-ratio + min-height ***
     ถ้าความสูงตามสัดส่วนต่ำกว่า min-height เบราว์เซอร์จะไม่ยอมเตี้ยลง
     แต่จะ "ขยายความกว้าง" ตามสัดส่วนแทน แบนเนอร์จึงล้นขอบจอขวา
     (เคยเกิดบนมือถือ แบนเนอร์กว้าง 495px ในจอ 375px)
     max-width กันไว้ไม่ให้กว้างเกินกรอบเด็ดขาด */
  max-width: 100%;
  /* แถบจุดเด่นลอยทับขอบล่าง จึงต่อพื้นเบลอลงไปเท่าระยะที่ทับ แล้วดันรูปจริงชิดบน
     รูปลูกค้าเห็นครบทั้งใบ แถบทับแค่พื้นเบลอ ไม่ทับตัวหนังสือในรูปอีก
     content-box ทำให้ aspect-ratio คุมเฉพาะส่วนรูป ไม่นับ padding */
  box-sizing: content-box;
  padding-bottom: var(--feats-overlap);
  background: var(--navy);
  box-shadow:
    0 4px 10px rgba(7, 13, 36, .2),
    0 26px 60px rgba(7, 13, 36, .32),
    0 0 0 1px rgba(255, 255, 255, .07) inset;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.hero-slide.is-on { opacity: 1; }

/* ---------- รูปสไลด์ห้ามถูกตัด ----------
   ลูกค้าออกแบบรูปเองทั้งใบ มีทั้งตัวหนังสือและปุ่มอยู่ในรูป
   ถ้าใช้ object-fit: cover รูปที่สัดส่วนไม่ตรงกับกรอบจะโดนครอบตัด
   ตัวหนังสือริม ๆ จะหายไป ซึ่งรับไม่ได้

   จึงใช้ 2 ชั้น
     ชั้นหลัง  รูปเดียวกันขยายเต็มกรอบแล้วเบลอ  ทำหน้าที่เป็นพื้นหลัง
     ชั้นหน้า  รูปจริงแบบ contain  เห็นครบทั้งใบ ไม่ถูกตัดแม้แต่พิกเซลเดียว
   เบราว์เซอร์โหลดรูปครั้งเดียวเพราะเป็น URL เดียวกัน ไม่เปลืองเน็ตเพิ่ม */
.hero-slide .bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(26px) saturate(1.25) brightness(.62);
  transform: scale(1.14);   /* ขยายกันขอบเบลอโปร่งตรงมุม */
}
.hero-slide .main {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center top;   /* ชิดบน  ส่วนล่างเป็นพื้นเบลอให้แถบจุดเด่นทับ */
}

/* ปุ่มเลื่อนซ้ายขวา โผล่ตอนเอาเมาส์ชี้ */
.hero-nav, button.hero-nav {
  position: absolute;
  top: calc(50% - var(--feats-overlap) / 2);   /* กลางรูป ไม่นับพื้นเบลอด้านล่าง */
  translate: 0 -50%;
  z-index: 3;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 20, 44, .42);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  opacity: 0;
  transition: opacity .25s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.hero:hover .hero-nav { opacity: 1; }
.hero-nav:hover { background: rgba(37, 99, 235, .85); transform: translateY(-50%) scale(1.07); }
.hero-nav svg  { width: 20px; height: 20px; }
.hero-nav.prev { left: 18px; }
.hero-nav.next { right: 18px; }

.hero-dots {
  position: absolute;
  left: 50%; bottom: 18px;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(12, 20, 44, .34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  transition: width .3s var(--ease-out), background .3s var(--ease);
}
.hero-dots button.is-on {
  width: 26px;
  background: linear-gradient(90deg, var(--blue-3), var(--violet-2));
  box-shadow: 0 0 12px rgba(96, 165, 250, .8);
}

/* ---------- แถบจุดเด่น ลอยทับขอบล่างแบนเนอร์ ----------
   วางไว้นอก .hero จึงไม่ทำให้แบนเนอร์สูงขึ้น
   และการลอยทับกันแบบนี้ทำให้หน้าดูมีชั้นเชิงมากกว่าวางเรียงกันเฉย ๆ
   ระยะที่ทับคุมด้วย --feats-overlap ใน :root  .hero ต่อพื้นเบลอลงไปรับเท่ากัน

   หน้าตาตามแบบที่พี่วีส่งมา 10 ก.ย. 69
   การ์ดขาวทึบ ไอคอนสามมิติตัวใหญ่ หัวข้อตัวหนา เส้นคั่นบาง ๆ ไม่ชนขอบ
   พื้นการ์ดต้องทึบ ถ้าโปร่งแสง พื้นเบลอสีเข้มของแบนเนอร์จะทำให้ครึ่งบนของการ์ดหม่น

   ขนาดไอคอนกับตัวหนังสือยืดตามความกว้างจอด้วย clamp()
   สัดส่วนจึงคงที่เหมือนในแบบทุกจอ ไม่ต้องเขียนแยกทีละขนาดจอ */
.feats {
  position: relative;
  z-index: 4;
  margin: calc(-1 * var(--feats-overlap)) 22px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: clamp(14px, 1.6vw, 22px) 12px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%);
  border: 1px solid #fff;
  box-shadow:
    0 1px 0 #fff inset,
    0 2px 6px rgba(13, 21, 38, .05),
    0 24px 50px -14px rgba(30, 58, 138, .25);
}
.feat {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 20px);
  padding: 0 clamp(8px, 1.2vw, 18px);
}
/* เส้นคั่นสั้น ไม่ชนขอบบนล่าง แบบในรูป */
.feat + .feat::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: #d3dbe8;
}
.feat-ico {
  flex: none;
  width: clamp(64px, 8vw, 112px);
  height: clamp(64px, 8vw, 112px);
  display: grid;
  place-items: center;
}
.feat-ico img { width: 100%; height: 100%; object-fit: contain; }
/* ไอคอน SVG สำรอง ขึ้นเฉพาะตอนรูป PNG ไม่อยู่บนเซิร์ฟเวอร์ */
.feat-ico svg {
  width: 66%; height: 66%;
  filter: drop-shadow(0 6px 10px rgba(37, 99, 235, .3));
}
/* ตั้งชื่อ .feat-txt แยกไว้ ถ้าเขียน .feat span จะไปโดน span ของกรอบไอคอนด้วย */
/* balance : ถ้าต้องตกบรรทัด ให้แบ่งสองบรรทัดพอ ๆ กัน ไม่เหลือคำเดียวค้างบรรทัดล่าง */
.feat-txt      { min-width: 0; text-wrap: balance; }
.feat-txt b    { display: block; font-size: clamp(16px, 1.75vw, 24px); font-weight: 600; line-height: 1.3; color: var(--ink); }
.feat-txt span { display: block; margin-top: .2em; font-size: clamp(13px, 1.3vw, 17px); line-height: 1.4; color: var(--ink-2); }

/* =====================================================================
   6. แถวหมวดหมู่แบบไอคอน
   ===================================================================== */
/* แถวหมวดหมู่เต็มความกว้าง  การ์ด "สินค้าโปรโมชั่น" ขวามือเอาออกแล้ว (11 ก.ย. 69) */
.catbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 20px;
}
/* min-width: 0 สำคัญมาก ห้ามลบ
   ช่องของ grid จะกว้างตามเนื้อหาข้างในเป็นค่าต่ำสุดโดยปริยาย
   ข้างในนี้คือแถวหมวดหมู่ที่ยาวหลายพันพิกเซล ช่องจะยืดตามจนล้นออกนอกจอ
   ใส่บรรทัดนี้ช่องถึงจะยอมหดได้ */
.cats {
  min-width: 0;
  padding: 16px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

/* ---------- แถวหมวดหมู่เลื่อนเองอัตโนมัติ ----------
   .cats-view   กรอบที่มองเห็น  ตัดส่วนที่เลยขอบทิ้ง
   .cats-track  แถวยาวที่มีไทล์ซ้ำหลายชุด  ตัวนี้คือตัวที่เลื่อน

   ใส่ padding บนล่างแล้วดึง margin กลับเท่ากัน
   เพื่อให้กรอบที่ตัดสูงกว่าตัวไทล์นิดหน่อย
   เวลาเอาเมาส์ชี้แล้วไอคอนยกตัวขึ้น กับเงาใต้ไอคอน จะได้ไม่โดนตัดหัวตัดท้าย
   ส่วนแนวนอนยังตัดตามปกติ ซึ่งเป็นสิ่งที่ต้องการ

   ขอบซ้ายขวาจาง ๆ ด้วย mask  ไทล์จะได้ค่อย ๆ เลือนหายแทนที่จะโผล่มาดื้อ ๆ
   เบราว์เซอร์ที่ไม่รองรับ mask ก็แค่เห็นขอบคม ไม่มีอะไรพัง            */
.cats-view {
  overflow: hidden;
  padding: 10px 0;
  margin: -10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px,
                                      #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px,
                                      #000 calc(100% - 40px), transparent 100%);
}
.cats-track {
  display: flex;
  width: max-content;
  animation: cat-slide var(--cat-dur, 42s) linear infinite;
}
@keyframes cat-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--cat-shift, -50%), 0, 0); }
}
/* เอาเมาส์ไปวางแล้วหยุด  เอาออกแล้วไปต่อจากจุดเดิม ไม่ใช่เริ่มใหม่
   :focus-within เผื่อคนที่กด Tab ไล่ทีละหมวด แถวจะได้ไม่เลื่อนหนีนิ้ว
   .is-hold ตั้งจากสคริปต์ตอนเอานิ้วแตะบนจอมือถือ */
.cats:hover        .cats-track,
.cats:focus-within .cats-track,
.cats.is-hold      .cats-track { animation-play-state: paused; }

.cat {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 12px 6px;
  border-radius: var(--r);
  text-align: center;
  transition: transform .26s var(--ease-out);
}
.cat:hover { transform: translateY(-5px); }

/* ---------- ไอคอนหมวดหมู่ แบบสามมิติ ----------
   ของเดิมเป็นวงกลมเทากับลายเส้นบาง ๆ ดูเรียบไปหน่อย
   ตัวใหม่เป็นแผ่นสี่เหลี่ยมมนไล่สี แต่ละหมวดคนละสี
   ความเป็นสามมิติมาจากเงา 4 ชั้นซ้อนกัน
     1 เส้นสว่างขอบบนด้านใน  = แสงตกกระทบ
     2 เงามืดขอบล่างด้านใน   = ความหนาของวัตถุ
     3 แสงเรืองสีเดียวกับไอคอน = สะท้อนลงพื้น
     4 เงาดำใต้แผ่น          = ระยะห่างจากพื้น
   บวกแถบไฮไลต์เงาวาวพาดด้านบนอีกชั้นด้วย ::after */
/* แผ่นรองไอคอน : สีเทาขาวเรียบ ๆ ไม่เล่นสี
   ความเป็นสามมิติมาจากแสงเงาล้วน ๆ ไม่ได้มาจากสี
     1 เส้นขาวขอบบนด้านใน   = แสงตกกระทบขอบบน
     2 เงาเทาขอบล่างด้านใน  = ความหนาของแผ่น
     3 เงาใต้แผ่น 2 ระยะ     = ระยะห่างจากพื้น
   สีทั้งหมดไปอยู่ที่ "ตัวไอคอน" ข้างในแทน */
.cat-ico {
  position: relative;
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(162deg, #ffffff 0%, #f4f6fa 52%, #e9edf4 100%);
  border: 1px solid #fff;
  box-shadow:
    0 1px 0 #fff inset,
    0 -7px 13px rgba(148, 163, 184, .2) inset,
    0 2px 3px rgba(15, 23, 42, .06),
    0 9px 20px -5px rgba(15, 23, 42, .16);
  transition: transform .26s var(--ease-out), box-shadow .26s var(--ease);
}
.cat:hover .cat-ico {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 #fff inset,
    0 -7px 13px rgba(148, 163, 184, .22) inset,
    0 4px 6px rgba(15, 23, 42, .08),
    0 18px 30px -6px rgba(15, 23, 42, .22);
}
.cat-ico svg {
  width: 38px; height: 38px;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .2));
  transition: transform .26s var(--ease-out);
}
.cat:hover .cat-ico svg { transform: scale(1.08); }
.cat span { font-size: 12.5px; line-height: 1.35; color: var(--ink); }

/* =====================================================================
   7. หัวข้อ และตะแกรงสินค้า
   ===================================================================== */
.sec { margin-top: 34px; }
.sec-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.sec-hd h2 {
  position: relative;
  font-size: 22px;
  font-weight: 600;
  padding-left: 15px;
}
/* ขีดสีข้างหัวข้อ ทำให้หัวข้อมีน้ำหนักโดยไม่ต้องใช้ตัวใหญ่ */
.sec-hd h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  translate: 0 -50%;
  width: 4px; height: 1.05em;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--blue-2), var(--violet));
}
.sec-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--blue);
  transition: gap .2s var(--ease);
}
.sec-more:hover { gap: 11px; }
.sec-more svg { width: 15px; height: 15px; flex: none; }

/* เอาการ์ดโปรโมชันฝั่งขวาออกแล้ว ตะแกรงสินค้าจึงกินเต็มความกว้าง
   จอคอมพิวเตอร์แสดง 5 คอลัมน์ (เดิม 6) การ์ดกว้างขึ้น รูปสินค้าเห็นชัดขึ้น */
.prow { display: block; }
.pgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

/* ---------- การ์ดสินค้า ---------- */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .26s var(--ease-out), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: #cfdcf5;
  box-shadow: var(--sh-3);
}

.pcard-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 32%, #ffffff 0%, #f4f7fc 62%, #eaf0f9 100%);
}
/* เงาใต้สินค้า ทำให้ของดูวางอยู่บนพื้นจริง ไม่ลอยแปะ */
.pcard-img::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 11%;
  translate: -50% 0;
  width: 54%; height: 9px;
  border-radius: 50%;
  background: rgba(13, 21, 38, .16);
  filter: blur(7px);
  transition: width .4s var(--ease), opacity .4s var(--ease);
}
.pcard:hover .pcard-img::after { width: 44%; opacity: .7; }

.pcard-img img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 13px;
  transition: transform .45s var(--ease-out), opacity .3s var(--ease);
}
.pcard:hover .pcard-img img.is-main { transform: scale(1.07) translateY(-4px); }

.pcard-img img.is-alt { position: absolute; inset: 0; opacity: 0; }
.pcard:hover .pcard-img img.is-alt  { opacity: 1; }
.pcard:hover .pcard-img img.has-alt { opacity: 0; }

.pcard-tags {
  position: absolute;
  top: 9px; left: 9px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.tag {
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 2px 6px rgba(13, 21, 38, .2);
}
.tag-new  { background: linear-gradient(180deg, #34d399, var(--green)); }
.tag-off  { background: linear-gradient(180deg, #fb7185, var(--rose)); }
.tag-pv   { background: linear-gradient(180deg, var(--blue-2), var(--blue)); }

.pcard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 7px;
  padding: 13px 13px 14px;
}
.pcard-name {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  min-height: 2.9em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .18s var(--ease);
}
.pcard:hover .pcard-name { color: var(--blue); }

/* ราคาซ้าย ปุ่มตะกร้าขวา อยู่แถวเดียวเสมอ ก้นการ์ดจะได้ตรงกันทั้งแถว */
.pcard-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: auto;
}
.pcard-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 7px; min-width: 0; }
/* nowrap กันเลข "8,900.00 ฿" ตกบรรทัดแยกสัญลักษณ์บาทไปคนละแถว */
.price-now {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  white-space: nowrap;
  background: linear-gradient(180deg, #16213b, #0d1526);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-was { font-size: 12px; color: var(--ink-3); text-decoration: line-through; white-space: nowrap; }

/* ปุ่มหยิบใส่ตะกร้า นูนสามมิติเหมือนกัน */
.pcard-add {
  position: relative;
  flex: none;
  width: 37px; height: 37px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff, #e8f0ff);
  color: var(--blue);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 -3px 6px rgba(37, 99, 235, .1) inset,
    0 2px 0 #cddcf7,
    0 4px 9px rgba(37, 99, 235, .16);
  transition: background .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease-out), box-shadow .22s var(--ease);
}
.pcard-add::after {
  content: '';
  position: absolute;
  left: -20%; right: -20%; top: -55%;
  height: 88%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}
.pcard-add:hover {
  background: linear-gradient(160deg, #4d8bff, var(--blue) 60%, #1d4fd0);
  color: #fff;
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 -2px 5px rgba(0, 0, 0, .2) inset,
    0 4px 0 #1a45b8,
    0 10px 18px rgba(37, 99, 235, .38);
}
.pcard-add:active { transform: translateY(0); box-shadow: 0 1px 0 #1a45b8, 0 3px 7px rgba(37, 99, 235, .3); }
.pcard-add svg { position: relative; z-index: 1; width: 17px; height: 17px; }

/* ดาวรีวิว แสดงเฉพาะสินค้าที่มีรีวิวจริงในฐานข้อมูล */
.stars { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); }
.stars i {
  width: 12px; height: 12px;
  background: linear-gradient(180deg, #ffd066, var(--gold));
  -webkit-mask: var(--star) center/contain no-repeat;
  mask: var(--star) center/contain no-repeat;
}
.stars i.off { background: #dbe2ee; }
.stars span  { margin-left: 3px; }
:root {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E");
}

/* ---------- การ์ดโปรโมชันสูงฝั่งขวา ---------- */
.promo {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  padding: 26px 22px;
  color: #fff;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  box-shadow:
    0 4px 10px rgba(7, 13, 36, .18),
    0 18px 40px rgba(7, 13, 36, .26);
}
.promo-kick {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a8c4ff;
}
.promo h3 { font-size: 26px; font-weight: 700; line-height: 1.14; letter-spacing: -.015em; }
.promo p  { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .74); }
.promo .btn { margin-top: 8px; align-self: flex-start; }

.empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  border-radius: var(--r);
  border: 1px dashed var(--line);
  background: var(--card);
  color: var(--ink-2);
}
.empty b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 16px; }

/* =====================================================================
   8. แถบความน่าเชื่อถือ
   ===================================================================== */
/* หน้าตาตามแบบที่พี่วีส่งมา 11 ก.ย. 69
   ไอคอนสามมิติตัวใหญ่ไม่มีแผ่นรอง  การ์ดขาวเงานุ่ม  ขนาดยืดตามจอด้วย clamp() */
.trust {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 30px;
  padding: clamp(14px, 1.6vw, 22px) 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border: 1px solid #fff;
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 0 #fff inset,
    0 2px 6px rgba(13, 21, 38, .05),
    0 22px 46px -16px rgba(30, 58, 138, .22);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding: 4px clamp(6px, .9vw, 14px);
  min-width: 0;
}
.trust-item + .trust-item { border-left: 1px solid var(--line-2); }
.trust-ico {
  width: clamp(44px, 5.2vw, 76px);
  height: clamp(44px, 5.2vw, 76px);
  flex: none;
  display: grid;
  place-items: center;
}
.trust-ico img { width: 100%; height: 100%; object-fit: contain; }
/* ไอคอน SVG สำรอง ขึ้นเฉพาะตอนรูป PNG ไม่อยู่บนเซิร์ฟเวอร์ */
.trust-ico svg {
  width: 62%; height: 62%;
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, .25));
}
/* .trust-txt แยกชื่อไว้ ถ้าเขียน .trust-item span จะไปโดน span ของกรอบไอคอนด้วย */
.trust-txt      { min-width: 0; text-wrap: balance; }
.trust-txt b    { display: block; font-size: clamp(13.5px, 1.3vw, 17px); font-weight: 600; line-height: 1.3; color: var(--ink); }
.trust-txt span { display: block; margin-top: .15em; font-size: clamp(12px, 1vw, 13.5px); color: var(--ink-2); line-height: 1.4; }

/* =====================================================================
   9. ปุ่ม
   ===================================================================== */
/* ปุ่มแบบนูน มีความหนาจริง
   ขอบบนสว่าง ขอบล่างมืด + เงาทึบใต้ปุ่มทำหน้าที่เป็น "ความหนา"
   เอาเมาส์วางแล้วปุ่มลอยขึ้น เงาหนาขึ้น  กดแล้วจมลงเงาหายไป */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn svg { position: relative; z-index: 1; width: 17px; height: 17px; }
/* แถบเงาวาวครึ่งบนของปุ่ม */
.btn::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn > * { position: relative; z-index: 1; }

.btn-primary, button.btn-primary {
  background: linear-gradient(180deg, #4d8bff 0%, var(--blue) 55%, #1d4fd0 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 -2px 6px rgba(0, 0, 0, .22) inset,
    0 3px 0 #1a45b8,
    0 6px 12px rgba(37, 99, 235, .34),
    0 14px 28px rgba(37, 99, 235, .3);
}
.btn-primary:hover, button.btn-primary:hover {
  filter: brightness(1.07);
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 -2px 6px rgba(0, 0, 0, .24) inset,
    0 6px 0 #1a45b8,
    0 12px 20px rgba(37, 99, 235, .4),
    0 24px 42px rgba(37, 99, 235, .38);
}
.btn-primary:active, button.btn-primary:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .3) inset,
    0 -2px 6px rgba(0, 0, 0, .26) inset,
    0 1px 0 #1a45b8,
    0 3px 8px rgba(37, 99, 235, .3);
}

/* =====================================================================
   10. เมนูล่างสำหรับมือถือ  (โผล่เฉพาะจอเล็ก)
   ---------------------------------------------------------------------
   บนมือถือ ปุ่มสำคัญควรอยู่ระดับนิ้วโป้ง ไม่ใช่ต้องเลื่อนขึ้นไปบนสุด
   ===================================================================== */
.mobnav { display: none; }

/* =====================================================================
   11. ท้ายหน้า
   ===================================================================== */
.ft { margin-top: 42px; color: rgba(255, 255, 255, .72); }
.ft-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 42px;
  padding: 48px 0 38px;
}
.ft-logo img { height: 40px; margin-bottom: 16px; }
.ft-about    { font-size: 13.5px; max-width: 40ch; line-height: 1.7; }
.ft h4       { font-size: 14px; color: #fff; margin-bottom: 16px; }
.ft li       { margin-bottom: 10px; }
.ft li a     { font-size: 13.5px; transition: color .18s var(--ease), transform .18s var(--ease); }
.ft li a:hover { color: #fff; }
.ft-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 0 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
}

/* =====================================================================
   12. จอเล็ก
   ===================================================================== */
@media (max-width: 1280px) {
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat   { flex-basis: 124px; }
}
@media (max-width: 1024px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  /* จอแคบให้การ์ดสูงตามเนื้อหา ถ้าล็อกความสูงไว้ข้อความจะถูกตัดท้าย */
  .promo  { min-height: 0; padding: 24px 22px; }
  .promo h3 { font-size: 23px; }
  .promo br { display: none; }
  .catbar { grid-template-columns: 1fr; }
  .trust  { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .trust-item:nth-child(3n+1) { border-left: 0; }

  /* สไลด์ยังเป็นแนวนอน แค่เตี้ยลง */
  .hero { min-height: 190px; }        /* สัดส่วนมาจากรูปจริง ไม่ล็อกทับ */
}

@media (max-width: 760px) {
  .shell    { padding: 0 14px; }
  .top-b ul { padding: 0 14px; }
  .top-a    { flex-wrap: wrap; gap: 12px; padding: 12px 0; }
  .srch     { order: 3; flex-basis: 100%; max-width: none; }
  .act span { display: none; }
  .act      { padding: 9px; }
  .act-badge { left: 22px; }
  /* จอมือถือไม่มีการเอาเมาส์ไปวาง  เมนูย่อยจะเปิดค้างหรือเปิดโดยไม่ได้ตั้งใจ
     ปิดไปเลย  ปุ่มบัญชียังกดได้ตามปกติ และเมนูที่ต้องใช้อยู่ในแถบล่างครบแล้ว */
  .acmenu    { display: none; }
  .act-caret { display: none; }

  /* ---------- สไลด์บนมือถือ ----------
     สัดส่วนกรอบมาจากรูปจริง (PHP ใส่ไว้ใน style) เหมือนจอใหญ่
     ห้ามใส่ min-height  จอมือถือแคบ ความสูงตามสัดส่วนจะต่ำกว่า min-height
     แล้วเบราว์เซอร์จะขยายความกว้างแทน แบนเนอร์ล้นขอบจอขวา
     พื้นเบลอใต้รูปใช้ --feats-overlap เหมือนจอใหญ่ มือถือแค่ทับตื้นกว่า */
  :root { --feats-overlap: 26px; }
  .hero {
    min-height: 0;
    border-radius: var(--r-lg);
  }
  .hero-nav  { display: none; }     /* มือถือใช้ปัดนิ้วแทนปุ่มลูกศร */
  /* จุดบอกสไลด์ซ่อนอยู่หลังแถบจุดเด่นเหมือนจอใหญ่
     ถ้าวางไว้ 12px เม็ดจะโผล่พ้นการ์ดมา 6px เห็นเป็นติ่งสีเข้มกลางขอบบนการ์ด */
  .hero-dots { bottom: 4px; padding: 6px 10px; }
  .hero-dots button.is-on { width: 20px; }

  /* แถบจุดเด่นบนมือถือ  เป็นแค่ส่วนประกอบ ไม่ใช่จุดเด่นของหน้า (พี่วีสั่ง 10 ก.ย. 69)
     ไอคอนเล็ก ตัวหนังสือบรรทัดเดียว การ์ดเตี้ย หน้าจะได้ไม่ยาว
     3 ช่องเห็นครบในจอเดียว ไอคอนอยู่บน ตัวหนังสืออยู่ล่าง

     ช่องกว้างไม่เท่ากัน ยืดตามความยาวข้อความ (flex)
     ถ้าแบ่งเท่ากันสามส่วน ช่องกลาง "โอนแล้วแนบสลิปได้เลย" แคบเกินจนต้องตกบรรทัด
     ที่ว่างที่เหลือแจกเท่ากันทุกช่อง เส้นคั่นจึงอยู่กึ่งกลางระหว่างข้อความ
     จอแคบจนไม่พอจริง ๆ ตัดท้ายเป็น ... แทนการตกบรรทัด */
  .feats {
    display: flex;
    margin: calc(-1 * var(--feats-overlap)) 12px 0;   /* ขอบข้างแคบกว่าจอคอม ตัวหนังสือจะได้มีที่พอ */
    padding: 10px 2px;
    border-radius: var(--r-lg);
  }
  .feat {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    padding: 0 6px;
    text-align: center;
  }
  .feat + .feat::before { top: 10%; bottom: 10%; }
  .feat-ico { width: 29px; height: 29px; }
  .feat-txt { max-width: 100%; }
  .feat-txt b, .feat-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feat-txt b    { font-size: 11.5px; }
  .feat-txt span { font-size: 10.5px; margin-top: 0; }

  .catbar { margin-top: 14px; gap: 12px; }
  .cats     { padding: 12px 0; }
  .cats-view{ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px,
                                  #000 calc(100% - 18px), transparent 100%);
                      mask-image: linear-gradient(90deg, transparent 0, #000 18px,
                                  #000 calc(100% - 18px), transparent 100%); }
  .cat      { flex-basis: 92px; padding: 9px 4px; gap: 8px; }
  .cat-ico  { width: 48px; height: 48px; }
  .cat-ico svg { width: 21px; height: 21px; }
  .cat span { font-size: 11.5px; }

  .sec    { margin-top: 24px; }
  .sec-hd h2 { font-size: 18.5px; }
  .pgrid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard-body { padding: 11px 11px 12px; gap: 6px; }
  .pcard-name { font-size: 13px; }
  .price-now  { font-size: 15.5px; }
  .pcard-add  { width: 32px; height: 32px; border-radius: 10px; }

  /* มือถือ 2 คอลัมน์ หน้าจะได้ไม่ยาว */
  .trust  { grid-template-columns: 1fr 1fr; gap: 0; padding: 8px 10px; border-radius: var(--r-lg); }
  .trust-item { border-left: 0 !important; padding: 12px 6px; gap: 10px; }
  .trust-item:nth-child(odd)  { border-right: 1px solid var(--line-2); }
  .trust-item:nth-child(n+3)  { border-top: 1px solid var(--line-2); }
  /* รายการสุดท้ายที่ตกเป็นเลขคี่ ให้กินเต็มแถว จะได้ไม่เหลือช่องว่างข้าง ๆ */
  .trust-item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  /* ไอคอนเล็ก เป็นแค่ส่วนประกอบ หน้าไม่ยาวขึ้น */
  .trust-ico  { width: 34px; height: 34px; }
  .trust-ico svg { width: 20px; height: 20px; }
  .trust-txt b    { font-size: 12.5px; }
  .trust-txt span { font-size: 11px; }

  .ft-grid { grid-template-columns: 1fr 1fr; gap: 20px 18px; padding: 30px 0 22px; }
  .ft-grid > div:first-child { grid-column: 1 / -1; }   /* โลโก้กับคำอธิบายเต็มความกว้าง */
  .ft-about { font-size: 12.5px; max-width: none; }
  .ft h4    { margin-bottom: 11px; }
  .ft li    { margin-bottom: 7px; }                     /* บีบระยะบรรทัด หน้าจะได้สั้นลง */

  /* ---------- เมนูล่างติดขอบจอ ---------- */
  body { padding-bottom: 68px; }
  .mobnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(13, 21, 38, .12);
  }
  .mobnav a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 5px 0;
    font-size: 10.5px;
    color: var(--ink-2);
    transition: color .18s var(--ease);
  }
  .mobnav a svg { width: 22px; height: 22px; stroke-width: 1.7; }
  .mobnav a.is-on { color: var(--blue); font-weight: 500; }
  .mobnav-badge {
    position: absolute;
    top: 1px; left: 50%;
    margin-left: 5px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rose);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(244, 63, 94, .45);
  }
}

@media (max-width: 440px) {
  .cat      { flex-basis: 84px; }
  .cat-ico  { width: 50px; height: 50px; border-radius: 17px; }
  .cat-ico svg { width: 22px; height: 22px; }
  .cat span { font-size: 10.5px; }
  /* ยังคง 2 คอลัมน์ ไม่ยุบเป็นคอลัมน์เดียว หน้าจะได้สั้น */
  .ft-grid  { grid-template-columns: 1fr 1fr; }
  .ft h4    { font-size: 13px; }
  .ft li a  { font-size: 12.5px; }
}

/* มือถือจอเล็กมาก (320px) ย่อตัวหนังสือแถบจุดเด่นอีกนิด ให้ยังอยู่บรรทัดเดียวครบทุกคำ */
@media (max-width: 340px) {
  .feat          { padding: 0 4px; }
  .feat-txt b    { font-size: 10.5px; }
  .feat-txt span { font-size: 9.5px; }
}

/* =====================================================================
   13. เข้าถึงง่าย
   ===================================================================== */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* คนที่ตั้งค่าเครื่องว่าไม่อยากเห็นภาพเคลื่อนไหว แถวหมวดหมู่จะไม่เลื่อนเอง
     ต้องเปิดให้ปัดดูเองได้ ไม่งั้นหมวดที่เลยขอบจอไปจะกดไม่ถึงเลย */
  .cats-view  { overflow-x: auto; scrollbar-width: none; }
  .cats-view::-webkit-scrollbar { display: none; }
  .cats-track { animation: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =====================================================================
   14. หน้ารายละเอียดสินค้า  (single-product-new.php)
   ===================================================================== */

.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.crumb a:hover { color: var(--blue); }
.crumb i {
  font-style: normal;
  color: var(--ink-3);
}

/* ---------- โครงสองคอลัมน์ : รูปซ้าย ข้อมูลขวา ---------- */
.pd {
  display: grid;
  /* คอลัมน์รูปไม่ให้กว้างเกิน 420px  จอคอมพิวเตอร์กว้าง ๆ รูปจะได้ไม่บานจน
     ข้อมูลสินค้าฝั่งขวาเหลือที่ว่างเยอะ  จอเล็กจะยุบเป็นคอลัมน์เดียวเหมือนเดิม */
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

/* ---------- แกลเลอรีรูป ---------- */
.pd-main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% 32%, #ffffff 0%, #f4f7fc 62%, #eaf0f9 100%);
  border: 1px solid var(--line-2);
}
.pd-main img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 22px;
}
/* เงาใต้สินค้า ให้ดูวางอยู่บนพื้นจริง */
.pd-main::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 10%;
  translate: -50% 0;
  width: 46%; height: 12px;
  border-radius: 50%;
  background: rgba(13, 21, 38, .15);
  filter: blur(9px);
}

.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-top: 11px;
}
.pd-thumb, button.pd-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 11px;
  overflow: hidden;
  background: #f7f9fc;
  border: 2px solid transparent;
  box-shadow: var(--sh-1);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pd-thumb:hover, button.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.is-on, button.pd-thumb.is-on { border-color: var(--blue); }

/* ---------- ฝั่งข้อมูล ---------- */
.pd-brand {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
.pd-title {
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 600;
  line-height: 1.32;
  margin: 8px 0 12px;
}
.pd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--ink-2);
}

.pd-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 6px;
}
.pd-now  { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.pd-was  { font-size: 15px; color: var(--ink-3); text-decoration: line-through; white-space: nowrap; }
.pd-off  {
  padding: 4px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fb7185, var(--rose));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(244, 63, 94, .3);
}
.pd-vat { font-size: 12.5px; color: var(--ink-3); margin-bottom: 18px; }

/* แถบ PV / คะแนน */
.pd-pv {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 12px;
  background: linear-gradient(162deg, #ffffff, #eef3fb);
  border: 1px solid var(--line);
  font-size: 13px;
  box-shadow: 0 1px 0 #fff inset, 0 2px 5px rgba(15, 23, 42, .06);
}
.pd-chip b { font-weight: 600; }
.pd-chip svg { width: 17px; height: 17px; }

/* ---------- จำนวน + ปุ่มซื้อ ---------- */
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 18px 0 6px;
  border-top: 1px solid var(--line-2);
}
.qty {
  display: flex;
  align-items: center;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(162deg, #ffffff, #f1f4fa);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 2px 5px rgba(15, 23, 42, .06);
  overflow: hidden;
}
.qty button {
  width: 42px; height: 46px;
  display: grid;
  place-items: center;
  font-size: 19px;
  color: var(--ink-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.qty button:hover { background: var(--blue-soft); color: var(--blue); }
.qty input {
  width: 52px; height: 46px;
  border: 0; outline: none;
  background: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pd-buy .btn { flex: 1 1 220px; padding: 15px 26px; }

/* ---------- จุดขายใต้ปุ่ม ---------- */
.pd-usp {
  display: grid;
  gap: 11px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.pd-usp div { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.pd-usp span {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(162deg, #ffffff, #eef3fb);
  border: 1px solid #fff;
  box-shadow: 0 1px 0 #fff inset, 0 2px 5px rgba(15, 23, 42, .07);
}
.pd-usp span svg { width: 19px; height: 19px; }

/* ---------- แท็บรายละเอียด ---------- */
.tabs {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.tabs-hd {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-hd::-webkit-scrollbar { display: none; }
.tabs-hd button {
  position: relative;
  padding: 16px 18px;
  font-size: 14.5px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.tabs-hd button::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  transform: scaleX(0);
  transition: transform .24s var(--ease-out);
}
.tabs-hd button:hover { color: var(--ink); }
.tabs-hd button.is-on { color: var(--blue); font-weight: 500; }
.tabs-hd button.is-on::after { transform: scaleX(1); }

.tab-pane { display: none; padding: 24px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.tab-pane.is-on { display: block; }
.tab-pane img { border-radius: 12px; margin: 10px 0; }
.tab-pane h1, .tab-pane h2, .tab-pane h3 { color: var(--ink); margin: 14px 0 8px; }
.tab-pane table { width: 100%; border-collapse: collapse; }
.tab-pane td, .tab-pane th { padding: 9px 12px; border-bottom: 1px solid var(--line-2); text-align: left; }

/* ---------- รีวิว ---------- */
.rv { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.rv:last-child { border-bottom: 0; }
.rv-av {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--blue-2), var(--blue));
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.rv-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.rv-hd b { font-size: 14px; color: var(--ink); }
.rv-date { font-size: 12px; color: var(--ink-3); }
.rv p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- แถบซื้อติดขอบล่าง (มือถือ) ---------- */
.buybar { display: none; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 900px) {
  .pd { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
}

@media (max-width: 760px) {
  .pd        { padding: 13px; border-radius: var(--r); }
  .pd-thumbs { grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .pd-main img { padding: 14px; }
  .tab-pane  { padding: 16px; }
  .tabs-hd button { padding: 14px 14px; font-size: 13.5px; }

  /* ปุ่มซื้อย้ายไปติดขอบล่าง ให้กดง่ายด้วยนิ้วโป้ง
     ปุ่มในหน้าจึงซ่อนไป กันกดซ้ำซ้อนสับสน */
  .pd-buy { display: none; }

  .buybar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(13, 21, 38, .14);
  }
  .buybar .qty { flex: none; }
  .buybar .qty button { width: 36px; height: 42px; }
  .buybar .qty input  { width: 42px; height: 42px; font-size: 14px; }
  .buybar .btn { flex: 1 1 auto; padding: 13px 18px; }
  .buybar-price { flex: none; font-size: 15px; font-weight: 700; white-space: nowrap; }

  /* หน้ารายละเอียดใช้แถบซื้อแทนเมนูล่าง ไม่ให้ซ้อนกัน */
  body.pd-page .mobnav { display: none; }
  body.pd-page { padding-bottom: 76px; }
}

/* ป้ายสถานะสต๊อกบนหน้าสินค้า
   ร้านนี้เป็นสต๊อกจริงของเจ้าของร้าน ลูกค้าจึงควรเห็นว่าเหลือกี่ชิ้น */
.pd-instock  { border-color: #b8e6cd; background: linear-gradient(162deg, #ffffff, #eafaf1); }
.pd-instock  svg { color: var(--green); }
.pd-outstock { border-color: #f2c9cf; background: linear-gradient(162deg, #ffffff, #fdeef0); color: var(--rose); }
.pd-outstock svg { color: var(--rose); }

/* =====================================================================
   15. ฟุตเตอร์ : ข้อมูลติดต่อเจ้าของร้าน + ช่องทางชำระเงิน
   ===================================================================== */

/* ช่องทางชำระเงินที่รับ */
.ft-pay { margin-top: 20px; }
.ft-pay > span {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.ft-pay-row { display: flex; flex-wrap: wrap; gap: 7px; }
.ft-pay-row b {
  padding: 6px 11px;
  border-radius: 7px;
  background: #fff;
  color: #1a2545;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
}

/* บรรทัดข้อมูลติดต่อ */
.ft-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
}
.ft-line i { font-style: normal; flex: none; opacity: .85; }
.ft-line a:hover { color: #fff; text-decoration: underline; }
.ft-contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 4px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .86);
  font-size: 13.5px;
  font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.ft-contact-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* ปุ่มโซเชียลของเจ้าของร้าน */
.ft-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.ft-soc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 11px;
  background: var(--soc, rgba(255, 255, 255, .16));
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
  transition: transform .18s var(--ease-out), filter .18s var(--ease), box-shadow .18s var(--ease);
}
.ft-soc svg { width: 19px; height: 19px; flex: none; }
.ft-soc:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}
/* สีประจำแต่ละแพลตฟอร์ม แสดงตั้งแต่สถานะปกติ */
.ft-soc-facebook  { --soc: #1877f2; }
.ft-soc-messenger { --soc: #0084ff; }
.ft-soc-line      { --soc: #06c755; }
.ft-soc-lineat    { --soc: #06c755; }
.ft-soc-instagram { --soc: #e4405f; }
.ft-soc-whatapp   { --soc: #25d366; }
.ft-soc-telegram  { --soc: #2aabee; }

.ft-policy-list {
  display: grid;
  gap: 7px;
}
.ft-policy-list li { margin: 0; }
.ft-policy-list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px 6px 22px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ft-policy-list a::before {
  content: '';
  position: absolute;
  left: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--blue-3));
  box-shadow: 0 0 12px rgba(245, 177, 32, .38);
}
.ft-policy-list a:hover {
  transform: translateX(2px);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .2);
}

@media (max-width: 760px) {
  .ft-contact { grid-column: 1 / -1; }
  .ft-social  { gap: 7px; }
  .ft-soc     { padding: 7px 12px 7px 9px; font-size: 12px; }
}

/* ปุ่มแชท จัด 2 ปุ่มต่อแถว
   เดิมเรียงลงมาเป็นแถวเดียว คอลัมน์เลยยาวกว่าคอลัมน์อื่นมาก หน้าเว็บยาวตาม */
.ft-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 0;
}
.ft-soc { justify-content: flex-start; }
@media (max-width: 760px) {
  .ft-social { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .ft-social { grid-template-columns: 1fr; }
}


/* =====================================================================
   ตะกร้าสินค้า และ หน้าชำระเงิน
   ---------------------------------------------------------------------
   *** อ่านก่อนแก้ ***
   ไฟล์นี้มีกฎรีเซ็ตอยู่ข้างบนว่า

       .evo-shop button, .evo-part button { cursor:pointer; background:none; border:0; }

   น้ำหนักตัวเลือกของมันคือ (0,1,1) ซึ่ง "สูงกว่า" คลาสเดี่ยว ๆ อย่าง
   .cart-del หรือ .co-copy ที่มีแค่ (0,1,0)
   ถ้าเขียนแค่ .cart-del { background:... } ปุ่มจะออกมาโล่ง ไม่มีพื้นหลัง
   เคยพลาดมาแล้วกับปุ่มหยิบใส่ตะกร้า  ปุ่มกลืนไปกับพื้นขาวทั้งปุ่ม

   ดังนั้นทุกกฎที่ทาสีให้ <button> ต้องเขียนคู่กันเสมอ
       .co-copy, button.co-copy { ... }
   ===================================================================== */

/* ---------- โครงสองคอลัมน์  ใช้ร่วมกันทั้งตะกร้าและชำระเงิน ---------- */
.cart-wrap,
.co-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  align-items: start;
  gap: 20px;
  margin-top: 18px;
}
.cart-main, .co-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cart-side, .co-side { position: sticky; top: 88px; }

/* ---------- ตะกร้าว่าง ---------- */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 24px 0 40px;
  padding: 52px 24px 56px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.cart-empty-ico { width: 74px; height: 74px; display: block; }
.cart-empty-ico svg { width: 100%; height: 100%; }
.cart-empty b { font-size: 19px; color: var(--ink); }
.cart-empty p  { max-width: 400px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.cart-empty .btn { margin-top: 6px; }

/* ---------- แจ้งเตือน ---------- */
.cart-warn {
  margin: 16px 0 0;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: #fff4f5;
  border: 1px solid #ffd7dc;
  border-left: 4px solid var(--rose);
  color: #9f1239;
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---------- กล่องร้านค้า ---------- */
.cart-shop {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.cart-shop-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: linear-gradient(180deg, #f8fafd, #f1f5fb);
  border-bottom: 1px solid var(--line-2);
}
.cart-shop-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.cart-shop-name svg { width: 16px; height: 16px; }

/* ---------- ช่องติ๊ก  ทำเองเพราะ checkbox ของเบราว์เซอร์แต่งไม่ได้ ---------- */
.ck { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.ck input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-box {
  position: relative;
  flex: none;
  width: 21px; height: 21px;
  border-radius: 6px;
  border: 1.6px solid #c3cede;
  background: #fff;
  transition: all .18s var(--ease-out);
}
.ck-box::after {
  content: "";
  position: absolute;
  left: 6.5px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: all .18s var(--ease-out);
}
.ck input:checked + .ck-box {
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  border-color: var(--blue);
}
.ck input:checked + .ck-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.ck input:focus-visible + .ck-box { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.ck-txt { font-size: 13.5px; font-weight: 500; color: var(--ink); }

/* ---------- แถวสินค้าในตะกร้า ---------- */
.cart-item {
  display: grid;
  grid-template-columns: auto 84px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.cart-item:last-child { border-bottom: 0; }

.cart-thumb {
  width: 84px; height: 84px;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--page-2);
  overflow: hidden;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-title:hover { color: var(--blue); }
.cart-unit { font-size: 12.5px; color: var(--ink-3); }
.cart-unit  b { color: var(--ink-2); font-weight: 600; }
.tag-special { background: linear-gradient(180deg, var(--violet-2), var(--violet)); align-self: flex-start; }

/* ปุ่มบวกลบจำนวน */
.cart-qty {
  display: flex;
  align-items: center;
  flex: none;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: linear-gradient(162deg, #fff, #f2f5fa);
  box-shadow: 0 1px 0 #fff inset, 0 2px 5px rgba(15, 23, 42, .05);
  overflow: hidden;
}
.cart-qty button,
button.cart-qty-btn {
  width: 38px; height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background .16s var(--ease-out);
}
.cart-qty button:hover { background: rgba(37, 99, 235, .09); color: var(--blue); }
.cart-qty .q {
  width: 48px; height: 40px;
  border: 0;
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  background: #fff;
  text-align: center;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  -moz-appearance: textfield;
}
.cart-qty .q::-webkit-outer-spin-button,
.cart-qty .q::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-line { min-width: 96px; text-align: right; white-space: nowrap; }
.cart-line b    { font-size: 16px; font-weight: 700; color: var(--ink); }
.cart-line span { font-size: 12px; color: var(--ink-3); margin-left: 3px; }

.cart-del,
button.cart-del {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3);
  transition: all .16s var(--ease-out);
}
.cart-del:hover,
button.cart-del:hover { background: #fff1f3; border-color: #ffd7dc; color: var(--rose); }
.cart-del svg { width: 19px; height: 19px; }

/* ---------- กล่องสรุปยอด ---------- */
.cart-sum, .co-sum {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 20px 20px 22px;
}
.cart-sum h2, .co-sum h2 {
  margin: 0 0 15px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
}
.cart-sum-row, .co-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.cart-sum-row b, .co-sum-row b { color: var(--ink); font-weight: 600; }
.co-sum-row small { color: var(--ink-3); font-weight: 400; }

.cart-sum-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: #1d4ed8;
  font-size: 12.5px;
  line-height: 1.55;
}
.cart-sum-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.cart-sum-total, .co-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.cart-sum-total b, .co-sum-total b { font-size: 22px; font-weight: 700; color: var(--blue); }
.co-sum-total b i { font-size: 13px; font-style: normal; font-weight: 500; color: var(--ink-2); }

.cart-go, .co-go,
button.cart-go, button.co-go { width: 100%; margin-top: 16px; }

.cart-hint, .co-hint {
  margin: 9px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.cart-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.cart-back:hover { color: var(--blue); }
.cart-back svg { width: 15px; height: 15px; }

/* ---------- แถบสรุปติดขอบล่าง  เฉพาะมือถือ ---------- */
.cart-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(13, 21, 38, .1);
}
.cart-bar > div { display: flex; flex-direction: column; line-height: 1.25; }
.cart-bar span  { font-size: 11.5px; color: var(--ink-3); }
.cart-bar b     { font-size: 17px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.cart-bar .btn  { flex: none; padding-left: 22px; padding-right: 22px; }

/* =====================================================================
   หน้าชำระเงิน
   ===================================================================== */
.co-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-3);
}
.co-steps li { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.co-steps li + li::before {
  content: "";
  width: 26px; height: 1.5px;
  margin-right: 8px;
  background: var(--line);
}
.co-steps span {
  width: 23px; height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}
/* *** ห้ามใช้ชื่อคลาสสั้น ๆ อย่าง .on หรือ .done ตรงนี้ ***
   เคยใช้ .done แล้วไปชนกับการ์ด .done ของหน้าสมัครสำเร็จ
   ซึ่งมี padding 44px, margin auto และพื้นขาว
   ขั้นตอนที่ 1 เลยกลายเป็นกล่องใหญ่กลางหน้า ดันขั้น 2-3 ไปชิดขวา */
.co-steps li.step-now  { color: var(--ink); }
.co-steps li.step-now span  { background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; }
.co-steps li.step-done { color: var(--ink-2); }
.co-steps li.step-done span { background: var(--green); color: #fff; }

/* กันไว้อีกชั้น  ล้างสไตล์กล่องที่อาจหลุดมาโดนรายการในแถบขั้นตอน */
.co-steps li {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
  text-align: left;
}

.co-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 18px 20px 20px;
}
.co-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-2);
}
.co-hd svg { width: 19px; height: 19px; color: var(--blue); flex: none; }
.co-hd h2  { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.co-hd-sub { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.co-empty  { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }

/* ---------- ที่อยู่จัดส่ง ---------- */
.co-addr-list { display: flex; flex-direction: column; gap: 9px; }
.co-addr {
  display: flex;
  gap: 11px;
  padding: 13px 14px;
  border: 1.4px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all .18s var(--ease-out);
}
.co-addr:hover { border-color: var(--blue-3); background: #fbfcff; }
.co-addr.is-on { border-color: var(--blue); background: var(--blue-soft); }
.co-addr input { margin-top: 3px; accent-color: var(--blue); flex: none; }
.co-addr-body  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-addr-body b { font-size: 14px; color: var(--ink); }
.co-addr-tel   { font-size: 12.5px; color: var(--ink-2); }
.co-addr-txt   { font-size: 13px; color: var(--ink-2); line-height: 1.55; }

.co-link,
button.co-link,
a.co-link {
  display: inline-block;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--blue);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.co-link:hover, button.co-link:hover, a.co-link:hover { text-decoration: underline; }

.co-addr-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 12px;
  background: var(--page-2);
  border: 1px solid var(--line-2);
}
.co-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.co-f label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.co-f input,
.co-f select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1.4px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.co-f input:focus,
.co-f select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.co-f small { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.co-f-act {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.co-f-act .co-link { margin-top: 0; }

/* ---------- รายการสินค้าในหน้าชำระเงิน ---------- */
.co-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
}
.co-item:last-child { border-bottom: 0; padding-bottom: 0; }
.co-item-img {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--page-2);
  overflow: hidden;
}
.co-item-img img { width: 100%; height: 100%; object-fit: cover; }
.co-item-img svg { width: 22px; height: 22px; color: var(--blue); }
.co-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.co-item-name small { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.co-item-qty { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.co-item-sum { font-size: 15px; font-weight: 600; color: var(--ink); min-width: 86px; text-align: right; white-space: nowrap; }
.co-item-ship { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 13px; }

.co-tax-on { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.co-tax-on b { font-size: 14.5px; color: var(--ink); }

/* ---------- วิธีชำระเงิน ---------- */
.co-sub {
  margin: 20px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.co-pay {
  display: flex;
  gap: 11px;
  padding: 13px 14px;
  border: 1.4px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.co-pay.is-on { border-color: var(--blue); background: var(--blue-soft); }
.co-pay input { margin-top: 3px; accent-color: var(--blue); flex: none; }
.co-pay-body  { display: flex; flex-direction: column; gap: 3px; }
.co-pay-body b    { font-size: 14px; color: var(--ink); }
.co-pay-body span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- บัญชีธนาคารของร้าน ---------- */
.co-bank {
  margin-top: 12px;
  padding: 15px 16px 16px;
  border-radius: 14px;
  background: linear-gradient(168deg, #f7faff, #eef4ff);
  border: 1px solid #d9e5fb;
}
.co-bank-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--navy-3);
  font-size: 13.5px;
}
.co-bank-hd svg { width: 18px; height: 18px; flex: none; }

.co-bank-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; }
.co-bank-dl dt { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.co-bank-dl dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-word; }
.co-bank-dl dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }

.co-bank-no { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.co-bank-no b { font-size: 17px; font-weight: 700; letter-spacing: .4px; color: var(--navy-2); }

.co-copy,
button.co-copy {
  padding: 5px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1.3px solid var(--blue-3);
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: all .16s var(--ease-out);
}
.co-copy:hover, button.co-copy:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.co-copy.is-done, button.co-copy.is-done { background: var(--green); border-color: var(--green); color: #fff; }

.co-bank-qr { margin-top: 13px; text-align: center; }
.co-bank-qr img { width: 168px; max-width: 100%; margin: 0 auto; border-radius: 10px; background: #fff; padding: 8px; }
.co-bank-qr span { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-2); }

.co-bank-note {
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px dashed #cbdcf7;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.co-bank-note b { color: var(--rose); font-size: 14px; }
.co-bank-none { margin: 0; font-size: 13px; line-height: 1.6; color: #9f1239; }

.co-bank-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed #cbdcf7;
  font-size: 12.5px;
  color: var(--ink-3);
}
.co-bank-contact a { color: var(--blue); font-weight: 600; }
.co-bank-contact a:hover { text-decoration: underline; }

/* =====================================================================
   จอเล็ก
   ===================================================================== */
@media (max-width: 1024px) {
  .cart-wrap, .co-wrap { grid-template-columns: 1fr; }
  .cart-side, .co-side { position: static; }
  .cart-item { grid-template-columns: auto 72px minmax(0, 1fr) auto auto; }
  .cart-item .cart-del { grid-column: 5; }
  .cart-line { grid-column: 1 / -1; text-align: right; min-width: 0; }
}

@media (max-width: 760px) {
  /* บนมือถือให้แถวสินค้าเป็นบล็อกซ้อนกัน อ่านง่ายกว่าอัดเป็นคอลัมน์ */
  .cart-item {
    grid-template-columns: auto 72px minmax(0, 1fr);
    grid-template-areas:
      "ck img info"
      ".  qty line";
    row-gap: 12px;
    /* เว้นทางขวาไว้ให้ปุ่มลบ ซึ่งวางแบบ absolute อยู่มุมขวาบน
       ไม่เว้นแล้วชื่อสินค้าที่ตัดสองบรรทัดจะวิ่งไปมุดใต้ไอคอนถังขยะ */
    padding: 15px 48px 15px 14px;
  }
  .cart-item > .ck   { grid-area: ck; align-self: start; margin-top: 4px; }
  .cart-thumb        { grid-area: img; width: 72px; height: 72px; }
  .cart-info         { grid-area: info; }
  .cart-qty          { grid-area: qty; }
  .cart-line         { grid-area: line; text-align: right; align-self: center; }
  .cart-del,
  button.cart-del    { position: absolute; top: 10px; right: 10px; }
  .cart-item         { position: relative; }

  .cart-shop-hd { padding: 12px 14px; }
  .cart-shop-name { font-size: 12px; }

  .co-card { padding: 15px 15px 17px; }
  .co-addr-form { grid-template-columns: 1fr; padding: 14px; }
  .co-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .co-item-img { width: 44px; height: 44px; }
  .co-item-qty { grid-column: 2; font-size: 12px; }
  .co-item-sum { grid-column: 3; grid-row: 1 / span 2; }

  .co-steps { font-size: 12px; gap: 5px; }
  .co-steps li + li::before { width: 16px; margin-right: 5px; }

  /* แถบล่างโผล่มาแทน ปุ่มในกล่องสรุปจึงซ่อนไว้ ไม่ให้มีปุ่มซ้ำสองที่ */
  .cart-bar { display: flex; }
  .cart-go, .co-go,
  button.cart-go, button.co-go { display: none; }

  /* หน้าตะกร้ากับหน้าชำระเงินใช้แถบสรุปแทนเมนูล่าง ไม่ให้ซ้อนกัน
     ทำแบบเดียวกับหน้ารายละเอียดสินค้าที่ใช้ body.pd-page
     ห้ามไปดัน .wrap ตรง ๆ เพราะทุกหน้าใช้ .wrap ร่วมกัน
     หน้าอื่นจะมีที่ว่างงอกท้ายหน้าโดยไม่จำเป็น */
  body.cart-page .mobnav { display: none; }
  body.cart-page { padding-bottom: 80px; }
}

@media (max-width: 440px) {
  .cart-empty { padding: 40px 16px 44px; }
  .cart-line b { font-size: 15px; }
  .co-bank-no b { font-size: 15.5px; }
}

/* กันไว้ : svg ที่ไม่ได้กำหนดขนาดจะกางเต็ม 300x150 ตามค่าเริ่มต้นของเบราว์เซอร์
   เคยพลาดมาแล้วตอนเอา evo_ico() มาคั่นเส้นทางนำทาง ไอคอนพองเต็มจอ */
.crumb svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); }

/* ---------- รายละเอียดย่อ ใต้ชื่อสินค้า ----------
   ข้อความมาจากช่อง "รายละเอียดย่อ" ในหน้าแอดมิน ซึ่งเป็น CKEditor
   จึงเป็น HTML ได้ ต้องคุมระยะของ p / ul ที่ติดมาด้วย
   ไม่งั้นย่อหน้าแรกจะมีช่องว่างก้อนใหญ่คั่นระหว่างชื่อสินค้ากับราคา */
.pd-intro {
  margin: -2px 0 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.pd-intro > :first-child { margin-top: 0; }
.pd-intro > :last-child  { margin-bottom: 0; }
.pd-intro p  { margin: 0 0 8px; }
.pd-intro ul,
.pd-intro ol { margin: 0 0 8px; padding-left: 20px; }
.pd-intro li { margin-bottom: 4px; }
.pd-intro img { border-radius: 8px; margin: 6px 0; }
.pd-intro a { color: var(--blue); text-decoration: underline; }

/* ---------- เนื้อหาที่แอดมินพิมพ์เอง (CKEditor) ----------
   *** อ่านก่อนแก้ ***
   ไฟล์นี้มีกฎรีเซ็ตอยู่ข้างบนว่า
       .evo-shop ul, .evo-part ul { list-style: none; margin: 0; padding: 0; }
   น้ำหนักตัวเลือก (0,1,1) เท่ากับ .pd-intro ul และ .tab-pane ul พอดี
   เสมอกันแบบนี้ "กฎที่อยู่ล่างกว่าในไฟล์ชนะ"  บล็อกนี้จึงต้องอยู่ท้ายไฟล์เสมอ
   ห้ามย้ายขึ้นไปไว้ก่อนบล็อกรีเซ็ต ไม่งั้นหัวข้อย่อยจะหายอีก

   ที่ต้องเขียนเพราะแอดมินพิมพ์รายละเอียดสินค้าด้วย CKEditor
   ซึ่งใส่ <p> <ul> <ol> <b> มาให้เอง ถ้าไม่คุมรูปแบบไว้
   ย่อหน้าจะติดกันหมดและหัวข้อย่อยจะไม่มีจุดนำหน้า อ่านไม่รู้เรื่อง */
.pd-intro ul, .tab-pane ul { list-style: disc outside; }
.pd-intro ol, .tab-pane ol { list-style: decimal outside; }
.pd-intro li, .tab-pane li { list-style: inherit; }

.tab-pane p  { margin: 0 0 10px; }
.tab-pane ul,
.tab-pane ol { margin: 0 0 12px; padding-left: 22px; }
.tab-pane li { margin-bottom: 5px; }
.tab-pane > :first-child { margin-top: 0; }
.tab-pane > :last-child  { margin-bottom: 0; }
.tab-pane b, .tab-pane strong { color: var(--ink); }
.tab-pane a { color: var(--blue); text-decoration: underline; }

/* =====================================================================
   ท้ายหน้า : กันตัวอักษรจมกับพื้นหลังเวลาไปวางบนหน้าเก่า
   ---------------------------------------------------------------------
   *** สาเหตุที่ต้องมีบล็อกนี้ ***
   หน้าเก่าอย่าง login.php / shoper_register.php ยังโหลด
   stylesheets/style.css ซึ่งบรรทัด 53 มีกฎรีเซ็ตยักษ์เขียนว่า

       a, ..., div, ..., li, ..., p, span, ul, ... { color: #454545; }

   กฎนี้ทาสีเทาเข้มลงไปที่ตัว div / ul / li โดยตรง
   ท้ายหน้าเราตั้งสีไว้ที่ .ft ว่าเป็นขาวโปร่ง แต่ลูกหลานไม่ได้รับช่วงต่อ
   เพราะโดนทาสีทับไปแล้ว  ลิงก์ที่เขียนว่า color:inherit จึงรับสีเทาเข้มมา
   กลายเป็นตัวหนังสือสีเข้มบนพื้นน้ำเงินเข้ม อ่านแทบไม่ออก

   วิธีแก้ : บังคับให้โครงสร้างข้างในรับสีจาก .ft ต่อกันเป็นทอด ๆ อีกครั้ง
   แล้วค่อยประกาศข้อยกเว้นซ้ำไว้ท้ายสุด เพราะน้ำหนักตัวเลือกเท่ากัน
   ตัวที่อยู่ล่างกว่าในไฟล์เป็นฝ่ายชนะ
   ===================================================================== */
.ft div, .ft ul, .ft ol, .ft li,
.ft p,   .ft a,  .ft span, .ft i,
.ft small, .ft strong, .ft b { color: inherit; }

/* ---- ข้อยกเว้น ต้องอยู่หลังกฎข้างบนเสมอ ----
   น้ำหนักตัวเลือกเท่ากันหมด ตัวที่อยู่ล่างกว่าเป็นฝ่ายชนะ
   สามบรรทัดล่างคือค่าที่ออกแบบไว้ตั้งแต่แรก ต้องประกาศซ้ำ
   ไม่งั้นกฎ inherit ข้างบนจะไปลบทิ้ง แล้วตัวอักษรจะสว่างเกินที่ตั้งใจ */
.ft h4, .ft h4 span { color: #fff; }
.ft-pay-row b       { color: #1a2545; }              /* ป้ายช่องทางชำระเงิน พื้นขาว */
.ft-pay > span      { color: rgba(255, 255, 255, .5); }  /* หัวข้อ ช่องทางชำระเงิน */
.ft .ft-soc,
.ft .ft-soc span,
.ft .ft-soc svg     { color: #fff; }
.ft .ft-policy-list a { color: rgba(255, 255, 255, .68); }
.ft .ft-contact-link { color: rgba(255, 255, 255, .86); }
/* ต้องเขียน .ft .ft-bottom ไม่ใช่ .ft-bottom เฉย ๆ
   เพราะ .ft div ข้างบนมีน้ำหนัก (0,1,1) สูงกว่าคลาสเดี่ยว (0,1,0) */
.ft .ft-bottom      { color: rgba(255, 255, 255, .5); }  /* แถบลิขสิทธิ์ล่างสุด */
.ft li a:hover,
.ft-line a:hover,
.ft-contact-link:hover,
.ft-bottom a:hover  { color: #fff; }

/* =====================================================================
   หน้านโยบาย / ติดต่อ / เกี่ยวกับเรา
   ===================================================================== */
body.evo-info-page {
  background:
    linear-gradient(180deg, #eef3fb 0%, #f8fafc 360px, #ffffff 100%);
  color: var(--ink);
}
.evo-info-page .boxed {
  background: transparent;
}
.evo-info-hero {
  margin: 0 0 34px;
  padding: 54px 0 46px;
  color: #fff;
}
.evo-info-hero .shell {
  display: grid;
  gap: 12px;
}
.evo-info-kicker {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.evo-info-hero h1 {
  max-width: 820px;
  color: #fff;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .28);
}
.evo-info-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}
.evo-info-main {
  padding: 0 0 26px;
}
.evo-info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
.evo-info-content,
.evo-info-side {
  min-width: 0;
}
.evo-info-content {
  display: grid;
  gap: 18px;
}
.evo-info-block,
.evo-contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--sh-1);
  padding: 24px;
}
.evo-info-block h2,
.evo-contact-card h2 {
  color: var(--ink);
  font-size: 21px;
  margin-bottom: 12px;
}
.evo-info-block p,
.evo-info-block li,
.evo-contact-card p,
.evo-contact-card li {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.85;
}
.evo-info-block p { margin: 0 0 12px; }
.evo-info-block p:last-child { margin-bottom: 0; }
.evo-info-block ul,
.evo-contact-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.evo-info-block li,
.evo-contact-list li {
  position: relative;
  padding-left: 18px;
}
.evo-info-block li::before,
.evo-contact-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue);
}
.evo-info-side {
  display: grid;
  gap: 14px;
}
.evo-info-nav,
.evo-info-note {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--sh-1);
  padding: 18px;
}
.evo-info-nav h3,
.evo-info-note h3 {
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 12px;
}
.evo-info-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 13.5px;
}
.evo-info-nav a:first-of-type { border-top: 0; }
.evo-info-nav a:hover { color: var(--blue); }
.evo-info-note p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.75;
}
.evo-contact-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.evo-contact-photo {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(13, 21, 38, .14);
  background: var(--line-2);
}
.evo-contact-title {
  display: grid;
  gap: 3px;
}
.evo-contact-title strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
}
.evo-contact-title span {
  color: var(--ink-3);
  font-size: 13px;
}
.evo-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.evo-contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--navy-2);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
}
.evo-contact-actions a:hover {
  background: var(--blue);
  color: #fff;
}
.evo-richtext {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.9;
}
.evo-richtext p { margin: 0 0 14px; }
@media (max-width: 900px) {
  .evo-info-layout { grid-template-columns: 1fr; }
  .evo-info-side { order: -1; }
}
@media (max-width: 560px) {
  .evo-info-hero { padding: 38px 0 34px; }
  .evo-info-block,
  .evo-contact-card,
  .evo-info-nav,
  .evo-info-note { padding: 18px; }
  .evo-contact-head { align-items: flex-start; }
  .evo-contact-photo { width: 68px; height: 68px; }
}

/* =====================================================================
   หน้าสมัครบัญชี และ หน้าเข้าสู่ระบบ ของผู้ซื้อ
   ---------------------------------------------------------------------
   *** อ่านก่อนแก้ ***
   ไฟล์นี้มีกฎรีเซ็ตอยู่ข้างบนว่า
       .evo-shop button, .evo-part button { cursor:pointer; background:none; border:0; }
   น้ำหนัก (0,1,1) สูงกว่าคลาสเดี่ยวอย่าง .auth-eye ที่มีแค่ (0,1,0)
   ปุ่มที่ต้องมีพื้นหลังหรือขอบ ต้องเขียนคู่กันเสมอ  .auth-eye, button.auth-eye
   ===================================================================== */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: stretch;
  gap: 26px;
  margin: 8px 0 46px;
}
.auth-narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 468px); }

/* ---------- แผงซ้าย พื้นน้ำเงินเข้ม ---------- */
.auth-side {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 42px 38px;
  border-radius: var(--r-xl);
  color: #fff;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(96, 165, 250, .34), transparent 62%),
    radial-gradient(110% 110% at 100% 100%, rgba(139, 92, 246, .3), transparent 60%),
    linear-gradient(158deg, var(--navy-3), var(--navy));
  box-shadow: var(--sh-3);
}
/* จุดแสงจาง ๆ ให้พื้นไม่ทึบจนดูตาย */
.auth-side::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 18% 24%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(2px 2px at 74% 16%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.6px 1.6px at 46% 78%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 62%, rgba(255,255,255,.3), transparent 60%);
  pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }
.auth-badge { width: 62px; height: 62px; display: block; margin-bottom: 4px; }
.auth-badge svg { width: 100%; height: 100%; }
.auth-side h2 { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.4; }
.auth-side p  { margin: 0; font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,.8); max-width: 42ch; }

.auth-perk { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.auth-perk li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: rgba(255,255,255,.9);
}
.auth-perk svg {
  width: 32px; height: 32px;
  flex: none;
  padding: 7px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
}

/* ---------- การ์ดฟอร์ม ---------- */
.auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 34px 34px 32px;
}
.auth-card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: var(--ink); }
.auth-lead    { margin: 0 0 22px; font-size: 13.5px; color: var(--ink-2); }
.auth-lead a  { color: var(--blue); font-weight: 600; }
.auth-lead a:hover { text-decoration: underline; }

.auth-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.auth-f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.auth-f label { font-size: 13px; font-weight: 600; color: var(--ink); }
.auth-f label b { color: var(--rose); font-weight: 600; }
.auth-f input,
.auth-f select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.auth-f input::placeholder { color: var(--ink-3); }
.auth-f input:focus,
.auth-f select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}
.auth-f small { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

/* ช่องรหัสผ่าน มีปุ่มกดดูอยู่ในกรอบ */
.auth-pw { position: relative; display: block; }
.auth-pw input { padding-right: 72px; }
.auth-eye,
button.auth-eye {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--page-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: all .16s var(--ease-out);
}
.auth-eye:hover,
button.auth-eye:hover { background: var(--blue-soft); border-color: var(--blue-3); color: var(--blue); }

.auth-err {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rose);
  line-height: 1.5;
}

/* แถบแจ้งรหัสผิด */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #fff4f5;
  border: 1px solid #ffd7dc;
  border-left: 4px solid var(--rose);
  color: #9f1239;
  font-size: 13.5px;
  line-height: 1.6;
}
.auth-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* แบบบอกข้อมูล ไม่ใช่แจ้งเตือนความผิดพลาด
   ใช้ตอนถูกเด้งมาจากหน้าที่ต้องล็อกอินก่อน  ยังไม่มีใครทำอะไรผิด
   ถ้าใช้กรอบแดงเหมือนรหัสผ่านผิด ลูกค้าจะตกใจว่าตัวเองทำอะไรพลาด */
.auth-alert-info {
  background: #eff6ff;
  border-color: #cfe0fd;
  border-left-color: var(--blue);
  color: #1e40af;
}

.auth-go,
button.auth-go { width: 100%; margin-top: 6px; height: 52px; font-size: 15.5px; }

.auth-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: center;
}
.auth-note a { color: var(--ink-2); text-decoration: underline; }
.auth-note a:hover { color: var(--blue); }

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
}
.auth-links a { color: var(--ink-2); font-weight: 500; }
.auth-links a:hover { color: var(--blue); text-decoration: underline; }

@media (max-width: 940px) {
  /* จอเล็กเอาแผงซ้ายไว้ล่าง ให้ฟอร์มขึ้นก่อน คนมาที่หน้านี้เพื่อกรอก ไม่ได้มาอ่าน */
  .auth, .auth-narrow { grid-template-columns: 1fr; gap: 18px; }
  .auth-side { order: 2; padding: 30px 26px; }
  .auth-card { order: 1; padding: 26px 22px 24px; }
  .auth-side h2 { font-size: 21px; }
}

@media (max-width: 480px) {
  .auth-row2 { grid-template-columns: 1fr; }
  .auth-card h1 { font-size: 21px; }
  .auth-card { padding: 22px 18px 20px; }
  .auth-side { padding: 26px 20px; }
}

/* =====================================================================
   ซ่อนด้วยแอตทริบิวต์ hidden ให้ได้ผลจริง
   ---------------------------------------------------------------------
   เบราว์เซอร์ซ่อน [hidden] ด้วยกฎของตัวเอง แต่กฎของเบราว์เซอร์
   แพ้กฎที่เราเขียนเองเสมอ ไม่ว่าน้ำหนักตัวเลือกจะเป็นเท่าไหร่
   พอเราเขียน .auth-f { display:flex } หรือ .co-addr-form { display:grid }
   ช่องที่ตั้ง hidden ไว้จะโผล่ออกมาหมด
   เช่น ช่อง "ระบุคำนำหน้า" กับฟอร์มเพิ่มที่อยู่ ที่ควรโผล่ตอนกดปุ่มเท่านั้น
   ===================================================================== */
.evo-shop [hidden], .evo-part [hidden] { display: none !important; }

/* ---------- ปุ่มรอง  ใช้คู่กับปุ่มหลักเวลามีสองทางเลือก ---------- */
.btn-ghost, button.btn-ghost {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  box-shadow: var(--sh-2);
}
.btn-ghost:hover, button.btn-ghost:hover {
  border-color: var(--blue-3);
  color: var(--blue);
  transform: translateY(-2px);
}
/* ปุ่มรองพื้นขาว ไม่ต้องมีแถบเงาวาวแบบปุ่มหลัก จะดูเป็นคราบ */
.btn-ghost::before { display: none; }

/* ---------- ข้อความยืนยันว่าใช้ได้ คู่กับ .auth-err ---------- */
.auth-ok {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--green);
  line-height: 1.5;
}

/* =====================================================================
   หน้าแจ้งผล  สมัครสำเร็จ / ไม่สำเร็จ
   ===================================================================== */
.done {
  max-width: 620px;
  margin: 34px auto 56px;
  padding: 44px 36px 40px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}
.done-mark {
  display: block;
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  color: var(--green);
}
.done-mark svg { width: 100%; height: 100%; }
.done-mark-bad { color: var(--rose); }

.done h1 { margin: 0 0 10px; font-size: 26px; font-weight: 700; color: var(--ink); }
.done-lead {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
}
.done-lead b { color: var(--ink); }

.done-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 18px;
  margin: 24px auto 0;
  padding: 18px 20px;
  max-width: 460px;
  text-align: left;
  border-radius: 14px;
  background: var(--page-2);
  border: 1px solid var(--line-2);
}
.done-info dt { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.done-info dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-word; }

.done-act {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

@media (max-width: 560px) {
  .done { padding: 34px 20px 30px; margin: 20px auto 40px; }
  .done h1 { font-size: 22px; }
  .done-mark { width: 68px; height: 68px; }
  .done-info { grid-template-columns: 1fr; gap: 4px 0; }
  .done-info dt { margin-top: 6px; }
  .done-act .btn { width: 100%; }
}

/* ---------- แจ้งเตือนบนหน้าสินค้า เช่น หยิบใส่ตะกร้าไม่สำเร็จ ---------- */
.pd-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #fff8ed;
  border: 1px solid #ffe2b8;
  border-left: 4px solid var(--gold);
  color: #8a5a00;
  font-size: 13.5px;
  line-height: 1.65;
}
.pd-warn svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* ข้อความชวนสมัคร ใต้ปุ่มเข้าสู่ระบบบนหน้าสินค้า */
.pd-signin-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}
.pd-signin-note a { color: var(--blue); font-weight: 600; }
.pd-signin-note a:hover { text-decoration: underline; }

/* ---------- บัญชีแบบข้อความอิสระ ที่ตัวแทนพิมพ์เองในหลังบ้าน ---------- */
.co-bank-free {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  word-break: break-word;
}
.co-bank-free p  { margin: 0 0 8px; }
.co-bank-free b, .co-bank-free strong { color: var(--navy-2); }
.co-bank-free ul, .co-bank-free ol { margin: 0 0 8px; padding-left: 20px; list-style: disc outside; }
.co-bank-free li { list-style: inherit; margin-bottom: 4px; }
.co-bank-free img { border-radius: 10px; margin: 8px 0; }

/* ช่อง QR ที่ยังไม่ได้ตั้งค่า  วางไว้ให้เห็นว่าตรงนี้จะมีอะไร */
.co-bank-qr-empty .co-qr-box {
  width: 132px; height: 132px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  border: 2px dashed #c3d4ee;
  color: var(--ink-3);
}
.co-bank-qr-empty .co-qr-box svg { width: 46px; height: 46px; }
.co-bank-qr-empty span { color: var(--ink-3); font-size: 11.5px; }

/* =====================================================================
   หน้าแจ้งโอน / แนบสลิป   shop-payment.php
   ===================================================================== */
.pay-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(168deg, #f7faff, #eef4ff);
  border: 1px solid #d9e5fb;
}
.pay-amount span { font-size: 13px; color: var(--ink-2); }
.pay-amount b    { font-size: 30px; font-weight: 700; color: var(--blue); line-height: 1.1; }
.pay-amount em   { font-style: normal; font-size: 13px; font-weight: 500; color: var(--ink-2); }

.pay-bank {
  padding: 15px 16px 16px;
  border-radius: 14px;
  background: var(--page-2);
  border: 1px solid var(--line);
}

/* ---- ช่องแนบสลิป ---- */
.pay-form { display: flex; flex-direction: column; gap: 15px; }

.pay-drop {
  position: relative;
  border: 2px dashed #c3d4ee;
  border-radius: 16px;
  background: var(--page-2);
  min-height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.pay-drop:hover { border-color: var(--blue-3); background: #f7faff; }
/* ช่องเลือกไฟล์คลุมทั้งกล่อง กดตรงไหนก็เปิดหน้าต่างเลือกไฟล์ได้ */
.pay-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.pay-drop-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 26px 20px;
  text-align: center;
  pointer-events: none;
}
.pay-drop-body svg  { width: 34px; height: 34px; color: var(--blue); }
.pay-drop-body b    { font-size: 15px; color: var(--ink); }
.pay-drop-body span { font-size: 12.5px; color: var(--ink-3); }
.pay-drop img       { max-width: 100%; max-height: 340px; display: block; }

.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pay-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pay-f > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pay-f input,
.pay-f select {
  width: 100%;
  padding: 11px 13px;
  border: 1.4px solid var(--line);
  border-radius: 11px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.pay-f input:focus,
.pay-f select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* ---- แจ้งไว้แล้ว ---- */
.pay-already { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pay-already p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.pay-slip-view img {
  max-width: 260px;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
}
.pay-already-meta { font-size: 12.5px; color: var(--ink-3); }

/* ---- ที่อยู่ในกล่องสรุป ---- */
.pay-addr {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pay-addr > span { font-size: 12px; color: var(--ink-3); }
.pay-addr b      { font-size: 14px; color: var(--ink); }
.pay-addr p      { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }

/* ---- แจ้งโอนสำเร็จ ---- */
.pay-done {
  max-width: 560px;
  margin: 10px auto 40px;
  padding: 44px 34px 38px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.pay-done-ico {
  width: 74px; height: 74px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7f9f1;
  color: var(--green);
}
.pay-done-ico svg { width: 40px; height: 40px; }
.pay-done h1 { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: var(--ink); }
.pay-done p  { margin: 0 0 6px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.pay-done-code { margin-top: 14px !important; font-size: 13px; }
.pay-done-code b { font-size: 19px; color: var(--blue); font-weight: 700; }
.pay-done-act {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 560px) {
  .pay-row  { grid-template-columns: 1fr; }
  .pay-done { padding: 34px 20px 30px; }
  .pay-done-act .btn { width: 100%; }
}


/* =====================================================================
   เมนูด้านซ้ายของโซนบัญชีผู้ซื้อ
   ---------------------------------------------------------------------
   ย้ายมาจาก home.php เพราะตอนนี้ my-orders.php ใช้ร่วมด้วย
   มาร์กอัปอยู่ที่ _evo_acct_side.php  เขียนที่เดียว ใช้ได้ทุกหน้า
   ===================================================================== */
.acct { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 20px; align-items: start; }
/* min-width: 0 ห้ามลบ  ช่อง grid จะกว้างตามเนื้อหาข้างในเป็นค่าต่ำสุด
   ข้างในมีแถบที่ตั้ง white-space: nowrap ไว้ ซึ่งยาวเกินจอมือถือ
   ไม่ใส่บรรทัดนี้ ทั้งหน้าจะเลื่อนไปทางขวาได้ ตัวหนังสือหดจนอ่านไม่ออก */
.acct > * { min-width: 0; }

/* ---------- เมนูด้านซ้าย ---------- */
.acct-side { position: sticky; top: 84px; }
.acct-card { background: var(--card); border: 1px solid var(--line);
             border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }

.acct-me   { display: flex; align-items: center; gap: 13px; padding: 18px 18px 17px;
             border-bottom: 1px solid var(--line-2); }
.acct-ava  { width: 48px; height: 48px; flex: none; border-radius: 50%;
             display: grid; place-items: center; color: #fff;
             font-size: 20px; font-weight: 600; line-height: 1;
             background: linear-gradient(160deg, var(--blue-3), var(--blue));
             box-shadow: 0 5px 14px rgba(37, 99, 235, .3); }
.acct-me-b { min-width: 0; }
.acct-me-b b { display: block; font-size: 15px; font-weight: 600; color: var(--ink);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-me-b span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }

.acct-nav  { padding: 8px; }
.acct-nav a,
.acct-nav button { display: flex; align-items: center; gap: 11px; width: 100%;
             padding: 11px 12px; border: 0; border-radius: 11px; background: none;
             font-family: inherit; font-size: 14px; text-align: left; color: var(--ink);
             cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.acct-nav a:hover, .acct-nav button:hover { background: var(--blue-soft); color: var(--blue); }
.acct-nav .is-on { background: linear-gradient(180deg, var(--blue-2), var(--blue));
                   color: #fff; font-weight: 500; box-shadow: var(--sh-blue); }
.acct-nav .is-on:hover { background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; }
.acct-nav svg { width: 18px; height: 18px; flex: none; }
.acct-sep  { display: block; height: 1px; margin: 7px 12px; background: var(--line-2); }
.acct-cap  { display: block; padding: 10px 12px 5px; font-size: 11.5px; font-weight: 600;
             letter-spacing: .04em; color: var(--ink-3); }

@media (max-width: 900px){
  .acct      { grid-template-columns: 1fr; gap: 14px; }
  /* จอเล็กเปลี่ยนเมนูซ้ายเป็นแถวเลื่อนแนวนอน ไม่กินความสูงทั้งหน้าจอ */
  .acct-side { position: static; }
  .acct-me   { padding: 15px 16px 14px; }
  .acct-nav  { display: flex; gap: 7px; padding: 10px; overflow-x: auto;
               scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav a, .acct-nav button { width: auto; flex: none; white-space: nowrap; padding: 9px 14px; }
  .acct-sep, .acct-cap { display: none; }
}