/* =========================================================
   ĐẢO SỐ — VISUAL ASSET SYSTEM v2
   Original SVG illustrations + shared editorial-tech framing.
   All demo/product visuals are illustrative, never client proof.
   ========================================================= */

.visual-asset-hero,
.visual-asset-inline{
  --visual-radius:clamp(18px,2.1vw,30px);
  --visual-line:rgba(126,151,196,.18);
  --visual-halo-a:rgba(0,245,255,.13);
  --visual-halo-b:rgba(139,92,246,.12);
  margin:0;
  position:relative;
  z-index:3;
  isolation:isolate;
}

.visual-asset-hero::before,
.visual-asset-inline::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:7% 5% -4%;
  border-radius:40px;
  background:
    radial-gradient(circle at 18% 20%,var(--visual-halo-a),transparent 38%),
    radial-gradient(circle at 82% 76%,var(--visual-halo-b),transparent 42%);
  filter:blur(32px);
  opacity:.72;
  pointer-events:none;
}

.visual-asset-hero::after,
.visual-asset-inline::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  border-radius:var(--visual-radius);
  border:1px solid var(--visual-line);
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    0 28px 84px rgba(0,0,0,.16);
  pointer-events:none;
}

.visual-asset-hero img,
.visual-asset-inline img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--visual-radius);
  background:#08101d;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.2));
}

.visual-asset-hero{
  position:absolute;
  left:50%;
  top:50%;
  width:min(920px,86%);
  transform:translate(-50%,-50%);
  transform-origin:center;
}

.visual-asset-hero[data-tilt]{
  transform:translate(-50%,-50%) perspective(1200px)
    rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
}

/* Primary hero art directions */
.visual-asset-solutions{width:min(900px,92%)}
.visual-asset-pricing{width:min(900px,88%)}
.visual-asset-projects{width:min(920px,90%)}
.visual-asset-about{width:min(900px,88%)}
.visual-asset-audit{width:min(900px,90%)}

.restaurant-solution-page .visual-asset-restaurant{width:min(900px,82%)}
.maps-solution-page .visual-asset-maps{width:min(920px,84%)}
.qr-solution-page .visual-asset-qr{width:min(900px,86%)}
.homestay-solution-page .visual-asset-stay{width:min(900px,86%)}
.tourism-solution-page .visual-asset-tour{width:min(920px,86%)}

/* Keep metadata cards above the main art, not buried behind it. */
:where(
  .pricing-float-card,.projects-float-card,.about-float-card,.audit-float-card,
  .rest-float-card,.stay-float-card,.tour-float-card,.maps-float-card,.qr-float-card
){
  z-index:6;
}

/* Inline illustrations */
.visual-asset-inline{
  overflow:visible;
  border-radius:var(--visual-radius);
  background:#08101d;
}

.visual-asset-inline figcaption{
  position:relative;
  margin-top:-1px;
  padding:.72rem .95rem .8rem;
  color:#a6b4cd;
  font-size:.68rem;
  line-height:1.5;
  border:1px solid rgba(103,124,165,.16);
  border-top:0;
  border-radius:0 0 18px 18px;
  background:#0a111f;
}

.visual-asset-story{
  width:min(760px,100%);
  justify-self:center;
  --visual-halo-a:rgba(0,245,255,.1);
  --visual-halo-b:rgba(255,60,172,.09);
}
.visual-asset-story img{
  border-radius:24px 24px 0 0;
}
.visual-asset-story::after{
  border-radius:24px;
}

.metrics-visual-asset{
  width:min(760px,100%);
  justify-self:center;
}

.audit-output-asset{
  grid-column:1/-1;
  margin-top:clamp(2rem,4vw,3rem);
}

.audit-output-asset img{
  max-height:560px;
  object-fit:contain;
}

/* Give all visual stages a small architectural anchor. */
:where(
  .visual-asset-hero,.visual-asset-inline
) > img{
  outline:1px solid rgba(255,255,255,.025);
  outline-offset:-1px;
}

/* Hero containers with v2 SVG art no longer need the old CSS core object. */
:where(
  .solution-system,.pricing-hero-visual,.projects-hero-visual,
  .about-hero-visual,.audit-hero-visual
){
  overflow:visible;
}

@media(max-width:1100px){
  .visual-asset-hero{width:min(820px,90%)}
  .visual-asset-solutions,
  .visual-asset-pricing,
  .visual-asset-projects,
  .visual-asset-about,
  .visual-asset-audit{width:min(820px,92%)}
}

@media(max-width:820px){
  .visual-asset-hero{
    width:min(760px,94%);
  }
  .restaurant-solution-page .visual-asset-restaurant,
  .maps-solution-page .visual-asset-maps,
  .qr-solution-page .visual-asset-qr,
  .homestay-solution-page .visual-asset-stay,
  .tourism-solution-page .visual-asset-tour,
  .visual-asset-solutions,
  .visual-asset-pricing,
  .visual-asset-projects,
  .visual-asset-about,
  .visual-asset-audit{
    width:min(760px,94%);
  }
  .visual-asset-hero::before{filter:blur(22px)}
}

@media(max-width:560px){
  .visual-asset-hero{width:98%}
  .visual-asset-hero img{border-radius:16px}
  .visual-asset-hero::after{border-radius:17px}
  .visual-asset-hero::before{inset:8% 2% -2%;opacity:.48}
  .metrics-visual-asset,
  .audit-output-asset{border-radius:17px}
  .visual-asset-inline figcaption{font-size:.62rem}
  .visual-asset-story figcaption{padding:.62rem .75rem .7rem}
}

@media(prefers-reduced-motion:reduce){
  .visual-asset-hero[data-tilt]{
    transform:translate(-50%,-50%)!important;
  }
}