/* S24/S11 — khối giới thiệu tính năng mới trên trang chủ (24/10): thiệp giấy, theo nghề, phong bì mừng cưới */
.hm-nw{--nw-r:20px}
.hm-nw-in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.hm-nw-in>*{min-width:0}
.hm-nw-badge{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;margin:0 0 14px;border-radius:999px;background:var(--gold-soft);color:var(--text);font:600 16px var(--font)}
.hm-nw .hm-fine{font-size:16px}.hm-nw-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}.hm-nw-list li{display:flex;gap:10px;align-items:flex-start;font-size:17px}.hm-nw-list li:before{content:"";flex:none;width:8px;height:8px;margin-top:10px;border-radius:50%;background:var(--accent)}
.hm-nw-seg{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.hm-nw-seg button{min-height:44px;min-width:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font:500 16px var(--font);cursor:pointer}
.hm-nw-seg button[aria-pressed=true],.hm-nw-seg button[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hm-nw-stage{display:grid;place-items:center;padding:28px 12px;border-radius:var(--nw-r);background:var(--blush);min-height:420px}
/* thiệp giấy */
.hm-pp{width:min(250px,64vw);aspect-ratio:105/148;position:relative;border-radius:6px;background:#FFFBF4;color:#4A2A22;box-shadow:0 2px 0 #fff inset,0 26px 50px rgba(80,30,20,.25),0 3px 8px rgba(80,30,20,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:9% 8%;text-align:center;transition:aspect-ratio .4s ease,width .4s ease}
.hm-pp[data-s=a5]{aspect-ratio:148/210;width:min(290px,72vw)}
.hm-pp:before{content:"";position:absolute;inset:7px;border:1px solid #C9A14F;border-radius:3px;pointer-events:none}
.hm-pp .k{font:600 16px var(--font);letter-spacing:.06em;text-transform:uppercase;color:#8A5A12;margin:0}
.hm-pp .n{font:600 clamp(24px,7vw,32px)/1.1 var(--font-display);margin:2px 0}.hm-pp .n i{display:block;font:italic 400 20px var(--font-display);color:#A62B2B}
.hm-pp .d{font:500 16px/1.4 var(--font);margin:0;color:#4A2A22}
.hm-pp .q{width:64px;height:64px;margin-top:6px;padding:4px;background:#fff;border:1px solid #E9D9BE;border-radius:6px}.hm-pp .q svg{width:100%;height:100%;display:block}
.hm-pp .c{font:500 16px var(--font);margin:0;color:#6A544D}
.hm-pp-cut{position:absolute;inset:-9px;pointer-events:none;border:1px dashed rgba(166,43,43,.55);border-radius:4px}
.hm-pp-note{margin:14px 0 0;font:500 16px var(--font);color:var(--text-2);text-align:center;display:flex;gap:8px;align-items:center;justify-content:center}.hm-pp-note:before{content:"";width:22px;border-top:1.5px dashed var(--accent)}
/* theo nghề */
.hm-jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 0}
.hm-jobs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:76px;padding:8px 4px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font:500 16px/1.2 var(--font);cursor:pointer}
.hm-jobs button svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hm-jobs button[aria-checked=true]{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.hm-jc{--jb:#FFFBF4;--ji:#4A2A22;--ja:#A62B2B;--jb2:#F7E9D6;width:min(290px,76vw);aspect-ratio:3/4;border-radius:10px;background:linear-gradient(180deg,var(--jb),var(--jb2));color:var(--ji);box-shadow:0 26px 50px rgba(80,30,20,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:9% 8%;text-align:center;position:relative;overflow:hidden;transition:background .35s,color .35s}
.hm-jc:before{content:"";position:absolute;inset:8px;border:1px solid var(--ja);opacity:.5;border-radius:5px}
.hm-jc .ic{width:54px;height:54px;color:var(--ja);transition:color .35s}.hm-jc .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hm-jc .k{font:600 16px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--ja);margin:0}
.hm-jc .n{font:600 clamp(24px,7vw,31px)/1.12 var(--font-display);margin:0}.hm-jc .l{font:500 16px/1.45 var(--font);margin:0;max-width:22ch}
.hm-jc-note{margin:14px 0 0;font:500 16px var(--font);color:var(--text-2);text-align:center;max-width:34ch}
/* phong bì */
.hm-bi{background:var(--surface-2)}
.hm-env{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:10px;cursor:pointer;border-radius:16px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.hm-env:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hm-env-b{position:relative;display:block;width:200px;height:134px;perspective:700px;filter:drop-shadow(0 10px 16px rgba(80,30,20,.25));margin-top:16px}.hm-env-b i{position:absolute;display:block}
.hm-env-b .bk{inset:0;background:#EAD9BC;border-radius:7px}.hm-env-b .pp{left:14px;right:14px;top:12px;bottom:12px;background:#FFFBF4;border-radius:4px;transition:transform .6s cubic-bezier(.3,.8,.3,1) .2s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.hm-env-b .ft{inset:0;background:#F3E6CE;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:7px}
.hm-env-b .fl{left:0;right:0;top:0;height:64%;background:#EAD9BC;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .55s cubic-bezier(.4,.1,.3,1),background .3s;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hm-env-b .sl{left:50%;top:56%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;font-size:16px;line-height:32px;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:opacity .25s,transform .35s}
.hm-env[aria-expanded=true] .fl{transform:rotateX(180deg);background:#F3E6CE}.hm-env[aria-expanded=true] .sl{opacity:0;transform:scale(.5)}.hm-env[aria-expanded=true] .pp{transform:translateY(-16px)}
.hm-env .t{font:700 18px var(--font);color:var(--text)}.hm-env .s{font:400 16px var(--font);color:var(--text-2)}
.hm-env-r{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s ease .15s,visibility 0s .75s;width:100%}.hm-env-r.on{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s ease .2s,visibility 0s}
.hm-env-r>div{min-height:0;overflow:hidden;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s ease .4s,transform .5s ease .4s}.hm-env-r.on>div{opacity:1;transform:none}
.hm-env-r p{margin:10px auto 0;max-width:30ch;font-size:16px}.hm-env-r .q{width:96px;height:96px;margin:12px auto 0;padding:6px;background:#fff;border:1px solid #E9D9BE;border-radius:8px}.hm-env-r .q svg{width:100%;height:100%;display:block}
.hm-env-r .ac{display:inline-block;margin-top:10px;padding:8px 14px;border-radius:10px;background:var(--surface);border:1px dashed var(--line-2);font:600 16px var(--font);color:var(--text-2)}
@media(max-width:900px){.hm-nw-in{grid-template-columns:1fr;gap:26px}.hm-nw-stage{min-height:380px;order:-1}.hm-jobs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.hm-jobs{grid-template-columns:repeat(2,1fr)}.hm-nw-stage{padding:22px 8px}}
@media(prefers-reduced-motion:reduce){.hm-pp,.hm-jc,.hm-env-b *,.hm-env-r,.hm-env-r>div{transition-duration:.01s!important;transition-delay:0s!important}}