/* Be Vietnam Pro (SIL Open Font License 1.1, xem /fonts/OFL.txt) – tự lưu trữ, không phụ thuộc Google Fonts. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-400-vietnamese.woff2?v=1) format('woff2');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';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-400-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-400-latin.woff2?v=1) format('woff2');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';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-600-vietnamese.woff2?v=1) format('woff2');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';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-600-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-600-latin.woff2?v=1) format('woff2');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';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-700-vietnamese.woff2?v=1) format('woff2');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';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-700-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-700-latin.woff2?v=1) format('woff2');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';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-800-vietnamese.woff2?v=1) format('woff2');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';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-800-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-800-latin.woff2?v=1) format('woff2');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}
/* Trang chủ công khai – CSS riêng, không phụ thuộc Tailwind. Cùng tinh thần với kit giao diện: bo tròn, nền mềm, Be Vietnam Pro. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#0f172a;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:#1a3fb0}
button{font:inherit}
:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:#0f172a;color:#fff;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.grad{background:linear-gradient(92deg,#1e4fd8,#2690ee 55%,#2ea8f5);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Nút */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn--lg{padding:14px 26px;font-size:16px}
.btn--block{width:100%}
.btn--primary{color:#fff;background:linear-gradient(135deg,#1e4fd8,#1f7fe6);box-shadow:0 10px 24px -10px rgba(30,79,216,.7)}
.btn--primary:hover{box-shadow:0 16px 32px -12px rgba(30,79,216,.8)}
.btn--ghost{color:#334155;background:transparent}
.btn--ghost:hover{background:#f1f5f9;color:#0f172a}
.btn--light{color:#0f172a;background:#fff;border-color:#e2e8f0;box-shadow:0 4px 14px -8px rgba(15,23,42,.25)}
.btn--light:hover{border-color:#bfdbfe}
.btn--dark{color:#fff;background:#0f172a}
.btn--dark:hover{background:#1e293b}
.btn--white{color:#1a3fb0;background:#fff;box-shadow:0 12px 28px -12px rgba(15,23,42,.5)}
.btn--outline{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.btn--outline:hover{background:rgba(255,255,255,.14)}

/* Header */
/* Hiệu ứng mờ đặt ở ::before: backdrop-filter trên chính .hd biến header thành khối chứa của menu di động position:fixed, khiến menu bám theo header thay vì màn hình. */
.hd{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hd::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);pointer-events:none}
.hd.is-scrolled{border-color:#e2e8f0;box-shadow:0 8px 24px -18px rgba(15,23,42,.35)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:#0f172a;text-decoration:none;letter-spacing:-.01em}
.logo b{font-weight:800;color:#1a3fb0}
.logo img{display:block;width:auto;height:40px}
.ft .logo img{height:36px}
.logo__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#2f6bea,#2f8ff0 60%,#2ea8f5);box-shadow:0 6px 16px -6px rgba(30,79,216,.7)}
.nav{display:flex;align-items:center;gap:20px}
.nav__links{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.nav__links a{display:block;padding:8px 12px;border-radius:999px;color:#475569;font-weight:600;font-size:15px;text-decoration:none;transition:background-color .2s,color .2s}
.nav__links a:hover{background:#f1f5f9;color:#0f172a}
.nav__cta{display:flex;align-items:center;gap:6px}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#0f172a;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:56px 0 88px}
.hero__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 55% at 12% 8%,rgba(46,120,240,.2),transparent 70%),radial-gradient(45% 50% at 92% 18%,rgba(46,168,245,.15),transparent 70%),radial-gradient(40% 45% at 70% 95%,rgba(14,165,233,.14),transparent 70%)}
.hero__bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(100,116,139,.28) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);mask-image:linear-gradient(to bottom,#000,transparent 75%)}
.hero__in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#eff6ff;border:1px solid #dbeafe;color:#1a3fb0;font-weight:700;font-size:13.5px}
.pill__dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2.2s infinite}
.hero h1{margin:18px 0;font-size:clamp(2.2rem,1.1rem + 3.7vw,3.65rem);line-height:1.1;letter-spacing:-.035em}
.hero__sub{max-width:34em;color:#475569;font-size:1.125rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__ticks{display:flex;flex-wrap:wrap;gap:8px 20px;margin:22px 0 0;padding:0;list-style:none;color:#475569;font-size:14.5px;font-weight:600}
.hero__ticks li{display:inline-flex;align-items:center;gap:7px}
.hero__ticks li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#dcfce7;color:#15803d;font-size:11px;font-weight:800}
.hero__art{position:relative;padding:10px 0 84px}
.mock{position:relative;border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(30,41,59,.45),0 0 0 1px rgba(15,23,42,.06);transform:perspective(1600px) rotateY(-7deg) rotateX(2deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hero__art:hover .mock{transform:perspective(1600px) rotateY(0) rotateX(0)}
.mock__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:18px 18px 0 0;background:#f1f5f9;border-bottom:1px solid #e2e8f0}
.mock__bar i,.dots i{display:block;width:10px;height:10px;border-radius:50%;background:#f87171}
.mock__bar i:nth-child(2),.dots i:nth-child(2){background:#fbbf24}
.mock__bar i:nth-child(3),.dots i:nth-child(3){background:#34d399}
.mock__url{flex:0 1 auto;min-width:0;max-width:72%;margin-left:12px;padding:3px 12px;border-radius:8px;background:#fff;color:#475569;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mock__screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0 0 18px 18px;background:#faf6f1}
.mock__screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.mock.is-reveal .mock__screen img{animation:reveal 1s cubic-bezier(.2,.7,.2,1) both}
.mock__skeleton{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 16%;background:#fff;opacity:0;transition:opacity .35s;pointer-events:none}
.mock__skeleton b{display:block;width:100%;height:14px;border-radius:8px;background:linear-gradient(90deg,#eef2f7 25%,#dbeafe 45%,#eef2f7 65%);background-size:300% 100%;animation:shimmer 1.2s linear infinite}
.mock__skeleton b:nth-child(1){width:40%;height:10px}
.mock__skeleton b:nth-child(2){height:26px}
.mock__skeleton b:nth-child(3){width:80%}
.mock__skeleton b:nth-child(4){width:34%;height:30px;border-radius:999px}
.mock.is-building .mock__skeleton{opacity:1}
.prompt{position:absolute;left:-30px;bottom:0;width:min(330px,66%);padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 24px 50px -16px rgba(30,41,59,.4),0 0 0 1px rgba(15,23,42,.06)}
.prompt__label{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#1e4fd8}
.prompt__text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.5em;margin:6px 0 10px;font-size:14px;line-height:1.5;color:#1e293b}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:#2f6bea;animation:blink 1s steps(1) infinite}
.prompt__btn{display:inline-flex;padding:6px 13px;border-radius:999px;background:linear-gradient(135deg,#1e4fd8,#1f7fe6);color:#fff;font-size:13px;font-weight:700}
.float{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:14px;background:#fff;box-shadow:0 18px 40px -18px rgba(30,41,59,.45),0 0 0 1px rgba(15,23,42,.05);font-weight:700;font-size:14px;animation:bob 6s ease-in-out infinite}
.float__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#eff6ff;font-size:15px}
.float--a{top:-8px;right:18px}
.float--b{right:-14px;bottom:34%;animation-delay:-3s}

/* Số liệu */
.stats{padding:0 0 32px}
.stats__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{padding:22px 16px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;text-align:center;box-shadow:0 10px 30px -24px rgba(15,23,42,.4)}
.stat strong{display:block;font-size:2.3rem;line-height:1.1;font-weight:800;letter-spacing:-.03em;background:linear-gradient(92deg,#1e4fd8,#2690ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:6px;color:#475569;font-size:14.5px;font-weight:600}
.stats__note{margin-top:14px;text-align:center;color:#64748b;font-size:12.5px}

/* Section chung */
.sec{padding:96px 0}
.sec--tint{background:linear-gradient(180deg,#f8fafc,#eff6ff 60%,#f8fafc)}
.sec--dark{position:relative;background:radial-gradient(60% 60% at 10% 0%,rgba(46,120,240,.25),transparent 70%),radial-gradient(50% 60% at 100% 100%,rgba(46,168,245,.18),transparent 70%),#0b1020;color:#e2e8f0}
.sec__head{max-width:720px;margin:0 auto 48px;text-align:center}
.sec__head h2{margin:8px 0 12px;font-size:clamp(1.8rem,1.15rem + 2.1vw,2.65rem);line-height:1.18}
.sec__head p{color:#475569;font-size:1.075rem}
.sec__head--left{margin:0;text-align:left}
.sec__link{color:#1a3fb0;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#1e4fd8}
.sec--dark .kicker{color:#93c5fd}
.kicker::before{content:"";width:18px;height:8px;border-radius:2px;background:linear-gradient(90deg,#8cc63f 0 8px,transparent 8px 10px,#f7931e 10px)}
.sec--dark .sec__head h2{color:#fff}
.sec--dark .sec__head p{color:#cbd5e1}

/* Tính năng */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.feat{padding:24px 22px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;transition:transform .3s,box-shadow .3s,border-color .3s}
.feat:hover{transform:translateY(-4px);border-color:#bfdbfe;box-shadow:0 22px 44px -24px rgba(30,79,216,.45)}
.feat__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:var(--c);background:#eff6ff;background:color-mix(in srgb,var(--c) 12%,#fff)}
.feat__ic svg,.browser svg,.car__arrow svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat__ic svg{width:23px;height:23px}
.feat h3{margin:16px 0 6px;font-size:1.06rem;letter-spacing:-.01em}
.feat p{color:#475569;font-size:14.5px;line-height:1.6}
.feat code{padding:1px 5px;border-radius:6px;background:#f1f5f9;font-size:.86em;word-break:break-all}
.nf-sec{padding-top:24px}
.nf-ind{margin:0 0 18px;padding:24px 22px;border:1px solid #bfdbfe;border-radius:20px;background:linear-gradient(135deg,#eff6ff,#fff 70%)}
.nf-ind h3{margin:0 0 6px;font-size:1.06rem;letter-spacing:-.01em}
.nf-ind p{color:#475569;font-size:14.5px;line-height:1.6}
.nf-ind__list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.nf-ind__list a{display:inline-block;padding:7px 14px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;color:#1a3fb0;font-size:14px;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}
.nf-ind__list a:hover,.nf-ind__list a:focus-visible{border-color:#1e4fd8;background:#eff6ff}
.nf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.nf{display:flex;flex-direction:column}
.nf p{flex:1}
.nf__go{margin-top:12px;color:#1a3fb0;font-weight:700;font-size:14.5px;text-decoration:none}
.nf__go:hover{text-decoration:underline;text-underline-offset:3px}
.nf-guide{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:center;margin:32px 0 0}

/* Demo */
.demo{display:grid;grid-template-columns:370px minmax(0,1fr);gap:28px;align-items:start}
.demo__panel{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid #e2e8f0;border-radius:22px;background:#fff;box-shadow:0 24px 50px -36px rgba(15,23,42,.45)}
.demo__label{font-weight:700}
.demo textarea{width:100%;min-height:128px;padding:12px 14px;border:1.5px solid #cbd5e1;border-radius:14px;background:#fff;color:#0f172a;font:inherit;font-size:15px;line-height:1.55;resize:vertical;transition:border-color .2s,box-shadow .2s}
.demo textarea:focus{outline:none;border-color:#2f6bea;box-shadow:0 0 0 4px rgba(46,120,240,.18)}
.demo__hint{color:#475569;font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 12px;border:1px solid #e2e8f0;border-radius:999px;background:#f8fafc;color:#334155;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s}
.chip:hover{border-color:#93c5fd;background:#eff6ff;transform:translateY(-1px)}
.chip.is-on{border-color:#1e4fd8;background:#1e4fd8;color:#fff}
.demo__status{min-height:1.5em;color:#1a3fb0;font-size:14px;font-weight:600}
.demo__note{color:#64748b;font-size:13px;line-height:1.55}
.demo__stage{position:sticky;top:88px;min-width:0}
.browser{overflow:hidden;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 40px 80px -40px rgba(30,41,59,.5)}
.browser__bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #e2e8f0;background:#f1f5f9}
.dots{display:flex;gap:6px;flex:none}
.browser__url{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:5px 10px;border-radius:9px;background:#fff;color:#475569;font-size:13px;white-space:nowrap}
.browser__url svg{flex:none;color:#16a34a}
.browser__url span{overflow:hidden;text-overflow:ellipsis}
.seg{display:flex;flex:none;padding:2px;border-radius:10px;background:#e2e8f0}
.seg button{display:grid;place-items:center;width:34px;height:28px;border:0;border-radius:8px;background:transparent;color:#475569;cursor:pointer}
.seg button.is-on{background:#fff;color:#1a3fb0;box-shadow:0 1px 3px rgba(15,23,42,.18)}
.browser__open{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;color:#475569}
.browser__open:hover{background:#e2e8f0;color:#0f172a}
.browser__view{position:relative;height:580px;overflow:hidden;background:#f1f5f9}
.browser__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.browser__view[data-view="mobile"] .browser__poster{display:none}
.browser__view iframe{position:absolute;top:0;left:0;width:1280px;height:100%;border:0;background:#fff;transform-origin:0 0;opacity:0;transition:opacity .45s}
.browser__view.is-loaded iframe{opacity:1}
.browser__view[data-view="mobile"]{background:linear-gradient(180deg,#eff6ff,#eff6ff)}
.browser__view[data-view="mobile"] iframe{border-radius:30px;box-shadow:0 0 0 10px #0f172a,0 30px 60px -20px rgba(15,23,42,.6)}
.build{position:absolute;inset:0;display:grid;place-items:center;background:rgba(248,250,252,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.build[hidden]{display:none}
.build__card{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:18px;background:#fff;box-shadow:0 24px 50px -20px rgba(30,41,59,.45)}
.spin{width:28px;height:28px;border:3px solid #dbeafe;border-top-color:#2f6bea;border-radius:50%;animation:spin .8s linear infinite}
.build__steps{margin:0;padding:0;list-style:none;font-size:14px;font-weight:600;color:#94a3b8}
.build__steps li{transition:color .3s}
.build__steps li.is-done{color:#0f172a}
.build__steps li.is-done::before{content:"✓ ";color:#16a34a}

/* Cách dùng */
.steps{display:grid;grid-template-columns:390px minmax(0,1fr);gap:40px;align-items:center}
.steps__list{display:flex;flex-direction:column;gap:10px}
.step{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start;width:100%;padding:16px 18px;overflow:hidden;border:1px solid transparent;border-radius:18px;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background-color .25s,border-color .25s,box-shadow .25s}
.step:hover{background:#f8fafc}
.step__n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eff6ff;color:#1a3fb0;font-weight:800}
.step__body strong{display:block;font-size:1.06rem;line-height:1.4;padding-top:6px}
.step__body span{display:block;margin-top:4px;color:#475569;font-size:14.5px;line-height:1.55}
.step:not(.is-on) .step__body span{display:none}
.step.is-on{border-color:#e2e8f0;background:#fff;box-shadow:0 18px 40px -28px rgba(15,23,42,.45)}
.step.is-on .step__n{background:linear-gradient(135deg,#1e4fd8,#1f7fe6);color:#fff}
.step__bar{position:absolute;left:0;bottom:0;width:0;height:3px;background:linear-gradient(90deg,#2f6bea,#2ea8f5)}
.step.is-on.is-auto .step__bar{animation:fill 7s linear forwards}
.steps__shots{min-width:0}
.shot{margin:0}
.shot[hidden]{display:none}
.shot.is-on{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1)}
.shot__frame{overflow:hidden;border:1px solid #e2e8f0;border-radius:18px;background:#fff;box-shadow:0 40px 80px -40px rgba(30,41,59,.5)}
.shot__frame img{display:block;width:100%;height:auto}

/* Trình chỉnh sửa – carousel */
.car{max-width:1040px;margin:0 auto}
.car__view{position:relative;aspect-ratio:1200/750;overflow:hidden;border-radius:18px;background:#111827;box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.car__slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.02);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.car__slide.is-on{opacity:1;transform:none}
.car__slide img{display:block;width:100%;height:100%;object-fit:cover}
.car__nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:14px;align-items:center;margin-top:22px}
.car__arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background-color .2s}
.car__arrow:hover{background:rgba(255,255,255,.16)}
.car__caps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.car__cap{padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.04);color:#cbd5e1;text-align:left;cursor:pointer;transition:background-color .25s,border-color .25s}
.car__cap:hover{background:rgba(255,255,255,.08)}
.car__cap strong{display:block;color:#fff;font-size:14.5px;line-height:1.35}
.car__cap span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;color:#a8b3c7;font-size:13px;line-height:1.5}
.car__cap.is-on{border-color:#60a5fa;background:rgba(96,165,250,.16)}

/* Mẫu giao diện */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.theme{display:block;overflow:hidden;border:1px solid #e2e8f0;border-radius:20px;background:#fff;color:inherit;text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.theme:hover{transform:translateY(-6px);border-color:#bfdbfe;box-shadow:0 30px 60px -30px rgba(30,41,59,.5)}
.theme__img{display:block;aspect-ratio:4/3;overflow:hidden;background:#f1f5f9}
.theme__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:object-position 5s ease-in-out}
.theme:hover .theme__img img,.theme:focus-visible .theme__img img{object-position:50% 100%}
.theme__meta{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid #eef2f7}
.theme__sw{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--sw),var(--sw2));box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.theme__txt{flex:1;min-width:0}
.theme__txt strong{display:block;font-size:1.02rem}
.theme__txt span{display:block;color:#475569;font-size:13.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.theme__go{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#f1f5f9;color:#334155;font-weight:700;transition:background-color .25s,color .25s}
.theme:hover .theme__go{background:#1e4fd8;color:#fff}

/* Hỏi đáp */
.faq{display:grid;grid-template-columns:360px minmax(0,1fr);gap:56px;align-items:start}
.faq .sec__head{position:sticky;top:100px}
.faq .sec__head .btn{margin-top:22px}
.qa{margin-bottom:12px;padding:0 20px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;transition:border-color .25s,box-shadow .25s}
.qa[open]{border-color:#bfdbfe;box-shadow:0 18px 40px -30px rgba(30,79,216,.5)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;font-size:1.02rem;line-height:1.45;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa__ic{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:#eff6ff}
.qa__ic::before,.qa__ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:#1e4fd8;transition:transform .25s}
.qa__ic::after{transform:rotate(90deg)}
.qa[open] .qa__ic::after{transform:rotate(0)}
.qa p{padding:0 0 18px;color:#475569}

/* CTA cuối */
.final{padding:0 0 96px;background:linear-gradient(180deg,#f8fafc,#fff 40%)}
.final__in{position:relative;overflow:hidden;padding:68px 32px;border-radius:30px;text-align:center;color:#fff;background:linear-gradient(135deg,#1a3fb0,#1a3fb0 55%,#1d7fe0)}
.final__in::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 60% at 10% 0%,rgba(255,255,255,.2),transparent 70%),radial-gradient(40% 60% at 90% 100%,rgba(255,255,255,.14),transparent 70%);pointer-events:none}
.final h2{position:relative;max-width:18em;margin:0 auto 14px;font-size:clamp(1.8rem,1.15rem + 2.3vw,2.8rem);line-height:1.18}
.final p{position:relative;color:rgba(255,255,255,.9);font-size:1.08rem}
.final .hero__cta{position:relative;justify-content:center}

/* Footer */
.ft{padding:48px 0 28px;border-top:1px solid #e2e8f0}
.ft__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.ft__brand p{max-width:26em;margin-top:12px;color:#475569;font-size:14.5px}
.ft__links{display:flex;flex-wrap:wrap;gap:56px}
.ft__links h2{margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ft__links ul{margin:0;padding:0;list-style:none}
.ft__links li{margin:6px 0}
.ft__links a{color:#475569;font-size:14.5px;text-decoration:none}
.ft__links a:hover{color:#1a3fb0}
.ft__copy{margin-top:32px;color:#64748b;font-size:13px}

/* Hiệu ứng xuất hiện khi cuộn */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.js .rv.is-in{opacity:1;transform:none}
html.js .feat.rv.is-in:hover,html.js .rv.is-in .theme:hover{transition-delay:0ms}

@media print{html.js .rv{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes blink{50%{opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes reveal{from{clip-path:inset(0 0 100% 0);transform:translateY(6px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fill{from{width:0}to{width:100%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Bảng giá */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:26px 22px;border:1px solid #e2e8f0;border-radius:22px;background:#fff}
.plan h3{margin:0;font-size:1.1rem}
.plan__price{margin:12px 0 2px;font-size:2rem;font-weight:800;letter-spacing:-.02em;color:#0f172a}
.plan__credits{margin:0;color:#1a3fb0;font-weight:700}
.plan__credits strong{font-size:1.25rem}
.plan__list{flex:1;margin:16px 0 20px;padding:0;list-style:none;color:#475569;font-size:14.5px}
.plan__list li{position:relative;margin:7px 0;padding-left:22px}
.plan__list li::before{content:"✓";position:absolute;left:0;color:#6fa72c;font-weight:800}
.plan .btn{justify-content:center}
.plan--free{background:#f8fafc}
.plan--hot{border:2px solid #1e4fd8;box-shadow:0 24px 48px -28px rgba(30,79,216,.55)}
.plan__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,#1e4fd8,#2ea8f5);color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
.plans__note{margin-top:18px;text-align:center;color:#64748b;font-size:14px}

/* Thiết kế theo yêu cầu */
.svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.svc{padding:26px 22px;border:1px solid rgba(148,163,184,.22);border-radius:20px;background:rgba(255,255,255,.04);transition:transform .3s,border-color .3s,background-color .3s}
.svc:hover{transform:translateY(-4px);border-color:rgba(147,197,253,.55);background:rgba(255,255,255,.07)}
.svc__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:var(--c);background:rgba(255,255,255,.08)}
.svc__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc h3{margin:16px 0 8px;font-size:1.08rem;color:#fff;letter-spacing:-.01em}
.svc p{color:#cbd5e1;font-size:14.5px;line-height:1.6}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:40px 0 0;padding:0;list-style:none;counter-reset:flow}
.flow li{position:relative;padding:18px 18px 18px 60px;border-radius:16px;background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.18);counter-increment:flow}
.flow li::before{content:counter(flow);position:absolute;left:16px;top:18px;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:linear-gradient(135deg,#1e4fd8,#2ea8f5);color:#fff;font-weight:800;font-size:14px}
.flow strong{display:block;color:#fff;font-size:15px}
.flow span{display:block;margin-top:2px;color:#cbd5e1;font-size:13.5px;line-height:1.5}

/* Liên hệ */
.contact{background:linear-gradient(180deg,#fff,#f8fafc)}
.contact__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.contact__copy h2{margin:8px 0 12px;font-size:clamp(1.8rem,1.15rem + 2.1vw,2.5rem);line-height:1.18}
.contact__copy>p{color:#475569;font-size:1.06rem}
.contact__list{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.contact__list li{position:relative;padding-left:32px;color:#334155;font-weight:600}
.contact__list li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:999px;background:#e8f5d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7c0f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.cform{display:grid;gap:16px;padding:32px;border:1px solid #e2e8f0;border-radius:24px;background:#fff;box-shadow:0 30px 60px -40px rgba(30,79,216,.45)}
.cform__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cfield{display:grid;gap:6px;min-width:0}
.cfield label{font-weight:700;font-size:14.5px;color:#1e293b}
.cfield label span{color:#b91c1c}
.cfield input,.cfield select,.cfield textarea{width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#0f172a;font:inherit;font-size:16px;line-height:1.4;transition:border-color .2s,box-shadow .2s}
.cfield textarea{resize:vertical;min-height:128px}
.cfield input::placeholder,.cfield textarea::placeholder{color:#64748b}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{outline:none;border-color:#1e4fd8;box-shadow:0 0 0 4px rgba(30,79,216,.16)}
.cfield [aria-invalid=true]{border-color:#dc2626}
.cfield__err{color:#b91c1c;font-size:14px;font-weight:600}
.cform__note{padding:12px 14px;border-radius:12px;font-weight:600}
.cform__note.is-ok{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0}
.cform__note.is-err{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}
.cform__hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.cform__fine{color:#64748b;font-size:13px;text-align:center}
.cform button[disabled]{opacity:.7;cursor:progress}
.hd .logo{flex-shrink:0}
.nav__links a{white-space:nowrap}
@media (min-width:961px){.nav{gap:12px}.nav__links a{padding:8px 9px;font-size:14.5px}}
@media (max-width:1180px) and (min-width:961px){.nav__links a{padding:8px 7px;font-size:14px}.nav__cta .btn{padding:9px 14px;font-size:14px}.nav__opt{display:none}}
@media (max-width:1100px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.contact__in{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:560px){.svcs,.flow,.cform__row{grid-template-columns:minmax(0,1fr)}.cform{padding:22px 18px;border-radius:20px}}

/* Responsive */
@media (max-width:1100px){
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo{grid-template-columns:330px minmax(0,1fr)}
  .steps{grid-template-columns:330px minmax(0,1fr);gap:28px}
}
@media (max-width:960px){
  .burger{display:flex}
  .nav{position:fixed;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 16px 0;border-bottom:1px solid #e2e8f0;background:#fff;box-shadow:0 30px 40px -30px rgba(15,23,42,.35);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s}
  .nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
  .nav__links{flex-direction:column;gap:0}
  .nav__dk{display:none}
  .nav__links a{padding:10px 12px;border-radius:12px;font-size:16.5px;line-height:1.4}
  .nav__more{display:block;margin:6px 0 4px;padding-top:10px;border-top:1px solid #eef2f7}
  .nav__label{margin:0 0 4px;padding:0 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}
  .nav__more ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;margin:0;padding:0;list-style:none}
  .nav__more a{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:10px;color:#475569;font-size:14.5px;font-weight:600;line-height:1.3;text-decoration:none}
  .nav__more a:hover,.nav__more a:focus-visible{background:#f1f5f9;color:#0f172a}
  .nav__more a[aria-current="page"]{color:#1a3fb0;background:#eff6ff}
  .nav__cta{position:sticky;bottom:0;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:8px;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #eef2f7;background:#fff}
  .nav__cta .btn{justify-content:center;padding:12px 14px;font-size:15.5px;white-space:nowrap}
  .nav__cta .btn--ghost{border-color:#e2e8f0;background:#fff}
  /* Chỉ khoá <html>: khoá cả body khiến body thành khung cuộn riêng, header sticky nhảy về đầu trang và menu mở ngoài màn hình khi đang cuộn giữa trang. */
  html.nav-open{overflow:hidden}
  html:not(.js) .nav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0;max-height:none}
  html:not(.js) .nav__cta{position:static;margin:0}
  html:not(.js) .burger{display:none}
  html:not(.js) .hd__in{height:auto;flex-wrap:wrap;padding:10px 20px}
  .hero{padding:36px 0 64px}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .mock{transform:none}
  .prompt{position:relative;left:auto;bottom:auto;width:auto;margin:-34px 14px 0}
  .float--b{display:none}
  .float--a{top:-14px;right:8px}
  .stats__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec{padding:72px 0}
  .demo{grid-template-columns:minmax(0,1fr)}
  .demo__stage{position:static}
  .browser__view{height:500px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .themes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq .sec__head{position:static}
  .car__caps{grid-template-columns:minmax(0,1fr)}
  .car__cap{display:none}
  .car__cap.is-on{display:block}
  .car__cap span{-webkit-line-clamp:unset}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hero__sub{font-size:1.03rem}
  .hero__cta .btn{flex:1 1 100%}
  .feats{grid-template-columns:minmax(0,1fr)}
  .plans{grid-template-columns:minmax(0,1fr)}
  .logo img{height:34px}
  .themes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .theme{border-radius:16px}
  .theme__meta{gap:8px;padding:10px}
  .theme__sw,.theme__go{display:none}
  .theme__txt strong{font-size:.95rem}
  .theme__txt span{font-size:12.5px;white-space:normal}
  .browser__view{height:440px}
  .browser__bar{gap:8px;padding:8px 10px}
  .dots{display:none}
  .stat strong{font-size:1.9rem}
  .final__in{padding:48px 20px;border-radius:24px}
  .ft__links{gap:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  html.js .rv{opacity:1;transform:none}
  .mock,.hero__art:hover .mock{transform:none}
  .theme:hover .theme__img img{object-position:50% 0}
  .caret{display:none}
}

/* Blog (/blog, /blog/{slug}) – dùng chung header/footer/nút với trang chủ */
/* Mục "Blog" trong menu trang chủ chỉ hiện ở menu di động (≤960px): thanh menu máy tính đã đủ chỗ cho 7 mục, Blog có ở chân trang. */
@media (min-width:961px){.nav__mob,.nav__more{display:none}}
.nav__links a[aria-current="page"]{color:#1a3fb0;background:#eff6ff}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px;color:#64748b;font-size:14px}
.crumbs a{color:#475569;text-decoration:none;padding:6px 0}
.crumbs a:hover{color:#1a3fb0;text-decoration:underline}
.bl-hero{position:relative;padding:44px 0 28px;background:radial-gradient(55% 80% at 10% 0%,rgba(46,120,240,.14),transparent 70%),radial-gradient(40% 70% at 95% 10%,rgba(46,168,245,.12),transparent 70%)}
.bl-hero h1{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.15}
.bl-hero__sub{max-width:44em;margin-top:14px;color:#475569;font-size:1.08rem}
.bl-list{padding-bottom:64px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.bl-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 10px 30px -24px rgba(15,23,42,.35);transition:border-color .2s,box-shadow .2s,transform .2s}
.bl-card:hover{border-color:#bfdbfe;box-shadow:0 18px 36px -24px rgba(30,79,216,.45);transform:translateY(-2px)}
.bl-card__cat{color:#1a3fb0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bl-card__title{font-size:1.15rem;line-height:1.35;letter-spacing:-.01em}
.bl-card__title a{color:#0f172a;text-decoration:none}
.bl-card__title a::after{content:"";position:absolute;inset:0;border-radius:20px}
.bl-card__title a:hover{color:#1a3fb0}
.bl-card__ex{color:#475569;font-size:15px}
.bl-card__meta{margin-top:auto;color:#64748b;font-size:13.5px}
.bl-cta,.post__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;padding:32px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#1a3fb0,#1e4fd8 45%,#1f7fe6)}
.bl-cta h2,.post__cta h2{font-size:1.5rem;color:#fff}
.bl-cta p,.post__cta p{max-width:40em;margin-top:8px;color:#e0ecff}
.bl-cta__btns,.post__cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.post__hd{padding:40px 0 8px;background:radial-gradient(55% 80% at 10% 0%,rgba(46,120,240,.12),transparent 70%)}
.wrap--post{max-width:780px}
.post__hd h1{font-size:clamp(1.8rem,4.4vw,2.6rem);line-height:1.18}
.post__lead{margin-top:14px;color:#334155;font-size:1.12rem}
.post__meta{margin-top:14px;color:#64748b;font-size:14px}
.prose{padding:8px 0 0;color:#1e293b;font-size:1.06rem;line-height:1.75}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:1.9em;font-size:1.55rem;line-height:1.3;scroll-margin-top:84px}
.prose h3{margin-top:1.5em;font-size:1.22rem;line-height:1.35}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.4em}
.prose a{color:#1a3fb0;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:#152e73}
.prose strong{color:#0f172a}
.prose blockquote,.prose .tip{margin-left:0;margin-right:0;padding:16px 18px;border-left:4px solid #2e7cf0;border-radius:0 14px 14px 0;background:#eff6ff;color:#1e293b}
.prose table{width:100%;border-collapse:collapse;font-size:.96rem}
.prose th,.prose td{padding:10px 12px;border:1px solid #e2e8f0;text-align:left;vertical-align:top}
.prose th{background:#f8fafc}
.prose .tbl{overflow-x:auto}
.post__faq{margin-top:2.4em}
.post__faq h2{margin-bottom:14px;font-size:1.55rem;line-height:1.3}
.post__faq .qa p{line-height:1.7;color:#334155}
.prose .post__cta{margin-top:1.6em}
.prose .post__cta-t{margin:0;font-size:1.25rem;font-weight:800;color:#fff}
.prose .post__cta a.btn{color:#1a3fb0;text-decoration:none}
.prose code{padding:1px 6px;border-radius:6px;background:#eff6ff;color:#173691;font-size:.9em;word-break:break-all}
.prose .toc{padding:18px 20px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}
.prose .toc p{font-weight:700}
.prose .toc ol{margin-top:6px}
.bl-related{max-width:1180px;padding-top:56px;padding-bottom:64px}
.bl-related>h2{margin-bottom:18px;font-size:1.5rem}
.bl-back{margin-top:24px}
.bl-back a{display:inline-block;padding:10px 0;font-weight:700;text-decoration:none}
@media (max-width:960px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bl-grid{grid-template-columns:minmax(0,1fr)}.bl-cta,.post__cta{padding:24px 20px}.bl-cta__btns .btn,.post__cta-btns .btn{flex:1 1 100%}.prose{font-size:1.02rem}.post__hd{padding-top:28px}}

/* Kho mẫu (/mau, /mau/{slug}) */
.themes__more{margin-top:28px;text-align:center}
.tp-list{padding-bottom:64px}
.tp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.tp-grid--sm{grid-template-columns:repeat(4,minmax(0,1fr))}
.tp-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 10px 30px -24px rgba(15,23,42,.35);transition:border-color .2s,box-shadow .2s,transform .2s}
.tp-card:hover{border-color:#bfdbfe;box-shadow:0 18px 36px -24px rgba(30,79,216,.45);transform:translateY(-2px)}
.tp-card__shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--sw1),var(--sw2));border-bottom:1px solid #e2e8f0}
.tp-card__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tp-card__body{display:flex;flex:1;flex-direction:column;gap:8px;padding:18px 20px 20px}
.tp-card__tags{color:#1a3fb0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tp-card__title{font-size:1.15rem;line-height:1.35;letter-spacing:-.01em}
.tp-card__title a{color:#0f172a;text-decoration:none}
.tp-card__title a:hover{color:#1a3fb0;text-decoration:underline}
.tp-card__ex{color:#475569;font-size:15px}
.tp-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;color:#64748b;font-size:13.5px}
.tp-card__demo{margin-left:auto;padding:6px 0;font-weight:700;text-decoration:none}
.tp-card__demo:hover{text-decoration:underline}
.tp-sw{display:inline-block;width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--sw1),var(--sw2));vertical-align:-3px;margin-right:6px}
.tp-hero{padding:36px 0 40px;background:radial-gradient(55% 80% at 10% 0%,rgba(46,120,240,.14),transparent 70%),radial-gradient(40% 70% at 95% 10%,rgba(46,168,245,.12),transparent 70%)}
.tp-hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.tp-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.15}
.tp-hero__sub{margin-top:14px;color:#475569;font-size:1.06rem}
.tp-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;color:#334155;font-size:14.5px}
.tp-use{margin-top:22px;padding:18px;border:1px solid #e2e8f0;border-radius:18px;background:#fff}
.tp-use.is-want{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.25)}
.tp-use__form{display:flex;flex-wrap:wrap;gap:10px}
.tp-use__note{margin-top:12px;color:#475569;font-size:14px}
.tp-use__err{margin-bottom:12px;padding:10px 14px;border:1px solid #fecaca;border-radius:12px;background:#fef2f2;color:#991b1b;font-weight:600}
.tp-use__lock{margin-bottom:12px;color:#334155;font-size:15px}
.tp-premium{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 0;color:#334155;font-size:14.5px}
.tp-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,#0f172a,#334155);color:#f8fafc;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tp-badge--shot{position:absolute;left:12px;top:12px;z-index:1;box-shadow:0 8px 20px -10px rgba(15,23,42,.6)}
.tp-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tp-filter__btn{padding:8px 16px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#334155;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tp-filter__btn:hover{border-color:#bfdbfe}
.tp-filter__btn.is-on{color:#fff;background:#0f172a;border-color:#0f172a}
.tp-card.is-off{display:none}
.tp-shot{position:relative;display:block;overflow:hidden;border:1px solid #e2e8f0;border-radius:18px;background:linear-gradient(135deg,var(--sw1),var(--sw2));box-shadow:0 30px 60px -30px rgba(15,23,42,.45);text-decoration:none}
.tp-shot__bar{display:flex;gap:6px;padding:10px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.tp-shot__bar i{width:10px;height:10px;border-radius:50%;background:#cbd5e1}
.tp-shot img{display:block;width:100%;height:auto}
.tp-shot__cta{position:absolute;right:12px;bottom:12px;padding:8px 14px;border-radius:999px;background:rgba(15,23,42,.88);color:#fff;font-size:14px;font-weight:700}
.tp-sec{padding-top:48px}
.tp-sec h2{font-size:1.45rem}
.tp-sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.tp-sec__head a{font-weight:700;text-decoration:none;padding:8px 0}
.tp-frame{overflow:hidden;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc;box-shadow:0 20px 50px -34px rgba(15,23,42,.45)}
.tp-frame iframe{display:block;width:100%;height:min(78vh,760px);border:0;background:#fff}
.tp-small{margin-top:10px;color:#64748b;font-size:13.5px}
.tp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.tp-mt{margin-top:28px}
.tp-ticks{margin:12px 0 0;padding:0;list-style:none}
.tp-ticks li{position:relative;padding-left:28px;margin-top:10px;color:#334155}
.tp-ticks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#dbeafe;color:#1a3fb0;font-size:12px;font-weight:800;line-height:20px;text-align:center}
.tp-sections{margin:12px 0 0;padding-left:1.3em;color:#334155}
.tp-sections li{margin-top:8px}
.tp-note{padding:24px;border:1px solid #e2e8f0;border-radius:20px;background:#f8fafc}
.tp-note p{margin-top:10px;color:#334155}
.tp-more{padding-bottom:64px}
.tp-more>h2{margin-bottom:16px}
@media (max-width:1100px){.tp-grid--sm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.tp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tp-hero__in,.tp-cols{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:640px){.tp-grid{grid-template-columns:minmax(0,1fr)}.tp-grid--sm{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tp-grid--sm .tp-card__body{padding:12px}.tp-grid--sm .tp-card__title{font-size:1rem}.tp-use__form .btn{flex:1 1 100%;white-space:normal;text-align:center}.tp-frame iframe{height:70vh}}
@media (min-width:1101px){.tp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.tp-grid--4 .tp-card__body{padding:16px}.tp-grid--4 .tp-card__title{font-size:1.06rem}.tp-grid--4 .tp-card__ex{font-size:14.5px}}
@media (min-width:641px) and (max-width:1100px){.tp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nf-cta{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.6rem}
.hub{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.hub__col{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:24px}
.hub__col h3{font-size:1.15rem;margin:0 0 14px}
.hub__tags,.hub__posts{list-style:none;margin:0;padding:0}
.hub__tags{display:flex;flex-wrap:wrap;gap:8px}
.hub__tags a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid #cbd5e1;border-radius:999px;color:#0f172a;text-decoration:none;font-weight:600;font-size:.95rem}
.hub__tags a:hover{border-color:#1e4fd8;color:#1e4fd8}
.hub__posts li{padding:10px 0;border-top:1px solid #f1f5f9}
.hub__posts li:first-child{border-top:0}
.hub__posts a{color:#0f172a;font-weight:600;text-decoration:none;line-height:1.4}
.hub__posts a:hover{color:#1e4fd8;text-decoration:underline}
.hub__posts span{display:block;color:#64748b;font-size:.85rem;margin-top:2px}
.hub__more{display:inline-flex;gap:6px;min-height:44px;align-items:center;margin-top:12px;color:#1e4fd8;font-weight:700;text-decoration:none}
.post__meta a{color:#1e4fd8;font-weight:600}
.post__tpl{margin-top:36px;padding:22px 24px;border:1px solid #dbe4ff;border-radius:20px;background:#f5f8ff}
.post__tpl h2{font-size:1.2rem}
.post__tpl ul{margin:10px 0 0;padding-left:1.1em;line-height:1.7}
.post__tpl li{margin-top:6px}
.post__tpl a{font-weight:700}
.bl-sol,.hub__sol{margin-top:20px;color:#475569;line-height:1.8}
.bl-sol a,.hub__sol a{font-weight:700}
.hub__sol{margin-top:6px;font-size:.95rem}
.tp-card__guide{margin:8px 0 0;font-size:.9rem}
.tp-card__guide a{font-weight:700;display:inline-block;padding:6px 0}
.cform__captcha{min-height:65px;margin:2px 0 14px}
.tp-guide p{max-width:820px;margin-top:14px;color:#334155;line-height:1.8}
.tp-faq .qa{max-width:820px}
.tp-faq h2{margin-bottom:14px}
.tp-faq .qa p{padding:0 0 18px;color:#334155;line-height:1.7}
/* Công cụ miễn phí (/cong-cu) */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;margin:18px auto 34px}
.tool__form fieldset{margin:0 0 18px;padding:18px;border:1px solid #e2e8f0;border-radius:18px;background:#fff}
.tool__form legend{padding:0 6px;font-weight:800;color:#0f172a}
.tool__fld{display:block;margin-top:12px}
.tool__fld>span,.tool__label{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:#334155}
.tool__fld input,.tool__fld select,.seo-form input{width:100%;padding:11px 13px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#0f172a;font:inherit;font-size:16px;line-height:1.4}
.tool__fld input[type=color]{height:46px;padding:4px 6px;cursor:pointer}
.tool__fld input:focus,.tool__fld select:focus,.seo-form input:focus,.tool__code textarea:focus{outline:none;border-color:#1e4fd8;box-shadow:0 0 0 4px rgba(30,79,216,.16)}
.tool__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool__chk{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px;color:#334155;line-height:1.45}
.tool__chk input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:#1e4fd8}
.tool__hint{margin-top:10px;font-size:14px;color:#64748b;line-height:1.5}
.tool__note{padding:12px 14px;border-radius:12px;background:#fef3c7;color:#78350f}
.tool__out{position:sticky;top:84px}
.tool__phone{width:300px;max-width:100%;height:440px;margin:0 auto 18px;padding:12px;border-radius:36px;background:#0f172a;box-shadow:0 20px 40px -20px rgba(15,23,42,.5)}
.tool__phone iframe{width:100%;height:100%;border:0;border-radius:26px;background:#fff}
.tool__codebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.tool__codebar .tool__label{margin:0}
.tool__code textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:12px;background:#0f172a;color:#e2e8f0;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
.tool__code .btn:disabled{opacity:.5;cursor:not-allowed}
.tool--seo{display:block;max-width:820px}
.seo-form{padding:20px;border:1px solid #e2e8f0;border-radius:18px;background:#fff}
.seo-form__row{display:flex;gap:10px}
.seo-form__row input{flex:1}
.seo-form__row .btn{flex:none}
.seo-out{margin-top:18px;scroll-margin-top:84px}
.seo-err,.seo-wait{padding:14px 16px;border-radius:14px;background:#fef2f2;color:#991b1b}
.seo-wait{background:#eff6ff;color:#1e3a8a}
.seo-sum{display:flex;gap:18px;align-items:center;padding:18px;border:1px solid #e2e8f0;border-radius:18px;background:#fff}
.seo-score{flex:none;width:92px;height:92px;border-radius:50%;display:flex;align-items:baseline;justify-content:center;padding-top:26px;border:6px solid #16a34a;color:#14532d}
.seo-score strong{font-size:30px;line-height:1}.seo-score span{font-size:13px}
.seo-score--warn{border-color:#d97706;color:#78350f}.seo-score--fail{border-color:#dc2626;color:#7f1d1d}
.seo-sum__txt p{margin:2px 0;color:#334155;font-size:15px}
.seo-sum__url{font-weight:700;color:#0f172a;word-break:break-all}
.seo-sum__note{font-size:13px!important;color:#64748b!important}
.seo-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.seo-item{display:flex;gap:12px;padding:14px 16px;border:1px solid #e2e8f0;border-left-width:4px;border-radius:14px;background:#fff}
.seo-item--ok{border-left-color:#16a34a}.seo-item--warn{border-left-color:#d97706}.seo-item--fail{border-left-color:#dc2626}.seo-item--info{border-left-color:#64748b}
.seo-item__ic{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;background:#16a34a}
.seo-item--warn .seo-item__ic{background:#d97706}.seo-item--fail .seo-item__ic{background:#dc2626}.seo-item--info .seo-item__ic{background:#64748b}
.seo-item__body p{margin:0}
.seo-item__t{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#0f172a}
.seo-item__d{margin-top:4px!important;color:#334155;font-size:15px;word-break:break-word}
.seo-item__fix{margin-top:6px!important;padding:8px 10px;border-radius:10px;background:#f8fafc;color:#1e293b;font-size:14.5px}
.seo-tag{padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#dcfce7;color:#14532d}
.seo-tag--warn{background:#fef3c7;color:#78350f}.seo-tag--fail{background:#fee2e2;color:#7f1d1d}.seo-tag--info{background:#f1f5f9;color:#334155}
.tool-cards{list-style:none;margin:18px 0 30px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.tool-card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 10px 30px -22px rgba(15,23,42,.4)}
.tool-card__ic{font-size:30px}
.tool-card h2{margin:0;font-size:1.25rem}
.tool-card h2 a{color:#0f172a;text-decoration:none}.tool-card h2 a:hover{color:#1a3fb0;text-decoration:underline}
.tool-card p{margin:0;color:#475569;flex:1}
.tool-card .btn{align-self:flex-start}
@media (max-width:900px){.tool{grid-template-columns:minmax(0,1fr)}.tool__out{position:static}}
@media (max-width:520px){.tool__row{grid-template-columns:1fr}.seo-form__row{flex-direction:column}.seo-sum{flex-direction:column;align-items:flex-start}}
/* Ảnh minh hoạ trong bài blog */
.prose figure{margin:1.5em 0 0}
.prose figure img{display:block;width:100%;height:auto;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 12px 30px -20px rgba(15,23,42,.45);background:#f8fafc}
.prose figure.fig--phone img{width:auto;max-width:min(100%,320px);margin:0 auto}
.prose figcaption{margin-top:.55em;font-size:.9rem;line-height:1.5;color:#64748b;text-align:center}
.prose .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose .tbl table{min-width:640px}

/* Nút đổi ngôn ngữ giao diện (VI | EN) */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;font-weight:600;font-size:12px;line-height:1;letter-spacing:.03em;flex-shrink:0}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:30px;padding:0 8px;border-radius:999px;color:#475569;text-decoration:none}
.lang-switch a:hover{color:#1e4fd8}
.lang-switch a[aria-current="true"]{background:#1e4fd8;color:#fff}
.lang-switch--footer{margin-top:14px;background:transparent;border-color:rgba(148,163,184,.4)}
.lang-switch--footer a{color:inherit}
@media (max-width:960px){.lang-switch--site{align-self:flex-start;margin:10px 0 12px}}
.tp-use__lang{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 4px;padding:0;border:0;font-size:14px}
.tp-use__lang legend{width:100%;margin-bottom:4px;font-weight:700}
.tp-use__lang label{display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer}
.tp-use__lang small{flex:1 1 100%;color:#64748b;font-size:12.5px}

/* Trang chủ: danh sách mẫu thiệp online */
.card-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.card-picks a{display:inline-flex;gap:6px;align-items:center;padding:9px 16px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#0f172a;font-weight:600;text-decoration:none;transition:border-color .2s,transform .2s}
.card-picks a:hover{border-color:#f9a8d4;transform:translateY(-2px)}
@media (max-width:960px){.nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.nf-grid{grid-template-columns:minmax(0,1fr)}}
/* Liên hệ công khai (chân trang + khối liên hệ) và nút Zalo nổi trên di động */
.ft__contact,.contact__direct{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.4rem;font-size:.92rem}
.ft__contact a,.contact__direct a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.contact__direct{margin:1rem 0;font-weight:600}
.zfab{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;display:none;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#0068ff;color:#fff;font-weight:800;font-size:.8rem;text-decoration:none;box-shadow:0 6px 18px rgba(0,104,255,.35)}
@media (max-width:767px){.zfab{display:inline-flex}html.nav-open .zfab{display:none}}
/* /dung-thu – trình sửa thử */
.try h1{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:.3rem 0}
.try__grid{display:grid;gap:1.5rem;margin-top:1.5rem}
@media (min-width:900px){.try__grid{grid-template-columns:minmax(0,360px) 1fr}}
.try__form{display:grid;gap:.8rem}
.try__form label{display:grid;gap:.3rem;font-weight:600;font-size:.9rem}
.try__form input,.try__form textarea{font:inherit;font-weight:400;padding:.6rem .7rem;border:1px solid #cbd5e1;border-radius:10px;width:100%;box-sizing:border-box}
.try__form fieldset{border:0;padding:0;margin:0;display:grid;gap:.4rem}
.try__form legend{font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.try__row{display:grid;grid-template-columns:1fr 110px;gap:.4rem}
.try__colors{display:flex;gap:.6rem}
.try__colors label{display:block}
.try__colors input{position:absolute;opacity:0}
.try__colors span{display:block;width:36px;height:36px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 1px #cbd5e1;cursor:pointer}
.try__colors input:checked+span{box-shadow:0 0 0 3px #0f172a}
.try__colors input:focus-visible+span{outline:2px solid #0f172a;outline-offset:2px}
.try__preview{border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.try__preview .browser__bar{display:flex;gap:6px;padding:10px 12px;background:#f1f5f9}
.try__preview .browser__bar i{width:10px;height:10px;border-radius:50%;background:#cbd5e1}
.try__page{--try-c:#1e4fd8}
.try__hero{padding:2rem 1.5rem;background:var(--try-c);color:#fff}
.try__hero h2{font-size:clamp(1.4rem,3vw,2rem);margin:.4rem 0;color:#fff}
.try__brand{font-weight:800;opacity:.9;margin:0}
.try__cta{display:inline-block;margin-top:1rem;padding:.7rem 1.2rem;border-radius:999px;background:#fff;color:var(--try-c);font-weight:700}
.try__menu{list-style:none;margin:0;padding:1rem 1.5rem 1.5rem;display:grid;gap:.6rem}
.try__menu li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px dashed #e2e8f0}
.try__menu b{color:var(--try-c)}
.try__next{margin-top:2rem;padding:1.5rem;border-radius:16px;background:#eff6ff;display:grid;gap:.8rem;justify-items:start}