/* =====================================================
   MAIN.CSS — Tiêu Chuẩn Chiếu Sáng (theme Ecolux satellite site)
   Tổng hợp từ 4 mockup đã được khách duyệt, khử trùng lặp cơ bản
   ===================================================== */


/* ---------- TRANG CHỦ (homepage) ---------- */

* { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background:#f4f2ec;
    color:#23211c;
    line-height:1.6;
  }
  .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
  a { text-decoration:none; color:inherit; }

  /* HEADER */
  header { background:#fff; border-bottom:1px solid #e5e2d8; position:relative; z-index:10; }
  .nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
  .logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; letter-spacing:0.2px; }
  .logo-mark { width:30px; height:30px; border-radius:7px; background:#1d1c19; display:flex; align-items:center; justify-content:center; }
  .logo-mark i { color:#c9a86a; font-size:16px; }
  .menu { display:flex; gap:34px; font-size:14px; color:#5f5e5a; font-weight:500; }
  .menu a:hover { color:#23211c; }
  .nav-cta { background:#1d1c19; color:#f4f2ec; font-size:13px; font-weight:500; padding:10px 18px; border-radius:8px; }

  /* HERO */
  .hero {
    position:relative; overflow:hidden;
    background-image:linear-gradient(100deg, rgba(20,19,16,0.92) 0%, rgba(29,28,25,0.75) 45%, rgba(29,28,25,0.35) 100%), url('../images/hero-1.jpg');
    background-size:cover; background-position:center;
    padding:90px 0 70px;
  }
  .hero-inner { position:relative; max-width:620px; }
  .eyebrow { font-size:12px; letter-spacing:1.6px; color:#c9a86a; font-weight:600; margin-bottom:18px; text-transform:uppercase; }
  .hero h1 { font-size:42px; font-weight:600; color:#fff; line-height:1.25; margin-bottom:18px; letter-spacing:-0.5px; }
  .hero p { font-size:16px; color:#b8b3a4; max-width:520px; margin-bottom:32px; }
  .hero-actions { display:flex; gap:14px; }
  .btn-gold { background:#c9a86a; color:#2c2410; font-size:14px; font-weight:600; padding:13px 24px; border-radius:9px; }
  .btn-outline { border:1px solid #5f5a4a; color:#e5e1d6; font-size:14px; font-weight:500; padding:13px 24px; border-radius:9px; }

  /* STATS */
  .stats { background:#fff; border-bottom:1px solid #e5e2d8; }
  .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
  .stat { padding:28px 24px; text-align:center; border-right:1px solid #e5e2d8; }
  .stat:last-child { border-right:none; }
  .stat .num { font-size:26px; font-weight:600; color:#23211c; }
  .stat .label { font-size:12.5px; color:#8a8678; margin-top:4px; }

  /* SECTION COMMON */
  section.block { padding:64px 0; }
  .section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; flex-wrap:wrap; gap:12px; }
  .section-head h2 { font-size:26px; font-weight:600; }
  .section-head .sub { font-size:13.5px; color:#8a8678; margin-top:6px; max-width:480px; }
  .link-all { font-size:13px; font-weight:600; color:#8a6d2e; white-space:nowrap; }

  /* SOLUTIONS */
  .solutions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .solution-card { border:1px solid #e5e2d8; border-radius:14px; overflow:hidden; background:#fff; transition:transform .15s; }
  .solution-card .img { height:140px; background-size:cover; background-position:center; display:flex; align-items:flex-end; justify-content:flex-start; }
  .solution-card .content { padding:18px 20px; }
  .solution-card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
  .solution-card .meta { font-size:12px; color:#8a8678; }

  /* WHY CHOOSE */
  .why-bg { background:#fff; border-top:1px solid #e5e2d8; border-bottom:1px solid #e5e2d8; }
  .why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .why-item { text-align:left; }
  .why-item .icon-box { width:44px; height:44px; border-radius:10px; background:#f4f0e4; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
  .why-item .icon-box i { font-size:20px; color:#a8862f; }
  .why-item h4 { font-size:14.5px; font-weight:600; margin-bottom:6px; }
  .why-item p { font-size:12.5px; color:#7a7868; line-height:1.6; }

  /* PRODUCTS */
  .products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .product-card { border:1px solid #e5e2d8; border-radius:14px; overflow:hidden; background:#fff; }
  .product-card .img { height:120px; background-size:cover; background-position:center; }
  .product-card .content { padding:14px 16px; }
  .product-card h4 { font-size:13.5px; font-weight:600; }
  .product-card .code { font-size:11px; color:#8a8678; margin:3px 0 9px; }
  .tag { display:inline-block; font-size:10.5px; background:#f1efe8; color:#5f5e5a; padding:3px 8px; border-radius:5px; margin-right:4px; }

  /* ARTICLES */
  .articles-bg { background:#fff; border-top:1px solid #e5e2d8; border-bottom:1px solid #e5e2d8; }
  .article-row { display:flex; gap:16px; padding:16px; border:1px solid #e5e2d8; border-radius:14px; align-items:center; margin-bottom:14px; }
  .article-row .thumb { width:76px; height:60px; border-radius:9px; background-size:cover; background-position:center; flex-shrink:0; }
  .article-row .body { flex:1; }
  .article-row h4 { font-size:14.5px; font-weight:600; }
  .article-row .meta { font-size:11.5px; color:#8a8678; margin-top:4px; }
  .article-row i.chevron { font-size:16px; color:#c2bfb3; }

  /* FAQ */
  .faq-item { border:1px solid #e5e2d8; border-radius:12px; padding:18px 20px; margin-bottom:12px; background:#fff; }
  .faq-item h4 { font-size:14.5px; font-weight:600; margin-bottom:7px; }
  .faq-item p { font-size:13px; color:#5f5e5a; }

  /* PROJECTS */
  .projects-bg { background:#fff; border-top:1px solid #e5e2d8; border-bottom:1px solid #e5e2d8; }
  .projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .project-card { border-radius:14px; overflow:hidden; position:relative; height:200px; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:18px; }
  .project-card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.65) 100%); }
  .project-card .badge { position:absolute; top:14px; left:14px; background:rgba(201,168,106,0.85); color:#2c2410; font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:6px; z-index:2; }
  .project-card h4 { color:#fff; font-size:14.5px; font-weight:600; position:relative; z-index:2; }

  /* NEWSLETTER / CTA */
  .cta-block { background:#1d1c19; padding:56px 0; text-align:center; }
  .cta-block h2 { color:#fff; font-size:24px; font-weight:600; margin-bottom:10px; }
  .cta-block p { color:#b8b3a4; font-size:14px; max-width:460px; margin:0 auto 26px; }
  /* H1 hardening: form mở rộng Tên+SĐT+Nhu cầu+Email — flex-wrap để không vỡ khi nhiều field,
     giữ nguyên phong cách input/nút đã duyệt, chỉ co giãn width để responsive. */
  .cta-form { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .cta-form input { flex:1 1 220px; max-width:280px; padding:13px 16px; border-radius:9px; border:1px solid #4a463a; background:#26241e; color:#e5e1d6; font-size:13.5px; }
  .cta-form input::placeholder { color:#8a8678; }
  .cta-form .tccs-hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0; flex:0; max-width:0; padding:0; border:0; }

  /* FOOTER */
  footer { background:#15140f; padding:50px 0 24px; }
  .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
  .footer-brand { font-size:14px; font-weight:600; color:#e5e1d6; margin-bottom:10px; }
  .footer-desc { font-size:12px; color:#7a7868; line-height:1.7; max-width:240px; }
  .footer-col h5 { font-size:11.5px; color:#6f6b5e; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:14px; }
  .footer-col a { display:block; font-size:13px; color:#b8b3a4; margin-bottom:10px; }
  .footer-bottom { border-top:1px solid #2a2820; padding-top:20px; display:flex; justify-content:space-between; font-size:11.5px; color:#6f6b5e; }
  .social { display:flex; gap:14px; }
  .social i { font-size:16px; color:#8a8678; }

  @media (max-width:900px) {
    .solutions-grid, .why-grid, .products-grid, .projects-grid { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .hero h1 { font-size:30px; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
  }

/* ---------- CATEGORY SẢN PHẨM ---------- */

* { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:#f4f2ec; color:#23211c; line-height:1.6; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
  a { text-decoration:none; color:inherit; }

  header { background:#fff; border-bottom:1px solid #e5e2d8; }
  .nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
  .logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; }
  .logo-mark { width:30px; height:30px; border-radius:7px; background:#1d1c19; display:flex; align-items:center; justify-content:center; }
  .logo-mark i { color:#c9a86a; font-size:16px; }
  .menu { display:flex; gap:34px; font-size:14px; color:#5f5e5a; font-weight:500; }
  .menu a.active { color:#23211c; }
  .nav-cta { background:#1d1c19; color:#f4f2ec; font-size:13px; font-weight:500; padding:10px 18px; border-radius:8px; }

  .breadcrumb { font-size:12.5px; color:#8a8678; padding:18px 0 0; }
  .breadcrumb a { color:#8a8678; }
  .breadcrumb span.sep { margin:0 6px; }
  .breadcrumb span.current { color:#23211c; font-weight:500; }

  .page-head { padding:18px 0 36px; border-bottom:1px solid #e5e2d8; }
  .page-head h1 { font-size:30px; font-weight:600; margin-bottom:10px; }
  .page-head p { font-size:14px; color:#5f5e5a; max-width:680px; }
  .page-head .count { font-size:12.5px; color:#8a8678; margin-top:10px; }

  .layout { display:grid; grid-template-columns:240px 1fr; gap:36px; padding:36px 0 64px; }

  .filters { border:1px solid #e5e2d8; border-radius:14px; padding:20px; background:#fff; align-self:start; }
  .filters h3 { font-size:13px; font-weight:600; margin-bottom:14px; }
  .filter-group { margin-bottom:22px; }
  .filter-group:last-child { margin-bottom:0; }
  .filter-group .ftitle { font-size:12px; color:#8a8678; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.4px; }
  .filter-opt { display:flex; align-items:center; gap:8px; font-size:13px; color:#5f5e5a; margin-bottom:9px; }
  .filter-opt .box { width:15px; height:15px; border:1.5px solid #c2bfb3; border-radius:4px; flex-shrink:0; }
  .filter-opt.checked .box { background:#1d1c19; border-color:#1d1c19; }

  .toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .toolbar .results { font-size:13px; color:#8a8678; }
  .sort { font-size:13px; color:#5f5e5a; border:1px solid #e5e2d8; border-radius:8px; padding:7px 12px; background:#fff; }

  .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .pcard { border:1px solid #e5e2d8; border-radius:14px; overflow:hidden; background:#fff; }
  .pcard .img { height:150px; background-size:cover; background-position:center; position:relative; }
  .pcard .series-badge { position:absolute; top:10px; left:10px; background:#fff; font-size:10.5px; font-weight:600; color:#8a6d2e; padding:3px 9px; border-radius:6px; border:1px solid #e5e2d8; }
  .pcard .content { padding:16px 18px; }
  .pcard h4 { font-size:14.5px; font-weight:600; margin-bottom:3px; }
  .pcard .code { font-size:11.5px; color:#8a8678; margin-bottom:10px; }
  .pcard .specs { font-size:11.5px; color:#5f5e5a; margin-bottom:10px; }
  .pcard .specs div { margin-bottom:3px; }
  .pcard .tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
  .tag { font-size:10.5px; background:#f1efe8; color:#5f5e5a; padding:3px 8px; border-radius:5px; }
  .pcard .view-link { font-size:12.5px; font-weight:600; color:#23211c; display:flex; align-items:center; gap:5px; }
  .pcard .view-link i { font-size:13px; }

  .pagination { display:flex; justify-content:center; gap:8px; margin-top:36px; }
  .pagination .pg { width:34px; height:34px; border-radius:8px; border:1px solid #e5e2d8; display:flex; align-items:center; justify-content:center; font-size:13px; color:#5f5e5a; background:#fff; }
  .pagination .pg.active { background:#1d1c19; color:#fff; border-color:#1d1c19; }

  footer { background:#15140f; padding:36px 0; text-align:center; font-size:11.5px; color:#6f6b5e; }

  @media (max-width:900px) {
    .layout { grid-template-columns:1fr; }
    .grid { grid-template-columns:repeat(2,1fr); }
    .filters { display:none; }
  }

/* ---------- CHI TIẾT SẢN PHẨM ---------- */

* { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:#f4f2ec; color:#23211c; line-height:1.6; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
  a { text-decoration:none; color:inherit; }

  header { background:#fff; border-bottom:1px solid #e5e2d8; }
  .nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
  .logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; }
  .logo-mark { width:30px; height:30px; border-radius:7px; background:#1d1c19; display:flex; align-items:center; justify-content:center; }
  .logo-mark i { color:#c9a86a; font-size:16px; }
  .menu { display:flex; gap:34px; font-size:14px; color:#5f5e5a; font-weight:500; }
  .menu a.active { color:#23211c; }
  .nav-cta { background:#1d1c19; color:#f4f2ec; font-size:13px; font-weight:500; padding:10px 18px; border-radius:8px; }

  .breadcrumb { font-size:12.5px; color:#8a8678; padding:18px 0 0; }
  .breadcrumb a { color:#8a8678; }
  .breadcrumb span.sep { margin:0 6px; }
  .breadcrumb span.current { color:#23211c; font-weight:500; }

  .product-top { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:32px 0 56px; align-items:flex-start; }

  .gallery .main-img { height:340px; border-radius:16px; background-image:url('../images/hero-2.jpg'); background-size:cover; background-position:center; margin-bottom:12px; }
  .thumbs { display:flex; gap:10px; }
  .thumbs .t { width:64px; height:64px; border-radius:10px; background-size:cover; background-position:center; border:1px solid #e5e2d8; }
  .thumbs .t.active { border-color:#c9a86a; }

  .info .series-tag { display:inline-block; font-size:11px; font-weight:600; color:#8a6d2e; background:#f4f0e4; padding:4px 11px; border-radius:6px; margin-bottom:14px; }
  .info h1 { font-size:28px; font-weight:600; margin-bottom:6px; }
  .info .code { font-size:13.5px; color:#8a8678; margin-bottom:20px; }
  .info .desc { font-size:14px; color:#5f5e5a; margin-bottom:24px; }

  .quick-specs { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
  .qs { border:1px solid #e5e2d8; border-radius:12px; padding:14px; background:#fff; }
  .qs .label { font-size:11px; color:#8a8678; margin-bottom:5px; }
  .qs .val { font-size:14px; font-weight:600; }

  .cta-row { display:flex; gap:12px; margin-bottom:8px; }
  .btn-dark { background:#1d1c19; color:#fff; font-size:13.5px; font-weight:600; padding:13px 22px; border-radius:9px; }
  .btn-outline { border:1px solid #d8d4c6; color:#23211c; font-size:13.5px; font-weight:500; padding:13px 22px; border-radius:9px; }
  .info .note { font-size:12px; color:#8a8678; margin-top:10px; }

  .section { padding:40px 0; border-top:1px solid #e5e2d8; }
  .section h2 { font-size:20px; font-weight:600; margin-bottom:20px; }

  table.spec-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e5e2d8; border-radius:12px; overflow:hidden; }
  table.spec-table tr { border-bottom:1px solid #e5e2d8; }
  table.spec-table tr:last-child { border-bottom:none; }
  table.spec-table td { padding:13px 18px; font-size:13.5px; }
  table.spec-table td:first-child { color:#8a8678; width:220px; background:#faf9f5; }
  table.spec-table td:last-child { color:#23211c; font-weight:500; }

  .variant-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e5e2d8; border-radius:12px; overflow:hidden; }
  .variant-table th { background:#faf9f5; font-size:11.5px; color:#8a8678; text-transform:uppercase; letter-spacing:0.4px; padding:12px 16px; text-align:left; font-weight:600; }
  .variant-table td { padding:13px 16px; font-size:13px; border-top:1px solid #e5e2d8; }
  .variant-table tr.current td { background:#f4f0e4; font-weight:600; }

  .related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .rcard { border:1px solid #e5e2d8; border-radius:14px; overflow:hidden; background:#fff; }
  .rcard .img { height:100px; background-size:cover; background-position:center; }
  .rcard .content { padding:12px 14px; }
  .rcard h4 { font-size:13px; font-weight:600; }
  .rcard .code { font-size:11px; color:#8a8678; margin-top:3px; }

  .articles-list .article-row { display:flex; gap:14px; align-items:center; border:1px solid #e5e2d8; border-radius:12px; padding:14px; background:#fff; margin-bottom:10px; }
  .articles-list .thumb { width:56px; height:44px; border-radius:8px; background:#f1efe8; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .articles-list .thumb i { font-size:18px; color:#b4b2a9; }
  .articles-list h4 { font-size:13.5px; font-weight:600; }
  .articles-list .meta { font-size:11px; color:#8a8678; margin-top:3px; }

  footer { background:#15140f; padding:36px 0; text-align:center; font-size:11.5px; color:#6f6b5e; }

  @media (max-width:900px) {
    .product-top { grid-template-columns:1fr; }
    .quick-specs { grid-template-columns:repeat(2,1fr); }
    .related-grid { grid-template-columns:repeat(2,1fr); }
  }

/* ---------- BÀI VIẾT KIẾN THỨC ---------- */

* { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:#f4f2ec; color:#23211c; line-height:1.7; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
  a { text-decoration:none; color:inherit; }

  header { background:#fff; border-bottom:1px solid #e5e2d8; }
  .nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
  .logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; }
  .logo-mark { width:30px; height:30px; border-radius:7px; background:#1d1c19; display:flex; align-items:center; justify-content:center; }
  .logo-mark i { color:#c9a86a; font-size:16px; }
  .menu { display:flex; gap:34px; font-size:14px; color:#5f5e5a; font-weight:500; }
  .menu a.active { color:#23211c; }
  .nav-cta { background:#1d1c19; color:#f4f2ec; font-size:13px; font-weight:500; padding:10px 18px; border-radius:8px; }

  .breadcrumb { font-size:12.5px; color:#8a8678; padding:18px 0 0; }
  .breadcrumb a { color:#8a8678; }
  .breadcrumb span.sep { margin:0 6px; }
  .breadcrumb span.current { color:#23211c; font-weight:500; }

  .layout { display:grid; grid-template-columns:1fr 280px; gap:48px; padding:28px 0 64px; align-items:flex-start; }

  /* ARTICLE HEAD */
  .cat-tag { display:inline-block; font-size:11px; font-weight:600; color:#8a6d2e; background:#f4f0e4; padding:4px 11px; border-radius:6px; margin-bottom:16px; }
  article h1 { font-size:32px; font-weight:600; line-height:1.3; margin-bottom:14px; }
  .meta-row { display:flex; align-items:center; gap:16px; font-size:12.5px; color:#8a8678; margin-bottom:28px; }
  .meta-row .dot { width:3px; height:3px; border-radius:50%; background:#c2bfb3; }

  .hero-img { height:280px; border-radius:16px; background-image:url('../images/hero-3.jpg');background-size:cover;background-position:center, rgba(20,19,16,0.5)), url('../images/hero-4.jpg'); background-size:cover; background-position:center; margin-bottom:32px; }

  /* ANSWER-FIRST BOX — chìa khoá AEO */
  .answer-box { background:#fff; border:1.5px solid #c9a86a; border-radius:14px; padding:22px 24px; margin-bottom:36px; }
  .answer-box .label { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:#8a6d2e; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:10px; }
  .answer-box .label i { font-size:15px; }
  .answer-box p { font-size:15px; color:#23211c; }

  article h2 { font-size:21px; font-weight:600; margin:36px 0 14px; }
  article h3 { font-size:16.5px; font-weight:600; margin:24px 0 10px; }
  article p { font-size:15px; color:#3a3833; margin-bottom:14px; }
  article ul { margin:14px 0 14px 20px; }
  article li { font-size:15px; color:#3a3833; margin-bottom:8px; }

  .data-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e5e2d8; border-radius:12px; overflow:hidden; margin:20px 0 28px; }
  .data-table th { background:#faf9f5; font-size:11.5px; color:#8a8678; text-transform:uppercase; letter-spacing:0.4px; padding:11px 16px; text-align:left; font-weight:600; }
  .data-table td { padding:12px 16px; font-size:13.5px; border-top:1px solid #e5e2d8; }

  .pullquote { border-left:3px solid #c9a86a; padding:4px 0 4px 18px; margin:24px 0; font-size:15.5px; color:#23211c; font-style:italic; }

  .product-mention { display:flex; gap:14px; align-items:center; border:1px solid #e5e2d8; border-radius:14px; padding:16px; margin:24px 0; background:#fff; }
  .product-mention .img { width:64px; height:64px; border-radius:10px; background-size:cover; background-position:center; flex-shrink:0; }
  .product-mention .body h4 { font-size:14px; font-weight:600; margin-bottom:3px; }
  .product-mention .body .code { font-size:12px; color:#8a8678; margin-bottom:6px; }
  .product-mention .body a { font-size:12.5px; font-weight:600; color:#8a6d2e; }

  /* FAQ — AEO/GEO */
  .faq-section { margin-top:40px; }
  .faq-section h2 { font-size:21px; font-weight:600; margin-bottom:18px; }
  .faq-item { border:1px solid #e5e2d8; border-radius:12px; padding:18px 20px; margin-bottom:12px; background:#fff; }
  .faq-item h3 { font-size:14.5px; font-weight:600; margin-bottom:7px; }
  .faq-item p { font-size:13.5px; color:#5f5e5a; margin-bottom:0; }

  .author-box { display:flex; gap:14px; align-items:center; border-top:1px solid #e5e2d8; border-bottom:1px solid #e5e2d8; padding:20px 0; margin-top:40px; }
  .author-box .avatar { width:44px; height:44px; border-radius:50%; background:#1d1c19; display:flex; align-items:center; justify-content:center; color:#c9a86a; font-weight:600; font-size:14px; }
  .author-box .name { font-size:13.5px; font-weight:600; }
  .author-box .role { font-size:12px; color:#8a8678; }
  .author-box .updated { font-size:12px; color:#8a8678; margin-left:auto; }

  /* SIDEBAR */
  .sidebar-box { border:1px solid #e5e2d8; border-radius:14px; padding:20px; background:#fff; margin-bottom:20px; }
  .sidebar-box h4 { font-size:13px; font-weight:600; margin-bottom:14px; }
  .toc-item { font-size:13px; color:#5f5e5a; padding:7px 0; border-bottom:1px solid #f0eee6; }
  .toc-item:last-child { border-bottom:none; }
  .toc-item.active { color:#23211c; font-weight:600; }

  .related-product-card { display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid #f0eee6; }
  .related-product-card:last-child { border-bottom:none; }
  .related-product-card .img { width:40px; height:40px; border-radius:8px; background:#f1efe8; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .related-product-card .img i { font-size:15px; color:#b4b2a9; }
  .related-product-card .name { font-size:12.5px; font-weight:500; }
  .related-product-card .code { font-size:10.5px; color:#8a8678; }

  footer { background:#15140f; padding:36px 0; text-align:center; font-size:11.5px; color:#6f6b5e; margin-top:20px; }

  @media (max-width:900px) {
    .layout { grid-template-columns:1fr; }
  }
/* =====================================================
   BỔ SUNG: Animation, Mobile menu, Filter trạng thái checked
   ===================================================== */

/* Fade-in khi scroll tới (main.js) */
.fade-in-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Checkbox filter — trạng thái đã chọn (đồng bộ với JS product-filter.js) */
.filter-opt { cursor: pointer; user-select: none; }
.filter-opt.checked .box { background:#1d1c19; border-color:#1d1c19; position:relative; }
.filter-opt.checked .box::after {
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:10px;
}

/* Card/article/project mờ nhẹ khi đang tải lại do filter (product-filter.js) */
#tccs-product-grid { transition: opacity 0.25s ease; }

/* Mobile menu hamburger (main.js tự thêm nút này khi màn hình <=900px) */
.mobile-menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0;
}
.mobile-menu-toggle span {
  display:block; width:100%; height:2px; background:#23211c; border-radius:2px; transition: all 0.25s ease;
}
.mobile-menu-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu.mobile-menu {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; padding: 16px 32px; gap: 16px; border-bottom: 1px solid #e5e2d8;
    display: none;
  }
  .menu.mobile-menu.is-open { display: flex; }
  header .nav { position: relative; flex-wrap: wrap; }
}

/* =====================================================
   HARDENING 2026-07-09 (theo qa-audit-theme.md)
   ===================================================== */

/* H2: đề phòng — TCCS_Nav_Walker (inc/class-tccs-nav-walker.php) đã xuất menu chính KHÔNG
   có <li> (giống hệt DOM mockup gốc `<nav class="menu"><a>...</a></nav>`), nên bullet point
   không thể xuất hiện trong điều kiện bình thường. Rule này chỉ là lớp bảo vệ bổ sung — phòng
   trường hợp menu fallback/plugin khác chèn thêm <li> ngoài dự kiến. */
.menu, .menu li { list-style: none; margin: 0; padding: 0; }

/* C3: `.article-content` — vùng the_content() của bài Kiến thức (single.php), nơi team gõ
   Gutenberg THÔ. Mục tiêu: đúng brand, KHÔNG THỂ vỡ layout dù dán heading dài/bảng nhiều
   cột/ảnh khổ lớn/list lồng nhau/blockquote dài. Test ở 375/768/1280px trước khi go-live.
   (h2/h3/article-scoped cỡ chữ đã có từ dòng ~323 phía trên — khối này bổ sung phần còn thiếu:
   h4, img+caption, blockquote, ol, list lồng, table+scroll ngang, code/pre, hr, a.) */
.article-content { max-width: 100%; overflow-wrap: break-word; }
.article-content > *:first-child { margin-top: 0; }

.article-content h2 { font-size: 21px; font-weight: 600; margin: 36px 0 14px; line-height: 1.3; }
.article-content h3 { font-size: 16.5px; font-weight: 600; margin: 24px 0 10px; line-height: 1.3; }
.article-content h4 { font-size: 14.5px; font-weight: 600; margin: 20px 0 8px; }

.article-content p { font-size: 15px; color: #3a3833; margin-bottom: 14px; }

.article-content a { color: #8a6d2e; text-decoration: underline; text-underline-offset: 2px; }
.article-content a:hover { color: #6f5624; }

.article-content strong, .article-content b { font-weight: 600; color: #23211c; }

.article-content ul, .article-content ol { margin: 14px 0 14px 22px; padding: 0; }
.article-content li { font-size: 15px; color: #3a3833; margin-bottom: 8px; }
.article-content li > ul, .article-content li > ol { margin: 8px 0 8px 20px; }

.article-content img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.article-content figure { margin: 24px 0; max-width: 100%; }
.article-content figure img { margin: 0 auto; }
.article-content figcaption { font-size: 12.5px; color: #8a8678; text-align: center; margin-top: 8px; }

.article-content blockquote {
  border-left: 3px solid #c9a86a; padding: 4px 0 4px 18px; margin: 24px 0;
  font-size: 15.5px; color: #23211c; font-style: italic;
}
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content blockquote cite { display: block; margin-top: 8px; font-size: 12.5px; font-style: normal; color: #8a8678; }

/* Bảng — chống vỡ layout tuyệt đối: bọc trong khung cuộn ngang, không bao giờ tràn ra ngoài .wrap.
   Gutenberg core Table block tự bọc <figure class="wp-block-table">, ta style thêm để bảng dán
   thô (không qua block, ví dụ paste từ Word) cũng được bảo vệ như nhau. */
.article-content .wp-block-table,
.article-content table {
  display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 20px 0 28px; border-radius: 12px; border: 1px solid #e5e2d8;
}
.article-content table { border-collapse: collapse; background: #fff; min-width: 480px; }
.article-content table th {
  background: #faf9f5; font-size: 11.5px; color: #8a8678; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 11px 16px; text-align: left; font-weight: 600; white-space: nowrap;
}
.article-content table td { padding: 12px 16px; font-size: 13.5px; border-top: 1px solid #e5e2d8; }

.article-content code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; background: #f1efe8; color: #a8862f; padding: 2px 6px; border-radius: 4px;
}
.article-content pre {
  background: #1d1c19; color: #e5e1d6; padding: 16px 18px; border-radius: 12px;
  overflow-x: auto; margin: 20px 0; font-size: 13px; line-height: 1.6;
}
.article-content pre code { background: none; color: inherit; padding: 0; }

.article-content hr { border: none; border-top: 1px solid #e5e2d8; margin: 32px 0; }

@media (max-width: 480px) {
  .article-content h2 { font-size: 19px; }
  .article-content h3 { font-size: 15.5px; }
  .article-content ul, .article-content ol { margin-left: 18px; }
}

/* =====================================================
   PHASE 2 (2026-07-10) — CONTENT HUB
   Theo wireframes-content-hub.md + ia-content-hub.md. Mọi màu/spacing dùng đúng token đã tồn
   tại trong file này (xem bảng quy đổi ia-content-hub.md mục 7) — không thêm màu mới.
   ===================================================== */

/* Utility: label ẩn hình ảnh nhưng đọc được bằng screen reader (input search FAQ hub, v.v.) */
.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;
}

/* ---------- 1. Dropdown "Kiến thức" (submenu 1 cấp) — TCCS_Nav_Walker ---------- */
.menu-item-has-children { position: relative; display: flex; align-items: center; gap: 2px; }
.submenu-toggle {
  display: flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  background: none; border: none; padding: 0; cursor: pointer; color: #8a8678; flex-shrink: 0;
}
.submenu-toggle .chevron-down { transition: transform 0.2s ease; }
.menu-item-has-children.is-open > .submenu-toggle .chevron-down { transform: rotate(90deg); }

.submenu {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 14px); left: -8px;
  min-width: 268px; background: #fff; border: 1px solid #e5e2d8; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(20, 19, 16, 0.12); z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.submenu li { list-style: none; margin: 0; padding: 0; }
.submenu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: #5f5e5a; }
.submenu a:hover, .submenu a:focus-visible { background: #f4f0e4; color: #23211c; }
.submenu li:last-child a { color: #8a6d2e; font-weight: 600; margin-top: 4px; border-top: 1px solid #f0eee6; padding-top: 12px; border-radius: 0 0 8px 8px; }

@media (min-width: 901px) {
  .menu-item-has-children:hover > .submenu,
  .menu-item-has-children:focus-within > .submenu,
  .menu-item-has-children.is-open > .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .menu-item-has-children:hover > .submenu-toggle .chevron-down { transform: rotate(90deg); }
}

@media (max-width: 900px) {
  .menu.mobile-menu .menu-item-has-children {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; gap: 8px;
  }
  .menu.mobile-menu .menu-item-has-children > a { flex: 1 1 auto; }
  .menu.mobile-menu .submenu-toggle { width: 32px; height: 32px; }
  .menu.mobile-menu .submenu {
    order: 3; width: 100%; position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0; padding: 0 0 0 10px; margin: 0;
    max-height: 0; overflow: hidden; transition: max-height 0.2s ease;
  }
  .menu.mobile-menu .menu-item-has-children.is-open .submenu { max-height: 480px; padding-top: 6px; padding-bottom: 4px; }
  .menu.mobile-menu .submenu a { padding: 8px 10px; }
}

/* ---------- 2. Pillar page (taxonomy-knowledge_topic.php) ---------- */
.pillar-head p { font-size: 13.5px; color: #5f5e5a; margin-top: 10px; max-width: 680px; }

.pillar-table-block { margin: 32px 0 40px; }
.pillar-table-block h2 { font-size: 21px; font-weight: 600; margin-bottom: 16px; }
.pillar-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.pillar-table-wrap .data-table { min-width: 560px; margin: 0; }
.pillar-table-link { color: #8a6d2e; font-weight: 600; white-space: nowrap; }

.pillar-intro { margin: 8px 0 4px; }

.pillar-cta-inline {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  background: #f4f0e4; border: 1px solid #e7ddc0; border-radius: 14px; padding: 18px 22px; margin: 32px 0;
}
.pillar-cta-inline p { font-size: 14px; color: #5c4c22; margin: 0; font-weight: 500; }
.pillar-cta-inline a { white-space: nowrap; }

.cluster-list { margin: 40px 0; }
.cluster-list h2 { font-size: 21px; font-weight: 600; margin-bottom: 18px; }

/* ---------- 3. Từ điển thuật ngữ (glossary) ---------- */
.glossary-cta-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e5e2d8; border-radius: 12px; padding: 16px 20px; margin: 20px 0 28px;
}
.glossary-cta-banner p { font-size: 13.5px; color: #5f5e5a; margin: 0; }
.glossary-cta-banner a { font-size: 13px; font-weight: 600; color: #8a6d2e; white-space: nowrap; }

.alpha-nav {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; margin-bottom: 28px;
  border-bottom: 1px solid #e5e2d8; position: sticky; top: 0; background: #f4f2ec; z-index: 5;
}
.alpha-nav a {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #5f5e5a; flex-shrink: 0;
}
.alpha-nav a:hover, .alpha-nav a:focus-visible { background: #f4f0e4; color: #8a6d2e; }
.alpha-nav a.is-empty { color: #c2bfb3; pointer-events: none; }

.glossary-list { padding-bottom: 48px; }
.alpha-heading {
  font-size: 20px; font-weight: 600; color: #a8862f; margin: 32px 0 12px; scroll-margin-top: 96px;
  padding-bottom: 6px; border-bottom: 2px solid #f4f0e4;
}
.glossary-row { display: block; border-bottom: 1px solid #f0eee6; padding: 14px 0; }
.glossary-row h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 4px; }
.glossary-row .excerpt { font-size: 13.5px; color: #5f5e5a; }

.glossary-entry .term-alt-names { font-size: 13px; color: #8a8678; margin: -4px 0 20px; }
.term-related { display: block; margin-top: 32px; font-size: 13px; font-weight: 600; color: #8a6d2e; }
.term-see-also { margin-top: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #8a8678; }

@media (max-width: 900px) {
  .alpha-nav { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ---------- 4. Công cụ tính đèn (page-calculator.php) ---------- */
.calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 32px 0 40px; align-items: start; }
.calc-form-box, .calc-result-box { border: 1px solid #e5e2d8; border-radius: 14px; padding: 24px; background: #fff; }
.calc-result-box { position: sticky; top: 24px; }
.calc-form-box .field { margin-bottom: 18px; }
.calc-form-box label { display: block; font-size: 12.5px; font-weight: 600; color: #5f5e5a; margin-bottom: 7px; }
.calc-form-box input, .calc-form-box select {
  width: 100%; padding: 12px 14px; border: 1px solid #e5e2d8; border-radius: 9px; font-size: 14px;
  background: #fff; color: #23211c; font-family: inherit;
}
.calc-form-box .field-hint { font-size: 11.5px; color: #8a8678; margin-top: 6px; }
.calc-form-box .field-error { font-size: 12px; color: #b3261e; margin-top: 6px; display: none; }
.calc-form-box .field.has-error input { border-color: #b3261e; }
.calc-form-box .field.has-error .field-error { display: block; }
.calc-form-box button[type="submit"] { width: 100%; border: none; cursor: pointer; font-size: 14.5px; }

.calc-result-empty { text-align: center; padding: 44px 12px; color: #8a8678; font-size: 13.5px; }
.calc-result-empty svg { margin-bottom: 12px; opacity: 0.5; }
.calc-result-content { display: none; }
.calc-result-content.is-visible { display: block; }
.calc-result-content h3 { font-size: 16px; font-weight: 600; margin: 20px 0 10px; }
.calc-result-summary { font-size: 14px; color: #3a3833; background: #f4f0e4; border-radius: 10px; padding: 14px 16px; margin-top: 4px; }

.calc-lead-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid #e5e2d8; }
.calc-lead-form .field { margin-bottom: 12px; }
.calc-lead-form label { display: block; font-size: 12px; font-weight: 600; color: #5f5e5a; margin-bottom: 6px; }
.calc-lead-form input { width: 100%; padding: 11px 13px; border: 1px solid #e5e2d8; border-radius: 8px; font-size: 13.5px; font-family: inherit; }

.calc-note { font-size: 12px; color: #8a8678; background: #faf9f5; border: 1px solid #e5e2d8; border-radius: 10px; padding: 14px 16px; margin: 24px 0 40px; }

@media (max-width: 900px) {
  .calc-layout { grid-template-columns: 1fr; }
  .calc-result-box { position: static; }
}

/* ---------- 5. Về chúng tôi (page-about.php) ---------- */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 32px 0 48px; align-items: center; }
.about-intro .img { width: 100%; height: 340px; border-radius: 16px; background-size: cover; background-position: center; }
.about-intro h1 { font-size: 30px; font-weight: 600; margin: 10px 0 14px; }
.about-intro .article-content p { font-size: 14.5px; color: #5f5e5a; }
.about-intro .article-content a { font-weight: 600; }

.author-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 48px; }
.author-card { border: 1px solid #e5e2d8; border-radius: 14px; padding: 24px; background: #fff; text-align: center; }
.author-card .avatar {
  width: 64px; height: 64px; border-radius: 50%; background: #1d1c19; color: #c9a86a; font-weight: 600;
  font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.author-card .name { font-size: 14.5px; font-weight: 600; }
.author-card .role { font-size: 12.5px; color: #8a6d2e; margin: 3px 0 10px; }
.author-card .bio { font-size: 12.5px; color: #5f5e5a; }

.methodology { padding: 8px 0 48px; }
.methodology h2 { font-size: 21px; font-weight: 600; margin-bottom: 14px; }

.contact-cta { border: 1px solid #e5e2d8; border-radius: 16px; padding: 40px; text-align: center; background: #fff; margin-bottom: 56px; }
.contact-cta h2 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.contact-cta p { font-size: 13.5px; color: #5f5e5a; margin-bottom: 20px; }

@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; }
  .author-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .author-grid { grid-template-columns: 1fr; }
}

/* ---------- 6. FAQ hub (page-faq-hub.php) ---------- */
.faq-search { position: relative; margin: 24px 0 28px; }
.faq-search input {
  width: 100%; padding: 13px 16px 13px 42px; border: 1px solid #e5e2d8; border-radius: 10px;
  font-size: 14px; background: #fff; font-family: inherit;
}
.faq-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8a8678; pointer-events: none; }
.faq-search-empty { text-align: center; padding: 24px; color: #8a8678; font-size: 13.5px; }

.faq-hub-groups { margin-bottom: 48px; }
.faq-group { border: 1px solid #e5e2d8; border-radius: 14px; background: #fff; margin-bottom: 14px; overflow: hidden; }
.faq-group-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; background: none; border: none; cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 600; color: #23211c; font-family: inherit;
}
.faq-group-head .count { font-weight: 400; color: #8a8678; font-size: 12.5px; margin-left: 4px; }
.faq-group-head .chev { transition: transform 0.2s ease; color: #8a8678; flex-shrink: 0; }
.faq-group-head[aria-expanded="true"] .chev { transform: rotate(90deg); }
.faq-group-panel { padding: 0 22px 20px; }
.faq-group-panel .faq-item:last-child { margin-bottom: 0; }

/* ---------- 7. Landing tư vấn (page-landing-tuvan.php) ---------- */
.landing-hero { padding: 56px 0 8px; }
.landing-hero .eyebrow { color: #8a6d2e; }
.landing-hero h1 { font-size: 32px; font-weight: 600; margin: 14px 0 12px; max-width: 640px; }
.landing-hero p { font-size: 14.5px; color: #5f5e5a; max-width: 600px; margin-bottom: 20px; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 8px; }
.trust-badges span { font-size: 12.5px; color: #5f5e5a; display: flex; align-items: center; gap: 6px; }
.trust-badges span::before { content: "✓"; color: #8a6d2e; font-weight: 700; }

.landing-form-box {
  background: #fff; border: 2px solid #c9a86a; border-radius: 16px; padding: 32px; margin: 32px 0 48px; max-width: 640px;
}
.landing-form-box .field { margin-bottom: 16px; }
.landing-form-box label { display: block; font-size: 13px; font-weight: 600; color: #23211c; margin-bottom: 7px; }
.landing-form-box input, .landing-form-box select, .landing-form-box textarea {
  width: 100%; padding: 13px 15px; border: 1px solid #e5e2d8; border-radius: 9px; font-size: 14px; font-family: inherit;
}
.landing-form-box textarea { resize: vertical; min-height: 90px; }
.landing-form-box button[type="submit"] { width: 100%; text-align: center; border: none; cursor: pointer; font-size: 14.5px; }
.form-privacy-note { font-size: 11.5px; color: #5f5e5a; margin-top: 12px; text-align: center; }
.form-error { background: #fdecea; border: 1px solid #f3c2bd; color: #8a2c22; font-size: 13px; padding: 12px 14px; border-radius: 9px; margin-bottom: 16px; }

.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 48px; }
.process-step { text-align: left; }
.process-step .step-num {
  width: 36px; height: 36px; border-radius: 50%; background: #f4f0e4; color: #8a6d2e; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 14px;
}
.process-step h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.process-step p { font-size: 12.5px; color: #5f5e5a; }

.trust-footer-line { text-align: center; padding: 24px 0 48px; font-size: 12.5px; color: #8a8678; }
.trust-footer-line a { color: #8a6d2e; font-weight: 600; }

@media (max-width: 900px) {
  .process-steps { grid-template-columns: 1fr; }
}