/* 🧭 HÀNH TRÌNH CỦA TÔI — bậc · huy hiệu · sổ lưu bút · trang cuối khoá (Đợt C).
   Nút ≥56px, chữ nội dung 17px, vùng chạm ≥44px. */

/* thẻ mời trong KHU 4 */
.ht-the {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 76px; padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--border, #e5d9bf); border-radius: 20px;
  background: linear-gradient(135deg, #fffaf0, #f6edd8);
  box-shadow: 0 10px 26px -18px rgba(60, 45, 15, .55);
  font-family: inherit; font-size: 17px; color: var(--ink, #3a2f22); text-align: left; cursor: pointer;
}
.ht-an {
  width: 54px; height: 54px; flex: none; border-radius: 12px;
  background: #B4372E; color: #fff; font-size: 1.8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3);
}
.ht-the .tx { flex: 1; min-width: 0; }
.ht-the .tx .t1 { font-weight: 800; }
.ht-the .tx .t2 { font-size: .86rem; color: #8a7f63; margin-top: 2px; }
.ht-the .chev { color: #bfae82; font-size: 1.3rem; flex: none; }

/* lớp phủ */
.ht-ov { position: fixed; inset: 0; z-index: 9996; background: #2B2620; color: #f4ecd8; display: none; flex-direction: column; font-size: 17px; }
.ht-ov.mo { display: flex; }
.ht-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: #241f1a; border-bottom: 1px solid rgba(255, 255, 255, .09); flex: none; }
.ht-top .t { flex: 1; min-width: 0; font-weight: 800; font-size: 1.02rem; }
.ht-x { width: 44px; height: 44px; flex: none; border-radius: 50%; border: none; cursor: pointer; background: rgba(255, 255, 255, .12); color: #f4ecd8; font-size: 1.1rem; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.ht-than { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 14px 24px; }

/* tab */
.ht-tab { display: flex; gap: 8px; margin-bottom: 14px; }
.ht-tab button { flex: 1; min-height: 48px; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: .96rem; font-weight: 700; background: rgba(255, 255, 255, .08); color: #f4ecd8; border: 1px solid rgba(255, 255, 255, .2); }
.ht-tab button.chon { background: #d8a33d; border-color: #d8a33d; color: #3a2f22; }

.ht-tieu { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a99b78; margin: 18px 0 8px; }
.ht-ghichu { font-size: .84rem; color: #a99b78; line-height: 1.5; }

/* bậc */
.ht-bac { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); }
.ht-bac .ht-an { width: 66px; height: 66px; font-size: 2.2rem; }
.ht-bac .tx { flex: 1; min-width: 0; }
.ht-bac .tx .nm { font-size: 1.3rem; font-weight: 800; }
.ht-bac .tx .sb { font-size: .86rem; color: #cfc3a6; }
.ht-dk { list-style: none; margin: 10px 0 0; padding: 0; }
.ht-dk li { display: flex; align-items: center; gap: 9px; min-height: 40px; font-size: .94rem; border-top: 1px solid rgba(255, 255, 255, .09); padding: 5px 0; }
.ht-dk li:first-child { border-top: none; }
.ht-dk .nm { flex: 1; min-width: 0; }
.ht-dk .so { font-variant-numeric: tabular-nums; color: #cfc3a6; }
.ht-dk .ok { color: #a7c98a; }
.ht-thanh { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 4px; }
.ht-thanh > i { display: block; height: 100%; border-radius: 999px; background: #d8a33d; }

/* bốn ô số */
.ht-o4 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ht-o { padding: 13px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); }
.ht-o .n { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ht-o .l { font-size: .8rem; color: #cfc3a6; margin-top: 3px; }
.ht-o .p { font-size: .74rem; color: #a99b78; margin-top: 2px; }

/* huy hiệu */
.ht-hh-nhom { margin-bottom: 6px; font-size: .84rem; font-weight: 800; color: #cfc3a6; }
.ht-hh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.ht-hh-o { padding: 11px 8px; border-radius: 15px; text-align: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); }
.ht-hh-o.chua { opacity: .42; }
.ht-hh-o .chu { width: 44px; height: 44px; margin: 0 auto 6px; border-radius: 11px; color: #fff; font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28); }
.ht-hh-o .nm { font-size: .76rem; line-height: 1.25; }
.ht-hh-o .th { font-size: .7rem; color: #a99b78; margin-top: 3px; line-height: 1.3; }

/* bạn bè + chip */
.ht-ban { display: flex; gap: 8px; flex-wrap: wrap; }
.ht-ban .b { width: 56px; text-align: center; }
.ht-ban .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin: 0 auto 3px; border: 2px solid rgba(255, 255, 255, .3); background: linear-gradient(135deg, #b7c27f, #8a9a53); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ht-ban .nm { font-size: .68rem; color: #cfc3a6; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ht-chip { display: flex; gap: 7px; flex-wrap: wrap; }
.ht-chip span { font-size: .96rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 11px; padding: 6px 11px; }
.ht-chip span.mo { opacity: .42; }

/* sổ lưu bút */
.ht-trang { padding: 12px 13px; border-radius: 15px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .11); margin-bottom: 9px; }
.ht-trang .d1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: #a99b78; }
.ht-trang .d1 .vai { color: #f0d79a; font-weight: 800; }
.ht-trang .d2 { margin-top: 4px; font-size: .96rem; }
.ht-trang .hay { margin-top: 6px; font-size: 1.02rem; color: #f0d79a; }
.ht-trang .hay .boi { display: block; font-size: .78rem; color: #a99b78; }

/* trang cuối khoá */
.ht-cuoi { padding: 20px 16px; border-radius: 20px; text-align: center; background: linear-gradient(160deg, #3a332a, #2a241d); border: 1px solid rgba(216, 163, 61, .35); }
.ht-cuoi .ht-an { width: 76px; height: 76px; font-size: 2.6rem; margin: 0 auto 10px; }
.ht-cuoi .nm { font-size: 1.3rem; font-weight: 800; }
.ht-cuoi .lp { font-size: .88rem; color: #cfc3a6; margin-bottom: 12px; }
.ht-cau { margin-top: 12px; display: grid; gap: 8px; }
.ht-cau .c { padding: 11px; border-radius: 13px; background: rgba(255, 255, 255, .07); }
.ht-cau .c .k { font-size: .74rem; color: #a99b78; text-transform: uppercase; letter-spacing: .05em; }
.ht-cau .c .v { font-size: 1.16rem; margin-top: 3px; }

.ht-nut { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 56px; padding: 12px 16px; border: none; border-radius: 16px; cursor: pointer; font-family: inherit; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #7d8c50, #55632f); margin-top: 14px; transition: transform .14s cubic-bezier(.34, 1.4, .64, 1); }
.ht-nut:active { transform: scale(.965); }
.ht-nut.phu { background: rgba(255, 255, 255, .12); color: #f4ecd8; border: 1px solid rgba(255, 255, 255, .26); }

@media (max-width: 380px) {
  .ht-hh { grid-template-columns: repeat(2, 1fr); }
  .ht-bac .ht-an { width: 56px; height: 56px; font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) { .ht-nut { transition: none; } }