/* =========================================================
   SALA PARTY — trang combo trang trí
   ========================================================= */

.sp-combopage{position:relative;z-index:0}

/* ---- Đầu trang ---- */
.sp-combo-head{position:relative;text-align:center;padding:46px 0 52px;margin-bottom:0}
.sp-combo-head::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:linear-gradient(115deg,#EAF8F1 0%,#FDF8F0 46%,#FDEAF2 100%);z-index:-1}
.sp-combopage .sp-crumb{justify-content:center;padding:0;margin-bottom:18px;font-size:14px}
.sp-combopage .sp-crumb span{font-size:0;margin:0 4px}
.sp-combopage .sp-crumb span::after{content:"/";font-size:14px;color:var(--ink-3)}
.sp-combopage .sp-crumb b{color:var(--ink);font-weight:600}
.sp-combo-head h1{font-size:clamp(24px,3.6vw,38px);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.2;color:var(--ink);margin:0 0 18px}
.sp-combo-head h1 em{font-style:normal;color:#FF6B9D;font-weight:800}
.sp-scope .sp-combo-head p{color:var(--ink-2);font-size:16px;line-height:1.8;max-width:820px;margin:0 auto}

/* ---- Lưới mẫu combo ---- */
.sp-gwrap{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);padding:26px;margin-top:8px}
.sp-ghead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sp-ghead h2{font-size:19px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}
.sp-ghead h2 svg{width:21px;height:21px;color:var(--accent)}
.sp-ghead .sp-more{font-size:13px;color:var(--ink-3)}

.sp-ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:700px){.sp-ggrid{grid-template-columns:repeat(3,1fr);gap:18px}}
.sp-gcard{position:relative;border-radius:16px;overflow:hidden;background:var(--cream);border:1px solid var(--line);aspect-ratio:1/1;display:block}
.sp-gcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.sp-gcard:hover img{transform:scale(1.05)}
.sp-gcard .sp-cb{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:999px;z-index:2}
.sp-gcard .sp-order{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.62));opacity:0;transition:opacity .25s;display:flex;justify-content:center}
.sp-gcard:hover .sp-order,.sp-gcard:focus-within .sp-order{opacity:1}
.sp-scope .sp-gcard .sp-order a{background:#fff;color:var(--accent-dk);font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:999px}
.sp-scope .sp-gcard .sp-order a:hover{background:var(--accent);color:#fff}
@media(max-width:699px){.sp-gcard .sp-order{opacity:1;background:linear-gradient(transparent,rgba(0,0,0,.55))}}

.sp-gnote{margin-top:18px;padding:14px 18px;border-radius:12px;background:var(--accent-lt);color:var(--accent-dk);font-size:13.5px;line-height:1.6}
.sp-gnote b{font-weight:700}

/* ---- Phụ kiện mua kèm ---- */
.sp-bs-head{font-size:20px;font-weight:600;margin:40px 0 6px}
.sp-scope .sp-bs-sub{color:var(--ink-2);font-size:14.5px;margin:0 0 20px}

.sp-pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:760px){.sp-pgrid{grid-template-columns:repeat(4,1fr);gap:18px}}
.sp-pcard{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;min-width:0}
.sp-pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.sp-pcard .sp-tag{position:absolute;top:10px;left:10px;z-index:2;background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.sp-pcard .sp-tag.sp-hot{background:var(--accent)}
.sp-pimg{display:block;background:var(--cream);aspect-ratio:1/1;overflow:hidden}
.sp-pimg img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s}
.sp-pcard:hover .sp-pimg img{transform:scale(1.04)}
.sp-pbody{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.sp-pbody .sp-nm{font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink);flex:1}
.sp-pbody .sp-nm:hover{color:var(--accent)}
.sp-pbody .sp-pr{font-size:16px;font-weight:700;color:var(--accent)}
.sp-pbody .sp-pr s,.sp-pbody .sp-pr del{font-size:13px;font-weight:400;color:var(--ink-3);margin-left:7px}

.sp-prow{display:flex;gap:8px;align-items:center;min-width:0}
.sp-scope .sp-prow .sp-addbtn{flex:1 1 auto;min-width:0;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:999px;font-size:12.5px;font-weight:700;padding:0 22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.sp-scope .sp-prow .sp-addbtn:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}
.sp-scope .sp-prow .sp-addbtn.added{background:#2ea86b;border-color:#2ea86b}
.sp-scope .sp-prow .sp-qv{width:36px;height:36px;flex:0 0 36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--ink-2);background:#fff}
.sp-scope .sp-prow .sp-qv:hover{border-color:var(--accent);color:var(--accent)}
.sp-scope .sp-prow .sp-qv svg{width:17px;height:17px}
.sp-scope .sp-prow .added_to_cart{display:none}

@media(max-width:559px){
	.sp-pbody{padding:12px;gap:7px}
	.sp-prow{gap:6px}
	.sp-scope .sp-prow .sp-addbtn{font-size:10px;padding:0 14px;height:34px}
	.sp-scope .sp-prow .sp-qv{width:34px;height:34px;flex:0 0 34px}
	.sp-scope .sp-prow .sp-qv svg{width:16px;height:16px}
}

@media(max-width:400px){
	.sp-scope .sp-prow .sp-addbtn{font-size:10px;padding:0 8px}
}

/* ---- Khối chữ ---- */
.sp-seotext{margin-top:44px;padding:32px 36px;border-radius:22px;background:#FDEEF6;border:1px solid rgba(240,8,146,.12)}
.sp-seotext h2{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0 0 16px}
.sp-seotext h2 span{color:#F472B6}
.sp-scope .sp-seotext p{color:#8B6E7C;font-size:15px;line-height:1.85;margin:0 0 14px}
.sp-scope .sp-seotext p:last-child{margin-bottom:0}
.sp-seotext a{color:var(--accent-dk);font-weight:600}
@media(max-width:639px){
	.sp-seotext{padding:24px 20px;border-radius:18px}
	.sp-seotext h2{font-size:17px}
	.sp-scope .sp-seotext p{font-size:14.5px}
}

/* ---- 3 ô cam kết ---- */
.sp-note3{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
@media(min-width:760px){.sp-note3{grid-template-columns:repeat(3,1fr);gap:20px}}
.sp-n3{padding:28px 24px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);text-align:center;transition:transform .2s,box-shadow .2s}
.sp-n3:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sp-n3 .sp-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 auto 16px;background:var(--accent-lt);color:var(--accent)}
.sp-n3 .sp-ic svg{width:25px;height:25px}
.sp-n3 b{display:block;font-size:16px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.sp-scope .sp-n3 p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.7}