/* r22zoom · Anh Long t126: xem được ở zoom 100% · không scale toàn trang - Không transform/scale/zoom toàn cục; giữ pinch-zoom (viewport không maximum-scale) - Chặn tràn ngang cấp trang; bảng rộng chỉ cuộn trong khung - iPhone: input/select/textarea ≥16px (tránh Safari tự zoom khi focus) - Safe-area; mobile full width; nút/chữ đọc được */ html{width:100%;max-width:100%;overflow-x:clip} body{width:100%;max-width:100%;overflow-x:clip;min-height:100dvh;min-height:100vh} #app{width:100%;max-width:100%;overflow-x:clip;overflow-y:visible;box-sizing:border-box} #app.D .dmain{max-width:100%;min-width:0;overflow-x:clip;padding-right:max(16px,env(safe-area-inset-right));padding-left:0} #app.D .dnav{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;scrollbar-width:thin} /* Mobile: full width (bỏ khung 560px “thiết kế” khiến cảm giác bị thu/zoom) */ #app.M{max-width:100%!important;width:100%!important;margin:0!important; padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right); padding-bottom:calc(96px + env(safe-area-inset-bottom))} #app.M .mscr{width:100%;max-width:100%;min-width:0;overflow-x:clip} #app.M .mbar,#app.M .hd,#app.M .gtabs{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))} #app.M .sheet{left:0;right:0;width:100%!important;max-width:100%!important;margin:0!important; padding-bottom:max(18px,env(safe-area-inset-bottom));box-sizing:border-box} #app.M .tb{width:min(370px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); bottom:calc(12px + env(safe-area-inset-bottom))} #app.M .modal{width:min(520px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;box-sizing:border-box} /* iOS Safari: không tự zoom khi focus ô nhập */ @media (max-width:1099.98px){ #app input.inp,#app select.inp,#app textarea.inp,#app textarea, #app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]), #app select{font-size:16px!important;line-height:1.25} #app .btn{font-size:15px;white-space:normal;line-height:1.25;height:auto;min-height:48px;padding:12px 14px;text-align:center} #app .btn.gl2,#app .btn.pri{word-break:break-word} #app .dh .t{font-size:clamp(20px,6vw,26px)} #app .oanav>div,#app .gtabs .oanav>div{white-space:nowrap} } /* Bảng: không ép nowrap toàn trang → chỉ cuộn ngang trong khung */ #app .tblscroll,#app .bkscroll,#app .ptn-scroll{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} #app.D .tbl th{white-space:nowrap} #app.D .tbl td{white-space:normal} #app.D .tbl td .nw,#app.D .tbl .mono{white-space:nowrap} #app.D .tbl.bkhn{min-width:min(720px,100%)} /* Phòng trong ngày: xếp chồng khi hẹp thay vì ép 360px cạnh */ #app.D .ptn-split{display:flex;gap:14px;align-items:flex-start;min-width:0} #app.D .ptn-main{flex:1 1 0;min-width:0} #app.D .ptn-side{flex:0 1 360px;min-width:0;max-width:100%} @media (max-width:1280px){ #app.D .ptn-split{flex-direction:column} #app.D .ptn-side{flex:1 1 auto;width:100%;max-width:100%} } /* Quỹ HV 2 cột: cho phép cuộn ngang cục bộ, không kéo rộng trang */ #app .ql-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} #app.M .ql-table-wrap .tbl{min-width:0} /* Chặn mọi scale “preview frame” còn sót */ #app,#app.D,#app.M,.mscr,.dmain{transform:none!important;zoom:normal!important} /* t416c: reserve space for the TEST role badge; wrap tabs; keep cards inside the viewport */ /* t461: TEST chip lives in the header — do not reserve a floating overlay gutter */ html.has-test-picker #app.M .gtabs, html.has-test-picker #app.M .mscr>.chipbar{padding-right:max(14px, env(safe-area-inset-right))} html.has-test-picker #app.D .dmain{padding-right:max(16px, env(safe-area-inset-right))} html.has-test-picker #app.D .dh,html.has-test-picker #app.D .gtabs{padding-right:0} #app.M .gtabs .oanav,#app.D .gtabs .oanav{flex-wrap:nowrap;row-gap:0;overflow-x:auto;max-width:100%} #app .chipbar{max-width:100%;box-sizing:border-box} #app .gl,#app .gl2{max-width:100%;min-width:0} #tq-test-picker{max-width:calc(100vw - 24px)} /* t416d: Quỹ HV·TA / group sub-tabs wrap without a visible horizontal scrollbar */ #app .gtabs{overflow-x:visible;scrollbar-width:none} #app .gtabs .oanav,#app .oanav.gtab{flex-wrap:nowrap;row-gap:0;overflow-x:auto;scrollbar-width:none;max-width:100%} #app .chipbar,#app .oanav{scrollbar-width:none} #app .gtabs::-webkit-scrollbar,#app .oanav::-webkit-scrollbar,#app .chipbar::-webkit-scrollbar{display:none;height:0;width:0} /* t442u: iPhone ~390px Phòng area — one-line scroll tabs, compact header, no overflow */ :root{--mnav-h:68px;--mnav-gap:12px;--mnav-space:calc(var(--mnav-h) + var(--mnav-gap) + 16px + env(safe-area-inset-bottom, 0px))} #app.M{padding-bottom:var(--mnav-space)!important} #app.M .mscr{padding-bottom:0} #app.M .mscr-pad{height:var(--mnav-space);flex:none;width:100%;pointer-events:none} /* t459/t460: single-row glass segmented tab bar — never wrap; scroll + snap + fade */ #app.M .gtabs{overflow:hidden;max-width:100%;margin:0 0 8px;position:relative} #app.M .gtabs .oanav, #app.M .oanav.gtab{ display:flex;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden; max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none; --fade-start:0px;--fade-end:0px; scroll-snap-type:x proximity;scroll-padding-inline:10px;gap:2px;padding:3px;margin:0;border-radius:99px; background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(12,122,135,.10); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent 100%) } html.dk #app.M .gtabs .oanav,html.dk #app.M .oanav.gtab{ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.3) } #app.M .gtabs .oanav>div,#app.M .oanav.gtab>div,#app.M .gtabs .oanav>div span{ flex:none;white-space:nowrap;height:36px;line-height:36px;padding:0 10px;scroll-snap-align:start;border-radius:99px; font-size:14px;font-weight:600;letter-spacing:-.15px;box-sizing:border-box } #app.M .gtabs .oanav>div span{padding:0;height:auto;line-height:inherit} #app.D .gtabs .oanav,#app.D .oanav.gtab{ display:flex;flex-wrap:nowrap;overflow-x:visible;scrollbar-width:none;gap:2px;padding:3px;margin:0 0 10px;border-radius:99px; background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(12,122,135,.10); -webkit-mask-image:none;mask-image:none } html.dk #app.D .gtabs .oanav,html.dk #app.D .oanav.gtab{ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.3) } #app.D .gtabs .oanav>div,#app.D .oanav.gtab>div,#app.D .gtabs .oanav>div span{ flex:none;white-space:nowrap;height:40px;padding:0 16px;border-radius:99px; font-size:15px;font-weight:600;letter-spacing:-.15px;display:inline-flex;align-items:center } #app.D .gtabs .oanav>div span{padding:0;height:auto} #app.D .tp-slot{display:inline-block;flex:none;width:4.8em;height:28px} #app.D .dh{position:relative} /* t443u + t461: one header row — title left, icons right; drop the Phòng & quỹ eyebrow */ #app.M .mbar{display:flex;flex-wrap:nowrap!important;align-items:center;gap:8px;padding:8px 14px 4px;min-height:44px} #app.M .mbar .tqbk{flex:none;white-space:nowrap} #app.M .mbar .thm{flex:none;margin-left:0} #app.M .mbar>div:nth-child(2),#app.M .mbar .mbar-title{flex:1 1 auto;order:0;min-width:0} #app.M .mbar>div:nth-child(2)>.cs{display:none}#app.M .mbar .mbar-title>.cs{display:none} #app.M .mbar>div:nth-child(2)>div:last-child,#app.M .mbar .mbar-h{font-size:20px!important;font-weight:800;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25} #app.M .mscr:has(.gtabs) .mbar>.tqbk{display:none} #app.M .mscr:has(.gtabs) .tqfb,#app.D .dmain:has(.gtabs)>.tqfb{display:none!important} #app.D .dmain:has(.gtabs) .dh>.tqbk{display:none!important} #app.M .mscr:has(.gtabs) .mbar.ck-head>.tqbk, #app.D .dmain:has(.gtabs) .dh.ck-head>.tqbk{display:inline-flex!important;align-items:center} #app.M .hd-actions{display:flex;align-items:center;gap:6px;flex:none;margin-top:0!important;margin-left:auto;position:relative} #app.M .tp-slot{display:inline-block;flex:none;width:4.8em;height:28px} #app.M .hd{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:8px 14px 4px} #app.M .hd>div:first-child{flex:1;min-width:0} #app.M .hd .hd-actions{margin-top:0!important} /* Hide the floating role chip on mobile — role is already in the TEST picker */ @media (max-width:1099px){#tqrole{display:none!important}} /* Inventory summary: two tidy lines on a narrow screen */ #app.M [data-inventory-line]{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;line-height:1.4} #app.M [data-inventory-line] .inv-phys,#app.M [data-inventory-line] .inv-split{display:block;white-space:nowrap} /* Date row: input and Hôm nay do not overlap */ #app.M .sl-datebar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center;margin-bottom:12px} #app.M .sl-datebar>label{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap} #app.M .sl-datebar input[type=date]{min-width:0;width:100%;max-width:100%;flex:1;min-height:40px;box-sizing:border-box} #app.M .sl-datebar .sl-today{height:40px;min-height:40px;padding:0 12px;font-size:13px;font-weight:700;white-space:nowrap;flex:none} #app.M .sl-datebar .sl-tz{grid-column:1 / -1;white-space:nowrap} /* Sold table short two-line headers */ #app .tbl.sold-cls th,#app .tbl.sold-today th{white-space:normal;line-height:1.2;vertical-align:bottom} #app .tbl.sold-cls th .subh,#app .tbl.sold-today th .subh{display:block;font-weight:600;font-size:10px;letter-spacing:0;opacity:.8;text-transform:none} #app.M .tbl.sold-cls,#app.M .tbl.sold-today{table-layout:fixed;width:100%;font-size:12.5px} #app.M .tbl.sold-cls th,#app.M .tbl.sold-cls td,#app.M .tbl.sold-today th,#app.M .tbl.sold-today td{padding:8px 6px;word-break:normal;overflow-wrap:anywhere} /* Sơ đồ phòng: keep value visible, don't clip the right column */ #app.M .kv.kv-list>div{flex-wrap:nowrap!important;min-width:0;max-width:100%;box-sizing:border-box} #app.M .kv.kv-list>div span{flex:1 1 auto!important;min-width:0!important;max-width:none!important;flex-basis:auto!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #app.M .kv.kv-list>div b{flex:0 0 auto!important;text-align:right!important} /* Quỹ phòng stepper + Lưu row on a 360-390px screen */ #app.M .tbl.quy-ta .quy-step-cell,#app.M .tbl.quy-hv .quy-step-cell{flex-wrap:nowrap;max-width:100%} #app.M [data-quy-savebar]{gap:8px} #app.M [data-quy-savebar] .btn{flex:1 1 auto;min-width:0} /* No page-level horizontal overflow */ #app.M .box,#app.M .card,#app.M table{max-width:100%} /* t448–t452: TravelQ-only inventory hero + sold rows; no hotel-wide 70 on staff stats */ #app .inv-hero{padding:14px 16px;border-radius:18px;margin:0 0 12px} #app .inv-hero b{display:block;font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.4px;line-height:1.15;margin:4px 0} #app .inv-hero .inv-split{display:block;margin-top:2px} #app .sold-src.oanav{margin:8px 0 4px} #app .sold-row{display:flex;flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap!important;min-width:0;max-width:100%;padding:8px 0;box-sizing:border-box} #app .sold-row .sold-who{font-weight:700;white-space:nowrap;overflow:visible;text-overflow:clip;word-break:normal;overflow-wrap:normal} #app .sold-row .sold-sub{display:flex;align-items:baseline;gap:10px;flex-wrap:nowrap;min-width:0} #app .sold-row .sold-code{font-variant-numeric:tabular-nums;white-space:nowrap} #app .sold-row .sold-meta{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums} #app.M .inv-hero b{font-size:26px} #app.M .tbl th,#app.M .tbl td{font-size:13px} #app.M .cs{font-size:13px} /* t453: Nhận phòng guest-list card — stacked TQID, clean companion add, nav clearance */ #app .ckr.ckr-stack{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:12px;flex-wrap:nowrap!important} #app .ckr-tqid{display:block;width:100%;max-width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;letter-spacing:.02em;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;word-break:normal!important;overflow-wrap:normal!important;line-height:1.35} #app .ckr-lookup{display:flex;gap:8px;align-items:center;width:100%;flex-wrap:nowrap} #app .ckr-lookup .inp{flex:1 1 auto;min-width:0!important;width:auto!important} #app .ckr-lookup .btn,#app .ckr-lookup button{flex:0 0 auto;white-space:nowrap;height:40px;padding:0 14px} #app .ck-comp{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid rgba(30,42,48,.1)} html.dk #app .ck-comp{border-top-color:rgba(255,255,255,.1)} #app .ck-comp .lab{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700} #app .ck-comp .ck-rm{flex:none;height:36px;padding:0 12px;white-space:nowrap} #app .ck-add-box{margin-top:14px;padding:14px;border-radius:16px;background:rgba(30,42,48,.04)} html.dk #app .ck-add-box{background:rgba(255,255,255,.04)} #app .ck-add-title{font-weight:800;margin-bottom:10px} #app .ck-add-tq{width:100%;display:block;box-sizing:border-box;margin-bottom:10px} #app .ck-add-row{display:flex;gap:8px;align-items:center;flex-wrap:nowrap} #app .ck-seg{display:flex;flex:1;min-width:0;gap:6px} #app .ck-seg .btn{flex:1;min-width:0;height:40px;padding:0 10px;white-space:nowrap;font-size:13.5px} #app .ck-add-age{flex:0 0 72px;width:72px;min-width:72px;height:40px;box-sizing:border-box} #app .ck-add-later{display:block;width:100%;margin-top:10px;height:40px;white-space:nowrap} #app .ck-add-note{margin-top:8px} #app.M #cklive,#app.M .scanpg,#app.M .ck-page,#app.M .ck-detail{padding-bottom:128px;box-sizing:border-box} #app.M [data-ck="commit"]{margin-bottom:8px} html.has-test-picker #app.M #cklive, html.has-test-picker #app.M .scanpg{padding-top:6px} html.has-test-picker #app.M #cklive h3, html.has-test-picker #app.M #cklive .tqbk, html.has-test-picker #app.M #cklive h4{padding-right:0;box-sizing:border-box;max-width:100%} html.has-test-picker #app.M #cklive h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* t454: Hôm nay ends after TravelQ stats — keep last card clear of the tab bar */ #app.M .homnay-pg{padding-bottom:12px} /* t455: one-line Thống kê header (title + icons), compact Hôm nay, 2-line sold rows */ #app.M .hd{flex-wrap:nowrap;align-items:center;gap:8px;padding-top:4px;padding-bottom:6px} #app.M .hd .sub{display:none} #app.M .hd h1{white-space:nowrap;font-size:20px;line-height:1.2;overflow:visible} #app.M .hd>div:last-child{margin-top:0!important;flex:none} #app.M .homnay-pg .mbar{flex-wrap:nowrap;padding:2px 0 4px;min-height:0;gap:8px} #app.M .homnay-pg .mbar>div:nth-child(2){flex:1 1 auto;order:0;min-width:0} #app.M .homnay-pg .mbar>div:nth-child(2)>div:last-child{font-size:18px!important} #app.M .homnay-pg .sl-datebar{margin-bottom:8px;gap:6px 8px} #app.M .homnay-pg .sl-datebar .sl-tz{display:none} #app.M .homnay-pg .sl-datebar input[type=date], #app.M .homnay-pg .sl-datebar .sl-today{min-height:36px;height:36px} #app.M .homnay-pg .inv-hero{padding:10px 14px;margin:0 0 8px} #app.M .homnay-pg .inv-hero b{font-size:22px;margin:2px 0} #app.M .homnay-pg [data-sold-today]{font-size:22px} #app.M .homnay-pg .tbl.sold-today{margin-top:4px;font-size:12px} #app.M .homnay-pg .tbl.sold-today th, #app.M .homnay-pg .tbl.sold-today td{padding:5px 4px} #app.M .homnay-pg .gl{margin-top:8px} /* t456–t457: Tình trạng phòng sub-tabs without counts; cards stay one-line; no clipped labels */ #app.M .chipbar.bkchips{display:flex;flex-wrap:nowrap;overflow:visible;gap:6px;padding:0 0 10px;max-width:100%} #app.M .chipbar.bkchips>div{flex:1 1 0;min-width:0;white-space:nowrap;overflow:visible;text-overflow:clip;justify-content:center;font-size:13px;height:36px;padding:0 8px} #app.M .bk-card .bk-top{display:flex;gap:10px;align-items:flex-start} #app.M .bk-card .bk-main{flex:1;min-width:0} #app.M .bk-card .bk-who{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app.M .bk-card .bk-code{white-space:nowrap} #app.M .bk-card .bk-stay{white-space:nowrap;overflow:hidden;text-overflow:clip;font-variant-numeric:tabular-nums;font-size:12.5px} #app.M .bk-card .bk-room{white-space:nowrap} #app.M .bk-card .bk-badges{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex:none} #app.M .bk-card .bk-flags{display:flex;gap:6px;margin-top:8px;flex-wrap:nowrap;align-items:center} /* Titles, tabs and key labels stay on one line at 360/390 */ #app.M .hd h1,#app.M .dh .t, #app.M .mbar>div:nth-child(2)>div:last-child, #app.M .gtabs .oanav>div,#app.M .oanav.gtab>div, #app.M .chipbar>div{white-space:nowrap} /* t457: longer tab/title Tình trạng phòng stays one line */ #app.M .gtabs .oanav>div,#app.M .hd h1{white-space:nowrap} /* t459/t460: Tình trạng phòng 50/50 sub-tabs, smaller segmented glass */ #app.M .chipbar.bkchips{ display:flex;flex-wrap:nowrap;overflow:visible;gap:2px;padding:3px;margin:0 14px 10px;max-width:calc(100% - 28px); border-radius:99px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px rgba(12,122,135,.08) } html.dk #app.M .chipbar.bkchips{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} #app.M .chipbar.bkchips>div{flex:1 1 0;min-width:0;white-space:nowrap;overflow:visible;text-overflow:clip;justify-content:center;font-size:13px;height:32px;padding:0 8px;border-radius:99px} html.has-test-picker #app.M .gtabs, html.has-test-picker #app.M .mscr>.chipbar.bkchips{padding-right:max(14px,env(safe-area-inset-right))} /* t460: Chi tiết sub-tabs — short labels, scroll/snap, refresh outside the row */ #app .stays-nav{display:flex;align-items:center;gap:8px;margin:0 0 10px;min-width:0} #app .stays-subnav{ flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:10px; gap:2px;padding:3px;margin:0;border-radius:99px; background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); --fade-start:0px;--fade-end:0px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent 100%) } html.dk #app .stays-subnav{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)} #app .stays-subnav a,#app .stays-subnav>a{flex:none;white-space:nowrap;height:32px;line-height:32px;padding:0 10px;scroll-snap-align:start;border-radius:99px} #app .stays-ref{flex:none;height:32px;min-height:32px;padding:0 10px;white-space:nowrap;font-size:13px} #app .stay-flag{white-space:nowrap} #app .stays-filter{display:flex;flex-wrap:nowrap;gap:2px;padding:3px;border-radius:99px} #app.M [data-stays-live] h3{white-space:nowrap;font-size:15px} /* t461: compact TEST pill sits in the header icon group, not over content */ #tq-test-picker{ box-sizing:border-box;color:#fff;background:#3a1010;border:1.5px solid #ff6b6b; font:700 11px/1 var(--font,system-ui,sans-serif);z-index:40 } #tq-test-picker:not(.in-header){ position:fixed;right:max(12px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top)); z-index:99999;border-radius:99px;padding:0 } #tq-test-picker:not(.in-header).open{border-radius:12px;padding:8px 10px;max-width:min(92vw,340px)} #tq-test-picker.in-header{ position:fixed;padding:0;border-radius:99px;box-shadow:none;max-width:none;z-index:30 } #tq-test-picker.in-header .tp-pill{ height:28px;padding:0 9px;background:none;border:0;color:#fff;cursor:pointer; font:700 11px/28px inherit;letter-spacing:.02em;white-space:nowrap } #tq-test-picker.in-header.open{ border-radius:14px;padding:10px;min-width:200px;max-width:min(92vw,280px); box-shadow:0 10px 28px rgba(0,0,0,.35) } #tq-test-picker .tp-pill{background:none;border:0;color:#fff;cursor:pointer;font:inherit;padding:0 8px;height:28px} /* t461: tab track full width under the header; sub-tabs a smaller segmented row */ #app.M .gtabs{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))} #app .gtabs .chipbar.oanav{padding:3px;margin:0} #app.M .chipbar.bkchips>div{font-size:13px;font-weight:600;height:32px} #app .stays-subnav a{font-size:13px;font-weight:600} #app.M .mscr>* >.gtabs,#app.M .homnay-pg>.gtabs{padding-left:0;padding-right:0} /* t462/t465: compact booking check-in + sticky dock above the tab bar */ #app .ck-head{display:flex;align-items:center;gap:8px;padding:8px 14px;min-height:44px} #app.M .mbar.ck-head .ck-back, #app.D .dh.ck-head .ck-back{ flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-weight:700;font-size:16px;line-height:1.25;color:inherit;cursor:pointer; background:none!important;border:0!important;box-shadow:none!important; padding:0!important;height:auto!important;min-height:0!important } #app.M .mbar.ck-head .hd-actions{flex:none;margin-left:auto} #app.M .mbar.ck-head>div:nth-child(2)>div:last-child{font-size:inherit!important;font-weight:inherit} #app.M .ck-page{padding:0 16px} #app .ck-sum,#app .ck-guests{padding:16px;margin:0 0 12px;border-radius:18px} #app .ck-sum-top{display:flex;align-items:center;gap:8px;min-width:0} #app .ck-sum-code{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px} #app .ck-sum-who,#app .ck-sum-room,#app .ck-sum-stay{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:8px} #app .ck-sum-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} #app .ckr{margin-top:10px} #app .ckr-main{display:flex;align-items:center;gap:8px;min-height:44px} #app .ckr-tqid{flex:1;min-width:0;width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700} #app .ckr-st{flex:none;white-space:nowrap} #app .ck-scan{display:flex;gap:8px;margin:0 0 12px} #app .ck-scan .inp{flex:1;min-width:0} #app .ck-add-toggle{width:100%;margin-top:12px} #app .ck-legal{display:block;margin-top:10px} #app.M .ck-dock{ position:fixed;left:0;right:0;z-index:30;padding:12px 16px; bottom:calc(var(--mnav-h) + var(--mnav-gap) + env(safe-area-inset-bottom,0px)); background:rgba(238,242,245,.92);border-top:1px solid rgba(255,255,255,.55); box-shadow:0 -8px 24px rgba(12,122,135,.08); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px) } html.dk #app.M .ck-dock{background:rgba(8,11,13,.9);border-top-color:rgba(255,255,255,.1);box-shadow:0 -8px 24px rgba(0,0,0,.35)} #app.M .ck-dock .btn.pri{width:100%;margin:0} #app.M .ck-dock-status{margin:0 0 8px;text-align:center} #app.D .ck-dock{position:static;margin:16px 0 0;padding:0;background:none;border:0;box-shadow:none} #app.D .ck-dock .btn.pri{width:auto;min-width:220px} /* t465: Hôm nay · Tình trạng · Quỹ phòng · Gán phòng must fit at 390 with no fade */ #app.M .gtabs{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))} #app.M .gtabs .oanav>div,#app.M .oanav.gtab>div{padding:0 6px} #app .ck-sum-top .bd{flex:none;white-space:nowrap} #app .ck-sum-ci{margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700} /* t463: readable Đã nhận phòng pill + muted pending companion line */ #app .ck-sum-top .bd.stay{background:#0C7A87;color:#fff;border-color:#0A6873} html.dk #app .ck-sum-top .bd.stay{background:#0A6873;color:#fff;border-color:#08535C} #app .ck-pending{margin-top:10px;font-weight:500;font-size:13px;color:rgba(30,42,48,.62)} html.dk #app .ck-pending{color:rgba(255,255,255,.58)}