/* ═══════════════════════════════════════════════════════════════════════════
   ielts-skill.css — lớp dùng chung cho 4 trang KỸ NĂNG IELTS
   🚨 KHÔNG phải ielts-hub.css: tên đó đã thuộc về trang /ielts (namespace .ih-) từ 19/08
   (/ielts/listening · /ielts/reading · /ielts/writing · /ielts/speaking)

   🚨 Trước 23/09/2026 mỗi trang TỰ viết lại 42–50 luật `.il-*` trong <style>
   riêng — chung cái tên, không chung dòng code nào, nên ba trang trôi mỗi nơi
   một kiểu (reading thiếu line-clamp, band 13px vs 12.5px…). File này là bản
   HỢP NHẤT; sửa ở đây là cả bốn trang đổi theo.

   Gu đã chốt: token-only (0 hex, trừ SVG bìa do folder_cover sinh) · KHÔNG
   nhãn nhỏ VIẾT HOA · KHÔNG icon trang trí · một màu thương hiệu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Khung trang ─────────────────────────────────────────────────────────── */
.il {
    --il-night:   color-mix(in srgb, var(--color-primary-deep) 52%, black);
    --il-band:    color-mix(in srgb, var(--color-primary-deep) 88%, var(--color-ink));
    --il-mid:     color-mix(in srgb, var(--color-primary-deep) 78%, var(--color-primary-hover));
    --il-mint:    color-mix(in srgb, var(--color-primary) 45%, var(--color-on-dark));
    --il-on:      var(--color-on-dark);
    --il-on2:     color-mix(in srgb, var(--color-on-dark) 86%, transparent);
    --il-on3:     color-mix(in srgb, var(--color-on-dark) 70%, transparent);
    --il-glass:   color-mix(in srgb, var(--color-on-dark) 8%, transparent);
    --il-glass2:  color-mix(in srgb, var(--color-on-dark) 14%, transparent);
    --il-line-d:  color-mix(in srgb, var(--color-on-dark) 17%, transparent);

    max-width: var(--page-w, 1140px); margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
    font-family: var(--font-sans);
}
.il *, .il *::before, .il *::after { box-sizing: border-box; }
.il a { text-decoration: none; }
.il :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.il-hero :focus-visible { outline-color: var(--il-on); }

/* ── ① Dải tối đầu trang (khuôn lấy từ listening.php, đổi .lh- → .il-) ───── */
.il-hero {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 20px; color: var(--il-on);
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-6); align-items: start;
    padding: 22px 26px 66px;
    background:
        radial-gradient(55% 120% at 92% -20%, color-mix(in srgb, var(--color-primary) 50%, transparent), transparent 62%),
        radial-gradient(40% 90% at 4% 130%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
        linear-gradient(155deg, var(--il-mid), var(--il-band) 55%, var(--il-night));
}
.il-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .85;
    background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-on-dark) 13%, transparent) 1px, transparent 1.5px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(110deg, transparent 25%, black 80%);
            mask-image: linear-gradient(110deg, transparent 25%, black 80%);
}
/* .il-hero--flat: trang chưa có số liệu ⇒ dải một cột, không panel */
.il-hero--flat { grid-template-columns: minmax(0, 1fr); padding-bottom: 26px; }

.il-back { display: flex; width: max-content; align-items: center; gap: 7px; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--il-on3); }
.il-back:hover { color: var(--il-on); }
.il-back i { font-size: 11px; }

/* 🚨 KHÔNG text-transform:uppercase — chủ site đã bỏ nhãn eyebrow 23/09/2026 */
.il-kicker { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-bold); color: var(--il-mint); }
.il-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--il-mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--il-mint) 18%, transparent); }

.il-h1 { margin: 8px 0 0; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.12; font-weight: var(--fw-extrabold); letter-spacing: -.03em; color: var(--il-on); }
.il-lead { margin: 10px 0 0; max-width: 54ch; font-size: 14.5px; line-height: 1.6; color: var(--il-on2); }
.il-lead strong { color: var(--il-on); font-weight: var(--fw-bold); }

.il-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.il-chip { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--il-glass); border: 1px solid var(--il-line-d); font-size: 12px; font-weight: var(--fw-semibold); color: var(--il-on2); }
.il-chip b { color: var(--il-on); font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; }

/* ── ② Bảng tiến độ trong dải tối ────────────────────────────────────────── */
.il-panel { border-radius: 16px; border: 1px solid var(--il-line-d); background: linear-gradient(160deg, var(--il-glass2), var(--il-glass)); padding: 14px 16px 12px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-on-dark) 10%, transparent); }
.il-panel__k { font-size: 13px; font-weight: var(--fw-bold); color: var(--il-on2); }
.il-kpis { display: grid; grid-template-columns: repeat(var(--il-kpi-n, 4), minmax(0, 1fr)); margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--il-line-d); }
.il-kpi { padding: 9px 10px; min-width: 0; }
.il-kpi + .il-kpi { border-left: 1px solid var(--il-line-d); }
.il-kpi b { display: block; font-size: 22px; line-height: 1.15; font-weight: var(--fw-extrabold); letter-spacing: -.02em; color: var(--il-on); font-variant-numeric: tabular-nums; }
.il-kpi span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.35; color: var(--il-on3); }

.il-trend { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; margin-top: 12px; }
.il-trend__cap { font-size: 10.5px; color: var(--il-on3); margin-bottom: 3px; }
.il-trend__none { font-size: 12px; line-height: 1.45; color: var(--il-on3); padding: 10px 0 6px; }

.il-spark { display: block; width: 100%; height: 58px; color: var(--il-mint); }
.il-spark__grid { stroke: var(--il-line-d); stroke-dasharray: 2 4; }
.il-spark__lbl { font-size: 9px; fill: var(--il-on3); font-family: var(--font-sans); }
.il-spark__s0 { stop-color: currentColor; stop-opacity: .45; }
.il-spark__s1 { stop-color: currentColor; stop-opacity: 0; }
.il-spark__area { fill: url(#ilSparkArea); }
.il-spark__line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.il-spark__dot { fill: var(--il-on); }

.il-week__cap { font-size: 10.5px; color: var(--il-on3); margin-bottom: 4px; text-align: right; }
.il-week { display: grid; grid-template-columns: repeat(7, 18px); gap: 5px; }
.il-week i { height: 18px; border-radius: 5px; background: color-mix(in srgb, var(--color-on-dark) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-on-dark) 14%, transparent); }
.il-week i.is-on { background: var(--il-mint); border-color: var(--il-mint); }
.il-week i.is-today { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-on-dark) 55%, transparent); }
.il-week em { font-style: normal; font-size: 9.5px; font-weight: var(--fw-bold); color: var(--il-on3); text-align: center; }

.il-guest { display: grid; gap: 12px; padding: 8px 2px 4px; }
.il-guest p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--il-on2); }
.il-guest a { justify-self: start; height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 10px; background: var(--il-on); color: var(--color-primary-deep); font-size: 13.5px; font-weight: var(--fw-extrabold); }

/* ── ③ Thẻ "tiếp tục" nổi trên mép dải ───────────────────────────────────── */
.il-mission {
    display: flex; align-items: center; gap: var(--space-4);
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    border-radius: var(--radius-md); padding: 16px 20px; box-shadow: var(--shadow-md);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.il-mission--float { margin: -46px var(--space-4) 0; position: relative; z-index: 2; }
.il-mission:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); }
.il-mission__b { flex: 1; min-width: 0; }
.il-mission__chip { display: inline-flex; font-size: 12px; font-weight: var(--fw-bold); color: var(--color-primary-hover); background: var(--color-primary-soft); border-radius: var(--radius-pill); padding: 3px 10px; margin-bottom: 6px; }
.il-mission__t { font-size: 16px; font-weight: var(--fw-extrabold); color: var(--color-ink); margin: 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.il-mission__m { font-size: 12.5px; color: var(--color-muted); margin-top: 3px; }
.il-mission__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; background: var(--color-primary); color: var(--color-on-dark); font-size: 13.5px; font-weight: var(--fw-bold); padding: 0 20px; border-radius: var(--radius-sm); }
.il-mission__btn:hover { background: var(--color-primary-hover); }

/* ── ④ Khối & tiêu đề khu ────────────────────────────────────────────────── */
.il-block { margin-top: var(--space-8); }
.il-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
/* 🚨 tiêu đề khu là CHỮ THƯỜNG cỡ đọc được, không phải nhãn nhỏ viết hoa */
.il-lbl span { font-size: 17px; font-weight: var(--fw-extrabold); color: var(--color-ink); letter-spacing: -.01em; line-height: 1.4; }
.il-lbl small { display: block; font-size: 13px; font-weight: var(--fw-regular); color: var(--color-muted); margin-top: 2px; letter-spacing: 0; }
.il-lbl a { flex: none; font-size: 13px; font-weight: var(--fw-bold); color: var(--color-primary); }
.il-lbl a:hover { color: var(--color-primary-hover); }

/* ── ⑤ Kệ bìa ────────────────────────────────────────────────────────────── */
.il-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4); }
.il-col { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.il-col:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.il-col__cover { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-soft); }
.il-col__cover svg { width: 100%; height: 100%; display: block; }
.il-col__badge { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: var(--fw-extrabold); color: var(--color-on-dark); background: color-mix(in srgb, var(--color-ink) 55%, transparent); border-radius: var(--radius-pill); padding: 3px 9px; line-height: 1.5; }
.il-col__body { padding: 14px 16px 16px; }
.il-col__t { font-size: 14.5px; font-weight: var(--fw-extrabold); color: var(--color-ink); line-height: 1.4; }
.il-col__go { font-size: 12.5px; color: var(--color-primary-hover); font-weight: var(--fw-bold); margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; line-height: 1.5; }
.il-col__go i { font-size: 10px; }
/* Kệ vuốt ngang — dùng khi một kệ có quá nhiều bìa (Cambridge 12 cuốn).
   🚨 scroll-padding-inline là BẮT BUỘC: thiếu nó thì scroll-snap kéo bìa đầu
   dính sát mép màn hình, mất luôn khoảng lề của trang. */
.il-cols--scroll {
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-5);
    padding-bottom: 4px;
}
.il-cols--scroll > .il-col { scroll-snap-align: start; }
.il-cols--scroll::-webkit-scrollbar { height: 8px; }
.il-cols--scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }

/* tiến độ trên bìa (đợt 2) */
.il-col__bar { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.il-col__bar i { flex: 1; height: 4px; border-radius: 999px; background: var(--color-line); overflow: hidden; }
.il-col__bar i b { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); }
.il-col__bar span { flex: none; font-size: 11.5px; font-weight: var(--fw-bold); color: var(--color-muted); font-variant-numeric: tabular-nums; line-height: 1.5; }

/* ── ⑥ Thẻ tiện ích ──────────────────────────────────────────────────────── */
.il-tools { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.il-tool { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px; min-height: 64px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.il-tool:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.il-tool__b { flex: 1; min-width: 0; }
.il-tool__t { font-size: 14.5px; font-weight: var(--fw-extrabold); color: var(--color-ink); line-height: 1.4; }
.il-tool__d { font-size: 12.5px; color: var(--color-muted); margin-top: 2px; line-height: 1.45; }
.il-tool__go { margin-left: auto; color: var(--color-muted); flex: none; }

/* ── ⑦ Lịch sử gần đây ───────────────────────────────────────────────────── */
.il-recent { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.il-rrow { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--color-line); }
.il-rrow:first-child { border-top: 0; }
.il-rrow:hover { background: var(--color-soft); }
.il-rrow__t { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.il-rrow__band { font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-primary-hover); flex: none; font-variant-numeric: tabular-nums; }
.il-rrow__d { font-size: 12px; color: var(--color-muted); flex: none; width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

.il-empty { background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; font-size: var(--fs-small); color: var(--color-muted); line-height: 1.6; }

/* ── Khổ hẹp ─────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .il-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .il { padding: var(--space-4) var(--space-4) var(--space-12); }
    .il-hero { padding: 16px 16px 60px; border-radius: 18px; gap: 14px; }
    .il-hero--flat { padding-bottom: 20px; }
    .il-mission { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .il-mission--float { margin: -46px 0 0; }
    .il-mission__btn { width: 100%; }   /* KHÔNG flex:1 — nút xếp dọc phải tự đủ bề ngang */
    .il-cols { grid-template-columns: 1fr 1fr; }
    .il-cols--scroll { grid-template-columns: none; grid-auto-columns: 46%; scroll-padding-inline: var(--space-4); }
    .il-tools { grid-template-columns: 1fr; }
    /* 🚨 !important là BẮT BUỘC: --il-kpi-n do PHP in ra dạng style inline trên
       chính phần tử này, inline luôn thắng stylesheet nên thiếu nó là điện thoại
       vẫn 4 cột ~72px, nhãn tiếng Việt vỡ chữ. */
    .il-kpis { --il-kpi-n: 2 !important; }
    .il-kpi:nth-child(3) { border-left: 0; }
    .il-kpi:nth-child(n+3) { border-top: 1px solid var(--il-line-d); }
    .il-trend { grid-template-columns: minmax(0, 1fr); }
    .il-week__cap { text-align: left; }
}