@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
:root { --primary: #212121; --secondary: #515151; --white: #ffffff; }

html { font-size: 0.521vw; scroll-behavior: smooth; }

*, :after, :before { box-sizing: border-box; margin: 0; padding: 0; }

body { font-size: 1.6rem; letter-spacing: 0; line-height: 175%; font-weight: 500; font-family: var(--font-family-svnbiosans); }

body::-webkit-scrollbar { width: 4px; }

body::-webkit-scrollbar-track { border-radius: 10px; }

body::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 10px; }

body::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

.anchor_fixtop { display: block; position: relative; top: -13rem; width: 100%; visibility: hidden; }

.grid-1200 { max-width: 1230px; }

[class*="dflex"] { display: flex; flex-wrap: wrap; }

[class*="aic"] { align-items: center; }

[class*="aie"] { align-items: flex-end; }

[class*="ais"] { align-items: flex-start; }

[class*="jcc"] { justify-content: center; }

[class*="jcsb"] { justify-content: space-between; }

[class*="jcfe"] { justify-content: flex-end; }

[class*="fcolumn"] { flex-flow: column; }

a[href^="tel:"] { cursor: default; pointer-events: none; }
@media (max-width: 1024px) { a[href^="tel:"] { cursor: pointer; pointer-events: all; } }

[class*="grid"] { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; width: 100%; }

body, html { height: 100%; }

img { max-width: 100%; height: auto; vertical-align: top; overflow-clip-margin: inherit; }

a, button { color: inherit; text-decoration: none; }

input, textarea, button, select { outline: none; resize: none; }

.hv-o { transition: ease all 0.5s; }
.hv-o:hover { opacity: 0.8; }

.ho-main, .os-main { overflow: hidden; }

.os-y-hidden { overflow-y: hidden; }

.os-section { position: relative; }

.os-align-center { text-align: center; }

.u-sp { display: none; }

ul, ol { list-style: none; }

@media (max-width: 767px) { .u-pc { display: none; }
  .u-sp { display: block; } }
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }

.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }

.slick-track:before, .slick-track:after { display: table; content: ''; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }

[dir='rtl'] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

:root { --fz4-9rem: 4.9rem; --fz5-77rem: 5.77rem; --fz19-6rem: 19.6rem; --fz3-5rem: 3.5rem; --font-width-400: 400; --font-width-500: 500; --font-width-600: 600; --font-width-700: 700; --font-width-800: 800; --w50-9rem: 50.9rem; --font-family-svnballadeer: "SVN-Balladeer", "Alex Brush", serif; --font-family-svnbiosans: "SVN-Bio Sans"; --font-family-svnprimark: "SVN-Primark"; --padding-left-92: 9.2rem; --padding-left-455: 45.5rem; --padding-top-82: 8.2rem; --margin-bottom-18: 1.8rem; --margin-top-28: 2.8rem; --color-192847: #192847; --color-fd0012: #fd0012; }

#app { overflow: hidden; }

.app_top-mv { overflow: hidden; position: relative; padding-top: var(--padding-top-82); background-image: url(../img/mv-01.jpg); background-position: top center; background-repeat: no-repeat; background-size: 192rem; }
.app_top-mv.active .app_top-savetheday p { opacity: 0; animation: fadeInOpacty 2.5s forwards; animation-delay: calc(var(--i) * 0.2s); }
.app_top-mv.active .app_top-title span { opacity: 0; position: relative; animation: fadeIn 2s forwards; animation-delay: calc(var(--i) * 0.2s); }
.app_top-mv.active .app_top-sun { opacity: 0; animation: sun 2.5s forwards; animation-delay: calc(var(--i) * 0.2s); }
.app_top-mv.active .app_top-peach img { opacity: 0; animation: fadeInOpacty 2.5s forwards; animation-delay: calc(var(--i) * 0.2s); }
.app_top-savetheday { font-family: var(--font-family-svnbiosans); color: var(--color-192847); font-size: var(--fz4-9rem); font-weight: var(--font-width-400); line-height: 140%; letter-spacing: 0.02rem; padding-left: var(--padding-left-455); padding-right: var(--padding-left-455); margin-bottom: var(--margin-bottom-18); }
.app_top-savetheday .date { font-size: var(--fz5-77rem); line-height: 110%; }
.app_top-title { width: 100%; position: relative; z-index: 3; pointer-events: none; padding-left: var(--padding-left-92); font-family: var(--font-family-svnballadeer); color: var(--color-192847); font-size: var(--fz19-6rem); font-weight: var(--font-width-400); line-height: 140%; letter-spacing: -2.05rem; }
.app_top-title span[style="--i:8"] { font-size: 15rem; margin-left: 1.5rem; margin-right: 1rem; }
.app_top-mountain { text-align: center; position: relative; margin-top: var(--margin-top-28); }
.app_top-mountain img { width: 100%; object-fit: cover; position: relative; z-index: 5; }
.app_top-sun { position: absolute; top: -34.3rem; left: calc(50% + 5.5rem); z-index: 1; transform: translateX(-50%); width: var(--w50-9rem); height: var(--w50-9rem); border-radius: 100%; background-color: var(--color-fd0012); }
.app_top-peach { position: absolute; right: -12.2rem; top: -51.5rem; z-index: 3; }
.app_top-peach img { width: 85rem; }
.app_top-happycard { position: relative; z-index: 6; width: 100%; margin-top: -48.8rem; }
.app_top-happycard .happy-img { width: 100%; display: block; text-align: center; }
.app_top-happycard .happy-img.vs-01 { text-align: left; padding-left: 1.7rem; position: relative; z-index: 7; }
.app_top-happycard .happy-img.vs-01 img { width: 150.5rem; }
.app_top-happycard .happy-img.vs-02 { margin-top: -28.4rem; position: relative; z-index: 8; padding-left: 10.7rem; }
.app_top-happycard .happy-img.vs-02 img { width: 152.1rem; }
.app_top-happycard .happy-img.vs-03, .app_top-happycard .happy-img.vs-04, .app_top-happycard .happy-img.vs-05 { position: absolute; width: auto; display: inline-block; }
.app_top-happycard .happy-img.vs-03 { left: 4.5rem; bottom: 8.2rem; }
.app_top-happycard .happy-img.vs-03 img { width: 29rem; }
.app_top-happycard .happy-img.vs-04 { right: 9rem; top: 32rem; }
.app_top-happycard .happy-img.vs-04 img { width: 35.1rem; }
.app_top-happycard .happy-img.vs-05 { left: 7rem; top: 18rem; }
.app_top-happycard .happy-img.vs-05 img { width: 13.1rem; }
.app_top-confirm { padding-top: 0.8rem; padding-bottom: 26.5rem; background-color: #ffffff; background-image: url(../img/ft-02.png); background-position: top -35rem center; background-repeat: no-repeat; background-size: cover; position: relative; }
.app_top-confirm .cat { display: block; width: 100%; max-width: 70.8rem; margin-left: auto; margin-right: auto; text-align: left; margin-bottom: -9.3rem; }
.app_top-confirm .cat img { width: 16.9rem; }
.app_top-confirm .floral-motifs { position: absolute; }
.app_top-confirm .floral-motifs.vs-01 { left: -24.1rem; bottom: -41.4rem; z-index: 5; }
.app_top-confirm .floral-motifs.vs-01 img { width: 45.9rem; }
.app_top-confirm .floral-motifs.vs-02 { right: 3.5rem; top: -2.7rem; }
.app_top-confirm .floral-motifs.vs-02 img { width: 30.8rem; }
.app_top-photo { background-color: #192847; background-image: url(../img/ft-02.png); background-position: top -10rem center; background-repeat: no-repeat; background-size: 120%; padding-bottom: 11rem; }
.app_top-photo--title { text-align: center; display: block; font-family: "Times New Roman"; margin-top: -15.4rem; position: relative; color: var(--color-192847); font-size: 7.5rem; font-weight: var(--font-width-400); line-height: 140%; letter-spacing: 0.02rem; }
.app_top-pink { padding-top: 20rem; padding-bottom: 5rem; position: relative; background-image: url(../img/ft-03.png); background-position: center; background-repeat: no-repeat; }
.app_top-pink__img { width: 100%; text-align: center; }
.app_top-pink__img img { width: 153.4rem; }
.app_top-pink__inner { position: absolute; right: -35.3rem; top: -17rem; z-index: 5; }
.app_top-pink__inner img { width: 56.4rem; }
.app_top-timeline { width: 100%; display: flex; justify-content: space-between; background-color: var(--color-192847); }
.app_top-timeline--item:first-child { width: calc(100% - 79.5rem); padding-top: 6.7rem; padding-left: 25rem; padding-right: 15rem; }
.app_top-timeline--item:last-child { width: 79.5rem; background-image: url("../img/photo-01.png"); background-size: cover; background-position: top center; background-color: #192847; background-blend-mode: soft-light; filter: brightness(90%); height: 100rem; }
.app_top-timeline--item .app_top-photo--title { font-size: 8.6rem; color: #ffffff; margin-top: 0; font-family: "Times New Roman"; }
.app_top-timeline--list { position: relative; margin-top: 14rem; }
.app_top-timeline--list::before { content: ""; position: absolute; top: -2.6rem; left: 24.5rem; width: 0.4rem; height: calc(100% - 4.9rem); background-color: #ffffff; }
.app_top-timeline--list li { width: 100%; display: flex; flex-direction: row-reverse; }
.app_top-timeline--list li:not(:last-child) .item { margin-bottom: 5rem; }
.app_top-timeline--list .img { width: 16.2rem; text-align: center; display: inline-block; position: relative; top: -3rem; }
.app_top-timeline--list .img img { width: var(--width); }
.app_top-timeline--list .item { width: calc(100% - 16.2rem); padding-left: 18.5rem; font-family: var(--font-family-svnballadeer); color: #ffffff; font-size: 6.5rem; font-weight: var(--font-width-400); line-height: 140%; letter-spacing: 0.02rem; }
.app_top-timeline--list .time { font-family: "Times New Roman"; font-size: 7.7rem; display: block; line-height: 100%; margin-bottom: -1.1rem; position: relative; }
.app_top-timeline--list .time::before { content: ""; position: absolute; top: 3.7rem; left: -10.1rem; width: 7.9rem; height: 0.4rem; background-color: #ffffff; }
.app_top-trip { padding-top: 23.4rem; padding-bottom: 60.8rem; background-image: url(../img/ft-02.png); background-position: bottom center; background-repeat: no-repeat; background-size: cover; position: relative; }
.app_top-trip .app_top-photo--title { margin-top: 0; font-size: 8.7rem; }
.app_top-trip__list { width: 100%; max-width: 163.5rem; margin-left: auto; margin-right: auto; margin-top: 8.9rem; display: flex; align-items: flex-start; justify-content: center; position: relative; }
.app_top-trip__list::before { content: ""; position: absolute; left: 0; top: 16.5rem; width: 100%; height: 2px; background-color: var(--color-192847); }
.app_top-trip__list li { position: relative; z-index: 1; }
.app_top-trip__list li:not(:last-child) { margin-right: 17rem; }
.app_top-trip__list .img { width: 34rem; height: 34rem; border-radius: 100%; overflow: hidden; object-fit: cover; display: inline-block; box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4), 0 0.3rem 0.8rem rgba(0, 0, 0, 0.4); }
.app_top-trip__list strong { display: block; text-align: center; margin-top: 3rem; color: var(--color-192847); font-size: 3.9rem; font-weight: var(--font-width-400); line-height: 140%; letter-spacing: 0.02rem; }
.app_top-trip__list .date { display: block; }
.app_top-calendar { position: relative; z-index: 1; margin-top: -43.2rem; }
.app_top-calendar--item__inner { width: 100%; height: 100%; border-top-right-radius: 50rem; background-color: var(--color-192847); background-image: url(../img/icon-maps-1.png); background-position: top 20.5rem left -10.8rem; background-repeat: no-repeat; background-size: contain; }
.app_top-calendar--item:first-child { width: 103.5rem; height: 137rem; padding: 2.2rem 2.2rem 0 0; background-color: #ffffff; border-top-right-radius: 50rem; box-shadow: 0.9rem 0.5rem 2rem 0.6rem rgba(0, 0, 0, 0.4); position: relative; }
.app_top-calendar--item:first-child::before { content: ""; width: 23.7rem; height: 25.6rem; position: absolute; left: 22.3rem; top: 15rem; background-position: center; background-repeat: no-repeat; background-size: 23.4rem; background-image: url(../img/icon-maps.png); }
.app_top-calendar--item:first-child .year { display: flex; flex-direction: column; color: #ffffff; font-size: 10.8rem; font-weight: var(--font-width-400); line-height: 140%; letter-spacing: 0.02rem; position: absolute; left: 6.8rem; bottom: 5rem; }
.app_top-calendar--item:first-child .year span { display: inline-block; line-height: 120%; }
.app_top-calendar--item:last-child { width: 122rem; height: 105rem; position: absolute; right: 0; bottom: 0; background-color: #192847; border-top-left-radius: 50rem; box-shadow: 0.9rem 0.5rem 2rem 0.6rem rgba(0, 0, 0, 0.4); z-index: 2; text-align: center; display: flex; align-items: flex-end; padding-bottom: 2rem; }
.app_top-calendar--item:last-child > img { width: 100.1rem; display: block; margin-left: auto; margin-right: 4.2rem; }
.app_top-calendar--item:last-child .img1 { position: absolute; }
.app_top-calendar--item:last-child .img1.vs-01 { left: -37rem; bottom: -2.5rem; }
.app_top-calendar--item:last-child .img1.vs-01 img { width: 69.3rem; }
.app_top-calendar--item:last-child .img1.vs-02 { right: -136.3rem; top: -69.5rem; }
.app_top-calendar--item:last-child .img1.vs-02 img { width: 214.3rem; }
.app_top-footer { position: relative; min-height: 55.7rem; background-color: #ffffff; background-image: url(../img/ft-02.png); background-position: bottom center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: flex-end; }
.app_top-footer .box { align-items: flex-end; width: 100%; }
.app_top-footer .box--item { width: 73.5rem; }
.app_top-footer .box--item:first-child { width: calc(100% - 73.5rem); padding-bottom: 5rem; color: var(--color-192847); font-size: var(--fz3-5rem); font-weight: var(--font-width-500); line-height: 140%; letter-spacing: 0; }
.app_top-footer .box--item:first-child .svnprimark { font-size: 7.3rem; padding-bottom: 4rem; padding-left: 5.5rem; }
.app_top-footer .box--item:first-child p { max-width: 78.5rem; margin-left: auto; margin-right: auto; }

.svnprimark { font-family: var(--font-family-svnprimark); }

.button-confirm { width: 48rem; height: 9.3rem; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; background: #fc0311; border-radius: 1rem; color: var(--color-192847); font-size: 4.3rem; font-weight: var(--font-width-400); line-height: 140%; letter-spacing: 0.02rem; box-shadow: 0.2rem 0.5rem 1.1rem rgba(0, 0, 0, 0.4); background: linear-gradient(0deg, #fc0311 0%, #ff8400 65%); transition: ease all 200ms; position: relative; z-index: 2; }
.button-confirm:hover { color: #ffffff; }

.photo-slider-js { width: 165.5rem; margin-left: auto; margin-right: auto; margin-top: 14.8rem; position: relative; }
.photo-slider-js .slick-prev, .photo-slider-js .slick-next { position: absolute; top: 50%; transform: translateY(-50%); background: #ffffff; opacity: 0.5; border: 0; width: 6rem; height: 7rem; font-size: 0; cursor: pointer; }
.photo-slider-js .slick-prev { clip-path: polygon(100% 100%, 100% 0, 0 50%); left: -9.3rem; }
.photo-slider-js .slick-next { right: -9.3rem; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.photo-slider-js .photo-slider { margin: 0 2.75rem; }
.photo-slider-js .photo-slider img { width: 100%; height: 76.5rem; object-fit: cover; }

.img-trip { position: absolute; top: 0; z-index: 1; display: inline-block; }
.img-trip.vs-01 { top: 15.5rem; right: 6.5rem; width: 26.1rem; }
.img-trip.vs-01 img { width: 26.1rem; }
.img-trip.vs-02 { top: 3rem; left: -30rem; width: 61.4rem; z-index: 0; }
.img-trip.vs-02 img { width: 61.4rem; }
.img-trip.vs-03 { top: -19rem; left: -4.7rem; width: 30.6rem; z-index: 5; }
.img-trip.vs-03 img { width: 30.6rem; }

@media (max-width: 960px) { .app_top-timeline--item:first-child { padding-left: 10rem; padding-right: 10rem; }
  .app_top-title { letter-spacing: -1.55rem; }
  :root { --fz19-6rem: 17.6rem; } }
@keyframes sun { 0% { top: 0; opacity: 0; }
  100% { top: -34.3rem; opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; left: 10rem; }
  100% { opacity: 1; left: 0; } }
@keyframes fadeInOpacty { from { opacity: 0; }
  to { opacity: 1; } }
.wow_custom { opacity: 0; -webkit-transform: translate(0, 5.5rem); transform: translate(0, 5.5rem); transition: all 0.5s ease; }
.wow_custom.show { opacity: 1; -webkit-transform: none; transform: none; }

.list_download { text-align: center; margin-top: 2rem; font-size: 2rem; }
.list_download a { text-decoration: underline; }
.list_download a:hover { color: #fd0012; }

.popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 5rem; box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.3); text-align: center; z-index: 1000; }

.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; }

.popup input { padding: 0 1.5rem; margin: 1rem 0; width: 100%; height: 4rem; border-radius: 0; border: 1px solid #1a1a1a; font-size: 1.6rem; }

.popup button { padding: 1rem 1.5rem; cursor: pointer; border-radius: 0; background: #fd0012; border: 0; color: #ffffff; font-size: 1.6rem; }

@media (max-width: 768px) { .list_download { margin-top: 4rem; font-size: 4rem; }
  .popup { padding: 14rem; }
  .popup .title { font-size: 6rem; margin-bottom: 4rem; }
  .popup input { padding: 0 4rem; margin: 8rem 0; width: 200px; height: 18rem; font-size: 6rem; }
  .popup button { padding: 4rem; font-size: 6rem; }
  .popup button[onclick="checkPassword()"] { margin-right: 4rem; }
  #error-message { font-size: 13px; top: 13px !important; }
  .app_top-pink { padding-bottom: 15rem; } }
#confirm__app { display: none; position: fixed; left: 50%; top: 50%; background-color: #192847; width: 100rem; height: 95vh !important; z-index: 9991; height: auto; transform: translate(-50%, -50%); padding: 7rem 5rem; overflow-y: auto; }
#confirm__app::-webkit-scrollbar { width: 4px; }
#confirm__app::-webkit-scrollbar-track { border-radius: 10px; }
#confirm__app::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 10px; }
#confirm__app::-webkit-scrollbar-thumb:hover { background: var(--secondary); }
#confirm__app .date_time, #confirm__app .title_img, #confirm__app form { width: 80%; margin: 0 auto; }
#confirm__app .title_img { margin-bottom: 5rem; }
#confirm__app .title_img img { width: 80rem; display: block; margin-left: auto; margin-right: auto; }
#confirm__app .name { display: flex; width: 100%; flex-direction: column; }
#confirm__app label { color: #fff; font-size: 3.5rem; text-align: center; line-height: 150%; font-weight: 400; display: block; letter-spacing: 0.1rem; }
#confirm__app .name { margin-bottom: 4rem; }
#confirm__app .name_km { border: 0; border-radius: 0; background-color: transparent; border-bottom: 0.2rem solid #fff; }
#confirm__app .name_td { border: 1rem; padding: 0 2rem; color: #192847; border-radius: 1rem; margin-top: 2rem; }
#confirm__app input { font-size: 2.5rem; color: #fff; font-weight: 500; line-height: 150%; letter-spacing: 0; height: 7rem; width: 100%; text-align: center; border: 0.2rem solid #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
#confirm__app ul { display: flex; align-items: center; justify-content: space-between; margin-top: 4rem; }
#confirm__app ul li { width: 48%; padding-top: 16.6rem; padding-bottom: 1.9rem; position: relative; }
#confirm__app ul li.left { padding-left: 10rem; padding-right: 3rem; }
#confirm__app ul li.left img { left: 0; }
#confirm__app ul li.right { padding-right: 10rem; padding-left: 3rem; }
#confirm__app ul li.right img { right: 0; }
#confirm__app ul li img { position: absolute; width: 13rem; bottom: 0; z-index: 1; }
#confirm__app ul input[type="radio"]:checked + label { background-color: #4caf50; color: white; border-color: #4caf50; }
#confirm__app ul label { width: 100%; height: 7rem; border-radius: 1rem; border: 2px solid #ffffff; line-height: 100%; font-size: 2.3rem; font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
#confirm__app ul input { display: none; }
#confirm__app .date_time { display: flex; align-items: center; justify-content: flex-end; font-size: 3rem; color: #ffffff; line-height: 150%; letter-spacing: 0.1rem; font-weight: 500; text-align: center; margin-top: 5rem; }
#confirm__app .date_time p:first-child { font-weight: 500; letter-spacing: 0.5rem; }

.hinh_trai_tim { position: absolute; right: 0.4rem; top: 18.4rem; }

.hinh_trai_tim:before, .hinh_trai_tim:after { content: ""; width: 2rem; height: 3.5rem; position: absolute; background: #fc0311; left: 2rem; top: 0; border-radius: 9rem 9rem 0 0; transform: rotate(-45deg); transform-origin: 0 100%; }

.hinh_trai_tim:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }

span.close { position: absolute; right: 6.5rem; top: 6.5rem; width: 9rem; height: 9rem; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }

span.close::before { content: "×"; font-size: 8rem; color: #333; font-weight: bold; padding-bottom: 0.1rem; }

span.close { position: absolute; right: 3.5rem; top: 3.5rem; width: 7rem; height: 7rem; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }

span.close::before { content: "×"; font-size: 5rem; color: #333; font-weight: bold; padding-bottom: 0.1rem; }

.wp-submit { display: flex; justify-content: center; margin-top: 3rem; }

.wp-submit button, #confirm__app .wp-submit input { width: 19rem; height: 6rem; border: 0; border-radius: 0; background: #ffffff; font-size: 2.5rem; color: #333; cursor: pointer; transition: ease all 0.35s; }
.wp-submit button:hover, #confirm__app .wp-submit input:hover { color: #fff; background-color: #4caf50; }

@media (max-width: 767px) { .wp-submit { margin-top: 7rem; }
  .wp-submit button, #confirm__app .wp-submit input { width: 30rem; height: 14rem; border: 0; font-size: 6rem; border-radius: 0; background: #ffffff; font-weight: 600; }
  #confirm__app { width: 175rem; height: 246rem !important; padding: 16rem 5rem; }
  #confirm__app .title_img img { width: 130rem; }
  #confirm__app .date_time, #confirm__app ul label, #confirm__app input, #confirm__app label { font-size: 7rem; letter-spacing: 0; }
  #confirm__app .date_time p:first-child { letter-spacing: 2.5rem; font-weight: 500; }
  #confirm__app .date_time p:last-child { font-weight: 600; }
  #confirm__app .date_time { margin-top: 15rem; }
  #confirm__app ul label, #confirm__app input { height: 15rem; }
  #confirm__app .name_td { margin-top: 4rem; }
  #confirm__app .title_img, #confirm__app .name { margin-bottom: 11rem; }
  #confirm__app .date_time, #confirm__app .title_img, #confirm__app form { width: 90%; }
  #confirm__app ul li img { width: 16rem; }
  #confirm__app ul label { border: 1px solid; border-radius: 3rem; }
  .hinh_trai_tim { position: absolute; right: 0.5rem; top: 21rem; }
  .hinh_trai_tim:before, .hinh_trai_tim:after { content: ""; width: 3.9rem; height: 6.4rem; position: absolute; background: #fc0311; left: 3.5rem; top: 0; border-radius: 11rem 11rem 0 0; transform: rotate(-45deg); transform-origin: 0 100%; }
  .hinh_trai_tim:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
  .app_top-trip__list strong { font-size: 4.5rem; font-weight: var(--font-width-500); }
  span.close { position: absolute; right: 6.5rem; top: 6.5rem; width: 9rem; height: 9rem; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  span.close::before { content: "×"; font-size: 8rem; color: #333; font-weight: bold; padding-bottom: 0.1rem; } }
.playerIcon { cursor: pointer; display: flex; align-items: center; background: #df4758; position: fixed; right: 2rem; bottom: 4rem; padding: 1rem; font-size: 0; vertical-align: top; border-radius: 100%; width: 4rem; height: 4rem; z-index: 100; }
.playerIcon::after { content: ""; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: -1; background-color: rgba(242, 59, 67, 0.3); width: 120%; height: 120%; left: -10%; top: -10%; -webkit-animation: biilogo-pulse 1s infinite; animation: biilogo-pulse 1s infinite; z-index: 1; }
.playerIcon svg, .playerIcon span { vertical-align: top; font-size: 0; }
.playerIcon svg { transition: transform 0.3s; }
.playerIcon span { position: relative; left: -0.2rem; z-index: 5; }

@keyframes biilogo-pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  50% { -webkit-transform: scale3d(0.95, 0.95, 0.95); transform: scale3d(0.95, 0.95, 0.95); }
  100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
body { overflow-x: hidden; }

#success { position: fixed; right: 20px; bottom: 100px; background: #192847; padding: 10px 20px; border-radius: 25px; color: #fff; opacity: 0; /* Ẩn ban đầu */ transform: translateX(100%); transition: opacity 0.5s ease, transform 0.5s ease; }

/* Khi có class active, hiển thị thông báo */
#success.active { opacity: 1; transform: translateX(0); }

@media (max-width: 767px) { .playerIcon { right: 6rem; bottom: 12rem; width: 20rem; height: 20rem; }
  .playerIcon span { left: 3rem; }
  .pl { width: 23em; } }
.maps-link { display: inline-block; position: absolute; width: 23.7rem; height: 25.6rem; position: absolute; left: 22.3rem; top: 15rem; }
.maps-link img { opacity: 0; }

.maps-text { position: absolute; right: 26rem; top: 40rem; background: #fff; padding: 3rem; font-size: 1.8rem; font-weight: bold; border-radius: 0.5rem; line-height: 100%; }
@media (max-width: 767px) { .maps-text { padding-top: 4rem; font-size: 3.5rem; } }

.maps-text:before { content: ""; position: absolute; width: 27.9rem; height: 9.8rem; border: 1px solid #fff; left: -12rem; top: -8rem; border-left: 0; border-bottom: 0; z-index: 0; }

.maps-text::after { content: ""; position: absolute; width: 1rem; height: 1rem; background-color: #ffffff; border-radius: 100%; left: -12.5rem; top: -8.4rem; }

@media (max-width: 767px) { .maps-text { width: 40rem; text-align: center; line-height: 140%; }
  .maps-text:before { width: 17.9rem; left: -2rem; top: -8rem; }
  .maps-text::after { content: ""; position: absolute; width: 2rem; height: 2rem; background-color: #ffffff; border-radius: 100%; left: -2.5rem; top: -8.55rem; } }
#loading_container { display: flex; justify-content: center; align-items: center; height: 100vh; z-index: 9999; background: #fff; position: fixed; left: 0; top: 0; width: 100%; opacity: 1; transition: opacity 0.5s ease-out; }

.hidden { opacity: 0; }

:root { --hue: 223; --bg: hsl(var(--hue), 90%, 10%); --fg: hsl(var(--hue), 90%, 90%); }

.pl { display: block; margin: auto; width: 8em; height: auto; }
.pl__star, .pl__worm { animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; }
.pl__star { animation-name: spin; transform-origin: 32px 32px; }
.pl__worm { animation-name: worm-length, worm-move; }

/* Animations */
@keyframes spin { from { transform: rotate(0); }
  to { transform: rotate(1turn); } }
@keyframes worm-length { 0% { stroke-dasharray: 0.1 190.88; }
  5%,
            10% { stroke-dasharray: 28.632 162.248; }
  15%,
            20% { stroke-dasharray: 0.1 190.88; }
  25%,
            30% { stroke-dasharray: 28.632 162.248; }
  35%,
            40% { stroke-dasharray: 0.1 190.88; }
  45%,
            50% { stroke-dasharray: 28.632 162.248; }
  55%,
            60% { stroke-dasharray: 0.1 190.88; }
  65%,
            70% { stroke-dasharray: 28.632 162.248; }
  75%,
            80% { stroke-dasharray: 0.1 190.88; }
  85%,
            90% { stroke-dasharray: 28.632 162.248; }
  95%,
            100% { stroke-dasharray: 0.1 190.88; } }
@keyframes worm-move { 0%,
            5% { stroke-dashoffset: 0; }
  15%,
            25% { stroke-dashoffset: -76.352; }
  35%,
            45% { stroke-dashoffset: -152.704; }
  55%,
            65% { stroke-dashoffset: -229.056; }
  75%,
            85% { stroke-dashoffset: -305.408; }
  95%,
            100% { stroke-dashoffset: -381.76; } }
@media (max-width: 767px) { .pl { width: 19em !important; } }

/*# sourceMappingURL=style.min.css.map */