/* Final portal adjustments: jade surfaces, gold outlines and compact navigation. */
:root body .sidebar nav a[aria-current='page'],
:root body .sidebar-links a[aria-current='page'],
:root body .more-grid a[aria-current='page'] {
  background: linear-gradient(120deg, #276a537a, #14513d59) !important;
  border: 1px solid #d7b46b80; color: #fff0cd !important;
  box-shadow: inset 3px 0 0 #bce2bc, inset 0 1px 0 #ffe2a314;
}
:root body .sidebar nav a[aria-current='page'] .nm-name,
:root body .sidebar nav a[aria-current='page'] small { color: #fff0cd !important; text-shadow: none; }
:root body .sidebar nav a[aria-current='page'] .ico {
  background: #0a3c3280; color: #ffe2a3 !important;
  border: 1px solid #e3b35a55; box-shadow: none;
}
:root body .sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
:root body .sidebar > * { flex-shrink: 0; }
:root body .sidebar .sidebar-feature-nav { flex: 0 0 auto; overflow: visible; }
:root body .sidebar .rail-title { margin: 6px 8px 2px; padding: 5px 4px; }
:root body .sidebar-links { margin-top: 5px; padding-top: 5px; }
:root body .sidebar-links a { min-height: 42px; padding: 7px 8px; }
:root body .sidebar .ml-promo {
  display: block; height: 112px; margin: 8px 2px 3px; padding: 0;
  border-radius: 12px; border-color: #e3b35a80;
}
:root body .sidebar .ml-promo-art {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 36%;
  opacity: .66;
}
:root body .sidebar .ml-promo-copy {
  inset: 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; background: linear-gradient(90deg, #062b27ed, #062b2780 75%, #062b2733);
}
:root body .sidebar .ml-promo-copy b { font-size: .94rem; }
:root body .sidebar .ml-promo-copy p { margin: 3px 0 6px; font-size: .71rem; line-height: 1.35; max-width: 28ch; }
:root body .sidebar .ml-promo-copy .btn { min-height: 30px; padding: 4px 9px; font-size: .73rem; }
@media (max-height: 760px) and (min-width: 981px) {
  :root body .sidebar { top: 10px; height: calc(100dvh - 20px); padding: 12px 10px; }
  :root body .sidebar nav a { min-height: 42px; gap: 8px; }
  :root body .sidebar .lb-xu { margin-block: 8px; padding: 9px; }
  :root body .sidebar .ml-promo { height: 96px; }
  :root body .sidebar .ml-motto { margin-top: 8px; }
}
/* The tags remain live-updated by pack.js, but read as plain header notes. */
:root body .page-head .pack-notes .badge {
  padding: 0; min-height: 0; border: 0 !important; border-radius: 0;
  background: transparent !important; box-shadow: none !important;
  color: #ffe2a3; font-size: inherit; line-height: inherit; letter-spacing: normal;
  text-transform: none; white-space: normal;
}
:root body .page-head .pack-notes .coin { font-size: inherit; }
/* Doubled cards use the ordinary package surface and spacing. Only tiny lights differ. */
:root body #pack-root .ev-pkg.is-x2 {
  border: 1px solid var(--gold-line) !important;
  background: var(--surface) !important; box-shadow: var(--gold-frame) !important;
}
:root body #pack-root .ev-x2-seal { display: none; }
:root body #pack-root .ev-x2-sheen { position: absolute; inset: 2px; overflow: hidden; border-radius: inherit; z-index: 2; pointer-events: none; }
:root body #pack-root .ev-x2-shimmer {
  position: absolute; display: block; inset: 0; transform: none; opacity: .25; background:
    radial-gradient(circle at 9% 14%, #ffe38b 0 1px, transparent 2px),
    radial-gradient(circle at 86% 23%, #ffd665 0 1px, transparent 2px),
    radial-gradient(circle at 95% 53%, #ffe38b 0 1.5px, transparent 3px),
    radial-gradient(circle at 12% 73%, #ffd665 0 1px, transparent 2px),
    radial-gradient(circle at 76% 91%, #ffe38b 0 1.5px, transparent 3px),
    radial-gradient(circle at 44% 5%, #ffd665 0 1px, transparent 2px);
}
@media (prefers-reduced-motion: no-preference) {
  :root body #pack-root .ev-pkg.is-x2.is-reveal .ev-x2-shimmer {
    animation: pack-light-speckles 2.4s ease-in-out 3;
  }
}
@keyframes pack-light-speckles {
  0%, 100% { opacity: .25; }
  35% { opacity: .8; }
  65% { opacity: .12; }
}
@media (prefers-reduced-motion: reduce) {
  :root body #pack-root .ev-x2-shimmer { animation: none !important; opacity: .35; }
}
/* Keep all five shortcuts inside the viewport, including with larger text. */
@media (max-width: 980px) {
  :root body { --tabbar-h: 76px; }
  :root body .tabbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    box-sizing: border-box; padding: 4px 2px; gap: 0;
    border: 1px solid #d7b46b80 !important;
    box-shadow: 0 6px 22px #001b1840;
  }
  :root body .tabbar a, :root body .tabbar .tab-more {
    min-width: 0; min-height: 44px; width: 100%; height: 100%;
    box-sizing: border-box; padding: 2px; gap: 4px; overflow: hidden;
    color: #c7dfd7; border-radius: 15px;
  }
  :root body .tabbar .tab-label {
    display: block; width: 100%; min-width: 0; line-height: 1.2;
    font-size: .72rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  :root body .tabbar .ico, :root body .more-grid .ico {
    flex-shrink: 0; box-sizing: border-box; color: #85dfca;
    background: linear-gradient(145deg, #155b4b99, #082e2dcc) !important;
    border: 1px solid #d7b46b59; box-shadow: inset 0 1px 0 #ffe2a31a !important;
  }
  :root body .tabbar .ico { width: 36px; height: 32px; border-radius: 11px; }
  :root body .tabbar a[aria-current='page'], :root body .tabbar .tab-more[aria-expanded='true'] {
    color: #ffe2a3; background: #18544366;
  }
  :root body .tabbar a[aria-current='page'] .ico,
  :root body .tabbar .tab-more[aria-expanded='true'] .ico,
  :root body .more-grid a[aria-current='page'] .ico {
    color: #ffe2a3; border-color: #e3b35ac9;
    background: linear-gradient(145deg, #23765eb3, #0b3a34e6) !important;
    box-shadow: 0 0 12px #76d9bb22, inset 0 1px 0 #ffe2a333 !important;
  }
  :root body .tabbar a:focus-visible, :root body .tabbar button:focus-visible,
  :root body .more-grid a:focus-visible {
    outline: 2px solid #ffe2a3; outline-offset: -2px;
  }
  :root body .more-panel {
    min-width: 0; box-sizing: border-box; overflow-x: hidden;
    border: 1px solid #d7b46ba6 !important;
    max-height: calc(100vh - var(--tabbar-h) - 40px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--tabbar-h) - 40px - env(safe-area-inset-bottom));
    padding: 12px;
  }
  :root body .more-head { gap: 8px; }
  :root body .more-head b { min-width: 0; overflow-wrap: anywhere; }
  :root body .more-head .icon-btn { flex-shrink: 0; width: 44px; height: 44px; }
  :root body .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  :root body .more-grid a {
    min-width: 0; box-sizing: border-box; padding: 26px 8px 12px;
    background: linear-gradient(145deg, #11473ab3, #082e2bc9);
    border: 1px solid #d7b46b66; color: #e0eee7;
    box-shadow: inset 0 1px 0 #ffe2a326;
  }
  :root body .more-grid .nm {
    min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
  }
  :root body .more-grid .tag {
    font-size: 10px; line-height: 1.2; padding: 3px 6px;
    background: #164d40; color: #ffe2a3; border: 1px solid #e3b35a80;
  }
}
@media (max-width: 600px) {
  :root body .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A single compact notice stays clear of mobile navigation. */
:root body .toasts { pointer-events: none; }
:root body .toast {
  position: relative; pointer-events: auto; padding: 11px 48px 11px 14px;
  border: 1px solid #d7b46b80; border-left: 3px solid #85dfca;
  max-height: 30vh; overflow: auto; overflow-wrap: anywhere;
}
:root body .toast.err { border-left-color: #ff8791; }
:root body .toast span { display: block; font-size: .86rem; line-height: 1.4; }
:root body .toast b { font-size: .92rem; margin-bottom: 3px; }
:root body .toast-close {
  position: absolute; right: 3px; top: 3px; width: 40px; height: 40px;
  border: 0; background: transparent; color: #ffe2a3; font-size: 24px; cursor: pointer;
}
:root body .hs-confirm-actions { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
:root body .hs-confirm p { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 980px) {
  :root body .toasts {
    top: calc(12px + env(safe-area-inset-top)); bottom: auto;
    right: 12px; width: min(360px, calc(100% - 24px));
  }
}
/* Preserve native keyboard, form and assistive-technology behavior. */
:root body select {
  color-scheme: dark; accent-color: #e3b35a; background-color: #062a27 !important;
  color: #fff0cd; border-color: #e3b35a80 !important;
}
:root body select option, :root body select optgroup { background: #062a27; color: #fff0cd; }
:root body select option:checked { background: #185443; color: #ffe2a3; }
:root body select:focus-visible { outline: 2px solid #ffe2a3; outline-offset: 2px; }
@supports (appearance: base-select) {
  :root body select:not([multiple]):not([size]), ::picker(select) { appearance: base-select; }
  ::picker(select) {
    background: #062a27; color: #fff0cd; border: 1px solid #e3b35a99;
    border-radius: 10px; padding: 5px; box-shadow: 0 10px 28px #001b1880;
  }
  :root body select:not([multiple]):not([size]) { background-image: none; }
  :root body select option { padding: 8px 10px; border-radius: 6px; }
  :root body select option:hover, :root body select option:focus { background: #185443; }
  :root body select::picker-icon { color: #ffe2a3; }
}
@media (forced-colors: active) {
  :root body .sidebar nav a[aria-current='page'], :root body .sidebar-links a[aria-current='page'],
  :root body #pack-root .ev-pkg.is-x2, :root body select, ::picker(select) {
    background: Canvas !important; color: CanvasText !important; border-color: Highlight !important;
    box-shadow: none !important;
  }
  :root body #pack-root .ev-x2-shimmer { display: none; }
}

/* Trạng thái dùng chung: không che nội dung hoặc làm trang nhảy khi thao tác. */
[hidden] { display: none !important; }
html.modal-open { overflow: hidden; }
:root body :focus-visible { outline: 2px solid #c7efd8; outline-offset: 3px; }
:root body #main:focus { outline: none; }
:root body .btn, :root body .pill, :root body .icon-btn, :root body .tab { touch-action: manipulation; }
:root body .icon-btn { min-width: 44px; min-height: 44px; }
:root body .btn { white-space: normal; text-align: center; }
:root body .btn[aria-busy='true'], :root body form[aria-busy='true'] [type='submit'] { cursor: progress; }
:root body .btn[aria-busy='true']::after, :root body form[aria-busy='true'] [type='submit']::after {
  content: ''; display: inline-block; flex: 0 0 14px; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
:root body .form-error { scroll-margin-block: 120px; }
:root body .form-error:not(:empty) { color: #ffcebf; }
:root body .search-results { z-index: 75; max-height: min(340px, 55dvh); background: #09362ff5 !important; }
:root body .search-results a { min-height: 44px; font-family: var(--f-read); font-weight: 500; }
:root body .search-results a[data-active='true'] { background: #74c6a52b; color: #fff1cf; }
:root body .appbar { flex-wrap: wrap; }
:root body .appbar .search { min-width: 180px; flex: 1 1 250px; }
:root body .table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
:root body .grid > *, :root body .field { min-width: 0; }
:root body .ft-card { background: #09362ff5 !important; }
@media (max-width: 1400px) { :root body .appbar .ml-date { display: none; } }
@media (max-width: 860px) {
  :root body .topbar { height: auto; padding-top: max(10px, env(safe-area-inset-top)); }
  :root body .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  :root body .topbar-inner > .spacer { display: none; }
  :root body .topbar .brand { min-width: 0; gap: 8px; }
  :root body .topbar .brand span { min-width: 0; font-size: 1.15rem; line-height: 1.2; white-space: normal; }
  :root body .topbar .brand .seal { width: 32px; height: 34px; font-size: 1.2rem; }
  :root body .topbar .btn--sm { min-height: 42px; padding-inline: 10px; }
  :root body .topbar .nav {
    display: flex; grid-column: 1 / -1; width: 100%; min-width: 0; gap: 4px; margin-left: 0;
    overflow-x: auto; padding: 4px 0 8px; border-top: 1px solid #c4d7bd1f; scrollbar-width: thin;
  }
  :root body .topbar .nav a { flex-shrink: 0; min-height: 40px; padding: 8px 12px; font-size: .85rem; }
}
@media (max-width: 600px) {
  :root body .appbar .search { display: block; order: 5; flex-basis: 100%; }
  :root body .search input, :root body .input, :root body .select, :root body .textarea { font-size: 16px; }
  :root body .search-results { top: calc(100% + 6px); }
  :root body .btn--sm { min-height: 42px; }
  :root body .modal-back { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
}
.perf-lite body .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: #082e2be8 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  :root body *, :root body *::before, :root body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}