/* ============================================
   TFT Items Page — Set 18 Dark UI
   ============================================ */
:root {
    --tip-bg: #0f1218;
    --tip-card: #16181f;
    --tip-border: #252838;
    --tip-gold: #c89b3c;
    --tip-text: #c8c0b0;
    --tip-dim: #666;
    --tip-hover: #2a2e40;
    --tip-radiant-border: #b8860b;
    --tip-artifact-border: #7c3aed;
    --tip-emblem-border: #15803d;
    --tip-ornn-border: #607d8b;
}

.tip-wrap { font-family:'Segoe UI',-apple-system,sans-serif; background:var(--tip-bg); color:var(--tip-text); border-radius:10px; overflow:hidden; -webkit-font-smoothing:antialiased; position:relative; }
.tip-wrap * { box-sizing:border-box; }

/* ===== TABS BAR ===== */
.tip-tabs-bar { display:flex; align-items:center; gap:4px; padding:12px 14px 10px; background:var(--tip-card); border-bottom:1px solid var(--tip-border); flex-wrap:wrap; }
.tip-tab { padding:10px 20px; border:none; background:transparent; color:var(--tip-dim); font-size:13px; font-weight:700; cursor:pointer; border-bottom:3px solid transparent; transition:all .15s; letter-spacing:.5px; }
.tip-tab:hover { color:var(--tip-text); }
.tip-tab.active { color:#64b5f6; border-bottom-color:#64b5f6; }
.tip-search-wrap { margin-left:auto; position:relative; min-width:230px; margin-bottom:4px; }
.tip-search-wrap:before{content:'\1F50D';position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:13px;line-height:1;color:#75e4e0;opacity:.9;z-index:1;pointer-events:none}
.tip-wrap .tip-search-wrap input#tip-search{
    width:100% !important;
    height:40px !important;
    background:linear-gradient(180deg,#111827,#0b1018) !important;
    border:1px solid #283247 !important;
    color:#eef3ff !important;
    padding:0 14px 0 38px !important;
    border-radius:12px !important;
    font-size:13px !important;
    font-weight:600 !important;
    outline:none !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 6px 18px rgba(0,0,0,.18) !important;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease !important;
    appearance:none !important;
}
.tip-wrap .tip-search-wrap input#tip-search::placeholder{color:#788296 !important;font-weight:500 !important}
.tip-wrap .tip-search-wrap input#tip-search:hover{border-color:#3a4964 !important;background:linear-gradient(180deg,#131b2a,#0b1018) !important}
.tip-wrap .tip-search-wrap input#tip-search:focus{border-color:#18d4ce !important;box-shadow:0 0 0 3px rgba(24,212,206,.12),0 8px 24px rgba(0,0,0,.25) !important;background:#0d1320 !important}

/* ===== PANELS ===== */
.tip-panel { padding:14px; }

/* ===== GRID ===== */
.tip-grid { display:flex; flex-wrap:wrap; gap:5px; padding:4px 0 10px; }

/* ===== ITEM ===== */
.tip-item {
    width:54px; height:54px;
    border-radius:8px;
    border:2px solid #2a2e3a;
    background:#1e2030;
    overflow:hidden;
    cursor:pointer;
    position:relative;
    transition:transform .12s, border-color .12s;
    flex-shrink:0;
}
.tip-item:hover { transform:scale(1.1); z-index:2; border-color:#888; }
.tip-item img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.tip-item-fb { position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:8px; color:#666; }

/* Category borders */
.tip-item[data-cat="radiant"]       { border-color:var(--tip-radiant-border); box-shadow:0 0 6px rgba(184,134,11,.35); }
.tip-item[data-cat="artifact"]      { border-color:var(--tip-artifact-border); box-shadow:0 0 6px rgba(124,58,237,.35); }
.tip-item[data-cat="emblem"]        { border-color:var(--tip-emblem-border); }
.tip-item[data-cat="ornn"]          { border-color:var(--tip-ornn-border); }

/* ===== SECTION LABEL ===== */
.tip-section-label { font-size:11px; color:var(--tip-dim); text-transform:uppercase; letter-spacing:1px; font-weight:700; padding:4px 2px 2px; margin-bottom:2px; }

/* ===== OTHER LAYOUT ===== */
.tip-other-list { display:flex; flex-direction:column; gap:4px; }
.tip-other-row { display:grid; grid-template-columns:130px 1fr; gap:10px; align-items:start; padding:8px 0; border-bottom:1px solid #1a1d27; }
.tip-other-row:last-child { border-bottom:none; }
.tip-other-label { font-size:12px; color:var(--tip-text); font-weight:600; padding-top:6px; }


/* ===== TOOLTIP (hover) ===== */
.tip-tooltip {
    position:fixed;
    z-index:99999;
    max-width:320px;
    min-width:240px;
    background:#12141d;
    border:1px solid #2a3050;
    border-radius:10px;
    box-shadow:0 8px 32px rgba(0,0,0,.7);
    padding:14px;
    pointer-events:none;
    animation:tipFade .12s ease;
    display:flex;
    gap:12px;
    align-items:flex-start;
}
@keyframes tipFade { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }
.tip-tooltip-img img { width:60px; height:60px; border-radius:8px; border:2px solid #444; display:block; flex-shrink:0; }
.tip-tooltip-body { flex:1; min-width:0; }
.tip-tt-name { font-size:14px; font-weight:700; color:#e8e0d0; margin-bottom:4px; }
.tip-tt-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; display:inline-block; margin-bottom:6px; }
.tip-tt-badge-craftable { background:#1a2e1a; color:#66bb6a; }
.tip-tt-badge-radiant   { background:#2a1a00; color:var(--tip-radiant-border); }
.tip-tt-badge-artifact  { background:#1a0a30; color:#a78bfa; }
.tip-tt-badge-emblem    { background:#0a2010; color:#4ade80; }
.tip-tt-badge-ornn      { background:#1a2030; color:#90a4ae; }
.tip-tt-badge-component { background:#1e1e1e; color:#aaa; }
.tip-tt-badge-graves    { background:#1e1a0a; color:#fbbf24; }
.tip-tt-badge-sona      { background:#0a1a2e; color:#60a5fa; }
/* Stat colors in tooltip */
.s-ad  { color:#f4a460; }
.s-ap  { color:#87ceeb; }
.s-hp  { color:#90ee90; }
.s-ar  { color:#ffd700; }
.s-mr  { color:#a9a9e8; }
.s-as  { color:#98fb98; }
.s-cr  { color:#ffa500; }
.s-ov  { color:#dda0dd; }
.s-dr  { color:#aad4ef; }
.s-mr2 { color:#9370db; }
.tip-tt-desc { font-size:11px; color:#999; line-height:1.5; margin-bottom:8px; }
.tip-tt-recipe { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tip-tt-recipe img { width:32px; height:32px; border-radius:5px; border:1px solid #333; background:#1a1d27; }
.tip-tt-recipe .tip-tt-plus { color:#555; font-size:14px; }
.tip-tt-recipe .tip-tt-eq   { color:var(--tip-gold); font-size:14px; }
.tip-item.tip-hidden { display:none; }

@media (max-width:768px) {
    .tip-tooltip { display:none !important; } /* dùng click thay hover */
    .tip-other-row { grid-template-columns:1fr; }
    .tip-other-label { padding-top:0; font-size:11px; }
    .tip-item { width:46px; height:46px; }
    .tip-search-wrap{width:100%;min-width:0;margin-left:0;order:99}.tip-wrap .tip-search-wrap input#tip-search{height:38px !important;}
    .tip-tab { padding:8px 12px; font-size:12px; }
}
@media (max-width:480px) {
    .tip-item { width:40px; height:40px; }
    .tip-grid { gap:3px; }
}

/* ===== Item API Stats Detail ===== */
.tip-detail-wrap{max-width:1180px;margin:20px auto;padding:18px;background:#0f1218;color:#c8c0b0;border:1px solid #252838;border-radius:14px;font-family:'Segoe UI',-apple-system,sans-serif}
.tip-detail-head{display:flex;align-items:center;gap:16px;background:#16181f;border:1px solid #252838;border-radius:12px;padding:16px;position:relative;overflow:hidden}
.tip-detail-icon img{width:72px;height:72px;border-radius:12px;border:2px solid #3b4256;background:#10131b;object-fit:cover;display:block}
.tip-detail-head h1{margin:0 0 5px;font-size:28px;color:#f2eadb;line-height:1.15}
.tip-detail-sub{font-size:12px;color:#8c93a5}
.tip-window-tabs{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tip-window-tabs a{color:#9aa3b8;text-decoration:none;background:#0e1015;border:1px solid #252838;border-radius:8px;padding:8px 11px;font-size:12px;font-weight:700}
.tip-window-tabs a.active,.tip-window-tabs a:hover{color:#0f1218;background:#c89b3c;border-color:#c89b3c}
.tip-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.tip-stat-grid>div{background:#16181f;border:1px solid #252838;border-radius:12px;padding:14px;text-align:center}
.tip-stat-grid b{display:block;color:#a6e57a;font-size:24px;line-height:1.1;margin-bottom:4px}
.tip-stat-grid span{display:block;color:#8c93a5;font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.3px}
.tip-detail-section{background:#16181f;border:1px solid #252838;border-radius:12px;padding:14px;margin-top:14px}
.tip-detail-section h2{font-size:17px;color:#f2eadb;margin:0 0 12px}
.tip-data-table{display:flex;flex-direction:column;gap:6px}
.tip-data-row{display:grid;grid-template-columns:1.6fr .7fr .7fr .7fr .7fr;gap:10px;align-items:center;background:#11141c;border:1px solid #202435;border-radius:9px;padding:9px 11px;font-size:13px}
.tip-data-row.head{background:#0e1015;color:#8c93a5;font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.4px}
.tip-row-name{font-weight:700;color:#e7dfd0;display:flex;gap:5px;align-items:center;flex-wrap:wrap;min-height:28px}
.tip-mini-item img{width:30px;height:30px;border-radius:6px;border:1px solid #3b4256;background:#0e1015;object-fit:cover;display:block}
.tip-empty{padding:16px;background:#201b12;border:1px solid #5a4218;color:#e5c57a;border-radius:10px;margin:12px 0;font-size:13px}
.tip-empty.small{background:#11141c;border-color:#252838;color:#8c93a5;margin:0}
@media(max-width:768px){.tip-detail-head{align-items:flex-start}.tip-window-tabs{width:100%;margin-left:0}.tip-stat-grid{grid-template-columns:repeat(2,1fr)}.tip-data-row{grid-template-columns:1fr .5fr .5fr .5fr .5fr;font-size:12px;gap:6px}.tip-detail-head h1{font-size:22px}}

.tip-data-table-rich{display:flex;flex-direction:column;gap:8px}
.tip-data-row{grid-template-columns:2.2fr .7fr .8fr .8fr .8fr .8fr .9fr}
.tip-data-row.is-combo{grid-template-columns:1.8fr .8fr .8fr .8fr .8fr .9fr}
.tip-data-row > span{display:flex;align-items:center;min-width:0}
.tip-row-name{display:flex;align-items:center;gap:10px;min-height:44px}
.tip-row-name-text{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.tip-row-name-text strong{font-size:14px;color:#e7dfd0;font-weight:700}
.tip-row-name-text small{font-size:11px;color:#8c93a5}
.tip-champ-thumb{width:42px;height:42px;flex:0 0 42px;border-radius:8px;overflow:hidden;border:1px solid #3b4256;background:#0e1015}
.tip-champ-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tip-grade{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;font-weight:800;font-size:18px}
.tip-grade-s{background:#ff8f8f;color:#2b0d0d}
.tip-grade-a{background:#ffc680;color:#382100}
.tip-grade-b{background:#f4de7a;color:#2b2500}
.tip-grade-c{background:#8fb089;color:#10210d}
.tip-row-combo{gap:6px;flex-wrap:wrap}
.tip-row-combo .tip-mini-item img{width:36px;height:36px;border-radius:7px}
@media(max-width:768px){
  .tip-data-row{grid-template-columns:1.4fr .5fr .55fr .6fr .6fr .6fr .75fr;font-size:12px}
  .tip-data-row.is-combo{grid-template-columns:1.2fr .6fr .6fr .6fr .6fr .8fr}
  .tip-champ-thumb{width:34px;height:34px;flex-basis:34px}
  .tip-row-name-text strong{font-size:12px}
}

.tip-item-info-box{background:linear-gradient(180deg,#171a23,#12151d)}
.tip-item-desc{font-size:14px;line-height:1.65;color:#e8e0d0;background:#0e1015;border:1px solid #252838;border-radius:10px;padding:12px 14px;margin-bottom:12px}
.tip-info-line{display:flex;align-items:center;gap:12px;margin:10px 0 12px;color:#aeb4c2}
.tip-info-components{display:flex;gap:7px;align-items:center}
.tip-effects-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tip-effect-pill{background:#0e1015;border:1px solid #252838;border-radius:9px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.tip-effect-pill span{font-size:11px;color:#8c93a5;text-transform:uppercase;font-weight:800;letter-spacing:.3px}
.tip-effect-pill b{font-size:15px;color:#9fe67d}
@media(max-width:768px){.tip-effects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.tip-detail-desc{
    max-width:720px;
    color:#aeb4c2;
    line-height:1.55;
    font-size:13px;
}
.tip-desc-stat{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    padding:1px 6px;
    margin:0 2px;
    border-radius:6px;
    background:rgba(159,230,125,.14);
    border:1px solid rgba(159,230,125,.35);
    color:#9fe67d;
    font-weight:900;
    text-shadow:0 0 8px rgba(159,230,125,.18);
}
.tip-effect-pill b{
    font-weight:900;
    text-shadow:0 0 8px rgba(159,230,125,.18);
}

/* 1.4.9 - Highlight số trong mô tả bằng màu vàng */
.tip-desc-stat{
    background:rgba(212,166,58,.16) !important;
    border-color:rgba(212,166,58,.45) !important;
    color:#ffd86b !important;
    text-shadow:0 0 10px rgba(255,216,107,.22) !important;
}
.tip-effect-pill b{
    color:#ffd86b !important;
    text-shadow:0 0 10px rgba(255,216,107,.22) !important;
}

/* 1.4.17 tooltip mô tả item */
.tip-tooltip{max-width:380px}
.tip-tt-desc{font-size:12px;line-height:1.55;color:#b9c0cc}
.tip-tt-desc .tip-desc-stat{color:#ffd86b}


/* 1.4.26 - Breadcrumb trang chi tiết trang bị */
.tip-breadcrumb{margin:0 0 14px;color:#8c93a5;font-size:13px;line-height:1.4}
.tip-breadcrumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none}
.tip-breadcrumb li{display:flex;align-items:center;min-width:0}
.tip-breadcrumb a{color:#c89b3c;text-decoration:none;font-weight:700}
.tip-breadcrumb a:hover{color:#ffd86b;text-decoration:underline}
.tip-breadcrumb-sep{display:inline-flex;margin:0 8px;color:#596072;font-weight:800}
.tip-breadcrumb-current{color:#e7dfd0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
@media(max-width:768px){.tip-breadcrumb{font-size:12px}.tip-breadcrumb-current{max-width:220px}.tip-breadcrumb-sep{margin:0 6px}}


/* SEO internal links - thu gọn để không làm rối giao diện */
.tip-seo-links{margin-top:18px;padding:0;border:0;background:transparent;color:#cbd2e1}
.tip-seo-links summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;border:1px solid #2a2f3d;border-radius:999px;background:rgba(10,14,22,.72);color:#9aa3b8;padding:7px 12px;font-size:12px;font-weight:700;line-height:1.2;user-select:none}
.tip-seo-links summary::-webkit-details-marker{display:none}
.tip-seo-links summary:before{content:'+';display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#182030;color:#c89b3c;font-weight:900}
.tip-seo-links[open] summary{color:#f4d38b;border-color:#3a4050;background:#10131b}
.tip-seo-links[open] summary:before{content:'−'}
.tip-seo-links p{margin:10px 0 10px;color:#8f98aa;font-size:12px}
.tip-seo-link-grid{display:flex;flex-wrap:wrap;gap:7px;max-height:220px;overflow:auto;padding:12px;border:1px solid #252838;border-radius:14px;background:rgba(8,11,17,.78)}
.tip-seo-link-grid a{display:inline-flex;align-items:center;text-decoration:none;color:#d6dbe8;background:#0b0e14;border:1px solid #2a2f3d;border-radius:999px;padding:6px 10px;font-size:12px;line-height:1.2}
.tip-seo-link-grid a:hover{color:#111827;background:#c89b3c;border-color:#c89b3c}
.tip-detail-updated{margin:8px 0 14px;color:#8f98aa;font-size:12px;text-align:right}
.tip-item{display:block;text-decoration:none;color:inherit}


/* 1.4.31 - Làm lại ô tìm kiếm cho gọn, không bị theme ép màu tím */
.tb-items-search{margin-bottom:8px;position:relative}
.tb-items-search:before{content:'\1F50D';position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;color:#75e4e0;z-index:1;pointer-events:none}
.tb-items-search input{
    width:100% !important;
    height:34px !important;
    background:linear-gradient(180deg,#111827,#0b1018) !important;
    border:1px solid #283247 !important;
    color:#eef3ff !important;
    padding:0 12px 0 34px !important;
    border-radius:10px !important;
    font-size:12px !important;
    font-weight:600 !important;
    outline:none !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.tb-items-search input::placeholder{color:#788296 !important;font-weight:500 !important}
.tb-items-search input:focus{border-color:#18d4ce !important;box-shadow:0 0 0 3px rgba(24,212,206,.12) !important;background:#0d1320 !important}

/* Fix ô search mặc định trên trang 404 của theme khi người dùng lỡ vào URL sai */
body.error404 .search-form,
.error-404 .search-form,
.not-found .search-form{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;max-width:420px !important;margin:22px auto 0 !important;padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important}
body.error404 .search-form label,
.error-404 .search-form label,
.not-found .search-form label{position:relative !important;display:block !important;flex:1 1 auto !important;margin:0 !important}
body.error404 .search-form label:before,
.error-404 .search-form label:before,
.not-found .search-form label:before{content:'\1F50D';position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:14px;color:#75e4e0;z-index:2;pointer-events:none}
body.error404 .search-field,
.error-404 .search-field,
.not-found .search-field{width:100% !important;height:46px !important;background:linear-gradient(180deg,#111827,#0b1018) !important;border:1px solid #283247 !important;color:#eef3ff !important;border-radius:14px !important;padding:0 16px 0 42px !important;font-size:14px !important;font-weight:600 !important;outline:none !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.25) !important;appearance:none !important}
body.error404 .search-field::placeholder,
.error-404 .search-field::placeholder,
.not-found .search-field::placeholder{color:#788296 !important;font-weight:500 !important}
body.error404 .search-field:focus,
.error-404 .search-field:focus,
.not-found .search-field:focus{border-color:#18d4ce !important;box-shadow:0 0 0 3px rgba(24,212,206,.12),0 10px 28px rgba(0,0,0,.25) !important;background:#0d1320 !important}
body.error404 .search-submit,
.error-404 .search-submit,
.not-found .search-submit{height:46px !important;border:0 !important;border-radius:14px !important;background:linear-gradient(135deg,#16d5cf,#0aa7a3) !important;color:#061014 !important;padding:0 18px !important;font-weight:900 !important;font-size:13px !important;box-shadow:0 10px 24px rgba(10,167,163,.22) !important;cursor:pointer !important}
body.error404 .search-submit:hover,
.error-404 .search-submit:hover,
.not-found .search-submit:hover{filter:brightness(1.08) !important;transform:translateY(-1px)}
@media(max-width:520px){body.error404 .search-form,.error-404 .search-form,.not-found .search-form{max-width:92% !important;flex-direction:column !important}body.error404 .search-submit,.error-404 .search-submit,.not-found .search-submit{width:100% !important}}

/* 1.4.33 - Mobile detail UI polish + fix ảnh bị bóp */
.tip-detail-head > div:nth-child(2){min-width:0;flex:1 1 auto}
.tip-detail-icon{width:72px;height:72px;flex:0 0 72px;min-width:72px;border-radius:12px;overflow:hidden;background:#10131b}
.tip-detail-icon img{width:100% !important;height:100% !important;max-width:none !important;aspect-ratio:1/1;object-fit:contain !important;display:block}
.tip-champ-thumb{flex:0 0 42px;min-width:42px;width:42px;height:42px;aspect-ratio:1/1}
.tip-champ-thumb img,.tip-mini-item img{width:100% !important;height:100% !important;max-width:none !important;aspect-ratio:1/1;object-fit:cover !important;display:block}
.tip-data-row > span{line-height:1.25}

@media(max-width:768px){
  .tip-detail-wrap{
    width:100%;
    max-width:100%;
    margin:10px auto;
    padding:10px;
    border-radius:14px;
    overflow:hidden;
    background:radial-gradient(circle at 20% 0%,rgba(47,93,255,.10),transparent 34%),#0b0f18;
  }
  .tip-breadcrumb{margin:0 0 10px;font-size:12px;overflow:hidden}
  .tip-breadcrumb ol{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
  .tip-breadcrumb-current{max-width:150px}

  .tip-detail-head{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:
      "icon info"
      "tabs tabs";
    gap:12px;
    align-items:start;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(26,31,48,.98),rgba(14,17,27,.98));
    border:1px solid rgba(91,111,160,.45);
    box-shadow:0 12px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);
  }
  .tip-detail-icon{grid-area:icon;width:64px;height:64px;flex-basis:64px;min-width:64px;border-radius:14px;border:1px solid rgba(130,154,220,.35);box-shadow:0 0 18px rgba(124,58,237,.22)}
  .tip-detail-head > div:nth-child(2){grid-area:info;min-width:0;width:100%}
  .tip-detail-head h1{font-size:24px;line-height:1.15;margin:0 0 7px;color:#f6f3ea;letter-spacing:-.3px}
  .tip-detail-desc{max-width:none;font-size:13px;line-height:1.55;color:#b9c0cf;word-break:normal;overflow-wrap:anywhere}
  .tip-desc-stat{padding:1px 7px;margin:0 1px;border-radius:7px;white-space:nowrap}

  .tip-window-tabs{
    grid-area:tabs;
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .tip-window-tabs a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:9px 8px;
    border-radius:11px;
    font-size:12px;
    text-align:center;
    background:#0b101a;
    border-color:#2a3146;
  }
  .tip-window-tabs a.active,.tip-window-tabs a:hover{
    color:#17120a;
    background:linear-gradient(135deg,#ffd86b,#c89b3c);
    border-color:#e2b651;
    box-shadow:0 8px 20px rgba(200,155,60,.18);
  }

  .tip-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
  .tip-stat-grid>div{
    min-height:82px;
    padding:13px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(180deg,#171b25,#11141d);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  }
  .tip-stat-grid b{font-size:24px;line-height:1;color:#9fe67d;margin-bottom:7px}
  .tip-stat-grid span{font-size:11px;line-height:1.2;letter-spacing:.4px}
  .tip-detail-updated{text-align:center;margin:9px 0 12px;font-size:12px;color:#9aa3b8}

  .tip-detail-section{
    padding:14px;
    border-radius:14px;
    margin-top:14px;
    background:linear-gradient(180deg,#151923,#10141d);
    border-color:#283047;
    overflow:hidden;
  }
  .tip-detail-section h2{font-size:18px;line-height:1.35;margin:0 0 12px;color:#fff;font-weight:900;letter-spacing:-.2px}

  .tip-data-table-rich{gap:10px}
  .tip-data-row.head{display:none}
  .tip-data-row:not(.head){
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    padding:12px;
    border-radius:14px;
    background:linear-gradient(180deg,#101622,#0d111a);
    border:1px solid rgba(70,86,128,.58);
    box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
    font-size:13px;
  }
  .tip-data-row:not(.head) > span:nth-child(1){grid-column:1 / span 4;min-width:0;align-items:center}
  .tip-data-row:not(.head) > span:nth-child(2){grid-column:5;justify-content:flex-end;align-items:center}
  .tip-data-row:not(.head) > span:nth-child(n+3){
    min-height:46px;
    padding:6px 3px;
    border-radius:10px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#f1f5ff;
    font-weight:800;
    white-space:nowrap;
  }
  .tip-data-row:not(.head) > span:nth-child(3){grid-column:1}
  .tip-data-row:not(.head) > span:nth-child(4){grid-column:2}
  .tip-data-row:not(.head) > span:nth-child(5){grid-column:3}
  .tip-data-row:not(.head) > span:nth-child(6){grid-column:4}
  .tip-data-row:not(.head) > span:nth-child(7){grid-column:5;color:#dcb7ff;background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.35)}
  .tip-data-row:not(.head) > span:nth-child(n+3)::before{
    display:block;
    font-size:9px;
    line-height:1;
    letter-spacing:.35px;
    text-transform:uppercase;
    color:#8d96aa;
    font-weight:900;
  }
  .tip-data-row:not(.head) > span:nth-child(3)::before{content:'Trận'}
  .tip-data-row:not(.head) > span:nth-child(4)::before{content:'Hạng'}
  .tip-data-row:not(.head) > span:nth-child(5)::before{content:'Top 4'}
  .tip-data-row:not(.head) > span:nth-child(6)::before{content:'Thắng'}
  .tip-data-row:not(.head) > span:nth-child(7)::before{content:'Tần suất'}

  .tip-row-name{gap:10px;min-height:58px;flex-wrap:nowrap;width:100%}
  .tip-row-name-text{min-width:0;gap:4px}
  .tip-row-name-text strong{font-size:15px;line-height:1.1;white-space:normal;overflow-wrap:anywhere}
  .tip-row-name-text small{font-size:12px;color:#a8b0c4;font-weight:700}
  .tip-champ-thumb{width:56px;height:56px;flex:0 0 56px;min-width:56px;border-radius:12px;border-color:rgba(132,92,255,.5);box-shadow:0 0 14px rgba(124,58,237,.18)}
  .tip-grade{width:40px;height:40px;border-radius:11px;font-size:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
}

@media(max-width:390px){
  .tip-detail-wrap{padding:9px}
  .tip-detail-head{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:12px}
  .tip-detail-icon{width:58px;height:58px;flex-basis:58px;min-width:58px;border-radius:12px}
  .tip-detail-head h1{font-size:22px}
  .tip-detail-desc{font-size:12.5px;line-height:1.5}
  .tip-window-tabs a{min-height:36px;font-size:11px;padding:8px 6px}
  .tip-stat-grid{gap:9px}
  .tip-stat-grid>div{min-height:80px;padding:12px 8px}
  .tip-data-row:not(.head){padding:10px;gap:7px}
  .tip-champ-thumb{width:52px;height:52px;flex-basis:52px;min-width:52px}
  .tip-data-row:not(.head) > span:nth-child(n+3){font-size:12px;min-height:44px}
  .tip-data-row:not(.head) > span:nth-child(n+3)::before{font-size:8.5px}
}


/* 1.4.35 - Cố định khung chi tiết desktop, tránh mỗi trang bị cao/thấp khác nhau */
@media (min-width:769px){
  .tip-detail-wrap{
    width:calc(100vw - 48px) !important;
    max-width:1180px !important;
    min-height:760px !important;
    margin:20px auto 42px !important;
    display:flex;
    flex-direction:column;
  }
  .tip-detail-head{
    min-height:112px;
  }
  .tip-detail-section{
    min-height:390px;
    display:flex;
    flex-direction:column;
  }
  .tip-detail-section .tip-data-table-rich{
    flex:1 1 auto;
    max-height:460px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:4px;
  }
  .tip-detail-section .tip-empty.small{
    flex:1 1 auto;
    min-height:300px;
    display:flex;
    align-items:center;
  }
  .tip-detail-section .tip-data-table-rich::-webkit-scrollbar{width:6px}
  .tip-detail-section .tip-data-table-rich::-webkit-scrollbar-track{background:#0d1017;border-radius:999px}
  .tip-detail-section .tip-data-table-rich::-webkit-scrollbar-thumb{background:#2f374c;border-radius:999px}
  .tip-detail-section .tip-data-table-rich::-webkit-scrollbar-thumb:hover{background:#46516c}
}

@media (max-width:768px){
  .tip-detail-wrap{
    min-height:0 !important;
    width:100% !important;
    margin:10px auto !important;
  }
  .tip-detail-section,
  .tip-detail-section .tip-data-table-rich,
  .tip-detail-section .tip-empty.small{
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
}


/* 1.4.36 - Recolor UI to match dark blue / gold style from reference plugin */
:root{
  --tip-bg:#07101a;
  --tip-card:#0b1523;
  --tip-border:#20314a;
  --tip-gold:#e8bf62;
  --tip-text:#dfe7f7;
  --tip-dim:#7f91b2;
  --tip-hover:#142236;
}

.tip-wrap,
.tip-detail-wrap{
  color:var(--tip-text);
}

.tip-detail-wrap{
  background:
    radial-gradient(circle at top right, rgba(128,70,255,.10), transparent 28%),
    radial-gradient(circle at top left, rgba(0,194,255,.08), transparent 24%),
    #07101a !important;
  border:1px solid #20314a !important;
  box-shadow:0 16px 42px rgba(0,0,0,.28);
}

.tip-detail-head,
.tip-detail-section,
.tip-stat-grid > div,
.tip-data-row,
.tip-empty.small{
  background:linear-gradient(180deg,#0d1727 0%, #0a121f 100%) !important;
  border-color:#223652 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.tip-detail-head{
  border-radius:16px;
}

.tip-detail-icon{
  border:1px solid rgba(136,97,255,.42) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 0 18px rgba(129,84,255,.18);
}

.tip-detail-head h1,
.tip-detail-section h2,
.tip-row-name-text strong,
.tip-breadcrumb-current,
.tip-row-name,
.tip-tt-name{
  color:#f4f7ff !important;
}

.tip-detail-desc,
.tip-detail-sub,
.tip-detail-updated,
.tip-row-name-text small,
.tip-breadcrumb,
.tip-stat-grid span,
.tip-data-row.head,
.tip-empty.small,
.tip-tt-desc{
  color:#8ea2c8 !important;
}

.tip-breadcrumb a,
.tip-seo-links[open] summary,
.tip-effect-pill b,
.tip-desc-stat,
.tip-info-line strong{
  color:#f0c76b !important;
}

.tip-breadcrumb a:hover,
.tip-seo-link-grid a:hover{
  color:#09101a !important;
}

.tip-window-tabs a{
  background:linear-gradient(180deg,#0d1522,#0a111b) !important;
  border:1px solid #253855 !important;
  color:#b7c5df !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.tip-window-tabs a.active,
.tip-window-tabs a:hover{
  color:#15100a !important;
  background:linear-gradient(135deg,#f5d37a,#dca94a) !important;
  border-color:#f0c76b !important;
  box-shadow:0 10px 24px rgba(220,169,74,.16);
}

.tip-stat-grid > div{
  border-radius:14px;
}
.tip-stat-grid b{
  color:#f0c76b !important;
  text-shadow:0 0 14px rgba(240,199,107,.10);
}
.tip-stat-grid > div:nth-child(1) b{color:#8fdcff !important;text-shadow:0 0 14px rgba(143,220,255,.10)}
.tip-stat-grid > div:nth-child(3) b,
.tip-stat-grid > div:nth-child(4) b{color:#9be088 !important;text-shadow:0 0 14px rgba(155,224,136,.12)}

.tip-detail-section h2{
  position:relative;
  padding-bottom:12px;
  margin-bottom:14px;
}
.tip-detail-section h2:after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(240,199,107,.25),rgba(255,255,255,.05));
}

.tip-data-row.head{
  background:#0a121e !important;
}
.tip-data-row:not(.head){
  background:linear-gradient(180deg,#0b1421,#09111b) !important;
}
.tip-data-row:not(.head):hover{
  border-color:#334b70 !important;
  background:linear-gradient(180deg,#0d1828,#0a1320) !important;
}

.tip-champ-thumb,
.tip-mini-item img{
  border-color:#314866 !important;
}

.tip-grade-s{background:#f79a8b;color:#2c0f0f}
.tip-grade-a{background:#efc26a;color:#3a2700}
.tip-grade-b{background:#d8d17a;color:#2b2800}
.tip-grade-c{background:#88b992;color:#102210}

.tip-empty{
  background:linear-gradient(180deg,rgba(84,57,15,.40),rgba(43,29,9,.36)) !important;
  border-color:#7d5a1a !important;
  color:#f0cd7a !important;
}
.tip-empty.small{
  background:linear-gradient(180deg,#0d1727,#0a121f) !important;
  color:#8ea2c8 !important;
}

.tip-effect-pill,
.tip-item-desc,
.tip-seo-link-grid,
.tip-seo-links summary{
  background:linear-gradient(180deg,#0b1421,#09111b) !important;
  border-color:#223652 !important;
}

.tip-seo-link-grid a{
  background:#0a121d !important;
  color:#dfe7f7 !important;
  border-color:#243752 !important;
}

.tip-detail-section .tip-data-table-rich::-webkit-scrollbar-track{background:#09111a}
.tip-detail-section .tip-data-table-rich::-webkit-scrollbar-thumb{background:#2a4263}
.tip-detail-section .tip-data-table-rich::-webkit-scrollbar-thumb:hover{background:#3b5b87}

@media (max-width:768px){
  .tip-detail-wrap{
    background:
      radial-gradient(circle at top right, rgba(128,70,255,.14), transparent 30%),
      radial-gradient(circle at top left, rgba(0,194,255,.10), transparent 24%),
      #07101a !important;
  }
  .tip-detail-head,
  .tip-detail-section,
  .tip-stat-grid > div,
  .tip-data-row:not(.head){
    background:linear-gradient(180deg,#0d1727 0%,#0a121f 100%) !important;
    border-color:#253855 !important;
  }
}


/* 1.4.37 - Tune colors closer to reference: deeper navy cards, soft blue borders, gold values */
:root{
  --tip-bg:#07111d;
  --tip-card:#0b1626;
  --tip-border:#263b59;
  --tip-gold:#e6c066;
  --tip-text:#eef4ff;
  --tip-dim:#8da0c2;
  --tip-hover:#13233a;
}

.tip-wrap,
.tip-detail-wrap{
  color:#eef4ff !important;
}

.tip-detail-wrap{
  background:
    radial-gradient(circle at top left, rgba(0,161,255,.08), transparent 28%),
    radial-gradient(circle at top right, rgba(131,74,255,.08), transparent 30%),
    #07111d !important;
  border:1px solid rgba(49,76,114,.72) !important;
  border-radius:22px !important;
  box-shadow:0 16px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.02);
}

.tip-detail-head,
.tip-detail-section,
.tip-stat-grid > div,
.tip-data-row,
.tip-empty.small,
.tip-item-desc,
.tip-effect-pill{
  background:linear-gradient(180deg,#0d1a2d 0%, #091423 100%) !important;
  border:1px solid rgba(50,77,116,.66) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(8,15,26,.12);
}

.tip-detail-head,
.tip-detail-section,
.tip-stat-grid > div,
.tip-item-desc,
.tip-effect-pill{
  border-radius:18px !important;
}

.tip-detail-section{
  padding:18px !important;
}

.tip-detail-section h2{
  color:#f4f8ff !important;
  font-size:18px !important;
  font-weight:800 !important;
  margin-bottom:18px !important;
  padding-bottom:14px !important;
}
.tip-detail-section h2:after{
  background:linear-gradient(90deg, rgba(228,190,101,.28) 0%, rgba(72,97,138,.24) 55%, rgba(72,97,138,0) 100%) !important;
}

.tip-detail-head h1,
.tip-row-name,
.tip-row-name-text strong,
.tip-breadcrumb-current,
.tip-tt-name{
  color:#f4f8ff !important;
}

.tip-detail-desc,
.tip-detail-sub,
.tip-detail-updated,
.tip-row-name-text small,
.tip-breadcrumb,
.tip-stat-grid span,
.tip-data-row.head,
.tip-empty.small,
.tip-tt-desc,
.tip-effect-pill span,
.tip-info-line,
.tip-seo-links p{
  color:#8ea2c6 !important;
}

.tip-breadcrumb a,
.tip-seo-links[open] summary,
.tip-desc-stat,
.tip-info-line strong,
.tip-effect-pill b,
.tip-item-desc b,
.tip-item-desc strong{
  color:#e6c066 !important;
}

.tip-window-tabs a{
  background:linear-gradient(180deg,#0e1728,#0a121f) !important;
  border:1px solid rgba(52,79,118,.72) !important;
  color:#d1ddf5 !important;
  border-radius:12px !important;
}
.tip-window-tabs a.active,
.tip-window-tabs a:hover{
  background:linear-gradient(180deg,#f1cf77,#dcab50) !important;
  border-color:#e8bf62 !important;
  color:#14100a !important;
}

.tip-stat-grid{
  gap:12px !important;
}
.tip-stat-grid > div{
  min-height:104px;
}
.tip-stat-grid b{
  color:#e6c066 !important;
  font-weight:800 !important;
  text-shadow:none !important;
}
.tip-stat-grid span{
  font-weight:700 !important;
}

.tip-data-row.head{
  background:rgba(9,18,31,.92) !important;
  border-color:rgba(49,76,114,.68) !important;
}
.tip-data-row:not(.head){
  background:linear-gradient(180deg,#0c1728,#091321) !important;
  border-color:rgba(49,76,114,.52) !important;
  border-radius:14px !important;
}
.tip-data-row:not(.head):hover{
  background:linear-gradient(180deg,#10203a,#0b172a) !important;
  border-color:rgba(76,111,162,.75) !important;
}

.tip-champ-thumb,
.tip-mini-item img,
.tip-detail-icon{
  border-color:rgba(61,91,133,.72) !important;
  box-shadow:none !important;
}

.tip-grade{
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.12);
}
.tip-grade-s{background:#f0b649 !important;color:#2f2207 !important}
.tip-grade-a{background:#1ec980 !important;color:#072717 !important}
.tip-grade-b{background:#2790ff !important;color:#061d39 !important}
.tip-grade-c{background:#7b8da8 !important;color:#0d1827 !important}

.tip-empty{
  background:linear-gradient(180deg,rgba(67,49,16,.40),rgba(39,29,10,.34)) !important;
  border-color:#87621f !important;
  color:#f0ca75 !important;
}
.tip-seo-link-grid,
.tip-seo-links summary{
  background:linear-gradient(180deg,#0d1a2d,#091423) !important;
  border-color:rgba(50,77,116,.66) !important;
}
.tip-seo-link-grid a{
  background:#0a1422 !important;
  border-color:rgba(50,77,116,.66) !important;
  color:#eef4ff !important;
}
.tip-seo-link-grid a:hover{background:#e6c066 !important;color:#0b111a !important}

.tip-detail-section .tip-data-table-rich::-webkit-scrollbar-track{background:#09111c !important}
.tip-detail-section .tip-data-table-rich::-webkit-scrollbar-thumb{background:#29415f !important}
.tip-detail-section .tip-data-table-rich::-webkit-scrollbar-thumb:hover{background:#35557d !important}

@media (max-width:768px){
  .tip-detail-wrap{
    border-radius:18px !important;
    border-color:rgba(49,76,114,.72) !important;
  }
  .tip-detail-head,
  .tip-detail-section,
  .tip-stat-grid > div,
  .tip-data-row:not(.head){
    background:linear-gradient(180deg,#0d1a2d 0%, #091423 100%) !important;
    border-color:rgba(50,77,116,.66) !important;
  }
  .tip-data-row:not(.head) > span:nth-child(n+3){
    background:rgba(255,255,255,.025) !important;
    border-color:rgba(78,104,144,.42) !important;
    color:#f4f8ff !important;
  }
  .tip-data-row:not(.head) > span:nth-child(7){
    background:rgba(105,71,204,.16) !important;
    border-color:rgba(128,91,236,.34) !important;
    color:#dcc6ff !important;
  }
}


/* 1.4.40 - Đồng bộ viền tướng với plugin Tướng + click qua trang tướng */
.tip-row-champ-link{
    text-decoration:none !important;
    color:inherit !important;
    border-radius:12px;
    transition:transform .15s ease, color .15s ease, opacity .15s ease;
}
.tip-row-champ-link:hover{
    transform:translateY(-1px);
    opacity:.96;
}
.tip-row-champ-link:hover .tip-row-name-text strong{
    color:var(--unit-cost-color,#e6c066) !important;
}
.tip-row-champ-link .tip-champ-thumb{
    border-width:2px !important;
    border-style:solid !important;
    border-color:var(--unit-cost-color,#3d5b85) !important;
    background:#0b1422 !important;
}
.tip-unit-cost-c1 .tip-champ-thumb{border-color:#8d9097 !important;box-shadow:0 0 12px rgba(141,144,151,.28) !important}
.tip-unit-cost-c2 .tip-champ-thumb{border-color:#3fbf74 !important;box-shadow:0 0 12px rgba(63,191,116,.28) !important}
.tip-unit-cost-c3 .tip-champ-thumb{border-color:#34a3ff !important;box-shadow:0 0 12px rgba(52,163,255,.28) !important}
.tip-unit-cost-c4 .tip-champ-thumb{border-color:#cf72ff !important;box-shadow:0 0 12px rgba(207,114,255,.30) !important}
.tip-unit-cost-c5 .tip-champ-thumb{border-color:#ffb81f !important;box-shadow:0 0 12px rgba(255,184,31,.30) !important}
.tip-unit-cost-c1 .tip-row-name-text strong{color:#c7cbd3 !important}
.tip-unit-cost-c2 .tip-row-name-text strong{color:#77dda1 !important}
.tip-unit-cost-c3 .tip-row-name-text strong{color:#7cc3ff !important}
.tip-unit-cost-c4 .tip-row-name-text strong{color:#e1a8ff !important}
.tip-unit-cost-c5 .tip-row-name-text strong{color:#ffd36a !important}
@media(max-width:768px){
  .tip-row-champ-link{width:100%}
}

/* Tier A* = dữ liệu ít nhưng chỉ số đẹp, không cho nhảy thẳng S */
.tip-grade-a-star{background:#26d69a !important;color:#061f16 !important;font-size:14px !important;letter-spacing:-.5px}

/* 1.4.78 - Tooltip dùng chung mô tả sạch giống trang chi tiết, chống lộ tag Riot/CDragon */
.tip-wrap .tip-tooltip{
  position:fixed;
  z-index:999999;
  align-items:flex-start;
  gap:12px;
  width:min(390px,calc(100vw - 22px));
  max-width:390px !important;
  min-width:310px;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(180deg,#101827 0%,#0a1220 100%) !important;
  border:1px solid rgba(64,94,136,.86) !important;
  color:#eef4ff !important;
  box-shadow:0 18px 46px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.035) inset;
  pointer-events:none;
  backdrop-filter:blur(8px);
}
.tip-wrap .tip-tooltip-img{flex:0 0 62px}
.tip-wrap .tip-tooltip-img img{
  width:62px !important;
  height:62px !important;
  max-width:none !important;
  object-fit:contain !important;
  border-radius:12px !important;
  border:1px solid rgba(83,117,168,.92) !important;
  background:#07101d !important;
  box-shadow:0 0 18px rgba(64,137,255,.12),inset 0 1px 0 rgba(255,255,255,.05);
}
.tip-wrap .tip-tooltip-body{min-width:0;flex:1 1 auto}
.tip-wrap .tip-tt-name{
  margin:0 0 7px !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  color:#f6f8ff !important;
  letter-spacing:-.1px;
}
.tip-wrap .tip-tt-badge{
  margin:0 0 9px !important;
  padding:3px 8px !important;
  border-radius:7px !important;
  display:inline-flex !important;
  align-items:center;
  width:auto;
  max-width:100%;
  font-size:10px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  background:rgba(130,82,255,.16) !important;
  border:1px solid rgba(142,106,255,.28) !important;
  color:#d9c7ff !important;
}
.tip-wrap .tip-tt-desc{
  margin:0 0 10px !important;
  font-size:12.5px !important;
  line-height:1.62 !important;
  color:#b9c8e4 !important;
  word-break:normal;
  overflow-wrap:anywhere;
}
.tip-wrap .tip-tt-desc .tip-desc-stat{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:22px;
  padding:1px 6px !important;
  margin:0 2px !important;
  border-radius:6px !important;
  background:rgba(230,192,102,.18) !important;
  border:1px solid rgba(230,192,102,.48) !important;
  color:#f2cf76 !important;
  font-weight:900 !important;
  line-height:1.25 !important;
  white-space:nowrap;
  text-shadow:none !important;
}
.tip-wrap .tip-tt-stat-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 8px;
}
.tip-wrap .tip-tt-stat{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(90,122,170,.45);
  background:rgba(255,255,255,.035);
  border-radius:999px;
  padding:2px 7px;
  font-size:10.5px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
}
.tip-wrap .tip-tt-unique{
  display:inline-flex;
  align-items:center;
  margin:0 0 8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10.5px;
  line-height:1.25;
  color:#f2cf76;
  background:rgba(230,192,102,.12);
  border:1px solid rgba(230,192,102,.34);
  font-weight:900;
}
.tip-wrap .tip-tt-empty{color:#7f91ad;font-style:italic}
.tip-wrap .tip-tt-recipe{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.tip-wrap .tip-tt-recipe:empty{display:none}
.tip-wrap .tip-tt-recipe img{
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
  border-radius:7px !important;
  border:1px solid rgba(75,101,142,.88) !important;
  background:#07101d !important;
}
.tip-wrap .tip-tt-plus,.tip-wrap .tip-tt-eq{font-weight:900;color:#6f7f99 !important}
@media(max-width:768px){.tip-wrap .tip-tooltip{display:none !important}}

/* 1.4.79: trạng thái tải mô tả tooltip, tránh hiện nhầm "Không có mô tả" khi AJAX chưa trả về */
.tip-wrap .tip-tt-loading{
  display:inline-block;
  color:#9fb2d9;
  font-size:12px;
  line-height:1.55;
}


/* v1.4.83: hiển thị chỉ số nền của item giống tooltip TFT */
.tip-wrap .tip-tt-stat-list{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:3px !important;
  margin:2px 0 9px !important;
}
.tip-wrap .tip-tt-stat{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  color:#b7c8e5 !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  white-space:normal !important;
}
.tip-wrap .tip-tt-stat-ico{width:17px;min-width:17px;text-align:center;filter:drop-shadow(0 0 5px rgba(85,180,255,.22))}
.tip-wrap .tip-tt-stat.s-ad .tip-tt-stat-ico{color:#f5a447}
.tip-wrap .tip-tt-stat.s-ap .tip-tt-stat-ico{color:#7feaff}
.tip-wrap .tip-tt-stat.s-manaregen .tip-tt-stat-ico,
.tip-wrap .tip-tt-stat.s-mana .tip-tt-stat-ico{color:#71a8ff}
.tip-detail-base-stats{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:7px 0 9px;
}
.tip-base-stat{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(88,134,190,.34);
  background:rgba(14,24,42,.62);
  color:#c9d9f3;
  font-size:12px;
  font-weight:900;
  line-height:1.2;
}
.tip-base-stat.s-ad{border-color:rgba(245,164,71,.32);color:#ffd0a0}
.tip-base-stat.s-ap{border-color:rgba(127,234,255,.28);color:#bdf5ff}
.tip-base-stat.s-manaregen,.tip-base-stat.s-mana{border-color:rgba(113,168,255,.3);color:#c5daff}
@media(max-width:768px){.tip-detail-base-stats{gap:5px}.tip-base-stat{font-size:11px;padding:4px 7px}}


/* v1.4.85: PNG icon chỉ số tùy chỉnh */
.tip-wrap .tip-tt-stat-ico{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  min-width:18px !important;
  height:18px !important;
  line-height:18px !important;
  text-align:center !important;
}
.tip-wrap .tip-stat-img{
  width:17px !important;
  height:17px !important;
  max-width:17px !important;
  max-height:17px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 0 5px rgba(105,180,255,.32));
}
.tip-wrap .tip-base-stat{
  gap:6px !important;
}
.tip-wrap .tip-base-stat .tip-stat-img{
  width:16px !important;
  height:16px !important;
  max-width:16px !important;
  max-height:16px !important;
}
.tip-wrap .tip-tt-stat.s-ad .tip-stat-img,
.tip-wrap .tip-base-stat.s-ad .tip-stat-img{filter:drop-shadow(0 0 6px rgba(245,164,71,.42))}
.tip-wrap .tip-tt-stat.s-ap .tip-stat-img,
.tip-wrap .tip-base-stat.s-ap .tip-stat-img{filter:drop-shadow(0 0 6px rgba(127,234,255,.38))}
.tip-wrap .tip-tt-stat.s-hp .tip-stat-img,
.tip-wrap .tip-base-stat.s-hp .tip-stat-img{filter:drop-shadow(0 0 6px rgba(80,220,150,.38))}
.tip-wrap .tip-tt-stat.s-mana .tip-stat-img,
.tip-wrap .tip-tt-stat.s-manaregen .tip-stat-img,
.tip-wrap .tip-base-stat.s-mana .tip-stat-img,
.tip-wrap .tip-base-stat.s-manaregen .tip-stat-img{filter:drop-shadow(0 0 6px rgba(100,170,255,.38))}
.tip-detail-wrap .tip-stat-img{
  width:16px !important;
  height:16px !important;
  max-width:16px !important;
  max-height:16px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 0 5px rgba(105,180,255,.32));
}
.tip-detail-wrap .tip-base-stat{gap:6px !important}
.tip-detail-wrap .tip-base-stat.s-ad .tip-stat-img{filter:drop-shadow(0 0 6px rgba(245,164,71,.42))}
.tip-detail-wrap .tip-base-stat.s-ap .tip-stat-img{filter:drop-shadow(0 0 6px rgba(127,234,255,.38))}
.tip-detail-wrap .tip-base-stat.s-hp .tip-stat-img{filter:drop-shadow(0 0 6px rgba(80,220,150,.38))}
.tip-detail-wrap .tip-base-stat.s-mana .tip-stat-img,
.tip-detail-wrap .tip-base-stat.s-manaregen .tip-stat-img{filter:drop-shadow(0 0 6px rgba(100,170,255,.38))}

/* v1.4.86: tooltip style tối giống mẫu admin gửi */
.tip-wrap .tip-tooltip{
  position:fixed !important;
  z-index:999999 !important;
  width:min(292px,calc(100vw - 22px)) !important;
  min-width:260px !important;
  max-width:292px !important;
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) !important;
  column-gap:10px !important;
  row-gap:0 !important;
  align-items:center !important;
  padding:12px 13px !important;
  border-radius:10px !important;
  background:#111827 !important;
  border:1px solid #1f2937 !important;
  color:#d1d5db !important;
  box-shadow:0 16px 40px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025) inset !important;
  pointer-events:none !important;
  backdrop-filter:none !important;
  animation:tipFade .14s ease !important;
  overflow:visible !important;
}
.tip-wrap .tip-tooltip::after{
  content:'';
  position:absolute;
  top:50%;
  left:-7px;
  transform:translateY(-50%) rotate(45deg);
  width:12px;
  height:12px;
  background:#111827;
  border-left:1px solid #1f2937;
  border-bottom:1px solid #1f2937;
  border-radius:2px;
}
.tip-wrap .tip-tooltip.tip-pos-left::after{
  left:auto;
  right:-7px;
  border-left:0;
  border-bottom:0;
  border-right:1px solid #1f2937;
  border-top:1px solid #1f2937;
}
.tip-wrap .tip-tooltip-img{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  flex:0 0 46px !important;
  width:46px !important;
  height:46px !important;
  align-self:start !important;
}
.tip-wrap .tip-tooltip-img img{
  width:46px !important;
  height:46px !important;
  max-width:46px !important;
  max-height:46px !important;
  object-fit:contain !important;
  border-radius:8px !important;
  border:2px solid #374151 !important;
  background:linear-gradient(135deg,#1a3a5c,#0d2035) !important;
  box-shadow:none !important;
  padding:0 !important;
}
.tip-wrap .tip-tooltip-body{display:contents !important}
.tip-wrap .tip-tt-name{
  grid-column:2 !important;
  grid-row:1 !important;
  margin:1px 0 4px !important;
  padding:0 !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:#f9fafb !important;
  letter-spacing:0 !important;
  min-width:0 !important;
}
.tip-wrap .tip-tt-badge{
  grid-column:2 !important;
  grid-row:2 !important;
  justify-self:start !important;
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 0 10px !important;
  padding:2px 8px !important;
  border-radius:999px !important;
  border:0 !important;
  background:#1f2937 !important;
  color:#9ca3af !important;
  font-size:9px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
.tip-wrap .tip-tt-desc{
  grid-column:1 / -1 !important;
  grid-row:3 !important;
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-size:11.5px !important;
  line-height:1.65 !important;
  color:#9ca3af !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
}
.tip-wrap .tip-tt-unique{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 0 8px !important;
  padding:2px 8px !important;
  border-radius:999px !important;
  border:1px solid rgba(245,158,11,.28) !important;
  background:#292218 !important;
  color:#f59e0b !important;
  font-size:10px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}
.tip-wrap .tip-tt-stat-list{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:4px !important;
  width:100% !important;
  margin:0 0 8px !important;
}
.tip-wrap .tip-tt-stat{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  gap:8px !important;
  padding:5px 8px !important;
  border:0 !important;
  border-radius:6px !important;
  background:#1f2937 !important;
  color:#d1d5db !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  white-space:normal !important;
}
.tip-wrap .tip-tt-stat-ico{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  min-width:16px !important;
  height:16px !important;
  line-height:16px !important;
  text-align:center !important;
  font-size:14px !important;
  filter:none !important;
}
.tip-wrap .tip-stat-img{
  width:15px !important;
  height:15px !important;
  max-width:15px !important;
  max-height:15px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 0 4px rgba(105,180,255,.24)) !important;
}
.tip-wrap .tip-tt-stat-label{
  flex:1 1 auto !important;
  min-width:0 !important;
  color:#d1d5db !important;
  font-weight:500 !important;
}
.tip-wrap .tip-tt-stat-val{
  margin-left:auto !important;
  color:#34d399 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
.tip-wrap .tip-tt-desc::before{
  content:'';
  display:block;
  height:1px;
  background:#1f2937;
  margin:8px 0;
}
.tip-wrap .tip-tt-desc .tip-desc-stat{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:auto !important;
  margin:0 2px !important;
  padding:1px 6px !important;
  border-radius:4px !important;
  border:0 !important;
  background:#292218 !important;
  color:#f59e0b !important;
  font-weight:800 !important;
  line-height:1.3 !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}
.tip-wrap .tip-tt-empty,
.tip-wrap .tip-tt-loading{
  color:#6b7280 !important;
  font-style:italic !important;
  font-size:11.5px !important;
  line-height:1.65 !important;
}
.tip-wrap .tip-tt-recipe{
  grid-column:1 / -1 !important;
  grid-row:4 !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  width:100% !important;
  margin:10px 0 0 !important;
  padding:6px 8px !important;
  border-radius:7px !important;
  background:#1f2937 !important;
}
.tip-wrap .tip-tt-recipe:empty{display:none !important}
.tip-wrap .tip-tt-recipe img{
  width:32px !important;
  height:32px !important;
  max-width:32px !important;
  max-height:32px !important;
  object-fit:contain !important;
  border-radius:6px !important;
  border:0 !important;
  background:#111827 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.tip-wrap .tip-tt-plus,
.tip-wrap .tip-tt-eq{
  font-size:14px !important;
  line-height:1 !important;
  font-weight:400 !important;
  color:#4b5563 !important;
}
@media(max-width:768px){.tip-wrap .tip-tooltip{display:none !important}}

/* v1.4.87: Fix tooltip bị kẹt khi rê chuột ra.
   CSS cũ có display:grid !important nên JS display:none không ẩn được. */
.tip-wrap .tip-tooltip{
  display:none !important;
}
.tip-wrap .tip-tooltip.tip-tooltip-visible{
  display:grid !important;
}
@media(max-width:768px){
  .tip-wrap .tip-tooltip.tip-tooltip-visible{display:none !important;}
}


/* ===== 1.5.01 · Internal link SEO Mùa 18 ===== */
.tip-season18-links{margin:22px 0 8px;padding:18px 20px;border:1px solid rgba(127,86,217,.24);border-radius:14px;background:rgba(127,86,217,.055)}
.tip-season18-links h2{margin:0 0 8px;font-size:20px;line-height:1.35}
.tip-season18-links p{margin:0 0 14px;line-height:1.7}
.tip-season18-links a{text-decoration:none}
.tip-season18-links .tip-season18-primary{font-weight:700;color:#00ff84 !important;text-decoration:none !important}
.tip-season18-links--compact{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;margin:18px 0 6px;padding:12px 14px;font-size:14px}
@media (max-width:780px){.tip-season18-links{padding:15px}.tip-season18-links h2{font-size:18px}}


/* ===== 1.5.03 · Thu gọn khối internal link ở trang chi tiết =====
 * Desktop có rule chung .tip-detail-section { min-height:390px },
 * khiến khối SEO 2 dòng bị kéo cao và tạo khoảng trống lớn.
 */
.tip-detail-section.tip-season18-links{
  min-height:0 !important;
  height:auto !important;
  display:block !important;
  flex:none !important;
  padding:14px 16px !important;
  margin-top:16px !important;
  margin-bottom:0 !important;
}
.tip-detail-section.tip-season18-links h2{
  margin:0 0 10px !important;
  padding-bottom:9px !important;
  line-height:1.3 !important;
}
.tip-detail-section.tip-season18-links p{
  margin:0 !important;
  line-height:1.6 !important;
}
@media (max-width:780px){
  .tip-detail-section.tip-season18-links{padding:13px 14px !important;}
}


/* ===== 1.5.04 · Anchor Đội Hình TFT Mùa 18 ===== */
.tip-season18-links .tip-season18-primary,
.tip-season18-links .tip-season18-primary:visited,
.tip-season18-links .tip-season18-primary:hover,
.tip-season18-links .tip-season18-primary:focus{
  color:#00ff84 !important;
  text-decoration:none !important;
}