/*
 * การ์ด 4 ช่อง (กำไรสุทธิงวดล่าสุด / งวดเดียวกันปีก่อน / YoY% / QoQ%) เหนือกราฟกำไรสุทธิ — คู่กับ
 * lib/np_stat_grid.php (renderNpStatGrid()) ย้ายมาจากที่เคยก็อปแยกกันเอง 3 ไฟล์ (view_np.php,
 * view_np_dashboard.php, view_np_new.php) เหมือนกันทุกตัวอักษร
 *
 * ต้องมี assets/site-theme.css (var(--card-bg)/var(--border)/var(--text-muted)/var(--text-secondary)/
 * var(--good)/var(--bad)/var(--good-bg)/var(--error-bg)/var(--radius)) โหลดอยู่ก่อนเสมอ
 */
.stat-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.stat-grid.four { grid-template-columns: 1.1fr 1fr 1fr 1fr; }
@media (max-width: 640px) { .stat-grid, .stat-grid.four { grid-template-columns: 1fr 1fr; } }
/* จอมือถือจริง (ไม่ใช่แค่ tablet) — 2 คอลัมน์ยังแคบเกินไป padding+font ของ .stat-tile ดันเนื้อหาล้น
ขอบจอขวา (เจอจริงกับ "กำไรสุทธิ Q1/2026" ที่ 375px) ลดเหลือคอลัมน์เดียวให้แต่ละ tile เต็มความกว้างแทน */
@media (max-width: 480px) { .stat-grid, .stat-grid.four { grid-template-columns: 1fr; } }
/* display:flex column + margin-top:auto บน .stat-sub — กัน gap ใต้ sub-label ไม่เท่ากันระหว่าง tile (ค่า
Q2/2026 ตัวใหญ่ 32-34px vs ค่า YoY/QoQ 30px ทำให้เนื้อหาสูงไม่เท่ากัน แต่ grid stretch ทุก tile สูงเท่ากัน
เสมอ ถ้าไม่ดัน sub ลงล่าง ช่องว่างส่วนเกินจะไปกองอยู่ใต้ sub เป็นระยะไม่เท่ากันแทน) ดัน .stat-sub ชิดขอบ
ล่างเสมอ ระยะห่างจากขอบล่างเลยเท่ากับ padding-bottom (18px) พอดีทุก tile ไม่ว่าค่าตรงกลางจะสูงแค่ไหน */
.stat-tile { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 1px 3px rgba(11,11,11,0.04); }
.stat-tile.hero-positive { background: var(--good-bg); border-color: rgba(10,143,47,0.28); }
.stat-tile.hero-negative { background: var(--error-bg); border-color: rgba(208,59,59,0.28); }
.stat-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.stat-value { font-size: 34px; font-weight: 700; line-height: 1; }
.stat-tile.hero .stat-value { font-size: 32px; }
.stat-value .unit { font-size: 15px; font-weight: 500; color: var(--text-secondary); margin-left: 6px; }
.stat-tile .stat-value.positive { color: var(--good); }
.stat-tile .stat-value.negative { color: var(--bad); }
.stat-value.neutral { color: var(--text-muted); }
.stat-sub { font-size: 12.5px; color: var(--text-muted); margin-top: auto; padding-top: 6px; }
.delta-tile .stat-value { font-size: 30px; }
.delta-tile .stat-value.neutral { font-size: 22px; }
.delta-arrow { font-size: 20px; margin-right: 2px; }

.compact-value { font-size: 26px; }
.stat-tile .compact-value { font-size: 32px; }