/* css/style.css: giao diện (khung giấy/gỗ, bảng, nút). Màu lấy từ bảng 32 màu, xem assets/palette.json */
:root{
  /* Bảng 32 màu đã chốt (design.md mục 3) */
  --trang-kem:#FFF6E5;--xam-sang:#D9D2C5;--xam-dam:#8A8176;--vien:#3B2F2F;
  --co-sang:#C3E39A;--co:#9BCB7A;--dat:#C9A27A;--duong:#E8D5B0;--nuoc:#8FD0E8;
  --giay:#F7E7C6;--giay-dam:#D8B98A;--go:#B97E4D;--go-dam:#7A4A2E;
  --nt:#55B97A;--nt-dam:#2C7A4B;--tp:#D8B25A;--tp-dam:#8C6A2B;--vt:#5C7FD1;--vt-dam:#34509A;
  --nm:#8FA6B8;--nm-dam:#55697C;--sap:#F5A93B;--gan:#E05A4F;--da:#FFD9B8;--toc:#B97A57;--hong:#F4A6B8;--tim:#B9A3E3;
  --page:#E8D5B0;--page-ink:#3B2F2F;
  /* KHUNG PIXEL 9-slice (assets/ui/frames, ảnh 9x9, cắt 3px): viền ngoài đậm, vạt sáng trên/trái, vạt tối dưới/phải, góc vát; -dn là bản nút đang nhấn. Dùng qua border-image, độ dày viền vẫn 3px nên bố cục không đổi. Màu nút đổi bằng cách đặt --bi và --bid. */
  --f-panel:url(../assets/ui/frames/panel.png);--f-leaf:url(../assets/ui/frames/leaf.png);--f-inset:url(../assets/ui/frames/inset.png);
  --f-gold:url(../assets/ui/frames/gold.png);--f-gold-dn:url(../assets/ui/frames/gold-dn.png);
  --f-green:url(../assets/ui/frames/green.png);--f-green-dn:url(../assets/ui/frames/green-dn.png);
  --f-cream:url(../assets/ui/frames/cream.png);--f-cream-dn:url(../assets/ui/frames/cream-dn.png);
  --f-blue:url(../assets/ui/frames/blue.png);--f-blue-dn:url(../assets/ui/frames/blue-dn.png);
  --f-sky:url(../assets/ui/frames/sky.png);--f-sky-dn:url(../assets/ui/frames/sky-dn.png);
  --f-orange:url(../assets/ui/frames/orange.png);--f-orange-dn:url(../assets/ui/frames/orange-dn.png);
  --f-tan:url(../assets/ui/frames/tan.png);--f-tan-dn:url(../assets/ui/frames/tan-dn.png);
  /* khung 6x6 cắt 2px cho thanh tiến độ, huy hiệu, màn hình đồng hồ, chấm bước */
  --f-bar:url(../assets/ui/frames/bar.png);--f-badge:url(../assets/ui/frames/badge.png);--f-lcd:url(../assets/ui/frames/lcd.png);--f-dot:url(../assets/ui/frames/dot.png);--f-dot-on:url(../assets/ui/frames/dot-on.png);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--page:#3B2F2F;--page-ink:#FFF6E5;color-scheme:dark}}
:root[data-theme="dark"]{--page:#3B2F2F;--page-ink:#FFF6E5;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
button,.frame,dialog,input{image-rendering:pixelated} /* khung pixel (border-image) giữ nét sắc khi màn hình có tỉ lệ hiển thị lẻ */
body{margin:0;background:var(--page);color:var(--page-ink);font:400 14px/1.45 'Be Vietnam Pro',system-ui,sans-serif}
.frame{--bi:var(--f-panel);--bid:var(--f-panel);background:var(--giay);color:var(--vien);border:3px solid var(--go-dam);border-image:var(--bi) 3 fill/3px;background-clip:padding-box;box-shadow:3px 3px 0 var(--go-dam)}
h1,h2{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:700;margin:0}
h1{font-size:22px}h2{font-size:18px}
.hud{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:8px 12px}
.hud .v{font-weight:700;font-size:16px}
.hud .grow{flex:1 1 160px;min-width:140px}
.day{height:10px;background:var(--giay-dam);border:2px solid var(--go-dam)}
.day div{height:100%;width:0;background:var(--tp)}
.ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button{font:600 14px 'Be Vietnam Pro',system-ui,sans-serif;min-height:44px;min-width:44px;padding:0 12px;background:var(--tp);color:var(--vien);border:3px solid var(--tp-dam);border-image:var(--bi,var(--f-gold)) 3 fill/3px;background-clip:padding-box;box-shadow:2px 2px 0 var(--tp-dam);cursor:pointer}
button:active{transform:translate(2px,2px);box-shadow:none;border-image-source:var(--bid,var(--f-gold-dn))}
button[aria-pressed="true"]{--bi:var(--f-green);--bid:var(--f-green-dn);background:var(--nt);border-color:var(--nt-dam);box-shadow:2px 2px 0 var(--nt-dam)}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible{outline:3px solid var(--vt-dam);outline-offset:2px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:340px}
th,td{padding:6px 4px;text-align:left;vertical-align:middle;border-bottom:2px dashed var(--giay-dam)}
th small,td small,td em{display:block;font-size:12px;font-style:normal;color:var(--go-dam)}
.sw{display:inline-block;width:12px;height:12px;border:2px solid var(--vien);margin-right:6px;vertical-align:-1px}
/* ICON GIAO DIỆN (assets/ui/*.png, ảnh pixel 28x28 hiển thị đúng 28px, không phóng; thanh trạng thái .hi 16px, nút đóng .xi và xúc xắc 20px). Nút, tiêu đề hộp thoại, danh sách thiết bị đều dùng bộ này. */
img.ui{display:block;width:28px;height:28px;flex:none;image-rendering:pixelated}
img.ui.hd{display:inline-block;vertical-align:-8px;margin-right:2px}
.chip.dice img{display:block;margin:auto;image-rendering:pixelated}
.rolei{display:inline-block;flex:none;background-repeat:no-repeat;image-rendering:pixelated} /* chức vụ nhân viên: cắt khung đầu tiên (đứng nhìn thẳng) từ sprite, to bằng người trong tiệm */
.rolei.cashier{width:28px;height:35px;background-image:url(../assets/staff/cashier.png)}
.rolei.stocker{width:36px;height:37px;background-image:url(../assets/staff/stocker.png)}
.rolei.janitor{width:36px;height:37px;background-image:url(../assets/staff/janitor.png)}
.rolei.guard{width:36px;height:37px;background-image:url(../assets/staff/guard.png)}
#staffdlg h3{display:flex;align-items:center;gap:6px}
img.ico{display:block;width:28px;height:28px;margin:0 0 3px;image-rendering:pixelated} /* icon món trong bảng Kho, Nhập hàng, Đặt lên kệ; nằm trên tên món vì cột "Hàng" hẹp */
/* Thanh tiến độ (hạn dùng trong Kho): rãnh lõm viền nâu, phần đầy có vạt sáng ở trên, vạt tối ở dưới và chia ô 4px (màu đầy do JS đặt: xanh, cam, đỏ) */
.bar{display:block;width:72px;height:12px;background:var(--giay-dam);border:2px solid var(--go-dam);border-image:var(--f-bar) 2 fill/2px;background-clip:padding-box;margin:3px 0}
.bar u{position:relative;display:block;height:100%;width:0;text-decoration:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(59,47,47,.2)}
.bar u::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(59,47,47,.3) 3px 4px)}
td.n button{min-height:36px;padding:0 8px;margin-right:4px}
input[type=number]{width:92px;min-height:44px;font:600 14px 'Be Vietnam Pro',system-ui,sans-serif;padding:0 6px;background:var(--trang-kem);color:var(--vien);border:3px solid var(--go-dam);border-image:var(--f-inset) 3 fill/3px;background-clip:padding-box}
.row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
dialog{max-width:min(92vw,420px);padding:16px;background:var(--giay);color:var(--vien);border:3px solid var(--go-dam);border-image:var(--f-panel) 3 fill/3px;background-clip:padding-box;box-shadow:4px 4px 0 var(--go-dam)}
dialog::backdrop{background:rgba(59,47,47,.6)}
dialog p{margin:6px 0}
.bad{color:var(--gan);font-weight:700}

[hidden]{display:none!important}
#guide p{margin:0;flex:1}
/* Chân dung nhân vật (assets/portraits): khung vuông nền cỏ sáng, ảnh pixel hiển thị đúng cỡ gốc 64px (thanh hướng dẫn .sm: 48px) */
.pt{flex:none;width:64px;height:64px;background:var(--co-sang);border:3px solid var(--go-dam);box-shadow:2px 2px 0 var(--go-dam);image-rendering:pixelated;box-sizing:content-box}
.pt.sm{width:48px;height:48px}
.pt[hidden]{display:none}
.ihead .who{display:grid;gap:1px}.ihead .who small{font-size:12px;color:var(--go-dam)}
#gwho{font-size:12px;color:var(--go-dam)}
#arrow{position:fixed;z-index:40;width:0;height:0;border:12px solid transparent;border-top:18px solid var(--sap);pointer-events:none}
@media (prefers-reduced-motion:no-preference){#arrow{animation:bob .8s steps(2) infinite}}
@keyframes bob{50%{margin-top:-8px}}
.hl{outline:4px solid var(--sap);outline-offset:3px}

.actions>*{pointer-events:auto}
#stat{display:flex;gap:2px 12px;flex-wrap:wrap;padding:2px 8px;background:var(--giay);color:var(--vien);border:2px solid var(--go-dam);font-size:12px;line-height:1.3}

/* Nút chức năng và cài đặt */
/* Nút Cài đặt nổi dưới thanh nhiệm vụ, sát mép phải của thanh (thanh rộng tối đa 1100px, căn giữa) */
#btnset{position:fixed;z-index:11;top:var(--top);right:max(8px,calc(100vw - 1108px));padding:0;display:grid;place-items:center}
#btnset svg{display:block}
#btnzoom{position:fixed;z-index:11;top:calc(var(--top) + 52px);right:max(8px,calc(100vw - 1108px));padding:0;display:grid;place-items:center}
#btnzoom .t{display:none}
#btnzoom[hidden]{display:none!important}
#btnarr{position:fixed;z-index:11;top:calc(var(--top) + 104px);right:max(8px,calc(100vw - 1108px));padding:0;display:grid;place-items:center}
#btnarr .t{display:none}
#btnarr[aria-pressed="true"]{--bi:var(--f-blue);--bid:var(--f-blue-dn);background:var(--vt);border-color:var(--vt-dam)}
/* Thanh công cụ khi sắp xếp tiệm: nằm ngay trên thanh thao tác dưới */
#arrbar{position:fixed;z-index:12;left:50%;transform:translateX(-50%);bottom:calc(var(--bot,80px) + 8px);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;justify-content:center;padding:6px 10px;width:min(calc(100vw - 16px),520px);font-size:13px;line-height:1.3}
#arrbar[hidden]{display:none!important}
#arrbar span{flex:1 1 100%;text-align:center}
#arrbar button{min-height:40px;padding:2px 12px}
/* Nút bỏ qua hướng dẫn: chữ nhỏ gạch chân dưới lời hướng dẫn */
#guide .gbody{flex:1;display:grid;gap:2px;justify-items:start}
#guide .skip{min-height:36px;padding:0 4px;font-size:12px;background:transparent;border:0;border-image:none;box-shadow:none;text-decoration:underline;color:var(--go-dam)}
#guide .skip:active{transform:none}
.opt{display:grid;gap:6px;padding:8px 0;border-bottom:2px dashed var(--giay-dam)}
.opt:last-of-type{border-bottom:0}
.seg button{min-width:64px}
input[type=range]{width:140px;accent-color:var(--tp-dam);vertical-align:middle}
ol{margin:6px 0;padding-left:20px}

/* Nút Mở cửa: màu xanh (nông trại), nằm cạnh nút Nhập hàng */
#open{--bi:var(--f-green);--bid:var(--f-green-dn);background:var(--nt);color:var(--vien);border-color:var(--nt-dam);box-shadow:2px 2px 0 var(--nt-dam)}
#open:active{box-shadow:none}

#qlist{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:4px}
#qlist li{padding:2px 0}
#qlist li.done{color:var(--nt-dam)}
#qlist li.cur{font-weight:700}

.toolbar .ctl{flex-wrap:nowrap;gap:6px}
html[data-ui="phone"] .toolbar{padding:8px}
html[data-ui="phone"] .toolbar button{padding:0 9px}

/* ===== Toàn màn hình: tiệm phủ kín, thanh trên và thanh thao tác nổi lên trên, menu là sidebar ===== */
:root{--top:0px;--bot:0px;--sidew:min(440px,92vw)}
html,body{height:100%;overflow:hidden}
body{margin:0;overscroll-behavior:none}
.stage{position:fixed;inset:0;overflow:hidden;background:var(--giay)}
canvas{display:block;image-rendering:pixelated;border:0}
#top{position:fixed;top:0;left:0;right:0;z-index:10;display:grid;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 8px 0;pointer-events:none}
#top>*{pointer-events:auto;max-width:1100px;width:100%;margin:0 auto 0 0}
.quest{text-align:left;font-weight:600;min-height:44px;box-shadow:3px 3px 0 var(--go-dam);display:block;width:100%;padding:6px 12px}
.quest::before{content:'▶ '}
.toolbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:10;display:flex;gap:8px 16px;align-items:center;justify-content:space-between;padding:8px 12px;width:min(calc(100vw - 16px),560px)}
.toolbar .ctl{flex-wrap:nowrap;gap:6px}
#msg{position:absolute;left:8px;top:calc(var(--top) + 8px);max-width:min(560px,calc(100% - 68px));margin:0;padding:4px 8px;background:var(--giay);color:var(--vien);border:2px solid var(--go-dam);font-size:13px;line-height:1.35;pointer-events:none}
#msg:empty{display:none}
.actions{position:absolute;left:0;right:0;bottom:calc(var(--bot) + 8px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:0 8px;pointer-events:none}
.actions>*{pointer-events:auto}
#stat{display:flex;gap:2px 12px;flex-wrap:wrap;padding:2px 8px;background:var(--giay);color:var(--vien);border:2px solid var(--go-dam);font-size:12px;line-height:1.3}
#guide{position:fixed;left:12px;right:auto;transform:none;bottom:calc(var(--bot) + 8px);width:min(440px,calc(100vw - 24px));padding:10px 12px;display:flex;gap:10px;align-items:center;z-index:30}
html[data-side="left"] #guide{left:auto;right:12px}
html[data-ui="phone"] #guide,html[data-ui="phone"][data-side="left"] #guide{left:50%;right:auto;transform:translateX(-50%)}

/* Sidebar: trượt từ trái hoặc phải, không có lớp phủ tối nên vẫn thấy tiệm phía sau */
dialog.side{position:fixed;top:0;bottom:0;left:auto;right:0;height:100dvh;max-height:none;width:var(--sidew);max-width:none;margin:0;overflow:auto;z-index:20;border-width:0 0 0 3px;border-image:none;box-shadow:-4px 0 0 var(--go-dam);padding:0 16px 150px}
html[data-side="left"] dialog.side{left:0;right:auto;border-width:0 3px 0 0;box-shadow:4px 0 0 var(--go-dam)}
dialog.side:not([open]){display:none}
@media (prefers-reduced-motion:no-preference){
  dialog.side[open]{animation:inR .18s steps(6)}
  html[data-side="left"] dialog.side[open]{animation-name:inL}
}
@keyframes inR{from{transform:translateX(100%)}}
@keyframes inL{from{transform:translateX(-100%)}}
#goodsdlg .row{margin-bottom:8px}
#setdlg,#helpdlg,#questdlg,#buydlg,#goodsdlg,#notedlg,#shelfdlg,#upgdlg{width:var(--sidew)}
table{min-width:0}
/* Máy tính và iPad (desktop): thanh thao tác nằm phía đối diện sidebar để không bị che */


/* ===== Kiểu pop-up: tiêu đề có biểu tượng + nút ×, đường nét đứt, nút xanh to ===== */
dialog.side>.row:first-child{position:sticky;top:0;z-index:2;flex-wrap:nowrap;background:var(--giay);margin:0 0 10px;padding:calc(14px + env(safe-area-inset-top,0px)) 0 10px;border-bottom:3px solid var(--giay-dam)}
dialog.side h2{font-size:20px}
button.x{--bi:var(--f-cream);--bid:var(--f-cream-dn);min-width:44px;padding:0;font-size:24px;line-height:1;background:var(--trang-kem);border-color:var(--go-dam);box-shadow:2px 2px 0 var(--go-dam)}
button.x .xi{display:block;margin:auto;image-rendering:pixelated}
button.big{--bi:var(--f-green);--bid:var(--f-green-dn);width:100%;background:var(--nt);border-color:var(--nt-dam);box-shadow:2px 2px 0 var(--nt-dam);font-size:15px}
#scrim{display:none;position:fixed;inset:0;z-index:19;background:rgba(59,47,47,.55)}
/* Điện thoại (phone): bảng trượt từ dưới lên, nền phía sau tối đi, bấm ra ngoài để đóng */
html[data-ui="phone"]:has(dialog.side[open]) #scrim{display:block}
html[data-ui="phone"] dialog.side,html[data-ui="phone"][data-side="left"] dialog.side{top:auto;bottom:0;left:0;right:0;width:100%;max-width:none;height:auto;max-height:86dvh;border-width:3px 0 0;border-radius:18px 18px 0 0;box-shadow:none;padding:0 16px calc(28px + env(safe-area-inset-bottom,0px))}
html[data-ui="phone"] dialog.side>.row:first-child{border-radius:15px 15px 0 0;padding-top:14px}
html[data-ui="phone"] #setdlg,html[data-ui="phone"] #helpdlg,html[data-ui="phone"] #questdlg,html[data-ui="phone"] #buydlg,html[data-ui="phone"] #goodsdlg,html[data-ui="phone"] #notedlg,html[data-ui="phone"] #shelfdlg,html[data-ui="phone"] #upgdlg{width:100%}
@media (prefers-reduced-motion:no-preference){html[data-ui="phone"] dialog.side[open],html[data-ui="phone"][data-side="left"] dialog.side[open]{animation-name:inB}}
@keyframes inB{from{transform:translateY(100%)}}

/* ===== Thanh trên: tiền, ngày game, đồng hồ số, uy tín, chuông thông báo (design mục 8) ===== */
.hud .stat{display:flex;align-items:center;gap:6px;white-space:nowrap}
.hud .stat .hi{width:16px;height:16px;flex:none;image-rendering:pixelated} /* icon thanh trạng thái (tiền, ngày, giờ, uy tín): ảnh pixel 16x16, hiển thị đúng 16px */
.lcd{font:700 16px/1 ui-monospace,'SFMono-Regular',Consolas,'Courier New',monospace;font-variant-numeric:tabular-nums;letter-spacing:1px;background:var(--vien);color:var(--sap);padding:5px 8px;border:2px solid var(--go-dam);border-image:var(--f-lcd) 2 fill/2px;background-clip:padding-box;text-shadow:1px 1px 0 rgba(140,106,43,.55)}
.lcd i{font-style:normal}
@media (prefers-reduced-motion:no-preference){.lcd i{animation:blink 1s steps(1) infinite}}
@keyframes blink{50%{opacity:.25}}
#btnnote{--bi:var(--f-cream);--bid:var(--f-cream-dn);position:relative;padding:0;display:grid;place-items:center;flex:none;background:var(--trang-kem);border-color:var(--go-dam);box-shadow:2px 2px 0 var(--go-dam)}
#btnnote svg{width:22px;height:22px;display:block}
.badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;background:var(--gan);color:var(--trang-kem);border:2px solid var(--vien);border-image:var(--f-badge) 2 fill/2px;background-clip:padding-box;font:700 11px/1 'Be Vietnam Pro',system-ui,sans-serif;text-shadow:1px 1px 0 rgba(59,47,47,.6)}
/* Điện thoại: hàng 1 = tên tiệm + chuông; hàng 2 = tiền, ngày, uy tín; hàng 3 = đồng hồ số + thanh tiến độ ngày */
html[data-ui="phone"] .hud{gap:6px 12px}
html[data-ui="phone"] .hud .lb{display:none}
html[data-ui="phone"] .hud h1{order:-2;flex:1 0 calc(100% - 60px);font-size:18px}
html[data-ui="phone"] #btnnote{order:-1}
html[data-ui="phone"] .hud .clk{order:1}

/* Hàng đã chọn để lên kệ nhanh: màu vàng cam, khác nút "Trên kệ" (xanh) */
.sh[data-pick="1"]{--bi:var(--f-orange);--bid:var(--f-orange-dn);background:var(--sap);border-color:var(--tp-dam);box-shadow:2px 2px 0 var(--tp-dam)}

/* Không hiện thanh cuộn ở bất cứ đâu (vẫn cuộn được bằng chuột, cảm ứng, bàn phím). Quy tắc dự án: mọi phần tử mới cũng không có thanh cuộn. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

/* Máy tính và iPad (desktop): khi có bảng bên (dialog.side) mở, thanh trên và nút Cài đặt thu vào phần màn hình còn trống để không bị bảng đè lên. */

/* Desktop: bảng bên co theo màn hình (iPad dọc chỉ rộng 744 đến 834px) rồi các phần nổi khác thu vào phần còn trống, không để bảng đè lên. */
/* ===== PC / iPad (desktop): thanh trên chạy hết chiều ngang, cột nút nhanh bên phải, thanh chức năng cũ nổi ở góc dưới bên trái, tiệm ở giữa nền tối. Điện thoại giữ nguyên. ===== */
#rail{display:none}
html[data-ui="desktop"]{--sidew:clamp(360px,36vw,440px);--railw:80px;--barh:56px;--menuw:200px}
html[data-ui="desktop"] body{background:var(--vien)}
html[data-ui="desktop"] .stage{inset:var(--barh) var(--railw) 0 var(--menuw);background:var(--vien)}
/* Thanh trên */
html[data-ui="desktop"] #top{display:contents}
html[data-ui="desktop"] #top>.hud{position:fixed;top:0;left:0;right:0;height:var(--barh);width:auto;max-width:none;margin:0;z-index:12;flex-wrap:nowrap;gap:0 22px;padding:0 14px;border-width:0 0 3px;border-image:none;box-shadow:none}
html[data-ui="desktop"] .hud h1{font-size:19px;white-space:nowrap}
html[data-ui="desktop"] .hud .lb{display:none}
html[data-ui="desktop"] #btnnote{width:40px;min-width:40px;min-height:40px;height:40px}
/* Thẻ nhiệm vụ nổi ở giữa phần tiệm */
html[data-ui="desktop"] #top>#qsum{position:fixed;top:calc(var(--barh) + 8px);left:calc(var(--menuw) + (100vw - var(--menuw) - var(--railw))/2);transform:translateX(-50%);width:min(620px,calc(100vw - var(--menuw) - var(--railw) - 24px));max-width:none;margin:0;z-index:11;--bi:var(--f-leaf);--bid:var(--f-leaf);background:var(--co-sang);border-color:var(--nt-dam);box-shadow:3px 3px 0 var(--nt-dam)}
/* Thanh chức năng cũ (Kho, Hàng hóa, Nhập hàng, Mở cửa): giữ nguyên, nổi ở góc dưới bên trái */
html[data-ui="desktop"] .toolbar{left:8px;transform:none;bottom:8px;width:min(calc(100vw - var(--railw) - 16px),560px)}
/* Cột nút nhanh bên phải */
html[data-ui="desktop"] #rail{display:flex;position:fixed;top:var(--barh);right:0;bottom:0;width:var(--railw);flex-direction:column;align-items:center;gap:8px;padding:8px 0;z-index:12;background:var(--giay);border-left:3px solid var(--go-dam)}
html[data-ui="desktop"] #rail button,html[data-ui="desktop"] #btnset,html[data-ui="desktop"] #btnzoom,html[data-ui="desktop"] #btnarr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;min-height:60px;padding:2px 0;font-size:11px;line-height:1.1;--bi:var(--f-cream);--bid:var(--f-cream-dn);background:var(--trang-kem);border-color:var(--go-dam);box-shadow:2px 2px 0 var(--go-dam)}
html[data-ui="desktop"] #btnset{position:fixed;top:auto;bottom:8px;right:8px;z-index:13;padding:2px 0}
html[data-ui="desktop"] #btnzoom{position:fixed;top:auto;bottom:76px;right:8px;z-index:13}
html[data-ui="desktop"] #btnarr{position:fixed;top:auto;bottom:144px;right:8px;z-index:13}
html[data-ui="desktop"] #arrbar{left:calc(var(--menuw) + (100vw - var(--menuw) - var(--railw))/2);bottom:16px;flex-wrap:nowrap;width:auto;max-width:calc(100vw - var(--menuw) - var(--railw) - 24px)}
html[data-ui="desktop"] #arrbar span{flex:0 1 auto;text-align:left;margin-right:8px}
html[data-ui="desktop"] #btnzoom .t,html[data-ui="desktop"] #btnarr .t{display:inline;font-size:11px;font-weight:600}
html[data-ui="desktop"] #btnset svg{width:24px;height:24px}
html[data-ui="desktop"] #btnset::after{content:"Cài đặt";font-size:11px;font-weight:600}
/* Bảng bên mở cạnh cột nút, dưới thanh trên */
html[data-ui="desktop"] dialog.side{top:var(--barh);bottom:0;height:auto;right:var(--railw);left:auto;border-width:0 3px;box-shadow:-4px 0 0 var(--go-dam)}
html[data-ui="desktop"][data-side="left"] dialog.side{left:var(--menuw);right:auto;box-shadow:4px 0 0 var(--go-dam)}
html[data-ui="desktop"] dialog.side>.row:first-child{padding-top:14px}
/* Hướng dẫn, thông báo, nút Thu tiền */
html[data-ui="desktop"] #guide,html[data-ui="desktop"][data-side="left"] #guide{left:auto;right:calc(var(--railw) + 16px);bottom:16px;transform:none}
html[data-ui="desktop"] #msg{top:auto;bottom:36px;left:50%;transform:translateX(-50%);max-width:min(640px,calc(100% - 24px));padding:6px 18px;text-align:center;background:var(--vien);color:var(--trang-kem);border:2px solid var(--go);border-radius:999px}
html[data-ui="desktop"] .actions{bottom:24px}

/* ===== Thanh bar dưới cùng: Nâng cấp, Kho, [Mở cửa ở giữa], Nhập hàng. Điện thoại: nổi dưới cùng; PC: góc dưới bên trái. ===== */
.toolbar{display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr 1fr;gap:6px;align-items:stretch;padding:6px}
.toolbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:56px;padding:2px 4px;font-size:12px;line-height:1.15;text-align:center}
#openupg{grid-column:1}#openstaff{grid-column:2}#open{grid-column:3;min-height:64px;font-size:14px;margin-top:-10px}#opengoods{grid-column:4}#openbuy{grid-column:5}
html[data-ui="phone"] .toolbar{padding:6px}
html[data-ui="phone"] .toolbar button{padding:2px 4px}

/* Thanh trên: bỏ thanh tiến trình ngày; chỉ tên quán và tiền giữ cỡ lớn, các mục còn lại (ngày, đồng hồ, uy tín) nhỏ lại */
.hud .stat:not(.money){font-size:12px}
.hud .stat:not(.money) .v{font-size:13px}
.hud .stat:not(.money) .lcd{font-size:12px;padding:3px 6px;letter-spacing:.5px}
html[data-ui="desktop"] #btnnote{margin-left:auto}
html[data-ui="phone"] #btnnote{margin-left:auto}

/* Bảng Kho hàng: hàng "Lên kệ nhanh" ghim ngay dưới tiêu đề, luôn ở trên cùng khi cuộn */
#goodsdlg>.row:first-child{margin-bottom:0}
#goodsdlg>.qbar{position:sticky;top:71px;z-index:2;background:var(--giay);margin:0 0 8px;padding:8px 0;border-bottom:2px dashed var(--giay-dam)}
.qi{display:grid;gap:2px;font-size:13px;margin-bottom:6px}
.qi span:empty,.qi span[hidden]{display:none}
.qbtns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.qbtns .big{min-width:0;padding:0 6px;font-size:14px}
/* Bán hàng hết hạn: màu xanh dương nhạt, khác Lên kệ nhanh (xanh lá) */
#selldead{--bi:var(--f-sky);--bid:var(--f-sky-dn);background:var(--nuoc);border-color:var(--vt-dam);box-shadow:2px 2px 0 var(--vt-dam)}
#selldead:active{box-shadow:none}

/* Nhân viên */
.stf{display:grid;gap:6px;padding:8px 10px;margin:0 0 8px;background:var(--trang-kem);border:2px solid var(--go-dam)}
.stf b{font-size:15px}.stf small{display:block}.stf .bad{color:#E05A4F}
.stf .ctl{display:flex;gap:6px;flex-wrap:wrap}
.stf.empty{background:transparent;border-style:dashed}#staffdlg h3 small{font-weight:400}
#staffdlg h3{font-size:16px;margin:10px 0 6px}

/* ===== Desktop: menu dọc bên trái dạng danh sách phẳng (biểu tượng + chữ, không viền nút), thứ tự Nâng cấp, Nhân sự, Mở cửa, Kho hàng, Nhập hàng ===== */
html[data-ui="desktop"] .toolbar{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;position:fixed;top:var(--barh);bottom:0;left:0;width:var(--menuw);transform:none;padding:14px 10px;z-index:12;border-width:0;border-image:none;box-shadow:none;background:var(--giay)}
html[data-ui="desktop"] .toolbar button{flex-direction:row;justify-content:flex-start;gap:12px;min-height:46px;padding:4px 12px;font-size:16px;font-weight:600;text-align:left;background:transparent;border:0;border-image:none;border-radius:12px;box-shadow:none;color:var(--vien)}
html[data-ui="desktop"] .toolbar button:hover{background:var(--trang-kem)}
html[data-ui="desktop"] .toolbar button:active{transform:translateY(1px)}
html[data-ui="desktop"] .toolbar b{font-weight:700;color:var(--go-dam)}
html[data-ui="desktop"] #open{order:99;margin:auto 0 8px;min-height:54px;font-size:17px;justify-content:center;background:var(--nt);color:var(--vien);border:3px solid var(--nt-dam);border-image:var(--bi) 3 fill/3px;border-radius:0;box-shadow:0 3px 0 var(--nt-dam)}
html[data-ui="desktop"] #open:hover{background:var(--nt)}
html[data-ui="desktop"] #rail{border-left:0;box-shadow:none}

/* Màn mở đầu và đặt tên quán (js/intro.js). Phủ kín màn hình, nền ván gỗ như tường tiệm. Chỉ dùng màu trong bảng 32 màu. */
#intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;overflow:auto;
  background:repeating-linear-gradient(90deg,var(--go) 0 32px,var(--toc) 32px 64px);}
#intro::before{content:"";position:fixed;inset:0;background:rgba(59,47,47,.45);pointer-events:none}
.ibox{position:relative;width:min(460px,100%);padding:18px 18px 12px;display:grid;gap:12px}
.iart{display:block;width:100%;max-width:390px;height:auto;aspect-ratio:3/2;margin:0 auto;box-sizing:border-box;border:3px solid var(--go-dam);box-shadow:3px 3px 0 var(--go-dam);image-rendering:pixelated;background:var(--vien)} /* tranh minh họa mở đầu 192x128: 390px = 2 lần + viền, mỗi điểm ảnh gốc ứng với đúng 2px */
.iart[hidden]{display:none}
.ihead{display:flex;align-items:center;gap:10px}
.ihead b{font-size:16px}
#itext{margin:0;font-size:16px;line-height:1.55;min-height:3.1em}
.inav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inav button.big{min-width:110px}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;background:var(--giay-dam);border:2px solid var(--go-dam);border-image:var(--f-dot) 2 fill/2px;background-clip:padding-box}
.dots i.on{background:var(--tp);border-image-source:var(--f-dot-on)}
.ibox .skip{justify-self:center;min-height:36px;padding:0 4px;font-size:12px;background:transparent;border:0;border-image:none;box-shadow:none;text-decoration:underline;color:var(--go-dam)}
.ibox .skip:active{transform:none}
#iform{display:grid;gap:8px}
#iform label{font-weight:700}
#iname{width:100%;min-height:48px;font:600 16px 'Be Vietnam Pro',system-ui,sans-serif;padding:0 10px;background:var(--trang-kem);color:var(--vien);border:3px solid var(--go-dam);border-image:var(--f-inset) 3 fill/3px;background-clip:padding-box}
/* Biển hiệu xem trước: treo trên hai sợi dây */
.isign{position:relative;justify-self:center;max-width:100%;margin:8px 0 6px;padding:10px 18px;background:var(--go);border:3px solid var(--go-dam);box-shadow:3px 3px 0 var(--go-dam);color:var(--trang-kem);font-weight:700;font-size:18px;text-align:center;text-shadow:2px 2px 0 var(--go-dam);overflow-wrap:anywhere}
.isign::before,.isign::after{content:"";position:absolute;top:-12px;width:3px;height:9px;background:var(--go-dam)}
.isign::before{left:16px}.isign::after{right:16px}
.isign .ph{opacity:.55}
.ideas{display:flex;flex-wrap:wrap;gap:6px}
.chip{--bi:var(--f-cream);--bid:var(--f-cream-dn);min-height:36px;padding:0 8px;font-size:13px;background:var(--trang-kem);border:3px solid var(--go-dam);border-image:var(--bi) 3 fill/3px;background-clip:padding-box;box-shadow:2px 2px 0 var(--go-dam)}
.chip.dice{min-width:40px;padding:0}
#ierr{margin:0;min-height:1.4em;font-size:13px}
#iform .ctl{margin-top:2px}
#iok{--bi:var(--f-green);--bid:var(--f-green-dn);min-width:140px;background:var(--nt);border-color:var(--nt-dam);box-shadow:2px 2px 0 var(--nt-dam)}
#iok:disabled{--bi:var(--f-tan);--bid:var(--f-tan);background:var(--giay-dam);border-color:var(--go-dam);box-shadow:2px 2px 0 var(--go-dam)}
#setshop{font-weight:700}
html.introing{overflow:hidden}
/* Khung kể chuyện dùng lại được (js/story.js): nền tối phủ lên game, dùng chung kiểu khung .ibox với màn mở đầu */
#story{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(59,47,47,.6)}

/* Giá bán dạng 13k: không có ô nhập, chỉ số đổi màu và nút − / + */
.pc{display:flex;align-items:center;gap:6px}
.pc button{min-width:36px;min-height:36px;padding:0;font:700 18px 'Be Vietnam Pro',system-ui,sans-serif;line-height:1}
.pv{min-width:52px;text-align:center;font:700 20px 'Be Vietnam Pro',system-ui,sans-serif;font-variant-numeric:tabular-nums;user-select:none}

/* Nút Thu tiền: một nút lớn nổi dưới màn hình lúc đang mở cửa (chưa thuê thu ngân). Huy hiệu đỏ = số khách đang chờ ở quầy. */
.actions{flex-direction:column}
#collect{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:min(280px,calc(100vw - 32px));min-height:64px;font-size:18px;background:var(--tp);color:var(--vien);border-color:var(--tp-dam);box-shadow:3px 3px 0 var(--tp-dam)}
#collect[hidden]{display:none}
#collect.idle{opacity:.6;box-shadow:none}
#collect.ready{animation:collectpulse .8s steps(2) infinite}
#collect:active{box-shadow:none;transform:translateY(2px)}
#cbadge{min-width:26px;height:26px;padding:0 7px;background:var(--gan);color:var(--trang-kem);border:2px solid var(--vien);border-image:var(--f-badge) 2 fill/2px;background-clip:padding-box;font-size:14px;line-height:22px;text-align:center;text-shadow:1px 1px 0 rgba(59,47,47,.6)}
#cbadge[hidden]{display:none}
@keyframes collectpulse{0%{transform:translateY(0)}100%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){#collect.ready{animation:none}}

/* Nâng cấp > Đồ trang trí */
.tabs{display:flex;gap:6px;margin:0 0 10px}.tabs button{flex:1}
.tabs button[aria-pressed="true"]{background:var(--nt);border-color:var(--nt-dam)}
.dec{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:2px dashed var(--giay-dam)}
.dec .de{display:grid;place-items:center;width:48px;height:40px;font-size:26px;text-align:center}.dec .de img{max-width:48px;max-height:40px;width:auto;height:auto;image-rendering:pixelated}.dec small{display:block}.dec button.big{width:auto;min-width:96px;padding:0 10px;font-size:14px}
.dec.owned{opacity:.75}.dec .own{color:var(--nt-dam);font-weight:700}.dec .lockd{color:var(--tp-dam);font-weight:700}