/* SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0 */
/* Trang giới thiệu opencreator.app — tĩnh, không phụ thuộc app. Token và thang chữ lấy nguyên từ
   apps/web/src/index.css để trang giới thiệu và app không lệch nhau.
   Trang cố ý CHỈ có bảng màu sáng: đây là trang bán hàng, ảnh chụp và bản in phải ra một kiểu. */

@font-face { font-family: "iA Writer Quattro"; src: url(fonts/iAWriterQuattroS-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "iA Writer Quattro"; src: url(fonts/iAWriterQuattroS-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "iA Writer Mono"; src: url(fonts/iAWriterMonoS-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #F5F3EF; --surface: #FFFFFF; --surface-sunk: #EDEAE4; --border: #DFDBD2; --border-strong: #C6C0B4;
  --ink: #1B1A17; --ink-muted: #6E685C; --ink-faint: #9A9488; --accent: #B04A25; --accent-soft: #F6E7DF;
  --ok: #3C7A57; --ok-soft: #E4F0E9; --warn: #9A7318; --warn-soft: #F7EEDA; --danger: #A33A2C;
  --font: "iA Writer Quattro", ui-sans-serif, system-ui, sans-serif;
  --mono: "iA Writer Mono", ui-monospace, SFMono-Regular, monospace;
  --r-sm: 6px; --r-md: 10px;
  /* thang GRT f=16 */
  --g0: 6px; --g1: 10px; --g2: 16px; --g3: 26px; --g4: 42px; --g5: 68px;
  /* Chiều cao chung của khung danh sách và khung xem trước. Một biến, hai chỗ dùng — canh bằng mắt
     thì lần nào sửa một bên là lệch bên kia. */
  --khung: calc(12 * var(--g3));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 26px; letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 42px; line-height: 52px; letter-spacing: -0.01em; }
h2 { font-size: 26px; line-height: 34px; }
h3 { font-size: 20px; line-height: 30px; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg { max-width: 100%; }

.mono { font-family: var(--mono); }
.caption { font-size: 12px; line-height: 18px; }
.small { font-size: 13px; line-height: 20px; }
.lead { font-size: 20px; line-height: 30px; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.accent { color: var(--accent); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--g3); }

.eyebrow {
  font-family: var(--mono); font-size: 12px; line-height: 18px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}

/* ---- nút */
.btn {
  display: inline-flex; align-items: center; gap: var(--g1); justify-content: center;
  height: 42px; padding: 0 var(--g3); border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font-size: 16px; text-decoration: none; white-space: nowrap; transition: 0.15s;
}
.btn:hover { border-color: var(--ink-faint); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:disabled:hover { border-color: var(--border-strong); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn-primary:hover { opacity: 0.9; border-color: var(--accent); }
.btn-sm { height: 34px; padding: 0 var(--g2); font-size: 13px; }

/* ---- thanh trên */
.nav {
  position: sticky; top: 0; z-index: 20; background: rgba(245, 243, 239, 0.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; gap: var(--g3); height: var(--g5); }
.brand { display: flex; align-items: center; gap: var(--g1); font-weight: 700; text-decoration: none; white-space: nowrap; }
/* Kích thước hình đi theo bậc chữ, không tự chế số: 20 = bậc lead, 16 = bậc body. */
.brand-mark { width: 20px; height: 20px; color: var(--accent); }
.nav-links { display: flex; gap: var(--g3); margin-left: var(--g3); }
.nav-links a { font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: var(--g1); margin-left: auto; }

/* ---- hero */
/* `padding-block`, không phải `padding: x 0`: khối nào vừa là `.wrap` vừa là `.section` thì dạng
   viết tắt xoá luôn padding ngang của `.wrap`, và khối đó lệch khỏi các khối còn lại 26px. */
.hero { padding-block: var(--g5) var(--g4); }
.pill {
  display: inline-block; padding: var(--g0) var(--g1); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--mono); font-size: 12px; line-height: 18px;
}
.hero h1 { margin-block: var(--g2); }
.hero-sub { max-width: 62ch; color: var(--ink-muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g2); margin-top: var(--g3); }
.hero-note { font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink-faint); }

/* ---- khung app có tab */
.frame {
  margin-top: var(--g4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: var(--surface-sunk); border-bottom: 1px solid var(--border); padding: 0 var(--g1);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: var(--g0); flex: 0 0 auto;
  white-space: nowrap;
  padding: var(--g1) var(--g2); border: 0; background: none; color: var(--ink-muted);
  font-size: 13px; line-height: 20px; border-bottom: 2px solid transparent;
}
.tab svg { width: 16px; height: 16px; opacity: 0.75; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.tab-hint { margin-left: auto; align-self: center; padding-right: var(--g2); }
.panel { padding: var(--g3); }
.panel[hidden] { display: none; }
.panel-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--g3); align-items: stretch; }
/* Ô lưới và ô flex mặc định không co dưới chiều rộng nội tại của con. <textarea> có chiều rộng
   mặc định theo `cols`, nên nó nong cột ra rộng hơn khung và bị cắt mất chữ ở khổ hẹp. */
.panel-grid > *, .stack > *, .stack-2 > * { min-width: 0; }
/* Cột trái nở theo cột phải: khung danh sách lấy hết phần trống còn lại thay vì cao cố định, nên
   đáy hai cột bằng nhau. `min-height: 0` là bắt buộc — thiếu nó thì ô flex không co được và
   `overflow-y` không bao giờ có tác dụng. */
.panel-grid > .stack-2 { min-height: 0; }
/* Danh sách co giãn NHƯNG có trần: `flex: 1` trần trụi thì nó kéo dài bằng cột phải, 14 dòng dàn
   ra hết chiều cao trông như bị nong. Ghi chú cuối cột đẩy xuống đáy để hai cột vẫn bằng nhau. */
.kb-ds, .canh-ds { flex: 0 1 auto; height: var(--khung); }
.panel-grid > .stack-2 > :last-child { margin-top: auto; }
.label {
  font-family: var(--mono); font-size: 12px; line-height: 18px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.box {
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  padding: var(--g1) var(--g2);
}
.box-sunk { background: var(--surface-sunk); }
.stack { display: flex; flex-direction: column; gap: var(--g1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--g2); }
.row { display: flex; align-items: center; gap: var(--g2); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g2); }
/* Không dùng flex: thẻ nhấn mạnh trong câu (<b>) sẽ thành một ô riêng và chữ bị tách cột.
   Đây là một câu văn, phải chảy như một câu văn. */
.note-ok, .note-warn, .note-acc {
  display: block; padding: var(--g1) var(--g2);
  border-radius: var(--r-sm); font-size: 13px; line-height: 20px;
}
.note-ok { background: var(--ok-soft); color: var(--ok); }
.note-warn { background: var(--warn-soft); color: var(--warn); }
.note-acc { background: var(--accent-soft); color: var(--accent); }
.chip {
  display: inline-flex; align-items: center; gap: var(--g0); padding: var(--g0) var(--g1); border-radius: 999px;
  font-family: var(--mono); font-size: 12px; line-height: 18px;
  background: var(--surface-sunk); color: var(--ink-muted);
}
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-acc { background: var(--accent-soft); color: var(--accent); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }

/* ---- tab ④ giọng đọc */
.voice-opt {
  display: flex; align-items: flex-start; gap: var(--g1); width: 100%; text-align: left;
  padding: var(--g1) var(--g2); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.voice-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.voice-dot {
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: var(--g0); border-radius: 50%;
  border: 1.5px solid var(--border-strong);
}
.voice-opt[aria-pressed="true"] .voice-dot { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
.player { display: flex; align-items: center; gap: var(--g2); padding: var(--g2); }
.play {
  flex: 0 0 auto; width: var(--g4); height: var(--g4); border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; font-size: 16px; display: grid; place-items: center;
}
.wave { display: flex; align-items: center; gap: 2px; height: 40px; flex: 1; overflow: hidden; }
.wave i { display: block; width: 3px; border-radius: 2px; background: var(--border-strong); }
.wave i.on { background: var(--accent); }
.script-edit {
  width: 100%; max-width: 100%; min-height: calc(4 * var(--g3)); resize: vertical; padding: var(--g2);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  font-family: var(--font); font-size: 17px; line-height: 28px; color: var(--ink);
}
.script-edit:focus { outline: none; border-color: var(--accent); }

/* ---- các khối trang */
.section { padding-block: var(--g5); }
/* iA Writer không có ✓ ✕ — để nguyên là trình duyệt rơi về font khác, dấu tick hiện ra như chữ "v". */
.tick { font-family: ui-sans-serif, system-ui, sans-serif; }
.section-sunk { background: var(--surface-sunk); }
.section-head { margin-bottom: var(--g3); }
.section-head h2 { margin-top: var(--g0); }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g3); border-top: 1px solid var(--border); padding-top: var(--g3); }
.pillar h3 { margin-bottom: var(--g1); }

.channels { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--g2); }
.channel {
  display: flex; flex-direction: column; align-items: center; gap: var(--g0);
  padding: var(--g3) var(--g1); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); text-align: center;
}
.channel svg { width: 20px; height: 20px; color: var(--ink-muted); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g2); align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--g3);
}
/* Danh sách nở ra lấp phần trống, nên nút của cả ba gói nằm cùng một hàng dù số dòng khác nhau.
   `align-items: start` bên lưới làm mỗi cột cao theo nội dung riêng — ba hộp so le, nhìn như lỗi. */
.plan ul { flex: 1; }
.plan-best { border-color: var(--accent); }
.plan-price { display: flex; align-items: baseline; gap: var(--g0); margin: var(--g2) 0 var(--g0); }
.plan-price b { font-size: 26px; line-height: 34px; }
.plan ul { list-style: none; margin: var(--g2) 0 var(--g3); padding: 0; display: flex; flex-direction: column; gap: var(--g0); flex: 1; }
.plan li { display: flex; gap: var(--g1); font-size: 13px; line-height: 20px; }
.plan li::before { content: "✓"; color: var(--ok); font-family: ui-sans-serif, system-ui, sans-serif; }
.plan .btn { width: 100%; }

/* ---- nỗi đau: hai cột dòng thời gian */
.pain { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g2); align-items: stretch; }
.pain-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
/* Nền pha từ token, không đóng cứng mã màu — đổi token là cả app lẫn trang này đổi theo. */
.pain-card.now { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.pain-head { display: flex; align-items: center; gap: var(--g2); padding: var(--g2) var(--g3); border-bottom: 1px solid var(--border); }
.pain-head b { font-size: 16px; }
.rates { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g0); padding: var(--g2) var(--g3) 0; }
/* Nhãn phải chiếm trọn một dòng: `width:100%` không đủ vì flex item mặc định co lại được, và chip
   thứ ba bị đẩy xuống dòng riêng trông như lỗi. */
.rates > .mono { flex: 0 0 100%; }
.rate {
  padding: var(--g0) var(--g1); border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink-muted);
}
.rate[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps { flex: 1; display: flex; flex-direction: column; padding: var(--g2) var(--g3); }
.step { display: grid; grid-template-columns: var(--g4) 1fr auto; gap: var(--g2); padding: var(--g0) 0; align-items: baseline; }
.step-t { font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink-faint); }
.step-n { font-size: 13px; line-height: 20px; }
.step-n em { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink-faint); }
.step-c { font-family: var(--mono); font-size: 13px; line-height: 20px; text-align: right; white-space: nowrap; }
.step.free .step-c { color: var(--ok); }
.step.rest { color: var(--ink-faint); }
.pain-foot { display: flex; align-items: flex-end; gap: var(--g2); padding: var(--g2) var(--g3); border-top: 1px solid var(--border); }
.pain-foot .tot { margin-left: auto; text-align: right; }
.pain-foot .tot b { display: block; font-family: var(--mono); font-size: 26px; line-height: 34px; }
.pain-card.late .tot b { color: var(--danger); }
.pain-card.now .tot b { color: var(--ok); }

/* ---- chân trang */
.cta { display: flex; align-items: center; gap: var(--g3); flex-wrap: wrap; padding-block: var(--g4); }
.foot { border-top: 1px solid var(--border); padding-block: var(--g3) var(--g4); }
.foot-in { display: flex; align-items: center; gap: var(--g3); flex-wrap: wrap; }
.foot a { font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---- điện thoại */
@media (max-width: 900px) {
  /* Thu chữ theo ĐÚNG các bậc đã có, không chế thêm bậc: h1 lùi về bậc h2, h2 lùi về bậc lead. */
  h1 { font-size: 26px; line-height: 34px; }
  h2 { font-size: 20px; line-height: 30px; }
  /* Vẫn là `padding-block`, không phải `padding: x 0`: khối `.wrap.section` mà dùng dạng viết tắt
     thì mất sạch padding NGANG, chữ dính mép màn hình. Đúng lỗi đã sửa ở bản rộng. */
  .wrap { padding-inline: var(--g2); }
  .hero { padding-block: var(--g4) var(--g3); }
  .section { padding-block: var(--g4); }
  .nav-links { display: none; }
  .nav-in { height: var(--g5); gap: var(--g1); }
  .nav-cta .btn { padding: 0 var(--g1); }
  /* Hai nút CTA cạnh nhau ở khổ hẹp thì tên sản phẩm bị ép xuống hai dòng — bỏ nút phụ, giữ nút chính. */
  .nav-cta .btn:not(.btn-primary) { display: none; }
  .panel-grid, .pillars, .pain { grid-template-columns: 1fr; }
  .channels { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr; }
  .panel { padding: var(--g2); }
  .tab-hint { display: none; }
  .step { grid-template-columns: var(--g4) 1fr auto; }
  /* Hai cột xếp dọc thì không còn "so trực diện" — nhãn phải tự nói nó là cột nào. */
  .pain-card.now { margin-top: var(--g1); }
  /* Tổng tiền 7 chữ số ở khổ hẹp: giữ 26px là chữ "đ" rớt xuống dòng riêng. */
  .pain-foot .tot b { font-size: 20px; line-height: 30px; }
}

/* ---- bài mẫu ở tab ② Viết
   Trang phải cho ĐỌC ĐƯỢC bài thật: trích hai đoạn thì không chứng minh được AI viết xong cả bài.
   Panel cho cuộn trong khung, và có nút mở toàn bài để đọc không vướng khung. */
.bai { display: flex; flex-direction: column; gap: var(--g2); padding: var(--g2); }
.bai h3 { font-size: 20px; line-height: 30px; margin-top: var(--g1); }
.bai h4 { font-size: 16px; line-height: 26px; margin-top: var(--g1); }
.bai p { font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.bai ul { margin: 0; padding-left: var(--g3); display: flex; flex-direction: column; gap: var(--g0); }
.bai li { font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.bai strong { color: var(--ink); }
#bai-tom { max-height: calc(9 * var(--g3)); overflow-y: auto; }
#bai-tom > div { display: flex; flex-direction: column; gap: var(--g2); }

.modal {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  padding: var(--g3); background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.modal[hidden] { display: none; }
.modal-hop {
  display: flex; flex-direction: column; width: min(760px, 100%); max-height: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.modal-dau { display: flex; align-items: flex-start; gap: var(--g2); padding: var(--g2) var(--g3); border-bottom: 1px solid var(--border); }
.modal-than { overflow-y: auto; padding: var(--g3); }
@media (max-width: 900px) {
  .modal { padding: var(--g1); }
  #bai-tom { max-height: calc(11 * var(--g3)); }
}

/* ---- đáy mỗi tab: lối sang bước sau */
.panel-chan {
  display: flex; align-items: center; gap: var(--g2); flex-wrap: wrap;
  margin-top: var(--g3); padding-top: var(--g2); border-top: 1px solid var(--border);
}
.panel-chan .btn { margin-left: auto; }

/* ---- modal duyệt kịch bản */
.link { text-decoration: none; }
.link:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
.kb-ds {
  overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  padding: var(--g0);
}
/* Một dòng = một câu của tập: số · nghe · mốc · người nói · chữ sửa được · dài.
   Cột chữ là `1fr`, các cột còn lại cố định — chữ dài ngắn khác nhau không làm lệch cả bảng. */
.kb-dong {
  display: grid; grid-template-columns: var(--g3) var(--g3) var(--g4) 90px 1fr var(--g4);
  align-items: start; gap: var(--g1); width: 100%; text-align: left;
  padding: var(--g0) var(--g1); border-radius: var(--r-sm);
}
.kb-dong > .kb-so, .kb-dong > .kb-moc, .kb-dong > .kb-dai { padding-top: 7px; }
.kb-dong:hover { background: var(--surface-sunk); }
.kb-dong.on { background: var(--accent-soft); }
.kb-nghe {
  width: var(--g3); height: var(--g3); margin-top: 2px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-muted); font-size: 10px;
}
.kb-nghe:hover { border-color: var(--accent); color: var(--accent); }
/* Câu trong danh sách là NÚT chọn, không phải ô nhập: sửa diễn ra ở ô riêng bên phải, nên hai
   việc không lẫn vào nhau và người dùng thấy rõ mình đang sửa câu nào. */
.kb-chu {
  width: 100%; text-align: left; border: 0; background: none;
  padding: var(--g0); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 16px; line-height: 26px; color: var(--ink);
}
.kb-dong.chon { box-shadow: inset 2px 0 0 var(--accent); }
.kb-dong.chon .kb-chu { font-weight: 700; }
.kb-dai { text-align: right; }
.kb-ai { justify-self: start; }
.kb-chan {
  display: flex; align-items: center; gap: var(--g2);
  padding: var(--g2) var(--g3); border-top: 1px solid var(--border); background: var(--surface-sunk);
}
.kb-thanh { flex: 1; accent-color: var(--accent); }
@media (max-width: 900px) {
  .kb-dong { grid-template-columns: var(--g3) var(--g4) 1fr; }
  .kb-so, .kb-dai, .kb-ai { display: none; }
  .kb-chu { grid-column: 1 / -1; }
  .kb-ds, .canh-ds { height: calc(14 * var(--g3)); flex: 0 0 auto; }
}
/* Icon kênh ở ⑥: nhận ra bằng mắt trước khi đọc chữ. Nét đơn cùng bộ với icon tab, không lấy logo
   thật của các nền tảng — dùng logo của họ trên trang bán hàng là chuyện giấy phép, không phải CSS. */
.kenh-ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink-faint); }
.box.row.link:hover .kenh-ico { color: var(--accent); }

@media (max-width: 900px) {
  /* Nút đứng cùng dòng với chữ ở khổ hẹp thì bị bóp còn vài chục pixel và chữ quanh nó vỡ dòng.
     Ở khổ này nút xuống dòng riêng, chiếm trọn bề ngang — ngón tay cũng dễ trúng hơn. */
  .panel-chan, .cta, .row:has(.btn), .hero-actions { flex-direction: column; align-items: stretch; }
  .panel-chan .btn, .cta .btn, .row:has(.btn) .btn, .hero-actions .btn,
  .stack > .btn, .stack-2 > .btn { width: 100%; margin-left: 0; }
  .hero-actions, .panel-chan, .cta { gap: var(--g1); }
  .hero-note, .panel-chan .mono, .row:has(.btn) .mono { text-align: center; }
}
/* Ảnh ba trụ: minh hoạ sinh trong design/creator.pen (Generate svg) rồi xuất PNG — cùng một nguồn
   với thiết kế app, không phải ảnh stock lạc phong cách. */
.tru-anh {
  width: 100%; height: auto; margin-bottom: var(--g2);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
}

/* Câu chốt của khối chi phí: đây là kết luận rút ra từ hai cột, không phải chú thích của chúng —
   phải có khoảng thở đủ rộng (g4) để mắt đọc nó như một dòng riêng, không dính vào viền hai hộp. */
#so-sanh-goi { margin-top: var(--g4); }
@media (max-width: 900px) { #so-sanh-goi { margin-top: var(--g3); } }

/* ---- hàng đợi: xếp việc rồi đi
   Ba làn nói ba nhịp khác nhau, nên phải thấy được BẰNG MẮT cái nào nối đuôi, cái nào chạy cùng lúc. */
.lan { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g2); align-items: stretch; }
.lan-card {
  display: flex; flex-direction: column; gap: var(--g2);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--g3);
}
.lan-card p { flex: 1; }
.hang { display: flex; flex-wrap: wrap; gap: var(--g0); }
.viec {
  padding: var(--g0) var(--g1); border-radius: var(--r-sm);
  background: var(--surface-sunk); color: var(--ink-faint);
  font-family: var(--mono); font-size: 12px; line-height: 18px;
}
.viec.dang { background: var(--accent-soft); color: var(--accent); }
.viec.chay { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 900px) { .lan { grid-template-columns: 1fr; } }
/* Bảng trong bài: cuộn ngang trong khung của nó, không kéo giãn cả trang ở khổ hẹp. */
.bang-cuon { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.bai table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 20px; }
.bai th, .bai td { padding: var(--g1) var(--g2); text-align: left; border-bottom: 1px solid var(--border); }
.bai th {
  background: var(--surface-sunk); color: var(--ink-faint); white-space: nowrap;
  font-family: var(--mono); font-size: 12px; line-height: 18px;
  letter-spacing: 0.06em; text-transform: uppercase; border-bottom-color: var(--border-strong);
}
.bai td { color: var(--ink-muted); vertical-align: top; }
/* Cột đầu là tên hàng, cột sau là số: tên đậm hơn, số canh phải và dùng mono để các chữ số thẳng cột. */
.bai td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
.bai td:not(:first-child) { font-family: var(--mono); font-size: 12px; line-height: 20px; }
.bai tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-sunk) 45%, var(--surface)); }
.bai tbody tr:last-child td { border-bottom: 0; }

/* Ảnh trong bài — biểu đồ và ảnh chụp TradingView tải sẵn về, không nhúng từ host ngoài. */
.bai figure { margin: 0; display: flex; flex-direction: column; gap: var(--g0); }
.bai figure img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.bai figcaption { font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink-faint); }
/* Khung nhúng giữ tỉ lệ 16:9 mà không cần chiều cao cứng. */
.nhung { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-sunk); }
.nhung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- ⑤ bảng cảnh */
.panel-grid.deu { grid-template-columns: 1fr 1fr; }
.canh-ds {
  overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); padding: var(--g0);
}
.canh-dong {
  display: grid; grid-template-columns: var(--g4) 1fr auto var(--g4);
  align-items: center; gap: var(--g2); width: 100%; text-align: left;
  padding: var(--g0) var(--g1); border: 0; background: none; border-radius: var(--r-sm);
}
.canh-dong:hover { background: var(--surface-sunk); }
.canh-dong.on { background: var(--accent-soft); }
.canh-ten { font-size: 13px; line-height: 20px; }
.canh-ten em { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink-faint); }

/* Ô xem trước: đổi khổ = đổi tỉ lệ khung, không phải đổi ảnh. Bản dọc hẹp nên căn giữa. */
.man { display: flex; justify-content: center; }
.man-khung {
  position: relative; width: 100%; height: var(--khung); overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--ink);
}
.man[data-kho="doc"] .man-khung { width: auto; aspect-ratio: 9 / 16; }
/* Một khung, hai chế độ: ngang = video thật trên YouTube, dọc = dựng lại bố cục bản TikTok.
   Hai hộp cạnh nhau cùng nói một chuyện là thừa, nên chỉ một cái hiện tại một lúc. */
.man-khung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.man[data-kho="ngang"] #p5-tt { display: none; }
.man[data-kho="doc"] #p5-yt { display: none; }
.man-khung img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.man-lop {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: var(--g0); padding: var(--g2);
  background: linear-gradient(to top, rgba(20,18,16,0.86) 0%, rgba(20,18,16,0.35) 45%, rgba(20,18,16,0.1) 100%);
}
.man-ai { position: absolute; top: var(--g2); left: var(--g2); }
.man-so { font-family: var(--mono); font-size: 26px; line-height: 34px; font-weight: 700; color: #fff; }
.man-nhan { font-family: var(--mono); font-size: 12px; line-height: 18px; color: rgba(255,255,255,0.72); }
.man-tieu { font-size: 20px; line-height: 30px; color: #fff; }
@media (max-width: 900px) {
  .panel-grid.deu { grid-template-columns: 1fr; }
  .canh-dong { grid-template-columns: var(--g4) 1fr auto; }
  .canh-dong > :last-child { display: none; }
  .man[data-kho="doc"] .man-khung { height: calc(16 * var(--g3)); }
}

/* ---- khung dây chuyền không được nhảy
   Sáu tab cao 465–713px, nên mỗi lần chuyển tab cả trang giật và nút "Bước sau" đổi chỗ — người
   dùng vừa nhắm vào nút thì nút đã đi nơi khác. Cho khung một chiều cao tối thiểu bằng tab cao
   nhất và đẩy chân panel xuống đáy: nút luôn nằm đúng một vị trí.
   Chỉ áp ở khổ rộng — ở khổ hẹp panel vốn cao hơn nhiều, ép thêm là chừa khoảng trống vô nghĩa. */
@media (min-width: 901px) {
  .panel { display: flex; flex-direction: column; min-height: calc(28 * var(--g3)); }
  .panel > .panel-grid { flex: 1; }
}