/* =====================================================================
   38-viec-vat.css · Thanh Việc Vặt cuối trang (chủ dự án chốt 12/11/2026)
   Có trên MỌI trang (trừ danh sách loại trừ ở YEU-CAU mục 2.3). Thay thanh dưới đáy cũ .vw-bottom-navigation.
   Điện thoại, máy tính bảng (< 1024px): thanh cuối trang .vv. Máy tính (≥ 1024px): viên .vvh trên header, cạnh Tài khoản.
   Đóng: trồi 62px (công tắc cam · nhãn VIỆC VẶT · công tắc tím). Bấm nhãn: mở hết. Cuộn trang: thụt về 62px.
   Nạp sau vw-theme.css. Chỉ dùng biến --vw-*; giá trị mặc định ghi trong var().
   ===================================================================== */
:root{
  --vv-peek:62px;
  --vv-work-1:#F59E3B;--vv-work-2:#D9620F;--vv-work-ink:#8A3D05;--vv-work-soft:#FFF4E8;--vv-work-line:#F6CFA6;--vv-work-off:#F2D3B3;--vv-work-tab:#FFE3C7;
  --vv-hire-1:#9510EE;--vv-hire-2:#5B1590;--vv-hire-ink:#4A0F78;--vv-hire-soft:#F5EDFF;--vv-hire-line:#DCC5F5;--vv-hire-off:#DCC9F2;--vv-hire-tab:#E6D4FA;
}
body.has-vv{padding-bottom:calc(var(--vv-peek) + env(safe-area-inset-bottom,0px))}
.vv{position:fixed;left:0;right:0;bottom:0;z-index:900;font-family:var(--vw-font,"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif);color:var(--vw-ink,#1E1A2B);
  transform:translateY(calc(100% - var(--vv-peek) - env(safe-area-inset-bottom,0px)));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.vv[data-open="1"]{transform:translateY(0)}
.vv.is-hidden{transform:translateY(110%)}
@media (min-width:1024px){.vv{display:none}body.has-vv{padding-bottom:0}}
.vv button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vv button:focus-visible{outline:3px solid var(--vw-ink,#1E1A2B);outline-offset:2px}

/* Dải trồi: công tắc cam sát trái · nhãn giữa · công tắc tím sát phải */
.vv__peek{height:var(--vv-peek);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:0 max(8px,env(safe-area-inset-left,0px)) 0 max(8px,env(safe-area-inset-right,0px));
  background:var(--vw-bg,#fff);border-radius:22px 22px 0 0;box-shadow:0 -4px 16px rgba(30,26,43,.12)}
.vv__mini{width:56px;height:48px;display:grid;place-items:center;border:0;background:none;padding:0;transition:opacity .2s}
.vv[data-open="1"] .vv__mini{opacity:0;pointer-events:none}
.vv__tab{justify-self:center;display:flex;align-items:stretch;padding:0;border:2px solid #fff;border-radius:999px;overflow:hidden;background:none;box-shadow:0 2px 8px rgba(30,26,43,.18);min-height:44px}
.vv__tab span{display:flex;align-items:center;gap:6px;font-weight:800;font-size:var(--vw-fs-min,17px);letter-spacing:1.5px;line-height:1}
.vv__tab-a{background:var(--vv-work-tab);color:var(--vv-work-ink);padding:0 6px 0 16px}
.vv__tab-b{background:var(--vv-hire-tab);color:var(--vv-hire-ink);padding:0 14px 0 6px}
.vv__chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.vv[data-open="1"] .vv__chev{transform:rotate(180deg)}

/* Thân: 2 nửa Nhận làm | Thuê người */
.vv__body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0 10px calc(14px + env(safe-area-inset-bottom,0px));background:var(--vw-bg,#fff)}
.vv__half{min-height:84px;border:0;display:grid;align-items:center;column-gap:10px;padding:14px 12px;transition:background .2s,color .2s}
.vv__half--work{grid-template-columns:auto minmax(0,1fr);text-align:left;border-radius:18px 0 0 18px;background:var(--vv-work-soft);color:var(--vv-work-ink);box-shadow:inset 0 0 0 1.5px var(--vv-work-line)}
.vv__half--hire{grid-template-columns:minmax(0,1fr) auto;text-align:right;border-radius:0 18px 18px 0;background:var(--vv-hire-soft);color:var(--vv-hire-ink);box-shadow:inset 0 0 0 1.5px var(--vv-hire-line)}
.vv__half[aria-pressed="true"].vv__half--work{background:linear-gradient(150deg,var(--vv-work-1),var(--vv-work-2));color:#fff;box-shadow:none}
.vv__half[aria-pressed="true"].vv__half--hire{background:linear-gradient(150deg,var(--vv-hire-1),var(--vv-hire-2));color:#fff;box-shadow:none}
.vv__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vv__half--hire .vv__txt{align-items:flex-end}
.vv__txt b{font-size:19px;font-weight:800;line-height:1.2}
.vv__st{display:flex;align-items:center;gap:6px;font-size:var(--vw-fs-min,17px);font-weight:600;line-height:1.25}
.vv__live{display:none;width:9px;height:9px;border-radius:50%;background:#fff;flex:none;animation:vvpulse 1.8s infinite}
[aria-pressed="true"] .vv__live{display:block}
@keyframes vvpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* Công tắc */
.vv__sw{flex:none;display:block;position:relative;width:44px;height:26px;border-radius:13px}
.vv__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s}
[aria-pressed="true"] .vv__knob{left:21px}
.vv__mini--work .vv__sw{background:var(--vv-work-off)}
.vv__mini--hire .vv__sw{background:var(--vv-hire-off)}
.vv__mini--work[aria-pressed="true"] .vv__sw{background:linear-gradient(135deg,var(--vv-work-1),var(--vv-work-2))}
.vv__mini--hire[aria-pressed="true"] .vv__sw{background:linear-gradient(135deg,var(--vv-hire-1),var(--vv-hire-2))}
.vv__half--work .vv__sw{background:#E9B98A}
.vv__half--hire .vv__sw{background:#C9B0EA}
.vv__half[aria-pressed="true"] .vv__sw{background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.vv__mini.is-busy,.vv__half.is-busy{opacity:.6;pointer-events:none}

/* Bảng chọn giờ / tắt */
.vv-sheet{position:fixed;inset:0;z-index:1000;background:rgba(30,26,43,.38);display:flex;align-items:flex-end;justify-content:center}
.vv-sheet[hidden]{display:none}
.vv-sheet__box{width:100%;max-width:520px;background:var(--vw-bg,#fff);border-radius:24px 24px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;font-family:var(--vw-font,"Be Vietnam Pro",sans-serif);color:var(--vw-ink,#1E1A2B);box-shadow:0 -6px 24px rgba(30,26,43,.15)}
.vv-sheet__box h2{margin:0;font-size:22px;font-weight:800;color:#B5530B}
.vv-sheet__box p{margin:0;font-size:var(--vw-fs-min,17px);color:var(--vw-ink-muted,#4F4860)}
.vv-hours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vv-sheet button{font:inherit;cursor:pointer;min-height:48px;border-radius:14px;font-size:var(--vw-fs-min,17px);font-weight:700}
.vv-hours button{border:1.5px solid var(--vw-line,#ECE6F4);background:#fff;color:var(--vw-ink,#1E1A2B)}
.vv-hours button[aria-pressed="true"]{border:2px solid var(--vv-work-2);background:var(--vv-work-soft);color:var(--vv-work-ink)}
.vv-sheet .vv-line{border:1.5px solid var(--vw-line,#ECE6F4);background:#fff;color:var(--vw-ink,#1E1A2B);font-weight:600}
.vv-sheet .vv-main{border:0;min-height:52px;background:linear-gradient(135deg,#F08A24,var(--vv-work-2));color:#fff;font-size:18px;font-weight:800}
.vv-sheet .vv-close{align-self:flex-end;min-height:44px;border:0;background:none;color:var(--vw-ink-muted,#4F4860);text-decoration:underline;font-weight:600;padding:0 4px}
.vv-toast{position:fixed;left:16px;right:16px;bottom:calc(var(--vv-peek) + 16px + env(safe-area-inset-bottom,0px));z-index:1100;max-width:480px;margin:0 auto;background:var(--vw-ink,#1E1A2B);color:#fff;border-radius:12px;padding:12px 16px;font-family:var(--vw-font,"Be Vietnam Pro",sans-serif);font-size:var(--vw-fs-min,17px);font-weight:600}
.vv-toast[hidden]{display:none}
body.vv-is-open .vv-toast{bottom:calc(var(--vv-peek) + 120px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){.vv,.vv__knob,.vv__chev,.vv__mini,.vv__half{transition:none}.vv__live{animation:none}}
.vv-mode{display:flex;flex-direction:column;gap:14px}
.vv-mode[hidden]{display:none}

/* ===== Máy tính (≥ 1024px): viên Việc Vặt trên header, bên phải, trước "Tài khoản" (chủ dự án chọn 12/11) ===== */
.vvh{display:none}
@media (min-width:1024px){
  .vvh{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--vw-bg,#fff);box-shadow:0 1px 6px rgba(30,26,43,.12);font-family:var(--vw-font,"Be Vietnam Pro",sans-serif)}
  .vvh .vv__mini{width:52px;height:44px;border-radius:999px;opacity:1;pointer-events:auto}
  .vvh .vv__tab{border:0;box-shadow:none;min-height:40px}
  .vvh .vv__chev{transform:rotate(180deg)}
  .vvh[data-open="1"] .vv__chev{transform:rotate(0)}
  .vvh__panel{position:absolute;top:calc(100% + 12px);right:0;z-index:950;width:500px;background:var(--vw-bg,#fff);border-radius:20px;box-shadow:0 12px 36px rgba(30,26,43,.18);padding:14px;display:flex;flex-direction:column;gap:12px}
  .vvh__panel[hidden]{display:none}
  .vvh__panel .vv__body{padding:0;background:none}
  .vvh__panel .vv__half--work{border-radius:16px 0 0 16px}
  .vvh__panel .vv__half--hire{border-radius:0 16px 16px 0}
  .vvh__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:var(--vw-fs-min,17px);font-weight:600}
  .vvh__links a{padding:6px 4px}
  .vvh__links a:first-child{color:var(--vv-work-ink)}
  .vvh__links a:last-child{color:var(--vv-hire-ink);text-align:right}
  .vv-toast{left:auto;right:32px;bottom:auto;top:96px;margin:0;max-width:420px}
}

@media(max-width:1023px){.vv__peek{padding-inline:0;grid-template-columns:80px minmax(0,1fr) 80px}.vv__mini{width:80px;height:62px}.vv__tab{position:relative}.vv__tab:before{content:"";position:absolute;inset:-9px -80px;pointer-events:auto}.vv__mini{position:relative;z-index:1}}
.vv-toast a{color:#fff;text-decoration:underline;display:block;margin-top:10px;font-weight:800;padding-block:8px}.vv-toast button{display:block;margin-top:8px;background:transparent;border:1px solid currentColor;border-radius:8px;color:inherit;padding:6px 12px;min-height:40px;font:inherit}