/* =====================================================
   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; }
  .cta-form { display:flex; justify-content:center; gap:10px; }
  .cta-form input { 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; }

  /* 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-grid > div:first-child { flex:2; }
  .footer-grid > div:not(:first-child) { flex:1; }
  .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:flex; gap:36px; padding:36px 0 64px; align-items:flex-start; }
  .layout > aside { width:240px; flex-shrink:0; }
  .layout > main { flex:1; min-width:0; }

  .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:flex; gap:48px; padding:32px 0 56px; align-items:flex-start; }
  .product-top > .gallery, .product-top > .info { flex:1; min-width:0; }

  .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:flex;flex-wrap:wrap;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:flex; gap:48px; padding:28px 0 64px; align-items:flex-start; }
  .layout > article { flex:1; min-width:0; }
  .layout > aside { width:280px; flex-shrink:0; }

  /* 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; }
}