/* hero-arc.css — Hero băng chuyền vòng cung 3D (theme Tàng Thư Các) */

.archero { position: relative; margin: 22px 0 8px; }
.archero__stage {
  position: relative; height: 486px; overflow: hidden; isolation: isolate;
  background: transparent; border: 0; box-shadow: none;
  --arc-glow: color-mix(in oklab, var(--accent) 80%, #e8a6c0);
  --arc-orn: color-mix(in oklab, var(--accent) 55%, #fff);
  --arc-orn-soft: color-mix(in oklab, var(--accent) 30%, transparent);
}
.archero::after { content: none; }

/* info */
.archero .info { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 7; text-align: center; padding: 0 24px; pointer-events: none; }
.archero .info::before { content: none; }
.archero .info__tag { display: inline-flex; align-items: center; gap: 7px; font-family: 'Lora', serif; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--arc-glow); background: rgba(10,8,18,.5);
  border: 1px solid var(--arc-orn-soft); padding: 5px 13px; border-radius: 999px; margin-bottom: 11px; }
.archero .info__title { font-family: 'Lora', serif; font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; margin: 0 0 6px; color: var(--text);
  text-shadow: 0 0 26px color-mix(in oklab, var(--arc-glow) 45%, transparent); }
.archero .info__desc { font-family: 'Lora', serif; font-size: 14px; color: var(--text-2); max-width: 52ch; margin: 0 auto 16px; line-height: 1.6; text-wrap: pretty; }
.archero .info__cta { display: inline-flex; gap: 10px; pointer-events: auto; }
.archero .info__btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Lora', serif; font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; border: 0; border-radius: 999px; padding: 11px 24px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 55%, #000)); box-shadow: 0 8px 24px -8px var(--accent); white-space: nowrap; }
.archero .info__btn svg { width: 16px; height: 16px; }
.archero .info__btn--ghost { background: rgba(255,255,255,.06); border: 1px solid var(--arc-orn-soft); box-shadow: none; }

/* arc track */
.archero .arc { position: absolute; left: 50%; top: 30px; width: 0; height: 300px; z-index: 4;
  perspective: 1500px; perspective-origin: 50% 42%; transform-style: preserve-3d; }
.archero .cell { position: absolute; left: 0; top: 0; cursor: pointer; text-decoration: none;
  transition: transform .7s cubic-bezier(.3,.7,.25,1), opacity .6s, filter .6s; transform-style: preserve-3d; will-change: transform; }
.archero .cell__cv { position: relative; overflow: hidden; width: 100%; height: 100%; display: block; }
.archero .cell__cv .cover { width: 100%; height: 100%; aspect-ratio: auto; }
.archero .cell__cv .cover__body, .archero .cell__cv .cover__tex { display: none; }

/* dots */
.archero .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; gap: 7px; z-index: 8; }
.archero .dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.28); transition: width .3s, background .3s; }
.archero .dots button[data-on="1"] { width: 22px; border-radius: 6px; background: var(--accent); }

/* ---- RECTANGLE variant ---- */
.archero .v-rect .cell { width: 196px; height: 260px; }
.archero .v-rect .cell__cv { border-radius: 10px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.8); }
.archero .v-rect .cell.is-center .cell__cv { box-shadow: 0 40px 70px -20px rgba(0,0,0,.85), 0 0 50px -10px color-mix(in oklab, var(--accent) 70%, transparent); }
.archero .v-rect .frame { position: absolute; inset: -8px; border: 1px solid var(--arc-orn); border-radius: 8px; pointer-events: none; }
.archero .v-rect .frame::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--arc-orn-soft); border-radius: 3px; }
.archero .v-rect .pin { position: absolute; width: 8px; height: 8px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 10px 2px var(--arc-glow); }
.archero .v-rect .pin.tl { top: -12px; left: -12px; } .archero .v-rect .pin.tr { top: -12px; right: -12px; }
.archero .v-rect .pin.bl { bottom: -12px; left: -12px; } .archero .v-rect .pin.br { bottom: -12px; right: -12px; }
.archero .v-rect .cell__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 10px; font-size: 12.5px; font-weight: 600;
  color: #fff; text-align: center; background: linear-gradient(0deg, rgba(7,5,12,.92), transparent); text-shadow: 0 1px 6px #000; }
.archero .v-rect .cell.is-center .cell__name { opacity: 0; }

/* ---- DIAMOND variant ---- */
.archero .v-diam .cell { width: 198px; height: 198px; }
.archero .v-diam .cell__cv { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.archero .v-diam .cell__cv .cover { transform: scale(1.42); transform-origin: center; }
.archero .v-diam .dframe { position: absolute; inset: 0; pointer-events: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: inset 0 0 0 1.5px var(--arc-orn), inset 0 0 0 10px var(--arc-orn-soft); }
.archero .v-diam .dglow { position: absolute; inset: -2px; pointer-events: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(135deg, var(--arc-glow), transparent 60%); filter: drop-shadow(0 0 6px var(--arc-glow)); opacity: .55; }
.archero .v-diam .dgem { position: absolute; width: 9px; height: 9px; background: #fff; transform: translate(-50%,-50%) rotate(45deg);
  box-shadow: 0 0 12px 3px var(--arc-glow); z-index: 3; }
.archero .v-diam .dgem.t { top: 0; left: 50%; } .archero .v-diam .dgem.b { top: 100%; left: 50%; }
.archero .v-diam .dgem.l { top: 50%; left: 0; } .archero .v-diam .dgem.r { top: 50%; left: 100%; }

/* mobile */
@media (max-width: 860px) {
  .archero__stage { height: 446px; }
  .archero .v-rect .cell { width: 168px; height: 224px; }
  .archero .v-diam .cell { width: 172px; height: 172px; }
}
@media (max-width: 560px) {
  .archero__stage { height: 392px; }
  .archero .info__desc { display: none; }
  .archero .info { bottom: 14px; }
  .archero .info__tag { font-size: 10px; margin-bottom: 8px; }
  .archero .info__title { font-size: 19px; line-height: 1.25; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* mobile: chỉ 1 bìa/lần → bìa to, căn giữa, cân lề trên–dưới */
  .archero .arc { top: 16px; }
  .archero .v-rect .cell { width: 222px; height: 296px; }
  .archero .v-diam .cell { width: 250px; height: 250px; }
}