:root{
  --otakul-orange:#ee4d2d;
  --otakul-bg:#f5f5f5;
  --otakul-text:#222;
  --otakul-muted:#6c757d;
}

html, body{
  font-size:16px;
  background:var(--otakul-bg);
}

.checkout-app{
  color:var(--otakul-text);
}

.checkout-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:8px;
}

.checkout-title{
  font-weight:600;
  font-size:1.2rem
}

.btn-otakul{
  --bs-btn-bg: var(--otakul-orange);
  --bs-btn-border-color: var(--otakul-orange);
  --bs-btn-hover-bg: #d93f23;
  --bs-btn-hover-border-color: #d93f23;
  --bs-btn-active-bg: #c93a21;
  --bs-btn-active-border-color: #c93a21;
  --bs-btn-color: #fff;
}

.section-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  padding:18px 12px;
}

.section-label{
  font-weight:600;
}

.section-action{
  color:var(--otakul-muted);
  text-decoration:none;
  font-size: 0.75rem;
}
.icon-right {
  position: relative;
  gap: 10px; /* Khoảng cách giữa nội dung và mũi tên */
}
.section-card.icon-right { 
  padding-right: 24px;
}
.icon-right::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url('/assets/plugin/checkout/chevron-right.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  opacity: 0.15; /* Làm mờ 50% */
  pointer-events: none;
}
 
.chevron-icon{
  width:20px;
  height:20px;
  background: url('/assets/plugin/checkout/chevron-right.svg') no-repeat center/20px 20px;
  opacity:.75;
  flex:0 0 auto;
}

.payment-logo{
  width:16px;
  height:16px;
  object-fit:contain;
  border-radius:4px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.list-row{
  padding:10px 0;
  border-top:1px solid rgba(0,0,0,.06);
}
.list-row:first-child{
  border-top:0;
  padding-top:0;
}
.list-row:last-child{
  padding-bottom:0;
}

.address-pill{
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  padding:10px;
}

.address-name{
  font-weight:600;
  font-size:0.9rem;
}

.address-detail{
  color:var(--otakul-muted);
  line-height:1.4;
    font-size:0.75rem;
}

.cart-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.cart-thumb{
  width:54px;
  height:54px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.cart-name{
  font-size:.85rem;
  font-weight:500;
  line-height:1.35;
  margin-bottom:4px;
}
.cart-sub{
  color:var(--otakul-muted);
  font-size:11px;
}
.price{
  color:var(--otakul-orange);
  font-weight:700;
}

.checkout-bottom-bar{
  position:sticky;
  bottom:0;
  z-index:1030;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
}
.bottom-total{
  font-weight:700;
  font-size:14px;
  color:var(--otakul-orange);
}

.modal-sheet .modal-dialog{
  margin:0;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  max-width:100%;
  height: auto;
  max-height:75vh;
}
.modal-sheet .modal-content{
  height:100%;
  border:0;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.modal-sheet .modal-header{
  border-bottom:1px solid rgba(0,0,0,.06);
}
.modal-sheet .modal-title{
  font-size:1.2rem
  font-weight:600;
}

.radio-tile{
  border:1px solid rgba(0,0,0,.1);
  border-radius:10px;
  padding:10px;
  cursor:pointer;
  background:#fff;
}
.radio-tile.active{
  border-color: #ee4d2d8c;
  box-shadow: 0 0 0 1px #ddd;
}
.radio-tile .tile-title{
  font-weight:600;
}
.radio-tile .tile-sub{
  color:var(--otakul-muted);
  font-size:0.75rem
}

.muted{
  color:var(--otakul-muted);
}