/* CF-A8 OFFICE v3 (20/10/2026: sửa dòng đóng băng + khung cao 1 màn hình) · v2 (30/09/2026 tối: bảng tính bấm chọn ô nhanh hơn) · v1 (30/09/2026) — giao diện Apple cho Office. Chỉ khung (thanh trên, tiêu đề trang, trang chủ, nút),
   chỉ trên màn hình. KHÔNG đụng vùng soạn thảo văn bản / bảng tính / trình chiếu, font tài liệu, bản in, xuất file. */
@media screen{
:root:root:root{--a8-f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --a8-ink:#1D1D1F;--a8-ink2:#6E6E73;--a8-line:rgba(0,0,0,.08);--a8-acc:#0F7A3B;--a8-accd:#0B5E2D;--a8-acct:rgba(15,122,59,.08)}
html body.cfu-page:not(.edit-full){background:#F5F5F7!important}
html body.cfu-page:not(.edit-full) :is(.main,.cfu-body,#cfu-main){background:transparent!important}

/* ── thanh trên 56px: quay lại · biểu tượng · Office · thanh chọn giữa · phiên bản ── */
html body.cfu-page #cfu-top{display:flex;align-items:center;gap:12px;height:56px;box-sizing:border-box;padding:0 24px;position:sticky;top:0;z-index:50;
  background:rgba(251,251,253,.86)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--a8-line);font-family:var(--a8-f)}
html body.cfu-page #cfu-top .cfu-hero{display:contents}
html body.cfu-page #cfu-top .cfu-back{order:1;display:flex;align-items:center;gap:2px;padding:0 12px 0 0!important;margin:0!important;border-right:1px solid var(--a8-line);border-radius:0;height:20px;
  background:none!important;color:var(--a8-acc)!important;font-size:14px!important;font-weight:400!important;white-space:nowrap}
html body.cfu-page #cfu-top .cfu-ht{order:2;display:flex;align-items:center;gap:10px!important;min-width:0}
html body.cfu-page #cfu-top .cfu-ht .cfu-ic{width:26px!important;height:26px!important;border-radius:7px!important;box-shadow:none!important}
html body.cfu-page #cfu-top .cfu-ht .cfu-ic svg{width:15px!important;height:15px!important}
html body.cfu-page #cfu-top .cfu-ht h1{font-size:17px!important;font-weight:700!important;letter-spacing:-.01em!important;color:var(--a8-ink)!important}
html body.cfu-page #cfu-top .cfu-ht p{display:none}
html body.cfu-page #cfu-top .cfu-tiles{order:3;margin:0 auto!important;padding:3px!important;display:flex!important;flex-wrap:nowrap;gap:2px!important;
  background:rgba(0,0,0,.05)!important;border:0!important;border-radius:12px;position:static}
html body.cfu-page #cfu-top .cfu-tile{height:34px;padding:0 12px 0 10px!important;gap:6px;border-radius:9px!important;background:transparent!important;box-shadow:none!important;
  font-size:14px!important;font-weight:500!important;color:#3A3A3C!important;white-space:nowrap}
html body.cfu-page #cfu-top .cfu-tile:hover{background:rgba(255,255,255,.6)!important}
html body.cfu-page #cfu-top .cfu-tile.on{background:#fff!important;color:var(--a8-ink)!important;font-weight:600!important;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)!important}
html body.cfu-page #cfu-top .cfu-tile .cfu-ic.l{width:16px!important;height:16px!important;background:none!important;box-shadow:none!important;border-radius:0!important}
html body.cfu-page #cfu-top .cfu-tile .cfu-ic.l svg{width:15px!important;height:15px!important;stroke:currentColor!important}
html body.cfu-page #cfu-top .cfu-tile.on .cfu-ic.l svg{stroke:var(--a8-acc)!important}
html body.cfu-page #cfu-top .cfu-hu{order:4;position:static!important;margin:0!important;padding:0!important;background:none!important;gap:10px!important;font-size:13px!important;font-weight:400!important;color:var(--a8-ink2)!important}
html body.cfu-page #cfu-top .cfu-hu span:not(.cfu-lg){text-transform:none!important;font-weight:400!important;white-space:nowrap}
html body.cfu-page #cfu-top .cfu-hu small{order:-1;background:none!important;padding:0!important;font-size:13px!important;font-weight:400!important;letter-spacing:0!important;color:var(--a8-ink2)!important}
html body.cfu-page #cfu-top .cfu-hu .cfu-lg{order:2;width:30px;height:30px}
@media (max-width:1360px){html body.cfu-page #cfu-top .cfu-hu span:not(.cfu-lg){display:none}}

/* ── tiêu đề trang ── */
html body.cfu-page:not(.edit-full) .topbar{background:transparent!important;border:0!important;box-shadow:none!important;max-width:1200px;width:100%;box-sizing:border-box;margin:0 auto;padding:32px 30px 4px!important;align-items:flex-end;font-family:var(--a8-f)}
html body.cfu-page:not(.edit-full) .topbar h1{font-size:34px!important;line-height:1.1;font-weight:600!important;letter-spacing:-.02em!important;color:var(--a8-ink)!important}
html body.cfu-page:not(.edit-full) .topbar .sub{font-size:15px!important;color:var(--a8-ink2)!important;margin-top:6px}
html body.cfu-page .topbar .gsearch{background:#fff!important;border:0!important;border-radius:10px!important;height:34px;box-sizing:border-box;padding:0 12px!important;box-shadow:inset 0 0 0 1px var(--a8-line)}
html body.cfu-page .topbar .gsearch:focus-within{box-shadow:0 0 0 3px rgba(15,122,59,.22)!important}
html body.cfu-page .topbar .gsearch input{font-size:14px!important}
html body.cfu-page .topbar .cfcmd{height:34px;border-radius:10px!important;background:#fff!important;color:var(--a8-ink2)!important;box-shadow:inset 0 0 0 1px var(--a8-line);font-size:14px!important}
html body.cfu-page .topbar .cfcmd kbd{border:0!important;background:none!important;padding:0!important;font:13px var(--a8-f)!important;color:var(--a8-ink2)}

/* ── nút ── */
html body.cfu-page .btn.primary{background:var(--a8-acc)!important;border-color:var(--a8-acc)!important;color:#fff!important;border-radius:980px!important;box-shadow:none!important;font-weight:500!important;padding-left:18px;padding-right:18px}
html body.cfu-page .btn.primary:hover{background:var(--a8-accd)!important}
html body.cfu-page:not(.edit-full) .topbar .btn,html body.cfu-page:not(.edit-full) .content>.card .btn:not(.primary){border-radius:980px!important}

/* ── trang chủ ── */
html body.cfu-page .content :is(.of-sec,.of-moi,.of-the,#homeDrop,#recent){font-family:var(--a8-f)}
html body.cfu-page .of-sec{margin:8px 0 14px!important;align-items:center!important}
html body.cfu-page .of-sec h2{font-size:22px!important;font-weight:600!important;letter-spacing:-.01em;color:var(--a8-ink)!important}
html body.cfu-page .of-sec span{font-size:13px;color:var(--a8-ink2)!important}
html body.cfu-page .of-moi{gap:16px!important}
html body.cfu-page .of-the{background:#fff!important;border:0!important;border-radius:18px!important;box-shadow:none!important;padding:22px!important;color:var(--a8-ink)!important;transition:transform .15s,box-shadow .15s}
html body.cfu-page .of-the:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.08)!important}
html body.cfu-page .of-the b{font-size:22px!important;font-weight:600!important;letter-spacing:-.01em;color:inherit!important}
html body.cfu-page .of-the small{font-size:14px!important;color:var(--a8-ink2)!important;opacity:1!important}
html body.cfu-page .of-the .of-o{flex:none!important;width:48px!important;height:48px!important;min-height:48px;border-radius:12px!important;box-shadow:none!important;color:#fff!important}
html body.cfu-page .of-the .of-o svg{stroke:#fff!important;color:#fff!important}
html body.cfu-page .of-the[data-go="doc"] .of-o{background:#1A73E8!important}
html body.cfu-page .of-the[data-go="sheet"] .of-o{background:#1E9E47!important}
html body.cfu-page .of-the[data-go="slides"] .of-o{background:#F08300!important}
html body.cfu-page .of-the.lon{background:linear-gradient(135deg,#4A8CF7 0%,#1F5FD6 100%)!important;color:#fff!important}
html body.cfu-page .of-the.lon small{color:rgba(255,255,255,.88)!important}
html body.cfu-page .of-the.lon .of-o{background:rgba(255,255,255,.22)!important}
html body.cfu-page #homeDrop{background:rgba(15,122,59,.03)!important;border:1.5px dashed rgba(15,122,59,.35)!important;border-radius:18px!important;box-shadow:none!important;font-family:var(--a8-f)}
html body.cfu-page #homeDrop .dropi{background:#0A84FF!important;color:#fff!important;border-radius:12px!important;box-shadow:none!important}
html body.cfu-page #homeDrop>div:nth-child(2)>div:first-child{font-size:17px!important;font-weight:600!important;color:var(--a8-ink)!important}
html body.cfu-page #homeDrop>div:nth-child(2)>div:last-child{font-size:13px!important;color:var(--a8-ink2)!important}
html body.cfu-page:not(.edit-full) .content>.card,html body.cfu-page #recent .card{border:0!important;border-radius:18px!important;box-shadow:none!important;background:#fff!important}

/* v3 (20/10/2026, Office 10.49) — SỬA DÒNG ĐÓNG BĂNG BỊ TRÔI:
   (1) BỎ quy tắc v2 "table.ss tr{position:relative}": nó làm hàm ghim dòng (fixFreeze) đo sai vị trí → dòng 1 bị đẩy
       xuống ~dòng 17 (đo được top 342px thay vì 15px). Quy tắc cũ của dự án: không đặt position lên dòng/ô bảng tính.
   (2) Khung cf-ui không giới hạn chiều cao nên CẢ TRANG cuộn (thanh tab, tên cột trôi mất), còn lưới không cuộn.
       Nay khung cao đúng 1 màn hình: lưới cuộn bên trong, dòng/cột đóng băng + thanh trang đứng yên như Excel;
       các màn khác (Trang chủ, Đã lưu, Giới thiệu) cuộn trong vùng nội dung. */
html:has(body.cfu-page),html body.cfu-page{height:100%}
html body.cfu-page .cfu{height:100vh;display:flex;flex-direction:column;overflow:hidden}
html body.cfu-page .cfu-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html body.cfu-page .cfu-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html body.cfu-page .cfu-main>.main{flex:1 1 auto;min-height:0}

/* v3 — DẢI NÚT GỌN (ribbon kiểu "nút nhỏ 3 hàng" như Excel/Word): trước cao 176px, màn 1366×768 bảng tính chỉ còn 16 dòng;
   nay 112px → 24 dòng (1920×1080: 32 → 39 dòng). Nút nằm ngang (biểu tượng + chữ) xếp 3 hàng theo cột, bỏ dòng tên nhóm
   (thay bằng vạch ngăn), gộp hàng thẻ + dải nút vào 1 khung, thu gọn thanh công thức, băng "Xem bảo vệ" còn 1 dòng,
   bớt lề quanh vùng làm việc. Thanh cuộn ẨN HẲN (quy ước chung mọi tool) — vẫn cuộn bằng chuột/cảm ứng;
   màn hẹp thì dải nút tự xuống hàng chứ không giấu nút. Chỉ đổi cách xếp, không đổi chức năng nút nào. */
html body.cfu-page *{scrollbar-width:none}
html body.cfu-page *::-webkit-scrollbar{display:none;width:0;height:0}
html body.cfu-page.edit-full #cfu-main,html body.cfu-page.edit-full .cfu-main{padding:4px 6px 4px!important}
html body.cfu-page.edit-full .content{padding:6px 8px 6px!important}
html body.cfu-page.edit-full .ribbon{gap:0!important;background:#fff!important;border-radius:12px;box-shadow:0 1px 3px rgba(20,30,10,.09);overflow:hidden}
html body.cfu-page.edit-full .rbtabs{height:38px!important;box-shadow:none!important;border-radius:0!important;border-bottom:1px solid rgba(0,0,0,.07)!important;padding:0 6px!important}
html body.cfu-page.edit-full .rbtabs .cfpills .rbtab{padding:4px 11px!important;font-size:12.5px}
html body.cfu-page.edit-full .rbstrip.active{box-shadow:none!important;border-radius:0!important;padding:3px 4px!important;align-items:center!important;flex-wrap:wrap!important;overflow:hidden!important;row-gap:3px}
html body.cfu-page.edit-full .rbstrip .rbg-name{display:none!important}
html body.cfu-page.edit-full .rbstrip .rbgroup{border-right:1px solid rgba(0,0,0,.07);padding:0 5px!important;margin:0!important;flex:0 0 auto}
html body.cfu-page.edit-full .rbstrip .rbgroup:last-child{border-right:0}
html body.cfu-page.edit-full .rbstrip .rbg-body:not(:has(.tbar)){display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(3,22px);grid-auto-columns:max-content;gap:1px 2px!important;max-width:none!important;align-content:center!important;align-items:center!important}
html body.cfu-page.edit-full .rbstrip .rbg-body:has(select):not(:has(.rbbtn)){grid-template-rows:repeat(2,24px)!important}
html body.cfu-page.edit-full .rbstrip .rbg-body .flexbreak{display:none!important}
html body.cfu-page.edit-full .rbstrip .rbg-body:has(.tbar){gap:2px!important}
html body.cfu-page.edit-full .rbstrip .rbbtn{flex-direction:row!important;justify-content:flex-start!important;gap:4px!important;min-width:0!important;max-width:none!important;width:auto!important;height:22px;padding:0 5px!important;font-size:11.5px!important;line-height:1!important;white-space:nowrap!important;text-align:left!important}
html body.cfu-page.edit-full .rbstrip .rbbtn br{display:none}
html body.cfu-page.edit-full .rbstrip .rbbtn svg{width:14px!important;height:14px!important}
html body.cfu-page.edit-full .ribbon select{height:22px;padding:0 4px!important;font-size:11.5px!important}
html body.cfu-page.edit-full .workmain>.wtop{padding:3px 6px!important;min-height:0!important;height:auto!important}
html body.cfu-page.edit-full .workmain>.wtop *{min-height:0}
html body.cfu-page.edit-full .workmain>.wtop input,html body.cfu-page.edit-full .workmain>.wtop .nb,html body.cfu-page.edit-full .workmain>.wtop>div{height:28px;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box}
html body.cfu-page #pvBar{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;padding:4px 10px!important;min-height:0!important;font-size:12px!important;line-height:1.3!important;gap:8px!important;margin-bottom:6px!important}
html body.cfu-page #pvBar .pvtxt{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
html body.cfu-page #pvBar .pvbtn{flex:0 0 auto!important;width:auto!important;margin:0!important;padding:3px 10px!important;font-size:12px!important;height:26px}
}