/* dcp-energy.css — Lớp "NĂNG LƯỢNG" (2026-07-06): sinh động, cuốn hút, khiến muốn học.
   Navy #0D1F33 + Gold #C99A4E. Áp THÊM, không phá. Tôn trọng prefers-reduced-motion. */

/* 1. REVEAL khi cuộn vào tầm nhìn (JS thêm .in) */
.dcp-rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
.dcp-rv.in{opacity:1;transform:none;}
.dcp-rv-1{transition-delay:.06s}.dcp-rv-2{transition-delay:.12s}.dcp-rv-3{transition-delay:.18s}.dcp-rv-4{transition-delay:.24s}

/* 2. CARD sống động — nâng + viền gold sáng khi hover/nhấn */
.dcp-icon-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.dcp-icon-card:hover,.dcp-icon-card:focus-within{transform:translateY(-4px);border-color:rgba(201,154,78,.55);box-shadow:0 22px 50px -18px rgba(201,154,78,.45),0 10px 26px rgba(13,31,51,.10);}

/* 3. ICON chip — nảy + đổ bóng gold khi hover */
.dcp-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;}
.dcp-icon-card:hover .dcp-ico,.dcp-ico:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 8px 18px -6px rgba(201,154,78,.5);}

/* 4. CTA "sống" — phát sáng nhịp + quét ánh kim khi hover */
.dcp-cta,.dcp-btn-primary,[data-energy="cta"]{position:relative;overflow:hidden;
  animation:dcpPulse 2.6s ease-in-out infinite;}
@keyframes dcpPulse{0%,100%{box-shadow:0 8px 22px -8px rgba(201,154,78,.45)}50%{box-shadow:0 12px 30px -6px rgba(201,154,78,.75)}}
.dcp-cta::after,.dcp-btn-primary::after,[data-energy="cta"]::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:none;}
.dcp-cta:hover::after,.dcp-btn-primary:hover::after,[data-energy="cta"]:hover::after{animation:dcpShine .9s ease;}
@keyframes dcpShine{from{left:-120%}to{left:130%}}

/* 5. HERO shimmer nền + icon nổi bồng bềnh */
.dcp-hero-glow{position:relative;overflow:hidden;}
.dcp-hero-glow::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;height:180%;
  background:radial-gradient(closest-side,rgba(201,154,78,.16),transparent 70%);animation:dcpDrift 9s ease-in-out infinite;pointer-events:none;}
@keyframes dcpDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-8%,6%)}}
.dcp-float{animation:dcpFloat 3.4s ease-in-out infinite;}
@keyframes dcpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* 6. Badge/điểm nhấn "đang sống" — chấm nhịp */
.dcp-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#C99A4E;box-shadow:0 0 0 0 rgba(201,154,78,.6);animation:dcpPing 1.8s infinite;}
@keyframes dcpPing{0%{box-shadow:0 0 0 0 rgba(201,154,78,.55)}70%,100%{box-shadow:0 0 0 10px rgba(201,154,78,0)}}

/* 7. Gạch nhấn gradient chuyển động dưới tiêu đề */
.dcp-underline{background:linear-gradient(90deg,#C99A4E,#E7C57E,#C99A4E);background-size:200% 100%;animation:dcpSlide 3s linear infinite;}
@keyframes dcpSlide{to{background-position:200% 0}}

/* 8. MÀU RỰC RỠ NHẸ (Sam: nhẹ thôi) — điểm nhấn ấm tinh tế, giữ cao cấp */
:root{--warm:#E7C57E;--spark:#EBAF5A;--win:#3FA96A;}
/* icon chip ấm dần khi hover (không đổi màu nền mặc định) */
.dcp-icon-card:hover .dcp-ico{background:linear-gradient(135deg,#FBF3E4,#F6E7CC);}
/* viền trên card 1 nét gold mảnh khi hover — sang, có sức sống */
.dcp-icon-card{position:relative;}
.dcp-icon-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--gold),var(--warm));transition:width .35s ease;}
.dcp-icon-card:hover::before{width:100%;}
/* dấu tick thành tựu màu xanh dịu (gamification nhẹ) */
.dcp-ico.win svg [stroke="#0D1F33"]{stroke:var(--win);}

/* 9. MASCOT có hồn — bob nhẹ + nghiêng chào */
.dcp-mascot-live{animation:dcpBob 3.2s ease-in-out infinite;transform-origin:center bottom;}
@keyframes dcpBob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-2deg)}75%{transform:translateY(-2px) rotate(2deg)}}
.dcp-mascot-live:hover{animation:dcpWave .6s ease;}
@keyframes dcpWave{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}

/* 10. Bong bóng câu động viên của mascot */
.dcp-tip{position:fixed;left:14px;bottom:16px;max-width:240px;z-index:70;background:#fff;color:var(--navy);
  border:1px solid rgba(201,154,78,.35);border-radius:14px 14px 14px 4px;padding:10px 12px;font:600 13px/1.4 'Be Vietnam Pro',system-ui;
  box-shadow:0 14px 34px -12px rgba(13,31,51,.3);opacity:0;transform:translateY(8px);transition:.4s;pointer-events:none;}
.dcp-tip.in{opacity:1;transform:none;}

/* 11. Confetti canvas (khi thắng) */
#dcp-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9998;}

/* 12. Pop thành tựu nhẹ */
@keyframes dcpPop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.dcp-pop{animation:dcpPop .5s ease;}

@media (prefers-reduced-motion: reduce){
  .dcp-rv{opacity:1;transform:none;transition:none}
  .dcp-cta,.dcp-btn-primary,[data-energy="cta"],.dcp-hero-glow::before,.dcp-float,.dcp-live-dot,.dcp-underline,.dcp-mascot-live{animation:none!important}
  .dcp-icon-card:hover,.dcp-ico:hover{transform:none}
  #dcp-confetti,.dcp-tip{display:none!important}
}

/* 13. CHÚC MỪNG — huy chương pop + toast động viên */
.dcp-win-badge{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.4);z-index:9999;
  opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s;pointer-events:none;
  filter:drop-shadow(0 12px 30px rgba(201,154,78,.5));}
.dcp-win-badge.go{opacity:1;transform:translate(-50%,-50%) scale(1);}
.dcp-win-badge.out{opacity:0;transform:translate(-50%,-60%) scale(.9);}
.dcp-toast{position:fixed;left:50%;top:14%;transform:translateX(-50%) translateY(-14px);z-index:9999;
  background:linear-gradient(135deg,#0D1F33,#12283f);color:#F0D08A;font:700 15px/1.4 'Be Vietnam Pro',system-ui;
  padding:12px 20px;border-radius:14px;border:1px solid rgba(201,154,78,.45);box-shadow:0 16px 40px -12px rgba(13,31,51,.5);
  opacity:0;transition:.45s cubic-bezier(.2,.7,.2,1);pointer-events:none;max-width:88vw;text-align:center;}
.dcp-toast.in{opacity:1;transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion: reduce){ .dcp-win-badge{display:none!important} }

/* 14. Language switcher (đa ngôn ngữ VI/EN/中文) */
.dcp-lang-pill{position:fixed;top:10px;right:12px;z-index:9997;display:flex;gap:2px;background:rgba(13,31,51,.9);
  border:1px solid rgba(201,154,78,.4);border-radius:20px;padding:3px;backdrop-filter:blur(6px)}
.dcp-lang-pill button{border:0;background:transparent;color:#c3d0de;font:700 12px/1 'Be Vietnam Pro',system-ui;
  padding:6px 10px;border-radius:16px;cursor:pointer;transition:.2s}
.dcp-lang-pill button.on{background:linear-gradient(135deg,#C99A4E,#E7C57E);color:#0D1F33}
.dcp-lang-pill button:hover:not(.on){color:#fff}
@media(max-width:480px){.dcp-lang-pill{top:6px;right:6px}.dcp-lang-pill button{padding:5px 8px;font-size:11px}}