/* Style "vé" DÙNG CHUNG: trang "Vé của tôi" + màn "đã đặt" trong event/shop detail.
   KHÔNG có rule * hay body, biến được scope vào .ticket/.booked-wrap/.tickets
   → nhúng vào trang khác (event-detail/shop-detail) không đè layout/nền/phông. */
.ticket, .booked-wrap, .tickets {
  --cream:#f1ede4; --maroon:#8d2d2b; --maroon-d:#6f211f;
  --gold-d:#d98b1f; --muted:#7a6f63;
  --club:#d14828; --ws:#8d2d2b; --art:#b8862f;
}

.tickets{ margin-top:22px; display:flex; flex-direction:column; gap:22px; }

/* ===== VÉ (kiểu trang 404) ===== */
.ticket{ position:relative; display:flex; background:#fff; border-radius:18px; box-shadow:0 16px 40px rgba(111,33,31,.16); width:100%; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.ticket:hover{ transform:translateY(-2px); box-shadow:0 22px 50px rgba(111,33,31,.22); }
.ticket::before, .ticket::after{ content:''; position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--cream); z-index:2; }
.ticket::before{ left:-14px; }
.ticket::after{ right:118px; }

.t-main{ flex:1; padding:24px 26px; min-width:0; }
.t-eye{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-d); font-weight:700; }
.tk-title{ font-family:'League Gothic',sans-serif; font-weight:400; font-size:34px; line-height:1; color:var(--maroon); margin:6px 0 8px; overflow-wrap:anywhere; }
.tk-meta{ color:var(--muted); font-size:14px; line-height:1.6; }
.tk-meta b{ color:#4a4036; font-weight:600; }
.tk-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }

.chip{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.chip.qty{ background:#f2efe7; color:#6b5f4f; }
.chip.paid{ background:#e7f6ec; color:#1a7f37; }
.chip.unpaid{ background:#fff4e5; color:#c47d1a; }
.chip.free{ background:#eef0f2; color:#6b7280; }
.chip.arrived{ background:#eaf1fb; color:#2b6cb0; }
.chip.gift{ background:#fdf0e6; color:#b83d20; }

.t-stub{ width:118px; flex:none; background:var(--maroon); color:#fff; border-left:3px dashed #e3dccd; border-radius:0 18px 18px 0;
         display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px 0; }
.t-stub .act{ writing-mode:vertical-rl; transform:rotate(180deg); font-weight:700; letter-spacing:.22em; font-size:14px; text-transform:uppercase; }
.t-stub .code{ font-size:10.5px; letter-spacing:.12em; opacity:.85; font-weight:600; }
.ticket.club .t-stub{ background:var(--club); }
.ticket.ws   .t-stub{ background:var(--ws); }
.ticket.art  .t-stub{ background:var(--art); }
.ticket.past{ opacity:.72; }

/* Màn "đã đặt thành công" (event-detail / shop-detail) */
.booked-wrap{ text-align:center; }
.booked-check{ width:54px; height:54px; margin:0 auto 8px; border-radius:50%; background:#1f9d57; color:#fff; font-size:30px; line-height:54px; font-weight:700; }
.booked-title{ font-family:'League Gothic',sans-serif; font-size:30px; color:var(--maroon); letter-spacing:.5px; }
.booked-otp{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:8px 0 14px; color:var(--muted); font-size:13px; }
.booked-otp b{ font-family:'League Gothic',sans-serif; font-size:40px; letter-spacing:.2em; color:var(--maroon); line-height:1; }
.booked-note{ color:var(--muted); font-size:13px; margin-top:12px; line-height:1.5; }
.booked-wrap .ticket{ text-align:left; margin-top:4px; cursor:default; box-shadow:0 10px 26px rgba(111,33,31,.14); }
.booked-wrap .ticket::before, .booked-wrap .ticket::after{ background:#fff; }

/* Mobile: GIỮ vé NẰM NGANG như desktop (cuống đỏ vẫn ở bên phải, chữ dọc),
   chỉ thu nhỏ chữ + thu hẹp cuống cho vừa màn hình. */
@media (max-width:560px){
  .t-main{ padding:17px 15px; }
  .t-eye{ font-size:10px; letter-spacing:.16em; }
  .tk-title{ font-size:27px; }
  .tk-meta{ font-size:12.5px; }
  .tk-foot{ gap:6px; margin-top:11px; }
  .chip{ font-size:11px; padding:3px 9px; }
  .t-stub{ width:84px; gap:6px; }
  .t-stub .act{ font-size:12px; letter-spacing:.14em; }
  .t-stub .code{ font-size:9px; letter-spacing:.06em; }
  .ticket::after{ right:84px; }
}