/* ==================================================================
   ngon-ngu.css — Nút đổi ngôn ngữ VI / EN / 한 (thêm 11/08/2026)
   Chỉ tải trên trang chủ. Không có selector nào trùng với v3.css.
   ================================================================== */

.doi-tieng{
  display:flex; align-items:center; gap:2px; flex:none;
  padding:3px; border-radius:99px;
  background:rgba(15,23,42,.06); border:1px solid rgba(15,23,42,.10);
}
.doi-tieng button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:.78rem; font-weight:600; line-height:1;
  color:#475569; padding:7px 10px; border-radius:99px;
  transition:background .15s, color .15s;
}
.doi-tieng button:hover{ color:#0f172a; }
.doi-tieng button[aria-pressed="true"]{
  background:#fff; color:#0f172a;
  box-shadow:0 1px 2px rgba(15,23,42,.14);
}
.doi-tieng button:focus-visible{ outline:2px solid #1d4ed8; outline-offset:2px; }

/* Điện thoại: .topbar .actions bị ẩn từ 640px trở xuống (v3.css dòng ~1350),
   .topnav bị ẩn từ 860px. Nút ngôn ngữ KHÔNG nằm trong hai khối đó nên vẫn
   hiện; đẩy sang phải cho cân với tên thương hiệu. */
@media (max-width:640px){
  .doi-tieng{ margin-left:auto; }
  .doi-tieng button{ padding:6px 9px; font-size:.74rem; }
}

/* ==================================================================
   MÁY TÍNH: ĐƯA Ô TÌM KIẾM XUỐNG HÀNG RIÊNG (thêm 11/08/2026)
   ------------------------------------------------------------------
   VÌ SAO: .topbar .shell bị chặn max-width:1200px nên ngân sách bề ngang
   CỐ ĐỊNH 1160px ở mọi màn hình rộng. Đo thực tế ở 1440px:

     bản main   : brand 320 + search 165 + topnav 463 + Zalo 140 + gap 72 = 1160
     có nút ngôn ngữ: brand 320 + topnav 463 + ngôn ngữ 118 + Zalo 140 + gap 96
                      -> ô tìm chỉ còn 37px, ô nhập chữ 4px

   .topnav và .actions đều flex:none nên .search là phần tử DUY NHẤT co được;
   cụm nút ngôn ngữ lấy đúng 128px từ nó. Cho ô tìm chiếm trọn một hàng là trả
   lại nguyên bề ngang cho nó, đồng thời hàng đầu còn dư chỗ để cụm ngôn ngữ và
   nút Zalo đứng liền nhau ở góc phải.

   Đây CHÍNH LÀ cơ chế v3.css đã dùng từ 1080px trở xuống (.search{order:3;
   flex-basis:100%}), chỉ mở rộng lên dải máy tính. Đo được ở 1440px: ô nhập
   chữ 4px -> 1100px, đổi lại đầu trang dính cao 71px -> 138px.

   MỐC 1200px, không phải 1081px: hàng đầu (đã bỏ ô tìm) cần
   320+463+118+140+72 = 1113px cộng 10px hở = 1123px. Đo thực tế: 1200px chạy
   đúng, 1160px đã hụt chỗ và nút Zalo lại bị đẩy xuống hàng khác — đúng lỗi
   đang thấy ở dải 1024–1080px. 1200px cũng là chỗ .shell chạm max-width nên
   từ đó trở lên bề ngang không đổi nữa, chạy đúng là đúng ở mọi màn rộng hơn.
   Dưới 1200px giữ nguyên hành vi của bản 5d84c1e, không đụng tới.

   ngon-ngu.css được nạp TRƯỚC v3.css (ngay sau thẻ canonical) nên mọi luật ở
   đây phải THẮNG BẰNG ĐỘ ĐẶC HIỆU, không dựa vào thứ tự file:
   .topbar .shell.nav (0,3,0) > .topbar .shell (0,2,0);
   .topbar .shell.nav .search (0,4,0) > .search (0,1,0).
   Không cần !important và không sửa một dòng nào của v3.css.
   ================================================================== */
@media (min-width:1200px){
  .topbar .shell.nav{ flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
  .topbar .shell.nav .search{ order:3; flex:1 1 100%; }
  /* Hàng đầu giờ mới thật sự dư chỗ -> auto hút hết phần dư, đẩy cả hai cụm
     về sát mép phải. -14px = gap 24px của .topbar .shell trừ đi 10px hở mong
     muốn; đặt margin-left:10px thì thành 24+10 = 34px, xa hơn. */
  .topbar .shell.nav .doi-tieng{ margin-left:auto; }
  .topbar .shell.nav .doi-tieng + .actions{ margin-left:-14px; }
}

/* Dải nhắc khách nước ngoài — chỉ hiện khi đang ở EN/KO */
.nhac-tieng{ display:none; }
html[lang="en"] .nhac-tieng,
html[lang="ko"] .nhac-tieng{
  display:block; text-align:center;
  padding:8px 14px; font-size:.82rem; line-height:1.5;
  background:#eff6ff; color:#1e3a8a; border-bottom:1px solid #dbeafe;
}