/* Haikotek Lab carousel — v1.1.0. File mới, không ghi đè luật v1.4 ngoài phạm vi .lab */
.lab{--cw:min(64vw,1180px);--ratio:16/9;--gap:20px;--r:1.5rem;--ease:cubic-bezier(.25,.1,.25,1);--ease-out:cubic-bezier(.16,1,.3,1);--dur:.9s;--auto:7s;--sw:clamp(240px,19vw,320px);
  position:relative;margin-top:clamp(2.5rem,5vw,4rem);overflow-x:clip;color:#faf8f5;-webkit-tap-highlight-color:transparent}
:where(.lab) ul{list-style:none;margin:0;padding:0}
.lab-sec{overflow-x:clip}
.lab-sec .lab{margin-inline:calc(50% - 50vw)}
.lab-sec{padding-bottom:clamp(4rem,7vw,6rem)}
/* ---------- big track ---------- */
.lab-stage{position:relative;display:grid;justify-content:center;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.lab-stage.is-drag{cursor:grabbing}
.lab-slide{grid-area:1/1;position:relative;width:var(--cw);border-radius:var(--r);
  transform:translate3d(calc(var(--d,0) * (var(--cw) + var(--gap)) + var(--dx,0px)),0,0) scale(var(--s,1));
  transition:transform var(--dur) var(--ease),opacity .5s var(--ease)}
.lab-slide.no-t{transition:none}
.lab-stage.is-drag .lab-slide{transition:none}
.lab-media{position:relative;aspect-ratio:var(--ratio);border-radius:var(--r);overflow:hidden;background:#1a1410;isolation:isolate;clip-path:inset(0 round var(--r));
  box-shadow:0 0 0 1px rgba(250,248,245,.08),0 30px 60px -30px rgba(0,0,0,.6)}
.lab-par{position:absolute;inset:0 -3%;transform:translate3d(calc(var(--p,0) * -2.6%),0,0);transition:transform var(--dur) var(--ease)}
.lab-stage.is-drag .lab-par{transition:none}
.lab-par picture,.lab-par img{display:block;width:100%;height:100%}
.lab-par img{object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease-out);transform-origin:70% 55%}
.lab-slide.is-active .lab-par img{transform:scale(1);transition:transform 8s cubic-bezier(.2,.6,.3,1)}
.lab-media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(8,6,5,.82) 0%,rgba(8,6,5,.5) 24%,rgba(8,6,5,0) 50%),radial-gradient(80% 70% at 0% 100%,rgba(8,6,5,.55),rgba(8,6,5,0) 70%)}
.lab-media::after{content:"";position:absolute;inset:0;z-index:3;background:#0d0907;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.lab-slide:not(.is-active) .lab-media::after{opacity:.55}
.lab-slide:not(.is-active){cursor:pointer}
.lab-hit{position:absolute;inset:0;z-index:4;border-radius:var(--r)}
.lab-logo{position:absolute;z-index:5;top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);width:clamp(28px,2.6vw,40px);height:auto;border-radius:22%;
  box-shadow:0 4px 16px rgba(0,0,0,.35);transition:opacity .6s var(--ease)}
.lab-slide:not(.is-active) .lab-logo{opacity:.4}
/* copy overlay (desktop) */
.lab-copy{position:absolute;z-index:6;left:clamp(18px,3vw,44px);bottom:clamp(18px,2.6vw,38px);right:clamp(18px,3vw,44px);max-width:min(540px,52%);pointer-events:none}
.lab-copy a{pointer-events:auto}
.lab-copy>*{opacity:0;transform:translate3d(0,14px,0);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.lab-slide.is-active .lab-copy>*{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.lab-slide.is-active .lab-copy>:nth-child(1){transition-delay:.28s}
.lab-slide.is-active .lab-copy>:nth-child(2){transition-delay:.36s}
.lab-slide.is-active .lab-copy>:nth-child(3){transition-delay:.44s}
.lab-slide.is-active .lab-copy>:nth-child(4){transition-delay:.52s}
.lab .lab-chip{color:#faf8f5;border-color:rgba(250,248,245,.34);background:rgba(20,17,14,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lab .lab-chip .status-chip-dot{background:var(--app,#ff4f1a)}
.lab-name{margin:.7rem 0 0;font-size:clamp(1.375rem,2vw,1.75rem);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.lab-name a{color:#fff;text-decoration:none}
.lab-name a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.lab-desc{margin:.45rem 0 0;font-size:clamp(.8125rem,1vw,.9375rem);line-height:1.5;color:rgba(250,248,245,.84);text-wrap:pretty}
.lab-ctas{margin:1rem 0 0}
.lab-pill{display:inline-flex;align-items:center;gap:.5em;min-height:2.125rem;padding:.45rem 1.05rem;border-radius:999px;background:#faf8f5;color:#14110e;border:1px solid #faf8f5;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease)}
.lab-pill::after{content:"";width:.7em;height:.7em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1 6h9M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.4'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1 6h9M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.4'/></svg>") center/contain no-repeat;transition:transform .3s var(--ease)}
.lab-pill:hover{background:transparent;color:#faf8f5}
.lab-pill:hover::after,.lab-dcard:hover .lab-pill::after{transform:translateX(2px)}
.lab-pill.sm{min-height:1.75rem;padding:.3rem .8rem;font-size:10px;background:rgba(250,248,245,.92)}
.lab a:focus-visible,.lab button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lab-slide:focus-within .lab-media{box-shadow:0 0 0 2px rgba(250,248,245,.9)}
/* ---------- small row ---------- */
.lab-row{position:relative;margin-top:22px;margin-bottom:-26px;padding-block:10px 30px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.lab-track{display:flex;gap:14px;width:max-content;transform:translate3d(var(--tx,0px),0,0);transition:transform var(--dur) var(--ease)}
.lab-track.no-t,.lab-row.is-drag .lab-track{transition:none}
.lab-row.is-drag{cursor:grabbing}
.lab-row.is-drag a{pointer-events:none}
.lab-dcard img{-webkit-user-drag:none}
.lab-detail{flex:0 0 var(--sw);opacity:0;transform:translate3d(0,28px,0);
  transition:opacity .8s var(--ease-out) calc(var(--i,0) * 70ms),transform .9s var(--ease-out) calc(var(--i,0) * 70ms),filter .6s var(--ease)}
.lab-detail.g-start:not(:first-child){margin-left:18px}
.lab.is-in .lab-detail{opacity:.42;transform:none}
.lab.is-in .lab-detail.is-cur{opacity:1}
.lab.is-in .lab-detail:not(.is-cur):hover{opacity:.75}
.lab.is-revealed .lab-detail{transition-delay:0s}
.lab-dcard{position:relative;display:block;aspect-ratio:4/3;border-radius:1.125rem;overflow:hidden;color:#faf8f5;text-decoration:none;background:#1a1410;clip-path:inset(0 round 1.125rem);
  box-shadow:0 0 0 1px rgba(250,248,245,.08);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.lab-dcard::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,6,5,.95) 0%,rgba(8,6,5,.84) 40%,rgba(8,6,5,0) 76%)}
.lab-dimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.lab-dlogo{position:absolute;z-index:2;top:12px;right:12px;width:22px;height:auto;border-radius:22%}
.lab-dlabel{position:absolute;z-index:2;left:14px;right:14px;bottom:52px;font-size:13px;line-height:1.4;letter-spacing:-.005em;text-wrap:pretty}
.lab-dname{display:block;margin-bottom:.2rem;font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,248,245,.66)}
.lab-dcard .lab-pill.sm{position:absolute;z-index:2;right:12px;bottom:12px}
@media (hover:hover){
  .lab-dcard:hover{transform:translate3d(0,-6px,0);box-shadow:0 0 0 1px rgba(250,248,245,.16),0 22px 40px -18px rgba(0,0,0,.7)}
  .lab-dcard:hover .lab-dimg{transform:scale(1.06)}
}
/* ---------- controls ---------- */
.lab-ctrl{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;margin:26px auto 0;width:var(--cw)}
.lab-dots{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(250,248,245,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lab-dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(250,248,245,.38);cursor:pointer;overflow:hidden;transition:width .6s var(--ease),background .3s}
.lab-dot:hover{background:rgba(250,248,245,.6)}
.lab-dot.is-active{width:46px;background:rgba(250,248,245,.3)}
.lab-dot i{position:absolute;inset:0;border-radius:inherit;background:#faf8f5;transform:scaleX(0);transform-origin:left}
.lab-dot.is-active i{transform:scaleX(1)}
.lab.is-auto .lab-dot.is-active i{animation:labfill var(--auto) linear forwards}
.lab.is-auto.is-hold .lab-dot.is-active i{animation-play-state:paused}
@keyframes labfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lab-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid rgba(250,248,245,.28);background:rgba(250,248,245,.06);color:#faf8f5;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease-out)}
.lab-btn:hover{background:rgba(250,248,245,.16);border-color:rgba(250,248,245,.5)}
.lab-btn:active{transform:scale(.94)}
.lab-btn svg{width:14px;height:14px}
/* ---------- responsive ---------- */
@media (max-width:1100px){
  .lab{--cw:78vw;--sw:clamp(220px,30vw,280px)}
  .lab-media::before{background:linear-gradient(to top,rgba(8,6,5,.35),rgba(8,6,5,0) 30%)}
  .lab-copy{position:relative;left:auto;right:auto;bottom:auto;max-width:640px;padding:20px 4px 0}
  .lab-row{margin-top:28px}
}
@media (max-width:767px){
  .lab{--cw:86vw;--ratio:4/5;--gap:12px;--r:1.25rem;--sw:62vw}
  .lab-media::before{background:linear-gradient(to top,rgba(8,6,5,.35),rgba(8,6,5,0) 30%)}
  .lab-copy{position:relative;left:auto;right:auto;bottom:auto;max-width:none;padding:18px 4px 0}
  .lab-desc{font-size:.875rem}
  .lab-row{margin-top:26px}
  .lab-ctrl{gap:10px}
  .lab-prev,.lab-next{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lab-slide,.lab-par,.lab-par img,.lab-track,.lab-copy>*,.lab-detail,.lab-dcard,.lab-dimg{transition-duration:.01ms!important;transition-delay:0s!important}
  .lab-par{transform:none}
  .lab-par img,.lab-slide.is-active .lab-par img{transform:none}
}