/* ============================================================================
   giacngungon.vn — shop.css
   Giao diện riêng cho mảng Shop. KHÔNG dùng chung với site.css.

   Shop là mảng kinh doanh độc lập: nền sáng, bố cục cửa hàng, không kế thừa
   chủ đề tối của khu nội dung. Sửa tệp này không ảnh hưởng bài viết, và ngược lại.
   ========================================================================== */

/* Bộ biến ánh xạ thẳng sang hệ thống thiết kế của trang nội dung.
   Cửa hàng tách về vận hành nhưng KHÔNG tách về ngôn ngữ thị giác: cùng nền tối
   như phòng ngủ ban đêm, cùng điểm nhấn hổ phách, cùng phông, cùng nhịp chữ.
   Sửa màu ở site.css là cửa hàng đổi theo. */
/* ============================================================================
   HAI BỘ MÀU, MỘT CẤU TRÚC

   Cửa hàng chạy được ở nền tối hoặc nền sáng, chuyển bằng một công tắc ở mục
   Giao diện. Cấu trúc, khoảng cách và cỡ chữ giữ nguyên — chỉ giá trị màu đổi.

   Bộ sáng KHÔNG lấy từ theme thương mại nào. Nó lấy từ chính bức ảnh phòng ngủ
   ban đêm của site: chăn ga trắng ngả kem thành nền, bóng tối xanh xám thành
   chữ, ánh đèn hổ phách thành màu nhấn. Cùng ba lớp đó, đảo vai trò.
   ========================================================================== */

/* ---- Nền tối: giống hệt khu nội dung ---- */
:root {
  --s-bg:        #12161c;
  --s-soft:      #171c24;
  --s-soft2:     #1c222b;
  --s-ink:       #edeae3;
  --s-ink-2:     #d8d4cb;
  --s-dim:       #9a968c;
  --s-line:      #242a33;
  --s-line2:     #333b47;
  --s-accent:    #c9964a;
  --s-accent-d:  #8a672f;
  /* Khi trỏ chuột: nền tối thì màu nhấn SÁNG lên, nền sáng thì ĐẬM xuống.
     Dùng chung --s-accent-d cho cả hai làm nút ở chế độ tối tối đi thay vì sáng
     lên — đổi hành vi so với bản trước khi có hai bộ màu. */
  --s-accent-h:  #d9a659;
  --s-accent-bg: #1b1d1c;
  --s-warn-line: #4a3d24;
  --s-sale-bg:   #2a1c1a;
  --s-on-accent: #14100a;
  --s-blue:      #7f8b9c;
  --s-ok:        #6fae7d;
  --s-sale:      #d1685f;
  --s-shadow:    none;
  --s-radius:    6px;
  --s-shell:     1180px;
  --s-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --s-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Bộ màu Brooklyn ----
   Đây là bản thử để xem trước, không phải mặc định.

   HAI GIÁ TRỊ ĐÃ PHẢI ĐỔI SO VỚI BROOKLYN GỐC, vì bản gốc không đạt ngưỡng đọc:
     hồng nút  #c4818f → chữ trắng trên nền đó chỉ đạt 3,05 (cần 4,5)
     chữ mờ    #777777 → trên nền trắng chỉ đạt 4,48 (cần 4,5)
   Đã đậm lại thành #ac6070 và #6f6870 — sắc vẫn là hồng tro, chỉ đủ đọc hơn.
   Sắc hồng nhạt gốc giữ nguyên ở phần trang trí không mang chữ. */
body.shop-brooklyn {
  --s-bg:        #ffffff;
  --s-soft:      #faf7f8;
  --s-soft2:     #f3ecee;
  --s-ink:       #333333;
  --s-ink-2:     #4a4247;
  --s-dim:       #6f6870;
  --s-line:      #ece5e7;
  --s-line2:     #d8cdd1;
  --s-accent:    #ac6070;   /* hồng tro, đậm vừa đủ để chữ trắng đọc được */
  --s-accent-d:  #8f4d5c;
  --s-accent-h:  #8f4d5c;
  --s-accent-bg: #fdf5f7;
  --s-on-accent: #ffffff;
  --s-blue:      #7d7078;
  --s-ok:        #2f7350;
  --s-sale:      #b03a52;
  --s-warn-line: #ecd2d9;
  --s-sale-bg:   #fdf0f2;
  --s-shadow:    0 1px 3px rgba(51,51,51,.07);
}
/* Hồng nhạt nguyên bản của Brooklyn chỉ dùng ở mảng trang trí không mang chữ */
body.shop-brooklyn .s-promo { background: #fbf2f4; border-color: #f0dfe4; }
body.shop-brooklyn .s-deal { background: linear-gradient(135deg, #fdf5f7 0%, #faf7f8 100%); border-color: #f0dfe4; }
body.shop-brooklyn .s-hero-i, body.shop-brooklyn .s-card .im, body.shop-brooklyn .pdp-img { background: #f7f0f2; }

/* ---- Nền sáng: kem lanh, xanh đêm, hổ phách ---- */
body.shop-sang {
  --s-bg:        #faf8f5;   /* chăn ga trắng ngả kem */
  --s-soft:      #f3f1ec;
  --s-soft2:     #e9e6df;
  --s-ink:       #1f2733;   /* bóng tối xanh xám */
  --s-ink-2:     #33404f;
  --s-dim:       #5d6874;   /* đậm lại: 4.35 chưa đạt ngưỡng 4.5 */
  --s-line:      #e4e0d8;
  --s-line2:     #cdc7bb;
  --s-accent:    #8f6224;   /* hổ phách đậm: chữ trắng trên nút phải đạt 4.5 */
  --s-accent-d:  #74501c;
  --s-accent-h:  #74501c;
  --s-warn-line: #e8d4b4;
  --s-sale-bg:   #fdf0ee;
  --s-accent-bg: #fbf5ea;
  --s-on-accent: #ffffff;
  --s-blue:      #48607d;
  --s-ok:        #2f7350;
  --s-sale:      #a8503f;   /* đỏ đất ấm */
  --s-shadow:    0 1px 3px rgba(31,39,51,.06);
}

* { box-sizing: border-box; }
body.shop {
  margin: 0; background: var(--s-bg); color: var(--s-ink);
  font-family: var(--s-sans); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.shop h1, body.shop h2, body.shop h3 { font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
body.shop :focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }
body.shop a { color: var(--s-ink); text-decoration: none; }
body.shop a:hover { color: var(--s-accent); }
.s-shell { max-width: var(--s-shell); margin: 0 auto; padding: 0 24px; }

/* ---- Dải tiện ích trên cùng ---- */
.s-util { background: var(--s-soft); border-bottom: 1px solid var(--s-line); font-size: 0.82rem; }
.s-util > .s-shell { display: flex; align-items: center; gap: 22px; height: 34px; }
.s-util a { color: var(--s-dim); white-space: nowrap; }
.s-util a:hover { color: var(--s-accent); }
.s-util .sep { margin-left: auto; }
/* Liên kết sang khu nội dung: giữ mạch giữa hai mảng, và là chỗ duy nhất
   người đọc thấy được cấu trúc chuyên mục của site khi đang ở cửa hàng. */
.s-util > .s-shell { flex-wrap: wrap; height: auto; min-height: 38px; padding: 7px 24px; gap: 18px; }
.s-util .home { font-weight: 500; color: var(--s-ink); }
.s-util .home:hover { color: var(--s-accent); }
.s-util .cats { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- Đầu trang cửa hàng ----
   Sao đúng hệ thống của khu nội dung: đường kẻ mảnh, đệm 18px, canh theo đường
   chân chữ, mục điều hướng 15px chữ thường màu mờ. Không nút đặc, không chữ hoa,
   không hộp. Cửa hàng phải đọc như cùng một site, không phải một cửa hàng dán vào. */
.s-head { position: relative; border-bottom: 1px solid var(--s-line); }
/* CON TRUC TIEP, không phải hậu duệ.
   LỖI ĐÃ MẮC: bảng mega chứa một .s-shell lồng bên trong .s-head, nên bộ chọn
   hậu duệ biến nó thành hàng ngang canh giữa — bốn khối chủ đề nằm cạnh nhau,
   tiêu đề trôi vào giữa cột khác, nội dung tràn khỏi bảng. */
.s-head > .s-shell { display: flex; gap: 20px; align-items: center; padding: 18px 24px; flex-wrap: nowrap; }
.s-brand { font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; color: var(--s-accent); }
.s-brand small { display: block; font-weight: 400; font-size: 0.62rem; color: var(--s-dim);
  letter-spacing: .16em; margin-top: 2px; }
.s-nav { display: flex; gap: 18px; font-size: 15px; align-items: center;
  flex-wrap: nowrap; min-width: 0; min-height: 40px; }
/* Dấu hiệu Shop — cùng class và cùng kiểu mặc định với mục Shop bên khu nội dung,
   nên mọi ô tinh chỉnh ở mục Giao diện điều khiển được cả hai. */
/* Sao ĐÚNG kích thước của nút Shop bên khu nội dung: cùng cỡ chữ, cùng đệm,
   cùng chiều cao tối thiểu. Đo được lệch 60x28 so với 65x36 nên hai đầu trang
   không bằng nhau — cùng một phần tử phải cho cùng một kích thước. */
a.nav-shop {
  color: var(--s-accent);
  border: 1px solid color-mix(in srgb, var(--s-accent) 45%, transparent);
  border-radius: 999px; padding: 4px 15px; text-decoration: none;
  display: inline-flex; align-items: center; line-height: 1.5; font-size: 15px;
}
a.nav-shop:hover { color: var(--s-on-accent); background: var(--s-accent); border-color: var(--s-accent); }
a.nav-shop-img { padding: 2px 8px; }
a.nav-shop-img img { height: 24px; width: auto; display: block; }
a.nav-shop-img:hover { background: none; }
a.nav-shop-img:hover img { opacity: .82; }
/* Ảnh đầu trang danh mục */
.s-cathero { aspect-ratio: 21/7; border-radius: var(--s-radius); overflow: hidden;
  background: var(--s-soft); margin-bottom: 22px; }
.s-cathero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-nav > a { color: var(--s-dim); white-space: nowrap; }
.s-nav > a:hover, .s-nav > a.on { color: var(--s-accent); }
.s-back { color: var(--s-dim); }
.s-back:hover { color: var(--s-accent); }
.s-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; min-height: 40px; }
.s-search { position: relative; }
.s-search input {
  width: 168px; height: 34px; padding: 0 32px 0 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  background: none; color: var(--s-ink);
}
.s-search input::placeholder { color: var(--s-dim); }
.s-search input:focus { outline: 2px solid var(--s-accent); outline-offset: -1px; }
.s-search .ic { position: absolute; right: 10px; top: 9px; color: var(--s-dim); pointer-events: none; }
/* Hai nút biểu tượng dùng đúng kiểu viên thuốc viền mảnh của mục Shop bên site chính */
/* Cùng kích thước với nút Shop bên khu nội dung (65x36) để hai đầu trang
   không lệch nhau khi đặt cạnh. */
.s-cart, .s-ic {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--s-accent) 45%, transparent);
  background: none; color: var(--s-accent);
}
.s-cart:hover, .s-ic:hover { background: var(--s-accent); color: var(--s-on-accent); border-color: var(--s-accent); }
.s-cart b, .s-ic b {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; border-radius: 999px;
  background: var(--s-accent); color: var(--s-on-accent); font-size: 10.5px; font-weight: 700; line-height: 17px;
  text-align: center; font-family: var(--s-mono);
}

/* ---- Bảng danh mục ----
   14 nhóm cha, 48 nhóm con. Một danh sách phẳng không đọc được, nên bảng chia
   theo bốn chủ đề: mắt bắt được cấu trúc trước khi đọc từng chữ. */
.s-nav details.mega { position: static; }
.s-nav details.mega > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; color: var(--s-dim); font-size: 15px; padding: 4px 2px;
}
.s-nav details.mega > summary::-webkit-details-marker { display: none; }
.s-nav details.mega > summary::after {
  content: ""; width: 5px; height: 5px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
.s-nav details.mega > summary:hover { color: var(--s-accent); }
.s-nav details.mega[open] > summary { color: var(--s-accent); }
.s-nav details.mega[open] > summary::after { transform: rotate(-135deg) translateY(1px); }

/* Thẻ details đóng thì bảng phải biến mất.
   LỖI ĐÃ MẮC LẦN THỨ HAI cùng dạng: position:absolute làm phần tử thoát khỏi cơ
   chế ẩn sẵn của trình duyệt, nên bảng cao 781px vẫn dựng và phủ lên trang khi
   chưa ai bấm. Lần trước là .qv với display:grid ghi đè thuộc tính hidden. */
.s-nav details.mega:not([open]) .mega-p { display: none !important; }

.mega-p {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--s-bg); border-top: 1px solid var(--s-line);
  border-bottom: 1px solid var(--s-line2); box-shadow: var(--s-shadow);
  padding: 8px 0 4px; max-height: calc(100vh - 90px); overflow-y: auto;
}
.mega-p .s-shell { padding: 0 24px; }

/* Một chủ đề: tiêu đề nhỏ bên trái, các nhóm cha xếp lưới bên phải */
.mega-t {
  display: grid; grid-template-columns: 168px minmax(0, 1fr);
  gap: 26px; padding: 20px 0; border-bottom: 1px solid var(--s-line);
}
.mega-t:last-of-type { border-bottom: 0; }
.mega-t > h3 {
  margin: 2px 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--s-dim); font-weight: 600; line-height: 1.5;
}
.mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 4px 24px; }
.mega-c { break-inside: avoid; padding-bottom: 8px; }
.mega-h {
  display: flex; align-items: baseline; gap: 7px; padding: 0 0 7px; margin-bottom: 5px;
  border-bottom: 1px solid var(--s-line); font-size: 0.9rem; font-weight: 500; color: var(--s-ink);
}
.mega-h em {
  font-style: normal; font-size: 0.72rem; color: var(--s-dim);
  font-family: var(--s-mono); font-weight: 400; margin-left: auto;
}
.mega-h:hover { color: var(--s-accent); border-bottom-color: var(--s-accent); }
.mega-c > a:not(.mega-h) {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 5px 0; font-size: 0.86rem; color: var(--s-dim);
}
.mega-c > a:not(.mega-h):hover { color: var(--s-accent); }
.mega-c span { font-size: 0.72rem; font-family: var(--s-mono); opacity: .7; flex: 0 0 auto; }

.mega-f {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  padding: 16px 0 18px; border-top: 1px solid var(--s-line2); margin-top: 4px;
}
.mega-f a { font-size: 0.88rem; color: var(--s-dim); }
.mega-f a:first-child { color: var(--s-accent); font-weight: 600; }
.mega-f a:hover { color: var(--s-accent); }

@media (max-width: 900px) {
  .mega-t { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .mega-t > h3 { margin: 0; }
  .mega-cols { grid-template-columns: 1fr; gap: 0; }
  .mega-p { max-height: calc(100vh - 130px); }
}

/* ---- Dải đường dẫn phân cấp ---- */
.s-crumbs { border-bottom: 1px solid var(--s-line); font-size: 0.8rem; }
.s-crumbs > .s-shell { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 7px 24px; color: var(--s-dim); flex-wrap: wrap; }
.s-crumbs span { color: var(--s-line2); }

/* ---- Ba cam kết ---- */
.s-promo { border-bottom: 1px solid var(--s-line); }
.s-promo { border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); margin-top: 34px; }
.s-promo > .s-shell { display: flex; gap: 30px; padding: 14px 0; flex-wrap: wrap; max-width: none; }
.s-promo div { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; color: var(--s-dim); }
.s-promo .ic { color: var(--s-accent); flex: 0 0 auto; }
.s-promo strong { color: var(--s-ink); font-weight: 600; }

/* ---- Bố cục hai cột ---- */
.s-page { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 34px; padding: 24px 0 56px; }
/* Chưa đủ hàng để cần cột lọc thì dùng một cột — không dựng khung rỗng */
.s-page-wide { grid-template-columns: minmax(0, 1fr); }
.s-page-wide .s-main { max-width: 1100px; }
.s-count { font-size: 13px; color: var(--s-dim); margin: 0 0 18px; }
.s-title { font-size: 26px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
.s-lede { color: var(--s-dim); margin: 0 0 22px; max-width: 70ch; }

/* ---- Cột lọc ---- */
.s-side { }
.s-fbox { border: 1px solid var(--s-line); border-radius: var(--s-radius); margin-bottom: 14px; background: var(--s-bg); }
.s-fbox > summary {
  list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center;
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--s-dim);
}
.s-fbox > summary:hover { color: var(--s-ink); }
.s-fbox > summary::-webkit-details-marker { display: none; }
.s-fbox > summary::after { content: "−"; margin-left: auto; color: var(--s-dim); font-size: 1rem; }
.s-fbox:not([open]) > summary::after { content: "+"; }
.s-fbody { padding: 0 14px 14px; border-top: 1px solid var(--s-line); padding-top: 12px; }
.s-fbody label { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--s-dim); cursor: pointer; }
.s-fbody label:hover { color: var(--s-ink); }
.s-fbody input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--s-accent); }
.s-fbody .cnt { margin-left: auto; font-size: 12px; color: var(--s-line2); font-family: var(--s-mono); }
.s-range { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--s-dim); }
.s-range input { width: 100%; padding: 7px 9px; border: 1px solid var(--s-line2); border-radius: 4px; font: inherit; font-size: 13px; }
.s-catlist a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 7px 0; font-size: 0.88rem; color: var(--s-ink-2);
}
.s-catlist a.on, .s-catlist a:hover { color: var(--s-accent); }
/* Nhóm cha phân biệt bằng độ đậm và đường kẻ, không bằng màu — dùng màu thì nó
   trông như đang được chọn. */
.s-catlist a:not(.kid) { font-weight: 500; margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--s-line); }
.s-catlist a:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.s-catlist .kid { padding-left: 14px; font-size: 0.85rem; color: var(--s-dim); font-weight: 400; }
.s-catlist .cnt { font-family: var(--s-mono); font-size: 0.76rem; color: var(--s-dim); opacity: .85; flex: 0 0 auto; }
.s-clear { display: block; width: 100%; margin-top: 4px; padding: 9px; text-align: center;
  border: 1px solid var(--s-line2); border-radius: var(--s-radius); background: none;
  font: inherit; font-size: 13px; color: var(--s-dim); cursor: pointer; }
.s-clear:hover { border-color: var(--s-accent); color: var(--s-accent); }

/* ---- Thanh sắp xếp ---- */
.s-bar {
  display: flex; align-items: center; gap: 16px; padding: 11px 14px; margin-bottom: 20px;
  background: var(--s-soft); border: 1px solid var(--s-line); border-radius: var(--s-radius);
  font-size: 13px; color: var(--s-dim); flex-wrap: wrap;
}
.s-bar select { padding: 6px 9px; border: 1px solid var(--s-line2); border-radius: 4px; font: inherit; font-size: 13px; background: var(--s-soft); color: var(--s-ink); }
.s-bar .count { margin-left: auto; }

/* ---- Ô danh mục con ---- */
.s-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 26px; }
.s-tile { border: 1px solid var(--s-line); border-radius: var(--s-radius); overflow: hidden; background: var(--s-soft); text-align: center; }
.s-tile:hover { border-color: var(--s-accent); box-shadow: var(--s-shadow); }
.s-tile .im { aspect-ratio: 4/3; background: var(--s-soft2); display: block; }
.s-tile .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-tile span { display: block; padding: 12px 10px; font-size: 13.5px; font-weight: 500; }

/* ---- Lưới sản phẩm ---- */
.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 22px; align-items: stretch; }
/* Thẻ cao bằng nhau và nút luôn nằm ở đáy: tên sản phẩm dài ngắn khác nhau làm
   hàng nút so le, và một hàng nút không thẳng đọc như lỗi chứ không như thiết kế. */
.s-card { position: relative; background: var(--s-bg); display: flex; flex-direction: column; height: 100%; }
.s-card > .s-btn, .s-card > a.s-btn, .s-card > button.s-btn { margin-top: auto; }
.s-card .im {
  display: block; aspect-ratio: 1/1; background: var(--s-soft2);
  border: 1px solid var(--s-line); border-radius: var(--s-radius); overflow: hidden; position: relative;
}
.s-card .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-card:hover .im { border-color: var(--s-line2); }
.s-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: var(--s-sale); color: var(--s-on-accent); font-size: 0.74rem; font-weight: 700;
  padding: 3px 9px; border-radius: 4px; letter-spacing: .01em;
}
.s-badge.soon { background: var(--s-accent); color: var(--s-on-accent); }
.s-badge.out { background: color-mix(in srgb, var(--s-bg) 78%, transparent);
  color: var(--s-ink); border: 1px solid var(--s-line2); backdrop-filter: blur(4px); }
.s-card h3 {
  margin: 12px 0 6px; font-size: 0.93rem; font-weight: 500; line-height: 1.42;
  /* Cắt ở hai dòng để mọi thẻ có cùng chiều cao phần chữ */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.s-card h3 a { color: var(--s-ink); }
.s-card h3 a:hover { color: var(--s-accent); }
.s-card .pr { display: flex; align-items: baseline; gap: 9px; margin: 0 0 12px; font-family: var(--s-mono); min-height: 1.4em; }
.s-card .now { color: var(--s-ink); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.s-card .was { color: var(--s-dim); text-decoration: line-through; font-size: 0.82rem; }
/* Chỉ tô màu giảm giá khi thật sự có giá gốc cao hơn — tô đỏ mọi mức giá làm
   người mua hết phân biệt được đâu là hàng đang giảm. */
.s-card .pr:has(.was) .now { color: var(--s-sale); }
.s-card .nopr { color: var(--s-dim); font-size: 13px; font-family: var(--s-sans); }

/* ---- Nút ---- */
.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--s-accent); border-radius: var(--s-radius);
  background: var(--s-accent); color: var(--s-on-accent); font: inherit; font-size: 0.92rem;
  font-weight: 600; cursor: pointer; text-align: center; line-height: 1.3;
}
.s-btn:hover { background: var(--s-accent-h); border-color: var(--s-accent-h); color: var(--s-on-accent); }
/* LỖI ĐÃ MẮC: nút phụ mất viền nên "Xem chi tiết" đọc như chữ trần cạnh một nút
   đặc — hai thẻ trong cùng một hàng trông như hai loại phần tử khác nhau. */
.s-btn.ghost { background: none; color: var(--s-ink); border-color: var(--s-line2); }
.s-btn.ghost:hover { background: none; border-color: var(--s-accent); color: var(--s-accent); }
.s-btn[disabled] { background: none; border-color: var(--s-line); color: var(--s-dim); cursor: default; }
.s-btn.w-auto { width: auto; padding: 0 20px; }

.s-empty { padding: 50px 20px; text-align: center; color: var(--s-dim); border: 1px dashed var(--s-line2); border-radius: var(--s-radius); }

/* ---- Chân trang cửa hàng ---- */
.s-foot { margin-top: 60px; border-top: 1px solid var(--s-line); font-size: 0.88rem; color: var(--s-dim); }
.s-foot > .s-shell { display: flex; gap: 40px; padding: 30px 24px; flex-wrap: wrap; }
.s-foot h4 { margin: 0 0 11px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--s-dim); font-weight: 600; }
.s-foot a { display: block; padding: 4px 0; color: var(--s-ink-2); }
.s-foot a:hover { color: var(--s-accent); }
.s-foot > .s-shell { gap: 34px; padding: 34px 24px; }
.s-sub p { color: var(--s-dim); }
.s-subrow input { background: var(--s-soft); border-color: var(--s-line2); color: var(--s-ink); }
.s-subrow input::placeholder { color: var(--s-dim); }
.s-foot .col { min-width: 170px; }
.s-legal { border-top: 1px solid var(--s-line); }
.s-legal > .s-shell { padding: 16px 24px; font-size: 0.8rem; color: var(--s-dim); }

@media (max-width: 1100px) {
  .s-search input { width: 150px; }
  .s-nav > a { font-size: 12px; }
}
@media (max-width: 980px) {
  .s-page { grid-template-columns: 1fr; gap: 20px; }
  .s-side { order: 2; }
  /* Một hàng duy nhất, không gấp. Ô chữ Shop lấy ĐÚNG kích thước của nút Shop
     bên khu nội dung ở cùng ngưỡng màn hình — đo được lệch 60x28 so với 65x36. */
  .s-head > .s-shell { padding: 18px 16px; flex-wrap: nowrap; gap: 12px; }
  .s-tools { gap: 8px; }
  /* Cùng chiều cao 40px với khu nội dung, và hai nút biểu tượng theo cùng */
  a.nav-shop { font-size: 14px; padding: 6px 16px; min-height: 40px; }
  .s-cart, .s-ic { width: 40px; height: 40px; }
}
@media (max-width: 560px) {
  .s-shell { padding: 0 16px; }
  .s-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .s-card h3 { font-size: 12px; }
  .s-util > .s-shell { gap: 14px; font-size: 11.5px; }
  .s-promo > .s-shell { gap: 14px; }
}

/* ---- Trang một cột: sản phẩm, giỏ hàng, chính sách ---- */
.s-page-1 { padding: 30px 0 60px; max-width: 900px; }
.s-page-1 h1.s-title { margin-bottom: 14px; }
.s-page-1 h2 { font-size: 19px; font-weight: 600; margin: 34px 0 10px; }
.s-page-1 ul { padding-left: 20px; }
.s-page-1 li { margin-bottom: 7px; }

/* Thanh tiến trình mua */
.steps { display: flex; list-style: none; padding: 0; margin: 0 0 26px; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--s-dim); font-size: 13px; }
.steps li + li::before { content: ""; width: 24px; height: 1px; background: var(--s-line2); margin: 0 12px; }
.steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--s-line2); font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.steps .now { color: var(--s-ink); font-weight: 600; }
.steps .now b { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); }
.steps .done b { border-color: var(--s-ok); color: var(--s-ok); }
.steps-in { margin: 34px 0 6px; padding-top: 26px; border-top: 1px solid var(--s-line); }

/* Dòng trong giỏ */
.cline { display: grid; grid-template-columns: 1fr auto auto 32px; gap: 14px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--s-line); }
.cl-n { display: flex; flex-direction: column; gap: 3px; font-weight: 500; }
.cl-n em { font-style: normal; font-size: 13px; color: var(--s-dim); font-weight: 400; }
.cl-q { display: flex; align-items: center; gap: 4px; }
.cl-q button { width: 34px; height: 34px; border: 1px solid var(--s-line2); background: var(--s-soft);
  color: var(--s-ink); border-radius: 5px; font-size: 17px; cursor: pointer; line-height: 1; }
.cl-q button:hover { border-color: var(--s-accent); color: var(--s-accent); }
.cl-q b { min-width: 30px; text-align: center; font-family: var(--s-mono); }
.cl-t { font-family: var(--s-mono); min-width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.cl-x { width: 30px; height: 30px; border: 0; background: none; color: var(--s-dim); font-size: 20px;
  cursor: pointer; border-radius: 5px; }
.cl-x:hover { color: var(--s-sale); background: var(--s-sale-bg); }

#cartsum { max-width: 380px; margin: 20px 0 8px auto; }
.crow { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; color: var(--s-dim); }
.crow b { font-family: var(--s-mono); color: var(--s-ink); font-variant-numeric: tabular-nums; }
.crow em { font-style: normal; font-size: 12.5px; }
.crow-t { border-top: 1px solid var(--s-line2); margin-top: 4px; padding-top: 12px; font-size: 15px; color: var(--s-ink); }
.crow-t b { color: var(--s-sale); font-size: 20px; }

/* Biểu mẫu đặt hàng */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; font-size: 13px; color: var(--s-dim); margin-bottom: 5px; }
.fld > span i { color: var(--s-sale); font-style: normal; margin-left: 2px; }
.fld > span em { font-style: normal; opacity: .8; }
.fld input, .fld select, .fld textarea { width: 100%; padding: 11px 13px; font: inherit; font-size: 14.5px;
  background: var(--s-soft); color: var(--s-ink); border: 1px solid var(--s-line2); border-radius: var(--s-radius); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--s-accent); outline-offset: -1px; }
.pays { display: grid; gap: 10px; margin: 12px 0; }
.pay { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--s-line2);
  border-radius: var(--s-radius); background: var(--s-soft); cursor: pointer; }
.pay:has(input:checked) { border-color: var(--s-accent); background: var(--s-accent-bg); }
.pay span { display: flex; flex-direction: column; gap: 3px; }
.pay strong { font-weight: 600; }
.pay em { font-style: normal; font-size: 13px; color: var(--s-dim); }

/* Các bước tiếp theo trên trang xác nhận */
.nextsteps { counter-reset: ns; list-style: none; padding: 0 !important; margin: 14px 0 26px; }
.nextsteps li { counter-increment: ns; position: relative; padding: 12px 0 12px 40px;
  border-bottom: 1px solid var(--s-line); margin: 0 !important; }
.nextsteps li:last-child { border-bottom: 0; }
.nextsteps li::before { content: counter(ns); position: absolute; left: 0; top: 12px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--s-soft); border: 1px solid var(--s-line2);
  font-family: var(--s-mono); font-size: 12px; color: var(--s-accent); }

@media (max-width: 560px) {
  .cline { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .cl-t { grid-column: 1; text-align: left; }
  .cl-x { grid-column: 2; justify-self: end; }
  #cartsum { max-width: none; }
}

/* ===== TRANG CHỦ CỬA HÀNG ================================================ */
.s-hero {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 40px;
  align-items: center; padding: 34px 0 0;
}
.s-hero-t h1 { font-size: 40px; line-height: 1.12; margin: 0 0 14px; letter-spacing: -.02em; color: var(--s-ink); }
.s-hero-t p { font-size: 16px; color: var(--s-dim); margin: 0 0 24px; max-width: 46ch; }
.s-hero-i { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--s-soft2); }
.s-hero-i img { width: 100%; height: 100%; object-fit: cover; display: block; }

.s-row { padding: 42px 0 0; }
.s-rowhead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--s-line); }
.s-rowhead h2 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: var(--s-ink); }
.s-rowhead a { margin-left: auto; font-size: 13px; color: var(--s-accent); font-weight: 600; }

.s-tile span em { display: block; font-style: normal; font-size: 12px; color: var(--s-dim);
  font-family: var(--s-mono); font-weight: 400; margin-top: 3px; }

/* Ưu đãi trong ngày */
.s-deal {
  display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1fr); gap: 34px;
  align-items: center; margin: 46px 0 0; padding: 28px;
  background: var(--s-soft); border: 1px solid var(--s-line2); border-radius: var(--s-radius);
}
.s-deal-i { aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--s-soft); }
.s-deal-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 700; color: var(--s-accent); margin: 0 0 8px; }
.s-deal-t h2 { font-size: 25px; margin: 0 0 8px; line-height: 1.24; }
.s-deal-t > p { color: var(--s-dim); margin: 0 0 16px; }
.s-deal-p { display: flex; align-items: baseline; gap: 11px; margin: 0 0 16px !important; font-family: var(--s-mono); }
.s-deal-p .now { font-size: 27px; color: var(--s-sale); font-weight: 700; font-variant-numeric: tabular-nums; }
.s-deal-p .was { text-decoration: line-through; color: var(--s-dim); }
.s-deal-p .off { background: var(--s-sale); color: var(--s-on-accent); font-size: 0.82rem; font-weight: 600;
  padding: 3px 9px; border-radius: 4px; font-family: var(--s-sans); }
.s-count { font-size: 13.5px; color: var(--s-dim); margin-bottom: 16px; }
.s-count b { font-family: var(--s-mono); color: var(--s-sale); font-size: 16px; }

/* Thương hiệu */
.s-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.s-brands a { border: 1px solid var(--s-line); border-radius: var(--s-radius); padding: 15px 16px; background: var(--s-soft); }
.s-brands a:hover { border-color: var(--s-accent); }
.s-brands b { display: block; font-size: 13.5px; font-weight: 600; }
.s-brands span { font-size: 12px; color: var(--s-dim); font-family: var(--s-mono); }

/* Bài phân tích */
.s-newsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.s-news { display: block; border: 1px solid var(--s-line); border-radius: var(--s-radius);
  padding: 17px 19px; background: var(--s-soft); }
.s-news:hover { border-color: var(--s-accent); }
.s-news b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; margin-bottom: 7px; }
.s-news span { font-size: 13px; color: var(--s-dim); line-height: 1.55; }

@media (max-width: 980px) {
  .s-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 0 0; }
  .s-hero-t h1 { font-size: 30px; }
  .s-deal { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .s-deal-t h2 { font-size: 21px; }
  .mega-p { position: static; transform: none; width: auto; margin: 10px 0 0; box-shadow: none; }
}

/* ===== GIAI ĐOẠN 2 ======================================================== */

/* Ưu đãi hiện có */
.s-offers { border: 1px solid var(--s-warn-line); background: var(--s-accent-bg); border-radius: 8px;
  padding: 14px 17px; margin: 18px 0 0; }
.s-offers .s-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.s-offers ul { margin: 0; padding-left: 20px; }
.s-offers li { font-size: 13.5px; margin-bottom: 5px; }
.s-offers li:last-child { margin-bottom: 0; }

/* Thẻ nội dung sản phẩm — dùng ô chọn radio nên chạy không cần JavaScript */
.ptabs { display: flex; flex-wrap: wrap; margin-top: 18px;
  border-bottom: 1px solid var(--s-line); }
.ptabs > input { position: absolute; opacity: 0; pointer-events: none; }
.ptabs > label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 16px; font-size: 13.5px; color: var(--s-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.ptabs > label em { font-style: normal; font-size: 0.78rem; opacity: .75; font-family: var(--s-mono); margin-left: 4px; }
.ptabs > label:hover { color: var(--s-ink); }
.ptabs > input:checked + label {
  color: var(--s-ink); font-weight: 600; border-bottom-color: var(--s-accent); background: var(--s-soft);
}
.ptabs > input:focus-visible + label { outline: 2px solid var(--s-accent); outline-offset: -2px; }
.ptabs > label.tab-warn .ic { color: var(--s-sale); }
.ptabs > label.tab-ok .ic { color: var(--s-ok); }
.ptab-p { order: 99; width: 100%; display: none; padding: 24px 2px 8px; }
.ptabs > input:checked + label + .ptab-p { display: block; }
.ptab-p > *:first-child { margin-top: 0; }

/* Nút phụ trên ảnh thẻ sản phẩm */
.im-w { position: relative; }
.im-act { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 7px;
  opacity: 0; transform: translateX(-6px); transition: opacity .15s ease, transform .15s ease; }
.s-card:hover .im-act, .im-act:focus-within { opacity: 1; transform: none; }
.ibtn { width: 32px; height: 32px; border: 1px solid var(--s-line2); border-radius: 6px;
  background: color-mix(in srgb, var(--s-bg) 82%, transparent); backdrop-filter: blur(4px);
  color: var(--s-ink); display: grid; place-items: center; cursor: pointer; }
.ibtn:hover { border-color: var(--s-accent); color: var(--s-accent); }
.ibtn.on { border-color: var(--s-sale); color: var(--s-sale); }
@media (hover: none) { .im-act { opacity: 1; transform: none; } }

/* Nút biểu tượng ở đầu trang */
/* Khung xem nhanh */
.qv { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
/* Thuộc tính hidden phải thắng display — thiếu dòng này thì khung rỗng luôn hiện. */
.qv[hidden] { display: none !important; }
.qv-bg { position: absolute; inset: 0; background: rgba(8,10,13,.72); }
.qv-box { position: relative; background: var(--s-soft); border-radius: 12px; max-width: 760px; width: 100%;
  max-height: 88vh; overflow: auto; box-shadow: none; }
.qv-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0;
  background: none; font-size: 25px; line-height: 1; color: var(--s-dim); cursor: pointer; z-index: 2; }
.qv-x:hover { color: var(--s-ink); }
.qv-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 24px; padding: 24px; }
.qv-i { aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--s-soft2); }
.qv-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qv-t h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.28; }
.qv-t .sub { color: var(--s-dim); font-size: 13.5px; margin: 0 0 14px; }
.qv-t .pr { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-family: var(--s-mono); }
.qv-t .pr .now { font-size: 22px; color: var(--s-sale); font-weight: 700; }
.qv-t .pr .was { text-decoration: line-through; color: var(--s-dim); font-size: 13px; }
.qv-sp { margin: 0 0 14px; font-size: 13px; }
.qv-sp div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--s-line); }
.qv-sp span:last-child { font-family: var(--s-mono); }
.qv-lim { font-size: 12.5px; color: var(--s-dim); border-left: 2px solid var(--s-sale);
  padding-left: 11px; margin: 0 0 16px; }
.qv-more { display: block; margin-top: 10px; font-size: 13px; color: var(--s-accent); font-weight: 600; }
@media (max-width: 680px) { .qv-in { grid-template-columns: 1fr; gap: 16px; padding: 34px 18px 20px; } }

/* Nhận tin ở chân cửa hàng */
.s-sub { min-width: 250px; }
.s-sub p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; }
.s-subrow { display: flex; gap: 8px; }
.s-subrow input { flex: 1; min-width: 0; padding: 9px 12px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--s-line2); border-radius: var(--s-radius); background: var(--s-soft); color: var(--s-ink); }
.s-subrow input:focus { outline: 2px solid var(--s-accent); outline-offset: -1px; }
.s-subrow .s-btn { min-height: 38px; padding: 0 16px; }

/* Bảng trên trang xác nhận đơn */
.s-tbl { overflow-x: auto; margin: 18px 0; }
.s-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.s-tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--s-dim); padding: 9px 10px; border-bottom: 1px solid var(--s-line2); }
.s-tbl td { padding: 10px; border-bottom: 1px solid var(--s-line); }
.s-tbl .mono { font-family: var(--s-mono); font-variant-numeric: tabular-nums; }

/* ===== TRANG SẢN PHẨM ======================================================
   LỖI ĐÃ MẮC: toàn bộ bố cục trang sản phẩm nằm trong site.css, mà trang cửa
   hàng không nạp tệp đó. Kết quả: khối mua mất bố cục hai cột, ảnh chiếm hết
   chiều rộng, trang cao 4574px cho một sản phẩm.

   Thiết kế lại theo hướng thương mại: quyết định mua gọn trong một khung nhìn,
   phần kiểm chứng nằm sau và gấp lại. Không dàn trải như trang bài viết. */

.pdp { max-width: none; }
.pdp-top {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,0.82fr);
  gap: 40px; align-items: start; padding: 26px 0 0;
}
.pdp-media { position: sticky; top: 22px; }
.pdp-img {
  aspect-ratio: 1/1; border: 1px solid var(--s-line); border-radius: var(--s-radius);
  overflow: hidden; background: var(--s-soft);
}
.pdp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.pdp-thumbs a { width: 68px; height: 68px; border: 1px solid var(--s-line); border-radius: 5px; overflow: hidden; display: block; }
.pdp-thumbs a:hover { border-color: var(--s-accent); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdp-buy-in { padding: 0; }
.pdp-cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--s-dim); margin: 0 0 10px; font-weight: 600; }
.pdp-buy h1 { font-size: 1.75rem; line-height: 1.24; margin: 0 0 8px; font-weight: 500; }
.pdp-sub { color: var(--s-dim); font-size: 0.95rem; margin: 0 0 20px; }
.pdp-price-row { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 18px; }
.pdp-price { font-family: var(--s-mono); font-size: 2.1rem; line-height: 1;
  color: var(--s-ink); font-variant-numeric: tabular-nums; }
.pdp-old { text-decoration: line-through; color: var(--s-dim); font-family: var(--s-mono); font-size: 0.95rem; }
.pdp-off { background: var(--s-sale); color: var(--s-on-accent); font-size: 0.78rem; font-weight: 600;
  padding: 3px 8px; border-radius: 4px; }
.pdp-note { font-size: 0.85rem; color: var(--s-dim); margin: -10px 0 16px; }

/* Hàng hành động: một hàng, một nút */
.pdp-act { display: flex; gap: 10px; margin-bottom: 12px; }
.qtybox { display: flex; align-items: center; border: 1px solid var(--s-line2);
  border-radius: var(--s-radius); overflow: hidden; flex: 0 0 auto; }
.qtybox button { width: 40px; min-height: 46px; border: 0; background: none; color: var(--s-ink);
  font-size: 19px; cursor: pointer; line-height: 1; }
.qtybox button:hover { background: color-mix(in srgb, var(--s-accent) 16%, transparent); color: var(--s-accent); }
.qtybox input { width: 42px; border: 0; background: none; color: var(--s-ink); text-align: center;
  font-family: var(--s-mono); font-size: 0.95rem; padding: 0; }
.btn-buy { flex: 1; min-height: 46px; }
.added-note { border: 1px solid var(--s-ok); border-radius: var(--s-radius); padding: 10px 13px;
  font-size: 0.88rem; margin-bottom: 12px;
  background: color-mix(in srgb, var(--s-ok) 12%, transparent); }

.pdp-facts { list-style: none; padding: 0; margin: 16px 0 0; }
.pdp-facts li { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--s-line); font-size: 0.87rem; color: var(--s-dim); }
.pdp-facts .ic { color: var(--s-accent); flex: 0 0 auto; }
.pdp-facts strong { color: var(--s-ink); font-weight: 500; }

.pdp-soon { border: 1px solid var(--s-line2); border-radius: var(--s-radius); padding: 16px 18px;
  background: var(--s-soft); }
.pdp-soon p { margin: 0 0 10px; font-size: 0.89rem; color: var(--s-dim); }
.pdp-soon p:last-child { margin-bottom: 0; }
.soon-tag { display: inline-flex !important; align-items: center; gap: 7px;
  font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--s-accent) !important;
  border: 1px solid color-mix(in srgb, var(--s-accent) 40%, transparent);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 12px !important; }
.soon-do { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--s-line); }
.soon-do strong { color: var(--s-ink); }

.pdp-links { font-size: 0.85rem; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--s-line); }

/* Phần kiểm chứng: gọn, không dàn trải */
.pdp-detail { max-width: none; margin-top: 44px; }
.pdp-lead { font-size: 0.95rem; color: var(--s-dim); max-width: 72ch; margin: 0 0 20px; }
.pdp-h { font-size: 1.12rem; margin: 0 0 4px; font-weight: 500; }
.pdp-hint { font-size: 0.87rem; color: var(--s-dim); max-width: 72ch; margin: 0 0 6px; }

.specs { margin: 0; }
.spec { display: grid; grid-template-columns: minmax(150px,32%) 1fr; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--s-line); }
.spec:last-child { border-bottom: 0; }
.spec dt { color: var(--s-dim); font-size: 0.88rem; }
.spec dd { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.spec-v { font-family: var(--s-mono); font-size: 0.92rem; }
.spec-n { font-size: 0.83rem; color: var(--s-dim); }
.spec-src { font-size: 0.76rem; color: var(--s-dim); opacity: .75; }
.chua { color: var(--s-sale); font-style: italic; }
ul.tick { list-style: none; padding: 0; margin: 0; }
ul.tick li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 0.92rem; }
ul.tick li:last-child { margin-bottom: 0; }
ul.tick li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 9px; height: 5px;
  border-left: 2px solid var(--s-accent); border-bottom: 2px solid var(--s-accent); transform: rotate(-45deg); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 9px 0; border-bottom: 1px solid var(--s-line); font-size: 0.92rem; }
ul.plain li:last-child { border-bottom: 0; }
.qa h3 { margin: 16px 0 4px; font-size: 0.95rem; font-weight: 500; }
.qa h3:first-child { margin-top: 0; }
.qa p { margin: 0; font-size: 0.92rem; color: var(--s-dim); }
.msg-bad { border: 1px solid var(--s-sale); border-radius: var(--s-radius); padding: 11px 14px;
  background: color-mix(in srgb, var(--s-sale) 10%, transparent); }
.msg-bad p { margin: 0; color: var(--s-sale); font-size: 0.88rem; }
.disclose { border: 1px solid var(--s-line2); border-left-width: 2px; border-left-color: var(--s-accent);
  border-radius: var(--s-radius); padding: 12px 15px; margin: 26px 0 0; background: var(--s-soft); }
.disclose p { margin: 0; font-size: 0.86rem; color: var(--s-dim); }

/* Dải mua dính đáy trên màn hình hẹp */
.pdp-bar { display: none; }

@media (max-width: 900px) {
  .pdp-top { grid-template-columns: 1fr; gap: 22px; padding-top: 18px; }
  .pdp-media { position: static; }
  .pdp-price { font-size: 1.85rem; }
  .pdp-detail { margin-top: 32px; }
  .spec { grid-template-columns: 1fr; gap: 2px; }
  .pdp-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--s-bg) 95%, transparent); backdrop-filter: blur(8px);
    border-top: 1px solid var(--s-line2);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .pdp-bar-in { display: flex; align-items: center; gap: 12px; max-width: 620px; margin: 0 auto; }
  .pdp-bar-p { font-family: var(--s-mono); font-size: 1.15rem; color: var(--s-ink); flex: 1;
    font-variant-numeric: tabular-nums; }
  .pdp-bar .s-btn, .pdp-bar .btn { width: auto; min-height: 44px; padding: 0 22px; }
  .pdp { padding-bottom: 76px; }
}
.s-row-tight { padding-top: 40px; }
.s-row-tight .s-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }

/* ---- Khối "Phù hợp với ai" ----
   Ba cột: tiêu chí · phù hợp · không phù hợp nếu. Cột thứ ba là phần người mua
   dùng để tự loại mình ra — nó được đặt ngang hàng, không nhỏ hơn, không mờ đi. */
.fits { border-top: 1px solid var(--s-line); }
.fit-h, .fit-r {
  display: grid; grid-template-columns: minmax(110px, 22%) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--s-line);
}
.fit-r2 { grid-template-columns: minmax(110px, 26%) minmax(0, 1fr); }
.fit-h {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--s-dim); font-weight: 600; padding-top: 12px;
}
.fit-k { color: var(--s-dim); font-size: 0.88rem; }
.fit-v { font-size: 0.92rem; }
.fit-v em { display: block; font-style: normal; font-size: 0.83rem; color: var(--s-dim); margin-top: 2px; }
.fit-x { font-size: 0.88rem; color: var(--s-sale); }
.fit-x i { color: var(--s-dim); font-style: normal; opacity: .6; }
@media (max-width: 640px) {
  .fit-h { display: none; }
  .fit-r, .fit-r2 { grid-template-columns: 1fr; gap: 3px; padding: 13px 0; }
  .fit-k { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .1em; }
  .fit-x::before { content: "Không phù hợp nếu: "; color: var(--s-dim); }
}

/* === Giao diện do người dùng đặt === */
:root {
  --measure: 86ch;
}

/* === Tinh chỉnh dấu hiệu Shop === */
a.nav-shop { color: #4ac9c1; }
a.nav-shop { font-weight: 600; }
a.nav-shop { border-radius: 6px; }
.s-head a.nav-shop { color: #4ac9c1; }
.s-head a.nav-shop { font-size: 15; }
.s-head a.nav-shop { font-weight: 600; }
.s-head a.nav-shop { border-radius: 6px; }
.s-head a.nav-shop:hover { color: #ffffff; }
.s-head a.nav-shop img { height: 24px; }