/* ════════════════════════════════════════════════════════════════
   Reading Analytics — history section + full-screen result modal.
   Style matches the theme: blue (#3b82f6) primary, Apple-white surfaces,
   Plus Jakarta Sans body. NO medieval/brown/parchment styling.
   Light + dark mode (uses html.ae-dark-mode toggle from theme).
   ════════════════════════════════════════════════════════════════ */

.ar-history,
.ar-detail-overlay,
.ar-result {
    --ar-blue:#3b82f6;
    --ar-blue-2:#2563eb;
    --ar-blue-3:#1d4ed8;
    --ar-blue-soft:#eff6ff;
    --ar-blue-tint:#dbeafe;
    --ar-text:#111827;
    --ar-text-mute:#6b7280;
    --ar-text-faint:#9ca3af;
    --ar-bg:#ffffff;
    --ar-bg-soft:#f9fafb;
    --ar-bg-elev:#f3f4f6;
    --ar-border:#e5e7eb;
    --ar-border-strong:#d1d5db;
    --ar-green:#10b981;
    --ar-green-soft:#d1fae5;
    --ar-red:#ef4444;
    --ar-red-soft:#fee2e2;
    --ar-amber:#f59e0b;
    --ar-amber-soft:#fef3c7;
    --ar-shadow-sm:0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
    --ar-shadow-md:0 4px 12px rgba(17,24,39,.06), 0 2px 4px rgba(17,24,39,.04);
    --ar-shadow-lg:0 24px 48px rgba(17,24,39,.12);
    --ar-radius:16px;
    --ar-radius-sm:10px;
    box-sizing:border-box;
    font-family:'Plus Jakarta Sans','Inter',-apple-system,'SF Pro Text',BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:var(--ar-text);
}
.ar-history *, .ar-detail-overlay *, .ar-result * { box-sizing:border-box; }

html.ae-dark-mode .ar-history,
html.ae-dark-mode .ar-detail-overlay,
html.ae-dark-mode .ar-result {
    --ar-text:#f3f4f6;
    --ar-text-mute:#9ca3af;
    --ar-text-faint:#6b7280;
    --ar-bg:#1f2937;
    --ar-bg-soft:#111827;
    --ar-bg-elev:#0f172a;
    --ar-border:#374151;
    --ar-border-strong:#4b5563;
    --ar-blue-soft:rgba(59,130,246,.12);
    --ar-blue-tint:rgba(59,130,246,.2);
    --ar-green-soft:rgba(16,185,129,.18);
    --ar-red-soft:rgba(239,68,68,.18);
    --ar-amber-soft:rgba(245,158,11,.18);
    --ar-shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --ar-shadow-md:0 6px 16px rgba(0,0,0,.5);
    --ar-shadow-lg:0 24px 48px rgba(0,0,0,.6);
}

/* ════════════════════ HISTORY SECTION ═══════════════════ */
.ar-history {
    background:var(--ar-bg);
    border:1px solid var(--ar-border);
    border-radius:var(--ar-radius);
    padding:24px 28px;
    margin:24px 0;
    box-shadow:var(--ar-shadow-sm);
}

.ar-history-head{display:flex;align-items:center;gap:10px;margin:0 0 20px;}
.ar-history-icon{font-size:22px;line-height:1;color:var(--ar-blue);}
.ar-history h3{
    font-size:18px;font-weight:700;
    color:var(--ar-text);
    letter-spacing:-.01em;
    margin:0;
    text-transform:none;
}

/* Stat cards */
.ar-history-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;
    margin-bottom:20px;
}
@media (max-width:640px){.ar-history-stats{grid-template-columns:1fr;}}
.ar-history-stat{
    display:flex;align-items:center;gap:14px;
    padding:18px 20px;
    background:var(--ar-bg-soft);
    border:1px solid var(--ar-border);
    border-radius:var(--ar-radius);
    transition:border-color .15s, box-shadow .15s;
}
.ar-history-stat:hover{border-color:var(--ar-border-strong);box-shadow:var(--ar-shadow-sm);}
.ar-history-stat-icon{
    width:44px;height:44px;flex-shrink:0;border-radius:50%;
    display:grid;place-items:center;font-size:20px;
}
.ar-history-stat--best .ar-history-stat-icon{background:var(--ar-amber-soft);color:var(--ar-amber);}
.ar-history-stat--fast .ar-history-stat-icon{background:var(--ar-blue-soft);color:var(--ar-blue);}
.ar-history-stat-meta{flex:1;min-width:0;}
.ar-history-stat-label{
    font-size:11px;font-weight:600;letter-spacing:.04em;
    color:var(--ar-text-mute);
    text-transform:uppercase;
    margin-bottom:6px;
}
.ar-history-stat-value{
    font-size:24px;font-weight:700;color:var(--ar-text);line-height:1.1;
    letter-spacing:-.02em;
}

/* Chart */
.ar-history-chart-wrap{
    background:var(--ar-bg-soft);
    border:1px solid var(--ar-border);
    border-radius:var(--ar-radius);
    padding:18px 22px 14px;
    margin-bottom:20px;
}
.ar-history-chart-title{
    display:flex;align-items:center;gap:8px;
    font-size:13px;font-weight:600;
    color:var(--ar-text-mute);
    margin-bottom:14px;
    text-transform:none;
    letter-spacing:0;
}
.ar-history-chart-wrap canvas{max-height:240px;width:100%!important;}

/* Attempts table */
.ar-history-table-wrap{
    background:var(--ar-bg);
    border:1px solid var(--ar-border);
    border-radius:var(--ar-radius);
    overflow:hidden;
}
.ar-history-table{width:100%;border-collapse:collapse;}
.ar-history-table thead{background:var(--ar-bg-soft);}
.ar-history-table th{
    text-align:left;padding:12px 22px;
    font-size:11px;font-weight:600;letter-spacing:.06em;
    color:var(--ar-text-mute);
    text-transform:uppercase;
    border-bottom:1px solid var(--ar-border);
}
.ar-history-table th:last-child{text-align:right;}
.ar-history-table td{
    padding:14px 22px;
    border-top:1px solid var(--ar-border);
    font-size:14px;color:var(--ar-text);
    vertical-align:middle;
}
.ar-history-table td:last-child{text-align:right;}
.ar-history-table td .ar-cell-icon{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--ar-text-mute);
}
.ar-history-row{cursor:pointer;transition:background .12s;}
.ar-history-row:hover,.ar-history-row:focus-visible{
    background:var(--ar-bg-soft);outline:none;
}

.ar-history-band strong{font-size:18px;font-weight:700;letter-spacing:-.02em;}
.ar-history-band.ar-tier-low  strong{color:var(--ar-red);}
.ar-history-band.ar-tier-mid  strong{color:var(--ar-amber);}
.ar-history-band.ar-tier-high strong{color:var(--ar-green);}
.ar-history-band.ar-tier-top  strong{color:var(--ar-blue);}

/* ═══════════════════════════════════════════════════════════════
   Empty state — V1.B (animated chart preview + roadmap + CTA)
   Mobile-first, scales from 320px → desktop. Animation chỉ chạy 1
   lần khi component mount; respect prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
.ar-empty-state{
    padding:44px 32px 40px;text-align:center;
    position:relative;overflow:hidden;
    background:var(--ar-bg);
    border-top:1px solid var(--ar-border);
}
.ar-empty-state::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(circle at 15% 20%, rgba(59,130,246,.07) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(245,158,11,.05) 0%, transparent 45%);
}

/* Animated chart preview */
.ar-empty-chart{
    position:relative;width:100%;max-width:420px;
    height:140px;margin:0 auto 24px;
}
.ar-empty-chart-svg{width:100%;height:100%;overflow:visible;}
.ar-empty-grid line{stroke:var(--ar-border);stroke-dasharray:2,3;}
.ar-empty-axis{font:600 11px "Plus Jakarta Sans",sans-serif;fill:var(--ar-text-faint);}
.ar-empty-line{
    fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:600;stroke-dashoffset:600;
    animation:ar-empty-draw 1.8s ease-out .3s forwards;
}
.ar-empty-area{
    opacity:0;
    animation:ar-empty-fade 1s ease-out 1.5s forwards;
}
.ar-empty-dot{
    fill:#fff;stroke:var(--ar-blue);stroke-width:3;
    opacity:0;transform-origin:center;
}
.ar-empty-dot-1{animation:ar-empty-pop .4s cubic-bezier(.5,1.5,.5,1) .7s forwards;}
.ar-empty-dot-2{animation:ar-empty-pop .4s cubic-bezier(.5,1.5,.5,1) 1s  forwards;}
.ar-empty-dot-3{animation:ar-empty-pop .4s cubic-bezier(.5,1.5,.5,1) 1.3s forwards;}
.ar-empty-dot-4{animation:ar-empty-pop .4s cubic-bezier(.5,1.5,.5,1) 1.6s forwards;}
.ar-empty-band-tag{
    font:700 13px "Plus Jakarta Sans",sans-serif;
    fill:var(--ar-blue-2);opacity:0;
    animation:ar-empty-fade .5s ease-out 2.1s forwards;
}
@keyframes ar-empty-draw{to{stroke-dashoffset:0;}}
@keyframes ar-empty-fade{to{opacity:1;}}
@keyframes ar-empty-pop{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}}

/* Title + sub */
.ar-empty-title{
    font-size:24px;font-weight:800;letter-spacing:-.01em;
    color:var(--ar-text);margin:0 0 10px;
    position:relative;
}
.ar-empty-sub{
    color:var(--ar-text-mute);font-size:14.5px;line-height:1.65;
    max-width:520px;margin:0 auto 28px;position:relative;
}

/* Roadmap 3 bước */
.ar-empty-roadmap{
    list-style:none;padding:0;margin:0 auto 28px;
    max-width:560px;position:relative;
    display:flex;align-items:stretch;justify-content:center;gap:0;
}
.ar-empty-step{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:14px 8px;
}
.ar-empty-step-num{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--ar-bg-soft);border:2px solid var(--ar-border);
    font-size:14px;font-weight:800;color:var(--ar-text-faint);
    transition:all .25s;
}
.ar-empty-step--active .ar-empty-step-num{
    border-color:var(--ar-blue);
    background:var(--ar-blue);color:#fff;
    box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.ar-empty-step-icon{font-size:20px;line-height:1;}
.ar-empty-step-text{
    font-size:11.5px;font-weight:600;color:var(--ar-text-mute);
    text-align:center;line-height:1.4;
}
.ar-empty-step--active .ar-empty-step-text{color:var(--ar-blue-2);font-weight:700;}
.ar-empty-step-connector{
    flex:0 0 60px;align-self:center;
    height:2px;background:var(--ar-border);
    position:relative;top:-22px;
    list-style:none;
}

/* CTA button */
.ar-empty-cta{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 30px;border-radius:999px;
    background:linear-gradient(135deg,var(--ar-blue) 0%,var(--ar-blue-2) 100%);
    color:#fff !important;text-decoration:none;font-weight:700;font-size:15px;
    box-shadow:0 8px 24px rgba(59,130,246,.32);
    transition:transform .15s,box-shadow .2s;
    position:relative;z-index:1;
    border:0;cursor:pointer;
}
.ar-empty-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(59,130,246,.4);color:#fff;}
.ar-empty-cta svg{transition:transform .2s;}
.ar-empty-cta:hover svg{transform:translateX(3px);}
.ar-empty-cta:focus-visible{outline:2px solid var(--ar-amber);outline-offset:3px;}

/* ── Mobile ── */
@media (max-width:640px){
    .ar-empty-state{padding:28px 18px 32px;}
    .ar-empty-chart{height:120px;margin-bottom:18px;}
    .ar-empty-title{font-size:20px;margin-bottom:8px;}
    .ar-empty-sub{font-size:13.5px;margin-bottom:22px;}
    .ar-empty-roadmap{flex-direction:column;align-items:center;gap:4px;max-width:200px;}
    .ar-empty-step{flex-direction:row;gap:12px;padding:8px 0;width:100%;}
    .ar-empty-step-text{text-align:left;font-size:12.5px;}
    .ar-empty-step-text br{display:none;}
    .ar-empty-step-connector{
        flex:0 0 30px;width:2px;height:30px;
        position:static;align-self:flex-start;
        margin-left:17px;top:0;
    }
    .ar-empty-cta{padding:12px 24px;font-size:14px;width:100%;justify-content:center;max-width:280px;}
}
@media (max-width:380px){
    .ar-empty-state{padding:24px 14px 28px;}
    .ar-empty-title{font-size:18px;}
    .ar-empty-cta{font-size:13.5px;}
}

/* Reduced-motion: tắt animation, hiển thị state cuối ngay */
@media (prefers-reduced-motion:reduce){
    .ar-empty-line{stroke-dashoffset:0;animation:none;}
    .ar-empty-area,.ar-empty-band-tag{opacity:1;animation:none;}
    .ar-empty-dot{opacity:1;animation:none;}
}

/* Pulse highlight cho .qov-btn-start khi user click "Bắt đầu thi ngay" */
.qov-btn-start.qov-pulse{
    animation:qov-pulse 1.5s ease-out;
}
@keyframes qov-pulse{
    0%   {box-shadow:0 0 0 0 rgba(59,130,246,.6);}
    50%  {box-shadow:0 0 0 16px rgba(59,130,246,0);}
    100% {box-shadow:0 0 0 0 rgba(59,130,246,0);}
}

/* ════════════════════ FULL-SCREEN RESULT MODAL ═══════════════════ */
.ar-detail-overlay{
    position:fixed;inset:0;z-index:2147483646;
    background:var(--ar-bg-soft);
    display:none;flex-direction:column;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.ar-detail-overlay.show{display:flex;animation:ar-fade .22s ease-out;}
@keyframes ar-fade{from{opacity:0;}to{opacity:1;}}

body.ar-modal-open #wpadminbar,
body.ar-modal-open header,
body.ar-modal-open .hd,
body.ar-modal-open .header,
body.ar-modal-open #masthead,
body.ar-modal-open .site-header,
body.ar-modal-open .top-bar,
body.ar-modal-open .top-info,
body.ar-modal-open .qov-bottom-bar,
body.ar-modal-open .header-area,
body.ar-modal-open #header,
body.ar-modal-open .floating-bar,
body.ar-modal-open footer,
body.ar-modal-open .footer{display:none !important;}
body.ar-modal-open{padding-top:0 !important;margin-top:0 !important;}

.ar-detail-modal{
    position:relative;width:100%;max-width:none;
    background:transparent;
    padding:0 0 60px;
    margin:0;animation:ar-slide .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes ar-slide{from{transform:translateY(8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.ar-detail-close{
    position:fixed;top:18px;right:24px;z-index:2147483647;
    width:36px;height:36px;border-radius:50%;
    border:1px solid var(--ar-border);
    background:var(--ar-bg);color:var(--ar-text);
    cursor:pointer;font-size:18px;line-height:1;
    font-family:-apple-system,system-ui,sans-serif;
    display:grid;place-items:center;padding:0;
    box-shadow:var(--ar-shadow-md);
    transition:transform .15s, background .15s;
}
.ar-detail-close:hover{background:var(--ar-blue);color:#fff;border-color:var(--ar-blue);transform:rotate(90deg);}

.ar-detail-loading,.ar-detail-error{padding:80px 20px;text-align:center;color:var(--ar-text-mute);font-size:14px;}
.ar-detail-error{color:var(--ar-red);}

/* ── Result content (rendered inside the modal) ── */
.ar-result{
    background:transparent;border:none;border-radius:0;
    padding:0;margin:0;box-shadow:none;
}
.ar-result::before{display:none;}

/* Apple-style header — clean white with subtle gradient + dot pattern */
.ar-result-head{
    background:var(--ar-bg);
    background-image:radial-gradient(circle at 1px 1px, var(--ar-bg-elev) 1px, transparent 0);
    background-size:24px 24px;background-position:0 0;
    border-bottom:1px solid var(--ar-border);
    box-shadow:var(--ar-shadow-sm);
    text-align:center;
    padding:36px 24px 28px;
    margin-bottom:32px;
    position:relative;overflow:hidden;
}
html.ae-dark-mode .ar-result-head{
    background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
}
.ar-result-head::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--ar-blue),var(--ar-blue-3));
    z-index:1;
}
.ar-result-head::after{
    content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);
    width:480px;height:160px;
    background:radial-gradient(ellipse, var(--ar-blue-soft) 0%, transparent 60%);
    pointer-events:none;opacity:.7;
}
.ar-result-head h2.ar-result-title-main,
.ar-result-title{position:relative;z-index:2;}
.ar-result-eyebrow{display:none;}
.ar-result-head h2.ar-result-title-main{
    font-size:24px;font-weight:700;
    color:var(--ar-text);
    margin:0;letter-spacing:-.02em;line-height:1.25;
}
.ar-result-title{
    font-size:11px;font-weight:600;
    color:var(--ar-blue);
    margin-top:6px;letter-spacing:.08em;
    text-transform:uppercase;
}

/* Body container */
.ar-result-body{max-width:1080px;margin:0 auto;padding:0 24px;}

/* Top: band circle + tally cards */
.ar-result-top{
    display:grid;grid-template-columns:260px 1fr;gap:28px;
    align-items:center;margin-bottom:24px;
    padding:0;background:transparent;border:none;
}
@media (max-width:768px){.ar-result-top{grid-template-columns:1fr;text-align:center;}}

.ar-band-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;}
.ar-band-circle{
    width:220px;height:220px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    animation:ar-band-pop .6s cubic-bezier(.34,1.56,.64,1);
}
.ar-band-circle::before{
    content:'';position:absolute;inset:-18px;border-radius:50%;
    background:radial-gradient(circle, var(--ar-blue-tint) 0%, transparent 70%);
    opacity:.55;animation:ar-band-glow 3s ease-in-out infinite;z-index:0;
}
.ar-band-svg{
    position:absolute;inset:0;width:100%;height:100%;
    transform:rotate(-90deg); /* start from top */
    z-index:1;
}
.ar-band-track{
    fill:none;stroke:var(--ar-bg-elev);stroke-width:14;
}
.ar-band-arc{
    fill:none;stroke:url(#ar-band-grad);stroke-width:14;stroke-linecap:round;
    transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.4,1);
    animation:ar-arc-fill 1.4s cubic-bezier(.2,.8,.4,1) .25s both;
    stroke:var(--ar-blue);
    filter:drop-shadow(0 2px 6px rgba(59,130,246,.35));
}
/* Tier-coloured arc */
.ar-tier-low  .ar-band-arc{stroke:var(--ar-red);   filter:drop-shadow(0 2px 6px rgba(239,68,68,.35));}
.ar-tier-mid  .ar-band-arc{stroke:var(--ar-amber); filter:drop-shadow(0 2px 6px rgba(245,158,11,.35));}
.ar-tier-high .ar-band-arc{stroke:var(--ar-green); filter:drop-shadow(0 2px 6px rgba(16,185,129,.35));}
.ar-tier-top  .ar-band-arc{stroke:var(--ar-blue);  filter:drop-shadow(0 4px 10px rgba(59,130,246,.45));}
@keyframes ar-arc-fill{
    from{stroke-dashoffset:540;}
}
.ar-band-inner{
    position:relative;z-index:2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:160px;height:160px;border-radius:50%;
    background:var(--ar-bg);
    box-shadow:var(--ar-shadow-md), inset 0 0 0 1px var(--ar-border);
}
@keyframes ar-band-pop{
    0%{transform:scale(.85);opacity:0;}
    100%{transform:scale(1);opacity:1;}
}
@keyframes ar-band-glow{
    0%,100%{transform:scale(1);opacity:.4;}
    50%{transform:scale(1.08);opacity:.7;}
}
.ar-band-num{
    font-size:54px;font-weight:700;
    color:var(--ar-blue);line-height:1;letter-spacing:-.04em;
    font-variant-numeric:tabular-nums;
    animation:ar-num-fade .8s ease-out .35s both;
    display:inline-flex;align-items:baseline;gap:2px;
}
.ar-band-max{
    font-size:22px;font-weight:600;color:var(--ar-text-mute);
    letter-spacing:-.01em;
}
.ar-history-band-max{
    font-size:13px;font-weight:500;color:var(--ar-text-mute);margin-left:2px;
    font-variant-numeric:tabular-nums;
}
.ar-stat-max{
    font-size:14px;font-weight:500;color:var(--ar-text-mute);
    margin-left:2px;letter-spacing:-.01em;
}
.ar-tier-low  .ar-band-num{color:var(--ar-red);}
.ar-tier-mid  .ar-band-num{color:var(--ar-amber);}
.ar-tier-high .ar-band-num{color:var(--ar-green);}
.ar-tier-top  .ar-band-num{color:var(--ar-blue);}
@keyframes ar-num-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Tier badge — under band circle */
.ar-tier-badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:999px;
    font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;
    animation:ar-num-fade .5s ease-out .8s both;
}
.ar-tier-badge--low {background:var(--ar-red-soft);  color:var(--ar-red);}
.ar-tier-badge--mid {background:var(--ar-amber-soft);color:var(--ar-amber);}
.ar-tier-badge--high{background:var(--ar-green-soft);color:var(--ar-green);}
.ar-tier-badge--top {background:var(--ar-blue-soft); color:var(--ar-blue);}
.ar-tier-dot{
    width:6px;height:6px;border-radius:50%;background:currentColor;
    animation:ar-tier-pulse 1.4s ease-in-out infinite;
}
@keyframes ar-tier-pulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.ar-band-label{
    font-size:10.5px;font-weight:600;
    color:var(--ar-text-mute);
    letter-spacing:.16em;margin-top:8px;
    text-align:center;line-height:1.3;
    text-transform:uppercase;
}
.ar-tally-fraction{
    font-size:14px;color:var(--ar-text-mute);
    text-align:center;
    font-variant-numeric:tabular-nums;
}
.ar-tally-fraction strong{color:var(--ar-green);font-weight:700;font-size:18px;}

/* Tally cards */
.ar-result-tally{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ar-tally-row{display:contents;}
.ar-tally-card{
    grid-column:span 1;
    display:flex;align-items:center;gap:14px;
    padding:18px 20px;
    background:var(--ar-bg);
    border-radius:var(--ar-radius);
    border:1px solid var(--ar-border);
    box-shadow:var(--ar-shadow-sm);
    transition:transform .2s, box-shadow .2s, border-color .2s;
    animation:ar-card-rise .45s ease-out both;
}
.ar-tally-card:hover{transform:translateY(-2px);box-shadow:var(--ar-shadow-md);}
.ar-tally-correct{animation-delay:.1s;}
.ar-tally-wrong  {animation-delay:.18s;}
.ar-tally-blank  {animation-delay:.26s;}
@keyframes ar-card-rise{
    from{opacity:0;transform:translateY(12px);}
    to  {opacity:1;transform:translateY(0);}
}
.ar-tally-blank{grid-column:span 2;}
@media (max-width:480px){
    .ar-result-tally{grid-template-columns:1fr;}
    .ar-tally-blank{grid-column:span 1;}
}
.ar-tally-icon{
    width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;
    font-size:20px;font-weight:700;flex-shrink:0;
}
.ar-tally-icon{transition:transform .2s;}
.ar-tally-card:hover .ar-tally-icon{transform:scale(1.08) rotate(-4deg);}
.ar-tally-correct .ar-tally-icon{background:var(--ar-green-soft);color:var(--ar-green);}
.ar-tally-wrong   .ar-tally-icon{background:var(--ar-red-soft);  color:var(--ar-red);}
.ar-tally-blank   .ar-tally-icon{background:var(--ar-bg-elev);   color:var(--ar-text-mute);}
.ar-tally-meta{flex:1;}
.ar-tally-num{
    font-size:28px;font-weight:700;color:var(--ar-text);line-height:1;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.ar-tally-lbl{font-size:13px;color:var(--ar-text-mute);margin-top:4px;}

/* Section blocks */
.ar-result-section{
    background:var(--ar-bg);
    border:1px solid var(--ar-border);
    border-radius:var(--ar-radius);
    padding:24px 26px;margin-bottom:18px;
    box-shadow:var(--ar-shadow-sm);
    position:relative;
    animation:ar-section-rise .5s ease-out both;
    animation-delay:.4s;
}
@keyframes ar-section-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.ar-result-section + .ar-result-section{animation-delay:.55s;}
.ar-result-section + .ar-result-section + .ar-result-section{animation-delay:.7s;}
.ar-result-section-title{
    display:flex;align-items:center;gap:10px;
    font-size:15px;font-weight:600;
    color:var(--ar-text);
    letter-spacing:-.01em;
    margin:0 0 18px;padding-bottom:14px;
    text-transform:none;
    border-bottom:1px solid var(--ar-border);
}
.ar-result-section-title::before{
    content:'';width:3px;height:18px;border-radius:2px;
    background:linear-gradient(180deg,var(--ar-blue),var(--ar-blue-3));
}
.ar-section-ico{
    display:inline-grid;place-items:center;
    width:28px;height:28px;border-radius:8px;
    background:var(--ar-blue-soft);
    font-size:14px;
}

/* Passage breakdown */
.ar-passages{display:flex;flex-direction:column;gap:16px;}
.ar-passage-row{padding:0;background:transparent;border:none;}
.ar-passage-head{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:8px;
}
.ar-passage-name{
    display:inline-flex;align-items:center;gap:8px;
    font-weight:500;font-size:14px;color:var(--ar-text);
}
.ar-passage-ico{
    display:inline-grid;place-items:center;
    width:28px;height:28px;border-radius:8px;
    background:var(--ar-blue-soft);color:var(--ar-blue);
    font-size:14px;
}
.ar-passage-count{
    font-weight:700;font-size:14px;color:var(--ar-text);
    font-variant-numeric:tabular-nums;
}
.ar-passage-bar{
    height:22px;background:var(--ar-bg-elev);
    border-radius:999px;overflow:hidden;position:relative;
}
.ar-passage-bar > span{
    display:block;height:100%;
    background:linear-gradient(90deg,var(--ar-blue),var(--ar-blue-2));
    border-radius:999px;transform-origin:left center;
    animation:ar-bar-grow .9s cubic-bezier(.2,.8,.4,1) both;
    animation-delay:.7s;
    position:relative;
}
.ar-passage-row.perf-low  .ar-passage-bar > span{background:linear-gradient(90deg,#f87171,var(--ar-red));}
.ar-passage-row.perf-mid  .ar-passage-bar > span{background:linear-gradient(90deg,#fbbf24,var(--ar-amber));}
.ar-passage-row.perf-high .ar-passage-bar > span{background:linear-gradient(90deg,#34d399,var(--ar-green));}
.ar-passage-pct{
    /* Vertical centering bằng inset 0 + flex align. Mix-blend-mode: difference
       cho text adaptive contrast: trên empty gray bar → render dark, trên
       colored fill (green/amber/red) → render trắng nổi bật. Đảm bảo "0%"
       cũng visible trên bar trống. */
    position:absolute;
    top:0;
    bottom:0;
    right:14px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-size:11px;font-weight:800;color:#fff;font-style:normal;
    letter-spacing:.02em;
    line-height:1;
    font-variant-numeric:tabular-nums;
    animation:ar-num-fade .5s ease-out 1.4s both;
    pointer-events:none;
    z-index:3;
    mix-blend-mode:difference;
}
@keyframes ar-bar-grow{
    from{transform:scaleX(0);}
    to{transform:scaleX(1);}
}

/* QType grid */
.ar-qtypes{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
@media (max-width:768px){.ar-qtypes{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.ar-qtypes{grid-template-columns:1fr;}}
.ar-qtype-card{
    background:var(--ar-bg-soft);
    border:1px solid var(--ar-border);
    border-radius:var(--ar-radius-sm);
    padding:14px 16px;
    transition:border-color .2s, transform .2s, box-shadow .2s;
}
.ar-qtype-card:hover{
    border-color:var(--ar-blue);
    transform:translateY(-2px);
    box-shadow:var(--ar-shadow-sm);
}
.ar-qtype-name{
    font-weight:500;font-size:13px;color:var(--ar-text);
    margin-bottom:8px;line-height:1.3;min-height:34px;
}
.ar-qtype-num{
    font-size:22px;font-weight:700;color:var(--ar-blue);
    margin-bottom:8px;letter-spacing:-.02em;line-height:1;
    font-variant-numeric:tabular-nums;
}
.ar-qtype-total{font-size:14px;color:var(--ar-text-mute);font-weight:500;margin-left:2px;}
.ar-qtype-card.perf-low  .ar-qtype-num{color:var(--ar-red);}
.ar-qtype-card.perf-mid  .ar-qtype-num{color:var(--ar-amber);}
.ar-qtype-card.perf-high .ar-qtype-num{color:var(--ar-green);}
.ar-qtype-card.perf-low  .ar-qtype-bar > span{background:linear-gradient(90deg,#f87171,var(--ar-red));}
.ar-qtype-card.perf-mid  .ar-qtype-bar > span{background:linear-gradient(90deg,#fbbf24,var(--ar-amber));}
.ar-qtype-card.perf-high .ar-qtype-bar > span{background:linear-gradient(90deg,#34d399,var(--ar-green));}
.ar-qtype-bar{
    height:5px;background:var(--ar-bg-elev);
    border-radius:999px;overflow:hidden;
}
.ar-qtype-bar > span{
    display:block;height:100%;
    background:linear-gradient(90deg,var(--ar-blue),var(--ar-blue-2));
    border-radius:999px;transform-origin:left center;
    animation:ar-bar-grow .9s cubic-bezier(.2,.8,.4,1) both;
    animation-delay:.75s;
}

/* Feedback (tier-coloured Apple-style cards) */
.ar-feedback{
    background:var(--ar-bg);
    border:1px solid var(--ar-border);
    border-left:4px solid var(--ar-red);
    border-radius:var(--ar-radius);
    padding:22px 26px;margin-top:18px;
    box-shadow:var(--ar-shadow-sm);
}
.ar-feedback-mid {border-left-color:var(--ar-amber);}
.ar-feedback-high{border-left-color:var(--ar-green);}
.ar-feedback-top {border-left-color:var(--ar-blue);}

.ar-feedback-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.ar-feedback-icon{font-size:22px;line-height:1;}
.ar-feedback-title{
    font-size:17px;font-weight:700;
    color:var(--ar-text);
    letter-spacing:-.01em;
    margin:0;
}

.ar-feedback-section{margin-top:14px;}
.ar-feedback-label{
    font-size:11px;font-weight:600;
    letter-spacing:.06em;
    color:var(--ar-text-mute);
    text-transform:uppercase;
    margin-bottom:6px;
}
.ar-feedback p{
    font-size:14px;line-height:1.65;color:var(--ar-text);
    margin:0;
}

.ar-result-actions{margin-top:24px;text-align:center;}
.ar-btn-detail{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 24px;
    background:var(--ar-blue);
    color:#fff;border:none;border-radius:10px;cursor:pointer;
    font-family:inherit;
    font-size:14px;font-weight:600;letter-spacing:-.01em;
    box-shadow:var(--ar-shadow-sm);
    transition:transform .15s, background .15s, box-shadow .15s;
}
.ar-btn-detail:hover{background:var(--ar-blue-2);transform:translateY(-1px);box-shadow:var(--ar-shadow-md);}

/* ── Answer summary table (per-passage chips) ── */
.ar-answers-section{padding:24px 26px;}
.ar-answers-legend{
    display:inline-flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;
    padding:10px 14px;background:var(--ar-bg-soft);
    border:1px solid var(--ar-border);border-radius:var(--ar-radius-sm);
}
.ar-ans-legend-pill{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;color:var(--ar-text-mute);font-weight:500;
}
.ar-ans-legend-pill > span{
    display:inline-block;width:10px;height:10px;border-radius:3px;
}
.ar-ans-legend-pill.correct > span{background:var(--ar-green);}
.ar-ans-legend-pill.wrong   > span{background:var(--ar-red);}
.ar-ans-legend-pill.blank   > span{background:var(--ar-text-faint);}

.ar-answers-groups{display:flex;flex-direction:column;gap:12px;}
.ar-answers-group{
    background:var(--ar-bg-soft);
    border:1px solid var(--ar-border);
    border-radius:var(--ar-radius);
    overflow:hidden;
}
.ar-answers-group[open]{box-shadow:var(--ar-shadow-sm);}
.ar-answers-summary{
    display:flex;align-items:center;gap:12px;
    padding:14px 18px;cursor:pointer;
    list-style:none;user-select:none;
    transition:background .15s;
}
.ar-answers-summary::-webkit-details-marker{display:none;}
.ar-answers-summary:hover{background:var(--ar-bg);}
.ar-answers-group-name{
    display:inline-flex;align-items:center;gap:10px;flex:1;min-width:0;
    font-size:14.5px;font-weight:600;color:var(--ar-text);
}
.ar-answers-group-stat{
    font-size:13px;color:var(--ar-text-mute);font-weight:500;
    font-variant-numeric:tabular-nums;
}
.ar-answers-group-stat strong{color:var(--ar-green);font-weight:700;}
.ar-answers-chev{
    color:var(--ar-text-mute);
    transition:transform .25s ease-out;
    flex-shrink:0;
}
.ar-answers-group[open] .ar-answers-chev{transform:rotate(180deg);}

.ar-answers-grid{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:8px;padding:14px 18px 18px;background:var(--ar-bg);
    border-top:1px solid var(--ar-border);
}
@media (max-width:540px){.ar-answers-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}}
.ar-ans-cell{
    display:flex;align-items:center;gap:6px;
    padding:8px 10px;border-radius:8px;
    font-size:12.5px;font-weight:600;
    border:1px solid;cursor:default;
    transition:transform .15s, box-shadow .15s;
    min-width:0;
}
.ar-ans-cell:hover{transform:translateY(-1px);box-shadow:var(--ar-shadow-sm);}
.ar-ans-no{
    flex-shrink:0;font-size:11px;font-weight:700;
    min-width:24px;text-align:right;letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
    color:var(--ar-text-mute);
}
.ar-ans-arrow{flex-shrink:0;font-size:11px;opacity:.5;}
.ar-ans-val{
    flex:1;min-width:0;
    font-weight:700;letter-spacing:.01em;
    line-height:1.35;
    word-break:break-word;
    overflow-wrap:anywhere;
}
.ar-ans-correct{
    background:var(--ar-green-soft);
    border-color:rgba(16,185,129,.35);
    color:var(--ar-green);
}
.ar-ans-correct .ar-ans-no{color:#047857;}
.ar-ans-wrong{
    background:var(--ar-red-soft);
    border-color:rgba(239,68,68,.35);
    color:var(--ar-red);
}
.ar-ans-wrong .ar-ans-no{color:#b91c1c;}
/* Wrong chip dual display: user answer (gạch ngang) · correct answer (đậm xanh).
   Flex-wrap để dài quá thì xuống dòng (vd "Mondays · Saturday"). Cell sẽ tự
   grow vertically nếu wrap — grid columns vẫn uniform 160px. */
.ar-ans-wrong .ar-ans-val{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:2px 5px;
}
.ar-ans-wrong .ar-ans-val-user{
    text-decoration:line-through;
    text-decoration-thickness:1.5px;
    opacity:.55;
    font-weight:600;
    /* Each part KHÔNG break giữa từ — chỉ wrap giữa user vs correct khi cần */
    white-space:nowrap;
}
.ar-ans-wrong .ar-ans-val-sep{
    opacity:.45;font-weight:400;
}
.ar-ans-wrong .ar-ans-val-correct{
    color:#047857;
    font-weight:800;
    white-space:nowrap;
}
html.ae-dark-mode .ar-ans-wrong .ar-ans-val-correct{color:#34d399;}
/* Cell với multi-line content: align baseline để [5] [→] [val first line] thẳng
   đáy, val có thể wrap xuống dòng dưới mà không lệch số/arrow. */
.ar-ans-cell{align-items:baseline;}
.ar-ans-blank{
    background:var(--ar-bg-elev);
    border-color:var(--ar-border);
    color:var(--ar-text-faint);
}
/* Blank cells display the correct answer in muted style — visually
   distinct from cells the user actually answered (italic + lighter weight). */
.ar-ans-blank .ar-ans-val{
    font-weight:500;font-style:italic;opacity:.85;
}
.ar-ans-blank .ar-ans-arrow{opacity:.35;}

/* ── Meta pills under hero (timestamp + duration) ── */
.ar-result-meta{
    display:inline-flex;flex-wrap:wrap;gap:8px;justify-content:center;
    margin-top:14px;position:relative;z-index:2;
    animation:ar-num-fade .5s ease-out .2s both;
}
.ar-meta-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:999px;
    background:var(--ar-bg-soft);
    border:1px solid var(--ar-border);
    color:var(--ar-text-mute);
    font-size:12px;font-weight:500;
}
.ar-meta-pill .ico{font-size:13px;line-height:1;}

/* ── Feedback band badge (Band X.X next to title) ── */
.ar-feedback-head > div{flex:1;min-width:0;}
.ar-feedback-band{
    font-size:11px;font-weight:700;letter-spacing:.06em;
    color:var(--ar-text-mute);text-transform:uppercase;
    margin-top:2px;
}
.ar-feedback-icon{
    width:48px;height:48px;border-radius:12px;
    display:grid;place-items:center;
    background:var(--ar-bg-soft);
    border:1px solid var(--ar-border);
    font-size:24px;line-height:1;flex-shrink:0;
    animation:ar-icon-bounce 2.4s ease-in-out infinite;
}
@keyframes ar-icon-bounce{
    0%,100%{transform:translateY(0) rotate(-2deg);}
    50%    {transform:translateY(-3px) rotate(2deg);}
}
.ar-feedback-low  .ar-feedback-icon{background:var(--ar-red-soft);  border-color:rgba(239,68,68,.3);}
.ar-feedback-mid  .ar-feedback-icon{background:var(--ar-amber-soft);border-color:rgba(245,158,11,.3);}
.ar-feedback-high .ar-feedback-icon{background:var(--ar-green-soft);border-color:rgba(16,185,129,.3);}
.ar-feedback-top  .ar-feedback-icon{background:var(--ar-blue-soft); border-color:rgba(59,130,246,.3);}

/* ── Confetti (band ≥ 7) — pure CSS ── */
.ar-confetti{
    position:fixed;inset:0;pointer-events:none;
    z-index:99999;overflow:hidden;
}
.ar-confetti-piece{
    position:absolute;top:-12px;
    width:8px;height:14px;border-radius:2px;
    background:var(--ar-blue);
    animation:ar-confetti-fall var(--cdur,3s) cubic-bezier(.4,.1,.3,1) var(--cd,0s) both;
    transform-origin:center;
}
@keyframes ar-confetti-fall{
    0%  {transform:translate(0,0) rotate(0);opacity:0;}
    10% {opacity:1;}
    100%{transform:translate(var(--cx,0),var(--cy,80vh)) rotate(720deg);opacity:0;}
}

/* Mobile */
@media (max-width:640px){
    .ar-history{padding:18px;margin:18px 0;}
    .ar-history-table th,.ar-history-table td{padding:12px 14px;}
    .ar-result-head{padding:24px 18px 20px;}
    .ar-result-head h2.ar-result-title-main{font-size:20px;}
    .ar-result-body{padding:0 16px;}
    .ar-band-circle{width:180px;height:180px;}
    .ar-band-inner{width:130px;height:130px;}
    .ar-band-num{font-size:42px;}
    .ar-result-section{padding:18px 16px;}
    .ar-feedback-icon{width:40px;height:40px;font-size:20px;}
}

/* ─── "Xem lịch sử chi tiết" CTA — link sang /tai-khoan/lich-su/?history=X ─── */
.ar-result-actions{
    display:flex;
    justify-content:center;
    padding:8px 28px 28px;
}
.ar-btn-detail{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    background:var(--ar-bg);
    border:1px solid var(--ar-border-strong);
    border-radius:999px;
    color:var(--ar-text);
    font-size:14px;
    font-weight:600;
    letter-spacing:.01em;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.ar-btn-detail:hover{
    transform:translateY(-1px);
    border-color:var(--ar-blue);
    background:var(--ar-blue-soft);
    color:var(--ar-blue);
    box-shadow:var(--ar-shadow-md);
    text-decoration:none;
}
.ar-btn-detail:active{transform:translateY(0);}
.ar-btn-detail svg{flex-shrink:0;transition:transform .15s ease;}
.ar-btn-detail:hover svg:last-child{transform:translate(2px,-2px);}
.ar-btn-detail span{white-space:nowrap;}

/* Dark mode — theme dark-mode.css có rule `html.ae-dark-mode a[href*="tai-khoan"]`
   match URL button mình (vì link sang /tai-khoan/lich-su/). Specificity ngang
   nhau (0,2,1) → theme load sau thắng → border bị mất.

   Fix: chain class lên để bump specificity lên (0,3,1) → win cascade.
   Plus !important làm safety belt. */
html.ae-dark-mode .ar-result .ar-btn-detail,
html.ae-dark-mode .ar-detail-overlay .ar-btn-detail{
    background:#1e293b !important;
    border:2px solid #94a3b8 !important;
    color:#f1f5f9 !important;
    box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.4) !important;
}
html.ae-dark-mode .ar-result .ar-btn-detail:hover,
html.ae-dark-mode .ar-detail-overlay .ar-btn-detail:hover{
    background:rgba(59,130,246,.22) !important;
    border-color:#60a5fa !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
               0 6px 18px rgba(0,0,0,.5),
               0 0 0 1px rgba(96,165,250,.5) !important;
}

@media (max-width:640px){
    .ar-result-actions{padding:8px 16px 24px;}
    .ar-btn-detail{padding:11px 18px;font-size:13px;}
}

/* ─── AI-graded shared UI moved out ─── */
/* Class .ar-criterion-*, .ar-ai-feedback-*, .ar-ai-comp-* đã chuyển sang
   core/assets/css/skill-result-ai.css để Writing + Speaking module dùng
   chung mà không phải load Reading CSS riêng. Reading template KHÔNG dùng
   các class đó (Reading có tally/qtypes/answers riêng phía trên). */