/* ======================================================================
   Giao diện "dễ thương" theo logo Tụm5tụm7 cho ChiaNè, Carpool, Sự kiện (body.cute; trang game có cute riêng trong game.css)
   ====================================================================== */
body.cute {
  --teal: #1e82d6; --teal-deep: #0f5fa8; --teal-soft: #e3f1ff; --gem: #3fa022;
  --cu-blue: #1e82d6; --cu-blue-d: #0f5fa8; --cu-green: #3fa022; --cu-green-d: #2c7a16; --cu-pink: #f0558c; --cu-pink-d: #c23468;
  --cu-purple: #7a55c4; --cu-purple-d: #583b98; --cu-orange: #f9a11b; --cu-orange-d: #c97a08; --cu-navy: #0b2f85;
  --khaki-soft: #fff0d2; --paper: #fff; --line: #cfe3f6; --cloud: #fff8ec; --cloud-2: #f3ead9;
  --shadow: 0 5px 0 #cfe3f6; --shadow-lift: 0 9px 0 #b7d4f0;
  background: radial-gradient(520px 420px at 6% 6%, rgba(30,130,214,.15), transparent 70%), radial-gradient(480px 400px at 96% 12%, rgba(240,85,140,.14), transparent 70%),
    radial-gradient(560px 460px at 94% 94%, rgba(63,160,34,.13), transparent 70%), radial-gradient(520px 420px at 4% 92%, rgba(249,161,27,.17), transparent 70%), #fff8ec;
  background-attachment: fixed;
}
body.cute::before { content: ""; position: fixed; inset: -260px; z-index: -1; pointer-events: none; opacity: .38; background: url('../img/confetti.svg') 0 0 / 260px 260px; animation: cuDrift 90s linear infinite; }
@keyframes cuDrift { to { transform: translate(260px, 260px); } }
@media (prefers-reduced-motion: reduce) { body.cute::before { animation: none; } }
body.cute .backdrop-art { display: none; }
body.cute .topbar { background: rgba(255,248,236,.9); border-bottom: 2px solid #f1e3c8; }
body.cute main, body.cute .container { position: relative; z-index: 1; }

body.cute h1, body.cute .greet, body.cute .page-head h1 { font-family: 'Baloo 2', 'Be Vietnam Pro', sans-serif; font-weight: 800; color: var(--cu-navy); letter-spacing: 0; }
body.cute h2.card-title, body.cute .section-head h2 { font-family: 'Baloo 2', 'Be Vietnam Pro', sans-serif; font-weight: 800; color: var(--cu-navy); }

/* Thẻ kiểu nhãn dán */
body.cute .card, body.cute .panel { border: 3px solid #cfe3f6; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 #cfe3f6; }
body.cute .exp { border: 2px solid #cfe3f6; border-radius: 20px; box-shadow: 0 3px 0 #cfe3f6; background: #fff; }
body.cute .exp-icon, body.cute .ev-ico, body.cute .ev-badge { background: #fff; border: 2.5px solid var(--cu-orange); box-shadow: 0 3px 0 var(--cu-orange-d); border-radius: 50%; }
body.cute .count-pill { background: var(--cu-orange); color: #fff; }
body.cute .notice, body.cute .guest-banner { border: 2px dashed var(--cu-orange); background: #fff7e3; }
body.cute .notif-item { border: 2.5px solid #cfe3f6; border-radius: 20px; box-shadow: 0 3px 0 #cfe3f6; }

/* Ô nhóm / sự kiện: mỗi ô một màu logo */
body.cute .group-card, body.cute .ev-item { --c: var(--cu-blue); --d: var(--cu-blue-d); --t: #e8f4ff; position: relative; overflow: hidden; background: var(--t); border: 3px solid var(--c); border-radius: 26px; box-shadow: 0 6px 0 var(--d); transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s; }
body.cute .group-grid > :nth-child(5n+2), body.cute .ev-list > :nth-child(5n+2), body.cute .ev-item:nth-of-type(5n+2) { --c: var(--cu-green); --d: var(--cu-green-d); --t: #ecf8e6; }
body.cute .group-grid > :nth-child(5n+3), body.cute .ev-list > :nth-child(5n+3), body.cute .ev-item:nth-of-type(5n+3) { --c: var(--cu-pink); --d: var(--cu-pink-d); --t: #ffeaf2; }
body.cute .group-grid > :nth-child(5n+4), body.cute .ev-list > :nth-child(5n+4), body.cute .ev-item:nth-of-type(5n+4) { --c: var(--cu-purple); --d: var(--cu-purple-d); --t: #f1ebff; }
body.cute .group-grid > :nth-child(5n+5), body.cute .ev-list > :nth-child(5n+5), body.cute .ev-item:nth-of-type(5n+5) { --c: var(--cu-orange); --d: var(--cu-orange-d); --t: #fff3dc; }
body.cute .group-card::before, body.cute .ev-item::before { content: ""; position: absolute; right: -26px; top: -26px; width: 92px; height: 92px; border-radius: 50%; background: var(--c); opacity: .15; pointer-events: none; }
body.cute .group-card:hover, body.cute .ev-item:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 10px 0 var(--d); }
body.cute .group-card .group-icon, body.cute .group-card .gicon, body.cute .ev-item .ev-ico { border-color: var(--c); box-shadow: 0 3px 0 var(--d); }

/* Nút */
body.cute .btn { font-weight: 700; }
body.cute .btn-primary { --_bg: var(--cu-blue); --_bd: var(--cu-blue-d); box-shadow: 0 4px 0 var(--cu-blue-d); transition: transform .12s, box-shadow .12s, background-color .15s; }
body.cute .btn-primary:hover { --_bg: #2a8fe3; --_bd: var(--cu-blue-d); }
body.cute .btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cu-blue-d); }
body.cute .btn-ghost { --_bg: #fff; --_bd: #cfe3f6; border-width: 2px; }
body.cute .back-link { padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; border: 2px solid #cfe3f6; color: var(--cu-blue-d); text-decoration: none; }
body.cute .seg { background: #eaf3fc; border: 2px solid #cfe3f6; }
body.cute input[type=text], body.cute input[type=email], body.cute input[type=password], body.cute input[type=number], body.cute input[type=tel], body.cute input[type=date], body.cute input[type=time], body.cute input[type=datetime-local], body.cute select, body.cute textarea { border-width: 2px; border-color: #cfe3f6; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { body.cute .group-card, body.cute .ev-item, body.cute .btn-primary { transition: none; } }

/* ---------- Carpool (.cp2) ---------- */
.cute .cp2 { --pri: #1e82d6; --pri-d: #0f5fa8; --tint: #e3f1ff; --card: #fff; --line: #cfe3f6; --bg: transparent; }
.cute .cp2 .card { border: 3px solid #cfe3f6; border-radius: 26px; box-shadow: 0 6px 0 #cfe3f6; }
.cute .cp2 .btn { box-shadow: 0 4px 0 var(--pri-d); font-weight: 700; transition: transform .12s, box-shadow .12s; }
.cute .cp2 .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pri-d); }
.cute .cp2 .btn.sec { background: #fff; border: 2px solid #cfe3f6; box-shadow: 0 3px 0 #cfe3f6; }
.cute .cp2 .btn.danger, .cute .cp2 .btn.sm { box-shadow: none; }
.cute .cp2 input[type=text], .cute .cp2 input[type=email], .cute .cp2 input[type=password], .cute .cp2 input[type=tel], .cute .cp2 input[type=number], .cute .cp2 select, .cute .cp2 textarea { border: 2px solid #cfe3f6; border-radius: 16px; }
.cute .cp2 .gcard { --c: var(--cu-blue); --d: var(--cu-blue-d); --t: #e8f4ff; position: relative; overflow: hidden; background: var(--t); border: 3px solid var(--c); border-radius: 26px; box-shadow: 0 6px 0 var(--d); transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s; }
.cute .cp2 .ggrid > :nth-child(5n+2) { --c: var(--cu-green); --d: var(--cu-green-d); --t: #ecf8e6; }
.cute .cp2 .ggrid > :nth-child(5n+3) { --c: var(--cu-pink); --d: var(--cu-pink-d); --t: #ffeaf2; }
.cute .cp2 .ggrid > :nth-child(5n+4) { --c: var(--cu-purple); --d: var(--cu-purple-d); --t: #f1ebff; }
.cute .cp2 .ggrid > :nth-child(5n+5) { --c: var(--cu-orange); --d: var(--cu-orange-d); --t: #fff3dc; }
.cute .cp2 .gcard::before { content: ""; position: absolute; right: -26px; top: -26px; width: 92px; height: 92px; border-radius: 50%; background: var(--c); opacity: .15; pointer-events: none; }
.cute .cp2 .gcard:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 10px 0 var(--d); }
.cute .cp2 .gi { background: #fff; border: 2.5px solid var(--c, var(--cu-blue)); border-radius: 50%; box-shadow: 0 3px 0 var(--d, var(--cu-blue-d)); }
.cute .cp2 .gb strong { font-family: 'Baloo 2', 'Be Vietnam Pro', sans-serif; font-size: 1.1rem; color: var(--d); }
.cute .cp2 .chip { background: var(--c, var(--cu-blue)); color: #fff; }
.cute .cp2 .count { background: var(--cu-orange); color: #fff; }
.cute .cp2 .radios label, .cute .cp2 .gopt, .cute .cp2 .fitbox { border: 2.5px solid #cfe3f6; border-radius: 18px; box-shadow: 0 3px 0 #cfe3f6; }
.cute .cp2 .radios label:has(input:checked), .cute .cp2 .gopt:has(input:checked), .cute .cp2 .fitbox:has(input:checked) { border-color: var(--cu-green); background: #ecf8e6; box-shadow: 0 3px 0 var(--cu-green-d); color: var(--cu-green-d); }
.cute .cp2 .car { border-radius: 20px; border: 2.5px solid #cfe3f6; border-left: 8px solid var(--pri); box-shadow: 0 3px 0 #cfe3f6; }
.cute .cp2 .cpm-box { border: 3px solid #cfe3f6; border-radius: 26px; }

/* ---------- Trang tham gia carpool: 4 bước rõ ràng ---------- */
.cp2 .jform { display: grid; gap: 16px; }
.cp2 .jhero { text-align: center; padding: 6px 4px 0; }
.cp2 .jhero h1 { font-family: 'Baloo 2', 'Be Vietnam Pro', sans-serif; font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.1; margin: 0 0 6px; color: #0b2f85; }
.cp2 .jhero .hint { font-size: .95rem; margin: 0; }
.cp2 .jcar { font-size: 2.6rem; line-height: 1; display: inline-block; animation: jDrive 2.8s ease-in-out infinite; }
@keyframes jDrive { 0%, 100% { transform: translateX(-26px) rotate(-2deg); } 50% { transform: translateX(26px) rotate(2deg); } }
.cp2 .jsec { --c: #1e82d6; --d: #0f5fa8; --t: #e8f4ff; position: relative; overflow: hidden; background: var(--t); border: 3px solid var(--c); border-radius: 28px; box-shadow: 0 6px 0 var(--d); padding: 16px 16px 18px; }
.cp2 .jsec.s2 { --c: #3fa022; --d: #2c7a16; --t: #ecf8e6; }
.cp2 .jsec.s3 { --c: #f0558c; --d: #c23468; --t: #ffeaf2; }
.cp2 .jsec.s4 { --c: #7a55c4; --d: #583b98; --t: #f1ebff; }
.cp2 .jh { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cp2 .jh > div { flex: 1; min-width: 0; }
.cp2 .jh h2 { margin: 0; font-family: 'Baloo 2', 'Be Vietnam Pro', sans-serif; font-size: 1.3rem; line-height: 1.15; color: var(--d); }
.cp2 .jh p { margin: 0; font-size: .85rem; color: #5b524b; }
.cp2 .jn { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.2rem; box-shadow: 0 3px 0 var(--d); }
.cp2 .jem { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2.5px solid var(--c); display: grid; place-items: center; font-size: 1.5rem; transform: rotate(8deg); }
.cp2 .jsec input[type=text], .cp2 .jsec input[type=number], .cp2 .jsec textarea { border-color: var(--c); background: #fff; }
.cp2 .jsec input:focus, .cp2 .jsec textarea:focus { outline: 3px solid color-mix(in srgb, var(--c) 35%, transparent); outline-offset: 0; }
.cp2 .jsec .radios label { background: #fff; }
.cp2 .jsec .radios label:has(input:checked) { border-color: var(--d); background: var(--c); color: #fff; box-shadow: 0 3px 0 var(--d); }
.cp2 .jsec .fitbox, .cp2 .jsec .gopt { background: #fff; }
.cp2 #go { background: #1e82d6; font-size: 1.1rem; min-height: 54px; }
.cp2 #done h1, .cp2 #sorry h2 { font-family: 'Baloo 2', sans-serif; }
@media (prefers-reduced-motion: reduce) { .cp2 .jcar { animation: none; } }
body.cute .exp.exp-pending { border-color: #e5483d; box-shadow: 0 3px 0 #e5483d; }
body.cute .exp.exp-refunded { border-color: #f5a623; box-shadow: 0 3px 0 #f5a623; }