:root {
    --bg: #FAF9F6;
    --surface: #FFFFFF;
    --surface-2: #F1EFE8;
    --border: #E2DFD5;
    --border-strong: #C9C5B8;
    --text-primary: #2C2C2A;
    --text-secondary: #6B6A63;
    --accent: #378ADD;
    --accent-dark: #185FA5;
    --success: #639922;
    --success-dark: #3B6D11;
    --danger: #E24B4A;
    --danger-dark: #A32D2D;
    --radius: 10px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.5;
  }
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #F3F7EC;
    border-bottom: 1px solid #C9DDA8;
    margin: 0 0 20px;
  }
  .header-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  header h1 { margin: 0 0 2px; }
  .hub-contact {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
  }
  .hub-contact a { color: var(--accent-dark); text-decoration: none; }
  .hub-contact a:hover { text-decoration: underline; }
  .header-inner > div:first-child { flex: 0 0 auto; }
  /* Logo đầy đủ ở mọi cỡ màn hình: chiếm phần còn lại bên phải, co theo bề rộng,
     tối đa cao 64px (= chiều cao khối tiêu đề + email trên máy tính). */
  .hub-logo { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; line-height: 0; }
  .hub-logo img { display: block; width: 100%; max-width: 198px; height: auto; }
  h1 {
    margin: 0 0 10px;
    line-height: 1.25;
  }
  .hub-title-main {
    font-size: 32px;
    font-weight: 700;
    color: #161615;
    letter-spacing: -0.01em;
  }
  .hub-title-sub {
    font-size: 16px;
    font-weight: 400;
    color: #6B6A63;
  }
  .subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 20px;
  }
  nav { display: none; }
  #hub {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px 60px;
  }
  .hub-tier-title {
    font-size: 19px; font-weight: 700; color: var(--text-primary);
    margin: 30px 0 2px; padding-bottom: 6px; border-bottom: 2px solid var(--border-strong);
  }
  #hub > .hub-tier-title:first-child { margin-top: 6px; }
  .hub-tier-title + .hub-topic-title { margin-top: 12px; }
  .hub-topic-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 22px 0 8px;
  }
  .hub-topic-title:first-of-type { margin-top: 4px; }
  .hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
  }
  .hub-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    position: relative;
    font-family: inherit;
  }
  .hub-card:hover { border-color: var(--border-strong); }
  .hub-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); padding-right: 20px; }
  .hub-card-subtitle { font-size: 11px; font-weight: 400; color: var(--text-secondary); }
  .hub-beyond-tag {
    display: inline-block;
    background: #FAEEDA;
    color: #854F0B;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    margin-bottom: 6px;
  }
  /* Module vượt mức: mờ, chữ theo màu mức (A.74) */
  .hub-card-locked { opacity: 0.72; background: var(--surface-2, #F1EFE8); border-style: dashed; }
  .hub-card-locked:hover { border-color: var(--border-strong); }
  .hub-card-locked.lvl-2, .hub-card-locked.lvl-2 .hub-card-title, .hub-card-locked.lvl-2 .hub-card-subtitle { color: #185FA5; }
  .hub-card-locked.lvl-3, .hub-card-locked.lvl-3 .hub-card-title, .hub-card-locked.lvl-3 .hub-card-subtitle { color: #B07D00; }
  .hub-card-locked.lvl-4, .hub-card-locked.lvl-4 .hub-card-title, .hub-card-locked.lvl-4 .hub-card-subtitle { color: #B42318; }
  .hub-card-locked .hub-locked-tag { background: transparent; border: 1px solid currentColor; color: inherit; }
  /* Mục "Về dự án" cuối trang (A.76) */
  #aboutProject { margin-top: 0; background: var(--bg); }
  #aboutProject .about-inner { max-width: 720px; margin: 0 auto; padding: 24px 20px 32px; }
  /* A.124: "Về Dự án" thành 2 hộp nền nhạt */
  #aboutProject .about-box { border-radius: 12px; padding: 14px 18px; }
  #aboutProject .about-box > p:first-child { margin-top: 0; }
  #aboutProject .about-box > p:last-child { margin-bottom: 0; }
  #aboutProject .about-intro { background: #F8F4EA; border: 1px solid #E6DCC4; }
  #aboutProject .about-contact { background: #EEF3F8; border: 1px solid #D2DDE9; margin-top: 12px; }
  #aboutProject .about-contact .about-share { margin-top: 0; }
  #aboutProject h2 { font-size: 17px; margin: 0 0 10px; color: var(--text-primary); }
  #aboutProject p { font-size: 13px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 10px; }
  #aboutProject .about-meta { font-size: 13px; margin-top: 14px; }
  #aboutProject .about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
  #aboutProject .about-actions .messenger-wrap:not([hidden]) { display: contents; }
  #aboutProject .about-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.3; }
  #aboutProject .about-feedback-btn { background: var(--accent-dark); }
  #aboutProject .about-feedback-btn:hover { background: var(--accent); }
  #aboutProject .about-chat-btn { background: #0866FF; }
  #aboutProject .about-chat-btn:hover { opacity: 0.9; }
  .chat-ico { width: 16px; height: 16px; flex: 0 0 auto; }
  .mail-link { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
  .mail-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
  #aboutProject .chat-short { display: none; }
  @media (max-width: 400px) { #aboutProject .chat-long { display: none; } #aboutProject .chat-short { display: inline; } #aboutProject .about-btn { padding: 8px 12px; } #aboutProject .about-actions { gap: 8px; } }
  @media (max-width: 340px) { #aboutProject .about-btn { padding: 8px 8px; font-size: 12.5px; gap: 4px; } #aboutProject .about-actions { gap: 5px; } }
  .hub-contact .messenger-wrap { margin-left: 8px; }
  /* A.106 — Nút "Thích trang" Facebook (header + Về Dự án) */
  .fb-like-wrap[hidden] { display: none !important; }
  .like-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
  .hub-contact .fb-like-wrap { margin-left: 8px; }
  .hdr-like-btn { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; padding: 3px 11px; border-radius: 999px; background: #0866FF; color: #fff !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; line-height: 1.5; box-shadow: 0 1px 4px rgba(8,102,255,0.35); }
  .hdr-like-btn:hover { background: #0652D4; }
  #aboutProject .about-actions .fb-like-wrap:not([hidden]) { display: contents; }
  #aboutProject .about-like-btn { background: #0866FF; box-shadow: 0 2px 6px rgba(8,102,255,0.3); }
  #aboutProject .about-like-btn:hover { background: #0652D4; }
  /* Điện thoại: 4 nút xếp lưới 2×2 (Góp ý | Messenger / Chia sẻ | Thích), mỗi nút rộng bằng nhau */
  @media (max-width: 560px) {
    #aboutProject .about-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    #aboutProject .about-actions .about-btn { justify-content: center; }
  }
  /* Màn rất hẹp: ẩn nút Thích trên header để logo không bị ép quá nhỏ (vẫn còn nút Thích ở cuối trang) */
  @media (max-width: 340px) { .hub-contact .fb-like-wrap { display: none !important; } }
  /* A.106 — Thanh "Quyền truy cập" ghim trong header */
  .access-slot { max-width: 720px; margin: 0 auto; padding: 0 20px 10px; }
  .access-slot:empty { display: none; }
  #accessBar .ab-short { display: none; }
  .hdr-chat-btn { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 2px 8px; border-radius: 999px; background: #0866FF; color: #fff !important; font-size: 12px; font-weight: 600; text-decoration: none !important; line-height: 1.5; }
  .hdr-chat-btn .chat-ico { width: 13px; height: 13px; }
  .hdr-chat-btn:hover { opacity: 0.9; }
  #aboutProject a { color: var(--accent-dark); }
  #aboutProject strong { color: var(--text-primary); font-weight: 700; }
  @media (max-width: 560px) { #aboutProject .about-inner { padding: 20px 16px 28px; } }
  #accessBar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    padding: 6px 8px 6px 14px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); font-size: 14px; color: var(--text-secondary);
  }
  #accessBar b { color: var(--text-primary); }
  #accessBar .ab-actions { display: flex; gap: 8px; }
  #accessBar button, #accessModal button {
    padding: 7px 12px; border-radius: var(--radius); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text-primary); font-size: 13px; cursor: pointer;
  }
  #accessBar button.primary-btn, #accessModal button.primary-btn { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
  #accessModal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(22,22,21,0.45); }
  #accessModal.open { display: flex; }
  #accessModal .am-box { background: var(--surface); border-radius: 14px; max-width: 420px; width: 100%; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
  #accessModal .am-msg { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--text-primary); }
  #accessModal .am-msg a { color: var(--accent-dark); font-weight: 600; }
  #accessModal .am-chat { margin: -6px 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  #accessModal .am-mail { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--accent-dark); border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--accent-dark); text-decoration: none; background: #fff; }
  #accessModal .am-mail:hover { background: #F2F7FC; }
  /* Chia sẻ trang -- màu cam đậm của thương hiệu, nổi hơn các nút khác (A.104) */
  .share-ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
  #accessModal .am-sharebox { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #FDF1E4; border: 1px solid #F2C99A; border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
  #accessModal .am-sharebox p { margin: 0; font-size: 14px; line-height: 1.5; color: #7A3A0A; flex: 1 1 180px; }
  #accessModal button.am-share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: none; border-radius: var(--radius); background: #C2410C; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(194,65,12,0.3); }
  #accessModal button.am-share-btn:hover { background: #9A3412; }
  #accessModal .am-pw { position: relative; flex: 1; min-width: 0; display: flex; }
  #accessModal .am-pw input { flex: 1; min-width: 0; padding-right: 40px; }
  #accessModal button.am-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  #accessModal button.am-eye svg { width: 20px; height: 20px; }
  #accessModal button.am-eye:hover { color: var(--accent-dark); }
  #accessModal button.am-eye .eye-slash { display: none; }
  #accessModal button.am-eye.showing .eye-slash { display: inline; }
  #aboutProject a.about-site-link { color: var(--text-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  #aboutProject .about-share { font-size: 14px; color: var(--text-secondary); margin: 14px 0 0; line-height: 1.6; }
  #aboutProject .about-share-btn { background: #C2410C; border: none; cursor: pointer; font-family: inherit; box-shadow: 0 2px 6px rgba(194,65,12,0.3); }
  #aboutProject .about-share-btn:hover { background: #9A3412; }
  #accessModal .am-chat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); background: #0866FF; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
  #accessModal .am-chat-btn:hover { opacity: 0.9; }
  #accessModal .am-label { font-size: 13px; color: var(--text-secondary); margin: 0 0 6px; }
  #accessModal .am-row { display: flex; gap: 8px; }
  #accessModal input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 15px; }
  #accessModal .am-error { min-height: 18px; font-size: 13px; color: var(--danger-dark); margin: 6px 0 0; }
  #accessModal .am-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
  .hub-locked-tag {
    display: inline-block;
    background: #E5E3DC;
    color: #6B6A63;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    margin-bottom: 6px;
    margin-left: 4px;
  }
  .hub-badge-dot, .hub-badge-check {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .hub-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .hub-badge-check {
    width: 16px; height: 16px; border-radius: 50%;
    background: #EAF3DE; color: var(--success-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
  }
  #moduleNavBar {
    position: sticky;
    top: var(--hdr-h, 0px);
    z-index: 99;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    margin: -20px 0 20px;
    padding: 10px max(20px, calc((100% - 680px) / 2));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  #moduleNavPagerGroup { display: flex; gap: 8px; min-width: 0; justify-content: flex-end; }
  #moduleNavBar button {
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  #moduleNavBar button:disabled { opacity: 0.5; cursor: default; }
  #backToHubBtn { flex: 0 0 auto; }
  .nav-short { display: none; }
  /* Điện thoại: header + thanh nút gọn, nằm trọn trong khung màn hình */
  @media (max-width: 560px) {
    .header-inner { padding: 10px 16px; gap: 14px; }
    .hub-title-main { font-size: 21px; }
    header h1 { line-height: 1.2; }
    .hub-contact { font-size: 13px; }
    .hub-logo img { max-width: 171px; }
    /* điện thoại: bỏ chữ trên nút Messenger (chỉ còn biểu tượng) để khối chữ trái không rộng ra, logo không bị ép nhỏ */
    .hdr-chat-text { display: none; }
    .hdr-chat-btn { padding: 3px 6px; }
    .hdr-like-text { display: none; }
    .hdr-like-btn { padding: 3px 7px; }
    .hub-contact .fb-like-wrap { margin-left: 6px; }
    .access-slot { padding: 0 16px 8px; }
    #accessBar { font-size: 13px; }
    #accessBar button { padding: 6px 10px; }
    .hub-contact .messenger-wrap { margin-left: 6px; }
    #moduleNavBar { padding: 8px 16px; gap: 6px; }
    #moduleNavBar button { padding: 7px 10px; }
    .nav-long { display: none; }
    .nav-short { display: inline; }
  }
  @media (max-width: 400px) {
    .hub-title-main { font-size: 19px; }
    #accessBar .ab-long { display: none; }
    #accessBar .ab-short { display: inline; }
    .hub-contact { font-size: 12.5px; }
  }
  main {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px 60px;
  }
  .module {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
  }
  .module.active { display: block; }
  .module h2 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
  }
  .module .desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 20px;
  }
  label.field-label {
    font-size: 13px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
  }
  .slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .slider-row label { min-width: 70px; font-size: 13px; color: var(--text-secondary); }
  input[type="range"] { flex: 1; accent-color: var(--accent); }
  .slider-out { min-width: 20px; font-weight: 600; text-align: right; }
  .bar { display: flex; gap: 3px; height: 52px; margin-bottom: 8px; }
  .bar .seg {
    flex: 1;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    transition: background 0.1s;
  }
  .bar .seg.filled { background: var(--accent); border-color: var(--accent-dark); }
  .bar.bar-red .seg.filled { background: var(--danger); border-color: var(--danger-dark); }
  .frac-readout { font-size: 22px; font-weight: 600; margin-bottom: 20px; }
  .section-divider { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
  .predict-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .predict-row button {
    flex: 1 0 auto;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    font-size: 14px;
  }
  .predict-row button.selected { border-color: var(--accent-dark); background: #E6F1FB; }
  .predict-row button.correct-answer { border-color: var(--success-dark); background: #EEF6E4; }
  .predict-row button.wrong-pick { border-color: var(--danger-dark); background: #FBEAEA; }
  .predict-row button:disabled { opacity: 0.75; cursor: default; }
  .pid-compare-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
  .pid-compare-value { font-weight: 700; color: var(--success-dark); }
  .beyond-box { background: #FFF7E6; border: 1px solid #F0B84B; border-left: 4px solid #EF9F27; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: var(--text-primary); }
  .apple-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 14px 0; min-height: 180px; justify-content: center; }
  .apple-visual { width: 100px; height: 100px; border-radius: 50% 50% 45% 45%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; flex-shrink: 0; }
  .apple-quality-number { font-size: 26px; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
  .apple-progress { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
  .apple-actions { display: flex; gap: 10px; }
  .apple-actions button { flex: 1; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; cursor: pointer; }
  .apple-actions .pick-btn { border: none; background: var(--success); color: white; font-weight: 600; }
  .apple-actions .skip-btn { border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); }
  .apple-actions button:disabled { opacity: 0.5; cursor: default; }
  .threshold-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .es-compare-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .es-compare-label { min-width: 56px; font-size: 12px; color: var(--text-secondary); text-align: right; }
  .es-compare-track { flex: 1; background: var(--surface-2); border-radius: 6px; overflow: hidden; height: 24px; position: relative; }
  .es-compare-bar { height: 100%; background: var(--accent); display: flex; align-items: center; padding-left: 8px; box-sizing: border-box; transition: width 0.4s ease; }
  .es-compare-bar span { color: white; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .es-compare-bar.best { background: var(--success); }
  .stage-label { font-size: 12px; font-weight: 600; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.03em; margin: 20px 0 8px; }
  .stage-label:first-of-type { margin-top: 4px; }
  .panel-accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 16px 0; }
  .panel-item + .panel-item { border-top: 1px solid var(--border); }
  .panel-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); border: none; font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; text-align: left; }
  .panel-header:hover { background: var(--surface-2); }
  .panel-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; color: var(--text-secondary); }
  .panel-header.open .panel-chevron { transform: rotate(180deg); }
  .panel-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
  .panel-body-inner { padding: 0 16px 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
  .panel-body-inner a { color: var(--accent-dark); }
  button.primary {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    border: none;
    background: var(--accent);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
  }
  button.primary:hover { background: var(--accent-dark); }
  .feedback { font-size: 15px; font-weight: 600; min-height: 22px; }
  .feedback.correct { color: var(--success-dark); }
  .feedback.incorrect { color: var(--danger-dark); }
  .feedback.neutral { color: var(--text-secondary); }
  .grid-cells { display: grid; gap: 3px; margin-bottom: 20px; }
  .grid-cells .cell { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--accent-dark); background: var(--accent); }
  svg#plane { touch-action: none; cursor: grab; display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); }
  .eqn { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
  .hint { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
  .pv-blocks { display: flex; gap: 20px; flex-wrap: wrap; min-height: 90px; align-items: flex-end; margin-bottom: 16px; }
  .pv-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .pv-rod { width: 14px; height: 80px; background: var(--accent); border: 1px solid var(--accent-dark); border-radius: 3px; }
  .pv-cube { width: 16px; height: 16px; background: var(--success); border: 1px solid var(--success-dark); border-radius: 3px; }
  .pv-cubes-wrap { display: flex; flex-wrap: wrap; gap: 3px; width: 40px; align-content: flex-end; }
  .pv-label { font-size: 11px; color: var(--text-secondary); }
  .pv-picker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .pv-picker button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 16px; cursor: pointer; }
  .pv-picker .val { min-width: 24px; text-align: center; font-weight: 600; font-size: 16px; }
  .ratio-bar { display: flex; gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
  .ratio-bar .unit { width: 20px; height: 28px; border-radius: 4px; }
  .ratio-unit-a { background: var(--accent); border: 1px solid var(--accent-dark); }
  .ratio-unit-b { background: #EF9F27; border: 1px solid #854F0B; }
  .nline-wrap { margin-bottom: 16px; }
  .lf-controls { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
  .lf-toggle { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .lf-eqn-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 20px; font-weight: 600; margin-bottom: 12px; }
  .lf-eqn-row input[type="number"] { width: 78px; padding: 6px 6px; border-radius: 8px; border: 1.5px solid var(--accent-dark); font-size: 17px; font-weight: 700; text-align: center; color: var(--accent-dark); background: #EAF3FF; }
  .lf-point:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
  .lf-point { cursor: grab; }
  .compare-row { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
  .compare-bar-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; }
  .compare-bar-track { display: flex; gap: 3px; height: 22px; }
  .compare-bar-track .unit { width: 20px; border-radius: 4px; flex-shrink: 0; }
  .compare-unit-guess { background: var(--border-strong); }
  .compare-unit-actual { background: #EF9F27; border: 1px solid #854F0B; }
  /* Sàng: minmax(0,1fr) để ô được co nhỏ hơn chữ (trước đây "1000" đẩy lưới tràn ngang, A.85);
     cỡ chữ theo bề rộng lưới (cqw); điện thoại dùng 10 cột cho ô đủ to để bấm. */
  .sieve-grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin-bottom: 16px; container-type: inline-size; }
  @media (max-width: 560px) { .sieve-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } .sieve-grid .sieve-cell { font-size: min(13px, 3.7cqw); } }
  .sieve-cell { min-width: 0; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2); font-size: min(12px, 2.1cqw); font-weight: 600; cursor: pointer; color: var(--text-primary); }
  .sieve-cell.prime { background: var(--success); border-color: var(--success-dark); color: white; cursor: default; }
  .sieve-cell.crossed { background: var(--surface-2); color: var(--border-strong); cursor: default; opacity: 0.5; }
  .sieve-cell.one { background: var(--surface); color: var(--border-strong); cursor: default; }
  .sieve-cell.next-turn { border: 2.5px solid #EF9F27; box-shadow: 0 0 0 2px rgba(239,159,39,0.25); animation: pulse-turn 1.4s ease-in-out infinite; }
  .ph-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
  .ph-box { min-width: 64px; min-height: 64px; border: 2px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; padding: 6px; cursor: pointer; }
  .ph-box.overfull { border-color: var(--danger-dark); background: #FBEAEA; }
  .ph-box-label { width: 100%; font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 2px; }
  .ph-pigeon { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }
  .ph-box.overfull .ph-pigeon { background: var(--danger-dark); }
  .mb-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; max-width: 320px; margin: 0 auto 16px; }
  .mb-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; border-radius: 5px; cursor: pointer; }
  .mb-cell.c0 { background: #33322E; color: #EDEBE3; }
  .mb-cell.c1 { background: #F1EFE8; color: #6B6A63; border: 1px solid var(--border-strong); }
  .mb-cell.removed { background: transparent; cursor: default; }
  .mb-cell.covered { background: var(--accent); color: white; cursor: default; opacity: 0.9; }
  .mb-cell.selected { outline: 3px solid var(--accent-dark); outline-offset: -3px; }
  .mb-counters { display: flex; gap: 20px; justify-content: center; margin-bottom: 14px; font-size: 13.5px; }
  .mb-counters b { font-size: 16px; }
  .tg-sticks { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; min-height: 44px; align-items: flex-end; }
  .tg-stick { width: 9px; height: 40px; background: var(--accent); border-radius: 3px; }
  .tg-turn { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); }
  .tg-turn.user-turn { background: #EAF3FF; color: var(--accent-dark); }
  .tg-turn.machine-turn { background: #FBEAEA; color: var(--danger-dark); }
  .tg-score { display: flex; gap: 20px; font-size: 13.5px; margin: 12px 0; }
  .tg-score b { font-size: 16px; }
  .tg-strategy-box { background: #F3F7EC; border: 1px solid #C9DDA8; border-radius: 12px; padding: 16px 18px; margin: 14px 0; display: none; }
  .tg-strategy-box.open { display: block; }
  @keyframes pulse-turn { 0%, 100% { box-shadow: 0 0 0 2px rgba(239,159,39,0.25); } 50% { box-shadow: 0 0 0 5px rgba(239,159,39,0.12); } }
  .lesson-box { background: #F3F7EC; border: 1px solid #C9DDA8; border-radius: 12px; padding: 16px 18px; margin-top: 20px; }
  .lesson-box .lesson-title { font-size: 13px; font-weight: 700; color: #3B6D11; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
  .lesson-box p { margin: 0 0 8px; }
  .lesson-box p:last-child { margin-bottom: 0; }
  /* Quiz + Tìm hiểu thêm (A.98) */
  .quiz-box { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 16px; background: #FBFAF6; }
  .quiz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
  .quiz-title { font-size: 13px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.03em; }
  /* A.120: tiến độ = chấm tròn xanh (sao ★ dành cho độ khó) */
  .quiz-stars, .hub-quiz-stars { color: #2E8B57; letter-spacing: 2px; }
  .quiz-stars { font-size: 15px; }
  .quiz-stars span, .hub-quiz-stars span { color: #C9CFC4; }
  .hub-quiz-stars { font-size: 10px; margin-left: auto; }
  /* Bài toán bốn màu (A.128) */
  .fc-palette { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
  .fc-sw { width: 44px; height: 38px; border-radius: 10px; border: 2px solid rgba(0,0,0,0.18); font: inherit; font-weight: 700; font-size: 15px; color: #2F2C26; cursor: pointer; }
  .fc-sw.on { border-color: #2F2C26; box-shadow: 0 0 0 3px rgba(47,44,38,0.18); }
  .fc-sw.fc-erase { width: auto; padding: 0 12px; background: var(--surface); font-weight: 600; font-size: 13px; }
  .fc-svg { display: block; width: 100%; max-width: 420px; margin: 0 auto 6px; border-radius: 8px; touch-action: manipulation; }
  .fc-svg rect[data-r] { cursor: pointer; }
  .fc-svg .fc-edge { stroke: #4A463D; stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
  .fc-svg .fc-bad { stroke: #D6342A; stroke-width: 6; stroke-linecap: round; pointer-events: none; }
  .fc-svg .fc-frame { fill: none; stroke: #4A463D; stroke-width: 2.5; pointer-events: none; }
  .fc-svg text { text-anchor: middle; pointer-events: none; fill: #2F2C26; font-family: inherit; }
  .fc-svg .fc-name { font-size: 13px; font-weight: 700; }
  .fc-svg .fc-num { font-size: 11px; font-weight: 500; }
  .fc-status { font-size: 13px; color: var(--text-secondary); margin: 2px 0 6px; text-align: center; }
  .fc-timeline { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
  .fc-timeline li { margin: 5px 0; }
  /* Lớp 2 (A.129): Góc trò chơi + Câu đố hôm nay */
  #dailyStrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; }
  #dailyStrip[hidden] { display: none; }
  .ds-label { font-weight: 600; color: var(--text-primary); }
  .ds-btn { width: auto; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid #E5C99A; background: #FDF6E9; color: var(--text-primary); cursor: pointer; }
  .ds-btn:hover { border-color: #D19A3F; }
  .ds-btn.done { background: #EEF5E2; border-color: #C9DDA8; color: var(--success-dark); }
  .ds-streak { font-size: 13px; color: var(--text-secondary); }
  .gm-turn { text-align: center; font-size: 15px; margin: 6px 0 8px; min-height: 22px; }
  .caro-p1 { color: var(--accent-dark); } .caro-p2 { color: #C2410C; }
  .caro-board { display: grid; gap: 3px; margin: 0 auto; background: var(--border-strong); padding: 3px; border-radius: 8px; touch-action: manipulation; }
  .caro-board.caro-n3 { max-width: 260px; } .caro-board.caro-n10 { max-width: 440px; }
  .caro-cell { width: auto; aspect-ratio: 1; padding: 0; margin: 0; border: none; border-radius: 4px; background: var(--surface); font: inherit; font-weight: 700; line-height: 1; cursor: pointer; color: var(--text-primary); display: flex; align-items: center; justify-content: center; }
  .caro-n3 .caro-cell { font-size: 40px; } .caro-n10 .caro-cell { font-size: 18px; }
  .caro-cell:disabled { cursor: default; opacity: 1; }
  .caro-cell.p1 { color: var(--accent-dark); } .caro-cell.p2 { color: #C2410C; }
  .caro-cell.hot, .caro-cell.hot:disabled { background: #FAD96B; }
  .sdk-grid { display: grid; margin: 0 auto 10px; border: 2.5px solid #4A463D; border-radius: 6px; overflow: hidden; background: var(--border); gap: 1px; touch-action: manipulation; }
  .sdk-grid.sdk-n4 { max-width: 220px; } .sdk-grid.sdk-n6 { max-width: 300px; } .sdk-grid.sdk-n9 { max-width: 400px; }
  .sdk-cell { width: auto; aspect-ratio: 1; padding: 0; margin: 0; border: none; border-radius: 0; background: var(--surface); font: inherit; font-size: 18px; line-height: 1; color: var(--accent-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .sdk-n4 .sdk-cell { font-size: 22px; }
  .sdk-cell.given { color: var(--text-primary); font-weight: 700; background: var(--surface-2); }
  .sdk-cell.bl { box-shadow: -2px 0 0 #4A463D; } .sdk-cell.bt { box-shadow: 0 -2px 0 #4A463D; } .sdk-cell.bl.bt { box-shadow: -2px 0 0 #4A463D, 0 -2px 0 #4A463D; }
  .sdk-cell.sel { background: #DCEBFA; }
  .sdk-cell.bad { color: var(--danger-dark); background: #FBE3E2; }
  .sdk-pad, .g24-ops, .g24-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; }
  .sdk-pad button { width: 38px; height: 38px; padding: 0; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
  .sdk-pad button.sdk-erase { width: auto; padding: 0 12px; font-size: 13px; }
  .g24-tile { width: auto; min-width: 64px; height: 64px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 24px; font-weight: 700; cursor: pointer; color: var(--text-primary); }
  .g24-tile.on { border-color: var(--accent-dark); background: #DCEBFA; }
  .g24-ops button { width: 48px; height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); font: inherit; font-size: 22px; cursor: pointer; }
  .g24-ops button.on { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
  /* Lớp 3 (A.129): Ôn nhanh nguyên lý */
  .rv-entry { background: #FDF6E9; border: 1px solid #E5C99A; border-radius: 10px; padding: 10px 14px; margin: 10px 0 14px; font-size: 14px; line-height: 1.5; }
  .rv-entry button { width: auto; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; margin-left: 4px; border-radius: 999px; border: 1px solid #D19A3F; background: var(--surface); cursor: pointer; }
  .rv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
  .rv-mod { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
  .rv-q { font-size: 14px; color: var(--text-secondary); margin: 0 0 12px; }
  .rv-back { background: #F7FBF1; border: 1px solid #C9DDA8; border-radius: 10px; padding: 8px 14px; margin-bottom: 12px; }
  .rv-back ul { margin: 0; padding-left: 20px; } .rv-back li { font-size: 14px; line-height: 1.55; margin: 4px 0; }
  .rv-back[hidden] { display: none; }
  .rv-open { width: auto; margin-top: 10px; font: inherit; font-size: 13px; background: none; border: 0; padding: 0; color: #185FA5; text-decoration: underline; cursor: pointer; }
  /* Thuật toán là gì? (A.129) */
  .alg-play { display: flex; gap: 8px; margin: 0 0 10px; }
  .alg-play input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text-primary); font: inherit; font-size: 16px; }
  .alg-play button { flex: 0 0 auto; width: auto; height: 42px; padding: 0 18px; border: 1.5px solid var(--accent-dark); border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
  .alg-play button:disabled { opacity: 0.6; cursor: default; }
  .alg-btns button { min-height: 40px; }
  .alg-bar { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 0 0 6px; }
  .alg-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: var(--accent); transition: left 0.25s, width 0.25s; }
  .alg-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; }
  .alg-note { font-size: 14px; color: var(--text-primary); margin: 0 0 8px; }
  .alg-log { margin: 0 0 10px; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; color: var(--text-primary); max-height: 190px; overflow-y: auto; }
  .alg-sub { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 18px 0 6px; }
  .alg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
  .alg-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px; text-align: center; min-width: 0; }
  .alg-card-name { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
  .alg-card-num { font-size: 24px; font-weight: 700; color: var(--accent-dark); line-height: 1.3; overflow-wrap: anywhere; }
  .alg-card-unit { font-size: 12px; color: var(--text-secondary); }
  .alg-card-worst { font-size: 12px; color: var(--text-primary); margin-top: 4px; }
  .alg-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 360px; margin: 0 auto 10px; }
  .alg-cell { height: 40px; border: 1.5px solid var(--border-strong); border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
  .alg-cell.alg-flag { border-color: var(--success-dark); color: var(--success-dark); }
  .alg-cell.alg-bot { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
  .alg-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 14px; }
  .alg-table th, .alg-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: right; }
  .alg-table th { background: var(--surface-2); font-weight: 700; }
  /* Tự động hóa ≠ AI (A.129) */
  .aut-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
  .aut-key { width: auto; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font: inherit; font-size: 14px; cursor: pointer; }
  .aut-key.on { border-color: var(--accent-dark); background: #E6F1FB; font-weight: 700; }
  .aut-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
  .aut-stat { border: 1px solid var(--border); border-radius: 10px; padding: 8px 4px; text-align: center; background: var(--surface-2); }
  .aut-stat b { display: block; font-size: 20px; line-height: 1.2; color: var(--text-primary); }
  .aut-stat span { font-size: 12px; color: var(--text-secondary); }
  .aut-stat.aut-ok b { color: var(--success-dark); }
  .aut-stat.aut-bad b { color: var(--danger-dark); }
  .aut-list { list-style: none; margin: 0 0 10px; padding: 0; }
  .aut-msg { display: grid; grid-template-columns: 58px 1fr; gap: 2px 8px; align-items: start; padding: 7px 8px; margin: 0 0 5px; border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 14px; line-height: 1.4; }
  .aut-msg.aut-ok { border-left-color: var(--success); }
  .aut-msg.aut-bad { border-left-color: var(--danger); background: #FBEAEA; }
  .aut-msg.aut-miss { border-left-color: #D19A3F; background: #FDF6E9; }
  .aut-kind { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; padding-top: 2px; }
  .aut-text { color: var(--text-primary); overflow-wrap: anywhere; }
  .aut-tag { grid-column: 2; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
  .aut-msg.aut-ok .aut-tag { color: var(--success-dark); }
  .aut-msg.aut-bad .aut-tag { color: var(--danger-dark); }
  .aut-msg.aut-miss .aut-tag { color: #8A5A00; }
  .aut-sub { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 10px 0 6px; }
  .aut-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
  .aut-word { font-size: 13px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); }
  .aut-qtext { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0 0 10px; }
  .aut-dim { opacity: 0.6; }
  .aut-next { width: auto; min-height: 36px; margin: 8px 0 0; padding: 6px 14px; display: block; font: inherit; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); cursor: pointer; }
  .aut-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 12px; }
  .aut-two > div { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); font-size: 14px; line-height: 1.5; color: var(--text-primary); }
  .aut-row button { flex: 1 1 140px; min-height: 40px; white-space: normal; font-family: inherit; color: var(--text-primary); }

  /* Máy học từ ví dụ (A.129) */
  .mlx-plot { display: grid; grid-template-columns: 22px minmax(0, 1fr); max-width: 360px; margin: 6px auto 4px; }
  .mlx-ylab { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 12px; color: var(--text-secondary); }
  .mlx-xlab { grid-column: 2; text-align: center; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
  .mlx-svg { display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--surface); border-radius: 8px; cursor: crosshair; touch-action: manipulation; }
  .mlx-svg .mlx-frame { fill: none; stroke: var(--border-strong); stroke-width: 2; }
  .mlx-svg .mlx-empty { text-anchor: middle; font-size: 14px; fill: var(--text-secondary); font-family: inherit; }
  .mlx-svg .mlx-pt { stroke: #2F2C26; stroke-width: 1.2; pointer-events: none; }
  .mlx-svg .mlx-tok { opacity: 0.55; pointer-events: none; }
  .mlx-svg .mlx-tbad { stroke: #D6342A; stroke-width: 1.6; pointer-events: none; }
  .mlx-svg .mlx-link { stroke: #2F2C26; stroke-width: 1.2; stroke-dasharray: 3 2; pointer-events: none; }
  .mlx-svg .mlx-probe { fill: #fff; stroke: #2F2C26; stroke-width: 2; pointer-events: none; }
  .mlx-svg .mlx-q { text-anchor: middle; font-size: 11px; font-weight: 700; fill: #2F2C26; pointer-events: none; font-family: inherit; }
  .mlx-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); margin: 2px 0 8px; }
  .mlx-legend i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border: 1.2px solid #2F2C26; vertical-align: -1px; }
  .mlx-legend .mlx-l0 { background: #7DB55A; border-radius: 50%; }
  .mlx-legend .mlx-l1 { background: #F2A040; }
  .mlx-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 4px; text-align: center; }
  .mlx-table th, .mlx-table td { border: 1px solid var(--border); padding: 5px 3px; }
  .mlx-table th { background: var(--surface-2); font-weight: 600; }
  .mlx-table .mlx-sub td { font-size: 11.5px; color: var(--text-secondary); }
  .mlx-list { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
  .mlx-list li { margin: 5px 0; }
  /* Chatbot đoán từ (A.129) */
  .nwd-prompt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 20px; font-weight: 700; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
  .nwd-count { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
  .nwd-blank { color: var(--accent-dark); }
  .nwd-cand { display: grid; grid-template-columns: 74px minmax(0, 1fr) 78px; align-items: center; gap: 8px; width: 100%; min-height: 38px; box-sizing: border-box; padding: 4px 10px; margin: 0 0 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text-primary); text-align: left; }
  button.nwd-cand { cursor: pointer; }
  button.nwd-cand:hover { border-color: var(--accent-dark); }
  .nwd-word { font-weight: 700; overflow-wrap: anywhere; }
  .nwd-track { display: block; height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
  .nwd-fill { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
  .nwd-num { font-size: 12px; color: var(--text-secondary); text-align: right; white-space: nowrap; }
  .nwd-rest { margin: 0 0 10px; }
  .nwd-sentence { min-height: 30px; font-size: 19px; line-height: 1.6; font-weight: 600; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; overflow-wrap: anywhere; }
  .nwd-last { border-bottom: 3px solid var(--accent); }
  .nwd-empty { font-size: 14px; font-weight: 400; color: var(--text-secondary); }
  .nwd-list { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
  .nwd-list li { margin: 5px 0; }
  /* Dữ liệu lệch, máy lệch (A.129) */
  .bia-label { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 4px 0 6px; }
  .bia-range { display: block; width: 100%; height: 36px; margin: 0 0 10px; accent-color: var(--accent); }
  .bia-svg { display: block; width: 100%; max-width: 420px; margin: 12px auto 4px; }
  .bia-svg .bia-frame { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
  .bia-svg .bia-ax { font-size: 11px; fill: var(--text-secondary); font-family: inherit; }
  .bia-svg .bia-pt { stroke: #2F2C26; stroke-width: 1.5; }
  .bia-svg .bia-ripe { fill: #2F2C26; }
  .bia-svg .bia-raw { fill: #FFFFFF; }
  .bia-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 12px; color: var(--text-secondary); margin: 0 0 12px; }
  .bia-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .bia-key { display: inline-block; width: 11px; height: 11px; border: 1.5px solid #2F2C26; border-radius: 50%; background: #FFFFFF; }
  .bia-key.bia-ripe { background: #2F2C26; }
  .bia-key.bia-sq { border-radius: 0; }
  .bia-bars { display: grid; gap: 10px; margin: 0 0 8px; }
  .bia-barhead { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text-primary); margin-bottom: 4px; }
  .bia-track { height: 14px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
  .bia-fill { height: 100%; border-radius: 7px 0 0 7px; }
  .bia-fill.bia-good { background: var(--success); }
  .bia-fill.bia-mid { background: var(--accent); }
  .bia-fill.bia-bad { background: var(--danger); }
  .bia-barnote { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

  /* Cái không thấy (A.129) */
  .uns-svg { display: block; width: 100%; max-width: 400px; margin: 0 auto 6px; touch-action: manipulation; }
  .uns-svg .uns-zone { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; stroke-linejoin: round; cursor: pointer; }
  .uns-svg .uns-zone.uns-on { fill: #F6E2A8; stroke: #8A6A10; stroke-width: 3; }
  .uns-svg .uns-back { fill: #D6342A; pointer-events: none; }
  .uns-svg .uns-lost { fill: #2F2C26; pointer-events: none; }
  .uns-svg .uns-lbl { font-size: 11px; font-weight: 600; text-anchor: middle; fill: var(--text-secondary); pointer-events: none; font-family: inherit; }
  .uns-count { font-size: 13px; color: var(--text-secondary); text-align: center; margin: 2px 0 10px; line-height: 1.5; }
  .uns-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
  .uns-tbl th, .uns-tbl td { border: 1px solid var(--border); padding: 6px 6px; text-align: center; color: var(--text-primary); }
  .uns-tbl th { background: var(--surface-2); font-weight: 600; }
  .uns-tbl td:first-child { text-align: left; }
  .uns-tbl .uns-mine td { background: #FBF1CF; color: #2F2C26; font-weight: 600; }
  .uns-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0; font-size: 13px; color: var(--text-primary); }
  .uns-barlbl { flex: 1 1 100%; }
  .uns-track { flex: 1 1 0; height: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
  .uns-fill { display: block; height: 100%; }
  .uns-f0 { background: var(--border-strong); }
  .uns-f1 { background: var(--accent); }
  .uns-f2 { background: var(--success); }
  .uns-list { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
  .uns-list li { margin: 5px 0; }
  .uns-q { margin: 0 0 14px; }
  .uns-opts { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
  .uns-opts button { text-align: left; min-height: 40px; }
  .uns-row button { min-height: 40px; }
  /* Biểu đồ đánh lừa (A.129) */
  .mch-svg { display: block; width: 100%; max-width: 440px; margin: 0 auto 10px; }
  .mch-svg text { font-family: inherit; font-size: 11px; fill: var(--text-secondary); }
  .mch-svg .mch-val { font-size: 13px; font-weight: 700; fill: var(--text-primary); text-anchor: middle; }
  .mch-svg .mch-cat { font-size: 12px; font-weight: 600; fill: var(--text-primary); text-anchor: middle; }
  .mch-svg .mch-axis { stroke: var(--border-strong); stroke-width: 1.5; fill: none; }
  .mch-svg .mch-grid { stroke: var(--border); stroke-width: 1; }
  .mch-svg .mch-bar { fill: var(--accent); }
  .mch-svg .mch-bar2 { fill: var(--accent-dark); }
  .mch-svg .mch-line { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-linejoin: round; }
  .mch-svg .mch-pick { fill: none; stroke: var(--danger); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
  .mch-svg .mch-win { fill: var(--accent); opacity: 0.12; }
  .mch-svg .mch-dot { fill: var(--danger); }
  .mch-slider { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; color: var(--text-primary); }
  .mch-slider label { flex: 0 0 auto; min-width: 74px; }
  .mch-slider input { min-width: 0; height: 36px; }
  .mch-slider b { flex: 0 0 34px; text-align: right; }
  .mch-stats { font-size: 14px; line-height: 1.6; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
  .mch-goals { font-size: 14px; line-height: 1.6; margin: 0 0 8px; color: var(--text-primary); }
  .mch-goals .mch-done { color: var(--success-dark); font-weight: 600; }
  .mch-ask { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
  .mch-q { border: 1px solid var(--border); border-radius: 12px; padding: 10px 10px 4px; margin: 0 0 12px; background: var(--surface); }
  .mch-q .mch-cap { font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; }
  .mch-q .predict-row { margin-bottom: 8px; }
  .mch-q .feedback { font-size: 14px; margin-bottom: 6px; }
  /* Đoán 2/3 trung bình (A.129) */
  .gtt-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 14px; }
  .gtt-pick label { flex: 1 1 100%; font-weight: 600; color: var(--text-primary); }
  .gtt-pick input[type="range"] { flex: 1 1 160px; min-width: 0; height: 36px; }
  .gtt-num { width: 84px; height: 40px; padding: 0 8px; font: inherit; font-size: 16px; font-weight: 700; text-align: center; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-primary); }
  .gtt-svg { display: block; width: 100%; max-width: 520px; margin: 0 auto 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
  .gtt-svg text { font-family: inherit; font-size: 10px; fill: var(--text-secondary); }
  .gtt-svg .gtt-axis { stroke: var(--border-strong); stroke-width: 1; }
  .gtt-svg .gtt-dot { fill: #9AA5B1; }
  .gtt-svg .gtt-me { fill: var(--accent-dark); }
  .gtt-svg .gtt-win { stroke: var(--success-dark); stroke-width: 2; }
  .gtt-svg .gtt-mean { stroke: #C2410C; stroke-width: 1.5; stroke-dasharray: 4 3; }
  .gtt-svg .gtt-target { stroke: var(--success-dark); stroke-width: 2; }
  .gtt-svg .gtt-meanT { fill: #C2410C; font-weight: 700; }
  .gtt-svg .gtt-targetT { fill: var(--success-dark); font-weight: 700; }
  .gtt-tablewrap { overflow-x: auto; margin: 10px 0 6px; }
  .gtt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .gtt-table th, .gtt-table td { padding: 5px 4px; border-bottom: 1px solid var(--border); text-align: center; }
  .gtt-table th { color: var(--text-secondary); font-weight: 600; }
  .gtt-table td.gtt-won { color: var(--success-dark); font-weight: 700; }
  .gtt-levels { margin: 0 0 14px; padding-left: 26px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
  .gtt-levels li { margin: 4px 0; }
  .gtt-story { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
  .gtt-story li { margin: 5px 0; }
  /* A.131: Mỗi ngày một dữ kiện */
  #dailyFact { max-width: 720px; margin: 0 auto; padding: 10px 20px 2px; }
  #dailyFact[hidden] { display: none; }
  .df-view { overflow: hidden; white-space: nowrap; font-size: 14px; line-height: 1.5; color: var(--text-primary); background: #F3F7EC; border: 1px solid #C9DDA8; border-radius: 8px; padding: 7px 12px; }
  .df-view.wrap { white-space: normal; }
  .df-track { display: inline-flex; }
  .df-item a { color: var(--accent-dark); }
  .df-view.run .df-item { padding-right: 64px; }
  .df-view.run .df-track { animation: df-run var(--df-time, 20s) linear infinite; }
  .df-view.run:hover .df-track, .df-view.run:focus-within .df-track, .df-view.run:active .df-track { animation-play-state: paused; }
  @keyframes df-run { from { transform: translateX(0); } to { transform: translateX(var(--df-dist, -100%)); } }
  @media (max-width: 640px) { #dailyFact { padding-left: 14px; padding-right: 14px; } }
  /* @@NEW_CSS@@ */
  /* A.120–A.121: độ khó (sao), ô tìm kiếm + lọc mức trên 1 dòng, 2 thẻ/dòng, khung trang bài, sổ tay */
  .diff-stars { color: #D9822B; font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hub-card { min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
  .hub-card .hub-locked-tag { align-self: flex-start; }
  .hub-card-foot { margin-top: auto !important; padding-top: 4px; }
  .hub-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
  .hub-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-height: 14px; }
  .hub-card-locked .diff-stars { color: inherit; opacity: 0.85; }
  .hub-card .hub-locked-tag { margin-bottom: 4px; }
  #hubSearch { max-width: 720px; margin: 0 auto; padding: 4px 20px 4px; }
  .hs-row { display: flex; align-items: center; gap: 8px; }
  .hs-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 4px 10px; }
  .hs-field:focus-within { border-color: #185FA5; box-shadow: 0 0 0 3px rgba(24,95,165,0.12); }
  .hs-ico { width: 17px; height: 17px; color: var(--text-secondary); flex: none; }
  #hsInput { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; padding: 5px 0; color: var(--text-primary); }
  .hs-bands { display: flex; gap: 4px; flex: none; }
  .hs-band { font: inherit; font-size: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); border-radius: 999px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
  .hs-band.on { background: #185FA5; border-color: #185FA5; color: #fff; }
  .hs-select { display: none; flex: none; font: inherit; font-size: 13px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); border-radius: 10px; padding: 7px 6px; max-width: 128px; }
  @media (max-width: 640px) { .hs-bands { display: none; } .hs-select { display: block; } .hub-card { padding: 9px 9px; } .hub-card-title { padding-right: 12px; } #hub, #hubSearch, #hubExtra { padding-left: 14px; padding-right: 14px; } }
  .hs-status { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
  .hs-status button, .hub-empty button { font: inherit; font-size: 13px; border: 0; background: none; color: #185FA5; text-decoration: underline; cursor: pointer; padding: 0 2px; }
  .hub-empty { font-size: 14px; color: var(--text-secondary); padding: 20px 0; }
  #hubExtra { max-width: 720px; margin: 0 auto; padding: 6px 20px 28px; }
  .hb-entry { position: relative; display: inline-flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 14px; background: #F3F7EC; border: 1px solid #C9DDA8; border-radius: 999px; padding: 6px 14px; cursor: pointer; color: var(--text-primary); }
  .hb-entry:hover { border-color: #9FC274; }
  .hb-ico { font-size: 16px; }
  .hb-sub { font-size: 12px; color: var(--text-secondary); }
  .hb-arrow { color: #3B6D11; font-size: 15px; }
  .mod-meta { margin: -4px 0 12px; font-size: 12px; }
  .mod-meta .diff-stars { font-size: 13px; }
  .mod-band { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
  .lesson-box.takeaway p { position: relative; padding-left: 22px; }
  .lesson-box.takeaway p::before { content: "✓"; position: absolute; left: 2px; top: 0; color: #3B6D11; font-weight: 700; }
  .next-box { border: 1px solid var(--border); background: #FBFAF6; border-radius: 12px; padding: 14px 18px; margin-top: 16px; }
  .next-title { font-size: 13px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
  .next-part { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
  .next-part:first-of-type { border-top: 0; margin-top: 4px; padding-top: 0; }
  .next-h { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
  .next-rel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .next-rel-btn { font: inherit; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .next-rel-btn:hover { border-color: var(--border-strong); }
  .next-rel-btn .nr-t { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
  .next-rel-btn.locked { background: var(--surface-2, #F1EFE8); border-style: dashed; }
  .next-rel-btn .nr-lock { font-size: 11px; color: #185FA5; }
  .next-box .more-box { border: 0; background: transparent; padding: 0; margin: 0; }
  .next-box .fact-box.side-story { background: transparent; border: 0; padding: 0; margin: 0; }
  .next-box .fact-box.side-story .fact-title { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text-primary); }
  #handbookView { max-width: 720px; margin: 0 auto; padding: 0 20px 60px; }
  .hbv-bar { padding: 10px 0; }
  .hbv-back { font: inherit; font-size: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
  .hbv-inner h2 { margin: 6px 0 4px; }
  .hbv-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
  .hbv-title { font: inherit; font-size: 14px; font-weight: 700; color: #185FA5; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
  .hbv-item ul { margin: 6px 0 0; padding-left: 20px; }
  .hbv-item li { font-size: 14px; line-height: 1.55; margin: 3px 0; }
  .hbv-bar { display: flex; flex-wrap: wrap; gap: 8px; }
  .hbv-back-in { margin-top: 8px; font-size: 13px; }
  .hbv-item.hbv-focus { border-color: #9FC274; box-shadow: 0 0 0 3px rgba(59,109,17,0.15); background: #F7FBF1; }
  .hb-link-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; flex-wrap: wrap; }
  .hb-link { font: inherit; font-size: 14px; font-weight: 600; color: #3B6D11; background: #F3F7EC; border: 1px solid #C9DDA8; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
  .hb-link:hover { border-color: #9FC274; }
  .hb-link-hint { font-size: 12px; color: var(--text-secondary); }
  /* A.123: chú thích tiêu đề đầy đủ khi rê chuột (chỉ thiết bị có chuột) */
  @media (hover: hover) and (pointer: fine) {
    .hb-entry[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); width: max-content; max-width: 260px; background: #2F2C26; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; padding: 6px 9px; border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 30; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease .3s, visibility 0s linear .45s; }
    .hb-entry[data-tip]:hover::after, .hb-entry[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transition: opacity .15s ease .3s, visibility 0s linear .3s; }
    .hub-card[data-tip]::after { content: attr(data-tip); position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); background: #2F2C26; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; padding: 6px 9px; border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 30; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease .35s, visibility 0s linear .5s; white-space: pre-line; text-align: left; }
    .hub-card[data-tip]:hover::after, .hub-card[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transition: opacity .15s ease .35s, visibility 0s linear .35s; }
    .hub-card[data-tip]:hover { z-index: 31; }
    .hub-card-locked[data-tip]:hover { opacity: 0.95; }
  }
  .hbv-locked { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }
  .quiz-q { border-top: 1px solid var(--border); padding: 14px 0 6px; }
  .quiz-level { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
  .quiz-text { margin: 4px 0 10px; font-size: 15px; line-height: 1.55; }
  .quiz-opts { display: flex; flex-direction: column; gap: 6px; }
  .quiz-opt { text-align: left; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 14px; line-height: 1.4; cursor: pointer; }
  .quiz-opt:hover:not([disabled]) { border-color: var(--accent-dark); background: #F2F7FC; }
  .quiz-opt[disabled] { cursor: default; opacity: 1; color: inherit; }
  .quiz-opt.correct-answer { border-color: var(--success-dark); background: #EEF6E4; font-weight: 600; }
  .quiz-opt.wrong-answer { border-color: var(--danger-dark); background: #FBECEC; }
  .quiz-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .quiz-input { width: 120px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 15px; }
  .quiz-unit { font-size: 14px; color: var(--text-secondary); }
  .quiz-textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 15px; margin-bottom: 8px; resize: vertical; }
  .quiz-box .primary-btn { background: var(--accent-dark); border: 1px solid var(--accent-dark); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
  .quiz-box .primary-btn[disabled] { opacity: 0.5; cursor: default; }
  .quiz-privacy { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; }
  .quiz-fb .feedback { margin: 10px 0 4px; font-size: 14px; }
  .quiz-explain { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--text-primary); background: #F3F1EA; border-radius: 8px; padding: 8px 12px; }
  .quiz-foot { display: flex; justify-content: flex-end; padding-top: 8px; }
  /* Quiz v2 (A.114) */
  .q2-progress { background: #F4F1E8; border-radius: 10px; padding: 10px 12px; margin: 8px 0 4px; }
  .q2-prog-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
  .q2-prog-row { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 14px; line-height: 1.5; margin: 3px 0; }
  .q2-st { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
  .st-none { background: #E6E2D8; color: #6B665B; } .st-learning { background: #E3EEFB; color: #1F5FA8; }
  .st-weak { background: #FDEBDF; color: #B4531C; } .st-solid { background: #2E7A2E; color: #fff; } .st-pass { background: #E3F2DC; color: #2E7A2E; }
  .q2-goal { font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
  .q2-bar { height: 8px; border-radius: 999px; background: #E2DDD0; overflow: hidden; margin: 0 0 10px; }
  .q2-bar i { display: block; height: 100%; background: #2E8B57; border-radius: 999px; transition: width .3s; }
  .q2-headn { font-size: 13px; font-weight: 700; color: #2E7A2E; background: #E3F2DC; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
  .q2-prog-hint { display: block; font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
  .q2-next, .q2-done { font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; }
  .q2-done { background: #E3F2DC; color: #1F5A1F; border-radius: 8px; padding: 8px 10px; }
  .q2-rules { margin-top: 8px; font-size: 13px; }
  .q2-rules summary { cursor: pointer; font-weight: 700; color: var(--accent-dark); }
  .q2-rules ol { margin: 6px 0 0; padding-left: 20px; line-height: 1.55; }
  .q2-rules li { margin: 3px 0; }
  .q2-prog-row > span:last-child { flex: 1 1 220px; }
  .q2-prog-note { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; }
  .q2-part-title { margin: 16px 0 2px; font-size: 13px; font-weight: 700; color: var(--accent-dark); }
  .q2-part-title span { font-weight: 400; color: var(--text-secondary); }
  .q2-hint { font-size: 13px; color: var(--text-secondary); margin: 4px 0 6px; }
  .q2-chip { padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font-size: 13px; cursor: pointer; color: var(--text-primary); }
  .q2-chip.on { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
  .q2-chip[disabled] { cursor: default; opacity: 0.7; }
  .q2-conf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); }
  .q2-conf .q2-chip { font-size: 12px; padding: 3px 9px; }
  .q2-tf-row, .q2-match-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
  .q2-tf-lab { font-weight: 700; color: var(--text-secondary); }
  .q2-tf-t, .q2-match-t { flex: 1 1 220px; }
  .q2-match-t { font-weight: 700; font-size: 15px; flex: 0 0 48px; }
  .q2-tf-btns { display: flex; gap: 6px; flex-wrap: wrap; }
  .q2-tf-row.ok, .q2-match-row.ok { background: #F1F8EC; } .q2-tf-row.bad, .q2-match-row.bad { background: #FCEFEF; }
  .q2-tf-key { flex-basis: 100%; font-size: 13px; color: var(--text-secondary); padding-left: 22px; }
  .q2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin-bottom: 8px; }
  .q2-cell { padding: 10px 0; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 15px; font-weight: 600; cursor: pointer; }
  .q2-cell.on { background: #E3EEFB; border-color: #1F5FA8; }
  .q2-cell.ok { background: #E3F2DC; border-color: var(--success-dark); } .q2-cell.bad { background: #FBECEC; border-color: var(--danger-dark); text-decoration: line-through; }
  .q2-cell.miss { background: #FFF6D6; border-color: #C9A227; }
  .q2-ord { position: relative; padding-left: 38px !important; }
  .q2-ord::before { content: attr(data-pos); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 12px; line-height: 20px; text-align: center; }
  .q2-ord.on::before { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
  .q2-order-done li { margin: 4px 0; font-size: 14px; } .q2-order-done li.bad { color: var(--danger-dark); }
  .q2-context { background: #F3F1EA; border-radius: 8px; padding: 8px 12px; font-size: 14.5px; line-height: 1.6; }
  .q2-part { margin-top: 6px; }
  .q2-warn { font-size: 13px; color: #B4531C; margin: 4px 0; }
  .q2-count { font-size: 13px; color: var(--text-secondary); margin-right: auto; align-self: center; }
  .quiz-box.q2 .quiz-foot { gap: 8px; }
  .quiz-box.q2 .quiz-input { width: 140px; }
  /* A.115: trạng thái đã chọn rõ ràng, chọn mức độ, gợi ý sau lượt */
  .quiz-box.q2 button { transition: background-color .12s, border-color .12s, box-shadow .12s, transform .06s; }
  .quiz-box.q2 button:active:not([disabled]) { transform: scale(0.97); }
  .quiz-box.q2 .quiz-opt.on { border-color: var(--accent-dark); background: #E3EEFB; box-shadow: inset 4px 0 0 var(--accent-dark); font-weight: 600; }
  .q2-chip:hover:not([disabled]):not(.on) { border-color: var(--accent-dark); background: #F2F7FC; }
  .q2-chip.mine-ok { background: #E3F2DC; border-color: var(--success-dark); color: #2E7A2E; font-weight: 700; opacity: 1; }
  .q2-chip.mine-bad { background: #FBECEC; border-color: var(--danger-dark); color: #A32B2B; font-weight: 700; opacity: 1; text-decoration: line-through; }
  .q2-cell.on { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
  .q2-cell:hover:not([disabled]):not(.on) { border-color: var(--accent-dark); }
  .quiz-box.q2 .q2-ord.on { background: #E3EEFB; border-color: var(--accent-dark); }
  .quiz-box.q2 .q2-submit { background: #9FB6CF; border-color: #9FB6CF; }
  .quiz-box.q2 .q2-submit.ready { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(31, 95, 168, 0.18); }
  .q2-sel { font-size: 12.5px; color: var(--text-secondary); }
  .q2-badge { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; text-transform: none; letter-spacing: 0; }
  .q2-badge.ok { background: #E3F2DC; color: #2E7A2E; } .q2-badge.bad { background: #FBECEC; color: #A32B2B; }
  .quiz-q.q2-done-ok { box-shadow: inset 3px 0 0 var(--success-dark); padding-left: 10px; }
  .quiz-q.q2-done-bad { box-shadow: inset 3px 0 0 var(--danger-dark); padding-left: 10px; }
  .q2-diff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 2px; }
  .q2-diff-lab { font-size: 13px; font-weight: 700; color: var(--text-primary); }
  .q2-seg { display: inline-flex; border: 1px solid var(--accent-dark); border-radius: 999px; overflow: hidden; }
  .q2-seg-btn { padding: 6px 14px; border: 0; border-left: 1px solid var(--accent-dark); background: var(--surface); color: var(--accent-dark); font-size: 13px; font-weight: 600; cursor: pointer; }
  .q2-seg-btn:first-child { border-left: 0; }
  .q2-seg-btn.on { background: var(--accent-dark); color: #fff; }
  .q2-seg-btn:hover:not(.on) { background: #F2F7FC; }
  .q2-diff-note { flex-basis: 100%; font-size: 12px; color: var(--text-secondary); }
  .q2-tip { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: #EEF4FB; border: 1px solid #C9DBEF; border-radius: 10px; padding: 10px 12px; margin: 14px 0 4px; font-size: 14px; }
  .q2-tip span { flex: 1 1 240px; }
  /* A.116: báo lỗi câu hỏi */
  .q2-bug { margin: 2px 0 4px; text-align: right; }
  .q2-bug-link { background: none; border: 0; padding: 2px 0; font-size: 12px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .q2-bug-link:hover { color: var(--accent-dark); }
  .q2-bug-done { font-size: 12px; color: #2E7A2E; }
  .q2-bug-form { text-align: left; background: #FAF8F2; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 8px 10px; }
  .q2-bug-why { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
  .q2-bug-form .quiz-textarea { font-size: 14px; }
  /* A.117: hình minh hoạ trong câu hỏi */
  .q2-fig { margin: 2px 0 10px; overflow-x: auto; }
  .q2-fig svg { display: block; max-width: 100%; height: auto; }
  /* A.117: hàng ô nhập số + nút (bài phương trình bậc hai, ƯC/BC) xuống dòng trên điện thoại thay vì tràn ngang */
  .slider-row:has(.venn-num-input) { flex-wrap: wrap; row-gap: 8px; }
  .quiz-reset { font-size: 13px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; }
  .more-box { border: 1px solid #E8D9BF; background: #FDF7EC; border-radius: 12px; padding: 14px 18px; margin-top: 12px; }
  .more-box .more-title { font-size: 13px; font-weight: 700; color: #8A5A12; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
  .more-box ul { margin: 0; padding-left: 18px; }
  .more-box li { font-size: 14px; line-height: 1.6; margin: 2px 0; }
  .more-box a { color: #8A5A12; font-weight: 600; }
  .more-meta { color: var(--text-secondary); font-size: 13px; }
  .source-box { background: #EFF3F8; border: 1px solid #C7D4E6; border-radius: 12px; padding: 16px 18px; margin-top: 12px; }
  .source-box .source-title { font-size: 13px; font-weight: 700; color: #2C4A73; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
  .source-box p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
  .source-box a { color: #2C4A73; }
  .lesson-box p { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); margin: 0 0 8px; }
  .lesson-box p:last-child { margin-bottom: 0; }
  .fact-box { background: #EAF3FF; border: 1px solid #B9D9F7; border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; }
  .fact-box .fact-title { font-size: 13px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
  .fact-box p { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); margin: 0; }
  .related-box { background: #FAF7F0; border: 1px dashed #D8CDB4; border-radius: 12px; padding: 12px 18px; margin-top: 12px; }
  .related-box .related-title { font-size: 12px; font-weight: 700; color: #7A6A3E; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
  .related-box p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
  .related-box a { color: #7A6A3E; font-weight: 600; text-decoration: underline; cursor: pointer; }
  .related-box a:hover { color: #55491F; }
  /* ---------- Task 1.1: Ramsey — bài toán bữa tiệc ---------- */
  .ramsey-svg { display: block; margin: 0 auto 14px; max-width: 340px; width: 100%; height: auto; }
  .ramsey-edge { cursor: pointer; stroke: var(--border-strong); stroke-width: 5; stroke-dasharray: 4 4; }
  .ramsey-edge.red { stroke: #D6534A; stroke-dasharray: none; }
  .ramsey-edge.blue { stroke: #3C7FC9; stroke-dasharray: none; }
  .ramsey-edge.mono-highlight { stroke-width: 8; filter: drop-shadow(0 0 3px rgba(0,0,0,0.35)); }
  .ramsey-point { fill: var(--surface); stroke: var(--text-primary); stroke-width: 2; }
  .ramsey-point-label { font-size: 12px; font-weight: 700; fill: var(--text-primary); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
  .ramsey-legend { display: flex; gap: 16px; justify-content: center; font-size: 13px; margin-bottom: 10px; flex-wrap: wrap; }
  .ramsey-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .ramsey-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }
  /* ---------- Task 1.5: hoàn thiện hình vuông (quadraticSquare) ---------- */
  .qs-rect-known { fill: #EAF3FF; stroke: #B9D9F7; stroke-width: 1.5; }
  .qs-rect-missing { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 6 4; }
  .qs-rect-missing.revealed { fill: #EEF6E4; stroke: var(--success-dark); stroke-width: 1.5; stroke-dasharray: none; }
  .qs-label { font-size: 15px; font-weight: 700; fill: var(--text-primary); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
  .qs-dim-line { stroke: var(--text-secondary); stroke-width: 1; }
  .qs-dim-label { font-size: 12px; font-weight: 600; fill: var(--text-secondary); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
  .qs-answer-edge { stroke: #C0392B; stroke-width: 5; stroke-linecap: round; }
  .qs-answer-label { font-size: 15px; font-weight: 800; fill: #C0392B; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
  .qs-target-outline { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 6 4; }
  .qs-test-square { fill: #B9D9F7; fill-opacity: 0.55; stroke: #3C7FC9; stroke-width: 2; }
  .qs-test-square.qs-too-big { fill: #F7C6C0; fill-opacity: 0.6; stroke: #C0392B; }
  .qs-test-square.qs-match { fill: #A8DA85; fill-opacity: 0.85; stroke: var(--success-dark); stroke-width: 3; animation: qsBlink 0.55s ease-in-out 3; }
  @keyframes qsBlink { 0%, 100% { fill-opacity: 0.85; } 50% { fill-opacity: 0.25; } }
  /* ---------- Phase 2: Xác suất — Thống kê (Efron's dice / Birthday / Monty Hall / Benford) ---------- */
  .ed-face-chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; font-weight: 700; font-size: 13px; margin: 2px; }
  .ed-face-chip.die-A { background: #FBEAEA; color: #A6362E; }
  .ed-face-chip.die-B { background: #EAF3FF; color: #2C5F9E; }
  .ed-face-chip.die-C { background: #EEF6E4; color: #4C7A2C; }
  .ed-face-chip.die-D { background: #FDF2DC; color: #9C7A1C; }
  .mh-doors { display: flex; gap: 12px; justify-content: center; margin: 14px 0; }
  .mh-door { flex: 1; max-width: 100px; aspect-ratio: 3/4; border-radius: 10px; border: 3px solid var(--border-strong); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; transition: transform 0.15s ease; }
  .mh-door:hover:not(.mh-door-disabled) { transform: translateY(-3px); }
  .mh-door.mh-door-picked { border-color: var(--accent-dark); background: #EAF3FF; }
  .mh-door.mh-door-opened { background: var(--surface-2); opacity: 0.55; cursor: default; }
  .mh-door.mh-door-revealed-prize { background: #EEF6E4; border-color: var(--success-dark); }
  .mh-door.mh-door-revealed-goat { background: #FBEAEA; border-color: var(--danger-dark); }
  .mh-door-disabled { cursor: default; }
  .mh-door-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
  .mh-stats-row { display: flex; gap: 16px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
  .mh-stat-box { background: var(--surface-2); border-radius: 10px; padding: 10px 16px; text-align: center; min-width: 120px; }
  .mh-stat-box .mh-stat-title { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
  .mh-stat-box .mh-stat-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
  .bf-bar-label { font-size: 11px; fill: var(--text-secondary); text-anchor: middle; }
  /* ---------- Phase 3: Hình học & Topology (Möbius / Euler / Koch) ---------- */
  .mb-strip-svg { display: block; margin: 0 auto 12px; max-width: 320px; width: 100%; height: auto; }
  .ef-solid-card { display: inline-block; background: var(--surface-2); border-radius: 10px; padding: 12px 16px; margin: 4px; text-align: center; cursor: pointer; border: 2px solid transparent; }
  .ef-solid-card.selected { border-color: var(--accent-dark); background: #EAF3FF; }
  .ef-solid-card .ef-emoji { font-size: 28px; }
  .ef-count-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
  .ef-count-box { text-align: center; }
  .ef-count-box label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
  .ks-svg { display: block; margin: 0 auto 12px; max-width: 360px; width: 100%; height: auto; }
  /* ---------- Phase 5+6: Lượng giác (trigCircle, sineWave) + Giải tích (archimedesArea) ---------- */
  .tc-svg { display: block; margin: 0 auto 10px; max-width: 320px; width: 100%; height: auto; }
  .tc-point { fill: #D6534A; stroke: white; stroke-width: 2; cursor: grab; touch-action: none; }
  .tc-readout { text-align: center; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
  .tc-readout .tc-cos { color: #3C7FC9; }
  .tc-readout .tc-sin { color: #D6534A; }
  .sw-svg { display: block; margin: 0 auto 10px; max-width: 460px; width: 100%; height: auto; }
  .aa-svg { display: block; margin: 0 auto 10px; max-width: 380px; width: 100%; height: auto; }
  /* ---------- Task 0.3: lưới vuông dùng chung (renderSquareGrid) ---------- */
  /* Kiểu mặc định tối giản -- module dùng renderSquareGrid() có thể ghi đè bằng CSS riêng nếu cần
     (vd đặt max-width, gap khác) mà không phá cấu trúc chung; chỉ .sq-grid cần grid/display,
     grid-template-columns đã được set inline bởi hàm renderSquareGrid() theo đúng `cols` truyền vào. */
  .sq-grid { display: grid; gap: 3px; max-width: 320px; margin: 0 auto 16px; }
  .sq-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border-radius: 5px; cursor: pointer; background: #F1EFE8; border: 1px solid var(--border-strong); }
  /* ---------- Phase 4: Sân chơi khám phá (pascalExplorer, gameOfLife) ---------- */
  .pe-grid { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px 0; overflow-x: auto; }
  .pe-row { display: flex; gap: 2px; }
  .pe-cell { width: 26px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 10px; border-radius: 3px; background: #F1EFE8; color: var(--text-secondary); flex-shrink: 0; }
  .pe-cell.hl { background: var(--accent-dark); color: white; font-weight: 700; }
  .gol-grid.sq-grid { max-width: 420px; gap: 1px; }
  .gol-grid .sq-cell { background: #F1EFE8; border-color: var(--border); }
  .gol-grid .sq-cell.alive { background: var(--accent-dark); border-color: var(--accent-dark); }
  /* ---------- Phase 8: Lý thuyết trò chơi kinh tế (prisonersDilemma, stagHunt) ---------- */
  .gt-matrix { border-collapse: collapse; margin: 12px auto; font-size: 13px; }
  .gt-matrix th, .gt-matrix td { border: 1px solid var(--border-strong); padding: 10px 14px; text-align: center; }
  .gt-matrix th { background: var(--surface-2); font-weight: 700; }
  .gt-matrix td.self { background: #EAF3FF; font-weight: 700; }
  .gt-pass-status { text-align: center; font-size: 15px; font-weight: 700; margin: 12px 0 8px; padding: 14px; background: var(--surface-2); border-radius: 10px; }
  .gt-round-log { max-height: 140px; overflow-y: auto; font-size: 12.5px; line-height: 1.8; background: var(--surface-2); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
  /* ---------- Task 0.4: mẫu module "sandbox" (khám phá tự do, xem grand-plan.md mục 6.4) ---------- */
  .sandbox-box { background: #FDF9F0; border: 2px dashed #E4C97A; border-radius: 14px; padding: 18px 20px; margin: 16px 0; }
  .sandbox-box .sandbox-title { font-size: 13px; font-weight: 700; color: #9C7A1C; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }
  .discoveries-box { background: #EFF3F8; border: 1px solid #C7D4E6; border-radius: 12px; padding: 16px 18px; margin-top: 16px; }
  .discoveries-box .discoveries-title { font-size: 13px; font-weight: 700; color: #2C4A73; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
  .discoveries-box ul { margin: 0; padding-left: 20px; }
  .discoveries-box li { font-size: 13.5px; line-height: 1.7; color: var(--text-primary); margin-bottom: 6px; }
  .discoveries-box li:last-child { margin-bottom: 0; }
  .dr-table { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin-bottom: 16px; font-size: 13.5px; }
  .dr-row { padding: 5px 6px; border-radius: 6px; cursor: pointer; }
  .dr-row:hover { background: var(--surface-2); }
  .dr-row.current { background: #EAF3FF; font-weight: 700; color: var(--accent-dark); }
  .dr-cycle-divider { text-align: center; font-size: 12px; color: var(--text-secondary); font-style: italic; padding: 8px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); margin: 6px 0; }
  .dr-multiplier-picker button.tried { border-color: var(--accent-dark); background: #EAF3FF; }
  .dr-final { color: var(--danger); font-weight: 800; }
  .rf-run-highlight { background: #FFF3CD; padding: 1px 3px; border-radius: 3px; font-weight: 800; }
  .dr-m-red { color: var(--danger); font-weight: 800; }
  .dr-n-blue { color: var(--accent-dark); font-weight: 800; }
  .ec-dynamic { font-weight: 800; }
  .ec-amount-red { color: var(--danger); font-weight: 800; }
  .ec-freq-toggle { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-strong); margin-bottom: 10px; }
  .ec-freq-toggle button { flex: 1; padding: 12px; border: none; background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text-primary); }
  .ec-freq-toggle button:hover:not(:disabled) { background: var(--surface-2); }
  .ec-freq-toggle button:disabled { opacity: 0.4; cursor: not-allowed; }
  .ec-freq-toggle button:first-child { border-right: 1px solid var(--border-strong); }
  .fib-build-seq { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 17px; letter-spacing: 0.02em; background: var(--surface-2); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; word-break: break-word; line-height: 1.8; }
  .fib-build-seq .num { display: inline-block; margin-right: 4px; }
  .fib-build-seq .num.latest { color: var(--success); font-weight: 800; }
  .fib-build-chart { display: flex; align-items: flex-end; gap: 8px; overflow-x: hidden; padding: 10px 6px 4px; min-height: 220px; border-bottom: 2px solid var(--border); margin-bottom: 18px; transition: gap 0.3s ease; }
  .fib-build-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; flex: 1 1 0; min-width: 0; max-width: 70px; }
  .fib-build-bar { position: relative; width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: var(--accent); transition: height 0.5s cubic-bezier(.34,1.56,.64,1), width 0.3s ease; min-height: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .fib-build-bar.latest { background: var(--success); }
  .fib-build-bar .bar-val { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 800; color: #FFE9A8; letter-spacing: 0.03em; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
  .fib-build-bar.latest .bar-val { color: #ffffff; }
  .fib-build-idx { font-size: 10px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }
  .fib-ratio-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .fib-ratio-row { display: flex; align-items: center; gap: 10px; }
  .fib-ratio-row .frlabel { min-width: 64px; font-size: 12px; color: var(--text-secondary); text-align: right; white-space: nowrap; }
  .fib-ratio-row .frtrack { flex: 1; background: var(--surface-2); border-radius: 6px; overflow: hidden; height: 26px; }
  .fib-ratio-row .frbar { height: 100%; border-radius: 6px; transition: width 0.4s ease; display: flex; align-items: center; padding-left: 8px; box-sizing: border-box; }
  .fib-ratio-row .frbar span { color: white; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .fib-stairs-path { display: flex; gap: 3px; margin-bottom: 6px; align-items: center; }
  .fib-stairs-path .step-chip { height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 700; flex-shrink: 0; }
  .fib-stairs-path .step-chip.s1 { width: 24px; background: var(--accent); }
  .fib-stairs-path .step-chip.s2 { width: 48px; background: var(--success); }
  .fib-recur-eqn { font-size: 16px; font-weight: 600; text-align: center; padding: 12px; background: #F3F7EC; border: 1px solid #C9DDA8; border-radius: 10px; margin-top: 10px; }
  .venn-wrap { position: relative; height: 260px; margin-bottom: 16px; width: 490px; max-width: 100%; }
  .venn-circle { position: absolute; top: 20px; width: 300px; height: 220px; border-radius: 50%; opacity: 0.18; }
  .venn-circle.left { left: 20px; background: var(--accent); }
  .venn-circle.right { left: 170px; background: #EF9F27; }
  .venn-label { position: absolute; top: 0; width: 150px; text-align: center; font-size: 13px; font-weight: 700; }
  .venn-label.left { left: 20px; color: var(--accent-dark); }
  .venn-label.right { left: 320px; color: #B4740E; }
  .venn-region { position: absolute; top: 40px; width: 150px; height: 180px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 8px; font-size: 12px; overflow-y: auto; }
  .venn-region.left { left: 20px; justify-content: flex-end; }
  .venn-region.mid { left: 170px; width: 150px; justify-content: center; }
  .venn-region.right { left: 320px; }
  @media (max-width: 540px) {   /* A.117: sơ đồ Venn co theo màn hình điện thoại (trước đây rộng cố định 490px, tràn ngang) */
    .venn-wrap { width: 100%; }
    .venn-circle { width: 61.2%; } .venn-circle.left { left: 4.1%; } .venn-circle.right { left: 34.7%; }
    .venn-label, .venn-region, .venn-region.mid { width: 30.6%; }
    .venn-label.left, .venn-region.left { left: 4.1%; } .venn-region.mid { left: 34.7%; }
    .venn-label.right, .venn-region.right { left: 65.3%; }
    .venn-region { padding: 6px 2px; }
  }
  .venn-chip { padding: 2px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); }
  .venn-chip.highlight { background: var(--danger); color: white; border-color: var(--danger-dark); font-weight: 700; }
  .venn-more-marker { width: 100%; text-align: center; font-size: 11px; color: var(--text-secondary); font-style: italic; margin-top: 2px; }
  .power-bars { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; margin-bottom: 16px; }
  .power-bar-row { display: contents; }
  .power-bar-row .plabel { font-size: 12px; color: var(--text-secondary); text-align: right; white-space: nowrap; }
  .power-bar-row .pbar-track { width: 100%; }
  .power-bar-row .pbar { height: 22px; background: var(--accent); border-radius: 4px; min-width: 4px; transition: width 0.3s ease; }
  .power-bar-row .pval { font-size: 12px; font-weight: 600; white-space: nowrap; }
  .venn-num-input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 13px; text-align: center; }
  .frac-input-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .pr-fitted { display: grid; gap: 3px; margin-bottom: 14px; }
  .pr-fitted .cell { aspect-ratio: 1; border-radius: 4px; background: var(--accent); border: 1px solid var(--accent-dark); }
  .pr-fitted .cell.remainder { background: var(--danger); border-color: var(--danger-dark); }
  .ruler-track { position: relative; height: 50px; background: linear-gradient(to right, var(--surface-2), var(--surface-2)); border-radius: 8px; border: 1px solid var(--border-strong); margin-bottom: 8px; }
  .ruler-pin { position: absolute; top: -4px; width: 4px; height: 42px; transform: translateX(-50%); transition: left 0.5s ease; }
  .ruler-pin-a { background: var(--accent); }
  .ruler-pin-b { background: #EF9F27; }
  .ruler-pin span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--text-primary); }
  .mult-grid-marker { position: relative; }
  .mult-grid-marker.predict-boundary { outline: 3px dashed #EF9F27; outline-offset: -2px; }

  /* Lớp nối của hạ tầng mới */
  .hub-soon { font-size: 13px; color: var(--text-secondary); font-style: italic; margin: 0 0 6px; }
  .htt-tu-khoa { font-size: 13px; color: var(--text-secondary); margin: 6px 0 12px; }
  .htt-khoa { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 14px 16px; margin: 12px 0; font-size: 14px; }
  .htt-khoa p { margin: 0 0 10px; }
  .htt-khoa .primary-btn { width: auto; background: var(--accent-dark); border: 1px solid var(--accent-dark); color: #fff; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
  .htt-muc-tieu { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 12px 0; background: var(--surface); }
  .htt-mt-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 4px; }
  .htt-muc-tieu ul { margin: 0; padding-left: 20px; } .htt-muc-tieu li { font-size: 14px; line-height: 1.55; margin: 3px 0; }
  .htt-mt-can { font-size: 12px; color: var(--text-secondary); }
  .htt-dang-soan { font-size: 13px; color: var(--text-secondary); font-style: italic; margin: 12px 0; }
  .htt-cau-hoi { font-size: 16px; font-weight: 600; color: var(--accent-dark); margin: 4px 0 12px; }

/* Câu "xếp nhóm": mục cần xếp có thể là một câu dài (không chỉ là một số), nên để rộng theo nội dung thay vì cố định 48px. */
.q2-match-t { flex: 0 1 auto; min-width: 48px; max-width: 100%; }

/* Thanh bám đầu trang ở trang con: [ngôi nhà] [ô tìm] [bài trước] [bài sau] */
.htt-thanh { position: sticky; top: var(--hdr-h, 0px); z-index: 99; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px max(20px, calc((100% - 680px) / 2)); }
#httThanh { margin: 0 0 6px; }
.htt-thanh .htt-nha { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); cursor: pointer; }
.htt-thanh .htt-nha:hover { border-color: #185FA5; color: #185FA5; }
#hubSearch.htt-tim { flex: 1 1 200px; min-width: 110px; max-width: none; margin: 0; padding: 0 !important; }
#hubSearch.htt-tim .hs-field { padding: 3px 10px; }
#httTim { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; padding: 5px 0; color: var(--text-primary); }
.htt-thanh #moduleNavPagerGroup { flex: 0 1 auto; }
.htt-thanh #moduleNavPagerGroup button { max-width: 170px; }
.htt-tim-kq { position: absolute; z-index: 30; left: max(20px, calc((100% - 680px) / 2)); right: max(20px, calc((100% - 680px) / 2)); top: calc(100% - 4px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; max-height: 60vh; overflow-y: auto; }
.htt-tim-kq[hidden] { display: none; }
.htt-tim-muc { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text-primary); text-decoration: none; font-size: 14px; line-height: 1.4; }
.htt-tim-muc:hover, .htt-tim-muc:focus { background: var(--surface-2); outline: none; }
.htt-tim-so { color: var(--text-secondary); font-size: 12px; }
.htt-tim-khoa { font-size: 11px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 1px 7px; color: var(--text-secondary); white-space: nowrap; }
.htt-tim-phan { display: block; font-size: 12px; color: var(--text-secondary); }
.htt-tim-rong { margin: 8px 10px; font-size: 14px; color: var(--text-secondary); }
@media (max-width: 560px) {
  .htt-thanh { padding: 8px 14px; gap: 6px; }
  .htt-tim-kq { left: 14px; right: 14px; }
  .htt-thanh #moduleNavPagerGroup { gap: 6px; }
  .htt-thanh #moduleNavPagerGroup button { width: 38px; height: 38px; padding: 0; font-size: 16px; }
}
/* Trang chủ: ô tìm cũng bám đầu trang; dải Câu đố hôm nay nằm ngay dưới, không bám theo */
#hubSearch.htt-dinh { position: sticky; top: var(--hdr-h, 0px); z-index: 98; background: var(--bg); padding-top: 8px; padding-bottom: 8px; }
#hubSearch + #dailyStrip { max-width: 720px; margin: 4px auto; padding: 0 20px; box-sizing: border-box; }
@media (max-width: 640px) { #hubSearch + #dailyStrip { padding: 0 14px; } }
#moduleNavBar .htt-nha { padding: 0; overflow: visible; width: 38px; height: 38px; }
.htt-thanh .htt-nha svg { flex: 0 0 18px; width: 18px; height: 18px; }

  /* A.146: thanh "Góc trò chơi" ngay dưới header, mọi trang, cho mức tự do thấy ngay không cần cuộn */
  .game-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13.5px; }
  .game-bar-label { color: var(--text-secondary); font-weight: 600; }
  .game-bar-link { color: var(--accent-dark); text-decoration: none; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); }
  .game-bar-link:hover { text-decoration: underline; }

  /* A.146: danh sách chủ đề đang xây dựng trong phần còn trống (ví dụ "Bẫy tư duy") */
  .hub-soon-list { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .hub-soon-list li { font-size: 13.5px; color: var(--text-secondary); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 6px 10px; }
  .hub-soon-tag { display: block; font-size: 11px; color: var(--text-secondary); opacity: 0.75; margin-top: 2px; }