/* ============================================================
   Relax Hub — Blog article stylesheet (ใช้ร่วมกันทุกบทความ)
   อิง Brand CI: Relax Forest / Warm Brown / Natural Sand / Soft Cream / Calm Ink
   ============================================================ */
:root{
  --forest:#52684F; --forest-dark:#42553F; --brown:#815035; --sand:#D7B987;
  --cream:#F6EBDD; --cream-soft:#FAF3E8; --ink:#382C27;
  --radius:22px; --shadow:0 10px 30px rgba(56,44,39,.10);
  --font:'Manrope','IBM Plex Sans Thai',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--cream-soft);line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* language toggle */
.lang-en .th{display:none!important}
body:not(.lang-en) .en{display:none!important}

/* nav */
.bnav{position:sticky;top:0;z-index:50;background:rgba(250,243,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(215,185,135,.35)}
.bnav-inner{max-width:840px;margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.bnav .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--forest-dark);font-size:.95rem}
.bnav .brand img{height:38px;width:38px;object-fit:contain}
.lang-switch{display:flex;border:1.5px solid var(--sand);border-radius:999px;overflow:hidden;font-size:.78rem}
.lang-switch button{border:0;background:transparent;padding:5px 11px;cursor:pointer;font-family:inherit;font-weight:700;color:var(--brown)}
.lang-switch button.active{background:var(--forest);color:#fff}

/* article layout */
.article{max-width:760px;margin:0 auto;padding:48px 24px 72px}
.crumb{font-size:.88rem;margin-bottom:22px}
.crumb a{color:var(--brown);font-weight:700}
.crumb a:hover{text-decoration:underline}
.chip{display:inline-block;background:var(--cream);color:var(--brown);font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:5px 14px;border-radius:999px;text-transform:uppercase;margin-bottom:16px}
.article h1{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.3;color:var(--forest-dark);margin-bottom:12px;font-weight:800}
.meta{color:#8a7a6e;font-size:.88rem;margin-bottom:26px}
.cover{border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:36px;aspect-ratio:16/9;object-fit:cover;width:100%}
.article h2{font-size:1.35rem;color:var(--forest-dark);margin:38px 0 12px}
.article h3{font-size:1.08rem;color:var(--brown);margin:26px 0 8px}
.article p{margin-bottom:16px;color:#4a3f38}
.article ul,.article ol{margin:0 0 18px 22px;color:#4a3f38}
.article li{margin-bottom:8px}
.article strong{color:var(--ink)}

/* boxes */
.tipbox{background:#fff;border-left:4px solid var(--forest);border-radius:0 16px 16px 0;padding:18px 22px;margin:22px 0;box-shadow:0 4px 14px rgba(56,44,39,.06)}
.tipbox .tip-title{font-weight:800;color:var(--forest-dark);display:block;margin-bottom:6px;font-size:.92rem}
.warnbox{background:var(--cream);border-radius:16px;padding:18px 22px;margin:26px 0;font-size:.88rem;color:#6b5d54}
.warnbox strong{color:var(--brown)}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin:20px 0 26px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(56,44,39,.06);font-size:.92rem}
.cmp th{background:var(--forest);color:var(--cream);padding:12px 16px;text-align:left;font-weight:700}
.cmp td{padding:11px 16px;border-bottom:1px solid rgba(215,185,135,.35);vertical-align:top}
.cmp tr:last-child td{border-bottom:0}

/* CTA card */
.cta-card{background:linear-gradient(120deg,var(--forest) 0%,var(--forest-dark) 100%);color:var(--cream);border-radius:var(--radius);padding:30px;margin:44px 0 10px;box-shadow:var(--shadow)}
.cta-card h2{color:#fff;margin:0 0 8px;font-size:1.25rem}
.cta-card p{color:rgba(246,235,221,.9);margin-bottom:18px}
.cta-card .price{font-weight:800;color:var(--sand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 24px;font-weight:700;font-size:.95rem;transition:.25s;cursor:pointer;border:0;font-family:inherit}
.btn-line{background:#06C755;color:#fff}
.btn-line:hover{filter:brightness(.94);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(246,235,221,.55);color:var(--cream);background:transparent;margin-left:10px}
.btn-ghost:hover{background:rgba(246,235,221,.12)}

/* footer */
.bfoot{background:var(--ink);color:rgba(246,235,221,.8);text-align:center;padding:26px 20px;font-size:.85rem}
.bfoot a{color:var(--sand);font-weight:700}
.bfoot a:hover{text-decoration:underline}

@media(max-width:560px){
  .article{padding:34px 20px 56px}
  .btn-ghost{margin-left:0;margin-top:10px}
  .bnav .brand span{display:none}
}