@font-face{font-family:Zalando;font-weight:400;font-display:swap;src:url(assets/fonts/zalando-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:Zalando;font-weight:400;font-display:swap;src:url(assets/fonts/zalando-400-latin-ext.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:Zalando;font-weight:400;font-display:swap;src:url(assets/fonts/zalando-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+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:Zalando;font-weight:500;font-display:swap;src:url(assets/fonts/zalando-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:Zalando;font-weight:500;font-display:swap;src:url(assets/fonts/zalando-500-latin-ext.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:Zalando;font-weight:500;font-display:swap;src:url(assets/fonts/zalando-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+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:Zalando;font-weight:600;font-display:swap;src:url(assets/fonts/zalando-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:Zalando;font-weight:600;font-display:swap;src:url(assets/fonts/zalando-600-latin-ext.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:Zalando;font-weight:600;font-display:swap;src:url(assets/fonts/zalando-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+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:Zalando;font-weight:700;font-display:swap;src:url(assets/fonts/zalando-700-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:Zalando;font-weight:700;font-display:swap;src:url(assets/fonts/zalando-700-latin-ext.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:Zalando;font-weight:700;font-display:swap;src:url(assets/fonts/zalando-700-latin.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}

:root{--ink:#282828;--paper:#FFFCF8;--sand:#FEF1E5;--red:#F24938;--green:#03625D;--blue:#1685D8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.dg-open{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Zalando,system-ui,sans-serif}
img{display:block;max-width:none}
button{font:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol{margin:0;padding:0;font-weight:inherit;font-size:inherit}
ul,ol{list-style:none}
b,strong{font-weight:700}
.blue{color:var(--blue)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.imgbtn{display:block;transition:transform .18s ease}
.imgbtn img{width:100%;height:100%}
@media (hover:hover){.imgbtn:hover{transform:translateY(-3px) rotate(-1deg)}}
.imgbtn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.imgbtn{transition:none}}

/* Desktop: toạ độ thiết kế 1920, co giãn theo bề ngang trang */
@media (min-width:1024px){
  /* Khung tối đa 1344px = thiết kế 1920 ở tỉ lệ 70%, Dang chốt 01/11 */
  html,body{overflow-x:clip}
  .page{position:relative;max-width:1344px;margin:0 auto;aspect-ratio:1920/9759;container-type:inline-size}
  /* Nội dung giữ trong khung, nền tràn hết bề ngang màn hình */
  .ab.hd-bg,.ab.b-bg,.ab.bg-wave{left:calc(50% - 50vw);width:100vw}
  .page>*{--u:calc(100cqw / 1920)}
  .ab{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
  .tl-line{background:#FFE6C7}
  .tx{height:auto;font-kerning:none;font-size:calc(var(--fs) * var(--u));line-height:calc(var(--lh) * var(--u));font-weight:var(--wt);white-space:nowrap}
  .ph{object-fit:cover;border-radius:calc(var(--r) * var(--u))}
  .hd-bg{background:var(--sand)}
  .hero{overflow:hidden;border-radius:calc(45 * var(--u));background:#54636C}
  .hero-kv{position:absolute;left:0;top:calc(-16 * var(--u));width:100%;height:calc(1164 * var(--u));object-fit:cover}
  .hero-ov{position:absolute;inset:0;background:rgba(30,30,30,.95)}
  .b-bg{background:var(--sand)}
  .f-s{display:contents}
  .h-btn,.hd-cta,.b-btn,.a-btn{z-index:2}
}

/* Mobile và tablet: cùng DOM, chảy dọc */
@media (max-width:1023.98px){
  .anchor{display:block;scroll-margin-top:72px}
  .bg,.hd-bg,.b-bg{display:none}
  br{display:none}
  .page{overflow:clip}
  .ab{position:relative}
  .tx{font-size:calc(var(--fs) * 1px);line-height:1.3;font-weight:var(--wt)}
  img{height:auto;max-width:100%}
  h2{text-wrap:balance}
  p{text-wrap:pretty}
  main section{padding-inline:20px}

  .hd{position:sticky;top:0;z-index:20;background:var(--sand);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 16px}
  .hd-logo{width:112px;min-height:44px;display:flex;align-items:center}
  .hd-logo img{height:auto}
  .hd-nav{grid-column:2;grid-row:1;display:flex;gap:24px;justify-content:center}
  .nav-a{font-size:13px;line-height:44px;min-height:44px}
  .hd-cta{grid-column:3;width:136px}
  .hd-cta img{height:auto}

  .hero-s{position:relative;margin:16px 16px 0;padding:56px 16px 40px;border-radius:24px;overflow:hidden;text-align:center;background:#54636C;display:flex;flex-direction:column;align-items:center;gap:0;padding-inline:16px}
  .hero{position:absolute;inset:0;border-radius:24px;overflow:hidden}
  .hero-kv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero-ov{position:absolute;inset:0;background:rgba(30,30,30,.95)}
  .h-wm{width:46%;max-width:240px;margin-bottom:8px}
  .h-badge{position:absolute;width:76px;left:5%;top:62px;z-index:1}
  .h-title{width:92%;max-width:520px}
  .h-desc{font-size:15px;margin:12px 0 24px;position:relative}
  .h-btn{width:190px}
  .h-btn img{height:auto}

  .about{padding-top:52px;padding-bottom:48px;display:flex;flex-direction:column}
  .ttl{position:relative;padding-top:30px;margin-bottom:20px}
  .a-tag{position:absolute;left:0;top:0;width:130px;z-index:1}
  .a-h{display:flex;align-items:flex-end;gap:10px}
  .a-wm{width:164px}
  .a-lagi{font-size:32px;line-height:1.1}
  .a-p1,.a-p2{font-size:15px;line-height:1.5}
  .a-p1 b:first-child{display:block}
  .a-line{width:100%;margin:18px 0}
  .a-btn{width:180px;margin-top:20px}
  .a-btn img{height:auto}
  .a-photos{position:relative;display:grid;grid-template-columns:1fr 1.25fr;grid-template-rows:1fr 1fr;gap:10px;margin-top:32px;aspect-ratio:1.05}
  .a-photos .ph{width:100%;height:100%;object-fit:cover;border-radius:16px}
  .ph-c{grid-column:2;grid-row:1/3}
  .a-spark{position:absolute;width:32px;left:-10px;bottom:-14px}

  .ben{background:var(--sand);padding-block:48px}
  .b-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin-bottom:36px}
  .b-den,.b-nhan{font-size:24px;line-height:1.2}
  .b-wm{width:112px}
  .cards{display:grid;gap:44px 16px;grid-template-columns:minmax(0,1fr)}
  .card{position:relative;background:#fff;border-radius:20px;padding:14px 14px 20px}
  .c-bg{display:none}
  .c-ph{width:100%;height:auto;aspect-ratio:402/231;object-fit:cover;border-radius:12px}
  .c-tag{position:absolute;left:-6px;top:-24px;width:auto;height:44px;z-index:1}
  .c-t{font-size:19px;margin-top:14px}
  .c-p{font-size:15px;line-height:1.45;margin-top:6px;color:var(--ink)}
  .b-btn{width:min(320px,86%);margin:40px auto 0}
  .b-btn img{height:auto}

  .tl{padding-block:52px 24px;position:relative}
  .tl-title{font-size:25px;margin-bottom:32px}
  .tl-line{display:none}
  .tl-list{position:relative;display:grid;gap:30px;padding-left:64px}
  .tl-list::before{content:"";position:absolute;left:27px;top:6px;bottom:6px;width:2px;background:#FFE6C7}
  .tl-i{position:relative}
  .tl-ic{position:absolute!important;left:-64px;top:0;width:56px;height:36px!important;object-fit:contain}
  .tl-t{height:30px;margin-bottom:8px}
  .tl-h{font-size:16px;text-align:left!important}
  .tl-p{font-size:14px;line-height:1.45;margin-top:6px;text-align:left!important}

  .pa{padding-block:48px 16px;text-align:center}
  .pa-top{display:grid;gap:28px;margin-bottom:36px}
  .pa-col{display:flex;flex-direction:column;align-items:center;gap:14px}
  .pa-h{font-size:20px}
  .pa-org{width:96px}
  .pa-tt{width:230px}
  .pa-h2{margin-bottom:22px}
  .pa-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 22px}
  .p-logo{height:38px!important;width:auto;object-fit:contain}

  .meet{padding-block:40px;text-align:center}
  .m-h{font-size:32px;margin-bottom:30px}
  .m-cols{display:grid;gap:30px}
  .m-c{display:flex;flex-direction:column;align-items:center;gap:6px}
  .m-tag{height:48px}
  .m-b{font-size:22px;margin-top:6px}
  .m-s{font-size:15px;line-height:1.45}

  .lnm{padding-block:40px;display:flex;flex-direction:column}
  .l-tag{width:136px;margin-bottom:-8px;z-index:1}
  .l-h{font-size:32px;line-height:1.2}
  .l-p{font-size:15px;line-height:1.5;margin-top:14px}
  .l-rows{display:grid;gap:20px;margin:26px 0}
  .s-r{position:relative;display:grid;grid-template-columns:116px 1fr;align-items:center;gap:12px;min-height:46px}
  .s-bar{position:absolute!important;left:0;bottom:2px;width:116px;height:24px!important}
  .s-n{font-size:27px;line-height:1.1;text-align:center!important;z-index:1}
  .s-c{font-size:14px;line-height:1.3;grid-column:2}
  .l-ph{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:20px}

  .ft{background:var(--sand);padding:36px 20px 24px}
  .ft-art{position:relative;display:flex;flex-direction:column;align-items:center}
  .f-kn{width:200px}
  .f-blink{position:absolute;width:30px;left:calc(50% + 100px);top:-16px}
  .f-shaker{position:absolute;width:64px;left:0;top:64px}
  .f-rolling{position:absolute;width:64px;right:0;top:44px}
  .f-logo{width:min(280px,76%);margin-top:18px}
  .f-line{width:100%;margin:22px 0}
  .ft-info{display:grid;gap:16px}
  .f-lnm{width:60px}
  .f-org{font-size:14px}
  .f-sm{font-size:13px;line-height:1.5;margin-top:3px}
  .f-soc{display:grid;gap:10px}
  .f-s{display:flex;align-items:center;gap:10px;min-height:32px}
  .f-ic{width:24px;height:24px!important}
  .f-st{font-size:13px}
  .f-copy{font-size:12px;margin-top:4px}
}

@media (max-width:559.98px){.hd{grid-template-columns:1fr auto}.hd-nav{display:none}.hd-cta{grid-column:2}}
@media (min-width:600px) and (max-width:1023.98px){
  main section{padding-inline:40px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-cols,.pa-top{grid-template-columns:repeat(2,1fr)}
  .m-cols{grid-template-columns:repeat(3,1fr)}
  .l-ph{max-width:480px}
  .a-photos{max-width:560px}
  .hero-s{padding-block:88px 72px}
  .h-badge{left:12%;top:120px}
  .ft{padding-inline:40px}
}

/* Popup đăng ký: khung thiết kế 1500 x 1900 */
.dg{--fu:calc((100vw - 24px) / 1500);width:calc(1500 * var(--fu));max-width:none;max-height:calc(100dvh - 16px);margin:auto;padding:calc(52 * var(--fu)) calc(84 * var(--fu)) calc(56 * var(--fu));border:0;border-radius:calc(70 * var(--fu));background:#FCF9F4;color:var(--ink);overflow:auto}
.dg::backdrop{background:rgba(23,23,23,.62)}
@media (min-width:1024px){.dg{--fu:min(.5px,calc((100vh - 24px) / 1900))}}
@media (max-width:1023.98px){.dg{--fu:.5px;width:calc(100vw - 24px);padding:18px 16px 22px;border-radius:20px}}
.dg-x{position:absolute;right:10px;top:8px;width:40px;height:40px;font-size:28px;line-height:40px;text-align:center;color:var(--ink)}
.dg-head{display:flex;align-items:center;gap:calc(92 * var(--fu));margin-bottom:calc(75 * var(--fu))}
.dg-logo{width:calc(427 * var(--fu));height:auto;flex:none}
.dg-h{display:flex;align-items:flex-end;gap:calc(28 * var(--fu));margin-bottom:calc(24 * var(--fu))}
.dg-h img{height:auto}
.dg-h img:nth-of-type(1){width:calc(379 * var(--fu))}
.dg-h img:nth-of-type(2){width:calc(401 * var(--fu))}
.dg-ttl p{font-size:max(13px,calc(26 * var(--fu)));font-weight:600;line-height:1.3}
form{display:grid;gap:calc(40 * var(--fu))}
.fd{display:block;border:0;margin:0;padding:0;min-width:0}
.fl{display:block;font-size:max(13px,calc(26 * var(--fu)));font-weight:600;margin-bottom:calc(16 * var(--fu));padding:0}
.req{color:var(--red)}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:calc(35 * var(--fu))}
.in{position:relative;display:block}
.in img{position:absolute;left:calc(38 * var(--fu));top:50%;transform:translateY(-50%);width:calc(44 * var(--fu));height:calc(44 * var(--fu));min-width:18px;min-height:18px;object-fit:contain;pointer-events:none}
.in input,.in select{width:100%;height:max(44px,calc(95 * var(--fu)));padding:0 calc(36 * var(--fu)) 0 max(38px,calc(118 * var(--fu)));border:1px solid #EFE7DB;border-radius:calc(14 * var(--fu));background:#FCFAF8;color:var(--ink);font:500 max(16px,calc(26 * var(--fu)))/1.2 Zalando,system-ui,sans-serif;appearance:none}
.in input::placeholder{color:#857F77}
.in input:focus,.in select:focus{outline:2px solid #FFBD17;outline-offset:0;border-color:#FFBD17}
.sel::after{content:"";position:absolute;right:calc(44 * var(--fu));top:50%;width:calc(23 * var(--fu));height:calc(13 * var(--fu));min-width:12px;min-height:7px;transform:translateY(-50%);background:url(assets/chev.svg) center/contain no-repeat;pointer-events:none}
.in select:disabled{opacity:.6}
.rd-w{display:flex;flex-wrap:wrap;gap:calc(30 * var(--fu)) calc(46 * var(--fu))}
.rd{display:flex;align-items:center;gap:calc(32 * var(--fu));min-height:max(40px,calc(95 * var(--fu)));padding:0 calc(40 * var(--fu));background:#FCFAF8;border:1px solid #EFE7DB;border-radius:calc(14 * var(--fu));cursor:pointer;font-weight:500;font-size:max(13px,calc(26 * var(--fu)))}
.rd input{position:absolute;opacity:0;width:1px;height:1px}
.rd i{flex:none;width:max(18px,calc(46 * var(--fu)));height:max(18px,calc(46 * var(--fu)));border:2px solid #9A958D;border-radius:50%;position:relative}
.rd input:checked+i{border-color:var(--red)}
.rd input:checked+i::after{content:"";position:absolute;inset:18%;border-radius:50%;background:var(--red)}
.rd input:focus-visible+i{outline:3px solid var(--blue);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.f-msg{color:#C42B1C;font-weight:600;font-size:max(13px,calc(26 * var(--fu)))}
.f-send{width:calc(522 * var(--fu));min-width:190px;margin:calc(8 * var(--fu)) auto 0}
.f-send img{height:auto}
.f-send:disabled{opacity:.6}
.f-note{text-align:center;font-size:max(12px,calc(24 * var(--fu)));font-weight:500}
.f-ok{padding:32px 8px;text-align:center}
.f-ok-h{font-size:22px;font-weight:700;color:var(--red);margin-bottom:8px}
.f-ok-b{margin-top:18px;min-height:44px;padding:0 28px;background:var(--ink);color:#fff;border-radius:10px;font-weight:600}
@media (max-width:559.98px){
  .dg-head{flex-direction:column;gap:8px;margin-bottom:18px;text-align:center}
  .dg-logo{width:112px}
  .dg-h{justify-content:center;gap:8px;margin-bottom:6px}
  .dg-h img:nth-of-type(1){width:128px}
  .dg-h img:nth-of-type(2){width:136px}
  .fg2{grid-template-columns:minmax(0,1fr);gap:20px}
  form{gap:18px}
  .rd{width:100%}
}
[hidden]{display:none!important}

/* Chuyển động: chỉ dùng transform và opacity, không thư viện ngoài */
@keyframes up{from{opacity:0;transform:translateY(26px)}}
@keyframes fromL{from{opacity:0;transform:translateX(-34px)}}
@keyframes fromR{from{opacity:0;transform:translateX(34px)}}
@keyframes pop{0%{opacity:0;transform:scale(.6) rotate(-7deg)}65%{opacity:1;transform:scale(1.07) rotate(2deg)}}
@keyframes drop{from{opacity:0;transform:translateY(-22px) scale(.94)}}
@keyframes growX{from{opacity:0;transform:scaleX(0)}}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes kv{from{transform:scale(1.08)}}
@keyframes fade{from{opacity:0}}
@keyframes dgIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes nudge{0%,86%,100%{transform:none}89%{transform:rotate(-2deg) scale(1.03)}92%{transform:rotate(2deg) scale(1.03)}95%{transform:rotate(-1deg)}}
@keyframes shake{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg) translateY(-3%)}}
@keyframes roll{0%,100%{transform:rotate(-5deg) translateX(-2%)}50%{transform:rotate(5deg) translateX(2%)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.72) rotate(14deg);opacity:.65}}

/* Màn đầu chạy ngay khi mở trang */
.hero-kv{animation:kv 1.8s cubic-bezier(.2,.7,.2,1) backwards}
.h-wm{animation:drop .7s .1s cubic-bezier(.2,.8,.2,1) backwards}
.h-title{animation:up .7s .25s cubic-bezier(.2,.8,.2,1) backwards}
.h-badge{animation:pop .6s .55s cubic-bezier(.2,.8,.2,1) backwards}
.h-desc{animation:up .7s .45s cubic-bezier(.2,.8,.2,1) backwards}
.h-btn{animation:up .7s .62s cubic-bezier(.2,.8,.2,1) backwards}
.hd-logo{animation:drop .6s cubic-bezier(.2,.8,.2,1) backwards}
.hd-cta{animation:pop .6s .2s cubic-bezier(.2,.8,.2,1) backwards}

/* Cuộn tới mới hiện */
.rv{opacity:0}
.rv.on{opacity:1;animation:var(--a,up) .72s var(--d,0s) cubic-bezier(.2,.8,.2,1) backwards}
.tl-line.rv{opacity:1;transform-origin:top}
.tl-line.rv.on{animation:growY 2.2s cubic-bezier(.3,.6,.3,1) backwards}
.a-line.rv.on,.s-bar.rv.on,.f-line.rv.on{transform-origin:left}

/* Lặp nhẹ, chỉ chạy khi đang trong màn hình */
.lp,.lp-i img{animation-play-state:paused}
.lp.play,.lp-i.play img{animation-play-state:running}
.h-btn.lp-i img,.b-btn.lp-i img{animation:nudge 5s 2s ease-in-out infinite;animation-play-state:paused}
.h-btn.lp-i.play img,.b-btn.lp-i.play img{animation-play-state:running}
.f-shaker.lp{animation:shake 1.5s ease-in-out infinite paused;transform-origin:50% 70%}
.f-rolling.lp{animation:roll 2.6s ease-in-out infinite paused}
.f-blink.lp,.a-spark.lp{animation:twinkle 2.4s ease-in-out infinite paused}
.f-shaker.lp.play,.f-rolling.lp.play,.f-blink.lp.play,.a-spark.lp.play{animation-play-state:running}

/* Đưa chuột vào */
.nav-a{transition:color .2s}
.nav-a:hover{color:var(--red)!important}
.ph,.c-bg,.c-tag,.c-t,.c-p,.card,.p-logo,.f-s img{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .p-logo:hover{transform:scale(1.08)}
  .a-photos .ph:hover,.l-ph:hover{transform:scale(1.02)}
  .f-s:hover img{transform:scale(1.15)}
}
@media (hover:hover) and (min-width:1024px){
  .card:hover .c-bg,.card:hover .c-ph,.card:hover .c-t,.card:hover .c-p{transform:translateY(calc(-8 * var(--u)))}
  .card:hover .c-tag{transform:translateY(calc(-8 * var(--u))) rotate(-3deg) scale(1.05)}
}
@media (hover:hover) and (max-width:1023.98px){.card:hover{transform:translateY(-4px)}}

.dg[open]{animation:dgIn .32s cubic-bezier(.2,.8,.2,1)}
.dg[open]::backdrop{animation:fade .28s ease}
.f-ok:not([hidden]){animation:up .45s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after,.dg[open]::backdrop{animation:none!important;transition:none!important}
  .rv{opacity:1}
}