/* Khung xem ảnh kiểu Pinterest/Unsplash */
html.xvx-mo{ overflow:hidden; }
.xvx-hop{
  position:fixed; inset:0; z-index:100000; overflow-y:auto; overscroll-behavior:contain;
  background:rgb(12 12 14 / 96%); color:#eee; -webkit-tap-highlight-color:transparent;
  padding:0 0 env(safe-area-inset-bottom, 0px);
}
.xvx-thanh{
  position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center;
  padding:calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; background:linear-gradient(rgb(12 12 14 / 95%), rgb(12 12 14 / 0%));
}
.xvx-dem{ font:600 13px/1 system-ui, sans-serif; color:#aaa; }
.xvx-nut{ display:flex; gap:6px; }
.xvx-nut button, .xvx-mui{
  border:0; cursor:pointer; color:#fff; background:rgb(255 255 255 / 12%); border-radius:50%;
  width:42px; height:42px; font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:background .15s;
}
.xvx-nut button:hover, .xvx-mui:hover{ background:rgb(255 255 255 / 26%); }
.xvx-dong{ font-size:30px !important; }

.xvx-san{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 8px; min-height:60vh; }
.xvx-mui{ flex:0 0 auto; width:48px; height:48px; font-size:34px; }
.xvx-khung{ position:relative; max-width:min(1400px, 100%); max-height:82vh; display:flex; align-items:center; justify-content:center; }
.xvx-anh{ display:block; max-width:100%; max-height:82vh; width:auto; height:auto; border-radius:6px; cursor:zoom-in; background:#222; user-select:none; }
.xvx-vid{ display:block; max-width:100%; max-height:82vh; border-radius:6px; background:#000; }
.xvx-khung.zoom{ overflow:auto; width:100%; height:82vh; display:block; cursor:grab; }
.xvx-khung.zoom .xvx-anh{ max-width:none; max-height:none; cursor:zoom-out; margin:auto; }
.xvx-khung.dang-tai .xvx-xoay{ display:block; }
.xvx-xoay{ display:none; position:absolute; top:50%; left:50%; width:36px; height:36px; margin:-18px 0 0 -18px;
  border:3px solid rgb(255 255 255 / 25%); border-top-color:#fff; border-radius:50%; animation:xvx-xoay .8s linear infinite; }
@keyframes xvx-xoay{ to{ transform:rotate(360deg); } }

.xvx-thong-tin{ max-width:1100px; margin:14px auto 0; padding:0 16px; }
.xvx-tieu-de{ margin:0 0 10px; font:700 18px/1.35 system-ui, sans-serif; color:#fff; }
.xvx-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.xvx-tag{ padding:6px 12px; border-radius:999px; background:rgb(255 255 255 / 10%); color:#ddd !important; font-size:13px; text-decoration:none !important; }
.xvx-tag:hover{ background:#d71920; color:#fff !important; }

.xvx-tt{ max-width:1100px; margin:26px auto 40px; padding:0 16px; }
.xvx-tt h3{ margin:0 0 12px; font:700 16px/1.3 system-ui, sans-serif; color:#fff; }
.xvx-luoi{ columns:4 220px; column-gap:10px; }
.xvx-o{ display:block; position:relative; margin:0 0 10px; break-inside:avoid; border-radius:8px; overflow:hidden; background:#222; }
.xvx-o img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.xvx-o:hover img{ transform:scale(1.03); }
.xvx-o.la-video::after{ content:"▶"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
  background:rgb(0 0 0 / 55%); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; }

@media (max-width:700px){
  .xvx-san{ padding:0; min-height:auto; }
  .xvx-mui{ position:absolute; top:50%; z-index:2; transform:translateY(-50%); width:38px; height:38px; font-size:26px; background:rgb(0 0 0 / 35%); }
  .xvx-truoc{ left:6px; } .xvx-sau{ right:6px; }
  .xvx-khung, .xvx-anh, .xvx-vid{ max-height:72vh; border-radius:0; }
  .xvx-khung.zoom{ height:72vh; }
  .xvx-luoi{ columns:2 140px; column-gap:6px; }
  .xvx-o{ margin-bottom:6px; }
  .xvx-tieu-de{ font-size:16px; }
}