/* DUNG MODA set page ("Set phối sẵn", v35 M-Set). Mobile first (390px); from 900px the D-Product layout: photos left,
   the set right. Every rule is scoped to .sp. Size chips and buttons come from theme.css (.sz, .btn). */
.sp{padding-bottom:8px}
.sp .bc{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 0 0;font-size:14px;color:var(--muted)}
.sp .bc a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:none}
.sp .bc a:hover{color:var(--pri)}

/* Photo: the arch with the set tag */
.sp .hero{position:relative;margin:8px 0 0;padding:0;background:none;text-align:left}
.sp .hero img{display:block;width:100%;height:440px;object-fit:cover;object-position:center 30%;border-radius:999px 999px 10px 10px;background:var(--surf)}
.sp .hero .tag{position:absolute;left:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:var(--rose);color:#FFFFFF;font:700 13px/1 var(--fb)}
.sp .hero .tag.out{background:var(--ink)}
.sp .thumbs{display:none}

/* Name, price, how it works */
.sp .head{padding:14px 0 0}
.sp .head .k{font:600 13px/1.3 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--pri)}
.sp .head h1{margin:4px 0 0;font:700 32px/1.15 var(--fd);color:var(--ink)}
.sp .head .s{margin:2px 0 0;font-size:15px;color:var(--muted)}
.sp .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin-top:8px}
.sp .price b{font-size:28px;color:var(--sale)}
.sp .price s{font-size:16px;color:var(--muted)}
.sp .pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--roseSoft);color:var(--rose)}
.sp .how{display:flex;gap:10px;align-items:center;margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--roseSoft);font-size:15px;font-weight:600;line-height:1.4}
.sp .how .ic{color:var(--pri)}

/* Items */
.sp .item{margin:14px 0 0;padding:14px;border-radius:10px;border:1.5px solid var(--line);background:#FFFFFF}
.sp .ih{display:flex;gap:12px;align-items:center}
.sp .ih img{display:block;flex:none;width:60px;height:80px;object-fit:cover;object-position:center 22%;border-radius:999px 999px 6px 6px;background:var(--surf)}
.sp .ih .n{font:600 12px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sp .ih b{display:block;font-size:15px;line-height:1.35}
.sp .ih .p{font-size:16px;font-weight:700}
.sp .ih .p.sale{color:var(--sale)}
.sp .ih s{font-size:14px;color:var(--muted);font-weight:500}
.sp .gl{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 8px;font-size:15px;font-weight:700}
.sp .gl > span{font-weight:500;color:var(--muted)}
.sp .szg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sp .sz{height:62px;min-height:0}
.sp .sz:hover:not([disabled]){border-color:var(--pri)}
.sp .sz[aria-pressed="true"] small{color:var(--ink)}
.sp .sz.help{gap:3px;padding:0 3px}
.sp .sz.help span{font-size:12px;line-height:1.2;color:var(--muted);white-space:nowrap}
.sp .sz.help b{font-size:12.5px;line-height:1.25;color:var(--pri);white-space:nowrap;text-decoration:underline;text-underline-offset:2px}
.sp .szg.shake{animation:sp-shake .3s}
@keyframes sp-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.sp .szg.shake{animation:none}}
.sp .err{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--sale)}

/* "Đổi món 2" */
.sp .swap{display:flex;gap:8px;margin-top:12px}
.sp .sw{flex:1;display:flex;align-items:center;gap:8px;min-width:0;min-height:52px;padding:6px 10px;border-radius:8px;border:1.5px solid var(--line2);background:#FFFFFF;font:600 14px/1.3 var(--fb);color:var(--ink);text-align:left;cursor:pointer}
.sp .sw:hover{border-color:var(--pri)}
.sp .sw.on{border:2px solid var(--pri);background:var(--soft);color:var(--pri)}
.sp .rd{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--line2);background:#FFFFFF}
.sp .sw.on .rd{border:6px solid var(--pri)}

/* Totals and buttons */
.sp .tot{margin:16px 0 0;padding:16px;border-radius:10px;background:var(--soft)}
.sp .tr{display:flex;justify-content:space-between;gap:12px;font-size:15px;line-height:1.9}
.sp .tr.sv{color:var(--ok);font-weight:600}
.sp .tr.sum{margin-top:6px;padding-top:8px;border-top:1px dashed var(--line2);font-size:16px;font-weight:700}
.sp .tr.sum b{font-size:24px}
.sp .cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.sp .cta.one{grid-template-columns:minmax(0,1fr)}
.sp .cta .btn{padding:0 10px;white-space:normal;line-height:1.2}
.sp .cta .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.sp .soldout{margin:12px 0 0;font-size:15px;font-weight:600;color:var(--sale)}

/* Assurances */
.sp .trust{list-style:none;margin:14px 0 0;padding:0}
.sp .trust li{display:flex;gap:10px;align-items:center;min-height:44px;font-size:15px}
.sp .trust .ic{width:20px;height:20px;color:var(--pri)}

/* "Set phối khác" */
.sp .band{height:8px;margin:24px -16px 0;background:var(--surf)}
.sp .sec{padding:24px 0 0}
.sp .sec h2{margin:0;font:700 28px/1.2 var(--fd)}
.sp .orail{display:flex;gap:12px;margin:12px -16px 0;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sp .orail::-webkit-scrollbar{display:none}
.sp .rc{flex:none;width:160px;color:var(--ink);text-decoration:none;scroll-snap-align:start}
.sp .rc img{display:block;width:160px;height:213px;object-fit:cover;object-position:center 30%;border-radius:999px 999px 8px 8px;background:var(--surf)}
.sp .rc .nm{margin-top:8px;font-size:15px;font-weight:600;line-height:1.35}
.sp .rc .pr{font-size:16px;font-weight:700;color:var(--sale)}
.sp .rc .pr s{font-size:13px;color:var(--muted);font-weight:500}

@media (min-width:900px){
  .sp .bc{gap:8px;padding:16px 0 0}
  .sp .bc a{min-height:44px}
  .sp-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:56px;align-items:start;padding-top:16px}
  .sp-media{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start}
  .sp-media:not(:has(.thumbs)){grid-template-columns:minmax(0,1fr)}
  .sp .hero{order:2;margin:0}
  .sp .hero img{height:680px}
  .sp .hero .tag{left:16px;bottom:16px;padding:9px 14px;font-size:14px}
  .sp .thumbs{display:flex;order:1;flex-direction:column;gap:10px;max-height:680px;overflow:hidden auto;scrollbar-width:none}
  .sp .th{flex:none;width:84px;height:112px;padding:0;overflow:hidden;border:1.5px solid var(--line);border-radius:6px;background:#FFFFFF;cursor:pointer}
  .sp .th.on{border:2px solid var(--pri)}
  .sp .th img{display:block;width:100%;height:100%;object-fit:cover}
  .sp .head{padding-top:0}
  .sp .head .k{font-size:14px}
  .sp .head h1{margin-top:6px;font-size:44px;line-height:1.1}
  .sp .head .s{margin-top:6px;font-size:16px}
  .sp .price{gap:6px 12px;margin-top:14px}
  .sp .price b{font-size:34px}
  .sp .price s{font-size:18px}
  .sp .pill{padding:6px 12px;font-size:14px}
  .sp .how{margin-top:16px}
  .sp .item{margin-top:16px;padding:16px 18px}
  .sp .ih{gap:14px}
  .sp .ih img{width:72px;height:96px}
  .sp .ih b{font-size:16px}
  .sp .ih .p{font-size:17px}
  .sp .gl{margin:16px 0 10px}
  .sp .szg{gap:10px}
  .sp .sz{height:66px}
  .sp .sw{min-height:54px;font-size:15px}
  .sp .tot{margin-top:18px;padding:18px 20px}
  .sp .tr{font-size:16px}
  .sp .tr.sum b{font-size:28px}
  .sp .cta .btn{min-height:56px}
  .sp .trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px;margin-top:16px}
  .sp .trust li{align-items:flex-start;padding-top:10px;font-size:14px;line-height:1.4}
  .sp .band{display:none}
  .sp .sec{padding-top:64px}
  .sp .sec h2{font-size:36px}
  .sp .orail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:20px 0 0;padding:0;overflow:visible}
  .sp .rc{width:auto}
  .sp .rc img{width:100%;height:auto;aspect-ratio:3/4}
  .sp .rc .nm{margin-top:12px;font-size:17px}
  .sp .rc .pr{font-size:18px}
  .sp .rc .pr s{font-size:14px}
}