/* UngDungAI reading shell — three-column pattern adapted from CiCC template. */
.uai-reading-shell{display:grid;grid-template-columns:200px minmax(0,760px) var(--uai-utility-width,300px);grid-template-areas:"toc main utility";justify-content:center;gap:24px;align-items:start;max-width:1320px;margin:0 auto;padding:24px var(--site-gutter,24px) 0}
.uai-reading-main{min-width:0;max-width:760px;position:relative}
.uai-reading-sidebar{min-width:0}.uai-reading-sidebar--toc{grid-area:toc}.uai-reading-main{grid-area:main}.uai-reading-sidebar--utility{grid-area:utility}.uai-reading-sidebar--toc,.uai-reading-sidebar--utility{position:sticky;top:96px}
.uai-reading-card{padding:18px;border:1px solid #dbe4f0;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.uai-reading-eyebrow{margin:0 0 8px;color:#2563eb;font-size:10px;font-weight:800;letter-spacing:.14em}.uai-reading-position{display:block;color:#0f172a;font-size:14px}
.uai-reading-toc{margin-top:14px}.uai-reading-toc:empty:after{content:'Bài viết chưa có mục lục.';display:block;color:#94a3b8;font-size:12px;line-height:1.5}.uai-reading-toc ol{margin:0;padding-left:17px}.uai-reading-toc li{margin:7px 0;color:#64748b;font-size:12px;line-height:1.4}.uai-reading-toc li.is-sub{margin-left:9px;font-size:11px}.uai-reading-toc a{color:#475569;text-decoration:none}.uai-reading-toc a:hover,.uai-reading-toc a.is-active{color:#2563eb;font-weight:700}
.uai-reading-progress{height:3px;margin-bottom:20px;border-radius:99px;background:#e2e8f0;overflow:hidden}.uai-reading-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#2563eb,#06b6d4);transition:width .15s ease}
.uai-reading-ai__intro{padding:2px 2px 10px}.uai-reading-ai h2{margin:0 0 6px;color:#0f172a;font:800 18px/1.2 var(--font-heading,'Plus Jakarta Sans',sans-serif)}.uai-reading-ai__hint{margin:0;color:#64748b;font-size:11px;line-height:1.4}.uai-reading-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.uai-action-card{display:grid;grid-template-columns:25px minmax(0,1fr);gap:0 7px;padding:10px;border:1px solid #dbe4f0;border-radius:13px;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.04);transition:transform .2s,box-shadow .2s}.uai-action-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,23,42,.08)}.uai-action-card__icon{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:8px;font-size:15px;font-weight:800}.uai-action-card strong{display:block;color:#0f172a;font:800 12px/1.2 var(--font-heading,'Plus Jakarta Sans',sans-serif)}.uai-action-card p{margin:3px 0 7px;color:#64748b;font-size:10px;line-height:1.35;min-height:27px}.uai-action-card button{grid-column:1/-1;width:100%;padding:7px 8px;border:1px solid currentColor;border-radius:8px;background:transparent;text-align:left;font:700 10px/1.2 inherit;cursor:pointer}.uai-action-card button span{float:right;font-size:14px;line-height:10px}.uai-action-card button:hover{color:#fff}.uai-action-card--understand{border-color:#bfdbfe}.uai-action-card--understand .uai-action-card__icon{background:#dbeafe;color:#2563eb}.uai-action-card--understand button{color:#2563eb}.uai-action-card--understand button:hover{background:#2563eb}.uai-action-card--practice{border-color:#ddd6fe}.uai-action-card--practice .uai-action-card__icon{background:#ede9fe;color:#7c3aed}.uai-action-card--practice button{color:#7c3aed}.uai-action-card--practice button:hover{background:#7c3aed}.uai-action-card--discover{border-color:#a5f3fc}.uai-action-card--discover .uai-action-card__icon{background:#cffafe;color:#0891b2}.uai-action-card--discover button{color:#0891b2}.uai-action-card--discover button:hover{background:#0891b2}.uai-action-card--apply{border-color:#bbf7d0}.uai-action-card--apply .uai-action-card__icon{background:#dcfce7;color:#16a34a}.uai-action-card--apply button{color:#16a34a}.uai-action-card--apply button:hover{background:#16a34a}.uai-reading-actions button:disabled{opacity:.55;cursor:wait}.uai-reading-result{max-height:360px;margin-top:14px;padding:12px;border:1px solid #dbe4f0;border-radius:12px;background:#f8fafc;color:#334155;font-size:12px;line-height:1.6;overflow:auto;white-space:pre-wrap}.uai-reading-result.is-error{color:#b91c1c}.uai-reading-retry{margin-top:10px;border:0;background:none;color:#2563eb;font-size:12px;cursor:pointer}.uai-reading-meta{display:grid;gap:9px;margin-top:16px;color:#64748b;font-size:12px}.uai-reading-meta button{text-align:center;background:#fff;width:100%;padding:10px 11px;border:1px solid #bfdbfe;border-radius:10px;color:#1d4ed8;font:600 12px/1.3 inherit;cursor:pointer}.uai-reading-meta button:hover{background:#dbeafe}
@media(max-width:1180px){.uai-reading-shell{grid-template-columns:190px minmax(0,1fr) var(--uai-utility-width,280px);gap:16px}.uai-reading-main{max-width:none}}
@media(max-width:900px){.uai-reading-shell{grid-template-columns:1fr;grid-template-areas:"utility" "main" "toc";max-width:800px;padding-top:12px}.uai-reading-sidebar--toc,.uai-reading-sidebar--utility{position:static}.uai-reading-sidebar--utility .uai-reading-ai{border-radius:20px}.uai-reading-sidebar--toc .uai-reading-card{padding:14px}.uai-reading-toc ol{columns:2;column-gap:24px}.uai-reading-toc li{break-inside:avoid}}
@media(max-width:560px){.uai-reading-toc ol{columns:1}.uai-reading-shell{padding-left:16px;padding-right:16px}.uai-reading-card{padding:15px}}
.uai-action-card__result{grid-column:1/-1;max-height:260px;margin-top:4px;padding:10px;border:1px solid #dbe4f0;border-radius:10px;background:#f8fafc;color:#334155;font-size:11px;line-height:1.5;overflow:auto}.uai-action-card__result p{min-height:0;margin:0 0 7px}.uai-action-card__result h1,.uai-action-card__result h2,.uai-action-card__result h3{margin:8px 0 4px;color:#0f172a;font-size:12px;line-height:1.3}.uai-action-card__result .uai-ai-md-space{height:3px}.uai-action-card__result.is-error{color:#b91c1c}.uai-action-card__retry{grid-column:1/-1!important;margin:0!important;padding:0!important;border:0!important;background:none!important;color:#2563eb!important;font-size:11px!important;text-align:left!important}.uai-action-card__retry:hover{background:none!important}

/* Reading-first refinement: keep every AI action legible in one vertical path. */
.uai-reading-sidebar--utility{max-height:calc(100vh - 112px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.uai-reading-actions{grid-template-columns:1fr;gap:10px}.uai-action-card{grid-template-columns:30px minmax(0,1fr);padding:12px}.uai-action-card__icon{width:28px;height:28px;font-size:17px}.uai-action-card strong{font-size:13px}.uai-action-card p{margin:4px 0 8px;font-size:11px;line-height:1.4;min-height:0}.uai-action-card button{padding:8px 9px;font-size:11px}.uai-action-card__result{max-height:300px}
.uai-reading-resizer{position:absolute;z-index:3;left:-15px;top:26px;width:12px;height:78px;padding:0;border:1px solid #94a3b8;border-radius:8px;background:#e2e8f0;color:#475569;box-shadow:0 3px 10px rgba(15,23,42,.12);font:700 12px/1 inherit;cursor:ew-resize;transition:width .15s,background .15s,box-shadow .15s}.uai-reading-resizer:hover,.uai-reading-resizer:focus-visible{width:16px;background:#bfdbfe;color:#1d4ed8;box-shadow:0 4px 14px rgba(37,99,235,.25);outline:2px solid #93c5fd;outline-offset:2px}.uai-reading-shell.is-resizing,.uai-reading-shell.is-resizing *{cursor:ew-resize!important;user-select:none!important}
@media(max-width:900px){.uai-reading-sidebar--utility{max-height:none;overflow:visible}}
@media(max-width:900px){.uai-reading-resizer{display:none}}

/* Compact spacing: reserve the reading viewport for content, not decoration. */
.uai-reading-shell{gap:18px;padding-top:16px}.uai-reading-ai__intro{padding:0 1px 7px}.uai-reading-ai h2{margin-bottom:4px}.uai-reading-actions{gap:7px}.uai-action-card{padding:9px}.uai-action-card__icon{width:26px;height:26px;font-size:16px}.uai-action-card p{margin:2px 0 6px}.uai-action-card button{padding:7px 8px}.uai-reading-meta{gap:7px;margin-top:12px}.uai-reading-card{padding:14px}.uai-action-card__result{padding:8px}.uai-action-card__result h1,.uai-action-card__result h2,.uai-action-card__result h3{margin:5px 0 3px}
