:root{--bg:#f8fafc;--card:#fff;--ink:#0f172a;--muted:#64748b;--brand:#2563eb}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.wrap{max-width:1000px;margin:0 auto;padding:16px}
h1{margin:0 0 12px;font-size:22px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.04);padding:16px}
.muted{color:var(--muted)}
.rules{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#1d4ed8;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:12px}
a.btn{display:block;text-align:center;padding:10px 0;border:1px solid #e5e7eb;border-radius:12px;background:#fff;text-decoration:none;color:#111}
a.btn:hover{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
footer{margin-top:24px;color:var(--muted);font-size:12px;text-align:center}

/* Guide text under rules */
.guide{margin-top:12px}
.guide p{margin:6px 0; line-height:1.6}
/* --- hocthilaixe header --- */
:root{--brand:#2a7cff;--text:#111;--muted:#6b7280;--line:#e5e7eb}
.hlx *{box-sizing:border-box}
.hlx .topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;font-family:Montserrat,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.hlx .brand{font-weight:700;font-size:22px;display:flex;align-items:center;gap:6px}
.hlx .brand::before{content:"";width:14px;height:14px;background:var(--brand);border-radius:2px;display:inline-block}
.hlx .date{color:var(--muted);font-size:14px;white-space:nowrap}
.hlx .search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #e5e7eb;padding:8px 10px;border-radius:999px;min-width:220px}
.hlx .search input{border:0;outline:0;background:transparent;width:100%}
.hlx .actions{display:flex;align-items:center;gap:14px;margin-left:6px}
.hlx .actions a{color:#111;text-decoration:none;font-weight:600}
.hlx .nav{border-bottom:1px solid var(--line);background:#fff}
.hlx .nav-inner{display:flex;align-items:center;gap:18px;padding:10px 16px}
.hlx .nav a{color:#374151;text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.hlx .nav a:hover{background:#f3f4f6}
#hlx-menu-toggle{display:none}
.hlx .burger{display:none;margin-left:auto;cursor:pointer}
.hlx .burger span{display:block;width:22px;height:2px;background:#111;margin:5px 0;border-radius:2px}
@media (max-width:900px){
  .hlx .search,.hlx .actions{display:none}
  .hlx .burger{display:block}
  .hlx .links{display:none;flex-direction:column;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}
  #hlx-menu-toggle:checked ~ .links{display:flex}
}
.hlx .hero{position:relative;min-height:220px;display:flex;align-items:center;background:#7b2c2c url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;color:#fff;overflow:hidden}
.hlx .hero::before{content:"";position:absolute;inset:0;background:rgba(90,10,10,.45)}
.hlx .hero-content{position:relative;padding:48px 16px;max-width:1100px;margin:0 auto;width:100%}
.hlx .hero h1{margin:0;font-size:44px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hlx .hero .sub{margin-top:10px;font-size:18px;opacity:.95}
@media (max-width:600px){.hlx .hero{min-height:180px}.hlx .hero h1{font-size:30px}}
/* --- /end --- */

/* === Site footer (dễ bảo trì) === */
.site-footer{
  text-align:center;
  color:#d70000;        /* đỏ đậm */
  font-weight:700;      /* in đậm */
  background:#fff;
  padding:10px 12px;
  border-top:1px solid #eee;
  line-height:1.4;
}
/* === Top Wrong (fixed right) === */
.top-wrong-fixed{position:fixed;top:120px;right:20px;width:280px;max-height:70vh;overflow-y:auto;background:#fff;padding:12px 16px;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.1);z-index:999}
@media (max-width: 1024px){.top-wrong-fixed{display:none}}
/* === Layout: main + sidebar (safe) === */
.hlx-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.hlx-main{min-width:0}
.hlx-sidebar{position:sticky;top:16px}
.hlx-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.hlx-ad{height:180px;display:flex;align-items:center;justify-content:center;font-weight:600;color:#374151;background:linear-gradient(180deg,#fafafa,#f3f4f6)}
@media (max-width:1024px){.hlx-layout{grid-template-columns:1fr}.hlx-sidebar{position:static}}
/* Style cho box quảng cáo */
.hlx-ad {
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  font-size: 18px;
  line-height: 1.5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hlx-ad:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}
/* Style mới cho khu vực bình luận */
#comments .card {
  border: 1px solid #1877f2;
  border-radius: 10px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(24,119,242,0.15);
}
#comments input, #comments textarea {
  border: 1px solid #1877f2;
  border-radius: 8px;
}
#comments button.btn.primary {
  background: #1877f2;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  transition: background 0.2s;
}
#comments button.btn.primary:hover {
  background: #145dbf;
}
/* Style xanh Facebook cho bình luận */
#comments .card {
  border: 1px solid #1877f2;
  border-radius: 10px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(24,119,242,0.15);
  margin-bottom: 12px;
}
#comments input, #comments textarea {
  border: 1px solid #1877f2;
  border-radius: 8px;
  padding: 8px;
}
#comments button.btn.primary {
  background: #1877f2;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  transition: background 0.2s;
}
#comments button.btn.primary:hover {
  background: #145dbf;
}
/* Tắt viền khung lớn khu bình luận */
#comments.card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Style cho nút chọn Đề thi */
#list .btn {
  border: 2px solid #f97316;
  color: #000;
  background: #fff;
  border-radius: 10px;
  font-weight: bold;
  transition: all 0.2s ease;
}
#list .btn:hover {
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* Thu nhỏ nút đề cho gọn */
#list .btn {
  padding: 6px 12px !important;
  font-size: 14px !important;
  margin: 4px !important;
  border: 2px solid #f97316;
  border-radius: 8px;
  background: #fff;
  color: #000;
  transition: all 0.2s ease;
}
#list .btn:hover {
  background: #fef3e7;
  color: #000;
}
/* Style nút Đề với viền xanh Facebook mảnh */
#list .btn {
  padding: 6px 12px !important;
  font-size: 14px !important;
  margin: 4px !important;
  border: 1px solid #1877f2 !important;
  border-radius: 6px;
  background: #fff;
  color: #000 !important;
  transition: all 0.2s ease;
}
#list .btn:hover {
  background: #e7f0ff;
  color: #000;
}
/* Style nút Đề nền xanh nhạt, chữ trắng */
#list .btn {
  padding: 6px 12px !important;
  font-size: 14px !important;
  margin: 4px !important;
  border: 1px solid #1877f2 !important;
  border-radius: 6px;
  background: #1877f2 !important;
  color: #fff !important;
  font-weight: 500;
  transition: all 0.2s ease;
}
#list .btn:hover {
  background: #145dbf !important;
  border-color: #145dbf !important;
}
/* ==== Mobile overflow fix for exam result ==== */
img, svg, canvas { max-width:100% !important; height:auto !important; }
@media (max-width: 480px){
  html, body { overflow-x:hidden; }
  .card, section, header, main { max-width:100% !important; }
  /* Thu nhỏ chart/donut kết quả về giữa màn hình */
  .chart, .donut, [class*="chart"], [class*="donut"] {
    width:240px !important; height:240px !important; margin:0 auto !important; float:none !important;
  }
  /* Lưới số câu thu gọn để không tràn ngang */
  .grid, .numbers, .answers, .grid-answers {
    display:grid !important; grid-template-columns:repeat(6,1fr) !important; gap:8px !important;
  }
  .grid .btn, .numbers .btn, .answers .btn, .grid-answers .btn {
    min-width:auto !important; padding:6px 0 !important; font-size:14px !important;
  }
  /* Tránh rule nào đó ẩn nhầm phần tóm tắt/chi tiết trên mobile */
  .exam-result, .exam-result .summary, .exam-result .details {
    display:initial !important; visibility:visible !important;
  }
}

/* === Video player custom size === */
.player-exam video,
#video1,
#player {
  width: 100%;
  height: auto;        /* Giữ đúng tỉ lệ gốc */
  max-height: 80vh;    /* Không vượt quá 80% chiều cao màn hình */
  background: #000;    /* Nền đen khi chưa load */
  display: block;
  margin: 0 auto;      /* Căn giữa */
  border-radius: 8px;  /* Bo góc nhẹ */
  object-fit: contain; /* Hiển thị toàn bộ video, có thể có viền đen */
}
/* === Video player custom size === */
.player-exam video,
#video1,
#player {
  width: 100%;
  height: auto;        /* Giữ đúng tỉ lệ gốc */
  max-height: 80vh;    /* Không vượt quá 80% chiều cao màn hình */
  background: #000;    /* Nền đen khi chưa load */
  display: block;
  margin: 0 auto;      /* Căn giữa */
  border-radius: 8px;  /* Bo góc nhẹ */
  object-fit: contain; /* Hiển thị toàn bộ video, có thể có viền đen */
}
/* ===== HLX bandbar ===== */
.hlx-bandbar{position:relative;height:10px;border-radius:6px;background:#eee;overflow:hidden;margin:8px 0 2px}
.hlx-band{position:absolute;top:0;bottom:0}
.hlx-g5{background:#16a34a}   /* 5đ: xanh */
.hlx-g4{background:#22c55e}   /* 4đ: xanh nhạt */
.hlx-g3{background:#a3e635}   /* 3đ: vàng xanh */
.hlx-g2{background:#f59e0b}   /* 2đ: cam */
.hlx-g1{background:#ef4444}   /* 1đ: đỏ */
.hlx-hit{position:absolute;top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid #111;transform:translateX(-50%)}
.hlx-hit-line{position:absolute;top:0;bottom:0;width:2px;background:#111;transform:translateX(-50%);opacity:.5}
.hlx-metainfo{font-size:12px;color:#555;margin-bottom:4px}