/* Trang "Của bạn". Nạp SAU style.css và trang_chu.css, chỉ thêm chứ không sửa lại
   thứ có sẵn: biến màu, font, `.nut-chinh` / `.nut-phu`, `.khoi`, `.hoa-tiet` đều
   dùng nguyên của trang chủ.

   Trang này KHÔNG dùng `.khoi` cho phần thân: `.khoi` cao tối thiểu 100svh và căn
   giữa theo chiều dọc, hợp với trang kể chuyện theo cú cuộn, còn đây là bảng điều
   khiển — bốn khối phải nằm liền nhau, đọc hết trong một màn hình rưỡi. */

/* Chốt cho `hidden`, phải đứng TRƯỚC mọi rule `display`. Lý do đầy đủ ở style.css:
   mặc định `[hidden] { display: none }` của trình duyệt có độ ưu tiên gần thấp nhất,
   chỉ một bộ chọn theo id hay lớp có `display` là nó bị đè, và `el.hidden = true`
   thành không có tác dụng gì — không lỗi, không log, phần tử cứ nằm đó. */
[hidden] { display: none !important; }

.khoi-cb-dau { min-height: auto; padding-bottom: 2rem; }
.cb-chuoi {
  margin: 1.2rem 0 0; font-size: .92rem; letter-spacing: .06em;
  color: var(--vang-toi);
}

.khung-cb { max-width: 52rem; margin: 0 auto; padding: 0 1.5rem 5rem; }

.cb-khoi { margin-bottom: 3rem; }
/* Bốn mốc chuỗi. Mốc đã đạt sáng vàng; chưa đạt thì mờ nhưng vẫn đọc được — thấy trước
   phần thưởng là lý do để đi tiếp. */
.cb-moc { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: 0 0 1.2rem; }
.cb-moc-o {
  display: flex; flex-direction: column; gap: .15rem; padding: .8rem .85rem;
  border: 1px solid rgba(216,180,92,.2); color: var(--giay-chim);
}
.cb-moc-o b { font-size: 1.15rem; font-weight: 500; color: var(--giay-mo); }
.cb-moc-o span { font-size: .92rem; }
.cb-moc-o i { font-size: .8rem; font-style: normal; opacity: .8; }
.cb-moc-o.dat { border-color: var(--vang); color: var(--giay); box-shadow: 0 0 22px -8px rgba(216,180,92,.6); }
.cb-moc-o.dat b, .cb-moc-o.dat i { color: var(--vang); }
@media (max-width: 560px) { .cb-moc { grid-template-columns: repeat(2, 1fr); } }
.cb-khoi h2 {
  font-size: 1.35rem; font-weight: 500; margin: 0 0 .3rem;
}
.cb-dan {
  margin: .5rem 0 1.1rem; font-size: .94rem; line-height: 1.7;
  color: var(--giay-chim); max-width: 44rem;
}
.cb-dan b { color: var(--giay-mo); font-weight: 500; }

/* Thẻ số. Cùng hình dạng ở cả bốn khối để mắt chỉ phải học một lần. */
.cb-the-ds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .6rem; margin-top: 1rem;
}
.cb-the {
  display: block; text-decoration: none; padding: .9rem 1rem;
  border: 1px solid rgba(216,180,92,.18); background: rgba(14,19,34,.5);
  transition: border-color .3s, background .3s;
}
a.cb-the:hover { border-color: var(--vang); background: rgba(14,19,34,.8); }
.cb-the b {
  display: block; font-size: 1.15rem; font-weight: 500; color: var(--giay);
  line-height: 1.3;
}
.cb-the span {
  display: block; margin-top: .2rem; font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vang-toi);
}
.cb-the i {
  display: block; margin-top: .35rem; font-style: normal; font-size: .84rem;
  line-height: 1.5; color: var(--giay-chim);
}
/* Đã xong hôm nay: chỉ chìm đi một chút. KHÔNG dấu tích, không màu xanh, không huy
   hiệu — trang này ghi nhận chứ không phát thưởng. */
.cb-xong { opacity: .62; }
.cb-xong b { color: var(--giay-mo); }

/* Mấy lá gần đây. Một dòng một lá, đọc dọc xuống thành một mạch. */
.cb-la-qua { display: flex; flex-direction: column; gap: .1rem; }
.cb-lq {
  display: grid; grid-template-columns: 3.4rem 11rem 1fr; gap: .8rem;
  align-items: baseline; padding: .5rem 0;
  border-bottom: 1px solid rgba(240,231,212,.07);
  font-size: .92rem;
}
.cb-lq-ngay { color: var(--giay-chim); font-size: .84rem; }
.cb-lq-ten { color: var(--giay-mo); font-weight: 400; }
.cb-lq-ghi { color: var(--giay-chim); line-height: 1.5; }
.cb-lq-ung .cb-lq-ten { color: var(--vang); }

/* Quẻ còn câu hỏi chưa dùng. Hàng đã bán mà chưa giao. */
.cb-ds-que { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.cb-que-dong {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
  text-decoration: none; padding: .6rem .8rem;
  border-left: 2px solid rgba(216,180,92,.4); background: rgba(14,19,34,.4);
}
.cb-que-dong:hover { background: rgba(14,19,34,.75); }
.cbq-hoi {
  flex: 1 1 16rem; font-size: .92rem; font-style: italic; color: var(--giay-mo);
  line-height: 1.5;
}
.cbq-con { font-size: .84rem; color: var(--vang); white-space: nowrap; }

/* Lá bản mệnh. Ô nhập nhỏ, ba ô một hàng: một ô ngày sinh to chình ình giữa trang
   trông như đang đòi hỏi, mà đây là thứ hoàn toàn tuỳ khách. */
.bm-form {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
  margin: 1.1rem 0 .6rem;
}
.bm-o { display: block; }
.bm-o > span {
  display: block; margin-bottom: .25rem; font-size: .8rem; color: var(--vang-toi);
}
.bm-o input {
  width: 4.5rem; font: inherit; font-size: .95rem; color: var(--giay);
  background: rgba(8,11,20,.6); border: 1px solid rgba(240,231,212,.18);
  padding: .5rem .6rem; text-align: center;
}
.bm-o:last-of-type input { width: 6rem; }
.bm-o input:focus { outline: none; border-color: var(--vang); }
.bm-form .nut-phu { font-size: .92rem; padding: .5rem 1.4rem; }

.bm-the-ds {
  display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0 1.2rem;
}
.bm-the {
  display: block; text-decoration: none; text-align: center; padding: .7rem .8rem;
  border: 1px solid rgba(216,180,92,.2); background: rgba(14,19,34,.5);
  transition: border-color .3s, background .3s;
}
.bm-the:hover { border-color: var(--vang); background: rgba(14,19,34,.8); }
.bm-the img {
  display: block; width: 5.5rem; height: auto; margin: 0 auto .5rem;
  border: 1px solid rgba(216,180,92,.25);
}
.bm-ten { display: block; font-size: .95rem; font-weight: 500; color: var(--giay); }
.bm-nhan {
  display: block; margin-top: .15rem; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vang-toi);
}

/* Thần số. Dùng CHUNG ngày sinh đã nhập ở trên, không thêm ô nào — nên nó nằm luôn
   trong khối kết quả chứ không đứng thành một mục đòi nhập lại. */
.bm-than-so {
  margin: 0 0 1.2rem; padding: 1rem 1.2rem;
  border: 1px solid rgba(216,180,92,.22); background: rgba(14,19,34,.5);
}
.bm-than-so h3 { margin: .2rem 0 .7rem; font-size: 1.15rem; color: var(--vang); }
.bm-than-so p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.7;
                color: var(--giay-mo); }
.bm-than-so p b { color: var(--giay); font-weight: 500; }
.ts-hoi { font-style: italic; color: var(--vang-toi) !important; }
.bm-than-so .cb-dan { margin: .8rem 0 0; }

/* Dòng "đang xem với tài khoản …" ở đầu trang. Chỉ hiện khi đã đăng nhập — đã đăng
   nhập thì trang này là bảng điều khiển TÀI KHOẢN, và nó phải nói ra điều đó. */
.cb-ai { margin: .8rem 0 0; font-size: .9rem; color: var(--giay-chim); }
.cb-ai b { color: var(--giay); font-weight: 500; }

/* Cất kho lên tài khoản. Tách hẳn thành một khối con có viền trên, vì nó là quyết định
   riêng chứ không phải một nút nữa của phần sao lưu ra tệp. */
.cb-dong-bo {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(216,180,92,.2);
}
.cb-dong-bo h3 { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--giay); }
/* Câu nói thẳng cái giá. Không tô đỏ doạ người, nhưng phải khác tông mấy dòng quanh nó
   — đây là chỗ khách cần đọc trước khi bấm. */
.cb-that {
  padding: .7rem .9rem; margin-top: .7rem;
  background: rgba(216,180,92,.07); border-left: 2px solid rgba(216,180,92,.45);
}
.cb-dong-bo .hang-nut { justify-content: flex-start; margin: 1rem 0 .5rem;
                        flex-wrap: wrap; gap: .8rem; }
.cb-dong-bo .nut-chinh, .cb-dong-bo .nut-phu { font-size: .92rem; padding: .5rem 1.3rem; }
#cb-db-luc { color: var(--giay-chim); }

.cb-sao-luu .hang-nut { justify-content: flex-start; margin: 1.2rem 0 .6rem; }
.cb-sao-luu .nut-phu { font-size: .95rem; padding: .6rem 1.6rem; }
.cb-bao { margin: 0 0 1rem; font-size: .9rem; line-height: 1.6; color: var(--vang-toi);
  min-height: 1em; }

@media (max-width: 640px) {
  .khung-cb { padding: 0 1.1rem 3.5rem; }
  .cb-khoi { margin-bottom: 2.2rem; }
  .cb-lq { grid-template-columns: 3.2rem 1fr; }
  .cb-lq-ghi { grid-column: 2; }
}