/* ---- p_17_sv-year-end-party.css ---- */
/* =====================================================================
   YEAR END PARTY (.sk-yp) - poster hộp đêm: bóng disco 3D, chữ neon nhấp nháy, vé xé răng cưa, dải ruy-băng chéo, họa tiết chấm.
   Hệ màu: cam #ff6a13 / đen / trắng (+ xám, cam nhạt). Một font Be Vietnam Pro; Anton chỉ cho chữ neon, số đếm ngược, nhãn vé, poster.
   Mobile trước; mở rộng ở 700px, 820px, 1025px.
   ===================================================================== */
.sk-yp{--r:6px;--bw:1px;--hfw:800;--hls:-.03em;--bg:#0a0a0c;--bg2:#101013;--card:#151518;--ln:rgba(255,255,255,.15);--mut:#b0b0ba;--aci:#0a0a0c}
.sk-yp h2,.sk-yp h3,.sk-yp h4{margin:0}
.sk-yp .s-lead{max-width:60ch}
@media(max-width:699px){.sk-yp .s-lead{font-size:16px;line-height:1.55}}
.yp-defs{position:absolute;width:0;height:0;overflow:hidden}
/* kit để scroll-margin-top 136px cho mọi [id]; các mục của trang này đã có padding riêng nên chỉ cần trừ chiều cao header */
.sk-yp [id].s-sec,.sk-yp [id].s-hero{scroll-margin-top:0}
.yp-hd{margin-bottom:clamp(20px,3.6vw,44px)}
@media(max-width:699px){.sk-yp .s-sec{padding-block:28px}.sk-yp .s-sec.tight{padding-block:26px}.sk-yp .yp-wh-sec{padding-top:52px}}
:is(.yp-ch,.yp-nb,.yp-pm,.yp-hub,.yp-rt button,.yp-bb,.yp-ed summary):focus-visible{outline:2px solid var(--ac);outline-offset:3px}

/* ---------- nhãn vé: hai mép khuyết hình tròn ---------- */
.yp-tag,.yp-tix,.yp-tap{--n:6px;-webkit-mask:radial-gradient(var(--n) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(var(--n) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(var(--n) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(var(--n) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.yp-tag{display:flex;align-items:center;width:fit-content;margin:0 0 12px;padding:0 18px 0 0;background:#fff;color:#0a0a0c;font:700 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase}
.yp-tag i{align-self:stretch;display:grid;place-items:center;margin-right:14px;min-width:50px;padding:11px 10px 10px 16px;background:var(--ac);color:#0a0a0c;font:400 19px/1 var(--fd);font-style:normal;letter-spacing:.04em}
.yp-tix{display:inline-block;padding:7px 16px 6px;background:var(--ac);color:#0a0a0c;font:800 12px/1 var(--fb);letter-spacing:.18em}

/* =====================  HERO  ===================== */
.yp-hero{--ybs:min(46vw,200px);--ybt:196px;--ybx:4vw;--ybl:900px;background:#0a0a0c;padding:clamp(96px,15vw,150px) 0 clamp(36px,7vw,84px)}
.yp-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at calc(100% - var(--ybx) - var(--ybs)/2) calc(var(--ybt) + var(--ybs)/2),rgba(255,106,19,.3),transparent 60%),radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.6px) 0 0/18px 18px;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.yp-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.yp-wm{position:absolute;left:-2vw;bottom:-.14em;font:400 clamp(150px,50vw,500px)/.8 var(--fd);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);white-space:nowrap}

/* quả cầu + dây treo + tia sáng (tâm tia = tâm quả cầu) */
.yp-ballw{position:absolute;z-index:0;top:var(--ybt);right:var(--ybx);width:var(--ybs);height:var(--ybs)}
.yp-beams{position:absolute;left:50%;top:50%;z-index:-1;width:var(--ybl);height:var(--ybl);margin:calc(var(--ybl)/-2) 0 0 calc(var(--ybl)/-2);pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.7) 24%,transparent 62%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.7) 24%,transparent 62%)}
.yp-beams i{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen}
.yp-beams .a{background:repeating-conic-gradient(from 0deg,transparent 0 8.5deg,rgba(255,255,255,.26) 10deg,transparent 11.6deg 36deg)}
.yp-beams .b{background:repeating-conic-gradient(from 20deg,transparent 0 5deg,rgba(255,106,19,.4) 8deg,transparent 11deg 60deg)}
.yp-beams .c{background:radial-gradient(circle,rgba(255,255,255,.75) 0 2px,transparent 2.6px) 0 0/53px 47px,radial-gradient(circle,rgba(255,106,19,.9) 0 3px,transparent 3.6px) 19px 11px/89px 71px,radial-gradient(circle,rgba(255,255,255,.5) 0 1.6px,transparent 2.2px) 7px 29px/37px 41px}
.yp-cord{position:absolute;left:50%;bottom:100%;width:2px;height:var(--ybt);margin-left:-1px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.75))}
.yp-cord::after{content:"";position:absolute;left:50%;bottom:-4px;width:16px;height:11px;margin-left:-8px;border-radius:3px 3px 7px 7px;background:linear-gradient(#ececf1,#7c7c88);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.yp-ball{position:relative;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 60px rgba(255,106,19,.42),0 0 150px rgba(255,106,19,.18);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.yp-ball.is-pop{transform:scale(1.07)}
.yp-cv{display:block;width:100%;height:100%;border-radius:50%}
.yp-ball::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.5),transparent 20%),radial-gradient(circle at 50% 50%,transparent 62%,rgba(0,0,0,.55) 100%)}
.yp-bb{position:absolute;inset:0;z-index:2;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.yp-tap{position:absolute;left:50%;top:100%;z-index:2;transform:translateX(-50%);margin-top:12px;padding:7px 14px 6px;background:var(--ac);color:#0a0a0c;font:800 12px/1 var(--fb);letter-spacing:.18em;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.yp-tap.is-done{opacity:0}
@media(max-width:699px){.yp-tap{top:auto;bottom:100%;margin:0 0 7px}}

/* chữ: nội dung chỉ nhận chuột ở nút/liên kết để quả cầu phía sau vẫn bấm được */
.yp-hw{pointer-events:none}
.yp-hw :is(a,button,.yp-cds){pointer-events:auto}
.yp-kick{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0;font:500 13px/1.4 var(--fb);color:var(--mut)}
.sk-yp .yp-title{margin:clamp(14px,2.4vw,26px) 0 0;font-family:var(--fd);font-weight:400;text-transform:uppercase;letter-spacing:.035em;line-height:.88}
.yp-ln{display:block;white-space:nowrap}
.yp-l1,.yp-l2{font-size:clamp(74px,23.5vw,150px)}
.yp-l3{font-size:clamp(108px,35vw,240px);margin-top:.02em}
.yp-lt{display:inline-block;font-style:normal;color:rgba(255,255,255,.07);-webkit-text-stroke:max(1.6px,.02em) #fff;text-shadow:0 0 .09em rgba(255,255,255,.6),0 0 .3em rgba(255,255,255,.28)}
.yp-l3 .yp-lt{color:rgba(255,106,19,.16);-webkit-text-stroke-color:#ff6a13;text-shadow:0 0 .08em rgba(255,106,19,.95),0 0 .3em rgba(255,106,19,.62),0 0 .8em rgba(255,106,19,.34)}
.yp-sub{max-width:46ch}
.yp-k2{display:none}
.yp-cd{margin-top:clamp(18px,3vw,28px);max-width:440px}
.yp-cdh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 9px;font:600 12px/1.2 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.yp-cdh b{color:#fff;font-weight:700;letter-spacing:.06em}
.yp-cds{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:6px}
.yp-cds>div{--n:5px;padding:11px 2px 10px;text-align:center;background:#fff;color:#0a0a0c;border-radius:3px;-webkit-mask:radial-gradient(var(--n) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(var(--n) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(var(--n) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(var(--n) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.yp-cds b{display:block;font:400 clamp(34px,10.4vw,52px)/1 var(--fd);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.yp-cds small{display:block;margin-top:5px;font:700 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:#5a5a64}
.yp-cds .is-o{background:var(--ac)}.yp-cds .is-o small{color:#0a0a0c}
.yp-btns{margin-top:clamp(18px,3vw,26px)}

/* chuyển động hero: bóng thả xuống, đèn bật từng chữ rồi thỉnh thoảng chớp, tia quay ngược chiều */
@media(prefers-reduced-motion:no-preference){
  .kx-js .yp-ballw{animation:ypDrop 1.5s cubic-bezier(.2,.9,.3,1) backwards .1s}
  .kx-js .yp-beams .a{animation:ypRot 54s linear infinite}
  .kx-js .yp-beams .b{animation:ypRot 84s linear infinite reverse}
  .kx-js .yp-beams .c{animation:ypRot 130s linear infinite}
  .kx-js .yp-lt{will-change:opacity;animation:ypOn 1.3s steps(1) backwards,ypFl 7.3s linear infinite;animation-delay:calc(var(--k)*.1s + .35s),calc(var(--k)*-.83s)}
  .kx-js .yp-tap{animation:ypPulse 1.9s ease-in-out infinite}
  .kx-js .yp-cds b.is-t{animation:ypTk .4s cubic-bezier(.16,1,.3,1)}
}
@keyframes ypDrop{from{transform:translateY(-150%)}58%{transform:translateY(3%)}80%{transform:translateY(-1%)}}
@keyframes ypRot{to{transform:rotate(360deg)}}
@keyframes ypOn{0%{opacity:0}16%{opacity:.95}24%{opacity:.08}36%{opacity:1}44%{opacity:.2}56%,100%{opacity:1}}
@keyframes ypFl{0%,100%{opacity:1}5.6%{opacity:1}6%{opacity:.3}6.6%{opacity:1}7.4%{opacity:.5}8%{opacity:1}}
@keyframes ypPulse{50%{transform:translateX(-50%) scale(1.08)}}
@keyframes ypTk{from{opacity:.2;transform:translateY(-10px)}}

/* dải ruy-băng chéo giữa hero và vòng quay */
.yp-tape{position:relative;z-index:3;width:112%;margin:-30px -6% -14px;transform:rotate(-2.2deg);background:var(--ac);border-block:2px solid #0a0a0c;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.yp-tape .s-mq{border:0;padding:9px 0}
.yp-tape .s-mq-t span{font:400 clamp(22px,5.8vw,34px)/1.1 var(--fd);letter-spacing:.05em;text-transform:uppercase;color:#0a0a0c}
.yp-tape .s-mq-t span::after{color:#0a0a0c}

/* =====================  01 · VÒNG QUAY  ===================== */
.yp-wh-sec{padding-top:clamp(64px,9vw,120px)}
.yp-wh-sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.6px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent)}
.yp-wheel{display:grid;gap:26px}
.yp-wheel>*{min-width:0}
.yp-stage{display:grid;justify-items:center;align-content:start;gap:22px}
.yp-disc{--sz:min(calc(100vw - 2*var(--gut)),340px);position:relative;width:var(--sz);aspect-ratio:1}
.yp-rim{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 22px rgba(255,106,19,.32))}
.yp-rim .bl{fill:#fff}.yp-rim .bl:nth-child(odd){fill:#ff6a13}
.yp-disk{position:absolute;inset:6.4%;border-radius:50%;overflow:hidden;will-change:transform;box-shadow:0 0 0 2px #0a0a0c}
.yp-disk svg{display:block;width:100%;height:100%}
.yp-disk text{font-family:var(--fb);font-weight:700;letter-spacing:.01em}
.yp-sec{transition:opacity .5s}
.yp-sec.is-won{opacity:.36}
.yp-sec.is-won text{text-decoration:line-through}
.yp-disk.is-done .yp-sec:not(.is-win){opacity:.5}
.yp-disk .yp-sec.is-win{opacity:1}
.yp-ptr{position:absolute;z-index:3;left:50%;top:-2%;width:11.5%;margin-left:-5.75%;transform-origin:50% 31%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.yp-ptr svg{display:block;width:100%;height:auto}
.yp-hub{position:absolute;z-index:4;left:50%;top:50%;display:grid;place-items:center;width:23%;aspect-ratio:1;margin:-11.5% 0 0 -11.5%;padding:0;border:3px solid var(--ac);border-radius:50%;background:#0a0a0c;color:#fff;cursor:pointer;box-shadow:0 0 0 5px #0a0a0c,0 10px 24px rgba(0,0,0,.7);-webkit-tap-highlight-color:transparent}
.yp-hub b{font:400 clamp(16px,5.4vw,24px)/1 var(--fd);letter-spacing:.06em}
.yp-hub[aria-disabled=true]{opacity:.7;cursor:default}
.yp-spin{width:min(100%,370px);min-height:58px;font-size:15px;letter-spacing:.12em}
.yp-spin[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}
.yp-hl{opacity:0;transition:opacity .4s}
.yp-sec.is-win .yp-hl{opacity:1}
.yp-side{display:grid;gap:12px;align-content:start}
.yp-res{display:grid;gap:7px;padding:18px 16px 20px;text-align:center;border-color:var(--ac)}
.yp-res small{font:700 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}
.yp-res b{font:800 clamp(22px,6vw,36px)/1.15 var(--ff);letter-spacing:-.02em;overflow-wrap:anywhere}
.yp-res span{font-size:14px;color:var(--mut)}
.yp-res.is-pop b{animation:ypPop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes ypPop{from{transform:scale(.6);opacity:0}}
.yp-opts{display:grid;gap:12px}
.yp-hh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--ln)}
.yp-hh h3,.yp-ed summary span{margin:0;font:700 15px/1.3 var(--fb);letter-spacing:0;color:var(--ink)}
.yp-reset{flex:none;min-height:44px;padding:0 16px;background:transparent;border:1px solid rgba(255,255,255,.4);font-size:12px;letter-spacing:.1em;cursor:pointer}
.yp-reset:active{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.yp-hist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.yp-hist li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 6px;border:1px solid var(--ln);border-radius:99px;font-size:14px;line-height:1.2}
.yp-hist li span{display:grid;place-items:center;min-width:24px;height:24px;border-radius:99px;background:var(--ac);color:#0a0a0c;font:800 12px/1 var(--fb)}
.yp-hist li b{font-weight:600;overflow-wrap:anywhere}
.yp-hist li.is-empty{padding:0 14px;border-style:dashed;color:var(--mut)}
.yp-ed summary{display:flex;align-items:center;gap:12px;min-height:48px;margin:-6px 0;list-style:none;cursor:pointer}
.yp-ed summary::-webkit-details-marker{display:none}
.yp-ed summary b{margin-left:auto;font:700 12px/1 var(--fb);letter-spacing:.08em;color:var(--mut);text-transform:uppercase}
.yp-ed summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--ln);background:linear-gradient(var(--ac),var(--ac)) center/12px 2px no-repeat,linear-gradient(var(--ac),var(--ac)) center/2px 12px no-repeat;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.yp-ed[open] summary::after{transform:rotate(135deg)}
.yp-ed .s-field{margin-top:14px}
.yp-ed .s-hint{margin-top:10px}
.yp-ed .s-field label{font-weight:500;color:var(--mut);font-size:14px}

@media(prefers-reduced-motion:no-preference){
  .kx-js .yp-rim .bl{animation:ypBl 1.4s steps(1) infinite}
  .kx-js .yp-rim .bl:nth-child(even){animation-delay:-.7s}
  .kx-js .yp-wheel.is-spin .yp-rim .bl{animation-duration:.32s}
  .kx-js .yp-wheel.is-spin .yp-rim .bl:nth-child(even){animation-delay:-.16s}
  .kx-js .yp-wheel:not(.is-spin) .yp-hub:not([aria-disabled=true])::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--ac);animation:ypRing 2s ease-out infinite}
}
@keyframes ypBl{50%{opacity:.2}}
@keyframes ypRing{from{transform:scale(.88);opacity:.9}to{transform:scale(1.18);opacity:0}}

/* =====================  02 · CHỦ ĐỀ  ===================== */
.yp-th-sec{overflow:hidden}
.yp-chs{position:relative;margin-bottom:22px}
.yp-ch{flex:none;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px 0 0;border:1px solid var(--ln);border-radius:4px;overflow:hidden;background:transparent;color:var(--ink);font:700 14px var(--fb);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.yp-ch i{align-self:stretch;display:grid;place-items:center;min-width:44px;background:rgba(255,255,255,.09);color:var(--mut);font:400 17px/1 var(--fd);font-style:normal;letter-spacing:.04em;transition:background .25s,color .25s}
.yp-ch[aria-selected=true]{background:#fff;border-color:#fff;color:#0a0a0c}
.yp-ch[aria-selected=true] i{background:var(--ac);color:#0a0a0c}
.yp-ch:active{transform:scale(.97)}
.yp-tps{perspective:1400px}
.yp-tp{display:grid;grid-template-columns:minmax(0,122px) minmax(0,1fr);grid-template-areas:"ps ph" "dl dl";gap:18px;align-items:start}
.yp-tp[hidden]{display:none}
.yp-ps{grid-area:ps;position:relative;aspect-ratio:4/5;border:1px solid var(--ln);border-radius:5px;overflow:hidden;background:#0a0a0c;box-shadow:0 22px 40px -20px rgba(0,0,0,.9);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.16,1,.3,1)}
.yp-ps::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,30%) var(--my,20%),rgba(255,255,255,.2),transparent 45%)}
.yp-ps svg{display:block;width:100%;height:100%}
.yp-ps text{font-family:var(--fd);font-weight:400}
.yp-ph{grid-area:ph;align-self:center;min-width:0}
.yp-ph h3{font-size:clamp(22px,6.4vw,36px);line-height:1.12}
.yp-ph p{margin-top:7px;font-size:15px;line-height:1.45;color:var(--mut)}
.yp-bd{display:inline-flex;gap:6px;margin-top:14px}
.yp-bd i{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4)}
.yp-bd i.on{background:var(--ac);border-color:var(--ac)}
.yp-dl{grid-area:dl;display:grid;margin:0;border-top:1px solid var(--ln)}
.yp-dl>div{display:grid;gap:3px;padding:11px 0;border-bottom:1px solid var(--ln)}
.yp-dl dt{font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.yp-dl dd{margin:0;font-size:15px;line-height:1.5}
@media(prefers-reduced-motion:no-preference){
  .kx-js .yp-tp.is-on .yp-ps{animation:ypPoster .8s cubic-bezier(.16,1,.3,1) backwards}
  .kx-js .yp-tp.is-on .yp-ph>*,.kx-js .yp-tp.is-on .yp-dl>div{animation:ypRow .65s cubic-bezier(.16,1,.3,1) backwards}
  .kx-js .yp-tp.is-on .yp-ph h3{animation-delay:.1s}.kx-js .yp-tp.is-on .yp-ph p{animation-delay:.16s}.kx-js .yp-tp.is-on .yp-bd{animation-delay:.22s}
  .kx-js .yp-tp.is-on .yp-dl>div:nth-child(1){animation-delay:.18s}.kx-js .yp-tp.is-on .yp-dl>div:nth-child(2){animation-delay:.25s}.kx-js .yp-tp.is-on .yp-dl>div:nth-child(3){animation-delay:.32s}.kx-js .yp-tp.is-on .yp-dl>div:nth-child(4){animation-delay:.39s}.kx-js .yp-tp.is-on .yp-dl>div:nth-child(5){animation-delay:.46s}
}
@keyframes ypPoster{from{opacity:0;transform:perspective(900px) rotateY(-70deg) scale(.9)}}
@keyframes ypRow{from{opacity:0;transform:translateX(26px)}}

/* =====================  03 · RUN OF SHOW  ===================== */
.yp-ro-sec{background:#0a0a0c}
.yp-ro-sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 64px)}
.yp-eqw{margin-bottom:6px}
.yp-eq{display:flex;gap:4px;height:84px}
.yp-col{flex:var(--d) 1 0;min-width:0;display:flex;flex-direction:column-reverse;gap:3px}
.yp-col i{display:block;flex:1;border-radius:2px;background:rgba(255,255,255,.09);transition:background .3s,box-shadow .3s}
.yp-col i.on{background:rgba(255,255,255,.46)}
.yp-col.is-cur i.on{background:var(--ac);box-shadow:0 0 12px rgba(255,106,19,.75)}
.yp-eqt{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font:600 12px/1.2 var(--fb);letter-spacing:.06em;color:var(--mut)}
.yp-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:14px 0 8px;font-size:15px;line-height:1.4;min-height:44px}
.yp-now b{font:400 22px/1 var(--fd);letter-spacing:.05em;color:var(--ac)}
.yp-rail{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:10px var(--gut) 18px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;outline:0}
.yp-rail::-webkit-scrollbar{display:none}
.yp-rail:focus-visible{outline:2px solid var(--ac);outline-offset:-3px}
.yp-tk{--py:66px;position:relative;flex:0 0 min(86%,330px);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;min-width:0;padding-bottom:16px;background:#fff;color:#0a0a0c;border-radius:6px;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.yp-tk::before,.yp-tk::after{content:"";position:absolute;top:calc(var(--py) - 9px);width:18px;height:18px;border-radius:50%;background:#0a0a0c}
.yp-tk::before{left:-9px}.yp-tk::after{right:-9px}
.yp-tk>header{display:flex;align-items:center;gap:10px;height:var(--py);padding:0 18px;border-bottom:2px dashed rgba(10,10,12,.3)}
.yp-tm{font:400 38px/1 var(--fd);letter-spacing:.03em}
.yp-du{padding:5px 9px 4px;border-radius:99px;background:#0a0a0c;color:#fff;font:700 12px/1 var(--fb);letter-spacing:.04em;white-space:nowrap}
.yp-no{margin-left:auto;font:700 12px/1 var(--fb);letter-spacing:.14em;color:#6d6d76}
.yp-tk h3{padding:6px 18px 0;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.yp-tk p{padding:0 18px;font-size:15px;line-height:1.55;color:#34343b}
.yp-cu{display:grid;gap:9px;margin:auto 14px 0;padding:12px 14px;border-radius:5px;background:#0a0a0c;color:#fff;font-size:15px;line-height:1.4;list-style:none}
.yp-cu em{display:block;margin-bottom:3px;font:700 12px/1 var(--fb);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.yp-tk.is-cur{box-shadow:0 0 0 3px var(--ac),0 26px 44px -22px rgba(255,106,19,.55)}
.yp-sumk{display:none}
.yp-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px}
.yp-nb{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--ln);border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .25s,border-color .25s,opacity .25s}
.yp-nb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.yp-nb[aria-disabled=true]{opacity:.35;cursor:default}
.yp-nb:active{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.yp-hintx{font-size:13px;color:var(--mut)}
@media(prefers-reduced-motion:no-preference){
  .kx-js .yp-rail.kx-in .yp-tk{animation:ypTkIn .85s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i)*.09s)}
  .kx-js .yp-col.is-cur i.on:last-child{animation:ypEq 1.1s ease-in-out infinite alternate}
}
@keyframes ypTkIn{from{opacity:0;transform:translateX(44px) rotate(2deg)}}
@media(prefers-reduced-motion:no-preference){
  .kx-js .yp-eqw.kx-in .yp-col i{transform-origin:50% 100%;animation:ypGrow .7s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--c)*.09s + var(--k)*.05s)}
}
@keyframes ypGrow{from{transform:scaleY(0);opacity:0}}
@keyframes ypEq{to{opacity:.45}}

/* =====================  04 · NGÂN SÁCH  ===================== */
.yp-bud{align-items:start}
.yp-mode button{display:grid;align-content:center;gap:3px;min-height:56px;padding:6px 8px;text-align:center}
.yp-mode button b{font:700 14px/1.2 var(--fb)}
.yp-mode button small{font:500 12px/1.2 var(--fb);opacity:.8}
.sk-yp .s-seg button.on{color:#0a0a0c}
.yp-stp{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px}
.yp-pm{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--ln);border-radius:50%;background:transparent;color:#fff;font:600 24px/1 var(--fb);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.yp-pm:active{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.yp-seg{display:flex;gap:3px;height:48px}
.yp-seg i{flex:var(--w) 1 0;min-width:0;display:grid;place-items:center;border-radius:3px;font:700 13px/1 var(--fb);font-style:normal;color:#0a0a0c;overflow:hidden;transition:flex-grow .95s cubic-bezier(.16,1,.3,1)}
.yp-seg i:nth-child(1){background:var(--c1)}.yp-seg i:nth-child(2){background:var(--c2)}.yp-seg i:nth-child(3){background:var(--c3)}.yp-seg i:nth-child(4){background:var(--c4)}
.yp-seg i:nth-child(5){background:var(--c5);color:#fff}
.yp-lg li{grid-template-columns:12px minmax(0,1fr) auto auto;align-items:start;gap:4px 10px}
.yp-lg{gap:7px}
.yp-lg li::before{margin-top:4px}
.yp-lg span{line-height:1.4}
.yp-lg em{font-style:normal;font-weight:700;color:var(--ac);white-space:nowrap}
.yp-lg b{white-space:nowrap;min-width:54px;text-align:right}
.yp-bk{display:grid;gap:12px;align-content:start}
.yp-bk .s-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.yp-bk .s-kpis>div{padding:10px 10px 11px}
.yp-bk .s-kpis b{font-size:clamp(17px,5.2vw,24px)}
.yp-bk .s-note{min-height:44px}

/* =====================  05 · QUY TẮC (khối cam, vé trắng)  ===================== */
.yp-ru-sec{background:var(--ac);color:#0a0a0c;--mut:rgba(10,10,12,.74);overflow:hidden}
.yp-ru-sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(10,10,12,.16) 1.2px,transparent 1.8px) 0 0/20px 20px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 55%);mask-image:linear-gradient(200deg,#000,transparent 55%)}
.yp-ru-sec .yp-tag{background:#0a0a0c;color:#fff}
.yp-ru-sec .yp-tag i{background:#fff;color:#0a0a0c}
.yp-ru-sec .s-lead{color:rgba(10,10,12,.78)}
.yp-ru-sec :is(.yp-rt button,.yp-nb):focus-visible{outline-color:#fff}
.yp-rt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:560px;margin-bottom:20px;padding:5px;border-radius:8px;background:#0a0a0c}
.yp-rt button{min-height:48px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:#fff;font:700 14px/1.2 var(--fb);cursor:pointer;transition:background .25s,color .25s}
.yp-rt button[aria-selected=true]{background:#fff;color:#0a0a0c}
.yp-rp h3{margin-bottom:12px;font-size:clamp(20px,5vw,34px);line-height:1.15}
.yp-rp[hidden]{display:none}
.yp-st{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.yp-st li{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);overflow:hidden;border-radius:6px;background:#fff;color:#0a0a0c;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.yp-st li::before,.yp-st li::after{content:"";position:absolute;left:51px;width:18px;height:18px;border-radius:50%;background:var(--ac)}
.yp-st li::before{top:-9px}.yp-st li::after{bottom:-9px}
.yp-st li>b{display:grid;place-items:center;border-right:2px dashed rgba(255,255,255,.4);background:#0a0a0c;color:var(--ac);font:400 28px/1 var(--fd);letter-spacing:.04em}
.yp-st li>div{padding:10px 16px 11px}
.yp-st h4{font:800 16px/1.25 var(--ff);letter-spacing:-.01em}
.yp-st p{margin-top:5px;font-size:15px;line-height:1.5;color:#34343b}
.yp-rp .yp-nt{max-width:60ch;margin:18px 0 0;padding:12px 14px;border:2px dashed rgba(10,10,12,.55);border-radius:6px;font-size:14px;line-height:1.5;font-weight:600}
@media(prefers-reduced-motion:no-preference){
  .kx-js .yp-rp.is-on .yp-st li{animation:ypStub .7s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i)*.08s)}
}
@keyframes ypStub{from{opacity:0;transform:translateX(-40px) rotate(-1.5deg)}}

/* =====================  DẢI LED  ===================== */
.yp-led{position:relative;border:0;background:#0a0a0c;padding:clamp(16px,2.6vw,28px) 0}
.yp-led .s-mq-t span{font:400 clamp(36px,10vw,96px)/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.yp-led .s-mq-t span:nth-child(even){color:#fff}
.yp-led .s-mq-t span::after{color:#fff}
.yp-led::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 1.5px,rgba(10,10,12,.88) 2.3px) 0 0/6px 6px}

/* =====================  06 · THẺ LIÊN QUAN  ===================== */
.yp-cd-sec{padding-bottom:clamp(36px,6vw,72px)}
.yp-cards{align-items:stretch}
.yp-cards .card em{font-size:12px}
@media(max-width:700px){
  .yp-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:6px var(--gut) 14px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .yp-cards::-webkit-scrollbar{display:none}
  .yp-cards>.card{flex:0 0 min(78%,300px);scroll-snap-align:start}
}

/* =====================  07 · FAQ  ===================== */
.yp-faq{align-items:start}

/* =====================  hover (chỉ chuột)  ===================== */
@media(hover:hover) and (pointer:fine){
  .yp-ch:hover{border-color:var(--ac)}
  .yp-tk:hover{transform:translateY(-8px) rotate(-.5deg)}
  .yp-st li:hover{transform:translateX(8px)}
  .yp-nb:hover,.yp-pm:hover{border-color:var(--ac);color:var(--ac)}
  .yp-ru-sec .yp-rt button:not([aria-selected=true]):hover{background:rgba(255,255,255,.14)}
  .yp-hub:hover{background:var(--ac);color:#0a0a0c}
  .yp-bb:hover{box-shadow:0 0 0 3px rgba(255,106,19,.55)}
}

/* =====================  iPad (>=700 / >=820)  ===================== */
@media(min-width:700px){
  .yp-k2{display:inline}
  .yp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .yp-hero{--ybs:min(34vw,280px);--ybt:140px;--ybx:5vw;--ybl:1100px}
  .yp-dl>div{grid-template-columns:150px minmax(0,1fr);gap:18px}
  .yp-tp{grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:22px 28px}
  .yp-tk{flex-basis:300px}
  .yp-st li{grid-template-columns:72px minmax(0,1fr)}
  .yp-st li::before,.yp-st li::after{left:63px}
  .yp-st li>b{font-size:34px}
}
@media(min-width:820px){
  .yp-hero{--ybs:min(36vw,360px);--ybt:128px;--ybl:1300px}
  .yp-ln{display:inline-block}
  .yp-l2{margin-left:.22em}
  .yp-hero{padding-top:clamp(110px,8.6vw,132px)}
  .yp-l1,.yp-l2{font-size:clamp(90px,9.4vw,172px)}
  .yp-l3{display:block;margin-top:.05em;font-size:clamp(150px,15vw,280px)}
  .yp-wheel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,64px);align-items:start}
  .yp-disc{--sz:min(44vw,500px)}
  .yp-tp{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"ps ph" "ps dl";gap:12px clamp(28px,4vw,56px)}
  .yp-ps{align-self:start}
  .yp-ph{align-self:end}
  .yp-ph h3{font-size:clamp(30px,3.6vw,48px)}
  .yp-st{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yp-st li:first-child{grid-column:1/-1}
  .yp-stage{position:sticky;top:104px}
  .yp-res b{font-size:clamp(24px,2.6vw,36px)}
  .yp-bud{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .yp-bud>.yp-bc{grid-column:1;grid-row:1}
  .yp-bud>.yp-bo{grid-column:2;grid-row:1/3;position:sticky;top:96px}
  .yp-bud>.yp-bk{grid-column:1;grid-row:2}
  .yp-bud>.s-dock.bill{display:none}
}
/* =====================  desktop (>=1025)  ===================== */
@media(min-width:1025px){
  .yp-hero{--ybs:min(32vw,440px);--ybt:118px;--ybx:calc((100vw - 1240px)/2 + 40px);--ybl:1500px}
  .yp-disc{--sz:min(38vw,520px)}
  .yp-chs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0}
  .yp-ch{justify-content:flex-start}
  .yp-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;overflow:visible;margin-inline:0;padding:12px 0 0}
  .yp-tk{flex:none}
  .yp-sumk{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:22px 20px;border:2px dashed rgba(255,255,255,.3);border-radius:6px;color:#fff}
  .yp-sumk b{font:400 clamp(80px,8vw,120px)/.9 var(--fd);color:var(--ac)}
  .yp-sumk p{font-size:15px;line-height:1.55;color:var(--mut)}
  .yp-sumk strong{display:block;margin-bottom:6px;font:700 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:#fff}
  .yp-nav{display:none}
  .yp-eq{height:104px}
  .yp-faq>div:first-child{position:sticky;top:110px}
}
@media(min-width:1440px){
  .yp-hero{--ybx:calc((100vw - 1240px)/2 + 60px)}
}