/* 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.
   Sáng/tối theo đúng cơ chế của app: `data-theme` khi người dùng tự chọn, không thì theo hệ thống. */

@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;
  --nen-nav: rgba(245, 243, 239, 0.92);
  /* Nét vẽ NẰM TRÊN giấy phải đậm để đọc được trên giấy sáng, nên nó không theo chủ đề như nét
     vẽ nằm trên nền trang. Hai loại nét, hai token. */
  --net-tren-giay: #A93C1B;
  /* 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));
}

/* Bảng tối lấy nguyên từ apps/web/src/index.css — trang giới thiệu và app phải cùng một bộ màu,
   không thì người dùng bấm "Dùng thử" là thấy sản phẩm khác hẳn trang vừa xem.
   Khai ở CẢ hai chỗ: media query cho người chưa chọn gì, `[data-theme]` cho người đã bấm nút. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191712; --surface: #232019; --surface-sunk: #141210; --border: #34302A; --border-strong: #4C473D;
    --ink: #E8E3D9; --ink-muted: #ABA598; --ink-faint: #7C7669; --accent: #E4763F; --accent-soft: #3B2317;
    --ok: #68B98A; --ok-soft: #1B2E24; --warn: #D9AB40; --warn-soft: #312712; --danger: #E4705C;
    --nen-nav: rgba(25, 23, 18, 0.92);
  }
}
:root[data-theme="dark"] {
  --bg: #191712; --surface: #232019; --surface-sunk: #141210; --border: #34302A; --border-strong: #4C473D;
  --ink: #E8E3D9; --ink-muted: #ABA598; --ink-faint: #7C7669; --accent: #E4763F; --accent-soft: #3B2317;
  --ok: #68B98A; --ok-soft: #1B2E24; --warn: #D9AB40; --warn-soft: #312712; --danger: #E4705C;
  --nen-nav: rgba(25, 23, 18, 0.92);
}

* { 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: var(--nen-nav);
  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; text-decoration: none; flex: 0 0 auto; }
/* Logo ngang cao một bậc g4 trong thanh nav cao g5: hình chiếm 62% chiều cao thanh, đủ để đọc ra
   là dấu hiệu thương hiệu chứ không phải một icon nhỏ. Bề rộng suy từ tỉ lệ gốc 250:48 nên chữ
   trong logo không bao giờ méo dù đổi chiều cao. */
/* Khổ rộng: logo đầy đủ. Khổ hẹp: chỉ dấu hiệu, nhưng GIỮ NGUYÊN chiều cao — thanh nav ở điện
   thoại vẫn cao g5, thu logo lại là bỏ phí chiều cao đó. Logo đầy đủ rộng 219px, cộng nút chủ đề
   và nút CTA là 431px, không vừa 358px còn lại ở khổ 390 — nên phải bỏ phần chữ, không phải thu nhỏ. */
.brand-logo { height: var(--g4); width: calc(var(--g4) * 250 / 48); display: block; }
.brand-mark-only { height: var(--g4); width: var(--g4); display: none; }
/* Chân trang dùng ĐÚNG logo của header, cùng cỡ luôn. Một dấu hiệu thì một cỡ: để chân trang nhỏ
   hơn là người xem tưởng hai thứ khác nhau. Và KHÔNG hạ opacity — làm mờ đổi luôn màu vòng tròn và
   năm nhánh, cũng thành hai kiểu. */
.foot-logo { height: var(--g4); width: calc(var(--g4) * 250 / 48); flex: 0 0 auto; }
.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;
  white-space: nowrap;
  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(4, 1fr); gap: var(--g2); align-items: stretch; }
/* Bốn gói cạnh nhau chỉ vừa màn rộng; khổ trung gian xếp 2×2 trước khi rơi xuống một cột. */
@media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, 1fr); } }
.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);
  white-space: nowrap; flex: none;
}
.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(--g1); 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); }
  .brand-logo { display: none; }
  .brand-mark-only { display: block; }
  /* Nút chủ đề còn mỗi biểu tượng: nhãn chữ ăn 44px mà ở đây từng pixel đều phải tiêu có lý do. */
  .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; flex-wrap: wrap; align-items: flex-start; gap: var(--g2); padding: var(--g2) var(--g3); border-bottom: 1px solid var(--border); }
/* Tiêu đề có SÀN bề ngang rồi mới nhường chỗ cho nút. Không có sàn thì trên máy hẹp, nút giữ nguyên
   bề ngang còn tiêu đề co xuống còn một cột hẹp và vỡ ra cả chục dòng — đầu modal cao hơn cả nội
   dung. Chạm sàn thì cả cụm nút rơi xuống hàng dưới, đó là cách xuống dòng đúng ở đây. */
.modal-dau > .stack { flex: 1 1 240px; min-width: 0; }
.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. Mỗi ảnh đã LÀ một tấm thẻ giấy có nền riêng,
   nên KHÔNG vẽ thêm nền và viền dưới nó: hai lớp chồng nhau mà tông giấy lệch nhẹ với `--surface`
   thì lộ ra thành một cái nền thứ hai viền quanh ảnh. */
.tru-anh {
  width: 100%; height: auto; display: block; margin-bottom: var(--g2);
  border-radius: var(--r-sm);
}

/* 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. */
/* `flex: none` là bắt buộc, không phải tinh chỉnh. Khối bọc bảng nằm trong `.bai` vốn là flex cột;
   `overflow-x: auto` biến nó thành khối cuộn, mà khối cuộn thì kích thước tối thiểu tự động bằng 0
   chứ không bằng nội dung. Thiếu dòng này, khối bị co sạch còn hai đường viền — bảng trade plan hiện
   ra thành đúng một vạch ngang. */
.bang-cuon { flex: none; 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; }
}

/* ---- nút đổi sáng/tối
   Một nút, ba trạng thái đọc được: theo hệ thống → sáng → tối → quay lại theo hệ thống. Nói rõ
   đang ở trạng thái nào, vì nút chỉ đổi biểu tượng thì người dùng không biết mình đã chọn tay hay
   vẫn đang theo máy. */
.chu-de {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--g0);
  height: 34px; padding: 0 var(--g1); border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  font-family: var(--mono); font-size: 12px; line-height: 18px;
}
.chu-de:hover { border-color: var(--border-strong); color: var(--ink); }
.chu-de svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Nhãn không được gãy dòng: nút cao cố định 34px, chữ xuống dòng là tràn ra ngoài viền. */
.chu-de, .chu-de-nhan { white-space: nowrap; }
/* Nút đổi ngôn ngữ dùng chung hình dáng nút chủ đề, nhưng nó là LIÊN KẾT (sang URL khác) nên phải
   gỡ gạch chân — và nhãn hai chữ cái thì luôn hiện, kể cả màn hẹp. */
a.chu-de { text-decoration: none; }

/* Nút chủ đề chỉ còn biểu tượng ở mọi khổ màn. Thanh nav bên phải là chỗ mắt tìm nút CHÍNH
   ("Dùng thử"); mỗi nút có chữ đứng cạnh nó là một thứ nữa tranh chú ý. Trạng thái đang chọn
   ("Hệ thống / Sáng / Tối") vẫn nói đủ qua `title` và `aria-label`, không mất với ai. */
.chu-de-nhan { display: none; }
.chu-de { padding: 0 var(--g0); }

/* Ảnh chụp trong bài là ảnh thật nền trắng: ở chế độ tối phải hạ chói, không thì thành ô sáng
   giữa trang. Ảnh ba trụ KHÔNG hạ — chúng là minh hoạ trên giấy sáng, hạ chói là làm bẩn giấy. */
:root[data-theme="dark"] .bai figure img { filter: brightness(0.86) contrast(1.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bai figure img { filter: brightness(0.86) contrast(1.04); }
}
/* Trong lúc đổi chủ đề: cắt mọi hiệu ứng chuyển. Đổi chủ đề phải là một cú lật, không phải một
   đoạn hoạt hình 150ms trong đó nửa trang đã sáng còn nửa kia còn tối. */
.dang-doi-chu-de, .dang-doi-chu-de * { transition: none !important; }


/* Ảnh ba trụ giữ nguyên nền sáng ở cả hai chủ đề, KHÔNG hạ độ sáng trên nền tối. Tô Trieu chốt:
   chấp nhận tương phản. Đổi lại là chỉ có MỘT bộ ảnh — sinh bộ thứ hai cho nền tối thì hai lượt AI
   không ra hai hình giống nhau, bấm đổi chủ đề là thành hai bộ nhận diện khác nhau. */