/* Trang tĩnh công khai của CVTECH ACADEMY (bai/…, khoa/… do build/pages.js sinh ra): trang đọc cho người tìm kiếm trên mạng.
   Dùng cùng tokens.css và app.css (kiểu của các khối bài học). Trang đọc được khi tắt JavaScript, không có lớp chống sao chép. */
body.pub{background:var(--bg);overscroll-behavior-y:auto;-webkit-user-select:text;user-select:text}
.pub a{text-underline-offset:2px}
.pub-skip{position:absolute;left:8px;top:8px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pub-skip:focus{width:auto;height:auto;clip-path:none;z-index:50;background:var(--card);padding:8px 12px;border-radius:8px;border:1px solid var(--line)}

/* ---- thanh trên */
.pub-top{background:var(--card);border-bottom:1px solid var(--line)}
.pub-top-in{max-width:792px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:10px;min-height:56px}
.pub-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0;flex:1}
.pub-brand img{width:36px;height:36px;border-radius:9px;flex:none}
.pub-brand b{display:block;font-size:15.5px;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.pub-brand span span{display:block;font-size:12px;color:var(--muted);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-brand>span{min-width:0}
.pub-top nav{display:flex;align-items:center;gap:4px;flex:none}
.pub-top nav a.t{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;border-radius:10px;font-weight:650;font-size:14.5px;text-decoration:none;color:var(--pri-d)}
.pub-top nav a.t:hover{background:var(--pri-l)}
@media(max-width:400px){.pub-brand span span{display:none}.pub-top-in{padding-left:12px;padding-right:12px;gap:6px}.pub-brand{gap:8px}.pub-brand b{font-size:14.5px}.pub-top nav a.t{padding:0 7px}}

/* ---- khung trang */
.pub-main{max-width:792px;margin:0 auto;padding:14px 16px 36px}
.crumb{font-size:13.5px;color:var(--muted);margin:2px 0 14px}
.crumb ol{list-style:none;margin:0;padding:0;line-height:1.6}
.crumb li{display:inline}
.crumb li+li::before{content:"›";margin:0 7px;color:#9ca3af}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--pri-d);text-decoration:underline}
.crumb li[aria-current]{color:var(--ink);font-weight:600}

/* ---- bài học */
.pub .lesson{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 16px 22px;font-size:17px;line-height:1.68;overflow-wrap:break-word}
.pub .lesson .pub-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.pub .lesson h1{font-size:26px;line-height:1.22;margin:0 0 14px;letter-spacing:-.01em}
.pub .lesson h2{font-size:20px;line-height:1.3;margin:30px 0 10px;padding-left:11px;border-left:4px solid var(--pri)}
.pub .lesson h3{font-size:17.5px;margin:22px 0 8px;padding-left:0;border-left:0}
.pub .lesson p{margin:0 0 .95em}
.pub .lesson ul,.pub .lesson ol{margin:0 0 1em;padding-left:24px}
.pub .lesson li{margin:.3em 0}
.pub .lesson .goals{margin:0 0 18px;font-size:16px;line-height:1.55}
.pub .lesson .note{font-size:16px;line-height:1.6}
.pub .lesson .ex>div{font-size:16px;line-height:1.6}
.pub .lesson .ex h2{font-size:17px;margin:14px 0 8px}
.pub .lesson>:last-child{margin-bottom:0}
/* điện thoại: bài đọc tràn bề ngang như trong app, không thêm khung */
@media(max-width:699px){.pub .lesson{background:none;border:0;box-shadow:none;border-radius:0;padding:4px 0 0}}
/* hình co theo bề ngang trang; bảng, bảng mã lệnh, công thức dài cuộn ngang trong khung của mình */
.pub .fig-in{overflow:visible;padding:12px 10px}
.pub .fig-in svg.fig,.pub .fig-in.wide svg.fig{max-width:100%;height:auto;flex:0 1 auto;min-width:0}
.pub .fig-in.wide{justify-content:center}
.pub .fig-in img,.pub video.vid{max-width:100%;height:auto}
.pub figure.fig-box figcaption{padding-left:12px;padding-right:12px;font-size:14px;line-height:1.5}
.pub .tbl-wrap,.pub .code-box{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pub .tbl td svg{max-width:none}
.pub .item.link-b{text-decoration:none}
.pub-zoom{flex:1 1 100%;text-align:center;font-size:13.5px;font-weight:650;padding:4px 0 0}

/* ---- khung "Học bài này trong app", khung thay công cụ tương tác, khung luyện tập */
.pub-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 20px;padding:14px 14px;border-radius:var(--r);border:1.5px solid var(--pri);background:var(--pri-l)}
.pub-cta>div{flex:1 1 260px;min-width:0}
.pub-cta b{display:block;font-size:17px;line-height:1.3;color:var(--pri-d)}
.pub .pub-cta p{margin:3px 0 0;font-size:14.5px;line-height:1.5;color:#1f3b2a}
.pub-cta .btn{flex:0 0 auto}
@media(max-width:520px){.pub-cta .btn,.pub-pr .btn{flex:1 1 100%}}
.pub-wg{margin:16px 0;padding:14px;border-radius:var(--r);border:1.5px dashed var(--pri);background:#f6fbf7;font-size:15.5px;line-height:1.55}
.pub-wg b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pri-d);margin-bottom:2px}
.pub-wg strong{display:block;font-size:16.5px;line-height:1.35}
.pub .pub-wg p{margin:4px 0 10px;color:var(--muted)}
.pub-box{margin-top:16px;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.pub-box h2{font-size:18px;margin:0 0 4px}
.pub-box p{margin:0 0 12px;font-size:15.5px;color:var(--muted);line-height:1.55}
.pub-pr{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.pub-pr .num{flex:none;width:64px;height:64px;border-radius:16px;background:var(--pri);color:#fff;display:grid;place-items:center;text-align:center;font-weight:800;font-size:26px;line-height:1}
.pub-pr .num small{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;margin-top:3px;opacity:.92}
.pub-pr>div{flex:1 1 240px;min-width:0}
.pub-pr p{margin-bottom:0}
.pub-pr .btn{flex:0 0 auto}

/* ---- bài trước, bài sau */
.pub-pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pub-pn a{display:block;padding:12px 14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);min-width:0}
.pub-pn a:hover{border-color:var(--pri)}
.pub-pn a small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.pub-pn a b{display:block;font-size:15.5px;line-height:1.35;color:var(--pri-d)}
.pub-pn a.nx{text-align:right;grid-column:2}
.pub-pn a.pv{grid-column:1}
@media(max-width:520px){.pub-pn{grid-template-columns:1fr}.pub-pn a.nx,.pub-pn a.pv{grid-column:1;text-align:left}}

/* ---- trang khóa học và danh sách khóa */
.pub-hero{border-radius:var(--r);padding:20px 16px;color:#fff;background:linear-gradient(135deg,#0b5c2c,#12813f 60%,#2a9d5c);box-shadow:var(--shadow)}
.pub-hero.c-ds{background:linear-gradient(135deg,#123a7a,#1d4ed8 60%,#3b6ef0)}
.pub-hero.c-phay{background:linear-gradient(135deg,#7a2a12,#c2410c 60%,#e2622a)}
.pub-hero.c-tien{background:linear-gradient(135deg,#0b4f55,#0f766e 60%,#18988c)}
.pub-hero.c-phlt{background:linear-gradient(135deg,#2b2a78,#4338ca 60%,#6366f1)}
.pub-hero .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9;margin:0 0 4px}
.pub-hero h1{font-size:28px;line-height:1.2;margin:0 0 8px}
.pub-hero p{margin:0;font-size:16px;line-height:1.55;max-width:60ch}
.pub-hero .facts{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.pub-hero .facts li{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18)}
.pub-hero .row{margin-top:16px}
.pub-hero .btn{background:#fff;border-color:#fff;color:var(--pri-d)}
.pub-hero .btn.line{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.pub-hero.c-ds .btn{color:#123a7a}.pub-hero.c-phay .btn{color:#7a2a12}.pub-hero.c-tien .btn{color:#0b4f55}.pub-hero.c-phlt .btn{color:#2b2a78}
.pub-hero.c-ds .btn.line,.pub-hero.c-phay .btn.line,.pub-hero.c-tien .btn.line,.pub-hero.c-phlt .btn.line{color:#fff}
.pub-ch{margin-top:22px}
.pub-ch>h2{font-size:20px;line-height:1.3;margin:0 0 2px;scroll-margin-top:12px}
.pub-ch>h2 span{color:var(--pri-d)}
.pub-ch>.sub{margin:2px 0 0;font-size:14.5px;color:var(--muted);line-height:1.5}
.pub-ch>.cnt{margin:2px 0 10px;font-size:13px;font-weight:700;color:var(--muted)}
.pub-ls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pub-ls>li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.pub-ls .n{flex:none;width:44px;height:36px;border-radius:10px;background:var(--pri-l);color:var(--pri-d);display:grid;place-items:center;font-weight:800;font-size:14px}
.pub-ls li.lk .n{background:var(--soft);color:var(--muted)}
.pub-ls .b{flex:1;min-width:0}
.pub-ls h3{font-size:16px;line-height:1.35;margin:0;font-weight:700}
.pub-ls h3 a{color:var(--pri-d);text-decoration:none}
.pub-ls h3 a:hover{text-decoration:underline}
.pub-ls li.lk h3{color:#334155}
.pub-ls .m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:4px 0 0;font-size:13px;color:var(--muted)}
.pub-ls ul{margin:8px 0 0;padding-left:18px;font-size:14.5px;line-height:1.5;color:#334155;list-style:disc}
.pub-ls ul li{margin:.2em 0}
.pub-ls .gl{margin:8px 0 0;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pub-ls .gl+ul{margin-top:2px}
.pub-more{margin:10px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.pub-cs{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:700px){.pub-cs{grid-template-columns:1fr 1fr}}
.pub-cs>li{display:flex}
.pub-cs a.c{display:flex;flex-direction:column;flex:1;border-radius:var(--r);padding:16px;color:#fff;text-decoration:none;box-shadow:var(--shadow);background:linear-gradient(135deg,#0b5c2c,#12813f 60%,#2a9d5c)}
.pub-cs a.c.c-ds{background:linear-gradient(135deg,#123a7a,#1d4ed8 60%,#3b6ef0)}
.pub-cs a.c.c-phay{background:linear-gradient(135deg,#7a2a12,#c2410c 60%,#e2622a)}
.pub-cs a.c.c-tien{background:linear-gradient(135deg,#0b4f55,#0f766e 60%,#18988c)}
.pub-cs a.c.c-phlt{background:linear-gradient(135deg,#2b2a78,#4338ca 60%,#6366f1)}
.pub-cs h2{font-size:21px;line-height:1.25;margin:0 0 6px}
.pub-cs p{margin:0 0 12px;font-size:15px;line-height:1.5;opacity:.96;flex:1}
.pub-cs .facts{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pub-cs .facts li{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.18)}
.pub-cs .go{margin-top:12px;font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.pub-h1{font-size:27px;line-height:1.22;margin:4px 0 8px}
.pub-lead{font-size:16.5px;line-height:1.6;color:#334155;margin:0 0 4px;max-width:66ch}

/* ---- chân trang */
.pub .contact{margin-top:22px}
.pub .contact a.btn{text-decoration:none}
.pub-foot{margin:16px 0 0;font-size:13.5px;color:var(--muted);text-align:center;line-height:1.6}
.pub-foot a{color:var(--muted)}

@media(min-width:700px){
  .pub-main{padding:22px 16px 56px}
  .pub .lesson{padding:34px 42px 36px;font-size:18px;line-height:1.72}
  .pub .lesson h1{font-size:33px;margin-bottom:18px}
  .pub .lesson h2{font-size:22.5px;margin-top:36px}
  .pub .lesson .goals,.pub .lesson .note,.pub .lesson .ex>div{font-size:16.5px}
  .pub-ls .b{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;min-height:36px}
  .pub-ls .m{margin:0;grid-column:2;grid-row:1;justify-content:flex-end}
  .pub-ls .gl,.pub-ls ul{grid-column:1/-1}
  .pub-hero{padding:30px 32px}
  .pub-hero h1{font-size:36px}
  .pub-h1{font-size:34px}
  .pub-box{padding:20px 24px}
  .pub-cta{padding:16px 18px}
}

/* app.css chặn in trong app; trang tĩnh in được bình thường */
@media print{
  body.pub::before{content:none!important;display:none!important}
  .pub-top nav,.pub-cta,.pub-pn,.pub-box,.pub-wg .btn{display:none!important}
  .pub .lesson{border:0;box-shadow:none;padding:0}
  body.pub{background:#fff}
}
.pub-sec{font-size:16px;margin:16px 0 8px;line-height:1.3}
.pub-ch .soon{margin:0 0 8px;color:var(--muted,#667);font-size:14px;font-style:italic}