/* ===================================================================
   THANH TRÊN DÙNG CHUNG — xem src/chung/thanhTren.js.
   Cần goose-ui.css nạp trước (token --gs-*).
   Cao đúng 60px trên màn rộng: mọi trang cũ đã chừa đúng 60px cho thanh
   trên của chúng, nên thay vào không xô lệch thân trang nào.
   =================================================================== */

.gs-top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--gs-night);
  color: var(--gs-night-ink);
  font: 400 14px/1.3 var(--gs-font);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.gs-top-row {
  display: flex;
  align-items: center;
  gap: var(--gs-4);
  height: 60px;
  /* Trải hết bề ngang như thân trang: gom vào giữa (max-width) thì trên màn
     rộng logo lệch hẳn khỏi cột danh sách việc nằm sát mép trái. */
  padding: 0 var(--gs-5);
  box-sizing: border-box;
}

/* :where() giữ độ ưu tiên bằng 0: không thì nó đè màu của .gs-top-link. */
:where(.gs-top) a { color: inherit; text-decoration: none; }

.gs-top-ico { width: 18px; height: 18px; flex: none; }

/* ---- Logo ---- */
.gs-top-brand {
  display: flex; align-items: center; gap: var(--gs-2);
  font-weight: 650; font-size: 16px; letter-spacing: -.2px;
  flex: none;
}
.gs-top-mark {
  width: 28px; height: 28px;
  image-rendering: pixelated;
  border-radius: var(--gs-r-sm);
  background: var(--gs-night-2);
}

/* ---- Công tắc hai mặt ---- */
.gs-top-mat {
  display: flex; flex: none;
  padding: 3px;
  border-radius: var(--gs-r);
  background: var(--gs-night-2);
}
.gs-top-mat a {
  padding: 6px 12px;
  border-radius: 7px;
  font-weight: 500; font-size: 13.5px;
  color: var(--gs-night-ink-2);
  transition: background var(--gs-t), color var(--gs-t);
}
.gs-top-mat a:hover { color: var(--gs-night-ink); }
.gs-top-mat a[aria-current] { background: var(--gs-surface); color: var(--gs-ink); }

/* ---- Link trong mặt ---- */
.gs-top-links {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0;
  /* Cao hết hàng: overflow-x:auto cắt luôn chiều dọc, gạch chân nằm ở mép
     dưới hàng nên hộp phải cao tới đó. */
  align-self: stretch;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.gs-top-links::-webkit-scrollbar { display: none; }
.gs-top-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border-radius: var(--gs-r-sm);
  color: var(--gs-night-ink-2);
  font-weight: 500; font-size: 14px;
  white-space: nowrap;
  transition: background var(--gs-t), color var(--gs-t);
}
.gs-top-link[hidden] { display: none; }
.gs-top-link:hover { color: var(--gs-night-ink); background: rgba(255, 255, 255, .06); }
.gs-top-link[aria-current="page"] { color: var(--gs-night-ink); }
.gs-top-link[aria-current="page"]::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: -12px;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--gs-primary);
}
.gs-top-dem {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: var(--gs-r-pill);
  background: var(--gs-primary);
  color: #fff; font-size: 11.5px; font-weight: 700;
  box-sizing: border-box;
}
.gs-top-dem[hidden] { display: none; }

/* ---- Tài khoản ---- */
.gs-top-acc { position: relative; flex: none; margin-left: auto; }
.gs-top-acc-nut {
  display: flex; align-items: center; gap: var(--gs-2);
  height: 40px; padding: 0 8px 0 4px;
  border: 0; border-radius: var(--gs-r);
  background: transparent; color: inherit;
  font: inherit; cursor: pointer;
  transition: background var(--gs-t);
}
.gs-top-acc-nut:hover, .gs-top-acc-nut[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.gs-top-av {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gs-primary); color: #fff;
  font-weight: 700; font-size: 14px;
}
.gs-top-ten { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.2; }
.gs-top-ten b { font-weight: 600; font-size: 13.5px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-top-ten small { font-size: 11.5px; color: var(--gs-night-ink-2); }
.gs-top-ten small:empty { display: none; }

.gs-top-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 260px;
  padding: 6px;
  border-radius: var(--gs-r);
  background: var(--gs-surface); color: var(--gs-ink);
  box-shadow: var(--gs-sh-3);
  border: 1px solid var(--gs-rule);
  z-index: 70;
}
.gs-top-menu[hidden] { display: none; }
.gs-top-menu-dau { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--gs-rule-2); margin-bottom: 4px; }
.gs-top-menu-dau b { font-weight: 600; }
.gs-top-menu-dau small { color: var(--gs-ink-3); font-size: 12px; }
.gs-top-menu a, .gs-top-menu-hang, .gs-top-menu-thoat {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 38px; padding: 0 10px;
  border: 0; border-radius: var(--gs-r-sm);
  background: none; color: var(--gs-ink);
  font: 400 14px/1.2 var(--gs-font); text-align: left;
  cursor: pointer; box-sizing: border-box;
}
.gs-top-menu a:hover, .gs-top-menu-hang:hover, .gs-top-menu-thoat:hover { background: var(--gs-surface-2); }
.gs-top-menu a[aria-current] { font-weight: 600; }
.gs-top-menu-hang span { flex: 1; }
.gs-top-menu-sep { height: 1px; margin: 4px 0; background: var(--gs-rule-2); }
.gs-top-menu-thoat { color: var(--gs-bad); }
.gs-top-menu .gs-top-ico { color: var(--gs-ink-3); }
.gs-top-menu-thoat .gs-top-ico { color: var(--gs-bad); }

/* Công tắc nhỏ trong menu */
.gs-top-switch {
  appearance: none; -webkit-appearance: none;
  width: 34px; height: 20px; margin: 0; flex: none;
  border-radius: 999px; background: var(--gs-rule);
  position: relative; cursor: pointer;
  transition: background var(--gs-t);
}
.gs-top-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--gs-sh-1);
  transition: transform var(--gs-t);
}
.gs-top-switch:checked { background: var(--gs-primary); }
.gs-top-switch:checked::after { transform: translateX(14px); }

/* Nút phụ đặt trước logo (mở cây bài, quay lại) */
.gs-top-truoc {
  /* KHÔNG đặt display ở đây: nút mở cây bài dùng .lp-burger để ẩn trên màn rộng. */
  place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 0; border-radius: var(--gs-r-sm);
  background: transparent; color: var(--gs-night-ink);
  cursor: pointer;
}
.gs-top-truoc:hover { background: rgba(255, 255, 255, .08); }

.gs-top :focus-visible { outline: 2px solid #F3B58E; outline-offset: 2px; }

/* ---- Màn vừa: bỏ tên chữ bên cạnh avatar ---- */
@media (max-width: 1100px) {
  .gs-top-ten { display: none; }
  .gs-top-row { gap: var(--gs-3); padding: 0 var(--gs-4); }
}

/* ---- Màn hẹp: link xuống hàng thứ hai, cuộn ngang ---- */
@media (max-width: 820px) {
  .gs-top-row { flex-wrap: wrap; height: auto; padding: 8px 12px 0; row-gap: 4px; }
  .gs-top-brand span { display: none; }
  .gs-top-mat { order: 1; }
  .gs-top-acc { order: 2; }
  .gs-top-links {
    order: 3; flex-basis: 100%;
    margin: 0 -12px; padding: 0 8px;
    height: 44px;
  }
  .gs-top-link { height: 36px; padding: 0 10px; font-size: 13.5px; }
  .gs-top-link[aria-current="page"]::after { bottom: -4px; }
  .gs-top-menu { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; }
}

/* Dải công cụ xem thử (?dev=1) */
.gs-dev {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 24px;
  background: #3a2a10; color: #f7e3b8;
  font: 500 12.5px/1 var(--gs-font);
}
.gs-dev select, .gs-dev button {
  height: 28px; padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--gs-r-sm);
  background: rgba(0, 0, 0, .25); color: inherit; font: inherit; cursor: pointer;
}

.gs-top-menu-hang span small { display: block; margin-top: 2px; font-size: 12px; color: var(--gs-ink-3); }