/* ==========================================================================
   phat-dark · "Bài học 15 phút" (PA2) — CHỈ khung 5 chặng + 3 khối riêng
   (ghep-manh · soi-cho · ap-dung). Mọi thành phần chung (thẻ khối, nhãn,
   nút tuỳ chọn/chính/phụ, ô nhập, phản hồi, điểm vòng, tiêu chí) và token
   --tap-* nằm ở phong-tap.css — nạp trước file này (functions.php).
   Viết lại 24/09/2026 (J4, PRJ-045) — đồng bộ hệ khối với PA1.
   ========================================================================== */

.pd-hoc { max-width: 100%; }

/* ---------- Đầu trang ---------- */
/* padding-top day hon .pd-mlh-dau (104/56px) vi trang nay .pd-hoc__dau nam
   ngay tu dinh khung (khong duoc nav choan cho trong flow nhu /bai-hoc/) -
   da do bang getComputedStyle: nav cao ~79px (1440) / ~66px (390), cong them
   muc tieu 104/56px = 183/122px de ra dung khoang cach nhin thay tu day nav */
.pd-hoc__dau { padding-top: clamp(122px, 22vw, 183px); margin-bottom: 8px; }
.pd-hoc__kicker { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-300); }
.pd-hoc__h1 { font-family: var(--font-heading); font-size: clamp(28px, 4.4vw, 42px); line-height: 1.18; margin: 8px 0 10px; color: var(--tap-chu); }
.pd-hoc__meta { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tap-chu-3); }

/* ---------- Thanh 5 chặng: vòng số + nhãn, nối bằng đường ---------- */
.pd-hoc__tien { display: flex; margin: 26px 0 26px; }
.pd-hoc__doan { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.pd-hoc__doan::before {            /* đoạn nối về bậc trước — dùng scaleX, không animate width */
  content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px;
  background: rgba(255, 241, 227, .10);
}
.pd-hoc__doan::after {
  content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px;
  background: var(--o-grad-flat); transform-origin: left; transform: scaleX(0);
  transition: transform .45s var(--tap-em);
}
.pd-hoc__doan:first-child::before, .pd-hoc__doan:first-child::after { display: none; }
.pd-hoc__doan.is-qua::after, .pd-hoc__doan.is-hien::after { transform: scaleX(1); }
.pd-hoc__doan-so {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ground); border: 2px solid rgba(255, 241, 227, .16);
  font-size: 14px; font-weight: 700; color: var(--tap-chu-3);
  transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.pd-hoc__doan-so .pd-tap-ic { display: none; width: 18px; height: 18px; }
.pd-hoc__doan-nhan { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--tap-chu-3); padding: 0 4px; }
.pd-hoc__doan.is-qua .pd-hoc__doan-so { background: var(--o-500); border-color: var(--o-500); color: var(--o-900); }
.pd-hoc__doan.is-qua .pd-hoc__doan-chu { display: none; }
.pd-hoc__doan.is-qua .pd-tap-ic { display: block; }
.pd-hoc__doan.is-qua .pd-hoc__doan-nhan { color: var(--tap-chu-2); }
.pd-hoc__doan.is-hien .pd-hoc__doan-so { background: var(--tap-nen); border-color: var(--o-500); color: var(--o-200); box-shadow: 0 0 0 5px rgba(255, 138, 43, .16), 0 8px 20px -6px rgba(255, 138, 43, .6); }
.pd-hoc__doan.is-hien .pd-hoc__doan-nhan { color: var(--o-200); font-weight: 700; }

/* ---------- Khung chặng (thẻ khối dùng chung phong-tap.css) ---------- */
.pd-hoc__man { margin-bottom: 18px; }
.pd-hoc__so { margin-bottom: 4px; }
.pd-hoc__tieude { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 30px); line-height: 1.28; margin: 12px 0 12px; color: var(--tap-chu); outline: none; }
/* tiêu đề nhận focus bằng JS (tabindex=-1) để trình đọc màn hình đọc chặng mới — không vẽ viền */
.pd-hoc [data-hoc-tieude]:focus, .pd-hoc [data-hoc-tieude]:focus-visible { outline: none; }
.pd-hoc__phu { margin: -12px 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--tap-chu-3); }
@media (prefers-reduced-motion: no-preference) {
  .pd-hoc__man.pd-tap-vao { animation-duration: .32s; }
}

/* ---------- Thanh điều hướng: trái phụ · phải "Tiếp" ---------- */
.pd-hoc__dieu-huong {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap-reverse;      /* hẹp: "Tiếp" (cuối DOM) rớt lên hàng TRÊN */
}
.pd-hoc__dh-trai { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-hoc__lui[hidden], .pd-hoc__tiep[hidden] { display: none; }
.pd-hoc__lai { border-color: transparent; background: transparent; color: var(--tap-chu-3); }
.pd-hoc__tiep { margin-left: auto; min-height: 52px; padding: 14px 26px 14px 30px; font-size: 16px; }
.pd-hoc__tiep:disabled { background: rgba(255, 241, 227, .08); color: var(--tap-chu-3); box-shadow: none; cursor: not-allowed; }
@media (max-width: 480px) {
  .pd-hoc__tiep { flex: 1 1 100%; }
  .pd-hoc__dh-trai { flex: 1 1 100%; justify-content: space-between; }
}

/* ---------- Màn kết ---------- */
.pd-hoc__man.is-ket { text-align: left; background: radial-gradient(90% 70% at 0% 0%, rgba(185, 202, 126, .10), transparent 60%), radial-gradient(120% 80% at 100% 0%, rgba(255, 138, 43, .10), transparent 55%), var(--tap-nen); }
.pd-hoc__ket-huy {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 999px; margin-bottom: 14px;
  background: var(--tap-ok); color: var(--ground); box-shadow: 0 0 0 8px rgba(185, 202, 126, .14);
}
.pd-hoc__ket-huy .pd-tap-ic { width: 30px; height: 30px; }
.pd-hoc__ket h2 { font-family: var(--font-heading); font-size: clamp(28px, 3.8vw, 36px); margin: 0 0 18px; color: var(--tap-chu); outline: none; }
.pd-hoc__ket ol { list-style: none; counter-reset: ket; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pd-hoc__ket li {
  counter-increment: ket; position: relative; padding: 12px 16px 12px 54px; border-radius: var(--radius-md);
  background: var(--tap-kem-06); font-size: 16px; line-height: 1.6; color: var(--tap-chu);
}
.pd-hoc__ket li::before {
  content: counter(ket); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; background: var(--tap-cam-09); border: 1px solid var(--tap-cam-18);
  font-size: 13px; font-weight: 700; color: var(--o-300);
}
.pd-hoc__loi-ra { display: flex; flex-wrap: wrap; gap: 12px; }
.pd .pd-hoc__loi-ra .pd-nut-toi-vien { border-color: var(--o-500); color: var(--o-200); }
.pd .pd-hoc__loi-ra .pd-nut-toi { background: var(--o-grad); color: var(--o-900); }
@media (prefers-reduced-motion: no-preference) {
  .pd-hoc__ket-huy { animation: tap-pop .5s var(--tap-nay) .12s both; }
  .pd-hoc__ket li { animation: tap-vao .3s var(--tap-em) both; }
  .pd-hoc__ket li:nth-child(2) { animation-delay: .06s; }
  .pd-hoc__ket li:nth-child(3) { animation-delay: .12s; }
  .pd-hoc__ket li:nth-child(4) { animation-delay: .18s; }
  .pd-hoc__ket li:nth-child(5) { animation-delay: .24s; }
}

/* ==========================================================================
   ghep-manh — dòng hướng dẫn · ô có chữ mờ · ô đang chờ · mảnh đã đặt
   ========================================================================== */
.pd-gm__hd {
  display: flex; align-items: flex-start; gap: 10px; margin: -6px 0 18px; padding: 10px 14px;
  border-radius: var(--radius-md); background: var(--tap-cam-05); border: 1px dashed var(--tap-cam-18);
  font-size: 14.5px; line-height: 1.55; color: var(--tap-chu-2);
}
.pd-gm__hd svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--o-400); }
.pd-gm__oban { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pd-gm__o {
  position: relative; min-height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-md);
  border: 1.5px dashed rgba(255, 241, 227, .20); background: rgba(0, 0, 0, .18);
  font-size: 16px; line-height: 1.5; color: var(--tap-chu);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.pd-gm__o-nhan {
  flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255, 241, 227, .07); font-size: 13px; font-weight: 700; color: var(--tap-chu-3);
}
.pd-gm__o-goi-y { flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--tap-chu-3); font-style: italic; }
.pd-gm__o-goi-y[hidden] { display: none; }
.pd-gm__o.is-cho { border-color: var(--o-500); background: var(--tap-cam-05); }
.pd-gm__o.is-cho .pd-gm__o-nhan { background: var(--o-500); color: var(--o-900); }
.pd-gm__o.is-cho .pd-gm__o-goi-y { color: var(--o-200); font-style: normal; font-weight: 600; }
.pd-gm__o.is-cho::after {
  content: "Tiếp theo"; flex: none; padding: 3px 10px; border-radius: 999px;
  background: var(--tap-cam-09); border: 1px solid var(--tap-cam-18);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--o-300);
}
@media (prefers-reduced-motion: no-preference) {
  .pd-gm__o.is-cho { animation: gm-nhip 1.8s ease-in-out infinite; }
}
@keyframes gm-nhip { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 43, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 138, 43, .16); } }
.pd-gm__o.is-day { border-style: solid; border-color: var(--tap-kem-16); background: var(--tap-kem-06); }
.pd-gm__o.is-day .pd-gm__o-nhan { background: var(--tap-cam-09); color: var(--o-300); }
.pd-gm__o.la-dung { border-color: var(--tap-ok-vien); background: var(--tap-ok-nen); }
.pd-gm__o.la-dung .pd-gm__o-nhan { background: var(--tap-ok); color: var(--ground); }
.pd-gm__o.la-sai { border-color: var(--tap-sai-vien); background: var(--tap-sai-nen); }
.pd-gm__o.la-sai .pd-gm__o-nhan { background: var(--tap-sai); color: var(--ground); }
.pd-gm__o-manh { flex: 1; min-height: 36px; cursor: pointer; background: none; border: none; color: inherit; font-size: inherit; line-height: 1.5; text-align: left; padding: 0; }
.pd-gm__o-manh[hidden] { display: none; }
.pd-gm__o-ph { flex: none; display: grid; place-items: center; }
.pd-gm__o-ph .pd-tap-ic { width: 20px; height: 20px; }
.pd-gm__o.la-dung .pd-gm__o-ph { color: var(--tap-ok); }
.pd-gm__o.la-sai .pd-gm__o-ph { color: var(--tap-sai); }
.pd-gm__kho { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; padding-top: 18px; border-top: 1px solid var(--tap-kem-06); }
.pd-gm__manh { border-radius: var(--radius-md); font-weight: 500; }
.pd-gm__manh.is-da-dat { opacity: 1; cursor: default; border-style: dashed; border-color: rgba(255, 241, 227, .12); background: transparent; color: var(--tap-chu-3); }
.pd-gm__manh.is-da-dat .pd-gm__manh-chu { text-decoration: line-through; text-decoration-color: rgba(255, 241, 227, .35); }
.pd-gm__manh-o { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--tap-cam-09); font-size: 12px; font-weight: 700; color: var(--o-300); }
.pd-gm__manh-o[hidden] { display: none; }
.pd-gm__hang { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-gm__vi-sao { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pd-gm__vi-sao li { padding: 11px 14px; border-radius: var(--radius-md); background: var(--tap-sai-nen); border: 1px solid var(--tap-sai-vien); font-size: 14.5px; line-height: 1.55; color: var(--tap-sai-chu); }
.pd-gm__dong3 { margin: 18px 0 0; padding: 16px 18px; border-radius: var(--radius-md); background: var(--tap-ok-nen); border: 1px solid var(--tap-ok-vien); display: flex; flex-direction: column; gap: 8px; }
.pd-gm__dong3 p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tap-chu); }
.pd-gm__dong3[hidden] { display: none; }

/* ==========================================================================
   soi-cho — chạm câu để đánh dấu chỗ cần kiểm
   ========================================================================== */
.pd-sc__nhan { margin-top: 0; }
.pd-sc__doan { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.pd-sc__cau {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--tap-kem-16); background: var(--tap-kem-06); color: var(--tap-chu);
  font-size: 16px; line-height: 1.6; padding: 12px 16px; border-radius: var(--radius-md);
  cursor: pointer; min-height: 48px;
  transition: transform .22s var(--tap-nay), border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.pd-sc__cau::before {             /* ô đánh dấu vẽ bằng CSS */
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(255, 241, 227, .28);
  transition: background .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .pd-sc__cau:hover { transform: translateY(-2px); border-color: var(--o-500); box-shadow: 0 10px 22px -12px rgba(255, 138, 43, .55); }
}
.pd-sc__cau[aria-pressed="true"] { border-color: var(--o-500); background: var(--tap-cam-09); }
.pd-sc__cau[aria-pressed="true"]::before {
  border-color: var(--o-500);
  background: var(--o-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l3.8 3.8L16 6' fill='none' stroke='%232e1103' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.pd-sc__cau.la-bat { border-color: var(--tap-ok-vien); background: var(--tap-ok-nen); }
.pd-sc__cau.la-bat::before { border-color: var(--tap-ok); background-color: var(--tap-ok); }
.pd-sc__cau.la-thieu { border-color: var(--tap-sai-vien); background: var(--tap-sai-nen); }
.pd-sc__ph { margin: 8px 0 0 16px; padding-left: 14px; border-left: 2px solid var(--tap-kem-16); font-size: 14.5px; line-height: 1.55; color: var(--tap-chu-2); }
.pd-sc__ph.la-thieu { border-left-color: var(--tap-sai); color: var(--tap-sai-chu); }
.pd-sc__ph[hidden] { display: none; }
.pd-sc__quytac { margin: 14px 0 0; padding: 14px 16px; list-style: none; display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius-md); background: var(--tap-cam-05); border: 1px solid var(--tap-cam-18); }
.pd-sc__quytac li { font-size: 15px; line-height: 1.55; padding-left: 14px; border-left: 2px solid var(--o-500); color: var(--tap-chu); }
.pd-sc__cauket { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--tap-chu-2); }

/* ==========================================================================
   ap-dung — ô nhập + chip → câu lệnh + thẻ ảnh
   ========================================================================== */
.pd-ad__chip-ds { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.pd-ad__chip { font-size: 14px; padding: 9px 16px; min-height: 44px; }
.pd-ad__phu { margin-top: 6px; }
.pd-ad__ketqua { margin-top: 22px; }
.pd-ad__khoi { margin: 0 0 14px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--tap-kem-06); border: 1px solid var(--tap-kem-06); }
.pd-ad__khoi p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--tap-chu); }
.pd-ad__hang { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pd-ad__anh .pd-tap-ic, .pd-ad__anh svg { width: 17px; height: 17px; }

@media (max-width: 480px) {
  .pd-hoc__doan-nhan { display: none; }
  .pd-hoc__doan.is-hien .pd-hoc__doan-nhan { display: block; position: absolute; top: 44px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .pd-hoc__tien { margin-bottom: 44px; }
  .pd-hoc__doan:first-child.is-hien .pd-hoc__doan-nhan { left: 0; transform: none; }
  .pd-hoc__doan:last-child.is-hien .pd-hoc__doan-nhan { left: auto; right: 0; transform: none; }
  .pd-gm__o.is-cho::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-hoc__doan::after, .pd-hoc__doan-so { transition: none; }
}