/* ============================================
   TFT Augments Page — Dark UI
   ============================================ */
:root {
    --tap-bg: #0f1218;
    --tap-card: #16181f;
    --tap-border: #252838;
    --tap-text: #c8c0b0;
    --tap-dim: #666;
    --tap-hover: #2a2e40;
    --tap-silver: #94a3b8;
    --tap-silver-bg: #1e293b;
    --tap-gold: #fbbf24;
    --tap-gold-bg: #422006;
    --tap-diamond: #60a5fa;
    --tap-diamond-bg: #172554;
}

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



/* ===== SEO INTRO ===== */
.tap-seo-intro {
    margin:0 14px 14px;
    padding:16px 18px;
    border:1px solid var(--tap-border);
    border-radius:8px;
    background:linear-gradient(135deg,rgba(251,191,36,.06),rgba(255,255,255,.015));
}
.tap-seo-intro__label {
    display:block;
    margin-bottom:6px;
    color:var(--tap-gold);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.tap-seo-intro p {
    margin:0;
    color:var(--tap-text);
    font-size:14px;
    line-height:1.75;
}
.tap-seo-intro__tiers {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px;
}
.tap-seo-tier {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}
.tap-seo-tier--silver { color:var(--tap-silver); background:rgba(148,163,184,.08); }
.tap-seo-tier--gold { color:var(--tap-gold); background:rgba(251,191,36,.08); }
.tap-seo-tier--diamond { color:var(--tap-diamond); background:rgba(96,165,250,.08); }

/* ===== TABS ===== */
.tap-tabs-bar { display:flex; align-items:center; gap:4px; padding:12px 14px 0; background:var(--tap-card); border-bottom:1px solid var(--tap-border); flex-wrap:wrap; }
.tap-tab { padding:10px 18px; border:none; background:transparent; color:var(--tap-dim); font-size:13px; font-weight:700; cursor:pointer; border-bottom:3px solid transparent; transition:all .15s; letter-spacing:.3px; display:flex; align-items:center; gap:5px; }
.tap-tab:hover { color:var(--tap-text); }
.tap-tab.active[data-tab="silver"]  { color:var(--tap-silver);  border-bottom-color:var(--tap-silver); }
.tap-tab.active[data-tab="gold"]    { color:var(--tap-gold);    border-bottom-color:var(--tap-gold); }
.tap-tab.active[data-tab="diamond"] { color:var(--tap-diamond); border-bottom-color:var(--tap-diamond); }
.tap-tab-icon { font-size:15px; }
.tap-search-wrap { margin-left:auto; }
.tap-search-wrap input { background:#0e1015; border:1px solid var(--tap-border); color:var(--tap-text); padding:7px 12px; border-radius:6px; font-size:12px; width:200px; }
.tap-search-wrap input:focus { border-color:var(--tap-gold); outline:none; }

/* ===== COUNTERS ===== */
.tap-tab-counters { display:flex; gap:12px; padding:10px 14px; background:var(--tap-card); border-bottom:1px solid var(--tap-border); }
.tap-counter { font-size:12px; color:var(--tap-dim); }
.tap-counter strong { color:var(--tap-text); }

/* ===== PANEL ===== */
.tap-panel { padding:14px; }
.tap-loading { text-align:center; padding:40px; color:var(--tap-dim); font-size:14px; }

/* ===== GRID ===== */
.tap-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px; }

/* ===== AUGMENT CARD ===== */
.tap-aug {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid var(--tap-border);
    background:var(--tap-card);
    cursor:pointer;
    transition:transform .12s, border-color .12s, background .12s;
}
.tap-aug:hover { transform:translateY(-1px); background:var(--tap-hover); z-index:2; }

/* Tier borders */
.tap-aug[data-tier="silver"]:hover  { border-color:var(--tap-silver); }
.tap-aug[data-tier="gold"]:hover    { border-color:var(--tap-gold); }
.tap-aug[data-tier="diamond"]:hover { border-color:var(--tap-diamond); }

/* Icon */
.tap-aug-icon {
    width:42px; height:42px;
    border-radius:8px;
    border:2px solid #2a2e3a;
    overflow:hidden;
    flex-shrink:0;
    background:#1e2030;
}
.tap-aug[data-tier="silver"]  .tap-aug-icon { border-color:var(--tap-silver); }
.tap-aug[data-tier="gold"]    .tap-aug-icon { border-color:var(--tap-gold); }
.tap-aug[data-tier="diamond"] .tap-aug-icon { border-color:var(--tap-diamond); }
.tap-aug-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.tap-aug-icon-fb { width:100%; height:100%; display:none; align-items:center; justify-content:center; font-size:10px; color:#666; background:#1e2030; }

/* Info */
.tap-aug-info { flex:1; min-width:0; }
.tap-aug-name { font-size:13px; font-weight:700; color:#e8e0d0; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tap-aug-desc { font-size:11px; color:var(--tap-dim); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Stages */
.tap-aug-stages { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.tap-aug-stage { font-size:10px; padding:1px 6px; border-radius:3px; background:rgba(255,255,255,.06); color:var(--tap-dim); font-weight:600; }

/* ===== TOOLTIP ===== */
.tap-tooltip {
    position:fixed; z-index:99999;
    max-width:340px; min-width:260px;
    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:tapFade .12s ease;
    display:flex; gap:12px; align-items:flex-start;
}
@keyframes tapFade { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }
.tap-tooltip-img img { width:56px; height:56px; border-radius:8px; border:2px solid #444; display:block; flex-shrink:0; }
.tap-tooltip-body { flex:1; min-width:0; }
.tap-tt-name { font-size:15px; font-weight:700; color:#e8e0d0; margin-bottom:4px; }
.tap-tt-tier { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; display:inline-block; margin-bottom:6px; }
.tap-tt-tier-silver  { background:var(--tap-silver-bg);  color:var(--tap-silver); }
.tap-tt-tier-gold    { background:var(--tap-gold-bg);    color:var(--tap-gold); }
.tap-tt-tier-diamond { background:var(--tap-diamond-bg); color:var(--tap-diamond); }
.tap-tt-desc { font-size:12px; color:#b0a890; line-height:1.5; margin-bottom:6px; }
.tap-tt-stages { display:flex; gap:4px; flex-wrap:wrap; }
.tap-tt-stage { font-size:11px; padding:2px 8px; border-radius:4px; background:rgba(255,255,255,.08); color:#94a3b8; font-weight:600; }

/* ===== NO RESULTS ===== */
.tap-no-results { text-align:center; padding:30px; color:var(--tap-dim); font-size:14px; grid-column:1/-1; }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
    .tap-tabs-bar { flex-wrap:wrap; gap:2px; padding:8px 10px 0; }
    .tap-tab { padding:8px 12px; font-size:11px; }
    .tap-search-wrap { width:100%; margin:6px 0 4px; }
    .tap-search-wrap input { width:100%; }
    .tap-grid { grid-template-columns:1fr; }
    .tap-panel { padding:10px; }
    .tap-seo-intro { margin:0 10px 10px; padding:14px; }
    .tap-seo-intro p { font-size:13px; }
}

@media (max-width:480px) {
    .tap-tab { padding:6px 8px; font-size:10px; gap:3px; }
    .tap-tab-icon { font-size:12px; }
}

/* ===== v1.1.2: cleaner round/stage display ===== */
.tap-aug-desc,
.tap-tt-desc {
    word-spacing: normal;
    letter-spacing: 0;
}
.tap-aug-stages {
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:7px;
    flex-wrap:wrap;
    clear:both;
}
.tap-stage-label,
.tap-tt-stage-label {
    font-size:10px;
    line-height:1;
    color:#7f8da3;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.35px;
    margin-right:1px;
}
.tap-aug-stage {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:20px;
    padding:0 7px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.28);
    background:rgba(15,23,42,.72);
    color:#cbd5e1;
    font-size:11px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.tap-aug[data-tier="silver"] .tap-aug-stage { border-color:rgba(148,163,184,.42); color:#dbe4ef; }
.tap-aug[data-tier="gold"] .tap-aug-stage { border-color:rgba(251,191,36,.38); color:#fde68a; background:rgba(66,32,6,.54); }
.tap-aug[data-tier="diamond"] .tap-aug-stage { border-color:rgba(96,165,250,.38); color:#bfdbfe; background:rgba(23,37,84,.54); }
.tap-tt-stages-wrap {
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid rgba(148,163,184,.16);
}
.tap-tt-stage-label {
    display:block;
    margin-bottom:7px;
}
.tap-tt-stages {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.tap-tt-stage {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:23px;
    padding:0 9px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.32);
    background:#1e293b;
    color:#e2e8f0;
    font-size:12px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.tap-tooltip {
    overflow-wrap:break-word;
}
@media (max-width:480px) {
    .tap-tooltip { max-width:calc(100vw - 20px); min-width:0; }
    .tap-aug-stage { min-width:32px; height:19px; font-size:10px; }
}
.tap-tt-stages-list {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.tap-tooltip .tap-tt-stages { display:block; }


/* ===== v1.1.3: force rounds out of description and improve tooltip spacing ===== */
.tap-aug-info,
.tap-tooltip-body { min-width:0; }
.tap-aug-desc {
    margin-top:2px;
    margin-bottom:0;
}
.tap-aug-stages {
    width:100%;
    margin-top:8px !important;
}
.tap-tooltip {
    max-width:390px;
    min-width:310px;
    gap:13px;
}
.tap-tt-desc {
    display:block;
    margin:7px 0 0;
    white-space:normal;
}
.tap-tt-stages {
    width:100%;
    margin-top:0;
}
.tap-tt-stages-wrap {
    display:block;
    width:100%;
}
.tap-tt-stages-list {
    display:flex !important;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
@media (max-width:480px) {
    .tap-tooltip { max-width:calc(100vw - 20px); min-width:0; }
}

/* ===== v1.3.0: giao diện Gaming HUD theo file mẫu ===== */
.tap-layout-gaming {
    --tap-g-bg:#05070c;
    --tap-g-card:#0a0f18;
    --tap-g-text:#e9eef7;
    --tap-g-dim:#8b96ab;
    --tap-g-line:#1a2233;
    --tap-g-silver:#b8c4d6;
    --tap-g-silver-glow:rgba(184,196,214,.5);
    --tap-g-gold:#ffb020;
    --tap-g-gold-glow:rgba(255,176,32,.5);
    --tap-g-diamond:#59e0ff;
    --tap-g-diamond-glow:rgba(89,224,255,.55);
    --tap-g-display:'Chakra Petch',sans-serif;
    --tap-g-body:'Be Vietnam Pro',sans-serif;
    --tap-g-cut:16px;
    --tap-g-clip:polygon(var(--tap-g-cut) 0,100% 0,100% calc(100% - var(--tap-g-cut)),calc(100% - var(--tap-g-cut)) 100%,0 100%,0 var(--tap-g-cut));
    --tap-g-top-bleed:140px;

    width:100vw;
    max-width:none;
    min-height:100vh;
    margin-top:calc(-1 * var(--tap-g-top-bleed));
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* Thu gọn khoảng trống phía trên nhưng vẫn giữ nền phủ lên khu vực sát thanh cập nhật. */
    padding:56px 24px 48px;
    border-radius:0;
    overflow:hidden;
    isolation:isolate;
    position:relative;
    font-family:var(--tap-g-body);
    color:var(--tap-g-text);
    background:var(--tap-g-bg);
    box-shadow:0 calc(-1 * var(--tap-g-top-bleed)) 0 var(--tap-g-top-bleed) var(--tap-g-bg);
}
.tap-layout-gaming::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(ellipse 800px 480px at 15% -5%,rgba(255,176,32,.07),transparent 60%),
        radial-gradient(ellipse 700px 480px at 95% 8%,rgba(89,224,255,.06),transparent 60%),
        repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.018) 39px 40px),
        repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.018) 39px 40px);
}
.tap-layout-gaming::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.35;
    background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.12) 2px 4px);
}
.tap-layout-gaming,
.tap-layout-gaming * {
    box-sizing:border-box;
}
.tap-layout-gaming > * {
    width:100%;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    z-index:1;
}

/* Tiêu đề kiểu bảng đấu esports */
.tap-layout-gaming .tap-page-head {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:30px;
}
.tap-layout-gaming .tap-page-head::before {
    content:'';
    width:5px;
    height:34px;
    flex:none;
    background:var(--tap-g-gold);
    clip-path:polygon(0 0,100% 6px,100% 100%,0 calc(100% - 6px));
    box-shadow:0 0 14px var(--tap-g-gold-glow);
}
.tap-layout-gaming .tap-section-title {
    margin:0;
    padding:0;
    background:none;
    color:var(--tap-g-text);
    font-family:var(--tap-g-display);
    font-size:28px;
    font-weight:700;
    line-height:1.1;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.tap-layout-gaming .tap-section-title span {
    color:var(--tap-g-gold);
    text-shadow:0 0 18px var(--tap-g-gold-glow);
}



/* Mô tả SEO ngắn gọn, nổi bật nhưng không chiếm quá nhiều chiều cao */
.tap-layout-gaming .tap-page-head {
    margin-bottom:16px;
}
.tap-layout-gaming .tap-seo-intro {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:0 auto 24px;
    padding:17px 20px 18px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(255,176,32,.22);
    border-radius:0;
    clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
    background:
        linear-gradient(90deg,rgba(255,176,32,.085),transparent 38%),
        linear-gradient(145deg,rgba(15,21,34,.96),rgba(7,11,18,.96));
    box-shadow:inset 3px 0 0 var(--tap-g-gold),0 12px 30px rgba(0,0,0,.16);
}
.tap-layout-gaming .tap-seo-intro::after {
    content:'';
    position:absolute;
    right:-35px;
    bottom:-48px;
    width:170px;
    height:120px;
    opacity:.075;
    pointer-events:none;
    transform:rotate(-8deg);
    background:repeating-linear-gradient(-45deg,var(--tap-g-gold) 0 2px,transparent 2px 9px);
}
.tap-layout-gaming .tap-seo-intro__copy {
    min-width:0;
    max-width:930px;
    position:relative;
    z-index:1;
}
.tap-layout-gaming .tap-seo-intro__label {
    margin:0 0 5px;
    color:var(--tap-g-gold);
    font-family:var(--tap-g-display);
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.tap-layout-gaming .tap-seo-intro p {
    margin:0;
    color:#aeb8c9;
    font-family:var(--tap-g-body);
    font-size:14px;
    font-weight:400;
    line-height:1.75;
}
.tap-layout-gaming .tap-seo-intro__tiers {
    display:flex;
    justify-content:flex-end;
    gap:7px;
    flex:0 0 auto;
    margin:0;
    position:relative;
    z-index:1;
}
.tap-layout-gaming .tap-seo-tier {
    min-height:29px;
    padding:6px 10px;
    border-radius:0;
    clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
    background:#0b111c;
    font-family:var(--tap-g-display);
    font-size:10px;
    font-weight:700;
    line-height:1;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.tap-layout-gaming .tap-seo-tier--silver { color:var(--tap-g-silver); border-color:rgba(184,196,214,.32); }
.tap-layout-gaming .tap-seo-tier--gold { color:var(--tap-g-gold); border-color:rgba(255,176,32,.38); }
.tap-layout-gaming .tap-seo-tier--diamond { color:var(--tap-g-diamond); border-color:rgba(89,224,255,.34); }

/* Tab vát góc */
.tap-layout-gaming .tap-tabs-bar {
    display:flex;
    align-items:stretch;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:30px;
    padding:0;
    background:none;
    border:0;
}
.tap-layout-gaming .tap-tab {
    display:block;
    padding:12px 22px;
    border:0;
    border-bottom:0;
    border-radius:0;
    outline:0;
    cursor:pointer;
    color:var(--tap-g-dim);
    background:var(--tap-g-card);
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
    font-family:var(--tap-g-display);
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:.1em;
    text-transform:uppercase;
    transition:color .2s,background .2s,box-shadow .2s;
}
.tap-layout-gaming .tap-tab:hover {
    color:var(--tap-g-text);
    background:#0f1522;
}
.tap-layout-gaming .tap-tab--silver.active {
    color:#05070c;
    background:var(--tap-g-silver);
    box-shadow:0 0 20px var(--tap-g-silver-glow);
}
.tap-layout-gaming .tap-tab--gold.active {
    color:#05070c;
    background:var(--tap-g-gold);
    box-shadow:0 0 20px var(--tap-g-gold-glow);
}
.tap-layout-gaming .tap-tab--diamond.active {
    color:#05070c;
    background:var(--tap-g-diamond);
    box-shadow:0 0 20px var(--tap-g-diamond-glow);
}

/* Ô tìm kiếm */
.tap-layout-gaming .tap-search-row {
    display:flex;
    justify-content:flex-end;
    margin-bottom:28px;
}
.tap-layout-gaming .tap-search-wrap {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    max-width:300px;
    margin:0;
    padding:11px 20px;
    color:var(--tap-g-dim);
    background:var(--tap-g-card);
    border:1px solid var(--tap-g-line);
    border-radius:0;
    clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
    transition:border-color .2s;
}
.tap-layout-gaming .tap-search-wrap:focus-within {
    border-color:var(--tap-g-gold);
}
.tap-layout-gaming .tap-search-wrap svg {
    flex:none;
    color:var(--tap-g-dim);
}
.tap-layout-gaming .tap-search-wrap input {
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    outline:0;
    color:var(--tap-g-text);
    background:none;
    box-shadow:none;
    font-family:var(--tap-g-body);
    font-size:14px;
    line-height:1.4;
}
.tap-layout-gaming .tap-search-wrap input:focus {
    border:0;
    outline:0;
    box-shadow:none;
}
.tap-layout-gaming .tap-search-wrap input::placeholder {
    color:var(--tap-g-dim);
    opacity:1;
}
.tap-layout-gaming .tap-tab-counters {
    display:none;
}

/* Grid 3 cột */
.tap-layout-gaming .tap-panel {
    padding:0;
}
.tap-layout-gaming .tap-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    align-items:stretch;
}

.tap-layout-gaming .tap-loading,
.tap-layout-gaming .tap-no-results {
    grid-column:1/-1;
    padding:40px;
    color:var(--tap-g-dim);
    background:transparent;
    text-align:center;
    font-size:14px;
}

/* Thẻ HUD hai lớp, viền glow theo bậc */
.tap-layout-gaming .tap-aug {
    --tap-tier:var(--tap-g-gold);
    --tap-tier-glow:var(--tap-g-gold-glow);
    display:block;
    min-width:0;
    height:100%;
    padding:1.5px;
    border:0;
    border-radius:0;
    clip-path:var(--tap-g-clip);
    background:linear-gradient(160deg,
        color-mix(in srgb,var(--tap-tier) 65%,transparent),
        color-mix(in srgb,var(--tap-tier) 12%,transparent) 55%,
        color-mix(in srgb,var(--tap-tier) 45%,transparent));
    cursor:default;
    transition:transform .22s ease,filter .22s ease;
}
.tap-layout-gaming .tap-aug--silver {
    --tap-tier:var(--tap-g-silver);
    --tap-tier-glow:var(--tap-g-silver-glow);
}
.tap-layout-gaming .tap-aug--diamond {
    --tap-tier:var(--tap-g-diamond);
    --tap-tier-glow:var(--tap-g-diamond-glow);
}
.tap-layout-gaming .tap-aug-inner {
    height:100%;
    min-height:100%;
    display:flex;
    flex-direction:column;
    padding:22px 22px 24px;
    overflow:hidden;
    position:relative;
    clip-path:var(--tap-g-clip);
    background:linear-gradient(160deg,color-mix(in srgb,var(--tap-tier) 7%,var(--tap-g-card)),var(--tap-g-card) 45%);
}
.tap-layout-gaming .tap-aug-inner::before {
    content:'';
    position:absolute;
    right:-20px;
    bottom:-20px;
    width:110px;
    height:110px;
    opacity:.10;
    pointer-events:none;
    background:repeating-linear-gradient(-45deg,var(--tap-tier) 0 3px,transparent 3px 10px);
}
.tap-layout-gaming .tap-aug-inner::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    transform:translateX(-130%);
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%);
}
.tap-layout-gaming .tap-aug:hover {
    z-index:2;
    transform:translateY(-4px);
    background:linear-gradient(160deg,
        color-mix(in srgb,var(--tap-tier) 65%,transparent),
        color-mix(in srgb,var(--tap-tier) 12%,transparent) 55%,
        color-mix(in srgb,var(--tap-tier) 45%,transparent));
    filter:drop-shadow(0 0 16px var(--tap-tier-glow)) drop-shadow(0 10px 24px rgba(0,0,0,.5));
}
.tap-layout-gaming .tap-aug:hover .tap-aug-inner::after {
    transform:translateX(130%);
    transition:transform .65s ease;
}

/* Icon lõi: giữ nền lục giác, bỏ đường viền và phóng ảnh lớn hơn 50% */
.tap-layout-gaming .tap-aug-hex {
    display:grid;
    place-items:center;
    width:54px;
    height:60px;
    flex:none;
    overflow:hidden;
    position:relative;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
    background:linear-gradient(180deg,color-mix(in srgb,var(--tap-tier) 40%,#000),color-mix(in srgb,var(--tap-tier) 10%,#000));
}
.tap-layout-gaming .tap-aug-hex::before {
    content:none;
    display:none;
}
.tap-layout-gaming .tap-aug-hex img,
.tap-layout-gaming .tap-aug-hex svg {
    width:39px;
    height:39px;
    border:0;
    border-radius:0;
    object-fit:contain;
    position:relative;
    z-index:1;
}
.tap-layout-gaming .tap-aug-hex .tap-aug-icon-fb {
    display:none;
    place-items:center;
    width:26px;
    height:26px;
    color:var(--tap-tier);
    background:transparent;
    font-size:0;
    position:relative;
    z-index:1;
}
.tap-layout-gaming .tap-aug:hover .tap-aug-hex {
    filter:drop-shadow(0 0 10px var(--tap-tier-glow));
    animation:tapHexPulse 1.6s ease-in-out infinite;
}
@keyframes tapHexPulse {
    0%,100% { filter:drop-shadow(0 0 6px var(--tap-tier-glow)); }
    50% { filter:drop-shadow(0 0 14px var(--tap-tier-glow)); }
}

/* Nội dung */
.tap-layout-gaming .tap-aug-head {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
    padding:0;
}
.tap-layout-gaming .tap-aug-name {
    margin:0;
    padding:0;
    overflow:visible;
    color:var(--tap-g-text);
    white-space:normal;
    text-overflow:clip;
    font-family:var(--tap-g-display);
    padding-right:72px;
    font-size:17px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.tap-layout-gaming .tap-aug-desc {
    display:block;
    margin:0;
    padding:0;
    overflow:visible;
    color:var(--tap-g-dim);
    white-space:normal;
    -webkit-line-clamp:unset;
    font-family:var(--tap-g-body);
    font-size:14px;
    font-weight:400;
    line-height:1.7;
}
.tap-layout-gaming .tap-aug-desc b,
.tap-layout-gaming .tap-aug-desc strong {
    color:var(--tap-tier);
    font-weight:700;
}

/* Badge bậc */
.tap-layout-gaming .tap-aug-badge {
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    padding:5px 14px 5px 18px;
    color:#05070c;
    background:var(--tap-tier);
    clip-path:polygon(10px 0,100% 0,100% 100%,0 100%);
    font-family:var(--tap-g-display);
    font-size:10px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.16em;
    text-transform:uppercase;
}

@media (prefers-reduced-motion:reduce) {
    .tap-layout-gaming .tap-aug,
    .tap-layout-gaming .tap-aug-inner::after { transition:none; }
    .tap-layout-gaming .tap-aug:hover { transform:none; }
    .tap-layout-gaming .tap-aug:hover .tap-aug-hex { animation:none; }
}
@media (max-width:1050px) {
    .tap-layout-gaming .tap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .tap-layout-gaming {
        --tap-g-top-bleed:110px;
        min-height:0;
        padding:42px 14px 28px;
    }
    .tap-layout-gaming .tap-grid { grid-template-columns:1fr; }
    .tap-layout-gaming .tap-section-title { font-size:22px; }
    .tap-layout-gaming .tap-seo-intro {
        display:block;
        padding:15px 16px 16px;
        margin-bottom:20px;
    }
    .tap-layout-gaming .tap-seo-intro p { font-size:13px; line-height:1.7; }
    .tap-layout-gaming .tap-seo-intro__tiers { justify-content:flex-start; margin-top:12px; }
    .tap-layout-gaming .tap-search-wrap { max-width:none; }
}
@media (max-width:480px) {
    .tap-layout-gaming .tap-tabs-bar { gap:8px; }
    .tap-layout-gaming .tap-tab {
        flex:1 1 100%;
        padding:11px 16px;
        font-size:12px;
    }
    .tap-layout-gaming .tap-aug-inner { padding:20px 18px 22px; }
    .tap-layout-gaming .tap-aug-head { gap:13px; }
    .tap-layout-gaming .tap-aug-name { padding-right:38px; font-size:16px; }
}

/* ============================================================
   Individual augment detail pages — v1.5.0
   ============================================================ */
.tap-aug-detail-link{color:inherit;text-decoration:none}.tap-aug-detail-link:hover{color:inherit;text-decoration:none}.tap-layout-gaming .tap-aug-name .tap-aug-detail-link:hover{color:#c7b5ff}.tap-detail-page{--tap-detail-accent:#9ca3af;--tap-detail-glow:rgba(156,163,175,.18);background:radial-gradient(circle at 15% 0,var(--tap-detail-glow),transparent 34%),#0b0d13;color:#eef2ff;min-height:70vh;padding:34px 18px 64px}.tap-detail-tier--gold{--tap-detail-accent:#f4c95d;--tap-detail-glow:rgba(244,201,93,.18)}.tap-detail-tier--diamond{--tap-detail-accent:#8dd8ff;--tap-detail-glow:rgba(141,216,255,.2)}.tap-detail-shell{width:min(1180px,100%);margin:0 auto}.tap-detail-breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 20px;color:#8f97aa;font-size:13px}.tap-detail-breadcrumb a{color:#aab2c5;text-decoration:none}.tap-detail-breadcrumb a:hover{color:#fff}.tap-detail-hero{position:relative;display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;padding:30px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:0 24px 70px rgba(0,0,0,.26);overflow:hidden}.tap-detail-hero:after{content:"";position:absolute;right:-90px;top:-130px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,var(--tap-detail-glow),transparent 68%);pointer-events:none}.tap-detail-icon-wrap{width:138px;height:138px;display:grid;place-items:center;border-radius:28px;border:1px solid color-mix(in srgb,var(--tap-detail-accent) 58%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--tap-detail-accent) 14%,#11151e),#090b10);box-shadow:0 0 44px var(--tap-detail-glow)}.tap-detail-icon{width:104px;height:104px;object-fit:contain;display:block}.tap-detail-icon--fallback{display:grid;place-items:center;font-size:52px;color:var(--tap-detail-accent)}.tap-detail-hero-copy{position:relative;z-index:1}.tap-detail-tier-badge{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tap-detail-accent) 45%,transparent);background:color-mix(in srgb,var(--tap-detail-accent) 12%,transparent);color:var(--tap-detail-accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.tap-detail-hero h1{margin:12px 0 9px;font-family:'Chakra Petch','Be Vietnam Pro',sans-serif;font-size:clamp(30px,4vw,48px);line-height:1.08;color:#fff}.tap-detail-lead{max-width:900px;margin:0;color:#b6bdcb;font-size:15px;line-height:1.72}.tap-detail-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr);gap:20px;margin-top:22px}.tap-detail-card{padding:24px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#11151d}.tap-detail-card-kicker{display:block;color:var(--tap-detail-accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}.tap-detail-card h2,.tap-related-heading h2{margin:0;color:#fff;font-family:'Chakra Petch','Be Vietnam Pro',sans-serif;font-size:23px;line-height:1.25}.tap-detail-description{margin-top:17px;color:#d7dbe5;font-size:15px;line-height:1.75}.tap-detail-description p{margin:0 0 10px}.tap-detail-stages-card{background:linear-gradient(145deg,color-mix(in srgb,var(--tap-detail-accent) 8%,#11151d),#11151d)}.tap-detail-stages{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.tap-detail-stages span{display:grid;place-items:center;min-width:60px;height:42px;padding:0 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tap-detail-accent) 42%,transparent);background:color-mix(in srgb,var(--tap-detail-accent) 11%,transparent);color:#fff;font-weight:800;font-family:'Chakra Petch',sans-serif}.tap-detail-muted{color:#9098aa;line-height:1.65;margin:16px 0 0}.tap-related-section{margin-top:34px}.tap-related-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:16px}.tap-related-heading>a{color:var(--tap-detail-accent);font-size:13px;font-weight:700;text-decoration:none}.tap-related-heading>a:hover{text-decoration:underline}.tap-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tap-related-comp{display:block;padding:17px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#151923,#0f1219);color:#fff;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.tap-related-comp:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tap-detail-accent) 42%,transparent);box-shadow:0 14px 34px rgba(0,0,0,.25);color:#fff}.tap-related-comp__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.tap-related-comp__eyebrow{color:#8f97a9;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.tap-related-comp h3{margin:4px 0 0;font-size:16px;line-height:1.35;color:#fff}.tap-related-comp__tier{display:grid;place-items:center;min-width:34px;height:30px;padding:0 8px;border-radius:9px;background:#222833;color:#fff;font-weight:900;font-family:'Chakra Petch',sans-serif}.tap-related-comp__tier--s{background:rgba(255,104,126,.15);color:#ff8fa1}.tap-related-comp__tier--a{background:rgba(244,201,93,.14);color:#f4c95d}.tap-related-comp__tier--b{background:rgba(90,180,255,.14);color:#73c2ff}.tap-related-comp__units{display:flex;align-items:center;margin-top:14px}.tap-related-comp__unit{width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#202631;border:2px solid #10131a;margin-left:-6px;color:#cbd2df;font-size:10px;font-weight:700}.tap-related-comp__unit:first-child{margin-left:0}.tap-related-comp__unit img{width:100%;height:100%;object-fit:cover}.tap-related-comp__cta{display:block;margin-top:13px;color:#b5bdcc;font-size:12px;font-weight:700}.tap-related-empty{padding:22px;border:1px dashed rgba(255,255,255,.13);border-radius:16px;background:#10131a;color:#9da5b6}.tap-related-empty strong,.tap-related-empty span{display:block}.tap-related-empty strong{color:#dce1eb;margin-bottom:5px}
@media(max-width:900px){.tap-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tap-detail-grid{grid-template-columns:1fr}}
@media(max-width:640px){.tap-detail-page{padding:20px 12px 46px}.tap-detail-hero{grid-template-columns:86px 1fr;gap:16px;padding:20px;border-radius:18px}.tap-detail-icon-wrap{width:82px;height:82px;border-radius:19px}.tap-detail-icon{width:64px;height:64px}.tap-detail-hero h1{font-size:27px}.tap-detail-lead{font-size:13px}.tap-detail-card{padding:19px}.tap-related-heading{align-items:flex-start;flex-direction:column}.tap-related-grid{grid-template-columns:1fr}}

/* v1.5.2 — remove underline from augment titles */
.tap-aug-name a,
.tap-aug-name a:link,
.tap-aug-name a:visited,
.tap-aug-name a:hover,
.tap-aug-name a:focus,
.tap-aug-name a:active,
.tap-layout-gaming .tap-aug-name a,
.tap-layout-gaming .tap-aug-name a:link,
.tap-layout-gaming .tap-aug-name a:visited,
.tap-layout-gaming .tap-aug-name a:hover,
.tap-layout-gaming .tap-aug-name a:focus,
.tap-layout-gaming .tap-aug-name a:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}


/* ============================================================
   Related comps — Compact Pro Card v1.5.3
   ============================================================ */
.tap-related-grid{
    gap:14px;
}
.tap-related-comp{
    --tap-comp-tier:#6e7787;
    position:relative;
    padding:16px 16px 14px 18px;
    min-height:0;
    overflow:hidden;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.09);
    background:linear-gradient(145deg,#11161f,#0d1219);
    box-shadow:none;
}
.tap-related-comp::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:var(--tap-comp-tier);
    opacity:.95;
}
.tap-related-comp--s{--tap-comp-tier:#ff6a7d}
.tap-related-comp--a{--tap-comp-tier:#e0b84d}
.tap-related-comp--b{--tap-comp-tier:#4aa8ff}
.tap-related-comp--c{--tap-comp-tier:#7bd389}
.tap-related-comp--d{--tap-comp-tier:#6e7787}
.tap-related-comp:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--tap-comp-tier) 42%,rgba(255,255,255,.09));
    box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.tap-related-comp__top{
    align-items:flex-start;
    gap:12px;
}
.tap-related-comp__eyebrow{
    font-size:10px;
    line-height:1.2;
    letter-spacing:.11em;
    color:#808a9b;
    font-weight:800;
}
.tap-related-comp h3{
    margin:5px 0 0;
    font-size:16px;
    line-height:1.3;
    font-weight:800;
    color:#f7f9fc;
}
.tap-related-comp__tier{
    flex:0 0 auto;
    min-width:32px;
    width:32px;
    height:30px;
    padding:0;
    border-radius:8px;
    font-size:15px;
}
.tap-related-comp__tier--s{background:rgba(255,106,125,.16);color:#ff8292}
.tap-related-comp__tier--a{background:rgba(224,184,77,.18);color:#ffd86c}
.tap-related-comp__tier--b{background:rgba(74,168,255,.16);color:#67b6ff}
.tap-related-comp__tier--c{background:rgba(123,211,137,.14);color:#91e39f}
.tap-related-comp__tier--d{background:rgba(124,132,146,.19);color:#e5e7eb}
.tap-related-comp__lineup{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:12px;
    min-height:42px;
}
.tap-related-comp__units{
    display:flex;
    align-items:center;
    min-width:0;
    margin-top:0;
    padding-left:2px;
}
.tap-related-comp__unit{
    width:42px;
    height:42px;
    margin-left:-6px;
    border:2px solid #0d1219;
    box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.tap-related-comp__unit:first-child{margin-left:0}
.tap-related-comp__cta{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:0;
    color:#aeb8c9;
    font-size:12px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    transition:color .18s ease,transform .18s ease;
}
.tap-related-comp:hover .tap-related-comp__cta{
    color:#fff;
    transform:translateX(2px);
}
@media(max-width:640px){
    .tap-related-comp{padding:15px 14px 13px 17px}
    .tap-related-comp__unit{width:39px;height:39px;margin-left:-7px}
    .tap-related-comp__lineup{gap:8px}
    .tap-related-comp__cta{font-size:11px}
}