/* Hallmark · macrostructure: Marquee Hero (chữ trái, khối 3D phải) · genre: modern-minimal · theme: nhận diện adzio.vn
 * PA1 · biến thể 1 "Hào quang kim loại" — chủ nhân chốt 14/10/2026 trong _demo-header-3d.html.
 * studied: yes · DNA-source: url https://www.yodaymedia.com/ (lõi logo 3D + vòng quanh + quầng sáng + tiêu đề lộ từng dòng)
 * Chữ A 3D: js/hero-a3d.js (three.js r170). Ảnh dự phòng cùng tư thế: img/hero-a3d.webp.
 * Nền, quầng sáng, bóng đổ vẽ bằng CSS (canvas trong suốt, chỉ vẽ khối 3D → nhẹ).
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */

.ha3d {
    --ha-bg: #F5F1EE;
    --ha-fade: #FFFFFF;                          /* nền trang bên dưới */
    --ha-ink: oklch(19% .012 20);
    --ha-ink-2: oklch(41% .012 20);
    --ha-muted: oklch(50% .01 25);
    --ha-rule: oklch(86% .012 25);
    --ha-red: oklch(53% 0.207 22.3);            /* #C8102E */
    --ha-red-strong: oklch(45.5% 0.18 22.3);    /* #9B0D22 */
    --ha-on-red: oklch(98.5% 0.006 25);
    --ha-focus: oklch(43% 0.17 23);
    --ha-light: oklch(100% 0 0 / .95);          /* quầng sáng trắng sau chữ A */
    --ha-light-2: oklch(100% 0 0 / .4);
    --ha-blush: oklch(53% 0.207 22.3 / .06);    /* ánh đỏ rất nhạt quanh chữ A */
    --ha-shadow: oklch(20% .04 20 / .3);        /* bóng đổ dưới chân */
    --ha-shadow-2: oklch(20% .04 20 / .1);
    --ha-ghost-bg: oklch(100% 0 0 / .55);
    --ha-ghost-line: oklch(19% .012 20 / .18);
    --ha-btn-shadow: oklch(45.5% .18 22.3 / .6);
    --ha-font-d: 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, sans-serif;
    --ha-font-b: 'Be Vietnam Pro', 'Plus Jakarta Sans', system-ui, sans-serif;
    --ha-ease: cubic-bezier(.22, 1, .36, 1);
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: flex;
    align-items: center;
    min-height: min(92svh, 820px);       /* dải số đã chuyển xuống dải đỏ ngay dưới (14/10/2026) */
    padding: 8rem 0 4.5rem;
    background: linear-gradient(180deg, var(--ha-bg) 0%, var(--ha-bg) 80%, var(--ha-fade) 100%);
}
.ha3d__grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 2.5rem; align-items: center; }
.ha3d__copy { position: relative; z-index: 2; min-width: 0; }

/* tiêu đề lộ từng dòng từ dưới mặt nạ; trạng thái gốc là hiện (máy tắt hiệu ứng vẫn thấy chữ) */
.ha3d__title { margin: 0; font: 800 clamp(2.4rem, 3.85vw, 3.5rem)/1.05 var(--ha-font-d); letter-spacing: -.038em; color: var(--ha-ink); text-wrap: balance; overflow-wrap: anywhere; }
.ha3d__line { display: block; overflow: hidden; padding: .12em 0 .24em; margin: -.12em 0 -.24em; }   /* đáy rộng: không cắt chân g, dấu nặng */
.ha3d__line > span { display: block; animation: ha3d-up 1s var(--ha-ease) .1s both; }
.ha3d__line + .ha3d__line > span { animation-delay: .22s; }
.ha3d__dot { color: var(--ha-red); }
.ha3d__fade { animation: ha3d-fade .9s var(--ha-ease) var(--d, .35s) both; }
@keyframes ha3d-up { from { transform: translateY(112%); } }
@keyframes ha3d-fade { from { opacity: 0; transform: translateY(18px); } }

.ha3d__lede { margin: 1.6rem 0 0; max-width: 33rem; font: 400 1.1rem/1.72 var(--ha-font-b); color: var(--ha-ink-2); text-wrap: pretty; }
.ha3d__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.ha3d__btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.2rem; padding: 0 1.7rem; border-radius: 999px; border: 1.5px solid transparent; font: 600 1rem/1 var(--ha-font-d); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .35s var(--ha-ease), box-shadow .35s var(--ha-ease); }
.ha3d__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ha-ease); }
.ha3d__btn:hover::before, .ha3d__btn:focus-visible::before { transform: scaleX(1); }
.ha3d__btn:hover { transform: translateY(-2px); }
.ha3d__btn:active { transform: translateY(0); transition-duration: .1s; }
.ha3d__btn:focus-visible { outline: 2px solid var(--ha-focus); outline-offset: 4px; }
.ha3d__btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ha-ease); }
.ha3d__btn:hover svg { transform: translateX(3px); }
.ha3d__btn--solid { background: var(--ha-red); color: var(--ha-on-red); box-shadow: 0 16px 34px -16px var(--ha-btn-shadow); }
.ha3d__btn--solid::before { background: var(--ha-red-strong); }
.ha3d__btn--ghost { background: var(--ha-ghost-bg); color: var(--ha-ink); border-color: var(--ha-ghost-line); }
.ha3d__btn--ghost::before { background: var(--ha-blush); }


/* khối 3D: canvas + ảnh dự phòng rộng 130% khung để vòng không bị cắt; quầng sáng và bóng đổ vẽ bằng CSS */
.ha3d__art { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; }
.ha3d__art::before { content: ""; position: absolute; z-index: -1; inset: -42%; background: radial-gradient(circle at 50% 46%, var(--ha-light) 0, var(--ha-light-2) 30%, transparent 52%), radial-gradient(circle at 50% 52%, var(--ha-blush) 0, transparent 30%); pointer-events: none; }
.ha3d__art::after { content: ""; position: absolute; z-index: -1; left: 16%; right: 16%; top: 77%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, var(--ha-shadow), var(--ha-shadow-2) 55%, transparent); pointer-events: none; }
/* --over khớp data-over (mặc định 1.3 = canvas rộng 130% khung) */
.ha3d__poster, .ha3d__gl { position: absolute; left: calc((1 - var(--over, 1.3)) * 50%); top: calc((1 - var(--over, 1.3)) * 50%); width: calc(var(--over, 1.3) * 100%); height: calc(var(--over, 1.3) * 100%); max-width: none; }
.ha3d__gl { opacity: 0; transition: opacity .7s var(--ha-ease); }
.is-live > .ha3d__gl { opacity: 1; }
.ha3d__poster { transition: opacity .7s var(--ha-ease); }
.is-live > .ha3d__poster { opacity: 0; }

@media (max-width: 991px) {
    .ha3d { min-height: 0; padding: 6.25rem 0 4rem; }
    .ha3d__grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .ha3d__art { order: -1; width: min(74vw, 360px); }
}
@media (max-width: 560px) {
    .ha3d { padding-top: 5.75rem; }
    .ha3d__art { width: min(70vw, 300px); }
    .ha3d__title { font-size: clamp(2rem, 8.4vw, 2.6rem); }
    .ha3d__lede { margin-top: 1.1rem; font-size: 1rem; line-height: 1.65; }
    .ha3d__actions { margin-top: 1.5rem; }
    .ha3d__actions .ha3d__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ha3d__line > span, .ha3d__fade { animation: none; }
    .ha3d__btn, .ha3d__btn::before, .ha3d__btn svg, .ha3d__gl, .ha3d__poster { transition: none; }
}

/* ════ Trang đích (marketing-doanh-nghiep.html): giữ form trong màn đầu vì trang đang chạy quảng cáo.
 *      Chữ A 3D thành con dấu ở góc trên-phải form, KHÔNG vòng (vòng đè chữ trong form). Tâm con dấu đặt bằng
 *      --seal-x (cách mép phải form, dương = thụt vào) và --seal-y (cách mép trên form, âm = nhô lên). ════ */
.ha3d-formwrap { position: relative; min-width: 0; --ha-seal: 118px; --seal-x: 4.6rem; --seal-y: -2.6rem; margin-top: 4.5rem; }
.ha3d-seal { --over: 1.15; position: absolute; z-index: 3; width: var(--ha-seal); aspect-ratio: 1; top: calc(var(--seal-y) - var(--ha-seal) / 2); right: calc(var(--seal-x) - var(--ha-seal) / 2); pointer-events: none; }
.ha3d-seal .ha3d__poster, .ha3d-seal .ha3d__gl { filter: drop-shadow(0 16px 18px oklch(45.5% .18 22.3 / .28)); }
.ha3d-formwrap .formcard h2 .nw { white-space: nowrap; }
@media (min-width: 60rem) {
    /* 960–1279px: ngồi trên mép trên form, thụt phải 14px; form lùi xuống để đỉnh chữ A không chạm thanh đầu trang */
    .ha3d-formwrap { --ha-seal: 120px; --seal-x: calc(var(--ha-seal) / 2 + 14px); --seal-y: -26px; margin-top: 3.25rem; }
}
@media (min-width: 80rem) {
    /* ≥1280px: chìa ra ngoài góc phải-trên form; còn ít chỗ bên phải thì tự lùi vào để mép chữ A không chạm mép màn hình */
    .ha3d-formwrap {
        --ha-seal: clamp(130px, 11vw, 160px);
        --seal-room: calc((100vw - min(100vw, var(--page-max))) / 2 + var(--page-gutter));
        --seal-x: max(-16px, calc(var(--ha-seal) / 2 + 22px - var(--seal-room)));   /* 22px: 100vw tính cả thanh cuộn ~15px */
        --seal-y: 50px; margin-top: 0;
    }
    /* tiêu đề form chừa đúng phần con dấu lấn vào */
    .ha3d-formwrap .formcard h2 { padding-right: max(0px, calc(var(--ha-seal) / 2 + var(--seal-x) - var(--space-xl) + 8px)); }
}