/* ============================================================
   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: 16px; 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: 12px; 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(--serif); font-style: italic; font-size: 15.5px; color: var(--vang); font-weight: 500; margin-left: 5px; }
.vg-count { font-size: 14px; color: var(--nau-dat); margin-top: 7px; }
.vg-count b { color: var(--nau-go); font-weight: 600; font-family: var(--serif); font-size: 17px; }
.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: 12.5px; line-height: 1.55; color: var(--nau-dat-nhat); font-style: italic; }
.vg-remind:empty { display: none; }