/* ---- riêng trang TLBB Classic ---- */
.band{position:relative;border-radius:var(--r);overflow:hidden;margin:0 0 18px;min-height:clamp(200px,18vw,320px);display:flex;align-items:flex-end;padding:22px;background:linear-gradient(135deg,#231652,#05060a);border:1px solid var(--line)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.05) 100%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 60%)}
.band .in{position:relative;z-index:1;max-width:640px}
.band .cg-eyebrow{color:#14F0AF}
.band h1 em{font-style:normal;color:#14F0AF}
.band h1{color:#fff;font-size:clamp(28px,4.4vw,44px);font-weight:900}
.band p{margin:8px 0 0;color:#DDD8EC}
@media (min-width:1024px){.band{padding:32px clamp(32px,3vw,56px)}}

.srv{margin-bottom:18px;display:grid;gap:14px}
.ros{display:grid;gap:10px}
.ros .tm{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--card-2)}
.ros .tm > b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ros .tm ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.ros .tm li{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px}
.ros .tm .cl{display:flex;flex-direction:column;line-height:1.25}
.ros .tm .cl b{font-weight:800;font-size:14.5px;color:var(--fg);text-transform:none;letter-spacing:0;margin:0}
.ros .tm .cl small{color:var(--muted);font-size:12px}
.ros .tm .who{flex:none;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--primary-2) 12%,transparent);color:var(--primary-2);font:800 12.5px/1 var(--f-body)}
.srv-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.srv-cd{font-size:14px;color:var(--fg-2)}
.srv-cd b{color:var(--accent-2);font-family:var(--f-mono)}
.srv-grid{display:grid;gap:14px}
@media (min-width:900px){.srv-grid{grid-template-columns:1fr 1fr 1.3fr}}
@media (min-width:1700px){.srv{grid-template-columns:minmax(0,1fr) auto;align-items:center}.srv-top{grid-column:1/-1}}
.srv-grid b{font-weight:800}
.controls{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:4px 0 18px}
.controls>div{min-width:0}
@media (min-width:900px){.controls{grid-template-columns:auto auto 1fr;align-items:end}}
.livebar{display:grid;gap:12px;margin-bottom:18px}
@media (min-width:768px){.livebar{grid-template-columns:220px minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1600px){.livebar{grid-template-columns:260px minmax(0,1fr) minmax(0,1fr)}}
.clock{display:flex;flex-direction:column;justify-content:center}
.clock .t{font:700 36px/1 var(--f-mono);color:var(--game);font-variant-numeric:tabular-nums}
.clock .t small{font-size:.55em;color:var(--muted);margin-left:2px}
.clock .d{color:var(--muted);font-size:13.5px;margin-top:8px}
.mini h3{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg-2)}
.mini li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.mini li:last-child{border:0}
.mini a{color:inherit;text-decoration:none}
.mini a:hover{color:var(--primary-2)}
.mini .when{color:var(--muted);white-space:nowrap;font-size:13px}
.mini .when b{color:var(--accent-2);font-weight:700}

.planwrap{display:grid;gap:16px}
@media (min-width:1024px){.planwrap{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.planwrap aside{position:sticky;top:24px}}
@media (min-width:1600px){.planwrap{grid-template-columns:minmax(0,1fr) 380px}}
.planmain{min-width:0;display:grid;gap:16px;align-content:start}
.allday h3{font-size:15px;margin:0 0 8px}
.allday ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:0 24px}
.allday li{display:grid;grid-template-columns:auto 36px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:12px 0;border-bottom:1px dashed var(--line)}
.allday li .ab{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.45}.allday li .ab > b{font-size:15px;line-height:1.35}
.allday li small{color:var(--fg-2);font-size:12.5px}
.allday .lvb{font:700 12px/1.2 var(--f-mono);color:var(--muted);white-space:nowrap;text-align:right;padding-top:3px}
.allday li.locked{opacity:.45}
/* Màu countdown theo mức gấp */
.cd.u-far{border:1px solid var(--line-2);color:var(--muted)}.cd.plain{padding-left:0;padding-right:0;color:var(--muted)}@media (max-width:640px){.cd{white-space:normal;max-width:100%}.allday li{grid-template-columns:auto 36px minmax(0,1fr)}.allday li .lvb{grid-column:3;text-align:left;padding:0}}
.cd.u-near{border:1px solid color-mix(in srgb,var(--primary-2) 60%,transparent);color:var(--primary-2)}
.cd.u-imm{background:color-mix(in srgb,var(--gold) 18%,transparent);border:1px solid var(--gold);color:var(--gold);animation:cgBlink 1.6s ease-in-out infinite}
.cd.u-live{background:var(--accent);color:var(--on-accent)}
.cd.u-end{background:var(--rose);color:#fff;animation:cgBlink 1.2s ease-in-out infinite}
.step.u-imm .body{border-color:color-mix(in srgb,var(--gold) 65%,transparent)}
.step.u-imm .pin{border-color:var(--gold)}
.step.u-end .body{border-color:color-mix(in srgb,var(--rose) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--rose) 30%,transparent)}
.step.u-end .pin{background:var(--rose);border-color:var(--rose)}
.mini .when b.u-far{color:var(--muted)}
.mini .when b.u-near{color:var(--primary-2)}
.mini .when b.u-imm{color:var(--gold)}
.mini .when b.u-live{color:var(--accent-2)}
.mini .when b.u-end{color:var(--rose)}
.cg-tag.ucd{border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.72);color:#fff}
.cg-tag.ucd.u-near{border-color:var(--primary-2);color:#cfd3ff}
.cg-tag.ucd.u-imm{background:var(--gold);border-color:var(--gold);color:#1a1200}
.cg-tag.ucd.u-live{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cg-tag.ucd.u-end{background:var(--rose);border-color:var(--rose);color:#fff}
@keyframes cgBlink{50%{opacity:.55}}
@keyframes cgFlash{0%,100%{opacity:1;box-shadow:0 0 0 0 transparent}50%{opacity:.35;box-shadow:0 0 14px 2px currentColor}}.cg-tag.ucd.u-imm{animation:cgFlash 1.2s ease-in-out infinite;--fc:var(--gold)}.cg-tag.ucd.u-end{animation:cgFlash .8s ease-in-out infinite}.boss .times span.nx.imm{animation:cgFlash 1.2s ease-in-out infinite;border-color:var(--gold);color:var(--gold)}.boss .times span.on.end{animation:cgFlash .8s ease-in-out infinite;background:var(--rose);border-color:var(--rose);color:#fff}.mini .when b.u-imm{animation:cgBlink 1.6s ease-in-out infinite}.mini .when b.u-end{animation:cgBlink 1.1s ease-in-out infinite}.boss .times em.ovn{font:600 12px/30px var(--f-body);font-style:normal;color:var(--muted);padding:0 2px}
@media (prefers-reduced-motion:reduce){.cd.u-imm,.cd.u-end,.cg-tag.ucd.u-imm,.cg-tag.ucd.u-end,.boss .times span.nx.imm,.boss .times span.on.end,.mini .when b.u-imm,.mini .when b.u-end{animation:none}}
.howto .lg.ucds{width:auto;height:auto;border:0;background:none;display:inline-flex;gap:4px;flex-wrap:wrap}
.howto .lg.ucds .cd{margin:0}.howto li.wide{flex-wrap:wrap}.howto li.wide .lg.ucds{flex:1 1 100%;max-width:100%}
.boss .pic.head{background:radial-gradient(circle at 50% 40%,#2a2d3a,#0b0c11)}
.boss .pic.head img{object-fit:contain;padding:40px 60px 70px;image-rendering:auto}
.boss .times em.always{font-style:normal;font-size:13px;color:var(--fg-2)}
.step .tip{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--gold) 8%,transparent);font-size:13.5px;color:var(--fg-2)}
.step .tip svg{flex:none;width:16px;height:16px;color:var(--gold);margin-top:2px}
.allday details.tipx{margin-top:2px;font-size:12.5px;color:var(--fg-2)}.allday details.tipx summary{cursor:pointer;color:var(--gold);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:4px}.allday details.tipx summary::-webkit-details-marker{display:none}.allday details.tipx summary::before{content:'▸';transition:transform .15s}.allday details.tipx[open] summary::before{transform:rotate(90deg)}.allday details.tipx p{margin:4px 0 0;line-height:1.5}
.step.locked .body{opacity:.45}
img.ai{flex:none;border-radius:8px;border:1px solid var(--line-2);background:#0b0c11;object-fit:contain;vertical-align:middle}
.allday li img.ai{margin-top:1px}
.aname,.dsrc{display:flex;align-items:flex-start;gap:10px;min-width:0}
.aname > div,.dsrc > div{min-width:0}
#nowList a,#nextList a{display:inline-flex;align-items:center;gap:8px;min-width:0}
#nowList img.ai,#nextList img.ai{width:24px;height:24px;border-radius:6px}
.mthumb{display:block;width:100%;padding:0;margin:8px 0 10px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--bg-2);cursor:pointer;text-decoration:none}
.mthumb img{display:block;width:100%;height:150px;object-fit:cover;transition:transform .25s var(--ease)}
.mthumb:hover img{transform:scale(1.04)}
.gloss .gl{display:flex;gap:12px;align-items:flex-start}
.gloss img.gi{flex:none;width:36px;height:36px;border-radius:8px;border:1px solid var(--line-2);background:#0b0c11;object-fit:contain}
.tl.hide-done .step.past:not(.maint),.tl.hide-done .step.done,.allday.hide-done li.done,.tl.hide-lock .step.locked,.allday.hide-lock li.locked{display:none}
.tl.hide-done .step.past.maint{display:none}
.allday li{align-items:flex-start}
.allday li .check{margin:2px 0 0}.allday li img.ai{width:36px;height:36px}

.allday li.done{opacity:.5}
.allday .knbb{color:var(--gold)}
.cg-tg{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:14px;font-weight:600;color:var(--fg-2);cursor:pointer;user-select:none}
.cg-tg input{width:18px;height:18px;accent-color:var(--primary-2);cursor:pointer}
.step.locked .pin{opacity:.4}
.tl{position:relative;list-style:none;margin:0;padding:0}
.tl::before{content:"";position:absolute;left:75px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--line-2),var(--line))}
.step{position:relative;display:grid;grid-template-columns:56px 22px minmax(0,1fr);gap:10px;padding:8px 0}
.step .time{font:700 14.5px/1.3 var(--f-mono);color:var(--game);text-align:right;padding-top:13px;font-variant-numeric:tabular-nums}
.step .time small{display:block;color:var(--muted);font-weight:500;font-size:11.5px}
.step .pin{width:14px;height:14px;margin:17px 0 0 3px;background:var(--bg);border:2px solid var(--line-2);z-index:1;transform:rotate(45deg);border-radius:2px}
.step.live .pin{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(20,240,175,.25)}
.step.soon .pin{border-color:var(--primary-2)}
.step.done .pin{background:var(--green);border-color:var(--green)}
.step.past:not(.done) .body{opacity:.5}
.step.maint .body{border-style:dashed;background:transparent}
.body{min-width:0;overflow-wrap:anywhere;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .2s var(--ease),opacity .2s var(--ease)}
.step.live .body{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 1px rgba(20,240,175,.25),0 0 24px rgba(20,240,175,.14)}
.step.soon .body{border-color:color-mix(in srgb,var(--primary-2) 55%,transparent)}
.step.done .body{border-color:color-mix(in srgb,var(--green) 50%,transparent);background:var(--green-bg)}
.bhead{display:flex;gap:12px;align-items:flex-start}
.bhead .ic{width:44px;height:44px;flex:none;border-radius:12px;background:#0b0c11;object-fit:contain;border:1px solid var(--line-2);padding:2px}
.bhead .tt{flex:1;min-width:0}
.bhead h3{font:600 16px/1.35 var(--f-body)}
.bhead .opt{font-size:12px;color:var(--muted);font-weight:500;margin-left:6px}
.cd{display:inline-block;font:600 12px/1.6 var(--f-mono);padding:1px 8px;border-radius:6px;margin-top:4px;white-space:nowrap}
.cd:empty{display:none}
.step.live .cd{background:var(--accent);color:var(--on-accent)}
.step.soon .cd{border:1px solid var(--primary-2);color:var(--primary-2)}
.check{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--line-2);background:var(--bg);cursor:pointer;display:grid;place-items:center;position:relative;transition:background .15s,border-color .15s}
.check::after{content:"";width:12px;height:7px;border-left:2.5px solid var(--on-green);border-bottom:2.5px solid var(--on-green);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.check:checked{background:var(--green);border-color:var(--green)}
.check:checked::after{opacity:1}
.check::before{content:"";position:absolute;inset:-9px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.where{margin-top:8px;color:var(--fg-2);font-size:14px;display:flex;gap:6px;align-items:flex-start}
.where svg{width:16px;height:16px;margin-top:3px;color:var(--game)}
.rt{margin-top:8px;font-size:14px;color:var(--fg-2);padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--game) 6%,transparent);border:1px dashed var(--line-2)}
.rt b{color:var(--game);font-weight:600}
.why{margin-top:6px;color:var(--muted);font-size:13.5px}
.xy{font-family:var(--f-mono);color:var(--game);font-size:.92em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal}

.week{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.wday h3{display:flex;justify-content:space-between;align-items:center;font-size:17px}
.wday li{padding:6px 0;border-bottom:1px dashed var(--line);font-size:14.5px;display:flex;gap:10px}
.wday li:last-child{border:0}
.wday .mono{color:var(--game);min-width:56px;font-size:13px;padding-top:2px}
.today{font:600 11.5px var(--f-body);background:var(--accent);color:var(--on-accent);padding:2px 8px;border-radius:6px}
.allact{margin-top:32px}
.allact summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-family:var(--f-display);font-weight:700}
.allact summary::-webkit-details-marker{display:none}
.allact summary:hover{border-color:var(--primary-2)}
.allact .chev{margin-left:auto;display:flex;transition:transform .2s var(--ease)}
.allact[open] .chev{transform:rotate(180deg)}

.lvl{font:700 15px/1.2 var(--f-mono);color:var(--game);white-space:nowrap}
.star{color:var(--gold)}
.big{font:700 28px/1.1 var(--f-mono);color:var(--game)}
.pcard h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 17px var(--f-body)}
.pcard h3 svg{color:var(--game)}
.pcard ol{margin:10px 0 0;padding-left:22px;display:grid;gap:5px;font-size:14.5px;color:var(--fg-2)}
.pcard ol li::marker{color:var(--game);font-family:var(--f-mono);font-weight:700}
.pcard .npcs{margin-top:10px;font-size:14px;color:var(--fg-2);display:grid;gap:4px}
.pcard .npcs li::before{content:"·";color:var(--game);margin-right:6px;font-weight:700}

.bosses{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.boss{display:flex;flex-direction:column;padding:0;overflow:hidden}
.boss .pic{position:relative;aspect-ratio:16/10;background:var(--bg-2);overflow:hidden}
.boss .pic img{width:100%;height:100%;object-fit:cover}
.boss .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 55%)}
.boss .pic .nm{position:absolute;left:14px;right:14px;bottom:10px;z-index:1;color:#fff;font:900 18px/1.25 var(--f-display)}
.boss .pic .st{position:absolute;top:12px;left:12px;z-index:1;display:flex}
.boss .pic .st .cg-tag{height:26px;padding:0 11px;font-size:12.5px}
.boss .bd{flex:1;padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--fg-2)}
.boss .drops{display:grid;gap:6px}
.boss .drops .it{margin:0}
.boss .bd .cg-links{margin-top:auto;padding-top:4px}
.boss .times{display:flex;flex-wrap:wrap;gap:6px}
.boss .times span{display:inline-flex;align-items:center;height:30px;font:700 13px/1 var(--f-mono);padding:0 10px;border-radius:8px;border:1px solid var(--line-2);color:var(--fg-2)}
.boss .times span.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.boss .times span.nx{border-color:var(--primary-2);color:var(--primary-2)}
.boss .cap{font-size:12px;color:var(--muted)}
.it{display:inline-flex;align-items:center;gap:8px;margin:3px 12px 3px 0;vertical-align:middle;line-height:1.3}
.it img{width:28px;height:28px;border-radius:6px;flex:none;background:var(--bg-2)}
#routeLv tr.cur td{background:color-mix(in srgb,var(--accent-2) 8%,transparent)}
#routeLv tr.cur td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
#routeLv tr.past{opacity:.45}
.unsure{color:var(--muted);font-style:italic}
.unsure::after{content:" ?";font-style:normal;color:var(--gold)}
.hot{color:var(--gold);font-weight:600}
.notes li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.notes li:last-child{border:0}
.notes .d{font:600 12.5px var(--f-mono);color:var(--game);padding-top:3px;white-space:nowrap}
.notes b{display:block;margin-bottom:2px}
.pop-acts .on{color:var(--accent-2);font-weight:700}

.clock .r{font:600 12.5px var(--f-mono);color:var(--muted);margin-top:4px}
.howto{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:0 16px}
.howto summary{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;font-weight:800;list-style:none}
.howto summary::-webkit-details-marker{display:none}
.howto summary svg{width:18px;height:18px;color:var(--primary-2)}
.howto summary .chev{margin-left:auto;transition:transform .2s var(--ease)}
.howto[open] summary .chev{transform:rotate(180deg)}
.howto ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px 20px;padding:0 0 4px;font-size:14px;color:var(--fg-2)}
.howto li{display:flex;align-items:center;gap:10px;min-height:28px}
.howto li .tx{min-width:0;flex:1}
.howto .lg{flex:none;width:28px;height:20px;border-radius:6px;border:2px solid var(--line-2);background:var(--card-2)}
.howto .lg.live{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.howto .lg.soon{border-color:var(--primary-2)}
.howto .lg.past{opacity:.4}
.howto .lg.ln,.howto .lg.ab{width:auto;height:auto;border:0;background:none;font-weight:700;color:var(--fg)}
.howto .lg.ln{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-2)}
.howto .lg.ab{text-decoration:underline dotted;text-underline-offset:3px}
.howto .lg.tk{width:20px;border-radius:5px}
.howto p{margin:4px 0 14px}
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:0 24px;margin:0}
.gloss .gl{padding:10px 0;border-bottom:1px dashed var(--line)}
.gloss dt{font-weight:800;color:var(--fg)}
.gloss dt .ab{font-family:var(--f-mono);color:var(--game);font-size:.95em}
.gloss dd{margin:2px 0 0;font-size:14px;color:var(--fg-2)}

.controls.tbc{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px}
.tbc .wide{flex-basis:100%}
#tbSlots th:nth-child(1){width:120px}
#tbSlots th:nth-child(2){width:30%}
.cg-seg.wrap{flex-wrap:wrap}
.tbwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:1100px){.tbwrap{grid-template-columns:minmax(0,1fr) 340px}}
#tbSlots td{vertical-align:top}
#tbSlots td small{font-weight:600;color:var(--muted)}
.gms{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,165px),1fr));gap:6px 12px}
.gm{display:flex;align-items:center;gap:8px;min-width:0}
.gm span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.gm b{font-size:13.5px}
.gm small{font:600 12px var(--f-mono);color:var(--accent-2)}
img.si{width:32px;height:32px;flex:none;border-radius:7px;border:1px solid var(--line-2);background:#0b0c11}
.si.ph{display:inline-block;width:32px;height:32px;border-radius:7px;border:1px dashed var(--line-2)}
.cg-stat.tot{font-weight:800}
ol.steps{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--fg-2);font-size:14px}
ol.steps li{display:flex;justify-content:space-between;gap:12px}
ol.steps li small{white-space:nowrap;color:var(--accent-2);padding-top:2px}
ul.buy{display:grid;gap:8px}
ul.buy li{display:flex;align-items:center;gap:10px}
ul.buy li span{display:flex;flex-direction:column}
ul.buy small{color:var(--muted);font-size:12.5px}
.bgchips{margin:0 0 14px}@media (max-width:640px){.bgchips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-right:-16px;scrollbar-width:thin}.bgchips .cg-chip{flex:none}}.bg-intro{margin:0 0 16px}.bg-intro h3{margin:0 0 6px}.bg-intro .how{margin:0 0 10px;color:var(--fg-2)}.bgn{list-style:none;margin:0;padding:0;display:grid;gap:8px}.bgn li{display:flex;gap:10px;align-items:flex-start;line-height:1.55;color:var(--fg-2);font-size:14.5px}.bgn .cg-tag{flex:none;margin-top:1px;min-width:74px;justify-content:center}.bossbar{margin-bottom:8px}.bossbar .cg-label{min-width:96px}#fBoss .bc{font:700 11px/1 var(--f-mono);opacity:.75}
.boss .waves{list-style:none;margin:0;padding:0;display:grid;gap:6px}.boss .waves li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}.boss .waves li.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.boss .waves .wm{font-weight:800;color:var(--primary-2);font-size:14px}.boss .waves .wn{display:flex;flex-direction:column;min-width:0;line-height:1.3}.boss .waves .wn b{font-size:13.5px;color:var(--fg)}.boss .waves .wn small{font-size:12px;color:var(--muted)}.boss .waves .wxy{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:12px}.boss .waves .wxy svg{width:12px;height:12px}.boss .waves .ws{height:22px;font-size:11.5px;padding:0 8px}
/* ---------- trang chi tiết ---------- */
.ct-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;margin:0 0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--fg-2);font:700 13.5px var(--f-body);cursor:pointer}
.ct-back svg{width:16px;height:16px}.ct-back:hover{color:var(--fg);border-color:var(--primary-2)}
.ct-head{display:flex;gap:18px;align-items:center;margin:0 0 18px}
.ct-head h1{margin:2px 0 4px;font-size:clamp(24px,4vw,34px);line-height:1.2}
.ct-head p{margin:0;color:var(--fg-2)}
.ct-pic{width:96px;height:96px;flex:none;border-radius:16px;object-fit:cover;background:var(--card-2);border:1px solid var(--line-2)}
.ct-pic.head{object-fit:contain;background:radial-gradient(circle at 50% 40%,#2a2d3a,#0b0c11)}
.ct-tags{display:inline-flex;flex-wrap:wrap;gap:6px}
.ct-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));margin-bottom:16px}
.ct-grid > .ct-sec{margin:0}
.ct-sec{margin:0 0 16px}.ct-sec h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 12px}.ct-sec h2 svg{width:18px;height:18px;color:var(--primary-2)}
.ct-p{margin:0;color:var(--fg-2);line-height:1.6}.ct-hint{margin-top:10px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--green) 8%,transparent)}
.ct-facts{display:grid;gap:0}.ct-facts .cg-stat{align-items:flex-start}.ct-facts .cg-stat .tx{text-align:right;font:600 14.5px/1.5 var(--f-body);color:var(--fg);max-width:70%}.ct-facts .cg-stat .tx .mono{font-family:var(--f-mono)}.ct-map .sec{display:none}.ct-grid{align-items:start}
.ct-st{margin:0 0 10px}
.ct-times{display:flex;flex-wrap:wrap;gap:6px}
.ct-times span{display:inline-flex;align-items:center;height:30px;font:700 13px/1 var(--f-mono);padding:0 10px;border-radius:8px;border:1px solid var(--line-2);color:var(--fg-2)}
.ct-times span.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ct-times span.nx{border-color:var(--primary-2);color:var(--primary-2)}
.ct-times em.ovn{font:600 12px/30px var(--f-body);font-style:normal;color:var(--muted);padding:0 2px}
.ct-items{display:flex;flex-wrap:wrap;gap:8px}
.ct-it{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border:1px solid var(--line-2);border-radius:999px;color:var(--fg-2);text-decoration:none;font-size:14px;transition:border-color .15s}
.ct-it:hover{border-color:var(--primary-2);color:var(--fg)}
.ct-it img,.ct-it .ph{width:26px;height:26px;border-radius:6px;flex:none}.ct-it .ph{background:var(--card-2)}
.ct-it.hot{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent);font-weight:600}.ct-it.unsure{font-style:italic;opacity:.8}
.sec2{font:800 11.5px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.ct-chips{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.ct-chip{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card-2);color:var(--fg);text-decoration:none;font-size:14px;font-weight:600;transition:border-color .15s}
.ct-chip:hover{border-color:var(--primary-2)}.ct-chip img{width:28px;height:28px;border-radius:6px;object-fit:contain;flex:none}.ct-chip span{flex:1;min-width:0}.ct-chip svg{width:16px;height:16px;color:var(--muted);flex:none}
.ct-waves{list-style:none;margin:0;padding:0;display:grid;gap:6px}.ct-waves li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}.ct-waves li > b{color:var(--primary-2)}.ct-waves li > span{display:flex;flex-direction:column}.ct-waves small{color:var(--muted)}
.ct-notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}.ct-notes li{display:flex;gap:10px;align-items:flex-start;color:var(--fg-2);font-size:14.5px;line-height:1.55}.ct-notes .cg-tag{flex:none;min-width:84px;justify-content:center}
.ct-steps,.ct-npcs{margin:0;padding-left:22px;display:grid;gap:6px;color:var(--fg-2)}
.ct-map .map{max-width:640px}
a.it{color:inherit;text-decoration:none}a.it:hover span{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.ct-head{gap:12px}.ct-pic{width:68px;height:68px}}
/* ---------- nhắc giờ · hôm nay · chia sẻ ---------- */
.bell{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line-2);background:var(--card-2);color:var(--muted);cursor:pointer;vertical-align:middle;transition:all .15s}
.bell svg{width:15px;height:15px}.bell:hover{color:var(--fg);border-color:var(--primary-2)}
.bell[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1200}
.boss .pic .pbell{position:absolute;top:10px;right:10px;z-index:2}.boss .pic .pbell .bell{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.3);color:#fff}.boss .pic .pbell .bell[aria-pressed="true"]{background:var(--gold);color:#1a1200}
.boss .waves li{grid-template-columns:38px minmax(0,1fr) auto auto}
.ct-bell{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.cg-toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);z-index:1100;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 24px));padding:12px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line-2);box-shadow:0 12px 40px rgba(0,0,0,.45);color:var(--fg);font-weight:600;opacity:0;pointer-events:none;transition:all .25s}
.cg-toast.on{opacity:1;transform:translate(-50%,0)}.cg-toast svg{width:18px;height:18px;color:var(--gold);flex:none}.cg-toast.alarm{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent),0 12px 40px rgba(0,0,0,.45)}
@media (min-width:1024px){.cg-toast{bottom:28px}}
.tdy{margin-bottom:18px}.td-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.tdy h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 12px}.tdy h2 svg{width:18px;height:18px;color:var(--primary-2)}.tdy h2 small{font-weight:600;font-size:13px}
.td-prog{display:flex;align-items:center;gap:12px;margin:0 0 14px}.td-bar{flex:1;height:10px;border-radius:999px;background:var(--card-2);overflow:hidden}.td-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--primary-2));transition:width .4s}
.td-quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.td-quick .cg-label{width:100%}
.td-lv{display:inline-flex;gap:6px;align-items:center;margin:0}.td-lv label{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--fg-2)}.td-lv input{width:64px;min-height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);color:var(--fg);padding:0 8px;font:600 15px var(--f-mono)}
.td-follow{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}.td-follow li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}
.td-follow a{color:var(--fg);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-follow .when{font-size:13px}
.td-set{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.td-set select{min-height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);color:var(--fg);padding:0 8px;font:600 14px var(--f-body)}.td-set label{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--fg-2)}
.cg-btn.sm{min-height:34px;padding:0 10px;font-size:12.5px}.cg-btn.sm svg{width:14px;height:14px}
.pg-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}.pg-bar .cg-tag,.ct-acts .cg-tag{white-space:normal;height:auto;min-height:24px;padding:3px 10px;line-height:1.35}
.ct-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.wday li .wi{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.wday li .wi img{width:22px;height:22px;border-radius:5px}.wday li .bell{width:26px;height:26px}.wday li .bell svg{width:12px;height:12px}
.wday.today{border-color:var(--accent)}
/* lọc ghim bản đồ */
.mkey button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--card-2);color:var(--fg-2);border-radius:999px;padding:3px 10px;font:600 12.5px var(--f-body);cursor:pointer}
.mkey button[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.mkey .mq{flex:1 1 140px;min-height:32px;border-radius:999px;border:1px solid var(--line-2);background:var(--card-2);color:var(--fg);padding:0 12px;font:600 13px var(--f-body)}
.mh-g .t-g,.mh-n .t-n,.mh-b .t-b,.mq-no{display:none!important}
/* ---------- cẩm nang ---------- */
.cn-tabs{margin:0 0 16px}
.cn-sec{margin:0 0 16px}.cn-sec h2{display:flex;align-items:center;gap:8px;font-size:18px;margin:0 0 8px}.cn-sec h2 svg{width:18px;height:18px;color:var(--primary-2)}
.cn-steps{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;counter-reset:st}
.cn-steps li label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);cursor:pointer}
.cn-steps li label > span{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.cn-steps li small{color:var(--fg-2);font-size:13.5px;line-height:1.5}.cn-steps li.done{opacity:.55}.cn-steps li.done b{text-decoration:line-through}
.cn-q{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--fg);text-align:left;cursor:pointer;font:inherit}.cn-q svg{width:22px;height:22px;color:var(--primary-2)}.cn-q:hover{border-color:var(--primary-2)}
.pets{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin:0 0 16px}
.pet{display:flex;flex-direction:column;gap:10px;color:var(--fg);text-decoration:none;padding:14px}.pet:hover{border-color:var(--primary-2)}
.pet header{display:flex;gap:12px;align-items:center}.pet header img,.pet header .ph{width:48px;height:48px;border-radius:10px;background:radial-gradient(circle at 50% 40%,#2a2d3a,#0b0c11);flex:none}.pet header div{display:flex;flex-direction:column}
.pet .apt{display:grid;gap:4px}.pet .apt div{display:grid;grid-template-columns:72px 1fr 44px;gap:8px;align-items:center;font-size:12.5px;color:var(--fg-2)}.pet .apt i{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--primary-2))}.pet .apt b{text-align:right;font-size:12px}
.pet .sk{display:flex;flex-wrap:wrap;gap:5px}.pet .sk .cg-tag{height:22px;font-size:11.5px}
.cn-cmp{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.cn-cmp select{max-width:100%;min-width:0}.cn-cmp select,.cn-form select,.cn-form input{min-height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);color:var(--fg);padding:0 8px;font:600 14px var(--f-body)}
.cn-cmp input{width:80px;min-height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);color:var(--fg);padding:0 8px;font:600 14px var(--f-mono)}
.cn-out{margin-top:12px}.cn-out .up{color:var(--accent)}.cn-out .down{color:var(--rose)}
.cn-form{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:12px 0}.cn-form input[type=number]{width:96px}
.cn-chains{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));margin-top:10px}
.cn-chain{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}.cn-chain p{margin:0;color:var(--fg-2);font-size:14px;line-height:1.55}.cn-chain > div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.cn-chain .cg-tag.primary{align-self:flex-start}
.cn-tiers{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin:0 0 16px}.cn-tier h2{margin:2px 0 8px}.cn-tier ul{margin:0 0 10px;padding-left:18px;display:grid;gap:6px;color:var(--fg-2);line-height:1.55}
.cn-list{margin:6px 0 12px;padding-left:18px;display:grid;gap:8px;color:var(--fg-2);line-height:1.6}
.ct-apt{display:grid;gap:8px}.ct-apt div{display:grid;grid-template-columns:80px 1fr auto;gap:10px;align-items:center;font-size:13.5px}.ct-apt i{position:relative;height:10px;border-radius:99px;background:var(--card-2);overflow:hidden}.ct-apt i b,.ct-apt i em{position:absolute;left:0;top:0;bottom:0;border-radius:99px}.ct-apt i em{background:color-mix(in srgb,var(--gold) 45%,transparent)}.ct-apt i b{background:linear-gradient(90deg,var(--accent),var(--primary-2));z-index:1}
.bglist{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));margin:0 0 28px}.bg-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px}.bg-card header{display:flex;gap:12px;align-items:center}.bg-card .pt{width:56px;height:56px;flex:none;border-radius:12px;background:radial-gradient(circle at 50% 40%,#2a2d3a,#0b0c11);object-fit:contain}.bg-card h3{margin:0;font-size:16.5px;line-height:1.3}.bg-card .sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px;font-size:13.5px;color:var(--fg-2)}.bg-card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--fg-2)}.bg-card .meta>span{display:inline-flex;gap:6px;align-items:center}.bg-card .meta svg{width:15px;height:15px;flex:none;color:var(--primary-2)}.bg-card .x,.bg-card .nt{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg-2)}.bg-card .nt{padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--green) 8%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}.bg-card .dr{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.bg-card .dr li{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;color:var(--fg-2);line-height:1.3}.bg-card .dr li img,.bg-card .dr li .ph{width:22px;height:22px;border-radius:6px;flex:none}.bg-card .dr li .ph{background:var(--bg-2)}.bg-card .dr li.noi{padding-left:10px}.bg-card .dr2{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}.bg-card .dr2 b{color:var(--fg-2);font-weight:600}.bg-card .dr li.hot{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent);font-weight:600}
#tbTeam ul.vet{margin:6px 0 0;padding-left:18px;line-height:1.55}#tbTeam ul.vet li{margin:5px 0}
#tbShop .it{display:inline-flex;align-items:center;gap:10px}
.build .cg-stat{align-items:flex-start}
.build .cg-stat span{flex:none;width:150px;color:var(--muted)}
.build .cg-stat b.tx{font-family:var(--f-body);color:var(--fg);font-weight:600;text-align:left;flex:1}
.build .sec{font:800 11.5px/1.4 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
ol.xf{margin:0;padding-left:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:4px 16px;font-size:14px}
ol.xf li span{color:var(--muted);margin-left:6px;font-size:13px}
ol.xf li.k b{color:var(--game)}
ul.tplan{display:grid;gap:10px}
ul.tplan li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline}
ul.tplan li .who{font-size:12.5px;color:var(--primary-2);font-weight:700}
ul.tplan li p{grid-column:1/-1;margin:0;color:var(--fg-2);font-size:14px}
@media (max-width:767px){.build .cg-stat{flex-direction:column;gap:2px}.build .cg-stat span{width:auto}}
.gm.l4 img.si{border-color:var(--gold)}
.gm .h4{font-style:normal;font:800 10.5px var(--f-body);color:var(--on-accent);background:var(--gold);border-radius:4px;padding:0 4px;margin-right:2px}
#tbShop tr.knb .mono{color:var(--gold)}
@media (max-width:767px){ol.steps li{flex-direction:column;gap:2px}}

@media (max-width:767px){
  .controls .cg-seg.fill{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
  .controls .cg-seg.fill button{padding:8px 2px;min-width:0;font-size:13.5px;overflow:hidden}
  .controls .cg-seg.fill button .sub{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cg-main,.cg-page{min-width:0}
  .tl::before{left:58px}
  .step{grid-template-columns:44px 14px minmax(0,1fr);gap:8px}
  .step .pin{margin-left:0}
  .step .time{font-size:13px}
  .bhead .ic{width:34px;height:34px}
  .livebar .clock{flex-direction:row;align-items:baseline;gap:12px;padding:12px 16px}
  .livebar .clock .d{margin:0}
  .band{min-height:160px;padding:18px}
}
.band .pg-bar .cg-tag{color:#DDD8EC;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}.band .pg-bar .cg-tag svg{color:#14F0AF}