/* ============================================================
   ASENRA v3 — phần dùng chung mọi trang (10/2026)
   Biến màu, nhãn ⌜ ⌟, tiêu đề phần, nút bo tròn, menu, vòng chữ xoay,
   chân trang kiểu Faren, hiệu ứng chuyển động (assets/js/home.js).
   Nạp qua page_start() khi body có class home-v3.
   ============================================================ */
body.home-v3 {
    --h-bg: #F4EFE6;
    --h-bg-soft: #F8F6F1;
    --h-ink: #16170F;
    --h-text: #55574A;
    --h-muted: #8A8B7E;
    --h-line: rgba(22, 23, 15, .14);
    --h-gold: #A88B4F;
    --h-gold-soft: #C9B27E;
    --h-olive: #383B22;
    --h-night: #1E2016;
    /* Như mẫu: nội dung rộng tối đa 1620px, màn nhỏ hơn thì gần sát mép. */
    --h-pad: max(clamp(14px, 1.8vw, 32px), calc((100% - 1620px) / 2));
    --h-section: clamp(64px, 7vw, 112px);
}

/* Nhãn ⌜ … ⌟ */
.home-eyebrow {
    position: relative;
    display: inline-block;
    padding: 7px 16px;
    color: var(--h-gold);
    font: 600 12px/1 var(--s2-sans);
    letter-spacing: .22em;
    text-transform: uppercase;
}

.home-eyebrow::before,
.home-eyebrow::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 0 solid var(--h-gold);
}

.home-eyebrow::before {
    top: 0;
    left: 0;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
}

.home-eyebrow::after {
    right: 0;
    bottom: 0;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
}

.home-asterisk {
    width: 64px;
    height: 64px;
    fill: none;
    stroke: var(--h-ink);
    stroke-width: 7;
    stroke-linecap: round;
}

.home-asterisk--gold {
    stroke: var(--h-gold);
}

/* Tiêu đề phần: tiêu đề bên trái, câu dẫn bên phải — dùng thống nhất cho mọi phần. */
.home-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px clamp(32px, 5vw, 96px);
    align-items: end;
    margin-bottom: clamp(36px, 4vw, 60px);
}

.home-head > div {
    display: grid;
    justify-items: start;
    gap: 16px;
}

.home-head h2 {
    max-width: 820px;
    margin: 0;
    color: var(--h-ink);
    font-size: clamp(32px, 3.8vw, 54px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.home-head__lead {
    max-width: 460px;
    margin: 0;
    color: var(--h-text);
    font-size: 16px;
    line-height: 1.75;
}

.home-head > .home-pill {
    grid-column: 2;
    justify-self: start;
}

/* Tiêu đề xếp dọc trong cột hẹp (Dự án, Quy trình). */
.home-head--left {
    grid-template-columns: 1fr;
    justify-items: start;
}

/* Nút bo tròn */
.home-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid var(--h-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--h-ink);
    font: 500 15px/1 var(--s2-sans);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--mo-base), color var(--mo-base), border-color var(--mo-base);
}

.home-pill:hover,
.home-pill:focus-visible {
    background: var(--h-ink);
    color: #fff;
}

.home-pill--dark {
    border-color: var(--h-olive);
    background: var(--h-olive);
    color: #fff;
}

.home-pill--dark:hover,
.home-pill--dark:focus-visible {
    border-color: var(--h-ink);
}

.home-pill--light {
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
}

.home-pill--light:hover,
.home-pill--light:focus-visible {
    border-color: #fff;
    background: #fff;
    color: var(--h-ink);
}

body.home-v3.asenra-style--2 .hdr .hdr__cta {
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid var(--s2-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--s2-ink);
    box-shadow: none;
}

/* Menu điện thoại: style2.css bỏ viền dưới mọi link, trả lại viền đủ cho nút tư vấn. */
body.home-v3.asenra-style--2 .hdr__nav--mobile a.hdr__cta {
    justify-content: center;
    min-height: 50px;
    padding: 0 26px !important;
    border-bottom: 1px solid var(--s2-ink) !important;
}

body.home-v3.asenra-style--2 .hdr .hdr__cta:hover {
    background: var(--s2-ink);
    color: #fff;
}

body.home-v3.asenra-style--2 .hdr__inner {
    max-width: calc(1620px + 2 * clamp(14px, 1.8vw, 32px));
    padding-right: clamp(14px, 1.8vw, 32px);
    padding-left: clamp(14px, 1.8vw, 32px);
}

/* Vòng chữ xoay */
.home-badge {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 150px;
    height: 150px;
}

.home-badge svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: home-spin 22s linear infinite;
}

.home-badge text {
    fill: var(--h-ink);
    font: 600 12.5px var(--s2-sans);
    letter-spacing: .2em;
}

.home-badge img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.home-badge--light text {
    fill: #fff;
}

.home-badge--light img {
    padding: 10px;
    border-radius: 50%;
    background: #fff;
    box-sizing: content-box;
}

@keyframes home-spin {
    to { transform: rotate(360deg); }
}

/* ===== Dải tối toàn màn hình (ảnh nền + chữ giữa) ===== */
.home-band {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: clamp(460px, 52vw, 720px);
    padding: 80px var(--h-pad);
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.home-band > img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-band::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(14, 15, 9, .45), rgba(14, 15, 9, .72));
}

.home-band__inner {
    display: grid;
    justify-items: center;
    gap: 26px;
}

.home-band h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.015em;
}

/* ===== Dải chữ chạy ===== */
.home-marquee {
    overflow: hidden;
    padding: clamp(18px, 2vw, 28px) 0;
    border-top: 1px solid var(--h-line);
    border-bottom: 1px solid var(--h-line);
    background: var(--h-bg);
}

.home-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    width: max-content;
    animation: home-marquee 38s linear infinite;
}

.home-marquee span {
    color: var(--h-ink);
    font: 600 clamp(36px, 5.4vw, 84px)/1 var(--s2-sans);
    letter-spacing: -.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-marquee span:nth-of-type(even) {
    color: transparent;
    -webkit-text-stroke: 1.2px var(--h-ink);
}

.home-marquee .home-asterisk {
    flex: 0 0 auto;
    width: clamp(32px, 4vw, 60px);
    height: clamp(32px, 4vw, 60px);
    stroke: var(--h-gold);
}

@keyframes home-marquee {
    to { transform: translateX(-50%); }
}

/* ===== Chân trang ===== */
.home-footer {
    padding: clamp(72px, 8vw, 120px) var(--h-pad) 0;
    background: var(--h-night);
    color: rgba(255, 255, 255, .72);
}

.home-footer__cols {
    display: grid;
    grid-template-columns: 1.2fr .85fr .85fr 2fr;
    gap: clamp(28px, 3vw, 56px);
}

.home-footer__col {
    display: grid;
    align-content: start;
    gap: 16px;
}

.home-footer h3 {
    margin: 0 0 12px;
    color: #fff;
    font-family: var(--s2-sans);
    font-size: 22px;
    font-weight: 600;
}

.home-footer__contact {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-footer__contact li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;
}

.home-footer__contact li > span:first-child {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
}

.home-footer svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-footer address {
    font-style: normal;
    line-height: 1.6;
}

.home-footer a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color var(--mo-base);
}

.home-footer a:hover {
    color: var(--h-gold-soft);
}

.home-footer__col > a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}

.home-footer__col > a .ui-arrow {
    color: var(--h-gold-soft);
}

.home-footer__slogan {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: 28px;
    text-align: right;
}

.home-footer__slogan p {
    margin: 0;
    color: #fff;
    font: 700 clamp(32px, 3.4vw, 58px)/1.22 var(--s2-sans);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.home-footer__slogan em {
    padding-right: .1em;
    color: var(--h-gold-soft);
    font-style: normal;
}

/* Hàng thông tin công ty: logo | tên công ty, MST, trụ sở | mạng xã hội */
.home-footer__brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px clamp(32px, 4vw, 72px);
    margin-top: clamp(48px, 5vw, 80px);
    padding: clamp(32px, 3vw, 48px) 0 clamp(40px, 4vw, 56px);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.home-footer__legal {
    display: grid;
    gap: 16px;
    padding-left: clamp(32px, 4vw, 72px);
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.home-footer__legal strong {
    color: #fff;
    font: 600 clamp(15px, 1.2vw, 18px)/1.4 var(--s2-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.home-footer__legal dl {
    display: flex;
    flex-wrap: wrap;
    gap: 12px clamp(20px, 2.4vw, 40px);
    margin: 0;
}

.home-footer__legal dl div {
    display: grid;
    gap: 6px;
}

.home-footer__legal dt {
    color: var(--h-gold-soft);
    font: 600 11px/1 var(--s2-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.home-footer__legal dd {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.5;
}

.home-footer__hours {
    line-height: 1.6;
}

.home-footer__brand img {
    width: min(240px, 60vw);
    height: auto;
    filter: brightness(0) invert(1);
}

.home-footer__socials {
    display: flex;
    gap: 12px;
}

.home-footer__socials a {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: #fff;
}

.home-footer__socials a:hover {
    border-color: var(--h-gold-soft);
    background: var(--h-gold-soft);
    color: var(--h-ink);
}

.home-footer__socials b {
    font-size: 11px;
    font-weight: 700;
}

.home-footer__copy {
    margin: 0 calc(-1 * var(--h-pad));
    padding: 26px var(--h-pad);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    text-align: center;
}

.home-footer__strip {
    display: block;
    width: calc(100% + 2 * var(--h-pad));
    max-width: none;
    height: clamp(140px, 16vw, 240px);
    margin: 0 calc(-1 * var(--h-pad));
    object-fit: cover;
    object-position: center 65%;
}

@media (max-width: 860px) {
    .home-footer__cols {
        grid-template-columns: 1fr 1fr;
    }

    .home-footer__col:first-child,
    .home-footer__slogan {
        grid-column: 1 / -1;
    }

    .home-footer__slogan {
        order: -1;
        justify-items: stretch;
        gap: 24px;
        padding-bottom: 36px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        text-align: left;
    }

    .home-footer__slogan p {
        font-size: clamp(34px, 10vw, 52px);
        line-height: 1.15;
    }

    /* "SỐNG TINH TẾ." trên một dòng */
    .home-footer__slogan p br:first-of-type {
        display: none;
    }

    .home-footer__slogan .home-pill {
        width: 100%;
    }

    .home-footer__brand {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .home-footer__legal {
        padding-left: 0;
        border-left: 0;
    }

    .home-footer__legal dl {
        display: grid;
        gap: 14px;
    }
}

/* ============================================================
   Hiệu ứng chuyển động (assets/js/home.js gắn class .home-anim lên <html>).
   Không có JS hoặc bật "giảm chuyển động": mọi thứ hiển thị bình thường.
   ============================================================ */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

.home-anim {
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-curtain: cubic-bezier(.77, 0, .18, 1);
}

/* Khối chữ, thẻ: trượt lên + hiện dần, lần lượt theo --d */
.home-anim [data-anim="up"] {
    opacity: 0;
    transform: translate3d(0, 44px, 0);
    transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s);
}

.home-anim [data-anim="up"].is-in {
    opacity: 1;
    transform: none;
}

/* Ảnh: mở như tấm màn từ dưới lên, ảnh bên trong thu nhẹ lại */
.home-anim [data-anim="img"] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.3s var(--ease-curtain) var(--d, 0s);
}

.home-anim [data-anim="img"].is-in {
    clip-path: inset(0 0 0 0);
}

.home-anim img[data-anim="img"],
.home-anim [data-anim="img"] img {
    transform: scale(1.18);
    transition: clip-path 1.3s var(--ease-curtain) var(--d, 0s), transform 1.8s var(--ease-out) var(--d, 0s);
}

.home-anim img[data-anim="img"].is-in,
.home-anim [data-anim="img"].is-in img {
    transform: none;
}

/* Phóng to từ nhỏ */
.home-anim [data-anim="zoom"] {
    opacity: 0;
    transform: scale(.82) rotate(-6deg);
    transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.4s var(--ease-out) var(--d, 0s);
}

.home-anim [data-anim="zoom"].is-in {
    opacity: 1;
    transform: none;
}

/* Tiêu đề: từng chữ trồi lên khỏi mặt nạ (chừa chỗ cho dấu tiếng Việt) */
.home-anim .hw {
    display: inline-block;
    overflow: hidden;
    padding: .22em .02em .14em;
    margin: -.22em -.02em -.14em;
    vertical-align: top;
}

.home-anim .hw__i {
    display: inline-block;
    transform: translate3d(0, 115%, 0);
    transition: transform 1s var(--ease-out) calc(var(--i, 0) * 55ms + var(--d, 0s));
}

.home-anim [data-anim="words"].is-in .hw__i {
    transform: none;
}

/* Hero khi tải trang */
.home-anim .home-hero__brand {
    overflow: hidden;
    padding-bottom: .04em;
}

.home-anim .hc {
    display: inline-block;
    transform: translate3d(0, 105%, 0);
    transition: transform 1.2s var(--ease-out) calc(.15s + var(--i) * 70ms);
}

.home-anim .home-hero__lead,
.home-anim .home-hero__tagline {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 1s var(--ease-out) .55s, transform 1s var(--ease-out) .55s;
}

.home-anim .home-hero__visual {
    opacity: 0;
    transform: translate3d(0, 18%, 0);
    transition: opacity 1.2s var(--ease-out) .35s, transform 1.6s var(--ease-out) .35s;
}

.home-anim .home-hero.is-loaded .hc,
.home-anim .home-hero.is-loaded .home-hero__lead,
.home-anim .home-hero.is-loaded .home-hero__tagline,
.home-anim .home-hero.is-loaded .home-hero__visual {
    opacity: 1;
    transform: none;
}

.home-anim .home-hero__intro > *,
.home-anim .home-hero__proof > * {
    transition-delay: calc(.7s + var(--d, 0s));
}

/* Parallax: ảnh cao hơn khung để có chỗ trượt */
.home-anim .home-band > img[data-parallax] {
    top: -12%;
    height: 124%;
    will-change: transform;
}

.home-anim .home-hero__visual img,
.home-anim .home-asterisk {
    will-change: transform;
}

/* Nút: viền chạy nền khi rê chuột */
.home-pill {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.home-pill::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--h-ink);
    transform: translateY(101%);
    transition: transform .45s var(--ease-out, ease);
}

.home-pill:hover,
.home-pill:focus-visible {
    background: transparent;
}

.home-pill:hover::before,
.home-pill:focus-visible::before {
    transform: none;
}

.home-pill--dark::before {
    background: var(--h-ink);
}

.home-pill--light::before {
    background: #fff;
}

.home-pill .ui-arrow {
    transition: transform .35s ease;
}

.home-pill:hover .ui-arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .home-badge svg,
    .home-marquee__track {
        animation: none;
    }
}