/* ========================================================== BOTVIET DESKTOP PLATFORM ICONS R17 DESKTOP ONLY (>= 769px) Enhances Facebook / TikTok / TikTok Shop / Shopee cards. ========================================================== */ @media(min-width:769px){ /* Support both current V87 and fallback V86 platform tiles. */ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tabs,.bv86-tabs) :is(.bv87-tab,.bv86-tab).bv-r17-platform-card{ position:relative!important; min-height:102px!important; padding:15px 18px 15px 88px!important; border-radius:16px!important; overflow:hidden!important; transition: transform .20s ease, border-color .20s ease, box-shadow .20s ease, background .20s ease!important; isolation:isolate!important; } /* Soft premium lighting behind every card. */ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card::before{ content:""; position:absolute; z-index:-1; width:150px; height:150px; left:-42px; top:-54px; border-radius:50%; background:radial-gradient(circle,var(--bv-r17-glow,rgba(41,143,255,.22)),transparent 68%); opacity:.72; pointer-events:none; transition:opacity .2s ease,transform .2s ease; } body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card[data-bv87-platform="facebook"], body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card[data-bv86-platform="facebook"]{ --bv-r17-accent:#168BFF; --bv-r17-glow:rgba(16,139,255,.36); } body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card[data-bv87-platform="tiktok"], body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card[data-bv86-platform="tiktok"]{ --bv-r17-accent:#31E6E2; --bv-r17-glow:rgba(49,230,226,.27); } body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card[data-bv87-platform="tiktok_shop"], body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card[data-bv86-platform="tiktok_shop"]{ --bv-r17-accent:#FF5B9A; --bv-r17-glow:rgba(255,91,154,.29); } body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card[data-bv87-platform="shopee"], body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card[data-bv86-platform="shopee"]{ --bv-r17-accent:#FF742F; --bv-r17-glow:rgba(255,116,47,.31); } /* Hide the old small icon without disturbing original click handlers. */ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card > :is(.bv87-icon,.bv86-icon){ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } /* New premium icon shell. */ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv-r17-platform-icon{ position:absolute!important; left:16px!important; top:50%!important; transform:translateY(-50%)!important; width:58px!important; height:58px!important; display:grid!important; place-items:center!important; padding:4px!important; border-radius:18px!important; background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.015)), #0A2342!important; border:1px solid color-mix(in srgb,var(--bv-r17-accent) 82%,white 18%)!important; box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset, 0 10px 22px rgba(0,0,0,.26), 0 0 22px var(--bv-r17-glow)!important; pointer-events:none!important; transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease,box-shadow .22s ease!important; } body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv-r17-platform-icon svg{ width:50px!important; height:50px!important; display:block!important; overflow:visible!important; filter:drop-shadow(0 4px 5px rgba(0,0,0,.20))!important; } /* Stronger card typography. */ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab-title,.bv86-tab-title){ font-size:18px!important; font-weight:850!important; letter-spacing:-.18px!important; text-shadow:0 2px 8px rgba(0,0,0,.18)!important; } body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab-subtitle,.bv86-tab-subtitle){ font-size:11px!important; opacity:.90!important; } /* Hover: subtle commercial-quality lift. */ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card:hover{ transform:translateY(-2px)!important; border-color:var(--bv-r17-accent)!important; background: linear-gradient(125deg,rgba(255,255,255,.035),transparent 50%), #183A5D!important; box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 0 24px color-mix(in srgb,var(--bv-r17-accent) 22%,transparent)!important; } body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab,.bv86-tab).bv-r17-platform-card:hover .bv-r17-platform-icon{ transform:translateY(-53%) scale(1.07)!important; filter:brightness(1.08) saturate(1.08)!important; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 13px 25px rgba(0,0,0,.28), 0 0 30px var(--bv-r17-glow)!important; } /* Active state keeps existing function but looks more premium. */ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab.bv87-active,.bv86-tab.bv86-active).bv-r17-platform-card{ border-color:var(--bv-r17-accent)!important; box-shadow: 0 0 0 1px color-mix(in srgb,var(--bv-r17-accent) 32%,transparent) inset, 0 0 26px color-mix(in srgb,var(--bv-r17-accent) 18%,transparent)!important; } body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab.bv87-active,.bv86-tab.bv86-active).bv-r17-platform-card .bv-r17-platform-icon{ animation:bvR17IconPulse 2.8s ease-in-out infinite!important; } @keyframes bvR17IconPulse{ 0%,100%{ transform:translateY(-50%) scale(1); filter:brightness(1); } 50%{ transform:translateY(-50%) scale(1.045); filter:brightness(1.12); } } @media(prefers-reduced-motion:reduce){ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell :is(.bv87-tab.bv87-active,.bv86-tab.bv86-active).bv-r17-platform-card .bv-r17-platform-icon{ animation:none!important; } } }