:root{color-scheme:light;--paper:#fff9f0;--ink:#513f35;--coral:#ee775d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans,Arial,sans-serif)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{padding:22px 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #dec9b94d}.brand{font-size:24px;letter-spacing:3px;font-weight:800}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:5px}nav{display:flex;gap:25px;font-size:14px}.welcome{display:grid;grid-template-columns:1.3fr 1fr;min-height:calc(100svh - 145px)}.welcome-art{overflow:hidden;display:flex;align-items:center;background:#f7c3a8}.welcome-art img{width:100%;height:auto;display:block}.welcome-copy{align-self:center;padding:6vw 5vw}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700}h1{font-size:clamp(32px,4.5vw,65px);line-height:1.2;font-weight:500;letter-spacing:-2px;margin:25px 0}p{line-height:1.6;color:#78665c}.choice{border:1px solid #dbc7b4;border-radius:14px;padding:22px;margin:16px 0;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:18px}.choice small{display:block;font-size:12px;margin-top:8px;font-weight:400;opacity:.85}.primary{background:var(--coral);color:white;border-color:var(--coral)}.choice:hover{box-shadow:0 5px 20px #7e4b231a;transform:translateY(-1px)}a:focus-visible,button:focus-visible{outline:3px solid #9e4c31;outline-offset:4px}.customer-hero img{width:100%;height:auto;max-height:72vh;object-fit:cover;display:block}.content{padding:40px 7vw}.content>img{width:100%;max-width:950px;border-radius:20px}.links{display:flex;gap:25px;margin:25px 0}.login{max-width:650px;min-height:75svh;margin:auto}.login>a:last-child{display:block;margin:30px 0}#logout{background:transparent;border:1px solid #dbc7b4;padding:12px 20px;border-radius:10px}footer{padding:20px;text-align:center;font-size:11px;color:#967f6f}[hidden]{display:none!important}@media(max-width:700px){header{padding:16px 20px;flex-wrap:wrap}nav{gap:18px;font-size:13px}.welcome{display:flex;flex-direction:column;min-height:auto}.welcome-art{max-height:38svh}.welcome-art picture{width:100%}.welcome-art img{max-height:38svh;object-fit:cover;object-position:center 28%}.welcome-copy{width:100%;padding:24px}.welcome-copy h1{font-size:36px;margin:15px 0}.choice{padding:18px;margin:12px 0;font-size:16px}.welcome-copy>p{margin:10px 0}.customer-hero img{min-height:230px;object-fit:cover}.content{padding:32px 24px}footer{font-size:10px}}


/* One full-screen image. Mobile crops the center of the same artwork. */
body.is-welcome{background:#a94328;color:#fff4db}
.is-welcome>footer{display:none}
.welcome{position:relative;display:block;width:100%;height:100svh;min-height:420px;overflow:hidden;background:#a94328;isolation:isolate}
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
/* No shade over the welcome photo (owner 2026-10-04): its colours show unmodified; the copy on it keeps a text shadow. */
.welcome-actions>p,.welcome-actions>small{text-shadow:0 1px 2px #2b1109,0 1px 10px #2b1109cc}
.welcome-actions{position:absolute;bottom:0;left:0;right:0;padding:30px 5vw max(18px,env(safe-area-inset-bottom));text-align:center;z-index:3}
.welcome-actions>p{font-size:9px;letter-spacing:3px;color:#fff1d6;margin:0 0 15px}
.role-choices{display:flex;gap:16px;justify-content:center}
.welcome .choice{margin:0;width:285px;min-height:54px;padding:15px 22px;border:1px solid #f8dbab99;border-radius:0;font-size:15px;background:#78351ee6;color:#fff4db;transition:background .2s,transform .2s}
.welcome .choice.primary{background:#fff1d5;color:#85351f;border-color:#fff1d5}
.welcome .choice:hover{background:#78311f;transform:translateY(-3px);box-shadow:none;color:#fff4db}
.welcome .choice:focus-visible{outline:3px solid white;outline-offset:4px}
.welcome .choice b{font-size:24px;font-weight:400}.welcome-actions>small{display:block;font-size:8px;letter-spacing:1px;margin-top:12px;opacity:.7}
@media(max-width:700px){
.welcome-actions{padding:24px 22px max(16px,env(safe-area-inset-bottom))}.welcome-actions>p{font-size:8px;letter-spacing:2px}
.role-choices{flex-direction:column;gap:10px;align-items:center}.welcome .choice{width:100%;max-width:430px;min-height:48px;padding:12px 18px;font-size:14px}
}
@media(max-height:600px){.welcome-actions{padding-top:14px}.welcome-actions>p{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.welcome .choice{transition:none}.welcome .choice:hover{transform:none}}

/* Shared component contract: primary actions, secondary actions and focus. */
:root{--action-radius:12px;--action-height:48px;--action-font:14px;--action-accent:#a84d39;--action-paper:#fff1d5}
.primary,.button,a.choice,#logout,header nav button,dialog button,.text-button,.back,.exit,.links a,.success-actions>a:last-child{min-height:var(--action-height);border-radius:var(--action-radius);font-family:var(--font-sans,Arial,sans-serif);font-size:var(--action-font);font-weight:600;line-height:1.3;transition:background .18s,color .18s,box-shadow .18s,opacity .18s}
.primary,.button,a.choice{padding:13px 24px;gap:24px}
.primary:hover,.button:hover,a.choice:hover{transform:none;box-shadow:0 5px 18px #48251b26}
.back,.exit,.links a,.success-actions>a:last-child,header nav button,dialog button{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid currentColor;background:transparent;color:inherit;text-decoration:none}
button:disabled,[aria-disabled=true]{cursor:not-allowed;box-shadow:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.upload:focus-within{outline:3px solid #e7a333;outline-offset:4px}
header nav a{min-height:44px;display:inline-flex;align-items:center}
#file-list button{min-width:44px;min-height:44px;border-radius:8px}
@media(max-width:760px){.back,.exit,header nav button{padding:8px 10px}.primary,.button{font-size:14px}.links{flex-wrap:wrap;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Keep the three brand lines readable independently of the image crop. */
.welcome{--scene-height:max(100svh,56.25vw)}
.welcome-title{position:absolute;z-index:2;top:calc(50% - var(--scene-height)*.12);left:0;right:0;height:calc(var(--scene-height)*.325);display:flex;flex-direction:column;justify-content:center;align-items:center;background:#a3432b;color:#fff1d5;padding:12px 20px;text-align:center}
.welcome-title h1{font-family:var(--font-serif,Georgia,'Times New Roman',serif);font-weight:400;font-size:clamp(52px,8.5vw,132px);line-height:1;letter-spacing:.14em;margin:0 0 4px;padding-left:.14em}
.welcome-title p{color:inherit;margin:0}
.welcome-tagline{font-family:var(--font-serif,Georgia,'Times New Roman',serif);font-size:clamp(28px,3.5vw,52px);font-weight:600;line-height:1.2}
.welcome-title .welcome-subtitle{font-size:clamp(9px,1.1vw,16px);letter-spacing:.25em;line-height:1.5;margin-top:10px}
.welcome-actions{bottom:max(5svh,env(safe-area-inset-bottom));padding:12px 5vw}
.welcome .choice{border-radius:var(--action-radius);min-height:var(--action-height);font-size:var(--action-font);font-weight:600;padding:13px 22px}
.welcome .choice:hover{transform:none}
.links{justify-content:center}
@media(max-width:700px){.welcome-title{padding:12px 14px}.welcome-title h1{font-size:clamp(40px,12vw,78px);letter-spacing:.09em}.welcome-tagline{font-size:clamp(28px,7vw,40px)}.welcome-title .welcome-subtitle{font-size:clamp(8px,2.35vw,13px);letter-spacing:.12em}.welcome-actions{bottom:max(5svh,env(safe-area-inset-bottom));padding:8px 22px}.welcome-actions>p{margin-bottom:10px}.welcome-actions>small{margin-top:8px}.role-choices{gap:10px}}
@media(max-height:600px) and (min-width:701px){.welcome-title h1{font-size:10svh}.welcome-tagline{font-size:5svh}.welcome-title .welcome-subtitle{margin-top:4px}.welcome-actions{bottom:3svh}.welcome-actions>p,.welcome-actions>small{display:none}}
/* Match the diagonal brand panel while preserving the people at either side. */
.welcome-title{background:none;isolation:isolate}
.welcome-title:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:calc(var(--scene-height)*.99);transform:translateX(-50%) skewX(-16deg);background:#a3432b}
.welcome .choice b{font-size:20px;line-height:1}
@media(max-width:700px) and (max-height:650px){.welcome-actions>p,.welcome-actions>small{display:none}}

/* Dealer registration after Zalo login. */
.register-form{display:grid;gap:16px;margin:10px 0 18px}
.register-form label{display:grid;gap:6px;font-size:13px;font-weight:700;letter-spacing:.5px}
.register-form input,.register-form select{font:inherit;font-size:16px;font-weight:400;min-height:48px;padding:12px 14px;border:1px solid #dbc7b4;border-radius:10px;background:#fffdf8;color:var(--ink)}
.register-form select{width:100%;max-width:100%;cursor:pointer}
.register-form select:disabled{opacity:.7;cursor:not-allowed}
.register-form select:focus-visible{outline:3px solid #e7a333;outline-offset:4px}
.register-form input[aria-invalid=true]{border-color:#b3261e}
.register-form button{width:100%;border:0;margin:6px 0 0}
.form-error{min-height:1.2em;margin:0;color:#b3261e;font-size:14px}
.secondary{background:transparent;border:1px solid #dbc7b4;padding:12px 20px;border-radius:10px;min-height:44px}

/* Content blocks of the customer pages (rendered by site-content.js; shared rules in /site-content.css). */
.content .cms-heading h2,.content .cms-heading h3{font-weight:500;line-height:1.2;margin:20px 0 10px}
.content .cms-cta.primary{display:inline-flex;align-items:center;justify-content:space-between;border:1px solid var(--coral);color:#fff}
.content .cms-cta.cms-secondary{border-color:#dbc7b4}
/* LALALAY vector wordmark (lalalay-wordmark.svg) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand-mark{display:block;height:23px;width:auto}
.welcome-title h1{padding-left:0;letter-spacing:0;margin-bottom:12px}
.welcome-title .welcome-mark{height:clamp(40px,6.6vw,100px);margin:0 auto}
@media(max-width:700px){.welcome-title h1{margin-bottom:8px}.welcome-title .welcome-mark{height:clamp(40px,13vw,64px)}}
@media(max-height:600px) and (min-width:701px){.welcome-title .welcome-mark{height:7.4svh}}
@media(forced-colors:active){.brand-mark path{fill:CanvasText}}

/* Shared header (public_shell.py) on the onboarding home: light pages; overlay on the welcome scene. */
.site-header{flex-wrap:nowrap;background:var(--paper);color:var(--ink);border-bottom-color:#dec9b980}
.is-welcome .site-header{position:absolute;top:0;left:0;right:0;background:transparent;color:#fff4db;border-bottom-color:transparent}
.is-welcome .site-header .site-menu a:not(.nav-booking){text-shadow:0 1px 8px #2b1109}
@media(max-width:1180px){.is-welcome .site-header .site-menu a{text-shadow:none}}
.site-footer{justify-content:center;color:#967f6f;opacity:1}
/* Canonical public pages and the Booking access explanation. */
#public .content{max-width:1100px;margin:0 auto}
#booking .access-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}
#booking .access-actions .choice{margin:0}
/* v7 dealer pages (#inventory, #documents, #progress): module mount + CMS intro; locked/explanations as before. */
.dealer-page{max-width:1100px;margin:0 auto}
.dealer-page h1{margin:12px 0 18px}
.dealer-page-status{padding:18px 20px;border:1px dashed #dbc7b4;border-radius:12px;background:#fffdf8}
.dealer-page-status[hidden]{display:none}
/* Locked dealer destinations (task da86b6fb470e40ff): #locked (Bảng hàng / Tài liệu / Tiến độ) and #booking (Đăng ký)
   fill the viewport with the Home project image under the unchanged overlay navbar; the explanation sits in a
   terracotta text block whose BACKGROUND is at alpha .5 (same as the deck chrome). No page scroll, no footer;
   a very short viewport scrolls inside the view. Explanation only: no dealer data is ever in these sections. */
body[data-view=locked],body[data-view=booking]{overflow:hidden;height:100dvh}
body[data-view=locked] .site-footer,body[data-view=booking] .site-footer{display:none}
.locked-view{position:fixed;inset:0;z-index:1;display:flex;align-items:center;max-width:none;min-height:0;margin:0;padding:calc(var(--shell-top,84px) + 2vh) 6% max(4vh,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;isolation:isolate;color:#fff9ef;background:#5b2a1b url(/hero.v1.webp) center/cover no-repeat}
/* Landscape photo (hero) on a landscape viewport, portrait photo (tower) on a portrait one, whatever the width. */
@media(orientation:portrait){.locked-view{background-image:url(/tower.v1.webp);background-position:center 30%}}
.locked-panel{position:relative;box-sizing:border-box;width:min(560px,100%);margin:auto 0;padding:clamp(22px,3vw,38px);border:1px solid #ffffff3d;border-radius:14px;background:rgb(184 64 41 / .5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 24px 60px #2b10082e;text-shadow:0 1px 10px #3b150a59}
.locked-icon{display:block;width:34px;height:34px;margin:0 0 14px;color:#fff1d5}
.locked-view .eyebrow{margin:0;color:#ffe6c9;font-size:11px;letter-spacing:.19em}
.locked-view h1{margin:10px 0 14px;color:inherit;font-size:clamp(28px,3.1vw,44px);line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.locked-view p[role=status]{margin:0;color:#fff4e6;font-size:15px;line-height:1.55}
.locked-view .access-actions,#booking.locked-view .access-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.locked-view .choice{margin:0;padding:12px 20px;border:1px solid #ffffffa8;background:#ffffff14;color:#fff9ef;text-shadow:none}
.locked-view .choice.primary{background:#fff1d5;border-color:#fff1d5;color:#85351f}
.locked-view .choice:hover{background:#ffffff2e;box-shadow:0 5px 18px #2b100833}
.locked-view .choice.primary:hover{background:#fff}
.locked-view .choice span small{display:block;margin-top:3px;font-size:11px;font-weight:400;opacity:.8}
.locked-view .choice b{font-weight:400}
@media(max-width:760px){
 .locked-view{align-items:flex-end;padding:calc(var(--shell-top,72px) + 10px) 14px max(14px,env(safe-area-inset-bottom))}
 .locked-panel{width:100%;margin:auto 0 0;padding:20px 18px}
 .locked-icon{width:28px;height:28px;margin-bottom:10px}
 .locked-view h1{font-size:clamp(24px,7vw,30px);margin:8px 0 10px}
 .locked-view p[role=status]{font-size:14px;line-height:1.5}
 .locked-view .access-actions,#booking.locked-view .access-actions{margin-top:16px;gap:8px}
}
@media(max-height:560px){.locked-view{padding-top:calc(var(--shell-top,66px) + 6px);padding-bottom:10px}.locked-panel{padding:16px 20px}.locked-icon{display:none}.locked-view h1{font-size:24px;margin:6px 0 8px}.locked-view .access-actions,#booking.locked-view .access-actions{margin-top:12px;gap:6px}}
@media(forced-colors:active){.locked-panel{border-color:CanvasText}}
.locked-view .access-actions:not(:has(>a:not([hidden]))){display:none}