@import url('tokens.css');
@font-face{font-family:'Be Vietnam Pro';src:url('assets/fonts/bvp-400-vietnamese.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Be Vietnam Pro';src:url('assets/fonts/bvp-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Be Vietnam Pro';src:url('assets/fonts/bvp-600-vietnamese.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Be Vietnam Pro';src:url('assets/fonts/bvp-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Be Vietnam Pro';src:url('assets/fonts/bvp-700-vietnamese.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Be Vietnam Pro';src:url('assets/fonts/bvp-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Be Vietnam Pro';src:url('assets/fonts/bvp-800-vietnamese.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Be Vietnam Pro';src:url('assets/fonts/bvp-800-latin.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jbm-400-vietnamese.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jbm-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jbm-600-vietnamese.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jbm-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}body{padding-left:var(--sidebar-w)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.mono{font-family:var(--font-mono)}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);padding:28px 18px 18px;border-right:1px solid var(--color-border);background:var(--color-bg-alt);display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:9px;padding:0 10px;font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em}.brand-dot,.status i,.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--color-brand);box-shadow:var(--shadow-glow)}.brand-sub{padding:4px 10px 28px;color:var(--color-text-muted);font-size:var(--fs-label)}.nav-group+.nav-group{margin-top:24px}.nav-label,.eyebrow{font-size:var(--fs-label);letter-spacing:var(--tracking-label);font-weight:700;color:var(--color-brand-text);text-transform:uppercase}.nav-label{padding:0 10px 8px;color:var(--color-text-muted)}.nav-link{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--fs-body)}.nav-link:hover,.nav-link.active{background:var(--color-brand-a15);color:var(--color-text)}.nav-link.active{box-shadow:inset 2px 0 var(--color-brand);font-weight:700}.nav-icon{width:18px;text-align:center;color:var(--color-brand);font-size:var(--fs-glyph)}.sidebar-bottom{display:flex;align-items:center;gap:8px;margin-top:auto;padding:14px 4px 0;border-top:1px solid var(--color-border)}.profile{display:flex;align-items:center;gap:8px;flex:1;font-size:var(--fs-small)}.profile b,.profile small{display:block}.profile small{color:var(--color-text-muted);font:var(--fs-label) var(--font-mono)}.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);font-weight:800}.theme-toggle,.menu-button,.sheet-close{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-sm)}.theme-toggle{width:32px;height:32px;color:var(--color-brand)}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-sm);padding:10px 16px;font-size:var(--fs-body);font-weight:700;line-height:1;min-height:40px}.btn.primary{background:var(--color-brand);color:var(--color-on-brand)}.btn.subtle{background:var(--color-brand-a15);color:var(--color-brand-text);border:1px solid var(--color-brand-a35)}.btn.small{padding:9px 12px;font-size:var(--fs-small);min-height:34px}.mobile-nav{display:none}.bottom-tabs{display:none}main{max-width:1180px;margin:0 auto;padding:52px 36px 72px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}.hero h1,.page-intro h1,.prepared h1{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.04em;margin:12px 0 18px}.hero h1 em{font-style:normal;color:var(--color-brand)}.lead{max-width:650px;color:var(--color-text-secondary);font-size:var(--fs-lead);line-height:var(--lh-lead);margin:0}.hero-cta{margin-bottom:10px}.section{margin-top:60px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.section h2,.tools h2{font-size:var(--fs-h2);line-height:1.2;margin:8px 0 0;letter-spacing:-.02em}.status,.status-row{display:flex;align-items:center;gap:8px;color:var(--color-text-muted);font-size:var(--fs-small)}.status i,.status-dot{width:7px;height:7px}.start-grid,.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.start-card,.post-card{min-width:0;padding:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-focus)}.start-card{position:relative;min-height:170px}.start-card:hover,.post-card:hover{border-color:var(--color-brand);transform:translateY(-2px)}.card-index,.post-top,.post-meta{font-size:var(--fs-small);color:var(--color-text-muted)}.card-index{color:var(--color-brand-text)}.start-card h3{font-size:var(--fs-h3);margin:32px 0 8px}.start-card p,.post-card p{margin:0;color:var(--color-text-secondary);font-size:var(--fs-body);line-height:1.6}.arrow{position:absolute;right:20px;bottom:18px;color:var(--color-brand);font-size:var(--fs-glyph)}.post-card{display:flex;flex-direction:column;min-height:260px}.post-top{display:flex;gap:8px}.rank{color:var(--color-brand)}.post-card h3{font-size:var(--fs-h3);line-height:1.35;margin:20px 0 8px}.post-meta{margin-top:auto;padding-top:18px}.post-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}.tag{display:inline-flex;padding:4px 7px;border-radius:var(--radius-xs);background:var(--color-brand-a15);color:var(--color-brand-text);font-size:var(--fs-label);letter-spacing:.06em;font-weight:700}.tag.locked{background:var(--color-danger-a06);color:var(--color-danger)}.text-link{color:var(--color-brand-text);font-size:var(--fs-small);font-weight:700}.tools{display:flex;align-items:center;gap:28px;margin-top:60px;padding:18px 20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-read)}.tools h2{font-size:var(--fs-h3)}.tool-chips{display:flex;gap:8px;flex-wrap:wrap}.tool-chip{padding:9px 12px;border:1px solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-text-secondary);font-size:var(--fs-small)}.page-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.page-intro h1,.prepared h1{font-size:var(--fs-display)}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 12px}.filter{padding:8px 13px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:transparent;color:var(--color-text-secondary);font:var(--fs-small) var(--font-mono)}.filter.active,.filter:hover{border-color:var(--color-brand);color:var(--color-brand-text)}.status-row{margin-bottom:16px}.skill-grid .post-card{min-height:290px}.prepared{padding-top:20px}.prepared-card{display:flex;align-items:center;gap:16px;max-width:580px;margin-top:42px;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.prepared-card h2{font-size:var(--fs-h3);margin:0 0 4px}.prepared-card p{margin:0;color:var(--color-text-secondary);font-size:var(--fs-body)}.sheet-backdrop{position:fixed;inset:0;z-index:60;background:var(--color-overlay);display:flex;align-items:flex-end}.menu-sheet{width:100%;padding:22px 20px 34px;border-radius:22px 22px 0 0;background:var(--color-bg-alt);border:1px solid var(--color-border)}.sheet-close{float:right;width:32px;height:32px;font-size:var(--fs-glyph)}.menu-sheet .nav-link{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--color-border);font-size:var(--fs-body)}.sheet-note{padding-top:16px;color:var(--color-text-muted);font:var(--fs-label) var(--font-mono)}[hidden]{display:none!important}@media(max-width:900px){body{padding-left:0}.sidebar{transform:translateX(-105%);transition:transform var(--dur-base) var(--ease-enter);box-shadow:var(--shadow-pop)}.sidebar.open{transform:translateX(0)}.menu-button{display:grid;place-items:center;width:34px;height:34px}.mobile-nav{padding:0 18px}.unused-page-meta,.unused-header-cta{display:none}main{padding:38px 20px 100px}.hero,.page-intro{display:block}.hero h1,.page-intro h1,.prepared h1{font-size:var(--fs-display)}.hero-cta{margin-top:24px}.section{margin-top:46px}.start-grid,.post-grid{grid-template-columns:1fr}.start-card{min-height:140px}.blog-grid .post-card:nth-child(n+3){display:none}.tools{display:block;margin-top:46px}.tool-chips{margin-top:16px}.bottom-tabs{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:40;height:58px;padding:5px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-bg-alt) 92%,transparent);backdrop-filter:blur(14px);box-shadow:var(--shadow-pop)}.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--color-text-muted);font-size:var(--fs-label)}.tab span{font-size:var(--fs-glyph);line-height:1}.tab.active{color:var(--color-brand)}.skill-grid .post-card{min-height:260px}.prepared{padding-top:10px}}
@media (min-width:1px){.theme-toggle{color:var(--color-brand-text)}.arrow,.rank{color:var(--color-brand-text)}}
.tab.active{color:var(--color-brand-text)}

/* Đợt 4: motion nhẹ, chỉ transform và opacity */
.hero h1{isolation:isolate}.hero h1 em{position:relative;z-index:0;white-space:nowrap}.hero h1 em::after{content:"";position:absolute;z-index:-1;left:-.06em;right:-.06em;bottom:.08em;height:.3em;border-radius:999px;background:var(--color-brand);transform:scaleX(0);transform-origin:left center;opacity:.72;animation:marker-sweep .72s cubic-bezier(.22,.75,.25,1) .18s forwards}
.tool-marquee{position:relative;min-width:0;overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.tool-track{display:flex;width:max-content;gap:8px;animation:tools-marquee 24s linear infinite}.tool-track>span{display:flex;gap:8px}.tool-marquee:hover .tool-track{animation-play-state:paused}.tool-chip{white-space:nowrap}
.btn,.start-card,.post-card,.gallery-close,.gallery-dots button{transition:transform var(--dur-base,.2s) var(--ease-enter),opacity var(--dur-base,.2s) ease}.btn:active{transform:scale(.96)}.btn>.icon{transition:transform .2s ease}.btn:hover>.icon{transform:translate(3px,-3px)}
.motion-ready .reveal-item{opacity:0;transform:translateY(14px);animation:stagger-in .52s var(--ease-enter) var(--stagger) forwards}.motion-ready .reveal-item.is-visible{animation-play-state:running}.reveal-item{will-change:transform,opacity}
.blur-up{background:var(--color-brand-a08);opacity:.2;transition:opacity .5s ease}.blur-up.is-loaded{opacity:1}.case-shot img,.post-thumb img{display:block;width:100%;height:100%;object-fit:cover}.case-shot img{object-position:top}
.result-percent{color:var(--color-brand-text);font-weight:800}.case-win .result-percent{white-space:nowrap}
.gallery{transform-origin:var(--origin-x,50%) var(--origin-y,50%);animation:gallery-grow .22s var(--ease-enter) both}.gallery.is-closing{animation:gallery-shrink .18s ease both}.gallery-image-wrap{background:var(--color-brand-a08);border-radius:var(--radius-sm);overflow:hidden}.gallery-image-wrap img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:var(--color-bg)}
@keyframes marker-sweep{to{transform:scaleX(1)}}@keyframes tools-marquee{to{transform:translateX(-50%)}}@keyframes stagger-in{to{opacity:1;transform:translateY(0)}}@keyframes gallery-grow{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes gallery-shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}
@media(max-width:900px){.tools{overflow:hidden}.tool-marquee{margin-top:16px}.tool-track{animation-duration:20s}.gallery{max-height:90vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero h1 em::after{transform:scaleX(1);opacity:.72}.motion-ready .reveal-item{opacity:1;transform:none}.tool-track{transform:none}}

/* Đợt 10b: blog media và callout */
.article-callout{gap:12px;padding:15px 18px}
.article-body .code-block{padding:58px 88px 18px 18px}
.article-callout .callout-icon{flex:0 0 22px;width:22px;height:22px;margin-top:2px}
.callout-content{min-width:0}
.callout-label{display:block;margin:0 0 3px;color:var(--color-text);font-size:var(--fs-label);line-height:1.3}
.callout-content p:last-child{margin-bottom:0}
.article-cover img,.article-body .article-figure img{max-height:640px;object-fit:contain}
.article-cover,.article-body .article-figure{text-align:center}
.article-cover img,.article-body .article-figure img{margin-left:auto;margin-right:auto}
.article-video{background:var(--color-surface)}
.article-video .video-thumb{display:block;width:100%;height:100%;object-fit:cover}
.video-fallback{display:grid;place-items:center;width:100%;height:100%;background:var(--color-surface)}
.video-fallback-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);font-size:var(--fs-h2)}
.video-play{width:64px;height:64px}
.video-play:focus-visible{outline:3px solid var(--color-info);outline-offset:4px}
.video-label{max-width:calc(100% - 28px);padding:4px 7px;border-radius:4px;background:color-mix(in srgb,var(--color-bg) 80%,transparent);color:var(--color-text)}
.article-audio{padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.article-audio audio{display:block;color-scheme:light}
:root:not([data-theme="light"]) .article-audio audio{color-scheme:dark}
.article-body .article-button a.btn{text-decoration-line:none}
.code-block code{display:block;min-width:max-content}
@media(max-width:900px){.article-cover img,.article-body .article-figure img{max-height:75vh}.article-body .code-block{padding-right:82px}.article-video.video-portrait{max-height:75vh}}

/* Đợt 2: icon cục bộ, nội dung chi tiết, form và header mobile */
.icon,.brand-icon{display:inline-block;flex:0 0 auto;width:20px;height:20px;background:currentColor;vertical-align:middle;mask: center/contain no-repeat; -webkit-mask:center/contain no-repeat}.nav-icon{display:none}.nav-link>.icon{color:var(--color-text-muted)}.nav-link.active>.icon,.nav-link:hover>.icon,.tab.active>.icon{color:var(--color-brand-text)}
.icon-house{}.icon-package{}.icon-sparkles{}.icon-newspaper{}.icon-send{}.icon-message-circle-question{}.icon-menu{}.icon-lock{}.icon-moon{}.icon-arrow-up-right{}.icon-x{}.icon-workflow{}.icon-crown{}
.brand-icon{width:18px;height:18px;color:var(--color-text-secondary)}.brand-telegram{}.brand-facebook{}.brand-youtube{}.brand-tiktok{}.brand-github{}.brand-claude{}.brand-cloudflare{}.brand-n8n{}
.nav-link{gap:10px}.nav-link>.icon{width:20px;height:20px}.nav-label-community{margin-top:24px}.unused-header-cta>.icon{width:16px;height:16px}.start-card>.icon{width:22px;height:22px;margin-top:20px;color:var(--color-brand-text)}.start-card h3{margin-top:10px}.arrow>.icon,.text-link>.icon,.btn>.icon{width:14px;height:14px;margin-left:4px}.post-card h3>.icon,.detail-card h2>.icon{width:18px;height:18px;color:var(--color-brand-text);margin-right:7px}.detail,.contact-grid,.community-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.75fr);gap:16px;margin-top:34px}.detail-card{min-width:0;padding:28px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-focus)}.detail-card h2{font-size:var(--fs-h2);line-height:1.18;letter-spacing:-.03em;margin:18px 0 14px}.detail-card>.icon{color:var(--color-brand-text);margin-bottom:14px}.body{color:var(--color-text-secondary);line-height:1.75;max-width:680px}.preview-note{margin:24px 0;padding:18px;border:1px dashed var(--color-danger-a50);border-radius:var(--radius-sm);color:var(--color-placeholder);font:var(--fs-label) var(--font-mono);overflow-wrap:anywhere}.facts{display:flex;flex-direction:column;gap:10px}.fact{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-read)}.fact b{font:var(--fs-label) var(--font-mono);color:var(--color-brand-text);text-transform:uppercase;letter-spacing:.05em}.fact span{font-size:var(--fs-body);color:var(--color-text-secondary);overflow-wrap:anywhere}.prose{max-width:780px;margin:34px auto 0}.prose h3{margin:34px 0 8px;font-size:var(--fs-h3)}.prose .body{font-size:var(--fs-prose)}.lockbox{margin-top:28px;padding:24px;border:1px solid var(--color-brand-a35);border-radius:var(--radius-md);background:var(--color-brand-a08)}.lockbox>.icon{color:var(--color-brand-text)}.lockbox h2{font-size:var(--fs-h3);margin:12px 0 8px}.lockbox p{color:var(--color-text-secondary)}.community-stat{display:flex;align-items:baseline;gap:8px;margin:22px 0}.community-stat strong{font-size:var(--fs-stat);color:var(--color-brand-text)}.community-stat span{color:var(--color-text-muted);font:var(--fs-small) var(--font-mono)}.brand-links{display:flex;gap:14px;margin-top:28px;padding-top:20px;border-top:1px solid var(--color-border)}.brand-links a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.brand-links a:hover .brand-icon{color:var(--color-brand-text)}.faq details{border-bottom:1px solid var(--color-border);padding:16px 0}.faq summary{cursor:pointer;font-weight:700}.faq p{margin:10px 0 0;color:var(--color-text-secondary);font-size:var(--fs-body)}.lead-form{display:grid;gap:14px;margin-top:18px}.lead-form label{display:grid;gap:7px;color:var(--color-text-secondary);font-size:var(--fs-small);font-weight:600}.lead-form input,.lead-form textarea,.lead-form select{width:100%;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:11px 12px;background:var(--color-bg-alt);color:var(--color-text);font:inherit;font-size:var(--fs-body)}.lead-form textarea{min-height:100px;resize:vertical}.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:2px solid var(--color-brand-a50);outline-offset:1px}.robots{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important}.form-status{min-height:20px;margin:0;color:var(--color-text-muted);font-size:var(--fs-small)}.form-status.success{color:var(--color-success)}.form-status.error{color:var(--color-danger)}.form-status.sending{color:var(--color-info)}.community-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.listing-grid,.products-grid{margin-top:26px}.products-grid .post-card{min-height:270px}.mobile-brand,.mobile-brand-dot{display:none}
@media(max-width:900px){.unused-page-title,.unused-page-meta{display:none}.mobile-brand,.mobile-brand-dot{display:block}.mobile-brand{font-size:var(--fs-body);font-weight:800}.mobile-brand-dot{width:8px;height:8px;border-radius:50%;background:var(--color-brand);box-shadow:var(--shadow-glow);margin-left:2px}.mobile-nav{gap:9px}.unused-header-cta{display:inline-flex!important;width:36px;min-height:32px;height:32px;padding:0;margin-left:auto;border-radius:9px}.unused-header-cta{font-size:0}.unused-header-cta>.icon{width:17px;height:17px;margin:0}.menu-button>.icon{width:18px;height:18px}.sidebar-bottom .profile small{max-width:110px;line-height:1.3}.detail,.contact-grid,.community-grid{grid-template-columns:1fr;margin-top:28px}.detail-card{padding:22px}.facts{display:grid;grid-template-columns:1fr 1fr}.fact{padding:13px}.prose{margin-top:28px}.prose .body{font-size:var(--fs-prose)}.start-card>.icon{margin-top:18px}.start-card h3{margin-top:8px}.section-head{align-items:flex-start}.status{white-space:nowrap;margin-top:4px}.post-bottom{align-items:flex-end}.post-bottom .btn{white-space:nowrap}.community-grid{gap:12px}}
@media(max-width:520px){main{padding-top:28px}.hero h1{margin-top:10px}.lead{font-size:var(--fs-lead)}.facts{grid-template-columns:1fr}.tools{padding:16px}.detail-card h2{font-size:var(--fs-h2)}.filters{margin-top:26px}.filters .filter{padding:7px 10px}.brand-links{gap:8px}}
@media(max-width:639px){.choice-grid,.choice-grid--compact,.form-two-col{grid-template-columns:1fr}.choice-card{min-height:54px}.waitlist-detail{grid-template-columns:1fr;margin-top:24px}}

/* leader 24/10: tab đáy gọn một dòng, khoảng cách icon trong nút */
.tab span{font-size:var(--fs-glyph);line-height:1.2;white-space:nowrap}
.btn>.icon{margin-right:6px}
@media(max-width:1099px){.unused-header-cta>.icon{margin:0}}
/* leader 24/10: tag Sắp ra mắt, ảnh đại diện thẻ, xem ảnh sản phẩm */
.tag.soon{background:var(--color-brand);color:var(--color-on-brand)}
.post-thumb{position:relative;display:block;color:var(--color-text);width:100%;margin:12px 0 4px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-bg);cursor:zoom-in;aspect-ratio:16/10}
.post-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform var(--dur-base,.2s) ease}
.post-thumb:hover img{transform:scale(1.03)}
.post-thumb span{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:var(--radius-xs);background:var(--color-bg);color:var(--color-text);font-size:var(--fs-label);border:1px solid var(--color-border)}
button.btn{font:inherit;cursor:pointer}
.gallery{width:min(1100px,94vw);max-height:94vh;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-alt);color:var(--color-text);box-shadow:var(--shadow-pop)}
.gallery::backdrop{background:rgb(0 0 0 / .72)}
.gallery-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:var(--fs-small);color:var(--color-text-secondary)}
.gallery-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-text);cursor:pointer}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:var(--radius-sm);background:var(--color-bg)}
.gallery figcaption{margin-top:10px;font-weight:600}
.gallery-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.gallery-dots{display:flex;gap:8px}
.gallery-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--color-border-strong);cursor:pointer}
.gallery-dots button.on{background:var(--color-brand)}
/* leader 24/10: sidebar avatar + mạng xã hội, chữ to và rõ hơn */
.brand-x{}
.side-profile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 10px 24px;margin-bottom:18px;border-bottom:1px solid var(--color-border)}
.side-avatar{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--color-brand-a15);border:2px solid var(--color-brand-a35);color:var(--color-brand-text);font:700 var(--fs-stat) var(--font-mono)}
.side-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.side-name{margin-top:14px;font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;color:var(--color-text)}
.side-reach{margin-top:4px;font-size:var(--fs-small);color:var(--color-text-secondary)}
.side-reach .ph{color:var(--color-placeholder)}
.side-social{display:flex;gap:10px;margin-top:14px}
.side-social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--color-border-strong);border-radius:50%;color:var(--color-text)}
.side-social a:hover{border-color:var(--color-brand);color:var(--color-brand-text)}
.side-social .brand-icon{width:17px;height:17px}
.side-social a .brand-icon{display:block;margin:0}

.hero+.tools{margin-top:40px}
/* chữ: tăng cỡ, nâng màu phụ trong nền tối */
:root:not([data-theme="light"]){--color-text-secondary:var(--ink-200);--color-text-muted:var(--ink-300)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead)}
.start-card p,.post-card p,.prepared-card p,.faq p,.fact span{font-size:var(--fs-body);line-height:1.6}
.nav-link{font-size:var(--fs-body)}
.nav-label{font-size:var(--fs-label)}
.eyebrow{font-size:var(--fs-label)}
.card-index,.post-top,.post-meta{font-size:var(--fs-small);color:var(--color-text-secondary)}
.unused-page-meta{font-size:var(--fs-small);color:var(--color-text-secondary)}
.status,.status-row{font-size:var(--fs-small);color:var(--color-text-secondary)}
.tag{font-size:var(--fs-label);padding:4px 8px}
.text-link{font-size:var(--fs-small)}
.btn{font-size:var(--fs-body)}
.btn.small{font-size:var(--fs-small)}
.tool-chip{font-size:var(--fs-small);color:var(--color-text)}
.tools h2{font-size:var(--fs-h3)}
.profile{font-size:var(--fs-small)}
.profile small{font-size:var(--fs-label);color:var(--color-text-secondary)}
.profile small .nowrap{white-space:nowrap}
.lead-form label{font-size:var(--fs-small)}
.form-status{font-size:var(--fs-small);color:var(--color-text-secondary)}
.choice-group{margin:0;padding:0;border:0;display:grid;gap:10px}.choice-group legend{padding:0;color:var(--color-text-secondary);font-size:var(--fs-small);font-weight:600}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choice-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr))}.choice-card{position:relative;display:flex!important;align-items:center;gap:10px;min-height:58px;padding:12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg-alt);cursor:pointer}.choice-card:has(input:checked){border-color:var(--color-brand);background:var(--color-brand-a15);color:var(--color-text)}.choice-card:focus-within{outline:2px solid var(--color-brand-a50);outline-offset:1px}.choice-card input{position:absolute;inset:0;width:100%!important;height:100%;margin:0;opacity:0;cursor:pointer}.choice-card input:focus-visible{outline:2px solid var(--color-brand);outline-offset:-3px}.choice-card-icon{color:var(--color-brand-text)}.choice-card-icon .icon,.choice-card-icon .brand-icon{width:19px;height:19px}.required-mark{color:var(--color-danger)}.field-error{display:block;min-height:0;color:var(--color-danger);font-size:var(--fs-small);font-weight:500}.form-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.waitlist-detail{grid-template-columns:minmax(0,1.45fr) minmax(250px,.75fr)}.waitlist-note{align-self:start}.waitlist-home{margin-top:4px}.lead-form a{color:var(--color-brand-text);text-decoration:underline;text-underline-offset:2px}
.menu-sheet .nav-link{font-size:var(--fs-body)}
.sheet-note{font-size:var(--fs-label);color:var(--color-text-secondary)}
.tab{color:var(--color-text-secondary)}
.tab span{font-size:var(--fs-glyph)}
.community-stat span{font-size:var(--fs-small);color:var(--color-text-secondary)}
.preview-note{font-size:var(--fs-label)}
.choice-card input{z-index:1}
@media(max-width:639px){.waitlist-detail{grid-template-columns:1fr}}

/* dot25: trang Liên hệ, form là CTA chính */
.contact-layout{margin-top:34px}.contact-main{width:min(820px,100%)}.contact-form{margin:0;padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-focus)}.need-group,.common-fields,.dynamic-group{display:grid;gap:10px;margin:0 0 22px;padding:0;border:0}.need-group legend,.common-fields legend,.dynamic-group legend{padding:0;color:var(--color-text);font-size:var(--fs-body);font-weight:800}.need-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.need-card{position:relative;display:flex!important;align-items:flex-start;gap:12px;min-height:112px;padding:16px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg-alt);cursor:pointer}.need-card input{position:absolute;inset:0;width:100%!important;height:100%;margin:0;opacity:0;cursor:pointer}.need-card:has(input:checked){border-color:var(--color-brand);background:var(--color-brand-a15);box-shadow:0 0 0 1px var(--color-brand-a35)}.need-card:focus-within{outline:2px solid var(--color-brand-a50);outline-offset:2px}.need-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid var(--color-brand-a50);border-radius:10px;color:var(--color-brand-text);background:var(--color-brand-a08)}.need-icon .icon{width:20px;height:20px}.need-card b{display:block;color:var(--color-text);font-size:var(--fs-body)}.need-card small{display:block;margin-top:6px;color:var(--color-text-secondary);font-size:var(--fs-small);line-height:1.45}.dynamic-fields{display:grid;gap:14px}.service-checks,.flow-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.check-card{position:relative;display:flex!important;align-items:center;gap:9px;min-height:44px;padding:10px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg-alt);cursor:pointer}.check-card input{accent-color:var(--color-brand);width:17px;height:17px}.check-card:has(input:checked){border-color:var(--color-brand);background:var(--color-brand-a08)}.check-card-icon .icon,.check-card-icon .brand-icon{width:17px;height:17px;color:var(--color-brand-text)}.form-error-summary{margin:0 0 16px;padding:12px 14px;border:1px solid var(--color-danger-a50);border-radius:var(--radius-sm);background:var(--color-danger-a08);color:var(--color-danger);font-size:var(--fs-small);line-height:1.45}.robots-wrap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden}.form-submit{width:100%;justify-content:center}.faq-section{margin-top:58px}.faq-section .section-head{margin-bottom:18px}.faq-section h2{margin:0}.faq-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.faq-filters .filter{min-height:44px}.contact-faq{max-width:900px}.contact-faq details{padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);margin:8px 0;background:var(--color-surface)}.contact-faq summary{padding:13px 16px;list-style-position:inside}.contact-faq p{padding:0 16px 16px;margin:0}.service-contact{width:100%;justify-content:center;margin-top:16px}
.contact-hint{margin:-8px 0 0;color:var(--color-text-muted);font-size:var(--fs-small)}
.icon-graduation-cap{}
@media(max-width:1023px){.need-grid{grid-template-columns:1fr 1fr}}
@media(max-width:639px){.contact-form{padding:20px}.need-grid,.service-checks,.flow-checks{grid-template-columns:1fr}.need-card{min-height:88px}.faq-section{margin-top:42px}.contact-faq summary{font-size:var(--fs-body)}}
@media(max-width:639px){.lead{font-size:var(--fs-lead)}.start-card p,.post-card p{font-size:var(--fs-body)}}

/* Dot25c: FAQ song song với form, chỉ sticky khi toàn bộ FAQ vừa khung nhìn */
.contact-layout{display:grid;gap:36px;align-items:start}
.contact-main{width:auto;min-width:0}
.contact-faq-side{min-width:0;margin-top:0}
.contact-faq-side.is-sticky{position:sticky;top:24px}
.contact-faq-side .section-head{align-items:flex-start}
.contact-faq-side .contact-faq{max-width:none}
@media(min-width:1060px){.contact-layout{grid-template-columns:minmax(560px,1.38fr) minmax(360px,1fr)}}
@media(min-width:900px) and (max-width:1059px){.contact-layout{grid-template-columns:minmax(0,1.38fr) minmax(280px,1fr);gap:32px}.contact-form{padding:24px}}
@media(max-width:899px){.contact-layout{display:flex;flex-direction:column;gap:0}.contact-main{order:1}.contact-faq-side{order:2;width:100%}.contact-faq-side.is-sticky{position:static}}
.icon-mail{}
@media(max-width:1099px){.unused-header-cta{width:auto!important;padding:0 12px!important;font-size:var(--fs-small)!important;gap:6px;white-space:nowrap}.unused-header-cta>.icon{width:16px;height:16px}}
[data-theme="light"] h1 em{color:var(--color-brand-text)}
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* leader 24/10: trang Tài nguyên */
.tag.free{background:var(--color-brand-a15);color:var(--color-brand-text)}
.filter small{margin-left:6px;font:600 var(--fs-label) var(--font-mono);color:var(--color-text-secondary)}
.filter.active small{color:inherit}
.filter.soon{border-style:dashed}
.filter .icon{width:15px;height:15px;margin-right:6px;vertical-align:-2px}
.filter-sep{width:1px;align-self:stretch;margin:4px 6px;background:var(--color-border-strong)}
.filter.access.active{background:var(--color-brand);color:var(--color-on-brand);border-color:var(--color-brand)}
.empty-state{margin-top:8px;padding:40px 24px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);text-align:center}
.empty-state b{display:block;font-size:var(--fs-h3)}
.empty-state p{margin:8px 0 0;color:var(--color-text-secondary);font-size:var(--fs-body)}
.icon-library{}
.icon-gamepad-2{}
/* Dot39: nút nhắn Messenger và lời nhắc định kỳ */
.message-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:grid;place-items:center;width:62px;height:62px;border:2px solid var(--color-brand);border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);box-shadow:var(--shadow-pop);cursor:pointer;pointer-events:auto}
.message-fab .icon{width:27px;height:27px}
.icon-message{}
.message-dot{position:absolute;right:1px;top:1px;width:14px;height:14px;border:2px solid var(--color-bg);border-radius:50%;background:var(--color-brand)}
.message-reminder{position:fixed;right:94px;bottom:34px;z-index:59;display:flex;align-items:center;gap:4px;max-width:min(260px,calc(100vw - 110px));padding:5px 5px 5px 14px;border:1px solid var(--color-brand);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-pop);opacity:0;transform:translateX(8px);transition:opacity .18s ease,transform .18s ease}
.message-reminder::after{content:"";position:absolute;right:-7px;bottom:20px;width:12px;height:12px;border-top:1px solid var(--color-brand);border-right:1px solid var(--color-brand);background:var(--color-surface);transform:rotate(45deg)}
.message-reminder.is-visible{opacity:1;transform:none}
.message-reminder>a{position:relative;z-index:1;color:var(--color-text);font-size:var(--fs-small);font-weight:700;line-height:1.25;white-space:normal}
.message-reminder-close{position:relative;z-index:2;display:grid;place-items:center;width:34px;height:34px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--color-text-secondary);cursor:pointer}
.message-reminder-close:hover{background:var(--color-brand-a15);color:var(--color-text)}
.message-reminder-close .icon{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.message-reminder{transition:none}}
@media(max-width:1099px){.message-fab{right:14px;bottom:80px;width:54px;height:54px}.message-reminder{right:78px;bottom:88px}}
/* leader 24/10: Kết quả thật (testimonials / case study) */
.case-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;padding:26px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-focus)}
.case-card h3{margin:14px 0 8px;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
.case-lead{margin:0;color:var(--color-text-secondary);font-size:var(--fs-lead);line-height:1.6}
.case-wins{display:grid;gap:12px;margin-top:20px}
.case-win{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-alt)}
.case-win>span{color:var(--color-brand-text);font-size:var(--fs-small);padding-top:3px}
.case-win b{font-size:var(--fs-body)}
.case-win p{margin:4px 0 0;color:var(--color-text-secondary);font-size:var(--fs-body);line-height:1.55}
.case-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.case-stats div{padding:12px;border-radius:var(--radius-sm);background:var(--color-brand-a08);border:1px solid var(--color-brand-a15)}
.case-stats strong{display:block;font-size:var(--fs-stat);letter-spacing:-.02em;white-space:nowrap}
.case-stats span{display:block;margin-top:2px;color:var(--color-text-secondary);font-size:var(--fs-small)}
.case-stats em{display:block;margin-top:4px;font-style:normal;color:var(--color-brand-text);font-size:var(--fs-small);font-weight:600}
.case-source{margin:14px 0 0;color:var(--color-text-secondary);font-size:var(--fs-small);line-height:1.5}
.case-card>.case-source{grid-column:1/-1;grid-row:3}
.case-card>.case-shots{grid-column:2;grid-row:1}
.case-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.case-shot{padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-bg);cursor:zoom-in;aspect-ratio:3/4}
.case-shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--color-bg);transition:transform var(--dur-base,.2s) ease}
.case-shot:hover img{transform:scale(1.04)}
.case-more{grid-column:1/-1;justify-self:start;margin-top:4px}
@media(max-width:1099px){.case-card{grid-template-columns:1fr;padding:20px}.case-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.case-card h3{font-size:var(--fs-h3)}}

/* Đợt 3: chữ giao diện đọc nhanh, mono chỉ còn cho số đếm/code */
.nav-label,.eyebrow,.unused-page-meta,.card-index,.post-top,.post-meta,.status,.status-row,.tag,.tool-chip,.side-reach,.profile small,.sheet-note,.preview-note,.gallery-head,.case-source{
  font-family:var(--font-sans)!important;
  font-weight:600;
  letter-spacing:.04em;
}
.nav-label,.eyebrow,.tag{letter-spacing:.1em}
.card-index,.post-top,.post-meta,.status,.status-row,.unused-page-meta,.side-reach,.profile small,.sheet-note,.preview-note,.gallery-head,.case-source{letter-spacing:.02em}
.post-top,.post-meta,.status,.status-row,.unused-page-meta,.side-reach,.profile small,.sheet-note,.preview-note,.gallery-head,.case-source{font-size:var(--fs-small)}
.filter{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 12px;font:600 var(--fs-small)/1.2 var(--font-sans);letter-spacing:.01em}
.filter-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid currentColor;border-radius:var(--radius-pill);font:600 var(--fs-label)/1 var(--font-mono);letter-spacing:0;opacity:.9}
.filter.soon .filter-count{font-family:var(--font-sans);font-size:var(--fs-label);letter-spacing:.04em}

/* Không dùng JetBrains Mono cho chữ tiếng Việt */
.case-stats em,.post-thumb span,.community-stat span,.fact b,.filter small{font-family:var(--font-sans)!important}
.case-stats em{font-size:var(--fs-small);font-weight:600;color:var(--color-brand-text)}
.filter.active{background:var(--color-brand-a15);box-shadow:inset 0 0 0 1px var(--color-brand-a35)}
.filter.access.active .filter-count{background:var(--color-on-brand);color:var(--color-brand)}
.case-card,.case-card *{min-width:0}
.case-stats strong{overflow-wrap:anywhere}
@media(max-width:639px){
  .filters{gap:7px}
  .filter{min-height:38px;padding:7px 10px}
  .filter-sep{display:none}
  .case-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-card>.case-shots,.case-card>.case-source{grid-column:auto;grid-row:auto}
  .case-more{width:100%}
}

/* Dot21b: case study gọn, số liệu lớn và video dọc tải lười */
.case-card{grid-template-columns:minmax(0,1fr) minmax(300px,.78fr);gap:24px;padding:24px}
.case-card h3{font-size:var(--fs-h3)}
.case-lead{font-size:var(--fs-lead);line-height:1.45}
.case-stats-note{margin:18px 0 0;color:var(--color-text-secondary);font-size:var(--fs-small);font-weight:600}
.case-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.case-stats div{padding:14px 13px;background:var(--color-brand-a08)}
.case-stats strong{font-size:var(--fs-stat);line-height:1.03;color:var(--color-text);letter-spacing:-.045em}
.case-stats span{margin-top:7px;font-size:var(--fs-small);line-height:1.15;white-space:nowrap}
.case-source{margin-top:16px;font-size:var(--fs-small);line-height:1.4}
.case-media{display:grid;align-content:start;gap:12px}
.case-video{position:relative;margin:0;max-height:480px;aspect-ratio:9/16;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg);isolation:isolate}
.case-video-player{display:block;width:100%;height:100%;object-fit:contain;background:var(--color-bg)}
.case-video figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;color:#fff;background:linear-gradient(transparent,rgb(0 0 0 / .72));font-size:var(--fs-small);line-height:1.25;pointer-events:none}
.case-video-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:2;width:56px;height:56px;border:0;border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);font-size:var(--fs-glyph);cursor:pointer;box-shadow:0 4px 18px rgb(0 0 0 / .22)}
.case-video-play[hidden]{display:none}
.case-media .case-shots{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-shot{aspect-ratio:9/16}
.case-shot img{object-fit:contain}
@media(max-width:1099px){.case-card{grid-template-columns:1fr;padding:20px}.case-card h3{font-size:var(--fs-h3)}.case-media{grid-template-columns:minmax(190px,.58fr) minmax(0,1fr);align-items:start}.case-media .case-shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.case-card{display:block;padding:18px}.case-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.case-stats div{padding:12px 10px}.case-stats strong{font-size:var(--fs-stat)}.case-stats span{font-size:var(--fs-small)}.case-media{display:block;margin-top:16px}.case-video{width:min(100%,300px);margin:0 auto 12px;max-height:none}.case-media .case-shots{grid-template-columns:repeat(2,minmax(0,1fr))}.case-more{width:100%}}

/* Đợt 5: vùng chạm và chữ tối thiểu theo audit a11y */
.theme-toggle{width:44px;height:44px}
.menu-button{width:44px;height:44px}
.unused-header-cta{min-height:44px;height:44px}
.btn,.btn.small{min-height:44px}
.btn.small{padding-top:10px;padding-bottom:10px}
.filter{height:44px;min-height:38px}
.faq summary{display:flex;align-items:center;min-height:44px}
.lead-form select{min-height:44px}
.side-social a,.brand-links a{width:44px;height:44px}
.text-link{display:inline-flex;align-items:center;min-height:44px}
.brand-sub,.filter.soon .filter-count,.profile small,.tab span,.tag,.filter .filter-count,.fact b,.post-thumb span{font-size:var(--fs-label)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:639px){.filter{height:44px;min-height:38px;padding:9px 10px}}

/* Sửa layout + cỡ chữ sau review desktop 1920 */
main{max-width:none;width:auto;margin:0;padding:clamp(32px,4vw,56px) clamp(24px,3vw,56px) 72px}
.start-grid,.post-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.hero h1,.page-intro h1,.prepared h1{font-size:var(--fs-display);line-height:1.1}
.section h2,.tools h2{font-size:var(--fs-h2)}
.start-card h3{font-size:var(--fs-h3)}
.post-card h3{font-size:var(--fs-h3)}
.case-card h3{font-size:var(--fs-h3)}
.lead,.case-lead,.prose .body{max-width:70ch}
.detail-card h2{font-size:var(--fs-h2)}
.hero h1 em::after{bottom:-.03em;height:.32em;background:var(--color-brand-a50);opacity:.72}
@media(min-width:1700px){.start-grid,.post-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){main{padding:28px 20px 100px}.hero h1,.page-intro h1,.prepared h1{font-size:var(--fs-display)}.section h2,.tools h2{font-size:var(--fs-h2)}.start-card h3{font-size:var(--fs-h3)}.case-card h3{font-size:var(--fs-h3)}.detail-card h2{font-size:var(--fs-h2)}}

/* Lưới số thẻ cố định: trải đều ở desktop, một cột trên mobile */
@media(min-width:901px){
  .start-grid,.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .start-grid,.blog-grid,.products-grid{grid-template-columns:1fr}
}

/* Dot31: case study full-width, bằng chứng cùng chiều cao */
.case-card{display:block;padding:26px}
.case-heading{width:100%}
.case-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px}
.case-stats strong{font-size:var(--fs-stat)}
.case-evidence-wrap{width:100%;margin-top:18px;overflow:hidden}
.case-evidence{display:flex;gap:10px;align-items:stretch;overflow:hidden}
.case-evidence .case-video,.case-evidence .case-shot{flex:0 0 auto;width:clamp(180px,13.2vw,218px);height:360px;aspect-ratio:9/16;margin:0}
.case-evidence .case-shot.is-extra{display:none}
.case-evidence .case-shot img{width:100%;height:100%;object-fit:contain}
.case-scroll-hint{display:none;margin:8px 2px 0;color:var(--color-text-muted);font-size:var(--fs-small)}
.case-more{display:block;margin:12px 0 0}
.case-source{margin:16px 0 0}
@media(max-width:900px){
  .case-card{padding:18px}
  .case-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
  .case-stats strong{font-size:var(--fs-stat);letter-spacing:-.055em}
  .case-evidence-wrap{margin-top:16px;overflow:visible}
  .case-evidence{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:4px}
  .case-evidence .case-video,.case-evidence .case-shot{width:154px;height:274px;scroll-snap-align:start}
  .case-evidence .case-shot.is-extra{display:block}
  .case-scroll-hint{display:block}
  .case-more{width:100%}
}

/* Blog thật: bài dài, code cuộn ngang, ảnh không làm nhảy layout */
.article-meta{display:flex;align-items:center;gap:12px;color:var(--color-text-muted);font-size:var(--fs-small)}.article-cover{margin:24px 0 30px;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-bg)}.article-cover img{display:block;width:100%;height:auto;max-height:720px;object-fit:contain}.article-body{max-width:68ch;color:var(--color-text-secondary);font-size:var(--fs-prose);line-height:var(--lh-prose)}.article-body p{margin:0 0 18px}.article-body h2{margin:38px 0 12px;color:var(--color-text);font-size:var(--fs-h2);line-height:1.25}.article-body h3{margin:28px 0 8px;color:var(--color-text);font-size:var(--fs-h3);line-height:1.35}.article-body ul,.article-body ol{margin:0 0 20px;padding-left:24px}.article-body li{margin:7px 0}.article-body a,.article-source a{color:var(--color-brand-text);text-decoration:underline;text-underline-offset:3px}.workflow-line{display:block;margin:0 0 22px;padding:14px 16px;border-left:3px solid var(--color-brand);background:var(--color-surface-read);color:var(--color-brand-text);font-size:var(--fs-small);overflow-x:auto;white-space:nowrap}.article-body pre{position:relative;margin:0 0 24px;padding:18px 86px 18px 18px;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-alt);color:var(--color-text);font:var(--fs-small)/1.65 var(--font-mono);white-space:pre;max-width:100%}.article-body code{font:inherit}.copy-code{position:absolute;top:10px;right:10px;min-height:36px;padding:7px 10px;border:1px solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-surface);color:var(--color-brand-text);font:600 var(--fs-small) var(--font-sans)}.copy-code:hover,.copy-code.copied{border-color:var(--color-brand);background:var(--color-brand-a15)}.article-body blockquote{margin:22px 0;padding:14px 18px;border-left:3px solid var(--color-brand);background:var(--color-surface-read);color:var(--color-text);font-size:var(--fs-prose)}.article-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:28px}.article-gallery-item{padding:0;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:zoom-in}.article-gallery-item img{display:block;width:100%;height:100%;object-fit:cover}.article-source{margin:30px 0 14px;color:var(--color-text-muted);font-size:var(--fs-small)}.article-source .text-link{margin-top:8px}@media(max-width:900px){.prose{max-width:100%}.article-body{font-size:var(--fs-prose);line-height:var(--lh-prose)}.article-cover img{max-height:560px}.article-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.article-body pre{font-size:var(--fs-small);padding-right:78px}.article-body h2{font-size:var(--fs-h2)}}

/* Đợt 6: trang Dịch vụ */
.icon-workflow{}.icon-sparkles{}.icon-calendar{}.icon-check{}
.service-method{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,2fr);gap:30px;margin-top:34px;padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--color-surface),var(--color-brand-a08));box-shadow:var(--shadow-focus)}
.service-method-copy{padding:8px 0}.service-method-copy h2{margin:16px 0 14px;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.04em}.service-method-copy h2 span{color:var(--color-text-secondary);font-weight:600}.service-method-copy p{max-width:30ch;color:var(--color-text-secondary);font-size:var(--fs-body);line-height:1.6}
.method-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;min-width:0}.method-step{position:relative;min-width:0;padding:16px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-read);box-shadow:var(--shadow-focus)}.method-step-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.method-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--color-brand-a50);border-radius:10px;background:var(--color-brand-a08);color:var(--color-brand-text)}.method-icon .icon{width:20px;height:20px}.method-number{color:var(--color-text-muted);font-size:var(--fs-stat);line-height:.9;font-weight:800;letter-spacing:-.08em;opacity:.32}.method-step h3{margin:16px 0 6px;font-size:var(--fs-h3)}.method-step p{min-height:72px;margin:0;color:var(--color-text-secondary);font-size:var(--fs-body);line-height:1.5}.service-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.service-chips span{padding:4px 8px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);color:var(--color-text-secondary);font-size:var(--fs-small);line-height:1.2}.method-connector{position:absolute;z-index:1;top:35px;right:-34px;width:36px;border-top:1px dashed var(--color-brand-text)}.method-connector i{position:absolute;left:48%;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--color-brand)}
.services-section{margin-top:48px}.services-section .section-head{align-items:baseline}.section-note{color:var(--color-text-secondary);font-size:var(--fs-small)}.services-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}.service-card{min-width:0;padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-focus);transition:transform var(--dur-base,.2s) var(--ease-enter),border-color var(--dur-base,.2s) ease}.service-card:hover{transform:translateY(-3px);border-color:var(--color-brand-a50)}.service-card:active{transform:translateY(0) scale(.985)}.service-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.service-tools{display:flex;align-items:center;padding-left:5px}.service-tool{display:grid;place-items:center;width:36px;height:36px;margin-left:-5px;border:1px solid var(--color-border-strong);border-radius:11px;background:var(--color-surface-read);box-shadow:0 3px 8px rgb(0 0 0 / .12);color:var(--color-brand-text)}.service-tool:nth-child(2){transform:translateY(2px)}.service-tool:nth-child(3){transform:translateY(4px)}.service-tool-icon .brand-icon{width:19px;height:19px}.service-tool-text{width:auto;min-width:36px;padding:0 7px;color:var(--color-text);font:600 var(--fs-label)/1.1 var(--font-sans);text-align:center}.service-index{padding-top:7px;color:var(--color-brand-text);font-size:var(--fs-label);font-weight:700;white-space:nowrap}.service-card h3{margin:22px 0 6px;font-size:var(--fs-h3);line-height:1.2}.service-desc{min-height:48px;margin:0;color:var(--color-text-secondary);font-size:var(--fs-small);line-height:1.5}.service-label{display:inline-flex;margin-top:15px;padding:5px 9px;border:1px solid var(--color-brand-a50);border-radius:var(--radius-pill);color:var(--color-brand-text);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;line-height:1.2}.service-card ul{display:grid;gap:9px;margin:16px 0 0;padding:0;list-style:none}.service-card li{display:flex;align-items:flex-start;gap:8px;color:var(--color-text-secondary);font-size:var(--fs-small);line-height:1.35}.service-card li .icon{width:15px;height:15px;flex:none;margin-top:1px;color:var(--color-brand-text)}.service-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:34px;padding:22px 24px;border:1px solid var(--color-brand-a35);border-radius:var(--radius-md);background:var(--color-brand-a08)}.service-cta h2{margin:0;font-size:var(--fs-h3)}.service-cta p{margin:5px 0 0;color:var(--color-text-secondary);font-size:var(--fs-body)}.service-cta .btn{flex:none}
@media(min-width:641px) and (max-width:1023px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.service-method{grid-template-columns:1fr;gap:22px;padding:22px}.service-method-copy p{max-width:42ch}.method-steps{grid-template-columns:1fr;gap:12px}.method-step p{min-height:0}.method-connector{top:auto;right:auto;left:34px;bottom:-18px;width:0;height:18px;border-top:0;border-left:1px dashed var(--color-brand-text)}.method-connector i{left:-4px;top:46%;}.services-section{margin-top:34px}.service-cta{align-items:flex-start;flex-direction:column}.service-cta .btn{width:100%}}
@media(max-width:640px){.service-method{margin-top:28px;padding:18px}.service-method-copy h2{font-size:var(--fs-h2)}.section-note{font-size:var(--fs-small)}.services-grid{gap:12px}.service-card{padding:18px}.service-card h3{font-size:var(--fs-h3)}.service-cta{padding:20px}.service-cta h2{font-size:var(--fs-h3)}}
.service-tool-text,.service-label{font-size:var(--fs-label)}

/* dot6c: brand assets and split course/product grids */
.brand-react{}.brand-tailwindcss{}.brand-google{}.brand-slack{}.brand-vite{}.brand-openai{}.brand-vercel{}.brand-googlechrome{}.brand-anthropic{}
.icon-graduation-cap{}.icon-table{}.icon-database{}
.service-label{letter-spacing:.06em;white-space:nowrap}
@media(min-width:901px){.courses-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.courses-grid{grid-template-columns:1fr}}
.courses-grid{margin-top:26px}
.funnel-illustration{display:grid;place-items:center;background:var(--color-surface);cursor:default}
.funnel-flow{display:flex;align-items:center;justify-content:center;gap:clamp(5px,2vw,18px);width:100%;padding:18px 12px}
.funnel-step{display:grid;justify-items:center;gap:8px;min-width:0;color:var(--color-brand-text);font-size:var(--fs-small)}
.funnel-icon{display:grid;place-items:center;width:clamp(36px,5vw,52px);height:clamp(36px,5vw,52px);border:1px solid var(--color-brand-a50);border-radius:12px;background:var(--color-surface-read);color:var(--color-brand-text)}
.funnel-icon .icon{width:clamp(18px,2.2vw,24px);height:clamp(18px,2.2vw,24px)}
.funnel-arrow{display:grid;place-items:center;color:var(--color-text-muted)}
.funnel-arrow .icon{width:16px;height:16px}
.copy-code{min-height:44px}

/* dot23: thẻ Sản phẩm gọn, action rõ và không ảnh hưởng card dùng chung */
.products-page{align-items:stretch}
.products-page .product-card{height:100%;min-height:0;padding:16px}
.products-page .product-card .post-thumb{margin:8px 0 2px;aspect-ratio:16/9;max-height:200px}
.products-page .product-card h3{margin:12px 0 6px}
.products-page .product-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.products-page .product-card .post-meta{padding-top:10px}
.products-page .product-card .post-bottom{margin-top:auto;padding-top:12px}
.products-page .product-demo{cursor:pointer}
.products-page .product-demo:hover,.products-page .product-demo:focus-visible{filter:brightness(1.08);box-shadow:0 0 0 3px var(--color-brand-a15)}
.products-page .post-thumb:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.products-page .post-thumb-overlay{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:7px;min-height:44px;max-width:calc(100% - 16px);padding:8px 10px;border:1px solid var(--color-border);border-radius:var(--radius-xs);background:color-mix(in srgb,var(--color-bg) 88%,transparent);color:var(--color-text);font:600 var(--fs-small)/1 var(--font-sans);white-space:nowrap}
.products-page .post-thumb-overlay .icon{width:13px;height:13px;color:var(--color-brand-text)}
.products-page .post-thumb-overlay .demo-play{position:static;display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;padding:0;border:0;background:none;color:currentColor;font:600 var(--fs-label)/1 var(--font-sans)}
.products-page .post-thumb-overlay b{display:block;overflow:visible;white-space:nowrap}
.products-page .product-demo{min-height:44px}
.products-page .post-thumb:hover .post-thumb-overlay,.products-page .post-thumb:focus-visible .post-thumb-overlay{background:var(--color-brand);color:var(--color-on-brand)}
.products-page .funnel-flow{padding:12px 10px;gap:clamp(4px,1.5vw,14px)}
.products-page .funnel-icon{width:clamp(32px,4vw,46px);height:clamp(32px,4vw,46px)}
@media(max-width:900px){.products-page .product-card{min-height:424px}.products-page .product-card p{-webkit-line-clamp:3}.products-page .product-card .post-thumb{max-height:none}}

/* Blog Markdown tĩnh */
.article-static{max-width:900px!important;margin:0 auto}.article-static>h1{max-width:18ch;margin:16px 0 10px;font-size:var(--fs-display);line-height:1.1;letter-spacing:-.04em}.article-subtitle{max-width:68ch;margin:0 0 28px;color:var(--color-text-secondary);font-size:var(--fs-lead);line-height:1.55}.article-body{max-width:68ch;font-size:var(--fs-prose);line-height:var(--lh-prose)}.article-body p{margin:0 0 18px}.article-body h2{margin:46px 0 14px;color:var(--color-text);font-size:var(--fs-h2);line-height:1.25}.article-body h3{margin:32px 0 10px;color:var(--color-text);font-size:var(--fs-h3)}.article-body mark{padding:0 .18em;background:var(--color-brand-a35);color:var(--color-text)}.article-body table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:22px 0}.article-body th,.article-body td{min-width:120px;padding:10px 12px;border:1px solid var(--color-border);text-align:left}.article-body th{color:var(--color-text);background:var(--color-surface-read)}.article-body hr{margin:36px 0;border:0;border-top:1px solid var(--color-border)}.article-body .article-figure{width:min(820px,calc(100vw - 48px));margin:28px 0 30px}.article-body .article-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.article-body figcaption{margin-top:8px;color:var(--color-text-muted);font-size:var(--fs-small)}.article-body blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid var(--color-brand);background:var(--color-surface-read);color:var(--color-text);font-size:var(--fs-prose)}.article-body .pullquote{font-size:var(--fs-h2);line-height:1.2;font-weight:700;letter-spacing:-.03em}.article-callout{display:flex;gap:14px;align-items:flex-start;margin:24px 0;padding:18px;border:1px solid var(--color-border);border-left:4px solid var(--color-brand);border-radius:var(--radius-sm);background:var(--color-surface-read)}.callout-icon{flex:0 0 22px;margin-top:3px;color:var(--color-brand-text)}.callout-warning{border-left-color:var(--color-warning)}.callout-important{border-left-color:var(--color-info)}.article-toc{margin:0 0 28px;padding:14px 18px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-read)}.article-toc summary{cursor:pointer;font-weight:700;color:var(--color-text)}.article-toc ol{margin:10px 0 0;padding-left:22px}.article-toc a{color:var(--color-brand-text)}.prompt-block{margin:26px 0;border:1px solid var(--color-brand-a35);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-bg-alt)}.prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--color-brand-a08);color:var(--color-text)}.prompt-head button{min-height:36px;padding:6px 10px;border:1px solid var(--color-brand-a35);border-radius:var(--radius-xs);background:transparent;color:var(--color-brand-text);font-weight:700}.prompt-content{padding:16px;white-space:pre-wrap;font:var(--fs-small)/1.65 var(--font-mono);color:var(--color-text)}.code-block{position:relative;margin:24px 0;padding:38px 88px 18px 18px;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-alt);color:var(--color-text);font:var(--fs-small)/1.65 var(--font-mono);white-space:pre}.code-language{position:absolute;top:10px;left:14px;color:var(--color-brand-text);font:var(--fs-label) var(--font-mono);text-transform:uppercase}.copy-code{position:absolute;top:9px;right:9px;min-height:44px;padding:7px 10px;border:1px solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-surface);color:var(--color-brand-text);font:600 var(--fs-small) var(--font-sans)}.article-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(820px,calc(100vw - 48px));margin:28px 0}.article-gallery-item{padding:0;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:zoom-in}.article-gallery-item img{display:block;width:100%;height:100%;object-fit:cover}.article-video{position:relative;width:min(820px,calc(100vw - 48px));aspect-ratio:16/9;margin:28px 0;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(135deg,var(--color-surface),var(--color-brand-a15))}.article-video.video-portrait{width:min(460px,100%);aspect-ratio:9/16}.article-video iframe{width:100%;height:100%;border:0}.video-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:0;border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);font-size:var(--fs-glyph);cursor:pointer}.video-label{position:absolute;left:14px;bottom:12px;color:var(--color-text-secondary);font:var(--fs-label) var(--font-mono)}.article-audio{margin:24px 0}.article-audio audio{width:100%}.article-button{margin:24px 0}.subscribe-card{margin:32px 0;padding:22px;border:1px solid var(--color-brand-a35);border-radius:var(--radius-md);background:var(--color-brand-a08)}.subscribe-card strong{font-size:var(--fs-h3)}.subscribe-card p{color:var(--color-text-secondary)}.freewall{position:relative;margin-top:34px}.freewall-content{position:relative;max-height:220px;overflow:hidden}.freewall:not(.is-unlocked) .freewall-content::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,var(--color-bg-alt))}.freewall-gate{margin-top:0;padding:22px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-read)}.freewall-form{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.freewall-form input{flex:1 1 220px;min-height:44px;padding:10px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-xs);background:var(--color-bg-alt);color:var(--color-text)}.freewall-unlock{margin-top:6px}.freewall.is-unlocked .freewall-content{max-height:none}.freewall.is-unlocked .freewall-content::after,.freewall.is-unlocked .freewall-gate{display:none}.check-item{list-style:none}.check-item span,.checklist span{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:5px;border:1px solid var(--color-border-strong);border-radius:4px;color:var(--color-brand-text);font-size:var(--fs-small)}.article-related{margin-top:24px;padding-top:20px;border-top:1px solid var(--color-border)}
@media(max-width:900px){.article-static{padding:22px 18px!important}.article-static>h1{font-size:var(--fs-display)}.article-subtitle{font-size:var(--fs-lead)}.article-body{font-size:var(--fs-prose)}.article-body h2{font-size:var(--fs-h2);margin-top:38px}.article-gallery{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.article-body .article-figure,.article-video{width:100%}.code-block{font-size:var(--fs-small);padding-right:82px}.article-body .pullquote{font-size:var(--fs-h2)}}
.related-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.related-posts>strong{grid-column:1/-1}.related-post{display:flex;flex-direction:column;gap:7px;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-read)}.related-post strong{color:var(--color-text);line-height:1.35}.related-post small{color:var(--color-text-muted);font-size:var(--fs-small)}
.article-toc summary{min-height:44px;display:flex;align-items:center}.code-language{font-size:var(--fs-label)}
.copy-prompt{min-height:44px!important}.video-label{font-size:var(--fs-label)}
.prompt-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.prompt-action{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 12px;border:1px solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-surface);color:var(--color-text);font-size:var(--fs-small);font-weight:700;text-decoration:none}.prompt-action:hover{border-color:var(--color-brand);color:var(--color-brand-text)}.prompt-action img{width:18px;height:18px;object-fit:contain}.prompt-fill-hint{margin:24px 0 8px!important;color:var(--color-text-secondary);font-size:var(--fs-small)}.prompt-actions+.prompt-block{margin-top:8px}.prompt-block+.prompt-actions{margin-top:0}
@media(max-width:520px){.prompt-action{flex:1 1 100%;justify-content:center}}

/* Dot11: thanh cuộn tối giản, mờ và dùng được trên mọi vùng cuộn */
html,.sidebar,.menu-sheet,.workflow-line,.article-body pre,.code-block,.prompt-content,.article-body table,.article-gallery,.tool-marquee,.gallery,.gallery-image-wrap{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
html::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.menu-sheet::-webkit-scrollbar,.workflow-line::-webkit-scrollbar,.article-body pre::-webkit-scrollbar,.code-block::-webkit-scrollbar,.prompt-content::-webkit-scrollbar,.article-body table::-webkit-scrollbar,.article-gallery::-webkit-scrollbar,.tool-marquee::-webkit-scrollbar,.gallery::-webkit-scrollbar,.gallery-image-wrap::-webkit-scrollbar{width:8px;height:8px}
html::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.menu-sheet::-webkit-scrollbar-track,.workflow-line::-webkit-scrollbar-track,.article-body pre::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track,.prompt-content::-webkit-scrollbar-track,.article-body table::-webkit-scrollbar-track,.article-gallery::-webkit-scrollbar-track,.tool-marquee::-webkit-scrollbar-track,.gallery::-webkit-scrollbar-track,.gallery-image-wrap::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.menu-sheet::-webkit-scrollbar-thumb,.workflow-line::-webkit-scrollbar-thumb,.article-body pre::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb,.prompt-content::-webkit-scrollbar-thumb,.article-body table::-webkit-scrollbar-thumb,.article-gallery::-webkit-scrollbar-thumb,.tool-marquee::-webkit-scrollbar-thumb,.gallery::-webkit-scrollbar-thumb,.gallery-image-wrap::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:var(--scrollbar-thumb);background-clip:padding-box;transition:background-color var(--dur-fast,.2s) ease}
html::-webkit-scrollbar-corner,.sidebar::-webkit-scrollbar-corner,.menu-sheet::-webkit-scrollbar-corner,.workflow-line::-webkit-scrollbar-corner,.article-body pre::-webkit-scrollbar-corner,.code-block::-webkit-scrollbar-corner,.prompt-content::-webkit-scrollbar-corner,.article-body table::-webkit-scrollbar-corner,.article-gallery::-webkit-scrollbar-corner,.tool-marquee::-webkit-scrollbar-corner,.gallery::-webkit-scrollbar-corner,.gallery-image-wrap::-webkit-scrollbar-corner{background:transparent}

/* Các vùng cuộn con chỉ rõ thumb khi người dùng đang rê vào vùng đó. */
.sidebar,.menu-sheet,.workflow-line,.article-body pre,.code-block,.prompt-content,.article-body table,.article-gallery,.tool-marquee,.gallery,.gallery-image-wrap{scrollbar-color:var(--scrollbar-thumb-subtle) transparent}
.sidebar:hover,.menu-sheet:hover,.workflow-line:hover,.article-body pre:hover,.code-block:hover,.prompt-content:hover,.article-body table:hover,.article-gallery:hover,.tool-marquee:hover,.gallery:hover,.gallery-image-wrap:hover{scrollbar-color:var(--scrollbar-thumb) transparent}
.sidebar:hover::-webkit-scrollbar-thumb,.menu-sheet:hover::-webkit-scrollbar-thumb,.workflow-line:hover::-webkit-scrollbar-thumb,.article-body pre:hover::-webkit-scrollbar-thumb,.code-block:hover::-webkit-scrollbar-thumb,.prompt-content:hover::-webkit-scrollbar-thumb,.article-body table:hover::-webkit-scrollbar-thumb,.article-gallery:hover::-webkit-scrollbar-thumb,.tool-marquee:hover::-webkit-scrollbar-thumb,.gallery:hover::-webkit-scrollbar-thumb,.gallery-image-wrap:hover::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-hover)}

/* Sidebar chỉ hiện thumb trong lúc đang cuộn, không bị kích hoạt bởi hover. */
.sidebar,.sidebar:hover{scrollbar-gutter:stable;scrollbar-color:transparent transparent}
.sidebar::-webkit-scrollbar-thumb,.sidebar:hover::-webkit-scrollbar-thumb{background:transparent}
.sidebar.is-scrolling,.sidebar.is-scrolling:hover{scrollbar-color:var(--scrollbar-thumb-hover) transparent}
.sidebar.is-scrolling::-webkit-scrollbar-thumb,.sidebar.is-scrolling:hover::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-hover)}

/* Dot10b: final overrides for static blog media */
.article-callout{gap:12px;padding:15px 18px}
.article-callout .callout-icon{flex:0 0 22px;width:22px;height:22px;margin-top:2px}
.callout-content{min-width:0}
.callout-label{display:block;margin:0 0 3px;color:var(--color-text);font-size:var(--fs-label);line-height:1.3}
.callout-content p:last-child{margin-bottom:0}
.article-cover,.article-body .article-figure{text-align:center}
.article-cover img,.article-body .article-figure img{max-height:640px;margin-left:auto;margin-right:auto;object-fit:contain}
.article-video{background:var(--color-surface)}
.article-video .video-thumb{display:block;width:100%;height:100%;object-fit:cover}
.video-fallback{display:grid;place-items:center;width:100%;height:100%;background:var(--color-surface)}
.video-fallback-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);font-size:var(--fs-h2)}
.video-play{width:64px;height:64px}
.video-play:focus-visible{outline:3px solid var(--color-info);outline-offset:4px}
.video-label{max-width:calc(100% - 28px);padding:4px 7px;border-radius:4px;background:color-mix(in srgb,var(--color-bg) 80%,transparent);color:var(--color-text)}
.article-audio{padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.article-audio audio{display:block;color-scheme:light}
:root:not([data-theme="light"]) .article-audio audio{color-scheme:dark}
.article-body .article-button a.btn{text-decoration-line:none}
@media(max-width:900px){.article-cover img,.article-body .article-figure img{max-height:75vh}.article-video.video-portrait{max-height:75vh}}

/* Dot12: reader card, mục lục và menu bài viết */
@view-transition{navigation:auto}
body[data-page="article"]{overflow-x:hidden}
body[data-page="article"] .sidebar,body[data-page="article"]>.bottom-tabs{display:none}
body[data-page="article"] main{max-width:none;padding:16px 20px 24px}
.reader-card{position:relative;max-width:none!important;margin:0 auto!important;min-height:calc(100vh - 40px);padding:0!important;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-focus);overflow:visible}
.reader-toolbar{position:sticky;top:0;z-index:25;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px;padding:0 16px;border-bottom:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 92%,transparent);backdrop-filter:blur(14px);border-radius:var(--radius-md) var(--radius-md) 0 0}
.reader-close,.reader-listen,.reader-more,.reader-mobile-toc{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface-read);color:var(--color-text);cursor:pointer;font:700 var(--fs-body) var(--font-sans)}
.reader-close{justify-self:start;font-size:var(--fs-glyph);font-weight:400}.reader-logo{justify-self:center;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;overflow:hidden;background:var(--color-bg)}.reader-logo img{width:100%;height:100%;object-fit:cover}.reader-toolbar-actions{position:relative;justify-self:end;display:flex;gap:8px}.reader-listen{font-size:var(--fs-body)}.reader-more{letter-spacing:2px;font-size:var(--fs-body)}.reader-main{max-width:820px;margin:0 auto;padding:58px 36px 72px}.reader-heading{max-width:68ch;padding-bottom:28px;border-bottom:1px solid var(--color-border)}.reader-heading h1{max-width:18ch;margin:16px 0 12px;font-size:var(--fs-display);line-height:1.06;letter-spacing:-.045em}.reader-author{display:flex;align-items:center;gap:10px;margin-top:24px}.reader-author-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden}.reader-author-avatar img{width:100%;height:100%;object-fit:cover}.reader-author strong,.reader-author small{display:block}.reader-author strong{font:700 var(--fs-label) var(--font-mono);letter-spacing:.05em}.reader-author small{margin-top:3px;color:var(--color-text-muted);font-size:var(--fs-small)}.reader-card .article-body{margin-top:34px}.reader-card .article-source{max-width:68ch}.reader-footer{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:18px;border-top:1px solid var(--color-border);font-size:var(--fs-small)}.reader-footer button,.reader-footer a{border:0;background:transparent;color:var(--color-brand-text);font:700 var(--fs-small) var(--font-sans);cursor:pointer}
.reader-toc-rail{position:fixed;top:calc(50% - 34px);left:var(--reader-toc-left,12px);width:34px;z-index:50}.reader-toc-lines{position:relative;display:grid;gap:8px;width:28px;padding:8px 0}.toc-line{width:14px;height:2px;padding:0;border:0;border-radius:4px;background:var(--color-text-muted);opacity:.48;cursor:pointer}.toc-line-3{width:9px;opacity:.28}.toc-line.is-active{width:22px;background:var(--color-brand);opacity:1}.toc-line-3.is-active{width:16px}.reader-toc-panel{position:fixed;left:var(--reader-toc-left,46px);top:var(--reader-toc-top,12px);width:260px;max-height:calc(100vh - 24px);overflow:auto;padding:16px 18px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transform:translateX(-8px);transition:opacity .18s ease,transform .18s ease}.reader-toc-rail:hover .reader-toc-panel,.reader-toc-rail:focus-within .reader-toc-panel{opacity:1;pointer-events:auto;transform:none}.reader-toc-panel strong,.reader-toc-sheet-inner>strong{display:block;margin-bottom:12px;font:var(--fs-label) var(--font-mono);letter-spacing:.06em;color:var(--color-text-muted)}.reader-toc-panel nav,.reader-toc-sheet-inner nav{display:grid;gap:8px}.reader-toc-link{display:block;overflow:hidden;color:var(--color-text-secondary);font-size:var(--fs-small);line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.reader-toc-link:hover,.reader-toc-link.is-active{color:var(--color-text);font-weight:700}.toc-level-3{padding-left:14px;color:var(--color-text-muted)}
.reader-more-popover{position:absolute;right:0;top:50px;width:270px;padding:7px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);box-shadow:var(--shadow-pop);z-index:40}.reader-more-popover button,.reader-more-popover a{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:var(--color-text);text-align:left;font:var(--fs-small) var(--font-sans);cursor:pointer;text-decoration:none}.reader-more-popover button:hover,.reader-more-popover a:hover,.reader-more-popover button:focus-visible,.reader-more-popover a:focus-visible{background:var(--color-brand-a15);outline:0}.reader-more-popover .icon{width:16px;height:16px;flex:none}.reader-more-popover kbd{margin-left:auto;padding:2px 5px;border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-muted);font:var(--fs-label) var(--font-mono)}.reader-menu-separator{height:1px;margin:6px 0;background:var(--color-border)}.reader-share-submenu{padding:0 8px 5px 36px}.reader-share-submenu a{min-height:32px;padding:5px 8px}.reader-font-actions{display:flex;align-items:center;gap:6px;padding:7px 10px;color:var(--color-text-secondary);font-size:var(--fs-small)}.reader-font-actions span{margin-right:auto}.reader-font-actions button{width:auto;min-height:30px;padding:4px 8px}.reader-report{color:var(--color-danger)!important}.reader-toast{position:fixed;left:50%;bottom:28px;z-index:80;padding:9px 13px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:.18s ease}.reader-toast.is-visible{opacity:1;transform:translate(-50%,0)}.reader-mobile-toc,.reader-toc-sheet{display:none}
@media(max-width:900px){body[data-page="article"] main{padding:0 0 12px}.reader-card{border-radius:0;border-left:0;border-right:0;min-height:100vh}.reader-toolbar{position:fixed;inset:0 0 auto;z-index:65;grid-template-columns:1fr auto 1fr;min-height:calc(64px + env(safe-area-inset-top));height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;border-radius:0;background:var(--color-surface);box-shadow:0 2px 0 var(--color-border),0 8px 24px rgba(0,0,0,.16);backdrop-filter:blur(14px);transform:translateY(0);transition:transform .22s var(--ease-exit)}.reader-toolbar.is-hidden{transform:translateY(-100%)}.reader-toolbar.is-reduced-motion{transition:none}.reader-mobile-toc{display:block;justify-self:start;width:auto;padding:0 10px;font-size:var(--fs-small)}.reader-close{position:static;justify-self:start;width:44px;font-size:0}.reader-close:after{content:'×';font-size:var(--fs-glyph)}.reader-mobile-toc{margin-left:48px}.reader-logo{width:34px;height:34px}.reader-main{padding:calc(36px + 64px + env(safe-area-inset-top)) 20px 80px}.reader-heading h1{font-size:var(--fs-display)}.reader-toc-rail{display:none}.reader-toc-sheet{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;background:var(--color-overlay)}.reader-toc-sheet-inner{position:relative;flex:0 0 auto;width:100%;max-height:72vh;overflow:auto;padding:24px 20px 34px;border:1px solid var(--color-border);border-radius:20px 20px 0 0;background:var(--color-surface);box-shadow:var(--shadow-pop)}.reader-toc-sheet-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface-read);color:var(--color-text);font-size:var(--fs-glyph)}.reader-toc-sheet-inner nav{gap:12px}.reader-toc-sheet-inner .reader-toc-link{font-size:var(--fs-body);white-space:nowrap}.reader-more-popover{position:fixed;top:calc(64px + env(safe-area-inset-top));right:10px;width:min(270px,calc(100vw - 20px))}.reader-footer{display:none}body[data-page="article"] .mobile-nav{display:none}}
@media(prefers-reduced-motion:reduce){.reader-toc-panel,.reader-toast,.reader-toolbar{transition:none!important}}
@media print{body[data-page="article"]{background:#fff!important;color:#000!important}body[data-page="article"] .reader-card{border:0!important;box-shadow:none!important;background:#fff!important}body[data-page="article"] .reader-toolbar,body[data-page="article"] .reader-toc-rail,body[data-page="article"] .reader-toc-sheet,body[data-page="article"] .reader-footer,body[data-page="article"] .reader-toast,body[data-page="article"] .article-cover{display:none!important}body[data-page="article"] main{padding:0!important}body[data-page="article"] .reader-main{max-width:700px;padding:0!important}body[data-page="article"] .reader-heading{border:0!important}body[data-page="article"] .reader-heading h1,body[data-page="article"] .article-subtitle,body[data-page="article"] .reader-author,body[data-page="article"] .article-body,body[data-page="article"] .article-source{color:#000!important}body[data-page="article"] .article-body{font-size:12pt!important}body[data-page="article"] .article-source a{color:#000!important}}
.reader-cover{display:none!important}

/* Dot29: vùng chạm và input form theo kích thước thực tế */
.reader-close,.reader-listen,.reader-more,.reader-mobile-toc{min-width:44px;height:44px}
.reader-logo{width:44px;height:44px}
.check-card input,.choice-card input,.need-card input{position:absolute;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
.check-card:focus-within,.choice-card:focus-within,.need-card:focus-within{outline:2px solid var(--color-brand-a50);outline-offset:2px}
.robots-wrap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.robots{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.lead-form label:has(.required-mark){display:block}.lead-form label:has(.required-mark)>input,.lead-form label:has(.required-mark)>textarea{display:block;margin-top:7px}.lead-form label:has(.required-mark)>.field-error{display:block}
body[data-page="article"] .side-avatar{width:44px;height:44px}
body[data-page="article"] .sidebar>.sidebar-bottom .theme-toggle{width:44px;height:44px}

/* Dot53: iOS không tự zoom khi focus control nhập liệu trên màn nhỏ */
@media(max-width:1023px){input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea,select,.lead-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.lead-form textarea,.lead-form select{font-size:var(--fs-body);line-height:1.4}input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea,select,.lead-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.lead-form textarea,.lead-form select{padding-top:11px;padding-bottom:11px}input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])::placeholder,textarea::placeholder,.lead-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])::placeholder,.lead-form textarea::placeholder{font-size:var(--fs-body)}}

/* Dot33: mobile dùng cùng nội dung sidebar trong bottom sheet */
.sidebar .nav-link{padding:10px 12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.sheet-head .nav-label{padding:0}
.sheet-close{float:none;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px}
.sheet-backdrop{align-items:flex-end;opacity:1;transition:opacity .22s ease}
.menu-sheet{position:relative;max-height:85vh;overflow:auto;overscroll-behavior:contain;padding:18px 20px calc(28px + env(safe-area-inset-bottom));transform:translateY(0);transition:transform .22s var(--ease-enter)}
.menu-sheet::before{content:"";display:block;width:38px;height:4px;margin:-4px auto 14px;border-radius:999px;background:var(--color-border-strong)}
.menu-sheet>.side-profile{padding-top:4px}
.menu-sheet>.side-profile .side-name,.menu-sheet>.side-profile .side-reach,.menu-sheet>.side-profile .side-social{display:flex}
.menu-sheet>.side-profile .side-name{display:block}
.menu-sheet>.side-profile .side-reach{display:block}
.menu-sheet>.side-profile .side-social{display:flex}
.menu-sheet>.side-profile .side-avatar{width:88px;height:88px}
.menu-sheet>.side-profile .side-name{font-size:var(--fs-body)}
.menu-sheet>.nav-label{padding-left:0}
.menu-sheet .nav-link{min-height:44px;justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left}
.menu-sheet>.sidebar-bottom{display:none}
html.sheet-open,body.sheet-open{overflow:hidden}
.sheet-open .message-fab,.sheet-open .message-reminder{visibility:hidden;pointer-events:none}
@media(max-width:900px){
  .mobile-nav{justify-content:flex-start}
  .sheet-backdrop{z-index:60;inset:0 0 calc(10px + 58px + env(safe-area-inset-bottom)) 0}
  .menu-sheet{width:100%;border-radius:22px 22px 0 0;box-shadow:var(--shadow-pop)}
}
@media(prefers-reduced-motion:reduce){.sheet-backdrop,.menu-sheet{transition:none}}
@media(max-width:900px){.reader-close{width:44px}.reader-toc-sheet-close{width:44px;height:44px}}

/* Dot27: theme ở hàng mạng xã hội, mobile sheet và rail bài đọc */
.icon-sun{}
.sidebar>.sidebar-bottom{display:none}
.privacy-sidebar-link{display:block;margin:16px 10px 0;color:var(--color-text-muted);font-size:var(--fs-small);line-height:1.4;opacity:.8}.privacy-sidebar-link:hover{color:var(--color-text-secondary);opacity:1}
.side-social{align-items:center}
.side-social>a{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0}
.side-social .theme-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--color-border-strong);border-radius:50%;background:transparent;color:var(--color-text)}
.menu-sheet>.side-profile .side-social{justify-content:center;gap:12px;flex-wrap:nowrap}
.menu-sheet>.side-profile .side-social>a,.menu-sheet>.side-profile .side-social>.theme-toggle{flex:0 0 44px;width:44px;height:44px}
.sheet-close .icon{width:20px;height:20px;color:currentColor}
.side-social .theme-toggle:hover{border-color:var(--color-brand);color:var(--color-brand-text)}
.sheet-theme{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-border);font-size:var(--fs-small)}
.sheet-theme .theme-toggle{flex:0 0 44px}
body[data-page="article"] .sidebar>.sidebar-bottom{display:flex;width:100%;justify-content:center;margin-top:auto;padding:12px 0 0;border-top:1px solid var(--color-border)}
body[data-page="article"] .sidebar>.sidebar-bottom .theme-toggle{width:42px;height:42px}

/* Dot12b: reader menu icons and closed mobile TOC sheet */
.icon-link{}
.icon-share-2{}
.icon-file-text{}
.icon-volume-2{}
.icon-bookmark{}
.icon-flag{}
.reader-toc-sheet[hidden]{display:none!important}

/* Dot12: reader desktop giữ sidebar ở dạng icon rail, mobile vẫn dùng bottom tabs. */
body[data-page="article"]{padding-left:72px}
body[data-page="article"] .sidebar{display:flex;width:72px;padding:18px 10px 12px;align-items:center;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
body[data-page="article"] .side-profile{width:100%;padding:0 0 16px;margin-bottom:16px}
body[data-page="article"] .side-avatar{width:42px;height:42px;border-width:1px}
body[data-page="article"] .side-name,body[data-page="article"] .side-reach,body[data-page="article"] .side-social,body[data-page="article"] .sidebar .nav-label,body[data-page="article"] .sidebar .nav-link>span:last-child,body[data-page="article"] .sidebar-bottom .profile{display:none}
body[data-page="article"] .sidebar nav{width:100%}
body[data-page="article"] .sidebar .nav-label-community{display:none}
body[data-page="article"] .sidebar .nav-link{justify-content:center;width:50px;height:50px;padding:0 12px;margin:2px auto;border-radius:10px}
body[data-page="article"] .sidebar .nav-link-icon{width:21px;height:21px;color:var(--color-text-muted)}
body[data-page="article"] .sidebar .nav-link:hover .nav-link-icon,body[data-page="article"] .sidebar .nav-link.active .nav-link-icon{color:var(--color-brand-text)}
body[data-page="article"] .sidebar-bottom{width:100%;justify-content:center;padding:12px 0 0}
body[data-page="article"] .sidebar-bottom .theme-toggle{width:42px;height:42px}
@media(max-width:900px){body[data-page="article"]>.bottom-tabs{display:flex}}
body[data-page="article"] main{max-width:none;margin:0;padding:16px 20px 24px}
@media(max-width:900px){body[data-page="article"]{padding-left:0}body[data-page="article"] .sidebar{display:none}body[data-page="article"] main{padding:0 0 12px}}
.hero>div{flex:1;min-width:0}
.hero-title-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px}
.hero-title-row h1{margin-right:auto}
.home-contact{flex:0 0 auto;white-space:nowrap}
@media(max-width:900px){.mobile-nav{display:flex;align-items:center;gap:9px;padding:0 18px;height:var(--header-h);position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--color-bg-alt) 92%,transparent);backdrop-filter:blur(14px)}.hero-title-row{display:block}.home-contact{margin-top:4px}.mobile-nav .mobile-brand{display:block}.mobile-nav .mobile-brand-dot{display:block}}
.student-page{max-width:900px;margin-top:34px}.student-card h2{max-width:none}.student-resource-list{display:grid;gap:0;margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--color-border)}.student-resource-list li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--color-border)}.student-resource-list strong,.student-resource-list span{display:block}.student-resource-list strong{font-size:var(--fs-body)}.student-resource-list span{margin-top:4px;color:var(--color-text-secondary);font-size:var(--fs-small);line-height:1.5}.student-resource-list small{flex:0 0 150px;color:var(--color-text-muted);font-size:var(--fs-label);line-height:1.5;text-align:right}.student-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.btn.disabled,.btn:disabled{cursor:not-allowed;opacity:.42;filter:grayscale(.35);border:1px solid var(--color-border);background:var(--color-surface-read);color:var(--color-text-muted)}
@media(max-width:900px){.student-resource-list li{display:block}.student-resource-list small{display:block;margin-top:8px;text-align:left}.student-actions{display:grid}.student-actions .btn{width:100%}}

/* Dot29 final overrides after reader rail rules */
.reader-close,.reader-listen,.reader-more,.reader-mobile-toc{min-width:44px!important;height:44px!important}
.reader-logo{width:44px!important;height:44px!important}
.reader-logo img,.reader-author-avatar img{display:block;width:100%;height:100%;object-fit:cover}
body[data-page="article"] .side-avatar,body[data-page="article"] .sidebar-bottom .theme-toggle{width:44px!important;height:44px!important}

/* Sidebar cuộn được trên màn thấp, giữ các nhóm nội dung nguyên kích thước. */
.sidebar{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.sidebar>*{flex-shrink:0}
.reader-toc-link{min-height:44px;display:flex;align-items:center}
.reader-footer a,.reader-footer button{min-height:44px;padding:10px 0}
span.demo-play,.student-resource-list small,.reader-toc-panel strong,.reader-toc-sheet-inner>strong,.reader-author strong{font-size:var(--fs-label)!important}

/* Dot34: layout theo bề rộng thực của vùng nội dung, không theo viewport */
main{container:main / inline-size;padding-bottom:calc(72px + var(--floating-safe-bottom,0px))}
html{scroll-padding-bottom:calc(72px + var(--floating-safe-bottom,0px))}

/* Case: 4 số chỉ nằm ngang khi chính thẻ đủ rộng */
.case-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-stats strong{font-size:var(--fs-stat);overflow-wrap:normal}
@container main (min-width:1000px){.case-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Dịch vụ: các card có chiều rộng đủ để chữ không bị bẻ vụn */
.method-steps{grid-template-columns:1fr}
.method-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:start}
.method-step-top{display:contents}
.method-icon{grid-column:1;grid-row:1 / span 3}
.method-number{position:absolute;top:16px;right:14px}
.method-step h3,.method-step p,.method-step .service-chips{grid-column:2}
.method-step h3{margin-top:0;padding-right:42px}
.method-step p{min-height:0}
.method-connector{top:auto;right:auto;left:35px;bottom:-18px;width:0;height:18px;border-top:0;border-left:1px dashed var(--color-brand-text)}
.method-connector i{left:-4px;top:46%}
.start-grid,.blog-grid,.products-grid,.courses-grid,.need-grid{grid-template-columns:1fr}
.need-card{min-height:58px;align-items:center}
@container main (min-width:640px){
  .need-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container main (min-width:1000px){
  .method-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .method-step{display:block;padding:16px 14px}
  .method-step-top{display:flex}
  .method-icon{grid-column:auto;grid-row:auto}
  .method-number{position:static}
  .method-step h3{margin-top:16px;padding-right:0}
  .method-step p{min-height:72px}
  .method-connector{top:35px;right:-34px;left:auto;bottom:auto;width:36px;height:0;border-top:1px dashed var(--color-brand-text);border-left:0}
  .method-connector i{left:48%;top:-4px}
  .start-grid,.blog-grid,.products-grid,.courses-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container main (min-width:1100px){.contact-layout{display:grid;grid-template-columns:minmax(560px,1.38fr) minmax(360px,1fr);gap:36px}}
.contact-layout{display:flex;flex-direction:column;gap:36px}
@container main (min-width:1100px){.contact-layout{display:grid}}

/* Dot39: nút Messenger nằm ngay trên thanh tab mobile, không đẩy theo nội dung */
.message-fab{bottom:calc(22px + var(--floating-safe-bottom,0px))}
.message-reminder{bottom:calc(34px + var(--floating-safe-bottom,0px))}
@media(min-width:901px) and (max-width:1099px){.message-fab{right:22px}.message-reminder{right:94px}}
@media(max-width:900px){.message-fab{right:14px;bottom:calc(80px + env(safe-area-inset-bottom))}.message-reminder{right:78px;bottom:calc(88px + env(safe-area-inset-bottom))}}
@media(max-width:900px){.bottom-tabs{bottom:calc(10px + env(safe-area-inset-bottom))}}

/* Dot35: reader toolbar mobile hiện khi cuộn lên, thay mobile-nav */
@media(max-width:900px){
  body[data-page="article"] .mobile-nav{display:none}
  body[data-page="article"] .sheet-backdrop{z-index:70}
  body[data-page="article"] .reader-toolbar{
    position:fixed;inset:0 0 auto;z-index:65;grid-template-columns:1fr auto 1fr;
    min-height:calc(64px + env(safe-area-inset-top));height:calc(64px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 10px 0;border-radius:0;background:var(--color-surface);
    box-shadow:0 2px 0 var(--color-border),0 8px 24px rgba(0,0,0,.16);
    backdrop-filter:blur(14px);transform:translateY(0);transition:transform .22s var(--ease-exit)
  }
  body[data-page="article"] .reader-toolbar.is-hidden{transform:translateY(-100%)}
  body[data-page="article"] .reader-toolbar.is-reduced-motion{transition:none}
  body[data-page="article"] .reader-close{position:absolute;left:10px;top:calc(env(safe-area-inset-top) + 10px);width:44px;font-size:0}
  body[data-page="article"] .reader-close:after{content:'×';font-size:var(--fs-glyph)}
  body[data-page="article"] .reader-mobile-toc{display:block;justify-self:start;width:auto;margin-left:48px;padding:0 10px;font-size:var(--fs-small)}
  body[data-page="article"] .reader-logo{width:34px;height:34px}
  body[data-page="article"] .reader-main{padding:calc(36px + 64px + env(safe-area-inset-top)) 20px 80px}
  body[data-page="article"] .reader-more-popover{position:fixed;top:calc(64px + env(safe-area-inset-top));right:10px;width:min(270px,calc(100vw - 20px))}
}
@media(prefers-reduced-motion:reduce){body[data-page="article"] .reader-toolbar{transition:none!important}}

/* Dot41: blog card gọn, một link duy nhất, không lặp tag/mô tả/số thứ tự */
.blog-card{padding:0;min-height:0;overflow:hidden}
.blog-card-link{position:relative;display:grid;grid-template-columns:1fr;min-height:100%;height:100%;padding:14px;color:var(--color-text);outline-offset:-3px}
.blog-card-link:focus-visible{outline:2px solid var(--color-brand);outline-offset:-3px}
.blog-card-thumb{grid-row:auto;margin:0;aspect-ratio:16/9;border:0;border-radius:var(--radius-sm);cursor:pointer}
.blog-card-content{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:11px;padding-right:26px}
.blog-card-tag{font-size:var(--fs-label);line-height:1.2}
.blog-card-title{display:-webkit-box;overflow:hidden;margin-top:9px;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.02em;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.blog-card .post-meta{margin-top:9px;padding:0;font-size:var(--fs-small);color:var(--color-text-muted)}
.blog-card-arrow{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--color-brand-text);font-size:var(--fs-glyph)}
.blog-card:hover .blog-card-arrow{background:var(--color-brand-a15)}
.blog-card-home .blog-card-title{font-size:var(--fs-h3)}
.blog-list-grid{grid-template-columns:1fr}
@container main (min-width:640px){.blog-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (min-width:1000px){.blog-list-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){
  .blog-grid .post-card:nth-child(n+3){display:flex}
  .blog-card-home{height:120px;max-height:120px}
  .blog-card-home .blog-card-link{grid-template-columns:96px minmax(0,1fr);column-gap:12px;padding:11px}
  .blog-card-home .blog-card-thumb{grid-row:1;height:98px;aspect-ratio:auto}
  .blog-card-home .blog-card-content{grid-column:2;grid-row:1;padding:0 22px 0 0}
  .blog-card-home .blog-card-tag{font-size:var(--fs-label)}
  .blog-card-home .blog-card-title{margin-top:6px;font-size:var(--fs-h3);line-height:1.22}
  .blog-card-home .post-meta{margin-top:auto;font-size:var(--fs-small)}
  .blog-card-home .blog-card-arrow{right:3px;bottom:7px;width:40px;height:40px;font-size:var(--fs-glyph)}
}
@container main (min-width:640px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (min-width:1000px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Dot54: start-grid đủ ba thẻ từ 1024px, Blog dạng danh sách kiểu Substack */
@media(min-width:1024px){
  body[data-page="home"] .start-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  body[data-page="home"] .start-card{height:100%}
}

/* Dot57: mobile filter rows stay compact and scroll horizontally. */
@media(max-width:900px){
  .filter-strip{position:relative;margin:26px -20px 0 0;overflow:hidden}
  .filter-strip.has-overflow:not(.at-end)::after{content:"";position:absolute;z-index:2;top:0;right:0;width:30px;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent,var(--color-bg) 88%)}
  .filters{display:flex;flex-wrap:nowrap;gap:7px;margin:0;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;padding:0 20px 2px 0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto;min-height:40px;padding:9px 13px;scroll-snap-align:start}
  .filter .icon{width:16px;height:16px}
  .filter-sep{display:block;flex:0 0 1px;width:1px;margin:4px 4px;background:var(--color-border-strong)}
  .status-row{min-height:24px;margin-top:7px;margin-bottom:14px;font-size:var(--fs-label)}
  .status-row .saved-filter{margin-left:auto;width:40px;height:40px;padding:0;border-radius:50%}
  .saved-filter .icon{width:17px;height:17px}
  .saved-filter.active{background:var(--color-brand-a15)}
}
.blog-list-grid{display:grid;grid-template-columns:1fr;max-width:820px;margin:26px 0 0}
body[data-page="blog"] .status-row,body[data-page="skills"] .status-row{gap:0}
.blog-list-card{min-height:0;padding:0;border:0;border-bottom:1px solid var(--color-border);border-radius:0;box-shadow:none;background:transparent;transform:none!important}
.blog-list-card:first-child{border-top:1px solid var(--color-border)}
.blog-list-card:hover{border-color:var(--color-border);background:var(--color-brand-a08)}
.blog-list-card .blog-card-link{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:24px;align-items:center;min-height:190px;padding:20px 0;transition:background var(--dur-base,.2s) ease}
.blog-list-card .blog-card-content{grid-column:1;grid-row:1;justify-content:center;padding:0;min-width:0}
.blog-list-card .blog-card-thumb{grid-column:2;grid-row:1;width:120px;height:150px;aspect-ratio:4/5;border:0;border-radius:var(--radius-sm);cursor:default}
.blog-list-card .blog-card-title{margin-top:8px;font-size:var(--fs-h3);line-height:1.25}
.blog-list-card .blog-card-subtitle{display:-webkit-box;overflow:hidden;margin-top:7px;color:var(--color-text-secondary);font-size:var(--fs-body);line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.blog-list-card .post-meta{margin-top:10px;padding:0;color:var(--color-text-muted);font-size:var(--fs-small);letter-spacing:.04em}
.blog-card .post-author,.reader-author-name{text-transform:none!important}
.blog-list-card .blog-card-arrow{display:none}
.blog-list-card .blog-card-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
@media(max-width:600px){
  .blog-list-card .blog-card-link{grid-template-columns:minmax(0,1fr) 92px;gap:14px;min-height:147px;padding:16px 0}
  .blog-list-card .blog-card-thumb{width:92px;height:115px}
  .blog-list-card .blog-card-title{margin-top:6px;font-size:var(--fs-h3);line-height:1.25}
  .blog-list-card .blog-card-subtitle{margin-top:5px;font-size:var(--fs-body);line-height:1.35;-webkit-line-clamp:2}
  .blog-list-card .post-meta{margin-top:7px;font-size:var(--fs-small)}
  .blog-list-card .blog-card-tag{font-size:var(--fs-label)}
}

/* Dot36: CTA Liên hệ nằm trên thanh mobile riêng cho Trang chủ */
.hero>div{flex:1;min-width:0}
.hero-title-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px}
.hero-title-row h1{margin-right:auto}
.home-contact,.mobile-home-contact{flex:0 0 auto;white-space:nowrap}
.mobile-home-contact{display:none}
@media(max-width:899px){
  .hero-title-row{display:block}
  .hero-title-row .home-contact{display:none}
  body:not([data-page="home"]):not([data-page="article"]) .mobile-nav{display:none}
  body[data-page="home"] .mobile-nav{display:flex;align-items:center;gap:12px;position:static;top:auto;min-height:calc(76px + env(safe-area-inset-top));padding:calc(env(safe-area-inset-top) + 10px) 18px 10px;background:var(--color-bg-alt)}
  body[data-page="home"] main{padding-top:14px}
  .mobile-profile-avatar{display:grid;place-items:center;flex:0 0 60px;width:60px;height:60px;border:2px solid var(--color-brand-a35);border-radius:50%;overflow:hidden;background:var(--color-brand-a15);color:var(--color-brand-text);font:700 var(--fs-h3) var(--font-mono)}
  .mobile-profile-avatar img{display:block;width:100%;height:100%;object-fit:cover}
  .mobile-profile-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;gap:1px;text-align:left}
  .mobile-profile-copy strong{font-size:var(--fs-body);line-height:1.15}
  .mobile-profile-followers{display:block;color:var(--color-text-muted);font:400 var(--fs-small)/1.2 var(--font-sans);white-space:nowrap}
  .mobile-home-contact{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto;padding:10px 12px;font-size:var(--fs-small);min-height:44px;height:44px}
}
@media(max-width:899px){
  body:not([data-page="home"]):not([data-page="article"]) main{padding-top:calc(env(safe-area-inset-top) + 18px)}
}

/* Inline icons: giữ class/kích thước cũ, không dùng mask file ngoài. */
.icon,.brand-icon{background:none!important;mask:none!important;-webkit-mask:none!important}

/* Thẻ dịch vụ theo thang chữ chung: 2 cột dưới 1024px, 3 + 2 từ 1024px, 5 cột một hàng từ 1700px. Nút luôn thẳng đáy trong cùng hàng. */
.service-card{display:flex;flex-direction:column}
.service-card ul{margin-bottom:auto}
.service-card .service-contact{font-size:var(--fs-body)}
.service-desc{min-height:0;font-size:var(--fs-body);line-height:1.5}
.service-card li{font-size:var(--fs-body);line-height:1.4}
.service-label{align-self:flex-start;white-space:normal}
@media(min-width:1024px){
  .services-grid{grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch}
  .service-card{grid-column:span 2}
  .service-card:nth-child(n+4){grid-column:span 3}
}
@media(min-width:1700px){
  .services-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .service-card,.service-card:nth-child(n+4){grid-column:auto}
}

/* Khu thành viên: nút thu gọn menu trái (chỉ desktop, chỉ trang thành viên). Nhớ bằng localStorage andanceos.sideMini. */
.side-mini-btn{display:none}
@media(min-width:901px){
  body[data-page="member"] #sidebar .side-mini-btn{display:flex;align-items:center;gap:10px;margin:10px 0 6px;padding:9px 12px;min-height:40px;border:1px solid var(--color-border);border-radius:10px;background:transparent;color:var(--color-text-secondary);font-size:var(--fs-small);width:100%}
  body[data-page="member"] #sidebar .side-mini-btn:hover{border-color:var(--color-brand);color:var(--color-text)}
  body[data-page="member"] .side-mini-ico{width:18px;height:18px;flex:none}
  body[data-page="member"].side-mini{padding-left:72px}
  body[data-page="member"].side-mini .sidebar{width:72px;padding:18px 10px 12px;align-items:center}
  body[data-page="member"].side-mini .side-profile{width:100%;padding:0 0 16px;margin-bottom:16px}
  body[data-page="member"].side-mini .side-avatar{width:42px;height:42px;border-width:1px}
  body[data-page="member"].side-mini .side-name,
  body[data-page="member"].side-mini .side-reach,
  body[data-page="member"].side-mini .side-social,
  body[data-page="member"].side-mini .sidebar .nav-label,
  body[data-page="member"].side-mini .sidebar .nav-link>span:last-child,
  body[data-page="member"].side-mini .privacy-sidebar-link,
  body[data-page="member"].side-mini .side-mini-txt{display:none}
  body[data-page="member"].side-mini .sidebar nav{width:100%}
  body[data-page="member"].side-mini .sidebar .nav-link{justify-content:center;width:50px;height:50px;padding:0 12px;margin:2px auto;border-radius:10px}
  body[data-page="member"].side-mini .sidebar .nav-link-icon{width:21px;height:21px}
  body[data-page="member"].side-mini #sidebar .side-mini-btn{width:50px;height:50px;padding:0;justify-content:center;margin:auto 0 0}
  body[data-page="member"].side-mini .side-mini-ico{transform:rotate(180deg)}
}