/* =====================================================================
   COMPACT MODE — thu gọn khoảng cách để tab "Hẹn giờ" vừa 1 màn hình
   Load file này SAU CÙNG (sau timer.css) để override đúng.
   ===================================================================== */

/* --- Card & Header --- */
.card { padding: 24px 28px; }
.corner-logo { width: 48px; top: 12px; right: 12px; }
.header { margin-bottom: 14px; padding-bottom: 12px; }
.brand { font-size: 24px; }

/* --- Setup sections (Duration / Starting bell / Interval / Ending) --- */
.section { margin-bottom: 12px; padding-bottom: 10px; }
.section-label { margin-bottom: 6px; }
.section-head { margin-bottom: 6px; }
.row + .row { margin-top: 6px; }
.bell-row { margin-bottom: 4px; }
.help-text { margin-top: 4px; }

/* --- Actions (nút Bắt đầu) --- */
.actions { margin-top: 14px; padding-top: 12px; }

/* --- Footer: gần như bỏ, chỉ giữ đường kẻ mảnh --- */
.footer { margin-top: 10px; padding-top: 8px; font-size: 10px; }

/* --- Running / countdown view: cũng thu gọn để cân đối --- */
.running-label { margin-bottom: 8px; }
.countdown { font-size: 72px; margin-bottom: 8px; }
.elapsed { margin-bottom: 14px; }
.schedule { padding: 10px 16px; margin-bottom: 14px; }
.schedule-title { margin-bottom: 6px; }
.schedule-item { padding: 5px 0; }

/* --- Mobile: nén sâu hơn vì màn hình thấp --- */
@media (max-width: 540px) {
  .card { padding: 16px 16px; }
  .corner-logo { width: 36px; top: 10px; right: 10px; }
  .header { margin-bottom: 10px; padding-bottom: 8px; }
  .brand { font-size: 20px; }
  .section { margin-bottom: 8px; padding-bottom: 8px; }
  .section-label { margin-bottom: 4px; font-size: 10px; }
  input[type="number"], select { padding: 6px 8px; }
  .btn { padding: 7px 14px; font-size: 13px; }
  .btn-primary { padding: 9px 20px; }
  .countdown { font-size: 52px; }
  .footer { display: none; } /* ẩn hẳn trên mobile để tiết kiệm không gian */
}