/* ============================================================
   KHU VƯỜN SỐNG ĐỘNG — thẻ trên màn Hôm Nay
   ============================================================ */
.vgarden { margin-top: 4px; border-radius: 26px; overflow: hidden; border: 1px solid var(--vien); box-shadow: 0 20px 44px -26px var(--bong);
  background: linear-gradient(180deg, #FBF8F0 0%, #F2ECDC 70%, #EADFC6 100%); }
.vg-sky { position: relative; height: 244px; overflow: hidden; }
.vg-sun { position: absolute; top: 22px; right: 30px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(216,182,121,.5), rgba(216,182,121,0) 70%); }
.vg-tree { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.vg-tree svg { display: block; height: 244px; width: auto; max-width: 100%; }
.vg-tree svg.vg-grow { animation: vgGrow .9s cubic-bezier(.16,1,.3,1); transform-origin: 50% 100%; }
@keyframes vgGrow { 0% { transform: scale(.94) translateY(5px); opacity: .5; } 60% { transform: scale(1.015); } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.vg-fruit { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.vg-whisper { position: absolute; left: 0; right: 0; top: 14px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--xanh-reu); opacity: 0; transition: opacity .5s; pointer-events: none; padding: 0 24px; }
.vg-whisper.show { opacity: 1; }
.vg-tip { position: absolute; background: #404a33; color: #FAF9F5; font-size: 13px; padding: 7px 11px; border-radius: 12px; transform: translate(-50%, -120%); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); z-index: 5; }
.vg-tip.show { opacity: 1; } .vg-tip b { color: var(--vang-sang); }
.vg-foot { padding: 15px 20px 17px; background: var(--trang-nga); border-top: 1px solid var(--vien); }
.vg-name { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--xanh-reu); line-height: 1.12; display: inline; }
.vg-hint { font-family: var(--sans); font-style: italic; font-size: 17px; color: var(--vang); font-weight: 500; margin-left: 5px; }
.vg-count { font-size: 15.5px; color: var(--nau-dat); margin-top: 7px; }
.vg-count b { color: var(--nau-go); font-weight: 600; font-family: var(--serif); font-size: 20px; }
.vg-dots { display: flex; gap: 7px; margin-top: 12px; }
.vg-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(149,110,66,.2); }
.vg-dot.on { background: var(--vang); } .vg-dot.done { background: var(--xanh-reu-nhat); }
.vg-remind { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--nau-dat-nhat); font-style: italic; }
.vg-remind:empty { display: none; }
.vgarden { cursor: pointer; }
.vg-tapmore { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--nau-go); }

/* ===== Màn "Cây của bạn" phóng to ===== */
.tree-ov { position: absolute; inset: 0; z-index: 120; display: none; flex-direction: column;
  background: linear-gradient(180deg, #DDE8CC 0%, #EAE9DC 52%, #F6F2E9 100%); }
.tree-ov.open { display: flex; animation: fade .4s ease both; }
.to-head { display: flex; align-items: center; padding: max(16px, env(safe-area-inset-top)) 18px 0; }
.to-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: var(--nau-go); font-family: var(--sans); font-weight: 600; font-size: 15px; }
.to-sky { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.to-sun { position: absolute; top: 30px; right: 42px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,182,121,.5), rgba(216,182,121,0) 70%); }
.to-tree { width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.to-tree svg { height: 70vh; width: auto; max-width: 98%; display: block; }
.to-foot { background: rgba(255,255,255,.62); backdrop-filter: blur(4px); border-top: 1px solid var(--vien);
  padding: 16px 22px calc(env(safe-area-inset-bottom) + 20px); text-align: center; }
.to-name { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--xanh-reu); }
.to-count { font-size: 15px; color: var(--nau-dat); margin-top: 4px; } .to-count b { color: var(--nau-go); font-weight: 700; }
.to-dots { display: flex; gap: 7px; justify-content: center; margin: 12px 0 10px; }
.to-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(149,110,66,.2); }
.to-dots span.on { background: var(--vang); } .to-dots span.done { background: var(--xanh-reu-nhat); }
.to-hint { font-size: 13.5px; color: var(--nau-dat-nhat); font-style: italic; }
.to-tip { position: absolute; background: #404a33; color: #FAF9F5; font-size: 13px; font-weight: 600;
  padding: 7px 11px; border-radius: 12px; transform: translate(-50%, -120%); white-space: nowrap; opacity: 0;
  transition: opacity .2s; pointer-events: none; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }
.to-tip.show { opacity: 1; } .to-tip b { color: var(--vang-sang); }