/* ============ TRANG "CẢM ƠN" (/cam-on) ============
   Mượn đúng ngôn ngữ thiết kế đã có của Déla (serif Playfair cho tiêu đề, gạch chân "mọc ra"
   dưới heading, tông đen-trắng tối giản, đường viền mảnh 1px) — để màn này nhìn liền mạch
   với cả web chứ không phải 1 màn "thành công" mặc định dán vào. Đây là trang khách nhìn
   NGAY SAU KHI trả tiền/đặt hàng — càng chỉn chu càng củng cố niềm tin đã mua đúng chỗ. */

.ty-page{max-width:560px; margin:0 auto; padding:76px 24px 100px; text-align:center;}

/* Huy hiệu tròn — trước là chữ "D" viết tay giả logo, giờ dùng ĐÚNG logo thật của Déla (ảnh
   images/logo-dela.png) thay vì chữ dựng lại, để đúng 100% nhận diện thương hiệu thật. */
.ty-monogram{
  width:76px; height:76px; margin:0 auto 22px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; background:var(--card);
  opacity:0; transform:scale(.85); animation:ty-badge-in .6s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.ty-monogram-img{width:60%; height:auto; display:block;}
html.dark .ty-monogram-img{filter:invert(1);}
@keyframes ty-badge-in{ to{ opacity:1; transform:scale(1); } }

.ty-eyebrow{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-soft); font-weight:500;
  opacity:0; animation:ty-fade-up .6s cubic-bezier(.16,1,.3,1) .22s forwards;
}
.ty-headline{font-size:32px; font-weight:500; font-style:italic; line-height:1.25; margin:10px 0 0;}
.ty-sub{
  font-size:13.5px; color:var(--ink-soft); line-height:1.7; max-width:400px; margin:0 auto 40px;
  opacity:0; animation:ty-fade-up .6s cubic-bezier(.16,1,.3,1) .42s forwards;
}
@keyframes ty-fade-up{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* "Hoá đơn" dạng vé — viền đứt + 2 vết "đục lỗ" 2 bên như cuống vé xé, gợi cảm giác 1 tấm
   biên lai thật thay vì 1 khối chữ khô khan. Chỉ hiện khi có dữ liệu đơn thật trong phiên. */
.ty-receipt{
  position:relative; text-align:left; border:1px solid var(--line); background:var(--bg-alt);
  padding:22px 24px; margin-bottom:44px;
  opacity:0; animation:ty-fade-up .6s cubic-bezier(.16,1,.3,1) .58s forwards;
}
.ty-receipt-row{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12.5px;}
.ty-receipt-head{margin-bottom:16px;}
.ty-receipt-punch{border-top:1px dashed var(--line); margin-bottom:16px; position:relative;}
.ty-receipt-punch::before, .ty-receipt-punch::after{
  content:''; position:absolute; top:-7px; width:14px; height:14px; border-radius:50%; background:var(--bg);
}
.ty-receipt-punch::before{left:-24px;}
.ty-receipt-punch::after{right:-24px;}
.ty-receipt-items{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;}
.ty-receipt-item{display:flex; justify-content:space-between; gap:14px; font-size:12.5px; line-height:1.5;}
.ty-receipt-item-name{color:var(--ink);}
.ty-receipt-item-meta{color:var(--ink-soft); font-size:11.5px;}
.ty-receipt-item-price{flex-shrink:0; white-space:nowrap;}
/* Dòng "Tạm tính"/"Phí vận chuyển" — nhạt hơn dòng sản phẩm, có viền chấm nhẹ phía trên để
   tách biệt rõ với danh sách sản phẩm, trước khi tới dòng Tổng cộng đậm ở dưới cùng. */
.ty-receipt-item-sum{color:var(--ink-soft); font-size:11.5px; padding-top:2px;}
.ty-receipt-item-sum:first-of-type{border-top:1px dashed var(--line); padding-top:10px; margin-top:2px;}
.ty-receipt-total{border-top:1px solid var(--line); padding-top:14px; font-family:'Playfair Display',serif; font-size:16px; font-weight:600;}

/* 3 bước tiếp theo — đánh số THẬT vì đúng là 1 quy trình tuần tự (xác nhận → đóng gói → giao
   hàng), không phải đánh số trang trí. Đường nối mảnh giữa các số gợi 1 dòng thời gian. */
.ty-steps{display:flex; flex-direction:column; gap:0; text-align:left; margin-bottom:40px;}
.ty-step{display:flex; gap:16px; padding-bottom:22px; position:relative;}
.ty-step:not(:last-child)::before{content:''; position:absolute; left:13px; top:30px; bottom:0; width:1px; background:var(--line);}
.ty-step-num{
  flex-shrink:0; width:27px; height:27px; border-radius:50%; border:1px solid var(--ink); background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600; z-index:1;
}
.ty-step-body h4{font-size:13px; font-weight:600; margin:2px 0 4px; text-transform:none; letter-spacing:0;}
.ty-step-body p{font-size:12px; color:var(--ink-soft); line-height:1.6; margin:0;}

.ty-actions{display:flex; flex-direction:column; gap:10px; max-width:320px; margin:0 auto;}
.ty-actions .btn{width:100%;}

@media(max-width:480px){
  .ty-page{padding:56px 20px 72px;}
  .ty-headline{font-size:26px;}
}