/* ============================================================
   LỚP ĐIỆN THOẠI (≤ 899px) — NK-227, 05/09/2026, theo bản vẽ "Kathy Mobile".
   ------------------------------------------------------------
   VÌ SAO TÁCH TỆP: sáng 05/09 phiên NK-224 sửa quan-tri.css / quan-tri.js liên tục
   (13 commit trong một buổi). Gộp luật điện thoại vào đó là giẫm hunk của nhau.
   Tệp này nạp SAU CÙNG trong index.html, chỉ chứa luật cho màn hẹp (+ vài luật
   sàn chữ 12px áp mọi màn), KHÔNG đụng bố cục máy tính. Khi NK-224 xong, gộp
   ngược về layout.css / quan-tri.css nếu anh muốn giữ luật "một nơi duy nhất".
   Số đo lấy từ bản vẽ: thanh trên 56 · thanh dưới 64 + safe-area · ngăn kéo 300
   · mục menu 48 · chạm ≥ 44 · chữ ≥ 12. Phần JS đi kèm: components/mobile-shell.js.
   ============================================================ */

/* ---------- Phần tử chỉ dành cho điện thoại: MẶC ĐỊNH ẨN, khối ≤899px bên dưới mới hiện ---------- */
.qt-tab-duoi, .qt-top-ten, .qt-tim-nut, .qt-lui, .qt-side-dong, .qt-side-toi, .qt-the-mui { display: none; }

/* ---------- Sàn chữ 12px — mọi màn (base.css: "bỏ dần cỡ 10–11px") ---------- */
.today-count span { font-size: 12px; }
.today-pill { font-size: 12px; }
.cq-nhan, .qt-nguon, .qt-side-chan { font-size: 12px; }
.chat-trace { font-size: 12px; }
.ch-sub, .ch-user-role { font-size: 12px; }

/* ============================================================
   KHUNG QUẢN TRỊ (chủ doanh nghiệp) — ≤ 899px
   ============================================================ */
@media (max-width: 899px) {
  /* --- Thanh trên 56px: [☰ | ‹] tên màn · 🔍 · 🔔 · avatar --- */
  .qt-top { padding: 6px 6px 6px 4px; gap: 2px; min-height: 56px; }
  .qt-burger, .qt-lui {
    width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0; background: none;
    border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; color: #111; cursor: pointer; flex: none;
  }
  .qt-lui svg, .qt-tim-nut svg, .qt-side-dong svg { width: 22px; height: 22px; }
  .qt-shell.qt-co-lui .qt-burger { display: none; }
  .qt-top-ten {
    flex: 1 1 auto; display: block; min-width: 0; font-size: 16px; font-weight: 700; color: var(--qt-brand);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px;
  }
  /* Ô tìm thu thành nút — chạm mới trải ra hết bề ngang thanh */
  .qt-tim { display: none; }
  .qt-tim-nut {
    display: inline-flex; width: 44px; height: 44px; border: 0; background: none;
    border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none;
  }
  .qt-top { position: sticky; }
  .qt-shell.qt-tim-mo .qt-tim { display: block; position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3; max-width: none; }
  .qt-shell.qt-tim-mo .qt-tim input { height: 40px; font-size: 16px; }
  .qt-shell.qt-tim-mo .qt-top-ten, .qt-shell.qt-tim-mo .qt-burger, .qt-shell.qt-tim-mo .qt-lui { visibility: hidden; }
  .qt-top-phai { gap: 0; }
  .qt-chuong { min-width: 44px; min-height: 44px; padding: 0; }
  .qt-chuong[title="Bàn vận hành hôm nay"] { display: none; } /* đã có tab dưới */
  .qt-toi { padding-left: 4px; border-left: 0; margin-right: 2px; }
  .qt-avatar { width: 32px; height: 32px; font-size: 13px; }

  /* --- Ngăn kéo trái 300px: danh tính + nút đóng, mục 48px, nhãn nhóm 12px --- */
  .qt-side { width: min(300px, 86vw); box-shadow: 8px 0 24px rgba(0, 0, 0, .25); }
  .qt-logo { padding: 12px 8px 12px 16px; }
  .qt-logo-phu { font-size: 12px; letter-spacing: .14em; }
  .qt-side-dong {
    display: inline-flex; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .1); color: #fff; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none;
  }
  .qt-side-toi { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .qt-side-toi .qt-avatar { width: 40px; height: 40px; background: #fff; color: var(--qt-brand); font-size: 16px; flex: none; }
  .qt-side-toi-ten { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qt-side-toi-vai { font-size: 12px; color: rgba(255, 255, 255, .7); }
  .qt-nav-nhom { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); padding: 14px 18px 6px; }
  .qt-nav-muc { min-height: 48px; font-size: 15px; gap: 12px; padding: 0 18px 0 15px; }
  .qt-nav-icon { width: 20px; font-size: 15px; }
  .qt-nav-dem { min-width: 22px; height: 22px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }

  /* --- Thanh dưới 5 tab, ghim đáy (+ safe-area iPhone) --- */
  .qt-tab-duoi {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: stretch;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--qt-vien); box-shadow: 0 -4px 14px rgba(16, 24, 40, .06);
  }
  .qt-tab {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--qt-chu-mo); cursor: pointer;
  }
  .qt-tab svg { width: 22px; height: 22px; stroke: currentColor; }
  .qt-tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qt-tab.qt-dang { color: var(--qt-brand); font-weight: 700; }
  .qt-main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Bàn vận hành của chủ DN nằm trong khung: ngăn kéo Kathy nằm TRÊN thanh tab */
  .qt-shell .one-page.page-today .today-kathy { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* --- Thân trang: lời chào gọn, lỗi nguồn 2 dòng (chạm mở), Cần anh quyết lên đầu --- */
  .qt-than { padding: 12px 14px 16px; gap: 12px; }
  .qt-chao { gap: 8px; align-items: center; flex-wrap: nowrap; }
  .qt-chao > div:first-child { flex: 1 1 auto; min-width: 0; }
  .qt-chao h1 { font-size: 17px; line-height: 1.3; }
  .qt-chao p { display: none; } /* câu mô tả chung — điện thoại chỉ cần tên + ngày */
  .qt-chao-ngay { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .qt-chao-ngay b { font-size: 12.5px; }
  .qt-chao-ngay i { display: none; }
  .qt-tai-lai { min-height: 40px; margin-top: 4px; }
  .qt-loi {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    border-radius: 10px; cursor: pointer; font-size: 13px;
  }
  .qt-loi.qt-loi-mo { display: block; -webkit-line-clamp: unset; }
  .qt-than > .qt-chao { order: -4; }
  .qt-than > .qt-loi-gop { order: -3; }
  .qt-than > .qt-uu-tien { order: -2; }

  /* --- KPI: 2 cột, ô đầu (doanh thu) trải 2 cột, chữ lỗi xuống dòng thành chip --- */
  .qt-kpi-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qt-kpi-hang > .qt-kpi:first-child { grid-column: 1 / -1; }
  .qt-kpi-hang > .qt-kpi:nth-child(6) { grid-column: 1 / -1; } /* 6 ô: ô cuối không đứng lẻ */
  .qt-kpi { padding: 12px 13px; gap: 10px; }
  .qt-kpi-icon { width: 32px; height: 32px; font-size: 15px; border-radius: 8px; }
  .qt-kpi-so { font-size: 20px; }
  .qt-kpi-hang > .qt-kpi:first-child .qt-kpi-so { font-size: 26px; }
  .qt-kpi-nhan, .qt-kpi-phu, .qt-kpi-so { overflow-wrap: anywhere; min-width: 0; }
  .qt-kpi > div { min-width: 0; }
  .qt-kpi-phu .qt-xuong { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--den-do-nen); font-size: 12px; line-height: 1.3; }

  /* --- Thẻ phụ thu gọn: đầu thẻ 48px là tay nắm, mũi tên xoay --- */
  .qt-the-dau { min-height: 48px; }
  .qt-the-dau.qt-bam { cursor: pointer; }
  .qt-the-lien { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; margin-right: -10px; }
  .qt-the-mui { margin-left: 4px; flex: none; color: var(--qt-chu-mo); display: inline-flex; transition: transform .15s ease; }
  .qt-the-mui svg { width: 20px; height: 20px; }
  .qt-the.qt-thu > :not(.qt-the-dau) { display: none; }
  .qt-the.qt-thu .qt-the-mui { transform: rotate(-90deg); }

  /* --- Bảng → hàng 2 dòng (mã · phụ | giá trị · trạng thái), không cuộn ngang --- */
  .qt-bang-cuon { overflow-x: visible; }
  .qt-bang thead { display: none; }
  .qt-bang, .qt-bang tbody { display: block; width: 100%; }
  .qt-bang tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 9px 0; border-bottom: 1px solid #F1F3F8; }
  .qt-bang tr:last-child { border-bottom: 0; }
  .qt-bang td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .qt-bang td:nth-child(1) { font-weight: 700; font-size: 14px; }
  .qt-bang td:nth-child(2) { color: var(--qt-chu-mo); font-size: 12.5px; }
  .qt-bang td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
  .qt-bang td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; font-size: 12px; }
  .qt-bang td:nth-child(n+5) { grid-column: 1 / -1; font-size: 12px; color: var(--qt-chu-mo); }

  .qt-chao-ngay .qt-tai-lai { font-size: 12.5px; }
}

/* ============================================================
   BÀN VẬN HÀNH NHÂN SỰ (/operation/today, đầu trang ContextHeader) — ≤ 899px
   ============================================================ */
@media (max-width: 899px) {
  /* Đầu trang MỘT hàng 56px: logo + tên · 🔔 · avatar (tên/vai người dùng ẩn) */
  .one-page.page-today .context-header { padding: 0; }
  .one-page.page-today .context-header .ch-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; min-height: 0; }
  .one-page.page-today .context-header .ch-brand { flex: 1 1 auto; min-width: 0; }
  .one-page.page-today .context-header .ch-sub { display: block; font-size: 12px; }
  .one-page.page-today .context-header .ch-identity { order: 0; flex: 0 0 auto; padding: 0; justify-content: flex-end; }
  .one-page.page-today .context-header .ch-user-name, .one-page.page-today .context-header .ch-user-role { display: none; }
  .one-page.page-today .context-header .ch-actions { flex: 0 0 auto; gap: 2px; }
  .one-page.page-today .context-header .ch-icon-btn { width: 44px; height: 44px; min-width: 44px; border: 0; }
  .one-page.page-today .context-header .btn-setup { min-height: 40px; }

  /* LỖI THẬT tìm thấy 05/09 khi đo bằng fixture: lưới lịch tuần 7 cột (7×120 + 6×8 = 888px) là
     min-content của .today-page; flex item/grid item mặc định min-width:auto nên .today-page bị
     kéo lên 760px (max-width) trên màn 375 → cả trang rộng gấp đôi màn, phải cuộn ngang.
     min-width:0 trên cả chuỗi để lưới lịch tự cuộn BÊN TRONG như thiết kế. */
  .one-page.page-today .today-page { padding: 12px 12px 100px; min-width: 0; max-width: 100%; }
  .one-page.page-today .today-layout { min-width: 0; max-width: 100%; }
  .one-page.page-today .today-muctieu, .one-page.page-today .today-viec, .one-page.page-today .today-ketqua { min-width: 0; max-width: 100%; }
  .one-page.page-today .lich-giao, .one-page.page-today .today-wig { min-width: 0; max-width: 100%; overflow: hidden; }
  .one-page.page-today .lg-luoi, .one-page.page-today .wig-row { max-width: 100%; }
  .one-page.page-today .today-muctieu h2 { font-size: 18px; margin: 4px 0 2px; }
  .one-page.page-today .today-sub { font-size: 13px; }
  .one-page.page-today .cot-sub { font-size: 12px; }
  .one-page.page-today .td-toggle { font-size: 12.5px; min-height: 40px; }
  /* Lịch tuần: cột 108px (3 cột lọt màn 375, cột 4 ló ra để biết còn cuộn), nút ‹ › 44px */
  .one-page.page-today .lg-luoi { grid-template-columns: repeat(7, minmax(108px, 1fr)); }
  .one-page.page-today .lg-nut { min-width: 44px; min-height: 40px; font-size: 18px; padding: 0 10px; }
  .one-page.page-today .lg-dau { gap: 8px; }
  .one-page.page-today .lg-thu, .one-page.page-today .lg-phu, .one-page.page-today .lg-don { font-size: 12px; }
  /* Ô đếm 3 cột, nhãn 12px */
  .one-page.page-today .today-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .one-page.page-today .today-count { padding: 10px 6px; }
  /* Ô số nhỏ ĐÀI CHỈ HUY (chủ DN): sàn 12px */
  .one-page.page-today .today-viec .so-3 .cell span { font-size: 12px; }
  .one-page.page-today .today-viec .so-3 .cell b { font-size: 13px; }
  .one-page.page-today .today-viec .so-3 .cell small { font-size: 12px; }
  .one-page.page-today .today-viec .dh-hanh-dong { font-size: 12px; }

  /* Ngăn kéo Kathy hé 66px dạng Ô NHẬP (thay tay nắm trống 56px): grip + "Nhắn cho Kathy…" */
  .one-page.page-today .today-kathy { transform: translateY(calc(100% - 66px)); }
  .one-page.page-today .today-kathy.mo-chat { transform: translateY(0); }
  .one-page.page-today .today-kathy .zone-head {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 6px 12px 8px; margin: 0; min-height: 0; background: #fff; cursor: pointer;
  }
  /* components.css còn để padding 8px 16px cho tay nắm cũ (nút xanh) — grip phải trần 44×5 */
  .one-page.page-today .today-kathy .zone-head::before { align-self: center; padding: 0; width: 44px; height: 5px; font-size: 0; line-height: 0; }
  .one-page.page-today .today-kathy .zone-head::after {
    content: "Nhắn cho Kathy…"; display: block; height: 40px; line-height: 38px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 12px; background: #fafafa; color: #8a8a92;
    font-size: 16px; font-weight: 400; padding: 0 14px; text-align: left;
  }
  .one-page.page-today .today-kathy.mo-chat .zone-head { min-height: 40px; padding: 8px 12px 4px; }
  .one-page.page-today .today-kathy.mo-chat .zone-head::after { display: none; }
  .one-page.page-today .today-layout { padding-bottom: 84px; }
  .one-page.page-today .today-kathy .goi-y-chip { min-height: 40px; font-size: 13px; }
  .one-page.page-today .today-kathy .ct-nut { min-width: 44px; min-height: 44px; }
  .one-page.page-today .today-kathy .btn-send { min-height: 44px; min-width: 56px; }
  .one-page.page-today .today-kathy .chat-input { font-size: 16px; min-height: 44px; }
  .one-page.page-today .today-kathy .chat-trace { font-size: 12px; }
}

/* ============================================================
   TRANG CHI TIẾT trong khung — Đích đến · BIQ200 · Tự vận hành · Sức khoẻ · Lộ trình ·
   Lợi nhuận · Khách hàng · Tri thức · Sơ đồ ghế · Thiết lập — ≤ 899px (NK-230, đợt 2)
   ============================================================ */
@media (max-width: 899px) {
  /* Ô nhập/chọn 16px (iOS không tự phóng to), cao ≥ 44; nút ≥ 44; nút hàng cuối trải đều */
  .qt-than input:not([type=checkbox]):not([type=radio]):not([type=file]), .qt-than select { font-size: 16px; min-height: 44px; }
  .qt-than textarea { font-size: 16px; }
  .qt-than .tt-o { padding: 9px 12px; border-radius: 10px; }
  .qt-than .tt-nut, .qt-than .btn { min-height: 44px; }
  .qt-than .tt-chan-mau { gap: 8px; }
  .qt-than .tt-chan-mau .tt-nut { flex: 1 1 auto; }
  .qt-than .tt-nut-chinh { margin-left: 0; }
  .qt-than .tt-nut-nho { min-height: 40px; padding: 0 10px; font-size: 12.5px; }
  .qt-than .tt-dong { min-height: 44px; }
  .qt-than .tt-nhom-dem, .qt-than .tt-tu-tep, .qt-than .tt-nhan { font-size: 12px; }

  /* Đích đến: 5 mốc lợi nhuận vuốt ngang (mốc 90 ngày đứng đầu), mục tiêu chủ DN 1 cột */
  .dd-moc-hang { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x proximity; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .dd-moc { flex: 0 0 156px; scroll-snap-align: start; min-width: 0; }
  .dd-moc-nam, .dd-tt-moc-ten, .dd-tt-moc-nhip, .dd-tt-hoi, .dd-chu-nhan { font-size: 12px; }
  .dd-tien { font-size: 16px; min-height: 44px; font-weight: 700; }
  .dd-visao { font-size: 14px; min-height: 40px; }
  .dd-chu-hang { grid-template-columns: 1fr; gap: 6px; }
  .dd-hoi { font-size: 15px; }
  .dd-moi-hoi { font-size: 17px; }

  /* BIQ200: đầu màn 1 cột, nút trải hàng; 6 tầng thành 6 hàng có thanh tiến độ; tiêu chí hàng 48px; thang 0–10 ô 44px */
  .biq-dau { grid-template-columns: 1fr; gap: 10px; }
  .biq-nut-dau { margin-left: 0; width: 100%; }
  .biq-nut-dau > * { flex: 1 1 auto; min-height: 44px; }
  .biq-tong-so { font-size: 40px; }
  .biq-tang-hang { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--qt-vien); border-radius: 12px; overflow: hidden; }
  .biq-tang {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ten so" "thanh thanh" "phu phu";
    column-gap: 10px; border: 0; border-top: 1px solid #F1F3F8; border-left: 4px solid var(--tg); border-radius: 0; padding: 9px 12px 9px 11px;
  }
  .biq-tang:first-child { border-top: 0; }
  .biq-tang-ten { grid-area: ten; font-size: 13.5px; color: var(--ink); }
  .biq-tang-so { grid-area: so; font-size: 15px; white-space: nowrap; }
  .biq-tang-thanh { grid-area: thanh; height: 6px; margin: 5px 0 4px; }
  .biq-tang-phu { grid-area: phu; font-size: 12px; }
  .biq-tc-dau { min-height: 48px; padding: 6px 12px; }
  .biq-tc-ten { font-size: 14px; }
  .biq-tc-ma, .biq-tc-diem-chua, .biq-tc-mo, .biq-nhom-ten span, .biq-bang, .biq-bc-chip, .biq-goc, .biq-nghen-phu,
  .biq-yt-ten, .biq-tt-tang-ten, .biq-ls-phu, .biq-ls-diem span { font-size: 12px; }
  .biq-thang { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .biq-diem { width: auto; height: 44px; font-size: 14px; }
  .biq-cham .tt-vung, .biq-form-nghen .tt-vung, .biq-form-wig .tt-vung { min-height: 96px; }
  .biq-yt-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biq-wig-2 { grid-template-columns: 1fr; }
  .biq-ls-dong { grid-template-columns: 70px 76px minmax(0, 1fr); }

  /* Tự vận hành · Sức khoẻ · Lộ trình · Lợi nhuận · Khách hàng: sàn chữ 12 + lưới 1–2 cột */
  .tvh-so-t, .tvh-ct-phu, .tvh-vai-so, .tvh-vai-nguoi, .tvh-rui-nguoi, .tvh-qd-phu,
  .sk-trangthai, .sk-vi, .kt-nhan-ke, .kh-p, .kh-ngay { font-size: 12px; }
  .tvh-so-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tvh-vai-hang { grid-template-columns: 1fr; }
  .sk-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-truc { min-width: 0; }
  .ln-khai-dong, .ln-xep { grid-template-columns: 1fr; }
  .kh-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Sơ đồ ghế (đã nằm trong thẻ có đệm 16px — bỏ đệm ngang trùng) */
  .nhansu-page { padding: 4px 0 40px; }
  .ns-vai, .ns-ma, .ns-khoa, .ns-matkhau p { font-size: 12px; }
  .ns-input { font-size: 16px; min-height: 44px; }

  /* Thiết lập doanh nghiệp: bỏ đệm trùng, bước 2 cột 44px, nút lưu trải ngang */
  .setup-workspace { padding: 0; gap: 12px; }
  .setup-backbar { flex-wrap: wrap; gap: 8px; }
  .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .setup-step { min-height: 44px; font-size: 12.5px; }
  .setup-step-page { padding: 12px; }
  .setup-step-page .form-actions .btn { min-height: 44px; width: 100%; }
  .table-wrap { overflow-x: auto; max-width: 100%; }
}

/* Thẻ lồng thẻ (QuanTriTrang bọc .qt-the, bên trong trang lại dựng .qt-the nữa — Đích đến, Tự vận hành…):
   trên điện thoại hai lớp viền + hai lớp đệm ăn mất 64px bề ngang → lớp trong tràn ra sát lớp ngoài. */
@media (max-width: 899px) {
  .qt-than > .qt-the > .qt-the-than { padding: 10px 12px; }
  .qt-than > .qt-the > .qt-the-than > .qt-the { border: 0; box-shadow: none; border-radius: 0; margin: -10px -12px; }
  .qt-than > .qt-the > .qt-the-than > .qt-the + .qt-the { margin-top: 12px; border-top: 1px solid var(--qt-vien); }
}

/* ============================================================
   RÀ ĐỢT 3 (NK-231, 05/09) — vá 2 lỗi đo được trên 12 màn ở 375px
   ============================================================ */
@media (max-width: 899px) {
  /* Widget AI TRỰC nổi (ai-monitor.js) rộng 363×60px, z 99999, ghim góc trên phải → đè kín cả
     thanh trên (tên màn, tìm, chuông, avatar) trên điện thoại. Điện thoại ẩn widget nổi; tình trạng
     AI vẫn có ở dải trong khối CHI PHÍ AI / Tình trạng hệ thống. html# để thắng style do JS chèn sau. */
  html #ai-monitor-float { display: none !important; }
  /* Trang Thiết lập: huy hiệu và ghi chú mẫu 11px → sàn 12px */
  .badge, .form-note, .step-hint { font-size: 12px; }
}

/* ============================================================
   XOAY NGANG điện thoại (cao ≤ 460px): thanh tab dưới ăn 64px của 375px chiều cao → ẩn;
   nút menu hiện lại ở mọi trang để không mất đường vào cột trái. (NK-232, 05/09)
   ============================================================ */
@media (max-width: 899px) and (max-height: 460px) and (orientation: landscape) {
  .qt-tab-duoi { display: none; }
  .qt-main { padding-bottom: 12px; }
  .qt-shell .one-page.page-today .today-kathy { bottom: 0; }
  .qt-shell.qt-co-lui .qt-burger { display: inline-flex; }
  .qt-top { min-height: 48px; }
}

/* ============================================================
   ĐỢT 5 (NK-235): chip tóm tắt trên thẻ thu gọn · tiêu điểm bàn phím · vùng chạm màn đăng nhập
   ============================================================ */
.qt-the-tom { display: none; }
@media (max-width: 899px) {
  .qt-the-tom {
    display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap; background: #EEF0F5; color: var(--qt-chu-mo); flex: none;
  }
  .qt-the-tom[hidden] { display: none; }
  .qt-the-tom-loi { background: var(--den-do-nen); color: var(--den-do); }
  .qt-the:not(.qt-thu) .qt-the-tom { display: none; }   /* thẻ đang mở thì thân thẻ tự nói, không cần chip */
  .qt-tab:focus-visible, .qt-the-dau.qt-bam:focus-visible, .qt-nav-muc:focus-visible, .qt-side-dong:focus-visible,
  .qt-tim-nut:focus-visible, .qt-lui:focus-visible { outline: 2px solid var(--qt-brand); outline-offset: -2px; border-radius: 10px; }
  .login-remember { min-height: 44px; align-items: center; }
  .login-forgot { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
}