/* BlueBolt CRM — điện thoại + PWA.
   Nguyên tắc: thanh menu dưới cho ngón cái, ô nhập ≥16px (iPhone không tự phóng to), dải lọc cuộn ngang thay vì xuống nhiều hàng,
   kanban mỗi lần 1 cột vuốt ngang + thanh bước để nhảy, hành động trên thẻ qua bảng chọn (cảm ứng không kéo thả được). */

/* phần chỉ hiện trên điện thoại */
.bnav,.stage-strip,.kc-more{display:none}
.quick-contact{display:none}

/* ứng dụng cài lên màn hình chính: chừa tai thỏ / thanh trạng thái */
.standalone .topbar{padding-top:max(10px,env(safe-area-inset-top))}
.standalone .side{padding-top:env(safe-area-inset-top)}

@media (max-width:900px){
  html{-webkit-text-size-adjust:100%}
  body{overscroll-behavior-y:none}
  a,button,.kcard,.row,tr{-webkit-tap-highlight-color:rgba(0,74,173,.08)}

  /* ô nhập 16px để iOS không phóng to khi chạm */
  .inp,select.inp,textarea.inp,.search .inp,.when-in .inp,.ba-filter,.rank-pick select{font-size:16px}
  .inp{height:44px}
  .btn{height:42px}
  .btn.sm{height:36px}
  .icon-btn{width:38px;height:38px}

  /* khung chung */
  .topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .main{padding:16px max(14px,env(safe-area-inset-left)) calc(84px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right))}
  .page-head{margin-bottom:14px;gap:10px}
  .page-head .head-actions [data-new]{display:none}   /* đã có nút + ở thanh dưới */
  h1{font-size:21px}
  .crumb{font-size:12px}
  .side{padding-bottom:calc(70px + env(safe-area-inset-bottom))}

  /* thanh menu dưới */
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:35;
    background:rgba(255,255,255,.96);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
    border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .bnav a,.bnav>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:52px;color:var(--muted);font-size:11px;font-weight:600;position:relative;border-radius:10px}
  .bnav svg{width:22px;height:22px}
  .bnav .on{color:var(--brand)}
  .bnav .on::after{content:"";position:absolute;top:2px;width:18px;height:3px;border-radius:2px;background:var(--brand)}
  .bnav .bdg{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center}
  .bnav .bnav-new{align-self:center;justify-self:center;width:52px;height:52px;border-radius:16px;background:var(--brand);color:#fff;box-shadow:0 6px 16px -4px rgba(0,74,173,.55);margin-top:-14px}
  .bnav .bnav-new svg{width:24px;height:24px}
  .shell.menu::after{z-index:36}
  .side{z-index:40}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}

  /* dải lọc: cuộn ngang 1 hàng */
  .dash-filters{flex-direction:column;align-items:stretch;gap:8px}
  .dash-filters .tabs,.toolbar .tabs,.period-seg,.tabs.small{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .dash-filters .tabs::-webkit-scrollbar,.toolbar .tabs::-webkit-scrollbar,.period-seg::-webkit-scrollbar{display:none}
  .tab{flex:none;height:34px}
  .period{flex-wrap:nowrap;min-width:0}
  .period-lbl{display:none}
  .period-seg{flex:1;min-width:0}
  .period-seg button{flex:none;height:34px}
  .period-custom{width:100%}
  .period-custom .inp{flex:1;width:auto;height:40px}

  /* ô số: cuộn ngang, thấy ~2 ô */
  .kpis,.kpis.five{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 14px;gap:10px;margin:0 -14px 16px;padding:0 14px 2px;scrollbar-width:none}
  .kpis::-webkit-scrollbar{display:none}
  .kpis .kpi{flex:0 0 46%;scroll-snap-align:start;padding:12px 14px}
  .kpis .kpi .v,.kpis.five .kpi .v{font-size:21px}
  .kpis .kpi .k{font-size:12px}
  .kpis .kpi .h{font-size:11.5px}

  /* tổng quan */
  .grid-2,.grid-2[style]{grid-template-columns:minmax(0,1fr)!important}
  .f-row,.f-conv{grid-template-columns:88px minmax(0,1fr) 84px;gap:8px}
  .f-bar{height:30px}
  .prio-list li{padding:12px 14px}

  /* phễu */
  .page-head .page-sub{font-size:13px}
  .toolbar{gap:8px}
  .toolbar .tabs{width:100%;order:1}
  .toolbar .search{order:0;width:100%}
  .toolbar>select,.toolbar>.check{order:2}
  .toolbar .seg{order:3;margin-left:auto}
  .toolbar>select{flex:1 1 calc(50% - 4px);min-width:0;order:2}
  .toolbar>.check{order:3;font-size:14px}
  .toolbar .seg{order:4}
  .stage-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px 10px;padding:2px 14px;position:sticky;top:57px;z-index:15;background:var(--bg)}
  .stage-strip::-webkit-scrollbar{display:none}
  .stage-strip button{flex:none;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:6px}
  .stage-strip button span{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--grey-soft);font-size:11.5px;display:grid;place-items:center}
  .stage-strip button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .stage-strip button.on span{background:rgba(255,255,255,.2);color:#fff}
  .board{grid-auto-columns:86vw;scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px 10px;gap:10px;scroll-padding:0 14px}
  .col{scroll-snap-align:start;min-height:50vh}
  .kcard{cursor:pointer;padding:12px}
  .kc-more{display:grid;place-items:center;width:32px;height:32px;margin:-6px -6px 0 0;border-radius:8px;color:var(--muted);flex:none}
  .kc-more:active{background:var(--grey-soft)}
  .kc-more svg{width:18px;height:18px}
  .pin{padding:4px 8px}

  /* bảng chọn hành động cho thẻ */
  .sheet-sec{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
  .sheet-stages{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
  .sheet-stages button{height:42px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);font-weight:600;font-size:13.5px;color:var(--ink-2);padding:0 8px}
  .sheet-stages button.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .sheet-stages button.won{color:var(--ok);border-color:#BFE3CF}
  .sheet-stages button.lost{color:var(--bad);border-color:#F1C9C6}
  .sheet-stages button.won.on{background:var(--ok);color:#fff}
  .sheet-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .sheet-row .btn{flex:1;justify-content:center;min-width:0}
  .btn.flag-on{background:var(--orange);border-color:var(--orange);color:#fff}

  /* trang cơ hội */
  .quick-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin:-4px 0 14px}
  .quick-contact .btn{justify-content:center;flex-direction:column;height:58px;gap:3px;font-size:12px;padding:0 4px}
  .quick-contact .btn svg{width:20px;height:20px;color:var(--brand)}
  .head-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;gap:6px}
  .head-actions .btn{justify-content:center;padding:0 8px}
  .head-actions .btn.win{grid-column:1/-1}
  .stepper{margin:0 -14px 16px;padding:0 14px 4px;scrollbar-width:none}
  .stepper::-webkit-scrollbar{display:none}
  .step{min-width:auto;height:38px}
  .detail{gap:14px}
  .next-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .next-form .inp:first-child{grid-column:1/-1}
  .composer-bar .when-in{flex:1}
  .composer-bar .when-in .inp{flex:1;width:auto;height:40px}
  .composer-bar .btn.primary{width:100%;height:44px;justify-content:center}
  .act-kind{overflow-x:auto;max-width:100%;scrollbar-width:none}
  .act-kind button{flex:none}
  .card-h{padding:14px 16px 0;flex-wrap:wrap}
  .card-b{padding:14px 16px 16px}
  .composer,.ev,.row{padding-left:16px;padding-right:16px}
  .thumbs.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* hộp thoại thành bảng trượt từ dưới lên */
  .modal-bg{align-items:end;padding:0}
  .modal,.modal.sm{width:100%;max-height:92vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom);animation:sheetUp .2s ease}
  .modal-h{padding:16px 18px 4px}
  .modal-h::before{content:"";position:absolute;left:50%;top:6px;width:38px;height:4px;border-radius:2px;background:var(--line-strong);transform:translateX(-50%)}
  .modal{position:relative}
  .modal-b{padding:12px 18px 4px}
  .modal-f{padding:12px 18px 16px;position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line)}
  .modal-f .btn{flex:1;justify-content:center}
  .modal-f .err{flex-basis:100%;order:-1}
  .modal-f{flex-wrap:wrap}

  /* bảng: ô đầu dính khi cuộn ngang */
  .t td:first-child,.t th:first-child{position:sticky;left:0;background:var(--surface);z-index:1;min-width:190px;box-shadow:1px 0 0 var(--line)}
  .t th:first-child{background:var(--sunken)}
  .t tbody tr:hover td:first-child{background:var(--brand-tint)}

  /* cài đặt */
  .srow{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px}
  .srow .scount{grid-column:2;grid-row:2}
  .srow .sacts{grid-column:3;grid-row:1/3}
  .install-steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
}
@keyframes sheetUp{from{transform:translateY(40px)}}
.install-steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.kbd{display:inline-block;padding:0 6px;border:1px solid var(--line-strong);border-radius:5px;background:var(--sunken);font-size:12px}

/* nút quay lại trên thanh trên (chỉ điện thoại) */
.back-btn{display:flex;align-items:center;gap:2px;height:38px;padding:0 10px 0 4px;margin-left:-6px;border-radius:9px;color:var(--brand);font-weight:600;font-size:15px;flex:none}
.back-btn svg{width:22px;height:22px}
.back-btn:active{background:var(--brand-soft)}
.topbar-title{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding-right:6px}
@media (max-width:900px){.topbar{gap:6px}}

/* 05/11: thanh chọn kỳ (9 nút) nở 472px đẩy cả trang rộng hơn iPhone → iOS thu nhỏ trang, kéo qua lại được */
.dash-filters>*{min-width:0;max-width:100%}
.period{width:100%}
.period-seg{max-width:100%}
/* chốt chặn chung: không phần tử nào được đẩy trang rộng hơn màn hình (clip giữ được position:sticky) */
html,body{overflow-x:clip}
.main{overflow-x:clip}
/* app trên điện thoại: không zoom (chụm 2 ngón / chạm 2 lần), vẫn cuộn dọc + vuốt ngang */
@media (max-width:900px){html{touch-action:pan-x pan-y}}