html, body { margin: 0; padding: 0; background: #f5ead8; }

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&display=swap&subset=vietnamese');

#khp-emag {
    display: block;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 0 72px;
    overflow: hidden;
    background: #f5ead8;
    color: #3d3128;
    font-family: "Noto Serif", Georgia, serif;
    font-size: 18px;
    line-height: 1.85;
    box-sizing: border-box;
    position: relative;
    text-align: left;
}
#khp-emag *, #khp-emag *::before, #khp-emag *::after { box-sizing: border-box; }
#khp-emag img {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    float: none;
    display: block;
}

#khp-emag .shot,
#khp-emag .tit {
    width: 100%;
    margin: 0;
    padding: 0;
}
#khp-emag .shot img,
#khp-emag .tit img {
    width: 100%;
    height: auto;
}
#khp-emag .cover {
    margin: 0;
}
#khp-emag .tit {
    margin-top: 56px;
}
#khp-emag .prose + .shot,
#khp-emag .vid-full + .shot {
    margin-top: 28px;
}

#khp-emag .prose {
    width: min(820px, calc(100% - 48px));
    margin: 28px auto 0;
}
#khp-emag .prose p,
#khp-emag .sapo {
    margin: 0 0 18px;
    font-family: "Noto Serif", Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.85;
    color: #3d3128;
    text-align: justify;
}
#khp-emag .prose p:last-child { margin-bottom: 0; }
#khp-emag .sapo {
    font-size: 20px;
    line-height: 1.8;
}

#khp-emag h2 {
    margin: 56px 0 0;
    padding: 0;
    font-family: "Noto Serif", Georgia, serif;
    font-weight: 600;
    font-size: clamp(36px, 3.6vw, 56px);
    line-height: 1.15;
    color: #6a3d22;
    text-align: center;
}
#khp-emag .subtitle {
    margin: 8px 0 0;
    font-family: "Noto Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.25;
    color: #6a3d22;
    text-align: center;
}
#khp-emag .section-head {
    width: min(980px, calc(100% - 48px));
    margin: 0 auto 28px;
}

#khp-emag .metro {
    position: relative;
    width: 100%;
    margin: 28px 0 0;
    background: #f5ead8;
}
#khp-emag .metro + .shot { margin-top: 28px; }
#khp-emag .metro-stage {
    position: relative;
    z-index: 1;
    padding-bottom: 28%;
}
#khp-emag .metro-bg {
    display: block;
    width: 100%;
    height: auto;
}
#khp-emag .metro-hit {
    position: absolute;
    z-index: 3;
    width: 60.15% !important;
    max-width: none !important;
    left: 50%;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    transform: translateX(-50%);
    transform-origin: center center;
}
#khp-emag .metro-map {
    width: 100% !important;
    max-width: none !important;
    height: auto;
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: #f6efe4;
    box-shadow: 0 16px 40px rgba(48, 30, 12, 0.2);
}
#khp-emag.js-ready .metro-bg,
#khp-emag.js-ready .metro-hit { opacity: 0; }
#khp-emag.js-ready .metro.is-in .metro-bg { animation: khp-bg 1.7s cubic-bezier(.4,0,.2,1) both; }
#khp-emag.js-ready .metro.is-in .metro-hit { animation: khp-m 1.65s cubic-bezier(.4,0,.2,1) .35s both; }
@keyframes khp-bg {
    0% { opacity: 0; transform: scale(1.05); }
    40% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes khp-m {
    0% { opacity: 0; transform: translateX(-50%) scale(.55); }
    38% { opacity: 1; }
    100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
#khp-emag .metro-pop {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: rgba(36, 24, 14, 0.78);
}
#khp-emag .metro-pop[hidden] { display: none; }
#khp-emag .metro-pop img {
    width: auto;
    max-width: min(92vw, 1500px);
    max-height: 86vh;
    height: auto;
    border: 4px solid #f6efe4;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    animation: khp-pop .55s cubic-bezier(.4,0,.2,1);
}
@keyframes khp-pop {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: none; }
}
#khp-emag .metro-pop-x {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f6efe4;
    color: #3d3128;
    font-family: Georgia, serif;
    font-size: 28px;
    line-height: 40px;
    cursor: pointer;
}

#khp-emag .club {
    width: 100%;
    margin: 28px 0 0;
    background: #f5ead8;
}
#khp-emag .club-hero {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
}
#khp-emag .club-row {
    display: flex;
    gap: 12px;
    padding: 12px 12px 0;
}
#khp-emag .club-row button {
    position: relative;
    flex: 1 1 0;
    width: calc((100% - 24px) / 3) !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}
#khp-emag .club-row button img {
    width: 100% !important;
    max-width: none !important;
    height: auto;
}
#khp-emag .club-c { z-index: 1; }
#khp-emag .club-l,
#khp-emag .club-r { z-index: 2; }
#khp-emag.js-ready .club-hero,
#khp-emag.js-ready .club-row button { opacity: 0; }
#khp-emag.js-ready .club.is-in .club-hero { animation: khp-ch 1.6s cubic-bezier(.4,0,.2,1) both; }
#khp-emag.js-ready .club.is-in .club-c { animation: khp-cm 1.25s cubic-bezier(.4,0,.2,1) .65s both; }
#khp-emag.js-ready .club.is-in .club-l { animation: khp-cl 1.7s cubic-bezier(.4,0,.2,1) 1.2s both; }
#khp-emag.js-ready .club.is-in .club-r { animation: khp-cr 1.7s cubic-bezier(.4,0,.2,1) 1.2s both; }
@keyframes khp-ch {
    0% { opacity: 0; transform: scale(1.05); }
    40% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes khp-cm {
    0% { opacity: 0; transform: translateY(32px) scale(.92); }
    36% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-cl {
    0% { opacity: 0; transform: translateX(calc(100% + 12px)); }
    30% { opacity: 1; }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes khp-cr {
    0% { opacity: 0; transform: translateX(calc(-100% - 12px)); }
    30% { opacity: 1; }
    100% { opacity: 1; transform: translateX(0); }
}

#khp-emag .well {
    width: 100%;
    margin: 28px 0 0;
    background: #f5ead8;
}
#khp-emag .well-tit {
    display: block;
    width: 36.4% !important;
    max-width: none !important;
    height: auto;
    margin: 0 auto;
}
#khp-emag .well-grid {
    display: grid;
    grid-template-columns: 312fr 333fr 333fr;
    grid-template-rows: 211fr 230fr;
    gap: clamp(6px, 0.78vw, 15px);
    width: 96.78%;
    margin: 1.28% auto 0;
    aspect-ratio: 991 / 447;
}
#khp-emag .well-a { grid-column: 1; grid-row: 1; }
#khp-emag .well-b { grid-column: 2; grid-row: 1; }
#khp-emag .well-c { grid-column: 1 / 3; grid-row: 2; }
#khp-emag .well-d { grid-column: 3; grid-row: 1 / 3; }
#khp-emag .well-grid button {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: #e8dcc8;
    line-height: 0;
    cursor: pointer;
    overflow: hidden;
    display: block;
}
#khp-emag .well-grid button img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center center;
}
#khp-emag .well-grid .well-c img { object-position: center 88%; }
#khp-emag .well-grid .well-d img { object-position: center 80%; }
#khp-emag.js-ready .well-tit,
#khp-emag.js-ready .well-grid button { opacity: 0; }
#khp-emag.js-ready .well.is-in .well-tit { animation: khp-wt 1.4s cubic-bezier(.4,0,.2,1) both; }
#khp-emag.js-ready .well.is-in .well-a { animation: khp-wl 1.5s cubic-bezier(.4,0,.2,1) .4s both; }
#khp-emag.js-ready .well.is-in .well-b { animation: khp-wu 1.35s cubic-bezier(.4,0,.2,1) .9s both; }
#khp-emag.js-ready .well.is-in .well-c { animation: khp-wb 1.5s cubic-bezier(.4,0,.2,1) 1.4s both; }
#khp-emag.js-ready .well.is-in .well-d { animation: khp-wr 1.55s cubic-bezier(.4,0,.2,1) 1.9s both; }
@keyframes khp-wt {
    0% { opacity: 0; transform: translateY(28px) scale(.88); }
    40% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-wl {
    0% { opacity: 0; transform: translateX(-64px); }
    32% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-wu {
    0% { opacity: 0; transform: translateY(52px) scale(.94); }
    36% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-wb {
    0% { opacity: 0; transform: translateY(72px); }
    34% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-wr {
    0% { opacity: 0; transform: translateX(80px); }
    30% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}

#khp-emag .phy {
    position: relative;
    width: 100%;
    margin: 28px 0 0;
    background: #f5ead8;
    --phy-r: clamp(22px, 3.2vw, 46px);
}
#khp-emag .phy-bg {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 46%;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    pointer-events: none;
}
#khp-emag .phy-hero {
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}
#khp-emag .phy-hero img {
    width: 100% !important;
    max-width: none !important;
    height: auto;
}
#khp-emag .phy-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 403fr 342fr;
    column-gap: 3.1%;
    width: 88.6%;
    margin: 1.4% 5.4% 0 6%;
}
#khp-emag .phy-l,
#khp-emag .phy-r { min-width: 0; }
#khp-emag .phy-l { display: flow-root; }
#khp-emag .phy-r {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
#khp-emag .phy-grid button {
    position: relative;
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #e8dcc8;
    line-height: 0;
    cursor: pointer;
    overflow: hidden;
}
#khp-emag .phy-grid .phy-pool,
#khp-emag .phy-grid .phy-spa { border-radius: 0 var(--phy-r) 0 var(--phy-r); }
#khp-emag .phy-grid .phy-box,
#khp-emag .phy-grid .phy-yo { border-radius: var(--phy-r) 0 var(--phy-r) 0; }
#khp-emag .phy-grid .phy-bi { border-radius: 0 var(--phy-r) 0 var(--phy-r); }
#khp-emag .phy-pool { z-index: 3; }
#khp-emag .phy-grid button.phy-pool {
    margin-top: -18%;
    box-shadow: 0 0 0 clamp(7px, 0.55vw, 11px) #f5ead8;
}
#khp-emag .phy-grid button img {
    width: 100% !important;
    max-width: none !important;
    height: auto;
}
#khp-emag .phy-pair {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
    min-height: 0;
}
#khp-emag .phy-grid .phy-pair button {
    height: 100% !important;
}
#khp-emag .phy-grid .phy-pair img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center center;
}
#khp-emag .phy-cap {
    margin: 18px 10px 20px;
    font-family: "Noto Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: #111111;
    text-align: justify;
}
#khp-emag .phy-lead { margin-top: 8px; }
#khp-emag .phy-end { margin-bottom: 16px; }
#khp-emag.js-ready .phy-hero,
#khp-emag.js-ready .phy-pool,
#khp-emag.js-ready .phy-box,
#khp-emag.js-ready .phy-spa,
#khp-emag.js-ready .phy-yo,
#khp-emag.js-ready .phy-bi,
#khp-emag.js-ready .phy-cap { opacity: 0; }
#khp-emag.js-ready .phy.is-hero .phy-hero { animation: khp-ph 1.6s cubic-bezier(.4,0,.2,1) both; }
#khp-emag.js-ready .phy.is-in .phy-pool { animation: khp-pp 1.35s cubic-bezier(.4,0,.2,1) .15s both; }
#khp-emag.js-ready .phy.is-in .phy-lead { animation: khp-pcap 1.15s cubic-bezier(.4,0,.2,1) .35s both; }
#khp-emag.js-ready .phy.is-in .phy-box { animation: khp-pb 1.35s cubic-bezier(.4,0,.2,1) .7s both; }
#khp-emag.js-ready .phy.is-in .phy-mid { animation: khp-pcap 1.15s cubic-bezier(.4,0,.2,1) .85s both; }
#khp-emag.js-ready .phy.is-in .phy-spa { animation: khp-ps 1.35s cubic-bezier(.4,0,.2,1) 1.15s both; }
#khp-emag.js-ready .phy.is-in .phy-end { animation: khp-pcap 1.15s cubic-bezier(.4,0,.2,1) 1.25s both; }
#khp-emag.js-ready .phy.is-in .phy-yo { animation: khp-py 1.25s cubic-bezier(.4,0,.2,1) 1.55s both; }
#khp-emag.js-ready .phy.is-in .phy-bi { animation: khp-pz 1.25s cubic-bezier(.4,0,.2,1) 1.8s both; }
@keyframes khp-ph {
    0% { opacity: 0; transform: scale(1.04); }
    42% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes khp-pp {
    0% { opacity: 0; transform: translateY(48px); }
    36% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-pb {
    0% { opacity: 0; transform: translateX(48px); }
    34% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-ps {
    0% { opacity: 0; transform: translateY(42px); }
    36% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-py {
    0% { opacity: 0; transform: translateX(-28px); }
    34% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-pz {
    0% { opacity: 0; transform: translateX(28px); }
    34% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-pcap {
    0% { opacity: 0; transform: translateY(16px); }
    40% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}

#khp-emag .vid-full {
    width: 100%;
    margin: 28px 0 0;
    padding: 0;
    line-height: 0;
    background: #1a120e;
}
#khp-emag .vid-full video {
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
    margin: 0;
    background: #1a120e;
}

#khp-emag .pay {
    position: relative;
    width: 100%;
    margin: 28px 0 0;
    background: #f5ead8;
}
#khp-emag .pay-bg {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
}
#khp-emag .pay-stage {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 28%;
    width: 68% !important;
    max-width: none !important;
    aspect-ratio: 1445 / 604;
    transform: translateX(-50%);
}
#khp-emag .pay-n {
    position: absolute;
    height: auto;
    max-width: none !important;
}
#khp-emag .pay-a { left: 0.4%; top: 1%; width: 39.03% !important; }
#khp-emag .pay-b { left: 48.17%; top: 1.66%; width: 51.21% !important; }
#khp-emag .pay-c { left: 0.69%; top: 36.09%; width: 39.03% !important; }
#khp-emag .pay-d { left: 48.17%; top: 36.75%; width: 51.21% !important; }
#khp-emag .pay-e { left: 0.69%; top: 72.52%; width: 39.03% !important; }
#khp-emag.js-ready .pay-bg,
#khp-emag.js-ready .pay-n { opacity: 0; }
#khp-emag.js-ready .pay.is-in .pay-bg { animation: khp-paybg 1.6s cubic-bezier(.4,0,.2,1) both; }
#khp-emag.js-ready .pay.is-in .pay-a { animation: khp-nl 0.95s cubic-bezier(.4,0,.2,1) .15s both; }
#khp-emag.js-ready .pay.is-in .pay-b { animation: khp-nr 0.95s cubic-bezier(.4,0,.2,1) .4s both; }
#khp-emag.js-ready .pay.is-in .pay-c { animation: khp-nl 0.95s cubic-bezier(.4,0,.2,1) .65s both; }
#khp-emag.js-ready .pay.is-in .pay-d { animation: khp-nr 0.95s cubic-bezier(.4,0,.2,1) .9s both; }
#khp-emag.js-ready .pay.is-in .pay-e { animation: khp-nl 0.95s cubic-bezier(.4,0,.2,1) 1.15s both; }
@keyframes khp-paybg {
    0% { opacity: 0; transform: scale(1.05); }
    40% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes khp-nl {
    0% { opacity: 0; transform: translateX(-36px); }
    38% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes khp-nr {
    0% { opacity: 0; transform: translateX(36px); }
    38% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}

#khp-emag .cover { overflow: hidden; background: #f5ead8; }
#khp-emag .cover-hero {
    position: relative;
    overflow: hidden;
}
#khp-emag .cover-bg,
#khp-emag .cover-sapo {
    width: 100% !important;
    max-width: none !important;
    height: auto;
}
#khp-emag .cover-tit {
    position: absolute;
    z-index: 2;
    left: 52.2%;
    top: 7.2%;
    width: 40.8% !important;
    max-width: none !important;
    height: auto;
    transform-origin: 50% 42%;
}
#khp-emag .cover-sapo { margin: 6px auto 0; }
#khp-emag.js-ready .cover-bg,
#khp-emag.js-ready .cover-tit,
#khp-emag.js-ready .cover-sapo { will-change: transform, opacity; }
#khp-emag.js-ready .cover-bg { animation: khp-cover 2.8s cubic-bezier(.4,0,.2,1) both; }
#khp-emag.js-ready .cover-tit { animation: khp-cv-tit 1.8s cubic-bezier(.4,0,.2,1) .3s both; }
#khp-emag.js-ready .cover-sapo { animation: khp-cv-sapo 1.6s cubic-bezier(.4,0,.2,1) 1.05s both; }
@keyframes khp-cover {
    0% { opacity: 0; transform: scale(1.05); }
    45% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes khp-cv-tit {
    0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.7); }
    42% { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes khp-cv-sapo {
    0% { opacity: 0; transform: translate3d(0, 48px, 0) scale(.94); }
    40% { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
#khp-emag.js-ready .shot:not(.cover),
#khp-emag.js-ready .vid-full {
    opacity: 0;
    transform: translateY(56px);
    transition: opacity 1.35s cubic-bezier(.4,0,.2,1), transform 1.35s cubic-bezier(.4,0,.2,1);
}
#khp-emag.js-ready .prose {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1.2s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1);
}
#khp-emag.js-ready .shot.infra,
#khp-emag.js-ready .shot.mg {
    opacity: 1;
    transform: none;
}
#khp-emag .mg-tit {
    width: 100% !important;
    max-width: none !important;
    height: auto;
    margin: 10px 0 16px;
}
#khp-emag .mg-row {
    display: grid;
    grid-template-columns: 222fr 221fr 266fr 265fr;
    gap: 8px;
    padding: 0 1.9%;
}
#khp-emag .mg-a,
#khp-emag .mg-d,
#khp-emag .mg-e,
#khp-emag .mg-stack button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    display: block;
}
#khp-emag .mg-a,
#khp-emag .mg-d,
#khp-emag .mg-e {
    width: 100% !important;
    max-width: none !important;
}
#khp-emag .mg-a img,
#khp-emag .mg-d img,
#khp-emag .mg-e img,
#khp-emag .mg-stack img {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    object-fit: cover;
}
#khp-emag .mg-a { aspect-ratio: 222 / 385; }
#khp-emag .mg-d { aspect-ratio: 266 / 385; }
#khp-emag .mg-e { aspect-ratio: 265 / 385; }
#khp-emag .mg-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
#khp-emag .mg-b,
#khp-emag .mg-c {
    width: 100% !important;
    max-width: none !important;
    min-height: 0;
    height: 0;
}
#khp-emag .mg-b { flex: 214 1 0; }
#khp-emag .mg-c { flex: 167 1 0; }
#khp-emag.js-ready .mg-tit,
#khp-emag.js-ready .mg-a,
#khp-emag.js-ready .mg-b,
#khp-emag.js-ready .mg-c,
#khp-emag.js-ready .mg-d,
#khp-emag.js-ready .mg-e { opacity: 0; }
#khp-emag.js-ready .mg.is-in .mg-tit { animation: khp-up 1.25s cubic-bezier(.4,0,.2,1) both; }
#khp-emag.js-ready .mg.is-in .mg-a { animation: khp-up 1.25s cubic-bezier(.4,0,.2,1) .45s both; }
#khp-emag.js-ready .mg.is-in .mg-b { animation: khp-up 1.25s cubic-bezier(.4,0,.2,1) .95s both; }
#khp-emag.js-ready .mg.is-in .mg-c { animation: khp-up 1.25s cubic-bezier(.4,0,.2,1) 1.3s both; }
#khp-emag.js-ready .mg.is-in .mg-d { animation: khp-up 1.25s cubic-bezier(.4,0,.2,1) 1.85s both; }
#khp-emag.js-ready .mg.is-in .mg-e { animation: khp-up 1.25s cubic-bezier(.4,0,.2,1) 2.4s both; }
@keyframes khp-up {
    0% { opacity: 0; transform: translateY(64px); }
    36% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); }
}
#khp-emag .infra-stage {
    position: relative;
    overflow: hidden;
}
#khp-emag .infra-bg,
#khp-emag .infra-tit {
    width: 100% !important;
    max-width: none !important;
    height: auto;
}
#khp-emag .infra-tit {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 2.6%;
    transform-origin: center center;
}
#khp-emag.js-ready .infra-bg,
#khp-emag.js-ready .infra-tit { opacity: 0; }
#khp-emag.js-ready .infra.is-in .infra-bg { animation: khp-i3 1.7s cubic-bezier(.4,0,.2,1) both; }
#khp-emag.js-ready .infra.is-in .infra-tit { animation: khp-i3t 1.45s cubic-bezier(.4,0,.2,1) .3s both; }
@keyframes khp-i3 {
    0% { opacity: 0; transform: scale(1.06); }
    40% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes khp-i3t {
    0% { opacity: 0; transform: translateY(28px) scale(.92); }
    36% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
#khp-emag.js-ready .tit { opacity: 0; }
#khp-emag.js-ready .tit.is-in { animation: khp-tit 1.35s cubic-bezier(.4,0,.2,1) both; }
@keyframes khp-tit {
    0% { opacity: 0; transform: translateY(40px) scale(.94); }
    36% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
#khp-emag.js-ready .shot.is-in,
#khp-emag.js-ready .prose.is-in,
#khp-emag.js-ready .vid-full.is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    #khp-emag.js-ready .cover-bg,
    #khp-emag.js-ready .cover-tit,
    #khp-emag.js-ready .cover-sapo,
    #khp-emag.js-ready .infra-bg,
    #khp-emag.js-ready .infra-tit,
    #khp-emag.js-ready .mg-tit,
    #khp-emag.js-ready .mg-a,
    #khp-emag.js-ready .mg-b,
    #khp-emag.js-ready .mg-c,
    #khp-emag.js-ready .mg-d,
    #khp-emag.js-ready .mg-e,
    #khp-emag.js-ready .shot:not(.cover),
    #khp-emag.js-ready .prose,
    #khp-emag.js-ready .tit,
    #khp-emag.js-ready .club-hero,
    #khp-emag.js-ready .club-row button,
    #khp-emag.js-ready .well-tit,
    #khp-emag.js-ready .well-grid button,
    #khp-emag.js-ready .phy-hero,
    #khp-emag.js-ready .phy-pool,
    #khp-emag.js-ready .phy-box,
    #khp-emag.js-ready .phy-spa,
    #khp-emag.js-ready .phy-yo,
    #khp-emag.js-ready .phy-bi,
    #khp-emag.js-ready .phy-cap,
    #khp-emag.js-ready .vid-full,
    #khp-emag.js-ready .pay-bg,
    #khp-emag.js-ready .pay-n,
    #khp-emag.js-ready .metro-bg,
    #khp-emag.js-ready .metro-hit,
    #khp-emag .metro-pop img {
        opacity: 1;
        animation: none;
        transition: none;
    }
}

@media (max-width: 767px) {
    #khp-emag { padding-bottom: 40px; }
    #khp-emag .prose { width: calc(100% - 32px); }
    #khp-emag .prose p { font-size: 16px; line-height: 1.8; }
    #khp-emag .sapo { font-size: 17px; }
}