/* =============================================================
   EDU-BLUE THEME LAYER (checkout)
   Loaded LAST on checkout. Blue base + yellow CTA buttons.
   Visual only — no content changes.
   ============================================================= */
:root{
  --eb-blue:#d41472;
  --eb-blue-bright:#ec4899;
  --eb-blue-deep:#271247;
  --eb-ink:#1a0c2e;
  --eb-yellow:#fbbf24;
  --eb-yellow-deep:#f59e0b;
}

/* ---------- Bold sans display headings (Poppins) ---------- */
.hero-heading,.payment-heading,.fcc-heading,.summary-card-title,.ps-heading,
.bi-content h4,.sp-details h4,.ppb-heading,.accordion-title,.urgency-item h4,
.rf-item h4,.tm-user h4,.imp-content h4,.ccb-title{
  font-family:'Be Vietnam Pro','Inter',Arial,sans-serif !important;
  letter-spacing:-.2px;
}
.hero-heading,.payment-heading,.fcc-heading{font-weight:800 !important;text-transform:uppercase;}

/* ---------- Top urgency bar -> blue gradient ---------- */
.checkout-top-bar{
  background:linear-gradient(90deg,var(--eb-blue-deep),var(--eb-blue)) !important;
  color:#fff !important; box-shadow:0 2px 12px rgba(39,18,71,.25) !important;
}

/* ---------- Brand + avatars -> blue ---------- */
.brand-avatar,.imp-avatar{
  background:linear-gradient(135deg,var(--eb-blue),var(--eb-blue-bright)) !important;
  color:#fff !important;
}
.testi-avatar{background:linear-gradient(135deg,#d41472,#ec4899) !important;}

/* ---------- Buttons -> YELLOW (reference style) ---------- */
.hero-main-cta,.fcc-btn,.btn-submit,.btn-hero,.center-cta{
  background:linear-gradient(180deg,var(--eb-yellow),var(--eb-yellow-deep)) !important;
  color:#1a0c2e !important; border:none !important; border-radius:10px !important;
  letter-spacing:.2px !important;
  box-shadow:0 14px 30px -12px rgba(245,158,11,.7) !important;
}
.hero-main-cta:hover,.fcc-btn:hover,.btn-submit:hover,.center-cta:hover{
  color:#1a0c2e !important; filter:brightness(1.03);
  box-shadow:0 20px 40px -12px rgba(245,158,11,.85) !important;
}

/* ---------- Yellow accent bar under main headings ---------- */
.payment-heading::after,.fcc-heading::after,.hero-heading::after{
  content:"";display:block;width:66px;height:4px;margin:16px auto 0;border-radius:4px;
  background:linear-gradient(90deg,var(--eb-yellow),var(--eb-yellow-deep));
}

/* ---------- Pops on the dark (navy) cards -> yellow ---------- */
.hero-highlight,.text-magenta{color:var(--eb-yellow) !important;}
.hero-badge{background:var(--eb-yellow) !important;color:#1a0c2e !important;}

/* ---------- Emphasis amounts on light -> deep blue (AA) ---------- */
.pab-amount,.fcc-final-price,.spb-value-final,.sp-price,.text-magenta-bold,
.bonus-badge,.payment-secure-badge{color:#7c1070 !important;}
/* Countdown numbers sit on the dark navy card -> keep them bright */
.ccb-num{color:var(--eb-yellow) !important;}
/* Contact buttons: keep phone number on one line */
.ccb-btn{white-space:nowrap;font-size:.92rem;}

/* ---------- Progress + saving badge ---------- */
.spb-bar{background:linear-gradient(to right,var(--eb-blue),var(--eb-blue-bright)) !important;}
.spb-saving,.bonus-price-badge,.bi-badge,.tm-badge,.sb-right{background:var(--eb-blue) !important;color:#fff !important;}

/* ---------- Contact buttons -> on-theme ---------- */
.btn-phone{background:linear-gradient(180deg,var(--eb-yellow),var(--eb-yellow-deep)) !important;color:#1a0c2e !important;}
.btn-email{background:#fdf2f8 !important;color:#7c1070 !important;border-color:#fce7f3 !important;}
.btn-messenger{background:#fce7f3 !important;color:#7c1070 !important;border-color:#bcd6f7 !important;}

/* ---------- Step numbers ---------- */
.ps-number{background:linear-gradient(135deg,var(--eb-blue),var(--eb-blue-bright)) !important;color:#fff !important;border:none !important;}

/* ---------- Floating top / bottom buttons ---------- */
.eb-fabs{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;flex-direction:column;gap:10px}
.eb-fab{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;line-height:1;cursor:pointer;border:none;text-decoration:none;box-shadow:0 12px 26px -8px rgba(39,18,71,.55);transition:transform .2s ease,filter .2s ease}
.eb-fab:hover{transform:translateY(-2px);filter:brightness(1.06)}
.eb-fab-top{background:linear-gradient(135deg,var(--eb-blue),var(--eb-blue-bright));color:#fff}
.eb-fab-bottom{background:linear-gradient(135deg,var(--eb-yellow),var(--eb-yellow-deep));color:#1a0c2e}

/* ---------- Mobile polish ---------- */
@media (max-width:767px){
  .payment-heading::after,.fcc-heading::after,.hero-heading::after{margin:12px auto 0;}
  .eb-fabs{right:12px;bottom:12px}
  .eb-fab{width:44px;height:44px;font-size:1.25rem}
}

/* ---------- Hover polish (checkout) ---------- */
@media (hover:hover){
  .bonus-item,.urgency-item,.rf-item,.tm-item,.summary-product,.checkout-faq-card .faq-item{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
  .bonus-item:hover,.urgency-item:hover,.rf-item:hover,.tm-item:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(39,18,71,.45)}
  .ccb-btn{transition:transform .2s ease,filter .2s ease}
  .ccb-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
  .accordion-header{transition:background .2s ease}
  .accordion-header:hover .accordion-title{color:#7c1070}
  .hero-benefits .h-benefit-item{transition:transform .2s ease}
  .hero-benefits .h-benefit-item:hover{transform:translateY(-3px)}
}
@media (max-width:600px){
  .checkout-container{padding-left:14px;padding-right:14px}
  .ccb-buttons{flex-direction:column}
  .ccb-btn{width:100%}
}
/* ---- Final-CTA price box sits on DARK navy card -> brighten for readability ---- */
.checkout-final-cta-card .fcc-final-price{color:var(--eb-yellow) !important;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.checkout-final-cta-card .fcc-original-price{color:#dcc7ee !important}
.checkout-final-cta-card .fcc-original-price .strikethrough{color:#c2a3db !important}
.checkout-final-cta-card .fcc-saving{color:#34d399 !important;font-weight:800}
.checkout-final-cta-card .fcc-subtitle{color:#dcc7ee !important}
/* ===== Focus-visible (checkout, a11y) ===== */
a:focus-visible,button:focus-visible,.eb-fab:focus-visible,.ccb-btn:focus-visible,input:focus-visible{outline:3px solid var(--eb-yellow);outline-offset:2px;border-radius:8px}
/* ===== Copy panel chuyển khoản + sticky pay bar (UX checkout) ===== */
.pay-copy{max-width:460px;margin:0 auto 8px;background:#fff;border:1px solid #f1d6e6;border-radius:14px;padding:6px 14px;box-shadow:0 12px 30px -22px rgba(39,18,71,.4)}
.pc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px dashed #f0dcea}
.pc-row:last-of-type{border-bottom:0}
.pc-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pc-k{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#9a6f88}
.pc-v{font-weight:800;color:#1a0c2e;font-size:1.05rem;word-break:break-word}
.pc-btn{flex:none;background:linear-gradient(180deg,var(--eb-yellow),var(--eb-yellow-deep));color:#1a0c2e;border:none;border-radius:8px;padding:8px 14px;font-weight:800;font-size:.85rem;cursor:pointer;font-family:inherit;transition:transform .15s ease,filter .15s ease}
.pc-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.pc-btn.copied{background:#16a34a;color:#fff}
.pc-hint{margin:8px 2px 4px;font-size:.82rem;color:#6b5a72}

.ck-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:900;transform:translateY(120%);transition:transform .35s cubic-bezier(.22,.85,.3,1);background:linear-gradient(90deg,var(--eb-blue-deep),var(--eb-blue));box-shadow:0 -8px 30px -10px rgba(39,18,71,.6);padding:9px 14px}
.ck-stickybar.show{transform:translateY(0)}
.ck-sb-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ck-sb-info{color:#fff;display:flex;flex-direction:column;line-height:1.15}
.ck-sb-info b{color:var(--eb-yellow);font-weight:800;font-size:1.25rem}
.ck-sb-info span{font-size:.76rem;color:#f7d9ea}
.ck-sb-cta{margin:0 !important;display:inline-block !important;width:auto !important;padding:11px 20px !important;font-size:.95rem !important;white-space:nowrap}
body.ck-bar-on .eb-fabs{bottom:84px}
@media (max-width:600px){ .ck-sb-info span{display:none} .ck-sb-cta{padding:10px 14px !important;font-size:.88rem !important} }
/* ===== prefers-reduced-motion (checkout) + star contrast ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
.tm-stars{color:#d97706 !important}
/* skip-to-content (checkout) */
.eb-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--eb-yellow);color:#1a0c2e;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.eb-skip:focus{left:0}
/* sticky pay bar không che footer (fallback) */
body.ck-bar-on .checkout-footer{padding-bottom:84px}

/* Hide ck sticky bar via visibility too */
.ck-stickybar{visibility:hidden}
.ck-stickybar.show{visibility:visible}
/* Click-to-call / click-to-email inline links (checkout) */
.cf-link{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.cf-link:hover{filter:brightness(1.15)}