:root{
    --bg:#fff7f5;          /* พื้นชมพูอ่อน */
    --card:#fff;           /* กล่องเนื้อหา */
    --text:#3a3a3a;
    --muted:#8b8b8b;
    --brand:#d7a68f;       /* โทนชมพูน้ำตาล */
    --brand-2:#e9c9b9;
    --radius:18px;
    --shadow:0 8px 24px rgba(0,0,0,.06);
  }

  body{ background:var(--bg); color:var(--text); line-height:1.8; }

  .wrap{
    max-width: 920px;
    margin: 120px auto 48px;          /* กันเมนู fixed ด้านบน */
    padding: 0 20px;
  }

  .article{
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
  }

  /* breadcrumb */
  .crumbs{
    display:flex; gap:8px; align-items:center;
    font-size:14px; color:var(--muted); margin-bottom:14px;
  }
  .crumbs a{ color:var(--muted); text-decoration:none; }
  .crumbs a:hover{ color:var(--brand); }

  /* header */
  .title{ font-size: clamp(22px, 3.2vw, 32px); line-height:1.35; margin: 4px 0 6px; }
  .meta{ color:var(--muted); font-size:14px; margin-bottom:14px; }

  /* hero */
  .hero{
    width:100%; aspect-ratio: 16/9; object-fit:cover;
    border-radius: 16px; margin: 10px 0 18px; overflow:hidden;
  }

  /* content */
  .content{ font-size: 17px; }
  .content h2,.content h3{
    margin: 22px 0 8px;
  }
  .content ul{ padding-left: 22px; }
  .content img{ max-width:100%; border-radius:12px; display:block; margin:14px auto; }
  .content p{ margin: 10px 0; }

  /* tag chips */
  .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 18px; }
  .tag{
    font-size: 12px; padding:6px 10px; border-radius:999px;
    background:#f7f2f0; border:1px solid #eee; color:#444; text-decoration:none;
  }
  .tag:hover{ border-color: var(--brand-2); }

  /* share & prev/next */
  .actions{
    display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
    margin-top: 20px; padding-top: 16px; border-top:1px dashed #eee;
  }
  .share{ display:flex; gap:8px; align-items:center; }
  .btn{
    border:1px solid #eadad3; background:#fff; padding:8px 12px;
    border-radius:12px; cursor:pointer; font-size:14px;
  }
  .btn:hover{ border-color: var(--brand-2); }

  .pn{
    display:flex; gap:10px; flex-wrap:wrap;
  }
  .pn a{
    text-decoration:none; color:#333; border:1px solid #eee; background:#fff;
    padding:8px 12px; border-radius:12px;
  }
  .pn a:hover{ border-color: var(--brand-2); }

  /* footer note box */
  .note{
    background:#fff6f2; border:1px solid #f1e3dc; color:#6a5146;
    border-radius:12px; padding:12px 14px; font-size:14px; margin-top:16px;
  }

  /* mobile tweak */
  @media (max-width: 520px){
    .article{ padding: 20px; }
  }