/* videos.css — หน้าวิดีโอทั้งหมด (videos.php) — ใช้คู่กับ detail.css + list.css (ตัวแปรสีชุดเดียวกับ site.css) */

.vd-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px 22px; }
.vd-item { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ภาพปกวิดีโอ 16:9 + ปุ่มเล่น */
.vd-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b1530; box-shadow: 0 4px 14px rgba(18, 48, 107, .18); transition: transform .25s, box-shadow .25s; }
.vd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.vd-thumb:hover { box-shadow: 0 12px 26px rgba(18, 48, 107, .28); transform: translateY(-3px); }
.vd-thumb:hover img { transform: scale(1.04); }
.vd-thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.vd-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(229, 62, 62, .94); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: transform .2s, background .2s; }
.vd-play .ic { margin-left: 3px; }
.vd-thumb:hover .vd-play { transform: scale(1.1); background: #e53e3e; }
.vd-new { position: absolute; top: 10px; right: 10px; padding: 2px 11px; border-radius: 99px; background: #e53e3e; color: #fff; font-size: .72rem; font-weight: 700; }

/* ชื่อ · วันที่ · คำอธิบาย */
.vd-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vd-body h2 { margin: 0; font-size: 1.02rem; line-height: 1.5; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vd-body h2 a { color: var(--navy); }
.vd-body h2 a:hover { color: var(--blue); text-decoration: none; }
.vd-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-size: .82rem; font-weight: 500; }
.vd-body p { margin: 0; color: #3d4a66; font-size: .9rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

@media (max-width: 680px) {
  .vd-grid { grid-template-columns: 1fr; gap: 22px; }
  .vd-play { width: 52px; height: 52px; }
}
@media print { .vd-play { display: none; } .vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .vd-thumb, .vd-thumb img, .vd-play { transition: none; } .vd-thumb:hover, .vd-thumb:hover img { transform: none; } }