/* ════════════════════════════════════════════════════════════
   SILENT.S — GIỎ HÀNG WEB CHÍNH · css/gio-hang.css  (đi cùng js/gio-hang.js; nạp không chặn vẽ)
   Nút túi đầu trang ở noir.css (màn đầu). Ở đây: báo «đã thêm», ngăn kéo giỏ, form gửi order, chép đơn, màn đã nhận đơn.
   ════════════════════════════════════════════════════════════ */
#gioBao { position:fixed; left:50%; bottom:110px; transform:translate(-50%, 160%); z-index:2147482500; background:#141210; color:#ece6da;
  padding:11px 18px; border-radius:99px; font-size:13px; box-shadow:0 8px 30px rgba(0,0,0,.35); transition:transform .35s; cursor:pointer;
  white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis; }
#gioBao.on { transform:translate(-50%, 0); }
#gioBao u { color:#f5a3c3; margin-left:6px; }

#gioKeo { position:fixed; inset:0; z-index:2147483000; pointer-events:none; }
#gioKeo .gio-nen { position:absolute; inset:0; background:rgba(8,7,6,.55); opacity:0; transition:opacity .3s; }
#gioKeo .gio-tam { position:absolute; top:0; right:0; bottom:0; width:min(440px, 100vw); background:var(--bg); color:var(--ink, inherit);
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1); box-shadow:-10px 0 40px rgba(0,0,0,.3); }
#gioKeo.mo { pointer-events:auto; } #gioKeo.mo .gio-nen { opacity:1; } #gioKeo.mo .gio-tam { transform:none; }
html.gio-dang-mo { overflow:hidden; }
.gio-dau { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); }
.gio-dau b { font-family:var(--f-tieude, serif); font-weight:400; font-size:20px; }
.gio-x { border:0; background:none; color:inherit; font-size:18px; cursor:pointer; padding:4px 8px; }
.gio-than { flex:1; overflow:auto; padding:4px 20px 22px; -webkit-overflow-scrolling:touch; }
.gio-trong { color:var(--muted); margin:28px 0 16px; }

/* mỗi món: ảnh nhỏ · [tên ……… giá ✕] · [ô phiên bản/size ▾ · − 1 +] · dòng mộc số */
.gio-dong { display:grid; grid-template-columns:56px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.gio-anh { width:56px; height:56px; border-radius:10px; overflow:hidden; background:rgba(127,127,127,.08); display:block; }
.gio-anh img { width:100%; height:100%; object-fit:contain; }
.gio-tt { display:grid; gap:0; min-width:0; }
.g2-dau { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.g2-dau > b { font-weight:500; font-size:14.5px; }
.g2-phai { display:inline-flex; align-items:center; gap:2px; margin-right:-6px; white-space:nowrap; }
.gio-gia { font-weight:500; font-size:14px; }
.g2-phai .gio-bo { width:26px; height:24px; border:0; background:none; color:var(--muted); cursor:pointer; font-size:12px; }
.g2-hang { display:flex; align-items:center; gap:6px; margin-top:6px; }
.gg-chon { display:inline-flex; gap:6px; flex-wrap:nowrap; min-width:0; }
.gg-sel { -webkit-appearance:none; appearance:none; padding:9px 34px 9px 12px; border:1px solid var(--line); border-radius:10px; color:inherit; font:inherit; font-size:14px; cursor:pointer; max-width:100%;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center / 11px no-repeat; }
.gg-sel:focus { outline:none; border-color:var(--pink); }
.g2-hang .gg-sel { padding:5px 24px 5px 9px; font-size:12.5px; border-radius:8px; background-position:right 8px center; max-width:120px; }
.gio-sl { display:inline-flex; align-items:center; margin-left:auto; border:1px solid var(--line); border-radius:8px; flex:none; }
.gio-sl button { width:26px; height:28px; border:0; background:none; color:inherit; cursor:pointer; font-size:14px; }
.gio-sl span { min-width:18px; text-align:center; font-size:13px; }
.gio-moc { display:block; margin-top:5px; font-size:11.5px; line-height:1.45; color:#c2456b; }
.gio-moc b { font-weight:600; }

.gio-tong { display:flex; justify-content:space-between; padding:12px 0 2px; font-size:15px; } .gio-tong b { font-size:18px; }
.gio-tong small { color:var(--muted); font-size:12px; }
.gio-ghi { font-size:12px; color:var(--muted); margin:2px 0 10px; line-height:1.55; }
.gio-chep { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.gio-chep-nut { padding:7px 14px; border:1px solid var(--pink); border-radius:99px; background:none; color:var(--pink); font:inherit; font-size:12.5px; cursor:pointer; }
.gio-chep a { font-size:12.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }

.gio-form { display:grid; gap:9px; }
.g2f-2 { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.gio-form label { display:grid; gap:4px; font-size:11.5px; color:var(--muted); }
.gio-form input, .gio-form textarea { padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--ink, inherit); font:inherit; font-size:14px; width:100%; box-sizing:border-box; }
.gio-form .gg-sel { color:var(--ink, inherit); font-size:14px; padding:9px 30px 9px 11px; border-radius:9px; width:100%; }
.g2f-them { border-top:1px solid var(--line); }
.g2f-them summary { cursor:pointer; padding:9px 0; font-size:12.5px; color:var(--muted); list-style:none; display:flex; justify-content:space-between; }
.g2f-them summary::-webkit-details-marker { display:none; }
.g2f-them summary::after { content:'+'; color:var(--pink); } .g2f-them[open] summary::after { content:'−'; }
.g2f-them label { margin-bottom:8px; }
.gio-gui { width:100%; margin-top:4px; }
.gio-gui[disabled] { opacity:.6; cursor:progress; }
.gio-loi { color:#c2456b; font-size:13px; margin:0; }

.gio-xong { text-align:center; padding:28px 0; display:grid; gap:12px; justify-items:center; }
.gio-tick { width:56px; height:56px; border-radius:50%; border:1px solid var(--pink); color:var(--pink); display:grid; place-items:center; font-size:24px; }
.gio-xong h3 { font-family:var(--f-tieude, serif); font-weight:400; font-size:24px; margin:0; }
.gio-ma { font-size:13px; letter-spacing:.12em; color:var(--muted); margin:0; }
.gio-buoc { text-align:left; font-size:14px; line-height:1.6; padding-left:1.2em; display:grid; gap:6px; margin:6px 0; }
.gio-mo { font-size:12.5px; color:var(--muted); margin:0; }
.gio-xong .gio-chep { justify-content:center; }

/* ════ TỜ CHI TIẾT (SSGio.veChon) — SS chốt 26/10 ════ */
.pm-gio { display:grid; gap:8px; margin-bottom:6px; }
.gio-lb { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.gio-pb { display:flex; flex-wrap:wrap; gap:6px; }
.gio-pbn { display:grid; gap:2px; text-align:left; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:none; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.gio-pbn b { font-weight:500; font-size:12px; color:var(--muted); }
.gio-pbn.on { border-color:var(--pink); box-shadow:inset 0 0 0 1px var(--pink); } .gio-pbn.on b { color:var(--pink); }

/* thước trượt */
.gt { --p:50%; --pf:.5; display:grid; gap:2px; padding:2px 0 0; }
.gt2-dau { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.gt2-l { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); flex:none; }
.gt2-l i { font-style:normal; letter-spacing:.06em; margin-left:2px; opacity:.75; }
.gio-do { white-space:nowrap; font-size:12px; color:var(--pink); text-decoration:underline; text-underline-offset:3px; }
.gt2-mini { display:none; }
.gt-ray { position:relative; padding:40px 9px 26px; }
.gt-truot { -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:0; cursor:grab; position:relative; z-index:2; }
.gt-truot:active { cursor:grabbing; }
.gt-truot::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(90deg, var(--pink) 0 var(--p), var(--line) var(--p) 100%); }
.gt-truot::-moz-range-track { height:4px; border-radius:4px; background:var(--line); }
.gt-truot::-moz-range-progress { height:4px; border-radius:4px; background:var(--pink); }
.gt-truot::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:50%; background:#fff; border:2px solid var(--pink); box-shadow:0 2px 10px rgba(0,0,0,.25); }
.gt-truot::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--pink); }
.gt-vach { position:absolute; left:9px; right:9px; top:59px; height:22px; }
.gt-vach i { position:absolute; top:0; width:1px; height:6px; background:var(--line); transform:translateX(-50%); cursor:pointer; }
.gt-vach i.lon { height:10px; background:var(--muted); }
.gt-vach i b { position:absolute; top:12px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:400; color:var(--muted); font-style:normal; }
.gt-vach i.on { background:var(--pink); } .gt-vach i.on b { color:var(--pink); font-weight:600; }
.gt-vach i::after { content:''; position:absolute; left:-8px; right:-8px; top:-6px; bottom:-14px; }
.gt2-bong { position:absolute; top:2px; left:calc(9px + (100% - 18px) * var(--pf)); transform:translateX(-50%); min-width:44px; padding:4px 10px 5px; border-radius:10px;
  background:var(--pink); color:#fff; text-align:center; pointer-events:none; box-shadow:0 4px 14px rgba(194,69,107,.28); }
.gt2-bong::after { content:''; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:inherit; transform:translateX(-50%) rotate(45deg); border-radius:2px; }
.gt2-bong .gt-so { position:relative; z-index:1; font-family:var(--f-tieude, serif); font-weight:400; font-size:19px; line-height:1; letter-spacing:.02em; }
.gt.chua .gt2-bong, .gt.tat .gt2-bong { background:var(--line); color:var(--muted); box-shadow:none; }
.gt.chua .gt2-bong .gt-so { font-size:15px; }
.gt.chua .gt-truot::-webkit-slider-runnable-track { background:var(--line); }
.gt.chua .gt-truot::-webkit-slider-thumb { border-color:var(--muted); animation:gtGoi 1.6s ease-in-out infinite; }
@keyframes gtGoi { 0%,100% { box-shadow:0 0 0 0 rgba(232,160,189,0); } 50% { box-shadow:0 0 0 8px rgba(232,160,189,.35); } }
.gt.chua .gt-vach i.on { background:var(--muted); } .gt.chua .gt-vach i.on b { color:var(--muted); font-weight:400; }
.gt.tat .gt-ray { opacity:.45; }
.gt2-duoi { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:-4px; }
.gt-mm { font-size:12px; color:var(--muted); } .gt-mm span { opacity:.5; margin:0 2px; }
.gio-chuaro { border:0; padding:2px 0; background:none; color:var(--muted); font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.gio-chuaro.on { color:var(--pink); }
@media (prefers-reduced-motion: reduce) { .gt.chua .gt-truot::-webkit-slider-thumb { animation:none; } }
/* 26/10 tối (SS: «cho tick chưa rõ size riêng») — ô tick dưới thước */
.gio-cr { display:flex; align-items:center; gap:8px; margin-top:-6px; font-size:13px; cursor:pointer; user-select:none; }
.gio-cr input { width:16px; height:16px; margin:0; accent-color:var(--pink); cursor:pointer; flex:none; }
.gio-cr small { font-size:12px; color:var(--muted); }
/* 26/10 tối (SS: «khoảng trống hơi lớn, gọn như trên mobile») — MỌI màn: số size + Ø lên dòng tiêu đề «SIZE US», không nhãn nổi */
.gt2-dau { align-items:center; }
.gt2-mini { display:inline; flex:1; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt2-mini b { font-family:var(--f-tieude, serif); font-weight:400; font-size:20px; color:var(--pink); margin:0 6px 0 2px; letter-spacing:.02em; }
.gt2-mini i { font-style:normal; }
.gt.tat .gt2-mini b { color:var(--pink); }
.gt2-bong { display:none; }
.gt-ray { padding:6px 9px 22px; } .gt-vach { top:25px; }
.gt2-duoi { display:none; }
@media (max-width: 899px) {   /* điện thoại: chỉ vạch số nguyên */
  .gt-vach i:not(.lon) { display:none; } .gt-vach i b { font-size:10.5px; }
}

/* mộc số (chỉ nhẫn) */
.gio-cn { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gio-cn summary { cursor:pointer; padding:9px 0; font-size:12.5px; letter-spacing:.06em; list-style:none; display:flex; justify-content:space-between; }
.gio-cn summary::-webkit-details-marker { display:none; }
.gio-cn summary::after { content:'+'; color:var(--pink); } .gio-cn[open] summary::after { content:'−'; }
.gio-cn summary small { color:var(--muted); letter-spacing:0; }
.gio-cn-than { display:grid; gap:8px; padding:0 0 10px; }
.gio-khac { padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:transparent; color:inherit; font:inherit; max-width:240px; }
.gio-khac::placeholder { color:var(--muted); opacity:.8; }
.gio-cn-ghi { margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.gio-luuy { font-size:12.5px; color:#c2456b; margin:0; line-height:1.5; }
.gio-chinh { font-size:12.5px; color:#3f8a5c; margin:0; }

/* 26/10 tối (SS) — chip phiên bản giãn đủ chiều ngang (không để cột trống bên phải) */
.gio-pb .gio-pbn { flex:1 1 140px; }
/* máy tính: mẫu không có thước size → «Đổi trả & bảo hành» ở cột phải (dưới nút); có thước → dưới ảnh như cũ */
@media (min-width: 900px) { #pmodalBody:not(.gio-co-thuoc) .pm-cums.chi-may { display:none; } #pmodalBody:not(.gio-co-thuoc) .pm-cums.chi-dt { display:block; } }
/* mẫu một giá: ô số lượng + nút đặc (không kèm giá — giá ở bảng giá phía trên) */
.gio-mot { display:flex; gap:10px; align-items:stretch; margin-top:18px; }   /* cách vạch kẻ của dòng giá phía trên */
.gio-slc { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:99px; flex:none; }
.gio-slc button { width:40px; height:100%; min-height:46px; background:none; border:0; color:var(--text); font-size:18px; cursor:pointer; }
.gio-slc b { min-width:20px; text-align:center; font-size:15px; }
.gio-them.gio-them-mot { flex:1; justify-content:center; background:var(--text); color:var(--bg); border:1.5px solid var(--text); font-weight:700; }
.gio-them.gio-them-mot:hover { background:var(--pink); border-color:var(--pink); color:#141210; }
/* nút «Thêm vào giỏ · giá» + link tư vấn */
.gio-them { display:flex !important; align-items:center; justify-content:space-between; gap:12px; padding-left:22px !important; padding-right:22px !important; width:100%; }
.gio-them > span:first-child { display:inline-flex; align-items:center; gap:8px; }
.gio-them svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.gio-them-gia { font-family:var(--f-tieude, serif); font-size:18px; letter-spacing:.02em; text-transform:none; }
.gio-them-gia small { font-family:inherit; font-size:12px; opacity:.7; }
.gio-tuvan { display:block; width:100%; margin:10px 0 6px; border:0; background:none; padding:2px 0; text-align:center; font:inherit; font-size:12.5px; letter-spacing:.06em;
  color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.gio-tuvan:hover { color:var(--pink); }

/* «Đổi trả & bảo hành»: dưới ảnh (máy tính) · cuối cột (điện thoại); máy tính bỏ «Có thể bạn cũng quan tâm» (trọn một màn) */
.pm-cums.chi-may { display:none; margin-top:14px; }
@media (min-width: 900px) { .pm-cums.chi-may { display:block; } .pm-cums.chi-dt { display:none; } }   /* 26/10 tối — SS: máy tính giữ «Có thể bạn cũng quan tâm» (bỏ luật ẩn pm-related) */

/* popup «Hướng dẫn đo size» */
#gioDo { position:fixed; inset:0; z-index:2147483001; background:rgba(8,7,6,.55); display:none; align-items:center; justify-content:center; padding:16px; }
#gioDo.mo { display:flex; }
.gd-hop { width:min(620px, 100%); max-height:min(88vh, 900px); background:var(--bg); color:var(--ink, inherit); border-radius:18px; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.4); overflow:hidden; }
.gd-dau { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
.gd-dau b { font-family:var(--f-tieude, serif); font-weight:400; font-size:22px; }
.gd-x { border:0; background:none; color:inherit; font-size:18px; cursor:pointer; }
.gd-than { overflow:auto; padding:6px 20px 16px; -webkit-overflow-scrolling:touch; }
.gd-than h4 { margin:16px 0 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.gd-than h4 small { letter-spacing:0; text-transform:none; color:var(--pink); }
.gd-buoc { margin:0; padding-left:1.25em; display:grid; gap:5px; font-size:13.5px; line-height:1.55; }
.gd-vid { margin:10px 0 0; border:1px solid var(--line); border-radius:99px; padding:7px 14px; background:none; color:inherit; font:inherit; font-size:12.5px; cursor:pointer; }
.gd-meo { font-size:12.5px; color:var(--muted); line-height:1.55; margin:12px 0 0; }
.gd-luuy { font-size:12.5px; color:#c2456b; margin:8px 0 0; line-height:1.5; }
.gd-bang { width:100%; border-collapse:collapse; font-size:13px; }
.gd-bang th { text-align:left; font-weight:400; color:var(--muted); font-size:11.5px; padding:6px 8px; border-bottom:1px solid var(--line); }
.gd-bang td { padding:7px 8px; border-bottom:1px solid var(--line); }
.gd-bang tr.on td { background:rgba(232,160,189,.12); } .gd-bang tr.on td b { color:var(--pink); }
.gd-chon { border:1px solid var(--line); border-radius:99px; padding:4px 12px; background:none; color:inherit; font:inherit; font-size:12px; cursor:pointer; }
.gd-bang tr.on .gd-chon { border-color:var(--pink); color:var(--pink); }
.gd-chan { padding:12px 20px 16px; border-top:1px solid var(--line); } .gd-chan .btn-line { width:100%; }

/* khối hướng dẫn app (popup + Chính sách › Cách 2) */
.gio-app { margin:12px 0 4px; padding:14px 16px; border:1px solid var(--pink); border-radius:14px; display:grid; gap:10px; background:rgba(232,160,189,.06); text-align:left; }
.ga-dau { display:flex; gap:12px; align-items:center; }
.ga-icon { width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; background:#141210; color:#f5a3c3; font-size:20px; }
.ga-dau b { display:block; font-size:14px; } .ga-dau small { display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }
.gio-app ol { margin:0; padding-left:1.25em; display:grid; gap:5px; font-size:13px; line-height:1.55; }
.policy-list .gio-app ol li { all:revert; display:list-item; padding:0; margin:0; border:0; font-size:13px; line-height:1.55; }
.policy-list .gio-app ol li::before { content:none !important; display:none !important; }
.ga-nut { display:flex; flex-wrap:wrap; gap:8px; }
.ga-tai { padding:8px 14px; border-radius:99px; background:#141210; color:#ece6da !important; font-size:12.5px; text-decoration:none; letter-spacing:.04em; }
.ga-note { margin:0; font-size:11.5px; color:var(--muted); line-height:1.5; }