/* ============================================================
   style.css — Hệ thiết kế dùng chung toàn site Vật lí 12
   Hệ màu đã chốt:
     rắn   #2563eb | lỏng #0891b2 | khí #ef4444
     nền tối #0B2740 | chữ #1f2937
   Font: tiêu đề serif (Cambria/Georgia), thân Segoe UI/Calibri
   ============================================================ */

:root {
  --mau-ran:   #2563eb;
  --mau-long:  #0891b2;
  --mau-khi:   #ef4444;
  --nen-toi:   #0B2740;
  --chu:       #1f2937;
  --chu-nhat:  #6b7280;
  --nen-sang:  #f8fafc;
  --nen-the:   #ffffff;
  --vien:      #e2e8f0;
  --dung:      #16a34a;
  --sai:       #dc2626;
  --font-tieu-de: Cambria, Georgia, "Times New Roman", serif;
  --font-than:    "Segoe UI", Calibri, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-than);
  color: var(--chu);
  background: var(--nen-sang);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-tieu-de);
  color: var(--nen-toi);
  line-height: 1.25;
}

a { color: var(--mau-ran); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Bố cục ---------- */
.container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1 1 240px; }

/* ---------- Thẻ (card) ---------- */
.card {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: 16px 20px;
}
.card h3 { margin-top: 0; }

.card--ran  { border-top: 4px solid var(--mau-ran); }
.card--long { border-top: 4px solid var(--mau-long); }
.card--khi  { border-top: 4px solid var(--mau-khi); }

/* ---------- Bảng so sánh ---------- */
table.so-sanh {
  width: 100%;
  border-collapse: collapse;
  background: var(--nen-the);
  font-size: 0.95em;
}
table.so-sanh th, table.so-sanh td {
  border: 1px solid var(--vien);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
table.so-sanh thead th {
  background: var(--nen-toi);
  color: #fff;
  font-family: var(--font-tieu-de);
}
table.so-sanh th.col-ran  { background: var(--mau-ran); color:#fff; }
table.so-sanh th.col-long { background: var(--mau-long); color:#fff; }
table.so-sanh th.col-khi  { background: var(--mau-khi); color:#fff; }
table.so-sanh tbody tr:nth-child(even) { background: #f1f5f9; }

/* ---------- Nút ---------- */
.nut {
  display: inline-block;
  font-family: var(--font-than);
  font-size: 1em;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--nen-toi);
  background: var(--nen-toi);
  color: #fff;
  cursor: pointer;
}
.nut:hover { filter: brightness(1.15); text-decoration: none; }
.nut--phu {
  background: transparent;
  color: var(--nen-toi);
}
.nut--phu:hover { background: #e2e8f0; filter: none; }
.nut:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Header trang (dùng cho index/check) ---------- */
.site-header {
  background: var(--nen-toi);
  color: #fff;
  padding: 28px 16px;
}
.site-header h1 { color: #fff; margin: 0 0 6px; }
.site-header p { margin: 0; opacity: 0.85; }

/* ---------- Mục lục lộ trình (index) ---------- */
.chuong { margin: 28px 0; }
.chuong > h2 {
  border-bottom: 2px solid var(--vien);
  padding-bottom: 6px;
}
ol.ds-bai { padding-left: 20px; margin: 8px 0; }
ol.ds-bai li { margin: 8px 0; font-size: 1.05em; }

/* ---------- Trắc nghiệm (dùng bởi quiz.js) ---------- */
.quiz-cau {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 10px 0;
  text-align: left;
}
.quiz-cau .de { font-weight: 600; margin-bottom: 6px; }
.quiz-cau label {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.quiz-cau label:hover { background: #f1f5f9; }
.quiz-cau.cham-dung { border-left: 5px solid var(--dung); }
.quiz-cau.cham-sai  { border-left: 5px solid var(--sai); }
.quiz-giai-thich { font-size: 0.92em; color: var(--chu-nhat); margin-top: 4px; }

.quiz-diem { font-size: 1.2em; font-weight: 700; margin: 12px 0; }

.quiz-ma-hop {
  background: #f1f5f9;
  border: 1px dashed var(--chu-nhat);
  border-radius: 8px;
  padding: 10px;
  font-family: Consolas, monospace;
  font-size: 0.85em;
  word-break: break-all;
  text-align: left;
}

input.quiz-input, textarea.quiz-input {
  font-family: var(--font-than);
  font-size: 1em;
  padding: 8px 10px;
  border: 1px solid var(--vien);
  border-radius: 8px;
  width: 100%;
}
textarea.quiz-input { font-family: Consolas, monospace; }

/* ---------- Bảng kết quả (check.html) ---------- */
table.ket-qua {
  width: 100%;
  border-collapse: collapse;
  background: var(--nen-the);
  font-size: 0.92em;
}
table.ket-qua th, table.ket-qua td {
  border: 1px solid var(--vien);
  padding: 6px 10px;
}
table.ket-qua thead th { background: var(--nen-toi); color: #fff; }
td.dung { color: var(--dung); font-weight: 600; }
td.sai  { color: var(--sai);  font-weight: 600; }
tr.ma-loi td { background: #fef2f2; color: var(--sai); }

/* ---------- Điều hướng bài (nav.js) ---------- */
.nav-bai {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 60;
  display: flex;
  gap: 8px;
  font-family: var(--font-than);
  font-size: 0.85em;
}
.nav-bai a {
  background: rgba(11, 39, 64, 0.85);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
}
.nav-bai a:hover { background: var(--nen-toi); text-decoration: none; }

/* ---------- Tiện ích ---------- */
.ghi-chu-nho { font-size: 0.88em; color: var(--chu-nhat); }
.trung-tam { text-align: center; }

/* ============================================================
   BÀI VIẾT VUỐT DỌC (article) — thêm cho bản thiết kế mới 2026
   ============================================================ */

/* Thanh tiến độ đọc trên đỉnh trang */
.doc-progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0%;
  background: linear-gradient(90deg, var(--mau-ran), var(--mau-long), var(--mau-khi));
  z-index: 80; transition: width .1s linear;
}

/* Header rút gọn của bài viết (khác site-header lớn) */
.bv-header {
  background: var(--nen-toi); color: #fff; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 70;
}
.bv-header a.home { color:#fff; font-size:1.1em; text-decoration:none; }
.bv-header .bv-chuong { font-size:.85em; opacity:.8; font-family: var(--font-than); }

/* Lưới: cột đọc + mục lục bên phải */
.bv-wrap {
  max-width: 1100px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 40px;
}
.baiviet { max-width: 720px; padding: 24px 0 80px; font-size: 1.06em; }
.baiviet .bv-tieude { margin-top: 8px; }
.baiviet .bv-tomtat {
  font-size: 1.05em; color: var(--chu-nhat); font-style: italic;
  border-left: 4px solid var(--mau-long); padding-left: 14px; margin: 14px 0 28px;
}
.baiviet h2 { margin-top: 2em; scroll-margin-top: 70px; }
.baiviet h3 { margin-top: 1.6em; scroll-margin-top: 70px; color: var(--mau-ran); }
.baiviet p { margin: 1em 0; }
.baiviet ul, .baiviet ol { margin: 1em 0; padding-left: 24px; }
.baiviet li { margin: .5em 0; }
.baiviet img { max-width: 100%; height: auto; }

/* Hình + chú thích */
.baiviet figure { margin: 24px 0; text-align: center; }
.baiviet figure img {
  border: 1px solid var(--vien); border-radius: 10px; background:#fff; padding: 8px;
}
.baiviet figcaption {
  font-size: .9em; color: var(--chu-nhat); margin-top: 8px; font-style: italic;
}

/* Callout (khoảng lặng / ghi chú GV / lưu ý) */
.callout {
  border-radius: 10px; padding: 12px 16px 12px 44px; margin: 20px 0;
  position: relative; background: var(--nen-sang); border: 1px solid var(--vien);
}
.callout::before {
  position: absolute; left: 12px; top: 12px; font-size: 1.2em; line-height: 1;
}
.callout--suynghi { background:#eff6ff; border-color:#bfdbfe; }
.callout--suynghi::before { content:"💭"; }
.callout--gv { background:#fef9c3; border-color:#fde68a; }
.callout--gv::before { content:"🧑‍🏫"; }
.callout--luuy { background:#f0fdf4; border-color:#bbf7d0; }
.callout--luuy::before { content:"📌"; }
.callout .nhan { font-weight:700; }

/* Khối mô phỏng nhúng trong bài */
.mo-phong {
  margin: 28px 0; border: 1px solid var(--vien); border-radius: 12px;
  overflow: hidden; background: var(--nen-the);
}
.mo-phong .mp-thanh {
  background: var(--nen-toi); color:#fff; padding: 8px 14px;
  font-family: var(--font-tieu-de); font-size:.95em;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.mo-phong .mp-dieu-khien { display:flex; align-items:center; gap:10px; font-family:var(--font-than); font-size:.85em; }
.mo-phong .mp-dieu-khien label { display:flex; align-items:center; gap:6px; }
.mo-phong canvas { display:block; width:100%; background:#f8fafc; }

/* Chú thích / footnote */
sup.fnref { font-size:.75em; }
sup.fnref a { padding: 0 1px; }
.footnotes { margin-top: 48px; border-top: 2px solid var(--vien); padding-top: 12px; font-size:.92em; color: var(--chu-nhat); }
.footnotes ol { padding-left: 20px; }
.footnotes li { margin:.6em 0; scroll-margin-top: 70px; }
.footnotes li:target { background:#fff7ed; border-radius:6px; }

/* ---------- Mục lục dính (TOC) ---------- */
.toc-col { position: relative; }
.toc {
  position: sticky; top: 70px; align-self: start;
  font-family: var(--font-than); font-size: .92em;
  border-left: 2px solid var(--vien); padding-left: 14px; max-height: calc(100vh - 90px); overflow:auto;
}
.toc .toc-tit { font-family: var(--font-tieu-de); color: var(--nen-toi); font-weight:700; margin-bottom:8px; }
.toc a { display:block; color: var(--chu-nhat); padding: 4px 0; border-left: 2px solid transparent; margin-left:-16px; padding-left:14px; }
.toc a.lv3 { padding-left: 28px; font-size:.95em; }
.toc a:hover { color: var(--mau-ran); text-decoration:none; }
.toc a.active { color: var(--mau-ran); border-left-color: var(--mau-ran); font-weight:600; }

/* Nút "lên đầu" */
.len-dau {
  position: fixed; bottom: 14px; right: 14px; z-index: 60;
  background: rgba(11,39,64,.85); color:#fff; border:none; cursor:pointer;
  width: 42px; height: 42px; border-radius: 50%; font-size: 1.2em; display:none;
}
.len-dau.hien { display:block; }

/* Nút mở mục lục trên mobile */
.toc-toggle { display:none; }

@media (max-width: 900px) {
  .bv-wrap { grid-template-columns: 1fr; }
  .toc-col { order: -1; }
  .toc {
    position: static; max-height: none; border-left: none; padding-left:0;
    background: var(--nen-sang); border:1px solid var(--vien); border-radius:10px; padding:12px 14px;
    display:none; margin: 12px 0;
  }
  .toc.mo { display:block; }
  .toc a { margin-left:0; }
  .toc-toggle {
    display:inline-block; margin: 12px 0 0; font-family:var(--font-than);
    background: var(--nen-sang); border:1px solid var(--vien); border-radius:8px;
    padding:8px 14px; cursor:pointer; color:var(--nen-toi); font-size:.95em;
  }
}

/* ============================================================
   HUB CHƯƠNG (super-slide) — nút bấm mở tóm tắt → chi tiết
   ============================================================ */
.hub-body { background: var(--nen-toi); min-height: 100vh; color:#fff; }
.hub-head { text-align:center; padding: 28px 16px 8px; }
.hub-head h1 { color:#fff; margin:0 0 6px; }
.hub-head p { margin:0; opacity:.8; font-family:var(--font-than); font-size:.95em; }
.hub-stage {
  position: relative; max-width: 960px; margin: 0 auto; padding: 24px 16px 60px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px;
}
.hub-node {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; padding: 18px; cursor: pointer; color:#fff;
  transition: transform .15s, background .15s, border-color .15s; text-align:left;
}
.hub-node:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); border-color: var(--mau-long); }
.hub-node .stt { font-family:var(--font-tieu-de); font-size:.8em; opacity:.6; letter-spacing:.05em; }
.hub-node h3 { color:#fff; margin:.3em 0 0; font-size:1.05em; }
.hub-node .loai-badge { margin-top:10px; }

.loai-badge {
  display:inline-block; font-family:var(--font-than); font-size:.72em; font-weight:600;
  padding: 2px 9px; border-radius: 999px; text-transform:uppercase; letter-spacing:.04em;
}
.loai-baiviet { background: var(--mau-ran); color:#fff; }
.loai-slide   { background: var(--mau-khi); color:#fff; }
.loai-sodo    { background: var(--mau-long); color:#fff; }

/* Thẻ peek (tóm tắt) trượt lên khi bấm node */
.peek-backdrop {
  position: fixed; inset:0; background: rgba(0,0,0,.5); z-index: 90;
  opacity:0; pointer-events:none; transition: opacity .2s;
}
.peek-backdrop.mo { opacity:1; pointer-events:auto; }
.peek {
  position: fixed; left:50%; bottom:0; transform: translate(-50%, 100%);
  width: min(560px, 94vw); background: var(--nen-the); color: var(--chu);
  border-radius: 16px 16px 0 0; padding: 22px 22px 26px; z-index: 91;
  transition: transform .25s ease, opacity .2s ease, visibility .2s;
  box-shadow: 0 -8px 30px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden;   /* ẩn hoàn toàn khi chưa mở */
}
.peek.mo { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.peek .peek-loai { margin-bottom: 10px; }
.peek h3 { margin: 0 0 8px; color: var(--nen-toi); }
.peek p { margin: 0 0 18px; color: var(--chu); }
.peek .peek-act { display:flex; gap:10px; flex-wrap:wrap; }
.peek .peek-dong {
  position:absolute; top:12px; right:14px; border:none; background:none;
  font-size:1.4em; cursor:pointer; color:var(--chu-nhat); line-height:1;
}
@media (min-width: 640px) {
  .peek { bottom: 50%; transform: translate(-50%, 60%); border-radius: 16px; }
  .peek.mo { transform: translate(-50%, 50%); }
}

/* Tài liệu tham khảo (chung) */
.tk-list { font-size:.92em; }
.tk-list li { margin:.5em 0; }