/**
 * Thư viện kỹ năng (/skill và /skill/<so>-<slug>) — CSS dùng chung của 2 trang.
 *
 * Vì sao là FILE RIÊNG chứ không phải khối <style> trong từng trang (khuôn
 * mặc định của trang marketing): 2 trang này dùng chung thẻ kỹ năng, chip, huy
 * hiệu, form thu liên hệ — nhân đôi vào 2 file là chắc chắn lệch nhau sau vài
 * lần sửa. File này CHỈ được 2 trang đó <link> tường minh, KHÔNG nạp qua
 * hooks.py (giống brand-marketing.css).
 *
 * Bắt buộc link SAU brand-tokens.css + brand-marketing.css.
 * Quy tắc màu (docs/design-system-poster.md §9.1) đã tuân thủ:
 *   - chữ nhỏ nhấn màu  -> var(--cobalt) hoặc var(--red-text), KHÔNG dùng --red
 *   - --red chỉ làm nền khối, viền, hard-shadow
 * Viết mobile-first: mặc định 1 cột, media query chỉ để MỞ RỘNG ra desktop.
 */

/* ---------- [hidden] phải THẮNG mọi display của primitive ----------
   Bẫy đã dẫm (bắt được bằng ảnh chụp mobile, không phải đọc code): nút "Tải
   thêm" có class .btn (display:inline-block) nên thuộc tính `hidden` của HTML
   — vốn chỉ là `display:none` trong UA stylesheet — bị rule của tác giả đè,
   nút hiện thường trực dù JS đã set hidden=true. File này chỉ nạp cho 2 trang
   /skill nên khai chung một lần ở đây là an toàn. */
[hidden]{display:none !important;}

/* ---------- Cờ bài nháp (chỉ GV thấy) ---------- */
.draft-flag{
  margin:1rem 0 0;max-width:none;
  background:var(--red);color:#000;
  font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.05em;
  padding:.6rem 1rem;border:var(--border-w) solid var(--black);
}

/* ---------- Chip dùng chung (bậc / đối tượng / đã chạy thử) ---------- */
.sk-chip{
  display:inline-block;
  font-family:var(--font-display);font-weight:800;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:.32rem .7rem;border:var(--border-w-thin) solid var(--black);
  background:var(--paper-2);color:var(--black);
}
.sk-chip--tested{background:var(--cobalt);border-color:var(--cobalt);color:#fff;}
.sk-chip--level{background:var(--black);color:var(--paper);}
.sk-chip--who{background:var(--paper-2);}

/* ---------- Trang chi tiết: hero ---------- */
.sk-hero{padding-bottom:clamp(1.5rem,4vw,2.5rem);}
.sk-back{
  display:inline-block;font-family:var(--font-mono);font-size:.82rem;
  color:var(--ink-soft);text-decoration:none;margin-bottom:1.5rem;
}
.sk-back:hover,.sk-back:focus-visible{color:var(--black);text-decoration:underline;}

.sk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;}
.sk-num{
  font-family:var(--font-display);font-weight:900;font-size:1.5rem;line-height:1;
  color:var(--red-text);
}
.sk-date{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft);}

.sk-title{font-size:clamp(1.9rem,5.5vw,3.2rem);margin-top:1rem;max-width:20ch;}
.sk-problem{
  font-size:var(--fs-lead);color:var(--ink-soft);font-weight:500;
  margin-top:1.25rem;max-width:58ch;
}

/* ---------- Video: ảnh bìa + nút play, bấm mới nạp iframe ---------- */
.sk-video-section{padding-bottom:clamp(2rem,5vw,3rem);}
.sk-video{
  position:relative;aspect-ratio:16/9;width:100%;
  border:var(--border-w) solid var(--black);background:var(--black);
  box-shadow:var(--shadow-red);overflow:hidden;
}
.sk-video__btn{
  all:unset;display:block;position:relative;width:100%;height:100%;cursor:pointer;
}
.sk-video__btn:focus-visible{outline:3px solid var(--cobalt);outline-offset:-6px;}
.sk-video__thumb{width:100%;height:100%;object-fit:cover;}
/* Ảnh maxres 404 (video mới up / mã giả) -> rơi về hqdefault, ảnh này có viền
   đen 2 bên nên cover cho tràn khung thay vì để lộ khoảng trống. */
.sk-video__thumb.is-fallback{object-fit:cover;transform:scale(1.34);}
.sk-video__play{
  position:absolute;inset:0;margin:auto;width:78px;height:78px;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#000;border:var(--border-w) solid var(--black);
  transition:transform .12s ease;
}
.sk-video__btn:hover .sk-video__play,
.sk-video__btn:focus-visible .sk-video__play{transform:scale(1.08);}
.sk-video__label{
  position:absolute;left:0;bottom:0;
  background:var(--black);color:var(--paper);
  font-family:var(--font-display);font-weight:800;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.5rem .9rem;
}
.sk-video__frame{width:100%;height:100%;border:0;display:block;}
.sk-video__note{font-size:.85rem;color:var(--ink-soft);margin-top:.75rem;}
.sk-video__note a{color:var(--cobalt);}
@media (prefers-reduced-motion:reduce){.sk-video__play{transition:none;}}

/* ---------- Khối nội dung chi tiết ---------- */
.sk-body{padding-bottom:clamp(2rem,6vw,4rem);}
.sk-main{max-width:760px;}
.sk-block{margin-bottom:clamp(2.25rem,6vw,3.25rem);}
.sk-h2{font-size:clamp(1.15rem,3.6vw,1.5rem);margin-bottom:1rem;}

.sk-audience{display:flex;flex-wrap:wrap;gap:.6rem;}

/* Bằng chứng đã chạy thử */
.sk-evidence{
  border:var(--border-w) solid var(--black);background:var(--paper-2);
  box-shadow:var(--shadow-cobalt);padding:clamp(1.1rem,3.5vw,1.6rem);
}
.sk-evidence__case{font-weight:600;margin-bottom:1.25rem;}
.sk-ba{display:grid;gap:1rem;}
.sk-ba__col{border:var(--border-w-thin) solid var(--black);padding:.9rem 1rem;background:var(--paper);}
.sk-ba__col--after{background:var(--paper-2);border-color:var(--cobalt);}
.sk-ba__label{
  display:block;font-family:var(--font-display);font-weight:800;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem;
}
.sk-ba__col--after .sk-ba__label{color:var(--cobalt);}
.sk-ba p{margin:0;font-size:.95rem;}
.sk-evidence__save{margin:1.25rem 0 0;font-size:.95rem;}
@media (min-width:620px){.sk-ba{grid-template-columns:1fr 1fr;}}

/* Khi nào KHÔNG dùng được — bóng đỏ để nó "kêu" hơn các khối khác */
.sk-nope{
  border:var(--border-w) solid var(--black);background:var(--paper-2);
  box-shadow:var(--shadow-red);padding:clamp(1.1rem,3.5vw,1.6rem);
  display:grid;gap:.9rem;
}
.sk-nope li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;}
.sk-nope li::before{
  content:"✕";flex:none;font-weight:900;color:var(--red-text);line-height:1.5;
}

/* Tải về */
.sk-download__free{font-size:.92rem;color:var(--ink-soft);}
.sk-download__btn{margin:.25rem 0 1.75rem;}
.sk-download__bundle{font-size:.92rem;color:var(--ink-soft);margin-top:1.5rem;}
.sk-download__bundle a{color:var(--cobalt);}
.sk-steps{display:grid;gap:.9rem;counter-reset:step;}
.sk-steps li{display:flex;gap:.85rem;align-items:flex-start;font-size:.97rem;}
.sk-steps__n{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:var(--black);color:var(--paper);
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
}

/* Thân bài markdown */
.sk-prose h2{font-size:clamp(1.15rem,3.6vw,1.5rem);margin:2rem 0 .9rem;}
.sk-prose h3{font-size:1.05rem;margin:1.5rem 0 .7rem;}
.sk-prose p{font-size:1rem;}
.sk-prose ul{list-style:disc;padding-left:1.3rem;margin:0 0 1rem;}
.sk-prose ol{padding-left:1.3rem;margin:0 0 1rem;}
.sk-prose li{margin-bottom:.4rem;}
.sk-prose blockquote{
  border-left:var(--border-w) solid var(--black);margin:0 0 1rem;padding:.2rem 0 .2rem 1rem;
  color:var(--ink-soft);
}
.sk-prose code{font-family:var(--font-mono);font-size:.88em;background:var(--paper-2);
  border:1px solid var(--black);padding:.05em .3em;}
.sk-prose pre{
  font-family:var(--font-mono);font-size:.85rem;line-height:1.5;
  background:var(--black);color:var(--paper);padding:1rem;
  overflow-x:auto;margin:0 0 1.25rem;
}
.sk-prose pre code{background:none;border:0;padding:0;color:inherit;}
.sk-prose a{color:var(--cobalt);}
.sk-prose table{width:100%;border-collapse:collapse;margin:0 0 1.25rem;font-size:.92rem;display:block;overflow-x:auto;}
.sk-prose th,.sk-prose td{border:var(--border-w-thin) solid var(--black);padding:.5rem .7rem;text-align:left;}

/* Nguồn gốc */
.sk-source{border:var(--border-w-thin) solid var(--black);background:var(--paper-2);padding:1.1rem 1.25rem;}
.sk-source p{margin:0 0 .5rem;font-size:.95rem;}
.sk-source__name{font-family:var(--font-display);font-weight:800;font-size:1.05rem;}
.sk-source__link{font-family:var(--font-mono);font-size:.82rem;color:var(--cobalt);overflow-wrap:anywhere;}

/* ---------- Thẻ kỹ năng (dùng ở "liên quan" + trang danh sách) ---------- */
.sk-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:2rem;}
.sk-card{
  display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:var(--black);
  transition:transform .12s ease,box-shadow .12s ease;
}
.sk-card:hover,.sk-card:focus-visible{transform:translate(2px,2px);box-shadow:var(--shadow-black-sm);}
.sk-card__num{font-family:var(--font-display);font-weight:900;font-size:.95rem;color:var(--red-text);}
.sk-card h3{font-size:1.02rem;margin:0;}
.sk-card p{
  margin:0;font-size:.9rem;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sk-card__more{margin-top:auto;font-family:var(--font-display);font-weight:800;font-size:.8rem;
  text-transform:uppercase;color:var(--cobalt);}
@media (prefers-reduced-motion:reduce){.sk-card{transition:none;}}

.sk-related{background:var(--paper-2);border-top:var(--border-w) solid var(--black);}

/* ---------- Trang danh sách ---------- */
/* line-height 1.05 (không phải .95 mặc định của h1): dòng thứ hai nằm trong
   khối tô đỏ .sk-hl, chật quá thì nền đỏ liếm mất dấu của dòng trên — đúng bẫy
   "VẪN đọc thành VÂN" đã ghi ở brand-marketing.css. */
.sk-hero-list h1{font-size:clamp(2.2rem,6vw,3.8rem);margin-top:1rem;line-height:1.05;}
.sk-hl{background:var(--red);color:var(--paper);display:inline-block;padding:.05em .3em;}

.sk-tools{display:grid;gap:1.25rem;margin-top:2rem;}
.sk-search{position:relative;}
.sk-search input{
  width:100%;font-family:var(--font-body);font-size:1rem;
  padding:.85rem 1rem;border:var(--border-w) solid var(--black);background:var(--paper-2);
  color:var(--black);
}
.sk-search input:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;}
.sk-filter-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}
.sk-filter-row__label{
  font-family:var(--font-display);font-weight:800;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-right:.25rem;
}
.sk-chipbtn{
  all:unset;box-sizing:border-box;cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:.76rem;letter-spacing:.04em;
  text-transform:uppercase;padding:.5rem 1rem;
  border:var(--border-w-thin) solid var(--black);background:var(--paper-2);color:var(--black);
}
.sk-chipbtn:hover{border-color:var(--red);}
.sk-chipbtn:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;}
.sk-chipbtn[aria-pressed="true"]{background:var(--black);color:var(--paper);border-color:var(--black);}

.sk-count{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-soft);margin:1.5rem 0 0;}

/* Dòng thời gian: mỗi mục là 1 thẻ ngang (ảnh + chữ), xuống 1 cột ở điện thoại */
.sk-list{display:grid;gap:1.5rem;margin-top:1.25rem;}
.sk-item{
  display:grid;gap:1rem;text-decoration:none;color:var(--black);
  border:var(--border-w) solid var(--black);background:var(--paper-2);
  box-shadow:5px 5px 0 var(--black);padding:1rem;
  transition:transform .12s ease,box-shadow .12s ease;
}
.sk-item:hover,.sk-item:focus-visible{transform:translate(2px,2px);box-shadow:var(--shadow-black-sm);}
.sk-item[hidden]{display:none;}
.sk-item__thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:var(--border-w-thin) solid var(--black);background:var(--black);
}
.sk-item__thumb img{width:100%;height:100%;object-fit:cover;}
.sk-item__num{
  position:absolute;left:0;top:0;background:var(--black);color:var(--paper);
  font-family:var(--font-display);font-weight:900;font-size:.85rem;padding:.25rem .6rem;
}
.sk-item__body{display:flex;flex-direction:column;gap:.6rem;}
.sk-item__meta{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;}
.sk-item h2{font-size:1.1rem;margin:0;}
.sk-item p{margin:0;font-size:.93rem;color:var(--ink-soft);}
.sk-item__date{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);margin-top:auto;}
@media (min-width:700px){
  .sk-item{grid-template-columns:280px 1fr;align-items:start;}
}
@media (prefers-reduced-motion:reduce){.sk-item{transition:none;}}

.sk-empty{
  border:var(--border-w-thin) dashed var(--black);background:var(--paper-2);color:var(--ink-soft);
  text-align:center;padding:clamp(2rem,6vw,3rem) 1.5rem;margin-top:2rem;
}
.sk-loadmore{display:flex;justify-content:center;margin-top:2.5rem;}

/* ---------- Tải trọn bộ theo bậc (có form xin liên hệ) ---------- */
.sk-bundle{
  border:var(--border-w) solid var(--black);background:var(--paper-2);
  box-shadow:var(--shadow-red);padding:clamp(1.25rem,4vw,2rem);
}
.sk-bundle h2{font-size:clamp(1.3rem,4vw,1.9rem);}
.sk-bundle__lead{margin-top:.85rem;color:var(--ink-soft);}
.sk-bundle__levels{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem;}
/* Báo lỗi khi quay về từ link tải hỏng (?loi=...). Nền đỏ + chữ ĐEN: body copy
   trên nền --red phải là #000 (5.04:1), không được dùng --paper — §9.1. */
.sk-bundle__err{
  margin-top:1.25rem;background:var(--red);color:#000;
  border:var(--border-w-thin) solid var(--black);padding:.75rem 1rem;
  font-weight:600;max-width:none;
}

.sk-form{display:grid;gap:1rem;margin-top:1.5rem;max-width:520px;}
.sk-form label{font-family:var(--font-display);font-weight:800;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:.4rem;}
.sk-form input[type="text"],.sk-form select{
  width:100%;font-family:var(--font-body);font-size:1rem;
  padding:.75rem .9rem;border:var(--border-w-thin) solid var(--black);
  background:var(--paper);color:var(--black);
}
.sk-form input:focus-visible,.sk-form select:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;}
.sk-form__hint{font-size:.82rem;color:var(--ink-soft);margin:.4rem 0 0;}
/* Bẫy bot: ô này người thật không bao giờ thấy nên không bao giờ điền. */
.sk-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.sk-form__msg{font-size:.92rem;margin:0;}
.sk-form__msg--err{color:var(--red-text);font-weight:600;}
.sk-form__msg--ok{color:var(--cobalt);font-weight:600;}
.sk-form button[type="submit"]{cursor:pointer;font-family:var(--font-display);}
.sk-form button[disabled]{opacity:.6;cursor:progress;}