/* tt-video.css — ล็อกอัตราส่วนวิดีโอ 16:9 ทุกหน้า ทุกอุปกรณ์ (founder 2026-08-06)
   กติกาถาวร: วิดีโอต้องเต็มความกว้างเสมอ · ความสูงคิดจากความกว้างตามอัตราส่วน 16:9
   ห้ามกำหนดความสูงตายตัวให้กล่องวิดีโออีก เพราะจะเกิดแถบดำซ้าย-ขวา
   (เดิม .video ตั้ง min-height ไว้ พอจอกว้างขึ้นกล่องจะเตี้ยกว่าภาพ → ขึ้นแถบดำ) */

.video,
.tt-vid,
.ttv-wrap,
.video-wrap,
[data-youtube-id] {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
  position: relative;
}

/* ตัวเล่นข้างในเต็มกล่องพอดี ไม่เหลือขอบ */
.video > iframe,
.video > video,
.tt-vid > iframe,
.tt-vid > video,
.ttv-wrap > iframe,
[data-youtube-id] > iframe,
iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"],
iframe[src*="tiktok"],
iframe[src*="facebook.com/plugins/video"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: cover;
}

/* วิดีโอไฟล์ตรง (ไม่ใช่กล้อง/AR ที่ต้องคุมเอง) */
video:not([data-nolock]):not(.tt-ar-cam):not(#ttar-cam) {
  max-width: 100% !important;
}

/* กล้อง/AR ไม่บังคับอัตราส่วน — ต้องเต็มจอตามอุปกรณ์ */
video[data-nolock],
video.tt-ar-cam,
#ttar-cam {
  aspect-ratio: auto !important;
}

/* บล็อกวิดีโอที่ตั้งใจให้ชนขอบซ้าย-ขวา (flush)
   เดิมใช้ margin ติดลบอย่างเดียว ความกว้างจึงยังขาดไปเท่ากับระยะขอบสองข้าง
   → ต้องบวกความกว้างคืนด้วย ถึงจะเต็มจริง */
.block.flush > .video,
#sc-1-home-featured-video .video {
  width: calc(100% + (var(--pad, 18px) * 2)) !important;
  max-width: none !important;
  margin-left: calc(-1 * var(--pad, 18px)) !important;
  margin-right: calc(-1 * var(--pad, 18px)) !important;
}