:root { --c: #0FA3B1; --c2: #FFB547; --bg: #06223A; --ink: #10263a; --mut: #5a6e82; --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; -webkit-user-select: none; user-select: 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; }
#menu.nen { background: rgba(4, 22, 38, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
button { font: inherit; cursor: pointer; color: inherit; }

/* ---------- màn chính: biển 3D phía sau, bảng nút phía dưới (cuộn được) ---------- */
.home { min-height: 100%; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; padding: calc(var(--sat) + 62px) 14px calc(var(--sab) + 18px); }
.logo { display: flex; align-items: center; gap: 12px; color: #fff; text-shadow: 0 3px 14px rgba(0,0,0,.55); background: rgba(4, 30, 52, .74); border-radius: 22px; padding: 8px 16px 8px 8px; align-self: flex-start; box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.logo img { width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 2px rgba(150,240,255,.35); }
.logo h1 { margin: 0; font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.logo p { margin: 3px 0 0; font-weight: 800; font-size: 14px; color: #a8f0ff; }
.home .mo { flex: 1; min-height: 34vh; }
.sheet { background: rgba(240, 250, 252, .95); border-radius: 26px; padding: 14px; box-shadow: 0 -6px 34px rgba(0,40,70,.4); display: flex; flex-direction: column; gap: 9px; }
.sheet h3 { margin: 6px 2px 0; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; }
.sheet h3 small { font-size: 13px; color: var(--mut); }
.btn { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 18px; background: #fff; font-weight: 800; font-size: 17px; box-shadow: 0 5px 14px rgba(0,40,70,.14); margin: 6px 0; }
.btn.main { background: linear-gradient(180deg, #3fd0dc, #0FA3B1 55%, #0a7f8e); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.btn.big { min-height: 72px; font-size: 26px; font-weight: 900; margin: 0; }
.btn small { display: block; font-size: 13.5px; font-weight: 700; opacity: .92; }
.btn.hn, .btn.td { color: #fff; text-align: left; padding: 10px 16px; margin: 0; }
.btn.hn { background: linear-gradient(180deg, #1c6aa8, #12457a); }
.btn.td { background: linear-gradient(180deg, #13405e, #0a2840); }
.btn.hn b, .btn.td b { font-size: 17px; }
.btn.hn small, .btn.td small { opacity: .88; line-height: 1.35; margin-top: 2px; }
.luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.luoi .o { border: 2px solid transparent; background: #fff; border-radius: 14px; min-height: 66px; padding: 6px; text-align: left; box-shadow: 0 3px 10px rgba(0,40,70,.08); display: flex; flex-direction: column; justify-content: center; }
.luoi .o small { font-size: 11px; font-weight: 800; color: var(--mut); }
.luoi .o b { font-size: 13px; font-weight: 900; line-height: 1.2; }
.luoi .o em { font-style: normal; font-size: 12.5px; color: #e0a514; letter-spacing: 1px; }
.luoi .o.chon { border-color: #0FA3B1; background: #e8fbfc; }
.luoi .o.khoa { opacity: .55; }
.viec { display: flex; flex-direction: column; gap: 6px; }
.viec div { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; background: #fff; border-radius: 12px; padding: 7px 10px; font-size: 13.5px; font-weight: 700; }
.viec div i { grid-column: 1; height: 6px; border-radius: 4px; background: #dfeef2; overflow: hidden; }
.viec div i em { display: block; height: 100%; background: linear-gradient(90deg, #0FA3B1, #7ff0c0); }
.viec div b { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #b07a10; font-size: 13px; }
.viec div.xong { background: #e9fbf3; }
.hang { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.link { border: 0; background: #fff; border-radius: 14px; padding: 10px 8px; font-weight: 800; width: 100%; min-height: 48px; box-shadow: 0 2px 8px rgba(0,40,70,.08); }
.link small { display: block; font-size: 12px; font-weight: 700; color: var(--mut); }
.foot { color: var(--mut); font-size: 12.5px; text-align: center; margin: 2px 0 0; }
.foot a { color: inherit; }

/* ---------- bảng phụ ---------- */
.panel { background: #f1fafc; border-radius: 22px; padding: 18px 16px; max-width: 520px; margin: calc(var(--sat) + 64px) auto 24px; width: calc(100% - 24px); box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.panel h2 { margin: 0 0 6px; font-size: 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel h2 small { font-size: 14px; color: #0a8a98; }
.panel h3 { margin: 16px 0 6px; font-size: 16px; }
.panel p, .panel li { color: var(--mut); font-weight: 600; line-height: 1.5; font-size: 14.5px; }
.panel ul { padding-left: 18px; margin: 4px 0; }
.panel li b { color: var(--ink); }
.sotay { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 7px; }
.sotay li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 2px 8px rgba(0,40,70,.06); }
.sotay li.chua { opacity: .62; }
.sotay .cham { width: 22px; height: 22px; border-radius: 50%; margin-top: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 8px rgba(0,60,90,.3); }
.sotay b { display: block; font-size: 15px; color: var(--ink); }
.sotay b u { text-decoration: none; font-size: 11px; font-weight: 800; background: #dff7ef; color: #0a7a5a; border-radius: 8px; padding: 1px 6px; vertical-align: 2px; margin-left: 4px; }
.sotay b u.xam { background: #eef1f4; color: #6a7a8a; }
.sotay em { display: block; font-style: normal; font-size: 12.5px; font-weight: 700; color: #3a6a80; }
.sotay p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.nc { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; background: #fff; border-radius: 14px; padding: 9px 10px; margin: 6px 0; box-shadow: 0 2px 8px rgba(0,40,70,.06); }
.nc i { font-style: normal; font-size: 24px; text-align: center; }
.nc b { font-size: 15px; } .nc b small { color: #0FA3B1; letter-spacing: 1px; font-size: 12px; }
.nc em { display: block; font-style: normal; font-size: 12.5px; color: var(--mut); font-weight: 600; }
.nc button { border: 0; border-radius: 12px; min-height: 44px; min-width: 84px; padding: 0 10px; font-weight: 900; background: linear-gradient(180deg, #ffd56a, #f0a820); color: #3a2a08; }
.nc button.thieu { filter: grayscale(.7); opacity: .7; }
.nc button[disabled] { background: #e0e8ec; color: #8a9aa8; }
/* chọn thực đơn */
.chon .kho { display: flex; flex-wrap: wrap; gap: 6px; }
.chon .kho span { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 12px; padding: 4px 9px 4px 5px; font-size: 13px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,40,70,.06); }
.chon .kho i { width: 16px; height: 16px; border-radius: 50%; }
.chon .thich { background: #fff6dc; border-radius: 12px; padding: 8px 10px; color: #6a4a08; }
.dsmon { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
.dsmon .mon { display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center; text-align: left; border: 2px solid transparent; background: #fff; border-radius: 16px; padding: 8px 10px; min-height: 58px; box-shadow: 0 2px 8px rgba(0,40,70,.07); }
.dsmon .mon i { font-style: normal; font-size: 28px; text-align: center; }
.dsmon .mon b { display: block; font-size: 15px; }
.dsmon .mon small { display: block; font-size: 12px; color: var(--mut); font-weight: 700; }
.dsmon .mon em { font-style: normal; font-weight: 900; color: #0a7f8e; text-align: right; font-size: 16px; }
.dsmon .mon em small { font-size: 11.5px; }
.dsmon .mon.chon { border-color: #0FA3B1; background: #e5fafb; }
.dsmon .mon.chon::after { content: '✓ đã chọn'; grid-column: 1 / -1; font-size: 12px; font-weight: 900; color: #0a8a98; margin-top: -4px; }
.dsmon .mon.thich b::after { content: ' ★'; color: #e0a514; }
.dsmon .mon.khoa { opacity: .5; }
.chon .nho { font-size: 12.5px; }

/* ---------- HUD dưới nước ---------- */
#tsHud { position: fixed; left: 0; right: 0; top: 0; z-index: 8; display: none; padding: calc(var(--sat) + 6px) 10px 0; pointer-events: none; }
#tsHud.on { display: block; }
#tsHud .r1 { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: center; }
.dung { pointer-events: auto; border: 0; border-radius: 14px; min-height: 48px; min-width: 56px; background: rgba(4,30,52,.72); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; border: 1px solid rgba(150,240,255,.3); }
.dung b { font-size: 15px; } .dung small { font-size: 11px; font-weight: 800; margin-top: 3px; }
#tsHud .gio, #tsQTop .gio { text-align: center; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
#tsHud .gio b, #tsQTop .gio b { font-size: 28px; font-weight: 900; display: block; line-height: 1; font-variant-numeric: tabular-nums; }
#tsHud .gio small, #tsQTop .gio small { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; font-size: 12px; font-weight: 800; color: #d8faff; background: rgba(4,30,52,.6); border-radius: 8px; padding: 1px 7px; margin-top: 2px; }
#tsHud .so, #tsQTop .so { display: flex; gap: 6px; }
#tsHud .so span, #tsQTop .so span { background: rgba(4,30,52,.72); border-radius: 12px; padding: 4px 8px; text-align: center; color: #fff; min-width: 58px; border: 1px solid rgba(150,240,255,.25); }
#tsHud .so b, #tsQTop .so b { display: block; font-size: 17px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
#tsHud .so small, #tsQTop .so small { font-size: 10px; font-weight: 800; color: #b8f4ff; }
#tsHud .so .bien b { color: #8affc4; } #tsHud .so .bien.am b { color: #ff9a9a; }
#tsHud .r2 { margin-top: 6px; }
.khi { position: relative; height: 26px; border-radius: 14px; background: rgba(4,30,52,.72); border: 1px solid rgba(150,240,255,.3); overflow: hidden; }
.khi i { position: absolute; inset: 3px; border-radius: 11px; overflow: hidden; }
.khi i em { display: block; height: 100%; width: 100%; border-radius: 11px; background: linear-gradient(90deg, #3fd0ff, #8ff7ff); transition: width .1s linear; box-shadow: 0 0 12px rgba(120,240,255,.6); }
.khi.thap i em { background: linear-gradient(90deg, #ffb547, #ffe08a); }
.khi.nguy i em { background: linear-gradient(90deg, #ff4a5a, #ff9a8a); animation: nhay .45s infinite alternate; }
.khi span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #04223a; font-size: 13px; font-weight: 900; text-shadow: 0 0 4px rgba(255,255,255,.8); }
.khi span u { text-decoration: none; font-variant-numeric: tabular-nums; }
@keyframes nhay { to { opacity: .55; } }
#tsHud .r3 { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
#tsHud .r3 span { background: rgba(4,30,52,.66); color: #e8fbff; border-radius: 10px; padding: 4px 9px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
#tsHud .r3 span.day { background: rgba(170,90,10,.85); animation: nhay .5s infinite alternate; }
#tsJoy { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; }
#tsJoy.on { display: block; }
#tsJoy i { position: absolute; left: 0; top: 0; border-radius: 50%; }
#tsJoy .de { width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 3px solid rgba(255,255,255,.55); background: radial-gradient(circle, rgba(150,240,255,.18), rgba(150,240,255,.05)); }
#tsJoy .num { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: radial-gradient(circle at 40% 35%, #ffffff, #9ff0ff); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
#tsThe { position: fixed; right: 8px; top: calc(var(--sat) + 200px); z-index: 7; display: none; flex-direction: column; gap: 5px; width: min(214px, 58vw); pointer-events: none; }
#tsThe.on { display: flex; }
.the { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: center; background: rgba(240,252,255,.9); border-radius: 12px; padding: 4px 8px; box-shadow: 0 6px 18px rgba(0,30,50,.35); animation: theVao .28s cubic-bezier(.2,1.4,.5,1); transition: opacity .35s, transform .35s; }
.the.di { opacity: 0; transform: translateX(30px); }
.the i { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,40,70,.3); }
.the b { display: block; font-size: 12.5px; font-weight: 900; line-height: 1.15; }
.the small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10.5px; font-weight: 700; color: #4a6a80; line-height: 1.3; }
.the em { display: block; font-style: normal; font-size: 11px; font-weight: 900; color: #0a8a98; }
.the u { text-decoration: none; font-weight: 900; color: #b07a10; font-size: 13px; }
.the.moi { background: linear-gradient(180deg, #fffbe8, #fff3c8); box-shadow: 0 0 0 2px #ffd166, 0 8px 20px rgba(0,30,50,.4); }
@keyframes theVao { from { transform: translateX(40px) scale(.9); opacity: 0; } }
#tsNhan { position: fixed; inset: 0; z-index: 6; pointer-events: none; display: none; }
#tsNhan.on { display: block; }
#tsNhan span { position: absolute; left: 0; top: 0; translate: -50% -100%; white-space: nowrap; font-size: 12px; font-weight: 900; padding: 4px 9px; border-radius: 10px; color: #04223a; background: #ffd166; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
#tsNhan span.gan { background: #7fffc4; animation: rungChu .3s infinite alternate; }
@keyframes rungChu { to { margin-top: -3px; } }
#tsBan { position: fixed; left: 50%; top: calc(var(--sat) + 122px); z-index: 9; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; background: rgba(4,30,52,.88); color: #fff; border-radius: 16px; padding: 9px 16px; text-align: center; width: max-content; max-width: calc(100% - 32px); border: 1px solid rgba(150,240,255,.4); box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: opacity .25s, transform .25s; }
#tsBan.on { opacity: 1; transform: translate(-50%, 0); }
#tsBan b { display: block; font-size: 19px; font-weight: 900; }
#tsBan span { display: block; font-size: 13px; font-weight: 700; color: #c8f6ff; margin-top: 2px; }
#tsTay { position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none; display: none; }
#tsTay.on { display: block; }
#tsTay i { position: absolute; left: -14px; top: -6px; font-style: normal; font-size: 40px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); animation: tay 1s ease-in-out infinite; }
#tsTay span { position: absolute; top: 46px; width: 220px; text-align: center; background: #fff; color: #04223a; font-size: 13.5px; font-weight: 900; padding: 6px 8px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
#tsTay.keo { animation: tayKeo 1.8s ease-in-out infinite; }
#tsTay.keo i { animation: none; }
@keyframes tay { 50% { transform: translateY(8px) scale(.92); } }
@keyframes tayKeo { 0%, 12% { transform: translate(var(--x0), var(--y0)); opacity: 0; } 20% { opacity: 1; transform: translate(var(--x0), var(--y0)); } 75% { transform: translate(var(--x1), var(--y1)); opacity: 1; } 100% { transform: translate(var(--x1), var(--y1)); opacity: 0; } }
#tsLoe { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
#tsLoe.on { animation: loe .7s ease-out; }
#tsLoe.do { background: radial-gradient(circle, rgba(255,60,80,0) 40%, rgba(255,60,80,.42)); }
#tsLoe.vang { background: radial-gradient(circle, rgba(255,240,160,.35), rgba(255,210,100,0) 65%); }
#tsLoe.tim { background: radial-gradient(circle, rgba(200,170,255,0) 30%, rgba(200,170,255,.45)); }
@keyframes loe { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- HUD quán tối ---------- */
#tsQTop { position: fixed; left: 0; right: 0; top: 0; z-index: 8; display: none; padding: calc(var(--sat) + 6px) 10px 0; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: center; pointer-events: none; }
#tsQTop.on { display: grid; }
#tsBong { position: fixed; inset: 0; z-index: 6; pointer-events: none; display: none; }
#tsBong.on { display: block; }
.bong { position: absolute; left: 0; top: 0; translate: -50% -100%; pointer-events: auto; border: 0; min-width: 64px; min-height: 48px; padding: 4px 7px 5px; border-radius: 16px; background: #fffdf6; color: #3a2410; box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 0 2px #ffd166; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bong::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: #fffdf6; transform: translateX(-50%) rotate(45deg); border-radius: 3px; z-index: -1; }
.bong em { font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: #c8448a; border-radius: 8px; padding: 0 6px; }
.bong .mon { display: flex; gap: 6px; }
.bong .mon i { font-style: normal; font-size: 22px; line-height: 1; display: flex; flex-direction: column; align-items: center; }
.bong .mon i small { font-size: 10px; font-weight: 800; white-space: nowrap; margin-top: 1px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
.bong .mon i.nau { animation: nhay .4s infinite alternate; }
.bong .mon i.ok { opacity: .45; }
.bong .kien { width: 100%; height: 6px; border-radius: 4px; background: #efe4c8; overflow: hidden; }
.bong .kien em { display: block; height: 100%; padding: 0; border-radius: 4px; background: linear-gradient(90deg, #ff6a4a, #ffd166 40%, #5ad08a); }
.bong b { font-size: 11.5px; font-weight: 900; color: #0a7f8e; }
.bong.dat { box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 0 2px #7fe0ff; }
.bong.sanh { box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 0 3px #ff8ac8; }
.bong.gap { animation: rungBong .18s infinite alternate; }
.bong.xong { opacity: .85; pointer-events: none; }
@keyframes rungBong { to { margin-left: 3px; } }
#tsQBot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: none; padding: 8px 10px calc(var(--sab) + 10px); background: linear-gradient(180deg, rgba(10,8,20,0), rgba(10,8,20,.82) 26%); pointer-events: none; }
#tsQBot.on { display: block; }
#tsBep { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
#tsBep .b { flex: 1 1 0; min-width: 130px; background: rgba(60,30,20,.86); border: 1px solid rgba(255,200,140,.35); border-radius: 14px; padding: 6px 10px; color: #fff; }
#tsBep .b b { font-size: 12px; color: #ffcf8a; font-weight: 900; margin-right: 6px; }
#tsBep .b span { font-size: 13.5px; font-weight: 800; }
#tsBep .b span.ranh { opacity: .6; }
#tsBep .b i { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; margin-top: 4px; }
#tsBep .b i em { display: block; height: 100%; background: linear-gradient(90deg, #ff7a2a, #ffd166); }
#tsBep .hang { flex-basis: 100%; color: #ffe0b0; font-size: 12.5px; font-weight: 800; }
#tsMd { display: flex; gap: 6px; flex-wrap: wrap; }
#tsMd span { background: rgba(255,250,235,.94); border-radius: 12px; padding: 5px 9px; font-size: 13px; font-weight: 800; color: #3a2410; }
#tsMd span b { color: #0a7f8e; }
#tsMd span.het { opacity: .5; text-decoration: line-through; }
#tsMd span.thich { box-shadow: 0 0 0 2px #ffd166; }