/* Check-in miễn phí (src/freeCheckin.mjs, public/fc/fc.js) — dùng biến + khung của ft/ft.css. */
.fc-req { color: #dc2626; font-weight: 700; }
.fc-field { display: block; min-width: 0; }
.fc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.fc-hint { margin: -2px 0 8px; }
.fc-paste { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.55; resize: vertical; min-height: 120px; white-space: pre; overflow-x: auto; }
.fc-count { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--ok); min-height: 1.4em; }
.fc-count.is-warn { color: var(--warn); }
.fc-create .ft-actions { margin-top: 18px; }

/* minh hoạ máy quét cạnh form tạo */
.fc-demo { display: flex; flex-direction: column; align-items: center; padding: 22px; }
.fc-demo-phone { background: #0f0f14; }
.fc-demo-in { padding: 34px 14px 16px; color: #fff; display: grid; gap: 12px; }
.fc-demo-top { display: flex; align-items: baseline; gap: 4px; }
.fc-demo-top b { font-size: 34px; line-height: 1; }
.fc-demo-top span { color: #a1a1aa; font-size: 14px; }
.fc-demo-cam { position: relative; aspect-ratio: 1; border-radius: 18px; background: radial-gradient(120% 80% at 50% 30%, #3f3f46, #18181b); overflow: hidden; }
.fc-demo-res { display: flex; align-items: center; gap: 10px; background: rgba(16,185,129,.16); border: 1px solid rgba(16,185,129,.4); border-radius: 14px; padding: 10px 12px; }
.fc-demo-res b { display: block; font-size: 15px; }
.fc-demo-res small { color: #6ee7b7; }

/* khung ngắm dùng chung (demo + máy quét) */
.fc-frame { position: absolute; inset: 18%; border-radius: 18px; pointer-events: none;
  background: linear-gradient(#ff5c40, #ff5c40) top left / 28px 4px, linear-gradient(#ff5c40, #ff5c40) top left / 4px 28px,
    linear-gradient(#ff5c40, #ff5c40) top right / 28px 4px, linear-gradient(#ff5c40, #ff5c40) top right / 4px 28px,
    linear-gradient(#ff5c40, #ff5c40) bottom left / 28px 4px, linear-gradient(#ff5c40, #ff5c40) bottom left / 4px 28px,
    linear-gradient(#ff5c40, #ff5c40) bottom right / 28px 4px, linear-gradient(#ff5c40, #ff5c40) bottom right / 4px 28px;
  background-repeat: no-repeat; }
.fc-frame:after { content: ""; position: absolute; left: 8%; right: 8%; height: 2px; top: 10%; background: linear-gradient(90deg, transparent, rgba(255,92,64,.9), transparent); animation: fc-sweep 2.2s ease-in-out infinite; }
@keyframes fc-sweep { 50% { top: 88%; } }

/* trang quản lý */
.fc-stats { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); }
.fc-stat { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.fc-stat b { font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.fc-stat span { color: var(--ink-2); font-weight: 600; }
.fc-meter { flex: 1; height: 10px; border-radius: 99px; background: #f1f1f4; overflow: hidden; }
.fc-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #10b981, #34d399); transition: width .45s ease; }
.fc-bulk { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fc-add { border: 1px dashed var(--line); border-radius: 14px; padding: 12px; margin-bottom: 14px; background: #fcfcfd; }
.fc-add-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr auto; gap: 8px; }
.fc-add-grid .ft-input { padding: 9px 11px; font-size: 15px; }
.fc-add .ft-msg:empty { display: none; }
.fc-add-paste { margin-top: 10px; }
.fc-add-paste summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.fc-add-paste .ft-actions { margin-top: 8px; }
.fc-listtools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fc-search { flex: 1 1 220px; min-width: 0; }
.fc-tabs { display: inline-flex; background: #f4f4f5; border-radius: 12px; padding: 3px; }
.fc-tab { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.fc-tab small { color: #a1a1aa; font-weight: 700; }
.fc-tab.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fc-list { list-style: none; margin: 0; padding: 0; }
.fc-row-g { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line); }
.fc-g-main { min-width: 0; }
.fc-g-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-g-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-g-status { font-size: 13px; font-weight: 700; color: #a1a1aa; white-space: nowrap; }
.fc-g-status.is-in { color: var(--ok); }
.fc-g-act { display: flex; align-items: center; gap: 4px; }
.fc-rotate { margin-top: 8px; font-size: 14px; color: var(--ink-2) !important; }
.fc-qr-modal { display: flex; justify-content: center; margin: 4px 0 14px; }
.fc-qr-modal canvas { width: 220px !important; height: 220px !important; border-radius: 12px; border: 1px solid var(--line); }
.fc-modal-form .ft-label { margin-top: 10px; }

/* máy quét — nền tối, một tay cầm */
.fc-body.fc-scan, .fc-body.fc-screen { background: #0f0f14; color: #fff; }
.fc-scanner { max-width: 520px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px 24px; display: grid; gap: 12px; }
.fc-scan-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fc-scan-title { min-width: 0; }
.fc-scan-title small { color: #a1a1aa; font-size: 13px; }
.fc-scan-title b { display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-scan-count { text-align: right; white-space: nowrap; }
.fc-count-big { font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.fc-scan-count small { display: block; color: #a1a1aa; font-size: 13px; }
.fc-scan-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fc-net { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #d4d4d8; }
.fc-net i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
.fc-net.is-off i { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
.fc-net em { font-style: normal; color: #fbbf24; }
.fc-sound { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #a1a1aa; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fc-sound.is-on { color: #fff; border-color: rgba(255,92,64,.5); }
.fc-stop { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.4); color: #fcd34d; font-weight: 600; }
.fc-cam { position: relative; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 80% at 50% 30%, #27272a, #0f0f14); border: 1px solid rgba(255,255,255,.08); }
.fc-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.fc-cam.is-live video { opacity: 1; }
.fc-cam .fc-frame { display: none; }
.fc-cam.is-live .fc-frame { display: block; }
.fc-cam-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.fc-cam.is-live .fc-cam-start { display: none; }
.fc-cam-err { position: absolute; inset: auto 16px 50% 16px; transform: translateY(50%); margin: 0; text-align: center; color: #d4d4d8; font-size: 15px; }
.fc-res { display: flex; align-items: center; gap: 12px; min-height: 72px; border-radius: 18px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); transition: background .2s, border-color .2s; }
.fc-res.is-idle { justify-content: center; color: #a1a1aa; }
.fc-res-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff; }
.fc-res-txt { flex: 1; min-width: 0; }
.fc-res-txt b { display: block; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-res-txt small { color: #d4d4d8; }
.fc-res.is-ok { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.5); animation: fc-pop .25s ease; }
.fc-res.is-ok .fc-res-ic, .fc-demo-res .fc-res-ic { background: #10b981; }
.fc-demo-res .fc-res-ic { width: 32px; height: 32px; font-size: 17px; }
.fc-res.is-already { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.5); animation: fc-pop .25s ease; }
.fc-res.is-already .fc-res-ic { background: #f59e0b; }
.fc-res.is-bad { background: rgba(220,38,38,.16); border-color: rgba(220,38,38,.55); animation: fc-shake .3s ease; }
.fc-res.is-bad .fc-res-ic { background: #dc2626; }
.fc-res-undo { flex: none; border: 0; background: none; color: #d4d4d8; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px; }
@keyframes fc-pop { from { transform: scale(.97); } }
@keyframes fc-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.fc-scan-find .ft-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.fc-scan-find .ft-input::placeholder { color: #a1a1aa; }
.fc-matches { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fc-matches li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.fc-matches li div { min-width: 0; }
.fc-matches b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-matches small { color: #a1a1aa; }
.fc-m-in { color: #6ee7b7; font-size: 13px; font-weight: 700; white-space: nowrap; }
.fc-m-none { color: #a1a1aa; justify-content: center !important; }
.fc-foot { text-align: center; color: #71717a; font-size: 13px; margin: 8px 0 0; }
.fc-foot a { color: inherit; font-weight: 700; }
.fc-scan-fatal { max-width: 460px; margin: 18vh auto 0; padding: 0 16px; text-align: center; }
.fc-scan-fatal h1 { font-size: 20px; }

/* màn hình đếm (TV) */
.fc-tv { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; overflow: hidden; }
.fc-tv-glow { position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: 40%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,92,64,.22), transparent); pointer-events: none; }
.fc-tv > :not(.fc-tv-glow) { position: relative; }
.fc-tv-kicker { color: #fb923c; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0; font-size: clamp(14px, 1.6vw, 22px); }
.fc-tv h1 { font-size: clamp(26px, 4vw, 56px); margin: 10px 0 4vh; max-width: 22ch; }
.fc-tv-count { display: flex; align-items: baseline; gap: 10px; }
.fc-tv-num { font-size: clamp(96px, 18vw, 260px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fc-tv-num.is-bump { animation: fc-bump .45s ease; }
@keyframes fc-bump { 40% { transform: scale(1.08); color: #6ee7b7; } }
.fc-tv-tot { font-size: clamp(28px, 5vw, 72px); color: #71717a; font-weight: 700; }
.fc-tv-label { color: #a1a1aa; font-size: clamp(16px, 2vw, 26px); margin: 8px 0 4vh; }
.fc-meter.is-big { width: min(720px, 80vw); height: 14px; flex: none; background: rgba(255,255,255,.08); }

/* mã QR của khách */
.fc-body.fc-ticket { background: radial-gradient(100% 60% at 50% 0%, #fff1ec, #fafafa 60%); min-height: 100vh; }
.fc-tk { max-width: 420px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px 28px; }
.fc-tk-card { background: #fff; border-radius: 28px; box-shadow: 0 24px 60px -30px rgba(24,24,27,.35); border: 1px solid var(--line); padding: 24px 22px 20px; text-align: center; }
.fc-tk-event { font-weight: 800; font-size: 18px; margin: 0; }
.fc-tk-meta { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; }
.fc-tk-cut { height: 1px; margin: 18px -22px; border-top: 2px dashed var(--line); }
.fc-tk-name { font-size: 24px; margin: 0 0 4px; }
.fc-tk-show { color: var(--ink-2); margin: 0 0 12px; }
.fc-tk-in { display: inline-block; color: var(--ok); background: var(--ok-bg); border-radius: 99px; padding: 4px 12px; font-weight: 700; margin: 0 0 12px; }
.fc-tk-qr { display: flex; justify-content: center; margin: 0 auto 8px; }
.fc-tk-qr canvas { width: min(280px, 72vw) !important; height: auto !important; aspect-ratio: 1; }
.fc-tk .ft-btn { margin-top: 10px; }

/* bảng so sánh trên trang SEO */
.fc-cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.fc-cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.fc-cmp th, .fc-cmp td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.fc-cmp thead th { border-top: 0; background: #fafafa; font-size: 14px; }
.fc-cmp tbody th { font-weight: 600; color: var(--ink-2); }
.fc-cmp .is-us, .fc-cmp thead th:last-child { color: var(--ink); font-weight: 700; background: #fff6f3; }

/* in mã QR */
.fc-print { display: none; }
@media print {
  body.fc-printing > *:not(.fc-print) { display: none !important; }
  body.fc-printing .fc-print { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; }
  .fc-print-card { break-inside: avoid; border: 1px dashed #bbb; border-radius: 4mm; padding: 4mm; text-align: center; font-family: 'Be Vietnam Pro', sans-serif; }
  .fc-print-card img { width: 100%; height: auto; }
  .fc-print-card small { display: block; font-size: 9pt; color: #555; }
  .fc-print-card b { display: block; font-size: 12pt; }
  .fc-print-card span { display: block; font-size: 9pt; color: #555; }
}

@media (max-width: 900px) {
  .fc-add-grid { grid-template-columns: 1fr 1fr; }
  .fc-add-grid .ft-btn { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fc-row { grid-template-columns: 1fr; }
  .fc-demo { display: none; }
  .fc-stats { flex-direction: column; align-items: stretch; gap: 10px; }
  .fc-stats .fc-meter { flex: none; }
  .fc-body .ft-mgrid > .ft-mcol:last-child { order: 0; }
  .fc-row-g { grid-template-columns: minmax(0, 1fr) auto; }
  .fc-g-act { grid-column: 1 / -1; justify-content: flex-end; }
  .fc-bulk { justify-content: flex-start; }
  .fc-listbox > .ft-box-head { flex-direction: column; align-items: flex-start; }
  .fc-tabs { width: 100%; }
  .fc-tab { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-frame:after, .fc-res, .fc-tv-num.is-bump { animation: none !important; }
}