:root{
  --red:#e31e24; --red-d:#b5141a; --gold:#ffd400; --gold-d:#e0b400; --blue:#2f5daa; --blue-d:#1d3f7d;
  --ink:#14213d; --muted:#5b6478; --line:#dfe4ee; --bg:#f4f6fb; --card:#fff;
  --ok:#14804a; --warn:#b26a00; --err:#c0262d;
  --stage:#081329; --stage2:#0f2148;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Be Vietnam Pro",system-ui,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.45}
a{color:var(--blue)}
button,input,select,textarea{font:inherit}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px;background:#fff;border-bottom:4px solid var(--red);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{height:52px;width:auto}
.brand b{display:block;font-size:18px;letter-spacing:.2px;color:var(--blue-d)}
.brand small{display:block;color:var(--muted);font-size:12px}
nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
nav a,nav button{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--ink);background:none;border:1px solid transparent;cursor:pointer}
nav a:hover,nav button:hover{background:var(--bg)}
main{max-width:1280px;margin:0 auto;padding:20px 16px 60px}
h1{font-size:26px;margin:4px 0 14px;color:var(--blue-d)}
h2{font-size:19px;margin:22px 0 10px}
h3{font-size:16px;margin:14px 0 8px}
.muted{color:var(--muted)}
.small{font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(20,33,61,.04)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
.btn:hover{border-color:#b9c2d6}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-d)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold-d);color:#2a2200}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
label{font-size:13px;color:var(--muted);display:block;margin-bottom:3px}
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;padding:8px 10px;border:1px solid #c9d0de;border-radius:8px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:3px solid rgba(47,93,170,.25);border-color:var(--blue)}
.field{margin-bottom:10px;min-width:160px;flex:1}
table{border-collapse:collapse;width:100%}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:#f8f9fc;position:sticky;top:0}
.tablewrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:10px;background:#fff}
td input{padding:5px 7px;font-size:14px}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;background:#e9edf5;color:var(--muted);white-space:nowrap}
.b-DRAFT{background:#eef1f6;color:#4b5568}
.b-CONFIRMED{background:#e3edff;color:var(--blue-d)}
.b-DRAWING{background:#fff3c4;color:#7a5a00}
.b-DONE{background:#dff5e8;color:var(--ok)}
.b-LOCKED{background:#1d3f7d;color:#fff}
.b-SUPERSEDED{background:#fde7e8;color:var(--err)}
.b-ACTIVE{background:#dff5e8;color:var(--ok)}
.problem.error{color:var(--err)} .problem.warn{color:var(--warn)}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:#14213d;color:#fff;padding:10px 16px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.2);max-width:90vw;pointer-events:auto}
.toast.err{background:var(--err)}
.hero{display:flex;gap:18px;align-items:center;background:linear-gradient(120deg,var(--blue-d),var(--blue));color:#fff;border-radius:16px;padding:22px;margin-bottom:18px;border-bottom:5px solid var(--gold)}
.hero img{height:84px;background:#fff;border-radius:12px;padding:4px}
.hero h1{color:#fff;margin:0}
.ev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.ev{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff;border-left:5px solid var(--blue)}
.ev:hover{box-shadow:0 4px 14px rgba(20,33,61,.08)}
.ev .code{font-weight:800;color:var(--red)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;word-break:break-all}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
dialog{border:none;border-radius:14px;padding:20px;max-width:560px;width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(8,19,41,.55)}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:12px 0}
.tabs button{border:none;background:none;padding:9px 14px;cursor:pointer;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs button.on{color:var(--blue-d);border-color:var(--red)}

/* ---------- sơ đồ nhánh đấu ---------- */
.bracket{display:flex;gap:0;overflow:auto;padding:8px 0}
.bcol{display:flex;flex-direction:column;justify-content:space-around;min-width:220px;padding:0 10px;position:relative}
.bcol h4{position:sticky;top:0;margin:0 0 6px;font-size:12px;text-transform:uppercase;color:var(--muted);text-align:center;letter-spacing:.5px}
.bmatch{display:flex;flex-direction:column;justify-content:center;flex:1;position:relative}
.bslot{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 8px;margin:2px 0;min-height:34px;font-size:13.5px}
.bslot .no{min-width:26px;height:22px;border-radius:6px;background:var(--blue);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center}
.bslot .nm{font-weight:700;line-height:1.15}
.bslot .un{font-size:11.5px;color:var(--muted);line-height:1.1}
.bslot.bye{background:repeating-linear-gradient(135deg,#f6f7fa,#f6f7fa 6px,#eef0f5 6px,#eef0f5 12px);color:var(--muted);font-style:italic}
.bslot.bye .no{background:#b9c2d6}
.bslot.empty .nm{color:#b0b7c6;font-weight:500}
.bslot.win{border-style:dashed;color:var(--muted);font-size:12.5px}
.bmatch .mcode{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:800;color:var(--red);background:#fff;border:1px solid #f0c9cb;border-radius:4px;padding:0 3px;z-index:2}
.bslot.new{animation:landing 1.2s ease-out}
@keyframes landing{0%{background:var(--gold);transform:scale(1.06)}100%{background:#fff;transform:none}}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.group{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.group h3{margin:0;padding:10px 14px;background:var(--blue);color:#fff;font-size:18px;display:flex;justify-content:space-between}
.gslot{display:flex;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);min-height:52px}
.gslot .pos{font-weight:900;color:var(--red);min-width:34px;font-size:17px}
.gslot .nm{font-weight:700}
.gslot .un{font-size:12px;color:var(--muted)}
.gslot.new{animation:landing 1.2s ease-out}

/* ---------- màn hình trình chiếu ---------- */
body.stage-mode{background:var(--stage);color:#fff}
body.stage-mode .topbar{display:none}
body.stage-mode main{max-width:none;padding:0}
.stage{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(1200px 600px at 30% 40%,#16316b 0%,var(--stage) 70%);color:#fff;overflow:hidden}
.stage-head{display:flex;align-items:center;gap:18px;padding:16px 28px;border-bottom:3px solid var(--gold);background:linear-gradient(90deg,rgba(227,30,36,.95),rgba(181,20,26,.9) 35%,rgba(15,33,72,.0))}
.stage-head img{height:84px;background:#fff;border-radius:50%;padding:5px}
.stage-head .t1{font-size:15px;opacity:.9;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.stage-head .t2{font-size:30px;font-weight:900;line-height:1.1}
.stage-head .meta{margin-left:auto;text-align:right;font-size:13px;opacity:.85}
.stage-body{display:grid;grid-template-columns:minmax(546px,52%) 1fr;gap:24px;padding:22px 28px;min-height:0}
.reel-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative}
.drum{position:relative;width:min(728px,100%);aspect-ratio:1/1;max-height:78vh;display:grid;place-items:center}
.drum .ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,212,0,.5);box-shadow:0 0 60px rgba(255,212,0,.15) inset,0 0 40px rgba(47,93,170,.6)}
.drum .ring.r2{inset:7%;border-color:rgba(255,255,255,.18);border-style:dashed}
.drum.spin .ring.r2{animation:spin 2.2s linear infinite}
.drum.spin .ring{animation:pulse 1s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{box-shadow:0 0 90px rgba(255,212,0,.35) inset,0 0 70px rgba(47,93,170,.9)}}
.ball{position:absolute;width:57px;height:57px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:19px;color:#14213d;background:radial-gradient(circle at 32% 30%,#fff,#ffe866 35%,#e0b400 80%);box-shadow:0 4px 10px rgba(0,0,0,.4);transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.ball.red{background:radial-gradient(circle at 32% 30%,#fff,#ff7b7f 35%,#b5141a 85%);color:#fff}
.ball.blue{background:radial-gradient(circle at 32% 30%,#fff,#7aa6f0 35%,#1d3f7d 85%);color:#fff}
.card-reveal{position:relative;z-index:2;width:86%;min-height:46%;border-radius:22px;background:linear-gradient(160deg,#fff,#eef3ff);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 18px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 6px rgba(255,212,0,.85);transform:scale(.6) rotateX(70deg);opacity:0;transition:transform .7s cubic-bezier(.2,1.3,.4,1),opacity .4s}
.card-reveal.show{transform:none;opacity:1}
.card-reveal .lab{font-size:29px;font-weight:900;color:#fff;background:var(--red);padding:4px 18px;border-radius:99px;margin-bottom:12px;letter-spacing:.5px}
.card-reveal .nm{font-size:clamp(36px,4.2vw,68px);font-weight:900;line-height:1.1;color:var(--blue-d)}
.card-reveal .nm.reel{color:#7d879c;filter:blur(.6px)}
.card-reveal .un{font-size:clamp(21px,2vw,31px);margin-top:10px;color:var(--muted);font-weight:600}
.card-reveal .seedtag{margin-top:8px;font-size:20px;font-weight:800;color:var(--warn)}
.stage-status{font-size:18px;opacity:.9;text-align:center}
.stage-status b{color:var(--gold)}
.stage-board{background:rgba(255,255,255,.96);color:var(--ink);border-radius:16px;padding:14px;overflow:auto;max-height:calc(100vh - 220px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.stage-board .bslot{min-height:30px;font-size:13px}
.stage-board.big .bslot{min-height:40px;font-size:16px}
.stage-board .groups{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stage-ctrl{display:flex;gap:7px;align-items:center;padding:10px 28px;background:rgba(0,0,0,.35);flex-wrap:wrap;font-size:14px}
.stage-ctrl .btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.stage-ctrl .btn.gold{background:var(--gold);color:#221b00;border-color:var(--gold)}
.stage-ctrl .btn.red{background:var(--red);border-color:var(--red)}
.stage-ctrl .sep{flex:1}
.stage-ctrl label{color:#cdd6ea;display:inline-flex;gap:6px;align-items:center;margin:0}
.stage-ctrl input[type=range]{width:70px}
.commit{font-family:ui-monospace,Consolas,monospace;font-size:12px;opacity:.8;word-break:break-all;text-align:center;max-width:560px}
.stage.hidectrl .stage-ctrl{opacity:0;transition:opacity .4s} .stage.hidectrl .stage-ctrl:hover{opacity:1}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.reduced *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.drum .ring{animation:none!important}}

/* ---------- in ---------- */
.print-page{background:#fff;padding:10mm;max-width:none}
.print-head{display:flex;gap:14px;align-items:center;border-bottom:3px solid var(--red);padding-bottom:8px;margin-bottom:10px}
.print-head img{height:64px}
.print-head .t{font-weight:800;font-size:18px;color:var(--blue-d)}
.print-foot{margin-top:10px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:6px}
@media print{
  .no-print{display:none!important}
  body{background:#fff;font-size:12px}
  main{padding:0;max-width:none}
  .card{box-shadow:none;border:none;padding:0}
  .bracket{overflow:visible}
  .bcol{min-width:0;flex:1}
  .bslot{min-height:22px;padding:2px 5px;font-size:11px;break-inside:avoid}
  .bslot .un{font-size:9.5px}
  .group,.gslot{break-inside:avoid}
  th{position:static}
}
@page{size:A4 portrait;margin:10mm}
@media (max-width:760px){
  .stage-body{grid-template-columns:1fr} .drum{max-height:none}
  .stage-head .t2{font-size:20px}
  .stage-head img{height:48px}
  .hero{flex-direction:column;text-align:center}
}

.pairgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.pcard{border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:#f8f9fc}
.pcard .ph{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:2px}
.pcard .ph b{color:var(--red)}
.stage-board .pairgrid .bslot{font-size:16px;min-height:42px}
.stage-board .pairgrid .bslot .un{font-size:13px}

.logos{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.stage-head img.hkpd{border-radius:14px;padding:4px 8px;background:#fff}
.hero img.hkpd{padding:4px 6px}

/* dòng "HỘI KHỎE PHÙ ĐỔNG TỈNH PHÚ THỌ" — chữ lửa rực cháy */
.fire-title{position:relative;display:inline-block;font-weight:900;font-size:clamp(22px,3.2vw,40px);letter-spacing:1.5px;line-height:1.15;margin-bottom:6px;
  background:linear-gradient(0deg,#ff2a00 0%,#ff6a00 30%,#ffb300 55%,#fff27a 75%,#fffbe0 100%);background-size:100% 220%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:fireflow 1.6s ease-in-out infinite alternate, fireglow 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(255,120,0,.85)) drop-shadow(0 0 16px rgba(255,60,0,.6))}
.fire-title::after{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:0 -1px 3px #fff59d,0 -3px 7px #ffd000,0 -7px 12px #ff8c00,0 -11px 18px rgba(255,61,0,.75);
  animation:flicker 1.1s steps(1,end) infinite}
@keyframes fireflow{0%{background-position:0 0}100%{background-position:0 100%}}
@keyframes fireglow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,120,0,.85)) drop-shadow(0 0 16px rgba(255,60,0,.6))}
  50%{filter:drop-shadow(0 0 10px rgba(255,170,0,1)) drop-shadow(0 0 28px rgba(255,80,0,.85))}}
@keyframes flicker{0%{opacity:.95;transform:translateY(0) scaleY(1)}20%{opacity:.75;transform:translateY(-1px) scaleY(1.03)}
  40%{opacity:1;transform:translateY(0) scaleY(.99)}60%{opacity:.8;transform:translateY(-2px) scaleY(1.05)}80%{opacity:.92;transform:translateY(-1px) scaleY(1.01)}}
@media (prefers-reduced-motion:reduce){.fire-title,.fire-title::after{animation:none}}
.hero{overflow:hidden;padding-top:28px}

/* đường kẻ sơ đồ nhánh đấu */
.bracket{--bl:#8f9bb3;--bw:2px}
.bcol{padding:0 14px}
.bmatch{padding:3px 0}
.bmatch .bbox{position:relative;z-index:1;margin-right:28px}
.bcol:last-child .bmatch .bbox{margin-right:0}
.bmatch.lout::before{content:"";position:absolute;right:-14px;top:50%;width:42px;border-top:var(--bw) solid var(--bl)}
.bmatch.ltop::after{content:"";position:absolute;right:-14px;top:50%;height:50%;border-right:var(--bw) solid var(--bl)}
.bmatch.lbot::after{content:"";position:absolute;right:-14px;top:0;height:50%;border-right:var(--bw) solid var(--bl)}
.bmatch.lin .bbox{position:relative}
.bmatch.lin .bbox::before{content:"";position:absolute;left:-14px;top:50%;width:14px;border-top:var(--bw) solid var(--bl)}
.bmatch .bbox .bslot:first-child{margin-top:0}
.bmatch .bbox::after{content:"";position:absolute;right:-10px;top:25%;bottom:25%;width:10px;border:var(--bw) solid var(--bl);border-left:0;border-radius:0 4px 4px 0}
.bmatch .bbox:has(> :only-child)::after{display:none}
@media print{.bracket{--bl:#555;--bw:1.2px}}