/* lang-switch.css — nút chuyển ngôn ngữ Việt / Anh kiểu A (viên thuốc VI | EN), Phase 52, docs/module-news/57.
   Markup: Includes/LangSwitch.ascx (.lang-sw--head ở header từ 768px, .lang-sw--mobile ở cuối ngăn kéo menu < 768px).
   Màu chủ đạo #139cd0 (cùng nút/tiêu đề trang chủ). Cờ là SVG nội tuyến nên không cần ảnh. */
.lang-sw {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    border: 1px solid #cfe3ec;
    border-radius: 999px;
    background: #f4fafd;
    flex: none;
    align-self: center;
    white-space: nowrap;
}

.lang-sw a,
.lang-sw a:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 7px;
    border-radius: 999px;
    color: #46606d;
    font: 700 13.5px/1 var(--bv-font, 'Roboto Condensed', Tahoma, Arial, sans-serif);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.lang-sw a:hover,
.lang-sw a:focus {
    background: #e3f3fa;
    color: #0f86b4;
    text-decoration: none;
}

.lang-sw a.on,
.lang-sw a.on:visited,
.lang-sw a.on:hover {
    background: #139cd0;
    color: #fff;
    box-shadow: 0 1px 4px rgba(19, 156, 208, .35);
}

.lang-sw .fl {
    width: 20px;
    height: 13px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    flex: none;
}

.lang-sw a:focus-visible { outline: 2px solid #0f86b4; outline-offset: 2px; }

/* Header: chỉ từ 768px; điện thoại dùng bản trong ngăn kéo */
.lang-sw--mobile { display: none; }

@media (max-width: 767px) {
    .lang-sw--head { display: none; }
    .lang-sw--mobile {
        display: inline-flex;
        margin: 10px 15px 12px;
    }
}

/* Tablet hẹp: bỏ chữ, giữ cờ cho đỡ chật */
@media (min-width: 768px) and (max-width: 991px) {
    .lang-sw--head a { padding: 4px 7px; }
    .lang-sw--head a span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lang-sw a { transition: none; }
}

/* ---- Ẩn giao diện của Google Website Translator (thanh trên cùng, chú giải, tô nền chữ); chỉ giữ nút VI | EN của site ---- */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-l4eHX-hSRGPd { display: none !important; visibility: hidden !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style*="vertical-align"] { vertical-align: baseline !important; }

/* ---- Dòng chú thích "bản dịch tự động" (chỉ hiện khi đang xem tiếng Anh; tạo bởi Js/lang-switch.js) ---- */
.lang-note {
    background: #fff8e1;
    border-bottom: 1px solid #f0dfa8;
    color: #6b5a1e;
    font: 400 13px/1.4 var(--bv-font, 'Roboto Condensed', Tahoma, Arial, sans-serif);
    padding: 6px 0;
}
.lang-note .container { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.lang-note a,
.lang-note a:visited { color: #0f86b4; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.lang-note a:hover { color: #139cd0; }
@media (max-width: 575px) { .lang-note { font-size: 12px; } }

/* ---- Thanh đường dẫn khi xem bản dịch: Google bọc chữ phân cách " ❯ " vào thẻ <font> nằm GIỮA các mục, làm hỏng bộ chọn "anh em liền kề" (+)
        của Portals/0/portal.css nên mất mũi tên chevron. Dùng "anh em về sau" (~) để vẽ lại đúng như bản gốc (cùng kích thước/màu). ---- */
html.bv-translated #dnn_BREADCRUMB_lblBreadCrumb span[itemprop="itemListElement"] ~ span[itemprop="itemListElement"]::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 12px 0 10px;
    border-top: 2px solid var(--bc-sep, #a9b7c4);
    border-right: 2px solid var(--bc-sep, #a9b7c4);
    transform: rotate(45deg);
    flex: none;
}
@media (max-width: 767px) {
    html.bv-translated #dnn_BREADCRUMB_lblBreadCrumb span[itemprop="itemListElement"] ~ span[itemprop="itemListElement"]::before { margin: 0 8px 0 6px; }
}

/* ---- Header 768-1199px: nút VI | EN làm hàng header (logo - hotline - nút - tìm kiếm) rộng hơn khung -> tràn ngang (kiểm responsive 2026-10-22).
        Cho logo co lại theo chỗ còn lại, nút chỉ hiện cờ, ô tìm kiếm hẹp lại một chút. ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    header.banner_bg > .container > div:first-child { flex: 0 1 auto; min-width: 0; }
    header.banner_bg #dnn_dnnLOGO_imgLogo { max-width: 100%; height: auto; }
    .lang-sw--head a { padding: 4px 7px; }
    .lang-sw--head a span { display: none; }
    header.banner_bg .Searpane { width: 150px; flex: 0 0 150px; }
}