/* ==============================
   APINI HERO – ONE SHEET (final)
   ============================== */

/* WRAP */
.apini-ps-wrap{ max-width:1100px; margin:0 auto; position:relative; }
.apini-ps-wrap{
  --frame-outset: 32px;          /* lồi ra ngoài 2px cho trái/phải/dưới */
  --frame-top-outset: 56px;     /* lồi lên trên (cao hơn tiêu đề) → tùy trang chỉnh 60–90px */
  --frame-radius: 16px;
  --frame-alpha: 1;             /* GSAP/tạm thời fallback sẽ bật lên 1 */
  --frame-line: 2px;            /*  độ dày mép trong của khung */
  overflow: visible;            /* cho phép viền vượt ra ngoài */
}
.apini-ps-wrap{
  margin-bottom: var(--frame-outset); /* chừa đúng bằng phần viền lồi ra */
  margin-top: calc(var(--frame-top-outset) + 5px);
}
/* viền chính */
.apini-ps-wrap::before{
  content:"";
  position:absolute;
  left:   calc(-1 * var(--frame-outset));
  right:  calc(-1 * var(--frame-outset));
  bottom: calc(-1 * var(--frame-outset));
  top:    calc(-1 * var(--frame-top-outset));
  border-radius: var(--frame-radius);
  border: 2px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
  opacity: var(--frame-alpha);
  pointer-events: none;
  z-index: 2;
}
/* lớp “lõm” bên trong */
.apini-ps-wrap::after{
  content:"";
  position:absolute;
  left:   calc(-1 * var(--frame-outset) + 2px);
  right:  calc(-1 * var(--frame-outset) + 2px);
  bottom: calc(-1 * var(--frame-outset) + 2px);
  top:    calc(-1 * var(--frame-top-outset) + 2px);
  border-radius: calc(var(--frame-radius) - 2px);
  box-shadow:
    inset 0 12px 24px rgba(255,255,255,.14),
    inset 0 -18px 28px rgba(0,0,0,.35);
  opacity: var(--frame-alpha);
  pointer-events: none;
  z-index: 2;
}

/* HERO + BIẾN ĐIỀU KHIỂN */
.apini-ps--hero{
  --thumb-bw: 3px;   
  --ruler-top: 330px;                 /* ↑ kéo thanh ngang */
  --ruler-width: min(100%, 420px);     /* dài thanh ngang */
  --desc-left: 10px;                  /* lề trái của desc */
  --bg-overlay-alpha: 0;  /* nền */
  --gap: 12px;
  --hero-h: 540px;
    /* Tiến trình */
  --progress-gap: 1.2px;   /* khoảng cách giữa nút ↔︎ progress (đổi số này nếu muốn) */
  --progress-h: 8px;       /* CHIỀU CAO CỐ ĐỊNH */
  height: var(--hero-h);
  position: relative;
  color:#fff;
  display:grid;
  grid-template-columns:44% 1fr;
  align-items:center;
  gap:18px;
  padding:0 0 210px 0;
  overflow:visible;
}

/* nền lớn */
.apini-ps--hero .apini-hero-canvas{
  position:absolute;
  inset: var(--frame-line);                            /* khít mép viền xanh bên trong */
  border-radius: calc(var(--frame-radius) - var(--frame-line));
  overflow: hidden;
  clip-path: inset(0 round calc(var(--frame-radius) - var(--frame-line)));
  transform-origin: left top;                         /* neo góc trái-trên => cạnh trên/trái luôn khít */
  will-change: transform, opacity;
  z-index:0;
  transform-style:preserve-3d;
}
.apini-ps--hero .apini-hero-canvas::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  border-radius: inherit; clip-path: inherit;
  background: linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.28) 30%,rgba(0,0,0,.55));
  opacity: clamp(.28, var(--bg-overlay-alpha), .75);
  transition: opacity .3s ease;
}
.apini-ps--hero .apini-hero-bg{
  position:absolute; inset:0;                         /* lấp đầy canvas 1:1 */
  background-size: cover; background-position: center;
  filter: brightness(.92) saturate(1.06);
  transition: background-image .45s ease;
  will-change: transform;
}


/* tiêu đề pill */
.apini-ps--hero .apini-hero-head{ position:absolute; left:50%; top:5px; transform:translateX(-50%); width:min(92%,820px); z-index:3; }
.apini-ps--hero .apini-hero-title{
  margin:0; padding:14px 26px; text-align:center; border-radius:999px;
  font-weight:800; letter-spacing:.2px; font-size:clamp(17px,2.6vw,32px); color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.22));
  backdrop-filter: blur(4px) saturate(1.1);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
    /* canh giữa ngang + dọc, tự giãn khi 3 dòng */
  display:flex !important;
  align-items:center;
  justify-content:center;
  text-align:center;

  line-height:1.25;
  -webkit-line-clamp: 3;               /* cho phép tối đa 3 dòng */
  overflow:visible;                     /* để khung tự giãn */
  /* giữ dáng pill khi 1–2 dòng, 3 dòng sẽ tự cao hơn */
  min-height: calc(1.25em * 2 + 28px);  /* 28px ≈ padding trên+dưới (14+14) */
}

/* mô tả bám theo thanh ngang (cách dưới 2px) */
.apini-ps--hero .apini-hero-desc{
  position:absolute !important;
  left:var(--desc-left) !important;
  top: calc(var(--ruler-top) + 2px) !important;
  max-width:30ch;
  padding:8px 18px 16px 48px;
  border-radius:14px; line-height:1.55; color:#fff;
  background: rgba(0,0,0,.42);          /* trước là .25 */
  backdrop-filter: blur(5px) saturate(1.05);
  border-color: rgba(255,255,255,.28);

  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.15);
  z-index:4; overflow:visible;
}
.apini-ps--hero .apini-hero-desc,
.apini-ps--hero .apini-ps-track{ will-change:transform, opacity; }

.apini-ps--hero .apini-hero-desc::before{
  content:"“"; position:absolute; left:12px; top:4px; font-size:44px; line-height:1; opacity:.6;
}
.apini-ps--hero .apini-hero-text{ display:block; }

/* thanh ngang (ruler) – bám mép trên hộp, lệch lên 2px */
.apini-ps--hero .apini-hero-desc > .apini-hero-ruler{
  position:absolute; left:0; top:-2px !important;
  height:4px; width: var(--ruler-width ); border-radius:999px;
  background:linear-gradient(90deg,#00ffbf,#8fffdf,#00ffbf);
  box-shadow:0 0 10px rgba(0,255,191,.8), 0 0 22px rgba(0,255,191,.6), 0 0 36px rgba(0,255,191,.45);
  pointer-events:none; z-index:5;
}

/* thanh dọc (divider) – bám mép phải của thanh ngang */
.apini-ps--hero .apini-hero-desc > .apini-hero-divider{
  position:absolute; top:-2px !important; left: calc(var(--ruler-width) + 2px) !important;
  width:3px; height:calc(100% + 14px); border-radius:2px;
  background:linear-gradient(180deg,#00ffbf,#8fffdf,#00ffbf);
  filter: drop-shadow(0 0 12px #00ffbf);
  pointer-events:none; z-index:5;
}

/* strip thumbnail */
.apini-ps--hero .apini-ps-track{
  position:absolute; right:-210px; bottom:-50px; z-index:3;
  display:flex; gap:var(--gap); padding:0; overflow:visible;
  transition:transform .60s cubic-bezier(.22,.61,.36,1);
    cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y; /* cho phép kéo ngang, vẫn cuộn dọc bình thường */
}
.apini-ps--hero .apini-ps-track.is-dragging{ cursor: grabbing; }
.apini-ps--hero .apini-ps-card{ flex:0 0 clamp(180px,20vw,240px); display:block; text-decoration:none; color:inherit; background:transparent !important; }

.apini-ps--hero .apini-ps-bg--16x9{
  position: relative;          /* để ::before/::after bám chính xác */
  z-index: 0;                  /* tạo stacking context riêng */
  isolation: isolate;          /* cho phép ::after z-index:-1 vẫn thấy */
  display:block; width:100%; aspect-ratio:16/9;
  background-image:var(--apini-img);
  background-size:cover; background-position:center;
  border-radius:16px;
 
 
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.12) inset;
  transition:transform .35s ease, filter .35s ease, opacity .35s ease;
  
}

.apini-ps--hero .apini-ps-bg--16x9::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: var(--thumb-bw);                 /* = 3px */
  background: linear-gradient(45deg, #2ea8ff 0 50%, #00e676 50% 100%);
  /* Khoét rỗng phần giữa -> chỉ còn vòng viền đúng 3px */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.apini-ps--hero .apini-ps-card.is-past   .apini-ps-bg--16x9{ filter:brightness(.86); opacity:.92; }
/* VIỀN GRADIENT 3px (không phủ hình) */

/* HALO phát sáng nhẹ, tỏa ra ngoài theo đúng hướng chéo */
.apini-ps--hero .apini-ps-bg--16x9::after{
  content:"";
  position:absolute;
  inset:-10px;                 /* tỏa ra ngoài 10px */
  padding:10px;                /* tạo “vòng” để còn chỗ cho mask */
  border-radius: calc(16px + 10px);
  background: linear-gradient(45deg,
              rgba(46,168,255,.75) 0 50%,
              rgba(0,230,118,.75) 50% 100%);

  /* khoét rỗng phần giữa => chỉ còn vòng ngoài để blur */
  -webkit-mask:
     linear-gradient(#000 0 0) padding-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  filter: blur(14px);
  pointer-events:none;
  z-index:-1;                  /* nằm DƯỚI thẻ => phát dưới nền */
}

/* prev/next */
.apini-ps--hero .apini-ps-nav{
  position:absolute; z-index:4;
  bottom:calc(18px + (clamp(180px, 20vw, 240px)/2) - 22px);
  left:50%;
  width:44px; height:44px; border-radius:999px;
  border:2px solid rgba(255,255,255,.95); background:rgba(0,0,0,.5);
  color:#fff; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.35); cursor:pointer;
}
.apini-ps--hero .apini-ps-prev{ transform:translateX(-60px); }
.apini-ps--hero .apini-ps-next{ transform:translateX( 60px); }

/* reset khả năng trùng class ở cấp ngoài */
.apini-ps--hero > .apini-hero-ruler,
.apini-ps--hero > .apini-hero-divider{ display:none !important; }

/* Co giãn khi giữ chuột */
.apini-ps--hero .apini-ps-nav{
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.apini-ps--hero .apini-ps-prev:active{ transform: translateX(-60px) scale(.92); }
.apini-ps--hero .apini-ps-next:active{ transform: translateX( 60px) scale(.92); }

/* Pop nhẹ sau khi click (class .tap sẽ được JS gắn trong 220ms) */
.apini-ps--hero .apini-ps-nav.tap{ animation: apini-tap-pop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes apini-tap-pop{
  0%   { transform: translateX(var(--tx,0)) scale(.92); }
  60%  { transform: translateX(var(--tx,0)) scale(1.06); }
  100% { transform: translateX(var(--tx,0)) scale(1); }
}
/* giữ đúng dịch chuyển sẵn có của 2 nút */
.apini-ps--hero .apini-ps-prev{ --tx: -60px; }
.apini-ps--hero .apini-ps-next{ --tx:  60px; }



/* ===== Tiêu đề ở vị trí dấu giữa trên của khung ===== */
.apini-ps-heading{
  position:absolute; top:-57px;
  left:50%; transform:translateX(-50%);   /* giữa khung */
  margin:0; z-index:5;
  font-weight:800; letter-spacing:.4px;
  font-size: clamp(18px, 2.8vw, 36px);
  color:#2ea8ff; text-shadow:0 0 10px rgba(46,168,255,.7), 0 2px 0 rgba(0,0,0,.35);
  pointer-events:none; opacity:1;
  width:auto; max-width:100%;
}



/* ===== Chuẩn bị 3D “lật giấy” ===== */
.apini-ps--hero{ perspective:1200px; transform-style:preserve-3d; }
.apini-reveal{ will-change:transform,opacity; backface-visibility:hidden; }
.apini-from-left{ transform-origin:left center; transform:rotateY(-90deg) translateX(-20px); opacity:0; }
.apini-from-right{ transform-origin:right center; transform:rotateY( 90deg) translateX( 20px); opacity:0; }

/* Lớp nào sẽ “lật”? (để JS add class sẵn) */
.apini-hero-head,
.apini-hero-desc,
.apini-ps-track{ opacity:0; }   /* an toàn – GSAP sẽ đưa về 1 */
/* responsive */


/* Ảo giác strip chạy từ phải → trái */
.apini-ps--hero .apini-ps-card{
    backface-visibility: hidden;
  transition: transform .36s cubic-bezier(.22,.61,.36,1), opacity .36s;
  transform-style: preserve-3d;
}
/* (A) THẺ RỜI BÊN TRÁI: nghiêng đầu trái rồi biến mất */
.apini-ps--hero .apini-ps-card.tilt-out{
  transform-origin: left top;
}
/* Cái SẮP VÀO vị trí mũi tên: trườn từ phải vào */
.apini-ps--hero .apini-ps-card.tilt-out.go{
  /* nghiêng nhẹ + tụt xuống 1 chút + mờ dần */
  transform: translate(-28px, 12px) rotate(-6deg) scale(.98);
  opacity: 0;
  transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .52s;
  /* gợi cảm giác mép trái tụt xuống */
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
}
/* (B) THẺ SẮP VÀO VỊ TRÍ Ở GIỮA: trườn từ phải vào (nhẹ) */
.apini-ps--hero .apini-ps-card.float-in{
  transform: translateX(24px) scale(1.02);
  opacity: 0.01;
}
.apini-ps--hero .apini-ps-card.float-in.go{
  transform: translateX(0) scale(1);
  opacity: 1;
  transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .52s;
}

/* Nghiêng mép phải khi lùi */
.apini-ps--hero .apini-ps-card.tilt-out-r{ transform-origin: right top; }
.apini-ps--hero .apini-ps-card.tilt-out-r.go{
  transform: translate(28px,12px) rotate(6deg) scale(.98);
  opacity: 0;
  transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .52s;
  clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%);
}
/* Thẻ trườn từ trái vào khi lùi */
.apini-ps--hero .apini-ps-card.float-in-r{
  transform: translateX(-24px) scale(1.02);
  opacity: .01;
}
.apini-ps--hero .apini-ps-card.float-in-r.go{
  transform: translateX(0) scale(1);
  opacity: 1;
  transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .52s;
}


/* Ảnh ghost bay vào tâm */
.apini-ghost {
  position: absolute;
  inset: 0;               /* sẽ set left/top/width/height bằng style inline */
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  will-change: transform, opacity, filter;
  pointer-events: none;
  z-index: 9;             /* nằm trên strip */
}

/* Viền lóe sáng nhanh (0.5s) */
.apini-ghost--flash {
  animation: apini-ghost-flash .5s ease-out forwards;
}
@keyframes apini-ghost-flash {
  0%   { box-shadow: 0 0 0 0 rgba(0,255,191,0), 0 18px 40px rgba(0,0,0,.45); }
  25%  { box-shadow: 0 0 14px 8px rgba(0,255,191,.95), 0 18px 40px rgba(0,0,0,.45); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,191,0), 0 18px 40px rgba(0,0,0,.45); }
}

/* Nudge nhẹ cho #2 và #3 khi #1 đang bay */
.apini-ps--hero .apini-ps-card.nudge-up .apini-ps-bg--16x9{
  transform: translateY(-6px) scale(1.02);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
/* === MOBILE LAYOUT FIX (≤1024px) === */
@media (max-width: 1024px){
    /* CENTER thật sự cho pill title */
.apini-ps--hero .apini-hero-head{
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: calc(100% - 20px) !important; /* chừa 10px mỗi bên cho viền */
    top: 5px; /* giữ vị trí như cũ */
}
.apini-ps--hero .apini-hero-title{
  text-align: center !important;  /* chặn rule nào đó bên ngoài */
}
  /* 1) Khung viền luôn vừa màn hình, không tràn ngang */
  .apini-ps-wrap{
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);     /* luôn canh giữa theo viewport */
    --frame-outset: 0px;              /* không lồi ra ngoài */
    --frame-top-outset: 40px;         /* phần “lồi” phía trên nhỏ lại cho gọn */
    overflow: visible;                /* vẫn cho hiệu ứng viền */
  }
  .apini-ps-wrap::before,
  .apini-ps-wrap::after{
    left: 0; right: 0;                /* bám sát mép màn hình */
  }
  /* (Tuỳ chọn an toàn) Ngăn mọi tràn ngang còn sót của layout khác */
  html, body{ overflow-x: hidden; }


      .apini-ps-heading{
    top:-37px;;                                /* nằm trong khung, gần mép trên */
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 20px);           /* không tràn ra ngoài */
    text-align: center;
  }
  /* Canvas vẫn absolute; ta chỉ gán area để “định vị logic” */
  .apini-hero-canvas{ grid-area: canvas; }
  .apini-hero-desc  { grid-area: desc; }



  /* Gọn viền thumbnail cho mobile */
  .apini-ps--hero .apini-ps-bg--16x9{
    border-width: var(--thumb-bw) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.30),
                0 1px 0 rgba(255,255,255,.12) inset;
  }
}



 /* giao diện mobile */
@media (max-width:1024px){

  /* chừa đủ chỗ cho 2 nút + strip ảnh */
  .apini-ps--hero{
    --mobile-w: 42ch;  
    --hero-h: 430px; 
    --ruler-top: 300px;
    --thumb-h: clamp(84px, 22vw, 120px);   /* cao mỗi thumbnail */
    --thumb-inset: 5px;                    /* cách đáy khung ảnh 5px */
    --gap-above-thumbs: 6px;               /* khoảng cách giữa nút và dải ảnh */
    --nav-size: 44px;                      /* đường kính nút */    
    padding-bottom: 140px;     /* 170px chưa đủ, 240px an toàn cho 3 thumb */
    overflow: visible;
  }
  /* khung mô tả */
  .apini-ps--hero .apini-hero-desc{
        width: var(--mobile-w);
        max-width: none;
  }
  /* điều chỉnh khung mô tả */
 .apini-ps--hero{
  
  --ruler-top: calc(var(--hero-h) - var(--frame-line) + 15px);
}

  /* 2) 2 NÚT: đặt ngay TRÊN dải ảnh (bên trong khung) */
  .apini-ps--hero .apini-ps-nav{
    position: absolute;
    top: auto;
    bottom: calc(
      var(--frame-line) + var(--thumb-inset) + var(--thumb-h) + var(--gap-above-thumbs ) - 20px);/* nằm ngay trên dải ảnh */
    left: 50%;
    transform: translateX(-50%);
    width:  var(--nav-size);
    height: var(--nav-size);
    z-index: 6;                          /* cao hơn track */
  }
  .apini-ps--hero .apini-ps-prev{ transform: translateX(-60px); }
  .apini-ps--hero .apini-ps-next{ transform: translateX( 60px); }
    /* mobile ẩn thanh dọc */
  .apini-ps--hero .apini-hero-desc > .apini-hero-divider{
    display: none !important;
  }
  /* 1) DẢI ẢNH: nằm trong khung ảnh, cách đáy 5px */
  .apini-ps--hero .apini-ps-track{
    position: absolute;
    top: auto;
    bottom: calc(var(--frame-line) + var(--thumb-inset)); /* 5px trong khung */
    left:  calc(var(--frame-line) + 8px);
    right: calc(var(--frame-line) + 8px);
    width: auto;                     /* bám theo trái/phải đã set */
    height: var(--thumb-h);
    transform: none !important;      /* bỏ translateX(-50%) cũ */
    z-index: 5;
    overflow: hidden;
  }

  /* 3 ảnh / khung điện thoại với đúng khoảng cách gap */
  .apini-ps--hero .apini-ps-card{
    flex: 0 0 calc((100vw - 24px - var(--gap) - var(--gap)) / 3);
  }

  /* chừa thêm khoảng dưới toàn khung để nội dung sau không đè lên strip */
  .apini-ps-wrap{
    max-width: 100vw;
    margin-bottom: 160px;       /* tạo “đệm” cho phần vượt ra ngoài */
  }
}



/* ===== Progress bar for APINI HERO slider ===== */
/* Base */
.apini-ps-wrap.apini-ps--hero > .apini-ps-progress{
  position: absolute;
  height: var(--progress-h);
  z-index: 6;
}

@media (min-width:1025px){
    /* Desktop: thanh tiến trình nằm trên cạnh dưới của khung ảnh */
  .apini-ps-wrap.apini-ps--hero > .apini-ps-progress{
    top: auto !important;
    bottom: calc(var(--frame-line) + 4px) !important;  /* 3px trên mép trong */
    left:  calc(var(--frame-line) + 10px);
    right: calc(var(--frame-line) + 10px);
  }
}




/* Đường base mỏng */
.apini-ps--hero .apini-ps-progress::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height: 4px; transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.15));
  box-shadow: 0 1px 0 rgba(0,0,0,.2) inset;
}

/* Khối chạy: bắt đầu nhỏ (min-width), nở ra theo % và chuyển màu trắng → xanh */
.apini-ps--hero .apini-ps-progress__fill{
  position:absolute; left:0; top:50%;
  transform: translateY(-50%);
  width: 0%;                         /* sẽ được JS set theo % */
  min-width: 14px;                   /* “hạt” nhỏ lúc bắt đầu */
  height: var(--progress-h);
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff 0%, #00e676 100%);
  box-shadow:
    0 0 10px rgba(0,230,118,.35),
    0 1px 0 rgba(255,255,255,.25) inset;
  /* Đổi sắc độ theo tiến trình */
  filter:
    hue-rotate(calc(-40deg * var(--p,0)))
    saturate(calc(.6 + var(--p,0)))
    brightness(calc(.92 + .08 * var(--p,0)));
  transition:
    width .28s cubic-bezier(.22,.61,.36,1),
    filter .28s ease,
    box-shadow .28s ease;
}

/* Núm kéo vẫn bám mép trái của khối chạy và cũng “xanh” dần */
.apini-ps--hero .apini-ps-progress__knob{
  --size: 16px;
  position:absolute;
  top:50%;
  left: 0%;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, #e5f7f0);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 6px 14px rgba(0,0,0,.28), 0 0 0 2px rgba(0,0,0,.1) inset;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .1s ease;
  filter: hue-rotate(calc(var(--p,0) * -30deg)) saturate(calc(.7 + var(--p,0)));
}
.apini-ps--hero .apini-ps-progress__knob:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 0 2px rgba(0,0,0,.12) inset;
}
.apini-ps--hero .apini-ps-progress__knob:active{
  transform: translate(-50%,-50%) scale(.96);
}
.apini-ps--hero .apini-ps-progress__knob:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,255,191,.5), 0 8px 18px rgba(0,0,0,.35);
}

@media (max-width:1024px){
  .apini-ps-wrap.apini-ps--hero > .apini-ps-progress{
    /* đặt đè lên ảnh (canvas) sát đáy khung trong 2px */
    top:auto !important;
    bottom: calc(var(--frame-line) + 2px) !important;
    left:  calc(var(--frame-line) + 8px);
    right: calc(var(--frame-line) + 8px);
    z-index: 7;             /* cao hơn ảnh nền */
  }
}
/* === DESKTOP: cố định viewport của strip = 4 thumbnails === */
@media (min-width: 1025px){
  .apini-ps--hero{
    /* dùng chung cho card width thay vì viết clamp lặp lại */
    --thumb-w: clamp(180px, 20vw, 240px);
  }

  /* mỗi card chiếm đúng --thumb-w (ghi đè rule cũ) */
  .apini-ps--hero .apini-ps-card{
    flex: 0 0 var(--thumb-w) !important;
  }

  /* track chỉ hiển thị khung bằng 4 card + 3 khoảng gap */
  .apini-ps--hero .apini-ps-track{
    overflow: hidden !important;
    width: calc(4 * var(--thumb-w) + 3 * var(--gap)) !important;
  }
}

/* === MOBILE: đã là 3 cái, chỉ chắc chắn overflow hidden === */
@media (max-width: 1024px){
  .apini-ps--hero .apini-ps-track{
    overflow: hidden !important; /* giữ nguyên hiệu ứng/JS */
  }
  /* (giữ nguyên rule bạn đã có: flex-basis = (…)/3) */
}