/* ================= phone ================= */
@media (max-width:820px){
  body{font-size:16px}
  .shell{display:block}
  .mainwrap{margin-left:0}
  .topbar{padding:8px 13px}
  .topbar .mbrand{display:block}
  main{padding:15px 13px 88px;max-width:none}
  .h1{font-size:20px}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;flex:none;
    flex-direction:row;border-right:none;border-top:1px solid var(--border);z-index:45}
  .side-brand,.side-meter{display:none}
  .side nav{flex-direction:row;padding:5px 6px;gap:3px}
  .side nav button{flex-direction:column;gap:3px;justify-content:center;align-items:center;
    padding:8px 4px;font-size:11.5px;text-align:center}
  .side nav .dot{width:6px;height:6px;flex:0 0 6px}
  .two{grid-template-columns:1fr}
  .sticky{position:static}
  .btn{padding:13px 18px}
  .btn.quiet{padding:11px 15px;font-size:14px}
  .quick button{padding:10px 16px}
  .stepper button{padding:12px 19px}
  .stepper.sm button{padding:8px 13px}
  /* thoát quy tắc padding 11px của ô nhập chung, nếu không số bị cắt như ô giờ */
  .stepper input.v{padding:0;width:62px;font-size:19px}
  .stepper.sm input.v{width:40px;font-size:15px}
  .menu-grid{grid-template-columns:repeat(auto-fill,minmax(46%,1fr));gap:8px}
  .menu-grid button{padding:13px 11px}
  input[type=text],input[type=number],input[type=time],input[type=date],input[type=search],select,textarea{font-size:16px;padding:11px}
  /* Ô giờ tự dựng phải thoát khỏi quy tắc trên: padding 11px hai bên ăn mất 22px trong một
     ô rộng 38px, chỉ còn 16px cho hai chữ số nên số bị cắt đôi. Ở đây nới bề ngang và bỏ
     padding ngang, vẫn giữ chữ đủ to để bấm và đọc bằng một tay. */
  .hm input{padding:6px 0;width:52px;font-size:17px}
  .hm{padding:6px 10px}
  .hmmenu .list button{padding:11px 18px;font-size:15px}
  .hmmenu .list{max-height:240px}
  .total-big{font-size:28px}
  .elapsed{font-size:23px}
  .toast{bottom:78px}
  .iline .x{padding:5px 8px;font-size:20px}
  /* ô 30 phút phải đủ 44px để bấm bằng ngón tay (NFR-01) */
  .gc{--slot:44px;grid-template-columns:38px repeat(6,1fr)}
  .gchead{grid-template-columns:38px repeat(6,1fr)}
  .gchead>div{font-size:10px;padding:6px 1px}
  .gcbody{max-height:none}
  .gc-t{font-size:9.5px;padding-right:4px}
  .gc-b,.gc-sel{font-size:9.5px;padding:2px 3px}
  .gc-b span,.gc-b .pn{font-size:8.5px}
  /* mũi tên phải bám sát nhãn ngày; thứ được phép giãn là ô chọn ngày, không phải nhãn */
  .daynav .cur{min-width:96px}
  .datebar input[type=date]{flex:1;min-width:150px}
}