/* Hero Slideshow (px/hero-slideshow): what Tailwind can't say. Loaded by block.json "style" where the block is.
   Figma 1. Home, section 1: gradient #08140d 22% flat + 0 → 78% from 35% down, plus 55% → 0 from the top over 2.5 × the header; title 112/1.15 -2%;
   body 26/1.5; the title block (S2) bottom right. Owner 2026-11-03: text smaller (title = panel 64, body = body 16), no pause button. */

/* The WebGL canvas (view.js) over the first photo: the same frame as the <img> when it appears. */
.px-block--hero-slideshow .hero-slideshow__canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity var(--duration-slow) var(--ease-motion);
}
.px-block--hero-slideshow .hero-slideshow__canvas.is-ready { opacity:1; }

.px-block--hero-slideshow .hero-slideshow__shade {
    background:
        /* top: darkens behind the header so the cream menu reads on light photos (owner, 2026-11-03) */
        linear-gradient(180deg, rgb(8 20 13 / .55) 0, rgb(8 20 13 / 0) calc(var(--px-header-height, 85px) * 2.5)),
        linear-gradient(180deg, rgb(8 20 13 / 0) 35%, rgb(8 20 13 / .78) 100%),
        rgb(8 20 13 / .22);
}

/* Content: the heading at the panel size, the text as body, buttons side by side
   (L from px-buttons-lg on the text, S at tablet-v and below by button.css). */
.px-block--hero-slideshow .hero-slideshow__text h1 {
    font-family:var(--font-display);
    font-size:var(--px-panel);
    font-weight:400;
    line-height:var(--px-panel-lh);
    letter-spacing:-0.02em;
    text-wrap:wrap; /* the design's breaks (2 lines at 1920), not balanced ones */
    max-width:min(1254px, 14.5em); /* 9 columns at most (headlines on photos); 14.5em breaks it after "đậm" at every desktop width, clear of the title block */
}
@media (width <= 480px) {
    .px-block--hero-slideshow .hero-slideshow__text h1 { text-wrap:balance; } /* 3 even lines on phones, never "riêng." alone */
}
.px-block--hero-slideshow .hero-slideshow__text p:not(.nectar-font-label, :has(> a[class*="px-button"])) {
    font-size:var(--px-body);
    line-height:var(--px-body-lh);
}
.px-block--hero-slideshow .hero-slideshow__text p:has(> a[class*="px-button"]) {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

/* Title block: over the bottom right of the content above 1280 (as drawn),
   under it from touch down (they'd run into the text), at the start of the row. */
.px-block--hero-slideshow .hero-slideshow__aside {
    position:absolute;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:24px;
}
.px-block--hero-slideshow .hero-slideshow__text > :not(h1, .nectar-font-label) { max-width:min(828px, 50%); }

@media (width <= 1280px) {
    .px-block--hero-slideshow .hero-slideshow__aside {
        position:static;
        flex-direction:row-reverse;
        align-items:flex-end;
        justify-content:flex-end; /* row-reverse: the sheet at the start: the right edge is the floating Zalo button's */
        margin-top:40px;
    }
    .px-block--hero-slideshow .hero-slideshow__text > :not(h1, .nectar-font-label) { max-width:828px; }
}
@media (width <= 768px) {
    .px-block--hero-slideshow .hero-slideshow__aside { margin-top:24px; }
    .px-block--hero-slideshow .hero-slideshow__sheet { display:none; } /* no title block on phones (S2 note) */
}

/* The sheet hugs its facts (Figma: cells 260 / 220 / 130), values on one line. */
.px-block--hero-slideshow .hero-slideshow__sheet .title-block__cell {
    flex:none;
    min-width:130px;
    padding-right:40px;
}
.px-block--hero-slideshow .hero-slideshow__sheet .title-block__value { white-space:nowrap; }

/* Entrance (owner 2026-11-03), all CSS (no script to wait for, so nothing is ever stuck hidden).
   - The text's lines (eyebrow, heading, text, buttons) rise 40px and fade in on the spring, 0.1s apart.
   - The title block (aside) draws itself like a drawing sheet: its frame is drawn clockwise from the top-left
     corner, the green fill and blur come in behind it, then the head's line and the lines between the cells
     draw, and the words fade in. The lines are background gradients over transparent borders (same geometry),
     sized by --sheet-draw (0 → 4: top, right, bottom, left) and --line (0 → 1).
   Under the Home loader (html.has-loader, set by its inline script) it all starts as the loader opens (its exit
   starts at 2.4s, ~all open 0.35s in), so it arrives with the first sweep. None in the editor or with reduced motion. */
@property --sheet-draw {
    syntax:"<number>";
    inherits:false;
    initial-value:4;
}
@property --line {
    syntax:"<number>";
    inherits:false;
    initial-value:1;
}
@keyframes hero-slideshow-in {
    from { opacity:0; translate:0 var(--rise, 40px); }
}
@keyframes hero-slideshow-frame {
    from { --sheet-draw:0; }
}
@keyframes hero-slideshow-fill {
    from { background-color:transparent; -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); }
}
@keyframes hero-slideshow-ink {
    from { color:transparent; }
}
@keyframes hero-slideshow-line {
    from { --line:0; }
}
@media (prefers-reduced-motion: no-preference) {
    .px-block--hero-slideshow { --hero-in-delay:0.15s; }
    html.has-loader .px-block--hero-slideshow { --hero-in-delay:2.5s; }

    /* The text */
    .px-block--hero-slideshow .hero-slideshow__text > * {
        animation:hero-slideshow-in 1.2s var(--ease-spring) both;
        animation-delay:calc(var(--hero-in-delay) + var(--i, 0) * 0.1s);
    }
    .px-block--hero-slideshow .hero-slideshow__text > :nth-child(2) { --i:1; }
    .px-block--hero-slideshow .hero-slideshow__text > :nth-child(3) { --i:2; }
    .px-block--hero-slideshow .hero-slideshow__text > :nth-child(4) { --i:3; }
    .px-block--hero-slideshow .hero-slideshow__text > :nth-child(n + 5) { --i:4; }

    /* The sheet: frame (0.2s in, 1.6s), fill (0.6s in) */
    .px-block--hero-slideshow .hero-slideshow__sheet {
        --sheet-line:linear-gradient(var(--tb-line), var(--tb-line));
        border-color:transparent;
        background-image:var(--sheet-line), var(--sheet-line), var(--sheet-line), var(--sheet-line);
        background-origin:border-box;
        background-repeat:no-repeat;
        background-position:left top, right top, right bottom, left bottom;
        background-size:
            calc(clamp(0, var(--sheet-draw), 1) * 100%) 1px,
            1px calc(clamp(0, var(--sheet-draw) - 1, 1) * 100%),
            calc(clamp(0, var(--sheet-draw) - 2, 1) * 100%) 1px,
            1px calc(clamp(0, var(--sheet-draw) - 3, 1) * 100%);
        animation:
            hero-slideshow-frame 1.6s var(--ease-spring) calc(var(--hero-in-delay) + 0.2s) both,
            hero-slideshow-fill 1.2s var(--ease-spring) calc(var(--hero-in-delay) + 0.6s) both;
    }
    /* Inner lines: the head's (left → right), then each divider between cells (top → bottom), 0.1s apart */
    .px-block--hero-slideshow .hero-slideshow__sheet :is(.title-block__head, .title-block__cell) {
        border-color:transparent;
        background-image:linear-gradient(var(--tb-line), var(--tb-line));
        background-origin:border-box;
        background-repeat:no-repeat;
        animation:hero-slideshow-line 0.9s var(--ease-spring) calc(var(--hero-in-delay) + 0.8s + var(--j, 0) * 0.1s) both;
    }
    /* The words after their lines: the head's text fades in (its line stays), labels and values rise 12px. */
    .px-block--hero-slideshow .hero-slideshow__sheet .title-block__head {
        background-position:left bottom;
        background-size:calc(var(--line) * 100%) 1px;
        animation:
            hero-slideshow-line 0.9s var(--ease-spring) calc(var(--hero-in-delay) + 0.8s) both,
            hero-slideshow-ink 1.2s var(--ease-spring) calc(var(--hero-in-delay) + 1s) both;
    }
    .px-block--hero-slideshow .hero-slideshow__sheet :is(.title-block__label, .title-block__value) {
        --rise:12px;
        animation:hero-slideshow-in 1.2s var(--ease-spring) calc(var(--hero-in-delay) + 1s + var(--j, 1) * 0.1s) both; /* --j from its cell */
    }
    .px-block--hero-slideshow .hero-slideshow__sheet .title-block__cell {
        --j:1;
        background-position:right top;
        background-size:1px calc(var(--line) * 100%);
    }
    .px-block--hero-slideshow .hero-slideshow__sheet .title-block__cell:last-child { background-image:none; }
    .px-block--hero-slideshow .hero-slideshow__sheet .title-block__cell:nth-child(2) { --j:2; }
    .px-block--hero-slideshow .hero-slideshow__sheet .title-block__cell:nth-child(3) { --j:3; }
    .px-block--hero-slideshow .hero-slideshow__sheet .title-block__cell:nth-child(n + 4) { --j:4; }

    .editor-styles-wrapper .px-block--hero-slideshow,
    .editor-styles-wrapper .px-block--hero-slideshow * { animation:none; }
}

@media (prefers-reduced-motion: reduce) {
    .px-block--hero-slideshow .hero-slideshow__canvas { transition:none; }
}