/* World Cup 2026 bracket dark cup v9 - clean, balanced, dark default */
:root{
    --bk-page:#050816;
    --bk-card:#0b1224;
    --bk-stage:#071225;
    --bk-node:#0f1b32;
    --bk-node-2:#111f3a;
    --bk-border:rgba(148,163,184,.22);
    --bk-line:rgba(148,163,184,.34);
    --bk-line-strong:rgba(250,204,21,.42);
    --bk-text:#f8fafc;
    --bk-muted:#94a3b8;
    --bk-soft:#16233d;
    --bk-gold:#facc15;
    --bk-blue:#0ea5e9;
    --bk-orange:#ff5a1f;
    --bk-shadow:0 20px 70px rgba(0,0,0,.36);
}
html[data-theme="light"]{
    --bk-page:#f6f7fb;
    --bk-card:#ffffff;
    --bk-stage:#ffffff;
    --bk-node:#ffffff;
    --bk-node-2:#fbfcfe;
    --bk-border:#e6e9ef;
    --bk-line:#e1e5ec;
    --bk-line-strong:#cfd5dd;
    --bk-text:#101827;
    --bk-muted:#8b95a5;
    --bk-soft:#f3f5f8;
    --bk-shadow:0 14px 40px rgba(15,23,42,.07);
}
.bracket-page-v3{
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 8%,rgba(255,90,31,.16),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(14,165,233,.14),transparent 30%),
        linear-gradient(135deg,var(--bk-page),#091426 58%,#050816);
    color:var(--bk-text);
    overflow-x:hidden;
}
html[data-theme="light"] .bracket-page-v3{
    background:var(--bk-page);
}
.bracket-page-v3:before,
.bracket-hero-v3:before,
.bracket-fire-v3{
    display:none!important;
}
.bracket-hero-v3{
    min-height:auto!important;
    padding:18px 16px 10px;
    display:block;
    background:transparent!important;
    overflow:visible;
}
.bracket-cup-v3{
    display:none!important;
}
.bracket-nav-v3{
    position:static!important;
    transform:none!important;
    width:min(1180px,100%)!important;
    margin:0 auto 14px!important;
    display:flex;
    justify-content:center!important;
    align-items:center!important;
    gap:12px!important;
}
.bracket-nav-v3 a,
.bracket-theme-v3{
    min-height:40px!important;
    padding:0 15px!important;
    border-radius:999px!important;
    border:1px solid var(--bk-border)!important;
    background:rgba(255,255,255,.08)!important;
    color:var(--bk-text)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
    backdrop-filter:blur(14px)!important;
    font-weight:1000!important;
}
html[data-theme="light"] .bracket-nav-v3 a,
html[data-theme="light"] .bracket-theme-v3{
    background:#fff!important;
    box-shadow:0 7px 18px rgba(15,23,42,.07)!important;
    backdrop-filter:none!important;
}
.bracket-title-v3{
    width:min(1180px,100%)!important;
    margin:0 auto!important;
    padding:18px 0 16px!important;
    text-align:center!important;
    color:var(--bk-text)!important;
}
.bracket-title-v3>span{display:none!important}
.bracket-title-v3 h1{
    margin:0!important;
    font-size:clamp(42px,6.2vw,88px)!important;
    line-height:1.04!important;
    letter-spacing:-.055em!important;
    font-weight:1000!important;
    color:transparent!important;
    background:linear-gradient(90deg,#fff 0%,#ffe8a6 34%,#facc15 58%,#ff7a18 82%,#fff 100%)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    filter:drop-shadow(0 12px 26px rgba(250,204,21,.16))!important;
}
html[data-theme="light"] .bracket-title-v3 h1{
    color:var(--bk-text)!important;
    background:none!important;
    -webkit-background-clip:initial!important;
    background-clip:initial!important;
    filter:none!important;
}
.bracket-title-v3 p{
    margin:8px 0 0!important;
    color:var(--bk-muted)!important;
    letter-spacing:.13em!important;
    font-size:13px!important;
    font-weight:1000!important;
}
.bracket-title-v3 button{
    margin-top:16px!important;
    border:1px solid rgba(250,204,21,.25)!important;
    border-radius:999px!important;
    padding:12px 20px!important;
    background:linear-gradient(135deg,#ff7a18,#e11d48)!important;
    color:#fff!important;
    box-shadow:0 16px 34px rgba(225,29,72,.22)!important;
    font-weight:1000!important;
}
.bracket-main-v3{
    margin:0!important;
    padding:0 12px 44px!important;
}
.bracket-card-v3{
    width:min(1540px,100%)!important;
    margin:0 auto!important;
    border-radius:24px!important;
    border:1px solid var(--bk-border)!important;
    background:
        radial-gradient(circle at 50% 0%,rgba(250,204,21,.08),transparent 24%),
        linear-gradient(145deg,rgba(15,27,54,.92),rgba(7,18,37,.96))!important;
    box-shadow:var(--bk-shadow)!important;
    overflow:hidden!important;
}
html[data-theme="light"] .bracket-card-v3{
    background:var(--bk-card)!important;
}
.bracket-card-head-v3{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:22px 24px 10px!important;
    border-bottom:1px solid rgba(148,163,184,.10)!important;
    text-align:left!important;
}
html[data-theme="light"] .bracket-card-head-v3{
    border-bottom:0!important;
}
.bracket-card-head-v3 span{display:none!important}
.bracket-card-head-v3 h2{
    margin:0!important;
    font-size:clamp(24px,2.7vw,40px)!important;
    line-height:1.08!important;
    letter-spacing:-.028em!important;
    color:var(--bk-text)!important;
    background:none!important;
    -webkit-background-clip:initial!important;
    background-clip:initial!important;
    font-weight:1000!important;
}
.bracket-card-head-v3 p{
    margin:0!important;
    color:var(--bk-muted)!important;
    font-size:12px!important;
    font-weight:900!important;
    text-align:right;
}
.bracket-desktop-stage{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:12px 12px 24px;
    scrollbar-width:thin;
}
.bracket-stage{
    position:relative;
    width:1480px;
    height:660px;
    margin:0 auto;
    background:var(--bk-stage);
    border-radius:18px;
}
.bracket-svg-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}
.bracket-svg-lines path{
    fill:none;
    stroke:var(--bk-line);
    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:1;
    filter:none;
}
.bracket-trophy{
    position:absolute;
    left:50%;
    top:305px;
    transform:translate(-50%,-50%);
    z-index:3;
    text-align:center;
    color:var(--bk-muted);
    font-weight:1000;
    letter-spacing:.13em;
    font-size:12px;
    pointer-events:none;
}
.bracket-cup-center{
    display:block;
    width:94px;
    height:auto;
    margin:0 auto 8px;
    opacity:.88;
    filter:drop-shadow(0 12px 30px rgba(250,204,21,.30)) saturate(1.18);
}
html[data-theme="light"] .bracket-cup-center{
    opacity:.42;
    filter:grayscale(1) drop-shadow(0 8px 18px rgba(15,23,42,.10));
}
.bracket-match{
    position:absolute;
    width:86px;
    height:70px;
    padding:7px 6px;
    border-radius:10px;
    border:1px solid var(--bk-border);
    background:linear-gradient(180deg,var(--bk-node),var(--bk-node-2));
    box-shadow:0 7px 18px rgba(0,0,0,.18);
    cursor:pointer;
    z-index:4;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
html[data-theme="light"] .bracket-match{
    box-shadow:0 2px 8px rgba(15,23,42,.025);
}
.bracket-match:hover{
    transform:translateY(-2px);
    border-color:var(--bk-line-strong);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
}
html[data-theme="light"] .bracket-match:hover{
    box-shadow:0 10px 26px rgba(15,23,42,.10);
    background:#fbfcfe;
}
.bracket-match.is-live{border-color:#fb7185}
.bracket-match.is-finished{border-color:#22c55e}
.bracket-card-icons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    height:18px;
    margin-bottom:3px;
}
.bracket-crest-mini{
    width:18px;
    height:18px;
    border-radius:999px;
    object-fit:cover;
    background:rgba(255,255,255,.12);
}
.bracket-shield{
    width:14px;
    height:16px;
    display:inline-block;
    opacity:.88;
    background:rgba(226,232,240,.22);
    clip-path:polygon(50% 0,92% 16%,82% 73%,50% 100%,18% 73%,8% 16%);
}
html[data-theme="light"] .bracket-shield{
    background:#dfe3e8;
    opacity:.74;
}
.bracket-code-row{
    height:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    align-items:center;
    color:var(--bk-text);
    font-size:12px;
    line-height:1.05;
    font-weight:1000;
    text-align:center;
}
.bracket-code{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.bracket-date{
    margin-top:4px;
    color:var(--bk-muted);
    font-size:11px;
    line-height:1;
    font-weight:900;
    text-align:center;
}
.bracket-chip{
    position:absolute;
    left:50%;
    bottom:-12px;
    transform:translateX(-50%);
    display:inline-flex;
    min-height:16px;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border-radius:4px;
    color:#111827;
    font-size:9px;
    font-weight:1000;
    white-space:nowrap;
    z-index:5;
}
.bracket-chip.final{background:#fde047}
.bracket-chip.third{background:#0ea5e9;color:#fff}
.bracket-status,
.bracket-team,
.bracket-match-top,
.bracket-match-foot,
.bracket-round-label,
.bracket-flag,
.bracket-placeholder-flag,
.bracket-team-name,
.bracket-team-score{display:none!important}
.bracket-empty-round,
.bracket-loading,
.bracket-error{
    min-height:320px;
    display:grid;
    place-items:center;
    color:var(--bk-muted);
    font-weight:900;
}
.bracket-mobile-tabs{display:none!important}
.bracket-mobile-tree{display:none}
.bracket-footer-v3{
    border-top:1px solid var(--bk-border)!important;
    background:rgba(5,8,22,.86)!important;
    color:var(--bk-muted)!important;
}
html[data-theme="light"] .bracket-footer-v3{
    background:#fff!important;
}

/* Mobile: sơ đồ dọc, clean, tối ưu đọc trên điện thoại */
@media(max-width:900px){
    .bracket-hero-v3{padding:12px 10px 4px}
    .bracket-nav-v3{justify-content:center!important;flex-wrap:wrap;margin-bottom:8px!important}
    .bracket-nav-v3 a,.bracket-theme-v3{font-size:12px!important;min-height:34px!important;padding:0 10px!important}
    .bracket-title-v3{text-align:center!important;padding:12px 0 8px!important}
    .bracket-title-v3 h1{font-size:36px!important;letter-spacing:-.045em!important}
    .bracket-title-v3 p{font-size:11px!important}
    .bracket-title-v3 button{margin-top:10px!important;padding:9px 14px!important;font-size:12px}
    .bracket-main-v3{padding:0 6px 28px!important}
    .bracket-card-v3{border-radius:18px!important}
    .bracket-card-head-v3{padding:14px 12px 6px!important;display:block!important;text-align:center!important}
    .bracket-card-head-v3 h2{font-size:23px!important;line-height:1.1!important}
    .bracket-card-head-v3 p{text-align:center!important;margin-top:6px!important}
    .bracket-desktop-stage{
        overflow:visible!important;
        padding:8px 8px 14px!important;
    }
    .bracket-stage{
        width:100%;
        height:auto;
        min-height:600px;
        margin:0;
        background:transparent;
    }
    .bracket-stage>.bracket-svg-lines,
    .bracket-stage>.bracket-match,
    .bracket-stage>.bracket-trophy{display:none!important}
    .bracket-mobile-tree{
        display:block;
        position:relative;
        padding:6px 0 12px;
        background:transparent;
    }
    .bracket-mobile-tree:before{
        content:"";
        position:absolute;
        left:50%;
        top:46px;
        bottom:106px;
        width:1px;
        background:var(--bk-line);
        transform:translateX(-50%);
        z-index:1;
    }
    .bracket-mobile-row{
        position:relative;
        z-index:2;
        display:grid;
        gap:10px;
        justify-items:center;
        margin:12px auto;
    }
    .bracket-mobile-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .bracket-mobile-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));width:70%}
    .bracket-mobile-row.cols-1{grid-template-columns:1fr;width:42%}
    .bracket-mobile-card{
        position:relative;
        width:72px;
        height:66px;
        padding:6px 5px;
        border-radius:9px;
        border:1px solid var(--bk-border);
        background:linear-gradient(180deg,var(--bk-node),var(--bk-node-2));
        box-shadow:0 6px 16px rgba(0,0,0,.16);
        cursor:pointer;
    }
    html[data-theme="light"] .bracket-mobile-card{
        box-shadow:0 2px 7px rgba(15,23,42,.025);
    }
    .bracket-mobile-card:hover{border-color:var(--bk-line-strong)}
    .bracket-mobile-card .bracket-card-icons{height:17px;gap:10px;margin-bottom:3px}
    .bracket-mobile-card .bracket-crest-mini{width:17px;height:17px}
    .bracket-mobile-card .bracket-shield{width:13px;height:15px}
    .bracket-mobile-card .bracket-code-row{font-size:11px;height:20px}
    .bracket-mobile-card .bracket-date{font-size:10px;margin-top:3px}
    .bracket-mobile-center{
        position:relative;
        z-index:2;
        width:100%;
        display:grid;
        grid-template-columns:1fr 96px 1fr;
        align-items:center;
        gap:12px;
        margin:18px 0 14px;
    }
    .bracket-mobile-trophy{
        text-align:center;
        color:var(--bk-muted);
        font-size:10px;
        font-weight:1000;
        letter-spacing:.12em;
    }
    .bracket-cup-mobile{
        display:block;
        width:58px;
        height:auto;
        margin:0 auto 5px;
        opacity:.9;
        filter:drop-shadow(0 10px 20px rgba(250,204,21,.28)) saturate(1.16);
    }
    html[data-theme="light"] .bracket-cup-mobile{
        opacity:.45;
        filter:grayscale(1) drop-shadow(0 6px 14px rgba(15,23,42,.10));
    }
    .bracket-mobile-chip{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);font-size:8px;font-weight:1000;padding:1px 4px;border-radius:4px;white-space:nowrap}
    .bracket-mobile-chip.final{background:#fde047;color:#111827}
    .bracket-mobile-chip.third{background:#0ea5e9;color:#fff}
}
@media(max-width:430px){
    .bracket-mobile-row{gap:7px;margin:10px auto}
    .bracket-mobile-row.cols-2{width:76%}
    .bracket-mobile-row.cols-1{width:48%}
    .bracket-mobile-card{width:66px;height:62px;padding:5px 4px}
    .bracket-mobile-card .bracket-code-row{font-size:10px}
    .bracket-mobile-card .bracket-date{font-size:9px}
    .bracket-mobile-center{grid-template-columns:1fr 82px 1fr;gap:8px}
    .bracket-cup-mobile{width:52px}
}