/* Check-in QR su kien */
.ci [hidden], [hidden].ci-ticket-view { display: none !important; }
.ci-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; padding: 14px; }
.ci-ev { flex: 1 1 320px; display: grid; grid-template-columns: 3fr 2fr; gap: 8px; }
.ci-count { text-align: center; min-width: 110px; } .ci-count b { font-size: 34px; color: #14853b; line-height: 1; } .ci-count span { color: #4a5571; font-weight: 600; }
.ci-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.ci-tabs button { flex: 1 0 auto; border: 1px solid #dfe4ee; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; color: #1f2a44; cursor: pointer; white-space: nowrap; }
.ci-tabs button.on { background: #007bff; border-color: #007bff; color: #fff; }
.ci-lb { font-weight: 700; display: block; } .ci-lb small { font-weight: 400; color: #6b7690; }
.ci-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; } .ci-row.ci-c { justify-content: center; }
.ci-msg { font-size: 14px; color: #14853b; } .ci-msg.err { color: #c62828; }
.ci-note { color: #4a5571; font-size: 15px; }
.ci-limit { background: #fff8e6; border: 1px solid #ffe2a8; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 8px 0; }
.ci-tools { display: grid; grid-template-columns: 1fr 140px; gap: 8px; margin: 12px 0 6px; }
.ci-list { max-height: 460px; overflow: auto; border: 1px solid #eef1f6; border-radius: 10px; }
.ci-list:empty { display: none; }
.ci-g { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #eef1f6; font-size: 15px; }
.ci-g:last-child { border-bottom: 0; }
.ci-g .ci-nm { flex: 1; min-width: 0; } .ci-g .ci-nm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-g .ci-nm small { color: #6b7690; }
.ci-g .ci-code { font-family: ui-monospace, Menlo, Consolas, monospace; color: #6b7690; font-size: 13px; }
.ci-g.in { background: #f0faf3; } .ci-st { font-size: 13px; font-weight: 700; color: #14853b; white-space: nowrap; }
.ci-g button { white-space: nowrap; }
.ci-agf { margin-top: 14px; background: #eefaf2; border: 1px solid #bfe8cc; border-radius: 12px; padding: 12px 14px; }
.ci-agf p { font-size: 14px; color: #3d4a63; margin: 4px 0 10px; }
/* Ve */
.ci-tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ci-tk { border: 1px dashed #c5cde0; border-radius: 12px; padding: 12px; text-align: center; background: #fff; break-inside: avoid; page-break-inside: avoid; }
.ci-tk .ci-tk-ev { font-size: 12px; color: #6b7690; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ci-tk img { width: 150px; height: 150px; image-rendering: pixelated; margin: 6px auto; display: block; }
.ci-tk .ci-tk-nm { font-weight: 800; font-size: 16px; line-height: 1.25; }
.ci-tk .ci-tk-sub { font-size: 12px; color: #6b7690; } .ci-tk .ci-tk-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .1em; }
.ci-tk .ci-tk-act { margin-top: 6px; display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.ci-tk .ci-tk-act button { font-size: 12px; padding: 2px 8px; }
/* Quet */
.ci-cam { position: relative; background: #111827; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 520px; margin: 0 auto; }
.ci-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-frame { position: absolute; inset: 18% 22%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 14px; pointer-events: none; }
.ci-camoff { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #cbd5e1; text-align: center; padding: 16px; background: #111827; }
.ci-cam.flash-ok { box-shadow: 0 0 0 6px #22c55e; } .ci-cam.flash-again { box-shadow: 0 0 0 6px #f59e0b; } .ci-cam.flash-bad { box-shadow: 0 0 0 6px #ef4444; }
.ci-res { max-width: 520px; margin: 12px auto 0; border-radius: 14px; padding: 0; text-align: center; font-size: 17px; }
.ci-res.ok, .ci-res.again, .ci-res.bad { padding: 14px; }
.ci-res.ok { background: #dcfce7; color: #14532d; } .ci-res.again { background: #fef3c7; color: #78350f; } .ci-res.bad { background: #fee2e2; color: #7f1d1d; }
.ci-res b { display: block; font-size: 24px; line-height: 1.2; }
.ci-chk { font-size: 14px; margin: 0; display: flex; gap: 6px; align-items: center; }
.ci-h3 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.ci-quick { max-height: 260px; margin-top: 6px; }
.ci-walk { display: grid; grid-template-columns: 2fr 1.3fr auto; gap: 8px; }
.ci-recent { padding-left: 22px; font-size: 15px; } .ci-recent small { color: #6b7690; }
/* Quay so */
.ci-stage { margin: 14px 0; background: linear-gradient(135deg, #1e3a8a, #2563eb 55%, #7c3aed); color: #fff; border-radius: 18px; padding: 22px 14px; text-align: center; }
.ci-cur { font-size: clamp(18px, 3.4vw, 28px); font-weight: 700; color: #fde68a; }
.ci-roll { font-size: clamp(30px, 7vw, 60px); font-weight: 800; min-height: 1.4em; margin: 14px 0; word-break: break-word; }
.ci-roll.won { animation: ci-pop .6s ease; text-shadow: 0 0 24px rgba(253, 230, 138, .9); }
@keyframes ci-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ci-go { background: #fde68a; color: #1e3a8a; font-weight: 800; font-size: 20px; border-radius: 999px; padding: 10px 30px; }
.ci-alt { background: transparent; color: #fff; border: 2px solid #fde68a; border-radius: 999px; font-weight: 700; }
.ci-go:disabled { opacity: .5; } .ci-left { color: #fde68a; margin: 8px 0 0; }
.ci-wg h4 { font-size: 16px; color: #1e3a8a; margin: 12px 0 4px; } .ci-wg h4 small { color: #6b7690; font-weight: 400; }
.ci-wg ol { margin: 0; padding-left: 22px; columns: 2; } .ci-x { border: 0; background: none; color: #9ca3af; cursor: pointer; }
body.ci-stage-on { background: #172554; } body.ci-stage-on nav, body.ci-stage-on .tp-crumb, body.ci-stage-on .tp-hero, body.ci-stage-on .tp-sec, body.ci-stage-on .tp-ad, body.ci-stage-on .dbrt, body.ci-stage-on .ci-bar, body.ci-stage-on .ci-tabs, body.ci-stage-on .ci-draw > label, body.ci-stage-on #ciPrizes, body.ci-stage-on .ci-draw > .ci-row, body.ci-stage-on main > p, body.ci-stage-on footer { display: none !important; }
body.ci-stage-on .ci-draw { background: transparent; box-shadow: none; } body.ci-stage-on main { max-width: none; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
body.ci-stage-on .ci-stage { padding: 7vh 4vw; } body.ci-stage-on .ci-roll { font-size: clamp(44px, 9vw, 120px); }
body.ci-stage-on .ci-wg h4, body.ci-stage-on .ci-wg { color: #fff; } body.ci-stage-on .ci-wg h4 { color: #fde68a; }
/* Ve khach mo tren dien thoai (#ve=) */
.ci-ticket-view { position: fixed; inset: 0; z-index: 2000; background: #f6f8fb; overflow: auto; display: flex; padding: 16px; }
.ci-tv { margin: auto; background: #fff; border-radius: 20px; box-shadow: 0 6px 30px rgba(31, 42, 68, .15); padding: 22px 18px; max-width: 380px; width: 100%; text-align: center; }
.ci-tv .ci-tk-ev { font-weight: 800; color: #007bff; font-size: 15px; text-transform: uppercase; }
.ci-tv .ci-tv-when { color: #6b7690; font-size: 14px; }
.ci-tv img { width: 100%; max-width: 280px; image-rendering: pixelated; margin: 10px auto; display: block; }
.ci-tv .ci-tv-nm { font-size: 24px; font-weight: 800; line-height: 1.2; }
.ci-tv .ci-tk-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .15em; font-size: 18px; margin-top: 4px; }
.ci-tv p { font-size: 14px; color: #4a5571; margin: 10px 0 0; }
.ci-tv .ci-tv-host { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef1f6; }
@media (max-width: 600px) { .ci-tabs button { flex: 1 1 0; padding: 7px 4px; font-size: 12.5px; } .ci-ev { grid-template-columns: 1fr; } .ci-walk { grid-template-columns: 1fr 1fr; } .ci-walk button { grid-column: 1 / -1; } .ci-wg ol { columns: 1; } .ci-tk-grid { grid-template-columns: repeat(2, 1fr); } .ci-tk img { width: 120px; height: 120px; } }
@media print {
  body { background: #fff !important; }
  body > *:not(main), main > *:not(.ci), .ci > *:not([data-pane="tickets"]), [data-pane="tickets"] > *:not(#ciTickets), .ci-tk-act, .dbrt, .tp-ad { display: none !important; }
  .ci [data-pane="tickets"] { display: block !important; box-shadow: none; padding: 0; }
  .ci-tk-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}