/* ══════════════════════════════════════════════════════════════════════════════════════════
   S4 — GIAO DIỆN BÀI VIẾT v2 (21/10/2026, phiên TNS-OS)
   Theo DNA đã chốt ở thiet-ke/huong-thiet-ke.md: thép đậm + nền sáng kỹ thuật + đỏ S4 dè sẻn + hổ phách màu dầu;
   Barlow Semi Condensed (tiêu đề) · Be Vietnam Pro (thân, tiếng Việt) · JetBrains Mono (mã thông số).
   Thay Newsreader (serif kiểu báo — chủ dự án: «xấu quê mùa») + Roboto đang chạy.
   Phạm vi: CHỈ trang bài viết (.s4n-single) — không đụng trang chủ / danh mục / sản phẩm.
   Cài: phiên daunhots4 enqueue tệp này trong flatsome-child SAU style.css của child (để đè), hoặc dán vào
   Customizer › Additional CSS. Gỡ = bỏ enqueue (một lệnh hoàn tác).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@500&display=swap');

.s4n-single {
  /* Màu */
  --s4-steel: #111827;      /* thép đậm — chữ tiêu đề, đầu bảng */
  --s4-ink: #1F2937;        /* chữ thân */
  --s4-muted: #5B6474;      /* chữ phụ (>= 4.5:1 trên nền trắng) */
  --s4-line: #E3E7ED;
  --s4-surface: #F5F7FA;    /* nền kỹ thuật sáng */
  --s4-red: #D11E2A;        /* đỏ S4 — CHỈ làm nhấn nhỏ */
  --s4-amber: #E8A33D;      /* hổ phách màu dầu */
  --s4-amber-50: #FFF8EC;
  --s4-amber-700: #8A5300;  /* chữ trên nền hổ phách nhạt (>= 4.5:1) */
  --s4-navy: #12355B;       /* link */
  /* Chữ */
  --s4-f-head: 'Barlow Semi Condensed', 'Be Vietnam Pro', system-ui, sans-serif;
  --s4-f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s4-f-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Hình */
  --s4-r: 12px;
  --s4-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 4px 14px rgba(17, 24, 39, .06);
}

/* ── Tiêu đề bài + dòng meta ─────────────────────────────────────────────────────────────── */
.s4n-single .s4n-h1 {
  font-family: var(--s4-f-head);
  font-weight: 700;
  font-size: clamp(30px, 7.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--s4-steel);
  margin: .35em 0 .45em;
  text-wrap: balance;
}
.s4n-single .s4n-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--s4-f-body);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--s4-amber-700); background: var(--s4-amber-50);
  border: 1px solid #F3D6A8; border-radius: 999px;
  padding: 7px 12px; text-decoration: none;
}
.s4n-single .s4n-read, .s4n-single .s4n-auth { font-family: var(--s4-f-body); color: var(--s4-muted); }

/* ── Thân bài ──────────────────────────────────────────────────────────────────────────────── */
.s4n-single .s4n-body {
  font-family: var(--s4-f-body);
  font-size: 17px; line-height: 1.75;
  color: var(--s4-ink);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 640px) { .s4n-single .s4n-body { font-size: 16.5px; line-height: 1.72; } }
.s4n-single .s4n-body p { margin: 0 0 1.05em; }
.s4n-single .s4n-body strong { color: var(--s4-steel); font-weight: 650; }

.s4n-single .s4n-body h2 {
  position: relative;
  font-family: var(--s4-f-head); font-weight: 700;
  font-size: clamp(24px, 5.4vw, 31px); line-height: 1.18;
  color: var(--s4-steel);
  margin: 2.1em 0 .7em; padding-top: 18px;
  border-top: 1px solid var(--s4-line);
}
.s4n-single .s4n-body h2::before {          /* vạch đỏ S4 ngắn — nhấn dè sẻn */
  content: ""; position: absolute; top: -2px; left: 0;
  width: 44px; height: 3px; background: var(--s4-red); border-radius: 2px;
}
.s4n-single .s4n-body h3 {
  font-family: var(--s4-f-body); font-weight: 700;
  font-size: clamp(18px, 4.2vw, 20.5px); line-height: 1.35;
  color: var(--s4-steel); margin: 1.6em 0 .5em;
}
.s4n-single .s4n-body a {
  color: var(--s4-navy); text-decoration: underline;
  text-decoration-color: rgba(232, 163, 61, .7); text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.s4n-single .s4n-body a:hover { color: var(--s4-red); text-decoration-color: currentColor; }
.s4n-single .s4n-body a:focus-visible { outline: 2px solid var(--s4-navy); outline-offset: 2px; border-radius: 2px; }

/* ── Danh sách ─────────────────────────────────────────────────────────────────────────────── */
.s4n-single .s4n-body ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.s4n-single .s4n-body ul > li { position: relative; padding-left: 1.45em; margin: .45em 0; }
.s4n-single .s4n-body ul > li::before {      /* ô vuông hổ phách — gọn, công nghiệp, không bullet đỏ mặc định */
  content: ""; position: absolute; left: .25em; top: .72em;
  width: 7px; height: 7px; background: var(--s4-amber); border-radius: 1.5px;
}
.s4n-single .s4n-body ol { list-style: none; counter-reset: s4n-ol; margin: 0 0 1.2em; padding: 0; }
.s4n-single .s4n-body ol > li { counter-increment: s4n-ol; position: relative; padding-left: 2.25em; margin: .6em 0; }
.s4n-single .s4n-body ol > li::before {
  content: counter(s4n-ol); position: absolute; left: 0; top: .18em;
  width: 1.55em; height: 1.55em; display: grid; place-items: center;
  font: 700 13px/1 var(--s4-f-body); color: #fff; background: var(--s4-steel); border-radius: 6px;
}

/* ── Bảng thông số ─────────────────────────────────────────────────────────────────────────── */
.s4n-single .s4n-body table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 1.5em 0 1.7em; font-size: 15px; line-height: 1.55;
  background: #fff; border: 1px solid var(--s4-line); border-radius: var(--s4-r);
  overflow: hidden; box-shadow: var(--s4-shadow);
}
.s4n-single .s4n-body thead th {
  background: var(--s4-steel); color: #fff; text-align: left; vertical-align: bottom;
  font: 600 12.5px/1.35 var(--s4-f-body); text-transform: uppercase; letter-spacing: .06em;
  padding: 13px 16px; border: 0;
}
.s4n-single .s4n-body td {
  padding: 13px 16px; vertical-align: top; color: var(--s4-ink);
  border: 0; border-top: 1px solid var(--s4-line);
}
.s4n-single .s4n-body tbody tr:first-child td { border-top: 0; }
.s4n-single .s4n-body tbody tr:nth-child(even) td { background: var(--s4-surface); }
.s4n-single .s4n-body td:first-child { font-weight: 500; color: var(--s4-steel); }
/* Mã thông số (ISO VG 46, 5W-30, API SP/CF, ACEA C3…) trong ô bảng: chữ mono nếu tác giả bọc <code> */
.s4n-single .s4n-body code, .s4n-single .s4n-body td code {
  font: 500 .9em var(--s4-f-mono); background: var(--s4-surface); color: var(--s4-steel);
  border: 1px solid var(--s4-line); border-radius: 5px; padding: .08em .38em;
}
@media (max-width: 640px) {                  /* bảng rộng cuộn ngang trong khung, không vỡ trang */
  .s4n-single .s4n-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14.5px; }
  .s4n-single .s4n-body thead th, .s4n-single .s4n-body td { padding: 11px 13px; min-width: 120px; }
}

/* ── Khối «Câu trả lời ngắn» (lớp *-key-answer do tool chèn) ─────────────────────────────── */
/* !important để đè style= hồng của các bài đã đăng trước 21/10 (từ giờ tool tự ghi màu hổ phách). */
.s4n-single [class$="-key-answer"] {
  background: var(--s4-amber-50) !important;
  border: 1px solid #F3D6A8 !important; border-left: 4px solid var(--s4-amber) !important;
  border-radius: 0 var(--s4-r) var(--s4-r) 0 !important;
  padding: 18px 20px !important; margin: 1.6em 0 !important; box-shadow: none !important;
}
.s4n-single [class$="-key-answer"] blockquote { border: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; font-style: normal; }
.s4n-single [class$="-key-answer"] blockquote p { margin: 0; color: var(--s4-ink); }
.s4n-single [class$="-key-answer"] blockquote p > strong:first-child {
  display: block; margin-bottom: 6px;
  font: 700 13px/1.2 var(--s4-f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--s4-amber-700);
}

/* Hộp lưu ý / trích dẫn của tool: viền trái thép nhạt, cùng ngôn ngữ với khối trả lời */
.s4n-single [class*="-callout"] { border-radius: 0 var(--s4-r) var(--s4-r) 0 !important; }
.s4n-single [class$="-source-quote"] { border-left-color: #9AA8BC !important; }

/* ── Mục lục ───────────────────────────────────────────────────────────────────────────────── */
.s4n-single .s4n-toc {
  background: #fff; border: 1px solid var(--s4-line); border-radius: var(--s4-r);
  box-shadow: var(--s4-shadow); font-family: var(--s4-f-body);
}
.s4n-single .s4n-toc-ti span {
  font: 700 14px/1 var(--s4-f-body); text-transform: uppercase; letter-spacing: .07em; color: var(--s4-steel);
}
.s4n-single .s4n-toc-ti svg { color: var(--s4-amber); }
.s4n-single .s4n-toc a { color: var(--s4-ink); text-decoration: none; transition: color .2s ease; }
.s4n-single .s4n-toc a:hover { color: var(--s4-red); }
.s4n-single .s4n-toc-l3 a { color: var(--s4-muted); font-size: .94em; }

/* ── Sidebar: tiêu đề khối, Chuyên mục, Bài liên quan ─────────────────────────────────────── */
.s4n-single .s4n-side-t {
  font: 700 15px/1.2 var(--s4-f-head); text-transform: uppercase; letter-spacing: .06em;
  color: var(--s4-steel); padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 2px solid var(--s4-steel); position: relative;
}
.s4n-single .s4n-side-t::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 36px; height: 2px; background: var(--s4-red);
}
/* Theme đang xếp tiêu đề khối + danh sách thành 2 CỘT kể cả trên mobile → danh sách bị bóp còn nửa ngang (ảnh chủ dự
   án 21/10). Xếp dọc, danh sách chiếm đủ chiều ngang. */
.s4n-single .s4n-cats, .s4n-single .s4n-rel { display: block !important; grid-template-columns: none !important; }
.s4n-single .s4n-cats > *, .s4n-single .s4n-rel > * { width: 100% !important; max-width: none !important; }
.s4n-single .s4n-catul { list-style: none; margin: 0; padding: 0; }
.s4n-single .s4n-catul li { margin: 0; border-bottom: 1px solid var(--s4-line); }
.s4n-single .s4n-catul li:last-child { border-bottom: 0; }
.s4n-single .s4n-catul a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 2px;           /* vùng chạm >= 44px */
  font: 500 15px/1.35 var(--s4-f-body); color: var(--s4-ink); text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
.s4n-single .s4n-catul a:hover { color: var(--s4-red); padding-left: 6px; }
.s4n-single .s4n-catul a span {                /* số bài */
  flex: 0 0 auto; min-width: 30px; text-align: center;
  font: 600 12px/1 var(--s4-f-mono); color: var(--s4-muted);
  background: var(--s4-surface); border: 1px solid var(--s4-line); border-radius: 6px; padding: 6px 7px;
}
.s4n-single .s4n-catul a:hover span { color: var(--s4-steel); border-color: var(--s4-amber); }
.s4n-single .s4n-postlist .s4n-pl-tt {
  font: 600 15px/1.4 var(--s4-f-body); color: var(--s4-ink);
}
.s4n-single .s4n-postlist a:hover .s4n-pl-tt { color: var(--s4-red); }
.s4n-single .s4n-pl-im img, .s4n-single .s4n-pl-ph { border-radius: 8px; }

/* ── Hộp tác giả ──────────────────────────────────────────────────────────────────────────── */
.s4n-single .s4n-authorbox { font-family: var(--s4-f-body); border-radius: var(--s4-r); }
.s4n-single .s4n-ab-lb { font: 600 12px/1 var(--s4-f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--s4-amber-700); }
.s4n-single .s4n-ab-nm { font: 700 20px/1.2 var(--s4-f-head); color: var(--s4-steel); }

/* ── Giảm chuyển động khi người dùng yêu cầu ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .s4n-single * { transition: none !important; }
}