/* Bảng giá — rộng bằng khối SẢN PHẨM (.row 1120px), sát banner phía dưới */
.cms-price-ticker-shell {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding: 0;
  box-sizing: border-box;
}

.cms-price-ticker-shell > .row {
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cms-price-ticker-shell > .row > .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cms-price-ticker-shell .col {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.cms-home-hero-band .cms-home-banner-root .flickity-viewport,
.cms-home-hero-band .cms-home-banner-root .flickity-slider {
  border-radius: 0 !important;
}

/* Không hở giữa bảng giá và banner */
.cms-home-hero-band .cms-price-ticker-shell + .cms-home-banner-root,
.cms-price-ticker-shell + .cms-home-banner-root,
.cms-price-ticker-shell + .slider-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.cms-price-ticker-shell + .cms-home-banner-root .slider,
.cms-price-ticker-shell + .slider-wrapper .slider {
  margin-top: 0 !important;
}

.cms-price-ticker-shell + .cms-home-banner-root .slider .row,
.cms-price-ticker-shell + .cms-home-banner-root .slider .col,
.cms-price-ticker-shell + .cms-home-banner-root .slider .col-inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.cms-price-ticker-host {
  --cms-ticker-bg: #0a1525;
  --cms-ticker-text: #f4f7fb;
  --cms-ticker-price: #d4af37;
  --cms-ticker-date: rgba(212, 175, 55, 0.55);
  width: 100%;
  overflow: hidden;
  background: var(--cms-ticker-bg);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-bottom: none;
  box-shadow: none;
  position: relative;
  z-index: 52;
  border-radius: 0;
  margin: 0;
}

.cms-price-ticker-host.cms-price-ticker-host--off {
  display: none;
  min-height: 0;
}

.cms-price-ticker-host.cms-price-ticker-pending {
  min-height: 36px;
}

.cms-price-ticker-host.cms-price-ticker-pending::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0f1d32, #152a45, #0f1d32);
  background-size: 200% 100%;
  animation: cms-ticker-sk 1.1s linear infinite;
}

@keyframes cms-ticker-sk {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.cms-price-ticker {
  --cms-ticker-dur: 32s;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 36px;
  max-height: 36px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.cms-price-ticker::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.02) 2px,
    rgba(255, 255, 255, 0.02) 4px
  );
  opacity: 0.35;
}

.cms-price-ticker__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  background: linear-gradient(135deg, rgba(221, 51, 51, 0.95), rgba(160, 30, 30, 0.95));
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  border-right: 1px solid rgba(212, 175, 55, 0.4);
  z-index: 3;
}

.cms-price-ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.cms-price-ticker__viewport::before,
.cms-price-ticker__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
}

.cms-price-ticker__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--cms-ticker-bg), transparent);
}

.cms-price-ticker__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--cms-ticker-bg), transparent);
}

/* Luôn một làn chạy ngang (ảnh mẫu) */
.cms-price-ticker--single .cms-price-ticker__lane,
.cms-price-ticker--dual .cms-price-ticker__lane {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.cms-price-ticker--dual .cms-price-ticker__viewport {
  flex-direction: row;
}

.cms-price-ticker__lane--left {
  border-right: 1px solid rgba(212, 175, 55, 0.2);
}

.cms-price-ticker__track {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
  animation-play-state: running !important;
}

/* Marquee LTR — một làn (21 kiểu, trừ rtl & 2 làn) */
.cms-price-ticker--mode-ltr .cms-price-ticker__track,
.cms-price-ticker--mode-karaoke .cms-price-ticker__track,
.cms-price-ticker--mode-karaoke-fill .cms-price-ticker__track,
.cms-price-ticker--mode-type-reveal .cms-price-ticker__track,
.cms-price-ticker--mode-shimmer .cms-price-ticker__track,
.cms-price-ticker--mode-wave .cms-price-ticker__track,
.cms-price-ticker--mode-bounce .cms-price-ticker__track,
.cms-price-ticker--mode-pulse .cms-price-ticker__track,
.cms-price-ticker--mode-glow .cms-price-ticker__track,
.cms-price-ticker--mode-gradient-flow .cms-price-ticker__track,
.cms-price-ticker--mode-led-blink .cms-price-ticker__track,
.cms-price-ticker--mode-neon .cms-price-ticker__track,
.cms-price-ticker--mode-glitch .cms-price-ticker__track,
.cms-price-ticker--mode-fade-trail .cms-price-ticker__track,
.cms-price-ticker--mode-scale-pop .cms-price-ticker__track,
.cms-price-ticker--mode-scanline .cms-price-ticker__track {
  animation: cms-ticker-marquee-ltr var(--cms-ticker-dur) linear infinite;
}

.cms-price-ticker--mode-elastic .cms-price-ticker__track {
  animation: cms-ticker-marquee-ltr var(--cms-ticker-dur) cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.cms-price-ticker--mode-led-step .cms-price-ticker__track {
  animation: cms-ticker-marquee-ltr var(--cms-ticker-dur) steps(28, end) infinite;
}

.cms-price-ticker--mode-rtl .cms-price-ticker__track {
  animation: cms-ticker-marquee-rtl var(--cms-ticker-dur) linear infinite;
}

@keyframes cms-ticker-marquee-ltr {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes cms-ticker-marquee-rtl {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.cms-price-ticker--mode-center-out .cms-price-ticker__lane--left .cms-price-ticker__track {
  animation: cms-ticker-marquee-ltr var(--cms-ticker-dur) linear infinite;
}

.cms-price-ticker--mode-center-out .cms-price-ticker__lane--right .cms-price-ticker__track {
  animation: cms-ticker-marquee-rtl var(--cms-ticker-dur) linear infinite;
}

.cms-price-ticker--mode-outside-in .cms-price-ticker__lane--left .cms-price-ticker__track {
  animation: cms-ticker-marquee-rtl var(--cms-ticker-dur) linear infinite;
}

.cms-price-ticker--mode-outside-in .cms-price-ticker__lane--right .cms-price-ticker__track {
  animation: cms-ticker-marquee-ltr var(--cms-ticker-dur) linear infinite;
}

.cms-price-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 36px;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--cms-ticker-text);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.cms-price-ticker__item-label {
  font-weight: 600;
  color: var(--cms-ticker-text);
}

.cms-price-ticker__item-price {
  font-weight: 700;
  color: var(--cms-ticker-price);
  font-variant-numeric: tabular-nums;
}

.cms-price-ticker__item-date {
  font-size: 11px;
  color: var(--cms-ticker-date);
  font-weight: 500;
  opacity: 0.85;
}

.cms-price-ticker__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cms-ticker-price);
  opacity: 0.85;
  flex-shrink: 0;
}

/* —— Karaoke: sóng sáng quét —— */
.cms-price-ticker--mode-karaoke .cms-price-ticker__viewport {
  position: relative;
}

.cms-price-ticker__karaoke-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  max-width: 200px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.12),
    rgba(255, 255, 255, 0.22),
    rgba(212, 175, 55, 0.12),
    transparent
  );
  animation: cms-ticker-karaoke-beam var(--cms-ticker-dur) linear infinite;
}

@keyframes cms-ticker-karaoke-beam {
  from {
    left: -30%;
  }
  to {
    left: 100%;
  }
}

.cms-price-ticker--mode-karaoke .cms-price-ticker__item {
  animation: cms-ticker-karaoke-item calc(var(--cms-ticker-dur) / var(--cms-ticker-n, 8)) ease-in-out infinite;
  animation-delay: calc(var(--cms-ticker-i, 0) * (var(--cms-ticker-dur) / var(--cms-ticker-n, 8)) * 0.5);
}

@keyframes cms-ticker-karaoke-item {
  0%,
  100% {
    background: transparent;
    filter: brightness(1);
  }
  45%,
  55% {
    background: rgba(212, 175, 55, 0.22);
    filter: brightness(1.35);
    box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.15);
  }
}

/* Karaoke fill — gradient chạy trên chữ */
.cms-price-ticker--mode-karaoke-fill .cms-price-ticker__item-label,
.cms-price-ticker--mode-karaoke-fill .cms-price-ticker__item-price {
  background-image: linear-gradient(
    90deg,
    var(--cms-ticker-text) 0%,
    var(--cms-ticker-text) 35%,
    var(--cms-ticker-price) 50%,
    var(--cms-ticker-text) 65%,
    var(--cms-ticker-text) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cms-ticker-karaoke-fill 2.4s linear infinite;
}

@keyframes cms-ticker-karaoke-fill {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* Type reveal */
.cms-price-ticker--mode-type-reveal .cms-price-ticker__item {
  animation: cms-ticker-type-reveal calc(var(--cms-ticker-dur) / var(--cms-ticker-n, 8)) ease-in-out infinite;
  animation-delay: calc(var(--cms-ticker-i, 0) * (var(--cms-ticker-dur) / var(--cms-ticker-n, 8)) * 0.45);
}

@keyframes cms-ticker-type-reveal {
  0%,
  25%,
  100% {
    clip-path: inset(0 100% 0 0);
    opacity: 0.35;
  }
  40%,
  60% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* Shimmer */
.cms-price-ticker--mode-shimmer .cms-price-ticker__item {
  position: relative;
  overflow: hidden;
}

.cms-price-ticker--mode-shimmer .cms-price-ticker__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  animation: cms-ticker-shimmer 2.2s ease-in-out infinite;
}

@keyframes cms-ticker-shimmer {
  to {
    transform: translateX(120%);
  }
}

/* Wave */
.cms-price-ticker--mode-wave .cms-price-ticker__item {
  animation: cms-ticker-wave 2.5s ease-in-out infinite;
  animation-delay: calc(var(--cms-ticker-i, 0) * 0.15s);
}

@keyframes cms-ticker-wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Bounce */
.cms-price-ticker--mode-bounce .cms-price-ticker__item {
  animation: cms-ticker-bounce-item 1.1s ease-in-out infinite;
  animation-delay: calc(var(--cms-ticker-i, 0) * 0.08s);
}

@keyframes cms-ticker-bounce-item {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Pulse */
.cms-price-ticker--mode-pulse .cms-price-ticker__item {
  animation: cms-ticker-pulse 1.4s ease-in-out infinite;
  animation-delay: calc(var(--cms-ticker-i, 0) * 0.12s);
}

@keyframes cms-ticker-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.88;
  }
}

/* Glow */
.cms-price-ticker--mode-glow .cms-price-ticker__item-price {
  animation: cms-ticker-glow 1.8s ease-in-out infinite;
}

@keyframes cms-ticker-glow {
  0%,
  100% {
    text-shadow: 0 0 4px transparent;
  }
  50% {
    text-shadow: 0 0 10px var(--cms-ticker-price), 0 0 18px rgba(212, 175, 55, 0.45);
  }
}

/* Gradient flow on price */
.cms-price-ticker--mode-gradient-flow .cms-price-ticker__item-price {
  background-image: linear-gradient(
    90deg,
    var(--cms-ticker-price),
    #fff8dc,
    var(--cms-ticker-price),
    #c9a227,
    var(--cms-ticker-price)
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cms-ticker-gradient-flow 3s linear infinite;
}

@keyframes cms-ticker-gradient-flow {
  to {
    background-position: 300% 0;
  }
}

/* LED blink */
.cms-price-ticker--mode-led-blink .cms-price-ticker__item {
  animation: cms-ticker-led-blink 1.2s step-end infinite;
  animation-delay: calc(var(--cms-ticker-i, 0) * 0.05s);
}

@keyframes cms-ticker-led-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.45;
  }
}

/* Neon */
.cms-price-ticker--mode-neon .cms-price-ticker__item-label,
.cms-price-ticker--mode-neon .cms-price-ticker__item-price {
  animation: cms-ticker-neon 1.6s ease-in-out infinite;
}

@keyframes cms-ticker-neon {
  0%,
  100% {
    text-shadow: 0 0 2px var(--cms-ticker-price);
    filter: brightness(1);
  }
  50% {
    text-shadow:
      0 0 6px var(--cms-ticker-price),
      0 0 14px var(--cms-ticker-price),
      0 0 22px rgba(212, 175, 55, 0.5);
    filter: brightness(1.25);
  }
}

/* Glitch */
.cms-price-ticker--mode-glitch .cms-price-ticker__item {
  animation: cms-ticker-glitch 3.5s infinite;
}

@keyframes cms-ticker-glitch {
  0%,
  90%,
  100% {
    transform: translate(0);
  }
  91% {
    transform: translate(-2px, 1px);
  }
  92% {
    transform: translate(2px, -1px);
  }
  93% {
    transform: translate(0);
  }
}

/* Fade trail */
.cms-price-ticker--mode-fade-trail .cms-price-ticker__item {
  animation: cms-ticker-fade-trail calc(var(--cms-ticker-dur) / var(--cms-ticker-n, 8)) ease-in-out infinite;
  animation-delay: calc(var(--cms-ticker-i, 0) * (var(--cms-ticker-dur) / var(--cms-ticker-n, 8)) * 0.4);
}

@keyframes cms-ticker-fade-trail {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* Scale pop */
.cms-price-ticker--mode-scale-pop .cms-price-ticker__item {
  animation: cms-ticker-scale-pop 1.3s ease-in-out infinite;
  animation-delay: calc(var(--cms-ticker-i, 0) * 0.1s);
}

@keyframes cms-ticker-scale-pop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

/* Scanline overlay */
.cms-price-ticker__scanlines {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  opacity: 0.35;
  animation: cms-ticker-scan 8s linear infinite;
}

@keyframes cms-ticker-scan {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 40px;
  }
}

@media (max-width: 549px) {
  .cms-price-ticker {
    font-size: 12px;
    height: 34px;
    max-height: 34px;
  }
  .cms-price-ticker__badge,
  .cms-price-ticker__viewport,
  .cms-price-ticker--single .cms-price-ticker__lane,
  .cms-price-ticker--dual .cms-price-ticker__lane,
  .cms-price-ticker__item {
    height: 34px;
  }
  .cms-price-ticker__badge {
    padding: 0 8px;
    font-size: 9px;
  }
  .cms-price-ticker__item {
    padding: 0 12px;
    gap: 6px;
  }
  .cms-price-ticker__item-date {
    display: none;
  }
}

/* Vẫn chạy chữ; chỉ chậm hơn khi hệ thống bật giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .cms-price-ticker__track {
    animation-duration: calc(var(--cms-ticker-dur) * 1.75) !important;
  }
  .cms-price-ticker__item,
  .cms-price-ticker__item-label,
  .cms-price-ticker__item-price,
  .cms-price-ticker__karaoke-beam,
  .cms-price-ticker__scanlines {
    animation-duration: calc(var(--cms-ticker-dur) * 1.75) !important;
  }
  .cms-price-ticker-host.cms-price-ticker-pending::before {
    animation-duration: 1.8s;
  }
}