/* ========================================================== BOTVIET DESKTOP PLATFORM TEXT POLISH R32 CHỈ sửa bố cục chữ của 4 card: Facebook / TikTok / TikTok Shop / Shopee Desktop only. Không đụng click handler / backend / module khác. ========================================================== */ @media (min-width:769px){ /* V87 - dùng selector mạnh hơn CSS gốc để padding R17 thực sự có hiệu lực. Icon R17: left 16 + width 58 => kết thúc ở 74px. Text bắt đầu ở 104px => luôn có khoảng thở ~30px, không chồng icon. */ body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card{ min-height:102px!important; padding:15px 44px 15px 104px!important; gap:6px!important; justify-content:center!important; align-items:flex-start!important; text-align:left!important; overflow:hidden!important; } /* Fallback V86 - cùng nguyên tắc, chỉ can thiệp card đã được R17 đánh dấu. */ body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv86-tabs .bv86-tab.bv-r17-platform-card{ min-height:102px!important; padding:15px 44px 15px 104px!important; gap:6px!important; justify-content:center!important; align-items:flex-start!important; text-align:left!important; overflow:hidden!important; } /* Title: rõ, nổi, không đè icon, không bẻ chữ lung tung. */ body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card .bv87-tab-title, body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv86-tabs .bv86-tab.bv-r17-platform-card .bv86-tab-title{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; padding:0!important; color:#F7FBFF!important; font-size:18px!important; line-height:1.16!important; font-weight:900!important; letter-spacing:-.24px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; overflow-wrap:normal!important; word-break:normal!important; text-shadow: 0 1px 0 rgba(255,255,255,.03), 0 3px 12px rgba(0,0,0,.26)!important; } /* Subtitle: nhỏ gọn nhưng rõ, tách hẳn khỏi title. */ body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card .bv87-tab-subtitle, body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv86-tabs .bv86-tab.bv-r17-platform-card .bv86-tab-subtitle{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; padding:0!important; color:#B7CAE0!important; opacity:1!important; font-size:10.5px!important; line-height:1.28!important; font-weight:520!important; letter-spacing:.01px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; overflow-wrap:normal!important; word-break:normal!important; } /* Giữ icon đúng vị trí, không để title tràn vào vùng icon. */ body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card > .bv-r17-platform-icon, body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv86-tabs .bv86-tab.bv-r17-platform-card > .bv-r17-platform-icon{ left:16px!important; top:50%!important; width:58px!important; height:58px!important; transform:translateY(-50%)!important; z-index:2!important; } /* Chấm trạng thái active có vùng riêng bên phải, không đè chữ. */ body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card.bv87-active::after{ right:15px!important; top:15px!important; width:11px!important; height:11px!important; box-shadow:0 0 12px var(--bv-r17-accent)!important; } /* Hover chỉ làm chữ sáng nhẹ, không làm dịch bố cục. */ body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card:hover .bv87-tab-title, body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv86-tabs .bv86-tab.bv-r17-platform-card:hover .bv86-tab-title{ color:#FFFFFF!important; text-shadow: 0 1px 0 rgba(255,255,255,.04), 0 3px 14px rgba(0,0,0,.28), 0 0 10px color-mix(in srgb,var(--bv-r17-accent) 18%,transparent)!important; } /* Màn desktop hẹp: vẫn giữ đủ khoảng cách icon/chữ. */ @media (max-width:1180px){ body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card, body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv86-tabs .bv86-tab.bv-r17-platform-card{ padding-left:98px!important; padding-right:36px!important; } body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card .bv87-tab-title, body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv86-tabs .bv86-tab.bv-r17-platform-card .bv86-tab-title{ font-size:16px!important; } body.bv-content-v87.bv-r17-desktop-platform-icons #page-body .content-reference-shell.bv87-root .bv87-tabs .bv87-tab.bv-r17-platform-card .bv87-tab-subtitle, body.bv-r17-desktop-platform-icons #page-body .content-reference-shell .bv86-tabs .bv86-tab.bv-r17-platform-card .bv86-tab-subtitle{ font-size:9.5px!important; } } } /* Mobile không đổi. */ @media (max-width:768px){ /* intentionally empty */ }