/* ── KHÔNG GIAN 21 NGÀY ──────────────────────────────────────────────────────
   Tách hẳn khỏi nd-ebook.css: phễu bán hàng và không gian học là hai thứ khác
   nhau về nhịp. Phễu thúc, không gian dìu. Dùng chung một file CSS thì sớm muộn
   một bên phải chịu thứ của bên kia.
   Bảng màu Đen Tím + Vàng Trăng theo Design DNA Nguyệt Đình. */

:root {
  --void: #09080F; --deep: #120D24; --midnight: #1E1540; --midnight-2: #241A4D;
  --dusk: #2D2060; --amethyst: #6B3FA0; --violet: #9B59D0;
  --gold: #C9A84C; --gold-pale: #E8D98A;
  --cream: #F5F0E8; --mist: #B8B0C8; --mist-dim: #8B7FA8; --green: #4fd07a;
  /* ⚠️ KHÔNG dùng 'DM Sans' và KHÔNG dùng Georgia dự phòng. Đo 10/08/2026: DM Sans
     thiếu 11 ký tự tiếng Việt (Ơ Ư ư Ả ể Ệ ọ Ố Ộ Ờ ờ) và Google Fonts không phát
     subset vietnamese cho nó -> trình duyệt lặng lẽ đổi font GIỮA CÂU. Georgia
     cũng thiếu, nên nó không cứu được. */
  /* Noto Serif chèn giữa — lưới đỡ khi Cormorant Garamond thiếu một ký tự
     tiếng Việt cụ thể (đo thật 11/08: "ô" trong tên khách ra tofu trên iPhone).
     Xem giải thích đầy đủ trong hoc.html. */
  --disp: 'Cormorant Garamond', 'Noto Serif', 'Times New Roman', serif;
  --body: 'Be Vietnam Pro', -apple-system, system-ui, sans-serif;
  --le: 22px;
}
@media (max-width: 760px) { :root { --le: 16px } }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--void); color: var(--cream);
  font-family: var(--body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block }
button { font-family: inherit; cursor: pointer }

.kg-wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--le) 60px }

/* ── Đầu trang ───────────────────────────────────────────────────────────── */
.kg-dau { padding: 26px 0 18px; text-align: center }
.kg-trang svg { width: 30px; height: 30px; fill: var(--gold); margin: 0 auto 10px }
.kg-chao {
  font-family: var(--disp); font-size: clamp(25px, 6.2vw, 33px); font-weight: 500;
  line-height: 1.22; margin: 0 0 6px; text-wrap: balance;
}
.kg-chao b { color: var(--gold-pale); font-weight: 600 }
.kg-phu { color: var(--mist); font-size: 14.5px; margin: 0; text-wrap: pretty }

/* ── Thanh tiến độ ───────────────────────────────────────────────────────── */
.kg-tiendo { margin: 22px 0 6px }
.kg-td-tren {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--mist); margin-bottom: 8px;
}
.kg-td-tren b { font-family: var(--disp); font-size: 19px; color: var(--gold-pale) }
.kg-td-thanh {
  height: 8px; border-radius: 99px; background: var(--midnight);
  border: 1px solid var(--dusk); overflow: hidden;
}
.kg-td-chay {
  height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--amethyst), var(--gold));
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.kg-chuoi {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  background: rgba(201, 168, 76, .1); border: 1px solid rgba(201, 168, 76, .28);
  color: var(--gold-pale); font-size: 12.5px; padding: 5px 13px; border-radius: 99px;
}
.kg-chuoi svg { width: 13px; height: 13px; fill: var(--gold) }

/* ── Nhóm tuần ───────────────────────────────────────────────────────────── */
.kg-tuan { margin-top: 30px }
.kg-tuan-nhan {
  display: flex; align-items: center; gap: 10px; margin-bottom: 13px;
  font-size: 11.5px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--amethyst); font-weight: 600;
}
.kg-tuan-nhan span { color: var(--mist-dim); letter-spacing: .3px; text-transform: none; font-weight: 400; font-size: 12.5px }
.kg-tuan-nhan::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--dusk), transparent) }

/* ── Thẻ một ngày ────────────────────────────────────────────────────────── */
.kg-ds { display: flex; flex-direction: column; gap: 9px }
.kg-ngay {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left;
  background: linear-gradient(160deg, var(--midnight-2), var(--midnight));
  border: 1px solid var(--dusk); border-radius: 15px; padding: 13px 15px;
  color: var(--cream); min-height: 62px;
  transition: border-color .18s ease, transform .12s ease;
}
.kg-ngay:hover { border-color: var(--violet) }
.kg-ngay:active { transform: scale(.99) }
.kg-ngay.khoa { opacity: .5; background: var(--deep) }
.kg-ngay.xong { border-color: rgba(79, 208, 122, .34) }
.kg-ngay.nay { border-color: var(--gold); box-shadow: 0 8px 26px rgba(201, 168, 76, .13) }

.kg-so {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-size: 19px; font-weight: 600;
  background: rgba(107, 63, 160, .22); border: 1px solid var(--dusk); color: var(--gold-pale);
}
.kg-ngay.xong .kg-so { background: rgba(79, 208, 122, .12); border-color: rgba(79, 208, 122, .4); color: var(--green) }
.kg-ngay.nay .kg-so { background: rgba(201, 168, 76, .16); border-color: rgba(201, 168, 76, .5) }
.kg-so svg { width: 18px; height: 18px }

.kg-ten { flex: 1; min-width: 0 }
.kg-ten b {
  display: block; font-family: var(--disp); font-size: 17.5px; font-weight: 600;
  line-height: 1.28; color: var(--cream); text-wrap: pretty;
}
.kg-ten i {
  display: block; font-style: normal; font-size: 12px; color: var(--mist-dim); margin-top: 2px;
}
.kg-ngay.nay .kg-ten i { color: var(--gold) }
.kg-mui { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--mist-dim); stroke-width: 1.8 }

/* ── Màn đọc chương ──────────────────────────────────────────────────────── */
.kg-doc { display: none; padding-bottom: 40px }
body.dang-doc .kg-luoi { display: none }
body.dang-doc .kg-doc { display: block }

.kg-quaylai {
  display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 4px;
  background: rgba(18, 13, 36, .92); border: 1px solid var(--dusk);
  color: var(--mist); font-size: 13px; padding: 8px 16px; border-radius: 100px;
}
.kg-doc-dau { padding: 14px 0 4px }
.kg-doc-nhan {
  font-size: 11.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--amethyst);
  font-weight: 600; margin-bottom: 9px;
}
.kg-doc-dau h1 {
  font-family: var(--disp); font-weight: 600; font-size: clamp(27px, 7vw, 37px);
  line-height: 1.16; margin: 0; text-wrap: balance;
}

.kg-than { margin-top: 24px }
.kg-than p { font-size: 16.5px; line-height: 1.85; color: #DDD6E8; margin: 0 0 17px; text-wrap: pretty }

.kg-doichieu { display: flex; flex-direction: column; gap: 10px; margin: 26px 0 }
.kg-dc {
  border-left: 3px solid var(--dusk); border-radius: 0 13px 13px 0;
  background: linear-gradient(90deg, rgba(30, 21, 64, .8), transparent);
  padding: 13px 16px; font-size: 15px; line-height: 1.7; color: var(--mist); text-wrap: pretty;
}
.kg-dc.han { border-left-color: var(--green); color: #CFC8DE }
.kg-cauhoi {
  font-family: var(--disp); font-style: italic; font-size: 20px; line-height: 1.55;
  color: var(--gold-pale); text-align: center; margin: 26px auto; max-width: 24em; text-wrap: balance;
}

/* Khối GÓI MANG VỀ */
.kg-goi {
  background: linear-gradient(160deg, rgba(201, 168, 76, .09), rgba(201, 168, 76, .03));
  border: 1px solid rgba(201, 168, 76, .3); border-radius: 18px; padding: 20px; margin-top: 8px;
}
.kg-goi-h {
  display: flex; align-items: center; gap: 9px; font-family: var(--disp);
  font-size: 21px; color: var(--gold-pale); margin-bottom: 14px;
}
.kg-goi-h svg { width: 19px; height: 19px; fill: var(--gold); flex-shrink: 0 }
.kg-goi dl { margin: 0 }
.kg-goi dt {
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--amethyst); font-weight: 700; margin-top: 13px;
}
.kg-goi dt:first-child { margin-top: 0 }
.kg-goi dd { margin: 3px 0 0; font-size: 15px; line-height: 1.7; color: var(--mist); text-wrap: pretty }

/* Trắc nghiệm mỗi ngày — KHÁC ô viết tự do bên dưới: lựa chọn có cấu trúc,
   không phải tâm sự riêng. Mount rỗng khi ngày chưa có câu hỏi (không đẻ ra
   khung trống xấu). */
.kg-tracn { margin-top: 22px; display: flex; flex-direction: column; gap: 16px }
.kg-tracn-cau {
  background: linear-gradient(160deg, var(--midnight-2), var(--midnight));
  border: 1px solid var(--dusk); border-radius: 16px; padding: 17px 18px;
}
.kg-tracn-hoi { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--cream); text-wrap: pretty }
.kg-tracn-ds { display: flex; flex-wrap: wrap; gap: 8px }
.kg-tracn-lc {
  background: var(--void); color: var(--mist); border: 1px solid var(--dusk); border-radius: 100px;
  padding: 9px 16px; font-size: 13.5px; line-height: 1.4; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.kg-tracn-lc:hover { border-color: var(--violet) }
.kg-tracn-lc.on { border-color: var(--gold); color: var(--gold-pale); background: rgba(201, 168, 76, .1) }

.kg-baitap {
  margin-top: 22px; background: linear-gradient(160deg, var(--midnight-2), var(--midnight));
  border: 1px solid var(--dusk); border-radius: 18px; padding: 20px;
}
.kg-baitap .nhan {
  font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 8px;
}
.kg-baitap p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--cream); text-wrap: pretty }

/* ── Ô viết bài tập + phản hồi ───────────────────────────────────────────── */
.kg-viet { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--dusk) }
.kg-viet-nhan {
  display: block; font-size: 13.5px; color: var(--gold-pale); margin-bottom: 8px; font-weight: 500;
}
.kg-viet textarea {
  width: 100%; background: var(--void); color: var(--cream);
  border: 1px solid var(--dusk); border-radius: 13px; padding: 13px 15px;
  font-family: inherit; font-size: 15.5px; line-height: 1.75; resize: vertical; min-height: 116px;
}
.kg-viet textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(155, 89, 208, .16) }
.kg-viet textarea::placeholder { color: var(--mist-dim) }

/* Dòng nói rõ ai đọc được. Đặt NGAY dưới ô viết, trước nút gửi - khách phải
   biết trước khi gõ chữ đầu tiên, không phải đọc lại trong Điều khoản. */
.kg-rieng-tu { font-size: 12.5px; color: var(--mist-dim); line-height: 1.65; margin: 9px 0 0; text-wrap: pretty }
.kg-xoa-bai {
  background: none; border: none; color: var(--mist-dim); font: inherit; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 2px; padding: 0; cursor: pointer;
}
.kg-xoa-bai:hover { color: var(--gold-pale) }

.kg-nut-viet {
  margin-top: 12px; width: 100%; min-height: 48px; padding: 13px 20px;
  background: rgba(107, 63, 160, .3); border: 1px solid var(--violet);
  color: var(--cream); font-size: 15.5px; font-weight: 500; border-radius: 100px;
}
.kg-nut-viet:disabled { opacity: .6 }

.kg-phanhoi {
  margin-top: 16px; background: linear-gradient(160deg, rgba(107, 63, 160, .18), rgba(107, 63, 160, .06));
  border: 1px solid rgba(155, 89, 208, .38); border-radius: 16px; padding: 17px 19px;
}
.kg-ph-dau {
  display: flex; align-items: center; gap: 8px; font-family: var(--disp);
  font-size: 18px; color: var(--gold-pale); margin-bottom: 8px;
}
.kg-ph-dau svg { width: 17px; height: 17px; fill: var(--gold); flex-shrink: 0 }
.kg-phanhoi p { margin: 0; font-size: 15.5px; line-height: 1.85; color: #DDD6E8; text-wrap: pretty; white-space: pre-wrap }

/* ── Nút ─────────────────────────────────────────────────────────────────── */
.kg-nut {
  display: block; width: 100%; margin-top: 22px; padding: 17px 22px; border: none;
  border-radius: 100px; background: linear-gradient(135deg, var(--gold), var(--gold-pale));
  color: var(--deep); font-size: 16.5px; font-weight: 700; min-height: 54px;
  box-shadow: 0 10px 30px rgba(201, 168, 76, .2);
}
.kg-nut:disabled { opacity: .55; box-shadow: none }
.kg-nut-phu {
  display: block; width: 100%; margin-top: 11px; padding: 13px; border: none;
  background: none; color: var(--mist-dim); font-size: 14px; text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Lời nhắn nổi ────────────────────────────────────────────────────────── */
.kg-nhan-noi {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 90; max-width: min(92vw, 460px);
  background: var(--midnight-2); border: 1px solid var(--dusk); border-radius: 15px;
  padding: 14px 18px; color: var(--cream); font-size: 14.5px; line-height: 1.6;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  text-wrap: pretty;
}
.kg-nhan-noi.hien { opacity: 1; transform: translate(-50%, 0) }
.kg-nhan-noi b { color: var(--gold-pale) }

/* ── Màn kết khi đi trọn 21 ngày ─────────────────────────────────────────── */
.kg-ket { margin-top: 34px; text-align: center }
.kg-ket-vong svg { width: 40px; height: 40px; fill: var(--gold); margin: 0 auto 12px }
.kg-ket h2 {
  font-family: var(--disp); font-weight: 500; font-size: clamp(24px, 6vw, 31px);
  color: var(--gold-pale); margin: 0 0 20px; line-height: 1.25; text-wrap: balance;
}
.kg-ket-so { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap }
.kg-ket-so > div {
  flex: 1 1 90px; max-width: 150px;
  background: linear-gradient(160deg, var(--midnight-2), var(--midnight));
  border: 1px solid var(--dusk); border-radius: 15px; padding: 14px 10px;
}
.kg-ket-so b {
  display: block; font-family: var(--disp); font-size: 30px; font-weight: 600;
  color: var(--gold-pale); line-height: 1; font-variant-numeric: tabular-nums;
}
.kg-ket-so span { display: block; font-size: 12px; color: var(--mist-dim); margin-top: 5px }

.kg-ket-moi {
  background: linear-gradient(160deg, rgba(201, 168, 76, .1), rgba(201, 168, 76, .03));
  border: 1px solid rgba(201, 168, 76, .32); border-radius: 20px; padding: 24px 22px; text-align: left;
}
.kg-ket-moi .nhan {
  font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--amethyst); font-weight: 700; margin-bottom: 8px;
}
.kg-ket-moi h3 {
  font-family: var(--disp); font-weight: 600; font-size: 25px; color: var(--cream);
  margin: 0 0 10px; line-height: 1.25; text-wrap: balance;
}
.kg-ket-moi p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.8; color: var(--mist); text-wrap: pretty }
.kg-ket-chan { margin-top: 18px; font-size: 13.5px; color: var(--mist-dim); text-wrap: pretty }

/* ── Chân trang ──────────────────────────────────────────────────────────── */
.kg-chan {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(45, 32, 96, .6);
  text-align: center; color: var(--mist-dim); font-size: 13px;
}
.kg-chan .thuonghieu {
  font-family: var(--disp); font-size: 19px; color: var(--gold);
  letter-spacing: 3px; text-transform: uppercase;
}
/* Nút thoát phải NHÌN THẤY ĐƯỢC, không giấu trong menu: khách hay mở không gian
   trên máy dùng chung, và về sau đây là chỗ họ viết nhật ký. */
.kg-thoat {
  margin-top: 16px; background: none; border: 1px solid var(--dusk);
  color: var(--mist-dim); font-size: 13px; padding: 12px 20px; border-radius: 99px;
  min-height: 44px; /* ngưỡng chạm trên điện thoại — đo được 38px trước khi sửa */
}

/* ── Màn chờ / lỗi ───────────────────────────────────────────────────────── */
.kg-cho { text-align: center; padding: 80px 20px; color: var(--mist-dim) }
.kg-cho .trang-quay {
  width: 34px; height: 34px; margin: 0 auto 16px; fill: var(--gold);
  animation: kg-quay 2.4s linear infinite;
}
@keyframes kg-quay { to { transform: rotate(360deg) } }
.kg-loi { text-align: center; padding: 70px 20px }
.kg-loi h2 { font-family: var(--disp); font-size: 26px; color: var(--gold-pale); margin: 0 0 10px }
.kg-loi p { color: var(--mist); font-size: 15px; line-height: 1.75; margin: 0 auto; max-width: 26em; text-wrap: pretty }

/* ════════════════════════════════════════════════════════════════════════════
   TRANG HỌC /hoc — thêm 10/08/2026
   Khác màn đọc ở một điểm: đây là chỗ NHÌN TOÀN CẢNH nên khung rộng hơn, còn
   màn đọc vẫn giữ 640px vì đó là bề ngang đọc chữ dễ nhất.
   ════════════════════════════════════════════════════════════════════════════ */
.kg-wrap.rong { max-width: 1040px }
.kg-wrap.rong .kg-doc { max-width: 640px; margin: 0 auto }

/* Trình nghe audio của một chương. Dùng thẻ <audio> gốc: nó có sẵn nút tua,
   tốc độ đọc, và khoá màn hình trên điện thoại - tự vẽ lại là mất hết. */
.kg-nghe { width: 100%; margin: 4px 0 22px; border-radius: 99px }
.kg-nghe::-webkit-media-controls-panel { background: var(--midnight) }

/* ── Dải "bản xem thử" ───────────────────────────────────────────────────── */
.hoc-dai-demo {
  position: sticky; top: 0; z-index: 40; text-align: center;
  background: var(--gold); color: #1a1405; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; letter-spacing: .2px;
}

/* ── Dải thăng hạng ──────────────────────────────────────────────────────────
   Hạng đo bằng SỐ NGÀY ĐÃ ĐI TRỌN, không phải số lần mở trang. Không có huy
   hiệu nào tụt hạng: vắng mấy ngày cũng không mất thứ đã đi qua. */
.hoc-hang {
  margin: 20px 0 8px; padding: 20px 22px; border-radius: 20px;
  background: linear-gradient(150deg, var(--midnight-2), var(--deep) 78%);
  border: 1px solid var(--dusk);
}
.hoc-hang-tren { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.hoc-huy {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, rgba(201, 168, 76, .30), rgba(107, 63, 160, .22));
  border: 1px solid rgba(201, 168, 76, .45);
}
.hoc-huy svg { width: 25px; height: 25px; fill: var(--gold) }
.hoc-hang-ten { flex: 1; min-width: 190px }
.hoc-hang-ten .nhan {
  font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--mist-dim); font-weight: 600;
}
.hoc-hang-ten b {
  display: block; font-family: var(--disp); font-size: 26px; font-weight: 600;
  color: var(--gold-pale); line-height: 1.2; margin-top: 2px; text-wrap: balance;
}
.hoc-hang-so { display: flex; gap: 26px }
.hoc-hang-so div { text-align: center }
.hoc-hang-so b {
  display: block; font-family: var(--disp); font-size: 25px; font-weight: 600; color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.hoc-hang-so span { font-size: 11px; color: var(--mist-dim) }

.hoc-hang-thanh {
  height: 7px; border-radius: 99px; background: var(--void);
  border: 1px solid var(--dusk); overflow: hidden; margin: 15px 0 8px;
}
.hoc-hang-chay {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--amethyst), var(--gold));
  transition: width .7s cubic-bezier(.22, 1, .36, 1);
}
.hoc-hang-ke { font-size: 12.5px; color: var(--mist); text-wrap: pretty }
.hoc-hang-ke b { color: var(--gold-pale); font-weight: 600 }

/* ── Lưới thẻ ngày có ảnh ────────────────────────────────────────────────────
   Ảnh nằm trên, chiếm phần lớn thẻ — đúng mẫu Sếp gửi. */
.hoc-luoi {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.hoc-the {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  background: linear-gradient(170deg, var(--midnight-2), var(--midnight));
  border: 1px solid var(--dusk); border-radius: 18px; color: var(--cream);
  transition: border-color .18s ease, transform .16s ease, box-shadow .18s ease;
}
.hoc-the:hover { border-color: var(--violet); transform: translateY(-3px) }
.hoc-the:active { transform: translateY(0) scale(.995) }
.hoc-the:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }

.hoc-the-anh { position: relative; aspect-ratio: 5 / 3; background: var(--deep); overflow: hidden }
.hoc-the-anh img { width: 100%; height: 100%; object-fit: cover }
/* Phủ tối phía dưới ảnh để số ngày luôn đọc được, kể cả trên ảnh sáng trắng. */
.hoc-the-anh::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 8, 15, .05) 38%, rgba(9, 8, 15, .82));
}
.hoc-the-so {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-family: var(--disp); font-size: 12px; letter-spacing: 2.2px;
  text-transform: uppercase; font-weight: 600; color: var(--gold);
}
.hoc-the-dau {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 8, 15, .72); border: 1px solid var(--dusk);
}
.hoc-the-dau svg { width: 16px; height: 16px }
.hoc-the-than { padding: 13px 15px 15px; flex: 1; display: flex; flex-direction: column; gap: 7px }
.hoc-the-ten {
  font-family: var(--disp); font-size: 18.5px; font-weight: 600; line-height: 1.26;
  margin: 0; text-wrap: pretty;
}
.hoc-the-ghi {
  margin: auto 0 0; font-size: 11.5px; color: var(--mist-dim);
  display: flex; align-items: center; gap: 6px;
}

.hoc-the.xong { border-color: rgba(79, 208, 122, .34) }
.hoc-the.xong .hoc-the-ghi { color: var(--green) }
.hoc-the.nay { border-color: var(--gold); box-shadow: 0 10px 30px rgba(201, 168, 76, .15) }
.hoc-the.nay .hoc-the-ghi { color: var(--gold) }
/* Ngày chưa tới lượt: ảnh xám và mờ đi, nhưng KHÔNG giấu tiêu đề — biết phía
   trước có gì là một phần của việc muốn đi tiếp. */
.hoc-the.khoa { opacity: .62 }
.hoc-the.khoa .hoc-the-anh img { filter: grayscale(.85) brightness(.62) }
.hoc-the.khoa .hoc-the-dau { color: var(--mist-dim) }

/* ── Ba công cụ: thấy nhưng khoá ─────────────────────────────────────────────
   ⚠️ Người đọc khối này ĐÃ TRẢ TIỀN rồi và đang ngồi học. Tuyệt đối không đếm
   ngược, không thanh cảnh báo đỏ, không "chỉ còn 3 suất". Bản giao việc mục
   3.3 + Phụ lục A5. */
.hoc-cc { margin-top: 42px }
.hoc-cc-dau {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-size: 11.5px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--amethyst); font-weight: 600;
}
.hoc-cc-dau::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--dusk), transparent) }
.hoc-cc-phu { color: var(--mist); font-size: 13.5px; margin: 0 0 16px; max-width: 42em; text-wrap: pretty }

.hoc-cc-luoi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }

/* Thẻ "Tải về" (PDF + Audio Book) — có ảnh thật, hai trạng thái RÕ RỆT KHÁC
   3 công cụ (.hoc-o): ở đây "chưa mua" (.moi) vẫn SÁNG + có nhãn mời gọi, vì
   đây là chỗ MỜI MUA (Audio Book), không phải chỗ dùng lại thứ đã trả tiền —
   Sếp chốt 11/08: "để sáng nếu người dùng chưa mua... có hiệu ứng mời gọi". */
.hoc-tai-luoi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch }
.hoc-tai2-o {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  background: linear-gradient(165deg, var(--midnight), var(--deep));
  border: 1px solid var(--dusk); border-radius: 17px; overflow: hidden;
  color: var(--cream); text-decoration: none;
  transition: border-color .18s ease, transform .14s ease;
}
.hoc-tai2-o:hover { border-color: var(--gold) }
.hoc-tai2-o:active { transform: scale(.995) }
/* Chiều cao CỐ ĐỊNH (không dùng aspect-ratio): bảo đảm 2 thẻ luôn cao bằng nhau
   dù ảnh trái là bìa sách dọc, ảnh phải là ảnh chụp ngang - mọi trình duyệt. */
.hoc-tai2-anh { position: relative; height: clamp(150px, 19vw, 186px); background: var(--deep); flex-shrink: 0 }
.hoc-tai2-anh img { width: 100%; height: 100%; object-fit: cover; display: block }
.hoc-tai2-badge {
  position: absolute; right: 10px; top: 10px; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 99px; backdrop-filter: blur(2px);
}
.hoc-tai2-badge.co { background: rgba(79, 208, 122, .88); color: #0d2015 }
.hoc-tai2-badge.moi {
  background: rgba(201, 168, 76, .92); color: #1a1405;
  box-shadow: 0 0 0 0 rgba(201, 168, 76, .55); animation: hocTaiMoi 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hoc-tai2-badge.moi { animation: none } }
@keyframes hocTaiMoi {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, .45) }
  50% { box-shadow: 0 0 0 7px rgba(201, 168, 76, 0) }
}
.hoc-tai2-than { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px }
.hoc-tai2-ten { font-family: var(--disp); font-size: 18px; font-weight: 600 }
.hoc-tai2-mo { color: var(--mist); font-size: 12.5px; line-height: 1.55; text-wrap: pretty }
.hoc-tai2-chan { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--green); font-weight: 600 }
.hoc-tai2-chan.moi { color: var(--gold-pale) }

/* ── Người mua Ebook (chưa có Thử Thách): thứ tự khối trong Không Gian ──────
   Sếp chốt 12/08 (2): Thử Thách 21 ngày (lưới khoá #kgTuan) là bước nâng cấp
   CHÍNH của người mua Ebook -> đưa LÊN TRÊN, ngay sau tải + công cụ; các gói cao
   cấp khác (#hocBuocTiep: tư vấn/Tử Vi/Platinum) xuống DƯỚI. Nhóm Zalo giữ giữa. */
body.hoc-ebook #kgLuoi { display: flex; flex-direction: column }
body.hoc-ebook .kg-dau      { order: 0 }
body.hoc-ebook #hocHang     { order: 1 }
body.hoc-ebook #hocKhoTai   { order: 2 }  /* tải cẩm nang + Audio */
body.hoc-ebook #kgCongCu    { order: 3 }  /* 3 công cụ */
body.hoc-ebook #kgTuan      { order: 4 }  /* ĐỎ - Thử Thách 21 ngày (lên trên) */
body.hoc-ebook #hocZalo     { order: 5 }  /* nhóm Zalo (giữa) */
body.hoc-ebook #hocBuocTiep { order: 6 }  /* XANH - Nâng cấp cao cấp (xuống dưới) */
body.hoc-ebook .kg-chan     { order: 7 }

/* Lưới 21 ngày KHOÁ — lời mời Thử Thách (cho người chưa mua Z) */
.hoc-tt-khoa { margin-top: 38px }
.hoc-tt-moi { display: flex; flex-direction: column; background: linear-gradient(165deg, var(--midnight-2, #241A4D), var(--midnight, #1E1540)); border: 1px solid rgba(201,168,76,.34); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--cream) }
.hoc-tt-moi:hover { border-color: var(--gold) }
.hoc-tt-anh { position: relative; height: clamp(180px, 30vw, 260px) }
.hoc-tt-anh img { width: 100%; height: 100%; object-fit: cover; display: block }
.hoc-tt-anh::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(30,21,64,.92)) }
.hoc-tt-khoa-ic { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(9,8,15,.7); display: flex; align-items: center; justify-content: center; color: var(--gold-pale); z-index: 2 }
.hoc-tt-khoa-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7 }
.hoc-tt-than { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px }
.hoc-tt-than b { font-family: var(--disp); font-size: clamp(21px, 4.5vw, 27px); color: var(--gold-pale); font-weight: 600; line-height: 1.25 }
.hoc-tt-than > span { font-size: 14.5px; color: var(--mist); line-height: 1.7 }
/* Đặc hiệu phải THẮNG `.hoc-tt-than > span` (11): nút cũng là <span> con trực tiếp
   của .hoc-tt-than nên nếu để `.hoc-tt-nut` (10) thì màu #120D24 bị var(--mist) đè,
   chữ đen thành xám mờ trên nền vàng (Sếp bắt 12/08). Dùng `.hoc-tt-than .hoc-tt-nut` (20). */
.hoc-tt-than .hoc-tt-nut { margin-top: 6px; background: linear-gradient(135deg, var(--gold), var(--gold-pale)); color: #120D24; font-weight: 700; text-align: center; padding: 15px; border-radius: 100px; font-size: 15.5px; line-height: 1.3 }

/* Nhóm Zalo */
.hoc-zalo-luoi { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px }
@media (min-width: 560px) { .hoc-zalo-luoi { grid-template-columns: 1fr 1fr } }
/* Chỉ có nhóm chung (người mua Ebook, chưa có nhóm riêng 21 ngày) → 1 thẻ. Không để
   nó dính lệch trái ô cột thứ nhất của lưới 2 cột: một cột, căn giữa, chặn bề rộng. */
.hoc-zalo-luoi.mot { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto }
.hoc-zalo-o { display: flex; align-items: center; gap: 14px; background: var(--midnight); border: 1px solid var(--dusk); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: var(--cream) }
.hoc-zalo-o.rieng { border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.06) }
.hoc-zalo-o:hover { border-color: var(--violet) }
.hoc-zalo-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(0,104,255,.14); border: 1px solid rgba(0,104,255,.32); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #4aa3ff }
.hoc-zalo-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.hoc-zalo-t { flex: 1; min-width: 0 }
.hoc-zalo-t b { display: block; font-family: var(--disp); font-size: 18px; color: var(--cream) }
.hoc-zalo-t span { display: block; font-size: 12.5px; color: var(--mist); line-height: 1.55; margin-top: 2px }
.hoc-zalo-mui { font-size: 12.5px; color: var(--gold-pale); white-space: nowrap; font-weight: 600 }
.hoc-o {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  background: linear-gradient(165deg, var(--midnight), var(--deep));
  border: 1px solid var(--dusk); border-radius: 17px; overflow: hidden;
  color: var(--cream);
  transition: border-color .18s ease, transform .14s ease;
}
.hoc-o:hover { border-color: var(--gold) }
.hoc-o:active { transform: scale(.995) }
.hoc-o-anh { position: relative; aspect-ratio: 16 / 10; background: var(--deep) }
.hoc-o-anh img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.85) brightness(.6) }
.hoc-o-khoa {
  position: absolute; right: 10px; top: 10px; width: 15px; height: 15px;
  padding: 7px; border-radius: 50%; background: rgba(9, 8, 15, .68); color: var(--mist-dim);
  backdrop-filter: blur(2px);
}
.hoc-o-than { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px }
.hoc-o-ten { font-family: var(--disp); font-size: 20px; font-weight: 600; line-height: 1.2 }
.hoc-o-mo { color: var(--mist); font-size: 13px; line-height: 1.6; margin: 0; text-wrap: pretty }
.hoc-o-chan { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--gold); font-weight: 600 }
.hoc-o.co { border-color: rgba(79, 208, 122, .32) }
.hoc-o.co .hoc-o-anh img { filter: none }
.hoc-o.co .hoc-o-khoa { color: var(--green); background: rgba(9, 8, 15, .5) }
.hoc-o.co .hoc-o-chan { color: var(--green) }

/* Khối "Bước tiếp theo" — gợi ý Z/V/P chưa mua, đặt DƯỚI ba công cụ.
   (Dựng lại 11/08 từ khung .hoc-combo cũ — combo đã bỏ hẳn, khung hình học vẫn
   đúng chỗ cho một khối nổi bật dưới cùng nên tái dùng, đổi tên cho khỏi nhầm.
   Sếp chốt đêm 11/08: thẻ cần ẢNH + mô tả dài hơn, và bước V hiện CẢ HAI gói
   (Thấu Vận + Tử Vi) cạnh nhau — nên khối này giờ là LƯỚI nhiều thẻ, không
   phải một khối đơn như bản đầu.) */
.hoc-tiep-nhan {
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold);
  font-weight: 600; margin: 20px 0 10px;
}
.hoc-tiep-luoi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.hoc-tiep {
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(150deg, rgba(107, 63, 160, .20), var(--deep) 72%);
  border: 1px solid rgba(201, 168, 76, .34);
  display: flex; flex-direction: column;
}
.hoc-tiep-anh { aspect-ratio: 4/3; overflow: hidden; background: var(--midnight) }
.hoc-tiep-anh img { width: 100%; height: 100%; object-fit: cover; display: block }
.hoc-tiep-than { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1 }
.hoc-tiep h3 { font-family: var(--disp); font-size: 22px; font-weight: 600; margin: 0 0 4px; color: var(--gold-pale); line-height: 1.2 }
.hoc-tiep-gia { font-size: 12.5px; color: var(--gold); font-weight: 600; margin-bottom: 10px }
.hoc-tiep p { color: var(--mist); font-size: 13.5px; line-height: 1.7; margin: 0 0 16px; text-wrap: pretty; flex: 1 }
.hoc-tiep .kg-nut { margin-top: 0 }
.hoc-gia-cu { color: var(--mist-dim); text-decoration: line-through; margin-right: 8px }

/* Khối "Bước tiếp theo" bên trong lời mời cuối ngày 21 (kg-ket-moi) đặt các
   thẻ ngay dưới, không cần khung viền lồng thêm — .hoc-tiep-luoi đã đủ viền. */
.kg-ket-moi .hoc-tiep-luoi { margin-top: 8px; text-align: left }

/* ── Lớp giới thiệu + QR mua tại chỗ ─────────────────────────────────────── */
.hoc-lop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px }
.hoc-lop[hidden] { display: none }
.hoc-lop-nen { position: absolute; inset: 0; background: rgba(5, 4, 10, .82); backdrop-filter: blur(3px) }
.hoc-lop-hop {
  position: relative; z-index: 2; width: 100%; max-width: 520px;
  max-height: calc(100vh - 36px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(165deg, var(--midnight-2), var(--void) 82%);
  border: 1px solid var(--dusk); border-radius: 22px; padding: 26px 24px 24px;
}
.hoc-lop-dong {
  position: absolute; right: 12px; top: 10px; width: 40px; height: 40px;
  background: none; border: 0; color: var(--mist-dim); font-size: 26px; line-height: 1;
}
.hoc-lop-dong:hover { color: var(--cream) }
.hoc-lop-nhan {
  font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--amethyst); font-weight: 600; margin-bottom: 8px;
}
.hoc-lop-hop h2 {
  font-family: var(--disp); font-weight: 600; font-size: clamp(24px, 5.4vw, 30px);
  line-height: 1.22; margin: 0 0 14px; color: var(--gold-pale); text-wrap: balance;
}
.hoc-lop-hop p { color: var(--mist); font-size: 14.5px; line-height: 1.78; margin: 0 0 12px; text-wrap: pretty }
.hoc-lop-hop ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px }
.hoc-lop-hop li { font-size: 13.5px; color: var(--cream); line-height: 1.6; display: flex; gap: 9px; text-wrap: pretty }
.hoc-lop-hop li::before { content: '·'; color: var(--gold); font-weight: 700; flex-shrink: 0 }
.hoc-trich {
  border-left: 2px solid var(--gold); padding: 2px 0 2px 15px; margin: 0 0 18px;
  font-family: var(--disp); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--cream);
}
.hoc-trich b { font-style: normal; color: var(--gold-pale) }

/* QR */
.hoc-qr { text-align: center; margin-top: 6px }
.hoc-qr img { width: 216px; max-width: 74%; margin: 0 auto; border-radius: 14px; background: #fff; padding: 9px }
.hoc-qr-ma {
  display: inline-block; margin-top: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px; letter-spacing: 1.4px; color: var(--gold-pale);
  background: rgba(201, 168, 76, .1); border: 1px solid rgba(201, 168, 76, .3);
  padding: 7px 15px; border-radius: 10px;
}
.hoc-qr-bang { margin-top: 14px; font-size: 13px; color: var(--mist); line-height: 1.85 }
.hoc-qr-bang b { color: var(--cream) }
.hoc-qr-cho { margin-top: 16px; font-size: 12.5px; color: var(--mist-dim); text-wrap: pretty }

@media (max-width: 560px) {
  .hoc-hang { padding: 17px 16px }
  .hoc-hang-so { gap: 18px; width: 100% }
  .hoc-hang-so div { flex: 1 }
  .hoc-luoi { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px }
  .hoc-lop-hop { padding: 22px 18px 20px }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important }
}