/* Trang chi tiết bài viết: bố cục đọc và màu nhận diện ABC Bakery. */
body.art-page:not(.h-page){background:#fffdf9;color:var(--abc-ink)}
body.art-page:not(.h-page):before{display:none}
body.art-page:not(.h-page) .s-hd{background:#fffdf9;box-shadow:none;border-bottom:1px solid var(--abc-line)}
body.art-page:not(.h-page) .art-wrap{padding:1.5rem 0 4rem}
body.art-page:not(.h-page) .art-wrap>.container-lg{width:100%;padding:0 1.25rem;border-radius:0;background:none;box-shadow:none}
.art-wrap [hidden]{display:none!important}
.art-wrap .breadcrumb{margin-bottom:2rem;gap:.35rem 0;line-height:1.65;overflow-wrap:anywhere}
.art-wrap .breadcrumb-item:last-child{min-width:0}
.art-hero{display:grid;gap:1.75rem;padding-bottom:2rem;border-bottom:1px solid var(--abc-line)}
.art-head{align-self:center;min-width:0}
.art-head>.eyebrow{display:inline-block;margin-bottom:1rem;font-size:.72rem}
body.art-page .art-head h1{margin:0 0 1.2rem;color:var(--abc-primary);font-size:clamp(1.9rem,4vw,3.15rem);font-weight:780;letter-spacing:-.045em;line-height:1.16;overflow-wrap:anywhere;text-wrap:balance}
.art-intro{margin:0;color:#66575b;font-size:1.05rem;line-height:1.8}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.5rem;font-size:.8rem}
.art-by{display:flex;align-items:center;gap:.7rem;font-weight:700}
.art-by>span:last-of-type{display:grid;gap:.15rem}
.art-by small{color:var(--abc-muted);font-size:.7rem;font-weight:400}
.art-mark{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border:1px solid #dac8bc;border-radius:50%;color:var(--abc-primary);background:#f7eee3;font-family:Georgia,serif;font-size:.85rem;letter-spacing:-.06em}
.art-dates{display:grid;gap:.25rem;color:var(--abc-muted);font-size:.74rem}
.art-dates time{white-space:nowrap;color:#55474c}
.art-cover{overflow:hidden;aspect-ratio:4/3;align-self:center;margin:0;border-radius:1.25rem;background:var(--abc-soft)}
.art-cover img{display:block;width:100%;height:100%;object-fit:cover}
.art-no-cover .art-head{max-width:900px}
.art-layout{display:grid;gap:1.75rem;padding-top:2rem}
.art-main,.art-aside{min-width:0}
.art-main{max-width:780px}
.art-toc{border-top:2px solid var(--abc-primary);border-bottom:1px solid var(--abc-line);background:#f9f3ed}
.art-toc summary{padding:1rem;color:var(--abc-primary);font-size:.9rem;font-weight:750;cursor:pointer}
.art-toc ol{display:grid;gap:.2rem;max-height:42vh;overflow:auto;margin:0;padding:0 .8rem 1rem;list-style:none;scrollbar-width:thin}
.art-toc a{display:block;padding:.5rem .65rem;border-left:2px solid transparent;color:#66575b;font-size:.82rem;line-height:1.55;overflow-wrap:anywhere}
.art-toc a:hover,.art-toc a:focus-visible{border-color:var(--abc-primary);color:var(--abc-primary);background:#efe3d9}
.art-toc .art-sub a{padding-left:1.35rem;font-size:.77rem}
.art-discover{display:none}
.art-content{color:#392e31;font-size:1.0625rem;line-height:1.9;overflow-wrap:anywhere}
.art-content>:first-child{margin-top:0}
.art-content>:last-child{margin-bottom:0}
.art-content p,.art-content ul,.art-content ol{margin-bottom:1.4rem}
.art-content li{margin-bottom:.4rem}
.art-content :is(h2,h3,h4,h5,h6){margin:2rem 0 1rem;color:var(--abc-ink);font-weight:750;line-height:1.35;letter-spacing:-.025em;scroll-margin-top:1.5rem}
.art-content h2{font-size:clamp(1.4rem,2.5vw,1.85rem)}
.art-content h3{font-size:clamp(1.2rem,2vw,1.4rem)}
.art-content :is(h4,h5,h6){font-size:1.125rem}
.art-content a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art-content img{max-width:100%!important;height:auto!important;border-radius:.65rem}
.art-content figure{max-width:100%;margin:1.75rem 0}
.art-content figcaption{margin-top:.65rem;color:var(--abc-muted);font-size:.85rem;line-height:1.6;text-align:center}
.art-content blockquote{margin:1.75rem 0;padding:1.25rem 1.5rem;border-left:3px solid var(--abc-primary);background:var(--abc-soft);color:var(--abc-primary);font-size:1.15rem}
.art-content blockquote>:last-child{margin-bottom:0}
.art-content :is(iframe,video){max-width:100%;aspect-ratio:16/9;height:auto}
.art-content pre{max-width:100%;overflow:auto;padding:1rem;background:var(--abc-soft);white-space:pre}
.art-content table{display:block;max-width:100%;overflow-x:auto;margin:1.5rem 0;border-collapse:collapse;font-size:.92rem}
.art-content th,.art-content td{padding:.75rem 1rem;border:1px solid var(--abc-line)}
.art-content th{background:var(--abc-soft)}
.art-table{max-width:100%;overflow-x:auto;margin:1.5rem 0;overscroll-behavior-x:contain}
.art-table table{display:table;width:100%;max-width:none;min-width:480px;margin:0}
.art-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--abc-line)}
.art-back{font-size:.85rem;font-weight:700}
.art-share{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.8rem}
.art-share>span:first-child{color:var(--abc-muted)}
.art-share .btn{min-height:44px;padding:.5rem .8rem;font-size:.78rem}
.art-copy-status:not(:empty),.art-copy-url{flex-basis:100%}
.art-copy-status{color:var(--abc-primary)}
.art-related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--abc-line)}
.art-related-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.art-related-head h2{margin:.5rem 0 0;font-size:clamp(1.5rem,3vw,2rem);font-weight:750;letter-spacing:-.035em}
.art-related-head>a{font-size:.82rem;font-weight:700}
.art-card{position:relative;height:100%;overflow:hidden;border:1px solid var(--abc-line);border-radius:1rem;background:#fff}
.art-card-img{display:block;aspect-ratio:8/5;overflow:hidden;background:#f5ecdf}
.art-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.art-card-img .art-card-logo{padding:2.5rem;object-fit:contain}
.art-card-body{padding:1.25rem}
.art-card .eyebrow{font-size:.65rem}
.art-card h3{margin:.6rem 0 .75rem;font-size:1.12rem;font-weight:750;line-height:1.45}
.art-card h3 a{color:var(--abc-ink)}
.art-card h3 a:after{position:absolute;inset:0;content:""}
.art-card h3 a:hover{color:var(--abc-primary)}
.art-card p{display:-webkit-box;overflow:hidden;margin-bottom:1rem;color:var(--abc-muted);font-size:.85rem;line-height:1.7;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.art-read{color:var(--abc-primary);font-size:.78rem;font-weight:750}
.art-wrap :is(a,button,summary,input,[tabindex]):focus-visible{outline:2px solid var(--abc-primary);outline-offset:4px}
.art-card:focus-within{outline:2px solid var(--abc-primary);outline-offset:4px}
@media(min-width:768px){
	body.art-page:not(.h-page) .art-wrap{padding-top:2rem}
	.art-hero{gap:2.5rem;padding-bottom:3rem}
	.art-related{margin-top:4rem;padding-top:2.5rem}
}
@media(min-width:992px){
	.art-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3rem}
	.art-no-cover{grid-template-columns:1fr}
	.art-cover{aspect-ratio:1/1}
	.art-layout{grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:3.5rem;padding-top:3rem}
	.art-aside{grid-column:2;grid-row:1;position:sticky;top:1.5rem}
	.art-main{grid-column:1;grid-row:1}
	.art-discover{display:block;margin-top:1.5rem;padding:1.5rem 0;border-top:1px solid var(--abc-line)}
	.art-discover .eyebrow{font-size:.65rem}
	.art-discover h2{margin:.65rem 0;font-family:Georgia,serif;font-size:1.8rem;line-height:1.2;color:var(--abc-primary)}
	.art-discover p{color:var(--abc-muted);font-size:.86rem;line-height:1.7}
	.art-discover .btn{font-size:.77rem;padding:.75rem}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
	.art-card:hover .art-card-img img{transform:scale(1.035)}
}
@media(prefers-reduced-motion:reduce){
	html:has(body.art-page){scroll-behavior:auto}
	.art-card-img img{transition:none}
}