/* BoxStream · Quản trị bản quyền — giao diện kiểu Cài đặt hệ thống (macOS / iPadOS), thiết kế 3 (09/11/2026).
   Không font / thư viện ngoài; CSP style-src 'self' (không style nội tuyến). Bố cục theo khung nhìn (%, rem, clamp).
   Xem docs/THIET-KE-ADMIN.md: token màu, thành phần, cách thêm trang. */

/* =========================================================== token */
:root {
  color-scheme: light;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;
  --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 12px; --r-xl: 16px;

  /* nền / bề mặt (grouped background như iOS) */
  --bg: #f2f2f7;
  --bg-elev: #ffffff;
  --fill: rgba(120, 120, 128, .12);       /* nền nút xám, ô nhập */
  --fill-2: rgba(120, 120, 128, .08);
  --fill-strong: rgba(120, 120, 128, .2);
  --sep: rgba(60, 60, 67, .16);            /* đường kẻ mảnh */
  --sep-strong: rgba(60, 60, 67, .29);
  --label: #1c1c1e;
  --label-2: rgba(60, 60, 67, .72);
  --label-3: rgba(60, 60, 67, .5);
  --chrome: rgba(246, 246, 248, .78);     /* thanh bên / thanh công cụ mờ */
  --chrome-solid: #f6f6f8;
  --hover: rgba(0, 0, 0, .04);
  --press: rgba(0, 0, 0, .08);

  /* màu hệ thống */
  --blue: #007aff; --green: #34c759; --red: #ff3b30; --orange: #ff9500; --yellow: #ffcc00;
  --teal: #30b0c7; --indigo: #5856d6; --purple: #af52de; --pink: #ff2d55; --gray: #8e8e93; --mint: #00c7be;
  /* chữ trên nền nhạt (đủ tương phản) */
  --blue-t: #0062cc; --green-t: #1f8f3e; --red-t: #d70015; --orange-t: #c45500; --teal-t: #127a8c;
  --indigo-t: #3d3bb3; --purple-t: #8a2fb5; --gray-t: #5e5e63;
  --accent: var(--blue);
  --accent-t: var(--blue-t);
  --on-accent: #fff;
  --focus: 0 0 0 3px rgba(0, 122, 255, .35);

  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .04);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08);

  --series-1: #007aff; --series-2: #ff9500; --series-3: #ff3b30;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --side-w: clamp(14.5rem, 18vw, 16.5rem);
  --tabbar-h: 0px;
}

/* Tối: theo hệ thống (khi chưa chọn) hoặc chọn tay. Hai khối giống hệt nhau. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --bg-elev: #1c1c1e;
  --fill: rgba(118, 118, 128, .24); --fill-2: rgba(118, 118, 128, .16); --fill-strong: rgba(118, 118, 128, .32);
  --sep: rgba(84, 84, 88, .5); --sep-strong: rgba(84, 84, 88, .75);
  --label: #f2f2f7; --label-2: rgba(235, 235, 245, .66); --label-3: rgba(235, 235, 245, .42);
  --chrome: rgba(28, 28, 30, .72); --chrome-solid: #1c1c1e;
  --hover: rgba(255, 255, 255, .05); --press: rgba(255, 255, 255, .1);
  --blue: #0a84ff; --green: #30d158; --red: #ff453a; --orange: #ff9f0a; --yellow: #ffd60a;
  --teal: #40c8e0; --indigo: #5e5ce6; --purple: #bf5af2; --pink: #ff375f; --gray: #98989d; --mint: #63e6e2;
  --blue-t: #4da3ff; --green-t: #4cd97b; --red-t: #ff6961; --orange-t: #ffb340; --teal-t: #5ed3e8;
  --indigo-t: #8c8aff; --purple-t: #d38cff; --gray-t: #aeaeb2;
  --focus: 0 0 0 3px rgba(10, 132, 255, .5);
  --shadow-sm: none; --shadow: none;
  --shadow-lg: 0 20px 60px -10px rgba(0, 0, 0, .8), 0 0 0 .5px rgba(255, 255, 255, .12);
  --series-1: #0a84ff; --series-2: #ff9f0a; --series-3: #ff453a;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --bg-elev: #1c1c1e;
    --fill: rgba(118, 118, 128, .24); --fill-2: rgba(118, 118, 128, .16); --fill-strong: rgba(118, 118, 128, .32);
    --sep: rgba(84, 84, 88, .5); --sep-strong: rgba(84, 84, 88, .75);
    --label: #f2f2f7; --label-2: rgba(235, 235, 245, .66); --label-3: rgba(235, 235, 245, .42);
    --chrome: rgba(28, 28, 30, .72); --chrome-solid: #1c1c1e;
    --hover: rgba(255, 255, 255, .05); --press: rgba(255, 255, 255, .1);
    --blue: #0a84ff; --green: #30d158; --red: #ff453a; --orange: #ff9f0a; --yellow: #ffd60a;
    --teal: #40c8e0; --indigo: #5e5ce6; --purple: #bf5af2; --pink: #ff375f; --gray: #98989d; --mint: #63e6e2;
    --blue-t: #4da3ff; --green-t: #4cd97b; --red-t: #ff6961; --orange-t: #ffb340; --teal-t: #5ed3e8;
    --indigo-t: #8c8aff; --purple-t: #d38cff; --gray-t: #aeaeb2;
    --focus: 0 0 0 3px rgba(10, 132, 255, .5);
    --shadow-sm: none; --shadow: none;
    --shadow-lg: 0 20px 60px -10px rgba(0, 0, 0, .8), 0 0 0 .5px rgba(255, 255, 255, .12);
    --series-1: #0a84ff; --series-2: #ff9f0a; --series-3: #ff453a;
  }
}

/* =========================================================== nền tảng */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; font: 14px/1.45 var(--sans); color: var(--label); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent-t); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.muted { color: var(--label-2); }
.faint { color: var(--label-3); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* =========================================================== khởi động / spinner */
.boot { position: fixed; inset: 0; display: grid; place-items: center; }
.spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--fill-strong); border-top-color: var(--label-2);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================== đăng nhập */
.login { min-height: 100%; display: grid; place-items: center; padding: var(--s6); background: var(--bg); }
.login-card {
  width: min(100%, 24rem); display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(1.5rem, 5vw, 2.25rem); background: var(--bg-elev); border-radius: 18px; box-shadow: var(--shadow-lg);
}
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); margin-bottom: var(--s2); }
.login-title { font-size: 22px; font-weight: 700; }
.login-sub { color: var(--label-2); font-size: 13px; }
.login-foot { font-size: 12px; color: var(--label-3); text-align: center; }

/* biểu tượng ứng dụng */
.brand-mark {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none;
  color: #fff; background: linear-gradient(180deg, #3d9bff, #0066e0);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12);
}
.brand-mark.lg { width: 64px; height: 64px; border-radius: 15px; }
.brand-mark.lg svg { width: 32px; height: 32px; }

/* =========================================================== khung ứng dụng */
.app { display: flex; min-height: 100%; }
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh; width: var(--side-w); flex: none;
  display: flex; flex-direction: column; z-index: 40;
  background: var(--chrome);
  backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px);
  border-right: .5px solid var(--sep-strong);
}
.brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s4) var(--s3); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name { font-weight: 700; font-size: 15px; }
.brand-sub { font-size: 12px; color: var(--label-2); }
.nav { display: flex; flex-direction: column; gap: 1px; padding: var(--s1) var(--s3) var(--s3); flex: 1; overflow-y: auto; }
.nav-group { margin: var(--s4) var(--s2) var(--s1); font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.nav-link {
  display: flex; align-items: center; gap: var(--s3); padding: 5px var(--s2); border-radius: 7px;
  color: var(--label); font-weight: 500; font-size: 13.5px;
}
.nav-link:hover { background: var(--hover); text-decoration: none; }
.nav-link.active { background: var(--fill-strong); }
.nav-link .nav-txt { flex: 1; min-width: 0; }
.nav-badge {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center;
  font-size: 11.5px; font-weight: 600; background: var(--red); color: #fff;
}
/* ô biểu tượng màu (như Cài đặt hệ thống) */
.ico {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; flex: none;
  color: #fff; background: var(--gray);
}
.ico svg { width: 16px; height: 16px; }
.ico.lg { width: 36px; height: 36px; border-radius: 9px; }
.ico.lg svg { width: 20px; height: 20px; }
.ico.xl { width: 52px; height: 52px; border-radius: 12px; }
.ico.xl svg { width: 28px; height: 28px; }
.ico.blue { background: var(--blue); } .ico.green { background: var(--green); } .ico.red { background: var(--red); }
.ico.orange { background: var(--orange); } .ico.teal { background: var(--teal); } .ico.indigo { background: var(--indigo); }
.ico.purple { background: var(--purple); } .ico.pink { background: var(--pink); } .ico.gray { background: var(--gray); }
.ico.mint { background: var(--mint); } .ico.yellow { background: var(--yellow); color: #3a2c00; }
.sidebar-foot { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-top: .5px solid var(--sep); }
.who { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #a1a1a6, #7c7c80);
}
.who-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.who-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { font-size: 11.5px; color: var(--label-2); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s3);
  min-height: 52px; padding: var(--s2) clamp(1rem, 3vw, 2.5rem);
  padding-top: max(var(--s2), env(safe-area-inset-top));
  background: var(--chrome);
  backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px);
  border-bottom: .5px solid transparent; transition: border-color .2s;
}
body.scrolled .topbar { border-bottom-color: var(--sep-strong); }
.top-title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity .15s;
}
body.scrolled .top-title { opacity: 1; }
.jump { position: relative; width: clamp(11rem, 24vw, 18rem); }
.jump svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--label-3); pointer-events: none; }
.jump input[type=search] { padding-left: 30px; height: 32px; border-radius: 8px; }
.topbar-right { display: flex; gap: 2px; }
.icon-btn.nav-toggle { display: none; }
.view { width: 100%; max-width: 76rem; margin: 0 auto; padding: var(--s2) clamp(1rem, 3vw, 2.5rem) calc(var(--s10) + var(--tabbar-h)); outline: none; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 45; animation: fade .15s ease; }

/* tiêu đề lớn của trang */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) 0 var(--s5); }
.page-head-text { min-width: 0; flex: 1 1 18rem; }
.large-title { font-size: clamp(26px, 3.2vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.page-sub { margin-top: 4px; color: var(--label-2); font-size: 14px; }
.page-sub:empty { display: none; }
.page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.page-actions:empty { display: none; }
.back { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-t); font-size: 14px; margin-bottom: var(--s1); }
.back:hover { text-decoration: none; opacity: .75; }

/* thanh tab dưới (điện thoại) */
.tabbar { display: none; }

@media (max-width: 1000px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(82vw, 19rem); z-index: 50;
    transform: translateX(-102%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    background: var(--chrome-solid); box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: none; }
  .icon-btn.nav-toggle { display: inline-grid; }
}
@media (max-width: 700px) {
  :root { --tabbar-h: calc(56px + env(safe-area-inset-bottom)); }
  .jump { display: none; }
  .topbar { gap: var(--s2); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex;
    height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
    background: var(--chrome); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px);
    border-top: .5px solid var(--sep-strong);
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: inherit; font-size: 10.5px; font-weight: 500; color: var(--label-3); background: none; border: 0; cursor: pointer;
    position: relative;
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar svg { width: 23px; height: 23px; }
  .tabbar .active { color: var(--accent); }
  .tabbar .tab-badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; display: grid; place-items: center; }
  .sidebar-foot { padding-bottom: max(var(--s3), env(safe-area-inset-bottom)); }
}

/* =========================================================== nút */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  border-radius: 8px; border: 0; background: var(--fill); color: var(--label);
  cursor: pointer; transition: background .12s, opacity .12s, transform .08s; text-decoration: none;
}
.btn:hover { background: var(--fill-strong); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { flex: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 88%, #000); }
.btn-danger-outline, .btn-tinted-red { color: var(--red-t); background: color-mix(in srgb, var(--red) 12%, transparent); }
.btn-danger-outline:hover, .btn-tinted-red:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
.btn-tinted { color: var(--accent-t); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn-tinted:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.btn-ghost, .btn-plain { background: transparent; color: var(--accent-t); }
.btn-ghost:hover, .btn-plain:hover { background: var(--hover); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.btn-block { width: 100%; height: 40px; font-size: 15px; border-radius: 10px; }
.btn.loading { position: relative; color: transparent !important; }
.btn.loading > * { visibility: hidden; }
.btn.loading::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite;
}
.btn:not(.btn-primary):not(.btn-danger).loading::after { border-color: var(--fill-strong); border-top-color: var(--label-2); }

.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border-radius: 8px; border: 0; background: transparent; color: var(--label-2); cursor: pointer; transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--hover); color: var(--label); }
.icon-btn.sm { width: 24px; height: 24px; border-radius: 6px; }
.icon-btn.sm svg { width: 13px; height: 13px; }
.copy-btn { color: var(--label-3); }
.copy-btn.done { color: var(--green); }

/* =========================================================== form */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label { font-size: 13px; font-weight: 500; color: var(--label-2); }
.field .hint { font-size: 12px; color: var(--label-3); }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--label);
  background: var(--fill-2); border: .5px solid var(--sep-strong); border-radius: 8px;
  padding: 0 10px; height: 34px; transition: border-color .12s, box-shadow .12s, background .12s;
}
input:hover, select:hover, textarea:hover { background: var(--fill); }
select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
textarea.mono { font-family: var(--mono); font-size: 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); background: var(--bg-elev); }
input.invalid, textarea.invalid { border-color: var(--red); }
.form-error { color: var(--red-t); font-size: 13px; }
.form-grid { display: grid; gap: var(--s4); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.search { position: relative; flex: 1 1 14rem; min-width: min(100%, 12rem); max-width: 24rem; }
.search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--label-3); pointer-events: none; }
.search input[type=search] { padding-left: 30px; }

/* điều khiển phân đoạn (segmented control) */
.seg {
  display: inline-flex; gap: 0; padding: 2px; max-width: 100%; border-radius: 9px;
  background: var(--fill); overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--label);
  border: 0; background: transparent; padding: 4px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  position: relative;
}
.seg button + button::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: .5px; background: var(--sep-strong); }
.seg button[aria-pressed=true] + button::before, .seg button[aria-pressed=true]::before { display: none; }
.seg button[aria-pressed=true], .seg button[aria-selected=true] {
  background: var(--bg-elev); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); font-weight: 600;
}
html[data-theme="dark"] .seg button[aria-pressed=true] { background: #636366; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .seg button[aria-pressed=true] { background: #636366; } }
.seg .seg-n { color: var(--label-3); font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }

.choice { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice button {
  font: inherit; font-size: 13.5px; font-weight: 500; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 0; background: var(--fill); color: var(--label);
}
.choice button:hover { background: var(--fill-strong); }
.choice button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); }

/* công tắc */
.switch {
  position: relative; flex: none; width: 42px; height: 25px; border-radius: 999px; padding: 0; cursor: pointer;
  border: 0; background: var(--fill-strong); transition: background .2s;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .2s;
}
.switch[aria-checked=true] { background: var(--green); }
.switch[aria-checked=true] .knob { transform: translateX(17px); }
.switch:disabled { opacity: .6; cursor: progress; }
.switch.busy .knob { animation: pulse .8s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .4; } }

/* =========================================================== nhóm (grouped inset list) */
.stack { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.spacer { flex: 1; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.cols-wide { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s6); align-items: start; }
@media (max-width: 1100px) { .cols-wide { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

.group { min-width: 0; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 0 var(--s4) 6px; }
.group-title { font-size: 13px; font-weight: 500; color: var(--label-2); text-transform: none; }
.group-title.big { font-size: 17px; font-weight: 600; color: var(--label); }
.group-head a, .group-head .btn-plain { font-size: 13px; }
.group-foot { padding: 6px var(--s4) 0; font-size: 12.5px; color: var(--label-3); }
.group-body, .card {
  background: var(--bg-elev); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: .5px solid var(--sep); }
.card-head h2, .card-head h3 { font-size: 15px; }
.card-head .sub { display: block; font-size: 12.5px; color: var(--label-2); font-weight: 400; }
.card-body { padding: var(--s4); }

/* hàng trong nhóm */
.cells { list-style: none; margin: 0; padding: 0; }
.cell {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: 8px var(--s4); color: inherit;
}
.cell + .cell::before, .cell-sep::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--s4); height: .5px; background: var(--sep);
}
.cells.with-ico .cell + .cell::before { left: calc(var(--s4) + 26px + var(--s3)); }
.cells.with-ico-lg .cell + .cell::before { left: calc(var(--s4) + 36px + var(--s3)); }
a.cell, button.cell { width: 100%; font: inherit; text-align: left; border: 0; background: transparent; cursor: pointer; }
a.cell:hover, button.cell:hover { background: var(--hover); text-decoration: none; }
a.cell:active, button.cell:active { background: var(--press); }
.cell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cell-title { font-weight: 500; overflow-wrap: anywhere; }
.cell-sub { font-size: 12.5px; color: var(--label-2); overflow-wrap: anywhere; }
.cell-value { color: var(--label-2); text-align: right; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.cell-value.strong { color: var(--label); font-weight: 500; }
.cell-chev { color: var(--label-3); flex: none; display: inline-flex; }
.cell-label { flex: none; width: clamp(7.5rem, 32%, 12rem); color: var(--label); }
.cell.kv { align-items: flex-start; }
.cell.kv .cell-label { padding-top: 1px; }
.cell.kv .cell-value { flex: 1; }
.cell.danger .cell-title { color: var(--red-t); }
.cell.action .cell-title { color: var(--accent-t); }
.cell.kv .cell-value .mono { font-size: 12.5px; }
@media (max-width: 520px) {
  .cell.kv { flex-direction: column; align-items: stretch; gap: 2px; }
  .cell.kv .cell-label { width: auto; font-size: 12.5px; color: var(--label-2); }
  .cell.kv .cell-value { text-align: left; justify-content: flex-start; color: var(--label); }
}

/* lưới ô số liệu */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--s3); }
.tile {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); min-width: 0;
  background: var(--bg-elev); border-radius: var(--r-lg); border: 0; font: inherit; color: inherit; text-align: left;
  box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s;
}
button.tile, a.tile { cursor: pointer; }
button.tile:hover, a.tile:hover { box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; }
button.tile:active, a.tile:active { transform: scale(.99); }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.tile-label { font-size: 13px; color: var(--label-2); font-weight: 500; }
.tile-value { font-size: clamp(24px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.tile-value.sm { font-size: 18px; }
.tile-foot { font-size: 12px; color: var(--label-3); }
.tile .ico { width: 24px; height: 24px; border-radius: 7px; }
.tile .ico svg { width: 14px; height: 14px; }

/* thao tác nhanh */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s3); }
.quick-btn {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  background: var(--bg-elev); border-radius: var(--r-lg); border: 0; font: inherit; color: var(--label); text-align: left;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: background .12s;
}
.quick-btn:hover { background: color-mix(in srgb, var(--bg-elev) 92%, var(--label)); text-decoration: none; }
.quick-btn .q-main { display: flex; flex-direction: column; min-width: 0; }
.quick-btn .q-title { font-weight: 600; }
.quick-btn .q-sub { font-size: 12px; color: var(--label-2); }

/* =========================================================== nhãn trạng thái */
.pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 18px;
  background: color-mix(in srgb, var(--gray) 16%, transparent); color: var(--gray-t);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.no-dot::before { display: none; }
.pill.green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-t); }
.pill.red { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red-t); }
.pill.amber { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange-t); }
.pill.blue { background: color-mix(in srgb, var(--blue) 13%, transparent); color: var(--blue-t); }
.pill.violet { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple-t); }
.pill.teal { background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal-t); }
.pill.gray { background: color-mix(in srgb, var(--gray) 16%, transparent); color: var(--gray-t); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray); flex: none; }
.dot.green { background: var(--green); } .dot.red { background: var(--red); } .dot.amber { background: var(--orange); }
.dot.blue { background: var(--blue); } .dot.violet { background: var(--purple); }
.days-ok { color: var(--green-t); font-weight: 500; }
.days-warn { color: var(--orange-t); font-weight: 500; }
.days-bad { color: var(--red-t); font-weight: 500; }

/* =========================================================== thanh lọc / bảng */
.toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.toolbar select { width: auto; min-width: min(100%, 12rem); }
.toolbar .count-text { font-size: 13px; color: var(--label-2); }
.table-wrap { overflow-x: auto; position: relative; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--label-2);
  padding: 9px var(--s4) 7px; border-bottom: .5px solid var(--sep); white-space: nowrap;
}
.tbl td { padding: 10px var(--s4); border-bottom: .5px solid var(--sep); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tr.state-row:hover { background: none; }
.tbl tr.clickable { cursor: pointer; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.actions { width: 1%; text-align: right; white-space: nowrap; }
.tbl .note-cell { max-width: 15rem; color: var(--label-2); }
.tbl .detail-cell { max-width: 22rem; color: var(--label-2); overflow-wrap: anywhere; }
.tbl-sm td, .tbl-sm th { padding-top: 7px; padding-bottom: 7px; }
.keycell { display: inline-flex; align-items: center; gap: 2px; }
.keycode { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.subtext { display: block; font-size: 12px; color: var(--label-2); }
.state-row td { padding: 0; }
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--s10) var(--s4); color: var(--label-2); text-align: center; }
.state svg { color: var(--label-3); }
.state .state-title { color: var(--label); font-weight: 600; font-size: 15px; }
.state.small { padding: var(--s5) var(--s4); font-size: 13px; }
.state .btn { margin-top: var(--s2); }

/* bảng -> thẻ trên màn hẹp; ô mang data-label (admin.js chép từ tiêu đề cột) */
@media (max-width: 860px) {
  .table-wrap > .tbl thead { display: none; }
  .table-wrap > .tbl, .table-wrap > .tbl tbody, .table-wrap > .tbl tr, .table-wrap > .tbl td { display: block; width: 100%; }
  .table-wrap > .tbl tbody tr { position: relative; padding: var(--s3) var(--s4); }
  .table-wrap > .tbl tbody tr + tr::before { content: ""; position: absolute; top: 0; left: var(--s4); right: 0; height: .5px; background: var(--sep); }
  .table-wrap > .tbl tbody tr.state-row { padding: 0; }
  .table-wrap > .tbl td {
    position: relative; border: 0; padding: 2px 0 2px 40%; min-height: 0; text-align: right; max-width: none; overflow-wrap: anywhere;
  }
  .table-wrap > .tbl td::before {
    content: attr(data-label); position: absolute; left: 0; top: 3px; width: 38%; text-align: left; font-size: 12.5px; color: var(--label-2);
  }
  .table-wrap > .tbl td:first-child { padding: 0 0 var(--s1); text-align: left; font-size: 15px; }
  .table-wrap > .tbl td:first-child::before { display: none; }
  .table-wrap > .tbl td.actions { width: 100%; padding: var(--s2) 0 0; text-align: right; }
  .table-wrap > .tbl td.actions::before { display: none; }
  .table-wrap > .tbl td.nowrap { white-space: normal; }
  .table-wrap > .tbl td .ellipsis { white-space: normal; }
  .table-wrap > .tbl tr.state-row td { padding: 0; text-align: center; }
  .table-wrap > .tbl tr.state-row td::before { display: none; }
  .table-wrap > .tbl td.empty-cell { display: none; }
  .table-wrap > .tbl td .subtext { display: inline; margin-left: 6px; }
  .table-wrap > .tbl td.actions:has(> .icon-btn) { position: static; padding: 0; }
  .table-wrap > .tbl td.actions > .icon-btn { position: absolute; right: var(--s2); top: var(--s2); }
  .table-wrap > .tbl tr:has(td.actions > .icon-btn) td:first-child { padding-right: 2.5rem; }
}

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s4); border-top: .5px solid var(--sep); font-size: 13px; color: var(--label-2);
}
.pager-btns { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.pager-btns button {
  min-width: 30px; height: 28px; padding: 0 6px; font: inherit; font-size: 13px; font-weight: 500;
  border-radius: 7px; border: 0; background: transparent; color: var(--label); cursor: pointer;
}
.pager-btns button:hover:not(:disabled) { background: var(--fill); }
.pager-btns button[aria-current=page] { background: var(--accent); color: var(--on-accent); }
.pager-btns button:disabled { opacity: .35; cursor: default; }
.pager-btns .gap { padding: 0 4px; }

/* =========================================================== menu thả xuống */
.menu {
  position: fixed; z-index: 60; min-width: 14rem; padding: 5px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(1.8) blur(30px); -webkit-backdrop-filter: saturate(1.8) blur(30px);
  border-radius: 10px; box-shadow: var(--shadow-lg); animation: pop .12s ease;
}
.menu button {
  display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 6px 9px; border: 0; background: transparent;
  border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--label); text-align: left; cursor: pointer;
}
.menu button svg { color: var(--label-2); width: 16px; height: 16px; }
.menu button:hover, .menu button:focus-visible { background: var(--accent); color: #fff; box-shadow: none; }
.menu button:hover svg, .menu button:focus-visible svg { color: #fff; }
.menu button.danger, .menu button.danger svg { color: var(--red-t); }
.menu button.danger:hover, .menu button.danger:focus-visible { background: var(--red); color: #fff; }
.menu button.danger:hover svg { color: #fff; }
.menu hr { border: 0; border-top: .5px solid var(--sep-strong); margin: 4px 9px; }

/* =========================================================== biểu đồ */
.chart-wrap { position: relative; padding: var(--s3) var(--s4) var(--s3); }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg .grid-line { stroke: var(--sep); stroke-width: 1; }
.chart-svg .baseline { stroke: var(--sep-strong); stroke-width: 1; }
.chart-svg .axis-label { fill: var(--label-3); font-size: 11px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.chart-svg .s1 { fill: var(--series-1); } .chart-svg .s2 { fill: var(--series-2); } .chart-svg .s3 { fill: var(--series-3); }
.chart-svg .band { fill: var(--label); opacity: 0; transition: opacity .1s; }
.chart-svg .hit { fill: transparent; outline: none; }
.chart-svg g.day.on .band { opacity: .05; }
.chart-svg g.day.dim .bar { opacity: .4; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 12.5px; color: var(--label-2); margin-bottom: var(--s2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.swatch.s1 { background: var(--series-1); } .swatch.s2 { background: var(--series-2); } .swatch.s3 { background: var(--series-3); }
.chart-tip {
  position: fixed; z-index: 70; pointer-events: none; min-width: 11rem; padding: 8px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--label); box-shadow: var(--shadow-lg); font-size: 12px;
}
.chart-tip .tip-title { font-weight: 600; margin-bottom: 4px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: var(--s2); }
.chart-tip .tip-row b { margin-left: auto; font-variant-numeric: tabular-nums; padding-left: var(--s4); }
.chart-table { margin: 0 var(--s4) var(--s4); border: .5px solid var(--sep-strong); border-radius: var(--r); max-height: 20rem; overflow: auto; }
.chart-table .tbl td, .chart-table .tbl th { padding: 6px var(--s3); }

/* =========================================================== dòng sự kiện / dòng thời gian */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { position: relative; display: flex; gap: var(--s3); padding: 9px var(--s4); align-items: flex-start; }
.feed li + li::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--s4) + 8px + var(--s3)); height: .5px; background: var(--sep); }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--gray); }
.feed-dot.green { background: var(--green); } .feed-dot.red { background: var(--red); } .feed-dot.amber { background: var(--orange); }
.feed-dot.blue { background: var(--blue); } .feed-dot.violet { background: var(--purple); }
.feed .feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.feed .feed-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.feed .feed-act { font-weight: 500; }
.feed .feed-meta { font-size: 12px; color: var(--label-2); overflow-wrap: anywhere; }
.feed .feed-time { font-size: 12px; color: var(--label-3); white-space: nowrap; }
.feed.scroll { max-height: 30rem; overflow-y: auto; }

/* =========================================================== thông báo trong trang */
.banner {
  display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-lg);
  background: var(--bg-elev); color: var(--label); box-shadow: var(--shadow-sm);
}
.banner > svg { flex: none; margin-top: 1px; color: var(--blue); }
.banner.warn > svg { color: var(--orange); }
.banner.bad > svg { color: var(--red); }
.banner p { color: var(--label-2); }
.banner strong { color: var(--label); }
.banner a { font-weight: 500; }
.note-box { padding: var(--s3) var(--s4); font-size: 13px; color: var(--label-2); }
.callout { padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--fill-2); font-size: 13px; color: var(--label-2); }
.callout.danger { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red-t); }

/* cảnh báo cần chú ý (tổng quan) */
.alert-cell .ico { width: 26px; height: 26px; }

/* =========================================================== chi tiết key */
.key-hero { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s2) 0 var(--s5); }
.key-hero .ico { width: 56px; height: 56px; border-radius: 13px; }
.key-hero .ico svg { width: 30px; height: 30px; }
.key-hero-main { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.key-hero .keycode { font-size: clamp(20px, 3.2vw, 28px); letter-spacing: .04em; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.key-hero .row { gap: var(--s2); }
.action-bar { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s6); }
.note-text { white-space: pre-wrap; word-break: break-word; color: var(--label); }
.note-text.empty { color: var(--label-3); }
.fp { display: inline-flex; align-items: flex-start; gap: 2px; max-width: 100%; }
.fp code { font-size: 12px; word-break: break-all; line-height: 1.6; }
.ok-yes { color: var(--green-t); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.ok-no { color: var(--red-t); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }

/* =========================================================== gói trả phí */
.goi-thumb { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; flex: none; color: #fff; }
.goi-thumb svg { width: 20px; height: 20px; }
.goi-thumb.xl { width: 64px; height: 64px; border-radius: 15px; }
.goi-thumb.xl svg { width: 34px; height: 34px; }
.hue-0 { background: linear-gradient(180deg, #34c3a0, #109a7a); }
.hue-1 { background: linear-gradient(180deg, #5aa9ff, #0a6ce0); }
.hue-2 { background: linear-gradient(180deg, #b77cf0, #8a3fd1); }
.hue-3 { background: linear-gradient(180deg, #ffb340, #f08a00); }
.hue-4 { background: linear-gradient(180deg, #ff7a8a, #e5304f); }
.hue-5 { background: linear-gradient(180deg, #7d7bf2, #4d4bd1); }
.hue-6 { background: linear-gradient(180deg, #4fd0e6, #1aa3bd); }
.hue-7 { background: linear-gradient(180deg, #a0a0a8, #6d6d74); }
.goi-row .cell-value { flex: none; }
.goi-ctl { display: flex; align-items: center; gap: var(--s2); flex: none; }
.goi-ctl .han-sel { width: auto; height: 28px; font-size: 13px; }
.han-sel { width: auto; min-width: 0; flex: none; }
.goi-filter { padding: var(--s2) var(--s4); border-bottom: .5px solid var(--sep); }
.goi-filter .search { max-width: none; }
@media (max-width: 560px) {
  .goi-row { flex-wrap: wrap; }
  .goi-row .goi-ctl { width: 100%; justify-content: flex-end; padding-left: calc(36px + var(--s3)); }
}
.theme-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.theme-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 500; padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal-t); }
.theme-badge svg { width: 11px; height: 11px; }
.goi-hero { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s2) 0 var(--s5); }
.goi-hero-main { flex: 1 1 18rem; min-width: 0; }
.goi-hero .eyebrow { font-size: 13px; color: var(--label-2); }
.goi-hero h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.goi-hero p { color: var(--label-2); margin-top: 2px; }
.grant-form { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); }
.grant-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.grant-row input { flex: 1 1 12rem; min-width: 0; letter-spacing: .04em; font-family: var(--mono); }
.grant-row select { flex: 0 1 auto; width: auto; }
.grant-row .btn { height: 34px; }
.eyebrow { display: block; font-size: 12px; color: var(--label-2); font-weight: 500; }

/* =========================================================== chứng chỉ / gói module */
.h-mini { font-size: 12px; font-weight: 500; color: var(--label-2); margin: 0 0 var(--s2); }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px var(--s5); margin: 0; }
.dl dt { color: var(--label-2); font-size: 13px; }
.dl dd { margin: 0; min-width: 0; word-break: break-word; }
.dl-tight { gap: 3px var(--s4); }
.dl-tight dt { font-size: 12px; } .dl-tight dd { font-size: 13px; }
@media (max-width: 480px) { .dl { grid-template-columns: 1fr; gap: 2px; } .dl dd { margin-bottom: var(--s2); } }
.cert-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); padding: var(--s3) var(--s4); }
@media (max-width: 700px) { .cert-cols { grid-template-columns: 1fr; } }
.han { padding: var(--s3) var(--s4); }
.han-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: 6px; }
.han-days { font-size: 20px; font-weight: 700; }
.han-days.ok { color: var(--green-t); } .han-days.warn { color: var(--orange-t); } .han-days.bad { color: var(--red-t); }
.han-bar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.han-fill { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; }
.han-fill.ok { background: var(--green); } .han-fill.warn { background: var(--orange); } .han-fill.bad { background: var(--red); }
details.pem summary { cursor: pointer; padding: 10px var(--s4); font-size: 13.5px; color: var(--accent-t); user-select: none; list-style: none; }
details.pem summary::-webkit-details-marker { display: none; }
details.pem pre { margin: 0; padding: var(--s3) var(--s4); max-height: 16rem; overflow: auto; font-size: 11px; line-height: 1.5; border-top: .5px solid var(--sep); background: var(--fill-2); white-space: pre; }
.vers { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ver-tag { font-family: var(--mono); font-size: 11.5px; padding: 0 6px; border-radius: 5px; background: var(--fill); color: var(--label-2); white-space: nowrap; line-height: 18px; }
.ver-tag.cu { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange-t); }

/* =========================================================== hộp thoại (sheet) */
.modal-layer {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--s4) var(--s4); overflow-y: auto; background: rgba(0, 0, 0, .3); animation: fade .15s ease;
}
.modal {
  width: 100%; max-width: 30rem; background: var(--bg-elev); color: var(--label);
  border-radius: 14px; box-shadow: var(--shadow-lg); animation: pop .2s cubic-bezier(.2, .8, .2, 1);
}
.modal.lg { max-width: 44rem; }
.modal-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5) var(--s2); }
.modal-head h2 { font-size: 17px; font-weight: 600; flex: 1; }
.modal-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; }
.modal-icon svg { width: 18px; height: 18px; }
.modal-icon.danger { background: var(--red); }
.modal-icon.info { background: var(--blue); }
.modal-body { padding: var(--s2) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s4); color: var(--label-2); }
.modal-body strong { color: var(--label); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; padding: var(--s3) var(--s5) var(--s4); }
.modal-foot .btn { min-width: 6rem; height: 32px; }
@media (max-width: 560px) {
  .modal-layer { align-items: flex-end; padding: 0; }
  .modal, .modal.lg { max-width: none; border-radius: 14px 14px 0 0; animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
  .modal::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--fill-strong); margin: 6px auto 0; }
  .modal-foot { padding-bottom: max(var(--s4), env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; height: 44px; font-size: 15px; border-radius: 11px; }
}
.codes-box {
  font-family: var(--mono); font-size: 13px; line-height: 1.8; letter-spacing: .03em; max-height: 20rem; overflow: auto;
  padding: var(--s3) var(--s4); background: var(--fill-2); border-radius: var(--r); white-space: pre; user-select: all; color: var(--label);
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* =========================================================== toast */
.toast-root {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 90;
  display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--s3);
  min-width: min(16rem, 100%); max-width: 26rem; padding: var(--s3) var(--s4); border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
  backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px);
  color: var(--label); box-shadow: var(--shadow-lg); animation: toast-in .22s ease; cursor: pointer;
}
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.toast svg { flex: none; margin-top: 1px; }
.toast .toast-msg { flex: 1; word-break: break-word; }
.toast.success svg { color: var(--green); }
.toast.error svg { color: var(--red); }
.toast.info svg { color: var(--blue); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 700px) {
  .toast-root { left: var(--s3); right: var(--s3); top: calc(var(--s3) + env(safe-area-inset-top)); bottom: auto; align-items: stretch; flex-direction: column-reverse; }
  .toast { max-width: none; }
}

/* =========================================================== khung tải */
.skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--fill), var(--fill-2), var(--fill)); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin: 6px 0; }
.skel.w40 { width: 40%; } .skel.w60 { width: 60%; } .skel.w80 { width: 80%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.page-loading { display: grid; place-items: center; padding: 5rem 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================== bổ sung */
.large-title.keycode-title { font-family: var(--mono); font-size: clamp(22px, 3.4vw, 30px); letter-spacing: .03em; }
.page-sub .pill { vertical-align: 1px; }
.page-sub .copy-btn { vertical-align: middle; }
.kd-note-sub { color: var(--label-2); }
.modal .group-body { background: var(--fill-2); box-shadow: none; }
.tiles.t6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tiles.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1250px) { .tiles.t6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tiles.t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles.t6, .tiles.t3, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feed .keycode { font-weight: 500; }
@media (max-width: 560px) {
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .quick-btn { flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s3); }
  .quick-btn .q-sub { display: none; }
}
.goi-hero { flex-wrap: nowrap; align-items: center; padding: 0; }
@media (max-width: 560px) { .goi-thumb.xl { width: 48px; height: 48px; border-radius: 11px; } .goi-thumb.xl svg { width: 26px; height: 26px; } }
.group-body + .group-head { margin-top: var(--s4); }

/* =========================================================== cửa hàng (10/11/2026) */
.tiles.t5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1250px) { .tiles.t5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles.t5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile-value { overflow-wrap: anywhere; }
.strong-num { color: var(--label); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong-link { font-weight: 600; }
.ch-callout { margin: var(--s2) var(--s4) var(--s3); }
.ico-pad { width: 36px; flex: none; }
.cell .km-in { margin-top: var(--s2); }
.sep-top { border-top: .5px solid var(--sep); }

/* bảng sửa mức giá + xem trước */
.gia-khung { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.gia-sua { min-width: 0; }
.gia-xem { min-width: 0; padding: var(--s4); border-left: .5px solid var(--sep); background: var(--fill-2); align-self: stretch; }
@media (max-width: 1100px) {
  .gia-khung { grid-template-columns: 1fr; }
  .gia-xem { border-left: 0; border-top: .5px solid var(--sep); }
}
.gia-ds { display: flex; flex-direction: column; }
.gia-row {
  position: relative; display: grid; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "ten han tien" "ghi ghi ghi" "ctl ctl ctl";
}
.gia-row + .gia-row::before { content: ""; position: absolute; top: 0; left: var(--s4); right: 0; height: .5px; background: var(--sep); }
.gia-row.tat .gia-o { opacity: .55; }
.gia-o { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gia-o .lb { font-size: 12px; color: var(--label-2); font-weight: 500; }
.gia-ten { grid-area: ten; } .gia-han { grid-area: han; } .gia-tien { grid-area: tien; } .gia-ghi { grid-area: ghi; }
.gia-han-in { display: flex; gap: var(--s2); min-width: 0; }
.gia-han-in select { flex: 1 1 auto; min-width: 0; }
.gia-han-in .gia-ngay { flex: 0 0 34%; min-width: 4.5rem; }
.num-in { text-align: right; font-variant-numeric: tabular-nums; }
.gia-ctl { grid-area: ctl; display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.mini-sw { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--label-2); cursor: pointer; }
.mini-sw .switch { width: 36px; height: 21px; }
.mini-sw .switch .knob { width: 17px; height: 17px; }
.mini-sw .switch[aria-checked=true] .knob { transform: translateX(15px); }
.icon-btn.sm2 { width: 28px; height: 28px; border-radius: 7px; }
.icon-btn.sm2:disabled { opacity: .3; cursor: default; background: none; }
.icon-btn.danger { color: var(--red-t); }
.icon-btn.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-t); }
.gia-them { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); border-top: .5px solid var(--sep); }
@media (max-width: 640px) {
  .gia-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ten ten" "han tien" "ghi ghi" "ctl ctl"; }
  .gia-ctl { gap: var(--s2); flex-wrap: nowrap; }
  .mini-sw { gap: 6px; font-size: 12.5px; white-space: nowrap; }
  .gia-ctl .icon-btn.sm2 { width: 26px; flex: none; }
}
.xem-truoc-tieu { font-size: 12px; font-weight: 500; color: var(--label-2); margin-bottom: var(--s3); }
.xem-truoc-trong { padding: var(--s4); font-size: 13px; color: var(--label-2); text-align: center; border: 1px dashed var(--sep-strong); border-radius: var(--r); }
.xem-gia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--s2); }
.xt-the {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--s4) var(--s3) var(--s3);
  background: var(--bg-elev); border-radius: var(--r-lg); border: 1px solid var(--sep); min-width: 0;
}
.xt-the.noi-bat { border: 1.5px solid var(--blue); }
.xt-nhan { position: absolute; top: -9px; left: var(--s3); padding: 0 8px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; max-width: calc(100% - var(--s4)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-ten { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.xt-gia { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xt-gia small { font-size: 13px; font-weight: 600; color: var(--label-2); }
.xt-phu { font-size: 12px; color: var(--label-2); overflow-wrap: anywhere; }
.xt-nut { margin-top: var(--s2); text-align: center; padding: 4px 0; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 600; }
.xt-km { margin-bottom: var(--s3); padding: 6px var(--s3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange-t); font-size: 12.5px; font-weight: 600; }

/* thanh toán */
.ch-o { display: flex; gap: var(--s2); align-items: center; flex-wrap: nowrap; justify-content: flex-start; color: var(--label); text-align: left; }
.ch-o input { flex: 1 1 auto; min-width: 0; }
.ch-o .btn { flex: none; }
@media (max-width: 520px) { .ch-o { flex-wrap: wrap; } .ch-o .btn { width: 100%; } }
.qr-mau { display: grid; place-items: center; padding: var(--s4); min-height: 12rem; }
.qr-mau img { width: min(100%, 15rem); height: auto; border-radius: var(--r); background: #fff; }
.qr-mau .xem-truoc-trong { width: 100%; }
ol.buoc { margin: 0; padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 1.25rem); display: flex; flex-direction: column; gap: var(--s2); color: var(--label); }
ol.buoc li { padding-left: 2px; line-height: 1.5; }
ol.buoc li::marker { color: var(--label-2); font-weight: 600; }

/* thanh lưu (dính dưới khi có thay đổi) */
.save-bar { position: sticky; bottom: calc(var(--s4) + var(--tabbar-h)); z-index: 25; margin-top: var(--s6); display: flex; justify-content: center; pointer-events: none; }
.save-bar-in {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s2); width: min(100%, 36rem);
  padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px);
  box-shadow: var(--shadow-lg); animation: toast-in .2s ease;
}
.save-bar-txt { font-weight: 500; font-size: 13.5px; }
@media (max-width: 520px) { .save-bar-txt { display: none; } .save-bar-in .btn { flex: 1; height: 40px; } }