/* Dùng chung cho các trang công khai (js/site-ui.js): nền + nốt nhạc bay, nút vàng lấp lánh, nút bình chọn nổi,
   nút gọi điện, khung xem ảnh lớn. Ai bật "giảm chuyển động" thì tắt hiệu ứng chạy. */

/* ---------- Nền có màu + nốt nhạc bay ---------- */
body.ks-bg{background:#FBF7FF linear-gradient(180deg,#FBF7FF 0%,#F4EAFF 35%,#FFF6E3 70%,#FBF4FF 100%) fixed}
.ks-notes{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ks-notes span{position:absolute;bottom:-60px;display:block;font-family:"Segoe UI Symbol","Noto Sans Symbols 2",serif;line-height:1;opacity:0;will-change:transform,opacity}
@media (prefers-reduced-motion:no-preference){
  .ks-notes span{animation:ksRise var(--t,16s) linear var(--d,0s) infinite}
}
@keyframes ksRise{
  0%{transform:translate(0,0) rotate(-10deg);opacity:0}
  8%{opacity:var(--o,.35)}
  50%{transform:translate(var(--x,30px),-55vh) rotate(12deg)}
  92%{opacity:var(--o,.35)}
  100%{transform:translate(calc(var(--x,30px) * -1),-112vh) rotate(-8deg);opacity:0}
}

/* ---------- Thẻ / ô nổi lên trên nền màu (viền tím nhạt + bóng vừa phải) ----------
   Trang chủ: mọi khối bo góc 20–24px (thẻ khoá học, lý do chọn, trắc nghiệm, ưu đãi, liên hệ…) */
body.ks-bg[data-page="home"] div[style*="border-radius: 2"]:not([style*="border-radius: 2px"]){border:1.5px solid #DCCBEB;box-shadow:0 10px 26px rgba(74,38,99,.11),0 2px 6px rgba(74,38,99,.06)!important}
body.ks-bg[data-page="home"] div[style*="border-radius: 2"][style*="background: #F3EDF8"],
body.ks-bg[data-page="home"] div[style*="border-radius: 2"][style*="rgb(243, 237, 248)"]{background:#fff!important}
body.ks-bg[data-page="home"] div.card-hover[style*="border-radius: 2"]:hover{border-color:#C7AEE0;box-shadow:0 16px 34px rgba(74,38,99,.18),0 3px 8px rgba(74,38,99,.08)!important}
body.ks-bg .gi:not(.ph){border:1.5px solid #DCCBEB}
body.ks-bg .gi.ph{border-color:#C7AEE0;background:linear-gradient(135deg,#fff,#F6F0FB)}
body.ks-bg .qopt:not(:hover):not(:focus-visible){border-color:#D3C1E6;box-shadow:0 2px 6px rgba(74,38,99,.06)}
/* Trang Concert */
body.ks-bg .show,body.ks-bg .none{border:1.5px solid #DCCBEB;box-shadow:0 12px 32px rgba(74,38,99,.12),0 2px 6px rgba(74,38,99,.06)}
body.ks-bg .filters{border:1.5px solid #E6DAF1;border-top:0}
body.ks-bg .chip:not([aria-pressed="true"]){border-color:#CDB8E0}
body.ks-bg .ji{box-shadow:0 4px 12px rgba(74,38,99,.16),0 0 0 1px rgba(74,38,99,.08)}

/* ---------- Nút vàng lấp lánh (tự gắn cho mọi nút nền vàng) ---------- */
.ks-gold{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s cubic-bezier(.2,1.6,.4,1),box-shadow .25s}
.ks-gold::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(110deg,#F2B705 0%,#FFD84D 25%,#FFF1A8 40%,#F2B705 55%,#E79A00 80%,#F2B705 100%);background-size:250% 100%}
.ks-gold::after{content:"";position:absolute;top:-10%;left:-70%;width:45%;height:120%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-22deg);pointer-events:none}
.ks-gold:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 30px rgba(242,183,5,.55),0 0 0 4px rgba(242,183,5,.25)!important}
.ks-gold:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){
  .ks-gold::before{animation:ksGrad 5s ease-in-out infinite}
  .ks-gold::after{animation:ksSweep 3.4s ease-in-out infinite}
  .ks-gold.ks-breathe{animation:ksBreathe 2.6s ease-in-out infinite}
  .ks-gold:hover{animation:ksJelly .6s ease}
}
@keyframes ksGrad{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes ksSweep{0%,55%{left:-70%}100%{left:150%}}
@keyframes ksBreathe{0%,100%{box-shadow:0 8px 22px rgba(58,33,80,.28),0 0 0 0 rgba(242,183,5,.55)}50%{box-shadow:0 8px 22px rgba(58,33,80,.28),0 0 0 10px rgba(242,183,5,0)}}
@keyframes ksJelly{0%{transform:translateY(-3px) scale(1.04)}30%{transform:translateY(-3px) scale(1.1,.94)}55%{transform:translateY(-3px) scale(.98,1.06)}80%{transform:translateY(-3px) scale(1.05,.99)}100%{transform:translateY(-3px) scale(1.04)}}

/* ---------- Nút "Bình chọn Concert" nổi (góc trái dưới) ---------- */
@property --kva{syntax:"<angle>";inherits:false;initial-value:0deg}
.kv-wrap{position:fixed;left:16px;bottom:20px;z-index:60;max-width:calc(100% - 110px)}
.kv-pill{position:relative;display:flex;align-items:center;gap:10px;min-height:62px;padding:6px 18px 6px 6px;border-radius:999px;border:3px solid transparent;
  background:linear-gradient(135deg,#7b45a0,#2E1A44) padding-box,conic-gradient(from var(--kva),#F2B705,#fff3b0,#ff5d8f,#F2B705,#8a4bc0,#F2B705) border-box;
  color:#fff;text-decoration:none;box-shadow:0 12px 32px rgba(46,26,68,.5),0 0 24px rgba(242,183,5,.35);font-family:"Baloo 2",sans-serif;overflow:hidden}
.kv-pill::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.kv-ic{position:relative;flex:0 0 48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe28a,#F2B705 60%,#d49a00);display:flex;align-items:center;justify-content:center;font-size:25px}
.kv-t{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.kv-t b{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.kv-t small{font-size:13px;font-weight:600;color:#F2B705;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-badge{position:absolute;top:-12px;left:36px;z-index:2;padding:1px 9px;border-radius:999px;background:#e53935;color:#fff;font:800 12px/1.5 "Baloo 2",sans-serif;letter-spacing:.5px;box-shadow:0 3px 8px rgba(229,57,53,.5);border:2px solid #fff;pointer-events:none;white-space:nowrap}
.kv-x{position:absolute;top:-10px;right:-10px;z-index:3;width:28px;height:28px;border-radius:50%;border:0;background:#fff;color:#3A2150;font:700 17px/28px sans-serif;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);padding:0}
.kv-note{position:absolute;left:30px;bottom:56px;z-index:1;font-size:20px;color:#F2B705;text-shadow:0 0 8px rgba(242,183,5,.8);pointer-events:none}
@media(max-width:520px){.kv-wrap{left:12px;bottom:14px;max-width:calc(100% - 96px)}.kv-pill{min-height:56px;padding-right:12px;gap:8px}.kv-ic{flex-basis:42px;height:42px;font-size:22px}.kv-t b{font-size:15px}.kv-t small{display:none}.kv-badge{left:28px}}
@media(max-width:340px){.kv-t{display:none}.kv-pill{padding:6px}}
@media(prefers-reduced-motion:no-preference){
  .kv-wrap{animation:kvIn .8s cubic-bezier(.2,1.4,.4,1) both,kvHop 6s ease-in-out 2s infinite}
  .kv-pill{animation:kvSpin 3s linear infinite}
  .kv-pill::after{animation:kvShine 3s ease-in-out infinite}
  .kv-ic{animation:kvRing 1.8s ease-out infinite}
  .kv-ic span{display:inline-block;animation:kvMic 2.4s ease-in-out infinite}
  .kv-badge{animation:kvBlink 1.2s ease-in-out infinite}
  .kv-note{animation:kvNote 1.8s ease-out forwards}
}
@keyframes kvIn{from{opacity:0;transform:translateY(140%) scale(.6)}to{opacity:1;transform:none}}
@keyframes kvHop{0%,84%,100%{transform:none}87%{transform:translateY(-14px) scale(1.06)}90%{transform:translateY(0) scale(.97)}93%{transform:translateY(-6px) rotate(-2deg)}96%{transform:none}}
@keyframes kvSpin{to{--kva:360deg}}
@keyframes kvShine{0%,50%{left:-70%}100%{left:140%}}
@keyframes kvRing{0%{box-shadow:0 0 0 0 rgba(242,183,5,.75)}100%{box-shadow:0 0 0 16px rgba(242,183,5,0)}}
@keyframes kvMic{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(-18deg)}76%{transform:rotate(16deg)}84%{transform:rotate(-8deg)}}
@keyframes kvBlink{0%,100%{transform:scale(1)}50%{transform:scale(1.15);background:#ff5252}}
@keyframes kvNote{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-70px) scale(1.2) rotate(20deg)}}

/* ---------- Nút gọi điện tròn (rung chuông) ---------- */
.ks-call{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#1FAF5A;color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(31,175,90,.45)}
.ks-call::before,.ks-call::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1FAF5A;pointer-events:none;opacity:0}
.ks-call svg{position:relative}
@media(prefers-reduced-motion:no-preference){
  .ks-call svg{animation:ksShake 1.6s ease-in-out infinite}
  .ks-call::before{animation:ksWave 1.6s ease-out infinite}
  .ks-call::after{animation:ksWave 1.6s ease-out .5s infinite}
}
@keyframes ksShake{0%,50%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-16deg)}10%,20%,30%{transform:rotate(16deg)}35%{transform:rotate(0)}}
@keyframes ksWave{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media(max-width:600px){.ks-call{width:48px;height:48px}}

/* Cụm nút nổi bên phải (trang Concert): lên đầu, gọi, Facebook, Zalo */
.ks-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:12px}
.ks-fab a,.ks-fab button{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:0;padding:0;text-decoration:none;color:#fff;font:800 16px "Baloo 2",sans-serif;box-shadow:0 8px 24px rgba(58,33,80,.35);cursor:pointer;transition:transform .2s}
.ks-fab a:hover,.ks-fab button:hover{transform:translateY(-3px) scale(1.06)}
.ks-fab .fb{background:#1877F2}.ks-fab .zl{background:#0068FF}
.ks-fab .up{background:#6B3A86;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .2s}
.ks-fab .up.show{opacity:1;visibility:visible}
@media(max-width:600px){.ks-fab{right:12px;bottom:12px;gap:8px}.ks-fab a,.ks-fab button{width:48px;height:48px}}

/* ---------- Khung xem ảnh lớn (bấm ảnh) ---------- */
.ksl{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;background:rgba(18,8,28,.985);color:#fff;font-family:"Baloo 2",sans-serif;touch-action:pan-y}
.ksl.open{display:flex}
.ksl-top{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:60px}
.ksl-t{flex:1;min-width:0;font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ksl-n{flex:0 0 auto;padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:700;font-size:15px}
.ksl-b{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;text-decoration:none}
.ksl-b:hover{background:#F2B705;border-color:#F2B705;color:#2E1A44}
.ksl-st{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 72px;overflow:hidden}
.ksl-m{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ksl-st img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none}
.ksl-st iframe{display:block;border:0;border-radius:12px;background:#000;width:min(1000px,100%);aspect-ratio:16/9;max-height:100%}
.ksl-st iframe.vert{width:auto;height:100%;max-height:760px;aspect-ratio:9/16;max-width:100%}
.ksl-st .pv,.ksl-st .nx{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;font-size:30px}
.ksl-st .pv{left:12px}.ksl-st .nx{right:12px}
.ksl-load{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:#F2B705;animation:ksSpin 0.8s linear infinite}
@keyframes ksSpin{to{transform:rotate(360deg)}}
.ksl-cap{min-height:26px;padding:6px 16px 0;text-align:center;font-weight:600;font-size:16px;color:#EDE3F5}
.ksl-strip{display:flex;gap:6px;overflow-x:auto;padding:10px 14px 14px;scrollbar-width:thin;justify-content:safe center}
.ksl-strip button{flex:0 0 auto;width:62px;height:62px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#2E1A44;cursor:pointer;opacity:.55;position:relative}
.ksl-strip button.on{border-color:#F2B705;opacity:1}
.ksl-strip img{width:100%;height:100%;object-fit:cover;display:block}
.ksl-strip i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;color:#fff;text-shadow:0 1px 4px #000}
.ksl-open{font-size:14px;font-weight:700;color:#F2B705}
@media(prefers-reduced-motion:no-preference){.ksl.open .ksl-st img,.ksl.open .ksl-st iframe{animation:kslIn .35s ease}}
@keyframes kslIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media(max-width:700px){.ksl-st{padding:0 6px}.ksl-st .pv,.ksl-st .nx{top:auto;bottom:10px;margin:0;width:46px;height:46px;background:rgba(0,0,0,.55)}.ksl-strip button{width:52px;height:52px}.ksl-t{font-size:15px}}