/* cf-dt-office.css v1 (21/10/2026, Tool Office 11.2) — KHUNG ĐIỆN THOẠI (màn ≤ 820px).
   Đầu trang gọn 48px · menu chính xuống ĐÁY (6 mục) · dải nút Văn bản / Bảng tính / Trình chiếu CUỘN NGANG, nút cao 48px dễ chạm ·
   hộp thoại + Kho công ty TOÀN MÀN HÌNH · không tràn ngang · thanh cuộn ẩn (quy ước chung, đã có ở cf-a8-office.css).
   Chỉ đổi cách xếp trên màn hẹp, KHÔNG đổi chức năng nút, KHÔNG đụng máy tính (mọi dòng nằm trong @media ≤ 820px).
   Tiền tố ":root:root:root body.cfu-page" để thắng các luật "html body.cfu-page …" của cf-a8-office.css. */
@media screen and (max-width:820px){
:root{--dt-nav:62px;--dt-an:env(safe-area-inset-bottom,0px)}
html,body{overflow-x:hidden!important;max-width:100vw;-webkit-text-size-adjust:100%;overscroll-behavior:none}
:root:root:root body.cfu-page .cfu{height:100vh;height:100dvh;padding-bottom:calc(var(--dt-nav) + var(--dt-an));box-sizing:border-box;max-width:100vw}
:root:root:root body.cfu-page .cfu-main,:root:root:root body.cfu-page #cfu-main{padding:0!important;min-width:0;max-width:100vw}

/* ── 1. ĐẦU TRANG GỌN: ‹ Cổng Tool · Office · tên người dùng ── */
:root:root:root body.cfu-page #cfu-top{height:48px!important;padding:0 12px!important;gap:10px!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#FBFBFD!important}   /* bỏ backdrop-filter: nếu không, menu đáy (fixed) bị giam trong thanh trên */
:root:root:root body.cfu-page #cfu-top .cfu-back{font-size:14px!important;padding-right:10px!important;height:22px}
:root:root:root body.cfu-page #cfu-top .cfu-ht{flex:1 1 auto;min-width:0}
:root:root:root body.cfu-page #cfu-top .cfu-ht .cfu-ic{flex:0 0 auto!important}
:root:root:root body.cfu-page #cfu-top .cfu-back{flex:0 0 auto}
:root:root:root body.cfu-page #cfu-top .cfu-ht h1{font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root:root:root body.cfu-page #cfu-top .cfu-hu{flex:0 1 auto;min-width:0;max-width:42vw}
:root:root:root body.cfu-page #cfu-top .cfu-hu small{display:none!important}
:root:root:root body.cfu-page #cfu-top .cfu-hu span:not(.cfu-lg){display:block!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px!important;color:#3A3A3C!important}

/* ── 2. MENU CHÍNH DƯỚI ĐÁY ── */
:root:root:root body.cfu-page #cfu-top .cfu-tiles{position:fixed!important;left:0;right:0;bottom:0;z-index:950;margin:0!important;box-sizing:border-box;
  height:calc(var(--dt-nav) + var(--dt-an));padding:5px 4px calc(5px + var(--dt-an))!important;display:grid!important;grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;gap:2px!important;
  border-radius:0!important;background:rgba(251,251,253,.97)!important;border-top:1px solid rgba(0,0,0,.09)!important;box-shadow:0 -6px 18px rgba(0,0,0,.05)!important}
:root:root:root body.cfu-page #cfu-top .cfu-tile{display:flex!important;flex-direction:column;align-items:center;justify-content:center;height:auto!important;min-width:0;
  padding:4px 2px!important;gap:3px!important;border-radius:12px!important;font-size:10.5px!important;line-height:1.1!important;font-weight:500!important;color:#55565B!important}
:root:root:root body.cfu-page #cfu-top .cfu-tile>span:not(.cfu-ic){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:root:root body.cfu-page #cfu-top .cfu-tile .cfu-ic.l{width:22px!important;height:22px!important}
:root:root:root body.cfu-page #cfu-top .cfu-tile .cfu-ic.l svg{width:21px!important;height:21px!important}
:root:root:root body.cfu-page #cfu-top .cfu-tile.on{background:rgba(15,122,59,.10)!important;color:#0F7A3B!important;box-shadow:none!important;font-weight:700!important}
.toast{bottom:calc(var(--dt-nav) + var(--dt-an) + 12px)!important;max-width:calc(100vw - 24px);left:50%!important;right:auto!important;transform:translateX(-50%)!important}

/* ── 3. ĐẦU MỖI MÀN (Trang chủ, Đã lưu…): tiêu đề + ô tìm + nút trên 2 hàng ── */
:root:root:root body.cfu-page:not(.edit-full) .topbar{padding:10px 14px 4px!important;flex-wrap:wrap!important;gap:8px!important;max-width:100vw}
:root:root:root body.cfu-page:not(.edit-full) .topbar .tb-left{flex:1 1 100%;min-width:0}
:root:root:root body.cfu-page:not(.edit-full) .topbar h1{font-size:21px!important}
:root:root:root body.cfu-page:not(.edit-full) .topbar .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root:root:root body.cfu-page:not(.edit-full) .topbar .tb-right{flex:1 1 100%;display:flex!important;align-items:center;gap:8px!important;min-width:0;flex-wrap:nowrap!important}
:root:root:root body.cfu-page .topbar .gsearch{flex:1 1 auto!important;width:auto!important;min-width:0!important;height:42px!important;display:flex!important}
:root:root:root body.cfu-page .topbar .gsearch input{min-width:0;width:100%}
:root:root:root body.cfu-page .topbar #pageActions{flex:0 0 auto;flex-wrap:nowrap!important;gap:6px}
:root:root:root body.cfu-page .topbar .btn{min-height:42px!important}
:root:root:root body.cfu-page #cfCmdTop,:root:root:root body.cfu-page .topbar .cfcmd{display:none!important}
:root:root:root body.cfu-page:not(.edit-full) .content{padding:8px 14px 16px!important;max-width:100vw}
:root:root:root body.cfu-page #ohHome{padding:0!important}
:root:root:root body.cfu-page .list-item{flex-wrap:wrap}
:root:root:root body.cfu-page .content .row{flex-wrap:wrap}
:root:root:root body.cfu-page .content table:not(.ss){max-width:100%}

/* ── 4. TRÌNH SOẠN: dải thẻ + dải nút cuộn ngang, nút lớn dễ chạm ── */
:root:root:root body.cfu-page.edit-full .content{padding:0!important}
:root:root:root body.cfu-page.edit-full .ws{gap:0!important;max-width:100vw}
:root:root:root body.cfu-page.edit-full .ribbon{border-radius:0!important;box-shadow:0 1px 0 rgba(0,0,0,.07)!important;max-width:100vw}
:root:root:root body.cfu-page.edit-full .rbtabs{height:46px!important;padding:0 6px!important;gap:6px!important;flex-wrap:nowrap!important;overflow:hidden}
:root:root:root body.cfu-page.edit-full .rbtabs .cfpills{flex:1 1 auto!important;min-width:0;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x proximity}
:root:root:root body.cfu-page.edit-full .rbtabs .cfpills .rbtab{flex:0 0 auto;padding:9px 14px!important;font-size:13.5px!important;white-space:nowrap;scroll-snap-align:start}
:root:root:root body.cfu-page.edit-full .rbtabs .cfcmd{width:38px;min-width:38px;height:38px;padding:0!important;justify-content:center;font-size:0!important;flex:0 0 auto}
:root:root:root body.cfu-page.edit-full .rbtabs .cfcmd kbd,:root:root:root body.cfu-page.edit-full .rbtabs .cfcmd span{display:none!important}
:root:root:root body.cfu-page.edit-full .rbtabs .cfcmd svg{width:18px;height:18px}
:root:root:root body.cfu-page.edit-full #rbPin{display:none!important}
:root:root:root body.cfu-page.edit-full .rbstrip.active{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;align-items:stretch!important;
  padding:4px 4px!important;gap:0!important;row-gap:0!important;max-height:none!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}   /* mép phải mờ dần = còn nút, vuốt ngang để xem */
:root:root:root body.cfu-page.edit-full .rbstrip.active .rbgroup{flex:0 0 auto!important;display:flex!important;align-items:center;padding:0 6px!important;max-width:none!important}
:root:root:root body.cfu-page.edit-full .rbstrip.active .rbgroup .rbg-body.rbg-body{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:2px!important;
  grid-template-rows:none!important;max-width:none!important;width:auto!important}
:root:root:root body.cfu-page.edit-full .rbstrip.active .rbg-body .flexbreak{display:none!important}
:root:root:root body.cfu-page.edit-full .rbstrip.active .rbbtn.rbbtn{flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:3px!important;
  height:50px!important;min-width:54px!important;max-width:96px!important;padding:3px 6px!important;font-size:10.5px!important;line-height:1.1!important;white-space:nowrap!important;text-align:center!important;border-radius:10px!important}
:root:root:root body.cfu-page.edit-full .rbstrip.active .rbbtn svg{width:19px!important;height:19px!important;flex:0 0 auto}
:root:root:root body.cfu-page.edit-full .rbstrip.active .rbbtn span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
:root:root:root body.cfu-page.edit-full .ribbon select{height:38px!important;font-size:13.5px!important;padding:0 6px!important;flex:0 0 auto;max-width:150px}
:root:root:root body.cfu-page.edit-full .ribbon .tbar{flex-wrap:nowrap!important;border:0!important;background:none!important;padding:0!important;gap:2px!important}
:root:root:root body.cfu-page.edit-full .ribbon .tbar button{min-width:40px!important;height:40px!important;font-size:15px!important;border-radius:9px!important;flex:0 0 auto}
:root:root:root body.cfu-page.edit-full .ribbon .tbar .sep{margin:6px 3px!important}
:root:root:root body.cfu-page.edit-full .ribbon input[type=color]{width:34px!important;height:34px!important}
:root:root:root body.cfu-page.edit-full .ribbon .rbcolor,:root:root:root body.cfu-page.edit-full .ribbon label.clr{flex:0 0 auto}
:root:root:root body.cfu-page.edit-full .workmain{min-width:0;max-width:100vw}
:root:root:root body.cfu-page.edit-full .workmain>.wtop{padding:4px 6px!important}
:root:root:root body.cfu-page.edit-full .fbar{padding:4px 6px!important;gap:6px!important}
:root:root:root body.cfu-page.edit-full .fbar .fx{display:none}
:root:root:root body.cfu-page.edit-full .fbar input{height:36px;font-size:15px!important}
:root:root:root body.cfu-page.edit-full .statusbar{flex-wrap:nowrap!important;overflow-x:auto!important;gap:10px!important;padding:4px 8px!important;font-size:11.5px!important;white-space:nowrap;min-height:40px;align-items:center}
:root:root:root body.cfu-page.edit-full .statusbar button{min-width:34px!important;min-height:32px!important;font-size:14px!important}
:root:root:root body.cfu-page.edit-full .statusbar>*{flex-shrink:0!important}
:root:root:root body.cfu-page.edit-full .statusbar .zoombar>span:first-child{display:none}
body.cfu-page:not(:has(table.ss)) #fillHandle{display:none!important}
:root:root:root body.cfu-page.edit-full .doc-scroll{padding:8px!important}
/* trình chiếu: dải slide xuống dưới thành 1 hàng cuộn ngang, sân khấu chiếm cả bề ngang */
:root:root:root body.cfu-page.edit-full .deck-main{flex-direction:column!important;min-width:0}
:root:root:root body.cfu-page.edit-full .slide-rail{width:auto!important;height:80px;flex:0 0 auto;display:flex!important;gap:8px;overflow-x:auto!important;overflow-y:hidden!important;
  border-right:0!important;border-bottom:1px solid var(--line);padding:7px!important;align-items:stretch;order:2}
:root:root:root body.cfu-page.edit-full .slide-rail .addslide{width:auto!important;flex:0 0 auto;margin:0!important;white-space:nowrap;padding:0 12px!important}
:root:root:root body.cfu-page.edit-full .slide-rail .sthumb{flex:0 0 116px;width:116px;margin:0!important}
:root:root:root body.cfu-page.edit-full .deck-stage{padding:10px!important;min-height:240px;order:1}
:root:root:root body.cfu-page.edit-full #dNotes{height:42px!important;min-height:0!important}
:root:root:root body.cfu-page.edit-full #dStat~span:not([id]):not(.zoombar){display:none!important}
.deck-present .pnav{bottom:calc(16px + var(--dt-an))!important}
.deck-present .pnav button{width:44px!important;height:44px!important}

/* ── 5. HỘP THOẠI + KHO CÔNG TY: TOÀN MÀN HÌNH ── */
.uiov,.dt-ov,#khoMan,#khoChon,#cfPal{padding:0!important;align-items:stretch!important;justify-content:stretch!important}
.uiov>.uibox,.dt-ov>*,#khoMan>.kh,#khoChon>*,#cfPal>.box{width:100%!important;max-width:none!important;min-width:0!important;height:100%!important;max-height:none!important;margin:0!important;
  border-radius:0!important;overflow:auto!important;box-sizing:border-box!important;flex:1 1 auto}
.uiov>.uibox,#khoChon>*{padding:22px 16px calc(22px + var(--dt-an))!important;display:flex;flex-direction:column;justify-content:center}
.dt-ov>*{padding-bottom:calc(16px + var(--dt-an))!important}
.dt-ov :is(input,select,textarea),.uiov :is(input,select,textarea),#khoMan :is(input,select){max-width:100%;min-height:40px;font-size:15px}
.dt-ov :is(button,.btn),.uiov :is(button,.btn),#khoMan button,#khoChon button{min-height:42px}
.dt-ov table,#khoMan table{max-width:100%}
#cfPal{padding-top:0!important}
#khoMan .kh-dau{padding:12px 14px!important}
#khoMan .kh-dl{padding:8px 14px!important;flex-wrap:wrap}
#khoMan .kh>*:not(.kh-dau):not(.kh-dl){min-width:0;max-width:100vw;overflow-x:auto}
#khoMan .kh-dau .x{width:40px!important;height:40px!important}
/* danh sách file kho: bảng → thẻ (tên file 1 hàng · cửa hàng / giờ sửa / cỡ 1 hàng chữ nhỏ · nút thao tác 1 hàng) */
#khoDs thead{display:none!important}
#khoDs,#khoDs table,#khoDs tbody{display:block!important;width:100%!important;min-width:0!important}
#khoDs tbody tr{display:grid!important;grid-template-columns:repeat(3,auto);justify-content:start;align-items:center;gap:4px 12px;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.07)}
#khoDs tbody td{display:block!important;padding:0!important;border:0!important;width:auto!important;font-size:12.5px;color:#55565B;white-space:nowrap}
#khoDs tbody td:first-child{grid-column:1 / -1;font-size:14px;color:#1C2A18;white-space:normal}
#khoDs tbody td:last-child{grid-column:1 / -1;display:flex!important;flex-wrap:wrap;gap:6px;margin-top:4px}
#khoDs tbody td:only-child{color:inherit;text-align:center}
#ctxMenu{max-width:calc(100vw - 16px)!important}
}