:root{--bg:#fffaf3;--ink:#2b2d42;--mut:#5c6070;--acc:#d9622b;--acc2:#b44a1a;--card:#fff;--line:#eadfce;--soft:#fdebd6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc2)}
.cn-wrap{max-width:900px;margin:0 auto;padding:0 16px}
.cn-skip{position:absolute;left:-999px}.cn-skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.cn-head{border-bottom:1px solid var(--line);background:var(--card)}
.cn-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.cn-logo{font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--ink)}
.cn-nav a,.cn-fnav a{margin-left:14px;text-decoration:none;color:var(--ink)}
.cn-nav a:hover,.cn-fnav a:hover{text-decoration:underline}
.cn-main{padding-top:24px;padding-bottom:40px}
.cn-h1{font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.2;margin:.2em 0 .5em}
.cn-content h2{margin:1.6em 0 .5em;font-size:1.4rem}
.cn-content p{margin:0 0 1em}
.cn-tool{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:18px 0}
.cn-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.cn-fs{border:0;margin:0;padding:0;min-width:0}.cn-fs legend{font-weight:700;font-size:.9rem;margin-bottom:6px;padding:0}
.cn-chips,.cn-dots{display:flex;flex-wrap:wrap;gap:6px}
.cn-chip,.cn-dot{font:inherit;font-size:.92rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer;min-height:36px}
.cn-dot{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px}.cn-dot i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:block}
.cn-chip[aria-pressed=true],.cn-dot[aria-pressed=true]{background:var(--acc);color:#fff;border-color:var(--acc)}
.cn-go{grid-column:1/-1;font:inherit;font-weight:700;background:var(--acc);color:#fff;border:0;border-radius:10px;padding:12px 18px;cursor:pointer;min-height:44px}
.cn-go:hover{background:var(--acc2)}
.cn-status{color:var(--mut);font-size:.9rem;margin:10px 0 0}
.cn-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px}
.cn-card{display:grid;gap:3px;background:var(--soft);border-radius:10px;padding:10px 12px;min-width:0}
.cn-nm{font-size:1.15rem;overflow-wrap:anywhere}
.cn-tag{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.cn-fit{font-size:.88rem;color:var(--mut)}
.cn-act{display:flex;gap:6px;margin-top:4px}
.cn-copy,.cn-fav{font:inherit;font-size:.85rem;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:5px 10px;cursor:pointer;min-height:34px}
.cn-fav[aria-pressed=true]{color:#d6224a;border-color:#d6224a}
.cn-favbox{margin-top:12px}.cn-favlist{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}.cn-favlist li{background:var(--soft);border-radius:999px;padding:4px 12px}
.cn-hubs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.cn-hubs a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;text-decoration:none;font-weight:600}
.cn-az{display:grid;gap:6px}.cn-azr{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:8px;border-bottom:1px solid var(--line);padding:4px 0}.cn-azr b{color:var(--acc2)}.cn-azr span{overflow-wrap:anywhere}
.cn-content table{border-collapse:collapse;width:100%;font-size:.95rem;display:block;overflow-x:auto}
.cn-content th,.cn-content td{border:1px solid var(--line);padding:8px 10px;text-align:left}.cn-content th{background:var(--soft)}
.cn-content details{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px 0;background:var(--card)}.cn-content summary{font-weight:700;cursor:pointer}
.cn-date{color:var(--mut);font-size:.85rem}
.cn-ugc{margin-top:32px;border-top:1px solid var(--line);padding-top:8px}
.cn-ugc textarea,.cn-ugc input[type=text],.cn-ugc input[type=email]{width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.cn-ugc input[type=submit]{font:inherit;font-weight:700;background:var(--acc);color:#fff;border:0;border-radius:10px;padding:10px 16px;cursor:pointer}
.cn-clist{padding-left:1.2em}
.cn-foot{border-top:1px solid var(--line);padding:20px 0;background:var(--card);margin-top:20px;font-size:.92rem}
.cn-fnav a:first-child{margin-left:0}.cn-copy{color:var(--mut)}
/* v2 layout */
.cn-head{position:sticky;top:0;z-index:5}.cn-wrap.cn-bar,.cn-wrap{max-width:1100px}
.cn-logo{display:inline-flex;align-items:center;gap:8px;font-size:1.3rem;letter-spacing:-.01em}.cn-logo em{font-style:normal;color:var(--acc)}.cn-logo small{font-size:.7em;color:var(--mut);font-weight:700}.cn-lm{font-size:1.6rem}
.cn-nav a{font-weight:600;font-size:.95rem}
.cn-hero{background:linear-gradient(120deg,#fff3e6,#fffaf3 60%,#ffe9d6)}
.cn-herogrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:center;padding-top:36px;padding-bottom:36px}
.cn-hero .cn-h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:900;line-height:1.1;margin:0 0 .4em}
.cn-def{font-size:1.08rem;max-width:34em}
.cn-cta{display:inline-block;background:var(--acc);color:#fff;font-weight:800;text-decoration:none;border-radius:14px;padding:14px 26px;box-shadow:0 8px 20px rgba(217,98,43,.3)}
.cn-cta:hover{background:var(--acc2)}
.cn-stats{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:22px}.cn-stats li{display:grid}.cn-stats b{font-size:1.2rem}.cn-stats span{font-size:.85rem;color:var(--mut)}
.cn-heroart{position:relative;min-height:240px;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#ffd9b8,#ffe9d6 60%,transparent 70%);border-radius:50%}
.cn-bigcat{font-size:clamp(120px,24vw,220px);line-height:1}.cn-hand{position:absolute;right:0;bottom:10px;max-width:11em;font:italic 700 1.15rem/1.25 "Segoe Script","Bradley Hand",cursive;transform:rotate(-6deg);color:var(--ink)}
@media(max-width:720px){.cn-herogrid{grid-template-columns:minmax(0,1fr)}.cn-heroart{min-height:170px;order:-1}}
.cn-sec{margin:34px 0}.cn-h2c{text-align:center;font-size:1.7rem;margin:0 0 6px}.cn-sub{text-align:center;color:var(--mut);margin:0 0 18px}
.cn-cats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:14px}
.cn-cats a{position:relative;display:grid;gap:4px;height:100%;background:var(--bg2,#fdebd6);border-radius:14px;padding:16px 14px 18px;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.cn-cats .cn-ic{font-size:2.6rem;line-height:1.1}.cn-cats small{color:var(--mut);font-size:.82rem;padding-right:20px}.cn-cats i{position:absolute;right:12px;bottom:12px;background:#fff;color:#111;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-style:normal;font-weight:800}
.cn-rand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;background:linear-gradient(100deg,#fdebd6,#fff4e8);border-radius:18px;padding:22px;margin:30px 0;text-align:center}
.cn-rcat{font-size:clamp(56px,10vw,100px)}.cn-rand h2{margin:0 0 4px;font-size:1.6rem}.cn-rand p{margin:0 0 12px}
.cn-bubble{display:inline-block;background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:8px 18px;font-weight:800;font-size:1.3rem;margin-bottom:12px;overflow-wrap:anywhere}
.cn-rgo{display:block;margin:0 auto;max-width:360px;width:100%;border-radius:999px}
@media(max-width:560px){.cn-rand{grid-template-columns:minmax(0,1fr)}.cn-rcat{display:none}}
.cn-pills{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cn-pill{font:inherit;font-weight:600;border:0;border-radius:999px;padding:8px 22px;cursor:pointer;color:#2b2d42;min-height:40px}
.cn-why{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:20px;align-items:center;background:#eef4fd;border-radius:18px;padding:24px;margin:34px 0}
.cn-whyart{font-size:clamp(90px,16vw,150px);text-align:center}.cn-why h2{margin:0 0 8px}.cn-wl{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}.cn-wl li{display:grid;gap:2px}.cn-wl span{font-size:.88rem;color:var(--mut)}
@media(max-width:640px){.cn-why{grid-template-columns:minmax(0,1fr)}}
.cn-foot{background:#14202e;color:#d7dde6;border:0;padding:34px 0 16px}.cn-foot a{color:#d7dde6}.cn-foot h2{font-size:1rem;color:#fff;margin:0 0 8px}
.cn-fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}.cn-fgrid nav{display:grid;gap:5px;align-content:start}.cn-fgrid nav a{margin:0;text-decoration:none}.cn-fgrid nav a:hover{text-decoration:underline}
.cn-foot .cn-logo,.cn-foot .cn-logo small{color:#fff}.cn-foot p{font-size:.9rem}.cn-foot .cn-fcopy{text-align:center;border-top:1px solid #2a3a4e;margin-top:20px;padding-top:14px;color:#9fb0c4;max-width:1100px;margin-left:auto;margin-right:auto}
@media(max-width:720px){.cn-fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cn-azn{font:inherit;border:0;background:none;color:var(--ink);padding:2px 6px;margin:1px;cursor:pointer;border-radius:6px;min-height:28px}.cn-azn:hover{background:var(--soft)}
.cn-lm svg,.cn-ic svg,.cn-rcat svg,.cn-whyart svg,.cn-bigcat svg{width:1em;height:1em;display:block}.cn-herofig{width:min(100%,380px);height:auto;border-radius:24px}.cn-feat{width:100%;max-width:420px;height:auto;border-radius:16px;display:block;margin:0 0 16px}.cn-lm{display:inline-flex}.cn-fig img{max-width:420px;width:100%;height:auto;border-radius:12px}.cn-fig{margin:16px 0}
.cn-heroart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:none;border-radius:0;min-height:0}
.cn-hand{position:static;transform:rotate(-3deg);max-width:none;text-align:center;font-size:1.1rem}
.cn-herofig{width:min(100%,340px)}
.cn-azn{font-size:.9rem}
@media(max-width:720px){.cn-herofig{width:min(70%,260px)}.cn-azr{grid-template-columns:1.6rem minmax(0,1fr)}}
/* v3 photo layout */
:root{--bg:#fff;--soft:#fdf0e3}
.cn-head{background:var(--card);box-shadow:0 1px 0 var(--line)}
.cn-logo{font-size:1.45rem}.cn-logo b{color:var(--ink)}
.cn-nav{display:flex;gap:22px;flex-wrap:wrap}.cn-nav a{margin:0;padding:4px 0}.cn-nav a[aria-current]{color:var(--acc);border-bottom:2px solid var(--acc)}
.cn-hero{background:linear-gradient(100deg,#fff4ea 0%,#fff 55%);overflow:hidden}
.cn-herogrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:44px;padding-bottom:44px;gap:30px}
.cn-hero .cn-h1{font-size:clamp(2.2rem,6vw,3.8rem);letter-spacing:-.02em}.cn-hero .cn-h1 span{color:var(--acc)}
.cn-heroart{display:block;position:relative;background:none;border-radius:0;min-height:0}
.cn-herofig{width:100%;max-width:none;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:26px;display:block;box-shadow:0 18px 40px rgba(120,70,30,.18)}
.cn-heroart .cn-hand{position:absolute;right:14px;bottom:16px;max-width:10.5em;text-align:right;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);transform:rotate(-5deg);font-size:1.25rem}
.cn-cta{border-radius:999px;padding:15px 30px;font-size:1.05rem}
.cn-stats{gap:28px}.cn-stats li{display:flex;align-items:center;gap:10px}.cn-stats li span{display:grid;line-height:1.25}.cn-stats b{font-size:1.15rem}
.cn-si{width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
@media(max-width:720px){.cn-herogrid{grid-template-columns:minmax(0,1fr)}.cn-heroart{order:-1}.cn-herofig{aspect-ratio:4/3}}
.cn-cats{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media(max-width:980px){.cn-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:560px){.cn-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cn-cats a{position:relative;display:block;padding:0;background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 4px 14px rgba(40,40,60,.07);transition:transform .15s}
.cn-cats a:hover{transform:translateY(-3px)}
.cn-cats img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cn-cb{display:grid;gap:2px;padding:10px 34px 12px 12px;background:#eef3fc}.cn-cb b{font-size:1rem}.cn-cb small{font-size:.76rem;color:var(--mut);line-height:1.3}
.cn-cats i{position:absolute;right:10px;bottom:12px;width:22px;height:22px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1rem;line-height:1}
.cn-rand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.8fr);gap:0;align-items:center;background:linear-gradient(100deg,#fde9d4,#fff3e6);border-radius:20px;padding:0;overflow:hidden;text-align:center;margin:34px 0}
.cn-rand img{width:100%;height:100%;min-height:200px;object-fit:cover;display:block}.cn-rmid{padding:22px 14px}
.cn-rgo{border-radius:999px;max-width:340px}
@media(max-width:700px){.cn-rand{grid-template-columns:minmax(0,1fr)}.cn-rl,.cn-rr{display:none}}
.cn-pill{padding:9px 26px;font-size:1rem}
.cn-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;padding:0;background:#eef3fc;border-radius:20px;overflow:hidden;align-items:stretch}
.cn-whyart{position:relative;font-size:1rem}.cn-whyart img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block}
.cn-whyart .cn-hand{position:absolute;left:18px;top:18px;right:auto;bottom:auto;max-width:9em;text-align:left;color:#2b2d42;text-shadow:0 1px 4px rgba(255,255,255,.8);transform:rotate(-6deg)}
.cn-why>div:last-child{padding:26px}
.cn-wl{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}.cn-wl li{display:flex;gap:10px;align-items:flex-start}.cn-wl li span:last-child{display:grid;font-size:.85rem}.cn-wl b{font-size:.95rem;color:var(--ink)}
.cn-wi{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
@media(max-width:700px){.cn-why{grid-template-columns:minmax(0,1fr)}}
.cn-cats img{height:auto!important;aspect-ratio:4/3}.cn-rand img{height:auto;min-height:0;aspect-ratio:4/3}.cn-whyart img{height:100%;aspect-ratio:3/2}
.cn-fcopy{text-align:center;border-top:1px solid #2a3a4e;margin:20px auto 0;padding-top:14px;color:#9fb0c4;max-width:1100px;font-size:.88rem}
.cn-rand{align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.9fr)}.cn-rand img{height:100%;aspect-ratio:auto;min-height:220px}.cn-rmid{align-self:center}
.cn-ugc input[type=url]{width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
/* v1.3 — ui pass 28/10/2026 */
.cn-tag{font-size:.82rem}.cn-fit{font-size:.92rem}.cn-copy,.cn-fav{font-size:.9rem}.cn-date{font-size:.9rem}.cn-cb small{font-size:.88rem}.cn-wl span{font-size:.95rem}.cn-stats span{font-size:.92rem}.cn-status{font-size:.95rem}.cn-content table{font-size:1rem}
.cn-content p,.cn-content li,.cn-def,.cn-sub{font-size:17px}
/* footer desktop */
.cn-foot{background:#0f1b2a;color:#cdd6e2;padding:40px 0 0;position:relative;overflow:hidden}
.cn-fgrid{grid-template-columns:1.5fr 1fr 1.1fr minmax(0,.9fr);gap:36px;align-items:start}
.cn-foot h2{font-size:1.05rem;margin:0 0 12px}.cn-fgrid nav{gap:8px}.cn-fgrid nav a{font-size:.98rem;color:#cdd6e2}
.cn-fbrand p{font-size:.98rem;line-height:1.6;max-width:26em;margin:12px 0 16px;color:#b8c3d2}
.cn-soc{display:flex;gap:10px}.cn-soc a{width:38px;height:38px;border-radius:50%;background:#1f3149;display:grid;place-items:center;transition:transform .15s,background .15s}.cn-soc a:hover{transform:translateY(-2px);background:#ff8a52}.cn-soc svg{width:19px;height:19px;fill:#fff}
.cn-fart{align-self:end;justify-self:end;max-width:190px}.cn-fcat{width:100%;height:auto;display:block;opacity:.9;margin-bottom:-6px}
.cn-fbase{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #243750;margin-top:18px;padding:14px 16px}
.cn-fbase .cn-fcopy{border:0;margin:0;padding:0;flex:1;max-width:none}.cn-paw{width:28px;height:28px;fill:#34506f;flex:none}
.cn-dock,.cn-sheet{display:none}
/* mobile */
@media(max-width:700px){
.cn-fart{display:none}.cn-fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 14px}.cn-fbrand{grid-column:1/-1}
.cn-foot{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
.cn-wrap{padding-left:8px;padding-right:8px}.cn-main{padding-top:14px}
.cn-tool{padding:8px;border-radius:12px;margin:12px 0}
.cn-rand,.cn-why,.cn-cats a,.cn-hero,.cn-ugc{border-radius:12px}
.cn-rmid{padding:16px 8px}.cn-why>div:last-child{padding:16px 8px}.cn-cb{padding:8px 30px 10px 8px}
.cn-card{padding:8px 8px}.cn-content details{padding:6px 8px}.cn-sec{margin:24px 0}
.cn-content table,.cn-content .wp-block-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cn-content th,.cn-content td{padding:6px 8px;min-width:6em}
.cn-content{min-width:0}.cn-art{min-width:0}
.cn-dock{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;left:6px;right:6px;bottom:max(6px,env(safe-area-inset-bottom));z-index:40;background:#14202e;border-radius:22px;padding:6px 4px 6px;box-shadow:0 8px 28px rgba(10,20,40,.35)}
.cn-dock a,.cn-dock button{display:grid;justify-items:center;gap:2px;background:none;border:0;color:#aebbd0;font:inherit;text-decoration:none;padding:6px 0;min-height:48px;cursor:pointer}
.cn-dock svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cn-dock b{font-size:12.5px;font-weight:700;line-height:1}
.cn-dock .cn-dock-menu svg{fill:currentColor;stroke:none}
.cn-dock a:active,.cn-dock button:active{color:#ff8a52}
.cn-dock-mid{margin-top:-26px;color:#fff!important}.cn-dm{width:58px;height:58px;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;background:linear-gradient(145deg,#ff9a5c,#e8582a);display:grid;place-items:center;border:4px solid #14202e;box-shadow:0 4px 12px rgba(232,88,42,.5)}
.cn-dock-mid .cn-dm svg{fill:#fff;stroke:none;width:30px;height:30px}.cn-dock-mid b{color:#ffb08a}
.cn-sheet{position:fixed;inset:0;z-index:60}.cn-sheet:not([hidden]){display:block}
.cn-sheet-bg{position:absolute;inset:0;background:rgba(10,16,28,.55)}
.cn-sheet-box{position:absolute;left:0;right:0;bottom:0;background:var(--card);color:var(--ink);border-radius:22px 22px 0 0;padding:10px 12px calc(16px + env(safe-area-inset-bottom));max-height:80vh;overflow:auto}
.cn-grab{display:block;width:44px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 10px}
.cn-sheet-box h2{font-size:1.15rem;margin:0 0 10px}
.cn-sheet-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cn-sheet-l a{background:var(--soft);border-radius:12px;padding:12px 10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1rem}
.cn-sheet-x{margin-top:12px;width:100%;font:inherit;font-weight:700;border:0;border-radius:12px;background:var(--acc);color:#fff;padding:12px}
.cn-fbase{padding:12px 8px}.cn-paw{width:20px;height:20px}
.cn-bar{flex-wrap:nowrap;gap:8px;min-height:50px}.cn-logo{font-size:1.15rem;flex:none}.cn-nav{display:flex;gap:2px;overflow-x:auto;min-width:0;scrollbar-width:none}.cn-nav::-webkit-scrollbar{display:none}.cn-nav a{margin:0;padding:8px 8px;white-space:nowrap;font-size:.95rem}.cn-nav{flex-wrap:nowrap;margin-left:auto}.cn-nav a:nth-child(-n+2){display:none}
}
/* ================= v4 — khớp mockup (28/10/2026) ================= */
@font-face{font-family:Figtree;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Figtree-400.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Figtree-500.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Figtree-600.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Figtree-700.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:800;font-style:normal;font-display:swap;src:url(fonts/Figtree-800.woff2) format("woff2")}
@font-face{font-family:Caveat;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Caveat-500.woff2) format("woff2")}
@font-face{font-family:Caveat;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Caveat-600.woff2) format("woff2")}
:root{--ink:#101e27;--mut:#56636b;--acc:#f3642f;--acc2:#d4491a;--bg:#fff;--card:#fff;--line:#eee3d6;--soft:#fdf3ea;--navy:#0f202a;--hand:Caveat,"Segoe Script",cursive;color-scheme:light}
body{font-family:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea{font-family:inherit}
.cn-wrap{max-width:1240px;padding-left:24px;padding-right:24px}
a{color:var(--acc2)}

/* header */
.cn-head{position:sticky;top:0;z-index:30;background:#fff;border-bottom:0;box-shadow:0 1px 0 #f0e9e1}
.cn-bar{min-height:68px;flex-wrap:nowrap;gap:20px}
.cn-logo{display:inline-flex;align-items:center;gap:10px;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);flex:none}
.cn-logo em{color:var(--acc);font-style:normal}.cn-logo small{font-size:.62em;font-weight:700;color:var(--ink);margin-left:1px;letter-spacing:0}
.cn-lm{font-size:2rem;line-height:0}
.cn-nav{margin-left:auto;display:flex;gap:34px}.cn-nav a{font-weight:600;font-size:1rem;color:var(--ink);padding:6px 0;border-bottom:0;text-decoration:none}
.cn-nav a:hover{color:var(--acc);text-decoration:none}.cn-nav a[aria-current]{color:var(--acc);border-bottom:0}
.cn-sbtn{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}.cn-sbtn:hover{background:#f6f1ea}
.cn-search{border-top:1px solid #f0e9e1;background:#fffaf5;padding:12px 0}.cn-search[hidden]{display:none}
.cn-search .cn-wrap{display:flex;gap:10px}.cn-search input{flex:1;min-width:0;font-size:1.05rem;padding:12px 18px;border:1.5px solid #e9dccd;border-radius:999px;background:#fff;color:var(--ink)}
.cn-search input:focus{outline:2px solid var(--acc);outline-offset:1px}
.cn-search button{font-weight:800;font-size:1rem;border:0;border-radius:999px;background:var(--acc);color:#fff;padding:0 26px;cursor:pointer;min-height:46px}
.cn-results{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}.cn-results a{display:grid;gap:4px;padding:16px 20px;border-radius:16px;background:var(--soft);text-decoration:none;color:var(--ink)}.cn-results b{font-size:1.15rem}.cn-results span{color:var(--mut)}.cn-results a:hover{box-shadow:0 6px 18px rgba(16,30,39,.1)}

/* hero */
.cn-hero{position:relative;overflow:hidden;background:linear-gradient(100deg,#f6f3f0 0%,#f5f1ee 50%,#f3ece6 100%)}
.cn-herogrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:520px;padding-top:0;padding-bottom:0;gap:0;align-items:center}
.cn-herotxt{position:relative;z-index:2;padding:54px 0 54px}
.cn-hero .cn-h1{font-size:clamp(2.4rem,4.4vw,3.7rem);font-weight:800;line-height:1.07;letter-spacing:-.025em;margin:0 0 .45em;color:var(--ink)}
.cn-hero .cn-h1 span{color:#f56c35}
.cn-def{font-size:1.14rem;line-height:1.6;max-width:31em;margin:0 0 1.5em;color:var(--ink)}
.cn-cta{display:inline-flex;align-items:center;gap:12px;background:var(--acc);color:#fff;font-weight:800;font-size:1.15rem;text-decoration:none;border-radius:999px;padding:17px 34px;box-shadow:0 12px 26px rgba(243,100,47,.32);transition:transform .15s,background .15s}
.cn-cta:hover{background:#e5531d;transform:translateY(-2px)}
.cn-stats{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:34px}
.cn-stats li{display:flex;align-items:center;gap:12px}.cn-si{width:46px;height:46px;border-radius:50%;background:#fff!important;box-shadow:0 4px 12px rgba(16,30,39,.08);display:grid;place-items:center;flex:none}
.cn-stats span{display:grid;line-height:1.2;font-size:.98rem;color:var(--mut)}.cn-stats b{font-size:1.3rem;font-weight:800;color:var(--ink)}
.cn-heroart{position:absolute;top:0;right:0;bottom:0;width:52%;display:block;background:none;border-radius:0;min-height:0}
.cn-herofig{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:42% 50%;border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.cn-hdeco{position:absolute;left:11%;top:21%;width:62px;height:auto;transform:rotate(8deg)}
.cn-heroart .cn-hand{position:absolute;right:5%;top:44%;left:auto;bottom:auto;max-width:none;display:grid;text-align:left;font:600 2.15rem/1.04 var(--hand);color:var(--ink);text-shadow:none;transform:rotate(-8deg)}
.cn-hand svg{margin-top:6px;color:var(--ink)}

/* section headings */
.cn-main{padding-top:0;padding-bottom:0}
.cn-content{display:flex;flex-direction:column}
.cn-content>br,.cn-content>p:empty,.cn-content>script{display:none}
.cn-h2c{text-align:center;font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.cn-sub{text-align:center;color:var(--mut);font-size:1.08rem;margin:0 0 28px}
.cn-sec{margin:60px 0 0}

/* thứ tự khối giống mockup: hero > danh mục > random > ý tưởng > why > công cụ lọc > bài dài */
.cn-content>#cn-cats{order:1}
.cn-content>.cn-rand{order:2}
.cn-content>.cn-sec:not(#cn-cats){order:3}
.cn-content>.cn-why{order:4}
.cn-content>.cn-gen-head,.cn-content>.cn-tool{order:5}
.cn-content>*:not(#cn-cats):not(.cn-rand):not(.cn-sec):not(.cn-why):not(.cn-gen-head):not(.cn-tool){order:6}
.cn-content>.cn-az,.cn-content>.cn-az~*{order:7}
.cn-gen-head{margin-top:64px}

/* popular categories */
.cn-cats{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.cn-cats a{display:block;position:relative;padding:0;border:0;border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(16,30,39,.09);overflow:hidden;transition:transform .18s,box-shadow .18s;color:var(--ink)}
.cn-cats a:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(16,30,39,.14)}
.cn-cats img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.cn-cb{display:grid;gap:3px;padding:14px 48px 18px 16px;background:#eff5fc;min-height:92px;align-content:start}
.cn-cb b{font-size:1.14rem;font-weight:800}.cn-cb small{font-size:.95rem;color:var(--mut);line-height:1.35}
.cn-cats i{position:absolute;right:12px;bottom:14px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(16,30,39,.16);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink);padding-bottom:2px}

/* random banner */
.cn-rand{order:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:0;align-items:stretch;min-height:290px;margin:60px 0 0;padding:0;background:#fdf3ea;border-radius:26px;overflow:hidden;text-align:center}
.cn-rand img{display:block;width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover}
.cn-rl{-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,#000 62%,transparent 100%);object-position:30% 60%}
.cn-rr{-webkit-mask-image:linear-gradient(270deg,#000 62%,transparent 100%);mask-image:linear-gradient(270deg,#000 62%,transparent 100%);object-position:50% 30%}
.cn-rmid{align-self:center;padding:30px 10px;z-index:1}
.cn-rand h2{font-size:clamp(1.6rem,2.6vw,2.15rem);font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.cn-rand p{font-size:1.1rem;margin:0 0 16px;color:var(--ink)}
.cn-bubble{display:inline-block;max-width:100%;background:#fff;border:2px solid var(--ink);border-radius:22px;padding:8px 22px;font:600 1.6rem/1.2 var(--hand);margin:0 0 16px;overflow-wrap:anywhere}
.cn-rgo,.cn-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:1.12rem;background:var(--acc);color:#fff;border:0;border-radius:999px;padding:15px 32px;min-height:54px;cursor:pointer;box-shadow:0 10px 22px rgba(243,100,47,.28);transition:background .15s,transform .15s}
.cn-rgo{display:flex;margin:0 auto;max-width:360px;width:100%}
.cn-rgo:hover,.cn-go:hover{background:#e5531d}

/* pills */
.cn-pills{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:14px 12px}
.cn-pills li{display:flex}.cn-pill{flex:1;min-width:0;font-size:1.04rem;font-weight:500;color:var(--ink);border:0;border-radius:999px;padding:10px 8px;min-height:46px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.cn-pill:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(16,30,39,.12)}

/* why */
.cn-why{order:4;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:0;align-items:stretch;margin:64px 0 0;padding:0;background:#f1f7fd;border-radius:0;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
.cn-whyart{position:relative;font-size:1rem;min-height:300px}
.cn-whyart img{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover;object-position:30% 55%;-webkit-mask-image:linear-gradient(90deg,#000 66%,transparent 100%);mask-image:linear-gradient(90deg,#000 66%,transparent 100%)}
.cn-whyart .cn-hand{position:absolute;left:auto;right:6%;top:15%;bottom:auto;max-width:none;text-align:left;display:block;font:600 2.1rem/1.05 var(--hand);color:var(--ink);text-shadow:none;transform:rotate(-8deg);width:7.5em}
.cn-why>div:last-child{padding:44px 24px 44px 8px;align-self:center;max-width:620px}
.cn-why h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
.cn-why p{margin:0 0 20px}
.cn-wl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cn-wl li{display:flex;gap:12px;align-items:flex-start}
.cn-wi{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.cn-wl li>span:last-child{display:grid;gap:2px;font-size:.98rem;line-height:1.35;color:var(--mut)}.cn-wl b{font-size:1.04rem;font-weight:800;color:var(--ink)}

/* công cụ lọc tên */
.cn-tool{background:#fff;border:1px solid #f0e4d6;border-radius:26px;padding:28px;margin:0;box-shadow:0 10px 30px rgba(16,30,39,.06)}
.cn-form{gap:22px 26px;grid-template-columns:repeat(4,minmax(0,1fr))}
.cn-fs legend{font-size:1rem;font-weight:800;margin-bottom:10px}
.cn-chip,.cn-dot{font-size:1rem;font-weight:600;border:1.5px solid #eadfce;background:#fff;color:var(--ink);border-radius:999px;padding:7px 15px;min-height:40px}
.cn-dot{padding:5px 14px 5px 7px}.cn-chip:hover,.cn-dot:hover{border-color:var(--acc)}
.cn-chip[aria-pressed=true],.cn-dot[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.cn-status{font-size:1.02rem;color:var(--mut);margin:14px 2px 0}
.cn-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));gap:14px;margin-top:14px}
.cn-card{background:#fdf3ea;border-radius:18px;padding:16px 16px 14px;gap:4px}
.cn-nm{font-size:1.32rem;font-weight:800;letter-spacing:-.01em}
.cn-tag{font-size:.82rem;font-weight:700;letter-spacing:.06em;color:#9a7b5e}
.cn-fit{font-size:1rem;color:var(--mut);line-height:1.45}
.cn-copy,.cn-fav{font-size:.95rem;font-weight:700;border:1.5px solid #ecdcc9;border-radius:999px;padding:6px 16px;min-height:38px;background:#fff;color:var(--ink)}
.cn-copy:hover,.cn-fav:hover{border-color:var(--acc);color:var(--acc2)}
.cn-favbox{margin-top:16px}.cn-favbox summary{font-weight:800;cursor:pointer}

/* nội dung bài */
.cn-content h2{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em;margin:56px 0 12px}
.cn-content p{margin:0 0 1.1em}.cn-content ol,.cn-content ul{padding-left:1.3em}
.cn-content>.cn-sec h2.cn-h2c{margin-top:0}
.cn-content table{display:table;width:100%;border-collapse:separate;border-spacing:0;border:1px solid #f0e4d6;border-radius:18px;overflow:hidden;font-size:1.02rem}
.cn-content th{background:#fdf3ea;font-weight:800;text-align:left}.cn-content th,.cn-content td{border:0;border-bottom:1px solid #f4ebdf;padding:12px 16px}
.cn-content tr:last-child td{border-bottom:0}
.cn-az{gap:0}.cn-azr{grid-template-columns:2.6rem minmax(0,1fr);gap:10px;border-bottom:1px solid #f0e8de;padding:10px 0}.cn-azr b{font-size:1.25rem;font-weight:800;color:var(--acc)}
.cn-azn{font-size:1rem;padding:3px 7px;border-radius:8px}.cn-azn:hover{background:#fdf3ea;color:var(--acc2)}
.cn-content details{border:1px solid #f0e4d6;border-radius:16px;padding:14px 18px;margin:10px 0;background:#fff}.cn-content summary{font-weight:800;font-size:1.08rem}
.cn-date{color:var(--mut);font-size:.95rem}
.cn-ugc{margin-top:48px;border-top:1px solid #f0e4d6;padding-top:12px}.cn-ugc input[type=submit],.cn-ugc .submit{border-radius:999px;background:var(--acc);padding:12px 26px;font-weight:800}
.cn-art{padding-top:32px;padding-bottom:40px}.cn-art .cn-h1{font-size:clamp(2rem,4vw,2.9rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0 0 .5em}
.cn-art .cn-content h2:first-child{margin-top:28px}
.cn-home .cn-content{margin-bottom:0}.cn-home .cn-ugc{margin-bottom:56px}

/* footer */
.cn-foot{background:var(--navy);margin-top:64px;padding-top:48px}
.cn-fgrid{grid-template-columns:1.5fr .85fr 1fr 1fr;gap:40px;align-items:start}
.cn-foot .cn-logo{font-size:1.5rem}.cn-foot .cn-logo em{color:#ffa35c}
.cn-foot h2{font-size:1.08rem;font-weight:800;color:#fff;margin:4px 0 14px}
.cn-fgrid nav a{font-size:1rem;color:#d3dce6}.cn-fgrid nav a:hover{color:#fff}
.cn-fbrand p{font-size:1rem;color:#c3cfdb;margin:16px 0 20px}
.cn-soc a{background:#1b3040;width:42px;height:42px}.cn-soc svg{width:21px;height:21px}
.cn-fart{position:relative;justify-self:end;align-self:end;width:200px}
.cn-fhand{position:absolute;right:-6px;top:58%;font:600 1.5rem/1 var(--hand);color:#fff;transform:rotate(-8deg);text-align:left;white-space:nowrap}
.cn-fcat{max-width:150px;margin-bottom:-4px}
.cn-fbase{border-top:1px solid #26343c}.cn-fcopy{font-size:.95rem;color:#a9b8c7}.cn-paw{fill:#38566f}

/* --- sửa sau lượt kiểm 1 --- */
.cn-wrap.cn-bar{max-width:1240px}
.cn-content ul.cn-grid,.cn-content ul.cn-cats,.cn-content ul.cn-pills,.cn-content ul.cn-wl,.cn-content ul.cn-favlist,ul.cn-results{padding-left:0}
.cn-cats li{display:flex}.cn-cats a{display:flex;flex-direction:column;width:100%;gap:0}.cn-cb{flex:1}
.cn-rand{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,.85fr)}
.cn-rand h2{font-size:clamp(1.55rem,2.3vw,2rem);white-space:nowrap}
.cn-why>div:last-child{max-width:700px}
.cn-az .cn-azn{border:0;background:none;box-shadow:none;font-weight:500;font-size:1rem;min-height:30px;padding:3px 8px;color:var(--ink)}
.cn-az .cn-azn:hover{background:#fdf3ea;color:var(--acc2)}
.cn-fart{display:flex;align-items:flex-end;gap:10px;width:auto;justify-self:end}
.cn-fcat{max-width:118px;flex:none}
.cn-fhand{position:static;transform:rotate(-8deg);margin-bottom:34px;font-size:1.55rem;line-height:1.05}
/* ====== tablet ====== */
@media(max-width:1100px){
.cn-pills{grid-template-columns:repeat(5,minmax(0,1fr))}
.cn-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
.cn-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.cn-wl{grid-template-columns:minmax(0,1fr)}
.cn-nav{gap:22px}
}
@media(max-width:900px){
.cn-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.cn-fart{display:none}
.cn-herogrid{grid-template-columns:minmax(0,1fr);min-height:0}
.cn-heroart{position:relative;order:-1;width:auto;height:320px;margin:0 -24px}
.cn-herofig{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%);object-position:42% 40%}
.cn-heroart .cn-hand{right:4%;top:46%;font-size:1.9rem}.cn-hdeco{left:6%;top:12%;width:52px}
.cn-herotxt{padding:8px 0 40px}
.cn-why{grid-template-columns:minmax(0,1fr)}.cn-whyart{min-height:240px}.cn-whyart img{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.cn-why>div:last-child{padding:12px 24px 36px;max-width:none}
}
/* ====== mobile v4 ====== */
@media(max-width:700px){
.cn-wrap{padding-left:8px;padding-right:8px}
.cn-bar{min-height:56px;gap:8px}.cn-logo{font-size:1.32rem}.cn-lm{font-size:1.75rem}
.cn-nav{display:none}.cn-sbtn{margin-left:auto}
.cn-search .cn-wrap{gap:8px}.cn-search button{padding:0 18px}
.cn-heroart{height:270px;margin:0 -8px}
.cn-hdeco{left:5%;top:10%;width:44px}
.cn-heroart .cn-hand{font-size:1.65rem;right:3%;top:48%}
.cn-herotxt{padding:6px 6px 34px}
.cn-hero .cn-h1{font-size:2.3rem}
.cn-def{font-size:17px}
.cn-cta{display:flex;justify-content:center;padding:16px 20px;font-size:1.1rem}
.cn-stats{gap:16px 20px;margin-top:24px}.cn-si{width:42px;height:42px}
.cn-sec{margin-top:40px}.cn-sub{margin-bottom:20px;font-size:1.04rem}
.cn-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cn-cats a{border-radius:16px}.cn-cb{padding:10px 40px 12px 10px;min-height:0}.cn-cb b{font-size:1.08rem}.cn-cb small{font-size:.92rem}
.cn-rand{grid-template-columns:minmax(0,1fr);min-height:0;margin-top:40px;border-radius:18px}
.cn-rand img.cn-rl{display:block;height:170px;width:100%;object-fit:contain;object-position:left bottom;-webkit-mask-image:none;mask-image:none}.cn-rand img.cn-rr{display:none}
.cn-rmid{padding:6px 10px 24px}.cn-rand h2{white-space:normal}
.cn-bubble{font-size:1.45rem}
.cn-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.cn-pills li{display:block}.cn-pill{flex:none;padding:9px 18px;min-height:44px}
.cn-why{margin-top:44px}.cn-whyart{min-height:230px}.cn-whyart .cn-hand{font-size:1.7rem;right:5%;top:12%}
.cn-why>div:last-child{padding:6px 10px 30px}
.cn-gen-head{margin-top:44px}
.cn-tool{padding:12px 8px;border-radius:18px;box-shadow:0 6px 18px rgba(16,30,39,.06)}
.cn-form{grid-template-columns:minmax(0,1fr);gap:16px}
.cn-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.cn-card{padding:12px 10px 10px;border-radius:14px}
.cn-content h2{margin-top:40px}
.cn-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.cn-content th,.cn-content td{padding:9px 10px;min-width:6.5em}
.cn-azr{grid-template-columns:1.9rem minmax(0,1fr)}
.cn-content details{padding:10px 12px}
.cn-art{padding-top:18px;padding-bottom:24px}
.cn-foot{margin-top:44px;padding-top:34px}
.cn-fart{display:none}
}
/* ====== v5 — dựng theo đúng tỉ lệ mockup (1024px = 100vw); --s = 1 px mockup ====== */
.cn-bubble:empty{display:none}
.cn-bubble{margin:14px auto 0}
.cn-meow,.cn-chat,.cn-marks{display:none}
.cn-legal{display:inline-flex;gap:14px;margin-left:16px}.cn-legal a{color:#a9b8c7;text-decoration:none}.cn-legal a:hover{color:#fff}
@media(min-width:901px){
:root{--s:min(.09766vw,1.40625px)}
.cn-wrap{width:95.3%;max-width:1760px;padding-left:0;padding-right:0}
/* header */
.cn-head{box-shadow:0 1px 0 #efe8df}
.cn-wrap.cn-bar{width:88.1%;min-height:calc(48*var(--s));gap:calc(24*var(--s))}
.cn-logo{font-size:calc(21*var(--s));gap:calc(6*var(--s))}.cn-lm{font-size:calc(31*var(--s))}.cn-logo small{font-size:.72em}
.cn-nav{gap:calc(32*var(--s))}.cn-nav a{font-size:calc(12.6*var(--s));font-weight:600}
.cn-sbtn{width:calc(34*var(--s));height:calc(34*var(--s))}.cn-sbtn svg{width:calc(17*var(--s));height:calc(17*var(--s))}
/* hero */
.cn-herogrid{width:88.1%;grid-template-columns:minmax(0,1fr);min-height:calc(356*var(--s));align-items:start}
.cn-herotxt{padding:calc(35*var(--s)) 0 calc(36*var(--s));max-width:calc(540*var(--s))}
.cn-hero .cn-h1{font-size:calc(47.5*var(--s));line-height:1.06;margin:0 0 calc(9*var(--s));letter-spacing:-.022em}
.cn-def{font-size:max(17px,calc(15.9*var(--s)));line-height:1.3;max-width:calc(430*var(--s));margin:0 0 calc(16*var(--s))}
.cn-cta{height:calc(50*var(--s));padding:0 calc(26*var(--s));gap:calc(10*var(--s));font-size:calc(17*var(--s));box-shadow:0 calc(8*var(--s)) calc(18*var(--s)) rgba(243,100,47,.30)}
.cn-cta svg{width:calc(20*var(--s));height:calc(20*var(--s))}
.cn-stats{margin:calc(20*var(--s)) 0 0;gap:calc(36*var(--s))}.cn-stats li{gap:calc(8*var(--s))}
.cn-si{width:calc(30*var(--s));height:calc(30*var(--s));box-shadow:0 2px 6px rgba(16,30,39,.08)}.cn-si svg{width:calc(16*var(--s));height:calc(16*var(--s))}
.cn-stats b{font-size:calc(15.5*var(--s));line-height:1.15}.cn-stats span{font-size:max(14px,calc(12.3*var(--s)));line-height:1.15}
.cn-heroart{width:49.2%}
.cn-herofig{object-position:30% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.cn-hdeco{left:12%;top:16%;width:calc(36*var(--s))}
.cn-heroart .cn-hand{right:3.4%;top:41%;font-size:calc(24*var(--s));line-height:1}
.cn-hand svg{width:calc(88*var(--s));height:auto;margin-top:calc(4*var(--s))}
/* tiêu đề khối */
.cn-content .cn-h2c,.cn-h2c{font-size:calc(27.9*var(--s));line-height:1.2;margin:0 0 calc(10*var(--s))}
.cn-sub{font-size:max(17px,calc(14.3*var(--s)));margin:0 0 calc(18*var(--s))}
.cn-sec{margin-top:calc(26*var(--s))}
.cn-content{padding-top:calc(10*var(--s))}
/* categories */
.cn-cats{gap:calc(12*var(--s))}
.cn-cats a{border-radius:calc(10*var(--s));box-shadow:0 calc(4*var(--s)) calc(12*var(--s)) rgba(16,30,39,.09)}
.cn-cats img{aspect-ratio:152/118}
.cn-cb{min-height:calc(77*var(--s));padding:calc(11*var(--s)) calc(30*var(--s)) calc(12*var(--s)) calc(12*var(--s));gap:calc(3*var(--s))}
.cn-cb b{font-size:calc(14.3*var(--s))}.cn-cb small{font-size:max(14px,calc(10.4*var(--s)));line-height:1.3}
.cn-cats i{width:calc(20*var(--s));height:calc(20*var(--s));right:calc(8*var(--s));bottom:calc(9*var(--s));font-size:calc(14*var(--s))}
/* random */
.cn-rand{position:relative;margin-top:calc(29*var(--s));min-height:calc(185*var(--s));border-radius:calc(18*var(--s));grid-template-columns:22.5% 1fr 20%}
.cn-rmid{padding:calc(24*var(--s)) 0 calc(24*var(--s))}
.cn-rand h2{font-size:calc(23.6*var(--s));margin:0 0 calc(6*var(--s));white-space:nowrap}
.cn-rand p{font-size:max(17px,calc(13.7*var(--s)));margin:0 0 calc(14*var(--s))}
.cn-rgo{height:calc(50*var(--s));max-width:calc(332*var(--s));font-size:calc(15*var(--s));padding:0 calc(20*var(--s))}
.cn-rgo svg{width:calc(18*var(--s));height:calc(18*var(--s))}
.cn-rl{object-position:20% 70%}
.cn-meow{display:block;position:absolute;left:19.5%;bottom:calc(30*var(--s));font:600 calc(19*var(--s))/1.05 var(--hand);color:var(--ink);transform:rotate(-8deg);text-align:left}
.cn-meow svg{display:inline-block;margin-left:calc(4*var(--s));vertical-align:-2px}.cn-meow i{display:none}
.cn-chat{display:block;position:absolute;right:20.5%;top:calc(14*var(--s));width:calc(58*var(--s));height:auto;color:var(--ink);z-index:2}
/* ideas */
.cn-pills{gap:calc(10*var(--s)) calc(10.7*var(--s));padding:0 calc(2*var(--s))}
.cn-pill{min-height:calc(34*var(--s));font-size:max(15px,calc(13.9*var(--s)));padding:0 calc(6*var(--s))}
/* why */
.cn-why{margin-top:calc(30*var(--s));min-height:calc(208*var(--s));grid-template-columns:44.5% 1fr}
.cn-whyart{min-height:0}.cn-whyart img{object-position:20% 60%}
.cn-whyart .cn-hand{right:7%;top:12%;width:auto;font-size:calc(24*var(--s));line-height:1}.cn-whyart .cn-hand svg{display:block;margin:calc(4*var(--s)) 0 0 calc(70*var(--s))}
.cn-why>div:last-child{padding:calc(22*var(--s)) calc(20*var(--s)) calc(22*var(--s)) 0;max-width:calc(560*var(--s));align-self:center}
.cn-why h2{font-size:calc(21.8*var(--s));margin:0 0 calc(8*var(--s));line-height:1.2}
.cn-why p{font-size:max(17px,calc(14.5*var(--s)));line-height:1.3;margin:0 0 calc(14*var(--s))}
.cn-wl{gap:calc(14*var(--s));grid-template-columns:repeat(3,auto);justify-content:start}
.cn-wi{width:calc(34*var(--s));height:calc(34*var(--s))}.cn-wi svg{width:calc(17*var(--s));height:calc(17*var(--s))}
.cn-wl b{font-size:max(15px,calc(12.3*var(--s)))}.cn-wl li>span:last-child{font-size:max(14px,calc(11.3*var(--s)));line-height:1.25}
/* footer */
.cn-foot{margin-top:0;padding-top:calc(24*var(--s))}
.cn-fgrid{width:95.3%;grid-template-columns:calc(330*var(--s)) calc(165*var(--s)) calc(230*var(--s)) 1fr;gap:0 calc(28*var(--s));padding-left:calc(26*var(--s));padding-right:0;align-items:start}
.cn-foot .cn-logo{font-size:calc(19*var(--s))}.cn-foot .cn-lm{font-size:calc(28*var(--s))}
.cn-foot h2{font-size:max(15px,calc(13.1*var(--s)));margin:calc(4*var(--s)) 0 calc(10*var(--s))}
.cn-fgrid nav{gap:calc(7*var(--s))}.cn-fgrid nav a{font-size:max(15px,calc(12.6*var(--s)))}
.cn-fbrand p{font-size:max(17px,calc(12.3*var(--s)));line-height:1.45;max-width:calc(310*var(--s));margin:calc(10*var(--s)) 0 calc(14*var(--s))}
.cn-soc{gap:calc(8*var(--s))}.cn-soc a{width:calc(32*var(--s));height:calc(32*var(--s));background:#14262f}.cn-soc svg{width:calc(24*var(--s));height:calc(24*var(--s))}
.cn-fart{justify-self:end;align-self:end;margin-right:calc(30*var(--s))}.cn-fcat{max-width:calc(100*var(--s))}.cn-fhand{font-size:calc(17*var(--s));margin-bottom:calc(18*var(--s))}
.cn-fbase{width:95.3%;margin-top:calc(14*var(--s));padding:calc(10*var(--s)) 0 calc(10*var(--s));border-top:1px solid #26343c}
.cn-fcopy{font-size:max(17px,calc(11.5*var(--s)))}.cn-paw{width:calc(28*var(--s));height:calc(28*var(--s))}
.cn-herotxt{padding-bottom:calc(30*var(--s))}
.cn-heroart{right:-2.8%}
.cn-heroart .cn-hand{right:6.4%;top:43%;transform:rotate(-10deg)}
.cn-hdeco{left:14%;top:15%;width:calc(44*var(--s))}
.cn-content{padding-top:0}
.cn-content>#cn-cats{margin-top:calc(21*var(--s))}
.cn-content .cn-sub{font-size:max(17px,calc(14.3*var(--s)));margin:0 0 calc(18*var(--s))}
.cn-cb{padding:calc(9*var(--s)) calc(30*var(--s)) calc(8*var(--s)) calc(12*var(--s));gap:calc(1*var(--s));min-height:calc(70*var(--s))}
.cn-whyart img{object-position:0 50%;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,#000 80%,transparent 100%)}
.cn-whyart .cn-hand{right:6%;top:13%;transform:rotate(-9deg)}.cn-whyart .cn-hand svg{display:block;width:calc(20*var(--s));height:calc(20*var(--s));margin:calc(2*var(--s)) 0 0 calc(80*var(--s))}
.cn-lm{display:inline-flex}
/* --- v5.3: banner Random dựng từ ảnh cắt sẵn, hero, why, footer --- */
.cn-rand{display:block;background:#fdf3ea}
.cn-rand img.cn-rl,.cn-rand img.cn-rr{position:absolute;bottom:0;height:auto;width:24.4%;-webkit-mask-image:none;mask-image:none;object-fit:contain;min-height:0}
.cn-rand img.cn-rl{left:0}.cn-rand img.cn-rr{right:0;width:24.6%}
.cn-rmid{position:relative;z-index:1;width:calc(520*var(--s));margin:0 auto;padding:calc(24*var(--s)) 0 calc(30*var(--s))}
.cn-rand h2{margin-bottom:calc(8*var(--s))}.cn-rand p{margin-bottom:calc(20*var(--s))}
.cn-meow{left:17.4%;bottom:calc(62*var(--s));transform:rotate(-12deg)}
.cn-marks{display:block;position:absolute;left:calc(40*var(--s));top:calc(26*var(--s));width:calc(40*var(--s));height:auto}
.cn-chat{right:17.8%;top:calc(3*var(--s))}
.cn-heroart .cn-hand{right:9%}
.cn-si{background:transparent!important;box-shadow:none;width:calc(34*var(--s));height:calc(34*var(--s))}.cn-si svg{width:calc(26*var(--s));height:calc(26*var(--s))}
.cn-why p{max-width:calc(432*var(--s))}
.cn-wl{grid-template-columns:calc(156*var(--s)) calc(184*var(--s)) auto;gap:calc(10*var(--s))}
.cn-wl li{gap:calc(8*var(--s))}
.cn-fgrid{grid-template-columns:calc(368*var(--s)) calc(160*var(--s)) calc(253*var(--s)) 1fr;gap:0;padding-left:calc(25*var(--s))}
.cn-fgrid nav{gap:calc(3*var(--s))}.cn-fgrid nav a{line-height:1.25}
.cn-fart{margin-right:0;gap:calc(4*var(--s));justify-self:start}.cn-fcat{max-width:calc(98*var(--s))}.cn-fhand{white-space:nowrap}
.cn-foot h2{margin-bottom:calc(8*var(--s))}
/* --- v5.4 --- */
.cn-hdeco{left:11%;top:12%;width:calc(54*var(--s))}
.cn-fcat{max-width:calc(84*var(--s))}.cn-fhand{font-size:calc(15*var(--s));margin-bottom:calc(22*var(--s))}
.cn-wi svg{width:calc(22*var(--s));height:calc(22*var(--s))}
.cn-why>div:last-child{padding-left:calc(14*var(--s))}
.cn-chat{width:calc(62*var(--s))}
/* --- v5.5: siết khoảng cách dọc cho khớp mockup --- */
.cn-content .cn-h2c,.cn-h2c{margin-bottom:calc(3*var(--s))}
.cn-content .cn-sub,.cn-sub{line-height:1.2;margin-bottom:calc(16*var(--s))}
.cn-rmid{padding-bottom:calc(22*var(--s))}
.cn-defline{max-width:min(100%,calc(780*var(--s)));margin-left:auto;margin-right:auto}
.cn-sec{margin-top:calc(22*var(--s))}
.cn-rand{margin-top:calc(22*var(--s))}
}
/* p = 17px cho mọi đoạn văn còn sót */
.cn-foot .cn-fbase .cn-fcopy,.cn-date,.cn-foot .cn-fbrand p{font-size:17px}
@media(max-width:900px){.cn-whyart .cn-hand svg{display:none}}