/* ============================================================
   Theme kieu MetaTFT.gg: nen navy dam, panel xanh than, accent cam.
   ============================================================ */
:root {
    --bg: #0b141f;
    --bg-panel: #101f2e;
    --bg-panel-2: #16293c;
    --bg-inset: #0d1927;
    --border: #223950;
    --border-soft: #1b3044;
    --text: #e8eef4;
    --text-dim: #8fa2b5;
    --accent: #e8833a;
    --accent-soft: rgba(232, 131, 58, 0.14);
    --blue: #3d76c9;
    --red: #d63c47;
    --gold: #f2b84b;

    --tier-s: #e84057;
    --tier-a: #f2a03d;
    --tier-b: #e8c855;
    --tier-c: #57b8e8;

    /* Mau vien theo gia tien tuong (chuan TFT) */
    --cost-1: #7d8b99;
    --cost-2: #24ab6b;
    --cost-3: #2f7de1;
    --cost-4: #c440da;
    --cost-5: #f5a02c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

.container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 20px;
}

a { color: inherit; text-decoration: none; }
img { -webkit-user-drag: none; }

/* ---------- Header ---------- */
.site-header {
    background: linear-gradient(180deg, #101f2e 0%, #0d1927 100%);
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 58px;
}

.brand {
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.brand span { color: var(--accent); }

.brand-logo { height: 34px; display: block; }

.main-nav { display: flex; gap: 2px; flex: 1; }

.main-nav a {
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.main-nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

.main-nav a.active {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 6px 6px 0 0;
}

.patch-picker select,
.lang-picker {
    background: var(--bg-inset);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
}

main.container { padding-top: 26px; padding-bottom: 60px; min-height: 70vh; }

/* ---------- Tieu de ---------- */
.page-title {
    font-size: 1.5rem;
    margin: 0 0 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-weight: 800;
}

.page-subtitle { color: var(--text-dim); margin: 0 0 22px; font-size: 0.93rem; }

/* Tieu de section kieu MetaTFT: in hoa + gach chan cam */
.section-title {
    font-size: 1.02rem;
    margin: 30px 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    padding-bottom: 8px;
    position: relative;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
}

.section-title.centered { text-align: center; }
.section-title.centered::after { left: 50%; transform: translateX(-50%); }

.empty-state {
    background: var(--bg-panel);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 24px;
    color: var(--text-dim);
}

.empty-state code { background: rgba(255, 255, 255, 0.08); padding: 1px 5px; border-radius: 4px; }

.hint-text { color: var(--text-dim); font-size: 0.83rem; margin: 0 0 14px; }

/* ---------- Tier badge ---------- */
.tier-badge {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.25rem;
    color: #10161d;
    flex-shrink: 0;
}

.tier-badge.sm { width: 30px; height: 30px; font-size: 0.95rem; border-radius: 6px; }

.tier-S { background: var(--tier-s); color: #fff; }
.tier-A { background: var(--tier-a); }
.tier-B { background: var(--tier-b); }
.tier-C { background: var(--tier-c); }

/* ---------- Trait chip (icon + so tuong) ---------- */
.trait-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 2px 7px 2px 3px;
    font-size: 0.78rem;
    font-weight: 700;
}

.trait-chip img { width: 18px; height: 18px; filter: brightness(1.35); }

.trait-chip .n { color: var(--text); }

.trait-chip.t2 { background: #3a3325; border-color: #5c4d2c; }      /* dong   */
.trait-chip.t3 { background: #333c44; border-color: #56646f; }      /* bac    */
.trait-chip.t4 { background: #453a1c; border-color: #7a6427; }      /* vang   */

/* Trait pill co ten (dung o header chi tiet + trang cu) */
.trait-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 3px 10px 3px 4px;
    font-size: 0.82rem;
    font-weight: 600;
}

.trait-pill img { width: 20px; height: 20px; filter: brightness(1.3); }

.trait-pill-lg { padding: 5px 14px 5px 6px; font-size: 1.05rem; }
.trait-pill-lg img { width: 26px; height: 26px; }

/* ---------- Chan dung tuong (vien theo gia) ---------- */
.unit-fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 52px;
    position: relative;
}

.unit-fig .stars {
    height: 12px;
    font-size: 0.62rem;
    letter-spacing: -1px;
    color: var(--gold);
    line-height: 12px;
    text-shadow: 0 1px 2px #000;
}

.unit-fig .stars.s2 { color: #c9d6e3; }

.unit-portrait {
    width: 46px;
    height: 46px;
    border-radius: 6px;
    border: 2px solid var(--cost-1);
    background: var(--bg-inset);
    display: block;
    object-fit: cover;
}

.unit-fig .items {
    display: flex;
    gap: 1px;
    margin-top: -7px;
    z-index: 2;
}

.unit-fig .items img {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #000;
    background: #000;
}

.unit-fig .uname {
    margin-top: 3px;
    font-size: 0.62rem;
    color: var(--text-dim);
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cost-1 { border-color: var(--cost-1); }
.cost-2 { border-color: var(--cost-2); }
.cost-3 { border-color: var(--cost-3); }
.cost-4 { border-color: var(--cost-4); }
.cost-5 { border-color: var(--cost-5); }

/* ============================================================
   TIER LIST: hang comp mo rong duoc
   ============================================================ */
.tierlist-tools {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.tierlist-search {
    flex: 1;
    min-width: 220px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 9px 14px;
    font-size: 0.92rem;
}

.tierlist-search:focus { outline: none; border-color: var(--accent); }

.comp-list { display: flex; flex-direction: column; gap: 10px; }

.comp-row {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.comp-row:hover { border-color: var(--border); border-left-color: var(--accent); }
.comp-row.tier-row-S { border-left-color: var(--tier-s); }
.comp-row.tier-row-A { border-left-color: var(--tier-a); }
.comp-row.tier-row-B { border-left-color: var(--tier-b); }
.comp-row.tier-row-C { border-left-color: var(--tier-c); }

.comp-row-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.comp-row-info { width: 215px; flex-shrink: 0; }

.comp-row-name {
    font-weight: 800;
    font-size: 0.98rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comp-row-traits { display: flex; flex-wrap: wrap; gap: 4px; }

.comp-row-units {
    flex: 1;
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
}

.comp-row-units::-webkit-scrollbar { display: none; }

.comp-row-stats {
    display: grid;
    grid-template-columns: repeat(4, 62px);
    gap: 4px;
    flex-shrink: 0;
    text-align: center;
}

.comp-row-stats .stat-label {
    display: block;
    font-size: 0.62rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.comp-row-stats .stat-value { font-weight: 800; font-size: 0.95rem; }

.stat-good { color: #4cd08d; }
.stat-bad { color: #e86a6a; }

.comp-row-chevron {
    flex-shrink: 0;
    color: var(--text-dim);
    transition: transform 0.2s;
    font-size: 0.8rem;
}

.comp-row.open .comp-row-chevron { transform: rotate(180deg); }

/* Panel mo rong */
.comp-row-detail {
    display: none;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-inset);
    padding: 20px;
}

.comp-row.open .comp-row-detail { display: block; }

.comp-row-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.comp-row-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

/* Khoi phu trong panel mo rong: tuong dau tran + trang bi uu tien */
.comp-row-extra {
    border-top: 1px solid var(--border-soft);
    margin-top: 20px;
    padding-top: 18px;
}

/* ---------- Nut ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 7px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn-red { background: var(--red); }
.btn-red:hover { background: #e5525d; }
.btn-blue { background: var(--blue); }
.btn-blue:hover { background: #4f88da; }
.btn-ghost { background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--text-dim); }

/* ============================================================
   BAN CO HEX 4x7
   ============================================================ */
.hexboard-wrap { overflow-x: auto; }

.hexboard {
    --hex-w: 64px;
    --hex-h: 73px;
    display: flex;
    flex-direction: column;
    width: max-content;
    margin: 0 auto;
    padding: 4px 0;
}

.hexboard .hexrow {
    display: flex;
    gap: 5px;
    margin-top: calc(var(--hex-h) * -0.22);
}

.hexboard .hexrow:first-child { margin-top: 0; }
.hexboard .hexrow.offset { margin-left: calc((var(--hex-w) + 5px) / 2); }

.hex {
    width: var(--hex-w);
    height: var(--hex-h);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #14273a;
    position: relative;
    flex-shrink: 0;
}

.hex .hex-inner {
    position: absolute;
    inset: 2px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--bg-inset);
    overflow: hidden;
}

.hex.filled { background: var(--cost-1); }
.hex.filled.cost-1 { background: var(--cost-1); }
.hex.filled.cost-2 { background: var(--cost-2); }
.hex.filled.cost-3 { background: var(--cost-3); }
.hex.filled.cost-4 { background: var(--cost-4); }
.hex.filled.cost-5 { background: var(--cost-5); }

.hex .hex-inner img.unit {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hex .hex-stars {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: -1px;
    color: var(--gold);
    text-shadow: 0 1px 2px #000;
    z-index: 3;
}

.hex .hex-items {
    position: absolute;
    bottom: 7px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 1px;
    z-index: 3;
}

.hex .hex-items img {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.8);
}

.hex .hex-name {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.56rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px #000;
    z-index: 2;
    pointer-events: none;
}

.board-note { text-align: center; margin-top: 10px; }

.board-brand {
    text-align: center;
    color: var(--text-dim);
    letter-spacing: 0.25em;
    font-weight: 800;
    font-size: 0.78rem;
    margin-top: 12px;
    text-transform: uppercase;
    opacity: 0.5;
}

/* ============================================================
   TRANG CHI TIET COMP
   ============================================================ */
.comp-header {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.comp-header-info { flex: 1; min-width: 240px; }

.comp-header-name { font-size: 1.35rem; font-weight: 800; margin: 0 0 8px; }

.comp-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 18px 20px;
}

.panel + .panel { margin-top: 20px; }

.panel-title {
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    text-align: center;
    margin: 0 0 16px;
    padding-bottom: 8px;
    position: relative;
}

.panel-title::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
}

/* Chi so lon */
.statbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.statbar > div {
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
}

.statbar .stat-label {
    display: block;
    font-size: 0.66rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.statbar .stat-value { font-weight: 800; font-size: 1.1rem; }

/* Hai cot: tuong dau tran / trang bi uu tien */
.split-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.split-2 > div { padding: 0 16px; }
.split-2 > div:first-child { border-right: 1px solid var(--border-soft); padding-left: 0; }
.split-2 > div:last-child { padding-right: 0; }

.unit-strip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.item-flow { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }

.item-flow img { width: 38px; height: 38px; border-radius: 7px; border: 1px solid var(--border); }

.item-flow .arrow { color: var(--text-dim); font-size: 0.9rem; }

/* Tuong chu chot */
.key-units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.key-unit {
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px;
}

.key-unit-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 800;
}

.key-unit-head img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 2px solid var(--cost-1);
}

.key-unit-head .sub { display: block; font-size: 0.7rem; color: var(--text-dim); font-weight: 600; }

.key-unit-items { display: flex; flex-direction: column; gap: 8px; }

.key-unit-items .row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

.key-unit-items .row img { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--border); }

/* Sidebar */
.side-list { display: flex; flex-direction: column; gap: 8px; }

.side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.86rem;
    font-weight: 600;
}

.side-item img { width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0; }
.side-item img.round { border-radius: 50%; background: #223448; padding: 2px; filter: brightness(1.25); }

.side-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-item .pct { color: var(--text-dim); font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }

.side-item .cnt {
    background: var(--bg-panel-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    min-width: 24px;
    text-align: center;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 1px 4px;
    flex-shrink: 0;
}

/* ---------- Bang thong ke (champions/items/augments) ---------- */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    overflow: hidden;
}

.stats-table th, .stats-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    font-size: 0.9rem;
}

.stats-table th {
    color: var(--text-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-inset);
}

.stats-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.stats-table tbody tr:last-child td { border-bottom: none; }

.cell-entity { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.cell-entity img { width: 30px; height: 30px; border-radius: 6px; border: 2px solid var(--cost-1); }

.cell-items { display: flex; gap: 4px; }

.item-chip img { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--border); }

/* ---------- Cac khoi cu con dung o trang champion ---------- */
.comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.comp-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px 16px;
    display: block;
    transition: border-color 0.15s, transform 0.15s;
}

.comp-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.comp-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comp-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.comp-units { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.comp-stat-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}

.comp-stat-row > div { display: flex; flex-direction: column; align-items: center; }

.stat-label { font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.stat-value { font-weight: 700; font-size: 0.95rem; }

.comp-stat-row-lg {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 16px 6px;
    margin-bottom: 8px;
}

.comp-stat-row-lg .stat-value { font-size: 1.2rem; }

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }

.board-unit {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    display: block;
    transition: border-color 0.15s, transform 0.15s;
}

a.board-unit:hover { border-color: var(--accent); transform: translateY(-2px); }
.board-unit img { width: 52px; height: 52px; border-radius: 10px; margin-bottom: 6px; }
.board-unit-name { font-weight: 700; font-size: 0.85rem; }
.board-unit-meta { color: var(--text-dim); font-size: 0.75rem; margin: 2px 0 8px; }
.board-unit-items { display: flex; justify-content: center; gap: 4px; }

.augment-row { display: flex; flex-wrap: wrap; gap: 10px; }

.augment-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 0.88rem;
}

.augment-chip img { width: 24px; height: 24px; border-radius: 50%; }

.cost-badge {
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold);
    padding: 3px 10px;
    border-radius: 20px;
    vertical-align: middle;
}

.site-footer {
    border-top: 1px solid var(--border-soft);
    background: var(--bg-inset);
    padding: 34px 0 0;
    color: var(--text-dim);
    font-size: 0.86rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 24px;
}

.footer-col .brand { font-size: 1rem; }

.footer-about { margin: 0; line-height: 1.6; max-width: 420px; }

.footer-title {
    color: var(--text);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.footer-nav { display: flex; flex-direction: column; gap: 6px; }
.footer-nav a:hover { color: var(--accent); }

.footer-bottom {
    border-top: 1px solid var(--border-soft);
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 0.76rem;
}

.footer-bottom p { margin: 0; }

@media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Toast khi copy */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-panel-2);
    border: 1px solid var(--accent);
    color: var(--text);
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 100;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Trang chu ---------- */
.home-hero {
    background: linear-gradient(135deg, #12233a 0%, #0e1c2b 60%, #14273a 100%);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 40px 36px;
    text-align: center;
    margin-bottom: 28px;
}

.home-hero-title { margin: 0 0 8px; font-size: 2rem; font-weight: 900; }

.home-hero-sub { color: var(--text-dim); margin: 0 auto 22px; max-width: 640px; }

.home-hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.home-hero-stats .num { display: block; font-size: 1.6rem; font-weight: 900; color: var(--accent); }
.home-hero-stats .lbl { color: var(--text-dim); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }

.home-hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Blog ---------- */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.post-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    display: block;
    transition: border-color 0.15s, transform 0.15s;
}

.post-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.post-card-cover { width: 100%; height: 170px; object-fit: cover; display: block; background: var(--bg-inset); }

.post-card-body { padding: 14px 18px 18px; }

.post-card-date { color: var(--text-dim); font-size: 0.76rem; margin-bottom: 4px; }

.post-card-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; }

.post-card-excerpt { margin: 0; color: var(--text-dim); font-size: 0.88rem; }

.post-article { max-width: 800px; }

.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.post-layout aside .panel + .panel { margin-top: 20px; }
.post-layout .side-item:hover { border-color: var(--accent); }

@media (max-width: 980px) {
    .post-layout { grid-template-columns: 1fr; }
}

.post-meta { color: var(--text-dim); font-size: 0.85rem; margin: -2px 0 18px; }

.post-cover { width: 100%; border-radius: 12px; margin-bottom: 20px; display: block; }

/* ---------- Tooltip tuong (hover) ---------- */
.champ-tooltip {
    position: fixed;
    z-index: 200;
    width: 360px;
    max-width: calc(100vw - 16px);
    background: #0e1c2b;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    font-size: 0.86rem;
    line-height: 1.5;
}

.champ-tooltip.show { opacity: 1; }

.tt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.tt-portrait {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 2px solid var(--cost-1);
}

.tt-name { font-weight: 800; font-size: 1.02rem; }
.tt-cost { color: var(--text-dim); font-size: 0.8rem; }

.tt-traits { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }

.tt-trait { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.84rem; }
.tt-trait img { width: 18px; height: 18px; filter: brightness(1.35); }

.tt-ability {
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}

.tt-ability-head { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 8px; }

.tt-ability-head img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--border);
}

.tt-desc { color: #c9d6e3; }
.tt-desc .tt-passive { color: var(--text); }
.tt-desc .tt-val { color: var(--accent); font-weight: 700; }
.tt-desc .tt-scale { color: #4cd08d; }
.tt-desc .tt-q { color: var(--accent); font-weight: 800; }

.tt-items {
    display: flex;
    align-items: center;
    gap: 5px;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tt-items-label { font-weight: 700; margin-right: 4px; }
.tt-items img { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); }

/* ---------- Trang chi tiet tuong (hero) ---------- */
.champ-hero {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
    gap: 24px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 22px 26px;
    align-items: start;
}

.champ-hero-id { display: flex; gap: 18px; align-items: center; }

.champ-hero-portrait {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    border: 3px solid var(--cost-1);
    object-fit: cover;
    flex-shrink: 0;
}

.champ-hero-name { margin: 0 0 4px; font-size: 1.6rem; font-weight: 900; }

.champ-hero-cost { font-weight: 800; font-size: 0.9rem; margin-bottom: 8px; }

.cost-text-1 { color: var(--cost-1); }
.cost-text-2 { color: var(--cost-2); }
.cost-text-3 { color: var(--cost-3); }
.cost-text-4 { color: var(--cost-4); }
.cost-text-5 { color: var(--cost-5); }

.champ-hero-traits { display: flex; flex-direction: column; gap: 5px; }

.champ-hero-ability {
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 0.88rem;
    line-height: 1.55;
}

.item-rank-table .rank-cell { color: var(--text-dim); font-weight: 800; width: 34px; }

@media (max-width: 860px) {
    .champ-hero { grid-template-columns: 1fr; }
}

/* ---------- Binh luan ---------- */
.comments-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.comment {
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comment-main { flex: 1; min-width: 0; }

.comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.comment-author { font-weight: 800; }
.comment-date { color: var(--text-dim); font-size: 0.75rem; }
.comment-body { font-size: 0.9rem; white-space: pre-line; overflow-wrap: break-word; }

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 18px;
}

.comment-form input[type="text"], .comment-form textarea {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 11px 14px;
    font-size: 0.9rem;
    font-family: inherit;
}

.comment-form textarea { min-height: 110px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form .hp-field { display: none; }

.comment-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.comment-form-row input[type="text"] { flex: 1; min-width: 220px; max-width: 360px; }
.comment-form-row .btn { margin-left: auto; }

.flash-ok {
    background: rgba(76, 208, 141, 0.12);
    border: 1px solid #2c7a52;
    color: #7fe0ae;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    font-size: 0.88rem;
}

.flash-err {
    background: rgba(230, 106, 106, 0.1);
    border: 1px solid #8a3a3a;
    color: #f0a0a0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    font-size: 0.88rem;
}

/* Bai huong dan tu admin (TinyMCE) */
.guide-body { line-height: 1.7; font-size: 0.95rem; }
.guide-body img { max-width: 100%; height: auto; border-radius: 8px; }
.guide-body a { color: var(--accent); text-decoration: underline; }
.guide-body h2, .guide-body h3 { margin: 1.2em 0 0.5em; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .comp-row-detail-grid, .comp-detail-grid { grid-template-columns: 1fr; }
    .key-units { grid-template-columns: 1fr; }
    .comp-row-stats { grid-template-columns: repeat(2, 62px); }
}

@media (max-width: 720px) {
    .header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; }
    .comp-row-head { flex-wrap: wrap; }
    .comp-row-info { width: 100%; }
    .comp-row-stats { grid-template-columns: repeat(4, 1fr); width: 100%; }
    .split-2 { grid-template-columns: 1fr; }
    .split-2 > div { padding: 0; }
    .split-2 > div:first-child { border-right: none; border-bottom: 1px solid var(--border-soft); padding-bottom: 16px; margin-bottom: 16px; }
    .statbar { grid-template-columns: repeat(3, 1fr); }
    .hexboard { --hex-w: 46px; --hex-h: 53px; }
    .hex .hex-items img { width: 11px; height: 11px; }
    .hex .hex-name { display: none; }
}