/* k98m.info — "Phòng hát": karaoke room + song book. */
:root{
  --paper:#F3EFE6;--paper-2:#E8E2D3;--sheet:#FBF9F4;--ink:#15171F;--ink-2:#262937;--muted:#555A69;--line:#CFC6B2;
  --room:#0C1433;--room-2:#141E48;--room-3:#1E2A5C;--room-edge:#2B3669;--night:#070C22;
  --on-room:#ECEFF8;--on-room-2:#AEB6D2;
  --wipe:#6FB8FF;--wipe-hi:#93CBFF;--link:#1B4DB5;--code:#C22F2A;--vfd:#5CF0D2;--vfd-bg:#061114;--amber:#FFC247;--rec:#FF5A4E;
  --f-cap:"League Gothic","Arial Narrow",sans-serif;
  --f-lyr:"M PLUS Rounded 1c","Readex Pro",system-ui,sans-serif;
  --f-body:"Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4vw,40px);--maxw:1240px;--qh:60px;
  /* game runtime tokens */
  --font-body:var(--f-body);--font-head:var(--f-cap);--primary:#6FB8FF;--accent:#FFC247;--surface:#141E48;--text:#ECEFF8;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--qh) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--f-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--code)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:8px;top:-80px;z-index:100;padding:12px 16px;background:var(--vfd);color:var(--vfd-bg);font-weight:600;border-radius:8px;text-decoration:none}
.skip:focus{top:8px}

/* ---------- keys (remote-control rubber keys) ---------- */
.key{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:999px;font:600 16px/1.2 var(--f-body);text-decoration:none;text-align:center;transition:background .18s,box-shadow .18s,transform .12s,color .18s}
.key:active{transform:translateY(1px)}
.key-hot{background:var(--wipe);color:#08112E;box-shadow:inset 0 -3px 0 rgba(8,17,46,.28),0 0 0 1px rgba(255,255,255,.12),0 8px 22px -10px rgba(111,184,255,.7)}
.key-hot:hover{background:var(--wipe-hi);color:#08112E}
.key-ghost{color:var(--on-room);box-shadow:inset 0 0 0 1.5px rgba(236,239,248,.42)}
.key-ghost:hover{color:#fff;box-shadow:inset 0 0 0 1.5px var(--vfd)}

/* ---------- VFD song-code display (brand) ---------- */
.vfd{position:relative;display:inline-grid;align-content:center;gap:1px;padding:4px 10px 5px;min-height:46px;background:var(--vfd-bg);border-radius:7px;box-shadow:inset 0 0 0 1px rgba(92,240,210,.18),inset 0 0 18px rgba(92,240,210,.08),0 0 0 2px #232C55;overflow:hidden}
.vfd::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 2px,rgba(6,17,20,.5) 2px 3px),repeating-linear-gradient(0deg,transparent 0 2px,rgba(6,17,20,.35) 2px 3px);pointer-events:none}
.vfd-l{font:600 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(92,240,210,.62)}
.vfd-v{font:400 30px/1 var(--f-cap);letter-spacing:.07em;color:var(--vfd);text-shadow:0 0 10px rgba(92,240,210,.55)}
.vfd-sm{min-height:0;padding:6px 10px}
.vfd-sm .vfd-v{font-size:22px;letter-spacing:.05em}

/* ---------- header ---------- */
.hdr{position:relative;z-index:30}
.bar{background:var(--room);color:var(--on-room);border-bottom:1px solid rgba(255,255,255,.07)}
.bar-in{display:flex;align-items:center;gap:10px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--on-room);text-decoration:none;margin-right:auto;min-width:0}
.brand:hover{color:#fff}
.brand-t{display:grid;line-height:1.25;min-width:0}
.brand-d{font:600 16px/1.2 var(--f-body)}
.brand-s{font-size:13px;color:var(--on-room-2)}
.lsw{display:flex;gap:4px}
.lsw a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:12px;font:600 14px/1 var(--f-body);color:var(--on-room);text-decoration:none;box-shadow:inset 0 0 0 1px var(--room-edge)}
.lsw a:hover{color:var(--vfd);box-shadow:inset 0 0 0 1px var(--vfd)}
.lsw a[aria-current]{background:var(--vfd-bg);color:var(--vfd);box-shadow:inset 0 0 0 1px rgba(92,240,210,.5)}
.menu{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid #34407A;background:var(--room-3);color:var(--on-room);font:600 15px/1 var(--f-body);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.menu-k{position:relative;display:grid;gap:4px;width:18px}
.menu-k i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.hdr.is-open .menu-k i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.is-open .menu-k i:nth-child(2){opacity:0}
.hdr.is-open .menu-k i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hdr-cta{display:none}
.book{background:var(--paper);border-bottom:3px double var(--ink)}
.book ol{list-style:none;margin:0;padding:0}
.book a{text-decoration:none;color:var(--ink)}
.nc{font:400 28px/1 var(--f-cap);color:var(--code);font-variant-numeric:tabular-nums}
.nl{font:600 16px/1.3 var(--f-body)}
@media (max-width:979.98px){
  .book{display:none;position:absolute;left:0;right:0;top:100%;box-shadow:0 24px 40px -18px rgba(7,12,34,.55);max-height:calc(100vh - 68px);overflow:auto}
  .hdr.is-open .book{display:block}
  .book .wrap{padding-block:8px 20px}
  .book li a{display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px dotted var(--line)}
  .book li a[aria-current] .nl{box-shadow:inset 0 -3px 0 var(--wipe)}
  .book-play{width:100%;margin-top:18px}
}
@media (max-width:419.98px){.brand-t{display:none}}
@media (min-width:980px){
  .menu{display:none}
  .hdr-cta{display:inline-flex;min-height:44px;padding:8px 18px;font-size:15px}
  .book .wrap{display:flex;align-items:center;gap:20px}
  .book ol{display:flex;flex:1;min-width:0}
  .book li{display:flex}
  .book li+li{border-left:1px dotted var(--line)}
  .book li a{display:flex;align-items:baseline;gap:10px;padding:14px 20px 12px;position:relative}
  .book li:first-child a{padding-left:0}
  .book li a::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:3px;background:var(--wipe);transform:scaleX(0);transform-origin:left;transition:transform .35s}
  .book li:first-child a::after{left:0}
  .book li a:hover::after,.book li a[aria-current]::after{transform:scaleX(1)}
  .book-play{display:none}
}

/* ---------- room (lyric screen) ---------- */
.room{position:relative;background:var(--room);color:var(--on-room);isolation:isolate;overflow:clip}
.room::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 60% at 88% 0%,rgba(111,184,255,.17),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(92,240,210,.09),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px)}
.room-home{padding:36px 0 56px}
.room-page{padding:26px 0 46px}
.room-grid{display:grid;gap:36px}
.badge{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 14px;border-radius:999px;font:600 14px/1.3 var(--f-body);color:var(--vfd);box-shadow:inset 0 0 0 1px rgba(92,240,210,.38)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 8px var(--rec)}
.lyric{font:800 clamp(32px,5vw,58px)/1.2 var(--f-lyr);letter-spacing:-.01em;margin:18px 0 18px;color:#fff;max-width:20ch;filter:drop-shadow(0 2px 0 #040819)}
.room-page .lyric{font-size:clamp(30px,4.2vw,50px);max-width:24ch;margin-top:10px}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lyric span{background-image:linear-gradient(90deg,var(--wipe) 0 50%,#fff 50% 100%);background-size:200% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  @media (prefers-reduced-motion:no-preference){.lyric span{animation:wipe 3.2s cubic-bezier(.45,.05,.3,1) .35s both}}
}
@keyframes wipe{from{background-position:100% 0}to{background-position:0 0}}
.lead{max-width:62ch;color:var(--on-room-2)}
.lead p{margin:0 0 12px;font-size:18px;line-height:1.65}
.lead a{color:var(--vfd)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 20px}
.subs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.subs li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--on-room)}
.subs li::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--vfd)}
.remote{padding:18px 18px 8px;border-radius:20px;background:linear-gradient(180deg,#0E1638,#0A1029);box-shadow:inset 0 0 0 1px #26305C,0 18px 30px -22px #000}
.remote-t{margin:0 0 8px;font:400 24px/1.1 var(--f-cap);letter-spacing:.04em;text-transform:uppercase;color:var(--on-room)}
.remote ol{list-style:none;margin:0;padding:0}
.remote li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid #1C2550;font-size:16px;line-height:1.5;color:var(--on-room-2)}
.remote li:first-child{border-top:0}
.rk{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--room-3);font:400 24px/1 var(--f-cap);color:var(--vfd);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4),inset 0 0 0 1px #34407A}

/* TV holding the game */
.tv{min-width:0;padding:10px;border-radius:24px;background:linear-gradient(180deg,#0A0F27,#04071A);box-shadow:0 0 0 1px var(--room-edge),0 34px 60px -28px #000,0 0 90px -20px rgba(111,184,255,.3)}
.tv-cap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 8px 12px;font:600 15px/1.3 var(--f-body);color:var(--on-room)}
.tv-note{margin-left:auto;font-weight:400;font-size:14px;color:var(--on-room-2)}
.rec{width:10px;height:10px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec)}
@media (prefers-reduced-motion:no-preference){.rec{animation:rec 1.6s ease-in-out infinite}}
@keyframes rec{50%{opacity:.35}}
.tv-glass{border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px #1E2750}
.tv-foot{display:flex;justify-content:center;gap:8px;padding-top:10px}
.tv-foot i{width:34px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,#1E2A5C 0 3px,transparent 3px 5px)}
@media (max-width:519.98px){
  .tv{margin-inline:calc(var(--gut) * -1);border-radius:0;padding:8px 0 10px;box-shadow:0 0 0 1px var(--room-edge)}
  .tv-cap{padding-inline:var(--gut)}
  .tv-glass{border-radius:0}
}
@media (min-width:1100px){
  .room-home{padding:52px 0 72px}
  .room-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"copy tv" "remote tv";grid-template-rows:auto 1fr;gap:36px 52px;align-items:start}
  .room-copy{grid-area:copy}.tv{grid-area:tv}.remote{grid-area:remote}
}

/* breadcrumbs */
.bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:15px}
.bc li{display:flex;align-items:center;gap:8px}
.bc li+li::before{content:"";width:6px;height:6px;border-top:2px solid var(--on-room-2);border-right:2px solid var(--on-room-2);transform:rotate(45deg)}
.bc a{display:inline-flex;align-items:center;min-height:44px;color:var(--vfd)}
.bc span{color:var(--on-room-2)}

/* ---------- queue strip (contents) ---------- */
.queue{position:sticky;top:0;z-index:20;background:rgba(12,20,51,.97);border-bottom:1px solid var(--room-edge);box-shadow:0 10px 24px -18px rgba(7,12,34,.8)}
@supports (backdrop-filter:blur(8px)){.queue{background:rgba(12,20,51,.88);backdrop-filter:blur(10px)}}
.queue-in{display:flex;align-items:center;gap:14px;min-height:var(--qh)}
.queue-t{flex:none;font:400 20px/1 var(--f-cap);letter-spacing:.05em;text-transform:uppercase;color:var(--vfd)}
.queue ol{list-style:none;margin:0;padding:8px 0;display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent)}
.queue ol::-webkit-scrollbar{display:none}
.queue li{flex:none;scroll-snap-align:start}
.queue a{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:var(--room-2);color:var(--on-room-2);font:500 15px/1.2 var(--f-body);white-space:nowrap;text-decoration:none;overflow:hidden;isolation:isolate}
.queue a:hover{color:#fff}
.qc{font:400 20px/1 var(--f-cap);color:var(--on-room)}
.qf{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(111,184,255,.2),rgba(111,184,255,.38));transform:scaleX(var(--p,0));transform-origin:left;transition:transform .15s linear}
.queue a[aria-current]{color:#fff;box-shadow:inset 0 0 0 1.5px var(--wipe)}
.queue a[aria-current] .qc{color:var(--vfd)}
@media (max-width:639.98px){.queue-t{display:none}}

/* ---------- song book article ---------- */
.sheet{padding:44px 0 64px;background:var(--paper)}
.content{max-width:900px;margin-inline:auto}
.intro-rest,.song-plain{margin-bottom:8px}
.song{padding:34px 0 30px;border-top:1px solid var(--ink)}
.song:first-child{border-top:0;padding-top:4px}
.intro-rest+.song{border-top:1px solid var(--ink)}
.code{display:block;font:400 40px/.9 var(--f-cap);color:var(--code);font-variant-numeric:tabular-nums;margin-bottom:10px}
.content h2{font:800 clamp(24px,2.7vw,31px)/1.3 var(--f-lyr);color:var(--ink);margin:0 0 16px;letter-spacing:-.005em}
.content h3{display:flex;align-items:baseline;gap:10px;font:600 20px/1.4 var(--f-body);color:var(--ink);margin:28px 0 8px}
.content h3::before{content:"";flex:none;width:9px;height:9px;background:var(--code);border-radius:2px;transform:translateY(-2px)}
.content p{margin:0 0 16px}
.content p,.content li{color:var(--ink-2)}
.content ul,.content ol{padding-left:1.4em;margin:0 0 18px}
.content li{margin:0 0 8px;padding-left:4px}
.content ul li::marker{color:var(--code)}
.content ol li::marker{font:400 21px var(--f-cap);color:var(--code)}
.content strong{color:var(--ink)}
@media (min-width:900px){
  .song{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 20px}
  .code{font-size:68px;margin:0;padding-top:2px}
  .intro-rest,.song-plain{padding-left:124px}
  .song-b{max-width:720px}
}
/* song-book tables */
.table-wrap{overflow-x:auto;margin:24px 0 22px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--sheet)}
.content table{width:100%;min-width:520px;border-collapse:collapse;font-size:16px;line-height:1.5}
.content th{text-align:left;vertical-align:bottom;padding:12px 14px;font:400 20px/1.15 var(--f-cap);letter-spacing:.03em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--ink)}
.content td{padding:12px 14px;vertical-align:top;border-bottom:1px dotted var(--line);color:var(--ink-2)}
.content tr:last-child td{border-bottom:0}
.content tbody tr:nth-child(even){background:rgba(232,226,211,.55)}
.content td:first-child{font-weight:600;color:var(--ink)}

/* FAQ = request slips */
.slips{display:grid;gap:10px}
.slips details{background:var(--sheet);border-radius:4px 16px 16px 4px;box-shadow:inset 5px 0 0 var(--code),0 0 0 1px var(--line)}
.slips summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:12px 14px 12px 22px;cursor:pointer;list-style:none;font:600 17px/1.45 var(--f-body);color:var(--ink)}
.slips summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--room);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);transition:transform .25s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--vfd);border-radius:2px}
.pm::after{transform:rotate(90deg)}
.slips details[open] .pm{transform:rotate(45deg)}
.slips .a{padding:0 20px 8px 22px}
.slips summary:hover .q{color:var(--link)}

/* CTA request card */
.req{margin-top:40px;padding:22px;border-radius:22px;background:var(--room);color:var(--on-room);display:grid;gap:18px;box-shadow:0 22px 40px -28px rgba(7,12,34,.9);container-type:inline-size}
.req-in{display:grid;gap:12px;justify-items:start}
.req p{margin:0;color:var(--on-room);font-size:17px}
@media (min-width:900px){.req{margin-left:124px}}
@container (min-width:620px){.req-in{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}}

/* ---------- related = song-book catalogue ---------- */
.cat{padding:52px 0 60px;background:var(--paper-2);border-top:3px double var(--ink)}
.cat-head{display:flex;align-items:center;gap:18px;margin-bottom:10px}
.cat-head h2{margin:0;font:800 clamp(24px,2.6vw,30px)/1.25 var(--f-lyr);color:var(--ink)}
.cat-rule{flex:1;height:10px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 7px);opacity:.3}
.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:0 36px}
.cat-list li{border-bottom:1px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:2px 14px;padding:18px 0 18px;color:var(--ink);text-decoration:none;background:linear-gradient(90deg,rgba(111,184,255,.28),rgba(111,184,255,.28)) no-repeat 0 0/0 100%;transition:background-size .45s}
.cat-list a:hover{background-size:100% 100%;color:var(--ink)}
.cat-c{grid-row:span 2;font:400 44px/1 var(--f-cap);color:var(--code)}
.cat-t{font:400 27px/1.08 var(--f-cap);letter-spacing:.02em;text-transform:uppercase;padding-top:3px}
.cat-d{font-size:16px;line-height:1.5;color:var(--muted)}

/* ---------- footer ---------- */
.ftr{background:var(--night);color:var(--on-room-2)}
.eq{display:flex;align-items:flex-end;gap:3px;height:64px;padding:0 var(--gut);background:var(--room);overflow:hidden}
.eq i{flex:1;height:var(--h);min-width:0;border-radius:2px 2px 0 0;background:linear-gradient(0deg,var(--vfd) 0 55%,var(--wipe) 55% 86%,var(--rec) 86%);opacity:.75;-webkit-mask:repeating-linear-gradient(0deg,#000 0 4px,transparent 4px 6px);mask:repeating-linear-gradient(0deg,#000 0 4px,transparent 4px 6px);transform-origin:bottom}
@media (prefers-reduced-motion:no-preference){.eq i{animation:eq 1.4s ease-in-out var(--d) infinite alternate}}
@keyframes eq{from{transform:scaleY(.62)}to{transform:scaleY(1)}}
.ftr .wrap{padding-top:40px}
.ftr-grid{display:grid;gap:30px}
.ftr .brand{margin:0 0 16px}
.disc{margin:0;max-width:52ch;font-size:16px;line-height:1.65}
.ftr-col h2{margin:0 0 8px;font:400 22px/1.1 var(--f-cap);letter-spacing:.05em;text-transform:uppercase;color:var(--on-room)}
.ftr-col ul{list-style:none;margin:0;padding:0}
.ftr-col a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-room);text-decoration:none;font-size:16px}
.ftr-col a:hover{color:var(--vfd);text-decoration:underline}
.ftr-bot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:34px;padding:20px 0 30px;border-top:1px solid #1D2650;font-size:15px}
.ftr-bot .lsw{margin-left:auto}
.age{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font:400 22px/1 var(--f-cap);color:#FF8A80;box-shadow:inset 0 0 0 2px var(--rec)}
@media (min-width:820px){.ftr-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:48px}}

/* 404 */
.nf{min-height:60vh;padding:56px 0}
.nf-code{margin:0;font:400 120px/1 var(--f-cap);color:var(--vfd);text-shadow:0 0 18px rgba(92,240,210,.4)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* inner hero: speaker cone beside the lyric */
.spk{display:none}
@media (min-width:1100px){
  .room-pg{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:60px;align-items:center}
  .spk{display:block;width:280px;height:280px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){.spk-r{animation:thump 1.8s ease-in-out infinite;transform-origin:100px 100px}}
@keyframes thump{50%{transform:scale(1.05)}}