/**
 * tagbar.css — สไตล์ตรงจาก Homepage-Desktop.dc.html (ตอนที่ 5-6) แปลงจาก inline style เป็น class
 * สีและระยะทั้งหมด copy ค่าจาก mockup ตรงๆ ไม่ได้ประมาณเอง
 */

.chtb-wrap {
	/* เพิ่ม width:100% 25 ก.ย. 69 — .chtb-wrap เป็นลูกของ .main-box-inside ซึ่งธีมตั้ง display:flex
	   ไว้ (สำหรับเรียงการ์ดของโมดูลอื่น) ทำให้ .chtb-wrap ในฐานะ flex item ไม่กางเต็มความกว้างเอง
	   ตามค่าเริ่มต้น (flex-basis:auto ยึดตามเนื้อหา) กล่องเลยดูเยื้องไปทางซ้าย ไม่กึ่งกลางจอ — สั่งให้
	   กางเต็มแถวตรงๆ แล้ว padding 48px ซ้าย-ขวาเท่ากันจะทำให้กล่องด้านในอยู่กึ่งกลางเองโดยอัตโนมัติ */
	width: 100%;
	padding: 0 48px 0;
	box-sizing: border-box;
	/* 25 ก.ย. 69 (รอบ 4) — feedback พี่บอส "เซ็ตนี้ฟอนต์ใหญ่มากทุกจุด": ค่า px ในไฟล์นี้ก็อปตรงจาก
	   mockup ทุกจุดอยู่แล้ว (ดูคอมเมนต์หัวไฟล์) แต่ mockup ใช้ Noto Sans Thai เป็นฟอนต์หลัก ส่วนเว็บจริง
	   ตอนนี้ยังไม่ได้กำหนด font-family ให้ .chtb-wrap เลยยืม AnantasonWeb ของ body มาใช้ ซึ่งตัวโตกว่า
	   Noto Sans Thai ที่ไซส์เดียวกันมาก (วัดจริงแล้วจาก camphub-9points-verification-25sep-round3.md)
	   ตั้งตรงนี้จุดเดียว ลูกทุกตัวข้างในที่ไม่ได้ระบุ font-family เอง (ปุ่มแท็บ/label ไอคอน/ช่องค้นหา)
	   จะ inherit ไปเองหมด ไม่ต้องไล่ใส่ทีละจุด */
	font-family: 'Noto Sans Thai', sans-serif;
}

.chtb-heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 22px;
}

.chtb-heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: #3b3733;
}

.chtb-box {
	/* 25 ก.ย. 69 (รอบ 8.5) — เดิม border-top สีส้ม 3px + radius ไม่เท่ากันบน-ล่าง (6px/14px) + shadow
	   คือของตามแบบ mockup เป๊ะ (ตรวจแล้วไม่ใช่บั๊ก) แต่พี่บอสถามความเห็น เพราะดูไม่ไปทางเดียวกับกล่องอื่น
	   ในหน้าเดียวกัน (เช่น .chsf-box ของกล่องค้นหาด้านบน ที่ใช้ border บางเรียบสีเทาเส้นเดียวรอบกล่อง
	   ไม่มีสีส้มเน้น ไม่มี shadow) พี่บอสเห็นด้วยให้เอาออก เปลี่ยนมาใช้สไตล์เดียวกับ .chsf-box แทน เพื่อ
	   ความสม่ำเสมอของดีไซน์ทั้งหน้า — เป็นการตัดสินใจดีไซน์ที่พี่บอสอนุมัติ ไม่ใช่การแก้ตาม mockup */
	background: #ffffff;
	border: 1px solid #DCD9CF;
	border-radius: 16px;
	overflow: hidden;
}

.chtb-tabrow {
	padding: 16px 20px 14px;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #F0EEE7;
}

.chtb-tabgroup {
	display: inline-flex;
	background: #F2F1EE;
	border-radius: 999px;
	padding: 4px;
	gap: 4px;
	flex-wrap: wrap;
}

.chtb-tabbtn {
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 999px;
	background: transparent;
	color: #72716a;
	box-shadow: none;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.chtb-tabbtn.is-active {
	background: #ffffff;
	color: #f15a29;
	box-shadow: 0 1px 3px rgba(43, 38, 32, 0.14);
}

/* 26 ก.ย. 69 (รอบ 33) — ชื่อเต็ม/ชื่อย่อของแท็บ อยู่ใน DOM พร้อมกันเสมอ (ดู render.php) สลับโชว์ด้วย
   display ตาม breakpoint แทนการ render คนละชุด — เดสก์ท็อปโชว์ชื่อเต็มตาม mockup เดสก์ท็อป (พื้นที่กว้าง
   พอ) มือถือโชว์ชื่อย่อแทน (ดูกฎ @media 640px ด้านล่างที่สลับกลับ) */
.chtb-tabbtn-short {
	display: none;
}

.chtb-panel {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
	padding: 20px;
}

.chtb-panel[hidden] {
	display: none;
}

.chtb-icon-link {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 84px;
}

.chtb-icon-circle {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 1px solid rgba(43, 38, 32, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(43, 38, 32, 0.12);
	transition: transform 0.15s ease;
}

.chtb-icon-link:hover .chtb-icon-circle {
	transform: translateY(-2px);
}

.chtb-icon-label {
	font-size: 11.5px;
	color: #3b3733;
	text-align: center;
	font-weight: 600;
	line-height: 1.25;
}

.chtb-searchbox {
	margin-top: 28px;
	background: #F7F6F3;
	border-radius: 16px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.chtb-searchbox-title {
	font-size: 15px;
	font-weight: 700;
	color: #3b3733;
}

.chtb-searchbox-row {
	display: flex;
	gap: 10px;
}

.chtb-searchbox-input {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 1px solid #E4E0D6;
	border-radius: 12px;
	padding: 0 14px;
	height: 46px;
	box-sizing: border-box;
}

.chtb-searchbox-input svg {
	flex-shrink: 0;
}

.chtb-searchbox-input input {
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 13.5px;
	color: #3b3733;
	width: 100%;
	height: 100%;
	background: transparent;
}

.chtb-searchbox-input input::placeholder {
	color: #A6A196;
}

.chtb-searchbox-btn {
	background: #f15a29;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	padding: 0 26px;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	/* 26 ก.ย. 69 (รอบ 33) — เพิ่ม flex ให้ปุ่มรองรับทั้งไอคอน+ข้อความ (เดสก์ท็อป) และไอคอนล้วน (มือถือ,
	   ดู @media 640px ด้านล่าง) จัดกึ่งกลางเหมือนกันทั้งคู่ */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.chtb-searchbox-btn:hover {
	background: #d94f22;
}

/* 26 ก.ย. 69 (รอบ 33) — ไอคอนแว่นขยายในปุ่ม "ค้นหา": ซ่อนไว้บนเดสก์ท็อป (mockup เดสก์ท็อปเป็นปุ่ม
   ข้อความล้วน "ค้นหา" ไม่มีไอคอน) โผล่เฉพาะมือถือที่ยุบเหลือปุ่มไอคอนสี่เหลี่ยม (ดู @media 640px) */
.chtb-searchbox-btn-icon {
	display: none;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.chtb-wrap {
		padding: 32px 20px 0;
	}

	/* 25 ก.ย. 69 (รอบมือถือ) — เดิม .chtb-tabgroup มีแค่ flex-wrap:wrap จากตอนเดสก์ท็อป พอจอแคบลง
	   ปุ่มที่มีข้อความยาว (เช่น "เลือกดูกิจกรรมตามระดับการศึกษา") ไม่มีที่ตัดคำ (ภาษาไทยไม่มีช่องว่าง)
	   ทำให้แต่ละปุ่มกว้างเกินจนตกบรรทัดตัวเอง กลายเป็นเรียงต่อกันแนวตั้งเต็มความกว้างทั้ง 3 ปุ่ม (เละ) —
	   บังคับให้อยู่แถวเดียวกันเสมอ (nowrap) แบ่งพื้นที่เท่ากัน (flex:1)
	   26 ก.ย. 69 (รอบ 33, แก้ต่อ) — feedback พี่บอส: มือถือควรใช้ "ชื่อย่อ" ตาม mockup แทนชื่อเต็มบีบเล็ก
	   (ดู .chtb-tabbtn-full/.chtb-tabbtn-short ด้านบน) — พอเป็นชื่อย่อสั้นๆ ("ระดับการศึกษา"/"ภาค"/
	   "หมวดหมู่") แล้ว ไม่ต้องบีบฟอนต์เหลือ 10.5px + ตัดคำ 2-3 บรรทัดเหมือนตอนใช้ชื่อเต็มอีกต่อไป — คืน
	   ฟอนต์ให้ใหญ่ขึ้น (12px) และบังคับบรรทัดเดียว (nowrap) ตรงตามภาพ mockup ที่เป็น pill บรรทัดเดียวสั้นๆ
	   (เผื่อไว้ยังคง overflow-wrap ไว้เป็น safety net เฉยๆ ไม่ให้ล้นถ้าจอแคบผิดปกติจริงๆ) */
	.chtb-tabgroup {
		justify-content: center;
		flex-wrap: nowrap;
		width: 100%;
		box-sizing: border-box;
	}
	.chtb-tabbtn {
		flex: 1;
		min-width: 0;
		padding: 9px 8px;
		font-size: 12px;
		line-height: 1.25;
		text-align: center;
		white-space: nowrap;
		overflow-wrap: break-word;
	}
	.chtb-tabbtn-full {
		display: none;
	}
	.chtb-tabbtn-short {
		display: inline;
	}

	/* ไอคอนแท็ก (ระดับ/ภาค/หมวดหมู่): ย่อขนาดวงกลม+label+ระยะห่าง ให้ใกล้เคียง mockup มือถือ
	   (เดิมใช้ขนาดเดสก์ท็อปเป๊ะ 58px/84px/gap 22px ทำให้จอ 390px จุได้แค่ 2 ไอคอนต่อแถว ดูโหว่/เละ) */
	.chtb-panel {
		gap: 14px;
		padding: 18px 14px;
	}
	.chtb-icon-link {
		width: 64px;
		gap: 6px;
	}
	.chtb-icon-circle {
		width: 50px;
		height: 50px;
	}
	.chtb-icon-label {
		font-size: 10.5px;
	}

	/* 26 ก.ย. 69 (รอบ 33) — feedback พี่บอส (เทียบภาพจริง vs mockup): "ปุ่มค้นหาด้านล่าง อยากให้เป็นแบบ
	   mockup" — ของจริงเดิมบนมือถือ (flex-direction:column) วางช่องค้นหา+ปุ่ม "ค้นหา" (ข้อความเต็ม) เป็น
	   2 แถวซ้อนกัน เต็มความกว้างทั้งคู่ ส่วน mockup มือถือใช้แถวเดียว: ช่องค้นหา + ปุ่มไอคอนแว่นขยายสี่เหลี่ยม
	   เล็กๆ ต่อท้ายในบรรทัดเดียวกัน (ไม่มีข้อความ "ค้นหา" อยู่ในปุ่มบนมือถือ) — ยกเลิก column ทิ้ง (กลับไปเป็น
	   row ตามค่าเริ่มต้นของ .chtb-searchbox-row) แล้วยุบปุ่มให้เป็นสี่เหลี่ยมไอคอนล้วนขนาดเท่าความสูงช่อง
	   ค้นหา (46px) แทนปุ่มข้อความเต็มความกว้าง — สลับโชว์ไอคอน/ซ่อนข้อความด้วย class เดียวกับที่ตั้งไว้แล้ว
	   ใน .chtb-searchbox-btn-icon/-label (ดูกฎเดสก์ท็อปด้านบน) */
	/* 27 ก.ย. 69 (รอบ 35) — feedback พี่บอส (พร้อมภาพจริง): "ปุ่มค้นหามันใหญ่เกินไปอ่ะ อยากให้เป็น
	   สี่เหลี่ยมจัตุรัสก็พอ" — ตรวจจากไซต์จริงพบว่า width เรนเดอร์จริงเป็น 90px ไม่ใช่ 46px ตามที่ตั้งไว้
	   (ในขณะที่ height/padding ในกฎเดียวกันถูกต้อง 46px/0px ทุกจุด) — root cause:ธีม voice มี global
	   reset "button, input[type=button], input[type=reset] { ... min-width: 90px; ... }" ใน
	   min.css ชนกับปุ่มนี้ตรงๆ เพราะเป็น <button> เปล่าๆ selector (specificity 0,0,0,1) ทุกค่าที่เราตั้งเอง
	   ใน .chtb-searchbox-btn (specificity 0,0,1,0 สูงกว่า) ชนะอยู่แล้วปกติ (padding/height/background ฯลฯ
	   เลยถูกต้องหมด) แต่ min-width เราไม่เคยตั้งค่าเองเลยสักจุด ธีมเลยเป็นเจ้าเดียวที่มีค่านี้ ใช้ได้แบบ
	   ไม่มีคู่แข่ง — flexbox เลยบังคับความกว้างที่ render จริงให้ไม่ต่ำกว่า 90px แม้ width:46px จะตั้งไว้แล้ว
	   ก็ตาม (สังเกตได้จาก getComputedStyle(btn).minWidth ที่คืนค่า "90px" ทั้งที่ไฟล์นี้ไม่มี min-width
	   ระบุเลยสักบรรทัด) — แก้โดยตั้ง min-width ของเราเองทับไปตรงๆ ให้เท่ากับ width ที่ต้องการ (46px) ปิดช่อง
	   ให้ธีมมาแทรกได้อีก */
	.chtb-searchbox-btn {
		width: 46px;
		height: 46px;
		min-width: 46px;
		flex-shrink: 0;
		padding: 0;
	}
	.chtb-searchbox-btn-icon {
		display: block;
	}
	.chtb-searchbox-btn-label {
		display: none;
	}
}