/* Accent đồng bộ Plugin: xanh Apple (MacBook Pro style) */
.ppc-psu-calc-outer{ --ppc-accent: #0071e3; --ppc-accent-hover: #2997ff; --ppc-accent-dim: rgba(0,113,227,.18); }

/* Wrapper: nền tối full width (trang có shortcode trong theme dùng margin âm kéo lên) */
.ppc-psu-calc-outer{
  background: #0d0d0d;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -200px;
  padding-top: 200px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 32px;
  min-height: 50vh;
  box-sizing: border-box;
}
.ppc-psu-calc-outer::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 220px;
  background: #0d0d0d;
  pointer-events: none;
}
@media (max-width: 768px){
  .ppc-psu-calc-outer{ padding-top: 120px; padding-left: 12px; padding-right: 12px; padding-bottom: 24px; margin-top: -120px; }
  .ppc-psu-calc-outer::before{ height: 140px; }
}

/* Trang calculator full page: hero sát header (không khe hở), full width, nền tối */
body.ppc-calculator-full-page .ppc-psu-calc-outer{
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
body.ppc-calculator-full-page .ppc-psu-calc-outer::before{ display: none; }
body.ppc-calculator-full-page .ppc-psu-calc-outer > .ppc-psu-wrap{
  padding-left: 20px;
  padding-right: 20px;
}
body.ppc-calculator-full-page #primary,
body.ppc-calculator-full-page .content-area,
body.ppc-calculator-full-page .ppc-calculator-page-content,
body.ppc-calculator-full-page .site-main,
body.ppc-calculator-full-page main#main {
  background: #0d0d0d !important;
}
body.ppc-calculator-full-page .ppc-calculator-page-content{ padding-bottom: 32px; }
@media (max-width: 768px){
  body.ppc-calculator-full-page .ppc-psu-calc-outer > .ppc-psu-wrap{ padding-left: 12px; padding-right: 12px; }
}

.ppc-psu-wrap{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #eaeaea !important;
  background: #0a0a0a;
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

/* Đè typography Elementor (.elementor-kit-9 h1–h6) trong trang calculator */
.ppc-psu-calc-outer h1,
.ppc-psu-calc-outer h2,
.ppc-psu-calc-outer h3,
.ppc-psu-calc-outer h4,
.ppc-psu-calc-outer h5,
.ppc-psu-calc-outer h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #fff !important;
}
.ppc-psu-calc-outer h1 { font-size: clamp(22px, 3.2vw, 32px) !important; font-weight: 800 !important; }
.ppc-psu-calc-outer h2 { font-size: 1.5rem !important; font-weight: 700 !important; }
.ppc-psu-calc-outer h3 { font-size: 1.2rem !important; font-weight: 700 !important; letter-spacing: .02em !important; }
.ppc-psu-calc-outer h4,
.ppc-psu-calc-outer h5,
.ppc-psu-calc-outer h6 { font-size: 1.1rem !important; font-weight: 600 !important; }
.ppc-psu-calc-outer p,
.ppc-psu-calc-outer label,
.ppc-psu-calc-outer .ppc-field label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: rgba(255,255,255,.78) !important;
}
.ppc-psu-calc-outer .ppc-field label { font-size: 14px !important; }
.ppc-psu-calc-outer > .ppc-psu-wrap{ margin-top: 0; }

/* Hero: code đơn giản – chiều cao cố định, ảnh canh giữa */
.ppc-psu-calc-outer > .ppc-calc-hero.ppc-calc-hero--fullpage{
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  height: 179px;
  border-radius: 0;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}
.ppc-calc-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,.6) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.ppc-psu-calc-outer > .ppc-calc-hero::after{ border-radius: 0; }
.ppc-calc-hero--no-img::after{ background: rgba(0,0,0,.4); }
.ppc-calc-hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 14px 20px;
  width: 100%;
  box-sizing: border-box;
}
.ppc-calc-hero-title{
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(22px, 3.2vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  /* Gradient tone xanh Apple (MacBook Pro) */
  background: linear-gradient(120deg, #a8d4ff 0%, #0071e3 45%, #7eb8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 640px){
  .ppc-psu-calc-outer > .ppc-calc-hero.ppc-calc-hero--fullpage{ height: 170px; }
  .ppc-calc-hero-inner{ padding: 12px 16px; }
  .ppc-calc-hero-title{ font-size: 26px; }
}

/* Đoạn giới thiệu (intro) + ảnh minh họa PSU */
.ppc-calc-intro{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ppc-calc-intro-media{
  max-width: 320px;
  margin: 0 auto;
}
.ppc-calc-intro-media img{
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.ppc-calc-intro-text{ max-width: 720px; }
.ppc-calc-intro-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
}
@media (min-width: 720px){
  .ppc-calc-intro{
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .ppc-calc-intro-media{ margin: 0; max-width: 280px; }
}

.ppc-top-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
/* Nút Save/Load/Reset: nền xám, 1 viền nhạt */
.ppc-psu-calc-outer .ppc-top-actions .ppc-btn{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.ppc-psu-calc-outer .ppc-top-actions .ppc-btn:hover{
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.ppc-bottom-calc{
  display:flex;
  justify-content:flex-start;
  margin: 10px 0 18px;
}

/* Nút Calculate: accent xanh, bo tròn 12px đồng bộ với Edit configuration */
.ppc-bottom-calc .ppc-btn-calc{
  min-width: 220px;
  font-weight: 700;
  border-radius: 12px;
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #fff !important;
}
.ppc-bottom-calc .ppc-btn-calc:hover{
  background: #2997ff !important;
  border-color: #2997ff !important;
  color: #fff !important;
}

/* Visually hidden (but not display:none) so JS-triggered file input works reliably on mobile */
.ppc-visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
}

.ppc-btn{
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all .15s ease;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}
.ppc-btn:hover{ background: rgba(255,255,255,.10); }
.ppc-btn:active{ transform: translateY(1px); }
.ppc-btn-primary{
  background: rgba(0,113,227,.2);
  border-color: rgba(0,113,227,.5);
  color: #0071e3;
}
.ppc-btn-primary:hover{ background: rgba(0,113,227,.3); border-color: #0071e3; color: #2997ff; }

.ppc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Card section: 1 viền nhạt, bố cục thoáng; overflow visible để dropdown không bị cắt */
.ppc-psu-calc-outer .ppc-card{
  overflow: visible;
}
.ppc-card{
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 18px 20px;
  min-height: 160px;
  border: 1px solid rgba(255,255,255,.06);
}
.ppc-card-hd{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ppc-card h3{
  margin: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Icon section: 1/2 kích thước (112px), chữ canh giữa theo icon */
.ppc-ico{
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  background: rgba(0,113,227,.1);
  border-radius: 12px;
  position: relative;
}
.ppc-ico:after{
  content: "";
  position: absolute;
  inset: 16px;
  background: #0071e3;
  mask-size: var(--ppc-mask-size, contain);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: var(--ppc-mask-size, contain);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: .95;
}
@media (max-width: 900px){
  .ppc-ico{ width: 70px; height: 70px; }
  .ppc-ico:after{ inset: 10px; }
}
@media (max-width: 640px){
  .ppc-ico{ width: 56px; height: 56px; }
  .ppc-ico:after{ inset: 8px; }
}
.ppc-ico-cpu:after{
  --ppc-mask-size: var(--ppc-icon-cpu-size, contain);
  -webkit-mask-image: var(--ppc-icon-cpu, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 2h6v2h2v2h2v6h-2v2h-2v2H9v-2H7v-2H5V6h2V4h2V2zm-2 6v8h10V8H7z"/></svg>'));
  mask-image: var(--ppc-icon-cpu, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 2h6v2h2v2h2v6h-2v2h-2v2H9v-2H7v-2H5V6h2V4h2V2zm-2 6v8h10V8H7z"/></svg>'));
}
.ppc-ico-mobo:after{
  --ppc-mask-size: var(--ppc-icon-system-size, contain);
  -webkit-mask-image: var(--ppc-icon-system, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 4h16v16H4V4zm3 3v10h10V7H7zm1 1h4v4H8V8zm6 0h2v2h-2V8zm0 3h2v2h-2v-2z"/></svg>'));
  mask-image: var(--ppc-icon-system, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 4h16v16H4V4zm3 3v10h10V7H7zm1 1h4v4H8V8zm6 0h2v2h-2V8zm0 3h2v2h-2v-2z"/></svg>'));
}
.ppc-ico-gpu:after{
  --ppc-mask-size: var(--ppc-icon-gpu-size, contain);
  -webkit-mask-image: var(--ppc-icon-gpu, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 7h16v10H4V7zm2 2v6h12V9H6zm13 1h1v4h-1v-4z"/></svg>'));
  mask-image: var(--ppc-icon-gpu, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 7h16v10H4V7zm2 2v6h12V9H6zm13 1h1v4h-1v-4z"/></svg>'));
}
.ppc-ico-fan:after{
  -webkit-mask-image: var(--ppc-icon-cooling, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3a9 9 0 1 0 9 9 9 9 0 0 0-9-9zm0 3a2 2 0 0 1 2 2c0 1-1 2-2 2s-2-1-2-2a2 2 0 0 1 2-2zm6 6c0 2-2 2-3 2s-2-1-2-2 1-2 2-2 3 0 3 2zM9 14c0 1-1 2-2 2s-3 0-3-2 2-2 3-2 2 1 2 2zm5 1c1 0 2 1 2 2s0 3-2 3-2-2-2-3 1-2 2-2z"/></svg>'));
  mask-image: var(--ppc-icon-cooling, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3a9 9 0 1 0 9 9 9 9 0 0 0-9-9zm0 3a2 2 0 0 1 2 2c0 1-1 2-2 2s-2-1-2-2a2 2 0 0 1 2-2zm6 6c0 2-2 2-3 2s-2-1-2-2 1-2 2-2 3 0 3 2zM9 14c0 1-1 2-2 2s-3 0-3-2 2-2 3-2 2 1 2 2zm5 1c1 0 2 1 2 2s0 3-2 3-2-2-2-3 1-2 2-2z"/></svg>'));
}

.ppc-row{ display:grid; gap:12px; margin-bottom:12px; }
.ppc-row-2{ grid-template-columns: 1fr 1fr; }
.ppc-row-3{ grid-template-columns: 1fr 1fr 1fr; }
.ppc-row-4{ grid-template-columns: repeat(4, 1fr); }

.ppc-field label{
  display: block !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.78) !important;
  margin-bottom: 6px !important;
}
/* Wrapper select: position relative để dropdown (native hoặc custom) căn đúng với ô */
.ppc-psu-calc-outer .ppc-field{
  position: relative;
  overflow: visible;
}
.ppc-field select{
  width: 100%;
  background: rgba(255,255,255,.05);
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.ppc-psu-calc-outer .ppc-field select option{
  background:#050508;
  color:#fff;
}
/* Custom select shell – giả lập dropdown, luôn xổ xuống dưới */
.ppc-psu-calc-outer .ppc-select-shell{
  position: relative;
}
.ppc-psu-calc-outer .ppc-select-display{
  width: 100%;
  background: rgba(255,255,255,.05);
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.ppc-psu-calc-outer .ppc-select-text{
  flex:1;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ppc-psu-calc-outer .ppc-select-arrow{
  margin-left:8px;
  font-size:11px;
  opacity:.8;
}
.ppc-psu-calc-outer .ppc-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:4px;
  max-height:260px;
  overflow-y:auto;
  background:#050508;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  padding:4px 0;
  list-style:none;
  z-index:9999;
  display:none;
}
.ppc-psu-calc-outer .ppc-select-shell.is-open .ppc-select-menu{
  display:block;
}
.ppc-psu-calc-outer .ppc-select-option{
  padding:8px 12px;
  font-size:14px;
  color:#fff;
  cursor:pointer;
}
.ppc-psu-calc-outer .ppc-select-option:hover,
.ppc-psu-calc-outer .ppc-select-option.is-selected{
  background:rgba(0,113,227,.18);
}
.ppc-field select:focus{
  border-color: #0071e3;
  box-shadow: 0 0 0 2px rgba(0,113,227,.15);
}
.ppc-field select:disabled{
  opacity: 0.85;
  cursor: wait;
}
/* Custom dropdown (e.g. Choices.js từ theme): căn trái bằng với ô, không lệch */
.ppc-psu-calc-outer .choices{ position: relative; width: 100%; }
.ppc-psu-calc-outer .choices__list--dropdown,
.ppc-psu-calc-outer .choices__list[aria-expanded="true"]{
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 100%;
  box-sizing: border-box;
}
.ppc-psu-calc-outer .choices.is-open .choices__inner{ border-radius: 12px; }

.ppc-radio{margin-top:2px}
.ppc-radio-label{
  font-size:14px;
  color: rgba(255,255,255,.75);
  margin-bottom:8px;
}
.ppc-radio label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-right:16px;
  cursor:pointer;
}
.ppc-radio input{ accent-color: #0071e3; }

.ppc-results{
  margin-top: 20px;
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  overflow: hidden;
}
.ppc-results-hd{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ppc-results-hd h3{ margin:0; font-size:28px; }
.ppc-kpis{ display:flex; gap:18px; flex-wrap:wrap; }
.ppc-kpi-label{ font-size:13px; color: rgba(255,255,255,.65); }
.ppc-kpi-value{ font-size:22px; font-weight:800; }

.ppc-results-body{ padding:16px; }
.ppc-muted{ color: rgba(255,255,255,.70); }

.ppc-series{
  margin-top:18px;
}
.ppc-series-title{
  font-size:18px;
  font-weight:800;
  margin:0 0 10px;
  letter-spacing:.2px;
}
.ppc-series-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
}
.ppc-psu-card{
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 14px;
  min-height: 160px;
}
.ppc-psu-title{ font-weight:900; font-size:16px; margin:0 0 8px; }
.ppc-psu-sub{ color: rgba(255,255,255,.7); font-size:13px; margin-bottom:10px; }
.ppc-load{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}
.ppc-load-bar{
  flex: 1;
  height: 26px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  overflow: hidden;
}
.ppc-load-fill{
  height:100%;
  width:0%;
  background: #0071e3;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-weight:900;
  color:#fff;
}
.ppc-load-green{background:#55b65a;}
.ppc-load-orange{background:#0071e3;}
.ppc-load-red{background:#e53935;}
.ppc-psu-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 14px;
  margin-top:10px;
  color: rgba(255,255,255,.75);
}
.ppc-psu-meta div{ font-size:13px; }
.ppc-psu-thumb{
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  object-fit: contain;
  margin-bottom: 10px;
}

/* bequiet-like summary */
.ppc-summary{margin-top:18px;display:grid;grid-template-columns: 1.2fr .8fr 1fr;gap:16px;align-items:start}
.ppc-sum-col{ background: rgba(255,255,255,.03); border-radius: 14px; padding: 16px; }
.ppc-sum-hd{font-size:22px;margin:0 0 12px 0;color:#fff;letter-spacing:.2px}
.ppc-config-list{font-size:14px;line-height:1.55;color:rgba(255,255,255,.82)}
.ppc-config-list b{color:#fff}
.ppc-sum-btn{margin-top:12px}
.ppc-sum-btn .ppc-btn{ background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.08); }
/* Nút Edit configuration: bo tròn 12px đồng bộ với Calculate */
.ppc-sum-btn .ppc-btn-outline,
.ppc-psu-calc-outer .ppc-btn-outline,
.ppc-psu-calc-outer .ppc-btn[data-action="edit"]{
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(0,113,227,.5) !important;
  color: #0071e3 !important;
}
.ppc-psu-calc-outer .ppc-btn-outline:hover,
.ppc-psu-calc-outer .ppc-btn[data-action="edit"]:hover{
  background: rgba(0,113,227,.15) !important;
  border-color: #0071e3 !important;
  color: #2997ff !important;
}
.ppc-preferences label{display:flex;gap:10px;align-items:center;margin:10px 0;color:rgba(255,255,255,.85)}
.ppc-filters .ppc-filter-block{margin:10px 0 14px 0}
.ppc-filter-label{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:8px}
.ppc-stepper{ display: flex; gap: 10px; align-items: center; justify-content: flex-start; background: rgba(255,255,255,.04); border-radius: 12px; padding: 14px; }
.ppc-stepper button{ width: 42px; height: 42px; border-radius: 12px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #fff; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; flex-shrink: 0; }
.ppc-stepper .ppc-stepper-value{font-size:26px;font-weight:900;color:#0071e3;min-width:70px;text-align:center}
.ppc-range-row{display:flex;gap:10px;align-items:center}
.ppc-range-row input[type="range"]{flex:1;accent-color:#0071e3}
.ppc-range-value{min-width:60px;text-align:right;color:#0071e3;font-weight:800}
.ppc-radios label{margin-right:14px;color:rgba(255,255,255,.85)}
.ppc-radios input{margin-right:6px}

/* ------------------------------------------------------------
   SUMMARY (v2 markup) – match the reference UI in screenshot #1
   The shortcode uses:
   - .ppc-summary-col, .ppc-summary-title, .ppc-summary-lines
   - .ppc-filter-box, .ppc-watt-stepper, .ppc-step, .ppc-watt-val
   - .ppc-slider-row, .ppc-slider-val
------------------------------------------------------------- */
.ppc-summary{
  background:transparent;
  display:grid !important;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap:16px;
  align-items:start;
}
.ppc-summary-col{
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 18px;
}
.ppc-summary-title{
  font-size: 22px;
  margin: 0 0 12px 0;
  color: #fff;
  letter-spacing: .2px;
}
.ppc-summary-lines{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}
.ppc-summary-lines b{color:#fff}

/* Preferences checkboxes – align in a neat vertical list */
.ppc-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin:10px 0;
  color: rgba(255,255,255,.85);
}

/* Filter boxes */
.ppc-filter-box{margin:10px 0 14px 0}
.ppc-filter-label{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:8px}

/* Watt stepper – keep horizontal like screenshot #1 */
.ppc-watt-stepper{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 14px;
}
/* Nút + / −: bo tròn 12px, dấu căn giữa (flex center) */
.ppc-watt-stepper .ppc-step{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.ppc-watt-stepper .ppc-watt-val{
  font-size:26px;
  font-weight:900;
  color:#0071e3;
  min-width:70px;
  text-align:center;
}

/* Slider – accent xanh Blue */
.ppc-slider-row{display:flex;gap:10px;align-items:center}
.ppc-slider-row input[type="range"]{flex:1;accent-color:#0071e3}
.ppc-slider-val{min-width:80px;text-align:right;color:#0071e3;font-weight:800}

/* series layout */
.ppc-series{margin-top:22px}
.ppc-series-row{display:grid;grid-template-columns: 260px 1fr;gap:16px;align-items:start}
.ppc-series-hero{ background: rgba(255,255,255,.03); border-radius: 14px; padding: 14px; }
.ppc-series-hero h4{margin:0 0 12px 0;font-size:30px;letter-spacing:.5px}
.ppc-series-hero img{width:100%;height:240px;object-fit:contain;display:block;border-radius:12px}
.ppc-series-hero .ppc-series-desc{margin-top:12px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.4}
.ppc-psu-grid{display:grid;grid-template-columns: repeat(3, minmax(220px, 1fr));gap:16px;min-width:0}
.ppc-psu-card{ background: rgba(255,255,255,.03); border-radius: 14px; padding: 16px; }
.ppc-psu-card h5{margin:0 0 6px 0;font-size:18px}
.ppc-psu-card .ppc-psu-watt{font-weight:900;color:#fff;font-size:22px}
.ppc-psu-card .ppc-psu-article{color:rgba(255,255,255,.7);margin:10px 0 10px 0}
.ppc-psu-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:12px;flex-wrap:wrap}
/* Add to comparison: nút chữ + icon (theo mẫu), ô tròn cho cart */
.ppc-psu-actions .ppc-psu-compare.ppc-psu-compare-btn{
  width:auto !important;
  min-height:44px !important;
  padding:10px 16px !important;
  border-radius:12px !important;
  gap:12px !important;
  font-size:14px !important;
  font-weight:600 !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:rgba(255,255,255,.9) !important;
}
.ppc-psu-actions .ppc-psu-compare.ppc-psu-compare-btn:hover{background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.22) !important}
.ppc-psu-actions .ppc-psu-compare.ppc-psu-compare-btn.is-active{background:rgba(0,113,227,.15) !important;border-color:rgba(0,113,227,.5) !important;color:#0071e3 !important}
.ppc-psu-actions .ppc-psu-compare.ppc-psu-compare-btn.is-active:hover{background:rgba(0,113,227,.22) !important;border-color:#0071e3 !important}
.ppc-psu-compare-ico{font-size:20px;line-height:1;opacity:1;display:inline-flex;align-items:center;justify-content:center;min-width:1.2em}
.ppc-psu-compare-txt{white-space:nowrap}
.ppc-psu-actions .ppc-psu-action:not(.ppc-psu-compare-btn){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px;
  height:44px;
  border-radius:50% !important;
  background:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
  text-decoration:none !important;
  padding:0 !important;
  line-height:0 !important;
  font-size:18px;
}
.ppc-psu-actions .ppc-psu-action:focus{outline:2px solid #0071e3;outline-offset:2px}
.ppc-psu-actions a.ppc-buy{background:#0071e3 !important;color:#fff !important;border-color:#0071e3 !important}
.ppc-psu-actions a.ppc-buy:hover{background:#2997ff !important;border-color:#2997ff !important;color:#fff !important}

@media (max-width: 980px){
  .ppc-grid{ grid-template-columns: 1fr; }
  .ppc-row-4{ grid-template-columns: 1fr 1fr; }
  .ppc-summary{grid-template-columns:1fr !important}
  .ppc-series-row{grid-template-columns:1fr}
  .ppc-psu-grid{grid-template-columns:1fr}
}

/* Compare dock: cố định đáy màn hình, luôn thấy khi cuộn lên/xuống */
.ppc-compare-dock{position:fixed !important;bottom:0;left:0;right:0;z-index:9998;padding:12px 16px;box-sizing:border-box}
.ppc-compare-dock-inner{max-width:1100px;margin:0 auto;background:rgba(18,18,18,.97);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;box-shadow:0 -4px 24px rgba(0,0,0,.5)}
.ppc-compare-dock-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ppc-compare-dock-text{font-size:14px;color:rgba(255,255,255,.88)}
/* Nút Close: accent xanh đồng bộ, không vàng – UI pro (ghi đè theme) */
.ppc-compare-dock-close{display:inline-flex !important;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;border:1px solid rgba(0,113,227,.4) !important;background:rgba(0,113,227,.08) !important;color:#0071e3 !important;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.ppc-compare-dock-close:hover{background:rgba(0,113,227,.18) !important;border-color:#0071e3 !important;color:#2997ff !important}
.ppc-compare-dock-chevron{font-size:10px;opacity:.9;transition:transform .2s ease}
.ppc-compare-dock.is-collapsed .ppc-compare-dock-chevron{transform:rotate(-180deg)}
.ppc-compare-dock-slots{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.ppc-compare-dock.is-collapsed .ppc-compare-dock-slots{display:none}
.ppc-compare-dock.is-collapsed .ppc-compare-dock-top{margin-bottom:0}
/* Khi dock hiện (fixed), chừa chỗ cuối trang để nội dung không bị che */
.ppc-psu-wrap.has-compare-dock{padding-bottom:200px}
.ppc-compare-slots-inner{display:flex;gap:12px;flex:1;min-width:0}
.ppc-compare-badge{display:flex;flex-direction:column;align-items:stretch;width:140px;min-width:100px;flex:1;max-width:180px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:10px;position:relative;box-sizing:border-box}
.ppc-compare-badge-thumb{width:100%;height:80px;border-radius:8px;background:#0d0d0d center/contain no-repeat;border:1px solid rgba(255,255,255,.08)}
.ppc-compare-badge-thumb.is-empty{background:rgba(255,255,255,.06)}
.ppc-compare-badge-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.9);margin-top:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ppc-compare-slot-empty{display:flex;align-items:center;justify-content:center;width:140px;min-width:100px;flex:1;max-width:180px;min-height:120px;border-radius:12px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18);box-sizing:border-box}
.ppc-compare-slot-plus{font-size:42px;font-weight:300;color:rgba(255,255,255,.4);line-height:1;display:flex;align-items:center;justify-content:center}
/* Compare now: chiều cao vừa, không kéo dãn theo dock */
.ppc-compare-now{align-self:center !important;height:40px !important;min-height:40px !important;max-height:40px !important;border-radius:10px !important;padding:0 18px !important;font-size:14px !important;font-weight:600 !important;line-height:1 !important;background:#0071e3 !important;border-color:#0071e3 !important;color:#fff !important;white-space:nowrap;display:inline-flex !important;align-items:center !important;justify-content:center !important}
.ppc-compare-now:hover:not(:disabled){background:#2997ff !important;border-color:#2997ff !important;color:#fff !important}
.ppc-compare-now:disabled{opacity:.5;cursor:not-allowed}
.ppc-compare-badges{display:flex;gap:12px;flex:1;min-width:0}
.ppc-compare-remove{
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  box-sizing:border-box !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.2) !important;
  background:rgba(0,0,0,.5) !important;
  color:#fff !important;
  cursor:pointer;
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  font-size:18px !important;
  font-weight:700 !important;
}
.ppc-compare-remove:hover,
.ppc-compare-remove:focus{
  background:#0071e3 !important;
  color:#fff !important;
  border-color:#0071e3 !important;
}
.ppc-compare-right{display:flex;align-items:center;gap:10px}
.ppc-toggle{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.75)}
.ppc-toggle input{transform:scale(1.15)}

.ppc-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:flex-start;justify-content:center;padding:5vh 4vw;box-sizing:border-box;overflow-y:auto}
.ppc-modal[aria-hidden="false"]{display:flex}
.ppc-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72)}
.ppc-modal-card{position:relative;max-width:1100px;width:100%;margin:0 auto;background:rgba(20,20,20,.98);border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);flex-shrink:0}
.ppc-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.10)}
.ppc-modal-head h3{margin:0;font-size:22px;font-weight:700;color:#fff;letter-spacing:.02em}
/* Nút đóng: đồng bộ accent xanh, không vàng */
/* Nút đóng modal (X): accent xanh, ghi đè theme vàng */
.ppc-modal-close{width:44px;height:44px;border-radius:12px;border:1px solid rgba(0,113,227,.4) !important;background:rgba(0,113,227,.08) !important;color:#0071e3 !important;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:0;transition:background .15s ease,border-color .15s ease,color .15s ease}
.ppc-modal-close:hover{background:rgba(0,113,227,.2) !important;border-color:#0071e3 !important;color:#2997ff !important}
.ppc-modal-body{padding:18px 20px;max-height:72vh;overflow:auto}

/* Compare (v3) – đồng bộ UI với theme calculator */
.ppc-compare-v3{color:rgba(255,255,255,.9)}
.ppc-compare-controls{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ppc-compare-controls .ppc-btn{border-radius:12px}
/* Open all / Close all: outline xanh giống Edit configuration */
.ppc-compare-controls .ppc-btn-ghost,.ppc-compare-controls .ppc-btn-outline{background:transparent !important;border:1px solid rgba(0,113,227,.5) !important;color:#0071e3 !important}
.ppc-compare-controls .ppc-btn-ghost:hover,.ppc-compare-controls .ppc-btn-outline:hover{background:rgba(0,113,227,.15) !important;border-color:#0071e3 !important;color:#2997ff !important}
.ppc-compare-controls .ppc-toggle{display:flex;align-items:center;gap:8px;opacity:.95;color:rgba(255,255,255,.85)}
.ppc-compare-controls input{accent-color:#0071e3}
.ppc-compare-section{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:14px}
.ppc-compare-section-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;padding:2px 0}
.ppc-compare-section-head:hover h4{color:#fff}
.ppc-compare-section-head h4{margin:0;font-size:17px;font-weight:700;color:rgba(255,255,255,.9);transition:color .15s ease}
.ppc-compare-toggle{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;padding:0;flex-shrink:0;transition:border-color .15s ease,background .15s ease}
.ppc-compare-section-head:hover .ppc-compare-toggle{border-color:rgba(0,113,227,.5);background:rgba(0,113,227,.08)}
.ppc-compare-section-body{display:none;margin-top:12px}
.ppc-compare-section.is-open .ppc-compare-section-body{display:block}
.ppc-compare-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.ppc-compare-table th,.ppc-compare-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:middle}
.ppc-compare-table th{text-align:left;color:rgba(255,255,255,.78);width:26%;font-weight:600}
.ppc-compare-table td{text-align:center}
.ppc-compare-table th:first-child,.ppc-compare-table td:first-child{width:26%}
.ppc-compare-table a{color:inherit;text-decoration:none}
.ppc-compare-table .diff{font-weight:600}
.ppc-compare-grid{display:grid;grid-template-columns:220px repeat(3, minmax(200px, 1fr));gap:14px}
.ppc-compare-grid .ppc-compare-label{color:rgba(255,255,255,.72);font-size:12px}
.ppc-compare-grid .ppc-compare-cell{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:14px;text-align:center}
.ppc-compare-grid .ppc-compare-cell .ppc-compare-title{text-align:center}
.ppc-compare-grid .ppc-compare-cell .ppc-btn{margin-top:10px;border-radius:12px}
.ppc-compare-grid .ppc-compare-cell .ppc-btn-outline{background:transparent !important;border:1px solid rgba(0,113,227,.5) !important;color:#0071e3 !important}
.ppc-compare-grid .ppc-compare-cell .ppc-btn-outline:hover{background:rgba(0,113,227,.15) !important;border-color:#0071e3 !important;color:#2997ff !important}
.ppc-compare-title{font-weight:800;font-size:16px;margin:0 0 6px 0;color:#fff}
.ppc-compare-sub{color:rgba(255,255,255,.7);font-size:13px}
.ppc-compare-row{display:contents}
.ppc-compare-row[data-diff="0"] .ppc-compare-cell{opacity:.8}

@media (max-width: 980px){
  .ppc-compare-dock-inner{flex-direction:column;align-items:flex-start}
  .ppc-compare-grid{grid-template-columns:1fr}
}

.ppc-compare-thumb{width:100%;max-height:160px;object-fit:contain;display:block;margin:0 auto 10px auto}

/* Mobile safety net for in-app browsers (layout viewport ~980px) */
@media (max-width: 1200px){
  .ppc-psu-grid{grid-template-columns: 1fr !important;}
  .ppc-psu-card{width:100%;max-width:100%;}
  .ppc-psu-card *{max-width:100%;}
}

@media (max-width: 600px){
  .ppc-psu-card{padding:16px;}
  .ppc-psu-card h3{font-size:20px;}
  .ppc-psu-card .ppc-psu-meta{font-size:14px;}
}

/* Override theme/Elementor: icon, card-hd (không lặp hero – tránh conflict) */
.ppc-psu-calc-outer .ppc-ico{ width: 112px !important; height: 112px !important; }
.ppc-psu-calc-outer .ppc-ico:after{ inset: 16px !important; }
.ppc-psu-calc-outer .ppc-card-hd{ align-items: center !important; }
@media (max-width: 900px){
  .ppc-psu-calc-outer .ppc-ico{ width: 70px !important; height: 70px !important; }
  .ppc-psu-calc-outer .ppc-ico:after{ inset: 10px !important; }
}
@media (max-width: 640px){
  .ppc-psu-calc-outer .ppc-ico{ width: 56px !important; height: 56px !important; }
  .ppc-psu-calc-outer .ppc-ico:after{ inset: 8px !important; }
}

/* Toast thay alert: căn giữa viewport, không lệch lên che header */
.ppc-psu-toast{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.ppc-psu-toast.is-visible{
  display: flex;
}
.ppc-psu-toast-box{
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.ppc-psu-toast-msg{
  margin: 0 0 16px 0;
  font-size: 15px;
  color: rgba(255,255,255,.9);
  line-height: 1.45;
}
.ppc-psu-toast .ppc-toast-ok{
  width: 100%;
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #0d0d0d !important;
  border-radius: 10px;
}
.ppc-psu-toast .ppc-toast-ok:hover{
  background: #2997ff !important;
  border-color: #2997ff !important;
  color: #0d0d0d !important;
}