/* Product Carousel Swiper (RITA) — CSS tinh, class-based (.rita-ps) + CSS var --ps-ratio.
   Below-the-fold: an toan de tach file (JCH gop+minify+cache). An <=700px (ban mobile la new-products). */

/* full-bleed BG bang left+transform (KHONG dung margin -> legacy .popular-products margin:0 khong pha duoc) */
.rita-ps{width:100vw;max-width:100vw;position:relative;left:50%;transform:translateX(-50%);
  background:var(--ps-bg,rgba(212,239,252,1));padding:135px 0 !important}   /* !important de thang legacy .popular-products{padding:0} */
.rita-ps .ps-heading{text-align:center;margin:0 0 18px;font-size:26px;font-weight:700;color:#1a3867}
/* slides BOXED trong container (bg full nhung noi dung can giua ~1200px) */
.rita-ps .ps-inner{max-width:1200px;margin:0 auto;padding:0 56px;position:relative;box-sizing:border-box}  /* gutter 56 -> nut cach slide 20px */

.rita-ps .ps-carousel{position:relative;overflow:hidden}
.rita-ps .ps-track{display:flex;align-items:stretch}
.rita-ps .ps-slide{flex-shrink:0;height:auto}
.rita-ps .ps-slide>a,.rita-ps .ps-slide>span{display:block;width:100%;
  aspect-ratio:var(--ps-ratio,250/330);overflow:hidden;border-radius:6px;background:#fff}
.rita-ps .ps-slide img{width:100%;height:100%;object-fit:cover;display:block}

.rita-ps .ps-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:0;color:#000;
  font-size:36px;line-height:1;user-select:none;transition:opacity .2s}
.rita-ps .ps-nav:hover{opacity:.55}
.rita-ps .ps-prev{left:0}.rita-ps .ps-next{right:0}
.rita-ps .ps-nav.swiper-button-disabled{opacity:.35;cursor:default}

.rita-ps .ps-pagination{text-align:center;margin-top:18px;line-height:0}
.rita-ps .ps-bullet{display:inline-block;width:10px;height:10px;border-radius:50%;background:#a9c7dc;opacity:1;
  margin:0 5px;cursor:pointer;transition:background .2s;vertical-align:middle}
.rita-ps .ps-bullet-active{background:#ff0000}

@media (max-width:1023px){.rita-ps{padding:90px 0 !important}}
@media (max-width:767px){.rita-ps{padding:56px 0 !important}.rita-ps .ps-inner{padding:0 44px}
  .rita-ps .ps-prev{left:0}.rita-ps .ps-next{right:0}.rita-ps .ps-nav{font-size:30px}}
@media (max-width:700px){.rita-ps{display:none}}      /* an tren mobile — ban mobile la new-products */
@media (max-width:480px){.rita-ps{padding:40px 0 !important}}

/* ===== BỌT KHÍ nền (bubbles) — lop .rita-bubbles do carousel.js tu tao, nam DUOI noi dung ===== */
.rita-ps .rita-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.rita-ps>*:not(.rita-bubbles){position:relative;z-index:1}
.rita-ps .rb-bubble{position:absolute;top:0;left:0;border-radius:50%;will-change:transform;pointer-events:none;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 22%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.02) 100%);
  box-shadow:inset 2px 3px 6px rgba(255,255,255,.65),inset -4px -6px 12px rgba(30,110,175,.2),0 6px 18px rgba(20,90,150,.12);
  border:1px solid rgba(255,255,255,.4)}
.rita-ps .rb-bubble::after{content:'';position:absolute;top:14%;left:18%;width:26%;height:18%;border-radius:50%;
  background:rgba(255,255,255,.85);filter:blur(2px);transform:rotate(-25deg)}