/* One navigation grammar for all notebook pages:
   ← at the left, title centered, contextual information on the right. */
#module-screen .module-topbar{
  grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
  gap:12px;
}
#module-screen .module-back{
  grid-column:1;grid-row:1;justify-self:start;align-self:center;
  position:relative;width:60px;height:60px;min-width:48px;min-height:48px;
  padding:0!important;border-radius:50%;
  background:linear-gradient(#fff3dc,#e7cda4);
  border:3px solid #9d683c;
  box-shadow:inset 0 0 0 2px #fffaf0,0 4px 0 #4f2e1d90;
  color:#724325;font:0/1 Arial,sans-serif!important;
}
#module-screen .module-back::before{
  content:'←'!important;position:static!important;display:block!important;
  width:auto!important;height:auto!important;
  background:none!important;transform:none!important;
  font:700 34px/1.15 Arial,sans-serif!important;
}
#module-screen .module-back::after{content:none!important;display:none!important}
#module-screen .module-heading{
  grid-column:2;grid-row:1;justify-self:center;align-self:center;
  min-width:0;max-width:min(47vw,440px);text-align:center;
}
#module-screen .module-wallet{
  grid-column:3;grid-row:1;justify-self:end;align-self:center;
  margin:0;min-width:0;max-width:100%;white-space:nowrap;
}
#module-screen .module-wallet small{display:block;font-size:12px;letter-spacing:.035em}
#module-screen .module-wallet b{font-variant-numeric:tabular-nums;white-space:nowrap}
#module-screen .module-wallet[data-type="stat"]::before{display:none}
#module-screen .module-wallet[data-type="stat"]{padding-left:16px;padding-right:16px}
/* Ví có hai nền: nâu đậm (màn kiểu chợ) và kem (màn còn lại). Nhãn phải đổi màu theo
   nền, nếu không sẽ là nâu-trên-nâu. Áp cho mọi loại ví, không riêng data-type="stat". */
#module-screen .module-wallet small{color:#f6dfb4}
#module-screen:not(.market-look) .module-wallet small{color:#795434}
#module-screen .market-look .module-heading h2{line-height:1.15}

@media(max-width:1050px){
  #module-screen .module-topbar{gap:8px}
  #module-screen .module-heading{max-width:46vw}
  #module-screen .module-back{width:50px;height:50px;min-width:46px;min-height:46px}
  #module-screen .module-back::before{font-size:29px!important}
}
@media(max-width:700px){
  #module-screen .module-topbar{
    left:auto;top:7px;transform:none;
    width:calc(100% - 16px);height:76px;margin:0 auto;
    grid-template-columns:48px minmax(0,1fr) minmax(96px,auto);
    gap:5px;padding:5px 2px;
  }
  #module-screen .module-back{width:46px;height:46px;min-width:46px;min-height:46px}
  #module-screen .module-heading{
    width:100%;max-width:100%;padding:0;justify-self:center;
    border:0;background:none;box-shadow:none;
  }
  #module-screen .module-heading::before,#module-screen .module-heading::after{display:none}
  #module-screen .module-heading h2{
    font-size:clamp(20px,5.4vw,28px);line-height:1.15;
    white-space:normal;overflow-wrap:break-word;
  }
  #module-screen .module-heading small,#module-screen .module-heading p{display:none}
  #module-screen .module-wallet{
    width:auto;max-width:100%;
    padding:6px 7px;gap:4px;border-width:2px;
    border-radius:13px;box-shadow:inset 0 0 0 1px #ba894c;
    margin:0;min-height:46px;
  }
  #module-screen .module-wallet::before{width:20px;height:22px;font-size:17px;border-width:1px}
  #module-screen .module-wallet small{font-size:11px}
  #module-screen .module-wallet[data-type="stat"]{padding-left:7px;padding-right:7px}
  #module-screen .module-wallet b{font-size:clamp(13px,4vw,18px)}
  #module-screen .module-body{margin-top:8px}
}
@media(max-width:390px){
  #module-screen .module-topbar{grid-template-columns:44px minmax(0,1fr) minmax(85px,auto)}
  #module-screen .module-back{width:44px;height:44px;min-width:44px;min-height:44px}
  #module-screen .module-wallet{padding:5px 6px}
  #module-screen .module-wallet b{font-size:13px}
}

/* Hub shortcuts that open self-contained panels use the same left Back
   affordance; transactional confirmation dialogs keep their close buttons. */
.hub-submenu-modal .modal-paper{position:relative}
.hub-submenu-modal .modal-paper > .modal-close,
#profile-modal.hub-submenu-modal .modal-paper > .modal-close{
  left:12px!important;right:auto!important;top:12px!important;
  width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
  border-radius:50%;background:#fff4dc;color:#774a2d;
  border:2px solid #a77c51;z-index:6;
  box-shadow:0 2px 0 #805a3f66;
}
.hub-submenu-modal .modal-paper > .modal-close::before,
#profile-modal.hub-submenu-modal .modal-paper > .modal-close::before{
  content:'←'!important;position:static!important;display:block!important;
  width:auto!important;height:auto!important;
  transform:none!important;background:transparent!important;
  font:700 29px/1.15 Arial,sans-serif!important;
}
.hub-submenu-modal .modal-paper > .modal-close::after,
#profile-modal.hub-submenu-modal .modal-paper > .modal-close::after{content:none!important;display:none!important}
.hub-submenu-modal .modal-paper > .submenu-right-info{
  position:absolute;right:12px;top:14px;z-index:5;
  max-width:40%;min-width:73px;min-height:38px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5px 11px;border:1.5px solid #bf9160;border-radius:10px;
  background:#f3dfbc;color:#67442d;white-space:nowrap;
  font:700 15px/1.25 'Segoe UI',sans-serif;text-align:center;
}
.hub-submenu-modal .modal-paper > .submenu-right-info small{
  display:block;font:700 12px/1.25 'Segoe UI',sans-serif;letter-spacing:.03em;margin-bottom:2px;
}
.hub-submenu-modal .modal-paper > .book-eyebrow,
.hub-submenu-modal .modal-paper > h2,
#profile-modal.hub-submenu-modal .modal-paper > .book-eyebrow,
#profile-modal.hub-submenu-modal .modal-paper > h2{
  align-self:stretch;max-width:100%;text-align:center;
  padding-left:0!important;padding-right:0!important;
}
.hub-submenu-modal .modal-paper > .book-eyebrow,
#profile-modal.hub-submenu-modal .modal-paper > .book-eyebrow{
  margin-top:42px;
}
@media(max-height:520px) and (min-width:701px){
  .hub-submenu-modal .modal-paper > .book-eyebrow{margin-top:34px}
  .hub-submenu-modal .modal-paper > h2{font-size:27px;margin-bottom:6px}
}
@media(max-width:480px){
  .hub-submenu-modal .modal-paper > .modal-close{left:8px!important;top:8px!important}
  .hub-submenu-modal .modal-paper > .submenu-right-info{right:7px;top:10px;font-size:12px;padding:5px 7px;min-width:66px}
  .hub-submenu-modal .modal-paper > .book-eyebrow{margin-top:40px;font-size:11px}
  .hub-submenu-modal .modal-paper > h2{font-size:27px}
}