/* public/hoc-vien-dem.css — 3 mẫu giao diện "đêm" cho đường học Học viện (01/10/2026, BẢN XEM THỬ).
   Mọi luật nằm dưới #view-academy[data-hv=…] — không có thuộc tính đó (kiểu "Cũ",
   hoặc tài khoản thường) thì tệp này không đụng gì. Tiền tố hv- cho class mới. */

/* ---- Chặn nháy "giao diện cũ" (03/10/2026) ----
   Trang trí chạy trong microtask nên thường xong trước khi trình duyệt vẽ. Lớp
   chắn này lo nốt trường hợp máy yếu hoặc đường học được thêm vào sau: đường
   học CHƯA trang trí thì trong suốt chứ không hiện bản trần. Dùng opacity (giữ
   chỗ) chứ không display:none, để không bị giật bố cục.
   Chỉ áp dụng khi hoc-vien-dem.js đã chạy và đặt cờ .hv-co-trang-tri trên <html>
   — tệp JS hỏng hay không tải được thì đường học vẫn hiện bình thường. */
.hv-co-trang-tri #view-academy .ac-path:not([data-hv]) { opacity: 0; }

/* ---- Trời sao lấp lánh (giống Bản đồ doanh nghiệp) ---- */
.hv-troi { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
/* Hiệu năng (vuốt lag 01/10): chỉ sao TO nhấp nháy, bằng opacity trên lớp riêng
   (will-change) — card đồ hoạ lo, không vẽ lại trang. Sao nhỏ đứng yên. */
.hv-troi i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ffe7cf; opacity: .3; }
.hv-troi i.to { width: 3px; height: 3px; opacity: .15; will-change: opacity; animation: hvLapLanh 4.2s ease-in-out infinite; }
@keyframes hvLapLanh { 0%, 100% { opacity: .12; } 50% { opacity: .75; } }
#view-academy[data-hv] .phase > :not(.hv-troi) { position: relative; z-index: 1; }

/* ======================================================================
   CHUNG CHO A · B · C — thẻ quyển thành một mảnh trời đêm
   ====================================================================== */
#view-academy[data-hv] .phase {
  position: relative; overflow: hidden;
  border-color: rgba(255, 150, 80, .18);
  /* Sao đã có lớp .hv-troi riêng — nền chỉ còn 2 lớp màu cho nhẹ (vuốt lag 01/10). */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 110, 40, .10), transparent 55%),
    linear-gradient(180deg, #140c08, #0b0706 60%, #150c07);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);   /* bóng nhỏ: 16 thẻ bóng 48px làm cuộn nặng */
}
#view-academy[data-hv] .phase.complete { border-color: rgba(255, 209, 102, .45); }
#view-academy[data-hv] .phase.is-priority { border-color: rgba(255, 117, 54, .6); box-shadow: 0 0 0 1px rgba(255, 117, 54, .25), 0 6px 16px rgba(0, 0, 0, .35); }

#view-academy[data-hv] .ac-path { position: relative; }
#view-academy[data-hv] .ac-path > .ac-node { position: relative; z-index: 1; }
.hv-duong { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.hv-d-nen { fill: none; stroke: #2a1a10; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.hv-d-cham { fill: none; stroke: #5a3a24; stroke-width: 3; stroke-dasharray: 2 11; stroke-linecap: round; }
.hv-d-toa { fill: none; stroke: #ff6428; stroke-width: 12; opacity: .2; stroke-linecap: round; }
.hv-d-da { fill: none; stroke: #ffb457; stroke-width: 4; stroke-dasharray: 12 9; stroke-linecap: round; }

/* Chấm: vòng phát sáng thay cho nút 3D cũ */
#view-academy[data-hv] .ac-path .ac-node-ico {
  position: relative; overflow: visible;
  background: radial-gradient(circle at 50% 40%, #2a1a10, #170e09);
  border: 3px solid #6a4128; color: #fff; font-size: 1.45rem;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .5);
}
#view-academy[data-hv] .ac-path .ac-node.open .ac-node-ico {
  background: radial-gradient(circle at 50% 35%, #4a2412, #24120a);
  border-color: #ff9a4c;
  box-shadow: 0 0 0 4px rgba(255, 110, 40, .18), 0 0 10px rgba(255, 110, 40, .4);
}
#view-academy[data-hv] .ac-path .ac-node.done .ac-node-ico {
  background: radial-gradient(circle at 50% 35%, #4a3610, #22180a);
  border-color: #ffd166;
  box-shadow: 0 0 0 4px rgba(255, 209, 102, .14), 0 0 8px rgba(255, 200, 80, .35);
}
#view-academy[data-hv] .ac-path .ac-node.advanced-done .ac-node-ico {
  background: radial-gradient(circle at 35% 25%, #fff0b8, #ffd166 58%, #d39722);
  border-color: #fff0b8;
}
#view-academy[data-hv] .ac-path .ac-node.locked .ac-node-ico {
  opacity: 1; background: #151210; border-color: #3a332e; box-shadow: 0 0 0 4px rgba(0, 0, 0, .35);
  filter: grayscale(.9); color: rgba(255, 255, 255, .35);
}
#view-academy[data-hv] .ac-path .ac-node.locked .ac-node-ico { font-size: 1.2rem; }
#view-academy[data-hv] .ac-path .ac-node:not(.locked):active .ac-node-ico { transform: scale(.94); box-shadow: 0 0 0 4px rgba(255, 110, 40, .25); }
#view-academy[data-hv] .ac-path .ac-node.next .ac-node-ico {
  outline: 0; border-color: #ffd166; will-change: transform;   /* nhún trên lớp riêng, không vẽ lại trang */
  box-shadow: 0 0 0 6px rgba(255, 209, 102, .18), 0 0 26px rgba(255, 170, 70, .75);
}
/* Trùm cuối quyển: to hơn, viền đỏ, hào quang */
#view-academy[data-hv] .ac-path .ac-node.kind-unitboss .ac-node-ico {
  width: 68px; height: 68px; font-size: 1.9rem; border-color: #ff5d66;
  background: radial-gradient(circle at 50% 35%, #4a1414, #1c0808);
  box-shadow: 0 0 0 5px rgba(255, 93, 102, .15), 0 0 22px rgba(255, 60, 60, .5);
}
#view-academy[data-hv] .ac-path .ac-node.kind-unitboss.locked .ac-node-ico { filter: grayscale(.5) brightness(.7); }

.hv-huy { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: .62rem; line-height: 1; }
.hv-khoa { background: #231d19; border: 1px solid #4a3f37; filter: none; }
.hv-xong { background: #ffd166; color: #1a0f08; font-weight: 900; font-size: .72rem; box-shadow: 0 0 8px rgba(255, 200, 80, .8); }

.hv-loai { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b98b68; }
#view-academy[data-hv] .ac-node.locked .hv-loai { color: #5f524a; }
#view-academy[data-hv] .ac-node.kind-unitboss .hv-loai { color: #ff8a90; }

/* "Bạn" ở chấm tới lượt — kiểu A: huy hiệu ảnh gắn góc trên-phải của chấm
   (bên trái không đủ chỗ, chấm đi rắn sát mép thẻ); kiểu B/C: đứng hẳn bên trái. */
.hv-ban { position: absolute; left: calc(50% + 12px); top: -14px; display: grid; justify-items: center; gap: 2px; z-index: 2; pointer-events: none; }
.hv-ban b { display: none; font-size: .6rem; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: #ffd166; color: #1a0f08; }
.hv-ban img, .hv-ban em { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #ffe0c2; background: #ff6428; object-fit: cover;
  display: grid; place-items: center; font-style: normal; font-size: .9rem; box-shadow: 0 0 10px rgba(255, 100, 40, .8); }
#view-academy[data-hv="b"] .hv-ban, #view-academy[data-hv="c"] .hv-mo .hv-ban { left: -58px; top: 4px; }
#view-academy[data-hv="b"] .hv-ban b, #view-academy[data-hv="c"] .hv-mo .hv-ban b { display: block; }
#view-academy[data-hv="b"] .hv-ban img, #view-academy[data-hv="b"] .hv-ban em,
#view-academy[data-hv="c"] .hv-mo .hv-ban img, #view-academy[data-hv="c"] .hv-mo .hv-ban em { width: 36px; height: 36px; font-size: 1.1rem; }
.hv-o-day { display: inline-block; margin-left: .3rem; font-size: .66rem; font-weight: 800; padding: .05rem .45rem; border-radius: 99px;
  background: #ffd166; color: #1a0f08; vertical-align: middle; white-space: nowrap; }
#view-academy[data-hv="b"] .hv-o-day, #view-academy[data-hv="c"] .hv-mo .hv-o-day { display: table; margin: .25rem auto 0; }
.hv-ban.nhun { animation: hvNhun 1.4s ease-in-out infinite; will-change: transform; }
@keyframes hvNhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#view-academy[data-hv] .ac-node-lane { position: relative; }

/* ======================================================================
   B · UỐN LƯỢN (và đảo đang mở ở C) — chấm to zíc-zắc, tên dưới chấm
   ====================================================================== */
#view-academy[data-hv="b"] .ac-path,
#view-academy[data-hv="c"] .hv-mo .ac-path {
  --hv-lech: clamp(46px, 17vw, 150px);
  align-items: center; gap: 1.3rem; padding: 1.2rem 0 1.4rem;
}
#view-academy[data-hv="b"] .ac-path .ac-node,
#view-academy[data-hv="c"] .hv-mo .ac-path .ac-node {
  flex-direction: column; align-items: center; gap: .35rem; width: 190px; text-align: center;
}
#view-academy[data-hv="b"] .ac-path .ac-node-lane,
#view-academy[data-hv="c"] .hv-mo .ac-path .ac-node-lane { flex: none; transform: none !important; }
#view-academy[data-hv="b"] .ac-path .ac-node-txt,
#view-academy[data-hv="c"] .hv-mo .ac-path .ac-node-txt {
  flex: none; padding: .25rem .6rem; border-radius: 10px;
  background: rgba(12, 8, 6, .88); box-shadow: 0 0 0 1px rgba(255, 150, 80, .08);   /* đường nối đi SAU chữ */
}
#view-academy[data-hv="b"] .ac-path .ac-node-t,
#view-academy[data-hv="c"] .hv-mo .ac-path .ac-node-t { font-size: .84rem; }
#view-academy[data-hv="b"] .ac-path .ac-node-ico,
#view-academy[data-hv="c"] .hv-mo .ac-path .ac-node-ico { width: 66px; height: 66px; font-size: 1.7rem; }
#view-academy[data-hv="b"] .ac-path .ac-node.kind-unitboss .ac-node-ico,
#view-academy[data-hv="c"] .hv-mo .ac-path .ac-node.kind-unitboss .ac-node-ico { width: 84px; height: 84px; font-size: 2.3rem; }
/* chu kỳ 8 chấm: giữa → phải → xa phải → phải → giữa → trái → xa trái → trái */
#view-academy[data-hv="b"] .ac-path .ac-node:nth-of-type(8n+2), #view-academy[data-hv="c"] .hv-mo .ac-path .ac-node:nth-of-type(8n+2),
#view-academy[data-hv="b"] .ac-path .ac-node:nth-of-type(8n+4), #view-academy[data-hv="c"] .hv-mo .ac-path .ac-node:nth-of-type(8n+4) { transform: translateX(calc(var(--hv-lech) * .6)); }
#view-academy[data-hv="b"] .ac-path .ac-node:nth-of-type(8n+3), #view-academy[data-hv="c"] .hv-mo .ac-path .ac-node:nth-of-type(8n+3) { transform: translateX(var(--hv-lech)); }
#view-academy[data-hv="b"] .ac-path .ac-node:nth-of-type(8n+6), #view-academy[data-hv="c"] .hv-mo .ac-path .ac-node:nth-of-type(8n+6),
#view-academy[data-hv="b"] .ac-path .ac-node:nth-of-type(8n), #view-academy[data-hv="c"] .hv-mo .ac-path .ac-node:nth-of-type(8n) { transform: translateX(calc(var(--hv-lech) * -.6)); }
#view-academy[data-hv="b"] .ac-path .ac-node:nth-of-type(8n+7), #view-academy[data-hv="c"] .hv-mo .ac-path .ac-node:nth-of-type(8n+7) { transform: translateX(calc(var(--hv-lech) * -1)); }
#view-academy[data-hv="b"] .phase .goal { margin-left: 0; text-align: center; }

/* ======================================================================
   C · ĐẢO THEO QUYỂN
   ====================================================================== */
.hv-dao-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; align-items: start; }
.hv-dao-luoi > .ac-act { grid-column: 1 / -1; margin-top: .6rem; }
.hv-dao-luoi > .phase { margin: 0; padding: 0; }
.hv-dao-luoi > .phase.hv-mo { grid-column: 1 / -1; padding: 0 1.2rem 1rem; }
/* Đảo đang đóng: chỉ hiện "đầu đảo" */
.hv-dao-luoi > .phase:not(.hv-mo) > :not(.hv-dao-dau):not(.hv-troi) { display: none; }
/* Đảo đóng cho GỌN (chủ app 01/10: "bên ngoài không cần sao, rối mắt"): bỏ ★★★
   (vòng tiến độ + "x/y bài" đã nói điều đó), trời sao còn 1/3 và đứng yên. */
.hv-dao-luoi > .phase:not(.hv-mo) .hv-dao-sao { display: none; }
.hv-dao-luoi > .phase:not(.hv-mo) .hv-troi i { animation: none; opacity: .18; }
.hv-dao-luoi > .phase:not(.hv-mo) .hv-troi i:not(:nth-child(3n)) { display: none; }
.hv-dao-luoi > .phase.hv-mo > h3 { display: none; }

.hv-dao-dau { position: relative; display: grid; justify-items: center; gap: .2rem; width: 100%; padding: 1rem .8rem 1.1rem;
  background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.hv-dao-dau:hover .hv-dao-icon { transform: scale(1.08); }
.hv-dao-vong { width: 104px; height: 104px; grid-row: 1; grid-column: 1; }
.hv-dao-vong .nen { fill: rgba(255, 150, 70, .06); stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.hv-dao-vong .tien { fill: none; stroke: #ff9a4c; stroke-width: 6; stroke-linecap: round; }
.hv-dao-icon { grid-row: 1; grid-column: 1; align-self: center; font-size: 2.6rem; transition: transform .2s; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.hv-dao-may { position: absolute; top: 1.4rem; right: 22%; font-size: 1.8rem; opacity: .6; }
.hv-dao-dau b { font-size: .95rem; margin-top: .3rem; }
.hv-dao-dau small { color: var(--muted); font-size: .74rem; }
.hv-dao-sao i { font-style: normal; font-size: 1.05rem; color: #3b2c22; }
.hv-dao-sao i.sang { color: #ffd166; text-shadow: 0 0 6px rgba(255, 200, 80, .8); }
.hv-dao-ban { margin-top: .25rem; font-size: .7rem; font-weight: 800; padding: .1rem .55rem; border-radius: 99px; background: #ffd166; color: #1a0f08; }

.hv-dao.hv-suong .hv-dao-icon { filter: grayscale(.85) brightness(.6); }
.hv-dao.hv-suong .hv-dao-dau b { color: var(--muted); }
.hv-dao.hv-sang { border-color: rgba(255, 209, 102, .55) !important; }
.hv-dao.hv-sang .hv-dao-vong .tien { stroke: #ffd166; }
.hv-dao.hv-dang-o { border-color: rgba(255, 209, 102, .7) !important; box-shadow: 0 0 0 1px rgba(255, 209, 102, .3), 0 0 16px rgba(255, 140, 50, .2) !important; }
/* Đảo đang mở: đầu đảo nằm ngang cho gọn */
.hv-mo > .hv-dao-dau { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; justify-items: start; text-align: left;
  column-gap: .9rem; padding: 1rem 0 .4rem; }
.hv-mo > .hv-dao-dau .hv-dao-vong, .hv-mo > .hv-dao-dau .hv-dao-icon { grid-row: 1 / 3; grid-column: 1; justify-self: center; }
.hv-mo > .hv-dao-dau .hv-dao-vong { width: 72px; height: 72px; }
.hv-mo > .hv-dao-dau .hv-dao-icon { font-size: 1.8rem; }
.hv-mo > .hv-dao-dau b { grid-column: 2; margin: 0; font-size: 1.1rem; align-self: end; }
.hv-mo > .hv-dao-dau small { grid-column: 2; }
.hv-mo > .hv-dao-dau .hv-dao-sao { grid-column: 3; grid-row: 1; }
.hv-mo > .hv-dao-dau .hv-dao-ban { grid-column: 3; grid-row: 2; }
.hv-mo > .hv-dao-dau .hv-dao-may { display: none; }
.hv-mo .goal { margin-left: 0 !important; }

@media (max-width: 560px) {
  .hv-dao-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .hv-dao-vong { width: 84px; height: 84px; }
  .hv-dao-icon { font-size: 2.1rem; }
  .hv-ban { left: -38px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-d-da, .hv-ban.nhun, .hv-troi i { animation: none !important; }
}