/* Great New You — สไตล์กลางของทั้งเว็บ (27 ก.ย. 69) */
:root{
  --ink:#16233A;--body:#42495A;--muted:#7A8194;--line:#E8E2D6;
  --cream:#FBF7EF;--sand:#F4EDE0;--white:#fff;
  --sun:#F28C38;--sun-deep:#D96C1B;--teal:#1F7A6D;--teal-soft:#E2F1EE;
  --night:#16233A;--night-2:#22375A;
  --radius:18px;--shadow:0 4px 22px rgba(22,35,58,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:17px;line-height:1.75;color:var(--body);background:var(--cream);overflow-x:hidden}
h1,h2,h3{color:var(--ink);line-height:1.4;font-weight:700}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
strong{color:var(--ink);font-weight:600}
.nowrap{white-space:nowrap}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.narrow{max-width:700px}
section{padding:56px 0}
@media(min-width:768px){section{padding:76px 0}}
.eyebrow{display:inline-block;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sun-deep);margin-bottom:8px}
.sec-head{margin-bottom:30px}
.sec-head h2{font-size:26px}
@media(min-width:768px){.sec-head h2{font-size:32px}}
.lead{color:var(--muted);font-size:18px;margin-top:6px}

/* แถบบน */
.topbar{padding:18px 0;border-bottom:1px solid var(--line);background:var(--cream)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px;color:var(--ink)}
.logo em{font-style:normal;color:var(--sun-deep)}
.logo svg{width:32px;height:32px}
.topbar nav a{font-size:15px;text-decoration:none;color:var(--body);margin-left:18px}
.topbar nav a:hover{color:var(--sun-deep)}
@media(max-width:560px){.topbar nav a.hide-m{display:none}}

/* hero หน้าแรก */
.hero{background:linear-gradient(180deg,#FFF4E6 0%,var(--cream) 100%);padding:44px 0 60px}
.hero-grid{display:grid;gap:30px;align-items:center}
@media(min-width:860px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero h1{font-size:34px;letter-spacing:-.3px}
@media(min-width:768px){.hero h1{font-size:50px}}
.hero h1 em{font-style:normal;color:var(--sun-deep)}
.hero p{font-size:18px;margin:16px 0 26px;max-width:520px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 28px;border-radius:999px;background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff;font-weight:700;text-decoration:none;box-shadow:0 8px 22px rgba(217,108,27,.3)}
.btn.ghost{background:none;color:var(--ink);box-shadow:none;border:1.5px solid var(--line)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:560px){.btn{width:100%}}

/* มิติ */
.dims{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(min-width:860px){.dims{grid-template-columns:repeat(3,1fr)}}
.dim{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-decoration:none;display:block}
.dim .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:10px}
.dim .ic svg{width:24px;height:24px}
.dim h3{font-size:18px}
.dim p{font-size:15px;color:var(--muted);line-height:1.6;margin-top:4px}
.dim .cnt{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--teal)}
.dim .cnt.soon{color:var(--muted)}

/* การ์ดบทความ */
.posts{display:grid;gap:18px}
@media(min-width:760px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;display:flex;flex-direction:column;transition:transform .15s}
.post:hover{transform:translateY(-3px)}
.post .cover{aspect-ratio:16/9;display:grid;place-items:center}
.post .cover svg{width:64px;height:64px;color:#fff}
.post .in{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.tag{display:inline-block;font-size:13px;font-weight:600;color:var(--teal);background:var(--teal-soft);border-radius:999px;padding:2px 12px;align-self:flex-start}
.post h3{font-size:19px}
.post p{font-size:15px;color:var(--muted);line-height:1.6}
.post .more{margin-top:auto;padding-top:8px;font-size:15px;font-weight:600;color:var(--sun-deep)}
.c-sun{background:linear-gradient(135deg,#F7A558,#D96C1B)}
.c-teal{background:linear-gradient(135deg,#2FA392,#1F5F57)}
.c-night{background:linear-gradient(135deg,#3A5A8C,#16233A)}

/* ผู้เขียน */
.author{display:grid;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
@media(min-width:760px){.author{grid-template-columns:200px 1fr;padding:32px}}
.author img{border-radius:16px;aspect-ratio:4/5;object-fit:cover;width:100%;max-width:220px}
.author h3{font-size:22px}

/* แถบพื้นเข้ม */
.dark{background:linear-gradient(160deg,var(--night-2),var(--night));color:#D5DCE8}
.dark h2,.dark strong{color:#fff}
.dark .lead{color:#AEB9CC}
.quote{font-size:24px;line-height:1.6;color:#fff;font-weight:600;max-width:760px}
@media(min-width:768px){.quote{font-size:30px}}
.quote em{font-style:normal;color:#FFB36B}

/* บทความ */
.art-head{padding:40px 0 10px}
.art-head h1{font-size:30px;letter-spacing:-.2px;margin:10px 0 12px}
@media(min-width:768px){.art-head h1{font-size:40px}}
.meta{font-size:14px;color:var(--muted)}
.art-cover{border-radius:20px;aspect-ratio:21/9;display:grid;place-items:center;margin:22px 0 8px}
.art-cover svg{width:80px;height:80px;color:#fff}
.article{padding:20px 0 40px}
.article h2{font-size:23px;margin:34px 0 10px}
.article p{margin-bottom:1.1em}
.article ul{margin:0 0 1.1em 1.2em}
.article li{margin-bottom:.4em}
.pull{border-left:4px solid var(--sun);background:#FFF4E6;border-radius:0 14px 14px 0;padding:16px 20px;margin:24px 0;color:var(--ink);font-weight:500}
.try{background:var(--teal-soft);border:1px solid #BFE0DA;border-radius:18px;padding:22px;margin:30px 0}
.try .t{font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--teal);margin-bottom:6px}
.try h3{font-size:20px;margin-bottom:6px}
.next{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:10px}
.next a{color:var(--sun-deep);font-weight:600}

footer{background:var(--night);color:#8E99AE;font-size:14px;padding:34px 0;margin-top:0}
footer .row{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
footer a{color:#C9D2E2}