/* Nền tối xanh đêm, thẻ bo tròn có viền mảnh; bố cục lưới giữ theo client PC tối của FB Sports.
   Mỗi bậc báo có một màu nhấn --ac: viền trái, nền loang và quầng sáng cùng lấy từ đó. */
:root{
  --nen:#07090e;--khoi:#10131b;--khoi2:#141823;--dau:#171d30;--o:#181c27;--o2:#212634;--vien:rgba(148,160,210,.1);--vien2:rgba(148,160,210,.18);
  --trang:#fff;--chu:#dde1ea;--chu2:#a6adc5;--chu3:#7c8399;
  --lam:#4f7cff;--tim:#8a5cff;--len:#ea3543;--xuong:#2fd66b;--cam:#ff9f1a;--vang:#f7b733;--hong:#ff6eb4;
  --bo:12px;--bo2:8px;--bong:0 1px 0 rgba(255,255,255,.035) inset,0 6px 20px -10px rgba(0,0,0,.7);
  --ct:46px;--c2:64px;--c3:70px;--cao:38px;--le:8px;--fs:13px;
}
@media (max-width:374px){:root{--ct:42px;--c2:58px;--c3:64px}}
@media (min-width:640px){:root{--ct:64px;--c2:180px;--c3:180px;--cao:32px;--le:12px;--fs:14px}}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--nen);scrollbar-color:var(--o2) transparent}
body{min-height:100vh;color:var(--chu);font:14px/1.5 Inter,Roboto,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(900px 420px at 50% -160px,rgba(79,124,255,.2),transparent 70%),radial-gradient(600px 300px at 100% 0,rgba(138,92,255,.1),transparent 70%),var(--nen);background-repeat:no-repeat}
::selection{background:rgba(79,124,255,.45);color:#fff}
button{font:inherit;color:inherit;cursor:pointer}
button,[role=button],a{touch-action:manipulation}
:focus-visible{outline:2px solid var(--lam);outline-offset:2px;border-radius:var(--bo2)}
.so,.ty,.dong-ho,.doi .ban,.gio{font-family:Barlow,DIN,Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums}
.trang{max-width:880px;margin:0 auto;padding:0 0 32px}

/* Thanh trên: kính mờ dính đầu trang */
.tren{position:sticky;top:0;z-index:5;border-bottom:1px solid var(--vien)}
/* Kính mờ nằm ở lớp giả: backdrop-filter trên chính .tren làm thanh tab fixed của điện thoại bám theo .tren. */
.tren::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(9,11,17,.78);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
@media (min-width:880px){.tren{border:1px solid var(--vien);border-top:0;border-radius:0 0 16px 16px}}
.tren-hang{display:flex;align-items:center;gap:8px;padding:10px 12px}
.hieu{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.fb{display:inline-flex;align-items:center;gap:9px;min-width:0;white-space:nowrap;font:italic 800 16px/1 Inter,Roboto,Arial,sans-serif;letter-spacing:-.2px;color:#fff}
.fb::before{content:"";flex:none;width:28px;height:28px;border-radius:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat,linear-gradient(135deg,#5d8bff,var(--tim));
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 6px 16px -4px rgba(93,139,255,.6)}
@media (max-width:399px){.tren-hang{gap:6px;padding:10px}.fb{font-size:13.5px;gap:7px}.fb::before{width:24px;height:24px;border-radius:8px;background-size:14px,auto}.tin{padding:0 9px;gap:6px}.chuong{width:38px;height:38px}}
/* Màn hẹp (320–359px): tên đầy đủ không còn chỗ cạnh đồng hồ và hai nút, thay bằng chữ tắt CTCC. */
@media (max-width:359px){.fb{font-size:0;gap:0}.fb::after{content:"CTCC";margin-left:8px;font-size:15px;letter-spacing:.3px}}
.tin{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 Barlow,Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--chu);background:rgba(255,255,255,.04);border:1px solid var(--vien);padding:0 11px;height:32px;border-radius:999px;white-space:nowrap}
.tin::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--chu3)}
.tin.ok::before{background:var(--xuong);box-shadow:0 0 0 3px rgba(47,214,107,.18),0 0 10px rgba(47,214,107,.7);animation:nhap 1.6s ease-in-out infinite}
.tin.cham::before{background:var(--vang);box-shadow:0 0 0 3px rgba(247,183,51,.18)}
.tin.loi{color:#ff7a87;border-color:rgba(255,59,79,.35);background:rgba(255,59,79,.08)}
.tin.loi::before{background:var(--len);box-shadow:0 0 0 3px rgba(255,59,79,.2)}
.chuong{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;border:1px solid var(--vien);background:rgba(255,255,255,.04);color:var(--chu2);transition:background .15s,color .15s,border-color .15s}
@media (hover:hover){.chuong:not(:disabled):hover{background:rgba(255,255,255,.08);color:#fff}}
.chuong.on{color:var(--vang);border-color:rgba(247,183,51,.5);background:rgba(247,183,51,.1);box-shadow:0 0 16px -4px rgba(247,183,51,.5)}
.chuong.on svg{fill:currentColor}
.chuong.hoi.on{color:#fff;border-color:rgba(79,124,255,.6);background:rgba(79,124,255,.18);box-shadow:0 0 16px -4px rgba(79,124,255,.6)}
.chuong:disabled{opacity:.4;cursor:not-allowed}
.chuong.hoi{font:700 15px/1 Inter,Roboto,sans-serif}

/* Tab: thanh chọn bo tròn, mục đang chọn sáng lên */
.tabs{display:flex;gap:3px;margin:0 12px 10px;padding:3px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--vien)}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--chu2);font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
@media (hover:hover){.tab:not(.on):hover{color:#fff;background:rgba(255,255,255,.05)}}
@media (min-width:640px){.tabs{display:inline-flex}.tab{flex:none;padding:0 18px}}
@media (max-width:419px){.tab{padding:0 6px;gap:5px;font-size:12.5px}}
.tab.on{color:#fff;background:linear-gradient(180deg,#5b87ff,#3d66f0);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 16px -6px rgba(79,124,255,.8)}
.tab b{font:600 11px/1 Barlow,Roboto,sans-serif;min-width:18px;padding:3px 6px;border-radius:9px;background:rgba(255,255,255,.08);color:var(--chu2);text-align:center}
.tab.on b{background:rgba(255,255,255,.22);color:#fff}

/* Lời nhắc bật thông báo */
.nhac{display:flex;align-items:center;gap:8px;margin:12px 4px 0;padding:6px 6px 6px 14px;border-radius:var(--bo);background:linear-gradient(135deg,rgba(79,124,255,.16),transparent 60%),var(--khoi);border:1px solid rgba(79,124,255,.32);font-size:12.5px;color:var(--chu)}
.nhac[hidden],.nhac-bat[hidden],.tim[hidden]{display:none}
.nhac>span{flex:1;min-width:0}
.nhac-bat{flex:none;height:36px;padding:0 14px;border:0;border-radius:var(--bo2);background:linear-gradient(180deg,#5b87ff,#3d66f0);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap}
.nhac-an{flex:none;width:32px;height:36px;border:0;background:none;color:var(--chu2);font-size:18px;line-height:1}

/* Ô tìm: chữ 16px trên điện thoại để iPhone không tự phóng to khi gõ. */
.tim{margin:12px 4px 0}
.tim input{display:block;width:100%;height:42px;padding:0 14px;border-radius:var(--bo);border:1px solid var(--vien2);background:var(--khoi);color:var(--trang);font:inherit;font-size:16px}
.tim input::placeholder{color:var(--chu3)}
@media (min-width:640px){.tim{margin:12px 8px 0}.tim input{font-size:14px}}

/* Các phần của tab Theo dõi */
.phan{margin-top:14px}
.phan-dau{display:flex;align-items:center;gap:7px;margin:0 6px 8px;font-size:13.5px;font-weight:700;color:var(--trang)}
.phan-dau b{font:600 12px/1 Barlow,Roboto,sans-serif;padding:3px 7px;border-radius:9px;background:var(--o2);color:var(--chu)}
.phan .giai{margin-top:0}
.phan .giai+.giai{margin-top:10px}
.phan-het{opacity:.85}
.nut-phu{display:flex;align-items:center;min-height:36px;margin:14px auto 0;padding:0 14px;border-radius:var(--bo2);border:1px solid var(--vien2);background:rgba(255,255,255,.04);color:var(--chu);font-size:12.5px;font-weight:600}

/* Cảnh báo và ghi chú */
.canh-bao{--ac:var(--cam);position:relative;margin:12px 4px 0;padding:8px 14px 2px;border-radius:var(--bo);border:1px solid color-mix(in srgb,var(--ac) 32%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 13%,transparent),transparent 55%),var(--khoi);box-shadow:var(--bong),0 0 30px -14px var(--ac)}
.canh-bao::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.canh-bao.nong{--ac:var(--len)}
/* Quầng nhấp nháy: bóng vẽ sẵn một lần ở lớp giả, chỉ đổi opacity nên card đồ hoạ tự làm, không vẽ lại
   từng khung hình như khi đổi thẳng box-shadow (đo: tính lại style 60 lần/giây, vẽ ~100ms/giây). */
.canh-bao.nong::after,.tran.k123::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;will-change:opacity;animation:quang 2.4s ease-in-out infinite}
.canh-bao.nong::after{box-shadow:0 0 42px -10px var(--len)}
@keyframes quang{50%{opacity:1}}
.cb-dau{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--chu3)}
.cb-dau b{font-weight:700;color:var(--ac)}
.canh-bao.nong .cb-dau b{color:#ff6b7a}
.cb-dong{cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;column-gap:8px;align-items:center;min-height:42px;margin:0 -8px;padding:4px 8px;border-top:1px solid var(--vien);border-radius:var(--bo2);font-size:13px;transition:background .15s}
@media (hover:hover){.cb-dong:hover{background:rgba(255,255,255,.04)}}
.cb-tran{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-ty{font:700 17px/1 Barlow,Roboto,sans-serif;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.5px}
.cb-phu{font-size:12px;color:var(--chu2);white-space:nowrap}
.cb-phut{min-width:62px;font-size:12px;color:var(--chu2);white-space:nowrap;text-align:right}
/* DOM giữ tỷ số ngay sau tên đội; trên màn hình tỷ số nằm cuối dòng cho thẳng cột. */
.cb-ty{order:1;min-width:30px;text-align:right}
.cb-ty i{font-style:normal}
.cb-them{display:none}
/* Điện thoại: bảng tỷ số hai dòng. Nhãn bậc trên, phút dưới; mỗi đội một dòng, bàn cạnh tên. */
@media (max-width:639px){
  .cb-phu,.cb-vs,.cb-ty i{display:none}
  .cb-dong{grid-template-columns:86px minmax(0,1fr) auto;grid-template-rows:20px 20px;row-gap:3px;column-gap:10px;padding:8px}
  .cb-tran,.cb-ty{display:contents}
  .cb-dong>.bac{grid-area:1/1;justify-content:center;padding:0 5px;font-size:10px;letter-spacing:.2px}
  .cb-phut{grid-area:2/1;min-width:0;font:600 12px/20px Barlow,Roboto,sans-serif;text-align:center}
  .cb-ten{grid-column:2;display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:20px}
  .cb-ty>b{grid-column:3;min-width:14px;text-align:right;line-height:20px}
  .cb-tran>:first-child,.cb-ty>:first-child{grid-row:1}
  .cb-tran>:last-child,.cb-ty>:last-child{grid-row:2}
}
/* Nhãn bậc báo: một hệ màu cho thẻ trận, dải cảnh báo và bảng luật. */
.bac,.the.bao{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font:700 10.5px/1 Inter,Roboto,sans-serif;letter-spacing:.4px;white-space:nowrap;color:#fff;
  background:linear-gradient(180deg,#5d88ff,#3c63ea);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 3px 10px -4px rgba(79,124,255,.8)}
.bac.k12,.the.bao.k12{color:#241500;background:linear-gradient(180deg,#ffb54a,#ff8f0a);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 3px 10px -4px rgba(255,159,26,.8)}
.bac.k123,.the.bao.k123{background:linear-gradient(180deg,#ff5869,#e8243a);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 3px 12px -3px rgba(255,59,79,.9)}
.bac.som{background:linear-gradient(180deg,#a582ff,#7b4dff);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 3px 10px -4px rgba(138,92,255,.8)}
.bac.xiu,.the.bao.xiu{color:#36071f;background:linear-gradient(180deg,#ff8cc6,#ff5aa8);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 3px 10px -4px rgba(255,110,180,.8)}
.luat{margin:10px 0;padding:0 14px;border-radius:var(--bo);background:var(--khoi);border:1px solid var(--vien);box-shadow:var(--bong);color:var(--chu3);font-size:12px;line-height:1.55}
.luat p{margin:8px 0 12px}
.luat-nut{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:0;border:0;background:none;color:var(--chu2);font-size:12.5px;font-weight:600;text-align:left}
.luat-nut>b{flex:1;font-weight:600;color:var(--chu);white-space:nowrap}
@media (max-width:419px){.luat{padding:0 12px}.luat-nut{gap:4px}.luat-nut .bac{padding:0 6px;font-size:10px;letter-spacing:.2px}}
.luat-nut svg{flex:none;margin-left:2px;color:var(--chu3);transition:transform .2s}
.luat-nut[aria-expanded="true"] svg{transform:rotate(180deg)}
.luat p b{color:var(--chu);font-weight:600}
.luat-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}
.luat-o{display:flex;flex-direction:column;gap:3px;min-width:0;padding:9px 11px;border-radius:var(--bo2);background:var(--o);border:1px solid var(--vien)}
.luat-ma{font:700 11px/1.2 Inter,Roboto,sans-serif;letter-spacing:.4px;color:#9fb3ff}
.luat-ma.xiu{color:var(--hong)}
.luat-o b{color:var(--chu);font-weight:600}
.luat-o small{font-size:11px;color:var(--chu3)}
@media (max-width:519px){
  .luat-luoi{grid-template-columns:1fr}
  .luat-o{flex-direction:row;align-items:baseline;gap:8px}
  .luat-o small{display:none}
}
.hd{margin:10px 0;padding:18px 16px 20px;border-radius:var(--bo);background:var(--khoi);border:1px solid var(--vien);box-shadow:var(--bong);color:var(--chu2);font-size:13px;line-height:1.55}
.hd h2{margin:0 0 4px;color:var(--trang);font-size:19px;font-weight:700;letter-spacing:-.2px}
.hd h3{margin:22px 0 10px;color:var(--trang);font-size:13.5px;font-weight:700}
.hd p{margin:6px 0}
.hd-mo{margin:0 0 14px!important}
.hd-mo b{color:var(--chu);font-weight:600}
.hd-ds{margin:0;padding-left:18px}
.hd-ds li+li{margin-top:4px}
.kq-cach p{margin:0 0 6px}
.kq-cach .hd-ds{margin-bottom:8px}
.hd-thu{padding:0 14px 14px;border-radius:var(--bo);background:linear-gradient(160deg,rgba(79,124,255,.16),rgba(138,92,255,.06) 60%,transparent),var(--khoi2);border:1px solid rgba(79,124,255,.32)}
.hd-thu h3{margin:0;padding:14px 0 10px}
.hd-bang{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.hd-chinh{display:flex;flex-direction:column;gap:10px;min-width:0}
.hd-hang{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:8px;font-size:12px;color:var(--chu2)}
.hd-chons{display:flex;flex-wrap:wrap;gap:4px}
.hd-chon{min-width:36px;height:32px;padding:0 10px;border-radius:var(--bo2);border:1px solid var(--vien);background:var(--o);color:var(--chu);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s}
@media (hover:hover){.hd-chon:not(.on):hover{border-color:var(--vien2);background:var(--o2)}}
.hd-chon.on{background:linear-gradient(180deg,#5b87ff,#3d66f0);border-color:transparent;color:#fff;box-shadow:0 4px 12px -5px rgba(79,124,255,.9)}
.hd-ty{display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:2px 0}
.hd-ty em{padding-bottom:8px;font-style:normal;font-size:18px;color:var(--chu3)}
.hd-dem small{display:block;margin-bottom:4px;font-size:12px;color:var(--chu2);text-align:center}
.hd-dem>div{display:flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:var(--o);border:1px solid var(--vien)}
.hd-dem button{width:34px;height:34px;border-radius:9px;border:0;background:var(--o2);color:var(--chu);font-size:18px;line-height:1}
@media (hover:hover){.hd-dem button:hover{background:#2a3042;color:#fff}}
.hd-dem b{width:34px;color:var(--trang);font:700 24px/1 Barlow,Roboto,sans-serif;font-variant-numeric:tabular-nums;text-align:center}
.hd-ra{display:flex;flex-direction:column;gap:10px;min-width:0}
.hd-tin{--ac:var(--lam);padding:11px 13px;border-radius:var(--bo2);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);border-left:3px solid var(--ac);background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 12%,transparent),transparent 70%),var(--khoi);color:var(--chu2);font-size:12px}
.hd-tin b{display:block;margin-bottom:4px;color:var(--trang);font-size:13px;font-weight:600}
.hd-tin p{margin:2px 0}
.hd-tin small{display:block;margin-top:6px;color:var(--chu3);font-size:11px}
.hd-tin.k12{--ac:var(--cam)}
.hd-tin.k123{--ac:var(--len)}
.hd-tin.xiu{--ac:var(--hong)}
.hd-tin.khong{--ac:var(--chu3)}
.hd-mocs>span{display:block;margin-bottom:6px;font-size:12px;color:var(--chu2)}
.hd-mocs>div{display:flex;flex-wrap:wrap;gap:4px}
.hd-moc{min-width:38px;height:28px;padding:0 6px;border-radius:7px;border:1px solid transparent;background:var(--lam);color:#fff;font:600 12px/1 Barlow,Roboto,sans-serif;font-variant-numeric:tabular-nums}
.hd-moc.k12{background:var(--cam);color:#241500}
.hd-moc.xiu{background:var(--hong);color:#36071f}
.hd-moc.on{outline:2px solid #fff;outline-offset:2px}
.hd-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hd-dong{--ac:var(--lam);display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding:11px 13px;border-radius:var(--bo2);border-left:3px solid var(--ac);background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 9%,transparent),transparent 60%),var(--o)}
.hd-dong.k12{--ac:var(--cam)}
.hd-dong.k123{--ac:var(--len)}
.hd-dong.xiu{--ac:var(--hong)}
.hd-dong b{color:var(--chu);font-weight:600}
.hd-dong small{font-size:12px;color:var(--chu3)}
.hd-dong .vd{color:var(--chu2)}
.hd-buoc{counter-reset:buoc;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.hd-buoc li{counter-increment:buoc;position:relative;padding:10px 12px 10px 44px;border-radius:var(--bo2);background:var(--o)}
.hd-buoc li::before{content:counter(buoc);position:absolute;left:12px;top:11px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#5d8bff,var(--tim));color:#fff;font:700 11px/22px Barlow,Roboto,sans-serif;text-align:center}
.hd-buoc b{display:block;color:var(--chu);font-weight:600}
.hd-buoc small{display:block;font-size:12px;color:var(--chu3)}
@media (max-width:639px){
  .hd-bang,.hd-luoi{grid-template-columns:minmax(0,1fr)}
}
.ghi{margin:12px 6px 8px;color:var(--chu3);font-size:12px;line-height:1.6}
main{padding:0 4px}

/* Thanh giải */
.giai{margin-top:10px}
.giai-dau{display:grid;grid-template-columns:minmax(0,1fr) var(--c2) var(--c3);column-gap:2px;align-items:center;height:38px;padding:0 var(--le) 0 12px;margin-bottom:5px;border-radius:10px;
  background:linear-gradient(90deg,#1c2442,#151a2b 70%);border:1px solid rgba(110,135,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.giai-ten{display:flex;align-items:center;gap:8px;min-width:0;color:#fff;font-size:var(--fs);font-weight:600}
.giai-ten img,.giai-ten .logo-giai{width:22px;height:22px;flex:none;border-radius:50%;object-fit:contain;background:#fff;padding:2px;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.giai-ten>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.giai-ten small{color:var(--chu3);font-weight:400;font-size:12px}
.cot{color:var(--chu3);font-size:11.5px;font-weight:500;text-align:center;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nhan-dai{display:none}

/* Khối trận */
.tran{--ac:transparent;position:relative;display:grid;grid-template-columns:var(--ct) minmax(0,1fr) var(--c2) var(--c3);grid-template-rows:repeat(2,var(--cao)) auto auto;column-gap:2px;row-gap:2px;padding:10px var(--le) 0 0;margin-bottom:6px;
  border-radius:var(--bo);border:1px solid var(--vien);border-left:3px solid var(--ac);background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 14%,transparent),transparent 45%),var(--khoi);box-shadow:var(--bong)}
.tran.song{--ac:var(--len);background:linear-gradient(90deg,rgba(255,59,79,.08),transparent 35%),var(--khoi)}
.tran.song .gio i{color:#ff5b6c;font-weight:700}
.tran.song .gio i::before{content:"";display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--len);box-shadow:0 0 8px var(--len);vertical-align:1px;animation:nhap 1.2s ease-in-out infinite}
.tran.k1{--ac:var(--lam);border-color:rgba(79,124,255,.28) rgba(79,124,255,.28) rgba(79,124,255,.28) var(--ac)}
.tran.k12{--ac:var(--cam);border-color:rgba(255,159,26,.28) rgba(255,159,26,.28) rgba(255,159,26,.28) var(--ac)}
.tran.k123{--ac:var(--len);border-color:rgba(255,59,79,.5) rgba(255,59,79,.5) rgba(255,59,79,.5) var(--ac)}
.tran.xiu{--ac:var(--hong);border-color:rgba(255,110,180,.28) rgba(255,110,180,.28) rgba(255,110,180,.28) var(--ac)}
.tran.k123::after{box-shadow:0 0 28px -6px rgba(255,59,79,.55);animation-duration:2s}
.gio{grid-row:1/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 4px 10px;border-right:1px solid var(--vien);font-size:12px;line-height:18px;color:var(--chu3);text-align:center;min-width:0}
.gio i{font-style:normal;font-weight:600;white-space:nowrap}
.gio b{color:#fff;font-weight:600;font-size:14px}
.ghim{display:grid;place-items:center;width:30px;height:30px;margin-top:2px;padding:0;border:0;border-radius:8px;background:none;color:var(--chu3);cursor:pointer;transition:color .15s,background .15s}
.ghim.on{color:var(--vang)}
.ghim.on path{fill:currentColor}
@media (hover:hover){.ghim:hover{color:var(--chu);background:var(--o2)}.ghim.on:hover{color:var(--vang)}}
.phan-ghim .phan-dau{color:var(--vang)}
.doi{display:flex;align-items:center;gap:7px;min-width:0;padding:0 4px 0 8px;font-size:var(--fs)}
.doi img,.chu-dau{width:18px;height:18px;border-radius:50%;flex:none;object-fit:contain}
.chu-dau{display:grid;place-items:center;background:var(--o2);color:var(--chu2);font-size:9px;font-weight:600}
.doi .ten{flex:1;min-width:0;color:var(--chu);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doi .ban{color:#fff;font-weight:700;font-size:21px;line-height:1;min-width:18px;text-align:right}
/* 1x2 không dùng cho luật báo: một dòng gọn dưới hai đội. */
.x12{grid-column:2/-1;display:flex;align-items:center;gap:12px;min-height:24px;margin-top:2px;padding:0 0 0 8px;font-size:11px;color:var(--chu3)}
.x12-o{display:inline-flex;align-items:baseline;gap:4px}
.x12-o small{font-size:11px;color:var(--chu3)}
.x12 .ty{font-size:12px;color:var(--chu2)}
.x12 .ty.len{color:var(--len)}
.x12 .ty.xuong{color:var(--xuong)}
.o{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:0 2px;border-radius:7px;background:var(--o);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;text-align:center;line-height:1.15;transition:background .15s}
.o.khoa{background:repeating-linear-gradient(135deg,var(--o) 0 6px,#151924 6px 12px)}
.ke{max-width:100%;color:var(--chu2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ke.chan{color:var(--vang);font-weight:600}
.ty{color:var(--chu);font-size:13.5px;font-weight:600;white-space:nowrap}
.ty.len{color:#ff5d6e}
.ty.xuong{color:var(--xuong)}
.ty.len::after,.ty.xuong::after{font-size:8px;margin-left:3px;vertical-align:1px}
.ty.len::after{content:"▲"}
.ty.xuong::after{content:"▼"}
.ty.khoa-ic{color:var(--chu3);line-height:0}
@media (min-width:640px){
  .o{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0}
  .ke{font-size:12px}
  .gio{padding:0 8px 10px}
  main{padding:0 8px}
  .canh-bao{margin:12px 8px 0}
  .nhan-dai{display:inline}
  .nhan-ngan{display:none}
  .doi{padding:0 8px 0 12px}
  .dai,.x12{padding-left:12px}
}
.dai{grid-column:2/-1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;row-gap:3px;min-height:30px;padding:4px 0 6px 8px;font-size:12px;color:var(--chu2)}
.dai:empty{min-height:10px}
.the{white-space:nowrap;line-height:24px;max-width:100%;min-width:0;overflow:hidden}
.the.moc{color:#8aa4ff}
.the.hoa{color:#8aa4ff;font-weight:600}
.the.mo{color:var(--chu3)}
.the.tre{color:var(--vang)}
.the.moc{white-space:normal}
.the .mc{white-space:nowrap;font:600 12px/18px Barlow,Roboto,sans-serif;color:#a8b9ff;background:rgba(79,124,255,.13);padding:1px 6px;border-radius:5px}
.the .mc.khop{color:var(--cam);background:rgba(255,159,26,.15)}
.the .mc.xiu{color:var(--hong);background:rgba(255,110,180,.15)}
/* Tỷ số đang có: nền đặc, nhìn lướt là thấy trận đang ở mốc nào. */
.the .mc.dang{color:#fff;background:var(--lam);box-shadow:0 0 10px -2px var(--lam)}
.the .mc.khop.dang{color:#241500;background:var(--cam);box-shadow:0 0 10px -2px var(--cam)}
.the .mc.xiu.dang{color:#36071f;background:var(--hong);box-shadow:0 0 10px -2px var(--hong)}
.moc-xiu{white-space:nowrap}
.dks{display:inline-flex;gap:4px;flex-wrap:wrap}
.dk{display:inline-flex;align-items:baseline;line-height:18px;gap:5px;height:22px;padding:0 8px;border-radius:11px;background:var(--o2);border:1px solid transparent;color:var(--chu3);font-size:11px;font-weight:600;white-space:nowrap}
.dk b{font:600 12px/18px Barlow,Roboto,sans-serif;font-variant-numeric:tabular-nums;color:var(--chu2)}
.dk.on{color:var(--xuong);background:linear-gradient(180deg,rgba(47,214,107,.16),rgba(47,214,107,.06));border-color:rgba(47,214,107,.5);box-shadow:0 0 12px -4px rgba(47,214,107,.6)}
.dk.on b{color:#fff}
.dk .dau{align-self:center;display:grid;place-items:center;width:12px;height:12px;flex:none;border-radius:50%;border:1.5px solid currentColor;opacity:.6}
.dk.on .dau{opacity:1;border-color:var(--xuong);background:var(--xuong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2307090e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.2l2 2 4-4.4'/%3E%3C/svg%3E") center/10px no-repeat;color:var(--nen)}
.the.truc{color:var(--chu3)}
.the.truc .ty{font-size:12px}
.the.truc i{font-style:normal;color:var(--chu3);margin:0 2px}
.the.truc .khoa-ic{vertical-align:-2px}
.vach{align-self:center;position:relative;display:inline-block;width:40px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--o) 0 72.2%,rgba(247,183,51,.7) 72.2% 94.4%,var(--o) 94.4%)}
.vach i{position:absolute;top:-3px;width:2px;height:10px;margin-left:-1px;border-radius:1px;background:#fff;box-shadow:0 0 6px #fff}
@keyframes nhap{50%{opacity:.5}}
/* Chấm đỏ nhấp nháy của mỗi trận đang đá bắt trình duyệt tính lại style mỗi khung hình, kể cả trận
   ngoài màn hình. Giải ngoài màn hình (data-khuat, gắn trong page.js) thì dừng hẳn. Đo 160 trận trên
   điện thoại giả lập (CPU chậm 4 lần): việc luồng chính giảm từ ~4,9 giây xuống ~2,4 giây mỗi 14 giây. */
.giai[data-khuat] .gio i::before{animation:none}
/* Chữ dài hơn chỗ chứa thì chạy một chiều: hai bản nối nhau, dịch đúng nửa dải là về chỗ cũ. */
[data-chay]{text-overflow:clip!important;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 14px),transparent);mask:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 14px),transparent)}
.chay-dai{display:inline-flex;vertical-align:top;animation:chay-chu var(--tg,8s) linear infinite;will-change:transform;backface-visibility:hidden}
.chay-mot{flex:none;display:inline-block;padding-right:32px}
@keyframes chay-chu{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.chay-dai,.tran.k123::after,.canh-bao.nong::after{animation:none}}

/* Kết quả */
.kq-loc{display:flex;flex-wrap:wrap;gap:6px;margin:12px 4px 10px}
.kq-loc button{height:36px;border:1px solid var(--vien);background:rgba(255,255,255,.035);color:var(--chu2);padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:600;transition:background .15s,color .15s}
@media (hover:hover){.kq-loc button:not(.on):hover{color:#fff;background:rgba(255,255,255,.07)}}
.kq-loc button.on{background:linear-gradient(180deg,#5b87ff,#3d66f0);border-color:transparent;color:#fff;box-shadow:0 5px 14px -6px rgba(79,124,255,.9)}
.kq-tai{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid rgba(47,214,107,.35);border-radius:999px;background:rgba(47,214,107,.08);font-size:12.5px;font-weight:600;color:#6fe39a;text-decoration:none;white-space:nowrap;transition:background .15s}
.kq-tai::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat}
.kq-tai:hover{background:rgba(47,214,107,.15)}
.kq-loc .kq-chon{display:inline-flex;align-items:center;gap:6px}
.kq-chon svg{flex:none}
/* Chọn ngày: ô hiện khoảng ngày, bấm mở lịch thả xuống ngay dưới. */
.kq-ngay{position:relative;margin:0 4px 10px}
.kq-ngay-o{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:340px;height:40px;padding:0 14px;border:1px solid var(--vien2);border-radius:var(--bo2);background:var(--o);color:var(--trang);font-family:Barlow,DIN,Roboto,Arial,sans-serif;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.kq-ngay-o svg{color:var(--chu2)}
.kq-ngay-o[aria-expanded=true]{border-color:var(--lam)}
.kq-lich{position:absolute;z-index:4;top:46px;left:0;width:340px;max-width:100%;padding:12px;border:1px solid var(--vien2);border-radius:var(--bo);background:var(--khoi2);box-shadow:0 18px 40px -12px rgba(0,0,0,.85)}
.kq-lich-dau{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.kq-lich-dau span{display:flex;align-items:center;gap:2px}
.kq-lich-dau b{min-width:72px;text-align:center;font-size:14.5px;font-weight:600;color:var(--trang)}
.kq-lich-dau span+span b{min-width:44px}
.kq-lich-dau button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--chu)}
.kq-lich-dau button:disabled{color:var(--chu3);opacity:.4;cursor:default}
@media (hover:hover){.kq-lich-dau button:not(:disabled):hover{background:rgba(255,255,255,.07)}}
.kq-lich-thu,.kq-lich-ngay{display:grid;grid-template-columns:repeat(7,1fr)}
.kq-lich-thu span{padding:4px 0;text-align:center;font-size:11.5px;color:var(--chu3)}
.kq-lich-ngay{row-gap:4px}
.kq-lich-ngay button{position:relative;height:38px;border:0;background:none;color:var(--chu);font-family:Barlow,DIN,Roboto,Arial,sans-serif;font-size:15px;font-variant-numeric:tabular-nums}
.kq-lich-ngay button.co::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--xuong)}
.kq-lich-ngay button.nay{color:var(--lam);font-weight:700}
.kq-lich-ngay button.sau{color:var(--chu3);opacity:.45;cursor:default}
.kq-lich-ngay button.giua{background:rgba(79,124,255,.22)}
.kq-lich-ngay button.dau,.kq-lich-ngay button.cuoi{color:#fff;font-weight:700;background:linear-gradient(180deg,#5b87ff,#3d66f0);border-radius:999px}
.kq-lich-ngay button.dau:not(.cuoi){border-radius:999px 0 0 999px}
.kq-lich-ngay button.cuoi:not(.dau){border-radius:0 999px 999px 0}
.kq-lich-ngay button.dau.co::after,.kq-lich-ngay button.cuoi.co::after{background:#fff}
@media (hover:hover){.kq-lich-ngay button:not(:disabled):not(.dau):not(.cuoi):hover{background:rgba(255,255,255,.08);border-radius:999px}}
.kq-lich-cuoi{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--vien)}
.kq-lich-cuoi span{flex:1;font-size:12px;line-height:1.4;color:var(--chu2)}
.kq-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* Điện thoại: sáu ô xếp thành dải vuốt ngang để danh sách trận không bị đẩy khỏi màn hình đầu. */
@media (max-width:719px){
  .kq-luoi{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -4px;padding:2px 4px 4px}
  .kq-luoi::-webkit-scrollbar{display:none}
  .kq-luoi .kq-the{flex:0 0 min(72vw,260px);scroll-snap-align:start}
}
.kq-the{--ac:var(--chu3);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;width:100%;padding:12px 13px;border-radius:var(--bo);min-width:0;text-align:left;
  background:radial-gradient(130% 90% at 0 0,color-mix(in srgb,var(--ac) 15%,transparent),transparent 60%),var(--khoi);border:1px solid var(--vien);box-shadow:var(--bong);transition:border-color .2s,transform .2s,box-shadow .2s}
.kq-the::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--ac),transparent)}
@media (hover:hover){.kq-the:hover{border-color:var(--vien2);transform:translateY(-1px)}}
.kq-the.on{border-color:color-mix(in srgb,var(--ac) 60%,transparent);box-shadow:var(--bong),0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent),0 8px 26px -12px var(--ac)}
.bac.xam{background:linear-gradient(180deg,#9aa0b2,#7c8399);color:var(--nen);box-shadow:none}
.kq-the.k1{--ac:var(--lam)}
.kq-the.k12{--ac:var(--cam)}
.kq-the.k123{--ac:var(--len)}
.kq-the.xiu{--ac:var(--hong)}
.kq-the.som{--ac:var(--tim)}
.kq-ten{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--chu3)}
.kq-ten>b{color:#fff;font-size:12px;letter-spacing:.4px;text-transform:uppercase}
.kq-so{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 8px}
.kq-so>span{font-size:11px;line-height:1.3;color:var(--chu2)}
.kq-so b{display:block;margin-bottom:4px;font:700 30px/1 Barlow,Roboto,sans-serif;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.kq-phu{display:flex;flex-wrap:wrap;gap:2px 10px;padding-top:8px;border-top:1px solid var(--vien);font-size:11px;color:var(--chu3)}
.kq-phu b{color:var(--chu);font-weight:600}
.kq-dau{display:flex;align-items:center;gap:10px;margin:18px 6px 8px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--chu3)}
.kq-dau::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--vien2),transparent)}
.kq-dong[data-mo]{cursor:pointer}
.kq-dong.mo{border-color:var(--vien2);background:var(--khoi2)}
.kq-ct{grid-column:1/-1;margin:10px 0 0 10px;padding-top:10px;border-top:1px solid var(--vien);font-size:12px;color:var(--chu);cursor:default}
.kq-ct-d{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;padding:4px 0}
.kq-ct-d>span{color:var(--chu3)}
.kq-moc{display:inline-flex;align-items:center;gap:6px;margin:0 12px 4px 0}
.kq-dong::after{content:"";grid-column:-2;grid-row:1;justify-self:center;width:7px;height:7px;border:solid var(--chu3);border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg)}
.kq-dong.mo::after{transform:translateY(2px) rotate(-135deg)}
.kq-dong{display:grid;grid-template-columns:var(--ct) minmax(0,1fr) auto auto 12px;column-gap:10px;align-items:center;padding:10px 12px 10px 0;margin-bottom:6px;border-radius:var(--bo);background:var(--khoi);border:1px solid var(--vien);box-shadow:var(--bong);transition:background .15s,border-color .15s}
@media (hover:hover){.kq-dong[data-mo]:not(.mo):hover{background:var(--khoi2);border-color:var(--vien2)}}
.kq-gio{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--chu3);border-right:1px solid var(--vien);text-align:center;line-height:1.4}
.kq-gio b{font:600 13px Barlow,Roboto,sans-serif;color:#fff}
.kq-tran{display:flex;align-items:center;gap:8px;min-width:0}
.kq-tran b{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-chu{margin-top:3px;font-size:12px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-ra{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
/* Nút xoá cạnh mỗi trận: thùng rác mờ; bấm lần đầu đỏ lên chữ "Xoá?", bấm lần nữa mới xoá. */
.kq-xoa{grid-column:4;grid-row:1;align-self:center;justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:34px;height:34px;padding:0;border:0;border-radius:999px;background:none;color:var(--chu3);font-size:12px;font-weight:700;white-space:nowrap;transition:background .15s,color .15s}
.kq-xoa::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic-xoa) center/contain no-repeat;mask:var(--ic-xoa) center/contain no-repeat}
.kq-xoa{--ic-xoa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7M6.5 7l1 12.5h9l1-12.5M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E")}
@media (hover:hover){.kq-xoa:not(.sap):hover{color:#ff7584;background:rgba(255,59,79,.1)}}
.kq-xoa.sap{padding:0 11px 0 9px;background:var(--len);color:#fff;box-shadow:0 4px 14px -4px rgba(255,59,79,.8)}
.kq-dong:has(.kq-xoa.sap){border-color:rgba(255,59,79,.55)}
.loi-xoa{color:#ff7a87}
.kqt{max-width:min(100%,260px);overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--o2);color:var(--chu2)}
.kqt.tot{background:rgba(47,214,107,.13);color:#5fe08f;box-shadow:0 0 0 1px rgba(47,214,107,.25) inset}
.kqt.xau{background:rgba(255,59,79,.13);color:#ff7584;box-shadow:0 0 0 1px rgba(255,59,79,.25) inset}
.kq-hang{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;min-width:0;max-width:100%}
.kq-luc-ten{font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--chu3)}
.kq-phu.kq-luc{margin-top:6px}
.kq-phu.kq-luc .kq-luc-ten{flex-basis:100%}
@media (max-width:519px){
  .kq-dong{grid-template-columns:var(--ct) minmax(0,1fr) auto}
  .kq-dong::after{justify-self:center}
  .kq-xoa{grid-column:3;grid-row:2}
  .kq-gio{grid-row:1/3}
  .kq-ra{grid-column:2;align-items:stretch;margin-top:6px}
  .kq-hang{justify-content:flex-start}
}
.trong{margin:12px 4px;padding:44px 20px;border-radius:var(--bo);border:1px dashed var(--vien2);background:rgba(255,255,255,.015);text-align:center;color:var(--chu3)}
.trong b{display:block;color:var(--chu);font-size:15px;font-weight:600;margin-bottom:6px}
.quay{width:34px;height:34px;margin:56px auto;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 25%,var(--lam) 70%,var(--tim));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:quay .8s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}


/* Điện thoại: dáng app. Tab xuống đáy (gần ngón cái) có biểu tượng, chừa tai thỏ và thanh vuốt,
   chạm vào thẻ, nút thì lún nhẹ. */
.tab[data-tab="theo"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.tab[data-tab="het"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.8 3.9 6 3.9 9.5s-1.3 6.7-3.9 9.5c-2.6-2.8-3.9-6-3.9-9.5S9.4 5.3 12 2.5Z'/%3E%3C/svg%3E")}
.tab[data-tab="kq"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V11M10 20V4M16 20v-6M22 20H2'/%3E%3C/svg%3E")}
@media (max-width:639px){
  .tren{padding-top:env(safe-area-inset-top)}
  .tren-hang{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .trang{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;gap:2px;margin:0;padding:5px max(8px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border:0;border-top:1px solid var(--vien);border-radius:0;
    background:rgba(9,11,17,.88);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 -10px 30px -12px rgba(0,0,0,.8)}
  .tab,.tab.on{position:relative;isolation:isolate;flex-direction:column;gap:4px;height:54px;padding:0 4px;border-radius:14px;background:none;box-shadow:none;color:var(--chu3);font-size:11px;font-weight:600;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .tab::before{content:"";flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:transform .2s}
  .tab::after{content:"";position:absolute;z-index:-1;top:3px;left:50%;width:58px;height:30px;margin-left:-29px;border-radius:15px;background:rgba(79,124,255,.2);box-shadow:0 0 18px -4px rgba(79,124,255,.6);opacity:0;transform:scaleX(.5);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
  .tab.on{color:#fff}
  .tab.on::before{background:linear-gradient(180deg,#a9c0ff,#6f95ff)}
  .tab.on::after{opacity:1;transform:none}
  .tab b,.tab.on b{position:absolute;top:2px;left:calc(50% + 7px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:10.5px;line-height:18px;background:var(--o2);color:var(--chu2);box-shadow:0 0 0 2px #0b0d14}
  .tab.on b{background:linear-gradient(180deg,#5b87ff,#3d66f0);color:#fff}
  .tab b:empty{display:none}
  /* Thẻ trận: giờ thành một dòng trên cùng, nhãn bậc báo ở góc phải; bỏ cột giờ bên trái để tên đội
     rộng thêm, tên thường đứng yên đủ chữ thay vì bị cắt rồi chạy. */
  .tran{grid-template-columns:minmax(0,1fr) var(--c2) var(--c3);grid-template-rows:24px repeat(2,var(--cao)) auto auto;padding-top:8px}
  .gio{grid-row:1;grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:7px;padding:0 0 0 12px;border-right:0}
  .gio b{font-size:14px}
  .doi{padding-left:12px}
  .ghim{width:28px;height:24px;margin:0 0 0 -4px}
  /* Tên đội dài xuống tối đa hai dòng trong ô cao 38px, đứng yên, thay vì chạy chữ. */
  .doi .ten{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:13px;line-height:16px}
  .x12,.dai{grid-column:1/-1;padding-left:12px}
  .tran .the.bao{position:absolute;top:8px;right:var(--le)}
  .dks{gap:4px}
  .dk{gap:3px;padding:0 6px}
  .vach{width:26px}
  /* Tên giải được cả dòng: ô kèo đã tự ghi "-1", "Tài 3" nên bỏ nhãn cột. */
  .giai-dau{grid-template-columns:minmax(0,1fr)}
  .giai-dau .cot{display:none}
  /* Tab Theo dõi đã mở đầu bằng phần "Đang chạm mốc", trùng dải cảnh báo: ẩn dải để thẻ trận lên sớm. */
  body[data-xem="theo"] .canh-bao,body[data-xem="hd"] .canh-bao{display:none}
  /* Ở các tab khác dải chỉ giữ 2 trận bậc cao nhất, còn lại gom một dòng dẫn sang Theo dõi. */
  .canh-bao .cb-dong:nth-child(n+4){display:none}
  .cb-them{display:block;width:calc(100% + 16px);min-height:40px;margin:0 -8px;padding:0 8px;border:0;border-top:1px solid var(--vien);background:none;color:var(--chu2);font-size:12.5px;font-weight:600;text-align:left}
  /* Lề đều 10px hai bên cho mọi khối; dải ô Kết quả vuốt sát mép màn hình. */
  main{padding:0 10px}
  .nhac,.canh-bao,.tim{margin-left:10px;margin-right:10px}
  .kq-loc{margin:12px 0 10px}
  .trong{margin:12px 0}
  .kq-luoi{margin:0 -10px;padding:2px 10px 4px;scroll-padding:0 10px}
  .phan-dau,.ghi,.kq-dau{margin-left:2px;margin-right:2px}
  /* Tên giải thành một dòng nhãn nhẹ thay vì thanh có viền: đỡ rối, thẻ trận nổi hơn. */
  .giai{margin-top:16px}
  .phan .giai+.giai{margin-top:16px}
  .giai-dau{height:28px;margin-bottom:4px;padding:0 2px;border:0;background:none;box-shadow:none}
  .giai-ten{gap:7px;color:var(--chu2);font-size:12.5px}
  .giai-ten img,.giai-ten .logo-giai{width:18px;height:18px;padding:1px;box-shadow:none}
  /* Cả thẻ đã bấm được để xem biến động: cuối thẻ chỉ còn mũi tên, không chiếm thêm dòng. */
  .the.bd-mo{display:inline-flex;align-items:center;font-size:0;padding:0 4px 0 8px}
  .the.bd-mo::after{content:"";width:7px;height:7px;border:solid var(--chu3);border-width:1.6px 1.6px 0 0;transform:rotate(45deg)}
  .dai{padding-bottom:8px}
  /* Bảng biến động: tên đội dài xuống hai dòng thay vì cụt. */
  .bd .bd-doi b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:15px;text-align:center}
  .bd .trong{margin:12px}
  /* Kết quả: nhãn bậc lên dòng riêng, tên trận được cả bề ngang; hàng lọc một dòng, nút tải chỉ còn biểu tượng. */
  .kq-tran{flex-direction:column;align-items:flex-start;gap:5px}
  .kq-tran b,.kq-chu{max-width:100%;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35}
  .kq-gio{font-size:11px;line-height:1.35;padding:0 2px}
  .kq-loc{flex-wrap:nowrap;gap:5px}
  .kq-loc button{flex:1 1 auto;min-width:0;padding:0 8px;white-space:nowrap}
  .kq-tai{flex:none;width:36px;height:36px;margin-left:0;padding:0;gap:0;justify-content:center;font-size:0}
  .kq-tai::before{width:16px;height:16px}
  .kq-loc .kq-chon{flex:none;width:36px;padding:0;justify-content:center;gap:0;font-size:0}
  .kq-ngay{margin:0 0 10px}
  .kq-ngay-o,.kq-lich{max-width:none;width:100%}
  @media (max-width:359px){.kq-loc button{padding:0 5px;font-size:12px}.luat-nut .bac{display:none}}
  /* Lời nhắc bật thông báo: gọn hai dòng. */
  .nhac{font-size:12px;line-height:1.4;padding-left:12px}
  .nhac-bat{padding:0 12px}
}
@media (hover:none){
  .tran[data-bd],.kq-dong[data-mo],.cb-dong,.kq-the{transition:transform .12s ease-out,background .15s}
  .tran[data-bd]:active,.kq-dong[data-mo]:active,.cb-dong:active,.kq-the:active{transform:scale(.985)}
  .chuong:active,.tab:active::before,.kq-loc button:active,.kq-tai:active,.hd-chon:active,.hd-dem button:active{transform:scale(.92)}
  .chuong,.kq-loc button,.kq-tai,.hd-chon,.hd-dem button{transition:transform .1s}
}

/* Biến động kèo: bảng trượt lên từ dưới, đầu là trận, dưới là kèo chính mỗi lần đổi. */
html.khoa-cuon{overflow:hidden}
.tran[data-bd]{cursor:pointer}
@media (hover:hover){.tran[data-bd]:hover{filter:brightness(1.12)}}
.the.bd-mo{margin-left:auto;padding-right:2px;color:var(--chu3)}
.tran[data-bd]:hover .bd-mo{color:var(--chu)}
.bd-nut{padding:0;border:0;background:none;color:#7f9bff;font-size:12px}
.bd-nen{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.62);animation:bd-hien .2s ease-out}
.bd{position:fixed;z-index:21;left:0;right:0;bottom:0;max-width:600px;height:min(94dvh,960px);margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px 14px 0 0;background:linear-gradient(180deg,#1d2233 0,#121318 240px);box-shadow:0 -12px 40px rgba(0,0,0,.55);animation:bd-len .26s cubic-bezier(.2,.8,.2,1)}
@media (min-width:640px){.bd{top:4vh;bottom:4vh;height:auto;border-radius:12px;animation-name:bd-hien}}
@keyframes bd-len{from{transform:translate3d(0,100%,0)}}
@keyframes bd-hien{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.bd,.bd-nen{animation:none}}
.bd-tran{flex:none;padding:16px 16px 18px;text-align:center}
.bd-giai{color:#fff;font-size:15px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-gio{margin-top:2px;color:var(--chu3);font-size:13px;font-variant-numeric:tabular-nums}
.bd-trang{min-height:20px;color:var(--chu2);font-size:13px}
.bd-trang .bd-song{color:var(--len);font-weight:500}
.bd-trang .dong-ho{color:#fff;font-weight:500}
.bd-hang{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin-top:12px}
.bd-doi{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.bd-doi img,.bd-doi .chu-dau{width:56px;height:56px;border-radius:50%;object-fit:contain}
.bd-doi .chu-dau{font-size:22px;font-weight:500}
.bd-doi b{max-width:100%;color:#fff;font-size:16px;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-ty{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:90px}
.bd-ty b{color:#fff;font:600 44px/1 Barlow,Roboto,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-ty b.vs{color:var(--chu3);font-size:22px}
.bd-ty small{color:var(--chu3);font:500 14px/1 Barlow,Roboto,sans-serif}
.bd-the{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border-radius:14px 14px 0 0;background:var(--khoi)}
.bd-the::before{content:"";position:absolute;top:7px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:var(--lam)}
.bd-keo{flex:none;display:flex;align-items:center;gap:10px;padding:20px 8px 10px 16px}
.bd-keo>b{flex:1;color:#fff;font-size:18px;font-weight:500}
.bd-chon{display:flex;padding:2px;border-radius:16px;background:var(--o)}
.bd-chon button{padding:5px 12px;border:0;border-radius:14px;background:none;color:var(--chu2);font-size:12px;font-weight:500}
.bd-chon button.on{background:var(--lam);color:#fff}
.bd-x{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--chu3)}
.bd-x:hover{color:#fff}
.bd-luoi{display:grid;grid-template-columns:62px 52px minmax(0,1fr) minmax(0,1fr)}
.bd-luoi>span{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;border-right:1px solid var(--vien)}
.bd-luoi>span:last-child{border-right:0}
.bd-cot{flex:none;height:42px;border-bottom:1px solid var(--vien);color:var(--chu2);font-size:14px;font-weight:500}
.bd-cot>span{display:block;align-self:center;padding:0 6px;border-right:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:42px}
.bd-cot svg{vertical-align:-4px}
.bd-cuon{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
.bd-dong{height:46px;border-bottom:1px solid var(--vien);font:500 15px/1 Barlow,Roboto,sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.bd-ph{color:var(--len)}
.bd-luoi>.bd-ngay{grid-column:1/3;color:var(--chu2);font-size:14px}
.bd-li{font-style:normal;color:var(--cam);white-space:nowrap}
.bd-li.doi{padding:2px 5px;margin:-2px -5px;border-radius:3px;background:rgba(255,159,26,.16)}
.bd-od{font-weight:500;color:#fff}
.bd-od.len{color:var(--len)}
.bd-od.xuong{color:var(--xuong)}
@media (max-width:374px){.bd-luoi{grid-template-columns:52px 44px minmax(0,1fr) minmax(0,1fr)}.bd-luoi>span{gap:6px}.bd-dong{font-size:14px}}

/* Khung báo nổi: thẻ trượt xuống đầu màn hình, màu theo bậc; thanh dưới đáy đếm lúc tự tắt. */
/* Nằm dưới thanh trên để không che đồng hồ, nút hướng dẫn và chuông; màn rộng thì ở góc phải như
   thông báo của máy tính. */
.noi-hop{position:fixed;z-index:15;top:calc(68px + env(safe-area-inset-top));left:50%;width:min(420px,calc(100% - 16px));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media (min-width:640px){.noi-hop{top:118px}}
@media (min-width:1240px){.noi-hop{top:16px;left:auto;right:16px;width:380px;transform:none}}
.noi{--ac:var(--lam);position:relative;overflow:hidden;padding:11px 12px 12px 14px;border-radius:14px;pointer-events:auto;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;
  border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 22%,transparent),transparent 60%),rgba(16,19,27,.94);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 18px 40px -12px rgba(0,0,0,.85),0 0 30px -10px var(--ac);
  animation:noi-vao .42s cubic-bezier(.2,1.2,.3,1);transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .25s,margin .25s cubic-bezier(.2,.8,.2,1)}
.noi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac);box-shadow:0 0 14px var(--ac)}
.noi.k12{--ac:var(--cam)}
.noi.k123{--ac:var(--len);animation:noi-vao .42s cubic-bezier(.2,1.2,.3,1),noi-rung .5s .42s ease-in-out}
.noi.xiu{--ac:var(--hong)}
/* Chồng thẻ như iPhone: thẻ mới nhất phía trước, thẻ cũ thu nhỏ nằm sau chỉ ló mép; tắt thẻ trước
   thì thẻ sau lên. Máy tính rê chuột vào thì xoè cả chồng. */
.noi:nth-child(2){z-index:-1;margin-top:-123px;transform:scale(.94);transform-origin:50% 0;opacity:.8}
.noi:nth-child(3){z-index:-2;margin-top:-123px;transform:scale(.88);transform-origin:50% 0;opacity:.6}
.noi:nth-child(n+2) .noi-thoi{opacity:0}
@media (hover:hover){.noi-hop:hover .noi{margin-top:0;transform:none;opacity:1}}
.noi.di{opacity:0;transform:translateY(-24px) scale(.96)}
.noi-dau{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.noi-phut{flex:1;font:600 12.5px/1 Barlow,Roboto,sans-serif;color:var(--chu2)}
.noi-x{width:30px;height:30px;margin:-6px -6px -6px 0;border:0;border-radius:50%;background:none;color:var(--chu3);font-size:20px;line-height:1}
@media (hover:hover){.noi-x:hover{color:#fff;background:rgba(255,255,255,.08)}}
.noi-doi{display:flex;align-items:center;gap:10px;line-height:30px}
.noi-doi span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:15px;font-weight:600}
.noi-doi b{font:700 23px/1 Barlow,Roboto,sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.noi-chan{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12px;color:var(--chu2)}
.noi-chan span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.noi-xem{flex:none;color:#fff;font-weight:600}
.noi-thoi{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ac);opacity:.8;transform-origin:left;animation:noi-het linear forwards}
.noi.cho .noi-thoi,.noi:active .noi-thoi{animation-play-state:paused}
@keyframes noi-vao{from{opacity:0;transform:translateY(-110%) scale(.94)}}
@keyframes noi-rung{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes noi-het{to{transform:scaleX(0)}}
/* ĐK Đỏ: mép màn hình loé đỏ hai nhịp. */
.loe{position:fixed;inset:0;z-index:14;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 3px var(--len),inset 0 0 80px rgba(255,59,79,.55)}
.loe.on{animation:loe 1.8s ease-out}
@keyframes loe{12%,50%{opacity:1}31%{opacity:.25}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.noi,.noi.k123,.loe.on{animation:none}.noi-thoi{display:none}}
/* Nghe thử ở trang hướng dẫn. */
.hd-nghe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 0 12px}
.hd-nghe>span{font-size:12px;color:var(--chu2)}
.hd-nghe>div{display:flex;flex-wrap:wrap;gap:6px}
.hd-nghe .bac{height:34px;padding:0 12px;border:0;border-radius:var(--bo2);font-size:11.5px}
.hd-nghe .bac::before{content:"";width:13px;height:13px;margin-right:6px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4zM16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4zM16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Tab Vé: ô tiền, thống kê, dòng vé (chạy thử) */
.ve-tien-luoi,.ve-tk-luoi{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:620px){.ve-tien-luoi .kq-the{flex:0 0 min(46vw,190px)}}
.ve-so{display:block;margin-top:8px;font:700 23px/1.05 Barlow,Roboto,sans-serif;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.5px;word-break:break-word}
.kq-the.ve-tien.tot .ve-so{color:#5fe08f}
.kq-the.ve-tien.xau .ve-so{color:#ff7584}
.kq-so .ve-tot b{color:#5fe08f}
.kq-so .ve-xau b{color:#ff7584}
.ve-dong{grid-template-columns:var(--ct) minmax(0,1fr) auto;cursor:default}
.ve-dong::after{display:none}
@media (max-width:520px){.ve-dong{grid-template-columns:var(--ct) minmax(0,1fr)}.ve-dong .kq-ra{grid-column:2;align-items:stretch;margin-top:6px}}
.ve-nut{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.ve-nut .bd-nut{cursor:pointer}
@media (hover:hover){.ve-nut .bd-nut:hover{text-decoration:underline}}