/* Thẻ sản phẩm chạy vòng ở đầu trang chủ (HTML sinh bằng tools/gen-hero-orbit.mjs, chuyển động ở hero-orbit.js).
   Mặc định (chưa có JS, hoặc máy bật giảm chuyển động): lưới 2 cột tĩnh như trước.
   Khi JS chạy, .orbit có lớp .is-live: thẻ đặt tuyệt đối, JS chỉ đổi transform/opacity/z-index. */
.orbit{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:14px;align-content:center;height:100%}
.orbit-card{position:relative;display:block;width:100%;padding:0;font:inherit;text-align:left;cursor:pointer;aspect-ratio:1.5;overflow:hidden;border-radius:var(--r-card,16px);background:#fff;border:1px solid #e1e7ed;box-shadow:0 14px 30px rgba(26,56,90,.12);color:var(--ink)}
.orbit-card img{display:block;width:100%;height:100%;object-fit:cover}
.orbit-label{position:absolute;left:10px;bottom:9px;max-width:calc(100% - 20px);padding:6px 10px;border-radius:var(--r-chip,10px);background:#fffefc;box-shadow:0 8px 22px rgba(16,44,70,.14);font-size:13px;line-height:1.4;font-weight:600;color:var(--ink)}
.orbit .orbit-label .orbit-short{display:none}
.orbit .orbit-label .orbit-long{display:inline}
.orbit-card:focus-visible{outline:3px solid rgba(22,90,156,.55);outline-offset:3px}

/* Thông báo "Coming soon" khi bấm thẻ sản phẩm chưa có trang */
.hero-stage--orbit{position:relative}
.orbit-toast{position:absolute;left:50%;bottom:6%;z-index:300;width:min(340px,calc(100% - 24px));display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #d8e7f5;border-left:4px solid var(--red,#e3262e);box-shadow:0 18px 40px rgba(6,61,121,.22);color:var(--ink);font-size:14px;line-height:1.5;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .25s ease,transform .3s ease}
.orbit-toast.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.orbit-toast b{font-size:15px;color:#063d79}
.orbit-toast a{color:#165a9c;font-weight:700}

/* Khu vực quay cao hơn khung cũ của .hero-stage 10% (chủ site yêu cầu 28/10/2026) */
@media(min-width:821px){.hero-stage.hero-stage--orbit{height:clamp(363px,37.4vw,473px)}}
@media(min-width:821px) and (max-width:1000px){.hero-stage.hero-stage--orbit{height:396px}}

/* Đang chạy vòng */
.orbit.is-live{display:block;touch-action:pan-y;cursor:default}
.orbit.is-live .orbit-card{position:absolute;left:50%;top:50%;width:var(--cw,55%);will-change:transform,opacity;transition:box-shadow .3s ease}
.orbit.is-live .orbit-card.is-hot{box-shadow:0 26px 52px rgba(8,46,81,.24),0 8px 18px rgba(14,62,103,.14)}
.orbit.is-dragging .orbit-card{cursor:grabbing}

/* Điện thoại: bỏ lưới 2 cột cũ của .hero-stage, dành chỗ cho vòng quay */
@media(max-width:820px){
  .hero-stage.hero-stage--orbit{display:block;height:auto;width:100%;max-width:506px;margin:6px auto 0;perspective:none}
  .orbit.is-live{height:clamp(275px,calc((58vw + var(--n,4) * 4vw) * 1.1),418px)}
}
@media(max-width:430px){
  .orbit{gap:10px}
  .orbit-label{left:7px;bottom:7px;padding:5px 8px;font-size:13px}
  .orbit .orbit-label .orbit-long{display:none}
  .orbit .orbit-label .orbit-short{display:inline}
}