/* Resonance panel — sized to its own modal box (container query), never the viewport.
   Do NOT put overflow-x on html or body: Safari/iOS breaks `position: sticky` (e.g. the
   site header) as soon as either one gets an explicit overflow value. The panel only ever
   renders inside `.res-modal` below, which already clips via `overflow:auto` and a capped
   width, so it needs no containment here. */
#mat-do-cong-huong.resonance{
  --res-cyan:#43dfe9;--res-violet:#b965ed;--res-line:rgba(109,145,183,.22);
  position:relative;isolation:isolate;display:block!important;width:100%;
  margin:0;padding:0!important;overflow:visible!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;color:#f5f4f8;
}
#mat-do-cong-huong::before,#mat-do-cong-huong::after{content:none!important}

#mat-do-cong-huong .res-head{display:block!important;width:100%;margin:0 0 1rem!important;padding:0!important;border:0!important;background:transparent!important}
#mat-do-cong-huong .res-kicker{display:flex!important;align-items:center;gap:.5rem;color:var(--res-cyan);font:700 .62rem/1 "Be Vietnam Pro",system-ui,sans-serif;letter-spacing:.2em;white-space:nowrap}
#mat-do-cong-huong .res-kicker>i{flex:0 0 auto;width:.32rem;height:.32rem;background:var(--res-violet);transform:rotate(45deg);box-shadow:0 0 .5rem rgba(185,101,237,.55)}
#mat-do-cong-huong .res-kicker>b{flex:1;min-width:1.5rem;height:1px;background:linear-gradient(90deg,var(--res-cyan),transparent)}
#mat-do-cong-huong .res-title-line{display:block!important;margin-top:.6rem!important}
#mat-do-cong-huong .res-title-line h2{margin:0!important;color:#f5f3f8;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.15rem,7cqw,1.55rem);font-weight:400;letter-spacing:.01em;line-height:1.1;text-transform:uppercase}
#mat-do-cong-huong .res-title-line time{display:block;margin-top:.3rem;color:#8793a8;font:400 .66rem/1 "Be Vietnam Pro",system-ui,sans-serif}

#mat-do-cong-huong .res-summary{display:grid!important;grid-template-columns:1fr 1fr;border:1px solid var(--res-line);border-radius:.9rem;overflow:hidden;background:linear-gradient(150deg,rgba(67,223,233,.05),rgba(185,101,237,.04))}
#mat-do-cong-huong .res-summary-cell{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:1rem .6rem!important;border:0!important;background:transparent!important;text-align:center}
#mat-do-cong-huong .res-summary-cell+ .res-summary-cell{border-left:1px solid var(--res-line)!important}
#mat-do-cong-huong .res-summary-cell b{color:#faf9fb;font:400 clamp(2rem,14cqw,2.7rem)/1 Georgia,"Times New Roman",serif;font-variant-numeric:tabular-nums;text-shadow:0 0 1rem rgba(80,210,232,.15)}
#mat-do-cong-huong .res-summary-cell strong{margin-top:.4rem;color:#d3d9e6;font:700 .62rem/1.1 "Be Vietnam Pro",system-ui,sans-serif;letter-spacing:.03em;white-space:nowrap}
#mat-do-cong-huong .res-summary-cell small{margin-top:.3rem;color:#8793a8;font:400 .62rem/1 "Be Vietnam Pro",system-ui,sans-serif}
#mat-do-cong-huong .res-ratio-bar{display:flex;width:100%;height:4px;border-radius:99px;overflow:hidden;margin-top:.55rem;background:rgba(140,170,210,.14)}
#mat-do-cong-huong .res-ratio-fill{background:linear-gradient(90deg,var(--res-cyan),#4ea9f4);height:100%}

#mat-do-cong-huong .res-table-body{margin-top:.75rem;display:flex;flex-direction:column;gap:.35rem}
#mat-do-cong-huong .res-table-row{display:flex!important;align-items:center;gap:.65rem;padding:.55rem .3rem!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
#mat-do-cong-huong .res-table-row+.res-table-row{border-top:1px solid var(--res-line)!important}
#mat-do-cong-huong .res-line-icon{display:grid;place-items:center;width:2.05rem;height:2.05rem;border-radius:.65rem;flex:0 0 auto;background:rgba(67,223,233,.1);color:var(--res-cyan)}
#mat-do-cong-huong .res-metric-comments .res-line-icon,#mat-do-cong-huong .res-metric-hearts .res-line-icon{background:rgba(185,101,237,.1);color:var(--res-violet)}
#mat-do-cong-huong .res-line-icon svg{display:block;width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#mat-do-cong-huong .res-metric-label{flex:1;min-width:0;color:#eef0f5;font:400 .88rem/1.2 "Be Vietnam Pro",system-ui,sans-serif}
#mat-do-cong-huong .res-table-row>b{color:#f6f7fb;font:700 1.05rem/1 "Be Vietnam Pro",system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:right}

@container(max-width:340px){
  #mat-do-cong-huong .res-summary-cell b{font-size:2.2rem}
}

/* Centered translucent modal — opened from the header menu's "Cộng hưởng" item. */
.res-modal-bg{
  position:fixed;inset:0;z-index:60;background:rgba(3,6,12,.5);
  animation:resModalFade .22s ease both;
}
.res-modal{
  position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(27rem,92vw);max-height:min(38rem,86dvh);overflow:auto;
  border-radius:1.2rem;border:1px solid rgba(140,170,210,.3);
  background:rgba(11,22,40,.7);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.05);
  padding:1.5rem 1.15rem 1.3rem;
  container-type:inline-size;
  animation:resModalIn .28s cubic-bezier(.2,.7,.3,1) both;
}
.res-modal-close{position:absolute;top:.5rem;right:.4rem;z-index:2;color:#eef0f5}
.res-modal #mat-do-cong-huong.resonance{margin:0!important;width:100%!important;max-width:100%!important}
@keyframes resModalFade{from{opacity:0}to{opacity:1}}
@keyframes resModalIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){ .res-modal-bg,.res-modal{animation:none} }