@charset "UTF-8";
/* SOLIKA Flash Sale – đồng hồ + thanh chạy trong khung giá trang sản phẩm (giao diện A, bản 2: căn giữa, tự thích ứng mọi màn hình, hỗ trợ giờ 3 chữ số) */
.pd-price-card:not(.skfs-pd-on) .skfs-pd-slot{display:none}
.pd-price-card .pd-price-top .skfs-pd-slot{flex:0 0 auto;align-self:flex-start;margin-left:6px;width:auto;min-width:0}

/* Khung giá khi có khuyến mại: nền hồng (trước đây nằm ở product.css của theme); thanh chạy ẩn khi không có đồng hồ */
.pd-price-card.skfs-pd-on{background-color:#fef2f2;background-image:linear-gradient(90deg,#fef2f2,#fff1f2,#fffbeb);border-color:#fee2e2}
.pd-price-card:not(.skfs-pd-on) .pd-price-progress{display:none}

/* Hộp đồng hồ – hộp gọn bên phải giá (máy tính, máy tính bảng, điện thoại xoay ngang) */
.skfs-pdcd{display:grid;grid-template-columns:auto auto;grid-template-areas:"fire head" "time time" "stock stock";align-items:center;column-gap:6px;row-gap:9px;box-sizing:border-box;min-width:172px;padding:11px 14px 12px;border-radius:12px;background:#fff;border:1px solid #F3C7C9;box-shadow:0 2px 8px rgba(217,31,38,.08);color:#B4161B;line-height:1;text-align:center}
.skfs-pdcd::before{content:"";grid-area:fire;justify-self:end;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23D91F26'/%3E%3Cstop offset='.6' stop-color='%23FF6A00'/%3E%3Cstop offset='1' stop-color='%23FFB020'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M12 22c4 0 7-2.7 7-6.8 0-3.2-2-5.6-3.6-7.3-.4 1.9-1.4 3-2.6 3.5.2-3.4-1.5-6.6-4.3-8.4.1 3.2-1.6 5.3-3 7.1C4.3 11.6 5 13.4 5 15.2 5 19.3 8 22 12 22z'/%3E%3Cpath fill='%23FFD24A' d='M12 20.5c2 0 3.4-1.3 3.4-3.2 0-1.5-.9-2.6-1.7-3.4-.3.9-.8 1.5-1.4 1.7.1-1.6-.7-3-1.9-3.9 0 1.5-.8 2.5-1.4 3.3-.6.8-1.2 1.5-1.2 2.4 0 1.8 1.7 3.1 4.2 3.1z'/%3E%3C/svg%3E") center/contain no-repeat;transform-origin:50% 90%;animation:skfs-pd-flicker 1.1s ease-in-out infinite,skfs-pd-glow 1.6s ease-in-out infinite}
.skfs-pdcd::after{content:"Kết thúc sau";grid-area:head;justify-self:start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.skfs-pdcd-time{grid-area:time;display:flex;align-items:center;justify-content:center;gap:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.skfs-pdcd-time span{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:auto;min-width:38px;padding:0 5px;height:36px;border-radius:8px;background:#D91F26;color:#fff;font-size:18px;font-weight:800;line-height:1}
.skfs-pdcd-time i{font-style:normal;font-weight:800;font-size:16px;color:#D91F26}
.skfs-pdcd-stock{grid-area:stock;display:block;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;text-align:center}
.skfs-pdcd-num{color:var(--pd-blue-light,#3B82F6);font-weight:inherit}

/* Hộp gọn tự co giãn theo bề rộng thật của khung giá (máy tính bảng, điện thoại xoay ngang, máy tính) */
@media (min-width:550px){
  .pd-price-card.skfs-pd-on .pd-price-top{container-type:inline-size}
  .skfs-pdcd{padding:clamp(11px,1.5cqw,14px) clamp(14px,2cqw,20px)}
  .skfs-pdcd::before{width:clamp(15px,2cqw,18px);height:clamp(15px,2cqw,18px)}
  .skfs-pdcd::after{font-size:clamp(11px,1.95cqw,13px)}
  .skfs-pdcd-time span{min-width:clamp(38px,6.8cqw,48px);height:clamp(36px,6.45cqw,45px);font-size:clamp(18px,3.3cqw,23px)}
  .skfs-pdcd-time i{font-size:clamp(16px,2.1cqw,19px)}
  .skfs-pdcd-stock{font-size:clamp(14px,2.45cqw,16px)}
}

/* Màn hình lớn (khung giá hẹp ở cột phải): giữ cỡ tối thiểu to hơn */
@media (min-width:1200px){
  .skfs-pdcd{min-width:184px;padding:clamp(12px,1.5cqw,14px) clamp(16px,2cqw,20px)}
  .skfs-pdcd::before{width:clamp(16px,2cqw,18px);height:clamp(16px,2cqw,18px)}
  .skfs-pdcd::after{font-size:clamp(12px,1.5cqw,13px)}
  .skfs-pdcd-time span{min-width:clamp(41px,5.4cqw,48px);height:clamp(39px,5.1cqw,45px);font-size:clamp(20px,2.6cqw,23px)}
  .skfs-pdcd-stock{font-size:clamp(15px,1.9cqw,16px)}
}

/* Thanh chạy */
.pd-price-card.skfs-pd-on .pd-price-progress{position:relative;width:100%;height:8px;margin-top:14px;background:#FDE2E3;border:0;border-radius:9999px;display:block;overflow:hidden}
.pd-price-card.skfs-pd-on .pd-price-progress::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:skfs-pd-shine 2.4s ease-in-out infinite;pointer-events:none}
.pd-price-card.skfs-pd-on .pd-price-progress-fill{position:relative;display:block;height:100%;width:0;min-width:8px;max-width:100%;border-radius:9999px;overflow:hidden;transition:width 1s linear;animation:skfs-pd-grow 1.2s ease-out both;background:#D91F26}
.pd-price-card.skfs-pd-on .pd-price-progress-fill::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:0;background-image:linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%,transparent);background-size:12px 12px;animation:skfs-pd-stripes .7s linear infinite;will-change:transform}

@keyframes skfs-pd-stripes{from{transform:translateX(0)}to{transform:translateX(12px)}}
@keyframes skfs-pd-grow{from{max-width:0}to{max-width:100%}}
@keyframes skfs-pd-shine{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
@keyframes skfs-pd-flicker{0%,100%{transform:scale(1,1) rotate(-2deg)}20%{transform:scale(1.08,1.16) rotate(2deg)}45%{transform:scale(.96,1.04) rotate(-3deg)}70%{transform:scale(1.06,1.12) rotate(1deg)}}
@keyframes skfs-pd-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,120,0,.45))}50%{filter:drop-shadow(0 0 5px rgba(255,90,0,.85))}}

/* Điện thoại dọc: hộp trải ngang dưới giá, mọi kích thước tự tính theo bề rộng thật của hộp */
@media (max-width:549px){
  .pd-price-card.skfs-pd-on .pd-price-top{flex-wrap:wrap}
  .pd-price-card.skfs-pd-on .pd-price-top>div:first-child{flex:1 1 100%}
  .pd-price-card .pd-price-top .skfs-pd-slot{flex:1 1 100%;margin:12px 0 0;order:2;container-type:inline-size}
  .skfs-pdcd{min-width:0;padding:12px 14px 14px;row-gap:10px}
  .skfs-pdcd::before{width:1.4em;height:1.4em;font-size:clamp(10px,4cqw,13px)}
  .skfs-pdcd::after{font-size:clamp(10px,4cqw,13px)}
  .skfs-pdcd[aria-label^="Flash"]::after{content:"Flash Sale · Kết thúc sau"}
  .skfs-pdcd[aria-label^="Giảm"]::after{content:"Giảm giá · Kết thúc sau"}
  .skfs-pdcd-time{gap:6px;padding-bottom:16px}
  .skfs-pdcd-time span{min-width:clamp(38px,14cqw,48px);height:clamp(38px,14cqw,48px);border-radius:10px;font-size:clamp(18px,7cqw,23px)}
  .skfs-pdcd-time span::after{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-size:10px;font-weight:600;color:#6B7280;white-space:nowrap}
  .skfs-pdcd-time span[data-u="h"]::after{content:"Giờ"}
  .skfs-pdcd-time span[data-u="m"]::after{content:"Phút"}
  .skfs-pdcd-time span[data-u="s"]::after{content:"Giây"}
  .skfs-pdcd-time i{font-size:18px}
  .skfs-pdcd-stock{font-size:clamp(15px,5.6cqw,17px)}
}

@media (prefers-reduced-motion:reduce){
  .skfs-pdcd::before,.pd-price-card.skfs-pd-on .pd-price-progress::after,.pd-price-card.skfs-pd-on .pd-price-progress-fill,.pd-price-card.skfs-pd-on .pd-price-progress-fill::before{animation:none}
}