/* 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 — ใช้ได้ทุกหน้าที่เปิดแผ่น) */
#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; }
}