/* =========================================================
   ARMCEO — Thành phần cho shop, giỏ hàng, thanh toán, form
   (bổ sung cho armceo.css)
   ========================================================= */

/* --- topbar --- */
.topbar a { text-decoration: underline; text-underline-offset: 3px; }
.topbar a:hover { color: #d8b48a; }
.topbar__sub { opacity: .75; }
.topbar__cd { color: #d8b48a; font-variant-numeric: tabular-nums; }

/* --- header dạng đặc (trang trong) --- */
.header--solid { position: sticky; background: rgba(12, 12, 14, .96); backdrop-filter: blur(10px); }
.search input {
  border: 0; background: transparent; color: inherit; font: inherit;
  font-size: 12.5px; width: 100%; min-width: 0; outline: none;
}
.search input::placeholder { color: var(--w-70); }

/* --- nhãn trên ảnh sản phẩm --- */
.tag-sale, .tag-out {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  padding: 5px 9px; border-radius: 2px;
}
.tag-sale { background: #b3321a; color: #fff; }
.tag-out { top: auto; bottom: 10px; left: 10px; background: rgba(16, 16, 19, .86); color: #fff; }

/* --- giá trên thẻ sản phẩm --- */
.p-card__price { display: flex; gap: 8px; align-items: baseline; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.pc-now { font-size: 13px; font-weight: 600; }
.pc-was { font-size: 11.5px; color: var(--muted); text-decoration: line-through; }
.pc-camp {
  display: inline-block; margin-top: 5px; font-size: 10px; letter-spacing: .06em;
  color: #b3321a; border: 1px solid rgba(179, 50, 26, .3); border-radius: 99px; padding: 2px 8px;
}

/* --- khung trang trong --- */
.page { padding-block: clamp(28px, 4vw, 52px) clamp(48px, 7vw, 96px); }
.page-head { margin-bottom: clamp(20px, 3vw, 36px); }
.crumb { font-size: 11.5px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.crumb a:hover { color: var(--ink); }
.page-title {
  font-family: var(--font-display); font-weight: 200; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 60px); letter-spacing: .02em; line-height: 1; margin-top: 12px;
}
.page-sub { color: #5c5c62; margin-top: 12px; font-size: 14px; max-width: 60ch; }

/* --- bộ lọc shop --- */
.shop-layout { display: grid; grid-template-columns: 216px 1fr; gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.filters { position: sticky; top: 100px; display: grid; gap: 26px; }
.filter-group h4 {
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px; font-weight: 600;
}
.filter-list { display: grid; gap: 2px; }
.filter-list button {
  text-align: left; font-size: 13.5px; padding: 7px 10px; border-radius: 2px;
  color: #4a4a50; transition: background .18s, color .18s;
}
.filter-list button:hover { background: var(--paper); color: var(--ink); }
.filter-list button.is-active { background: var(--ink); color: #fff; font-weight: 500; }
.filter-list button span { float: right; opacity: .55; font-size: 11.5px; }

.sortbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.sortbar__count { font-size: 12.5px; color: var(--muted); margin-right: auto; }
.select {
  font: inherit; font-size: 13px; padding: 9px 13px; background: #fff;
  border: 1px solid var(--line); border-radius: 2px; color: inherit;
}
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 20px; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 46px; }
.pagination button {
  min-width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 13px; background: #fff; transition: all .18s;
}
.pagination button:hover { border-color: var(--ink); }
.pagination button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination button:disabled { opacity: .35; cursor: not-allowed; }

.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty h3 { font-family: var(--font-display); font-size: 22px; font-weight: 300; color: var(--ink); margin-bottom: 10px; }

/* --- chi tiết sản phẩm --- */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 76px); align-items: start; }
.pdp__media { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 2px; background: var(--panel); }
.pdp__brand { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.pdp__name {
  font-family: var(--font-display); font-weight: 200; text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.05; letter-spacing: .01em; margin: 12px 0 18px;
}
.pdp__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pdp__price .now { font-family: var(--font-display); font-size: 28px; font-weight: 400; }
.pdp__price .was { color: var(--muted); text-decoration: line-through; font-size: 15px; }
.pdp__price .off { color: #b3321a; font-weight: 600; font-size: 14px; }
.pdp__camp {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
  background: rgba(179, 50, 26, .07); color: #b3321a; border: 1px solid rgba(179, 50, 26, .24);
  border-radius: 2px; padding: 8px 13px;
}
.pdp__label {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin: 30px 0 12px; display: flex; justify-content: space-between;
}
.sizes { display: flex; gap: 9px; flex-wrap: wrap; }
.size {
  min-width: 54px; padding: 11px 6px; text-align: center; font-size: 13px;
  border: 1px solid var(--line); border-radius: 2px; background: #fff; transition: all .15s;
}
.size:hover { border-color: var(--ink); }
.size.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pdp__stock { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.pdp__stock b { color: #b3321a; }
.pdp__actions { display: flex; gap: 12px; margin-top: 28px; }
.pdp__note { margin-top: 26px; display: grid; gap: 9px; font-size: 13px; color: #5c5c62; }
.acc { margin-top: 30px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  cursor: pointer; list-style: none; padding: 15px 0; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; display: flex; justify-content: space-between;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 17px; font-weight: 300; }
.acc details[open] summary::after { content: "\2013"; }
.acc-body { padding-bottom: 18px; color: #5c5c62; font-size: 13.5px; line-height: 1.75; }

/* --- nút --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; border: 1px solid var(--ink); border-radius: 2px;
  background: transparent; color: var(--ink); transition: all .22s var(--ease);
}
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* --- giỏ hàng --- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.cart-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.cart-row__img { aspect-ratio: 4/5; overflow: hidden; border-radius: 2px; background: var(--panel); }
.cart-row__name { font-size: 14.5px; font-weight: 500; }
.cart-row__meta { font-size: 12px; color: var(--muted); margin-top: 5px; }
.cart-row__camp { font-size: 11px; color: #b3321a; margin-top: 4px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; margin-top: 10px; }
.qty button { width: 30px; height: 30px; font-size: 15px; color: #4a4a50; }
.qty button:hover { background: var(--paper); }
.qty span { min-width: 34px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.cart-row__right { text-align: right; display: grid; gap: 10px; justify-items: end; }
.cart-row__price { font-weight: 600; font-size: 14.5px; }
.link-del { font-size: 11.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.link-del:hover { color: #b3321a; }

.summary { background: var(--paper); border-radius: 2px; padding: 26px; position: sticky; top: 100px; }
.summary h3 {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  margin-bottom: 20px; font-weight: 600;
}
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 7px 0; }
.sum-row--muted { color: var(--muted); }
.sum-row--save { color: #b3321a; }
.sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 16px;
}
.sum-total b { font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.coupon { display: flex; gap: 8px; margin: 18px 0; }
.coupon input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 2px;
  padding: 11px 13px; font: inherit; font-size: 13px; background: #fff; text-transform: uppercase;
}
.coupon input:focus { outline: none; border-color: var(--ink); }
.coupon button {
  padding: 0 18px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-size: 11px; letter-spacing: .12em; font-weight: 600; border-radius: 2px;
}
.coupon-msg { font-size: 12px; margin-top: -8px; margin-bottom: 14px; }
.coupon-msg.ok { color: #1d7a4c; }
.coupon-msg.err { color: #b3321a; }
.ship-hint { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.ship-bar { height: 3px; background: var(--line); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--ink); transition: width .4s var(--ease); }

/* --- form --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field input, .field textarea, .field select {
  border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px;
  font: inherit; font-size: 14px; background: #fff; color: inherit; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 88px; }
.field small { font-size: 11.5px; color: var(--muted); }
.field--err input { border-color: #b3321a; }
.field-err { font-size: 11.5px; color: #b3321a; }
.pay-options { display: grid; gap: 10px; }
.pay-opt {
  display: flex; gap: 12px; align-items: flex-start; padding: 15px;
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer; transition: border-color .18s;
}
.pay-opt:hover { border-color: #b8b8be; }
.pay-opt input { margin-top: 3px; accent-color: var(--ink); }
.pay-opt b { font-size: 13.5px; font-weight: 500; display: block; }
.pay-opt small { font-size: 12px; color: var(--muted); }
.pay-opt.is-on { border-color: var(--ink); background: var(--paper); }

.section-title {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}

/* --- trạng thái đơn --- */
.badge {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 99px;
}
.badge--pending { background: #fdf0d5; color: #8a5a10; }
.badge--confirmed { background: #e3ecfa; color: #24508f; }
.badge--shipping { background: #e6f0ff; color: #1c4fa3; }
.badge--completed { background: #e2f3e9; color: #1d7a4c; }
.badge--cancelled { background: #f7e2e0; color: #a3301c; }

.steps { display: flex; margin-bottom: 34px; }
.step {
  flex: 1; text-align: center; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); position: relative; padding-top: 24px;
}
.step::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 11px; height: 11px; border-radius: 50%; background: var(--line);
}
.step::after { content: ""; position: absolute; top: 5px; left: 0; right: 50%; height: 1px; background: var(--line); }
.step:first-child::after { display: none; }
.step.is-on { color: var(--ink); font-weight: 600; }
.step.is-on::before { background: var(--ink); }
.step.is-on::after { background: var(--ink); }

.toast--error { background: #b3321a; }

/* --- trang tĩnh --- */
.prose { max-width: 68ch; color: #4a4a50; font-size: 15px; line-height: 1.85; }
.prose h2 {
  font-family: var(--font-display); font-weight: 200; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px); color: var(--ink); margin: 44px 0 16px; letter-spacing: .02em;
}
.prose p { margin-bottom: 16px; }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.store-card { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.store-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--panel); }
.store-card__body { padding: 22px; }
.store-card h3 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.store-card p { font-size: 13.5px; color: #5c5c62; line-height: 1.7; }

/* --- responsive --- */
@media (max-width: 1100px) {
  .grid-products { grid-template-columns: repeat(3, 1fr); }
  .store-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .pdp { grid-template-columns: 1fr; }

  /* Xếp dọc, bộ lọc cao 979px và đẩy sản phẩm đầu tiên xuống tận y=1372:
     người dùng phải cuộn qua toàn bộ danh mục mới thấy hàng. Đổi sang
     hàng chip cuộn ngang, tổng chiều cao còn khoảng 170px. */
  .filters { position: static; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; min-width: 0; }
  /* Con của flex/grid mặc định min-width:auto nên nở theo nội dung thay vì
     co lại cho overflow-x hoạt động — thiếu dòng này là cả trang tràn ngang. */
  .filter-group { min-width: 0; }
  .filter-group h4 { margin-bottom: 8px; }
  .filter-list {
    min-width: 0;
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .filter-list::-webkit-scrollbar { display: none; }
  .filter-list button {
    flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 10px 16px; min-height: 42px;
  }
  .filter-list button.is-active { border-color: var(--ink); }
  .filter-list button span { float: none; margin-left: 7px; }
}
@media (max-width: 640px) {
  .grid-products { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .form-grid { grid-template-columns: 1fr; }
  /* Safari trên iOS tự phóng to cả trang khi chạm vào ô nhập có cỡ chữ
     dưới 16px. Giữa lúc điền địa chỉ giao hàng, layout nhảy là mất đơn.
     Phải khai đúng các bộ chọn có sẵn (.field input...) vì chúng ưu tiên
     cao hơn 'input' trần. */
  input, select, textarea,
  .select,
  .field input, .field textarea, .field select,
  .coupon input { font-size: 16px; }
  .cart-row { grid-template-columns: 72px 1fr; }
  /* Trải hết chiều ngang thì khối giá rơi xuống dưới ảnh, trông như
     không thuộc về sản phẩm nào. Giữ trong cột nội dung, xếp một hàng. */
  .cart-row__right {
    grid-column: 2; display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px 12px; justify-items: start; text-align: left; margin-top: 10px;
  }
  .link-del { min-height: 40px; display: inline-flex; align-items: center; }
  .store-grid { grid-template-columns: 1fr; }
}