/* a Thinh 30/9: NHAC BAN HANG tren PC — widget o nho duoi day ban + icon trong dong gio ngoi + cau hinh */
/* Icon tren o ban: nam TRONG dong gio ngoi (tblInfoTop), khong absolute -> khong de len chu/tien */
#tables .table .tblInfoTop:has(.srIcons){flex-wrap:wrap;row-gap:2px}
#tables .table .srIcons{display:inline-flex;gap:2px;align-items:center;vertical-align:middle;margin-left:2px}
#tables .table .srI{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-style:normal;flex:0 0 auto}
#tables .table .srI svg{width:12px;height:12px}
.srI.sr-noFood{color:#A32D2D;background:#FCEBEB}
.srI.sr-ice{color:#185FA5;background:#E6F1FB}
.srI.sr-noice{color:#888780;background:#F1EFE8}
.srI.sr-khan,.srI.sr-stable{color:#854F0B;background:#FAEEDA}
.srI.sr-beer{color:#3B6D11;background:#EAF3DE}
.srI.sr-idle{color:#5F5E5A;background:#F1EFE8}

/* Widget: THE RIENG ghim day khung ban (30/9 a chot) — doi khu chi dãy ban doi, the nhac dung yen */
#srPanel{margin-top:12px;background:var(--card,#fff);border:1px solid rgba(0,0,0,.09);border-radius:14px;padding:8px 10px 10px}
/* 30/9 v2 (a: "phai nam duoi day ban"): the rieng NGAY DUOI day ban; day ban giu san chieu cao bang KHU NHIEU BAN NHAT
   (pc_remind.js reserveGrid) -> doi khu the nhac khong nhay len xuong */
body.pc2 #appView > #sec-floor > #srPanel{margin-top:10px}
body.pc2 #tables{align-content:start !important}
#srPanel .srHead{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;color:#444441;margin:0 2px 6px}
#srPanel .srHead > span:first-child{display:inline-flex;align-items:center;gap:6px}
#srPanel .srCnt{background:#FAEEDA;color:#633806;border-radius:999px;padding:0 8px;font-size:11.5px;line-height:18px}
#srPanel .srGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
#srPanel .srCard{min-width:0;display:flex;flex-direction:column;gap:3px;padding:7px 9px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
#srPanel .srCard:hover{border-color:rgba(0,0,0,.18);background:#FCFCFA}
#srPanel .srCard.srRed{border-color:#F09595;background:#FFF8F8}
#srPanel .srCard.srMuted{background:#F7F6F2}
#srPanel .srCT{display:flex;align-items:center;gap:6px;min-width:0}
#srPanel .srCT b{font-size:14px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#srPanel .srIc{display:flex;flex:0 0 auto}
#srPanel .sr-noFood .srIc{color:#A32D2D}
#srPanel .sr-ice .srIc{color:#185FA5}
#srPanel .sr-khan .srIc,#srPanel .sr-stable .srIc{color:#BA7517}
#srPanel .sr-beer .srIc{color:#3B6D11}
#srPanel .sr-idle .srIc,#srPanel .srMuted .srIc{color:#888780}
#srPanel .sr-unserved .srIc{color:#BA7517}
.srI.sr-unserved{color:#854F0B;background:#FAEEDA}
#srPanel .srQ{margin-left:auto;flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(0,0,0,.16);background:#fff;color:#444441;cursor:pointer;padding:0}
#srPanel .srQ:hover{background:#F1EFE8}
#srPanel .srCS{font-size:12px;color:#5F5E5A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#srPanel .srPlus{align-items:center;justify-content:center;background:#F7F6F2;color:#185FA5;text-align:center}
#srPanel .srPlus b{font-size:13px}
#srPanel .srPlus span{font-size:11px;color:#5F5E5A}
#srPanel .srMore{border:0;background:transparent;color:#185FA5;font-size:12px;font-weight:600;cursor:pointer;padding:2px 6px}

/* Menu nho tai o */
#srPop{position:fixed;z-index:100060;min-width:190px;max-width:260px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.16);padding:6px;display:flex;flex-direction:column;gap:2px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;animation:srPopIn .14s ease-out}
#srPop .srPH{display:flex;flex-direction:column;padding:4px 8px 6px;border-bottom:1px solid rgba(0,0,0,.07);margin-bottom:2px}
#srPop .srPH b{font-size:13px}
#srPop .srPH span{font-size:11.5px;color:#5F5E5A;line-height:1.35}
#srPop button{text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 8px;font-size:13px;color:#2C2C2A;cursor:pointer}
#srPop button:hover{background:#F1EFE8}
#srPop button.srMut{color:#888780}
@keyframes srPopIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#srPanel .srCard{transition:none}#srPop{animation:none}}

/* Quan tri */
#srAdmBody .srCfg{display:flex;flex-direction:column;gap:2px;background:#F7F6F2;border-radius:12px;padding:8px 14px}
#srAdmBody .srL{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:13.5px}
#srAdmBody .srL:last-child{border-bottom:0}
#srAdmBody .srL > span:last-child{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
#srAdmBody .srNum{width:64px;text-align:center;padding:4px 6px}
#srAdmBody .srGrpBox{padding:8px 0 10px;border-bottom:1px solid rgba(0,0,0,.06);font-size:13px}
#srAdmBody .srChip{display:inline-flex;align-items:center;gap:4px;margin:0 10px 6px 0;font-size:12.5px;cursor:pointer}
#srAdmBody .srSw{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto}
#srAdmBody .srSw input{opacity:0;width:0;height:0;position:absolute}
#srAdmBody .srSw span{position:absolute;inset:0;background:#D3D1C7;border-radius:999px;transition:background .18s;cursor:pointer}
#srAdmBody .srSw span:before{content:'';position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
#srAdmBody .srSw input:checked + span{background:#1D9E75}
#srAdmBody .srSw input:checked + span:before{transform:translateX(16px)}