/* ============================================================
   CHEMISTRY K · Reskin override (CSS-only, variant เดียว)
   โทนสี/ฟอนต์ align กับเว็บการตลาด chemistryk.com (ธีม plant)
   ติดตั้งจริง: Appearance → Customize → Additional CSS (ย้อนกลับได้)
   อิง selector จริงจาก WPLMS 3.9.4 + WooCommerce (ดู FINDINGS.md ข้อ 5)
   ============================================================ */

/* ฟอนต์เดียวกับเว็บการตลาด
   ไฟล์เสิร์ฟจากโฟลเดอร์เดียวกับ override.css (wp-content/themes/wplms/assets/reskin/)
   path แบบ relative จึงใช้ได้เลย ไม่ต้องพึ่ง Use Any Font
   ⚠️ ห้ามย้ายไฟล์ CSS ออกจากโฟลเดอร์นี้ ไม่งั้น url() ทุกตัวในไฟล์จะหลุด */
@font-face {
  font-family: 'mn_minimon';
  src: url('fonts/mn-minimon.woff2') format('woff2'),
       url('fonts/mn-minimon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* โทนจาก chemistryk.com */
  --ck-cream: #FDF5E6;      /* พื้นหลังหลัก (ตรงกับ body เว็บการตลาด) */
  --ck-ink: #222222;
  --ck-yellow: #FFD966;     /* เหลืองป้าย/ปุ่ม */
  --ck-yellow-deep: #FED557;/* เหลือง header (ต้องตรงกับพื้นโลโก้ JPEG เดิม) */
  --ck-orange: #F5A623;
  --ck-coral: #F08A7E;
  --ck-red: #B83B3E;        /* ตัวเน้น/badge แดงแบรนด์ (ไม่ใช่ราคาแล้ว) */

  /* ราคา · ย้ายออกจากแดง (ลูกค้าแจ้ง 2026-08-18: แดง = "แพง" โดยความหมาย)
     ใช้เทอร์ควอยซ์แบรนด์ #2BB9A9 เข้มลงจนผ่าน contrast เป็นตัวอักษรได้
     (#2BB9A9 ตรง ๆ ได้แค่ 2.44 บนขาว ไม่ผ่าน 4.5)
     วัดแล้ว: 5.25 บนขาว · 4.85 บนครีม #FDF5E6 · 4.80 บนพื้นช่องกรอก #FBF4E6
     ถ้าอยากเป็นน้ำเงินแทน เปลี่ยนบรรทัดนี้เป็น #0F6B8C (6.00 / 5.53 / 5.48) จุดเดียวจบ */
  --ck-price: #17796E;
  --ck-teal: #2BB9A9;       /* สืบทอดจากปุ่มเดิม ใช้กับ progress */
  --ck-line: #06C755;       /* ปุ่ม LINE เท่านั้น */
  --ck-error: #B83B3E;      /* error จริงเท่านั้น (แก้ปัญหา 3.5) */

  /* สีเย็นตัวเดียวของระบบตาม BRAND-GUIDELINE (ref/BRAND-GUIDELINE.md ข้อ 2)
     พาเลตต์ทางการมีสีเย็นแค่ #b0e5e3 ตัวเดียว · เดิมเราใช้ฟ้า #CDE8F6 + เขียว #D2EFDD
     ซึ่งทั้งคู่อยู่นอกพาเลตต์ ยุบเป็นพื้นเดียวกัน แล้วแยก info/success ด้วยสีตัวอักษรแทน */
  --ck-cool: #b0e5e3;
  --ck-sky: var(--ck-cool);   --ck-sky-ink: #235A75;  /* info · contrast 5.43 บน #b0e5e3 */

  /* success · แยกกลับออกจาก info เป็นเขียวมิ้นต์ (ลูกค้าสั่ง 2026-08-29 รอบสอง)
     เหตุผล: #b0e5e3 เป็นมิ้นต์ "อมฟ้า" ตาอ่านเป็น info มากกว่า "ทำเสร็จแล้ว"
     ซึ่งเป็นความหมายที่ token นี้ถูกใช้จริงทั้ง 3 จุด (กล่องข้อความสำเร็จ ·
     ปุ่มเรียนจบแล้ว · จุดบทที่เรียนจบในไทม์ไลน์)

     ⚠️ ยังอยู่ในกติกา BRAND-GUIDELINE ข้อ 2 · ไกด์ไลน์เขียนว่าสีเย็นต้องวิ่งกลับมาที่
        #b0e5e3 "หรือเฉดที่ derive จากมัน" ค่านี้จึง derive ตรง ๆ: คง saturation 50%
        และ lightness 79% ของ #b0e5e3 ไว้เป๊ะ ขยับแค่ hue จาก 178° → 145°
        ไม่ใช่การเอาเขียวตัวใหม่จากนอกพาเลตต์เข้ามา (ซึ่งช่อง DON'T ห้ามไว้)
     วัดแล้ว: ตัวอักษร #14603A บน #B0E5C6 = 5.38 · ถูกขาวบนวงกลม #14603A = 7.60 */
  --ck-mint: #B0E5C6;         --ck-mint-ink: #14603A; /* success · contrast 5.38 บน #B0E5C6 */

  --ck-ink-10: rgba(34, 34, 34, .08);
  --ck-ink-40: rgba(34, 34, 34, .38);
  --ck-ink-60: rgba(34, 34, 34, .68);  /* .6 ให้ contrast แค่ 4.17 บนครีม ไม่ผ่าน 4.5 */

  /* เงาฟุ้งเบาแบบเว็บการตลาด */
  --ck-sh-sticker: 0 2px 8px rgba(34, 34, 34, .16);
  --ck-sh-soft: 0 10px 28px rgba(34, 34, 34, .10);
  --ck-sh-card: 0 3px 10px rgba(34, 34, 34, .08);
  --ck-r: 1.4rem;
}

/* ---------- 1. พื้นฐานทั้งเว็บ ---------- */

body.theme-wplms,
body.theme-wplms input,
body.theme-wplms select,
body.theme-wplms textarea,
body.theme-wplms button,
body.theme-wplms .button,
body.theme-wplms h1, body.theme-wplms h2, body.theme-wplms h3,
body.theme-wplms h4, body.theme-wplms h5, body.theme-wplms h6 {
  font-family: 'mn_minimon', 'sukhumvit', sans-serif !important;
}

/* กฎข้างบนครอบไม่ถึง เพราะธีมตั้ง font-family ทับที่ตัว element โดยตรงหลายจุด
   (p · li · strong · .price ได้ sukhumvit · เมนู navbar ได้ ibm-plex-thai)
   การสืบทอดจาก body จึงไปไม่ถึง — วัดแล้วเหลือ mn_minimon แค่ 51% ของข้อความทั้งเว็บ
   BRAND-GUIDELINE ข้อ 3 กำหนดว่า mn_minimon ใช้กับ UI ทั้งหมด จึงต้องครอบให้ครบ

   ⚠️ ต้องกัน element ที่เป็นไอคอนออก ไม่งั้นไอคอนจะกลายเป็นตัวอักษรมั่ว
      หน้าเว็บโหลดฟอนต์ไอคอนอยู่ 10 ตัว (FontAwesome · fonticon · Glyphicons ·
      ult-silk · ult-vid-cntrl · slick · Woo-Side-Cart · vcpb-plugin-icons ·
      vc_grid_v1 · Defaults)
   วัดด้วย mock/font-audit.py ทั้ง 20 หน้าแล้ว: ไอคอน 634 ตัว โดนทับ 0 ตัว
   ข้อความขึ้นเป็น mn_minimon จาก 3170/6127 (51%) เป็น 6127/6127 (100%)
   แก้กฎนี้เมื่อไร ให้รัน font-audit.py ซ้ำก่อนเสมอ */
body.theme-wplms *:not(i):not(.fa):not([class*="fa-"]):not([class*="icon"]):not([class*="glyphicon"]) {
  font-family: 'mn_minimon', 'sukhumvit', sans-serif !important;
}

/* พื้นหลัง: เหลืองอิ่มสูง → ครีมแบบเว็บการตลาด (ตัวทาสีจริงคือ .pusher) */
body.theme-wplms.custom-background {
  background: var(--ck-cream) !important;
  color: var(--ck-ink);
}
.theme-wplms .pusher {
  background: var(--ck-cream) !important;
}

/* กล่องธีมที่ทาเหลืองทึบทับเนื้อหา → โปร่งให้เห็นครีม
   (การ์ดของจริงคือ summary/แท็บ/ตาราง ที่จัดเป็นการ์ดขาวด้านล่าง)
   หมายเหตุ: หน้า cart/checkout/login ใช้ div.no.content นอก section.main */
.theme-wplms section.main .content,
.theme-wplms .no.content,
.theme-wplms div.content,
.theme-wplms section#title,
.theme-wplms.single-product div.product {
  background: transparent !important;
}

/* แถบเหลืองจาก page builder บนหน้า cart/checkout/login (คำแนะนำ/แบนเนอร์)
   เอาเฉพาะสีพื้นออก รูปภาพในแถบยังอยู่ครบ */
.theme-wplms.woocommerce-cart section.main .vc_row,
.theme-wplms.woocommerce-checkout section.main .vc_row,
.theme-wplms.page-template-login-page section.main .vc_row,
.theme-wplms.woocommerce-cart .no.content .vc_row,
.theme-wplms.woocommerce-checkout .no.content .vc_row,
.theme-wplms.page-template-login-page .no.content .vc_row,
/* หน้าหลัง login ใช้แถบเหลืองชุดเดียวกัน · slip / ลงทะเบียนหนังสือ / สั่งซื้อสำเร็จ / บัญชีผู้ใช้
   (page-id คงที่ใน WordPress ถ้าย้ายหน้าใหม่ต้องแก้เลขตรงนี้ · บันทึกไว้ใน HANDOFF) */
.theme-wplms.page-id-222845 .vc_row,
.theme-wplms.page-id-222905 .vc_row,
.theme-wplms.page-id-223027 .vc_row,
.theme-wplms.woocommerce-account section.main .vc_row,
.theme-wplms.woocommerce-account .no.content .vc_row {
  background-color: transparent !important;
}

/* เมนูสไลด์มือถือ (.pagesidebar): เดิมเหลืองทึบ → ขาวสะอาด */
.theme-wplms .pagesidebar {
  background: #fff !important;
}
.theme-wplms .pagesidebar a {
  color: var(--ck-ink) !important;
}

.theme-wplms section#title h1 {
  color: var(--ck-ink) !important;
  font-weight: 700;
}
.theme-wplms section#title .pagetitle span,
.theme-wplms section#title .pagetitle p {
  color: var(--ck-ink-60) !important;
}

.theme-wplms a { transition: color .15s, background .15s; }

/* ---------- 2. Header: แถวเดียวแบบเว็บการตลาด ----------
   โครงเดิม: .container > .row > [.col-md-9: โลโก้+เมนู] [.col-md-3: login+ตะกร้า]
   จัดใหม่ด้วย flex ให้ทุกอย่างอยู่บรรทัดเดียว สูง ~72px */

.theme-wplms header.sleek {
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(34, 34, 34, .07);
  border: 0;
}
/* แถวเดียวเฉพาะจอใหญ่ · มือถือปล่อย layout เดิมของธีม (โลโก้ + burger)
   ไม่งั้นปุ่ม LOGIN จะลอยทับโลโก้ */
@media (min-width: 992px) {
  .theme-wplms header.sleek .container > .row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .theme-wplms header.sleek .col-md-9 {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    float: none;
    width: auto;
  }
  .theme-wplms header.sleek .col-md-3 {
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    flex-shrink: 0;
  }
}

/* โลโก้: สลับ JPEG พื้นเหลือง → PNG พื้นใส (ไฟล์เดียวกับเว็บการตลาด)
   production: อัปโหลด Logo-Chem-K.png เข้าสื่อของ .online แล้วเปลี่ยน URL นี้
   ระวัง: หน้า login ใช้ h1#logo หน้าอื่นใช้ h2#logo · ต้องเจาะด้วย #logo เฉยๆ */
.theme-wplms header.sleek #logo {
  margin: 0;
  line-height: 1;
}
.theme-wplms header.sleek #logo a {
  display: block;
  width: 240px;
  height: 52px;
  background: url('brand/logo-chem-k.png') left center / contain no-repeat;
}
.theme-wplms header.sleek #logo img {
  display: none !important;
}
/* มือถือ: โลโก้สั้นลง ปุ่มกะทัดรัด กันทับกัน */
@media (max-width: 991px) {
  /* เดิมธีมใช้ #header_mobile_logo ขนาด 195×63 · ของผมเล็กไป (150×38)
     ปรับให้กว้างใกล้เคียงของเดิม (โลโก้ PNG ใหม่สัดส่วน 916:200 จึงเตี้ยกว่าโดยธรรมชาติ) */
  .theme-wplms header.sleek #logo a {
    width: 190px;
    height: 46px;
    margin-top: 0;
  }
  .theme-wplms .topmenu .vbplogin {
    padding: 5px 12px !important;
    margin: 12px 2px !important;
    font-size: 12px;
  }
  .theme-wplms .topmenu .vbpcart {
    width: 32px;
    height: 32px;
    margin: 10px 2px !important;
  }
}

/* เมนูหลัก: pill กะทัดรัด ไม่ต้องชดเชย padding สูงๆ อีกแล้ว (header เป็น flex) */
.theme-wplms header.sleek nav.menu-mymainmenu-container {
  margin-left: auto;
}
.theme-wplms header.sleek nav .menu > li > a {
  font-weight: 600;
  color: var(--ck-ink) !important;
  border-radius: 999px;
  padding: 9px 15px !important;
  margin: 16px 1px;
  line-height: 1.5;
  transition: background .15s;
}
.theme-wplms header.sleek nav .menu > li > a:hover,
.theme-wplms header.sleek nav .menu > li.current-menu-item > a {
  background: var(--ck-yellow);
  color: var(--ck-ink) !important;
}
/* จอกลาง (992–1360px): บีบเมนูให้จบแถวเดียว ไม่ตกบรรทัด
   ⚠️ แก้ค่า 2026-08-30 (ลูกค้าทัก: navbar ตกบรรทัดบนแท็บเล็ต) · บล็อกนี้เขียนไว้ถูกจุดแล้ว
      แต่ค่ายังไม่พอ และมีบรรทัดหนึ่งที่ไม่เคยทำงานเลย

      วัดที่ 1024px ก่อนแก้: เมนูต้องการ 587px แต่ได้พื้นที่ 540px = ขาด 47px
      → ส่วนหัวสูง 152px แทนที่จะเป็น 82px ("[ห้องเรียน]" กับไอคอนค้นหาตกไปแถวสอง)
      ช่วงที่พังคือ 1024–1199px พอดี = แท็บเล็ตแนวนอน (iPad 1024 · iPad Pro 11" 1194)

      (1) padding แนวนอน 9px → 4px : 7 รายการ × 2 ข้าง × 5px = ประหยัด 70px
      (2) โลโก้ 190px → 170px : คืนพื้นที่ให้เมนูอีก 20px
      (3) ถอด font-size: 13.5px ทิ้ง · บรรทัดนี้ **ไม่เคยมีผล** เพราะไม่มี !important
          แล้วสไตล์ชีตของธีม (cross-origin) ตั้ง 16px ทับอยู่ (วัดได้ 16px มาตลอด)
          ปล่อยเป็น 16px ต่อไปดีกว่า · ตรงกับสเกลเนื้อความ ไม่ต้องลดขนาดตัวอักษร
          เพื่อแก้ปัญหาที่ padding กับโลโก้แก้ได้อยู่แล้ว

      ⚠️ ต้องเผื่อหน้า "หลังล็อกอิน" ด้วย ไม่ใช่วัดแค่หน้าสาธารณะ
         .topmenu ของหน้าหลังล็อกอินกว้าง 182px (รูปโปรไฟล์ + ตะกร้า)
         ส่วนหน้าก่อนล็อกอินกว้าง 150px (ปุ่มเข้าสู่ระบบ + ตะกร้า)
         เมนูจึงได้พื้นที่ต่างกัน 32px · ตอนแก้รอบแรกวัดแต่หน้า 02 เลยผ่าน
         แต่หน้า 11 กับ 14 ยังตกบรรทัดอยู่ (ไอคอนค้นหาตกไปแถวสอง) */
@media (min-width: 992px) and (max-width: 1360px) {
  .theme-wplms header.sleek nav .menu > li > a {
    padding: 8px 4px !important;
    margin: 16px 0;
  }
  .theme-wplms header.sleek #logo a {
    width: 170px;
  }
}

/* dropdown เมนู */
.theme-wplms header.sleek nav .menu .sub-menu {
  border-radius: 18px;
  border: 0;
  box-shadow: var(--ck-sh-soft);
  overflow: hidden;
  background: #fff;
}
.theme-wplms header.sleek nav .menu .sub-menu a:hover {
  background: var(--ck-cream);
}

/* LOGIN + ตะกร้า มุมขวา */
.theme-wplms .topmenu {
  display: flex;
  align-items: center;
  margin: 0;
}
.theme-wplms .topmenu .vbplogin {
  background: var(--ck-yellow);
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: var(--ck-sh-sticker);
  color: var(--ck-ink) !important;
  font-weight: 700;
  padding: 8px 18px !important;
  margin: 16px 4px !important;
  display: inline-block;
  line-height: 1.5 !important;
}
.theme-wplms .topmenu .vbpcart {
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--ck-ink-10);
  color: var(--ck-ink) !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  margin: 16px 4px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.theme-wplms .topmenu .vbpcart:hover {
  background: var(--ck-cream);
}

/* ---------- 3. ระบบปุ่ม ----------
   หลักที่ใช้:
   - contrast: ตัวหนังสือ ink #222 บนเหลือง (ห้ามขาวบนเหลือง อ่านไม่ออก)
   - touch target ≥ 44px ทุกปุ่ม
   - ลำดับชั้นเดียวทั้งเว็บ: primary เหลืองทึบ / secondary ขาวมีเส้นขอบ / LINE เขียวแบรนด์
   - focus-visible เห็นชัดสำหรับคีย์บอร์ด */

/* พื้นฐานทุกปุ่ม */
body.theme-wplms .button,
body.theme-wplms button[type="submit"],
body.theme-wplms input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border: 0 !important;
  cursor: pointer;
  text-transform: none;
  transition: transform .12s, background .15s, box-shadow .15s;
}
body.theme-wplms .button:active,
body.theme-wplms button[type="submit"]:active {
  transform: scale(.97);
}
body.theme-wplms .button:focus-visible,
body.theme-wplms button:focus-visible,
body.theme-wplms a:focus-visible,
body.theme-wplms input[type="submit"]:focus-visible {
  outline: 3px solid rgba(245, 166, 35, .65) !important;
  outline-offset: 2px;
}

/* secondary (ค่าเริ่มต้นของปุ่มทั่วไป เช่น ใช้คูปอง, กลับสู่หน้าร้านค้า):
   ขาว + เส้นขอบ + ตัวหนังสือเข้ม · แก้ปัญหาตัวหนังสือขาวอ่านไม่ออก */
/* ธีมมี inline <style> ตั้ง .button{background-color:#28D7D1!important} จึงต้องตาม !important
   (ปุ่ม primary ด้านล่างก็ใช้ !important อยู่แล้ว จึงยังชนะตามลำดับ) */
body.theme-wplms .button,
body.theme-wplms button[type="submit"],
body.theme-wplms input[type="submit"] {
  background: #fff !important;
  color: var(--ck-ink) !important;
  border: 2px solid var(--ck-ink-10) !important;
  box-shadow: none;
}
body.theme-wplms .button:hover,
body.theme-wplms button[type="submit"]:hover {
  background: var(--ck-cream);
  filter: none;
}
/* ปุ่มในตารางตะกร้า (ใช้คูปอง / ปรับปรุงสินค้า) · ธีมทาสี teal ตัวขาวด้วย
   selector เจาะจงสูง ต้องตามไปเจาะเท่ากัน */
body.theme-wplms .woocommerce-cart table.cart td.actions .coupon .button,
body.theme-wplms .woocommerce-cart table.cart td.actions .button,
body.theme-wplms .woocommerce table.cart td.actions .button[name="update_cart"] {
  background: #fff !important;
  color: var(--ck-ink) !important;
  border: 2px solid var(--ck-ink-10) !important;
}
body.theme-wplms .woocommerce table.cart td.actions .button[name="update_cart"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* primary (การกระทำหลักของหน้า: สั่งซื้อ, ดำเนินการสั่งซื้อ):
   เหลืองทึบ ตัวหนังสือเข้ม · เจาะ specificity สูงกว่าธีมที่ตั้งตัวหนังสือขาวไว้ */
body.theme-wplms button.single_add_to_cart_button.button.alt,
body.theme-wplms a.checkout-button.button.alt,
body.theme-wplms ul.products li.product a.add_to_cart_button.button,
body.theme-wplms .woocommerce #respond input#submit.alt,
body.theme-wplms .woocommerce-checkout #place_order {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  box-shadow: 0 3px 12px rgba(34, 34, 34, .16) !important;
}
body.theme-wplms button.single_add_to_cart_button.button.alt:hover,
body.theme-wplms a.checkout-button.button.alt:hover,
body.theme-wplms ul.products li.product a.add_to_cart_button.button:hover,
body.theme-wplms .woocommerce-checkout #place_order:hover {
  background: #FFCF47 !important;
  filter: none;
}
/* ปุ่มหลักของหน้าสินค้า: ใหญ่สุดในหน้า (แก้ปัญหา 3.2 ปุ่มจางสุด) */
body.theme-wplms button.single_add_to_cart_button.button.alt {
  padding: 13px 38px !important;
  min-height: 52px;
}
body.theme-wplms a.checkout-button.button.alt {
  font-size: 16px !important;
  min-height: 48px;
}

/* ปุ่ม LINE: เขียวแบรนด์ LINE เท่านั้น แยกขาดจากปุ่มจ่ายเงิน (ปัญหา 3.1)
   ไอคอนเดิมเป็น position:absolute ลอยหลุด · จัดเป็น flex ให้อยู่ในปุ่ม */
.theme-wplms a.btn-line {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  background: var(--ck-line) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: var(--ck-sh-sticker);
  border: 0 !important;
  padding: 13px 24px !important;
}
.theme-wplms a.btn-line:hover {
  background: #05B34C !important;
}
.theme-wplms a.btn-line img {
  position: static !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
}
/* ปลั๊กอิน LINE เผื่อที่ให้ไอคอนแบบ absolute ด้วย padding ของ <span> ข้างเดียว
   (.btn-line span{padding:0 15px} + .woocommerce .wpdt-line-connect .btn-line span{padding-right:60px})
   พอเราจัดปุ่มใหม่เป็น flex ไอคอนอยู่ใน flow แล้ว padding ชุดนั้นเหลือแต่ดันข้อความเบี้ยว
   หน้า my-account (05) จึงเบี้ยวซ้าย 60px ส่วนหน้า login (04) ไม่โดนเพราะไม่มี .woocommerce ครอบ
   >> ล้าง padding/border ของ span ทิ้ง ให้ระยะมาจาก padding ของปุ่ม + gap อย่างเดียว */
.theme-wplms a.btn-line span {
  padding: 0 !important;
  margin: 0 !important;
  border-left: 0 !important;
  line-height: 1.4 !important;
  /* ธีมตั้ง .btn-line span{font-weight:400;letter-spacing:1px} ไว้ ทำให้คำบนปุ่มบางกว่าปุ่มอื่น
     และหน้าที่ใช้ ::after ทับคำ (ด้านล่าง) จะได้ 700 ไม่ตรงกัน · บังคับให้เป็นชุดเดียว */
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* คำบนปุ่มไม่ตรงกันสองหน้า: หน้า login เขียน "เข้าสู่ระบบด้วย LINE"
   ส่วนหน้า my-account/ชำระเงินแบบไม่ล็อกอิน ปลั๊กอินพิมพ์ "เข้าสู่ระบบด้วยไลน์"
   เป็นข้อความใน markup จริง แก้ด้วย CSS ได้ทางเดียวคือทับด้วย ::after
   เลือกคำอังกฤษ "LINE" เพราะเป็นชื่อแบรนด์ และตรงกับกล่องต้อนรับที่เขียน LINE อยู่แล้ว
   >> production: แก้ข้อความในปลั๊กอิน wpdt-line-connect ให้ตรงกันทั้งเว็บ จะสะอาดกว่าการทับด้วย CSS */
.theme-wplms .wpdt-line-connect a.btn-line span {
  font-size: 0 !important;
}
.theme-wplms .wpdt-line-connect a.btn-line span::after {
  content: 'เข้าสู่ระบบด้วย LINE';
  font-size: var(--ck-fs-body);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- 4. หน้าสินค้าเดี่ยว (.single-product) ---------- */

.theme-wplms.single-product div.summary.entry-summary {
  background: #fff;
  border-radius: var(--ck-r);
  box-shadow: var(--ck-sh-card);
  padding: 26px 28px;
}

.theme-wplms.single-product h1.product_title {
  font-weight: 700;
  color: var(--ck-ink);
}

/* แกลเลอรี: ตัดมุมที่ wrapper ชั้นเดียว กันขอบมนซ้อนไม่เนียน */
.theme-wplms.single-product .woocommerce-product-gallery {
  border-radius: var(--ck-r);
  overflow: hidden;
  box-shadow: var(--ck-sh-soft);
}
.theme-wplms.single-product .woocommerce-product-gallery__image img {
  border-radius: 0;
  display: block;
}

/* ราคา: แดงแบรนด์ ราคาเก่าจาง */
.theme-wplms .price ins .woocommerce-Price-amount,
.theme-wplms .price > .woocommerce-Price-amount:last-child,
.theme-wplms.single-product .summary .price .amount {
  color: var(--ck-price) !important;
  font-weight: 700;
}
.theme-wplms .price del .woocommerce-Price-amount {
  color: var(--ck-ink-40) !important;
  font-weight: 500;
}

.theme-wplms span.onsale {
  background: var(--ck-coral) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 2px solid #fff !important;
  font-weight: 700;
  box-shadow: var(--ck-sh-card);
}

.theme-wplms .connected_courses {
  background: var(--ck-cream);
  border-radius: 18px;
  padding: 14px 16px;
}

.theme-wplms ul.breadcrumbs li,
.theme-wplms ul.breadcrumbs li a {
  color: var(--ck-ink-60) !important;
  font-size: 13px;
}

/* หัวข้อแท็บ (คำอธิบาย): ตอนนี้มีแท็บเดียว จึงไม่ควรหน้าตาเป็นปุ่ม
   ทำเป็นหัวข้อ section ขีดเน้นเหลืองแบบปากกาไฮไลต์แทน */
.theme-wplms .woocommerce-tabs ul.wc-tabs {
  border: 0 !important;
  margin-bottom: 6px;
}
.theme-wplms .woocommerce-tabs ul.wc-tabs li {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  width: auto !important;
}
body.theme-wplms .woocommerce-tabs ul.wc-tabs li a {
  display: inline-block;
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  font-weight: 700 !important;
  font-size: 19px !important;
  padding: 0 2px 4px !important;
  line-height: 1.5 !important;
  color: var(--ck-ink) !important;
  border-bottom: 6px solid var(--ck-yellow) !important;
  cursor: default;
}
/* แผงเนื้อหาแท็บ: การ์ดขาว (เจาะ specificity ให้ชนะธีมที่ทาเหลือง) */
body.theme-wplms .woocommerce-tabs .woocommerce-Tabs-panel,
body.theme-wplms.single-product #tab-description.woocommerce-Tabs-panel {
  background: #fff !important;
  border-radius: var(--ck-r);
  box-shadow: var(--ck-sh-card);
  padding: 22px !important;
  border: 0 !important;
  overflow: hidden;
}
/* กรอบเหลืองจาก page builder รอบรูปในคำอธิบาย → เอาสีพื้นออก เหลือแต่รูป */
body.theme-wplms .woocommerce-Tabs-panel .vc_row {
  background-color: transparent !important;
}
body.theme-wplms .woocommerce-Tabs-panel .vc_single_image-img {
  border-radius: var(--ck-r);
}

/* หน้ารวมสินค้า: จังหวะช่องไฟ */
.theme-wplms.tax-product_cat .content > .wpb-content-wrapper img,
.theme-wplms.tax-product_cat .content .vc_single_image-img {
  border-radius: var(--ck-r);
  box-shadow: var(--ck-sh-card);
}
.theme-wplms .woocommerce-result-count {
  color: var(--ck-ink-40);
  font-size: 13px;
}
.theme-wplms .woocommerce-ordering select {
  background: #fff !important;
  border: 2px solid var(--ck-ink-10) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-weight: 600;
  color: var(--ck-ink-60);
}

/* การ์ดสินค้า (หน้ารวม + related)
   ธีมเดิมทำ gutter ด้วย padding ใน li · พอทาการ์ดขาวที่ li สีจะเต็มถึงขอบ
   การ์ดเลยติดกัน ต้องถอด padding แล้วใช้ margin จริงแทน */
.theme-wplms ul.products li.product {
  background: #fff;
  border-radius: var(--ck-r);
  box-shadow: var(--ck-sh-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 30.33% !important;
  margin: 0 1.5% 30px !important;
  padding: 0 0 20px !important;
  height: auto !important;
  transition: transform .15s, box-shadow .15s;
}
@media (max-width: 991px) and (min-width: 577px) {
  .theme-wplms ul.products li.product {
    width: 47% !important;
    margin: 0 1.5% 24px !important;
  }
}
/* มือถือ: เดิมการ์ดกว้าง 380 ในจอ 390 = เหลือขอบข้างละ 5px ติดขอบจอเกินไป
   และไม่ตรงกับส่วนอื่นของหน้าซึ่งเว้น 15px ("ทั้งหมด 3 คอร์ส" กับกล่องเรียงลำดับวัดได้ 15px ทั้งคู่)
   ตัว <ul> อยู่ที่ x=5 อยู่แล้ว จึงเติม margin ข้างละ 10px ให้ครบ 15px เท่าของเดิมทั้งหน้า */
@media (max-width: 576px) {
  .theme-wplms ul.products li.product {
    width: calc(100% - 20px) !important;
    margin: 0 10px 20px !important;
  }
}
/* ปุ่มสั่งซื้อชิดล่างเสมอ การ์ดสูงเท่ากันไม่มีช่องว่างตาย */
.theme-wplms ul.products li.product .add_to_cart_button {
  margin-top: auto;
  align-self: center;
}
.theme-wplms ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--ck-sh-soft);
}
.theme-wplms ul.products li.product img {
  border-radius: 0;
  display: block;
}
.theme-wplms ul.products li.product h3,
.theme-wplms ul.products li.product .woocommerce-loop-product__title {
  font-weight: 700;
  color: var(--ck-ink);
  padding: 4px 16px 0;
}
.theme-wplms ul.products li.product .price {
  padding: 0 16px;
  margin: 6px 0 10px;
}
.theme-wplms ul.products li.product .add_to_cart_button {
  margin-bottom: 4px;
}

/* ---------- 5. Sidebar ---------- */

.theme-wplms .sidebar .widget,
.theme-wplms .productsidebar .widget {
  background: #fff;
  border-radius: var(--ck-r);
  box-shadow: var(--ck-sh-card);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.theme-wplms .sidebar .widget ul li a,
.theme-wplms .productsidebar .widget ul.menu li a {
  color: var(--ck-ink-60);
  font-weight: 600;
  border-radius: 12px;
  display: block;
  padding: 6px 10px;
  border: 0 !important;
}
.theme-wplms .sidebar .widget ul li a:hover,
.theme-wplms .productsidebar .widget ul.menu li a:hover,
.theme-wplms .sidebar .widget ul li.current-cat > a,
.theme-wplms .productsidebar .widget ul.menu li.current-menu-item > a {
  background: var(--ck-yellow);
  color: var(--ck-ink) !important;
}

/* ---------- 6. ตะกร้า + checkout ---------- */

.theme-wplms table.shop_table {
  background: #fff;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-card);
  border: 0 !important;
  overflow: hidden;
}
.theme-wplms table.shop_table th,
.theme-wplms table.shop_table td {
  border-color: var(--ck-ink-10) !important;
}

.theme-wplms .woocommerce-checkout input.input-text,
.theme-wplms .woocommerce-checkout textarea,
.theme-wplms .woocommerce-cart input.input-text,
.theme-wplms form .input-text,
.theme-wplms input[type="text"],
.theme-wplms input[type="email"],
.theme-wplms input[type="tel"],
.theme-wplms input[type="password"] {
  background: #fff !important;
  border: 2px solid var(--ck-ink-10) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  transition: border-color .15s;
}
.theme-wplms input:focus,
.theme-wplms textarea:focus {
  border-color: var(--ck-orange) !important;
  outline: none;
}

/* 3.5: แดงสงวนไว้ให้ error จริง · label/คำอธิบายใช้สีหมึกปกติ */
.theme-wplms .woocommerce-checkout form .form-row label,
.theme-wplms form .form-row label {
  color: var(--ck-ink) !important;
  font-weight: 700;
}
.theme-wplms form .form-row .required {
  color: var(--ck-coral) !important;
}
.theme-wplms form .form-row label span:not(.required),
.theme-wplms form .form-row label small {
  color: var(--ck-ink-60) !important;
  font-weight: 500;
}

/* แจ้งเตือน Woo */
.theme-wplms .woocommerce-info {
  background: var(--ck-sky) !important;
  color: var(--ck-sky-ink) !important;
  border-radius: 16px !important;
  border: 0 !important;
  font-weight: 600;
}
.theme-wplms .woocommerce-info::before { color: var(--ck-sky-ink) !important; }
.theme-wplms .woocommerce-message {
  background: var(--ck-mint) !important;
  color: var(--ck-mint-ink) !important;
  border-radius: 16px !important;
  border: 0 !important;
  font-weight: 600;
}
.theme-wplms .woocommerce-message::before { color: var(--ck-mint-ink) !important; }
.theme-wplms .woocommerce-error {
  background: #F8DEDE !important;
  color: var(--ck-error) !important;
  border-radius: 16px !important;
  border: 0 !important;
  font-weight: 600;
}

/* ---------- 7. ตะกร้าสไลด์ (xoo-wsc) ---------- */

.xoo-wsc-modal .xoo-wsc-container {
  border-radius: var(--ck-r) 0 0 var(--ck-r);
  font-family: 'mn_minimon', 'sukhumvit', sans-serif !important;
}
/* ปุ่มในตะกร้าสไลด์ทุกปุ่ม: เริ่มจาก secondary (กันตัวหนังสือขาวบนพื้นโปร่ง)
   แล้วค่อยยก checkout เป็น primary เหลือง */
/* ปลั๊กอิน Side Cart สร้าง inline <style> ตัวหนังสือขาวบน teal (contrast 1.79)
   ด้วย selector a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-* + !important
   ต้องใช้ selector ที่ specificity เท่ากันหรือสูงกว่าจึงจะชนะ
   >> production: แก้ที่ตั้งค่าปลั๊กอิน (Side Cart → Styling) จะสะอาดกว่าการ override */
.xoo-wsc-modal .xoo-wsc-ft-btn,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-continue,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-cart,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-checkout {
  border-radius: 999px !important;
  font-weight: 700 !important;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff !important;
  color: var(--ck-ink) !important;
  border: 2px solid var(--ck-ink-10) !important;
  box-shadow: none;
}
.xoo-wsc-modal .xoo-wsc-ft-btn-checkout,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-checkout {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  box-shadow: 0 3px 12px rgba(34, 34, 34, .16);
}
.xoo-wsc-modal .xoo-wsc-ft-btn-checkout:hover,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-checkout:hover {
  background: #FFCF47 !important;
  color: var(--ck-ink) !important;
}
/* hover ของปุ่มรองก็ถูกปลั๊กอินตั้งเป็นแดง · คงตัวหนังสือเข้มไว้ */
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-continue:hover,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-cart:hover {
  background: var(--ck-cream) !important;
  color: var(--ck-ink) !important;
}

/* ปุ่มตะกร้าลอย (3.7: มือถือลอยทับเนื้อหา · ย่อ+ชิดมุม) */
.xoo-wsc-basket {
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: var(--ck-sh-sticker) !important;
  border: 2px solid var(--ck-ink-10);
}
.xoo-wsc-basket .xoo-wsc-items-count {
  background: var(--ck-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700;
}
@media (max-width: 700px) {
  .xoo-wsc-basket {
    transform: scale(.85);
    bottom: 8px !important;
    right: 8px !important;
  }
}

/* ปุ่มขึ้นบนสุด · ตัวหนังสือ "top" เป็นขาวบนเหลือง contrast 1.37 อ่านไม่ออก */
.theme-wplms #scrolltop {
  background: var(--ck-yellow) !important;
  border-radius: 50% !important;
  box-shadow: var(--ck-sh-sticker);
}
.theme-wplms #scrolltop,
.theme-wplms #scrolltop a,
.theme-wplms #scrolltop span,
.theme-wplms #scrolltop i {
  color: var(--ck-ink) !important;
}

/* ---------- 8. หน้า login ---------- */

/* ปุ่ม LINE ใช้สเปกกลางชุดเดียวทั้งเว็บ (ดูข้อ 3) ห้ามตั้ง padding/font-size ซ้ำตรงนี้
   เดิมหน้า login ตั้ง 17px/padding 14px 20px เอง ทำให้สูง 54px ไม่เท่าหน้า my-account ที่ 48px */
.theme-wplms.page-template-login-page a.btn-line {
  text-align: center;
}

.theme-wplms .popup_login {
  border-radius: var(--ck-r);
  overflow: hidden;
}

.theme-wplms form.standard-form {
  border-radius: var(--ck-r);
  box-shadow: var(--ck-sh-soft);
  border: 0 !important;
}
.theme-wplms .standard-form p.well,
.theme-wplms p.well {
  background: var(--ck-sky) !important;
  color: var(--ck-sky-ink) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* ---------- 9. โปรไฟล์ / My Courses (BuddyPress) ---------- */

.theme-wplms #buddypress .item-list-tabs ul li a,
.theme-wplms #buddypress div.item-list-tabs ul li a {
  border-radius: 999px;
  font-weight: 700;
}
.theme-wplms #buddypress div.item-list-tabs ul li.selected a {
  background: var(--ck-yellow);
  color: var(--ck-ink);
  box-shadow: var(--ck-sh-card);
}

.theme-wplms #buddypress .course_list li,
.theme-wplms .bp_courses li.item-entry {
  background: #fff;
  border-radius: var(--ck-r);
  box-shadow: var(--ck-sh-card);
  overflow: hidden;
}

/* ---------- 10. ห้องเรียน / หลักสูตร (WPLMS course) ---------- */

/* (กฎของบล็อกหลักสูตรย้ายไปข้อ 32 · ของเดิมเขียนไว้กับ markup แบบ <li>
   แต่เว็บนี้ WPLMS ออกมาเป็น <table> จริง ๆ กฎเดิมจึงไม่เคยติดสักข้อ) */

.theme-wplms .course_progress,
.theme-wplms .progressbar {
  background: var(--ck-cream) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.theme-wplms .course_progress > div,
.theme-wplms .progressbar > div {
  background: var(--ck-teal) !important;
  border-radius: 999px !important;
}

/* 3.11: ผู้ enroll แล้วไม่ควรเห็นราคาขายซ้ำในหน้าห้องเรียน */
.theme-wplms.single-course .course_price {
  display: none !important;
}

/* ---------- 11. Footer: สไตล์เดียวกับ chemistryk.com ----------
   .com = พื้นครีมต่อเนื่องจากหน้า โลโก้กลาง pill โซเชียล copyright เล็กๆ
   (รูป pill โซเชียลบน .online เป็นชุดเดียวกับ .com อยู่แล้ว แค่เปลี่ยนพื้น) */

.theme-wplms #Wiefooter {
  background: var(--ck-cream) !important;
  border-top: 0;
  padding-top: 20px;
}
.theme-wplms #Wiefooter .vc_row,
.theme-wplms #Wiefooter .wpb_row {
  background-color: transparent !important;
}
.theme-wplms #Wiefooter .footerbottom {
  background: transparent;
  color: var(--ck-ink-60);
  font-size: 12.5px;
  border-top: 1px solid var(--ck-ink-10);
}
.theme-wplms #Wiefooter .footerbottom a {
  color: var(--ck-ink-60);
}

/* ---------- รูป footer: ย้ายไปแก้ที่ต้นทางแล้ว (2026-09-06) ----------
   เดิมมีกฎ 12 ชุดที่เกาะชื่อไฟล์เก่าใน /2023/10/ เพื่อสลับรูปด้วย content: url()
   และชดเชย aspect-ratio เพราะ <img> ยังมี width/height ของรูปเก่าติดมา
   (วัดได้ตอนนั้น: attribute 1040x316 แต่รูปที่แสดงจริง 900x559)

   ตอนนี้เปลี่ยนรูปใน shortcode ของวิดเจ็ต footer ที่ต้นทางแล้ว (attachment id ใหม่)
   WPBakery จึงเขียน width/height ให้ตรงกับรูปจริง เบราว์เซอร์คำนวณสัดส่วนเองได้
   วัดบนเว็บจริงหลังเปลี่ยน: หัว footer 258x160 = 1.610 (ไฟล์ 900/559 = 1.610)
                            ไอคอนโซเชียล 258x71 = 3.611 (ไฟล์ 1000/277 = 3.610)
   ไม่มีรูปไหนเพี้ยน กฎชดเชยจึงหมดหน้าที่และถูกลบออกทั้งหมด

   ที่เหลือคือกฎกว้าง .wpb_single_image img / figure img { max-width:258px }
   ซึ่งไม่ผูกชื่อไฟล์ ใช้ได้ต่อไม่ว่าจะเปลี่ยนรูปอีกกี่รอบ
   ------------------------------------------------------------ */


/* ขยายคอลัมน์โซเชียลให้รูปใหญ่ขึ้นเท่าสัดส่วนบน .com
   ⚠️ เฉพาะจอใหญ่ · footer มีสองชุด (ชุด desktop .vc_hidden-xs กับชุด mobile)
   ชุด mobile ก็ใช้ .vc_col-sm-4 กับแถวโลโก้ ถ้าบีบ 33.33% ด้วย โลโก้จะเหลือ 136px */
@media (min-width: 768px) {
  .theme-wplms #Wiefooter .vc_row.vc_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .theme-wplms #Wiefooter .vc_row.vc_inner .wpb_column.vc_col-sm-4 {
    float: none;
    width: 440px;
    max-width: 33.33%;
  }
  .theme-wplms #Wiefooter .vc_row.vc_inner .vc_column-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* กล่องหุ้มรูปต้องมีความกว้างแน่นอน ไม่งั้น width:100% ของ <img> คำนวณเป็น 0
   (เกิดกับโลโก้ footer บนมือถือ · หายไปทั้งรูป) */
.theme-wplms #Wiefooter .wpb_single_image,
.theme-wplms #Wiefooter .vc_figure,
.theme-wplms #Wiefooter .vc_single_image-wrapper {
  display: block;
  width: 100%;
}
/* ตัว wrapper ของรูปโดนธีมล็อกความกว้างไว้ · ปล่อยให้เต็มคอลัมน์ */
.theme-wplms #Wiefooter .wpb_single_image,
.theme-wplms #Wiefooter .wpb_single_image .vc_figure,
.theme-wplms #Wiefooter .wpb_single_image .vc_single_image-wrapper {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

/* จัดลำดับท้าย footer แบบ .com: โซเชียล → Email/Tel → copyright ล่างสุด
   (ลำดับ DOM เดิม copyright มาก่อน · ใช้ flex order สลับ) */
.theme-wplms #Wiefooter .wpb-content-wrapper {
  display: flex;
  flex-direction: column;
}
/* Email / Tel (CSS แทรกข้อความได้เฉพาะ pseudo · production พิมพ์ลง WPBakery แทน) */
.theme-wplms #Wiefooter .wpb-content-wrapper::after {
  content: 'Email : Chemistryk.official@gmail.com\A Tel : 063-6535263';
  white-space: pre-line;
  order: 50;
  display: block;
  text-align: center;
  color: var(--ck-ink);
  font-size: 15px;
  line-height: 1.9;
  padding: 10px 0 22px;
}
/* copyright ลงล่างสุด + อัปเดตปีเป็น 2026 (ซ่อนข้อความเดิมด้วย font-size:0
 · production แก้ข้อความจริงในแถว footer ผ่าน WPBakery)
   เดิมจับด้วย :last-child แต่บางหน้ามี <link>/<script> ต่อท้าย rule จึงไม่ติด
   แถว copyright คือแถวเดียวใน footer ที่ไม่มีคลาส vc_custom_* จึงใช้ตัวนั้นแยกแทน */
.theme-wplms #Wiefooter .wpb-content-wrapper > .vc_row:not([class*="vc_custom_"]) {
  order: 99;
}
.theme-wplms #Wiefooter .wpb-content-wrapper > .vc_row:not([class*="vc_custom_"]) p {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
.theme-wplms #Wiefooter .wpb-content-wrapper > .vc_row:not([class*="vc_custom_"]) p::after {
  content: 'บริษัท เคมี เค จำกัด ©2026 CHEME K CO.,LTD. ALL RIGHTS RESERVED.';
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ck-ink-60);
  text-align: center;
  padding: 14px 0 4px;
}

/* ---------- 12. อื่นๆ ---------- */

* { scrollbar-width: thin; scrollbar-color: #f5a62366 transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   13. DESIGN PLAN P1–P8  (ดู DESIGN-PLAN.md)
   ส่วนนี้อยู่ท้ายไฟล์เพื่อให้ชนะ rule ด้านบนที่ specificity เท่ากัน
   ============================================================ */

/* ---------- P3: type scale + P4: spacing scale (tokens) ---------- */
:root {
  --ck-fs-display: 30px;   /* ชื่อคอร์ส ชื่อหน้า */
  --ck-fs-price: 32px;     /* ราคาเท่านั้น */
  --ck-fs-price-sm: 24px;  /* ราคาในการ์ดหน้ารวมคอร์ส · ขั้นเดียวกับ Display บนมือถือ ไม่ได้เพิ่มขั้นใหม่ (ข้อ 31.3) */
  --ck-fs-title: 19px;     /* หัวข้อ section หัวการ์ด */
  --ck-fs-body: 16px;      /* เนื้อความ (ต่ำกว่านี้ iOS auto-zoom) */
  --ck-fs-caption: 13px;   /* รหัสสินค้า ป้ายกำกับ */

  --ck-sp-1: 8px;
  --ck-sp-2: 16px;
  --ck-sp-3: 24px;
  --ck-sp-4: 40px;
}

/* ---------- P8: ลายเซ็น · ขีดเน้นปากกาไฮไลต์ ----------
   ใช้ gradient แทน border-bottom เพื่อให้สีเหลืองอยู่ "หลัง" ตัวอักษรแบบปากกาเน้นจริง
   ใช้กับหัวข้อเท่านั้น อย่าเอาไปใช้กับอย่างอื่น · ลายเซ็นเดียวให้ทั่ว ที่เหลือเงียบ */
.theme-wplms .productsidebar .widget h4.widget_title,
.theme-wplms .sidebar .widget h4.widget_title,
.theme-wplms .woocommerce-tabs ul.wc-tabs li a,
.theme-wplms .cart_totals h2,
.theme-wplms .cross-sells h2,
.theme-wplms section.related.products > h2 {
  display: inline-block;
  background-image: linear-gradient(transparent 60%, var(--ck-yellow) 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 4px 1px !important;
  border-bottom: 0 !important;
  border-radius: 2px;
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  line-height: 1.5;
  margin-bottom: var(--ck-sp-2);
}

/* หัวข้อแท็บไม่ใช่ปุ่ม · คืนสภาพให้เป็นหัวข้อล้วน */
.theme-wplms .woocommerce-tabs ul.wc-tabs li a {
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: default;
}

/* ---------- P1: ลำดับชั้นราคา ---------- */
body.theme-wplms.single-product .summary p.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--ck-sp-2) 0 var(--ck-sp-3);
  font-variant-numeric: tabular-nums;
}
/* ราคาปัจจุบันมาก่อน ราคาเดิมตามหลัง (DOM เดิมสลับกัน) */
body.theme-wplms.single-product .summary p.price ins { order: 1; }
body.theme-wplms.single-product .summary p.price del { order: 2; }

body.theme-wplms.single-product .summary p.price ins,
body.theme-wplms.single-product .summary p.price ins .amount,
body.theme-wplms.single-product .summary p.price ins bdi {
  font-size: var(--ck-fs-price);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ck-price) !important;
  text-decoration: none;
  background: transparent;
}
body.theme-wplms.single-product .summary p.price del,
body.theme-wplms.single-product .summary p.price del .amount,
body.theme-wplms.single-product .summary p.price del bdi {
  font-size: 17px;
  font-weight: 500;
  color: var(--ck-ink-40) !important;
}

/* ชื่อคอร์ส · ธีมตั้ง h1.product_title.entry-title{font-size:28px!important} ต้องตาม !important */
body.theme-wplms.single-product h1.product_title,
body.theme-wplms.single-product h1.product_title.entry-title {
  font-size: var(--ck-fs-display) !important;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 var(--ck-sp-1);
}

/* เมนูหมวดใน sidebar ลดลงเป็นข้อมูลรอง · เดิม 22px ใหญ่กว่าราคา */
.theme-wplms .productsidebar .widget ul.menu li a,
.theme-wplms .sidebar .widget ul li a {
  font-size: 15px;
  line-height: 1.6;
}

/* รหัสสินค้า/หมวดหมู่ = caption */
body.theme-wplms.single-product .product_meta,
body.theme-wplms.single-product .product_meta a {
  font-size: var(--ck-fs-caption);
  color: var(--ck-ink-60);
}

/* ---------- P4: จังหวะระยะห่างในกล่องสินค้า ---------- */
body.theme-wplms.single-product .summary.entry-summary {
  padding: var(--ck-sp-3) var(--ck-sp-3) var(--ck-sp-3);
}
body.theme-wplms.single-product .connected_courses {
  margin: 0 0 var(--ck-sp-3);
  padding: var(--ck-sp-2);
}
body.theme-wplms.single-product .woocommerce-product-details__short-description {
  margin: 0 0 var(--ck-sp-3);
  font-size: var(--ck-fs-body);
  line-height: 1.7;
}
body.theme-wplms.single-product form.cart {
  margin: 0 0 var(--ck-sp-3);
}
body.theme-wplms.single-product ul.breadcrumbs {
  margin: 0 0 var(--ck-sp-1);
}

/* ---------- P5: touch target ในกล่องคอร์สที่รวมอยู่ ---------- */
.theme-wplms .connected_courses ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.theme-wplms .connected_courses ul li {
  border: 0 !important;
  margin: 0;
}
.theme-wplms .connected_courses ul li a {
  display: flex;
  align-items: center;
  gap: var(--ck-sp-1);
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ck-ink) !important;
  transition: background .15s;
}
.theme-wplms .connected_courses ul li a:hover {
  background: #fff;
}

/* ---------- P6: คำ ----------
   >> production: แก้ที่การตั้งค่า/แปลภาษาใน WPLMS แทน ที่นี่จำลองด้วย CSS เพื่อให้เห็นภาพ */

/* "Courses Included" → ไทย
   หัวข้อนี้ถูกถอดออกจากรายชื่อ "ขีดเน้นปากกาไฮไลต์" ของข้อ P8 แล้ว (ลูกค้าสั่ง 2026-08-19)
   กล่องนี้ย้ายไปอยู่ใต้ปุ่มสั่งซื้อในฐานะข้อมูลเบื้องต้น ไม่ใช่หัวข้อระดับ section อีกต่อไป
   จึงต้องตั้งสีกับช่องไฟเองแทนค่าที่เคยได้มาจากกฎนั้น */
.theme-wplms .connected_courses h6 {
  font-size: 0 !important;
  color: var(--ck-ink);
  margin: 0 0 var(--ck-sp-2);
}
.theme-wplms .connected_courses h6::after {
  content: 'คอร์สที่รวมอยู่';
  font-size: var(--ck-fs-title);
  font-weight: 700;
}

/* ปุ่มซื้อ: คงคำว่า "สั่งซื้อ" ตามเดิม
   (ร้านจำกัดซื้อได้ 1 ชิ้นต่อรายการ ปุ่มนี้จึงเท่ากับการสั่งซื้อจริง ไม่ใช่แค่หยิบใส่ตะกร้า)
   จัดให้หน้าสินค้าเดี่ยวกับหน้ารวมคอร์สใช้คำเดียวกัน */
body.theme-wplms button.single_add_to_cart_button.button.alt,
body.theme-wplms ul.products li.product a.add_to_cart_button.button {
  font-size: 0 !important;
}
body.theme-wplms button.single_add_to_cart_button.button.alt::after {
  content: 'สั่งซื้อ';
  font-size: var(--ck-fs-title);   /* 19px · ใหญ่กว่า body และยังอยู่ในสเกล */
  font-weight: 700;
}
body.theme-wplms ul.products li.product a.add_to_cart_button.button::after {
  content: 'สั่งซื้อ';
  font-size: var(--ck-fs-body);
  font-weight: 700;
}

/* ข้อความ login ตอน checkout · เดิมเป็นอังกฤษตรงจุดที่คนทิ้งตะกร้ามากสุด
   หมายเหตุ: /checkout/ redirect ไป my-account body class จึงเป็น .woocommerce-account
   ไม่ใช่ .woocommerce-checkout */
body.theme-wplms.woocommerce-checkout .woocommerce-info,
body.theme-wplms.woocommerce-account .woocommerce-info {
  /* font-size:0 ใช้ซ่อนข้อความเดิม แต่จะพา padding/ไอคอนหายไปด้วย
     จึงต้องกำหนดค่ากลับเป็นหน่วย px ตายตัว */
  font-size: 0 !important;
  padding: 16px 20px 16px 52px !important;
  min-height: 56px;
  display: flex;
  align-items: center;
}
body.theme-wplms.woocommerce-checkout .woocommerce-info::before,
body.theme-wplms.woocommerce-account .woocommerce-info::before {
  font-size: 18px !important;
  top: 50% !important;
  transform: translateY(-50%);
  left: 20px !important;
}
body.theme-wplms.woocommerce-checkout .woocommerce-info::after,
body.theme-wplms.woocommerce-account .woocommerce-info::after {
  content: 'เข้าสู่ระบบด้วย LINE เพื่อสั่งซื้อต่อ';
  font-size: var(--ck-fs-body);
  font-weight: 600;
}

/* จำนวนผลลัพธ์ในหน้ารวมคอร์ส · เดิม "Showing all 3 results" */
body.theme-wplms.tax-product_cat .woocommerce-result-count {
  font-size: 0 !important;
}
body.theme-wplms.tax-product_cat .woocommerce-result-count::after {
  content: 'ทั้งหมด 3 คอร์ส';
  font-size: var(--ck-fs-caption);
  color: var(--ck-ink-60);
}

/* ---------- P2: CTA บนมือถือ ----------
   ทำแถบราคา+ปุ่มติดล่างจอ โดยตรึง .price กับ form.cart แยกกันแล้ววางชิดกัน
   (CSS สร้าง DOM ใหม่ไม่ได้ จึงใช้ของที่มีอยู่จริงสองชิ้น) */
@media (max-width: 700px) {
  body.theme-wplms.single-product {
    padding-bottom: 92px;
  }

  body.theme-wplms.single-product .summary p.price {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 61;
    width: 42%;
    margin: 0;
    padding: 10px 6px 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    min-height: 76px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    background: #fff;
  }
  body.theme-wplms.single-product .summary p.price ins,
  body.theme-wplms.single-product .summary p.price ins .amount,
  body.theme-wplms.single-product .summary p.price ins bdi {
    font-size: 28px;   /* ตามสเกลมือถือใน DESIGN-PLAN P3 (เดิมเขียนไว้ 26px) */
  }
  body.theme-wplms.single-product .summary p.price del,
  body.theme-wplms.single-product .summary p.price del .amount,
  body.theme-wplms.single-product .summary p.price del bdi {
    font-size: 14px;
  }

  body.theme-wplms.single-product form.cart {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: 58%;
    margin: 0;
    padding: 10px 16px 10px 6px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: var(--ck-sp-1);
    background: #fff;
  }

  /* เงาของแถบล่าง · เดิมใส่ box-shadow ไว้ทั้งสองกล่อง
     box-shadow ฟุ้งออกทุกด้าน ไม่ใช่แค่ด้านบน และ form.cart อยู่หลัง p.price ใน DOM
     จึงทาเงาด้านซ้ายของตัวเองลงบนพื้นขาวของกล่องราคา เห็นเป็นรอยต่อกลางแถบ
     (ลูกค้าแจ้ง 2026-08-18 · ไม่ได้ตั้งใจ)
     ถอดเงาออกทั้งคู่ แล้ววาดเส้นเงาเส้นเดียวพาดเต็มความกว้างเหนือแถบด้วย ::before
     ยืดซ้ายเลยขอบจอ (-100vw) ให้คลุมกล่องราคาที่อยู่ก่อนหน้าใน DOM ด้วย */
  body.theme-wplms.single-product form.cart::before {
    content: "";
    position: absolute;
    left: -100vw;
    right: 0;
    top: 0;
    height: 14px;
    transform: translateY(-100%);
    background: linear-gradient(to top, rgba(34, 34, 34, .12), rgba(34, 34, 34, 0));
    pointer-events: none;
  }

  /* ธีมทำ quantity เป็น <input type="hidden" value="1"> อยู่แล้ว (คอร์สซื้อทีละ 1)
     เหลือแต่กล่องเปล่ากินที่ 56px · ยุบทิ้งให้ปุ่มเต็มแถบ
     (display:none ไม่กระทบการส่งฟอร์ม hidden input ยังถูกส่งตามปกติ) */
  body.theme-wplms.single-product form.cart .quantity {
    display: none;
  }
  body.theme-wplms button.single_add_to_cart_button.button.alt {
    flex: 1;
    width: 100%;
    padding: 13px 10px !important;
    min-height: 52px;
  }

  /* ปุ่มตะกร้าลอยจะซ้อนแถบล่าง · ซ่อนเฉพาะหน้าสินค้าเดี่ยว
     (แถบล่างทำหน้าที่แทนแล้ว) กันปัญหา fixed element ซ้อนกัน */
  body.theme-wplms.single-product .xoo-wsc-basket {
    display: none !important;
  }

  /* type scale บนมือถือ */
  body.theme-wplms.single-product h1.product_title,
  body.theme-wplms.single-product h1.product_title.entry-title {
    font-size: 24px !important;
  }
  .theme-wplms .productsidebar .widget h4.widget_title,
  .theme-wplms .connected_courses h6::after,
  .theme-wplms .woocommerce-tabs ul.wc-tabs li a {
    font-size: var(--ck-fs-body) !important;   /* เดิม 17px ไม่อยู่ใน 5 ระดับ */
  }
}

/* ---------- P3 (ต่อ): ดึงตัวที่ยังหลุดสเกลเข้าระบบ ----------
   สเกลสุดท้าย 32 / 30 / 19 / 16 / 13 · ตัวเลขอื่นถือว่าหลุด
   ธีมและปลั๊กอินตั้งค่ามาด้วย specificity สูง จึงต้องตาม !important เป็นจุดๆ */

/* เมนูหลัก เดิม 20px ใหญ่เกินสำหรับ nav */
.theme-wplms header.sleek nav .menu > li > a {
  font-size: var(--ck-fs-body) !important;
}

/* ลิงก์คอร์สในกล่อง "คอร์สที่รวมอยู่" เดิม 18px */
.theme-wplms .connected_courses ul li a {
  font-size: var(--ck-fs-body) !important;
}

/* เมนูหมวดใน sidebar · ใช้ขนาด body ให้อยู่ในสเกล (เล็กกว่าราคา 2 เท่าอยู่แล้ว) */
.theme-wplms .productsidebar .widget ul.menu li a,
.theme-wplms .sidebar .widget ul li a {
  font-size: var(--ck-fs-body) !important;
}

/* ราคาเดิม (ขีดฆ่า) */
body.theme-wplms.single-product .summary p.price del,
body.theme-wplms.single-product .summary p.price del .amount,
body.theme-wplms.single-product .summary p.price del bdi,
body.theme-wplms.single-product .summary p.price del .woocommerce-Price-currencySymbol {
  font-size: var(--ck-fs-body) !important;
}

/* ปุ่มในตะกร้าสไลด์ */
.xoo-wsc-modal .xoo-wsc-ft-btn,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-continue,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-cart,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-checkout {
  font-size: var(--ck-fs-body) !important;
}

/* ป้ายเล็ก = caption 13px */
.theme-wplms .topmenu .vbplogin,
.theme-wplms #scrolltop span,
.theme-wplms .xoo-wscb-count,
.theme-wplms .ck-cart__n {
  font-size: var(--ck-fs-caption) !important;
}

@media (max-width: 700px) {
  /* ในแถบล่าง ราคาเดิมย่อลงให้พอดีช่อง */
  body.theme-wplms.single-product .summary p.price del,
  body.theme-wplms.single-product .summary p.price del .amount,
  body.theme-wplms.single-product .summary p.price del bdi,
  body.theme-wplms.single-product .summary p.price del .woocommerce-Price-currencySymbol {
    font-size: var(--ck-fs-caption) !important;
  }
}

/* เมนูสไลด์มือถือ (.pagesidebar > ul.sidemenu) เดิม 20px · คนละชุดกับเมนูหลักบน header */
.theme-wplms .pagesidebar ul.sidemenu li a {
  font-size: var(--ck-fs-body) !important;
  padding: 10px 4px;
}
.theme-wplms .pagesidebar ul.sidemenu .sub-menu li a {
  font-size: var(--ck-fs-caption) !important;
}

/* ตะกร้าสไลด์: หัวข้อและข้อความว่าง ยังหลุดสเกล (20px / 15px) */
/* ไม่แตะ .xoo-wsch-basket (ไอคอนถุง+ตัวเลข) · ย่อ font-size แล้วถุงจะเล็กจนเลขหลุดกึ่งกลาง */
.xoo-wsc-modal .xoo-wsc-header,
.xoo-wsc-modal .xoo-wsc-basket-name,
.xoo-wsc-modal .xoo-wsc-cart-title,
.xoo-wsc-modal .xoo-wsc-header > span:not(.xoo-wsch-basket) {
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
}
.xoo-wsc-modal .xoo-wsc-empty-cart,
.xoo-wsc-modal .xoo-wsc-empty-cart span,
.xoo-wsc-modal .xoo-wsc-body a,
.xoo-wsc-modal a.xoo-wsc-btn {
  font-size: var(--ck-fs-body) !important;
}

/* ---------- P1–P5 (ต่อ): หน้าตะกร้า ----------
   rule ชุดแรกผูกกับ .single-product จึงยังไม่คุมตารางตะกร้า */

/* สีลิงก์/ราคาในตาราง เดิม #FF3452 บนขาว = 3.58 ต่ำกว่าเกณฑ์ 4.5 */
body.theme-wplms table.cart td.product-name a,
body.theme-wplms table.cart td.product-name {
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 600;
}
body.theme-wplms table.cart .amount,
body.theme-wplms table.cart .amount bdi,
body.theme-wplms .cart_totals .amount,
body.theme-wplms .cart_totals .amount bdi {
  color: var(--ck-price) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* หัวตาราง = caption */
body.theme-wplms table.cart th,
body.theme-wplms table.shop_table th {
  font-size: var(--ck-fs-caption) !important;
  font-weight: 700;
  color: var(--ck-ink-60) !important;
  text-transform: none;
}
body.theme-wplms table.cart td,
body.theme-wplms table.shop_table td {
  font-size: var(--ck-fs-body) !important;
}

/* ปุ่มลบสินค้า: 23×23 เล็กกว่าเกณฑ์ 44 และแดงสดเกินไป */
body.theme-wplms table.cart a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  font-size: var(--ck-fs-title) !important;
  line-height: 1 !important;
  border-radius: 50%;
  color: var(--ck-ink-40) !important;
  background: transparent !important;
  transition: background .15s, color .15s;
}
body.theme-wplms table.cart a.remove:hover {
  background: #F8DEDE !important;
  color: var(--ck-error) !important;
}

/* ชื่อหน้า = display 30px (เดิม 34px หลุดสเกล) */
body.theme-wplms section#title h1,
body.theme-wplms .pagetitle h1 {
  font-size: var(--ck-fs-display) !important;
}

/* ป้ายบรรทัดในกล่องยอดรวม */
body.theme-wplms .cart_totals th,
body.theme-wplms .cart_totals td {
  font-size: var(--ck-fs-body) !important;
}

/* ---------- P3 (ต่อ): เก็บตกหน้าตะกร้า/ตะกร้าสไลด์ ---------- */

/* สัญลักษณ์ ฿ อยู่ลึกกว่า .amount หนึ่งชั้น ต้องเจาะตรง */
body.theme-wplms .amount .woocommerce-Price-currencySymbol,
body.theme-wplms .amount bdi .woocommerce-Price-currencySymbol {
  font-size: inherit !important;
  color: inherit !important;
}

/* หัวข้อจาก page builder (H2.vc_custom_heading) เดิม 34px */
body.theme-wplms h2.vc_custom_heading {
  font-size: var(--ck-fs-display) !important;
  color: var(--ck-ink) !important;
}

/* ปุ่มทุกตัวใช้ขนาด body */
body.theme-wplms .button,
body.theme-wplms button[type="submit"],
body.theme-wplms input[type="submit"] {
  font-size: var(--ck-fs-body) !important;
}

/* ป้ายยอดรวมในตะกร้าสไลด์ */
.xoo-wsc-modal .xoo-wsc-ft-amt-label,
.xoo-wsc-modal .xoo-wsc-ft-amt-value {
  font-size: var(--ck-fs-body) !important;
}

/* ---------- P5 (ต่อ): touch target ในตารางตะกร้า ---------- */
body.theme-wplms table.cart td.product-name a,
body.theme-wplms table.cart td.product-thumbnail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- เก็บตกในตะกร้าสไลด์ (xoo-wsc) ---------- */

/* ราคารวมในตะกร้าสไลด์ยังใช้ #FF3452 (contrast 3.58) และ 18px */
.xoo-wsc-modal .xoo-wsc-ft-amt-value,
.xoo-wsc-modal .xoo-wsc-ft-amt-value .amount,
.xoo-wsc-modal .xoo-wsc-ft-amt-value .amount bdi,
.xoo-wsc-modal .xoo-wsc-ft-amt-value .woocommerce-Price-currencySymbol,
.xoo-wsc-modal .xoo-wsc-sm-info .amount,
.xoo-wsc-modal .xoo-wsc-sm-info .amount bdi,
.xoo-wsc-modal .xoo-wsc-sm-info .woocommerce-Price-currencySymbol {
  color: var(--ck-price) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ชื่อสินค้าในตะกร้าสไลด์: touch target 25px → 44px */
.xoo-wsc-modal .xoo-wsc-pname a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 600;
}

/* ---------- เก็บตกรอบสุดท้าย ---------- */

/* ปุ่ม LINE: ขนาดตัวอักษรเข้าสเกล
   หมายเหตุ contrast · ขาวบนเขียว LINE #06C755 ได้ 2.26 ไม่ผ่าน WCAG AA
   ลูกค้าตัดสินแล้ว (2026-08-16): คงสีแบรนด์ LINE ไว้ เพราะการรู้จำแบรนด์สำคัญกว่า
   เป็นข้อยกเว้นเดียวของทั้งเว็บ อย่าแก้สีนี้โดยไม่ถามลูกค้าก่อน */
.theme-wplms a.btn-line,
.theme-wplms a.btn-line span {
  font-size: var(--ck-fs-body) !important;
}

/* ============================================================
   14. ป้ายอายุคอร์ส + ปุ่มเข้าสู่ระบบ
   ============================================================ */

/* ---------- ป้ายอายุคอร์ส (P6 ข้อที่ลูกค้าอนุมัติเพิ่มภายหลัง) ----------
   ธีมไม่มี class บอกอายุคอร์ส (ไม่มี product_cat-1m/3m/6m) เกาะได้แค่ post id
   >> production: ทำเป็น "คุณลักษณะสินค้า (attribute)" ของ WooCommerce ชื่อ "ระยะเวลาเรียน"
      แล้วให้ธีมพิมพ์ออกมา จะได้ผูกกับสินค้าทุกตัวอัตโนมัติ ไม่ต้องไล่เขียน id ทีละตัว */

/* หน้าสินค้าเดี่ยว · ป้ายนี้ถูกยกเลิกแล้ว (ลูกค้าอนุมัติ 2026-08-18)
   ข้อมูลเดียวกันย้ายไปอยู่ในช่อง "อายุคอร์สเรียน" ของแถวสถิติ 3 ช่อง (ดูข้อ 30)
   ถ้าไม่เอาป้ายออก หน้าสินค้าจะบอกอายุคอร์สซ้ำสองที่ติดกัน
   หน้ารวมคอร์สยังใช้ป้ายอยู่ (ด้านล่าง) เพราะไม่มีที่พอสำหรับแถวสถิติ */

/* หน้ารวมคอร์ส · ป้ายนี้ย้ายไปอยู่ข้อ 31.4 แล้ว (2026-08-19)
   เหตุผลที่ต้องย้าย: ข้อ 31.3 ทำให้ `.price` เป็น flex container
   ::after ของมันจึงกลายเป็น flex item ต่อท้ายตัวเลขในบรรทัดเดียวกัน ไม่ใช่ป้ายใต้ราคา
   ป้ายใหม่เกาะ li::before แทน และเปลี่ยนคำเป็น "อายุคอร์ส" ให้ตรงกับหน้าสินค้าเดี่ยว */

/* ---------- ปุ่มเข้าสู่ระบบบน navbar ----------
   เดิมเป็นเหลืองทึบ = สีเดียวกับปุ่ม "หยิบใส่ตะกร้า" ซึ่งเป็น action หลักของหน้า
   ปุ่ม login เป็นงานรอง ไม่ควรแย่งน้ำหนักกับปุ่มซื้อ → ปรับเป็น secondary
   และเปลี่ยน LOGIN (อังกฤษ ตัวพิมพ์ใหญ่ล้วน) เป็นไทย */
.theme-wplms .topmenu .vbplogin {
  background: #fff !important;
  border: 2px solid var(--ck-ink-10) !important;
  color: var(--ck-ink) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0;
}
.theme-wplms .topmenu .vbplogin:hover {
  background: var(--ck-cream) !important;
  border-color: var(--ck-orange) !important;
}
.theme-wplms .topmenu .vbplogin span {
  font-size: 0 !important;
}
.theme-wplms .topmenu .vbplogin span::after {
  content: 'เข้าสู่ระบบ';
  font-size: var(--ck-fs-caption);
  font-weight: 700;
}

/* ============================================================
   15. เก็บงานรอบตรวจหน้าตะกร้า / ปุ่ม LINE / footer
   ============================================================ */

/* ---------- 15.1 คำโปรยใต้ชื่อหน้าเป็นสีขาวบนพื้นครีม = มองไม่เห็น ---------- */
.theme-wplms .pagetitle h5,
.theme-wplms section#title h5,
.theme-wplms .pagetitle h2,
.theme-wplms .pagetitle h3 {
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 500;
  margin: var(--ck-sp-1) 0 0;
}

/* ---------- 15.2 จัด layout + ช่องไฟตารางตะกร้า ---------- */
body.theme-wplms table.cart {
  border-collapse: separate;
  border-spacing: 0;
  padding: var(--ck-sp-1) var(--ck-sp-2);
}
body.theme-wplms table.cart th {
  padding: var(--ck-sp-2) var(--ck-sp-1) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--ck-ink-10) !important;
}
body.theme-wplms table.cart td {
  padding: var(--ck-sp-2) var(--ck-sp-1) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ck-ink-10) !important;
  vertical-align: middle;
}
body.theme-wplms table.cart tr:last-child td {
  border-bottom: 0 !important;
}
/* รูปสินค้าในตะกร้า */
body.theme-wplms table.cart td.product-thumbnail img {
  border-radius: 14px;
  width: 72px;
  height: auto;
  box-shadow: var(--ck-sh-card);
}
/* แถวปุ่มคูปอง/ปรับปรุง */
body.theme-wplms table.cart td.actions {
  padding: var(--ck-sp-3) var(--ck-sp-1) !important;
}
body.theme-wplms table.cart td.actions .coupon {
  display: inline-flex;
  gap: var(--ck-sp-1);
  align-items: center;
}
body.theme-wplms table.cart td.actions .coupon input {
  min-height: 44px;
  margin: 0 !important;
}

/* ---------- 15.3 กล่องยอดรวม: ลบกรอบเทาเหลี่ยม ทำเป็นการ์ดชุดเดียวกัน ---------- */
body.theme-wplms .cart-collaterals {
  border: 0 !important;
  border-radius: var(--ck-r);
  background: #fff;
  box-shadow: var(--ck-sh-card);
  padding: var(--ck-sp-3) var(--ck-sp-3) var(--ck-sp-2);
  overflow: hidden;
}
/* ตารางในกล่องยอดรวมไม่ต้องมีการ์ดซ้อนการ์ด */
body.theme-wplms .cart-collaterals table.shop_table {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: var(--ck-sp-2);
}
body.theme-wplms .cart_totals th,
body.theme-wplms .cart_totals td {
  border: 0 !important;
  border-bottom: 1px dashed var(--ck-ink-10) !important;
  padding: 12px 0 !important;
}
body.theme-wplms .cart_totals tr:last-child th,
body.theme-wplms .cart_totals tr:last-child td {
  border-bottom: 0 !important;
}
body.theme-wplms .cart_totals .order-total th,
body.theme-wplms .cart_totals .order-total td {
  font-weight: 700;
}
body.theme-wplms .wc-proceed-to-checkout {
  padding: 0 !important;
}
body.theme-wplms a.checkout-button.button.alt {
  display: flex !important;
  width: 100%;
}

/* ---------- 15.4 ปุ่ม LINE: คำตกบรรทัด (theme ตั้ง line-height 40px) ---------- */
.theme-wplms a.btn-line {
  white-space: nowrap;
  width: auto !important;
  max-width: 100%;
  line-height: 1.4 !important;
  margin-left: auto;
  margin-right: auto;
}
.theme-wplms a.btn-line span {
  line-height: 1.4 !important;
  white-space: nowrap;
}
/* กล่องหุ้มปุ่ม LINE ให้จัดกึ่งกลางเสมอ */
.theme-wplms .wpdt-line-connect {
  text-align: center !important;
}

/* ---------- 15.5 (ยกเลิก) ----------
   ตรวจกับเว็บจริงแล้ว ธีมซ่อนปุ่ม -checkout อยู่ ปุ่มที่เห็นจริงมีแค่ 2
   จึงไม่มีปัญหาคำซ้ำ และไม่ต้องเปลี่ยนคำ · ดูข้อ 15.10 */

/* ---------- 15.6 เลขจำนวนสินค้าหลุดออกนอกไอคอนตะกร้า ----------
   ปลั๊กอินตั้งทั้ง left และ right พร้อมกัน เบราว์เซอร์เลยใช้ left → ป้ายไปอยู่นอกซ้ายบน */
.xoo-wsc-basket .xoo-wsc-items-count {
  left: auto !important;
  right: -2px !important;
  top: -2px !important;
  bottom: auto !important;
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  padding: 0 !important;
  border: 2px solid #fff;
}

/* ---------- 15.7 รูปโซเชียล footer ถูกบีบ ----------
   รูป doodle ชุดใหม่เป็น 1000×277 (อัตราส่วน 3.61) แต่ <img> ยังมี width/height
   ของรูปเดิมติดมา (อัตราส่วน ~5.9) เบราว์เซอร์จึงคำนวณ aspect-ratio จาก attribute เก่า
   ต้องสั่ง aspect-ratio: auto ให้ใช้สัดส่วนจริงของรูปที่สลับเข้ามา */

/* ---------- 15.8 คืนพฤติกรรมมือถือของธีมที่ override ไปโดยไม่ตั้งใจ ----------
   เทียบกับเว็บจริงแล้วพบว่า
   - ธีมซ่อนไอคอนตะกร้าบน header ตอนมือถือ (มีปุ่มตะกร้าลอยทำหน้าที่แทนแล้ว)
     แต่ rule ของผมใช้ display:inline-flex !important แบบไม่จำกัดจอ เลยไปบังคับให้โผล่ จนแถบแน่น
   - เมนูสไลด์ของธีมใช้ padding: 15px 0 15px 30px แต่ rule ของผมทับเหลือ 10px 4px
     ข้อความเลยชิดขอบจอ */

@media (max-width: 991px) {
  .theme-wplms .topmenu .vbpcart {
    display: none !important;
  }
  .theme-wplms .topmenu .vbplogin {
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: var(--ck-fs-caption);
  }
  /* ปุ่มเข้าสู่ระบบควรอยู่ติดกลุ่มเดียวกับ burger (ของเดิมห่างกันแค่ 6px)
     ไม่ใช่ลอยกลางแล้วเว้น 65px */
  .theme-wplms .topmenu {
    align-items: center;
    justify-content: flex-end;
    padding-right: 0 !important;
    margin-right: 0 !important;   /* ธีมตั้ง 40px ไว้ ทำให้ปุ่มลอยห่าง burger */
  }
  /* เมนูสไลด์: คืนช่องไฟซ้ายของธีม */
  .theme-wplms .pagesidebar ul.sidemenu li a {
    padding: 14px 20px 14px 30px !important;
  }
  .theme-wplms .pagesidebar ul.sidemenu .sub-menu li a {
    padding-left: 46px !important;
  }
  /* ปุ่มปิดเมนู ให้ชิดขวาแบบทั่วไป ไม่ลอยกลาง */
  .theme-wplms .pagesidebar #close_menu_sidebar {
    display: block;
    text-align: right;
    padding: var(--ck-sp-2) var(--ck-sp-3);
  }
}

/* ---------- 15.9 มือถือ: จัดแถว header ให้อยู่บรรทัดเดียว + คืน padding กล่องยอดรวม ----------
   ปุ่ม burger (#trigger) เป็น position:absolute ที่ธีมคำนวณจาก header สูง 100px
   พอผมลดความสูงเหลือ 78px มันเลยตกไปอยู่บรรทัดล่างของปุ่มเข้าสู่ระบบ */
@media (max-width: 991px) {
  .theme-wplms header.sleek .container > .row {
    display: flex;
    align-items: center;
    min-height: 64px;
  }
  .theme-wplms header.sleek .col-md-9 {
    float: none;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }
  .theme-wplms header.sleek .col-md-3 {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;          /* ไม่ให้กินพื้นที่เกินเนื้อหา ไม่งั้นโลโก้ฝั่งซ้ายจะไม่พอ */
    width: auto !important;
    padding-right: 46px !important;   /* burger 24 + ระยะ 7 + ขอบจอ 15 */
  }
  .theme-wplms header.sleek #logo a {
    margin-top: 0;
  }
  .theme-wplms header.sleek #trigger {
    top: 50% !important;
    bottom: auto !important;
    right: 15px !important;
    left: auto !important;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
  }

  /* กล่องยอดรวมบนมือถือ padding หายไป ตัวเลขเลยชิดขอบการ์ด */
  body.theme-wplms .cart-collaterals {
    padding: var(--ck-sp-2) var(--ck-sp-2) var(--ck-sp-2) !important;
  }
  body.theme-wplms .cart-collaterals table.shop_table {
    width: 100%;
    table-layout: fixed;
  }
  body.theme-wplms .cart_totals td {
    text-align: right;
    word-break: normal;
  }
}

/* ============================================================
   16. แก้จุดที่เผลอ override พฤติกรรมเดิมของธีม/ปลั๊กอิน
   บทเรียน: ก่อนตั้ง display/position ทับ ต้องเทียบ pages-before ก่อนเสมอ
   ============================================================ */

/* ---------- 16.1 ตะกร้าสไลด์ต้องมี 2 ปุ่มเหมือนเดิม ----------
   ธีมซ่อน .xoo-wsc-ft-btn-checkout ไว้ (display:none)
   rule ของผมตั้ง display:inline-flex แบบรวม เลยไปเปิดปุ่มที่ 3 ขึ้นมา */
.xoo-wsc-modal .xoo-wsc-ft-btn-checkout,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-checkout {
  display: none !important;
}
/* ปุ่มที่เหลือใช้จริง 2 ปุ่ม · "ดำเนินการต่อ" เป็น action หลัก จึงเป็นเหลือง */
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-cart {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  box-shadow: 0 3px 12px rgba(34, 34, 34, .16) !important;
}
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-cart:hover {
  background: #FFCF47 !important;
  color: var(--ck-ink) !important;
}

/* ---------- 16.2 เลขจำนวนในไอคอนหัวแผงตะกร้า ----------
   .xoo-wscb-count เป็นตัวเลขที่อยู่ "ในถุง" (คนละตัวกับ badge ปุ่มลอย)
   rule .xoo-wsc-header span ของผมไปเปลี่ยนขนาดจนหลุดกึ่งกลางถุง */
.xoo-wsc-modal .xoo-wsch-basket .xoo-wscb-count,
.xoo-wsc-modal .xoo-wsc-header .xoo-wscb-count {
  font-size: 15px !important;
  font-weight: 700 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  text-align: center;
  color: var(--ck-ink) !important;
}

/* ---------- 16.3 รูปการ์ดคอร์สมีช่องว่างซ้าย-ขวา ----------
   ธีมใส่ padding: 0 10px + margin-bottom: 20px ให้ <img> ในการ์ด
   ทำให้รูปไม่เต็มการ์ด (เห็นชัดบนมือถือ)

   มุมรูป: **ต้องเป็น 0 และต้อง !important** (แก้ 2026-08-19 · ลูกค้าแจ้งว่ามุมแนบไม่สนิท)
   ธีมยิง `.woocommerce ul.products li.product img{border-radius:25px!important}` ไว้ที่ตัว <img> เอง
   ขณะที่การ์ดโค้ง 19.6px (--ck-r 1.4rem) และตัดด้วย overflow:hidden
   ผลคือมุมโค้งสองชั้นซ้อนกันคนละรัศมี · มุมบนเห็นเป็นรอยขาวบาง ๆ ระหว่างโค้ง 25 ของรูป
   กับโค้ง 19.6 ที่การ์ดตัด ส่วนมุมล่างของรูปโค้ง 25px ค้างอยู่กลางการ์ดทั้งที่ตรงนั้นไม่ใช่ขอบ
   ให้รูปมุมตรง แล้วปล่อยให้การ์ดเป็นคนตัดมุมคนเดียว มุมจะตรงกันเป๊ะเสมอ
   (ปัญหาเดียวกับข้อ 29.11 จ ของการ์ดคอร์สใน BuddyPress · คนละที่แต่รากเดียวกัน)
   ⚠️ ต้อง !important เพราะกฎธีมมี !important อยู่ selector เราชนะเฉพาะ specificity ยังไม่พอ

   ⚠️ **ยังเหลืออีกชั้นที่ CSS แก้ไม่ได้** · ไฟล์ปกเองก็โค้งมุมมาในไฟล์ (มุมทั้ง 4 โปร่งใส
   วัดจาก ABC68-1M-Cover.png 600×600 ได้ ~33px = 5.5% ของด้าน)
   มุมบนไม่เห็นเพราะการ์ดตัดทับพอดี แต่มุมล่างของรูปอยู่กลางการ์ดขาว ไม่มีอะไรไปตัด
   ลองแก้ด้วย CSS แล้วสองทาง (ดันรูปล้นออกข้างละ 18px / ครอปล่าง 5%) ทั้งคู่กินป้าย 1M กับโลโก้
   >> ลูกค้าเลือก 2026-08-19: คงหน้าตาเต็มขอบไว้ แล้วขอไฟล์ปกมุมตรงจากกราฟิก
      รายละเอียดสเปกอยู่ใน handoff/HANDOFF.md ข้อ 17 · พออัปโหลดทับแล้วไม่ต้องแก้ CSS อะไรเพิ่ม */
body.theme-wplms ul.products li.product img {
  padding: 0 !important;
  margin: 0 0 var(--ck-sp-2) !important;
  border-radius: 0 !important;
  width: 100%;
}

/* ---------- 16.4 ปุ่ม LINE จัดกึ่งกลางทุกหน้า ----------
   หน้า login กล่องหุ้มเป็น text-align: start ปุ่มเลยชิดซ้าย
   ใช้ margin auto ไม่ได้เพราะปุ่มเป็น inline-flex → เปลี่ยนเป็น flex + fit-content */
.theme-wplms a.btn-line {
  display: flex !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 17. contrast ของสีจาง (ตรวจใหม่โดยคิด alpha ของตัวอักษร) ----------
   --ck-ink-40 (alpha .38) ให้ contrast แค่ ~2.3 เมื่อทับพื้นขาว/ครีม
   จึงใช้กับ "เส้นขอบ/เส้นคั่น" เท่านั้น ห้ามใช้กับตัวอักษรหรือไอคอนที่สื่อความหมาย */

/* ราคาเดิม (ขีดฆ่า) ยังเป็นข้อมูลที่ผู้ซื้อต้องอ่าน ต้องผ่าน 4.5 */
body.theme-wplms .price del,
body.theme-wplms .price del .amount,
body.theme-wplms .price del bdi,
body.theme-wplms .price del .woocommerce-Price-currencySymbol,
body.theme-wplms.single-product .summary p.price del,
body.theme-wplms.single-product .summary p.price del .amount,
body.theme-wplms.single-product .summary p.price del bdi,
body.theme-wplms.single-product .summary p.price del .woocommerce-Price-currencySymbol {
  color: var(--ck-ink-60) !important;
}

/* ปุ่มลบสินค้าเป็นไอคอนควบคุม ต้องผ่าน 3:1 */
body.theme-wplms table.cart a.remove {
  color: var(--ck-ink-60) !important;
}

/* ---------- 18. footer มือถือ: ให้ pill โซเชียลเต็มคอลัมน์แบบ .com ----------
   ธีม wplms กินความกว้างไป 50px ต่อคอลัมน์ (.vc_column-inner 15+15 · .wpb_single_image 10+10)
   รูปเลยเหลือ 140px ในคอลัมน์ 190px ช่องว่างรอบๆ จึงดูเยอะเกินจริง
   เทียบ .com บนจอเดียวกัน: pill กว้าง 182px เต็มคอลัมน์พอดี */
@media (max-width: 767px) {
  .theme-wplms #Wiefooter .vc_column-inner {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .theme-wplms #Wiefooter .wpb_single_image {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }
  /* ระยะระหว่างแถว: ธีมมีระยะฐานอยู่ 31px เติมอีก 4px ให้ได้ 35px เท่า .com
     (.com วัดได้ pill สูง 50 · ระยะแถวถึงแถว 85 → ช่องว่าง 35) */
  .theme-wplms #Wiefooter .vc_row.vc_inner {
    margin-bottom: 0 !important;
  }
  .theme-wplms #Wiefooter .vc_row.vc_inner .wpb_column {
    margin-bottom: 4px !important;
  }
}

/* ============================================================
   19. หน้าตะกร้า: คืนสัดส่วนคอลัมน์ + padding ที่ถูก override
   เทียบกับ pages-before ที่ 1440px แล้วพบว่า
   - คอลัมน์ปุ่มลบ (ว่าง) พองจาก 61px → 237px และชื่อสินค้าหดจาก 418px → 249px
     เพราะ border-collapse: separate ที่ผมตั้ง ทำให้การกระจายความกว้างเปลี่ยนไป
   - .cart-collaterals padding โดน stylesheet ของธีม (cross-origin อ่านไม่ได้) ทับเป็น 0
   ============================================================ */

/* ---------- 19.1 สัดส่วนคอลัมน์ตามของเดิม (820px: 61 / 184 / 418 / 156) ----------
   ต้องใช้ table-layout: fixed ไม่งั้น % เป็นแค่คำแนะนำ เบราว์เซอร์จะกระจายตามเนื้อหาเอง */
@media (min-width: 768px) {
  body.theme-wplms table.cart {
    table-layout: fixed;
    width: 100%;
  }
}

@media (min-width: 768px) {
  body.theme-wplms table.cart th.product-remove,
  body.theme-wplms table.cart td.product-remove { width: 7.5% !important; }

  body.theme-wplms table.cart th.product-thumbnail,
  body.theme-wplms table.cart td.product-thumbnail { width: 22% !important; }

  body.theme-wplms table.cart th.product-name,
  body.theme-wplms table.cart td.product-name { width: 51% !important; }

  body.theme-wplms table.cart th.product-price,
  body.theme-wplms table.cart td.product-price { width: 19% !important; text-align: right; }
}

/* ---------- 19.2 padding ที่ต้องบังคับ ---------- */
body.theme-wplms .cart-collaterals {
  padding: var(--ck-sp-3) !important;
}
/* ตารางยอดรวมไม่ต้องมี padding ของตัวเอง (ธีมใส่ 10px) การ์ดคุมระยะแล้ว */
body.theme-wplms .cart_totals table.shop_table {
  padding: 0 !important;
  width: 100%;
}

/* ---------- 19.3 มือถือ: ตารางกลายเป็นการ์ดแถวเดียว ไม่ต้องใช้สัดส่วนคอลัมน์ ---------- */
@media (max-width: 767px) {
  /* ห้ามตั้ง width: auto ทับ · ธีมใช้ table-layout: fixed พร้อมความกว้างของมันเอง
     (19 / 46 / 135 / 19) ถ้าล้างทิ้ง เบราว์เซอร์จะหาร 4 คอลัมน์เท่ากัน ชื่อสินค้าจะตก 5 บรรทัด */

  /* ช่องไฟแนวนอนของ page builder ซ้อนกัน 3 ชั้น กินไป 120px จาก 379px
     ลดลงเฉพาะหน้าตะกร้าบนมือถือ ให้การ์ดกว้างขึ้น */
  body.theme-wplms.woocommerce-cart .vc_row.wpb_row.vc_inner {
    padding: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.theme-wplms.woocommerce-cart .vc_column-inner {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.theme-wplms table.cart {
    padding: var(--ck-sp-1) 0 !important;
  }
  body.theme-wplms .cart-collaterals {
    padding: var(--ck-sp-2) !important;
  }
}

/* ---------- 19.4 ปุ่ม "ปรับปรุงสินค้าในตะกร้า" ต้องซ่อนตามเดิม ----------
   ธีมตั้ง display:none + disabled ไว้ (ร้านซื้อได้ 1 ชิ้น จึงไม่มีอะไรให้ปรับปรุง)
   แต่ rule ฐานของผม `.button { display: inline-flex }` ไปเปิดมันขึ้นมา
   >> เหตุผลเดียวกับปุ่มที่ 3 ในตะกร้าสไลด์ และไอคอนตะกร้าบนมือถือ */
body.theme-wplms table.cart td.actions .button[name="update_cart"],
body.theme-wplms table.cart td.actions button[name="update_cart"],
body.theme-wplms table.cart td.actions input[name="update_cart"] {
  display: none !important;
}

/* ---------- 19.5 ปุ่มในตะกร้าสไลด์ยาวไม่เท่ากัน ----------
   ปลั๊กอินตั้ง margin ไม่สมมาตร: -continue = 10px 10px 10px 0 · -cart = 10px
   ปุ่มเป็น block-level ใน footer ที่ display:block ความกว้างจึงต่างกัน 10px (270 vs 260)
   (ของเดิมก็เป็นแบบนี้ ไม่ใช่ของที่ผมทำ แต่ควรเก็บให้เรียบร้อย) */
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-btn,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-continue,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-cart {
  width: 100% !important;
  margin: 0 0 10px !important;
}
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-btn:last-child,
a.xoo-wsc-ft-btn.button.btn.xoo-wsc-ft-btn-cart:last-child {
  margin-bottom: 0 !important;
}

/* ============================================================
   20. หน้าตะกร้าบนมือถือ: ช่องไฟระหว่าง section + เซลล์ที่ไม่เต็มความกว้าง
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- 20.1 คอลัมน์รวมกันได้แค่ 219px จาก 327px เหลือที่ว่างขวา 73px ----------
     ธีมใช้ table-layout: fixed พร้อมความกว้างคงที่ (19/46/135/19) ซึ่งออกแบบมาสำหรับจอแคบกว่านี้
     ตั้งเป็น % ให้รวมกันครบ 100% เนื้อหาจะเต็มการ์ด ไม่เอียงไปทางซ้าย */
  body.theme-wplms table.cart th.product-remove,
  body.theme-wplms table.cart td.product-remove { width: 12% !important; }

  body.theme-wplms table.cart th.product-thumbnail,
  body.theme-wplms table.cart td.product-thumbnail { width: 18% !important; }

  body.theme-wplms table.cart th.product-name,
  body.theme-wplms table.cart td.product-name { width: 47% !important; }

  body.theme-wplms table.cart th.product-price,
  body.theme-wplms table.cart td.product-price {
    width: 23% !important;
    text-align: right !important;
  }
  body.theme-wplms table.cart td.product-thumbnail img {
    width: 44px !important;
  }

  /* ---------- 20.2 ช่องไฟระหว่าง section (วัดได้ 52 / 77px บนจอ 390) ---------- */
  body.theme-wplms.woocommerce-cart .vc_row.wpb_row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body.theme-wplms.woocommerce-cart .vc_row.wpb_row > .wpb_column {
    margin-bottom: 0 !important;
  }
  /* .vc_empty_space เป็นตัวเว้นวรรคของ page builder ที่ซ้อนกับ margin ของการ์ดอยู่แล้ว
     บนมือถือให้ยุบทิ้ง ปล่อยให้ margin ของการ์ดคุมระยะที่เดียว */
  body.theme-wplms.woocommerce-cart .vc_empty_space {
    height: 0 !important;
  }
  body.theme-wplms.woocommerce-cart h2.vc_custom_heading {
    margin: var(--ck-sp-3) 0 var(--ck-sp-2) !important;
  }
  body.theme-wplms.woocommerce-cart .cart-collaterals {
    margin-top: var(--ck-sp-2) !important;
    margin-bottom: 0 !important;
  }
  body.theme-wplms.woocommerce-cart .woocommerce-cart-form {
    margin-bottom: 0 !important;
  }
  /* แถวสุดท้ายก่อน footer และ padding ของแถว page builder */
  body.theme-wplms.woocommerce-cart .vc_row.wpb_row.vc_inner {
    padding-top: var(--ck-sp-1) !important;
    padding-bottom: var(--ck-sp-1) !important;
  }
  body.theme-wplms.woocommerce-cart section.main {
    padding-bottom: var(--ck-sp-3) !important;
  }
  .theme-wplms #Wiefooter {
    padding-top: var(--ck-sp-2) !important;
  }
}

/* ============================================================
   20. หน้าหลัง login  (7 หน้าใหม่ · เก็บจาก HTML จริงเมื่อ 2026-08-16)
   ครอบคลุม: ชำระเงิน · ยืนยันคำสั่งซื้อ · แจ้งโอน · ลงทะเบียนหนังสือ ·
             คอร์สเรียนของฉัน · โปรไฟล์ · หน้าคอร์ส · หน้าบทเรียน
   ============================================================ */

/* ---------- 20.0 แก้ของเดิมที่เพิ่งเห็นว่าผิดเมื่อ login แล้ว ----------

   ก) ปุ่ม navbar: ตอนยังไม่ login element นี้คือปุ่ม "LOGIN"
      แต่ **พอ login แล้วธีมใช้ element เดียวกันแสดงชื่อผู้ใช้**
      rule เดิม (font-size:0 + ::after 'เข้าสู่ระบบ') จึงกลืนชื่อผู้ใช้ไปทุกหน้า */
body.logged-in.theme-wplms .topmenu .vbplogin span {
  font-size: var(--ck-fs-caption) !important;
}
body.logged-in.theme-wplms .topmenu .vbplogin span::after {
  content: none !important;
}

/*    ข) ปุ่มที่มี <span> ข้างใน: ธีมตั้ง span{color:#fff} ไว้สำหรับปุ่มสีทึบ
      พอปุ่มกลายเป็น secondary (พื้นขาว) ตัวอักษรจึงขาวบนขาว = หายไปทั้งปุ่ม
      (เจอที่ปุ่ม "คอร์สหมดอายุ / ต่ออายุคอร์ส" ในหน้าคอร์สเรียนของฉัน) */
body.logged-in.theme-wplms .course_single_item a.button span,
body.logged-in.theme-wplms .course_single_item .button span {
  color: inherit !important;
}


/* ---------- 20.1 พื้นที่ผู้เรียนใช้พื้นเหลืองอิ่ม #FED557 ทั้งบล็อก ----------
   ทุกหน้าที่ผ่านมาเป็นครีม พอ login เข้ามาแล้วเจอเหลืองเต็มจอ = คนละเว็บ
   เปลี่ยนเป็นครีมเดียวกัน แล้วให้เนื้อหาเป็นการ์ดขาวลอยบนครีมเหมือนหน้าอื่น */
body.buddypress #buddypress #item-body,
body.page-template-start section#content,
body.page-template-start #unit_content {
  background: var(--ck-cream) !important;
}


/* ---------- 20.2 แถบซ้ายโปรไฟล์: เทาเข้ม #313B3D → การ์ดขาว ----------
   เทาเข้มไม่มีอยู่ในระบบสีของแบรนด์เลย และตัวอักษรบนแถบนี้ contrast ไม่ผ่าน
   (เมนูที่เลือกอยู่เป็นขาวบนเหลือง = 1.71) */
body.buddypress #buddypress #item-header,
body.buddypress #buddypress #object-nav {
  background: #fff !important;
}
body.buddypress #buddypress #item-header {
  border-radius: var(--ck-r) var(--ck-r) 0 0 !important;
  box-shadow: var(--ck-sh-card);
  padding-bottom: var(--ck-sp-2) !important;
}
body.buddypress #buddypress #object-nav {
  border-radius: 0 0 var(--ck-r) var(--ck-r) !important;
  box-shadow: var(--ck-sh-card);
  overflow: hidden;
}
/* ชื่อผู้ใช้ */
body.buddypress #buddypress #item-header #item-header-content h3,
body.buddypress #buddypress #item-header #item-header-content h3 a {
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
}
/* รูปโปรไฟล์: สี่เหลี่ยมเต็มกรอบ → วงกลมแบบเดียวกับที่ใช้บน navbar */
body.buddypress #buddypress #item-header-avatar img.avatar {
  border-radius: 50% !important;
  max-width: 120px;
  margin: var(--ck-sp-3) auto var(--ck-sp-1) !important;
  display: block;
}
/* เมนูโปรไฟล์ */
body.buddypress #buddypress #object-nav li a {
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
  padding: 14px var(--ck-sp-2) !important;
  min-height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-sp-1);
}
body.buddypress #buddypress #object-nav li.current a,
body.buddypress #buddypress #object-nav li.selected a {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
}
body.buddypress #buddypress #object-nav li a:hover {
  background: var(--ck-cream) !important;
}
/* ตัวเลขจำนวนคอร์สท้ายเมนู */
body.buddypress #buddypress #object-nav li a span {
  background: var(--ck-ink-10) !important;
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-caption) !important;
  border-radius: 999px;
  padding: 2px 10px;
  min-width: 26px;
  text-align: center;
}


/* ---------- 20.3 การ์ดคอร์สในหน้า "คอร์สเรียนของฉัน" ----------
   เดิมรูป+ตัวหนังสือลอยบนพื้นเหลืองไม่มีขอบเขตการ์ด อ่านเป็นกลุ่มไม่ออก
   และชื่อคอร์สเป็น #FF3452 บนเหลือง = contrast ไม่ผ่าน */
body.buddypress #buddypress #course-list li.course_single_item {
  background: #fff !important;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-card) !important;
  /* ขอบใสไว้ตั้งแต่ใบปกติ · ใบที่มีสถานะแค่เปลี่ยน border-color (ข้อ 35.1)
     การ์ดเป็น border-box ขนาดนอกจึงเท่ากันทุกใบ ไม่ว่าจะมีสถานะหรือไม่ */
  border: 2px solid transparent !important;
  overflow: hidden;
  padding: 0 0 var(--ck-sp-2) !important;
  margin-bottom: var(--ck-sp-3) !important;
}
/* รูปปกเต็มความกว้างการ์ด ไม่มีขอบขาวรอบ */
body.buddypress #buddypress #course-list li.course_single_item .course_thumbnail,
body.buddypress #buddypress #course-list li.course_single_item .course_thumbnail img {
  width: 100% !important;
  display: block;
  border-radius: 0 !important;
  margin: 0 !important;
}
/* ชื่อคอร์ส = หัวการ์ด 19px สีหมึก และเป็นพื้นที่กดขนาดพอ */
body.buddypress #buddypress #course-list .item-title a {
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
  display: block;
  padding: var(--ck-sp-2) var(--ck-sp-2) var(--ck-sp-1) !important;
  line-height: 1.45;
}
body.buddypress #buddypress #course-list .item-title a:hover {
  color: var(--ck-red) !important;
}
/* บรรทัดข้อมูลรอง (ความคืบหน้า / ชม.ที่เหลือ / วันหมดอายุ) = caption */
body.buddypress #buddypress #course-list li.course_single_item .row > div {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
  padding-left: var(--ck-sp-2) !important;
  padding-right: var(--ck-sp-2) !important;
}
/* ตัวเลข % และวันหมดอายุคือสิ่งที่ผู้เรียนมาดู ให้เด่นกว่าคำอธิบาย */
body.buddypress #buddypress #course-list li.course_single_item .row strong,
body.buddypress #buddypress #course-list li.course_single_item .row span[style] {
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
}
/* ปุ่มในการ์ด: กว้างเต็มการ์ด สูงพอกด */
body.buddypress #buddypress #course-list li.course_single_item .button,
body.buddypress #buddypress #course-list li.course_single_item input.course_button {
  display: block !important;
  width: calc(100% - var(--ck-sp-2) * 2) !important;
  margin: var(--ck-sp-1) var(--ck-sp-2) var(--ck-sp-2) !important;
  min-height: 44px;
  font-size: var(--ck-fs-body) !important;
}

/* กล่องรูปโปรไฟล์และแถบแท็บย่อยยังเป็นเหลืองอิ่มอยู่อีกสองจุด
   จุดนี้ธีมยิง <style> ไว้ใน body ซึ่งมาทีหลัง override.css ในลำดับเอกสาร
   !important อย่างเดียวจึงยังแพ้ ต้องเจาะ specificity ให้สูงกว่า (id 3 ตัว) */
html body.buddypress div#buddypress div#item-header div#item-header-avatar {
  background-color: #fff !important;
}
body.buddypress #buddypress #item-body #subnav.item-list-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--ck-ink-10) !important;
}
body.buddypress #buddypress #item-header #item-header-content h3 a {
  color: var(--ck-ink) !important;
}
/* แท็บย่อยที่เลือกอยู่ = ขีดเน้นปากกาไฮไลต์ (ลายเซ็นเดียวกับหัวข้อ section) */
body.buddypress #buddypress #item-body #subnav.item-list-tabs li.current a,
body.buddypress #buddypress #item-body #subnav.item-list-tabs li.selected a {
  background: linear-gradient(transparent 58%, var(--ck-yellow) 58%) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
  font-size: var(--ck-fs-title) !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
}


/* ---------- 20.4 หน้าบทเรียน (course-status) ----------
   FINDINGS 3.15.1: ไม่มีตัวบอกความคืบหน้าที่มองเห็นได้เลย
   ทำได้ด้วย CSS คือทำแถบ % ที่มีอยู่แล้วให้เห็นจริง + ชี้ว่ากำลังเรียนบทไหน */

/* ชื่อบทเรียน: 32px คือขนาดของ "ราคา" ในระบบ ไม่ใช่ของหัวข้อ → display 30px */
body.page-template-start #unit_content h1 {
  font-size: var(--ck-fs-display) !important;
  line-height: 1.3;
  margin-bottom: var(--ck-sp-2) !important;
}
/* ชื่อครูผู้สอน เดิม #BBBBBB บนพื้นเหลือง = contrast 1.79 มองแทบไม่เห็น */
body.page-template-start #unit_content .global strong,
body.page-template-start #unit_content .global span {
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-caption) !important;
}
/* กล่องรายการบทเรียน: กรอบดำ 2px → การ์ดขาวเงานุ่มเหมือนการ์ดอื่นทั้งเว็บ */
body.page-template-start .course_timeline {
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-card) !important;
  overflow: hidden;
}
body.page-template-start .course_timeline > ul {
  background: #fff !important;
  margin: 0 !important;
  padding: var(--ck-sp-1) 0 !important;
}
body.page-template-start .course_timeline h4 {
  font-size: var(--ck-fs-title) !important;
  color: #fff !important;
  margin: 0 !important;
  padding: var(--ck-sp-2) !important;
}
/* ชื่อบทในรายการ = body และมีพื้นที่กด 44px */
body.page-template-start .course_timeline a.unit {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
  display: block;
  padding: 12px var(--ck-sp-2) 12px 0 !important;
  min-height: 44px;
  line-height: 1.45;
}
body.page-template-start .course_timeline a.unit:hover {
  color: var(--ck-red) !important;
}
/* บทที่กำลังเรียนอยู่: ขีดเน้นเหลือง = ลายเซ็นเดียวกับทั้งเว็บ
   ธีมใส่ .show ให้ทุกบท (แปลว่า "แสดงอยู่") ตัวที่บอกว่ากำลังเรียนคือ .active เท่านั้น */
body.page-template-start .course_timeline li.unit_line.active > a.unit {
  font-weight: 700 !important;
  background: linear-gradient(90deg, var(--ck-yellow) 0 4px, transparent 4px) !important;
  padding-left: var(--ck-sp-2) !important;
}
/* แถบความคืบหน้า: เดิมเป็นเส้นบางสีอ่อนบนพื้นเหลือง มองไม่เห็นว่าเรียนไปเท่าไร */
body.page-template-start .progress.course_progressbar {
  background: var(--ck-ink-10) !important;
  height: 12px !important;
  border-radius: 999px !important;
  overflow: visible;
  margin-bottom: var(--ck-sp-3) !important;
}
body.page-template-start .progress.course_progressbar .bar {
  background: var(--ck-teal) !important;
  height: 12px !important;
  border-radius: 999px !important;
  min-width: 12px;
}
body.page-template-start .progress.course_progressbar .bar span {
  font-size: var(--ck-fs-caption) !important;
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
  background: transparent !important;
  top: -26px !important;
}
/* ปุ่มท้ายรายการบท */
body.page-template-start .more_course a.unit_button {
  min-height: 44px;
  font-size: var(--ck-fs-body) !important;
  margin-bottom: var(--ck-sp-1) !important;
}
/* แถบใต้วิดีโอ (ทำเครื่องหมายว่าเรียนแล้ว / วิดีโอถัดไป) */
body.page-template-start #unit_content .unit_action a,
body.page-template-start #unit_content .unit_nav a {
  font-size: var(--ck-fs-body) !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}


/* ---------- 20.5 หน้าชำระเงิน (หลัง login) ----------
   จุดสำคัญของหน้านี้คือ "ยอดที่ต้องจ่าย" กับ "ปุ่มสั่งซื้อ"
   ของเดิม ยอดรวม 16px และปุ่มกว้าง 80px · ทั้งคู่เล็กกว่าป้ายกำกับรอบข้าง */

/* ป้ายกำกับช่องกรอก 18px → body */
body.woocommerce-checkout form.checkout label,
body.woocommerce-checkout .woocommerce-billing-fields label {
  font-size: var(--ck-fs-body) !important;
}
/* ยอดรวม = ตัวเลขตัดสินใจ ใช้ระดับ price เหมือนราคาบนหน้าสินค้า */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .amount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .amount bdi {
  font-size: var(--ck-fs-price) !important;
  font-weight: 700 !important;
  color: var(--ck-price) !important;
  font-variant-numeric: tabular-nums;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th {
  font-size: var(--ck-fs-title) !important;
  color: var(--ck-ink) !important;
  vertical-align: middle;
}
/* ราคาแต่ละรายการ: #FF3452 บนขาว = 3.58 ไม่ผ่าน 4.5 */
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total .amount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name a {
  color: var(--ck-price) !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
}
/* ช่องติ๊กยอมรับเงื่อนไข: 13×13 เล็กเกินกด */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input#terms,
body.woocommerce-checkout .woocommerce-form__input-checkbox {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  accent-color: var(--ck-red);
  margin-right: var(--ck-sp-1) !important;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-size: var(--ck-fs-body) !important;
}
/* ปุ่มสั่งซื้อ = action สุดท้ายของเส้นทางเงิน ต้องเป็นปุ่มที่ใหญ่ที่สุดในหน้า */
body.woocommerce-checkout #place_order {
  display: block !important;
  width: 100% !important;
  max-width: 420px;
  min-height: 56px !important;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  margin-top: var(--ck-sp-2) !important;
}


/* ---------- 20.6 หน้ายืนยันคำสั่งซื้อ + หน้าแจ้งโอน ----------
   FINDINGS 3.0: หน้านี้เคยพังเพราะไฟล์ Forminator ตอบ 502 ไม่ใช่เพราะดีไซน์
   สิ่งที่ CSS ทำได้คือทำให้ "สถานะรอตรวจสอบ" กับ "ต้องทำอะไรต่อ" ชัดขึ้น */

/* หัวข้อในการ์ด 26px หลุดสเกล → title 19px
   (การ์ดจริงชื่อ .coverslipok_confirm_form_inner ใช้ร่วมกันทั้งสองหน้า) */
body.woocommerce-order-received .woocommerce h3,
.theme-wplms .coverslipok_confirm_form_inner h3,
.theme-wplms #coverslipok_confirm_form h3 {
  font-size: var(--ck-fs-title) !important;
  margin-bottom: var(--ck-sp-2) !important;
}
/* กล่องสรุปคำสั่งซื้อ: ทำเป็นการ์ดเหมือนกล่องอื่นในเว็บ ไม่ใช่เส้นคาดบน-ล่าง */
body.woocommerce-order-received ul.woocommerce-order-overview {
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-card) !important;
  padding: var(--ck-sp-3) !important;
  margin-bottom: var(--ck-sp-3) !important;
  gap: var(--ck-sp-2);
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
  border-right-color: var(--ck-ink-10) !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
  display: block;
  margin-top: 2px;
}
/* ยอดรวมในกล่องสรุป = ตัวเลขที่ผู้ซื้อต้องโอนให้ตรง ต้องเด่นที่สุดในกล่อง */
body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__total strong,
body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__total .amount,
body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__total .amount bdi {
  font-size: var(--ck-fs-price) !important;
  font-weight: 700 !important;
  color: var(--ck-price) !important;
  font-variant-numeric: tabular-nums;
}
/* ตารางรายละเอียดคำสั่งซื้อ */
body.woocommerce-order-received .woocommerce-table--order-details a,
body.woocommerce-order-received .woocommerce-table--order-details .amount,
body.woocommerce-account .woocommerce-table--order-details a {
  color: var(--ck-red) !important;
}
body.woocommerce-order-received .woocommerce-table--order-details td.product-name a {
  min-height: 44px;
  display: inline-block;
  padding: 9px 0;
}

/* ----- บล็อกโอนเงิน/อัปโหลดสลิป (ใช้ร่วมกันทั้งหน้า order-received และ /slipok-confirm/) ----- */

/* กล่องบัญชีธนาคาร: ทั้งแถวควรกดเลือกได้ ไม่ใช่จิ้มปุ่มกลม 13px */
.theme-wplms .slipok_coverbankinfo .slipok_item {
  min-height: 44px;
  border-radius: var(--ck-r) !important;
  padding: var(--ck-sp-2) !important;
  margin-bottom: var(--ck-sp-1) !important;
}
.theme-wplms .slipok_coverbankinfo input[type="radio"] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  accent-color: var(--ck-red);
}
/* เลขบัญชี = ตัวเลขที่ต้องคัดลอกไปวาง ต้องอ่านง่ายและตัวเลขไม่ขยับ */
.theme-wplms .slipok_accno span {
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: var(--ck-ink) !important;
}
/* ป้ายกำกับในกล่องธนาคาร (ชื่อธนาคาร/หมายเลขบัญชี/ชื่อบัญชี) เดิม 18px = caption */
.theme-wplms .slipok_coverbankinfo .slipok_item p {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
  margin-bottom: 2px !important;
}
/* ชื่อธนาคาร/ชื่อบัญชี = body */
.theme-wplms .slipok_coverbankinfo .slipok_item .slipbankinfo_col2,
.theme-wplms .slipok_coverbankinfo .slipok_item .slipbankinfo_col3,
.theme-wplms .slipok_coverbankinfo .slipok_item .slipbankinfo_col4 {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
}
/* กล่องเตือนเรื่องแอปธนาคาร: 12px และ contrast 3.69 → caption + สีที่ผ่านเกณฑ์ */
.theme-wplms .slipok-bank-notice-message,
.theme-wplms .slipok-bank-notice {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-sky-ink) !important;
}
/* ยอดที่ต้องโอน */
.theme-wplms p.slipok_amount {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
}
.theme-wplms p.slipok_amount strong {
  font-size: var(--ck-fs-price) !important;
  font-weight: 700 !important;
  color: var(--ck-price) !important;
  font-variant-numeric: tabular-nums;
}
/* คำอธิบายใต้ปุ่มอัปโหลด เดิม 12px contrast 3.69 */
.theme-wplms .forminator-description {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
}
/* ปุ่มเลือกไฟล์: "Choose File" อังกฤษกลางหน้าไทย ขนาด 100×40
   (เปลี่ยนคำต้องทำที่ตั้งค่า Forminator · ดู handoff/HANDOFF.md) */
.theme-wplms .forminator-button-upload,
.theme-wplms button.forminator-button-upload {
  min-height: 44px !important;
  font-size: var(--ck-fs-body) !important;
  padding: 0 var(--ck-sp-3) !important;
}
/* ปุ่มยืนยัน/อัปโหลดสลิป = action หลักของหน้า ต้องเป็นปุ่มหลัก ไม่ใช่ปุ่มรอง */
.theme-wplms button.forminator-button-submit,
.theme-wplms .forminator-button-submit {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  min-height: 56px !important;
  width: 100% !important;
  max-width: 420px;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: var(--ck-sh-sticker) !important;
}


/* ---------- 20.7 Forminator: ต้องเจาะ specificity ให้ชนะสไตล์ของปลั๊กอิน ----------
   ปลั๊กอินเขียน rule ด้วยคลาสหลายชั้น (.forminator-ui.forminator-custom-form …)
   selector สั้นๆ ที่ใส่ !important ก็ยังแพ้ ต้องยาวเท่ากันขึ้นไป */

/* คำอธิบายใต้ช่องกรอกเป็นสีแดงล้วนทุกอัน (FINDINGS 3.5)
   แดงต้องสงวนไว้ให้ข้อผิดพลาดจริงเท่านั้น ไม่งั้นคนจะเลิกอ่านสีแดง */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field .forminator-description,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field .forminator-description strong,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field .forminator-description a,
/* บางช่อง (เช่น วันเกิด) คำอธิบายอยู่ใน .forminator-col ไม่ใช่ .forminator-field */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-col .forminator-description,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-col .forminator-description strong {
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-caption) !important;
  font-weight: 400 !important;
  line-height: 1.5;
}
/* ป้ายกำกับช่องกรอก 18px → body และเป็นตัวที่เด่นกว่าคำอธิบาย */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field .forminator-label,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-row .forminator-label {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
/* เครื่องหมายบังคับกรอก = แดงแบรนด์ (ของเดิม #FF0000 บนขาว contrast 4.0 ไม่ผ่าน) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-required,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-label .forminator-required {
  color: var(--ck-red) !important;
}
/* ช่องกรอกทุกชนิดสูงพอกดบนมือถือ และตัวอักษร 16px กัน iOS zoom */
body.theme-wplms .forminator-ui.forminator-custom-form input.forminator-input,
body.theme-wplms .forminator-ui.forminator-custom-form select.forminator-select,
body.theme-wplms .forminator-ui.forminator-custom-form textarea.forminator-textarea,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field select {
  min-height: 44px !important;
  font-size: var(--ck-fs-body) !important;
  border-radius: 12px !important;
}
/* ปุ่มส่งฟอร์ม: จำกัดความกว้าง ไม่ให้ยาวเต็มจอ 1,240px */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-button-submit,
body.theme-wplms .forminator-ui.forminator-custom-form button.forminator-button-submit {
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ปุ่มเลือกไฟล์ */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-button-upload {
  min-height: 44px !important;
  font-size: var(--ck-fs-body) !important;
  border-radius: 999px !important;
}
/* ระยะห่างระหว่างช่อง: ฟอร์มลงทะเบียนหนังสือสูง 4,158px บนเดสก์ท็อป
   บีบจังหวะให้เป็น 8pt เท่ากันทุกช่อง ลดความสูงรวมโดยไม่ตัดช่องออก */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-row {
  margin-bottom: var(--ck-sp-2) !important;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field {
  margin-bottom: 0 !important;
}


/* ---------- 20.8 บล็อกอัปโหลดสลิปหลุดออกนอกการ์ด ----------
   หน้านี้มีสองฟอร์มซ้อนกัน: ฟอร์มเก่า (ข้อมูลธนาคาร อยู่ในการ์ดขาว)
   กับฟอร์ม Forminator (ปุ่มอัปโหลด) ที่อยู่นอกการ์ด
   ผลคือหัวข้อ "สลิปการชําระเงิน" อยู่ในการ์ด แต่ปุ่มอยู่ข้างนอก = อ่านไม่ออกว่าเป็นชุดเดียวกัน */
body.woocommerce-order-received .forminator-ui.forminator-custom-form,
body.page-id-222845 .forminator-ui.forminator-custom-form {
  background: #fff !important;
  border-radius: 0 0 var(--ck-r) var(--ck-r) !important;
  box-shadow: var(--ck-sh-card) !important;
  padding: 0 var(--ck-sp-3) var(--ck-sp-3) !important;
  margin-top: -1px !important;
}
/* การ์ดข้างบนต้องตัดมุมล่างออก ไม่งั้นจะเห็นเป็นการ์ดสองใบชนกัน */
body.woocommerce-order-received .coverslipok_confirm_form_inner,
body.page-id-222845 .coverslipok_confirm_form_inner {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: var(--ck-sp-1) !important;
}


/* ---------- 20.9 หน้าคอร์สเรียน (single-course) ----------
   หน้านี้แทบไม่มีเนื้อหา · มีแค่ชื่อคอร์ส ปุ่มเข้าเรียน และวันหมดอายุ
   CSS เพิ่มเนื้อหาให้ไม่ได้ ทำได้คือจัดสามอย่างนี้ให้อ่านเป็นลำดับที่ถูก */

/* ชื่อคอร์ส เดิม 32px สีฟ้า #1AA3EF ซึ่งไม่มีอยู่ในชุดสีแบรนด์ */
body.single-course #buddypress .course_title h1,
body.single-course .course_title h1 {
  font-size: var(--ck-fs-display) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
  line-height: 1.3;
  margin-bottom: var(--ck-sp-2) !important;
}
/* กล่องขวา (ปุ่มเข้าเรียน + วันหมดอายุ) เดิมเป็นบล็อกเหลืองทึบ → การ์ดขาว */
body.single-course .widget.pricing {
  background: #fff !important;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-card) !important;
  padding: var(--ck-sp-3) !important;
}
/* ปุ่มเข้าเรียน = action หลักของหน้า ต้องเป็นปุ่มหลัก (เดิมพื้นขาว = ปุ่มรอง) */
body.single-course .widget.pricing input.course_button,
body.single-course .widget.pricing .course_button {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  min-height: 56px !important;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  box-shadow: var(--ck-sh-sticker) !important;
}
/* บรรทัดวันหมดอายุ = ข้อมูลรอง */
body.single-course .course_block_bottom li,
body.single-course .course_block_bottom {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
}
/* ป้าย PRIVATE เดิมเขียว #70C989 บนขาว = contrast 1.98 อ่านไม่ออก
   (ป้ายสถานะ ไม่ใช่ปุ่ม จึงทำเป็นชิปเทาอ่อน) */
body.single-course .course_price strong {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
  background: var(--ck-ink-10);
  border-radius: 999px;
  padding: 4px 12px;
  display: inline-block;
}
/* ชื่อคอร์สในแถบซ้าย = หัวการ์ด */
body.single-course #buddypress .widget h3,
body.single-course .productsidebar .widget h3 {
  font-size: var(--ck-fs-title) !important;
  color: var(--ck-ink) !important;
}


/* ---------- 20.10 หน้ารายการคำสั่งซื้อ / รายละเอียดคำสั่งซื้อ ---------- */
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .woocommerce-table--order-details {
  background: #fff !important;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-card) !important;
  overflow: hidden;
}
body.woocommerce-account .woocommerce-orders-table thead th {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
}
body.woocommerce-account .woocommerce-orders-table tbody th {
  font-size: var(--ck-fs-body) !important;
  vertical-align: middle;
}
body.woocommerce-account .woocommerce-orders-table td {
  font-size: var(--ck-fs-body) !important;
  vertical-align: middle;
}
/* เลขที่คำสั่งซื้อกับปุ่มในตาราง ต้องกดได้จริง
   (ช่องเลขที่คำสั่งซื้อเป็น <th> ไม่ใช่ <td> ต้องเขียนทั้งคู่) */
body.woocommerce-account .woocommerce-orders-table td a,
body.woocommerce-account .woocommerce-orders-table th a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ck-red) !important;
}
body.woocommerce-account .woocommerce-orders-table td .button,
body.woocommerce-account .woocommerce-orders-table th .button {
  min-height: 44px;
  font-size: var(--ck-fs-caption) !important;
  margin: 2px 4px 2px 0;
}
/* แถบสถานะ "รอยืนยันการชำระเงิน" เป็นข้อมูลที่ผู้ซื้อมาดูเป็นอย่างแรก */
body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
}


/* ---------- 20.11 หน้าสั่งซื้อสำเร็จ (/order-confirm/) ----------
   FINDINGS 3.0.3: ทั้งหน้ามีแต่รูป 2 รูป ไม่มีข้อความสักตัว
   CSS เพิ่มข้อความไม่ได้ (ต้องพิมพ์ลง WPBakery · ดู HANDOFF)
   ที่ทำได้คือให้รูปไม่ล้นจอและกดต่อได้สะดวก */
body.page-id-223027 .wpb_wrapper img {
  max-width: 100% !important;
  height: auto !important;
}
body.page-id-223027 .wpb_wrapper a {
  display: inline-block;
  min-height: 44px;
}


/* ---------- 20.12 เก็บตกจากการวัดหน้าคอร์สเรียนของฉัน ---------- */

/* แถบแท็บย่อยสูงแค่ 30px */
body.buddypress #buddypress #item-body #subnav.item-list-tabs li a {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}
/* ตัวเลขหน้า: 11px ขาวบนเหลือง contrast 1.66 และกล่องสูง 41px */
body.buddypress #buddypress .pagination a,
body.buddypress #buddypress .pagination span,
body.buddypress #buddypress .page-numbers {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink) !important;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
body.buddypress #buddypress .page-numbers.current,
body.buddypress #buddypress .pagination span.current {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
  border-radius: 999px;
}
/* "กำลังดูหน้า 1 จาก 2" เดิม 12px contrast 2.63 */
body.buddypress #buddypress .pag-count {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
}
/* ข้อความสองบรรทัดในปุ่ม "คอร์สหมดอายุ / ต่ออายุคอร์ส" เดิม 14px หลุดสเกล */
body.buddypress #buddypress #course-list li.course_single_item .button span {
  font-size: var(--ck-fs-caption) !important;
  line-height: 1.4;
}
body.buddypress #buddypress #course-list li.course_single_item .button span:last-child {
  font-size: var(--ck-fs-body) !important;
  font-weight: 700 !important;
}


/* ---------- 20.13 พื้นที่กดบน header ยังต่ำกว่าเกณฑ์อยู่ 2–4px ทั้งเว็บ ----------
   (วัดเจอตอนตรวจหน้าหลัง login แต่เป็นของเดิมทุกหน้า · คู่กับส่วนที่ 2 Header)
   เมนู 42px · ปุ่มเข้าสู่ระบบ 40px · ไอคอนตะกร้า 40px  →  44px ตามเกณฑ์
   เพิ่มเฉพาะ padding แนวตั้ง ไม่แตะความสูง header (header เป็น flex จัดกึ่งกลางอยู่แล้ว) */
/* ⚠️ ต้องกัน <a> ที่ธีมซ่อนไว้ออกก่อน — ธีมซ่อนลิงก์ค้นหา (ไอคอนแว่นขยาย) ด้วย display:none
   กฎเดิมใส่ inline-flex !important แบบไม่แยกแยะ เลยไปเปิดแว่นขยายขึ้นมาในทุกหน้า
   ทั้งที่ฝั่ง "ก่อน" ไม่มี (ลูกค้าทัก 2026-09-03) — กับดักเดียวกับข้อ 15.8 และ 19.4 */
.theme-wplms nav[class*="menu-"] > ul.menu > li > a:not(:has(> i.fa-search)) {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}
.theme-wplms .topmenu .vbplogin {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}
.theme-wplms .topmenu .vbpcart,
.theme-wplms a.vbpcart {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* ปุ่มขึ้นบนสุด กว้าง 23px */
.theme-wplms .totop,
.theme-wplms #totop,
.theme-wplms .totop a {
  min-width: 44px !important;
  min-height: 44px !important;
}


/* ---------- 20.14 เมนูบัญชีผู้ใช้ (WooCommerce My Account) ----------
   เมนู 6 รายการซ้ายมือ: 12px · contrast 3.30 · สูง 37px · ไม่ผ่านทั้งสามเกณฑ์ */
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px var(--ck-sp-2) !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
  border-radius: 999px;
}
/* ราคาในทุกตารางของหน้าบัญชี #FF3452 = 3.58 */
body.woocommerce-account .woocommerce-Price-amount,
body.woocommerce-account .woocommerce-Price-amount bdi,
body.woocommerce-account .woocommerce-Price-currencySymbol {
  color: var(--ck-price) !important;
}
/* ชื่อคอร์สในรายละเอียดคำสั่งซื้อ: พื้นที่กด 25px */
body.woocommerce-account .woocommerce-table--order-details td.product-name a {
  min-height: 44px;
  display: inline-block;
  padding: 9px 0;
}
/* ป้ายกำกับในตารางรายละเอียด เดิม 18px */
body.woocommerce-account .woocommerce-table--order-details th,
body.woocommerce-account .woocommerce-table--order-details tfoot th {
  font-size: var(--ck-fs-body) !important;
}


/* ---------- 20.15 หัวข้อในแผงตะกร้าสไลด์ยังหลุดสเกล 20px ทุกหน้า ----------
   (ของเดิมทั้งเว็บ ไม่ใช่เฉพาะหน้าหลัง login · ส่วนที่ 7 จับ .xoo-wsch-basket ไว้แล้ว
    แต่ข้อความ "ตะกร้าสินค้า" อยู่คนละ element) */
.theme-wplms .xoo-wsch-text {
  font-size: var(--ck-fs-title) !important;
}


/* ---------- 20.16 เก็บตกรอบวัดผล: teal ที่ตัวอักษรขาวอ่านไม่ผ่าน ----------
   #0F9A95 กับตัวขาว = 3.46 ต่ำกว่าเกณฑ์ 4.5 ใช้เฉดเข้มขึ้นเฉพาะที่มีตัวหนังสือขาวทับ */
:root { --ck-teal-deep: #0B7370; }

body.page-template-start .unit_prevnext,
body.page-template-start .course_timeline h4 {
  background: var(--ck-teal-deep) !important;
}
/* ปุ่มใต้วิดีโอ สูง 25px และเป็นข้อความลอย ไม่ได้เป็นปุ่ม */
body.page-template-start .unit_prevnext .unit_button,
body.page-template-start .unit_prevnext a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  color: #fff !important;
  font-size: var(--ck-fs-body) !important;
}
/* ชื่อครูผู้สอนเหนือวิดีโอ #BBBBBB บนครีม = 1.77 */
body.page-template-start .unit_title .instructor,
body.page-template-start .unit_title .instructor strong,
body.page-template-start .unit_title .instructor span,
body.page-template-start .unit_title .instructor a {
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-caption) !important;
}


/* ---------- 20.17 เก็บตกหน้าคอร์สเรียน ---------- */
/* ป้ายหมวด "12M" และจำนวนรีวิว เป็นตัวขาวบนพื้นขาว = contrast 1.0 มองไม่เห็นเลย */
body.single-course #buddypress .widget .course_cat a,
body.single-course #buddypress .widget .course_category a,
body.single-course .productsidebar .course_cat a {
  color: var(--ck-ink) !important;
  background: var(--ck-yellow) !important;
  font-size: var(--ck-fs-caption) !important;
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
body.single-course #buddypress .widget strong,
body.single-course #buddypress .widget .review_count {
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-caption) !important;
}
/* หัวข้อ "ครูผู้สอน" 18px contrast 3.54 */
body.single-course #buddypress .widget h3,
body.single-course #buddypress .widget h5,
body.single-course #buddypress .widget h5 a {
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
}
body.single-course #buddypress .widget h5 a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}


/* ---------- 20.18 หน้าโปรไฟล์ (แก้ไขข้อมูล) ----------
   ป้ายกำกับ 21px · เครื่องหมายบังคับ contrast 3.69 · แท็บสูง 29px · select 36px */
body.buddypress #buddypress .editfield label,
body.buddypress #buddypress .editfield .label {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
}
body.buddypress #buddypress .bp-required-field-label {
  color: var(--ck-red) !important;
}
body.buddypress #buddypress .editfield input[type="text"],
body.buddypress #buddypress .editfield select,
body.buddypress #buddypress .editfield textarea {
  min-height: 44px !important;
  font-size: var(--ck-fs-body) !important;
  border-radius: 12px !important;
}
body.buddypress #buddypress .profile #subnav li a,
body.buddypress #buddypress .button-nav li a,
body.buddypress #buddypress ul.button-nav li a {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  font-size: var(--ck-fs-body) !important;
}
/* ปุ่มบันทึก (คำว่า "Save Changes" เป็นภาษาอังกฤษ · แก้ที่ไฟล์แปลภาษา ดู HANDOFF) */
body.buddypress #buddypress .editfield + .submit input,
body.buddypress #buddypress input#submit,
body.buddypress #buddypress .submit input[type="submit"] {
  min-height: 52px !important;
  padding: 0 var(--ck-sp-4) !important;
  font-size: var(--ck-fs-title) !important;
}
/* หัวข้อ "Editing 'ข้อมูลส่วนตัว' Profile Group" 21px + ภาษาอังกฤษปน */
body.buddypress #buddypress h4 {
  font-size: var(--ck-fs-title) !important;
}


/* ---------- 20.19 หน้าแจ้งโอน: ป้ายกำกับและช่องเลือกคำสั่งซื้อ ---------- */
.theme-wplms #slipok_confirm_form label,
.theme-wplms .coverslipok_confirm_form_inner label {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
}
.theme-wplms #slipok_confirm_form select,
.theme-wplms .coverslipok_confirm_form_inner select {
  min-height: 44px !important;
  font-size: var(--ck-fs-body) !important;
  border-radius: 12px !important;
}
/* เครื่องหมายบังคับกรอกในฟอร์มเก่า contrast 4.00 */
.theme-wplms .coverslipok_confirm_form_inner label span,
.theme-wplms #slipok_confirm_form label span {
  color: var(--ck-red) !important;
}


/* ---------- 20.20 แก้ selector ที่วัดแล้วยังไม่ติด ---------- */

/* หน้าโปรไฟล์: ป้ายกำกับเป็น <legend> ไม่ใช่ <label> */
body.buddypress #buddypress .editfield legend {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
}
body.buddypress #buddypress .editfield fieldset legend {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
  font-weight: 400 !important;
}

/* หน้าคอร์สเรียน: ป้ายหมวดเป็นตัวขาวบนพื้นขาว (contrast 1.0 = หายไปเลย)
   ⚠️ แก้ 2026-08-19: กฎเดิมยิงทั้ง .highlight (span ครอบ) และ .highlight a (ลิงก์ข้างใน)
      ทั้งคู่จึงได้ padding 8/16 + min-height 44 ซ้อนกัน ป้ายเลยบวมเป็น 89×60px
      สำหรับตัวหนังสือ 13px · ทาสีที่ตัวลิงก์อย่างเดียว ส่วน span เป็นแค่กล่องครอบ
      (ลิงก์นี้พาไปหน้าหมวด /course-c/12m/ จริง จึงต้องคงพื้นที่กด 44px ไว้) */
body.single-course #buddypress #item-header-content .highlight {
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: inline-flex;
}
body.single-course #buddypress #item-header-content .highlight a {
  color: var(--ck-ink) !important;
  background: var(--ck-yellow) !important;
  font-size: var(--ck-fs-caption) !important;
  font-weight: 700 !important;
  border-radius: 999px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ป้ายที่ "ตาเห็น" สูง 32px แต่พื้นที่กดยัง 44px ตามเกณฑ์
     ทำด้วยขอบโปร่งใส 6px + background-clip: padding-box
     (พื้นที่ border กดได้แต่ไม่ถูกทาสี · เลยได้ป้ายเล็กโดยไม่เสียพื้นที่กด) */
  /* box-sizing เป็น border-box ทั้งเว็บ → min-height นับรวมขอบ 6px สองด้านแล้ว
     ตั้ง 44 จึงได้พื้นที่กด 44px และป้ายที่ทาสีจริงสูง 32px */
  min-height: 44px;
  border: 6px solid transparent !important;
  background-clip: padding-box !important;
}
/* ดาวรีวิว/จำนวนรีวิว */
body.single-course #buddypress #item-header-content strong {
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-caption) !important;
}
/* หัวข้อ "ครูผู้สอน" และชื่อครู เดิม #888888 = 3.54 */
body.single-course #buddypress #item-admins h3 {
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 700 !important;
}
body.single-course #buddypress #item-admins h5.course_instructor a {
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* หน้าชำระเงิน: เครื่องหมายบังคับกรอกและลิงก์เงื่อนไข contrast 2.24 / 3.30 */
body.woocommerce-checkout .required,
body.woocommerce-checkout abbr.required,
body.woocommerce-checkout span.required,
body.woocommerce-checkout .woocommerce-terms-and-conditions-link {
  color: var(--ck-red) !important;
  text-decoration: none;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-link {
  text-decoration: underline;
}


/* ---------- 20.21 เก็บตกรอบสุดท้าย (จากการวัดซ้ำทั้ง 18 หน้า) ---------- */

/* ชื่อบัญชี/ชื่อธนาคารเป็น <span> ที่ตั้งขนาดเอง 20px (rule ที่จับ col ไม่ถึง) */
.theme-wplms .slipok_coverbankinfo .slipok_item span,
.theme-wplms .slipok_coverbankinfo .slipok_item div {
  font-size: var(--ck-fs-body) !important;
}
/* ยกเว้นเลขบัญชี ที่ต้องใหญ่กว่าเพื่อนเพราะต้องคัดลอกไปวาง */
.theme-wplms .slipok_accno span {
  font-size: var(--ck-fs-title) !important;
}
/* ข้อความในกรอบอัปโหลด และหน่วยเงินท้ายช่องกรอก */
.theme-wplms .forminator-uploaded-file,
.theme-wplms .forminator-upload-message,
.theme-wplms .forminator-file-upload span,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-suffix,
body.theme-wplms .forminator-ui.forminator-custom-form .select2-selection__placeholder,
body.theme-wplms .forminator-ui.forminator-custom-form .select2-selection__rendered {
  font-size: var(--ck-fs-body) !important;
}

/* กล่องแจ้ง "ได้รับรายการสั่งซื้อเรียบร้อยแล้ว" และหัวข้อตาราง 18px */
body.woocommerce-order-received .woocommerce-notice--success,
body.woocommerce-order-received h2.woocommerce-order-details__title,
body.woocommerce-account h2.woocommerce-order-details__title {
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
}
/* บรรทัดสรุปสถานะในหน้ารายละเอียดคำสั่งซื้อ 18px */
body.woocommerce-account .woocommerce-MyAccount-content > p,
body.woocommerce-account mark.order-number,
body.woocommerce-account mark.order-date,
body.woocommerce-account mark.order-status {
  font-size: var(--ck-fs-body) !important;
  background: transparent !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
}

/* ช่องติ๊ก/ปุ่มกลม ให้ถึง 24px ตามเกณฑ์ขนาดเป้าหมายขั้นต่ำ */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input#terms,
body.woocommerce-checkout .woocommerce-form__input-checkbox,
.theme-wplms .slipok_coverbankinfo input[type="radio"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
}

/* ปุ่มขึ้นบนสุด กว้าง 23px (id จริงคือ #scrolltop) */
.theme-wplms #scrolltop {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


/* ---------- 20.22 เก็บตกของเดิมที่วัดเจอตอนตรวจรอบนี้ (หน้า 01–02) ---------- */
/* คำโปรยใต้ชื่อคอร์สบนมือถือ 18px และป้ายหมวดใน sidebar 17px · ไม่อยู่ใน 5 ระดับ */
@media (max-width: 700px) {
  body.theme-wplms.single-product .summary .woocommerce-product-details__short-description p,
  body.theme-wplms.single-product .summary > p {
    font-size: var(--ck-fs-body) !important;
  }
  body.theme-wplms .productsidebar .widget ul li a span,
  body.theme-wplms .productsidebar .widget ul li span {
    font-size: var(--ck-fs-body) !important;
  }
}


/* ---------- 20.23 รูปโปรไฟล์ในปุ่ม navbar ต้องล็อกขนาดเอง ----------
   ธีมย่อรูปนี้ไว้ 20px ด้วย rule ที่ผูกกับ display:grid ของลิงก์
   พอ 20.13 เปลี่ยนลิงก์เป็น inline-flex (เพื่อให้สูงถึง 44px) รูปจึงกลับไปใหญ่ตามไฟล์จริง 460px
   จุดนี้เห็นเฉพาะตอน login แล้ว + จอมือถือ */
.theme-wplms .topmenu .vbplogin img.avatar,
.theme-wplms .topmenu a.smallimg img {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  flex: 0 0 auto;
  margin-right: 6px;
}


/* ---------- 20.24 มือถือ: ยอดรวมใช้ขนาด price ของมือถือ (28px) ----------
   ที่ 390px ตัวเลข 32px + สัญลักษณ์ ฿ ชนขอบช่องพอดี */
@media (max-width: 700px) {
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .amount,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .amount bdi,
  body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__total strong,
  body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__total .amount,
  body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__total .amount bdi,
  .theme-wplms p.slipok_amount strong {
    font-size: 28px !important;
  }
}


/* ---------- 20.25 ปิดงานรอบวัดผล ---------- */

/* เครื่องหมาย * ในหน้าชำระเงิน: ธีมยิง <style> ไว้ใน body ต้องเจาะ specificity เหมือนกรณี avatar */
html body.theme-wplms.woocommerce-checkout form.checkout .required,
html body.theme-wplms.woocommerce-checkout form.checkout abbr.required,
html body.theme-wplms.woocommerce-checkout form.checkout span.required {
  color: var(--ck-red) !important;
}

/* ข้อความในกรอบอัปโหลดสลิป 20px (อยู่คนละ span กับที่จับไว้แล้ว) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-uploaded-files span,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-file-upload span,
body.theme-wplms .forminator-ui.forminator-custom-form [class*="forminator-upload"] span {
  font-size: var(--ck-fs-body) !important;
}

/* วันหมดอายุคอร์ส 12px */
body.single-course li.course_time,
body.single-course .course_time {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
}

/* กล่องแทรกลิงก์ของ editor ในหน้าโปรไฟล์ 14px */
body.buddypress #buddypress .wp-link-input label,
body.buddypress #buddypress .mce-toolbar a {
  font-size: var(--ck-fs-caption) !important;
}

/* กรอบลากไฟล์มาวางในหน้าแจ้งโอน (#upload-slip เป็นของปลั๊กอินคนละตัวกับ Forminator) */
.theme-wplms #upload-slip .upload-text,
.theme-wplms #upload-slip .upload-text span {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink-60) !important;
}

/* ปุ่มอัปโหลดในหน้า /slipok-confirm/ เป็นของฟอร์มเก่า (#noti-submit) คนละตัวกับ Forminator
   เป็น action หลักของหน้า จึงต้องเป็นปุ่มหลักเหมือนกัน */
.theme-wplms button#noti-submit {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  min-height: 56px !important;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: var(--ck-sh-sticker) !important;
  padding: 0 var(--ck-sp-4) !important;
}


/* ============================================================
   21. รอบตรวจระยะห่างและสัดส่วน (2026-08-16 รอบที่ 3)
   วัดด้วย mock/audit-layout.js เทียบเกณฑ์ใน DESIGN-SYSTEM.html
   (ระยะ 8pt: 8/16/24/40 · ความยาวบรรทัด 65–75 ตัวอักษร)
   ============================================================ */

/* ---------- 21.1 ฟอร์มกว้างเต็มจอ อ่านและกรอกยาก ----------
   วัดได้: ช่อง "ชื่อจริง" กว้าง 1,274px · บรรทัดคำอธิบายยาว 138 ตัวอักษร
   เกณฑ์คือ 65–75 ตัวอักษรต่อบรรทัด (ui-ux-pro-max: Line Length / Container Width)

   ธีมตั้งทุกช่องเป็น 100% ทั้งที่ WooCommerce ใส่คลาส form-row-first / form-row-last
   มาให้อยู่แล้วสำหรับวางสองคอลัมน์ · คืนพฤติกรรมนั้นเฉพาะจอกว้าง */
@media (min-width: 782px) {
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout #order_review,
  body.woocommerce-checkout #order_review_heading,
  body.woocommerce-checkout .woocommerce-checkout-review-order {
    max-width: 840px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    width: 100% !important;
  }
  body.woocommerce-checkout form.checkout p.form-row-first,
  body.woocommerce-checkout form.checkout p.form-row-last,
  /* ชื่อเล่น กับ เบอร์โทร เป็น form-row-wide ตามค่าเริ่มต้นของ WooCommerce
     ทั้งคู่เก็บค่าสั้นๆ จับคู่เป็นแถวเดียวกัน ฟอร์มเหลือ 2 แถวแทน 3 แถว */
  body.woocommerce-checkout form.checkout p#billing_nickname_field,
  body.woocommerce-checkout form.checkout p#billing_phone_field {
    width: calc(50% - var(--ck-sp-1)) !important;
    float: none !important;
    display: inline-block;
    vertical-align: top;
  }
  body.woocommerce-checkout form.checkout p.form-row-first,
  body.woocommerce-checkout form.checkout p#billing_nickname_field {
    margin-right: var(--ck-sp-2) !important;
  }
}
/* ปุ่มสั่งซื้ออยู่ในคอลัมน์เดียวกับฟอร์ม ไม่ลอยกลางจอกว้าง */
body.woocommerce-checkout #place_order {
  margin-left: 0 !important;
}

/* ฟอร์มลงทะเบียนหนังสือ: ช่องเดี่ยวกว้าง 1,271px */
@media (min-width: 782px) {
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-row {
    max-width: 880px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* หน้าแจ้งโอน: ช่องเลือกเลขที่สั่งซื้อกว้าง 1,338px ทั้งที่ในนั้นมีแค่ตัวเลข 6 หลัก */
.theme-wplms #slipok_confirm_form select,
.theme-wplms .coverslipok_confirm_form_inner select {
  max-width: 420px !important;
}

/* หน้าโปรไฟล์: ช่องกรอกกว้าง 968px */
@media (min-width: 782px) {
  body.buddypress #buddypress .editfield input[type="text"],
  body.buddypress #buddypress .editfield select,
  body.buddypress #buddypress .editfield textarea {
    max-width: 560px !important;
  }
}

/* ชื่อสินค้าในตารางคำสั่งซื้อยาว 155 ตัวอักษรต่อบรรทัด */
@media (min-width: 782px) {
  body.woocommerce-order-received .woocommerce-table--order-details td.product-name,
  body.woocommerce-account .woocommerce-table--order-details td.product-name,
  body.woocommerce-account .woocommerce-MyAccount-content > p {
    max-width: 60ch;
  }
}
/* คำอธิบายใต้ปุ่มอัปโหลดสลิปยาว 190 ตัวอักษร */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-description {
  max-width: 68ch;
}


/* ---------- 21.2 การ์ดคอร์สในหน้าโปรไฟล์: สูง 629px และมีรูโหว่กลางการ์ด ----------
   ต้นเหตุ: ธีมตั้ง .item-credits{float:right} ไว้สำหรับ "มุมมองรายการ" ที่กว้าง
   พอมาอยู่ในการ์ดกริดกว้าง 322px ปุ่มจึงลอยทับ แล้วดันข้อความความคืบหน้าลงไป
   เหลือช่องว่างเปล่า 89px กลางการ์ด · แก้เฉพาะมุมมองกริด มุมมองรายการคงเดิม */
body.buddypress #buddypress ul#course-list.grid li.course_single_item .item-credits {
  float: none !important;
  padding: 0 !important;
  margin-top: var(--ck-sp-1) !important;
}
/* กรอบ .row ของ bootstrap ล้นออกนอกการ์ดข้างละ 15px ทำให้ระยะซ้าย-ขวาไม่เท่ากัน
   (รูปเยื้อง 1px แต่ตัวหนังสือเยื้อง 17px) */
body.buddypress #buddypress ul#course-list.grid li.course_single_item > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.buddypress #buddypress ul#course-list.grid li.course_single_item > .row > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  float: none !important;
}
/* กล่องเนื้อหาในการ์ด: ระยะ 16px รอบด้านตามระบบ 8pt (เดิม 15px) */
body.buddypress #buddypress ul#course-list.grid li.course_single_item .item {
  padding: var(--ck-sp-2) !important;
  display: block;
}
/* บรรทัดข้อมูลรอง: เดิม 16px/line-height 28px (1.75) แน่นเกินไปสำหรับ 3 บรรทัดติดกัน */
body.buddypress #buddypress ul#course-list.grid li.course_single_item .text-center {
  font-size: var(--ck-fs-caption) !important;
  line-height: 1.6 !important;
  color: var(--ck-ink-60) !important;
  text-align: left !important;
  margin: 0 !important;
}
body.buddypress #buddypress ul#course-list.grid li.course_single_item .text-center span,
body.buddypress #buddypress ul#course-list.grid li.course_single_item .text-center strong {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
}
/* ชื่อคอร์สอยู่ในกล่อง .item แล้ว ไม่ต้องมี padding ของตัวเองอีก */
body.buddypress #buddypress ul#course-list.grid .item-title {
  margin: 0 0 var(--ck-sp-1) !important;
}
body.buddypress #buddypress ul#course-list.grid .item-title a {
  padding: 0 !important;
  min-height: 0;
}
/* ปุ่มในการ์ดกินความกว้างของกล่อง ไม่ต้องเผื่อ margin ซ้าย-ขวาอีกชั้น */
body.buddypress #buddypress ul#course-list.grid li.course_single_item .button,
body.buddypress #buddypress ul#course-list.grid li.course_single_item input.course_button {
  width: 100% !important;
  margin: var(--ck-sp-1) 0 var(--ck-sp-2) !important;
}


/* ---------- 21.3 ตารางคำสั่งซื้อบนมือถือ: 5 คอลัมน์บีบใน 390px ----------
   วัดได้: ปุ่มในคอลัมน์สุดท้ายล้นขอบขวา 39px และเลขที่คำสั่งซื้อทับกับวันที่
   WooCommerce ใส่ data-title ไว้ให้ทุกช่องอยู่แล้ว (เป็นภาษาไทยด้วย)
   จึงพลิกเป็นการ์ดรายแถวได้ด้วย CSS ล้วน ไม่ต้องแตะ HTML */
@media (max-width: 700px) {
  body.woocommerce-account .woocommerce-orders-table {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    display: block;
  }
  body.woocommerce-account .woocommerce-orders-table thead { display: none; }
  body.woocommerce-account .woocommerce-orders-table tbody,
  body.woocommerce-account .woocommerce-orders-table tr {
    display: block;
    width: 100%;
  }
  body.woocommerce-account .woocommerce-orders-table tbody tr {
    background: #fff !important;
    border-radius: var(--ck-r) !important;
    box-shadow: var(--ck-sh-card) !important;
    padding: var(--ck-sp-2) !important;
    margin-bottom: var(--ck-sp-2) !important;
  }
  body.woocommerce-account .woocommerce-orders-table tbody td,
  body.woocommerce-account .woocommerce-orders-table tbody th {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-sp-2);
    width: auto !important;
    border: 0 !important;
    padding: 6px 0 !important;
    text-align: right;
  }
  body.woocommerce-account .woocommerce-orders-table tbody td::before,
  body.woocommerce-account .woocommerce-orders-table tbody th::before {
    content: attr(data-title);
    font-size: var(--ck-fs-caption);
    color: var(--ck-ink-60);
    font-weight: 400;
    text-align: left;
    flex: 0 0 auto;
  }
  /* แถวปุ่ม: ปุ่มเรียงเต็มความกว้าง ไม่ต้องมีป้ายกำกับซ้ำ */
  body.woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
    display: block !important;
    padding-top: var(--ck-sp-1) !important;
  }
  body.woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before {
    display: none;
  }
  body.woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions .button {
    display: block;
    width: 100%;
    margin: var(--ck-sp-1) 0 0 !important;
    text-align: center;
  }
  /* เลขที่คำสั่งซื้อคือหัวการ์ด */
  body.woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number {
    border-bottom: 1px solid var(--ck-ink-10) !important;
    padding-bottom: var(--ck-sp-1) !important;
    margin-bottom: 6px;
  }
  body.woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number a {
    font-size: var(--ck-fs-title) !important;
    font-weight: 700 !important;
  }
}


/* ---------- 21.4 ระยะในการ์ดที่ไม่อยู่ในสเกล 8pt ----------
   วัดได้: การ์ดฟอร์มแจ้งโอน padding 21/21/8/21 (สเกลคือ 8/16/24/40) */
.theme-wplms .coverslipok_confirm_form_inner {
  padding: var(--ck-sp-3) !important;
  padding-bottom: var(--ck-sp-2) !important;
}


/* ---------- 21.5 มือถือ: ข้อความท้าย footer ชิดขอบจอ ----------
   วัดได้: บรรทัด copyright ห่างขอบซ้าย 6px ขอบขวา 17px (ควรเท่ากันและ ≥ 16px) */
@media (max-width: 700px) {
  .theme-wplms #Wiefooter .wpb-content-wrapper::after,
  .theme-wplms #Wiefooter .wpb-content-wrapper > .vc_row:not([class*="vc_custom_"]) p::after {
    padding-left: var(--ck-sp-2);
    padding-right: var(--ck-sp-2);
  }
}


/* ---------- 21.6 หัวข้อหน้าชิดขอบซ้าย ----------
   วัดได้: "ลงทะเบียนจัดส่งหนังสือ" ห่างขอบซ้าย 0–10px ทั้งเดสก์ท็อปและมือถือ
   ขณะที่การ์ดข้างล่างห่าง 24px · หัวข้อกับเนื้อหาต้องเริ่มที่แนวเดียวกัน */
body.theme-wplms.page-id-222905 h2.vc_custom_heading,
body.theme-wplms.page-id-222845 h2.vc_custom_heading,
body.theme-wplms.page-id-223027 h2.vc_custom_heading {
  padding-left: var(--ck-sp-2) !important;
  padding-right: var(--ck-sp-2) !important;
}


/* ---------- 21.7 จังหวะแนวตั้งของหน้ายืนยันคำสั่งซื้อ ----------
   วัดได้ (เดสก์ท็อป): 60 · 20 · 96 · 115 · 87 px · ไม่มีจังหวะร่วมกันเลย
   ระบบกำหนดไว้ว่าระหว่าง section = 40px  ระหว่างบล็อกในกลุ่มเดียวกัน = 24px
   ต้นเหตุคือ .vc_empty_space ของ page builder (32px) ซ้อนกับ margin ของ WooCommerce */
/* วิธีแก้: ปิดตัวเว้นวรรคของ page builder บนหน้าเหล่านี้ แล้วให้ระยะมาจาก
   margin ของตัวเนื้อหาเองที่เดียว จะได้จังหวะที่คาดเดาได้ */
/* จำกัดไว้ใน #content เท่านั้น · ครั้งแรกเขียนไม่ได้จำกัดขอบเขต เลยไปปิดตัวเว้นวรรค
   ระหว่างโลโก้กับไอคอนโซเชียลใน footer ด้วย (หายไป 64px) */
body.woocommerce-order-received #content .vc_empty_space,
body.theme-wplms.page-id-222845 #content .vc_empty_space,
body.theme-wplms.page-id-222905 #content .vc_empty_space {
  height: 0 !important;
}
body.woocommerce-order-received #content .vc_row.vc_inner,
body.theme-wplms.page-id-222845 #content .vc_row.vc_inner,
body.theme-wplms.page-id-222905 #content .vc_row.vc_inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* ระยะระหว่าง section = 40px ตามระบบ */
body.woocommerce-order-received ul.woocommerce-order-overview {
  margin-bottom: var(--ck-sp-4) !important;
}
body.woocommerce-order-received .woocommerce-notice--success {
  margin-top: 0 !important;
  margin-bottom: var(--ck-sp-3) !important;
}
body.woocommerce-order-received h2.vc_custom_heading {
  margin-bottom: var(--ck-sp-4) !important;
}
body.woocommerce-order-received section.woocommerce-order-details,
body.woocommerce-account section.woocommerce-order-details {
  margin-top: var(--ck-sp-4) !important;
}
body.woocommerce-order-received h2.woocommerce-order-details__title,
body.woocommerce-account h2.woocommerce-order-details__title {
  margin-top: 0 !important;
  margin-bottom: var(--ck-sp-2) !important;
}
/* ระยะก่อน footer: ตารางมี margin-bottom 24px อยู่แล้ว ไม่ต้องซ้อนอีกชั้น */
body.woocommerce-order-received .woocommerce {
  margin-bottom: 0 !important;
}
/* (ระยะท้ายหน้าย้ายไปคุมรวมที่ข้อ 22.8 แล้ว) */


/* ---------- 21.8 ช่องกรอกที่เก็บค่าสั้น ไม่ควรกว้างเท่าช่องที่อยู่ ----------
   ui-ux-pro-max (Forms): ความกว้างของช่องควรบอกใบ้ความยาวของคำตอบ
   จำนวนเงิน / เบอร์โทร / รหัสไปรษณีย์ กว้าง 880px ทำให้เดาไม่ออกว่าต้องกรอกอะไร */
@media (min-width: 782px) {
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-currency input,
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-phone input,
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-number input,
  body.theme-wplms .forminator-ui.forminator-custom-form input[type="number"] {
    max-width: 320px !important;
  }
  /* ช่องที่มีหน่วยต่อท้าย (THB) ให้กรอบหน่วยตามความกว้างใหม่ไปด้วย */
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-currency .forminator-input-with-suffix {
    max-width: 320px !important;
  }
}


/* ---------- 21.9 ปิดงานเรื่องความยาวบรรทัดและความกว้างช่องกรอก ---------- */

/* ตารางรายละเอียดคำสั่งซื้อ: ชื่อคอร์สยาว 155 ตัวอักษรต่อบรรทัด
   (max-width บน <td> ไม่มีผลกับตาราง ต้องคุมที่คอลัมน์ของตารางแทน)
   ตารางยังกว้างเท่าการ์ดข้างบน เพื่อให้ทุกบล็อกในหน้าเริ่มที่แนวเดียวกัน */
@media (min-width: 782px) {
  /* บรรทัดสรุปสถานะคำสั่งซื้อยาว 105 ตัวอักษร */
  body.woocommerce-account .woocommerce-MyAccount-content > p {
    max-width: 68ch !important;
  }
  /* ข้อความยอมรับเงื่อนไขในหน้าชำระเงิน 89 ตัวอักษรต่อบรรทัด */
  body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    max-width: 60ch;
  }
  /* ช่องข้อความบรรทัดเดียวในฟอร์มลงทะเบียนหนังสือกว้าง 775px
     (แถวที่แบ่ง 3 คอลัมน์อยู่แล้วกว้าง ~240px จึงไม่โดนกระทบ) */
  body.theme-wplms .forminator-ui.forminator-custom-form input.forminator-input[type="text"],
  body.theme-wplms .forminator-ui.forminator-custom-form input.forminator-input:not([type]) {
    max-width: 560px !important;
  }
}

/* ชื่อคอร์สในตารางเป็นข้อความยาวก้อนเดียว ("เคมีม.4 เทอม 1 (1M) [ COURSE : … ]")
   แบ่งคอลัมน์ให้ชื่ออยู่ 62% ยอดเงิน 38% บรรทัดจะเหลือราว 63 ตัวอักษร ตามเกณฑ์ */
@media (min-width: 782px) {
  body.woocommerce-order-received .woocommerce-table--order-details,
  body.woocommerce-account .woocommerce-table--order-details {
    table-layout: fixed;
  }
  /* ชื่อคอร์สอยู่ครึ่งซ้าย ยอดเงินชิดขวา · บรรทัดเหลือราว 78 ตัวอักษร */
  body.woocommerce-order-received .woocommerce-table--order-details th.product-name,
  body.woocommerce-order-received .woocommerce-table--order-details td.product-name,
  body.woocommerce-account .woocommerce-table--order-details th.product-name,
  body.woocommerce-account .woocommerce-table--order-details td.product-name {
    width: 50%;
  }
  body.woocommerce-order-received .woocommerce-table--order-details td.product-total,
  body.woocommerce-account .woocommerce-table--order-details td.product-total {
    text-align: right;
  }
}

/* ชื่อคอร์สในการ์ดชิดซ้ายให้ตรงแนวกับบรรทัดข้อมูลรองข้างล่าง
   (เดิมชื่อจัดกึ่งกลาง แต่ข้อมูลรองชิดซ้าย = แนวตาสองแนวในการ์ดเดียว) */
body.buddypress #buddypress ul#course-list.grid .item-title,
body.buddypress #buddypress ul#course-list.grid .item-title a {
  text-align: left !important;
}


/* ---------- 21.10 เก็บตกหน้าเดิม (01–05) ที่เจอตอนตรวจระยะห่างรอบนี้ ---------- */

/* กล่อง widget ใน sidebar padding 18/20 → 16px ตามสเกล 8pt */
.theme-wplms .productsidebar .widget,
.theme-wplms .sidebar .widget {
  padding: var(--ck-sp-2) !important;
}

/* มือถือ: ชื่อคอร์สในหน้ารวมคอร์สห่างขอบการ์ดแค่ 5px */
@media (max-width: 700px) {
  .theme-wplms ul.products li.product h2.woocommerce-loop-product__title,
  .theme-wplms ul.products li.product .woocommerce-loop-product__title {
    padding-left: var(--ck-sp-2) !important;
    padding-right: var(--ck-sp-2) !important;
  }
}

/* รหัสสินค้า contrast 4.48 ต่ำกว่าเกณฑ์ 4.5 อยู่ 0.02
   (ตัวหนังสือเป็นหมึกโปร่ง .68 บนพื้นขาว · ขยับเป็น .72 ได้ 4.72) */
.theme-wplms ul.products li.product small,
.theme-wplms .summary small {
  color: rgba(34, 34, 34, .74) !important;
}

/* คำโปรยของหน้า/กล่องต้อนรับ 18px และข้อความตะกร้าว่าง 20px */
.theme-wplms .summary .woocommerce-product-details__short-description p,
.theme-wplms p.well,
.theme-wplms .cart-empty.woocommerce-info {
  font-size: var(--ck-fs-body) !important;
}

/* กล่องต้อนรับหน้าเข้าสู่ระบบ: บรรทัดยาว 80 ตัวอักษร
   68ch เป็นเพดานกันบรรทัดยาวเกินไปในคอลัมน์กว้าง ๆ แต่ตัวกล่องเป็น block ที่ margin ซ้าย-ขวาเป็น 0
   พอเพดานทำงาน กล่องจะหดชิดซ้ายอย่างเดียว ไม่ใช่หดเข้าหากลาง · ต้องใส่ margin auto คู่กันเสมอ */
.theme-wplms p.well {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* หน้าเข้าสู่ระบบ: คอลัมน์กว้างแค่ ~675px (≈44ch) เพดาน 68ch จึงไม่ได้ช่วยเรื่องความยาวบรรทัดเลย
   มีแต่ทำให้กล่องสั้นกว่าหัวข้อ "เข้าสู่ระบบ" อยู่ 53px ขอบขวาเลยไม่ตรงกับของอื่นในคอลัมน์
   และทำให้ปุ่ม LINE (ซึ่ง center ตามคอลัมน์) ดูเยื้องขวาเมื่อเทียบกับกล่อง
   >> ในคอลัมน์นี้ให้กล่องเต็มความกว้าง ขอบซ้าย-ขวาจะตรงกับหัวข้อและปุ่มพอดี */
.theme-wplms.page-template-login-page p.well {
  max-width: 100%;
}

/* ชื่อคอร์สในหน้ารวมคอร์สบนมือถือยังเป็น 20px (เดสก์ท็อปเข้าสเกลแล้ว) */
@media (max-width: 700px) {
  .theme-wplms ul.products li.product h2.woocommerce-loop-product__title {
    font-size: var(--ck-fs-title) !important;
  }
  /* <small> ข้างในสืบทอดขนาดมาเป็น 12.35px (65% ของ 19) ต้องกำหนดตรงๆ */
  .theme-wplms ul.products li.product h2.woocommerce-loop-product__title small {
    font-size: var(--ck-fs-caption) !important;
  }
}

/* ปุ่มขึ้นบนสุด: กล่องนอกกว้าง 47px แล้ว แต่ตัวลิงก์ข้างในยังกว้าง 23px */
.theme-wplms #scrolltop > a {
  width: 100% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* ชื่อคอร์สในการ์ด "คอร์สเรียนของฉัน" เป็นลิงก์หลักของการ์ด สูงแค่ 28px */
body.buddypress #buddypress ul#course-list.grid .item-title a {
  padding: 8px 0 !important;
  min-height: 44px;
  display: flex !important;
  align-items: center;
}


/* ============================================================
   22. รอบตรวจจากลูกค้า (2026-08-17)
   ============================================================ */

/* ---------- 22.1 เส้นขีดยาวใต้บล็อกอัปโหลดสลิป ----------
   ต้นเหตุ: ธีมตั้ง section.woocommerce-order-details{border-top:3px solid rgba(0,0,0,.08)}
   สมัยที่หน้านี้ไม่มีการ์ด เส้นนี้ทำหน้าที่คั่น section
   ตอนนี้แต่ละส่วนเป็นการ์ดขาวแยกกันชัดอยู่แล้ว เส้นจึงกลายเป็นขีดลอยๆ ที่ไม่มีหน้าที่ */
body.woocommerce-order-received section.woocommerce-order-details,
body.woocommerce-account section.woocommerce-order-details {
  border-top: 0 !important;
  padding-top: 0 !important;
}


/* ---------- 22.2 การ์ด "รายละเอียดการสั่งซื้อ" ระยะข้างในเพี้ยน ----------
   วัดได้: <td> padding 15/0/15/0 = ไม่มีระยะซ้าย-ขวาเลย ตัวหนังสือจึงชนขอบการ์ด
   ขณะที่ <th> มี 9/12 · คนละค่ากันในตารางเดียว
   และคอลัมน์เพี้ยน: ชื่อคอร์ส 427px แต่ช่องยอดเงิน 853px (ตัวเลขได้พื้นที่มากกว่าชื่อ 2 เท่า) */
body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce-table--order-details td,
body.woocommerce-account .woocommerce-table--order-details th,
body.woocommerce-account .woocommerce-table--order-details td {
  padding: var(--ck-sp-2) var(--ck-sp-3) !important;
  vertical-align: top !important;
}
body.woocommerce-order-received .woocommerce-table--order-details thead th,
body.woocommerce-account .woocommerce-table--order-details thead th {
  padding-top: var(--ck-sp-3) !important;
  padding-bottom: var(--ck-sp-1) !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tbody tr:last-child td,
body.woocommerce-account .woocommerce-table--order-details tbody tr:last-child td {
  padding-bottom: var(--ck-sp-3) !important;
}
@media (min-width: 782px) {
  /* ชื่อคอร์สคือเนื้อหาหลักของตาราง ต้องได้พื้นที่มากกว่าตัวเลข */
  body.woocommerce-order-received .woocommerce-table--order-details th.product-name,
  body.woocommerce-order-received .woocommerce-table--order-details td.product-name,
  body.woocommerce-account .woocommerce-table--order-details th.product-name,
  body.woocommerce-account .woocommerce-table--order-details td.product-name {
    width: 72% !important;
  }
}
/* หัวคอลัมน์ "รวม" ต้องชิดขวาให้ตรงแนวกับตัวเลขข้างล่าง (เดิมหัวชิดซ้าย ตัวเลขชิดขวา) */
body.woocommerce-order-received .woocommerce-table--order-details th.product-total,
body.woocommerce-account .woocommerce-table--order-details th.product-total {
  text-align: right !important;
}


/* ---------- 22.3 มือถือ: การ์ดกว้างแค่ 249px ในจอ 390px ----------
   วัดได้ที่ 390px · ระยะซ้ายของแต่ละชั้นบวกกันไปเรื่อยๆ
     .vc_row (margin 10 + padding 20) → .vc_column-inner (padding 15) → การ์ด (padding 24)
   ผลคือหัวข้อเริ่มที่ 20px แต่การ์ดเริ่มที่ 65px และตัวหนังสือในการ์ดเริ่มที่ 89px
   บนจอ 390px เหลือเนื้อที่จริง 249px · ระยะขอบกินไป 36% ของจอ
   แก้: บนมือถือให้ระยะขอบมาจาก .container ที่เดียว (15px) ชั้นอื่นเป็น 0 */
@media (max-width: 700px) {
  body.woocommerce-order-received #content .vc_row.wpb_row,
  body.woocommerce-checkout #content .vc_row.wpb_row,
  body.theme-wplms.page-id-222845 #content .vc_row.wpb_row,
  body.theme-wplms.page-id-222905 #content .vc_row.wpb_row,
  body.theme-wplms.page-id-223027 #content .vc_row.wpb_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.woocommerce-order-received #content .vc_column-inner,
  body.woocommerce-checkout #content .vc_column-inner,
  body.theme-wplms.page-id-222845 #content .vc_column-inner,
  body.theme-wplms.page-id-222905 #content .vc_column-inner,
  body.theme-wplms.page-id-223027 #content .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* ระยะในการ์ดบนมือถือลดลงหนึ่งขั้น (24 → 16) เพราะจอแคบ */
  body.woocommerce-order-received ul.woocommerce-order-overview,
  .theme-wplms .coverslipok_confirm_form_inner,
  body.woocommerce-order-received .forminator-ui.forminator-custom-form,
  body.theme-wplms.page-id-222845 .forminator-ui.forminator-custom-form {
    padding-left: var(--ck-sp-2) !important;
    padding-right: var(--ck-sp-2) !important;
  }
  body.woocommerce-order-received .woocommerce-table--order-details th,
  body.woocommerce-order-received .woocommerce-table--order-details td,
  body.woocommerce-account .woocommerce-table--order-details th,
  body.woocommerce-account .woocommerce-table--order-details td {
    padding-left: var(--ck-sp-2) !important;
    padding-right: var(--ck-sp-2) !important;
  }
}


/* ---------- 22.4 ปุ่มตะกร้าลอยมุมล่างขวา ----------
   ตรวจแล้ว: เว็บจริงมีปุ่มนี้ทุกหน้ายกเว้นหน้าบทเรียน (ไม่ได้เกิดจาก reskin)
   แต่ "หน้าที่กำลังจ่ายเงินอยู่" ไม่ควรมีทางออกไปตะกร้าค้างอยู่บนจอ
 · ตะกร้าบน navbar ยังอยู่ครบ ถ้าจะกลับไปแก้ตะกร้ายังทำได้
   ทำที่ CSS ไปก่อน ของจริงควรปิดที่ตั้งค่าปลั๊กอิน Side Cart (ดู HANDOFF ข้อ 15)

   เพิ่มหน้าตะกร้าเข้ามาด้วย (2026-08-19): ปุ่มลอยเปิดตะกร้าสไลด์ซึ่งแสดงของชุดเดียว
   กับที่อยู่บนหน้าอยู่แล้ว บนหน้านี้จึงเป็นทางลัดที่ชี้กลับมาที่เดิม
   ครอบทั้งตะกร้าว่างและตะกร้ามีของ เพราะใช้คลาส woocommerce-cart ร่วมกัน */
body.woocommerce-cart .xoo-wsc-basket,
body.woocommerce-checkout .xoo-wsc-basket,
body.woocommerce-order-received .xoo-wsc-basket,
body.theme-wplms.page-id-222845 .xoo-wsc-basket,
body.theme-wplms.page-id-222905 .xoo-wsc-basket,
body.theme-wplms.page-id-223027 .xoo-wsc-basket {
  display: none !important;
}


/* ---------- 22.5 มือถือ: กล่องสรุปคำสั่งซื้อเรียงมั่ว ----------
   วัดได้: 5 รายการเป็น list-item ลอยตามความยาวข้อความ (100 / 149 / 214 / 114 / 177px)
   บางบรรทัดอยู่คู่กัน บางบรรทัดขึ้นบรรทัดใหม่ และมีเส้นประคั่นค้างอยู่กลางอากาศ
   บนจอแคบให้เรียงลงมาบรรทัดละรายการ คั่นด้วยเส้นแนวนอนแทน */
@media (max-width: 700px) {
  body.woocommerce-order-received ul.woocommerce-order-overview {
    display: block !important;
  }
  body.woocommerce-order-received ul.woocommerce-order-overview li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ck-ink-10) !important;
    padding: var(--ck-sp-1) 0 !important;
    margin: 0 !important;
  }
  body.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body.woocommerce-order-received ul.woocommerce-order-overview li:first-child {
    padding-top: 0 !important;
  }
}


/* ---------- 22.6 ตารางสรุปในหน้าชำระเงิน (คนละตารางกับหน้ายืนยันคำสั่งซื้อ) ----------
   หน้า /checkout/ ใช้ .woocommerce-checkout-review-order-table
   หน้า order-received ใช้ .woocommerce-table--order-details
   ข้อ 22.2 แก้ไว้เฉพาะตัวหลัง ตัวนี้จึงยังเป็น <td> padding 15/0/15/0 = ชื่อคอร์สชนขอบการ์ด */
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: var(--ck-sp-2) var(--ck-sp-3) !important;
  vertical-align: middle !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  padding-top: var(--ck-sp-3) !important;
  padding-bottom: var(--ck-sp-1) !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child td {
  padding-bottom: var(--ck-sp-3) !important;
}
/* หัวคอลัมน์กับตัวเลขต้องอยู่แนวเดียวกัน */
body.woocommerce-checkout .woocommerce-checkout-review-order-table th.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  text-align: right !important;
}


/* ---------- 22.7 กรอบบางๆ รอบกล่อง "ยอมรับเงื่อนไข + สั่งซื้อ" ----------
   ธีมตั้ง #payment{border:1px solid rgba(0,0,0,.08)} · เป็นกรอบเปล่าไม่มีพื้น
   ทั้งหน้าใช้ระบบการ์ดขาว กรอบเส้นเดี่ยวจึงดูเหมือนของหลงเหลือ
   กล่องนี้คือ "ขั้นตอนสุดท้ายก่อนจ่ายเงิน" ควรเป็นการ์ดเต็มตัวเหมือนกล่องอื่น */
body.woocommerce-checkout #payment.woocommerce-checkout-payment {
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-card) !important;
  margin-top: var(--ck-sp-3) !important;
}
body.woocommerce-checkout #payment .form-row.place-order {
  padding: var(--ck-sp-3) !important;
  margin: 0 !important;
}
@media (max-width: 700px) {
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding-left: var(--ck-sp-2) !important;
    padding-right: var(--ck-sp-2) !important;
  }
  body.woocommerce-checkout #payment .form-row.place-order {
    padding: var(--ck-sp-2) !important;
  }
}


/* ---------- 22.8 ระยะจากเนื้อหาท้ายหน้าถึงโลโก้ใน footer ----------
   วัดทั้ง 18 หน้าที่ 1440px ได้ค่าตั้งแต่ 70 ถึง 145px · ไม่มีจังหวะร่วมกัน
     70  หน้าสินค้า          83  โปรไฟล์ / หน้าคอร์ส / สั่งซื้อสำเร็จ
     95  ตะกร้า              103 ชำระเงิน        107 ยืนยันคำสั่งซื้อ
     135 ตะกร้ามีสินค้า      145 แจ้งชำระเงิน
   ต้นเหตุ: บล็อกสุดท้ายของแต่ละหน้ามี margin-bottom ของตัวเองไม่เท่ากัน
   แล้วไปบวกกับ padding-bottom 35px ของ #content อีกที

   วิธีคุม: ตัด margin ท้ายของบล็อกสุดท้ายทิ้ง ให้ระยะมาจาก #content ที่เดียว
   ตั้งไว้ 72px บนเดสก์ท็อป (8×9) และ 48px บนมือถือ · เป็นขอบเขต "จบหน้า" ก่อนเข้า footer */
.theme-wplms #content > .container:last-child,
.theme-wplms section.main {
  padding-bottom: 0 !important;
}
.theme-wplms #content {
  padding-bottom: var(--ck-sp-4) !important;   /* 40px = ระยะระหว่าง section ตามระบบ */
}
/* บล็อกสุดท้ายของแต่ละหน้า ไม่ต้องมีระยะท้ายของตัวเองอีก */
.theme-wplms .woocommerce-table--order-details,
.theme-wplms .coverslipok_confirm_form_inner,
.theme-wplms .cart-collaterals,
.theme-wplms .woocommerce-checkout-payment,
.theme-wplms .forminator-ui.forminator-custom-form,
.theme-wplms .woocommerce-MyAccount-content,
.theme-wplms .woocommerce {
  margin-bottom: 0 !important;
}

@media (max-width: 700px) {
  .theme-wplms #content {
    padding-bottom: var(--ck-sp-3) !important;   /* 24px บนจอแคบ */
  }
}


/* ---------- 22.9 "× 1" ในตารางลอยอยู่กลางช่อง ----------
   วัดทีละตัวอักษรแล้วเจอต้นเหตุ: ธีมพิมพ์ HTML เป็น
     "\n\t\t\t\t\t\tเคมีม.4 เทอม 1 (1M) \t\t\t\t\t\t <strong class="product-quantity">× 1</strong>"
   ช่องว่างชุดท้าย (ก่อน <strong>) ถูก render กว้าง **153px** ขณะที่ช่องว่างปกติในชื่อกว้าง 5px
   จึงดันจำนวนไปลอยกลางช่อง · ลบข้อความออกด้วย CSS ไม่ได้ และ word-spacing ก็จะไปบีบช่องว่างในชื่อด้วย

   ทางออกที่ไม่ต้องพึ่งช่องว่างเลย: ให้จำนวนขึ้นบรรทัดใหม่ใต้ชื่อ เป็นข้อมูลรอง (caption)
   อ่านเป็น "ชื่อคอร์ส / × 1" ซึ่งชัดกว่าและใช้ได้ทั้งจอกว้างและจอแคบ */
.theme-wplms .shop_table td.product-name .product-quantity,
.theme-wplms .woocommerce-table td.product-name .product-quantity {
  display: block;
  float: none;
  margin-top: 6px;
  color: var(--ck-ink-60) !important;
  font-weight: 400 !important;
  font-size: var(--ck-fs-caption) !important;
  white-space: nowrap;
}


/* ---------- 22.10 ระยะจากแถบขั้นตอนถึงหัวข้อหน้า ไม่ตรงกันสักหน้า ----------
   วัดที่ 1440px และ 390px ได้เท่ากันทั้งสองขนาด แต่คนละค่ากันทุกหน้า
     หน้า 6 ชำระเงิน       รูป→หัวข้อ 52px · หัวข้อ→เนื้อหา 43px
     หน้า 7 ยืนยันคำสั่งซื้อ            20px ·               40px
     หน้า 9 ลงทะเบียนหนังสือ            0px ·                9px
     หน้า 8 แจ้งชำระเงิน · ไม่มีแถบขั้นตอนเลย (ดู task ฝั่ง dev)
     หน้า 10 สั่งซื้อสำเร็จ · ไม่มีหัวข้อที่เป็นข้อความ มีแต่รูป

   ตั้งให้เท่ากันทุกหน้า: รูป→หัวข้อ = 40px (ระยะระหว่าง section)
                        หัวข้อ→เนื้อหา = 24px (ระยะระหว่างบล็อกในกลุ่มเดียวกัน) */
body.woocommerce-checkout #content h2.vc_custom_heading,
body.woocommerce-order-received #content h2.vc_custom_heading,
body.theme-wplms.page-id-222845 #content h2.vc_custom_heading,
body.theme-wplms.page-id-222905 #content h2.vc_custom_heading,
body.theme-wplms.page-id-223027 #content h2.vc_custom_heading {
  margin-top: var(--ck-sp-4) !important;
  margin-bottom: var(--ck-sp-3) !important;
}
/* ตัวเว้นวรรคของ page builder ในหน้าชำระเงินยังเหลืออยู่ (หน้าอื่นปิดไปแล้วที่ 21.7)
   จำกัดใน #content เหมือนกัน ไม่ให้ไปโดน footer */
body.woocommerce-checkout #content .vc_empty_space {
  height: 0 !important;
}
/* แถวที่ใส่รูปแถบขั้นตอน ไม่ต้องมีระยะท้ายของตัวเอง */
body.woocommerce-checkout #content .wpb_single_image,
body.woocommerce-order-received #content .wpb_single_image,
body.theme-wplms.page-id-222905 #content .wpb_single_image {
  margin-bottom: 0 !important;
}


/* ---------- 22.11 หัวข้อในการ์ดหน้าแจ้งชำระเงิน ไม่มีลำดับชั้น ----------
   วัดได้: "รายละเอียดลูกค้า" (ชื่อการ์ด) กับ "โอนเงินผ่านธนาคาร" / "สลิปการชําระเงิน"
   (หัวข้อย่อยข้างใน) เป็น 19px น้ำหนัก 600 เท่ากันหมด · อ่านไม่ออกว่าอันไหนครอบอันไหน
   และ margin-top 20px ไม่อยู่ในสเกล 8pt

   ธีมแยกไว้ให้แล้วโดยไม่ตั้งใจ: ชื่อการ์ดอยู่ใน .subheader ส่วนหัวข้อย่อยอยู่ใน .subheader.mt10
   จัดเป็นสองระดับตามระบบ: Title 19/700 → Body 16/700 */
/* ต้องใส่ #coverslipok_confirm_form ด้วย เพราะข้อ 20.6 ใช้ selector ที่มี id
   ซึ่ง id ชนะคลาสกี่ตัวก็ตาม ถ้าเขียนด้วยคลาสอย่างเดียวจะแพ้ */
.theme-wplms #coverslipok_confirm_form .subheader:not(.mt10) h3,
.theme-wplms .coverslipok_confirm_form_inner .subheader:not(.mt10) h3 {
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  /* ไม่ต้องมีระยะท้ายของตัวเอง เพราะหัวข้อย่อยตัวถัดไปมี margin-top 24px อยู่แล้ว
     ถ้าใส่ทั้งคู่จะกลายเป็น 48px (วัดได้จริงบนมือถือ) */
  margin: 0 !important;
}
.theme-wplms #coverslipok_confirm_form .subheader.mt10 h3,
.theme-wplms .coverslipok_confirm_form_inner .subheader.mt10 h3 {
  font-size: var(--ck-fs-body) !important;
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
  margin: var(--ck-sp-3) 0 var(--ck-sp-2) !important;
}
/* แถวหัวข้อย่อยของธีมมี margin-top 10px ของตัวเองซ้อนมาอีกชั้น */
.theme-wplms .coverslipok_confirm_form_inner .subheader.mt10 {
  margin-top: 0 !important;
}

/* หน้าชำระเงิน: แถวของ page builder ที่ครอบฟอร์มมี padding-top 20px ซ้อนกับ margin ของหัวข้อ
   ทำให้ระยะหัวข้อ→เนื้อหาเป็น 44px ขณะที่หน้าอื่นได้ 24px */
body.woocommerce-checkout #content .vc_row.vc_inner {
  padding-top: 0 !important;
}


/* ============================================================
   23. คำในเส้นทางซื้อ (ทำตามข้อเสนอใน handoff/TASKS-DEV.md)
   ============================================================
   วิธีทำใน mock: ซ่อนข้อความเดิมด้วย font-size:0 แล้วพิมพ์คำใหม่ผ่าน ::after
   (วิธีเดียวกับที่ใช้กับ "LOGIN → เข้าสู่ระบบ" และ copyright ใน footer)

   ⚠️ ตอนขึ้นจริงต้องแก้ที่ข้อความจริง ไม่ใช่ CSS
 · คำแปลของ WooCommerce / ตั้งค่า Forminator / ชื่อหน้าใน Pages
      รายละเอียดว่าแก้ที่ไหนอยู่ใน handoff/TASKS-DEV.md
      CSS ชุดนี้มีไว้ให้ลูกค้าเห็นภาพก่อนตัดสินใจ */

/* ---------- 23.1 (A1) เสียงแบรนด์: "ขอบคุณค่ะ" เป็นคำแปลของ WooCommerce ----------
   แบรนด์คือ "เคมีพี่กัปตัน" ทั้งเส้นทางใช้ พี่/ครับ ยกเว้นบรรทัดนี้บรรทัดเดียว */
body.woocommerce-order-received p.woocommerce-notice--success {
  font-size: 0 !important;
  line-height: 0 !important;
}
body.woocommerce-order-received p.woocommerce-notice--success::after {
  content: 'ได้รับคำสั่งซื้อของน้องแล้วครับ';
  display: block;
  font-size: var(--ck-fs-title);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ck-ink);
}
/* ---------- 23.2 (A2) บอกขั้นตอนถัดไป ----------
   เดิมหน้านี้บอกแค่ว่าได้รับคำสั่งซื้อ ไม่บอกว่าต้องทำอะไรต่อและรอนานแค่ไหน */
body.woocommerce-order-received ul.woocommerce-order-overview::before {
  content: 'โอนเงินตามบัญชีด้านล่าง แล้วอัปโหลดสลิปในหน้านี้ได้เลย\A แอดมินจะตรวจสลิปและเปิดคอร์สให้ภายใน 24 ชั่วโมง';
  white-space: pre-line;
  display: block;
  font-size: var(--ck-fs-body);
  color: var(--ck-ink-60);
  line-height: 1.7;
  margin-bottom: var(--ck-sp-3);
  padding-bottom: var(--ck-sp-3);
  border-bottom: 1px solid var(--ck-ink-10);
}

/* ---------- 23.3 (B1) ปุ่มส่งสลิป: "ยืนยัน" ไม่ได้บอกว่ายืนยันอะไร ---------- */
body.woocommerce-order-received .forminator-ui.forminator-custom-form button.forminator-button-submit,
body.theme-wplms.page-id-222845 .forminator-ui.forminator-custom-form button.forminator-button-submit {
  font-size: 0 !important;
}
body.woocommerce-order-received .forminator-ui.forminator-custom-form button.forminator-button-submit::after,
body.theme-wplms.page-id-222845 .forminator-ui.forminator-custom-form button.forminator-button-submit::after {
  content: 'ส่งสลิป';
  font-size: var(--ck-fs-title);
  font-weight: 700;
}
/* ปุ่มเลือกไฟล์เป็นภาษาอังกฤษกลางหน้าไทย
   ต้องแยกตามหน้า เพราะหน้าลงทะเบียนหนังสือให้อัปโหลด "รูปนักเรียน" ไม่ใช่สลิป */
body.theme-wplms .forminator-ui.forminator-custom-form button.forminator-button-upload {
  font-size: 0 !important;
}
body.woocommerce-order-received .forminator-ui.forminator-custom-form button.forminator-button-upload::after,
body.theme-wplms.page-id-222845 .forminator-ui.forminator-custom-form button.forminator-button-upload::after {
  content: 'เลือกไฟล์สลิป';
  font-size: var(--ck-fs-body);
  font-weight: 700;
}
body.theme-wplms.page-id-222905 .forminator-ui.forminator-custom-form button.forminator-button-upload::after {
  content: 'เลือกรูปภาพ';
  font-size: var(--ck-fs-body);
  font-weight: 700;
}

/* ปุ่มส่งในหน้า /slipok-confirm/ เป็นของฟอร์มเก่า (#noti-submit) ต้องใช้คำเดียวกัน */
.theme-wplms button#noti-submit {
  font-size: 0 !important;
}
.theme-wplms button#noti-submit::after {
  content: 'ส่งสลิป';
  font-size: var(--ck-fs-title);
  font-weight: 700;
}

/* ---------- 23.4 (B2) ปุ่มท้ายหน้าชำระเงิน ----------
   "สั่งซื้อ" ใช้ซ้ำกับปุ่มบนหน้าคอร์ส (ซึ่งแค่หยิบใส่ตะกร้า) ปุ่มนี้คือการยืนยันจริง */
body.woocommerce-checkout #place_order {
  font-size: 0 !important;   /* ปุ่มนี้มีเฉพาะหน้า /checkout/ อยู่แล้ว ไม่ต้องกันหน้าอื่น */
}
body.woocommerce-checkout #place_order::after {
  content: 'ยืนยันคำสั่งซื้อ';
  font-size: var(--ck-fs-title);
  font-weight: 700;
}

/* ---------- 23.5 (B3) หัวข้อหน้าชำระเงินไม่ตรงกับสิ่งที่หน้านั้นทำ ----------
   ผู้ใช้ login ด้วย LINE มาแล้ว ไม่ได้กำลังสมัครบัญชี */
/* ต้องกัน .woocommerce-order-received ออก เพราะหน้ายืนยันคำสั่งซื้อก็มีคลาส
   woocommerce-checkout ติดมาด้วย ถ้าไม่กันไว้หัวข้อ "รอการชำระเงิน" จะโดนทับ */
body.woocommerce-checkout:not(.woocommerce-order-received) #content h2.vc_custom_heading {
  font-size: 0 !important;
}
body.woocommerce-checkout:not(.woocommerce-order-received) #content h2.vc_custom_heading::after {
  content: 'ข้อมูลผู้เรียน';
  display: block;
  font-size: var(--ck-fs-display);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ck-ink);
}

/* ---------- 23.6 คำอธิบายใต้ปุ่มยังอ้างชื่อปุ่มเดิม ----------
   ข้อความเขียนว่า กดปุ่ม "Choose File" แต่ปุ่มเปลี่ยนเป็น "เลือกไฟล์สลิป" แล้ว
   คำอธิบายกับปุ่มต้องเรียกชื่อเดียวกัน ไม่งั้นผู้ใช้จะหาปุ่มไม่เจอ */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field .forminator-description {
  font-size: 0 !important;
  /* ตัวเดิมเป็น <span> พอ font-size เป็น 0 กล่องจะกว้าง 0 ข้อความใน ::after
     เลยตัดบรรทัดเป็นตัวอักษรละบรรทัด ต้องบังคับให้เป็นบล็อกเต็มความกว้าง
     และต้องล้าง max-width:68ch จากข้อ 21.9 ด้วย เพราะหน่วย ch คิดจาก font-size
     พอ font-size เป็น 0 ค่า 68ch จึงกลายเป็น 0 ตามไปด้วย */
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
/* ต้องซ่อนลูกข้างในด้วย · <strong> กับรูป emoji มี font-size ของตัวเองจากข้อ 20.7
   ถ้าไม่ซ่อน ข้อความเดิมจะโผล่คู่กับข้อความใหม่ และเพราะพ่อเป็น font-size:0
   การตัดบรรทัดจะพัง กลายเป็นคำละบรรทัด (เจอจริงในหน้าแจ้งชำระเงิน) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field .forminator-description > * {
  display: none !important;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field .forminator-description::after {
  content: 'กดปุ่ม "เลือกไฟล์สลิป" แล้วเลือกรูปสลิปโอนเงิน ตรวจยอดให้ตรงก่อนส่งนะครับ';
  display: block;
  width: 100%;
  font-size: var(--ck-fs-caption);
  color: var(--ck-ink-60);
  line-height: 1.5;
  margin-bottom: var(--ck-sp-1);
}
/* ฟอร์มลงทะเบียนหนังสือมีคำอธิบายของตัวเอง 28 จุด ห้ามโดนทับ */
body.theme-wplms.page-id-222905 .forminator-ui.forminator-custom-form .forminator-field .forminator-description {
  font-size: var(--ck-fs-caption) !important;
}
body.theme-wplms.page-id-222905 .forminator-ui.forminator-custom-form .forminator-field .forminator-description::after {
  content: none !important;
}
body.theme-wplms.page-id-222905 .forminator-ui.forminator-custom-form .forminator-field .forminator-description > * {
  display: inline !important;
}


/* ---------- 23.7 โลโก้ footer ใหญ่เกินบนมือถือเฉพาะหน้าสั่งซื้อสำเร็จ ----------
   วัดที่ 390px: หน้า 10 โลโก้ 385×117 ขณะที่หน้าอื่น 258×78 (เดสก์ท็อปเท่ากันหมด 270×82)
   หน้านี้ใช้ layout ของ page builder คนละชุด โลโก้เลยไม่โดนจำกัดความกว้างเหมือนหน้าอื่น */
@media (max-width: 700px) {
  .theme-wplms #Wiefooter .wpb_single_image img,
  .theme-wplms #Wiefooter figure img {
    max-width: 258px !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
  }
  /* ไอคอนโซเชียลเป็นรูปเล็ก ไม่ต้องโดนกฎเดียวกัน */
  .theme-wplms #Wiefooter .vc_row .vc_col-sm-2 img,
  .theme-wplms #Wiefooter .vc_row .vc_col-xs-2 img {
    max-width: 100% !important;
  }
}

/* ---------- 23.8 ระยะท้ายหน้าของหน้า 8 กับ 9 เกินหน้าอื่น ----------
   วัดที่ 1440px: เนื้อหาตัวสุดท้าย → โลโก้ footer
     หน้า 6 · 7 · 10 = 88px   หน้า 8 = 110px   หน้า 9 = 104px
   ต้นเหตุคนละตัว
     หน้า 8: กล่อง div.content ของธีมมี margin-bottom 30px
     หน้า 9: แถวสุดท้ายของฟอร์ม (.forminator-row-last) มี margin-bottom 16px
   ตัดทั้งคู่ทิ้ง ให้ระยะมาจาก #content ที่เดียวเหมือนหน้าอื่น */
body.theme-wplms.page-id-222845 #content div.content {
  margin-bottom: 0 !important;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-row-last {
  margin-bottom: 0 !important;
}

/* หน้า 8 การ์ดถูกลด padding ล่างเหลือ 8px เพราะรอฟอร์มอัปโหลดมาต่อท้าย (กฎข้อ 20.8)
   แต่หน้านี้ฟอร์มอยู่ในการ์ดอยู่แล้ว ไม่มีอะไรมาต่อ จึงคืนเป็น 24px ให้เท่าหน้าอื่น */
body.theme-wplms.page-id-222845 .coverslipok_confirm_form_inner {
  padding-bottom: var(--ck-sp-3) !important;
  /* และคืนมุมล่างด้วย · กฎข้อ 20.8 ตัดมุมล่างทิ้งเพื่อให้การ์ดต่อกับฟอร์มอัปโหลด
     แต่หน้านี้ไม่มีฟอร์ม Forminator (ตรวจแล้ว) การ์ดจึงมุมบนมนแต่มุมล่างเหลี่ยม */
  border-bottom-left-radius: var(--ck-r) !important;
  border-bottom-right-radius: var(--ck-r) !important;
}


/* ============================================================
   24. แถบขั้นตอนการสั่งซื้อ · ภาพชุดใหม่ (2026-08-18)
   ============================================================
   เดิมเว็บใช้ภาพเดียวทุกขนาดจอ (1300×215) บนมือถือ WordPress ส่งตัวย่อ 327×54 มาแสดง
   ตัวหนังสือเหลือราว 6px อ่านไม่ออก · แก้ด้วย CSS ไม่ได้ ต้องได้ไฟล์ใหม่ (HANDOFF ข้อ 1)

   ได้ไฟล์ใหม่แล้ว 10 ไฟล์ = 5 สถานะ × 2 ขนาดจอ พื้นใส วัดแล้วตรงสเปกทุกไฟล์
     มือถือ    1080×314  ตัวอักษร 44px ในไฟล์ (= 14.6px บนจอ 360) คำสั้น 2 บรรทัด
     เดสก์ท็อป 2600×430  สัดส่วนเท่าไฟล์เดิมเป๊ะ (6.05:1)          คำยาว
   สีในไฟล์ตรงโทเคน: #2BB9A9 · #C9C9C9 · ตัวอักษร #222222 ทุกขั้น (รวมขั้นที่ยังไม่ถึง)

   วิธี: วาดภาพใหม่เป็น background ของกล่องที่ครอบภาพเดิม แล้วซ่อน <img> เดิม
        ทำแบบนี้เพราะ <img> ตัวเดียวสลับไฟล์ตามขนาดจอไม่ได้
   ⚠️ ต้องปล่อยภาพเดิมคาไว้ใน WPBakery ห้ามลบ · CSS ใช้ชื่อไฟล์เดิมเป็นตัวชี้เป้า

   ⚠️ ตอนขึ้นจริง: อัปโหลด 10 ไฟล์เข้า Media Library แล้วแก้ 10 บรรทัดใต้บรรทัดนี้
      ให้เป็น URL เต็ม เช่น url("https://chemistryk.online/wp-content/uploads/2026/08/step-mobile-1.png")
      path สั้นแบบนี้ใช้ได้เฉพาะใน mock (อ้างอิงจากที่อยู่ของ override.css คือโฟลเดอร์ mock/) */
:root {
  --ck-step-m1: url("steps/step-mobile-1.png");    /* /cart/                    */
  --ck-step-m2: url("steps/step-mobile-2.png");    /* /checkout/                */
  --ck-step-m3: url("steps/step-mobile-3.png");    /* /checkout/order-received/ */
  --ck-step-m4: url("steps/step-mobile-4.png");    /* /order-completed/         */
  --ck-step-m5: url("steps/step-mobile-5.png");    /* /order-confirm/           */
  --ck-step-d1: url("steps/step-desktop-1.png");
  --ck-step-d2: url("steps/step-desktop-2.png");
  --ck-step-d3: url("steps/step-desktop-3.png");
  --ck-step-d4: url("steps/step-desktop-4.png");
  --ck-step-d5: url("steps/step-desktop-5.png");
}

/* ชี้เป้าด้วยชื่อไฟล์เดิม ไม่ใช่ page-id เพราะหน้า /checkout/ กับหน้ายืนยันคำสั่งซื้อ
   ใช้ page-id เดียวกัน (81) แต่เป็นคนละขั้น · ชื่อไฟล์เป็นสิ่งเดียวที่แยกสองหน้านี้ออกจากกัน
   ตรวจแล้วทั้ง mock มีภาพชื่อขึ้นต้น IMG_64 อยู่ 5 ไฟล์นี้เท่านั้น ไม่ชนกับภาพอื่น */

/* figure ของ page builder เป็น inline-block ความกว้างจึงมาจากตัวภาพข้างใน
   พอซ่อนภาพ กล่องยุบเหลือ 0×0 พื้นหลังเลยไม่มีที่ให้วาด (วัดได้จริงตอนทำ)
   ต้องบังคับให้เป็นบล็อกเต็มความกว้างก่อน */
.theme-wplms .vc_figure:has(img[src*="IMG_64"]),
.theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_64"]) {
  display: block;
  width: 100%;
}
.theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_64"]) {
  /* ความกว้างของกล่องเป็นตัวคุมขนาดทุกอย่าง เพราะภาพย่อทั้งใบตามกล่อง
     วัดจากไฟล์ชุด 2026-08-19 รอบ 3 (1724×225 · ตัวอักษรสูง 28px ในไฟล์)

       1370px (เต็มคอลัมน์) → ป้ายสูง 21px · วงกลม 130px · กล่องสูง 179px
       1100px               → ป้ายสูง 17px · วงกลม 105px · กล่องสูง 144px
       1000px               → ป้ายสูง 15px · วงกลม  95px · กล่องสูง 131px  ← ใช้ค่านี้
        900px               → ป้ายสูง 14px · วงกลม  86px · กล่องสูง 117px

     เคยตั้งเป็นเต็มคอลัมน์เพื่อให้ขอบตรงกับหัวข้อหน้า แต่ผลคือป้ายขั้นตอนสูง 21px
     เท่ากับหัวข้อหน้า (วัดบนหน้าจริงได้ 21 กับ 22) แถบบอกทางจึงดังเท่าหัวข้อของหน้า
     ลูกค้าเห็นแล้วบอกว่ากว้างเกินไปทุกหน้า · ยึดขนาดที่เหมาะกว่าการเรียงขอบ

     1000px ห่างจากคอลัมน์ (1370) อยู่ 370px มากพอให้อ่านว่า "ตั้งใจจัดกึ่งกลาง"
     ไม่ใช่ "เรียงขอบพลาด" · ค่าที่ห้ามใช้คือช่วง 1250–1350 ซึ่งเฉียดขอบคอลัมน์
     กับขอบการ์ดจนดูเหมือนวางพลาด (เคยตั้ง 1300 แล้วเจอปัญหานี้จริง) */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1724 / 225;       /* ชุด 2026-08-19 รอบ 3 · ป้ายบรรทัดเดียว */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* ซ่อนภาพเดิม · กล่องพ่อถือขนาดไว้ด้วย aspect-ratio แล้ว หน้าจึงไม่กระตุก */
.theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_64"]) > img {
  display: none !important;
}

.theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6426"]) { background-image: var(--ck-step-d1); }
.theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6427"]) { background-image: var(--ck-step-d2); }
.theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6428"]) { background-image: var(--ck-step-d3); }
.theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6429"]) { background-image: var(--ck-step-d4); }
.theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6430"]) { background-image: var(--ck-step-d5); }

/* มือถือ: สลับเป็นไฟล์คำสั้น สัดส่วนสูงกว่า (3.44:1) เพราะข้อความตัดเป็น 2 บรรทัด
   จุดตัด 767px = จุดเดียวกับที่ธีมสลับ layout อยู่แล้ว */
@media (max-width: 767px) {
  .theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_64"]) {
    aspect-ratio: 1689 / 276;   /* ชุด 2026-08-19 รอบ 3 · คำสั้นบรรทัดเดียว */
    /* ชุด 2026-08-19 ใช้คำยาวชุดเดียวกับเดสก์ท็อป ตัวอักษรจึงเล็กมากเมื่อย่อลงจอมือถือ
       ดันเต็มความกว้างที่ทำได้แล้วก็ยังได้แค่ราว 10px · ดูบันทึกท้ายข้อ 24 */
    max-width: 100%;
  }
  .theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6426"]) { background-image: var(--ck-step-m1); }
  .theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6427"]) { background-image: var(--ck-step-m2); }
  .theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6428"]) { background-image: var(--ck-step-m3); }
  .theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6429"]) { background-image: var(--ck-step-m4); }
  .theme-wplms .vc_single_image-wrapper:has(> img[src*="IMG_6430"]) { background-image: var(--ck-step-m5); }
}

/* ปุ่ม "วีดีโอถัดไป" บนแถบใต้วิดีโอ กว้างแค่ 21px (ธีมซ่อนป้ายกำกับบนมือถือ เหลือแต่ไอคอน)
   ความสูง 44px แล้ว แต่ความกว้างยังต่ำกว่าเกณฑ์ */
body.page-template-start .unit_prevnext a.unit_button {
  min-width: 44px !important;
}


/* ---------- 23.9 ตัวอักษรในปุ่มไม่อยู่กึ่งกลาง ----------
   วัดปุ่ม 44 ปุ่มจาก 8 หน้า เจอสามสาเหตุ

   ก) ปุ่มที่ตั้ง min-height ไว้ (44/56px) แต่ยังเป็น display:block
      กล่องสูงขึ้นแต่ตัวอักษรเกาะขอบบน · "ดำเนินการต่อ" ได้ 11px บน / 16px ล่าง

   ข) ปุ่มที่เปลี่ยนคำด้วย ::after · ตัวเดิมถูกตั้ง font-size:0 ทำให้ line-height เป็น 0
      ::after จึงไม่มีอะไรอ้างอิงในการจัดกึ่งกลางแนวตั้ง

   ค) ปุ่มที่ข้อความจาก ::after กว้างกว่าที่ว่างในปุ่ม จะล้นไปทางขวาข้างเดียว
      (ปุ่ม "สั่งซื้อ" หน้าสินค้า: กว้าง 121px · padding ซ้ายขวารวม 76px · เหลือให้ข้อความ 45px) */

/* ⚠️ **บั๊กที่กฎนี้เคยทำไว้ (เจอ 2026-08-19)** · `display:inline-flex !important` แบบไม่กรอง
   ไปเปิดปุ่มที่ปลั๊กอิน**ตั้งใจซ่อนด้วย inline style** ให้โผล่ขึ้นมา
   ตัวที่โดนคือปุ่มลบไฟล์แนบของ Forminator ซึ่งมี style="display:none" ติดมากับ HTML
   และจะถูก JS เปิดเองตอนผู้ใช้แนบไฟล์แล้วเท่านั้น
   ผลคือหน้า 9 โชว์ปุ่มลบไฟล์ทั้งที่ยังไม่มีไฟล์ให้ลบ (ฝั่ง before ไม่มีปัญหานี้)

   เป็นบทเรียนข้อเดิมซ้ำอีกครั้ง: **อย่า override display แบบกว้างโดยไม่เทียบ pages-before ก่อน**
   (บันทึกไว้ตั้งแต่ session แรก · ตอนนั้นโดนไอคอนตะกร้ามือถือกับปุ่มที่ 3 ในตะกร้าสไลด์)
   ทางแก้: ยกเว้น element ที่ถูกซ่อนด้วย inline style ออกไป */
.theme-wplms button:not([style*="display:none"]):not([style*="display: none"]),
.theme-wplms a.button,
.theme-wplms .button:not(input):not(select) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.25 !important;
  text-align: center;
}

/* ปุ่มที่ตั้งให้กว้างเต็มบล็อกไว้แล้ว ต้องเป็น flex ไม่ใช่ inline-flex
   ⚠️ ห้ามใส่ .single_add_to_cart_button ตรงนี้ · ปุ่มนั้นต้องย่อตามข้อความ
      ถ้าเป็น block-level จะกว้างตามคอลัมน์แม่ (121px) แล้วข้อความล้นขวา */
.theme-wplms #place_order,
.theme-wplms .forminator-button-submit,
.theme-wplms button#noti-submit,
body.buddypress #buddypress ul#course-list.grid li.course_single_item .button {
  display: flex !important;
}

/* ปุ่มที่แทนคำด้วย ::after ต้องกว้างพอกับข้อความเสมอ ไม่งั้นจะล้นข้างใดข้างหนึ่ง */
body.theme-wplms button.single_add_to_cart_button.button.alt,
body.theme-wplms ul.products li.product a.add_to_cart_button.button,
body.theme-wplms .topmenu .vbplogin {
  min-width: max-content;
}

/* input[type=submit] ใช้ flex ไม่ได้ (เป็น replaced element)
   คุมด้วย line-height ปกติแล้วให้เบราว์เซอร์จัดกึ่งกลางตามค่าเริ่มต้นของ input */
.theme-wplms input.button,
.theme-wplms input[type="submit"],
.theme-wplms input.course_button {
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ปุ่มที่แทนคำด้วย ::after ต้องไม่มี gap
   ส่วนที่ 3 ตั้ง gap:8px ไว้ให้ปุ่มที่มีไอคอนคู่กับข้อความ (เช่นปุ่ม LINE)
   แต่ปุ่มพวกนี้ยังมี text node เดิมอยู่ (font-size:0 = กว้าง 0) นับเป็น flex item ตัวหนึ่ง
   gap จึงไปแทรกระหว่าง text node ที่มองไม่เห็นกับ ::after ดันข้อความไปทางขวา 8px
   (วัดจากภาพจริง: ปุ่ม "สั่งซื้อ" ระยะซ้าย 47px ระยะขวา 39px) */
body.theme-wplms button.single_add_to_cart_button.button.alt,
body.theme-wplms ul.products li.product a.add_to_cart_button.button,
body.theme-wplms .woocommerce-checkout #place_order,
body.theme-wplms .forminator-button-submit,
body.theme-wplms .forminator-button-upload,
body.theme-wplms button#noti-submit,
body.theme-wplms .topmenu .vbplogin {
  gap: 0 !important;
}

/* ปุ่มลบไฟล์ที่แนบของ Forminator กว้าง 20–30px (ต่ำกว่าเกณฑ์ 44px)
   เป็นปุ่มไอคอนล้วน ต้องขยายพื้นที่กดโดยไม่ให้ไอคอนโตตาม */
body.theme-wplms .forminator-ui.forminator-custom-form button.forminator-button-delete {
  min-width: 44px !important;
  min-height: 44px !important;
}


/* ============================================================
   25. หน้า 9 ฟอร์มลงทะเบียนหนังสือ · กล่อง section (2026-08-18)
   ============================================================
   ลูกค้าถามว่า "แบ่ง section แล้วหรือยัง" · วัดแล้วคำตอบคือ **แบ่งแล้วแต่มองไม่ออก**

   ฟอร์มมี group อยู่แล้ว 3 กลุ่ม (#group-1/2/3 ตั้งชื่อไทยไว้ครบใน Forminator)
   แต่ที่เห็นเป็นกล่องเทาคือ **ค่าเริ่มต้นของปลั๊กอิน** ที่งาน reskin ไม่เคยแตะเลย

   | รายการ            | วัดได้                    | ปัญหา                                  |
   |-------------------|---------------------------|----------------------------------------|
   | หัวข้อ section    | 16px / 700                | เท่าป้ายกำกับช่องกรอกเป๊ะ = ไม่มีลำดับชั้น |
   | กล่อง             | #f8f8f8 · radius 4px      | เทานี้ไม่มีในชุดสี · ทั้งเว็บใช้การ์ดขาว   |
   | padding ในกล่อง   | 20/20/30/25               | ไม่สมมาตร และไม่อยู่ในสเกล 8pt          |
   | ระยะระหว่าง section | 16px                     | เท่าระยะระหว่างช่องในกลุ่มเดียวกัน        |
   | ตำแหน่งหัวข้อ     | ลอยอยู่นอกกล่อง            | ไม่ผูกกับกล่องที่มันครอบ                 |

   แก้เป็น: การ์ดขาว + แถบหัวครีม + เลขวงกลม 1/2/3 (สีเดียวกับแถบ 5 ขั้นตอน)
   เลขวงกลมทำให้อ่านออกว่าฟอร์มมีกี่ตอน แม้ยังไม่ได้เปิด Pagination ใน Forminator
   และถ้าเปิด Pagination ทีหลัง กฎชุดนี้ยังใช้ได้เหมือนเดิม (group กลายเป็นหน้าละ 1 การ์ด) */

/* ---------- 25.1 หัวข้ออยู่นอกการ์ด การ์ดถือแต่ช่องกรอก ----------
   🔁 **ข้อนี้ถูกเขียนใหม่เมื่อ 2026-08-19** เดิมทำ group เป็นการ์ดขาวแล้วใส่แถบสีที่หัว
   ลูกค้าบอกว่า "ดูไม่สวย" ทั้งเบจและเหลือง ทั้งที่เปลี่ยนเฉดไปสองรอบ

   เรนเดอร์ 5 แนวทางมาเทียบแล้วเจอว่า **ปัญหาไม่ใช่เฉดสี แต่เป็นตัวแถบเอง**
   แถบกว้างเต็มการ์ด 880px แต่มีข้อความอยู่แค่มุมซ้ายราว 200px
   ที่เหลืออีก 680px เป็นพื้นสีเปล่า จึงอ่านเป็น "สี่เหลี่ยมทาสี" ไม่ใช่หัวข้อ
   ยิ่งเปลี่ยนสีให้เข้มขึ้นเพื่อให้เห็นชัด ยิ่งเน้นพื้นที่เปล่าให้เด่นขึ้นตาม

   ทางที่ถูกคือไม่ต้องมีแถบ: ให้หัวข้ออยู่บนพื้นครีมของหน้า แล้วการ์ดขาวถือแต่ช่องกรอก
   ลำดับชั้นมาจากตำแหน่งกับขนาดตัวอักษร ไม่ใช่จากพื้นสี
   (เข้าทางโครงเดิมของ Forminator ที่วางหัวข้อไว้นอกกล่องอยู่แล้วด้วย · สู้ specificity น้อยลง) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-row > .forminator-field-group {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;           /* เดิม 0 15px · ทำให้กลุ่มหดเข้ามาจากขอบฟอร์ม */
  overflow: visible !important;
}

/* ระยะระหว่างการ์ด: เดิม 16px เท่าระยะระหว่างช่องกรอก → 40px (ระยะระหว่าง section) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-field-group) {
  margin-bottom: var(--ck-sp-4) !important;
}

/* ---------- 25.2 แถบหัวการ์ด: ครีม + เลขวงกลม ---------- */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group > .forminator-repeater-label {
  display: block;
  font-size: var(--ck-fs-title) !important;   /* 19 · แยกจากป้ายกำกับช่อง 16 */
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
  line-height: 1.4;
  margin: 0 !important;
  padding: 0 0 0 48px;                        /* 48 = เว้นที่ให้เลขวงกลม 32px + ระยะ 16 */
  position: relative;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group > .forminator-repeater-description {
  display: block;
  /* กฎข้อ 21.9 ตั้ง max-width:68ch ไว้กับ .forminator-description ทุกตัวเพื่อคุมความยาวบรรทัด
     ที่ 13px คิดเป็น 486px · คำอธิบายจึงกว้างไม่ถึงครึ่งการ์ด แถบครีมเลยขาดกลางคัน
     คำอธิบายของ section ยาวสุดราว 55 ตัวอักษรอยู่แล้ว ปลดเพดานได้โดยบรรทัดไม่ยาวเกิน */
  max-width: none !important;
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
  line-height: 1.6;
  margin: 0 !important;
  padding: 2px 0 var(--ck-sp-2) 48px;   /* 16px ท้าย = ระยะจากหัวข้อถึงการ์ด */
}

/* เลขวงกลม · ตัวอักษรสีหมึกบนเทอร์ควอยซ์ (ขาวบน #2BB9A9 ได้ contrast 2.46 ไม่ผ่าน)
   ใช้ชุดสีเดียวกับแถบ 5 ขั้นตอน: พื้น #2BB9A9 ตัวอักษร #222222 = 6.45 ผ่าน */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group > .forminator-repeater-label::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ck-teal);
  color: var(--ck-ink);
  font-size: var(--ck-fs-body);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.theme-wplms .forminator-ui.forminator-custom-form #group-1 > .forminator-repeater-label::before { content: "1"; }
body.theme-wplms .forminator-ui.forminator-custom-form #group-2 > .forminator-repeater-label::before { content: "2"; }
body.theme-wplms .forminator-ui.forminator-custom-form #group-3 > .forminator-repeater-label::before { content: "3"; }

/* ---------- 25.3 กล่องเนื้อใน = ตัวการ์ด ----------
   เดิมกล่องนี้คือตัวที่ถือสีเทา #f8f8f8 ของ Forminator ไว้
   ตอนนี้ให้เป็นการ์ดขาวเต็มตัว เพราะหัวข้อย้ายออกไปอยู่บนพื้นหน้าแล้ว */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-all-group-copies {
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--ck-r) !important;
  padding: var(--ck-sp-3) !important;   /* เดิม 20/20/30/25 ไม่สมมาตร */
}

/* ช่องกรอกเป็นพื้นโปร่ง (วัดได้ rgba(0,0,0,0)) เดิมจึงยืมสีเทาของกล่องมาใช้เป็นพื้น
   พอกล่องเป็นขาว ช่องกรอกจะเหลือแค่เส้นขอบจางๆ บนขาว = แทบไม่เห็นว่าตรงไหนให้พิมพ์
   → ให้พื้นเป็นครีม (ค่าสีอยู่ที่ข้อ 28.1 ซึ่งปรับตามที่ลูกค้าติงว่า "สีดูกลืน") */

/* ---------- 25.4 ตัดช่อง "จำนวนเงินที่ชำระ ต่อ 1 คน" ----------
   FINDINGS 3.0.1 · HANDOFF ข้อ 8 · QUOTATION เฟส 2 P3 · เสนอไว้ทั้งสามที่แล้ว
   ระบบรู้ยอดอยู่แล้ว (3,490฿) และตัวอย่างในวงเล็บเขียน "เช่น 6990" ซึ่งไม่ตรงยอดจริง
   ⚠️ CSS ซ่อนได้แต่ค่ายังถูกส่งไปกับฟอร์ม · ตอนขึ้นจริง **ต้องลบช่องนี้ใน Forminator** */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-row:has(> #currency-1) {
  display: none !important;
}

/* ---------- 25.5 ปุ่มลงทะเบียน ----------
   วัดได้: กว้าง 420px เริ่มที่ x=295 ขณะที่การ์ดอยู่ 280–1160
   = ไม่ชิดขอบการ์ด ไม่กึ่งกลาง อ่านเหมือนวางพลาด */
/* ⚠️ กฎนี้เคยเขียนพลาด 2 ชั้นพร้อมกัน · บันทึกไว้กันเขียนซ้ำ
   1) ไม่ได้จำกัดหน้า → ไปโดน .forminator-row-last ของฟอร์มอัปโหลดสลิปหน้า 7 ด้วย
   2) จัดกึ่งกลางไม่ติด เพราะปุ่มไม่ได้เป็นลูกตรงของแถว · มี .forminator-col คั่นอยู่
      และ col กว้าง 100% การสั่ง justify-content ที่แถวจึงไม่มีอะไรให้ขยับ
   3) ใส่ margin auto อย่างเดียวก็ยังไม่ติด เพราะปุ่มถูกคำนวณออกมาเป็น **inline-flex**
      ซึ่งเป็นกล่องระดับ inline · auto margin ใช้จัดกึ่งกลางไม่ได้
      (เคสเดียวกับปุ่ม LINE ที่บันทึกไว้แล้วที่ข้อ 16.4 · วิธีแก้เดียวกันคือบังคับเป็น flex
       แล้วกำหนดความกว้างให้ชัด ไม่ปล่อยให้ยืดเต็มพ่อ)
   แก้: จำกัดด้วย page-id + บังคับ flex + กำหนดความกว้าง แล้วค่อย margin auto */
body.theme-wplms.page-id-222905 .forminator-ui.forminator-custom-form .forminator-button-submit {
  display: flex !important;
  width: min(420px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 25.6 มือถือ ---------- */
@media (max-width: 767px) {
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group > .forminator-repeater-label {
    padding: var(--ck-sp-2) var(--ck-sp-2) 0 56px;
  }
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group > .forminator-repeater-description {
    padding: 4px var(--ck-sp-2) var(--ck-sp-2) 56px;
  }
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group > .forminator-repeater-label::before {
    left: var(--ck-sp-2);
    top: var(--ck-sp-2);
  }
  body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-all-group-copies {
    padding: var(--ck-sp-2) !important;
  }
}


/* ============================================================
   26. หน้า 10 สั่งซื้อสำเร็จ · flow ยืนยันตัวตนแบบใหม่ (2026-08-18)
   ============================================================
   ลูกค้าเปลี่ยน flow: ไม่ต้องแคปหน้าจอแล้ว ใช้ลิงก์ + QR เข้า LINE Support
   โดยข้อความที่เตรียมไว้ให้พา **เลขคำสั่งซื้อ + signature** ไปด้วย
   หลังบ้านผูก ชื่อ-นามสกุล / คอร์ส ให้เอง แล้วขอภาพบัตรประชาชนในแชท

   ของเดิมทั้งหน้า = รูป 2 รูป ไม่มีข้อความสักตัว (FINDINGS 3.0.3)
   รูปที่สองสอน 4 ขั้น โดยขั้นแรกคือ "แคปหน้านี้" ซึ่ง flow ใหม่ไม่ใช้แล้ว → ตัดทิ้ง

   ⚠️ CSS ชุดนี้ทำหน้าที่ "ให้เห็นภาพก่อนตัดสินใจ" เหมือนกลุ่ม A–C ใน TASKS-DEV
      ตอนขึ้นจริง **ข้อความทุกบรรทัดต้องพิมพ์ลง WPBakery** ไม่ใช่ทิ้งไว้ใน CSS
      เพราะโปรแกรมอ่านหน้าจอกับ Google ไม่เห็นข้อความที่มาจาก content:
      และ QR ต้องให้ระบบเจนรายออร์เดอร์ · ดู handoff/TASKS-DEV.md กลุ่ม E

   ชี้เป้าด้วยชื่อไฟล์รูปเดิม ไม่ใช่คลาส vc_custom_* เพราะคลาสนั้นเปลี่ยนทุกครั้งที่แก้แถวใน WPBakery */

/* ---------- 26.1 ตัดรูปสอน 4 ขั้นแบบเก่าทิ้ง ---------- */
body.page-id-223027 .vc_single_image-wrapper > img[src*="order-comfirm"] {
  display: none !important;
}

/* ---------- 26.2 หัวข้อหน้า ----------
   หน้านี้ไม่มี element หัวข้อเลย (ตรวจแล้วไม่มี h1/h2 ในเนื้อหน้า)
   ใช้ ::before ของกล่องที่ครอบแถวรูปแทน · ตอนขึ้นจริงใช้ Text Block ของ WPBakery */
body.page-id-223027 .vc_column-inner:has(.wpb_single_image img[src*="order-comfirm"])::before {
  content: "สั่งซื้อสำเร็จ";
  display: block;
  /* ระยะรูปแถบขั้นตอน→หัวข้อ = 40px ตามที่ตั้งไว้ให้หน้า 6/7/9 ที่กฎข้อ 22.10
     กฎนั้นเกาะ h2.vc_custom_heading ซึ่งหน้านี้ไม่มี จึงต้องตั้งซ้ำที่นี่ */
  margin-top: var(--ck-sp-4);
  text-align: center;
  font-size: var(--ck-fs-display);
  font-weight: 700;
  color: var(--ck-ink);
  line-height: 1.3;
  margin-bottom: var(--ck-sp-1);
}
body.page-id-223027 .wpb_wrapper:has(> .wpb_single_image img[src*="order-comfirm"])::before {
  /* ลูกค้าสั่งเปลี่ยนคำ 2026-08-19: หัวข้อบอกว่า "เกิดอะไรขึ้นแล้ว" (สั่งซื้อสำเร็จ)
     บรรทัดนี้บอกว่า "ต้องทำอะไรต่อ" · สั้นและชี้ไปที่การ์ดยืนยันตัวตนข้างล่างโดยตรง */
  content: "ขั้นตอนสุดท้าย";
  display: block;
  text-align: center;
  text-wrap: balance;   /* กันคำสุดท้ายตกค้างบรรทัดเดียวบนจอแคบ */
  font-size: var(--ck-fs-body);
  color: var(--ck-ink-60);
  line-height: 1.7;
  margin-bottom: var(--ck-sp-4);
}

/* ตัวเว้นวรรค 32px ของ page builder ที่คั่นระหว่างแถวรูปกับแถวเนื้อหา
   ปิดทิ้งเหมือนหน้าอื่น (กฎข้อ 21.7/22.10) ให้ระยะมาจาก margin ของหัวข้อที่เดียว */
body.page-id-223027 #content .vc_empty_space {
  height: 0 !important;
}
/* แถวรูปแถบขั้นตอนไม่ต้องมีระยะท้ายของตัวเอง · เทียบเท่ากฎข้อ 22.10 ของหน้า 6/7/9 */
body.page-id-223027 #content .wpb_single_image:has(img[src*="IMG_6430"]) {
  margin-bottom: 0 !important;
}


/* ---------- 26.3 การ์ดยืนยันตัวตน ---------- */
body.page-id-223027 .wpb_single_image:has(img[src*="order-comfirm"]) {
  display: block;
  max-width: 720px;
  margin: 0 auto !important;
  background: #fff;
  border-radius: var(--ck-r);
  box-shadow: var(--ck-sh-card);
  padding: var(--ck-sp-4);
  /* ทุกอย่างในการ์ดเป็นคอลัมน์เดียวจัดกึ่งกลาง หัวข้อกับหมายเหตุจึงจัดกึ่งกลางตาม
     ถ้าปล่อยชิดซ้ายจะมีแนวตาสองแนวในการ์ดใบเดียว (ปัญหาเดียวกับข้อ 21.9 การ์ดคอร์ส) */
  text-align: center;
}
body.page-id-223027 .wpb_single_image:has(img[src*="order-comfirm"])::before {
  content: "ยืนยันตัวตนกับแอดมิน";
  display: block;
  font-size: var(--ck-fs-title);
  font-weight: 700;
  color: var(--ck-ink);
  margin-bottom: var(--ck-sp-3);
}
/* ---------- 26.4 QR กับปุ่ม: คนละอุปกรณ์ คนละทางหลัก ----------
   ลิงก์ `line.me/R/oaMessage/` ทำงานได้จริงเมื่อเปิดบน **มือถือที่มีแอป LINE**
   บนเดสก์ท็อปแอป LINE เปิดแชทได้ก็จริง แต่การส่งข้อความที่เตรียมไว้ไปด้วยไม่แน่นอน
   และผู้เรียนส่วนใหญ่ใช้ LINE บนมือถือ

   ทางหลักจึงไม่เหมือนกันสองอุปกรณ์ และหน้าเดียวกันต้องทำสองหน้าที่
     เดสก์ท็อป → QR เป็นทางหลัก (หยิบมือถือมาสแกน) · ปุ่มเป็นทางรองไว้ให้คนที่มี LINE บนเครื่อง
     มือถือ    → ปุ่มเป็นทางหลัก · **ไม่ต้องแสดง QR เลย** เพราะสแกนจอตัวเองไม่ได้
                 การโชว์ QR บนมือถือคือการวางทางตันไว้กลางหน้า */
body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"]) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  margin: 0 !important;
}

/* QR · ขนาดเป็นเรื่องสแกนติดหรือไม่ติด ไม่ใช่เรื่องความสวย
   โลโก้ตรงกลางบังโค้ดบางส่วน จึงต้องใช้ error correction ระดับ H (ซ่อมได้ 30%)
   ซึ่งทำให้โค้ดหนาแน่นขึ้น ต้องแลกด้วยการแสดงใหญ่ขึ้น · วัดจาก URL ตัวอย่างแล้ว
     ข้อความ "ยืนยันตัวตน 236366-K7f3a9c2e" → URL 162 ตัวอักษร → version 11 = 61 ช่อง
     + quiet zone ข้างละ 3 ช่อง = 67 ช่อง → ที่ 280px ได้ช่องละ 4.18px ✅
   โลโก้กินพื้นที่ 4.9% ต่ำกว่าเพดาน 30% ที่ EC H ซ่อมได้อยู่มาก

   แผ่นรองหลังโลโก้เป็น **วงกลม** ไม่ใช่สี่เหลี่ยม · สี่เหลี่ยมขาวทับบนตารางโค้ด
   อ่านเป็น "กล่องที่แปะทีหลัง" ส่วนวงกลมอ่านเป็นส่วนหนึ่งของโค้ด (แบบเดียวกับ QR ของ LINE เอง)
   ตัวแผ่นรองตัดทิ้งไม่ได้ ทดลองแล้วโลโก้จะจมหายไปกับช่องสีขาวของโค้ดจนดูรก */
body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"])::before {
  content: "";
  width: 280px;
  height: 280px;
  border-radius: 12px;
  border: 1px solid var(--ck-ink-10);
  background-image: url("qr/qr-placeholder.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"])::after {
  content: "สแกนด้วยกล้องมือถือ";
  margin-top: var(--ck-sp-1);
  font-size: var(--ck-fs-caption);
  color: var(--ck-ink-60);
}

/* ---------- 26.5 เดสก์ท็อป: ไม่มีปุ่ม มีแต่วิธีทำ ----------
   ลูกค้ายืนยัน (2026-08-18): บนเดสก์ท็อป `oaMessage` **ไม่รองรับ**
   กดแล้วเด้งไปหน้าหลักของ LINE เฉยๆ ไม่ได้เปิดแชทพร้อมข้อความ

   ปุ่มที่กดแล้วไม่เกิดสิ่งที่ป้ายบอก = affordance หลอก แย่กว่าไม่มีปุ่มเลย
   เพราะคนจะกดก่อนสแกนเสมอ (ปุ่มเด่นกว่า QR) แล้วหลงอยู่หน้าหลัก LINE
   → ซ่อนปุ่มทิ้งบนเดสก์ท็อป แล้วบอกวิธีทำเป็นขั้นตอนแทน */
body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"]) > a {
  display: none !important;
}

/* วิธีทำ 3 ขั้น วางใต้ QR · จัดชิดซ้ายเพราะเป็นรายการมีลำดับ
   (ลำดับเลขที่จัดกึ่งกลางจะไล่สายตาลงมาไม่ตรงแนว) */
body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"])::after {
  content: "1. เปิดแอป LINE ในมือถือ แล้วกดสแกน QR นี้\A 2. ข้อความพร้อมรหัสยืนยันจะขึ้นมาให้เอง\A 3. กดส่งได้เลย ไม่ต้องพิมพ์อะไรเพิ่ม";
  white-space: pre-line;
  text-align: left;
  width: 100%;
  max-width: 340px;          /* ให้เลขข้อเรียงตรงแนวกันใต้ QR */
  margin-top: var(--ck-sp-3);
  font-size: var(--ck-fs-body);
  color: var(--ck-ink);
  line-height: 2;
}

/* ---------- 26.6 บล็อกปิดท้าย "แล้วยังไงต่อ" ---------- */
body.page-id-223027 .vc_column-inner:has(.wpb_single_image img[src*="order-comfirm"])::after {
  content: "แอดมินตรวจสอบข้อมูลยืนยันตัวตนแล้วจะเปิดให้เข้าเรียน\A เมื่ออนุมัติแล้ว เข้าเรียนได้ที่เมนู \201Cคอร์สเรียนของฉัน\201D";
  display: block;
  white-space: pre-line;
  text-align: center;
  margin-top: var(--ck-sp-4);
  font-size: var(--ck-fs-body);
  color: var(--ck-ink-60);
  line-height: 1.8;
}

/* ---------- 26.7 มือถือ: ตัด QR ทิ้ง เหลือปุ่มอย่างเดียว ----------
   กลับด้านกับเดสก์ท็อปทุกอย่าง เพราะบนมือถือ `oaMessage` ทำงานได้จริง
   ส่วน QR กลายเป็นของไร้ประโยชน์ (สแกนจอตัวเองไม่ได้) */
@media (max-width: 767px) {
  body.page-id-223027 .wpb_single_image:has(img[src*="order-comfirm"]) {
    padding: var(--ck-sp-3);
  }
  /* ซ่อนเฉพาะ QR · สแกนจอตัวเองไม่ได้ */
  body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"])::before {
    display: none;
  }
  /* วิธีทำยังอยู่ แต่ขั้นที่ 1 เป็น "กดปุ่ม" ไม่ใช่ "สแกน" (ลูกค้าขอ 2026-08-18)
     วางไว้ใต้ปุ่ม เพราะเป็นสิ่งที่จะเกิดขึ้น *หลัง* กด ไม่ใช่สิ่งที่ต้องอ่านก่อนกด */
  body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"])::after {
    order: 4;
    content: "1. กดปุ่มด้านบน แอป LINE จะเปิดขึ้นมาเอง\A 2. ข้อความพร้อมรหัสยืนยันจะขึ้นมาให้\A 3. กดส่งได้เลย ไม่ต้องพิมพ์อะไรเพิ่ม";
    max-width: none;
  }
  /* ปุ่มกลายเป็น action หลักของหน้า = ปุ่มหลักเต็มความกว้าง
     สีแบรนด์ LINE เป็นข้อยกเว้น contrast ข้อเดียวของเว็บที่ลูกค้ายืนยันไว้ */
  body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"]) > a {
    order: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 0 var(--ck-sp-3);
    background: var(--ck-line);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: var(--ck-fs-title);
    font-weight: 700;
    line-height: 1.3;
    box-shadow: var(--ck-sh-sticker);
  }
  body.page-id-223027 .vc_figure:has(img[src*="order-comfirm"]) > a::after {
    content: "ยืนยันตัวตนผ่าน LINE";
  }
}


/* ============================================================
   27. วันหมดอายุคอร์ส · ติดป้ายกำกับให้ตัวเลข (2026-08-18)
   ============================================================
   หน้า 13 /course/ แสดงวันหมดอายุเป็น `2027-01-27 01:33:15` เปล่าๆ ข้างไอคอนนาฬิกา
   ไม่มีคำบอกว่าเลขนี้คืออะไร · เดาได้ว่าเป็นวันเริ่ม วันหมด หรือเวลาที่เข้าล่าสุดก็ได้
   (หน้า 11 เดิมใช้คำว่า "หมดอายุวันที่" · รอบ 2026-08-18 เปลี่ยนให้ตรงกันเป็น "เรียนได้ถึง" ทั้งสองหน้า ดูข้อ 29.12)

   CSS ทำได้แค่ **เติมป้ายกำกับ** ส่วนการแปลงรูปแบบวันที่เป็นภาษาคน
   ("27 ม.ค. 2027 · เหลือ 163 วัน") ทำด้วย CSS ไม่ได้ เพราะตัวเลขเป็น text node
   ที่เซิร์ฟเวอร์พิมพ์มา และ **ต่างกันทุกคน** · ห้ามฝังวันที่ตายตัวลง CSS เด็ดขาด
   ไม่งั้นผู้เรียนทุกคนจะเห็นวันหมดอายุของคนอื่น → เป็น task ฝั่ง dev (TASKS-DEV กลุ่ม F) */
body.single-course li.course_time::before {
  content: "เรียนได้ถึง ";
  color: var(--ck-ink-60);
}


/* ============================================================
   28. เก็บงานฟอร์มหน้า 9 รอบตรวจลูกค้า (2026-08-18 รอบสอง)
   ============================================================
   ลูกค้าชี้ 3 จุด วัดค่าจริงแล้วทั้งสามข้อมีตัวเลขยืนยันหมด */

/* ---------- 28.1 "สีดูกลืนไปหน่อย" ----------
   วัดได้ว่าแถบหัวการ์ดเป็น rgb(253,245,230) ซึ่ง **เท่ากับสีพื้นของทั้งหน้าเป๊ะ**
   เพราะข้อ 25.2 ใช้ --ck-cream ซึ่งเป็นโทเคนของพื้นหลังหน้า ไม่ใช่โทเคนของ surface
   แถบหัวจึงไม่ได้ทำหน้าที่แยกอะไรออกจากอะไรเลย

   เพิ่มโทเคนใหม่: ครีมเข้มขึ้นหนึ่งขั้น ใช้เป็น "พื้นรอง" บนการ์ดขาวโดยเฉพาะ */
:root {
  /* เหลืองอ่อน = สีในตระกูลเดียวกับเหลืองแบรนด์ #FFD966 แต่อ่อนพอเป็นพื้นรอง
     เทียบ 5 แบบกับลูกค้าแล้ว (2026-08-18) · เบจ #F6EAD2 ที่ลองก่อนหน้าเป็นสีกลางๆ
     ที่ไม่มีในชุดสีแบรนด์ อ่านเป็น "กระดาษเก่า" ไม่ใช่แถบหัวข้อ */
  --ck-cream-deep: #FFF6DC;   /* แถบหัว section · อยู่ในตระกูลเหลืองแบรนด์ */
  --ck-field-bg: #FBF4E6;     /* พื้นช่องกรอก · เดิม #FDFAF2 จางจนแทบไม่ต่างจากขาว */
}
/* 🔁 **2026-08-19: เลิกใช้แถบสีที่หัวข้อ** · เหตุผลอยู่ที่ข้อ 25.1
   โทเคน --ck-cream-deep จึงไม่ได้ใช้กับฟอร์มนี้แล้ว แต่คงไว้ในชุดโทเคน
   เพราะเป็น "ครีมเข้มขึ้นหนึ่งขั้น" ที่ระบบยังขาดอยู่ เผื่อได้ใช้กับพื้นรองที่อื่น */
/* ช่องกรอก: เข้มขึ้นและเส้นขอบชัดขึ้นจาก .08 เป็น .12
   (.08 บนพื้นขาวคือ #EDEDED ซึ่งจางเกินกว่าจะบอกขอบเขตของช่องได้) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group input.forminator-input,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group textarea.forminator-textarea,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group select,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-selection {
  background-color: var(--ck-field-bg) !important;
  border-color: rgba(34, 34, 34, .12) !important;
}

/* ---------- 28.2 ช่องแบบ Select2 หลุดระบบทุกข้อ ----------
   วัดเทียบกันในแถวเดียวกัน · Select2 สร้าง DOM ของตัวเอง (.select2-selection)
   กฎที่เขียนไว้จึงเอื้อมไม่ถึง หลุดครบทั้งสี่เกณฑ์

   | ค่า          | ช่องข้อความ / ช่องวันเกิด | Select2 (ก่อนแก้) |
   |--------------|--------------------------|-------------------|
   | border-radius| 12px                     | **0px**           |
   | เส้นขอบ      | 2px rgba(34,34,34,.08)   | 1px #d1d5db (เทาเย็น ไม่มีในชุดสี) |
   | ความสูง      | 44–47px                  | **40.8px** ← ต่ำกว่าเกณฑ์ touch 44px |
   | font-size    | 16px                     | **20px** ← หลุด type scale |

   ลูกค้าขอให้ "มีขอบมนเหมือนวันเกิด" · คือดึงกลับเข้าระบบให้ครบทั้งสี่ข้อ */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-container .select2-selection {
  border-radius: 12px !important;
  border-width: 2px !important;
  border-style: solid !important;
  min-height: 44px !important;
  height: auto !important;
  font-size: var(--ck-fs-body) !important;
  display: flex !important;
  align-items: center;
  padding: 0 var(--ck-sp-2) !important;
}
/* ข้อความข้างในถูก Select2 ตั้ง line-height เท่าความสูงเดิม (40px) ไว้
   พอกล่องสูงขึ้นเป็น 44px ตัวอักษรจะเกาะขอบบน · ปล่อยให้ flex จัดกึ่งกลางแทน */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-selection__rendered {
  line-height: 1.4 !important;
  padding: 0 !important;
}
/* ลูกศรของ Select2 ตั้ง position:absolute อิงความสูงเดิม ต้องยึดกึ่งกลางใหม่ */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-selection__arrow {
  /* ข้อ 28.2 ทำให้กล่องพ่อเป็น flex ลูกศรจึงกลายเป็น flex item ที่ไม่มีเนื้อหา
     (ข้อ 28.5 ซ่อนลูกไปวาดเป็น background แทน) ความสูงเลยยุบเหลือ 0 = ลูกศรหายไปเลย
     ต้องกำหนดความสูงเองเพราะไม่มีอะไรดันกล่องให้สูงอีกแล้ว */
  height: 24px !important;
  align-self: center;
  flex: 0 0 auto;
  top: auto !important;
  right: auto !important;
  position: relative !important;
}

/* ---------- 28.3 คำอธิบายใต้ป้ายกำกับ ดันช่องกรอกให้เหลื่อมกัน ----------
   วัดในแถว "คำนำหน้า / ชื่อ / นามสกุล": ช่องแรกอยู่ที่ y=519 อีกสองช่องอยู่ที่ y=543
   **เหลื่อมกัน 24px** เพราะ "คำนำหน้า" ไม่มีคำอธิบาย ส่วนอีกสองช่องมี "(ภาษาไทย)"
   คำอธิบายเป็น block จึงกินอีกบรรทัดแล้วดันช่องกรอกลงไป

   ลูกค้าเสนอเอง: เอาคำอธิบายไปต่อท้ายคำถามในบรรทัดเดียวกัน · ทำให้ป้ายกำกับ
   สูงเท่ากันทุกช่องเสมอ ไม่ว่าช่องไหนจะมีคำอธิบายหรือไม่

   ⚠️ จำกัดขอบเขตไว้ใน .forminator-field-group เท่านั้น
      เพราะคำอธิบายใต้ปุ่มอัปโหลดสลิป (หน้า 7/8) ถูกกฎข้อ 23.6 ตั้งเป็น block ไว้ ห้ามไปโดน */
/* จับด้วย "ป้ายกำกับที่มีคำอธิบายตามหลังติดกัน" แทนการอ้างชื่อกล่องพ่อ
   เพราะ Forminator วางโครงไม่เหมือนกันทุกชนิดช่อง · ช่องข้อความวางไว้ใน .forminator-field
   ส่วนช่องวันเกิดวางไว้ที่ .forminator-field-date ตรงๆ (วัดแล้ว)
   ต้องกัน .forminator-repeater-* ออก ไม่งั้นหัวข้อ section จะกลายเป็น inline ตามไปด้วย */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-label:not(.forminator-repeater-label):has(+ .forminator-description),
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-description:not(.forminator-repeater-description) {
  display: inline !important;
  margin: 0 !important;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-description:not(.forminator-repeater-description) {
  margin-left: 6px !important;   /* HTML ไม่มีช่องว่างคั่นระหว่าง </label> กับ <span> */
}
/* ป้ายกำกับเป็น inline แล้ว margin-bottom ไม่ทำงาน · ให้ระยะมาจากช่องกรอกแทน */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-field > input,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-field > textarea,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-field > .select2-container,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-field-date > .forminator-row {
  margin-top: var(--ck-sp-1) !important;
}


/* ---------- 28.4 ช่องวันเกิดเยื้องเข้ามา 15px ----------
   วัดได้: ป้าย "วันเกิด" อยู่ที่ x=319 แต่ป้าย "วัน/เดือน/ปี" กับช่องเลือกอยู่ที่ x=334
   ต้นเหตุคือ .forminator-col ของแถวย่อยมี padding ข้างละ 15px ของตัวเอง
   ซึ่งซ้อนกับ padding ของแถวแม่อีกชั้น · คอลัมน์ซ้ายสุดจึงไม่ตรงแนวกับป้ายด้านบน */
/* ⚠️ ห้ามใช้ negative margin ที่แถว · Forminator ตัด padding ของคอลัมน์ทิ้งเองบนจอแคบ
   (วัดแล้ว: ที่ 900px คอลัมน์มี padding 15px · ที่ 782px ลงมาเหลือ 0)
   ถ้าหักลบที่แถว พอถึงจอแคบจะไม่มีอะไรให้หัก แถววันเกิดจะเลื่อนออกนอกแนว 15px
   จึงตัด padding ที่คอลัมน์ริมสองข้างแทน · จอแคบที่ padding เป็น 0 อยู่แล้วก็ไม่มีผลอะไร
   (จุดตัดของ Forminator อยู่ระหว่าง 782–900px ซึ่งไม่ตรงกับ breakpoint ไหนของเรา
    และเปลี่ยนได้เมื่ออัปเดตปลั๊กอิน จึงไม่ควรไปผูกกับตัวเลขนั้น) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-field-date .forminator-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-field-date .forminator-col:first-child {
  padding-left: 0 !important;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-field-date .forminator-col:last-child {
  padding-right: 0 !important;
}

/* ---------- 28.5 ลูกศรของช่องเลือก เป็นคนละแบบกันสองชนิด ----------
   ช่องวันเกิดเป็น <select> ของเบราว์เซอร์ ใช้ลูกศรสามเหลี่ยมทึบที่ Forminator ฝังมาเป็น base64 PNG
   ส่วน Select2 วาดลูกศรของตัวเองอีกแบบ · ผลคือช่องเลือกในฟอร์มเดียวกันมีลูกศร 2 หน้าตา
   วาดลูกศรเดียวด้วย SVG inline แล้วใช้ร่วมกันทั้งสองชนิด (inline ไม่ต้องพึ่งไฟล์ภายนอก) */
:root {
  --ck-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E");
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group select {
  background-image: var(--ck-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--ck-sp-2) center !important;
  background-size: 14px 9px !important;
  padding-right: 40px !important;
}
/* Select2 วาดลูกศรไว้ในลูกของ .select2-selection__arrow · ซ่อนลูกแล้ววาดทับที่ตัวพ่อ */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-selection__arrow {
  background-image: var(--ck-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 9px !important;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-selection__arrow > * {
  display: none !important;
}


/* ---------- 28.6 เส้นเทาข้างซ้ายของ section ----------
   ลูกค้าถามว่าเส้นซ้ายยังเป็นสีเทาอยู่ไหม · ใช่ และมันไม่ใช่ border
   วัดได้ว่าเป็น `box-shadow: rgba(221,221,221,.5) 5px 0 0 inset` ที่ Forminator วาดเอง
   (จึงไม่หายตอนสั่ง border:0 ในข้อ 25.3 · คนละ property กัน)

   เทา #ddd ไม่มีในชุดสีแบรนด์ · เป็นสีเดียวกับที่ทำให้กล่องเดิมดูหม่น
   เปลี่ยนเป็นเทอร์ควอยซ์ให้เข้าชุดกับเลขวงกลมและแถบ 5 ขั้นตอน (ลูกค้าเลือก 2026-08-18)

   เทอร์ควอยซ์เข้าชุดกับเลขวงกลมและแถบ 5 ขั้นตอน (ลูกค้าเลือก 2026-08-18)

   ⚠️ ห้ามใช้ border-left วาดขีดนี้ · การ์ดเป็น box-sizing:border-box
   เส้นขอบจึงกินความกว้างเข้าไป 5px ทำให้ระยะซ้ายในการ์ดเป็น 29px ขณะที่ขวาเป็น 24px
   (วัดแล้ว: ช่องกรอกขยับจาก x=319 ไป 324 แต่ขอบขวายังอยู่ที่เดิม)
   ใช้ inset shadow แทน วาดทับพื้นโดยไม่กินกล่อง ระยะซ้าย-ขวาจึงเท่ากันเป๊ะ

   วาดที่ .forminator-all-group-copies เพราะกล่องนี้คือ "การ์ด" ตั้งแต่ข้อ 25.1 เขียนใหม่
   และเป็นกล่องเดียวกับที่ Forminator วาดขีดเทาไว้ จึงทับได้ในบรรทัดเดียว */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-all-group-copies {
  box-shadow: inset 5px 0 0 var(--ck-teal), var(--ck-sh-card) !important;
}


/* ============================================================
   29. รอบตรวจหน้า 11–13 (ลูกค้าแจ้ง 2026-08-18)
   ทุกข้อในส่วนนี้วัดจากเบราว์เซอร์จริงก่อนแก้ ไม่ได้เดาจากภาพ
   ============================================================ */

/* ---------- 29.1 ชื่อผู้ใช้จางจนอ่านแทบไม่ออก ----------
   ไม่ใช่เรื่องสี · เราสั่ง color:#222 ไปแล้วในข้อ 20.2 และค่าที่คำนวณได้ก็เป็น
   #222 จริง แต่ธีมใส่ mix-blend-mode:difference ไว้ที่ลิงก์ชื่อ
   (ของเดิมพื้นเป็นเทาเข้ม/รูปปกที่สีไม่แน่นอน ธีมเลยใช้ blend กลับสีให้อ่านออก)
   พอเราเปลี่ยนพื้นเป็นการ์ดขาว: #222 difference กับขาว = #DDD จึงจางหายไป
   ใช้ร่วมกันทั้งหน้า 11 / 12 / 12b */
body.buddypress #buddypress #item-header #item-header-content h3,
body.buddypress #buddypress #item-header #item-header-content h3 a {
  mix-blend-mode: normal !important;
}

/* ---------- 29.2 เส้นบาง ๆ พาดใต้ชื่อ ----------
   ไม่ใช่ border · เป็นเงา แต่คนละตัวกับที่เดาไว้ตอนแรก วัดแล้วได้สองสาเหตุซ้อนกัน
   ก) ธีมตั้ง #item-header{position:relative; z-index:2} ไว้ การ์ดหัวจึงวาดทับการ์ดเมนู
      เงาที่ตกลงล่างของการ์ดหัวเลยไม่ถูกพื้นขาวของเมนูบัง กลายเป็นเส้นพาดกลางบล็อก
      → ยกเมนูขึ้นมาอยู่ชั้นเดียวกัน (z-index 3) เงาการ์ดหัวยังอยู่ครบแต่ถูกบังตามที่ควร
   ข) เงาของการ์ดเมนูเองก็ฟุ้งย้อนขึ้นไป 7px → ให้ตกลงล่างอย่างเดียว (offset > blur) */
body.buddypress #buddypress #object-nav {
  position: relative;
  z-index: 3;
  box-shadow: 0 8px 10px -6px rgba(34, 34, 34, .10) !important;
}

/* ---------- 29.3 hover แล้วตัวหนังสือหาย ----------
   ธีมมี selector รวมยักษ์ (ชุดเดียวกับปุ่มสีทึบ) ที่บังคับ color:#fff
   ตอน :hover ของ .item-list-tabs li a · พอพื้น hover ของเราเป็นครีม
   ตัวอักษรขาวบนครีมจึงหายไปทั้งบรรทัด */
body.buddypress #buddypress #object-nav li a:hover,
body.buddypress #buddypress #object-nav li a:focus,
body.buddypress #buddypress #object-nav li a:hover span,
body.buddypress #buddypress #object-nav li.current a:hover,
body.buddypress #buddypress #object-nav li.selected a:hover {
  color: var(--ck-ink) !important;
}
/* รายการที่เลือกอยู่ต้องไม่กลายเป็นครีมตอนเอาเมาส์ชี้ (สถานะสำคัญกว่า hover) */
body.buddypress #buddypress #object-nav li.current a:hover,
body.buddypress #buddypress #object-nav li.selected a:hover {
  background: var(--ck-yellow) !important;
}

/* ---------- 29.4 รัศมีของแถบที่เลือก ----------
   หลักที่ใช้กันคือ concentric radii: รัศมีใน = รัศมีนอก − ระยะขอบ
   ไม่ใช่เท่ากันเป๊ะ (ถ้าเท่ากันแล้ววางชิดขอบ ส่วนโค้งจะดูหนาไม่เท่ากัน)
   เดิมแถบเป็น pill 999px กว้างเต็มการ์ด มุมล่างเลยโดนการ์ดตัดครึ่ง
   ใหม่: ใส่ระยะขอบใน 8px ให้ ul แล้วแถบใช้รัศมี 22.4 − 8 = 14.4px
   ระยะซ้ายของตัวอักษรยังเป็น 20px เท่ากับกล่องชื่อด้านบน (8 + 12) */
body.buddypress #buddypress #object-nav ul {
  padding: var(--ck-sp-1) !important;
}
body.buddypress #buddypress #object-nav li a {
  border-radius: calc(var(--ck-r) - var(--ck-sp-1)) !important;
  padding: 12px 12px !important;
}

/* ---------- 29.5 แท็บในหน้าคอร์สเรียนของฉัน ----------
   ก) กรอบสี่เหลี่ยมรอบแท็บมาจากธีม (border 1px #EFC439 บน li.current a)
   ข) เส้นใต้หนา 18px เป็นของเราเอง · ข้อ 20.3 ใช้ gradient หยุดที่ 58%
      ของกล่อง ซึ่งพอกล่องสูง 44px ตามเกณฑ์พื้นที่กด แถบจึงลากยาวลงไปถึงก้นกล่อง
      เปลี่ยนเป็นแถบความสูงตายตัว 9px วางใต้เส้นฐานตัวอักษร ไม่ผูกกับความสูงกล่อง */
body.buddypress #buddypress #item-body #subnav.item-list-tabs li a {
  border: 0 !important;
}
body.buddypress #buddypress #item-body #subnav.item-list-tabs li.current a,
body.buddypress #buddypress #item-body #subnav.item-list-tabs li.selected a {
  background-image: linear-gradient(transparent 60%, var(--ck-yellow) 60%) !important;
  background-repeat: no-repeat !important;
  /* ⚠️ ต้องอิงความสูง "บรรทัด" (1.5em) ไม่ใช่ความสูงกล่อง
     กล่องแท็บสูง 44px ตามเกณฑ์พื้นที่กด ถ้าใช้ 100% แถบจะหนา 17.6px
     (= 40% ของ 44) ซึ่งหนากว่าลายเซ็นที่หัวข้อ section ใช้อยู่เกือบเท่าตัว
     1.5em = 28.5px → แถบ 11.4px เท่ากับข้อ P8 เป๊ะ */
  background-size: 100% 1.5em !important;
  background-position: 0 center !important;
  border-radius: 2px !important;
}

/* ---------- 29.6 ปุ่มสลับมุมมอง grid/list ----------
   ของเดิมเป็นสไตล์ธีมล้วน: border 2px, radius 2px, พื้น #FFFFAD,
   ไอคอนขาวบนเหลือง (contrast 1.66) และไอคอนที่ไม่ได้เลือกเป็น #BBB
   ทำใหม่เป็น segmented control ใบเดียว โทนเดียวกับปุ่ม pill ทั้งเว็บ */
body.buddypress #buddypress .switch_view .grid_list_wrapper {
  display: inline-flex !important;
  /* ระหว่าง <a> สองตัวมีขึ้นบรรทัดใหม่กับคอมเมนต์คั่นอยู่ พอกล่องเป็น flex
     ช่องว่างนั้นกลายเป็น flex item ไร้ตัวตนกว้าง ~14px ดันให้กล่องเบี้ยวไปทางซ้าย */
  font-size: 0;
  background: #fff;
  border: 1px solid var(--ck-ink-10);
  border-radius: 999px;
  padding: 4px;
  /* ที่กล่องเคยกว้างเกิน 16px คือ margin-right ของกฎแท็บที่รั่วมาโดน <a> ในนี้
     (แก้ที่ขอบเขต selector ไปแล้ว) ไม่ใช่เพราะ gap · วัดเทียบแล้ว gap:4 กับ margin-left:4
     ให้ความกว้างเท่ากันเป๊ะ 118px ช่องว่าง/คอมเมนต์ระหว่างแท็กไม่ถูกนับเป็น flex item
     ใช้ margin ที่ปุ่มตัวหลังแทน gap เพื่อให้เห็นชัดว่าระยะมาจากไหน */
  gap: 0;
}
body.buddypress #buddypress .grid_list_wrapper a#grid_view {
  margin-left: 4px !important;
}
body.buddypress #buddypress .grid_list_wrapper a#list_view,
body.buddypress #buddypress .grid_list_wrapper a#grid_view {
  border: 0 !important;
  background: transparent !important;
  color: var(--ck-ink-60) !important;
  border-radius: 999px !important;
  /* ธีมยิง width มาจากกฎที่กินน้ำหนักกว่า จึงล็อกด้วย min-width ซึ่งชนะ width เสมอ
     (ต่ำกว่า 44px ไม่ได้ตามเกณฑ์พื้นที่กด) */
  min-width: 52px !important;
  width: 52px !important;
  min-height: 44px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
body.buddypress #buddypress .grid_list_wrapper a i {
  color: inherit !important;
}
body.buddypress #buddypress .grid_list_wrapper a:hover {
  background: var(--ck-cream) !important;
  color: var(--ck-ink) !important;
}
/* ⚠️ ต้องระบุ id ของปุ่มด้วย · กฎ reset ข้างบนใช้ a#list_view/a#grid_view (2 id)
   ถ้าเขียนแค่ a.active (1 id) พื้นเหลืองของปุ่มที่เลือกอยู่จะแพ้และหายไปทั้งปุ่ม */
body.buddypress #buddypress .grid_list_wrapper a#list_view.active,
body.buddypress #buddypress .grid_list_wrapper a#grid_view.active,
body.buddypress #buddypress .grid_list_wrapper a#list_view.active:hover,
body.buddypress #buddypress .grid_list_wrapper a#grid_view.active:hover {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
}

/* ---------- 29.7 ปุ่มเลขหน้า ----------
   เดิมเลขที่ไม่ได้เลือกเป็นกล่องเทาสี่เหลี่ยม radius 2px ขอบ 2px
   ส่วนหน้าปัจจุบันเป็นวงกลมขอบทอง · คนละภาษาภาพกันในแถวเดียว
   ใหม่: วงกลม 44px เหมือนกันหมด ต่างกันแค่สถานะ (ขาว/ขอบบาง ↔ เหลืองทึบ) */
body.buddypress #buddypress .pagination#pag-top,
body.buddypress #buddypress .pagination#pag-bottom {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-sp-2);
}
body.buddypress #buddypress .pagination .page-numbers {
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--ck-ink-10);
  color: var(--ck-ink-60) !important;
  margin-left: var(--ck-sp-1) !important;
  padding: 0 !important;
}
body.buddypress #buddypress .pagination a.page-numbers:hover {
  background: var(--ck-cream) !important;
  color: var(--ck-ink) !important;
}
body.buddypress #buddypress .pagination .page-numbers.current,
body.buddypress #buddypress .pagination span.current {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ---------- 29.8 การ์ดคอร์สติดกันเป็นพรืด + สูงไม่เท่ากัน ----------
   ต้นเหตุ: ธีมจัด 3 คอลัมน์ด้วย float กว้างคอลัมน์ละ 322.48px รวมพอดี 968px
   = ช่องไฟระหว่างคอลัมน์เป็น 0 และ float ทำให้การ์ดสูงไม่เท่ากันโดยธรรมชาติ
   เปลี่ยนเป็น CSS Grid: ได้ช่องไฟ 24px และการ์ดในแถวเดียวกันสูงเท่ากันอัตโนมัติ
   (auto-fill ทำให้จอแคบลดจำนวนคอลัมน์เองโดยไม่ต้องเขียน media query) */
body.buddypress #buddypress ul#course-list.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ck-sp-3) !important;
  margin: 0 !important;
  padding: var(--ck-sp-1) 0 0 !important;
}
body.buddypress #buddypress ul#course-list.grid > li.course_single_item {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
/* ชื่อคอร์สจองที่ไว้ 2 บรรทัดเสมอ ปุ่มของทุกการ์ดจะได้อยู่แนวเดียวกัน
   (เดิมชื่อ 1 บรรทัดกับ 2 บรรทัดปนกัน ปุ่มเลยเหลื่อมกันทั้งแถว) */
body.buddypress #buddypress ul#course-list.grid .item-title a {
  min-height: calc(var(--ck-fs-title) * 1.45 * 2) !important;
  align-items: flex-start !important;
}

/* ---------- 29.9 ไอคอนหน้าบรรทัดตัวเลขในการ์ด ----------
   3 บรรทัดล่างการ์ดเป็นข้อความหน้าตาเหมือนกันหมด ต้องอ่านทีละคำถึงจะรู้ว่าอันไหนคืออะไร
   ไอคอนเส้นบาง 16px ช่วยให้กวาดตาเจอตัวเลขที่ต้องการโดยไม่ต้องอ่าน
   วาดเป็น SVG inline (data URI) เหมือนลูกศรในข้อ 28.5 · ไม่ต้องพึ่งไฟล์หรือ icon font
   เลือกบรรทัดจากโครงสร้าง ไม่ใช่ลำดับ nth-child เพราะคอร์สที่หมดอายุแล้วจะไม่มีบรรทัดวันหมดอายุ */
:root {
  --ck-ic-progress: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23222222' stroke-width='2' opacity='.55'%3E%3Ccircle cx='8' cy='8' r='6' opacity='.4'/%3E%3Cpath d='M8 2a6 6 0 0 1 6 6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --ck-ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23222222' stroke-width='2' opacity='.55' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.6V8l2.3 1.5'/%3E%3C/g%3E%3C/svg%3E");
  --ck-ic-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23222222' stroke-width='2' opacity='.55' stroke-linecap='round'%3E%3Crect x='2.2' y='3.4' width='11.6' height='10.4' rx='2'/%3E%3Cpath d='M2.2 7h11.6M5.6 2v2.4M10.4 2v2.4'/%3E%3C/g%3E%3C/svg%3E");
}
/* วางไอคอนเป็นพื้นหลังของบรรทัด + เว้นซ้าย 24px (hanging indent)
   ⚠️ ห้ามใช้ display:flex + ::before ตรงนี้ · บรรทัดนี้เป็น "ข้อความ + <strong>"
      ปนกัน พอเป็น flex ตัวอักษรเปล่ากับ <strong> จะกลายเป็นคนละคอลัมน์
      ("หมดอายุวัน / ที่" ตกบรรทัดแยกจากวันที่) */
body.buddypress #buddypress ul#course-list.grid li.course_single_item .item > .text-center {
  padding-left: var(--ck-sp-3) !important;
  /* กันคำท้ายบรรทัดตกไปอยู่บรรทัดใหม่ตัวเดียว (บรรทัดวันหมดอายุยาวพอจะตกสองบรรทัดในการ์ด 300px)
     ⚠️ อย่าใช้ &nbsp; แก้ที่ข้อความ · ฟอนต์ mn_minimon ไม่มีสัญลักษณ์ U+00A0
     คำจะติดกันเป็นพืดแทน (ทดสอบแล้วในไฟล์ demo) */
  text-wrap: pretty;
  background-repeat: no-repeat;
  background-position: 0 3px;
  background-size: 16px 16px;
}
/* บรรทัดแรกหลังปุ่ม = ความคืบหน้า, บรรทัดถัดไป = ชั่วโมงคงเหลือ,
   บรรทัดที่มี <strong> = วันหมดอายุ (ธีมใส่ strong เฉพาะบรรทัดนี้) */
body.buddypress #buddypress ul#course-list.grid .item-credits + .text-center {
  background-image: var(--ck-ic-progress);
}
body.buddypress #buddypress ul#course-list.grid .item-credits + .text-center + .text-center {
  background-image: var(--ck-ic-clock);
}
body.buddypress #buddypress ul#course-list.grid .item > .text-center:has(strong) {
  background-image: var(--ck-ic-calendar);
}
/* คอร์สที่หมดอายุแล้ว ธีมยังพ่น <div class="text-center"> เปล่า ๆ ออกมา
   กลายเป็นช่องว่างลอย ๆ ท้ายการ์ด (และถ้าปล่อยไว้จะมีไอคอนโดด ๆ ไม่มีข้อความ) */
body.buddypress #buddypress ul#course-list.grid .item > .text-center:not(:has(*)) {
  display: none !important;
}

/* ---------- 29.10 เส้นคั่นค้างท้ายการ์ด ----------
   ธีมใส่ border-bottom ไว้ที่ .item สำหรับ "มุมมองรายการ" ที่เรียงต่อกันเป็นแถว
   ในมุมมองการ์ดมันกลายเป็นขีดลอยอยู่เหนือขอบล่าง 16px ไม่ได้คั่นอะไร
   (เห็นชัดขึ้นตอนการ์ดสูงเท่ากันแล้วในข้อ 29.8) */
body.buddypress #buddypress ul#course-list.grid li.course_single_item .item {
  border-bottom: 0 !important;
}


/* ---------- 29.11 เก็บตกรอบสอง (ลูกค้าดูภาพแล้วชี้เพิ่ม 4 จุด) ---------- */

/* ก) แถบเมนูอันล่างสุดชิดขอบการ์ดเกินไป
   มุมล่างของการ์ดโค้ง 22.4px ส่วนโค้งจึงกินพื้นที่ว่างตรงนั้นไปอีก
   ระยะ 8px เท่าด้านบนจึงดู "ติดขอบ" ทั้งที่ตัวเลขเท่ากัน · เพิ่มด้านล่างเป็น 14px */
body.buddypress #buddypress #object-nav ul {
  padding: var(--ck-sp-1) var(--ck-sp-1) 14px !important;
  /* ธีม float แถบเมนูไว้ ตัว ul จึงสูงแค่ 22px = padding ล่างไปโผล่ "ใต้" แถบสุดท้าย
     ไม่ได้อยู่ระหว่างแถบกับขอบการ์ด · เปลี่ยนเป็น flex คอลัมน์ให้ ul อุ้มลูกจริง ๆ */
  display: flex !important;
  flex-direction: column;
}

/* ข) ปุ่มในการ์ดคอร์สยังไม่ตรงแนวกัน ทั้งที่จองชื่อคอร์สไว้ 2 บรรทัดแล้ว
   ต้นเหตุ: ลิงก์ชื่อคอร์สมี padding 8px บน-ล่าง และกล่องเป็น border-box
   min-height 55.1px จึง "รวม" padding เข้าไปด้วย = เนื้อที่จริงเหลือ 39px
   ชื่อ 1 บรรทัดจึงสูง 55px แต่ชื่อ 2 บรรทัดสูง 71px (55.1 + 16) ปุ่มเลยเหลื่อมกัน 16px
   แก้โดยบวก padding เข้าไปในค่า min-height ให้ตรงกับความสูงจริงของ 2 บรรทัด */
body.buddypress #buddypress ul#course-list.grid .item-title a {
  padding: var(--ck-sp-1) 0 0 !important;
  min-height: calc(var(--ck-fs-title) * 1.45 * 2 + var(--ck-sp-1)) !important;
}
/* ระยะจากชื่อคอร์สถึงปุ่มเป็น 8px สี่ชั้นซ้อนกัน = 32px (padding ล่างของลิงก์ชื่อ +
   margin ล่างของกล่องชื่อ + margin บนของกล่องปุ่ม + margin บนของปุ่มเอง)
   ตัดสองชั้นออก เหลือ 16px ตามสเกล · ชื่อกับปุ่มเป็นของคู่กัน ไม่ควรห่างเท่าคนละกลุ่ม */
body.buddypress #buddypress ul#course-list.grid li.course_single_item .item-credits {
  margin-top: 0 !important;
}

/* ค) แท็บที่ไม่ได้เลือก: ธีมทำเป็นเม็ดยาพื้นเหลืองซีด #FFFFAD ตัวอักษร #444
   ซึ่งไม่มีทั้งสองสีในชุดสีแบรนด์ และเม็ดสุดท้ายยังได้รัศมี 999px 2px 999px 999px
   (กฎ last-child ของธีม) = มุมขวาบนเหลี่ยมอยู่มุมเดียว
   ทำเป็นลิงก์เงียบ ๆ สีหมึก 60% ให้แท็บที่เลือกอยู่เด่นแทน */
/* ⚠️ ขอบเขตสำคัญ: ธีมใช้ #subnav ซ้ำสองแถบ (แถบแท็บ กับ แถบเครื่องมือค้นหา/สลับมุมมอง)
   และทั้งสองแถบเป็น .item-list-tabs เหมือนกัน ถ้าเขียน li a เฉย ๆ กฎของแท็บจะไปโดนปุ่มสลับ
   มุมมองด้วย (เคยทำให้ปุ่มที่เลือกอยู่ไม่มีพื้นเหลือง และเว้นระยะขวาเกินมา 16px)
   จึงต้องกัน li ของแถบเครื่องมือออกทุกกฎ */
body.buddypress #buddypress #item-body #subnav.item-list-tabs li:not(.switch_view):not(.filter):not(:has(.dir-search)) {
  background-color: transparent !important;
  box-shadow: none !important;
}
body.buddypress #buddypress #item-body #subnav.item-list-tabs li:not(.switch_view):not(.filter):not(:has(.dir-search)) a {
  /* ⚠️ ต้องเป็น background-color ไม่ใช่ background · shorthand จะล้าง background-image
     ของไฮไลต์ปากกาในข้อ 29.5 ทิ้งด้วย (กฎนี้มี :not() หลายชั้นจึงกินน้ำหนักมากกว่า) */
  background-color: transparent !important;
  /* แท็บที่เลือกอยู่ยังได้เงาการ์ดติดมาจากชุดกฎของปุ่ม กลายเป็นกล่องขาวจาง ๆ
     ลอยรอบคำ ทั้งที่ไฮไลต์ปากกาไม่ใช่ปุ่ม */
  box-shadow: none !important;
}
body.buddypress #buddypress #item-body #subnav.item-list-tabs li:not(.current):not(.selected):not(.switch_view):not(.filter):not(:has(.dir-search)) a {
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-body) !important;
  border-radius: 999px !important;
  /* ระยะในเท่ากับแท็บที่เลือกอยู่ (4px) แล้วเว้นห่างระหว่างแท็บด้วย margin แทน
     ถ้าใช้ padding เว้นห่าง ตัวอักษรของแท็บแต่ละตัวจะเริ่มไม่ตรงแนวกัน
     เห็นชัดตอนแท็บตกบรรทัดบนมือถือ · บรรทัดล่างจะเยื้องเข้าไป 8px */
  padding: 0 4px !important;
}
/* ⚠️ ระยะห่างระหว่างแท็บต้องอยู่ที่ li ทุกตัว ไม่ใช่ที่ <a> ของแท็บที่ไม่ได้เลือก
   ไม่งั้นช่องไฟหลังแท็บที่เลือกอยู่จะเหลือแค่ 8px ขณะที่คู่อื่นได้ 24px (เห็นชัดในหน้าโปรไฟล์
   ที่ "ดูข้อมูล" กับ "แก้ไข" เกือบติดกัน แต่ "แก้ไข" กับ "เปลี่ยนรูปโปรไฟล์" ห่างเป็นเท่าตัว) */
body.buddypress #buddypress #item-body #subnav.item-list-tabs li:not(.switch_view):not(.filter):not(:has(.dir-search)) {
  margin-right: var(--ck-sp-2) !important;
}
body.buddypress #buddypress #item-body #subnav.item-list-tabs li:not(.switch_view):not(.filter):not(:has(.dir-search)):last-child {
  margin-right: 0 !important;
}
body.buddypress #buddypress #item-body #subnav.item-list-tabs li:not(.current):not(.selected):not(.switch_view):not(.filter):not(:has(.dir-search)) a:hover {
  background: rgba(34, 34, 34, .05) !important;
  color: var(--ck-ink) !important;
}

/* ง) ขีดเหลืองใต้รูปโปรไฟล์/ภาพปกคอร์ส (border-bottom 2px #EFC439 ของธีม)
   รูปกับชื่ออยู่ในการ์ดใบเดียวกันอยู่แล้ว = ขีดที่ไม่ได้คั่นอะไร (ลูกค้าสั่งเอาออกทั้งหน้า 11–13)
   ธีมยิงกฎนี้ด้วย id 3 ตัว · !important อย่างเดียวยังแพ้ ต้องเจาะ specificity ให้สูงกว่า
   แบบเดียวกับที่ทำไว้ในข้อ 20.3 */
html body.buddypress div#buddypress div#item-header div#item-header-avatar {
  border-bottom: 0 !important;
}

/* จ) มุมภาพปกคอร์สโค้งไม่ตรงกับการ์ด · ไม่ได้ตั้งใจ เป็นค่าของธีม
   ธีมใส่ border-radius 25px ไว้ที่ตัว <img> เอง ขณะที่การ์ดโค้ง 19.6px และ clip ด้วย overflow
   มุมบนจึงถูกการ์ดตัดตามการ์ด แต่มุมล่างของรูปโค้ง 25px ของตัวเองค้างอยู่กลางการ์ด
   = เห็นเป็นรอยเว้าขาวที่มุมล่าง ทั้งที่ตรงนั้นไม่ใช่ขอบการ์ด
   ให้รูปมุมตรง แล้วปล่อยให้การ์ดเป็นคนตัดมุมคนเดียว */
html body.buddypress div#buddypress div#item-header div#item-header-avatar img:not(.avatar) {
  border-radius: 0 !important;
}


/* ---------- 29.12 เก็บตกรอบสาม ---------- */

/* ก) แท็บบนมือถือ: ธีมล็อก li ไว้ที่ width 240px แล้วจัดกึ่งกลาง
   ลิงก์จึงกว้าง 240px ตามไปด้วย และแถบไฮไลต์ (100% ของลิงก์) ยาว 240px
   ทั้งที่คำสั้นแค่ 64px = ขีดเน้นยาวกว่าคำสี่เท่า
   ให้แท็บกว้างเท่าคำแล้วไหลต่อกันเป็นแถวเหมือนบนจอใหญ่ */
body.buddypress #buddypress #item-body #subnav.item-list-tabs ul {
  text-align: left !important;
}
body.buddypress #buddypress #item-body #subnav.item-list-tabs li:not(.switch_view):not(.filter):not(:has(.dir-search)) {
  width: auto !important;
}
body.buddypress #buddypress #item-body #subnav.item-list-tabs li:not(.switch_view):not(.filter):not(:has(.dir-search)) a {
  width: auto !important;
  text-align: left !important;
}

/* ข) คำเรียกวันหมดอายุ: หน้า 13 พูดว่า "เรียนได้ถึง" แต่การ์ดหน้า 11 พูดว่า "หมดอายุวันที่"
   เรื่องเดียวกันแต่คนละคำ และคำหลังพูดถึงสิ่งที่จะเสียไป ไม่ใช่สิ่งที่ยังใช้ได้
   → ใช้ "เรียนได้ถึง" ทั้งสองที่ (ลูกค้าเลือก 2026-08-18)

   ⚠️ CSS เปลี่ยนได้เฉพาะ "คำเรียก" ซึ่งเป็นข้อความคงที่ ไม่ใช่ตัววันที่
   ตัววันที่อยู่ใน <strong> และต่างกันทุกคน · ห้ามแตะ (ดู TASKS-DEV กลุ่ม F)
   วิธี: ยุบ font-size ของ text node ที่เป็นคำเรียกเดิมให้เป็น 0 แล้ววาดคำใหม่ด้วย ::before
   (วิธีเดียวกับที่ใช้แทนข้อความมาตั้งแต่รอบแรก) ส่วน <strong> ตั้งขนาดคืนให้ */
body.buddypress #buddypress ul#course-list.grid .item > .text-center:has(strong) {
  font-size: 0 !important;
}
body.buddypress #buddypress ul#course-list.grid .item > .text-center:has(strong)::before {
  content: "เรียนได้ถึง ";
  font-size: var(--ck-fs-caption);
  line-height: 1.6;
  color: var(--ck-ink-60);
}
body.buddypress #buddypress ul#course-list.grid .item > .text-center:has(strong) strong,
body.buddypress #buddypress ul#course-list.grid .item > .text-center:has(strong) span {
  font-size: var(--ck-fs-caption) !important;
  line-height: 1.6;
}

/* ---------- 29.13 แถบเครื่องมือเหนือรายการไม่ตรงแนวกับเนื้อหา ----------
   วัดที่ 1440px: การ์ดคอร์ส/ตารางข้อมูลเริ่มที่ x=413 แต่แท็บ ช่องค้นหา และปุ่มสลับมุมมอง
   เริ่มที่ 443 เพราะธีมใส่ padding 30px ซ้าย-ขวาไว้ที่ #subnav อีกชั้นหนึ่ง
   (ที่ 390px เป็น 45 กับ 75 = เยื้องเท่ากัน) · เยื้อง 30px ทั้งแถบโดยไม่มีเหตุผลทางสายตา
   เอา padding แนวนอนออก เหลือแนวตั้งไว้เป็นระยะห่างจากหัวหน้า */
body.buddypress #buddypress #item-body #subnav.item-list-tabs {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* มือถือ: ช่องค้นหาเต็มความกว้างคอลัมน์ และปุ่มสลับมุมมองเริ่มที่ขอบเดียวกับการ์ด
   (ธีมตั้ง .dir-search{text-align:right} + .switch_view{margin-left:10px} ไว้สำหรับแถวเดียวบนจอกว้าง) */
@media (max-width: 700px) {
  /* li ของแถบนี้ถูกสั่ง width:auto ไว้ในข้อ 29.12 (เพื่อให้แท็บกว้างเท่าคำ)
     ช่องค้นหาจึงหดตามความกว้างธรรมชาติของฟอร์ม 201px · คืนความกว้างเต็มให้เฉพาะ li ที่มีช่องค้นหา */
  body.buddypress #buddypress #item-body #subnav li:has(.dir-search) {
    width: 100% !important;
    display: block !important;
  }
  body.buddypress #buddypress #item-body #subnav .dir-search,
  body.buddypress #buddypress #item-body #subnav #search-course-form {
    text-align: left !important;
    width: 100% !important;
  }
  body.buddypress #buddypress #item-body #subnav #course_search {
    width: 100% !important;
  }
  /* แถวปุ่มสลับมุมมอง: ธีมล็อก li ไว้ 240px แล้วจัดกึ่งกลาง · บนมือถือให้เต็มแถวและชิดซ้าย
     เหมือนช่องค้นหาและการ์ดข้างล่าง */
  body.buddypress #buddypress #item-body #subnav li.switch_view {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
}


/* ---------- 29.14 แท็บเลือกกลุ่มข้อมูลในฟอร์มแก้ไขโปรไฟล์ (หน้า 12b) ----------
   ลูกค้าแจ้งว่า "มีเงา" · วัดแล้วไม่มี box-shadow สักเส้น สิ่งที่เห็นเป็นขอบ
   1px rgba(0,0,0,.08) รอบปุ่มพื้นเหลืองเข้ม #EFC439 มุม 2px
   ขอบเข้มบนพื้นเหลืองอ่านเป็นเงาของปุ่มยกนูน (แบบ UI ยุคก่อน)
   ทำให้เป็น segmented control ชุดเดียวกับปุ่มสลับมุมมองหน้า 11:
   ตัวที่เลือก = เหลืองแบรนด์ทึบ ตัวอื่น = ตัวหนังสือเงียบ ไม่มีขอบทั้งคู่ */
body.buddypress #buddypress .button-nav li a,
body.buddypress #buddypress ul.button-nav li a {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--ck-ink-60) !important;
  border-radius: 999px !important;
  padding: 0 var(--ck-sp-2) !important;
}
body.buddypress #buddypress .button-nav li a:hover,
body.buddypress #buddypress ul.button-nav li a:hover {
  background: rgba(34, 34, 34, .05) !important;
  color: var(--ck-ink) !important;
}
body.buddypress #buddypress .button-nav li.current a,
body.buddypress #buddypress ul.button-nav li.current a,
body.buddypress #buddypress .button-nav li.selected a,
body.buddypress #buddypress ul.button-nav li.current a:hover {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
}

/* ---------- 29.15 ปุ่ม "จบการเรียนบทนี้" โผล่มาทั้งที่ธีมซ่อนไว้ (หน้า 14) ----------
   ลูกค้าทักว่าเว็บ before ไม่มีปุ่มนี้ · ถูกต้อง markup มีเหมือนกันทั้งสองฝั่ง
   แต่ฝั่ง before ธีมตั้ง display:none ไว้ ส่วนฝั่งเรา rule ฐานของปุ่ม
   (`.button / input[type=submit] { display: inline-flex }` ในส่วนที่ 4)
   ไปเปิดมันขึ้นมา · เคสเดียวกับปุ่ม "ปรับปรุงสินค้าในตะกร้า" ในข้อ 19.4

   ⚠️ ห้ามใส่ !important ตรงนี้ · ธีมสั่งโชว์ปุ่มนี้ตอนเรียนจบบทด้วย jQuery .show()
   ซึ่งเขียนเป็น inline style (ไม่มี !important) ถ้าเราใส่ !important ปุ่มจะไม่มีวันโผล่
   แม้เรียนจบแล้ว · ใช้ specificity สูงกว่า rule ฐานพอ แล้วปล่อยให้ inline style ชนะเราได้ */
body.page-template-start .more_course input.review_course {
  display: none;
}

/* ---------- 29.16 หน้า 15 / 15b บัญชีผู้ใช้ ----------
   ก) แถบเมนูบัญชี (Dashboard / คำสั่งซื้อ / ...) ยังเป็นเม็ดยาเหลืองแบบเก่า
      อัปเดตเป็นลายเซ็นเดียวกับแท็บหน้า 11–13: ตัวที่เลือก = ขีดเน้นปากกาไฮไลต์
      ตัวอื่น = ลิงก์เงียบสีหมึก 60% (แถบไฮไลต์ผูกกับความสูงบรรทัด 1.5em ไม่ใช่ความสูงกล่อง) */
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 400 !important;
  padding: 0 4px !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
  /* ธีมตีกรอบรอบ li แต่ละอัน (เส้น 1px + พื้น) ทำให้เมนูดูเป็นปุ่มเรียงกัน
     ลายเซ็นที่ตกลงกันคือแท็บเป็นตัวหนังสือเปล่า มีแต่ตัวที่เลือกที่ถูกไฮไลต์ */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-right: var(--ck-sp-2) !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  margin-right: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(34, 34, 34, .05) !important;
  border-radius: 999px !important;
  color: var(--ck-ink) !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover {
  background-image: linear-gradient(transparent 60%, var(--ck-yellow) 60%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1.5em !important;
  background-position: 0 center !important;
  background-color: transparent !important;
  border-radius: 2px !important;
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
}

/* ข) ตารางคำสั่งซื้อ: เซลล์ padding 4px 8px = ตัวหนังสือเกือบชนขอบการ์ด
   ให้เป็น 14/16px ตามสเกล และคอลัมน์หัว-ท้ายเว้นจากขอบการ์ด 24px
   (การ์ดมุมโค้ง 19.6px ถ้าเนื้อหาชิดขอบจะดูเหมือนล้นออกมุม) */
body.woocommerce-account table.woocommerce-orders-table th,
body.woocommerce-account table.woocommerce-orders-table td,
body.woocommerce-account table.woocommerce-table th,
body.woocommerce-account table.woocommerce-table td,
body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td {
  padding: 14px var(--ck-sp-2) !important;
}
body.woocommerce-account table.woocommerce-orders-table th:first-child,
body.woocommerce-account table.woocommerce-orders-table td:first-child,
body.woocommerce-account table.woocommerce-table th:first-child,
body.woocommerce-account table.woocommerce-table td:first-child,
body.woocommerce-account table.shop_table th:first-child,
body.woocommerce-account table.shop_table td:first-child {
  padding-left: var(--ck-sp-3) !important;
}
body.woocommerce-account table.woocommerce-orders-table th:last-child,
body.woocommerce-account table.woocommerce-orders-table td:last-child,
body.woocommerce-account table.woocommerce-table th:last-child,
body.woocommerce-account table.woocommerce-table td:last-child,
body.woocommerce-account table.shop_table th:last-child,
body.woocommerce-account table.shop_table td:last-child {
  padding-right: var(--ck-sp-3) !important;
}

/* ---------- 29.17 แถบปุ่มใต้วิดีโอ หน้า 14 (ลูกค้าสั่ง redesign) ----------
   ของเดิม: แถบเทอร์ควอยซ์เข้มเต็มความกว้าง มีข้อความขาวสองก้อนลอยอยู่ข้างใน
   ("ทำเครื่องหมายว่าเรียนวีดีโอนี้แล้ว" กับ "วีดีโอถัดไป")
   ปัญหา: ทั้งสองอันเป็นแค่ตัวหนังสือ ไม่ได้อ่านว่าเป็นปุ่ม · ไม่มีลำดับความสำคัญ
   ทั้งที่อันหนึ่งคือ "ไปต่อ" (สิ่งที่คนกดทุกครั้ง) อีกอันคือ "ทำเครื่องหมาย" (นาน ๆ กด)
   และแถบสีเข้มเต็มความกว้างดึงสายตาแรงกว่าตัววิดีโอเอง

   ตามระบบที่วางไว้: primary = เหลืองทึบตัวหนังสือหมึก · secondary = ขาวมีเส้นขอบ
   วางชิดขวาเพราะเป็นการกระทำ "ต่อไป" และแถบไม่ต้องมีพื้นสีของตัวเอง */
:root {
  --ck-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.6 3.6L14.5 5.5' fill='none' stroke='%23222222' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ck-ic-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23222222' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h11M9.5 4.5L14 9l-4.5 4.5'/%3E%3C/g%3E%3C/svg%3E");
}
body.page-template-start .unit_prevnext {
  background: transparent !important;
  /* ธีมตีกรอบเข้ม 2px รอบแถบ แล้วดึง margin ติดลบ 20px ให้แถบเลยขอบกล่องเนื้อหาออกไป
     (เพราะเดิมมันเป็นแถบสีทึบเต็มความกว้าง) พอไม่มีพื้นสีแล้ว กรอบเลยลอยเป็นกล่องเปล่า
     และปุ่มก็ยื่นเลยแนวเนื้อหาออกไปข้างละ 20px */
  border: 0 !important;
  margin: var(--ck-sp-2) 0 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ck-sp-2);
  padding: var(--ck-sp-2) 0 !important;
  margin-top: var(--ck-sp-1);
}
/* คอลัมน์ว่างของ bootstrap ที่เหลือไว้กันที่ · พอเป็น flex มันกลายเป็นช่องว่างจริง */
body.page-template-start .unit_prevnext > div:empty {
  display: none !important;
}
body.page-template-start .unit_prevnext > div {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
/* ฐานร่วมของทั้งสองปุ่ม */
body.page-template-start .unit_prevnext a.unit_button {
  min-height: 48px !important;
  padding: 0 var(--ck-sp-3) !important;
  border-radius: 999px !important;
  font-size: var(--ck-fs-body) !important;
  display: inline-flex !important;
  align-items: center;
  gap: var(--ck-sp-1);
  color: var(--ck-ink) !important;
  transition: background .15s, box-shadow .15s;
}
body.page-template-start .unit_prevnext a.unit_button span {
  color: inherit !important;
}
/* secondary · ทำเครื่องหมายว่าเรียนแล้ว (การกระทำรอง) */
body.page-template-start .unit_prevnext a#mark-complete {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--ck-ink-10);
}
body.page-template-start .unit_prevnext a#mark-complete::before {
  content: "";
  width: 18px; height: 18px; flex: 0 0 18px;
  background: var(--ck-ic-check) no-repeat center / 18px 18px;
  opacity: .55;
}
body.page-template-start .unit_prevnext a#mark-complete:hover {
  background: var(--ck-cream) !important;
}
/* ธีมแปะไอคอน FontAwesome ไว้ท้ายปุ่มนี้สำหรับตอนที่ป้ายกำกับถูกซ่อนบนมือถือ
   พอเราเอาป้ายกำกับกลับมาแล้ว มันเลยกลายเป็นวงกลมทึบลอยท้ายข้อความ ซ้ำกับเครื่องหมายถูกที่หัวปุ่ม */
body.page-template-start .unit_prevnext a#mark-complete::after {
  /* ใช้ content:none ไม่ใช่ display:none · เดี๋ยวข้อ 29.18 ต้องใช้ ::after ตัวนี้
     ติดป้ายกำกับ "เรียนวีดีโอนี้แล้ว" ในสถานะหลังกด ถ้าปิดด้วย display จะเปิดกลับไม่ได้ */
  content: none !important;
}
/* primary · วีดีโอถัดไป (สิ่งที่ผู้เรียนกดทุกครั้งที่ดูจบ) */
body.page-template-start .unit_prevnext a#next_unit {
  background: var(--ck-yellow) !important;
  font-weight: 700 !important;
  box-shadow: var(--ck-sh-sticker);
}
body.page-template-start .unit_prevnext a#next_unit::after {
  content: "";
  width: 18px; height: 18px; flex: 0 0 18px;
  background: var(--ck-ic-next) no-repeat center / 18px 18px;
}
body.page-template-start .unit_prevnext a#next_unit:hover {
  background: var(--ck-yellow-deep) !important;
}
/* มือถือ: ปุ่มเต็มความกว้าง เรียงบน-ล่าง โดยให้ "ไปต่อ" อยู่บนสุด */
@media (max-width: 767px) {
  body.page-template-start .unit_prevnext {
    /* เดิมใช้ column-reverse เพื่อดัน "วีดีโอถัดไป" ขึ้นบน · พอข้อ 29.24 สลับด้วย order แล้ว
       ต้องกลับมาเป็น column ธรรมดา ไม่งั้นสองอย่างหักล้างกันจนปุ่มถัดไปตกไปอยู่ล่างสุด */
    flex-direction: column;
    align-items: stretch;
  }
  body.page-template-start .unit_prevnext a.unit_button {
    width: 100% !important;
    justify-content: center;
  }
  /* ธีมซ่อนป้ายกำกับบนมือถือเหลือแต่ไอคอน (เพราะเดิมปุ่มแคบมาก)
     ตอนนี้ปุ่มเต็มความกว้างแล้ว ไอคอนเปล่า ๆ ไม่บอกอะไรเลยว่ากดแล้วเกิดอะไร */
  body.page-template-start .unit_prevnext a.unit_button span {
    display: inline !important;
  }
}

/* ---------- 29.18 สถานะ "เรียนแล้ว" ของหน้า 14 ----------
   อ่านจาก course.js ของ vibe-course-module (ตัวจริงที่รันบนเว็บ) แล้ววัดผลตามนั้น
   กด #mark-complete → ยิง ajax complete_unit แล้วในคอลแบ็ก success ธีมทำ 4 อย่าง
     1) $this.html('<i class="icon-check"></i>')  ← แทนเนื้อในปุ่มทั้งหมด ป้ายกำกับหายเกลี้ยง
     2) .course_timeline .active เพิ่มคลาส done
     3) ถ้ามีบทถัดไป จะปลด .hide ของ #next_unit
     4) .course_progressbar trigger increment → คำนวณ % จาก done/total ใหม่

   ปัญหาของสถานะหลังกด: ปุ่มเหลือแค่เครื่องหมายถูกลอย ๆ ในเม็ดยากว้าง ๆ
   ไม่มีคำบอกว่าถูกนั้นแปลว่าอะไร และยังหน้าตาเหมือนปุ่มที่กดได้อยู่
   → ติดป้ายกำกับกลับให้ด้วย ::after แล้วเปลี่ยนเป็นสถานะ "เสร็จแล้ว" ที่กดไม่ได้ */
body.page-template-start .unit_prevnext a#mark-complete:has(i.icon-check) {
  background: var(--ck-mint) !important;
  color: var(--ck-mint-ink) !important;
  box-shadow: none !important;
  cursor: default;
  pointer-events: none;
}
/* ไอคอนของธีมเป็น icon font ที่ไม่ได้อยู่ในระบบไอคอนของเรา · ใช้เครื่องหมายถูกตัวเดิมของปุ่มแทน */
body.page-template-start .unit_prevnext a#mark-complete i.icon-check {
  display: none !important;
}
body.page-template-start .unit_prevnext a#mark-complete:has(i.icon-check)::before {
  opacity: 1;
}
body.page-template-start .unit_prevnext a#mark-complete:has(i.icon-check)::after {
  content: "เรียนวีดีโอนี้แล้ว" !important;
  display: inline !important;
  font-family: inherit !important;
  font-size: var(--ck-fs-body) !important;
  width: auto !important;
  height: auto !important;
  color: inherit !important;
}
/* ระหว่างรอ ajax ธีมใส่คลาส disabled + สปินเนอร์ */
body.page-template-start .unit_prevnext a#mark-complete.disabled:not(:has(i.icon-check)) {
  opacity: .5;
  cursor: not-allowed;
}

/* บทที่เรียนจบแล้วในไทม์ไลน์: ธีมเติมแค่คลาส done โดยไม่มีสไตล์รองรับเลย
   (ตรวจแล้วหน้าตาเหมือนบทที่ยังไม่ได้เรียนทุกประการ) · ติดเครื่องหมายถูกให้จุดบนเส้น */
body.page-template-start .course_timeline li.unit_line.done > span {
  background: var(--ck-mint-ink) !important;
  box-shadow: 0 0 0 3px var(--ck-mint);
}
body.page-template-start .course_timeline li.unit_line.done > a.unit {
  color: var(--ck-ink-60) !important;
}
/* ไม่ต้องเติมเครื่องหมายถูกท้ายชื่อบท · จุดบนเส้นของธีมมีถูกอยู่ในวงกลมแล้ว
   (เพิ่งเห็นตอนเรนเดอร์สถานะจริง ก่อนหน้านี้ไม่มีสไตล์รองรับเลยดูไม่ออกว่ามี) */

/* ============================================================
   30. หน้าสินค้าเดี่ยว · แถวสถิติคอร์ส + ย่อ "คอร์สที่รวมอยู่" (2026-08-18)
   ============================================================

   สองข้อนี้ CSS ทำแทนไม่ได้ทั้งคู่ ต้องมี markup จาก dev ก่อน
   (ตัวเลขชั่วโมงไม่มีอยู่ในหน้าเลย · และ toggle ต้องมี details/summary)
   สเปก markup อยู่ใน handoff/TASKS-DEV.md กลุ่ม H
   ในโฟลเดอร์ mock ดูได้ที่ demo/01-product.html ซึ่ง build-demo.py ฉีด markup ให้

   >> production: อัปโหลดไอคอน 3 ไฟล์เข้า Media Library แล้วแก้ path ในข้อ 30.1
      ให้เป็น URL เต็ม เช่น url("https://chemistryk.online/wp-content/uploads/2026/08/course-duration.png")
   ------------------------------------------------------------ */

/* ---------- 30.1 ไอคอน ----------
   อาร์ตเวิร์กชุดที่ใช้: ref/artworks/generated/3 (2026-08-19)
   ย่อจาก 1024×1024 เป็น 192×192 (ด้านยาว 172px กลางเฟรม) = 5.3 เท่าของขนาดแสดงจริง 36px

   ทำไมเป็นชุดนี้ · วัด contrast ของหมึกเทียบพื้นครีมที่ขนาดแสดงจริง 36px
     ชุดแรก (flat vector)  ผ่าน 3:1 = 27–31% · เส้นเข้มที่เหลือ  9–16%
     ชุดสอง (ลายมือเส้นบาง) ผ่าน 3:1 =  8–13% · เส้นเข้มที่เหลือ  0–4%  ← จางจนละลายไปกับพื้น
     ชุดสาม (ลายมือเส้นหนา) ผ่าน 3:1 = 31–38% · เส้นเข้มที่เหลือ 15–20%  ← ใช้ตัวนี้
   บทเรียน: เส้นขอบที่วาดบนผืน 1024px ต้องหนาพอที่จะรอด anti-alias ตอนย่อลง 36px
   และเป็นสไตล์ "ขอบดำหนาแบบสติกเกอร์" ตามที่ ref/BRAND-GUIDELINE.md ระบุไว้ด้วย */
:root {
  --ck-ic-duration: url("icons/course-duration.png");   /* นาฬิกาพก · ชั่วโมงคอร์ส        */
  --ck-ic-learning: url("icons/learning-hours.png");    /* นาฬิกาทราย · ชั่วโมงที่เรียนได้   */
  --ck-ic-validity: url("icons/course-validity.png");   /* ปฏิทินตั้งโต๊ะ · อายุคอร์สเรียน      */
}

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

   ทำไมต้องมี div ครอบ: คอลัมน์สินค้าของธีมไม่ได้ยืดตามจอ มันกระโดดเป็นขั้น
   ตามเบรกพอยต์ของธีมเอง · วัดจริงได้ 286 / 361 / 422 / 451px
   ที่ 286 กับ 361 วาง 3 ช่องนอนแล้วป้าย "ชั่วโมงที่เรียนได้" ตกบรรทัดทุกช่อง
   จึงสลับเลย์เอาต์ตาม "ความกว้างกล่องจริง" ด้วย container query
   ไม่ใช่ตามความกว้างจอ (media query) ซึ่งเดาความกว้างกล่องไม่ได้
   ตั้งบน div ของเราเอง ไม่ตั้งบน .summary ของธีม จะได้ไม่ไปกวน layout เดิม */
body.theme-wplms.single-product .ck-course-stats-wrap {
  container-type: inline-size;
  margin: var(--ck-sp-2) 0;
}

/* ค่าตั้งต้น = เรียงลง 3 แถว (กล่องแคบ/เบราว์เซอร์ที่ยังไม่รองรับ container query)
   ป้ายกับตัวเลขอยู่บรรทัดเดียวกันคนละฝั่ง อ่านเป็นตารางได้ */
body.theme-wplms.single-product .ck-course-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin: 0;
  padding: 14px 12px;
  background: var(--ck-cream);
  border-radius: 18px;
  list-style: none;
}

body.theme-wplms.single-product .ck-course-stats li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  column-gap: var(--ck-sp-1);
  min-height: 44px;
  margin: 0;
  border: 0;
  padding: 0;
}

/* ไอคอนวาดด้วย background บน ::before · ธีมไม่มี <img> ให้เกาะ
   และวิธีนี้ dev เปลี่ยนไอคอนได้ที่ตัวแปรจุดเดียว (ข้อ 30.1) */
body.theme-wplms.single-product .ck-course-stats li::before {
  content: "";
  grid-row: 1;
  width: 36px;
  height: 36px;
  background: var(--ck-ic-duration) center / contain no-repeat;
}
body.theme-wplms.single-product .ck-course-stats li.ck-stat-learning::before {
  background-image: var(--ck-ic-learning);
}
body.theme-wplms.single-product .ck-course-stats li.ck-stat-validity::before {
  background-image: var(--ck-ic-validity);
}

/* ป้าย = ข้อมูลรอง · ตัวเลข = ตัวที่ต้องอ่านเจอก่อน */
body.theme-wplms.single-product .ck-course-stats .ck-stat-label {
  grid-row: 1;
  grid-column: 2;
  font-size: var(--ck-fs-caption);
  line-height: 1.5;
  color: var(--ck-ink-60);
}
body.theme-wplms.single-product .ck-course-stats .ck-stat-value {
  grid-row: 1;
  grid-column: 3;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ck-ink);
}

/* กล่องกว้างพอ (วัดแล้ว: ต้องการ ~400px ขึ้นไปป้ายถึงไม่ตกบรรทัด) -> 3 ช่องนอน
   ไอคอนซ้าย · ป้ายบน · ตัวเลขล่าง */
@container (min-width: 400px) {
  body.theme-wplms.single-product .ck-course-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ck-sp-1);
  }
  body.theme-wplms.single-product .ck-course-stats li {
    grid-template-columns: 40px 1fr;
    min-height: 0;
  }
  body.theme-wplms.single-product .ck-course-stats li::before {
    grid-row: 1 / span 2;            /* ไอคอนสูงคร่อมทั้งป้ายและตัวเลข */
    width: 40px;
    height: 40px;
  }
  body.theme-wplms.single-product .ck-course-stats .ck-stat-label {
    grid-row: 1;
  }
  body.theme-wplms.single-product .ck-course-stats .ck-stat-value {
    grid-row: 2;
    grid-column: 2;
    text-align: left;
  }
}

/* ---------- 30.3 "คอร์สที่รวมอยู่" ย่อเหลือบรรทัดเดียว ----------
   เดิมกางเต็ม 3 บรรทัด กินที่ระหว่างราคากับปุ่มซื้อ ทั้งที่เป็นข้อมูลประกอบ
   เกาะ details.connected_courses เท่านั้น ถ้า dev ยังไม่ได้แปลง markup
   กล่องเดิม (div) จะยังแสดงแบบกางเต็มเหมือนเดิม ไม่พัง */
body.theme-wplms.single-product details.connected_courses > summary {
  display: flex;
  align-items: center;
  gap: var(--ck-sp-1);
  min-height: 44px;
  margin: calc(var(--ck-sp-2) * -1);   /* หักลบ padding ของกล่อง ให้พื้นที่กดเต็มความกว้าง */
  padding: 0 var(--ck-sp-2);
  border-radius: 18px;
  cursor: pointer;
  list-style: none;                /* ซ่อนสามเหลี่ยมของเบราว์เซอร์ */
}
body.theme-wplms.single-product details.connected_courses > summary::-webkit-details-marker {
  display: none;
}
body.theme-wplms.single-product details[open].connected_courses > summary {
  margin-bottom: var(--ck-sp-1);       /* กางแล้วค่อยเว้นให้รายการข้างล่าง */
}

/* h6 ในหัวข้อ: ข้อ 13 แปลคำด้วย font-size:0 + ::after อยู่แล้ว ที่นี่แค่จัดแถว */
body.theme-wplms.single-product details.connected_courses > summary h6 {
  margin: 0;
  line-height: 1.5;
}

/* จำนวนคอร์ส · มีไว้บอกว่าข้างในมีอะไรตอนที่ยังไม่กาง ถ้าไม่มีก็ไม่มีเหตุผลให้กด
   แต่เป็นข้อมูลเบื้องต้นเท่านั้น ไม่ใช่เหตุผลซื้อ (ลูกค้ายืนยัน 2026-08-19:
   คนซื้อไม่ได้ตัดสินใจจากว่าแพ็กนี้มีกี่คอร์ส แต่จากว่าได้คอร์สอะไร)
   เดิมทำเป็นพิลสีฟ้า อ่านเป็น "ตัวเลขสำคัญ" น้ำหนักเท่าแถวสถิติ ซึ่งเกินจริง
   ลดเหลือ caption เทาธรรมดา · ยังอ่านเจอ แต่ไม่แย่งสายตาจากราคากับปุ่มที่อยู่เหนือมัน */
body.theme-wplms.single-product details.connected_courses .cc-count {
  font-size: var(--ck-fs-caption);
  font-weight: 400;
  color: var(--ck-ink-60);
  line-height: 1.6;
}

/* ลูกศรบอกสถานะกาง/ย่อ ดันไปชิดขวา */
body.theme-wplms.single-product details.connected_courses > summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ck-ink-60);
  border-bottom: 2px solid var(--ck-ink-60);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s;
}
body.theme-wplms.single-product details[open].connected_courses > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
/* hover ของแถบ toggle · เดิมเป็น #fff ซึ่งผิดทาง (ลูกค้าแจ้ง 2026-08-19)
   summary กินเต็มกล่อง พอ hover เป็นขาว กล่องครีมทั้งใบจะกลายเป็นขาวเท่าการ์ดที่รองอยู่
   คือ "หายไป" ตอนเอาเมาส์ชี้ ทั้งที่ hover ควรบอกว่ากดตรงนี้ได้
   ใช้หมึกจาง ๆ ทับครีมแทน · เข้มลงเล็กน้อย เห็นขอบเขตชัดขึ้น ไม่ใช่จางลง
   (ลิงก์รายชื่อคอร์สข้างในยังเป็น #fff ได้ เพราะมันเป็นชิปเล็กที่มีครีมล้อมรอบ ไม่กลืน) */
body.theme-wplms.single-product details.connected_courses > summary:hover {
  background: rgba(34, 34, 34, .05);
}
body.theme-wplms.single-product details.connected_courses > summary:focus-visible {
  outline: 2px solid var(--ck-ink);
  outline-offset: 2px;
}

/* ---------- 30.4 ลำดับในการ์ดสินค้า (ลูกค้าเลือก 2026-08-18) ----------
   เดิม: ชื่อคอร์ส · แถวสถิติ · ราคา · คอร์สที่รวมอยู่ · คำอธิบาย · ปุ่มสั่งซื้อ
   ปัญหา 2 ข้อ
   (1) ราคาห่างจากปุ่มสั่งซื้อ 3 บล็อก ทั้งที่เป็นคู่ที่ต้องอ่านพร้อมกันตอนตัดสินใจ
       (มือถือติดกันอยู่แล้วในแถบล่าง แต่ desktop แยกกัน)
   (2) คำอธิบายมาเป็นบล็อกที่ 5 ทั้งที่เป็นคำตอบว่า "คอร์สนี้คืออะไร"
   ใหม่ (ลูกค้ากำหนดลำดับเอง 2026-08-19):
     ชื่อคอร์ส · รหัสสินค้า · [ราคา + ปุ่ม] · รายละเอียด · ชั่วโมง · คอร์สที่รวมอยู่
   = เอาสิ่งที่ต้องตัดสินใจไว้บนสุด ที่เหลือเป็นข้อมูลประกอบเรียงลงไป

   "คอร์สที่รวมอยู่" ต้องอยู่ล่างสุดเสมอ (ลูกค้าแจ้ง 2026-08-18):
   มันเป็น details ที่กางได้ ถ้าอยู่เหนือปุ่ม พอกางดู 3 คอร์ส ความสูงจะดันราคากับปุ่มตกจอ
   คนที่เพิ่งกดดูรายการคอร์สคือคนที่กำลังจะตัดสินใจ · ห้ามให้ปุ่มหายไปตอนนั้น
   วางไว้ล่างสุดแล้วจะกางเท่าไรก็ไม่ขยับอะไรที่อยู่เหนือมัน

   ทำด้วย flex order เพราะ CSS ย้าย DOM ไม่ได้
   ⚠️ ลำดับที่ตาเห็นจึงไม่ตรงกับลำดับใน DOM · screen reader จะยังอ่านตามลำดับเดิม
      ไม่ได้ทำให้ใช้งานไม่ได้ (ราคา/คำอธิบายไม่ใช่ element ที่โฟกัสได้ ลำดับ tab ไม่เปลี่ยน)
      แต่ควรให้ dev ไปสลับลำดับที่ต้นทางด้วย → TASKS-DEV กลุ่ม H ข้อ H3 */
body.theme-wplms.single-product .summary.entry-summary {
  display: flex;
  flex-direction: column;
}
/* flex ไม่ยุบ margin ที่ชนกันเหมือน block flow · ระยะห่างจะบวกกันเป็นสองเท่า
   จึงล้าง margin-top ทุกตัวแล้วคุมช่องไฟด้วย margin-bottom ตัวเดียว */
body.theme-wplms.single-product .summary.entry-summary > * {
  margin-top: 0;
}
body.theme-wplms.single-product .summary.entry-summary > span            { order: 1; }  /* breadcrumbs (ธีมซ่อนอยู่) */
body.theme-wplms.single-product h1.product_title                        { order: 2; }
body.theme-wplms.single-product .product_meta                           { order: 3; }
body.theme-wplms.single-product .summary p.price                        { order: 4; }
body.theme-wplms.single-product form.cart                               { order: 5; }
body.theme-wplms.single-product .woocommerce-product-details__short-description { order: 6; }
body.theme-wplms.single-product .ck-course-stats-wrap                   { order: 7; }
body.theme-wplms.single-product .connected_courses                      { order: 8; }

body.theme-wplms.single-product h1.product_title,
body.theme-wplms.single-product h1.product_title.entry-title {
  margin-bottom: 6px;      /* รหัสสินค้าเป็น caption ของชื่อคอร์ส เกาะกันไว้ */
}
body.theme-wplms.single-product .product_meta,
body.theme-wplms.single-product .woocommerce-product-details__short-description,
body.theme-wplms.single-product .ck-course-stats-wrap {
  margin-bottom: var(--ck-sp-2);
}
body.theme-wplms.single-product .connected_courses {
  margin-bottom: 0;        /* ตัวสุดท้ายในการ์ด · การ์ดมี padding ของตัวเองแล้ว */
}

/* ราคา + ปุ่ม = กลุ่มตัดสินใจ คั่นจากข้อมูลข้างบนด้วยเส้นบาง แล้วชิดกันเอง
   เฉพาะจอกว้าง · ที่ ≤700px ราคากับปุ่มถูกตรึงเป็นแถบล่างจออยู่แล้ว (ข้อ P2)
   และกฎในบล็อกนี้อยู่ท้ายไฟล์ ถ้าไม่ครอบ media query จะไปทับกฎของแถบล่าง */
@media (min-width: 701px) {
  /* margin-top ของราคาตั้งไว้ 16px ตั้งแต่ข้อ P1 และกฎ "> * {margin-top:0}" ข้างบน
     ชนะมันไม่ได้ (specificity ต่ำกว่าหนึ่งขั้น) · ต้องล้างตรงนี้
     ไม่งั้นจะบวกกับ margin-bottom ของรหัสสินค้าเป็น 32px คั่นกลางกลุ่มตัดสินใจ */
  body.theme-wplms.single-product .summary p.price {
    margin-top: 0;
    margin-bottom: 10px;
  }
  /* เส้นคั่นอยู่ "ใต้ปุ่ม" ไม่ใช่เหนือราคา · แบ่งกลุ่มตัดสินใจ (ชื่อ/รหัส/ราคา/ปุ่ม)
     ออกจากข้อมูลประกอบที่เรียงอยู่ข้างล่าง (รายละเอียด/ชั่วโมง/คอร์สที่รวมอยู่) */
  body.theme-wplms.single-product form.cart {
    padding-bottom: var(--ck-sp-3);
    margin-bottom: var(--ck-sp-3);
    border-bottom: 1px solid var(--ck-ink-10);
  }
}

/* คำอธิบายเป็น flex item แล้ว margin ของ <p> ข้างในจึงไม่ยุบออกนอกกล่องเหมือนก่อน
   (flex item สร้าง BFC ใหม่) ทำให้ช่องไฟบวกเพิ่มอีก 20px ทั้งบนและล่าง */
body.theme-wplms.single-product .woocommerce-product-details__short-description > :first-child {
  margin-top: 0;
}
body.theme-wplms.single-product .woocommerce-product-details__short-description > :last-child {
  margin-bottom: 0;
}

/* ---------- 29.19 ตัดแท็บบัญชีที่ไม่ได้ใช้ (ลูกค้าสั่ง 2026-08-19) ----------
   เปิดดูของจริงบนเว็บ (ล็อกอินจริง) แล้วพบว่าอีก 4 แท็บแทบไม่มีอะไรอยู่
     · แผงควบคุม · มี 2 ย่อหน้า และย่อหน้าที่สองเป็นภาษาอังกฤษทั้งก้อน ไม่มีลิงก์/ปุ่ม/ข้อมูลใด ๆ
     · ดาวน์โหลด · ว่างเปล่าถาวร คอร์สเป็นสินค้าที่ไม่มีไฟล์ให้โหลด
     · ที่อยู่ · ที่อยู่ในใบเสร็จ ซึ่งซ้ำกับที่อยู่ในโปรไฟล์ BuddyPress (หน้า 12b) คนละฐานข้อมูล
     · ข้อมูลบัญชี · ชื่อ/อีเมล/รหัสผ่าน ซึ่งชื่อก็ซ้ำกับโปรไฟล์อีกเช่นกัน
   เหลือไว้เฉพาะ "คำสั่งซื้อ" (หน้า 15 → 15b) ที่รีสกินและตรวจแล้ว
   ส่วน "ออกจากระบบ" ตัดได้เพราะเมนูผู้ใช้บนหัวเว็บมีปุ่ม LOGOUT อยู่แล้ว (ตรวจแล้วทุกหน้า)

   เขียนเป็น :not(--orders) เพื่อให้แท็บที่ WooCommerce เพิ่มมาในอนาคตถูกตัดด้วยโดยอัตโนมัติ

   ⚠️ CSS ซ่อนได้แค่ "ลิงก์" · ตัว endpoint ยังเข้าถึงได้ถ้าพิมพ์ URL เอง
      ถ้าจะปิดจริงต้องลบ endpoint ใน WooCommerce → Settings → Advanced → Account endpoints
      (เขียนไว้ที่ TASKS-DEV กลุ่ม F2) */
body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.woocommerce-MyAccount-navigation-link--orders) {
  display: none !important;
}

/* ---------- 29.20 เงารอบฟอร์มแก้ไขโปรไฟล์ (หน้า 12b) ----------
   กฎการ์ดใน ส่วนที่ 7 (`form.standard-form { radius + เงาฟุ้ง }`) เขียนไว้สำหรับกล่องล็อกอิน
   ซึ่งมีพื้นขาวจริง ๆ · แต่ฟอร์มแก้ไขโปรไฟล์พื้นโปร่ง เงาจึงลอยรอบอากาศ
   เห็นเป็นกรอบจาง ๆ ที่ไม่ได้ล้อมอะไร (วัดแล้ว: background-color = rgba(0,0,0,0))
   ในหน้านี้การ์ดจริงคือช่องกรอกสีขาวแต่ละช่องอยู่แล้ว ฟอร์มจึงไม่ต้องเป็นการ์ดซ้อนอีกชั้น */
body.bp-user #buddypress form#profile-edit-form.standard-form {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---------- 29.21 ซ่อนฟิลด์ที่ซ้ำกับฟอร์มสั่งซื้อ (หน้า 12b) ----------
   ลูกค้าเลือก "ซ่อน ไม่ลบ" (2026-08-19) · ค่าที่ผู้เรียนเคยกรอกยังอยู่ในฐานข้อมูลครบ
   และเปิดกลับได้ด้วยการลบบล็อกนี้บรรทัดเดียว

   เหตุผล: ฟอร์มลงทะเบียนจัดส่งหนังสือ (หน้า 9) เก็บข้อมูลชุดเดียวกันทุกครั้งที่สั่งคอร์ส
   และละเอียดกว่า · ที่อยู่แยกเป็น ตำบล/อำเภอ/จังหวัด/ไปรษณีย์ · โรงเรียนมีจังหวัดโรงเรียนด้วย
   ข้อมูลในโปรไฟล์จึงเป็นสำเนาที่เก่ากว่าเสมอ และไม่มีใครใช้

     field_13 = โรงเรียน        ← ซ้ำกับ "ชื่อโรงเรียน" + "จังหวัดโรงเรียน"
     field_7  = ที่อยู่          ← ซ้ำกับ "ที่อยู่ในการจัดส่งหนังสือ" ทั้งชุด
     field_8  = ประวัตินักเรียน  ← ช่อง rich-text ที่ลาก TinyMCE ทั้งชุดมาโหลด แทบไม่มีใครกรอก

   สามช่องนี้เป็น optional-field ทั้งหมด ซ่อนได้ทันทีโดยไม่กระทบการบันทึกฟอร์ม */
body.bp-user #buddypress #profile-edit-form .editfield.field_13,
body.bp-user #buddypress #profile-edit-form .editfield.field_7,
body.bp-user #buddypress #profile-edit-form .editfield.field_8 {
  display: none !important;
}

/* ⚠️ field_15 = สถานะผู้เรียน (เก่า/ใหม่) · ซ้ำกับ "เด็กรุ่นไหน" ในฟอร์มหน้า 9
   ยัง **ห้ามซ่อน** จนกว่าจะตั้ง required = No ใน BuddyPress ก่อน
   เพราะช่องนี้เป็น required-field: ถ้าซ่อนทั้งที่ค่ายังว่าง ผู้เรียนจะกดบันทึกไม่ได้เลย
   (เบราว์เซอร์ฟ้อง "invalid form control is not focusable" และ BuddyPress ก็ตรวจซ้ำฝั่งเซิร์ฟเวอร์)
   ขั้นตอนอยู่ที่ TASKS-DEV กลุ่ม I · พอตั้งค่าเสร็จแล้วค่อยเปิดสองบรรทัดล่างนี้

body.bp-user #buddypress #profile-edit-form .editfield.field_15 {
  display: none !important;
}
*/

/* ---------- 29.22 กล่องอัปโหลดสลิป (หน้า 7 และหน้า 8) ----------
   วัดของเดิม: การ์ดฟอร์มมีเงาซ้อนกับการ์ดหัวข้อด้านบน (ทั้งที่เป็นการ์ดใบเดียวกัน)
   · แถวฟอร์มถูกบีบด้วย margin ซ้าย-ขวา 176px เนื้อหาเลยลอยกลางไม่ตรงแนวกับหัวข้อ
   · ปุ่ม "เลือกไฟล์สลิป" กับ "ส่งสลิป" เป็นเหลืองทึบเหมือนกันทั้งคู่ ไม่รู้ว่าต้องกดอันไหนก่อน
   · ปุ่มลบไฟล์เป็นวงกลมเหลืองทึบ เด่นเท่าปุ่มหลักทั้งที่เป็นปุ่มทำลาย
   · ชื่อไฟล์ลอยเป็นข้อความเปล่า ไม่มีขอบเขตว่าตรงไหนคือ "ช่องกรอก" */

/* การ์ดใบเดียวกับหัวข้อด้านบน ไม่ต้องมีเงาของตัวเอง */
body.woocommerce-order-received .forminator-ui.forminator-custom-form,
body.theme-wplms.page-id-222845 .forminator-ui.forminator-custom-form {
  box-shadow: none !important;
}
/* เลิกบีบแถว · ให้กว้างเท่าการ์ด แล้วอาศัย padding ของการ์ดเป็นระยะขอบ */
/* ฟอร์มใหญ่หน้า 9 ถูกจำกัดความกว้างไว้ 880px แล้ว margin auto (อ่านง่ายขึ้นสำหรับฟอร์มยาว)
   แต่ฟอร์มนี้มีช่องเดียว การจัดกึ่งกลางทำให้มันลอยไม่ตรงแนวกับหัวข้อ "สลิปการชำระเงิน" ของตัวเอง
   → จัดเป็นคอลัมน์เดียวชิดซ้ายตรงแนวหัวข้อ กว้าง 520px (พอสำหรับปุ่ม + ชื่อไฟล์ ไม่ยาวจนปุ่มดูเทอะทะ) */
body.woocommerce-order-received .forminator-ui.forminator-custom-form .forminator-row,
body.theme-wplms.page-id-222845 .forminator-ui.forminator-custom-form .forminator-row {
  max-width: 520px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* คอลัมน์ของ Forminator มี padding ข้างละ 15px ไว้เว้นช่องไฟระหว่างคอลัมน์ในฟอร์มหลายช่อง
   ฟอร์มนี้มีคอลัมน์เดียว 15px นั้นจึงกลายเป็นการเยื้อง ทำให้ปุ่มส่งไม่ตรงแนวกับช่องเลือกไฟล์ */
body.woocommerce-order-received .forminator-ui.forminator-custom-form .forminator-col,
body.theme-wplms.page-id-222845 .forminator-ui.forminator-custom-form .forminator-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* กลุ่มเลือกไฟล์ = ช่องกรอกหนึ่งช่อง มีขอบเขตของตัวเอง */
body.woocommerce-order-received .forminator-file-upload,
body.theme-wplms.page-id-222845 .forminator-file-upload {
  display: flex !important;
  align-items: center;
  gap: var(--ck-sp-1);
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--ck-ink-10);
  border-radius: 16px;
  padding: var(--ck-sp-1);
}
/* ปุ่มเลือกไฟล์เป็นการกระทำรอง · ปุ่มหลักของการ์ดนี้คือ "ส่งสลิป" */
body.woocommerce-order-received .forminator-file-upload button.forminator-button-upload,
body.theme-wplms.page-id-222845 .forminator-file-upload button.forminator-button-upload {
  background: #fff !important;
  color: var(--ck-ink) !important;
  box-shadow: inset 0 0 0 1px var(--ck-ink-10) !important;
  margin: 0 !important;
  flex: none;
}
body.woocommerce-order-received .forminator-file-upload button.forminator-button-upload:hover,
body.theme-wplms.page-id-222845 .forminator-file-upload button.forminator-button-upload:hover {
  background: var(--ck-cream) !important;
}
/* ชื่อไฟล์ (หรือ "No file chosen" ก่อนเลือก) · ตัดท้ายด้วย … ถ้าชื่อยาว
   ⚠️ ห้ามซ่อนหรือแทนข้อความนี้ด้วย CSS: Forminator ใช้ span ตัวเดียวกันแสดงชื่อไฟล์หลังเลือกแล้ว
      และไม่ได้เติมคลาสบอกสถานะ (ทดสอบด้วยการอัปโหลดไฟล์จริงแล้ว) ถ้าซ่อน ชื่อไฟล์จะหายไปด้วย
      คำว่า "No file chosen" เป็นสตริงของปลั๊กอิน ต้องแปลที่ไฟล์ภาษา · ดู TASKS-DEV กลุ่ม C */
body.woocommerce-order-received .forminator-file-upload > span,
body.theme-wplms.page-id-222845 .forminator-file-upload > span {
  flex: 1 1 120px;
  min-width: 0;
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-caption) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ปุ่มลบไฟล์: เป็นการกระทำที่ทำลายของ ต้องเงียบกว่าปุ่มอื่น ไม่ใช่เหลืองทึบ */
body.woocommerce-order-received .forminator-file-upload .forminator-button-delete,
body.theme-wplms.page-id-222845 .forminator-file-upload .forminator-button-delete {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--ck-ink-10) !important;
  color: var(--ck-ink-60) !important;
  flex: none;
  /* ขนาดคง 44px ตามเกณฑ์พื้นที่กด (ตั้งไว้แล้วในข้อ 23.8) · ที่นี่เปลี่ยนแค่น้ำหนักสายตา */
}
body.woocommerce-order-received .forminator-file-upload .forminator-button-delete:hover,
body.theme-wplms.page-id-222845 .forminator-file-upload .forminator-button-delete:hover {
  background: var(--ck-cream) !important;
  color: var(--ck-error) !important;
}
/* ปุ่มส่ง = ปุ่มหลัก กว้างเต็มช่อง วางห่างจากช่องเลือกไฟล์ตามสเกล */
body.woocommerce-order-received .forminator-ui.forminator-custom-form button.forminator-button-submit,
body.theme-wplms.page-id-222845 .forminator-ui.forminator-custom-form button.forminator-button-submit {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  margin: var(--ck-sp-2) 0 0 !important;
}

/* ============================================================
   31. หน้ารวมคอร์ส · การ์ดสินค้า (2026-08-19)
   ============================================================

   ที่มา: วัดการ์ดจริงด้วย Playwright ที่ 1440 และ 390 แล้วพบว่าน้ำหนักสายตา
   "กลับหัว" กับงานที่หน้านี้ต้องทำ

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

   วัดของเดิมไว้เป็นหลักฐาน (desktop 1440 · การ์ด 329.8 × 537.9)
     รูปปก        329.8 × 329.8 = 61% ของความสูงการ์ด (มือถือ 380 × 380 = 65%)
     รหัสสินค้า    15.6px  อยู่บนสุดของบล็อกข้อความ = ตำแหน่งที่ตาอ่านก่อน
     ชื่อคอร์ส     24px/700  (ไม่มีขั้นนี้ใน type scale: 13/16/19/30/32)
     ราคาขาย      16px/700  ← เล็กกว่าชื่อคอร์ส 8px
     ราคาเดิม     16px/500  ← ขนาดเท่าราคาขายเป๊ะ ต่างแค่น้ำหนัก+สี และมาก่อนราคาขาย
     ปุ่มสั่งซื้อ   78.9 × 44 = 24% ของความกว้างการ์ด (มือถือ 79/380 = 21%)

   ลำดับเป้าหมายในการ์ด · ชุดเดียวกับหน้าสินค้าเดี่ยว (ข้อ 30.4 · value-before-price)
     รูป · ชื่อคอร์ส+รหัส · ข้อมูลคอร์ส · ราคา · ปุ่ม
   ------------------------------------------------------------ */

/* ---------- 31.1 ลำดับในการ์ด ----------
   ธีมพิมพ์ <a> ครอบ [onsale · img · h2 · price] แล้วปุ่มเป็นพี่น้องของ <a> อีกที
   จัดลำดับสองชั้น: ภายใน <a> ชั้นหนึ่ง และภายใน <li> อีกชั้นหนึ่ง */
body.theme-wplms ul.products li.product > a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
}
body.theme-wplms ul.products li.product > a.woocommerce-loop-product__link > img      { order: 1; }
body.theme-wplms ul.products li.product > a.woocommerce-loop-product__link > h2       { order: 2; }
body.theme-wplms ul.products li.product .ck-course-stats-wrap                         { order: 3; }
body.theme-wplms ul.products li.product > a.woocommerce-loop-product__link > .price   { order: 4; }

/* ชั้น <li>: ลิงก์การ์ด → ป้ายอายุคอร์ส (ชั่วคราว ดู 31.4) → ปุ่ม */
body.theme-wplms ul.products li.product > a.woocommerce-loop-product__link { order: 1; }
body.theme-wplms ul.products li.product > a.add_to_cart_button.button      { order: 3; }

/* ---------- 31.2 ชื่อคอร์ส + รหัสสินค้า ----------
   ชื่อคอร์ส 24px เป็นค่าที่ตกทอดจากธีม ไม่มีในสเกล (มือถือถูกดึงเป็น 19px ไปแล้วในข้อ P3)
   ดึงเดสก์ท็อปลงมาเท่ากัน = เข้าสเกล และเปิดที่ให้ราคาเป็นตัวใหญ่สุดในการ์ดตามข้อ 31.3
   ชื่อ 3 ใบเหมือนกัน 95% ("เคมีม.4 เทอม 1 (1M/3M/6M)") การให้มันใหญ่สุดจึงไม่ช่วยเลือก
   ส่วนตัวแยก 1M/3M/6M อยู่บนปกใหญ่มากอยู่แล้ว */
body.theme-wplms ul.products li.product h2.woocommerce-loop-product__title {
  display: flex;
  flex-direction: column;
  font-size: var(--ck-fs-title) !important;   /* 19px */
  line-height: 1.4;
  padding: 0 16px !important;
  margin: 0 0 8px !important;
}
/* รหัสสินค้าอยู่ "เหนือ" ชื่อคอร์สตามที่ธีมพิมพ์มา (คงตำแหน่งเดิมไว้ · ทบทวน 2026-08-19)
   รอบแรกย้ายลงใต้ชื่อด้วย flex order เพราะคิดว่าตำแหน่งบนสุดคือปัญหา
   ทบทวนแล้วพบว่า **ปัญหาจริงคือขนาด ไม่ใช่ตำแหน่ง** · ของเดิมเดสก์ท็อป 15.6px
   (65% ของชื่อ 24px) เกือบเท่าเนื้อความ จึงแย่งความสนใจ
   พอลงมาเป็น 13px จาง ๆ มันอ่านเป็น "ป้ายเหนือหัวข้อ" ตามปกติ ไม่แย่งอะไร
   และการวางไว้บนทำให้ชื่อคอร์ส (ตัวหนา) เป็นสมอของบล็อกข้อความใต้รูปพอดี
   ⚠️ ถ้าอยากได้ลำดับเดียวกับหน้าสินค้าเดี่ยว (รหัสอยู่ล่างสุดใต้ปุ่ม) CSS ทำไม่ได้
      เพราะ <small> อยู่ใน <h2> ซึ่งอยู่ใน <a> คนละชั้นกับปุ่ม → TASKS-DEV กลุ่ม H ข้อ H5 */
body.theme-wplms ul.products li.product h2.woocommerce-loop-product__title small {
  font-size: var(--ck-fs-caption) !important;   /* เดิมเดสก์ท็อป 15.6px = 65% ของ 24px */
  font-weight: 400;
  line-height: 1.6 !important;
  margin: 0 0 2px;
}

/* ---------- 31.3 ราคา = ตัวใหญ่สุดในการ์ด ----------
   ธีมตั้ง .price{font-size:80%!important} → 16px (80% ของ li 20px) = ขนาดเนื้อความ
   ในหน้าที่ราคาคือตัวแปรหลักของการตัดสินใจ นี่คือลำดับชั้นที่กลับหัว
   24px · เลือกค่านี้เพราะเป็นขั้นที่มีอยู่แล้วในสเกล (ขนาด Display บนมือถือ) ไม่ต้องเพิ่มขั้นใหม่
   และยังต่ำกว่าราคาในหน้าสินค้าเดี่ยว (32px) ลำดับชั้นระหว่างสองหน้าจึงยังอยู่ */
body.theme-wplms ul.products li.product .price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--ck-fs-price-sm) !important;
  line-height: 1.15;
  padding: 0 16px;
  margin: 0 0 14px;
  /* ตัวเลขความกว้างคงที่ · 3,490 / 3,690 / 4,490 วางเรียงกัน 3 ใบแล้วหลักตรงกัน */
  font-variant-numeric: tabular-nums;
}
/* ราคาขายมาก่อน ราคาเดิมตามหลัง · Woo พิมพ์ <del> ก่อน <ins>
   (ท่าเดียวกับหน้าสินค้าเดี่ยวข้อ P1 ตอนนี้สองหน้าอ่านราคาเรียงเหมือนกันแล้ว) */
body.theme-wplms ul.products li.product .price ins {
  order: 1;
  text-decoration: none;
  background: transparent;
}
body.theme-wplms ul.products li.product .price del { order: 2; }
body.theme-wplms ul.products li.product .price ins,
body.theme-wplms ul.products li.product .price ins .amount,
body.theme-wplms ul.products li.product .price ins bdi {
  font-size: var(--ck-fs-price-sm);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ck-price) !important;
}
/* ราคาเดิม: ink-60 ไม่ใช่ ink-40 · ink-40 (.38) ให้ contrast 2.30 บนพื้นขาว ตกเกณฑ์ 4.5
   ราคาที่ถูกขีดฆ่าก็ยังต้องอ่านออก ไม่งั้นส่วนลดก็ไม่มีความหมาย
   (หน้าสินค้าเดี่ยวใช้ ink-60 อยู่แล้ว · ข้อนี้ทำให้สองหน้าตรงกัน) */
body.theme-wplms ul.products li.product .price del,
body.theme-wplms ul.products li.product .price del .amount,
body.theme-wplms ul.products li.product .price del bdi {
  font-size: var(--ck-fs-body);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ck-ink-60) !important;
}

/* ---------- 31.4 ข้อมูลคอร์สในการ์ด ----------
   ลูกค้าตัดสินใจ 2026-08-19: การ์ดต้องบอก **ชั่วโมงคอร์ส** ด้วย
   เพราะคนซื้อต้องรู้ว่าได้เนื้อหากี่ชั่วโมงตั้งแต่หน้ารวม ไม่ต้องกดเข้าไปดูทีละใบ
   ส่วน "ชั่วโมงที่เรียนได้" ไม่เอาลงการ์ด (เก็บไว้ที่หน้าสินค้าเดี่ยวตามเดิม)

   ⚠️ ต้องมี markup จาก dev · ตัวเลขชั่วโมงไม่มีอยู่ในหน้ารวมคอร์สเลยแม้แต่ตัวเดียว
      CSS แต่งเติมข้อมูลที่ไม่มีในหน้าไม่ได้ (TASKS-DEV กลุ่ม H ข้อ H4)
      ดูหน้าตาเป้าหมายได้ที่ mock/demo/02-archive.html

   ใช้คลาสชุดเดียวกับแถวสถิติหน้าสินค้าเดี่ยว (ข้อ 30) เพื่อให้ dev เขียน partial เดียวใช้สองที่
   แต่หน้าตาต่างกันโดยตั้งใจ
     หน้าสินค้าเดี่ยว = 3 ช่อง มีไอคอน 36px  (กล่องกว้าง 286–451px)
     การ์ดในหน้ารวม   = 2 บรรทัด ไม่มีไอคอน (การ์ดกว้าง 330px · ใส่ไอคอนแล้วป้ายตกบรรทัดทุกช่อง) */
body.theme-wplms ul.products li.product .ck-course-stats-wrap {
  margin: 0 16px 10px;
}

/* ธีมแปะ clearfix ::before/::after (content:" " · display:table) ไว้กับ <ul> ที่อยู่ในการ์ด
   พอ <ul> เป็น flex มันไม่ใช่ clearfix อีกต่อไป แต่กลายเป็นช่องจริงสองช่องที่กิน gap ไปด้วย */
body.theme-wplms ul.products li.product .ck-course-stats::before,
body.theme-wplms ul.products li.product .ck-course-stats::after {
  content: none;
}

/* แถวเดียว ไอคอน + ตัวเลข · ไม่มีกล่องครีม ไม่มีป้ายข้อความ
   ของเดิมที่ลองไว้เป็นกล่องครีม 2 บรรทัด (ป้ายซ้าย/ตัวเลขขวา) วัดได้ 76px
   = ดันปุ่มสั่งซื้อลงไป 76px ในการ์ดที่สูง 537px อยู่แล้ว แพงเกินไปสำหรับข้อมูล 2 ค่า
   แบบนี้ 26px · ประหยัดไป 50px ต่อใบ (มือถือ 3 ใบ = 150px ที่ไม่ต้องเลื่อน) */
body.theme-wplms ul.products li.product .ck-course-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  list-style: none;
}
body.theme-wplms ul.products li.product .ck-course-stats li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.6;
}

/* ---------- ไอคอนในการ์ด ----------
   ใช้ SVG เส้นสำเร็จรูป (ทรงเดียวกับชุดไอคอน UI มาตรฐาน) ฝังเป็น data URI ในไฟล์ CSS
   **ไม่ใช้** อาร์ตเวิร์กลายมือชุดหน้าสินค้าเดี่ยว (--ck-ic-* ข้อ 30.1) ด้วยเหตุผล 3 ข้อ
   (1) ชุดนั้นเป็นภาพประกอบขนาด 36px มีรายละเอียดเยอะ ย่อเหลือ 16px แล้วเส้นตัน อ่านไม่ออก
   (2) ที่นี่ไอคอนทำหน้าที่แทน "ป้ายกำกับ" ไม่ใช่ภาพประกอบ ต้องอ่านออกทันทีในขนาดเล็ก
   (3) เป็น data URI = ไม่ต้องอัปโหลดไฟล์เพิ่ม ไม่มีอะไรให้แอดมินทำ ไม่มี request เพิ่ม
   สีเข้ารหัสไว้ในตัว SVG (#222 opacity .68 = ค่าเดียวกับ --ck-ink-60) เพราะ background-image
   ใช้ currentColor ไม่ได้ ถ้าจะเปลี่ยนสีต้องแก้ในสตริงนี้ */
:root {
  --ck-ic-hours-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-opacity='.68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ck-ic-validity-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-opacity='.68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 11h17'/%3E%3C/svg%3E");
}
body.theme-wplms ul.products li.product .ck-course-stats li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--ck-ic-hours-16) center / contain no-repeat;
}
body.theme-wplms ul.products li.product .ck-course-stats li.ck-stat-validity::before {
  background-image: var(--ck-ic-validity-16);
}

/* ป้ายข้อความถูกแทนด้วยไอคอนแล้ว แต่ยังต้องอยู่ในหน้าให้โปรแกรมอ่านหน้าจอ
   ไอคอนเป็น background ซึ่งไม่มีเสียง ถ้าลบป้ายทิ้งจะเหลือแค่ "45 ชั่วโมง" ลอย ๆ ไม่รู้ว่าคืออะไร
   ซ่อนแบบ clip ไม่ใช่ display:none · display:none โปรแกรมอ่านหน้าจอจะข้ามไปด้วย */
body.theme-wplms ul.products li.product .ck-course-stats .ck-stat-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* น้ำหนัก 400 ไม่ใช่ 700 (แก้ 2026-08-19 หลังลูกค้าทักว่าชื่อคอร์สควรเด่นกว่าชั่วโมงเรียน)

   ชื่อคอร์ส 19px vs ตัวเลขนี้ 16px · ใหญ่กว่าอยู่แล้ว แต่ตอนหนา 700 ทั้งคู่มันอ่านเป็นชั้นเดียวกัน
   เพราะ **ฟอนต์ที่ใช้จริงมีแค่ 2 น้ำหนัก** ไม่มีขั้นกลางให้เลือก
   วัดปริมาณหมึกของข้อความเดียวกันที่ 3x บนหน้าจริง:
     400 = 1.000 · 500 = 1.000 · 600 = 1.538 · 700 = 1.538 · 800 = 1.538
   คือ 400/500 หน้าตาเดียวกัน และ 600 ขึ้นไปหน้าตาเดียวกันหมด
   (mn_minimon ประกาศไว้ face เดียว ส่วน sukhumvit ที่ตกมาใช้จริงก็ให้ผลเดียวกัน)
   >> ในระบบนี้ "น้ำหนัก" เป็นสวิตช์เปิด/ปิด ไม่ใช่สเกล ห้ามออกแบบโดยพึ่ง 600 เป็นขั้นกลาง
      ต้องแยกชั้นด้วยขนาดหรือสีเท่านั้น

   เลือกให้ตัวหนาในบล็อกนี้เหลือสองตัวคือ ราคา (24) กับ ชื่อคอร์ส (19)
   แถวสถิติเป็นข้อมูลประกอบ ใช้ 400 · ไอคอนเป็นตัวบอกอยู่แล้วว่านี่คือสเปก */
body.theme-wplms ul.products li.product .ck-course-stats .ck-stat-value {
  font-size: var(--ck-fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ck-ink);
  white-space: nowrap;
}

/* ป้ายอายุคอร์ส · **ของชั่วคราว** ระหว่างรอ markup ข้างบน
   เกาะ li::before ไม่ใช่ .price::after เพราะ .price เป็น flex container แล้ว (ข้อ 31.3)
   คำเปลี่ยนจาก "เรียนได้ N เดือน" → "อายุคอร์ส N เดือน" ให้ตรงกับป้าย "อายุคอร์สเรียน"
   ของหน้าสินค้าเดี่ยว · ของเดิมคำว่า "เรียนได้" ถูกใช้สองความหมาย
   (อายุคอร์ส กับ ชั่วโมงที่เรียนได้) คนอ่านแยกไม่ออกว่าคนละเรื่องกัน
   ⚠️ ยังผูกกับ post id อยู่ = เพิ่มสินค้าใหม่แล้วป้ายไม่ขึ้นเอง จึงเป็นของชั่วคราวจริง ๆ */
body.theme-wplms ul.products li.product::before {
  order: 2;
  align-self: center;
  margin: 0 0 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--ck-sky);
  color: var(--ck-sky-ink);
  font-size: var(--ck-fs-caption);
  font-weight: 700;
  line-height: 1.6;
}
body.theme-wplms ul.products li.product.post-232617::before { content: 'อายุคอร์ส 1 เดือน'; }
body.theme-wplms ul.products li.product.post-232616::before { content: 'อายุคอร์ส 3 เดือน'; }
body.theme-wplms ul.products li.product.post-232615::before { content: 'อายุคอร์ส 6 เดือน'; }
/* พอ markup จริงขึ้น ป้ายชั่วคราวต้องหายไปเอง ไม่งั้นหน้าจะบอกอายุคอร์สซ้ำสองที่ติดกัน
   (ปัญหาเดียวกับที่หน้าสินค้าเดี่ยวเจอตอนเพิ่มแถวสถิติ · ดูข้อ 30) */
body.theme-wplms ul.products li.product:has(.ck-course-stats)::before {
  content: none;
}

/* ---------- 31.5 ปุ่มสั่งซื้อเต็มความกว้าง ----------
   เดิม 78.9 × 44 = 24% ของความกว้างการ์ด (มือถือ 79/380 = 21%) เพราะ min-width:max-content
   ทำให้ปุ่มกว้างเท่าคำว่า "สั่งซื้อ" พอดีเป๊ะ
   ทำไมต้องเต็มความกว้าง
   (1) 3 ใบเรียงกัน ปุ่มกว้างเท่ากันสร้างเส้นแนวนอนเส้นเดียว ตาไล่ ราคา → ปุ่ม เป็นแถวได้
       ของเดิมปุ่มลอยกลางและกว้างไม่เท่ากันถ้าคำเปลี่ยน
   (2) การ์ดทั้งใบเป็นลิงก์อยู่แล้ว (<a> ครอบรูป+ชื่อ+ราคา) ปุ่มจึงต้องอ่านออกทันที
       ว่าเป็นการกระทำคนละอย่างกับการกดดูรายละเอียด
   (3) มือถือได้เป้ากด 348 × 44 แทน 79 × 44
   max-width กันบวมตอน tablet 2 คอลัมน์ ซึ่งการ์ดกว้างขึ้นเป็น ~470px */
body.theme-wplms ul.products li.product > a.add_to_cart_button.button {
  align-self: center;
  width: calc(100% - 32px);
  /* 360 = พอดีให้มือถือได้เต็ม (การ์ด 380 - 32 = 348) แต่ยังกันบวมตอนการ์ดกว้างเกิน 392px */
  max-width: 360px;
  margin-top: auto;
  margin-bottom: 4px;
}


/* ============================================================
   29. ปุ่มอัปโหลด/ลบไฟล์ของ Forminator หลุดระบบปุ่ม (2026-08-19)
   ============================================================
   ลูกค้าถามว่า "ปุ่มนี้หลุดธีมมั้ย" · วัดแล้วหลุดจริง และหลุดเพราะเหตุผลเชิงโครงสร้าง

   ระบบปุ่มที่ข้อ 3 เกาะ `.button` / `button[type=submit]` / `input[type=submit]`
   แต่ Forminator เขียนปุ่มพวกนี้เป็น `<button class="forminator-button …">` เฉยๆ
   **ไม่มีคลาส .button และไม่มี type="submit"** จึงไม่เคยเข้าระบบปุ่มเลยตั้งแต่ต้น

   | ค่า        | ปุ่มส่งฟอร์ม (ในระบบ) | ปุ่มอัปโหลด/ลบ (หลุดระบบ) |
   |------------|----------------------|---------------------------|
   | พื้น       | #FFD966 เหลืองแบรนด์  | **#EFC439** เหลืองของธีม ไม่มีในชุดสี |
   | เส้นขอบ    | ไม่มี                 | **2px outset #000** ← ขอบนูน 3 มิติของเบราว์เซอร์ |
   | มุม        | 999px (แคปซูล)        | อัปโหลด 999px · **ลบ 0px (เหลี่ยม)** |
   | เงา        | sticker shadow        | ไม่มี |

   ที่เห็นเป็น "กรอบดำหนา" ในภาพคือ `border-style: outset` ซึ่งเป็นค่าเริ่มต้นของเบราว์เซอร์
   ไม่ใช่สิ่งที่ใครตั้งใจใส่ */

/* ---------- 29.1 ปุ่มอัปโหลด = ปุ่มรอง ----------
   หน้านี้มี action หลักอยู่แล้วคือปุ่ม "ลงทะเบียน" ท้ายฟอร์ม
   ถ้าปุ่มอัปโหลดเป็นเหลืองทึบด้วย จะมีสองปุ่มแย่งความเด่นกันในหน้าเดียว
   ตามระบบข้อ 3: ปุ่มรอง = ขาว + เส้นขอบ + ตัวหนังสือหมึก */
body.theme-wplms .forminator-ui.forminator-custom-form button.forminator-button-upload {
  background: #fff !important;
  color: var(--ck-ink) !important;
  border: 2px solid var(--ck-ink-10) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  min-height: 44px !important;
  padding: 10px var(--ck-sp-3) !important;
  /* ⚠️ ห้ามตั้ง font-size ที่ตัวปุ่ม · ข้อ 23.6 ใช้ font-size:0 ซ่อนคำว่า "Choose File"
     แล้วพิมพ์คำไทยด้วย ::after ถ้าตั้งขนาดที่นี่จะไปเปิดคำเดิมให้โผล่คู่กับคำใหม่
     (เจอจริงตอนแก้รอบนี้ ปุ่มขึ้นว่า "Choose Fileเลือกรูปภาพ") ขนาดตัวอักษรอยู่ที่ ::after แล้ว */
  font-weight: 700 !important;
}
body.theme-wplms .forminator-ui.forminator-custom-form button.forminator-button-upload:hover {
  background: var(--ck-cream) !important;
}

/* ---------- 29.2 ปุ่มลบไฟล์ = ปุ่มเงียบ ----------
   เป็น action ทำลาย (เอาไฟล์ที่แนบแล้วออก) จึงไม่ควรมีน้ำหนักสายตาเท่าปุ่มอัปโหลด
   ของเดิมเป็นเหลืองทึบขอบดำเหลี่ยม = ดูเด่นกว่าปุ่มที่ควรกดจริงเสียอีก
   ทำเป็นปุ่มไอคอนกลม พื้นใส ตัวไอคอนสีหมึกจาง · พื้นที่กด 44px เท่าเดิม */
body.theme-wplms .forminator-ui.forminator-custom-form button.forminator-button-delete {
  background: transparent !important;
  color: var(--ck-ink-60) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}
/* สีแดงตอน hover เพราะเป็นตอนที่ผู้ใช้กำลังจะลบจริง · สงวนแดงไว้ให้จังหวะนี้เท่านั้น */
body.theme-wplms .forminator-ui.forminator-custom-form button.forminator-button-delete:hover {
  background: rgba(184, 59, 62, .10) !important;
  color: var(--ck-red) !important;
}


/* ============================================================
   30. State ของช่องกรอก · focus / hover / error / disabled (2026-08-19)
   ============================================================
   ลูกค้าขอให้ระบุว่า "พอกด field แล้ว style เป็นยังไง" พอไปวัดจริงพบว่า
   **ทั้งฝั่ง before และ after ตอนนี้ focus/hover/error หน้าตาเหมือน default เป๊ะ**

   | state    | ก่อนแก้ข้อนี้ (ทั้ง before และ after) |
   |----------|--------------------------------------|
   | default  | เส้นขอบ 2px rgba(34,34,34,.12)        |
   | focus    | **เหมือน default ทุกประการ**          |
   | hover    | **เหมือน default ทุกประการ**          |
   | error    | **เหมือน default ทุกประการ**          |

   ต้นเหตุมีสองชั้นซ้อนกัน

   1) กฎ `.theme-wplms input:focus` (ข้อ 6) ตั้ง `outline: none` ทิ้งวงแหวนของเบราว์เซอร์
      แล้วชดเชยด้วย `border-color: var(--ck-orange)` แทน
   2) กฎข้อ 28.1 ที่ผมเพิ่งเขียน ตั้ง `border-color` ด้วย selector ที่ **specificity สูงกว่า**
      (`.forminator-field-group input.forminator-input` ยาวกว่า `.theme-wplms input`)
      จึงทับสีขอบตอน focus ไปด้วย · เหลือ "ไม่มี outline และไม่มีขอบเปลี่ยนสี" = ไม่มีอะไรเลย

   นี่คือ **WCAG 2.4.7 Focus Visible ไม่ผ่าน** และเป็นบั๊กที่งานรอบก่อนของผมทำขึ้นเอง

   อีกเรื่องที่ต้องรู้: **Forminator ไม่ได้ใช้ pseudo-class ในการทำ state**
   แต่ใช้ JS เติมคลาสที่กล่องหุ้มช่อง (ตรวจจาก CSS จริงของปลั๊กอิน v1.52.2)
     .forminator-is_active  = ตอน focus
     .forminator-is_hover   = ตอน hover
     .forminator-has_error  = ตอน validate ไม่ผ่าน
   บน mock คลาสพวกนี้ไม่ถูกเติมเพราะ JS ของปลั๊กอินไม่ทำงานนอกโดเมน
   แต่**บนเว็บจริงถูกเติมแน่นอน** จึงต้องเขียนคุมทั้งสองทางคู่กันเสมอ
   ไม่งั้นขึ้นจริงแล้วสไตล์จะเพี้ยนจาก mock */

/* ---------- 30.1 focus ---------- */
/* ใช้วงแหวนชุดเดียวกับปุ่ม (ข้อ 3) เพื่อให้ทั้งเว็บมีสัญญาณ focus หน้าตาเดียว */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group input.forminator-input:focus,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group textarea.forminator-textarea:focus,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group select:focus,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-is_active input.forminator-input,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-is_active textarea.forminator-textarea {
  border-color: var(--ck-orange) !important;
  background-color: #fff !important;      /* ช่องที่กำลังพิมพ์ = ขาวสว่างกว่าช่องอื่น */
  /* วงแหวนแนบขอบ (offset 0) และโปร่งมาก · อ่านเป็น "แสงเรือง" รอบขอบส้ม ไม่ใช่เส้นที่สอง
     เดิมใช้ทึบ .45 + เว้นระยะ 2px กลายเป็นเส้นส้มสองเส้นซ้อนกัน (ลูกค้าทักว่า border 2 ชั้น) */
  outline: 4px solid rgba(245, 166, 35, .22) !important;
  outline-offset: 0;
}
/* Select2 ไม่มี input ให้ focus · วงแหวนต้องไปอยู่ที่กล่องที่ผู้ใช้เห็น */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-container--focus .select2-selection,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-container--open .select2-selection {
  border-color: var(--ck-orange) !important;
  background-color: #fff !important;
  outline: 4px solid rgba(245, 166, 35, .22) !important;
  outline-offset: 0;
}

/* ---------- 30.2 hover ---------- */
/* เบากว่า focus หนึ่งขั้น: ขอบเข้มขึ้นเฉยๆ ไม่มีวงแหวน ไม่งั้นจะแย่งความเด่นกับ focus */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group input.forminator-input:hover:not(:focus),
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group textarea.forminator-textarea:hover:not(:focus),
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group select:hover:not(:focus),
/* ต้องกัน .forminator-is_active ด้วย · ปลั๊กอินเติม is_hover ค้างไว้ตอนเมาส์ยังอยู่บนช่องที่ focus
   ถ้าไม่กัน กฎ hover (ซึ่งอยู่ทีหลัง) จะชนะกฎ focus แล้วขอบไม่เปลี่ยนเป็นส้ม (เจอจากการวัดบนเว็บจริง) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-is_hover:not(.forminator-is_active) input.forminator-input,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection:hover {
  border-color: rgba(34, 34, 34, .28) !important;
}

/* ---------- 30.3 error ---------- */
/* แดงแบรนด์ #B83B3E · สงวนไว้ให้ error จริงตามหลักข้อ 3.5 (คำอธิบายทั่วไปใช้เทา) */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-has_error input.forminator-input,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-has_error textarea.forminator-textarea,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-has_error select,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-has_error .select2-selection {
  border-color: var(--ck-error) !important;
  background-color: rgba(184, 59, 62, .05) !important;
}
/* error ที่กำลัง focus อยู่ ต้องยังเห็นว่าเป็น error · คงขอบแดงไว้ วงแหวนเปลี่ยนเป็นแดงตาม */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-has_error input.forminator-input:focus,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-has_error textarea.forminator-textarea:focus,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-has_error select:focus {
  border-color: var(--ck-error) !important;
  outline-color: rgba(184, 59, 62, .22) !important;
}
/* ข้อความ error ใต้ช่อง
   ของเดิม Forminator ทำเป็นแถบพื้นชมพู #F9E4E8 เต็มความกว้าง (วัดแล้ว)
   ซึ่งซ้ำซ้อนกับขอบแดง+พื้นแดงจางของช่องที่อยู่ติดกันข้างบน กลายเป็นแดงสองก้อนซ้อนกัน
   เอาพื้นออก เหลือเป็นข้อความแดงตัวหนา · สัญญาณเดียวพอ */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .forminator-error-message {
  display: block;
  background: transparent !important;
  padding: 0 !important;
  margin-top: 6px;
  font-size: var(--ck-fs-caption) !important;
  font-weight: 700;
  color: var(--ck-error) !important;
  line-height: 1.5;
}

/* ---------- 30.4 disabled ---------- */
/* Select2 ที่เห็นเป็น <span> ไม่มี :disabled ให้เกาะ · ปลั๊กอินเติมคลาสที่ container แทน */
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group .select2-container--disabled .select2-selection {
  background-color: var(--ck-ink-10) !important;
  border-color: transparent !important;
  color: var(--ck-ink-40) !important;
  cursor: not-allowed;
}
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group input.forminator-input:disabled,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group textarea.forminator-textarea:disabled,
body.theme-wplms .forminator-ui.forminator-custom-form .forminator-field-group select:disabled {
  background-color: var(--ck-ink-10) !important;
  border-color: transparent !important;
  color: var(--ck-ink-40) !important;
  cursor: not-allowed;
}

/* ---------- 30.5 ช่องที่กรอกแล้ว ----------
   ตั้งใจให้ "เหมือน default" · ช่องที่กรอกเสร็จแล้วไม่ควรเรียกร้องความสนใจอีก
   ตัวข้อความที่พิมพ์เข้าไปเป็นสัญญาณเพียงพอแล้วว่ากรอกแล้ว
   (เขียนไว้เพื่อบอกว่าเป็นการตัดสินใจ ไม่ใช่การลืม) */

/* ---------- 29.23 หัวข้อ "Editing '…' Profile Group" (หน้า 12b) ----------
   ลูกค้าสั่งเอาออก 2026-08-19 · เป็นข้อความที่ซ้ำซ้อนสามชั้นในหน้าเดียว:
   แท็บ "แก้ไข" ที่ไฮไลต์อยู่บอกแล้วว่ากำลังแก้ไข · แท็บ "ข้อมูลส่วนตัว" ที่เลือกอยู่
   บอกแล้วว่าแก้กลุ่มไหน · เหลือแต่คำว่า Profile Group ที่เป็นศัพท์ของ BuddyPress ไม่ใช่ของผู้เรียน
   (เดิมอยู่ในรายการ "ภาษาอังกฤษที่ต้องแปล" ข้อ C · พอเอาออกทั้งบรรทัดก็ไม่ต้องแปลแล้ว)
   ⚠️ เจาะจงเฉพาะ h4 ที่เป็นลูกตรงของฟอร์มแก้ไข · ห้ามใช้ #buddypress h4 กว้าง ๆ
      เพราะหัวข้อกลุ่มในหน้าดูข้อมูล (12) และหน้าอื่นของ BuddyPress ใช้ h4 เหมือนกัน */
body.profile-edit #buddypress form#profile-edit-form > h4 {
  display: none !important;
}

/* ---------- 29.24 สลับตำแหน่งสองปุ่มใต้วิดีโอ (หน้า 14) ----------
   ลูกค้าสั่ง 2026-08-19: ให้ "วีดีโอถัดไป" อยู่ซ้าย "ทำเครื่องหมายว่าเรียนวีดีโอนี้แล้ว" อยู่ขวา
   ทำด้วย order ของ flex เพราะสลับ markup ไม่ได้ (เป็นไฟล์ของธีม)

   ⚠️ order เปลี่ยนแค่ "ลำดับที่ตาเห็น" ลำดับ tab ของคีย์บอร์ดยังเป็นลำดับใน DOM อยู่
      คือกด Tab จะไปโดนปุ่มทำเครื่องหมายก่อนแล้วค่อยถึงปุ่มถัดไป · สลับกับที่ตาเห็น
      ถ้าจะให้ตรงกันจริงต้องสลับ markup ที่ template ของธีม (บันทึกไว้ที่ TASKS-DEV กลุ่ม J) */
body.page-template-start .unit_prevnext > div:has(#next_unit) {
  order: -1;
}


/* ---------- 32. แท็บ "หลักสูตร" ของหน้าคอร์สเรียน (หน้า 13b) ----------
   หน้านี้ไม่ได้อยู่ในชุด 18 หน้าเดิม เพราะแท็บนี้พาออกไปอีก URL (…/course/<slug>/curriculum)
   เดิมจึงได้แค่ฟอนต์กับสีพื้นจากกฎกลาง ตัวบล็อกหลักสูตรเป็นของธีมล้วน ๆ

   วัดจากเว็บจริง (สถานะล็อกอิน): ตารางลอยอยู่บนพื้นเหลืองโดยไม่มีการ์ด ต่างจากบล็อกอื่นทั้งเว็บ ·
   ชื่อบท 14px (สเกลเนื้อความของระบบคือ 16) · เวลา 11px สีเดียวกับชื่อบทจนไม่มีลำดับชั้น ·
   แถวหัวข้อกดเพื่อกาง/พับได้ แต่ไม่มีสัญญาณอะไรเลย (ไม่มีพื้น ไม่มีเส้น cursor เป็น auto) ·
   แถวบทไม่มีเส้นคั่น 8 แถวติดกันเป็นพรืด

   บันทึกไว้ 2 ข้อ
   1) อีกสองแท็บในแถวเดียวกัน (นักเรียนในคอร์สนี้ / กิจกรรมล่าสุด) ธีมตั้ง display:none ไว้อยู่แล้ว
      ตรวจจากเว็บจริงแล้ว ไม่ได้แสดงกับผู้เรียน จึงไม่มีอะไรต้องทำ
   2) เครื่องหมาย +/− ของแถวหัวข้อคือ td::after ฟอนต์ fontawesome ส่วนไอคอนหน้าชื่อบท
      เป็นฟอนต์ fonticon ทั้งคู่เป็นของธีม · CSS ชุดนี้จึงไม่แตะ content/font-family
      แตะแค่ตำแหน่งกับสี (ย้าย ::after เข้ามาให้เท่ากับ padding ใหม่ ไม่งั้นไปติดขอบการ์ด) */

/* หัวข้อ "หลักสูตรคอร์สนี้" · เดิม span 22px ซึ่งไม่มีในสเกล (13/16/19/30)
   และมีเส้นใต้หนา 3px ที่ทั้งเว็บไม่มีที่ไหนใช้ */
body.single-course #item-body > h3.heading {
  border-bottom: 0 !important;
  padding: 0 !important;
  margin-bottom: var(--ck-sp-2) !important;
}
body.single-course #item-body > h3.heading,
body.single-course #item-body > h3.heading span {
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
}

/* บล็อกหลักสูตร = การ์ดขาวชุดเดียวกับรายการบทเรียนในหน้า 14 */
body.single-course .course_curriculum {
  background: #fff !important;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-card) !important;
  overflow: hidden;
}
body.single-course .course_curriculum table.table {
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* แถวหัวข้อบท = แถบกดได้ (ธีมผูก event ไว้อยู่แล้ว แค่ไม่เคยบอกคนใช้เลยว่ากดได้)
   พับอยู่ = ครีม · กางอยู่ = เหลือง · คอร์สจริงมีถึง 15 หัวข้อ (speed-12m)
   ถ้าให้เหลืองหมดทุกแถบจะกลายเป็นบล็อกเหลืองพืดเดียว แยกไม่ออกว่ากางอันไหนอยู่
   ธีมเติมคลาส .show ให้แถบที่กางอยู่ (ตรวจจากเว็บจริง) จึงเกาะคลาสนั้นได้ */
body.single-course .course_curriculum tr.course_section > td {
  background: var(--ck-cream) !important;
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  padding: var(--ck-sp-2) var(--ck-sp-3) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ck-ink-10) !important;
  cursor: pointer;
}
body.single-course .course_curriculum tr.course_section:hover > td {
  background: #FBF0DA !important;
}
body.single-course .course_curriculum tr.course_section.show > td {
  background: var(--ck-yellow) !important;
  border-bottom-color: transparent !important;
}
/* ::after คือ +/− ของธีม ตั้ง right:0 ไว้ ถ้าไม่ย้ายจะไปแปะติดขอบการ์ดพอดี */
body.single-course .course_curriculum tr.course_section > td::after {
  right: var(--ck-sp-3) !important;
  color: var(--ck-ink) !important;
}

/* แถวบท: ชื่อบทขึ้นมาที่สเกลเนื้อความ + มีเส้นคั่นบาง ๆ ให้กวาดตาทีละบรรทัดได้ */
body.single-course .course_curriculum tr.course_lesson > td {
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink) !important;
  border-top: 1px solid var(--ck-ink-10) !important;
  border-bottom: 0 !important;
  padding: 12px var(--ck-sp-1) !important;
  vertical-align: middle !important;
  line-height: 1.45;
}
/* แถวแรกชนกับแถบเหลืองอยู่แล้ว ไม่ต้องมีเส้นซ้อน */
body.single-course .course_curriculum tr.course_section + tr.course_lesson > td {
  border-top: 0 !important;
}
body.single-course .course_curriculum tr.course_lesson:hover > td {
  background: #FFF9E8 !important;
}
/* ไอคอนหน้าชื่อบท: ใส่วงกลมครีมให้เป็นจุดเริ่มบรรทัดที่ตาจับได้ (ไม่แตะตัวฟอนต์ไอคอน) */
body.single-course .course_curriculum td.curriculum-icon {
  width: 64px !important;
  text-align: center !important;
  padding-left: var(--ck-sp-2) !important;
  padding-right: 0 !important;
}
body.single-course .course_curriculum td.curriculum-icon i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ck-cream);
  color: var(--ck-ink) !important;
  font-size: 15px !important;
}
/* คอลัมน์เวลา + คอลัมน์ว่างที่ธีมเว้นไว้ → ซ่อน
   ตรวจจากเว็บจริง 5 คอร์ส (sum-12m, p68-3m, speed-12m, u68-6m, abc68-3m รวม 260 บท)
   ทุกบทขึ้น 00:00:00 เหมือนกันหมด เพราะไม่เคยกรอกความยาววิดีโอในระบบ
   บนมือถือคอลัมน์นี้กินไป ~110px จาก 300px จนชื่อบทตกสี่บรรทัด
   ⚠️ ถ้าวันหนึ่งกรอกความยาววิดีโอจริง ให้ลบกฎก้อนนี้ทิ้งก้อนเดียว เวลาก็กลับมา */
body.single-course .course_curriculum tr.course_lesson > td:nth-child(3),
body.single-course .course_curriculum tr.course_lesson > td:last-child {
  display: none !important;
}

/* มือถือ: เหลือสองคอลัมน์แล้ว (ไอคอน + ชื่อบท) บีบช่องไฟข้างให้ชื่อบทได้ที่มากที่สุด
   ไม่ทำเป็นการ์ดแถวเดียวแบบข้อ 19.3 เพราะแถวบทถูกกาง/พับด้วย inline style ของธีม
   ถ้าไปทับ display จะพังกลไก accordion ทั้งชุด */
@media (max-width: 767px) {
  body.single-course .course_curriculum tr.course_section > td {
    font-size: var(--ck-fs-body) !important;
    padding: 12px var(--ck-sp-2) !important;
  }
  body.single-course .course_curriculum tr.course_section > td::after {
    right: var(--ck-sp-2) !important;
  }
  body.single-course .course_curriculum td.curriculum-icon {
    width: 44px !important;
    padding-left: var(--ck-sp-1) !important;
  }
  body.single-course .course_curriculum td.curriculum-icon i {
    width: 28px;
    height: 28px;
    font-size: 14px !important;
  }
  body.single-course .course_curriculum tr.course_lesson > td {
    padding-right: var(--ck-sp-2) !important;
  }
}


/* ============================================================
   33. ตะกร้าจิ๋วบนขวา (mini cart ของธีม · .woocart)
   ============================================================
   กล่องนี้เป็นของธีม WPLMS คนละตัวกับตะกร้าสไลด์ของปลั๊กอิน (ข้อ 7)
   เปิดด้วยการเอาเมาส์ชี้ที่ไอคอนตะกร้าบน navbar · มีเฉพาะจอ ≥ 992px
   (ต่ำกว่านั้นธีมซ่อนไอคอนทิ้ง ดูข้อ 15.9 · บนมือถือใช้ตะกร้าสไลด์แทน)

   ที่วัดได้จากของเดิม (1440px · หน้า 3b):
   - พื้นเหลือง #FED557 ทึบ ขณะที่ dropdown เมนูข้าง ๆ เป็นการ์ดขาวไปแล้ว (ข้อ 2)
     = กล่องสองใบที่ทำงานเหมือนกัน แต่หน้าตาคนละระบบ
   - รัศมี 0 0 4px 4px + เส้นขอบ 1px + ไม่มีเงา · ไม่ใช่ทรงการ์ดของงานนี้
   - ยอดรวมเป็น #FF3452 (contrast 3.58 ไม่ผ่าน) และเป็น "แดง = แพง" ซึ่งเลิกใช้แล้ว (ดู :root --ck-price)
   - ปุ่มสองตัวเหลื่อมกันเป็นขั้นบันได เพราะธีมตั้ง .buttons .button + .button
     { float:right; margin-left:5px } ไว้สำหรับกล่องที่กว้างพอวางสองปุ่มในแถวเดียว
     แต่กล่องกว้าง 240px ปุ่มไทยสองปุ่มไม่มีทางอยู่แถวเดียวกันได้
   - ปุ่มลบเป็นกากบาทแดง 11px ไม่มีพื้นที่กด
   - ชื่อคอร์สกับ "1 × 3,490฿" ไหลต่อกันเป็นย่อหน้าเดียว อ่านแล้วแยกไม่ออกว่าอันไหนคือจำนวน

   หน้าตาเป้าหมาย: การ์ดขาวชุดเดียวกับ dropdown เมนู · แถวสินค้าเป็นบล็อกครีมมีรูป 44px
   · ยอดรวมแยกบรรทัดด้วยเส้นบาง · ปุ่มเรียงลงมาเต็มความกว้าง (รอง → หลัก) เหมือนตะกร้าสไลด์
   ดูหน้าตาได้ที่หน้า 3c (ว่าง) และ 3d (มีคอร์ส) ในหน้าเทียบก่อน/หลัง */

/* ป้ายจำนวนบนไอคอนตะกร้า: สี่เหลี่ยมเหลือง #EFC439 13.7×18px ตัวอักษร 10px
   → วงกลมแดงชุดเดียวกับป้ายของปุ่มตะกร้าลอย (ข้อ 15.6) จะได้เป็นภาษาเดียวกันทั้งเว็บ */
.theme-wplms .topmenu .vbpcart {
  position: relative;
}
/* ⚠️ ธีมตั้ง span.fa (ตัวถือ glyph ตะกร้า) เป็น position:relative ไว้ กล่องนี้กว้างแค่ 16×14px
   ป้าย <em> จึงยึดขอบของ "ตัวไอคอน" ไม่ใช่ของปุ่ม = ป้ายไปนั่งทับ glyph จนไอคอนหาย
   ปลดให้เป็น static ป้ายจะยึดขอบปุ่ม 44px แล้วไปอยู่มุมขวาบนตามที่ตั้งไว้ */
.theme-wplms .topmenu .vbpcart span.fa {
  position: static !important;
}
.theme-wplms .topmenu .vbpcart em {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  left: auto !important;
  bottom: auto !important;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0 !important;
  border-radius: 999px !important;
  background: var(--ck-red) !important;
  color: #fff !important;
  font-style: normal;
  font-weight: 700;
  font-size: var(--ck-fs-caption) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* ---------- กล่อง ---------- */
/* ธีมยิงสีพื้นจาก <style> ที่ customizer แทรกไว้ใน body (มาทีหลัง override.css)
   จึงต้องเจาะ specificity ให้สูงกว่า .sleek .woocart ไม่ใช่พึ่ง !important อย่างเดียว */
body.theme-wplms header.sleek .topmenu li .woocart,
body.theme-wplms .topmenu li .woocart {
  background: #fff !important;
  width: 320px !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: var(--ck-sh-soft) !important;
  padding: var(--ck-sp-1) !important;
  overflow: hidden;
}
body.theme-wplms .topmenu li .woocart .widget_shopping_cart,
body.theme-wplms .topmenu li .woocart .widget_shopping_cart_content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- ตะกร้าว่าง ---------- */
/* ข้อความเดียวลอยกลางกล่องสูง 40px อ่านเหมือนกล่องพัง · ใส่ไอคอนถุงจาง ๆ
   ให้รู้ว่านี่คือ "ตะกร้า" ที่ยังไม่มีของ ไม่ใช่เมนูที่โหลดไม่ขึ้น
   (SVG ฝังเป็น data URI แบบเดียวกับไอคอนในข้อ 29.9 ไม่ต้องพึ่งไฟล์) */
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__empty-message {
  margin: 0 !important;
  padding: var(--ck-sp-3) var(--ck-sp-2) var(--ck-sp-2) !important;
  text-align: center;
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink-60) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23222222' stroke-width='1.6' opacity='.28' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4.5 8h15l-1.3 11a2 2 0 0 1-2 1.8H7.8a2 2 0 0 1-2-1.8Z'/%3E%3Cpath d='M8.6 8V6.2a3.4 3.4 0 0 1 6.8 0V8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center var(--ck-sp-2) / 40px 40px;
  padding-top: 76px !important;
}

/* ---------- แถวสินค้า ---------- */
body.theme-wplms .topmenu li .woocart ul.woocommerce-mini-cart {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* ⚠️ ลำดับใน HTML ของ WooCommerce คือ [ปุ่มลบ] [ลิงก์ รูป+ชื่อ] [จำนวน×ราคา]
   ปุ่มลบมาก่อนชื่อ ถ้าปล่อยให้ไหลตามลำดับ กากบาทจะอยู่หน้าชื่อคอร์ส
   จึงวางด้วย grid โดยระบุช่องให้ทุกตัว แทนที่จะพึ่ง float ของธีม */
body.theme-wplms .topmenu li .woocart li.mini_cart_item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: var(--ck-sp-1);
  margin: 0 0 var(--ck-sp-1) !important;
  padding: var(--ck-sp-1) !important;
  border: 0 !important;
  border-radius: 14px;
  background: var(--ck-cream);
  font-size: var(--ck-fs-body) !important;
}
body.theme-wplms .topmenu li .woocart li.mini_cart_item > a:not(.remove) {
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
  align-items: center;
  gap: var(--ck-sp-1);
  min-height: 44px;
  font-size: var(--ck-fs-body) !important;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ck-ink) !important;
}
body.theme-wplms .topmenu li .woocart li.mini_cart_item > a:not(.remove) img {
  float: none !important;
  flex: none;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 10px;
}
/* "1 × 3,490฿" ขึ้นบรรทัดของตัวเอง เยื้องให้ตรงกับชื่อคอร์ส (44px รูป + 8px ช่องไฟ) */
body.theme-wplms .topmenu li .woocart li.mini_cart_item .quantity {
  grid-column: 1;
  grid-row: 2;
  display: block !important;
  padding-left: calc(44px + var(--ck-sp-1));
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
}
body.theme-wplms .topmenu li .woocart li.mini_cart_item .quantity .amount,
body.theme-wplms .topmenu li .woocart li.mini_cart_item .quantity bdi,
body.theme-wplms .topmenu li .woocart li.mini_cart_item .quantity .woocommerce-Price-currencySymbol {
  color: var(--ck-price) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* ปุ่มลบ: กากบาทแดง 11px ไม่มีพื้นที่กด → เม็ดกลม 28px กินสองแถวของ grid */
body.theme-wplms .topmenu li .woocart li.mini_cart_item a.remove {
  grid-column: 2;
  grid-row: 1 / span 2;
  float: none !important;
  width: 28px;
  height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--ck-ink-60) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
body.theme-wplms .topmenu li .woocart li.mini_cart_item a.remove:hover {
  background: var(--ck-red);
  color: #fff !important;
}

/* ---------- ยอดรวม ---------- */
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__total {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ck-sp-2);
  margin: 0 !important;
  padding: var(--ck-sp-2) var(--ck-sp-1) !important;
  border-top: 1px solid var(--ck-ink-10);
  /* ⚠️ ธีมตั้ง border-bottom:1px solid rgba(0,0,0,.1) ไว้ที่ p.total ด้วย (วัดที่ 1440px)
     ตอนตั้ง border-top ใหม่ผมเผลอไม่ได้ล้างของเดิม เลยได้เส้นสองเส้นคร่อมยอดรวม
     เส้นบนคือเส้นที่ตั้งใจ (คั่นรายการสินค้ากับยอดรวม) ส่วนเส้นล่างไม่ได้คั่นอะไร · 
     ใต้มันคือปุ่ม ซึ่งแยกตัวเองด้วยรูปทรงและช่องไฟอยู่แล้ว (ลูกค้าทัก 2026-08-25 ข้อ 2) */
  border-bottom: 0 !important;
  font-size: var(--ck-fs-body) !important;
}
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__total strong {
  font-weight: 600;
  color: var(--ck-ink-60) !important;
}
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__total .amount,
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__total bdi,
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__total .woocommerce-Price-currencySymbol {
  float: none !important;
  color: var(--ck-price) !important;
  font-size: 20px !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- ปุ่ม ---------- */
/* ธีม: .sleek .woocart .buttons .button{padding:7px} + .button+.button{float:right;margin-left:5px}
   → เรียงลงมาเต็มความกว้าง ลำดับ "รอง → หลัก" ชุดเดียวกับท้ายตะกร้าสไลด์ (ข้อ 7) */
body.theme-wplms header.sleek .topmenu li .woocart p.buttons,
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__buttons {
  display: flex !important;
  flex-direction: column;
  gap: var(--ck-sp-1);
  margin: 0 !important;
  /* ธีมทาแถบ rgba(0,0,0,.1) ไว้หลังปุ่ม · เป็นแถบเทาลอยอยู่ในการ์ดขาว ไม่ได้คั่นอะไร */
  background: transparent !important;
  padding: 0 var(--ck-sp-1) var(--ck-sp-1) !important;
}
body.theme-wplms header.sleek .topmenu li .woocart p.buttons .button,
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__buttons .button {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px var(--ck-sp-2) !important;
  min-height: 44px;
  background: #fff !important;
  color: var(--ck-ink) !important;
  border: 2px solid var(--ck-ink-10) !important;
  box-shadow: none !important;
}
body.theme-wplms header.sleek .topmenu li .woocart p.buttons .button.checkout,
body.theme-wplms .topmenu li .woocart p.woocommerce-mini-cart__buttons .button.checkout {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  box-shadow: var(--ck-sh-sticker) !important;
}
body.theme-wplms header.sleek .topmenu li .woocart p.buttons .button:hover {
  background: var(--ck-cream) !important;
}
body.theme-wplms header.sleek .topmenu li .woocart p.buttons .button.checkout:hover {
  background: #FFCF47 !important;
}

/* ---------- 33.1 ยอดรวมท้ายตะกร้าสไลด์ ----------
   ป้าย "ราคา" กับตัวเลขวางกึ่งกลางติดกันเป็นก้อนเดียว อ่านไม่ออกว่าอันไหนเป็นยอด
   จับให้เป็นบรรทัดสรุปแบบเดียวกับตะกร้าจิ๋วด้านบน (ป้ายซ้าย ตัวเลขขวา) */
.xoo-wsc-modal .xoo-wsc-ft-totals .xoo-wsc-ft-amt {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ck-sp-2);
}
.xoo-wsc-modal .xoo-wsc-ft-amt-label {
  color: var(--ck-ink-60) !important;
  font-weight: 600 !important;
}
.xoo-wsc-modal .xoo-wsc-ft-amt-value,
.xoo-wsc-modal .xoo-wsc-ft-amt-value .amount,
.xoo-wsc-modal .xoo-wsc-ft-amt-value .amount bdi {
  font-size: 20px !important;
}


/* ============================================================
   34. ระยะห่างในกล่องเข้าสู่ระบบ (popup LINE)
   ============================================================
   วัดที่ 1440px: .inside ของธีมเป็น padding 0 30px 5px
   ระยะบนมาจาก padding-top 30px ของ <h3>LOGIN</h3> ส่วนระยะล่างมีแค่
   5px ของกล่องปุ่ม LINE + 5px ของ .inside = 10px
   → บน 30 · ข้าง 30 · ล่าง 10 ปุ่ม LINE จึงดูหล่นออกนอกการ์ด

   ตั้งใหม่ให้เท่ากันสี่ด้านที่ 24px ตามสเกล 8pt (--ck-sp-3)
   แล้วย้ายระยะบนจาก padding ของ <h3> มาไว้ที่กล่องแทน จะได้คุมที่เดียว */
body.theme-wplms #vibe_bp_login .popup_login .inside {
  padding: var(--ck-sp-3) !important;
}
body.theme-wplms #vibe_bp_login .popup_login .inside > h3 {
  padding-top: 0 !important;
  margin: 0 0 var(--ck-sp-2) !important;
}
body.theme-wplms #vibe_bp_login .popup_login .inside > p.well {
  margin: 0 0 var(--ck-sp-3) !important;
}
/* กล่องครอบปุ่ม LINE ที่ธีมพิมพ์ inline style="padding:5px" มา
   ระยะรอบปุ่มเป็นหน้าที่ของ .inside แล้ว ชั้นนี้ไม่ต้องเว้นซ้ำ */
body.theme-wplms #vibe_bp_login .popup_login .inside > div[style] {
  padding: 0 !important;
}
/* ปุ่มปิด (×) อยู่มุมขวาบนแบบ absolute · ขยับตามระยะใหม่ให้ห่างขอบเท่ากับเนื้อหา */
body.theme-wplms #vibe_bp_login .popup_login #close_full_popup {
  top: var(--ck-sp-3) !important;
  right: var(--ck-sp-3) !important;
}

/* ---------- 34.1 ตำแหน่งกล่องบนมือถือ (ลูกค้าทัก 2026-08-25 ข้อ 4) ----------
   วัดที่ 390px: .popup_login เป็น fixed · top 0 · left 0 · right 0 · สูงตามเนื้อหา 227px
   = กล่องแปะขอบบนจอเต็มความกว้าง อ่านเป็น "แถบแจ้งเตือนหล่นลงมา" มากกว่า dialog
   และมุมโค้ง --ck-r ที่ตั้งไว้ก็มองไม่เห็น เพราะขอบกล่องทับขอบจอพอดี

   ตั้งใหม่: ยึดกึ่งกลางแนวตั้ง + เว้นข้าง 16px ให้เห็นว่าเป็นการ์ดลอยอยู่บน overlay
   ⚠️ ห้ามแตะ display ของ .popup_login · ธีมเปิด/ปิด popup ด้วย display ตัวนี้
      ถ้าตั้ง flex ทับ กล่องจะโผล่ค้างทุกหน้า จึงใช้ top 50% + translateY แทน
   max-height + overflow-y กันกรณีจอเตี้ย (มือถือแนวนอน) แล้วเนื้อหาสูงกว่าจอ */
@media (max-width: 767px) {
  body.theme-wplms #vibe_bp_login .popup_login {
    top: 50% !important;
    bottom: auto !important;
    left: var(--ck-sp-2) !important;
    right: var(--ck-sp-2) !important;
    /* ธีมตั้ง width:100% ไว้ ถ้าไม่ปลดเป็น auto กล่องจะกว้างเท่าจอแล้วล้นออกทางขวา 16px */
    width: auto !important;
    transform: translateY(-50%);
    max-height: calc(100% - var(--ck-sp-3) * 2);
    overflow-y: auto;
  }
}


/* ============================================================
   35. สถานะอายุคอร์สในการ์ด "คอร์สเรียนของฉัน" (หน้า 11)
   ลูกค้าสั่ง 2026-08-25
   ============================================================
   โจทย์: การ์ดทั้ง 6 ใบหน้าตาเหมือนกันหมด ต้องอ่านบรรทัด "เรียนได้ถึง …"
   ทีละใบถึงจะรู้ว่าใบไหนกำลังจะหมดอายุ · ทั้งที่นี่คือสิ่งเดียวในหน้านี้ที่มีกำหนดเวลา

   ระบบสี: ไล่จากเขียว → ส้ม → แดง → แดงเข้ม → เทา ตามเวลาที่เหลือ
   ┌──────────────────┬────────────────┬─────────────────┬──────────┬────────────┐
   │ คลาส             │ เกณฑ์          │ คำบนชิพ         │ สีหลัก   │ พื้นการ์ด  │
   ├──────────────────┼────────────────┼─────────────────┼──────────┼────────────┤
   │ ck-course-new    │ เพิ่งเปิด ≤7 วัน│ ใหม่            │ #17796E  │ #E8F4F1    │
   │ (ไม่ใส่คลาส)      │ เหลือ >30 วัน  │ · │ หมึก     │ ขาว        │
   │ ck-course-soon   │ เหลือ 8–30 วัน │ ใกล้หมดอายุ     │ #A85B00  │ #FCF0DE    │
   │ ck-course-urgent │ เหลือ 1–7 วัน  │ เหลือไม่ถึง 7 วัน│ #B83B3E  │ #FAEAEA    │
   │ ck-course-expired│ เลยวันหมดอายุ  │ หมดอายุแล้ว     │ #6B6B6B  │ #F1F0EE    │
   └──────────────────┴────────────────┴─────────────────┴──────────┴────────────┘
   สีแดงเข้ม #8E2A2D เป็นปลายทางของการไล่สี ใช้เป็นเส้นขอบและ hover ของระดับ urgent
   (ระดับที่เร่งที่สุดจึงเข้มที่สุดจริง โดยไม่ต้องเพิ่มสถานะที่ห้าให้จำเพิ่ม)

   ทำไม "กำลังเรียนตามปกติ" ถึงไม่มีสี · ถ้าทุกใบมีสี สีจะกลายเป็นลวดลาย ไม่ใช่สัญญาณ
   การ์ดปกติจึงเงียบไว้ ให้ใบที่มีเรื่องต้องรีบเป็นใบเดียวที่สะดุดตา

   ค่า contrast ที่วัดแล้ว (ตัวอักษรขาวบนสีหลัก / สีหลักบนพื้นครีมของหน้า):
   เขียว 5.25 / 4.85 · ส้ม 5.05 / 4.66 · แดง 5.63 / 5.19 · แดงเข้ม 8.34 / 7.69 · เทา 5.33 / 4.43*
   (*เทาบนครีมใช้เป็นเส้นขอบเท่านั้น ไม่ได้ใช้เป็นตัวอักษรบนครีม)

   ⚠️ CSS อ่าน "เหลืออีกกี่วัน" เองไม่ได้ · ทั้งวันที่และจำนวนวันเป็น text node ก้อนเดียว
      ที่เซิร์ฟเวอร์พิมพ์มา (ดูข้อ 27 และ TASKS-DEV กลุ่ม F)
      สี่คลาสข้างบนจึงเป็น **สัญญา markup ที่ฝั่ง dev ต้องเติมให้** (TASKS-DEV กลุ่ม L)
      ยกเว้นสถานะ "หมดอายุแล้ว" ที่ CSS จับเองได้ตั้งแต่วันนี้ · ดูกฎท้ายข้อนี้ */

:root {
  --ck-st-new:     #17796E;  --ck-st-new-bg:     #E8F4F1;
  --ck-st-soon:    #A85B00;  --ck-st-soon-bg:    #FCF0DE;
  --ck-st-urgent:  #B83B3E;  --ck-st-urgent-bg:  #FAEAEA;
  --ck-st-deep:    #8E2A2D;  /* ปลายทางของการไล่สี · ขอบ/hover ของระดับ urgent */
  --ck-st-expired: #6B6B6B;  --ck-st-expired-bg: #F1F0EE;
}

/* ---------- 35.1 พื้นการ์ด + เส้นขอบสถานะ ----------
   ข้อ 20.3 ตั้ง background:#fff ไว้ด้วย !important จึงต้องเขียนทับ

   ⚠️ แก้ 2026-08-25 รอบสอง (ลูกค้าทัก ข้อ 5): เดิมวาดเส้นขอบด้วย inset box-shadow
   เพราะกลัว border จะดันขนาดการ์ด · วัดแล้วกลัวเกินไป การ์ดเป็น box-sizing:border-box
   อยู่แล้ว (วัดที่ 1440px) ขนาดนอกจึงไม่ขยับ
   ที่แย่กว่าคือ inset box-shadow ถูกวาดไว้ "หลังลูก" ของกล่อง พอรูปปกกว้างเต็มการ์ด
   มันเลยทับกรอบหายไปสามด้านบน เหลือกรอบเฉพาะช่วงตัวหนังสือ = ปกดูหลุดออกมาจากกรอบ
   เปลี่ยนเป็น border จริง ซึ่งอยู่นอก content box ลูกทับไม่ได้ + overflow:hidden ของข้อ 20.3
   ตัดมุมรูปปกให้โค้งตามกรอบเอง = กรอบคลุมทั้งใบตามที่ลูกค้าขอ */
body.buddypress #buddypress ul#course-list li.course_single_item.ck-course-new {
  background: var(--ck-st-new-bg) !important;
  border-color: var(--ck-st-new) !important;
}
body.buddypress #buddypress ul#course-list li.course_single_item.ck-course-soon {
  background: var(--ck-st-soon-bg) !important;
  border-color: var(--ck-st-soon) !important;
}
body.buddypress #buddypress ul#course-list li.course_single_item.ck-course-urgent {
  background: var(--ck-st-urgent-bg) !important;
  border-color: var(--ck-st-deep) !important;
}
body.buddypress #buddypress ul#course-list li.course_single_item.ck-course-expired {
  background: var(--ck-st-expired-bg) !important;
  border-color: rgba(34, 34, 34, .14) !important;
}

/* ---------- 35.2 ชิพสถานะบนมุมภาพปก ----------
   วางบนภาพปกเพราะเป็นจุดแรกที่ตากวาดเจอในการ์ด และเป็นที่ว่างอยู่แล้วทุกใบ
   ชิพเป็นสีทึบ + ตัวอักษรขาว (ไม่ใช่ตัวอักษรสีบนพื้นจาง) เพราะต้องอ่านออก
   ทับอาร์ตเวิร์กปกที่มีทั้งฟ้า เหลือง และแดง */
body.buddypress #buddypress ul#course-list li.course_single_item .item-avatar[data-id] {
  position: relative;
}
body.buddypress #buddypress ul#course-list li.course_single_item[class*="ck-course-"] .item-avatar[data-id]::after,
body.buddypress #buddypress ul#course-list li.course_single_item:has(.item-credits > a.button span) .item-avatar[data-id]::after {
  position: absolute;
  top: var(--ck-sp-1);
  left: var(--ck-sp-1);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: var(--ck-fs-caption);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  box-shadow: var(--ck-sh-sticker);
}
body.buddypress #buddypress ul#course-list li.ck-course-new .item-avatar[data-id]::after {
  content: "ใหม่";
  background: var(--ck-st-new);
}
body.buddypress #buddypress ul#course-list li.ck-course-soon .item-avatar[data-id]::after {
  content: "ใกล้หมดอายุ";
  background: var(--ck-st-soon);
}
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item-avatar[data-id]::after {
  content: "เหลือไม่ถึง 7 วัน";
  background: var(--ck-st-urgent);
}
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-avatar[data-id]::after {
  content: "หมดอายุแล้ว";
  background: var(--ck-st-expired);
}

/* ---------- 35.3 ปุ่ม ----------
   การ์ดปกติยังเป็นปุ่มรอง (ขาว-ขอบจาง) ตามข้อ 3 เหมือนเดิม
   ใบที่มีสถานะเท่านั้นที่ปุ่มเป็นสีทึบ · ปุ่มจึงกลายเป็นตัวบอกสถานะซ้ำอีกชั้น
   โดยไม่ต้องพึ่งสีอย่างเดียว (คำบนชิพบอกอยู่แล้วสำหรับคนตาบอดสี) */
body.buddypress #buddypress ul#course-list li.ck-course-new .item-credits .button,
body.buddypress #buddypress ul#course-list li.ck-course-new .item-credits input.button,
body.buddypress #buddypress ul#course-list li.ck-course-soon .item-credits .button,
body.buddypress #buddypress ul#course-list li.ck-course-soon .item-credits input.button,
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item-credits .button,
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item-credits input.button,
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-credits .button,
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-credits input.button {
  color: #fff !important;
  border: 0 !important;
  box-shadow: var(--ck-sh-sticker) !important;
}
body.buddypress #buddypress ul#course-list li.ck-course-new .item-credits .button,
body.buddypress #buddypress ul#course-list li.ck-course-new .item-credits input.button {
  background: var(--ck-st-new) !important;
}
body.buddypress #buddypress ul#course-list li.ck-course-soon .item-credits .button,
body.buddypress #buddypress ul#course-list li.ck-course-soon .item-credits input.button {
  background: var(--ck-st-soon) !important;
}
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item-credits .button,
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item-credits input.button {
  background: var(--ck-st-urgent) !important;
}
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item-credits .button:hover,
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item-credits input.button:hover {
  background: var(--ck-st-deep) !important;
}
/* หมดอายุแล้ว = ยังกดได้ (ปุ่มของธีมคือ "ต่ออายุคอร์ส") แต่ไม่ใช่สิ่งที่หน้านี้เชียร์
   จึงเป็นปุ่มเทาทึบ · เด่นกว่าปุ่มรอง แต่ไม่แย่งสายตาไปจากคอร์สที่ยังเรียนได้ */
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-credits .button,
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-credits input.button {
  background: var(--ck-st-expired) !important;
}
/* ⚠️ ข้อ 20.0 ข ตั้ง span ในปุ่มเป็น color:inherit ไว้แล้ว (ปุ่มสองบรรทัด
   "คอร์สหมดอายุ / ต่ออายุคอร์ส") ตัวอักษรจึงตามสีขาวของปุ่มมาเองทั้งสองบรรทัด */

/* ---------- 35.4 บรรทัด "เรียนได้ถึง" รับสีตามสถานะ ----------
   ตัวเลขวันที่คือต้นเหตุของสถานะ ควรเป็นสีเดียวกับชิพ ไม่ใช่สีหมึกเฉย ๆ
   (ข้อ 29.12 ข ตั้งบรรทัดนี้เป็น font-size:0 + ::before ไว้ ตัวเลขอยู่ใน strong/span) */
body.buddypress #buddypress ul#course-list li.ck-course-soon .item > .text-center:has(strong) strong,
body.buddypress #buddypress ul#course-list li.ck-course-soon .item > .text-center:has(strong) span {
  color: var(--ck-st-soon) !important;
}
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item > .text-center:has(strong) strong,
body.buddypress #buddypress ul#course-list li.ck-course-urgent .item > .text-center:has(strong) span {
  color: var(--ck-st-urgent) !important;
}
body.buddypress #buddypress ul#course-list li.ck-course-new .item > .text-center:has(strong) strong,
body.buddypress #buddypress ul#course-list li.ck-course-new .item > .text-center:has(strong) span {
  color: var(--ck-st-new) !important;
}

/* ---------- 35.5 คอร์สที่หมดอายุแล้ว: ลดน้ำหนักทั้งใบ ----------
   ปกคอร์สเป็นอาร์ตเวิร์กสีจัด ถ้าปล่อยไว้สีเต็ม การ์ดที่ใช้ไม่ได้แล้วจะเด่นกว่าใบที่ยังเรียนได้ */
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-avatar[data-id] img {
  filter: grayscale(1);
  opacity: .55;
}
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-title a {
  color: var(--ck-ink-60) !important;
}

/* ---------- 35.6 จับสถานะ "หมดอายุแล้ว" ได้เองโดยไม่ต้องรอ dev ----------
   ธีมพิมพ์ปุ่มของคอร์สที่หมดอายุเป็น <a class="button"><span>คอร์สหมดอายุ</span>
   <span>ต่ออายุคอร์ส</span></a> ขณะที่คอร์สปกติเป็น <form><input type="submit"></form>
   (ยืนยันจากเว็บจริงตอนทำข้อ 20.0 ข และข้อ 20.12) · โครงสร้างต่างกันชัดพอให้ CSS แยกได้
   กฎนี้จึงทำให้สถานะ "หมดอายุแล้ว" ใช้งานได้ทันทีแม้ยังไม่มีคลาสจาก dev
   ⚠️ อีกสามสถานะทำแบบนี้ไม่ได้ เพราะปุ่มของมันเหมือนกันทุกใบ */
body.buddypress #buddypress ul#course-list li.course_single_item:has(.item-credits > a.button span) {
  background: var(--ck-st-expired-bg) !important;
  border-color: rgba(34, 34, 34, .14) !important;
}
body.buddypress #buddypress ul#course-list li.course_single_item:has(.item-credits > a.button span) .item-avatar[data-id]::after {
  content: "หมดอายุแล้ว";
  background: var(--ck-st-expired);
}
body.buddypress #buddypress ul#course-list li.course_single_item:has(.item-credits > a.button span) .item-avatar[data-id] img {
  filter: grayscale(1);
  opacity: .55;
}
body.buddypress #buddypress ul#course-list li.course_single_item:has(.item-credits > a.button span) .item-credits a.button {
  background: var(--ck-st-expired) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: var(--ck-sh-sticker) !important;
}


/* ============================================================
   36. กล่อง "ต่ออายุคอร์สเรียน" (ลูกค้าสั่ง 2026-08-25)
   ============================================================
   เปิดจากปุ่ม "คอร์สหมดอายุ / ต่ออายุคอร์ส" บนการ์ดในหน้า 11
   (โมดัล Bootstrap 3 ครอบฟอร์ม Ninja Forms · คนละปลั๊กอินกับฟอร์มหน้า 7/9 ที่เป็น Forminator
    คลาสจึงคนละชุด กฎข้อ 29.1/29.2 ที่ทำไว้ให้ Forminator ไม่ติดที่นี่)
   markup อยู่ในทุกหน้าที่ล็อกอินแล้ว ธีมซ่อนไว้จนกว่าจะกดปุ่ม

   ที่วัดได้จากของเดิม (1440px):
   - กล่องกว้าง 1000px สำหรับฟอร์มที่มีแค่ 3 ตัวเลือกกับปุ่มเดียว · ตากวาดไกลเกินจำเป็น
   - มุม 6px + เส้นขอบ 1px rgba(0,0,0,.2) + เงาดำ .5 = ทรงโมดัลมาตรฐาน Bootstrap ไม่ใช่การ์ดของงานนี้
   - ชื่อคอร์สเป็น <input disabled> จึงยังดูเป็นช่องกรอก ทั้งที่แก้ไม่ได้ (ลูกค้าทักเอง)
   - ยอดชำระเป็นแดง #E63946 · ราคาไม่ใช้แดงแล้ว (ดู :root --ck-price)
   - ปุ่ม "ต่ออายุคอร์ส" เป็นปุ่มรอง ทั้งที่เป็น action หลักและเป็นปุ่มเดียวของกล่อง
   - ปุ่มแนบไฟล์เป็นสี่เหลี่ยมดำ #333 สูง 32px (ต่ำกว่าเกณฑ์ 44px)
   - ปุ่มปิด (×) กว้าง 6px

   ดูหน้าตาได้ที่หน้า 11c ในหน้าเทียบก่อน/หลัง */

/* ---------- 36.1 ตัวกล่อง ----------
   ธีมตั้ง max-width:1000px ไว้ใน <style> ที่ฝังมากับ markup ของโมดัลเอง
   ซึ่งอยู่ใน body = มาทีหลัง override.css ต้องเจาะ specificity ให้สูงกว่า */
body.theme-wplms #ContinueCourseModal .modal-dialog {
  max-width: 620px !important;
}
body.theme-wplms #ContinueCourseModal .modal-content {
  border: 0 !important;
  border-radius: var(--ck-r) !important;
  box-shadow: var(--ck-sh-soft) !important;
  overflow: hidden;
}
body.theme-wplms #ContinueCourseModal .modal-header {
  padding: var(--ck-sp-3) !important;
  border-bottom: 1px solid var(--ck-ink-10) !important;
}
body.theme-wplms #ContinueCourseModal .modal-title {
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
/* ปุ่มปิด: กากบาทกว้าง 6px ไม่มีพื้นที่กด → เม็ดกลม 34px แบบเดียวกับปุ่มลบในตะกร้าจิ๋ว (ข้อ 33) */
body.theme-wplms #ContinueCourseModal .modal-header .close {
  position: absolute;
  top: var(--ck-sp-2);
  right: var(--ck-sp-2);
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  opacity: 1 !important;
  background: transparent;
  color: var(--ck-ink-60) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}
body.theme-wplms #ContinueCourseModal .modal-header .close:hover {
  background: var(--ck-cream);
  color: var(--ck-ink) !important;
}
body.theme-wplms #ContinueCourseModal .modal-body {
  padding: var(--ck-sp-3) !important;
}
/* ชั้นห่อของ Ninja Forms (cont > wrap > layout) แต่ละชั้นมี margin ของตัวเอง
   รวมกันเป็นที่ว่างลอย ๆ ใต้หัวกล่องโดยไม่ได้คั่นอะไร · ระยะขอบเป็นหน้าที่ของ .modal-body แล้ว */
body.theme-wplms #ContinueCourseModal .nf-form-cont,
body.theme-wplms #ContinueCourseModal .nf-form-wrap,
body.theme-wplms #ContinueCourseModal .nf-form-layout,
body.theme-wplms #ContinueCourseModal .nf-form-content {
  margin: 0 !important;
  padding: 0 !important;
}
/* ป้ายกำกับทุกช่องในกล่องนี้ = caption เหมือนฟอร์มอื่นทั้งเว็บ */
body.theme-wplms #ContinueCourseModal .nf-field-label label,
body.theme-wplms #ContinueCourseModal .nf-field-label .nf-label-span {
  font-size: var(--ck-fs-caption) !important;
  font-weight: 700 !important;
  color: var(--ck-ink-60) !important;
  line-height: 1.6 !important;
  margin: 0 0 var(--ck-sp-1) !important;
  display: block;
}
/* ⚠️ ต้องกัน .hidden-container ออก · Ninja Forms พิมพ์ช่องซ่อน 3 ช่อง (course id / user id / ชื่อ)
   ไว้บนสุดของฟอร์ม ถ้าให้ margin ไปด้วยจะได้ที่ว่างเปล่า 72px คั่นระหว่างหัวกล่องกับเนื้อหา */
body.theme-wplms #ContinueCourseModal .nf-field-container:not(.hidden-container):not(.div_wie_policy) {
  margin-bottom: var(--ck-sp-3) !important;
}
body.theme-wplms #ContinueCourseModal .nf-field-container.hidden-container {
  margin: 0 !important;
}
/* กล่องเนื้อหา "ข้อตกลงและเงื่อนไข" ธีมพับไว้ที่ความสูง 0 + overflow:scroll
   จึงเหลือแถบเลื่อนบาง ๆ กับระยะ 24px ค้างอยู่ระหว่างปุ่มแนบสลิปกับบรรทัดยอมรับข้อตกลง
   (ตัวเนื้อหาเปิดดูจากลิงก์ "ตามข้อตกลงและเงื่อนไข" ไม่ได้กางอยู่ในกล่องนี้) */
body.theme-wplms #ContinueCourseModal .div_wie_policy {
  margin: 0 !important;
  scrollbar-width: none;
}
body.theme-wplms #ContinueCourseModal .div_wie_policy::-webkit-scrollbar {
  display: none;
}

/* ---------- 36.2 ชื่อคอร์ส: เลิกทำหน้าที่เป็นช่องกรอก ----------
   markup เป็น <input type="text" disabled> ซึ่งแก้ไม่ได้อยู่แล้ว แต่ "กรอบ + พื้นขาว"
   ยังบอกสายตาว่าพิมพ์ได้ · ลูกค้าทักเองว่าเข้าใจผิด
   ถอดกรอบทิ้งให้เหลือแค่ข้อความ แล้วยกขนาดเป็นหัวข้อของกล่อง (ชื่อคอร์สคือสิ่งที่ต้องอ่านก่อน)
   ⚠️ ห้ามแตะ disabled · ค่านี้ JS ของธีมเป็นคนเติมชื่อคอร์สลงไปตอนกดปุ่ม */
body.theme-wplms #ContinueCourseModal input#nf-field-93,
body.theme-wplms #ContinueCourseModal input.prop_coursename {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: var(--ck-fs-title) !important;
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
  cursor: default;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--ck-ink);   /* Safari จางสีตัวอักษรของ input ที่ disabled เอง */
  text-overflow: ellipsis;
}
/* กล่องนี้เป็น "สรุปสิ่งที่กำลังจะต่ออายุ" ไม่ใช่ช่องกรอก · คั่นด้วยเส้นให้จบเป็นบล็อกเดียว */
body.theme-wplms #ContinueCourseModal #nf-field-93-container {
  padding-bottom: var(--ck-sp-3) !important;
  border-bottom: 1px solid var(--ck-ink-10);
}

/* ---------- 36.3 ตัวเลือกอายุคอร์ส = การ์ดที่กดเลือกได้ ----------
   เดิมเป็นวงกลม 3 อันเรียงลอย ๆ พื้นที่กดเท่าตัวหนังสือ
   ทำเป็นแถวมีกรอบ สูง 44px+ ทั้งแถว และแถวที่เลือกอยู่เปลี่ยนพื้น = เห็นได้จากมุมตา */
body.theme-wplms #ContinueCourseModal .listradio-wrap ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.theme-wplms #ContinueCourseModal .listradio-wrap li {
  display: flex !important;
  align-items: center;
  gap: var(--ck-sp-1);
  margin: 0 0 var(--ck-sp-1) !important;
  padding: 0 0 0 var(--ck-sp-2) !important;
  border: 2px solid var(--ck-ink-10);
  border-radius: 14px;
  background: #fff;
  transition: background .15s, border-color .15s;
}
body.theme-wplms #ContinueCourseModal .listradio-wrap li:hover {
  background: var(--ck-cream);
}
body.theme-wplms #ContinueCourseModal .listradio-wrap li:has(input:checked) {
  border-color: var(--ck-ink);
  background: #FFF9E8;
}
/* ⚠️ ต้องมี !important ที่ width · ธีมตั้งความกว้างของ input[type=radio] ไว้ด้วย !important
   ถ้าไม่ใส่จะได้วงกลม 13×20px = วงรีแบน (เห็นชัดตอน CSS ของธีมโหลดเสร็จทีหลัง
   หน้าจึงดู "ถูกแว๊บนึงแล้วเบี้ยว" · ของเราทาก่อนเพราะเป็นไฟล์ในเครื่อง ธีมโหลดข้ามโดเมนมาทีหลัง) */
body.theme-wplms #ContinueCourseModal .listradio-wrap li input[type="radio"] {
  flex: none;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 !important;
  accent-color: var(--ck-ink);
  cursor: pointer;
}
/* ป้ายกินพื้นที่ที่เหลือทั้งแถว = กดตรงไหนของบรรทัดก็เลือกได้ (ยกเว้นขอบซ้าย 16px) */
body.theme-wplms #ContinueCourseModal .listradio-wrap li label {
  flex: 1;
  display: flex !important;
  align-items: center;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px var(--ck-sp-2) 10px 0 !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 600 !important;
  color: var(--ck-ink) !important;
  cursor: pointer;
}
/* "(1 คอร์ส ต่ออายุได้ 1 ครั้งเท่านั้น)" เดิมเป็นตัวหนาสีแดง · เป็นข้อมูล ไม่ใช่ error
   แดงทั้งเว็บสงวนไว้ให้ error จริง (ดูหมวด "กฎจากงานจริง" ในระบบออกแบบ) */
body.theme-wplms #ContinueCourseModal .wie-info-onetime {
  display: inline-flex;
  align-items: center;
  margin-top: var(--ck-sp-1);
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--ck-cool) !important;
  color: var(--ck-sky-ink) !important;
  font-size: var(--ck-fs-caption) !important;
  font-weight: 700 !important;
}
body.theme-wplms #ContinueCourseModal .wie-asterisk,
body.theme-wplms #ContinueCourseModal .ninja-forms-req-symbol {
  color: var(--ck-error) !important;
}

/* ---------- 36.4 กล่องสรุปยอด + เลขบัญชี ---------- */
/* ปลั๊กอินใส่ padding 10px รอบกล่องนี้ · บล็อกยอดชำระกับการ์ดบัญชีจึงเยื้องเข้ามา 10px
   ไม่ตรงแนวกับบล็อกอื่นทั้งกล่อง (ป้าย ชื่อคอร์ส ตัวเลือกอายุ ปุ่ม อยู่ที่ 24px เท่ากันหมด) */
body.theme-wplms #ContinueCourseModal .payment-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
body.theme-wplms #ContinueCourseModal .payment-wrapper > div:first-child {
  font-size: var(--ck-fs-body) !important;
  font-weight: 700;
  color: var(--ck-ink) !important;
  margin-bottom: var(--ck-sp-1);
}
body.theme-wplms #ContinueCourseModal #payment-summary {
  color: var(--ck-price) !important;
  font-size: var(--ck-fs-price-sm) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  padding-left: var(--ck-sp-1) !important;
}
/* พื้น #F4F7FA เป็นเทาอมฟ้า อยู่นอกชุดสีของแบรนด์ · ใช้ครีมเดียวกับกล่องอื่นทั้งเว็บ */
body.theme-wplms #ContinueCourseModal .payment-card {
  background: var(--ck-cream) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: var(--ck-sp-2) !important;
  gap: var(--ck-sp-2);
  flex-wrap: wrap;
}
body.theme-wplms #ContinueCourseModal .payment-label {
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
  margin: 0 0 2px !important;
}
body.theme-wplms #ContinueCourseModal .payment-value {
  font-size: var(--ck-fs-body) !important;
  font-weight: 700 !important;
  color: var(--ck-ink) !important;
}
body.theme-wplms #ContinueCourseModal .payment-group .payment-value {
  font-variant-numeric: tabular-nums;
}
/* ไอคอนคัดลอกเลขบัญชี: 16px กดยาก → พื้นที่กด 32px มีพื้นขาวให้รู้ว่าเป็นปุ่ม */
body.theme-wplms #ContinueCourseModal .action-copy-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 8px;
  margin-left: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ck-ink-10);
  cursor: pointer;
}
body.theme-wplms #ContinueCourseModal .action-copy-icon:hover {
  background: var(--ck-yellow);
}

/* ---------- 36.5 ปุ่มแนบสลิป ----------
   Ninja Forms ใช้คลาสของ Bootstrap (.btn.btn-success) แล้วธีมทาทับเป็น #333 สี่เหลี่ยม
   ให้เป็นปุ่มรองชุดเดียวกับ "เลือกไฟล์" ของฟอร์ม Forminator (ข้อ 29.1) */
body.theme-wplms #ContinueCourseModal .nf-fu-fileinput-button,
body.theme-wplms #ContinueCourseModal button.nf-fu-button-cancel {
  min-height: 44px !important;
  padding: 10px var(--ck-sp-3) !important;
  border-radius: 999px !important;
  border: 2px solid var(--ck-ink-10) !important;
  background: #fff !important;
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
body.theme-wplms #ContinueCourseModal .nf-fu-fileinput-button:hover,
body.theme-wplms #ContinueCourseModal button.nf-fu-button-cancel:hover {
  background: var(--ck-cream) !important;
}
/* สองปุ่มอยู่คู่กันในแถวเดียว · ของเดิม Cancel ลอยไปติดขอบขวาห่างจากปุ่มที่มันยกเลิก 760px */
body.theme-wplms #ContinueCourseModal #nf-field-91-wrap > .nf-field-element {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ck-sp-1);
}
/* ปุ่มยกเลิกเป็นทางออก ไม่ใช่ทางเลือกคู่กัน · ให้เงียบกว่าปุ่มเลือกไฟล์ */
body.theme-wplms #ContinueCourseModal button.nf-fu-button-cancel {
  border-color: transparent !important;
  color: var(--ck-ink-60) !important;
  font-weight: 600 !important;
}
/* แถบความคืบหน้าอัปโหลด: เดิมเป็นแถบเทาเต็มความกว้างสูง 20px ค้างอยู่ตลอดเวลา
   ดูเหมือนช่องกรอกที่พัง · ย่อเป็นรางบาง 4px สีครีม */
/* รางโปร่ง ไม่ใช่รางสีครีม · ถ้าทาสีไว้ จะเห็นเป็นขีดพาดอยู่ใต้ปุ่มตลอดเวลาทั้งที่ยังไม่ได้อัปโหลดอะไร
   ปลั๊กอินเป็นคนใส่ความกว้างให้แถบข้างในตอนอัปโหลดจริง แถบเทอร์ควอยซ์จึงโผล่มาเฉพาะตอนที่มีความหมาย */
body.theme-wplms #ContinueCourseModal .nf-fu-progress {
  flex: 1 0 100%;
  height: 4px !important;
  margin: var(--ck-sp-1) 0 0 !important;   /* ของเดิมเว้นล่างไว้อีก 20px ทั้งที่รางมองไม่เห็น */
  border-radius: 999px !important;
  background: transparent !important;
  /* Bootstrap ใส่ inset shadow ให้ .progress ทุกตัว · พอรางโปร่งแล้วเงานี้กลายเป็น
     ขีดจาง ๆ พาดเต็มความกว้างค้างอยู่ใต้ปุ่มแนบไฟล์ตลอดเวลา (เหลือแต่เงา ไม่มีราง) */
  box-shadow: none !important;
  overflow: hidden;
}
body.theme-wplms #ContinueCourseModal .nf-fu-progress-bar {
  background: var(--ck-teal) !important;
  border-radius: 999px !important;
}

/* ---------- 36.6 บรรทัดยอมรับข้อตกลง ---------- */
body.theme-wplms #ContinueCourseModal #nf-field-96-wrap {
  display: flex !important;
  flex-direction: row-reverse;   /* markup วางป้ายไว้ก่อนช่องติ๊ก · สลับให้ติ๊กอยู่ซ้าย */
  align-items: flex-start;
  gap: var(--ck-sp-1);
}
body.theme-wplms #ContinueCourseModal #nf-field-96-wrap .nf-field-label {
  flex: 1;
  margin: 0 !important;
}
body.theme-wplms #ContinueCourseModal #nf-field-96-wrap .nf-field-label label {
  font-size: var(--ck-fs-body) !important;
  font-weight: 400 !important;
  color: var(--ck-ink) !important;
  margin: 0 !important;
  cursor: pointer;
}
body.theme-wplms #ContinueCourseModal input#nf-field-96 {
  flex: none;
  width: 20px !important;
  height: 20px !important;
  margin: 2px 0 0 !important;
  accent-color: var(--ck-ink);
  cursor: pointer;
}
/* ลิงก์เปิดข้อตกลงเป็น inline style="color:red" · แดงสงวนไว้ให้ error
   ทำเป็นลิงก์สีหมึกขีดเส้นใต้ ซึ่งอ่านออกว่าเป็นลิงก์อยู่แล้ว */
body.theme-wplms #ContinueCourseModal a#btn_wie_policy,
body.theme-wplms #ContinueCourseModal a#btn_wie_policy strong {
  color: var(--ck-ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 36.7 ปุ่มหลัก ----------
   ลูกค้าสั่ง: ปุ่มนี้ต้องเป็น primary · เป็น action เดียวของกล่องและเป็นปลายทางของทั้งฟอร์ม */
body.theme-wplms #ContinueCourseModal input#nf-field-92,
body.theme-wplms #ContinueCourseModal .submit-container input[type="submit"] {
  display: block !important;
  width: 100% !important;
  /* ธีมล็อก max-width:300px ไว้กับปุ่มส่งของ Ninja Forms · width:100% อย่างเดียวจึงไม่ขยาย */
  max-width: none !important;
  flex: 1 1 auto;
  margin: var(--ck-sp-1) 0 0 !important;
  min-height: 48px !important;
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 700 !important;
  box-shadow: var(--ck-sh-sticker) !important;
}
body.theme-wplms #ContinueCourseModal input#nf-field-92:hover,
body.theme-wplms #ContinueCourseModal .submit-container input[type="submit"]:hover {
  background: #FFCF47 !important;
}
/* ⚠️ ต้องมี :not() ให้ specificity สูงเท่ากฎระยะห่างด้านบน ไม่งั้นปุ่มส่งจะได้ margin 24px
   ซ้อนกับ padding ของ .modal-body อีก 24 = ช่องว่างใต้ปุ่ม 48px */
body.theme-wplms #ContinueCourseModal .nf-field-container.submit-container:not(.hidden-container) {
  margin-bottom: 0 !important;
}

/* ---------- 36.7.1 ปุ่มตะกร้าลอยตอนกล่องเปิดอยู่ ----------
   ปุ่มลอยเป็น position:fixed จึงลอยทับกล่องจ่ายเงินอยู่มุมขวาล่าง (เห็นชัดบนมือถือ)
   Bootstrap เติมคลาส modal-open ให้ body ตอนเปิดโมดัลอยู่แล้ว ใช้เป็นสวิตช์ได้เลย
   (เหตุผลเดียวกับข้อ 22.4 · หน้าที่กำลังจ่ายเงินไม่ควรมีทางออกไปตะกร้าค้างอยู่บนจอ) */
body.theme-wplms.modal-open .xoo-wsc-basket,
body.theme-wplms.modal-open #scrolltop {
  display: none !important;
}

/* ---------- 36.8 มือถือ ---------- */
@media (max-width: 700px) {
  body.theme-wplms #ContinueCourseModal .modal-header,
  body.theme-wplms #ContinueCourseModal .modal-body {
    padding: var(--ck-sp-2) !important;
  }
  /* กล่องบัญชี 3 ช่องเรียงแถวเดียวไม่พอที่ · เรียงลงมาทีละบรรทัด */
  body.theme-wplms #ContinueCourseModal .payment-card {
    display: block !important;
  }
  body.theme-wplms #ContinueCourseModal .payment-card .payment-group + .payment-group {
    margin-top: var(--ck-sp-2);
  }
}


/* ============================================================
   36. ปุ่ม "ลบออกจากตะกร้า" · กากบาท → ถังขยะ
   ลูกค้าทัก 2026-08-25 ข้อ 1 และ 3
   ============================================================
   ปุ่มลบในตะกร้ามีสามที่ และทั้งสามที่เป็นกากบาทเหมือนกันหมด:
   - ตะกร้าสไลด์ขวา (หน้า 3f)  <span class="xoo-wsc-smr-del xoo-wsc-icon-del1">
                               → ไอคอนฟอนต์ Woo-Side-Cart วาดผ่าน ::before (วัดแล้ว 24px)
   - ตะกร้าจิ๋วบนขวา (หน้า 3d) <a class="remove">&times;</a>  → text node
   - ตารางในหน้าตะกร้า (3b)    <a class="remove">&times;</a>  → text node

   ทำไมต้องเปลี่ยน: ในหน้าจอเดียวกันมีกากบาทอีกตัวอยู่แล้ว คือปุ่มปิดแผงตะกร้า
   (.xoo-wsch-close มุมขวาบน) กากบาทสองตัวในกล่องเดียว ตัวหนึ่ง "ปิดหน้าต่าง"
   อีกตัว "ลบของทิ้งถาวร" · รูปเดียวกันแต่ผลต่างกันคนละเรื่อง และตัวที่ย้อนกลับไม่ได้
   คือตัวที่ดูเบากว่า ถังขยะจึงชัดกว่าและเป็นคำที่คนอ่านออกอยู่แล้วจากแอปอื่น
   ปุ่มปิดยังเป็นกากบาทเหมือนเดิม เพราะเป็นความหมาย "ปิด" จริง ๆ

   วิธีวาด: ใช้ mask + background:currentColor ไม่ใช่ background-image
   เพราะทั้งสามที่มี hover ที่เปลี่ยนสีไอคอน (ขาวบนแดง / แดงบนชมพู)
   ถ้าใช้ background-image ต้องมี SVG สองไฟล์ต่อจุด และสีจะไม่ตามตัวแปรเวลาปรับพาเลตต์
   ลายเส้นชุดเดียวกับไอคอนอื่นในไฟล์นี้: viewBox 24 · stroke-width 2 · ปลายมน */

/* ทรงถัง · ลูกค้าเลือกแบบ C "สอบเล็กน้อย" (2026-08-25 · ดูหน้าเทียบ mock/trash-icons.html)

   แบบแรกที่ทำไปโดนทักว่า "บีบข้าง" ซึ่งวัดแล้วจริง: ฝากว้าง 16 หน่วยแต่ปากถังกว้าง 10.4
   แล้วผนังสอบเข้าเหลือ 8.8 + มุมล่างรัศมี 2 ในพื้นที่แนวตั้งแค่ 1.9 (มุมเกือบเป็นครึ่งวงกลม)
   สามอย่างนี้รวมกันจึงอ่านเป็นถังบีบ

   แบบ C แก้ทั้งสามจุด: ฝา 17 ใกล้เคียงปากถัง 11.4 · ผนังสอบจาก 11.4 เหลือ 9.8 (เดิม 10.4→8.8)
   · มุมล่างรัศมี 2.4 ในพื้นที่แนวตั้ง 2.3 = โค้งจริงไม่ใช่ครึ่งวงกลม
   ยังคงความสอบไว้เล็กน้อยเพราะเป็นทรงถังขยะจริง ไม่ใช่ทรงกระบอก

   ⚠️ ขีดในถังสองเส้นมีผลกับความอ่านง่ายที่ 17px (ตะกร้าจิ๋ว) · ผนังสองข้าง + ขีดสองเส้น
   = เส้นตั้งสี่เส้นในความกว้าง 11 หน่วย ถ้าวันหลังรู้สึกว่ามันตัน ให้ตัดสองพาธท้าย
   (M10.5 11v5.6M13.5 11v5.6) ออก จะได้แบบ D ที่โปร่งกว่าโดยยังเป็นทรงเดียวกัน

   ถ้าอยากเปลี่ยนทรง แก้ค่า d= บรรทัดล่างบรรทัดเดียว เปลี่ยนพร้อมกันทั้งสามจุด
   ทางเลือกอื่นที่ทำเทียบไว้ในหน้า mock/trash-icons.html:
   ข้างตรง+ขีดในถัง  M3.5 6.5h17M9.5 6.5V4.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2M6.5 6.5v12a2.5 2.5 0 0 0 2.5 2.5h6a2.5 2.5 0 0 0 2.5-2.5v-12M10.5 11v6M13.5 11v6
   ข้างตรง เรียบ      M3.5 6.5h17M9.5 6.5V4.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2M6.5 6.5v12a2.5 2.5 0 0 0 2.5 2.5h6a2.5 2.5 0 0 0 2.5-2.5v-12
   ฝาแยกจากถัง       M3.5 6.2h17M9.8 6.2V4.6a1.1 1.1 0 0 1 1.1-1.1h2.2a1.1 1.1 0 0 1 1.1 1.1v1.6M6.6 8.8v10.1a2.4 2.4 0 0 0 2.4 2.4h6a2.4 2.4 0 0 0 2.4-2.4V8.8M10.5 12.2v5.4M13.5 12.2v5.4 */
:root {
  --ck-ic-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h17M9.5 6.5V4.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2M6.6 6.5l.55 12.1a2.4 2.4 0 0 0 2.4 2.3h4.9a2.4 2.4 0 0 0 2.4-2.3l.55-12.1M10.5 11v5.6M13.5 11v5.6'/%3E%3C/svg%3E");
}

/* ---------- 36.1 ตะกร้าสไลด์ขวา ----------
   ปุ่มเดิมเป็น glyph 24px ในกล่อง 24×24 = พื้นที่กดต่ำกว่าเกณฑ์ 44px
   ถือโอกาสขยายเป็นเม็ดกลม 36px (ในแผงแคบ 44 เต็ม ๆ จะเบียดราคา) และเพิ่ม hover ให้เห็นว่ากดได้ */
.xoo-wsc-modal .xoo-wsc-sm-right .xoo-wsc-smr-del {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px;
  color: var(--ck-ink-60) !important;
  background: transparent;
  transition: background .15s, color .15s;
}
/* glyph ของฟอนต์ปลั๊กอินอยู่ใน ::before · ปิดทิ้งแล้ววาดถังขยะที่ ::after แทน */
.xoo-wsc-modal .xoo-wsc-sm-right .xoo-wsc-smr-del::before {
  content: none !important;
}
.xoo-wsc-modal .xoo-wsc-sm-right .xoo-wsc-smr-del::after {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ck-ic-trash) no-repeat center / 20px 20px;
  mask: var(--ck-ic-trash) no-repeat center / 20px 20px;
}
.xoo-wsc-modal .xoo-wsc-sm-right .xoo-wsc-smr-del:hover {
  background: #F8DEDE;
  color: var(--ck-error) !important;
}

/* ---------- 36.2 ตะกร้าจิ๋วบนขวา ----------
   ต่อจากข้อ 33 ที่ทำเม็ดกลม 28px ไว้แล้ว · เปลี่ยนแค่ตัวไอคอนข้างใน
   font-size:0 เพื่อซ่อน text node "×" (ข้อ 33 ตั้งไว้ 18px) ป้ายชื่อสำหรับ screen reader
   อยู่ที่ aria-label ของ <a> อยู่แล้ว จึงไม่ได้ทำให้ใครเข้าไม่ถึง */
body.theme-wplms .topmenu li .woocart li.mini_cart_item a.remove {
  font-size: 0 !important;
}
body.theme-wplms .topmenu li .woocart li.mini_cart_item a.remove::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--ck-ic-trash) no-repeat center / 17px 17px;
  mask: var(--ck-ic-trash) no-repeat center / 17px 17px;
}

/* ---------- 36.3 ตารางในหน้าตะกร้า ----------
   ลูกค้าถามถึงตะกร้าสองตัวข้างบน แต่ปุ่มลบในตารางหน้า 3b เป็นการกระทำเดียวกัน
   ถ้าปล่อยเป็นกากบาทไว้ที่เดียว จะกลายเป็นสองภาษาในเส้นทางเดียว
   (ข้อ 17 ตั้งเม็ดกลม 44px + hover ชมพูไว้แล้ว ตรงนี้เปลี่ยนแค่รูปไอคอน) */
body.theme-wplms table.cart a.remove {
  font-size: 0 !important;
}
body.theme-wplms table.cart a.remove::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ck-ic-trash) no-repeat center / 20px 20px;
  mask: var(--ck-ic-trash) no-repeat center / 20px 20px;
}


/* ============================================================
   37. แท็บเนื้อหาในหน้าบทเรียน (หน้า 14c · ลูกค้าสั่ง 2026-08-25)
   ============================================================
   บางคอร์สแบ่งสารบัญเป็นหลายชุด (เช่น O68-3M สอวน. เคมี ค่าย 1 มี "สอวน." กับ "รวบรัด")
   ธีมวางแท็บสองอันไว้เหนือสารบัญในแถบขวา
   ⚠️ คนละชุดกับแท็บ BuddyPress ที่ทำไว้ในข้อ 29.5/29.11 ค · อันนั้นเป็น #subnav ใน #buddypress
      อันนี้เป็น #curriculum-subnav อยู่นอก #buddypress กฎเดิมจึงไม่เคยแตะเลย
      (คอร์สที่เก็บ HTML มารอบแรกไม่มีแท็บ จึงไม่เคยเห็นของชุดนี้ · เก็บเพิ่มเมื่อ 2026-08-25)

   ที่วัดได้จากของเดิม (1440px):
   - แท็บที่เลือกอยู่: พื้นเทอร์ควอยซ์ #28D7D1 ตัวอักษรขาว = contrast 1.70 อ่านไม่ออก
     (เป็นคู่สีเดียวกับที่แก้ไปแล้วในข้อ 20.16 แต่คนละ element)
   - แท็บที่ไม่ได้เลือก: #F5F5F5 / #666 · เทาสองระดับที่ไม่มีในชุดสีแบรนด์
   - มุม 3px มุมเดียว + พื้นเหลือง #FED557 ของแถบแม่โผล่ออกมาที่ขอบ
   - ตัวอักษร 18px หลุดสเกล (body 16 / title 19)

   ทำเป็นสวิตช์แบบเดียวกับปุ่มสลับ "ก่อน/หลัง" บนแถบเครื่องมือของหน้าเทียบ:
   รางขาวมุมมน ตัวที่เลือกเป็นเม็ดเหลืองตัวอักษรหมึก (contrast 11.64) */

body.theme-wplms .curriculum-tabs-wrapper {
  margin-bottom: 0 !important;
}
body.theme-wplms #curriculum-subnav.item-list-tabs {
  background: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 4px !important;
  margin: 0 0 var(--ck-sp-2) !important;
  box-shadow: inset 0 0 0 1px var(--ck-ink-10);
}
body.theme-wplms #curriculum-subnav.item-list-tabs ul {
  display: flex !important;
  flex-wrap: wrap;              /* เผื่อคอร์สที่มีมากกว่าสองชุด · ตกบรรทัดในรางเดิม ไม่ล้นออกข้าง */
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}
body.theme-wplms #curriculum-subnav.item-list-tabs li {
  flex: 1 1 0;
  min-width: 0;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.theme-wplms #curriculum-subnav.item-list-tabs li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-height: 40px;
  padding: 8px var(--ck-sp-1) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  transition: background .15s, color .15s;
}
body.theme-wplms #curriculum-subnav.item-list-tabs li a:hover {
  background: var(--ck-cream) !important;
  color: var(--ck-ink) !important;
}
body.theme-wplms #curriculum-subnav.item-list-tabs li.current a,
body.theme-wplms #curriculum-subnav.item-list-tabs li.selected a,
body.theme-wplms #curriculum-subnav.item-list-tabs li a.current,
body.theme-wplms #curriculum-subnav.item-list-tabs li a.selected {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  box-shadow: var(--ck-sh-card);
}
/* ธีมตั้ง .item-list-tabs ให้ตัวหนังสือในแท็บเป็นขาวไว้สำหรับพื้นทึบ
   พอเม็ดเป็นเหลืองแล้วต้องเป็นหมึก ไม่งั้นขาวบนเหลือง = 1.37 */
body.theme-wplms #curriculum-subnav.item-list-tabs li a span {
  color: inherit !important;
}


/* ============================================================
   38. ฟีดแบ็กลูกค้ารอบที่ 1 (2026-08-29)
   ============================================================
   6 ข้อจากลูกค้า · ข้อที่เป็น CSS ล้วนอยู่ในหมวดนี้
     38.1  หน้า 3b ตะกร้า: แสดงราคาก่อนลดขีดค่า ทั้งในแถวสินค้าและกล่องยอดรวม
     38.2  หน้า 11 มือถือ (มุมมองการ์ด): เรียงเป็น carousel เลื่อนซ้าย-ขวา
     38.3  หน้า 11 มือถือ (มุมมองรายการ): การ์ดแนวนอน
     38.4  หน้า 14 / 14c: น้องอะตอมวิ่งบนแถบความคืบหน้า ใต้ตัวเลข %
   ข้อที่ 6 (โลโก้ footer) แก้ในหมวด 11 ที่เดิม · เป็นการสลับไฟล์รูป ไม่ใช่กฎใหม่
   ข้อที่ 1 (หน้ารวมคอร์ส 1/2/3 คอลัมน์บนมือถือ) เป็นของเทียบ 3 แบบ อยู่ในไฟล์แยก
   ดู mock/variants/ + mock/mobile-columns.html  (ลูกค้าเลือกแบบไหนแล้วค่อยย้ายเข้าไฟล์นี้)
   ------------------------------------------------------------ */


/* ---------- 38.1 ราคาก่อนลดในหน้าตะกร้า (ลูกค้าสั่ง 2026-08-29 ข้อ 2) ----------
   โจทย์: หน้ารวมคอร์สกับหน้าสินค้าเดี่ยวโชว์ "5,000฿ ขีดฆ่า → 3,490฿" แต่พอเข้าตะกร้า
   ส่วนลดหายไปทั้งใบ เหลือแค่ 3,490฿ เฉย ๆ · จุดที่คนกำลังจะจ่ายเงินคือจุดที่ต้อง
   ย้ำที่สุดว่าประหยัดไปเท่าไร ไม่ใช่จุดที่ควรเงียบที่สุด

   ⚠️ WooCommerce ไม่พิมพ์ราคาเต็มลงตะกร้าเลย ทั้ง td.product-price, td.product-subtotal
      และตาราง .cart_totals มีแต่ตัวเลขหลังลดตัวเดียว · CSS สร้างตัวเลขที่ไม่มีในหน้าไม่ได้
      กฎในข้อนี้จึงเป็น "สไตล์ที่รอ markup" แบบเดียวกับข้อ 31.4 และ 35.1
      ฝั่ง dev ต้อง hook 3 จุด (TASKS-DEV กลุ่ม M):
        woocommerce_cart_item_price     → <del> ราคาเต็ม </del><ins> ราคาที่ขาย </ins>
        woocommerce_cart_item_subtotal  → เหมือนกัน คูณจำนวน
        woocommerce_cart_totals_before_order_total → แถว "ราคาเต็ม" + "ส่วนลด"
      ดูหน้าตาผลลัพธ์ได้ที่ demo/03b-cart-discount.html (build-demo.py ฉีด markup ให้)

   ระบบเดียวกับการ์ดในหน้ารวมคอร์ส (ข้อ 31.3): ราคาที่จ่ายจริงเป็นตัวเน้น
   ราคาเต็มเป็นตัวรอง เล็กกว่า จาง และ "ขีดทับ" ไม่ใช่แค่สีต่าง */

/* ⚠️ ครอบสองหน้า ไม่ใช่หน้าเดียว (ลูกค้าสั่งเพิ่มหน้า 6 ตามมา 2026-08-29)
     หน้า 3b ตะกร้า   → table.cart  (ช่อง .product-price + .product-subtotal)
     หน้า 6 ชำระเงิน  → table.woocommerce-checkout-review-order-table (ช่อง .product-total)
   เป็นคนละตารางกันคนละชุด selector · และหน้า 5 (ชำระเงินแบบยังไม่ล็อกอิน) ใช้ตารางเดียวกับหน้า 6
   จึงได้ตามไปเองเมื่อ dev ต่อ hook แล้ว */

/* ราคาเต็มขีดฆ่า · ในแถวสินค้า (ทั้งช่อง "ราคา" และช่อง "ยอดรวม")
   ธีมสั่ง .amount ทุกตัวในตะกร้าเป็นสีราคา 16px/700 ไว้แล้ว (ข้อ P1–P5)
   ตัวที่อยู่ใน <del> ต้องถอยกลับมาเป็นตัวรอง ไม่งั้นราคาสองตัวหนักเท่ากัน อ่านไม่ออกว่าอันไหนจ่ายจริง */
body.theme-wplms table.cart td.product-price del,
body.theme-wplms table.cart td.product-subtotal del,
body.theme-wplms table.woocommerce-checkout-review-order-table td.product-total del,
body.theme-wplms table.cart td.product-price del .amount,
body.theme-wplms table.cart td.product-subtotal del .amount,
body.theme-wplms table.woocommerce-checkout-review-order-table td.product-total del .amount,
body.theme-wplms table.cart td.product-price del bdi,
body.theme-wplms table.cart td.product-subtotal del bdi,
body.theme-wplms table.woocommerce-checkout-review-order-table td.product-total del bdi {
  color: var(--ck-ink-40) !important;
  font-size: var(--ck-fs-caption) !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  /* ธีมตั้ง .amount เป็น tabular-nums ไว้ · คงไว้ ตัวเลขสองบรรทัดจะได้ตรงหลัก */
}
/* ราคาเต็มอยู่ "เหนือ" ราคาที่จ่ายจริง ไม่ใช่ข้าง ๆ
   ช่องราคาในตะกร้ากว้างแค่ 88px บนเดสก์ท็อป สองตัวเลขบรรทัดเดียวไม่พอแน่
   (ลำดับเดียวกับการ์ดหน้ารวมคอร์ส: ตาอ่านราคาเต็มก่อน แล้วตกลงมาเจอราคาที่ลดแล้ว) */
body.theme-wplms table.cart td.product-price,
body.theme-wplms table.cart td.product-subtotal,
body.theme-wplms table.woocommerce-checkout-review-order-table td.product-total {
  line-height: 1.35;
}
body.theme-wplms table.cart td.product-price del,
body.theme-wplms table.cart td.product-subtotal del,
body.theme-wplms table.woocommerce-checkout-review-order-table td.product-total del {
  display: block;
  margin-bottom: 2px;
}
body.theme-wplms table.cart td.product-price ins,
body.theme-wplms table.cart td.product-subtotal ins,
body.theme-wplms table.woocommerce-checkout-review-order-table td.product-total ins {
  display: block;
  text-decoration: none !important;   /* เบราว์เซอร์ขีดเส้นใต้ <ins> ให้เอง */
  background: transparent !important; /* และบางเบราว์เซอร์ทาพื้นเหลืองให้ด้วย */
}

/* ---------- กล่องยอดรวม ----------
   แถวเดียวที่ dev ต้องเติม: .ck-cart-regular (ราคาเต็มรวม ขีดฆ่า) วางไว้ "ก่อน" แถว cart-subtotal
     ราคาเต็ม   5,000฿  (ขีดฆ่า จาง)
     ยอดรวม     3,490฿
     รวม        3,490฿  (ตัวใหญ่สุด)

   ⚠️ ลูกค้าสั่งเพิ่ม 2026-08-29 (รอบแก้ที่สอง): **ไม่เอาตัวเลขส่วนลด**
      เดิมทำไว้สองอย่างคือ ป้าย "ประหยัด 1,510฿" ในแถวสินค้า กับแถว "ส่วนลด −1,510฿"
      ในกล่องยอดรวม · ถอดออกทั้งคู่ เหลือแค่ราคาเต็มขีดฆ่าตามที่สั่ง
      เหตุผลของลูกค้า: ตัวเลขที่ขีดฆ่าบอกเรื่องนี้อยู่แล้ว ไม่ต้องคิดเลขซ้ำให้คนอ่าน
      คลาส .ck-cart-save กับ .ck-cart-discount จึงไม่มีใครใช้แล้ว · dev ไม่ต้องพ่นออกมา */
body.theme-wplms .cart_totals tr.ck-cart-regular th,
body.theme-wplms .cart_totals tr.ck-cart-regular td,
body.theme-wplms .cart_totals tr.ck-cart-regular .amount,
body.theme-wplms .cart_totals tr.ck-cart-regular bdi,
body.theme-wplms .woocommerce-checkout-review-order-table tr.ck-cart-regular th,
body.theme-wplms .woocommerce-checkout-review-order-table tr.ck-cart-regular td,
body.theme-wplms .woocommerce-checkout-review-order-table tr.ck-cart-regular .amount,
body.theme-wplms .woocommerce-checkout-review-order-table tr.ck-cart-regular bdi {
  color: var(--ck-ink-40) !important;
  font-weight: 500 !important;
}
body.theme-wplms .cart_totals tr.ck-cart-regular td .amount,
body.theme-wplms .cart_totals tr.ck-cart-regular td del,
body.theme-wplms .woocommerce-checkout-review-order-table tr.ck-cart-regular td .amount,
body.theme-wplms .woocommerce-checkout-review-order-table tr.ck-cart-regular td del {
  text-decoration: line-through !important;
}
/* แถวนี้เป็น "ที่มา" ของราคา ไม่ใช่ยอดที่ต้องจ่าย จึงไม่ต้องมีเส้นประคั่นของตัวเอง
   เส้นประเก็บไว้ให้แถวที่เป็นยอดจริง (ยอดรวม / รวม) ทำหน้าที่แบ่งกลุ่มแทน */
body.theme-wplms .cart_totals tr.ck-cart-regular th,
body.theme-wplms .cart_totals tr.ck-cart-regular td,
body.theme-wplms .woocommerce-checkout-review-order-table tr.ck-cart-regular th,
body.theme-wplms .woocommerce-checkout-review-order-table tr.ck-cart-regular td {
  border-bottom: 0 !important;
  padding-bottom: 2px !important;
}
/* ยอดที่ต้องจ่ายจริงคือบรรทัดที่ใหญ่ที่สุดในกล่อง · เดิมเท่ากับ "ยอดรวม" ทุกประการ
   พอมีสี่บรรทัดแล้วยิ่งต้องมีตัวชี้ว่าอ่านบรรทัดไหน (ข้อ 20.24 ตั้งขนาดมือถือไว้แล้ว) */
body.theme-wplms .cart_totals tr.order-total td .amount,
body.theme-wplms .cart_totals tr.order-total td bdi {
  font-size: var(--ck-fs-price-sm) !important;
}


/* ---------- 38.2 มือถือ: มุมมองการ์ดเป็น carousel เลื่อนซ้าย-ขวา ----------
   (ลูกค้าสั่ง 2026-08-29 ข้อ 3 · เฉพาะมือถือ เดสก์ท็อปยังเป็นกริดเหมือนเดิม)

   วัดของเดิมที่ 390px: การ์ด 6 ใบ ใบละ 570px เรียงลงล่าง = หน้ายาว 3,426px
   ต้องเลื่อนผ่านการ์ด 4 ใบกว่าจะถึงแถบเลขหน้า และเห็นได้ทีละใบครึ่งเท่านั้น
   carousel แนวนอน: เห็นครบทั้งชุดในความสูงเดียว หน้าเหลือ ~600px

   ⚠️ ขอบเขต: ข้อ 29.8 ตั้ง .grid เป็น display:grid ไว้ด้วย !important · กฎในนี้ต้อง
      !important ทับกลับ และต้องล้าง grid-template-columns ทิ้งด้วย ไม่งั้น flex-basis ไม่ทำงาน */
@media (max-width: 700px) {
  body.buddypress #buddypress ul#course-list.grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    align-items: stretch;          /* การ์ดในแถวสูงเท่ากันเหมือนตอนเป็นกริด */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* ธีมใส่ padding 30px ซ้าย-ขวาไว้ที่ #item-body · ถ้าปล่อยไว้ carousel จะเลื่อนอยู่ในกรอบ
       300px กลางจอ ดูเหมือนกล่องเลื่อนในกล่อง ไม่ใช่ carousel
       ถอย margin ออกไปชนขอบจอ แล้วดัน padding กลับเข้ามาเท่าเดิม
       = รางเลื่อนเต็มจอ แต่การ์ดใบแรกยังตรงแนวกับหัวข้อและช่องค้นหาข้างบน */
    margin-left: -30px !important;
    margin-right: -30px !important;
    padding: var(--ck-sp-1) 30px var(--ck-sp-2) !important;
    scroll-padding-left: 30px;
    gap: var(--ck-sp-2) !important;
    /* ⚠️ ต้องปลด width ด้วย ไม่งั้น margin ติดลบไม่ได้ทำให้รางกว้างขึ้น
       มีกฎตั้ง width ไว้ที่ ul (อยู่ในสไตล์ชีตของ .online ซึ่ง cross-origin อ่านไม่ได้
       แต่วัดผลได้: รางกว้าง 300px = เท่าคอลัมน์แม่เป๊ะ ทั้งที่ควรได้ 360px)
       ผลคือรางแค่ "เลื่อนไปทางซ้าย" 30px แล้วไปโดนตัดที่ x=315 แทนที่จะยาวถึงขอบจอ */
    width: auto !important;
    max-width: none !important;
  }
  body.buddypress #buddypress ul#course-list.grid > li.course_single_item {
    /* 84% ของรางที่มองเห็น · เหลือขอบให้เห็นใบถัดไปโผล่มา ~48px
       เป็นตัวบอกว่า "เลื่อนต่อได้" โดยไม่ต้องมีลูกศรหรือคำอธิบาย */
    flex: 0 0 84%;
    scroll-snap-align: start;
    /* กันการ์ดหดตามเนื้อหาเวลาชื่อคอร์สสั้น */
    min-width: 0;
  }
  /* แถบเลื่อนของ WebKit บนมือถือบางเบราว์เซอร์ทับขอบล่างการ์ด · ซ่อนไว้
     ยังเลื่อนด้วยนิ้วได้ตามปกติ และมี scroll-snap เป็นตัวบอกตำแหน่งแทน */
  body.buddypress #buddypress ul#course-list.grid {
    scrollbar-width: none;
  }
  body.buddypress #buddypress ul#course-list.grid::-webkit-scrollbar {
    display: none;
  }
  /* เงาการ์ดถูก overflow ของรางตัดข้าง ๆ · เว้นที่ให้เงาด้วย padding แนวตั้งข้างบน
     (ทำไว้แล้วในกฎแรก: 8px บน 16px ล่าง) */

  /* รูปปกในโหมด carousel: การ์ดแคบลงจาก 300 เหลือ ~245px รูปสี่เหลี่ยมจัตุรัสจึงเตี้ยลงตาม
     ไม่ต้องแก้อะไร · แต่ต้องกันรูปยืดเมื่อการ์ดใบข้าง ๆ สูงกว่า (align-items:stretch) */
  body.buddypress #buddypress ul#course-list.grid > li.course_single_item .item-avatar[data-id] img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: auto !important;
  }
  /* การ์ดเป็น flex คอลัมน์ ปุ่มจะได้ชิดล่างเสมอเหมือนตอนเป็นกริด */
  body.buddypress #buddypress ul#course-list.grid > li.course_single_item {
    display: flex;
    flex-direction: column;
  }
  body.buddypress #buddypress ul#course-list.grid > li.course_single_item > .row {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  body.buddypress #buddypress ul#course-list.grid > li.course_single_item .item {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
  }
  /* ⚠️ อย่าใส่ margin-top:auto ที่ .item-credits เพื่อดันปุ่มลงล่าง
     ลำดับใน DOM คือ ปุ่ม → % → ชม.คงเหลือ → วันหมดอายุ (ดูข้อ 29.9) ปุ่มจึงไม่ใช่ตัวท้ายการ์ด
     auto margin ตรงนั้นจะดันทั้งปุ่มและสามบรรทัดล่างลงไปกองล่างพร้อมกัน เกิดรูโหว่กลางการ์ด
 · อาการเดียวกับที่แก้ไปแล้วในข้อ 21.2 การ์ดสูง 629px มีรูโหว่ 89px
     ความสูงเท่ากันได้จาก align-items:stretch อยู่แล้ว ไม่ต้องดันอะไรเพิ่ม */
}


/* ---------- 38.3 มือถือ: มุมมองรายการเป็นการ์ดแนวนอน ----------
   (ลูกค้าสั่ง 2026-08-29 ข้อ 4)

   ⚠️ กติกาชื่อคลาส: ธีมไม่ได้ใส่คลาส .list ให้มุมมองรายการ · มันคือ .item-list ที่
      "ไม่มี" .grid (ยืนยันจาก wplms/assets/js/old_files/buddypress.js บรรทัด 1600:
      addClass('grid') / removeClass('grid')) กฎทุกข้อจึงต้องเขียนเป็น .item-list:not(.grid)
      นี่คือเหตุผลที่มุมมองรายการยังไม่เคยได้สไตล์อะไรเลยตลอดงานนี้ · กฎเก่าผูกกับ .grid ทั้งหมด

   ของเดิมบนมือถือ: มุมมองรายการหน้าตาเหมือนมุมมองการ์ดเป๊ะ (รูปจัตุรัส 294px เต็มความกว้าง
   แล้วตัวหนังสือจัดกึ่งกลางใต้รูป) การ์ดสูง 666px ต่อใบ = สลับมุมมองแล้วไม่ได้อะไรเพิ่ม
   ทั้งที่มุมมองรายการมีไว้เพื่อ "เห็นหลายคอร์สพร้อมกัน"

   การ์ดแนวนอนตามหลักที่ใช้กันบนมือถือ:
     - ปกซ้าย 104px จัตุรัส (จำได้จากสี/อาร์ตเวิร์ก ไม่ต้องใหญ่กว่านี้)
     - เนื้อหาขวาชิดซ้ายทุกบรรทัด ไม่มีอะไรจัดกึ่งกลาง (ตาไล่จากขอบเดียว)
     - ชื่อคอร์สตัดที่ 2 บรรทัด แล้วต่อด้วยข้อมูลรองบรรทัดเดียว
     - ปุ่มเต็มความกว้างคอลัมน์ขวา = พื้นที่กดใหญ่สุดเท่าที่การ์ดให้ได้
     - ชิพสถานะเป็นแถบคาดใต้ปก (บนปกไม่มีที่พอสำหรับชิพลอย 104px)
   ผลที่วัดได้: การ์ดเหลือ ~150px ต่อใบ เห็น 4–5 คอร์สพร้อมกันในจอเดียว */
@media (max-width: 700px) {
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) {
    display: block !important;
    margin: 0 !important;
    padding: var(--ck-sp-1) 0 0 !important;
  }
  /* ตัวการ์ด · พื้น/เงา/ขอบสถานะมาจากข้อ 20.3 กับ 35.1 อยู่แล้ว ที่นี่คุมแค่ระยะกับทรง */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) > li.course_single_item {
    float: none !important;
    width: auto !important;
    margin: 0 0 var(--ck-sp-2) !important;
    padding: 0 !important;
  }
  /* .row ของ bootstrap → กริดสองคอลัมน์ ปกซ้าย เนื้อหาขวา
     (ธีม float คอลัมน์ไว้ ต้องล้าง float ทั้งคู่ ไม่งั้นแถวยุบ) */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item > .row {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    margin: 0 !important;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item > .row > div {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
  }
  /* ⚠️ ต้องระบุคอลัมน์ให้ตรง ๆ ห้ามพึ่ง auto-placement
     วัดแล้วสองคอลัมน์สลับที่กัน: .col-md-4 (ปก) ไปอยู่ราง 2 ส่วน .col-md-8 (เนื้อหา) อยู่ราง 1
     ทั้งที่ order = 0 · grid-column = auto · direction = ltr · grid-auto-flow = row ทุกตัว
     (น่าจะเป็นของตกทอดจากสไตล์ชีตของ .online ซึ่ง cross-origin ตรวจกฎตรง ๆ ไม่ได้)
     พอสั่ง grid-column ตรง ๆ แล้วเข้าที่ทันที · และอ่านง่ายกว่าด้วยว่าอะไรอยู่ตรงไหน
     เลือกด้วย :has() ตามเนื้อในจริง ไม่ผูกกับชื่อคลาสกริดของ bootstrap ที่อาจเปลี่ยนตามธีม */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item > .row > div:has(> .item-avatar) {
    grid-column: 1;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item > .row > div:has(> .item) {
    grid-column: 2;
  }
  /* ปกซ้าย: จัตุรัสจริง ไม่ยืดตามความสูงการ์ด */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-avatar[data-id] {
    width: 104px;
    height: 104px;
    overflow: hidden;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-avatar[data-id] a,
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-avatar[data-id] img {
    display: block;
    width: 104px !important;
    height: 104px !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* คอลัมน์ขวา */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item .item {
    padding: var(--ck-sp-1) var(--ck-sp-2) var(--ck-sp-1) 12px !important;
    border-bottom: 0 !important;    /* เส้นคั่นของธีมสำหรับรายการที่ไม่ได้อยู่ในการ์ด */
    text-align: left !important;
  }
  /* ชื่อคอร์ส: 2 บรรทัดแล้วตัด · ชื่อคอร์สที่นี่ยาวถึง 34 ตัวอักษร ถ้าปล่อยไหลจะดันการ์ดสูงไม่เท่ากัน */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-title {
    margin: 0 0 4px !important;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 !important;
    min-height: 0 !important;
    font-size: var(--ck-fs-body) !important;   /* 19px กินสองบรรทัดพอดีในคอลัมน์ 200px · ลงมาเป็น 16 */
    line-height: 1.4 !important;
  }
  /* แถวดาว/รีวิว: ทุกคอร์สเป็น "0 รีวิว" เหมือนกันหมด ไม่ได้ช่วยเลือกอะไรในรายการ
     ตัดทิ้งเฉพาะมุมมองรายการ (มุมมองการ์ดมีที่ให้ ปล่อยไว้เหมือนเดิม) */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-meta,
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-desc,
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-instructor {
    display: none !important;
  }
  /* ข้อมูลรอง: ในการ์ดแนวนอนมีที่ให้แค่สองบรรทัด · เอา "เรียนไปแล้ว %" กับวันหมดอายุ
     ส่วน "ชม.เรียนที่เหลือ" ตัดทิ้ง (ซ้ำความหมายกับ % และเป็นบรรทัดที่ยาวที่สุด) */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item > .text-center {
    font-size: var(--ck-fs-caption) !important;
    line-height: 1.5 !important;
    color: var(--ck-ink-60) !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-credits + .text-center + .text-center:not(:has(strong)) {
    display: none !important;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item > .text-center:not(:has(*)) {
    display: none !important;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item > .text-center span,
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item > .text-center strong {
    font-size: var(--ck-fs-caption) !important;
    color: var(--ck-ink) !important;
    font-weight: 700 !important;
  }
  /* คำว่า "หมดอายุวันที่" → "เรียนได้ถึง" ให้ตรงกับหน้า 13 และมุมมองการ์ด (เหตุผลเดียวกับข้อ 29.12 ข) */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item > .text-center:has(strong) {
    font-size: 0 !important;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item > .text-center:has(strong)::before {
    content: "เรียนได้ถึง ";
    font-size: var(--ck-fs-caption);
    line-height: 1.5;
    color: var(--ck-ink-60);
  }
  /* ปุ่ม: ธีม float:right ไว้สำหรับรายการบนจอกว้าง · ในการ์ดแนวนอนต้องเป็นบล็อกท้ายสุด
     (ลำดับ DOM คือ ปุ่ม → % → ชม. → วันหมดอายุ จึงต้องใช้ order ดันปุ่มลงล่าง) */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item .item {
    display: flex !important;
    flex-direction: column;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-title      { order: 1; }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item > .text-center { order: 2; }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-credits    { order: 3; }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) .item-action     { order: 4; }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item .item-credits {
    float: none !important;
    width: 100% !important;
    margin: var(--ck-sp-1) 0 0 !important;
    padding: 0 !important;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item .item-credits form {
    margin: 0 !important;
  }
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item .button,
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item input.button,
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item input.course_button {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 40px;
    padding: 8px var(--ck-sp-2) !important;
    font-size: var(--ck-fs-body) !important;
  }

  /* ชิพสถานะ (ข้อ 35.2): บนปก 104px ไม่มีที่ให้ชิพลอยมุมบนซ้าย · คำว่า "เหลือไม่ถึง 7 วัน"
     กว้าง 108px ล้นปกทั้งใบ เปลี่ยนเป็นแถบคาดเต็มความกว้างใต้ปกแทน
     (ตำแหน่งเดียวกับที่ตาเห็นปกจบพอดี และยังอยู่ติดกับสิ่งที่มันอธิบาย) */
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item[class*="ck-course-"] .item-avatar[data-id]::after,
  body.buddypress #buddypress ul#course-list.item-list:not(.grid) li.course_single_item:has(.item-credits > a.button span) .item-avatar[data-id]::after {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22px;
    padding: 0;
    border-radius: 0;
    justify-content: center;
    font-size: 11px;
    box-shadow: none;
  }
}


/* ---------- 38.4 น้องอะตอมวิ่งบนแถบความคืบหน้า ----------
   (ลูกค้าสั่ง 2026-08-29 ข้อ 5 · ภาพต้นฉบับ assets/20260829-085229.jpeg
    ตัดพื้นขาวเป็น PNG โปร่งไว้ที่ mock/brand/atom-runner.png)

   ตำแหน่งตามที่ลูกค้าขอ เรียงจากบนลงล่าง:
     ตัวเลข %      ← บนสุด
     น้องอะตอม     ← ใต้ตัวเลข ยืนอยู่บนราง
     รางความคืบหน้า
   น้องอะตอมผูกกับ "ปลายแถบที่เต็มแล้ว" ไม่ใช่กับราง · เดินหน้าตามความคืบหน้าจริง
   ทำได้ด้วย ::after บน .bar เพราะ .bar คือกล่องที่ความกว้าง = % ที่เรียนไปแล้ว

   ⚠️ ภาพถูกครอบตัดให้ "ขอบล่าง = ปลายเท้า" มาแล้ว (ตัดเส้นความเร็วใต้เท้าทิ้ง)
      กฎ bottom:100% จึงวางเท้าลงบนขอบบนของรางพอดี ไม่ต้องเผื่อระยะเดา ๆ
   ⚠️ .progress ของ Bootstrap เป็น overflow:hidden · ข้อ 20.4 ปลดเป็น visible ไว้แล้ว
      ถ้าถอดบรรทัดนั้นออกเมื่อไร น้องอะตอมจะหายทันที

   ⚠️ ทำไมน้องอะตอมถึง "นำหน้า" แถบ ไม่ได้ยืนคร่อมปลายแถบ
      ลองแบบคร่อมก่อนแล้ววัดที่ 0%: แถบกว้าง 12px (min-width ข้อ 20.4) ตัวน้องอะตอม 50px
      ครึ่งตัวจึงหลุดออกนอกขอบซ้ายของราง โดนคอลัมน์ตัดหายไป
      วางให้เท้าหลังแตะปลายแถบแทน (left:100% แล้วถอยกลับ 12px = ทับปลายแถบไว้นิดเดียว)
      → 0% ยืนที่จุดสตาร์ทเต็มตัว · 100% ถึงเส้นชัยพอดีในที่ที่กันไว้ให้ทางขวา */

:root {
  --ck-atom-run: url("brand/atom-runner.png");
  --ck-atom-run-h: 34px;                                  /* ความสูงที่วาดจริง · ต้นฉบับ 300×203 */
  --ck-atom-run-w: calc(var(--ck-atom-run-h) * 300 / 203);
  --ck-atom-run-lap: 12px;                                /* ระยะที่ตัวทับปลายแถบไว้ */
}

body.page-template-start .progress.course_progressbar {
  position: relative;
  /* ที่ว่างเหนือราง: 34 (อะตอม) + 4 (ช่องไฟ) + 18 (บรรทัดตัวเลข) = 56px
     ไม่งั้นทั้งคู่ไปทับชื่อคอร์สข้างบน */
  margin-top: 56px !important;
  /* กันที่ทางขวาไว้ให้น้องอะตอมยืนตอน 100% · รางสั้นลงเท่าตัวน้องอะตอมลบระยะทับ
     ⚠️ ใช้ margin ไม่ใช่ padding+background-clip:content-box
        ลอง content-box ก่อนแล้วเจอสองปัญหาซ้อนกัน:
        (1) เงา inset ของ Bootstrap วาดบน padding box เสมอ ไม่สนใจ background-clip
            → เห็นรางผีจาง ๆ ยาวเต็มความกว้างเดิมโผล่ต่อท้ายรางจริง
        (2) มุมขวาของรางกลายเป็นเหลี่ยม ขณะที่มุมซ้ายยังมน (เบราว์เซอร์ย่อรัศมีด้านในลง
            ตามความหนา padding แล้วสเกลให้พอดีกล่อง · 999px เหลือไม่ถึงครึ่งความสูง)
        margin ย่อกล่องทั้งใบ ทั้งเงาและรัศมีจึงตามไปด้วยเองทั้งสองข้าง */
  /* ⚠️ ต้องย่อด้วย width ไม่ใช่ margin-right
     ธีมตั้งรางเป็น display:inline-block + width:100% (สไตล์ชีตของ .online เป็น cross-origin
     อ่านกฎตรง ๆ ไม่ได้ แต่วัดผลลัพธ์ได้: ราง 322.5px เท่าคอลัมน์แม่เป๊ะ ทั้งที่สั่ง margin ไป 38px
     แปลว่ามีใครตั้ง width ทับไว้) margin จึงไม่ย่อกล่อง แต่ทำให้ล้นออกไปแทน
     → น้องอะตอมตอน 100% ยืนเลยขอบคอลัมน์ออกไปจนโดนตัด
     ตัดความกว้างตรง ๆ แทน แล้วรางจะจบก่อนขอบคอลัมน์พอดีเท่าที่กันไว้ */
  width: calc(100% - (var(--ck-atom-run-w) - var(--ck-atom-run-lap))) !important;
  display: block !important;
}

/* น้องอะตอม: เท้าแตะขอบบนของราง (bottom:100% ของ .bar สูง 12px)
   เท้าหลังทับปลายแถบไว้ 12px ที่เหลือวิ่งนำไปข้างหน้า */
body.page-template-start .progress.course_progressbar .bar::after {
  content: '';
  position: absolute;
  left: 100%;
  right: auto;
  bottom: 100%;
  margin-left: calc(-1 * var(--ck-atom-run-lap));
  width: var(--ck-atom-run-w);
  height: var(--ck-atom-run-h);
  background: var(--ck-atom-run) no-repeat center bottom / contain;
  pointer-events: none;
}

/* ตัวเลข % ขึ้นไปอยู่เหนือน้องอะตอม และเลื่อนตามไปด้วย · สองอย่างนี้บอกเรื่องเดียวกัน
   ⚠️ ธีมตั้งทั้ง left และ right ให้ span ไว้ (วัดได้ left:-12.5px / right:-6px)
      ในกล่อง absolute แบบ LTR ค่า left เป็นตัวชนะ · ต้องเขียนทับด้วย !important ทั้งคู่
      ไม่งั้นตัวเลขจะค้างอยู่ที่เดิมขณะที่น้องอะตอมเดินหน้าไป */
body.page-template-start .progress.course_progressbar .bar span {
  left: 100% !important;
  right: auto !important;
  /* กึ่งกลางของน้องอะตอม = ปลายแถบ − ระยะทับ + ครึ่งตัว  แล้วดึงกลับครึ่งความกว้างของตัวเลขเอง */
  margin-left: calc(var(--ck-atom-run-w) / 2 - var(--ck-atom-run-lap)) !important;
  transform: translateX(-50%);
  top: calc(-1 * (var(--ck-atom-run-h) + 22px)) !important;
  white-space: nowrap;
}
/* ธีมวาดสามเหลี่ยมชี้ลงใต้ตัวเลข (span::after ขอบ 5px ดำ 60%) ไว้ชี้ที่ราง
   ตอนนี้มันชี้ลงบนหัวน้องอะตอมพอดี · เอาออก ตัวน้องอะตอมทำหน้าที่ชี้ตำแหน่งแทนอยู่แล้ว */
body.page-template-start .progress.course_progressbar .bar span::after {
  display: none !important;
}

/* มือถือ: แถบนี้อยู่ในคอลัมน์ขวาที่ตกลงมาต่อท้ายวิดีโอ ที่ว่างเหนือรางมีน้อยกว่า
   ย่อน้องอะตอมลงหนึ่งขั้น (ค่าที่ผูกกันทั้งหมดคำนวณจาก --ck-atom-run-h ตัวเดียว) */
@media (max-width: 700px) {
  body.page-template-start .progress.course_progressbar {
    --ck-atom-run-h: 28px;
    margin-top: 50px !important;
  }
}

/* พิมพ์: ภาพประกอบตัวนี้เป็นของตกแต่ง ไม่ได้ถือข้อมูล · ตัวเลข % ยังอยู่ครบ */
@media print {
  body.page-template-start .progress.course_progressbar .bar::after {
    display: none;
  }
}


/* ---------- 38.5 ปุ่ม "ต่ออายุคอร์ส" ต้องดูออกว่ากดได้ ----------
   (ลูกค้าทัก 2026-08-29 รอบสอง: "ปุ่มคอร์สหมดอายุ … ดูเหมือนกดไม่ได้")

   ของเดิม (ข้อ 35.3) ตั้งใจให้ปุ่มนี้เงียบ เพราะไม่อยากให้คอร์สที่หมดอายุแล้วเด่นกว่า
   คอร์สที่ยังเรียนได้ · แต่เลือกวิธีผิด คือใช้ "เทาทึบ + ตัวอักษรขาว" ซึ่งเป็นภาษาเดียวกับ
   ปุ่มที่ถูกปิดใช้งานทั้งเว็บ (ดูข้อ 30.4 state disabled) คนจึงอ่านว่า "กดไม่ได้"
   ทั้งที่มันเป็นปุ่มเดียวที่การ์ดใบนั้นเหลืออยู่

   แก้สองชั้น:
   (1) ตัดคำว่า "คอร์สหมดอายุ" ในปุ่มทิ้ง · ธีมพิมพ์สอง <span> ต่อกันคือ
       "คอร์สหมดอายุ" (สถานะ) + "ต่ออายุคอร์ส" (การกระทำ)
       สถานะถูกบอกไปแล้วด้วยชิพบนภาพปกในข้อ 35.2 ("หมดอายุแล้ว") การเอามาใส่ในปุ่มอีกที
       ทำให้ปุ่มอ่านเป็น "ป้ายบอกสถานะ" ไม่ใช่ "ปุ่ม" · ซึ่งคือครึ่งหนึ่งของปัญหา
       เหลือ <span> ที่สองอย่างเดียว ปุ่มจึงพูดถึงการกระทำล้วน
   (2) คืนภาษาปุ่มหลักของเว็บให้ (เหลืองทึบ + ตัวอักษรหมึก + เงาสติกเกอร์)

   ทำไมตอนนี้ให้เป็นปุ่มหลักได้โดยไม่ผิดเจตนาเดิม · เพราะการ์ดใบที่หมดอายุถูกลดน้ำหนัก
   ไปแล้วทั้งใบตั้งแต่ข้อ 35.5 (ปกเป็นขาวดำ opacity .55 · ชื่อคอร์สเป็นหมึก 60% · พื้นการ์ดเทา)
   ปุ่มสีเดียวจึงไม่ทำให้ทั้งใบแย่งสายตา แต่ทำให้ "ทางออก" ของการ์ดใบนั้นชัดขึ้น */

/* (1) ซ่อนคำบอกสถานะใน ปุ่ม · เหลือเฉพาะคำที่เป็นการกระทำ
   ⚠️ ห้ามซ่อนด้วยการลบ <span> ออกจากเงื่อนไข :has() ในข้อ 35.6 · กฎนั้นใช้ <span>
      เป็นตัวจับว่าการ์ดใบไหนหมดอายุ ถ้าทำให้มันหายไปสถานะทั้งชุดจะดับตามไปด้วย
      display:none ยังนับว่ามีอยู่ใน DOM กฎ :has() จึงยังทำงานเหมือนเดิม */
body.buddypress #buddypress ul#course-list li.course_single_item .item-credits > a.button span:first-child {
  display: none !important;
}

/* (2) ภาษาปุ่มหลัก · ชุดเดียวกับปุ่มเหลืองทั้งเว็บ (ข้อ 3)
   ต้องเจาะ specificity ให้ชนะข้อ 35.3 กับ 35.6 ที่ตั้งพื้นเทาไว้ด้วย !important */
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-credits a.button,
body.buddypress #buddypress ul#course-list li.course_single_item:has(.item-credits > a.button span) .item-credits a.button {
  background: var(--ck-yellow) !important;
  /* ⚠️ ห้ามใส่ขอบขาว (เคยใส่ 3px แล้วถอดออก · ลูกค้าทัก 2026-08-29)
     ปุ่มหลักของเว็บนี้เป็น border:0 ทุกตัว (สั่งซื้อ · ดำเนินการสั่งซื้อ · #place_order · ดูข้อ 3)
     ขอบขาวในระบบนี้เป็นของ "ป้าย/เม็ดยาที่วางทับพื้นสีเดียวกันหรือทับอาร์ตเวิร์ก" ต่างหาก
     คือ ปุ่มเข้าสู่ระบบบนแถบเหลือง · ป้าย "ลดราคา!" บนปก · เลขจำนวนบนไอคอนตะกร้า
     (ทั้งสามใช้ 2px ไม่ใช่ 3px) มันทำหน้าที่ "ตัดขอบ" ไม่ใช่ "เป็นปุ่ม"
     พอเอามาใช้กับปุ่มบนพื้นการ์ดเทา #F1F0EE ขอบขาวอ่านเป็นช่องว่าง/รอยต่อ ไม่ใช่สติกเกอร์ */
  color: var(--ck-ink) !important;
  border: 0 !important;
  box-shadow: var(--ck-sh-sticker) !important;
  cursor: pointer;
}
/* ข้อ 20.0 ข ตั้ง span ในปุ่มเป็น color:inherit ไว้แล้ว ตัวอักษรจึงตามสีหมึกมาเอง */
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-credits a.button:hover,
body.buddypress #buddypress ul#course-list li.course_single_item:has(.item-credits > a.button span) .item-credits a.button:hover {
  background: var(--ck-orange) !important;
  transform: translateY(-1px);
}
body.buddypress #buddypress ul#course-list li.ck-course-expired .item-credits a.button:active,
body.buddypress #buddypress ul#course-list li.course_single_item:has(.item-credits > a.button span) .item-credits a.button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(34, 34, 34, .2) !important;
}


/* ---------- 38.6 มือถือ: แถบเลขหน้าตกสองบรรทัด (ลูกค้าทัก 2026-08-29 รอบสอง) ----------
   ข้อ 29.7 ตั้งแถบนี้เป็น flex + space-between ไว้สำหรับจอกว้าง
   บนมือถือพื้นที่เหลือ 300px แล้วต้องใส่ของสามอย่าง:
     "กำลังดูหน้า 1 จาก 2" (~89px) + ปุ่มกลม 3 ปุ่ม × 44px + ช่องไฟ = ~223px
   ตัวเลขรวมพอดี แต่ทั้งสองก้อนยุบตัวได้ (flex-shrink ค่าเริ่มต้น = 1) พอจอแคบลงอีกนิด
   หรือฟอนต์เรนเดอร์กว้างกว่าที่วัด คำจะตกบรรทัดก่อน แล้วปุ่มลูกศรถูกดันลงไปแถวสอง
   = แถบสูง 69px มีคำครึ่งบรรทัดกับปุ่มลอยอยู่คนละระดับ

   แก้: ล็อกให้เป็นแถวเดียวเสมอ ห้ามยุบทั้งสองก้อน แล้วให้คำเป็นตัวที่ยอมหายไปก่อน
   ถ้าจอแคบจริง ๆ (≤360px) · ปุ่มที่ไฮไลต์อยู่บอก "หน้าปัจจุบัน" ได้เองอยู่แล้ว */
@media (max-width: 700px) {
  body.buddypress #buddypress .pagination#pag-top,
  body.buddypress #buddypress .pagination#pag-bottom {
    flex-wrap: nowrap;
    gap: var(--ck-sp-1);
  }
  body.buddypress #buddypress .pagination#pag-top .pag-count,
  body.buddypress #buddypress .pagination#pag-bottom .pag-count {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-align: left;
  }
  /* กลุ่มปุ่มห้ามยุบ · ปุ่มกลม 44px คือขนาดต่ำสุดที่กดได้ถนัด ยุบแล้วเสียทั้งแถว */
  body.buddypress #buddypress .pagination#pag-top .pagination-links,
  body.buddypress #buddypress .pagination#pag-bottom .pagination-links {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ck-sp-1);
    white-space: nowrap;
  }
  /* ข้อ 29.7 เว้นช่องไฟด้วย margin-left ที่ปุ่ม · พอเปลี่ยนมาใช้ gap แล้วจะซ้อนกันสองชั้น
     ทำให้ปุ่มแรกเยื้องเข้าไปไม่ตรงแนวกับปุ่มอื่น */
  body.buddypress #buddypress .pagination .page-numbers {
    margin-left: 0 !important;
  }
}
/* จอแคบมาก: ตัดคำอธิบายทิ้ง เหลือปุ่มจัดกึ่งกลาง
   (ปุ่มเหลืองที่ไฮไลต์อยู่ = หน้าปัจจุบัน ซึ่งเป็นข้อมูลเดียวกับที่คำนั้นบอก) */
@media (max-width: 360px) {
  body.buddypress #buddypress .pagination#pag-top,
  body.buddypress #buddypress .pagination#pag-bottom {
    justify-content: center;
  }
  body.buddypress #buddypress .pagination#pag-top .pag-count,
  body.buddypress #buddypress .pagination#pag-bottom .pag-count {
    display: none !important;
  }
}


/* ---------- 38.7 มือถือ: สลับสองปุ่มใต้วิดีโอ (หน้า 14) ----------
   ลูกค้าสั่ง 2026-08-29 รอบสอง: บนมือถือให้ "ทำเครื่องหมายว่าเรียนเสร็จ" อยู่บน
   แล้ว "วีดีโอถัดไป" อยู่ล่าง · สลับกับที่ตกลงกันไว้เมื่อ 2026-08-19 (ข้อ 29.24)

   ⚠️ เปลี่ยนเฉพาะมือถือ เดสก์ท็อปยังเป็นแบบเดิม (ถัดไปซ้าย · ทำเครื่องหมายขวา)
      เพราะบนจอกว้างสองปุ่มอยู่ "แถวเดียวกัน" ตำแหน่งซ้าย-ขวาจึงเป็นเรื่องของการจัดวาง
      แต่บนมือถือมันเรียงบน-ล่าง = กลายเป็น "ลำดับขั้นตอน" ซึ่งตรงกับลำดับที่คนทำจริง:
      ดูจบ → ทำเครื่องหมายว่าเรียนแล้ว → ไปวิดีโอถัดไป

   ข้อ 29.24 ตั้ง order:-1 ให้บล็อกของปุ่มถัดไปไว้ (ดันขึ้นก่อน) · ล้างค่ากลับเป็น 0
   บนมือถือ ลำดับที่ตาเห็นจึงกลับไปตรงกับลำดับใน DOM พอดี
   ผลพลอยได้: ลำดับ Tab ของคีย์บอร์ดตรงกับที่ตาเห็นด้วยบนมือถือ (บนเดสก์ท็อปยังสลับกันอยู่
   ตามที่บันทึกไว้ใน TASKS-DEV กลุ่ม J) */
@media (max-width: 767px) {
  body.page-template-start .unit_prevnext > div:has(#next_unit) {
    order: 0;
  }
}


/* ---------- 38.8 กล่อง "ต่ออายุคอร์สเรียน" วางผิดตำแหน่ง (ลูกค้าทัก 2026-08-29 รอบสอง) ----------
   อาการ: บนมือถือหัวกล่องถูกตัดหายไปด้านบน และเห็นเนื้อหาหน้าเว็บโผล่อยู่เหนือ/ใต้กล่อง
   เหมือนกล่องลอยอยู่ผิดที่

   ต้นเหตุ: ธีมพิมพ์ <style> ไว้ใน <body> จัดกล่องให้อยู่กลางจอแนวตั้งด้วยท่าเก่า
     #ContinueCourseModal:before   { height: 100%; vertical-align: middle; display: inline-block }
     #ContinueCourseModal .modal-dialog { display: inline-block; vertical-align: middle }
   ท่านี้ใช้ได้เฉพาะตอนกล่อง "เตี้ยกว่าจอ" เท่านั้น
   วัดจริงที่ 390×844: เนื้อในกล่องสูง 1,073px · สูงกว่าจอ 229px
   พอจับกึ่งกลางแนวตั้ง ขอบบนของกล่องจึงไปอยู่ที่ค่าติดลบ แล้ว **เลื่อนขึ้นไปดูไม่ได้**
   เพราะกล่องที่เลื่อน (.modal) เริ่มนับ scrollTop ที่ 0 · ส่วนที่อยู่เหนือ 0 หายไปเฉย ๆ
   บนเครื่องจริงยิ่งหนักกว่าที่วัด เพราะแถบเบราว์เซอร์ของ Safari กินความสูงจอไปอีก

   ⚠️ เดสก์ท็อปก็เป็น (จอสูง 900 < กล่อง 1,073) แค่เห็นไม่ชัดเท่า จึงแก้ทุกขนาดจอ ไม่ใช่เฉพาะมือถือ

   แก้: เลิกจัดกึ่งกลางแนวตั้ง เปลี่ยนเป็นชิดบนแล้วเว้นระยะขอบ · เป็นพฤติกรรมมาตรฐาน
   ของ Bootstrap เองอยู่แล้ว และเป็นท่าเดียวที่ปลอดภัยกับกล่องที่สูงเกินจอ
   กล่องเตี้ย ๆ ก็ยังดูดีเพราะ .modal มี overflow-y:auto อยู่แล้ว

   ⚠️ ธีมยิง <style> ตัวนี้ไว้ใน body = มาทีหลัง override.css ในลำดับเอกสาร
      ต้องเจาะ specificity ให้สูงกว่า (เติม body.theme-wplms) + !important ถึงจะชนะ */
body.theme-wplms #ContinueCourseModal::before {
  display: none !important;
}
body.theme-wplms #ContinueCourseModal {
  text-align: center;
  padding: 0 !important;
  /* กล่องที่สูงเกินจอต้องเลื่อนได้ และต้องมีที่ว่างท้ายสุดให้ปุ่มไม่ชนขอบจอ
     (iOS Safari ซ้อนแถบล่างทับ 1–2 ซม. · env(safe-area-inset-bottom) เผื่อให้) */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
body.theme-wplms #ContinueCourseModal .modal-dialog {
  display: block !important;
  vertical-align: baseline !important;
  text-align: left;
  width: auto !important;
  max-width: 1000px;
  margin: var(--ck-sp-3) auto calc(var(--ck-sp-3) + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 700px) {
  body.theme-wplms #ContinueCourseModal .modal-dialog {
    /* ขอบข้าง 16px เท่าระยะขอบจอของหน้าอื่นทั้งเว็บ */
    margin: var(--ck-sp-2) var(--ck-sp-2)
            calc(var(--ck-sp-3) + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ---------- 38.9 ย่อคำบนปุ่มทำเครื่องหมายว่าเรียนแล้ว (หน้า 14) ----------
   ลูกค้าสั่ง 2026-08-29 รอบสอง: "เปลี่ยนคำเป็นคำสั้น ๆ ตัดคำว่าทำเครื่องหมายออก"

   ของเดิม "ทำเครื่องหมายว่าเรียนวีดีโอนี้แล้ว" = 33 ตัวอักษร ยาวกว่าปุ่มคู่ของมัน
   ("วีดีโอถัดไป" 11 ตัว) สามเท่า บนมือถือกินเต็มบรรทัดพอดีจนเกือบตกบรรทัด
   และคำว่า "ทำเครื่องหมาย" เป็นศัพท์ของระบบ ไม่ใช่สิ่งที่ผู้เรียนคิดในหัว
   ผู้เรียนคิดว่า "ดูจบแล้ว" → ใช้คำในคลังศัพท์เดียวกับที่หน้าอื่นใช้ ("เรียนไปแล้ว 0%",
   "เรียนคอร์สนี้ต่อ") ได้เป็น "เรียนจบแล้ว"

   ⚠️ ป้ายกำกับอยู่ใน <span> ที่ธีมพิมพ์มา แก้ข้อความตรง ๆ ไม่ได้
      ::before ของปุ่มถูกใช้เป็นเครื่องหมายถูกไปแล้ว (ข้อ 29.17) และ ::after ถูกจองไว้ให้
      สถานะหลังกด (ข้อ 29.18) · จึงต้องยุบ font-size ของ <span> แล้ววาดคำใหม่ที่ span::after
      (ท่าเดียวกับที่ใช้แทนข้อความมาตลอดงานนี้)
      production: แก้ข้อความจริงที่ไฟล์แปลของ vibe-course-module จะสะอาดกว่า */
body.page-template-start .unit_prevnext a#mark-complete span {
  font-size: 0 !important;
}
body.page-template-start .unit_prevnext a#mark-complete span::after {
  content: "เรียนจบแล้ว";
  font-size: var(--ck-fs-body);
  font-weight: 700;
  line-height: 1.2;
}
/* สถานะหลังกด (ข้อ 29.18) ต้องใช้คำเดียวกัน ไม่งั้นปุ่มพูดคนละคำกับผลของมันเอง
   ตัวที่บอกว่า "ทำไปแล้ว" คือพื้นเขียวมิ้นต์ + เครื่องหมายถูกทึบ + กดไม่ได้ ไม่ใช่ตัวคำ */
body.page-template-start .unit_prevnext a#mark-complete:has(i.icon-check)::after {
  content: "เรียนจบแล้ว" !important;
}


/* ---------- 38.10 ช่องติ๊กยอมรับข้อตกลงทับข้อความ (กล่องต่ออายุคอร์ส) ----------
   ลูกค้าทัก 2026-08-29 รอบสอง: "ตอนแรกแว๊บถูกต้อง เหมือนมันถูก override"
 · คำบรรยายตรงเป๊ะกับสาเหตุจริง

   ลำดับที่เกิดขึ้นตอนโหลดหน้า
     1) เซิร์ฟเวอร์ส่ง HTML ของฟอร์มมาแบบปกติ → ช่องติ๊กอยู่ในแถวตามที่ข้อ 36.6 จัดไว้ = ถูกต้อง
     2) Ninja Forms เป็นแอป Backbone ที่ **เรนเดอร์ฟอร์มใหม่ทั้งก้อน** จากเทมเพลตของตัวเอง
        (เขียนไว้แล้วใน build-demo.py ตอนทำกล่องต่ออายุ)
     3) สไตล์ชีตของปลั๊กอินตั้ง .nf-field-element ของฟิลด์ชนิด checkbox เป็น
        position:absolute; left:0  (ท่ามาตรฐานของปลั๊กอิน: ดันช่องติ๊กออกนอกแถว
        แล้วให้ป้ายเว้น padding-left ไว้รับ)
        → ช่องติ๊กหลุดออกจาก flex row ของข้อ 36.6 ไปทับตัวอักษรที่ x เดียวกัน
     นี่คือ "แว๊บถูกแล้วเพี้ยน" ที่เห็น · ไม่ใช่ CSS เราโดนทับ แต่เป็นฟอร์มถูกวาดใหม่

   วัดยืนยัน (390px, หลังฟอร์มนิ่ง): .nf-field-element = position:absolute · left:0
   ทั้งช่องติ๊กและตัวอักษรอยู่ที่ x=32 เท่ากัน = ซ้อนทับกันพอดี

   แก้: ดึงกลับเข้าแถวปกติ แล้วปล่อยให้ flex ของข้อ 36.6 จัดตำแหน่งเหมือนเดิม
   (ท่าเดียวกับที่ทำกับฟิลด์อัปโหลดไฟล์ #nf-field-91 ไปแล้ว · พลาดไปฟิลด์เดียว)

   ⚠️ เขียนด้วยคลาส .checkbox-container ไม่ผูกกับเลข 96 ตัวเดียว · เลขฟิลด์ของ Ninja Forms
      เปลี่ยนได้เมื่อแก้ฟอร์ม ถ้าผูกกับเลขแล้ววันหนึ่งเลขเปลี่ยน บั๊กนี้จะกลับมาเงียบ ๆ */
body.theme-wplms #ContinueCourseModal .checkbox-container .nf-field-element {
  position: static !important;
  left: auto !important;
  flex: 0 0 auto;
  width: auto !important;
}
/* ป้ายกำกับของปลั๊กอินเว้น padding-left ไว้รับช่องติ๊กที่เคยลอยอยู่ · ไม่ต้องแล้ว */
body.theme-wplms #ContinueCourseModal .checkbox-container .nf-field-label label {
  padding-left: 0 !important;
}

/* แถวยอมรับข้อตกลง: เขียนตำแหน่งให้ชัดแทนการพึ่ง row-reverse
   ข้อ 36.6 ใช้ flex-direction:row-reverse เพื่อสลับให้ช่องติ๊กมาอยู่ซ้าย ซึ่งทำงานถูก
   แต่พออ่านโค้ดแล้วเดาไม่ออกว่าอะไรอยู่ตรงไหน และเวลาปลั๊กอินเรนเดอร์ใหม่แล้วสลับลำดับลูก
   ผลจะกลับด้านทันทีโดยไม่มีอะไรเตือน · ใช้ order ระบุตรง ๆ แทน อ่านแล้วรู้เลยว่าใครอยู่ก่อน
   และไม่ผูกกับลำดับใน DOM ที่ปลั๊กอินเป็นคนกำหนด */
body.theme-wplms #ContinueCourseModal .checkbox-container .field-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: var(--ck-sp-1);
}
body.theme-wplms #ContinueCourseModal .checkbox-container .field-wrap > .nf-field-element {
  order: 1;
  flex: 0 0 20px;
  margin-top: 2px;
}
body.theme-wplms #ContinueCourseModal .checkbox-container .field-wrap > .nf-field-label {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;          /* กันข้อความยาวดันช่องติ๊กหลุดออกนอกการ์ด */
  margin: 0 !important;
}


/* ---------- 38.11 แยก "ยังไม่ได้กด" กับ "กดแล้ว" ให้ออกโดยไม่ต้องพึ่งสี ----------
   ลูกค้าทัก 2026-08-29 รอบสอง: "ตอนนี้มีแค่สีอ่ะดูออกยาก"

   วัดของเดิมแล้วพบว่าสองสถานะต่างกันแค่ 2 อย่าง และทั้งคู่เป็นสีล้วน
     ยังไม่ได้กด : เม็ดยาขาว ขอบจาง · เครื่องหมายถูกสีหมึก opacity .55 · คำว่า "เรียนจบแล้ว"
     กดแล้ว     : เม็ดยาเขียวมิ้นต์ · เครื่องหมายถูกตัวเดียวกัน opacity 1 · คำว่า "เรียนจบแล้ว"
   = ไอคอนเดียวกัน · คำเดียวกัน · ต่างแค่สีพื้นกับความจางของไอคอน
   คนตาบอดสี หรือคนที่ไม่ได้เห็นสองสถานะเทียบกัน จึงแยกไม่ออกจริง ๆ
   แถมสถานะ "ยังไม่ได้กด" ก็มีเครื่องหมายถูกอยู่แล้ว ซึ่งอ่านว่า "เสร็จแล้ว" ในตัวมันเอง

   แก้ให้ต่างกัน 3 ช่องทาง ไม่ใช่ช่องทางเดียว (สี · ไอคอน · คำ)
   ┌──────────┬─────────────────────┬──────────────────┬─────────────┐
   │          │ ไอคอน               │ คำ               │ พื้น        │
   ├──────────┼─────────────────────┼──────────────────┼─────────────┤
   │ ยังไม่กด │ วงกลมว่าง ○         │ "เรียนจบแล้ว"    │ ขาว ขอบจาง  │
   │ กดแล้ว   │ วงกลมทึบมีถูก ✓     │ "บันทึกแล้ว"     │ เขียวมิ้นต์ │
   └──────────┴─────────────────────┴──────────────────┴─────────────┘
   วงกลมว่าง → วงกลมทึบ เป็นภาษาเดียวกับช่องติ๊ก (checkbox) ที่ทุกคนอ่านออกอยู่แล้ว
   ว่าอันหนึ่ง "ยังไม่ได้ทำ" อีกอัน "ทำแล้ว" · ไม่ต้องเห็นสองอันเทียบกันก็รู้

   ส่วนคำ: ก่อนกดเป็น "สิ่งที่เรากำลังจะบอกระบบ" (เรียนจบแล้ว)
   หลังกดเป็น "สิ่งที่ระบบทำให้แล้ว" (บันทึกแล้ว) · คนละประโยค คนละหน้าที่ */

:root {
  /* วงกลมว่าง · สถานะ "ยังไม่ได้ทำ" (เส้นเดียวกับไอคอนอื่นในระบบ: stroke 2.2 หมึก) */
  --ck-ic-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='6.6' fill='none' stroke='%23222222' stroke-width='2'/%3E%3C/svg%3E");
  /* วงกลมทึบมีเครื่องหมายถูก · สถานะ "ทำแล้ว" (สีเดียวกับตัวอักษรบนพื้นมิ้นต์) */
  --ck-ic-check-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23245C46'/%3E%3Cpath d='M5.2 9.2l2.6 2.6L12.9 6.6' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ยังไม่ได้กด: วงกลมว่าง ไม่ใช่เครื่องหมายถูก
   (ข้อ 29.17 ตั้ง ::before เป็น --ck-ic-check opacity .55 ไว้ · เขียนทับทั้งคู่) */
body.page-template-start .unit_prevnext a#mark-complete::before {
  background-image: var(--ck-ic-circle);
  opacity: .5;
}
/* กดแล้ว: วงกลมทึบมีถูก เต็มความเข้ม */
body.page-template-start .unit_prevnext a#mark-complete:has(i.icon-check)::before {
  background-image: var(--ck-ic-check-done);
  opacity: 1;
}
/* คำหลังกดต้องเป็นคนละประโยคกับก่อนกด · ทับค่าที่ข้อ 38.9 ตั้งไว้ */
body.page-template-start .unit_prevnext a#mark-complete:has(i.icon-check)::after {
  content: "บันทึกแล้ว" !important;
}
/* <span> ที่ถือคำว่า "เรียนจบแล้ว" ต้องหายไปตอนกดแล้ว ไม่งั้นปุ่มจะมีสองคำต่อกัน
   (ธีมแทนเนื้อในปุ่มด้วย <i class="icon-check"> ตอน ajax สำเร็จ · ข้อ 29.18
    แต่ในสถานะที่ธีมยังไม่ได้แทน เช่นหน้า demo ที่จำลองไว้ <span> ยังอยู่) */
body.page-template-start .unit_prevnext a#mark-complete:has(i.icon-check) span {
  display: none !important;
}


/* ---------- 38.12 คำบนแถบปุ่มใต้วิดีโอ + สีสถานะเรียนจบ (ลูกค้าเลือก 2026-08-29) ----------
   ลูกค้าเลือกจากตัวอย่างที่ทำเทียบให้ดู 3 เรื่องพร้อมกัน

   ก) คำ · ใช้ "เรียนวิดีโอนี้จบแล้ว" ทั้งสองสถานะ (ทับค่าที่ข้อ 38.9 กับ 38.11 ตั้งไว้)
      ⚠️ พอสองสถานะใช้คำเดียวกัน ตัวแยกจะเหลือ "ไอคอน + สี" · แจ้งลูกค้าแล้วและรับทราบ
         ยังปลอดภัยเพราะวงกลมว่าง ○ → วงกลมทึบมีถูก ✓ เป็นภาษาช่องติ๊กที่อ่านออก
         โดยไม่ต้องพึ่งสี (ดูเหตุผลเต็มในข้อ 38.11)

   ข) สีสถานะ "เรียนจบแล้ว" · เปลี่ยนที่ token --ck-mint ตัวเดียว (ดูเหตุผลตรงนิยาม token)
      ไอคอนวงกลมทึบต้องวาดใหม่ด้วย เพราะสีฝังอยู่ใน SVG data URI แก้ที่ตัวแปรสีไม่ได้

   ค) ตัวสะกด · "วีดีโอ" → "วิดีโอ" ให้ตรงตามราชบัณฑิตฯ
      แก้ทั้งสองปุ่มในแถบเดียวกัน ไม่งั้นปุ่มที่ติดกันจะสะกดคนละแบบ
      ⚠️ CSS แก้ข้อความของธีมตรง ๆ ไม่ได้ ต้องยุบ font-size ของ <span> แล้ววาดคำใหม่ที่ span::after
         (ปุ่มถัดไปใช้ ::after ของตัวปุ่มเป็นลูกศรอยู่แล้ว จึงต้องไปที่ span::after ไม่ใช่ a::after)
      production: แก้ที่ไฟล์แปลของ vibe-course-module จะสะอาดกว่า · ดู TASKS-DEV */

/* ก) คำใหม่ · ยังไม่กด */
body.page-template-start .unit_prevnext a#mark-complete span::after {
  content: "เรียนวิดีโอนี้จบแล้ว";
}
/* ก) คำใหม่ · กดแล้ว */
body.page-template-start .unit_prevnext a#mark-complete:has(i.icon-check)::after {
  content: "เรียนวิดีโอนี้จบแล้ว" !important;
}

/* ข) ไอคอนวงกลมทึบเปลี่ยนเป็นเขียว #14603A ให้เข้าชุดกับพื้นและตัวอักษรใหม่ */
:root {
  --ck-ic-check-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%2314603A'/%3E%3Cpath d='M5.2 9.2l2.6 2.6L12.9 6.6' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ค) ปุ่ม "วีดีโอถัดไป" → "วิดีโอถัดไป" */
body.page-template-start .unit_prevnext a#next_unit span {
  font-size: 0 !important;
}
body.page-template-start .unit_prevnext a#next_unit span::after {
  content: "วิดีโอถัดไป";
  font-size: var(--ck-fs-body);
  font-weight: 700;
  line-height: 1.2;
}


/* ---------- 38.13 หน้ารวมคอร์สบนมือถือ = 3 คอลัมน์ (ลูกค้าเลือก 2026-08-30) ----------
   เลือกจากที่ทำเทียบไว้ 3 แบบ (1 / 2 / 3 คอลัมน์) · ตัดแบบ 1 กับ 2 ทิ้งแล้ว
   ย้ายกฎของแบบที่เลือกเข้ามาที่นี่ และลบโฟลเดอร์ mock/variants/ ออก

   ทำไม 3 คอลัมน์ถึงเหมาะกับหน้านี้: หน้านี้ไม่ใช่หน้าเลือก "คอร์ส" แต่เป็นหน้าเลือก "แพ็ก"
   ของคอร์สเดียวกัน (1M / 3M / 6M) · ดูเหตุผลเต็มในหมวด 31
   สามใบเรียงแถวเดียวจึงเทียบราคากับอายุคอร์สได้ในสายตาเดียว ไม่ต้องเลื่อนหน้าเลย
   แลกด้วยการ์ดเหลือกว้าง ~118px ซึ่งมีที่ให้แค่ ปก · ชื่อ · ราคา · ปุ่ม

   ⚠️ เปลี่ยนจาก float มาเป็น CSS Grid
      ของเดิมจัดคอลัมน์ด้วย float + width เป็น % (ธีมตั้ง 50% ที่ ≤1024px แล้วหมวด 4
      ทับเป็น calc(100% - 20px) ที่ ≤576px) float ทำให้การ์ดในแถวเดียวกันสูงไม่เท่ากัน
      grid ได้ความสูงเท่ากันทั้งแถวฟรี ๆ และคุมช่องไฟด้วย gap ที่เดียว
   ⚠️ WooCommerce ใส่ clearfix ::before/::after ไว้ที่ <ul> สำหรับ layout แบบ float
      พอ <ul> เป็น grid มันกลายเป็น "การ์ดเปล่า" สองใบกินช่องในตาราง ต้องปิดทิ้ง
   ⚠️ หน้านี้มี <ul class="products"> ซ้อนกันสองชั้น (ชั้นนอกเป็นกล่องเปล่า ชั้นในคือ
      <ul class="products columns-3"> ที่ถือ <li> จริง) ถ้าเขียน ul.products เฉย ๆ
      ชั้นนอกจะกลายเป็น grid ที่มีลูกใบเดียว แล้วการ์ดหดเหลือ 66px (วัดเจอตอนทำครั้งแรก)
      จึงต้องเจาะเฉพาะตัวที่ถือ <li> ด้วย :has(> li.product) */
@media (max-width: 576px) {
  body.theme-wplms ul.products:has(> li.product) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 10px !important;   /* ขอบข้างละ 15px รวมกับ x=5 ของ <ul> เท่าที่เหลือทั้งหน้า */
    padding: 0 !important;
    align-items: stretch;
  }
  body.theme-wplms ul.products:has(> li.product)::before,
  body.theme-wplms ul.products:has(> li.product)::after {
    content: none !important;
    display: none !important;
  }
  body.theme-wplms ul.products > li.product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    padding: 0 0 8px !important;
    display: flex;
    flex-direction: column;
  }
  /* ลิงก์การ์ด (รูป + ชื่อ + ราคา) ยืดเต็มความสูง ปุ่มจะได้ชิดล่างเสมอทุกใบ */
  body.theme-wplms ul.products > li.product > a.woocommerce-loop-product__link {
    flex: 1 1 auto;
  }
  /* รูปปกล็อกเป็นจัตุรัส · การ์ดแคบลงแล้วรูปสัดส่วนไม่ตรงกันจะทำให้แถวเหลื่อม */
  body.theme-wplms ul.products > li.product img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }
  body.theme-wplms ul.products > li.product h2.woocommerce-loop-product__title {
    font-size: var(--ck-fs-caption) !important;   /* 13px */
    line-height: 1.3 !important;
    padding: 4px 6px 0 !important;
  }
  body.theme-wplms ul.products > li.product h2.woocommerce-loop-product__title small {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  body.theme-wplms ul.products > li.product .price {
    padding: 0 6px !important;
    margin: 4px 0 6px !important;
  }
  body.theme-wplms ul.products > li.product .price ins,
  body.theme-wplms ul.products > li.product .price ins .amount,
  body.theme-wplms ul.products > li.product .price ins bdi {
    font-size: var(--ck-fs-body) !important;      /* 16px · ยังเป็นตัวใหญ่สุดในการ์ดตามข้อ 31.3 */
  }
  body.theme-wplms ul.products > li.product .price del,
  body.theme-wplms ul.products > li.product .price del .amount,
  body.theme-wplms ul.products > li.product .price del bdi {
    font-size: 11px !important;
  }
  /* กล่องข้อมูลคอร์ส: ในการ์ด 118px ป้ายกำกับ "ชั่วโมงคอร์ส" อย่างเดียวก็ยาวกว่าการ์ดแล้ว
     ⚠️ แต่ห้ามซ่อนทั้งกล่อง · เคยทำแล้วพัง: กฎข้อ 31.4 สั่ง ::before (ป้ายอายุคอร์สสำรอง)
        เป็น content:none เมื่อการ์ดมี .ck-course-stats อยู่ พอมาซ่อนกล่องอีกชั้น
        การ์ดเลยไม่เหลือข้อมูลอายุคอร์สเลยสักที่ · ซึ่งเป็น "ตัวแปรเดียวที่ต่างกันจริง"
        ระหว่าง 3 ใบ (ดูหมวด 31) เท่ากับตัดสิ่งที่หน้านี้มีไว้ให้เปรียบเทียบทิ้ง

     เก็บเฉพาะบรรทัดอายุคอร์ส แล้วตัดป้ายกำกับออกเหลือแต่ค่า ("1 เดือน")
     ทำเป็นชิพเล็ก ๆ ให้อ่านออกว่าเป็นตัวแยกแพ็ก ไม่ใช่ข้อความลอย */
  body.theme-wplms ul.products > li.product .ck-course-stats-wrap {
    padding: 0 6px !important;
    margin: 0 0 6px !important;
  }
  body.theme-wplms ul.products > li.product .ck-course-stats {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* ชั่วโมงคอร์สเท่ากันทั้ง 3 ใบ (คอร์สเดียวกัน ต่างแค่แพ็กเวลา) จึงไม่ช่วยเลือก · ตัดออก */
  body.theme-wplms ul.products > li.product .ck-course-stats li.ck-stat-duration,
  body.theme-wplms ul.products > li.product .ck-course-stats li.ck-stat-learning {
    display: none !important;
  }
  body.theme-wplms ul.products > li.product .ck-course-stats li.ck-stat-validity {
    display: block !important;
    padding: 3px 8px !important;
    margin: 0 !important;
    background: var(--ck-cream);
    border-radius: 999px;
    text-align: center;
  }
  /* ไอคอนปฏิทินหน้าบรรทัดไม่มีที่ในชิพกว้าง 106px */
  body.theme-wplms ul.products > li.product .ck-course-stats li.ck-stat-validity::before {
    display: none !important;
  }
  body.theme-wplms ul.products > li.product .ck-course-stats .ck-stat-label {
    display: none !important;
  }
  body.theme-wplms ul.products > li.product .ck-course-stats .ck-stat-value {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--ck-ink) !important;
  }
  /* ⚠️ ขนาดตัวอักษรของปุ่มต้องตั้งที่ ::after ไม่ใช่ที่ตัวปุ่ม · หมวด P6 ซ่อนคำเดิมของธีม
     ด้วย font-size:0 แล้ววาดคำว่า "สั่งซื้อ" ใหม่ด้วย ::after ถ้าตั้งที่ตัวปุ่ม
     คำเดิมจะกลับมาโผล่กลายเป็น "สั่งซื้อสั่งซื้อ" (เจอจริงตอนทำตัวเทียบ) */
  body.theme-wplms ul.products > li.product > a.add_to_cart_button.button {
    margin: 0 6px !important;
    padding: 8px 2px !important;
    width: calc(100% - 12px) !important;
    min-height: 40px;
  }
  body.theme-wplms ul.products > li.product > a.add_to_cart_button.button::after {
    font-size: var(--ck-fs-caption);
  }
}


/* ---------- 38.14 กล่องต่ออายุคอร์ส "เปิดมาถูกแล้วเพี้ยน" (ลูกค้าทัก 2026-08-30) ----------
   อาการ: กดเปิดกล่องแล้วตำแหน่งถูกอยู่แป๊บหนึ่ง จากนั้นเพี้ยนเหมือนโดนอะไรทับ

   ต้นเหตุ (จับได้ด้วยการวัดทีละเฟรมตอนกดปุ่มจริง · ไม่ใช่หน้า demo ที่เปิดค้างไว้):
   Bootstrap 3 ทำแอนิเมชันเปิดโมดัลด้วย
     .modal.fade .modal-dialog { transform: translate(0, -25%) }
   แล้วไถลลงมาเป็น translate(0,0) ตอนเติมคลาส .in
   ⚠️ **-25% คิดจากความสูงของกล่องเอง ไม่ใช่ของจอ**
   กล่องนี้สูง 1,073px → เริ่มต้นที่ -268px คือหัวกล่องอยู่เหนือจอไปไกล
   แล้วค่อย ๆ ไถลลงมาเข้าที่ (วัดได้: เฟรมแรก y=-252 → 300ms ต่อมา y=16)
   ยิ่งกล่องสูง ยิ่งเริ่มไกล · บนเครื่องจริงที่ช้ากว่านี้จึงเห็นเป็น "เพี้ยนอยู่ 1-2 วิ"
   (บนหน้า demo 11b ไม่เจอ เพราะกล่องเปิดค้างไว้ตั้งแต่โหลด ไม่ได้ผ่านแอนิเมชันนี้)

   แก้: ให้ระยะไถล "คงที่" ไม่ผูกกับความสูงกล่อง · 16px พอให้รู้สึกว่ามีการเคลื่อนไหว
   และไม่มีทางหลุดออกนอกจอไม่ว่ากล่องจะสูงแค่ไหน
   ⚠️ ต้องประกาศ transform ทั้งสถานะปิดและสถานะ .in ให้ครบ ไม่งั้นค่า -25% ของ Bootstrap
      จะยังชนะในสถานะใดสถานะหนึ่ง */
body.theme-wplms #ContinueCourseModal.fade .modal-dialog {
  transform: translateY(-16px) !important;
  transition: transform .22s ease-out !important;
}
body.theme-wplms #ContinueCourseModal.fade.in .modal-dialog {
  transform: translateY(0) !important;
}


/* ---------- 38.15 navbar ตกบรรทัดบนแท็บเล็ต (ลูกค้าทัก 2026-08-30) ----------
   กติกา: navbar ต้องเป็นบรรทัดเดียวเสมอ ทุกความกว้างจอ

   วัดทุกความกว้าง 600–1440 แล้วเจอช่วงที่พัง = **1024–1199px** (แท็บเล็ตแนวนอน)
     ≤991px   ส่วนหัวชุดมือถือ (โลโก้ + แฮมเบอร์เกอร์) สูง 76px · บรรทัดเดียว ✅
     1024px   สูง 152px ❌ เมนูตกสองบรรทัด
     ≥1200px  สูง 82px · บรรทัดเดียว ✅

   ⚠️ ตัวแก้จริงอยู่ในหมวด 2 (บล็อก @media 992–1360px) ไม่ได้อยู่ตรงนี้
      เพราะบล็อกนั้นเขียนไว้เพื่อเรื่องนี้อยู่แล้ว และมี specificity สูงกว่า
      (.theme-wplms header.sleek nav .menu > li > a = 0,3,4)
      ถ้าเขียนกฎใหม่ตรงนี้ด้วย selector ที่สั้นกว่า จะแพ้บล็อกนั้นแล้วไม่มีผลอะไรเลย
 · ลองมาแล้วครั้งหนึ่ง กฎไม่ติด เมนูยังต้องการ 587px เท่าเดิม

   ที่เหลือไว้ตรงนี้คือ "กันชน" เผื่ออนาคตมีเมนูเพิ่มจนล้นจริง
   ให้มันล้นออกข้างแทนที่จะดันส่วนหัวสูงเป็นสองเท่า (ซึ่งพังทั้งหน้า)
   ⚠️ ต้องคืน white-space ให้เมนูย่อยที่กางลงมา ไม่งั้นข้อความยาว ๆ ในนั้นจะไม่ตัดบรรทัด */
@media (min-width: 992px) {
  body.theme-wplms header nav > ul.menu,
  body.theme-wplms header nav > .menu {
    white-space: nowrap;
  }
  body.theme-wplms header nav ul.menu ul,
  body.theme-wplms header nav .menu .sub-menu {
    white-space: normal;
  }
}


/* ---------- 38.16 วงกลมตัวเลือกอายุคอร์สไม่ตรงกับตัวหนังสือ (ลูกค้าทัก 2026-09-03) ----------
   อาการ: ในกล่องต่ออายุ วงกลมของแต่ละตัวเลือกลอยสูงกว่าบรรทัดข้อความ ~12px

   ⚠️ ต้นเหตุที่หาเจอยาก: **วงกลมที่เห็นไม่ใช่ <input type="radio">**
      Ninja Forms ซ่อน input จริงไว้ด้วย opacity:0 (วัดได้) แล้ววาดวงกลมเองด้วย
        label::after  = วงแหวน 18×18 · position:absolute · top:0.8px · left:-30px
        label::before = จุดตรงกลาง 10×10 · absolute · top:4px · left:-26px  (เฉพาะตัวที่เลือก)
      ทั้งคู่ปักไว้ "ชิดบน" ของ <label> ที่สูง 44px
      → จุดกึ่งกลางวงแหวนอยู่ที่ 0.8 + 9 = 9.8px จากขอบบน ขณะที่กึ่งกลางป้ายอยู่ที่ 22px
      = เยื้องขึ้น 12.2px (วัดจากพิกเซลจริงได้ 11.75px — ตรงกัน)

      กฎในข้อ 36.3 ที่ตั้ง width/height/accent-color ให้ input จึงไม่มีผลกับสิ่งที่ตาเห็นเลย
      เพราะไปแต่งตัวที่ถูกซ่อนอยู่ (แต่ยังต้องเก็บไว้ เผื่อวันหนึ่งปลั๊กอินเลิกซ่อน input)
      นี่คือเหตุผลที่วัดด้วย getBoundingClientRect แล้วได้ "กึ่งกลางพอดี" ทุกตัว
      ทั้งที่ภาพที่เห็นไม่ตรง — กล่องตรง แต่หมึกที่วาดไม่ตรง

   แก้: จับวงแหวนกับจุดให้อยู่กึ่งกลางแนวตั้งของป้าย
   ไม่แตะ left เพื่อให้ตำแหน่งแนวนอนเหมือนเดิมเป๊ะ */
body.theme-wplms #ContinueCourseModal .listradio-wrap li label::after,
body.theme-wplms #ContinueCourseModal .listradio-wrap li label::before {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* วงแหวนของตัวเลือกที่ "ยังไม่เลือก" — ปลั๊กอินใช้เทา #C4C4C4 บนพื้นขาว = contrast 1.74
   ต่ำกว่าเกณฑ์ 3:1 ของ form control อยู่มาก (เกือบมองไม่เห็นบนจอสว่างหรือกลางแดด)
   และเป็นสีที่ไม่ได้อยู่ในพาเลตต์แบรนด์ — เปลี่ยนเป็น token ที่มีอยู่แล้ว
   --ck-ink-60 ผสมบนขาวได้ ≈ #6B6B6B = 5.33 บนขาว · 5.07 บนพื้นการ์ดที่เลือก #FFF9E8
   ยังต่างจากตัวที่เลือกอยู่ชัด (ตัวที่เลือกเป็นหมึกเต็ม #222 = 15.91 + มีจุดตรงกลาง + พื้นเหลือง) */
body.theme-wplms #ContinueCourseModal .listradio-wrap li label::after {
  border-color: var(--ck-ink-60) !important;
  background: #fff !important;
}
/* ตัวที่เลือกอยู่: ปลั๊กอินใช้ #333 ซึ่งไม่อยู่ในพาเลตต์ — ใช้หมึกของระบบแทน */
body.theme-wplms #ContinueCourseModal .listradio-wrap li:has(input:checked) label::after {
  border-color: var(--ck-ink) !important;
}
body.theme-wplms #ContinueCourseModal .listradio-wrap li label::before {
  background: var(--ck-ink) !important;
}

/* ============================================================
   39. ราคาที่ไม่ได้ลด ตัวเล็กกว่าราคาที่ลด (ลูกค้าแจ้ง 2026-09-05)
   ============================================================
   วัดบนเว็บจริง
     /courses/mn68-6m/  ลดราคา    ราคาหลัก 32px
     /courses/n68-6m/   ราคาปกติ  ราคาหลัก 16px   ← ครึ่งเดียว

   สาเหตุ: WooCommerce พิมพ์ราคาคนละโครงตามสถานะ
     ลดราคา    <p class="price"><del>…</del><ins><span class="amount">…</span></ins></p>
     ราคาปกติ  <p class="price"><span class="amount">…</span></p>
   กฎขนาดของข้อ P1 (บรรทัด 1137) เกาะ ins อย่างเดียว ราคาปกติจึงไม่โดนกฎไหนเลย
   เหลือขนาดที่สืบทอดจาก body คือ 16px (ตรวจแล้วไม่มี rule ไหนตั้ง font-size ให้)
   ส่วนกฎ "สี" บรรทัด 503-504 ครอบทั้งสองแบบอยู่แล้ว ราคาปกติจึงได้สีถูกแต่ขนาดผิด
   ผลคือพอคอร์สไหนไม่มีโปร ราคาจะดูเล็กลงเฉยๆ ทั้งที่ควรเด่นเท่ากัน

   หน้ารวมคอร์สไม่เจอปัญหานี้ เพราะข้อ 31.3 ตั้ง font-size ไว้ที่ตัวกล่อง .price
   (บรรทัด 6167) ขนาดจึงตกถึงลูกทุกแบบ

   ที่นี่เลือกแก้แบบเจาะจงแทนการย้ายไปตั้งที่กล่อง จะได้ไม่แตะเคสลดราคาที่ถูกอยู่แล้ว
   ใช้ > (ลูกโดยตรง) เพราะเวลาลดราคา .amount ถูกห่อไว้ใน del/ins ไม่ใช่ลูกตรงของ
   p.price กฎนี้จึงจับเฉพาะเคสราคาปกติเท่านั้น ไม่ต้องใช้ !important
   ------------------------------------------------------------ */
body.theme-wplms.single-product .summary p.price > .woocommerce-Price-amount,
body.theme-wplms.single-product .summary p.price > .woocommerce-Price-amount bdi {
  font-size: var(--ck-fs-price);
  font-weight: 700;
  line-height: 1.1;
}

/* มือถือ: ตามสเกลแถบ CTA ล่างจอ · ข้อ P2 (บรรทัด 1321) ตั้ง ins ไว้ 28px */
@media (max-width: 700px) {
  body.theme-wplms.single-product .summary p.price > .woocommerce-Price-amount,
  body.theme-wplms.single-product .summary p.price > .woocommerce-Price-amount bdi {
    font-size: 28px;
  }
}

/* ============================================================
   40. mini cart ใน widget แถบข้าง (ลูกค้าแจ้ง 2026-09-05)
   ============================================================
   หน้าสินค้าเดี่ยวมี .woocart สองตัว ไม่ใช่ตัวเดียว
     1) ใน header  .topmenu li .woocart   dropdown จากไอคอนตะกร้า · ข้อ 33 จัดให้แล้ว
     2) ใน sidebar .widget .woocart       widget ตะกร้าของ WooCommerce · ยังไม่เคยโดนจัด

   selector ทุกตัวในข้อ 33 ล็อกไว้ที่ .topmenu li ตัวที่สองจึงไม่โดนสักกฎ
   ยังเป็นพื้นเหลืองของธีม ยอดรวมสีแดง และปุ่มสองตัวเหลื่อมกันเป็นขั้นบันได
   ซึ่งคือปัญหาชุดเดียวกับที่ข้อ 33 แก้ไปแล้วทุกข้อ

   ทำไมรอบออกแบบไม่เห็น: widget ตัวนี้อยู่ในกล่อง .hide_cart_widget_if_empty
   มันโผล่เฉพาะตอนตะกร้ามีของ · ตอนเก็บ HTML ทำ mock ตะกร้าว่าง จึงไม่มีในหน้าเทียบเลย

   ข้างล่างคือกฎชุดเดียวกับข้อ 33 เป๊ะ ๆ ต่างแค่ prefix (.topmenu li → .widget)
   และความกว้าง ตัดเฉพาะกฎที่เจาะ header.sleek ทิ้ง เพราะ widget ไม่ได้อยู่ใน header
   ⚠️ ถ้าแก้หน้าตา mini cart ในข้อ 33 ต้องตามมาแก้ที่นี่ด้วย ไม่งั้นสองที่จะหน้าตาไม่ตรงกัน
   ------------------------------------------------------------ */
body.theme-wplms .widget .woocart {
  background: #fff !important;
  width: auto !important;   /* 320px เป็นค่าของ dropdown · widget กว้างตามแถบข้าง */
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: var(--ck-sh-soft) !important;
  padding: var(--ck-sp-1) !important;
  overflow: hidden;
}
body.theme-wplms .widget .woocart .widget_shopping_cart,
body.theme-wplms .widget .woocart .widget_shopping_cart_content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__empty-message {
  margin: 0 !important;
  padding: var(--ck-sp-3) var(--ck-sp-2) var(--ck-sp-2) !important;
  text-align: center;
  font-size: var(--ck-fs-body) !important;
  color: var(--ck-ink-60) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23222222' stroke-width='1.6' opacity='.28' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4.5 8h15l-1.3 11a2 2 0 0 1-2 1.8H7.8a2 2 0 0 1-2-1.8Z'/%3E%3Cpath d='M8.6 8V6.2a3.4 3.4 0 0 1 6.8 0V8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center var(--ck-sp-2) / 40px 40px;
  padding-top: 76px !important;
}
body.theme-wplms .widget .woocart ul.woocommerce-mini-cart {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.theme-wplms .widget .woocart li.mini_cart_item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: var(--ck-sp-1);
  margin: 0 0 var(--ck-sp-1) !important;
  padding: var(--ck-sp-1) !important;
  border: 0 !important;
  border-radius: 14px;
  background: var(--ck-cream);
  font-size: var(--ck-fs-body) !important;
}
body.theme-wplms .widget .woocart li.mini_cart_item > a:not(.remove) {
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
  align-items: center;
  gap: var(--ck-sp-1);
  min-height: 44px;
  font-size: var(--ck-fs-body) !important;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ck-ink) !important;
}
body.theme-wplms .widget .woocart li.mini_cart_item > a:not(.remove) img {
  float: none !important;
  flex: none;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 10px;
}
body.theme-wplms .widget .woocart li.mini_cart_item .quantity {
  grid-column: 1;
  grid-row: 2;
  display: block !important;
  padding-left: calc(44px + var(--ck-sp-1));
  font-size: var(--ck-fs-caption) !important;
  color: var(--ck-ink-60) !important;
}
body.theme-wplms .widget .woocart li.mini_cart_item .quantity .amount,
body.theme-wplms .widget .woocart li.mini_cart_item .quantity bdi,
body.theme-wplms .widget .woocart li.mini_cart_item .quantity .woocommerce-Price-currencySymbol {
  color: var(--ck-price) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.theme-wplms .widget .woocart li.mini_cart_item a.remove {
  grid-column: 2;
  grid-row: 1 / span 2;
  float: none !important;
  width: 28px;
  height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--ck-ink-60) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
body.theme-wplms .widget .woocart li.mini_cart_item a.remove:hover {
  background: var(--ck-red);
  color: #fff !important;
}
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__total {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ck-sp-2);
  margin: 0 !important;
  padding: var(--ck-sp-2) var(--ck-sp-1) !important;
  border-top: 1px solid var(--ck-ink-10);
  
  border-bottom: 0 !important;
  font-size: var(--ck-fs-body) !important;
}
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__total strong {
  font-weight: 600;
  color: var(--ck-ink-60) !important;
}
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__total .amount,
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__total bdi,
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__total .woocommerce-Price-currencySymbol {
  float: none !important;
  color: var(--ck-price) !important;
  font-size: 20px !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__buttons {
  display: flex !important;
  flex-direction: column;
  gap: var(--ck-sp-1);
  margin: 0 !important;
  
  background: transparent !important;
  padding: 0 var(--ck-sp-1) var(--ck-sp-1) !important;
}
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__buttons .button {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px var(--ck-sp-2) !important;
  min-height: 44px;
  background: #fff !important;
  color: var(--ck-ink) !important;
  border: 2px solid var(--ck-ink-10) !important;
  box-shadow: none !important;
}
body.theme-wplms .widget .woocart p.woocommerce-mini-cart__buttons .button.checkout {
  background: var(--ck-yellow) !important;
  color: var(--ck-ink) !important;
  border: 0 !important;
  box-shadow: var(--ck-sh-sticker) !important;
}

/* ---------- 40.1 ตะกร้าว่าง: ซ่อนทั้ง widget ----------
   ผลข้างเคียงจากข้อ 40 เอง · พอให้ .woocart เป็นการ์ดขาว (พื้น + padding + มุมมน + เงา)
   เวลาตะกร้าว่างมันจะกลายเป็น "กล่องขาวเปล่า ๆ" ลอยอยู่หัวแถบข้าง
   เพราะ WooCommerce ไม่ได้ถอด element ทิ้ง แค่ไม่พิมพ์รายการข้างในเท่านั้น
   (วัดแล้ว: display:block · innerText ว่าง · ไม่มี li.mini_cart_item สักตัว)
   ก่อนข้อ 40 มองไม่เห็นเพราะกล่องไม่มีพื้นหลัง

   เช็ค "ว่าง" จากการไม่มี li.mini_cart_item ซึ่งเป็นตัวเดียวที่บอกได้จริง
   ธีมไม่ได้เติมคลาสบอกสถานะว่าง และตอนว่างก็ไม่มี p.woocommerce-mini-cart__empty-message ด้วย

   ซ่อนที่ตัว .widget ด้วย ไม่ใช่แค่ .woocart เพื่อไม่ให้เหลือช่องไฟของ widget ค้างไว้
   :has(> .woocart) กันไม่ให้ไปโดน widget อื่นในแถบข้าง (หน้านี้มีอีก 6 ตัว)
   ⚠️ เขียน :has() สองตัวแยกกัน ห้ามซ้อนใน :has() เดียวกัน CSS ไม่อนุญาต
   ตรวจกับ DOM จริงแล้ว: ตะกร้าว่างจับได้ 1 · มีของจับได้ 0
   ถ้าเบราว์เซอร์เก่าไม่รองรับ :has() จะกลับไปเห็นกล่องเปล่าเหมือนเดิม ไม่ได้แย่ลงกว่าเดิม */
body.theme-wplms .widget .woocart:not(:has(li.mini_cart_item)) {
  display: none !important;
}
body.theme-wplms .widget:not(:has(li.mini_cart_item)):has(> .woocart) {
  display: none !important;
}

/* ============================================================
   41. ปุ่ม "สั่งซื้อ" · คืน ::after ให้ spinner ของ WooCommerce (ลูกค้าแจ้ง 2026-09-06)
   ============================================================
   อาการที่ลูกค้าเจอ: กดปุ่มแล้วคำว่า "สั่งซื้อ" เปลี่ยนฟอนต์และหมุนเป็นวงกลม

   สาเหตุ: ข้อ 23 พิมพ์ label ด้วย ::after (ซ่อนข้อความจริงด้วย font-size:0)
   แต่ ::after เป็นที่ที่ WooCommerce ใช้วาด spinner ตอนโหลดพอดี
     woocommerce.min.css
     .woocommerce button.button.loading::after {
       content:"\f110"; font-family:fontawesome; animation:2s linear infinite spin; }
   พอกดปุ่ม WooCommerce เติมคลาส .loading แล้วสามค่านั้นลงที่ ::after ตัวเดียวกัน
     content      ของเราชนะ (0,4,2 vs 0,3,1) คำว่า "สั่งซื้อ" จึงยังอยู่
     font-family  ไม่มีใครแย่ง → ตัวอักษรไทยถูกบังคับใช้ฟอนต์ไอคอน = ฟอนต์เพี้ยน
     animation    ไม่มีใครแย่ง → ข้อความหมุนแทนที่จะเป็นไอคอนหมุน

   ทางแก้: เลิกใช้ ::after พิมพ์ label ทั้งสองปุ่ม
   ตรวจ DOM จริงแล้วข้อความจริงในปุ่มเป็น "สั่งซื้อ" อยู่แล้วทั้งหน้าสินค้าเดี่ยวและหน้ารวมคอร์ส
   กฎในข้อ 23 จึงพิมพ์คำเดิมซ้ำโดยไม่จำเป็น (บน mock คำแปลอาจต่าง แต่บนเว็บจริงตรงแล้ว)
   ตรงกับที่ข้อ 23 เขียนเตือนไว้เองว่า "ตอนขึ้นจริงต้องแก้ที่ข้อความจริง ไม่ใช่ CSS"

   คืน font-size ให้เท่าที่ ::after เคยใช้ ขนาดปุ่มจึงไม่ขยับ (ข้อความเดิม ฟอนต์เดิม ขนาดเดิม)
   ตัด ::after เฉพาะตอนไม่ได้โหลด · :not(.loading) สำคัญมาก ถ้าตัดทิ้งหมด
   spinner ของ WooCommerce จะโดนดับไปด้วยเพราะกฎเราจะ specificity สูงกว่า
   ------------------------------------------------------------ */
body.theme-wplms button.single_add_to_cart_button.button.alt {
  font-size: var(--ck-fs-title) !important;
}
body.theme-wplms ul.products li.product a.add_to_cart_button.button {
  font-size: var(--ck-fs-body) !important;
}
body.theme-wplms button.single_add_to_cart_button.button.alt:not(.loading)::after,
body.theme-wplms ul.products li.product a.add_to_cart_button.button:not(.loading)::after {
  content: none;
}

/* ---------- 41.1 คืน spinner ตอนกำลังโหลด ----------
   :not(.loading) ข้างบนอย่างเดียวยังไม่พอ · กฎ label ของข้อ 23 ไม่มี :not(.loading)
   มันจึงยังทำงานตอนโหลดและชนะ WooCommerce อยู่ดี (0,4,2 กับ 0,3,1)
   ผลคือ ::after ยังพิมพ์คำว่า "สั่งซื้อ" ทับ spinner = ไอคอนไม่มีทางโผล่
   ต้องเขียนทับด้วย .loading ตรง ๆ ให้ specificity สูงกว่าข้อ 23 (0,5,2)

   ค่าที่ใช้อ่านมาจาก woocommerce.min.css ของจริงบนเว็บ
     content \f110 · font-family fontawesome · animation spin 2s linear infinite
   ตรวจแล้ว: family "FontAwesome" โหลดอยู่จริง (glyph กว้าง 16px เทียบ fallback 8.8px)
   และ @keyframes spin มีอยู่แล้วใน style.min.css ของธีม ไม่ต้องประกาศใหม่

   ต่างจากของ WooCommerce สองจุด
   - จัดกลางแนวตั้งด้วย top:50% แทน top:0.618em ซึ่งเดาความสูงปุ่มไว้ตายตัว
     ปุ่มของงานนี้สูงกว่าปุ่มมาตรฐาน (ทรงเม็ดยา) ไอคอนจะลอยไปติดขอบบน
   - บังคับ padding-right กลับ เพราะปุ่มในงานนี้ตั้ง padding ไว้เอง
     ถ้าไม่ดันที่ว่างด้านขวา ไอคอนจะไปทับตัวอักษร */
body.theme-wplms button.single_add_to_cart_button.button.alt.loading,
body.theme-wplms ul.products li.product a.add_to_cart_button.button.loading {
  position: relative;
  padding-right: 2.618em !important;
}
body.theme-wplms button.single_add_to_cart_button.button.alt.loading::after,
body.theme-wplms ul.products li.product a.add_to_cart_button.button.loading::after {
  content: "\f110";
  font-family: 'FontAwesome';
  font-weight: 400;
  font-size: var(--ck-fs-body);
  line-height: 1;
  position: absolute;
  right: 1em;
  top: 50%;
  margin-top: -0.5em;
  animation: spin 2s linear infinite;
}

/* ============================================================
   42. เมนูโปรไฟล์ที่ห้อยจากรูปตัวเอง (ลูกค้าแจ้ง 2026-09-06)
   ============================================================
   โครงจากธีม (templates/login/pop_login.php)
     #vibe_bp_login.pop_login > #sidebar-me
       #bpavatar > img
       ul ตัวที่ 1  li#username · View profile · li#vbplogout · li#admin_panel_icon
       ul ตัวที่ 2  คอร์สเรียนของฉัน · ประวัติการเรียน

   ข้อ 34 แตะแค่ .popup_login ซึ่งเป็นกล่อง "เข้าสู่ระบบ" ตอนยังไม่ล็อกอิน
   กล่องนี้เป็นคนละตัว ไม่เคยมีกฎไหนแตะ

   ปัญหาจริงคือ layout ไม่ใช่สี · วัดของเดิมตอนเปิดเมนูได้ว่า
     กล่องกว้าง 240px → เนื้อที่ 224px
     #bpavatar float:left  80px
     ul ตัวแรก  float:right 146px
     80 + 146 = 226px > 224px  →  ul ตกไปอยู่ใต้รูป (y ของ ul = ขอบล่างรูปพอดี)
   ชื่อกับลิงก์จึงไม่ได้อยู่ข้างรูปอย่างที่ตั้งใจ · #sidebar-me สูง 0 เพราะไม่ได้ clear float
   และ li#admin_panel_icon เป็น position:absolute ลอยทับของอื่น
   ระบบนี้พังอยู่แต่เดิม พื้นเข้มของธีมแค่กลบไว้ · พอเปลี่ยนเป็นพื้นอ่อนเลยเห็นชัด

   จึงเลิกใช้ float แล้ววางใหม่ด้วย grid 2 คอลัมน์ ซึ่งไม่ขึ้นกับความกว้างที่เหลือ
     แถว 1   [รูป]  [ชื่อ + View profile + LOGOUT]
     แถว 2   เมนูหลัก เต็มความกว้าง
   ไอคอนเฟืองย้ายไปมุมขวาบนของการ์ด (ยังเป็น absolute แต่ยึดกับกล่อง ไม่ลอยทับข้อความ)

   หน้าตาการ์ดใช้ชุดเดียวกับ dropdown เมนูหลัก (ข้อ 2) และตะกร้าจิ๋ว (ข้อ 33)
   ขาว 18px + --ck-sh-soft · แถวเมนู hover เหลืองทรงเม็ดยาเหมือนเมนูบน navbar
   ------------------------------------------------------------ */
body.theme-wplms #vibe_bp_login.pop_login {
  width: 260px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: var(--ck-sh-soft) !important;
  padding: var(--ck-sp-2) !important;
}

/* ---------- 42.1 เลิก float · วางด้วย grid ---------- */
body.theme-wplms #vibe_bp_login #sidebar-me {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--ck-sp-1);
  row-gap: var(--ck-sp-1);
}
body.theme-wplms #vibe_bp_login #sidebar-me #bpavatar {
  grid-column: 1;
  grid-row: 1;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.theme-wplms #vibe_bp_login #sidebar-me #bpavatar img {
  display: block;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 2px solid var(--ck-cream);
}

/* ---------- 42.2 บล็อกข้อมูลตัวเอง ---------- */
body.theme-wplms #vibe_bp_login #sidebar-me > ul:first-of-type {
  grid-column: 2;
  grid-row: 1;
  float: none !important;
  width: auto !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.theme-wplms #vibe_bp_login #sidebar-me > ul:first-of-type li {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}
body.theme-wplms #vibe_bp_login #sidebar-me li#username a {
  display: block;
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 700 !important;
  line-height: 1.3;
}
body.theme-wplms #vibe_bp_login #sidebar-me > ul:first-of-type li:not(#username) a {
  display: inline-block;
  color: var(--ck-ink-60) !important;
  font-size: var(--ck-fs-caption) !important;
  line-height: 1.6;
  text-transform: none;
}
body.theme-wplms #vibe_bp_login #sidebar-me > ul:first-of-type li a:hover {
  color: var(--ck-ink) !important;
}
/* เฟืองเข้าหลังบ้าน: มุมขวาบนของการ์ด · ยึดกับ #vibe_bp_login ซึ่ง position:absolute อยู่แล้ว */
body.theme-wplms #vibe_bp_login #sidebar-me li#admin_panel_icon {
  position: absolute !important;
  top: var(--ck-sp-1);
  right: var(--ck-sp-1);
  width: auto !important;
}
body.theme-wplms #vibe_bp_login #sidebar-me li#admin_panel_icon a {
  color: var(--ck-ink-40) !important;
  font-size: var(--ck-fs-caption) !important;
}

/* ---------- 42.3 เมนูหลัก เต็มความกว้าง ---------- */
body.theme-wplms #vibe_bp_login #sidebar-me > ul:last-of-type {
  grid-column: 1 / -1;
  grid-row: 2;
  float: none !important;
  width: auto !important;
  background: transparent !important;
  margin: 0 !important;
  padding: var(--ck-sp-1) 0 0 !important;
  border-top: 1px solid var(--ck-ink-10);
  list-style: none !important;
}
body.theme-wplms #vibe_bp_login #sidebar-me > ul:last-of-type li {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}
body.theme-wplms #vibe_bp_login #sidebar-me > ul:last-of-type li a {
  display: flex !important;
  align-items: center;
  gap: var(--ck-sp-1);
  min-height: 44px;
  padding: 0 var(--ck-sp-1) !important;
  border-radius: 999px;
  color: var(--ck-ink) !important;
  font-size: var(--ck-fs-body) !important;
  font-weight: 600;
  transition: background .15s;
}
body.theme-wplms #vibe_bp_login #sidebar-me > ul:last-of-type li a:hover {
  background: var(--ck-yellow);
  color: var(--ck-ink) !important;
}