/* in-01 · Bốn Màu Print · thietkeweb.dev demo template · mobile-first, no framework */
:root{--c:#00a8e8;--m:#e6007e;--y:#ffd400;--k:#111111;--paper:#ffffff;--soft:#f4f4f1;--mut:#5b5b57;--head:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;--hh:68px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.65 var(--head);color:var(--k);background:var(--paper);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--head);font-weight:700;line-height:1.05;letter-spacing:-.02em}
p{margin:0 0 1em}ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{fill:currentColor}
:focus-visible{outline:3px solid var(--m);outline-offset:2px}
[hidden]{display:none!important}
.w{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;z-index:999;background:var(--k);color:#fff;padding:10px 16px}.skip:focus{left:10px;top:10px}
.mono{font-family:var(--mono)}
.kick{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.kick::before{content:"";width:12px;height:12px;background:var(--m)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 24px;border:2px solid var(--k);background:var(--paper);color:var(--k);font:700 15px var(--head);cursor:pointer;box-shadow:4px 4px 0 var(--k);transition:transform .15s,box-shadow .15s,background .15s}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--k)}
.btn--k{background:var(--k);color:#fff;box-shadow:4px 4px 0 var(--m)}.btn--k:hover{box-shadow:2px 2px 0 var(--m)}
.btn--y{background:var(--y)}.btn--m{background:var(--m);color:#fff}
.btn--sm{min-height:40px;padding:6px 16px;font-size:14px;box-shadow:3px 3px 0 var(--k)}
.btn--b{width:100%}
/* header */
.hd{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--k)}
.hd__in{display:flex;align-items:center;justify-content:space-between;height:var(--hh);gap:10px}
.logo{display:inline-flex;align-items:center;gap:10px;flex:none}
.logo i{display:grid;grid-template-columns:repeat(2,13px);gap:2px}.logo i b{width:13px;height:13px;display:block}.logo i b:nth-child(1){background:var(--c)}.logo i b:nth-child(2){background:var(--m)}.logo i b:nth-child(3){background:var(--y)}.logo i b:nth-child(4){background:var(--k)}
.logo span{display:flex;flex-direction:column;font:700 22px/1 var(--head);letter-spacing:-.03em;text-transform:uppercase}
.logo small{font:400 10px var(--mono);letter-spacing:.06em;text-transform:none;margin-top:4px;color:var(--mut)}
.hd__act{display:flex;align-items:center;gap:8px}
.burger{width:46px;height:46px;border:2px solid var(--k);background:var(--paper);display:grid;place-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--k);transition:transform .2s,opacity .2s}
.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-open .burger span:nth-child(2){opacity:0}.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--k);padding:0 20px 10px;display:none}
.menu-open .nav{display:block}.menu-open{overflow:hidden}
.nav a{display:block;padding:14px 0;border-bottom:1px solid #ddd;font:700 14px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.tel{display:none}
@media(min-width:1000px){.burger{display:none}.nav{position:static;display:block;border:0;padding:0;background:none}.nav ul{display:flex;gap:26px}.nav a{padding:6px 0;border:0}.nav a:hover{color:var(--m)}.tel{display:inline-flex}}
/* bento hero */
.hero{padding:22px 0 50px}
.bento{display:grid;gap:2px;background:var(--k);border:2px solid var(--k);grid-template-columns:repeat(2,minmax(0,1fr))}
.bt{min-width:0;position:relative;background:var(--paper);overflow:hidden}
.bt--a{grid-column:1/-1;padding:26px 20px 28px}
.bt--b,.bt--f{grid-column:1/-1;min-height:200px}
.bt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt--t{padding:16px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.bt--t b{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.bt--t h3{font-size:clamp(22px,5vw,32px);margin:10px 0 4px}.bt--t p{margin:0;font-size:14px;line-height:1.4}
.bt--c{background:var(--c)}.bt--m{background:var(--m);color:#fff}.bt--y{background:var(--y)}.bt--k{background:var(--k);color:#fff}
.bt--k .btn{align-self:flex-start;margin-top:10px;box-shadow:3px 3px 0 var(--y)}
.hero h1{font-size:clamp(40px,10vw,86px);text-transform:uppercase;margin:6px 0 16px}
.hero h1 span{display:inline-block;padding:0 .12em;margin-right:.06em}
.h-c{background:var(--c)}.h-m{background:var(--m);color:#fff}.h-y{background:var(--y)}
.lead{font-size:18px;max-width:520px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 0}
.tag{position:absolute;left:0;bottom:0;background:var(--paper);border-top:2px solid var(--k);border-right:2px solid var(--k);padding:4px 10px;font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;z-index:1}
@media(min-width:900px){
 .bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(170px,auto))}
 .bt--a{grid-area:1/1/3/3;padding:40px 36px}
 .bt--b{grid-area:1/3/3/4;min-height:0}
 .bt--c{grid-area:1/4/2/5}.bt--m{grid-area:2/4/3/5}
 .bt--y{grid-area:3/1/4/2}.bt--f{grid-area:3/2/4/4;min-height:0}.bt--k{grid-area:3/4/4/5}
 .bt--t{padding:20px}
}
/* sections */
.sec{padding:64px 0}
.sec--s{background:var(--soft);border-top:2px solid var(--k);border-bottom:2px solid var(--k)}
.sh{margin-bottom:28px;display:grid;gap:10px;max-width:700px}
.sh h2{font-size:clamp(32px,6vw,56px);text-transform:uppercase}
.sh p{color:var(--mut);margin:0}
.bar{display:grid;grid-template-columns:repeat(4,1fr);height:8px}.bar i:nth-child(1){background:var(--c)}.bar i:nth-child(2){background:var(--m)}.bar i:nth-child(3){background:var(--y)}.bar i:nth-child(4){background:var(--k)}
/* chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 4px 8px 2px;margin-bottom:12px}
.chip{flex:none;border:2px solid var(--k);background:var(--paper);padding:7px 16px;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.chip.is-on{background:var(--k);color:#fff}
/* product grid */
.pds{display:grid;gap:2px;background:var(--k);border:2px solid var(--k);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.pds{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pd{background:var(--paper);display:flex;flex-direction:column;min-width:0}
.pd__img{position:relative;aspect-ratio:1;overflow:hidden;border-bottom:2px solid var(--k);display:block}.pd__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.pd:hover .pd__img img{transform:scale(1.05)}
.pd__tag{position:absolute;left:0;top:0;padding:3px 10px;font:700 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;background:var(--y)}
.pd[data-k=giay] .pd__tag{background:var(--c)}.pd[data-k=tem] .pd__tag{background:var(--m);color:#fff}.pd[data-k=bien] .pd__tag{background:var(--y)}
.pd__b{padding:12px 12px 14px;display:flex;flex-direction:column;flex:1;gap:2px}
.pd__m{font:400 11px var(--mono);color:var(--mut);letter-spacing:.06em}
.pd h3{font-size:19px;line-height:1.15;letter-spacing:-.01em}
.pd__s{font-size:13px;color:var(--mut);margin:2px 0 10px;line-height:1.4}
.pd__f{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:8px;flex-wrap:wrap}.pd__f small{display:block;font:400 11px var(--mono);color:var(--mut)}.pd__f b{font:700 18px var(--head)}
/* quote */
.q{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}@media(min-width:960px){.q{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}}
.box{background:var(--paper);border:2px solid var(--k);box-shadow:8px 8px 0 var(--k);padding:22px}
.box h3{font-size:26px;text-transform:uppercase;margin-bottom:6px}
.box>p{color:var(--mut);font-size:14px}
.fg{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}@media(min-width:560px){.fg{grid-template-columns:repeat(2,minmax(0,1fr))}.fg .full{grid-column:1/-1}}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld label,.fld legend{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:0}
.fld input:not([type=checkbox]):not([type=file]),.fld select,.fld textarea{width:100%;min-height:48px;background:var(--paper);border:2px solid var(--k);border-radius:0;padding:9px 12px}
.fld textarea{min-height:84px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--c);outline-offset:0}
.fld [aria-invalid=true]{border-color:var(--m);background:#fff0f7}
.err{color:#b00060;font-size:13px}
fieldset.fld{border:0;margin:0;padding:0;min-width:0}
.ex{display:flex;flex-wrap:wrap;gap:8px}
.ex label{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--k);padding:7px 12px;font:400 13px var(--mono);text-transform:none;letter-spacing:0;cursor:pointer}
.ex input{accent-color:var(--m);width:18px;height:18px}
.res{margin-top:18px;background:var(--k);color:#fff;padding:16px 18px;display:grid;gap:4px}
.res small{font:400 12px var(--mono);color:#cfcfcf}
.res b{font:700 clamp(28px,7vw,40px) var(--head);color:var(--y);line-height:1.1}
.res span{font:400 12px var(--mono);color:#cfcfcf}
.file{position:relative;display:block;border:2px dashed var(--k);padding:18px;text-align:center;background:var(--soft);cursor:pointer;min-width:0}
.file:hover,.file:focus-within{background:#fff8c9}.file.has-file{border-style:solid;background:#e3f6fd}
.file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file__t{display:block;font:700 16px var(--head)}.file__names{display:block;font:400 12px var(--mono);color:var(--mut);margin-top:4px;word-break:break-word}
.ok{margin-top:14px;padding:14px;background:var(--y);border:2px solid var(--k)}
.note{font:400 12px var(--mono);color:var(--mut);margin:10px 0 0}
.form .btn{margin-top:16px}
/* steps */
.steps{display:grid;gap:2px;background:var(--k);border:2px solid var(--k);grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:900px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps li{padding:20px 16px 24px;min-height:200px;display:flex;flex-direction:column}
.steps li:nth-child(1){background:var(--c)}.steps li:nth-child(2){background:var(--m);color:#fff}.steps li:nth-child(3){background:var(--y)}.steps li:nth-child(4){background:var(--k);color:#fff}
.steps b{font:700 44px var(--mono);line-height:1;margin-bottom:auto;padding-bottom:20px}.steps h3{font-size:22px;margin-bottom:6px}.steps p{margin:0;font-size:14px;line-height:1.45}
/* workshop */
.ws{display:grid;gap:2px;background:var(--k);border:2px solid var(--k);grid-template-columns:repeat(2,minmax(0,1fr))}
.ws figure{margin:0;position:relative;background:var(--paper);min-width:0;overflow:hidden}.ws img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.ws figcaption{position:absolute;left:0;bottom:0;background:var(--paper);border-top:2px solid var(--k);border-right:2px solid var(--k);padding:4px 10px;font:700 11px var(--mono);text-transform:uppercase}
.ws .w1{grid-column:1/-1}.ws .st{padding:20px;display:flex;flex-direction:column;justify-content:center;background:var(--y)}.ws .st b{font:700 44px var(--head);line-height:1}.ws .st span{font:400 13px var(--mono)}
@media(min-width:900px){.ws{grid-template-columns:repeat(4,minmax(0,1fr))}.ws .w1{grid-column:span 2;grid-row:span 2}.ws .w1 img{aspect-ratio:auto}}
.ft{background:var(--k);color:#d6d6d2;padding:0 0 22px}
.ft .bar{margin-bottom:44px}
.ft__g{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}@media(min-width:800px){.ft__g{grid-template-columns:1.3fr 1fr 1fr 1.3fr}}
.ft h3{font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.ft .logo span{color:#fff}.ft .logo small{color:#aaa}.ft .logo i{filter:none}
.ft li{margin-bottom:8px;font-size:15px}.ft a:hover{color:var(--y)}.ft p{font-size:15px;margin-top:12px}
.ft__b{border-top:1px solid #333;margin-top:28px;padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font:400 12px var(--mono);color:#999}.ft__b p{margin:0;font-size:12px}
/* detail */
.sp{padding:20px 0 60px}
.bc{display:flex;flex-wrap:wrap;gap:6px;font:400 12px var(--mono);color:var(--mut);margin-bottom:18px;text-transform:uppercase}.bc a{color:var(--k);font-weight:700;border-bottom:2px solid var(--c)}
.sp__g{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}@media(min-width:900px){.sp__g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}}
.gal__main{border:2px solid var(--k);box-shadow:8px 8px 0 var(--c)}.gal__main img{width:100%;aspect-ratio:1;object-fit:cover}
.gal__th{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px}
.gal__th button{padding:0;border:2px solid var(--k);background:var(--soft);cursor:pointer;overflow:hidden;opacity:.6}.gal__th button.is-on{opacity:1;box-shadow:3px 3px 0 var(--m)}.gal__th img{width:100%;aspect-ratio:1;object-fit:cover}
.sp__code{font:700 12px var(--mono);letter-spacing:.1em;background:var(--k);color:#fff;padding:3px 10px}
.sp h1{font-size:clamp(34px,6vw,56px);text-transform:uppercase;margin:12px 0 12px}
.tg{display:inline-block;background:var(--y);font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;margin-right:6px;border:2px solid var(--k)}
.sp__price{margin:14px 0;color:var(--mut);font:400 12px var(--mono)}.sp__price b{display:block;font:700 36px var(--head);color:var(--k)}
.sp__btns{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 22px}.sp__btns .btn{flex:1 1 150px}
.spec{width:100%;border-collapse:collapse;font-size:15px;border:2px solid var(--k)}.spec th,.spec td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--k);vertical-align:top}.spec th{width:38%;font:700 12px var(--mono);text-transform:uppercase;background:var(--soft);border-right:1px solid var(--k)}
.tabs{display:flex;gap:6px;margin-top:38px;overflow-x:auto;padding:2px 4px 6px 2px}
.tabs button{flex:none;border:2px solid var(--k);background:var(--paper);padding:8px 18px;font:700 13px var(--mono);text-transform:uppercase;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--k);color:#fff}
.tabp{padding:18px 0;max-width:760px}.tabp ul{padding-left:20px;list-style:square}.tabp li{margin-bottom:6px}
.sp h2{font-size:34px;text-transform:uppercase;margin:44px 0 16px}
.rel{display:grid;gap:2px;background:var(--k);border:2px solid var(--k);grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:900px){.rel{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rel a{display:block;background:var(--paper)}.rel img{width:100%;aspect-ratio:1;object-fit:cover;border-bottom:2px solid var(--k)}
.rel span{display:block;padding:10px 12px 12px;font:700 16px/1.2 var(--head)}.rel small{display:block;font:400 11px var(--mono);color:var(--mut)}.rel b{display:block;margin-top:4px;font:700 15px var(--head)}
.qs{margin-top:46px;max-width:760px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pd__img img,.btn{transition:none}}