/* =====================================================================
   DŨNG CỬU SPORT — Giao diện các tính năng bán hàng & CSKH
   Chatbot · Popup · Thông báo mua hàng · Quiz · So sánh · Yêu thích
   ===================================================================== */

/* Thẻ đang ẩn thì phải ẩn thật — kể cả khi class có display riêng */
[hidden]{display:none !important}

/* ============================== CHATBOT ============================== */
.chat{position:fixed;right:16px;bottom:88px;z-index:130;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.chat__launcher{
  position:relative;width:58px;height:58px;border:0;border-radius:50%;cursor:pointer;
  background:var(--grad);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(109,31,156,.42);transition:transform .18s ease;
}
.chat__launcher:hover{transform:scale(1.06)}
.chat.is-open .chat__launcher{transform:scale(.92)}
.chat__badge{
  position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;
  animation:dcPulse 1.6s ease-in-out infinite;
}
@keyframes dcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}

.chat__bubble{
  position:relative;max-width:250px;background:#fff;border-radius:16px 16px 4px 16px;padding:12px 14px;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);cursor:pointer;animation:dcSlideUp .3s ease;
}
.chat__bubble strong{display:block;font-size:13.5px;color:var(--brand-dark)}
.chat__bubble p{margin:2px 0 0;font-size:13px;color:var(--ink-2);line-height:1.45}
.chat__bubble button{position:absolute;top:4px;right:8px;border:0;background:none;font-size:17px;color:var(--muted);cursor:pointer;line-height:1}
@keyframes dcSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.chat__panel{
  width:min(92vw,372px);height:min(72vh,540px);background:#fff;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(28,24,48,.3);border:1px solid var(--line);
  animation:dcSlideUp .22s ease;
}
.chat__head{background:var(--grad);color:#fff;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat__who{display:flex;align-items:center;gap:10px}
.chat__avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:800;font-size:13px}
.chat__who strong{display:block;font-size:14.5px;line-height:1.2}
.chat__who em{font-style:normal;font-size:11.5px;opacity:.9;display:flex;align-items:center;gap:5px}
.chat__who .dot{width:7px;height:7px;border-radius:50%;background:#6ee7a8;display:inline-block}
.chat__head button{background:rgba(255,255,255,.18);border:0;color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:18px;line-height:1}

.chat__body{flex:1;overflow-y:auto;padding:14px;background:var(--bg-2);display:flex;flex-direction:column;gap:8px}
.chat__msg{display:flex;max-width:86%}
.chat__msg--bot{align-self:flex-start}
.chat__msg--me{align-self:flex-end;justify-content:flex-end}
.chat__text{padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.5;background:#fff;border:1px solid var(--line);color:var(--ink)}
.chat__msg--bot .chat__text{border-bottom-left-radius:4px}
.chat__msg--me .chat__text{background:var(--brand);color:#fff;border-color:transparent;border-bottom-right-radius:4px}
.chat__typing .chat__text{display:flex;gap:4px;padding:12px 14px}
.chat__typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dcBlink 1.2s infinite}
.chat__typing span:nth-child(2){animation-delay:.2s}
.chat__typing span:nth-child(3){animation-delay:.4s}
@keyframes dcBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.chat__cards{display:flex;flex-direction:column;gap:6px}
.chat__card{display:flex;gap:9px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px;color:var(--ink)}
.chat__card:hover{border-color:var(--brand);color:var(--brand)}
.chat__card img{width:44px;height:44px;object-fit:contain;background:var(--bg-2);border-radius:8px;flex-shrink:0}
.chat__card span{font-size:13px;line-height:1.35}
.chat__card em{display:block;font-style:normal;color:var(--accent);font-weight:700}
.chat__cta{display:block;background:#fff;border:1.5px dashed var(--brand);color:var(--brand);border-radius:12px;padding:10px;text-align:center;font-weight:600;font-size:13.5px}

.chat__contact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.chat__contact p{margin:0 0 8px;font-size:13.5px;color:var(--ink-2)}
.chat__contact input{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;margin-bottom:7px;font-size:14px}
.chat__contact .btn{width:100%}

.chat__quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px;background:var(--bg-2)}
.chat__quick button{
  background:#fff;border:1.5px solid var(--brand-light);color:var(--brand-dark);
  border-radius:99px;padding:6px 13px;font-size:12.8px;font-weight:600;cursor:pointer;
}
.chat__quick button:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

.chat__form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.chat__form input{flex:1;padding:10px 14px;border:1.5px solid var(--line);border-radius:99px;font-size:14px;margin:0}
.chat__form button{width:42px;height:42px;border:0;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.chat__foot{display:flex;gap:6px;padding:8px 10px;background:var(--bg-3);font-size:12.5px;justify-content:space-around}
.chat__foot a{color:var(--brand-dark);font-weight:600}
.chat__foot.is-highlight{animation:dcFlash 1s ease 2}
@keyframes dcFlash{50%{background:#ffe9a8}}

/* ========================= POPUP LEAD MAGNET ========================= */
.lmagnet{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.lmagnet__backdrop{position:absolute;inset:0;background:rgba(28,24,48,.62);backdrop-filter:blur(3px);animation:dcFade .2s ease}
@keyframes dcFade{from{opacity:0}to{opacity:1}}
.lmagnet__box{
  position:relative;width:min(94vw,440px);background:#fff;border-radius:22px;padding:30px 26px 24px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);text-align:center;overflow:hidden;animation:dcPop .26s cubic-bezier(.2,1.1,.4,1);
}
@keyframes dcPop{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
.lmagnet__x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;color:var(--muted);cursor:pointer;line-height:1;z-index:2}
.lmagnet__deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lmagnet__ball{position:absolute;width:120px;height:120px;border-radius:50%;background:var(--grad);opacity:.13;top:-40px;right:-30px}
.lmagnet__ball--2{width:80px;height:80px;top:auto;bottom:-26px;left:-26px;background:var(--accent);opacity:.1}
.lmagnet__kicker{position:relative;margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.lmagnet__title{position:relative;font-size:24px;margin:6px 0 6px;line-height:1.25}
.lmagnet__sub{position:relative;margin:0 0 8px;color:var(--brand-dark);font-weight:600;font-size:15px}
.lmagnet__text{position:relative;margin:0 0 16px;color:var(--ink-2);font-size:14.2px}
.lmagnet__form{position:relative}
.lmagnet__row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.lmagnet__row input{margin:0}
.lmagnet__note{margin:10px 0 0;font-size:12px;color:var(--muted)}
.lmagnet__done{padding:10px 0}
.lmagnet__check{width:62px;height:62px;margin:0 auto 14px;border-radius:50%;background:var(--ok);color:#fff;font-size:32px;display:grid;place-items:center}
.lmagnet__done p{font-size:15px;color:var(--ink-2);margin-bottom:16px}

/* ====================== THÔNG BÁO MUA GẦN ĐÂY ======================= */
.sproof{
  position:fixed;left:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 34px 10px 10px;
  box-shadow:var(--shadow-lg);max-width:320px;opacity:0;transform:translateY(14px);transition:.3s ease;
}
.sproof.is-in{opacity:1;transform:none}
.sproof img{width:46px;height:46px;object-fit:contain;background:var(--bg-2);border-radius:9px;flex-shrink:0}
.sproof p{margin:0;font-size:12.5px;color:var(--muted)}
.sproof p strong{color:var(--ink)}
.sproof a{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--brand-dark)}
.sproof em{font-style:normal;font-size:11.5px;color:var(--muted)}
.sproof button{position:absolute;top:6px;right:8px;border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1}

/* ============================== QUIZ ================================= */
.quiz{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);max-width:760px;margin:0 auto}
.quiz__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.quiz__count{font-size:13px;color:var(--muted);font-weight:600}
.quiz__track{height:6px;background:var(--bg-3);border-radius:99px;overflow:hidden;margin-bottom:22px}
.quiz__bar{display:block;height:100%;width:0;background:var(--grad);transition:width .3s ease}
.quiz__q{font-size:22px;margin:0 0 6px;line-height:1.3}
.quiz__hint{color:var(--muted);font-size:14px;margin-bottom:18px}
.quiz__opts{display:grid;gap:10px}
.quiz__opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:2px solid var(--line);border-radius:14px;padding:15px 18px;
  font-size:15.5px;font-weight:600;color:var(--ink);transition:.15s ease;
}
.quiz__opt:hover{border-color:var(--brand-light);background:var(--bg-2);transform:translateX(3px)}
.quiz__opt.is-picked{border-color:var(--brand);background:var(--bg-3)}
.quiz__opt span.k{
  width:30px;height:30px;border-radius:9px;background:var(--bg-3);color:var(--brand-dark);
  display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0;
}
.quiz__back{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;margin-top:16px;padding:6px 0}
.quiz__back:hover{color:var(--brand)}
.quiz__lead{background:var(--bg-2);border-radius:16px;padding:20px;margin-top:6px}
.quiz__lead h3{font-size:18px;margin-bottom:4px}
.quiz__lead p{font-size:14px;color:var(--ink-2)}
.quiz__lead .form-row{margin-bottom:12px}
.quiz__skip{display:block;text-align:center;margin-top:10px;font-size:13.5px;color:var(--muted)}

.quiz-result{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow);max-width:760px;margin:0 auto}
.quiz-result__kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.quiz-result h2{font-size:26px;margin:6px 0 10px}
.quiz-result__desc{font-size:16px;color:var(--ink-2)}
.quiz-result__price{background:var(--bg-3);border-radius:10px;padding:10px 14px;display:inline-block;font-size:15px}
.quiz-result blockquote{margin:16px 0;padding:14px 18px;background:var(--bg-2);border-left:4px solid var(--pink);border-radius:0 12px 12px 0;font-size:14.5px;color:var(--ink-2)}
.quiz-result h3{font-size:17px;margin-top:22px}
.quiz-result__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quiz-pcard{background:var(--bg-2);border-radius:12px;padding:10px;text-align:center;color:var(--ink)}
.quiz-pcard:hover{background:var(--bg-3);color:var(--brand)}
.quiz-pcard img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:6px}
.quiz-pcard span{font-size:12.8px;line-height:1.35;display:block}
.quiz-pcard em{display:block;font-style:normal;color:var(--accent);font-weight:700;margin-top:3px}
.quiz-result__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.quiz-result__saved{margin-top:14px;color:var(--ok);font-weight:600;font-size:14px}

/* =========================== SO SÁNH & YÊU THÍCH ===================== */
.pcard__tools{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:6px;z-index:3;opacity:0;transition:.16s ease}
.pcard:hover .pcard__tools,.pcard__tools:focus-within{opacity:1}
.pcard__tool{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.96);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);font-size:14px;line-height:1;
}
.pcard__tool:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.pcard__tool.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}

.compare-bar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:115;
  background:var(--ink);color:#fff;border-radius:99px;padding:10px 12px 10px 20px;
  display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-lg);font-size:14px;
}
.compare-bar strong{color:#ffd166}
.compare-bar a{background:var(--pink);color:#fff;border-radius:99px;padding:8px 18px;font-weight:600}
.compare-bar button{background:none;border:0;color:#cfc6de;cursor:pointer;font-size:13px}

.compare-table{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare-table th,.compare-table td{padding:12px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;font-size:14px;vertical-align:top}
.compare-table th{background:var(--bg-2);width:180px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.compare-table img{width:110px;height:110px;object-fit:contain;background:var(--bg-2);border-radius:10px}
.compare-table .price{color:var(--accent);font-weight:800;font-size:17px}

/* ====================== THANH MUA HÀNG DÍNH ========================== */
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:110;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(28,24,48,.12);padding:10px 0;transform:translateY(110%);transition:transform .24s ease;
}
.sticky-buy.is-show{transform:none}
.sticky-buy__in{display:flex;align-items:center;gap:14px}
.sticky-buy img{width:48px;height:48px;object-fit:contain;background:var(--bg-2);border-radius:9px}
.sticky-buy__name{flex:1;font-weight:600;font-size:14.5px;line-height:1.3}
.sticky-buy__price{color:var(--accent);font-weight:800;font-size:19px;white-space:nowrap}

/* ========================= TRANG DỊCH VỤ ============================ */
.svc-hero{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:center;padding:26px 0 10px}
.svc-hero h1{font-size:32px;margin:8px 0 10px}
.svc-hero p{font-size:16.5px;color:var(--ink-2)}
.svc-hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.svc-hero__img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}

.svc{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:start}
.svc--reverse{grid-template-columns:260px 1fr}
.svc--reverse .svc__body{order:2}
.svc--reverse .svc__img{order:1}
.svc__no{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--pink);background:var(--bg-3);padding:4px 12px;border-radius:99px}
.svc__body h2{font-size:27px;margin:10px 0 8px}
.svc__body h3{font-size:17px;margin-top:22px}
.svc__lead{font-size:16.5px;color:var(--ink-2)}
.svc__img{width:100%;border-radius:var(--r-lg);background:var(--bg-3)}
.svc__steps{counter-reset:s;list-style:none;padding:0;margin:12px 0 18px}
.svc__steps li{counter-increment:s;position:relative;padding:9px 0 9px 44px;border-bottom:1px dashed var(--line);font-size:15px}
.svc__steps li:last-child{border-bottom:0}
.svc__steps li::before{
  content:counter(s);position:absolute;left:0;top:8px;width:30px;height:30px;border-radius:50%;
  background:var(--grad);color:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:700;
}

.svc-form{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.svc-form__intro h2{font-size:25px}
.svc-form__intro p{color:var(--ink-2)}

/* ========================= TRANG BÁN SỈ ============================= */
.wsale-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wsale-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-xs);transition:.18s ease}
.wsale-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.wsale-card__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--bg-3);font-size:24px;margin-bottom:12px}
.wsale-card h2{font-size:17.5px;margin:0 0 6px}
.wsale-card p{font-size:14px;color:var(--ink-2);margin:0}

@media (max-width:980px){
  .svc-hero,.svc,.svc--reverse,.svc-form{grid-template-columns:1fr}
  .svc--reverse .svc__body{order:1}
  .svc--reverse .svc__img{order:2}
  .svc__img{max-width:220px;margin:0 auto}
  .wsale-grid{grid-template-columns:repeat(2,1fr)}
  .svc-hero h1{font-size:25px}
}
@media (max-width:640px){
  .wsale-grid{grid-template-columns:1fr}
  .svc__body h2{font-size:22px}
}

/* ============================ HIỆN DẦN ============================== */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:640px){
  .chat{right:12px;bottom:76px}
  .chat__panel{width:94vw;height:74vh}
  .chat__bubble{max-width:210px}
  .sproof{left:10px;right:10px;max-width:none;bottom:12px}
  .quiz{padding:20px 16px;border-radius:16px}
  .quiz__q{font-size:19px}
  .quiz__opt{padding:13px 15px;font-size:14.5px}
  .quiz-result{padding:20px 16px}
  .quiz-result h2{font-size:21px}
  .quiz-result__grid{grid-template-columns:repeat(2,1fr)}
  .lmagnet__box{padding:26px 18px 20px}
  .lmagnet__title{font-size:20px}
  .lmagnet__row{grid-template-columns:1fr}
  .compare-bar{left:12px;right:12px;transform:none;justify-content:space-between;padding-left:16px}
  .pcard__tools{opacity:1}
  .sticky-buy__name{display:none}
}