/* HẠO NAM AI V2.1.17 — shared module UI.
   One component contract for header actions, search, repair navigation and repair width.
   Sync duplication is removed by source/runtime ownership, not CSS hiding. */
:root{
  --hnai-header-action-size:46px;
  --hnai-search-h:48px;
  --hnai-search-radius:16px;
  --hnai-search-line:rgba(255,255,255,.09);
  --hnai-search-bg:rgba(24,28,35,.72);
  --hnai-search-text:#f5f7fb;
  --hnai-search-placeholder:rgba(255,255,255,.38);
  --hnai-search-icon:rgba(255,255,255,.46);
}

/* Header rhythm shared by Máy Cũ / Sửa Chữa / Máy Mới. */
#maycu .module-kicker,#suachua .module-kicker,#quote .module-kicker{display:none}
#maycu .module-head,#suachua .module-head,#quote .module-head{min-height:0;margin-bottom:10px}
#maycu .module-home,#suachua .module-home,#quote .module-home{
  width:var(--hnai-header-action-size);height:var(--hnai-header-action-size);display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.11);border-radius:50%;background:rgba(28,31,39,.68);color:#d9e4ef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);
  transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
#maycu .module-home svg,#suachua .module-home svg,#quote .module-home svg{width:21px;height:21px}
#maycu .module-home{color:#74cfff;border-color:rgba(100,210,255,.22);background:rgba(22,44,58,.68)}
#suachua .module-home{color:#72e5ad;border-color:rgba(101,227,166,.22);background:rgba(18,49,39,.68)}
#quote .module-home{color:#d8a3ff;border-color:rgba(191,90,242,.22);background:rgba(49,31,67,.68)}
#maycu .module-home:active,#suachua .module-home:active,#quote .module-home:active{transform:scale(.92)}
#maycu .module-home.is-syncing svg,#suachua .module-home.is-syncing svg,#quote .module-home.is-syncing svg{animation:hnaiSyncSpin .8s linear infinite}
@keyframes hnaiSyncSpin{to{transform:rotate(360deg)}}
#quote .hn-machine-search-row{display:block}
.tab[data-screen="home"] i{display:grid;place-items:center}.tab[data-screen="home"] i svg{width:20px;height:20px;display:block}

/* SEARCH — same geometry and focus behavior on all three business modules. */
#maycu .maycu-tools{width:min(100%,var(--content-max));margin-bottom:12px}
#maycu .maycu-search,#quote>.search,#suachua .repair215-search{
  width:100%;max-width:100%;height:var(--hnai-search-h);min-height:var(--hnai-search-h);margin:0;padding:0 15px;
  display:flex;align-items:center;gap:9px;overflow:hidden;
  border:1px solid var(--hnai-search-line);border-radius:var(--hnai-search-radius);
  background:var(--hnai-search-bg);color:var(--hnai-search-icon);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:border-color .15s ease,background .15s ease;
}
#quote>.search{margin-bottom:14px}
#suachua .repair215-search{margin-bottom:10px}
#maycu .maycu-search>span,#quote>.search>span,#suachua .repair215-search>span{flex:0 0 auto;color:var(--hnai-search-icon);font-size:14px;line-height:1}
#maycu .maycu-search input,#quote>.search input,#suachua .repair215-search input{
  flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;box-shadow:none;
  -webkit-appearance:none;appearance:none;background:transparent;color:var(--hnai-search-text);
  font:inherit;font-size:16px;line-height:1.2;caret-color:#8fd5ff;border-radius:0;
}
#maycu .maycu-search input::placeholder,#quote>.search input::placeholder,#suachua .repair215-search input::placeholder{color:var(--hnai-search-placeholder);opacity:1}
#maycu .maycu-search:focus-within,#quote>.search:focus-within,#suachua .repair215-search:focus-within{border-color:var(--hnai-search-line);background:var(--hnai-search-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
#maycu .maycu-search input:focus,#maycu .maycu-search input:focus-visible,#quote>.search input:focus,#quote>.search input:focus-visible,#suachua .repair215-search input:focus,#suachua .repair215-search input:focus-visible{outline:0;outline-offset:0;box-shadow:none}

/* SỬA CHỮA frame — inherit app screen gutter, never add another side gutter. */
#suachua{overflow-x:hidden}
#suachua>.module-body{width:min(100%,var(--content-max));max-width:100%;padding-left:0;padding-right:0;padding-bottom:104px;box-sizing:border-box}
#suachua .repair215{width:100%;max-width:100%;min-width:0;margin:0;color:#f5f7fb}
#suachua .repair215-topbar,#suachua .repair215-view,#suachua .repair215-form,#suachua .repair215-ticket-list,#suachua .repair215-stats,#suachua .repair215-quick{width:100%;max-width:100%;min-width:0;margin-left:0;margin-right:0}
#suachua .repair215-form section,#suachua .repair215-ticket-card,#suachua .repair215-stats button,#suachua .repair215-quick button{max-width:100%;min-width:0;box-sizing:border-box}

/* Four primary repair tabs are a true equal-width segmented control. */
#suachua .repair215-topbar{display:block;position:sticky;top:0;z-index:30;margin:0 0 13px;padding:4px 0 9px;background:linear-gradient(180deg,rgba(5,18,17,.96) 58%,rgba(5,18,17,0));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#suachua .repair215-nav{width:100%;max-width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:4px;overflow:hidden;padding:4px;border:1px solid rgba(255,255,255,.075);border-radius:19px;background:rgba(34,34,38,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);-webkit-backdrop-filter:blur(20px) saturate(145%);backdrop-filter:blur(20px) saturate(145%)}
#suachua .repair215-nav-btn{width:100%;min-width:0;min-height:43px;margin:0;padding:0 5px;border:0;border-radius:999px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;color:#d6d9de;font-size:13.5px;font-weight:650;line-height:1;white-space:nowrap;text-overflow:ellipsis}
#suachua .repair215-nav-btn.on{color:#fff;background:linear-gradient(135deg,#18b978,#0e9f89);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 18px rgba(48,209,88,.13)}
#suachua .repair215-nav-btn:active{transform:scale(.97)}

/* Ticket status filters are secondary and can scroll horizontally. */
#suachua .repair215-chips{display:flex;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;padding:2px 1px 7px;margin-bottom:4px}
#suachua .repair215-chips::-webkit-scrollbar{display:none}
#suachua .repair215-chips button{flex:0 0 auto;width:auto;min-height:38px;padding:0 13px;border-radius:999px;white-space:nowrap;line-height:1;scroll-snap-align:center}

@media(max-width:767px){
  :root{--hnai-header-action-size:44px}
  #maycu .module-head,#suachua .module-head,#quote .module-head{margin-bottom:9px}
  #maycu .module-subtitle,#suachua .module-subtitle,#quote .module-subtitle{margin-top:5px}
  #suachua .module-body{padding-top:8px}
  #suachua .repair215-chips{margin-right:0;margin-bottom:7px;padding-bottom:6px}
  #suachua .repair215-chips button{font-size:12px}
  #suachua .repair215-customer-grid,#suachua .repair215-machine-grid,#suachua .repair215-estimate-top,#suachua .repair215-price-fields{width:100%;max-width:100%;min-width:0}
  #suachua .repair215-customer-grid>*,#suachua .repair215-machine-grid>*,#suachua .repair215-estimate-top>*{min-width:0;max-width:100%}
  #suachua .repair215-submit{left:auto;right:auto;width:100%;max-width:100%;box-sizing:border-box}
}
@media(max-width:430px){
  #suachua .repair215-nav-btn{font-size:13px;padding:0 4px}
  #suachua .repair215-customer-grid{grid-template-columns:1fr}
  #suachua .repair215-machine-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #suachua .repair215-machine-grid .field-model{grid-column:1/-1}
}