@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/BeVietnamPro-300-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/BeVietnamPro-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/BeVietnamPro-400-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/BeVietnamPro-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/BeVietnamPro-600-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/BeVietnamPro-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/BeVietnamPro-700-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/BeVietnamPro-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexMono-400-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexMono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ===== Pharmacity Skillset Portal — brand.css ===== */

:root {
  /* xanh lá */
  --green-50:#EFF7ED; --green-100:#D2E9CB; --green-300:#96CE86;
  --green-500:#58A946; --green-700:#3F8331; --green-900:#275A1E;
  /* xanh dương */
  --blue-50:#EAF3FA; --blue-100:#C3DEF2; --blue-300:#57A5DA;
  --blue-500:#0071BB; --blue-700:#005490; --blue-900:#003760;
  /* trung tính */
  --n-0:#FFFFFF; --n-50:#F4F5F6; --n-100:#E2E4E6; --n-300:#B5B2B2;
  --n-400:#8A8F94; --n-600:#676767; --n-900:#181E1E;
  /* ngữ nghĩa */
  --success:#3F8331; --info:#0071BB; --warning:#C77B1E; --error:#C4453B;

  /* khoảng cách bội của 8 */
  --s-1:4px; --s-2:8px; --s-4:16px; --s-6:24px; --s-10:40px; --s-20:80px;
  /* bo góc */
  --r-badge:6px; --r-input:10px; --r-card:16px; --r-pill:999px;
  /* lưới */
  --gutter:24px; --margin:48px; --sidebar:240px;
  /* bóng: chỉ cho thành phần nổi */
  --shadow-float:0 8px 24px rgba(24,30,30,.14);

  --font-sans:'Be Vietnam Pro',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*,*::before,*::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  font-family:var(--font-sans);
  font-size:16px; font-weight:400; line-height:1.65;
  color:var(--n-900);
  background:var(--n-0);
}

/* ---------- chữ ---------- */
h1,h2,h3 { margin:0; font-family:var(--font-sans); }
h1 { font-size:34px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
h2 { font-size:22px; font-weight:600; line-height:1.35; }
h3 { font-size:18px; font-weight:600; line-height:1.4; }
@media (min-width:1024px){ h1 { font-size:40px; } }

p { margin:0; }
.lead { color:var(--n-600); }
.muted { color:var(--n-600); font-size:14px; }
.mono, code, .table td.mono { font-family:var(--font-mono); font-size:15px; }

a { color:var(--blue-500); text-decoration:none; }
a:hover { color:var(--blue-700); text-decoration:underline; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--blue-500); outline-offset:2px;
}

code {
  background:var(--n-50); border:1px solid var(--n-100);
  border-radius:var(--r-badge); padding:2px var(--s-1);
  color:var(--n-900);
}

/* ---------- wordmark ---------- */
.wordmark { display:block; font-weight:700; font-size:22px; line-height:1.2; letter-spacing:-.02em; }
.wordmark .w-a { color:var(--blue-500); }
.wordmark .w-b { color:var(--green-500); }
.wordmark-sub { display:block; font-size:12px; font-weight:400; color:var(--n-600); line-height:1.4; }
.wordmark-neg .w-a,.wordmark-neg .w-b { color:var(--n-0); }
.wordmark-neg .w-b { color:var(--green-300); }
.wordmark-neg + .wordmark-sub,.wordmark-neg .wordmark-sub { color:var(--blue-100); }

/* ---------- khung người dùng ---------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  padding:var(--s-4) var(--margin);
  border-bottom:1px solid var(--n-100);
  background:var(--n-0);
}
.topbar-right { display:flex; align-items:center; gap:var(--s-6); }
.topbar-user { font-size:14px; color:var(--n-600); }

.page { max-width:1152px; margin:0 auto; padding:var(--s-10) var(--margin) var(--s-20); }
.page-narrow { max-width:768px; }
.stack > * + * { margin-top:var(--s-6); }
.stack-lg > * + * { margin-top:var(--s-10); }
.page-head { margin-bottom:var(--s-10); }
.page-head h1 + p { margin-top:var(--s-2); }

/* ---------- khung quản trị ---------- */
.admin { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar); flex:0 0 var(--sidebar);
  background:var(--blue-500); color:var(--n-0);
  display:flex; flex-direction:column;
  padding:var(--s-6) 0;
}
.sidebar-head { padding:0 var(--s-6) var(--s-6); }
.badge-admin {
  display:inline-block; margin-top:var(--s-2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  background:var(--blue-700); color:var(--n-0);
  border-radius:var(--r-badge); padding:var(--s-1) var(--s-2);
}
.sidebar-nav { display:flex; flex-direction:column; gap:var(--s-1); padding:0 var(--s-2); }
.sidebar-nav a {
  display:flex; align-items:center; gap:var(--s-2);
  min-height:44px; padding:0 var(--s-4);
  color:var(--n-0); font-size:15px; font-weight:400;
  border-radius:var(--r-input);
}
.sidebar-nav a:hover { background:var(--blue-700); text-decoration:none; }
.sidebar-nav a[aria-current="page"] { background:var(--blue-700); font-weight:600; }
.sidebar-foot {
  margin-top:auto; padding:var(--s-6) var(--s-6) 0;
  border-top:1px solid var(--blue-700);
  font-size:13px; color:var(--blue-100);
}
.sidebar-foot a { color:var(--n-0); text-decoration:underline; }
.sidebar-foot .sidebar-email { display:block; margin-bottom:var(--s-2); word-break:break-all; }
.admin-main { flex:1 1 auto; background:var(--n-50); min-width:0; }
.admin-main .page { max-width:1280px; }

/* ---------- thẻ ---------- */
.card {
  background:var(--n-0);
  border:1px solid var(--n-100);
  border-radius:var(--r-card);
  padding:var(--s-4);
}
.card-lg { padding:var(--s-10); }
.card + .card { margin-top:var(--s-6); }
.card-title { margin-bottom:var(--s-4); }

/* ---------- nút ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:44px; padding:0 var(--s-4);
  border-radius:var(--r-input); border:1px solid transparent;
  font-family:var(--font-sans); font-size:16px; font-weight:600; line-height:1;
  cursor:pointer; text-decoration:none;
}
.btn:hover { text-decoration:none; }
.btn-block { width:100%; }
.btn-sm { min-height:44px; font-size:14px; padding:0 var(--s-2); }

.btn-primary { background:var(--green-700); color:var(--n-0); }
.btn-primary:hover { background:var(--green-900); color:var(--n-0); }

.btn-secondary { background:var(--n-0); color:var(--blue-700); border-color:var(--blue-500); }
.btn-secondary:hover { background:var(--blue-50); color:var(--blue-700); }

.btn-danger { background:var(--n-0); color:var(--error); border-color:var(--error); }
.btn-danger:hover { background:var(--error); color:var(--n-0); }

.btn:disabled,.btn[disabled] {
  background:var(--n-100); color:var(--n-400); border-color:var(--n-100); cursor:not-allowed;
}

/* ---------- biểu mẫu ---------- */
.field + .field { margin-top:var(--s-4); }
.field label { display:block; margin-bottom:var(--s-2); font-size:15px; font-weight:600; }
.field .hint { margin-top:var(--s-2); font-size:13px; color:var(--n-600); }

.input,select.input {
  width:100%; min-height:44px;
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--n-300); border-radius:var(--r-input);
  font-family:var(--font-sans); font-size:16px; color:var(--n-900);
  background:var(--n-0);
}
.input:focus { border-color:var(--blue-500); }
.input-mono { font-family:var(--font-mono); font-size:15px; }
select.input { appearance:none; padding-right:var(--s-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23676767' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px;
}
.form-grid { display:grid; grid-template-columns:1fr; gap:var(--s-4); }
@media (min-width:768px){ .form-grid-2 { grid-template-columns:1fr 1fr; } }
.form-actions { margin-top:var(--s-6); }

/* ---------- dải thông báo ---------- */
.banner {
  display:flex; gap:var(--s-2); align-items:flex-start;
  padding:var(--s-4); border-radius:var(--r-card);
  border:1px solid; font-size:15px;
}
.banner svg { flex:0 0 auto; margin-top:2px; }
.banner-success { background:var(--green-50); border-color:var(--green-100); color:var(--green-900); }
.banner-info    { background:var(--blue-50);  border-color:var(--blue-100);  color:var(--blue-900); }
.banner-warning { background:#FDF4E7;         border-color:#F0DCC0;          color:#7A4A0E; }
.banner-error   { background:#FBECEB;         border-color:#F2CFCC;          color:#8C2E27; }
.banner a { color:inherit; text-decoration:underline; }
.banner strong { font-weight:600; }

/* ---------- badge ---------- */
.badge {
  display:inline-block; border-radius:var(--r-badge);
  padding:var(--s-1) var(--s-2);
  font-size:13px; font-weight:600; line-height:1.4; white-space:nowrap;
}
.badge-success { background:var(--green-50); color:var(--green-900); }
.badge-warning { background:#FDF4E7; color:#7A4A0E; }
.badge-neutral { background:var(--n-50); color:var(--n-600); }
.badge-pill { border-radius:var(--r-pill); padding:var(--s-1) var(--s-4); }

/* ---------- bảng ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--n-100); border-radius:var(--r-card); background:var(--n-0); }
.table { width:100%; border-collapse:collapse; font-size:15px; }
.table th,.table td { padding:var(--s-2) var(--s-4); text-align:left; vertical-align:middle; }
.table th {
  font-size:13px; font-weight:600; color:var(--n-600);
  text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--n-100); background:var(--n-50);
  white-space:nowrap;
}
.table tbody tr + tr td { border-top:1px solid var(--n-100); }
.table td { min-height:44px; }
.table .cell-actions { display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; }

/* bảng nhãn – giá trị */
.kv { width:100%; border-collapse:collapse; font-size:16px; }
.kv th,.kv td { padding:var(--s-2) 0; text-align:left; vertical-align:top; }
.kv th { width:200px; font-weight:400; color:var(--n-600); }
.kv td { font-weight:600; word-break:break-word; }
.kv tr + tr th,.kv tr + tr td { border-top:1px solid var(--n-100); }

/* ---------- trạng thái rỗng ---------- */
.empty { text-align:center; padding:var(--s-10) var(--s-4); color:var(--n-600); }
.empty svg { color:var(--n-300); margin-bottom:var(--s-4); }
.empty h2 { color:var(--n-900); margin-bottom:var(--s-2); }

/* ---------- các bước ---------- */
.steps { list-style:none; counter-reset:step; margin:0; padding:0; }
.steps li { position:relative; padding-left:var(--s-10); counter-increment:step; }
.steps li + li { margin-top:var(--s-4); }
.steps li::before {
  content:counter(step);
  position:absolute; left:0; top:2px;
  width:24px; height:24px; border-radius:var(--r-pill);
  background:var(--blue-50); color:var(--blue-700);
  font-family:var(--font-mono); font-size:13px; font-weight:400;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- trang lỗi độc lập ---------- */
.errpage {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--s-10) var(--s-6); background:var(--n-50);
}
.errpage-card {
  max-width:520px; width:100%; text-align:center;
  background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--r-card);
  padding:var(--s-10);
}
.errpage-card svg { color:var(--warning); }
.errpage-card h1 { font-size:28px; margin:var(--s-6) 0 var(--s-2); }

/* ---------- trang đăng nhập / đăng ký ---------- */
.auth {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--s-10) var(--s-6); background:var(--n-50);
}
.auth-card {
  width:100%; background:var(--n-0);
  border:1px solid var(--n-100); border-radius:var(--r-card);
  padding:var(--s-10);
}
.auth-420 { max-width:420px; }
.auth-560 { max-width:560px; }
.auth-head { margin-bottom:var(--s-6); }
.auth-foot { margin-top:var(--s-6); font-size:15px; text-align:center; }

@media (max-width:640px){
  :root { --margin:24px; }
  .auth-card,.card-lg { padding:var(--s-6); }
  .admin { flex-direction:column; }
  .sidebar { width:100%; flex:0 0 auto; }
}