/* TSQ Thông Báo Bán Hàng — TonySquang */
.tsqsn-root{
	--tsqsn-bg:rgba(255,255,255,.96);--tsqsn-blur:8px;--tsqsn-title:#111827;--tsqsn-text:#4b5563;
	--tsqsn-accent:#16a34a;--tsqsn-border:1px solid #e5e7eb;--tsqsn-radius:14px;--tsqsn-shadow:0 10px 30px rgba(0,0,0,.12);
	--tsqsn-width:340px;--tsqsn-width-m:92vw;--tsqsn-img:64px;--tsqsn-img-r:10px;--tsqsn-font:14px;
	--tsqsn-x:20px;--tsqsn-y:20px;--tsqsn-z:99990;--tsqsn-dur:6s;
	position:fixed;z-index:var(--tsqsn-z);width:var(--tsqsn-width);max-width:calc(100vw - 24px);
	pointer-events:none;font-size:var(--tsqsn-font);line-height:1.4;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.tsqsn-root *{box-sizing:border-box}

/* Vị trí */
.tsqsn-pos-top-left{top:var(--tsqsn-y);left:var(--tsqsn-x)}
.tsqsn-pos-top-right{top:var(--tsqsn-y);right:var(--tsqsn-x)}
.tsqsn-pos-top-center{top:var(--tsqsn-y);left:50%;transform:translateX(-50%)}
.tsqsn-pos-bottom-left{bottom:var(--tsqsn-y);left:var(--tsqsn-x)}
.tsqsn-pos-bottom-right{bottom:var(--tsqsn-y);right:var(--tsqsn-x)}
.tsqsn-pos-bottom-center{bottom:var(--tsqsn-y);left:50%;transform:translateX(-50%)}
body.admin-bar .tsqsn-root[class*="tsqsn-pos-top"]{top:calc(var(--tsqsn-y) + 32px)}

/* Bong bóng */
.tsqsn-pop{
	position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;
	background:var(--tsqsn-bg);border:var(--tsqsn-border);border-radius:var(--tsqsn-radius);
	box-shadow:var(--tsqsn-shadow);color:var(--tsqsn-text);overflow:hidden;pointer-events:auto;
	-webkit-backdrop-filter:blur(var(--tsqsn-blur)) saturate(140%);backdrop-filter:blur(var(--tsqsn-blur)) saturate(140%);
	opacity:0;visibility:hidden;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1.2),visibility .45s;
}
.tsqsn-pop.is-in{opacity:1;visibility:visible;transform:none}
.tsqsn-img-right .tsqsn-pop{flex-direction:row-reverse}
.tsqsn-img-none .tsqsn-media{display:none}

.tsqsn-media{flex:0 0 var(--tsqsn-img);width:var(--tsqsn-img);height:var(--tsqsn-img);border-radius:var(--tsqsn-img-r);overflow:hidden;display:block;background:rgba(0,0,0,.05)}
.tsqsn-media img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0}
.tsqsn-body{flex:1;min-width:0;padding-right:14px}
.tsqsn-img-right .tsqsn-body{padding-right:0;padding-left:16px}
.tsqsn-title{color:var(--tsqsn-title);font-weight:700;font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsqsn-line{font-size:.93em;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tsqsn-line a,.tsqsn-product{color:var(--tsqsn-title)!important;font-weight:600;text-decoration:none!important}
.tsqsn-line a:hover{color:var(--tsqsn-accent)!important}
.tsqsn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px;font-size:.82em;opacity:.95}
.tsqsn-price{color:var(--tsqsn-accent);font-weight:700}
.tsqsn-badge{display:inline-flex;align-items:center;gap:3px;color:var(--tsqsn-accent);font-weight:600}
.tsqsn-badge svg{width:13px;height:13px}
.tsqsn-close{
	position:absolute;top:6px;right:8px;width:22px;height:22px;padding:0;border:0;border-radius:50%;
	background:transparent;color:var(--tsqsn-text);font-size:16px;line-height:22px;cursor:pointer;opacity:.55;
}
.tsqsn-close:hover{opacity:1;background:rgba(127,127,127,.15)}
.tsqsn-img-right .tsqsn-close{right:auto;left:8px}
.tsqsn-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;background:transparent}
.tsqsn-progress i{display:block;height:100%;width:100%;background:var(--tsqsn-accent);transform-origin:left;transform:scaleX(0)}
.tsqsn-pop.is-in .tsqsn-progress i{animation:tsqsn-bar var(--tsqsn-dur) linear forwards}
.tsqsn-pop.is-paused .tsqsn-progress i{animation-play-state:paused}
@keyframes tsqsn-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Hình dạng */
.tsqsn-shape-pill .tsqsn-pop{padding:8px 22px 8px 8px}
.tsqsn-shape-pill.tsqsn-img-right .tsqsn-pop{padding:8px 8px 8px 22px}
.tsqsn-shape-pill .tsqsn-media{border-radius:50%}
.tsqsn-shape-pill .tsqsn-progress{left:24px;width:calc(100% - 48px)}
.tsqsn-shape-bubble .tsqsn-pop{overflow:visible;border-bottom-left-radius:4px}
.tsqsn-shape-bubble .tsqsn-pop::after{
	content:"";position:absolute;left:18px;bottom:-9px;width:18px;height:10px;background:var(--tsqsn-bg);
	clip-path:polygon(0 0,100% 0,0 100%);
}
.tsqsn-shape-bubble[class*="pos-top"] .tsqsn-pop{border-bottom-left-radius:var(--tsqsn-radius);border-top-left-radius:4px}
.tsqsn-shape-bubble[class*="pos-top"] .tsqsn-pop::after{bottom:auto;top:-9px;clip-path:polygon(0 100%,100% 100%,0 0)}
.tsqsn-shape-bubble .tsqsn-progress{border-radius:0 0 var(--tsqsn-radius) 0;overflow:hidden}

/* Theme tối: nút đóng */
.tsqsn-theme-dark .tsqsn-media{background:rgba(255,255,255,.08)}

/* Hiệu ứng */
.tsqsn-anim-slide.tsqsn-pos-top-left .tsqsn-pop,.tsqsn-anim-slide.tsqsn-pos-bottom-left .tsqsn-pop{transform:translateX(-120%)}
.tsqsn-anim-slide.tsqsn-pos-top-right .tsqsn-pop,.tsqsn-anim-slide.tsqsn-pos-bottom-right .tsqsn-pop{transform:translateX(120%)}
.tsqsn-anim-slide.tsqsn-pos-top-center .tsqsn-pop{transform:translateY(-130%)}
.tsqsn-anim-slide.tsqsn-pos-bottom-center .tsqsn-pop{transform:translateY(130%)}
.tsqsn-anim-zoom .tsqsn-pop{transform:scale(.7)}
.tsqsn-anim-fade .tsqsn-pop{transform:translateY(6px)}
.tsqsn-anim-bounce .tsqsn-pop{transform:translateY(30px)}
.tsqsn-anim-bounce .tsqsn-pop.is-in{animation:tsqsn-bounce .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes tsqsn-bounce{0%{transform:translateY(30px)}60%{transform:translateY(-6px)}100%{transform:none}}

/* Di động */
@media (max-width:600px){
	.tsqsn-root{width:var(--tsqsn-width-m);--tsqsn-x:12px;--tsqsn-y:12px}
	.tsqsn-root .tsqsn-pop{padding:10px 12px;gap:10px}
	.tsqsn-root .tsqsn-media{flex-basis:min(var(--tsqsn-img),52px);width:min(var(--tsqsn-img),52px);height:min(var(--tsqsn-img),52px)}
}
@media (prefers-reduced-motion:reduce){
	.tsqsn-pop{transition:opacity .2s linear!important;transform:none!important;animation:none!important}
}