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

/* r23t165 Order densify · status strip + room-first cards + mobile bottom pad */
#app .oastatus{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
#app .oastatus::-webkit-scrollbar{display:none}
#app .oastatus>button,#app .oastatus>div{flex:1 1 0;min-width:72px;padding:10px 8px;border-radius:14px;font-size:12px;font-weight:700;text-align:center;cursor:pointer;border:1px solid rgba(30,42,48,.12);background:rgba(255,255,255,.7);color:#3C4A52;line-height:1.2}
#app .oastatus>button.on,#app .oastatus>div.on{background:#0C7A87;border-color:#0C7A87;color:#fff}
#app .oastatus b{display:block;font-size:16px;margin-top:2px}
#app .oagroups{flex-wrap:nowrap;overflow-x:auto}
#app .oadon{padding:14px 14px 12px}
#app .oaroomb{display:flex;align-items:center;justify-content:space-between;gap:8px}
#app .oaroorn{font-size:20px;font-weight:900;letter-spacing:-.02em}
#app .oareq{margin-top:8px;font-size:15px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
#app .oameta{margin-top:6px}
#app .oadonlist{padding-bottom:8px}
#app .oa.m .oadonlist,#app .oa.m .oalist{padding-bottom:88px}
#app .oacompact{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#app.M .oa{padding-bottom:8px}
html.dk #app .oastatus>button,html.dk #app .oastatus>div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#DDE6EA}
html.dk #app .oastatus>button.on,html.dk #app .oastatus>div.on{background:#0C7A87;color:#fff}
#app .oabadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:900;background:#E5574A;color:#fff;vertical-align:middle}
#app .oachips>div.on .oabadge{background:#fff;color:#0C7A87}

/* ===== t233u clean-slate Order reception (orx) — mobile-first, no legacy stack ===== */
/* t243u: Order orx aligned to approved xem-thu-order demo layout (live API, not demo data) */
#app .orx-top{position:sticky;top:0;z-index:5;margin:0 0 10px;padding:10px 14px;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#0C7A87,#0A6873);color:#fff;box-shadow:0 4px 16px rgba(5,52,58,.22)}
#app .orx-top b{display:block;font-size:14px;font-weight:800}
#app .orx-top span{display:block;margin-top:3px;font-size:12px;line-height:1.35;opacity:.95}
#app .orx{max-width:520px;margin:0 auto;padding:0 14px 96px;box-sizing:border-box;overflow-x:hidden;background:#F3F7F8;min-height:60vh}
#app.D .orx{max-width:720px;padding:0 0 24px;background:transparent;min-height:0}
#app .orx *{box-sizing:border-box}
#app .orx-shell{min-width:0}
#app .orx-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 10px}
#app.D .orx-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
#app .orx-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 10px;border-radius:14px;border:1px solid rgba(12,122,135,.22);background:#fff;color:#0A5F69;font-size:13.5px;font-weight:800;line-height:1.2;text-align:center;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
#app .orx-tab.on{color:#fff;background:linear-gradient(180deg,#119AAB,#0A6873);border-color:#0A6873}
#app .orx-tab-lab{flex:1;min-width:0}
#app .orx-badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#E5574A;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
#app .orx-tab.on .orx-badge{background:#fff;color:#0C7A87}
#app .orx-seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:rgba(12,122,135,.08);margin:0 0 12px}
#app .orx-seg-i{flex:1;min-width:0;height:34px;border:0;border-radius:10px;background:transparent;font-size:13px;font-weight:800;color:#0A5F69;cursor:pointer}
#app .orx-seg-i.on{background:#fff;color:#05343A;box-shadow:0 2px 8px rgba(12,122,135,.18)}
#app .orx-list{display:flex;flex-direction:column;gap:8px}
#app .orx-row{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:16px;border:1px solid rgba(30,42,48,.10);background:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(30,42,48,.06)}
#app .orx-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#app .orx-room{font-size:16px;font-weight:800;color:#05343A}
#app .orx-st{font-size:11.5px;font-weight:800;color:#0C7A87;white-space:nowrap}
#app .orx-req{margin-top:4px;font-size:14.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
#app .orx-meta{margin-top:4px;font-size:12px;color:#5A6A72;overflow-wrap:anywhere}
#app .orx-empty,#app .orx-mute{padding:18px 8px;text-align:center;font-size:13.5px;color:#5A6A72}
#app .orx-ban{margin:0 0 10px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.4;background:rgba(229,87,74,.10);border:1px solid rgba(229,87,74,.25);color:#A1281C}
#app .orx-spa{margin:0 0 10px;padding:10px 12px;border-radius:12px;font-size:12.5px;line-height:1.4;background:rgba(255,210,122,.18);border:1px solid rgba(183,121,31,.28);color:#7A4E00}
#app .orx-spa.mute{opacity:.85}
#app .orx-back,#app .orx-link{border:0;background:none;color:#0C7A87;font-weight:800;font-size:13.5px;padding:6px 0;cursor:pointer}
#app .orx-det-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
#app .orx-det-title{margin:8px 0 6px;font-size:18px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
#app .orx-note{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:#3A4A52}
#app .orx-dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
#app .orx-dl>div{padding:10px;border-radius:12px;background:rgba(12,122,135,.06)}
#app .orx-dl dt{font-size:11px;color:#5A6A72;margin:0}
#app .orx-dl dd{margin:2px 0 0;font-size:13.5px;font-weight:800;overflow-wrap:anywhere}
#app .orx-prog{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(12,122,135,.08);margin-bottom:10px;font-size:13px}
#app .orx-act{display:flex;flex-direction:column;gap:8px;margin:12px 0;position:sticky;bottom:24px;z-index:2}
#app.D .orx-act{position:static}
#app .orx-btn{height:48px;border-radius:14px;font-size:15px;font-weight:800;border:1px solid transparent;cursor:pointer}
#app .orx-btn.wide{width:100%}
#app .orx-btn.pri{color:#05343A;background:linear-gradient(180deg,#6FF5C0,#42CAD7)}
#app .orx-btn.ghost{background:#fff;border-color:rgba(30,42,48,.14);color:#1E2A30;height:42px;font-size:13.5px}
#app .orx-btn:disabled{opacity:.5;pointer-events:none}
#app .orx-hist{margin-top:14px;padding-top:10px;border-top:1px solid rgba(30,42,48,.08)}
#app .orx-hist h3{margin:0 0 8px;font-size:13px}
#app .orx-hist ol{margin:0;padding-left:18px;font-size:12.5px;line-height:1.45;color:#3A4A52}
#app .orx-hist time{font-variant-numeric:tabular-nums;color:#5A6A72}
#app .orx-auth{padding:18px 0}
/* hide legacy gtab inject on Order clean screen */
#app.M .gtabs:has(+ .orx),#app.M .orx ~ .gtabs{display:none}
#app.M .mscr:has(.orx) .gtabs{display:none}