/* KHO BUSINESS TOÀN CẦU: read-only, live office source; never counted as CRM contacts */
.of-global-warehouse{display:flex;flex-direction:column;gap:8px;border:1px solid #cfe1ea;background:#fff;border-radius:13px;padding:14px 16px;margin:10px 0;color:#193e58;box-shadow:0 3px 12px rgba(20,56,82,.035)}
.of-global-warehouse>div:first-child{display:flex;flex-direction:column;gap:3px}
.of-global-warehouse>div:first-child strong{font-size:14px;line-height:1.3;color:#163e5a}
.of-global-warehouse>div:first-child span{font-size:11px;color:#648092;line-height:1.5}
.of-global-warehouse .of-global-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.of-global-warehouse .of-global-kpis>span{min-width:0;display:flex;flex-direction:column;background:#f3f8fb;border:1px solid #e0ebf2;border-radius:8px;padding:10px}
.of-global-warehouse .of-global-kpis b{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-global-warehouse .of-global-kpis small{font-size:10px;color:#597a90;line-height:1.3;margin-top:3px}
.of-global-warehouse .of-global-progress{height:6px;border-radius:8px;overflow:hidden;background:#dfecef}
.of-global-warehouse .of-global-progress span{display:block;height:100%;background:#209a86;border-radius:8px;transition:width .4s}
.of-global-warehouse p{font-size:11px;color:#5d7e90;margin:0;line-height:1.5}
.of-global-warehouse a{align-self:flex-start;display:inline-flex;align-items:center;color:#126b91;font-size:11px;font-weight:750;text-decoration:none;border:1px solid #bfdae7;padding:8px 11px;border-radius:8px;background:#eff8fc}
@media(max-width:700px){.of-global-warehouse{padding:12px;margin:9px 0}.of-global-warehouse .of-global-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.of-global-warehouse .of-global-kpis b{font-size:17px}}

.of-mob-hero .of-unified-sources-note{font-size:11px;line-height:1.5;margin:0 0 3px;color:#b9d2e0;border-top:1px solid #3e5870;padding:10px 0 0;overflow-wrap:anywhere}
.of-office-main-links small{overflow-wrap:anywhere}
@media(max-width:650px){.of-mob-hero .of-unified-sources-note{font-size:10px}}

/* Fix KPI value overflowing horizontally in narrow iPhone cards.
   Keep figures and their labels visually centered on desktop and mobile. */
.of-app.of-mobile-view .of-mob-hero .of-mob-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
}
.of-app.of-mobile-view .of-mob-hero .of-mob-metrics .of-mob-metric {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 11px 6px;
}
.of-app.of-mobile-view .of-mob-hero .of-mob-metrics .of-mob-metric strong {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(25px, 6.7vw, 28px);
  letter-spacing: -.075em;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
}
.of-app.of-mobile-view .of-mob-hero .of-mob-metrics .of-mob-metric:first-child strong {
  font-size: clamp(23px, 5.5vw, 30px);
}
.of-app.of-mobile-view .of-mob-hero .of-mob-metrics .of-mob-metric span {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  text-align: center;
  overflow-wrap: break-word;
}
@media (min-width:761px) {
  .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics .of-mob-metric strong {
    font-size: clamp(25px, 2.15vw, 28px);
  }
  .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics .of-mob-metric:first-child strong {
    font-size: clamp(20px, 2vw, 26px);
  }
}

/* One additional website KPI without mobile ragged columns or smaller digits. */
@media(max-width:760px){
 .of-app.of-mobile-view .of-mob-hero .of-mob-metrics .of-mob-metric-websites{
   grid-column:1/-1;
   padding:11px 10px;
   align-items:center;
   text-align:center;
 }
 .of-app.of-mobile-view .of-mob-hero .of-mob-metrics .of-mob-metric-websites strong{
   font-size:clamp(25px,6.7vw,28px);
   text-align:center;
 }
}
@media(min-width:761px){
 .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics{
   grid-template-columns:repeat(5,minmax(0,1fr));
 }
 .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics .of-mob-metric{
   padding-inline:5px;
 }
 .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics .of-mob-metric strong{
   font-size:clamp(19px,1.75vw,27px);
   letter-spacing:-.075em;
   text-align:center;
 }
}
/* Intermediate desktop viewport: 3+2 balanced KPI layout, keep figures readable. */
@media(min-width:761px) and (max-width:1350px){
 .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics{
   grid-template-columns:repeat(6,minmax(0,1fr));
 }
 .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics .of-mob-metric{
   grid-column:span 2;
   min-width:0;
 }
 .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics .of-mob-metric:nth-child(n+4){
   grid-column:span 3;
 }
 .of-app.of-mobile-view.of-desktop-cockpit .of-mob-hero .of-mob-metrics .of-mob-metric strong{
   font-size:clamp(24px,2.1vw,29px);
 }
}