/* Minimal styles */
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; }
header, footer { background:#f6f6f6; }
.btn { padding:.6rem 1rem; border:1px solid #ccc; border-radius:.6rem; cursor:pointer; background:white; }
.btn.primary { background:#2563eb; color:white; border-color:#2563eb; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.card { padding:1rem; border:1px solid #eee; border-radius:.8rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.option { display:flex; gap:.6rem; align-items:center; padding:.4rem .6rem; border-radius:.5rem; }
.option:hover { background:#f7f7f7; }
.space-y-2 > * + * { margin-top:.5rem; }
.space-y-3 > * + * { margin-top:.75rem; }
.space-x-2 > * + * { margin-left:.5rem; }
.min-h-screen{min-height:100vh}
.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}
.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.shadow{box-shadow:0 1px 2px rgba(0,0,0,.08)}
.text-xl{font-size:1.25rem}.font-bold{font-weight:700}
.opacity-60{opacity:.6}
.chip {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    font-weight: 600;
    cursor: pointer;
    user-select: none; /* tránh bôi đen text khi tap */
    -webkit-tap-highlight-color: transparent; /* bỏ highlight xanh trên iOS */
}

.popover {
    display: inline-block;
    margin-left: .5rem;
    margin-top: .3rem;
    padding: .35rem .5rem;
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    max-width: 90%; /* mobile nhỏ thì bọc dòng */
    word-wrap: break-word;
}