/**
 * brand-system.css — บล็อก "โปรแกรมบำรุงพืชพื้นฐาน" (ดิน · ราก · ภูมิต้านทาน)
 *
 * ใช้ซ้ำทุก surface: Decision Panel, Plant Hub, Formula Archive, Diagnose
 *
 * ── กฎ specificity (สำคัญ อย่าแก้ให้อ่อนลง) ───────────────────────────────
 * หน้า decision/diagnose/archive ครอบด้วย `.dp-root` ซึ่งมี reset
 * `.dp-root *{margin:0;padding:0}` (specificity 0,1,0) ฝังใน inline <style>
 * ของ template ซึ่งโหลด **ทีหลัง** stylesheet นี้ → ถ้าเขียน `.kl-brandsys{padding}`
 * เฉย ๆ (0,1,0 เท่ากัน) reset จะชนะด้วย source order แล้ว padding/margin หายหมด
 * (เกิดจริง: บล็อกบน /diagnose/ padding=0 ป้ายชนขอบ ดูเหมือนโดนตัด)
 *
 * แก้โดย **ไม่ใช้ !important** (จะไปพังหน้าที่ไม่มี reset):
 *   - ตัวบล็อกเอง  → `.kl-brandsys.kl-brandsys.kl-brandsys` (0,3,0)
 *   - ลูกทุกตัว    → `.kl-brandsys.kl-brandsys .kl-brandsys-*` (0,3,0)
 *
 * ทำไมลูกต้องถึง (0,3,0): reset ของแต่ละหน้าไม่เท่ากัน
 *   formula-archive : `:where(.dp-root.dp-formula-archive) *`  = 0      → ชนะง่าย
 *   diagnose        : `.dp-root.dp-diagnose *`                 = (0,2,0) ← เสมอ
 *   decision        : `.dp-root.dp-decision-platform *`        = (0,2,0) ← เสมอ
 * เสมอแล้วโหลดทีหลัง = reset ชนะ จึงต้องดันลูกขึ้นอีกขั้น
 * (ทางแก้ที่ถูกกว่าคือเปลี่ยน reset 2 หน้านั้นเป็น `:where()` แบบ formula-archive
 *  แต่กระทบ layout ของหน้าที่ live อยู่ — แยกเป็นงานต่างหาก)
 *
 * ── กฎสี/ฟอนต์ ────────────────────────────────────────────────────────────
 * ห้ามพึ่ง CSS variable ของธีม (--kl-* / --grn / --ink1) เพราะ define ใต้
 * `.dp-root` เท่านั้น หน้า hub ไม่มี → ต้อง define เองด้วย hex จริง
 * (บทเรียนเดียวกับ agri-recipe.css)
 *
 * ค่าที่ใช้ = brand token จริงที่วัดจากเบราว์เซอร์บน stage.kasetlove.com:
 *   navy #0B4D8C (โครงสร้าง/หัวข้อ) · gold #F4B400 (CTA หลักของเว็บ — บล็อกนี้
 *   ไม่ใช้ กันแย่งความสนใจกับปุ่ม "วิเคราะห์") · green #4F772D + soft #eef7e8
 *   (พืช/อินทรีย์ = สัญญาณว่าเป็นสินค้าของเรา) · radius สเกลเว็บ = 18px
 *   ฟอนต์: Anuphan (หัวข้อ) · Sarabun (เนื้อหา) · JetBrains Mono (kicker/meta)
 */

.kl-brandsys {
	--klbs-grn:      #4F772D;
	--klbs-grn-soft: #eef7e8;
	--klbs-grn-line: #cfe3c2;
	--klbs-navy:     #0B4D8C;
	--klbs-gold:     #F4B400;  /* = --kl-gold ของธีม · ปุ่มซื้อ */
	--klbs-gold-dk:  #d99f00;  /* hover เท่านั้น ไม่ใช้เป็นสีพื้น */
	--klbs-ink:      #222222;
	--klbs-ink-soft: #666666;
	--klbs-ink-mute: #97a4b1;
	--klbs-wh:       #ffffff;
	--klbs-bd:       #e6edf3;
	--klbs-sig2:     #9c6f00;
	--klbs-mono:     'JetBrains Mono', ui-monospace, monospace;
	--klbs-head:     'Anuphan', 'Sarabun', sans-serif;
}

/* ซ้ำ 3 ครั้ง = (0,3,0) ชนะ reset `.dp-root.dp-diagnose *` (0,2,0) ที่โหลดทีหลัง
   — ตัวบล็อกเองก็ถูก `*` ของ reset จับเหมือนลูก จึงต้องดันเท่ากัน ไม่ใช่ (0,2,0) */
/* การ์ดขาว ขอบเทาบาง — ไม่ใช่กล่องเขียวมีแถบเขียวคาดหัวแบบเดิม (witt 30 ส.ค.)
   ของเดิมเป็นบล็อกเดียวในเว็บที่ถมเขียวทั้งกล่อง เลยดูเหมือนของนอกเว็บมาแปะ
   ตอนนี้ใช้ทรงเดียวกับการ์ดอื่นทั้งเว็บ · เขียวเหลือเฉพาะจุดที่ "แปลว่าอะไร"
   (ป้ายผลิตภัณฑ์ของเรา · ไอคอนข้อดี) ไม่ใช่สีตกแต่งพื้นหลัง */
.kl-brandsys.kl-brandsys.kl-brandsys {
	background: var(--klbs-wh);
	border: 1px solid var(--klbs-bd);
	border-radius: 18px;      /* ตรง --kl-radius ของเว็บ */
	padding: 18px 18px 20px;
	margin: 0 0 20px;
	box-shadow: 0 4px 14px rgba(4, 80, 147, .05);
}

/* ── รูปพื้นหลังกล่อง (ตั้งที่หน้า "ระบบฟื้นฟู 3 ชั้น") ────────────────────
   วางเป็น ::before ไม่ใช่ background-image ของตัวกล่องเอง — เพราะต้องหรี่ opacity
   และไล่จางเฉพาะรูป ถ้าใส่ที่ตัวกล่องจะพาตัวหนังสือกับการ์ดจางไปด้วย

   isolation:isolate + z-index:-1 = รูปอยู่หลังลูกทุกตัวโดยลูกไม่ต้องตั้ง z-index เอง
   (แพตเทิร์นเดียวกับ hero ของหน้าคู่มือพืช)
   overflow:hidden = รูปโดนตัดตามมุมมน 18px ไม่ล้นเป็นสี่เหลี่ยม

   mask ไล่จางไปทางซ้าย — หัวข้อกับคำอธิบายอยู่ซ้าย ต้องอ่านออกบนพื้นขาวล้วน
   ไม่ได้พึ่ง opacity อย่างเดียว เพราะรูปสวนจริงมักสว่างจ้าและรกทั้งใบ */
.kl-brandsys.kl-brandsys.kl-brandsys--bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.kl-brandsys.kl-brandsys.kl-brandsys--bg::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: 62%;
	height: 100%;
	background-image: var(--klbs-bg);
	background-size: cover;
	background-position: center right;
	/* .28 จางจนดูเหมือนไม่ได้ใส่รูป — การ์ดสินค้าทึบบังไปเกือบหมด เหลือเห็นแค่แถบหัว
	   .45 พอให้รู้ว่ามีรูป โดยหัวข้อยังอยู่ฝั่งที่ mask ไล่จนโปร่งแล้ว */
	opacity: .45;
	-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .3) 58%, transparent 100%);
	mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .3) 58%, transparent 100%);
	pointer-events: none;
}
/* มือถือ — กล่องแคบ รูปกินครึ่งจอแล้วชนตัวหนังสือ หรี่ลงและถอยไปมุมบนขวา */
@media (max-width: 600px) {
	.kl-brandsys.kl-brandsys.kl-brandsys--bg::before {
		width: 72%;
		height: 52%;
		opacity: .32;
	}
}

/* หน้า hub/archive ไม่มี reset ของ .dp-root — คุม box model เอง */
.kl-brandsys *,
.kl-brandsys *::before,
.kl-brandsys *::after { box-sizing: border-box; }

/* ── หัวบล็อก ─────────────────────────────────────────────────────────────
   ป้ายใช้คอนเวนชัน kicker ของเว็บ (mono + uppercase + เส้นใต้) ไม่ใช่ pill ถมสี
   letter-spacing น้อยกว่า kicker ภาษาอังกฤษของเว็บ (.12em) เพราะข้อความเป็นไทย
   ระยะห่างมากจะอ่านยาก */
.kl-brandsys.kl-brandsys .kl-brandsys-badge {
	display: inline-block;
	font-family: var(--klbs-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--klbs-grn);
	background: none;
	border: 0;
	border-bottom: 1.5px solid var(--klbs-grn);
	border-radius: 0;
	padding: 0 0 6px;
	margin: 0 0 12px;
}

.kl-brandsys.kl-brandsys .kl-brandsys-h {
	font-family: var(--klbs-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--klbs-navy);
	line-height: 1.35;
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
}

.kl-brandsys.kl-brandsys .kl-brandsys-sub {
	font-size: 13px;
	color: var(--klbs-ink-soft);
	line-height: 1.55;
	margin: 4px 0 0;
	padding: 0;
}

/* ── กริดการ์ด ────────────────────────────────────────────────────────── */
.kl-brandsys.kl-brandsys .kl-brandsys-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 600px) {
	.kl-brandsys.kl-brandsys .kl-brandsys-grid { grid-template-columns: 1fr; }
}

/* กล่องนอกเป็นขาวแล้ว การ์ดขาวบนขาวจึงต้องมีเงาช่วยแยกชั้น
   ไม่ใช้พื้นเทาแทน เพราะรูปสินค้าถ่ายบนพื้นขาว จะเห็นขอบรูปเป็นสี่เหลี่ยม */
.kl-brandsys.kl-brandsys .kl-brandsys-item {
	display: flex;
	flex-direction: column;
	background: var(--klbs-wh);
	border: 1px solid var(--klbs-bd);
	border-radius: 12px;
	padding: 12px;
	margin: 0;
	min-width: 0;
	box-shadow: 0 2px 8px rgba(4, 80, 147, .06);
}

/* ป้ายชั้น — chip โปร่งเส้นบาง ตามภาษาของ .fx-chip บนเว็บ ไม่ใช่ pill ถมสี */
.kl-brandsys.kl-brandsys .kl-brandsys-layer {
	align-self: flex-start;
	font-family: var(--klbs-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--klbs-grn);
	background: none;
	border: 1px solid var(--klbs-grn-line);
	border-radius: 3px;
	padding: 2px 8px;
	margin: 0 0 10px;
}

/* สินค้าถ่ายบนพื้นขาว — cover จะครอปขวด/ถุงจนดูแปลก ใช้ contain + พื้นขาว */
.kl-brandsys.kl-brandsys .kl-brandsys-thumb {
	width: 100%;
	height: 112px;
	display: block;
	border-radius: 8px;
	object-fit: contain;
	background: var(--klbs-wh);
	border: 0;
	margin: 0;
	padding: 0;
}
/* กรอบว่างตอนสินค้าไม่มีรูป — เทากลาง ไม่ใช่เขียว จะได้ไม่อ่านเป็น "ของเรา" */
.kl-brandsys.kl-brandsys .kl-brandsys-thumb--ph {
	background: #f7f9fb;
	border: 1px dashed var(--klbs-bd);
}

.kl-brandsys.kl-brandsys .kl-brandsys-name {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--klbs-ink);
	text-decoration: none;
	margin: 10px 0 0;
	padding: 0;
	overflow-wrap: anywhere;
}
.kl-brandsys.kl-brandsys .kl-brandsys-name:hover { text-decoration: underline; }

.kl-brandsys.kl-brandsys .kl-brandsys-price {
	font-family: var(--klbs-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--klbs-ink);
	margin: 6px 0 0;
	padding: 0;
}

.kl-brandsys.kl-brandsys .kl-brandsys-oos {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	color: var(--klbs-sig2);
	background: #fff6e0;
	border-radius: 3px;
	padding: 2px 8px;
	margin: 8px 0 0;
}

/* ── CTA = ทอง (witt 30 ส.ค. 2026) ──────────────────────────────────────
   ⚠️ กลับคำตัดสินเดิมโดยตั้งใจ — เดิมจงใจใช้เขียวเพื่อไม่ให้แย่งความสนใจกับ
   ปุ่มทองหลักของหน้า ("วิเคราะห์ →" / "วินิจฉัยอาการพืช")
   witt เลือกทองเพราะ **ต้องการให้ปุ่มซื้อโดดเด่นที่สุด เป้าหมายคือยอดขาย**
   → บนหน้าแรกและหน้าวิเคราะห์อาการจะมีปุ่มทอง 2 ชุดอยู่ในจอเดียวกัน เป็นผลที่ยอมรับแล้ว
   ถ้าวันหลังพบว่าอัตราคลิก "วิเคราะห์" ตก ให้ย้อนตรงนี้เป็นจุดแรก

   ทอง + ตัวหนังสือ navy ไม่ใช่ขาว — ขาวบนทองคอนทราสต์ ~1.9:1 อ่านไม่ออก
   navy บนทองได้ ~4.8:1 ผ่าน AA · เป็นคู่สีเดียวกับปุ่มทองอีก 4 เทมเพลตในธีม */
.kl-brandsys.kl-brandsys .kl-brandsys-cta {
	display: block;
	text-align: center;
	margin: auto 0 0;  /* auto = ดันปุ่มลงล่างสุด ให้การ์ดทุกใบปุ่มตรงแนวกัน */
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: var(--klbs-navy);
	background: var(--klbs-gold);
	border: 0;
}
.kl-brandsys.kl-brandsys .kl-brandsys-cta:hover {
	color: var(--klbs-navy);
	background: var(--klbs-gold-dk);
}
.kl-brandsys.kl-brandsys .kl-brandsys-cta.is-off {
	background: var(--klbs-ink-mute);
	pointer-events: none;
	cursor: default;
}

/* ── โหมดชุด (bundle) — 1 SKU ปุ่มซื้อปุ่มเดียว รายการข้างในเป็นเนื้อหา ─────
   ต่างจากโหมดรายการ (การ์ดแยกใบ ปุ่มของใครของมัน) ที่ใช้กับบล็อก 3 ชั้นเดิม
   specificity (0,3,0) เหมือนกฎอื่นในไฟล์นี้ — ดูเหตุผลที่หัวไฟล์ */
.kl-brandsys.kl-brandsys .kl-brandsys-reason {
	font-size: 13px;
	line-height: 1.6;
	color: var(--klbs-ink-soft);
	margin: 8px 0 0;
	padding: 0;
}

.kl-brandsys.kl-brandsys .kl-brandsys-contents {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.kl-brandsys.kl-brandsys .kl-brandsys-content {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--klbs-wh);
	border: 1px solid var(--klbs-bd);
	border-radius: 10px;
	padding: 7px 11px;
	margin: 0;
	min-width: 0;
}

.kl-brandsys.kl-brandsys .kl-brandsys-content-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--klbs-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.kl-brandsys.kl-brandsys a.kl-brandsys-content-name:hover { text-decoration: underline; }

/* แถวซื้อ — ราคาซ้าย ปุ่มขวา · มือถือซ้อนกัน */
.kl-brandsys.kl-brandsys .kl-brandsys-buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
}
.kl-brandsys.kl-brandsys .kl-brandsys-buy .kl-brandsys-price { margin: 0; font-size: 15px; }
.kl-brandsys.kl-brandsys .kl-brandsys-buy .kl-brandsys-cta {
	margin: 0;
	min-width: 180px;
	padding: 11px 20px;
	font-size: 13.5px;
}
@media (max-width: 600px) {
	.kl-brandsys.kl-brandsys .kl-brandsys-buy .kl-brandsys-cta { width: 100%; min-width: 0; }
}


/* ── การ์ดเลื่อนซ้าย-ขวา ────────────────────────────────────────────────────
   ใช้เฉพาะ 3 surface ที่ขอ: /diagnose/ (ctx=search) · /formular-archive/
   (ctx=recipe) · /hub/{พืช}/{ปัญหา}/ (ctx=hub)
   surface อื่น (ท้ายบทความ ctx=article, หน้าแรก ctx=home) ยังเป็นกริดเหมือนเดิม
   → อยากให้เหมือนกันหมด แค่เพิ่ม selector อีกบรรทัดในลิสต์ข้างล่าง
   specificity (0,4,0) เพื่อชนะ rule กริดเดิมที่เป็น (0,3,0) ไม่ต้องใช้ !important */
.kl-brandsys.kl-brandsys[data-af-ctx="search"] .kl-brandsys-grid,
.kl-brandsys.kl-brandsys[data-af-ctx="recipe"] .kl-brandsys-grid,
.kl-brandsys.kl-brandsys[data-af-ctx="hub"] .kl-brandsys-grid {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: 8px;
	scrollbar-width: thin;
	scrollbar-color: var(--klbs-bd) transparent;
}
.kl-brandsys.kl-brandsys[data-af-ctx="search"] .kl-brandsys-item,
.kl-brandsys.kl-brandsys[data-af-ctx="recipe"] .kl-brandsys-item,
.kl-brandsys.kl-brandsys[data-af-ctx="hub"] .kl-brandsys-item {
	/* grow ได้เมื่อที่พอ (3 ใบเต็มแถวเหมือนเดิม) แต่ไม่ยอมหดต่ำกว่า 210px
	   พอที่ไม่พอจึงกลายเป็นเลื่อนแทนการบีบการ์ดจนอ่านไม่ออก */
	flex: 1 0 210px;
	scroll-snap-align: start;
}
.kl-brandsys.kl-brandsys[data-af-ctx="search"] .kl-brandsys-grid::-webkit-scrollbar,
.kl-brandsys.kl-brandsys[data-af-ctx="recipe"] .kl-brandsys-grid::-webkit-scrollbar,
.kl-brandsys.kl-brandsys[data-af-ctx="hub"] .kl-brandsys-grid::-webkit-scrollbar {
	height: 6px;
}
.kl-brandsys.kl-brandsys[data-af-ctx="search"] .kl-brandsys-grid::-webkit-scrollbar-thumb,
.kl-brandsys.kl-brandsys[data-af-ctx="recipe"] .kl-brandsys-grid::-webkit-scrollbar-thumb,
.kl-brandsys.kl-brandsys[data-af-ctx="hub"] .kl-brandsys-grid::-webkit-scrollbar-thumb {
	background: var(--klbs-bd);
	border-radius: 3px;
}
@media (max-width: 600px) {
	/* โผล่ขอบใบถัดไปให้เห็นว่าเลื่อนได้ — ไม่ต้องมีลูกศรหรือคำอธิบาย */
	.kl-brandsys.kl-brandsys[data-af-ctx="search"] .kl-brandsys-item,
	.kl-brandsys.kl-brandsys[data-af-ctx="recipe"] .kl-brandsys-item,
	.kl-brandsys.kl-brandsys[data-af-ctx="hub"] .kl-brandsys-item {
		flex: 0 0 78%;
	}
}

/* ══ ป้ายเคลม + ข้อดี + แถบท้าย (mockup 30 ส.ค. 2026) ══════════════════════
   ทั้งสามส่วนขึ้นเฉพาะเมื่อมีข้อมูล — สินค้าที่ยังไม่กรอกได้การ์ดหน้าตาเดิมเป๊ะ
   ไม่มีกล่องว่างหรือเส้นค้าง จึงทยอยกรอกทีละตัวได้โดยหน้าไม่พังระหว่างทาง
   specificity (0,3,0) เท่ากับกฎอื่นในไฟล์นี้ — เหตุผลอยู่หัวไฟล์

   ⚠️ แก้ไฟล์นี้แล้วต้อง bump AFS_VERSION ใน wp-affiliate-system.php ด้วยเสมอ
      ไม่งั้นเบราว์เซอร์ใช้ CSS เดิม markup ใหม่ขึ้นแบบไม่มีสไตล์ (เจอจริง 30 ส.ค.) */

/* ป้ายเคลมใต้ชื่อสินค้า — ถมสีอ่อน ต่างจาก .kl-brandsys-layer ที่เป็นชิปโปร่ง
   คนละหน้าที่: layer = "อยู่ชั้นไหนของโปรแกรม" · tag = "จุดขายของตัวนี้" */
.kl-brandsys.kl-brandsys .kl-brandsys-tag {
	align-self: flex-start;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--klbs-grn);
	background: var(--klbs-grn-soft);
	border: 1px solid var(--klbs-grn-line);
	border-radius: 999px;
	padding: 3px 11px;
	margin: 7px 0 0;
}

/* กล่องข้อดี — กินพื้นที่ที่เหลือของการ์ดด้วย margin-bottom:auto
   ทำให้ปุ่มยังถูกดันลงล่างสุดตรงแนวกันทุกใบ แม้จำนวนข้อไม่เท่ากัน */
.kl-brandsys.kl-brandsys .kl-brandsys-bens {
	list-style: none;
	display: grid;
	gap: 7px;
	background: var(--klbs-grn-soft);
	border-radius: 10px;
	padding: 9px 10px;
	margin: 10px 0 auto;
}
.kl-brandsys.kl-brandsys .kl-brandsys-ben {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kl-brandsys.kl-brandsys .kl-brandsys-ben-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--klbs-grn);
}
.kl-brandsys.kl-brandsys .kl-brandsys-bi {
	display: block;
	width: 16px;
	height: 16px;
}
.kl-brandsys.kl-brandsys .kl-brandsys-ben-tx {
	font-size: 12px;
	line-height: 1.5;
	color: var(--klbs-ink-soft);
	padding-top: 2px;
	overflow-wrap: anywhere;
}

/* แถบปิดท้าย — เต็มความกว้างบล็อก ไม่ใช่การ์ดใบที่ 4 (ไม่ได้อยู่ใน grid) */
.kl-brandsys.kl-brandsys .kl-brandsys-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: #f7faf5;
	border: 1px solid var(--klbs-bd);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 14px 0 0;
}
.kl-brandsys.kl-brandsys .kl-brandsys-foot-tx { min-width: 0; margin: 0; padding: 0; }
.kl-brandsys.kl-brandsys .kl-brandsys-foot-h {
	font-family: var(--klbs-head);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--klbs-ink);
	margin: 0;
	padding: 0;
}
.kl-brandsys.kl-brandsys .kl-brandsys-foot-sub {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--klbs-ink-soft);
	margin: 2px 0 0;
	padding: 0;
}
/* ปุ่มโปร่งเส้น navy ไม่ถมสี — ปุ่มทองคือ "สั่งซื้อ" ซึ่งต้องเด่นที่สุดในบล็อก
   อันนี้แค่พาไปอ่านคู่มือ ถ้าถมสีด้วยจะแย่งสายตากับปุ่มที่ทำเงินจริง */
.kl-brandsys.kl-brandsys .kl-brandsys-foot-cta {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--klbs-navy);
	background: none;
	border: 1px solid var(--klbs-bd);
	border-radius: 999px;
	padding: 8px 16px;
	margin: 0;
	text-decoration: none;
	white-space: nowrap;
}
.kl-brandsys.kl-brandsys .kl-brandsys-foot-cta:hover {
	color: #fff;
	background: var(--klbs-navy);
	border-color: var(--klbs-navy);
}

@media (max-width: 600px) {
	/* แถบท้ายบนมือถือ — ปุ่มลงบรรทัดใหม่เต็มความกว้าง กดง่ายกว่าปุ่มแคบชิดขวา */
	.kl-brandsys.kl-brandsys .kl-brandsys-foot { flex-direction: column; align-items: stretch; gap: 10px; }
	.kl-brandsys.kl-brandsys .kl-brandsys-foot-cta { text-align: center; }
}