:root { --navy:#0c2340; --blue:#146ef5; --muted:#667085; --line:#e5e9f0; --bg:#f4f7fb; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,Segoe UI,Arial,sans-serif; color:#172033; background:var(--bg); }
.login-page { min-height:100vh; }
.session-status { position:fixed; z-index:10; top:10px; right:14px; padding:6px 10px; border-radius:7px; color:#52705f; background:#effaf3; border:1px solid #cdebd8; font-size:11px; font-weight:700; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:45% 55%; }
.brand-panel { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:10vw; color:#fff; background:linear-gradient(145deg,#081b33 0%,#103b70 70%,#146ef5 145%); }
.brand-panel::after { content:""; position:absolute; width:420px; height:420px; border:1px solid #ffffff20; border-radius:50%; right:-180px; bottom:-120px; box-shadow:0 0 0 75px #ffffff08,0 0 0 150px #ffffff06; }
.brand-mark { width:58px; height:58px; display:grid; place-items:center; border-radius:16px; margin-bottom:38px; font-weight:800; font-size:22px; letter-spacing:-1px; background:#fff; color:var(--navy); }
.eyebrow { font-size:12px; letter-spacing:2.4px; font-weight:800; margin:0 0 16px; opacity:.72; }
.brand-panel h1 { font-size:clamp(34px,4vw,58px); line-height:1.08; margin:0; letter-spacing:-2px; }
.brand-copy { max-width:430px; margin:24px 0 0; font-size:17px; line-height:1.7; color:#cdd9e8; }
.brand-footer { position:absolute; left:10vw; bottom:46px; display:flex; align-items:center; gap:10px; color:#9fb1c7; font-size:13px; }
.brand-footer span { width:8px; height:8px; border-radius:50%; background:#37d67a; box-shadow:0 0 0 5px #37d67a20; }
.form-panel { display:grid; place-items:center; padding:40px; background:#fff; }
.login-card { width:min(420px,100%); }
.mobile-brand { display:none; }
.accent { color:var(--blue); opacity:1; }
.login-card h2 { margin:0; font-size:34px; letter-spacing:-1px; color:var(--navy); }
.form-intro { color:var(--muted); margin:12px 0 36px; }
.login-card label { display:block; font-size:13px; font-weight:700; margin:20px 0 8px; }
.input-wrap { height:54px; display:flex; align-items:center; gap:12px; border:1px solid #d8dee8; border-radius:12px; padding:0 16px; transition:.2s; }
.input-wrap:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px #146ef512; }
.input-wrap>span { color:#8793a5; font-size:13px; }
.input-wrap input { border:0; outline:0; flex:1; min-width:0; height:100%; font:inherit; font-size:15px; background:transparent; }
.toggle-password { border:0; background:none; color:var(--blue); font-weight:700; cursor:pointer; }
.primary-button { width:100%; height:56px; margin-top:28px; border:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,#146ef5,#0758ce); font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 12px 28px #146ef52e; }
.primary-button:hover { transform:translateY(-1px); }
.primary-button span { float:right; margin-right:8px; }
.alert { padding:13px 15px; border-radius:10px; background:#fff1f1; color:#b42318; border:1px solid #ffd2ce; font-size:14px; }
.support-text { text-align:center; color:#98a2b3; font-size:12px; margin-top:24px; }
.success-overlay { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:24px; background:#081b33e8; backdrop-filter:blur(6px); }
.success-modal { width:min(390px,100%); padding:40px 30px; border-radius:22px; text-align:center; background:#fff; box-shadow:0 25px 70px #0004; animation:successIn .35s ease-out; }
.success-check { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 20px; border-radius:50%; color:#fff; background:#19a762; font-size:36px; box-shadow:0 0 0 10px #19a76216; }
.success-modal h2 { margin:0 0 9px; color:var(--navy); font-size:25px; }.success-modal p { margin:0; color:var(--muted); }
@keyframes successIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
.login-success-toast { position:fixed; z-index:30; top:22px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:13px; min-width:320px; padding:15px 18px; border:1px solid #b8ebcf; border-radius:14px; color:#125b38; background:#f0fff6; box-shadow:0 14px 40px #0c234026; transition:.3s; animation:toastIn .35s ease-out; }
.login-success-toast>span { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#19a762; font-weight:900; }.login-success-toast strong,.login-success-toast small { display:block; }.login-success-toast small { margin-top:3px; color:#4b765f; }.login-success-toast.hide { opacity:0; transform:translate(-50%,-15px); pointer-events:none; }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,-15px); } to { opacity:1; transform:translate(-50%,0); } }
.topbar { height:76px; padding:0 max(24px,5vw); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy); font-weight:800; }
.logo span { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--navy); }
.user-menu { display:flex; align-items:center; gap:11px; }
.user-menu small { display:block; text-transform:capitalize; color:var(--muted); margin-top:3px; }
.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#e9f1ff; color:var(--blue); font-weight:800; }
.logout-link { margin-left:18px; padding:10px 14px; text-decoration:none; border:1px solid var(--line); border-radius:9px; color:#344054; font-size:13px; font-weight:700; }
.dashboard-shell { max-width:1180px; margin:0 auto; padding:54px 24px; }
.welcome-card { display:flex; justify-content:space-between; align-items:center; padding:42px 46px; border-radius:22px; color:#fff; background:linear-gradient(125deg,#0b2442,#12477f); box-shadow:0 18px 45px #0c23401c; }
.welcome-card h1 { font-size:36px; margin:0 0 10px; letter-spacing:-1px; }
.welcome-card p:last-child { color:#c6d4e5; margin:0; }
.success-badge { width:72px; height:72px; display:grid; place-items:center; border-radius:50%; font-size:32px; background:#ffffff14; border:1px solid #ffffff33; }
.dashboard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:25px; }
.info-card,.empty-state { padding:27px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.card-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; font-weight:800; }
.card-icon.blue { background:#eaf2ff; color:#146ef5; }.card-icon.gold { background:#fff6da; color:#d59500; }.card-icon.green { background:#e5f8ed; color:#159455; }
.card-icon.purple { background:#f1eaff; color:#7747d8; }
.personal-card { display:block;color:#172033;text-decoration:none!important;transition:transform .2s,box-shadow .2s,border-color .2s; }.personal-card:hover { color:#172033;border-color:#cfc0ee;box-shadow:0 14px 30px #44228012;transform:translateY(-3px); }.personal-card strong { color:#6840bd; }
.update-card:hover { border-color:#efd994;box-shadow:0 14px 30px #9b720f12; }.update-card strong { color:#b47800; }
.info-card h2 { font-size:17px; margin:22px 0 16px; }.info-card p { color:var(--muted); font-size:13px; margin:0 0 5px; }.info-card strong { text-transform:capitalize; }
.empty-state { margin-top:25px; min-height:210px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.empty-state div { width:50px; height:50px; display:grid; place-items:center; border:1px dashed #aeb8c6; border-radius:50%; color:#778396; font-size:24px; }.empty-state h2 { margin:15px 0 7px; font-size:18px; }.empty-state p { margin:0; color:var(--muted); }
@media(max-width:1000px) and (min-width:801px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.login-shell{grid-template-columns:1fr}.brand-panel{display:none}.form-panel{padding:30px 22px}.mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:52px;font-weight:800;color:var(--navy)}.mobile-brand span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--navy);color:#fff}.dashboard-grid{grid-template-columns:1fr}.welcome-card{padding:30px}.success-badge{display:none}.user-menu>div:not(.avatar){display:none}.logout-link{margin-left:2px}.dashboard-shell{padding-top:30px}}

/* Modern Bootstrap login */
.auth-layout { min-height:100vh; display:grid; grid-template-columns:minmax(500px,47%) 1fr; background:#f7f9fd; }
.auth-visual { position:relative; min-height:100vh; overflow:hidden; color:#fff; background:radial-gradient(circle at 15% 15%,#294c91 0,#122e62 37%,#081a3d 100%); }
.auth-visual::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to bottom,transparent,#000 30%,transparent); }
.visual-orb { position:absolute; border-radius:50%; filter:blur(1px); }.orb-one { width:480px;height:480px;right:-260px;top:-180px;border:1px solid #5a8ee855;box-shadow:0 0 0 80px #4c80dd12,0 0 0 160px #4c80dd0b; }.orb-two { width:260px;height:260px;left:-160px;bottom:-100px;background:#2878ff1e;box-shadow:0 0 90px #2878ff4d; }
.visual-content { position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; padding:58px clamp(48px,7vw,110px) 42px; }
.brand-lockup { display:flex; align-items:center; gap:14px; color:#fff; font-size:12px; line-height:1.2; letter-spacing:2px; font-weight:700; text-decoration:none!important; }.brand-lockup:hover { color:#fff; }.brand-lockup b { color:#6da4ff; }
.brand-logo { width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#fff,#dce9ff);color:#0c2b61;font-weight:900;font-size:19px;letter-spacing:-1px;box-shadow:0 10px 30px #0003; }
.visual-message { margin:auto 0; max-width:600px; }.mini-label { display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid #ffffff29;border-radius:100px;background:#ffffff0c;color:#bed3f6;font-size:11px;font-weight:800;letter-spacing:1.7px; }.mini-label i { width:7px;height:7px;border-radius:50%;background:#55dc99;box-shadow:0 0 0 5px #55dc9920; }
.visual-message h1 { margin:30px 0 20px;font-size:clamp(45px,5vw,70px);font-weight:800;line-height:1.03;letter-spacing:-3px;text-shadow:0 8px 35px #0002; }.visual-message p { max-width:530px;color:#bbcae3;font-size:17px;line-height:1.75; }.feature-row { display:flex;gap:23px;margin-top:34px;color:#e3edff;font-size:12px;font-weight:700; }.feature-row span::first-letter { color:#66e2a4; }
.visual-copyright { margin:0;color:#7890b5;font-size:11px;letter-spacing:.3px; }
.auth-form-side { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:55px clamp(28px,7vw,100px);position:relative;background:radial-gradient(circle at 95% 0,#eaf1ff 0,transparent 33%),#f8faff; }
.modern-card { width:min(470px,100%);padding:48px 46px;border:1px solid #e7ecf5;border-radius:24px;background:#fff;box-shadow:0 28px 80px #17336312; }
.welcome-icon { width:46px;height:46px;display:grid;place-items:center;margin-bottom:24px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#236ff0,#0d49c1);font-size:18px;box-shadow:0 10px 25px #146ef536; }
.modern-card .eyebrow { margin-bottom:9px;font-size:10px;letter-spacing:2.1px; }.modern-card h2 { margin:0;color:#0b2145;font-size:31px;font-weight:800;letter-spacing:-1px; }.modern-card .form-intro { margin:10px 0 31px;color:#78859a;font-size:14px; }
.modern-group { margin-bottom:20px; }.modern-group label { margin:0 0 9px;color:#243552;font-size:12px;letter-spacing:.1px; }.modern-input { height:56px;border:1px solid #dfe5ef;border-radius:13px;background:#fbfcff;padding:0 15px; }.modern-input:hover { border-color:#b9c9e2; }.modern-input:focus-within { background:#fff;border-color:#2876ef;box-shadow:0 0 0 4px #2876ef13; }.modern-input input { color:#15233c;font-size:14px; }.modern-input input::placeholder { color:#a4adbb; }.field-icon { width:22px;color:#8ca0bd!important;text-align:center;font-size:17px!important; }.lock-icon { font-size:10px!important; }
.login-options { display:flex;align-items:center;justify-content:space-between;gap:15px;margin:2px 0 25px; }.remember-option { display:flex!important;align-items:center;gap:9px;margin:0!important;color:#35445d!important;font-size:12px!important;cursor:pointer;user-select:none; }.remember-option input { position:absolute;opacity:0;pointer-events:none; }.custom-check { width:19px;height:19px;display:grid;place-items:center;border:1px solid #cbd5e3;border-radius:6px;color:transparent;background:#fff;font-size:12px;transition:.2s; }.remember-option input:checked+.custom-check { color:#fff;border-color:#1767e8;background:#1767e8;box-shadow:0 0 0 3px #1767e818; }.remember-note { color:#9aa5b5;font-size:10px; }
.modern-card .primary-button { position:relative;height:56px;margin:0;border:0;border-radius:13px;background:linear-gradient(110deg,#2879f5,#0c51cb);box-shadow:0 13px 28px #1767e82b;font-size:14px;letter-spacing:.2px;transition:.2s; }.modern-card .primary-button:hover,.modern-card .primary-button:focus { background:linear-gradient(110deg,#1b6fec,#0848b9);box-shadow:0 16px 32px #1767e83b;transform:translateY(-1px); }.button-arrow { position:absolute;right:20px;font-size:19px;font-weight:400;line-height:15px; }
.secure-note { display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;color:#8b98ab;font-size:10px; }.secure-note span { color:#38a56e;font-size:8px; }.modern-card .support-text { margin:28px 0 0;color:#9aa5b5;font-size:11px; }.modern-card .support-text a { color:#296bd3;font-weight:700;text-decoration:none; }.login-alert { border-radius:12px;margin-bottom:24px;padding:12px 14px;font-size:12px;line-height:1.5; }
.mobile-header { position:absolute;top:25px;left:28px;align-items:center;gap:10px;color:#102953;font-size:12px;letter-spacing:1px; }.mobile-header.visible-xs,.mobile-header.visible-sm { display:none!important; }.mobile-header .brand-logo { width:39px;height:39px;border-radius:11px;font-size:15px;background:#102953;color:#fff;box-shadow:none; }
@media(max-width:991px){.auth-layout{display:block;min-height:100vh}.auth-form-side{min-height:100vh;padding:95px 22px 35px;background:radial-gradient(circle at 100% 0,#e4edff 0,transparent 40%),#f5f8fd}.mobile-header.visible-xs,.mobile-header.visible-sm{display:flex!important}.modern-card{padding:38px 32px}.modern-card h2{font-size:28px}}
@media(max-width:480px){.auth-form-side{align-items:flex-start;padding-top:92px}.modern-card{padding:32px 22px;border-radius:20px}.welcome-icon{width:42px;height:42px;margin-bottom:21px}.modern-card h2{font-size:26px}.modern-card .form-intro{margin-bottom:27px}.login-options{align-items:flex-start;flex-direction:column;gap:9px}.remember-note{padding-left:28px}.mobile-header{left:22px}.modern-input{height:54px}}

/* Account management */
.account-link,.dashboard-action { display:inline-flex;align-items:center;text-decoration:none!important;font-weight:700; }.account-link { margin-left:18px;padding:10px 14px;border-radius:9px;color:#1767d9;background:#edf4ff;font-size:13px; }.account-link:hover { color:#0d52b8;background:#e1edff; }.dashboard-action { margin-top:20px;padding:11px 17px;border-radius:10px;color:#fff;background:#1769e8; }.dashboard-action:hover { color:#fff;background:#0d55c5; }
.accounts-page { min-height:100vh;background:#f5f7fb;color:#17243b; }.account-nav { display:flex;align-items:center;gap:8px; }.account-nav>a:first-child { color:#526176;text-decoration:none;font-weight:700;font-size:13px; }
.accounts-shell { max-width:1160px;margin:0 auto;padding:52px 24px 80px; }.accounts-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:30px; }.accounts-heading h1 { margin:0 0 9px;color:#0b2144;font-size:36px;font-weight:800;letter-spacing:-1px; }.accounts-heading p:last-child { margin:0;color:#778499; }.create-user-button,.save-button { border:0!important;color:#fff!important;background:linear-gradient(120deg,#2378f2,#0b51c7)!important;font-weight:700!important;box-shadow:0 10px 24px #1767e824; }.create-user-button { padding:13px 20px!important;border-radius:11px!important; }.account-alert { border-radius:13px;padding:14px 17px;margin-bottom:22px; }
.create-user-panel { display:none;margin-bottom:23px;padding:28px;border:1px solid #dce5f2;border-radius:18px;background:#fff;box-shadow:0 16px 40px #1733630c; }.create-user-panel.open { display:block;animation:successIn .25s ease-out; }.panel-title { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:23px; }.panel-title h2 { margin:0 0 5px;font-size:20px;font-weight:800; }.panel-title p { margin:0;color:#8490a2;font-size:13px; }.panel-title button { border:0;background:none;color:#8d98a8;font-size:25px;line-height:1; }
.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 22px; }.account-form label,.edit-user-form label { display:block;margin-bottom:7px;color:#344258;font-size:12px;font-weight:700; }.account-form .form-control,.edit-user-form .form-control { height:45px;border-color:#dce3ed;border-radius:10px;box-shadow:none;font-size:13px; }.account-form .form-control:focus,.edit-user-form .form-control:focus { border-color:#2875eb;box-shadow:0 0 0 3px #2875eb11; }.form-actions { grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:4px; }.form-actions .btn,.edit-actions .btn { padding:10px 17px;border-radius:9px;font-size:12px; }
.users-list { display:grid;gap:15px; }.user-card { overflow:hidden;border:1px solid #e0e6ef;border-radius:17px;background:#fff;box-shadow:0 8px 25px #17336308; }.user-card.inactive { opacity:.7; }.user-card-summary { display:grid;grid-template-columns:auto minmax(160px,1fr) auto auto auto;align-items:center;gap:18px;padding:20px 22px; }.user-avatar { width:48px;height:48px;display:grid;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(145deg,#1d70ec,#103f99);font-size:18px;font-weight:900; }.user-identity h2 { margin:0 0 4px;font-size:16px;font-weight:800; }.user-identity p { margin:0;color:#8a96a7;font-size:12px; }.role-pill,.status-pill { padding:6px 10px;border-radius:100px;font-size:10px;font-weight:800;text-transform:capitalize; }.role-pill { color:#45617f;background:#edf2f7; }.role-pill.admin { color:#8d5c05;background:#fff3d5; }.status-pill { color:#17814e;background:#e9f8f0; }.user-card.inactive .status-pill { color:#a23e3e;background:#fff0f0; }.edit-toggle { padding:8px 13px;border:1px solid #dce4ef;border-radius:9px;color:#2666bd;background:#fff;font-size:12px;font-weight:800; }
.edit-user-form { display:none;padding:24px;border-top:1px solid #e9edf3;background:#fafcff; }.edit-user-form.open { display:block; }.edit-user-form small { display:block;margin-top:6px;color:#98a2b1;font-size:10px; }.edit-actions { display:flex;gap:10px;margin-top:22px; }.delete-button { margin-left:auto;color:#bc3131!important;border:1px solid #f0caca!important;background:#fff5f5!important;font-weight:700!important; }.active-switch { grid-column:1/-1;display:flex!important;align-items:center;gap:9px;margin:0!important;cursor:pointer; }.active-switch input { width:17px;height:17px;margin:0; }
.regular-account .user-card-summary { grid-template-columns:auto 1fr auto; }.regular-account .status-pill { justify-self:end; }.regular-account .edit-user-form { padding:30px; }.regular-account .edit-actions .save-button { min-width:170px; }
.profile-section-title { display:flex;align-items:center;gap:13px;margin:30px 0 18px;padding-top:27px;border-top:1px solid #e6ebf2; }.profile-section-title>span { width:35px;height:35px;display:grid;place-items:center;flex:0 0 35px;border-radius:10px;color:#1766d8;background:#eaf2ff;font-size:11px;font-weight:900; }.profile-section-title h3 { margin:0 0 3px;color:#1b2c47;font-size:16px;font-weight:800; }.profile-section-title p { margin:0;color:#8b97a8;font-size:11px; }.profile-section-title.social-title>span { color:#7847cb;background:#f2ebff; }
.profile-grid { padding:22px;border:1px solid #e5eaf1;border-radius:14px;background:#fff; }.wide-field { grid-column:1/-1; }.profile-textarea { min-height:105px!important;height:auto!important;resize:vertical;padding:12px!important;line-height:1.6; }
.social-input { position:relative;display:flex;align-items:center; }.social-input b { position:absolute;z-index:2;left:13px;width:20px;color:#63758e;font-size:14px;text-align:center; }.social-input .form-control { padding-left:43px; }.social-input.facebook b { color:#1877f2;font-size:18px; }.social-input.zalo b { color:#0877ed; }.social-input.instagram b { color:#c13584;font-size:17px; }.social-input.tiktok b { color:#111; }.social-input.youtube b { color:#f00;font-size:12px; }.social-input.linkedin b { color:#0a66c2;font-size:12px; }
@media(max-width:800px){.account-link{display:none}.accounts-shell{padding:32px 16px 60px}.accounts-heading{align-items:flex-start;flex-direction:column}.accounts-heading h1{font-size:29px}.create-user-button{width:100%}.form-grid{grid-template-columns:1fr}.user-card-summary{grid-template-columns:auto 1fr auto;gap:12px;padding:17px}.role-pill{grid-column:2}.status-pill{display:none}.edit-toggle{grid-column:3;grid-row:1/3}.edit-actions{flex-direction:column}.delete-button{margin-left:0}.account-nav .logout-link{display:inline-flex}.regular-account .edit-user-form{padding:20px 16px}.profile-grid{padding:16px}.wide-field{grid-column:auto}.profile-section-title{align-items:flex-start}}

.personal-page { min-height:100vh;display:grid;place-items:center;margin:0;background:linear-gradient(145deg,#f7f9fd,#eaf0fb); }.personal-placeholder { width:min(430px,calc(100% - 40px));padding:60px 30px;border:1px solid #e0e5ef;border-radius:24px;text-align:center;background:#fff;box-shadow:0 24px 70px #17336316; }.personal-placeholder .card-icon { margin:0 auto 18px;width:58px;height:58px;font-size:23px; }.personal-placeholder h1 { margin:0;color:#152541;font-size:38px;font-weight:800;letter-spacing:-1px; }

/* Profile image upload */
.profile-section-title.photo-title>span { color:#b26613;background:#fff0dc; }.profile-photo-grid { display:grid;grid-template-columns:2fr 1fr;gap:18px; }.upload-card,.gallery-upload-item { margin:0!important;padding:16px;border:1px dashed #cdd7e5;border-radius:14px;text-align:center;background:#fff;cursor:pointer;transition:.2s; }.upload-card:hover,.gallery-upload-item:hover { border-color:#2875eb;background:#f8fbff; }.upload-card input,.gallery-upload-item input { position:absolute;width:1px;height:1px;opacity:0; }.upload-preview { height:150px;display:grid;place-items:center;margin-bottom:11px;border-radius:11px;color:#8d9cb0;background:#edf2f8 center/cover no-repeat;font-size:25px; }.upload-preview.round { width:120px;height:120px;margin:0 auto 11px;border-radius:50%; }.upload-preview.has-image b,.gallery-preview.has-image b { display:none; }.upload-card strong,.upload-card small { display:block; }.upload-card strong { color:#293a54;font-size:13px; }.upload-card small { margin-top:4px;color:#98a3b2;font-weight:400; }.gallery-upload-title { margin:22px 0 11px;color:#344258;font-size:12px;font-weight:800; }.gallery-upload-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:11px; }.gallery-upload-item { padding:9px; }.gallery-preview { aspect-ratio:1;display:grid;place-items:center;border-radius:9px;color:#71829a;background:#edf2f8 center/cover no-repeat;font-size:20px; }.gallery-upload-item small { display:block;margin-top:7px;color:#718096;font-weight:700; }

/* Public profile */
.public-profile-page { min-height:100vh;margin:0;color:#1a2940;background:linear-gradient(180deg,#eef3fb,#f7f9fc 40%,#eef2f8); }.public-profile-shell { max-width:1180px;margin:0 auto;padding:30px 24px 70px; }.profile-hero { overflow:hidden;border-radius:25px;background:#fff;box-shadow:0 24px 65px #17336318; }.profile-cover { height:330px;background-position:center;background-size:cover; }.profile-cover.default-cover { position:relative;background:radial-gradient(circle at 75% 20%,#8f65e766,transparent 33%),radial-gradient(circle at 10% 100%,#1ab8b04d,transparent 40%),linear-gradient(120deg,#0a2450,#174e94 60%,#5a3ba4); }.profile-cover.default-cover::after { content:"";position:absolute;inset:0;opacity:.15;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:55px 55px; }.profile-hero-content { position:relative;display:flex;align-items:flex-end;gap:23px;min-height:145px;padding:26px 38px 30px 215px; }.public-avatar { position:absolute;left:38px;top:-85px;width:155px;height:155px;border:6px solid #fff;border-radius:35px;background:center/cover no-repeat;box-shadow:0 14px 35px #132c552d; }.public-avatar.default-avatar { display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#287af0,#123d8b);font-size:56px;font-weight:900; }.hero-identity { flex:1; }.verified-label { color:#276cd2;font-size:9px;font-weight:900;letter-spacing:1.7px; }.hero-identity h1 { margin:7px 0 5px;color:#11233f;font-size:35px;font-weight:900;letter-spacing:-1.2px; }.hero-identity p { margin:0;color:#7c899b;font-size:13px; }.profile-home-link { padding:11px 16px;border:1px solid #dae2ed;border-radius:11px;color:#465975;text-decoration:none!important;font-size:12px;font-weight:800; }.profile-home-link:hover { color:#1766d8;background:#f1f6ff; }
.profile-content-grid { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:22px;margin-top:22px; }.profile-main-column,.profile-side-column { display:grid;align-content:start;gap:22px; }.public-profile-card { padding:28px;border:1px solid #e3e8f0;border-radius:19px;background:#fff;box-shadow:0 10px 30px #17336309; }.section-kicker { margin-bottom:7px;color:#3973c8;font-size:9px;font-weight:900;letter-spacing:1.8px; }.public-profile-card h2 { margin:0 0 18px;color:#152641;font-size:20px;font-weight:850; }.about-card>p { margin:0;color:#657389;font-size:14px;line-height:1.8;white-space:normal; }.section-heading { display:flex;justify-content:space-between;align-items:flex-start; }.section-heading>span { padding:6px 9px;border-radius:100px;color:#77869b;background:#f0f3f7;font-size:9px;font-weight:800; }
.public-gallery { display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:10px; }.gallery-photo { min-height:0;border:0;border-radius:13px;background:center/cover no-repeat;cursor:zoom-in;transition:.2s; }.gallery-photo:hover { filter:brightness(.88);transform:scale(.99); }.gallery-photo.featured { grid-column:1/-1;grid-row:span 2; }.empty-gallery { min-height:230px;display:grid;place-items:center;align-content:center;gap:9px;border:1px dashed #d1d9e5;border-radius:14px;color:#95a1b1;background:#fafbfd; }.empty-gallery span { font-size:30px; }.empty-gallery p { margin:0;font-size:12px; }
.details-card dl { margin:0; }.details-card dl>div { padding:12px 0;border-bottom:1px solid #edf0f4; }.details-card dl>div:last-child { border:0;padding-bottom:0; }.details-card dt { margin-bottom:5px;color:#8895a7;font-size:10px;font-weight:700; }.details-card dd { margin:0;color:#2c3a50;font-size:12px;font-weight:750;word-break:break-word; }.public-socials { display:grid;gap:8px; }.public-socials a,.zalo-profile { display:flex;align-items:center;gap:11px;min-height:45px;padding:8px 11px;border:1px solid #e7ebf1;border-radius:11px;color:#33435a;text-decoration:none!important;transition:.2s; }.public-socials a:hover { border-color:#bfd3ef;background:#f5f9ff;transform:translateX(2px); }.public-socials b,.zalo-profile b { width:27px;height:27px;display:grid;place-items:center;border-radius:8px;color:#fff;background:linear-gradient(145deg,#2a7afa,#174da5);font-size:11px; }.public-socials span,.zalo-profile span { flex:1;font-size:11px;font-weight:800; }.public-socials i,.zalo-profile i { color:#8c99aa;font-size:10px;font-style:normal; }.no-social { margin:0;color:#929dab;font-size:12px; }
.profile-lightbox { position:fixed;z-index:100;inset:0;display:none;align-items:center;justify-content:center;padding:30px;background:#071327e8;backdrop-filter:blur(7px); }.profile-lightbox.open { display:flex; }.profile-lightbox img { max-width:95vw;max-height:90vh;border-radius:15px;box-shadow:0 30px 80px #0008; }.profile-lightbox button { position:absolute;top:22px;right:27px;border:0;color:#fff;background:none;font-size:38px; }
@media(max-width:800px){.profile-photo-grid{grid-template-columns:1fr}.gallery-upload-grid{grid-template-columns:repeat(2,1fr)}.public-profile-shell{padding:0 0 45px}.profile-hero{border-radius:0}.profile-cover{height:220px}.profile-hero-content{align-items:flex-start;flex-direction:column;gap:14px;min-height:175px;padding:78px 20px 25px}.public-avatar{left:20px;top:-63px;width:120px;height:120px;border-radius:27px}.hero-identity h1{font-size:28px}.profile-home-link{position:absolute;right:18px;top:18px}.profile-content-grid{grid-template-columns:1fr;gap:14px;margin:14px}.profile-main-column,.profile-side-column{gap:14px}.public-profile-card{padding:22px 18px;border-radius:16px}.public-gallery{grid-auto-rows:120px}.gallery-photo.featured{grid-row:span 2}}