/* HẠO NAM AI V2.0.5 — SHARED DETAIL WORKSPACE
   One detail surface for Máy Mới now and future Máy Cũ / Sửa Chữa modules. */

/* Keep the main module readable when the workspace is open without making the whole page feel blocked. */
@media (min-width:768px){
  .app.detail-workspace-open .screen.active::after{
    content:"";
    position:fixed;
    top:0;right:0;bottom:0;
    width:min(720px,58vw);
    z-index:30;
    pointer-events:none;
    background:linear-gradient(90deg,transparent 0%,rgba(1,3,7,.20) 18%,rgba(1,3,7,.58) 58%,rgba(1,3,7,.82) 100%);
  }
}

/* Detail is always mounted so opening it is a smooth workspace transition instead of a display jump. */
.app .detail{
  display:block;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateX(26px) scale(.992);
  transform-origin:100% 50%;
  transition:opacity .22s var(--motion),transform .30s var(--motion),visibility 0s linear .30s;
  background:
    radial-gradient(88% 66% at 104% -4%,rgba(100,72,176,.17) 0%,rgba(58,39,112,.07) 36%,transparent 68%),
    radial-gradient(86% 70% at -8% 108%,rgba(8,103,119,.11) 0%,rgba(4,49,60,.045) 40%,transparent 70%),
    linear-gradient(158deg,rgba(12,15,23,.985) 0%,rgba(4,6,11,.988) 48%,rgba(7,5,13,.99) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:-30px 0 86px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(30px) saturate(135%);
  backdrop-filter:blur(30px) saturate(135%);
  will-change:transform,opacity;
}
.app .detail.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translateX(0) scale(1);
  transition-delay:0s;
}

.detail-toolbar{margin-bottom:16px;padding:1px 0 2px}
.detail h1{margin-top:10px;letter-spacing:-1px}
.detail-sub{color:rgba(255,255,255,.62)}

/* Shared glass language inside the workspace. */
.app .detail .price-disclosure,
.app .detail .prices,
.app .detail .variant-panel{
  background:linear-gradient(145deg,rgba(37,39,49,.68),rgba(15,16,23,.72));
  border:1px solid rgba(255,255,255,.105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 14px 34px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  backdrop-filter:blur(24px) saturate(140%);
}
.app .detail .price-disclosure{background:linear-gradient(145deg,rgba(32,35,46,.64),rgba(14,15,22,.70))}
.app .detail .prices{padding-inline:18px}
.app .detail .pl.hn{min-height:70px}
.app .detail .detail-copy{
  min-height:54px;
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 34px rgba(10,132,255,.21);
}
.app .detail .variant-panel{margin-top:24px;padding:22px 22px 26px}

@media (min-width:1200px){
  .app .detail{
    inset:20px 20px 20px auto;
    width:clamp(480px,36vw,560px);
    padding:24px 26px 30px;
    border-radius:30px;
  }
  .app .detail h1{font-size:clamp(34px,2.7vw,42px)}
}

@media (min-width:768px) and (max-width:1199px){
  .app .detail{
    inset:14px 14px 14px auto;
    width:min(540px,72vw);
    padding:22px 22px 28px;
    border-radius:28px;
  }
}

@media (max-width:767px){
  .app.detail-workspace-open .screen.active::after{display:none}
  .app .detail{
    inset:0;
    width:100%;height:100%;
    min-height:0;
    border:0;border-radius:0;
    box-shadow:none;
    transform:translateX(100%);
    padding:calc(var(--safe-top) + 8px) var(--side) calc(96px + env(safe-area-inset-bottom));
    background:
      radial-gradient(92% 62% at 108% -4%,rgba(91,65,164,.14) 0%,transparent 67%),
      radial-gradient(86% 64% at -10% 108%,rgba(7,92,108,.09) 0%,transparent 70%),
      linear-gradient(160deg,#080b12 0%,#020407 55%,#07050d 100%);
  }
  .app .detail.open{transform:translateX(0)}
}

@media (prefers-reduced-motion:reduce){
  .app .detail{transition:none!important}
}