/* APSA2182: giao dien "Soft glass" — tham khao ngon ngu thiet ke CRM (nen pastel, kinh mo, the khoi mau, pill den)
   Chi ap dung khi <html class="sf">. Xay tren che do sang (data-theme="light"). */
html.sf:root{
  color-scheme: light;
  --sf-blue:#2d4ff5; --sf-blue2:#1f3fe0; --sf-yellow:#ece34a; --sf-teal:#4c94a8; --sf-ink:#111317;
  --sf-lime:#dff20d; --sf-glass:rgba(255,255,255,.62); --sf-glass2:rgba(255,255,255,.78); --sf-line:rgba(17,19,23,.08);
  --bg:#e7ecf2; --bg2:rgba(255,255,255,.72); --bg3:rgba(255,255,255,.55); --bg4:rgba(17,19,23,.06);
  --bg-card:rgba(255,255,255,.66); --panel:rgba(255,255,255,.6); --panel2:rgba(255,255,255,.45);
  --border:rgba(17,19,23,.08); --border-hover:rgba(45,79,245,.45);
  --text:#16181d; --text2:#5b616c; --text3:#8b919c;
  --accent:#2d4ff5; --accent2:#1f3fe0; --accent-soft:#2d4ff5; --accent-fill:#2d4ff5; --accent-on:#ffffff;
  --accent-glow:rgba(45,79,245,.16); --neon:#2d4ff5; --neon-rgb:45,79,245; --a-rgb:45,79,245;
  --a05:rgba(45,79,245,.05); --a09:rgba(45,79,245,.09); --a14:rgba(45,79,245,.14); --a50:rgba(45,79,245,.5); --a55:rgba(45,79,245,.55);
  --btn-hover:#1f3fe0; --blue:#2d4ff5; --info:#2d4ff5; --blue-wash:rgba(45,79,245,.06);
  --yellow:#b9a400; --gold:#9a8600; --warn:#b07400; --warn2:#a86b00; --warn3:#c27a00;
  --card-rgb:255,255,255; --bar-rgb:236,240,245;
  --radius:16px; --shadow:rgba(30,40,70,.08);
  --font-display:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-title:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --grp1:rgba(255,255,255,.55); --grp2:rgba(255,255,255,.55); --grp3:rgba(255,255,255,.55); --grp-h:rgba(255,255,255,.8);
}
html.sf body{
  background:
    radial-gradient(1200px 700px at 8% -10%, #cfdaf0 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #e3efe6 0%, transparent 55%),
    radial-gradient(900px 700px at 60% 110%, #dfe9ee 0%, transparent 60%),
    linear-gradient(160deg,#e4e9f1 0%,#eef1ef 55%,#e9efe8 100%) fixed !important;
  background-attachment: fixed !important;
  color:var(--text); font-family:var(--font-body) !important; letter-spacing:-.005em;
}
html.sf body::before, html.sf body::after{ display:none !important; }
html.sf *{ font-family:inherit; }
html.sf h1, html.sf h2, html.sf h3, html.sf .page-title, html.sf .hero h1{
  font-family:var(--font-title) !important; font-weight:600 !important; letter-spacing:-.025em !important; text-transform:none !important;
}
html.sf h1, html.sf .hero h1{ font-size:clamp(28px,3vw,40px) !important; line-height:1.05 !important; color:var(--sf-ink) !important; }
html.sf code, html.sf pre, html.sf .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important; }

/* ---------- Sidebar: dock toi noi ---------- */
html.sf #apsaSide{
  background:#14161a !important; border:0 !important; border-radius:26px !important;
  top:12px !important; bottom:12px !important; left:12px !important; height:auto !important;
  box-shadow:0 18px 40px rgba(20,22,26,.22) !important; color:#e9ebef !important;
}
html.sf #apsaSide .as-brand{ border-bottom:1px solid rgba(255,255,255,.07) !important; }
html.sf #apsaSide .as-item{ color:#b8bcc5 !important; border-radius:14px !important; margin:1px 8px !important; width:auto !important; }
html.sf #apsaSide .as-item svg{ stroke:#9aa0aa !important; }
html.sf #apsaSide .as-item:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }
html.sf #apsaSide .as-item.on{ background:#ffffff !important; color:#111317 !important; font-weight:600 !important; box-shadow:none !important; }
html.sf #apsaSide .as-item.on svg{ stroke:#111317 !important; }
html.sf #apsaSide .as-item.on::before{ display:none !important; }
html.sf #apsaSide .as-grp{ color:#6c727d !important; }
html.sf #apsaSide .as-grp.pin{ color:var(--sf-lime) !important; }
html.sf #apsaSide *{ border-color:rgba(255,255,255,.07) !important; }

/* ---------- Thanh tren ---------- */
html.sf header{ background:transparent !important; border-bottom:0 !important; box-shadow:none !important; backdrop-filter:none !important; }

/* ---------- Khoi / the: kinh mo ---------- */
html.sf .gsec, html.sf .card-box, html.sf .panel, html.sf .box, html.sf .tbl-wrap, html.sf .table-wrap,
html.sf .stat, html.sf .stats > div, html.sf .kpi, html.sf section.block{
  background:var(--sf-glass) !important; border:1px solid rgba(255,255,255,.75) !important; border-radius:24px !important;
  box-shadow:0 10px 30px rgba(30,40,70,.06) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
html.sf .gsec{ padding:18px 20px !important; }
html.sf .ghead .gttl{ font-family:var(--font-title) !important; text-transform:none !important; letter-spacing:-.01em !important; font-size:15px !important; font-weight:600 !important; color:var(--sf-ink) !important; }
html.sf .ghead .gline{ opacity:.0 !important; }
html.sf .gnum{ color:var(--text3) !important; }

/* the so lieu dang khoi mau */
html.sf .biz-card{ border:0 !important; border-radius:22px !important; padding:18px 20px !important; color:#fff !important; box-shadow:0 12px 28px rgba(30,40,70,.12) !important; }
html.sf .biz-card *{ color:inherit !important; }
html.sf .biz-card .biz-num{ font-family:var(--font-title) !important; font-weight:600 !important; font-size:40px !important; letter-spacing:-.03em !important; }
html.sf .biz-card .biz-lbl, html.sf .biz-card .biz-sub{ opacity:.85; }
html.sf #secBiz .biz-card:nth-child(1){ background:var(--sf-blue) !important; }
html.sf #secBiz .biz-card:nth-child(2){ background:var(--sf-yellow) !important; color:#1a1a12 !important; }
html.sf #secMine .biz-card:nth-child(1){ background:var(--sf-teal) !important; }
html.sf #secMine .biz-card:nth-child(2){ background:var(--sf-ink) !important; }

/* ---------- Nut ---------- */
html.sf .btn, html.sf button.btn, html.sf a.btn{
  border-radius:999px !important; font-family:var(--font-body) !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important;
}
html.sf .btn:not(.ghost):not(.danger):not(.apsa-b), html.sf .btn-primary, html.sf .btn-accent, html.sf .btn-add, html.sf .btn-p, html.sf .btn-new-empty{
  background:var(--sf-ink) !important; color:#fff !important; border-color:var(--sf-ink) !important; box-shadow:none !important;
}
html.sf .btn.primary:not(.apsa-b), html.sf .btn-primary{ background:var(--sf-blue) !important; border-color:var(--sf-blue) !important; color:#fff !important; }
html.sf .btn:not(.apsa-b):hover{ filter:brightness(1.12); }
html.sf .btn.ghost{ background:rgba(255,255,255,.7) !important; color:var(--sf-ink) !important; border:1px solid var(--sf-line) !important; }
html.sf .apsa-b-main:not(#_z){ background:var(--sf-blue) !important; color:#fff !important; }
html.sf .apsa-b-sub:not(#_z){ background:var(--sf-yellow) !important; color:#1a1a12 !important; }
html.sf .apsa-b-close:not(#_z){ background:#ffffff !important; color:#d93a32 !important; box-shadow:inset 0 0 0 1px rgba(217,58,50,.35) !important; }
html.sf .apsa-b:not(#_z){ border-radius:999px !important; }

/* pill loc: pill den khi chon */
html.sf .filter-pill, html.sf .pill, html.sf .chip, html.sf .tab, html.sf .seg button, html.sf .ftab{
  border-radius:999px !important; background:rgba(255,255,255,.6) !important; border:1px solid rgba(255,255,255,.8) !important; color:var(--text2) !important; box-shadow:none !important;
}
html.sf .filter-pill.active, html.sf .pill.active, html.sf .pill.on, html.sf .chip.on, html.sf .chip.active, html.sf .tab.active, html.sf .tab.on, html.sf .seg button.on, html.sf .seg button.active, html.sf .ftab.on{
  background:var(--sf-ink) !important; color:#fff !important; border-color:var(--sf-ink) !important;
}

/* ---------- O nhap ---------- */
html.sf input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html.sf select, html.sf textarea{
  background:rgba(255,255,255,.75) !important; border:1px solid var(--sf-line) !important; border-radius:14px !important; color:var(--text) !important; box-shadow:none !important;
}
html.sf input:focus, html.sf select:focus, html.sf textarea:focus{ border-color:var(--sf-blue) !important; box-shadow:0 0 0 3px rgba(45,79,245,.14) !important; outline:0 !important; }

/* ---------- Bang ---------- */
html.sf table{ border-collapse:separate !important; border-spacing:0 !important; }
html.sf th{ background:transparent !important; color:var(--text3) !important; font-weight:500 !important; text-transform:none !important; letter-spacing:0 !important; border-bottom:1px solid var(--sf-line) !important; }
html.sf td{ border-color:var(--sf-line) !important; }
html.sf tbody tr:hover > td{ background:rgba(255,255,255,.55) !important; }

/* ---------- Dialog ---------- */
html.sf .mask, html.sf .overlay, html.sf .modal-bg, html.sf [class*="-ov"]{ background:rgba(214,222,232,.55) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
html.sf .modal, html.sf .dlg, html.sf .dialog, html.sf .sheet{
  background:rgba(255,255,255,.88) !important; border:1px solid rgba(255,255,255,.9) !important; border-radius:28px !important;
  box-shadow:0 30px 70px rgba(30,40,70,.18) !important; color:var(--text) !important; -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
}
html.sf .modal h2, html.sf .modal h3{ color:var(--sf-ink) !important; }

/* ---------- The module (homescreen) ---------- */
html.sf :is(#gridPin,#toolGrid) .card-icon{ background:#ffffff !important; border:1px solid rgba(255,255,255,.9) !important; box-shadow:0 8px 20px rgba(30,40,70,.08) !important; border-radius:18px !important; }
html.sf #gridPin{ background:var(--sf-glass) !important; border:1px solid rgba(255,255,255,.75) !important; border-radius:26px !important; }
html.sf :is(#gridPin,#toolGrid) .card-title{ color:var(--sf-ink) !important; font-weight:500 !important; }

/* badge, nhan */
html.sf .badge, html.sf .tag, html.sf .lbl{ border-radius:999px !important; }
html.sf ::selection{ background:rgba(45,79,245,.18); }
html.sf ::-webkit-scrollbar-thumb{ background:rgba(17,19,23,.18) !important; border-radius:99px; }

/* ---------- tinh chinh vong 2 ---------- */
html.sf body{ background: radial-gradient(1100px 650px at 0% 0%, rgba(255,255,255,.75) 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, rgba(255,255,255,.55) 0%, transparent 60%), linear-gradient(135deg,#d6e0f2 0%,#e3eaf0 45%,#d7e9de 100%) !important; background-attachment:fixed !important; }
html.sf .gsec, html.sf #gridPin{ background:rgba(255,255,255,.66) !important; }
html.sf .tdo-row{ border-left:0 !important; background:rgba(255,255,255,.8) !important; border:1px solid rgba(255,255,255,.95) !important; border-radius:14px !important; box-shadow:0 2px 8px rgba(30,40,70,.04) !important; }
html.sf .tdo-row::before{ display:none !important; }
html.sf header .logo-img{ filter:invert(1) brightness(.15) !important; }
html.sf #apsaSide .as-grp.pin, html.sf #apsaSide .as-grp.pin *{ color:var(--sf-lime) !important; }
html.sf .personal-bar, html.sf .personal-bar *{ color:var(--text3) !important; }
html.sf :is(#gridPin,#toolGrid)>a.card{ background:transparent !important; box-shadow:none !important; border:0 !important; }
html.sf :is(#gridPin,#toolGrid)>a.card:hover{ background:rgba(255,255,255,.55) !important; }
html.sf header{ background:rgba(228,234,241,.72) !important; -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important; }

/* ---------- Chi phi thuc te & cac trang co #stats ---------- */
html.sf header .logo img, html.sf header img.logo-img{ filter:invert(1) brightness(.15) !important; }
html.sf #stats .stat{ border:0 !important; border-radius:22px !important; box-shadow:0 12px 28px rgba(30,40,70,.10) !important; }
html.sf #stats .stat:nth-child(1){ background:var(--sf-blue) !important; }
html.sf #stats .stat:nth-child(2){ background:var(--sf-yellow) !important; }
html.sf #stats .stat:nth-child(3){ background:var(--sf-teal) !important; }
html.sf #stats .stat:nth-child(4){ background:var(--sf-ink) !important; }
html.sf #stats .stat:nth-child(-n+4) *{ color:#fff !important; }
html.sf #stats .stat:nth-child(2) *{ color:#1a1a12 !important; }
html.sf #stats .stat:nth-child(-n+4) .k{ opacity:.8; }
html.sf #stats .stat.duesoon{ background:rgba(255,255,255,.8) !important; box-shadow:inset 0 0 0 1.5px rgba(232,120,40,.55), 0 12px 28px rgba(30,40,70,.08) !important; }
html.sf .rp{ overflow:hidden; }
/* dialog chuyen khoan: giu y nghia mau (ca nhan = vang, doanh nghiep = xanh) nhung sang */
html.sf body #mQr .modal{ background:linear-gradient(165deg,#e3e9ff 0%,#ffffff 55%) !important; border:1px solid rgba(255,255,255,.95) !important; }
html.sf body #mQr.qr-pers .modal{ background:linear-gradient(165deg,#fbf3c4 0%,#ffffff 55%) !important; }
html.sf body #mQr .modal, html.sf body #mQr .modal :is(h1,h2,h3,label,b,strong,span,div,p){ color:var(--text) !important; }
html.sf body #mQr .modal h2, html.sf body #mQr .modal h3{ color:var(--sf-ink) !important; }
html.sf body #mQr .modal label, html.sf body #mQr .modal .lbl, html.sf body #mQr .modal small{ color:var(--text3) !important; }
html.sf body #mQr .modal .apsa-b-main, html.sf body #mQr .modal .apsa-b-main *{ color:#fff !important; }
html.sf body #mQr .modal .apsa-b-sub, html.sf body #mQr .modal .apsa-b-sub *{ color:#1a1a12 !important; }
html.sf body #mQr .modal .apsa-b-close, html.sf body #mQr .modal .apsa-b-close *{ color:#d93a32 !important; }
html.sf .modal input:not([type=checkbox]):not([type=radio]), html.sf .modal select{ padding-left:12px !important; padding-right:12px !important; }

/* ---------- vong 3: kinh trong hon + gon (CRM nhieu thong tin) ---------- */
html.sf body{ background:
  radial-gradient(60% 75% at -5% 30%, #9db2f4 0%, rgba(157,178,244,0) 70%),
  radial-gradient(50% 60% at 105% 0%, #e0ec9a 0%, rgba(224,236,154,0) 70%),
  radial-gradient(50% 60% at 95% 105%, #b6e2cb 0%, rgba(182,226,203,0) 70%),
  radial-gradient(45% 55% at 35% 110%, #cbc2f2 0%, rgba(203,194,242,0) 70%),
  linear-gradient(120deg,#d3dcf1 0%,#e7ecdd 100%) !important; background-attachment:fixed !important; }
html.sf .gsec:not(#_z), html.sf #gridPin:not(#_y), html.sf .tbl-wrap:not(#_z), html.sf .table-wrap:not(#_z), html.sf .rp:not(#_z), html.sf .card-box:not(#_z), html.sf .panel:not(#_z), html.sf .box:not(#_z){
  background:linear-gradient(160deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.28) 100%) !important;
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(40,50,90,.07) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5) !important; backdrop-filter:blur(22px) saturate(1.5) !important;
  border-radius:20px !important; }
html.sf .filter-pill, html.sf .pill, html.sf .chip, html.sf .tab, html.sf .ftab{ background:rgba(255,255,255,.4) !important; border-color:rgba(255,255,255,.6) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
html.sf #apsaSide{ background:rgba(20,22,26,.86) !important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
html.sf header{ background:rgba(225,231,242,.35) !important; -webkit-backdrop-filter:blur(18px) saturate(1.4) !important; backdrop-filter:blur(18px) saturate(1.4) !important; }
/* gon khoang cach */
html.sf .container{ gap:10px !important; padding:0 16px 24px !important; }
html.sf .gsec{ padding:12px 14px !important; margin:0 !important; }
html.sf .ghead{ margin-bottom:8px !important; min-height:0 !important; }
html.sf .biz-wrap{ gap:8px !important; }
html.sf .biz-card{ padding:12px 14px !important; border-radius:16px !important; }
html.sf .biz-card .biz-num{ font-size:30px !important; }
html.sf .tdo-row{ padding:4px 10px !important; background:rgba(255,255,255,.42) !important; border:1px solid rgba(255,255,255,.6) !important; border-radius:10px !important; margin-bottom:4px !important; box-shadow:none !important; }
html.sf #filterBar{ padding:10px 16px 6px !important; }
html.sf .personal-bar{ padding-top:0 !important; padding-bottom:4px !important; }
html.sf #apsaSide .as-item{ height:32px !important; min-height:32px !important; margin:0 8px !important; border-radius:10px !important; }
html.sf #apsaSide .as-grp{ height:22px !important; min-height:22px !important; }
html.sf #gridPin{ padding:10px !important; }
html.sf :is(#gridPin,#toolGrid){ gap:10px 4px !important; }
/* bang: trong suot, dong gon */
html.sf table tbody td, html.sf body .rp table tbody td, html.sf body .rp td.d{ background-color:transparent !important; }
html.sf body table th, html.sf body table td{ padding-top:6px !important; padding-bottom:6px !important; }
html.sf table tbody tr:hover > td{ background-color:rgba(255,255,255,.45) !important; }
html.sf #stats{ gap:8px !important; }
html.sf #stats .stat{ padding:10px 14px !important; border-radius:16px !important; }
html.sf .page-head{ padding-top:10px !important; padding-bottom:8px !important; margin-bottom:0 !important; }
html.sf .modal{ background:rgba(255,255,255,.72) !important; }

/* ---------- vong 4: mau chu dao APSA #daf941 cho icon + diem nhan ---------- */
html.sf:root{
  --sf-lime:#daf941; --sf-lime-ink:#4d5c00;           /* lime dung tren nen toi; ban dam dung cho chu tren nen sang */
  --accent:#4d5c00; --accent2:#3d4a00; --accent-soft:#4d5c00; --btn-hover:#c8e82e;
  --accent-fill:#daf941; --accent-on:#111317; --accent-glow:rgba(218,249,65,.35);
  --neon:#daf941; --neon-rgb:218,249,65; --a-rgb:218,249,65;
  --a05:rgba(218,249,65,.10); --a09:rgba(218,249,65,.18); --a14:rgba(218,249,65,.28); --a50:rgba(140,170,0,.5); --a55:rgba(140,170,0,.55);
  --border-hover:rgba(140,170,0,.55); --blue:#2d4ff5; --info:#2d4ff5;
}
/* menu trai: icon lime, muc dang chon = pill lime */
html.sf #apsaSide .as-item svg{ stroke:var(--sf-lime) !important; opacity:.9; }
html.sf #apsaSide .as-item.on{ background:var(--sf-lime) !important; color:#111317 !important; }
html.sf #apsaSide .as-item.on svg{ stroke:#111317 !important; opacity:1; }
html.sf #apsaSide .as-mark{ background:var(--sf-lime) !important; color:#111317 !important; }
/* icon module: o toi, icon dung bo mau APSA (lime + trang) */
html.sf :is(#gridPin,#toolGrid) .card-icon{
  background:linear-gradient(160deg,#23262c,#121317) !important; border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 18px rgba(20,22,26,.18) !important;
  --accent:#daf941; --accent2:#c9e636; --text:#ffffff; --text2:#a9adb5; --text3:#5e5e5e; --bg:#000; --bg2:#0b0b0b; --bg3:#141414; --bg4:#2b2b2b;
  --neon:#daf941; --neon-rgb:218,249,65; --a-rgb:218,249,65;
}
/* nut chinh = lime chu den; nut den = icon lime */
html.sf .btn.primary:not(.apsa-b), html.sf .btn-primary{ background:var(--sf-lime) !important; border-color:var(--sf-lime) !important; color:#111317 !important; }
html.sf .apsa-b-main:not(#_z), html.sf body #mQr .modal .apsa-b-main, html.sf body #mQr .modal .apsa-b-main *{ background-color:var(--sf-lime) !important; color:#111317 !important; }
html.sf body #mQr .modal .apsa-b-main *{ background-color:transparent !important; }
html.sf .apsa-b-sub:not(#_z){ background:#ffffff !important; color:#111317 !important; box-shadow:inset 0 0 0 1px rgba(17,19,23,.15) !important; }
html.sf body #mQr .modal .apsa-b-sub, html.sf body #mQr .modal .apsa-b-sub *{ color:#111317 !important; }
html.sf .btn:not(.ghost):not(.danger):not(.apsa-b):not(.primary) .apsa-ico{ stroke:var(--sf-lime) !important; }
html.sf .filter-pill.active, html.sf .pill.active, html.sf .pill.on, html.sf .chip.on, html.sf .chip.active, html.sf .tab.active, html.sf .tab.on, html.sf .seg button.on, html.sf .seg button.active, html.sf .ftab.on{ color:var(--sf-lime) !important; }
/* the so lieu: lime / xanh / xanh ngoc / den (so lime) */
html.sf #secBiz .biz-card:nth-child(1), html.sf #stats .stat:nth-child(1){ background:var(--sf-lime) !important; }
html.sf #secBiz .biz-card:nth-child(1) *, html.sf #stats .stat:nth-child(1) *{ color:#111317 !important; }
html.sf #secBiz .biz-card:nth-child(2), html.sf #stats .stat:nth-child(2){ background:var(--sf-blue) !important; }
html.sf #secBiz .biz-card:nth-child(2) *, html.sf #stats .stat:nth-child(2) *{ color:#ffffff !important; }
html.sf #secMine .biz-card:nth-child(2) .biz-num, html.sf #stats .stat:nth-child(4) .v{ color:var(--sf-lime) !important; }
/* chu nhan (ma du an, link) tren nen sang: lime dam de doc duoc */
html.sf a:not(.btn):not(.as-item):not(.card):not(.biz-card):not(.as-brand){ color:inherit; }
html.sf .tdo-row a, html.sf .tdo-row .code, html.sf .tdo-row [class*="code"]{ color:var(--sf-lime-ink) !important; }
html.sf ::selection{ background:rgba(218,249,65,.55); }
html.sf input:focus, html.sf select:focus, html.sf textarea:focus{ border-color:#9cbf00 !important; box-shadow:0 0 0 3px rgba(218,249,65,.45) !important; }
html.sf :is(#gridPin,#toolGrid)>a.card:not(#_z){ background:transparent !important; box-shadow:none !important; border:0 !important; }
html.sf :is(#gridPin,#toolGrid)>a.card:not(#_z):hover{ background:rgba(255,255,255,.4) !important; }

/* ---------- vong 5: den chi dung cho chu; nut + nen icon = #2b2e33 ---------- */
html.sf:root{ --sf-dark:#2b2e33; --sf-dark-hover:#363a40; }
html.sf #apsaSide{ background:var(--sf-dark) !important; box-shadow:0 18px 40px rgba(43,46,51,.25) !important; }
html.sf body :is(.btn:not(.ghost):not(.danger):not(.apsa-b):not(.primary), .btn-accent, .btn-add, .btn-p, .btn-new-empty):not(#_z){ background:var(--sf-dark) !important; border-color:var(--sf-dark) !important; color:#fff !important; }
html.sf body :is(.btn:not(.ghost):not(.danger):not(.apsa-b):not(.primary), .btn-add):not(#_z):hover{ background:var(--sf-dark-hover) !important; filter:none !important; }
html.sf body :is(.filter-pill.active, .pill.active, .pill.on, .chip.on, .chip.active, .tab.active, .tab.on, .seg button.on, .seg button.active, .ftab.on):not(#_z){ background:var(--sf-dark) !important; border-color:var(--sf-dark) !important; color:var(--sf-lime) !important; }
html.sf body #secMine .biz-card:nth-child(2):not(#_z), html.sf body #stats .stat:nth-child(4):not(#_z){ background:var(--sf-dark) !important; }
html.sf body :is(#gridPin,#toolGrid) .card-icon:not(#_z){ background:var(--sf-dark) !important; border-color:var(--sf-dark) !important; box-shadow:0 6px 14px rgba(43,46,51,.18) !important; }
html.sf body #apsaHam:not(#_z), html.sf body .card-star:not(#_z){ background:var(--sf-dark) !important; color:#fff !important; }
/* ---------- vong 6: o module = #2b2e33, chu trang ---------- */
html.sf body :is(#gridPin,#toolGrid)>a.card:not(#_z){ background:var(--sf-dark) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-radius:16px !important; box-shadow:0 6px 16px rgba(43,46,51,.16) !important; padding:8px 4px 8px !important; }
html.sf body :is(#gridPin,#toolGrid)>a.card:not(#_z):hover{ background:var(--sf-dark-hover) !important; }
html.sf body :is(#gridPin,#toolGrid) .card-icon:not(#_z){ box-shadow:none !important; margin-bottom:4px !important; }
html.sf body :is(#gridPin,#toolGrid) .card-title:not(#_z){ color:#ffffff !important; }
html.sf a.card[data-cat="quanly"]{ --catc:#daf941 !important; }
html.sf a.card[data-cat="design"]{ --catc:#f9a8d4 !important; }
html.sf a.card[data-cat="tienich"]{ --catc:#93c5fd !important; }
html.sf a.card[data-cat="training"]{ --catc:#fcd34d !important; }
html.sf a.card[data-cat="caidat"], html.sf a.card[data-cat="admin"]{ --catc:#c8ccd2 !important; }
html.sf body :is(#gridPin,#toolGrid) .card-tag:not(#_z){ color:var(--catc,#c8ccd2) !important; }
html.sf body #toolGrid > .card-add:not(#_z){ background:var(--sf-dark) !important; border:0 !important; border-radius:16px !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:0 6px 16px rgba(43,46,51,.16) !important; }
html.sf body #toolGrid > .card-add:not(#_z) *{ color:#ffffff !important; border-color:rgba(218,249,65,.6) !important; }
/* vong 7: icon module to hon */
html.sf body :is(#gridPin,#toolGrid) .card-icon:not(#_z){ width:64px !important; height:64px !important; }
html.sf body :is(#gridPin,#toolGrid) .card-icon:not(#_z) :is(svg,img){ width:42px !important; height:42px !important; }
@media(max-width:600px){ html.sf body :is(#gridPin,#toolGrid) .card-icon:not(#_z){ width:58px !important; height:58px !important; } html.sf body :is(#gridPin,#toolGrid) .card-icon:not(#_z) :is(svg,img){ width:38px !important; height:38px !important; } }
/* APSA2188: ap dung toan he thong, bo nut doi nen sang/toi */
#apsaTheme{ display:none !important; }
html.sf #apsaSide .as-brand .as-txt{ color:#ffffff !important; }
/* APSA2188b: moi nut "primary" cua tung trang = #2b2e33 (tru nut chinh trong dialog = lime) */
html.sf body :is(button,a,label)[class*="primary"]:not(.apsa-b):not(#_z){ background:var(--sf-dark) !important; border-color:var(--sf-dark) !important; color:#ffffff !important; }
html.sf body :is(button,a,label)[class*="primary"]:not(.apsa-b):not(#_z):hover{ background:var(--sf-dark-hover) !important; }
html.sf body :is(button,a,label)[class*="primary"]:not(.apsa-b):not(#_z) .apsa-ico{ stroke:var(--sf-lime) !important; }
/* APSA2188c: ra soat toan he thong — chu phu dam hon, sua vai cho tuong phan thap */
html.sf:root{ --text3:#636976; --text2:#4c525d; }
html.sf body .fbtn:not(#_z){ color:#ffffff !important; }
html.sf body .h-type:not(#_z){ color:var(--text) !important; }
html.sf body .nav-title:not(#_z){ color:#ffffff !important; }
html.sf body :is(.rvh, .pysm, .qv-btn):not(#_z){ color:var(--sf-lime-ink) !important; }

/* ---------- APSA2189: ra soat lan 2 ---------- */
/* be mat (dropdown, popup, panel thong bao, header dinh) phai DUC, khong trong suot */
html.sf:root{ --bg2:#ffffff; --bg-card:#ffffff; --panel:#fafbfc; --panel2:#f3f5f8; --bg3:#f5f7fa; --bg4:#eceff3; --card-rgb:255,255,255; }
/* boi den chu: nen xam dam, chu lime — de nhin */
html.sf ::selection{ background:#2b2e33 !important; color:#daf941 !important; }
html.sf input::selection, html.sf textarea::selection{ background:#2b2e33 !important; color:#daf941 !important; }
/* bang thong bao */
html.sf body .nobox:not(#_z){ background:#ffffff !important; box-shadow:-12px 0 40px rgba(30,40,70,.18) !important; }
html.sf body .nohead:not(#_z){ background:#ffffff !important; border-bottom:1px solid rgba(17,19,23,.08) !important; padding-right:64px !important; }
html.sf body .noitem:not(#_z){ border-radius:0 !important; background-image:none !important; min-height:0 !important; height:auto !important; position:static !important; box-shadow:none !important; width:100% !important; }
html.sf body .noitem.apsa-b:not(#_z){ background-color:transparent !important; color:inherit !important; font-weight:inherit !important; padding:inherit; display:flex !important; }

/* ---------- APSA2189b: dien thoai doc (<=760px) ---------- */
@media (max-width:760px){
  html.sf #apsaSide{ top:0 !important; left:0 !important; bottom:0 !important; border-radius:0 !important; box-shadow:none !important; }
  html.sf header{ flex-wrap:wrap !important; height:auto !important; min-height:52px !important; row-gap:6px !important; column-gap:6px !important; padding-top:8px !important; padding-bottom:8px !important; padding-right:56px !important; }
  html.sf header > *{ flex-shrink:1 !important; min-width:0 !important; }
  html.sf .container{ padding:0 8px 20px !important; gap:8px !important; }
  html.sf .gsec{ padding:10px !important; border-radius:16px !important; }
  html.sf h1, html.sf .hero h1{ font-size:24px !important; }
  html.sf body :is(.modal, .dlg, .dialog, .sheet):not(#_z){ width:calc(100vw - 16px) !important; max-width:calc(100vw - 16px) !important; max-height:calc(100dvh - 16px) !important; border-radius:20px !important; }
  html.sf :is(.tbl-wrap, .table-wrap){ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  html.sf body .nobox:not(#_z){ width:100vw !important; max-width:100vw !important; }
  html.sf #filterBar{ overflow-x:auto !important; flex-wrap:nowrap !important; }
  html.sf body .apsa-acts .apsa-b:not(#_z){ min-height:44px !important; }
}
/* ---------- iPad ngang (761-1366px) ---------- */
@media (min-width:761px) and (max-width:1366px){
  html.sf .container{ padding:0 12px 24px !important; }
  html.sf header{ flex-wrap:wrap !important; row-gap:6px !important; height:auto !important; min-height:52px !important; }
}
/* trang chu: dong "Viec cua toi" khong tran ngang */
html.sf .tdo-cols, html.sf .tdo-col, html.sf .tdo-grp{ min-width:0 !important; max-width:100% !important; }
html.sf .tdo-row{ max-width:100% !important; min-width:0 !important; overflow:hidden !important; }
html.sf .tdo-main{ min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
@media (max-width:760px){ html.sf .tdo-cols{ display:flex !important; flex-direction:column !important; } html.sf .tdo-row{ flex-wrap:wrap !important; } html.sf .tdo-main{ white-space:normal !important; } }

/* ---------- APSA2189d: nen "accent" = #2b2e33, chu tren no = lime ---------- */
html.sf:root{ --accent:#2b2e33; --accent2:#363a40; --accent-soft:#2b2e33; --accent-fill:#2b2e33; --accent-on:#daf941; --btn-hover:#363a40; --border-hover:rgba(43,46,51,.45); }
html.sf body :is(.btn.primary, .btn-primary, .btn-add, .btn-new-empty):not(.apsa-b):not(#_z){ color:#ffffff !important; }
/* chu/nut khong xuong dong */
html.sf :is(.btn, .filter-pill, .pill, .chip, .tab, .ftab, .hbtn, header a, header button){ white-space:nowrap !important; }
/* link tren thanh tren cung (vd "Lo trinh hoc") khong dung lime tren nen sang */
html.sf header a:not(.btn):not(.hbtn):not([class*="primary"]){ color:var(--text2) !important; }
@media (max-width:760px){
  html.sf #stats{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; width:100% !important; }
  html.sf #stats .stat{ width:auto !important; min-width:0 !important; }
  html.sf #stats .stat.duesoon{ grid-column:1 / -1 !important; }
  html.sf :is(.filters, .fbar, .filter-row, .toolbar){ flex-wrap:wrap !important; }
}

/* ---------- APSA2190b: khoi toi con sot -> kinh sang; mobile: nut menu xuong duoi ---------- */
html.sf body :is(.fa-hint, .fa-card):not(#_z){
  background:linear-gradient(160deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.38) 100%) !important;
  border:1px solid rgba(255,255,255,.7) !important; color:var(--text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(40,50,90,.07) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
}
html.sf body .fa-card:not(#_z) :is(.fa-meta, .fa-meta *){ color:var(--text2) !important; }
html.sf body #topNav.topnav:not(#_z){ background:rgba(225,231,242,.55) !important; border-bottom:1px solid rgba(255,255,255,.6) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
html.sf body #topNav.topnav:not(#_z) :is(a, span, b){ color:var(--text) !important; }
html.sf body .tabs:not(#_z){ background:rgba(255,255,255,.55) !important; border:1px solid rgba(255,255,255,.7) !important; }
@media (max-width:760px){
  html.sf body #apsaHam:not(#_z){ top:auto !important; bottom:16px !important; right:78px !important; width:48px !important; height:48px !important; border-radius:14px !important; box-shadow:0 8px 20px rgba(43,46,51,.25) !important; z-index:160 !important; }
  html.sf header{ padding-right:10px !important; }
}
html.sf body .fa-modal:not(#_z){ background:#ffffff !important; border:1px solid rgba(17,19,23,.08) !important; color:var(--text) !important; border-radius:24px !important; box-shadow:0 30px 70px rgba(30,40,70,.18) !important; }

/* ---------- APSA2190c: dien thoai — chong tran ngang tung trang ---------- */
@media (max-width:760px){
  html.sf header > *{ flex-shrink:0 !important; min-width:auto !important; }
  html.sf header > :is(div, nav){ flex-wrap:wrap !important; row-gap:6px !important; }
  html.sf :is(header nav, nav.hnav){ flex-wrap:wrap !important; }
  html.sf body :is(.lay, .cols, .fgrid, .fb-wrap, .fa-grid, .stats, #stats, .qgrid, .grid2, .grid3) > *{ min-width:0 !important; }
  html.sf body :is(.lay, .cols, .fgrid, .fb-wrap, .fa-grid){ grid-template-columns:minmax(0,1fr) !important; }
  html.sf body .stats:not(#_z){ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  html.sf body :is(.pills, .qtabs, .filters, .toolbar, .page-head, .fb-filters){ flex-wrap:wrap !important; min-width:0 !important; max-width:100% !important; }
  html.sf body :is(.filters) > *{ min-width:0 !important; max-width:100% !important; }
  html.sf body #bulk:not(#_z){ left:8px !important; right:8px !important; width:auto !important; max-width:none !important; transform:none !important; flex-wrap:wrap !important; }
  html.sf body :is(.container, .wrap):not(#_z){ overflow-x:auto !important; }
  html.sf body :is(input, select, textarea){ max-width:100% !important; }
  html.sf body :is(.fa-card, .fcard, .card, .panel){ max-width:100% !important; }
}
@media (max-width:480px){ html.sf .qgrid{ grid-template-columns:minmax(0,1fr) !important; } }

/* ---------- APSA2190d: header/page-head khong tran ---------- */
@media (max-width:760px){
  html.sf header > *{ max-width:100% !important; }
  html.sf body .page-head > *{ min-width:0 !important; max-width:100% !important; }
  html.sf body .page-head > div{ flex:1 1 220px !important; }
  html.sf body .pl-nav{ display:flex !important; max-width:100% !important; overflow-x:auto !important; scrollbar-width:none; }
  html.sf body .srch{ max-width:100% !important; }
  html.sf body .srch input{ width:100% !important; box-sizing:border-box !important; }
}

/* ---------- APSA2190e: iPad + cac khoi con lai ---------- */
html.sf body .srch input{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
html.sf body :is(.container, .wrap) > table{ display:block !important; max-width:100% !important; overflow-x:auto !important; }
@media (max-width:760px){
  html.sf body .ph > *{ min-width:0 !important; max-width:100% !important; }
  html.sf body .chips > *{ max-width:100% !important; white-space:normal !important; min-width:0 !important; }
  html.sf body .ph h2{ flex-wrap:wrap !important; }
}
html.sf body #apsaNoOv .noall{ margin-left:auto !important; }
html.sf body #apsaNoOv .noclose{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; border:0; display:inline-flex; align-items:center; justify-content:center; background:#eef0f3; color:#2b2e33; cursor:pointer; padding:0; }
html.sf body #apsaNoOv .noclose:hover{ background:#2b2e33; color:#daf941; }
@media (max-width:760px){
  html.sf body #apsaNoOv.open:not(#_z){ align-items:flex-end !important; justify-content:center !important; padding-top:56px !important; }
  html.sf body #apsaNoOv .nobox:not(#_z){ width:100vw !important; max-width:100vw !important; max-height:calc(100dvh - 56px) !important; border-radius:20px 20px 0 0 !important; }
  html.sf body .vhd{ flex-wrap:wrap !important; row-gap:8px !important; }
  html.sf body .vhd > :is(h2, h3){ flex:1 0 100% !important; }
  html.sf body .vhd > .sp{ display:none !important; }
  html.sf body .vhd > .btn{ flex:1 1 auto !important; }
}

/* ---------- APSA2190f: nut chinh trong dialog = #2b2e33, thanh nut dinh nen trang ---------- */
html.sf body .apsa-stk:not(#_z){ background:#ffffff !important; background-image:none !important; }
html.sf body .apsa-b-main:not(#_z), html.sf body #mQr .modal .apsa-b-main:not(#_z){ background:#2b2e33 !important; background-color:#2b2e33 !important; background-image:none !important; color:#ffffff !important; border-color:#2b2e33 !important; }
html.sf body .apsa-b-main:not(#_z) *{ color:#ffffff !important; background:transparent !important; }
html.sf body .apsa-b-main:not(#_z):hover{ background:#363a40 !important; }

/* ---------- APSA2190g: hang nut >=4 nut -> nut phu chi hien icon (co tooltip) ---------- */
html.sf body .apsa-acts:has(> .apsa-b:nth-child(4)) > .apsa-b-sub:has(svg):not(#_z){ flex:0 0 42px !important; width:42px !important; min-width:42px !important; padding:0 !important; font-size:0 !important; justify-content:center !important; gap:0 !important; }
html.sf body .apsa-acts:has(> .apsa-b:nth-child(4)) > .apsa-b-sub:has(svg) svg{ width:18px !important; height:18px !important; margin:0 !important; }
@media (max-width:760px){
  html.sf body .apsa-acts:has(> .apsa-b:nth-child(4)) > .apsa-b-close:not(#_z){ flex:0 0 42px !important; width:42px !important; min-width:42px !important; padding:0 !important; font-size:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
  html.sf body .apsa-acts:has(> .apsa-b:nth-child(4)) > .apsa-b-close:not(#_z)::before{ content:""; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; }
}
@media (max-width:760px){
  html.sf body .apsa-acts:has(> .apsa-b:nth-child(4)) > .apsa-b-main:not(#_z){ font-size:12.5px !important; padding-left:10px !important; padding-right:10px !important; }
  html.sf body .apsa-acts:has(> .apsa-b:nth-child(4)) > .apsa-b-main svg{ display:none !important; }
}
/* dialog: nen trang dac (glass mo tren nen toi bi xam), nen phu nhe hon */
html.sf body :is(.modal, .dlg, .qdlg, .dialog, .fa-modal, [role="dialog"], dialog):not(#_z){ background:#ffffff !important; background-color:#ffffff !important; }
html.sf body :is(.ov, .mask, .qov, .spov, .whov):not(#_z){ background:rgba(22,24,29,.48) !important; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }

/* ---------- APSA2190h: rail dien thoai + nut chinh luong ---------- */
@media (max-width:760px){
  html.sf body.as-pin #apsaSide:not(:hover) .as-gl{ opacity:0 !important; }
  html.sf body.as-pin #apsaSide:not(:hover) .as-grp::before{ opacity:1 !important; }
}
html.sf body button.vb.p:not(#_z){ color:#ffffff !important; }
html.sf body table.rc :is(th, td):nth-child(2){ min-width:170px !important; }
html.sf body table.rc :is(th, td):nth-child(3){ min-width:190px !important; }
@media (max-width:760px){
  html.sf body header > :is(.header-search, .hsearch, .search-box):not(#_z){ flex:1 1 100% !important; order:9 !important; max-width:100% !important; }
  html.sf body header > :is(.header-search, .hsearch, .search-box) input{ width:100% !important; }
}
/* icon nhieu mau (lime/trang) -> nen icon #2b2e33 nhu yeu cau */
html.sf body .pill-ico:not(#_z){ background:#2b2e33 !important; border-radius:5px !important; padding:1.5px !important; box-sizing:border-box !important; width:17px !important; height:17px !important; }
@media (max-width:760px){ html.sf body .stats-grid:not(#_z){ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:760px){ html.sf body #tip:not(#_z){ flex-wrap:wrap !important; } html.sf body #tip > div{ flex:1 1 100% !important; } }
html.sf body .emTbl td:nth-child(2), html.sf body .emTbl td:nth-child(2) *{ white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; }
/* qr-tool */
html.sf body .h-card:not(#_z){ border:1px solid rgba(43,46,51,.12) !important; }
html.sf body #topNav :is(.nav-back, .nav-action){ white-space:nowrap !important; flex-shrink:0 !important; }
html.sf body #topNav .nav-title{ min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
html.sf body #topNav .nav-action:not(#_z){ background:#2b2e33 !important; color:#ffffff !important; border-color:#2b2e33 !important; }
@media (max-width:760px){
  html.sf body .h-card:not(#_z){ flex-wrap:wrap !important; }
  html.sf body .h-card-body{ flex:1 1 0 !important; min-width:0 !important; }
  html.sf body .h-card-btns{ flex:1 1 100% !important; justify-content:flex-end !important; }
  html.sf body .history-topbar{ flex-wrap:wrap !important; row-gap:6px !important; }
}
@media (max-width:760px){ html.sf body :is(.kpis, .kpi-grid, .stat-grid, .sum-grid, .summary-grid):not(#_z){ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
/* dien thoai: bang >=5 cot cuon ngang thay vi bop cot thanh hang rat cao */
@media (max-width:760px){
  html.sf body table:has(> thead > tr > th:nth-child(5)):not(.rc){ min-width:640px !important; }
  html.sf body table:has(> thead > tr > th:nth-child(8)):not(.rc){ min-width:820px !important; }
  html.sf body :is(.card, .panel, .gsec, .tbl-wrap, .table-wrap, .wrap, section, #fbList):has(> table){ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
}
/* bien rgb con mang mau cam cu -> #2b2e33 */
html.sf:root:not(#_z){ --g-rgb:43,46,51 !important; --a-rgb:43,46,51 !important; --neon-rgb:43,46,51 !important; }

/* ---------- APSA2190i: bang rong chi khi bang that su o dang bang (JS gan .apsa-wide) ---------- */
@media (max-width:760px){
  html.sf body table:has(> thead > tr > th:nth-child(5)):not(.apsa-wide):not(.rc){ min-width:0 !important; }
  html.sf body table.apsa-wide:not(.rc):not(#_z){ min-width:640px !important; }
  html.sf body table.apsa-wide8:not(.rc):not(#_z){ min-width:820px !important; }
}
html.sf body #topNav .nav-title{ flex:1 1 auto !important; text-align:center; }
@media (max-width:760px){
  html.sf body :is(.g3, .g4, .grid3, .grid4, .row3, .row4):not(#_z){ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  html.sf body :is(.g2, .g3, .g4, .grid2, .grid3, .grid4, .row2, .row3, .row4) > *{ min-width:0 !important; }
}
@media (max-width:760px){ html.sf body > :is(.fbar, .fgrid){ padding-left:10px !important; padding-right:10px !important; box-sizing:border-box !important; } }

/* ---------- APSA2190j: bang rong khong be chu giua tu (email, ma) ---------- */
@media (max-width:760px){ html.sf body table.apsa-wide :is(td, th), html.sf body table.apsa-wide td *{ word-break:normal !important; overflow-wrap:normal !important; } }

/* ---------- APSA2191: dien thoai co padding nhe + icon thanh menu can giua ---------- */
@media (max-width:760px){
  html.sf body .container:not(#_z){ padding-left:12px !important; padding-right:12px !important; }
  html.sf body header:not(#_z){ padding-left:12px !important; padding-right:12px !important; }
  html.sf body.as-pin > :is(.card, .fb-wrap, .tbl-wrap, .cl-stats, .toolbar, .stats):not(#_z){ margin-left:12px !important; margin-right:12px !important; width:auto !important; max-width:none !important; box-sizing:border-box !important; }
  html.sf body.as-pin > .page-head:not(#_z){ padding-left:12px !important; padding-right:12px !important; }
  html.sf body > :is(.fbar, .fgrid){ padding-left:12px !important; padding-right:12px !important; }
  html.sf body.as-pin #apsaSide:not(:hover) .as-item:not(#_z){ padding-left:0 !important; padding-right:0 !important; justify-content:center !important; gap:0 !important; }
  html.sf body.as-pin #apsaSide:not(:hover) :is(.as-item, .as-brand) .as-txt{ display:none !important; }
  html.sf body.as-pin #apsaSide:not(:hover) .as-brand:not(#_z){ justify-content:center !important; padding-left:0 !important; padding-right:0 !important; }
}
@media (min-width:761px){
  html.sf body:not(.as-pin) #apsaSide:not(:hover) .as-item:not(#_z){ padding-left:0 !important; padding-right:0 !important; justify-content:center !important; gap:0 !important; }
  html.sf body:not(.as-pin) #apsaSide:not(:hover) :is(.as-item, .as-brand) .as-txt{ display:none !important; }
  html.sf body:not(.as-pin) #apsaSide:not(:hover) .as-brand:not(#_z){ justify-content:center !important; padding-left:0 !important; padding-right:0 !important; }
}
/* thanh menu luon dinh man hinh; danh sach dai thi cuon ben trong */
html.sf #apsaSide{ position:fixed !important; }

/* ---------- APSA2192: bang bao gia — dong nhom / cot dinh khong con bong den de len ---------- */
html.sf body #qtable thead th:not(#_z){ background:#f3f5f9 !important; }
html.sf body #qtable tbody tr > td:last-child:not(#_z){ background:#ffffff !important; box-shadow:-10px 0 12px -12px rgba(17,19,23,.22) !important; }
html.sf body #qtable tbody tr.sec > td:not(#_z){ background:#eef1f6 !important; box-shadow:inset 0 -1px 0 rgba(17,19,23,.08) !important; }
html.sf body #qtable tbody tr.sec > td:last-child:not(#_z){ background:#eef1f6 !important; box-shadow:-10px 0 12px -12px rgba(17,19,23,.22), inset 0 -1px 0 rgba(17,19,23,.08) !important; }

/* ---------- APSA2192b: muot hon — bo blur tren phan tu nho/lap lai, chuyen dong nhe ---------- */
html.sf body :is(.chip, .pill, .tag, .badge, button, .btn, .hbtn, .stat, .st, td, th, tr, li, label, .noitem):not(#_z){ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
@media (hover:none), (max-width:1366px) and (pointer:coarse){
  html.sf body :is(.gsec, .tbl-wrap, .rp, .box, #gridPin, .card, .panel, .stat-card, .kpi, .biz-card, .fa-card, .fa-hint, .tabs, .topnav):not(#_z){ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  html.sf body :is(.gsec, .tbl-wrap, .rp, .box, #gridPin, .card, .panel):not(#_z){ background-color:rgba(255,255,255,.86) !important; }
}
html.sf body :is(button, .btn, .hbtn, a, input, select, textarea, .chip, .pill, .as-item, .noitem, .card, .gsec){ transition-property:background-color, border-color, color, box-shadow, opacity, transform !important; transition-timing-function:cubic-bezier(.2,.7,.2,1) !important; }
html.sf body :is(button, .btn, .hbtn):not(:disabled):active{ transform:scale(.97); }

/* dialog / popup / bang thong bao: hien ra mem */
@keyframes apsaPop{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes apsaFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes apsaSheet{ from{ transform:translateY(24px); opacity:.4; } to{ transform:none; opacity:1; } }
html.sf body :is(.ov, .mask, .qov, .spov, .whov, .modal-overlay, #apsaNoOv.open){ animation:apsaFade .16s ease-out both; }
html.sf body :is(.modal, .dlg, .qdlg, .fa-modal, [role="dialog"], .nobox, .umenu.open, .hmenu){ animation:apsaPop .2s cubic-bezier(.2,.8,.2,1) both; }
@media (max-width:760px){ html.sf body #apsaNoOv .nobox{ animation:apsaSheet .22s cubic-bezier(.2,.8,.2,1) both; } }

/* thanh menu thu gon: icon can giua bang padding (khong an chu) -> mo rong muot */
html.sf #apsaSide{ transition:width .22s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1) !important; will-change:width; }
html.sf #apsaSide .as-txt{ transition:opacity .16s ease .04s !important; }
html.sf #apsaSide :is(.as-item, .as-brand){ transition:padding .22s cubic-bezier(.2,.7,.2,1), background-color .15s, color .15s !important; }
@media (max-width:760px){
  html.sf body.as-pin #apsaSide:not(:hover) :is(.as-item, .as-brand) .as-txt{ display:block !important; opacity:0 !important; }
  html.sf body.as-pin #apsaSide:not(:hover) .as-item:not(#_z){ justify-content:flex-start !important; padding-left:5.5px !important; gap:13px !important; }
  html.sf body.as-pin #apsaSide:not(:hover) .as-brand:not(#_z){ justify-content:flex-start !important; padding-left:9.5px !important; }
}
@media (min-width:761px){
  html.sf body:not(.as-pin) #apsaSide:not(:hover) :is(.as-item, .as-brand) .as-txt{ display:block !important; opacity:0 !important; }
  html.sf body:not(.as-pin) #apsaSide:not(:hover) .as-item:not(#_z){ justify-content:flex-start !important; padding-left:8.5px !important; gap:13px !important; }
  html.sf body:not(.as-pin) #apsaSide:not(:hover) .as-brand:not(#_z){ justify-content:flex-start !important; padding-left:12.5px !important; }
}
@media (prefers-reduced-motion:reduce){ html.sf *, html.sf *::before, html.sf *::after{ animation:none !important; transition:none !important; } }

/* ---------- APSA2193: toi uu khong gian bang ---------- */
html.sf body table :is(th, td).apsa-fit:not(#_z){ width:1% !important; white-space:nowrap !important; }
html.sf body table:not(#qtable) :is(th, td):not(:first-child):not(:last-child):not(#_z){ padding-left:8px !important; padding-right:8px !important; }

/* ---------- APSA2194: bang bao gia rong hon khung -> cho cuon ngang (iPad / man nho) ---------- */
html.sf body .tbl-wrap.apsa-hscroll:not(#_z){ overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
html.sf body .tbl-wrap.apsa-hscroll #qtable :is(thead th, tbody tr.sec > td):not(#_z){ top:auto !important; }

/* iPad (man cam ung): menu thu gon khong tu bung ra khi cham — mo rong bang nut "Mo rong menu" */
@media (hover:none) and (min-width:761px){
  html.sf body:not(.as-pin) #apsaSide:hover:not(#_z){ width:52px !important; }
  html.sf body:not(.as-pin) #apsaSide:hover .as-txt{ opacity:0 !important; }
  html.sf body:not(.as-pin) #apsaSide:hover .as-gl{ opacity:0 !important; }
  html.sf body:not(.as-pin) #apsaSide:hover .as-item:not(#_z){ justify-content:flex-start !important; padding-left:8.5px !important; gap:13px !important; }
  html.sf body:not(.as-pin) #apsaSide:hover .as-brand:not(#_z){ justify-content:flex-start !important; padding-left:12.5px !important; }
}

/* ---------- APSA2195: icon nhieu mau tren nen #2b2e33 -> doi bien mau sang lime/trang de khong bi chim ---------- */
html.sf body svg.pill-ico:not(#_z){ --accent:#daf941; --accent-fill:#daf941; --text:#ffffff; --text2:#e9ebef; --text3:#9aa0aa; }
html.sf body .filter-pill .mc-dot:not(#_z){ display:inline-block; width:17px !important; height:17px !important; border-radius:5px !important; background:#2b2e33 radial-gradient(circle, #daf941 0 3px, transparent 3.6px) !important; flex:0 0 17px; }

/* ---------- APSA2197: nut chinh icon trang; nut phu icon theo mau chu; bot khoang trong quanh hang nut ---------- */
html.sf body .apsa-b-main:not(#_z) svg, html.sf body .apsa-b-main:not(#_z) svg *{ stroke:#ffffff !important; color:#ffffff !important; }
html.sf body :is(.apsa-b-sub, .apsa-b-close):not(#_z) svg, html.sf body :is(.apsa-b-sub, .apsa-b-close):not(#_z) svg *{ stroke:currentColor !important; }
html.sf body .modal > .apsa-acts:not(#_z), html.sf body .dlg > .apsa-acts:not(#_z){ margin-top:10px !important; margin-bottom:12px !important; padding-bottom:0 !important; }
html.sf body .apsa-acts > .apsa-b.apsa-b:not(#_z){ min-height:36px !important; padding-top:8px !important; padding-bottom:8px !important; }

/* o "tinh vao total" (con mat): bat = nen #2b2e33 mat lime, tat = vien xam ro rang */
html.sf body input.rowck:checked:not(#_z){ background:#2b2e33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23daf941' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.7 5.2 12 5.2 22.2 12 22.2 12 18.3 18.8 12 18.8 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/14px no-repeat !important; border-color:#2b2e33 !important; }
html.sf body input.rowck:not(:checked):not(#_z){ background-color:#ffffff !important; border-color:rgba(43,46,51,.35) !important; }

/* cot nut dinh ben phai: bo bong (gay vet xam), thay bang duong ke manh */
html.sf body #qtable tbody tr > td:last-child:not(#_z){ box-shadow:none !important; border-left:1px solid rgba(17,19,23,.07) !important; }
html.sf body #qtable tbody tr.sec > td:last-child:not(#_z){ box-shadow:inset 0 -1px 0 rgba(17,19,23,.08) !important; }

/* ---------- APSA2199: nen thanh tren cung keo dai sang trai (duoi thanh menu) -> het vet lech mau goc tren ---------- */
html.sf body > :is(header, .topbar):not(#_z)::before{ content:""; position:absolute; top:0; bottom:0; right:100%; width:340px; background:inherit; -webkit-backdrop-filter:inherit; backdrop-filter:inherit; pointer-events:none; }

/* ---------- APSA2200: icon dong ho (Gan day) — kim dong ho khong bi trang chim; thanh "dang xem bang tai khoan" khong de len header/menu ---------- */
html.sf body svg.pill-ico:not(#_z){ --bg-card:#2b2e33; --bg:#2b2e33; --bg2:#2b2e33; }
html.sf body:has(#swBar):not(#_z){ padding-top:38px !important; }
html.sf body:has(#swBar) > :is(header, .topbar):not(#_z){ top:38px !important; }
html.sf body:has(#swBar) #apsaSide:not(#_z){ top:50px !important; }
@media (max-width:760px){ html.sf body:has(#swBar) #apsaSide:not(#_z){ top:38px !important; } }

/* ---------- APSA2201: tieu de bang dinh (sticky) nen dac — khong de chu cac dong cuon len ---------- */
html.sf body table > thead > tr > th:not(.sep):not(#_z){ background-color:#f3f5f9 !important; }
/* Better Me: bo khoang trong thua, khung danh sach / noi dung thanh the */
html.sf body > .wrap:has(> .sv-tabs):not(#_z){ padding-bottom:12px !important; }
html.sf body .sv-grid > div:not(#_z){ background:rgba(255,255,255,.86) !important; border:1px solid rgba(17,19,23,.06) !important; border-radius:18px !important; padding:12px !important; align-self:start; }
html.sf body .sv-grid > #svPane:not(#_z){ padding:16px 18px !important; }
html.sf body input#svNew:not(#_z){ background:#fff !important; border:1px solid rgba(17,19,23,.12) !important; border-radius:12px !important; padding:9px 14px !important; min-height:38px; box-sizing:border-box; }

/* ---------- APSA2203: o bang co dinh do rong (apsa-fit) — nhom nut khong xuong dong thanh cot doc ---------- */
html.sf body td.apsa-fit > :is(div, span, nav):not(#_z){ flex-wrap:nowrap !important; }

/* ---------- APSA2204: dialog sua link / playlist (videos) — chuyen ve giao dien sang ---------- */
html.sf body :is(.ren-ov, .plov):not(#_z){ background:rgba(22,24,29,.48) !important; }
html.sf body :is(.ren-bx, .plbx):not(#_z){ background:#ffffff !important; color:#16181d !important; border:1px solid rgba(17,19,23,.06) !important; border-radius:20px !important; padding:22px 24px !important; box-shadow:0 24px 60px rgba(17,19,23,.22) !important; animation:apsaPop .18s cubic-bezier(.2,.7,.2,1); }
html.sf body :is(.ren-bx, .plbx) h3:not(#_z){ color:#16181d !important; font-size:17px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; margin:0 0 14px !important; }
html.sf body :is(.ren-bx, .plbx) label:not(#_z){ color:#636976 !important; opacity:1 !important; font-size:11px !important; font-weight:500 !important; margin:12px 0 6px !important; }
html.sf body :is(.ren-bx, .plbx) :is(input[type="text"], input:not([type]), textarea):not(#_z){ background:#ffffff !important; color:#16181d !important; border:1px solid rgba(17,19,23,.12) !important; border-radius:12px !important; padding:9px 12px !important; font-size:13px !important; box-shadow:none !important; }
html.sf body :is(.ren-bx, .plbx) :is(input, textarea):focus:not(#_z){ outline:none !important; border-color:#2b2e33 !important; box-shadow:0 0 0 3px rgba(43,46,51,.08) !important; }
html.sf body :is(.ren-bx, .plbx) :is(input, textarea)::selection{ background:#dff20d; color:#16181d; }
html.sf body .ren-ft:not(#_z), html.sf body :is(.ren-bx, .plbx) .apsa-acts:not(#_z){ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:18px 0 0 !important; position:static !important; display:flex !important; gap:8px !important; justify-content:flex-end !important; }
html.sf body :is(.ren-ft, .plbx .apsa-acts) button:not(#_z){ min-height:36px !important; padding:0 18px !important; border-radius:999px !important; font-size:13px !important; font-weight:500 !important; border:1px solid rgba(17,19,23,.12) !important; background:#ffffff !important; color:#2b2e33 !important; }
html.sf body :is(.ren-ft, .plbx .apsa-acts) button:hover:not(#_z){ background:#f3f5f9 !important; }
html.sf body :is(.ren-ft, .plbx .apsa-acts) button.ok:not(#_z){ background:#2b2e33 !important; border-color:#2b2e33 !important; color:#ffffff !important; font-weight:600 !important; }
html.sf body :is(.ren-ft, .plbx .apsa-acts) button.ok:hover:not(#_z){ background:#16181d !important; }
html.sf body .plbx :is(.ptbox, .plrow):not(#_z){ background:#f5f7fa !important; border-color:rgba(17,19,23,.08) !important; color:#16181d !important; }
html.sf body .plbx .ptbtn .mini:not(#_z){ background:#ffffff !important; border:1px solid rgba(17,19,23,.12) !important; color:#2b2e33 !important; border-radius:999px !important; }
html.sf body .plbx :is(.ptno, .pthint):not(#_z){ color:#636976 !important; }

/* ---------- APSA2205: chuan bang danh sach theo trang Chi phi thuc te ---------- */
/* khung bang: the trang, bo goc 16 */
html.sf body :is(.tbl-wrap, .table-wrap, .hscroll, .emTblWrap, .tl-scroll, .cl-scroll, .fb-scroll, .tw):has(table):not(.card *):not(#_z),
html.sf body .panel:has(> table, > div > table):not(#_z){
  background:rgba(255,255,255,.86) !important; border:1px solid rgba(0,0,0,.035) !important; border-radius:16px !important;
  box-shadow:none !important; -webkit-backdrop-filter:blur(2px) !important; backdrop-filter:blur(2px) !important; }
html.sf body .panel :is(#cus, #sup):not(#_z){ background:transparent !important; border:0 !important; }
/* bang nam truc tiep trong khung trang (khong co the bao) */
html.sf body :is(.container, .wrap, .sec, main) > table:not(#_z){
  background:rgba(255,255,255,.86) !important; border:1px solid rgba(0,0,0,.035) !important; border-radius:16px !important;
  border-collapse:separate !important; border-spacing:0 !important; }
html.sf body :is(.container, .wrap, .sec, main) > table > thead > tr:first-child > th:first-child:not(#_z){ border-top-left-radius:16px !important; }
html.sf body :is(.container, .wrap, .sec, main) > table > thead > tr:first-child > th:last-child:not(#_z){ border-top-right-radius:16px !important; }
html.sf body :is(.container, .wrap, .sec, main) > table > tbody > tr:last-child > td:not(#_z){ border-bottom:0 !important; }
/* nut thao tac trong dong: o vuong 34px, nen xam nhat, icon net */
html.sf body table td :is(button.act, button.iconbtn, button.icon-btn, .vb.sm.ico, button[data-ic2]:not([data-ic2="-"])):not(#_z){
  width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; padding:0 !important;
  border-radius:10px !important; border:1px solid rgba(17,19,23,.08) !important; background:#f5f7fa !important; color:#4c525d !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; box-shadow:none !important;
  font-size:15px !important; line-height:1 !important; vertical-align:middle; flex:0 0 auto; }
html.sf body table td :is(button.act, button.iconbtn, button.icon-btn, .vb.sm.ico, button[data-ic2]:not([data-ic2="-"])) + :is(button.act, button.iconbtn, button.icon-btn, .vb.sm.ico, button[data-ic2]:not([data-ic2="-"])):not(#_z){ margin-left:6px !important; }
html.sf body table td :is(button.act, button.iconbtn, button.icon-btn, .vb.sm.ico, button[data-ic2]:not([data-ic2="-"])) svg:not(#_z){ width:17px !important; height:17px !important; }
html.sf body table td :is(button.act, button.iconbtn, button.icon-btn, .vb.sm.ico, button[data-ic2]:not([data-ic2="-"])):hover:not(#_z){ background:#eceff4 !important; color:#16181d !important; border-color:rgba(17,19,23,.14) !important; }
html.sf body table td :is(button.act.del, button.iconbtn.del, button.icon-btn.danger, .vb.sm.ico.dng, button[data-ic2="trash"]):hover:not(#_z){ background:#fff4f4 !important; color:#d93636 !important; border-color:rgba(217,54,54,.3) !important; }
html.sf body #qtable td button.act:not(#_z){ width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important; border-radius:9px !important; }
html.sf body #qtable td button.act + button.act:not(#_z){ margin-left:4px !important; }
html.sf body table td button[data-ic2]:not([data-ic2="-"]) svg *:not(#_z){ fill:none !important; stroke:currentColor !important; }

/* ---------- APSA2206: trang chu dien thoai - khoang cach giua cac khoi ---------- */
@media (max-width:900px){ html.sf body .container:has(> #secBiz) > .gsec:not(#_z){ margin-bottom:12px !important; } }

/* ---------- APSA2207: dien thoai / iPad doc — thanh dieu huong duoi day (thay sidebar) + nen co dinh tren iOS ---------- */
@media (hover:none){
  html.sf{ background:#dfe5ee !important; }
  html.sf body:not(#_z){ background:transparent !important; background-attachment:scroll !important; }
  html.sf body::before{ content:""; position:fixed; inset:-80px 0; z-index:-1; pointer-events:none; background:
    radial-gradient(60% 75% at -5% 30%, #9db2f4 0%, rgba(157,178,244,0) 70%),
    radial-gradient(50% 60% at 105% 0%, #e0ec9a 0%, rgba(224,236,154,0) 70%),
    radial-gradient(50% 60% at 95% 105%, #b6e2cb 0%, rgba(182,226,203,0) 70%),
    radial-gradient(45% 55% at 35% 110%, #cbc2f2 0%, rgba(203,194,242,0) 70%),
    linear-gradient(120deg,#d3dcf1 0%,#e7ecdd 100%); }
}
#apsaDock, #apsaDockBg, #apsaDockSheet{ display:none; }
html.sf.apsa-dock body #apsaSide:not(#_z){ display:none !important; }
html.sf.apsa-dock body:not(#_z){ padding-left:0 !important; padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important; }
html.sf.apsa-dock body > header:not(#_z){ left:0 !important; margin-left:0 !important; }
html.sf.apsa-dock body > header:not(#_z)::before{ display:none !important; }
html.sf.apsa-dock body :is(#apsaHam, #acBtn):not(#_z){ bottom:calc(88px + env(safe-area-inset-bottom)) !important; }
html.sf.apsa-dock body #acBox:not(#_z){ bottom:calc(150px + env(safe-area-inset-bottom)) !important; max-height:calc(100dvh - 210px) !important; }
html.sf.apsa-dock body #apsaDock:not(#_z){
  display:flex !important; position:fixed !important; z-index:9990 !important; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
  max-width:560px; margin:0 auto; height:64px; padding:8px !important; gap:3px; align-items:center; box-sizing:border-box;
  background:#16181d !important; border-radius:999px !important; box-shadow:0 14px 34px rgba(17,19,23,.28) !important; }
html.sf body #apsaDock .dk-i:not(#_z){
  flex:0 0 44px; min-width:0; height:48px !important; min-height:48px !important; padding:0 !important; margin:0 !important; border:0 !important;
  border-radius:999px !important; background:transparent !important; color:#c9ced6 !important; box-shadow:none !important;
  display:flex !important; align-items:center; justify-content:center; gap:8px; text-decoration:none !important; font:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:flex-grow .22s cubic-bezier(.2,.7,.2,1), background-color .15s !important; }
html.sf body #apsaDock .dk-i svg:not(#_z){ width:22px !important; height:22px !important; flex:0 0 auto; fill:none !important; stroke:currentColor !important; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
html.sf body #apsaDock .dk-i span:not(#_z){ display:none !important; }
html.sf body #apsaDock .dk-i.on:not(#_z){ flex:1 1 auto; gap:6px; background:var(--sf-lime, #dff20d) !important; color:#16181d !important; padding:0 12px !important; }
html.sf body #apsaDock .dk-i.on span:not(#_z){ display:block !important; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#16181d !important; }
html.sf body #apsaDock .dk-menu.open:not(#_z){ background:rgba(255,255,255,.14) !important; color:#fff !important; }
html.sf.apsa-dock body #apsaDockBg:not(#_z){ display:block !important; position:fixed; inset:0; z-index:9988; background:rgba(22,24,29,.42); opacity:0; pointer-events:none; transition:opacity .2s; }
html.sf.apsa-dock-open body #apsaDockBg:not(#_z){ opacity:1; pointer-events:auto; }
html.sf.apsa-dock body #apsaDockSheet:not(#_z){
  display:block !important; position:fixed; z-index:9989; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom));
  max-width:560px; margin:0 auto; max-height:calc(100dvh - 150px - env(safe-area-inset-bottom)); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:#16181d; color:#fff; border-radius:24px; padding:8px 10px 10px; box-sizing:border-box; box-shadow:0 18px 44px rgba(17,19,23,.32);
  opacity:0; transform:translateY(14px) scale(.98); transform-origin:bottom center; pointer-events:none; transition:opacity .18s, transform .22s cubic-bezier(.2,.7,.2,1); }
html.sf.apsa-dock-open body #apsaDockSheet:not(#_z){ opacity:1; transform:none; pointer-events:auto; }
html.sf body #apsaDockSheet .dk-g{ display:grid; grid-template-columns:1fr 1fr; gap:2px 4px; }
html.sf body #apsaDockSheet .dk-h:not(#_z){ grid-column:1 / -1; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#8b919c !important; padding:12px 10px 4px; }
html.sf body #apsaDockSheet .dk-h.pin:not(#_z){ color:var(--sf-lime, #dff20d) !important; }
html.sf body #apsaDockSheet .dk-r:not(#_z){
  display:flex !important; align-items:center; gap:10px; min-width:0; min-height:44px !important; height:auto !important; padding:6px 10px !important; margin:0 !important;
  border:0 !important; border-radius:14px !important; background:transparent !important; color:#e6e8ec !important; box-shadow:none !important;
  font:inherit; font-size:13.5px !important; font-weight:500 !important; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
html.sf body #apsaDockSheet .dk-r:active:not(#_z){ background:rgba(255,255,255,.08) !important; }
html.sf body #apsaDockSheet .dk-r svg:not(#_z){ width:20px !important; height:20px !important; flex:0 0 auto; fill:none !important; stroke:var(--sf-lime, #dff20d) !important; stroke-width:1.9; }
html.sf body #apsaDockSheet .dk-r .as-txt:not(#_z){ display:block !important; opacity:1 !important; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit !important; }
html.sf body #apsaDockSheet .dk-r > :not(svg):not(.as-txt):not(#_z){ order:3; margin-left:auto; flex:0 0 auto; font-size:10.5px; font-weight:700; line-height:1; padding:3px 6px; border-radius:999px; background:#ff5a4f; color:#fff !important; }
html.sf body #apsaDockSheet .dk-r.on:not(#_z){ background:var(--sf-lime, #dff20d) !important; color:#16181d !important; }
html.sf body #apsaDockSheet .dk-r.on svg:not(#_z){ stroke:#16181d !important; }
@media (prefers-reduced-motion:reduce){ html.sf body :is(#apsaDockSheet, #apsaDockBg, #apsaDock .dk-i):not(#_z){ transition:none !important; } }

/* ---------- APSA2208: dien thoai / iPad doc - an sidebar ngay tu dau (khong cho JS) de khong nhay ---------- */
@media (max-width:700px), (max-width:1100px) and (orientation:portrait) and (pointer:coarse){
  html.sf body #apsaSide:not(#_z){ display:none !important; }
  html.sf body:not(#_z){ padding-left:0 !important; padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important; }
  html.sf body > header:not(#_z){ left:0 !important; margin-left:0 !important; }
}

/* APSA2224: dialog Chuyen khoan - Doanh nghiep nen xanh duong (cung style Ca nhan) */
html.sf body #mQr.qr-corp .modal:not(#_z){ background:linear-gradient(165deg,#d3e2ff 0%,#ffffff 55%) !important; background-color:#ffffff !important; }
html.sf body #mQr.qr-pers .modal:not(#_z){ background:linear-gradient(165deg,#fbf3c4 0%,#ffffff 55%) !important; background-color:#ffffff !important; }
html.sf body #mQr.qr-corp .qr-tag:not(#_z){ background:rgba(59,111,224,.14) !important; color:#2f5fd0 !important; }

/* APSA2234: icon nut toan he thong - nen pastel + icon cung tong mau (khong dung mau den, dam nhat la tong vua / xam) */
html.sf body svg.pill-ico:not(#_z){ --ico-c:#7b8494; --ico-lt:#d3d8e0; --ico-bg:#eceff3; background:var(--ico-bg) !important; --accent:var(--ico-c); --accent-fill:var(--ico-c); --text:var(--ico-c); --text2:var(--ico-c); --text3:var(--ico-lt); --bg-card:#ffffff; --bg:#ffffff; --bg2:#ffffff; }
html.sf body svg.pill-ico:is(:has(> use[href="#i-doc"]), :has(> use[href="#i-file"]), :has(> use[href="#i-download"]), :has(> use[href="#i-upload"]), :has(> use[href="#i-link"]), :has(> use[href="#i-globe"]), :has(> use[href="#i-map"]), :has(> use[href="#i-search"]), :has(> use[href="#i-eye"]), :has(> use[href="#i-copy"]), :has(> use[href="#i-clip"]), :has(> use[href="#i-book"])):not(#_z){ --ico-c:#5b8def; --ico-lt:#c3d6fb; --ico-bg:#dde8ff; }
html.sf body svg.pill-ico:is(:has(> use[href="#i-check"]), :has(> use[href="#i-calendar"]), :has(> use[href="#i-refresh"]), :has(> use[href="#i-shield"]), :has(> use[href="#i-signal"]), :has(> use[href="#i-chart"])):not(#_z){ --ico-c:#4cae78; --ico-lt:#bfe6cf; --ico-bg:#d6f1e1; }
html.sf body svg.pill-ico:is(:has(> use[href="#i-invoice"]), :has(> use[href="#i-palette"]), :has(> use[href="#i-pen"]), :has(> use[href="#i-spark"]), :has(> use[href="#i-image"]), :has(> use[href="#i-album"]), :has(> use[href="#i-camera"]), :has(> use[href="#i-video"]), :has(> use[href="#i-music"]), :has(> use[href="#i-qr"])):not(#_z){ --ico-c:#8c6de0; --ico-lt:#d8cdf9; --ico-bg:#e6ddff; }
html.sf body svg.pill-ico:is(:has(> use[href="#i-money"]), :has(> use[href="#i-price"]), :has(> use[href="#i-calc"]), :has(> use[href="#i-card"]), :has(> use[href="#i-tag"]), :has(> use[href="#i-box"]), :has(> use[href="#i-printer"]), :has(> use[href="#i-bolt"]), :has(> use[href="#i-bulb"]), :has(> use[href="#i-key"])):not(#_z){ --ico-c:#ec9445; --ico-lt:#f9d6b6; --ico-bg:#ffe4cc; }
html.sf body svg.pill-ico:is(:has(> use[href="#i-chat"]), :has(> use[href="#i-mail"]), :has(> use[href="#i-phone"]), :has(> use[href="#i-people"]), :has(> use[href="#i-building"]), :has(> use[href="#i-shuttle"]), :has(> use[href="#i-tent"]), :has(> use[href="#i-target"]), :has(> use[href="#i-cap"]), :has(> use[href="#i-grid"])):not(#_z){ --ico-c:#3aaeb1; --ico-lt:#bde8e9; --ico-bg:#d3f0f0; }
html.sf body svg.pill-ico:is(:has(> use[href="#i-trash"]), :has(> use[href="#i-warning"]), :has(> use[href="#i-block"]), :has(> use[href="#i-heart"])):not(#_z){ --ico-c:#e2675f; --ico-lt:#f6c9c5; --ico-bg:#fde0dd; }
html.sf body input.rowck:checked:not(#_z){ background:#d6f1e1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234cae78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.7 5.2 12 5.2 22.2 12 22.2 12 18.3 18.8 12 18.8 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/14px no-repeat !important; border-color:#bfe6cf !important; }
html.sf body .filter-pill .mc-dot:not(#_z){ background:#dde8ff radial-gradient(circle, #5b8def 0 3px, transparent 3.6px) !important; }
html.sf body svg.ttl-ico:not(#_z){ --text:#7b8494; --text2:#7b8494; --text3:#cfd5de; --accent:#5b8def; --accent-fill:#5b8def; --bg-card:#ffffff; --bg:#ffffff; --bg2:#ffffff; }

/* APSA2237: hover toan he thong = xam dam (thay cho den); header bang to & dam hon cho de doc */
html.sf:root{ --sf-dark-hover:#555b65; }
html.sf body :is(button, a, label, .btn, .hbtn, .pill, .chip, .rowbtn, [role="button"]):hover:not(#_z){ --accent:#555b65; --accent2:#555b65; --accent-soft:#555b65; --accent-fill:#555b65; --sf-dark-hover:#555b65; --btn-hover:#555b65; }
html.sf body .apsa-b-main:not(#_z):hover, html.sf body #mQr .modal .apsa-b-main:not(#_z):hover{ background:#555b65 !important; background-color:#555b65 !important; border-color:#555b65 !important; }
html.sf body :is(.ren-ft, .plbx .apsa-acts) button.ok:hover:not(#_z){ background:#555b65 !important; }
html.sf body #apsaNoOv .noclose:hover{ background:#555b65; }
html.sf body :is(#gridPin,#toolGrid) > a.card:not(#_z):hover{ background:#ffffff !important; background-color:#ffffff !important; }
html.sf body table > thead > tr > th:not(#_z){ font-size:12.5px !important; font-weight:600 !important; color:#4c5361 !important; letter-spacing:0 !important; padding-top:10px !important; padding-bottom:10px !important; }