/* Ngọc An V16.1 — sửa ba lỗi giao diện phát hiện từ ảnh người dùng.
   Chỉ thay CSS/bố cục, không can thiệp Supabase hoặc logic biểu mẫu. */
:root{--na-v161-ink:#142244;--na-v161-muted:#65748f;--na-v161-border:#dfe5f1}
/* ADMIN > Thông tin website: form từng dính vào cạnh thẻ, nhãn sát input. */
body.na-settings-page{background:#f3f6fc}
body.na-settings-page .admin-content{width:100%;max-width:1440px;margin-inline:auto}
body.na-settings-page .admin-heading{margin-bottom:24px;align-items:center}
body.na-settings-page .admin-heading h1{color:var(--na-v161-ink);font-size:clamp(26px,2.6vw,35px);line-height:1.18;margin:0 0 8px}
body.na-settings-page .admin-heading p{line-height:1.6;max-width:680px}
body.na-settings-page .admin-content > .card{overflow:visible;border:1px solid var(--na-v161-border);border-radius:20px;background:#fff;box-shadow:0 12px 40px rgba(20,35,70,.045)}
body.na-settings-page #settingsForm{padding:clamp(20px,2.7vw,36px)}
body.na-settings-page #settingsForm .forms-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,2vw,28px);row-gap:22px}
body.na-settings-page #settingsForm .field{display:flex;flex-direction:column;min-width:0;margin:0;gap:9px}
body.na-settings-page #settingsForm .field.wide{grid-column:1 / -1}
body.na-settings-page #settingsForm .field label{position:static;display:block;font-size:13px;font-weight:700;line-height:1.5;color:#35466c;margin:0}
body.na-settings-page #settingsForm .field :is(input,textarea,select){display:block;width:100%;min-width:0;height:auto;min-height:49px;margin:0;background:#fff;color:#142244;border:1px solid #d8e1f1;border-radius:12px;padding:12px 15px;line-height:1.55;box-shadow:none}
body.na-settings-page #settingsForm .field textarea{min-height:108px;resize:vertical}
body.na-settings-page #settingsForm .field :is(input,textarea,select):focus{outline:2px solid #ffd2ce;outline-offset:1px;border-color:#e74b40!important;box-shadow:0 0 0 3px rgba(225,34,24,.07)}
body.na-settings-page #settingsForm .settings-divider{border-top:1px solid var(--na-v161-border);margin-top:30px;padding-top:28px}
body.na-settings-page #settingsForm .settings-divider h2{font-size:clamp(18px,1.8vw,22px);margin:0 0 23px;color:#17264b;letter-spacing:-.025em}
body.na-settings-page #settingsForm .form-foot{display:flex;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid var(--na-v161-border);margin-top:30px;padding-top:24px}
body.na-settings-page #settingsForm .form-foot .btn{min-height:46px;padding-inline:23px}
body.na-settings-page #settingsForm .form-foot #status{overflow-wrap:anywhere}
/* AUTH: explicit high-contrast ink on image. V16 global body ink used to override the promo. */
body.auth-screen .auth-promo{isolation:isolate;overflow:hidden;color:#fff;background-image:linear-gradient(110deg,rgba(9,15,38,.88) 0%,rgba(15,21,44,.82) 56%,rgba(15,21,44,.62) 100%),url('../assets/hero-event.webp')}
body.auth-screen .auth-promo::before{background:linear-gradient(0deg,rgba(7,12,30,.35),transparent 62%)}
body.auth-screen .auth-promo,body.auth-screen .auth-promo :is(h1,h2,p,span,strong){color:#fff}
body.auth-screen .auth-promo .tiny-intro{color:#ff958c;font-weight:800;letter-spacing:.14em}
body.auth-screen .auth-promo-content{width:min(100%,690px);position:relative;z-index:1}
body.auth-screen .auth-promo-content h1{font-size:clamp(40px,4.7vw,72px);line-height:1.08;letter-spacing:-.06em;text-shadow:0 3px 20px rgba(0,0,0,.25)}
body.auth-screen .auth-promo-content p{color:#e7ebf5;line-height:1.75}
body.auth-screen .auth-points{gap:9px}
body.auth-screen .auth-points span{color:#fff;border-color:rgba(255,255,255,.31);background:rgba(255,255,255,.08);backdrop-filter:blur(3px);border-radius:999px}
body.auth-screen .auth-home{color:#fff;position:relative;z-index:1}
body.auth-screen .auth-form h2{color:#172448}
body.auth-screen .auth-form-panel{min-width:0}
/* PUBLIC: floating consultation action stays within viewport, including narrow mobile. */
body.na-public{max-width:100%;overflow-x:clip}
body.na-public .floating-call{position:fixed!important;right:max(14px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important;left:auto!important;max-width:min(270px,calc(100vw - 28px));min-height:44px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:45;box-shadow:0 10px 30px rgba(20,25,49,.17)}
body.na-public .wrap{max-width:100%}
body.na-public :is(.hero,.section,.cta-panel,.footer){min-width:0}
@media(max-width:900px){body.na-settings-page #settingsForm{padding:24px}body.auth-screen .auth-promo-content h1{font-size:clamp(36px,6vw,58px)}}
@media(max-width:700px){body.na-settings-page .admin-content{padding-inline:16px!important}body.na-settings-page .admin-heading{flex-wrap:wrap;align-items:flex-start}body.na-settings-page .admin-content > .card{border-radius:16px}body.na-settings-page #settingsForm{padding:20px 16px}body.na-settings-page #settingsForm .forms-grid{grid-template-columns:minmax(0,1fr);gap:19px}body.na-settings-page #settingsForm .field.wide{grid-column:auto}body.na-settings-page #settingsForm .settings-divider{padding-top:23px;margin-top:24px}body.auth-screen .auth-promo{min-height:300px;padding:28px 25px 38px}body.auth-screen .auth-promo-content h1{font-size:clamp(36px,7vw,52px)}body.auth-screen .auth-form-panel{padding:32px 22px}body.na-public .floating-call{right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;padding:10px 14px;font-size:12px;max-width:calc(100vw - 24px)}}
@media(max-width:390px){body.na-settings-page .admin-content{padding-inline:12px!important}body.na-settings-page #settingsForm{padding:18px 14px}body.auth-screen .auth-points{gap:6px}body.auth-screen .auth-points span{padding:7px 9px;font-size:10px}}
@media(prefers-reduced-motion:reduce){body.na-public .floating-call{transition:none!important}}

/* V16.2 — clean sign-in cover after removing promotional copy */
body.auth-screen .auth-promo{background-image:linear-gradient(110deg,rgba(9,15,38,.56),rgba(15,21,44,.24)),url('../assets/hero-event.webp');background-position:center;background-size:cover}
body.auth-screen .auth-promo::before{background:linear-gradient(180deg,rgba(8,13,28,.25),transparent 50%)}
body.auth-screen .auth-home{position:relative;z-index:2;text-shadow:0 1px 5px rgba(0,0,0,.65)}
@media(max-width:700px){body.auth-screen .auth-promo{min-height:150px;padding:26px 22px}}