/* ════════════════════════════════════════════════════════════════
   ONENESS DISC TEST — giao diện theo tone trang chủ nlp.com.vn
   Tím đậm + kem + vàng gradient, font Be Vietnam Pro.
   Mọi class có tiền tố .owdisc nên không ảnh hưởng phần còn lại của trang.
   ════════════════════════════════════════════════════════════════ */

.owdisc{
  --d-mid:#0b0518; --d-royal:#2a1660; --d-violet:#1d1142;
  --d-accent:#8b5cff; --d-accent-deep:#6d3cf0; --d-lav:#bfa0ff; --d-lav-soft:#d6c4ff;
  --d-gold:#e0b252; --d-gold-bright:#f6c85f; --d-gold-deep:#c79235;
  --d-gold-grad:linear-gradient(135deg,#e6b94f 0%,#f6c85f 55%,#d99a3f 100%);
  --d-cream:#fbf5ea; --d-ink:#1b1320; --d-ink-soft:#4a4258; --d-line:rgba(42,22,96,.09);
  --d-on-soft:rgba(214,205,238,.8);
  --d-shadow:0 30px 70px -40px rgba(42,22,96,.45);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--d-ink); line-height:1.6; max-width:980px; margin:0 auto; padding:8px 0;
}
.owdisc *, .owdisc *::before, .owdisc *::after{ box-sizing:border-box; }
.owdisc h2, .owdisc h3{ font-family:inherit; text-transform:none; letter-spacing:-.015em; }
/* Flatsome thụt lề cho ul/li trong nội dung trang -> bỏ trong phạm vi plugin */
.owdisc ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
.owdisc li{ margin-left:0 !important; list-style:none !important; }
.owdisc button{ font-family:inherit; text-transform:none; letter-spacing:0; margin:0; }

.owdisc__card{
  background:#fff; border:1px solid var(--d-line); border-radius:28px; box-shadow:var(--d-shadow);
  padding:clamp(1.4rem,4vw,3rem); overflow:hidden;
}
.owdisc.is-result .owdisc__card{ padding:0; }

/* ── Chữ chung ── */
.owdisc-eyebrow{ margin:0 0 .9rem; color:var(--d-gold-deep); font-weight:700; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; }
.owdisc-eyebrow::before{ content:""; display:inline-block; width:26px; height:1px; margin-right:.55rem; vertical-align:middle; background:linear-gradient(90deg,transparent,var(--d-gold)); }
.owdisc-title{ margin:0; color:var(--d-ink) !important; font-weight:800; font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.2; }
.owdisc-lead{ margin:1rem 0 0; color:var(--d-ink-soft); font-size:1.04rem; }
.owdisc-error{ margin:1rem 0 0; padding:.8rem 1rem; border-radius:12px; background:#fdecea; color:#a3261c; font-weight:600; }
.owdisc-note{ text-align:center; color:var(--d-ink-soft); font-size:.9rem; margin:1rem 0 0; }

/* ── Nút ── */
.owdisc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:50px; padding:0 1.6rem;
  border-radius:999px; font-weight:700; font-size:1rem; line-height:1; cursor:pointer; text-decoration:none !important;
  border:1px solid transparent; transition:transform .25s,box-shadow .25s,background .2s,border-color .2s;
}
.owdisc-btn--gold{ background:var(--d-gold-grad); color:#2b1a05 !important; box-shadow:0 8px 30px -8px rgba(230,178,79,.55),inset 0 1px 0 rgba(255,255,255,.4); }
.owdisc-btn--gold:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -8px rgba(230,178,79,.7); }
.owdisc-btn--ghost{ background:#fff; color:var(--d-accent-deep) !important; border-color:rgba(109,60,240,.3); }
.owdisc-btn--ghost:hover{ border-color:var(--d-accent-deep); background:rgba(139,92,255,.06); }
.owdisc-btn[disabled]{ opacity:.4; cursor:default; transform:none; }
.owdisc-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.owdisc-actions--center{ justify-content:center; padding:0 1.5rem 2.4rem; }

/* ── Giới thiệu ── */
.owdisc-factors{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:1.6rem !important; }
.owdisc-factors li{
  position:relative; padding:1rem 1rem 1.1rem; border-radius:18px; background:var(--d-cream);
  border:1px solid var(--d-line); overflow:hidden;
}
.owdisc-factors li::before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--c); }
.owdisc-factors b{ display:block; font-size:1.7rem; line-height:1; font-weight:800; color:var(--c); }
.owdisc-factors span{ display:block; margin-top:.4rem; font-weight:700; color:var(--d-ink); }
.owdisc-factors small{ display:block; margin-top:.3rem; color:var(--d-ink-soft); font-size:.82rem; line-height:1.45; }
.owdisc-howto{ margin-top:1.4rem; padding:1rem 1.2rem; border-radius:16px; background:rgba(139,92,255,.07); border:1px solid rgba(139,92,255,.16); color:var(--d-ink-soft); font-size:.95rem; }
.owdisc-howto b{ color:var(--d-ink); }
.owdisc-tag{ display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.82rem; font-weight:700; white-space:nowrap; }
.owdisc-tag--m{ background:rgba(63,168,119,.14); color:#23794f; }
.owdisc-tag--l{ background:rgba(224,87,79,.12); color:#b23a33; }

/* ── Làm bài ── */
.owdisc-progress{ position:sticky; top:70px; z-index:5; margin:-.4rem -.4rem 1.2rem; padding:.6rem .4rem; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-radius:14px; }
.owdisc-progress__meta{ display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; color:var(--d-ink-soft); margin-bottom:.45rem; }
.owdisc-progress__bar{ height:8px; border-radius:99px; background:#efe7d6; overflow:hidden; }
.owdisc-progress__bar i{ display:block; height:100%; border-radius:99px; background:var(--d-gold-grad); transition:width .35s; }

.owdisc-group{ border:1px solid var(--d-line); border-radius:20px; padding:1.1rem 1.1rem .7rem; margin-bottom:1rem; background:#fff; transition:border-color .2s,box-shadow .2s; }
.owdisc-group.is-missing{ border-color:#e0574f; box-shadow:0 0 0 3px rgba(224,87,79,.12); }
.owdisc-group__head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem; margin-bottom:.6rem; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--d-gold-deep); }
.owdisc-group__head em{ font-style:normal; letter-spacing:0; text-transform:none; color:#b23a33; font-weight:600; }
.owdisc-item{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .8rem; border-radius:14px;
  border:1px solid transparent; transition:background .2s,border-color .2s;
}
.owdisc-item + .owdisc-item{ margin-top:.3rem; }
.owdisc-item:hover{ background:var(--d-cream); }
.owdisc-item.is-m{ background:rgba(63,168,119,.08); border-color:rgba(63,168,119,.35); }
.owdisc-item.is-l{ background:rgba(224,87,79,.06); border-color:rgba(224,87,79,.3); }
.owdisc-item__text{ color:var(--d-ink); font-size:1rem; }
.owdisc-item__btns{ display:flex; gap:.4rem; flex:0 0 auto; }
.owdisc-pick{
  min-height:38px; padding:0 .85rem; border-radius:999px; cursor:pointer; font-size:.82rem; font-weight:700;
  background:#fff; border:1px solid var(--d-line); color:var(--d-ink-soft); transition:all .2s;
}
.owdisc-pick--m:hover{ border-color:#3fa877; color:#23794f; }
.owdisc-pick--l:hover{ border-color:#e0574f; color:#b23a33; }
.owdisc-pick--m[aria-pressed="true"]{ background:#3fa877; border-color:#3fa877; color:#fff; }
.owdisc-pick--l[aria-pressed="true"]{ background:#e0574f; border-color:#e0574f; color:#fff; }
.owdisc-nav{ display:flex; justify-content:space-between; gap:.8rem; margin-top:1.4rem; }

/* ── Thông tin ── */
.owdisc-form{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; margin-top:1.6rem; }
.owdisc-form label{ display:flex; flex-direction:column; gap:.4rem; font-size:.88rem; font-weight:600; color:var(--d-ink); margin:0; }
.owdisc-form input, .owdisc-form textarea{
  width:100%; margin:0; padding:.85rem 1rem; border-radius:12px; border:1px solid rgba(42,22,96,.16); background:#fff;
  font:400 1rem 'Be Vietnam Pro',system-ui,sans-serif; color:var(--d-ink); box-shadow:none; height:auto;
}
.owdisc-form input:focus, .owdisc-form textarea:focus{ outline:none; border-color:var(--d-accent); box-shadow:0 0 0 3px rgba(139,92,255,.15); }
.owdisc-form__full{ grid-column:1 / -1; }

/* ── Đang xử lý ── */
.owdisc-processing{ text-align:center; padding:3rem 0; }
.owdisc-spinner{ width:54px; height:54px; margin:0 auto; border-radius:50%; border:4px solid #efe7d6; border-top-color:var(--d-gold); animation:owdisc-spin .9s linear infinite; }
@keyframes owdisc-spin{ to{ transform:rotate(360deg); } }
.owdisc-processing .owdisc-actions{ justify-content:center; }

/* ── Kết quả ── */
.owdisc-hero{
  text-align:center; color:#fff; padding:clamp(2.4rem,6vw,3.6rem) clamp(1.4rem,5vw,3.4rem);
  background:
    radial-gradient(120% 80% at 50% -10%,#2a1660 0%,transparent 55%),
    radial-gradient(90% 60% at 85% 20%,rgba(139,92,255,.24),transparent 60%),
    linear-gradient(180deg,#0e0726,#0b0518 92%);
}
.owdisc-hero .owdisc-eyebrow{ color:var(--d-gold-bright); }
.owdisc-hero__code{
  display:inline-flex; align-items:center; justify-content:center; min-width:96px; height:96px; padding:0 1.2rem; margin:.4rem auto 0;
  border-radius:28px; font-size:2.6rem; font-weight:800; color:#2b1a05; background:var(--d-gold-grad);
  box-shadow:0 20px 50px -20px rgba(230,178,79,.8);
}
.owdisc-hero__name{ margin:1.1rem 0 0; color:#fff !important; font-weight:800; font-size:clamp(1.7rem,4vw,2.6rem); }
.owdisc-hero__tag{ margin:.4rem 0 0; color:var(--d-lav-soft); font-size:1.08rem; font-weight:600; }
.owdisc-hero__sum{ max-width:640px; margin:1.1rem auto 0; color:var(--d-on-soft); font-size:1rem; }

.owdisc-result__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:20px; padding:clamp(1.4rem,4vw,2.4rem); background:var(--d-cream); }
.owdisc-panel{ background:#fff; border:1px solid var(--d-line); border-radius:22px; padding:1.4rem 1.4rem 1.2rem; box-shadow:0 18px 44px -32px rgba(42,22,96,.35); }
.owdisc-panel h3, .owdisc-block h3{ margin:0 0 .9rem; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--d-gold-deep) !important; }
.owdisc-chart{ display:block; width:100%; max-width:320px; margin:0 auto; color:var(--d-ink); }
.owdisc-chart__l{ font:800 26px 'Be Vietnam Pro',sans-serif; text-anchor:middle; dominant-baseline:middle; }
.owdisc-chart__a{ font:600 11px 'Be Vietnam Pro',sans-serif; fill:var(--d-ink-soft); text-anchor:middle; }
.owdisc-chart__x{ display:flex; justify-content:space-between; max-width:320px; margin:.2rem auto 0; font-size:.75rem; font-weight:600; color:var(--d-ink-soft); }

.owdisc-bar + .owdisc-bar{ margin-top:1rem; }
.owdisc-bar__head{ display:flex; align-items:baseline; gap:.5rem; }
.owdisc-bar__head b{ font-size:1.15rem; font-weight:800; color:var(--c); width:1.2rem; }
.owdisc-bar__head span{ font-weight:700; color:var(--d-ink); }
.owdisc-bar__head em{ margin-left:auto; font-style:normal; font-weight:800; color:var(--d-ink); }
.owdisc-bar__track{ height:10px; margin-top:.35rem; border-radius:99px; background:#efe7d6; overflow:hidden; }
.owdisc-bar__track i{ display:block; height:100%; border-radius:99px; background:var(--c); }
.owdisc-bar p{ margin:.35rem 0 0; font-size:.86rem; color:var(--d-ink-soft); line-height:1.5; }
.owdisc-bar.is-top .owdisc-bar__head span::after{ content:"Nổi bật"; margin-left:.5rem; padding:.12rem .5rem; border-radius:99px; font-size:.68rem; font-weight:700; background:rgba(230,178,79,.18); color:var(--d-gold-deep); vertical-align:middle; }

.owdisc-blocks{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 clamp(1.4rem,4vw,2.4rem) clamp(1.4rem,4vw,2.4rem); background:var(--d-cream); }
.owdisc-block{ background:#fff; border:1px solid var(--d-line); border-radius:20px; padding:1.3rem 1.4rem; }
.owdisc-block p{ margin:0; color:var(--d-ink-soft); }
.owdisc-block li{ position:relative; padding-left:1.4rem; color:var(--d-ink-soft); }
.owdisc-block li + li{ margin-top:.45rem; }
.owdisc-block li::before{ content:""; position:absolute; left:.2rem; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--d-accent); box-shadow:0 0 0 3px rgba(139,92,255,.15); }
.owdisc-block--good li::before{ background:#3fa877; box-shadow:0 0 0 3px rgba(63,168,119,.15); }
.owdisc-block--warn li::before{ background:#e0574f; box-shadow:0 0 0 3px rgba(224,87,79,.14); }
.owdisc-block--grow{ grid-column:1 / -1; background:linear-gradient(120deg,rgba(230,178,79,.12),rgba(139,92,255,.08)); border-color:rgba(230,178,79,.3); }
.owdisc-block--grow li::before{ background:var(--d-gold); box-shadow:0 0 0 3px rgba(230,178,79,.2); }
.owdisc-disclaimer{ margin:0; padding:1.4rem clamp(1.4rem,4vw,2.4rem) .4rem; font-size:.84rem; color:var(--d-ink-soft); text-align:center; font-style:italic; }

/* ── Điện thoại ── */
@media (max-width:820px){
  .owdisc-factors{ grid-template-columns:1fr 1fr; }
  .owdisc-result__grid, .owdisc-blocks{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .owdisc__card{ border-radius:22px; padding:1.1rem; }
  .owdisc-group{ padding:.9rem .7rem .5rem; }
  .owdisc-item{ padding:.6rem; }
  .owdisc-item{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .owdisc-item__btns .owdisc-pick{ flex:1; }
  .owdisc-form{ grid-template-columns:minmax(0,1fr); }
  .owdisc-nav{ flex-direction:column-reverse; }
  .owdisc-nav .owdisc-btn, .owdisc-actions .owdisc-btn{ width:100%; }
  .owdisc-progress{ top:60px; }
}
@media (prefers-reduced-motion:reduce){
  .owdisc *{ transition:none !important; animation:none !important; }
}