:root { --c: #F2A93B; --c2: #3DD6C6; --bg: #0d1426; --the: #17213b; --the2: #1f2b4a; --chu: #eef2ff; --mut: #9aa6c8; --do: #ff6b5a;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --rong: min(100vw, 520px); --monT: calc(var(--sat) + 136px); --monH: clamp(190px, 31vh, 290px); }
body.dangtruc { --monT: calc(var(--sat) + 62px); --monH: clamp(180px, 32vh, 290px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #1b2748 0%, var(--bg) 60%); font-family: "Be Vietnam Pro", system-ui, sans-serif; color: var(--chu); overscroll-behavior: none; }
button { font: inherit; cursor: pointer; color: inherit; }

/* ---------- màn hình camera ---------- */
canvas#c { position: fixed; z-index: 1; left: 50%; transform: translateX(-50%); top: var(--monT); width: calc(var(--rong) - 20px); height: var(--monH); display: block; touch-action: none; border-radius: 16px; background: #0b0f1a; box-shadow: 0 0 0 4px #2a3352, 0 0 0 7px #121a30, 0 14px 40px rgba(0,0,0,.5); }
#tcMon { position: fixed; z-index: 2; left: 50%; transform: translateX(-50%); top: var(--monT); width: calc(var(--rong) - 20px); height: var(--monH); border-radius: 16px; overflow: hidden; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px), radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%); }
#tcMon.ir { background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px), radial-gradient(120% 100% at 50% 50%, rgba(80,255,170,.06) 55%, rgba(0,20,10,.6) 100%); }
#tcMon .nhan { position: absolute; left: 10px; top: 8px; display: flex; gap: 6px; align-items: center; font-weight: 800; font-size: 12px; text-shadow: 0 1px 3px #000; }
#tcMon .nhan b { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 2px 6px; letter-spacing: .5px; color: #d9fff0; }
#tcMon .nhan span { color: #fff; }
#tcMon .rec { position: absolute; right: 10px; top: 9px; font-weight: 800; font-size: 12px; color: #fff; text-shadow: 0 1px 3px #000; display: flex; align-items: center; gap: 4px; }
#tcMon .rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; animation: nhay 1.2s steps(2) infinite; }
#tcMon .nhieu { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 2px, rgba(0,0,0,.4) 2px 4px), repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
#tcMon.nh .nhieu { animation: nhieu .22s linear; }
#tcMon.ngan::after { content: '🔔 trống đang ngân'; position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 800; color: #ffe08a; text-shadow: 0 1px 3px #000; animation: nhay .6s steps(2) infinite; }
#tcMon .ban { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%) translateY(10px); width: max-content; max-width: 92%; text-align: center; background: rgba(10,14,28,.82); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 6px 12px; opacity: 0; transition: opacity .2s, transform .2s; }
#tcMon .ban.on { opacity: 1; transform: translateX(-50%); }
#tcMon .ban b { display: block; font-size: 15px; font-weight: 900; color: #ffe08a; }
#tcMon .ban span { display: block; font-size: 12px; font-weight: 700; color: #dfe6ff; }
@keyframes nhieu { 0% { opacity: .9; background-position: 0 0, 0 0; } 50% { opacity: .6; background-position: 7px 3px, 0 2px; } 100% { opacity: 0; background-position: 13px 0, 0 5px; } }
@keyframes nhay { 50% { opacity: .25; } }

/* ---------- HUD ---------- */
#tcHud, #tcAct, #tcMap { display: none; position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); width: calc(var(--rong) - 20px); }
#tcHud.on, #tcAct.on { display: flex; } #tcMap.on { display: block; }
#tcHud { top: calc(var(--sat) + 6px); height: 50px; gap: 8px; align-items: stretch; }
#tcHud .dung { width: 54px; border: 0; border-radius: 14px; background: var(--the2); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
#tcHud .dung b { font-size: 14px; } #tcHud .dung small { font-size: 11px; font-weight: 800; margin-top: 3px; color: var(--mut); }
#tcHud .gio { min-width: 78px; background: #0a0f1d; border: 1px solid #2a3352; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#tcHud .gio b { font: 900 22px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #7dffcf; letter-spacing: 1px; text-shadow: 0 0 10px rgba(125,255,207,.5); }
#tcHud .gio small { font-size: 10px; font-weight: 800; color: var(--mut); margin-top: 2px; }
#tcHud .thanh { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
#tcHud .t span { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; color: var(--mut); }
#tcHud .t span b { color: var(--chu); }
#tcHud .t i { display: block; height: 8px; border-radius: 6px; background: #0a0f1d; overflow: hidden; }
#tcHud .t em { display: block; height: 100%; border-radius: 6px; transition: width .2s; }
#tcHud .pin em { background: linear-gradient(90deg, #5be37a, #b8f06a); }
#tcHud .yen em { background: linear-gradient(90deg, var(--c2), #8fe8ff); }
#tcHud.pinyeu .pin em { background: linear-gradient(90deg, #ff6b5a, #ffb36b); animation: nhay .8s steps(2) infinite; }
#tcHud.yenyeu .yen em { background: linear-gradient(90deg, #ff6b5a, #ffb36b); }

/* ---------- nút việc ---------- */
#tcAct { top: calc(var(--monT) + var(--monH) + 10px); height: 54px; gap: 8px; }
#tcAct button { flex: 1; border: 0; border-radius: 16px; display: flex; align-items: center; gap: 8px; padding: 0 12px; text-align: left; box-shadow: 0 6px 16px rgba(0,0,0,.3); min-width: 0; }
#tcAct button i { font-style: normal; font-size: 24px; }
#tcAct button span { display: flex; flex-direction: column; min-width: 0; }
#tcAct button b { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tcAct button small { font-size: 11px; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tcAct .den { background: linear-gradient(180deg, #3a3a24, #2a2a1a); color: #ffe7a8; }
#tcAct .den.bat { background: linear-gradient(180deg, #ffd36b, #f2a93b); color: #3a2208; box-shadow: 0 0 22px rgba(255,211,107,.45); }
#tcAct .den.khoa { opacity: .5; }
#tcAct .goi { background: linear-gradient(180deg, #2a4a6a, #1f3654); color: #dff1ff; }
#tcAct .goi.dang { background: linear-gradient(180deg, #2d6a5a, #1f4f44); }

/* ---------- sơ đồ ---------- */
#tcMap { --G: 14px; --W: calc((100% - 2 * var(--G)) / 3); --H: calc((100% - 2 * var(--G)) / 3); top: calc(var(--monT) + var(--monH) + 74px); bottom: calc(var(--sab) + 10px); }
#tcMap .o { position: absolute; left: calc(var(--c) * (var(--W) + var(--G))); top: calc(var(--r) * (var(--H) + var(--G))); width: var(--W); height: var(--H); border: 2px solid #2a3557; border-radius: 14px; background: var(--the); padding: 0; overflow: hidden; transition: border-color .15s, background .2s; }
#tcMap .o .ten { position: absolute; left: 7px; top: 5px; font-size: 11px; font-weight: 800; color: var(--mut); max-width: calc(100% - 26px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
#tcMap .o .vat { position: absolute; right: 4px; bottom: 2px; font-size: 30px; opacity: .16; }
#tcMap .o .kh { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); display: flex; justify-content: center; flex-wrap: wrap; gap: 0 2px; font-size: 24px; line-height: 1.15; }
#tcMap .o .kh em { font-style: normal; animation: hien .25s ease-out; }
#tcMap .o .kh em.cu { opacity: .35; filter: grayscale(1); font-size: 19px; }
#tcMap .o .kh em.tieng { font-size: 22px; font-weight: 900; color: #ffd36b; letter-spacing: 2px; }
#tcMap .o .tu { position: absolute; left: 6px; bottom: 4px; font-size: 18px; }
#tcMap .o .tu em { font-style: normal; } #tcMap .o .tu em.toi { opacity: .55; animation: nhay 1s steps(2) infinite; }
#tcMap .o .tq { position: absolute; left: 30px; right: 30px; bottom: 7px; height: 7px; border-radius: 4px; background: #0a0f1d; box-shadow: 0 0 0 1px #3a4770; overflow: hidden; }
#tcMap .o .tq i { display: block; height: 100%; background: linear-gradient(90deg, #8fd3ff, #c99bff); border-radius: 4px; }
#tcMap .o .bong, #tcMap .o .gio_ { position: absolute; right: 5px; top: 3px; font-size: 13px; display: none; }
#tcMap .o .gio_ { right: 22px; }
#tcMap .o.sang { background: linear-gradient(180deg, #4a4226, #2c2a1e); } #tcMap .o.sang .bong { display: block; }
#tcMap .o.coGio .gio_ { display: block; animation: nhay .7s steps(2) infinite; }
#tcMap .o.chon { border-color: var(--c2); box-shadow: inset 0 0 0 1px var(--c2), 0 0 14px rgba(61,214,198,.35); }
#tcMap .o.chon .ten { color: #bff7ee; }
#tcMap .o.ping { animation: ping 1.3s ease-out; }
#tcMap .o.canh2 { border-color: #c99bff; }
#tcMap .o.canh { border-color: var(--do); animation: canh .5s steps(2) infinite; }
#tcMap .o.khoa { background: repeating-linear-gradient(45deg, #141b30 0 8px, #10162a 8px 16px); border-color: #1a223c; }
#tcMap .o.khoa .kh, #tcMap .o.khoa .vat { display: none; } #tcMap .o.khoa .ten::after { content: ' · đang sửa'; }
#tcMap .truc { background: #101a2e; border-style: dashed; }
#tcMap .truc .dn { position: absolute; left: 6px; right: 4px; top: 22px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 800; text-align: left; }
#tcMap .truc .dn small { display: block; font-size: 10px; font-weight: 700; color: var(--mut); }
#tcMap .cua { position: absolute; z-index: 2; left: calc(var(--x) * (var(--W) + var(--G)) - var(--G) / 2); top: calc(var(--y) * (var(--H) + var(--G)) - var(--G) / 2); transform: translate(-50%, -50%); width: 44px; height: 44px; border: 0; background: transparent; padding: 0; display: grid; place-items: center; }
#tcMap .cua b { position: absolute; width: 30px; height: 30px; border-radius: 9px; background: #1a3a2e; border: 2px solid #5be37a; }
#tcMap .cua.doc b { width: 18px; height: 34px; } #tcMap .cua.ngang b { width: 34px; height: 18px; }
#tcMap .cua small { position: relative; font-size: 10px; font-weight: 900; color: #b8f5c8; text-shadow: 0 1px 2px #000; }
#tcMap .cua.doc small { writing-mode: vertical-rl; letter-spacing: -1px; }
#tcMap .cua.dong b { background: #6a1f1a; border-color: var(--do); box-shadow: 0 0 10px rgba(255,107,90,.5); }
#tcMap .cua.dong small { color: #ffd0c8; }
#tcMap .cua.an { display: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,211,107,.7); } 100% { box-shadow: 0 0 0 14px rgba(255,211,107,0); } }
@keyframes canh { 50% { box-shadow: 0 0 16px rgba(255,107,90,.7); } }
@keyframes hien { from { transform: scale(.4); opacity: 0; } }

/* ---------- bàn tay gợi ý ---------- */
#tcTay { position: fixed; z-index: 15; left: 0; top: 0; pointer-events: none; display: none; }
#tcTay.on { display: block; }
#tcTay i { position: absolute; left: -6px; top: -2px; font-size: 34px; font-style: normal; animation: cham 1s ease-in-out infinite; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
#tcTay span { position: absolute; top: 40px; width: 230px; background: #fff8e6; color: #3a2412; font-weight: 800; font-size: 13px; line-height: 1.35; padding: 8px 10px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.35); text-align: center; }
@keyframes cham { 50% { transform: translate(4px, 8px) scale(.92); } }

/* ---------- màn chính / bảng ---------- */
#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(6,9,20,.72); }
.home { max-width: 520px; margin: 0 auto; padding: calc(var(--sat) + 66px) 12px calc(var(--sab) + 24px); }
.logo { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 4px; }
.logo img { border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.logo h1 { margin: 0; font-size: 28px; font-weight: 900; line-height: 1; color: #fff; }
.logo p { margin: 3px 0 0; font-weight: 700; font-size: 13px; color: #ffd98f; }
.mo { height: calc(var(--monH) + 14px); }
.sheet { background: linear-gradient(180deg, rgba(23,33,59,.97), rgba(13,20,38,.98)); border: 1px solid #26314f; border-radius: 22px; padding: 14px; box-shadow: 0 -8px 30px rgba(0,0,0,.35); }
.btn { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 16px; background: var(--the2); color: var(--chu); font-weight: 800; font-size: 16px; margin: 8px 0; padding: 10px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.btn small { display: block; font-size: 13px; font-weight: 700; opacity: .9; margin-top: 2px; }
.btn.main { background: linear-gradient(180deg, #ffc65a, var(--c)); color: #2a1804; }
.btn.big { min-height: 74px; font-size: 22px; font-weight: 900; margin-top: 0; }
.btn.ngay { background: linear-gradient(180deg, #24406a, #1a2f52); text-align: left; }
.btn.ngay b { color: #bfe1ff; }
.sheet h3 { margin: 16px 2px 8px; font-size: 15px; font-weight: 900; display: flex; justify-content: space-between; align-items: baseline; }
.sheet h3 small { font-size: 12px; color: var(--mut); font-weight: 700; }
.dems { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dems .d { min-height: 54px; border: 2px solid #2a3557; border-radius: 12px; background: var(--the); padding: 4px 2px; }
.dems .d b { display: block; font-size: 18px; font-weight: 900; } .dems .d small { display: block; font-size: 10px; font-weight: 800; color: #ffd36b; }
.dems .d.chon { border-color: var(--c); background: #2c2a1e; }
.dems .d.khoa { opacity: .45; } .dems .d.khoa small { color: var(--mut); }
.viec > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; background: var(--the); border-radius: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.viec > div i { grid-column: 1; display: block; height: 5px; background: #0a0f1d; border-radius: 4px; overflow: hidden; } .viec > div em { display: block; height: 100%; background: var(--c2); }
.viec > div b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #ffd36b; font-size: 12px; }
.viec > div.xong { opacity: .6; }
.hang { display: flex; gap: 8px; margin-top: 8px; }
.link { border: 0; background: var(--the2); color: var(--chu); border-radius: 14px; min-height: 46px; padding: 10px 12px; font-weight: 800; font-size: 14px; width: 100%; margin-top: 8px; }
.hang .link { margin-top: 0; } .link small { color: #ffd36b; }
.panel { background: #f8f5ee; color: #1d2540; border-radius: 22px; padding: 18px; max-width: 480px; margin: calc(var(--sat) + 40px) auto 24px; width: calc(100% - 24px); }
.panel h2 { margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; } .panel h2 small { font-size: 14px; color: #a86a12; }
.panel h3 { margin: 14px 0 4px; font-size: 15px; }
.panel p, .panel li { color: #4a5578; font-weight: 600; line-height: 1.5; font-size: 14px; }
.panel ul { padding-left: 18px; margin: 4px 0; } .panel li { margin: 4px 0; } .panel li.chua { opacity: .55; } .panel li b { color: #1d2540; }
.panel .btn { background: #e8e2d4; color: #1d2540; } .panel .btn.main { background: linear-gradient(180deg, #ffc65a, var(--c)); color: #2a1804; }
.nc { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e3dccb; }
.nc > i { font-size: 26px; font-style: normal; } .nc span { flex: 1; } .nc b { display: block; font-size: 14px; } .nc b small { color: #c48a1a; letter-spacing: 1px; } .nc em { display: block; font-style: normal; font-size: 12px; color: #5d6a8a; font-weight: 600; }
.nc button { border: 0; border-radius: 12px; background: var(--c); color: #2a1804; font-weight: 900; padding: 10px 12px; min-height: 44px; min-width: 76px; } .nc button.thieu { background: #e3dccb; color: #8a7a5a; } .nc button:disabled { background: #d9f2e2; color: #2a7a4a; }
.foot { color: var(--mut); font-size: 12px; text-align: center; margin: 16px 0 0; }
.foot a { color: #ffd36b; }
@media (min-height: 900px) { :root { --monH: clamp(200px, 33vh, 320px); } }