/* NHIP Adaptive UI v1 — additive visual and responsive refinement.
   Giữ nguyên logic giao dịch, dữ liệu, định tuyến và cấu trúc trang. */
:root{
  --nhip-ui-radius:16px;
  --nhip-ui-radius-sm:11px;
  --nhip-ui-gap:clamp(10px,1.2vw,16px);
  --nhip-ui-focus:color-mix(in srgb,var(--brand,#14c29a) 32%,transparent);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}
body{min-width:0;overflow-wrap:break-word}
button,input,select,textarea{font:inherit;min-width:0}
button,a,input,select,textarea,[tabindex]:not([tabindex="-1"]){-webkit-tap-highlight-color:transparent}
:where(button,a,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:3px solid var(--nhip-ui-focus);outline-offset:2px
}
img,svg,canvas,video{max-width:100%}
#view,.main,.shell,.panel,.card,.box,.section,.tw{min-width:0}
.main{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
#view{width:100%;max-width:100%}
:where(.panel,.index-card,.card,.box,.stat-card,.widget,.chart-card,.trade-card,.order-card){
  border-radius:var(--nhip-ui-radius);
}
:where(.panel,.index-card,.card,.box,.stat-card,.widget,.chart-card){
  min-width:0;overflow-wrap:anywhere
}
:where(.panel,.index-card,.card,.box,.stat-card,.widget,.chart-card){
  transition:border-color .18s ease,box-shadow .18s ease
}
:where(.panel,.index-card,.card,.box,.stat-card,.widget,.chart-card):hover{
  border-color:color-mix(in srgb,var(--brand,#14c29a) 22%,var(--line));
}
:where(.btn,button,.button,[role="button"]){min-height:40px;touch-action:manipulation}
:where(input,select,textarea){max-width:100%;border-radius:10px}
:where(input,select,textarea):focus{border-color:var(--brand,#14c29a)!important;box-shadow:0 0 0 3px var(--nhip-ui-focus)}
:where(.view-h h1,h1,h2,h3,h4){overflow-wrap:anywhere;line-height:1.25}
.view-h{align-items:center}
.view-h h1{font-size:clamp(22px,2vw,30px);letter-spacing:-.45px}
:where(.tbl,.table,.data-table){font-variant-numeric:tabular-nums}
.tw{max-width:100%;overscroll-behavior-x:contain;scrollbar-width:thin}
.tbl{min-width:560px}
.tbl th{position:sticky;top:0;z-index:1;background:var(--surface,var(--bar,#fff));line-height:1.35}
.tbl td{overflow-wrap:normal}
:where(.up,.dn,.negative,.positive){font-variant-numeric:tabular-nums;font-weight:700}
:where(.modal,.dialog,[role="dialog"],.popup,.sheet){
  max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)
}
:where(.modal,.dialog,[role="dialog"],.popup,.sheet) :where(input,select,textarea){width:100%;min-height:42px}
footer{line-height:1.6}
@media(min-width:901px){
  .main{padding-top:clamp(22px,2vw,32px)}
  .topbar{z-index:40}
  .sidebar .nav{transition:background .15s ease,color .15s ease,transform .15s ease}
  .sidebar .nav:hover{transform:translateX(2px)}
  .search,.panel,.index-card,.card,.box,.chart-card{box-shadow:var(--shadow,0 6px 20px #0000000a)}
  .tbl th{top:0}
}
@media(max-width:900px){
  html{scroll-padding-top:62px}
  body{font-size:15px}
  .main{padding:16px 12px calc(82px + env(safe-area-inset-bottom,0px))}
  .welcome{align-items:stretch;flex-direction:column;gap:14px;padding:8px 0 18px}
  .welcome h1{font-size:clamp(24px,6vw,31px);letter-spacing:-.7px}
  .search{width:100%;max-width:none;padding:12px}
  .searchline{flex-wrap:nowrap}
  .searchline input{width:100%;min-width:0}
  :where(.panel,.index-card,.card,.box,.stat-card,.widget,.chart-card){border-radius:14px}
  .view-h{align-items:flex-start;gap:10px}
  .view-h h1{font-size:clamp(21px,5.5vw,27px)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .heat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl{font-size:13px}
  .tbl th,.tbl td{padding:9px 8px}
  .tw{border-radius:10px}
  #mnav{padding-left:max(5px,env(safe-area-inset-left,0px));padding-right:max(5px,env(safe-area-inset-right,0px))}
  #mnav a,#mnav button{min-height:46px}
  #mnav .ni{flex-shrink:0}
  #msheet .ms-box{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .ai-widget{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  :where(.modal,.dialog,[role="dialog"],.popup,.sheet){
    max-width:100vw;max-height:100dvh
  }
  :where(.modal,.dialog,[role="dialog"],.popup,.sheet) :where(.modal-body,.dialog__content,.content,.body){
    min-height:0;overflow-y:auto;overscroll-behavior:contain
  }
}
@media(max-width:380px){
  .main{padding-left:10px;padding-right:10px}
  .topbar{padding-left:10px;padding-right:10px}
  .topbar .tagline{display:none}
  .top-actions{gap:5px}
  .top-actions .btn{padding-inline:9px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .stats{gap:6px}
  .stats div{padding:9px}
  #mnav span{font-size:10.5px}
}
@media(hover:none){
  :where(.btn,button,.button,[role="button"]):hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}