/* Khối trình bày bài học chuỗi "Học AI" — HVSC Edu. Tiền tố hai- (không đụng hv- của theme). */
.hai-box{border-radius:14px;padding:4px 18px 8px;margin:20px 0;border:1px solid #e3e8f0;background:#f8fafc}
.hai-box>.hai-t{font-weight:700;margin:12px 0 4px!important;font-size:16px}
.hai-box.tip{background:#ecfdf5;border-color:#a7f3d0}.hai-box.tip>.hai-t::before{content:"💡 "}
.hai-box.warn{background:#fffbeb;border-color:#fcd34d}.hai-box.warn>.hai-t::before{content:"⚠️ "}
.hai-box.try{background:#eff6ff;border-color:#bfdbfe}.hai-box.try>.hai-t::before{content:"🛠️ "}
.hai-box.key{background:#fff1f2;border-color:#fecdd3}.hai-box.key>.hai-t::before{content:"📌 "}
.hai-box.vi-du{background:#f5f3ff;border-color:#ddd6fe}.hai-box.vi-du>.hai-t::before{content:"🇻🇳 "}
.hai-box pre{margin:8px 0}
.hai-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:20px 0;counter-reset:hs}
.hai-step{counter-increment:hs;background:#fff;border:1px solid #e3e8f0;border-radius:14px;padding:14px;box-shadow:0 1px 2px rgba(22,32,63,.05),0 6px 16px rgba(22,32,63,.06);position:relative}
.hai-step::before{content:counter(hs);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#E31E24,#ff6d00);color:#fff;font-weight:800;margin-bottom:8px}
.hai-step b{display:block;font-size:15px;color:var(--ink,#16203f);margin-bottom:4px}.hai-step span{display:block;font-size:14px;color:var(--ink2,#475569);line-height:1.55}
.hai-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.hai-compare>div{border-radius:14px;padding:4px 16px 8px;border:1px solid #e3e8f0}
.hai-compare>div:first-child{background:#f8fafc}.hai-compare>div:last-child{background:#ecfdf5;border-color:#a7f3d0}
.hai-compare .hai-t{font-weight:700;margin:12px 0 4px!important}
.hai-terms{margin:18px 0;border:1px solid #e3e8f0;border-radius:14px;overflow:hidden}
.hai-terms dt{font-weight:700;padding:10px 16px 0;color:var(--ink,#16203f)}.hai-terms dd{margin:0;padding:2px 16px 10px;color:var(--ink2,#475569);border-bottom:1px solid #eef2f7}
.hai-terms dd:last-child{border-bottom:0}
.hai-lesson pre,.tutor-lesson-wrapper pre{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:12px;overflow-x:auto;font-size:14px;line-height:1.6;white-space:pre-wrap}
.hai-lesson table,.hai-tbl table{border-collapse:collapse;width:100%;font-size:15px}
.hai-tbl{overflow-x:auto;margin:18px 0;border:1px solid #e3e8f0;border-radius:12px}
.hai-tbl th,.hai-tbl td{padding:10px 12px;border-bottom:1px solid #e3e8f0;text-align:left;vertical-align:top}
.hai-tbl th{background:#f1f5f9}
.hai-src{font-size:13px;color:var(--mute,#64748b);border-top:1px solid #e3e8f0;padding-top:12px;margin-top:28px}
@media (max-width:640px){.hai-compare{grid-template-columns:1fr}}

/* ===== chế độ tập trung trong bài học ===== */
body.hai-focus:not(.hai-chrome) .hv-hd,body.hai-focus:not(.hai-chrome) header#masthead,body.hai-focus:not(.hai-chrome) .ehf-header #masthead,
body.hai-focus:not(.hai-chrome) .hv-ft,body.hai-focus:not(.hai-chrome) footer#colophon,body.hai-focus:not(.hai-chrome) .footer-width-fixer{display:none!important}
.hai-chrome-btn{position:fixed;left:14px;bottom:14px;z-index:60;width:40px;height:40px;border-radius:50%;border:1px solid var(--line,#e2e8f0);background:var(--surf,#fff);color:var(--ink,#16203f);box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;font-size:17px;opacity:.75;transition:opacity .2s}
.hai-chrome-btn:hover,.hai-chrome-btn:focus-visible{opacity:1}
body.hai-chrome .hai-chrome-btn{background:var(--ink,#16203f);color:var(--surf,#fff)}
/* ===== đầu bài ===== */
.hai-top{margin:0 0 22px}
.hai-hero{margin:0 0 14px;border-radius:18px;overflow:hidden;background:var(--surf2,#eef2f8)}
.hai-hero img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border:0!important;margin:0!important;border-radius:0!important}
.hai-hero figcaption{font-size:12px;color:var(--mute,#55607a);padding:6px 12px;text-align:right}
.hai-kw{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.hai-kw span{font-size:13.5px;font-weight:600;padding:4px 12px;border-radius:99px;background:var(--surf2,#eef2f8);color:var(--ink2,#2a3557);border:1px solid var(--line,#e2e8f0)}
.hai-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border:1px solid var(--line,#e2e8f0);border-radius:16px;background:var(--surf,#fff);position:sticky;top:8px;z-index:5;box-shadow:0 4px 14px rgba(22,32,63,.06)}
.hai-b{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line2,#d5dce8);background:var(--surf,#fff);color:var(--ink,#16203f);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.hai-b:hover{border-color:var(--ink,#16203f)}.hai-b.pri{background:#E31E24;border-color:#E31E24;color:#fff}
.hai-b select{font:inherit;border:0;background:transparent;color:inherit;cursor:pointer}
.hai-b.sp{font-weight:500}
.hai-sum{margin:14px 0 0;padding:6px 18px 10px;border-radius:16px;border:1px solid color-mix(in srgb,#E31E24 30%,var(--line,#e2e8f0));background:color-mix(in srgb,#E31E24 6%,var(--surf,#fff))}
.hai-sum .hai-t::before{content:"📝 "}
.hai-sum li{margin:4px 0}
.hai-reading{background:color-mix(in srgb,#ffd166 35%,transparent);border-radius:6px;box-shadow:0 0 0 4px color-mix(in srgb,#ffd166 35%,transparent);transition:background .2s}
/* ===== quiz sau bài ===== */
.hai-quiz{margin:34px 0 10px;padding:8px 20px 18px;border-radius:18px;border:2px solid color-mix(in srgb,#f59e0b 45%,var(--line,#e2e8f0));background:color-mix(in srgb,#f59e0b 6%,var(--surf,#fff))}
.hai-quiz .hai-t{font-size:18px}
.hai-qs{color:var(--mute,#55607a);margin:0 0 6px}
.hai-q{padding:10px 0;border-top:1px solid var(--line,#e2e8f0)}
.hai-q p{margin:6px 0}
.hai-q button{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line2,#d5dce8);background:var(--surf,#fff);color:var(--ink,#16203f);font:inherit;font-size:15.5px;cursor:pointer}
.hai-q button:hover:not(:disabled){border-color:var(--ink,#16203f)}
.hai-q button.ok{background:color-mix(in srgb,#16a34a 16%,var(--surf,#fff));border-color:#16a34a}
.hai-q button.no{background:color-mix(in srgb,#dc2626 14%,var(--surf,#fff));border-color:#dc2626}
.hai-q button:disabled{cursor:default}
.hai-why{font-size:15px;padding:8px 12px;border-radius:10px;background:var(--surf2,#eef2f8);color:var(--ink,#16203f)}
/* ===== hộp giọng ===== */
.hai-gd{position:fixed;inset:0;z-index:100;background:rgba(8,12,28,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.hai-gb{background:var(--surf,#fff);color:var(--ink,#16203f);max-width:520px;width:100%;border-radius:20px;padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-size:16px;line-height:1.6}
.hai-gb .hai-t{font-size:18px;margin:0 0 6px!important}.hai-gb .meta{color:var(--mute,#55607a);font-size:14px}.hai-gb .ok{color:#15803d;font-weight:600}.hai-gb .warn{color:#b45309}
.hai-pb{height:10px;border-radius:99px;background:var(--line,#e2e8f0);overflow:hidden;margin:12px 0 4px}.hai-pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#E31E24,#ff6d00);transition:width .2s}
.hai-gbt{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.hai-gbt button{min-height:44px;padding:0 16px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;border:1.5px solid var(--line2,#d5dce8);background:var(--surf,#fff);color:var(--ink,#16203f)}
.hai-gbt button.pri{background:#E31E24;border-color:#E31E24;color:#fff}.hai-gbt button:disabled{opacity:.6}
/* ===== học thử ===== */
.hai-free{margin:0 0 18px;padding:14px 18px;border-radius:14px;background:color-mix(in srgb,#16a34a 9%,var(--surf,#fff));border:1px solid color-mix(in srgb,#16a34a 40%,var(--line,#e2e8f0));color:var(--ink,#16203f);font-size:15.5px;line-height:1.6}
.hai-free a{font-weight:700}
@media(max-width:640px){.hai-bar{top:4px;padding:8px;gap:6px}.hai-b{min-height:38px;padding:0 10px;font-size:14px}.hai-hero img{aspect-ratio:16/9}}
/* ===== tối: màu chữ + nền theo token (html[data-theme]) ===== */
.hai-box,.hai-compare>div,.hai-terms dd,.hai-tbl td{color:var(--ink,#16203f)}
.hai-box strong,.hai-terms strong,.hai-step strong,.hai-compare strong{color:inherit}
html[data-theme=dark] .hai-box,html[data-theme=dark] .hai-step,html[data-theme=dark] .hai-compare>div,html[data-theme=dark] .hai-terms,html[data-theme=dark] .hai-tbl th{background:var(--surf2,#18223a);border-color:var(--line,#25304a);color:var(--ink,#e8edf7)}
html[data-theme=dark] .hai-box.tip,html[data-theme=dark] .hai-compare>div:last-child{background:color-mix(in srgb,#16a34a 16%,var(--surf,#121a2e));border-color:color-mix(in srgb,#16a34a 45%,var(--line,#25304a))}
html[data-theme=dark] .hai-box.warn{background:color-mix(in srgb,#f59e0b 16%,var(--surf,#121a2e));border-color:color-mix(in srgb,#f59e0b 45%,var(--line,#25304a))}
html[data-theme=dark] .hai-box.try{background:color-mix(in srgb,#3b82f6 16%,var(--surf,#121a2e));border-color:color-mix(in srgb,#3b82f6 45%,var(--line,#25304a))}
html[data-theme=dark] .hai-box.key{background:color-mix(in srgb,#E31E24 16%,var(--surf,#121a2e));border-color:color-mix(in srgb,#E31E24 45%,var(--line,#25304a))}
html[data-theme=dark] .hai-box.vi-du{background:color-mix(in srgb,#8b5cf6 16%,var(--surf,#121a2e));border-color:color-mix(in srgb,#8b5cf6 45%,var(--line,#25304a))}
html[data-theme=dark] .hai-terms dd{border-color:var(--line,#25304a)}
html[data-theme=dark] .hai-tbl,html[data-theme=dark] .hai-tbl th,html[data-theme=dark] .hai-tbl td{border-color:var(--line,#25304a)}