/* ============================================================================
   XIXA — Trang "Hướng dẫn chọn size giày" (/huong-dan-chon-size)

   Bố cục: banner tràn viền → hai cột (trái: công cụ tìm size, phải: bảng size
   + hướng dẫn đo) → dải sản phẩm gợi ý theo đúng size vừa tìm được.

   Mọi phần động (kết quả, thẻ sản phẩm) đều đổ vào các khối RỖNG có sẵn trong
   HTML. Trang quản trị đánh khoá cho từng đoạn chữ / ảnh theo vị trí trong cây
   HTML nên nếu chèn thêm thẻ vào giữa bố cục tĩnh thì mọi khoá phía sau sẽ lệch.
   ========================================================================== */

.hds-page {
  --hds-green: #2f7d32;
  --hds-lime: #6cb33f;
  --hds-ink: #1f2421;
  --hds-muted: #6b7280;
  --hds-line: #e7ebe4;
  --hds-soft: #f4f6f3;
  background: #fff;
}
.hds-page * { box-sizing: border-box; }

/* Cùng bề ngang với .container của trang chủ (biến --maxw trong styles.css) */
.hds-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------ BANNER ----------------------------------
   Ảnh banner 3810×688 có dải vạch đo (cm) chạy sát mép DƯỚI. Cắt ảnh bằng
   object-fit:cover là mất luôn dải vạch đó, nên trên máy tính ảnh được để
   nguyên tỉ lệ thật, chữ đặt đè lên. Chỉ trên điện thoại mới cắt bớt (và cắt
   từ mép dưới lên) vì tỉ lệ 5,5:1 ở màn hẹp sẽ mỏng quá, chữ không còn chỗ. */
.hds-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #6cb33f;
}
/* Ảnh nền là thẻ <img> thật (không phải background-image) để trang quản trị
   thay được ảnh này trong mục "Ảnh trên trang". */
.hds-banner-bg {
  display: block;
  width: 100%;
  height: auto;
}
.hds-banner-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5% 16px 0.5%;
}
.hds-banner-box { position: relative; }
.hds-banner-title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: clamp(30px, 5.95vw, 112px);
  line-height: 1.08;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Logo FootFit nằm ngay trên góc phải dòng chữ, đúng như bản thiết kế */
.hds-banner-logo {
  position: absolute;
  right: 0;
  bottom: calc(100% - 0.26em);
  width: clamp(74px, 12.8vw, 240px);
  height: auto;
}

/* ------------------------------ 2 CỘT ----------------------------------- */
.hds-body { padding: clamp(28px, 3.4vw, 56px) 0 clamp(36px, 4vw, 64px); }

/* Khu hai cột phải RỘNG ĐÚNG BẰNG lưới thẻ sản phẩm bên dưới, nếu không hai
   khối lệch mép nhau. Lưới thẻ (.products .prod-grid trong styles.css) dùng
   80.7292vw — tỉ lệ lấy từ bản thiết kế 4K — nên chép y nguyên con số đó. */
@media (min-width: 1081px) {
  .hds-body > .hds-wrap {
    width: 80.7292vw;
    max-width: 3100px;
    padding-left: 0;
    padding-right: 0;
  }
}
/* Tỉ lệ hai cột đo đúng theo bản thiết kế (khung rộng 1500):
   cột trái 417 · khe 109 · cột phải 684  ->  khe = 9% bề ngang, trái/phải = 0,61.
   Dùng % cho khe và fr cho hai cột nên mọi bề ngang màn hình đều giữ đúng tỉ lệ. */
.hds-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) 1fr;
  column-gap: 5.5%;
  row-gap: 40px;
  align-items: start;
}

/* ---------- Cột trái: công cụ tìm size ---------- */
/* "Công nghệ" nằm TRÊN logo FOOTFIT (không phải bên cạnh): để cạnh nhau thì
   bàn chân xanh ở góc trên của logo đâm ngay vào chữ, nhìn như bị dính. */
.hds-brand { margin-bottom: 16px; }
/* Kéo chữ "Công nghệ" xuống sát chữ FOOTFIT. Phần trên của tệp SVG là khoảng
   trống dành cho bàn chân xanh nên nếu để lề dương thì hai dòng cách xa nhau. */
.hds-brand-lb {
  display: block;
  width: max-content;
  font-size: 14px;
  color: var(--hds-muted);
  line-height: 1.2;
  margin-bottom: -24px;
}
.hds-brand-logo { width: 164px; height: auto; display: block; }

.hds-left-title {
  margin: 0 0 14px;
  font-size: clamp(20px, 1.6vw, 25px);
  font-weight: 700;
  color: var(--hds-ink);
}
.hds-rule { height: 1px; background: var(--hds-line); margin-bottom: 22px; }

/* Hai chế độ nhập: đã đo chân / ước lượng theo chiều cao - cân nặng - tuổi */
.hds-modes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--hds-soft);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 22px;
}
.hds-mode {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 12px 8px;
  cursor: pointer;
  font: inherit;
  color: var(--hds-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.hds-mode-t { font-size: 15.5px; font-weight: 600; }
.hds-mode-d { font-size: 12.5px; font-weight: 400; opacity: 0.85; }
.hds-mode.is-on {
  background: #fff;
  color: var(--hds-ink);
  box-shadow: 0 1px 4px rgba(31, 36, 33, 0.12);
}

.hds-pane { display: none; }
.hds-pane.is-on { display: block; }

.hds-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.hds-fld { display: flex; flex-direction: column; gap: 8px; }
.hds-fld-full { grid-column: 1 / -1; }
.hds-lb {
  font-size: 15px;
  color: var(--hds-ink);
  font-weight: 500;
}
.hds-lb i { color: #d14343; font-style: normal; }

.hds-inp {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #d7ddd4;
  border-radius: 999px;
  background: #fff;
  height: 52px;
  padding: 0 20px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.hds-inp:focus-within {
  border-color: var(--hds-green);
  box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.12);
}
.hds-inp input,
.hds-inp select {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--hds-ink);
  height: 100%;
}
.hds-unit {
  font-size: 14.5px;
  color: var(--hds-muted);
  padding-left: 8px;
  flex: none;
}

/* Ô chọn tuổi: bảng chọn riêng thay cho <select> của trình duyệt.
   Danh sách xổ mặc định dài 16 dòng, tràn qua cả nút "Tìm size" bên dưới và
   mỗi máy hiển thị một kiểu. Bảng này gọn trong 4 cột, bấm một phát là xong. */
.hds-age { position: relative; }
.hds-age-btn {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.hds-age-val { font-size: 16px; color: var(--hds-ink); }
.hds-age-val.is-empty { color: #9aa29b; }
.hds-age-caret {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--hds-muted);
  transition: transform 0.18s;
}
.hds-age.is-open .hds-age-btn {
  border-color: var(--hds-green);
  box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.12);
}
.hds-age.is-open .hds-age-caret { transform: rotate(180deg); }

.hds-age-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--hds-line);
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(31, 36, 33, 0.16);
  padding: 14px;
  animation: hds-age-in 0.16s ease-out;
}
@keyframes hds-age-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.hds-age-head {
  display: block;
  font-size: 12.5px;
  color: var(--hds-muted);
  margin-bottom: 10px;
}
.hds-age-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hds-age-b {
  border: 1px solid var(--hds-line);
  border-radius: 10px;
  background: #fff;
  padding: 11px 4px;
  font: inherit;
  font-size: 15px;
  color: var(--hds-ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hds-age-b:hover { background: #f1f8f1; border-color: var(--hds-green); color: var(--hds-green); }
.hds-age-b.is-on {
  background: var(--hds-green);
  border-color: var(--hds-green);
  color: #fff;
  font-weight: 600;
}
.hds-age-b.is-wide { grid-column: 1 / -1; }

/* Giới tính: hai nút tròn kiểu radio */
.hds-gt { display: flex; align-items: center; gap: 52px; height: 52px; }
.hds-gt-b {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15.5px;
  color: var(--hds-ink);
}
/* Vành tròn. box-sizing của ::before mặc định là content-box nên bề dày viền
   CỘNG THÊM vào bề ngang: trước đây chọn rồi là viền dày lên 5px, vòng phình
   từ 22px thành 29px, hai ô nhìn to nhỏ khác nhau. Ép border-box để vòng luôn
   đúng 16px ở cả hai trạng thái. */
.hds-gt-b::before {
  content: "";
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #c5ccc2;
  flex: none;
  transition: border-color 0.18s;
}
.hds-gt-b.is-on::before { border-color: var(--hds-green); }
/* Chấm xanh ở giữa vòng — vành để mảnh, ruột là một chấm riêng, đúng kiểu nút
   radio quen mắt. Đặt tuyệt đối vì ::after nằm SAU phần chữ trong hàng flex.
   left: 4px = (16 - 8) / 2 nên chấm nằm đúng tâm vòng. */
.hds-gt-b::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--hds-green);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s, transform 0.18s;
}
.hds-gt-b.is-on::after { opacity: 1; transform: scale(1); }

/* Ô nhập chiều dài bàn chân (chế độ "Đã đo chân") */
.hds-step {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 10px;
  align-items: center;
}
.hds-step-b {
  height: 52px;
  border-radius: 50%;
  border: 1px solid #d7ddd4;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  color: var(--hds-green);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.hds-step-b:hover { background: #eef5ee; border-color: var(--hds-green); }
.hds-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.hds-quick-lb { font-size: 14px; color: var(--hds-muted); margin-right: 2px; }
.hds-quick-b {
  border: 1px solid var(--hds-line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: 14px;
  color: var(--hds-muted);
  cursor: pointer;
}
.hds-quick-b:hover { border-color: var(--hds-green); color: var(--hds-green); }

.hds-submit {
  width: 100%;
  margin-top: 26px;
  height: 58px;
  border: 0;
  border-radius: 999px;
  background: #1b5e20;
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.hds-submit:hover { background: #164a19; }
.hds-submit:active { transform: scale(0.99); }

.hds-err {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: #c0392b;
  background: #fdecea;
  border-radius: 10px;
  padding: 10px 14px;
}

/* Khối kết quả — JS đổ vào, HTML tĩnh để rỗng */
.hds-result { margin-top: 22px; }
.hds-card {
  border: 1px solid #d9ead9;
  border-radius: 16px;
  background: #f4faf4;
  padding: 20px;
}
.hds-card-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hds-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid var(--hds-green);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hds-ring-lb {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--hds-muted);
}
.hds-ring-sz {
  font-size: 32px;
  font-weight: 800;
  color: var(--hds-green);
  line-height: 1.05;
}
.hds-res-k { font-size: 13px; color: var(--hds-muted); display: block; }
.hds-res-v {
  font-size: 21px;
  font-weight: 700;
  color: var(--hds-ink);
  display: block;
  margin: 2px 0 4px;
}
.hds-res-d { font-size: 13.5px; color: var(--hds-muted); }
.hds-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hds-fact {
  background: #fff;
  border: 1px solid var(--hds-line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--hds-muted);
}
.hds-fact b { color: var(--hds-ink); font-size: 14.5px; }
.hds-res-notes {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--hds-muted);
}

/* Ghi chú tham khảo cuối cột trái */
.hds-note {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  border: 1px solid var(--hds-line);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
}
.hds-note svg { width: 22px; height: 22px; flex: none; color: var(--hds-muted); }
.hds-note p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--hds-muted);
}
.hds-note a { color: var(--hds-green); text-decoration: underline; }

/* ---------- Cột phải: bảng size + hướng dẫn đo ---------- */
.hds-right-title {
  margin: 0 0 18px;
  font-size: clamp(19px, 1.6vw, 25px);
  font-weight: 800;
  color: var(--hds-ink);
  text-transform: uppercase;
}
.hds-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--hds-line);
  margin-bottom: 20px;
}
.hds-tab {
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--hds-muted);
  padding: 12px 8px 14px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s, border-color 0.18s;
}
.hds-tab.is-on { color: var(--hds-green); font-weight: 600; border-bottom-color: var(--hds-green); }

.hds-tabpane { display: none; }
.hds-tabpane.is-on { display: block; }

.hds-tip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--hds-muted);
}
.hds-tip img { width: 17px; height: 17px; flex: none; }

.hds-table-wrap {
  background: var(--hds-soft);
  border-radius: 16px;
  padding: 6px 10px 10px;
  overflow-x: auto;
}
.hds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 420px;
}
.hds-table th {
  padding: 16px 12px;
  font-weight: 700;
  color: var(--hds-ink);
  text-align: center;
  white-space: nowrap;
}
.hds-table td {
  padding: 11px 12px;
  text-align: center;
  color: #33383a;
  border-top: 1px solid #e6eae3;
}
.hds-table tbody tr:first-child td { border-top: 1px solid #dfe5db; }
.hds-table tbody tr.is-pick td {
  background: #e8f3e6;
  color: var(--hds-green);
  font-weight: 600;
}
.hds-table tbody tr.is-pick td:first-child { border-radius: 10px 0 0 10px; }
.hds-table tbody tr.is-pick td:last-child { border-radius: 0 10px 10px 0; }

.hds-between {
  margin-top: 18px;
  background: var(--hds-soft);
  border-radius: 16px;
  padding: 18px 22px 20px;
}
.hds-between b { font-size: 14.5px; color: var(--hds-ink); }
.hds-between ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.hds-between li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #44494b;
}
.hds-between li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--hds-ink);
}

/* Tab "Hướng dẫn đo" */
.hds-how {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 28px;
  align-items: start;
}
.hds-how-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 560px;
  border-radius: 16px;
  background: #000;
  object-fit: contain;
}
.hds-how h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--hds-ink);
}
.hds-how ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 2;
  color: #44494b;
}
.hds-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  border: 1px solid var(--hds-line);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--hds-green);
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}
.hds-dl:hover { background: #eef5ee; border-color: var(--hds-green); }
.hds-dl svg { width: 17px; height: 17px; }

/* --------------------- GỢI Ý SẢN PHẨM THEO SIZE --------------------------
   Khối này dùng lại nguyên .products / .prod-title / .prod-grid /
   .home-loadmore-* của trang chủ (styles.css) nên thẻ sản phẩm ở đây giống
   hệt trang chủ. Ở dưới chỉ chỉnh lại phần đệm trên vì trên nó đã có khoảng
   trắng của khu hai cột rồi. */
.hds-sug.products { padding-top: 0; }
.hds-sug-empty {
  font-size: 14.5px;
  color: var(--hds-muted);
}

/* ------------------------------ RESPONSIVE -------------------------------
   Ô lưới của CSS Grid mặc định KHÔNG hẹp hơn nội dung bên trong (min-width:auto),
   nên trên điện thoại hai cột tràn ra khỏi màn hình. Đặt min-width:0 cho các ô
   thì chúng mới co lại vừa bề ngang máy. */
.hds-layout > * { min-width: 0; }
.hds-left, .hds-right { min-width: 0; }

@media (max-width: 1100px) {
  .hds-layout { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; }
}
@media (max-width: 860px) {
  .hds-how { grid-template-columns: 1fr; gap: 20px; }
  .hds-how-video { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .hds-wrap { padding: 0 16px; }

  /* Banner: cắt bớt chiều cao nhưng neo vào MÉP DƯỚI để dải vạch đo còn nguyên */
  .hds-banner-bg { height: 132px; object-fit: cover; object-position: center bottom; }
  .hds-banner-in { padding: 0 14px 14px; }
  .hds-banner-title { font-size: 30px; }
  /* Banner mobile thấp, không đủ chỗ đặt logo ngay trên dòng chữ -> đưa logo
     về góc trên bên phải của cả banner (bỏ mốc position của khối chữ đi). */
  .hds-banner-box { position: static; }
  .hds-banner-logo { right: 14px; top: 9px; bottom: auto; width: 68px; }

  .hds-body { padding: 26px 0 34px; }
  .hds-brand-logo { width: 132px; }
  .hds-brand-lb { font-size: 13px; margin-bottom: -19px; }

  /* Hai nút chọn chế độ: chữ phụ được phép xuống dòng thay vì tràn ngang */
  .hds-modes { gap: 2px; padding: 5px; }
  .hds-mode { padding: 9px 4px; text-align: center; align-items: center; }
  .hds-mode-t { font-size: 13.5px; }
  .hds-mode-d { font-size: 10.5px; line-height: 1.3; }

  /* Mỗi ô nhập một dòng cho dễ bấm trên điện thoại */
  .hds-grid2 { grid-template-columns: 1fr; gap: 14px; }
  .hds-inp { height: 48px; }
  .hds-gt { gap: 44px; height: 42px; }
  .hds-age-pop { min-width: 0; padding: 12px; }
  .hds-age-grid { grid-template-columns: repeat(3, 1fr); }
  .hds-age-b { padding: 11px 4px; }
  .hds-step { grid-template-columns: 44px 1fr 44px; gap: 8px; }
  .hds-step-b { height: 48px; }
  .hds-submit { height: 50px; margin-top: 20px; }

  /* Thẻ kết quả */
  .hds-card { padding: 16px; }
  .hds-card-top { gap: 12px; }
  .hds-ring { width: 68px; height: 68px; }
  .hds-ring-sz { font-size: 25px; }
  .hds-res-v { font-size: 19px; }
  .hds-facts { gap: 8px; }
  .hds-fact { padding: 7px 10px; font-size: 12.5px; }
  .hds-note { padding: 12px 14px; gap: 10px; }

  /* Cột phải */
  .hds-right-title { margin-bottom: 14px; }
  .hds-tab { font-size: 14px; padding: 11px 4px 12px; }
  .hds-tip { font-size: 12.5px; margin-bottom: 12px; align-items: flex-start; }
  .hds-tip img { margin-top: 2px; }

  /* Bảng size vừa đúng bề ngang máy, không phải kéo ngang */
  .hds-table-wrap { padding: 4px 6px 8px; border-radius: 14px; }
  .hds-table { min-width: 0; font-size: 13px; }
  .hds-table th { padding: 12px 4px; font-size: 12.5px; white-space: normal; }
  .hds-table td { padding: 10px 4px; }

  .hds-between { padding: 16px; border-radius: 14px; }
  .hds-between li { font-size: 13px; line-height: 1.8; }

  .hds-how ol { font-size: 14px; line-height: 1.85; padding-left: 18px; }
  .hds-dl { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
  .hds-mode-d { font-size: 9.8px; }
  .hds-table { font-size: 12.2px; }
  .hds-table th { font-size: 11.8px; }
}

/* ---------- Hai cột: dải tiêu đề nằm đúng một hàng ----------
   "Tìm size chuẩn cho con" bên trái và hai tab bên phải phải ngang nhau, gạch
   chia dưới chúng cũng vậy. Hai cột là hai ô lưới riêng, mỗi cột tự xếp dọc
   nên không tự khớp: khối phía trên gạch chia bên trái (logo FOOTFIT) cao 63px
   còn bên phải (tiêu đề một dòng) chỉ 36px, làm tiêu đề trái tụt xuống 17px so
   với chữ trên tab.
   Cách làm: cho hai khối phía trên một chiều cao chung, rồi cho chữ tiêu đề
   trái và chữ trên tab cùng canh giữa trong một dải cao bằng nhau. Cỡ chữ hai
   bên khác nhau nên canh giữa mới ăn, canh theo lề trên thì vẫn lệch.
   Chỉ áp cho bố cục hai cột (>=1101px); dưới mức đó hai khối xếp chồng, ép
   chiều cao chỉ tạo khoảng trắng thừa. */
@media (min-width: 1101px) {
  .hds-layout {
    --hds-head-h: 64px;   /* khối logo FOOTFIT bên trái cao 63,2px */
    --hds-band-h: 54px;   /* dải chứa chữ tiêu đề / chữ trên tab */
  }

  .hds-brand,
  .hds-right-title { height: var(--hds-head-h); margin-bottom: 0; }

  .hds-left-title {
    display: flex;
    align-items: center;
    height: var(--hds-band-h);
    margin: 0 0 -1px;   /* .hds-tab kéo lên 1px đè lên viền của .hds-tabs */
  }

  .hds-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--hds-band-h);
    padding: 0 8px;
  }
}