/* ============================================================
   header-actions.css — bộ nút Tài khoản / Tìm kiếm / Giỏ hàng ở #subHeader

   Ba nút dùng chung một khuôn .hdr-btn để đồng bộ kích thước, bo góc,
   viền và trạng thái hover/focus. Icon dùng SVG nét (stroke) cùng độ dày
   1.8 cho cả ba, thay vì trộn Bootstrap Icons với Font Awesome (hai bộ
   khác độ dày nét nên đặt cạnh nhau nhìn lệch).

   Nút Tài khoản do JS trong index.html render vào #user-dropdown-container,
   nên tạo kiểu qua selector con để không phải sửa chuỗi template trong JS.
   ============================================================ */

:root {
  --hdr-ink: #522546;              /* = --text-normal */
  --hdr-line: rgba(212, 166, 77, .42);
  --hdr-line-soft: rgba(212, 166, 77, .26);
  --hdr-shadow: 0 2px 8px rgba(150, 110, 40, .12);
  --hdr-shadow-lift: 0 6px 16px -4px rgba(150, 110, 40, .28);
}

/* ══ MENU MOBILE (nút ☰ trên navbar) ══════════════════════
   JS bật/tắt bằng .show()/.hide() ở 7 chỗ khác nhau, nên không đụng vào JS:
   hiệu ứng mở dùng CSS animation — nó tự chạy lại mỗi lần phần tử được hiện.  */

#mobileNavOverlay {
  position: fixed;
  /* Bắt đầu NGAY DƯỚI navbar: giữ logo sắc nét và để nút ☰ bấm lại được để
     đóng menu. --topcover = chiều cao navbar thật, do script trong index.html đo. */
  top: var(--topcover, 68px);
  left: 0;
  right: 0;
  /* KHÔNG dùng bottom: 0. Với viewport-fit=cover, bottom:0 là đáy viewport ĐANG
     THẤY nên lớp phủ dừng ngay trên thanh công cụ Safari; Safari lấy mẫu vùng
     dưới thanh (canvas màu kem) và tô thanh thành dải đục. Vì người dùng thường
     mở menu để chuyển trang, màu đó còn bám theo sang trang vừa mở.
     100lvh = chiều cao viewport lúc toolbar ẩn → phủ tiếp xuống dưới thanh. */
  bottom: auto;
  height: calc(100vh - var(--topcover, 68px));
  height: calc(100lvh - var(--topcover, 68px));
  z-index: 9998;
  /* KHÔNG dùng backdrop-filter ở đây. Nó tạo một lớp compositing tồn tại cả sau
     khi menu đóng, làm iOS Safari lấy mẫu sai màu để tô thanh công cụ dưới —
     thanh bị ám vàng ở MỌI trang cho tới khi tải lại trang.
     Dùng màu phủ đặc hơn một chút để bù phần mờ đã mất. */
  background: rgba(46, 26, 40, .52);
  animation: navFade .2s ease both;
}

@keyframes navFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#mobileNavContainer {
  position: absolute;
  /* Overlay đã bắt đầu dưới navbar nên chỉ cần chừa một khoảng nhỏ */
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 9999;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(212, 166, 77, .38);
  background: linear-gradient(180deg, #fffdf8 0%, #fdf6e6 100%);
  box-shadow: 0 18px 44px -14px rgba(90, 55, 15, .45);
  overflow: hidden;
  animation: navDrop .26s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes navDrop {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.nav-m-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Mục menu. Ghi đè .dropdown-item của Bootstrap nên cần đủ đặc hiệu.
   Dùng chung cho HAI bảng: bảng nav ☰ (#mobileNavContainer) và bảng tài khoản
   (#user-dropdown-container). Một chỗ định nghĩa để hai bảng không trôi lệch nhau. */
#mobileNavContainer .nav-m-item,
#user-dropdown-container .nav-m-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--hdr-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: background .16s ease, color .16s ease;
  -webkit-tap-highlight-color: transparent;
  /* Ba dòng dưới là bản vá cho iOS Safari: menu tài khoản từng bị nuốt mấy ký tự đầu
     ("Đăng nhập" hiện thành "ng nhập") do chữ bị đẩy lệch trong khung. Ghim tường minh
     để không phụ thuộc giá trị kế thừa từ nơi khác. */
  text-indent: 0;
  direction: ltr;
  overflow: visible;
}

#mobileNavContainer .nav-m-item:not(:last-child),
#user-dropdown-container .nav-m-item:not(:last-child) {
  /* Vạch ngăn mảnh, thụt vào cho khỏi cắt ngang icon.
     Loại ô CUỐI, không phải ô đầu: offset-y ÂM cộng với `inset` đẩy vệt sáng lên trên,
     nên vạch nằm ở ĐÁY ô. Bản cũ dùng `.nav-m-item + .nav-m-item` (bỏ ô đầu) — hợp với
     vạch vẽ ở đỉnh, nhưng ở đây thành ra "Trang Chủ" mất vạch dưới còn "Tin tức" thừa
     một vạch dưới cùng. */
  box-shadow: 0 -1px 0 rgba(184, 120, 45, .13) inset;
}

.nav-m-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(212, 166, 77, .16);
  color: #8a6520;
}

.nav-m-ico svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-m-label { flex: 1; min-width: 0; }

.nav-m-arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: rgba(82, 37, 70, .32);
}

.nav-m-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#mobileNavContainer .nav-m-item:hover,
#mobileNavContainer .nav-m-item:focus,
#user-dropdown-container .nav-m-item:hover,
#user-dropdown-container .nav-m-item:focus {
  background: rgba(212, 166, 77, .18);
  color: var(--hdr-ink);
}

#mobileNavContainer .nav-m-item:active,
#user-dropdown-container .nav-m-item:active {
  background: rgba(212, 166, 77, .3);
}

/* Trang đang xem — JS gắn .active vào .dropdown-item */
#mobileNavContainer .nav-m-item.active {
  background: linear-gradient(135deg, rgba(212, 166, 77, .3), rgba(212, 166, 77, .16));
  color: #4a1f38;
}

#mobileNavContainer .nav-m-item.active .nav-m-ico {
  background: #d4a24d;
  color: #fff;
}

#mobileNavContainer .nav-m-item.active .nav-m-arrow {
  color: #b8782d;
}

/* Nút ☰ cho khớp bộ nút tròn ở subHeader */
.navbar-toggler#mobileNavToggler {
  border: 1px solid rgba(122, 60, 30, .32);
  border-radius: 12px;
  padding: 7px 10px;
  transition: background .18s ease, transform .18s ease;
}

.navbar-toggler#mobileNavToggler:active {
  transform: scale(.95);
}

.navbar-toggler#mobileNavToggler:focus {
  box-shadow: 0 0 0 3px rgba(212, 166, 77, .38);
}

@media (prefers-reduced-motion: reduce) {
  #mobileNavOverlay,
  #mobileNavContainer { animation: none; }
  #mobileNavContainer .nav-m-item { transition: none; }
}

/* ── Hàng nút ── */
.hdr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 4px;
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Khuôn nút dùng chung ──
   Áp cho cả nút do JS render vào #user-dropdown-container. */
.hdr-btn,
#user-dropdown-container .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  min-width: 44px;
  padding: 0 11px;
  border: 1px solid var(--hdr-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: var(--hdr-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--hdr-shadow);
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.hdr-btn svg,
#user-dropdown-container .btn svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hdr-btn:hover,
#user-dropdown-container .btn:hover {
  background: #fff;
  border-color: rgba(212, 166, 77, .62);
  box-shadow: var(--hdr-shadow-lift);
  transform: translateY(-1px);
  color: var(--hdr-ink);
}

.hdr-btn:active,
#user-dropdown-container .btn:active {
  transform: translateY(0) scale(.97);
  box-shadow: var(--hdr-shadow);
}

/* Vòng sáng chỉ hiện khi người dùng THỰC SỰ đang đi bằng bàn phím.
   KHÔNG dùng :focus-visible trần: mỗi trình duyệt tự đoán một kiểu, và cả hai đều coi
   tiêu điểm do script đặt là "đáng hiện vòng sáng". Bootstrap trả tiêu điểm về nút khi
   đóng dropdown/modal, trình duyệt còn khôi phục tiêu điểm sau khi tải lại trang — nên nút
   Tài khoản đeo viền vàng dù người dùng chỉ chạm màn hình hoặc vừa F5.
   Lớp .kbd-nav do js/header-actions.js gắn lên <html> ngay lần đầu bấm Tab/Escape/mũi tên,
   và gỡ ra khi chạm/bấm chuột. Cách này cho kết quả giống nhau trên mọi trình duyệt. */
html.kbd-nav .hdr-btn:focus,
html.kbd-nav #user-dropdown-container .btn:focus {
  outline: 2px solid #d4a24d;
  outline-offset: 2px;
}

/* ── Nút Tài khoản khi ĐÃ ĐĂNG NHẬP: ảnh đại diện phủ kín nút ──
   .hdr-avatar do js/current-user-avatar.js tô: <img> ảnh thật, hoặc chữ cái đầu của tên. */
/* Vuông theo CHIỀU CAO của nút (44px máy tính, 42px điện thoại — khối @media cuối file), nên
   không đặt cứng chiều rộng. Nút cắt góc (overflow) nên ảnh bo theo đúng góc của nút. */
#user-dropdown-container .btn.co-avatar {
  width: auto;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
}

.hdr-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, #fff1a3 0%, #f6c95f 48%, #e3aa41 100%);
  color: var(--hdr-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.hdr-avatar.is-anh {
  background: #f3ece0;
}

.hdr-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bootstrap tô lại nền/viền khi dropdown mở — giữ nguyên kiểu của mình */
#user-dropdown-container .btn.show,
#user-dropdown-container .btn:first-child:active {
  background: #fff;
  border-color: rgba(212, 166, 77, .62);
  color: var(--hdr-ink);
}

/* ── Menu xổ xuống của nút Tài khoản ──
   Dùng LẠI nguyên kiểu của bảng nav ☰: cùng nền kem, cùng viền vàng, cùng bo góc, cùng
   ô icon + nhãn + mũi tên, cùng vạch ngăn. Kiểu của từng mục nằm ở khối .nav-m-item đầu
   file — hai bảng ăn chung một định nghĩa nên sửa một chỗ là cả hai cùng đổi.

   Menu này là <div> chứa thẳng các <a>, KHÔNG phải <ul><li>. Cố ý: vạch ngăn dùng
   :not(:last-child), mà nếu mỗi <a> nằm trong một <li> riêng thì <a> nào cũng là con
   cuối của <li> của nó, :not(:last-child) không khớp ai và vạch ngăn biến mất sạch. */
#user-dropdown-container .dropdown-menu {
  /* 172px, và bốn mục bên dưới cộng lại cũng đúng 172px chiều cao -> khung vuông.
     Không đặt height cứng: menu khách chỉ có 2 mục, ép cùng chiều cao thì mỗi mục phình
     gấp đôi. Để chiều cao tự cộng từ các mục thì cả hai menu đều đúng tỉ lệ.
        4 mục: 4x38 + 3x2 (gap) + 2x6 (padding) + 2 (viền) = 172  -> vuông
        2 mục: 2x38 + 1x2 + 12 + 2 = 92

     Vì sao không phải 156px như bản vuông trước: bản đó chỉ có chữ trơn. Nay mỗi mục
     gánh thêm ô icon 24px, mũi tên 12px và hai khoảng cách — riêng phần đó đã ăn 74px,
     chỉ còn 82px cho chữ, không đủ cho "Đổi mật khẩu" (~88px). 172px chừa dư ~14px. */
  width: 172px;
  min-width: 0;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid rgba(212, 166, 77, .38);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf8 0%, #fdf6e6 100%);
  box-shadow: 0 18px 44px -14px rgba(90, 55, 15, .45);
  list-style: none;
  /* visible chứ không hidden: nằm trong bản vá iOS Safari nói ở khối .nav-m-item. */
  overflow: visible;
}

/* Bootstrap đóng/mở menu bằng chính thuộc tính display (none <-> block). Nên CHỈ khai
   display: flex ở trạng thái .show — đặt ở quy tắc gốc thì nó đè luôn `display: none`
   và menu hiện thường trực ngay cả khi chưa bấm. */
#user-dropdown-container .dropdown-menu.show {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Thu nhỏ so với bảng nav ☰ ──
   Bảng nav phủ gần hết bề ngang màn hình nên mục cao 58px là vừa. Bảng tài khoản chỉ là
   menu xổ từ một nút nhỏ, giữ nguyên cỡ đó thì nó to lấn át. Rút mọi kích thước xuống,
   giữ nguyên bố cục icon + nhãn + mũi tên. Đặt SAU khối .nav-m-item dùng chung ở đầu file
   nên cùng độ đặc hiệu (1,1,0) mà vẫn thắng — quy tắc sau thắng. */
#user-dropdown-container .nav-m-item {
  /* 38px: bốn mục cộng lại vừa đúng chiều cao khung vuông tính ở trên. */
  min-height: 38px;
  gap: 6px;
  /* Chiều cao do min-height lo, padding dọc bằng 0 để con số 38px không bị cộng thêm. */
  padding: 0 6px;
  border-radius: 9px;
  font-size: 13px;
}

/* Lưới an toàn: bề rộng khung là số cố định, còn bề rộng chữ thì tuỳ phông máy người dùng
   render. Nếu có máy nào vẽ rộng hơn dự tính thì cắt bằng dấu … chứ đừng đẩy mũi tên văng
   ra ngoài khung — .nav-m-item để white-space: nowrap nên không tự xuống dòng được. */
#user-dropdown-container .nav-m-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

#user-dropdown-container .nav-m-ico {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

#user-dropdown-container .nav-m-ico svg {
  width: 14px;
  height: 14px;
}

#user-dropdown-container .nav-m-arrow svg {
  width: 12px;
  height: 12px;
}

/* Tên người dùng cạnh nút tài khoản */
#user-dropdown-container .text-nowrap span {
  font-size: 13.5px !important;
  font-weight: 600;
  color: var(--hdr-ink);
}

/* ── Badge số lượng giỏ hàng ──
   Nổi ở góc TRÊN BÊN TRÁI, tràn ra ngoài viền nút — cùng kiểu với nút giỏ trong thanh
   dưới của /livestream. Trước đây badge là viên thuốc nằm cùng hàng với icon, khiến nút
   giỏ rộng hơn hẳn hai nút kia và hai nút giỏ ở hai nơi trông không giống nhau. */
#hdrCartBtn {
  position: relative;
  /* Bỏ khoảng đệm dành cho badge nằm cùng hàng. KHÔNG đặt width cứng — để min-width của
     .hdr-btn quyết định, nút giỏ mới rộng đúng bằng nút Tìm kiếm bên cạnh. */
  padding: 0;
}

.hdr-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(82, 37, 70, .14);
  color: var(--hdr-ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Viền cùng màu nền header để badge tách khỏi mép nút khi đè lên. */
  box-shadow: 0 0 0 2px #fdf3dc;
  transition: background .18s ease, color .18s ease;
}

/* Có hàng trong giỏ → badge nổi lên */
.hdr-btn.has-items .hdr-badge {
  background: #b3123c;
  color: #fff;
}

/* ── Badge "có cập nhật đơn hàng" trên nút Tài khoản ──
   Cùng khuôn .hdr-badge của giỏ (góc trên trái, tràn ra ngoài viền), nhưng LUÔN đỏ: nó chỉ
   xuất hiện khi có đơn chưa xem — js/don-hang.js gỡ hẳn badge khi đếm về 0, không để một
   số 0 xám nằm đó như giỏ rỗng. Badge nằm trong khung bọc chứ không trong nút, vì nút bị
   dựng lại mỗi lần đăng nhập/đăng xuất. Nút là con đầu tiên của khung nên góc trên trái
   của khung trùng góc của nút. */
#user-dropdown-container { position: relative; }
#user-dropdown-container > .hdr-badge {
  background: #b3123c;
  color: #fff;
  pointer-events: none;   /* bấm trúng badge vẫn phải mở menu tài khoản */
  z-index: 1;
}

/* Cùng con số, nằm cuối mục "Đơn hàng" trong menu — mở menu là biết bấm vào đâu. */
#user-dropdown-container #don-ds-btn[data-moi]::after {
  content: attr(data-moi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #b3123c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  order: 1;   /* đứng sau chữ, trước mũi tên › (mũi tên dời ra cuối bằng order: 2) */
}
#user-dropdown-container #don-ds-btn[data-moi] .nav-m-arrow { order: 2; }

/* ── Ô tìm kiếm (desktop) ── */
.hdr-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 560px;
  height: 44px;
  padding: 0 4px 0 14px;
  border: 1px solid var(--hdr-line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--hdr-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.hdr-search:focus-within {
  background: #fff;
  border-color: rgba(212, 166, 77, .62);
  box-shadow: var(--hdr-shadow-lift);
}

.hdr-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--hdr-ink);
  font: inherit;
  font-size: 14px;
}

.hdr-search__input::placeholder {
  color: rgba(82, 37, 70, .45);
}

.hdr-search__input:focus {
  outline: none;
}

.hdr-search__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--hdr-ink);
  cursor: pointer;
  transition: background .18s ease;
}

.hdr-search__go svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hdr-search__go:hover {
  background: rgba(212, 166, 77, .18);
}

html.kbd-nav .hdr-search__go:focus {
  outline: 2px solid #d4a24d;
  outline-offset: 1px;
}

/* ── Ô tìm kiếm gọn, LUÔN HIỆN, CHỈ ở bề ngang điện thoại ──
   Ẩn mặc định ở đây; @media (max-width: 575.98px) bên dưới mới cho hiện. Không dùng lớp
   .d-lg-none của Bootstrap cho phần tử này: lớp đó hiện ở CẢ tablet (576–991.98px), mà thanh
   này chỉ dành cho điện thoại — tablet vẫn giữ nguyên nút kính lúp #hdrSearchToggle như cũ. */
.hdr-search--phone {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hdr-btn,
  #user-dropdown-container .btn,
  .hdr-search { transition: none; }
  .hdr-btn:hover,
  #user-dropdown-container .btn:hover { transform: none; }
}

/* ── Mobile ── */
@media (max-width: 575.98px) {
  .hdr-bar { min-height: 52px; gap: 8px; }
  .hdr-btn,
  #user-dropdown-container .btn {
    height: 42px;
    min-width: 42px;
    padding: 0 10px;
    border-radius: 13px;
  }
  .hdr-btn svg,
  #user-dropdown-container .btn svg { width: 20px; height: 20px; }
  #user-dropdown-container .text-nowrap span { font-size: 12.5px !important; }

  /* Thay nút kính lúp bằng thanh tìm kiếm gọn, hiện sẵn không cần bấm.
     Chỉ ẨN nút toggle Ở ĐÂY (trong media query điện thoại) — element vẫn còn trong DOM nên
     JS initSearchToggle() (header-actions.js) không lỗi, và tablet vẫn thấy nút bình
     thường vì luật này không chạm tới bề ngang 576–991.98px. */
  #hdrSearchToggle { display: none; }

  .hdr-search--phone {
    display: flex;
    /* "1/3 chiều dài thanh": flex-basis tính trên bề ngang CỦA CHÍNH .hdr-bar (thanh chứa
       cả icon Tài khoản lẫn Giỏ hàng), vì đây là con TRỰC TIẾP của .hdr-bar — không phải
       1/3 của .hdr-actions (chỉ chứa mỗi nút Giỏ hàng, quá hẹp để lấy làm mốc). Vẫn co nhỏ
       được (flex-shrink: 1) trên máy rất hẹp để khỏi đẩy tràn nút Giỏ hàng ra ngoài. */
    flex: 0 1 33%;
    min-width: 0;
    /* ĐỒNG BỘ với .hdr-btn cùng hàng (42px cao, bo 13px, viền đậm .42) — trước đó thanh
       này tự đặt số riêng (38px/14px/viền nhạt .26) nên thấp và bo khác hai nút hai bên,
       nhìn lệch hàng dù cùng nằm trên một dòng. */
    height: 42px;
    border-radius: 13px;
    border-color: var(--hdr-line);
    padding: 0 2px 0 12px;
    /* Đẩy sang PHẢI, dính sát nút Giỏ hàng, thay vì dính ngay sau tên tài khoản. */
    margin-left: auto;
  }
  .hdr-search--phone .hdr-search__input { font-size: 13px; }
  .hdr-search--phone .hdr-search__go { width: 34px; height: 34px; }
  .hdr-search--phone .hdr-search__go svg { width: 17px; height: 17px; }

  /* .hdr-actions (chứa Giỏ hàng) vốn tự margin-left:auto (luật gốc, dùng ở mọi bề ngang) để
     tự ép mình ra sát mép phải khi nó là phần tử co giãn DUY NHẤT. Giờ thanh tìm kiếm cũng
     có margin-left:auto — hai auto cùng lúc thì trình duyệt chia ĐỀU khoảng trống cho cả
     hai, thanh tìm kiếm bị đẩy ra giữa thay vì dính sát Giỏ hàng như ý. Tắt auto của
     .hdr-actions RIÊNG ở điện thoại để chỉ còn một auto — của thanh tìm kiếm — hút hết
     khoảng trống, kéo nó áp sát Giỏ hàng, cách đúng 8px (gap của .hdr-bar). */
  .hdr-actions { margin-left: 0; }

  /* Tên tài khoản co lại thay vì đẩy tràn thanh tìm kiếm mới — cùng cách desktop đã làm
     (xem @media (min-width: 992px) phía trên).
     CỐ Ý không đặt max-width cứng: 74px từng cắt "Trần Quang Thắng" (đo cần ~116px) thành
     "Trần Qua…", trong khi chỗ vẫn còn thừa trên máy đó. Bỏ số cứng để flexbox tự co theo
     khoảng trống THẬT của từng máy — tên hiện đủ khi có chỗ, chỉ cắt khi thật sự chật. */
  #user-dropdown-container { min-width: 0; flex-shrink: 1; }
  #user-dropdown-container > .d-flex { min-width: 0; }
  #user-dropdown-container .text-nowrap {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Laptop trở lên: ô tìm kiếm nằm CHÍNH GIỮA thanh ──
   Trước đây .hdr-search là flex:1 (max 560px) còn .hdr-actions có margin-left:auto, nên ô
   tìm kiếm bị đẩy dính ngay sau tên người dùng và toàn bộ khoảng trống dồn về bên phải —
   nhìn lệch hẳn trên màn hình rộng.
   Cho hai bên cùng `flex: 1 1 0` để chúng chia ĐỀU phần thừa, nhờ đó ô tìm kiếm căn giữa
   theo bề ngang thật của thanh chứ không phụ thuộc tên người dùng dài hay ngắn.
   Chỉ áp từ 992px: dưới ngưỡng này thanh tìm kiếm desktop đã bị ẩn (.d-none .d-lg-flex). */
@media (min-width: 992px) {
  #user-dropdown-container {
    flex: 1 1 0;
    /* min-width:0 để ô này CO ĐƯỢC. Mặc định flex item không co nhỏ hơn nội dung, tên dài
       sẽ nong cột trái ra và đẩy ô tìm kiếm lệch khỏi giữa. */
    min-width: 0;
  }

  /* Chuỗi min-width:0 phải chạy hết xuống tới ô chứa tên thì text-overflow mới có tác dụng. */
  #user-dropdown-container > .d-flex { min-width: 0; }

  #user-dropdown-container .text-nowrap {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Chỉ nhắm ô tìm kiếm nằm TRỰC TIẾP trong thanh. Cùng class .hdr-search còn được dùng cho
     ô tìm bên trong trang tìm kiếm toàn màn hình (#sp-form, css/search-overlay.css) — form
     đó không phải con trực tiếp của .hdr-bar nên selector này không đụng tới nó. */
  .hdr-bar > .hdr-search {
    flex: 0 1 560px;
    margin-inline: auto;
  }

  .hdr-actions {
    flex: 1 1 0;
    justify-content: flex-end;
    /* Bỏ margin-left:auto của luật gốc: giờ việc đẩy sang phải do flex lo, còn để auto thì
       nó nuốt hết phần thừa và ô tìm kiếm lại lệch trái như cũ. */
    margin-left: 0;
  }
}

/* CHỈ LAPTOP (cùng điều kiện với đầu css/style.css — chủ trang 29/09/2026: "cấp 4 cạnh nút tài
   khoản"). Chip cấp độ (#diem-chip) nằm giữa ô tài khoản (flex 1) và ô tìm kiếm nên bị đẩy sát ô
   tìm kiếm. Muốn nó đứng ngay cạnh nút tài khoản mà ô tìm kiếm vẫn ĐÚNG GIỮA thanh thì ghim ô tìm
   kiếm vào tâm bằng position: absolute — tâm không còn phụ thuộc hai bên rộng hẹp. Tài khoản +
   chip dồn trái, cụm nút dồn phải. Ô tài khoản chặn bề ngang (tên dài thì "…", luật ở trên) để
   không bao giờ chui xuống dưới ô tìm kiếm. */
@media (min-width: 992px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
  .hdr-bar { position: relative; }
  .hdr-bar > .hdr-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 44%);
    margin: 0;
  }
  #user-dropdown-container {
    flex: 0 1 auto;
    max-width: calc(28% - 110px);
  }
  .hdr-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }
}