* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #2d3436; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font-family: inherit; border: 0; cursor: pointer; touch-action: manipulation; }
input { font-family: inherit; font-size: 16px; } /* 16px để iPhone không tự phóng to */

/* ---------- Đang tải ---------- */
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(#ffb36b, #ff7f50); color: #fff; font-weight: 700; font-size: 18px; z-index: 50; text-align: center; padding: 20px; }
#loading .logo { font-size: 72px; animation: bob 1s ease-in-out infinite alternate; }
#loadErr { background: rgba(0,0,0,.25); padding: 10px 14px; border-radius: 12px; font-size: 15px; max-width: 320px; }
@keyframes bob { to { transform: translateY(-10px) rotate(-8deg); } }

/* ---------- Menu ---------- */
#menu { position: fixed; left: 0; right: 0; bottom: 0; max-height: 64%; overflow-y: auto; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); z-index: 20; -webkit-overflow-scrolling: touch; }
#menu h1 { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0; margin: 0; text-align: center; color: #fff; font-size: 28px; line-height: 1.05; text-shadow: 0 3px 0 #d35400, 0 6px 12px rgba(0,0,0,.25); pointer-events: none; }
#menu h1 span { font-size: 18px; color: #ffeaa7; }
.card { background: rgba(255,255,255,.94); border-radius: 18px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 600; font-size: 14px; }
.row .lbl { width: 72px; flex: none; }
.row input { flex: 1; padding: 8px 10px; border: 2px solid #ffd3a5; border-radius: 10px; outline: none; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.seg button { padding: 7px 10px; border-radius: 10px; background: #f1f2f6; font-weight: 600; font-size: 13px; color: #2d3436; }
.seg button.on { background: #ff7f50; color: #fff; }
.sw { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.sw button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #ccc; }
.sw button.on { box-shadow: 0 0 0 3px #ff7f50; }
.big { display: block; width: 100%; padding: 13px; border-radius: 14px; font-size: 17px; font-weight: 800; color: #fff; margin: 6px 0; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.big:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.big:disabled { opacity: .45; }
.green { background: #27ae60; color: #fff; } .blue { background: #2980b9; color: #fff; } .orange { background: #ff7f50; color: #fff; } .gray { background: #95a5a6; color: #fff; }
.joinrow { display: flex; gap: 8px; }
.joinrow input { width: 120px; flex: none; text-align: center; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; border: 2px solid #74b9ff; border-radius: 12px; margin: 6px 0; }
.net { font-size: 13px; font-weight: 600; padding: 4px 2px 6px; }
.foot { text-align: center; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #hud .pill { pointer-events: auto; }
.topbar { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.topbar .right { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pill { background: rgba(255,255,255,.92); border-radius: 999px; padding: 7px 11px; font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px rgba(0,0,0,.15); white-space: nowrap; }
.pill.money b { color: #27ae60; }
.pill.btn { color: #2d3436; }
#btnServe { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 15px 28px; font-size: 20px; font-weight: 800; border-radius: 999px; color: #fff; background: #e67e22; box-shadow: 0 5px 0 #a04000, 0 8px 20px rgba(0,0,0,.25); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.06); } }
#btnChat, #btnHome { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; font-size: 26px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
#btnChat { right: 14px; } #btnHome { left: 14px; }
#chatLog { position: absolute; left: 10px; bottom: calc(96px + env(safe-area-inset-bottom)); max-width: 70%; display: flex; flex-direction: column; gap: 4px; }
#chatLog div { background: rgba(0,0,0,.5); color: #fff; padding: 5px 9px; border-radius: 10px; font-size: 13px; animation: fadeout 8s forwards; }
#chatLog b { color: #ffeaa7; }
@keyframes fadeout { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Bảng làm bánh ---------- */
#cook { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #fff8ee; border-radius: 22px 22px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
.cookHead { display: flex; gap: 8px; align-items: flex-start; }
.order { flex: 1; background: #fff; border: 2px dashed #e17055; border-radius: 14px; padding: 8px 10px; font-size: 14px; font-weight: 600; min-height: 54px; }
.order .em { font-size: 22px; }
.order .bar { height: 7px; background: #eee; border-radius: 4px; margin-top: 5px; overflow: hidden; }
.order .bar i { display: block; height: 100%; background: #27ae60; transition: width .2s; }
.x { width: 40px; height: 40px; border-radius: 50%; background: #dfe6e9; font-size: 18px; font-weight: 800; }
.recipe { margin: 8px 2px; font-size: 15px; font-weight: 700; min-height: 22px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ing { background: #fff; border-radius: 14px; padding: 8px 2px; font-size: 26px; box-shadow: 0 3px 0 #e0d6c8; display: flex; flex-direction: column; align-items: center; color: #2d3436; }
.ing span { font-size: 12px; font-weight: 700; margin-top: 2px; }
.ing { position: relative; border: 2px solid transparent; }
.ing.on { background: #ffe58a; box-shadow: 0 3px 0 #e1b12c; border-color: #f39c12; }
.ing.on::after { content: '✓'; position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #27ae60; color: #fff; font-size: 13px; font-weight: 900; line-height: 20px; text-align: center; }
.ing.baseBtn { border-style: dashed; border-color: #f0b27a; }
.ing.baseBtn.on { border-style: solid; border-color: #f39c12; }
.ing.gray { background: #f1f2f6; }
.ing:active { transform: translateY(2px); }

/* ---------- Chat ---------- */
#chat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 16; background: #fff; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.2); }
.emojis { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
.emojis button { font-size: 26px; background: #f1f2f6; border-radius: 12px; padding: 4px 8px; flex: none; }
#chatForm { display: flex; gap: 6px; }
#chatForm input { flex: 1; padding: 10px; border-radius: 12px; border: 2px solid #74b9ff; outline: none; }
#chatForm button { padding: 0 14px; border-radius: 12px; font-weight: 800; font-size: 15px; }

/* ---------- Nhãn nổi trong 3D ---------- */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.lbl3d { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; will-change: transform; }
.tag { font-size: 12px; font-weight: 800; color: #fff; background: rgba(0,0,0,.45); padding: 2px 7px; border-radius: 8px; }
.tag.me { background: rgba(230,126,34,.9); }
.bubble { background: #fff; border-radius: 14px; padding: 6px 10px; font-size: 13px; font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.25); max-width: 210px; white-space: normal; text-align: center; }
.bubble.say { background: #fffbe6; }
.bubble.chatb { background: #e8f4ff; }
.ordb { background: #fff; border-radius: 12px; padding: 3px 7px 4px; font-size: 18px; box-shadow: 0 3px 8px rgba(0,0,0,.25); text-align: center; }
.ordb .bar { height: 5px; background: #eee; border-radius: 3px; margin-top: 2px; overflow: hidden; width: 70px; }
.ordb .bar i { display: block; height: 100%; }
.float { font-size: 20px; font-weight: 900; color: #27ae60; text-shadow: 0 2px 0 #fff, 0 0 6px #fff; }
.float.bad { color: #e74c3c; }

#toast { position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(45,52,54,.92); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; z-index: 30; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; }

/* ---------- v0.2: đóng/mở cửa, mua đồ ---------- */
.pill.closedPill { background: #ffeaa7; color: #c0392b; }
#btnShop { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 14px 22px; font-size: 17px; font-weight: 800; border-radius: 999px; color: #fff; background: #6c5ce7; box-shadow: 0 5px 0 #3c2f9e, 0 8px 20px rgba(0,0,0,.25); max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#shop { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #f3f0ff; border-radius: 22px 22px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
#shopTitle { border-color: #6c5ce7; font-size: 17px; min-height: 0; }
.shopHint { font-size: 13px; font-weight: 600; margin: 8px 2px; color: #4b4b6b; }
#shopList { display: flex; flex-direction: column; gap: 7px; }
.shopItem { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 15px; font-weight: 700; box-shadow: 0 3px 0 #d6d0f5; color: #2d3436; text-align: left; }
.shopItem .se { font-size: 26px; } .shopItem .sn { flex: 1; } .shopItem b { color: #27ae60; }
.shopItem:active { transform: translateY(2px); }
.tag.closed { background: rgba(192,57,43,.9); font-size: 13px; }
.tag.shopTag { background: rgba(108,92,231,.88); }

/* ---------- v0.3: nâng cấp, bàn bẩn ---------- */
#upg { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #fffbea; border-radius: 22px 22px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.25); max-height: 75%; overflow-y: auto; }
#upgTitle { border-color: #f39c12; font-size: 16px; min-height: 0; }
#upgTitle b { color: #27ae60; }
#upgList { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.upItem { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 9px 10px; box-shadow: 0 3px 0 #f1e3b8; }
.upItem .ue { font-size: 30px; }
.upItem .ut { flex: 1; font-size: 12.5px; color: #555; }
.upItem .ut b { font-size: 15px; color: #2d3436; }
.upBtn { background: #27ae60; color: #fff; font-weight: 800; font-size: 14px; padding: 10px 10px; border-radius: 12px; min-width: 96px; box-shadow: 0 3px 0 #1e8449; }
.upBtn.poor { background: #b2bec3; box-shadow: 0 3px 0 #95a5a6; }
.upBtn.max { background: #f1c40f; color: #7d5a00; box-shadow: none; }
.tag.dirtyTag { background: rgba(230,126,34,.95); font-size: 13px; }

/* ---------- v0.4: sự kiện, giao hàng, nhiệm vụ, tổng kết ---------- */
#banner { position: absolute; left: 50%; top: calc(var(--hudB, 100px) + 6px); transform: translateX(-50%); width: min(92vw, 420px); padding: 10px 14px; border-radius: 14px; font-weight: 800; font-size: 15px; text-align: center; color: #fff; background: rgba(41,128,185,.95); box-shadow: 0 6px 18px rgba(0,0,0,.3); animation: pop .3s; }
#banner.alarm { background: rgba(192,57,43,.96); animation: pop .3s, shake .5s .3s; }
#banner.good { background: rgba(39,174,96,.96); }
#banner.bad { background: rgba(211,84,0,.96); }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
@keyframes shake { 25% { margin-left: -6px; } 75% { margin-left: 6px; } }
#comboFx { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 34px; font-weight: 900; color: #ffeb3b; text-shadow: 0 3px 0 #e65100, 0 0 12px rgba(0,0,0,.4); white-space: nowrap; animation: combo 1.1s forwards; }
@keyframes combo { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -90%) scale(1); opacity: 0; } }
#phone { position: absolute; right: 10px; top: calc(var(--hudB, 100px) + 84px); width: 250px; background: #fff; border-radius: 18px; padding: 10px 12px; box-shadow: 0 8px 22px rgba(0,0,0,.3); pointer-events: auto; border: 3px solid #27ae60; animation: ring .25s 4 alternate; }
@keyframes ring { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.ph1 { font-size: 15px; } .ph1 span { float: right; color: #c0392b; font-weight: 800; }
.ph2 { font-size: 14px; font-weight: 600; margin: 6px 0; }
.ph3 { display: flex; gap: 6px; } .ph3 button { flex: 1; padding: 10px 4px; border-radius: 12px; font-weight: 800; font-size: 14px; }
#deliveryPill { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); max-width: 92vw; overflow: hidden; text-overflow: ellipsis; background: #fff3cd; border: 2px solid #f39c12; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.2); white-space: nowrap; }
#deliveryPill.urgent { background: #ffd6d6; border-color: #e74c3c; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #f0fff4; border-radius: 22px 22px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
.mItem { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; margin-top: 8px; font-weight: 700; font-size: 14px; }
.mItem .mp { flex: 1; } .mItem .mbar { height: 6px; background: #eee; border-radius: 3px; margin-top: 5px; overflow: hidden; } .mItem .mbar i { display: block; height: 100%; background: #27ae60; }
.mItem.done { background: #d4f7dc; }
.mItem b { color: #27ae60; white-space: nowrap; }
#daySheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dayCard { background: #fffaf0; border-radius: 22px; padding: 16px; width: min(92vw, 380px); max-height: 85vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.dayCard h2 { margin: 0 0 4px; text-align: center; color: #e67e22; }
.stars { text-align: center; font-size: 30px; letter-spacing: 2px; margin-bottom: 6px; }
.dRow { display: flex; justify-content: space-between; padding: 5px 2px; border-bottom: 1px dashed #eadbc8; font-size: 14px; font-weight: 600; }
.dRow.total { font-size: 17px; border: 0; color: #27ae60; } .dRow.total.neg { color: #c0392b; }
#dayNext { margin-top: 10px; font-size: 13px; font-weight: 600; color: #555; }
.ing .cnt { font-size: 11px; background: #2d3436; color: #fff; border-radius: 8px; padding: 0 6px; margin-top: 2px; }
.ing.empty { opacity: .45; } .ing.empty .cnt { background: #e74c3c; }
.tag.thief { background: rgba(192,57,43,.95); font-size: 13px; animation: blink .5s infinite alternate; }
.tag.patrol { background: rgba(44,62,80,.95); }
.tag.dest { background: rgba(243,156,18,.95); font-size: 14px; }
@keyframes blink { to { opacity: .6; } }
.mItemShop .sn small { display: block; font-weight: 600; color: #777; font-size: 12px; }
.pill { padding: 7px 10px; }
#chatLog { bottom: calc(140px + env(safe-area-inset-bottom)); }
.stars.none { font-size: 18px; letter-spacing: 0; color: #888; }

/* ---------- v0.5: tab nâng cấp, món kèm ---------- */
.tabs { display: flex; gap: 6px; margin-top: 8px; }
.tabs button { flex: 1; padding: 9px 4px; border-radius: 12px; background: #f1e3b8; font-weight: 800; font-size: 13.5px; color: #6d4c00; }
.tabs button.on { background: #f39c12; color: #fff; }
.upItem .nx { color: #27ae60; font-weight: 700; }
.upItem.focus { outline: 3px solid #f39c12; }
.ing.side { background: #e8f8f5; }
.ing.side.on { background: #a3e4d7; }
#menuSave { font-size: 13px; font-weight: 700; margin: 4px 0 2px; color: #6d4c00; }
#btnReset { background: none; color: #c0392b; font-weight: 700; font-size: 13px; padding: 4px 0; text-decoration: underline; }

/* bảng nâng cấp: tiêu đề + tab đứng yên, chỉ danh sách cuộn */
#upg { display: flex; flex-direction: column; max-height: 78%; overflow: hidden; }
#upg:not(.hidden) { display: flex; }
#upgList { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; padding-bottom: 6px; }

/* ---------- v0.6: kim cương, thi công ---------- */
.pill.gems b { color: #8e44ad; }
#boostPill { background: #fff3cd; }
#buildPill { background: #ffe0b2; }
#buildCard { background: #fff; border: 2px solid #f39c12; border-radius: 14px; padding: 9px 11px; margin-top: 8px; font-weight: 700; font-size: 14px; }
#buildCard .bbar { height: 8px; background: #f1e3b8; border-radius: 4px; margin: 6px 0; overflow: hidden; }
#buildCard .bbar i { display: block; height: 100%; background: linear-gradient(90deg, #f39c12, #e67e22); }
#buildCard .brow { display: flex; align-items: center; gap: 8px; }
#buildCard .brow span { flex: 1; }
.gemBtn { background: #8e44ad; color: #fff; font-weight: 800; font-size: 14px; padding: 10px 12px; border-radius: 12px; box-shadow: 0 3px 0 #5b2c6f; white-space: nowrap; }
.gemBtn.poor { background: #b2a4bd; box-shadow: none; }
.upBtn.busy { background: #f0b27a; box-shadow: 0 3px 0 #ca6f1e; }
.upItem .tm { color: #7f8c8d; font-size: 12px; }
#gemShop { background: #f6f0ff; max-height: 80%; display: flex; flex-direction: column; }
#gemShop.hidden { display: none; }
#gemList { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; flex: 1; }
.gemHead b { color: #8e44ad; font-size: 18px; }
.gsec { font-weight: 800; font-size: 15px; margin: 12px 2px 4px; color: #4a235a; }
.gItem { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 9px 10px; margin-top: 7px; box-shadow: 0 3px 0 #e3d5f0; }
.gItem .ge { font-size: 28px; } .gItem .gt { flex: 1; font-size: 12.5px; color: #555; } .gItem .gt b { font-size: 14.5px; color: #2d3436; }
.testNote { background: #fff3cd; border: 1px dashed #f39c12; border-radius: 12px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: #7d5a00; margin-top: 8px; }
.payBtn { background: #27ae60; color: #fff; font-weight: 800; font-size: 13px; padding: 9px 10px; border-radius: 12px; box-shadow: 0 3px 0 #1e8449; text-align: center; line-height: 1.25; }
.tag.build { background: rgba(230,126,34,.95); font-size: 13px; }

/* ---------- v0.7 ---------- */
.gfxBtn { display: block; margin: 0 auto 8px; background: rgba(255,255,255,.85); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; color: #2d3436; }
@keyframes gain { 30% { transform: scale(1.15); } }
.pill.money.gain { animation: gain .35s; }

.gtabs button { font-size: 12.5px; padding: 8px 2px; }
#popup { position: fixed; inset: 0; z-index: 41; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
#popup.hidden { display: none; }
.dailyRow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 10px 0; }
.dailyRow div { background: #f1e3b8; border-radius: 10px; padding: 6px 0; text-align: center; font-size: 11px; font-weight: 700; color: #6d4c00; }
.dailyRow div b { display: block; font-size: 15px; }
.dailyRow div.done { background: #d4f7dc; color: #1e8449; }
.dailyRow div.today { background: #f39c12; color: #fff; transform: scale(1.08); }
.bigNum { text-align: center; font-size: 30px; font-weight: 900; color: #27ae60; margin: 8px 0; }
.popBtns { display: flex; gap: 8px; } .popBtns .big { flex: 1; }
.cosItem .eqd { background: #27ae60; color: #fff; font-weight: 800; font-size: 13px; padding: 9px 12px; border-radius: 12px; }
.cosItem .eqBtn { background: #3498db; color: #fff; font-weight: 800; font-size: 13px; padding: 9px 12px; border-radius: 12px; box-shadow: 0 3px 0 #21618c; }
.offerCard { background: linear-gradient(135deg, #fff3cd, #ffe0f0); border: 2px solid #f39c12; border-radius: 16px; padding: 10px 12px; margin-top: 8px; }
.offerCard h3 { margin: 0 0 4px; font-size: 16px; } .offerCard p { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #555; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 2px; border: 1px solid rgba(0,0,0,.2); }
.pill.btn.off { opacity: .45; text-decoration: line-through; }

/* ---- v0.9: cạnh tranh & mưa ---- */
#btnCallBack { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom)); padding: 12px 22px; font-size: 18px; font-weight: 800; border-radius: 999px; color: #fff; background: #c0392b; box-shadow: 0 5px 0 #7b241c, 0 8px 20px rgba(0,0,0,.25); animation: pulse .6s infinite; z-index: 3; white-space: nowrap; }
.tag.lured { background: rgba(142,68,173,.95); font-size: 13px; animation: blink .4s infinite alternate; pointer-events: none; }
.bubble.shout { background: #ffe0e0; border: 2px solid #e74c3c; font-weight: 800; }
.tag.sale { background: rgba(231,76,60,.95); font-size: 13px; animation: blink .5s infinite alternate; }
#weatherPill.warn { background: #dfe6e9; color: #2d3436; animation: blink .6s infinite alternate; }
#weatherPill.rain { background: #74b9ff; color: #fff; }
#weatherPill.storm { background: #2d3436; color: #ffeaa7; }
.pill.promoOn { background: #27ae60; color: #fff; }
.pill.promoCd { opacity: .6; }
.pill.tarpBtn { background: #0984e3; color: #fff; animation: blink .6s infinite alternate; }
#dayRank { margin-top: 10px; background: #fff8ee; border-radius: 12px; padding: 6px 10px; }
#dayRank h4 { margin: 2px 0 4px; font-size: 15px; }
.rk { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; padding: 3px 0; }
.rk.me { color: #d35400; font-weight: 800; }
body.luring #toast { bottom: calc(215px + env(safe-area-inset-bottom)); }

/* ---- v0.10: phê bình, sự cố, lễ hội ---- */
#festPill { background: linear-gradient(90deg,#ff7675,#fdcb6e); color: #fff; }
#famePill.fame { background: #fdcb6e; color: #6c3483; }
#famePill.shame { background: #636e72; color: #fff; }
#outPill { background: #e17055; color: #fff; animation: blink .5s infinite alternate; }
.tag.critic { background: rgba(108,52,131,.95); font-size: 13px; }
.choiceRow { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ---- v0.10 đợt 2: đua, phụ bán, chợ đêm ---- */
#btnHelp { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 14px 22px; font-size: 17px; font-weight: 800; border-radius: 999px; color: #fff; background: #00b894; box-shadow: 0 5px 0 #00795f, 0 8px 20px rgba(0,0,0,.25); white-space: nowrap; }
#racePill { background: #0984e3; color: #fff; }
#helpPill { background: #00b894; color: #fff; }
#eventSheet { background: #f5f0ff; max-height: 72vh; overflow-y: auto; }
.evCard { background: #fff; border-radius: 14px; padding: 10px 12px; margin: 8px 0; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.evCard h3 { margin: 0 0 4px; font-size: 16px; }
.evCard p { margin: 4px 0; font-size: 13px; color: #555; }
.evCard .big { width: 100%; margin-top: 6px; }
.evBar { height: 10px; background: #eee; border-radius: 6px; overflow: hidden; margin: 6px 0; } .evBar i { display: block; height: 100%; background: linear-gradient(90deg,#6c5ce7,#fd79a8); }

/* ---- v0.10 đợt 3 ---- */
#upgTabs button { padding-left: 6px; padding-right: 6px; font-size: 13px; }
.upItem.locked { opacity: .55; }
.recipeItem .mbar { margin-top: 4px; }
.tag.rat { background: rgba(99,110,114,.95); font-size: 13px; animation: blink .4s infinite alternate; }

/* ---- v0.11 đợt A ---- */
.tag.regular { background: rgba(232,67,147,.92); font-size: 13px; }
#mini { position: absolute; inset: 0; background: rgba(255,248,238,.97); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 5; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#mini .mtext { font-weight: 800; font-size: 15px; text-align: center; padding: 0 10px; }
#mini .mbarx { position: relative; width: 86%; height: 30px; background: #ffd6d6; border-radius: 15px; overflow: hidden; border: 3px solid #e17055; }
#mini .mzone { position: absolute; top: 0; bottom: 0; background: #2ecc71; }
#mini .mneedle { position: absolute; top: -4px; bottom: -4px; width: 6px; margin-left: -3px; background: #2d3436; border-radius: 3px; }
#mini .mres { font-size: 22px; font-weight: 900; color: #d35400; min-height: 28px; }
#mini .mtap { font-size: 13px; color: #888; }
#coach { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(110px + env(safe-area-inset-bottom)); width: min(92vw, 420px); background: #fff; border: 3px solid #6c5ce7; border-radius: 18px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 40; font-size: 15px; font-weight: 600; pointer-events: auto; }
#coach.lowTop { bottom: auto; top: calc(var(--hudB, 100px) + 6px); }
#coach small { color: #6c5ce7; font-weight: 800; margin-right: 4px; }
#coach .coachBtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#coach .coachBtns button { padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 14px; }
.coachHi { outline: 4px solid #fdcb6e !important; outline-offset: 3px; animation: blink .5s infinite alternate; }

/* ---- v0.11 đợt B ---- */
#tempPill.hot { background: #ff7675; color: #fff; } #tempPill.cold { background: #74b9ff; color: #fff; }
#bossPill { background: #2d3436; color: #ffeaa7; }
#movePill { background: #fdcb6e; color: #6c3483; }
#weatherPill.flood { background: #0984e3; color: #fff; animation: blink .6s infinite alternate; }
.tag.zone { background: rgba(253,203,110,.95); color: #6c3483; font-size: 14px; }
.zoneBtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.zoneBtns button { padding: 8px 6px; border-radius: 12px; font-weight: 700; font-size: 13px; background: #f1f2f6; }
.zoneBtns button.on { background: #fdcb6e; }

#storyPill { background: #fff3cd; color: #6c3483; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; }
.storyTxt { font-size: 15px; line-height: 1.45; background: #fff8ee; border-radius: 12px; padding: 10px; margin: 8px 0; }

/* ---- v0.12: tài khoản & cộng đồng ---- */
.accBox { margin-top: 12px; background: #fff8ee; border-radius: 16px; padding: 10px 12px; font-size: 14px; }
.accBox h4 { margin: 0 0 6px; font-size: 15px; }
.accBox input, #socialList input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 10px; border: 2px solid #eadbc8; font-size: 16px; margin: 3px 0; }
.accBox .row2 { display: flex; gap: 6px; margin-top: 6px; } .accBox .row2 button { flex: 1; padding: 9px 4px; border-radius: 12px; font-weight: 800; font-size: 14px; }
.accBox small { color: #777; }
#socialSheet { background: #f0f7ff; max-height: 78vh; overflow-y: auto; }
#socialSheet .tabs button { font-size: 13px; }
#socialSheet { z-index: 70; } #popup { z-index: 80; }

/* ---- v0.15: bản đồ theo khu ---- */
#mapFade { position: fixed; inset: 0; z-index: 35; background: rgba(20,24,40,.82); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; opacity: 0; transition: opacity .5s; pointer-events: none; }
#mapFade.show { opacity: 1; }
#mapFade b { font-size: 30px; } #mapFade small { font-size: 15px; max-width: 320px; opacity: .9; }

/* ---- v0.16: cảnh đẩy xe đi đường ---- */
#travelBar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom)); width: min(92vw, 420px); background: rgba(255,255,255,.95); border-radius: 18px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 30; font-weight: 800; font-size: 15px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
#travelBar .tbar { height: 10px; background: #eee; border-radius: 6px; overflow: hidden; } #travelBar .tbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#fdcb6e,#e17055); transition: width .2s linear; }
#travelBar button { align-self: flex-end; padding: 6px 12px; border-radius: 12px; background: #636e72; color: #fff; font-weight: 800; }
body.traveling .lbl3d, body.traveling #btnServe, body.traveling #btnShop, body.traveling #btnHelp, body.traveling #btnHome, body.traveling #btnCallBack, body.traveling #banner, body.traveling #phone, body.traveling #deliveryPill, body.traveling #coach { display: none !important; }
body.traveling .topbar .right { display: none; }

/* ---- v0.17: giao diện gọn — menu ☰ gom chức năng phụ ---- */
.topbar .pill { font-size: 13px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.topbar .pill.money, #btnGems, #clock { font-size: 14px; }
.topbar .iconBtn { width: 40px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
#btnMenu { background: #2d3436; color: #fff; font-weight: 900; }
#storyPill { max-width: 46vw; }
#moreMenu { position: absolute; right: 8px; top: calc(var(--hudB, 100px) + 6px); z-index: 26; display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; padding: 10px; background: rgba(255,255,255,.96); border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.28); pointer-events: auto; animation: pop .18s; }
#moreMenu.hidden { display: none; }
.mItemBtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 64px; border-radius: 14px; background: #f5f6fa; box-shadow: 0 3px 0 #dcdde1; font-weight: 800; color: #2d3436; }
.mItemBtn span { font-size: 24px; line-height: 1; } .mItemBtn small { font-size: 11px; white-space: nowrap; }
.mItemBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #dcdde1; }
.mItemBtn.closedPill { background: #ffeaa7; color: #c0392b; }
.mItemBtn.promoOn { background: #27ae60; color: #fff; } .mItemBtn.promoCd { opacity: .55; }
.mItemBtn.off { opacity: .5; }
/* bong bóng thoại nhỏ gọn, ít che nhân vật */
.bubble { font-size: 12px; padding: 4px 8px; max-width: 160px; border-radius: 12px; opacity: .94; }
.ordb { font-size: 15px; padding: 2px 6px 3px; }

/* Lớp mưa nhẹ bằng CSS (rất nhẹ cho GPU điện thoại): vệt mưa xiên + sương mờ */
#rainFx { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .55;
  background-image: repeating-linear-gradient(105deg, rgba(220,235,255,0) 0 18px, rgba(220,235,255,.45) 18px 19px, rgba(220,235,255,0) 19px 41px),
                    repeating-linear-gradient(100deg, rgba(220,235,255,0) 0 31px, rgba(220,235,255,.3) 31px 32px, rgba(220,235,255,0) 32px 67px),
                    linear-gradient(rgba(90,110,140,.18), rgba(90,110,140,.10));
  background-size: 240px 240px, 330px 330px, 100% 100%;
  animation: rainFall .45s linear infinite; }
#rainFx.storm { opacity: .8; animation-duration: .3s; }
#rainFx.hidden { display: none; }
@keyframes rainFall { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -40px 240px, -50px 330px, 0 0; } }
body.traveling #rainFx { display: none; }

/* ---- v0.19: intro giới thiệu ---- */
#intro { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#intro.hidden { display: none; }
#intro button { pointer-events: auto; }
#intro::before, #intro::after { content: ''; position: absolute; left: 0; right: 0; height: 9vh; background: #000; } /* khung điện ảnh */
#intro::before { top: 0; } #intro::after { bottom: 0; }
.introBtns { position: absolute; top: calc(10vh + env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
.introBtns button { padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-weight: 800; font-size: 14px; border: 1px solid rgba(255,255,255,.35); }
#introSub { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(12vh + env(safe-area-inset-bottom)); width: min(92vw, 520px); text-align: center; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.35; text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 0 2px #000; transition: opacity .35s; }
#introZone { position: absolute; left: 50%; top: 22vh; transform: translateX(-50%); font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 3px 10px rgba(0,0,0,.7); }
#introLogo { position: absolute; left: 50%; top: 30vh; transform: translateX(-50%); text-align: center; animation: logoIn .9s cubic-bezier(.2,1.4,.4,1); }
#introLogo .lg1 { font-size: 40px; font-weight: 900; color: #ffd32a; letter-spacing: 1px; -webkit-text-stroke: 2px #b33939; text-shadow: 0 5px 0 #b33939, 0 10px 18px rgba(0,0,0,.45); white-space: nowrap; }
#introLogo .lg2 { font-size: 26px; font-weight: 900; color: #fff; background: #e17055; display: inline-block; padding: 2px 16px; border-radius: 999px; margin-top: 6px; box-shadow: 0 4px 0 #b33939; }
#introLogo .lg3 { margin-top: 14px; font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
@keyframes logoIn { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
#introPlay { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(11vh + env(safe-area-inset-bottom)); padding: 15px 30px; font-size: 20px; font-weight: 900; border-radius: 999px; color: #fff; background: #e67e22; box-shadow: 0 5px 0 #a04000, 0 8px 20px rgba(0,0,0,.35); animation: pulse 1.2s infinite; }
.introBubble { position: absolute; transform: translate(-50%, -100%); background: #fffbe6; border-radius: 12px; padding: 5px 10px; font-size: 13px; font-weight: 700; box-shadow: 0 3px 8px rgba(0,0,0,.3); white-space: nowrap; }
.introBubble.money { background: #27ae60; color: #fff; font-size: 16px; }
.introBtn { margin-left: 8px; }

/* ---------- v0.21: thành phố có sự sống ---------- */
.lbl3d.act, .tag.act { pointer-events: auto; cursor: pointer; }
.tag.quest { background: rgba(9,132,227,.95); font-size: 13px; box-shadow: 0 0 0 2px #fff; animation: pulse 1.4s infinite; }
.tag.res { background: rgba(0,0,0,.42); font-size: 11px; font-weight: 700; }
.tag.vipg { background: rgba(241,196,15,.95); color: #2d3436; font-size: 13px; }
.tag.benchTag, .tag.photoTag { background: rgba(255,255,255,.92); color: #2d3436; font-size: 13px; border: 2px solid #fdcb6e; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px #fff; } 50% { box-shadow: 0 0 0 5px rgba(255,255,255,.6); } }
.float.stars { font-size: 15px; color: #f1c40f; text-shadow: 0 1px 2px #000; letter-spacing: -1px; font-weight: 900; }
.float.stars i { color: rgba(255,255,255,.45); font-style: normal; }
.float.stars.s1, .float.stars.s2 { color: #e74c3c; }
.float.react { font-size: 22px; }
#evPill { background: #6c5ce7; color: #fff; font-weight: 800; }
#evPill.hot { animation: blink .5s infinite alternate; background: #e17055; }
#dlg { position: fixed; left: 10px; right: 10px; top: calc(122px + env(safe-area-inset-top)); z-index: 40; background: rgba(255,250,240,.97); border: 3px solid #e1b12c; border-radius: 16px; padding: 8px 12px 6px; box-shadow: 0 6px 18px rgba(0,0,0,.3); max-width: 520px; margin: 0 auto; }
#dlgWho { font-weight: 900; color: #b33939; font-size: 14px; }
#dlgText { font-size: 15px; line-height: 1.35; color: #2d3436; margin: 2px 0; }
#dlgFoot { font-size: 11px; color: #999; text-align: right; }
#repSheet, #journalSheet { background: #fffaf0; max-height: 78vh; overflow-y: auto; z-index: 70; }
.repTop .repLv { font-size: 20px; }
.evCard .bar { height: 10px; background: #eee; border-radius: 6px; overflow: hidden; margin: 6px 0; flex: 1; }
.evCard .bar i { display: block; height: 100%; background: linear-gradient(90deg, #fdcb6e, #e17055); }
.avgStars b { font-size: 26px; } .avgStars .st { color: #f1c40f; font-size: 20px; }
.dist { display: flex; align-items: center; gap: 6px; font-size: 12px; } .dist span { width: 26px; } .dist small { width: 30px; text-align: right; }
.regRow { border-top: 1px dashed #eee; padding-top: 4px; }
.jh { margin: 12px 4px 2px; font-size: 16px; }
.evCard.locked { opacity: .6; } .evCard.done { background: #f0fff4; }
.photoGrid { display: flex; flex-wrap: wrap; gap: 6px; } .photoGrid .ph { width: calc(33% - 6px); text-align: center; background: #f5f5f5; border-radius: 10px; padding: 6px 2px; }
.photoGrid .ph span { font-size: 24px; display: block; } .photoGrid .ph.got { background: #fff3cd; } .photoGrid p { width: 100%; }
body.flash::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 90; pointer-events: none; animation: flashA .45s ease-out forwards; }
@keyframes flashA { from { opacity: .9; } to { opacity: 0; } }
body.traveling #dlg, body.traveling #evPill { display: none !important; }
#journalList .big { background: #0984e3; color: #fff; border: none; }
#journalList .evCard h3 small { font-weight: 600; color: #888; font-size: 12px; }

/* ---------- v0.22: nội thất nhà hàng ---------- */
#btnFurn { position: fixed; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 12; background: #6c5ce7; color: #fff; font-weight: 900; font-size: 15px; border: 3px solid #fff; border-radius: 16px; padding: 9px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
#furn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255,250,240,.97); border-radius: 18px 18px 0 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0,0,0,.25); max-height: 46vh; display: flex; flex-direction: column; gap: 6px; }
.furnTop { display: flex; gap: 6px; align-items: stretch; }
#furnStats { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.fchip { position: relative; background: #fff; border-radius: 10px; padding: 3px 7px; min-width: 62px; box-shadow: 0 1px 3px rgba(0,0,0,.12); overflow: hidden; }
.fchip b { font-size: 13px; display: block; white-space: nowrap; } .fchip small { font-size: 10px; color: #888; white-space: nowrap; }
.fchip i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg,#e17055,#00b894); }
#btnFurnDone { background: #00b894; color: #fff; font-weight: 900; border: none; border-radius: 12px; padding: 0 14px; font-size: 15px; }
#furnBar { background: #fff; border-radius: 12px; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; }
.fbInfo { flex: 1 1 180px; font-size: 13px; line-height: 1.3; } .fbInfo small { color: #666; }
.fbInfo .okm { color: #00a383; font-weight: 800; } .fbInfo .badm { color: #d63031; font-weight: 800; }
.fbBtns { display: flex; gap: 5px; flex-wrap: wrap; }
.fbBtns button { border: none; border-radius: 10px; padding: 8px 10px; font-weight: 800; font-size: 13px; background: #dfe6e9; }
.fbBtns button.green { background: #00b894; color: #fff; } .fbBtns button.red { background: #e17055; color: #fff; } .fbBtns button.gray { background: #b2bec3; }
.fbBtns button:disabled { opacity: .45; }
#furnTabs { display: flex; gap: 4px; overflow-x: auto; } #furnTabs button { flex: 0 0 auto; font-size: 12px; padding: 6px 9px; border-radius: 10px; border: none; background: #eee; font-weight: 700; }
#furnTabs button.on { background: #6c5ce7; color: #fff; }
#furnList { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.fItem { flex: 0 0 104px; background: #fff; border: 2px solid #ffeaa7; border-radius: 12px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fItem .fe { font-size: 28px; } .fItem b { font-size: 12px; text-align: center; } .fItem small { font-size: 11px; color: #e17055; font-weight: 800; } .fItem small.own { color: #888; font-weight: 600; }
.fItem.full { opacity: .5; }
body.editing #btnServe, body.editing #btnShop, body.editing #btnHelp, body.editing #btnHome, body.editing #btnCallBack, body.editing #coach, body.editing #dlg, body.editing #phone, body.editing #deliveryPill { display: none !important; }
.tag.wcTag { background: rgba(9,132,227,.9); font-size: 12px; } .tag.wcTag.bad { background: rgba(214,48,49,.95); animation: blink .6s infinite alternate; }

/* v0.24 — chọn màu quán */
.thGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 8px; }
.thBtn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; background: #fff; border: 2px solid #eee; font-size: 14px; color: #333; }
.thBtn.on { border-color: #ff8fb1; box-shadow: 0 0 0 3px rgba(255,143,177,.25); }
.thBtn small { color: #e0607e; font-weight: 700; }
.thSw { display: flex; gap: 3px; }
.thSw i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); display: block; }

/* v0.27 — Đế Chế Kinh Doanh */
#menu h1 .empire { font-size: 15px; color: #ffd166; letter-spacing: .5px; }
.bizLine { margin: 4px 0 8px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(90deg,#fff4d6,#ffe3ec); font-size: 14px; color: #5a3b1f; }
.bizLine .bar, .empCard .bar { height: 7px; border-radius: 4px; background: #f1e3cf; overflow: hidden; margin-top: 4px; }
.bizLine .bar i, .empCard .bar i { display: block; height: 100%; background: linear-gradient(90deg,#ffb347,#ff6f91); }
#segProduct button.locked { opacity: .5; filter: grayscale(.6); }
#segProduct button small { display: block; font-size: 10px; }
.empGrid { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 6px 0; max-height: 52vh; overflow-y: auto; }
.empCard { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: #fff; border: 2px solid #f0e2cc; text-align: left; font-size: 13px; }
.empCard .ee { font-size: 28px; }
.empCard.lock { opacity: .55; }
.empCard.cur { border-color: #ff8fb1; }
.empCard b { font-size: 14px; }
.ledger { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0; }
.ledger th { background: #fff1d6; font-weight: 800; padding: 4px 3px; }
.ledger td { padding: 4px 3px; border-bottom: 1px solid #f2e6d6; text-align: center; }
.ledger td:first-child { text-align: left; }
.ledger .up { color: #27ae60; font-weight: 800; }
.dem { display: inline-block; height: 6px; border-radius: 3px; background: #ff7f50; vertical-align: middle; }

#recipe { min-height: 2.7em; }
#recipe .nextStep { color: #e67e22; font-weight: 800; font-size: 13px; }

.errBox { max-height: 40vh; overflow-y: auto; background: #2d3436; color: #ffeaa7; font: 11px/1.4 monospace; padding: 8px; border-radius: 10px; text-align: left; word-break: break-word; }

.bkBox { width: 100%; height: 70px; font: 16px/1.3 monospace; border-radius: 10px; border: 2px solid #f0e2cc; padding: 6px; margin: 4px 0; box-sizing: border-box; word-break: break-all; }
.bkMenuBtn { display: block; width: 100%; margin: 4px 0; padding: 8px; border-radius: 12px; background: #e8f6ff; color: #1e5f8a; font-weight: 800; font-size: 14px; }

/* v0.27.5 — cảnh báo ngay trong bảng làm món */
#cookAlert { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 8px 10px; border-radius: 12px; background: #ffe1e1; border: 2px solid #ff6b6b; color: #8b1e1e; font-size: 14px; line-height: 1.3; }
#cookAlert span { flex: 1; }
#cookAlert .caBtn { flex: none; background: #e74c3c; color: #fff; font-weight: 800; border-radius: 10px; padding: 8px 10px; font-size: 14px; box-shadow: 0 3px 0 #b03a2e; }
#cookAlert.flash { animation: caFlash .6s ease 2; }
@keyframes caFlash { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); background: #ffc9c9; } }

/* v0.28 — sổ hôm nay & việc nên làm */
.dayBox, .nextBox { background: #fff; border: 2px solid #f0e2cc; border-radius: 12px; padding: 8px; margin: 6px 0; text-align: left; font-size: 13px; }
.dayRow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.dayRow span { background: #fff8ec; border-radius: 8px; padding: 4px 6px; display: flex; justify-content: space-between; gap: 4px; }
.dayRow .up b { color: #27ae60; } .dayRow .down b { color: #e74c3c; }
.nextBox div { padding: 4px 0; border-top: 1px dashed #f0e2cc; }
.nextBox div:first-of-type { border-top: none; }