/* Bố cục riêng của Vibe Video, chỉ dùng token của vg.css */
.vv-quick { display: flex; gap: 8px; }
.vv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.vv-card { display: block; color: inherit; text-decoration: none; border: 1px solid var(--vg-line); border-radius: 12px; overflow: hidden; background: var(--vg-bg); transition: box-shadow .15s; }
.vv-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.vv-thumb { aspect-ratio: 9 / 12; background: var(--vg-bg-soft); display: flex; align-items: center; justify-content: center; color: var(--vg-text-3); position: relative; overflow: hidden; }
.vv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vv-thumb .vg-progress { position: absolute; left: 10px; right: 10px; bottom: 10px; }
.vv-card-b { padding: 10px 12px; }
.vv-card-t { font-weight: 600; font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.vv-card-m { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--vg-text-3); }

.vv-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vv-opt { border: 1px solid var(--vg-line); border-radius: 10px; padding: 10px; cursor: pointer; background: var(--vg-bg); text-align: left; font: inherit; color: inherit; }
.vv-opt:hover { border-color: var(--vg-acc-ink); }
.vv-opt.is-on { border-color: var(--vg-acc-ink); background: var(--vg-acc-soft); }
.vv-opt img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; background: var(--vg-bg-soft); display: block; margin-bottom: 8px; }
.vv-opt b { display: block; font-size: 13px; }
.vv-opt span { font-size: 12px; color: var(--vg-text-3); }

.vv-studio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.vv-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.vv-player { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 12px; display: block; }
.vv-player.is-wide { aspect-ratio: 16 / 9; }
.vv-player.is-square { aspect-ratio: 1; }
.vv-scene { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-top: 1px solid var(--vg-line); }
.vv-scene:first-child { border-top: 0; }
.vv-scene-img { width: 96px; aspect-ratio: 9 / 16; border-radius: 8px; background: var(--vg-bg-soft); object-fit: cover; cursor: pointer; border: 1px solid var(--vg-line); padding: 0; display: block; overflow: hidden; }
.vv-scene-img img { width: 100%; height: 100%; object-fit: cover; }
.vv-scene-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vv-scene .vg-field { margin-bottom: 8px; }
.vv-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vv-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.vv-pick button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: var(--vg-bg-soft); }
.vv-pick button.is-on { border-color: var(--vg-acc-ink); }
.vv-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-swatch { width: 36px; height: 36px; padding: 2px; border: 1px solid var(--vg-line); border-radius: 8px; background: var(--vg-bg); cursor: pointer; }

@media (max-width: 1100px) { .vv-studio { grid-template-columns: 1fr; } .vv-side { position: static; } .vv-player { max-width: 320px; margin: 0 auto; } }
@media (max-width: 640px) {
  .vv-quick { flex-direction: column; }
  .vv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vv-scene { grid-template-columns: 1fr; }
  .vv-scene-img { width: 110px; }
  .vv-more { grid-template-columns: 1fr; }
}