/* 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}

/* 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}
.bak{display:grid;gap:6px;margin-bottom:8px}
.baklist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.baklist li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding:4px 0;border-top:1px dashed var(--giay-dam)}
.baklist li.none{display:block;color:var(--vien);opacity:.8}
.baklist button{flex:none;min-height:30px;padding:0 10px;font-size:12px}
.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}
/* iPhone Safari: bấm nhanh nhiều lần (Thu tiền...) bị coi là chạm đúp và phóng to cả trang. manipulation tắt chạm-đúp-để-zoom nhưng vẫn cho cuộn; bản đồ tự xử lý vuốt/chụm nên chặn hẳn cử chỉ của trình duyệt. */
*{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,.stage,.toolbar,.hud{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas{touch-action: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}
#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:8px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(440px,calc(100% - 24px));padding:4px 12px;text-align:center;font-size:12px;line-height:1.3;background:var(--vien);color:var(--trang-kem);border:2px solid var(--go);border-radius:8px;opacity:.94} /* gọn, sát đáy bản đồ để không che kệ và khách */
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.2fr 1fr 1fr 1fr;gap:4px;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}#openbook{grid-column:6}
html[data-ui="phone"] .toolbar{padding:6px}
html[data-ui="phone"] .toolbar button{padding:2px 1px;font-size:11px}
html[data-ui="phone"] .toolbar button img.ui{width:24px;height:24px}

/* 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}

/* ===== Sổ sách thu chi và báo cáo (js/ledger.js) ===== */
#bookdlg .tabs{margin-top:2px}
#bookbal{font-weight:700;white-space:nowrap}
.bk-chips{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap}
.bk-chips button{flex:1 1 auto;min-width:0;white-space:nowrap;min-height:34px;padding:0 8px;font-size:13px;background:var(--trang-kem);border:3px solid var(--go-dam);box-shadow:2px 2px 0 var(--go-dam);color:var(--vien)}
.bk-chips button[aria-pressed="true"]{background:var(--nt);border-color:var(--nt-dam);box-shadow:2px 2px 0 var(--nt-dam)}
.bk-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 6px}
.bk-kpis>div{background:var(--trang-kem);border:2px solid var(--go-dam);padding:6px 8px;min-width:0}
.bk-kpis small{display:block;font-size:12px;opacity:.8}
.bk-kpis b{display:block;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
#bookbody h3{font-size:15px;margin:14px 0 6px;border-bottom:2px solid var(--giay-dam);padding-bottom:3px}
.bk-t{width:100%;border-collapse:collapse;font-size:13px}
.bk-t td,.bk-t th{padding:4px 4px;border-bottom:1px solid var(--giay-dam);text-align:left;font-weight:400;vertical-align:middle}
.bk-t thead th{font-weight:700;font-size:12px}
.bk-t .num{text-align:right;white-space:nowrap}
.bk-t tr.sub td{background:rgba(216,185,138,.28)}
.bk-t th[scope="row"]{white-space:nowrap}
.bk-t th img.ico{display:inline-block;width:22px;height:22px;vertical-align:middle;margin-right:4px}
.pos{color:var(--nt-dam)}.neg{color:var(--gan)}
.bk-empty{text-align:center;padding:22px 8px;opacity:.85}
.bk-chart{display:flex;gap:3px;align-items:stretch;height:118px;margin:4px 0 2px}
.bk-chart .col{flex:1;min-width:0;display:flex;flex-direction:column;text-align:center}
.bk-chart .up,.bk-chart .dn{flex:1;display:flex;align-items:flex-end;justify-content:center}
.bk-chart .up{border-bottom:2px solid var(--go-dam)}
.bk-chart .dn{align-items:flex-start}
.bk-chart i{display:block;width:70%;max-width:22px}
.bk-chart i.pos{background:var(--nt);border:2px solid var(--nt-dam);color:inherit}
.bk-chart i.neg{background:var(--gan);border:2px solid #9A3A32}
.bk-chart small{font-size:11px;line-height:1.3}
.bk-led section h3 small{font-weight:400;font-size:12px;margin-left:6px;opacity:.85}
.bk-led ul{list-style:none;margin:0;padding:0}
.bk-led li{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:5px 0;border-bottom:1px solid var(--giay-dam);font-size:13px}
.bk-led li .d{min-width:0}
.bk-led li .d small{display:block;font-size:11px;opacity:.75}
.bk-led li .num{white-space:nowrap;font-size:14px}
/* ===== Phiếu tổng kết cuối ngày dạng giấy (#dlg, js/ledger.js daySlip) ===== */
#dlg,#enddlg{max-width:min(94vw,390px);padding:0;background:transparent;border:0;border-image:none;box-shadow:none;overflow:visible}
#dlg form,#enddlg form{display:flex;flex-direction:column;gap:12px}
#dlg #sum,#enddlg #endsum{max-height:calc(100dvh - 130px);overflow:auto;padding:6px 8px 12px;filter:drop-shadow(3px 4px 0 rgba(59,47,47,.5))}
#dlg>form>button,#enddlg .endbtns button{align-self:center;min-width:180px;min-height:44px}
.slip{--paper:#FFFBEC;--ink:#3B2F2F;position:relative;background:var(--paper);color:var(--ink);padding:16px 16px 12px;font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums;
  background-image:repeating-linear-gradient(transparent 0 22px,rgba(150,120,70,.09) 22px 23px);
  --zz:7px;padding-top:calc(var(--zz) + 14px);padding-bottom:calc(var(--zz) + 10px);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px var(--zz) repeat-x,linear-gradient(#000 0 0) 0 var(--zz)/100% calc(100% - 2 * var(--zz)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px var(--zz) repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px var(--zz) repeat-x,linear-gradient(#000 0 0) 0 var(--zz)/100% calc(100% - 2 * var(--zz)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px var(--zz) repeat-x}
.slip header{text-align:center;border-bottom:2px dashed #B9A27A;padding-bottom:8px;margin-bottom:2px}
.slip header small{display:block;font-size:12px;letter-spacing:.04em;opacity:.8}
.slip h2{font-size:17px;margin:2px 0 0}
.slip h4{margin:8px 0 2px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#7A4A2E}
.slip hr{border:0;border-top:2px dashed #B9A27A;margin:7px 0}
.slip .rc{display:flex;align-items:baseline;gap:5px;padding:0}
.slip .rc i{flex:1;min-width:8px;border-bottom:1px dotted #8C7A5B;transform:translateY(-3px)}
.slip .rc b{font-weight:600;white-space:nowrap}
.slip .rc.bold{font-weight:700}.slip .rc.bold b{font-weight:800}
.slip .pos{color:#2C7A4B}.slip .neg{color:#C0463C}
.slip .none{margin:2px 0;font-style:italic;opacity:.65}
.slip .cu{margin:3px 0;font-size:12px}
.slip .foot{margin:10px 0 0;text-align:center;font-size:11px;opacity:.6}
.slip .net{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 2px;padding:8px 10px;border:2px solid var(--ink);background:rgba(216,185,138,.22)}
.slip .net small{display:block;font-size:11px;opacity:.75;text-align:right}
.slip .net b{display:block;font-size:22px;line-height:1.15;text-align:right}
.slip .stamp{display:inline-block;padding:2px 10px;font-weight:800;font-size:17px;letter-spacing:.12em;border:3px double currentColor;border-radius:4px;transform:rotate(-9deg);opacity:.88;white-space:nowrap}
.slip .stamp.lai{color:#2C7A4B}.slip .stamp.lo{color:#C0463C}.slip .stamp.hoa{color:#8C6A2B;font-size:14px}
/* ===== Mục tiêu giai đoạn 1 và phiếu hoàn thành (js/goals.js) ===== */
.endbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#qlist li.hd{list-style:none;margin:12px 0 4px;padding:0;font-weight:700;border-bottom:2px solid var(--giay-dam);font-size:14px}
#qlist li small{display:block;font-size:12px;opacity:.8;margin-left:1.4em}
#ph1sum{margin-top:10px;width:100%}
/* ===== Thông báo (js/notes.js) ===== */
#notelist{list-style:none;margin:0 0 10px;padding:0}
.nt{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-bottom:1px solid var(--giay-dam)}
.nt img.ui{flex:none;margin-top:2px}
.nt b{font-size:14px}
.nt p{margin:2px 0;font-size:13px;line-height:1.35}
.nt small{display:block;opacity:.7;font-size:11px}
.nt.new{background:rgba(245,169,59,.2);box-shadow:inset 4px 0 0 var(--sap)}
@media (prefers-reduced-motion:no-preference){
  @keyframes bellring{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}35%{transform:rotate(13deg)}55%{transform:rotate(-9deg)}75%{transform:rotate(5deg)}}
  #btnnote.ring img.ui{animation:bellring .9s ease-in-out;transform-origin:50% 12%}
}
/* ===== Sự kiện ngẫu nhiên (js/events.js) ===== */
.evcard{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:min(78vw,300px)}
.evcard h2{margin:2px 0 0;font-size:20px}
.evcard img{image-rendering:pixelated}
.evcard button{margin-top:8px;min-width:160px}

/* ===== GIAO DIỆN MỀM (ghi đè cuối file): bỏ khung pixel 9-slice cứng, dùng bo góc + bóng mờ cho hộp thoại, bảng, nút, ô nhập. Ảnh pixel bên trong (icon, nhân vật, bản đồ) giữ nguyên. ===== */
:root{--soft-sh:0 10px 28px rgba(59,47,47,.28),0 2px 6px rgba(59,47,47,.18);--soft-sh-s:0 2px 0 rgba(59,47,47,.25),0 4px 10px rgba(59,47,47,.14)}
dialog:not(#dlg):not(#enddlg),.frame:not(.hud),#qsum,#guide{border-image:none!important;border-width:2px;border-radius:20px;box-shadow:var(--soft-sh)}
dialog::backdrop,#story,#intro{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
dialog::backdrop{background:rgba(59,47,47,.45)}
dialog.side{border-radius:20px 0 0 20px;border-width:2px 0 2px 2px!important;box-shadow:-8px 0 28px rgba(59,47,47,.25)!important}
html[data-ui="phone"] dialog.side,html[data-ui="phone"][data-side="left"] dialog.side{border-radius:22px 22px 0 0;border-width:2px 2px 0!important;box-shadow:0 -8px 28px rgba(59,47,47,.28)!important}
html[data-ui="phone"] dialog.side>.row:first-child{border-radius:20px 20px 0 0}
html[data-ui="desktop"] #top>.hud,html[data-ui="desktop"] .toolbar,html[data-ui="desktop"] #rail{border-radius:0}
button:not(.skip),.chip{border-image:none!important;border-radius:12px!important;box-shadow:var(--soft-sh-s)}
button:active{transform:translateY(2px);box-shadow:none}
html[data-ui="desktop"] .toolbar button:not(#open){box-shadow:none}
#guide .skip,.ibox .skip{box-shadow:none}
input,input[type=number],#iname{border-image:none!important;border-radius:10px;border-width:2px}
.bar,.dots i,.badge,#cbadge,.lcd{border-image:none!important;border-radius:6px}
.dots i,.badge,#cbadge{border-radius:999px}
.bar{overflow:hidden}
#msg{border-radius:16px}
/* ===== Nông trại (js/farmui.js): lớp phủ trên bản đồ tiệm, hình tạm bằng CSS ===== */
#farmview{position:absolute;inset:0;z-index:6;display:flex;justify-content:center;overflow:auto;padding:calc(var(--top) + 8px) 12px calc(var(--bot) + 12px);background:#7BC96F repeating-conic-gradient(#74C068 0 25%,#7BC96F 0 50%) 0 0/32px 32px}
#farmview[hidden]{display:none}
.fwrap{width:min(100%,640px);display:flex;flex-direction:column;gap:10px;margin:auto 0}
.fhead{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--giay);color:var(--vien);border:2px solid var(--go-dam);border-radius:16px;box-shadow:var(--soft-sh-s)}
.fhead>div{flex:1;min-width:0;display:flex;flex-direction:column}.fhead b{font-size:16px}.fhead small{font-size:12px;opacity:.85}
.fhead .pt{border-radius:10px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;background:rgba(122,84,40,.35);border:4px dashed #8A5A2B;border-radius:18px}
.plot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:104px;padding:8px 4px 12px;color:var(--vien);text-align:center;border:3px solid #5A3A1A!important;border-radius:14px!important;font-size:13px;line-height:1.2}
.plot .pn{font-weight:700}.plot small{font-size:11px;opacity:.9}.plot img.ico{width:32px;height:32px;image-rendering:pixelated}
.plot.dat{background:#8B5A2B repeating-linear-gradient(0deg,#7A4B22 0 4px,#8B5A2B 4px 12px);color:#FFF3D6}
.plot.chuong{background:#C58F55 repeating-linear-gradient(90deg,#B07A44 0 3px,#C58F55 3px 14px);color:#3B2F2F}
.plot.trong{opacity:.92}
.plot.chin{animation:farmglow 1.2s ease-in-out infinite;border-color:#F2B632!important}
.plot.chin .rd{font-weight:700;color:#F2B632;background:rgba(59,47,47,.65);padding:1px 6px;border-radius:8px}
.plot.chuong.chin .rd{color:#FFF3D6}
.plot.buy{background:var(--giay);border-style:dashed!important;color:var(--vien)}.plot.buy.poor{opacity:.6}
.plot.lock{background:rgba(59,47,47,.25);border-style:dotted!important;color:#FFF3D6;opacity:.7;display:flex}
.pbar{position:absolute;left:8px;right:8px;bottom:6px;height:6px;background:rgba(59,47,47,.55);border-radius:4px;overflow:hidden}
.pbar b{display:block;height:100%;background:#6FCF7B;border-radius:4px}
@keyframes farmglow{50%{box-shadow:0 0 0 4px rgba(242,182,50,.55)}}
.fact{display:flex;justify-content:center}.fact .big{max-width:320px}
html.infarm #cv,html.infarm #collect,html.infarm #btnarr,html.infarm #btnzoom,html.infarm #arrbar{visibility:hidden;pointer-events:none}
html[data-ui="phone"] .fgrid{grid-template-columns:repeat(2,1fr)}
@media (prefers-reduced-motion:reduce){.plot.chin{animation:none}}
html[data-ui="phone"] .fhead{padding-right:58px}
/* Nút Nông trại / Về tiệm: nằm trong khối nút nổi cùng Cài đặt, Zoom, Sắp xếp (không nằm ở thanh menu dưới) */
#openfarm{position:fixed;z-index:11;top:calc(var(--top) + 156px);right:max(8px,calc(100vw - 1108px));padding:0;display:grid;place-items:center}
#openfarm[hidden]{display:none!important}
#openfarm .t{display:none}
#openfarm[aria-pressed="true"]{--bi:var(--f-green);--bid:var(--f-green-dn);background:var(--nt);border-color:var(--nt-dam)}
html.infarm[data-ui="phone"] #openfarm{top:calc(var(--top) + 52px)}
html[data-ui="desktop"] #openfarm{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);top:auto;bottom:212px;right:8px;z-index:13}
html[data-ui="desktop"] #openfarm .t{display:inline;font-size:11px;font-weight:600}
html[data-ui="desktop"] #openfarm[aria-pressed="true"]{--bi:var(--f-green);--bid:var(--f-green-dn);background:var(--nt);border-color:var(--nt-dam)}
.fhead{min-height:88px}
/* Hai khu riêng: trồng trọt và chăn nuôi (farmui.js) */
.fgrid{display:flex;flex-direction:column;gap:12px;padding:0;background:none;border:0}
.farea{padding:8px 10px 10px;border:4px dashed #8A5A2B;border-radius:18px}
.farea.dat{background:rgba(122,84,40,.35)}
.farea.chuong{background:rgba(214,170,98,.5);border-style:solid;border-color:#7A4B22}
.farea h3{margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:15px;color:#FFF3D6;text-shadow:0 1px 0 rgba(59,47,47,.7)}
.farea.chuong h3{color:#3B2F2F;text-shadow:none}
.farea h3 small{font-size:11px;font-weight:600;opacity:.85}
.fg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.plot.zone{grid-column:1/-1;min-height:84px;background:var(--giay);border-style:dashed!important}
html[data-ui="phone"] .fg{grid-template-columns:repeat(2,1fr)}
/* Nước và nhân viên nông trại */
.plot .wt{font-weight:600}.plot.dry .wt{color:#FFD0C8;background:rgba(150,40,30,.7);padding:1px 6px;border-radius:8px}
.plot.chuong.dry .wt{color:#fff}
.fact{flex-wrap:wrap;gap:8px}.fact .big{width:auto;flex:1 1 140px;max-width:220px}
/* ===== Nông trại: hình thật (assets/farm, tools/gen-farm.ps1) ===== */
#farmview{background:#7BC96F url(../assets/farm/grass.png) 0 0/64px 64px;image-rendering:pixelated}
.plot{min-height:128px;justify-content:flex-end;gap:3px}
.plot.dat{background:#8B5A2B url(../assets/farm/soil.png) center/cover;image-rendering:pixelated}
.plot.chuong{background:#E8C86A url(../assets/farm/pen.png) center/cover;image-rendering:pixelated}
.plot.buy{background:var(--giay)}.plot.lock{background:rgba(59,47,47,.25)}
.plot .spr{width:64px;height:64px;image-rendering:pixelated;margin-bottom:-6px;filter:drop-shadow(0 2px 0 rgba(59,47,47,.35))}
.plot.chuong .spr{animation:farmbob 1.6s steps(2) infinite}
.plot.chin .spr{animation:farmbob .7s steps(2) infinite}
@keyframes farmbob{50%{transform:translateY(-3px)}}
.plot .pn,.plot small{background:rgba(59,47,47,.62);color:#FFF3D6;padding:0 6px;border-radius:8px;text-shadow:none}
.plot.buy .pn,.plot.buy small,.plot.lock small,.plot.trong .pn{background:none;color:inherit}
.plot.dat.trong .pn,.plot.dat.trong small,.plot.chuong.trong .pn,.plot.chuong.trong small{background:rgba(59,47,47,.62);color:#FFF3D6}
.plot.dry .wt{background:rgba(150,40,30,.85);color:#fff}
.plot .wt::before{content:"";display:inline-block;width:10px;height:11px;margin-right:4px;vertical-align:-1px;background:url(../assets/farm/drop.png) center/contain no-repeat;image-rendering:pixelated}
.plot.chuong .wt::before{background-image:url(../assets/farm/hay.png)}
.farea.chuong{position:relative;padding-top:26px}
.farea.chuong::before{content:"";position:absolute;left:6px;right:6px;top:-10px;height:32px;background:url(../assets/farm/fence.png) 0 0/64px 32px repeat-x;image-rendering:pixelated}
.farea.dat{border-style:solid}
.fhead::after{content:"";flex:none;width:84px;height:72px;margin:-10px 0 -8px;background:url(../assets/farm/barn.png) center/contain no-repeat;image-rendering:pixelated}
html[data-ui="phone"] .fhead::after{display:none}
@media (prefers-reduced-motion:reduce){.plot.chuong .spr,.plot.chin .spr{animation:none}}
/* Thẻ Bác Ba: nút Nhân viên và Nâng cấp, tiền thuê */
.fwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fwho b{font-size:16px}.fwho small{font-size:12px;opacity:.9}
#frent{font-weight:600;color:var(--go-dam)}
.fbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.fbtns button{min-height:36px;min-width:0;padding:0 12px;font-size:13px}
.fhead{align-items:flex-start;min-height:0}
html[data-ui="phone"] .fhead{padding-right:10px}
/* ===== Lịch (nút #opencal trong khối nút cài đặt/sắp xếp; hộp thoại #caldlg: lịch THÁNG) ===== */
#opencal{position:fixed;z-index:11;top:calc(var(--top) + 156px);right:max(8px,calc(100vw - 1108px));padding:0;display:grid;place-items:center}
#opencal .t{display:none}
html[data-ui="phone"] #openfarm{top:calc(var(--top) + 208px)}
html.infarm[data-ui="phone"] #openfarm{top:calc(var(--top) + 52px)}
html[data-ui="desktop"] #opencal{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);top:auto;bottom:212px;right:8px;z-index:13;box-shadow:2px 2px 0 var(--go-dam)}
html[data-ui="desktop"] #opencal .t{display:inline;font-size:11px;font-weight:600}
html[data-ui="desktop"] #openfarm{bottom:280px}
.calcard{display:flex;flex-direction:column;gap:6px;min-width:0;width:min(84vw,380px);box-sizing:border-box;max-height:84vh;overflow:auto}
.calcard h2{margin:0;font-size:20px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}.calcard h3{margin:8px 0 0;font-size:15px}
.calcard img{image-rendering:pixelated}
#calnow{margin:0;text-align:center;font-size:13px}
.calnav{display:flex;align-items:center;justify-content:space-between;gap:8px}.calnav b{font-size:16px}.calnav button{min-width:44px;margin:0}
#calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}#calgrid .wh{text-align:center;font-size:11px;font-weight:700;opacity:.8}#calgrid .cd.blank{border:0;background:none;min-height:0}#calgrid .cd.sun .dn{color:#C0392B}
#calgrid .cd{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:50px;padding:2px 1px;border:1px solid var(--go-dam);background:var(--trang-kem);border-radius:6px;font-size:11px}
#calgrid .dn{font-weight:800;font-size:13px;line-height:1}
#calgrid .ph{height:32px}
#calgrid .gd{font-size:10px;opacity:.75;min-height:12px}
#calgrid .cd.hol{background:#F7C6BF;border-color:#E0483F}
#calgrid .cd.today{outline:3px solid #2F7FD1;outline-offset:-1px}
#calgrid .cd.today .gd{font-weight:700;opacity:1}
#calgrid .cd.past{opacity:.5}
#callist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#callist li{box-sizing:border-box;display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border:1px solid var(--go-dam);border-radius:8px;background:var(--trang-kem);font-size:12px;line-height:1.35}
#callist li.now{background:#F7C6BF;border-color:#E0483F}#callist li.empty{display:block;opacity:.7}
#callist b{font-size:13px}#callist small{display:block;opacity:.85}
.calnote{margin:4px 0 0;font-size:11px;opacity:.8}
.calcard>button.big{margin-top:6px}
/* ===== Đơn sỉ (#wsdlg) ===== */
.wscard{display:flex;flex-direction:column;gap:6px;min-width:0;width:min(86vw,400px);box-sizing:border-box;max-height:84vh;overflow:auto}
.wscard h2{margin:0;font-size:20px;display:flex;align-items:center;justify-content:center;gap:6px}.wscard img{image-rendering:pixelated}
.wsnote{margin:0;font-size:12px;opacity:.85}
#wslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#wslist li{display:flex;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--go-dam);border-radius:8px;background:var(--trang-kem);font-size:12px;line-height:1.35}
#wslist li>div{flex:1;min-width:0}#wslist small{display:block;opacity:.85}#wslist li.empty{display:block;opacity:.7}
#wslist button{white-space:nowrap}

/* ===== Trò chơi nhỏ (#mgdlg): hiện khi bấm vào bong bóng xuất hiện ngẫu nhiên trên sàn (mgcore.js, render.js) ===== */
.mgcardbox{display:flex;flex-direction:column;gap:8px;min-width:0;width:min(86vw,400px);box-sizing:border-box;max-height:86vh;overflow:auto}
.mgtop{display:flex;align-items:center;gap:8px}.mgtop h2{margin:0;font-size:19px;flex:1;text-align:center}.mgtop button{min-width:40px}
.mgnote{margin:0;font-size:12px;opacity:.85}
.mgcard{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid var(--go-dam);border-radius:10px;background:var(--trang-kem);margin-top:6px}
.mgcard>div{flex:1;min-width:0}.mgcard small{display:block;font-size:11px;opacity:.85;line-height:1.35}.mgcard small.ok{color:#2E8B57;font-weight:700;opacity:1}
.mge{image-rendering:pixelated;flex:none}.mgtop h2{display:flex;align-align:center;gap:6px;align-items:center;justify-content:center}.mgtop h2 img{image-rendering:pixelated}.mgh span{display:grid;place-items:center;width:100%;height:100%}.mgh img{width:80%;height:auto;image-rendering:pixelated;pointer-events:none}
.mghd{display:flex;justify-content:space-between;font-weight:700;font-size:14px}
.mgtime{height:8px;border-radius:5px;background:#E4D4B4;overflow:hidden}.mgtime i{display:block;height:100%;width:100%;background:#55B97A;transition:width .1s linear}
.mgbill{text-align:center;padding:10px;border:2px dashed var(--go-dam);border-radius:10px;background:#FFF8E8;font-size:15px;line-height:1.6}
.mgres{margin-top:4px;font-weight:800}.mgres.good{color:#2E8B57}.mgres.bad{color:#C0392B}
.mgsum{text-align:center;font-size:15px}
.mgtray{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mgtray button{min-height:44px;font-weight:800}
.mgbtns{display:flex;gap:8px;justify-content:center}.mgbtns button{flex:1}
.mgcards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mgc{position:relative;aspect-ratio:1/1;border:2px solid var(--go-dam);border-radius:10px;background:#E4C98A;display:grid;place-items:center;padding:0}
.mgc img.fc{display:none;width:70%;height:auto;image-rendering:pixelated}.mgc img.bk{width:62%;height:auto;image-rendering:pixelated}.mgnote{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 2px}.mgnote img{width:100%;max-width:56px;height:auto;image-rendering:pixelated;pointer-events:none}.mgnote b{font-size:12px;pointer-events:none}
.mgc.up,.mgc.done{background:#FFF8E8}.mgc.up img.fc,.mgc.done img.fc{display:block}.mgc.up img.bk,.mgc.done img.bk{display:none}.mgc.done{opacity:.55}
.mgholes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mgh{aspect-ratio:1/1;border-radius:50%;border:3px solid #6B4A2B;background:radial-gradient(circle at 50% 60%,#3b2a1c 0 45%,#7a5a3a 46%);display:grid;place-items:center;padding:0;font-size:38px;line-height:1}
.mgh.rat{background:radial-gradient(circle at 50% 60%,#d9c3a0 0 45%,#7a5a3a 46%)}
.mgend{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}.mgstars{font-size:34px;color:#F5B93B;letter-spacing:4px}
.mgend p{margin:0}

.fsinstall{margin-top:6px}.fsinstall summary{cursor:pointer;font-size:12px;font-weight:700}.fsinstall small{display:block;margin-top:4px;line-height:1.5}


/* ===== Trang giới thiệu (#splash, js/splash.js) và mục Giới thiệu trong Cài đặt ===== */
#splash{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:#16324a;overflow:hidden;cursor:pointer}
#splash[hidden]{display:none}
#splash::before{content:"";position:absolute;inset:-20px;background:url(../assets/brand/gioi-thieu.jpg?v=76ff77c4) center/cover;filter:blur(16px) brightness(.65)}
#splash img{position:relative;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.45);image-rendering:auto}
#splash button{position:absolute;left:50%;right:auto;width:auto;max-width:90vw;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);min-width:220px;white-space:nowrap;font-size:20px;padding:12px 28px;z-index:2;animation:splashpulse 1.6s ease-in-out infinite}
@keyframes splashpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
.opt.about .ctl{align-items:center;gap:10px}.opt.about img{border-radius:14px;flex:none}