/* assets/css/nhf/yeekee-card.css — R132 การ์ดยี่กีสดที่ช่องแบนเนอร์หน้าแรก (มือถือ) — docs/task/84 ; new-mgmt docs/front/YEEKEE/01-spec.md §0 B
   เสิร์ฟผ่าน /_css/<NHF_CSS_VER>/yeekee-card.css (utils/nhf-css.ts) — โหลดจาก components/nhf/YeekeeCard.vue เฉพาะหน้าแรกที่มีการ์ด ; โหลดหลัง theme-override.css (token --nhf-* ของมัน)
   - โทนเดิมของ .card-main (theme-override.css §6): พื้นดำ-แดงไล่สี ขอบแดง var(--nhf-red) มุม var(--nhf-r) ตัวหนังสือขาว ตัวเลขทอง var(--nhf-gold) ปุ่มแดง var(--nhf-red-hi)→var(--nhf-red) — ไม่มีสีใหม่
   - กติกาคนแก่: ตัวอักษร ≥ 17 px · เลขรอบ 20 px · นาฬิกา 28 px tabular · ทั้งใบเป็นลิงก์ (สูง ≥ 48 px) + ปุ่ม 56 px · ไม่มี animation (เปลี่ยนเฉพาะตัวเลขนาฬิกา)
   - แถวนี้ d-lg-none อยู่แล้ว (จอ ≥ 992 px ไม่แสดง) — PC เหมือนเดิม ; ระยะเท่าช่องป้าย (#section-content .row.p-1.d-block.d-lg-none > .col-12 — margin-top 8 px padding 0)
   - R132b (เจ้าของ 2026-10-20 07:1x — docs/task/84 §7): แถบข้อเสนอคืนทุนโพยแรก .nhf-yk__offer = เม็ดยาทองเต็มแถวเหนือปุ่ม — ไล่สีทอง token เดิม var(--nhf-gold)→var(--nhf-gold-deep) (theme-override.css :root)
     ตัวหนังสือ var(--nhf-red-ink) · ไอคอนของขวัญขาวบนวงแดง var(--nhf-red) · หัวเรื่อง 18 px หนา · note 15 px · สูง ≥ 48 px · ไม่มี animation ; [hidden] = ซ่อน (yeekee-live.js ซ่อนเมื่อ server เลิกส่ง offer)
     บรรทัดผู้ถูก .nhf-yk__winners ถอดออก (เจ้าของ 2026-10-20 07:3x)
   - R141 (new-mgmt D159 — docs/task/90): ลิงก์ "กติกา" .nhf-yk__rules ใต้ note — 17 px หนา ขีดเส้นใต้ สี var(--nhf-red-ink) เดิมของแถบ · จุดกด ≥ 44 px (margin ลบดึงให้แถบไม่สูงขึ้นเกินบรรทัดเดียว) ·
     ไม่มีสีใหม่ ไม่มี animation ; [hidden] = ซ่อน (yeekee-live.js ซ่อนเมื่อ server เลิกส่ง rules) ; แผ่นกติกาเอง (.nhf-ykr) อยู่ใน yeekee-rules.js (CSS ฝังแบบ .nhf-ykp — ใช้ได้ทุกหน้าที่เปิดแผ่น)
   - R147 (ทีมทดสอบ 2026-10-20 ข้อ 5 — docs/task/93): การ์ดใบที่สองบน PC .nhf-ykd (components/nhf/YeekeeCardDesktop.vue — ชิ้นส่วน/คลาสเดิมทั้งหมด จัดเป็น CSS grid) ท้ายไฟล์:
     < 992 px ซ่อน (การ์ดมือถือข้างบนแสดงแทน) · ธีม default `.nhf-ykd--half` = ลูกคนสุดท้ายของแถวใบเมนู กินที่ว่างของแถวสอง (flex 1 1 50 %) และแถวเมนูเป็น align-items:flex-start ให้ใบเมนูข้าง ๆ สูงเท่าเดิม 108 px
     (ไฟล์นี้โหลดเฉพาะหน้าที่มีการ์ด — กฎนี้จึงไม่แตะหน้าแรกที่ไม่มีการ์ด) · โครง S (หัว / นาฬิกา+ปุ่ม / ผล / แถบ ≈ 205 px) เมื่อการ์ดกว้าง < 860 px · โครง W (สด | แถบ | ปุ่ม ≈ 130 px) ผ่าน @container ≥ 860 px และธีม red `.nhf-ykd--wide`
     = แถบเต็มกว้างใต้ป้าย "สล็อต / เกม / คาสิโน" ปุ่ม 200 px · ตัว ≥ 17 px · ปุ่ม/แถบ ≥ 48 px · token/สีเดิมล้วน ไม่มี animation */
#section-content .row.p-1.d-block.d-lg-none > .col-12.nhf-yk,
.nhf-yk {
  padding: 0 !important;
  margin: 8px 0 0 !important;
}
.nhf-yk__card,
.nhf-yk__card:hover,
.nhf-yk__card:focus {
  display: block;
  position: relative;
  box-sizing: border-box;
  min-height: 48px;
  padding: 14px 16px 16px;
  border-radius: var(--nhf-r, 12px);
  border: 1px solid var(--nhf-red, #b90504);
  background: linear-gradient(135deg, rgba(150, 3, 3, .78), rgba(70, 0, 0, .82)), #111;
  box-shadow: var(--nhf-shadow-2, 0 8px 24px rgba(0, 0, 0, .14)), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #fff;
  text-decoration: none;
  font-family: var(--nhf-font-body, 'NotosansThai', 'Mitr', sans-serif);
  font-size: 17px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.nhf-yk__card:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.nhf-yk .af-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.nhf-yk__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.nhf-yk__brand { font-size: 17px; font-weight: 700; color: var(--nhf-gold, #f2c14e); }
.nhf-yk__brand i { color: var(--nhf-gold, #f2c14e); margin-right: 2px; }
.nhf-yk__round { font-size: 20px; font-weight: 700; color: #fff; }
.nhf-yk__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--nhf-r-pill, 999px);
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.nhf-yk__status i { font-size: 10px; color: var(--nhf-green, #1f9d55); }
.nhf-yk__status.is-closing i { color: var(--nhf-amber, #f6c445); }
.nhf-yk__status.is-upcoming i, .nhf-yk__status.is-none i { color: rgba(255, 255, 255, .55); }
.nhf-yk__card.is-closed .nhf-yk__status i { color: var(--nhf-red-hi, #d21414); }
.nhf-yk__time {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
}
.nhf-yk__timelabel { font-size: 17px; color: rgba(255, 255, 255, .85); }
.nhf-yk__timelabel:empty { display: none; }
.nhf-yk__cd { font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--nhf-gold, #f2c14e); letter-spacing: .5px; }
.nhf-yk__cd b { font-weight: 700; }
.nhf-yk__cd--text { font-size: 20px; }
.nhf-yk__cd:empty { display: none; }
.nhf-yk__close { margin-left: auto; font-size: 17px; color: rgba(255, 255, 255, .85); }
.nhf-yk__close:empty { display: none; }
.nhf-yk__last {
  margin-top: 8px;
  font-size: 17px;
  color: rgba(255, 255, 255, .85);
}
.nhf-yk__last b { font-size: 20px; font-weight: 700; color: #fff; }
.nhf-yk__last[hidden] { display: none !important; }
/* R132b แถบข้อเสนอคืนทุนโพยแรก — เม็ดยาทองเต็มแถว (อยู่ใน <a> ของการ์ด = กดได้ทั้งแถบ) */
.nhf-yk__offer {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  padding: 10px 24px 10px 12px;
  border-radius: var(--nhf-r-pill, 999px);
  background: linear-gradient(180deg, var(--nhf-gold, #f2c14e), var(--nhf-gold-deep, #c9971a));
  box-shadow: 0 8px 20px rgba(201, 151, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
  color: var(--nhf-red-ink, #500202);
  text-align: left;
}
.nhf-yk__offer[hidden] { display: none !important; }
.nhf-yk__offer-ic {
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nhf-red, #b90504);
  box-shadow: 0 4px 10px rgba(80, 2, 2, .3);
  color: #fff;
  font-size: 19px;
}
.nhf-yk__offer-text { display: block; min-width: 0; flex: 1 1 auto; }
.nhf-yk__offer-head {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--nhf-red-ink, #500202);
  overflow-wrap: anywhere;
}
.nhf-yk__offer-note {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--nhf-red-ink, #500202);
  opacity: .85;
  overflow-wrap: anywhere;
}
.nhf-yk__offer-note[hidden] { display: none !important; }
/* R141 ลิงก์ "กติกา" ใต้ note — เปิด bottom sheet (yeekee-live.js) ; margin ลบ = จุดกด 44 px โดยแถบสูงขึ้นแค่บรรทัดเดียว */
.nhf-yk__rules {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  margin: -8px 0 -10px;
  padding: 0 12px 0 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--nhf-red-ink, #500202);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nhf-yk__rules:focus-visible { outline: 3px solid var(--nhf-red, #b90504); outline-offset: 2px; border-radius: 6px; }
.nhf-yk__rules[hidden] { display: none !important; }
.nhf-yk__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 56px;
  margin-top: 12px;
  border-radius: var(--nhf-r, 12px);
  background: linear-gradient(180deg, var(--nhf-red-hi, #d21414), var(--nhf-red, #b90504));
  box-shadow: 0 10px 24px rgba(185, 5, 4, .45);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.nhf-yk__card.is-upcoming .nhf-yk__btn,
.nhf-yk__card.is-none .nhf-yk__btn,
.nhf-yk__card.is-closed .nhf-yk__btn {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: none;
}
.nhf-yk__card:active .nhf-yk__btn { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) {
  .nhf-yk__card, .nhf-yk__btn { transition: none; }
}
/* R147 การ์ดยี่กีสดบน PC — .nhf-ykd (components/nhf/YeekeeCardDesktop.vue) ; < 992 px ซ่อน — การ์ดมือถือในแถว d-lg-none แสดงแทน
   โครง = CSS grid บน <a> ของการ์ด (.nhf-ykd__live / .nhf-ykd__promo เป็น display:contents — ชิ้นส่วนทุกชิ้นเป็นลูกกริดโดยตรง):
   S (ค่าเริ่มต้น ≥ 992 px — ธีม default เมื่อการ์ดได้ช่อง 3–4 ใบเมนู = สมาชิก): หัว / นาฬิกา + ปุ่ม / ผลรอบที่แล้ว / แถบข้อเสนอ (หัวเรื่อง·note·กติกา ไหลบรรทัดเดียวกัน) ≈ 205 px
   W (@container ≥ 860 px = ช่อง 5 ใบ (guest) หรือธีม red เต็มกว้าง): สด | แถบข้อเสนอ | ปุ่ม ≈ 130 px ; ไม่มีข้อเสนอ = แถวแถบยุบ (S) / :has ยุบคอลัมน์กลาง (W) */
.nhf-ykd { display: none; }
@media (min-width: 992px) {
  .nhf-ykd { display: block; }
  .nhf-ykd .af-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
  .nhf-ykd .nhf-ykd__live, .nhf-ykd .nhf-ykd__promo { display: contents; }
  .nhf-ykd .nhf-yk__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head head" "time btn" "last last" "offer offer";
    gap: 6px 14px;
    align-items: center;
    padding: 12px 16px 14px;
  }
  .nhf-ykd .nhf-yk__card:not(:has(.nhf-yk__offer:not([hidden]))) { grid-template-areas: "head head" "time btn" "last last"; }
  .nhf-ykd .nhf-yk__head { grid-area: head; }
  .nhf-ykd .nhf-yk__time { grid-area: time; margin-top: 0; }
  .nhf-ykd .nhf-yk__last { grid-area: last; margin-top: 0; }
  .nhf-ykd .nhf-yk__btn { grid-area: btn; box-sizing: border-box; min-height: 48px; min-width: 170px; margin-top: 0; padding: 0 22px; font-size: 17px; }
  .nhf-ykd .nhf-yk__offer { grid-area: offer; min-height: 48px; margin-top: 2px; padding: 8px 16px 8px 10px; gap: 10px; }
  .nhf-ykd .nhf-yk__offer-ic { flex-basis: 36px; width: 36px; height: 36px; font-size: 17px; }
  .nhf-ykd .nhf-yk__offer-head { display: inline; font-size: 17px; }
  .nhf-ykd .nhf-yk__offer-note { display: inline; margin: 0 0 0 6px; }
  .nhf-ykd .nhf-yk__rules { display: inline-flex; vertical-align: middle; min-height: 44px; margin: -10px 0 -10px 8px; padding: 0 4px 0 0; }
  /* ธีม default: ที่ว่างแถวสองของกริดเมนู — flex 1 1 50 % กินช่องที่เหลือ (ใบเมนูในแถว 1–3 ใบ) ; ช่อง 5 px เท่าใบเมนู ; แถวเมนูไม่ยืดใบข้าง ๆ ตามความสูงการ์ด ; container สำหรับ W */
  .row-menu-grid .row.px-2 { align-items: flex-start; }
  .row-menu-grid .row.px-2 > .nhf-ykd--half { position: relative; box-sizing: border-box; flex: 1 1 50%; max-width: 100%; min-width: 0; padding: 5px !important; container: nhf-ykd / inline-size; }
  /* W — ธีม red: แถบเต็มกว้างใต้ป้าย "สล็อต / เกม / คาสิโน" — สด | แถบข้อเสนอ | ปุ่ม 200 px */
  .nhf-ykd--wide .nhf-yk__card { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.2fr) auto; grid-template-areas: "head offer btn" "time offer btn" "last offer btn"; gap: 6px 18px; }
  .nhf-ykd--wide .nhf-yk__card:not(:has(.nhf-yk__offer:not([hidden]))) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head btn" "time btn" "last btn"; }
  .nhf-ykd--wide .nhf-yk__offer { margin-top: 0; }
  .nhf-ykd--wide .nhf-yk__btn { min-width: 200px; }
}
@container nhf-ykd (min-width: 860px) {
  /* W — ธีม default เมื่อการ์ดกว้าง ≥ 860 px (ช่อง 5 ใบ = guest) ; เบราว์เซอร์ไม่รู้จัก @container = S ตลอด (ถูกต้อง แค่สูงกว่า) */
  .nhf-ykd--half .nhf-yk__card { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.2fr) auto; grid-template-areas: "head offer btn" "time offer btn" "last offer btn"; gap: 6px 18px; }
  .nhf-ykd--half .nhf-yk__card:not(:has(.nhf-yk__offer:not([hidden]))) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head btn" "time btn" "last btn"; }
  .nhf-ykd--half .nhf-yk__offer { margin-top: 0; }
}