/* learn.css — HearThai Academy /learn/ content hub (SEO articles). Self-contained palette. */
:root{
  --b:#1f70df; --b2:#155ec2; --ink:#14263c; --ink2:#2b3d4f; --mut:#5f7183;
  --cream:#faf6ef; --bg:#ffffff; --line:#e7ebf1; --warm:#ff8a6b; --rad:18px; --max:720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink2);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--b);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

.lh{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:12px clamp(16px,4vw,32px);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.lh__brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);font-size:17px}
.lh__brand img{width:26px;height:26px;border-radius:6px}
.lh__brand b{color:var(--b)}
.lh__nav{margin-left:auto;display:flex;gap:20px}
.lh__nav a{color:var(--ink2);font-weight:600;font-size:14.5px}
.lh__cta{background:linear-gradient(135deg,#1f70df,#4a90ff);color:#fff!important;font-weight:700;font-size:14px;padding:9px 16px;border-radius:99px;text-decoration:none!important;white-space:nowrap}
@media(max-width:640px){.lh__nav{display:none}}

.art{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,56px) clamp(18px,4vw,24px) 34px}
.art__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;font-weight:800;color:var(--b);margin:0 0 14px}
.art h1{font-size:clamp(28px,5vw,42px);line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:0 0 18px;font-weight:800}
.art__lead{font-size:clamp(17px,2.2vw,20px);color:var(--ink2);line-height:1.6;margin:0 0 28px}
.art h2{font-size:clamp(21px,3vw,27px);line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin:38px 0 12px;font-weight:800}
.art h3{font-size:19px;color:var(--ink);margin:26px 0 8px;font-weight:700}
.art p{margin:0 0 16px;font-size:17px}
.art ul,.art ol{margin:0 0 18px;padding-left:22px}
.art li{margin:0 0 8px;font-size:17px}
.art strong,.art b{color:var(--ink)}
.art blockquote{margin:24px 0;padding:14px 20px;border-left:4px solid var(--b);background:var(--cream);border-radius:0 12px 12px 0;color:var(--ink2);font-style:italic}
.thai{font-size:1.06em}

.cta{margin:42px 0 6px;padding:clamp(24px,4vw,34px);background:linear-gradient(135deg,#0c1f3d,#14395f);color:#fff;border-radius:var(--rad);text-align:center}
.cta h3{color:#fff;font-size:clamp(20px,3vw,25px);margin:0 0 8px;font-weight:800}
.cta p{color:rgba(255,255,255,.85);margin:0 0 18px;font-size:16px}
.cta a{display:inline-block;background:linear-gradient(135deg,#1f70df,#4a90ff);color:#fff!important;font-weight:700;padding:13px 26px;border-radius:99px;text-decoration:none!important;font-size:16px}
.cta small{display:block;margin-top:12px;color:rgba(255,255,255,.6);font-size:13px}

.rel{max-width:var(--max);margin:0 auto;padding:10px clamp(18px,4vw,24px) 20px}
.rel h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0 0 10px}
.rel a{display:block;padding:6px 0;font-weight:600}

.hub{max-width:900px;margin:0 auto;padding:clamp(30px,6vw,64px) clamp(18px,4vw,24px)}
.hub__h{font-size:clamp(30px,5vw,46px);color:var(--ink);font-weight:800;letter-spacing:-.02em;margin:0 0 12px;text-align:center}
.hub__sub{font-size:clamp(17px,2.2vw,20px);color:var(--mut);text-align:center;max-width:620px;margin:0 auto 40px;line-height:1.55}
.hub__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
/* second section on the hub (the 30 Survival Thai articles, previously unlinked) */
.hub__h2{font-size:clamp(24px,3.6vw,34px);color:var(--ink);font-weight:800;letter-spacing:-.02em;margin:56px 0 12px;text-align:center}
.hub__sub2{font-size:clamp(16px,2vw,18px);color:var(--mut);text-align:center;max-width:620px;margin:0 auto 32px;line-height:1.55}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:22px 22px 20px;box-shadow:0 14px 34px -26px rgba(13,27,42,.5);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(31,112,223,.4);text-decoration:none}
.card__tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--b);margin:0 0 8px}
.card h2{font-size:20px;color:var(--ink);margin:0 0 8px;font-weight:800;line-height:1.25}
.card p{color:var(--mut);font-size:15px;margin:0;line-height:1.5}

.lf{border-top:1px solid var(--line);padding:28px clamp(16px,4vw,32px);text-align:center;color:var(--mut);font-size:14px;margin-top:20px}
.lf a{color:var(--mut);margin:0 8px}