/* CATSKY CITY — hộp thoại, chip năng lượng, thanh nút thành phố. Cùng phong cách kính lỏng với văn phòng. */
.cy-hbar{position:absolute;top:58px;left:14px;display:flex;gap:8px}
.cy-hbar .chip{cursor:pointer;color:#fff;transition:transform .2s var(--spring)}.cy-hbar .chip:active{transform:scale(.95)}
body.touch .cy-hbar{top:auto;bottom:96px;left:12px}
.cy-en-chip{gap:7px;cursor:pointer;padding:0 13px 0 11px}
.cy-en-chip b{font-variant-numeric:tabular-nums;min-width:22px;text-align:left}
.cy-bolt{filter:drop-shadow(0 0 6px rgba(255,214,10,.6))}
.cy-mini{width:38px;height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}.cy-mini i{display:block;height:100%;border-radius:3px;transition:width .6s var(--ease)}

#cityFade{position:fixed;inset:0;z-index:90;background:#0d0a14;opacity:0;pointer-events:none;transition:opacity .2s;display:grid;place-items:center}
#cityFade.on{opacity:1;pointer-events:auto}
.cy-ride{font-size:17px;font-weight:600;color:#fff;padding:16px 24px;border-radius:20px;background:rgba(10,108,255,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);animation:cyRide 1.1s ease-in-out infinite}
.cy-ride b{color:#9fd0ff}
@keyframes cyRide{50%{transform:translateX(8px)}}

.cy-wrap{position:fixed;inset:0;z-index:76;display:grid;place-items:center;padding:16px;background:rgba(14,6,20,.36);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:fade .2s}
.cy{position:relative;width:min(440px,100%);max-height:min(640px,100%);overflow:auto;padding:22px 20px 18px;border-radius:26px;background:rgba(32,28,46,.78);animation:muin .45s var(--spring)}
.cy-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12)}.cy-x:hover{background:rgba(255,255,255,.24)}.cy-x .ic{width:15px;height:15px}
.cy h3{font-size:19px;font-weight:800;letter-spacing:-.02em;padding-right:36px}
.cy-sub{margin-top:2px;font-size:12.5px;color:var(--muted)}
.cy-body{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.cy h4{margin:10px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.cy-p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.88)}.cy-p b{color:#fff}
.cy-note{font-size:12px;line-height:1.5;color:var(--muted)}
.cy-warn{font-size:12.5px;color:#ffd60a}
.cy-big{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.cy-big small{font-size:14px;font-weight:600;color:var(--muted)}
.cy-act{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.cy-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;width:100%;padding:10px 12px;border-radius:14px;text-align:left;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:background .15s,transform .15s}
.cy-row:hover{background:var(--fill2)}.cy-row:active{transform:scale(.98)}
.cy-row>.cy-ic,.cy-row>.cy-sw{grid-row:1/3}.cy-row b{font-size:14px}.cy-row small{grid-column:2;font-size:12px;color:var(--muted)}
.cy-row em{grid-column:3;grid-row:1/3;font-style:normal;font-weight:700;color:#ffd60a;font-variant-numeric:tabular-nums}
.cy-ic{font-size:20px;width:28px;text-align:center}
.cy-sw{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 3px rgba(0,0,0,.35)}
.cy-cols{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0 4px}
.cy-col{width:28px;height:28px;border-radius:50%;background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 3px rgba(0,0,0,.35);transition:transform .2s var(--spring)}
.cy-col.on{transform:scale(1.15);box-shadow:0 0 0 2px #14121c,0 0 0 4px #fff}
.cy-tabs{display:flex;gap:4px;padding:3px;border-radius:12px;background:rgba(0,0,0,.22)}
.cy-tabs button{flex:1;height:30px;border-radius:9px;font-weight:600;font-size:12.5px;color:var(--muted)}.cy-tabs button.on{background:rgba(255,255,255,.18);color:#fff}
.cy-en{display:flex;align-items:center;gap:10px;margin-top:4px}.cy-en b{white-space:nowrap}
.cy-bar{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}.cy-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#30d158,#ffd60a)}
.cy-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border-radius:14px;background:var(--fill)}
.cy-item small{flex:1 1 100%;font-size:12px;color:var(--muted)}.cy-item .btn{margin-left:auto}
.cy-item .cy-seg{flex:1;min-width:180px}
.cy-tx{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.cy-tx span{color:var(--muted)}.cy-tx b{font-variant-numeric:tabular-nums}.cy-tx b.neg{color:#ff8a80}
.cy-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cy-form input{height:36px;font-size:13px}
@media (max-width:520px){.cy{padding:18px 14px 14px}.cy-form{grid-template-columns:1fr}}

/* ---- phần 2: túi đồ, siêu thị, tủ lạnh, bếp, tầng Tiền Về ---- */
.cy-row.dim,.cy-row:disabled{opacity:.45;cursor:not-allowed}
.cy-row.on{outline:2px solid rgba(124,108,255,.7)}
.cy-bag,.cy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cy-slot{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;align-items:center;column-gap:8px;row-gap:4px;padding:10px;border-radius:14px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line)}
.cy-slot .cy-bi{grid-row:1/3;font-size:24px;text-align:center}
.cy-slot b{font-size:13px;line-height:1.25}.cy-slot b i{font-style:normal;color:#ffd60a}
.cy-slot small{color:var(--muted);font-size:12px}
.cy-slot .btn,.cy-slot .cy-qty{grid-column:1/3}
.cy-qty{display:flex;gap:6px}.cy-qty .btn{flex:1}
.cy-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cy-two>div{display:flex;flex-direction:column;gap:8px}
.cy.cook{max-width:420px;text-align:center}
.cook-step{font-size:15px;margin:6px 0 10px}
.cook-pan{position:relative;height:96px;display:flex;align-items:center;justify-content:center;font-size:56px}
.cook-pan .cook-food{position:absolute;top:18px;font-size:22px;letter-spacing:2px}
.cook-pan .cook-fire{position:absolute;bottom:0;font-size:22px;animation:cookFire .4s infinite alternate}
.cook-pan.toss .cook-food{animation:cookToss .5s ease-out}
@keyframes cookToss{0%{transform:translateY(0)}40%{transform:translateY(-34px) rotate(20deg)}100%{transform:translateY(0)}}
@keyframes cookFire{from{transform:scale(1)}to{transform:scale(1.25)}}
.cook-bar{position:relative;height:22px;border-radius:11px;background:var(--fill2);overflow:hidden;margin:6px 4px}
.cook-zone{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#30d158,#7fe08a);border-radius:11px}
.cook-needle{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:#ff453a;border-radius:2px;box-shadow:0 0 8px #ff453a}
.cook-stars{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:22px;font-size:12px}
.cook-stars .ok{color:#30d158}.cook-stars .no{color:#ff6b6b}
.tv-win{position:fixed;inset:24px;z-index:60;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#0f1418;box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15)}
.tv-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(90deg,#0f5a4a,#123a52);color:#fff}
.tv-bar small{opacity:.7}.tv-bar span{flex:1}
.tv-win iframe{flex:1;border:0;width:100%;background:#fff}
.tv-off{padding:20px;color:#fff}

.cy-mult{margin-left:6px;font-size:11px;font-weight:700;color:#ffd60a}

/* thẻ người: kết bạn CTalk */
.fr-card{position:fixed;z-index:70;width:280px;padding:14px;border-radius:18px;background:rgba(24,20,33,.92);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 40px rgba(0,0,0,.45);backdrop-filter:blur(14px)}
.fr-top{display:flex;gap:12px;align-items:center}.fr-top>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.fr-top b{font-size:15px}.fr-top small{opacity:.7;font-size:12px}.fr-top em{font-style:normal;font-size:12px;color:#ffd60a}
.fr-act{display:flex;gap:8px;margin-top:12px}.fr-act .btn{flex:1}
.fr-req{cursor:default}.fr-btns{display:flex;gap:6px;margin-left:auto}
/* ===== Cẩm nang ===== */
.cg-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(8,6,14,.55);backdrop-filter:blur(6px);padding:16px}
.cg{display:flex;width:min(980px,100%);height:min(640px,100%);border-radius:22px;overflow:hidden;background:rgba(24,20,33,.94);color:#f4f1fa;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.cg-nav{width:220px;flex:none;display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.08);overflow-y:auto}
.cg-brand{font-weight:800;font-size:16px;padding:6px 10px 12px}
.cg-brand small{display:block;font-weight:500;font-size:11px;opacity:.6;margin-top:2px}
.cg-nav button{all:unset;cursor:pointer;padding:8px 10px;border-radius:10px;font-size:13.5px;color:#d9d3e6}
.cg-nav button:hover{background:rgba(255,255,255,.07)}
.cg-nav button.on{background:rgba(255,214,10,.16);color:#ffd60a;font-weight:700}
.cg-body{flex:1;min-width:0;display:flex;flex-direction:column}
.cg-wrap[hidden]{display:none}
.cg-body{position:relative;overflow-y:auto;padding:22px 26px 0;font-size:14px;line-height:1.6}
.cg-body h2{font-size:21px;font-weight:800;margin:0 40px 8px 0}
.cg-body .cy-x{position:absolute;top:14px;right:14px}
.cg-nav button span{display:inline-block;width:24px}
.cg-card span{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:2px 0}.cg-card em{font-style:normal;color:#ffd60a;white-space:nowrap}
.cg-body h4{margin:18px 0 6px;font-size:15px;color:#ffd60a}
.cg-body p{margin:6px 0}.cg-body ul{margin:6px 0;padding-left:20px}.cg-body li{margin:3px 0}
.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:10px 0}
.cg-card{padding:12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.cg-card b{display:block;margin-bottom:3px}.cg-card small{opacity:.75;font-size:12.5px}
.cg-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.cg-flow span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:13px}
.cg-flow i{font-style:normal;opacity:.5}
.cg-note{margin:12px 0;padding:10px 14px;border-radius:12px;background:rgba(255,214,10,.1);border-left:3px solid #ffd60a;font-size:13.5px}
.cg-t{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.cg-body table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.cg-body td,.cg-body th{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.cg-body th{opacity:.7;font-weight:600}
.cg-foot{position:sticky;bottom:0;margin:auto -26px 0;background:rgba(24,20,33,.97);display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid rgba(255,255,255,.08)}
.cg kbd{display:inline-block;min-width:18px;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.12);border-bottom:2px solid rgba(255,255,255,.2);font:600 12px/1.5 inherit;text-align:center}
@media (max-width:700px){.cg{flex-direction:column}.cg-nav{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:8px}.cg-brand{display:none}.cg-nav button{white-space:nowrap}.cg-body{padding:16px 16px 0}.cg-foot{margin:18px -16px 0}}
.cg-hero{display:flex;flex:none;gap:14px;align-items:center;margin:0 40px 16px 0;padding:16px 18px;border-radius:16px;background:linear-gradient(120deg,rgba(255,214,10,.16),rgba(255,120,170,.12) 55%,rgba(110,170,255,.12));border:1px solid rgba(255,255,255,.1)}
.cg-hero>span{font-size:38px;line-height:1}.cg-hero b{display:block;font-size:19px;font-weight:800}.cg-hero small{display:block;opacity:.8;font-size:13px;margin-top:2px}
.cg-body p{font-size:14.5px;line-height:1.7}
/* ===== Túi đồ gộp ===== */
.cg.bg{position:relative;gap:0;height:min(600px,100%)}
.cg.bg .cy-x{position:absolute;top:12px;right:12px;z-index:2}
.bg-col{flex:1;min-width:0;display:flex;flex-direction:column;padding:18px 18px 14px}
.bg-col.bg-r{flex:1.25;border-left:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.bg-col h3{margin:0 40px 12px 0;font-size:18px;font-weight:800;display:flex;align-items:baseline;gap:8px}.bg-col h3 small{font-size:12px;font-weight:500;opacity:.6}
.bg-tabs{display:flex;gap:6px;margin-bottom:10px}
.bg-tabs button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;font-size:13px;background:rgba(255,255,255,.07)}
.bg-tabs button.on{background:#fff;color:#1a1424;font-weight:700}
.bg-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}
.bg-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.bg-ic{font-size:26px;width:40px;text-align:center}.bg-cv{width:48px;height:48px;image-rendering:pixelated}
.bg-t{flex:1;min-width:0;display:flex;flex-direction:column}.bg-t b{font-size:14px}.bg-t b i{font-style:normal;color:#ffd60a;font-size:12px}.bg-t small{opacity:.65;font-size:12px}
.bg-on,.bg-off{font-style:normal;font-size:12px;opacity:.6;white-space:nowrap}.bg-on{color:#7ee2a8;opacity:1}
.bg-empty{margin:auto;text-align:center;opacity:.8;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px}
.bg-empty span{font-size:40px}.bg-empty small{opacity:.7;max-width:260px}
.bg-foot{margin:10px 0 0;font-size:12.5px;opacity:.75;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bg-foot .btn{opacity:1}
@media (max-width:700px){.cg.bg{flex-direction:column;height:100%}.bg-col.bg-r{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.cg-hero{margin-right:36px}.cg-hero>span{font-size:30px}}
.cg-body>p:last-of-type,.cg-body>ul:last-of-type{margin-bottom:18px}
/* ===== Nhiệm vụ mỗi ngày ===== */
.qs-chip{position:relative}.qs-chip b{color:#ffd60a;margin-left:2px}
.qs-chip.ready{box-shadow:0 0 0 2px rgba(255,214,10,.6),0 0 18px rgba(255,214,10,.45);animation:qsGlow 1.6s ease-in-out infinite}
@keyframes qsGlow{50%{box-shadow:0 0 0 2px rgba(255,214,10,.9),0 0 26px rgba(255,214,10,.7)}}
.qs-chip.pop{animation:qsPop .6s}@keyframes qsPop{30%{transform:scale(1.18)}}
.qs-dot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:#ff3b5c;color:#fff;font:700 11px/18px inherit;font-style:normal;text-align:center;padding:0 4px}
.qs{position:relative;width:min(560px,100%);max-height:100%;overflow-y:auto;border-radius:22px;padding:22px;background:linear-gradient(160deg,rgba(40,30,58,.96),rgba(22,18,32,.96));color:#f4f1fa;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.qs .cy-x{position:absolute;top:14px;right:14px}
.qs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 44px 16px 0}
.qs-head h2{margin:0;font-size:22px;font-weight:800}.qs-head small{opacity:.6;font-size:12.5px}
.qs-streak{display:flex;flex-direction:column;align-items:center;padding:6px 14px;border-radius:14px;background:rgba(255,255,255,.06);filter:grayscale(1);opacity:.6}
.qs-streak.on{filter:none;opacity:1;background:rgba(255,120,40,.15)}
.qs-streak span{font-size:22px;line-height:1}.qs-streak b{font-size:18px;color:#ffb347;line-height:1.1}.qs-streak small{font-size:10.5px;opacity:.7}
.qs-list{display:flex;flex-direction:column;gap:10px}
.qs-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);animation:qsIn .4s both;animation-delay:var(--d)}
@keyframes qsIn{from{opacity:0;transform:translateY(8px)}}
.qs-card.done{border-color:rgba(255,214,10,.55);background:rgba(255,214,10,.08)}
.qs-card.ok{opacity:.6}
.qs-ic{font-size:30px;width:42px;text-align:center}
.qs-mid{flex:1;min-width:0}.qs-mid b{font-size:14.5px;display:block}.qs-mid small{font-size:12px;opacity:.7}.qs-mid em{font-style:normal;color:#ffd60a}
.qs-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.1);margin:6px 0 4px;overflow:hidden}
.qs-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#ffb347,#ffd60a);transition:width .5s}
.qs-claim{animation:qsGlow 1.4s infinite;white-space:nowrap}
.qs-claim.gold,.qs-card.done .qs-claim{background:linear-gradient(135deg,#ffd60a,#ff9f1c);color:#2a1a00}
.qs-ok{font-size:12.5px;color:#7ee2a8;white-space:nowrap}
.qs-re{all:unset;cursor:pointer;font-size:12.5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);white-space:nowrap}.qs-re:hover{background:rgba(255,255,255,.16)}
.qs-chest{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px;border-radius:18px;background:linear-gradient(120deg,rgba(255,214,10,.12),rgba(255,120,170,.1));border:1px dashed rgba(255,214,10,.4)}
.qs-chest.ready{border-style:solid;box-shadow:0 0 24px rgba(255,214,10,.25)}
.qs-chest>div{flex:1;min-width:0}.qs-chest b{display:block}.qs-chest small{opacity:.7;font-size:12px}
.qs-box{font-size:40px}.qs-chest.ready .qs-box{animation:qsShake 1.2s infinite}
@keyframes qsShake{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-12deg)}80%{transform:rotate(10deg)}90%{transform:rotate(-6deg)}}
.qs-days{display:flex;gap:4px;margin-top:6px}.qs-days i{font-style:normal;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:11px;background:rgba(255,255,255,.08)}
.qs-days i.on{background:#ff9f1c;color:#2a1a00;font-weight:700}.qs-days i.next{outline:2px dashed #ffd60a}
.qs-tip{font-size:12px;opacity:.6;margin:12px 0 0}
.qs-coin{position:fixed;z-index:200;font-style:normal;font-size:20px;pointer-events:none}
.qs-float{position:fixed;z-index:201;transform:translateX(-50%);font:800 22px inherit;color:#ffd60a;text-shadow:0 2px 8px rgba(0,0,0,.6);pointer-events:none;animation:qsUp 1.3s forwards}
@keyframes qsUp{to{transform:translate(-50%,-60px);opacity:0}}
@media (max-width:600px){.qs{padding:16px}.qs-card{flex-wrap:wrap}.qs-chest{flex-wrap:wrap}}
.fr-tag{display:inline-block;font-style:normal;font-size:11px;padding:1px 7px;border-radius:999px;margin-top:3px;width:max-content}
.fr-tag.ok{background:rgba(126,226,168,.14);color:#7ee2a8}.fr-tag.warn{background:rgba(255,159,28,.18);color:#ffb347}.fr-tag.bad{background:rgba(255,59,92,.18);color:#ff7a8f}
.bg-it.spoiled,.fr-slot.spoiled{filter:saturate(.4);border-color:rgba(255,59,92,.3)}
.fr-slot{flex-wrap:wrap}.fr-btns{display:flex;gap:4px;margin-left:auto}
/* ===== Siêu thị: kệ + thu ngân ===== */
.mt-list{display:flex;flex-direction:column;gap:8px}
.mt-it{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.mt-ic{font-size:28px;width:38px;text-align:center}
.mt-t{flex:1;min-width:140px;display:flex;flex-direction:column}.mt-t small{opacity:.7;font-size:12px}.mt-t em{font-style:normal;font-size:12px;color:#7ee2a8}
.mt-step{display:flex;align-items:center;gap:4px}.mt-step b{min-width:26px;text-align:center;font-size:15px}
.mt-sum{font-style:normal;font-weight:700;color:#ffd60a;min-width:70px;text-align:right}
.mt-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(255,214,10,.1);font-size:15px}.mt-total b{font-size:20px;color:#ffd60a}
/* ===== Game Center ===== */
.gm-wrap{position:fixed;inset:0;z-index:92;display:flex;align-items:center;justify-content:center;background:rgba(6,4,18,.7);backdrop-filter:blur(6px);padding:12px}
.gm-wrap[hidden]{display:none}
.gm{position:relative;width:min(760px,100%);max-height:100%;overflow-y:auto;border-radius:24px;padding:20px;color:#f4f1fa;background:radial-gradient(120% 80% at 50% 0%,#3a1a6e 0%,#1a1030 60%,#0e0a1e 100%);border:2px solid rgba(127,227,255,.35);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 40px rgba(178,140,240,.35),0 24px 60px rgba(0,0,0,.6)}
.gm .cy-x{position:absolute;top:14px;right:14px}
.gm-title{display:flex;align-items:center;gap:12px;margin:0 44px 14px 0}.gm-title>span{font-size:36px}
.gm-title b{display:block;font-size:22px;letter-spacing:2px;background:linear-gradient(90deg,#7fe3ff,#ff8fd8,#ffd34e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(127,227,255,.25)}
.gm-title small{opacity:.7;font-size:12.5px}.gm-back{margin-left:auto}
.gm-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gm-pick{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(127,227,255,.25);transition:transform .15s,box-shadow .15s}
.gm-pick:hover{transform:translateY(-3px);box-shadow:0 0 22px rgba(255,143,216,.35)}
.gm-pick span{font-size:34px}.gm-pick b{font-size:15px}.gm-pick small{opacity:.65;font-size:12px}
.gm-note{opacity:.6;font-size:12.5px;margin:14px 0 0}
.gm-body{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.gm-cab{position:relative;padding:12px;border-radius:20px;background:linear-gradient(180deg,#e86a8a,#7a2a5e);box-shadow:inset 0 0 0 3px rgba(255,255,255,.15),0 10px 30px rgba(0,0,0,.5)}
.gm-cab canvas{display:block;width:320px;max-width:78vw;aspect-ratio:320/420;border-radius:10px;background:#000;touch-action:none;image-rendering:auto}
.gm-hud{display:flex;justify-content:space-between;font-size:12.5px;padding:0 4px 8px;color:#fff}.gm-hud b{color:#ffd34e;font-size:15px}
.gm-over{position:absolute;inset:44px 12px 12px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(14,10,30,.78);text-align:center;padding:16px}
.gm-over[hidden]{display:none}.gm-over>b{font-size:22px}.gm-over small{font-size:14px;line-height:1.6}.gm-go{font-size:16px;padding:10px 22px}
.gm-side{flex:1;min-width:200px}.gm-side h4{margin:4px 0 8px;color:#7fe3ff}
.gm-side ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.gm-side li{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.06);font-size:13px}.gm-side li span{width:22px;text-align:center}.gm-side li b{flex:1}.gm-side li em{font-style:normal;color:#ffd34e;font-weight:700}
.gm-side li.me{background:rgba(255,211,78,.15);outline:1px solid rgba(255,211,78,.4)}.gm-none{opacity:.6;font-size:12.5px}
.gm-toy{font-size:13px;padding:4px 0}.gm-toy em{font-style:normal;color:#ffd34e}
.caro-st{text-align:center;font-weight:700;margin:4px 0 10px;color:#ffd34e}
.caro{display:grid;grid-template-columns:repeat(15,1fr);gap:2px;width:min(540px,100%);margin:0 auto 12px;aspect-ratio:1;background:rgba(127,227,255,.2);padding:2px;border-radius:10px}
.caro button{all:unset;cursor:pointer;display:grid;place-items:center;background:#f4efe6;border-radius:3px;font:800 clamp(10px,2.6vw,20px)/1 system-ui;color:#333}
.caro button:hover{background:#fff8dc}.caro .v1{color:#e04848}.caro .v2{color:#3a7bd5}.caro .last{background:#ffe9a8}
/* ===== Rạp phim Mây ===== */
.cn-wrap{position:fixed;inset:0;z-index:93;background:radial-gradient(120% 90% at 50% 0%,#2a0f1e 0%,#120812 55%,#07040a 100%);color:#f6eef2;display:flex;padding:12px}
.cn-wrap[hidden]{display:none}
.cn{flex:1;display:flex;flex-direction:column;min-height:0;max-width:1400px;margin:0 auto;width:100%}
.cn-top{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:10px}
.cn-top .cy-x{position:absolute;right:0;top:0}
.cn-marq{display:flex;flex-direction:column;align-items:center;padding:6px 26px;border-radius:12px;background:#2a1a3a;border:2px solid #f2c14e;box-shadow:0 0 18px rgba(242,193,78,.35);
  background-image:radial-gradient(circle,#ffe27a 1.6px,transparent 2px);background-size:12px 12px;background-position:0 0;animation:cnBulb 1.2s steps(2) infinite}
@keyframes cnBulb{50%{background-position:6px 0}}
.cn-marq b{font-size:20px;letter-spacing:4px;color:#ffe27a;text-shadow:0 0 10px rgba(255,226,122,.7);background:#2a1a3a;padding:0 8px}.cn-marq small{font-size:11px;opacity:.75;background:#2a1a3a;padding:0 6px}
.cn-main{flex:1;display:flex;gap:14px;min-height:0}
.cn-hall{flex:1;display:flex;flex-direction:column;min-width:0;gap:10px}
.cn-stage{position:relative;padding:14px 46px 18px;border-radius:16px;background:linear-gradient(180deg,#1a0a12,#0c0609)}
.cn-cur{position:absolute;top:0;bottom:0;width:46px;background:repeating-linear-gradient(90deg,#8a0f22 0 8px,#b0182e 8px 14px,#6a0a18 14px 18px);box-shadow:inset 0 -20px 30px rgba(0,0,0,.5)}
.cn-cur.l{left:0;border-radius:16px 0 0 16px}.cn-cur.r{right:0;border-radius:0 16px 16px 0}
.cn-screen{position:relative;aspect-ratio:16/9;max-height:62vh;margin:0 auto;border-radius:6px;background:#000;overflow:hidden;box-shadow:0 0 50px rgba(160,200,255,.18),0 18px 40px rgba(0,0,0,.7)}
.cn-screen video,.cn-screen iframe,#cnYt{width:100%;height:100%;display:block;border:0;background:#000}
.cn-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;background:radial-gradient(circle at 50% 40%,#2a2440,#0b0912)}
.cn-idle b{font-size:22px}.cn-idle small{opacity:.75}
.cn-form{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:min(560px,100%)}
.cn-form input{flex:1 1 220px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:inherit}
.cn-tip{font-size:11.5px;opacity:.6;max-width:520px;margin:0}
.cn-buy{font-size:16px;padding:10px 22px}
.cn-tap{position:absolute;inset:auto 0 16px;margin:auto;width:max-content;padding:10px 18px;border-radius:999px;border:0;background:#ffd34e;color:#2a1a00;font:700 14px inherit;cursor:pointer}
.cn-tap[hidden]{display:none}
.cn-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cn-fx i{position:absolute;bottom:10px;font-style:normal;font-size:30px;animation:cnUp 2.6s ease-out forwards}
@keyframes cnUp{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-30px) scale(1.15)}100%{transform:translateY(-260px) scale(1);opacity:0}}
.cn-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06)}
.cn-now{display:flex;flex-direction:column;min-width:140px;flex:0 1 auto}.cn-now small{opacity:.65;font-size:12px}
.cn-time{font-variant-numeric:tabular-nums;font-size:13px;opacity:.85}
.cn-bar input[type=range]{flex:1;min-width:120px;accent-color:#ffd34e}
.cn-prog{flex:1;min-width:120px;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}.cn-prog i{display:block;height:100%;background:#ffd34e}
.cn-seats{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:4px 30px;perspective:400px}
.cn-seats i{height:26px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#6a1424,#4a0c18);box-shadow:inset 0 -5px 0 rgba(0,0,0,.35);font:600 10px/26px inherit;font-style:normal;text-align:center;color:#ffd0dc;overflow:hidden}
.cn-seats i.on{background:linear-gradient(180deg,#b0283e,#7a1428);color:#fff}.cn-seats i.me{outline:2px solid #ffd34e}.cn-seats i.host{background:linear-gradient(180deg,#d9a42a,#9a6a10);color:#2a1a00}
.cn-chat{width:300px;flex:none;display:flex;flex-direction:column;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:12px;min-height:0}
.cn-chat h4{margin:0 0 8px}
.cn-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;font-size:13.5px;min-height:120px}
.cn-msgs p{margin:0;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.07);width:fit-content;max-width:95%;word-break:break-word}
.cn-msgs p b{display:block;font-size:11.5px;color:#ffb3c6}.cn-msgs p.me{align-self:flex-end;background:rgba(255,211,78,.16)}.cn-msgs p.me b{color:#ffd34e}
.cn-msgs .cn-sys{background:none;opacity:.65;font-size:12px;align-self:center;text-align:center}
.cn-react{display:flex;gap:4px;margin:8px 0}.cn-react button{all:unset;cursor:pointer;flex:1;text-align:center;font-size:20px;padding:4px 0;border-radius:10px;background:rgba(255,255,255,.06)}.cn-react button:hover{background:rgba(255,255,255,.15);transform:scale(1.1)}
.cn-in{display:flex;gap:6px}.cn-in input{flex:1;min-width:0;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:inherit}
@media (max-width:860px){.cn-main{flex-direction:column}.cn-chat{width:auto;height:240px}.cn-stage{padding:10px 24px 12px}.cn-cur{width:24px}.cn-seats{padding:4px 6px}}
.cn-in .btn{flex:none;width:auto}