:root {
  --nen: #12142a;
  --nen-2: #1c1f3b;
  --nen-3: #262a4d;
  --vien: #363b66;
  --chu: #eef0ff;
  --chu-mo: #a5a9cf;
  --vang: #ffd166;
  --do: #e63946;
  --xanh: #2a9d8f;
  --bo: 10px;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(ellipse at top, #24285a 0%, var(--nen) 60%); background-color: var(--nen); color: var(--chu); font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }

.ung-dung { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: 100vh; }
@media (max-width: 900px) { .ung-dung { grid-template-columns: 1fr; height: auto; } }

/* ---- khu vòng quay ---- */
.khu-quay { display: flex; flex-direction: column; align-items: center; padding: 14px 16px; min-height: 0; background: inherit; }
.khu-quay:fullscreen { background: radial-gradient(ellipse at top, #24285a 0%, var(--nen) 60%); padding: 24px; }
.tieu-de { display: flex; align-items: center; gap: 12px; width: 100%; }
.tieu-de h1 { font-size: 20px; margin: 0; flex: 1; letter-spacing: .5px; }
.tieu-de h1 small { color: var(--chu-mo); font-weight: 400; font-size: 13px; margin-left: 8px; }
.ten-giai-hien { font-size: clamp(18px, 2.4vw, 34px); font-weight: 800; color: var(--vang); text-align: center; min-height: 1.3em; margin-top: 4px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.bang-ten { width: min(100%, 760px); min-height: 64px; margin: 6px 0 8px; padding: 10px 18px; border-radius: 14px;
  background: rgba(0,0,0,.35); border: 2px solid var(--vien); text-align: center; font-size: clamp(20px, 3vw, 40px); font-weight: 800;
  overflow-wrap: anywhere; }
.bang-ten .phu { display: block; font-size: 14px; font-weight: 400; color: var(--chu-mo); }
.bang-ten.trung { border-color: var(--vang); color: var(--vang); box-shadow: 0 0 30px rgba(255,209,102,.35); }
.khung-vong { flex: 1; width: 100%; min-height: 260px; display: flex; align-items: center; justify-content: center; position: relative; }
.khung-vong canvas { display: block; cursor: pointer; }
.dieu-khien { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.nut-quay { font-size: 22px; font-weight: 800; padding: 12px 48px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #ff5a67, var(--do)); color: #fff; box-shadow: 0 6px 20px rgba(230,57,70,.45); letter-spacing: 1px; }
.nut-quay:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.nut-quay:not(:disabled):hover { filter: brightness(1.08); }
.thong-tin-luot { color: var(--chu-mo); font-size: 13px; text-align: center; min-height: 1.2em; }

/* ---- thanh bên ---- */
.thanh-ben { background: var(--nen-2); border-left: 1px solid var(--vien); display: flex; flex-direction: column; min-height: 0; }
.tab { display: flex; border-bottom: 1px solid var(--vien); }
.tab button { flex: 1; background: none; border: 0; padding: 12px 6px; cursor: pointer; color: var(--chu-mo); font-weight: 600; border-bottom: 3px solid transparent; }
.tab button.chon { color: var(--chu); border-bottom-color: var(--vang); }
.trang { display: none; padding: 14px 16px; overflow: auto; flex: 1; min-height: 0; }
.trang.chon { display: block; }
.nhom { background: var(--nen-3); border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px; margin-bottom: 12px; }
.nhom h3 { margin: 0 0 10px; font-size: 14px; color: var(--vang); text-transform: uppercase; letter-spacing: .5px; }
label.dong { display: block; margin-bottom: 10px; }
label.dong > span { display: block; color: var(--chu-mo); font-size: 12px; margin-bottom: 4px; }
input[type=text], input[type=number], select, textarea { width: 100%; background: var(--nen); border: 1px solid var(--vien); border-radius: 8px; padding: 8px 10px; }
textarea { resize: vertical; min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vang); outline-offset: -1px; }
.chon-che-do { display: grid; gap: 8px; margin-bottom: 10px; }
.chon-che-do label { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--vien); border-radius: 8px; cursor: pointer; }
.chon-che-do label:has(input:checked) { border-color: var(--vang); background: rgba(255,209,102,.08); }
.chon-che-do small { display: block; color: var(--chu-mo); }
.o-chon { display: flex; gap: 8px; align-items: center; margin: 6px 0; cursor: pointer; }
.hang { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hang > * { flex: 1; }
.nut { background: var(--nen-3); border: 1px solid var(--vien); border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.nut:hover { border-color: var(--chu-mo); }
.nut.chinh { background: var(--xanh); border-color: var(--xanh); color: #fff; font-weight: 600; }
.nut.vang { background: var(--vang); border-color: var(--vang); color: #222; font-weight: 600; }
.nut.nguy { color: #ff8a93; }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.nut.nho { padding: 4px 8px; font-size: 12px; }
.chu-mo { color: var(--chu-mo); font-size: 12px; }
.canh-bao { color: #ffb347; font-size: 12px; }
.loi { color: #ff8a93; }
.tom-tat { font-size: 13px; line-height: 1.6; }
.tom-tat b { color: var(--vang); }
table.bang { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bang th, table.bang td { padding: 6px 6px; border-bottom: 1px solid var(--vien); text-align: left; vertical-align: top; }
table.bang th { color: var(--chu-mo); font-weight: 600; position: sticky; top: 0; background: var(--nen-3); }
.cuon { max-height: 260px; overflow: auto; border: 1px solid var(--vien); border-radius: 8px; }
.ds-trung { list-style: none; margin: 0; padding: 0; }
.ds-trung li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--vien); }
.ds-trung .so { min-width: 28px; height: 28px; border-radius: 50%; background: var(--vang); color: #222; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.ds-trung .ten { font-weight: 700; }
.ds-trung .phu { color: var(--chu-mo); font-size: 12px; }
.muc-lich-su { padding: 10px; border: 1px solid var(--vien); border-radius: 8px; margin-bottom: 8px; cursor: pointer; background: var(--nen-3); }
.muc-lich-su:hover { border-color: var(--vang); }
.muc-lich-su .tg { color: var(--chu-mo); font-size: 12px; }

/* ---- hộp thoại ---- */
.lop-phu { position: fixed; inset: 0; background: rgba(5,6,15,.72); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.hop-thoai { background: var(--nen-2); border: 2px solid var(--vang); border-radius: 16px; width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.hop-thoai .dau { padding: 16px 20px 6px; text-align: center; }
.hop-thoai .dau h2 { margin: 0; color: var(--vang); font-size: 26px; }
.hop-thoai .than { padding: 8px 20px; overflow: auto; }
.hop-thoai .chan { padding: 12px 20px 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hop-thoai.ket-qua .ds-trung .ten { font-size: 24px; }
.hop-thoai.ket-qua .ds-trung .so { min-width: 38px; height: 38px; font-size: 16px; }
.hop-thoai.ket-qua .ds-trung li { align-items: center; padding: 10px 0; }
.thong-bao { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--nen-3); border: 1px solid var(--vien); padding: 10px 16px; border-radius: 10px; z-index: 60; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.thong-bao.loi { border-color: #ff8a93; }
.thong-bao.tot { border-color: var(--xanh); }
canvas.phao-giay { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
.an { display: none !important; }

/* ---- ô kết quả trong bảng trên cùng ---- */
.bang-ten.luoi { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; white-space: normal; padding: 10px; font-size: inherit; width: min(100%, 1100px); }
.o-nho { flex: 1 1 170px; max-width: 320px; min-width: 0; min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--vien); text-align: left; transition: background .3s, border-color .3s; }
.o-nho .so { flex: none; min-width: 26px; height: 26px; border-radius: 50%; background: var(--vien); color: var(--chu); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; }
.o-nho .chu { min-width: 0; display: flex; flex-direction: column; }
.o-nho .ten { font-size: clamp(14px, 1.5vw, 21px); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.o-nho .phu { font-size: 12px; font-weight: 400; color: var(--chu-mo); overflow-wrap: anywhere; }
.o-nho .phu:empty { display: none; }
.bang-ten.luoi.nhieu .o-nho { flex-basis: 130px; padding: 4px 8px; }
.bang-ten.luoi.nhieu .o-nho .ten { font-size: 14px; }
.o-nho.cho { opacity: .45; }
.o-nho.xong { border-color: var(--vang); background: rgba(255,209,102,.14); }
.o-nho.xong .ten { color: var(--vang); }
.o-nho.xong .so { background: var(--vang); color: #222; }
.o-nho.xong { animation: hien-ra .5s ease-out; }
@keyframes hien-ra { from { transform: scale(.85); } 60% { transform: scale(1.06); } to { transform: scale(1); } }

.khung-vong { overflow: hidden; }

/* ---- hồi hộp lúc gần dừng ---- */
.hoi-hop .o-nho.dang, .bang-ten.hoi-hop:not(.luoi) { animation: nhay .55s ease-in-out infinite alternate; }
@keyframes nhay { from { border-color: var(--vien); box-shadow: none; } to { border-color: var(--do); box-shadow: 0 0 18px rgba(230,57,70,.55); } }

/* ---- trạng thái lưu từng giải ---- */
.dau-giai { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dau-giai h3 { flex: 1; margin: 0; }
.tt-luu { font-size: 12px; white-space: nowrap; }
.tt-luu.da-luu { color: #6fd3a8; }
.tt-luu.loi { color: #ffb347; }
.canh-bao-luu { border: 1px solid #ffb347; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; color: #ffb347; font-size: 13px; }
.nut-quay.tu-dong { background: linear-gradient(180deg, #3cc2b1, var(--xanh)); box-shadow: 0 6px 20px rgba(42,157,143,.4); font-size: 18px; padding: 12px 28px; }

/* ---- tên dài: hiện đủ (xuống dòng), giữ vòng quay đủ to ---- */
.khu-quay { overflow: hidden; }
.khung-vong { overflow: visible; }
.bang-ten.luoi .o-nho { flex: 1 1 0; min-width: 120px; max-width: none; }
.bang-ten.luoi.nhieu .o-nho { flex: 1 1 150px; }
.o-nho .ten { font-size: clamp(13px, 1.25vw, 20px); }
.bang-ten.luoi.nhieu .o-nho .ten { font-size: 13px; }

/* ---- kết quả dạng cột dọc bên trái vòng quay (khi nhiều người trúng) ---- */
.cot-kq { position: relative; z-index: 3; flex: none; width: clamp(220px, 22vw, 320px); display: flex; flex-direction: column; min-height: 0;
  background: rgba(0,0,0,.3); border: 2px solid var(--vien); border-radius: 14px; padding: 8px; }
.dau-cot { font-weight: 800; color: var(--vang); padding: 2px 6px 8px; overflow-wrap: anywhere; }
.ds-cot { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.ds-cot .o-nho { flex: none; max-width: none; min-height: 0; padding: 6px 8px; }
.ds-cot .o-nho .ten { font-size: clamp(13px, 1.1vw, 18px); }

/* ---- thu gọn / mở menu bên phải ---- */
.ung-dung { position: relative; transition: grid-template-columns .3s ease; }
.ung-dung.thu-gon { grid-template-columns: minmax(0, 1fr) 0px; }
.thanh-ben { overflow: hidden; min-width: 0; }
.thanh-ben > .tab, .thanh-ben > .trang { min-width: 400px; }
.ung-dung.thu-gon .thanh-ben { visibility: hidden; border-left: 0; }
.nut-menu { position: absolute; top: 50%; right: 400px; transform: translate(50%, -50%); z-index: 20; width: 24px; height: 72px; padding: 0;
  border: 1px solid var(--vien); border-radius: 8px; background: var(--nen-3); color: var(--vang); font-size: 20px; font-weight: 800; cursor: pointer;
  transition: right .3s ease, transform .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.nut-menu:hover { background: var(--vien); }
.ung-dung.thu-gon .nut-menu { right: 0; transform: translate(0, -50%); border-radius: 8px 0 0 8px; }
@media (max-width: 900px) { .nut-menu { display: none; } .ung-dung.thu-gon .thanh-ben { visibility: visible; } }

/* nút xóa trong danh sách lịch sử */
.muc-lich-su { position: relative; padding-right: 44px; }
.muc-lich-su .xoa-ls { position: absolute; top: 8px; right: 8px; }
@media (max-width: 900px) { .ung-dung.thu-gon { grid-template-columns: 1fr; } .thanh-ben > .tab, .thanh-ben > .trang { min-width: 0; } }

/* ---- tên luôn 1 dòng: JS (Wheel.vuaChu) thu nhỏ cỡ chữ cho vừa, không xuống dòng ---- */
.o-nho .ten, .o-nho .phu, .ds-trung .ten, .ds-trung .phu {
  white-space: nowrap; overflow: hidden; text-overflow: clip; overflow-wrap: normal; }
.o-nho { min-height: 0; }
.o-nho .chu { flex: 1 1 auto; min-width: 0; }
.ds-trung li > div { flex: 1 1 auto; min-width: 0; }
.bang-ten:not(.luoi) { white-space: nowrap; overflow: hidden; overflow-wrap: normal; }

.bang-ten.luoi.ty-le:not(.nhieu) { flex-wrap: nowrap; }
.bang-ten.luoi.ty-le:not(.nhieu) .o-nho { flex: 1 1 auto; min-width: 0; }
/* thông tin phụ không làm ô rộng thêm: ô rộng theo tên, thông tin phụ co theo ô */
.bang-ten.luoi .o-nho .phu { contain: inline-size; }
.bang-ten.luoi { width: min(100%, 1400px); }

/* ---- thân: [cột kết quả] [phần giữa]; phần giữa (tên giải, kết quả, vòng, nút) căn giữa trong chỗ còn lại ---- */
.than-quay { flex: 1; width: 100%; min-height: 0; display: flex; gap: 14px; }
.giua-quay { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.giua-quay .khung-vong { width: 100%; }
@media (max-width: 900px) { .than-quay { flex-direction: column; } .cot-kq { width: auto; max-height: 260px; } }

/* ---- tab chỉ dành cho bản Pro: ẩn chức năng, chỉ hiện mô tả ---- */
.trang.bi-khoa > :not(.khoa-pro) { display: none !important; }
.khoa-pro { border: 2px dashed var(--vang); border-radius: var(--bo); padding: 14px; background: rgba(255,209,102,.06); }
.khoa-pro-dau { font-weight: 800; color: var(--vang); margin-bottom: 8px; }
.khoa-pro h3 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--chu); }
.khoa-pro ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; color: var(--chu-mo); }
.khoa-pro .nut { display: inline-block; text-decoration: none; }