*{box-sizing:border-box}body{margin:0;font-family:"Be Vietnam Pro",Arial,sans-serif;background:linear-gradient(180deg,#eaf4ff,#f8fbff);color:#062f72}.spin-page{width:min(1120px,100% - 28px);margin:auto;padding:26px 0 46px}.spin-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px;border:1px solid rgba(13,71,161,.13);border-radius:28px;background:linear-gradient(135deg,#fff,#e8f4ff);box-shadow:0 18px 44px rgba(13,71,161,.10)}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:900;color:#0b66d0}.spin-hero h1{font-size:clamp(34px,5vw,66px);line-height:1.02;margin:8px 0;color:#083b87;letter-spacing:-.055em}.spin-hero p{max-width:700px;line-height:1.65;color:#46617f}.spin-hero a{white-space:nowrap;background:#0b66d0;color:#fff;text-decoration:none;font-weight:900;padding:14px 18px;border-radius:16px}.spin-card{margin-top:20px;display:grid;grid-template-columns:.92fr 1fr;gap:20px;align-items:stretch}.wheel-wrap,.claim-form{border:1px solid rgba(13,71,161,.12);border-radius:30px;background:rgba(255,255,255,.88);box-shadow:0 18px 50px rgba(13,71,161,.10);padding:22px}.wheel-wrap{display:grid;place-items:center;position:relative;min-height:520px}.wheel{width:min(420px,85vw);aspect-ratio:1;border-radius:50%;background:conic-gradient(#0b66d0 0 60deg,#d7ecff 60deg 120deg,#164a96 120deg 180deg,#67c7ff 180deg 240deg,#6c4edb 240deg 300deg,#f8fbff 300deg 360deg);border:14px solid #fff;box-shadow:0 20px 60px rgba(13,71,161,.25),inset 0 0 0 2px rgba(13,71,161,.14);transition:transform 4s cubic-bezier(.15,.75,.12,1)}.wheel:after{content:"ChiKang";position:absolute;display:grid;place-items:center;width:108px;height:108px;border-radius:50%;background:#fff;color:#0b66d0;font-weight:950;box-shadow:0 10px 24px rgba(0,0,0,.12)}.pointer{position:absolute;top:38px;z-index:3;width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:38px solid #e1203d;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}#spinBtn{position:absolute;bottom:32px;background:#0b66d0;color:#fff;border:0;border-radius:999px;padding:16px 26px;font-size:18px;font-weight:950;cursor:pointer;box-shadow:0 14px 34px rgba(13,71,161,.28)}.claim-form{display:grid;gap:12px}.claim-form h2{font-size:32px;line-height:1.12;margin:0;color:#083b87}.claim-form p{margin:0;color:#516984;line-height:1.55}.claim-form input,.claim-form textarea{width:100%;border:1px solid rgba(13,71,161,.16);border-radius:16px;padding:14px;font:inherit}.claim-form button{border:0;border-radius:16px;background:#083b87;color:#fff;padding:15px;font-weight:950}#claimResult{min-height:24px;color:#083b87;font-weight:800}.success{padding:14px;border-radius:16px;background:#eef8ff;border:1px solid rgba(13,102,208,.18)}.error{padding:14px;border-radius:16px;background:#fff4f4;color:#a21414;border:1px solid rgba(180,40,40,.18)}@media(max-width:860px){.spin-hero,.spin-card{grid-template-columns:1fr;display:grid}.spin-hero a{width:max-content}.wheel-wrap{min-height:420px}}

/* v18.8.9.36.40 — ChiKang Spin Asset Skin
   Uses uploaded wheel / pointer / hub / ring assets instead of CSS-generated wheel.
*/
.chikang-wheel-skin{
  background:
    radial-gradient(circle at 50% 38%, rgba(14,148,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,244,255,.92));
}
.wheel-stage{
  position:relative;
  width:min(520px, 88vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  isolation:isolate;
  filter:drop-shadow(0 26px 44px rgba(5,55,120,.20));
}
.wheel-stage::before{
  content:"";
  position:absolute;
  inset:5.5%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.78), rgba(211,235,255,.26) 54%, rgba(10,102,208,.12) 72%, transparent 77%);
  box-shadow:0 0 42px rgba(11,102,208,.22);
  z-index:0;
}
.wheel-frame,
.wheel-disc,
.wheel-hub,
.pointer{
  position:absolute;
  display:block;
  user-select:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
.wheel-frame{
  width:101.5%;
  height:101.5%;
  object-fit:contain;
  z-index:4;
  opacity:.98;
  mix-blend-mode:multiply;
}
.wheel-disc{
  width:94%;
  height:94%;
  object-fit:contain;
  z-index:2;
  border-radius:50%;
  transform-origin:50% 50%;
  transition:transform 4s cubic-bezier(.15,.75,.12,1);
}
.wheel-hub{
  width:31%;
  height:auto;
  z-index:5;
  filter:drop-shadow(0 12px 20px rgba(2,40,96,.20));
}
.pointer{
  width:13.6%;
  height:auto;
  top:-2.5%;
  left:50%;
  transform:translateX(-50%) rotate(180deg);
  transform-origin:50% 64%;
  z-index:7;
  filter:drop-shadow(0 10px 18px rgba(2,40,96,.28));
}
.wheel-wrap #spinBtn{
  z-index:8;
  bottom:20px;
  background:linear-gradient(135deg,#073b86,#0b7cff);
  border:1px solid rgba(255,255,255,.45);
}
.wheel-wrap #spinBtn:disabled{
  opacity:.72;
  cursor:wait;
}
.wheel-wrap .wheel{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.wheel-wrap .wheel:after{
  display:none!important;
}
@media(max-width:860px){
  .wheel-stage{width:min(430px, 86vw)}
  .pointer{top:-3.6%;width:14.5%}
}
@media(max-width:520px){
  .wheel-stage{width:min(360px, 86vw)}
  .wheel-wrap{min-height:430px}
  .wheel-hub{width:33%}
  .pointer{top:-4%;width:15%}
  .wheel-wrap #spinBtn{bottom:18px}
}


/* v18.8.9.36.40 — remove legacy red CSS pointer wedge
   The old CSS pointer was a red triangle built by borders.
   The pointer is now a PNG image, so reset all inherited borders.
*/
.chikang-wheel-skin .pointer,
.wheel-stage .pointer {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  outline: 0 !important;
}


/* v18.8.9.36.40 — pointer rotates, wheel is clickable, prize labels inside tooth slots */
.chikang-wheel-skin {
  cursor: pointer;
}
.wheel-stage {
  cursor: pointer;
  overflow: visible;
}
.wheel-stage:focus-visible {
  outline: 4px solid rgba(11,102,208,.32);
  outline-offset: 8px;
  border-radius: 50%;
}
.wheel-disc {
  transition: none !important;
  transform: none !important;
}
.pointer-rotor {
  position: absolute;
  inset: 0;
  z-index: 6;
  transform-origin: 50% 50%;
  transition: transform 3.9s cubic-bezier(.12,.78,.12,1);
  pointer-events: none;
}
.pointer-rotor .pointer {
  position: absolute !important;
  display: block;
  width: 13.8% !important;
  height: auto !important;
  left: 50% !important;
  top: -2.8% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  transform-origin: 50% 88% !important;
  z-index: 7;
  border: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  filter: drop-shadow(0 12px 18px rgba(2,40,96,.32));
}
.wheel-hub {
  z-index: 8 !important;
}
.prize-labels {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.prize-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17%;
  height: 30%;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(-31%)
    rotate(90deg);
  color: #073b86;
  font-weight: 950;
  font-size: clamp(10px, 1.35vw, 15px);
  line-height: 1.05;
  text-align: center;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
.prize-label b {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 96px;
}
.prize-label-1,
.prize-label-2 {
  color: #074c9f;
}
.prize-label-3,
.prize-label-4,
.prize-label-5 {
  color: #0b66d0;
}
.wheel-hint {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  z-index: 9;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg,#073b86,#0b7cff);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 14px 34px rgba(13,71,161,.26);
  font-weight: 950;
  font-size: 14px;
}
.wheel-stage.is-spinning {
  cursor: wait;
}
.wheel-stage.is-spinning .wheel-hint {
  opacity: .82;
}
#spinBtn {
  display: none !important;
}
@media(max-width:860px){
  .pointer-rotor .pointer{top:-3.8%!important;width:14.8%!important}
  .prize-label{width:18%;height:31%;font-size:clamp(9px,2.5vw,13px);}
}
@media(max-width:520px){
  .pointer-rotor .pointer{top:-4.3%!important;width:15.2%!important}
  .prize-label{width:20%;height:32%;font-size:10px;}
  .wheel-hint{bottom:-18px;font-size:13px;padding:9px 14px;}
}


/* v18.8.9.36.40 — final prize text alignment on tooth slots */
.wheel-wrap.chikang-wheel-skin {
  padding-bottom: 78px !important;
  min-height: 590px !important;
}
.wheel-stage {
  margin-top: 6px;
  margin-bottom: 34px;
}
.prize-labels {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.wheel-stage .prize-label {
  position: absolute !important;
  width: 19.2% !important;
  min-height: 14.5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 6px !important;
  color: #063f8e !important;
  text-align: center !important;
  font-weight: 950 !important;
  font-size: clamp(9px, 1.08vw, 13px) !important;
  line-height: 1.05 !important;
  letter-spacing: .012em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 0 8px rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  transform-origin: 50% 50% !important;
}
.wheel-stage .prize-label b {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
  max-width: 100% !important;
  max-height: 4.35em !important;
}
/* 6 manual centers: text sits in each white tooth-shaped slot */
.wheel-stage .prize-label-0 { left: 50.0% !important; top: 24.0% !important; transform: translate(-50%,-50%) rotate(0deg) !important; }
.wheel-stage .prize-label-1 { left: 71.0% !important; top: 37.0% !important; transform: translate(-50%,-50%) rotate(58deg) !important; }
.wheel-stage .prize-label-2 { left: 71.0% !important; top: 63.0% !important; transform: translate(-50%,-50%) rotate(-58deg) !important; }
.wheel-stage .prize-label-3 { left: 50.0% !important; top: 76.0% !important; transform: translate(-50%,-50%) rotate(0deg) !important; }
.wheel-stage .prize-label-4 { left: 29.0% !important; top: 63.0% !important; transform: translate(-50%,-50%) rotate(58deg) !important; }
.wheel-stage .prize-label-5 { left: 29.0% !important; top: 37.0% !important; transform: translate(-50%,-50%) rotate(-58deg) !important; }
.wheel-hint {
  bottom: -54px !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  box-shadow: 0 14px 34px rgba(13,71,161,.20) !important;
}
.pointer-rotor .pointer {
  top: -3.2% !important;
  width: 13.2% !important;
}
@media(max-width:860px){
  .wheel-wrap.chikang-wheel-skin{min-height:520px!important;padding-bottom:72px!important;}
  .wheel-stage{margin-bottom:34px;}
  .wheel-stage .prize-label{font-size:clamp(8px,2vw,12px)!important;width:20.5%!important;min-height:14.5%!important;padding:3px 5px!important;}
  .wheel-hint{bottom:-52px!important;font-size:13px!important;}
}
@media(max-width:520px){
  .wheel-wrap.chikang-wheel-skin{min-height:455px!important;padding-bottom:68px!important;}
  .wheel-stage .prize-label{font-size:9px!important;width:21.5%!important;min-height:15%!important;line-height:1.02!important;}
  .wheel-stage .prize-label b{-webkit-line-clamp:3!important;max-height:3.25em!important;}
  .wheel-stage .prize-label-0{top:24.5%!important;}
  .wheel-stage .prize-label-3{top:75.5%!important;}
  .wheel-hint{bottom:-50px!important;font-size:12px!important;padding:9px 14px!important;}
}


/* v18.8.9.36.40 — Vietnamese font + variable prize label layout */
:root {
  --tl-font-vi: "Be Vietnam Pro", "Noto Sans Vietnamese", "Noto Sans", "Segoe UI", "Arial", sans-serif;
}
html, body, button, input, select, textarea,
.spin-page, .spin-card, .claim-form, .prize-label {
  font-family: var(--tl-font-vi) !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
}
.wheel-stage .prize-label {
  left: var(--x) !important;
  top: var(--y) !important;
  width: var(--label-w) !important;
  transform: translate(-50%,-50%) rotate(var(--r)) !important;
  font-size: var(--fs) !important;
  color: var(--label-color) !important;
  min-height: 13.8% !important;
  padding: 3px 5px !important;
}
.wheel-stage .prize-label b {
  font-family: var(--tl-font-vi) !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.wheel-hint {
  bottom: -64px !important;
  font-family: var(--tl-font-vi) !important;
}
.wheel-wrap.chikang-wheel-skin {
  padding-bottom: 92px !important;
}
.claim-form h2,
.spin-hero h1 {
  font-family: var(--tl-font-vi) !important;
}
@media(max-width:520px){
  .wheel-stage .prize-label {
    font-size: min(var(--fs), 10.5px) !important;
    width: calc(var(--label-w) + 1.5%) !important;
  }
  .wheel-hint { bottom: -58px !important; }
}


/* v18.8.9.36.40 — six fixed prize slots, Vietnamese font-safe labels */
:root{--spin-font:"Be Vietnam Pro","Noto Sans Vietnamese","Noto Sans","Segoe UI",Arial,sans-serif;}
body,.spin-page,.claim-form,.prize-label,.wheel-hint{font-family:var(--spin-font)!important;}
.prize-labels{position:absolute;inset:0;z-index:5;pointer-events:none;}
.prize-label{
  position:absolute!important;
  left:calc(var(--x) + var(--dx, 0%))!important;
  top:calc(var(--y) + var(--dy, 0%))!important;
  width:var(--label-w, 15%)!important;
  min-height:32px;
  display:grid!important;
  place-items:center!important;
  transform:translate(-50%,-50%) rotate(var(--r,0deg))!important;
  transform-origin:50% 50%!important;
  color:var(--label-color,#063f8e)!important;
  font-size:var(--fs,12px)!important;
  line-height:1.08!important;
  text-align:center!important;
  font-weight:950!important;
  letter-spacing:.025em!important;
  text-transform:uppercase!important;
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 5px rgba(255,255,255,.75)!important;
  overflow:visible!important;
}
.prize-label b{display:block;max-width:100%;word-break:keep-all;overflow-wrap:break-word;hyphens:auto;}
.wheel-hint{bottom:-34px!important;}
.wheel-wrap{padding-bottom:50px!important;}
@media(max-width:860px){.prize-label{font-size:calc(var(--fs,12px) * .92)!important;width:calc(var(--label-w,15%) + 2%)!important}.wheel-hint{bottom:-32px!important;}}
@media(max-width:520px){.prize-label{font-size:calc(var(--fs,12px) * .82)!important;width:calc(var(--label-w,15%) + 4%)!important}.wheel-hint{bottom:-30px!important;}}


/* v18.8.9.36.40 — final readable label default: 19px, rotate 0deg */
.wheel-stage .prize-label{
  font-size:var(--fs,19px)!important;
  width:var(--label-w,22%)!important;
  transform:translate(-50%,-50%) translate(var(--dx,0%),var(--dy,0%)) rotate(var(--r,0deg))!important;
}
.wheel-stage .prize-label b{
  -webkit-line-clamp:3!important;
  max-height:3.45em!important;
}
@media(max-width:860px){.wheel-stage .prize-label{font-size:calc(var(--fs,19px) * .78)!important;width:calc(var(--label-w,22%) + 2%)!important;}}
@media(max-width:520px){.wheel-stage .prize-label{font-size:calc(var(--fs,19px) * .62)!important;width:calc(var(--label-w,22%) + 4%)!important;}}


/* v18.8.9.36.40 · reward popup UX */
.spin-popup-enabled .claim-form{display:none!important}
.spin-popup-enabled .spin-card{grid-template-columns:1fr;place-items:center}
.spin-popup-enabled .wheel-wrap{width:min(620px,100%);min-height:560px}
.spin-popup-enabled #claimResult{position:fixed;left:18px;bottom:18px;z-index:20;max-width:360px}
.spin-popup-enabled .wheel-hint{bottom:-38px}
@media(max-width:860px){.spin-popup-enabled .wheel-wrap{min-height:460px}.spin-popup-enabled .wheel-hint{bottom:-30px}}