/* ============================================================
   hookgrowth : /knowledge/ redesign (design preview)
   layout reference : backlinko.com/templates/marketing
   token ทุกค่าตรงกับ context/DESIGN.md v1.4 + design-system.html
   ============================================================ */.hg-kn{
  --ink-900:#09090B; --ink-800:#18181B; --ink-700:#27272A; --ink-600:#3F3F46;
  --ink-500:#52525B; --ink-400:#71717A; --ink-300:#A1A1AA; --ink-200:#D4D4D8;
  --ink-100:#ECECEE; --ink-50:#F4F4F5;  --white:#FFFFFF;
  --mint:#3ECFAF; --mint-tint:#E8F8F3; --teal-ink:#12695B;
  --forest:#082321; --forest-raised:#0E3A35; --on-forest:#FCFCFC;
  --surface-canvas:var(--ink-50); --surface-card:var(--white); --surface-sunken:#FAFAFA;
  --border-hairline:var(--ink-100); --border-strong:var(--ink-400);
  --border-on-dark:rgba(252,252,252,.14);
  --mint-hover:#5CDCC0;
  --font:"Anuphan",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Sarabun",var(--font);
  --text-caption:12px; --lh-caption:1.6;
  --text-meta:16px;    --lh-meta:1.6;
  --text-ui:16px;      --lh-ui:1.5;
  --text-body:17px;    --lh-body:1.65;
  --text-body-lg:20px; --lh-body-lg:1.6;
  --text-subheading:20px;  --lh-subheading:1.5;
  --text-heading-sm:28px;  --lh-heading-sm:1.35;
  --text-heading:40px;     --lh-heading:1.25;
  --text-heading-lg:56px;  --lh-heading-lg:1.15;
  --text-display:64px;     --lh-display:1.1;
  --w-regular:400; --w-medium:500; --w-semibold:600;
  --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-28:28px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-80:80px;
  --page-max:1200px; --section-gap:80px; --card-pad:28px; --edge:24px;
  --r-badge:12px; --r-button:14px; --r-input:14px; --r-sm:20px; --r-md:24px;
  --r-card:36px; --r-tile:40px; --r-media:48px; --r-media-full:64px; --r-pill:999px;
  --e-button:inset 0 .5px 0 0 rgba(255,255,255,.3), 0 0 0 1px rgba(255,255,255,.06), 0 4px 6px 0 rgba(0,0,0,.14);
  --focus-ring:0 0 0 2px var(--white), 0 0 0 4px var(--ink-900);
}
@media (max-width:767px){.hg-kn{--text-display:40px; --text-heading-lg:34px; --text-heading:28px;
    --text-heading-sm:22px; --section-gap:48px; --card-pad:20px; --edge:20px}
}.hg-kn *,.hg-kn *::before,.hg-kn *::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}.hg-kn{margin:0;background:var(--surface-canvas);color:var(--ink-800);
  font-family:var(--font);font-size:var(--text-body);line-height:var(--lh-body);
  font-weight:var(--w-regular);-webkit-font-smoothing:antialiased;overflow-x:clip}.hg-kn img,.hg-kn svg{display:block;max-width:100%}.hg-kn img{height:auto}.hg-kn h1,.hg-kn h2,.hg-kn h3,.hg-kn h4,.hg-kn p,.hg-kn ul,.hg-kn ol,.hg-kn figure{margin:0}.hg-kn p,.hg-kn li.rich{font-family:var(--font-body)}.hg-kn ul,.hg-kn ol{padding:0;list-style:none}.hg-kn a{color:inherit}.hg-kn :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-badge)}.hg-kn .wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--edge)}.hg-kn .sec{padding-block:var(--section-gap)}.hg-kn .display{font-size:var(--text-display);line-height:var(--lh-display);font-weight:var(--w-semibold);letter-spacing:-.025em;color:var(--ink-900)}.hg-kn .h-lg{font-size:var(--text-heading-lg);line-height:var(--lh-heading-lg);font-weight:var(--w-semibold);letter-spacing:-.02em;color:var(--ink-900)}.hg-kn .h{font-size:var(--text-heading);line-height:var(--lh-heading);font-weight:var(--w-semibold);letter-spacing:-.015em;color:var(--ink-900)}.hg-kn .h-sm{font-size:var(--text-heading-sm);line-height:var(--lh-heading-sm);font-weight:var(--w-semibold);color:var(--ink-900)}.hg-kn .lede{font-size:var(--text-body-lg);line-height:var(--lh-body-lg);color:var(--ink-500);max-width:62ch}.hg-kn .meta{font-size:var(--text-meta);line-height:var(--lh-meta);color:var(--ink-500)}.hg-kn .muted{color:var(--ink-500)}/* ป้ายกำกับไทย ห้ามถ่างตัวอักษรและห้ามหนักเกิน 500 เมื่อเล็กกว่า 14px (DESIGN.md thaiRules) */.hg-kn .eyebrow{font-size:var(--text-caption);line-height:var(--lh-caption);font-weight:var(--w-medium);
  letter-spacing:0;color:var(--teal-ink)}/* header */.hg-kn .top{position:sticky;top:0;z-index:50;background:rgba(244,244,245,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-hairline)}.hg-kn .top-in{display:flex;align-items:center;gap:var(--sp-24);height:64px}.hg-kn .top nav{display:flex;gap:var(--sp-20);margin-inline-start:auto;font-size:var(--text-ui);color:var(--ink-500)}.hg-kn .top nav a{text-decoration:none}.hg-kn .top nav a:hover,.hg-kn .top nav a[aria-current]{color:var(--ink-900)}.hg-kn .top nav a[aria-current]{font-weight:var(--w-medium)}
@media (max-width:1000px){.hg-kn .top nav{display:none}}
@media (max-width:1000px){.hg-kn .top .btn{margin-inline-start:auto}}.hg-kn .lockup{display:inline-flex;align-items:center;gap:.44em;font-size:20px;line-height:1;text-decoration:none}.hg-kn .lockup .mark{width:1.15em;height:1.15em;flex:none;color:var(--mint)}.hg-kn .lockup .word{font-weight:var(--w-semibold);letter-spacing:-.03em;color:var(--ink-900)}.hg-kn .lockup.on-dark .word{color:var(--on-forest)}/* buttons */.hg-kn .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  font-family:var(--font);font-size:var(--text-ui);font-weight:var(--w-medium);line-height:1;
  padding:13px 18px;border-radius:var(--r-button);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background-color .18s ease,color .18s ease,border-color .18s ease}.hg-kn .btn-primary{background:var(--ink-900);color:var(--white);box-shadow:var(--e-button)}.hg-kn .btn-primary:hover{background:var(--ink-700)}.hg-kn .btn-ghost{background:var(--white);color:var(--ink-600);border-color:var(--ink-600)}.hg-kn .btn-ghost:hover{background:var(--ink-50)}.hg-kn .btn-pill{border-radius:var(--r-pill);padding-inline:22px}.hg-kn .btn-on-dark{background:var(--mint);color:var(--ink-900);box-shadow:none}.hg-kn .btn-on-dark:hover{background:var(--mint-hover)}.hg-kn .btn-ghost-dark{background:transparent;color:var(--on-forest);border-color:var(--border-on-dark)}.hg-kn .btn-ghost-dark:hover{background:var(--forest-raised)}.hg-kn .btn svg{width:18px;height:18px;flex:none}/* badges */.hg-kn .badge{display:inline-flex;width:fit-content;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--r-badge);
  font-size:var(--text-caption);line-height:1.2;font-weight:var(--w-medium)}.hg-kn .badge-outline{border:1px solid var(--border-hairline);color:var(--ink-800);background:var(--white)}.hg-kn .badge-accent{background:var(--mint);color:var(--ink-900)}.hg-kn .badge-tint{background:var(--mint-tint);color:var(--teal-ink)}.hg-kn .badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}/* ---------------- hero ---------------- */.hg-kn .hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-48);
  align-items:center;padding-block:var(--sp-64) var(--sp-48)}
@media (max-width:900px){.hg-kn .hero{grid-template-columns:minmax(0,1fr);gap:var(--sp-32);padding-block:var(--sp-40)}}.hg-kn .hero-copy{display:flex;flex-direction:column;gap:var(--sp-20);align-items:flex-start}.hg-kn .hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-8)}.hg-kn .hero-fig{border-radius:var(--r-media);overflow:hidden;background:var(--ink-100)}.hg-kn .hero-fig img{width:100%}/* แถบตัวเลขสามช่องคั่นด้วยเส้น 1px ตามจังหวะหน้ามาตรฐานของ DESIGN.md */.hg-kn .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
@media (max-width:640px){.hg-kn .hero-stats{grid-template-columns:minmax(0,1fr)}}.hg-kn .hero-stats div{display:flex;flex-direction:column;gap:4px;padding:var(--sp-28) var(--sp-24)}.hg-kn .hero-stats div+div{border-inline-start:1px solid var(--border-hairline)}.hg-kn .hero-stats div:first-child{padding-inline-start:0}
@media (max-width:640px){.hg-kn .hero-stats div+div{border-inline-start:none;border-top:1px solid var(--border-hairline)}.hg-kn .hero-stats div{padding-inline:0}}.hg-kn .hero-stats .n{font-size:var(--text-heading-sm);line-height:1.2;font-weight:var(--w-semibold);color:var(--ink-900)}.hg-kn .hero-stats .l{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--ink-500)}/* ---------------- category blocks (โครงหลักที่ยกมาจาก reference) ---------------- */.hg-kn .cat-list{display:flex;flex-direction:column;gap:var(--sp-32)}.hg-kn .cat{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-card);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4.5fr) minmax(0,4.5fr)}
/* แท็บเล็ต แผงกับคำอธิบายอยู่แถวบน รายการบทความลงเต็มความกว้างเป็นแถวล่างสองคอลัมน์
   ถ้าปล่อยให้แผงคร่อมสองแถวเหมือนเดิม แผงจะถูกยืดตามรายการ 10 บรรทัด
   วัดได้ว่าเหลือช่องว่างใต้รูป 450px ที่ 760px ซึ่งเป็นรูโหว่ที่มองเห็นชัด */
@media (max-width:1000px){.hg-kn .cat{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
@media (max-width:720px){.hg-kn .cat{grid-template-columns:minmax(0,1fr)}}/* รูปชิดหัวข้อด้านบน ที่ว่างที่เหลือไปกองที่ก้นแผง ไม่ใช่เป็นรูโหว่กลางแผง
   วัดจริงที่ 1440px แผงกว้าง 354 พื้นที่ในกรอบ 298 สูง 659 หัวข้อกิน 74
   รูป 1:1 เหลือว่าง 271px (41% ของแผง) · รูป 3:4 เหลือ 172px จึงเลือก 3:4 */.hg-kn .cat-panel{background:var(--ink-50);border-inline-end:1px solid var(--border-hairline);
  padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--sp-20);justify-content:flex-start}.hg-kn .cat-panel-head{display:flex;flex-direction:column;gap:var(--sp-12);align-items:flex-start}/* จองที่หัวข้อไว้สองบรรทัดเสมอ ไม่งั้นหมวดชื่อยาวอย่าง Social Media Marketing
   จะดันการ์ดสูงกว่าใบอื่น 38px วัดได้ที่ 1440px */.hg-kn .cat-panel h2{font-size:var(--text-heading-sm);line-height:var(--lh-heading-sm);
  font-weight:var(--w-semibold);color:var(--ink-900);min-height:2.7em}.hg-kn .cat-panel figure{border-radius:var(--r-sm);overflow:hidden;background:var(--white);
  border:1px solid var(--border-hairline);aspect-ratio:3/4}.hg-kn .cat-panel figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){.hg-kn .cat-panel{border-inline-end:none;border-bottom:1px solid var(--border-hairline)}}.hg-kn .cat-body{padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--sp-12)}.hg-kn .cat-body p{color:var(--ink-500)}.hg-kn .cat-links{padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--sp-16);
  border-inline-start:1px solid var(--border-hairline)}
@media (max-width:1000px){.hg-kn .cat-links{border-inline-start:none;border-top:1px solid var(--border-hairline);
  grid-column:1 / -1}.hg-kn .cat-links .art-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-24)}}
@media (max-width:720px){.hg-kn .cat-links{grid-column:auto}.hg-kn .cat-links .art-list{display:flex}
}/* ทุกรายการสูงเท่ากันบรรทัดเดียว การ์ดทั้ง 6 ใบจึงสูงเท่ากัน
   ความสูงการ์ดถูกกำหนดด้วยแผงรูปซึ่งเหมือนกันทุกหมวด ไม่ใช่ด้วยจำนวนบรรทัดของลิงก์
   ขนาดตัวอักษรคงไว้ที่ 16px ตาม minBodySize ของ DESIGN.md ย่อกว่านี้สระไทยเริ่มชน
   nowrap เป็นตาข่ายกันพัง ชื่อเรื่องถูกเขียนให้จบในบรรทัดเดียวอยู่แล้ว */.hg-kn .art-list{display:flex;flex-direction:column;gap:0}.hg-kn .art{display:flex;gap:10px;align-items:center;text-decoration:none;
  padding:9px 12px;margin-inline:-12px;border-radius:var(--r-sm);
  transition:background-color .16s ease}.hg-kn .art:hover{background:var(--ink-50)}.hg-kn .art .arrow{width:18px;height:18px;flex:none;color:var(--ink-300);
  transition:color .16s ease,transform .16s ease}.hg-kn .art:hover .arrow{color:var(--teal-ink);transform:translateX(2px)}.hg-kn .art .t{flex:1;min-width:0;font-size:var(--text-ui);line-height:1.45;
  font-weight:var(--w-medium);color:var(--ink-800);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hg-kn .art:hover .t{color:var(--ink-900)}
/* มือถือปล่อยให้ตกบรรทัดได้ ดีกว่าเอา ellipsis ไปตัดชื่อบทความจริงทิ้ง
   การ์ดเรียงทีละใบเต็มจอ ความสูงจึงไม่จำเป็นต้องเท่ากันเหมือนบนจอกว้าง
   กฎนี้ต้องอยู่หลัง .art .t ไม่งั้นแพ้ nowrap ตอน cascade */
@media (max-width:720px){.hg-kn .art{align-items:flex-start}.hg-kn .art .t{white-space:normal;overflow:visible;text-overflow:clip}.hg-kn .art .arrow{margin-top:3px}
}/* แถบชิปกระโดดไปแต่ละหมวด ใช้เพราะหน้ามี 6 หมวด เลื่อนหาเองแล้วนาน */.hg-kn .cat-nav{display:flex;flex-wrap:wrap;gap:var(--sp-8);padding-top:var(--sp-40)}.hg-kn .cat-nav a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--border-hairline);color:var(--ink-700);
  font-size:var(--text-ui);font-weight:var(--w-medium);text-decoration:none;
  transition:border-color .16s ease,color .16s ease}.hg-kn .cat-nav a:hover{border-color:var(--ink-600);color:var(--ink-900)}.hg-kn .cat-nav a .c{font-size:var(--text-caption);color:var(--ink-400);font-weight:var(--w-regular)}.hg-kn .cat-more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:var(--text-ui);font-weight:var(--w-medium);color:var(--teal-ink);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .16s ease}.hg-kn .cat-more:hover{border-bottom-color:var(--teal-ink)}.hg-kn .cat-more svg{width:16px;height:16px}/* ---------------- forest cta band ---------------- */.hg-kn .band{background:var(--forest);color:var(--on-forest)}.hg-kn .band-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-40);
  align-items:center;padding-block:var(--sp-64)}
@media (max-width:900px){.hg-kn .band-in{grid-template-columns:minmax(0,1fr);gap:var(--sp-24);padding-block:var(--sp-48)}}.hg-kn .band h2{font-size:var(--text-heading);line-height:var(--lh-heading);font-weight:var(--w-semibold);
  letter-spacing:-.015em;color:var(--on-forest)}.hg-kn .band p{color:var(--ink-300);margin-top:var(--sp-12);max-width:56ch}.hg-kn .band-actions{display:flex;flex-wrap:wrap;gap:var(--sp-12);justify-content:flex-end}
@media (max-width:900px){.hg-kn .band-actions{justify-content:flex-start}}/* ---------------- checklist / signup ---------------- */.hg-kn .kit{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-card);
  padding:var(--sp-48);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-40);align-items:center}
@media (max-width:900px){.hg-kn .kit{grid-template-columns:minmax(0,1fr);padding:var(--card-pad);gap:var(--sp-24)}}.hg-kn .kit p{color:var(--ink-500);margin-top:var(--sp-12)}.hg-kn .kit form{display:flex;flex-direction:column;gap:var(--sp-12)}.hg-kn .kit label{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--ink-500);font-weight:var(--w-medium)}.hg-kn .kit input{font-family:var(--font-body);font-size:var(--text-ui);color:var(--ink-800);
  background:var(--white);border:1px solid var(--border-strong);border-radius:var(--r-input);padding:13px 16px;width:100%}.hg-kn .kit input::placeholder{color:var(--ink-300)}.hg-kn .kit .note{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--ink-400)}/* ---------------- footer ---------------- */.hg-kn .foot{background:var(--forest);color:var(--ink-300);padding-block:var(--sp-64) var(--sp-32)}.hg-kn .foot-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr));gap:var(--sp-32)}
@media (max-width:900px){.hg-kn .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hg-kn .foot-grid{grid-template-columns:minmax(0,1fr)}}.hg-kn .foot h3{font-size:var(--text-ui);font-weight:var(--w-semibold);color:var(--on-forest);margin-bottom:var(--sp-16)}.hg-kn .foot ul{display:flex;flex-direction:column;gap:var(--sp-12);font-size:var(--text-ui)}.hg-kn .foot a{text-decoration:none}.hg-kn .foot a:hover{color:var(--mint)}.hg-kn .foot .about{max-width:38ch;margin-top:var(--sp-16);font-family:var(--font-body);font-size:var(--text-ui);line-height:1.6}.hg-kn .foot-base{margin-top:var(--sp-48);padding-top:var(--sp-24);border-top:1px solid var(--border-on-dark);
  display:flex;flex-wrap:wrap;gap:var(--sp-16);justify-content:space-between;font-size:var(--text-caption)}.hg-kn .ch{width:22px;height:22px;fill:currentColor}.hg-kn .channel-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-20);color:var(--mint);margin-top:var(--sp-24)}

/* ---------- กันสไตล์ของเว็บรั่วเข้ามา ----------
   Seed Fonts ยิง !important ทั้งเว็บสองก้อน
     h1-h6, nav, button, .btn, label ... -> noto-sans-thai !important
     body -> cs-chatthai-ui 16px/1.7 !important
   ต้องยิง !important กลับ ไม่งั้นหัวข้อกับปุ่มในหน้านี้จะไม่ใช่ Anuphan
   กฎ p อยู่ทีหลังและเจาะจงกว่ากฎดาว จึงชนะ */
.hg-kn,.hg-kn *{font-family:var(--font) !important}
.hg-kn p,.hg-kn .lede,.hg-kn .cat-body p,.hg-kn .band p,.hg-kn .kit p{font-family:var(--font-body) !important}

/* ช่องกรอกใช้ Sarabun เหมือนไฟล์ต้นทาง และ Astra ยัด line-height 1.5 ให้ input
   ทำให้กล่องเตี้ยลง 9px ต้องคืนเป็น normal */
.hg-kn .kit input{font-family:var(--font-body) !important;line-height:normal;
  background:var(--white);border:1px solid var(--border-strong);border-radius:var(--r-input);
  padding:13px 16px;color:var(--ink-800);box-shadow:none;height:auto}

/* Astra กับ Elementor ชอบยัด margin ให้ figure และขีดเส้นใต้ให้ลิงก์ */
.hg-kn figure{margin:0}
.hg-kn a,.hg-kn a:hover{box-shadow:none;text-decoration:none}
.hg-kn img{border-radius:0;margin:0}
.hg-kn ul,.hg-kn ol{margin:0;padding:0;list-style:none}
.hg-kn .entry-content{margin:0}