/* r11 · Quản lý ứng dụng Order – kính lỏng (liquid glass), sáng/tối, nhãn 1 dòng */
#app .oa{max-width:1080px}
#app .oa.m{padding:0 14px}
#app .oanav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin:0 -2px;-webkit-overflow-scrolling:touch}
#app .oanav::-webkit-scrollbar{display:none}
#app .oanav>div{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:12px;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;color:#1E2A30;
 background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.66));border:1px solid rgba(30,42,48,.10);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 12px rgba(30,42,48,.08);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
#app .oanav>div.on{color:#fff;background:linear-gradient(180deg,#119AAB,#0A6873);border-color:#0A6873;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px rgba(12,122,135,.32)}
#app .oakpi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:4px}
#app .oakpi.m{grid-template-columns:repeat(2,minmax(0,1fr))}
#app .oakpi>div{padding:12px 14px;border-radius:16px;min-width:0;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 8px 22px rgba(30,42,48,.08)}
#app .oakpi .cs,#app .oaln,#app .oatile b,#app .oatile .cs,#app .oaf>.cs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#app .oakpi b{display:block;font-size:19px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .oatiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
#app .oa.m .oatiles{grid-template-columns:1fr}
#app .oatile{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;cursor:pointer;min-width:0;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 6px 18px rgba(30,42,48,.07)}
#app .oatile:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 26px rgba(30,42,48,.12)}
#app .oatile .bd,#app .oahd .bd{flex:none;white-space:nowrap}
#app .oagrow{flex:1;min-width:0}
#app .oarow{display:flex;align-items:center;gap:10px;min-width:0}
#app .oarow.oaoff .oagrow{opacity:.55}
#app .oatg{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px}
#app .oatg .cs{font-size:10.5px;line-height:1}
#app .oaedb,#app .oax{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;cursor:pointer;background:rgba(12,122,135,.08);border:1px solid rgba(12,122,135,.16)}
#app .oath{flex:none;width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:0 2px 8px rgba(30,42,48,.14)}
#app .oath0{display:grid;place-items:center;background:rgba(30,42,48,.06)}
#app .oacard{padding:12px;border-radius:16px;margin-top:8px;min-width:0;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 6px 18px rgba(30,42,48,.06)}
#app .oahd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
#app .oamoney{margin-left:auto;white-space:nowrap}
#app .oaline{margin-top:6px;line-height:1.45;overflow-wrap:anywhere}
#app .oaact{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
#app .oaact.c{justify-content:center}
#app .oaact .inp{flex:1;min-width:140px}
#app .oabtn{height:40px;padding:0 14px;font-size:13.5px;font-weight:800;border-radius:12px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;width:auto;text-decoration:none;cursor:pointer;border:1px solid rgba(30,42,48,.10)}
#app .oabtn.pri{border-color:transparent}
#app .oabtn.dis{opacity:.45;pointer-events:none}
#app .oano{background:linear-gradient(180deg,#E5574A,#C4392D)!important;color:#fff!important;border-color:transparent}
#app .oasave{position:sticky;bottom:86px;z-index:3;padding:10px;border-radius:16px;background:rgba(255,255,255,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(30,42,48,.12)}
#app.D .oasave{bottom:12px}
#app .oagrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#app .oa.m .oagrid{grid-template-columns:1fr}
#app .oagrid.oa2{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;margin-top:8px}
#app .oa.m .oagrid.oa2{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
#app .oagrid.oa2 .oaact{margin-top:0}
#app .oaf{display:flex;flex-direction:column;gap:5px;min-width:0}
#app select.inp{appearance:auto;padding-right:8px}
#app .oata{height:auto;padding:10px 12px;line-height:1.45;resize:vertical;font-weight:500}
#app .inp:disabled{opacity:.8;background:rgba(30,42,48,.04)}
#app .oaimg{display:flex;gap:8px;align-items:center}
#app .oaheros{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
#app .oahero{border-radius:14px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;border:2px solid transparent;box-shadow:0 4px 14px rgba(30,42,48,.12)}
#app .oahero.on{border-color:#0C7A87;box-shadow:0 0 0 3px rgba(12,122,135,.25)}
#app .oahero img{width:100%;height:100%;object-fit:cover;display:block}
#app .oalock{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:12px;margin:8px 0;font-size:12.5px;line-height:1.45;color:#0A5F69;background:rgba(12,122,135,.08);border:1px solid rgba(12,122,135,.16)}
#app .oalock svg{flex:none;margin-top:2px}
#app .oaerr{margin:8px 0;padding:9px 12px;border-radius:12px;font-size:12.5px;color:#A1281C;background:rgba(229,87,74,.10);border:1px solid rgba(229,87,74,.22)}
#app .oachips{margin:8px 0}
#app .oachips>div span{margin-left:4px;font-weight:800;cursor:pointer}
#app .oacall{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 0}
#app .oacav{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:rgba(12,122,135,.10);border:1px solid rgba(12,122,135,.2)}
#app .oacav.on,#app .oacav.ring{background:linear-gradient(180deg,#2FBF71,#1F8F55);border-color:transparent;box-shadow:0 10px 26px rgba(47,191,113,.4)}
#app .oacav.ring{animation:oaring 1.2s ease-in-out infinite}
@keyframes oaring{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
#app .oabig{font-size:24px;font-weight:800}
#app .oadis{opacity:.5;cursor:not-allowed}
#app .r3sw{cursor:pointer}
html.dk #app .oanav>div{color:#E6EEF1;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border-color:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 6px 16px rgba(0,0,0,.3)}
html.dk #app .oanav>div svg{stroke:#7FE7F0}
html.dk #app .oanav>div.on{color:#fff;background:linear-gradient(180deg,#119AAB,#0A6873)}
html.dk #app .oanav>div.on svg{stroke:#fff}
html.dk #app .oakpi>div,html.dk #app .oatile,html.dk #app .oacard{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 22px rgba(0,0,0,.28)}
html.dk #app .oalock{color:#9DEEF5;background:rgba(127,231,240,.08);border-color:rgba(127,231,240,.18)}
html.dk #app .oalock svg{stroke:#7FE7F0}
html.dk #app .oaerr{color:#FFB4AA;background:rgba(255,122,107,.10);border-color:rgba(255,122,107,.25)}
html.dk #app .oaedb,html.dk #app .oax{background:rgba(127,231,240,.08);border-color:rgba(127,231,240,.18)}
html.dk #app .oaedb svg,html.dk #app .oatile .ico svg,html.dk #app .oacard svg,html.dk #app h3 svg{stroke:#7FE7F0}
html.dk #app .oasave{background:rgba(20,30,36,.72)}
html.dk #app .oabtn{border-color:rgba(255,255,255,.12)}
html.dk #app .inp:disabled{background:rgba(255,255,255,.03)}
html.dk #app .oath0{background:rgba(255,255,255,.06)}
html.dk #app .oacav{background:rgba(127,231,240,.08);border-color:rgba(127,231,240,.18)}
#app .oamd{flex:none;white-space:nowrap;display:inline-flex;align-items:center}
#app .oa.m select.inp,#app .oa.m .oagrid.oa2 .inp{font-size:13px;padding-left:10px;padding-right:6px}
#app .oatiles{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
#app .oatile b{font-size:14px;line-height:1.3;font-weight:800}
#app .oatile .cs{font-size:12px}
#app .oa.m .oarow .oaln{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}