/* ==========================================================================
   THƯƠNG HIỆU — brand theme (loaded last)
   All brand values live in these variables: colours, menu spacing, sidebar width.
   Cài đặt → Thiết lập thương hiệu overrides them in <style id="theme-vars">.
   To restyle by hand, change the variables here instead of individual rules.
   ========================================================================== */
:root{
 --brand:#0964FE;--brand-hover:color-mix(in srgb,var(--brand) 85%,#000);--brand-soft:color-mix(in srgb,var(--brand) 8%,#fff);
 --section-head:#1B2A3F;
 --sidebar-bg:#171717;--sidebar-group-bg:#1E1E1E;--sidebar-active-bg:#003795;--sidebar-hover-bg:#15418B;--sidebar-text:#B6BBC5;--menu-hover:#F04438;
 --header-bg:#FFFFFF;--page-bg:#F3F5F8;
 --sidebar-width:280px;--menu-item-height:38px;--menu-gap:12px;--menu-indent:52px;--menu-font-size:15px;--menu-icon-size:20px;
}

/* ---- Page, header, sidebar ---- */
body,:root{background:var(--page-bg)}
.shell{margin-left:var(--sidebar-width);background:var(--page-bg)}
header{background:var(--header-bg)}
aside{width:var(--sidebar-width);background:var(--sidebar-bg)}
nav a,nav button,nav details>summary{min-height:var(--menu-item-height);padding-top:0;padding-bottom:0;gap:var(--menu-gap);font-size:var(--menu-font-size)}
nav details a,nav details .active{min-height:var(--menu-item-height);padding-top:0;padding-bottom:0;padding-left:var(--menu-indent);font-size:var(--menu-font-size)}
nav .solid-icon,nav details>summary .solid-icon{flex:0 0 var(--menu-icon-size);width:var(--menu-icon-size);height:var(--menu-icon-size)}
.compact aside{width:76px}
.compact .shell{margin-left:76px}
@media(max-width:1000px){aside{width:min(var(--sidebar-width),248px)}.shell{margin-left:min(var(--sidebar-width),248px)}.compact aside{width:76px}.compact .shell{margin-left:76px}}
@media(max-width:760px){aside,.compact aside{width:var(--sidebar-width)}.shell,.compact .shell{margin-left:0}}

/* ---- Dialogs: fixed title with close button ---- */
#dialog .dialog-head{position:sticky;top:-20px;z-index:8;margin:-20px -20px 16px;padding:14px 20px;border-bottom:1px solid #eaecf0;background:#fff}
#dialog .preview-notice{position:static}
#dialog .preview-actions .primary{box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 30%,transparent)}

/* ---- Login ---- */
.login-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(circle at top,color-mix(in srgb,var(--brand) 35%,var(--sidebar-bg)),var(--sidebar-bg) 70%)}
.login-card{width:min(380px,100%);padding:20px;border-radius:20px;background:#fff;box-shadow:0 30px 80px #0006;text-align:center}
.login-logo{display:grid;place-items:center;min-height:72px;margin-bottom:10px}
.login-logo img{display:block;max-width:280px;max-height:110px;object-fit:contain}
.login-logo-text{color:var(--brand);font-size:30px;font-weight:800}
.login-card h1{margin:0 0 22px;color:#2b2b36;font-size:31px;font-weight:700;line-height:1.25}
#auth{display:flex;flex-direction:column;gap:18px;text-align:left}
#auth .login-input{height:38px;margin:0;padding:0 20px;border:1px solid #b9bfd0;border-radius:6px;font-size:17px}
#auth .login-input::placeholder{color:#a8b0c0}
#auth .login-input:focus{border-color:var(--brand);outline:3px solid color-mix(in srgb,var(--brand) 20%,transparent);outline-offset:0}
.login-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px;color:#444;font-size:17px}
#auth .login-remember{display:inline-flex;align-items:center;gap:8px;margin:0;color:#444;font-size:17px}
#auth .login-remember input{width:18px;height:18px;margin:0;accent-color:var(--brand)}
.login-row a{color:#444}
.login-row a:hover,.login-foot a:hover{color:var(--brand-hover);text-decoration:underline}
#auth .login-submit{height:42px;border-radius:6px;font-size:20px;font-weight:700}
.google-login{display:flex;align-items:center;justify-content:center;gap:12px;height:42px;padding:0 16px 0 5px;border-radius:6px;background:#4285F4;color:#fff;font-size:18px;font-weight:700;text-decoration:none}
.google-login:hover{background:#3367D6;color:#fff}
.google-login:focus-visible{outline:3px solid color-mix(in srgb,#4285F4 35%,transparent);outline-offset:2px}
.google-login .google-mark{width:32px;height:32px;margin-right:auto;border-radius:4px;background:#fff}
.google-login span:last-child{margin-right:auto}
.login-or{margin:14px 0 18px;color:#333;font-size:17px;text-align:center}
.google-mark{display:inline-grid;place-items:center;flex:none}
.google-mark svg{width:20px;height:20px;stroke:none}
.google-card .brand-card-head h2{display:flex;align-items:center;gap:10px}
.google-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.google-grid>.switch,.google-grid>div{grid-column:1/-1}
.copy-field{display:flex;gap:8px}
.copy-field input{flex:1;min-width:0;margin:0;background:#f8fafc}
.google-steps{margin:14px 0 0;padding-left:20px;line-height:1.7}
@media(max-width:760px){.google-grid{grid-template-columns:minmax(0,1fr)}}
.login-foot{margin:4px 0 0;color:#333;font-size:17px;text-align:center}
.login-foot a{color:var(--brand)}
.login-help{margin:0;padding:12px 14px;border-radius:8px;background:var(--brand-soft);color:#1d2433;font-size:14px;line-height:1.5}
#auth .inline-error:empty{display:none}
@media(max-width:520px){.login-card h1{font-size:26px}.google-login{font-size:16px}.login-row,.login-foot,#auth .login-remember{font-size:15px}.login-row{padding:0}}

/* ---- Cài đặt → Thiết lập thương hiệu ---- */
.brand-settings .brand-sections{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.brand-section{min-width:0;padding:18px;border:1px solid #eaecf0;border-radius:10px;background:#fcfcfd}
.brand-settings .brand-assets{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.brand-settings .brand-asset,.brand-settings .field-group{min-width:0}
.brand-section>h3{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px}
.brand-section>h3 .solid-icon{width:18px;height:18px;flex-basis:18px;color:var(--brand)}
.brand-section #branding{display:flex;flex-direction:column;gap:16px}
.name-case{display:flex;align-items:stretch;gap:8px}
.name-case input{flex:1;min-width:0;margin:0}
.case-seg label{display:flex}
.case-seg span{display:grid;place-items:center;min-width:46px;padding:0 12px;font-weight:700}
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:10px}
.color-field{display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;border:1px solid #e4e7ec;border-radius:8px;background:#fff;cursor:pointer}
.color-field input[type=color]{flex:none;width:42px;height:34px;margin:0;padding:0;border:1px solid #d0d5dd;border-radius:6px;background:none;cursor:pointer}
.color-meta{display:flex;flex-direction:column;min-width:0;color:#344054;font-size:13px}
.color-meta code{color:#667085;font-size:12px}
.range-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:14px}
.range-field{margin:0}
.range-field>span{display:flex;justify-content:space-between;gap:8px}
.range-field output{color:var(--brand);font-weight:700}
.brand-reset{margin-top:14px}