/* Go-live: logo Step Up, mục số liệu /hop-tac/, nút phụ hero, khung ảnh media. Nguồn ở tools/golive.css;
   tools/extract_preview.py chép ra assets/css/golive.<hash>.css. Không sửa site.*.css / pages.*.css. */

/* Logo Step Up bản A (viewBox 132x48): cao 32 px, điện thoại 28 px, bề ngang theo tỷ lệ */
.hdr__logo-img{display:block;height:32px;width:auto;max-width:none}
.ftr__logo{display:block;height:32px;width:auto;max-width:none;margin:0 0 var(--space-8)}
@media(max-width:767px){.hdr__logo-img{height:28px}}

/* Mục số liệu: 3 thẻ trắng bo 16 px, số to, nhãn dưới, canh giữa */
dl.stats{gap:var(--space-5)}
@media(min-width:768px){dl.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
dl.stats>.stat{align-items:center;justify-content:center;text-align:center;gap:var(--space-2);
  padding:var(--space-8) var(--space-5);border:0;border-radius:16px;background:var(--surface-card);
  box-shadow:0 6px 20px rgba(15,23,42,.07)}
dl.stats>.stat .stat__value{color:var(--neutral-900);white-space:nowrap}
dl.stats>.stat .stat__label{color:var(--text-secondary)}

/* Link dài (URL làm chữ) trong bài tuyển dụng: xuống dòng, không đẩy tràn ngang ở điện thoại */
.w-prose a{overflow-wrap:anywhere}

/* Một trục trái cho mọi section: khối chữ hẹp (--text 960, --read 680) giữ khung rộng 1200 như các
   section khác, chỉ giới hạn bề ngang dòng chữ bên trong, căn trái. Trước đây khung hẹp căn giữa
   làm mép chữ nhảy 48 → 160 → 300 px giữa các section. */
.w-container--text,.w-container--read{max-width:calc(var(--web-container-wide) + 2 * var(--web-gutter))}
.w-container--text>*{max-width:var(--web-container-text);margin-inline:0}
.w-container--read>*{max-width:var(--web-container-read);margin-inline:0}

/* Hero: nút phụ dạng chữ (pk-btn--text) thành nút viền, cùng cao / bo / cỡ chữ với nút chính bên cạnh.
   Nền trong, viền teal 1.5px; hover nền sáng cùng tông, viền nhạt dần (không thêm viền, không trắng);
   nhấn lún và nhỏ lại. Điện thoại: rộng hết hàng như nút chính. */
.hero__ctas .pk-btn--text{padding-bottom:var(--button-depth,4px)}
.hero__ctas .pk-btn--text .pk-btn__face{--btn-bg:transparent;--btn-text:var(--text-heading);min-width:var(--btn-minw);
  padding:0 var(--btn-pad);margin-left:0;border:1.5px solid var(--cyan-600);text-transform:uppercase;
  letter-spacing:var(--type-button-tracking);text-decoration:none;
  transition:transform var(--motion-normal) var(--ease-spring),background var(--motion-normal),border-color var(--motion-normal)}
@media(hover:hover)and (pointer:fine){.hero__ctas .pk-btn--text:hover .pk-btn__face{background:var(--cyan-50);border-color:var(--cyan-400)}}
.hero__ctas .pk-btn--text:active .pk-btn__face{transform:translateY(3px) scale(.97);background:var(--cyan-50);
  border-color:var(--cyan-400);transition:transform 60ms ease-out}
@media(max-width:767px){.hero__ctas .pk-btn--text{display:block;width:100%}.hero__ctas .pk-btn--text .pk-btn__face{min-width:0}}

/* Ảnh media (tools/place_media.py theo tools/media_slots.json) */
/* Thẻ path: ảnh chụp lấp đầy khung, không lộ nền khung; màn app: điện thoại cắt ngang ở mép dưới khung */
.path__media .path__img.media-cover{width:100%;height:100%;object-fit:cover}
.path__media .path__img.media-phone{height:168px;width:auto;align-self:flex-end}
/* Ảnh chụp ở hero: bo góc như ảnh split */
.hero__media .hero__img.media-photo{border-radius:var(--radius-3xl)}
/* Mốc /hop-tac/: hai ô cùng tỉ lệ; 2023 màn app nền trong trên nền nhạt, 2026 ảnh chụp lấp đầy ô */
.step .media-tile{width:100%;height:auto;aspect-ratio:1232/966;object-fit:cover;border-radius:var(--radius-xl);margin:var(--space-2) 0}
.step .media-tile--tint{object-fit:contain;background:var(--surface-tinted);padding:var(--space-3)}
/* Ảnh trong bài (prose): rộng hết cột chữ, bo góc */
.w-prose>.media-prose{width:100%;height:auto;border-radius:var(--radius-2xl);margin:0 0 var(--space-5)}
/* Màn app đứng riêng (điện thoại nền trong) giữa các khối chữ */
.media-phone-block{width:240px;max-width:100%;height:auto;margin:0 0 var(--space-6)}
/* /hop-tac/ Tín hiệu thành công: 2 huy hiệu + ảnh sân khấu một hàng; điện thoại: 2 huy hiệu một hàng, ảnh dưới */
.media-awards{--gap:var(--space-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--gap);margin:0 0 var(--space-8)}
.media-awards .media-badge{height:140px;width:auto}
.media-awards .media-stage{height:180px;width:auto;border-radius:var(--radius-xl)}
@media(max-width:767px){.media-awards .media-badge{width:calc(50% - var(--gap) / 2);height:auto}
  .media-awards .media-stage{width:100%;height:auto}}

/* Trang 404 / 410 / 503 (QC layout 14/10): giữ lề hai bên của w-container; tiêu đề 2 dòng không chồng;
   các nút cùng bề rộng theo lưới (điện thoại 1 cột, màn rộng một hàng, không rớt lẻ một nút) */
.err__title{line-height:1.2;text-wrap:balance}
.err__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;max-width:960px;margin:0 auto}
.err__actions .pk-btn{display:block}
.err__actions .pk-btn__face{width:100%;min-width:0}
@media(min-width:600px)and (max-width:1023px){.err__actions{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
  .err__actions .pk-btn:first-child{grid-column:1/-1}}

/* Lưới thẻ (QC layout 14/10): lưới 3 thẻ ở 768–1099 px là 2 cột, thẻ lẻ cuối kéo hết hàng thay vì nằm một mình;
   lưới chỉ còn 1 thẻ (/cam-on/) không chiếm nửa trái rồi bỏ trống nửa phải */
@media(min-width:768px)and (max-width:1099px){.w-cards--3:not(.steps)>:last-child:nth-child(odd){grid-column:1/-1}
  .steps.w-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.w-cards--single{grid-template-columns:minmax(0,1fr)!important;max-width:560px}
/* Mốc /hop-tac/ (QC 14/10): ảnh nằm dưới đoạn mô tả để tiêu đề 3 mốc thẳng hàng; khi mốc cuối kéo hết hàng
   (768–1099 px) ảnh không phình quá 480 px */
.step .media-tile{margin:var(--space-4) 0 0;max-width:480px}

/* Bảng Phụ lục /hop-tac/ (#thi-truong, QC 14/10). Màn rộng: bảng dùng hết khung 1200 thay vì cột chữ 680,
   chữ trong ô không bị ép 2 dòng. Điện thoại: bảng cuộn ngang có dòng nhắc + bóng mép phải, cột đủ rộng để đọc. */
#thi-truong .w-container--read>.w-prose{max-width:none}
#thi-truong .w-prose>p{max-width:var(--web-container-read)}
#thi-truong .w-prose>table{max-width:none}
.table-hint{display:none}
@media(max-width:767px){
  .table-hint{display:block;font-size:13px;color:var(--text-secondary);margin:0 0 var(--space-2)}
  #thi-truong table th,#thi-truong table td{min-width:120px}
  #thi-truong table th:last-child,#thi-truong table td:last-child{min-width:220px}
  #thi-truong table{background:linear-gradient(to right,var(--surface-page,#F8FAFC) 30%,transparent) 0 0/32px 100% no-repeat local,
    linear-gradient(to left,var(--surface-page,#F8FAFC) 30%,transparent) 100% 0/32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.18),transparent) 0 0/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.18),transparent) 100% 0/12px 100% no-repeat scroll}}

/* Tiêu đề (QC 14/10): tên tin tuyển dụng dài dùng cỡ nhỏ hơn cỡ hero để không vỡ 5–7 dòng;
   tiêu đề trong bài không để một chữ rơi xuống dòng cuối */
.job__title{font-size:clamp(28px,2.4vw + 12px,44px);line-height:1.2}
.w-prose h2,.w-prose h3,.w-h2,.w-h3{text-wrap:balance}

/* Khoảng trắng (QC 14/10):
   - footer bỏ margin-top 64 px: section cuối (thường nền xanh "Nhận tư vấn") nối thẳng footer, không lộ dải nền xám;
   - hero không ảnh (trang văn bản) đệm dưới nhỏ, không hở 180–240 px trước nội dung;
   - hai section cùng nền trong đứng liền nhau: section sau bỏ đệm trên (một khoảng 120 px thay vì 240 px). */
.ftr[class]{margin-top:0}
.hero.hero:not(:has(.hero__media)){padding-bottom:var(--space-6)}
.w-section:not(.w-section--tinted):not(.w-section--white)+.w-section:not(.w-section--tinted):not(.w-section--white):not(.hero){padding-top:0}

/* Khối xám thay ảnh sticker Pika (Hirosi 14/10: không dùng sticker, ảnh bổ sung sau). Giữ class cũ của ảnh
   (hero__img, prod__img, split__img...) để chiếm đúng khung; tỉ lệ đặt bằng aspect-ratio inline */
.img-ph{display:block;width:100%;max-width:440px;height:auto;background:#E2E8F0;border-radius:var(--radius-2xl)}
/* .hero__img gốc đặt width:auto (hợp với <img>, làm <span> rỗng co về 0) */
.img-ph[class][role]{width:100%;flex:0 1 440px}
.prod__media .img-ph{max-width:180px;margin-inline:auto}

/* /hop-tac/ "Ghi nhận tại Việt Nam" (QC 14/10): sau khi bỏ 3 thẻ số, tiêu đề trái + hàng giải thưởng phải
   trên một hàng (từ 1024 px), không còn 3 ảnh dồn trái với nửa phải trống */
@media(min-width:1024px){#thanh-tich .w-container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}
  #thanh-tich .w-section__head{margin:0;flex:0 1 360px}#thanh-tich .media-awards{margin:0;flex:0 1 auto;justify-content:flex-end}}

/* /ho-tro/ "Cài đặt Pika" (QC 14/10): ảnh màn app đứng cạnh danh sách câu hỏi từ 1024 px, không đứng lẻ phía trên */
@media(min-width:1024px){.w-container--text:has(>.media-phone-block){display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:var(--space-12);align-items:start}
  .w-container--text:has(>.media-phone-block)>.w-section__head{grid-column:1/-1}
  .w-container--text:has(>.media-phone-block)>.media-phone-block{margin:0}}

/* Bảng học phí /pika-class/ (QC 14/10): nút cuối thẻ luôn nằm sát đáy, hai thẻ nút thẳng hàng */
.plan[class]>.pk-btn:last-child{margin-top:auto}

/* Ảnh cột trái của split (/hop-tac/ "Pika làm gì") bám lề trái chung, không căn giữa cột lệch 44–88 px (QC 14/10) */
.w-split:not(.w-split--reverse)>.split__media[class]{justify-content:flex-start}
/* Ảnh trong bài (ảnh dọc VLSP ở /hoi-dap-voi-ceo/) không cao hơn một màn hình */
.w-prose img{max-height:min(80vh,720px);width:auto;max-width:100%;object-fit:contain}

/* Trang 404 / 410 / 503 ngắn: footer bám đáy màn (màn 2K không còn dải trống dưới footer) */
.err-page{min-height:100vh;display:flex;flex-direction:column}.err-page>main{flex:1 0 auto}