/* ==========================================================================
   DH Logistics CMS – theme theo màu logo (xanh rêu #53703F, nền kem #F2F1EC)
   Bootstrap 5.3 + biến CSS
   ========================================================================== */
:root {
  --dh-green: #53703F;
  --dh-green-600: #476136;
  --dh-green-700: #3D5530;
  --dh-green-800: #2E4024;
  --dh-green-900: #223019;
  --dh-green-50: #EEF2EA;
  --dh-green-100: #DCE5D3;
  --dh-cream: #F2F1EC;
  --dh-sand: #E4E2D8;
  --dh-ink: #23281F;
  --dh-muted: #6B7064;
  --dh-amber: #B7791F;
  --dh-sidebar-w: 252px;

  --bs-primary: #53703F;
  --bs-primary-rgb: 83, 112, 63;
  --bs-primary-text-emphasis: #2E4024;
  --bs-primary-bg-subtle: #EEF2EA;
  --bs-primary-border-subtle: #C5D3B9;
  --bs-link-color: #476136;
  --bs-link-color-rgb: 71, 97, 54;
  --bs-link-hover-color: #2E4024;
  --bs-link-hover-color-rgb: 46, 64, 36;
  --bs-body-font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .875rem;
  --bs-body-color: #23281F;
  --bs-body-bg: #F6F5F0;
  --bs-border-color: #E4E2D8;
  --bs-secondary-color: #6B7064;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-focus-ring-color: rgba(83, 112, 63, .25);
}

body { background: var(--bs-body-bg); color: var(--dh-ink); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn, .nav-link, .dropdown-item, .page-link, .sidebar a { text-decoration: none !important; }
.font-mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.text-muted { color: var(--dh-muted) !important; }
.fw-semibold { font-weight: 600 !important; }
.small-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dh-muted); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn { font-weight: 500; --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: .875rem; }
.btn-sm { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; }
.btn-primary {
  --bs-btn-bg: var(--dh-green); --bs-btn-border-color: var(--dh-green);
  --bs-btn-hover-bg: var(--dh-green-700); --bs-btn-hover-border-color: var(--dh-green-700);
  --bs-btn-active-bg: var(--dh-green-800); --bs-btn-active-border-color: var(--dh-green-800);
  --bs-btn-disabled-bg: #8FA37F; --bs-btn-disabled-border-color: #8FA37F;
  --bs-btn-focus-shadow-rgb: 83, 112, 63;
}
.btn-outline-primary {
  --bs-btn-color: var(--dh-green-600); --bs-btn-border-color: #B9C8AC;
  --bs-btn-hover-bg: var(--dh-green); --bs-btn-hover-border-color: var(--dh-green); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--dh-green-700); --bs-btn-active-border-color: var(--dh-green-700);
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--dh-sand); --bs-btn-hover-bg: var(--dh-cream); --bs-btn-hover-border-color: #D3D0C3; }
.btn-success { --bs-btn-bg: #3F7D3A; --bs-btn-border-color: #3F7D3A; }

.form-control, .form-select { border-color: #DAD8CD; font-size: .875rem; }
.form-control:focus, .form-select:focus { border-color: #A6BB95; box-shadow: 0 0 0 .2rem rgba(83,112,63,.15); }
.form-check-input:checked { background-color: var(--dh-green); border-color: var(--dh-green); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(83,112,63,.2); border-color: #A6BB95; }
.form-label { font-weight: 500; margin-bottom: .3rem; font-size: .82rem; }
.form-label .req { color: #B42318; }
.form-text { font-size: .76rem; }
.input-group-text { background: var(--dh-cream); border-color: #DAD8CD; font-size: .82rem; }

/* ---------- Shell ---------- */
.app-shell { min-height: 100vh; }
.sidebar {
  width: var(--dh-sidebar-w); background: var(--dh-green-800); color: #E7EDE2;
  --bs-offcanvas-width: var(--dh-sidebar-w); --bs-offcanvas-bg: var(--dh-green-800); --bs-offcanvas-color: #E7EDE2;
}
.sidebar.offcanvas-lg { background-color: var(--dh-green-800) !important; }
@media (min-width: 992px) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; overflow-y: auto; }
  .app-main { margin-left: var(--dh-sidebar-w); }
}
.sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.1rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .brand img { height: 30px; }
.sidebar .brand .sub { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #B9C8AC; line-height: 1.2; }
.sidebar .nav-group { padding: .9rem 1.1rem .35rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #9FB291; font-weight: 600; }
.sidebar .nav-link {
  display: flex; align-items: center; gap: .65rem; color: #DCE5D3; padding: .5rem 1.1rem; margin: 1px .55rem; border-radius: .45rem; font-size: .86rem;
}
.sidebar .nav-link i { font-size: 1.02rem; opacity: .85; width: 1.1rem; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-link.active { background: var(--dh-green); color: #fff; box-shadow: inset 3px 0 0 #C9D9B8; }
.sidebar .nav-link .badge { margin-left: auto; background: #E9B949; color: #3A2A05; font-weight: 600; }
.sidebar .sidebar-foot { padding: 1rem 1.1rem; font-size: .72rem; color: #9FB291; border-top: 1px solid rgba(255,255,255,.08); }

.topbar {
  position: sticky; top: 0; z-index: 1020; background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--dh-sand); height: 58px; display: flex; align-items: center; padding: 0 1.25rem; gap: .75rem;
}
.topbar .page-title { font-weight: 600; font-size: 1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--dh-green-100); color: var(--dh-green-800); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; }
.content { padding: 1.25rem; max-width: 1600px; }
@media (max-width: 575.98px) { .content { padding: 1rem .75rem; } .topbar { padding: 0 .75rem; } }

.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.35rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.page-head p { margin: .2rem 0 0; color: var(--dh-muted); }
.page-head .actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--dh-sand); border-radius: .75rem; box-shadow: 0 1px 2px rgba(35,40,31,.03); }
.card-header { background: transparent; border-bottom: 1px solid var(--dh-sand); padding: .8rem 1rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-header .card-title { margin: 0; font-size: .95rem; font-weight: 600; }
.card-body { padding: 1rem; }
.section-title { font-size: .95rem; font-weight: 600; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.section-title .num { width: 22px; height: 22px; border-radius: 50%; background: var(--dh-green); color: #fff; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; }

.kpi { padding: .9rem 1rem; }
.kpi .label { font-size: .76rem; color: var(--dh-muted); font-weight: 500; }
.kpi .value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.kpi .hint { font-size: .74rem; color: var(--dh-muted); }
.kpi .icon { width: 38px; height: 38px; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--dh-green-50); color: var(--dh-green-700); }
.kpi.warn .icon { background: #FDF3DC; color: #9A6200; }
.kpi.bad .icon { background: #FDECEA; color: #B42318; }

/* ---------- Filter bar ---------- */
.filter-card { margin-bottom: 1rem; }
.filter-card .card-body { padding: .85rem 1rem; }
.filter-card .form-label { font-size: .74rem; color: var(--dh-muted); margin-bottom: .2rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--dh-green-50); color: var(--dh-green-800); border: 1px solid var(--dh-green-100); border-radius: 999px; padding: .15rem .3rem .15rem .65rem; font-size: .76rem; }
.filter-chip a { color: inherit; opacity: .7; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; }
.filter-chip a:hover { opacity: 1; background: var(--dh-green-100); }
.status-tabs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: .75rem; scrollbar-width: thin; }
.status-tabs a { white-space: nowrap; border: 1px solid var(--dh-sand); background: #fff; color: var(--dh-ink); border-radius: 999px; padding: .28rem .75rem; font-size: .8rem; }
.status-tabs a .n { color: var(--dh-muted); margin-left: .25rem; font-variant-numeric: tabular-nums; }
.status-tabs a.active { background: var(--dh-green); border-color: var(--dh-green); color: #fff; }
.status-tabs a.active .n { color: #DCE5D3; }
.status-tabs a:hover { text-decoration: none; border-color: #B9C8AC; }
.multi-check { max-height: 260px; overflow-y: auto; min-width: 220px; }

/* ---------- Tables ---------- */
.table-wrap { background: #fff; border: 1px solid var(--dh-sand); border-radius: .75rem; overflow: hidden; }
.table-wrap .table-responsive { margin: 0; }
.table-dh { margin: 0; --bs-table-hover-bg: #F7F8F3; font-size: .84rem; }
.table-dh > thead > tr > th {
  background: #F4F3EC; color: #50564A; font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--dh-sand); white-space: nowrap; padding: .6rem .75rem; position: sticky; top: 0; z-index: 1;
}
.table-dh > tbody > tr > td { padding: .62rem .75rem; vertical-align: middle; border-color: #EEEDE6; }
.table-dh > tbody > tr:last-child > td { border-bottom: 0; }
.table-dh > tfoot > tr > td { background: #F4F3EC; font-weight: 600; padding: .6rem .75rem; }
.table-dh th.sortable a { color: inherit; display: inline-flex; align-items: center; gap: .3rem; }
.table-dh th.sortable a i { font-size: .72rem; opacity: .35; }
.table-dh th.sortable.active a { color: var(--dh-green-800); }
.table-dh th.sortable.active a i { opacity: 1; }
.table-dh tr.row-link { cursor: pointer; }
.table-dh .sub { color: var(--dh-muted); font-size: .76rem; }
.table-dh td.num, .table-dh th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-dh .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; font-weight: 600; color: var(--dh-green-800); }
.table-dh tr.row-error > td { background: #FFF8F7; }
.table-dh tr.row-ok > td { background: #FBFDF9; }
.table-foot { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .65rem .9rem; border-top: 1px solid var(--dh-sand); background: #FCFCFA; font-size: .8rem; color: var(--dh-muted); }
.pagination { --bs-pagination-color: var(--dh-green-700); --bs-pagination-active-bg: var(--dh-green); --bs-pagination-active-border-color: var(--dh-green); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(83,112,63,.2); margin: 0; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--dh-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; color: #B9C8AC; }

/* ---------- Badges ---------- */
.status-badge { font-weight: 500; font-size: .74rem; padding: .32em .7em; }
.badge.bg-primary { background-color: var(--dh-green) !important; }
.badge.bg-info { background-color: #D8E8F3 !important; color: #134262 !important; }
.badge.bg-warning { background-color: #FBE7B5 !important; color: #6B4600 !important; }
.badge.bg-success { background-color: #D7EBD2 !important; color: #23561E !important; }
.badge.bg-danger { background-color: #F9D7D3 !important; color: #8E1B12 !important; }
.badge.bg-secondary { background-color: #E7E6DF !important; color: #4A4F44 !important; }
.badge.bg-dark { background-color: #4A4F44 !important; }
.badge.bg-light { background-color: #F6F5F0 !important; color: #8A8E83 !important; }
.carrier-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .18rem .5rem; border-radius: .35rem; border: 1px solid; white-space: nowrap; }
.carrier-ntl { color: #1F5C3A; background: #E5F2EA; border-color: #BFDCCB; }
.carrier-e247 { color: #8A3B0A; background: #FCEBDD; border-color: #F2CBAE; }
.carrier-int { color: #4A4120; background: #F1EDDC; border-color: #DCD3AE; }
.carrier-x { color: #555; background: #eee; border-color: #ddd; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------- Detail ---------- */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: .45rem .9rem; margin: 0; font-size: .86rem; }
.kv dt { color: var(--dh-muted); font-weight: 500; }
.kv dd { margin: 0; word-break: break-word; }
@media (max-width: 575.98px) { .kv { grid-template-columns: 1fr; gap: .1rem; } .kv dd { margin-bottom: .45rem; } }

.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--dh-sand); }
.timeline li { position: relative; padding: 0 0 1rem .65rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -1.1rem; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #B9C8AC; }
.timeline li:first-child::before { background: var(--dh-green); border-color: var(--dh-green); box-shadow: 0 0 0 3px var(--dh-green-100); }
.timeline .t-time { font-size: .74rem; color: var(--dh-muted); font-variant-numeric: tabular-nums; }
.timeline .t-title { font-weight: 600; font-size: .86rem; }
.timeline .t-meta { font-size: .76rem; color: var(--dh-muted); }
.diff-table { font-size: .76rem; margin-top: .35rem; width: 100%; border-collapse: collapse; }
.diff-table td { padding: .2rem .4rem; border: 1px solid #EEEDE6; vertical-align: top; }
.diff-table td:first-child { color: var(--dh-muted); width: 34%; background: #FBFAF7; }
.diff-old { color: #8E1B12; text-decoration: line-through; text-decoration-color: rgba(142,27,18,.4); }
.diff-new { color: #23561E; }

.nav-tabs { --bs-nav-tabs-link-active-color: var(--dh-green-800); --bs-nav-tabs-link-active-border-color: var(--dh-sand) var(--dh-sand) #fff; --bs-nav-tabs-border-color: var(--dh-sand); }
.nav-tabs .nav-link { color: var(--dh-muted); font-weight: 500; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--dh-green); }
.nav-pills .nav-link { color: var(--dh-ink); }

/* ---------- Order form ---------- */
.customer-picker { position: relative; }
.customer-results { position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--dh-sand); border-radius: .6rem; box-shadow: 0 10px 30px rgba(35,40,31,.12); max-height: 320px; overflow-y: auto; display: none; }
.customer-results.show { display: block; }
.customer-results .item { padding: .55rem .8rem; cursor: pointer; border-bottom: 1px solid #F1F0EA; }
.customer-results .item:last-child { border-bottom: 0; }
.customer-results .item:hover, .customer-results .item.active { background: var(--dh-green-50); }
.customer-results .item .t { font-weight: 600; }
.customer-results .item .s { font-size: .76rem; color: var(--dh-muted); }
.customer-card { border: 1px solid var(--dh-green-100); background: var(--dh-green-50); border-radius: .6rem; padding: .75rem .9rem; }
.locked-section { opacity: .45; pointer-events: none; filter: grayscale(.3); transition: opacity .2s; }
.sticky-summary { position: sticky; top: 74px; }
.summary-row { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; font-size: .84rem; border-bottom: 1px dashed #EAE8E0; }
.summary-row:last-child { border-bottom: 0; }
.summary-row span:first-child { color: var(--dh-muted); }
.suggest-box { background: #FFF9EA; border: 1px solid #F3DFA8; border-radius: .5rem; padding: .5rem .75rem; font-size: .8rem; }

/* ---------- Import ---------- */
.dropzone { border: 2px dashed #C5D3B9; border-radius: .75rem; background: #FAFBF7; padding: 1.5rem; text-align: center; transition: .15s; }
.dropzone.drag { background: var(--dh-green-50); border-color: var(--dh-green); }
.dropzone i { font-size: 2rem; color: var(--dh-green); }
.import-err { font-size: .74rem; color: #8E1B12; }
.import-err li { margin-bottom: .1rem; }
.inline-edit .form-control, .inline-edit .form-select { font-size: .78rem; padding: .2rem .4rem; min-width: 110px; }

/* ---------- Auth / public ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--dh-cream); }
@media (min-width: 992px) { .auth-wrap { grid-template-columns: 1.05fr 1fr; } }
.auth-side { display: none; background: var(--dh-green-800); color: #E7EDE2; padding: 3rem; position: relative; overflow: hidden; }
@media (min-width: 992px) { .auth-side { display: flex; flex-direction: column; justify-content: space-between; } }
.auth-side::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255,255,255,.04); }
.auth-side h2 { font-weight: 700; font-size: 2rem; letter-spacing: -.02em; color: #fff; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 400px; }

.public-nav { background: #fff; border-bottom: 1px solid var(--dh-sand); }
.public-nav img { height: 32px; }
.track-hero { background: linear-gradient(160deg, var(--dh-green-800), var(--dh-green-600)); color: #fff; padding: 3rem 0 4.5rem; position: relative; overflow: hidden; }
.track-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-62deg, transparent 0 46px, rgba(255,255,255,.035) 46px 92px); }
.track-hero .container { position: relative; }
.track-hero h1 { font-weight: 700; letter-spacing: -.02em; }
.track-box { background: #fff; border-radius: .9rem; padding: .5rem; box-shadow: 0 16px 40px rgba(0,0,0,.18); display: flex; gap: .5rem; flex-wrap: wrap; }
.track-box .form-control { border: 0; font-size: 1rem; padding: .7rem .9rem; flex: 1 1 220px; }
.track-box .form-control:focus { box-shadow: none; }
.track-result { margin-top: -2.5rem; position: relative; }
.progress-steps { display: flex; justify-content: space-between; position: relative; margin: 1.25rem 0 .5rem; }
.progress-steps::before { content: ""; position: absolute; top: 13px; left: 6%; right: 6%; height: 3px; background: var(--dh-sand); }
.progress-steps .fill { position: absolute; top: 13px; left: 6%; height: 3px; background: var(--dh-green); }
.progress-steps .step { position: relative; text-align: center; flex: 1; font-size: .74rem; color: var(--dh-muted); }
.progress-steps .step .c { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--dh-sand); margin: 0 auto .35rem; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.progress-steps .step.on { color: var(--dh-ink); font-weight: 600; }
.progress-steps .step.on .c { border-color: var(--dh-green); background: var(--dh-green); color: #fff; }

/* Portal top nav */
.portal-nav { background: var(--dh-green-800); }
.portal-nav .navbar-brand img { height: 28px; }
.portal-nav .nav-link { color: #DCE5D3 !important; font-weight: 500; border-radius: .4rem; padding: .45rem .8rem !important; }
.portal-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.portal-nav .nav-link.active { background: var(--dh-green); color: #fff !important; }
.portal-nav .navbar-toggler { border-color: rgba(255,255,255,.3); }
.portal-nav .navbar-toggler-icon { filter: invert(1); }

/* Misc */
.copy-box { display: flex; gap: .5rem; align-items: stretch; }
.copy-box code { flex: 1; background: #1F2A19; color: #D6E8C4; padding: .7rem .9rem; border-radius: .5rem; font-size: .85rem; word-break: break-all; }
.chart-wrap { position: relative; height: 280px; }
.bar-mini { height: 6px; border-radius: 3px; background: #EEEDE6; overflow: hidden; }
.bar-mini > i { display: block; height: 100%; background: var(--dh-green); border-radius: 3px; }
.toast-container { z-index: 1090; }
.alert { border-radius: .6rem; font-size: .86rem; }
.alert-success { background: #EAF4E6; border-color: #CFE5C6; color: #23561E; }
.modal-content { border-radius: .85rem; border-color: var(--dh-sand); }
.modal-header { border-bottom-color: var(--dh-sand); }
.modal-footer { border-top-color: var(--dh-sand); }
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; }
.perm-matrix .grp td { background: #F4F3EC; font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #50564A; }
@media print { .sidebar, .topbar, .no-print { display: none !important; } .app-main { margin: 0 !important; } }

/* Khối tài khoản đăng nhập web khách hàng */
.portal-box { background: #F6FAF4; border: 1px solid #DCEBD5; border-radius: .75rem; padding: 1rem; }
.portal-box.is-off .row { opacity: .75; }
.portal-narrow .portal-box { padding: .75rem; }
.portal-narrow .portal-box .col-md-7,
.portal-narrow .portal-box .col-md-5 { flex: 0 0 100%; max-width: 100%; }
.portal-narrow .portal-box .pt-md-4 { padding-top: 0 !important; }
.portal-box.portal-bare { background: transparent; border: 0; padding: 0 !important; }
.portal-narrow .portal-box > .d-flex { flex-direction: column; }