/* ============================================================
   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;
}

/* 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;
}

/* ── Ô 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 bung ra trên mobile ──
   Dùng grid-template-rows 0fr→1fr để mở/đóng mượt mà vẫn tự co theo nội dung
   (height:auto không transition được). */
.hdr-search-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s ease, opacity .2s ease;
  opacity: 0;
}

.hdr-search-panel > * {
  overflow: hidden;
  min-height: 0;
}

.hdr-search-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.hdr-search-panel .hdr-search {
  max-width: none;
  margin: 8px 4px 6px;
}

@media (prefers-reduced-motion: reduce) {
  .hdr-btn,
  #user-dropdown-container .btn,
  .hdr-search,
  .hdr-search-panel { 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; }
}

/* ── 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),
   mobile dùng ô bung ra ở .hdr-search-panel. */
@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 ô bung ra trên mobile (#hdrSearchPanel), không được đụng tới. */
  .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;
  }
}