
/* Bố cục: nền trắng dịu, mực đen, mỗi trang mở bằng một băng hoa văn mang màu của trà. Hai màu nhấn dùng tiết chế: đỏ son (logo, giá, dấu nhỏ) và xanh trầm (nút, nhãn, chân trang). Một look duy nhất, không có bản tối. */
:root{
  --giay:#FCFBF8; --giay2:#F2F0EA; --ke:#E0DCD2;
  --xanh:#2E4A3F; --xanh-dam:#22382F; --cham:#21324C;
  --muc:#1D1A16; --muc2:#5C5548;
  --son:#A8322A; --son-dam:#8C2620;
  --then:#1B1816; --canhgian:#5A281C; --nau:#74502F; --diep:#EEE8DA; --vang:#C49A22;
  --serif:"Cormorant Garamond","Noto Serif JP","Noto Serif",Georgia,serif;
  --body:"Lora","Noto Serif JP","Noto Serif",Georgia,serif;
  --sans:"Be Vietnam Pro","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--giay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='560' viewBox='0 0 1200 560'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.15' stop-color='rgb(46,74,63)' stop-opacity='.032'/%3E%3Cstop offset='.85' stop-color='rgb(46,74,63)' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 250 L90 200 L170 228 L280 130 L360 190 L450 150 L560 232 L660 168 L760 214 L880 120 L980 196 L1080 160 L1200 250 V560 H0Z' fill='none' stroke='none'/%3E%3Cpath d='M0 330 L110 286 L230 318 L340 250 L470 306 L590 262 L700 322 L820 268 L940 314 L1060 276 L1200 330 V560 H0Z' fill='none' stroke='none'/%3E%3Cpath d='M0 250 L90 200 L170 228 L280 130 L360 190 L450 150 L560 232 L660 168 L760 214 L880 120 L980 196 L1080 160 L1200 250' transform='translate(0 1.4)' stroke='rgba(255,255,255,.95)' stroke-width='1.6'/%3E%3Cpath d='M0 250 L90 200 L170 228 L280 130 L360 190 L450 150 L560 232 L660 168 L760 214 L880 120 L980 196 L1080 160 L1200 250' stroke='rgba(70,58,40,.085)' stroke-width='1.2'/%3E%3Cpath d='M0 330 L110 286 L230 318 L340 250 L470 306 L590 262 L700 322 L820 268 L940 314 L1060 276 L1200 330' transform='translate(0 1.4)' stroke='rgba(255,255,255,.95)' stroke-width='1.6'/%3E%3Cpath d='M0 330 L110 286 L230 318 L340 250 L470 306 L590 262 L700 322 L820 268 L940 314 L1060 276 L1200 330' stroke='rgba(70,58,40,.085)' stroke-width='1.2'/%3E%3Cpath d='M40 372 Q200 338 360 366 T700 360 T1040 366 T1200 372 M0 372 L40 372' transform='translate(0 1.2)' stroke='rgba(255,255,255,.95)' stroke-width='1.2'/%3E%3Cpath d='M40 372 Q200 338 360 366 T700 360 T1040 366 T1200 372 M0 372 L40 372' stroke='rgba(70,58,40,.06)' stroke-width='1'/%3E%3Cpath d='M0 398 Q180 366 380 392 T720 388 T1060 394 T1200 398' transform='translate(0 1.2)' stroke='rgba(255,255,255,.95)' stroke-width='1.2'/%3E%3Cpath d='M0 398 Q180 366 380 392 T720 388 T1060 394 T1200 398' stroke='rgba(70,58,40,.06)' stroke-width='1'/%3E%3Cpath d='M0 424 Q220 394 420 420 T760 414 T1090 422 T1200 424' transform='translate(0 1.2)' stroke='rgba(255,255,255,.95)' stroke-width='1.2'/%3E%3Cpath d='M0 424 Q220 394 420 420 T760 414 T1090 422 T1200 424' stroke='rgba(70,58,40,.06)' stroke-width='1'/%3E%3Cpath d='M0 450 Q240 424 460 446 T800 442 T1110 450 T1200 450' transform='translate(0 1.2)' stroke='rgba(255,255,255,.95)' stroke-width='1.2'/%3E%3Cpath d='M0 450 Q240 424 460 446 T800 442 T1110 450 T1200 450' stroke='rgba(70,58,40,.06)' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") center top/1200px 560px repeat;color:var(--muc);font-family:var(--sans);font-size:16px;line-height:1.65;margin:0;overflow-wrap:break-word}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.1rem)}
h2{font-size:clamp(1.9rem,4.2vw,2.8rem)}
h3{font-size:1.55rem;font-weight:600}
p{font-family:var(--body);line-height:1.6;margin:0;max-width:66ch}
a{color:inherit;text-decoration-color:var(--son);text-underline-offset:3px}
.eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--xanh);font-weight:500}
.eyebrow::before{content:"";display:inline-block;width:7px;height:7px;background:var(--son);margin-right:10px;vertical-align:1px}
.tet .eyebrow::before{background:currentColor}
.note{font-size:.82rem;color:var(--muc2)}
.lede{font-size:1.12rem}
.it{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--son);font-size:1.6rem;line-height:1.3}
.price{color:var(--son);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.stack{display:flex;flex-direction:column;gap:18px}
.sec{padding-block:56px;border-top:1px solid var(--ke)}
.sec.first{border-top:0}
.band{height:18px;display:block;width:100%}
.btn{display:inline-block;font:inherit;font-weight:500;padding:12px 22px;border:1px solid var(--xanh);background:var(--xanh);color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--xanh-dam)}
.btn.sm{padding:6px 14px;font-size:.85rem;white-space:nowrap}
.btn.alt{background:transparent;color:var(--xanh)}
.btn.alt:hover{background:var(--giay2)}
.btn.son{background:var(--son);border-color:var(--son)}
.btn.son:hover{background:var(--son-dam)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--son);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* đầu trang */
header.top{position:sticky;top:env(safe-area-inset-top,0px);background:var(--giay);border-bottom:1px solid var(--ke);z-index:5}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:12px}
.wm{display:block;width:104px;height:31px;color:var(--son)}
.brand{display:flex;flex-direction:column;gap:5px;text-decoration:none}
.lockup{display:flex;align-items:flex-end;gap:10px}
.brand .wm{--then-cai:var(--cham);width:136px;height:41px}
/* Nét then cài: thanh chàm nằm trong chữ H rồi trượt sang cài vào chữ E */
.cai{animation:cai 1.4s cubic-bezier(.6,0,.2,1) .45s backwards}
.brand:hover .cai{animation:cai2 1.3s cubic-bezier(.6,0,.2,1)}
@keyframes cai{0%,25%{transform:translateX(-12.5px)}82%{transform:translateX(1.2px)}100%{transform:translateX(0)}}
@keyframes cai2{0%{transform:translateX(0)}35%,50%{transform:translateX(-12.5px)}88%{transform:translateX(1.2px)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.cai,.brand:hover .cai{animation:none}}
.col{display:block;width:99px;height:10px;color:var(--cham);margin-bottom:1px}
.tag{font-family:"Playfair Display","Noto Serif JP",var(--body);font-style:normal;font-weight:500;font-size:.8rem;line-height:1.3;letter-spacing:.01em;color:var(--canhgian)}
footer .tag{color:#E9E1D0}
.don-n{color:var(--son);font-weight:600}
.btn.da-them,.btn.da-them:hover{background:var(--son);border-color:var(--son);color:#fff}
.lang{display:inline-flex;gap:10px;font-size:.8rem;padding-left:14px;border-left:1px solid var(--ke);align-items:center}
.lang a{border-bottom:0!important;color:var(--muc2)}
.lang a[aria-current]{color:var(--son);font-weight:600}
.hero-bg{position:relative;overflow:hidden}
.hero-bg>.wrap{position:relative;z-index:1}
.hero-bg>.band{position:relative;z-index:1}
.scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;opacity:.45;z-index:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 62%);mask-image:linear-gradient(to bottom,transparent 0,#000 62%);pointer-events:none}
.may{animation:may 90s linear infinite alternate}
.may.m2{animation-duration:130s;animation-direction:alternate-reverse}
.may.m3{animation-duration:160s}
@keyframes may{from{transform:translateX(-70px)}to{transform:translateX(90px)}}
@media (prefers-reduced-motion:reduce){.may{animation:none}}
.six{display:flex;height:30px;margin-top:56px}
.six svg{flex:1;height:100%;display:block;min-width:0}
.de{display:block;width:100%;height:84px}
.loi{font-family:var(--serif);font-style:italic;font-size:1.15rem;margin-top:10px;max-width:none}
.don-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;gap:10px;align-items:center;background:var(--son);color:#fff;text-decoration:none;padding:12px 20px;font-weight:500;box-shadow:0 8px 20px -8px rgba(29,26,22,.55);white-space:nowrap;max-width:calc(100% - 32px)}
.don-bar b{font-weight:600;background:#fff;color:var(--son);padding:1px 9px;border-radius:999px;font-size:.85rem}
.don-bar:hover{background:var(--son-dam)}
.don-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ke)}
.don-row small{display:block;color:var(--muc2);font-size:.85rem}
.don-row input{width:74px}
.don-row .x{font:inherit;font-size:.85rem;background:none;border:0;color:var(--muc2);text-decoration:underline;cursor:pointer;padding:6px 0}
#don{max-width:760px;border-top:1px solid var(--ke)}
#don .sum{border-top:0}
button.btn{font-family:var(--sans);font-size:1rem}
button.btn.sm{font-size:.85rem}
@media (max-width:760px){.don-row{grid-template-columns:minmax(0,1fr) auto}.don-row>div:first-child{grid-column:1/-1}.don-row .price{text-align:right}.don-row .x{grid-column:1/-1;justify-self:end}}
nav.main{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.92rem}
nav.main a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav.main a[aria-current="page"]{border-bottom-color:var(--son)}

/* trang chủ */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-block:56px}
.hero>*{min-width:0}
.cans{display:flex;gap:10px;align-items:flex-start;background:var(--giay2);padding:28px 18px 16px}
.cans figure{margin:0;flex:1;min-width:0;text-align:center}
.cans svg{width:100%;height:auto;display:block}
.cans figcaption{font-size:.72rem;line-height:1.3;margin-top:8px}
.cans figcaption b{display:block;font-weight:600}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ke)}
.doors a{padding:26px 22px;text-decoration:none;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--ke)}
.doors a:last-child{border-right:0}
.doors a:hover{background:var(--giay2)}
.doors h3{color:var(--xanh)}
.doors .go{color:var(--son);font-weight:500;font-size:.9rem;margin-top:auto}
.code{background:var(--giay2);padding:26px 24px;font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.6rem)}
dl.read{margin:0;display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--ke)}
dl.read dt,dl.read dd{margin:0;padding:14px 0;border-bottom:1px solid var(--ke)}
dl.read dt{color:var(--son);font-weight:600;font-size:1.15rem}
.list{border-top:1px solid var(--ke)}
.list .item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--ke);text-decoration:none;flex-wrap:wrap}
.list .item h3 small{display:block;font-family:var(--sans);font-size:.82rem;color:var(--muc2);margin-top:4px}
a.item:hover h3{color:var(--son)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.three>*{min-width:0}
.three>div{border-top:2px solid var(--son);padding-top:14px}
.three h3{margin-bottom:8px}
.cu{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:900px){.cu{grid-template-columns:repeat(2,minmax(0,1fr))}}
.am{background:none;border:0;padding:0;color:#C9C2B2;font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.anh.hop{width:100%;aspect-ratio:4/3;background:#EAE1CE;border:0;margin-bottom:12px}
.anh.hop img{object-fit:contain;padding:10px}
.canh{border-left:2px solid var(--son);padding-left:12px;color:var(--muc)}
footer .canh-f{margin:18px 0 0;font-size:.85rem;color:#C9C2B2}
footer p:not(.loi),footer .am{font-family:var(--sans)}
.xong{border:1px solid var(--xanh);padding:20px;display:grid;gap:12px;background:#fff}
.xong h2{margin:0}
.xong .ma{font-family:var(--sans);font-size:1.4rem;font-weight:600;color:var(--son);letter-spacing:.04em}
.xong dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.xong dt{color:var(--muc2)}
.xong dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.xong-mon{margin:0;padding-left:18px}
.xong img{width:220px;max-width:100%;height:auto;border:1px solid var(--ke)}
body{padding-bottom:76px}
.lk{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid var(--ke);padding:8px 0}
.lk code{overflow-wrap:anywhere;font-size:.85rem}
@media(max-width:600px){.lk{grid-template-columns:1fr}}
.anh3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.anh{position:relative;aspect-ratio:1;border:1px solid var(--ke);background:var(--giay2);padding:0;cursor:zoom-in;overflow:hidden;display:grid;place-items:center;font:inherit;color:var(--muc2)}
.anh span{font-family:var(--sans);font-size:.72rem;padding:4px;text-align:center;line-height:1.3}
.anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anh:hover,.anh:focus-visible{border-color:var(--son)}
.anh3.nho{grid-template-columns:repeat(3,46px);gap:4px;margin-top:6px}
.anh3.nho .anh span{font-size:.58rem;padding:1px}
body[data-page] .anh:not(:has(img)){display:none}
.zoom{position:fixed;inset:0;z-index:100;background:rgba(27,24,22,.92);display:flex;align-items:center;justify-content:center;gap:4px;padding:12px}
.zoom figure{margin:0;max-width:min(84vw,900px);text-align:center}
.zoom img{max-width:100%;max-height:80vh;display:block;margin:auto}
.zoom .zt{width:min(70vw,520px);aspect-ratio:1;background:var(--giay2);color:var(--muc);display:grid;place-content:center;gap:6px;font-size:1.5rem}
.zoom .zt small{font-size:.8rem;color:var(--muc2);font-family:var(--sans)}
.zoom figcaption{color:#E9E1D0;margin-top:10px;font-size:.9rem;font-family:var(--sans)}
.zoom button{background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:8px 10px}
.zoom .zx{position:absolute;top:6px;right:10px}
.dsu{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.dsu li{padding-left:18px;position:relative}
.dsu li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--cham)}
footer .moi{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
footer .moi .btn{background:transparent;border:1px solid #E9E1D0;color:#E9E1D0}
footer .moi .btn:hover{background:#E9E1D0;color:var(--xanh-dam)}
footer .mxh{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.92rem}
footer .pending{color:#C9C2B2;border-color:#8A9A90}
.pending{border:1px dashed var(--muc2);padding:10px 14px;font-size:.85rem;color:var(--muc2)}

/* bảng giá */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--ke);vertical-align:baseline}
th{font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muc2)}
td.r,th.r{text-align:right;padding-right:0}
tr.grp td{padding-top:30px}
.grp-t{display:block;font-family:var(--serif);font-size:clamp(1.55rem,2.6vw,2rem);font-weight:600;line-height:1.2;color:var(--xanh-dam);border-left:4px solid var(--son);padding-left:12px;margin-bottom:6px}

/* trang trà */
.prod{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;padding-block:44px;align-items:start}
.prod>*{min-width:0}
.plate{background:var(--giay2);padding:36px;display:flex;justify-content:center}
.plate svg{width:min(100%,300px);height:auto}
.sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sizes .price{white-space:normal}
.sizes label{border:1px solid var(--ke);padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.sizes input{position:absolute;opacity:0}
.sizes label:has(input:checked){border-color:var(--xanh);background:var(--giay2)}
.sizes label:has(input:focus-visible){outline:2px solid var(--son);outline-offset:2px}
.q{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.q legend{font-family:var(--serif);font-size:1.45rem;font-weight:600;padding:0;margin-bottom:8px}
.q label{border:1px solid var(--ke);padding:11px 14px;cursor:pointer;display:flex;gap:10px;align-items:center}
.q label:has(input:checked){border-color:var(--xanh);background:var(--giay2)}
.q input[type=radio]{accent-color:var(--xanh);margin:0}
.q .bud{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.art h2{margin-top:22px}
.eco{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.eco>section{min-width:0;border-top:1px solid var(--ke);padding-block:30px;display:flex;flex-direction:column;gap:12px}
.eco h2{color:var(--xanh)}
@media (max-width:760px){.eco{grid-template-columns:1fr}}
.refs{list-style:none;margin:0;padding:0;border-top:1px solid var(--ke);max-width:780px}
.refs li{padding:14px 0;border-bottom:1px solid var(--ke);display:flex;flex-direction:column;gap:4px}
.refs a{font-family:var(--body);line-height:1.5;text-decoration-color:var(--son);text-underline-offset:3px}
.refs span{font-size:.82rem;color:var(--muc2)}
.rec{border:1px solid var(--xanh);padding:20px 22px;display:flex;flex-direction:column;gap:10px;background:#fff}
.rec.alt{border-color:var(--ke);background:transparent}
.rec ul{margin:0;padding-left:18px;font-family:var(--body);line-height:1.6}
.rec li::marker{color:var(--son)}
.qty{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qty input{width:84px}
input,select,textarea{font:inherit;color:var(--muc);background:#fff;border:1px solid var(--ke);padding:10px 12px;border-radius:0;max-width:100%}
.sum{border-top:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:14px 0;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between;gap:16px}
.sum .tot{font-weight:600;font-size:1.1rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps>div{min-width:0;border-top:2px solid var(--xanh);padding-top:12px}
.steps b{display:block;margin-bottom:4px}

/* quà Tết */
.tet{background:var(--son);color:#F7EEDF;padding-block:64px 0}
.tet h1{color:#F7EEDF}
.tet .eyebrow{color:#F1D9C8}
.gift{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding-block:36px;border-top:1px solid var(--ke)}
.gift>*{min-width:0}
.box{background:var(--giay2);padding:28px;display:flex;justify-content:center}
.box .in{display:flex;gap:10px;padding:16px;background:#D9C7A0;box-shadow:0 10px 14px -8px rgba(29,26,22,.45)}
.box .in.wood{background:#C9A873}
.box{max-width:100%}
.box .in{max-width:100%;min-width:0}
.box .in svg{width:86px;flex:0 1 86px;min-width:0;height:auto;display:block}
.gift .price{white-space:normal}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.two>*{min-width:0}
ul.plain{margin:6px 0 0;padding-left:18px}
ul.plain li::marker{color:var(--son)}
form.f{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:760px}
form.f label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;min-width:0}
form.f .full{grid-column:1/-1}
.ok{border:1px solid var(--xanh);padding:16px 18px;background:var(--giay2)}
footer{background:var(--xanh-dam) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='60' viewBox='0 0 44 60'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='rgba(255,255,255,.055)' transform='translate(0 1.3)'%3E%3Cpath d='M0 60 Q22 -16 44 60M22 60V24M-22 60 Q0 22 22 60M22 60 Q44 22 66 60'/%3E%3C/g%3E%3Cg stroke='rgba(0,0,0,.3)'%3E%3Cpath d='M0 60 Q22 -16 44 60M22 60V24M-22 60 Q0 22 22 60M22 60 Q44 22 66 60'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left bottom/44px 60px repeat;color:#E9E1D0;margin-top:56px;padding-block:40px;font-size:.9rem}
footer .wm{color:#E9E1D0}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;margin-top:20px}
footer .cols>*{min-width:0}
footer a{color:#E9E1D0}
.sel{user-select:all}

@media (max-width:760px){
  .hero,.prod,.gift,.two,form.f{grid-template-columns:1fr}
  .doors,.three,footer .cols{grid-template-columns:1fr}
  .doors a{border-right:0;border-bottom:1px solid var(--ke)}
  .doors a:last-child{border-bottom:0}
  .steps{grid-template-columns:1fr 1fr}
  dl.read{grid-template-columns:90px 1fr}
  .sec{padding-block:40px}
  .cans{gap:6px;padding:20px 10px 12px}
  header.top{position:static}
  h1{font-size:clamp(1.8rem,7.6vw,2.15rem)}
  table.gia,table.gia tbody{display:block}
  table.gia thead{display:none}
  table.gia tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ke)}
  table.gia td{display:block;border:0;padding:0;text-align:left}
  table.gia td:nth-child(1){grid-column:1;grid-row:1;font-weight:500}
  table.gia td:nth-child(2){grid-column:1;grid-row:2;font-size:.86rem;color:var(--muc2)}
  table.gia td:nth-child(3){grid-column:2;grid-row:1;text-align:right}
  table.gia td:nth-child(4){grid-column:2;grid-row:2;text-align:right}
  table.gia tr.grp{display:block;border-bottom:0;padding:22px 0 4px}
  table.gia tr.grp td{padding:0}
  .box{padding:18px}
  .box .in{gap:6px;padding:10px}
  .row .btn{flex:1 1 auto;text-align:center}
  .cans figcaption span{display:none}
}

