/* ===== GOPI-Biz.Smart – giao diện V3.0 (CSS thuần, không tải font/thư viện ngoài) ===== */
  :root { --bg:#F4F8FE; --bg2:#EAF2FE; --card:#FFFFFF; --card2:#F6F9FE; --ink:#0F1E3A; --mute:#5B6B85; --pri:#1565D8; --pri2:#2A7BEA; --acc:#FFAE00;
          --in:#10b981; --out:#f97316; --line:rgba(56,189,248,.22); --line2:rgba(148,163,184,.14); --glow:0 0 0 1px rgba(21,101,216,.25), 0 8px 28px rgba(15,30,58,.18);
          --tu:#22c55e; --bu:#f97316; --thieu:#facc15; --nghi:#475569; --vang:#ef4444; --k:#2A7BEA; color-scheme:dark; }
  * { box-sizing:border-box; }
  html { background:var(--bg); }
  body { margin:0; font-family:"Segoe UI",-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); min-height:100vh;
    background:radial-gradient(900px 500px at 8% -10%, rgba(21,101,216,.10), transparent 60%), radial-gradient(800px 480px at 100% 0%, rgba(59,130,246,.12), transparent 60%),
      linear-gradient(rgba(21,101,216,.035) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(90deg, rgba(21,101,216,.035) 1px, transparent 1px) 0 0/44px 44px, var(--bg); }
  a { color:var(--pri); }
  ::-webkit-scrollbar { width:9px; height:9px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:#C9DBF5; border-radius:6px; } ::-webkit-scrollbar-thumb:hover { background:#9DBBEA; }
  header { position:relative; display:flex; align-items:center; gap:12px; padding:10px 14px 10px 82px; min-height:76px; color:#fff;
    background:linear-gradient(110deg,#0B3D91 0%,#0E4DB0 55%,#1565D8 100%); border-bottom:1px solid var(--line); box-shadow:0 8px 30px rgba(15,30,58,.18); overflow:hidden; }
  header::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent,#1565D8 25%,#2A7BEA 60%,#FFAE00 85%,transparent); }
  .home { position:absolute; left:12px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; color:#0B4FB3; cursor:pointer; background:none; border:0; padding:0; margin:0; width:auto; font-size:11px; font-weight:700; letter-spacing:.4px; }
  .home img { width:50px; height:50px; border-radius:50%; display:block; box-shadow:0 0 0 2px rgba(21,101,216,.8), 0 0 18px rgba(21,101,216,.45); }
  .hd-t { flex:1; min-width:0; }
  header h1 { margin:0; font-size:15px; line-height:1.25; font-weight:800; letter-spacing:.3px; text-transform:uppercase; background:linear-gradient(90deg,#fff,#0B4FB3); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ai-on { display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:11.5px; color:#167A3E; font-weight:600; }
  .ai-on i { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px #22c55e; animation:aiNhay 2s ease-in-out infinite; }
  @keyframes aiNhay { 50% { opacity:.35; } }
  .hd-r { text-align:right; flex:0 0 auto; }
  .clock { font:700 24px/1.05 ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace; letter-spacing:1px; color:#0B4FB3; text-shadow:0 0 12px rgba(21,101,216,.65); font-variant-numeric:tabular-nums; }
  .date { font-size:11.5px; color:var(--mute); margin-top:3px; }
  .copy { text-align:center; color:#6B7A92; font-size:11px; line-height:1.45; padding:14px 16px 24px; }
  /* bảng công chi nhánh */
  table.bc { border-collapse:collapse; font-size:11px; }
  table.bc th, table.bc td { border:1px solid var(--line2); text-align:center; min-width:44px; max-width:44px; height:36px; padding:1px; line-height:1.15; word-break:break-all; }
  table.bc th { background:#F2F7FF; color:var(--mute); font-size:11px; height:auto; padding:4px 1px; } table.bc th.cn { background:rgba(239,68,68,.16); color:#B42318; } table.bc th.td { background:var(--pri); color:#FFFFFF; }
  table.bc td.nm, table.bc th.nm { position:sticky; left:0; background:#FFFFFF; min-width:118px; max-width:118px; text-align:left; padding:3px 6px; font-size:12px; z-index:1; word-break:normal; }
  table.bc td.nm small { display:block; color:var(--mute); font-size:10px; }
  table.bc td.tu { background:rgba(34,197,94,.20); } table.bc td.k { background:rgba(59,130,246,.24); } table.bc td.bu { background:rgba(249,115,22,.18); box-shadow:inset 0 0 0 2px var(--bu); }
  table.bc td.thieu { background:rgba(250,204,21,.28); font-weight:700; color:#8A5A00; } table.bc td.nghi { background:rgba(148,163,184,.35); color:#42526E; } table.bc td.vang { background:transparent; box-shadow:inset 0 0 0 2px var(--vang); color:#B42318; font-weight:700; }
  table.bc td.lich { color:#64748b; } table.bc td.sel { outline:3px solid var(--pri); outline-offset:-3px; }
  /* V2.18: lỗi tự kiểm tra trên bảng công */
  table.bc td { position:relative; }
  table.bc td.loi { box-shadow:inset 0 0 0 2px #ef4444 !important; } table.bc td.loi::after { content:'⚠'; position:absolute; top:0; right:1px; font-size:9px; color:#B42318; }
  table.bc td.gtc { box-shadow:inset 0 0 0 2px #a78bfa !important; } table.bc td.gtc::after { content:'⏳'; position:absolute; top:0; right:1px; font-size:8px; }
  table.bc td.dx::before { content:'✎'; position:absolute; top:0; left:1px; font-size:9px; color:#B45309; }
  table.bc td.mo { opacity:.28; }
  table.bc tr.cahd td { background:#F2F7FF; color:var(--mute); font-size:11px; height:auto; padding:5px 6px; text-align:left; }
  table.bc td.ca3 { padding:2px 1px; } table.bc td.ca3 span { display:inline-block; width:12px; height:28px; line-height:28px; margin:0 .5px; border-radius:3px; font-size:10px; font-weight:700; cursor:pointer;
    background:rgba(34,197,94,.30); color:#167A3E; vertical-align:middle; }
  table.bc td.ca3 span.L { background:rgba(239,68,68,.55); color:#fff; } table.bc td.ca3 span.D { background:rgba(59,130,246,.35); color:#0B4FB3; }
  table.bc td.ca3 span.N { background:rgba(148,163,184,.3); color:#64748b; } table.bc td.ca3 span.G { background:rgba(167,139,250,.45); color:#fff; }
  .bcchip { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .bcchip button { width:auto; margin:0; padding:6px 10px; font-size:12.5px; border-radius:999px; }
  .bcchip button.on { background:var(--pri); color:#FFFFFF; } .bcchip button i { font-style:normal; font-weight:800; margin-left:4px; }
  .warn .gtt { display:block; font-size:12px; margin-top:2px; } .warn .nut { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .gtop { display:flex; gap:8px; align-items:center; padding:6px 0; font-size:14px; color:var(--mute); } .gtop input { width:auto; margin:0; } .gtop b { color:var(--ink); }
  .warn input.gtck { width:20px; height:20px; margin:0 4px 0 0; flex:none; accent-color:var(--pri); }
  .bcmd .hop { max-width:560px; } .bcmd .ds { padding-bottom:14px; } .bcmd #bsForm { border:0; box-shadow:none; background:transparent; padding:0; margin:0; }
  .warn { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line2); font-size:14px; }
  .warn b { white-space:nowrap; } .warn span { flex:1; color:var(--mute); font-size:13px; } .warn button { width:auto; margin:0; padding:7px 10px; font-size:13px; }
  /* huy hiệu số việc cần xử lý */
  .nb { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#ef4444; color:#fff; font:800 11px/1 "Segoe UI",Arial,sans-serif; font-style:normal; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 10px rgba(239,68,68,.6); }
  .nb.cam { background:#f59e0b; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 10px rgba(245,158,11,.55); }
  .nb.xanh { background:#1565D8; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 10px rgba(21,101,216,.5); }
  main { max-width:480px; margin:0 auto; padding:14px; }
  #gkBar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; }
  #gkBar select, #gkBar button { width:auto; margin:0; padding:6px 10px; font-size:13px; }
  #gkBar .gktt { flex:1; min-width:180px; font-size:13px; color:var(--mute); }
  #gkBar .gktt b { color:var(--ink); }
  #gkBar.cu { border-color:#2A7BEA; box-shadow:0 0 0 1px rgba(59,130,246,.45); }
  #gkBar.khoa { border-color:#f97316; background:linear-gradient(180deg,rgba(124,45,18,.55),rgba(255,237,213,.55)); }
  #gkBar.khoa .gktt { color:#9A3412; }
  .card { background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.92)); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:0 10px 30px rgba(15,30,58,.18); }
  label { display:block; font-size:13px; color:var(--mute); margin:10px 0 4px; }
  select, input, textarea { width:100%; font-size:16px; padding:11px; border:1px solid var(--line); border-radius:10px; background:#FFFFFF; color:var(--ink); font-family:inherit; }
  select option { background:#FFFFFF; color:var(--ink); }
  input::placeholder, textarea::placeholder { color:#6B7A92; }
  select:focus, input:focus, textarea:focus { outline:none; border-color:var(--pri); box-shadow:0 0 0 3px rgba(21,101,216,.18); }
  textarea { min-height:70px; }
  .row { display:flex; gap:10px; } .row > div { flex:1; }
  button { width:100%; font-size:16px; font-weight:700; padding:13px; border:0; border-radius:12px; margin-top:14px; color:#FFFFFF; background:linear-gradient(135deg,#1565D8,#2A7BEA); cursor:pointer; font-family:inherit; transition:filter .15s, transform .1s, box-shadow .15s; }
  button:not(:disabled):hover { filter:brightness(1.1); }
  button:not(:disabled):active { transform:translateY(1px); }
  button:disabled { opacity:.45; cursor:default; }
  .big { font-size:24px; padding:24px 14px; border-radius:16px; letter-spacing:1px; }
  .vao { background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:0 8px 24px rgba(16,185,129,.35); }
  .ra { background:linear-gradient(135deg,#C2410C,#ea580c); color:#fff; box-shadow:0 8px 24px rgba(234,88,12,.35); }
  .ghost { background:rgba(21,101,216,.08); color:#0B4FB3; border:1px solid var(--line); }
  .who { font-size:20px; font-weight:700; } .sub { color:var(--mute); font-size:14px; margin-top:4px; line-height:1.45; }
  .sub b { color:var(--ink); }
  .msg { border-radius:12px; padding:14px; font-size:15px; line-height:1.45; display:none; margin-bottom:14px; white-space:pre-line; border:1px solid transparent; }
  .ok { display:block; background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.45); color:#167A3E; } .bad { display:block; background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.45); color:#B42318; } .info { display:block; background:rgba(21,101,216,.10); border-color:rgba(21,101,216,.4); color:#0B4FB3; }
  .gps { font-size:13px; color:var(--mute); margin-top:10px; text-align:center; min-height:18px; }
  .hide { display:none !important; }
  table.l { width:100%; border-collapse:collapse; font-size:14px; }
  table.l td { padding:7px 4px; border-bottom:1px solid var(--line2); } table.l td:first-child { color:var(--mute); width:78px; white-space:nowrap; }
  .res { border:1px solid var(--line); border-radius:12px; padding:10px; margin-top:10px; font-size:14px; background:rgba(255,255,255,.6); }
  .res a { color:var(--pri); font-weight:600; } .res button { margin-top:8px; padding:10px; font-size:15px; }
  .foot { text-align:center; color:var(--mute); font-size:12px; margin:6px 0 20px; }
  .spin { text-align:center; color:var(--mute); padding:30px 0; }
  /* lịch tháng */
  .mhead { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .mhead button { width:44px; margin:0; padding:8px; font-size:18px; }
  .mhead b { font-size:17px; }
  .cal { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:12px; }
  .cal .h { text-align:center; font-size:12px; color:var(--mute); font-weight:700; }
  .cal .d { aspect-ratio:1/1; border-radius:10px; background:rgba(148,163,184,.08); border:1px solid var(--line2); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:15px; font-weight:700; cursor:pointer; position:relative; }
  .cal .d small { font-size:10px; font-weight:600; opacity:.85; max-width:100%; overflow:hidden; white-space:nowrap; }
  .cal .d.tu { background:linear-gradient(160deg,#22c55e,#15803d); color:#fff; border-color:transparent; } .cal .d.k { background:linear-gradient(160deg,#2A7BEA,#1d4ed8); color:#fff; border-color:transparent; } .cal .d.bu { background:linear-gradient(160deg,#C2410C,#c2410c); color:#fff; border-color:transparent; }
  .cal .d.thieu { background:linear-gradient(160deg,#facc15,#ca8a04); color:#1c1400; border-color:transparent; } .cal .d.nghi { background:#CBD5E1; color:#42526E; } .cal .d.vang { background:transparent; border:2px solid var(--vang); color:#B42318; }
  .cal .d.lich { background:transparent; border:2px dashed #9DBBEA; } .cal .d.today { outline:2px solid var(--pri); outline-offset:2px; box-shadow:0 0 14px rgba(21,101,216,.55); }
  .cal .d.sel { box-shadow:0 0 0 3px #0F1E3A inset; }
  .legend { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:12px; font-size:12px; color:var(--mute); }
  .legend span { display:inline-flex; align-items:center; gap:5px; } .legend i { width:14px; height:14px; border-radius:4px; display:inline-block; }
  .stat { display:flex; gap:10px; margin-top:12px; } .stat div { flex:1; background:rgba(255,255,255,.7); border:1px solid var(--line2); border-radius:12px; padding:10px; text-align:center; }
  .stat b { display:block; font-size:22px; color:#0B4FB3; } .stat span { font-size:12px; color:var(--mute); }
  .money { font-size:28px; font-weight:800; color:#0F766E; margin-top:6px; text-shadow:0 0 16px rgba(45,212,191,.35); font-variant-numeric:tabular-nums; }
  .ltw { overflow-x:auto; margin-top:10px; border:1px solid var(--line); border-radius:12px; }
  table.lt { border-collapse:collapse; font-size:13px; }
  table.lt th, table.lt td { border:1px solid var(--line2); padding:0; text-align:center; min-width:46px; }
  table.lt th { background:#F2F7FF; color:var(--mute); padding:4px 2px; font-size:11px; } table.lt th.cn { background:rgba(239,68,68,.16); color:#B42318; }
  table.lt td.nm, table.lt th.nm { position:sticky; left:0; background:#FFFFFF; min-width:120px; max-width:120px; text-align:left; padding:4px 6px; font-size:12px; z-index:1; }
  table.lt select { border:0; border-radius:0; padding:8px 0; font-size:14px; text-align:center; width:46px; background:transparent; -webkit-appearance:none; appearance:none; }
  table.lt td.c-nghi { background:rgba(148,163,184,.4); } table.lt td.c-ca { background:rgba(250,204,21,.16); } table.lt td.c-k { background:rgba(59,130,246,.22); } table.lt td.chg { box-shadow:inset 0 0 0 2px #f97316; }
  table.lt td.past { opacity:.55; }
  table.gc { width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
  table.gc th { background:#F2F7FF; color:var(--mute); font-size:11px; padding:6px 3px; text-align:right; } table.gc th:nth-child(-n+3) { text-align:left; }
  table.gc td { padding:7px 3px; border-bottom:1px solid var(--line2); text-align:right; white-space:nowrap; } table.gc td:nth-child(-n+3) { text-align:left; }
  table.gc tr.me td { background:rgba(21,101,216,.08); font-weight:600; } .neg { color:#B42318; font-weight:700; } .pos { color:#16A34A; font-weight:700; } .mute { color:#64748b; }
  .nvlink { color:var(--pri); text-decoration:underline dotted; cursor:pointer; }
  .g3 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; } .g3 div { background:rgba(255,255,255,.7); border:1px solid var(--line2); border-radius:12px; padding:10px; }
  .g3 b { display:block; font-size:18px; } .g3 span { font-size:12px; color:var(--mute); }
  .sn { background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(236,72,153,.18)); border:1px solid rgba(232,121,249,.45); color:#A21CAF; font-size:15px; line-height:1.5; }
  .sn b { color:#A21CAF; } .sn .hn { margin-top:6px; font-weight:700; color:#BE123C; }
  .seg3 { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; } .seg3 button { flex:1; margin:0; padding:9px 4px; font-size:13px; background:rgba(21,101,216,.06); color:var(--mute); border:1px solid var(--line2); }
  .seg3 button.on { background:linear-gradient(135deg,rgba(21,101,216,.28),rgba(59,130,246,.3)); color:#0B4FB3; border-color:rgba(21,101,216,.55); }
  .sg { border:1px solid var(--line); border-radius:14px; padding:12px; margin-top:10px; background:rgba(255,255,255,.9); }
  .sg .t1 { display:flex; justify-content:space-between; gap:8px; font-size:13px; color:var(--mute); }
  .sg .tien { font-size:18px; font-weight:800; color:var(--ink); } .sg .ct { font-size:12px; color:var(--mute); margin-top:4px; word-break:break-word; }
  .sg input.ma { margin-top:8px; text-transform:uppercase; font-weight:700; letter-spacing:.5px; }
  .chip { display:inline-block; margin:6px 6px 0 0; padding:5px 9px; border-radius:999px; background:rgba(99,102,241,.16); color:#3730A3; font-size:12px; font-weight:600; cursor:pointer; border:1px solid rgba(129,140,248,.45); }
  .sgkl { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .sgkl button { flex:1 1 auto; width:auto; padding:7px 8px; font-size:12.5px; font-weight:600; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--mute); margin:0; }
  .sgkl button.on { background:linear-gradient(135deg,#6366f1,#2A7BEA); border-color:transparent; color:#fff; }
  .sgloai { display:flex; gap:8px; margin-top:4px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
  .sgloai button { flex:1 0 150px; width:auto; margin:0; padding:9px 10px; text-align:left; border-radius:12px; border:1px solid var(--line2); background:rgba(21,101,216,.05); color:var(--mute); font-size:12.5px; font-weight:600; line-height:1.35; }
  .sgloai button b { display:block; font-size:16px; color:var(--ink); } .sgloai button small { display:block; font-weight:500; font-size:11.5px; }
  .sgloai button.on { background:linear-gradient(135deg,rgba(21,101,216,.25),rgba(59,130,246,.28)); border-color:rgba(21,101,216,.6); color:#0B4FB3; }
  .sgloai button.co b { color:#B45309; }
  .sgloai button.canh { border-style:dashed; border-color:rgba(251,191,36,.45); }
  .sgloai button.canh.on { background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(249,115,22,.22)); border-color:rgba(251,191,36,.7); }
  .tmp { margin-top:10px; padding:10px; border:1px dashed var(--line2); border-radius:12px; background:rgba(21,101,216,.04); }
  .tmgd { display:block; width:100%; text-align:left; margin:6px 0 0; padding:8px 10px; border-radius:10px; border:1px solid var(--line2); background:transparent; color:var(--mute); font-size:13px; font-weight:600; line-height:1.4; }
  .tmgd b { color:var(--ink); } .tmgd.on { border-color:var(--pri); background:rgba(21,101,216,.14); color:#0B4FB3; }
  .tmgd small { display:block; font-weight:500; font-size:11.5px; }
  .sg input.tx { margin-top:8px; font-weight:700; }
  .tqb { width:100%; border-collapse:collapse; font-size:13px; } .tqb th, .tqb td { padding:7px 6px; border-bottom:1px solid var(--line); text-align:right; vertical-align:middle; }
  .tqb th { color:var(--mute); font-weight:600; position:sticky; top:0; background:var(--bg); z-index:1; } .tqb td:first-child, .tqb th:first-child, .tqb td.l { text-align:left; }
  .xlloi { max-height:280px; overflow:auto; margin-top:8px; font-size:13px; } .xlloi div { padding:4px 0; border-bottom:1px solid rgba(127,127,127,.2); }
  .xltt { display:inline-block; padding:2px 10px; border-radius:10px; font-weight:700; } .xltt.ok { background:rgba(22,163,74,.15); color:#16a34a; } .xltt.tam { background:rgba(245,158,11,.18); color:#d97706; }
  #xlLyDo { width:100%; margin-top:8px; }
  .xlchk { display:block; padding:10px 12px; border:1px solid rgba(127,127,127,.35); border-radius:10px; cursor:pointer; line-height:1.35; } .xlchk input { margin-right:6px; } .xlchk span { display:block; font-size:12px; opacity:.8; margin-left:22px; }
  .xlnvds { max-height:220px; overflow:auto; border:1px solid rgba(127,127,127,.25); border-radius:8px; padding:4px 8px; margin-top:6px; } .xlnvi { display:block; padding:3px 0; font-size:14px; } .xlnvi small { opacity:.7; }
  .xlbar { height:8px; border-radius:4px; background:rgba(127,127,127,.2); overflow:hidden; margin-top:4px; } .xlbar i { display:block; height:100%; width:0; background:#16a34a; transition:width .4s; }
  .xlgt { font-size:12px; margin:3px 0 0 22px; padding:3px 8px; border-radius:6px; } .xlgt.cho { background:rgba(245,158,11,.15); } .xlgt.tra { background:rgba(220,38,38,.12); } .xlgt.ok { background:rgba(22,163,74,.12); }
  .xlmuc { font-size:11px; padding:1px 6px; border-radius:8px; font-weight:700; } .xlmuc.loi { background:rgba(220,38,38,.15); color:#dc2626; } .xlmuc.cb { background:rgba(245,158,11,.18); color:#d97706; }
  .xlgtbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 4px; } .xlgtbar label { margin-right:8px; font-size:14px; } .xlgtbar button { width:auto; flex:0 0 auto; margin:0; padding:8px 14px; font-size:14px; }
  #tXL input[type=checkbox] { width:18px; height:18px; flex:0 0 18px; margin:0 6px 0 0; padding:0; display:inline-block; vertical-align:middle; accent-color:#1565D8; }
  .xlloi label { display:block; cursor:pointer; } .xlloi > div { line-height:1.5; }
  .xltong { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .xltong span { padding:3px 10px; border-radius:10px; font-size:13px; font-weight:700; }
  .xlnut { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; } .xlnut button { margin:0; text-align:left; line-height:1.35; } .xlnut button span { display:block; font-size:12px; font-weight:400; opacity:.8; }
  .tqb input { width:150px; margin:0; padding:6px 8px; text-align:right; font-weight:700; } .tqb input.sua { border-color:#f59e0b; }
  .tqb input.gc { width:150px; text-align:left; font-weight:400; } .msb td, .msb th { text-align:left; } .msb input.mm { width:120px; text-align:left; } .msb input[type=checkbox] { width:auto; margin:0; } .msb tr.xong td { color:var(--mute); } .tqw { overflow-x:auto; margin-top:10px; }
  .pqb td, .pqb th { text-align:left; } .pqb input[type=checkbox] { width:auto; margin:0; transform:scale(1.25); } .pqb td.nh { padding-top:14px; color:var(--pri); font-weight:800; font-size:12.5px; letter-spacing:.3px; text-transform:uppercase; }
  .pqb tr.doi td { background:rgba(245,158,11,.08); } .pqb .mo { font-size:11.5px; color:var(--mute); margin-top:2px; } .pqb input.cv { width:100%; min-width:220px; text-align:left; font-weight:600; }
  .b-cv { background:rgba(21,101,216,.16); color:#0B4FB3; } .b-them { background:rgba(16,185,129,.2); color:#167A3E; } .b-bo { background:rgba(239,68,68,.2); color:#B42318; }
  .pqb .chip { margin:4px 4px 0 0; padding:3px 8px; font-size:11.5px; } .pqb .chip.on { background:linear-gradient(135deg,#1565D8,#2A7BEA); color:#fff; border-color:transparent; }
  .cnbuoc { font-size:13px; line-height:1.6; white-space:pre-wrap; margin-top:10px; }
  .badge.b-kl { background:rgba(139,92,246,.22); color:#6D28D9; font-size:13px; vertical-align:middle; }
  .sgk { font-size:12px; margin-top:6px; line-height:1.4; } .sgk.ok { color:#16A34A; background:none; border:0; } .sgk.no { color:#B45309; }
  .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; }
  .b-cho { background:rgba(245,158,11,.2); color:#8A5A00; } .b-duyet { background:rgba(16,185,129,.2); color:#167A3E; } .b-tc { background:rgba(239,68,68,.2); color:#B42318; } .b-huy { background:rgba(148,163,184,.18); color:#42526E; }
  .sgbar { position:sticky; bottom:0; background:linear-gradient(transparent, var(--bg) 35%); padding:10px 0 4px; z-index:3; }
  .kv { display:flex; justify-content:space-between; gap:8px; font-size:14px; padding:6px 0; border-bottom:1px solid var(--line2); } .kv span:first-child { color:var(--mute); }
  .note { margin-top:6px; padding:8px 10px; border-radius:8px; font-size:13px; background:rgba(148,163,184,.1); border:1px solid var(--line2); }
  .note.ok2 { background:rgba(16,185,129,.12); color:#167A3E; border-color:rgba(16,185,129,.35); } .note.cam2 { background:rgba(249,115,22,.12); color:#9A3412; border-color:rgba(249,115,22,.35); }
  .loadbar { position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px); z-index:60; display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.95); color:#0B4FB3; padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600; border:1px solid rgba(21,101,216,.45); box-shadow:0 0 22px rgba(21,101,216,.25);
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; white-space:nowrap; }
  .loadbar.on { opacity:1; transform:translateX(-50%) translateY(0); }
  .loadbar i { width:16px; height:16px; border-radius:50%; border:3px solid rgba(21,101,216,.25); border-top-color:#1565D8; animation:xoay .8s linear infinite; display:inline-block; }
  @keyframes xoay { to { transform:rotate(360deg); } }
  /* ===== MÁY TÍNH (≥ 900px) ===== */
  @media (min-width: 900px) {
    header { padding:12px 28px 12px 110px; min-height:88px; gap:24px; }
    .home { left:28px; } .home img { width:60px; height:60px; }
    header h1 { font-size:21px; letter-spacing:.6px; }
    .clock { font-size:34px; } .date { font-size:13px; }
    main { max-width:1440px; padding:22px 28px 10px; }
    .card { border-radius:18px; padding:20px 22px; margin-bottom:0; transition:border-color .2s, box-shadow .2s; }
    .card:hover { border-color:rgba(21,101,216,.4); }
    .msg { max-width:900px; margin:0 auto 18px; }
    main > section, .twm-body > section { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px; align-items:start; margin-bottom:22px; }
    main > section > *, .twm-body > section > * { grid-column:span 12; margin:0; min-width:0; }
    .foot { margin:0; }
    .card > .who:first-child, .mhead b { font-size:18px; }
    #tLogin, #tTK { grid-template-columns:repeat(2, minmax(0,440px)); justify-content:center; }
    #tLogin > *, #tTK > * { grid-column:auto; }
    #tCham > .card:not(.sn) { grid-column:span 6; }
    #tCong > #ltt { grid-column:span 4; position:sticky; top:84px; }
    #tCong > .card:not(#ltt) { grid-column:span 8; }
    #tCong:has(#ltt:empty) > .card:not(#ltt) { grid-column:span 12; }
    #tCong:has(#ltt:empty) > #ltt { display:none; }
    .cal { gap:8px; } .cal .d { aspect-ratio:auto; height:70px; font-size:16px; transition:transform .12s; }
    .cal .d:hover { transform:translateY(-2px); }
    #tGC > .card:first-child { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(360px,440px); column-gap:24px; align-items:center; }
    #tGC > .card:first-child > .mhead, #tGC > .card:first-child > .sub { grid-column:1 / span 2; }
    #tGC > .card:first-child > .g3 { grid-column:1 / span 2; }
    #tGC > .card:first-child > .seg3 { grid-column:3; grid-row:1 / span 3; margin:0; padding:5px; background:rgba(255,255,255,.8); border-radius:14px; border:1px solid var(--line2); }
    #gcV1 { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:20px; align-items:start; }
    #gcV1 > .card { margin:0; } #gcV1 > .card.hide + .card { grid-column:1 / -1; }
    table.gc { font-size:14px; } table.gc td { padding:9px 6px; } table.gc th { padding:8px 6px; }
    table.gc tbody tr:hover td { background:rgba(21,101,216,.06); }
    #tBC > .card:first-child { grid-column:span 4; }
    #tBC > #bcBSCard { grid-column:span 8; }
    #tBC:has(#bcBSCard.hide) > .card:first-child { grid-column:span 12; }
    #tBS > #bslCard { grid-column:span 5; }
    #tBS > #bsForm { grid-column:span 7; }
    #tBS:has(#bslCard.hide) > #bsForm { grid-column:3 / span 8; }
    #hsBody { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:20px; align-items:start; }
    #hsBody > .card { margin:0; }
    #hsBody > .hs-dau { grid-column:1 / -1; }
    #tVT > .card { grid-column:3 / span 8; }
    #tDK > .card:first-child { grid-column:span 7; }
    #tDK > #dkCT { grid-column:8 / span 5; grid-row:span 2; position:sticky; top:84px; }
    #tDK > .card:last-child { grid-column:span 7; }
    #tDK:has(#dkCT.hide) > .card:first-child, #tDK:has(#dkCT.hide) > .card:last-child { grid-column:span 6; }
    #tSG > .card:first-child { display:grid; grid-template-columns:1fr minmax(380px,460px); column-gap:28px; align-items:center; }
    #tSG > .card:first-child > .mhead { grid-column:1; }
    #tSG > .card:first-child > .sub { grid-column:1; }
    #tSG > .card:first-child > .seg3 { grid-column:2; grid-row:1 / span 2; margin:0; padding:5px; background:rgba(255,255,255,.8); border-radius:14px; border:1px solid var(--line2); }
    .seg3 button { padding:10px 6px; font-size:14px; }
    #sgP1 > .row { max-width:760px; background:rgba(255,255,255,.9); padding:12px; border-radius:16px; border:1px solid var(--line); }
    #sgSum, #sgSum2 { font-size:14px; margin:12px 2px 2px !important; }
    #sgList2 .sg.sgGui { opacity:.45; pointer-events:none; }
    #sgList, #sgList2, #sgList3 { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:16px; align-items:start; margin-top:10px; }
    #sgList > :not(.sg), #sgList2 > :not(.sg), #sgList3 > :not(.sg) { grid-column:1 / -1; }
    .sg { margin-top:0; padding:14px 16px; border-radius:16px; position:relative; transition:border-color .18s, transform .18s; }
    .sg::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:#C9DBF5; }
    .sg:hover { border-color:rgba(21,101,216,.45); transform:translateY(-2px); }
    .sg:focus-within { border-color:var(--pri); box-shadow:0 0 0 3px rgba(21,101,216,.15); }
    .sg:focus-within::before { background:var(--pri); }
    .sg .tien { font-size:20px; }
    .sgbar { display:flex; justify-content:center; padding:16px 0 8px; margin-top:6px; }
    .sgbar > * { width:100%; max-width:560px; }
  }
  @media (min-width: 900px) and (max-width: 1180px) {
    #tCong > #ltt { position:static; }
    #tGC > .card:first-child { grid-template-columns:minmax(0,1fr); } #tGC > .card:first-child > .seg3 { grid-column:1; grid-row:auto; margin-top:10px; }
    #gcV1 { grid-template-columns:minmax(0,1fr); }
    #tBS > #bslCard, #tBS > #bsForm, #tCham > .card:not(.sn) { grid-column:span 12; }
  }
  /* ===== MÀN HÌNH CHÍNH: bảng điều khiển + bản đồ thành phố GOPI ===== */
  .tw-shell { display:block; }
  .tw-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
  .hc { position:relative; overflow:hidden; flex:0 0 auto; }
  .hc .who { font-size:19px; }
  .hc::before { content:''; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,transparent,var(--pri),transparent); }
  .hc .big { margin-top:12px; padding:16px 12px; font-size:22px; display:flex; align-items:center; justify-content:center; gap:10px; }
  .hc .big svg { width:26px; height:26px; }
  .tw-wrap { position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
    background:radial-gradient(60% 55% at 50% 52%, rgba(21,101,216,.10), transparent 70%), linear-gradient(180deg,#F6F9FE,#F6F9FE 60%,#F4F8FE); box-shadow:0 18px 50px rgba(15,30,58,.18), inset 0 0 60px rgba(21,101,216,.05); }
  .tw-map { position:relative; width:min(100%, calc((100vh - 170px) * 1.86)); margin:0 auto; }
  .tw-map svg { display:block; width:100%; height:auto; }
  .tw-hint { position:absolute; right:14px; bottom:12px; z-index:3; background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; color:#0B4FB3; }
  .tw-ai { position:absolute; left:14px; bottom:12px; z-index:3; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.85); border:1px solid rgba(21,101,216,.45); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; color:#0B4FB3; }
  .tw-ai i { width:8px; height:8px; border-radius:50%; background:#1565D8; box-shadow:0 0 10px #1565D8; animation:aiNhay 1.6s ease-in-out infinite; }
  .bld { cursor:pointer; transition:transform .2s ease, filter .2s ease; }
  .bld:hover, .bld:focus { transform:translateY(-6px); filter:drop-shadow(0 0 10px rgba(21,101,216,.55)) brightness(1.15); outline:none; }
  .bld.khoa { cursor:not-allowed; filter:saturate(.2) brightness(.7); }
  .bld.khoa:hover { transform:none; filter:saturate(.25) brightness(.78); }
  .tw-ov { position:absolute; inset:0; pointer-events:none; z-index:2; }
  .tw-lb { position:absolute; transform:translate(-50%,-100%); white-space:nowrap; font-size:11.5px; font-weight:800; color:#0B4FB3; background:rgba(255,255,255,.9); padding:3px 9px; border-radius:8px;
    border:1px solid rgba(21,101,216,.45); box-shadow:0 0 12px rgba(21,101,216,.2); pointer-events:auto; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
  .tw-lb.khoa { color:#6B7A92; border-color:rgba(148,163,184,.25); box-shadow:none; cursor:not-allowed; }
  .tw-lb.toi { border-color:#FFAE00; color:#8A5A00; box-shadow:0 0 14px rgba(255,162,0,.35); }
  .tw-zone { position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:#fff; padding:5px 11px; border-radius:999px;
    background:linear-gradient(135deg,#2563eb,#1e40af); border:1px solid rgba(255,255,255,.25); box-shadow:0 0 16px rgba(37,99,235,.55); pointer-events:auto; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
  .tw-zone .nb { margin-right:-6px; }
  .tw-zone.z-ti { background:linear-gradient(135deg,#0ea5e9,#0369a1); box-shadow:0 0 16px rgba(14,165,233,.55); } .tw-zone.z-kt { background:linear-gradient(135deg,#8b5cf6,#5b21b6); box-shadow:0 0 16px rgba(139,92,246,.55); }
  .tw-zone.z-dh { background:linear-gradient(135deg,#14b8a6,#0f766e); box-shadow:0 0 16px rgba(20,184,166,.55); } .tw-zone.z-kd { background:linear-gradient(135deg,#f59e0b,#c2410c); box-shadow:0 0 16px rgba(245,158,11,.5); }
  .tw-zone.z-hq { background:linear-gradient(135deg,#1565D8,#2563eb); box-shadow:0 0 18px rgba(21,101,216,.6); }
  .tw-zone.khoa { background:#E3ECF9; color:#5B6B85; box-shadow:none; border-color:rgba(148,163,184,.25); }
  .tw-pkt { filter:drop-shadow(0 0 4px currentColor); }
  .tw-ring { animation:twVong 2.6s ease-out infinite; transform-box:fill-box; transform-origin:center; }
  @keyframes twVong { from { transform:scale(.4); opacity:.9; } to { transform:scale(1.6); opacity:0; } }
  .tw-blink { animation:aiNhay 1.4s ease-in-out infinite; }
  .tw-knock { animation:twNhay .8s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom center; }
  @keyframes twNhay { 0%,100% { transform:translateY(0); } 45% { transform:translateY(-10px); } }
  /* bảng việc cần làm */
  .tw-panel { background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.95)); border-radius:18px; border:1px solid var(--line); box-shadow:0 12px 34px rgba(15,30,58,.18); overflow:hidden; }
  .tw-ph { padding:14px 16px 12px; position:relative; border-bottom:1px solid var(--line); background:linear-gradient(135deg,rgba(21,101,216,.16),rgba(59,130,246,.10) 60%,transparent); }
  .tw-ph b { font-size:15px; display:block; color:#0B4FB3; } .tw-ph small { color:var(--mute); font-size:12px; }
  .tw-ph .n { position:absolute; right:14px; top:14px; min-width:28px; height:28px; border-radius:999px; background:#ef4444; color:#fff; font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center; padding:0 8px; box-shadow:0 0 14px rgba(239,68,68,.6); }
  .tw-items { padding:10px; display:flex; flex-direction:column; gap:8px; }
  #vinhTw .vinh { margin-bottom:12px; }
  .vinh { background:linear-gradient(135deg,rgba(250,204,21,.16),rgba(244,114,182,.12) 55%,rgba(21,101,216,.10)); border-color:rgba(250,204,21,.45); }
  .vinh-h { font-weight:800; font-size:15.5px; text-align:center; margin-bottom:10px; color:#8A5A00; }
  .vinh-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px; }
  .vinh-p { display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:10px 6px; border-radius:14px; background:rgba(255,255,255,.55); border:1px solid rgba(250,204,21,.25); }
  .vinh-p b { font-size:13.5px; line-height:1.25; } .vinh-p small { color:var(--mute); font-size:12px; }
  .vinh-av { width:62px; height:62px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:#E3ECF9; background:linear-gradient(135deg,#8A5A00,#f59e0b); box-shadow:0 0 0 3px rgba(250,204,21,.55),0 0 18px rgba(250,204,21,.35); margin-bottom:4px; }
  .vinh-av img { width:100%; height:100%; object-fit:cover; }
  @media (max-width:640px) { .vinh { padding:10px; } .vinh-h { font-size:13.5px; margin-bottom:8px; } .vinh-g { grid-template-columns:repeat(3,1fr); gap:6px; } .vinh-p { padding:7px 3px; }
    .vinh-av { width:42px; height:42px; font-size:17px; } .vinh-p b { font-size:12px; } .vinh-p small { font-size:10.5px; } .vinh .sub { display:none; } .vinh-tag { font-size:10px !important; padding:1px 5px !important; } }
  .vinh-tag { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(250,204,21,.18); color:#8A5A00; margin-top:2px; }
  .tw-it { display:flex; gap:10px; align-items:flex-start; width:100%; margin:0; text-align:left; background:rgba(255,255,255,.75); color:var(--ink); border:1px solid var(--line2); border-left:3px solid #2A7BEA; border-radius:12px; padding:10px 12px; font-size:14px; font-weight:700; }
  .tw-it:hover { border-color:rgba(21,101,216,.45); filter:none; background:rgba(255,255,255,.9); }
  .tw-it .ic { font-size:19px; line-height:1; margin-top:1px; flex:0 0 auto; } .tw-it > span:last-child { flex:1; } .tw-it small { display:block; font-weight:500; color:var(--mute); font-size:12.5px; margin-top:3px; line-height:1.35; }
  .tw-it.do { border-left-color:#ef4444; background:rgba(239,68,68,.10); } .tw-it.cam { border-left-color:#f59e0b; background:rgba(245,158,11,.08); } .tw-it.xanh { border-left-color:#22c55e; } .tw-it.tim { border-left-color:#a855f7; }
  .tw-it.sk { color:transparent; background:linear-gradient(90deg,#FFFFFF 25%,#EAF2FE 50%,#FFFFFF 75%); background-size:200% 100%; animation:twSkel 1.2s linear infinite; border-left-color:#C9DBF5; min-height:52px; }
  @keyframes twSkel { to { background-position:-200% 0; } }
  .tw-pf { padding:4px 16px 14px; font-size:12px; color:#6B7A92; }
  /* thẻ bên phải */
  .mini-h { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:14px; color:#0B4FB3; }
  .mini-h small { color:var(--mute); font-weight:500; font-size:12px; }
  .l7 { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:10px; }
  .l7 div { text-align:center; padding:7px 2px; border-radius:10px; background:rgba(148,163,184,.08); border:1px solid var(--line2); font-size:11px; color:var(--mute); line-height:1.25; }
  .l7 div b { display:block; font-size:13px; color:var(--ink); }
  .l7 div.ca { background:linear-gradient(160deg,rgba(21,101,216,.22),rgba(59,130,246,.2)); border-color:rgba(21,101,216,.45); color:#0B4FB3; }
  .l7 div.ng { background:rgba(148,163,184,.35); }
  .l7 div.nay { outline:2px solid var(--acc); outline-offset:1px; }
  .spark { display:block; width:100%; height:42px; margin-top:8px; }
  /* thẻ khu (điện thoại) */
  .tw-grid { display:block; margin-top:16px; }
  .tw-tile { position:relative; text-align:left; display:flex; align-items:center; gap:12px; padding:13px 14px; margin:0; border-radius:16px; color:var(--ink); font-weight:800; font-size:15px; border:1px solid var(--line);
    background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.95)); }
  .tw-tile .ti { width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:23px; background:linear-gradient(135deg,rgba(21,101,216,.35),rgba(59,130,246,.35)); border:1px solid rgba(21,101,216,.45); }
  .tw-tile > span:nth-child(2) { flex:1; }
  .tw-tile small { display:block; font-weight:500; color:var(--mute); font-size:12.5px; margin-top:2px; }
  .tw-tile.khoa { opacity:.5; }
  /* cửa sổ khu */
  .twm { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15,30,58,.45); opacity:0; pointer-events:none; transition:opacity .18s; }
  .twm.on { opacity:1; pointer-events:auto; }
  .twm-box { width:min(1200px,100%); max-height:calc(100vh - 48px); display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:#F4F8FE; border:1px solid rgba(21,101,216,.4); box-shadow:0 0 40px rgba(21,101,216,.18), 0 30px 80px rgba(15,30,58,.18); transform:translateY(14px) scale(.985); transition:transform .2s; }
  .twm.on .twm-box { transform:none; }
  .twm-hd { display:flex; align-items:center; gap:12px; padding:12px 16px; color:var(--ink); background:linear-gradient(120deg,#F2F7FF,#EAF2FE 60%,#EAF2FE); border-bottom:1px solid var(--line); }
  .twm-hd .ic { font-size:22px; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(21,101,216,.14); border:1px solid rgba(21,101,216,.5); }
  .twm-hd b { font-size:17px; flex:1; } .twm-hd small { display:block; font-weight:500; color:var(--mute); font-size:12.5px; }
  .twm-hd button { width:40px; height:40px; margin:0; padding:0; border-radius:12px; background:rgba(255,255,255,.06); color:#0B4FB3; font-size:19px; border:1px solid var(--line); }
  .twm-body { overflow:auto; padding:18px; -webkit-overflow-scrolling:touch; }
  /* V3.0: tính năng mở ở tab mới – khung khu hiện như 1 trang, không phải cửa sổ nổi */
  html.trang-rieng .twm { position:static; inset:auto; display:none; padding:0; background:none; opacity:1; transition:none; }
  html.trang-rieng .twm.on { display:block; }
  html.trang-rieng .twm-box { width:100%; max-height:none; border-radius:0; border:0; box-shadow:none; transform:none; transition:none; }
  html.trang-rieng .twm-body { overflow:visible; }
  html.trang-rieng.tw-mo main > :not(#twm) { display:none !important; }
  html.trang-rieng .twm-box { background:transparent; } html.trang-rieng .twm-hd { border-radius:16px; } html.trang-rieng .twm-body { padding:18px 0 0; }
  .twm-body > section { margin:0; }
  .twm-body .msg { margin:0 0 14px; }
  .tw-sec { margin:4px 0 10px; font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#0B4FB3; display:flex; align-items:center; gap:8px; }
  .tw-sec::after { content:''; flex:1; height:1px; background:var(--line); }
  .tw-hub { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-bottom:16px; }
  .tw-hub button { position:relative; margin:0; text-align:left; padding-right:36px !important; background:rgba(255,255,255,.95); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-size:15px; }
  .tw-hub button:hover { border-color:rgba(21,101,216,.6); box-shadow:0 0 18px rgba(21,101,216,.18); filter:none; }
  .tw-hub button span { display:block; font-size:12.5px; font-weight:500; color:var(--mute); margin-top:4px; }
  .tw-hub button .nb { position:absolute; right:10px; top:10px; }
  .tw-hub button.khoa { opacity:.5; }
  .tw-soon { text-align:center; padding:26px 10px; } .tw-soon .big2 { font-size:54px; }
  /* V2.24: hỏi đáp & xác nhận phiếu lương */
  .hl-ds { display:grid; gap:14px; margin-top:12px; }
  #hlSeg button { flex:1 1 30%; min-width:118px; } #hlSeg .nb { position:static; display:inline-block; margin-left:5px; vertical-align:middle; }
  .hl-op { display:grid; gap:6px; margin-top:10px; } .hl-op label { display:flex; align-items:center; gap:10px; margin:0; padding:9px 12px; border:1px solid var(--line2); border-radius:12px; font-size:14.5px; color:var(--ink); background:rgba(21,101,216,.04); cursor:pointer; }
  .hl-op label input { width:auto; margin:0; } .hl-op label:has(input:checked) { border-color:rgba(21,101,216,.6); background:rgba(21,101,216,.14); }
  .hl-bar { position:relative; margin-top:8px; height:26px; border-radius:8px; background:rgba(148,163,184,.12); overflow:hidden; }
  .hl-bar i { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,rgba(21,101,216,.45),rgba(59,130,246,.45)); }
  .hl-bar span { position:relative; display:block; padding:4px 10px; font-size:12.5px; color:#0B4FB3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hl-chip { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
  .hl-pdf { margin-top:10px; background:#fff; border-radius:10px; padding:6px; } .hl-pdf .sub, .hl-pdf .spin { color:#CBD5E1; } .hl-pdf canvas { display:block; margin:0 auto 6px; box-shadow:0 1px 4px rgba(15,30,58,.18); }
  .hl-xn { margin-top:10px; padding:10px 12px; border:1px solid rgba(21,101,216,.4); border-radius:12px; background:rgba(21,101,216,.06); }
  .hl-xn textarea { margin-top:8px; min-height:70px; }
  /* giao việc */
  .gv-loc { display:flex; gap:10px; margin:12px 0 4px; } .gv-loc > * { flex:1; }
  #gvList { display:grid; gap:14px; margin-top:12px; }
  .gv { background:rgba(255,255,255,.95); border:1px solid var(--line); border-radius:16px; padding:14px 16px; position:relative; }
  .gv.gap::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:#ef4444; box-shadow:0 0 8px #ef4444; }
  .gv .h { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .gv .td { font-size:16px; font-weight:800; margin-top:6px; } .gv .nd { font-size:14px; color:#42526E; margin-top:4px; white-space:pre-line; line-height:1.45; }
  .gv .mt { font-size:12.5px; color:var(--mute); margin-top:8px; line-height:1.45; }
  .gv .bc { margin-top:8px; padding:8px 10px; border-radius:10px; background:rgba(21,101,216,.08); font-size:13px; color:#0B4FB3; white-space:pre-line; }
  .gv .bc.yk { background:rgba(249,115,22,.1); color:#9A3412; }
  .gv .ac { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .gv .ac button { width:auto; flex:1 1 auto; margin:0; padding:9px 12px; font-size:14px; }
  .gv textarea { margin-top:8px; min-height:60px; font-size:15px; }
  .b-moi { background:rgba(59,130,246,.22); color:#0B4FB3; } .b-lam { background:rgba(21,101,216,.18); color:#0B4FB3; } .b-gap { background:rgba(239,68,68,.2); color:#B42318; } .b-qh { background:#ef4444; color:#fff; } .b-lai { background:rgba(249,115,22,.2); color:#C2410C; }
  .gv-ng { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:6px 10px; background:#FFFFFF; }
  .gv-ng .g { font-size:12px; font-weight:800; color:#0B4FB3; margin:8px 0 4px; display:flex; justify-content:space-between; align-items:center; }
  .gv-ng .g a { font-weight:600; color:var(--pri); cursor:pointer; }
  .gv-ng label { display:flex; align-items:center; gap:8px; margin:0; padding:6px 2px; font-size:14px; color:var(--ink); border-bottom:1px solid var(--line2); }
  .gv-ng label input { width:auto; margin:0; } .gv-ng label small { color:var(--mute); }
  .pos-go { display:inline-block; padding:14px 26px; border-radius:14px; background:linear-gradient(135deg,#1565D8,#2A7BEA); color:#FFFFFF; font-weight:800; text-decoration:none; box-shadow:0 0 22px rgba(21,101,216,.35); }
  @media (min-width: 900px) {
    .tw-shell { display:grid; grid-template-columns:300px minmax(0,1fr) 290px; gap:18px; align-items:start; }
    .tw-col.l { position:sticky; top:72px; max-height:calc(100vh - 86px); }
    .tw-panel { display:flex; flex-direction:column; min-height:0; flex:1; }
    .tw-tile { padding:11px 12px; font-size:14px; } .tw-tile .ti { width:40px; height:40px; flex-basis:40px; font-size:20px; }
    .tw-items { overflow:auto; }
    #gvList { grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); align-items:start; }
    #tGV > #gvForm { grid-column:2 / span 10; }
  }
  @media (min-width: 900px) and (max-width: 1520px) {
    .tw-shell { grid-template-columns:290px minmax(0,1fr); }
    .tw-col.r { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  }
  @media (max-width: 899px) {
    .tw-shell { display:flex; flex-direction:column; gap:12px; } .tw-col.l, .tw-mid { display:contents; }
    #hCard { order:1; } .tw-wrap { order:2; } #twGrid { order:3; } #twPanel { order:4; } .tw-col.r { order:5; display:flex; flex-direction:column; gap:12px; }
    #hCard, #twPanel, .tw-col.r .card { margin:0; }
    header h1 { font-size:13px; }
    .ai-on { font-size:10.5px; }
    .tw-wrap { border-radius:16px; box-shadow:0 8px 24px rgba(15,30,58,.18); }
    .tw-map { width:100%; }
    .tw-hint { display:none; }
    .tw-ai { left:8px; bottom:6px; padding:3px 8px; font-size:9.5px; gap:5px; } .tw-ai i { width:6px; height:6px; }
    .tw-zone { font-size:8px; letter-spacing:.2px; padding:2px 6px; gap:3px; box-shadow:0 0 8px rgba(37,99,235,.45); }
    .tw-lb { font-size:8.5px; padding:1px 5px; border-radius:6px; gap:2px; }
    .tw-lb .dv { display:none; }
    .tw-ov .nb { min-width:14px; height:14px; font-size:9px; padding:0 3px; }
    .bld:hover, .bld:focus { transform:none; filter:none; }
    .tw-col { margin-bottom:12px; }
    .tw-grid { margin-top:0; } .tw-grid .card { margin:0; }
    .twm { padding:0; align-items:flex-end; }
    .twm-box { max-height:94vh; border-radius:20px 20px 0 0; }
    .twm-body { padding:12px; }
  }
  @media (max-width: 420px) { header { padding-left:70px; } .home img { width:44px; height:44px; } .clock { font-size:20px; } }
  @media (prefers-reduced-motion: reduce) { .tw-pkt, .tw-ring, .tw-blink, .tw-knock, .ai-on i, .tw-ai i { animation:none !important; } .tw-pkt animateMotion { display:none; } }
  .sc-khung iframe { display:block; width:100%; height:calc(100vh - 240px); min-height:520px; border:1px solid var(--line); border-radius:16px; background:#F4F8FE; }
  .twm-body .sc-khung iframe { height:calc(100vh - 300px); }
  @media (max-width: 899px) { .sc-khung iframe { height:78vh; min-height:0; } .twm-body .sc-khung iframe { height:70vh; } }

  /* POS dự phòng: vòng xoay đồng bộ */
  .pos-xoay { position:relative; width:78px; height:78px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; }
  .pos-xoay i { position:absolute; inset:0; border-radius:50%; border:4px solid rgba(21,101,216,.18); border-top-color:#1565D8; border-right-color:#2A7BEA; animation:xoay .9s linear infinite; box-shadow:0 0 22px rgba(21,101,216,.25); }
  .pos-xoay b { font-size:30px; }
  .pos-sync > b { color:#0B4FB3; }

  /* ===== MENU DỌC BÊN TRÁI (gom theo khu) ===== */
  nav { position:fixed; left:0; top:0; bottom:0; z-index:45; width:244px; display:flex; flex-direction:column; gap:2px; padding:10px 10px 16px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#C9DBF5 transparent;
    background:linear-gradient(180deg,#F6F9FE,#F4F8FE); border-right:1px solid var(--line); box-shadow:6px 0 24px rgba(15,30,58,.18); }
  .nv-top { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 10px; font-size:11px; font-weight:900; letter-spacing:2px; color:#6B7A92; }
  .nv-x { cursor:pointer; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#0B4FB3; border:1px solid var(--line); }
  .nv-x:hover { background:rgba(21,101,216,.1); }
  nav button, .ng-h, .ng-pos, .mi { position:relative; display:flex; align-items:center; gap:10px; width:100%; margin:0; padding:9px 11px; border-radius:10px; border:1px solid transparent; background:none; color:#42526E;
    font-size:14px; font-weight:600; text-align:left; white-space:nowrap; cursor:pointer; box-shadow:none; }
  nav button:hover, .ng-h:hover, .ng-pos:hover, .mi:hover { color:#fff; background:rgba(21,101,216,.08); filter:none; }
  nav button.on, .mi.on { color:#fff; border-color:rgba(21,101,216,.5); background:linear-gradient(135deg,rgba(21,101,216,.28),rgba(59,130,246,.30)); box-shadow:0 0 14px rgba(21,101,216,.2); }
  nav .ni { font-size:17px; line-height:1; width:22px; text-align:center; flex:0 0 22px; }
  nav .nl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  nav .nb { margin-left:auto; }
  .ng-h { color:#0F1E3A; font-weight:700; }
  .ng-c { font-size:18px; line-height:1; color:#6B7A92; transition:transform .18s; margin-left:4px; }
  .ng.mo .ng-c { transform:rotate(90deg); }
  .ng-n:empty { display:none; }
  .ng.mo .ng-n { display:none; }
  .ng-b { display:none; padding:2px 0 6px; }
  .ng.mo .ng-b { display:block; }
  .ng-b button, .ng-b .ng-pos, .ng-b .mi { padding:8px 11px 8px 22px; font-size:13.5px; font-weight:500; }
  .ng-b .ni { font-size:15px; }
  .ng.co-on > .ng-h { color:#0B4FB3; }
  .ng.hide { display:none; }
  .xlcap { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 6px; } .xlcap span { padding:6px 11px; border-radius:999px; font-size:13px; font-weight:700; border:1px solid var(--line); color:#42526E; }
  .xlcap span.ok { border-color:rgba(34,197,94,.6); background:rgba(34,197,94,.15); color:#167A3E; } .xlcap span.tam { border-color:rgba(234,179,8,.5); color:#8A5A00; }
  /* V2.0: mục menu không có quyền vẫn hiện (mờ, có ổ khoá); bấm vào → màn hình "Bạn không có quyền truy cập tính năng này" */
  .mi.khoa { color:#6b7a92; } .mi.khoa .ni { opacity:.55; } .mi .mk { margin-left:auto; font-size:11px; opacity:.7; }
  body.nav-thu .mi .mk { display:none; }
  .kq-box { text-align:center; padding:46px 18px; } .kq-box .big2 { font-size:54px; line-height:1; margin-bottom:14px; }
  .kq-box b { display:block; font-size:18px; color:#B42318; margin-bottom:8px; }
  /* V2.0: Danh sách nhân sự */
  .ds-loc { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:10px; }
  .ds-loc select, .ds-loc input { margin:0; }
  .ds-tk { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .ds-tk span { padding:6px 10px; border-radius:999px; border:1px solid var(--line); font-size:13px; cursor:pointer; }
  .ds-tk span.on { border-color:#1565D8; background:rgba(21,101,216,.15); color:#fff; }
  .ds-wrap { overflow-x:auto; margin-top:12px; -webkit-overflow-scrolling:touch; }
  table.ds-t { width:100%; border-collapse:collapse; font-size:13px; min-width:980px; }
  table.ds-t th, table.ds-t td { padding:7px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
  table.ds-t th { position:sticky; top:0; background:#F6F9FE; color:#0B4FB3; font-weight:700; white-space:nowrap; }
  table.ds-t td:nth-child(2) { min-width:180px; } table.ds-t td.so { text-align:right; white-space:nowrap; } table.ds-t td.ng { white-space:nowrap; }
  table.ds-t tr.nghi td { opacity:.55; }
  .hd-b { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
  .hd-ct { background:rgba(34,197,94,.18); color:#167A3E; } .hd-tv { background:rgba(234,179,8,.18); color:#8A5A00; }
  .hd-hv { background:rgba(59,130,246,.2); color:#0B4FB3; } .hd-x { background:rgba(148,163,184,.2); color:#42526E; }
  .ds-kt { color:#C2410C; font-size:12px; margin-top:3px; } .ds-kt div::before { content:'⚠ '; }
  .ds-sap { color:#0B4FB3; font-size:12px; margin-top:3px; }
  .mnu { display:none; }
  .nv-bg { display:none; }
  body.co-nav header, body.co-nav main { margin-left:244px; }
  body.nav-thu nav { width:64px; padding:10px 8px; }
  body.nav-thu nav .nl, body.nav-thu .ng-c, body.nav-thu .nv-top > span:first-child { display:none; }
  body.nav-thu .nv-top { justify-content:center; } body.nav-thu .nv-x { transform:rotate(180deg); }
  body.nav-thu nav button, body.nav-thu .ng-h, body.nav-thu .ng-pos, body.nav-thu .mi { justify-content:center; padding:10px 0; }
  body.nav-thu .ng-b button, body.nav-thu .ng-b .ng-pos, body.nav-thu .ng-b .mi { padding:8px 0; }
  body.nav-thu nav .nb, body.nav-thu .ng-n { position:absolute; right:2px; top:2px; min-width:16px; height:16px; font-size:9.5px; padding:0 3px; }
  body.nav-thu .ng.mo .ng-n { display:none; }
  body.nav-thu.co-nav header, body.nav-thu.co-nav main { margin-left:64px; }
  @media (max-width: 899px) {
    nav { width:min(290px,84vw); transform:translateX(-105%); transition:transform .22s ease; box-shadow:none; }
    body.nav-mo nav { transform:none; box-shadow:12px 0 40px rgba(15,30,58,.18); }
    body.co-nav header, body.co-nav main { margin-left:0; }
    .nv-x { display:none; }
    body.co-nav .mnu { display:flex; flex-direction:column; justify-content:center; gap:4px; flex:0 0 40px; width:40px; height:40px; margin:0 0 0 2px; padding:0 10px; border-radius:12px; border:1px solid rgba(21,101,216,.5); background:rgba(21,101,216,.1); }
    .mnu i { display:block; height:2px; border-radius:2px; background:#0B4FB3; }
    body.nav-mo .nv-bg { display:block; position:fixed; inset:0; z-index:44; background:rgba(15,30,58,.18); }
    body.nav-thu nav { width:min(290px,84vw); padding:10px 10px 16px; }
    body.nav-thu nav .nl, body.nav-thu .ng-c { display:inline; }
    body.nav-thu nav button, body.nav-thu .ng-h, body.nav-thu .ng-pos, body.nav-thu .mi { justify-content:flex-start; padding:9px 11px; }
  }
  /* mật khẩu, ghi nhớ đăng nhập, ảnh đại diện, cửa hàng hôm nay */
  .mk-o { position:relative; } .mk-o input { padding-right:54px; }
  .mk-o .mk-xem { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:auto; margin:0; padding:6px 9px; font-size:12.5px; border-radius:8px; background:rgba(21,101,216,.12); color:var(--pri); border:1px solid var(--line); }
  .ck { display:flex; align-items:flex-start; gap:10px; margin:12px 0 0; color:var(--ink); font-size:14.5px; cursor:pointer; }
  .ck input { width:20px; height:20px; flex:0 0 20px; margin:1px 0 0; padding:0; accent-color:#1565D8; }
  .ck small { display:block; color:var(--mute); font-size:12.5px; margin-top:2px; }
  .mk-dk { list-style:none; padding:0; margin:8px 0 0; font-size:13px; color:var(--mute); display:grid; gap:3px; }
  .mk-dk li::before { content:'○ '; } .mk-dk li.dat { color:#16A34A; } .mk-dk li.dat::before { content:'✓ '; }
  #tDoiMK { max-width:560px; margin:0 auto; }
  .av { width:64px; height:64px; flex:0 0 64px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:#FFFFFF;
    background:linear-gradient(135deg,#1565D8,#2A7BEA); border:2px solid rgba(21,101,216,.6); box-shadow:0 0 14px rgba(21,101,216,.25); }
  .av img { width:100%; height:100%; object-fit:cover; display:block; }
  .av-bam { position:relative; flex:0 0 auto; cursor:pointer; border-radius:50%; }
  .av-bam:hover .av, .av-bam:focus-visible .av { border-color:#1565D8; box-shadow:0 0 0 3px rgba(21,101,216,.35), 0 0 18px rgba(21,101,216,.45); }
  .av-bam:focus { outline:none; }
  .av-cam { position:absolute; right:-3px; bottom:-3px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:12px; background:#EAF2FE; border:1.5px solid rgba(21,101,216,.7); box-shadow:0 2px 6px rgba(15,30,58,.18); pointer-events:none; }
  .av-nguon { margin-top:8px; font-size:12.5px; }
  .av.lon { width:110px; height:110px; flex-basis:110px; font-size:40px; }
  /* V1.66 hồ sơ dạng thẻ avatar */
  .hs-dong { display:flex; align-items:center; gap:10px; } .hs-dong .who { flex:1; min-width:0; }
  .hs-dong button { width:auto; margin:0; padding:8px 14px; font-size:14px; }
  .hs-nhom-t { font-weight:800; font-size:16px; color:#0B4FB3; margin-bottom:12px; } .hs-nhom-t .sub { display:inline; font-weight:500; }
  .hs-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .hs-the { margin:0; padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; background:rgba(255,255,255,.95); color:var(--ink);
    border:1px solid var(--line); border-radius:14px; font-weight:500; font-size:13px; }
  .hs-the:not(:disabled):hover, .hs-the:focus-visible { border-color:#1565D8; box-shadow:0 0 0 2px rgba(21,101,216,.3); filter:none; outline:none; }
  .hs-the .av { width:72px; height:72px; flex:0 0 auto; font-size:26px; margin-bottom:6px; }
  .hs-the-ten { font-weight:700; font-size:14.5px; line-height:1.3; } .hs-the-cv { color:#0B4FB3; font-size:12.5px; } .hs-the-tt { color:var(--mute); font-size:12.5px; }
  .hs-dau { display:flex; align-items:center; gap:16px; } .hs-dau .av.lon { width:96px; height:96px; flex-basis:96px; font-size:34px; }
  #hsBody.hs-ds { display:block; } #hsBody.hs-ds > .card { margin:0 0 14px; }
  @media (max-width: 520px) { .hs-luoi { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .hs-the .av { width:60px; height:60px; font-size:22px; } }
  .hc-top { display:flex; align-items:center; gap:12px; } .hc-top .av { width:52px; height:52px; flex-basis:52px; font-size:20px; }
  .av-hang { display:flex; align-items:center; gap:16px; margin-top:10px; } .av-hang .nut { flex:1; } .av-hang .nut button { margin-top:8px; }
  .ch-nay { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
  .ch-o { text-align:left; margin:0; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.95); color:var(--ink); border:1px solid var(--line); font-weight:700; font-size:14.5px; }
  .ch-o b { display:block; font-size:24px; color:#0B4FB3; margin-top:4px; } .ch-o small { display:block; color:var(--mute); font-weight:500; font-size:12.5px; margin-top:2px; line-height:1.4; }
  .ch-o.toi { border-color:rgba(255,162,0,.6); } .ch-o .ngan { display:none; }
  .ch-nv { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px; } .ch-ng { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; }
  .ch-ng .av { width:32px; height:32px; flex:0 0 32px; font-size:13px; border-width:1.5px; box-shadow:none; }
  .ch-ten { font-weight:500; font-size:12.5px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width: 899px) { .ch-nay { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .ch-o { padding:10px; font-size:13px; } .ch-o .dai { display:none; } .ch-o .ngan { display:inline; } .ch-o b { font-size:20px; } .ch-o small { font-size:11.5px; } .ch-nv { gap:4px; } .ch-ng .av { width:28px; height:28px; flex-basis:28px; font-size:12px; } .ch-ten { display:none; } }
  /* bảng giao ca giống sheet "Giao ca" */
  .gcbw { max-height:70vh; overflow:auto; }
  table.gcb { border-collapse:collapse; font-size:12px; min-width:1400px; }
  .nhay { border:1px solid #f59e0b; background:rgba(245,158,11,.08); border-radius:10px; padding:8px 10px; margin:6px 0 8px; font-size:13px; }
  .nhay .nhd { cursor:pointer; font-weight:700; color:#B45309; } .nhay .nhm { border-top:1px dashed var(--line2); margin-top:8px; padding-top:8px; }
  table.gcb th { background:#F2F7FF; color:var(--mute); font-size:11px; padding:6px 5px; text-align:right; position:sticky; top:0; z-index:2; border:1px solid var(--line2); white-space:normal; min-width:62px; }
  table.gcb thead tr:nth-child(2) th { top:27px; } table.gcb th.nh { text-align:center; color:#0B4FB3; }
  table.gcb td { padding:6px 5px; border-bottom:1px solid var(--line2); text-align:right; white-space:nowrap; cursor:pointer; }
  table.gcb td.l, table.gcb th.l { text-align:left; } table.gcb td:first-child, table.gcb th:first-child { position:sticky; left:0; background:var(--bg); z-index:1; }
  table.gcb thead th:first-child { z-index:3; background:#F2F7FF; }
  table.gcb tr.th td { background:rgba(239,68,68,.13); } table.gcb tr.du td { background:rgba(245,158,11,.10); } table.gcb tr.mo td { box-shadow:inset 0 2px 0 rgba(21,101,216,.5); }
  table.gcb tr.me td { font-weight:600; } table.gcb td.kh { color:#6D28D9; font-weight:700; } table.gcb td.nvl { color:#C2410C; font-weight:800; }
  /* V2.9: cột Ngày + Ca cố định khi kéo ngang – nền ĐẶC (màu dòng thiếu / dư phủ lên nền tối) để các cột khác không lộ qua chữ */
  table.gcb tbody td:first-child, table.gcb thead tr:first-child th:first-child { min-width:52px; max-width:52px; width:52px; }
  table.gcb tbody tr:not(.ct) td:nth-child(2), table.gcb thead tr:first-child th:nth-child(2) { position:sticky; left:52px; min-width:30px; max-width:30px; width:30px; z-index:1; background:var(--bg); box-shadow:inset -1px 0 0 var(--line), 4px 0 6px -3px rgba(15,30,58,.18); }
  table.gcb thead tr:first-child th:first-child, table.gcb thead tr:first-child th:nth-child(2) { z-index:5; background:#F2F7FF; }
  table.gcb tbody td:first-child, table.gcb tbody td:nth-child(2) { background-color:var(--bg); }
  table.gcb tbody tr.th td:first-child, table.gcb tbody tr.th td:nth-child(2) { background:linear-gradient(rgba(239,68,68,.13), rgba(239,68,68,.13)), var(--bg); }
  table.gcb tbody tr.du td:first-child, table.gcb tbody tr.du td:nth-child(2) { background:linear-gradient(rgba(245,158,11,.10), rgba(245,158,11,.10)), var(--bg); }
  table.gcb tfoot td:first-child { background:#F2F7FF; z-index:1; white-space:nowrap; }
  table.gcb tr.ct td { cursor:default; white-space:normal; text-align:left; background:rgba(255,255,255,.85); }
  table.gcb tr.ct td:first-child { position:static; } .gcct { position:sticky; left:6px; max-width:min(1100px, calc(100vw - 80px)); }
  #gcV2 > .card { margin:0; } .sgh { font-weight:700; margin:12px 0 4px; color:var(--ink); }
  table.gcb tfoot td { font-weight:800; border-top:2px solid var(--line); background:#F2F7FF; }
  .sgloc { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:8px 0; }
  .sgloc label { font-size:12px; color:var(--mute); margin:0 0 3px; display:block; } .sgloc input, .sgloc select { padding:8px; font-size:14px; }
  .sgloc .sgchk { display:flex; align-items:center; gap:6px; color:var(--ink); font-size:13px; } .sgloc .sgchk input { width:auto; }
  .sgloai button.ghep { border-style:dashed; }
  .sgsub { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
  .sgsub button { width:auto; margin:0; padding:6px 11px; border-radius:999px; border:1px solid var(--line2); background:transparent; color:var(--mute); font-size:12.5px; font-weight:600; }
  .sgsub button b { color:var(--ink); margin-left:4px; } .sgsub button.co b { color:#B45309; }
  .sgsub button.on { background:linear-gradient(135deg,rgba(21,101,216,.25),rgba(59,130,246,.28)); border-color:rgba(21,101,216,.6); color:#0B4FB3; }
  .gdon { margin:6px 0; padding:8px 10px; border-radius:10px; background:rgba(21,101,216,.06); border:1px solid rgba(21,101,216,.18); font-size:13px; }
  nav button#nSG { display:none !important; }   /* V2.0: mọi nút gốc nằm trong #navGoc (ẩn) */
  #tGC > #tSG { margin-top:0; }
  .sgloc-ca { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 8px; padding:8px 10px; border-radius:12px; background:rgba(21,101,216,.08); border:1px solid rgba(21,101,216,.25); font-size:13.5px; }
  .sgloc-ca button { width:auto; padding:5px 10px; font-size:12.5px; }
  .sgghep { margin:8px 0 2px; padding:8px 10px; border-radius:12px; background:rgba(148,163,184,.07); border:1px solid rgba(148,163,184,.22); font-size:13px; }
  .sgghep .gdon { margin:4px 0; padding:6px 9px; }
  .sgghep .kq { margin-top:6px; line-height:1.5; }
  .gdon .kb { display:inline-block; margin:6px 6px 0 0; padding:6px 10px; font-size:12.5px; }
  .gact { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .gact button { width:auto; padding:8px 12px; font-size:13.5px; }
  /* V2.16: thông báo việc được giao chưa hoàn thành khi đăng nhập */
  .gvpop { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,30,58,.45); }
  .gvpop .hop { width:100%; max-width:520px; max-height:86vh; display:flex; flex-direction:column; background:var(--card); border:1px solid rgba(21,101,216,.45); border-radius:18px; box-shadow:0 18px 60px rgba(15,30,58,.18); overflow:hidden; }
  .gvpop .dau { padding:16px 18px 10px; } .gvpop .dau > b { font-size:18px; color:var(--ink); display:block; margin-bottom:4px; } .gvpop .dau small { color:var(--mute); font-size:13px; } .gvpop .dau small b { color:var(--ink); }
  .gvpop .ds { overflow:auto; padding:0 18px; }
  .gvpop .vi { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; margin:8px 0; border-radius:12px; border:1px solid var(--line2); background:rgba(255,255,255,.7); }
  .gvpop .vi.qh { border-color:rgba(248,113,113,.6); background:rgba(127,29,29,.25); } .gvpop .vi.gap { border-color:rgba(251,191,36,.55); }
  .gvpop .vi .tt { font-weight:700; color:var(--ink); font-size:14.5px; } .gvpop .vi .mt { font-size:12.5px; color:var(--mute); margin-top:2px; }
  .gvpop .vi .nhan { flex:none; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(21,101,216,.15); color:#0B4FB3; }
  .gvpop .vi.qh .nhan { background:rgba(248,113,113,.2); color:#B42318; } .gvpop .vi.gap .nhan { background:rgba(251,191,36,.18); color:#8A5A00; }
  .gvpop .cuoi { display:flex; gap:10px; padding:12px 18px 16px; } .gvpop .cuoi button { margin:0; }
  /* ===== V2.16: Kiểm tra & sửa giao ca trên MÁY TÍNH – thẻ gọn, xem được nhiều giao dịch hơn (điện thoại giữ nguyên) ===== */
  .sginfo { display:none; }
  @media (min-width: 900px) {
    .sginfo { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:6px; border-radius:50%; border:1px solid var(--line); color:var(--pri); font-size:13px; cursor:pointer; vertical-align:middle; }
    #tSG:not(.sg-info) > .card:first-child > .sub { display:none; }
    #tSG > .card:first-child { padding-top:12px; padding-bottom:12px; }
    .sgloai { gap:6px; }
    .sgloai button { padding:7px 10px; font-size:12px; line-height:1.3; }
    .sgloai button b { font-size:15px; }
    .sgsub { margin:6px 0 0; } .sgsub button { padding:4px 10px; font-size:12px; }
    .sgloc { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:6px; margin:6px 0; } .sgloc input, .sgloc select { padding:6px 8px; font-size:13px; }
    #sgP1 > .row { max-width:460px; padding:0; background:none; border:0; margin-top:6px; } #sgP1 > .row input { padding:8px 12px; font-size:14px; }
    #sgSum, #sgSum2 { font-size:12.5px; margin:8px 2px 0 !important; line-height:1.45; }
    #sgList, #sgList2, #sgList3 { grid-template-columns:repeat(auto-fill, minmax(265px,1fr)); gap:10px; margin-top:8px; }
    .sg:not(:focus-within) input.ma:placeholder-shown ~ textarea.gc { display:none; }   /* ô ghi chú hiện khi bắt đầu nhập mã đơn */
    .sg { padding:10px 12px 10px 14px; border-radius:12px; font-size:13px; }
    .sg:hover { transform:none; }
    .sg::before { top:10px; bottom:10px; }
    .sg .t1 { font-size:12px; gap:6px; } .sg .t1 .badge { font-size:11px; padding:1px 7px; }
    .sg .tien { font-size:17px; line-height:1.25; margin-top:2px; }
    .sg .ct { font-size:12px; margin-top:2px; line-height:1.4; }
    .sg .sub { font-size:12px; line-height:1.4; }
    .sg .chip { font-size:11.5px; padding:3px 8px; margin:4px 4px 0 0; }
    .sgkl { gap:4px; margin-top:6px; } .sgkl button { padding:4px 8px; font-size:11.5px; }
    .sg input.ma, .sg input.gma, .sg input.tx { margin-top:6px; padding:7px 10px; font-size:13px; }
    .sg textarea.gc, .sg textarea.gghi { margin-top:6px !important; min-height:34px !important; height:34px; padding:7px 10px; font-size:12.5px !important; }
    .sg textarea.gc:focus, .sg textarea.gghi:focus { height:60px; }
    .sgk { font-size:11.5px; margin-top:4px; }
    .sgghep { margin:6px 0 2px; padding:6px 8px; font-size:12px; border-radius:10px; } .sgghep .gdon { margin:3px 0; padding:4px 7px; } .sgghep .kq { margin-top:4px; line-height:1.4; }
    .sg .gdon { font-size:12px; }
    .sg .note { font-size:12px; padding:6px 8px; margin-top:6px; }
    .sg .gact { gap:6px; margin-top:6px; } .sg .gact button, .sg .row button { padding:7px 8px !important; font-size:12.5px !important; }
    .sgbar { padding:10px 0 6px; }
  }
  /* V2.40: KPI của tôi (Phiếu lương của tôi) – tông xanh dương */
  .kt { border:1px solid rgba(59,130,246,.45); border-radius:16px; background:linear-gradient(160deg,rgba(30,64,175,.28),rgba(255,255,255,.9) 60%); padding:14px; margin-bottom:12px; }
  .kt-h { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
  .kt-h b { font-size:16px; color:#0B4FB3; } .kt-h select { width:auto; margin:0; padding:6px 10px; font-size:13px; }
  .kt-toi { margin-top:10px; padding:12px; border-radius:14px; background:linear-gradient(135deg,#1d4ed8,#2563eb 55%,#0ea5e9); color:#fff; }
  .kt-toi .so { font-size:28px; font-weight:800; letter-spacing:.3px; line-height:1.2; } .kt-toi small { opacity:.85; font-size:12px; }
  .kt-toi .gi { margin-top:8px; font-size:13px; line-height:1.5; background:rgba(255,255,255,.14); border-radius:10px; padding:8px 10px; }
  .kt-sec { margin-top:12px; border:1px solid rgba(59,130,246,.35); border-radius:14px; overflow:hidden; background:var(--card); }
  .kt-sec > .t { background:#1e40af; color:#fff; font-weight:700; padding:9px 12px; font-size:14px; display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap; cursor:pointer; list-style:none; user-select:none; }
  .kt-sec > .t::-webkit-details-marker { display:none; } .kt-sec > .t > span::before { content:'▸ '; display:inline-block; transition:transform .15s; } .kt-sec[open] > .t > span::before { transform:rotate(90deg); }
  .kt-sec .kt-sec { margin-top:8px; } .kt-sec .kt-sec > .t { background:#1d4ed8; font-size:13px; padding:7px 10px; } .kt-cn > .t { background:#0b3d91 !important; }
  .kt-nut { display:flex; gap:6px; justify-content:flex-end; margin-top:10px; } .kt-nut button { width:auto; margin:0; padding:5px 10px; font-size:12px; }
  .kt-sec > .t small { font-weight:500; opacity:.85; } .kt-sec > .b { padding:10px 12px; }
  .kt-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
  .kt-g > div { background:var(--card2); border:1px solid var(--line2); border-radius:10px; padding:7px 9px; } .kt-g span { display:block; font-size:11.5px; color:var(--mute); }
  .kt-g b { font-size:15px; } .kt-g .nh { border-color:#2A7BEA; background:rgba(59,130,246,.16); } .kt-g .nh b { color:#0B4FB3; }
  .kt-ct { font-size:12px; color:var(--mute); margin:8px 0 0; line-height:1.5; font-style:italic; }
  .kt-bar { position:relative; height:10px; border-radius:6px; background:rgba(148,163,184,.2); margin:10px 0 4px; overflow:hidden; } .kt-bar i { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#2A7BEA,#1565D8); border-radius:6px; }
  .kt-t { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; } .kt-t th { background:rgba(59,130,246,.2); color:#0B4FB3; font-weight:600; padding:6px 5px; text-align:right; white-space:nowrap; }
  .kt-t td { padding:6px 4px; border-bottom:1px solid var(--line2); text-align:right; white-space:nowrap; } .kt-t th:first-child, .kt-t td:first-child { text-align:left; white-space:normal; min-width:84px; } .kt-t small { font-weight:500; opacity:.8; font-size:11px; }
  .kt-t tr.toi td { background:rgba(59,130,246,.18); font-weight:700; } .kt-t tr.dat td { background:#1d4ed8; color:#fff; font-weight:700; } .kt-t td.kp { color:#0B4FB3; font-weight:700; }
  .kt-tw { overflow-x:auto; } .kt-giai { margin-top:8px; } .kt-giai summary { cursor:pointer; color:#0B4FB3; font-size:13px; }
  .kt-giai p { margin:6px 0; font-size:12.5px; line-height:1.5; padding:6px 8px; border-left:3px solid #2A7BEA; background:var(--card2); border-radius:0 8px 8px 0; } .kt-giai p b { color:#0B4FB3; }
  .kt-qt { font-size:12px; color:var(--mute); line-height:1.55; margin-top:8px; }

  /* ===== V3.0: giao diện sáng "Biển Mỹ Khê" – nền trắng chủ đạo, khung xanh dương bao quanh, nhấn vàng GoPi ===== */
  :root { --bg:#F4F8FE; --bg2:#EAF2FE; --card:#FFFFFF; --card2:#F6F9FE; --ink:#0F1E3A; --mute:#5B6B85; --pri:#1565D8; --pri2:#0B4FB3; --acc:#FFAE00;
          --line:#D6E4F8; --line2:#E6EEFA; --khung:#0B3D91; --glow:0 1px 2px rgba(15,30,58,.05), 0 14px 32px -18px rgba(11,61,145,.40); color-scheme:light; }
  html { background:var(--khung); }
  body { font-family:"Be Vietnam Pro","Segoe UI",-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--khung); }
  a { color:var(--pri); }
  ::-webkit-scrollbar-thumb { background:#C9DBF5; } ::-webkit-scrollbar-thumb:hover { background:#9DBBEA; }

  /* thanh trên cùng: nằm trên khung xanh */
  header { background:transparent; border-bottom:0; box-shadow:none; color:#fff; }
  header::after { display:none; }
  header h1 { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#fff; letter-spacing:.2px; }
  .ai-on { color:#D6E5FB; } .ai-on i { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25); }
  .clock { color:#fff; text-shadow:none; } .date { color:#B9CEF2; }
  .home { color:#fff; } .home img { box-shadow:0 0 0 3px rgba(255,255,255,.18), 0 8px 20px rgba(0,0,0,.30); }
  .mnu i { background:#fff; }
  body.co-nav .mnu { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); }

  /* vùng nội dung: tấm trắng nổi trên khung xanh */
  main { background:#fff; border-radius:24px; margin:0 auto 14px; box-shadow:0 30px 70px -24px rgba(2,16,52,.55), inset 0 0 0 1px rgba(21,101,216,.08); }
  @media (max-width: 520px) { main { margin:0 8px 10px; border-radius:20px; } }
  @media (min-width: 900px) {
    body.co-nav main { margin:0 14px 14px 258px; }
    body.nav-thu.co-nav main { margin-left:78px; }
  }
  .copy { color:#B9CEF2; }

  /* thẻ, ô nhập, nút */
  .card { background:#fff; border:1px solid #E1EAF7; border-radius:18px; box-shadow:var(--glow); }
  select, input, textarea { background:#fff; border:1px solid #CFDCF0; color:var(--ink); }
  select option { background:#fff; color:var(--ink); }
  input::placeholder, textarea::placeholder { color:#8A97AD; }
  select:focus, input:focus, textarea:focus { border-color:var(--pri); box-shadow:0 0 0 4px rgba(21,101,216,.14); }
  button { color:#fff; background:#1565D8; box-shadow:0 10px 22px -12px rgba(21,101,216,.75); }
  button:not(:disabled):hover { filter:none; background:#0B4FB3; }
  table.bc td.nm, table.bc th.nm { background:#fff; }
  table.bc th.td { background:var(--pri); color:#fff; }

  /* ===== menu trái gọn: chỉ hiện nhóm chính, bấm nhóm mới mở menu phụ (mở nhóm này thì nhóm khác tự đóng) ===== */
  nav { background:var(--khung); border-right:0; box-shadow:none; scrollbar-color:rgba(255,255,255,.25) transparent; }
  .nv-top { color:#A9C3EE; } .nv-x { color:#fff; border-color:rgba(255,255,255,.25); } .nv-x:hover { background:rgba(255,255,255,.1); }
  nav button, .ng-h, .ng-pos, .mi { color:#DCE8FB; min-height:44px; border-radius:12px; }
  nav button:hover, .ng-h:hover, .ng-pos:hover, .mi:hover { color:#fff; background:rgba(255,255,255,.08); }
  .ng { margin-bottom:2px; }
  .ng-h { color:#fff; font-weight:700; }
  .ng-c { color:#B9CEF2; }
  .ng.mo > .ng-h { background:rgba(255,255,255,.10); }
  .ng.co-on > .ng-h, .mi.top.on { color:#0B3D91; background:#fff; border-color:transparent; box-shadow:0 8px 20px -8px rgba(0,0,0,.45); }
  .ng.co-on > .ng-h .ng-c { color:#0B3D91; }
  .ng-n.nb { background:#FFAE00; color:#3A1802; box-shadow:none; }
  .ng-b { margin:4px 0 8px 22px; padding:0 0 0 12px; border-left:1.5px solid rgba(255,255,255,.22); }
  .ng-b button, .ng-b .ng-pos, .ng-b .mi { min-height:38px; padding:7px 10px; font-size:13.5px; font-weight:500; color:#C7D9F7; border-radius:9px; }
  body:not(.nav-thu) .ng-b .ni { display:none; }
  .mi.on, nav button.on { color:#fff; background:rgba(255,255,255,.16); border-color:transparent; box-shadow:none; font-weight:700; }
  .mi.khoa { color:#8FA9D6; }
  body.nav-thu .ng-b { margin:2px 0 6px; padding:0; border-left:0; }
  @media (max-width: 899px) {
    body.nav-mo nav { box-shadow:12px 0 40px rgba(0,0,0,.45); }
    body.nav-mo .nv-bg { background:rgba(15,30,58,.45); }
    body:not(.nav-thu) .ng-b .ni, body.nav-thu .ng-b .ni { display:none; }
    body.nav-thu .ng-b { margin:4px 0 8px 22px; padding:0 0 0 12px; border-left:1.5px solid rgba(255,255,255,.22); }
  }

  /* ===== đăng nhập: khối giới thiệu thương hiệu ===== */
  .lg-hero { position:relative; overflow:hidden; border-radius:20px; padding:26px 24px; margin-bottom:14px; color:#fff; background:#0E4DB0; }
  .lg-hero::before { content:''; position:absolute; left:-120px; bottom:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(76,155,255,.55), rgba(76,155,255,0) 68%); }
  .lg-hero::after { content:''; position:absolute; right:-80px; top:-100px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(255,194,51,.28), rgba(255,194,51,0) 70%); }
  .lg-hero > * { position:relative; }
  .lg-hero .lg-tag { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-size:12px; font-weight:600; }
  .lg-hero .lg-tag i { width:8px; height:8px; border-radius:50%; background:#FFC233; }
  .lg-hero h2 { margin:14px 0 8px; font-size:26px; line-height:1.2; font-weight:800; letter-spacing:-.02em; }
  .lg-hero p { margin:0; font-size:14.5px; line-height:1.6; color:#D6E5FB; }
  .lg-hero small { display:block; margin-top:18px; font-size:12px; color:#CFE0FA; }
  @media (min-width: 900px) {
    #tLogin { grid-template-columns:minmax(0,560px) minmax(0,440px); grid-template-rows:auto 1fr; justify-content:center; }
    #tLogin > .lg-hero { grid-column:1; grid-row:1 / span 2; margin:0; padding:40px; display:flex; flex-direction:column; justify-content:center; min-height:420px; }
    #tLogin > .lg-hero h2 { font-size:36px; }
    #tLogin > .card { grid-column:2; }
  }
  .lg-hero .lg-tag { align-self:flex-start; }
  @media (max-width: 599px) { #tLogin > .lg-hero { display:none; } }
  nav .ni svg { width:20px; height:20px; display:block; margin:auto; }
  @media (min-width: 900px) {
    nav { width:262px; }
    body.co-nav header { margin-left:262px; }
    body.co-nav main { margin-left:276px; }
    body.nav-thu nav { width:64px; }
    body.nav-thu.co-nav header { margin-left:64px; }
    body.nav-thu.co-nav main { margin-left:78px; }
  }
  @media (min-width: 900px) { main { min-height:calc(100vh - 120px); } }

  /* ===== V3.0 GOPI-Biz.Smart – bản sắc Đà Nẵng (Cầu Rồng, mái hiên siêu thị, ánh sáng) ===== */
/* ===== Bản sắc Đà Nẵng + phong cách siêu thị (phác thảo) ===== */
:root{--dn-xanh:#0B3D91;--dn-bien:#1565D8;--dn-vang:#FFAE00;--dn-do:#E53935}
/* Mái hiên siêu thị sọc vàng – trắng, mép lượn, ngay dưới thanh tiêu đề */
/* Thanh menu trái: nền xanh sông Hàn, bức vẽ Cầu Rồng chìm dưới đáy, sóng nước */
nav{background:linear-gradient(180deg,#0B3D91 0%,#0A3683 60%,#082C6C 100%) !important;overflow:hidden}
nav::after{content:"";position:absolute;left:0;right:0;bottom:26px;height:270px;pointer-events:none;
  background:url(/anh/cr-trang-mo.webp) 38% bottom/auto 100% no-repeat}
nav::before{content:"GoPi Mart · Đà Nẵng";position:absolute;left:0;right:0;bottom:0;height:28px;line-height:30px;text-align:center;pointer-events:none;
  font:600 11px/30px 'Be Vietnam Pro',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 6 q10 -6 20 0 t20 0' fill='none' stroke='%23FFAE00' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") top/40px 8px repeat-x}
nav > *{position:relative;z-index:1}
nav button.on,.mi.on{background:#fff !important;color:var(--dn-xanh) !important;border-color:#fff !important;box-shadow:inset 4px 0 0 var(--dn-vang),0 6px 16px rgba(0,0,0,.18) !important}
/* Số đếm trên menu: kiểu nhãn giá */
nav .nb,.ng-n{background:var(--dn-vang) !important;color:#3a2600 !important;border-radius:3px 9px 9px 3px !important;font-weight:800}
/* Khung nội dung: bức vẽ Cầu Rồng chìm góc dưới phải */
main{position:relative;background:#fff url(/anh/cr-xanh-mo.webp) right 10px bottom 0/min(820px,62%) auto no-repeat fixed}
main .card,.tw-panel,.tw-map,.tw-col .card{background-color:rgba(255,255,255,.88)}
/* Tiêu đề thẻ: nhãn giá vàng */
.mini-h,.tw-sec{position:relative;padding-left:16px !important}
.mini-h::before,.tw-sec::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:2px 5px 5px 2px;background:var(--dn-vang);box-shadow:inset 2px 0 0 #fff}
/* Chân trang */
.copy{position:relative;padding-top:18px !important}
.copy::before{content:"";position:absolute;left:50%;top:4px;width:min(520px,80%);height:8px;transform:translateX(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 6 q10 -6 20 0 t20 0' fill='none' stroke='%23FFAE00' stroke-opacity='.7' stroke-width='1.6'/%3E%3C/svg%3E") center/40px 8px repeat-x}
/* Màn đăng nhập: Cầu Rồng chìm trong khối xanh */
.lg-hero{background:#0E4DB0 url(/anh/cr-trang-mo.webp) right -40px bottom -10px/auto 92% no-repeat !important}
.lg-hero::after{content:"";position:absolute;inset:0 0 auto 0;width:auto;height:18px;border-radius:0;transform:none;filter:none;opacity:1;animation:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='18'%3E%3Cpath d='M0 0H28V7A14 10 0 0 1 0 7Z' fill='%23FFAE00'/%3E%3Cpath d='M28 0H56V7A14 10 0 0 1 28 7Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0/56px 18px repeat-x}
main::before{content:"";position:absolute;left:26px;right:26px;top:0;height:18px;z-index:2;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='18'%3E%3Cpath d='M0 0H28V7A14 10 0 0 1 0 7Z' fill='%23FFAE00'/%3E%3Cpath d='M28 0H56V7A14 10 0 0 1 28 7Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0/56px 18px repeat-x;filter:drop-shadow(0 3px 2px rgba(11,61,145,.18))}
main{padding-top:34px !important}

/* ===== Bản 3: thương hiệu GOPI-Biz.Smart, ánh sáng, bố cục ===== */
/* Nền xanh có ánh sáng: nắng vàng góc phải, ánh xanh biển góc trái */
body{background:
  radial-gradient(900px 420px at 92% -8%,rgba(255,190,60,.30),transparent 60%),
  radial-gradient(700px 500px at 18% 0%,rgba(80,170,255,.30),transparent 65%),
  linear-gradient(180deg,#0D4AA8 0%,#0B3D91 45%,#082F72 100%) fixed !important}
/* Thanh tiêu đề */
header{position:relative;overflow:hidden}
header::before{content:"";display:block !important;position:absolute;top:0;bottom:0;left:-40%;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14) 45%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.14) 55%,transparent);
  animation:dnQuet 9s ease-in-out infinite}
@keyframes dnQuet{0%,55%{transform:translateX(0)}100%{transform:translateX(420%)}}
.hd-t h1{font:800 32px/1.05 'Be Vietnam Pro',sans-serif !important;letter-spacing:.01em;text-transform:none !important;
  color:#fff;text-shadow:0 0 18px rgba(120,190,255,.55),0 2px 0 rgba(0,0,0,.15)}
.hd-t h1 b{color:var(--dn-vang);text-shadow:0 0 16px rgba(255,174,0,.65)}
.hd-t h1 i{font-style:normal;color:#9FD0FF}
.ai-on{color:rgba(255,255,255,.82) !important;font-weight:600 !important;letter-spacing:.04em}
.ai-on i{background:var(--dn-vang) !important;box-shadow:0 0 0 4px rgba(255,174,0,.22),0 0 12px rgba(255,174,0,.9) !important}
.home img{box-shadow:0 0 0 3px rgba(255,174,0,.55),0 0 22px rgba(255,190,60,.55) !important}
.hd-r{padding:8px 18px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(0,0,0,.18);backdrop-filter:blur(6px);text-align:right}
.clock{text-shadow:0 0 14px rgba(160,210,255,.8) !important}
.tw-ai{display:none !important}
/* Khung nội dung: đèn cửa hàng toả từ mái hiên xuống */
main{background:
  radial-gradient(ellipse 60% 220px at 50% 0,rgba(255,190,60,.16),transparent 70%),
  url(/anh/cr-xanh-mo.webp) right 10px bottom 0/min(820px,62%) auto no-repeat fixed,
  linear-gradient(180deg,#FFFFFF 0%,#F4F8FF 100%) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.9) !important}
/* Thẻ: kính mờ, viền sáng, nổi khi rê chuột */
main .card,.tw-panel,.tw-wrap{border-radius:20px !important;border:1px solid rgba(21,101,216,.10) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86)) !important;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,61,145,.06),0 12px 32px rgba(11,61,145,.08) !important;
  transition:transform .25s ease,box-shadow .25s ease}
main .card:hover,.tw-panel:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(11,61,145,.14) !important}
.tw-wrap{background:radial-gradient(ellipse at 50% 30%,#FFFFFF 0%,#EEF5FF 70%,#E3EEFF 100%) !important;overflow:hidden}
.tw-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:20px;
  background:radial-gradient(500px 220px at 70% 0,rgba(255,200,80,.18),transparent 70%)}
.card.hc{background:radial-gradient(420px 200px at 0 0,rgba(21,101,216,.10),transparent 70%),linear-gradient(180deg,#fff,#F7FAFF) !important}
/* Nút VÀO CA: bóng sáng + quầng sáng nhịp thở */
#hAct{position:relative;overflow:hidden;animation:dnTho 2.6s ease-in-out infinite}
#hAct::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:dnQuet2 3.2s ease-in-out infinite}
@keyframes dnTho{0%,100%{box-shadow:0 10px 26px rgba(16,185,129,.35),0 0 0 0 rgba(16,185,129,.35)}50%{box-shadow:0 12px 30px rgba(16,185,129,.45),0 0 0 10px rgba(16,185,129,0)}}
@keyframes dnQuet2{0%,40%{left:-60%}100%{left:130%}}
/* Menu trái: ánh sáng đỉnh, mục đang chọn phát sáng */
nav{box-shadow:inset -1px 0 0 rgba(255,255,255,.08),12px 0 40px rgba(0,0,0,.18) !important}
nav .nv-top{position:relative}
nav .nv-top::after{content:"";position:absolute;left:-20px;right:-20px;top:-30px;height:160px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 40% 0,rgba(120,190,255,.28),transparent 70%)}
nav button.on,.mi.on{box-shadow:inset 4px 0 0 var(--dn-vang),0 0 0 1px rgba(255,255,255,.6),0 8px 22px rgba(0,0,0,.2),0 0 26px rgba(160,210,255,.45) !important}
nav button:hover,.mi:hover{background:rgba(255,255,255,.10) !important}
/* Bố cục: 3 cột trên màn rộng, hàng dưới không còn ô trống */
#kpiTw:empty{display:none}
@media (min-width:1280px){
  .tw-shell{grid-template-columns:290px minmax(0,1fr) 300px !important;gap:22px !important}
  .tw-col.r{grid-column:auto !important;display:flex !important;flex-direction:column;gap:18px}
}
@media (min-width:900px) and (max-width:1279px){ .tw-col.r{grid-template-columns:1fr 1fr !important} }
/* Màn đăng nhập */
.lg-hero{box-shadow:0 24px 60px rgba(8,47,114,.35),inset 0 1px 0 rgba(255,255,255,.25) !important;
  background:radial-gradient(520px 260px at 85% 0,rgba(255,190,60,.35),transparent 70%),url(/anh/cr-trang-mo.webp) right -40px bottom -10px/auto 92% no-repeat,linear-gradient(135deg,#1565D8,#0B3D91) !important}
.lg-tag{background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.3) !important}
@media (max-width:899px){
  .hd-t h1{font-size:21px !important;white-space:nowrap}
  .ai-on{font-size:11px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-r{padding:4px 10px;border-radius:12px}
  .hd-r .clock{font-size:17px !important}
  .hd-r .date{display:none}
}
@media (max-width:380px){ .hd-t h1{font-size:18px !important} }
@media (max-width:599px){ .hd-r{display:none !important} .hd-t h1{font-size:22px !important} }

.plm{display:block;margin-top:10px}.plm input[type=color]{width:100%;height:36px;padding:2px;margin-top:3px}.plm label{display:block;font-size:12.5px;margin:6px 0 0}.plm input:not([type=checkbox]):not([type=color]),.plm select,.plm textarea{width:100%;margin-top:3px}
.plm-g{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.plm-k label{display:flex;gap:6px;align-items:center}.plm-p{width:100%;height:1080px;border:1px solid #cbd5e1;border-radius:8px;background:#e9edf3;margin-top:12px}.plm details{margin-top:8px}
@media(max-width:900px){.plm-p{height:760px}}