/* Trang bán hàng: dùng lại biến màu, .ladi-wrap, .ladi-card, .ladi-btn của trang chủ và blog */

.ladi-sh-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ladi-sh-tabs a {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #DCE5FF;
  background: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.ladi-sh-tabs a.ladi-on {
  background: var(--royal);
  border-color: var(--royal);
  color: #FFFFFF;
}

.ladi-sh-img {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--tint2);
  overflow: hidden;
}

.ladi-sh-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.ladi-sh-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ladi-sh-price b {
  font-size: 17px;
  color: var(--royal);
}

.ladi-sh-price s {
  font-size: 13.5px;
  color: var(--muted);
}

.ladi-sh-price-lg b {
  font-size: 28px;
}

:where(.ladi-btn-sm) {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  align-self: flex-start;
}

.ladi-sh-detail {
  padding: 40px 0 24px;
}

.ladi-sh-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 20px;
}

.ladi-sh-main {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
  border: 1px solid var(--line);
}

.ladi-sh-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.ladi-sh-thumbs img {
  width: 72px;
  height: 90px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.ladi-sh-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.ladi-sh-info h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ladi-sh-desc {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: #5A6178;
}

.ladi-sh-variants {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ladi-sh-variant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #DCE5FF;
  background: #FFFFFF;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}

.ladi-sh-variant span {
  flex: 1;
}

.ladi-sh-variant small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}

.ladi-sh-variant input {
  accent-color: var(--royal);
}

.ladi-sh-buy {
  width: 100%;
  justify-content: center;
}

.ladi-sh-points {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 22px;
  color: #5A6178;
}

.ladi-sh-page {
  padding: 40px 0 96px;
}

.ladi-sh-title {
  margin: 0 0 24px;
  font-size: 34px;
  color: var(--ink);
}

.ladi-sh-title span {
  color: var(--muted);
  font-weight: 600;
}

.ladi-sh-cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.ladi-sh-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ladi-sh-box {
  padding: 20px 22px;
  border-radius: 20px;
  border: 1px solid #E6ECF7;
  background: #FFFFFF;
  box-shadow: var(--sh-1);
}

.ladi-sh-box h2 {
  margin: 0 0 14px;
  font-size: 18px;
  color: var(--ink);
}

.ladi-sh-box .ladi-sh-variant + .ladi-sh-variant {
  margin-top: 8px;
}

.ladi-sh-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #EEF2FA;
}

.ladi-sh-line:last-child {
  border-bottom: 0;
}

.ladi-sh-line img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
}

.ladi-sh-line-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ladi-sh-line-info a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.ladi-sh-line-info span,
.ladi-sh-qty {
  font-size: 13px;
  color: var(--muted);
}

.ladi-sh-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 88px;
}

.ladi-sh-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  color: #5A6178;
}

.ladi-sh-row b {
  color: var(--ink);
}

.ladi-sh-total {
  padding-top: 10px;
  border-top: 1px solid #EEF2FA;
  font-size: 16px;
}

.ladi-sh-total b {
  color: var(--royal);
  font-size: 20px;
}

.ladi-sh-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ladi-sh-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.ladi-sh-fields input {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #DCE5FF;
  font: inherit;
  font-weight: 400;
}

.ladi-sh-full {
  grid-column: span 2;
}

/* Tài khoản: đăng nhập, đăng ký, mật khẩu */
.ladi-sh-auth {
  max-width: 440px;
  margin: 0 auto;
  padding: 32px;
}

.ladi-sh-auth .ladi-sh-title {
  margin-bottom: 8px;
}

.ladi-sh-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.ladi-sh-auth-form label,
.ladi-sh-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.ladi-sh-auth-form input,
.ladi-sh-search input {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #DCE5FF;
  font: inherit;
  font-weight: 400;
}

.ladi-sh-auth-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.ladi-sh-auth-foot a {
  color: var(--royal);
  font-weight: 600;
  text-decoration: none;
}

/* Trang tài khoản + đơn hàng của tôi */
.ladi-sh-account {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ladi-sh-account-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 88px;
}

.ladi-sh-account-nav a,
.ladi-sh-account-nav button {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  color: #5A6178;
  text-decoration: none;
  cursor: pointer;
}

.ladi-sh-account-nav a.ladi-on {
  background: var(--tint2);
  color: var(--royal);
}

.ladi-sh-account .ladi-sh-fields {
  margin-bottom: 16px;
}

.ladi-sh-order {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid #EEF2FA;
}

.ladi-sh-order:last-child {
  border-bottom: 0;
}

.ladi-sh-order-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}

.ladi-sh-order-head b {
  color: var(--ink);
}

.ladi-sh-status {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--tint2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--royal);
}

.ladi-sh-order-head a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

/* Xác nhận đơn hàng */
.ladi-sh-done {
  margin-bottom: 24px;
  background: var(--tint2);
  border-color: transparent;
}

.ladi-sh-done .ladi-sh-title {
  margin-bottom: 8px;
}

.ladi-sh-bank {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* Tìm kiếm */
.ladi-sh-search {
  display: flex;
  gap: 10px;
  max-width: 640px;
  margin-bottom: 12px;
}

.ladi-sh-search input {
  flex: 1;
}

.ladi-sh-page .ladi-bl-h2 {
  margin: 32px 0 16px;
}

@media (max-width: 900px) {
  .ladi-sh-account {
    grid-template-columns: 1fr;
  }

  .ladi-sh-account-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ladi-sh-detail-grid,
  .ladi-sh-cart-grid {
    grid-template-columns: 1fr;
  }

  .ladi-sh-summary {
    position: static;
  }
}

/* Lớp DÙNG CHUNG với site.css (.ladi-wrap, .ladi-grid3, .ladi-bl-*, .ladi-card-bd, .ladi-btn-sm): shop.css nạp SAU site.css nên
   chỉ đặt MẶC ĐỊNH bằng :where() (độ ưu tiên 0) — site.css của web định nghĩa lớp nào thì lớp đó thắng, không bị đè lề / lưới. */
:where(.ladi-wrap) { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Header cửa hàng: giỏ + tài khoản; 360px không tràn (tìm kiếm xuống dòng riêng, menu cuộn ngang). */
.ladi-header--shop .ladi-header__shop { display: flex; align-items: center; gap: 12px; }
.ladi-header--shop .ladi-header__icon { position: relative; display: inline-flex; color: var(--ladi-color-text); }
.ladi-header--shop .ladi-header__badge { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e11d48; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.ladi-header--shop .ladi-header__badge[hidden], .ladi-header--shop .ladi-header__badge:empty { display: none; }
.ladi-sh-buy-row { display: flex; gap: 12px; align-items: stretch; }
.ladi-sh-qty-input { width: 72px; border: 1px solid var(--ladi-color-line); border-radius: 8px; padding: 8px; font: inherit; }
.ladi-sh-qty-edit { display: inline-flex; align-items: center; gap: 4px; }
.ladi-sh-qty-edit input { width: 48px; text-align: center; border: 1px solid var(--ladi-color-line); border-radius: 6px; padding: 4px; font: inherit; }
.ladi-sh-qty-edit button, .ladi-sh-remove { border: 1px solid var(--ladi-color-line); background: none; border-radius: 6px; min-width: 28px; height: 28px; cursor: pointer; font: inherit; }
.ladi-sh-line-variant { display: block; margin-top: 4px; max-width: 100%; border: 1px solid var(--ladi-color-line); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: .875rem; background: #fff; }
.ladi-sh-line-variant[hidden], .ladi-sh-line-variant:empty { display: none; }
.ladi-sh-stock { color: #b91c1c; font-weight: 600; }
@media (max-width: 600px) {
  .ladi-header--shop .ladi-container { gap: 12px; }
  .ladi-header--shop nav { order: 3; width: 100%; overflow-x: auto; white-space: nowrap; }
  .ladi-header--shop .ladi-header__shop { margin-left: auto; }
  .ladi-header--shop .ladi-header__search { order: 4; width: 100%; margin-left: 0; }
  .ladi-header--shop .ladi-header__search input { width: 100%; box-sizing: border-box; }
  .ladi-sh-line { flex-wrap: wrap; }
}
/* Lưới SP / danh sách (trang chủ cửa hàng, danh mục, SP tương tự) + ô ảnh khi SP không có ảnh trong LadiSales. */
:where(.ladi-bl-list) { padding: 32px 0; }
:where(.ladi-bl-h2) { font-size: 1.5rem; margin: 0 0 16px; }
:where(.ladi-grid3) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
:where(.ladi-card-bd) { padding: 12px 14px 16px; }
:where(.ladi-card-bd h3) { font-size: 1rem; margin: 0 0 6px; line-height: 1.4; }
.ladi-sh-noimg { display: block; aspect-ratio: 4 / 5; background: var(--ladi-color-line, #eee); }
.ladi-sh-cat-img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--ladi-radius, 12px); margin: 0 0 16px; }
.ladi-sh-hint { margin: 0 0 8px; color: var(--ladi-color-muted, #666); font-size: .9rem; }
@media (max-width: 600px) { :where(.ladi-grid3) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* Checkout in-page: ô chọn địa chỉ, thông báo lỗi. */
.ladi-sh-fields select { width: 100%; box-sizing: border-box; border: 1px solid var(--ladi-color-line); border-radius: 8px; padding: 8px 10px; font: inherit; background: #fff; }
.ladi-sh-error { color: #b91c1c; margin: 8px 0; }
.ladi-sh-error[hidden] { display: none; }
.ladi-sh-fields textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--ladi-color-line); border-radius: 8px; padding: 8px 10px; font: inherit; }
.ladi-sh-success[hidden] { display: none; }

/* Đang nạp (ux-loading): html.ladi-hydrating do <head> gắn, ladi.sdk gỡ khi giỏ / tài khoản / checkout hydrate xong (tự gỡ sau
   4s). Trong lúc đó ẩn cả "giỏ trống" lẫn danh sách, che khối tài khoản, hiện khung xám [data-ladi-skeleton] để không nháy sai. */
[data-ladi-skeleton] { display: none; }
.ladi-hydrating [data-ladi-skeleton] { display: block; }
.ladi-hydrating [data-ladi-bind="cart.empty"], .ladi-hydrating [data-ladi-bind="cart.not_empty"],
.ladi-hydrating [data-ladi-slot="account-profile"], .ladi-hydrating [data-ladi-slot="order-items"] { display: none; }
:where(.ladi-skeleton) { padding: 8px 0; }
:where(.ladi-skeleton) span { display: block; height: 16px; margin: 0 0 12px; border-radius: 6px; background: linear-gradient(90deg, var(--ladi-color-line, #eee) 25%, #f6f6f6 50%, var(--ladi-color-line, #eee) 75%); background-size: 200% 100%; animation: ladi-shimmer 1.2s linear infinite; }
:where(.ladi-skeleton) span:nth-child(2) { width: 80%; }
:where(.ladi-skeleton) span:nth-child(3) { width: 60%; }
@keyframes ladi-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { :where(.ladi-skeleton) span { animation: none; } }
/* Lỗi từng ô do ladi.sdk ghi (form cửa hàng novalidate): chữ đỏ dưới ô + viền đỏ ô sai. */
:where(.ladi-field-error) { display: block; margin-top: 4px; color: #d92d20; font-size: .85rem; }
:where([aria-invalid="true"]) { border-color: #d92d20; }
/* Chống giật footer (CLS — ui-test đo checkout 375px = 0.519): khung trang giỏ / checkout / tài khoản giữ tối thiểu 1 màn hình,
   khung chờ giữ chỗ cho nội dung SDK đổ vào. */
:where(.ladi-sh-page) { min-height: calc(100vh - var(--ladi-header-h, 64px)); }
.ladi-hydrating :where(.ladi-skeleton) { min-height: 42rem; }
/* Đơn vừa đặt (khách đã đăng nhập, /account?new_order=<mã>): ladi.sdk gắn class ladi-new-order lên dòng đơn đó. */
:where(.ladi-new-order) { outline: 2px solid var(--ladi-color-primary, #6d28d9); outline-offset: 2px; border-radius: 8px; }
/* SP chỉ 1 biến thể: ô chọn biến thể có hidden (starter product-detail) — display của .ladi-sh-variants không được đè. */
.ladi-sh-variants[hidden] { display: none; }
/* Xem nhanh / chọn phân loại (ladi.sdk dựng dialog .ladi-qv từ <template data-ladi-qv> của thẻ SP). Dưới 768px: sheet đáy; lớn hơn:
   dialog giữa màn 2 cột. :where — CSS của web ghi đè được. */
:where(.ladi-qv) { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
:where(.ladi-qv)[hidden] { display: none; }
:where(.ladi-qv__backdrop) { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
:where(.ladi-qv__panel) { position: relative; width: 100%; max-height: 90vh; overflow: auto; background: var(--ladi-color-bg, #fff); border-radius: 16px 16px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
:where(.ladi-qv__close) { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--ladi-color-text); }
:where(.ladi-qv__grid) { display: grid; gap: 16px; }
:where(.ladi-qv__media) img, :where(.ladi-qv__media) .ladi-sh-noimg { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
:where(.ladi-qv__title) { font-size: 1.25rem; margin: 0 0 8px; padding-right: 40px; }
:where(.ladi-qv__more) { display: inline-block; margin-top: 12px; color: var(--ladi-color-primary); }
:where(.ladi-qv) .ladi-sh-buy-row { position: sticky; bottom: 0; background: var(--ladi-color-bg, #fff); padding-top: 8px; }
@media (min-width: 768px) {
  :where(.ladi-qv) { align-items: center; }
  :where(.ladi-qv__panel) { max-width: 960px; border-radius: 16px; padding: 28px; }
  :where(.ladi-qv__grid) { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  :where(.ladi-qv__panel) { animation: ladi-qv-in .2s ease-out; }
}
@keyframes ladi-qv-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Chọn biến thể theo nhóm thuộc tính (variant-options): danh sách phẳng giữ bố cục cũ; nhóm = hàng chip, SDK bật / tắt. */
.ladi-sh-variant-list { display: contents; }
.ladi-sh-variant-list[hidden], .ladi-sh-options[hidden] { display: none; }
:where(.ladi-sh-options) { display: flex; flex-direction: column; gap: 14px; }
:where(.ladi-sh-option) { border: 0; margin: 0; padding: 0; min-width: 0; }
:where(.ladi-sh-option legend) { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
:where(.ladi-sh-option-value) { display: inline-flex; margin: 0 8px 8px 0; cursor: pointer; }
:where(.ladi-sh-option-value input) { position: absolute; opacity: 0; width: 1px; height: 1px; }
:where(.ladi-sh-option-value span) { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; border: 1px solid #DCE5FF; background: #FFFFFF; font-size: 14px; color: var(--ink); }
:where(.ladi-sh-option-value input:checked + span) { border-color: var(--royal); box-shadow: inset 0 0 0 1px var(--royal); }
:where(.ladi-sh-option-value input:focus-visible + span) { outline: 2px solid var(--royal); outline-offset: 2px; }
:where(.ladi-sh-option-value[data-ladi-unavailable] span, .ladi-sh-option-value input[data-ladi-unavailable] + span) { opacity: .45; text-decoration: line-through; }

/* Nút "Xem thêm đơn hàng" (data-ladi-slot="order-more"): SDK bật / tắt bằng hidden. */
:where(.ladi-order-more) { margin-top: 16px; }
.ladi-order-more[hidden] { display: none; }

/* Đánh giá sản phẩm (PDP): ô tổng hợp điểm + sao, rồi danh sách đánh giá khách (tên, sao, ngày, nội dung, ảnh). Sao vàng
   theo quy ước xếp hạng (không dùng biến thương hiệu để luôn đọc ra "đánh giá"); ô xám nhạt cho sao chưa đạt. */
.ladi-sh-reviews { padding: 8px 0 40px; }
.ladi-sh-rv__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 16px 18px; border: 1px solid #DCE5FF; border-radius: 14px; background: #FBFCFF; }
.ladi-sh-rv__score { display: flex; align-items: baseline; gap: 2px; }
.ladi-sh-rv__score b { font-size: 30px; line-height: 1; color: var(--ink); }
.ladi-sh-rv__score span { font-size: 15px; color: var(--muted); }
.ladi-sh-rv__count { font-size: 14px; color: var(--muted); }
.ladi-sh-rv__stars, .ladi-sh-rv__rating { display: inline-flex; gap: 2px; font-size: 16px; line-height: 1; letter-spacing: 1px; }
.ladi-sh-star { color: #D7DCEA; font-style: normal; }
.ladi-sh-star--on { color: #F5B50A; }
.ladi-sh-rv__list { list-style: none; margin: 20px 0 0; padding: 0; }
.ladi-sh-rv__item { padding: 16px 0; border-top: 1px solid #ECEFF7; }
.ladi-sh-rv__item:first-child { border-top: 0; }
.ladi-sh-rv__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ladi-sh-rv__name { font-weight: 600; font-size: 15px; color: var(--ink); }
.ladi-sh-rv__date { font-size: 13px; color: var(--muted); margin-left: auto; }
.ladi-sh-rv__text { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: #5A6178; }
.ladi-sh-rv__imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ladi-sh-rv__img { display: block; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid #ECEFF7; }
.ladi-sh-rv__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) {
  .ladi-sh-rv__score b { font-size: 26px; }
  .ladi-sh-rv__img { width: 64px; height: 64px; }
}

/* Màn chuyển khoản inline ở checkout: QR căn giữa, thông tin tài khoản canh trái cho dễ đọc, ô bo viền tách khỏi phần trên. */
.ladi-sh-bank { margin: 16px auto 0; max-width: 420px; padding: 16px 18px; border: 1px solid #DCE5FF; border-radius: 12px; background: #FBFCFF; text-align: left; }
.ladi-sh-bank__title { margin: 0 0 12px; font-size: 16px; text-align: center; }
.ladi-sh-bank__qr { display: block; width: 200px; height: 200px; margin: 0 auto 14px; border-radius: 8px; }
.ladi-sh-bank p { margin: 6px 0; font-size: 14.5px; color: var(--ink); }
.ladi-sh-bank__copy { margin-left: 6px; padding: 2px 10px; min-height: 0; vertical-align: middle; }
.ladi-sh-bank__pending { margin-top: 12px !important; color: var(--muted); font-size: 13.5px; }
.ladi-sh-bank__expire { color: #b45309; font-weight: 600; }

/* Dòng giỏ hàng: ảnh lớn bên trái; tên + dropdown từng thuộc tính; số lượng + giá bên phải; "Xóa" dưới cùng. */
.ladi-cart .ladi-sh-line { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto 120px; grid-template-areas: "img info qty price" "img del . ."; grid-template-rows: 1fr auto; column-gap: 24px; row-gap: 12px; align-items: start; padding: 20px 0; }
.ladi-cart .ladi-sh-line-img, .ladi-cart .ladi-sh-line img { grid-area: img; width: 132px; height: 176px; object-fit: cover; object-position: top; border-radius: 12px; background: #F2F2F2; }
.ladi-cart .ladi-sh-line-info { grid-area: info; gap: 14px; min-width: 0; }
.ladi-cart .ladi-sh-line-info a { font-size: 18px; font-weight: 500; line-height: 1.35; }
.ladi-cart .ladi-sh-line-vname { font-size: 14px; color: var(--muted); }
.ladi-cart .ladi-sh-line--split .ladi-sh-line-vname, .ladi-cart .ladi-sh-line--split .ladi-sh-line-variant { display: none; }
.ladi-cart .ladi-sh-line-variant { appearance: none; -webkit-appearance: none; margin-top: 0; min-height: 44px; padding: 0 40px 0 18px; border: 0; border-radius: 999px; background: #F2F2F2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; font-size: 15px; color: var(--ink); cursor: pointer; align-self: flex-start; }
.ladi-sh-line-opts { display: flex; flex-wrap: wrap; gap: 12px; }
.ladi-sh-line-opts:empty { display: none; }
.ladi-sh-opt select { appearance: none; -webkit-appearance: none; min-height: 44px; min-width: 96px; max-width: 220px; padding: 0 40px 0 18px; border: 0; border-radius: 999px; background: #F2F2F2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; text-overflow: ellipsis; }
.ladi-sh-opt select:focus-visible, .ladi-cart .ladi-sh-line-variant:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.ladi-cart .ladi-sh-qty-edit { grid-area: qty; gap: 0; height: 44px; padding: 0 6px; border: 1px solid #E8E8E8; border-radius: 999px; }
.ladi-cart .ladi-sh-qty-edit button { border: 0; min-width: 36px; height: 36px; font-size: 18px; border-radius: 999px; }
.ladi-cart .ladi-sh-qty-edit input { width: 40px; border: 0; padding: 0; font-size: 15px; -moz-appearance: textfield; }
.ladi-cart .ladi-sh-qty-edit input::-webkit-outer-spin-button, .ladi-cart .ladi-sh-qty-edit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ladi-cart .ladi-sh-line > b { grid-area: price; justify-self: end; align-self: start; line-height: 44px; font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ladi-cart .ladi-sh-remove { grid-area: del; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: auto; padding: 4px 0; border: 0; background: none; font-size: 15px; color: var(--muted); cursor: pointer; }
.ladi-cart .ladi-sh-remove:hover { color: #b91c1c; }
/* Dropdown tự vẽ (cart-options.js): nút viên thuốc + danh sách thả xuống bo góc, không dùng <select> mặc định. */
.ladi-sh-opt { position: relative; }
.ladi-sh-opt-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; min-width: 96px; max-width: 240px; padding: 0 16px 0 20px; border: 0; border-radius: 999px; background: #F2F2F2; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; transition: background-color .15s; }
.ladi-sh-opt-btn:hover, .ladi-sh-opt--open .ladi-sh-opt-btn { background: #EAEAEA; }
.ladi-sh-opt-btn:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.ladi-sh-opt-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladi-sh-opt-btn svg { flex: none; color: #555; transition: transform .2s; }
.ladi-sh-opt--open .ladi-sh-opt-btn svg { transform: rotate(180deg); }
.ladi-sh-opt-list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: max(100%, 150px); max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #FFFFFF; border: 1px solid #EFEFEF; border-radius: 18px; box-shadow: 0 12px 32px rgba(15, 23, 42, .12); }
.ladi-sh-opt-list[hidden] { display: none; }
.ladi-sh-opt-list li { padding: 10px 16px; border-radius: 12px; font-size: 15px; color: var(--ink); white-space: nowrap; cursor: pointer; outline: none; }
.ladi-sh-opt-list li:hover, .ladi-sh-opt-list li:focus { background: #F5F5F5; }
.ladi-sh-opt-list li[aria-selected="true"] { background: #F2F2F2; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ladi-sh-opt-btn svg { transition: none; } }
@media (max-width: 600px) { .ladi-sh-opt-btn { min-width: 0; font-size: 14px; padding: 0 12px 0 16px; gap: 10px; } }
/* Không kẻ dưới dòng cuối (sau dòng cuối còn <template> nên :last-child không bắt được). */
.ladi-cart .ladi-sh-line:last-of-type, .ladi-cart .ladi-sh-line:not(:has(~ .ladi-sh-line)) { border-bottom: 0; }
.ladi-cart .ladi-sh-box[data-ladi-slot="cart-items"] { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 600px) {
  .ladi-cart .ladi-sh-line { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "img info info" "img qty price" "img del del"; grid-template-rows: auto auto auto; column-gap: 14px; }
  .ladi-cart .ladi-sh-line-img, .ladi-cart .ladi-sh-line img { width: 96px; height: 128px; }
  .ladi-cart .ladi-sh-line-info a { font-size: 16px; }
  .ladi-cart .ladi-sh-line-opts { gap: 8px; }
  .ladi-sh-opt select { min-width: 0; font-size: 14px; padding: 0 34px 0 14px; background-position: right 12px center; }
  .ladi-cart .ladi-sh-qty-edit { justify-self: start; }
  .ladi-cart .ladi-sh-line > b { font-size: 16px; }
}