/* Min Pharmacy – Smart Search (voice + camera) */
:root{
  --mpss-teal:#20a4b3; --mpss-teal2:#2cc0c9; --mpss-blue:#1b5fd6; --mpss-blue2:#3d8bf0;
  --mpss-ink:#0f2a4a; --mpss-muted:#5f7390; --mpss-line:#e4ecf6; --mpss-soft:#f2f7fd;
  --mpss-red:#ef4a5a;
}

/* ---------- Buttons inside the search bar ---------- */
.mpss-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto;margin-right:4px;padding-right:6px;position:relative;align-self:center}
.mpss-actions::after{content:"";position:absolute;right:0;top:7px;bottom:7px;width:1px;background:rgba(255,255,255,.35)}
.mpss-btn{appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;cursor:pointer;
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:transparent;
  color:rgba(255,255,255,.92);transition:background .18s,color .18s,transform .12s;-webkit-tap-highlight-color:transparent}
.mpss-btn svg{width:19px;height:19px;display:block}
.mpss-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.mpss-btn:active{transform:scale(.92)}
.mpss-btn:focus-visible{outline:2px solid #fff;outline-offset:1px}
.mpss-btn.is-live{background:#fff;color:var(--mpss-red)}
.mpss-btn.is-live svg{animation:mpss-beat 1s ease-in-out infinite}
/* Search bar on a light background (fallback) */
.mpss-light .mpss-btn{color:var(--mpss-muted)}
.mpss-light .mpss-btn:hover{background:var(--mpss-soft);color:var(--mpss-blue)}
.mpss-light .mpss-actions::after{background:var(--mpss-line)}
/* Ô tìm kiếm chuyển nền trắng khi bấm vào (focus) hoặc đang mở gợi ý -> icon đổi sang xanh */
.header-search-form:focus-within .mpss-btn,
.header-search-form:has(.search-suggest.open) .mpss-btn{color:#145fc2}
.header-search-form:focus-within .mpss-btn:hover,
.header-search-form:has(.search-suggest.open) .mpss-btn:hover{background:#eaf2fd;color:#0f4fa8}
.header-search-form:focus-within .mpss-btn:focus-visible{outline-color:#145fc2}
.header-search-form:focus-within .mpss-actions::after,
.header-search-form:has(.search-suggest.open) .mpss-actions::after{background:#d9e4f2}
.header-search-form:focus-within .mpss-btn.is-live{background:#fdecee;color:var(--mpss-red)}

/* ---------- Modal ---------- */
.mpss-overlay{position:fixed;inset:0;z-index:2147483000;background:rgba(10,28,56,.48);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mpss-overlay.is-open{opacity:1;pointer-events:auto}
.mpss-sheet{position:relative;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border-radius:22px;box-shadow:0 24px 60px rgba(10,40,90,.28);transform:translateY(14px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1);color:var(--mpss-ink)}
.mpss-overlay.is-open .mpss-sheet{transform:none}
.mpss-head{flex:0 0 auto;background:linear-gradient(120deg,var(--mpss-blue),var(--mpss-blue2));color:#fff;padding:18px 52px 18px 20px;border-radius:22px 22px 0 0;position:relative;overflow:hidden}
.mpss-head::before{content:"";position:absolute;right:-40px;top:-60px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.09)}
.mpss-head h3{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:#fff}
.mpss-head p{margin:3px 0 0;font-size:13px;opacity:.85;color:#fff}
.mpss-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:10px;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:1}
.mpss-x:hover{background:rgba(255,255,255,.28)}
.mpss-x svg{width:18px;height:18px}
.mpss-body{padding:22px 16px 20px 20px;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
/* Thanh cuộn riêng của Min Pharmacy */
.mpss-body::-webkit-scrollbar,.header-search-form .search-suggest::-webkit-scrollbar{width:8px}
.mpss-body::-webkit-scrollbar-track,.header-search-form .search-suggest::-webkit-scrollbar-track{background:transparent;margin:10px 0}
.mpss-body::-webkit-scrollbar-thumb,.header-search-form .search-suggest::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2cc0c9,#20a4b3 55%,#1b5fd6);border-radius:8px;border:2px solid #fff;min-height:40px}
.mpss-body::-webkit-scrollbar-thumb:hover,.header-search-form .search-suggest::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#20a4b3,#1b5fd6)}
.mpss-body::-webkit-scrollbar-button,.header-search-form .search-suggest::-webkit-scrollbar-button{display:none;height:0}
/* Firefox (Chrome dùng ::-webkit-scrollbar ở trên để có màu gradient) */
@supports (-moz-appearance:none){.mpss-body,.header-search-form .search-suggest{scrollbar-width:thin;scrollbar-color:#2cc0c9 transparent}}

/* Voice */
.mpss-orb{position:relative;width:112px;height:112px;margin:6px auto 18px;display:grid;place-items:center}
.mpss-orb button{position:relative;z-index:2;width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--mpss-teal),var(--mpss-teal2));box-shadow:0 10px 26px rgba(32,164,179,.45);display:grid;place-items:center;transition:transform .15s}
.mpss-orb button:active{transform:scale(.94)}
.mpss-orb button svg{width:36px;height:36px}
.mpss-orb i{position:absolute;inset:14px;border-radius:50%;background:rgba(44,192,201,.28);z-index:1;opacity:0}
.mpss-orb.is-live i{animation:mpss-ring 1.8s ease-out infinite}
.mpss-orb.is-live i:nth-child(2){animation-delay:.6s}
.mpss-orb.is-live i:nth-child(3){animation-delay:1.2s}
.mpss-orb.is-live button{background:linear-gradient(135deg,#f0566a,#ff7b7b);box-shadow:0 10px 26px rgba(239,74,90,.4)}
.mpss-orb.is-busy button{background:linear-gradient(135deg,#8aa1bd,#a9bbd1);box-shadow:none}
.mpss-wave{display:flex;justify-content:center;gap:4px;height:22px;align-items:center;margin:-6px 0 10px;opacity:0;transition:opacity .2s}
.mpss-orb.is-live + .mpss-wave{opacity:1}
.mpss-wave span{width:4px;border-radius:3px;background:var(--mpss-teal);height:6px;animation:mpss-bar 1s ease-in-out infinite}
.mpss-wave span:nth-child(2){animation-delay:.12s}.mpss-wave span:nth-child(3){animation-delay:.24s}
.mpss-wave span:nth-child(4){animation-delay:.36s}.mpss-wave span:nth-child(5){animation-delay:.48s}
.mpss-status{text-align:center;font-size:14px;color:var(--mpss-muted);min-height:20px}
.mpss-transcript{text-align:center;font-size:20px;font-weight:600;line-height:1.35;min-height:30px;margin:8px 0 4px;color:var(--mpss-ink);word-break:break-word}
.mpss-transcript .interim{color:#9aabc2}
.mpss-fix{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--mpss-soft);border:1px solid var(--mpss-line);font-size:14px;display:none}
.mpss-fix.show{display:block}
.mpss-fix b{color:var(--mpss-blue)}
.mpss-fix mark{background:rgba(44,192,201,.18);color:#0b7482;padding:0 4px;border-radius:5px;font-weight:700}
.mpss-fix a{color:var(--mpss-muted);font-size:13px;text-decoration:underline;cursor:pointer;display:inline-block;margin-top:4px}
.mpss-tips{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mpss-tips span{font-size:12.5px;padding:6px 11px;border-radius:999px;background:var(--mpss-soft);color:var(--mpss-muted);border:1px solid var(--mpss-line)}
.mpss-tips-label{width:100%;text-align:center;font-size:12px;color:#8a9bb3;margin-bottom:2px}
.mpss-row{display:flex;gap:10px;margin-top:18px}
.mpss-b{flex:1;height:44px;border-radius:12px;border:1px solid var(--mpss-line);background:#fff;color:var(--mpss-ink);font:600 14px/1 inherit;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.mpss-b:hover{border-color:#c9d8ec;background:var(--mpss-soft)}
.mpss-b.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--mpss-teal),var(--mpss-teal2));box-shadow:0 6px 16px rgba(32,164,179,.3)}
.mpss-b.primary:hover{filter:brightness(1.05)}
.mpss-b svg{width:18px;height:18px}
.mpss-b[hidden]{display:none}

/* Camera */
.mpss-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mpss-card{border:1.5px dashed #c6d6ea;border-radius:16px;padding:18px 10px;text-align:center;cursor:pointer;background:var(--mpss-soft);transition:border-color .18s,background .18s,transform .12s;color:var(--mpss-ink);font:inherit}
.mpss-card:hover{border-color:var(--mpss-teal);background:#ecfafb}
.mpss-card:active{transform:scale(.98)}
.mpss-card .ic{width:48px;height:48px;border-radius:14px;margin:0 auto 10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--mpss-teal),var(--mpss-teal2))}
.mpss-card:nth-child(2) .ic{background:linear-gradient(135deg,var(--mpss-blue),var(--mpss-blue2))}
.mpss-card .ic svg{width:24px;height:24px}
.mpss-card b{display:block;font-size:14px}
.mpss-card small{display:block;font-size:12px;color:var(--mpss-muted);margin-top:3px}
.mpss-hint{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--mpss-muted);line-height:1.45}
.mpss-hint svg{flex:0 0 18px;width:18px;height:18px;color:var(--mpss-teal);margin-top:1px}
.mpss-preview{position:relative;border-radius:16px;overflow:hidden;background:#0d1b30;aspect-ratio:4/3;display:none}
.mpss-preview.show{display:block}
.mpss-preview img{width:100%;height:100%;object-fit:contain;display:block}
.mpss-preview .scan{position:absolute;left:0;right:0;height:3px;top:0;background:linear-gradient(90deg,transparent,var(--mpss-teal2),transparent);box-shadow:0 0 18px 4px rgba(44,192,201,.55);animation:mpss-scan 1.8s ease-in-out infinite alternate}
.mpss-preview.done .scan{display:none}
.mpss-preview.done{aspect-ratio:auto;height:150px}
.mpss-progress{height:6px;border-radius:6px;background:var(--mpss-line);overflow:hidden;margin:14px 0 8px;display:none}
.mpss-progress.show{display:block}
.mpss-progress div{height:100%;width:0;background:linear-gradient(90deg,var(--mpss-teal),var(--mpss-teal2));transition:width .3s}
.mpss-results{margin-top:14px;display:none}
.mpss-results.show{display:block}
.mpss-results h4{margin:0 0 10px;font-size:14px;color:var(--mpss-ink)}
.mpss-list{display:flex;flex-direction:column;gap:8px}
.mpss-item{display:flex;gap:12px;align-items:center;padding:8px;border-radius:14px;border:1px solid var(--mpss-line);text-decoration:none;color:var(--mpss-ink);transition:border-color .15s,background .15s}
.mpss-item:hover{border-color:var(--mpss-teal);background:#f5fcfd}
.mpss-item img{width:56px;height:56px;object-fit:contain;border-radius:10px;background:#fff;flex:0 0 56px}
.mpss-item div{min-width:0}
.mpss-item b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.35}
.mpss-item span{display:block;font-size:13px;color:var(--mpss-red);font-weight:700;margin-top:3px}
.mpss-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#0b7482;background:rgba(44,192,201,.14);padding:4px 10px;border-radius:999px;margin-bottom:10px}
.mpss-q{display:flex;gap:8px;margin-top:12px}
.mpss-q input{flex:1;min-width:0;height:44px;border:1px solid var(--mpss-line);border-radius:12px;padding:0 12px;font:500 14px inherit;font-family:inherit;color:var(--mpss-ink);background:#fff}
.mpss-q input:focus{outline:2px solid rgba(44,192,201,.45);border-color:var(--mpss-teal)}
.mpss-q .mpss-b{flex:0 0 auto;padding:0 16px}
.mpss-hidden{display:none!important}

@media (max-width:600px){
  .mpss-overlay{align-items:flex-end}
  .mpss-sheet{width:100%;max-height:92vh;max-height:92dvh;border-radius:22px 22px 0 0;transform:translateY(40px)}
  .mpss-head{border-radius:22px 22px 0 0}
  .mpss-head::after{content:"";position:absolute;left:50%;top:6px;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:rgba(255,255,255,.45)}
  .mpss-body{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .mpss-btn{width:30px;height:30px}
  .mpss-btn svg{width:18px;height:18px}
}
@keyframes mpss-ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.75);opacity:0}}
@keyframes mpss-bar{0%,100%{height:5px}50%{height:22px}}
@keyframes mpss-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes mpss-scan{from{top:0}to{top:calc(100% - 3px)}}
@media (prefers-reduced-motion:reduce){.mpss-overlay *{animation:none!important;transition:none!important}}