/* Thanh điều hướng trên cùng.

   [hidden] trước mọi rule display — thanh này có phần bung ra trên điện thoại, quên
   chốt là nó hiện sẵn ngay lúc tải. */
[hidden] { display: none !important; }

/* Chiều cao thanh, để mấy khối `position: sticky` của trang khác biết mà tránh. Một
   con số ở một chỗ: viết cứng 3,4rem vào ba file CSS thì đổi chiều cao thanh là đi lùng
   ba nơi, và sót một nơi thì thanh lọc của trang đó chui xuống dưới thanh này. */
:root { --cao-thanh: 3.4rem; }

.thanh-tren {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.2rem;
  background: rgba(8,11,20,.82);
  border-bottom: 1px solid rgba(216,180,92,.16);
  backdrop-filter: blur(8px);
}

.tt-nha {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--giay); white-space: nowrap;
}
.tt-nha:hover { color: var(--vang); }

.tt-links { display: flex; gap: 1.2rem; margin-left: auto; }
.tt-links a {
  font-size: .84rem; text-decoration: none; color: var(--giay-chim);
  white-space: nowrap; transition: color .3s;
}
.tt-links a:hover { color: var(--giay); }
.tt-links a.dang-o { color: var(--vang); }

.tt-nut {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: .5rem 1rem; white-space: nowrap;
  color: var(--vang); border: 1px solid rgba(216,180,92,.45);
  transition: color .3s, background .3s;
}
.tt-nut:hover { color: var(--dem-sau); background: var(--vang); }

/* Nút bung menu: chỉ hiện ở màn hẹp. */
.tt-mo {
  display: none; margin-left: auto;
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
  color: var(--giay); background: none; border: none; padding: .2rem .4rem;
}

@media (max-width: 860px) {
  /* Màn hẹp: gộp mọi link vào một bảng bung xuống. Để nguyên hàng ngang thì sáu link
     cộng nút CTA tràn ra ngoài mép và chồng lên nhau — đúng lỗi giao diện đã dặn là
     không được có. */
  .tt-mo { display: block; }
  .tt-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: rgba(8,11,20,.97);
    border-bottom: 1px solid rgba(216,180,92,.2);
    max-height: 0; overflow: hidden;
    transition: max-height .35s var(--nhip);
  }
  .tt-links.mo { max-height: 22rem; }
  .tt-links a {
    padding: .85rem 1.2rem; font-size: .95rem;
    border-top: 1px solid rgba(240,231,212,.07);
  }
  .tt-nut { margin-left: .6rem; font-size: .72rem; padding: .45rem .7rem; }
}

@media (max-width: 420px) {
  .thanh-tren { padding: .6rem .9rem; gap: .6rem; }
  .tt-nha { font-size: .72rem; letter-spacing: .1em; }
  /* Chỉ còn giá, bỏ chữ — hai chữ "Rút một quẻ" đẩy nút tràn mép ở màn 360px. */
  .tt-nut span { display: none; }
}