/* Ticket (チケット) - Redmine #40143 Màu cam riêng để không lẫn với nút 銀行振込 màu gold và point pill màu xám. */ :root { --tk: #f5850f; --tk-deep: #dd6f05; --tk-soft: #fff2e2; } /* Pill số vé trên header, đứng cạnh box_point_user */ .box_ticket_user { background: linear-gradient(150deg, #f5850f, #dd6f05); box-shadow: 0 2px 6px rgba(221, 111, 5, 0.4); border-radius: 5px; padding: 6px 14px; color: #fff; font-weight: 700; font-size: 18px; line-height: 1; white-space: nowrap; display: flex; align-items: center; gap: 6px; /* Pill vé đứng TRƯỚC pill point (khớp design point-charge.html) */ margin-right: 8px; } .box_ticket_user .tk-ic { font-size: 15px; } .box_ticket_user small { font-size: 12px; font-weight: 700; opacity: 0.9; } /* Ribbon progress "mua thêm bao nhiêu point nữa thì được vé". Nằm ngoài

và là con trực tiếp của (body là flex column), nên phải có flex: 0 0 auto để không bị co lại hoặc giãn ra. */ .tk-ribbon { background: #fff2e2; border-top: 1px solid rgba(221, 111, 5, 0.15); flex: 0 0 auto; width: 100%; } .tk-ribbon-in { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; } .tk-ribbon .tk-txt { font-size: 12.5px; font-weight: 700; color: #dd6f05; white-space: nowrap; } .tk-ribbon .tk-track { flex: 1; height: 8px; border-radius: 999px; background: #fff; overflow: hidden; min-width: 60px; } .tk-ribbon .tk-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f5850f, #dd6f05); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .tk-ribbon .tk-rem { font-size: 12px; font-weight: 800; color: #dd6f05; white-space: nowrap; } /* Badge số vé sẽ nhận được, dùng ở option giá màn mua point */ .tk-flag { position: absolute; right: 8px; top: 8px; background: #fff2e2; color: #dd6f05; font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 999px; line-height: 1; } /* Số vé nhận được trong bảng lịch sử */ .tk-gain { color: #dd6f05; font-weight: 800; } /* Số vé cần thiết của pack */ .tk-pack-need { color: #dd6f05; font-weight: 700; font-size: 13px; } @media (max-width: 430px) { .box_ticket_user { font-size: 15px; padding: 5px 10px; margin-right: 6px; } .tk-ribbon-in { padding: 6px 12px; gap: 8px; } .tk-ribbon .tk-txt, .tk-ribbon .tk-rem { font-size: 11px; } }