:root { --c: #0e7490; --c2: #f43f5e; --vang: #ffd34d; --bg: #0b1a2c; --kem: #f8fafc; --ink: #0f1e33; --mut: #4b5d78; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); font-family: "Be Vietnam Pro", system-ui, sans-serif; color: var(--ink); overscroll-behavior: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#menu { position: fixed; inset: 0; z-index: 20; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#menu.on { display: block; }
body.nha #menu { background: linear-gradient(180deg, rgba(11,26,44,.05) 0, rgba(11,26,44,0) 26%, rgba(11,26,44,.55) 46%, rgba(11,26,44,.9) 64%, #0b1a2c 86%); }
body:not(.nha) #menu.on { background: rgba(11,26,44,.6); }
button { font: inherit; cursor: pointer; color: inherit; }

/* ---------- trang chính ---------- */
.home { min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: calc(var(--sat) + 74px) 16px 28px; max-width: 520px; margin: 0 auto; }
.logo { text-align: center; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.55); margin-bottom: 22vh; }
.logo .mark { width: 78px; height: 78px; margin: 0 auto 8px; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 3px rgba(255,211,77,.8); transform: rotate(-6deg); }
.logo .mark img { width: 100%; height: 100%; display: block; }
.logo h1 { margin: 0; font-size: clamp(42px, 12vw, 62px); font-weight: 900; letter-spacing: -1px; line-height: 1; }
.logo p { margin: 6px 0 0; font-weight: 800; font-size: 17px; }
.btn { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 18px; background: var(--kem); font-weight: 800; font-size: 17px; margin: 6px 0; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.btn.main { background: linear-gradient(180deg, #fb7185, #e11d48); color: #fff; }
.btn.big { min-height: 72px; font-size: 24px; font-weight: 900; }
.btn.big small { display: block; font-size: 14px; font-weight: 700; opacity: .9; }
.che { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.che button { text-align: left; border: 1px solid rgba(125,211,252,.4); border-radius: 16px; padding: 12px 14px; min-height: 60px; background: rgba(14,48,74,.88); color: #fff; }
.che b { display: block; font-size: 17px; color: #7dd3fc; }
.che span { display: block; font-size: 13px; font-weight: 600; opacity: .9; margin-top: 2px; }
.links { display: flex; gap: 8px; width: 100%; }
.link { border: 0; background: rgba(248,250,252,.92); border-radius: 14px; padding: 12px 10px; min-height: 48px; font-weight: 800; width: 100%; color: var(--ink); }
.foot { color: #fff; font-size: 13px; text-align: center; opacity: .8; }
.foot a { color: #7dd3fc; }

/* ---------- bảng ---------- */
.panel { background: var(--kem); border-radius: 22px; padding: 20px; max-width: 500px; margin: calc(var(--sat) + 64px) auto 24px; width: calc(100% - 32px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.panel h2 { margin: 0 0 8px; font-size: 24px; }
.panel p, .panel li { color: var(--mut); font-weight: 600; line-height: 1.5; }
.panel ul { padding-left: 18px; }
.panel li b { color: var(--ink); }
.nho { margin: 0 0 10px; font-size: 14px; }
.luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.luoi button { position: relative; text-align: left; border: 0; border-radius: 14px; padding: 10px 10px 30px; min-height: 100px; background: linear-gradient(160deg, #0e7490, #0b3a5a); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.luoi button:disabled { background: #d5dde6; color: #6b7a8e; }
.luoi em { position: absolute; right: 10px; top: 8px; font-style: normal; font-weight: 900; font-size: 22px; opacity: .35; }
.luoi b { display: block; font-size: 15px; line-height: 1.2; padding-right: 22px; }
.luoi span { display: block; font-size: 12px; font-weight: 700; opacity: .88; margin-top: 4px; }
.luoi i { position: absolute; left: 10px; bottom: 8px; font-style: normal; color: #ffd34d; letter-spacing: 2px; font-size: 15px; }
.luoi button:disabled i { color: #9aa8b8; }
.giai { margin-top: calc(var(--sat) + 26vh); }
.giai .ca { font-weight: 800; color: #0e7490; text-transform: uppercase; letter-spacing: .5px; }
.giai h2 { font-size: 27px; margin: 2px 0; }
.giai .noi { margin: 0 0 6px; }
.giai .ngay { margin: 8px 0 4px; font-size: 12px; font-weight: 900; text-transform: uppercase; color: #94a3b8; }
.mons { display: flex; flex-wrap: wrap; gap: 6px; }
.mons span { background: #fff; border-radius: 99px; padding: 4px 11px; font-weight: 800; font-size: 13.5px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.moi { background: linear-gradient(135deg, #e0f2fe, #bae6fd); border-radius: 14px; padding: 10px 12px; margin: 10px 0 6px; }
.moi b { color: #075985; }
.moi p { margin: 4px 0 0; color: #0c4a6e; font-size: 14px; }
.dacs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.dacs span { background: #0b3a5a; color: #ffd34d; border-radius: 99px; padding: 4px 10px; font-weight: 800; font-size: 13px; }
.so .pb { list-style: none; padding: 0; margin: 0 0 10px; }
.so .pb li { display: flex; justify-content: space-between; gap: 8px; padding: 9px 2px; border-bottom: 1px solid #e2e8f0; font-size: 15px; }
.so .pb li i { color: #94a3b8; }
.so .tong { font-size: 16px; }
.so .tong b { color: #e11d48; }

/* ---------- HUD trên ---------- */
#hud { position: fixed; left: 0; right: 0; top: 0; z-index: 12; padding: calc(var(--sat) + 8px) 12px 22px; display: none; color: #fff; background: linear-gradient(180deg, rgba(8,18,32,.82), rgba(8,18,32,0)); pointer-events: none; }
#hud.on { display: block; }
#hud .h1 { display: flex; justify-content: space-between; align-items: flex-end; max-width: 560px; margin: 0 auto; }
#hud small { display: block; font-size: 11px; font-weight: 800; opacity: .78; text-transform: uppercase; letter-spacing: .4px; }
#hud .tc b { font-size: 17px; font-weight: 900; }
#hud .d { text-align: right; }
#hud .d b { font-size: 26px; font-weight: 900; color: #ffd34d; }
#hud .h2 { display: flex; align-items: center; gap: 6px; max-width: 560px; margin: 6px auto 0; font-size: 12px; font-weight: 800; flex-wrap: wrap; }
#hud .tl { display: inline-flex; align-items: center; gap: 6px; }
#hud .tl small { opacity: .85; }
#hud .bar { width: 90px; height: 9px; border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; }
#hud .bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #f87171, #facc15, #4ade80); transition: width .4s; }
#hud em { font-style: normal; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 99px; }
#hud em.xuoi { background: #166534; } #hud em.nguoc { background: #9a3412; } #hud em.mua { background: #1e3a8a; } #hud em.nong { background: #b45309; } #hud em.hk { background: #9f1239; } #hud em.kinh { background: #3b0764; }

/* ---------- vùng chạm + lớp đồng hồ ---------- */
#vung { position: fixed; inset: 0; z-index: 10; display: none; touch-action: none; -webkit-user-select: none; user-select: none; }
#vung.on { display: block; }
#phu { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; }

/* ---------- bảng dưới: chọn mức / kết quả môn / qua đêm ---------- */
#ban { position: fixed; left: 0; right: 0; bottom: 0; z-index: 13; display: none; max-width: 560px; margin: 0 auto; padding: 12px 12px calc(var(--sab) + 12px);
  background: linear-gradient(180deg, rgba(10,32,52,.95), rgba(6,18,32,.98)); border-top: 2px solid rgba(125,211,252,.55); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.4); color: #fff; }
#ban.on { display: block; }
#ban .dau { display: flex; gap: 10px; align-items: center; }
#ban .bt { font-size: 34px; width: 52px; height: 52px; display: grid; place-items: center; background: rgba(255,255,255,.1); border-radius: 14px; flex: none; }
#ban .dau small { display: block; font-size: 12px; font-weight: 800; opacity: .8; }
#ban .dau small u { text-decoration: none; color: #ffd34d; }
#ban .dau b { display: block; font-size: 22px; font-weight: 900; line-height: 1.15; }
#ban .tao { display: block; font-size: 13px; font-weight: 700; color: #7dd3fc; }
#ban .goi { margin: 8px 0; font-size: 14px; font-weight: 600; opacity: .92; line-height: 1.4; }
#ban .rui { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
#ban .rui button { min-height: 84px; border: 0; border-radius: 15px; padding: 8px 6px; background: #f8fafc; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 0 #94a3b8; text-align: center; }
#ban .rui button:active { transform: translateY(3px); box-shadow: 0 1px 0 #94a3b8; }
#ban .rui b { font-size: 16px; }
#ban .rui span { font-size: 11.5px; font-weight: 700; color: var(--mut); line-height: 1.2; }
#ban .rui i { font-style: normal; font-size: 11.5px; font-weight: 800; color: #be123c; }
#ban .rui .r0 { background: #dcfce7; box-shadow: 0 4px 0 #4ade80; }
#ban .rui .r2 { background: #ffe4e6; box-shadow: 0 4px 0 #fb7185; }
#ban .rui .chon { outline: 3px solid #ffd34d; }
#ban .dem { height: 5px; border-radius: 5px; background: rgba(255,255,255,.12); margin: 10px 0 4px; overflow: hidden; }
#ban .dem i { display: block; height: 100%; background: #7dd3fc; }
#ban .nho { margin: 0; font-size: 12px; opacity: .75; text-align: center; font-weight: 700; }
#ban .cung { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 4px; font-size: 12.5px; font-weight: 700; opacity: .85; }
#ban .xh { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
#ban .xh span { background: rgba(255,255,255,.1); border-radius: 10px; padding: 4px 9px; font-size: 13px; font-weight: 800; }
#ban .xh span.minh { background: #ffd34d; color: #3a2400; }
#ban.kq .btn { margin: 4px 0 0; }
#ban.pq .dau b { color: #fca5a5; }
#ban.dem .tieu { font-size: 22px; font-weight: 900; }
#ban.dem p { margin: 6px 0; font-weight: 600; }
#ban.dem p b { color: #4ade80; }
@media (min-width: 700px) { #ban { bottom: 12px; border-radius: 22px; border: 2px solid rgba(125,211,252,.55); } .logo { margin-bottom: 16vh; } }