/* About key numbers (patterns/gioi-thieu-stats.php). Loaded only on pages with a block of class "ab-stats" (functions.php).
   The bold part of each item is the number; ab-stats.js turns it into split-flap tiles (.ab-stats__flap > .ab-stats__tile). */
.ab-stats{
  --ab-stats-tile-w:.7em;
  --ab-stats-tile-w-sym:.5em;
  --ab-stats-tile-h:1.2em;
  --ab-stats-tile-pad:.06em;
  --ab-stats-hair:1px;
  padding:0 var(--s-4) var(--gap-section);
}
.ab-stats .page > *{margin:0}
.ab-stats .ab-stats__in{list-style:none;margin:0 auto;padding:var(--gap-card) 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-grid);border-block:1px solid var(--rule)}
.ab-stats .ab-stats__in li{display:grid;justify-items:center;align-content:start;gap:var(--s-3);margin:0;text-align:center;font-size:var(--t-s);color:var(--ink-2);cursor:default}
.ab-stats .ab-stats__in li > span{max-width:20ch}
.ab-stats__in strong{display:inline-flex;gap:calc(var(--s-1) / 2);font:700 var(--t-2xl)/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.ab-stats__tile{position:relative;display:grid;place-items:center;min-width:var(--ab-stats-tile-w);height:var(--ab-stats-tile-h);padding-inline:var(--ab-stats-tile-pad);border-radius:var(--r);background:var(--ink);color:var(--paper);overflow:hidden}
.ab-stats__tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--ab-stats-hair);background:var(--paper);opacity:.25}
.ab-stats__tile--sym{min-width:var(--ab-stats-tile-w-sym)}
.ab-stats__tile span{display:block}
.ab-stats__tile.is-flip span{animation:ab-stats-flip var(--dur) ease-in both}
@keyframes ab-stats-flip{from{transform:scaleY(.15);opacity:.35}}
/* the number stays readable for screen readers while the tiles are hidden from them */
.ab-stats__sr{position:absolute;width:var(--ab-stats-hair);height:var(--ab-stats-hair);margin:calc(var(--ab-stats-hair) * -1);padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width: 767px){
  .ab-stats .ab-stats__in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 359px){
  .ab-stats__in strong{font-size:var(--t-xl)}
}
@media (prefers-reduced-motion: reduce){
  .ab-stats__tile.is-flip span{animation:none}
}