/* hoclieu.css — trang Học liệu (bài học kiểu mới). Ưu tiên dễ đọc: chữ lớn, dòng thưa, mỗi khối một ý, màu tiết chế.
   Màu mang nghĩa, dùng giống nhau ở chữ, hình và biểu đồ:
     --a  phần đến từ ACID (xanh dương)      --r  phần đến từ ALCOHOL (cam)
     --g  nhóm ester –COO– / chất ester (xanh lá, cũng là màu môn Hoá)
     --d  liên kết C=C, gốc không no (tím)   --x  bẫy, sai (đỏ)      --na thuốc thử NaOH, H₂ (xám)
   Phẳng như phần Hỏi AI của app: nền --card, viền trong 1px, không bóng đổ. Tối theo máy, hoặc theo app (data-theme). */
body.hl {
  --a: #2563eb; --a-f: #3b82f6; --r: #c2560c; --r-f: #f97316; --g: #0b8a5c; --g-f: #1fbf86; --d: #7c3aed; --d-f: #8b5cf6;
  --x: #d4351c; --ok: #13894f; --warn: #a15c07; --na: #6b7280;
  --hl-bg: #f4f4f7; --hl-card: #fff; --hl-soft: #f4f5f8; --hl-line: rgba(0, 0, 0, 0.08); --hl-ink: #1c1c1e; --hl-ink2: #55555c;
  --pri: #ee8159; --pri-2: #e06d43;
  --ez: cubic-bezier(0.32, 0.72, 0, 1);
  --f-blue: #3b82f6; --f-violet: #8b5cf6; --f-green: #10b981; --f-amber: #d97706; --f-rose: #f43f5e; --f-sky: #0ea5e9; --f-orange: #fb923c;
  --k-blue: #1d4ed8; --k-violet: #6d28d9; --k-green: #047857; --k-amber: #a35200; --k-rose: #be123c; --k-sky: #0369a1; --k-orange: #c2410c;
  background: var(--hl-bg); color: var(--hl-ink); font-size: 17.5px; line-height: 1.65;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.hl {
    --a: #7aa7ff; --a-f: #5b8cff; --r: #ffa25e; --r-f: #ff8c3a; --g: #3fd29a; --g-f: #2fbf86; --d: #b69cff; --d-f: #9f7aff;
    --x: #ff7b6b; --ok: #3fd29a; --warn: #f3b94f; --na: #a1a1aa;
    --hl-bg: #000; --hl-card: #1c1c1e; --hl-soft: #26262a; --hl-line: rgba(255, 255, 255, 0.1); --hl-ink: #f2f2f5; --hl-ink2: #b4b4bb;
    --k-blue: #8fb4ff; --k-violet: #c4b1ff; --k-green: #5fe0ad; --k-amber: #ffc861; --k-rose: #ff8fa3; --k-sky: #7fd3fb; --k-orange: #ffad70;
  }
}
:root[data-theme="dark"] body.hl {
  --a: #7aa7ff; --a-f: #5b8cff; --r: #ffa25e; --r-f: #ff8c3a; --g: #3fd29a; --g-f: #2fbf86; --d: #b69cff; --d-f: #9f7aff;
  --x: #ff7b6b; --ok: #3fd29a; --warn: #f3b94f; --na: #a1a1aa;
  --hl-bg: #000; --hl-card: #1c1c1e; --hl-soft: #26262a; --hl-line: rgba(255, 255, 255, 0.1); --hl-ink: #f2f2f5; --hl-ink2: #b4b4bb;
  --k-blue: #8fb4ff; --k-violet: #c4b1ff; --k-green: #5fe0ad; --k-amber: #ffc861; --k-rose: #ff8fa3; --k-sky: #7fd3fb; --k-orange: #ffad70;
}
/* Mỗi mục một màu: số mục, chấm Điểm chính, nút Làm câu hỏi phần này, nhóm câu tương ứng trong Tự luyện */
.mh-1 { --mh: var(--f-blue); --mh-k: var(--k-blue); } .mh-2 { --mh: var(--f-violet); --mh-k: var(--k-violet); }
.mh-3 { --mh: var(--f-green); --mh-k: var(--k-green); } .mh-4 { --mh: var(--f-amber); --mh-k: var(--k-amber); }
.mh-5 { --mh: var(--f-rose); --mh-k: var(--k-rose); } .mh-6 { --mh: var(--f-sky); --mh-k: var(--k-sky); }
html:has(body.hl) { scroll-behavior: smooth; }
/* Phần tử có thuộc tính hidden luôn ẩn (display của nút, hàng, tab… không được đè lên) */
body.hl [hidden] { display: none !important; }
body.hl .top { background: color-mix(in srgb, var(--hl-bg) 84%, transparent); }

/* ---------- khung trang: chữ ở cột 780px cho dễ đọc, khối hình rộng hơn trên máy tính ---------- */
.hl-main { max-width: 1080px; margin: 0 auto; padding: 10px 20px 56px; overflow-x: clip; }
body.hl .hl-main > * { max-width: 780px; margin-left: auto; margin-right: auto; }
body.hl .hl-main > .hl-vis, body.hl .hl-main > .hl-nav { max-width: 1040px; }
body.hl .hl-main > .crumb { margin-top: 6px; margin-bottom: 4px; }
.hl-main section[id], .hl-ly-g { scroll-margin-top: 128px; }
.nhung .hl-main section[id], .nhung .hl-ly-g { scroll-margin-top: 70px; }
.hl b, .hl strong { font-weight: 650; }
.hl-i { width: 20px; height: 20px; flex: none; }

/* màu chữ theo nghĩa */
.c-a { color: var(--a); font-weight: 600; }
.c-r { color: var(--r); font-weight: 600; }
.c-g { color: var(--g); font-weight: 600; }
.c-d { color: var(--d); font-weight: 600; }
.c-x { color: var(--x); font-weight: 600; }

/* ---------- đầu bài ---------- */
.hl-hero { padding: 18px 2px 8px; }
.hl-kick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15.5px; font-weight: 600; color: var(--g); }
.hl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g-f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-f) 22%, transparent); }
.hl-hero h1 { margin: 0 0 12px; font-size: 40px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 750; color: var(--hl-ink); }
.hl-so { display: block; margin: 0 0 4px; font-size: 17px; letter-spacing: 0; font-weight: 650; color: var(--hl-ink2); }
.hl-lead { margin: 0 0 16px; font-size: 19px; line-height: 1.6; color: var(--hl-ink2); }
.hl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--hl-card); box-shadow: inset 0 0 0 1px var(--hl-line); font-size: 15px; font-weight: 600; color: var(--hl-ink); }
.hl-tag.hot { background: color-mix(in srgb, #f5b400 16%, var(--hl-card)); box-shadow: none; color: color-mix(in srgb, #8a5a00 100%, var(--hl-ink) 0%); }
:root[data-theme="dark"] .hl-tag.hot { color: #ffd166; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl-tag.hot { color: #ffd166; } }
.hl-tag .hl-i { width: 16px; height: 16px; }

/* ---------- thanh mục dính ---------- */
body.hl .mucs { margin: 14px auto 18px; background: color-mix(in srgb, var(--hl-bg) 86%, transparent); }
body.hl .mucs-in { padding: 8px 2px; gap: 8px; }
body.hl .mucs a { min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--hl-card); box-shadow: inset 0 0 0 1px var(--hl-line); color: var(--hl-ink); font-size: 15.5px; transition: background 0.3s var(--ez), color 0.3s var(--ez), box-shadow 0.3s var(--ez); }
body.hl .mucs a:hover { box-shadow: inset 0 0 0 1px var(--hl-line); background: var(--hl-soft); }
body.hl .mucs a.on { background: var(--hl-ink); color: var(--hl-card); box-shadow: none; }

/* ---------- thẻ ---------- */
.hl-card { --cp: 34px; background: var(--hl-card); border-radius: 28px; box-shadow: inset 0 0 0 1px var(--hl-line); padding: 30px var(--cp) 32px; margin-bottom: 20px; }
.hl-h { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 25px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; color: var(--hl-ink); }
.hl-h .hl-i { width: 26px; height: 26px; color: var(--g); }
.hl-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--g-f) 15%, transparent); color: var(--g); }
.hl-lab { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g); }

/* Tóm tắt 1 phút */
.hl-card.hl-nho { background: linear-gradient(135deg, color-mix(in srgb, var(--f-blue) 13%, var(--hl-card)), color-mix(in srgb, var(--f-violet) 11%, var(--hl-card))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f-blue) 18%, transparent); }
.hl-nho .hl-h .hl-i { color: var(--k-blue); }
.hl-nho .hl-n { background: var(--hl-card); color: var(--k-blue); box-shadow: 0 1px 4px color-mix(in srgb, var(--f-blue) 25%, transparent); }
.hl-nho-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hl-nho-l li { display: flex; gap: 14px; align-items: flex-start; }
.hl-nho-l p { margin: 2px 0 0; }
.hl-bay { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; padding: 14px 18px 14px 20px; border-radius: 16px; background: color-mix(in srgb, var(--f-rose) 10%, var(--hl-card)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--f-rose) 75%, transparent); }
.hl-bay .hl-i { color: var(--k-rose); margin-top: 3px; }
.hl-bay p { margin: 0; }
.hl-bay b { color: var(--k-rose); }

/* ---------- mục kiến thức ---------- */
.hl-sec-h { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.hl-num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--mh, var(--g-f)); color: #fff; font-size: 19px; font-weight: 750; box-shadow: 0 6px 14px -8px var(--mh, var(--g-f)); }
.hl-sec-h h2 { margin: 0; font-size: 25px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
.hl-can ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hl-can li { position: relative; padding-left: 22px; }
.hl-can li::before { content: ''; position: absolute; left: 3px; top: 0.68em; width: 8px; height: 8px; border-radius: 50%; background: var(--mh, var(--g-f)); }
.hl-can .hl-lab { color: var(--mh-k, var(--g)); }
.hl-can p { margin: 0; }

.hl-tbl { margin: 22px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hl-line); }
.hl-tbl table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.hl-tbl th { text-align: left; padding: 12px 16px; font-size: 14.5px; font-weight: 700; color: var(--hl-ink); background: color-mix(in srgb, var(--f-amber) 15%, var(--hl-card)); white-space: nowrap; }
.hl-tbl td { padding: 12px 16px; border-top: 1px solid var(--hl-line); }
.hl-td1 { font-weight: 650; }

/* biểu đồ nhiệt độ sôi */
.hl-soi { margin: 22px 0 0; padding: 18px 20px 8px; border-radius: 20px; background: var(--hl-soft); }
.hl-soi figcaption { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.hl-soi-g { margin: 0 0 14px; }
.hl-soi-m { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--hl-ink2); }
.hl-bar { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; min-height: 30px; }
.hl-bar-f { font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.hl-bar-r { display: flex; align-items: center; gap: 8px; }
.hl-bar-r i { display: block; height: 12px; width: var(--w); border-radius: 999px; background: var(--c); transform-origin: left; }
.hl-bar-r b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-bar.t-g { --c: var(--g-f); } .hl-bar.t-r { --c: var(--r-f); } .hl-bar.t-a { --c: var(--a-f); }
.hl-bar.t-g .hl-bar-f { color: var(--g); } .hl-bar.t-r .hl-bar-f { color: var(--r); } .hl-bar.t-a .hl-bar-f { color: var(--a); }

/* dạng bài */
.hl-dang { margin: 26px 0 0; padding: 24px 24px 22px; border-radius: 24px; background: color-mix(in srgb, var(--f-blue) 6%, var(--hl-card)); border: 2px dashed color-mix(in srgb, var(--f-blue) 40%, transparent); }
.hl-dang > .hl-lab { color: var(--k-blue); }
.hl-steps .hl-n { border-radius: 10px; background: var(--f-blue); color: #fff; }
.hl-dang h3 { margin: 0 0 16px; font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
.hl-steps, .hl-ms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hl-steps li, .hl-ms li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 0 0 12px; }
.hl-steps li:not(:last-child)::after { content: ''; position: absolute; left: 14.5px; top: 34px; bottom: 2px; width: 1.5px; border-radius: 2px; background: color-mix(in srgb, var(--f-blue) 30%, transparent); }
.hl-steps p, .hl-ms p { margin: 2px 0 0; }
.hl-dang .hl-bay { margin-top: 8px; }

/* làm mẫu: mở từng bước */
.hl-mau { margin: 18px 0 0; padding: 18px 18px 18px; border-radius: 22px; background: var(--hl-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.hl-mau .hl-lab { margin: 0; padding: 14px 18px 0; border-radius: 6px 20px 0 0; background: color-mix(in srgb, var(--f-orange) 18%, var(--hl-card)); color: var(--k-orange); }
.hl-de { margin: 0 0 16px; padding: 6px 18px 16px; border-radius: 0 0 20px 20px; background: color-mix(in srgb, var(--f-orange) 18%, var(--hl-card)); font-weight: 600; }
.hl-mau.js .hl-ms li:not(.on) { display: none; }
.hl-mau.js .hl-kq:not(.on) { display: none; }
.hl-ms .hl-n { background: var(--hl-card); color: var(--hl-ink); box-shadow: inset 0 0 0 1px var(--hl-line); }
.hl-kq { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--ok) 12%, var(--hl-card)); }
.hl-kq .hl-i { color: var(--ok); }
.hl-mau-c { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

/* ---------- nút ---------- */
.hl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--hl-card); box-shadow: inset 0 0 0 1px var(--hl-line); color: var(--hl-ink); font: inherit; font-size: 16px; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.35s var(--ez), background 0.25s var(--ez), opacity 0.25s; -webkit-tap-highlight-color: transparent; }
.hl-btn:hover { text-decoration: none; }
.hl-btn:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.1s; }
.hl-btn:disabled { opacity: 0.42; cursor: default; }
.hl-pri { background: var(--pri); box-shadow: none; color: #fff; }
.hl-pri:hover { background: var(--pri-2); }
.hl-soft-btn { background: var(--hl-soft); box-shadow: none; }
.hl-go { margin-top: 22px; background: color-mix(in srgb, var(--mh, var(--g-f)) 12%, var(--hl-card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mh, var(--g-f)) 45%, transparent); color: var(--mh-k, var(--g)); }
.hl-go .hl-i-r { width: 18px; height: 18px; }
.hl-busy { background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%); background-size: 200% 100%; animation: hl-shim 1.2s linear infinite !important; opacity: 1 !important; }
@keyframes hl-shim { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---------- Hoá học quanh ta ---------- */
.hl-quanh { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hl-qc { --c: var(--f-green); --ck: var(--k-green); padding: 20px 20px 18px; border-radius: 22px; background: color-mix(in srgb, var(--c) 11%, var(--hl-card)); }
.hl-qc:nth-child(4n + 2) { --c: var(--f-blue); --ck: var(--k-blue); }
.hl-qc:nth-child(4n + 3) { --c: var(--f-amber); --ck: var(--k-amber); }
.hl-qc:nth-child(4n + 4) { --c: var(--f-violet); --ck: var(--k-violet); }
.hl-qc .hl-i { width: 26px; height: 26px; color: var(--ck); }
.hl-qc h3 { margin: 10px 0 6px; font-size: 18px; font-weight: 700; color: var(--ck); }
.hl-qc p { margin: 0; font-size: 16.5px; }

/* ---------- Mẹo ---------- */
.hl-meo { display: grid; gap: 14px; }
.hl-meo-b { --c: var(--f-amber); --ck: var(--k-amber); padding: 20px 22px; border-radius: 22px; background: color-mix(in srgb, var(--c) 11%, var(--hl-card)); }
.hl-meo-b h3 { color: var(--ck); }
.hl-meo-b li::marker { color: var(--c); }
.hl-meo-b h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.hl-meo-b ul { margin: 0; padding: 0 0 0 20px; display: grid; gap: 8px; }
.hl-meo-b li p { margin: 0; }
.m-sai { --c: var(--f-rose); --ck: var(--k-rose); } .m-bt { --c: var(--f-green); --ck: var(--k-green); }

/* ---------- Luyện tập ---------- */
.hl-ly-bar { transition: top 0.38s var(--ez); position: sticky; top: calc(var(--tb, 57px) + 58px + env(safe-area-inset-top)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -10px 10px; padding: 8px 10px; border-radius: 20px; background: color-mix(in srgb, var(--hl-card) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nhung .hl-ly-bar { top: 58px; }
.hl-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hl-soft); overflow-x: auto; scrollbar-width: none; }
.hl-seg::-webkit-scrollbar { display: none; }
.hl-seg button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--hl-ink2); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; transition: background 0.3s var(--ez), color 0.3s var(--ez); }
.hl-seg button span { font-size: 13.5px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.hl-seg button.on { background: var(--hl-card); color: var(--hl-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.hl-score { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; }
.hl-score b { display: inline-block; font-size: 20px; color: var(--ok); font-variant-numeric: tabular-nums; }
.hl-pop { animation: hl-pop 0.5s var(--ez); }
@keyframes hl-pop { 40% { transform: scale(1.35); } }
.hl-ly-g { margin: 26px 0 0; border-radius: 22px; transition: box-shadow 0.6s var(--ez); }
.hl-ly-g[hidden] { display: none; }
.hl-ly-gh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0 0 6px; }
.hl-ly-gh h3 { position: relative; margin: 0; padding-left: 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.hl-ly-gh h3::before { content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 5px; border-radius: 3px; background: var(--mh, var(--hl-line)); }
.hl-ly-gh a { font-size: 15.5px; font-weight: 650; color: var(--mh-k, var(--k-blue)); }
.hl-flash { animation: hl-flash 1.6s var(--ez); }
@keyframes hl-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 20% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--g-f) 18%, transparent); } }

.hl-q { padding: 18px 0 20px; border-top: 1px solid var(--hl-line); }
.hl-ly-gh + .hl-q { border-top: 0; }
.hl-q[hidden] { display: none; }
.hl-qs { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.hl-qn { font-size: 15px; font-weight: 700; color: var(--hl-ink2); }
.hl-lv { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.lv-NB { background: color-mix(in srgb, var(--g-f) 15%, transparent); color: var(--g); }
.lv-TH { background: color-mix(in srgb, var(--a-f) 14%, transparent); color: var(--a); }
.lv-VD { background: color-mix(in srgb, var(--r-f) 15%, transparent); color: var(--r); }
.hl-qt { margin: 0 0 14px; font-weight: 550; }
.hl-opts { display: grid; gap: 10px; }
.hl-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 10px 16px 10px 12px; border: 0; border-radius: 18px; background: var(--hl-soft); color: var(--hl-ink); font: inherit; font-size: 16.5px; line-height: 1.45; text-align: left; cursor: pointer; transition: transform 0.35s var(--ez), background 0.25s var(--ez), box-shadow 0.25s var(--ez), opacity 0.25s; -webkit-tap-highlight-color: transparent; }
.hl-opt:active:not(:disabled) { transform: scale(0.985); transition-duration: 0.1s; }
.hl-opt:disabled { cursor: default; }
.hl-ok { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hl-card); box-shadow: inset 0 0 0 1px var(--hl-line); font-size: 15px; font-weight: 700; transition: background 0.25s, color 0.25s; }
.hl-opt.pick { box-shadow: inset 0 0 0 2px var(--hl-ink); }
.hl-opt.pick .hl-ok { background: var(--hl-ink); color: var(--hl-card); box-shadow: none; }
.hl-opt.ok { background: color-mix(in srgb, var(--ok) 14%, var(--hl-card)); box-shadow: inset 0 0 0 2px var(--ok); }
.hl-opt.ok .hl-ok { background: var(--ok); color: #fff; box-shadow: none; }
.hl-opt.bad { background: color-mix(in srgb, var(--x) 11%, var(--hl-card)); box-shadow: inset 0 0 0 2px var(--x); }
.hl-opt.bad .hl-ok { background: var(--x); color: #fff; box-shadow: none; }
.done .hl-opt:not(.ok):not(.bad):not(.pick) { opacity: 0.5; }
.hl-why { margin: 14px 0 0; padding: 14px 18px; border-radius: 18px; background: var(--hl-soft); }
.hl-why p { margin: 0; font-size: 16.5px; }
.hl-why .hl-why-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; }
.hl-why-h.ok { color: var(--ok); } .hl-why-h.bad { color: var(--x); }
.hl-why-h span { margin-left: auto; font-size: 15.5px; font-weight: 650; color: var(--hl-ink2); }
/* đúng / sai 4 ý */
.hl-tf { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.hl-tf li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--hl-soft); transition: background 0.25s, box-shadow 0.25s; }
.hl-tf-t { flex: 1 1 260px; }
.hl-ds { display: flex; gap: 6px; }
.hl-ds button { min-width: 64px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--hl-card); box-shadow: inset 0 0 0 1px var(--hl-line); color: var(--hl-ink); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; transition: background 0.25s var(--ez), color 0.25s, transform 0.3s var(--ez); }
.hl-ds button:active:not(:disabled) { transform: scale(0.95); }
.hl-ds button.on { background: var(--hl-ink); color: var(--hl-card); box-shadow: none; }
.hl-tf li.ok { box-shadow: inset 0 0 0 2px var(--ok); }
.hl-tf li.bad { box-shadow: inset 0 0 0 2px var(--x); }
.hl-tf li.bad .hl-ds button.key { box-shadow: inset 0 0 0 2px var(--ok); color: var(--ok); }
.hl-in { display: flex; gap: 10px; }
.hl-in input { flex: 1; min-width: 0; min-height: 50px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--hl-soft); box-shadow: inset 0 0 0 1px var(--hl-line); color: var(--hl-ink); font: inherit; font-size: 18px; font-weight: 600; }
.hl-in input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--hl-ink); }
.hl-in input.ok { box-shadow: inset 0 0 0 2px var(--ok); }
.hl-in input.bad { box-shadow: inset 0 0 0 2px var(--x); }
.hl-shake { animation: hl-shake 0.36s; }
@keyframes hl-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* dạng đề */
/* Đề mini: mỗi phần ghi đề thật có gì, bài này hay hỏi gì */
.hl-card.hl-de-s { background: linear-gradient(160deg, color-mix(in srgb, var(--f-violet) 14%, var(--hl-card)), color-mix(in srgb, var(--f-violet) 6%, var(--hl-card)) 60%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f-violet) 20%, transparent); }
.hl-de-s .hl-h .hl-i { color: var(--k-violet); }
.hl-de-s .hl-ly-gh h3::before { background: var(--f-violet); }
.hl-de-s .hl-q { margin: 0 0 12px; padding: 18px 18px 20px; border: 0; border-radius: 22px; background: var(--hl-card); }
.hl-de-s .hl-opt, .hl-de-s .hl-tf li, .hl-de-s .hl-in input, .hl-de-s .hl-why { background: color-mix(in srgb, var(--f-violet) 6%, var(--hl-card)); }
.hl-ph { display: grid; gap: 6px; margin: 0 0 12px; padding: 16px 20px; border-radius: 20px; background: color-mix(in srgb, var(--f-amber) 15%, var(--hl-card)); }
.hl-ph p { margin: 0; }
.hl-ph b { color: var(--k-amber); }

/* bài trước / sau */
.hl-ke { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.hl-ke a { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; margin: 0; color: var(--hl-ink); text-decoration: none; transition: transform 0.35s var(--ez); }
.hl-ke a:active { transform: scale(0.98); }
.hl-ke small { font-size: 14.5px; font-weight: 650; color: var(--hl-ink2); }
.hl-ke span { font-size: 17px; font-weight: 650; line-height: 1.35; }
.hl-ke-n { position: relative; padding-right: 48px !important; text-align: right; grid-column: 2; }
.hl-ke-n .hl-i { position: absolute; right: 18px; top: 50%; margin-top: -10px; color: var(--hl-ink2); }

/* =====================================================================
   NHÌN LÀ HIỂU
   ===================================================================== */
.hl-vis { margin-bottom: 20px; padding: 28px 30px 30px; border-radius: 30px; background: var(--hl-card); box-shadow: inset 0 0 0 1px var(--hl-line); }
.hl-vis-h { max-width: 720px; }
.hl-vis-h .hl-h { margin-bottom: 6px; }
.hl-vis-h p { margin: 0 0 20px; color: var(--hl-ink2); font-size: 17px; }
.hl-vg { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.hl-sc { position: sticky; top: calc(var(--tb, 57px) + 66px + env(safe-area-inset-top)); z-index: 2; transition: top 0.38s var(--ez); }
.nhung .hl-sc { top: 70px; }
.hl-stage { position: relative; aspect-ratio: 360 / 232; border-radius: 24px; background: var(--hl-soft); overflow: hidden; }
.hl-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ez), visibility 0s 0.35s; }
.hl-view.on { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ez), visibility 0s; }
.hl-view svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.hl-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hl-wait span { width: 9px; height: 9px; border-radius: 50%; background: var(--hl-ink2); opacity: 0.4; animation: hl-dots 1.1s infinite ease-in-out !important; }
.hl-wait span:nth-child(2) { animation-delay: 0.15s !important; } .hl-wait span:nth-child(3) { animation-delay: 0.3s !important; }
@keyframes hl-dots { 40% { opacity: 1; transform: translateY(-4px); } }
.hl-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; }
.hl-eq { margin: 12px 2px 0; font-size: 17px; font-weight: 600; line-height: 1.5; text-align: center; min-height: 26px; }
.hl-eq small { font-size: 15px; font-weight: 500; color: var(--hl-ink2); }
.hl-nojs { margin: 0; }

/* chữ và nét trong hình */
.hl-view text { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif; }
.hl-view .at { font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.hl-view .cap { font-size: 14.5px; font-weight: 650; fill: var(--hl-ink); }
.hl-view .cap2 { font-size: 13px; font-weight: 600; fill: var(--hl-ink2); }
.hl-view .big { font-size: 17px; font-weight: 700; }
.hl-view .fa { fill: var(--a); } .hl-view .fr { fill: var(--r); } .hl-view .fg { fill: var(--g); } .hl-view .fd { fill: var(--d); } .hl-view .fn { fill: var(--na); } .hl-view .fi { fill: var(--hl-ink); }
.hl-view .sa { stroke: var(--a-f); } .hl-view .sr { stroke: var(--r-f); } .hl-view .sg { stroke: var(--g-f); } .hl-view .sd { stroke: var(--d-f); } .hl-view .sn { stroke: var(--na); } .hl-view .si { stroke: var(--hl-ink); }
.hl-view .bd { fill: none; stroke-width: 2.6; stroke-linecap: round; }

.hl-view .dash { fill: none; stroke-width: 1.8; stroke-dasharray: 4 4; }
.hl-view .sel { fill: none; stroke: color-mix(in srgb, var(--hl-ink) 9%, transparent); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s var(--ez); }
.hl-view .hl-hit { fill: none; stroke: transparent; stroke-width: 26; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.hl-view .glass { fill: none; stroke: color-mix(in srgb, var(--hl-ink) 50%, transparent); stroke-width: 2.4; stroke-linejoin: round; }
.hl-view .bath { fill: color-mix(in srgb, #38a8e0 13%, transparent); stroke: color-mix(in srgb, #38a8e0 40%, transparent); stroke-width: 1.5; }
.hl-view .aq, .hl-view .mix { fill: color-mix(in srgb, #38a8e0 26%, var(--hl-card)); }
.hl-view .es { fill: color-mix(in srgb, var(--g-f) 42%, var(--hl-card)); }
.hl-view .bnd { stroke: color-mix(in srgb, var(--hl-ink) 35%, transparent); stroke-width: 1.2; }
.hl-view .bub { fill: none; stroke: color-mix(in srgb, #38a8e0 70%, transparent); stroke-width: 1.4; }
.hl-view .flame { fill: #ff9a3c; transition: opacity 0.4s var(--ez); }

/* bảng điều khiển */
.hl-pn { min-width: 0; }
.hl-pane-in[hidden] { display: none; }
.hl-pane-in > * + * { margin-top: 16px; }
.hl-tabs { position: relative; display: grid; grid-template-columns: repeat(var(--tn, 3), 1fr); gap: 0; margin: 0 0 18px; padding: 4px; border-radius: 999px; background: var(--hl-soft); }
.hl-tabs::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--tn, 3)); border-radius: 999px; background: var(--hl-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--hl-line); transform: translateX(calc(100% * var(--ti, 0))); transition: transform 0.5s var(--ez) !important; }
.hl-tabs button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--hl-ink2); font: inherit; font-size: 15.5px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: color 0.3s var(--ez); -webkit-tap-highlight-color: transparent; }
.hl-tabs button .hl-i { width: 18px; height: 18px; }
.hl-tabs button.on { color: var(--hl-ink); }
.hl-pane[hidden] { display: none; }
.hl-pane > * + * { margin-top: 16px; }

.hl-pick { display: flex; flex-direction: column; gap: 8px; }
.hl-pick-l { font-size: 15px; font-weight: 700; color: var(--hl-ink2); }
.hl-pick.t-a .hl-pick-l { color: var(--a); } .hl-pick.t-r .hl-pick-l { color: var(--r); } .hl-pick.t-d .hl-pick-l { color: var(--d); }
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--hl-soft); color: var(--hl-ink); font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.3s var(--ez), color 0.3s var(--ez), box-shadow 0.3s var(--ez), transform 0.35s var(--ez); -webkit-tap-highlight-color: transparent; }
.hl-chip::before { content: ''; position: absolute; inset: -2px; }
.hl-chip:active { transform: scale(0.95); transition-duration: 0.1s; }
.hl-chip.on { background: var(--hl-ink); color: var(--hl-card); }
.hl-pick.t-a .hl-chip.on { background: var(--a-f); color: #fff; }
.hl-pick.t-r .hl-chip.on { background: var(--r-f); color: #fff; }
.hl-pick.t-g .hl-chip.on { background: var(--g-f); color: #fff; }
.hl-chip[class*="dot-"]::after { content: ''; width: 8px; height: 8px; border-radius: 50%; order: -1; }
.hl-chip.dot-d::after { background: var(--d-f); } .hl-chip.dot-a::after { background: var(--a-f); }
.hl-chip.bay { color: var(--x); background: color-mix(in srgb, var(--x) 9%, var(--hl-card)); }
.hl-chip.bay.on { background: var(--x); color: #fff; }
.hl-pick.big .hl-chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hl-pick.grid .hl-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hl-pick.grid .hl-chip { justify-content: center; padding: 0 6px; font-size: 15.5px; }
.hl-pick.big .hl-chip { justify-content: center; min-height: 46px; padding: 6px 12px; font-size: 16px; line-height: 1.25; white-space: normal; text-align: center; }

.hl-sl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 15.5px; font-weight: 650; }
.hl-sl-h b { font-size: 17px; font-variant-numeric: tabular-nums; }
.hl-sl-r { display: flex; align-items: center; gap: 12px; }
.hl-play { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--pri); color: #fff; cursor: pointer; transition: transform 0.35s var(--ez), background 0.25s; -webkit-tap-highlight-color: transparent; }
.hl-play:active { transform: scale(0.92); transition-duration: 0.1s; }
.hl-play .hl-i { width: 22px; height: 22px; }
.hl-sl input { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.hl-sl input::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--hl-ink) var(--p), color-mix(in srgb, var(--hl-ink) 14%, transparent) var(--p)); }
.hl-sl input::-moz-range-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--hl-ink) 14%, transparent); }
.hl-sl input::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--hl-ink); }
.hl-sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.15); transition: transform 0.25s var(--ez); }
.hl-sl input:active::-webkit-slider-thumb { transform: scale(1.12); }
.hl-sl input::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.hl-sl input:focus-visible { outline: 2px solid var(--a-f); outline-offset: 2px; border-radius: 8px; }

.hl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hl-note { padding: 15px 18px; border-radius: 20px; background: var(--hl-soft); font-size: 16.5px; line-height: 1.6; transition: background 0.4s var(--ez); }
.hl-note p { margin: 0; }
.hl-note p + p { margin-top: 6px; }
.hl-note.dang { background: color-mix(in srgb, #f5b400 13%, var(--hl-card)); }
.hl-note.xong { background: color-mix(in srgb, var(--g-f) 13%, var(--hl-card)); }
.hl-note.bay { background: color-mix(in srgb, var(--x) 10%, var(--hl-card)); }
.hl-swap { animation: hl-swap 0.45s var(--ez) !important; }
@keyframes hl-swap { from { opacity: 0.25; transform: translateY(5px); } }
.hl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.hl-tiles.two { grid-template-columns: 1fr 1fr; }
.hl-tile { min-width: 0; padding: 10px 14px 11px; border-radius: 16px; background: var(--hl-soft); }
.hl-tile small { display: block; font-size: 14px; font-weight: 650; color: var(--hl-ink2); }
.hl-tile b { display: block; margin-top: 1px; font-size: 18px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hl-tick { animation: hl-tick 0.4s var(--ez) !important; }
@keyframes hl-tick { from { opacity: 0.2; transform: translateY(4px); } }
.hl-mini { padding: 14px 16px 10px; border-radius: 20px; background: var(--hl-soft); }
.hl-mini > p { margin: 0 0 8px; font-size: 15.5px; font-weight: 650; }
.hl-mini .hl-bar { grid-template-columns: 116px 1fr; }
.hl-mini .hl-bar-r i { transition: width 0.6s var(--ez); }
.hl-info { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: 16px; }
.hl-info b { font-weight: 650; }
.hl-stat { margin: 0; font-size: 16px; font-weight: 600; }
.hl-stat .ok { color: var(--ok); } .hl-stat .wait { color: var(--warn); }

/* thí nghiệm: bảng, đồ thị */
.hl-dt-t { overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hl-line); }
.hl-dt-t table { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.hl-dt-t th { padding: 9px 10px; background: var(--hl-soft); font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.hl-dt-t td { padding: 9px 10px; border-top: 1px solid var(--hl-line); text-align: right; white-space: nowrap; }
.hl-dt-t th:first-child, .hl-dt-t td:first-child { text-align: left; color: var(--hl-ink2); }
.hl-dt-t tr.cho td { color: var(--warn); }
.hl-dt-t tr.hl-new td { animation: hl-tick 0.45s var(--ez) !important; }
.hl-dt-e { margin: 0; padding: 12px 14px; font-size: 15.5px; color: var(--hl-ink2); }
.hl-chart { padding: 8px 6px 2px; border-radius: 18px; background: var(--hl-soft); }
.hl-chart svg { display: block; width: 100%; height: auto; }
.hl-chart text { font-family: inherit; font-size: 12.5px; fill: var(--hl-ink2); }
.hl-chart .lab { font-size: 13px; font-weight: 650; fill: var(--hl-ink); }
.hl-chart .grid { stroke: var(--hl-line); stroke-width: 1; }
.hl-chart .base { stroke: color-mix(in srgb, var(--hl-ink) 40%, transparent); stroke-width: 1.2; }
.hl-chart .ln { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hl-chart .ln.lt { stroke-dasharray: 6 6; stroke-width: 2.2; stroke: color-mix(in srgb, var(--hl-ink) 45%, transparent); }
.hl-chart .ln.a { stroke: var(--a-f); } .hl-chart .ln.n { stroke: var(--na); } .hl-chart .ln.g { stroke: var(--g-f); }
.hl-chart .dt { fill: var(--g-f); stroke: var(--hl-card); stroke-width: 2; }
.hl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 4px 4px; font-size: 14.5px; font-weight: 600; }
.hl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hl-legend i { width: 18px; height: 4px; border-radius: 4px; background: var(--c); }
.hl-ask { padding: 18px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--hl-line); }
.hl-ask-q { margin: 0 0 12px; font-weight: 650; }

/* Thử thách */
.hl-dt { display: block; }
.hl-dt-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.hl-dt-k { display: inline-flex; align-items: center; min-height: 30px; margin: 0; padding: 0 12px; border-radius: 999px; background: var(--hl-soft); font-size: 14.5px; font-weight: 700; }
.hl-dt-s { font-size: 15px; font-weight: 650; color: var(--ok); }
.hl-dt-q { margin: 0 0 14px; font-size: 17.5px; font-weight: 650; line-height: 1.5; }
.hl-dt .hl-row { margin-top: 14px; }
.hl-dt-big { margin: 10px 0 6px; font-size: 22px; font-weight: 700; }
.hl-dt-big b { color: var(--ok); }

/* hiện dần */
.hl-rise { animation: hl-rise 0.5s var(--ez) backwards !important; }
@keyframes hl-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- điện thoại / màn hẹp ---------- */
/* ---------- Khối bên trong thẻ tràn sát hai mép thẻ (khung không lọt thỏm trong thẻ trắng, điện thoại rộng chữ hơn);
   chữ bên trong vẫn thẳng hàng với chữ của thẻ nhờ lề ngang = --cp ---------- */
.hl-tbl, .hl-soi, .hl-dang, .hl-nho > .hl-bay, .hl-quanh, .hl-meo, .hl-de-s .hl-ph, .hl-de-s .hl-q { margin-left: calc(-1 * var(--cp)); margin-right: calc(-1 * var(--cp)); }
.hl-tbl th:first-child, .hl-tbl td:first-child { padding-left: var(--cp); }
.hl-tbl th:last-child, .hl-tbl td:last-child { padding-right: var(--cp); }
.hl-soi { padding-left: var(--cp); padding-right: var(--cp); }
.hl-nho > .hl-bay { padding-left: var(--cp); padding-right: var(--cp); }
.hl-dang { --ip: calc(var(--cp) - 2px); padding-left: var(--ip); padding-right: var(--ip); }
.hl-dang > .hl-bay, .hl-dang > .hl-mau { margin-left: calc(-1 * var(--ip)); margin-right: calc(-1 * var(--ip)); padding-left: var(--ip); padding-right: var(--ip); }
.hl-qc { padding-left: var(--cp); padding-right: var(--cp); }
.hl-meo-b { padding-left: var(--cp); padding-right: var(--cp); }
.hl-de-s .hl-ph, .hl-de-s .hl-q { padding-left: var(--cp); padding-right: var(--cp); }
/* Ví dụ: phần đề (nhãn + đề bài, nền cam) thành dải đầu thẻ, rộng hết thẻ */
.hl-dang > .hl-mau { padding-top: 0; overflow: hidden; }
.hl-mau .hl-lab, .hl-mau .hl-de { margin-left: calc(-1 * var(--ip)); margin-right: calc(-1 * var(--ip)); padding-left: var(--ip); padding-right: var(--ip); border-radius: 0; }
.hl-mau .hl-lab { padding-top: 16px; }
.hl-mau .hl-de { margin-bottom: 18px; }

@media (max-width: 900px) {
  .hl-vg { grid-template-columns: 1fr; gap: 16px; }
  .hl-sc { top: calc(var(--tb, 57px) + 56px + env(safe-area-inset-top)); margin: 0 -12px; padding: 6px 12px 10px; background: var(--hl-card); border-radius: 0 0 24px 24px; }
  .nhung .hl-sc { top: 56px; }
  .hl-eq { margin-top: 8px; font-size: 15.5px; line-height: 1.45; }
  .hl-pick.grid .hl-chips { grid-template-columns: 1fr 1fr; }
  .hl-pick.grid .hl-chip { font-size: 16px; }
  .hl-tiles.two { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body.hl { font-size: 17px; }
  .hl-main { padding: 4px 14px 44px; }
  .hl-hero { padding-top: 10px; }
  .hl-hero h1 { font-size: 32px; }
  .hl-lead { font-size: 17.5px; }
  .hl-card { --cp: 18px; padding: 22px var(--cp) 24px; border-radius: 24px; }
  .hl-vis { padding: 20px 14px 18px; border-radius: 26px; margin-left: -4px; margin-right: -4px; }
  .hl-vis-h { padding: 0 4px; }
  .hl-h, .hl-sec-h h2 { font-size: 22px; }
  .hl-num { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
  .hl-mau { margin-left: -6px; margin-right: -6px; padding: 18px 16px; }
  .hl-quanh { grid-template-columns: 1fr; }
  .hl-bar { grid-template-columns: 100px 1fr; }
  .hl-ke { grid-template-columns: 1fr; }
  .hl-ke-n { grid-column: auto; }
  .hl-stage { border-radius: 20px; }
  .hl-tabs button { font-size: 15px; gap: 5px; }
  .hl-tabs button .hl-i { display: none; }
  .hl-ly-bar { top: calc(var(--tb, 57px) + 56px + env(safe-area-inset-top)); margin: 0 -8px 10px; }
  .hl-score { font-size: 15px; }
}
@media print { .hl-vis, .hl-nav, .hl-ly, .hl-de-s { display: none; } .hl-mau.js .hl-ms li, .hl-mau.js .hl-kq { display: flex !important; } }
@media (max-width: 640px) {
  .hl-seg { width: 100%; }
  .hl-seg button { flex: 1 1 0; justify-content: center; padding: 0 6px; font-size: 14.5px; }
  .hl-seg button span { display: none; }
}

/* Ô quảng cáo Google chưa có quảng cáo để hiện: ẩn hẳn, không để khoảng trắng */
body.hl .qc:has(ins[data-ad-status="unfilled"]) { display: none; }