*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal}:root{--col-50: #f0faff;--col-100: #e0f5fe;--col-200: #bae8fd;--col-300: #7dd5fc;--col-400: #38bdf8;--col-500: #0ea6e9;--col-600: #028ac7;--col-700: #0370a1;--col-800: #075e85;--col-900: #0c506e;--col-background: #ffffff;--col-text: #0f131c;--font-roboto: "Roboto", sans-serif;--font-inter: "Inter", sans-serif;--font-poppins: "Poppins", sans-serif;--font-montserrat: "Montserrat", sans-serif}main{margin-top:20px;margin-bottom:20px}main #event-banner{padding:7px;width:90%;aspect-ratio:12/5;margin:auto}main #event-banner .event-banner{width:100%;border-radius:5px}main #about-event{padding:0 12px 12px}main #about-event .title-event{font-size:28px;font-weight:700;color:var(--col-text)}main #about-event .about-event-icon-container{padding:5px}main #about-event .about-event-icon{display:flex;align-items:center;margin:5px 0 10px}main #about-event .about-event-icon img{width:20px}main #about-event .about-event-icon p{font-size:13px;margin-left:5px;font-weight:500;color:#0f131cc9}.ticket-action{display:flex;justify-content:center;align-items:center;padding:16px;border:1px solid #ddd;border-radius:8px;width:100%;background-color:#fff;box-shadow:0 4px 6px #0000001a}form{align-items:center;gap:8px}#btn-fm{margin-top:24px;padding:8px 24px;color:#fff;border-radius:8px;border:none;cursor:pointer;font-size:16px;transition:background-color .3s ease}.btn{padding:8px 12px;border:none;border-radius:4px;cursor:pointer;font-size:16px}.btn-decrease,.btn-increase{background-color:#f0f0f0;color:#333}.btn-decrease:hover,.btn-increase:hover{background-color:#e0e0e0}.input-quantity{width:40px;text-align:center;font-size:16px;border:1px solid #ccc;border-radius:4px;padding:4px}.btn-buy{background-color:#007bff;color:#fff;font-weight:700}.btn-buy:hover{background-color:#0056b3}main #about-event .about-event hr{border:.5px solid rgba(0,0,0,.237)}main #about-event .event-promotor{padding:7px 5px}main #about-event .event-promotor p{font-size:12px;line-height:20px}main #about-event .event-promotor span{font-size:14px;font-weight:600;display:block}main #gap{width:100vw;height:7px;background-color:#f5f5f5}main #event-detail #event-detail-button{display:flex}main #event-detail-button .button-action{display:flex;justify-content:center;align-items:center;width:100%;height:40px}main #event-detail-button .button-action-active{background-color:var(--col-100)}main #event-detail-button .button-action p{font-weight:600;color:#0f131c87;font-size:14px}main #event-detail-button .button-action-active p{color:var(--col-700)}main #event-detail #event-detail-content{margin-top:7px}main #event-detail-content .ticket-event-item{width:100%;background-color:var(--col-50);display:flex;border-radius:10px;overflow:hidden;margin-bottom:20px;position:relative}main .ticket-event-item .ticket-status{background-color:#16c47f;width:45px;display:flex;justify-content:center;align-items:center}main .ticket-event-item .ticket-status p{transform:rotate(-90deg);min-width:-moz-max-content;min-width:max-content;font-weight:700;color:var(--col-background);letter-spacing:1px;font-size:14px}main .ticket-event-item hr{border:none;width:2px;height:100px;background:linear-gradient(to bottom,var(--col-background) 0 8px,transparent 8px 16px);background-size:100% 16px;background-repeat:repeat-y}main .ticket-event-item hr:before{content:"";display:block;width:15px;height:15px;background-color:var(--col-background);position:absolute;transform:translate(-50%) translateY(-50%);border-radius:50%}main .ticket-event-item hr:after{content:"";display:block;width:15px;height:15px;background-color:var(--col-background);position:absolute;transform:translate(-50%) translateY(50%);border-radius:50%;bottom:0}main .ticket-event-item .ticket-detail{width:100%;padding:10px}main .ticket-event-item .ticket-detail .ticket-name{font-size:16px;font-weight:600}main .ticket-event-item .ticket-detail .ticket-description{font-size:12px;font-weight:500;color:#0000008c;margin-top:8px}main .ticket-event-item .ticket-detail>div{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:5px 2px}.event-description{height:200px;overflow:auto}::-webkit-scrollbar{width:2px;height:2px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#aaa;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#777}*{scrollbar-width:thin;scrollbar-color:#aaa transparent}main .ticket-event-item .ticket-detail .ticket-price{font-size:30px;font-weight:700}main .ticket-event-item .ticket-detail .ticket-action{display:flex;justify-content:space-around;align-items:center;width:200px}main .ticket-event-item .ticket-detail .ticket-action p{font-size:14px}main .ticket-event-item .ticket-detail .ticket-action button{width:25px;height:25px;border-radius:5px;border:none;background-color:var(--col-500);color:var(--col-background)}main #order-detail{width:100vw;position:fixed;bottom:0;left:0;background-color:var(--col-background);box-shadow:0 0 16px -4px #00000040;z-index:80}main #order-detail .order-detail-container{width:100%;padding:15px}main .order-detail-container .order-detail-list{margin-bottom:10px;display:none}main .order-detail-container .order-detail-list>p{width:100%;text-align:center;font-size:14px;font-weight:600;padding-bottom:10px;border-bottom:.5px solid rgba(43,43,43,.199)}main .order-detail-container .order-detail-item{padding:10px 5px;display:flex;justify-content:space-between;align-items:center;border-bottom:.5px solid rgba(58,58,58,.219)}main .order-detail-container .order-detail-item img{width:30px}main .order-detail-container .order-detail-item div{width:calc(100% - 60px);padding-left:10px}main .order-detail-container .order-detail-item div>p:nth-child(1){font-size:14px;font-weight:600}main .order-detail-container .order-detail-item div>p:nth-child(2){font-size:13px;font-weight:500;margin-top:5px;color:#00000086}main .order-detail-container .order-detail-item>p{width:30px;font-size:14px;font-weight:600;color:#0000006f}main .order-detail-container>button{border:none;background:none;color:var(--col-500);margin:5px 0;font-weight:600}main .order-detail-container .order-action{display:flex;justify-content:space-between;align-items:end}main .order-detail-container .order-total p:nth-child(1){font-size:12px;font-weight:500;color:#00000097}main .order-detail-container .order-total p:nth-child(2){font-size:14px;font-weight:600;margin-top:3px;color:var(--col-text)}main .order-detail-container .order-action button{padding:10px 15px;border-radius:5px;border:.5px solid var(--col-700);background-color:var(--col-500);font-weight:600;color:var(--col-background)}.overlay{display:none}.overlay-active{display:block;width:100vw;height:100vh;background-color:#000000ac;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:fixed;top:0;left:0;z-index:10}@media (min-width: 570px){nav #navbar{width:560px}main{display:flex;flex-direction:column;align-items:center}main>div{width:570px}main #order-detail{width:570px;left:50%;transform:translate(-50%);border-radius:10px;bottom:20px}}@media (min-width: 800px){main>div{width:100%;max-width:1000px;display:grid;grid-template-columns:auto 350px;grid-template-rows:auto auto;grid-template-areas:banner about detail order;gap:20px}main #event-banner{padding:0}main #event-banner .event-banner{border-radius:10px}main #about-event{width:100%;height:100%;padding:15px;background-color:var(--col-background);border:.5px solid rgba(0,0,0,.187);border-radius:10px}main #gap{display:none}main #order-detail{transform:translate(0);border-radius:10px;bottom:0;left:0;width:100%;position:static;top:0;box-shadow:none;border:.5px solid rgba(0,0,0,.187)}main .order-detail-container .order-detail-list{margin-bottom:10px;display:block}}