/* ============================================================================
   4/10 (chuyen canh iOS): CSS di kem pc_motion.js (a Thinh duyet prototype, cham hon: 520ms trang / 480ms vien tab).
   Chi hien thi. LUON chay (khong tat theo "giam hieu ung" cua may — may quan bat san, tung mat hieu ung).
   ============================================================================ */

/* 4/10 (chuyen canh iOS): vien trang cua thanh tab (.mk-seg) = 1 lop ::before truot toi tab moi (JS dat --pcm-x/y/w/h) */
.mk-seg.pcm-seg{position:relative;isolation:isolate}
.mk-seg.pcm-seg::before{content:"";position:absolute;left:0;top:0;width:var(--pcm-w,0px);height:var(--pcm-h,0px);
  transform:translate3d(var(--pcm-x,0px),var(--pcm-y,0px),0);background:#fff;border-radius:6px;
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);z-index:0;pointer-events:none;opacity:0;
  transition:transform .48s cubic-bezier(.32,.72,0,1),width .48s cubic-bezier(.32,.72,0,1),height .48s cubic-bezier(.32,.72,0,1),opacity .2s}
.mk-seg.pcm-seg.pcm-has::before{opacity:1}
.mk-seg.pcm-seg.pcm-nt::before{transition:none !important}
.mk-seg.pcm-seg>*{position:relative;z-index:1}
/* 4/10 (chuyen canh iOS): nut dang chon bo nen trang rieng (vien truot ve thay) */
.mk-seg.pcm-seg.pcm-has>.on,.mk-seg.pcm-seg.pcm-has>[aria-selected="true"]{background:transparent !important;background-image:none !important;box-shadow:none !important}
#sec-admin #admMkBar .admMkSeg.pcm-seg.pcm-has>button.on,#sec-staff #admMkBarStaff .admMkSeg.pcm-seg.pcm-has>button.on{background:transparent !important;box-shadow:none !important}

/* 4/10 (chuyen canh iOS): cat phan truot ngang trong luc chay (khong hien thanh cuon ngang) */
.pcm-clip{overflow-x:clip !important}

/* 4/10 (chuyen canh iOS): bong hop chi tiet dang dong (ban sao, khong bam duoc, khong con class modalMask) */
#modalHost>.pcm-gmask{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:var(--z-modal,70);background:rgba(0,0,0,.32);pointer-events:none !important}
/* 4/10 (chuyen canh iOS): hop posConfirm/posAlert do pcMotion lo hieu ung -> bo keyframe cu */
#posDlgLayer.pcm,#posDlgLayer.pcm .pd{animation:none !important}

/* 4/10 (chuyen canh iOS): Kho — bo hieu ung doi tab cu (khoAnim), pcMotion truot ngang thay */
html.pcm-on #content.khoAnim{animation:none !important}

/* 4/10 (chuyen canh iOS): vien chon TRUOT cho thanh chip (khu ban, nhom mon, loc bill, loc NV, phuong thuc TT).
   ::before cua hop .pcm-pb nam DUOI chip (z 0 < chip z 1); chip dang chon trong suot de lo vien. JS dat --pcm-x/y/w/h/c. */
body.pc2 .pcm-pb{position:relative}
body.pc2 .pcm-pb:not(.toolbar){isolation:isolate}
body.pc2 .pcm-pb::before{content:"";position:absolute;left:0;top:0;width:var(--pcm-w,0px);height:var(--pcm-h,0px);
  transform:translate3d(var(--pcm-x,0px),var(--pcm-y,0px),0);border-radius:var(--pcm-r,999px);background:var(--pcm-c,#185FA5);
  box-shadow:0 1px 2px rgba(15,40,70,.16);z-index:0;pointer-events:none;opacity:0;
  transition:transform .48s cubic-bezier(.32,.72,0,1),width .48s cubic-bezier(.32,.72,0,1),height .48s cubic-bezier(.32,.72,0,1),background-color .3s ease,opacity .2s}
body.pc2 .pcm-pb.pcm-pon::before{opacity:1}
body.pc2 .pcm-pb.pcm-nt::before{transition:none !important}
body.pc2 .pcm-pb:not(.toolbar) > *,body.pc2 #sec-floor > .toolbar.pcm-pb > #zoneTabs > *{position:relative;z-index:1}
body.pc2 .pcm-pon > :is(button,label){transition:color .2s ease,background-color .25s ease,border-color .25s ease !important}
/* chip dang chon: bo nen/vien rieng (vien truot ve thay), chu trang */
html body.pc2 #sec-floor > .toolbar #zoneTabs.pcm-pon > .active,
html body.pc2 #appView #orderGroupChips.pcm-pon > .on,
html body.pc2 #appView #mkCashPills.pcm-pon > .on,
html body.pc2 #appView #pcsStaffPills.pcm-pon > .on,
html body.pc2 #modalHost .paymentModalMethodRow.pcm-pon > .active{background:transparent !important;background-image:none !important;border-color:transparent !important;box-shadow:none !important;color:#fff !important}
/* dang truot: chip moi chu toi (vien chua toi), chip cu trong suot (vien roi di, khong bi che) */
html body.pc2 #sec-floor > .toolbar #zoneTabs.pcm-pon.pcm-mv > .active,
html body.pc2 #appView #orderGroupChips.pcm-pon.pcm-mv > .on,
html body.pc2 #appView #mkCashPills.pcm-pon.pcm-mv > .on,
html body.pc2 #appView #pcsStaffPills.pcm-pon.pcm-mv > .on,
html body.pc2 #modalHost .paymentModalMethodRow.pcm-pon.pcm-mv > .active{color:var(--cgd,var(--ink,#15181d)) !important}
html body.pc2 #sec-floor > .toolbar #zoneTabs.pcm-pon > .pcm-was,
html body.pc2 #appView #orderGroupChips.pcm-pon > .pcm-was,
html body.pc2 #appView #mkCashPills.pcm-pon > .pcm-was,
html body.pc2 #appView #pcsStaffPills.pcm-pon > .pcm-was,
html body.pc2 #modalHost .paymentModalMethodRow.pcm-pon > .pcm-was{background:transparent !important;background-image:none !important;border-color:transparent !important;box-shadow:none !important}
/* 4/10 (chuyen canh iOS): hop Tach ban/Tach mon -> pcMotion chay sheet, bo keyframe cu */
html.pcm-on body.pc2 [data-split-workflow-portal] :is(.modalMask,.modal){animation:none !important}

/* 4/10 (chuyen canh iOS): may bat "giam hieu ung" van chay truot doi man pc2-enter (truoc bi tat) — tru luc dock dang hut (pc2-gx / pc2dk-anim) */
@media (prefers-reduced-motion:reduce){
  html body.pc2.pc2-enter:not(.pc2-gx) #appView > .section:not(.hidden):not(#globalMsg):not(.pc2dk-anim),
  html body.pc2.pc2-enter:not(.pc2-gx) #pc2Home:not(.pc2dk-anim),
  html body.pc2.pc2-enter:not(.pc2-gx) #pc2Frame:not(.pc2dk-anim),
  html body.pc2.pc2-enter:not(.pc2-gx) #pc2PaneHd:not(.pc2dk-anim){animation:pc2in .3s cubic-bezier(.2,.8,.2,1) !important}
}

/* 4/10 (chuyen canh iOS): Nhan vien > Sua = ngan keo tu mep phai: cham lai 520ms + bong mem ben trai (de luat cu .24s, ke ca khi may bat giam hieu ung) */
html body.pc2 #appView #sec-staff .card[data-pcs-drawer]{transition:transform .52s cubic-bezier(.32,.72,0,1),visibility 0s linear .52s !important;box-shadow:-14px 0 36px rgba(0,0,0,.14) !important}
html body.pc2 #appView #sec-staff.pcs-dr-open .card[data-pcs-drawer]{transition:transform .52s cubic-bezier(.32,.72,0,1),visibility 0s !important}
html body.pc2 #sec-staff #pcsStaffBackdrop{transition:opacity .52s ease,visibility 0s linear .52s !important}
html body.pc2 #sec-staff.pcs-dr-open #pcsStaffBackdrop{transition:opacity .52s ease,visibility 0s !important}