/* Jasmine Race — bảng màu theo bản vẽ: nền đêm xanh, điểm nhấn hồng-cam, vàng cho top */
:root{
  --nen:#151A36; --the:#222A55; --the2:#2B3468; --chu:#FFFFFF; --mo:#AAB3D6;
  --hong:#FF4D8D; --cam:#FF9F43; --vang:#F6B80B; --xanh:#34D399; --do:#FF6B8B; --troi:#60A5FA;
  --an-tren:env(safe-area-inset-top,0px); --an-duoi:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--nen);color:var(--chu);font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--hong);outline-offset:2px}
[hidden]{display:none!important}

#app{min-height:100vh;padding:calc(var(--an-tren) + 12px) 14px calc(var(--an-duoi) + 92px);max-width:560px;margin:0 auto}
.loading{min-height:80vh;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--mo)}
.logo{font-size:56px}

/* đầu trang */
.dau{display:flex;justify-content:space-between;align-items:baseline;padding:4px 4px 10px}
.dau h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em}
.dau small{color:var(--mo);font-size:13px}
.bang{border-radius:14px;padding:10px 12px;font-size:13.5px;margin-bottom:10px;background:var(--the)}
.bang.dem{background:linear-gradient(90deg,#2A2560,#1E2450);color:#C9CFF0}
.bang.mau{background:#3A2A12;color:#FFD89A}
.bang.canh{background:#3A2140;color:#FFC2D4}

/* thẻ chuông */
.ds{display:grid;gap:10px}
.chuong{background:var(--the);border-radius:16px;padding:12px;display:grid;gap:8px;border-left:5px solid var(--troi)}
.chuong.do{border-left-color:var(--do)} .chuong.cam{border-left-color:var(--cam)} .chuong.vui{border-left-color:var(--xanh)}
.chuong .tren{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mo);font-weight:600}
.chuong .tieu{font-size:16px;font-weight:700;line-height:1.35}
.chuong .noi{font-size:13.5px;color:#D6DBF3}
.chuong .sao{font-size:11.5px;color:var(--mo)}
.hang-nut{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nut{display:flex;justify-content:center;align-items:center;gap:6px;min-height:46px;padding:10px 12px;border-radius:13px;font-weight:700;font-size:15px;background:var(--the2);text-decoration:none;color:var(--chu)}
.nut.chinh{background:linear-gradient(135deg,var(--hong),var(--cam));box-shadow:0 6px 16px -8px var(--hong)}
.nut.rong{grid-column:1/-1}
.nut:disabled{opacity:.5}
.trong{text-align:center;color:var(--mo);padding:40px 10px}
.trong .to{font-size:44px}

/* thang 30 phút */
.thang{display:flex;gap:4px;align-items:center}
.thang i{width:12px;height:16px;border-radius:3px;background:#3A4270;display:inline-block}
.thang i.vang{background:#F2C200} .thang i.cam{background:#E8731A} .thang i.do{background:#D32F2F} .thang i.qua{background:#6D76A8}

/* danh sách khách */
.nhom{margin:14px 4px 6px;font-size:12.5px;font-weight:700;color:var(--mo);letter-spacing:.04em;text-transform:uppercase}
.khach{background:var(--the);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;text-decoration:none;color:var(--chu)}
.khach .d{font-size:16px}
.khach .ten{font-weight:700;font-size:14.5px}
.khach .gio{font-size:12px;font-weight:700;color:var(--mo);font-variant-numeric:tabular-nums}
.khach .phu{grid-column:2/4;font-size:12px;color:var(--mo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khach.gap{box-shadow:inset 0 0 0 1.5px var(--do)}

/* đăng nhập */
.dang-nhap{min-height:78vh;display:grid;align-content:center;gap:14px}
.dang-nhap h1{margin:0;font-size:30px;font-weight:800}
.dang-nhap p{margin:0;color:var(--mo)}
.o-nhap{width:100%;min-height:50px;border-radius:13px;border:1.5px solid #3A4270;background:#10142B;color:var(--chu);padding:0 14px;font-size:17px}
.o-nhap.ma{letter-spacing:.4em;text-align:center;font-weight:700}
.hoac{text-align:center;color:var(--mo);font-size:13px}
.huong-dan{background:var(--the);border-radius:16px;padding:14px;display:grid;gap:8px;font-size:14.5px}
.huong-dan ol{margin:0;padding-left:20px;display:grid;gap:6px}

/* cài đặt */
.dong{background:var(--the);border-radius:14px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14.5px}
.dong small{display:block;color:var(--mo);font-size:12px}

/* thanh dưới */
.thanh{position:fixed;left:0;right:0;bottom:0;background:rgba(16,20,43,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #262D5A;padding:8px 10px calc(var(--an-duoi) + 8px);display:flex;justify-content:center}
.thanh .trong-thanh{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:560px}
.tab{display:grid;justify-items:center;gap:3px;background:none;font-size:11px;font-weight:700;color:var(--mo);padding:4px 0;position:relative}
.tab .bt{font-size:23px;line-height:1}
.tab.on{color:var(--chu)}
.tab .so{position:absolute;top:0;left:calc(50% + 6px);background:var(--do);color:#fff;font-size:10.5px;font-weight:800;border-radius:99px;padding:2px 6px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--an-duoi) + 86px);background:#0B0E1F;border:1px solid #33407A;color:var(--chu);padding:10px 14px;border-radius:12px;font-size:14px;z-index:9;max-width:90vw}
@media (prefers-reduced-motion:no-preference){ .chuong.moi{animation:hien .45s ease-out} @keyframes hien{from{transform:translateY(-6px);opacity:0}} }

.sao{font-size:12.5px;color:var(--mo)}