/* THUEBANKVN UI SYSTEM V146
   Shared design-system contract for Public / User / Admin.
   Theme files own colors and shell; this file owns tokens, component geometry,
   accessibility, responsive behavior and legacy adapters. */
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-vietnamese-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-vietnamese-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-vietnamese-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-vietnamese-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-vietnamese-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --tb-font:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tb-mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --tb-brand-950:#032d22;--tb-brand-900:#063d2f;--tb-brand-800:#075b45;--tb-brand-700:#087f5b;--tb-brand-600:#0b956b;--tb-brand-500:#10ad79;--tb-brand-400:#26c693;--tb-brand-100:#daf5e9;--tb-brand-50:#eefaf5;
  --tb-gold-700:#926b18;--tb-gold-500:#c69a35;--tb-gold-100:#fbf0d4;
  --tb-blue-600:#2563eb;--tb-red-600:#d13f4c;--tb-amber-600:#b7791f;
  --tb-ink:#12241e;--tb-ink-2:#33473f;--tb-muted:#71837b;--tb-faint:#98a7a1;
  --tb-canvas:#f4f7f5;--tb-surface:#fff;--tb-surface-2:#f8faf9;--tb-surface-3:#edf4f1;
  --tb-line:#dde7e2;--tb-line-strong:#cddbd5;
  --tb-r-1:8px;--tb-r-2:12px;--tb-r-3:16px;--tb-r-4:20px;--tb-r-5:26px;--tb-r-pill:999px;
  --tb-s-1:4px;--tb-s-2:8px;--tb-s-3:12px;--tb-s-4:16px;--tb-s-5:20px;--tb-s-6:24px;--tb-s-8:32px;--tb-s-10:40px;--tb-s-12:48px;
  --tb-shadow-1:0 1px 2px rgba(5,46,37,.04);--tb-shadow-2:0 8px 30px rgba(5,46,37,.06);--tb-shadow-3:0 18px 56px rgba(5,46,37,.10);--tb-shadow-modal:0 30px 100px rgba(2,31,24,.22);
  --tb-control-h:44px;--tb-control-h-lg:50px;--tb-content:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--tb-font);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;font-family:var(--tb-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit}
button,a,[role=button]{-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}
[hidden]{display:none!important}

/* Accessibility */
.ui-skip-link,.tb-skip-link{position:fixed;z-index:999999;left:12px;top:12px;translate:0 -160%;padding:10px 14px;border-radius:10px;background:#fff;color:#082d23;font-weight:800;box-shadow:var(--tb-shadow-3)}
.ui-skip-link:focus,.tb-skip-link:focus{translate:0}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(16,173,121,.22);outline-offset:2px}

/* Layout primitives */
.tb-container{width:min(calc(100% - 32px),var(--tb-content));margin-inline:auto}
.tb-stack{display:grid;gap:var(--tb-s-4)}.tb-stack-sm{display:grid;gap:var(--tb-s-2)}.tb-stack-lg{display:grid;gap:var(--tb-s-6)}
.tb-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tb-s-3)}
.tb-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--tb-s-4)}
.tb-span-12{grid-column:span 12}.tb-span-8{grid-column:span 8}.tb-span-6{grid-column:span 6}.tb-span-4{grid-column:span 4}.tb-span-3{grid-column:span 3}
.tb-scroll-x{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}

/* Typography */
.tb-kicker,.eyebrow,.vp-eyebrow,.vp-kicker{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.tb-title{margin:0;color:var(--tb-ink);font-size:clamp(26px,3vw,42px);line-height:1.08;letter-spacing:-.045em;font-weight:750}
.tb-subtitle{margin:0;color:var(--tb-muted);font-size:14px;line-height:1.7}
.tb-muted{color:var(--tb-muted)}.tb-mono{font-family:var(--tb-mono)}

/* Buttons: new contract + legacy adapters */
.tb-btn,.btn,.ui-btn,.vp-btn,.admin-btn{
  min-height:var(--tb-control-h);display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:0 16px;border:1px solid transparent;border-radius:var(--tb-r-2);font-family:var(--tb-font);font-size:13px;font-weight:750;line-height:1.15;text-decoration:none;cursor:pointer;white-space:nowrap;user-select:none;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease;
}
.tb-btn:disabled,.btn:disabled,.ui-btn:disabled,.vp-btn:disabled,.admin-btn:disabled{opacity:.52;cursor:not-allowed;box-shadow:none!important}
.tb-btn-primary,.btn-primary,.ui-btn-primary,.vp-btn-primary{background:var(--tb-brand-700)!important;border-color:var(--tb-brand-700)!important;color:#fff!important;box-shadow:0 6px 18px rgba(8,127,91,.14)}
.tb-btn-primary:hover,.btn-primary:hover,.ui-btn-primary:hover,.vp-btn-primary:hover{background:var(--tb-brand-800)!important;border-color:var(--tb-brand-800)!important;color:#fff!important}
.tb-btn-secondary,.btn-secondary,.ui-btn-secondary,.vp-btn-secondary{background:var(--tb-surface)!important;border-color:var(--tb-line)!important;color:var(--tb-ink-2)!important;box-shadow:var(--tb-shadow-1)}
.tb-btn-secondary:hover,.btn-secondary:hover,.ui-btn-secondary:hover,.vp-btn-secondary:hover{background:var(--tb-surface-2)!important;border-color:var(--tb-line-strong)!important;color:var(--tb-ink)!important}
.tb-btn-danger,.btn-danger{background:#fff0f1!important;border-color:#f4c9ce!important;color:#b52e3b!important}.tb-btn-ghost,.btn-ghost{background:transparent!important;border-color:transparent!important;color:var(--tb-ink-2)!important}
.tb-icon-btn,.icon-btn{width:var(--tb-control-h);height:var(--tb-control-h);padding:0;display:inline-grid;place-items:center;border:1px solid var(--tb-line);border-radius:var(--tb-r-2);background:var(--tb-surface);color:var(--tb-ink-2)}

/* Forms */
.tb-field,.form-group,.vp-field{display:grid;gap:7px;min-width:0}.tb-label,.form-group>label,.vp-label{color:var(--tb-ink-2);font-size:11px;font-weight:750;letter-spacing:.01em}
.tb-help,.form-text,.vp-help,.vp-field>small{color:var(--tb-muted);font-size:10px;line-height:1.55}
.tb-input,.tb-select,.tb-textarea,.form-control,.form-select,.vp-input,.vp-select,
input.form-control,select.form-control,textarea.form-control{
  width:100%;min-width:0;min-height:var(--tb-control-h);padding:10px 13px;border:1px solid var(--tb-line-strong);border-radius:var(--tb-r-2);background:var(--tb-surface);color:var(--tb-ink);box-shadow:none;outline:0;
}
textarea.tb-textarea,textarea.form-control,textarea.vp-input{min-height:112px;resize:vertical;line-height:1.55}
select.tb-select,select.form-control,select.vp-select{appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,#7b8d85 50%),linear-gradient(135deg,#7b8d85 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.tb-input:focus,.tb-select:focus,.tb-textarea:focus,.form-control:focus,.form-select:focus,.vp-input:focus,.vp-select:focus{border-color:var(--tb-brand-600)!important;box-shadow:0 0 0 3px rgba(11,149,107,.10)!important}
::placeholder{color:#9aa9a3!important;opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--tb-brand-700)}
.tb-check,.form-check{display:flex;align-items:flex-start;gap:9px}.tb-check input,.form-check-input{width:17px;height:17px;margin-top:1px}
.tb-input-group,.input-group{display:flex;align-items:stretch;min-width:0}.tb-input-group>*:not(:first-child),.input-group>*:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important}.tb-input-group>*:not(:last-child),.input-group>*:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}

/* Cards / panels / metrics */
.tb-card,.card,.panel,.vp-card,.vp-panel,.metric,.vp-metric{min-width:0;border:1px solid var(--tb-line);border-radius:var(--tb-r-4);background:var(--tb-surface);box-shadow:var(--tb-shadow-1)}
.tb-card{padding:var(--tb-s-5)}
.tb-card-head,.card-header,.panel-head,.vp-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--tb-line);background:transparent}
.tb-card-body,.card-body,.panel-body{padding:18px}.tb-card-foot,.card-footer,.panel-foot{padding:14px 18px;border-top:1px solid var(--tb-line);background:var(--tb-surface-2)}
.tb-card h1,.tb-card h2,.tb-card h3,.card h1,.card h2,.card h3,.panel h1,.panel h2,.panel h3{color:inherit}
.metric,.vp-metric{padding:16px}.metric-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.metric-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px}

/* Tables */
.tb-table-wrap,.table-responsive,.vp-table-wrap,.table-wrap{width:100%;max-width:100%;overflow:auto;border:1px solid var(--tb-line);border-radius:var(--tb-r-3);background:var(--tb-surface)}
.tb-table,.table,.vp-table{width:100%;border-collapse:separate;border-spacing:0;color:var(--tb-ink-2);font-size:12px}
.tb-table th,.table th,.vp-table th{padding:11px 13px;border-bottom:1px solid var(--tb-line);background:var(--tb-surface-2);color:var(--tb-muted);font-size:9px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;text-align:left;white-space:nowrap}
.tb-table td,.table td,.vp-table td{padding:12px 13px;border-bottom:1px solid #e8efeb;vertical-align:middle}.tb-table tr:last-child td,.table tr:last-child td,.vp-table tr:last-child td{border-bottom:0}
.tb-table tbody tr:hover,.table tbody tr:hover,.vp-table tbody tr:hover{background:rgba(8,127,91,.025)}

/* Status / badges */
.tb-badge,.badge,.vp-badge,.status,.status-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:25px;padding:4px 9px;border-radius:var(--tb-r-pill);border:1px solid var(--tb-line);background:var(--tb-surface-2);color:var(--tb-ink-2);font-size:9px;font-weight:800;line-height:1;text-decoration:none}
.badge-success,.tb-badge-success,.status-success{border-color:#c8eadc;background:#eaf8f2;color:#087f5b}.badge-warning,.tb-badge-warning,.status-warning{border-color:#f1deb5;background:#fff7e6;color:#976a13}.badge-danger,.tb-badge-danger,.status-danger{border-color:#f1c8cd;background:#fff0f2;color:#b62f3d}.badge-info,.tb-badge-info{border-color:#cbdcfb;background:#eef4ff;color:#315ca8}

/* Alerts / toasts */
.tb-alert,.alert,.vp-alert,.admin-alert{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--tb-line);border-radius:var(--tb-r-3);background:var(--tb-surface);color:var(--tb-ink-2)}
.alert-success,.tb-alert-success{border-color:#c7eadb;background:#effaf5;color:#0a684c}.alert-warning,.tb-alert-warning{border-color:#f1dfb7;background:#fff9eb;color:#805b14}.alert-danger,.alert-error,.tb-alert-danger{border-color:#f1c9ce;background:#fff2f3;color:#9e2c36}.alert-info,.tb-alert-info{border-color:#ceddf8;background:#f1f6ff;color:#355b99}
.toast-stack{position:fixed;z-index:100000;top:16px;right:16px;display:grid;gap:10px;width:min(390px,calc(100vw - 24px));pointer-events:none}.toast-item{pointer-events:auto;display:grid;grid-template-columns:38px minmax(0,1fr) 32px;gap:10px;align-items:start;padding:12px;border:1px solid var(--tb-line);border-radius:16px;background:#fff;color:#19332a;box-shadow:var(--tb-shadow-3)}.toast-item p{margin:3px 0 0;color:#6f817a;font-size:10px;line-height:1.45}.toast-item button{border:0;background:transparent;color:#809189}

/* Tabs / segmented controls */
.tb-tabs,.nav-tabs,.vp-tabs{display:flex;align-items:center;gap:6px;max-width:100%;overflow-x:auto;padding:4px;border:1px solid var(--tb-line);border-radius:var(--tb-r-3);background:var(--tb-surface-2);scrollbar-width:none}.tb-tabs::-webkit-scrollbar,.nav-tabs::-webkit-scrollbar,.vp-tabs::-webkit-scrollbar{display:none}
.tb-tab,.nav-tabs .nav-link,.vp-tab{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--tb-muted)!important;font-size:10px;font-weight:750;white-space:nowrap;text-decoration:none}.tb-tab.is-active,.tb-tab[aria-selected=true],.nav-tabs .nav-link.active,.vp-tab.is-active{background:var(--tb-surface)!important;color:var(--tb-brand-700)!important;box-shadow:var(--tb-shadow-1)}

/* Dropdowns */
.tb-dropdown,.dropdown{position:relative}.tb-dropdown-menu,.dropdown-menu{z-index:8000;min-width:190px;padding:6px;border:1px solid var(--tb-line);border-radius:14px;background:var(--tb-surface);box-shadow:var(--tb-shadow-3)}
.tb-dropdown-menu a,.dropdown-menu a,.dropdown-item{display:flex;align-items:center;gap:9px;min-height:38px;padding:8px 10px;border-radius:9px;color:var(--tb-ink-2);font-size:11px;font-weight:650;text-decoration:none}.tb-dropdown-menu a:hover,.dropdown-menu a:hover,.dropdown-item:hover{background:var(--tb-surface-2);color:var(--tb-ink)}

/* Modal contract. Existing product modals can keep their own classes. */
.tb-modal{position:fixed;z-index:50000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(6,24,19,.52)}.tb-modal[hidden]{display:none!important}.tb-modal-dialog{width:min(620px,100%);max-height:min(760px,calc(100dvh - 36px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--tb-line);border-radius:24px;background:var(--tb-surface);box-shadow:var(--tb-shadow-modal)}
.tb-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--tb-line)}.tb-modal-body{min-height:0;overflow:auto;padding:20px}.tb-modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--tb-line);background:var(--tb-surface-2)}

/* Pagination */
.pagination{display:flex;align-items:center;gap:5px;padding:0;margin:16px 0;list-style:none}.pagination .page-link,.pagination a{min-width:36px;height:36px;display:grid;place-items:center;padding:0 9px;border:1px solid var(--tb-line);border-radius:10px;background:var(--tb-surface);color:var(--tb-ink-2);font-size:10px;font-weight:750;text-decoration:none}.pagination .active .page-link,.pagination .page-link.active{background:var(--tb-brand-700);border-color:var(--tb-brand-700);color:#fff}

/* Empty / skeleton / divider */
.tb-empty,.vp-empty{padding:34px 20px;text-align:center;border:1px dashed var(--tb-line-strong);border-radius:var(--tb-r-4);background:var(--tb-surface-2);color:var(--tb-muted)}
.tb-divider{height:1px;background:var(--tb-line);border:0;margin:var(--tb-s-4) 0}
.tb-skeleton{border-radius:8px;background:linear-gradient(90deg,#edf2ef 25%,#f8faf9 50%,#edf2ef 75%);background-size:200% 100%;animation:tb-skeleton 1.25s linear infinite}@keyframes tb-skeleton{to{background-position:-200% 0}}

/* Utility compatibility / content safety */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.min-w-0{min-width:0}.w-full{width:100%}.overflow-x-auto{overflow-x:auto}.text-right{text-align:right}.text-center{text-align:center}
pre,code,.font-mono{font-family:var(--tb-mono)}pre{max-width:100%;overflow:auto}

/* Font Awesome must never inherit the UI font. */
.fa,.fas,.far,.fal,.fat,.fab,.fa-solid,.fa-regular,.fa-brands,[class^="fa-"]:before,[class*=" fa-"]:before{font-family:var(--fa-style-family,"Font Awesome 6 Free")}
.fa-solid,.fas{font-family:"Font Awesome 6 Free"!important;font-weight:900!important}.fa-regular,.far{font-family:"Font Awesome 6 Free"!important;font-weight:400!important}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"!important;font-weight:400!important}

/* Navigation motion policy: user explicitly requested static navigation. */
:where(.landing-nav,.landing-links,.landing-mobile-nav,.tbv145-sidebar,.tbv145-nav,.tbv145-mobile-nav,.main-sidebar,.main-header,.nav-sidebar,.navbar) *,
:where(.landing-nav,.landing-links,.landing-mobile-nav,.tbv145-sidebar,.tbv145-nav,.tbv145-mobile-nav,.main-sidebar,.main-header,.nav-sidebar,.navbar){animation:none!important;transition:none!important}
:where(.tbv145-nav-item,.tbv145-mobile-nav a,.tbv145-mobile-nav button,.main-sidebar .nav-link,.landing-nav a):hover{transform:none!important}

@media(max-width:900px){.tb-span-8,.tb-span-6,.tb-span-4,.tb-span-3{grid-column:span 12}.tb-grid{gap:12px}}
@media(max-width:640px){:root{--tb-control-h:43px}.tb-container{width:min(calc(100% - 24px),var(--tb-content))}.tb-card{padding:15px}.toast-stack{top:max(10px,env(safe-area-inset-top));right:12px;left:12px;width:auto}.tb-modal{align-items:end;padding:0}.tb-modal-dialog{width:100%;max-height:calc(100dvh - max(12px,env(safe-area-inset-top)));border-radius:22px 22px 0 0;border-bottom:0}.tb-modal-foot{padding-bottom:max(14px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}