/* 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) */
#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,
.nhf-yk__winners {
  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__winners i { color: var(--nhf-gold, #f2c14e); margin-right: 2px; }
.nhf-yk__last[hidden], .nhf-yk__winners[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; }
}