@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/bricolage-grotesque-vietnamese-600-normal.woff2) 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:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/bricolage-grotesque-latin-ext-600-normal.woff2) 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:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/bricolage-grotesque-latin-600-normal.woff2) 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:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/bricolage-grotesque-vietnamese-800-normal.woff2) 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:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/bricolage-grotesque-latin-ext-800-normal.woff2) 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:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) 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-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-vietnamese-400-normal.woff2) 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-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-latin-ext-400-normal.woff2) 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-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-latin-400-normal.woff2) 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-display:swap;font-weight:500;src:url(../fonts/be-vietnam-pro-vietnamese-500-normal.woff2) 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-display:swap;font-weight:500;src:url(../fonts/be-vietnam-pro-latin-ext-500-normal.woff2) 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-display:swap;font-weight:500;src:url(../fonts/be-vietnam-pro-latin-500-normal.woff2) 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-display:swap;font-weight:700;src:url(../fonts/be-vietnam-pro-vietnamese-700-normal.woff2) 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-display:swap;font-weight:700;src:url(../fonts/be-vietnam-pro-latin-ext-700-normal.woff2) 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-display:swap;font-weight:700;src:url(../fonts/be-vietnam-pro-latin-700-normal.woff2) 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:italic;font-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-vietnamese-400-italic.woff2) format('woff2');fontsource-be-vietnam-pro-5.3.0/400-italic.css-  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:italic;font-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-latin-ext-400-italic.woff2) format('woff2');fontsource-be-vietnam-pro-5.3.0/400-italic.css-  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:italic;font-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-latin-400-italic.woff2) format('woff2');fontsource-be-vietnam-pro-5.3.0/400-italic.css-  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;}
/* thietkedohoa.com.vn — giao diện "tờ in thử": CMYK trên giấy trắng */
:root{
  --c:#00A0E3; --m:#E6007E; --y:#FFE500; --k:#000;
  --paper:#fff; --stock:#F2F3F5; --line:#D9DCE1; --ink:#000; --text:#2B2B2B; --muted:#5E636B;
  --m-dark:#B80064;
  --display:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;
  --body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:6px; --wrap:1180px; --gut:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.6 var(--body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--m)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--c);outline-offset:2px}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,7.2vw,5.4rem);letter-spacing:-.035em;line-height:.98}
h2{font-size:clamp(1.75rem,3.8vw,2.75rem)}
h3{font-size:1.2rem;letter-spacing:-.01em;line-height:1.2}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.muted{color:var(--muted)} .small{font-size:.86rem} .strong{font-weight:700;color:var(--ink)}
.sr,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--k);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:8px}
[hidden]{display:none!important}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.7em 1.3em;border:2px solid var(--m);border-radius:var(--r);background:var(--m);color:#fff;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--m-dark);border-color:var(--m-dark);color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-invert{background:var(--k);border-color:var(--k);color:#fff}
.btn-invert:hover{background:#fff;color:var(--k);border-color:var(--k)}
.btn-lg{min-height:54px;font-size:1.05rem;padding:.8em 1.5em}
.btn-sm{min-height:38px;padding:.45em .9em;font-size:.92rem}
.btn-wide{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none}

/* ---------- đầu trang ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:64px;padding-inline:var(--gut);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 10px;border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;font-weight:700;font-size:.92rem}
.menu-btn:hover{background:var(--ink);color:#fff}
.bars{display:grid;gap:4px}.bars i{display:block;width:18px;height:2px;background:currentColor}
.logo{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.logo:hover{color:var(--ink)}
.logo-mark{width:30px;height:30px}
.logo-word{font-family:var(--display);font-weight:800;font-size:1.18rem;letter-spacing:-.03em;line-height:1}
.logo-word b{color:var(--m);font-weight:800}
.logo-word small{font-family:var(--body);font-weight:500;font-size:.7rem;letter-spacing:0;color:var(--muted);margin-left:1px}
.top-nav{display:none;gap:4px;margin-left:12px}
.top-nav a{padding:8px 12px;border-radius:var(--r);text-decoration:none;font-weight:600;font-size:.95rem}
.top-nav a[aria-current]{background:var(--stock)}
.top-nav .nav-read{border:1.5px solid var(--ink)}
.top-act{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;gap:3px;align-items:center;font-size:.85rem;font-weight:600;text-decoration:none;color:var(--muted);padding:6px 4px}
.lang b{color:var(--ink)} .lang span{opacity:.4}
.top-act .btn{display:none}
@media (min-width:900px){.top-nav{display:flex}.top-act .btn{display:inline-flex}}
@media (max-width:420px){.logo-word small{display:none}.menu-btn>span:last-child{display:none}.menu-btn{padding:0 10px}}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(28px,6vw,80px) 0 clamp(40px,7vw,96px);overflow:hidden}
.hero-grid{display:grid;gap:40px;align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:48px}.proofs{max-width:620px}}
.reg{display:grid;margin-bottom:.45em}
.reg>span{grid-area:1/1}
.reg-c,.reg-m{mix-blend-mode:multiply;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.reg-c{color:var(--c);transform:translate(-.055em,-.035em)}
.reg-m{color:var(--m);transform:translate(.045em,.04em)}
.reg-k{position:relative;color:var(--k)}
.reg.in .reg-c,.reg.in .reg-m{transform:translate(0,0)}
@media (prefers-reduced-motion:reduce){.reg-c,.reg-m{transition:none;transform:none}}
.hero-lead,.svc-lead{font-size:clamp(1.05rem,1.9vw,1.25rem);line-height:1.55;max-width:38em;color:var(--text)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.hero-facts{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:2px solid var(--ink);max-width:620px}
.hero-facts li{display:grid;gap:2px}
.hero-facts b{font-family:var(--display);font-size:clamp(1.05rem,2.6vw,1.5rem);color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.hero-facts span{font-size:.84rem;color:var(--muted);line-height:1.35}
/* tờ in thử */
.proofs{position:relative;margin:0;min-height:360px;aspect-ratio:1/1;max-width:560px;justify-self:center;width:100%}
.proof{position:absolute;background:#fff;padding:10px;box-shadow:0 1px 0 var(--line),0 18px 40px -16px rgba(0,0,0,.35)}
.p1{width:62%;left:0;top:6%;transform:rotate(-4deg)}
.p2{width:58%;right:0;top:34%;transform:rotate(3deg);z-index:2}
.p3{width:40%;left:16%;bottom:0;transform:rotate(-1deg);z-index:3}
.swatch{position:absolute;right:4%;top:2%;width:150px;z-index:4;box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.proofs figcaption{position:absolute;right:0;bottom:0;font-size:.78rem;color:var(--muted)}
.proofs::before,.proofs::after{content:"";position:absolute;width:26px;height:26px;border:0 solid var(--k);z-index:5}
.proofs::before{left:-10px;top:-10px;border-left-width:1.5px;border-top-width:1.5px}
.proofs::after{right:-10px;bottom:-10px;border-right-width:1.5px;border-bottom-width:1.5px}

/* ---------- khối chung ---------- */
section{scroll-margin-top:80px}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:8px 24px;margin-bottom:22px}
.sec-head h2{margin:0}.sec-head p{margin:0;color:var(--muted);max-width:34em}
.price,.steps,.tools,.shelf,.reads,.faq,.rel,.gear,.svc-get,.tpl-pitch{padding-block:clamp(36px,6vw,72px)}
.page-head{padding-block:clamp(28px,5vw,64px) 8px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;padding-top:18px;font-size:.86rem;color:var(--muted)}
.crumbs a{text-decoration:none}.crumbs span[aria-current]{color:var(--ink)}

/* bảng giá dạng tờ in */
.ratecard{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rate a{display:grid;grid-template-columns:22px 1fr auto;grid-template-areas:"chip name price" ". desc days";gap:2px 14px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.rate a:hover{background:var(--stock);color:var(--text)}
.rate-chip{grid-area:chip;display:inline-block;width:18px;height:18px;border-radius:2px;background:var(--chip,var(--k));transform:translateY(2px)}
.rate-c,.svc-c{--chip:var(--c)}.rate-m,.svc-m{--chip:var(--m)}.rate-y,.svc-y{--chip:var(--y)}.rate-k,.svc-k{--chip:var(--k)}
.rate-y .rate-chip,.svc-y .rate-chip{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.rate-name{grid-area:name;font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.75rem);letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.rate-desc{grid-area:desc;color:var(--muted);font-size:.95rem}
.rate-price{grid-area:price;font-weight:700;color:var(--ink);white-space:nowrap}
.rate-days{grid-area:days;color:var(--muted);font-size:.86rem;white-space:nowrap;text-align:right}
@media (min-width:900px){
  .rate a{grid-template-columns:22px minmax(220px,1.1fr) 1.4fr 150px 90px;grid-template-areas:"chip name desc price days";align-items:center;padding:22px 8px}
  .rate-price{text-align:right}
}

/* quy trình — có thứ tự thật nên đánh số */
.step-list{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:st}
@media (min-width:760px){.step-list{grid-template-columns:repeat(4,1fr)}}
.step-list li{counter-increment:st;border-top:2px solid var(--ink);padding-top:14px}
.step-list li::before{content:counter(st);display:block;font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--m);margin-bottom:10px}
.step-list p{color:var(--muted);margin:0}

/* cam kết */
.promise{background:var(--y);color:var(--k);padding-block:clamp(40px,7vw,84px)}
.promise-in{display:grid;gap:18px;justify-items:start}
.promise h2{font-size:clamp(1.7rem,4.4vw,3.1rem);max-width:20em;margin:0}
.promise p{max-width:40em;margin:0}

/* công cụ */
.tool-row{display:grid;gap:18px}
@media (min-width:760px){.tool-row{grid-template-columns:repeat(3,1fr)}}
.tool{display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto 1fr;column-gap:16px;row-gap:4px;text-decoration:none;color:var(--text);align-items:start}
.tool svg{grid-row:1/3;width:100%;aspect-ratio:3/2;border:1.5px solid var(--ink);border-radius:var(--r)}
.tool h3{margin:0}.tool p{margin:0;color:var(--muted);font-size:.95rem}
@media (min-width:760px){.tool{grid-template-columns:1fr;grid-template-rows:auto}.tool svg{grid-row:auto;margin-bottom:8px}.tool p{font-size:1rem}}
.tool:hover h3{color:var(--m)}

/* sản phẩm */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px}
@media (min-width:900px){.prod-grid{grid-template-columns:repeat(4,1fr);gap:28px 22px}.prod-grid-lg{grid-template-columns:repeat(3,1fr)}}
.prod{display:grid;align-content:start;gap:4px}
.prod-img{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--stock);aspect-ratio:4/3;margin-bottom:8px}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.prod-img:hover img{transform:scale(1.03)}
.badge{position:absolute;left:8px;top:8px;background:var(--y);color:var(--k);font-weight:700;font-size:.78rem;padding:3px 8px;border-radius:3px}
.prod h3{font-size:1.02rem;margin:0}.prod h3 a{text-decoration:none}
.prod-meta{font-size:.8rem;color:var(--muted);margin:0}
.prod-price{font-weight:800;color:var(--ink);margin:0}

/* bài viết */
.read-grid{display:grid;gap:30px}
@media (min-width:760px){.read-grid{grid-template-columns:repeat(3,1fr)}.read-grid-lg{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.read-grid-lg{grid-template-columns:repeat(3,1fr)}}
.post-card{display:grid;align-content:start;gap:6px}
.post-img{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:1200/630;background:var(--stock);margin-bottom:8px}
.post-img img{width:100%;height:100%;object-fit:cover}
.post-card h3{font-size:1.15rem;margin:0}.post-card h3 a{text-decoration:none}
.post-card p{margin:0;color:var(--muted);font-size:.95rem}
.post-meta{font-size:.82rem;color:var(--muted)}

/* câu hỏi */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-weight:700;color:var(--ink);position:relative;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:800 1.6rem/1 var(--display);color:var(--m)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px;color:var(--text);max-width:46em}

/* CTA cuối */
.cta{background:var(--k);color:#fff;padding-block:clamp(44px,7vw,88px)}
.cta-in{display:grid;gap:28px}
@media (min-width:900px){.cta-in{grid-template-columns:1fr 1fr;gap:56px;align-items:center}}
.cta h2{color:#fff;margin-bottom:.4em}.cta p{color:#C9CCD1}
.cta .form label span{color:#fff}
.cta .form input{background:#fff}
.tomi-wrap{padding-block:28px}

/* ---------- form ---------- */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px}
.form label>span{font-weight:600;font-size:.92rem;color:var(--ink)}
.form input,.form textarea,.form select{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;color:var(--k);font:inherit;font-size:16px}
.form textarea{min-height:96px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px rgba(0,160,227,.25)}
.form-msg{margin:0;font-weight:600;min-height:1.4em}
.form-msg.ok{color:#0A7D3E}.form-msg.err{color:#C8102E}
.cta .form-msg.ok{color:#7CF0A9}.cta .form-msg.err{color:#FF8FA3}
.file input{padding:10px;border-style:dashed}

/* ---------- trang dịch vụ ---------- */
.svc-hero{padding-block:clamp(18px,4vw,48px) clamp(30px,5vw,56px)}
.svc-kicker{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);margin-bottom:14px}
.svc-kicker .rate-chip{transform:none}
.svc-hero h1{max-width:14em}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--m);border-bottom:2.5px solid var(--m);transform:rotate(-45deg)}
@media (min-width:760px){.svc-get .ticks{grid-template-columns:repeat(2,1fr);gap:14px 40px}}
.tiers{display:grid;gap:18px;margin-top:22px}
@media (min-width:860px){.tiers{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.tier{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 22px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff}
.tier h3{font-size:1.15rem;margin:0}
.tier-price{font-family:var(--display);font-weight:800;font-size:2rem;color:var(--ink);letter-spacing:-.03em;margin:4px 0 0}
.tier-days{color:var(--muted);font-size:.88rem;margin:0 0 10px}
.tier ul{list-style:none;margin:0 0 18px;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;flex:1}
.tier li{position:relative;padding-left:22px;font-size:.95rem}
.tier li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;background:var(--chip,var(--k))}
.tier-pop{border:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--chip,var(--m))}
.tier-flag{position:absolute;top:-13px;left:18px;margin:0;background:var(--m);color:#fff;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:3px}
.tiers-c .tier{padding:18px}
.tiers-c .tier-price{font-size:1.5rem}
.svc-block{padding-block:28px;border-top:2px solid var(--ink)}
.svc-block-head{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;justify-content:space-between}
.svc-block-head h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.4rem,3vw,2rem);margin:0}
.svc-block-head h2 a{text-decoration:none}
.svc-block-head p{margin:0;color:var(--muted)}
.tpl-pitch{display:grid;gap:24px;align-items:center}
@media (min-width:860px){.tpl-pitch{grid-template-columns:1.1fr 1fr}}
.tpl-pitch img{border-radius:var(--r)}
.tpl-pitch h2{font-size:clamp(1.5rem,3vw,2.1rem)}

/* ---------- trang sản phẩm ---------- */
.pdp{display:grid;gap:24px;padding-block:20px 40px;grid-template-areas:"cover" "buy" "gal"}
.pdp-cover{grid-area:cover}.pdp-buy{grid-area:buy}.pdp-gallery{grid-area:gal}
@media (min-width:960px){.pdp{grid-template-columns:1.3fr 1fr;grid-template-areas:"cover buy" "gal buy";column-gap:48px;row-gap:14px;align-items:start}.pdp-buy{position:sticky;top:84px}}
.pdp-gallery{display:grid;gap:14px}
.pdp-cover,.pdp-gallery img{border-radius:var(--r);background:var(--stock);width:100%}
.pdp-buy h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.pdp-buy h2{font-size:1.15rem;margin-top:26px}
.pdp-price{font-family:var(--display);font-weight:800;font-size:2.3rem;color:var(--ink);letter-spacing:-.03em;margin:6px 0 14px}
.spec{display:grid;gap:0;margin:22px 0;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.spec dt{color:var(--muted)}.spec dd{margin:0;color:var(--ink)}

/* ---------- công cụ (app) ---------- */
.app{display:grid;gap:22px;padding-block:18px 40px}
.app-work{display:grid;gap:22px}
@media (min-width:960px){.app-work,.mk{grid-template-columns:1.5fr 1fr;align-items:start}}
.drop{display:grid;justify-items:center;gap:8px;padding:48px 20px;border:2px dashed var(--ink);border-radius:var(--r);text-align:center;cursor:pointer;background:var(--stock);transition:background .15s}
.drop:hover,.drop.on{background:#E7F6FD;border-color:var(--c)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop svg{width:52px;height:52px;fill:none;stroke:var(--m);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.drop b{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.drop span{color:var(--muted);font-size:.9rem}
.drop-sm{padding:20px 14px}.drop-sm b{font-size:1.05rem}
.app-status{font-weight:600;min-height:1.4em;margin:0}
.stage{border-radius:var(--r);overflow:hidden;border:1.5px solid var(--line)}
.stage canvas{width:100%;height:auto}
.checker{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='10' height='10' fill='%23E3E5E8'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23E3E5E8'/%3E%3C/svg%3E")}
.app-ctl{display:grid;gap:18px;align-content:start}
.seg{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.seg legend,.swatches legend{font-weight:700;color:var(--ink);margin-bottom:8px;padding:0;width:100%}
.seg label{position:relative;display:inline-flex;align-items:center;gap:6px}
.seg input[type=radio]{position:absolute;opacity:0}
.seg span{display:inline-block;padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px;font-weight:600;font-size:.92rem}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--c);outline-offset:2px}
.seg-color input[type=color]{width:38px;height:38px;border:1.5px solid var(--ink);border-radius:50%;padding:0;background:none;cursor:pointer}
.swatches{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.swatches label{position:relative}
.swatches input[type=radio]{position:absolute;opacity:0}
.swatches span{display:block;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line)}
.swatches input:checked+span{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.range{display:grid;gap:6px}.range span{font-weight:700;color:var(--ink);font-size:.95rem}
.range input{width:100%;accent-color:var(--m)}
.hold{display:flex;gap:8px;align-items:center;font-weight:600}
.app-btns{display:grid;gap:10px}
.upsell{border-left:4px solid var(--m);padding:4px 0 4px 16px;display:grid;gap:10px;justify-items:start}
.upsell p{margin:0}

/* font */
.font-ctl{display:grid;gap:16px;margin-bottom:24px;position:sticky;top:64px;background:#fff;padding:14px 0;z-index:5;border-bottom:1px solid var(--line)}
@media (min-width:860px){.font-ctl{grid-template-columns:1.4fr 1fr;align-items:end}.font-ctl .chips{grid-column:1/-1}}
.font-input input{width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--ink);border-radius:var(--r);font-size:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font-weight:600;font-size:.9rem}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.font-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:860px){.font-list{grid-template-columns:1fr 1fr;column-gap:40px}}
.font-it{border-bottom:1px solid var(--line);padding:18px 0}
.font-sample{margin:0 0 8px;color:var(--ink);line-height:1.15;overflow-wrap:anywhere}
.font-meta{display:flex;gap:12px;align-items:baseline;font-size:.88rem}
.font-meta b{color:var(--ink)}.font-meta span{color:var(--muted)}.font-meta a{margin-left:auto;font-weight:600}

/* bài viết */
.post{max-width:780px;padding-bottom:30px}
.post h1{font-size:clamp(2rem,5vw,3.3rem);margin-top:18px}
.post-cover{border-radius:var(--r);margin:10px 0 28px;width:100%}
.prose{font-size:1.06rem;line-height:1.72}
.prose-narrow{max-width:780px;padding-block:20px 30px}
.prose h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:1.6em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--m);font-weight:700}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{border-bottom:2px solid var(--ink);color:var(--ink);font-weight:700;white-space:nowrap}
.prose a{color:var(--m)}
.post-cta{margin:34px 0 10px;padding:22px 24px;border:2px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--chip,var(--m))}
.post-cta p:first-child{display:flex;gap:10px;align-items:center;color:var(--ink)}
.post-cta .hero-cta{margin:12px 0 0}

/* báo giá */
.quote-grid{display:grid;gap:36px;padding-block:20px 60px}
@media (min-width:900px){.quote-grid{grid-template-columns:1.2fr 1fr}}
.quote-side h2{font-size:1.4rem}

/* đồ nghề affiliate */
.gear h2{font-size:clamp(1.4rem,3vw,2rem)}
.gear-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.gear-it{display:grid;gap:6px;text-decoration:none;color:var(--text);scroll-snap-align:start;font-size:.88rem}
.gear-it img{aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--stock);width:100%}
.gear-it b{color:var(--ink)}

/* 404 */
.nf{padding-block:80px;text-align:center}.nf-code{font:800 clamp(5rem,20vw,11rem)/1 var(--display);color:var(--m);margin:0}

/* ---------- chân trang ---------- */
.foot{background:var(--stock);padding:clamp(40px,6vw,64px) 0 110px;margin-top:0;border-top:2px solid var(--ink)}
.foot-grid{display:grid;gap:30px}
@media (min-width:860px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}.foot{padding-bottom:40px}}
.foot-brand p{color:var(--muted);max-width:30em;margin:14px 0 8px}
.foot-mail a{color:var(--ink);font-weight:600}
.foot-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.foot-col{display:grid;align-content:start;gap:8px}
.foot-col h2{font:700 .95rem/1.3 var(--body);letter-spacing:0;color:var(--ink);margin:0 0 6px}
.foot-col a{text-decoration:none;color:var(--text);font-size:.95rem}
.foot-col a:hover{color:var(--m)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}

/* danh bạ web */
.dir-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:999px;background:var(--k);color:#fff;font-weight:700;font-size:.9rem}
.dir-btn:hover{background:var(--m)}
.dir-btn b{background:#fff;color:var(--k);border-radius:999px;padding:1px 8px;font-size:.78rem}
.dir-dot{width:8px;height:8px;border-radius:50%;background:var(--y);box-shadow:0 0 0 3px rgba(255,229,0,.3)}
.dir-q{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--ink);border-radius:var(--r);font-size:16px;margin:4px 0 12px}
.dir-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px}
.dir-filters button{flex:none;padding:6px 12px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font-size:.85rem;font-weight:600;white-space:nowrap}
.dir-filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.dir-filters small{opacity:.6;margin-left:4px}
.dir-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dir-list a,.dir-list .soon{display:grid;gap:1px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r);text-decoration:none}
.dir-list a:hover{border-color:var(--ink)}
.dir-list b{color:var(--ink);font-size:.95rem}.dir-list small{color:var(--muted);font-size:.8rem}
.dir-list .soon{border-style:dashed;color:var(--muted)}
.dir-list .here{border-color:var(--m)}.dir-list .here small{color:var(--m);font-weight:700}

/* ---------- MENU kéo ---------- */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45)}
.drawer-in{position:absolute;left:0;top:0;bottom:0;width:min(380px,90vw);background:#fff;overflow-y:auto;padding:14px 20px 30px;display:flex;flex-direction:column;gap:14px;animation:slideIn .22s ease-out}
@keyframes slideIn{from{transform:translateX(-30px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer-in,.modal-in{animation:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.x{width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;background:#fff;font-size:1.6rem;line-height:1;display:grid;place-items:center}
.x:hover{background:var(--ink);color:#fff}
.install{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:0;border-radius:var(--r);background:var(--m);color:#fff;text-align:left}
.install svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.install b{display:block;font-size:1.05rem}.install small{opacity:.9}
.drawer-nav{display:grid}
.drawer-nav>a,.drawer-nav summary{display:block;padding:13px 2px;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em;cursor:pointer;list-style:none}
.drawer-nav summary::-webkit-details-marker{display:none}
.drawer-nav summary::after{content:"+";float:right;color:var(--m)}
.drawer-nav details[open] summary::after{content:"−"}
.drawer-nav .sub{display:block;padding:9px 0 9px 14px;font-size:1rem;text-decoration:none;border-left:2px solid var(--line)}
.drawer-nav details[open]{padding-bottom:8px;border-bottom:1px solid var(--line)}
.drawer-nav details[open] summary{border-bottom:0}
.drawer-extra{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lang-row{font-weight:700}
.visits{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
.visits-btn{border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:7px 14px;font-weight:700;font-size:.9rem}
.visits dl{margin:12px 0 0;display:grid;gap:6px}
.visits dl div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:6px}
.visits dt{color:var(--muted)}.visits dd{margin:0;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- hộp bật lên ---------- */
.modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);display:grid;align-items:end;justify-items:center;overflow-y:auto}
@media (min-width:700px){.modal{align-items:center;padding:24px}}
.modal-in{position:relative;width:100%;max-width:480px;background:#fff;border-radius:14px 14px 0 0;padding:26px 22px 28px;animation:up .2s ease-out;max-height:94vh;overflow-y:auto}
@media (min-width:700px){.modal-in{border-radius:var(--r)}}
.modal-wide{max-width:640px}
@keyframes up{from{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}
.modal-in .x{position:absolute;right:14px;top:14px}
.modal-in h2{font-size:1.65rem;padding-right:48px}
.pay-item{font-weight:700;color:var(--m);margin:0 48px 4px 0}
.pay-tabs{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.pay-tabs button{padding:11px 8px;border:0;background:#fff;font-weight:700;font-size:.92rem}
.pay-tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.qr-frame{display:grid;place-items:center;padding:12px;border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:10px;min-height:120px}
.qr-frame img,.qr-frame [data-pp-qr]{width:240px;max-width:100%}
.qr-frame [data-pp-qr] svg,.qr-frame [data-pp-qr] img{width:100%}
.qr-missing{margin:0;text-align:center;color:var(--muted)}
.pay-dl{margin:6px 0 14px;display:grid}
.pay-dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.pay-dl dt{color:var(--muted)}.pay-dl dd{margin:0;text-align:right;color:var(--ink);word-break:break-word}
.copy{border:1px solid var(--ink);background:#fff;border-radius:4px;font-size:.75rem;padding:2px 8px;margin-left:6px}
.pp-mail{text-align:center;font-size:1.08rem;margin:4px 0 8px;word-break:break-all}
.pay-box{margin-bottom:16px}
.btn-confirm{white-space:normal;line-height:1.3}
.pay-done{text-align:center;display:grid;gap:12px;justify-items:center}
.done-mark{width:70px;height:70px;fill:none;stroke:#0A7D3E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.done-msg{font-weight:700;color:var(--ink);font-size:1.1rem;margin:0}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--k);color:#fff;padding:10px 18px;border-radius:999px;z-index:90;font-weight:600;font-size:.92rem}

/* ---------- thanh thao tác dưới (điện thoại) ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.dock a,.dock button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;font-weight:700;font-size:.95rem;text-decoration:none;color:var(--ink)}
.dock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.dock .dock-cta{flex:1;background:var(--m);border-color:var(--m);color:#fff}
.dock .dock-zalo{border-color:#0068FF;color:#0068FF}
@media (min-width:900px){.dock{display:none}}

/* tomi-mart: chừa chỗ để không nhảy bố cục */
tomi-mart{display:inline-block;min-height:40px}
.tomi-wrap tomi-mart{display:block;min-height:120px}

/* in */
@media print{.top,.dock,.foot,.drawer,.modal{display:none!important}}