/* Ba khối của motion-places.php.
   Chữ trong khối là <span>/<div>, không bao giờ là <p>: selector
   body.wp-singular #pxl-content-main p có id nên thắng mọi class. */

.xsp-rail { margin: 22px 0 26px; }
.xsp-rail ol {
  display: flex; gap: 12px; margin: 0; padding: 2px 2px 14px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.xsp-rail li { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }

.xsp-card {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  width: 224px; min-height: 132px; padding: 14px 16px 16px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  background: rgba(255,255,255,.04); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.xsp-card:hover, .xsp-card:focus-visible {
  transform: translateY(-2px); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07);
}
.xsp-card.is-hot {
  border-color: rgba(241,7,163,.55);
  background: linear-gradient(135deg, rgba(123,47,247,.28), rgba(241,7,163,.16));
}

.xsp-n {
  position: absolute; right: 10px; bottom: 2px;
  font-size: 54px; font-weight: 800; line-height: 1;
  color: rgba(255,255,255,.08); pointer-events: none;
}
.xsp-card.is-hot .xsp-n { color: rgba(255,255,255,.16); }

.xsp-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.xsp-when, .xsp-fee, .xsp-far { position: relative; font-size: 12px; line-height: 1.45; opacity: .78; }
.xsp-fee { opacity: .92; }
.xsp-far { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .xsp-card { transition: none; }
  .xsp-card:hover, .xsp-card:focus-visible { transform: none; }
}

@media (max-width: 600px) {
  .xsp-card { width: 78vw; max-width: 300px; }
}

.xsp-deck { margin: 22px 0 26px; }
.xsp-deck .xs-story { margin: 0; }

.xsp-facts {
  margin: 24px 0 28px; padding: 20px; border-radius: 16px;
  border: 1px solid rgba(241,7,163,.34);
  background: linear-gradient(135deg, rgba(123,47,247,.20), rgba(241,7,163,.10));
}
.xsp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.xsp-stat-v { font-size: 19px; font-weight: 800; line-height: 1.2; }
.xsp-stat-l { margin-top: 3px; font-size: 12px; line-height: 1.4; opacity: .72; }

.xsp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.xsp-btn {
  display: inline-block; padding: 12px 26px; border-radius: 999px;
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.xsp-btn:hover, .xsp-btn:focus-visible { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.xsp-link { font-size: 14px; text-decoration: none; opacity: .85; }
.xsp-link:hover { opacity: 1; }
.xsp-where { margin-top: 14px; font-size: 12px; line-height: 1.5; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .xsp-btn { transition: none; }
  .xsp-btn:hover, .xsp-btn:focus-visible { transform: none; }
}

@media (max-width: 600px) {
  .xsp-facts { padding: 16px; }
  .xsp-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .xsp-actions { gap: 10px; }
  .xsp-btn { flex: 1 1 100%; text-align: center; }
}

/* Màu chữ: theme tô mọi <a> trong bài thành cyan #00e5ff bằng một selector có
   id (#pxl-content-main), nên mọi rule chỉ có class đều thua — nút "Đặt vé"
   thành chữ cyan trên nền tím, và tên thẻ địa điểm cũng bị nhuộm theo.
   Lấy lại quyền bằng cách gắn cùng cái id đó vào selector của mình. */
#pxl-content-main .xsp-card,
#pxl-content-main .xsp-card .xsp-name,
#pxl-content-main .xsp-card .xsp-when,
#pxl-content-main .xsp-card .xsp-fee,
#pxl-content-main .xsp-card .xsp-far { color: #fff; }

/* Nút mang thêm class `xsm-btn` để thoát rule cyan, nhưng như vậy cũng ăn
   luôn kiểu nút mặc định của theme (body.motion-on .xsm-btn). Viết lại ở cùng
   độ ưu tiên; places.css nạp sau motion.css nên bản này thắng. */
body.motion-on a.xsp-btn,
body.motion-on a.xsp-btn:hover,
body.motion-on a.xsp-btn:focus-visible {
  display: inline-block; padding: 12px 26px; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
}
body.motion-on a.xsp-btn:hover,
body.motion-on a.xsp-btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  body.motion-on a.xsp-btn:hover,
  body.motion-on a.xsp-btn:focus-visible { transform: none; }
}

@media (max-width: 600px) {
  body.motion-on a.xsp-btn { display: block; width: 100%; text-align: center; }
}

/* Hỏi đáp. Câu trả lời buộc phải là <p> (bộ sinh FAQPage cắt vùng quét ở
   <div> đầu tiên), mà `#pxl-content-main p` có id nên thắng mọi class —
   phải gắn cùng id để lấy lại kích thước chữ. */
.xsp-qa {
  padding: 14px 16px; margin: 0 0 10px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
}
.xsp-qa > summary { cursor: pointer; list-style: none; }
.xsp-qa > summary::-webkit-details-marker { display: none; }
#pxl-content-main .xsp-qa > summary h3 {
  display: inline; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4;
}
.xsp-qa > summary::after { content: ' ▾'; opacity: .5; }
.xsp-qa[open] > summary::after { content: ' ▴'; }
#pxl-content-main .xsp-qa .xsp-qa-a {
  margin: 10px 0 0; font-size: 14px; line-height: 1.6; opacity: .82;
}