/* Khối nổi bật (server/spotlight.ts): một sản phẩm, một sự kiện, một khóa học, gói hội viên.
   Hai cách bày cùng một bộ thẻ:
     .spot-grid  — lưới 2×2 thẻ lớn trên trang quà tặng (dải .spot-band trước "Quà tặng khác");
     .spot-aside — cột phải cạnh mô tả ở trang sản phẩm, bám theo khi cuộn.
   Thẻ tự chọn dáng theo BỀ RỘNG CỦA CHÍNH NÓ (container query trên .spot-item), không theo màn
   hình: rộng thì ảnh tràn mép trái + mô tả; hẹp (cột phải, điện thoại) thì ảnh vuông nhỏ nằm
   trong thẻ, bỏ mô tả — ảnh không bị cắt mà dải cũng không dài quá một màn hình. */

.spot-band { background: var(--cream-200); border-block: 1px solid var(--cream-300); }

/* ── Thẻ (chung) ── */
.spot-grid, .spot-list { list-style: none; margin: 0; padding: 0; }
.spot-item { display: flex; min-width: 0; container: spot / inline-size; }
.spot-card {
  display: grid; grid-template-columns: 44% minmax(0, 1fr); width: 100%;
  background: var(--cream-card); color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--stamp-sm);
  overflow: hidden;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease);
}
.spot-card:hover { transform: translate(-2px, -2px); box-shadow: var(--stamp); }
.spot-card:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.spot-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Ô ảnh: ít nhất vuông (::before), cao thêm theo phần chữ thì ảnh phủ kín (object-fit). */
.spot-card__media { position: relative; overflow: hidden; background: var(--cream-50); border-right: 2px solid var(--ink); }
.spot-card__media::before { content: ''; display: block; padding-top: 100%; }
.spot-card__media > img, .spot-card__media > .spot-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.spot-card__badge {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--ink); border: 1.5px solid var(--ink);
  font-size: .74rem; font-weight: 800; line-height: 1.4;
}

.spot-card__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 18px 20px; }
.spot-card__kicker {
  align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--orange-100); color: var(--ink); border: 1.5px solid var(--ink);
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.45;
}
.spot-card--event .spot-card__kicker { background: var(--yellow-100); }
.spot-card--course .spot-card__kicker { background: var(--green-100); }
.spot-card--membership .spot-card__kicker { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.spot-card__title {
  font-size: clamp(1.04rem, 1.45vw, 1.2rem); font-weight: 800; line-height: 1.3; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spot-card__text {
  color: var(--ink-soft); font-size: .93rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spot-card__meta { color: var(--ink-soft); font-size: .86rem; font-weight: 600; line-height: 1.45; }
.spot-card__foot {
  margin-top: auto; padding-top: 6px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
}
.spot-card__price { font-size: 1.04rem; line-height: 1.3; }
.spot-card__price strong { font-weight: 800; }
.spot-card__price s { margin-left: 6px; color: var(--ink-soft); font-size: .84rem; font-weight: 500; opacity: .72; }
.spot-card__cta {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--orange); color: var(--ink); border: 2px solid var(--ink);
  font-size: .88rem; font-weight: 800; line-height: 1.2;
  transition: background .2s var(--ease);
}
.spot-card:hover .spot-card__cta { background: var(--orange-600); }

/* ── Thẻ gọn (thẻ hẹp hơn 440px: cột phải, điện thoại) ── */
@container spot (max-width: 440px) {
  .spot-card {
    grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px;
    padding: 10px; border-width: 1.5px; border-radius: var(--r); box-shadow: var(--stamp-soft);
  }
  .spot-card:hover { box-shadow: var(--stamp-sm); }
  .spot-card__media { align-self: start; border: 1.5px solid var(--ink); border-radius: 10px; }
  .spot-card__badge { left: 4px; top: 4px; padding: 1px 6px; font-size: .6rem; border-width: 1px; }
  .spot-card__body { padding: 0; gap: 3px; }
  .spot-card__kicker { padding: 1px 8px; font-size: .62rem; border-width: 1px; }
  .spot-card__title { font-size: .96rem; line-height: 1.3; }
  .spot-card__text { display: none; }
  .spot-card__meta {
    font-size: .78rem; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .spot-card__foot { padding-top: 2px; gap: 2px 10px; }
  .spot-card__price { font-size: .9rem; }
  .spot-card__price s { font-size: .76rem; margin-left: 4px; }
  .spot-card__cta { padding: 0; background: none; border: 0; color: #a8480c; font-size: .8rem; }
  .spot-card:hover .spot-card__cta { background: none; text-decoration: underline; }
}

/* ── Lưới 2×2 (trang quà tặng) ── */
.spot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px); }
/* Số ô lẻ (vd sự kiện đã qua, chưa có buổi mới): ô cuối nằm giữa hàng thay vì để trống một bên. */
.spot-grid--odd > .spot-item:last-child {
  grid-column: 1 / -1; justify-self: center;
  width: calc((100% - clamp(16px, 2.2vw, 26px)) / 2);
}
@media (max-width: 860px) {
  .spot-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .spot-grid--odd > .spot-item:last-child { width: 100%; }
}

/* ── Cột phải (trang sản phẩm) ── */
.pd-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; margin-top: 44px; }
.pd-body > * { min-width: 0; }
.pd-body .pd-desc { margin-top: 0; }
.pd-body--solo { grid-template-columns: minmax(0, 1fr); }

.spot-aside__kicker { margin: 0 0 6px; color: #a8480c; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.spot-aside__h { margin: 0 0 14px; font-size: 1.25rem; line-height: 1.3; }
.spot-list { display: grid; gap: 12px; }
.pd-body--solo .spot-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Bám theo khi cuộn — chỉ khi màn đủ cao để thấy trọn cột (thấp hơn thì cuộn bình thường,
   không để đáy cột kẹt ngoài màn hình). 94px = thanh menu dính 70px + khoảng thở. */
@media (min-width: 981px) and (min-height: 760px) {
  .pd-body:not(.pd-body--solo) .spot-aside { position: sticky; top: 94px; }
}
@media (max-width: 980px) {
  .pd-body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .spot-aside { padding-top: 28px; border-top: 1px solid var(--line); }
  .spot-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}