/* ============================================================
   HASTEC - BAN TO CHUC THI
   Token màu lấy từ logo: xanh hoàng gia + vàng cam giải thưởng
   ============================================================ */
:root{
  --navy-950:#060f2b; --navy-900:#0a1a44; --navy-800:#0d2258;
  --panel:rgba(13,32,84,.78); --panel-solid:#0e2258;
  --line:rgba(110,168,255,.22); --line-strong:rgba(110,168,255,.45);
  --blue:#2b7bff; --blue-deep:#1a5ae0; --blue-soft:#7db0ff;
  --gold:#ffb300; --orange:#ff8a00; --gold-soft:#ffd66e;
  --ink:#eef4ff; --muted:#9db3e0; --muted-2:#7288b8;
  --ok:#2ee6a8; --danger:#ff5470; --warn:#ffc400;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --shadow:0 18px 50px rgba(3,10,32,.55);
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:var(--navy-950); color:var(--ink); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Nền sân khấu: quầng sáng + mạch điện tử mờ (họa tiết từ thế giới của logo) */
.stage-bg{position:fixed; inset:0; z-index:-2; background:
  radial-gradient(1100px 700px at 50% -10%, rgba(43,123,255,.32), transparent 60%),
  radial-gradient(900px 600px at 110% 100%, rgba(255,138,0,.14), transparent 55%),
  radial-gradient(800px 550px at -10% 90%, rgba(43,123,255,.16), transparent 55%),
  var(--navy-950);}
.stage-bg::after{content:''; position:absolute; inset:0; opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%233d6ecf' stroke-opacity='.12'%3E%3Cpath d='M10 30h40v40M130 110H90V70M70 10v30M70 130v-30'/%3E%3C/g%3E%3Cg fill='%234d7fe0' fill-opacity='.16'%3E%3Ccircle cx='10' cy='30' r='2.5'/%3E%3Ccircle cx='50' cy='70' r='2.5'/%3E%3Ccircle cx='130' cy='110' r='2.5'/%3E%3Ccircle cx='90' cy='70' r='2.5'/%3E%3Ccircle cx='70' cy='10' r='2.5'/%3E%3Ccircle cx='70' cy='130' r='2.5'/%3E%3C/g%3E%3C/svg%3E");}
.custom-bg{position:fixed; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:.35}

h1,h2,h3{line-height:1.2}
button{font-family:inherit; cursor:pointer; border:0; color:inherit; background:none}
input,select,textarea{font-family:inherit; font-size:1rem; color:var(--ink);
  background:rgba(6,15,43,.65); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:.72rem .9rem; width:100%; outline:none; transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(43,123,255,.25)}
input::placeholder{color:var(--muted-2)}
select option{background:var(--navy-900); color:var(--ink)}
label{display:block; font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 .35rem}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}

/* ---------- Nút ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:800; letter-spacing:.02em; border-radius:var(--r-md);
  padding:.78rem 1.35rem; transition:transform .12s, box-shadow .15s, filter .15s; user-select:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(180deg,var(--blue),var(--blue-deep)); color:#fff;
  box-shadow:0 8px 22px rgba(43,123,255,.4), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--orange)); color:#3a2000;
  box-shadow:0 8px 24px rgba(255,150,0,.42), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{border:1.5px solid var(--line-strong); color:var(--blue-soft); background:rgba(43,123,255,.08)}
.btn-ghost:hover{background:rgba(43,123,255,.16)}
.btn-danger{background:rgba(255,84,112,.14); border:1.5px solid rgba(255,84,112,.5); color:#ff8ba0}
.btn-danger:hover{background:rgba(255,84,112,.24)}
.btn-lg{font-size:1.15rem; padding:1rem 1.8rem; border-radius:18px}
.btn-sm{font-size:.85rem; padding:.45rem .8rem; border-radius:9px}
.btn[disabled]{opacity:.55; cursor:not-allowed; filter:grayscale(.3)}

/* ---------- Khung chung ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); backdrop-filter:blur(10px); padding:1.4rem}
.chip{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700;
  padding:.3rem .7rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--blue-soft)}
.chip.ok{color:var(--ok); border-color:rgba(46,230,168,.5); background:rgba(46,230,168,.08)}
.chip.warn{color:var(--warn); border-color:rgba(255,196,0,.5); background:rgba(255,196,0,.08)}
.chip.off{color:var(--danger); border-color:rgba(255,84,112,.5); background:rgba(255,84,112,.08)}
.muted{color:var(--muted)} .small{font-size:.85rem}
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.6rem}
.row{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center}
.grow{flex:1}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:720px){.grid2{grid-template-columns:1fr}}

/* ============================================================
   ĐĂNG NHẬP
============================================================ */
.login-wrap{min-height:100dvh; display:grid; place-items:center; padding:1.2rem}
.login-card{width:min(460px,100%); text-align:center; padding:2rem 1.8rem}
.login-logo{width:108px; height:108px; margin:0 auto .6rem; filter:drop-shadow(0 10px 30px rgba(43,123,255,.55))}
.brand-title{font-size:clamp(2.4rem,7vw,3.1rem); font-weight:900; letter-spacing:.05em;
  background:linear-gradient(180deg,#fff 30%, #bcd4ff 70%); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 3px 0 rgba(8,20,60,.6)}
.brand-sub{font-weight:800; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  font-size:.86rem; margin-top:.1rem}
.role-picker{display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin:1.3rem 0 1rem}
.role-btn{border:1.5px solid var(--line); border-radius:var(--r-md); padding:.72rem .5rem;
  font-weight:800; font-size:.92rem; color:var(--muted); background:rgba(6,15,43,.5);
  display:flex; align-items:center; justify-content:center; gap:.45rem; transition:all .15s}
.role-btn .ico{font-size:1.15rem}
.role-btn:hover{border-color:var(--line-strong); color:var(--ink)}
.role-btn.active{background:linear-gradient(180deg,rgba(43,123,255,.28),rgba(43,123,255,.12));
  border-color:var(--blue); color:#fff; box-shadow:0 0 0 3px rgba(43,123,255,.2), 0 8px 20px rgba(43,123,255,.25)}
.login-form{display:grid; gap:.9rem; text-align:left}
.pw-box{position:relative}
.pw-box input{padding-right:3rem}
.pw-eye{position:absolute; right:.4rem; top:50%; transform:translateY(-50%); font-size:1.15rem; padding:.4rem; color:var(--muted)}
.login-note{margin-top:1.1rem; font-size:.82rem; color:var(--muted-2)}

/* ============================================================
   THANH TRÊN + KHUNG DASHBOARD
============================================================ */
.topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.8rem;
  padding:.6rem 1rem; background:rgba(7,16,45,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topbar img{width:42px; height:42px}
.topbar .tt{font-weight:900; letter-spacing:.06em; font-size:1.15rem}
.topbar .tt small{display:block; font-size:.62rem; letter-spacing:.28em; color:var(--gold); font-weight:800}
.role-badge{font-size:.78rem; font-weight:800; padding:.28rem .7rem; border-radius:999px;
  background:linear-gradient(180deg,var(--gold),var(--orange)); color:#3a2000}
.topbar .sp{flex:1}
.page{max-width:1180px; margin:0 auto; padding:1.4rem 1rem 4rem}
.page-title{font-size:1.5rem; font-weight:900; letter-spacing:.02em; margin-bottom:.2rem}
.page-desc{color:var(--muted); margin-bottom:1.2rem}

/* ============================================================
   BAN TỔ CHỨC - SÂN KHẤU BỐC THĂM (điểm nhấn của hệ thống)
============================================================ */
.btc-page{max-width:1000px; text-align:center}
.btc-count{display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.05rem;
  border:1.5px solid var(--line-strong); border-radius:999px; padding:.5rem 1.2rem; background:rgba(13,32,84,.6)}
.btc-count b{color:var(--gold); font-size:1.3rem}
.btc-invite{margin:.9rem auto 0; max-width:620px; color:var(--muted); font-size:1.02rem}

.draw-stage{position:relative; height:min(52vh,460px); margin:1.2rem auto .4rem;
  perspective:1200px; perspective-origin:50% 42%;}
.draw-ring{position:absolute; left:50%; top:58%; width:min(560px,86vw); aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(68deg); border-radius:50%;
  border:2px solid rgba(110,168,255,.35);
  box-shadow:0 0 60px rgba(43,123,255,.35) inset, 0 0 90px rgba(43,123,255,.25);
  background:radial-gradient(circle, rgba(43,123,255,.14) 30%, transparent 70%)}
.draw-ring::after{content:''; position:absolute; inset:14%; border-radius:50%; border:1.5px dashed rgba(255,179,0,.35)}
.card3d-space{position:absolute; inset:0; transform-style:preserve-3d}
.decard{position:absolute; left:50%; top:52%; width:150px; height:200px; margin:-100px 0 0 -75px;
  border-radius:16px; transform-style:preserve-3d; will-change:transform;
  background:linear-gradient(160deg,#1d3f95 0%, #10275f 55%, #0b1b46 100%);
  border:2px solid rgba(125,176,255,.65);
  box-shadow:0 16px 40px rgba(3,10,32,.6), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 34px rgba(43,123,255,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem}
.decard .lbl{font-size:.72rem; font-weight:800; letter-spacing:.22em; color:var(--blue-soft); text-transform:uppercase}
.decard .num{font-size:3.4rem; font-weight:900; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 24px rgba(125,176,255,.8)}
.decard::before{content:''; position:absolute; inset:8px; border-radius:11px; border:1.5px solid rgba(255,179,0,.4)}
.decard.win{background:linear-gradient(160deg,#ffc93c 0%, #ff9d00 60%, #e07800 100%); border-color:#ffe9a8}
.decard.win .lbl{color:#6b3a00}
.decard.win .num{color:#fff; text-shadow:0 3px 0 rgba(140,70,0,.55), 0 0 30px rgba(255,255,255,.9)}
.decard.dim{filter:brightness(.4) saturate(.5)}

.draw-btn{position:relative; margin-top:.4rem; font-size:1.3rem; letter-spacing:.06em;
  padding:1.15rem 2.6rem; border-radius:999px; overflow:hidden}
.draw-btn::after{content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translateX(-120%); animation:sheen 2.8s infinite}
@keyframes sheen{to{transform:translateX(120%)}}
.draw-countdown{font-size:1.1rem; font-weight:800; color:var(--gold); min-height:1.6rem; margin-top:.7rem; letter-spacing:.05em}

.result-banner{margin:1rem auto 0; max-width:560px; padding:1.4rem 1.2rem; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,179,0,.16), rgba(255,138,0,.08));
  border:1.5px solid rgba(255,179,0,.55); box-shadow:0 0 60px rgba(255,150,0,.25)}
.result-banner .rb-lbl{font-weight:800; letter-spacing:.24em; color:var(--gold); font-size:.85rem; text-transform:uppercase}
.result-banner .rb-num{font-size:clamp(2.6rem,8vw,4rem); font-weight:900; color:#fff;
  text-shadow:0 4px 0 rgba(120,60,0,.45), 0 0 40px rgba(255,200,80,.8); margin:.2rem 0}
.result-banner .rb-meta{color:var(--muted); font-size:.88rem}

/* ============================================================
   BAN GIÁM KHẢO - CHẤM THI (giao diện to, toàn màn hình)
============================================================ */
.bgk-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:1.2rem; align-items:start}
@media(max-width:900px){.bgk-grid{grid-template-columns:1fr}}
.mon-picker{display:flex; flex-wrap:wrap; gap:.6rem}
.mon-chip{border:2px solid var(--line-strong); border-radius:var(--r-md); padding:.75rem 1.1rem;
  font-weight:800; font-size:1rem; color:var(--muted); background:rgba(6,15,43,.5); transition:all .15s}
.mon-chip.active{background:linear-gradient(180deg,rgba(43,123,255,.35),rgba(43,123,255,.15));
  border-color:var(--blue); color:#fff; box-shadow:0 0 0 3px rgba(43,123,255,.22)}
.mon-chip.excel-only{opacity:.45}
.code-input{font-size:2.2rem; font-weight:900; text-align:center; letter-spacing:.14em; padding:.7rem}
.score-input{font-size:4.2rem; font-weight:900; text-align:center; padding:.4rem; color:var(--gold-soft)}
.hs-card{border-radius:var(--r-md); border:1.5px solid var(--line-strong); background:rgba(6,15,43,.55); padding:1rem 1.1rem}
.hs-card.found{border-color:rgba(46,230,168,.6); box-shadow:0 0 24px rgba(46,230,168,.15)}
.hs-card .hs-name{font-size:1.5rem; font-weight:900}
.hs-card .hs-line{color:var(--muted); margin-top:.15rem}
.hs-card .hs-line b{color:var(--ink); font-weight:700}
.hs-multi button{display:block; width:100%; text-align:left; padding:.6rem .8rem; border-radius:var(--r-sm);
  border:1px solid var(--line); margin-top:.5rem; font-weight:700}
.hs-multi button:hover{border-color:var(--blue); background:rgba(43,123,255,.12)}
.queue-chip{cursor:pointer}

/* ============================================================
   THƯ KÝ - BẢNG THEO DÕI
============================================================ */
.toolbar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1rem}
.tbl-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(7,16,45,.6)}
table.data{width:100%; border-collapse:collapse; min-width:860px; font-size:.94rem}
table.data th{position:sticky; top:0; background:#0c1f52; text-align:left; font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--blue-soft); padding:.65rem .7rem; border-bottom:1px solid var(--line-strong); white-space:nowrap}
table.data td{padding:.55rem .7rem; border-bottom:1px solid rgba(110,168,255,.1); white-space:nowrap}
table.data tbody tr:hover{background:rgba(43,123,255,.08)}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}
td.tong{font-weight:900; color:var(--gold-soft)}
.gi{font-size:.74rem; font-weight:800; padding:.18rem .55rem; border-radius:999px}
.gi-nhat{background:linear-gradient(180deg,#ffd34d,#ff9d00); color:#4a2800}
.gi-nhi{background:linear-gradient(180deg,#e8eefc,#aebfdd); color:#22314f}
.gi-ba{background:linear-gradient(180deg,#ffb37e,#d97740); color:#4a2000}
.gi-kk{background:rgba(125,176,255,.2); color:var(--blue-soft); border:1px solid var(--line-strong)}
.legend{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; font-size:.85rem; color:var(--muted)}

/* ============================================================
   LIVESCORE - TRÌNH CHIẾU HỘI TRƯỜNG
============================================================ */
.livescore{position:fixed; inset:0; z-index:100; background:
  radial-gradient(1200px 800px at 50% -15%, rgba(43,123,255,.35), transparent 60%),
  radial-gradient(900px 600px at 100% 110%, rgba(255,138,0,.16), transparent 55%), var(--navy-950);
  display:flex; flex-direction:column; padding:1.2rem 2rem; overflow:hidden}
.ls-head{display:flex; align-items:center; gap:1rem}
.ls-head img{width:64px; height:64px; filter:drop-shadow(0 6px 20px rgba(43,123,255,.6))}
.ls-title{font-size:clamp(1.4rem,3vw,2.2rem); font-weight:900; letter-spacing:.05em}
.ls-title small{display:block; font-size:.8rem; letter-spacing:.3em; color:var(--gold); font-weight:800}
.ls-clock{margin-left:auto; text-align:right; color:var(--muted); font-weight:700}
.ls-clock .t{font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums}
.ls-body{flex:1; display:grid; grid-template-columns:1fr 1.35fr; gap:1.6rem; margin-top:1rem; min-height:0}
@media(max-width:980px){.ls-body{grid-template-columns:1fr; overflow:auto}}
.podium{display:flex; align-items:flex-end; justify-content:center; gap:1rem; padding-bottom:.5rem}
.pod{flex:1; max-width:210px; text-align:center; border-radius:18px 18px 8px 8px; padding:1rem .7rem;
  border:1.5px solid var(--line-strong); background:linear-gradient(180deg, rgba(43,123,255,.2), rgba(13,32,84,.6))}
.pod .medal{font-size:2.2rem}
.pod .p-name{font-weight:900; font-size:1.05rem; margin:.3rem 0 .1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pod .p-sub{font-size:.78rem; color:var(--muted)}
.pod .p-score{font-size:1.9rem; font-weight:900; color:var(--gold-soft); font-variant-numeric:tabular-nums}
.pod.p1{max-width:240px; padding-top:1.6rem; border-color:rgba(255,179,0,.75);
  background:linear-gradient(180deg, rgba(255,179,0,.28), rgba(120,70,0,.18));
  box-shadow:0 0 60px rgba(255,160,0,.3)}
.pod.p1 .p-score{color:#fff}
.ls-table-wrap{overflow:hidden; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(7,16,45,.55); min-height:0}
.ls-table{width:100%; border-collapse:collapse}
.ls-table td{padding:.5rem .8rem; border-bottom:1px solid rgba(110,168,255,.12); font-size:1.05rem; white-space:nowrap}
.ls-table .r{width:3.2rem; font-weight:900; color:var(--blue-soft); text-align:center}
.ls-table .nm{font-weight:800; max-width:0; width:52%; overflow:hidden; text-overflow:ellipsis}
.ls-table .nm small{display:block; font-weight:600; color:var(--muted); font-size:.76rem}
.ls-table .sc{text-align:right; font-weight:900; color:var(--gold-soft); font-variant-numeric:tabular-nums; font-size:1.2rem}
.ls-table tr.up td{animation:flashUp 1.6s ease}
@keyframes flashUp{0%{background:rgba(46,230,168,.35)}100%{background:transparent}}
.ls-foot{display:flex; gap:1rem; align-items:center; margin-top:.8rem; color:var(--muted); font-size:.9rem}
.ls-exit{position:absolute; top:1rem; right:1.2rem; z-index:5}

/* ============================================================
   QUẢN TRỊ
============================================================ */
.admin-tabs{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem}
.atab{padding:.55rem 1rem; border-radius:999px; font-weight:800; font-size:.9rem;
  border:1.5px solid var(--line); color:var(--muted)}
.atab.active{background:linear-gradient(180deg,var(--blue),var(--blue-deep)); border-color:transparent; color:#fff}
.stat{padding:1rem 1.2rem; border-radius:var(--r-md); border:1px solid var(--line); background:rgba(7,16,45,.55)}
.stat .v{font-size:1.9rem; font-weight:900; color:var(--gold-soft)}
.stat .k{font-size:.8rem; color:var(--muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.switch{position:relative; width:58px; height:32px; border-radius:999px; background:rgba(255,84,112,.35);
  border:1.5px solid rgba(255,84,112,.6); transition:all .2s}
.switch::after{content:''; position:absolute; top:3px; left:4px; width:23px; height:23px; border-radius:50%;
  background:#fff; transition:all .2s}
.switch.on{background:rgba(46,230,168,.35); border-color:rgba(46,230,168,.7)}
.switch.on::after{left:28px}
.bg-preview{width:100%; aspect-ratio:16/9; border-radius:var(--r-sm); border:1.5px dashed var(--line-strong);
  background-size:cover; background-position:center; display:grid; place-items:center; color:var(--muted-2); font-weight:700}
.bg-preview.mobile{aspect-ratio:9/16; max-width:180px}

/* ---------- Modal / Toast ---------- */
.modal-veil{position:fixed; inset:0; z-index:90; background:rgba(3,8,26,.72); backdrop-filter:blur(4px);
  display:grid; place-items:center; padding:1rem}
.modal{width:min(520px,100%); max-height:88dvh; overflow:auto; padding:1.5rem}
.modal h3{font-size:1.25rem; font-weight:900; margin-bottom:.8rem}
.modal .confirm-name{font-size:1.6rem; font-weight:900; color:var(--gold-soft)}
.toast-zone{position:fixed; z-index:120; left:50%; bottom:1.4rem; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.5rem; align-items:center; width:min(480px,92vw)}
.toast{width:100%; text-align:center; padding:.75rem 1.1rem; border-radius:var(--r-md); font-weight:700;
  background:#0f2a6b; border:1.5px solid var(--line-strong); box-shadow:var(--shadow); animation:toastIn .25s ease}
.toast.ok{border-color:rgba(46,230,168,.6); color:var(--ok)}
.toast.err{border-color:rgba(255,84,112,.6); color:#ff8ba0}
@keyframes toastIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ---------- In PDF chuẩn văn bản ---------- */
#print-area{display:none}
@media print{
  body *{visibility:hidden}
  #print-area, #print-area *{visibility:visible}
  #print-area{display:block; position:absolute; inset:0; background:#fff; color:#000;
    font-family:'Times New Roman', Times, serif; font-size:13pt; padding:0}
  #print-area .p-quochieu{text-align:center}
  #print-area .p-quochieu .l1{font-size:12pt; font-weight:bold}
  #print-area .p-quochieu .l2{font-size:13pt; font-weight:bold; text-decoration:underline}
  #print-area .p-head{display:flex; justify-content:space-between; margin-bottom:14pt}
  #print-area .p-donvi{text-align:center; font-size:12pt; font-weight:bold}
  #print-area h1{text-align:center; font-size:14pt; margin:10pt 0 2pt; text-transform:uppercase}
  #print-area .p-sub{text-align:center; font-style:italic; margin-bottom:10pt}
  #print-area table{width:100%; border-collapse:collapse; font-size:12pt}
  #print-area th, #print-area td{border:1pt solid #000; padding:4pt 6pt; text-align:center}
  #print-area td.left{text-align:left}
  #print-area .p-sign{display:flex; justify-content:space-between; margin-top:24pt; text-align:center}
  #print-area .p-sign .blk{width:45%}
  #print-area .p-sign .fn{font-weight:bold}
  #print-area .p-sign .note{font-style:italic; font-size:11pt}
}

/* ---------- Khác ---------- */
.offline-banner{position:sticky; top:56px; z-index:35; text-align:center; font-weight:800; font-size:.9rem;
  padding:.5rem .8rem; background:linear-gradient(180deg,#7a1f33,#5c1626); border-bottom:1px solid rgba(255,84,112,.5); color:#ffc2cd}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}
@media(max-width:640px){
  .page{padding:1rem .8rem 3.5rem}
  .topbar .tt{font-size:1rem}
  .score-input{font-size:3.2rem}
  .livescore{padding:.9rem}
}