/* Shared reading layer for articles and generated product blogs. */
:root{--reading-ink:#17283d;--reading-muted:#526176;--reading-line:#dce3eb;--reading-accent:#0056b8}
.content-page *{box-sizing:border-box}
.content-page :is(h1,h2,h3,p,a,li,span){overflow-wrap:anywhere}
.content-page :is(a,button,input,summary):focus-visible{outline:3px solid #0070d9!important;outline-offset:4px}
.content-page input[type=search]{font-size:16px!important;min-height:44px}
.content-page :is(.art-filter-tab,.cat-btn,.art-cta-btn,.btn-line,.btn-shopee){min-height:44px}
.content-page :is(.art-main,.art-sidebar,.art-card,.article-card,.hero-grid>*,.art-content){min-width:0;max-width:100%}
.content-page .art-layout{grid-template-columns:minmax(0,1fr) 280px;max-width:1200px;gap:40px}
.content-page .art-main h1{font-size:clamp(24px,2.4vw,34px);line-height:1.5;font-weight:800}
.content-page .art-content{font-size:17px;line-height:1.9}
.content-page .art-content :is(article,section,div){max-width:100%;min-width:0}
.content-page .art-content h2{font-size:clamp(20px,2vw,25px);line-height:1.6;scroll-margin-top:120px}
.content-page .art-content h3{font-size:19px;line-height:1.6}
.content-page .art-content img{max-width:100%!important;height:auto!important;object-fit:contain}
.content-page :is(.art-cover img,.card-thumb,.art-card-img img){object-fit:contain;background:#fff}
.content-page .art-cover{aspect-ratio:16/9;box-shadow:none;border:1px solid var(--reading-line)}
.content-page .art-cover img{width:100%;height:100%;max-height:none}
.content-page .art-breadcrumb{flex-wrap:wrap;line-height:1.7}
.content-page .art-breadcrumb>span:last-child{display:none}
.content-page :is(.art-grid,.blog-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.content-page :is(.art-card,.article-card){border-radius:10px;box-shadow:none}
.content-page :is(.art-card h2,.card-title){line-height:1.65}
.content-page .card-footer{flex-wrap:wrap;gap:10px}
.content-page .art-filter-bar>div{min-width:0!important}
.content-page .art-filter-bar{gap:16px!important}
.content-page .art-cta-line{background:#087f3c}
.content-page .art-cta-shopee{background:#b83b17}
.content-page .blog-hero p{color:#d0dbea}
.content-page .reading-table{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--reading-line);border-radius:8px;margin:12px 0 24px;-webkit-overflow-scrolling:touch}
.content-page .reading-table table{width:100%!important;border-collapse:collapse;margin:0!important;font-size:15px;line-height:1.7}
.content-page .reading-table th,.content-page .reading-table td{padding:12px!important;min-width:105px;white-space:normal!important}
.content-page .reading-table th{background:#17324e!important;color:#fff!important;text-align:left}
.content-page .reading-table tr:nth-child(even) td{background:#f5f8fb}
.content-page .reading-table td a{display:inline-flex;align-items:center;min-height:44px}
.reading-table-hint{font-size:13px;color:#526176;margin:16px 0 4px}
.reading-toc{border-block:1px solid #dce3eb;padding:16px 0;margin:24px 0;color:#17324e}
.reading-toc summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.reading-toc ol{padding-left:24px}.reading-toc a{display:block;padding:8px 0;color:#0056b8;line-height:1.7}
.content-page .reading-faq{margin-block:32px}.reading-faq details{border-bottom:1px solid #dce3eb;padding:12px 0}.reading-faq summary{min-height:44px;cursor:pointer;font-weight:700}
.content-page .nav-inner{flex-wrap:wrap;gap:12px}
.content-page .nav-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.content-page .nav-links a{margin:0;min-height:44px;display:inline-flex;align-items:center}
.content-page .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.content-page .hero-title{font-size:clamp(24px,2.5vw,32px);line-height:1.55}
.content-page .hero-img{aspect-ratio:1;object-fit:contain}
.content-page .table-wrapper{max-width:100%}
.content-page .feature-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.content-page .section-head{line-height:1.6}
.content-page .section-card{box-shadow:none}
.content-page.model-page-active{background:#fff}
.content-page .blog-container{min-width:0;max-width:960px}
.content-page .blog-container img{max-width:100%;height:auto}
@media(max-width:600px){.content-page .header-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 16px}.content-page .header-main .brand{grid-column:1}.content-page .header-main .hamburger-button{grid-column:2;grid-row:1;min-width:44px;min-height:44px}.content-page .header-main .global-search{grid-column:1/-1;grid-row:2;width:100%;max-width:none}.content-page .header-main .global-search input{min-width:0;width:100%}.content-page .blog-container{margin:16px 0;padding:20px 16px;border-radius:0}.content-page .hero-title,.content-page .art-main h1{font-weight:700}}
.content-page .home-footer-links a,.content-page .footer-links a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:900px){.content-page .art-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding:24px 20px 40px}.content-page .art-sidebar{position:static}.content-page .hero-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.content-page .art-layout{padding:20px 16px 36px}.content-page .art-content{font-size:16px}.content-page .art-content>article{padding:0!important}.content-page .art-hero h1,.content-page .blog-hero h1{font-size:26px;line-height:1.5}.content-page .art-hero,.content-page .blog-hero{padding:28px 16px}.content-page .art-filter-bar{padding:16px!important}.content-page .art-filter-bar>div{width:100%;max-width:none!important}.content-page .art-prev-next{grid-template-columns:1fr}.content-page .hero-card{padding:18px 16px}.content-page .navbar{position:static}.content-page .hero-grid{gap:20px}.content-page .hero-img{max-height:260px}.content-page .section-card{padding:20px 16px}.content-page .art-grid-wrap{padding-inline:16px}.content-page .live-viewers-badge{display:none}}
@media(prefers-reduced-motion:reduce){.content-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.content-page .article-card:hover{transform:none}}