/*
 * Thanh trên cùng, dải logo, mega-menu, menu trượt di động.
 * Mobile-first: mặc định là menu trượt; ≥992px mới thành thanh ngang + mega.
 */

/* ------------------------------------------------------------------ *
 * Thanh trên cùng (cao 30px, cố định)
 * ------------------------------------------------------------------ */
.hl-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 97;
  height: var(--hl-topbar-h);
  background: var(--hl-topbar);
  border-bottom: 1px solid #f9f9f9;
  font-size: var(--hl-fs-sm);
  overflow: hidden;
}

.hl-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--hl-topbar-h);
}

.hl-topbar__menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  white-space: nowrap;
}

.hl-topbar__menu li + li::before {
  content: "|";
  padding: 0 10px;
  color: #999;
}

.hl-topbar__menu li { display: flex; align-items: center; }

.hl-topbar__hotline { margin: 0; white-space: nowrap; }
.hl-topbar__hotline b { color: #f00; }
.hl-topbar__hotline a { color: inherit; }

/* Ở màn rất hẹp giấu danh sách link, giữ hotline — đây là ẩn thật sự
   (không dựng lại chỗ khác) nên không vi phạm quy tắc §6. */
@media (max-width: 559px) {
  .hl-topbar__nav { display: none; }
  .hl-topbar__inner { justify-content: center; }
}

/* ------------------------------------------------------------------ *
 * Dải logo
 * ------------------------------------------------------------------ */
.hl-header { background: #fff; }

.hl-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-block: 10px;
}

.hl-brand {
  flex: 0 0 auto;
  max-width: 190px;
  margin-right: auto;
}

.hl-brand img {
  display: block;
  width: auto;
  max-height: 56px;
}

.hl-brand__fallback {
  font-size: 20px;
  font-weight: 700;
  color: var(--hl-blue);
}

.hl-header__hotline {
  display: none;
  padding-left: 46px;
  background: url("../img/d.gif") no-repeat left center;
  color: var(--hl-muted);
  line-height: 1.4;
}

.hl-header__hotline span { display: block; font-size: var(--hl-fs); }
.hl-header__hotline b { display: block; color: var(--hl-blue); font-size: 20px; }
.hl-header__hotline a { color: inherit; text-decoration: none; }

.hl-cart {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 42px;
  padding-right: 14px;
  background: var(--hl-amber) url("../img/ca.png") no-repeat 10px center;
  border-radius: var(--hl-radius);
  color: #fff;
}

.hl-cart:hover { color: #fff; text-decoration: none; }
.hl-cart__label { display: none; }

.hl-cart__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  line-height: 20px;
  padding-inline: 4px;
  text-align: center;
  background: #fff;
  color: #f00;
  border-radius: 50%;
  font-size: var(--hl-fs-xs);
}

/* --- nút hamburger (chỉ hiện ở màn nhỏ) --- */
.hl-burger {
  width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--hl-blue);
  border: 0;
  border-radius: var(--hl-radius);
}

.hl-burger__bars,
.hl-burger__bars::before,
.hl-burger__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: transform var(--hl-ease), opacity var(--hl-ease);
}

.hl-burger__bars { position: relative; }
.hl-burger__bars::before,
.hl-burger__bars::after { content: ""; position: absolute; left: 0; }
.hl-burger__bars::before { top: -6px; }
.hl-burger__bars::after  { top: 6px; }

.hl-burger[aria-expanded="true"] .hl-burger__bars { background: transparent; }
.hl-burger[aria-expanded="true"] .hl-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.hl-burger[aria-expanded="true"] .hl-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 992px) {
  .hl-header__inner { padding-block: 0; gap: 30px; flex-wrap: nowrap; }
  .hl-brand { max-width: 300px; }
  .hl-brand img { max-height: var(--hl-header-h); }
  .hl-header__hotline { display: block; }
  /*
   * `flex-shrink: 0` là bắt buộc: `.hl-header__inner` là flex, nên ở khung hẹp
   * (≈992–1100px) nút giỏ hàng bị bóp nhỏ hơn 140px và chữ "Giỏ hàng" rớt
   * xuống hai dòng, trông như vỡ. Đo 06-08-2026 ở 994px.
   */
  .hl-cart { width: 140px; flex-shrink: 0; }
  .hl-cart__label { display: inline; white-space: nowrap; }
  .hl-header__hotline { flex-shrink: 0; }
  .hl-burger { display: none; }
}

/* ------------------------------------------------------------------ *
 * Ô tìm kiếm
 * Bản gốc: hộp 450×40 chồng lên dải logo (`position:absolute`).
 * Bản mới: phần tử thường trong flex — ≥992px mới chen vào giữa.
 * ------------------------------------------------------------------ */
.hl-search {
  order: 10;               /* xuống hàng riêng ở màn nhỏ */
  flex: 1 1 100%;
  /*
   * ⚠️ `min-width: 0` là BẮT BUỘC, không phải trang trí. Mặc định phần tử
   *    flex có `min-width: auto` → không co được nhỏ hơn nội dung của nó.
   *    Ở dải ~992–1100px hàng header là `nowrap` với 3 phần tử
   *    `flex-shrink: 0` (logo · hotline · giỏ hàng); ô tìm kiếm là thứ
   *    DUY NHẤT co được, nhưng nó tắc ở 231px vì `min-width: auto` →
   *    hàng cần 991px trong hộp nội dung 962px, nút giỏ hàng lòi ra khỏi
   *    khung và huy hiệu số lượng (`right: -6px`) lòi thêm 6px nữa.
   *    `body{overflow-x:clip}` (§41) nuốt phần thừa nên KHÔNG có thanh
   *    cuộn — chỉ là huy hiệu bị cắt cụt, rất dễ bỏ qua.
   *    Đo 11-08-2026 ở 992px: search 231→202px, mép phải giỏ hàng
   *    991→962px, huy hiệu 997→968px (khung 977px).
   *    `.hl-search__input` đã có `min-width: 0` từ trước, nhưng đặt ở con
   *    thì vô ích khi chính CHA vẫn tắc — phải có ở cả hai cấp.
   */
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  background: #fff;
  border: 1px solid #dcdddf;
  border-radius: var(--hl-radius);
}

.hl-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--hl-muted);
  outline-offset: -2px;
}

.hl-search__btn {
  flex: 0 0 50px;
  height: 100%;
  border: 0;
  background: url("../img/s.gif") no-repeat center center;
}

.hl-search__results {
  position: absolute;
  inset: calc(100% + 2px) 0 auto 0;
  z-index: 120;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dcdddf;
  box-shadow: 0 6px 18px rgb(0 0 0 / .12);
  list-style: none;
}

.hl-search__results[hidden] { display: none; }

.hl-search__results li + li { border-top: 1px solid var(--hl-border); }

.hl-search__results a {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  color: var(--hl-text);
}

.hl-search__results a:hover,
.hl-search__results a:focus,
.hl-search__results [aria-selected="true"] a { background: var(--hl-bg-block); text-decoration: none; }

.hl-search__results img { width: 44px; height: 44px; object-fit: cover; flex: 0 0 44px; }
.hl-search__results b { display: block; color: var(--hl-price); font-weight: 400; }

@media (min-width: 992px) {
  .hl-search {
    order: 0;
    flex: 0 1 450px;
    margin-left: 60px;
  }
}

/* ------------------------------------------------------------------ *
 * Menu chính
 * ------------------------------------------------------------------ */
.hl-nav { background: var(--hl-blue); }

.hl-nav__inner { position: relative; }

.hl-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- màn nhỏ: ngăn kéo trượt từ trái --- */
@media (max-width: 991px) {
  .hl-nav { background: transparent; }

  .hl-nav__inner { padding: 0; }

  .hl-nav__list {
    position: fixed;
    /* Bắt đầu DƯỚI thanh trên cùng cố định — nếu để `top:0` thì mục đầu
       ("Trang chủ") bị thanh đó che mất. */
    inset: var(--hl-topbar-h) auto 0 0;
    z-index: 999;
    width: min(84vw, 340px);
    padding-top: 12px;
    background: var(--hl-blue);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  .hl-nav.is-open .hl-nav__list { transform: none; }

  .hl-nav__item { position: relative; border-bottom: 1px solid rgb(255 255 255 / .15); }

  .hl-nav__link {
    display: block;
    padding: 12px 52px 12px 16px;
    color: #fff;
    font-size: var(--hl-fs);
    text-transform: uppercase;
  }

  .hl-nav__link:hover { color: #fff; text-decoration: none; }

  .hl-nav__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 46px;
    border: 0;
    background: transparent;
  }

  .hl-nav__toggle::before,
  .hl-nav__toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    margin-left: -6px;
    background: #fff;
    transition: transform var(--hl-ease);
  }

  .hl-nav__toggle::after { transform: rotate(90deg); }
  .hl-nav__toggle[aria-expanded="true"]::after { transform: rotate(0); }

  /* Panel con: đóng bằng chiều cao 0, KHÔNG display:none — giữ nội dung
     trong DOM để trình đọc màn hình và Google vẫn thấy. */
  .hl-mega {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
    background: rgb(0 0 0 / .12);
  }

  .hl-nav__item.is-open > .hl-mega { grid-template-rows: 1fr; }

  .hl-mega__inner { overflow: hidden; min-height: 0; padding: 0; max-width: none; }

  .hl-mega__list { list-style: none; padding: 4px 0 10px; }

  .hl-mega__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 28px;
    color: rgb(255 255 255 / .92);
    font-size: var(--hl-fs-sm);
  }

  .hl-mega__link:hover { color: #fff; text-decoration: none; }
  .hl-mega__icon { width: 26px; height: auto; flex: 0 0 26px; }

  .hl-nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgb(0 0 0 / .5);
  }

  .hl-nav__scrim[hidden] { display: none; }
}

/* --- ≥992px: thanh ngang + mega-menu --- */
@media (min-width: 992px) {
  .hl-nav {
    height: var(--hl-nav-h);
    position: relative;
    z-index: 96;
  }

  /* Dính lại khi cuộn quá 100px — bản gốc thêm class `.s` bằng jQuery. */
  .hl-nav.is-stuck {
    position: fixed;
    inset: var(--hl-topbar-h) 0 auto 0;
    z-index: 998;
    box-shadow: 0 2px 6px rgb(0 0 0 / .18);
  }

  .hl-nav__list {
    display: flex;
    height: var(--hl-nav-h);
  }

  .hl-nav__item { position: static; }

  .hl-nav__link {
    display: flex;
    align-items: center;
    height: var(--hl-nav-h);
    padding: 0 8px;
    margin-left: 2px;
    color: #fff;
    font-size: var(--hl-fs);
    text-transform: uppercase;
    white-space: nowrap;
  }

  /*
   * Thanh menu ngang là một hàng KHÔNG xuống dòng (`white-space: nowrap` +
   * flex không wrap). 11 mục cấp 1 ăn gần hết 1200px, nên hễ khung hẹp lại
   * là chữ tràn ra ngoài khung — không có thanh cuộn, chỉ đơn giản là bị cắt.
   *
   * Cách xử lý: bó dần khoảng đệm và cỡ chữ theo bề rộng, giữ nguyên cảm quan
   * ở khung đầy đủ. Đo 06-08-2026 sau khi thêm mục "Tin tức":
   *   - trước khi bó: cần 1193px, tràn từ 1200px trở xuống
   *   - sau khi bó:   ≥1232px cần ~1149px · 1100px cần ~1030px · 992px cần ~925px
   *
   * ⚠️ Thêm mục cấp 1 mới thì đo lại — dư địa ở khung đầy đủ chỉ còn ~50px.
   */
  .hl-nav__list { min-width: 0; }
}

@media (min-width: 992px) and (max-width: 1231px) {
  .hl-nav__link {
    padding: 0 6px;
    margin-left: 1px;
    font-size: 13px;
  }
}

@media (min-width: 992px) and (max-width: 1099px) {
  .hl-nav__link {
    padding: 0 5px;
    font-size: 12px;
  }
}

@media (min-width: 992px) {

  .hl-nav__link:hover,
  .hl-nav__item:hover > .hl-nav__link,
  .hl-nav__item:focus-within > .hl-nav__link,
  .hl-nav__item.is-current > .hl-nav__link { background: var(--hl-amber); color: #fff; text-decoration: none; }

  .hl-nav__toggle { display: none; }

  .hl-mega {
    position: absolute;
    inset: var(--hl-nav-h) 0 auto 0;
    z-index: 98;
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
    box-shadow: 0 0 3px #88bfe5;
    padding: 10px 0 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--hl-ease), visibility var(--hl-ease);
  }

  .hl-nav__item:hover > .hl-mega,
  .hl-nav__item:focus-within > .hl-mega { visibility: visible; opacity: 1; }

  .hl-mega__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(213px, 1fr));
    gap: 0 20px;
    list-style: none;
  }

  .hl-mega__link {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding-left: 15px;
    border-bottom: 1px dotted #c1b69b;
    background: url("../img/ic1.gif") no-repeat left center;
    font-weight: 700;
    overflow: hidden;
  }

  .hl-mega__link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hl-mega__icon { display: none; }   /* desktop giữ đúng bản gốc: chỉ chữ */

  .hl-nav__scrim { display: none; }
}

/* Chặn cuộn nền khi ngăn kéo đang mở. */
body.hl-nav-open { overflow: hidden; }

/* ------------------------------------------------------------------ *
 * Bù thanh quản trị của WordPress (chỉ hiện với người đã đăng nhập)
 * ------------------------------------------------------------------ */
body.admin-bar { padding-top: calc(var(--hl-topbar-h) + 32px); }
body.admin-bar .hl-topbar { top: 32px; }

@media (min-width: 992px) {
  body.admin-bar .hl-nav.is-stuck { top: calc(var(--hl-topbar-h) + 32px); }
}

@media (max-width: 991px) {
  body.admin-bar .hl-nav__list { top: calc(var(--hl-topbar-h) + 32px); }
}

@media screen and (max-width: 782px) {
  body.admin-bar { padding-top: calc(var(--hl-topbar-h) + 46px); }
  body.admin-bar .hl-topbar { top: 46px; }
  body.admin-bar .hl-nav__list { top: calc(var(--hl-topbar-h) + 46px); }
}

/* ------------------------------------------------------------------ *
 * Đường dẫn (breadcrumb)
 * ------------------------------------------------------------------ */
.hl-crumbs { font-size: 15px; }

.hl-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  min-height: 38px;
  padding-block: 6px;
}

.hl-crumbs__item { display: flex; align-items: center; }

.hl-crumbs__item + .hl-crumbs__item::before {
  content: "";
  width: 11px;
  height: 38px;
  margin-inline: 6px 8px;
  background: url("../img/gl.gif") no-repeat center center;
}

.hl-crumbs__item [aria-current] { color: var(--hl-muted); }