/* Vòng quay may mắn (1.46.0) — trang học viên web + app web. Mọi lớp có tiền tố vq- (app.css/site.css đã có .card/.chip/.hero).
   Nút: app.css có `body.app button{background:none;padding:0}` (độ ưu tiên 0,1,2) → mọi nút ở đây viết kèm lớp cha (.vq / .vq-wheel / .vq-modal) để thắng.
   Bộ giao diện = khối biến màu .vq-t-<mã> (thêm bộ mới: thêm 1 khối + 1 dòng THEMES trong kinafit/vongquay.py).
   Đời cũ (anh KB 05/10): không gap cho flex, không inset:, không aspect-ratio; chỉ animate transform/opacity/fill. */
@font-face{font-family:"Calistoga";src:url(/static/app/fonts/Calistoga-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
.vq-t-2010{--vq-a:#E8457C;--vq-a2:#D42F68;--vq-d:#B0245A;--vq-dd:#6E1236;--vq-bg1:#FFDCE7;--vq-bg2:#FFEFF4;--vq-bg3:#FFF8F3;--vq-soft:#FFE3EC;--vq-soft2:#FFF4F7;
  --vq-line:#F3DCE5;--vq-mute:#7a5a66;--vq-ink:#4d3a43;--vq-rim1:#FFE9A8;--vq-rim2:#E2A23A;--vq-pin1:#FF7FA6;--vq-pin2:#B0245A;--vq-hub1:#FF86AC;--vq-hub2:#9E1C4E;--vq-cta1:#F0628F;--vq-cta2:#C2185B}
.vq-t-kinafit{--vq-a:#2E96D0;--vq-a2:#0680CD;--vq-d:#0568A8;--vq-dd:#2A485E;--vq-bg1:#D6EEFB;--vq-bg2:#EAF6FD;--vq-bg3:#F6FBFE;--vq-soft:#E3F2FB;--vq-soft2:#F3FBFF;
  --vq-line:#D7E9F4;--vq-mute:#5d7280;--vq-ink:#2f4350;--vq-rim1:#FFE9A8;--vq-rim2:#E2A23A;--vq-pin1:#5BAFDD;--vq-pin2:#0568A8;--vq-hub1:#7CC4EA;--vq-hub2:#0B5E93;--vq-cta1:#2E96D0;--vq-cta2:#0568A8}

.vq{position:relative;font-family:"Roboto","Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vq-ink);
  background:linear-gradient(180deg,var(--vq-bg1) 0%,var(--vq-bg2) 30%,var(--vq-bg3) 62%,var(--vq-bg3) 100%);min-height:100%;padding-bottom:30px}
.vq *,.vq-modal *{box-sizing:border-box}
.vq-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;-webkit-flex-shrink:0;flex-shrink:0}
.vq a{color:var(--vq-d)}
.vq-ab{position:relative;z-index:3;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:52px;padding:0 6px}
.vq-back{width:40px;height:40px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:var(--vq-d)!important}
.vq-back .vq-ic{width:24px;height:24px}
.vq-abt{-webkit-flex:1;flex:1;text-align:center;font-size:16px;font-weight:700;color:var(--vq-dd);margin-right:40px}
.vq-hero{position:relative;text-align:center;padding:2px 20px 0}
.vq-web .vq-hero{padding-top:26px}
.vq-fl{position:absolute;top:-58px;left:-6px;right:-6px;height:210px;pointer-events:none}
.vq-web .vq-fl{top:-20px}
.vq-fl svg{width:100%;height:100%}
.vq-wm{position:absolute;left:0;right:0;top:-6px;font-family:"Calistoga",serif;font-size:108px;line-height:1;color:var(--vq-a);opacity:.08;letter-spacing:2px;pointer-events:none}
.vq-web .vq-wm{top:18px}
.vq-kick{display:inline-block;position:relative;padding:5px 12px;border-radius:999px;background:#fff;color:var(--vq-a2);font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(110,18,54,.12)}
.vq-h1{position:relative;font-family:"Calistoga",serif;font-weight:400;font-size:34px;line-height:1.15;color:var(--vq-d);margin:10px 0 0;text-shadow:0 2px 0 #fff}
.vq-sub{position:relative;font-size:14px;color:var(--vq-mute);margin:4px 0 0;line-height:1.4}
.vq-chip{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;margin-top:12px;padding:7px 14px 7px 10px;border-radius:999px;font-size:13.5px;font-weight:700;line-height:1.3;max-width:100%}
.vq-chip .vq-ic{width:18px;height:18px;margin-right:6px}
.vq-chip.co{background:linear-gradient(135deg,#FFEDB8,#F6C35A);color:#6b4300;box-shadow:0 4px 12px rgba(201,138,22,.28)}
.vq-chip.da{background:#fff;color:var(--vq-d);border:1px solid var(--vq-line)}
.vq-chip.chua{background:#fff;color:#6b5560;border:1px dashed var(--vq-a)}

.vq-wwrap{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;padding:22px 0 4px}
.vq-wheel{position:relative;width:312px;height:312px}
.vq-wheel.sm{width:280px;height:280px}
@media (max-width:350px){.vq-wheel{width:280px;height:280px}}
.vq-shd{position:absolute;top:8px;left:8px;right:8px;bottom:8px;border-radius:50%;box-shadow:0 18px 34px rgba(80,20,45,.28)}
.vq-rot{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.vq-wheel svg{display:block;width:100%;height:100%;stroke:none}   /* quản trị có svg{stroke:currentColor} chung → chữ trên ô bị viền */
.vq-rim{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.vq-bulb{fill:#FFF7DA}
.vq-bulb.b1{-webkit-animation:vqbl 1.2s steps(1) infinite;animation:vqbl 1.2s steps(1) infinite}
.vq-bulb.b2{-webkit-animation:vqbl 1.2s steps(1) .6s infinite;animation:vqbl 1.2s steps(1) .6s infinite}
.spinning .vq-bulb.b1,.spinning .vq-bulb.b2{-webkit-animation-duration:.28s;animation-duration:.28s}
.st-da .vq-bulb,.st-chua .vq-bulb{-webkit-animation:none;animation:none}
@-webkit-keyframes vqbl{0%{fill:#FFF7DA}50%{fill:#E6A537}}
@keyframes vqbl{0%{fill:#FFF7DA}50%{fill:#E6A537}}
.vq-pin{position:absolute;left:50%;top:-16px;width:44px;height:58px;margin-left:-22px;z-index:3}
.vq-pin svg{width:100%;height:100%}
.vq-wheel .vq-hub{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 35% 30%,var(--vq-hub1),var(--vq-a2) 55%,var(--vq-hub2));border:4px solid #FFE29A;
  box-shadow:0 4px 12px rgba(60,15,35,.45),inset 0 -3px 6px rgba(0,0,0,.18);color:#fff;font-family:"Calistoga",serif;font-size:19px;letter-spacing:.5px;
  display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;text-align:center;
  padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.vq-wheel.sm .vq-hub{width:68px;height:68px;margin:-34px 0 0 -34px;font-size:17px}
.vq-hub .vq-ic{width:28px;height:28px}
.st-co button.vq-hub{-webkit-animation:vqhub 1.8s ease-in-out infinite;animation:vqhub 1.8s ease-in-out infinite}
.spinning .vq-hub{-webkit-animation:none!important;animation:none!important}
@-webkit-keyframes vqhub{0%,100%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.07)}}
@keyframes vqhub{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.st-da .vq-wheel .vq-hub{background:radial-gradient(circle at 35% 30%,#fff,var(--vq-soft));color:var(--vq-d);font-family:inherit;font-size:12px;font-weight:700;line-height:1.15;cursor:default}
.st-chua .vq-wheel .vq-hub{background:radial-gradient(circle at 35% 30%,#fff,#EFE6EA);color:#8a7480;cursor:default}

.vq-sec{padding:0 16px}
.vq .vq-cta,.vq-modal .vq-cta{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:100%;height:52px;border-radius:14px;border:0;
  background:linear-gradient(135deg,var(--vq-cta1),var(--vq-cta2));color:#fff!important;font-size:17px;font-weight:700;font-family:inherit;text-decoration:none!important;
  box-shadow:0 8px 18px rgba(120,20,60,.25);margin-top:16px;cursor:pointer;touch-action:manipulation}
.vq-cta .vq-ic{margin-right:8px}
.vq .vq-cta[disabled]{opacity:.72;box-shadow:none}
.vq .vq-cta.vq-sub2{background:#fff;color:var(--vq-d)!important;border:1.5px solid var(--vq-a);box-shadow:none;height:46px;font-size:15px;margin-top:12px}
.vq-note{font-size:12.5px;color:var(--vq-mute);text-align:center;margin:8px 0 0;line-height:1.45}
.vq-note.left{text-align:left;margin-top:10px}
.vq-c2{padding:0 16px}
.vq-card{background:#fff;border-radius:16px;padding:14px;margin-top:14px;box-shadow:0 2px 10px rgba(80,20,45,.06);border:1px solid var(--vq-line)}
.vq-card h3{font-size:15px;color:var(--vq-dd);font-weight:700;margin:0 0 12px}
.vq-prz{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -3px}
.vq-prz .it{width:25%;padding:0 3px;margin-bottom:8px;text-align:center;font-size:12px;color:#5c4650;font-weight:500;line-height:1.3}
.vq-ci{width:50px;height:50px;border-radius:50%;margin:0 auto 6px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;border:1px solid rgba(80,20,45,.08)}
.vq-ci .vq-ic{width:26px;height:26px}
.vq-ci img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.vq-ci.ph,.vq-big.ph{background:#fff!important;border:2px solid #fff;box-shadow:0 0 0 1px var(--vq-line)}   /* ảnh thật: nền trắng, viền mảnh */
.vq-rules{list-style:none;margin:0;padding:0}
.vq-rules li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.5;color:var(--vq-ink);margin-top:6px}
.vq-rules li:first-child{margin-top:0}
.vq-rules li:before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--vq-a)}
.vq-det summary{list-style:none;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;font-size:15px;font-weight:700;color:var(--vq-dd)}
.vq-det summary::-webkit-details-marker{display:none}
.vq-det summary .vq-ic{width:18px;height:18px;color:var(--vq-a);-webkit-transition:-webkit-transform .2s;transition:transform .2s}
.vq-det[open] summary .vq-ic{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.vq-det[open] summary{margin-bottom:10px}
.vq-howto{padding-left:20px;margin:2px 0 0}
.vq-howto li{font-size:13.5px;line-height:1.5;color:var(--vq-ink);margin-top:8px;padding-left:2px}
.vq-howto li:first-child{margin-top:0}
.vq-howto b{color:var(--vq-dd)}
.vq-rh{font-size:13px;font-weight:700;color:var(--vq-d);margin:16px 0 8px;text-transform:uppercase;letter-spacing:.3px}
.vq-msg{margin-top:14px;padding:16px 16px 18px;border-radius:16px;background:linear-gradient(135deg,var(--vq-soft),#FFF1E6);text-align:center}
.vq-msg .vq-rh{margin-top:0}
.vq-msg p{font-family:"Calistoga",serif;font-size:16px;line-height:1.5;color:var(--vq-d);margin:0}
.vq-mine{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin-top:12px}
.vq-mine:first-of-type{margin-top:0}
.vq-mine .vq-ci{width:64px;height:64px;margin:0 14px 0 0;-webkit-flex-shrink:0;flex-shrink:0}
.vq-mine .vq-ci .vq-ic{width:34px;height:34px}
.vq-mine b{display:block;font-family:"Calistoga",serif;font-weight:400;font-size:22px;color:var(--vq-d)}
.vq-mine span{font-size:12.5px;color:#71848E}
.vq-steps{display:-webkit-flex;display:flex;margin-top:14px}
.vq-steps .s{-webkit-flex:1;flex:1;text-align:center;position:relative;font-size:11.5px;color:#9a8790;line-height:1.3}
.vq-steps .s:before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:#EEDDE4}
.vq-steps .s:first-child:before{display:none}
.vq-steps .s i{position:relative;z-index:1;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:24px;height:24px;margin:0 auto 5px;border-radius:50%;background:#F4E9EE;color:#b9a5ae;font-style:normal;font-size:12px;font-weight:700}
.vq-steps .s.ok{color:var(--vq-d);font-weight:500}
.vq-steps .s.ok i{background:var(--vq-a);color:#fff}
.vq-steps .s.ok:before{background:var(--vq-a)}
.vq-steps .s i .vq-ic{width:14px;height:14px;stroke-width:2.6}
.vq-offer .vq-kk{font-size:12px;font-weight:700;color:var(--vq-a2);text-transform:uppercase;letter-spacing:.4px}
.vq-offer .vq-pr{display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:6px}
.vq-offer .vq-pr b{font-family:"Calistoga",serif;font-weight:400;font-size:28px;color:var(--vq-d);margin-right:10px}
.vq-offer .vq-pr s{font-size:15px;color:#a08893}
.vq-ben{list-style:none;margin:10px 0 0;padding:0}
.vq-ben li{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:14px;color:#3f2f36;margin-top:8px}
.vq-ii{width:28px;height:28px;border-radius:50%;background:var(--vq-soft2);color:var(--vq-a2);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;margin-right:10px;-webkit-flex-shrink:0;flex-shrink:0}
.vq-ii .vq-ic{width:16px;height:16px;stroke-width:2.4}
.vq-until{margin-top:12px;font-size:12.5px;color:var(--vq-mute)}
.vq-keep{margin-top:12px;padding-top:12px;border-top:1px dashed var(--vq-line)}
.vq-keep b{display:block;font-size:13px;color:var(--vq-dd);margin-bottom:6px}
.vq-keep .vq-rules li{font-size:12.5px}

/* 1.46.2 bằng chứng xã hội: "N học viên đã nhận quà" + dòng người vừa trúng đổi mỗi 3,5 giây */
.vq-proof{margin:10px 16px 0;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.85);border:1px solid var(--vq-line);text-align:center;box-shadow:0 2px 10px rgba(80,20,45,.06)}
.vq-pn{font-size:13px;color:var(--vq-mute)}
.vq-pn b{font-size:15px;color:var(--vq-d)}
.vq-pt{position:relative;height:20px;margin-top:3px;overflow:hidden}
.vq-pi{position:absolute;left:0;right:0;top:0;font-size:13px;color:var(--vq-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;-webkit-transform:translateY(8px);transform:translateY(8px);
  -webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
.vq-pi.on{opacity:1;-webkit-transform:none;transform:none}
.vq-pi b{color:var(--vq-d)}
.vq-web .vq-proof{margin:12px 30px 0}

/* web máy tính: 2 cột, gọn trong một màn */
.vq-web{padding:0 0 36px}
.vq-web .vq-grid{max-width:1120px;margin:0 auto;padding:0 24px;display:-webkit-flex;display:flex;-webkit-align-items:flex-start;align-items:flex-start}
.vq-web .vq-c1{width:470px;-webkit-flex-shrink:0;flex-shrink:0;position:-webkit-sticky;position:sticky;top:76px;padding-bottom:10px}
.vq-web .vq-c2{-webkit-flex:1;flex:1;min-width:0;padding:26px 0 0 36px}
.vq-web .vq-c2 .vq-card:first-child{margin-top:0}
.vq-web .vq-wheel{width:340px;height:340px}
.vq-web .vq-sec{padding:0 30px}
@media (max-width:900px){.vq-web .vq-grid{display:block;padding:0}.vq-web .vq-c1{width:auto;position:static}.vq-web .vq-c2{padding:0 16px}}

/* hộp chúc mừng + pháo giấy (ngoài khung cuộn) */
.vq-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9000;background:rgba(60,10,30,.5);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;-webkit-transition:opacity .25s,visibility .25s;transition:opacity .25s,visibility .25s;font-family:"Roboto","Be Vietnam Pro",-apple-system,sans-serif}
.vq-modal.on{opacity:1;visibility:visible}
.vq-mbox{position:relative;width:100%;max-width:330px;background:#fff;border-radius:22px;text-align:center;padding:0 20px 18px;-webkit-transform:scale(.85);transform:scale(.85);
  -webkit-transition:-webkit-transform .35s cubic-bezier(.2,1.4,.4,1);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.vq-modal.on .vq-mbox{-webkit-transform:scale(1);transform:scale(1)}
.vq-mtop{margin:0 -20px;height:96px;border-radius:22px 22px 0 0;background:linear-gradient(135deg,var(--vq-pin1),var(--vq-a2));overflow:hidden;position:relative}
.vq-mtop svg{position:absolute;top:0;left:0;width:100%;height:100%}
.vq-big{width:104px;height:104px;border-radius:50%;margin:-56px auto 0;position:relative;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;border:5px solid #fff;box-shadow:0 6px 16px rgba(80,20,45,.22);overflow:hidden}
.vq-big .vq-ic{width:52px;height:52px}
.vq-big img{width:100%;height:100%;object-fit:cover}
.vq-t1{font-size:14px;color:var(--vq-mute);margin-top:12px}
.vq-t2{font-family:"Calistoga",serif;font-size:30px;color:var(--vq-d);margin-top:2px;line-height:1.15}
.vq-t3{font-size:14px;line-height:1.5;color:var(--vq-ink);margin-top:10px}
.vq-mbox .vq-cta{margin-top:16px;height:48px;font-size:16px}
.vq-modal .vq-x{display:block;margin:8px auto 0;font-size:14px;color:#71848E;padding:6px 12px;background:none;border:0;font-family:inherit;cursor:pointer}
.vq-cf{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;z-index:9001}
.vq-cf i{position:absolute;top:-24px;display:block;border-radius:2px;-webkit-animation:vqcfa 2.6s cubic-bezier(.3,.6,.5,1) forwards;animation:vqcfa 2.6s cubic-bezier(.3,.6,.5,1) forwards}
.vq-cf i.b{-webkit-animation-name:vqcfb;animation-name:vqcfb}
@-webkit-keyframes vqcfa{to{-webkit-transform:translate3d(-40px,110vh,0) rotate(620deg)}}
@keyframes vqcfa{to{transform:translate3d(-40px,110vh,0) rotate(620deg)}}
@-webkit-keyframes vqcfb{to{-webkit-transform:translate3d(50px,110vh,0) rotate(-540deg)}}
@keyframes vqcfb{to{transform:translate3d(50px,110vh,0) rotate(-540deg)}}
.vq-toast{position:fixed;left:50%;bottom:24px;z-index:9002;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#2b1d23;color:#fff;font-size:13.5px;padding:10px 16px;border-radius:10px;opacity:0;visibility:hidden;-webkit-transition:opacity .2s;transition:opacity .2s;max-width:90%;font-family:"Roboto",sans-serif}
.vq-toast.on{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.vq-bulb,.vq-hub{-webkit-animation:none!important;animation:none!important}}