/* "Bạn đang muốn cải thiện điều gì?" finder: ten concern chips (5 + 5, one line each), then the old flat panel
   (headline, text and booking button on the left, service rows on the right).
   Phones (<=640px) keep the BIONPick dropdown from responsive.css. */
#find .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:clamp(36px,4.4vw,56px)}
@media(min-width:721px){#find .tabs{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:640px){#find .tabs{display:block}}
#find .tab{justify-content:center;text-align:center;min-height:48px;padding:0 8px;font-size:clamp(11.5px,1vw,13.5px);letter-spacing:0;line-height:1.2;white-space:nowrap}
/* portrait tablets: five columns are too narrow for the longest label, so only those labels wrap */
@media(min-width:721px) and (max-width:1023px){#find .tabs{gap:8px}#find .tab{white-space:normal;text-wrap:balance;min-height:52px;padding:6px 8px}}
/* landscape tablets: smaller type keeps every label on one line */
@media(min-width:1024px) and (max-width:1099px){#find .tabs{gap:8px}#find .tab{font-size:11px;padding:0 6px}}
#find .tab:active{transform:scale(.98)}

#find .panel{grid-template-columns:1fr 1.2fr;min-height:250px}
#find .fp-l{display:flex;flex-direction:column;align-items:flex-start}
#find .panel .fp-p{opacity:.68;text-align:left;hyphens:none;max-width:44ch;margin:0 0 26px}
#find .panel h3{max-width:20ch;text-wrap:balance}
#find .rec li{animation:fp-in .6s var(--ease) both;animation-delay:calc(var(--n,0)*70ms + 120ms)}
@keyframes fp-in{from{opacity:0;transform:translateY(8px)}}
@media(max-width:900px){#find .panel{grid-template-columns:1fr;min-height:0}#find .panel h3,#find .panel .fp-p{max-width:none}}