/* ========================================================= Language Switcher – CSS tổng ========================================================= */ :root{ --brand:#028099; /* màu thương hiệu */ --muted:#7a8a8f; --divider:#cfd8dc; } /* Ẩn toàn bộ UI mặc định của Google Translate */ #google_translate_element, .skiptranslate, .goog-te-banner-frame, .goog-te-gadget { display:none !important; } body { top:0 !important; } /* ===== Shared ===== */ .lang-switch { font-weight:600; } /* ========================================================= 1) HEADER — Pill switcher (Vi | En) ========================================================= */ .client-lang-switch { position: absolute !important; top: 10px; right: 0px; z-index: 10000; background: transparent; display: inline-flex; align-items: center; margin-left: 0; border-radius: 25px; } .client-lang-switch .lang-switch { display: flex; align-items: center; gap: 0; background: #fff; border-radius: 25px; overflow: hidden; } .client-lang-switch .lang-switch a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 5px 7px; transition: all 0.3s ease; line-height: 1; } .client-lang-switch .lang-switch a[data-lang="vi"] { color: #fff; background: #008eb3; } .client-lang-switch .lang-switch a[data-lang="en"] { color: #008eb3; background: #fff; } /* ========================================================= 2) MOBILE MENU — Inline “Tiếng Việt | English” với một đường kẻ mảnh ở trên HTML: .mobile-lang-wrap > .mobile-lang__line + .lang-switch.inline ========================================================= */ .mobile-lang-wrap{ position:relative; padding-top:14px; } .mobile-lang__line{ position:absolute; left:-1rem; /* kéo tràn theo padding modal */ right:-1rem; top:0; height:1px; background:#e5e7eb; content:""; } .lang-switch.inline{ display:flex; align-items:center; gap:16px; } .lang-switch.inline a{ text-decoration:none; color:var(--muted); } .lang-switch.inline a.active{ color:var(--brand); } .lang-switch.inline .divider{ width:1px; height:22px; background:var(--divider); } .footer-template .footer-lang-wrap{ position:relative; margin-top:45px; padding-top:15px; } /* đường kẻ */ .footer-template .footer-lang-wrap::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:#99ced9; /* đổi rgba(0,0,0,.2) nếu footer nền sáng */ pointer-events:none; /* không chặn click */ } /* label (góc phải, nằm trên line) */ .footer-template .footer-lang__toggle{ position:absolute; right:0; top:-15px; transform:translateY(-60%); background:transparent; border:0; color:#fff; /* footer nền tối; nền sáng dùng var(--brand) */ line-height:1.4; padding:0 6px; cursor:pointer; z-index:100; } .footer-template .footer-lang__toggle .caret{ transition:transform .2s; } .footer-template .footer-lang__toggle[aria-expanded="true"] .caret{ transform:rotate(180deg); } /* panel overlay (xổ xuống ngay dưới line, không đẩy layout) */ .footer-template .footer-lang__panel{ position: absolute; right: 0; top: auto; /* sẽ được JS set */ transform: none !important; margin-top: 0 !important; text-align: right; z-index: 99; } .footer-template .footer-lang__panel[hidden]{ display:none !important; } /* nút trong panel (mini) */ .footer-template .footer-lang__panel .lang-switch.mini a{ padding: 0px 20px; border:2px solid #fff; border-radius:6px; background:#EDFCFF; color:var(--brand); text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.18); } /* chỉ hiện nút còn lại để chuyển (JS sẽ gắn .lang-vi / .lang-en lên ) */ html.lang-vi .lang-vi{ display:none !important; } html.lang-vi .lang-en{ display:inline-block !important; } html.lang-en .lang-en{ display:none !important; } html.lang-en .lang-vi{ display:inline-block !important; } /* Tránh bị nút Back-to-Top hay overlay khác đè */ #backToTop{ z-index:10; } /* ========================================================= Responsive nhẹ ========================================================= */ @media (max-width:480px){ .lang-switch.inline{ gap:12px; } .lang-switch.pill a{ padding:6px 12px; } } /* Không cho đường kẻ chắn click */ .footer-template .footer-lang-wrap::before{ pointer-events:none; } /* Nút & panel nổi hẳn lên */ .footer-template .footer-lang__panel[hidden]{ display:none !important; } .footer-template .footer-lang__panel{ position:absolute; right:0; top:0; transform:translateY(130%); text-align:right; z-index:99; } #backToTop{ z-index:10; } /* Ẩn nút trùng với ngôn ngữ hiện tại */ html.lang-vi .lang-vi{ display:none !important; } html.lang-vi .lang-en{ display:inline-block !important; } html.lang-en .lang-en{ display:none !important; } html.lang-en .lang-vi{ display:inline-block !important; } /* Ẩn mọi language UI khi ở trang blog (body.no-gt) */ body.no-gt .lang-switch, body.no-gt .mobile-lang-wrap, body.no-gt .footer-lang-wrap, body.no-gt .footer-lang__toggle, body.no-gt .footer-lang__panel { display: none !important; }