/* TTVD Einbürgerungstest — chuyên trang của Báo Điện tử Tin Tức Việt Đức.
   Design tokens lấy từ custom.css "Modern Editorial" của tintucvietduc.net
   (xem live_custom_css.txt). Font: Be Vietnam Pro — TUYỆT ĐỐI không dùng
   Montserrat vì hỏng dấu tiếng Việt (UI_OVERRIDE_RULES.md mục 4). */

/* Cùng cách nạp font như /media/ttvd/site.css của trang chủ — chuyên trang
   nằm ngoài template Joomla nên phải tự nạp. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500;600;700;800&display=swap');

:root{
  --ttvd-red:#e30613;          /* --color-accent */
  --ttvd-red-dark:#b8050f;     /* --color-accent-hover */
  --ttvd-gold:#f2a900;         /* --color-gold */
  --ink:#111111;               /* --text-primary */
  --ink-soft:#55555c;          /* --text-muted */
  --line:#e2e2e7;              /* --border-color */
  --paper:#ffffff;             /* --bg-primary */
  --paper-2:#f6f6f9;           /* --bg-secondary */
  --ink-dark:#0f0f11;          /* --bg-dark */
  --r-xs:6px; --r-sm:10px; --r-soft:16px;
  --ok:#137333; --bad:#b3261e;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Be Vietnam Pro",Roboto,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65;font-size:16px;
}
img{max-width:100%;height:auto}
a{color:var(--ttvd-red-dark)}
h1,h2,h3{line-height:1.25;letter-spacing:-.01em}
h2{font-size:1.35rem;margin:32px 0 10px}
h3{font-size:1.1rem;margin:22px 0 8px}
p{margin:0 0 14px}
:focus-visible{outline:3px solid var(--ttvd-gold);outline-offset:2px}

.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ── Thanh tiện ích: nói rõ đây là chuyên trang của báo ───────────── */
.topbar{background:var(--ink-dark);color:#d9d9de;font-size:.86rem}
.topbar-in{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;padding:7px 16px}
.topbar-tag{margin:0}
.topbar-tag strong{color:#fff}
.topbar-nav{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
.topbar-nav a{color:#d9d9de;text-decoration:none}
.topbar-nav a:hover{color:var(--ttvd-gold);text-decoration:underline}

/* ── Masthead ─────────────────────────────────────────────────────── */
.masthead{background:var(--paper);border-bottom:3px solid var(--ttvd-red)}
.masthead-in{display:flex;align-items:center;gap:20px;padding:16px;flex-wrap:wrap}
.logo{display:block;flex:0 0 auto}
.logo img{display:block;width:210px;height:50px}
.rubric{border-left:1px solid var(--line);padding-left:20px;min-width:0}
.rubric-tag{
  display:inline-block;background:var(--ttvd-red);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;margin-bottom:6px;
}
.rubric-name{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.rubric-sub{margin:2px 0 0;color:var(--ink-soft);font-size:.94rem}

/* ── Điều hướng chuyên trang ──────────────────────────────────────── */
.mainnav{background:var(--paper-2);border-bottom:1px solid var(--line)}
.mainnav .wrap{display:flex;gap:2px;overflow-x:auto}
.mainnav a{
  white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:600;
  font-size:.95rem;padding:11px 14px;border-bottom:3px solid transparent;
}
.mainnav a:hover{background:#fff;color:var(--ttvd-red-dark)}
.mainnav a[aria-current="page"]{border-bottom-color:var(--ttvd-red);color:var(--ttvd-red-dark)}

/* ── Dải đặc tả đề thi (thay cho hero gradient) ──────────────────── */
.spec{background:var(--ink-dark);color:#fff;padding:0;border-bottom:3px solid var(--ttvd-gold)}
.spec-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.spec-cell{padding:16px;border-left:1px solid #2c2c31}
.spec-cell:first-child{border-left:0}
.spec-num{font-size:1.9rem;font-weight:800;line-height:1;color:var(--ttvd-gold);font-variant-numeric:tabular-nums}
.spec-lbl{font-size:.82rem;color:#b9b9c2;margin-top:4px}

.page-head{padding:22px 0 6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.page-head h1{margin:0 0 6px;font-size:1.75rem;font-weight:800}
.page-head p{margin:0;color:var(--ink-soft);max-width:70ch}

/* ── Khối nội dung: dùng gạch trên, không dùng card đồng loạt ────── */
.block{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:0;padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}
.grid .block h2,.grid .block h3{margin-top:0}
.grid .block{border-top-color:var(--ttvd-red)}
.lead{border-left:4px solid var(--ttvd-red);background:var(--paper-2);padding:12px 16px;margin:0 0 18px}
.lead p:last-child{margin-bottom:0}

.btn{
  display:inline-block;background:var(--ttvd-red);color:#fff;text-decoration:none;
  font-weight:700;padding:10px 16px;border:1px solid var(--ttvd-red);border-radius:var(--r-xs);
  cursor:pointer;font-size:1rem;font-family:inherit;
}
.btn:hover{background:var(--ttvd-red-dark);border-color:var(--ttvd-red-dark)}
.btn.ghost{background:var(--paper);color:var(--ttvd-red-dark)}
.btn.ghost:hover{background:var(--paper-2)}
.btn.small{padding:6px 12px;font-size:.9rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

select,input{font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--paper);max-width:100%;color:var(--ink)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
fieldset.block{border:1px solid var(--line);border-top:3px solid var(--ink);padding:14px 16px}
legend{font-weight:700;padding:0 6px}

/* ── Tiến độ ──────────────────────────────────────────────────────── */
.progress{height:10px;background:var(--line);border-radius:2px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--ttvd-red)}
.timer{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.timer.low{color:var(--ttvd-red)}
.qnum{font-weight:800;color:var(--ttvd-red-dark)}
.muted{color:var(--ink-soft)}

/* ── Câu hỏi ──────────────────────────────────────────────────────── */
.quiz-opt{
  display:block;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--line);border-radius:0;
  padding:12px;margin:8px 0;cursor:pointer;font:inherit;color:var(--ink);
}
.quiz-opt:not(:disabled):hover{border-left-color:var(--ttvd-red);background:var(--paper-2)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.right{border-left-color:var(--ok);background:#eaf5ee;font-weight:700}
.quiz-opt.wrong{border-left-color:var(--bad);background:#fdeceb}
.quiz-opt.chosen{outline:2px solid var(--ttvd-gold);outline-offset:-2px}
.bild-note{background:var(--paper-2);border:1px dashed var(--ink-soft);padding:10px 12px;margin:12px 0;font-size:.94rem}
.explain{background:var(--paper-2);border-left:4px solid var(--ttvd-gold);padding:12px;margin:10px 0}

.badge{display:inline-block;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-soft);border-radius:2px;padding:2px 8px;font-size:.8rem;font-weight:700}
.badge.ok{background:#eaf5ee;border-color:#bfe3c9;color:var(--ok)}
.badge.no{background:#fdeceb;border-color:#f5c6c3;color:var(--bad)}

table.score{width:100%;border-collapse:collapse;margin:10px 0;font-size:.95rem}
table.score th,table.score td{border:1px solid var(--line);padding:8px;text-align:left}
table.score th{background:var(--paper-2)}

.faq details{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ttvd-red);padding:10px 14px;margin:8px 0}
.faq summary{font-weight:700;cursor:pointer}
details>summary{list-style:none;padding-right:22px;position:relative}
details>summary::after{content:"+";position:absolute;right:0;top:0;font-weight:800;color:var(--ttvd-red)}
details[open]>summary::after{content:"\2212"}
.srcnote{font-size:.88rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:12px;margin-top:26px}

/* ── Footer: các module tương ứng footer trang chủ tintucvietduc.net ── */
footer.site{background:var(--ink-dark);color:#c9c9d1;margin-top:34px;font-size:.92rem}
footer.site a{color:#fff}
.ft-brand{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;padding:24px 0 18px;border-bottom:1px solid #2c2c31}
.ft-brand img{width:210px;height:50px;background:#fff;padding:6px;border-radius:2px}
.ft-brand p{margin:0;max-width:52ch}
.ft-brand .ft-since{color:var(--ttvd-gold);font-weight:700}
.ft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;padding:22px 0}
.ft-grid h3{color:#fff;font-size:.95rem;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid #2c2c31}
.ft-grid ul{list-style:none;margin:0;padding:0}
.ft-grid li{margin:0 0 7px}
.ft-grid a{color:#c9c9d1;text-decoration:none}
.ft-grid a:hover{color:var(--ttvd-gold);text-decoration:underline}
.ft-fb{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ft-fb img{width:56px;height:56px;border-radius:50%;border:2px solid #2c2c31}
.ft-fb-name{color:#fff;font-weight:700;display:block}
.ft-fb-sub{font-size:.85rem}
.ft-fb-btn{display:inline-block;background:#1877f2;color:#fff;font-weight:700;font-size:.88rem;padding:7px 14px;border-radius:var(--r-xs);text-decoration:none}
.ft-fb-btn:hover{background:#145ec0}
.ft-copy{border-top:1px solid #2c2c31;padding:14px 0 22px;font-size:.86rem}
.ft-copy p{margin:0 0 4px}

@media(max-width:600px){
  .rubric{border-left:0;border-top:1px solid var(--line);padding:12px 0 0;width:100%}
  .logo img{width:180px;height:auto}
  .page-head h1{font-size:1.4rem}
  .spec-num{font-size:1.5rem}
  /* Bảng trượt ngang thay vì bóp chữ hoặc tràn trang */
  table.score{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ft-brand img{width:180px;height:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}