/* VLN — Khối "Video thi công" (inc/vln/video.php), ngay trên Download Catalog.
   YouTube ngang 16:9 · YouTube Shorts / TikTok dọc 9:16 (khung kiểu điện thoại). */
.vln-sku .sku-video{margin:0 0 22px;padding:22px;border:1px solid #e1e5dc;border-radius:10px;background:#fff}
.vln-sku .sku-video .sv-head{display:flex;gap:15px;align-items:center;margin-bottom:16px}
.vln-sku .sku-video .sv-head svg{flex:none;width:30px;height:30px;color:var(--red,#E30613)}
.vln-sku .sku-video h3{margin:0;font-size:22px;line-height:1.25}
.vln-sku .sku-video h3 small{display:block;margin-top:6px;font-size:12px;font-weight:400;color:#7d8578}

.vln-sku .sv-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px}
.vln-sku .sv-item{position:relative;overflow:hidden;width:100%;background:#0b0b0c;border-radius:16px;isolation:isolate}
/* ngang 16:9 */
.vln-sku .sv-item.is-h{flex:1 1 520px;max-width:880px;aspect-ratio:16/9}
/* có cả video dọc: video ngang đứng cạnh, căn giữa theo chiều dọc */
.vln-sku .sv-list:has(.is-v){align-items:center}
.vln-sku .sv-list.has-many-h .sv-item.is-h{flex:1 1 380px}
/* dọc 9:16 — mô phỏng màn hình điện thoại: căn giữa, rộng 320–340px, bo góc lớn, viền máy tối */
.vln-sku .sv-item.is-v{flex:0 1 340px;max-width:340px;min-width:280px;aspect-ratio:9/16;border-radius:24px;box-shadow:0 0 0 6px #111827,0 22px 44px -22px rgba(17,24,39,.55);margin:6px}

.vln-sku .sv-play,.vln-sku .sv-item iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vln-sku .sv-play{color:#fff;text-decoration:none;cursor:pointer}
.vln-sku .sv-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,opacity .2s ease}
.vln-sku .sv-noimg{background:radial-gradient(90% 60% at 50% 35%,#2b2f36 0,#0b0b0c 70%)}
.vln-sku .sv-tt .sv-noimg::after{content:"TikTok";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:800 22px/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.75)}
.vln-sku .sv-btn{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:#E30613;color:#fff;box-shadow:0 10px 26px -8px rgba(227,6,19,.8);transition:transform .2s ease,background-color .2s ease}
.vln-sku .sv-btn svg{width:30px;height:30px;margin-left:4px}
.vln-sku .sv-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;padding:36px 16px 14px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));text-align:left}
.vln-sku .sv-src{align-self:flex-start;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-size:11px;font-weight:700;letter-spacing:.02em}
.vln-sku .sv-title{font-size:14px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vln-sku .sv-play:focus-visible{outline:3px solid #E30613;outline-offset:-3px}
@media (hover:hover){
.vln-sku .sv-play:hover .sv-thumb{transform:scale(1.04)}
.vln-sku .sv-play:hover .sv-btn{transform:scale(1.1);background:#B8000C}
}
/* đang phát: bỏ ảnh bìa, iframe phủ khung */
.vln-sku .sv-item.is-playing{background:#000}

@media (max-width:849px){
.vln-sku .sku-video{padding:18px}
.vln-sku .sku-video h3{font-size:20px}
}
/* Điện thoại: video tràn hết bề ngang nội dung, khung dọc không còn viền máy, vẫn bo góc mềm */
@media (max-width:600px){
.vln-sku .sku-video{padding:16px 0 18px;border:0;border-top:1px solid #e1e5dc;border-bottom:1px solid #e1e5dc;border-radius:0}
.vln-sku .sku-video .sv-head{padding:0 2px}
.vln-sku .sv-list{gap:14px;margin-left:calc(50% - 50vw + 10px);margin-right:calc(50% - 50vw + 10px)} /* tràn ra sát mép màn hình, chừa 10px */
.vln-sku .sv-item.is-h,.vln-sku .sv-list.has-many-h .sv-item.is-h{flex:1 1 100%;max-width:none;border-radius:14px}
.vln-sku .sv-item.is-v{flex:1 1 100%;max-width:none;min-width:0;margin:0;border-radius:18px;box-shadow:0 14px 30px -18px rgba(17,24,39,.6)}
.vln-sku .sv-btn{width:60px;height:60px;margin:-30px 0 0 -30px}
}
@media (prefers-reduced-motion:reduce){.vln-sku .sv-thumb,.vln-sku .sv-btn{transition:none}}
/* link mở video trên YouTube/TikTok (kéo khách về kênh) */
.vln-sku .sku-video .sv-out{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:13px;font-weight:700;color:#E30613;text-decoration:none}
.vln-sku .sku-video .sv-out:hover{text-decoration:underline}
.vln-sku .sku-video .sv-list+.sv-out{display:flex;justify-content:center}