body {
  font-family: 'Poppins', Arial, sans-serif;
  /* background: #f9f5fa; */
}

.container.cart-page { margin-top: 26px; }

.cart-layout { display: flex; gap: 27px; align-items: flex-start; min-width: 0; }
.cart-left { flex: 1 1 0; min-width: 0; }
.cart-right { width: 370px; min-width: 270px; max-width: 430px; display:flex; flex-direction:column; gap: 19px; }

.cart-title-bar { display:flex; align-items:flex-end; justify-content:space-between; padding-bottom: 10px; margin-bottom:17px; border-bottom:1.5px solid #ece0ed; }
.cart-title { font-size:22px; font-weight:700; color:#222; }
.cart-summary { font-size:15px; color:#444; }

.cart-freeship { margin-bottom:22px; }
.cart-freeship span{ font-size:16.3px; color:#31343a; }
.freeship-link{ color:#e94444; font-weight:600; }
.cart-freeship-progress{ margin-top:9px; display:flex; align-items:center; position:relative; }
.freeship-bar{ height:10px; border-radius:6px; background:#e8e8e8; flex:1; position:relative; overflow:hidden; }
.freeship-bar>div{ background:linear-gradient(90deg,#feb41d 70%,#ff944d 95%); height:100%; border-radius:6px; width:62%; transition:width .3s; }
.freeship-star{ position:absolute; right:-17px; top:50%; transform:translateY(-55%); background:#fff; border:2px solid #ffd679; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:#feb41d; font-size:15.7px; z-index:2; box-shadow:0 2px 6px #ffe7b621; }

.cart-block{ background:#faf9fb; border-radius:10px; box-shadow:0 1.5px 12px #e9c3ec21; border:1.2px solid #efdee7; padding:0 0 5px 0; margin-bottom:13px; }
.cart-table-title{ background:#fff; color:#e94347; font-weight:700; font-size:15.1px; text-transform:uppercase; padding:12px 21px 10px 21px; border-radius:10px 10px 0 0; border-bottom:1px solid #f8e2ee; }

.cart-item{
  display:flex; align-items:center; gap:13px; background:#fff; border-radius:10px; margin:0 13px 12px 13px;
  padding:8px 11px; box-shadow:0 2px 8px #eeccf222; position:relative; min-height:67px;
}
.cart-delete{ border:none; background:none; position:absolute; top:8px; left:2.5px; color:#adb2bd; font-size:21px; cursor:pointer; }
.cart-delete:hover{ color:#ea427a; }
.cart-img{ width:49px; height:49px; border-radius:7px; object-fit:contain; box-shadow:0 1px 7px #f5dbef22; }
.cart-info{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.cart-prod-name{ font-size:15.3px; color:#26262e; font-weight:700; margin-bottom:2px; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:33px; line-height:1.2; }
.cart-meta{ font-size:14px; color:#999; font-weight:500; gap:10px; display:flex; align-items:end; }
.cart-price{ color:#e94444; font-weight:700; font-size:15.3px; }
.cart-price-old{ color:#bbb; text-decoration:line-through; font-size:13.4px; font-weight:500; margin-left:7px; }

.cart-side{ display:flex; flex-direction:column; align-items:flex-end; min-width:86px; }
.cart-item-total{ font-size:15px; font-weight:700; color:#e94444; margin-bottom:4px; margin-right:2px; }

.cart-quantity-group{ background:#fff; border-radius:8px; border:1px solid #f5d8e6; padding:0 8px; display:flex; align-items:center; gap:5px; }
.cart-qty-btn{ background:none; border:none; outline:none; color:#e94444; font-size:18px; font-weight:800; width:28px; height:25px; cursor:pointer; border-radius: 5px; }
.cart-qty-btn:hover{ background:#ffeef5; color:#ea427a; }
.cart-quantity-group input[type="number"]{ width:30px; border:none; font-size:15px; text-align:center; background:none; color:#222; outline:none; appearance:textfield; font-weight:600; padding:2px 0; }

.cart-block.note-block{ background:#f2f3f4; border:none; box-shadow:none; padding:0; margin-bottom:12px; }
.cart-block.note-block .cart-table-title{ background:#f2f3f4; color:#222; border-bottom:0; border-radius:10px 10px 0 0; font-weight:600; font-size:15px; padding:10px 18px 7px 15px; }
.cart-note{ width:98%; min-height:66px; background:#fff; border:1.2px solid #ece0ed; border-radius:8px; padding:8px 12px; font-family:inherit; font-size:14.5px; color:#393661; margin:0 7px 9px 7px; resize:vertical; outline:none; transition:border .13s; }
.cart-note:focus{ border-color:#eb528d; }

.cart-export-invoice{ margin:12px 0 0 9px; color:#222; font-size:14px; display:flex; align-items:center; gap:6px; }
.cart-export-invoice input[type="checkbox"]{ width:17px; height:17px; vertical-align:middle; accent-color:#eb528d; border-radius:4px; margin-right:2px; }
.cart-export-invoice ion-icon{ color:#eb528d; font-size:21px; margin-right:1px; vertical-align:middle; }

.cart-order-form{ margin-top: 14px; width: 100%; }
.cart-form-row{ display:flex; gap:18px; }
.cart-form-row input[type="text"],
.cart-form-row input[type="tel"],
.cart-form-row input[type="email"]{
  flex:1 1 0; outline:none; font-size:14.3px; border:1.2px solid #ece0ed; background:#fff;
  padding:10px 14px; border-radius:7px; box-sizing:border-box; font-family:inherit; color:#393661; transition:border .13s;
}
.cart-form-address-row{ align-items:flex-end; margin-top:4px; }
.cart-form-address-row textarea{
  flex:1 1 0; min-width:0; min-height:48px; max-height:170px; resize:vertical;
  font-size:14.3px; border:1.2px solid #ece0ed; background:#fff; padding:10px 14px; border-radius:7px;
  box-sizing:border-box; font-family:inherit; color:#393661; transition:border .13s; margin-bottom:0;
}
.cart-form-row input:focus,
.cart-form-row textarea:focus{ border-color:#eb528d; }

.cart-form-submit{
  margin-left: 22px;
  padding: 16px 32px;
  border-radius: 10px;
  background: linear-gradient(90deg,#ea427a 70%, #eb528d 100%);
  color: #fff;
  font-weight: 700;
  font-size: 16.5px;
  border: none;
  box-shadow: 0 1px 8px #ecaaca19;
  cursor: pointer;
  white-space: nowrap;
  height: 54px;
  min-width: 158px;
  align-self: stretch;
  display:flex; align-items:center; justify-content:center;
}

.cart-info-card{
  background:#fff; border-radius:14px; padding:22px 12px 21px 17px; box-shadow:0 1.5px 10px #e4dde627; border:1.3px solid #ecdbf1;
}
.cart-info-title{ font-size:19px; color:#232323; font-weight:700; margin-bottom:17px; }
.cart-summary-right-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:16px; font-weight:500; color:#26262e; border-bottom:1px solid #ede3ee; padding-bottom:13px; margin-bottom:13px; }
.cart-summary-total{ color:#e94444; font-size:23px; font-weight:800; }
.cart-info-extra{ color:#292645; font-size:14.5px; margin-bottom:15px; padding-left:14px; list-style:disc outside; line-height:1.58; }
.cart-info-extra ion-icon{ color:#feb41d; font-size:17px; vertical-align:middle; margin-right:1px; }

/* Voucher */
.cart-voucher-scroll{
  background:#fff;
  border-radius:14px;
  box-shadow:0 1.5px 9px #edc9de26;
  border:1.4px solid #f9e1ee;
  margin-top:18px;
  overflow:hidden;
}
.voucher-scroll-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px 8px 19px;
}
.voucher-scroll-title{ font-size:15.7px; font-weight:700; color:#262626; letter-spacing:.2px; }
.voucher-scroll-arrow{ display:flex; gap:2px; }
.voucher-arrow{
  border:none; background:#f8edf6; border-radius:7px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:#ce5995; font-size:22px; cursor:pointer;
}
.voucher-arrow:disabled{ opacity:.45; cursor:default; }

.voucher-scroll-inner{
  display:flex;
  flex-direction:column;
  gap:13px;
  max-height:380px;
  overflow-y:auto;
  padding:8px 12px 13px 17px;
  scroll-behavior:smooth;
}
.voucher-item{
  position:relative;
  display:flex;
  align-items:center;
  background:#fff;
  border:1.5px dashed #eeb6d2;
  border-radius:13px;
  min-height:89px;
  padding:9px 13px 9px 7px;
  gap:9px;
  box-shadow:0 2px 8px #ecbac44a;
}
.voucher-img{ width:45px; height:45px; object-fit:contain; }

.voucher-content{ flex:1 1 0; position:relative; display:flex; flex-direction:column; min-width:0; }
.voucher-help{ position:absolute; right:4px; top:4px; color:#bbb; font-size:19.5px; cursor:pointer; }
.voucher-desc-box{ display:flex; flex-direction:column; min-width:0; gap:2px; padding-top:2px; }
.voucher-title{ font-size:15px; color:#e94444; font-weight:700; white-space:nowrap; }
.voucher-cond{ font-size:14.4px; color:#23272b; font-weight:500; white-space:nowrap; }
.voucher-info-row{ display:flex; align-items:center; gap:4px; font-size:14px; white-space:nowrap; }
.voucher-label{ color:#666; }
.voucher-code{ background:#eaf7f3; color:#d34b32; font-weight:700; border-radius:4px; padding:0 7px 0 3px; font-size:14px; }
.voucher-hsd{ font-size:11.2px; color:#aaa; margin:3px 0 8px 0; white-space:nowrap; line-height:1.1; }
.voucher-btn{
  align-self:flex-end;
  background:#fff0fa;
  border:none;
  color:#eb528d;
  font-weight:700;
  font-size:13.5px;
  border-radius:7px;
  padding:9px 21px;
  cursor:pointer;
  min-width:112px;
}
.voucher-btn.used{
  background:#f8e7f3;
  color:#b3969f;
  cursor: default;
}

/* Suggest */
.suggest-title{
  font-size: 21px;
  font-weight: 700;
  margin: 34px 0 18px 0;
  color: #1a1a1a;
}

.suggestion-scroll-list{
  display:flex;
  overflow-x:auto;
  gap:22px;
  padding-bottom:15px;
  scroll-snap-type:x mandatory;
}

.suggestion-card{
  flex: 0 0 225px;
  min-width: 210px;
  max-width: 245px;
  background:#fff;
  border-radius:13px;
  box-shadow:0 1px 12px #efceeb2c;
  border:1.3px solid #f8e0ed;
  padding:13px 15px 15px 15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  scroll-snap-align:start;
}

.suggest-img{
  width:105px;
  max-height:118px;
  object-fit:contain;
  border-radius:12px;
  margin-bottom:10px;
  background:#fbf8f9;
}

.suggestion-name{
  font-size:15.5px;
  font-weight:600;
  color:#232323;
  margin:12px 0 5px 0;
  min-height:38px;
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.24;
}

.suggestion-row{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}

.suggest-variant{
  display:inline-block;
  padding:4px 11px;
  border:1.1px solid #e6d9dd;
  border-radius:11px;
  font-size:13px;
  color:#5a5454;
  background:#faf8fb;
}

.suggest-cart{
  background:#fff7fa;
  color:#ea427a;
  border:1.3px solid #eee1ed;
  font-size:19px;
  border-radius:50%;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.suggest-meta{
  font-size:13.5px;
  color:#757575;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:7px 0 2px 0;
}

.suggest-rating .stars{ color:#fab818; }

.suggest-price-group{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:4px;
}

.suggest-price{ color:#e94444; font-size:17px; font-weight:700; }
.suggest-oldprice{ color:#999; font-size:13.5px; text-decoration: line-through; }
.suggest-discount{ color:#ee4d7d; font-size:13px; font-weight:800; background:#fff3f7; padding:2.5px 7px; border-radius:7px; }

/* Responsive */
@media (max-width:1100px){
  .cart-layout{ gap: 13px; }
  .cart-right{ width: 100%; max-width: unset; }
}
@media (max-width:800px){
  .cart-layout{ flex-direction: column; gap: 15px; }
  .cart-right{ width: 100%; min-width: unset; }
}
@media (max-width:900px){
  .cart-form-row, .cart-form-address-row { flex-direction: column; gap: 10px; }
  .cart-form-submit { margin: 13px 0 0 0; width: 100%; }
}

/* =========================
   RESPONSIVE PATCH (append to end)
========================= */

/* an toàn: không tràn ngang */
.cart-page,
.cart-layout,
.cart-left,
.cart-right,
.cart-block,
.cart-item { min-width: 0; }

/* cart-right co giãn tốt hơn trên desktop */
.cart-right{
  width: auto;                 /* bỏ cứng */
  flex: 0 0 clamp(270px, 28vw, 430px);
}

/* textarea/input full width chuẩn */
.cart-note{ width: 100% !important; margin: 0 0 10px 0; }
.cart-order-form input,
.cart-order-form textarea{ width: 100%; }

/* ===== Tablet: stack 2 cột ===== */
@media (max-width: 1024px){
  .cart-layout{
    flex-direction: column;
    gap: 15px;
  }
  .cart-right{
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ===== Mobile: cart item không tràn ===== */
@media (max-width: 640px){
  .container.cart-page{ padding-left: 12px; padding-right: 12px; }

  /* item wrap */
  .cart-item{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin: 0 10px 12px 10px;
    padding: 10px 10px;
  }

  .cart-img{
    width: 54px;
    height: 54px;
  }

  /* khối info chiếm full, side xuống dưới */
  .cart-info{
    flex: 1 1 calc(100% - 70px);
  }

  .cart-side{
    flex: 1 1 100%;
    width: 100%;
    align-items: flex-start;  /* đẹp hơn trên mobile */
    margin-top: 6px;
  }

  .cart-item-total{
    margin: 0 0 8px 0;
  }

  /* form stack */
  .cart-form-row,
  .cart-form-address-row{
    flex-direction: column;
    gap: 10px;
  }

  .cart-form-submit{
    margin: 10px 0 0 0;
    width: 100%;
    min-width: 0;
  }
}

/* ===== Voucher: tránh chữ tràn ===== */
.voucher-title,
.voucher-cond,
.voucher-info-row,
.voucher-hsd{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ship-line{
  display: inline-flex;      /* luôn cùng 1 hàng */
  align-items: center;       /* canh giữa theo chiều dọc */
  gap: 6px;                  /* khoảng cách icon - text */
  white-space: nowrap;       /* ép không xuống dòng */
}

.cart-info-card .cart-checkout-btn{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 85%;
  margin: 14px auto 0;

  padding: 12px 0;
  border-radius: 10px;

  background: #4476e9;
  color: #fff;
  font-weight: 800;
  font-size: 16px;

  text-decoration: none;
  box-shadow: 0 2px 7px #febec744;
  transition: background .15s, transform .12s;
}

.cart-info-card .cart-checkout-btn:hover{
  background: #2351b4;
  transform: translateY(-1px);
  color: #fff;
}