/* "Nghe Audio" button on news articles (article_audio.py) */
.aa{display:inline-flex;align-items:center;vertical-align:middle}
.aa audio{display:none}
.aa-row{margin:12px 0 0!important}
.aa-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:5px 14px 5px 5px;border:0;border-radius:999px;background:var(--amber,#f2a516);color:#1b1300;font-family:inherit;font-size:.86rem;font-weight:700;line-height:1.1;letter-spacing:.01em;cursor:pointer;box-shadow:0 4px 14px rgba(242,165,22,.30);-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background .2s,box-shadow .2s,transform .15s}
.aa-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--aa-p,0%);background:rgba(255,255,255,.38);pointer-events:none;transition:width .3s linear}
.aa-btn>*{position:relative}
.aa-btn:hover{background:#ffb627;box-shadow:0 8px 20px rgba(242,165,22,.38)}
.aa-btn:active{transform:scale(.97)}
.aa-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.aa-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1b1300;color:var(--amber,#f2a516);flex:none}
.aa-ic svg{width:14px;height:14px;display:block}
.aa-i-pause{display:none!important}
.aa-time{font-weight:500;font-size:.78rem;opacity:.75;font-variant-numeric:tabular-nums}
.aa-eq{display:none;align-items:flex-end;gap:2px;height:12px}
.aa-eq i{display:block;width:3px;height:100%;border-radius:2px;background:#1b1300;transform-origin:bottom;animation:aaEq 1s ease-in-out infinite}
.aa-eq i:nth-child(2){animation-delay:-.35s}.aa-eq i:nth-child(3){animation-delay:-.7s}
@keyframes aaEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.aa.is-playing .aa-btn,.aa.is-loading .aa-btn{background:#ffc04a}
.aa.is-playing .aa-i-play{display:none!important}
.aa.is-playing .aa-i-pause{display:block!important}
.aa.is-playing .aa-eq{display:inline-flex}
.aa.is-loading .aa-ic{animation:aaPulse 1s ease-in-out infinite}
@keyframes aaPulse{0%,100%{opacity:1}50%{opacity:.45}}
.aa.is-error .aa-btn{background:#f5d0c5}
@media (prefers-reduced-motion:reduce){.aa-eq i,.aa.is-loading .aa-ic{animation:none}.aa-btn::before{transition:none}}
