/* ═══════════════════════════════════════════════════
   Dwight USP Shield Section — Frontend CSS v2.0.0
   Design chốt: v17
═══════════════════════════════════════════════════ */

/* ── Reset cục bộ ─────────────────────────────────── */
.dwight-usp-wrap *,
.dwight-usp-wrap *::before,
.dwight-usp-wrap *::after { box-sizing: border-box; }

/* ── Wrapper ──────────────────────────────────────── */
.dwight-usp-wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* ── Card (2-col grid) ────────────────────────────── */
.dwight-usp-wrap .usp-card {
  display: grid;
  grid-template-columns: 640px 1fr;
  background: #fff;
  box-shadow: 0 20px 70px rgba(19,35,75,.14), 0 2px 8px rgba(19,35,75,.06);
  min-height: 700px;
  overflow: hidden;
}

/* ── Left panel ───────────────────────────────────── */
.dwight-usp-wrap .left-panel {
  background: #13234B;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 32px 28px;
  position: relative;
  overflow: hidden;
}
.dwight-usp-wrap .left-panel::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 100% 10%, rgba(207,32,47,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 90%,  rgba(255,255,255,.03) 0%, transparent 60%);
  pointer-events: none;
}
.dwight-usp-wrap .shield-wrap {
  width: 100%; max-width: 570px; position: relative; z-index: 1;
}
.dwight-usp-wrap .shield-svg {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 14px 44px rgba(0,0,0,.55));
}

/* ── Shield cells ─────────────────────────────────── */
.dwight-usp-wrap .cell            { cursor: pointer; }
.dwight-usp-wrap .cell .face      { transition: filter .18s ease; }
.dwight-usp-wrap .cell:hover .face  { filter: brightness(1.13); }
.dwight-usp-wrap .cell.active .face { filter: brightness(1.22); }
.dwight-usp-wrap .cell .ring {
  opacity: 0; transition: opacity .18s;
  fill: none; stroke: rgba(255,255,255,.95); stroke-width: 2.5;
}
.dwight-usp-wrap .cell.active .ring { opacity: 1; }
.dwight-usp-wrap .ct { pointer-events: none; font-weight: 700; text-transform: uppercase; }

/* foreignObject text wrap inside SVG cells */
.dwight-usp-wrap .ct-fo {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 15px; font-weight: 700; line-height: 1.5;
  text-transform: uppercase;
  word-break: break-word; overflow-wrap: break-word;
  pointer-events: none;
  padding: 4px 0;
  box-sizing: border-box;
}

/* C8 (Vanilla): text luôn là #3F567F, trắng khi active/hover */
.dwight-usp-wrap #c8 .ct                   { fill: #3F567F !important; }
.dwight-usp-wrap #c8.active .ct,
.dwight-usp-wrap #c8:hover  .ct            { fill: #fff !important; }

/* C8 hover/active → Marigold để nổi bật */
.dwight-usp-wrap #c8:hover .face           { fill: #FFA400 !important; filter: none; }
.dwight-usp-wrap #c8.active .face          { fill: #FFA400 !important; filter: brightness(1.08); }

/* ── Nav ──────────────────────────────────────────── */
.dwight-usp-wrap .shield-nav {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 14px;
}
.dwight-usp-wrap .nav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.28);
  background: transparent; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; font-size: 14px; flex-shrink: 0;
  line-height: 1;
}
.dwight-usp-wrap .nav-btn:hover { background: #CF202F; border-color: #CF202F; }
.dwight-usp-wrap .nav-dots { display: flex; gap: 6px; align-items: center; }
.dwight-usp-wrap .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.28); cursor: pointer; transition: all .2s;
}
.dwight-usp-wrap .dot.active { background: #CF202F; transform: scale(1.3); }
.dwight-usp-wrap .nav-cnt {
  font-size: 16px !important; font-weight: 700 !important; color: #fff !important;
  min-width: 36px; text-align: center; line-height: 1 !important;
  opacity: 1 !important; visibility: visible !important;
}
.dwight-usp-wrap .nav-cnt b,
.dwight-usp-wrap .nav-cnt span,
.dwight-usp-wrap .nav-cnt .dwight-cur,
.dwight-usp-wrap .nav-cnt .nav-sep,
.dwight-usp-wrap .nav-cnt .nav-total {
  color: #fff !important; font-size: 16px !important;
  font-weight: 700 !important; display: inline !important;
  opacity: 1 !important; visibility: visible !important;
  line-height: 1 !important;
}

/* ── Right panel ──────────────────────────────────── */
.dwight-usp-wrap .right-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 52px 56px; background: #fff;
  position: relative; overflow: hidden;
}
.dwight-usp-wrap .slides-container { width: 100%; max-width: 460px; }

/* ── Slides ───────────────────────────────────────── */
.dwight-usp-wrap .usp-slide { display: none; }
.dwight-usp-wrap .usp-slide.active {
  display: flex; flex-direction: column;
  animation: dwight-fade .35s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes dwight-fade {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.dwight-usp-wrap .s-tag {
  font-size: 12px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: #CF202F; margin: 0 0 8px;
}
.dwight-usp-wrap .s-title {
  font-size: clamp(18px, 1.6vw, 26px); font-weight: 700;
  color: #13234B; line-height: 1.25; margin: 0 0 16px;
}
.dwight-usp-wrap .s-img {
  width: 100%; height: 300px; margin-bottom: 16px; overflow: hidden;
}
.dwight-usp-wrap .s-img--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dwight-usp-wrap .s-img--empty {
  background: #EDF0F8; border: 2px dashed rgba(19,35,75,.11);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; color: #6B7A99;
  font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  height: 100%;
}
.dwight-usp-wrap .s-img--empty svg { opacity: .3; }
.dwight-usp-wrap .s-body {
  font-size: 16px; line-height: 1.75; color: #58668a; margin: 0 0 38px;
}
.dwight-usp-wrap .s-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; background: #13234B; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; transition: background .2s, transform .15s;
  align-self: flex-start;
}
.dwight-usp-wrap .s-cta:hover { background: #CF202F; transform: translateY(-1px); color: #fff; }
.dwight-usp-wrap .s-cta svg   { transition: transform .2s; }
.dwight-usp-wrap .s-cta:hover svg { transform: translateX(4px); }

.dwight-usp-wrap .s-progress  { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(19,35,75,.1); }
.dwight-usp-wrap .s-track     { height: 3px; background: #EDF0F8; overflow: hidden; }
.dwight-usp-wrap .s-fill      { height: 100%; background: linear-gradient(90deg, #13234B, #CF202F); transition: width .4s; }

/* ── Mobile detail panel ──────────────────────────── */
.dwight-usp-wrap .mobile-detail { display: none; background: #fff; border-top: 3px solid #CF202F; }
.dwight-usp-wrap .mobile-detail .usp-slide        { display: none; padding: 20px 20px 28px; }
.dwight-usp-wrap .mobile-detail .usp-slide.active { display: flex; flex-direction: column; }
.dwight-usp-wrap .mobile-detail .s-title { font-size: 17px; }
.dwight-usp-wrap .mobile-detail .s-img   { height: 200px; }
.dwight-usp-wrap .mobile-detail .s-body  { font-size: 15px; margin-bottom: 24px; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1080px) {
  .dwight-usp-wrap .usp-card            { grid-template-columns: 1fr; min-height: auto; }
  .dwight-usp-wrap .left-panel          { padding: 28px 20px 16px; }
  .dwight-usp-wrap .shield-wrap         { max-width: 440px; }
  .dwight-usp-wrap .right-panel         { display: none; }       /* hidden on mobile */
  .dwight-usp-wrap .mobile-detail       { display: block; }      /* shown on mobile  */
}
@media (max-width: 600px) {
  .dwight-usp-wrap                      { padding: 0 0 32px; }
  .dwight-usp-wrap .shield-wrap         { max-width: 360px; }
  .dwight-usp-wrap .mobile-detail .usp-slide { padding: 16px 16px 24px; }
  }