/* ===== Giao diện điện thoại (≤ 760px) ===== */
@media (max-width: 760px) {
  html, body { overscroll-behavior-y: none; }
  body { font-size: 15.5px; -webkit-tap-highlight-color: transparent; }

  /* Khung: menu chuyển xuống đáy màn hình */
  .shell { grid-template-columns: 1fr; height: 100dvh; }
  .main { height: 100dvh; }
  .side { display: flex; position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); margin: 0;
    flex-direction: row; align-items: stretch; gap: 2px; padding: 6px; border-radius: 24px; }
  .side .logo, .side .sp, .side [data-logout] { display: none; }
  .nav-item { flex: 1; padding: 7px 2px 6px; gap: 3px; font-size: 11px; border-radius: 18px; min-width: 0; }
  .nav-item svg { width: 24px; height: 24px; }
  .nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav-item .badge { top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; font-size: 11px; }

  .topbar { margin: calc(8px + env(safe-area-inset-top)) 8px 0; padding: 8px 10px 8px 14px; gap: 8px; border-radius: 22px; }
  .topbar h1 { font-size: 18px; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
  .topbar h1 svg { width: 22px; height: 22px; }
  .clock b { font-size: 17px; }
  .clock span, .me-chip > div, .sync-dot, .topbar .theme-btn { display: none; }
  .topbar h1 { display: block; flex: 1; text-overflow: ellipsis; }
  .topbar .sp { display: none; }
  .topbar h1 svg { vertical-align: -4px; margin-right: 6px; }
  .me-chip { padding: 3px; border-radius: 50%; }
  .me-chip .avatar { width: 36px; height: 36px; font-size: 15px; }
  .icon-btn, .theme-btn { width: 40px; height: 40px; border-radius: 13px; }
  .content { padding: 12px 8px calc(100px + env(safe-area-inset-bottom)); }

  /* Thẻ, ô số liệu, nút nhanh */
  .card { padding: 14px; border-radius: 20px; }
  .card + .card { margin-top: 12px; }
  .card-head { gap: 8px; margin-bottom: 12px; }
  .card-head h3 { font-size: 17px; }
  .card-head .faint.small { display: none; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .tile { padding: 12px; gap: 10px; border-radius: 18px; }
  .tile .ti { width: 40px; height: 40px; border-radius: 13px; }
  .tile b { font-size: 24px; }
  .tile span { font-size: 12.5px; }
  .quick { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .quick-btn { padding: 12px; gap: 10px; font-size: 15px; border-radius: 18px; }
  .quick-btn .qi { width: 44px; height: 44px; border-radius: 14px; }
  .quick-btn .qi svg { width: 24px; height: 24px; }
  .grid2, .grid3, .grid-2 { grid-template-columns: 1fr; }

  .btn-xl { height: 60px; font-size: 18px; padding: 0 20px; border-radius: 20px; }
  .btn-lg { height: 52px; font-size: 16px; padding: 0 16px; border-radius: 17px; }
  .row-btns { gap: 10px; }
  .row-btns .btn { flex: 1; }
  .action-bar .btn { flex: 1 1 calc(50% - 10px); }
  .toolbar { gap: 8px; margin-bottom: 12px; }
  .toolbar .sp { display: none; }
  .toolbar .btn-lg { flex: 1; }
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg button { height: 40px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .date-nav { flex: 1; justify-content: space-between; }
  .date-nav .dlabel { min-width: 0; font-size: 16px; }
  .toolbar .inp[type=date] { width: 100% !important; flex: 1; }
  .toolbar .sel { flex: 1; min-width: 0; }

  /* Danh sách chuyến */
  .trip { grid-template-columns: 70px 1fr; gap: 10px; padding: 12px; }
  .trip-time b { font-size: 19px; }
  .trip-title { font-size: 15.5px; }
  .trip-right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding-left: 0 !important; }
  .trip-meta .loc { max-width: 100%; }
  .ext-row { grid-template-columns: 1fr; }
  .day-head { font-size: 15.5px; margin: 14px 2px 8px; }

  /* Timeline: vuốt ngang, cột tài xế đứng yên */
  .tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; border: 1px solid var(--line); scrollbar-width: thin; }
  .tl { min-width: 860px; --label: 112px; --row: 58px; border: 0; border-radius: 0; overflow: visible; }
  .tl-label, .tl-corner { position: sticky; left: 0; z-index: 7; background: rgba(9, 32, 66, .97); }
  .tl-row.taxi .tl-label { background: linear-gradient(rgba(255, 211, 77, .1), rgba(255, 211, 77, .1)), rgba(9, 32, 66, .97); }
  .tl-row.unassigned .tl-label { background: linear-gradient(rgba(255, 90, 82, .12), rgba(255, 90, 82, .12)), rgba(9, 32, 66, .97); }
  .tl-label { padding: 0 8px; gap: 8px; }
  .tl-label .avatar { display: grid; width: 30px; height: 30px; font-size: 13px; }
  .tl-name b { font-size: 14px; }
  .tl-name small { font-size: 11px; }
  .tl-corner { padding: 0 10px; }
  .tl-legend { font-size: 12px; gap: 6px 12px; }
  .tl-legend .faint { display: none; }

  /* Dashboard tài xế */
  .alert-banner { font-size: 16px; padding: 14px 16px; gap: 10px; margin-bottom: 12px; }
  .alert-banner svg { width: 28px; height: 28px; }
  .hero { padding: 18px; border-radius: 24px; }
  .hero .time { font-size: 46px; }
  .hero .time small { font-size: 22px; }
  .hero .count { font-size: 17px; }
  .hero .what { font-size: 18px; margin: 12px 0 8px; }
  .hero .info { font-size: 15px; }
  .big-actions { gap: 12px; margin-top: 14px; }
  .big-btn { height: 124px; font-size: 22px; border-radius: 26px; }
  .big-btn svg { width: 44px; height: 44px; }
  .big-btn.yes, .big-btn.no { height: 92px; font-size: 19px; }
  .backup-box, .ext-box { padding: 14px; margin-top: 12px; }
  .ext-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  /* Cửa sổ: trượt lên từ đáy */
  .modal-wrap { padding: 0; place-items: end stretch; }
  .modal, .modal.wide { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; animation: sheet .25s cubic-bezier(.2, .9, .3, 1); }
  .modal-head { padding: 14px 16px 8px; }
  .modal-head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: var(--faint); }
  .modal-head h2 { font-size: 18px; }
  .modal-ic { width: 40px; height: 40px; border-radius: 13px; }
  .modal-body { padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); }
  .detail .drow { grid-template-columns: 1fr; gap: 4px; }
  .stop-edit { grid-template-columns: 1fr; }
  .stop-edit .icon-btn { justify-self: end; }
  .dpick button { flex: 1 1 calc(50% - 10px); min-height: 52px; }
  .opt-sec { padding: 12px; }
  .opt-sec .btn { flex: 1 1 auto; }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } }

  /* Thông báo, toast */
  .notif-panel { top: calc(68px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 180px); }
  #toast-root { left: 10px; right: 10px; bottom: calc(96px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; }

  /* Bảng: cuộn ngang */
  .card:has(> .table) { overflow-x: auto; }
  .table { min-width: 620px; font-size: 13.5px; }
  .drv-admin { gap: 12px; }
  .drv-admin .hstack { width: 100%; }
  .drv-admin .hstack .btn { flex: 1; padding: 0 10px; }
  .req { padding: 14px; }
  .kpi-banner { flex: 1; }

  /* Đăng nhập */
  .login-wrap { padding: 16px; align-items: start; padding-top: calc(64px + env(safe-area-inset-top)); }
  .login-card { padding: 22px; border-radius: 28px; }
  .login-card h1 { font-size: 26px; }
  .login-card .brand .lg { width: 60px; height: 60px; border-radius: 18px; }
  .login-hero { height: 90px; }
  .theme-float { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
}
@media (max-width: 760px) and (hover: none) {
  .quick-btn:hover, .tl-block:hover, .btn:hover { transform: none; filter: none; }
}
@media (max-width: 760px) {
  :root[data-theme="light"] .tl-label, :root[data-theme="light"] .tl-corner { background: rgba(246, 250, 255, .98); }
  :root[data-theme="light"] .tl-row.taxi .tl-label { background: linear-gradient(rgba(255, 200, 40, .14), rgba(255, 200, 40, .14)), #f6faff; }
  :root[data-theme="light"] .tl-row.unassigned .tl-label { background: linear-gradient(rgba(220, 50, 40, .08), rgba(220, 50, 40, .08)), #f6faff; }
}

/* Thanh bản quyền: full ngang, nằm dưới thanh điều hướng */
@media (max-width: 760px) {
  .app-foot { left: 0; height: 20px; font-size: 10px; padding-bottom: env(safe-area-inset-bottom); }
  .app-foot .foot-lic { display: none; }
  .side { bottom: calc(8px + 22px + env(safe-area-inset-bottom)); }
  .content { padding-bottom: calc(122px + env(safe-area-inset-bottom)); }
}

/* ===== Điện thoại: bố cục gọn, bớt khoảng trống (tối đa 760px) =====
   Nguyên tắc: không cố định chiều cao khối có chữ (máy đặt cỡ chữ lớn vẫn không tràn),
   chữ trong nút luôn 1 dòng, hàng nút tự xuống hàng khi thiếu chỗ. */
@media (max-width: 760px) {
  :root { --shadow: 0 6px 18px rgba(0, 8, 30, .28); }
  .nm-full, .td-long, .lbl-long { display: none; }
  .nm-short, .lbl-short { display: inline; }
  .td-short { display: block; }
  .content { padding-top: 10px; }

  /* Thẻ */
  .card { padding: 12px; border-radius: 18px; }
  .card + .card, .wrap > .card { margin-top: 10px; }
  .card-head { margin-bottom: 10px; flex-wrap: wrap; }
  .card-head h3 { font-size: 16px; gap: 8px; }
  .card-head h3 svg { width: 20px; height: 20px; }
  .card-head > .muted.small { flex-basis: 100%; order: 9; margin-top: -4px; }
  .card-head .date-nav { order: 8; flex-basis: 100%; justify-content: space-between; }
  .card-head .date-nav .dlabel { font-size: 15px; white-space: nowrap; }
  .card-head .btn-lg { min-height: 40px; height: auto; font-size: 14px; padding: 6px 14px; border-radius: 14px; }
  .empty { padding: 14px; gap: 6px; font-size: 14px; }
  .empty svg { width: 32px; height: 32px; }

  /* Nút */
  .btn-xl, .btn-lg { height: auto; min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .row-btns .btn, .action-bar .btn { flex: 1 1 auto; min-width: min(100%, max-content); white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  /* Nút lớn có chiều cao tự co giãn → chữ quá dài được xuống dòng, không tràn khỏi màn hình */
  .btn-lg, .btn-xl { white-space: normal; text-align: center; line-height: 1.2; max-width: 100%; }
  .action-bar { gap: 8px; }
  .action-bar .btn-lg { min-height: 44px; font-size: 15px; }
  .big-btn { height: auto; min-height: 96px; }

  /* Thanh cảnh báo mật khẩu: 1 dòng */
  .pw-warn { padding: 6px 8px 6px 12px; gap: 8px; font-size: 13.5px; border-radius: 14px; }
  .pw-warn > svg { width: 18px; height: 18px; flex: none; }
  .pw-warn .btn { height: auto; min-height: 32px; padding: 4px 10px; font-size: 13px; }

  /* Thanh "Cài như ứng dụng": 1 hàng gọn */
  .install-slot { margin: 8px 8px 0; }
  .install-banner { padding: 6px 8px; gap: 8px; border-radius: 14px; }
  .install-banner img { width: 34px; height: 34px; border-radius: 10px; }
  .install-banner b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .install-banner small { display: none; }
  .install-banner .btn { height: auto; min-height: 34px; padding: 4px 10px; font-size: 13px; gap: 6px; }
  .install-banner .icon-btn { width: 30px; height: 30px; }

  /* Tổng quan: ô số liệu 3 cột, nút nhanh 1 hàng */
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .tile { padding: 9px 10px; gap: 6px; border-radius: 15px; display: grid; grid-template-columns: auto 1fr; align-items: center; }
  .tile .ti { width: 30px; height: 30px; border-radius: 10px; }
  .tile .ti svg { width: 18px; height: 18px; }
  .tile b { font-size: 21px; }
  .tile span { font-size: 11.5px; line-height: 1.2; display: block; }
  .tile > div { min-width: 0; }
  .quick { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
  .quick-btn { flex-direction: column; justify-content: center; text-align: center; padding: 10px 4px; gap: 6px; font-size: 12.5px; line-height: 1.2; border-radius: 15px; }
  .quick-btn .qi { width: 38px; height: 38px; border-radius: 12px; }
  .quick-btn .qi svg { width: 21px; height: 21px; }
  .quick-btn .badge { top: 4px; right: 6px; }
  .ack-card .hstack { display: grid; gap: 6px; }
  .ack-chip { display: flex; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; padding: 4px 10px 4px 4px; }
  .ack-chip b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ack-chip span, .ack-chip small { white-space: nowrap; }
  .issue { padding: 10px 12px; gap: 8px; font-size: 14px; }
  .issue .btn { height: auto; min-height: 34px; padding: 4px 10px; font-size: 13px; }
  .iss-txt b { white-space: nowrap; }

  /* Timeline */
  .tl { --label: 76px; min-width: 760px; }
  .tl-name b { font-size: 13.5px; }
  .tl-name small { font-size: 10.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tl-leg { margin-top: 8px; }
  .tl-leg > summary { display: list-item; font-size: 13px; color: var(--muted); cursor: pointer; }
  .tl-legend { margin-top: 6px; }

  /* Trang Lịch: ‹ ngày › Hôm nay + trên 1 hàng, bộ lọc 1 hàng */
  .toolbar { margin-bottom: 10px; }
  .seg button { height: 38px; font-size: 13.5px; padding: 0 10px; }
  .cal-tb { gap: 6px; flex-wrap: wrap; }
  .cal-tb .seg { flex-basis: 100%; }
  .cal-tb .date-nav { display: contents; }
  .cal-tb .date-nav [data-d^="-"] { order: 1; }
  .cal-tb .date-field { order: 2; flex: 1; min-width: 118px; width: auto !important; }
  .cal-tb .date-nav .dlabel { order: 2; flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-tb.is-day .date-nav .dlabel, .cal-tb.is-week .date-field { display: none; }
  .cal-tb .date-nav [data-d]:not([data-d^="-"]) { order: 3; }
  .cal-tb [data-today] { order: 4; padding: 0 8px; height: 42px; font-size: 13.5px; }
  .cal-tb [data-add] { order: 5; flex: none !important; width: 44px; height: 42px; min-height: 42px; padding: 0; }
  .cal-tb [data-add] .lbl { display: none; }
  .cal-tb .icon-btn { width: 34px; height: 42px; }
  .cal-tb .date-field .df-text { min-height: 42px; height: 42px; padding: 0 30px 0 8px; font-size: 14px; }
  .cal-tb .date-field .df-btn { right: 2px; width: 32px; }
  .cal-filters { gap: 6px; flex-wrap: nowrap; }
  .cal-filters .sel { min-height: 40px !important; height: 40px; padding: 0 8px; line-height: 38px; font-size: 14px; }
  .cal-filters label { flex: none; font-size: 13.5px; gap: 6px; }

  /* Danh sách lịch */
  .trip { grid-template-columns: 58px 1fr; gap: 4px 10px; padding: 10px; border-radius: 14px; }
  .trip-time b { font-size: 17px; }
  .trip-time span { font-size: 12.5px; }
  .trip-time .td-short { font-size: 12px; margin-top: 2px; }
  .trip-title { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .trip-meta { gap: 6px; margin-top: 4px; font-size: 13px; flex-wrap: nowrap; align-items: center; }
  .trip-meta .chip { flex: none; height: 24px; font-size: 12px; padding: 0 8px; }
  .trip-meta .pill { flex: none; }
  .trip-meta .loc { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trip-right { gap: 6px; margin-top: 2px; }
  .trip-right .pill, .trip-right .chip { font-size: 12px; height: 26px; padding: 0 8px; }
  .trip-right .pill.share { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trip-list { gap: 8px; }
  .day-head { margin: 10px 2px 6px; font-size: 14.5px; }

  /* Duyệt yêu cầu */
  .req { padding: 12px; }
  .req-head { gap: 8px; margin-bottom: 8px; }
  .req-head b { font-size: 15.5px; }
  .req-head > div { flex: 1 1 150px; min-width: 0; }
  .req-head > .sp { display: none; }
  .req-head > .pill { max-width: 100%; white-space: normal; height: auto; min-height: 26px; }
  .req-head .avatar { width: 36px; height: 36px; }
  .req .warn-box, .req .info-box, .req .danger-box { padding: 8px 10px; font-size: 13.5px; }
  .req .action-bar .btn-xl { min-height: 48px; font-size: 16px; }
  .req .table, .detail .table { min-width: 0; width: 100%; table-layout: fixed; font-size: 13px; }
  .req .table th:first-child, .req .table td:first-child { width: 28%; }
  .req .table td, .req .table th { overflow-wrap: anywhere; padding: 6px; }

  /* Quản trị: tài xế */
  .drv-admin { padding: 10px; gap: 8px 10px; }
  .drv-admin .avatar.lg { width: 44px; height: 44px; font-size: 18px; }
  .drv-admin b[style] { font-size: 16px !important; }
  .drv-admin .hstack { gap: 6px; }
  .drv-admin .hstack .btn { flex: 1 1 auto; height: auto; min-height: 36px; font-size: 13px; padding: 4px 8px; }
  /* Quản trị: người dùng – bảng thành thẻ */
  .card:has(> .utbl) { overflow-x: visible; }
  .utbl { min-width: 0; display: block; }
  .utbl tbody { display: block; }
  .utbl tr:has(> th) { display: none !important; }
  .utbl tr.grp-row { display: block; }
  .utbl tr.grp-row td { display: block; padding: 10px 4px 4px; }
  .utbl tr:not(.grp-row) { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  .utbl td { padding: 0; border: 0; }
  .utbl td:nth-child(1) { grid-column: 3; grid-row: 2; }
  .utbl td:nth-child(2) { grid-column: 1; grid-row: 1 / 3; }
  .utbl td:nth-child(2) .avatar { width: 38px; height: 38px; }
  .utbl td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .utbl td:nth-child(4) { display: none; }
  .utbl td:nth-child(5) { grid-column: 2; grid-row: 2; }
  .utbl td:nth-child(6) { grid-column: 3; grid-row: 1; }
  .utbl td:nth-child(7) { grid-column: 1 / -1; grid-row: 3; text-align: left !important; display: flex; gap: 6px; flex-wrap: wrap; }
  .utbl td:nth-child(7) .btn { height: auto; min-height: 34px; font-size: 13px; }
  .utbl .ord-btn { width: 30px; height: 30px; }

  /* Cửa sổ, chi tiết lịch */
  .modal-body { overflow-x: hidden; }
  .modal-head h2 { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .modal-ic { width: 34px; height: 34px; }
  .detail { gap: 6px; }
  .detail .drow { padding: 6px 0; gap: 2px; }
  .detail .drow > span { font-size: 13px; }
  .stop { padding: 10px 12px; }
  .cmt-row { flex-direction: row; align-items: flex-end; }
  .cmt-row textarea { min-height: 44px; }
  .cmt-row .btn { flex: none; width: 48px; height: 44px; padding: 0; font-size: 0; gap: 0; }
  .cmt-row .btn svg { width: 22px; height: 22px; }
  .feed { max-height: 260px; }
  .feed-h { font-size: 12.5px; }

  /* Nhật ký – Xác nhận đã xem: bộ lọc 2 cột, ô tìm cả hàng */
  .ack-filters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
  .ack-filters .sel { width: 100% !important; min-height: 40px !important; height: 40px; padding: 0 8px; font-size: 13.5px; }
  .ack-filters .inp { grid-column: 1 / -1; width: 100% !important; min-height: 40px; }

  /* Thanh tab từ 4 mục trở lên (Quản trị): lưới 2 cột, thấy hết các tab */
  .seg:has(> button:nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .seg:has(> button:nth-child(4)) button { justify-content: center; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }

  /* Bảng Nhật ký (thay đổi / xác nhận / trao đổi): mỗi dòng thành 1 thẻ gọn, không vuốt ngang */
  .card:has(> .mcards), .tbl-scroll:has(> .mcards) { overflow-x: visible; }
  .mcards { min-width: 0; display: block; font-size: 13.5px; }
  .mcards tbody { display: block; }
  .mcards tr:has(> th) { display: none !important; }
  .mcards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
  .mcards td { padding: 0 !important; border: 0 !important; white-space: normal !important; min-width: 0; }
  .mcards td:nth-child(1) { grid-column: 2; grid-row: 1; font-size: 12px; color: var(--faint); white-space: nowrap !important; }
  .mcards td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .mcards td:nth-child(2) .small { display: inline; margin-left: 6px; }
  .mcards td:nth-child(n+3) { grid-column: 1 / -1; }
  .mc-cmt td:nth-child(3) { font-size: 12.5px; color: var(--muted); }
  .mc-ack tr { grid-template-columns: auto auto minmax(0, 1fr); }
  .mc-ack td:nth-child(1) { grid-column: 3; text-align: right; }
  .mc-ack td:nth-child(2) { grid-column: 1 / 3; }
  .mc-ack td:nth-child(4) { grid-column: 1; grid-row: 3; margin-top: 2px; white-space: nowrap !important; }
  .mc-ack td:nth-child(5), .mc-ack td:nth-child(6) { grid-row: 3; align-self: end; font-size: 12px; color: var(--muted); white-space: nowrap !important; }
  .mc-ack td:nth-child(5) { grid-column: 2; }
  .mc-ack td:nth-child(6) { grid-column: 3; }
  .mc-ack td:nth-child(5)::before { content: "Nhận: "; }
  .mc-ack td:nth-child(6)::before { content: "Xem: "; }

  /* Thông báo */
  .notif-panel .nh { padding: 12px 12px 8px; gap: 8px; flex-wrap: wrap; }
  .notif-panel .nh h3 { font-size: 17px; white-space: nowrap; }
  .notif-panel .nh .btn { height: auto; min-height: 34px; font-size: 13px; padding: 4px 10px; }
  .notif-list { padding: 0 6px 10px; }

  /* Tài xế: thông tin chuyến không đẩy 2 nút lớn xuống quá xa */
  .hero { padding: 14px 16px; }
  .hero .time { font-size: 40px; }
  .hero .what { font-size: 16.5px; margin: 8px 0 6px; }
  .hero .info { gap: 6px; font-size: 14px; }
  .hero .info span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .share-box { padding: 8px 12px; font-size: 13.5px; }

  /* Nút Trợ lý: tròn, chỉ biểu tượng */
  .ai-fab { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .ai-fab span { display: none; }
}
@media (max-width: 380px) {
  .tiles { gap: 6px; }
  .tile { padding: 8px; grid-template-columns: 1fr; }
  .tile .ti { display: none; }
  .quick-btn { font-size: 11.5px; }
  .cal-tb [data-today] { padding: 0 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }