/* ==========================================================================
   FPE Price Tool — Hub แบบกลุ่มตามแผนผัง (แกน 3.4.0 · ก้อน L1a)
   โหลดเฉพาะเมื่อสวิตช์ "หน้า Hub แบบกลุ่ม" เปิด (handle fpe-pt-hub-groups ต่อจาก app.css) — สวิตช์ปิด = หน้าไม่มีไฟล์นี้ · app.css ไม่แก้
   ตามหน้าตัวอย่างที่ Nas ตอบ ห1–ห5 (10 ต.ค. 2569): กลุ่มราคา 4 คอลัมน์บนคอม · การ์ด "กำลังจัดทำ" เป็นแถวย่อบนมือถือ
   แกน 3.4.1 (ก้อน F2.1b · แบบ "หน้า Hub แกนกลาง" 11 ต.ค. 2569 — แทนคำตอบ ห2 เดิม "สามกลุ่มที่เหลือในแถวเดียว"): ทุกกลุ่มขึ้นแถวของตัวเอง ·
   การ์ดของทุกกลุ่มอยู่บนกริด 4 คอลัมน์เดียวกันบนคอม ชิดซ้าย (กลุ่มที่มี 1–2 ใบเหลือที่ว่างทางขวา) · กฎของ .fpt-grouprow และ .fpt-group--w1 / --w2 ถูกถอดออก
   ทุกกฎใช้ class ใหม่ (.fpt-hubg .fpt-group* .fpt-tiles--g4 .fpt-tile--nonum .fpt-login__groups) — ไม่แตะกฎเดิมของหน้าอื่น
   ========================================================================== */

#fpt-app .fpt-hubg { gap: 28px; }
#fpt-app .fpt-groups { display: flex; flex-direction: column; gap: 32px; }
#fpt-app .fpt-group { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#fpt-app .fpt-group__head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--fpt-border); }
#fpt-app .fpt-group__en { font-family: var(--fpt-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: var(--fpt-muted); text-transform: uppercase; }
#fpt-app .fpt-group__th { font-family: var(--fpt-font-head); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--fpt-ink); }
#fpt-app .fpt-tile--nonum .fpt-tile__top { justify-content: flex-start; }

/* คอม (≥1000px): การ์ดของทุกกลุ่มบนกริด 4 คอลัมน์ ช่องว่าง 20px (ของ app.css) — กลุ่มละแถว */
@media (min-width: 1000px) {
	#fpt-app .fpt-hubg .fpt-tiles--g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#fpt-app .fpt-hubg .fpt-tile__title { font-size: 20px; }
}

/* มือถือ (≤719px · ห3): การ์ด "กำลังจัดทำ" เป็นแถวย่อ (เลข · ชื่อ · คำอธิบาย · ป้าย — ไม่มีไอคอน) · การ์ดที่กดได้เป็นการ์ดเต็มแบบเดิม */
@media (max-width: 719px) {
	#fpt-app .fpt-hubg .fpt-tiles { gap: 10px; }
	#fpt-app .fpt-hubg .fpt-tile--coming { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 0; padding: 12px 14px; border-radius: 12px; }
	#fpt-app .fpt-hubg .fpt-tile--coming .fpt-tile__icon { display: none; }
	#fpt-app .fpt-hubg .fpt-tile--coming .fpt-tile__top { flex: 0 0 auto; }
	#fpt-app .fpt-hubg .fpt-tile--coming.fpt-tile--nonum .fpt-tile__top { display: none; }
	#fpt-app .fpt-hubg .fpt-tile--coming .fpt-tile__no { font-size: 18px; min-width: 24px; }
	#fpt-app .fpt-hubg .fpt-tile--coming .fpt-tile__bottom { flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; }
	#fpt-app .fpt-hubg .fpt-tile--coming .fpt-tile__text { flex: 1 1 auto; }
	#fpt-app .fpt-hubg .fpt-tile--coming .fpt-tile__title { font-size: 16px; line-height: 1.35; }
	#fpt-app .fpt-hubg .fpt-tile--coming .fpt-tile__sub { font-size: 13px; line-height: 1.4; }
	#fpt-app .fpt-hubg .fpt-tile--coming .fpt-chip--muted { height: 26px; padding: 0 10px; font-size: 12px; flex: 0 0 auto; }
	#fpt-app .fpt-hubg .fpt-tile--live { margin-bottom: 6px; }
}

/* หน้าล็อกอิน: รายการกลุ่ม (แทนรายการหมวดพร้อมเลข) */
#fpt-app .fpt-login__groups { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
#fpt-app .fpt-login__groups li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 8px; align-items: baseline; }
#fpt-app .fpt-login__groups .fpt-login__no { grid-row: span 2; }
#fpt-app .fpt-login__groups .fpt-login__gen { font-size: 15px; font-weight: 600; }
#fpt-app .fpt-login__groups .fpt-login__gth { font-size: 14px; color: var(--fpt-muted); }