/**
 * Brand marketing primitives — hệ thiết kế "Poster" (nền sáng).
 * Dùng CHUNG biến từ brand-tokens.css (bắt buộc link file đó TRƯỚC file này).
 *
 * File này CHỈ được nạp bởi trang marketing tự chứa (link tường minh trong
 * <head> của từng trang) — KHÔNG nạp qua hooks.py, vì nó có rule áp style
 * thật lên body/h1/... mà Desk Frappe và các trang khác không cần.
 *
 * Nguồn: rút ra từ khối <style> của templates/pages/landing.html (bản đã
 * live production 2026-07-25, đã QA) — phần NÀO dùng lại được cho > 1 trang
 * thì đưa vào đây; phần chỉ riêng landing (hero, browser-mock, marquee,
 * tiers, evidence, …) ở lại trong <style> riêng của landing.html.
 *
 * Cách nhúng 1 trang mới (xem đầy đủ ở docs/design-system-poster.md):
 *   <link rel="stylesheet" href="/assets/aiilab_classroom/css/brand-tokens.css">
 *   <link rel="stylesheet" href="/assets/aiilab_classroom/css/brand-marketing.css">
 *   ... rồi 1 khối <style> riêng chỉ chứa CSS đặc thù của trang đó.
 */

/* ---------- Reset nhẹ ---------- */
*,*::before,*::after{box-sizing:border-box;min-width:0;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{
  background:var(--paper);
  color:var(--black);
  font-family:var(--font-body);
  font-weight:450;
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
p{margin:0 0 1rem;max-width:60ch;}
ul{margin:0;padding:0;list-style:none;}

/* ---------- Thang tít: in hoa 900, line-height an toàn cho dấu tiếng Việt ----------
   Bài học đã trả giá: line-height quá chật (vd .92) làm khối tô/nền che mất
   dấu ngã của ký tự phía trên dòng kế tiếp (case thật: "VẪN" bị đọc nhầm
   thành "VÂN" trên landing bản nháp đầu). Giữ line-height ≥ .95 cho mọi tít
   uppercase weight 900. */
h1,h2,h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;margin:0;overflow-wrap:anywhere;}
.h-mega{font-size:var(--fs-mega);line-height:1.14;}

/* ---------- Container + grid 12 cột ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);align-items:start;}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-7{grid-column:span 7;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}
.col-12{grid-column:span 12;}
/* Fallback 1 cột ở màn hình hẹp — mọi [class*="col-"] trong .grid12 đều rơi
   xuống full-width dưới 860px. */
@media (max-width:860px){
  .grid12 [class*="col-"]{grid-column:span 12;}
}

/* ---------- Accessibility: sr-only + skip-link ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* top:-5rem (không phải -60px của bản landing gốc) — đủ xa để không hở mép
   trên ở mọi cỡ font/zoom; không focus thì luôn nằm ngoài khung nhìn nên
   không đổi 1 pixel nào của giao diện hiển thị. */
.skip-link{position:absolute;left:0;top:-5rem;background:var(--black);color:var(--paper);padding:.75rem 1.25rem;font-weight:800;text-transform:uppercase;font-size:.85rem;z-index:200;transition:top .12s ease;}
.skip-link:focus{top:0;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .skip-link{transition:none;}
}

/* ---------- Nhịp section + eyebrow ---------- */
.section{padding:clamp(3rem,7vw,5.5rem) 0;}
.section h2{font-size:var(--fs-h2);}
.section-lead{font-size:1.1rem;color:var(--ink-soft);margin-top:1rem;max-width:56ch;font-weight:500;}

.eyebrow{display:inline-block;font-family:var(--font-display);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:.4rem .8rem;border:var(--border-w) solid var(--black);background:var(--paper-2);margin-bottom:1.25rem;}

/* ---------- Buttons — nền đen chữ bơ, hard shadow đỏ, dịch khi hover ---------- */
.btn{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;padding:.9rem 1.6rem;border:var(--border-w) solid var(--black);transition:transform .12s ease,box-shadow .12s ease;}
.btn-primary{background:var(--black);color:var(--paper);box-shadow:var(--shadow-red);}
.btn-primary:hover,.btn-primary:focus-visible{transform:translate(2px,2px);box-shadow:var(--shadow-red-sm);}
.btn-outline{background:var(--paper);color:var(--black);box-shadow:var(--shadow-black);}
.btn-outline:hover,.btn-outline:focus-visible{transform:translate(2px,2px);box-shadow:var(--shadow-black-sm);}
.btn:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.btn{transition:none;}}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem;}

/* ---------- Card (viền 3px + hard shadow) ---------- */
.card{border:var(--border-w) solid var(--black);background:var(--paper-2);padding:1.5rem;box-shadow:5px 5px 0 var(--black);}
.card h3{font-size:1rem;margin-bottom:.5rem;}
.card p{font-size:.92rem;color:var(--ink-soft);margin:0;}

/* ---------- Site header (dùng qua templates/includes/site_header.html) ---------- */
.site-header{background:var(--paper);border-bottom:var(--border-w) solid var(--black);position:sticky;top:0;z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap;}
.logo{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.1rem;line-height:1;letter-spacing:-.01em;text-decoration:none;color:var(--black);}
.logo svg{flex:none;display:block;}
.logo .ai{color:var(--red-text);}
/* white-space:nowrap: badge "MỚI" không được rớt xuống dòng riêng cạnh chữ
   "Công cụ" ở màn hình hẹp. */
.badge-new{display:inline-block;background:var(--red);color:var(--black);font-family:var(--font-display);font-weight:800;font-size:.62rem;letter-spacing:.06em;padding:.1rem .4rem;margin-left:.3rem;vertical-align:middle;white-space:nowrap;}
.site-nav{display:flex;gap:1.4rem;flex-wrap:wrap;order:3;flex-basis:100%;}
.site-nav a{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--black);padding-bottom:2px;border-bottom:2px solid transparent;white-space:nowrap;}
.site-nav a:hover,.site-nav a:focus-visible{border-color:var(--red);}
.site-nav a.is-active{border-color:var(--black);}
.btn-header{padding:.6rem 1.1rem;font-size:.8rem;background:var(--black);color:var(--paper);box-shadow:4px 4px 0 var(--red);}
.btn-header:hover,.btn-header:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red);}
@media (min-width:761px){.site-nav{order:2;flex-basis:auto;}.btn-header{order:3;}}

/* ---------- Site footer (dùng qua templates/includes/site_footer.html) ---------- */
.site-footer{background:var(--paper);border-top:var(--border-w) solid var(--black);padding:2.5rem 0;}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1.75rem 2.5rem;}
.footer-brand{max-width:32ch;}
.footer-wordmark{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:1.05rem;margin:0 0 .6rem;}
.footer-wordmark span{color:var(--red-text);}
.footer-tagline{font-size:.9rem;color:var(--ink-soft);margin:0;}
.footer-nav{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;}
.footer-nav a{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;border-bottom:2px solid transparent;}
.footer-nav a:hover,.footer-nav a:focus-visible{border-color:var(--red);}
.footer-copy{width:100%;margin:1.5rem 0 0;font-size:.8rem;color:var(--ink-soft);}

/* ---------- QUY TẮC MÀU BẮT BUỘC (đã đo WCAG, đừng phá) ----------
   --red #E63946 trên nền --paper/--paper-2 chỉ đạt ~3.94–4.17:1.
   => KHÔNG dùng --red làm màu CHỮ NHỎ (< 18.66px bold / < 24px).
      Chữ nhỏ cần nhấn màu thì dùng --cobalt (6.33–6.70:1).
      --red chỉ dùng cho: nền khối tô, viền, hard-shadow, và CHỮ LỚN/ĐẬM (ngưỡng 3:1).
   Chữ trên nền --red: dùng --paper cho tít lớn, dùng #000 cho body copy (5.04:1).
   ------------------------------------------------------------------ */

/* ---------- CTA panel: khối kêu gọi hành động tương phản cao ----------
   Dùng cho khối chốt cuối trang. Nền đen + bóng đỏ cứng, nút đảo màu.
   <section class="cta-panel">
     <h2>Tít</h2><p class="cta-panel__sub">Phụ đề</p>
     <div class="cta-row"><a class="btn" href="#">Hành động</a></div>
   </section>                                                          */
.cta-panel{background:var(--black);border:var(--border-w) solid var(--black);box-shadow:var(--shadow-red);padding:clamp(1.75rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem);text-align:center;}
.cta-panel h2,.cta-panel h3{color:var(--paper);}
.cta-panel__sub{color:rgba(255,248,231,.85);font-size:var(--fs-lead,1.05rem);max-width:52ch;margin:1rem auto 1.75rem;}
.cta-panel .btn{background:var(--paper);color:var(--black);border-color:var(--paper);box-shadow:6px 6px 0 var(--red);}
.cta-panel .btn:hover,.cta-panel .btn:focus-visible{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--red);}
.cta-panel .btn-outline{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:none;}

/* ---------- .h-plain: tiêu đề KHÔNG in hoa ----------
   `h1,h2,h3` mặc định `text-transform:uppercase` (ngôn ngữ Poster cho chữ marketing
   do mình tự viết). NHƯNG tiêu đề chứa DỮ LIỆU — nhất là do người dùng nhập
   (tên dự án trong thư viện, kết quả grill) — thì KHÔNG được ép in hoa:
   vừa hét vào mặt người đọc, vừa khó đọc vì tiếng Việt in hoa chồng nhiều dấu.
   Dùng `.h-plain` cho mọi tiêu đề render từ `{{ biến }}`.                     */
.h-plain{text-transform:none;letter-spacing:-.01em;line-height:1.15;}
