/* Thẻ video dọc 3:4 dùng chung (templates/_the_video.html, 2026-10-24): hero trang chủ và
   khối "Watch our experiences" ở /experiences — cả hai đặt trên nền --mt-primary.
   Ảnh, lớp tối dần phía dưới (gradient — ngoại lệ đã duyệt để chữ trắng đọc được trên
   ảnh), nút ▶ giữa thẻ, tag vàng + tiêu đề. Điện thoại (<768px): vuốt ngang
   (scroll-snap); chỉ dải này cuộn ngang, trang không cuộn ngang.
   Số cột máy tính: biến --vd-cot (mặc định 3; /experiences đặt 4). */
.vd-luoi{display:grid;grid-template-columns:repeat(var(--vd-cot,3),minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.vd-the{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;isolation:isolate;
  background:var(--mt-primary-hover);color:var(--mt-on-primary);text-decoration:none}
.vd-hinh{position:absolute;inset:0;display:block;overflow:hidden}
.vd-hinh img{display:block;width:100%;height:100%;object-fit:cover}
.vd-the::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78))}
.vd-nut{position:absolute;z-index:2;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.92)}
.vd-nut svg{width:18px;height:18px;margin-left:3px;fill:var(--mt-red)}
.vd-chu{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:2px}
.vd-chu small{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-gold-text)}
.vd-chu strong{font-size:14px;font-weight:600;line-height:1.3}
.vd-the:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
/* Chữ chỉ cho trình đọc màn hình ("mở tab mới") */
.vd-an-chu{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:767px){
  .vd-luoi{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .vd-luoi::-webkit-scrollbar{display:none}
  .vd-luoi > li{scroll-snap-align:start}
}
/* Rê chuột: ảnh phóng nhẹ (chỉ transform; khung đã overflow:hidden) */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .vd-hinh img{transition:transform .4s ease}
  .vd-the:hover .vd-hinh img{transform:scale(1.05)}
}