/* ======================================================
   03-onboarding.css — Man chon tuoi & so thich
   ====================================================== */
/* ====== ONBOARDING (chọn tuổi → sở thích) ====== */
  .onb{position:fixed;inset:0;z-index:60;background:#E53935;
    background:radial-gradient(120% 80% at 50% 0%, #F4511E 0%, #D32F2F 70%);
    display:flex;flex-direction:column;align-items:center;
    padding:clamp(24px,5vh,56px) 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .onb.hide{display:none}
  .onb h2{color:#fff;font-weight:700;font-size:clamp(26px,4.6vw,40px);text-align:center;line-height:1.15}
  .onb .sub{color:rgba(255,255,255,.9);font-weight:500;font-size:clamp(15px,2.4vw,19px);
    text-align:center;margin:10px 0 30px;max-width:560px}
  /* thẻ chọn tuổi */
  .age-row{display:flex;gap:clamp(16px,3vw,30px);flex-wrap:wrap;justify-content:center;width:100%;max-width:980px}
  .age{flex:1 1 0;min-width:0;max-width:320px;background:#fff;border:0;cursor:pointer;font-family:inherit;
    border-radius:26px;padding:30px 24px 26px;text-align:center;color:#2A2438;
    box-shadow:0 14px 0 rgba(0,0,0,.12);transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
  @media(max-width:680px){.age{flex:1 1 240px}}
  .age:hover{transform:translateY(-8px)}
  .age:active{transform:scale(.95)}
  .age .ill{width:clamp(120px,18vw,170px);height:clamp(120px,18vw,170px);margin:0 auto 16px}
  .age .ill svg{width:100%;height:100%;display:block}
  .age h3{font-weight:700;font-size:clamp(22px,3vw,28px)}
  .age p{color:#8B8398;font-weight:600;font-size:16px;margin-top:6px}
  /* bước sở thích */
  .onb-step{width:100%;max-width:720px;display:none;flex-direction:column;align-items:center}
  .onb-step.on{display:flex}
  .like-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;margin-bottom:28px}
  @media(max-width:520px){.like-grid{grid-template-columns:1fr 1fr}}
  .like{border:0;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.16);
    color:#fff;border-radius:22px;padding:22px 10px;font-weight:700;font-size:17px;
    display:flex;flex-direction:column;align-items:center;gap:10px;min-height:118px;justify-content:center;
    border:3px solid transparent;transition:transform .12s, background .2s, border-color .2s}
  .like .e{font-size:38px}
  .like:active{transform:scale(.93)}
  .like[aria-pressed="true"]{background:#fff;color:#D32F2F;border-color:#FFD54F}
  .onb-cta{border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:20px;
    background:#FFB300;color:#3A2A00;padding:18px 44px;border-radius:22px;min-height:62px;
    box-shadow:0 6px 0 #FF8F00;transition:transform .12s}
  .onb-cta:active{transform:translateY(4px);box-shadow:0 2px 0 #FF8F00}
  .onb-cta:disabled{opacity:.5;box-shadow:0 6px 0 rgba(0,0,0,.2);cursor:not-allowed}
  .onb-skip{margin-top:16px;background:none;border:0;color:rgba(255,255,255,.85);
    font-family:inherit;font-weight:600;font-size:16px;cursor:pointer;text-decoration:underline}
  /* nhãn nhóm tuổi nhỏ trên header */
  .age-badge{font-size:13px;font-weight:700;background:rgba(255,255,255,.22);
    padding:4px 12px;border-radius:12px;margin-left:10px}