:root {
--color-primary: #98772e;
--color-secondary: #5d270d;
--color-third: #02332d;
--color-sub: #e3c17b;
--color-body: #eae0c8;
--color-white: #ffffff;
--header-height: 80px;
--header-height-mobile: 56px;
--header-up: calc(var(--header-height) * -1); --trans: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--font-primary: "SVN-RB Vitruv Display";
--font-secondary: "SVN-Graphik";
}
*,
*:before,
*:after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
input,
select,
textarea {
background-color: transparent;
outline: none;
}
button {
cursor: pointer;
background-color: transparent;
outline: none;
border: 0;
}
body {
min-height: 100vh;
font-weight: 400;
font-size: 16px;
line-height: 1;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_body.png);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
ul li {
margin: 0;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
margin: 0;
} .b1 {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.b2 {
font-family: var(--font-secondary);
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.font-btn {
font-family: var(--font-secondary);
font-size: 13px;
line-height: 14px;
font-weight: 600;
}
.h1 {
font-family: var(--font-primary);
font-size: 48px;
line-height: 64px;
font-weight: 400;
}
.h2 {
font-family: var(--font-primary);
font-size: 40px;
line-height: 48px;
font-weight: 400;
}
.h3 {
font-family: var(--font-primary);
font-size: 24px;
line-height: 40px;
font-weight: 400;
}
.h3-italic {
font-family: var(--font-primary);
font-size: 24px;
line-height: 40px;
font-weight: 400;
font-style: italic;
}
.h4-italic {
font-family: var(--font-primary);
font-size: 18px;
line-height: 32px;
font-weight: 400;
font-style: italic;
}
.h4-mobile {
font-family: var(--font-primary);
font-size: 18px;
line-height: 28px;
font-weight: 400;
font-style: italic;
}
.trans-05 {
transition: all 0.5s ease-in-out;
} .color-primary {
color: var(--color-primary);
}
.color-secondary {
color: var(--color-secondary);
}
.color-sub {
color: var(--color-sub);
}
.color-white {
color: var(--color-white);
} input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} input[type="number"] {
-moz-appearance: textfield;
}
.spacing-70 {
margin-top: 70px;
}
.spacing-175 {
margin-top: 175px;
}
.a-line-hover {
position: relative;
display: inline-block;
}
.a-line-hover::before {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background-color: var(--color-sub);
transition: all 0.4s ease-in-out;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.a-line-hover:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.a-line-hover-secondary {
position: relative;
display: inline-block;
}
.a-line-hover-secondary.current-menu-item::before {
width: 100%;
}
.a-line-hover-secondary::before {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background-color: var(--color-secondary);
transition: all 0.4s ease-in-out;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.a-line-hover-secondary:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.a-line-hover-white {
position: relative;
display: inline-block;
}
.a-line-hover-white::before {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background-color: var(--color-white);
transition: all 0.4s ease-in-out;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.a-line-hover-white:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.spacing-24 {
height: 24px;
}
.icon-wheel {
width: 50px;
height: 50px;
}
.icon-wheel svg {
width: auto;
height: auto;
} .lightpick > * {
font-family: var(--font-secondary);
}
.lightpick__day.is-today {
color: var(--color-primary);
font-weight: 600;
background-image: none;
}
.lightpick__days .lightpick__day.is-in-range {
background-color: var(--color-sub);
}
.lightpick__day.is-in-range:hover {
background-image: none;
background-color: var(--color-primary);
}
.lightpick__day.is-start-date {
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/ic_cricle_calender.png);
background-size: contain;
}
.lightpick__day:not(.is-disabled):hover,
.lightpick__day.is-start-date.is-end-date {
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/ic_cricle_calender.png);
}
.lightpick__day:not(.is-disabled):hover {
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/ic_cricle_calender.png);
color: #fff;
}
.lightpick__day.is-in-range {
background-color: rgba(194, 32, 51, 0.8);
color: #fff;
}
.lightpick__day.is-end-date.is-in-range.is-flipped,
.lightpick__day.is-start-date.is-in-range,
.lightpick__day.is-end-date.is-in-range,
.lightpick__day.is-start-date.is-in-range.is-flipped {
background-color: var(--color-primary);
font-weight: 500;
}
.lightpick__month-title > .lightpick__select-months,
.lightpick__day-of-the-week {
font-weight: 400;
}
.lightpick__month-title {
padding: 0;
margin-left: 8px;
}
.lightpick__month-title > .lightpick__select-months,
.lightpick__day-of-the-week {
text-align: left;
}
.lightpick__toolbar {
display: flex;
gap: 5px;
padding-top: 14px;
padding-right: 14px;
}
.lightpick__next-action,
.lightpick__previous-action {
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/ic_dropdown_white.svg);
background-repeat: no-repeat;
background-position: 11px 13px;
background-color: var(--color-primary);
margin: 0;
}
.lightpick__previous-action {
transform: rotate(90deg);
}
.lightpick__next-action {
transform: rotate(-90deg);
}  .intro {
background-color: #e1d7c0;
z-index: 9999;
inset: 0;
}  .header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
@media (min-width: 992px) {
.header__menu.left,
.header__menu.right {
min-width: 300px;
}
.header__menu.left {
justify-content: flex-end;
}
}
.header__bg {
position: absolute;
top: 70px;
pointer-events: none;
z-index: 79;
}
.header__hamburger .button-burger {
width: 40px;
height: 12px;
position: relative;
}
.button-burger__line {
position: absolute;
width: 100%;
height: 1px;
background-color: var(--color-secondary);
transition: all 0.4s ease-in-out;
}
.button-burger__line:first-child {
top: 0;
}
.button-burger__line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.button-burger__line:last-child {
bottom: 0;
width: 50%;
}
.header__hamburger.active .button-burger__line:first-child {
left: 0;
transform: translateY(6px) rotate(-135deg);
}
.header__hamburger.active .button-burger__line:nth-child(2) {
opacity: 0;
width: 0;
}
.header__hamburger.active .button-burger__line:last-child {
left: 0;
width: 100%;
transform: translateY(-5px) rotate(135deg);
}
.header__container {
padding: 0 40px;
height: var(--header-height);
width: 100%;
position: relative;
background-color: var(--color-white);
transition: all 0.5s ease-in-out;
z-index: 99;
}
.header__container .language__head {
gap: 8px;
}
.header__container .language__head:hover {
cursor: pointer;
}
.header__container .language__head img {
transition: all 0.5s ease;
}
.header__container .language__head.--active img {
transform: rotate(180deg);
}
.header__btn-language {
position: relative;
}
.language__body {
position: absolute;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 89;
bottom: -31px;
}
.language__body.dropdown--active {
opacity: 1;
visibility: visible;
}
.header__container.scrolled-down {
height: var(--header-height-scroll);
}
.header__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header__right {
gap: 24px;
width: 100px;
}
.header__lang {
gap: 8px;
}
.header__default {
transform: translateY(0);
transition: all 0.5s ease-in-out;
position: relative;
}
.header__default .btn-book {
width: 100px;
text-align: right;
}
.header__default .btn-book a {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
position: relative;
text-decoration: none;
color: var(--color-primary);
display: inline-block;
}
.header__default .btn-book a::before {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background-color: var(--color-primary);
transition: all 0.4s ease-in-out;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header__default .btn-book a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.header__search {
gap: 8px;
}
.header__active {
position: absolute;
left: 0;
right: 0;
}
.header__menu ul li a {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.header__menu ul li.active > a::after {
transform: scaleX(1);
}
.header__menu ul li.menu-item-has-children a::after {
width: calc(100% - 18px);
}
.header__menu ul li a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--color-secondary);
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header__menu ul li.menu-item-has-children .sub-menu a::after {
width: 100%;
}
.header__menu ul li.menu-item-has-children .sub-menu a.active::after,
.header__menu ul li.menu-item-has-children .sub-menu a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.header__menu ul li a.active::after,
.header__menu ul li a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.header__menu ul li .sub-menu {
position: absolute;
left: -40px;
width: calc(100% + 80px);
background-color: #f8f4e9;
top: 73px;
z-index: 79;
padding: 32px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_bg_capcap_white.png);
background-repeat: no-repeat;
background-size: 100% 37px;
background-position-y: -4px;
}
.header__menu ul li.menu-item-has-children .sub-menu {
display: flex;
justify-content: center;
gap: 24px;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: all 0.5s ease;
}
.header__menu ul li.menu-item-has-children > a {
position: relative;
}
.header__menu ul li.menu-item-has-children:hover > .sub-menu {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.header__menu ul li.menu-item-has-children:hover > a::before {
opacity: 1;
visibility: visible;
}
.header__menu ul li.menu-item-has-children > a::before {
content: "";
position: absolute;
bottom: -40px;
left: -50%;
height: 40px;
width: 200%;
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.language__item.color-secondary {
white-space: nowrap;
}
.header__center {
gap: 40px;
}
.header__menu ul {
list-style-type: none;
gap: 24px;
}
.header__menu ul li a {
text-align: left;
text-decoration: none;
}
.header__menu ul li a:hover {
color: var(--color-secondary);
} .spacing {
height: 50vh;
} .banner-hero__container {
height: 100vh;
width: 100%;
position: relative;
}
.banner-hero__img {
width: 100%;
height: 100%;
}
.banner-hero__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-hero__bg {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
}
.banner-hero__bg img {
width: 100%;
height: 110px;
object-fit: cover;
}
.banner-hero__booking {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/booking_bg.png);
background-size: cover;
width: 946px;
height: 92px;
z-index: 99;
}
.banner-hero__booking form {
gap: 24px;
transform: translateY(7px);
}
#block-search {
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/booking_bg.png);
mask-size: 100% 100%;
}
.banner-hero__booking form .date {
gap: 24px;
}
.banner-hero__booking form input {
width: 140px;
border: none;
padding-bottom: 12px;
border-bottom: 1px solid rgba(93, 39, 13, 0.2);
font-size: 16px;
line-height: 24px;
color: var(--color-secondary);
font-weight: 500;
}
.banner-hero__booking form input::placeholder {
font-size: 16px;
line-height: 24px;
font-weight: 500;
color: var(--color-secondary);
font-family: var(--font-secondary);
}
.banner-hero__booking form .select-destination {
width: 220px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(93, 39, 13, 0.2);
}
.select-destination .dropdown-custom__menu {
position: absolute;
left: -20px;
top: -30px;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_booking_mobile.png);
background-size: 100% 100%;
padding: 10px 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 99;
}
.select-destination .dropdown-custom__menu.dropdown-up {
top: unset;
bottom: -20px;
transform: translateY(100%);
padding-inline: 16px;
}
.select-destination .dropdown-custom__menu .dropdown-custom__item:hover {
cursor: pointer;
}
.select-destination .dropdown-custom__menu.dropdown--active {
opacity: 1;
visibility: visible;
}
.select-destination .destination-head img {
transition: all 0.5s ease;
}
.select-destination .destination-head .value-select {
font-weight: 500;
}
.select-destination .destination-head.--active img {
transform: rotate(180deg);
}
.select-destination .dropdown-custom__item {
font-weight: 500;
}
.banner-hero__booking form button {
width: 177px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-secondary);
color: var(--color-secondary);
transition: var(--trans);
transform: translateY(-3px);
}
.banner-hero__booking form button:hover {
color: var(--color-white);
border: 1px solid var(--color-primary);
background-color: var(--color-primary);
}
.banner-hero__container .line-cap {
position: absolute;
width: 4px;
height: 95px;
background-color: var(--color-secondary);
left: 50%;
transform: translateX(-50%);
bottom: -40px;
z-index: 2;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line.svg);
}
.banner-hero__form button {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
color: var(--color-secondary);
}  .title-sec__content .logo {
margin-bottom: 60px;
}
.title-sec__content h1 {
text-align: center;
margin-bottom: 60px;
}
.title-sec .line-cap-hotel {
position: absolute;
left: 50%;
width: 4px;
height: 100%;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line.svg);
}
.title-sec .line-hotels {
width: 4px;
height: 95px;
position: relative;
}  .hotels-sec__container {
position: relative;
padding: 0 40px;
padding-bottom: 150px;
}
.hotels-sec__container .lines__horizontal {
position: absolute;
height: 4px;
width: calc(50% - 40px);
left: 50%;
top: 0;
transform: translateY(-100%);
}
.hotels-sec__container .lines-horizontal {
background-color: var(--color-secondary);
width: 100%;
height: 100%;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
}
.hotels-sec__title {
position: absolute;
right: 44px;
top: 0;
transform: translateY(-50%);
text-align: center;
color: var(--color-secondary);
display: flex;
align-items: center;
padding-right: 109px;
padding-left: 63px;
z-index: 4;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_title.png);
}
.hotels-sec .lines__vertical {
position: absolute;
right: 40px;
top: -4px;
width: 4px;
height: calc(100% + 8px);
}
.hotels-sec.experience-content .section__lines {
height: 80px;
}
.footer__container--bottom .description a {
color: var(--color-secondary);
text-decoration: none;
}
.page-template-booking #be-booking-form {
margin-top: 40px;
}
.page-template-booking .be-title {
font-size: 40px;
line-height: 48px;
font-weight: 400;
font-family: var(--font-primary);
}
.page-template-booking .banner-hero__bg {
bottom: -1px;
}
.page-template-booking .footer__container--top .box-icon {
display: block !important;
}
.page-star-cruise .swiper-img-act {
height: 100%;
}
.swiper-img-act .video {
width: 100%;
height: 100%;
}
.swiper-img-act .video iframe {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-star-cruise .swiper-img-act img {
object-fit: cover;
}
@media (max-width: 767px) {
.hotels-sec.experience-content .section__lines {
height: 40px;
}
}
.lines-vertical {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_full.svg);
}  .hotels-sec__filter {
padding-top: 80px;
}
.hotels-sec__content {
max-width: 550px;
width: 100%;
}
.hotels-sec__top {
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: 60px;
}
.gallery-sec.full-filter .hotels-sec__top {
grid-template-columns: 2fr 1fr;
}
.hotels-sec__top ul {
border-bottom: none;
gap: 32px;
}
.hotels-sec__top ul li button {
position: relative;
padding: 0;
margin: 0;
}
.hotels-sec__top ul li button::before {
content: "";
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--color-secondary);
width: 0%;
height: 1px;
transition: var(--trans);
}
.hotels-sec__top ul li button:hover {
color: var(--color-secondary);
}
.hotels-sec__top ul li button:hover::before {
width: 100%;
}
.hotels-sec__top ul li button.active::before {
width: 100%;
}
.hotels-sec__top .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
border: none;
background-color: transparent;
color: var(--color-secondary);
}
.hotels-sec__top .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active::before {
opacity: 1;
visibility: visible;
}
.hotels-sec__top .nav-tabs .nav-link {
border: none;
line-height: 19px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 0;
}
.swiper-button-prev::after,
.hotels-sec .swiper-button-next::after {
font-size: 0;
}
.hotels-sec .swiper-button-prev,
.hotels-sec .swiper-button-next {
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid var(--color-secondary);
display: flex;
justify-content: center;
align-items: center;
top: 130px;
margin: 0;
transition: all 0.5s ease-in-out;
}
.hotels-sec .swiper-button-prev:hover,
.hotels-sec .swiper-button-next:hover {
background-color: var(--color-secondary);
}
.hotels-sec .swiper-button-prev:hover svg path,
.hotels-sec .swiper-button-next:hover svg path {
stroke: var(--color-sub);
}
.hotels-sec .swiper-button-prev {
left: -85px;
}
.hotels-sec .swiper-button-next {
right: -85px;
}
.hotels__slider {
position: relative;
}
.swiper-button-prev svg,
.swiper-button-next svg {
width: auto;
height: auto;
transform: translateX(1px);
}
.swiper-button-prev svg path,
.swiper-button-next svg path {
transition: all 0.4s ease-in-out;
}
.swiper-button-prev svg {
transform: rotate(180deg) translateX(1px);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0.5;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0.5;
}
.hotels-sec .hotels__img {
width: 100%; aspect-ratio: 254 / 320;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.hotels-sec .hotels__img .img-hover {
position: absolute;
inset: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
visibility: hidden;
}
.hotels-sec .hotels__img:hover .img-hover {
opacity: 1;
visibility: visible;
}
.hotels-sec .hotels__img img {
width: 100%;
height: 100%;
object-fit: cover;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/line_cc_new.svg);
mask-size: cover;
}
.hotels__box:hover .hotels__name,
.hotels__box:hover .hotels__location {
color: var(--color-primary);
}
.hotels__box:hover .hotels__img .img-hover {
z-index: 0;
opacity: 1;
visibility: visible;
}
.hotels-sec .hotels__location {
margin-bottom: 12px;
}
.hotels-sec .hotels__name,
.hotels-sec .hotels__location {
transition: var(--trans);
}  .cruise__container {
position: relative;
padding: 0 40px 120px;
}
.cruise__container .lines__horizontal {
position: absolute;
top: 0;
right: 40px;
left: unset;
width: calc(100% - 80px);
height: 4px;
}
.cruise__container .cruise-stroke {
position: absolute;
z-index: -5;
right: 40px;
top: 110px;
transform: translateX(-70%);
width: 100%;
aspect-ratio: 1289 / 300;
transition: all 1s ease-in-out;
}
.cruise__container .cruise-stroke.active {
transform: translateX(0);
}
.cruise__container .cruise-stroke img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cruise__container .lines__vertical {
position: absolute;
top: 0;
left: 40px;
width: 4px;
height: calc(100% + 4px);
z-index: -3;
}
.cruise__container .lines-horizontal {
position: absolute;
right: 0;
background-color: var(--color-secondary);
width: 100%;
height: 100%;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
}
.cruise__container .cruise__title {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transform: translateY(-50%);
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 113px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_body.png);
z-index: 4;
white-space: nowrap;
}
.cruise__container .cruise__title h2 {
transform: translateX(-25px);
}
.crusie__body {
padding-top: 96px;
}
.cruise__container .crusie__image {
width: 100%;
aspect-ratio: 668 / 358;
margin-bottom: 40px;
position: relative;
}
.cruise__container .crusie__image img {
width: 100%;
height: 100%;
object-fit: cover;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/line_cc_ho.svg);
mask-size: cover;
}
.cruise__container .crusie__name {
text-align: center;
margin-bottom: 16px;
}
.cruise__container .crusie__desc {
text-align: center;
margin-bottom: 40px;
}
.cruise__container .crusie__btn {
display: flex;
justify-content: center;
align-items: center;
}
.cruise__container .crusie__btn a {
display: flex;
justify-content: center;
align-items: center;
width: 142px;
height: 44px;
border: 1px solid var(--color-secondary);
text-decoration: none;
transition: var(--trans);
font-size: 16px;
line-height: 24px;
}
.cruise__container .crusie__btn a:hover {
color: var(--color-white);
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
}  .restaurant__container {
background-color: var(--color-third);
position: relative;
padding: 65px 40px 90px;
}
.restaurant__content {
position: relative;
}
.restaurant-bar__menu {
position: absolute;
bottom: 0px;
left: 0;
z-index: 99;
display: flex;
align-items: center;
gap: 24px;
}
.spa__link {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
}
.spa__link a {
position: relative;
display: inline-block;
transition: all 0.3s;
text-decoration: none;
}
.spa__link a:hover {
color: var(--color-secondary);
}
.spa__link a::before {
content: "";
position: absolute;
left: 0;
bottom: 2px;
background-color: var(--color-secondary);
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.spa__link a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
@media (max-width: 991px) {
.restaurant-bar__menu {
left: 50%;
transform: translateX(-50%);
bottom: -10px;
}
}
.restaurant-bar__menu a {
display: flex;
align-items: center;
gap: 24px;
text-decoration: none;
}
.restaurant-bar__menu a {
position: relative;
display: inline-block;
transition: all 0.3s;
}
.restaurant-bar__menu a:hover {
color: var(--color-sub);
}
.restaurant-bar__menu a::before {
content: "";
position: absolute;
left: 0;
bottom: 0px;
background-color: var(--color-sub);
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.restaurant-bar__menu a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.restaurant__container .swiper-button-prev,
.restaurant__container .swiper-button-next {
width: 60px;
height: 60px;
border-radius: 50%; display: flex;
justify-content: center;
align-items: center;
margin: 0;
bottom: -69px;
top: unset;
transition: all 0.5s ease-in-out;
}
.restaurant__container .swiper-button-prev:hover,
.restaurant__container .swiper-button-next:hover { }
.restaurant__container .swiper-button-prev:hover svg path,
.restaurant__container .swiper-button-next:hover svg path { }
.restaurant__container .swiper-button-prev {
left: 70px;
}
.restaurant__container .swiper-button-next {
left: unset;
right: 70px;
}
.swiper-restaurant .swiper-slide {
overflow: hidden;
}
.swiper-restaurant .swiper-img {
width: 100%;
position: relative;
aspect-ratio: unset;
}
.page-star-cruise .swiper-restaurant .swiper-img img {
mask-image: none;
width: 100%;
aspect-ratio: 670 / 375;
}
.single-hotel .restaurant__container .restaurant__image {
width: 100%;
aspect-ratio: 670 / 375;
}
.single-hotel .swiper-restaurant {
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/line_cc_ho.png);
mask-size: 100% 100%;
}
.single-hotel .swiper-restaurant .swiper-img img {
width: 100%;
aspect-ratio: 670 / 375;
}
.page-star-cruise .swiper-restaurant .swiper-img {
position: relative;
}
.page-star-cruise .swiper-restaurant .swiper-img {
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/line_cc_ho.png);
mask-size: 100% 100%;
}
.swiper-restaurant .swiper-img img {
width: 100%;
height: 100%;
object-fit: cover;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/line_cc_ho.svg); mask-size: cover;
}
.restaurant__container .restaurant__image {
position: relative;
width: 670px;
aspect-ratio: unset;
}
.swiper-res-content .swiper-box {
max-width: 320px;
width: 100%;
}
.swiper-res-content .swiper-box .box-title {
margin-bottom: 14px;
}
.restaurant__container .restaurant__image .swiper-pagination {
top: unset;
bottom: -40px;
width: 350px;
height: 2px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.2);
overflow: hidden;
border-radius: 12px;
}
.restaurant__container
.restaurant__image
.swiper-pagination
.swiper-pagination-progressbar-fill {
background-color: var(--color-sub);
overflow: hidden;
border-radius: 12px;
}
.restaurant__container .res-bg-top {
position: absolute;
left: 0;
top: -60px;
right: 0;
z-index: 1;
}
.restaurant__container .res-bg-top img {
width: 100%;
height: 100%;
}
.restaurant__container .res-bg-bottom {
position: absolute;
bottom: -70px;
left: 0;
right: 0;
}
.restaurant__container .lines__vertical--left-top {
position: absolute;
top: -55px;
left: 40px;
width: 4px;
height: 0;
z-index: 2;
background-color: var(--color-sub);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ver_full.svg);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.restaurant__container.active .lines__vertical--left-top {
height: 150px;
}
.restaurant__container .lines__vertical--right-bottom {
position: absolute;
top: 100px;
right: 40px;
width: 4px;
height: calc(100% - 33px);
z-index: 2;
}
.restaurant__container .lines__vertical--right-bottom .lines-vertical {
background-color: var(--color-sub);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ver_full.svg);
width: 100%;
height: 100%;
}
.restaurant__container .line__horizontal {
position: absolute;
left: 40px;
top: 100px;
width: calc(100% - 80px);
height: 4px;
}
.restaurant__container .line__horizontal .lines-horizontal {
width: 100%;
height: 100%;
position: absolute;
left: 0;
background-color: var(--color-sub);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
top: -4px;
}
.restaurant__title {
margin-bottom: 130px;
display: flex;
align-items: center;
position: absolute;
left: 40px;
padding: 0 113px;
background-color: var(--color-third);
}
.restaurant__title h2 {
transform: translateX(-50px);
}
.restaurant__body {
margin-top: 142px;
}  .testimonial-sec {
padding-top: 182px;
}
.testimonial__container {
position: relative;
padding: 0 40px;
}
.testimonial__container .line__horizontal--left {
position: absolute;
left: 40px;
top: 0;
background-color: var(--color-secondary);
height: 4px;
width: calc((100% / 12 * 4) - 40px);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
}
.testimonial__container .line__vertical--top-right {
position: absolute;
width: 4px;
height: 0;
right: 40px;
top: -115px;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ver_full.svg);
transform-origin: bottom top;
transition: all 0.1s;
z-index: 3;
}
.testimonial__container.active .line__vertical--top-right {
height: 119px;
}
.testimonial__container .line__horizontal {
position: absolute;
right: 40px;
top: 0;
height: 4px;
width: calc(100% - 80px);
}
.testimonial__container .line__horizontal .lines-horizontal {
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
background-color: var(--color-secondary);
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
.testimonial__container .line__vertical--left {
position: absolute;
width: 4px;
height: calc(100% + 4px);
}
.testimonial__title {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 113px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_title.png);
z-index: 4;
white-space: nowrap;
}
.testimonial__title h2 {
transform: translateX(-25px);
}
.testimonial__body {
padding-top: 112px;
}
.testimonial__content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-bottom: 60px;
}
.testimonial__content .box {
max-width: 670px;
text-align: center;
}
.testimonial__content .box .desc {
font-size: 24px;
font-weight: 400;
line-height: 38px;
text-align: center;
color: var(--color-secondary);
margin-bottom: 12px;
}
.testimonial__content .box .author a {
text-decoration: none;
transition: all 0.3s ease;
}
.testimonial__content .box .author a:hover {
color: var(--color-secondary);
}
.testimonila__item {
transition: all 1s ease-in-out;
width: 25%;
}
.hotel-detail .testimonila__item .box-gif {
transform: translateY(110px);
}
@media (min-width: 1620px) {
.hotel-detail .testimonila__item .box-gif {
transform: translateY(160px);
}
}
.testimonila__item .box-gif {
width: 190px;
height: 140px;
transform: translateY(110px);
}
.testimonila__item .box-gif img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial__body {
padding-bottom: 93px;
}
.testimonial__list {
padding-bottom: 27px;
border-bottom: 1px solid #5d270d99;
gap: 15px;
}
.testimonila__item .box {
width: 100%;
aspect-ratio: 277 / 305;
background-color: var(--bg);
padding: 40px;
position: relative;
}
.testimonila__item .box::before {
content: "";
position: absolute;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_border_pattern.png);
mask-size: 100% 100%;
inset: -1px;
background-color: #dfd7bf;
}
.testimonila__item .box .icon:hover svg path {
color: var(--color-secondary);
}
.testimonila__item .box-gif img {
opacity: 1;
}
.testimonila__item:nth-child(1) {
transform: rotate(3deg);
}
.testimonila__item:nth-child(1) .box .content {
color: var(--color-secondary);
}
.testimonila__item:nth-child(2) .box .content {
color: var(--color-white);
}
.testimonila__item:nth-child(3) .box .content {
color: var(--color-sub);
}
.testimonila__item:nth-child(1) .box .author .name {
color: var(--color-secondary);
}
.testimonila__item:nth-child(2) .box .author .name {
color: var(--color-white);
}
.testimonila__item:nth-child(3) .box .author .name {
color: var(--color-sub);
}
.testimonila__item:nth-child(1) .box .author .icon svg {
color: var(--color-secondary);
}
.testimonila__item:nth-child(2) .box .author .icon svg {
color: var(--color-white);
}
.testimonila__item:nth-child(3) .box .author .icon svg {
color: var(--color-sub);
}
.testimonila__item:nth-child(2) {
transform: translate(-95%, -15px) rotate(-3deg);
}
.testimonila__item:nth-child(3) {
transform: translate(-190%) rotate(4deg);
}
.testimonila__item:nth-child(4) {
transform: translate(-180%);
display: flex;
justify-content: center;
}
.testimonial__list.active .testimonila__item:nth-child(2) {
transform: translate(0, -15px) rotate(-3deg);
}
.testimonial__list.active .testimonila__item:nth-child(3) {
transform: translateX(0) rotate(4deg);
}
.testimonial__list.active .testimonila__item:nth-child(4) {
transform: translateX(0);
justify-content: end;
}  .offer__container {
position: relative;
padding: 0 40px 192px;
}
.offer__container .swiper-button-prev,
.offer__container .swiper-button-next {
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid var(--color-secondary);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
top: 190px;
transition: all 0.5s ease-in-out;
}
.offer__container .swiper-button-prev:hover,
.offer__container .swiper-button-next:hover {
background-color: var(--color-secondary);
}
.offer__container .swiper-button-prev:hover svg path,
.offer__container .swiper-button-next:hover svg path {
stroke: var(--color-sub);
}
.offer__container .swiper-button-prev {
left: 25px;
}
.offer__container .swiper-button-next {
right: 25px;
}
.offer-sec .box .box-img {
width: 100%;
aspect-ratio: 350 / 440;
margin-bottom: 24px;
position: relative;
}
.offer-sec .box .box-img:hover {
cursor: pointer;
}
.offer-sec.cruise-iti .box .box-img .video {
width: 100%;
}
.offer-sec.cruise-iti .box .box-img video {
width: 100%;
height: 100%;
object-fit: cover;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/line_cc_new.svg);
mask-size: cover;
}
.offer-sec .box .box-img img {
width: 100%;
height: 100%;
object-fit: cover;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/line_cc_new.svg);
mask-size: cover;
}
.offer__body {
position: relative;
}
.offer-sec .box .box-img .img-hover {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: all 0.6s ease;
}
.offer-sec .box .box-img:hover .img-hover {
z-index: 0;
opacity: 1;
visibility: visible;
}
.offer-sec .box:hover .title,
.offer-sec .box:hover .tag {
color: var(--color-primary);
}
.offer-sec .box:hover .img-hover {
z-index: 2;
opacity: 1;
visibility: visible;
}
.offer-sec .box .tag {
font-size: 13px;
font-weight: 600;
line-height: 14px;
color: var(--color-secondary);
margin-bottom: 12px;
transition: var(--trans);
}
.offer-sec .box .title {
font-size: 24px;
font-weight: 400;
line-height: 32px;
color: var(--color-secondary);
transition: var(--trans);
}
.offer-sec .lines__horizontal {
position: absolute;
left: 40px;
top: 0;
height: 4px;
width: calc(100% - 80px);
}
.offer-sec .lines__horizontal .lines-horizontal {
width: 100%;
height: 100%;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
position: absolute;
left: 0;
}
.offer-sec .lines__vertical {
position: absolute;
right: 40px;
top: 0;
width: 4px;
height: calc(100% + 4px);
}
.offer-sec .section__lines {
height: 110px;
}
.offer-sec__title,
.activities-sec__title {
position: absolute;
transform: translateY(-50%);
right: 40px;
display: flex;
align-items: center;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_title.png);
padding-right: 113px;
padding-left: 63px;
}
.offer-sec__title .title {
font-size: 48px;
font-weight: 400;
line-height: 64px;
color: var(--color-secondary);
}
.offer-sec .swiper-pagination {
top: unset;
width: 350px;
height: 2px;
border-radius: 50px;
left: 50%;
transform: translateX(-50%);
bottom: -60px;
background-color: rgba(93, 39, 13, 0.2);
}
.offer-sec .swiper-pagination-progressbar-fill {
background-color: var(--color-secondary);
border-radius: 50px;
overflow: hidden;
}  .newsletter__sec {
position: relative;
padding: 0 40px;
}
.newsletter__body {
padding-block: 45px;
}
.newsletter__body .content .input-sizer {
position: relative;
display: block;
}
.newsletter__body .content .input-sizer .text {
visibility: hidden;
display: inline-block;
white-space: pre;
min-width: 20px;
text-decoration: underline;
padding-right: 5px;
}
.newsletter__body .content .input-sizer input {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
max-width: 100%;
min-width: 20px;
}
.newsletter__body .newsletter-title {
font-size: 40px;
font-weight: 400;
line-height: 48px;
font-style: italic;
color: var(--color-secondary);
max-width: 260px;
}
.newsletter__body .form {
padding-left: 50px;
}
.newsletter__body .form .content,
.newsletter__body .form p {
font-size: 24px;
font-weight: 400;
line-height: 32px;
text-align: left;
color: var(--color-secondary);
}
.newsletter__body .form .content input {
border: 0;
}
.newsletter__body .form .content input[type="number"] {
width: 160px;
}
.newsletter__body .form .content input::placeholder {
font-size: 24px;
font-weight: 400;
line-height: 32px;
text-align: left;
color: var(--color-secondary);
text-decoration: underline;
font-style: italic;
}
.newsletter__body .form .content .name {
width: 175px;
}
.btn__submit button {
display: flex;
justify-content: center;
align-items: center;
width: 142px;
height: 44px;
border: 1px solid var(--color-secondary);
text-decoration: none;
transition: var(--trans);
font-size: 16px;
line-height: 24px;
}
.btn__submit button:hover {
color: var(--color-white);
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.newsletter__sec .lines__vertical--right {
position: absolute;
top: -1px;
right: 40px;
width: 4px; height: 0;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_full.svg);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.news-reverse .newsletter__sec .lines__vertical--right {
top: unset;
bottom: 0;
}
.newsletter__sec.active .lines__vertical--right {
height: 100%;
}
.newsletter__sec .lines__vertical--left {
position: absolute;
bottom: 0px;
left: 40px;
width: 4px;
height: 0;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_full.svg);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition-delay: 0.5s;
}
.newsletter__sec.active .lines__vertical--left {
height: 100%;
}
.newsletter__sec .lines__horizontal--top {
position: absolute;
top: 0;
left: 40px;
width: 0;
height: 4px;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition-delay: 0.75s;
}
.newsletter__sec.active .lines__horizontal--top {
width: calc(100% - 80px);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition-delay: 0.75s;
}
.news-reverse .newsletter__sec .lines__horizontal--top {
left: unset;
right: 40px;
}
.newsletter__sec .lines__horizontal--bottom {
position: absolute;
bottom: 0;
right: 40px;
width: 0;
height: 4px;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition-delay: 0.25s;
}
.newsletter__sec.active .lines__horizontal--bottom {
width: calc(100% - 80px);
}
.news-reverse .newsletter__sec.active .lines__vertical--left {
transition-delay: 0s;
bottom: unset;
top: 0;
}
.news-reverse .newsletter__sec .lines__horizontal--bottom {
right: unset;
left: 40px;
transition-delay: 0.25s;
}  .footer-sec {
padding: 0 40px;
}
.footer__container {
padding-top: 40px;
background-color: var(--color-third);
position: relative;
}
.footer__container .on-top {
position: absolute;
right: 32px;
top: 40px;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
z-index: 99;
gap: 4px;
}
.footer__container .on-top .icon {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-white);
border-radius: 50%;
gap: 4px;
transition: all 0.3s ease;
}
.footer__container .on-top .icon svg {
transform: translateY(-2px);
}
.footer__container .on-top .icon:hover,
.footer__container .on-top:hover .icon {
border: 1px solid var(--color-sub);
}
.footer__container .on-top .icon svg path {
transition: all 0.3s ease;
}
.footer__container .on-top:hover .icon svg path {
stroke: var(--color-sub);
}
.footer__container .on-top p {
font-size: 14px;
line-height: 20px;
font-family: var(--font-secondary);
color: var(--color-white);
transition: all 0.3s ease;
}
.footer__container .on-top:hover p {
color: var(--color-sub);
}
.footer__container--top {
margin-bottom: 40px;
position: relative;
}
.footer__container--bottom {
position: relative;
}
.footer__container--bottom .desc p {
color: var(--color-secondary);
}
.footer__container--bottom .gif {
position: absolute;
top: -83px;
right: 25%;
width: 114px;
height: 85px;
display: block;
}
.footer__container .box-title {
margin-bottom: 24px;
}
.footer__container .box-office .address {
margin-bottom: 16px;
padding-right: 30px;
}
.footer__container .box-office .gmail a,
.footer__container .box-office .phone a {
text-decoration: none;
}
.footer__container .box-office .gmail a:hover,
.footer__container .box-office .phone a:hover {
color: var(--color-sub);
}
.footer__container .box-office .gmail {
margin-bottom: 12px;
}
.footer__container .box-about {
padding-left: 50px;
}
.footer__container .box-about .about-list ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 80px;
padding-left: 0;
list-style-type: none;
width: 50%;
}
.footer__container .box-about .about-list ul li {
width: max-content;
}
.footer__container .box-about .about-list ul li a {
text-decoration: none;
}
.footer__container .box-about .about-list ul li a:hover {
color: var(--color-sub);
}
.footer__container .box-icon ul {
padding-left: 0;
list-style-type: none;
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.footer__container .box-icon ul li a svg path {
transition: all 0.3s ease;
}
.footer__container .box-icon ul li a:hover svg path {
fill: var(--color-primary);
}
.footer__container--bottom {
background-repeat: no-repeat;
padding-block: 30px;
animation: run 100s infinite linear;
-webkit-animation: run 100s infinite linear;
background-size: cover;
}
.footer__container--bottom .box {
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-detail {
padding-block: 24px;
}
.footer-detail .box-page {
padding-left: 50px;
}
.footer-detail .box-page ul {
list-style-type: none;
padding-left: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.footer-detail .box-page ul li a,
.footer-detail .author a {
text-decoration: none;
color: var(--color-secondary);
}
.footer-detail .hotel {
color: var(--color-secondary);
}
@-webkit-keyframes run {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}  .page-template-wp .title-sec .title-sec__content h1 {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
margin-bottom: 40px;
}
.page-template-wp .title-sec .title-sec__content .desc {
text-align: center;
max-width: 670px;
width: 100%;
margin-bottom: 60px;
}
.page-template-wp .hotels-sec__container .lines__horizontal {
width: calc(50% - 40px);
}
.page-template-wp .hotels-sec__container .hotel-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 80px 40px;
}
.page-template-wp .hotels-sec .hotels__img {
width: 100%;
aspect-ratio: 350 / 440;
position: relative; }
.page-template-wp .hotels-sec .hotels__img::before {
content: "";
position: absolute;
inset: 0px;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_border_pattern.png);
mask-size: 100% 100%;
}
.page-template-wp .hotels-sec__container {
padding-bottom: 120px;
}  .page-detail .title-sec .title-sec__content h1 {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
margin-bottom: 40px;
}
.page-detail .title-sec .title-sec__content .desc {
text-align: center;
max-width: 670px;
width: 100%;
margin-bottom: 60px;
}
.page-detail .title-sec .title-sec__content .button-list {
gap: 16px;
margin-bottom: 60px;
}
.page-detail .title-sec .title-sec__content .btn-default a {
text-decoration: none;
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
color: var(--color-secondary);
width: 152px;
height: 44px;
border: 1px solid var(--color-secondary);
transition: var(--trans);
}
.page-detail .title-sec .title-sec__content .btn-default a:hover {
background-color: var(--color-primary);
color: var(--color-white);
border: 1px solid var(--color-primary);
}
.page-detail .hotels__box {
position: relative;
background-color: #000;
}
.page-detail .hotels__box .bg-slider {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: var(--data-bg);
background-size: cover;
}
.page-detail .swiper-tab-detail .swiper-wrapper {
flex: none;
align-items: flex-start;
display: flex;
}
.page-detail .swiper-tab-detail .swiper-slide {
flex: none;
}
.page-detail .swiper-tab-detail .swiper-slide .hotel__card {
position: relative;
overflow: hidden;
margin-bottom: 24px;
display: block;
width: 100%;
aspect-ratio: 545 / 307;
}
.page-detail .swiper-tab-detail .swiper-slide .hotel__card::before {
content: "";
position: absolute;
inset: -1px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_border_pattern.png);
background-size: 100% 100%;
z-index: 9;
pointer-events: none;
}
.page-detail .swiper-tab-detail .swiper-slide .hotel__card .hotel__img {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
}
.page-detail .swiper-tab-detail .swiper-slide .hotel__card .hotel__img img {
width: 100%;
height: 100%;
object-fit: cover;
max-width: none;
transition: all 0.5s ease;
padding: 1px;
}
.page-detail
.swiper-tab-detail
.swiper-slide
.hotel__card
.hotel__img
.img-hover {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: all 0.6s ease;
}
.page-detail .swiper-tab-detail .swiper-slide.is-active .hotel__img img,
.page-detail .swiper-tab-detail .swiper-slide .hotel__content .tag {
margin-bottom: 12px;
}
.page-detail
.swiper-tab-detail
.swiper-slide:hover
.hotel__card
.hotel__img
.img-hover {
opacity: 1;
visibility: visible;
}
.page-detail .swiper-tab-detail .swiper-slide:hover .hotel__content .tag,
.page-detail .swiper-tab-detail .swiper-slide:hover .hotel__content .title {
color: var(--color-primary);
}
.page-detail .hotels__slider .swiper-pagination {
top: unset;
bottom: -60px;
width: 350px;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
height: 2px;
border-radius: 12px;
background-color: #5d270d33;
}
.page-detail
.hotels__slider
.swiper-pagination
.swiper-pagination-progressbar-fill {
background-color: var(--color-secondary);
overflow: hidden;
border-radius: 22px;
}
.page-detail .hotels-sec__container {
padding-bottom: 210px;
}
.page-star-cruise .hotels-sec__container {
padding-bottom: 120px;
}
.facilities-sec {
padding-top: 182px;
}
.facilities-sec .testimonial__body {
padding-bottom: 132px;
}
.facilities__container {
position: relative;
padding: 0 40px;
}
.facilities__container .line__horizontal--left {
position: absolute;
left: 40px;
top: 0;
background-color: var(--color-secondary);
height: 4px;
width: calc((100% / 12 * 4) - 40px);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
}
.facilities__container .line__vertical--top-right {
position: absolute;
width: 4px;
height: 0;
right: 40px;
top: -115px;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ver_full.svg);
transform-origin: bottom top;
transition: all 0.5s;
z-index: 3;
}
.facilities__container.active .line__vertical--top-right {
height: 119px;
}
.facilities__container .line__horizontal {
position: absolute;
right: 40px;
top: 0;
height: 4px;
width: calc(100% - 80px);
}
.facilities__container .line__horizontal .lines-horizontal {
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
background-color: var(--color-secondary);
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
.facilities__container .line__vertical--left {
position: absolute;
width: 4px;
height: calc(100% + 4px); }
.facilities__title {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 113px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_title.png);
z-index: 4;
}
.facilities__title h2 {
transform: translateX(-25px);
}
.facilities-sec .facilities__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 60px 10px;
}
.facilities-sec .facilities__list .facilities__item .box {
display: flex;
flex-direction: column;
align-items: center;
}
.facilities-sec .facilities__list .facilities__item .box .icon {
margin-bottom: 16px;
}
.activities-sec {
position: relative;
}
.activities-sec .swiper-button-prev,
.activities-sec .swiper-button-next {
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
bottom: -68px;
top: unset;
transition: all 0.5s ease-in-out;
}
.activities-sec .swiper-button-prev:hover,
.activities-sec .swiper-button-next:hover {
background-color: transparent !important;
}
.activities-sec .swiper-button-prev:hover svg path,
.activities-sec .swiper-button-next:hover svg path {
stroke: var(--color-secondary);
}
.activities-sec .swiper-button-prev {
left: 90px;
}
.activities-sec .swiper-button-next {
left: unset;
right: 90px;
}
@media (min-width: 1620px) {
.activities-sec .swiper-button-prev,
.activities-sec .swiper-button-next {
bottom: -68px !important;
top: unset !important;
}
.activities-sec .swiper-button-prev {
left: 200px;
}
.activities-sec .swiper-button-next {
left: unset;
right: 200px;
}
}
.act-img .swiper-slide {
overflow: hidden;
}
.act-img .swiper-img {
width: 670px;
height: 375px;
}
.act-img .swiper-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.activities-sec .act-img {
position: relative;
width: 670px;
aspect-ratio: unset;
}
.act-content .swiper-box {
max-width: 320px;
width: 100%;
}
.act-content .swiper-box .box-title {
margin-bottom: 14px;
}
.activities-sec .act-img .swiper-pagination {
top: unset;
bottom: -40px;
width: 350px;
height: 2px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.2);
overflow: hidden;
border-radius: 12px;
}
.activities-sec
.restaurant__image
.swiper-pagination
.swiper-pagination-progressbar-fill {
background-color: var(--color-sub);
overflow: hidden;
border-radius: 12px;
}
.activities-sec .res-bg-top {
position: absolute;
left: 0;
top: -60px;
right: 0;
z-index: 1;
}
.activities-sec .res-bg-top img {
width: 100%;
height: 100%;
}
.activities-sec .res-bg-bottom {
position: absolute;
bottom: -70px;
left: 0;
right: 0;
}
.activities-sec .lines__vertical--left-top {
position: absolute;
top: -55px;
left: 40px;
width: 4px;
height: 0;
z-index: 2;
background-color: var(--color-sub);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ver_full.svg);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.activities-sec.active .lines__vertical--left-top {
height: 150px;
}
.activities-sec .lines__vertical--right-bottom {
position: absolute;
top: 100px;
right: 40px;
width: 4px;
height: calc(100% - 33px);
z-index: 2;
}
.activities-sec .lines__vertical--right-bottom .lines-vertical {
background-color: var(--color-sub);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ver_full.svg);
width: 100%;
height: 100%;
}
.activities-sec .line__horizontal {
position: absolute;
left: 40px;
top: 100px;
width: calc(100% - 80px);
height: 4px;
}
.activities-sec .line__horizontal .lines-horizontal {
width: 100%;
height: 100%;
position: absolute;
left: 0;
background-color: var(--color-sub);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
top: -4px;
}
.activities-sec .lines__horizontal {
position: absolute;
left: 40px;
top: 0;
height: 4px;
width: calc(100% - 80px);
}
.activities-sec .lines__horizontal .lines-horizontal {
width: 100%;
height: 100%;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
position: absolute;
left: 0;
}
.activities-sec .lines__vertical {
position: absolute;
right: 40px;
top: 0;
width: 4px;
height: calc(100% + 4px);
}
.activities-sec .lines__horizontal--bottom {
position: absolute;
right: 40px;
bottom: 0;
height: 4px;
width: calc(100% - 80px);
}
.activities-sec .lines__horizontal--bottom .lines-horizontal {
width: 100%;
height: 100%;
position: absolute;
right: 0;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
background-color: var(--color-secondary);
}
.activities-sec .section__lines {
height: 142px;
}
.activities-sec .content-image {
position: relative;
width: 100%;
aspect-ratio: 670 / 375;
}
.page-star-cruise .activities-sec .content-image img {
width: 100%;
aspect-ratio: 670 / 375;
}
.activities-sec .swiper-pagination {
top: unset;
bottom: -40px;
width: 350px;
height: 2px;
background-color: #5d270d33;
overflow: hidden;
border-radius: 20px;
left: 50%;
transform: translateX(-50%);
}
.activities-sec .swiper-pagination .swiper-pagination-progressbar-fill {
background-color: var(--color-secondary);
}
.page-detail .testimonial-sec {
padding-top: 0;
}
.hotel-detail .offer-sec__title {
right: unset;
left: 44px;
} .page-template-wp .activities-sec__title {
right: unset;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 113px;
}
.page-template-wp .activities-sec__title h2 {
transform: translateX(-25px);
}
.page-star-cruise .activities-sec {
padding-top: 182px;
}
.page-star-cruise .offer-sec .lines__horizontal .lines-horizontal {
left: unset;
right: 0;
}
.page-star-cruise .activities-sec .lines__vertical {
right: unset;
left: 40px;
}
.page-star-cruise .testimonial__container .line__horizontal .lines-horizontal {
right: unset;
left: 0px;
}
.page-star-cruise .activities-sec .line__vertical--top-right {
position: absolute;
width: 4px;
height: 0;
right: 40px;
top: -115px;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ver_full.svg);
transition: all 0.3s ease;
z-index: 3;
}
.page-star-cruise
.activities-sec
.offer__container.active
.line__vertical--top-right {
height: 119px;
}
.page-star-cruise .testimonial__container .line__vertical--left {
left: unset;
right: 40px;
}
.page-star-cruise .floor-plane .cruise__container .lines-horizontal {
left: 0;
right: unset;
}
.page-star-cruise .floor-plane .cruise__container .cruise__title {
right: 44px;
left: unset;
transform: translate(0, -50%);
}
.page-star-cruise .floor-plane .cruise__container .lines__vertical {
left: unset;
right: 40px;
}
.page-star-cruise .floor-plane .cruise__container .cruise__title {
padding-inline: 113px;
} .page-star-cruise .cruise__container .floor-plane__title {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transform: translateY(-50%);
position: absolute;
right: 44px;
padding-left: 73px;
padding-right: 113px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_body.png);
z-index: 4;
}
.page-star-cruise .activities-sec .lines__horizontal {
left: unset;
right: 40px;
}
.page-star-cruise .activities-sec .lines__horizontal .lines-horizontal {
right: 0;
left: unset;
}
.page-star-cruise .cruise-iti__title {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_title.png);
padding-right: 113px;
padding-left: 83px;
}
.cruise-iti__title .title {
font-size: 48px;
font-weight: 400;
line-height: 64px;
color: var(--color-secondary);
white-space: nowrap;
}
.page-star-cruise .offer-sec .lines__vertical {
right: unset;
left: 40px;
}
.gallery-sec__container {
position: relative;
padding-bottom: 170px;
}
.hotel-detail .gallery-sec__container .lines__horizontal {
position: absolute;
right: 40px;
top: 0;
height: 4px;
width: calc(100% - 80px);
left: unset;
}
.gallery-sec__container .lines__horizontal .lines-horizontal {
width: 100%;
height: 100%;
background-color: var(--color-secondary);
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/stroke_line_ho_full.svg);
position: absolute;
right: 0;
}
.gallery-sec__container .gallery-sec__title {
position: absolute;
display: flex;
align-items: center;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_title.png);
padding: 0 113px;
}
.gallery-sec__container .gallery-sec__title h2 {
transform: translateX(-25px);
}
.gallery-sec__container .lines__vertical {
position: absolute;
left: 40px;
top: -4px;
width: 4px;
height: calc(100% + 8px);
}
.gallery-sec__container .gallery-tab .gallery-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px 80px;
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item:nth-child(2n + 2) {
transform: translateY(50px);
}
.gallery-sec__container .gallery-tab .gallery-list .gallery-item {
width: 100%;
aspect-ratio: 545 / 305;
}
.gallery-sec__container .gallery-tab .gallery-list .gallery-item .box {
position: relative;
height: 100%;
}
.gallery-sec__container .gallery-tab .gallery-list .gallery-item .box .img {
width: 100%;
height: 100%;
}
.gallery-sec__container .gallery-tab .gallery-list .gallery-item .box .img img {
width: 100%;
height: 100%;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_gallery_cap.svg);
mask-size: 100% 100%;
object-fit: cover;
}
.gallery-sec__container .gallery-tab .gallery-list .gallery-item .box .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-secondary);
transition: all 0.5s ease-in-out;
z-index: -1;
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding: 24px;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_gallery_cap.svg);
mask-size: 100% 100%;
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item
.box
.overlay
p {
transform: rotate(3deg);
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item
.box:hover
.overlay {
transform: rotate(-3deg) translate(-30px, 50px);
} .page-gallery .gallery-sec__container .gallery-sec__title {
position: absolute;
right: 44px;
top: 0;
transform: translate(0, -50%);
text-align: center;
color: var(--color-secondary);
display: flex;
align-items: center;
padding-right: 109px;
padding-left: 63px;
z-index: 4;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_title.png);
left: unset;
}
.page-gallery .gallery-sec__container .lines__vertical {
left: unset;
right: 40px;
}
.page-gallery .gallery-sec__container .lines__horizontal .lines-horizontal {
left: 0;
}
.page-gallery .title-sec .title-sec__content .desc {
text-align: center;
}
.gallery-sec__container .lines__horizontal {
position: absolute;
height: 4px;
width: calc(50% - 40px);
left: 50%;
top: 0;
transform: translateY(-100%);
} .experience-detail .spacing-70 {
margin-top: 0;
}
.experience-detail .hotels-sec__container {
padding-bottom: 112px;
}
.experience-content .content .tag {
margin-bottom: 12px;
}
.experience-content .content .title {
margin-bottom: 40px;
}
.experience-content .content .the-excerpt {
margin-bottom: 24px;
}
.experience-content .content .detail-content p {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-bottom: 24px;
color: var(--color-secondary);
}
.experience-content .content .detail-content ul {
list-style-type: disc;
padding-left: 24px;
}
.experience-content .content .detail-content ul li {
margin-bottom: 12px;
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-secondary);
}
.experience-content .content .detail-content ul li:last-child {
margin-bottom: 24px;
}
.experience-content .content .detail-content h5 {
text-align: center;
margin-bottom: 40px;
font-style: italic;
font-family: var(--font-secondary);
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-top: 12px;
color: var(--color-secondary);
}
.experience-detail .offer-sec .lines__horizontal {
right: 0px;
left: unset;
}
.experience-detail .offer-sec .lines__horizontal .lines-horizontal {
left: unset;
right: 40px;
}
.experience-detail .offer-sec .lines__vertical {
right: unset;
left: 40px;
}
.experience-detail .offer-sec__title {
right: 44px;
} .swiper-offer-detail .swiper-slide {
overflow: hidden;
}
.offer-detail__image {
position: relative;
}
.offer-detail__image::before {
content: "";
position: absolute;
inset: -1px;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_border_pattern.png);
mask-size: 100% 100%;
z-index: 10;
}
.offer-detail__image .swiper-pagination {
width: 350px;
height: 2px;
overflow: hidden;
border-radius: 12px;
left: 50%;
transform: translateX(-50%);
bottom: -40px;
top: unset;
background-color: #5d270d33;
}
.offer-detail__image .swiper-pagination .swiper-pagination-progressbar-fill {
background-color: var(--color-secondary);
}
.offer-detail .offer-content .hotels-sec__container {
padding-top: 80px;
padding-bottom: 152px;
}
.offer-detail .offer-detail__content .box {
padding-left: 64px;
padding-right: 113px;
}
.offer-detail .offer-detail__content .box .tag {
margin-bottom: 12px;
}
.offer-detail .offer-detail__content .box .title {
margin-bottom: 40px;
}
.offer-detail .offer-detail__content .box ul li p {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-secondary);
}
.offer-detail .offer-detail__content .box .list {
margin-bottom: 40px;
}
.offer-detail .offer-detail__content .box .button-list {
gap: 16px;
}
.offer-detail .offer-detail__content .box .button-list .button a {
width: 134px;
height: 44px;
border: 1px solid var(--color-secondary);
text-decoration: none;
transition: var(--trans);
}
.offer-detail .offer-detail__content .box .button-list .button a:hover {
border: 1px solid var(--color-primary);
background-color: var(--color-primary);
color: var(--color-white);
}
.offer-detail .offer-sec .lines__vertical {
left: 40px;
right: unset;
}
.offer-detail .offer-sec__title {
right: 44px;
}
.offer-detail .offer-sec .lines__horizontal {
left: unset;
right: 40px;
}
.offer-detail .offer-sec .lines__horizontal .lines-horizontal {
right: 0;
left: unset;
}
.modal-content {
border: none;
width: 438px;
height: 572px;
background-color: transparent;
transform: translateY(-12px);
}
.modal-content .icon-close {
padding-bottom: 24px;
}
.modal-content .form {
padding: 40px 32px;
display: flex;
flex-direction: column;
gap: 24px;
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_modal.svg);
background: linear-gradient(to bottom, #fff 99%, transparent 1%);
}
.modal-content .form .gap-24 {
gap: 24px;
}
.modal-content .form .date .check-in,
.modal-content .form .date .check-out {
position: relative;
}
.modal-content .form .date .check-in .icon,
.modal-content .form .date .check-out .icon {
position: absolute;
right: 0;
top: 0;
pointer-events: none;
}
.modal-content .form button {
border: 1px solid var(--color-secondary);
height: 44px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: var(--color-secondary);
margin-top: 16px;
transition: var(--trans);
}
.modal-content .form button:hover {
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
color: var(--color-white);
}
.modal-content .form input {
width: 100%;
outline: none;
box-shadow: none;
border: none;
}
.modal-content .form input::placeholder,
.modal-content .form input {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-secondary);
}
.modal-content .form input {
padding-bottom: 12px;
border-bottom: 1px solid rgba(93, 39, 13, 0.2);
}
.act-text {
position: relative;
}
.page-star-cruise .events .cruise__container .crusie__image img {
object-fit: cover;
}
.page-star-cruise .cruise__container .crusie__image img {
object-fit: contain;
}
.page-star-cruise .floor-plane .cruise__container .crusie__image {
height: 250px;
}
.offer-detail .offer-detail__content .box .button-list .button a {
font-size: 16px;
line-height: 24px;
}
.offer-detail .offer-detail__content .box .button-list .button.second a {
width: 152px;
}
.offer-detail .swiper-img-offer:hover {
cursor: pointer;
}
.floor-plane .cruise__container .crusie__image::before {
content: unset;
}
.hotel-detail .activities-sec .content-image {
position: relative;
width: 100%;
aspect-ratio: 670 / 375;
}
.hotel-detail .activities-sec .swiper img {
width: 100%;
aspect-ratio: 670 / 375;
}
.hotel-detail .activities-sec .content-image::before {
position: absolute;
content: "";
inset: -1px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_border_pattern.png);
z-index: 19;
background-size: 100% 100%;
}
.activities-sec .content-image::before {
position: absolute;
content: "";
inset: -1px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_border_pattern.png);
z-index: 19;
background-size: 100% 100%;
}
.footer-sec .bct a {
width: 138px;
height: 53px;
display: block;
}
@media (min-width: 1441px) {
.hotels-sec .swiper-button-prev,
.hotels-sec .swiper-button-next {
top: 190px;
}
.offer__container .swiper-button-prev,
.offer__container .swiper-button-next {
top: 270px;
}
.restaurant__container .restaurant__image {
width: 100%;
aspect-ratio: 668 / 373;
}
.swiper-restaurant .swiper-img {
width: 100%;
aspect-ratio: 668 / 373;
height: auto;
}
.activities-sec .act-img {
width: 100%;
aspect-ratio: 668 / 373;
height: auto;
}
}
@media (max-width: 991px) {
body {
overflow-x: hidden;
}
body.overflow {
overflow: hidden;
}
.h3 {
font-size: 18px !important;
line-height: 28px !important;
}
.header__default {
justify-content: unset !important;
}
.header__container {
padding: 0 32px;
height: var(--header-height-mobile);
}
.header__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header__scroll-logo img {
width: 168px;
height: 28px;
}
#block-search {
mask-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_booking_mobile.png);
margin-top: -128px !important;
position: relative !important;
z-index: 99 !important;
max-width: calc(100% - 32px) !important;
}
#block-search .be-container {
padding: 0 24px !important;
}
.header__bg {
top: 50px;
width: 100%;
}
.banner-hero__form .b1 {
font-size: 16px;
line-height: 24px;
}
.header__bg img {
width: 100%;
}
.header__menu--mobile {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/menu_mobile_bg.jpg);
background-position: center;
height: 100dvh;
padding-top: 136px;
width: 100%;
transition: all 0.5s ease;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.header__menu--mobile.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.header__menu--mobile ul {
padding-inline: 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.header__menu--mobile ul li.menu-item-has-children .sub-menu {
position: absolute;
inset: 0;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_menu_mobile.png);
background-position: center;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
padding-top: 136px;
z-index: 2;
transition: all 0.8s ease;
}
.header__menu--mobile ul li.menu-item-has-children .sub-menu.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.header__menu--mobile ul li.menu-item-has-children .sub-menu li a {
font-size: 16px;
line-height: 24px;
}
.language__head .value-select {
font-size: 16px;
line-height: 24px;
}
.header__menu--mobile ul li.menu-item-has-children .icon {
position: absolute;
right: 32px;
width: 25px;
padding: 5px;
}
.header__menu--mobile ul li {
display: flex;
justify-content: center;
align-items: center;
}
.header__menu--mobile ul li a {
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}
.header__menu--mobile ul li.active a::before {
transform: scaleX(1);
}
.header__menu--mobile ul li .sub-name {
position: relative;
text-align: center;
}
.header__menu--mobile ul li .sub-name .icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 999;
width: 25px;
padding: 5px;
}
.header__menu--mobile ul li .sub-name .icon img {
transform: rotate(180deg);
}
.header__menu--mobile ul li a:hover {
color: var(--color-white);
}
.menu__mobile--lang {
padding-bottom: 32px;
}
.menu__mobile--lang .language__head {
gap: 12px;
}
.menu__mobile--lang .language__head img {
transform: rotate(-90deg);
}
.menu__mobile--lang .language__body {
bottom: unset;
transform: translateY(-100%);
top: -8px;
}
.menu__mobile--lang .dropdown-custom__item {
font-size: 16px;
line-height: 26px;
}
.menu__mobile--lang .language__head img {
transition: all 0.5s ease; }
.menu__mobile--lang .language__head.--active img {
transform: rotate(270deg);
}
.sub-menu .menu__mobile--lang {
margin-top: auto;
display: flex;
justify-content: center;
}
.banner-hero__booking {
width: calc(100% - 32px);
height: 240px;
bottom: -65px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_booking_mobile.png);
background-size: 100% 100%;
}
.banner-hero__booking form {
flex-wrap: wrap;
padding: 0 16px;
transform: translateY(0);
}
.banner-hero__container {
height: 61vh;
}
.banner-hero__bg img {
height: 70px;
}
.banner-hero__booking form .select-destination,
.banner-hero__booking form .date {
width: 100%;
font-size: 16px;
line-height: 24px;
}
.select-destination .dropdown-custom__menu {
left: 0;
right: 0;
}
.select-destination .dropdown-custom__menu.dropdown-up {
top: 0;
bottom: unset;
transform: translateY(30%);
}
.banner-hero__booking form .date input {
width: 100%;
}
.banner-hero__booking .promo-code {
display: none;
}
.banner-hero__booking form .select-destination {
border-radius: 0;
}
.banner-hero__booking form .select-destination,
.banner-hero__booking form .date input {
border-radius: 0;
}
.lightpick__toolbar {
padding-top: 0;
padding-right: 8px;
}
.banner-hero__booking form button {
width: 100%;
transform: translateY(0);
margin-top: 16px;
}
.title-sec.spacing-70 {
margin-top: 70px;
}
.filter {
position: relative;
}
.filter::before {
content: "";
position: absolute;
height: 100%;
right: -14px;
top: 0;
width: 35px;
z-index: 2;
opacity: 0.6;
background: linear-gradient(
300deg,
#ded5be 32.91%,
rgba(222, 213, 190, 0.5) 89.89%
);
}
.cruise__container .cruise-stroke {
width: 800px;
}
.title-sec .title-sec__content .desc,
.page-template-wp .title-sec .title-sec__content .desc {
padding: 0 32px;
margin-bottom: 24px;
}
.page-template-wp .hotels-sec__container {
padding: 0 16px 0 32px;
}
.page-template-wp .gallery-sec .hotels-sec__top::before {
right: -14px;
}
.page-template-wp .hotels-sec__container .hotel-list {
padding-right: 16px;
}
.page-template-wp .hotels-sec__container .lines__horizontal,
.hotels-sec__container .lines__horizontal {
width: calc(50% - 16px);
}
.hotels-sec .lines__vertical {
right: 16px;
}
.hotels-sec__top .nav {
flex-wrap: nowrap;
width: calc(100vw - 50px);
overflow-x: scroll; white-space: nowrap;
gap: 24px;
position: relative;
height: 24px;
align-items: flex-start !important;
}
.page-star-cruise .hotels-sec__top::before {
bottom: 4px;
height: 24px !important;
}
.hotels-sec__top .nav::-webkit-scrollbar {
display: none;
}
.hotels-sec__top .nav li {
display: inline-block;
}
.hotels-sec__top .nav li:last-child {
padding-right: 35px;
}
.hotels-sec__top .nav-tabs .nav-link {
width: max-content;
}
.page-template-wp .hotels-sec__container .hotel-list {
grid-template-columns: 1fr 1fr;
gap: 48px 24px;
}
.title-sec .line-cap-hotel {
width: 2px;
}
.page-template-wp .title-sec .title-sec__content h1 {
margin-bottom: 24px;
}
.hotels-sec__container .lines__horizontal {
height: 2px;
}
.hotels-sec .lines__vertical {
width: 2px;
top: -2px;
height: calc(100% + 2px);
}
.newsletter__body .form {
padding-left: 0;
}
.newsletter__sec {
padding: 0 32px;
}
.hotels-sec__content { } .newsletter__body .newsletter-title {
font-size: 24px;
line-height: 32px;
font-weight: 400;
max-width: 100%;
margin-bottom: 24px;
}
.newsletter__body .form .content,
.newsletter__body .form p,
.newsletter__body .form .content input {
font-size: 18px;
line-height: 28px;
}
.newsletter__body .form .content input::placeholder {
font-size: 18px;
font-weight: 400;
line-height: 28px;
text-align: left;
color: var(--color-secondary);
text-decoration: underline;
font-style: italic;
}
.newsletter__body .form .content .name {
width: 100%;
}
.newsletter__sec .lines__horizontal--top,
.newsletter__sec .lines__horizontal--bottom {
height: 2px;
}
.newsletter__sec .lines__vertical--left,
.newsletter__sec .lines__vertical--right {
width: 2px;
}
.newsletter__sec .lines__vertical--left {
left: 16px;
}
.newsletter__sec .lines__vertical--right {
right: 16px;
}
.newsletter__sec .lines__horizontal--top {
left: 16px;
}
.newsletter__sec.active .lines__horizontal--top {
width: calc(100% - 32px);
}
.newsletter__sec.active .lines__horizontal--bottom {
width: calc(100% - 32px);
}
.newsletter__sec .lines__horizontal--bottom {
right: 16px;
}
.btn__submit button {
margin-top: 24px;
}
.newsletter__body {
padding-block: 40px;
}
.footer-sec {
padding: 0 16px;
}
.footer__container .box-about {
padding-left: 0;
margin-bottom: 24px;
}
.footer__container .box-office .address {
max-width: 295px;
padding-right: 0;
}
.footer__container--top {
padding-inline: 16px;
margin-bottom: 110px;
}
.footer__container--top .box-office {
margin-bottom: 32px;
}
.footer__container--bottom {
animation: run 120s infinite linear;
-webkit-animation: run 120s infinite linear;
padding: 30px 16px 24px;
}
.footer__container--bottom .gif {
right: unset;
left: 16px;
}
.footer__container--bottom .description {
margin-bottom: 16px;
}
.footer-detail .box-page {
padding-left: 0;
flex-wrap: wrap;
margin-block: 16px;
}
.footer-detail {
padding: 16px;
}
.footer-detail .box-page ul {
gap: 16px;
}
.newsletter__body .form .content input[type="number"] {
width: 122px;
}
.page-template-wp .hotels-sec__container {
padding-bottom: 64px;
}
.hotels-sec__filter {
padding-top: 40px;
position: relative;
}
.hotels-sec__top {
margin-bottom: 40px;
display: flex;
flex-direction: column-reverse;
gap: 40px;
padding-inline: 32px;
}
.footer__container .on-top {
top: 310px;
}
.title-sec__content .logo {
margin-bottom: 24px;
width: 40px;
height: 40px;
}
.title-sec__content h1 {
font-size: 24px;
line-height: 32px;
margin-bottom: 24px;
}
.title-keyframe h2 {
font-size: 24px !important;
line-height: 32px !important;
white-space: nowrap !important;
}
.hotels-sec__title {
padding-right: 40px;
padding-left: 0;
right: unset;
left: 50%;
transform: translate(-50%, -50%);
}
.page-home .title-sec__content {
margin-bottom: 40px;
}
.title-sec .line-hotels {
height: 60px;
}
.icon-wheel {
width: 32px;
height: 32px;
}
.hotels-sec__container {
padding-inline: 0;
}
.hotels__slider .swiper-slide .hotels__body {
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
transform: scale(0);
transform-origin: center;
}
.hotels__slider .swiper-slide.swiper-slide-active .hotels__body {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.hotels-sec .swiper-arrows {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
.hotels-sec__content {
max-width: 100%;
text-align: center;
}
.hotels-sec .swiper-arrows .swiper-button-next {
right: 50%;
top: 66px;
transform: translateX(130px);
}
.hotels-sec .swiper-arrows .swiper-button-prev {
left: 50%;
top: 66px;
transform: translateX(-130px);
}
.hotels-sec .swiper-arrows .swiper-pagination {
width: 150px;
left: 50%;
transform: translateX(-50%);
bottom: -86px;
top: unset;
height: 2px;
bottom: -38px;
overflow: hidden;
background-color: #5d270d33;
}
.hotels-sec
.swiper-arrows
.swiper-pagination
.swiper-pagination-progressbar-fill {
background-color: var(--color-secondary);
}
.hotels-sec .swiper-button-prev,
.hotels-sec .swiper-button-next {
border: none;
}
.hotels-sec .swiper-button-prev:hover,
.hotels-sec .swiper-button-next:hover {
background-color: transparent;
}
.hotels-sec .swiper-button-prev:hover svg path,
.hotels-sec .swiper-button-next:hover svg path {
stroke: var(--color-secondary);
}
.page-template-wp .hotels-sec__top {
padding-left: 0;
padding-right: 0;
position: relative;
}   .page-detail
.swiper-tab-detail
.swiper-slide.swiper-slide-next
.hotel__img
img,
.page-detail
.swiper-tab-detail
.swiper-slide.swiper-slide-prev
.hotel__img
img {
transform: unset;
}
.cruise__container {
padding: 0 32px 70px;
}
.cruise__container .lines__horizontal {
height: 2px;
width: calc(100% - 32px);
right: 16px;
top: -1px;
}
.cruise__container .lines__vertical {
left: 16px;
width: 2px;
top: -1px;
}
.cruise__container .cruise-stroke {
height: 490px;
top: 60px;
right: 0;
width: auto;
}
.cruise__container .cruise__title {
padding: 0 32px;
}
.cruise__container .cruise__title h2 {
transform: translateX(-16px);
}
.crusie__body {
padding-top: 62px;
}
.cruise__container .crusie__image { margin-bottom: 24px;
}
.cruise__container .crusie__name {
margin-bottom: 12px;
}
.restaurant__container .res-bg-top {
top: -25px;
}
.restaurant__container .res-bg-bottom {
bottom: -25px;
width: 100%;
}
.restaurant__container .res-bg-bottom img {
width: 100%;
}
.restaurant__container .restaurant__image {
width: 100%;
margin-inline: auto;
}
.restaurant__image {
pointer-events: none;
}
.restaurant__title {
padding: 0 32px;
left: 50%;
transform: translateX(-50%);
}
.restaurant__container .lines__vertical--left-top {
left: 16px;
width: 2px;
top: -23px;
}
.restaurant__container.active .lines__vertical--left-top {
height: 91px;
}
.restaurant__container {
padding-top: 50px;
}
.restaurant__container .line__horizontal {
top: 70px;
height: 2px;
width: calc(100% - 32px);
left: 16px;
}
.restaurant__container .lines__vertical--right-bottom {
width: 2px;
right: 16px;
top: 67px;
height: calc(100% - 43px);
}
.cruise__container .lines__vertical {
height: calc(100% + 2px);
}
.restaurant__title h2 {
transform: translateX(-16px);
}
.restaurant__body {
margin-top: 84px;
}
.restaurant__content {
width: 100%;
margin-inline: auto;
position: relative;
}
.swiper-res-content {
margin-top: 24px;
}
.swiper-res-content .swiper-box {
max-width: 100%;
text-align: center;
}
.restaurant__container .restaurant__image .swiper-pagination {
bottom: -206px;
}
.restaurant__container .restaurant__image .swiper-pagination {
width: 150px;
}
.restaurant__container .swiper-button-next {
left: unset;
right: 50%;
transform: translateX(130px);
}
.restaurant__container .swiper-button-prev {
left: 50%;
transform: translateX(-130px);
}
.restaurant__container .swiper-button-prev,
.restaurant__container .swiper-button-next {
bottom: -60px;
border: none;
}
.restaurant__container .swiper-button-prev:hover,
.restaurant__container .swiper-button-next:hover {
background-color: transparent;
}
.restaurant__container .swiper-button-prev:hover svg path,
.restaurant__container .swiper-button-next:hover svg path {
stroke: var(--color-sub);
}
.testimonial__container .line__vertical--top-right {
right: 16px;
width: 2px;
}
.testimonial__container .line__horizontal {
right: 16px;
width: calc(100% - 32px);
height: 2px;
}
.testimonial__container .line__vertical--left {
width: 2px;
left: 16px;
top: 1px;
height: 100%;
}
.testimonial__title {
padding: 0 32px;
}
.testimonial__title h2 {
transform: translateX(-16px);
}
.testimonial__container.active .line__vertical--top-right {
height: 59px;
top: -58px;
}
.testimonial-sec {
padding-top: 80px;
}
.testimonial__body {
padding-block: 64px;
}
.testimonial__container {
padding: 0;
}
.testimonial__list {
overflow-x: scroll;
padding-top: 20px;
scroll-snap-align: center;
padding-inline: 32px;
border-bottom: none;
}
.testimonial__list::-webkit-scrollbar {
display: none;
}
.testimonila__item {
min-width: 40%;
flex-grow: 0;
}
.testimonila__item .box {
padding: 32px;
}
.testimonial__content .box .desc {
width: calc(100% - 64px);
margin-inline: auto;
}
.b1 {
font-size: 14px;
line-height: 20px;
}
.testimonial__content {
padding-bottom: 40px;
}
.testimonial__list.active .testimonila__item:nth-child(4) {
display: none;
}
.testimonila__item:nth-child(4) {
display: none;
}
.testimonial__animation {
width: calc(100% - 114px);
margin-inline: auto;
border-bottom: 1px solid #5d270d99;
position: relative;
height: 60px;
}
.testimonial__animation .box-gif-mobile {
width: 79px;
height: 59px;
position: absolute;
left: 0;
transition: all 2s ease;
}
.testimonial__animation.active .box-gif-mobile {
left: calc(100% - 80px);
}
.offer__container {
padding: 0;
padding-bottom: 96px;
}
.offer-sec .box .box-body {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.offer-sec .swiper-slide.swiper-slide-active .box .box-body {
opacity: 1;
visibility: visible;
}
.offer-sec .swiper-pagination {
width: 150px;
}
.page-template-wp .activities-sec__title,
.offer-sec__title,
.activities-sec__title {
padding: 0 32px;
right: unset;
left: 50%;
transform: translate(-50%, -50%);
}
.page-template-wp .activities-sec__title h2,
.offer-sec__title h2,
.activities-sec__title h2 {
transform: translateX(-16px);
}
.offer-sec .lines__horizontal {
height: 2px;
width: calc(100% - 32px);
left: 16px;
top: -1px;
}
.offer-sec .lines__vertical {
right: 16px;
width: 2px;
top: -1px;
height: calc(100% + 2px);
}
.offer__container .swiper-button-prev,
.offer__container .swiper-button-next {
top: unset;
bottom: -61px;
border: none;
}
.offer__container .swiper-button-prev {
left: 50%;
transform: translateX(-135px);
}
.offer__container .swiper-button-next {
right: 50%;
transform: translateX(135px);
}
.offer-sec .swiper-pagination {
bottom: -32px;
}
.offer-sec .section__lines {
height: 64px;
}
.gallery-sec__container .gallery-tab .gallery-list {
grid-template-columns: 1fr;
gap: 48px;
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item:nth-child(2n + 2) {
transform: translateY(0);
}
.gallery-sec__container {
padding-inline: 32px;
padding-bottom: 64px;
}
.page-gallery .gallery-sec__container .lines__vertical {
right: 16px;
width: 2px;
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item
.box:hover
.overlay {
transform: rotate(-3deg) translate(-30px, 25px);
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item
.box
.overlay {
padding-bottom: 8px;
}
.page-gallery .gallery-sec__container .gallery-sec__title {
padding: 0 32px;
right: unset;
left: 50%;
transform: translate(-50%, -50%);
}
.page-gallery .gallery-sec__container .gallery-sec__title h2 {
transform: translateX(-16px);
}
.gallery-sec__container .lines__horizontal {
height: 2px;
width: calc(50% - 16px);
}
.modal-dialog {
width: calc(100% - 32px);
margin-inline: auto;
}
.modal-content .form {
padding: 30px 16px;
}
.page-detail .title-sec.spacing-70 {
margin-top: 58px;
}
.page-detail .title-sec .line-hotels {
height: 60px;
}
.offer-detail .offer-detail__content .box {
padding-left: 0;
padding-right: 0;
}
.offer-detail__content {
padding-inline: 32px;
margin-bottom: 40px;
}
.offer-content .row {
flex-direction: column-reverse;
}
.offer-detail__image {
width: calc(100% - 64px);
margin-inline: auto;
}
.offer-detail .offer-content .hotels-sec__container {
padding-top: 40px;
padding-bottom: 95px;
}
.h2 {
font-size: 24px;
line-height: 32px;
}
.offer-detail__image .swiper-pagination {
width: 150px;
}
.offer-detail .hotels-sec .swiper-arrows .swiper-button-next,
.offer-detail .hotels-sec .swiper-arrows .swiper-button-prev {
top: 68px;
}
.offer-detail .offer-sec .lines__horizontal {
right: 16px;
}
.offer-detail .offer-sec .lines__vertical {
left: 16px;
}
.news-reverse .newsletter__sec .lines__horizontal--top {
right: 16px;
}
.news-reverse .newsletter__sec .lines__horizontal--bottom {
left: 16px;
}
.offer__container .swiper-button-prev:hover,
.offer__container .swiper-button-next:hover {
background-color: transparent;
}
.offer__container .swiper-button-prev:hover svg path,
.offer__container .swiper-button-next:hover svg path {
stroke: var(--color-secondary);
}
.experience-content .content {
padding: 0 32px;
}
.experience-detail .offer-sec .lines__horizontal .lines-horizontal {
right: 16px;
}
.experience-detail .offer-sec .lines__vertical {
left: 16px;
}
.experience-detail .offer-sec__title,
.offer-detail .offer-sec__title {
right: unset;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 32px;
}
.experience-detail .offer-sec__title h2,
.offer-detail .offer-sec__title h2 {
transform: translateX(-16px);
}
.hotel-detail .title-sec.spacing-70 {
margin-top: 70px;
}
.page-detail .title-sec .title-sec__content .desc {
margin-bottom: 40px;
}
.page-detail .title-sec .title-sec__content .button-list {
margin-bottom: 24px;
}
.page-detail .swiper-tab-detail .hotel__box .hotel__content {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.page-detail .swiper-tab-detail .swiper-slide.is-active .hotel__content {
opacity: 1;
visibility: visible;
}
.page-detail .swiper-tab-detail {
padding-left: 32px;
}
.page-detail .hotels__slider .swiper-pagination {
width: 150px;
bottom: -37px;
}
.page-detail .hotels-sec__container {
padding-bottom: 120px;
}
.hotel-detail .cruise__container .crusie__desc {
margin-bottom: 0;
}
.facilities-sec .facilities__list {
grid-template-columns: 1fr 1fr;
gap: 48px 10px;
}
.facilities-sec {
padding-top: 90px;
}
.facilities__container .line__vertical--top-right {
right: 16px;
width: 2px;
top: -67px;
}
.facilities__container.active .line__vertical--top-right {
height: 69px;
}
.facilities__title {
padding: 0 32px;
}
.facilities__title h2 {
transform: translateX(-16px);
}
.facilities__container .line__horizontal {
right: 16px;
width: calc(100% - 32px);
height: 2px;
}
.facilities__container .line__vertical--left {
width: 2px;
left: 16px;
height: calc(100% + 0px);
}
.facilities-sec .testimonial__body {
padding-bottom: 80px;
}
.activities-sec .lines__horizontal {
left: 16px;
width: calc(100% - 32px);
height: 2px;
top: -2px;
}
.activities-sec .lines__vertical {
right: 16px;
width: 2px;
}
.activities-sec .section__lines {
height: 64px;
}
.activities__body {
padding: 0 32px;
}
.activities-sec .act-img {
width: 100%;
}
.act-content .swiper-box {
max-width: 100%;
text-align: center;
}
.activities__body .row {
flex-direction: column-reverse;
}
.activities__body .act-img {
margin-bottom: 24px;
}
.activities-sec .swiper-pagination {
width: 150px;
bottom: -32px;
}
.activities-sec .swiper-button-next {
transform: translateX(135px);
left: unset;
right: 50%;
}
.hotel-detail .offer__container {
padding-bottom: 120px;
}
.hotel-detail .offer-sec__title {
left: 50%;
transform: translate(-50%, -50%);
}
.hotel-detail .hotels-sec__top {
padding-left: 32px;
}
.hotel-detail .gallery-sec__container .lines__horizontal {
right: 16px;
height: 2px;
width: calc(100% - 32px);
}
.gallery-sec__container .gallery-sec__title {
padding: 0 32px;
}
.gallery-sec__container .gallery-sec__title h2 {
transform: translateX(-16px);
}
.gallery-sec__container .lines__vertical {
left: 16px;
width: 2px;
top: -1px;
}
.gallery-sec__container .gallery-sec__title h2 {
transform: translateX(-16px);
}
.button-group {
width: calc(100% - 64px);
}
.button-group .button {
width: 50% !important;
}
.button-group .button a {
width: 100% !important;
}
.page-star-cruise .title-sec.spacing-70 {
margin-top: 70px;
margin-bottom: 32px;
}
.page-star-cruise .hotels-sec__container {
padding-left: 0;
padding-right: 0;
}
.page-star-cruise .hotels-sec__top {
padding-left: 32px;
}
.page-detail .title-sec .title-sec__content h1 {
margin-bottom: 24px;
}
.page-star-cruise .activities-sec {
padding-top: 90px;
}
.page-star-cruise
.activities-sec
.offer__container.active
.line__vertical--top-right {
height: 69px;
}
.page-star-cruise .activities-sec .line__vertical--top-right {
right: 16px;
width: 2px;
top: -67px;
height: 0px;
}
.page-star-cruise .activities-sec .lines__horizontal {
right: 16px;
top: 0;
}
.page-star-cruise .activities-sec .lines__vertical {
left: 16px;
height: calc(100% + 2px);
}
.page-star-cruise .floor-plane .crusie__body {
padding-top: 0;
}
.page-star-cruise .floor-plane .crusie__body .crusie__image {
margin-bottom: 0;
}
.page-star-cruise .cruise__container .floor-plane__title,
.page-star-cruise .cruise-iti__title {
padding: 0 32px;
right: unset;
left: 50%;
transform: translate(-50%, -50%);
}
.page-star-cruise .cruise__container .floor-plane__title h2,
.page-star-cruise .cruise-iti__title h2 {
transform: translateX(-16px);
}
.page-star-cruise .floor-plane .cruise__container .lines__vertical {
right: 16px;
}
.page-star-cruise .offer-sec .lines__vertical {
left: 16px;
}
.restaurant__content .swiper-pagination {
width: 150px;
left: 50%;
transform: translateX(-50%);
top: unset;
bottom: -15px;
height: 2px;
overflow: hidden;
border-radius: 13px;
background-color: rgba(255, 255, 255, 0.2);
}
.restaurant__content .swiper-pagination .swiper-pagination-progressbar-fill {
background-color: var(--color-sub);
}
.page-detail .experience-content .hotels-sec__container {
padding-bottom: 40px;
}
.hotel-detail .gallery-sec .hotels-sec__top {
padding-left: 0;
padding-right: 0;
}
.page-template-wp .hotels-sec .hotels__img img {
padding: calc(1px / 2);
}
}
.be-booking-link {
box-shadow: none !important;
}
@media (max-width: 767px) {
body {
overflow-x: hidden;
}
body.overflow {
overflow: hidden;
}
.h3 {
font-size: 18px !important;
line-height: 28px !important;
}
.header__default {
justify-content: unset !important;
}
.header__container {
padding: 0 32px;
height: var(--header-height-mobile);
}
.header__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header__scroll-logo img {
width: 168px;
height: 28px;
}
.header__bg {
top: 50px;
width: 100%;
}
.header__bg img {
width: 100%;
}
.header__menu--mobile {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/menu_mobile_bg.jpg);
background-position: center;
height: 100dvh;
padding-top: 136px;
width: 100%;
transition: all 0.5s ease;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.header__menu--mobile.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.header__menu--mobile ul {
padding-inline: 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.header__menu--mobile ul li.menu-item-has-children .sub-menu {
position: absolute;
inset: 0;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/bg_menu_mobile.png);
background-position: center;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
padding-top: 136px;
z-index: 2;
transition: all 0.8s ease;
}
.header__menu--mobile ul li.menu-item-has-children .sub-menu.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.header__menu--mobile ul li.menu-item-has-children .sub-menu li a {
font-size: 16px;
line-height: 24px;
}
.language__head .value-select {
font-size: 16px;
line-height: 24px;
}
.header__menu--mobile ul li.menu-item-has-children .icon {
position: absolute;
right: 32px;
width: 25px;
padding: 5px;
}
.header__menu--mobile ul li {
display: flex;
justify-content: center;
align-items: center;
}
.header__menu--mobile ul li a {
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}
.header__menu--mobile ul li .sub-name {
position: relative;
text-align: center;
}
.header__menu--mobile ul li .sub-name .icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 999;
width: 25px;
padding: 5px;
}
.header__menu--mobile ul li .sub-name .icon img {
transform: rotate(180deg);
}
.header__menu--mobile ul li a:hover {
color: var(--color-white);
}
.menu__mobile--lang {
padding-bottom: 32px;
}
.menu__mobile--lang .language__head img {
transform: rotate(-90deg);
}
.menu__mobile--lang .language__body {
bottom: unset;
transform: translateY(-100%);
top: -8px;
}
.menu__mobile--lang .dropdown-custom__item {
font-size: 16px;
line-height: 26px;
}
.menu__mobile--lang .language__head img {
transition: all 0.5s ease; }
.menu__mobile--lang .language__head.--active img {
transform: rotate(270deg);
}
.sub-menu .menu__mobile--lang {
margin-top: auto;
display: flex;
justify-content: center;
}
.banner-hero__booking {
width: calc(100% - 32px);
height: 240px;
bottom: -65px;
background-image: url(//phuclonghospitality.com/wp-content/themes/phuclong/assets/images/img_booking_mobile.png);
background-size: 100% 100%;
}
.banner-hero__booking form {
flex-wrap: wrap;
padding: 0 16px;
transform: translateY(0);
}
.banner-hero__container {
height: 61vh;
}
.banner-hero__bg img {
height: 70px;
}
.banner-hero__booking form .select-destination,
.banner-hero__booking form .date {
width: 100%;
font-size: 16px;
line-height: 24px;
}
.select-destination .dropdown-custom__menu {
left: 0;
right: 0;
}
.select-destination .dropdown-custom__menu.dropdown-up {
top: 0;
bottom: unset;
transform: translateY(30%);
}
.banner-hero__booking form .date input {
width: 100%;
}
.banner-hero__booking .promo-code {
display: none;
}
.banner-hero__booking form .select-destination {
border-radius: 0;
}
.banner-hero__booking form .select-destination,
.banner-hero__booking form .date input {
border-radius: 0;
}
.lightpick__toolbar {
padding-top: 0;
padding-right: 8px;
}
.banner-hero__booking form button {
width: 100%;
transform: translateY(0);
margin-top: 16px;
}
.title-sec.spacing-70 {
margin-top: 70px;
}
.filter {
position: relative;
}
.filter::before {
content: "";
position: absolute;
height: 100%;
right: -14px;
top: 0;
width: 35px;
z-index: 2;
opacity: 0.6;
background: linear-gradient(
300deg,
#ded5be 32.91%,
rgba(222, 213, 190, 0.5) 89.89%
);
}
.cruise__container .cruise-stroke {
width: 800px;
}
.title-sec .title-sec__content .desc,
.page-template-wp .title-sec .title-sec__content .desc {
padding: 0 32px;
margin-bottom: 24px;
}
.page-template-wp .hotels-sec__container {
padding: 0 16px 0 32px;
}
.page-template-wp .gallery-sec .hotels-sec__top::before {
right: -14px;
}
.page-template-wp .hotels-sec__container .hotel-list {
padding-right: 16px;
}
.page-template-wp .hotels-sec__container .lines__horizontal,
.hotels-sec__container .lines__horizontal {
width: calc(50% - 16px);
}
.hotels-sec .lines__vertical {
right: 16px;
}
.hotels-sec__top .nav {
flex-wrap: nowrap;
width: calc(100vw - 50px);
overflow-x: scroll; white-space: nowrap;
gap: 24px;
position: relative;
height: 24px;
align-items: flex-start !important;
}
.page-star-cruise .hotels-sec__top::before {
bottom: 4px;
height: 24px !important;
}
.hotels-sec__top .nav::-webkit-scrollbar {
display: none;
}
.hotels-sec__top .nav li {
display: inline-block;
}
.hotels-sec__top .nav li:last-child {
padding-right: 35px;
}
.hotels-sec__top .nav-tabs .nav-link {
width: max-content;
}
.page-template-wp .hotels-sec__container .hotel-list {
grid-template-columns: 1fr 1fr;
gap: 48px 24px;
}
.page-template-wp .hotels-sec .hotels__img {
height: 190px;
aspect-ratio: unset;
}
.title-sec .line-cap-hotel {
width: 2px;
}
.page-template-wp .title-sec .title-sec__content h1 {
margin-bottom: 24px;
}
.hotels-sec__container .lines__horizontal {
height: 2px;
}
.hotels-sec .lines__vertical {
width: 2px;
top: -2px;
height: calc(100% + 2px);
}
.newsletter__body .form {
padding-left: 0;
}
.newsletter__sec {
padding: 0 32px;
}
.hotels-sec__content { } .newsletter__body .newsletter-title {
font-size: 24px;
line-height: 32px;
font-weight: 400;
max-width: 100%;
margin-bottom: 24px;
}
.newsletter__body .form .content,
.newsletter__body .form p,
.newsletter__body .form .content input {
font-size: 18px;
line-height: 28px;
}
.newsletter__body .form .content input::placeholder {
font-size: 18px;
font-weight: 400;
line-height: 28px;
text-align: left;
color: var(--color-secondary);
text-decoration: underline;
font-style: italic;
}
.newsletter__body .form .content .name {
width: 100%;
}
.newsletter__sec .lines__horizontal--top,
.newsletter__sec .lines__horizontal--bottom {
height: 2px;
}
.newsletter__sec .lines__vertical--left,
.newsletter__sec .lines__vertical--right {
width: 2px;
}
.newsletter__sec .lines__vertical--left {
left: 16px;
}
.newsletter__sec .lines__vertical--right {
right: 16px;
}
.newsletter__sec .lines__horizontal--top {
left: 16px;
}
.newsletter__sec.active .lines__horizontal--top {
width: calc(100% - 32px);
}
.newsletter__sec.active .lines__horizontal--bottom {
width: calc(100% - 32px);
}
.newsletter__sec .lines__horizontal--bottom {
right: 16px;
}
.btn__submit button {
margin-top: 24px;
}
.newsletter__body {
padding-block: 40px;
}
.footer-sec {
padding: 0 16px;
}
.footer__container .box-about {
padding-left: 0;
margin-bottom: 24px;
}
.footer__container .box-office .address {
max-width: 295px;
padding-right: 0;
}
.footer__container--top {
padding-inline: 16px;
margin-bottom: 110px;
}
.footer__container--top .box-office {
margin-bottom: 32px;
}
.footer__container--bottom {
animation: run 120s infinite linear;
-webkit-animation: run 120s infinite linear;
padding: 30px 16px 24px;
}
.footer__container--bottom .gif {
right: unset;
left: 16px;
}
.footer__container--bottom .description {
margin-bottom: 16px;
}
.footer-detail .box-page {
padding-left: 0;
flex-wrap: wrap;
margin-block: 16px;
}
.footer-detail {
padding: 16px;
}
.footer-detail .box-page ul {
gap: 16px;
}
.newsletter__body .form .content input[type="number"] {
width: 122px;
}
.page-template-wp .hotels-sec__container {
padding-bottom: 64px;
}
.hotels-sec__filter {
padding-top: 40px;
position: relative;
}
.hotels-sec__top {
margin-bottom: 40px;
display: flex;
flex-direction: column-reverse;
gap: 40px;
padding-inline: 32px;
}
.footer__container .on-top {
top: 420px;
}
.title-sec__content .logo {
margin-bottom: 24px;
width: 40px;
height: 40px;
}
.title-sec__content h1 {
font-size: 24px;
line-height: 32px;
margin-bottom: 24px;
}
.title-keyframe h2 {
font-size: 24px !important;
line-height: 32px !important;
white-space: nowrap !important;
}
.hotels-sec__title {
padding-right: 40px;
padding-left: 0;
right: unset;
left: 50%;
transform: translate(-50%, -50%);
}
.page-home .title-sec__content {
margin-bottom: 40px;
}
.title-sec .line-hotels {
height: 60px;
}
.icon-wheel {
width: 32px;
height: 32px;
}
.hotels-sec__container {
padding-inline: 0;
}
.hotels-sec .hotels__img {
height: 350px;
aspect-ratio: unset;
}
.hotels__slider .swiper-slide .hotels__body {
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
transform: scale(0);
transform-origin: center;
}
.hotels__slider .swiper-slide.swiper-slide-active .hotels__body {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.hotels-sec .swiper-arrows {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
.hotels-sec__content {
max-width: 100%;
text-align: center;
}
.hotels-sec .swiper-arrows .swiper-button-next {
right: 50%;
top: 66px;
transform: translateX(130px);
}
.hotels-sec .swiper-arrows .swiper-button-prev {
left: 50%;
top: 66px;
transform: translateX(-130px);
}
.hotels-sec .swiper-arrows .swiper-pagination {
width: 150px;
left: 50%;
transform: translateX(-50%);
bottom: -86px;
top: unset;
height: 2px;
bottom: -38px;
overflow: hidden;
background-color: #5d270d33;
}
.hotels-sec
.swiper-arrows
.swiper-pagination
.swiper-pagination-progressbar-fill {
background-color: var(--color-secondary);
}
.hotels-sec .swiper-button-prev,
.hotels-sec .swiper-button-next {
border: none;
}
.hotels-sec .swiper-button-prev:hover,
.hotels-sec .swiper-button-next:hover {
background-color: transparent;
}
.hotels-sec .swiper-button-prev:hover svg path,
.hotels-sec .swiper-button-next:hover svg path {
stroke: var(--color-secondary);
}
.page-template-wp .hotels-sec__top {
padding-left: 0;
padding-right: 0;
position: relative;
}  .page-detail
.swiper-tab-detail
.swiper-slide.swiper-slide-next
.hotel__img
img,
.page-detail
.swiper-tab-detail
.swiper-slide.swiper-slide-prev
.hotel__img
img {
transform: unset;
}
.cruise__container {
padding: 0 32px 70px;
}
.cruise__container .lines__horizontal {
height: 2px;
width: calc(100% - 32px);
right: 16px;
top: -1px;
}
.cruise__container .lines__vertical {
left: 16px;
width: 2px;
top: -1px;
}
.cruise__container .cruise-stroke {
height: 176px;
top: 60px;
right: 0;
}
.cruise__container .cruise__title {
padding: 0 32px;
}
.cruise__container .cruise__title h2 {
transform: translateX(-16px);
}
.crusie__body {
padding-top: 62px;
}
.cruise__container .crusie__image {
height: 176px;
margin-bottom: 24px;
}
.cruise__container .crusie__name {
margin-bottom: 12px;
}
.restaurant__container .res-bg-top {
top: -25px;
}
.restaurant__container .res-bg-bottom {
bottom: -25px;
}
.restaurant__container .restaurant__image {
width: 100%;
margin-inline: auto;
}
.swiper-restaurant .swiper-img {
height: 176px;
}
.restaurant__image {
pointer-events: none;
}
.restaurant__title {
padding: 0 32px;
left: 50%;
transform: translateX(-50%);
}
.restaurant__container .lines__vertical--left-top {
left: 16px;
width: 2px;
top: -23px;
}
.restaurant__container.active .lines__vertical--left-top {
height: 91px;
}
.restaurant__container {
padding-top: 50px;
}
.restaurant__container .line__horizontal {
top: 70px;
height: 2px;
width: calc(100% - 32px);
left: 16px;
}
.restaurant__container .lines__vertical--right-bottom {
width: 2px;
right: 16px;
top: 67px;
height: calc(100% - 43px);
}
.cruise__container .lines__vertical {
height: calc(100% + 2px);
}
.restaurant__title h2 {
transform: translateX(-16px);
}
.restaurant__body {
margin-top: 84px;
}
.restaurant__content {
width: 100%;
margin-inline: auto;
position: relative;
}
.swiper-res-content {
margin-top: 24px;
}
.swiper-res-content .swiper-box {
max-width: 100%;
text-align: center;
}
.restaurant__container .restaurant__image .swiper-pagination {
bottom: -206px;
}
.restaurant__container .restaurant__image .swiper-pagination {
width: 150px;
}
.restaurant__container .swiper-button-next {
left: unset;
right: 50%;
transform: translateX(130px);
}
.restaurant__container .swiper-button-prev {
left: 50%;
transform: translateX(-130px);
}
.restaurant__container .swiper-button-prev,
.restaurant__container .swiper-button-next {
bottom: -65px;
border: none;
}
.restaurant__container .swiper-button-prev:hover,
.restaurant__container .swiper-button-next:hover {
background-color: transparent;
}
.restaurant__container .swiper-button-prev:hover svg path,
.restaurant__container .swiper-button-next:hover svg path {
stroke: var(--color-sub);
}
.testimonial__container .line__vertical--top-right {
right: 16px;
width: 2px;
}
.testimonial__container .line__horizontal {
right: 16px;
width: calc(100% - 32px);
height: 2px;
}
.testimonial__container .line__vertical--left {
width: 2px;
left: 16px;
top: 1px;
height: 100%;
}
.testimonial__title {
padding: 0 32px;
}
.testimonial__title h2 {
transform: translateX(-16px);
}
.testimonial__container.active .line__vertical--top-right {
height: 59px;
top: -58px;
}
.testimonial-sec {
padding-top: 80px;
}
.testimonial__body {
padding-block: 64px;
}
.testimonial__container {
padding: 0;
}
.testimonial__list {
overflow-x: scroll;
padding-top: 20px;
scroll-snap-align: center;
padding-inline: 32px;
border-bottom: none;
}
.testimonial__list::-webkit-scrollbar {
display: none;
}
.testimonila__item {
min-width: 68%;
flex-grow: 0;
}
.testimonila__item .box {
height: 257px;
padding: 32px;
}
.testimonial__content .box .desc {
width: calc(100% - 64px);
margin-inline: auto;
}
.b1 {
font-size: 14px;
line-height: 20px;
}
.testimonial__content {
padding-bottom: 40px;
}
.testimonial__list.active .testimonila__item:nth-child(4) {
display: none;
}
.testimonila__item:nth-child(4) {
display: none;
}
.testimonial__animation {
width: calc(100% - 114px);
margin-inline: auto;
border-bottom: 1px solid #5d270d99;
position: relative;
height: 60px;
}
.testimonial__animation .box-gif-mobile {
width: 79px;
height: 59px;
position: absolute;
left: 0;
transition: all 2s ease;
}
.testimonial__animation.active .box-gif-mobile {
left: calc(100% - 80px);
}
.offer__container {
padding: 0;
padding-bottom: 96px;
}
.offer-sec .box .box-img {
height: 350px;
}
.offer-sec .box .box-body {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.offer-sec .swiper-slide.swiper-slide-active .box .box-body {
opacity: 1;
visibility: visible;
}
.offer-sec .swiper-pagination {
width: 150px;
}
.page-template-wp .activities-sec__title,
.offer-sec__title,
.activities-sec__title {
padding: 0 32px;
right: unset;
left: 50%;
transform: translate(-50%, -50%);
}
.page-template-wp .activities-sec__title h2,
.offer-sec__title h2,
.activities-sec__title h2 {
transform: translateX(-16px);
}
.offer-sec .lines__horizontal {
height: 2px;
width: calc(100% - 32px);
left: 16px;
top: -1px;
}
.offer-sec .lines__vertical {
right: 16px;
width: 2px;
top: -1px;
height: calc(100% + 2px);
}
.offer__container .swiper-button-prev,
.offer__container .swiper-button-next {
top: unset;
bottom: -61px;
border: none;
}
.offer__container .swiper-button-prev {
left: 50%;
transform: translateX(-135px);
}
.offer__container .swiper-button-next {
right: 50%;
transform: translateX(135px);
}
.offer-sec .swiper-pagination {
bottom: -32px;
}
.offer-sec .section__lines {
height: 64px;
}
.gallery-sec__container .gallery-tab .gallery-list {
grid-template-columns: 1fr;
gap: 48px;
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item:nth-child(2n + 2) {
transform: translateY(0);
}
.gallery-sec__container {
padding-inline: 32px;
padding-bottom: 64px;
}
.gallery-sec__container .gallery-tab .gallery-list .gallery-item {
height: 190px;
aspect-ratio: unset;
}
.page-gallery .gallery-sec__container .lines__vertical {
right: 16px;
width: 2px;
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item
.box:hover
.overlay {
transform: rotate(-3deg) translate(-30px, 25px);
}
.gallery-sec__container
.gallery-tab
.gallery-list
.gallery-item
.box
.overlay {
padding-bottom: 8px;
}
.page-gallery .gallery-sec__container .gallery-sec__title {
padding: 0 32px;
right: unset;
left: 50%;
transform: translate(-50%, -50%);
}
.page-gallery .gallery-sec__container .gallery-sec__title h2 {
transform: translateX(-16px);
}
.gallery-sec__container .lines__horizontal {
height: 2px;
width: calc(50% - 16px);
}
.modal-dialog {
width: calc(100% - 32px);
margin-inline: auto;
}
.modal-content .form {
padding: 30px 16px;
}
.page-detail .title-sec.spacing-70 {
margin-top: 58px;
}
.page-detail .title-sec .line-hotels {
height: 60px;
}
.offer-detail .offer-detail__content .box {
padding-left: 0;
padding-right: 0;
}
.offer-detail__content {
padding-inline: 32px;
margin-bottom: 40px;
}
.offer-content .row {
flex-direction: column-reverse;
}
.offer-detail__image {
width: calc(100% - 64px);
margin-inline: auto;
}
.offer-detail .offer-content .hotels-sec__container {
padding-top: 40px;
padding-bottom: 95px;
}
.h2 {
font-size: 24px;
line-height: 32px;
}
.offer-detail__image .swiper-pagination {
width: 150px;
}
.offer-detail .hotels-sec .swiper-arrows .swiper-button-next,
.offer-detail .hotels-sec .swiper-arrows .swiper-button-prev {
top: 68px;
}
.offer-detail .offer-sec .lines__horizontal {
right: 16px;
}
.offer-detail .offer-sec .lines__vertical {
left: 16px;
}
.news-reverse .newsletter__sec .lines__horizontal--top {
right: 16px;
}
.news-reverse .newsletter__sec .lines__horizontal--bottom {
left: 16px;
}
.offer__container .swiper-button-prev:hover,
.offer__container .swiper-button-next:hover {
background-color: transparent;
}
.offer__container .swiper-button-prev:hover svg path,
.offer__container .swiper-button-next:hover svg path {
stroke: var(--color-secondary);
}
.experience-content .content {
padding: 0 32px;
}
.experience-detail .offer-sec .lines__horizontal .lines-horizontal {
right: 16px;
}
.experience-detail .offer-sec .lines__vertical {
left: 16px;
}
.experience-detail .offer-sec__title,
.offer-detail .offer-sec__title {
right: unset;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 32px;
}
.experience-detail .offer-sec__title h2,
.offer-detail .offer-sec__title h2 {
transform: translateX(-16px);
}
.hotel-detail .title-sec.spacing-70 {
margin-top: 113px;
}
.page-detail .title-sec .title-sec__content .desc {
margin-bottom: 40px;
}
.page-detail .title-sec .title-sec__content .button-list {
margin-bottom: 24px;
}
.page-detail .swiper-tab-detail .swiper-slide .hotel__card {
height: 170px;
}
.page-detail .swiper-tab-detail .hotel__box .hotel__content {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.page-detail .swiper-tab-detail .swiper-slide.is-active .hotel__content {
opacity: 1;
visibility: visible;
}
.page-detail .swiper-tab-detail {
padding-left: 32px;
}
.page-detail .hotels__slider .swiper-pagination {
width: 150px;
bottom: -37px;
}
.page-detail .hotels-sec__container {
padding-bottom: 120px;
}
.hotel-detail .cruise__container .crusie__desc {
margin-bottom: 0;
}
.facilities-sec .facilities__list {
grid-template-columns: 1fr 1fr;
gap: 48px 10px;
}
.facilities-sec {
padding-top: 90px;
}
.facilities__container .line__vertical--top-right {
right: 16px;
width: 2px;
top: -67px;
}
.facilities__container.active .line__vertical--top-right {
height: 69px;
}
.facilities__title {
padding: 0 32px;
}
.facilities__title h2 {
transform: translateX(-16px);
}
.facilities__container .line__horizontal {
right: 16px;
width: calc(100% - 32px);
height: 2px;
}
.facilities__container .line__vertical--left {
width: 2px;
left: 16px;
height: calc(100% + 0px);
}
.facilities-sec .testimonial__body {
padding-bottom: 80px;
}
.activities-sec .lines__horizontal {
left: 16px;
width: calc(100% - 32px);
height: 2px;
top: -2px;
}
.activities-sec .lines__vertical {
right: 16px;
width: 2px;
}
.activities-sec .section__lines {
height: 64px;
}
.activities__body {
padding: 0 32px;
}
.activities-sec .act-img {
width: 100%;
}
.act-content .swiper-box {
max-width: 100%;
text-align: center;
}
.activities__body .row {
flex-direction: column-reverse;
}
.activities__body .act-img {
margin-bottom: 24px;
}
.activities-sec .swiper-pagination {
width: 150px;
bottom: -32px;
}
.activities-sec .swiper-button-next {
transform: translateX(135px);
left: unset;
right: 50%;
}
.hotel-detail .offer__container {
padding-bottom: 120px;
}
.hotel-detail .offer-sec__title {
left: 50%;
transform: translate(-50%, -50%);
}
.hotel-detail .hotels-sec__top {
padding-left: 32px;
}
.hotel-detail .gallery-sec__container .lines__horizontal {
right: 16px;
height: 2px;
width: calc(100% - 32px);
}
.gallery-sec__container .gallery-sec__title {
padding: 0 32px;
}
.gallery-sec__container .gallery-sec__title h2 {
transform: translateX(-16px);
}
.gallery-sec__container .lines__vertical {
left: 16px;
width: 2px;
top: -1px;
}
.gallery-sec__container .gallery-sec__title h2 {
transform: translateX(-16px);
}
.button-group {
width: calc(100% - 64px);
}
.button-group .button {
width: 50% !important;
}
.button-group .button a {
width: 100% !important;
}
.page-star-cruise .title-sec.spacing-70 {
margin-top: 113px;
margin-bottom: 32px;
}
.page-star-cruise .hotels-sec__container {
padding-left: 0;
padding-right: 0;
}
.page-star-cruise .hotels-sec__top {
padding-left: 32px;
}
.page-detail .title-sec .title-sec__content h1 {
margin-bottom: 24px;
}
.page-star-cruise .activities-sec {
padding-top: 90px;
}
.page-star-cruise
.activities-sec
.offer__container.active
.line__vertical--top-right {
height: 69px;
}
.page-star-cruise .activities-sec .line__vertical--top-right {
right: 16px;
width: 2px;
top: -67px;
height: 0px;
}
.page-star-cruise .activities-sec .lines__horizontal {
right: 16px;
top: 0;
}
.page-star-cruise .activities-sec .lines__vertical {
left: 16px;
height: calc(100% + 2px);
}
.page-star-cruise .floor-plane .crusie__body {
padding-top: 0;
}
.page-star-cruise .floor-plane .crusie__body .crusie__image {
margin-bottom: 0;
}
.page-star-cruise .cruise__container .floor-plane__title,
.page-star-cruise .cruise-iti__title {
padding: 0 32px;
right: unset;
left: 50%;
transform: translate(-50%, -50%);
}
.page-star-cruise .cruise__container .floor-plane__title h2,
.page-star-cruise .cruise-iti__title h2 {
transform: translateX(-16px);
}
.page-star-cruise .floor-plane .cruise__container .lines__vertical {
right: 16px;
}
.page-star-cruise .offer-sec .lines__vertical {
left: 16px;
}
.restaurant__content .swiper-pagination {
width: 150px;
left: 50%;
transform: translateX(-50%);
top: unset;
bottom: -36px;
height: 2px;
overflow: hidden;
border-radius: 13px;
background-color: rgba(255, 255, 255, 0.2);
}
.restaurant__content .swiper-pagination .swiper-pagination-progressbar-fill {
background-color: var(--color-sub);
}
.page-detail .experience-content .hotels-sec__container {
padding-bottom: 40px;
}
.hotel-detail .gallery-sec .hotels-sec__top {
padding-left: 0;
padding-right: 0;
}
.page-template-wp .hotels-sec .hotels__img img {
padding: calc(1px / 2);
}
}