.tracking-hero{min-height:650px;display:grid;grid-template-columns:1fr 480px;gap:70px;align-items:center;padding:80px max(7vw,30px);background:linear-gradient(125deg,#f5f1e7 0 55%,#e6efe9 55%)}.tracking-copy h1{font-size:clamp(48px,6vw,78px);max-width:600px}.tracking-copy>p{max-width:560px;color:#67726c;font-size:17px;line-height:1.7}.tracking-benefits{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.tracking-benefits span{padding:9px 12px;border-radius:20px;background:#fff;color:var(--green);font-size:11px;font-weight:700}.tracking-form{display:grid;gap:17px;padding:36px;border-radius:20px;background:#fff;box-shadow:0 25px 60px #203b2e1b}.tracking-form h2{text-align:center}.tracking-form>small{text-align:center;color:#8b938f;font-size:10px}.tracking-icon{display:grid;place-items:center;width:64px;height:64px;margin:auto;border-radius:20px;background:linear-gradient(145deg,var(--green),#2a8564);color:#fff;font-size:30px}.tracking-result{max-width:1100px;margin:auto;padding:70px 24px}.tracking-result-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.tracking-result-head h1{font-size:48px}.order-state{padding:10px 15px;border-radius:20px;background:#e7f5ef;color:#19815e;font-size:12px;font-weight:800}.state-cancelled{background:#ffe7e8;color:#c64e58}.timeline{display:grid;grid-template-columns:repeat(4,1fr);margin:45px 0}.timeline-step{position:relative;display:flex;align-items:center;gap:11px;color:#a3aaa6}.timeline-step:after{content:'';position:absolute;z-index:-1;left:32px;right:-10px;top:17px;height:3px;background:#e1e5e2}.timeline-step:last-child:after{display:none}.timeline-step>span{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;background:#e4e7e5;font-weight:800}.timeline-step strong,.timeline-step small{display:block}.timeline-step small{font-size:9px}.timeline-step.done{color:var(--green)}.timeline-step.done>span{background:var(--green);color:#fff}.timeline-step.done:after{background:var(--green)}.tracking-columns{display:grid;grid-template-columns:1.4fr .6fr;gap:22px}.tracking-card{padding:25px;border:1px solid #e3e7e4;border-radius:18px;background:#fff;box-shadow:0 8px 30px #253a300c}.tracking-item{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid #edf0ee}.tracking-item-image{display:grid;place-items:center;width:50px;height:50px;border-radius:12px;background:#f0eee5;overflow:hidden}.tracking-item-image img{width:100%;height:100%;object-fit:cover}.tracking-item strong,.tracking-item small{display:block}.tracking-item small{color:#8b928e;font-size:10px}.tracking-total,.detail-row{display:flex;justify-content:space-between}.tracking-total{padding-top:20px;font-size:20px}.detail-row{padding:10px 0;border-bottom:1px solid #edf0ee}.payment-paid{color:#19815e}.payment-pending{color:#d58a21}.payment-failed{color:#ca4d58}.cancelled-message{padding:20px;margin:30px 0;border-left:5px solid #d85661;background:#fff0f1}.tracking-help{margin-top:22px;padding:18px;text-align:center;border-radius:13px;background:#eef5f1}.receipt-reminder{max-width:480px;margin:25px auto;padding:17px;border-radius:13px;background:#f1f5f2}.success-actions{display:flex;justify-content:center;align-items:center;gap:20px}@media(max-width:850px){.tracking-hero,.tracking-columns{grid-template-columns:1fr}.timeline{grid-template-columns:1fr;gap:13px}.timeline-step:after{left:17px;right:auto;top:33px;width:3px;height:30px}.tracking-result-head{flex-direction:column}}@media(max-width:520px){.tracking-hero{padding:55px 20px}.tracking-form{padding:24px}.success-actions{flex-direction:column}}