/* Các trang trong của hub (Về ĐTV, Hành trình, Bắt đầu, Chương trình, hồ sơ, Chuyên san, bài viết, Tài nguyên, Sự kiện, Đồng hành 1-1,
   Cổng học viên, Thông tin, 404). Nạp SAU chung.css: dùng chung màu, chữ, nút, đầu trang, chân trang với trang chủ (H14).
   Cùng ngôn ngữ trang chủ: không đóng hộp; danh sách là dòng mở ngăn bằng đường tóc; khối nổi là quầng sáng tan vào nền kèm vạch cam;
   bản đồ hành trình là đường sáng dọc, tầng 4 nét đứt (nhánh có điều kiện). Tên lớp giữ nguyên để bộ thử hành vi còn nghĩa. */
[hidden] { display: none !important; }
.dtv main { font-size: 17px; }
/* Quy tắc nền dùng :where để độ ưu tiên thấp, quy tắc riêng của từng khối luôn thắng. */
:where(.dtv main) :where(h1, h2, h3) { margin: 0; text-wrap: balance; }
:where(.dtv main) h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.03; font-weight: 700; letter-spacing: -.03em; }
:where(.dtv main) :where(h1, h2) .nhan { color: var(--yen); } /* nửa sau tiêu đề: Oatmeal (tiêu chuẩn mục 3) */
:where(.dtv main) h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; margin-bottom: 20px; }
:where(.dtv main) h3 { font-size: 1.2rem; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
:where(.dtv main) p { margin: 0 0 14px; max-width: 68ch; text-wrap: pretty; }
:where(.dtv main) a:not([class]) { color: var(--kem); text-decoration-color: rgba(238, 233, 223, .6); text-underline-offset: 4px; }
:where(.dtv main) a:not([class]):hover { color: #fff; }
:where(.dtv main) img { display: block; max-width: 100%; height: auto; }
.khung { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); position: relative; z-index: 2; }
.khung.hep { max-width: 820px; }
.nhan-mono { font: 500 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--yen); margin: 0 0 12px; }
.nhan-mono a { color: inherit; }
.chu-thich, .dtv main figcaption { font: 400 12.5px/1.5 var(--mono); color: var(--yen); margin-top: 10px; }
.dan { font-size: clamp(17px, 1.4vw, 20px); color: var(--kem); }
.dong-phu { color: var(--yen); font-size: 1.1rem; }
.chu-duoi { color: var(--yen); margin-top: 8px; }

/* ── Nút: cùng dáng nút trang chủ (viên thuốc). Một nút chính mỗi khối. ── */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; white-space: nowrap;
  font: 600 16px/1.2 var(--chu); text-decoration: none; position: relative; overflow: hidden; isolation: isolate;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.nut.chinh { background: var(--cam); color: var(--abyssal); font-weight: 700; box-shadow: 0 12px 30px -14px rgba(255, 177, 98, .8); }
.nut.chinh:hover { background: var(--kem); color: var(--abyssal); transform: translateY(-2px); }
.nut.phu { border: 1.5px solid rgba(238, 233, 223, .38); color: var(--kem); background: rgba(27, 38, 50, .35); }
.nut.phu:hover { border-color: var(--kem); color: var(--kem); background: rgba(238, 233, 223, .07); transform: translateY(-2px); }
/* Nút cam chính của trang con: cùng hiệu ứng nút cam trang chủ (chung.css), mũi tên nhích đều để mời bấm. */
.nut.chinh:hover { box-shadow: 0 18px 40px -14px rgba(255, 177, 98, .95); }
.nut.chinh::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .55) 50%, transparent 68%); animation: loe 6s ease-in-out 1.2s infinite; }
.nut.chinh:hover::after { animation: none; }
.nut.chinh > .mui { animation: nudge 1.6s ease-in-out infinite; }
.nut.chinh:hover > .mui { animation: none; }
.nut .mui { margin-right: -4px; }
.nut.nho { min-height: 42px; padding: 0 18px; font-size: 15px; }
.nut-chu { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-height: 40px; margin-top: 6px; color: var(--kem); font-weight: 600; text-decoration: none; }
.nut-chu:hover { color: var(--kem); }
.dtv main .hang-nut { margin-top: 24px; }

/* ── Nhãn trạng thái đợt: chữ luôn nói rõ, không chỉ dựa màu ── */
.trang-thai { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid rgba(238, 233, 223, .45); border-radius: 999px;
  font: 500 12px/1.4 var(--mono); color: var(--kem); white-space: nowrap; vertical-align: middle; }
.tt-dang_mo_dang_ky, .tt-dang_dien_ra { background: var(--cam); border-color: var(--cam); color: var(--abyssal); }
.tt-dang_mo_dang_ky::before, .tt-dang_dien_ra::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--abyssal); animation: nhip 1.6s ease-in-out infinite; }
.tt-da_ket_thuc, .tt-hoc_ban_ghi { color: var(--yen); border-style: dashed; }

/* ── Đầu mỗi trang: tiêu đề lớn, nhãn cam có vạch, vân đồng mức và quầng sáng ấm ── */
.dau-trang-con { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 112px) clamp(32px, 4vw, 56px); }
.dau-trang-con::before { content: ""; position: absolute; inset: 0; background: url(/anh/nen-duong-dong-muc.png) center/1500px auto repeat; opacity: .07; pointer-events: none; }
.dau-trang-con::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 70% at 85% 30%, rgba(255, 177, 98, .05), rgba(255, 177, 98, 0) 70%); pointer-events: none; }
.dau-trang-con .khung > .nhan-mono { color: var(--kem); letter-spacing: .12em; font-size: 13px; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.dau-trang-con .khung > .nhan-mono::before { content: ""; width: 28px; height: 1px; background: var(--kem); flex: none; }
.dau-trang-con h1 { margin-bottom: 22px; max-width: 18ch; }
.dau-trang-con .khung > p { color: var(--yen); font-size: clamp(16px, 1.3vw, 19px); }
.bai .dau-trang-con h1 { max-width: none; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.12; }

/* ── Khối: ngăn bằng đường tóc mờ dần hai đầu, không đóng hộp ── */
.khoi { position: relative; padding-block: clamp(56px, 7vw, 104px); }
.khoi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(238, 233, 223, 0), rgba(238, 233, 223, .14) 20%, rgba(238, 233, 223, .14) 80%, rgba(238, 233, 223, 0)); }

/* ── Danh sách lựa chọn nhu cầu: dòng mở, cả dòng là vùng bấm, rê chuột thì quầng sáng ── */
.lua-chon { list-style: none; margin: 8px 0 0; padding: 0; }
.lua-chon a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 6px; border-bottom: 1px solid rgba(238, 233, 223, .12);
  color: var(--kem); text-decoration: none; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 500; }
.lua-chon .mui { color: var(--yen); transition: transform .2s ease, color .2s ease; }
.lua-chon a:hover, .lua-chon a[aria-current] { color: var(--kem); background: radial-gradient(80% 120% at 0% 50%, rgba(238, 233, 223, .12), rgba(238, 233, 223, 0) 70%); }
.lua-chon a[aria-current] { border-bottom-color: var(--kem); }
.lua-chon a:hover .mui, .lua-chon a[aria-current] .mui { color: var(--kem); transform: translateX(4px); }

/* ── Bản đồ hành trình: đường sáng dọc nối các trạm, đoạn tới tầng 4 nét đứt ── */
.duong { list-style: none; margin: 28px 0 8px; padding: 0; max-width: 820px; }
.tram { position: relative; padding: 0 0 48px 112px; }
.tram::before { content: ""; position: absolute; left: 46px; top: 34px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--cam), rgba(255, 177, 98, .35));
  box-shadow: 0 0 8px rgba(255, 177, 98, .45); }
.tram:last-child { padding-bottom: 0; }
.tram:last-child::before { display: none; }
.tram:has(+ .co-dieu-kien)::before { background: repeating-linear-gradient(180deg, var(--yen) 0 6px, transparent 6px 14px); box-shadow: none; opacity: .7; }
.tram-so { position: absolute; left: 0; top: 2px; width: 94px; padding: 6px 0; text-align: center; background: var(--cam); color: var(--abyssal); border-radius: 999px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 6px var(--abyssal), 0 0 22px rgba(255, 177, 98, .45); }
.co-dieu-kien .tram-so { background: var(--abyssal); color: var(--yen); border: 1.5px dashed var(--yen); box-shadow: 0 0 0 6px var(--abyssal); }
.tram-than { position: relative; padding: 0 0 6px; }
.tram-than h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 6px; }
.tram-hoi { color: var(--yen); }
.tram-giai { color: var(--yen); font-size: 15.5px; }
.tram-ct { list-style: none; margin: 4px 0 6px; padding: 0; }
.tram-ct li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 0; }
.tram-ct a { color: var(--kem); font-weight: 600; text-decoration: none; }
.tram-ct a:hover { color: var(--kem); }
.tram-ct p { flex-basis: 100%; margin: 0; color: var(--yen); font-size: 15px; }
.tram-them a { color: var(--yen); font-weight: 400; font-size: 15px; }
@media (max-width: 560px) {
  .tram { padding-left: 44px; padding-top: 44px; }
  .tram::before { left: 15px; top: 34px; }
  .tram-so { width: auto; padding: 4px 12px; }
}

/* ── Vòng phương pháp: mỗi bước một hàng, cột phải là câu ví dụ ── */
.vong { margin-top: 28px; }
.vong ol { list-style: none; margin: 0; padding: 0; }
.vong-dau { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 28px; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--yen); padding-bottom: 10px; }
.vong-dau span:first-child { grid-column: 1 / 3; }
.vong-buoc { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 28px; padding: 24px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.vong-ten { display: flex; gap: 14px; align-items: baseline; }
.vong-ten h3 { font-size: 1.4rem; }
.vong-so { font: 500 28px var(--mono); color: rgba(238, 233, 223, .55); }
.vong-y { margin: 0; color: var(--yen); }
.vong-lop { display: block; margin-top: 8px; color: var(--kem); font-size: 15px; }
.vong-vd { margin: 0; padding-left: 16px; border-left: 2px solid rgba(238, 233, 223, .45); }
.thoi-gian { font: 400 13.5px/1.5 var(--mono); color: var(--yen); }
.ghi-minh-hoa { font: 500 12.5px var(--mono); color: var(--yen); border-top: 1px solid rgba(238, 233, 223, .12); padding-top: 14px; }
@media (max-width: 820px) { .vong-dau { display: none; } .vong-buoc { grid-template-columns: 1fr; gap: 10px; } }

/* ── Người dẫn dắt: nền sáng như trang chủ ── */
.khoi.nguoi { background: var(--kem); color: var(--abyssal); }
.khoi.nguoi::before { display: none; }
.nguoi-luoi { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.nguoi-anh { margin: 0; }
.nguoi-anh img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.khoi.nguoi h2 { font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--nau); margin-bottom: 14px; }
.nguoi-ten { font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; letter-spacing: -.025em; line-height: 1.06; margin-bottom: 18px; }
.khoi.nguoi p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.nguoi-muc { margin: 18px 0; padding: 0; list-style: none; font-size: 15px; color: var(--xanh); }
.nguoi-muc li { padding: 10px 0; border-top: 1px solid rgba(27, 38, 50, .18); }
.nguoi-muc li:last-child { border-bottom: 1px solid rgba(27, 38, 50, .18); }
.khoi.nguoi .nut-chu { color: var(--abyssal); text-decoration: underline; text-underline-offset: 4px; }
.khoi.nguoi .chu-thich, .khoi.nguoi figcaption { color: var(--xanh); }
.khoi.nguoi :focus-visible { outline-color: var(--abyssal); }
@media (max-width: 820px) { .nguoi-luoi { grid-template-columns: 1fr; } .nguoi-anh img { aspect-ratio: 1 / 1; } }

/* ── Đợt đang mở, lịch sử, danh mục chương trình: dòng mở ── */
.dot-mo, .ds-dot, .lich-su, .ds-ct, .ds-noi-hoc, .ds-kenh { list-style: none; margin: 8px 0 0; padding: 0; }
.dot-mo li, .ds-dot li { padding: 22px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.dot-mo p { color: var(--yen); margin-bottom: 8px; }
.dot-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.dot-dau a { color: var(--kem); text-decoration: none; }
.dot-dau a:hover { color: var(--kem); }
.lich-su li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.lich-su span:not(.trang-thai) { color: var(--yen); }
.ds-ct li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-top: 1px solid rgba(238, 233, 223, .12); padding: 22px 6px; transition: background .2s ease; }
.ds-ct li:hover { background: radial-gradient(70% 120% at 0% 50%, rgba(238, 233, 223, .08), rgba(238, 233, 223, 0) 70%); }
.ds-ct a { display: grid; gap: 4px; color: var(--kem); text-decoration: none; }
.ds-ct a .nhan-mono { margin: 0; }
.ds-ct strong { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -.01em; }
.ds-ct a:hover strong { color: var(--kem); }
.ds-mo-ta { color: var(--yen); font-size: 15.5px; }
.trong { padding: 28px 0; color: var(--yen); }
.bo-loc { display: grid; gap: 14px; margin-bottom: 32px; }
.loc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.loc .nhan-mono { margin: 0; min-width: 96px; }
.loc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.loc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(238, 233, 223, .3); border-radius: 999px; font-size: 14.5px;
  color: var(--kem); text-decoration: none; }
.loc a:hover { border-color: var(--kem); color: var(--kem); }
.loc a[aria-current] { background: var(--kem); color: var(--abyssal); border-color: var(--kem); font-weight: 600; }

/* ── Dải ảnh hoạt động ── */
.dai-anh { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding-inline: clamp(16px, 4vw, 40px); max-width: 1400px; margin: 12px auto 0; }
.dai-anh img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; filter: saturate(.9); }
@media (max-width: 820px) {
  .dai-anh { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .dai-anh img { scroll-snap-align: start; }
}

/* ── Ảnh chụp màn đầu thẻ tài nguyên ── */
.the-tn .tn-anh { margin: 0 0 18px; box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .9); transition: transform .2s ease, box-shadow .2s ease; }
.the-tn .tn-anh:hover { transform: translateY(-3px); box-shadow: 0 32px 60px -30px rgba(0, 0, 0, .95); }

/* ── Dãy clip TikTok (trang Tài nguyên, 0228): màn rộng vừa một hàng, màn hẹp lướt ngang ── */
.dai-clip { list-style: none; margin: 28px 0 0; padding: 0 0 10px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--xanh) transparent; }
.dai-clip li { scroll-snap-align: start; min-width: 0; }
.clip { display: flex; flex-direction: column; gap: 10px; color: var(--kem); text-decoration: none; }
.clip-anh { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--xanh); }
.clip-anh img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.clip-anh::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(27, 38, 50, .75)); pointer-events: none; }
.clip:hover .clip-anh img { transform: scale(1.04); }
.clip-xem { position: absolute; left: 10px; bottom: 9px; z-index: 1; display: flex; align-items: center; gap: 5px; font: 500 12px/1 var(--mono); color: var(--kem); white-space: nowrap; }
.clip-xem .ico { width: 14px; height: 14px; }
.chi-doc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.clip-ten { font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip:hover .clip-ten { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) { .dai-clip { grid-auto-columns: 40%; margin-right: calc(-1 * clamp(16px, 4vw, 40px)); padding-right: 16px; } }
@media (max-width: 480px) { .dai-clip { grid-auto-columns: 46%; } }
@media (prefers-reduced-motion: reduce) { .clip-anh img { transition: none; } .clip:hover .clip-anh img { transform: none; } }

/* ── Lối đi ── */
.loi-di { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.loi-di a { display: grid; gap: 6px; padding: 20px 0 0; border-top: 2px solid rgba(238, 233, 223, .25); color: var(--kem); text-decoration: none; }
.loi-di a:hover { border-top-color: var(--kem); }
.loi-di span { color: var(--yen); }
@media (max-width: 820px) { .loi-di { grid-template-columns: 1fr; } }

/* ── Về ĐTV: ba trụ đứng trên mặt nền gốc (đường chân trời cam, quầng sáng tỏa lên), không đóng hộp ── */
.dinh-vi { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.45; color: var(--kem); max-width: 34ch; margin-bottom: 20px; }
.tru-cot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; margin: 32px 0 0; }
.tru { position: relative; padding: 22px 0 26px; }
.tru::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--kem); opacity: .75; }
.tru dt { font-weight: 600; font-size: 1.15rem; margin-bottom: 6px; }
.tru dd { margin: 0; color: var(--yen); }
.tru-goc { grid-column: 1 / -1; padding: 22px 0 18px; border-top: 1px solid rgba(238, 233, 223, .5);
  background: radial-gradient(60% 140% at 25% 0%, rgba(238, 233, 223, .12), rgba(238, 233, 223, 0) 70%); }
.tru-goc::before { display: none; }
.tru-goc .nhan-mono { margin-bottom: 6px; color: var(--kem); }
.tru-goc dt { font-size: 1.3rem; }
.tru-goc dd { color: var(--kem); max-width: 70ch; }
@media (max-width: 820px) { .tru-cot { grid-template-columns: 1fr; } .tru { padding-bottom: 18px; } }
.bang { width: 100%; max-width: 860px; border-collapse: collapse; margin-top: 20px; }
.bang th, .bang td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.bang thead th { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--yen); border-top: 0; }
.bang tbody th { font-weight: 600; white-space: nowrap; }
.bang td { color: var(--yen); }
@media (max-width: 560px) { .bang tbody th { white-space: normal; } }
.anh-rong { margin: 8px 0 12px; max-width: 560px; }
.anh-rong img { border-radius: 20px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ── Bắt đầu: kết quả là khối chìm nền (quầng sáng + vạch cam), không hộp ── */
.bat-dau-luoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.bat-dau-luoi .lua-chon { margin: 0; position: sticky; top: 96px; }
.bat-dau-luoi .lua-chon a { font-size: 1.08rem; padding: 16px 6px; }
.ket-qua { position: relative; padding: 26px clamp(8px, 2vw, 24px) 8px 0; background: radial-gradient(ellipse 85% 60% at 0% 0%, rgba(44, 59, 77, .6), rgba(44, 59, 77, 0) 100%); }
.ket-qua::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 2px; background: var(--kem); }
.ket-qua h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); outline: none; }
.ket-qua dl { margin: 0; }
.ket-qua dl > div { padding: 14px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.ket-qua dt { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--yen); margin-bottom: 6px; }
.ket-qua dd { margin: 0; }
.kq-ct dd a { font-weight: 700; font-size: 1.15rem; color: var(--kem); text-decoration: none; }
.kq-ct dd a:hover { color: var(--kem); }
.kq-ct dd span { display: block; margin-top: 6px; color: var(--yen); }
.kq-cuoi { margin: 18px 0 0; color: var(--yen); font-size: 15px; }
.kq-cuoi .nut-chu { margin: 0; }
@media (max-width: 820px) { .bat-dau-luoi { grid-template-columns: 1fr; } .bat-dau-luoi .lua-chon { position: static; } }

/* ── Hồ sơ chương trình ── */
.ho-so.co-anh .khung { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ho-so-anh { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.ho-so-anh:hover { border-color: rgba(238, 233, 223, .6); }
.ho-so.co-anh h1 { font-size: clamp(36px, 4.6vw, 64px); }
@media (max-width: 900px) { .ho-so.co-anh .khung { grid-template-columns: minmax(0, 1fr); } }
.ho-so-dl { margin: 0; max-width: 900px; }
.ho-so-dl > div { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.ho-so-dl dt { font: 500 12.5px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--yen); }
.ho-so-dl dd { margin: 0; }
@media (max-width: 640px) { .ho-so-dl > div { grid-template-columns: 1fr; gap: 4px; } }
.ds-chang { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.chang { position: relative; display: grid; gap: 4px; padding-top: 18px; }
.chang::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--kem); opacity: .75; }
.chang .nhan-mono { margin: 0; color: var(--kem); }
.chang span:last-child { color: var(--yen); font-size: 15.5px; }
@media (max-width: 820px) { .ds-chang { grid-template-columns: 1fr; } }

/* ── Cổng học viên, Thông tin ── */
.noi-hoc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 36px; align-items: center; padding: 28px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.noi-hoc.co-anh { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.noi-hoc .trinh { margin: 0; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
.noi-hoc strong { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.015em; }
.noi-hoc p { margin: 6px 0 0; color: var(--yen); font-size: 15.5px; }
.noi-hoc .hang-nut { margin-top: 16px !important; align-items: center; gap: 8px 20px; }
@media (max-width: 720px) { .noi-hoc.co-anh { grid-template-columns: minmax(0, 1fr); } }
/* Cổng học viên (Quỳnh 18/10): ghi rõ chỉ dành cho học viên; dưới cổng khóa còn bán có lời mời lấy vé. */
.chi-hv { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 14px 0 18px; color: var(--kem); font-weight: 600; font-size: 16.5px; line-height: 1.5; }
.chi-hv .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--kem-icon); }
.moi-ve { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(238, 233, 223, .18); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.noi-hoc .moi-ve p { margin: 0; flex: 1 1 260px; font-size: 15px; }
.ds-kenh li { padding: 12px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.khoi h2 + .ds-kenh, .ho-so-dl + h2 { margin-top: 36px; }

/* ── Chuyên san, bài viết ── */
.tru-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tru-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(238, 233, 223, .3); border-radius: 999px;
  color: var(--kem); text-decoration: none; font-size: 14.5px; }
.tru-nav a:hover { border-color: var(--kem); color: var(--kem); }
.tru-nav a[aria-current] { background: var(--kem); color: var(--abyssal); border-color: var(--kem); font-weight: 600; }
.tru-nav .so { font: 500 12px var(--mono); color: var(--yen); }
.tru-nav a[aria-current] .so { color: var(--abyssal); }
.ds-bai { list-style: none; margin: 8px 0 0; padding: 0; }
.ds-bai li { border-top: 1px solid rgba(238, 233, 223, .12); }
.ds-bai a { display: grid; gap: 4px; padding: 20px 6px; color: var(--kem); text-decoration: none; }
.ds-bai a:hover { background: radial-gradient(70% 120% at 0% 50%, rgba(238, 233, 223, .08), rgba(238, 233, 223, 0) 70%); }
.ds-bai a .nhan-mono { margin: 0; }
.ds-bai strong { font-size: 1.2rem; }
.ds-bai a:hover strong { color: var(--kem); }
.cum { margin-top: 28px; }
.cum h3 { font: 500 12.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--kem); }
.bai-chu-de h2 a { color: var(--kem); text-decoration: none; }
.bai-chu-de h2 a:hover { color: var(--kem); }
.bai-meta { font: 400 13px/1.6 var(--mono); color: var(--yen); }
.than-bai { font-size: 18px; line-height: 1.78; padding-bottom: 32px; }
.than-bai h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.than-bai ul { padding-left: 1.2em; margin: 0 0 16px; }
.than-bai li { margin-bottom: 6px; }
.than-bai li::marker { color: var(--kem); }
.bai-nguon { font: 400 13.5px/1.6 var(--mono); color: var(--yen); border-top: 1px solid rgba(238, 233, 223, .12); padding-top: 14px; margin-top: 28px; }
.anh-bai { margin: 0 auto 28px; }
.anh-bai img { border-radius: 20px; width: 100%; }
.bai-tiep { display: grid; gap: 22px; padding-block: 28px 56px; border-top: 1px solid rgba(238, 233, 223, .12); }

/* ── Tài nguyên: khối chìm nền, không hộp ── */
.ds-tn { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.the-tn { position: relative; padding: 24px clamp(8px, 2vw, 24px) 12px 0; background: radial-gradient(ellipse 80% 70% at 0% 0%, rgba(44, 59, 77, .55), rgba(44, 59, 77, 0) 100%); }
.the-tn::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--kem); opacity: .75; }
.the-tn h3 { margin-bottom: 8px; font-size: 1.45rem; }
.the-tn p { color: var(--yen); }
.the-tn .nhan-mono { margin-bottom: 8px; }
.bai-tiep .ds-tn { grid-template-columns: 1fr; margin: 0; }
@media (max-width: 720px) { .ds-tn { grid-template-columns: 1fr; } }

/* ── Sự kiện ── */
.ds-sk { list-style: none; margin: 8px 0 0; padding: 0; }
.su-kien { padding: 26px 0; border-top: 1px solid rgba(238, 233, 223, .12); }
.su-kien .dot-dau h3 { font-size: 1.45rem; }
.sk-dl { margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; max-width: 780px; }
.sk-dl dt { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--yen); }
.sk-dl dd { margin: 2px 0 0; }
.su-kien .hang-nut { margin-top: 16px; }
@media (max-width: 560px) { .sk-dl { grid-template-columns: 1fr; } }

/* ── Đồng hành 1-1: ô nhập dạng gạch chân, lựa chọn là dòng mở, không hộp ── */
.quy-trinh { margin: 8px 0 0; padding-left: 1.3em; max-width: 68ch; }
.quy-trinh li { padding: 6px 0; }
.quy-trinh li::marker { color: var(--kem); font-family: var(--mono); }
.form-1-1 { display: grid; gap: 22px; margin-top: 12px; }
.form-1-1 label { display: grid; gap: 6px; font-weight: 500; font-size: 15px; }
.form-1-1 input, .form-1-1 select, .form-1-1 textarea { font: 400 17px/1.5 var(--chu); color: var(--kem); background: transparent; border: 0;
  border-bottom: 1.5px solid rgba(238, 233, 223, .3); border-radius: 0; padding: 10px 2px; width: 100%; transition: border-color .2s ease, background .2s ease; }
.form-1-1 select option { background: var(--abyssal); color: var(--kem); }
.form-1-1 textarea { min-height: 120px; resize: vertical; background: radial-gradient(ellipse 80% 80% at 0% 0%, rgba(44, 59, 77, .35), rgba(44, 59, 77, 0) 100%); }
.form-1-1 input:hover, .form-1-1 select:hover, .form-1-1 textarea:hover { border-bottom-color: rgba(238, 233, 223, .55); }
.form-1-1 input:focus-visible, .form-1-1 select:focus-visible, .form-1-1 textarea:focus-visible { outline: none; border-bottom-color: var(--cam);
  background: radial-gradient(80% 120% at 0% 100%, rgba(255, 177, 98, .08), rgba(255, 177, 98, 0) 70%); }
.form-1-1 fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0; }
.form-1-1 legend { font-weight: 600; margin-bottom: 8px; }
.chon-loai { display: flex !important; grid-template-columns: none; flex-direction: row; gap: 14px; align-items: flex-start; padding: 16px 6px;
  border-bottom: 1px solid rgba(238, 233, 223, .12); cursor: pointer; }
.chon-loai input { width: auto; margin-top: 5px; accent-color: var(--kem); }
.chon-loai span { display: grid; gap: 4px; font-weight: 500; }
.chon-loai span span { color: var(--yen); font-size: 14.5px; font-weight: 400; }
.chon-loai:hover { background: radial-gradient(80% 120% at 0% 50%, rgba(238, 233, 223, .06), rgba(238, 233, 223, 0) 70%); }
.chon-loai:has(input:checked) { border-bottom-color: var(--kem); background: radial-gradient(80% 120% at 0% 50%, rgba(238, 233, 223, .12), rgba(238, 233, 223, 0) 70%); }
.chon-loai:has(input:checked) > span > span:first-child { color: var(--kem); }
.hai-o { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; }
@media (max-width: 560px) { .hai-o { grid-template-columns: 1fr; } }
.bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-1-1 .nut { justify-self: start; min-width: 200px; border: 0; cursor: pointer; }
.form-1-1 .nut:disabled { opacity: .6; cursor: wait; }
.form-bao { margin: 0; min-height: 1.5em; color: var(--yen); }
.form-loi { color: var(--kem); border-left: 3px solid var(--nau); padding-left: 12px; }
.da-gui { position: relative; padding: 20px 0 8px 18px; border-left: 2px solid var(--kem);
  background: radial-gradient(ellipse 80% 100% at 0% 50%, rgba(238, 233, 223, .10), rgba(238, 233, 223, 0) 100%); }
.da-gui p { margin: 0 0 8px; }

/* ── Trang lỗi ── */
.dau-trang-con.loi { min-height: 60vh; display: flex; align-items: center; }


/* ══ Gói b5 (H15): khung trang con, breadcrumb, đầu khối, các trang mới ══ */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 22px; font: 400 13px/1.4 var(--mono); color: var(--yen); }
.crumb a { color: var(--yen); text-decoration: none; }
.crumb a:hover { color: var(--kem); }
.crumb [aria-current] { color: var(--kem); }
.dau-trang-con .eyebrow { margin-bottom: 18px; }
.dau-trang-con .lead { color: var(--yen); font-size: clamp(16px, 1.3vw, 19px); max-width: 62ch; margin-top: 22px; }
.dau-trang-con .lead p { margin: 0 0 10px; }
.dau-trang-con.co-anh .khung { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.dau-con-anh { margin: 0; }
.dau-con-anh img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
.dau-con-anh.tron img { border-radius: 50%; }
.dau-con-anh figcaption { text-align: center; }
@media (max-width: 860px) { .dau-trang-con.co-anh .khung { grid-template-columns: minmax(0, 1fr); } .dau-con-anh { max-width: 320px; } }
/* Đầu khối: eyebrow + H2 bên trái, đoạn dẫn bên phải (điện thoại: bên dưới). */
.dau-khoi-con { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px 64px; align-items: end; margin-bottom: 36px; }
.dau-khoi-con .eyebrow { margin-bottom: 16px; }
.dau-khoi-con h2 { margin-bottom: 0 !important; }
.dau-khoi-con .lead { color: var(--yen); font-size: clamp(16px, 1.3vw, 19px); }
.dau-khoi-con .lead p { margin: 0 0 10px; }
.dau-khoi-con:has(> div:only-child) { grid-template-columns: minmax(0, 1fr); }
/* Về ĐTV */
.dai-dinh-vi { padding: clamp(40px, 6vw, 72px) 0; }
.dai-dinh-vi .dinh-vi { margin: 0; max-width: 30ch; font-size: clamp(24px, 3vw, 40px); line-height: 1.25; font-weight: 600; letter-spacing: -.015em;
  padding-left: 22px; border-left: 2px solid rgba(238, 233, 223, .35); }
.tru dt { display: flex; flex-direction: column; gap: 6px; }
.tru dt .ico { margin-bottom: 4px; }
.tru dt .nhan-mono { margin: 0; }
.tru-ten { font-size: 1.2rem; font-weight: 600; }
.tru-goc dt { flex-direction: row; align-items: center; gap: 12px; }
.sau-tru { margin-top: 28px; color: var(--yen); }
.ds-vai-tro { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.vai { padding: 22px 12px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.vai strong { font-size: 1.25rem; }
.vai .nhan-mono { margin: 6px 0 0; }
.vai p { margin: 0; color: var(--yen); font-size: 15.5px; }
.vai-cuoi { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; color: var(--yen); }
.vai-cuoi p { margin: 0; }
@media (max-width: 1100px) { .ds-vai-tro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-dau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px 48px; align-items: end; }
.pp-dau .dau-khoi-con { margin-bottom: 0; grid-template-columns: minmax(0, 1fr); }
.pp-dau .anh-rong { margin: 0; max-width: none; }
.pp-lead { margin: 28px 0 0; }
@media (max-width: 860px) { .pp-dau { grid-template-columns: minmax(0, 1fr); } }
.vong-ten { flex-wrap: wrap; align-items: center; }
.vong-ten .o-ic { width: 40px; height: 40px; }
.vong-ten .vong-so { font: 500 12px var(--mono); color: var(--yen); letter-spacing: .1em; text-transform: uppercase; flex-basis: 100%; order: -1; }
/* Hành trình */
.ban-do-con { padding-bottom: 0; }
.lich-su li { align-items: flex-start; }
.ls-chu { flex: 1 1 320px; }
.ls-chu a { color: var(--kem); font-weight: 600; text-decoration: none; }
.ls-chu a:hover { color: #fff; }
.ls-chu p { margin: 4px 0 0; color: var(--yen); font-size: 15px; }
.ls-dot { color: var(--yen); font-size: 15px; }
/* Chương trình: bộ lọc và thẻ (không hộp, ảnh trang bán trong khung trình duyệt khi đang mở) */
.bo-loc { padding: 0 0 22px; border-bottom: 1px solid rgba(238, 233, 223, .12); }
.bo-loc-dau { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.bo-loc-dau .ico { width: 18px; height: 18px; }
.bo-loc-dau .nhan-mono { margin: 0; text-transform: none; letter-spacing: .04em; }
.loc a[aria-current] { background: var(--kem); color: var(--abyssal); border-color: var(--kem); }
.ds-ct { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 28px 28px; margin-top: 28px; }
.ds-ct li.ct-o { display: flex; flex-direction: column; gap: 0; padding: 0; border-top: 0; }
.ds-ct li.ct-o:hover { background: none; }
.ct-o .trinh { margin-bottom: 18px; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
.ct-o-than { position: relative; display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 8px 6px 0;
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(44, 59, 77, .5), rgba(44, 59, 77, 0) 100%); }
.ct-o-than::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--kem); opacity: .45; }
.ct-o.co-anh .ct-o-than::before { display: none; }
.ct-o-nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ct-o-nhan .nhan-mono { margin: 0; }
.ct-o h3 { font-size: 1.4rem; }
.ct-o h3 a { color: var(--kem); text-decoration: none; }
.ct-o h3 a:hover { color: #fff; }
.ct-o .ds-mo-ta { margin: 0; flex: 1; }
.ct-o-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 8px; }
.ct-dk .ct-o-than { border-left: 1.5px dashed rgba(238, 233, 223, .4); padding-left: 16px; }
.ct-dk .ct-o-than::before { display: none; }
.tt-co-dieu-kien { border-style: dashed; color: var(--yen); }
.nut.nhat { background: var(--kem); color: var(--abyssal); font-weight: 700; }
.nut.nhat:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(238, 233, 223, .6); }
.trong { padding: 28px 0; }
.trong p { margin: 0 0 8px; }
/* Hồ sơ: chương trình liên quan */
.ds-lq { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.lq { padding: 22px 12px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.lq strong { font-size: 1.25rem; }
.lq p { margin: 0; color: var(--yen); font-size: 15.5px; }
.lq .nhan-mono { margin: 0; }
/* Học viện */
#man-hoc .chu-thich { margin-top: 24px; }
.ds-co-gi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; }
.ds-co-gi li { padding: 22px 10px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.ds-co-gi .o-ic { margin-left: -10px; }
.ds-co-gi strong { font-size: 1.2rem; }
.ds-co-gi p { margin: 0; color: var(--yen); font-size: 15.5px; }
@media (max-width: 960px) { .ds-co-gi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ds-co-gi { grid-template-columns: minmax(0, 1fr); } }
.ba-buoc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; counter-reset: none; }
.ba-buoc li { border-top: 1px solid rgba(238, 233, 223, .14); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.buoc-so-to { font-size: 44px; line-height: 1; color: rgba(238, 233, 223, .2); }
.ba-buoc strong { font-size: 1.2rem; }
.ba-buoc p { margin: 0; color: var(--yen); font-size: 15.5px; }
@media (max-width: 760px) { .ba-buoc { grid-template-columns: minmax(0, 1fr); } }
/* Tài nguyên: ba cột */
.ds-tn.ba-cot { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px 32px; }
.the-tn { display: flex; flex-direction: column; gap: 8px; }
.the-tn .nut { align-self: flex-start; margin-top: auto; }
/* Sự kiện: dải tuần, ảnh tư liệu */
.dai-tuan { list-style: none; margin: 16px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.dai-tuan li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; font: 500 12px var(--mono); color: var(--yen);
  border-top: 1px solid rgba(238, 233, 223, .12); }
.dai-tuan li.co { color: var(--abyssal); background: var(--kem); border-radius: 12px; border-top-color: transparent; }
.luoi-anh-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.luoi-anh-tl img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; filter: saturate(.9); }
/* Đồng hành 1-1: hai cột */
.dh-luoi { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.dh-trai { position: sticky; top: 96px; }
.dh-tieu { font-size: clamp(24px, 2.6vw, 34px) !important; }
.hoi-nhanh { margin-top: 24px; color: var(--yen); }
.da-gui .hang-nut { margin-top: 16px; }
@media (max-width: 900px) { .dh-luoi { grid-template-columns: minmax(0, 1fr); } .dh-trai { position: static; } }
/* Cổng học viên: hộp trợ giúp chìm nền */
.tro-giup { margin-top: 32px; padding: 22px 12px 12px 0; display: grid; gap: 6px; max-width: 640px; }
.tro-giup strong { font-size: 1.15rem; }
.tro-giup p { margin: 0; color: var(--yen); }
.tro-giup-lh a { color: var(--kem); }
.xem-hv { margin-top: 22px; color: var(--yen); }
/* Bài viết: mục lục */
.muc-luc { margin-bottom: 18px; }
.muc-luc ol { margin: 6px 0 0; padding-left: 1.2em; color: var(--yen); font-size: 15px; }
@media (max-width: 640px) { .luoi-anh-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* H24 (23/10/2026, SEO Chuyên san theo mẫu go.noti.vn/blog): Tóm tắt nhanh, mục lục có neo, Hỏi đáp. Theo tiêu chuẩn mục 12:
   thẻ không đóng hộp (quầng sáng tan trước mép + vạch kem 32px ở góc trên), danh sách mở ngăn bằng đường tóc. Không thêm điểm cam. */
.tom-tat { position: relative; padding: 22px 0 6px 20px; margin-bottom: 28px;
  background: radial-gradient(ellipse 70% 90% at 0 0, rgba(238, 233, 223, .05), transparent 70%); }
.tom-tat::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 1px; background: var(--kem); }
.tom-tat ul { margin: 0; padding-left: 1.1em; font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.tom-tat li { margin-bottom: 6px; }
.tom-tat li::marker { color: var(--kem); }
.muc-luc ol a { color: var(--yen); text-decoration: none; display: inline-block; padding: 4px 0; min-height: 32px; }
.muc-luc ol a:hover, .muc-luc ol a:focus-visible { color: var(--kem); text-decoration: underline; text-underline-offset: 3px; }
.than-bai h2[id] { scroll-margin-top: 96px; }
.hoi-dap { padding-bottom: 40px; }
.hoi-dap h2 { font-size: 1.5rem; margin: 8px 0 12px; scroll-margin-top: 96px; }
.hoi-dap details { border-top: 1px solid rgba(238, 233, 223, .12); }
.hoi-dap details:last-child { border-bottom: 1px solid rgba(238, 233, 223, .12); }
.hoi-dap summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px; padding: 14px 0; font-weight: 600; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--yen); flex: none; }
.hoi-dap details[open] summary::after { content: "−"; }
.hoi-dap details p { margin: 0 0 18px; color: var(--yen); font-size: 17px; line-height: 1.75; text-wrap: pretty; }

/* ── H25 Chuyên đề tháng (emagazine) và vùng dẫn cuối bài ngày (dtv-core 0257) ──
   Bìa số nền tối hơn một bậc, tên số cỡ lớn, vế sau dấu phẩy là chữ nhấn Playfair cam (điểm cam duy nhất của bìa, tiêu chuẩn mục 2.6).
   Mỗi phần mở bằng nhãn "Phần 0x / N" và thước vị trí (kem), phần chẵn đổi nền --nen-sau để mắt biết đã sang phần mới. */
.than-bai blockquote { margin: 28px 0; padding-left: 22px; border-left: 2px solid var(--kem); }
.than-bai blockquote p { font-size: 1.15em; font-weight: 600; line-height: 1.45; margin: 0; }
.cd-bia { position: relative; overflow: hidden; min-height: min(86vh, 820px); display: flex; align-items: flex-end;
  padding-block: clamp(96px, 14vw, 180px) clamp(48px, 6vw, 88px); background: var(--nen-chan); border-bottom: 1px solid var(--vien); }
.cd-bia::before { content: ""; position: absolute; inset: 0; background: url(/anh/nen-duong-dong-muc.png) center/1500px auto repeat; opacity: .07; pointer-events: none; }
.cd-bia::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 70% at 88% 18%, rgba(255, 177, 98, .05), rgba(255, 177, 98, 0) 70%); pointer-events: none; }
.cd-bia .eyebrow { margin: 32px 0 24px; }
.cd-bia h1 { font-size: clamp(46px, 8.2vw, 124px); line-height: .98; letter-spacing: -.035em; font-weight: 800; max-width: 13ch; margin: 0 0 30px; text-wrap: balance; }
.cd-bia h1 .nhan { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; color: var(--cam); letter-spacing: -.01em; }
.cd-bia .lead { max-width: 62ch; color: var(--yen); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; margin: 0; text-wrap: pretty; }
.cd-bia .bai-meta { margin: 26px 0 0; }
.cd-bia .bai-meta span { white-space: nowrap; }
.cd-muc { padding-block: clamp(48px, 6vw, 84px) clamp(24px, 3vw, 40px); }
.cd-muc ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.cd-muc li { border-top: 1px solid var(--vien); }
.cd-muc a { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 18px 4px; min-height: 44px;
  color: var(--kem); text-decoration: none; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.3; }
.cd-muc .so { font: 400 clamp(22px, 2.2vw, 30px) var(--mono); color: var(--yen); }
.cd-muc a:hover .ten { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cd-mo { padding-block: 8px 24px; }
.cd-mo p { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.7; }
.cd-phan { padding-block: clamp(72px, 9vw, 128px) clamp(40px, 5vw, 64px); border-top: 1px solid var(--vien); }
.cd-phan-chan { background: var(--nen-sau); }
.cd-so { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0; font: 500 12.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--yen); }
.cd-thuoc { display: inline-flex; gap: 4px; }
.cd-thuoc i { display: block; width: 18px; height: 2px; background: rgba(238, 233, 223, .22); }
.cd-thuoc i.on { background: var(--kem); }
.cd-phan h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.02em; margin: 16px 0 clamp(28px, 4vw, 44px); text-wrap: balance; }
.cd-phan .than-bai { padding-bottom: 0; }
.cd-trich { margin: clamp(40px, 5vw, 60px) 0; }
.cd-trich blockquote { margin: 0; padding-left: 28px; border-left: 2px solid var(--kem); }
.cd-trich blockquote p { font-size: clamp(24px, 2.9vw, 38px); line-height: 1.24; font-weight: 600; letter-spacing: -.015em; color: var(--kem); margin: 0; text-wrap: balance; }
.cd-trich figcaption { margin-top: 14px; padding-left: 30px; font: 400 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--yen); }
@media (min-width: 1180px) { .cd-trich { margin-left: -110px; margin-right: -40px; } }
.cd-nghe { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--vien); }
.cd-nghe ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cd-nghe a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 44px; padding-block: 6px;
  color: var(--kem); text-decoration: none; font-size: 15.5px; line-height: 1.4; }
.cd-nghe a:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 4px; }
.cd-nghe .ngay { padding-left: 12px; font: 400 12.5px var(--mono); color: var(--yen); white-space: nowrap; }
.bai.cd .hoi-dap { padding-top: clamp(56px, 7vw, 96px); }
.vung-dan { padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--vien); }
.vung-dan .khung { display: grid; gap: 30px; }
.vd-cd, .vd-ct { position: relative; display: grid; gap: 8px; padding: 26px clamp(8px, 2vw, 24px) 14px 0;
  background: radial-gradient(ellipse 80% 70% at 0% 0%, rgba(44, 59, 77, .55), rgba(44, 59, 77, 0) 100%); }
.vd-cd::before, .vd-ct::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--kem); opacity: .75; }
.vd-cd { color: var(--kem); text-decoration: none; }
.vd-cd .nhan-mono, .vd-ct .nhan-mono { margin: 0; }
.vd-cd strong { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.vd-cd .vd-mo, .vd-ct p { color: var(--yen); }
.vd-cd .vd-di { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; min-height: 40px; }
.vd-cd:hover strong { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.vd-ct strong { font-size: 1.4rem; }
.vd-ct p { margin: 0; }
.vd-ct .trang-thai { justify-self: start; }
.cd-dai { background: var(--nen-chan); border-block: 1px solid var(--vien); }
.cd-dai h2 { font-size: clamp(40px, 6vw, 88px); line-height: 1; letter-spacing: -.03em; max-width: 14ch; margin: 18px 0 20px; text-wrap: balance; }
.cd-dai h2 a { color: var(--kem); text-decoration: none; }
.cd-dai h2 .nhan { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.cd-dai .dan { color: var(--yen); max-width: 62ch; font-size: clamp(16px, 1.3vw, 19px); margin: 0 0 24px; }
@media (max-width: 760px) {
  .cd-muc ol { grid-template-columns: minmax(0, 1fr); }
  .cd-bia { min-height: 0; }
  .cd-trich blockquote { padding-left: 18px; }
  .cd-trich figcaption { padding-left: 20px; }
  .cd-nghe a { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .cd-nghe .ngay { grid-column: 2; padding-left: 0; }
}

/* ── H26 Khối hình trong chuyên đề: con số anh Nam vẽ thành hình, biểu đồ tỷ lệ, sơ đồ bước, khung Bối cảnh (Ban biên tập, số liệu chính
   thức có nguồn), ảnh minh họa tràn khung, bảng kê nợ. Màu chỉ trong bảng sẵn có: nâu cho phần rủi ro, kem cho phần an toàn, không thêm cam. ── */
.cd-so-hinh { margin: clamp(36px, 5vw, 56px) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 48px); align-items: center; }
.cd-so-hinh ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cd-so-hinh .o .ico { width: 100%; height: auto; max-width: 56px; aspect-ratio: 1; display: block; margin: 0 auto; stroke-width: 1.5; }
.cd-so-hinh .o.chac .ico { color: var(--nau); stroke-width: 2.2; }
.cd-so-hinh .o.co-the .ico { color: var(--nau); opacity: .55; }
.cd-so-hinh .o.con .ico { color: var(--kem); opacity: .3; }
.cd-so-hinh .so { margin: 0; white-space: nowrap; font-size: clamp(38px, 4.4vw, 58px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.cd-so-hinh .nhan { margin: 12px 0 0; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.cd-so-hinh .nguon, .cd-ty-le .nguon { margin: 10px 0 0; font: 400 12.5px/1.5 var(--mono); color: var(--yen); }
.cd-ty-le { margin: clamp(36px, 5vw, 56px) 0; }
.cd-ty-le figcaption { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.cd-ty-le .chu-giai { display: flex; gap: 18px; margin: 0 0 14px; font: 400 13px var(--mono); color: var(--yen); }
.cd-ty-le .chu-giai span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.cd-ty-le .chu-giai .a::before { background: var(--nau); }
.cd-ty-le .chu-giai .b::before { background: var(--kem); }
.cd-ty-le .dong { margin-bottom: 14px; }
.cd-ty-le .ten { margin: 0 0 6px; font-size: 15.5px; }
.cd-ty-le .thanh { display: flex; gap: 2px; height: 34px; }
.cd-ty-le .thanh > span { display: flex; align-items: center; padding-inline: 10px; font: 500 13px var(--mono); min-width: 52px; }
.cd-ty-le .thanh .a { background: var(--nau); color: var(--kem); border-radius: 4px 0 0 4px; }
.cd-ty-le .thanh .b { background: var(--kem); color: var(--abyssal); border-radius: 0 4px 4px 0; justify-content: flex-end; }
.cd-buoc { margin: clamp(36px, 5vw, 56px) 0; }
.cd-buoc figcaption { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }
.cd-buoc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; counter-reset: b; }
.cd-buoc li { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 18px 18px 0; border-top: 2px solid rgba(238, 233, 223, .22); }
.cd-buoc li:first-child { border-top-color: var(--kem); }
.cd-buoc .so { font: 400 26px var(--mono); color: var(--yen); }
.cd-buoc strong { font-size: 17px; line-height: 1.3; }
.cd-buoc .giai { color: var(--yen); font-size: 15px; line-height: 1.5; }
.cd-boi-canh { margin: clamp(40px, 5vw, 64px) 0; padding: clamp(22px, 3vw, 32px); background: var(--xanh); border-radius: 18px; border-left: 3px solid var(--yen); }
.cd-boi-canh .nhan-mono { margin: 0 0 8px; color: var(--yen); }
.cd-boi-canh h3 { margin: 0 0 18px; font-size: 1.3rem; line-height: 1.3; }
.cd-boi-canh ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 28px; }
.cd-boi-canh .so { margin: 0; overflow-wrap: normal; word-break: normal; hyphens: none; font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.cd-boi-canh .giai { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; }
.cd-boi-canh .nguon { margin: 8px 0 0; font: 400 12.5px/1.5 var(--mono); color: var(--yen); }
.cd-boi-canh .nguon a { color: var(--yen); text-underline-offset: 3px; }
.cd-boi-canh .ghi-chu { margin: 20px 0 0; font: 400 12.5px/1.5 var(--mono); color: var(--yen); }
.cd-anh { margin: clamp(40px, 6vw, 72px) calc(50% - min(50vw, 600px)); }
.cd-anh img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; border-radius: clamp(0px, 2vw, 20px); background: var(--nen-sau); }
.cd-anh figcaption { margin-top: 10px; padding-inline: 16px; font: 400 12px/1.5 var(--mono); color: var(--yen); text-align: right; }
.cd-ke-no { margin: clamp(40px, 5vw, 64px) 0; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--vien); border-radius: 18px; background: var(--nen-sau); }
.cd-ke-no .nhan-mono { margin: 0 0 6px; }
.cd-ke-no .giai { margin: 0 0 16px; color: var(--yen); font-size: 15px; }
.cd-ke-no table { width: 100%; border-collapse: collapse; }
.cd-ke-no th { text-align: left; font: 400 12.5px var(--mono); color: var(--yen); padding: 0 8px 8px 0; }
.cd-ke-no td { padding: 0 8px 8px 0; }
.cd-ke-no input { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(238, 233, 223, .22); background: var(--abyssal); color: var(--kem); font: inherit; font-size: 16px; }
.cd-ke-no input:focus { outline: none; border-color: var(--cam); }
.cd-ke-no .hang-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.cd-ke-no .ket-qua { margin: 16px 0 0; padding-left: 1.3em; }
.cd-ke-no .ket-qua:empty { display: none; }
.cd-ke-no .ket-qua li { margin-bottom: 6px; }
.cd-ke-no .ket-qua .lai-cao { color: var(--kem); text-decoration: underline wavy var(--nau); text-underline-offset: 5px; }
.cd-ke-no .ket-qua .tong, .cd-ke-no .ket-qua .loi { list-style: none; margin-left: -1.3em; font: 400 13px var(--mono); color: var(--yen); }
.cd-nghe img { width: 45px; height: 80px; object-fit: cover; border-radius: 6px; flex: none; }
.cd-nghe a:has(img) { grid-template-columns: 45px auto minmax(0, 1fr) auto; }
@media (max-width: 760px) {
  .cd-so-hinh { grid-template-columns: minmax(0, 1fr); }
  .cd-ke-no th:nth-child(3), .cd-ke-no td:nth-child(3) { width: 26%; }
  .cd-nghe a:has(img) { grid-template-columns: 45px auto minmax(0, 1fr); }
}
@media (max-width: 760px) { .cd-nghe a:has(img) .ngay { grid-column: 3; } }
.mien-tru { margin: 8px 0 0; font: 400 12.5px/1.6 var(--mono); color: var(--yen); }