/* Kết nối hạnh phúc · kiểu chung cho hai thiệp: trắng ngà, beige, đen, vàng champagne. Hai phông: Prata (tiêu đề), Be Vietnam Pro (nội dung). */
@font-face{font-family:Prata;font-weight:400;font-display:swap;src:url(fonts/Prata-400-vietnamese.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:Prata;font-weight:400;font-display:swap;src:url(fonts/Prata-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-400-vietnamese.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-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:500;font-display:swap;src:url(fonts/BeVietnamPro-500-vietnamese.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-weight:500;font-display:swap;src:url(fonts/BeVietnamPro-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(fonts/BeVietnamPro-600-vietnamese.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-weight:600;font-display:swap;src:url(fonts/BeVietnamPro-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--nga:#F6F1E9;--giay:#FDFBF7;--be:#E6DDCD;--den:#151413;--muc:#2E2B27;--nhat:#7C756A;--kim:#AE8F5B;--kim-nhat:#D9C8A3}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100dvh;background:var(--nga);color:var(--muc);font:400 16px/1.8 "Be Vietnam Pro",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#FBF8F2 0%,var(--nga) 45%,#EFE7DA 100%)}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
p{margin:0}

/* tờ thiệp */
.to{background:var(--giay);border:1px solid var(--be);box-shadow:0 34px 60px -44px rgba(21,20,19,.45);padding:46px 28px 44px;display:flex;flex-direction:column;text-wrap:pretty}
.nhan{margin:0;text-wrap:balance;font-size:11px;font-weight:600;letter-spacing:.26em;line-height:1.7;text-transform:uppercase;color:var(--kim)}
.vach{display:block;width:40px;height:1px;background:var(--kim)}

/* ba món quà: số to, tên rõ, kẻ mảnh */
.ds-qua{list-style:none;margin:0;padding:0;border-top:1px solid var(--be)}
.ds-qua li{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:6px;padding:17px 0;border-bottom:1px solid var(--be)}
.ds-qua .so{font:400 27px/1 Prata,serif;color:var(--kim)}
.ds-qua .ten{font-size:16px;font-weight:500;line-height:1.5;color:var(--den);text-wrap:balance}

.nut{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;font-size:12.5px;font-weight:600;letter-spacing:.2em;line-height:1.3;text-transform:uppercase;text-decoration:none;text-align:center;border-radius:1px}
.nut-den{background:var(--den);color:#FBF8F2}
.nut-vien{border:1px solid var(--den);color:var(--den)}
.nut:disabled{opacity:.4;cursor:default}
:focus-visible{outline:2px solid var(--kim);outline-offset:3px}
.bao{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,16px);max-width:min(88vw,360px);padding:13px 18px;background:var(--den);color:#FBF8F2;font-size:14px;line-height:1.5;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9}
.bao.hien{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}}