/* ==================================================
   Panel วิดีโอประชาสัมพันธ์ (.panel.panel-primary)
   ธีมสีชมพู-เทา โทนอบอุ่น (Warm Pink & Gray)
   ครอบคลุม: panel-heading (หัวข้อ+วิดีโอ) และ panel-body
   ================================================== */

:root {
  --pv-pink: #d98a92;
  --pv-pink-deep: #b96570;
  --pv-gray: #8f857a;
  --pv-gray-deep: #5c5349;
  --pv-blush: #f3dadd;
  --pv-gradient: linear-gradient(135deg, var(--pv-gray-deep) 0%, var(--pv-gray) 45%, var(--pv-pink) 100%);
}

/* ---------- กรอบ panel รวม ---------- */
.panel.panel-primary {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 44px -22px rgba(92, 83, 73, .45);
  background: #faf5f2;
}

/* ---------- หัวข้อแต่ละส่วน (มีหลายบล็อกต่อกัน: ชื่อ + วิดีโอ) ---------- */
.panel.panel-primary .panel-heading {
  position: relative;
  background: var(--pv-gradient);
  background-size: 220% 220%;
  animation: pgGradientShift 12s ease infinite;
  border: none;
  color: #fff;
  padding: 20px clamp(16px, 3vw, 32px) 26px;
}

/* เส้นคั่นบางๆ สีชมพูอ่อนระหว่างแต่ละบล็อกหัวข้อ ไม่ให้ดูติดกันแน่นเกินไป */
.panel.panel-primary .panel-heading + .panel-heading {
  border-top: 1px solid rgba(243, 218, 221, .55);
}

@keyframes pgGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.panel.panel-primary .panel-heading h3 {
  font-family: "Kanit", sans-serif;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  margin: 0 0 14px 0 !important;
  position: relative;
  display: inline-block;
}

/* ขีดเส้นใต้ไล่สีชมพู-ม่วงสั้นๆ ใต้หัวข้อ ให้ดูหรูขึ้น */
.panel.panel-primary .panel-heading h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pv-blush), var(--pv-pink));
}

/* ---------- กรอบวิดีโอ: มุมโค้งมน + กรอบชมพูบางๆ + เงา ---------- */
.panel.panel-primary .panel-heading video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 2px solid rgba(185, 101, 112, .55);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45);
  margin: 4px 8px 4px 0;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}

.panel.panel-primary .panel-heading video:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: var(--pv-blush);
  box-shadow: 0 18px 38px -14px rgba(185, 101, 112, .5);
}

.panel.panel-primary .clip_box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* ---------- เนื้อหาด้านล่าง (panel-body) ---------- */
.panel.panel-primary .panel-body {
  background: linear-gradient(180deg, #fdf6f3 0%, #fffdfb 100%);
  padding: 18px clamp(16px, 3vw, 32px);
}

/* ---------- เคารพผู้ใช้ที่ปิดแอนิเมชัน ---------- */
@media (prefers-reduced-motion: reduce) {
  .panel.panel-primary .panel-heading {
    animation: none;
  }
  .panel.panel-primary .panel-heading video {
    transition: none;
  }
}

@media (max-width: 480px) {
  .panel.panel-primary .panel-heading video {
    width: 100%;
    margin: 4px 0;
  }
}