/* ===== THEME iOS — goi so (a Thinh duyet 3/7/2026) ===== CHI DOI VO: mau / bo goc / font / hieu ung bam. KHONG dung logic, id, class, onclick. Ap dung: index.html (PC thu ngan) + kho.html. Go bo = xoa dong theme_ios.css. */ /* 1) Bien mau goc (index.html dung var) */ :root{ --bg:#f2f2f7; --panel:#ffffff; --text:#1c1c1e; --muted:#8e8e93; --line:#e2e2e7; --brand:#0a84ff; --brand2:#00a091; --danger:#e0342b; --warn:#ff9f0a; --ok:#248a3d; --soft:#eaf3ff; } /* 2) Font he thong (Segoe UI tren Windows, giong SF cua Apple) */ html,body,button,input,select,textarea,table,div,span,label{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important; } body{background:var(--bg)} /* 3) Control: bo 10px, vien nhat, hieu ung bam 120ms nhe (GPU) */ button,input,select,textarea{border-radius:10px;border-color:var(--line)} button{transition:transform .12s ease,filter .12s ease} button:active,button.pressed{transform:scale(.97);filter:brightness(.94);box-shadow:none} input:focus,select:focus,textarea:focus{outline:none;border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.15)} /* 4) The/khoi lon: bo 14px */ .card,.modal{border-radius:14px} .billLines,.notice{border-radius:12px} .notice{background:#eaf3ff;border-color:#b3d7ff} th{background:#f7f7fa} /* 5) So do ban: bo tron, tong mau iOS diu — noi dung hien thi GIU NGUYEN */ .table{border-radius:14px;border-width:1.5px} .table.empty{background:#fff} .table.serving{background:#e4f8ea;border-color:#30d158} .table.paying{background:#fff1dc;border-color:#ff9f0a} .table.selected{outline:3px solid #0a84ff} .menuGrid .item{border-radius:12px} /* 6) kho.html: header + tab pill + nut chinh */ .hd{background:#0a84ff} .tab{border-radius:999px} .tab.on{background:#0a84ff;border-color:#0a84ff} .btn.primary{background:#0a84ff;border-color:#0a84ff} .pcShortcutHint b{color:#0a84ff} /* 7) Nang bo goc cac inline style cu (6-9px -> 10px, 12px -> 14px) */ [style*="border-radius:6px"],[style*="border-radius:7px"], [style*="border-radius:8px"],[style*="border-radius:9px"]{border-radius:10px !important} [style*="border-radius:12px"]{border-radius:14px !important} /* 8) MAP MAU inline cu -> tong iOS, GIU NGU NGHIA (xanh=xanh, do=do...) */ [style*="background:#2563eb"],[style*="background:#0ea5e9"],[style*="background:#0369a1"], [style*="background:#1d4ed8"],[style*="background:#0877a6"],[style*="background:#185fa5"]{background:#0a84ff !important} [style*="background:#16a34a"],[style*="background:#15803d"],[style*="background:#1c7a45"], [style*="background:#059669"]{background:#30d158 !important} [style*="background:#dc2626"],[style*="background:#b91c1c"],[style*="background:#ef4444"]{background:#ff453a !important} [style*="background:#7c3aed"],[style*="background:#6d28d9"],[style*="background:#5b21b6"], [style*="background:#8b5cf6"]{background:#bf5af2 !important} [style*="background:#d97706"],[style*="background:#ea580c"],[style*="background:#b25b00"], [style*="background:#f59e0b"]{background:#ff9f0a !important} [style*="background:#0e7490"],[style*="background:#0f766e"],[style*="background:#0d9488"]{background:#32ade6 !important} .btn,.mini{border-radius:10px} /* 9) sp: fix the mon PC — font Segoe cao hon Arial vai px lam gia bi cat (min-height 84 khong du). Nang nhe + bop margin trong de giu mat do mon gan nhu cu. */ .menuGrid .item{min-height:94px} .menuGrid .item .code{margin-bottom:2px} .menuGrid .item .price{margin-top:2px} /* 10) sq: FIX DUT DIEM gia mon PC — app_settings.js bom style .v5ItemCard{min-height:76px;overflow:hidden}!important nen muc 9 bi de. Dung specificity cao hon + !important. 104px du cho ten mon 2 dong + gia day du. */ .menuGrid .item.v5ItemCard{min-height:104px!important} body.mobile-order-only .menuGrid .item.v5ItemCard{min-height:88px!important} /* 11) sq: DONG BO CO NUT trang order/service hai san (nut "Tieng Viet"/"Quet LAN" het to hon nut khac). 1 co chuan cho .btn: cao 40px, chu 14px. Select hang cau hinh cung 40px cho thang hang. */ body.seafood-order-only .btn,body.service-only .btn,body.service-floor-app .btn{ min-height:40px!important;padding:8px 12px!important;font-size:14px!important; line-height:1.2!important;box-sizing:border-box!important;font-weight:600!important} body.seafood-order-only .order-top-row select,body.seafood-order-only .order-top-row .btn{min-height:40px!important} /* 12) sv (thay sr): SUA TAN GOC the mon — bo ghim absolute (gia de len don vi khi ten 2-3 dong). Chuyen FLEX COLUMN: ten (co gian, tu cat trong vung cua no) -> don vi -> gia (margin-top:auto day xuong day). Don vi + gia LUON giu cho rieng, khong the bi de du ten dai bao nhieu. Ma mon inline canh ten do ton 1 dong. */ .menuGrid .item.v5ItemCard{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:106px!important;height:auto!important;max-height:none!important;padding:8px!important} .menuGrid .item.v5ItemCard .code{display:inline!important;margin:0 4px 0 0!important} .menuGrid .item.v5ItemCard>div:first-child{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important} .menuGrid .item.v5ItemCard b{font-size:14px!important} .menuGrid .item.v5ItemCard>.muted{flex:0 0 auto!important;margin-top:2px} .menuGrid .item.v5ItemCard .v5ItemBottom{flex:0 0 auto!important;position:static!important;margin:4px 0 0!important} /* 13) st: O BAN DONG DEU — moi o cung chieu cao (ban trong = ban co khach), chu trang thai 13px + khong xuong dong ("Dang tinh tien" het gay 2 dong lech hang). */ .table{min-height:118px!important} .table b{font-size:13px;white-space:nowrap} /* 14) sw: 5 mon hoc tu macOS — thuan CSS, khong dung logic, khong blur/khong bong nang */ /* (1) Zebra + hover dong bang — CHI trong .wrap (kho/thu_mua/doi_soat/kiem_*), KHONG dinh bang bill index (bill co to mau trang thai theo class, zebra de len se loan) */ .wrap table tr:nth-child(even){background:#f7f7f9} .wrap table tr:hover{background:#eef4ff} /* (2) Thanh cuon manh kieu macOS */ *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:#c7c7cc;border-radius:999px} *::-webkit-scrollbar-thumb:hover{background:#a8a8ad} /* (3) Modal kieu sheet: truot nhe + mo dan 150-180ms (transform/opacity = GPU, chay 1 lan luc mo) */ @keyframes iosFadeIn{from{opacity:0}} @keyframes iosSheetIn{from{opacity:0;transform:translateY(-16px) scale(.96)}} .modalMask{animation:iosFadeIn .15s ease-out} .modal{animation:iosSheetIn .26s cubic-bezier(.34,1.35,.5,1)} @media (prefers-reduced-motion:reduce){.modalMask,.modal{animation:none}} /* (4) Toolbar dong nhat: chu nut 600 thay 700 (bot tho), hint phim tat bo tron */ button{font-weight:600} .pcShortcutHint{border-radius:10px} /* (5) Focus ban phim ro rang (Tab qua nut/link) */ button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid rgba(10,132,255,.45);outline-offset:1px} /* tt: hover-lift thẻ món CHỈ máy có chuột */ @media (hover:hover) and (pointer:fine){ .menuGrid .item{transition:transform .13s cubic-bezier(.2,.8,.2,1),border-color .13s} .menuGrid .item:hover{transform:translateY(-2px)} } /* tv (a Thinh): hiệu ứng macOS RẺ — viền sáng khi focus BÀN PHÍM (box-shadow tĩnh, không animate) + thẻ món nhấn co */ button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.menuGrid .item:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,138,221,.38)} @media (hover:hover) and (pointer:fine){.menuGrid .item:active{transform:scale(.97)}} /* tw: khi modal RENDER LẠI (đổi phương thức thanh toán...) -> KHÔNG chạy lại animation mở (hết nháy mạnh) */ .modalMask.no-open-anim,.modal.no-open-anim{animation:none!important} /* 15) v6.12.276d (a Thinh: AO MOI dep hon toan he) — chi CSS: bong nhe, hover nhac the ban, vien diu */ .card,.modal,.topbar{border-color:#e7ecf3} .card{box-shadow:0 1px 2px rgba(16,24,40,.05)} .topbar{box-shadow:0 1px 3px rgba(16,24,40,.06)} .table{border-width:1px!important;box-shadow:0 1px 2px rgba(16,24,40,.05)} .table.empty{border-color:#eef1f6} .table.serving{border-color:#a7f3d0} .table.paying{border-color:#fdba74} th{background:#f5f7fa;border-color:#eef1f6} .pill,.chip{border-radius:999px} @media (hover:hover) and (pointer:fine){ .table{transition:transform .13s ease,box-shadow .14s ease,border-color .12s} .table:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(16,24,40,.2)} .card:hover{box-shadow:0 2px 7px rgba(16,24,40,.06)} } /* ============================================================ 16) v6.12.277b — HIEU UNG KINH iOS (a Thinh) MAC DINH: faux-glass (nen mo + vien sang + bong) — KHONG blur -> nhe, an toan GPU onboard (Quan B). TUY CHON: class .ui-glass-blur (nut "Kinh") -> blur that (backdrop-filter) cho may manh (Quan A T1200). CHI ap: header (.topbar) + the tong quan (.glassCard) + modal. KHONG dinh luoi 140 ban / list cuon. ============================================================ */ /* --- Header: faux = gan mo cao (doc ro chu) + vien sang + bong noi --- */ .ui-glass .topbar{ background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,249,252,.90)); border:1px solid rgba(255,255,255,.85); box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 26px -16px rgba(16,24,40,.42); -webkit-backdrop-filter:none;backdrop-filter:none; } /* blur that: trong hon + kinh mo, chu van ro nho saturate */ .ui-glass-blur .topbar{ background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(246,248,252,.66)); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); } /* --- The tong quan: faux = panel kinh mo dat tren nen xam --- */ .ui-glass .glassCard{ background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,250,253,.74)); border:1px solid rgba(255,255,255,.8); box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 34px -22px rgba(16,24,40,.5); } .ui-glass-blur .glassCard{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(250,250,253,.55)); -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); } /* --- Modal: faux = kinh sang vien noi; blur = trong + frost --- */ .ui-glass .modal{ background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(250,251,253,.94)); border:1px solid rgba(255,255,255,.9); box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 60px -20px rgba(16,24,40,.5); } .ui-glass-blur .modal{ background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(250,251,253,.72)); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); } /* mask: blur that lam mo nen phia sau (chi khi bat) */ .ui-glass-blur .modalMask{ -webkit-backdrop-filter:blur(6px) saturate(120%); backdrop-filter:blur(6px) saturate(120%); } /* --- Nut kinh trong header (icon-only, gon de khong day nut Thoat xuong hang) --- */ #glassToggleBtn{white-space:nowrap;padding-left:9px;padding-right:9px;min-width:0;font-size:15px;line-height:1} #glassToggleBtn.on{background:#0a84ff;border-color:#0a84ff} /* ============================================================ 17) v277d — NANG CAP KINH cho MAY MANH (chi khi bat .ui-glass-blur, vd Quan A T1200) Quan B (faux, khong blur) KHONG dinh gi. Gom 5: (1) kinh rong hon, (2) vibrancy nhieu tang, (3) bong nhieu lop, (4) chuyen dong muot, (5) nen dong nhe sau kinh. Tat ca deu duoi .ui-glass-blur -> chi may da bam nut 🫧 moi an. ============================================================ */ /* (1) Kinh that RONG HON: toolbar + the tam tinh + the ket qua tim (KHONG dinh luoi 140 ban) */ .ui-glass-blur .toolbar, .ui-glass-blur .card.bill, .ui-glass-blur #activeSearchResults{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(250,250,253,.55)); border:1px solid rgba(255,255,255,.75); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); } /* (2) VIBRANCY nhieu tang: tang saturate/contrast cho mau nen anh qua kinh ruc hon */ .ui-glass-blur .topbar{ -webkit-backdrop-filter:blur(22px) saturate(200%) contrast(105%); backdrop-filter:blur(22px) saturate(200%) contrast(105%); } .ui-glass-blur .glassCard{ -webkit-backdrop-filter:blur(20px) saturate(190%) contrast(104%); backdrop-filter:blur(20px) saturate(190%) contrast(104%); } /* vien sang mep + vien kinh trong cho cac vung kinh (nhieu tang chieu sau) */ .ui-glass-blur .topbar, .ui-glass-blur .glassCard, .ui-glass-blur .card.bill{ box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.22), 0 10px 30px -14px rgba(16,24,40,.42), 0 30px 70px -30px rgba(16,24,40,.5); } /* (3) BONG NHIEU LOP dam hon cho modal -> noi khoi that su */ .ui-glass-blur .modal{ -webkit-backdrop-filter:blur(22px) saturate(190%) contrast(104%); backdrop-filter:blur(22px) saturate(190%) contrast(104%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px -8px rgba(16,24,40,.28), 0 24px 50px -20px rgba(16,24,40,.4), 0 48px 100px -40px rgba(16,24,40,.45); } /* (4) CHUYEN DONG MUOT hon (chi may manh) */ .ui-glass-blur .modal{animation:iosSheetInPro .34s cubic-bezier(.22,1.2,.36,1)} @keyframes iosSheetInPro{from{opacity:0;transform:translateY(-20px) scale(.94)}} @media (hover:hover) and (pointer:fine){ .ui-glass-blur .table{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease} .ui-glass-blur .table:hover{transform:translateY(-2px) scale(1.008);box-shadow:0 14px 28px -12px rgba(16,24,40,.32)} .ui-glass-blur .tab{transition:transform .14s ease,background .2s ease,color .2s ease} } /* (5) NEN DONG NHE sau kinh — lop gradient chuyen rat cham. pointer-events:none -> KHONG bao gio chan bam. Chi bat khi kinh that: body trong suot de lop nay hien, html giu mau nen goc. */ html.ui-glass-blur{background:var(--bg)} .ui-glass-blur body{background:transparent} .ui-glass-blur body::before{ content:"";position:fixed;inset:-25vmax;z-index:-1;pointer-events:none; background: radial-gradient(38vmax 38vmax at 22% 28%, rgba(10,132,255,.10), transparent 60%), radial-gradient(34vmax 34vmax at 78% 20%, rgba(48,209,88,.09), transparent 60%), radial-gradient(40vmax 40vmax at 62% 82%, rgba(191,90,242,.08), transparent 62%); animation:posGlassDrift 42s ease-in-out infinite alternate; will-change:transform; } @keyframes posGlassDrift{ from{transform:translate3d(-3vmax,-2vmax,0) rotate(0deg)} to{transform:translate3d(3vmax,2vmax,0) rotate(8deg)} } @media (prefers-reduced-motion:reduce){ .ui-glass-blur body::before{animation:none} .ui-glass-blur .modal{animation:none} }