/* Hệ thiết kế lấy nguyên từ bản mock "Hỏi Đáp THPT".
   Viết thành CSS thật thay vì style nội tuyến: nhẹ trang, cache được, và
   trang HTML trả về gọn hơn nhiều — quan trọng khi có 5.858 trang. */

:root {
  --bg: #f6f6fa;
  --ink: #0f172a;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #f1f2f7;
  --chip: #f1f2f7;
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --card: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 40px -24px rgba(15, 23, 42, .18);
  --radius: 20px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
input, textarea, button, select { font-family: inherit; }
input:focus, textarea:focus { outline: none; }
input::placeholder, textarea::placeholder { color: var(--faint); }
.katex { font-size: 1.05em; }
h1, h2, h3 { letter-spacing: -.02em; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* ---------- Thanh trên ---------- */
.header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.header .wrap { height: 64px; display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }
.logo:hover { color: var(--ink); }
/* Khai sẵn tỉ lệ 650×121 của tệp logo để trình duyệt chừa đúng chỗ trước khi
   ảnh về — logo nằm ngay đầu trang nên nó nhảy là cả trang giật. */
.logo img { height: 30px; width: auto; display: block; }
.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; color: #334155;
  background: none; border: 0; cursor: pointer;
}
.icon-btn:hover { background: #eef0f6; color: var(--ink); }
.searchbox { flex: 1; max-width: 560px; margin: 0 auto; position: relative; }
.searchbox svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.searchbox input {
  width: 100%; height: 42px; padding: 0 14px 0 40px;
  border: 1px solid transparent; border-radius: 12px;
  background: #eef0f6; font-size: 14px; color: var(--ink);
}
.searchbox input:focus {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}

/* ---------- Ngăn kéo điều hướng ---------- */
.scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 40; display: none; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 88vw;
  background: #fff; z-index: 50; display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
#nav-toggle { display: none; }
#nav-toggle:checked ~ .scrim { display: block; }
#nav-toggle:checked ~ .drawer { transform: translateX(0); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35); }
.drawer-head { height: 64px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px 32px; }

/* Hàng chung cho cả ba tầng: lớp, môn, chương. */
.nav-all,
.nav-grade > summary,
.nav-subject > summary {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border-radius: 12px; font-size: 14px; font-weight: 600; color: #334155;
  cursor: pointer; list-style: none;
}
.nav-grade > summary::-webkit-details-marker,
.nav-subject > summary::-webkit-details-marker { display: none; }
.nav-all:hover,
.nav-grade > summary:hover,
.nav-subject > summary:hover { background: #f3f4f9; color: var(--ink); }

.nav-mark {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: #fff; background: #0f172a;
  font-size: 13px; font-weight: 800;
}
.nav-mark.grade { background: linear-gradient(135deg, #4f46e5, #7c3aed); font-size: 14px; }
.nav-label { flex: 1; min-width: 0; }
.nav-count { font-size: 12px; font-weight: 600; color: var(--faint); }
.chev { flex: none; color: #94a3b8; transition: transform .2s; }
details[open] > summary > .chev { transform: rotate(180deg); }

.nav-grade { margin-bottom: 2px; }
.nav-grade > summary { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.nav-subject > summary { font-size: 13.5px; }
.nav-subject > summary .nav-mark { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }

/* Nhánh con thụt vào và có gạch dọc để thấy rõ tầng. */
.nav-branch { margin: 2px 0 8px 27px; padding-left: 12px; border-left: 2px solid #eef0f6; }
.nav-subject .nav-branch { margin-left: 22px; }

.nav-chapter {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 9px; font-size: 13px; color: #475569;
}
.nav-chapter:hover { background: #f3f4f9; color: var(--ink); }
.nav-chapter.all { font-weight: 700; color: var(--brand); }

/* ---------- Bố cục chính ---------- */
.main { display: flex; gap: 28px; align-items: flex-start; flex: 1; padding: 24px 20px 72px; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.rail { width: 300px; flex: none; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
/* Khung được giữ chỗ sẵn: script nạp quảng cáo theo kiểu lười, không chừa chỗ
   trước thì nội dung bên dưới bị đẩy khi khuôn hiện ra — đúng thứ Core Web
   Vitals trừ điểm (CLS). Chiều cao giữ chỗ phải khớp khuôn của từng khổ. */
.ad-slot { border-radius: var(--radius); overflow: hidden; }
.ad-rail { min-height: 600px; }
.ad-inline { min-height: 90px; display: flex; justify-content: center; }
/* Ô nằm lọt giữa hai dòng của danh sách: dùng đúng đường kẻ và nền của một
   dòng để nó là một mắt xích trong danh sách, không phải một khối lạ chèn vào. */
.ad-row {
  min-height: 90px; display: flex; justify-content: center;
  padding: 16px 22px; border-top: 1px solid var(--line);
  background: #fafafd; border-radius: 0;
}

/* Chọn khuôn theo khổ màn hình. Hai luật này phải cùng độ cụ thể với luật
   hiện thẻ ở trên (đều hai lớp), nếu không luật `display: block` đè lên và
   CẢ HAI khuôn cùng nạp — chồng lên nhau ngay giữa trang. */
.ad-slot .kythi-ad { display: block; }
.ad-slot .only-narrow { display: none; }

/* ---------- Khối cộng đồng ---------- */
.community { display: flex; flex-direction: column; gap: 10px; }
.community .steps-label { margin-bottom: 2px; padding-left: 2px; }

.grp {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px; color: inherit;
  border: 1px solid transparent; transition: transform .15s, box-shadow .15s;
}
.grp:hover { color: inherit; transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .45); }
.grp-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: contain; }
.grp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.grp-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.grp-note { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.grp-go { flex: none; opacity: .45; }

/* Mỗi nhóm mang màu của chính nền tảng ấy, nền là bản nhạt của màu đó. */
.grp-zalo     { background: #e6f0ff; border-color: #cfe1ff; }
.grp-zalo     .grp-name { color: #0068ff; }
.grp-facebook { background: #e9f0fd; border-color: #d5e3fb; }
.grp-facebook .grp-name { color: #1877f2; }
.grp-tiktok   { background: #f3f4f6; border-color: #e4e6eb; }
.grp-tiktok   .grp-name { color: #111827; }
.grp-youtube  { background: #fdecec; border-color: #fad4d4; }
.grp-youtube  .grp-name { color: #dc2626; }

/* ---------- Khối chào ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 24px; padding: 36px 32px 28px;
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 60%, #8b5cf6 100%);
  color: #fff; box-shadow: 0 24px 48px -24px rgba(79, 70, 229, .55);
}
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; }
.hero::before { right: -80px; top: -90px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%); }
.hero::after { left: 30%; bottom: -140px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(56,189,248,.35), rgba(56,189,248,0) 70%); }
.hero > * { position: relative; }
.hero h1 { margin: 0 0 8px; font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; max-width: 620px; }
.hero p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 620px; }
.hero-search { position: relative; max-width: 640px; margin-bottom: 22px; }
.hero-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.hero-search input {
  width: 100%; height: 56px; padding: 0 18px 0 50px; border: 0; border-radius: 16px;
  background: #fff; font-size: 15px; font-weight: 500; color: var(--ink);
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .45);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.tile-glyph { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.95); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.tile-name { font-weight: 700; font-size: 14px; color: #fff; }
.tile-grades { display: flex; gap: 6px; margin-top: 6px; }
.tile-grades a { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); }
.tile-grades a:hover { background: #fff; color: #4338ca; }

/* ---------- Đầu danh sách ---------- */
.list-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 0 4px; }
.list-head h1, .list-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.list-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Thanh lọc: hai ô chọn thay cho hai hàng chip. Chín cái chip xếp thành hai
   tầng chiếm gần một phần ba khung hình đầu tiên mà chỉ để chọn hai thứ. */
.filterbar { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filterbar-field { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.filterbar-field select {
  height: 36px; padding: 0 30px 0 12px; border: 1px solid #e2e4ee; border-radius: 11px;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.filterbar-field select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); }
.filterbar-go { height: 36px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; }
.filterbar-clear { font-size: 12.5px; font-weight: 600; }

/* Bảng mục lục chương / chủ đề: là chỗ để đi tiếp, không phải chỗ để nhìn.
   Nên nó là danh sách link chữ nhỏ chia cột, không phải một rừng chip. */
.index .steps-label { margin-bottom: 12px; }
.index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 20px; }
.index-grid > * {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 7px 0; font-size: 13.5px; color: #475569; border-bottom: 1px solid var(--line);
}
.index-grid a:hover { color: var(--brand); }
.index-grid b { font-size: 12px; font-weight: 600; color: var(--faint); flex: none; }

/* ---------- Thẻ danh sách ---------- */
.card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--card); }
.card-pad { padding: 22px 26px; }
.row { display: flex; gap: 16px; padding: 18px 22px; border-top: 1px solid var(--line); color: inherit; transition: background .15s; }
.row:first-child { border-top: 0; }
.row:hover { background: #f8f8fc; color: inherit; }
.row-tile { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.row-title { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.row-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: #475569; background: var(--chip); }
.stats { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.stats span { display: inline-flex; align-items: center; gap: 5px; }
.empty { padding: 56px 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- Phân trang ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px; }
.pager a, .pager span {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; background: #fff; color: #475569; box-shadow: var(--card);
}
.pager .on { background: var(--ink); color: #fff; }
.pager .off { opacity: .45; }

/* Công thức nội tuyến của KaTeX là một khối liền, không có chỗ nào bẻ dòng
   được. Một công thức dài hơn màn hình sẽ đẩy cả trang rộng ra và mọi thứ
   khác bị cắt mép. Cho nó cuộn ngang trong chính khối chứa nó là xong. */
.qstem,
.row-title,
.row-excerpt,
.step .body,
.option .text,
.statement .text,
.answer .val,
.essay-box { overflow-x: auto; min-width: 0; }

/* ---------- Trang chi tiết ---------- */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); flex-wrap: wrap; padding: 0 4px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: #cbd5e1; }
.crumbs .here { color: var(--ink); font-weight: 600; }

.qhead { padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.qtags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qtag-subject { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 5px 11px 5px 6px; border-radius: 999px; }
.qtag-subject i { width: 20px; height: 20px; border-radius: 6px; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; font-style: normal; }
.qviews { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--faint); margin-left: auto; }
.qstem { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.65; color: var(--ink); }

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.option { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #e9eaf2; background: #fff; }
.option.correct { border-color: #86efac; background: #f0fdf4; }
.option .letter { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #475569; background: var(--chip); }
.option.correct .letter { background: #16a34a; color: #fff; }
.option .text { flex: 1; font-size: 15px; line-height: 1.6; }

.statements { display: flex; flex-direction: column; gap: 8px; }
.statement { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #e9eaf2; flex-wrap: wrap; }
.statement .letter { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #475569; background: var(--chip); }
.statement .text { flex: 1; min-width: 200px; font-size: 15px; line-height: 1.6; }
.verdict { flex: none; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: #fff; }
.verdict.t { background: #16a34a; }
.verdict.f { background: #dc2626; }

.parts { display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; line-height: 1.7; }

.qfoot { display: flex; align-items: center; gap: 8px; padding: 14px 28px; border-top: 1px solid var(--line); background: #fafafd; flex-wrap: wrap; }
.qfoot .label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.vote {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: 999px; background: var(--chip); color: #475569; font-size: 13px;
  font-weight: 700; border: 0; cursor: pointer;
}
.vote:hover { filter: brightness(.97); }
.vote.up.on { background: #dcfce7; color: #15803d; }
.vote.down.on { background: #fee2e2; color: #b91c1c; }

/* ---------- Dải đáp án đúng – sai và ô đáp án trả lời ngắn ---------- */
.ts { display: flex; gap: 8px; }
.ans-box {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 19px; font-weight: 800; color: #064e3b;
  background: #d1fae5; border: 1.5px solid #6ee7b7;
}
.ans-box.blank { background: transparent; border-style: dashed; border-color: #a7f3d0; }
.ts-box {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 17px; font-weight: 800; color: #fff;
}
.ts-box.t { background: #16a34a; }
.ts-box.f { background: #dc2626; }

/* ---------- Lời giải ---------- */
.solution { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 48px -24px rgba(16,185,129,.35); }
.solution-head { display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: linear-gradient(135deg, #059669, #0d9488); color: #fff; }
.solution-head .mark { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.solution-head h2 { margin: 0; font-size: 16px; font-weight: 800; }
.solution-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 24px; }
.answer { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 16px; background: #ecfdf5; border: 1.5px solid #a7f3d0; flex-wrap: wrap; }
.answer .tag { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #047857; padding: 6px 10px; border-radius: 8px; background: #d1fae5; }
.answer .val { font-size: 18px; color: #064e3b; line-height: 1.5; }
.steps-label { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.step .n { flex: none; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, #059669, #0d9488); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-top: 2px; }
.step .body { flex: 1; font-size: 15.5px; line-height: 1.75; padding-top: 3px; }

/* ---------- Khối phụ ---------- */
.section-title { display: flex; align-items: center; gap: 10px; padding: 18px 28px 0; }
.section-title h2 { margin: 0; font-size: 16px; font-weight: 800; }
.tabs { display: flex; gap: 6px; padding: 0 28px 18px; flex-wrap: wrap; }
.tabs button { padding: 7px 14px; border-radius: 10px; border: 0; background: var(--chip); color: #475569; font-size: 13px; font-weight: 600; cursor: pointer; }
.tabs button.on { background: var(--ink); color: #fff; }
.essay-summary { padding: 18px 28px; font-size: 16px; font-weight: 800; cursor: pointer; list-style: none; }
.essay-summary::-webkit-details-marker { display: none; }
.essay-summary::before { content: '▸ '; color: var(--faint); }
details[open] > .essay-summary::before { content: '▾ '; }
.essay-box { padding: 0 28px 24px; font-size: 15.5px; line-height: 1.75; }
.comment { display: flex; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--line); }
.comment .avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-weight: 700; color: #475569; }
.comment .who { font-size: 13.5px; font-weight: 700; }
.comment .when { font-size: 12px; color: var(--faint); font-weight: 500; margin-left: 8px; }
.comment .text { font-size: 14.5px; line-height: 1.65; margin-top: 4px; }
.form { padding: 16px 28px 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.form input, .form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #e2e4ee; border-radius: 12px; font-size: 14.5px; line-height: 1.6; background: #fff; }
.form input:focus, .form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(79,70,229,.12); }
.form button { align-self: flex-start; height: 42px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.notice { margin: 0 28px 16px; padding: 12px 16px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-size: 13.5px; }

.footer { padding: 22px 20px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--faint); }

@media (max-width: 980px) {
  /* Điện thoại: cột phải không biến mất mà xuống dưới nội dung, chạy hết bề
     ngang. Khuôn quảng cáo đổi sang cỡ vuông, giữ chỗ theo đúng cỡ ấy. */
  /* `align-items: flex-start` của bố cục ngang phải đổi thành `stretch` khi
     xếp dọc, nếu không hai cột lấy bề rộng theo NỘI DUNG chứ không theo màn
     hình — một công thức dài là cả trang tràn ngang. */
  .main { flex-direction: column; align-items: stretch; }
  .rail { width: 100%; position: static; }
  .col { width: 100%; }
  .ad-rail { min-height: 280px; display: flex; justify-content: center; }
  .ad-inline, .ad-row { min-height: 280px; }

  .ad-slot .only-wide { display: none; }
  .ad-slot .only-narrow { display: block; }

  /* Điện thoại: thanh lọc xuống dòng riêng và trải hết bề ngang. */
  .filterbar { margin-left: 0; width: 100%; }
  .filterbar-field { flex: 1; }
  .filterbar-field select { width: 100%; }

  .hero h1 { font-size: 26px; }
  .header .searchbox { display: none; }
}