*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: ‘Nunito Sans’, sans-serif; color: #1a2636; background: #faf9f5; overflow-x: hidden; }
:root {
–ocean: #0C4A6E;
–ocean2: #0369A1;
–sky: #7DD3FC;
–sand: #F5ECD7;
–cream: #faf9f5;
–gold: #C9A84C;
–gold2: #e8c860;
–warm: #D97706;
–teal: #0F766E;
–teal2: #14B8A6;
–muted: #374151;
–r: 18px;
}
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .8s ease, transform .8s ease; }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .8s ease, transform .8s ease; }
.reveal-right.visible { opacity: 1; transform: none; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(–sand); }
::-webkit-scrollbar-thumb { background: var(–ocean2); border-radius: 3px; }
/* ── NAVBAR ── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 999;
display: flex; align-items: center; justify-content: space-between;
padding: 0 40px; height: 68px;
background: rgba(250,249,245,0.94);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(12,74,110,0.12);
transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 4px 24px rgba(12,74,110,0.12); }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo { height: 42px; width: auto; }
.nav-text { line-height: 1.1; }
.nav-name { font-family: ‘Cormorant Garamond’, serif; font-size: 1.25rem; font-weight: 700; color: var(–ocean); letter-spacing: 0.08em; }
.nav-sub { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(–gold); }
.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-links { display: flex; align-items: center; gap: 0; margin-right: 10px; }
.nav-link {
font-size: 0.8rem; font-weight: 600; color: var(–muted); text-decoration: none;
padding: 6px 16px; position: relative; transition: color .3s;
letter-spacing: 0.02em;
}
.nav-link::after {
content: ”; position: absolute; bottom: 0; left: 50%; width: 0; height: 1.5px;
background: var(–gold); transition: width .35s ease, left .35s ease;
}
.nav-link:hover { color: var(–ocean); }
.nav-link:hover::after { width: 60%; left: 20%; }
.nav-link:not(:last-child)::before {
content: ”; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 14px; background: rgba(12,74,110,0.15);
}
.nav-lang { font-size: 0.78rem; font-weight: 700; color: var(–ocean); text-decoration: none; border: 1.5px solid var(–ocean); border-radius: 50px; padding: 5px 14px; transition: all .2s; }
.nav-lang:hover { background: var(–ocean); color: #fff; }
.nav-btn {
background: var(–ocean); color: #fff; border: none; border-radius: 50px;
padding: 10px 22px; font-family: ‘Nunito Sans’, sans-serif; font-size: 0.82rem; font-weight: 700;
cursor: pointer; text-decoration: none; transition: background .2s, transform .15s; letter-spacing: 0.04em;
}
.nav-btn:hover { background: var(–ocean2); transform: translateY(-1px); }
@media (max-width: 768px) { nav { padding: 0 16px; } .nav-links { display: none; } }
/* ── HERO ── */
#hero {
position: relative; min-height: 100svh;
display: flex; align-items: center; justify-content: center;
text-align: center; overflow: hidden; padding: 120px 20px 80px;
}
.hero-photo {
position: absolute; inset: 0;
background: url(‘images/hero-resort.webp’) center/cover no-repeat;
transform: scale(1.06);
animation: heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1.12); } }
.hero-photo::after {
content: ”; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(2,20,40,.68) 0%, rgba(2,20,40,.35) 40%, rgba(2,20,40,.30) 60%, rgba(2,20,40,.55) 85%, rgba(2,20,40,.75) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 900px; }
.hero-seal {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(201,168,76,.18); border: 1px solid rgba(201,168,76,.5);
border-radius: 50px; padding: 7px 18px; margin-bottom: 28px;
}
.hero-seal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(–gold2); }
.hero-seal span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #f5dc88; }
.hero-script {
font-family: ‘Dancing Script’, cursive; font-size: clamp(1.2rem, 3vw, 1.8rem);
color: rgba(255,255,255,.92); margin-bottom: 10px; letter-spacing: 0.04em;
text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.hero-title {
font-family: ‘Cormorant Garamond’, serif; font-size: clamp(2.6rem, 6.5vw, 4.8rem);
font-weight: 700; line-height: 1.08; color: #fff;
text-shadow: 0 3px 32px rgba(0,0,0,.35); margin-bottom: 8px;
}
.hero-title .gold { color: #f5dc88; }
.hero-title .italic { font-style: italic; font-weight: 300; }
.hero-brush {
display: block; margin: 0 auto 24px; width: min(320px, 80vw); opacity: .7;
}
.hero-sub {
font-size: clamp(.95rem, 2vw, 1.15rem); color: rgba(255,255,255,.92);
line-height: 1.75; margin-bottom: 40px; font-weight: 400;
text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35);
}
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.btn-gold {
background: linear-gradient(135deg, #C9A84C 0%, #e8c860 60%, #C9A84C 100%);
background-size: 200% auto; color: #1a2636; border: none; border-radius: 50px;
padding: 16px 38px; font-family: ‘Nunito Sans’, sans-serif; font-size: 1rem; font-weight: 800;
cursor: pointer; text-decoration: none; box-shadow: 0 6px 28px rgba(201,168,76,.45);
transition: background-position .4s, transform .2s, box-shadow .2s; letter-spacing: 0.03em;
}
.btn-gold:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 10px 36px rgba(201,168,76,.55); }
.btn-ghost {
background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.55);
border-radius: 50px; padding: 15px 32px; font-family: ‘Nunito Sans’, sans-serif;
font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none;
backdrop-filter: blur(6px); transition: background .2s, transform .15s;
}
.btn-ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.hero-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.hero-stat { text-align: center; }
.hero-stat-num { font-family: ‘Cormorant Garamond’, serif; font-size: 2rem; font-weight: 700; color: var(–gold2); line-height: 1; }
.hero-stat-label { font-size: .7rem; color: rgba(255,255,255,.8); letter-spacing: .1em; text-transform: uppercase; }
.hero-wave { position: absolute; bottom: -2px; left: 0; right: 0; z-index: 3; line-height: 0; }
.hero-wave svg { display: block; width: 100%; }
/* ── MARQUEE ── */
.marquee-strip { background: var(–ocean); padding: 14px 0; overflow: hidden; display: flex; align-items: center; }
.marquee-track { display: flex; gap: 0; animation: marquee 38s linear infinite; white-space: nowrap; }
.marquee-track span { font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.78); padding: 0 28px; }
.marquee-track span.dot { color: var(–gold2); padding: 0 4px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── SECTION SHARED ── */
.section { padding: 96px 24px; }
.section.tight { padding: 72px 24px; }
.container { max-width: 1120px; margin: 0 auto; }
.tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: .7rem; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(–ocean); margin-bottom: 14px;
}
.tag::before, .tag::after { content: ”; display: block; width: 24px; height: 1px; background: var(–ocean); opacity: .5; }
.h2 {
font-family: ‘Cormorant Garamond’, serif; font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 700; line-height: 1.15; color: var(–ocean); margin-bottom: 18px;
}
.h2 em { font-style: italic; font-weight: 300; color: var(–ocean2); }
.h2 .script { font-family: ‘Dancing Script’, cursive; color: var(–gold); }
.lead { font-size: 1.05rem; color: var(–muted); line-height: 1.75; max-width: 640px; }
.tc { text-align: center; }
.tc .lead { margin: 0 auto; }
/* ── ABOUT SPLIT ── */
#about { background: var(–cream); overflow: hidden; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.split-img { position: relative; }
.split-img img { width: 100%; border-radius: 32px 8px 32px 8px; display: block; box-shadow: 12px 20px 60px rgba(12,74,110,.22); }
.split-img .img-badge {
position: absolute; bottom: -18px; right: -18px;
background: var(–ocean); color: #fff; border-radius: 50%;
width: 110px; height: 110px; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
box-shadow: 0 8px 28px rgba(12,74,110,.35); border: 3px solid rgba(255,255,255,.15);
}
.img-badge .b-num { font-family: ‘Cormorant Garamond’, serif; font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(–gold2); }
.img-badge .b-txt { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; line-height: 1.3; }
.split-text .tag { margin-bottom: 12px; }
.split-text .lead { margin-top: 18px; }
.split-text .features { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.feat-item {
display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px;
background: rgba(125,211,252,.10); border-radius: 12px; border-left: 3px solid var(–sky);
}
.feat-icon { font-size: 1.4rem; flex-shrink: 0; }
.feat-text h4 { font-size: .95rem; font-weight: 700; color: var(–ocean); margin-bottom: 3px; }
.feat-text p { font-size: .84rem; color: var(–muted); line-height: 1.5; }
/* ── ROOMS GRID ── */
#rooms { background: var(–sand); position: relative; overflow: hidden; }
#rooms::before {
content: ”; position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(12,74,110,.04) 0%, transparent 70%);
}
.rooms-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px; margin-top: 56px; position: relative; z-index: 1;
}
.room-card {
background: #fff; border-radius: 20px; overflow: hidden;
box-shadow: 0 6px 32px rgba(12,74,110,.08);
transition: transform .3s, box-shadow .3s;
border: 1px solid rgba(12,74,110,.06);
}
.room-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(12,74,110,.14); }
.room-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.room-body { padding: 22px; }
.room-type {
font-size: .65rem; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(–gold); margin-bottom: 6px;
}
.room-name {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.2rem; font-weight: 700; color: var(–ocean); line-height: 1.2; margin-bottom: 8px;
}
.room-specs { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.room-spec {
font-size: .72rem; font-weight: 600; padding: 3px 10px;
background: rgba(12,74,110,.06); color: var(–ocean); border-radius: 50px;
}
.room-desc { font-size: .84rem; color: var(–muted); line-height: 1.5; }
.room-card { position: relative; }
.room-avail {
position: absolute; top: 12px; right: 12px; z-index: 2;
padding: 4px 12px; border-radius: 50px;
font-size: .68rem; font-weight: 800; letter-spacing: .03em;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
animation: fadeInBadge .4s ease;
}
@keyframes fadeInBadge { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.room-avail.available { background: rgba(5,150,105,.9); color: #fff; }
.room-avail.few-left {
background: rgba(220,38,38,.92); color: #fff;
animation: fadeInBadge .4s ease, pulseFomo 1.8s ease-in-out infinite;
}
@keyframes pulseFomo {
0%,100% { transform: scale(1); }
50% { transform: scale(1.08); box-shadow: 0 0 12px rgba(220,38,38,.5); }
}
.room-avail.soldout { background: rgba(100,116,139,.85); color: #fff; }
.room-avail.loading { background: rgba(255,255,255,.8); color: var(–ocean); }
.room-price-tag {
margin-top: 10px; padding: 8px 0; border-top: 1px solid rgba(12,74,110,.08);
display: flex; align-items: baseline; gap: 6px;
}
.room-price-tag .price {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.15rem; font-weight: 700; color: var(–ocean);
}
.room-price-tag .per-night { font-size: .72rem; color: var(–muted); }
.room-price-tag .old-price {
font-size: .82rem; color: var(–muted); text-decoration: line-through;
}
/* ── AVAILABILITY CHECKER ── */
.avail-checker {
background: #fff; border-radius: 20px; padding: 32px 28px;
box-shadow: 0 8px 40px rgba(12,74,110,.12);
border: 1px solid rgba(12,74,110,.08);
margin-top: 40px; position: relative; z-index: 2;
}
.avail-form {
display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
}
.avail-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.avail-field label {
font-size: .72rem; font-weight: 700; letter-spacing: .15em;
text-transform: uppercase; color: var(–ocean);
}
.avail-field input, .avail-field select {
font-family: ‘Nunito Sans’, sans-serif; font-size: .9rem;
padding: 12px 16px; border: 1.5px solid rgba(12,74,110,.15);
border-radius: 12px; background: var(–cream); color: #1a2636;
outline: none; transition: border-color .2s;
}
.avail-field input:focus, .avail-field select:focus { border-color: var(–ocean2); }
.avail-btn {
background: linear-gradient(135deg, var(–gold), var(–gold2));
color: #1a2636; border: none; border-radius: 12px;
padding: 12px 28px; font-family: ‘Nunito Sans’, sans-serif;
font-size: .88rem; font-weight: 800; cursor: pointer;
transition: transform .15s, box-shadow .2s; white-space: nowrap;
}
.avail-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,.4); }
.avail-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.avail-results { margin-top: 28px; }
.avail-loading {
text-align: center; padding: 24px; color: var(–ocean2);
font-size: .9rem; font-weight: 600;
}
.avail-error {
text-align: center; padding: 16px; color: #dc2626;
font-size: .88rem; background: #fef2f2; border-radius: 12px;
}
.avail-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.avail-card {
display: flex; align-items: center; gap: 16px;
background: var(–cream); border-radius: 16px; padding: 18px 20px;
border: 1px solid rgba(12,74,110,.08);
transition: transform .2s, box-shadow .2s;
}
.avail-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(12,74,110,.1); }
.avail-card.unavailable { opacity: .55; }
.avail-room-info { flex: 1; }
.avail-room-name {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.05rem; font-weight: 700; color: var(–ocean); line-height: 1.2; margin-bottom: 4px;
}
.avail-room-meta { font-size: .76rem; color: var(–muted); }
.avail-price-box { text-align: right; flex-shrink: 0; }
.avail-price {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.3rem; font-weight: 700; color: var(–teal);
}
.avail-price-old {
font-size: .78rem; color: #999; text-decoration: line-through; margin-bottom: 2px;
}
.avail-per-night { font-size: .68rem; color: var(–muted); }
.avail-status {
display: inline-block; font-size: .68rem; font-weight: 700;
padding: 3px 10px; border-radius: 50px; margin-top: 4px;
}
.avail-status.available { background: rgba(16,185,129,.12); color: #059669; }
.avail-status.soldout { background: rgba(220,38,38,.1); color: #dc2626; }
.avail-summary {
margin-top: 16px; text-align: center; font-size: .84rem; color: var(–muted);
}
.avail-summary a { color: var(–ocean2); font-weight: 700; text-decoration: none; }
.avail-summary a:hover { text-decoration: underline; }
@media (max-width: 640px) {
.avail-form { flex-direction: column; }
.avail-field { min-width: 100%; }
.avail-checker { padding: 24px 18px; }
.avail-card { flex-direction: column; text-align: center; }
.avail-price-box { text-align: center; }
}
/* ── DINING ── */
#dining { background: var(–ocean); position: relative; overflow: hidden; }
#dining::before {
content: ”; position: absolute; inset: 0;
background: radial-gradient(ellipse at 70% 30%, rgba(255,255,255,.06) 0%, transparent 60%);
}
.dining-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; margin-top: 48px; position: relative; z-index: 1;
}
@media (max-width: 900px) { .dining-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
.dining-card {
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
backdrop-filter: blur(10px); border-radius: 20px; overflow: hidden;
transition: background .25s, transform .25s;
}
.dining-card:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); }
.dining-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.dining-body { padding: 24px; }
.dining-name {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.dining-info { font-size: .84rem; color: rgba(255,255,255,.85); line-height: 1.6; margin-bottom: 4px; }
.dining-hours {
font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(–gold2); margin-top: 12px;
}
/* ── EXPERIENCES ── */
#experiences { background: var(–cream); overflow: hidden; }
.exp-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px; margin-top: 48px;
}
@media (max-width: 900px) { .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .exp-grid { grid-template-columns: 1fr; } }
.exp-card {
position: relative; border-radius: 20px; overflow: hidden;
min-height: 340px; cursor: pointer;
}
.exp-card img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .6s ease;
}
.exp-card:hover img { transform: scale(1.08); }
.exp-card::after {
content: ”; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(2,20,40,.88) 0%, rgba(2,20,40,.3) 50%, transparent 100%);
}
.exp-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; padding: 24px 20px; }
.exp-tag {
font-size: .65rem; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(–gold2); margin-bottom: 6px;
}
.exp-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 6px;
}
.exp-desc { font-size: .82rem; color: rgba(255,255,255,.85); line-height: 1.5; }
/* ── WELLNESS / SPA ── */
#wellness {
position: relative; overflow: hidden; min-height: 520px;
display: flex; align-items: center;
}
.wellness-bg {
position: absolute; inset: 0;
background: url(‘images/spa-wellness.webp’) center/cover no-repeat;
}
.wellness-bg::after {
content: ”; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(12,74,110,.88) 0%, rgba(15,118,110,.72) 100%);
}
.wellness-content { position: relative; z-index: 1; width: 100%; padding: 80px 24px; }
.wellness-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px; margin-top: 48px;
}
.well-card {
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
backdrop-filter: blur(10px); border-radius: 20px; padding: 28px 22px;
transition: background .25s, transform .25s;
}
.well-card:hover { background: rgba(255,255,255,.2); transform: translateY(-4px); }
.well-icon { font-size: 2rem; margin-bottom: 12px; }
.well-card h3 { font-family: ‘Cormorant Garamond’, serif; font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.2; }
.well-card p { font-size: .84rem; color: rgba(255,255,255,.9); line-height: 1.6; }
/* ── WEDDINGS ── */
#weddings { background: var(–sand); position: relative; overflow: hidden; }
.wedding-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 48px; }
@media (max-width: 860px) { .wedding-split { grid-template-columns: 1fr; gap: 32px; } }
.wedding-img { border-radius: 24px; overflow: hidden; box-shadow: 0 12px 48px rgba(12,74,110,.15); }
.wedding-img img { width: 100%; height: 400px; object-fit: cover; display: block; }
.wedding-text .lead { margin-top: 16px; }
.wedding-features { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.wedding-features li {
display: flex; align-items: flex-start; gap: 10px; list-style: none;
font-size: .9rem; color: var(–muted); line-height: 1.5;
}
.wedding-features .pk { color: var(–gold); flex-shrink: 0; }
/* ── QUOTE BANNER ── */
#quotebanner { position: relative; overflow: hidden; padding: 0; }
.quote-photo { width: 100%; height: auto; display: block; max-height: 480px; object-fit: cover; }
.quote-overlay {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(12,74,110,.80) 0%, rgba(12,74,110,.30) 60%, transparent 100%);
display: flex; align-items: center; padding: 0 10%;
}
.quote-box { max-width: 520px; }
.quote-box blockquote {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(1.5rem, 3.5vw, 2.4rem);
font-weight: 600; font-style: italic; color: #fff; line-height: 1.3; margin-bottom: 16px;
}
.quote-box cite { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(–gold2); font-style: normal; }
/* ── EXPLORE ── */
#explore { background: #fff; }
.explore-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 28px; margin-top: 48px;
}
@media (max-width: 700px) { .explore-grid { grid-template-columns: 1fr; } }
.explore-card {
background: var(–cream); border-radius: 20px; overflow: hidden;
box-shadow: 0 4px 24px rgba(12,74,110,.08); transition: transform .3s;
border: 1px solid rgba(12,74,110,.06);
}
.explore-card:hover { transform: translateY(-4px); }
.explore-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.explore-body { padding: 24px; }
.explore-body h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.25rem; font-weight: 700; color: var(–ocean); margin-bottom: 8px;
}
.explore-body p { font-size: .88rem; color: var(–muted); line-height: 1.6; }
/* ── LIFESTYLE ── */
#lifestyle { background: var(–cream); }
.lifestyle-scroll {
display: flex; gap: 20px; margin-top: 48px;
overflow-x: auto; scroll-snap-type: x mandatory;
padding: 0 0 16px; -webkit-overflow-scrolling: touch;
}
.lifestyle-scroll::-webkit-scrollbar { height: 4px; }
.lifestyle-scroll::-webkit-scrollbar-thumb { background: var(–ocean2); border-radius: 2px; }
.ls-card {
min-width: 280px; max-width: 320px; flex-shrink: 0;
scroll-snap-align: start;
background: #fff; border-radius: 20px; overflow: hidden;
box-shadow: 0 6px 32px rgba(12,74,110,.08);
transition: transform .3s;
}
.ls-card:hover { transform: translateY(-4px); }
.ls-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.ls-card-body { padding: 20px; }
.ls-card-body h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.1rem; font-weight: 700; color: var(–ocean); margin-bottom: 6px;
}
.ls-card-body p { font-size: .84rem; color: var(–muted); line-height: 1.5; }
.ls-tag {
display: inline-block; font-size: .68rem; font-weight: 700;
padding: 3px 10px; border-radius: 50px; margin-top: 8px;
background: rgba(125,211,252,.2); color: var(–ocean);
}
/* ── CONTACT / FINAL CTA ── */
#contact {
position: relative; overflow: hidden; min-height: 500px;
display: flex; align-items: center; justify-content: center; text-align: center;
}
.contact-bg { position: absolute; inset: 0; background: url(‘images/hero-resort.webp’) center/cover no-repeat; }
.contact-bg::after {
content: ”; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(12,74,110,.90) 0%, rgba(15,118,110,.75) 100%);
}
.contact-content { position: relative; z-index: 2; padding: 100px 24px; max-width: 760px; }
.contact-script { font-family: ‘Dancing Script’, cursive; font-size: 1.5rem; color: var(–gold2); margin-bottom: 8px; }
.contact-h2 {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 18px;
}
.contact-p { font-size: 1.05rem; color: rgba(255,255,255,.9); line-height: 1.7; margin-bottom: 40px; }
.contact-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.contact-info { margin-top: 40px; display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.contact-item { text-align: center; }
.contact-item-label { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 4px; }
.contact-item-val { font-size: .95rem; color: #fff; font-weight: 600; }
.contact-item-val a { color: var(–gold2); text-decoration: none; }
.contact-item-val a:hover { text-decoration: underline; }
/* ── FOOTER ── */
footer { background: #071820; padding: 52px 24px 28px; }
.footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-name {
font-family: ‘Cormorant Garamond’, serif; font-size: 1.5rem; font-weight: 700;
color: #fff; margin-bottom: 8px; letter-spacing: 0.08em;
}
.footer-tagline { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(–gold); margin-bottom: 28px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.footer-links a { font-size: .82rem; color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(–sky); }
.footer-divider { width: 40px; height: 1px; background: rgba(255,255,255,.15); margin: 0 auto 20px; }
.footer-copy { font-size: .72rem; color: rgba(255,255,255,.45); }
/* ── BOOKING MODAL ── */
.booking-modal {
display: none; position: fixed; inset: 0; z-index: 10000;
align-items: center; justify-content: center;
}
.booking-modal.active { display: flex; }
.booking-overlay {
position: absolute; inset: 0; background: rgba(0,0,0,.55);
backdrop-filter: blur(4px);
}
.booking-content {
position: relative; background: #fff; border-radius: 24px;
padding: 36px 32px; max-width: 520px; width: 92%;
max-height: 90vh; overflow-y: auto;
box-shadow: 0 24px 80px rgba(12,74,110,.25);
animation: modalIn .3s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.booking-close {
position: absolute; top: 14px; right: 18px; background: none; border: none;
font-size: 1.6rem; color: var(–muted); cursor: pointer; line-height: 1;
}
.booking-close:hover { color: var(–ocean); }
.booking-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.5rem; font-weight: 700; color: var(–ocean); margin-bottom: 6px;
}
.booking-room-info {
font-size: .85rem; color: var(–muted); margin-bottom: 20px;
padding-bottom: 16px; border-bottom: 1px solid rgba(12,74,110,.1);
}
.booking-room-info strong { color: var(–ocean); }
.booking-field { margin-bottom: 14px; }
.booking-field label {
display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(–ocean); margin-bottom: 5px;
}
.booking-field input, .booking-field textarea, .booking-field select {
width: 100%; font-family: ‘Nunito Sans’, sans-serif; font-size: .9rem;
padding: 11px 14px; border: 1.5px solid rgba(12,74,110,.15);
border-radius: 10px; background: var(–cream); color: #1a2636;
outline: none; transition: border-color .2s;
}
.booking-field input:focus, .booking-field textarea:focus { border-color: var(–ocean2); }
.booking-field input[readonly] { background: rgba(12,74,110,.04); color: var(–muted); }
.booking-field textarea { resize: vertical; min-height: 60px; }
.booking-row { display: flex; gap: 12px; }
.booking-row .booking-field { flex: 1; }
.booking-submit {
width: 100%; margin-top: 18px;
background: linear-gradient(135deg, var(–gold), var(–gold2));
color: #1a2636; border: none; border-radius: 12px;
padding: 14px; font-family: ‘Nunito Sans’, sans-serif;
font-size: .95rem; font-weight: 800; cursor: pointer;
transition: transform .15s, box-shadow .2s;
}
.booking-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,.4); }
.booking-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.booking-success {
text-align: center; padding: 20px 0;
}
.booking-success-icon { font-size: 3rem; margin-bottom: 12px; }
.booking-success h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.4rem; font-weight: 700; color: var(–ocean); margin-bottom: 8px;
}
.booking-success p { font-size: .9rem; color: var(–muted); line-height: 1.6; }
.booking-success .order-num {
display: inline-block; background: rgba(16,185,129,.1); color: #059669;
font-weight: 700; padding: 4px 14px; border-radius: 8px; margin: 8px 0;
}
.booking-error { color: #dc2626; font-size: .84rem; margin-top: 8px; text-align: center; }
/* ── PAYMENT QR VIEW ── */
.payment-view { text-align: center; padding: 10px 0; }
.payment-view h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.3rem; font-weight: 700; color: var(–ocean); margin-bottom: 4px;
}
.payment-order-num {
display: inline-block; background: rgba(16,185,129,.1); color: #059669;
font-weight: 700; padding: 4px 14px; border-radius: 8px; margin: 6px 0 12px;
font-family: ui-monospace, monospace; font-size: .9rem;
}
.payment-qr-wrap {
background: #fff; border: 2px solid rgba(12,74,110,.1); border-radius: 16px;
padding: 12px; display: block; margin: 0 auto 12px; width: fit-content;
}
.payment-qr-wrap img { width: 220px; height: 220px; display: block; margin: 0 auto; }
.payment-info {
font-size: .82rem; color: var(–muted); line-height: 1.8;
background: var(–cream); border-radius: 10px; padding: 14px 18px;
text-align: left; margin-bottom: 14px;
}
.payment-info strong { color: var(–ocean); display: inline-block; min-width: 95px; }
.payment-info .highlight {
color: #dc2626; font-weight: 700; background: rgba(220,38,38,.08);
padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .82rem;
}
.payment-urgency {
background: linear-gradient(135deg, rgba(201,168,76,.1), rgba(220,38,38,.06));
border-left: 3px solid var(–gold);
border-radius: 0 10px 10px 0;
padding: 10px 14px; margin-bottom: 14px; text-align: left;
font-size: .8rem; color: #7c6a2f; line-height: 1.5;
}
.payment-urgency strong { color: #b45309; }
.payment-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.payment-actions .btn-primary {
width: 100%; padding: 13px; background: var(–ocean); color: #fff;
border: none; border-radius: 10px; font-size: .9rem; font-weight: 700;
cursor: default; font-family: ‘Nunito Sans’, sans-serif;
}
.payment-actions .btn-later {
width: 100%; padding: 11px; background: transparent; color: var(–muted);
border: 1.5px solid rgba(12,74,110,.15); border-radius: 10px;
font-size: .82rem; font-weight: 600; cursor: pointer;
font-family: ‘Nunito Sans’, sans-serif; transition: all .2s;
}
.payment-actions .btn-later:hover { border-color: var(–ocean); color: var(–ocean); }
.payment-status {
display: flex; align-items: center; justify-content: center;
gap: 8px; font-size: .9rem; font-weight: 600; color: var(–gold2);
margin: 10px 0;
}
.payment-status.paid { color: #059669; }
.payment-later-form { text-align: left; margin-top: 12px; }
.payment-later-form label {
display: block; font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em; color: var(–ocean); margin-bottom: 4px; margin-top: 10px;
}
.payment-later-form input {
width: 100%; padding: 10px 12px; border: 1.5px solid rgba(12,74,110,.15);
border-radius: 8px; font-size: .88rem; font-family: ‘Nunito Sans’, sans-serif;
background: var(–cream); outline: none;
}
.payment-later-form input:focus { border-color: var(–ocean); }
.payment-spinner {
width: 18px; height: 18px; border: 2.5px solid rgba(201,168,76,.3);
border-top-color: var(–gold2); border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.payment-paid-icon { font-size: 2.5rem; margin-bottom: 8px; }
/* ── EXELY BOOKING POPUP ── */
.exely-modal {
display: none; position: fixed; inset: 0; z-index: 10001;
align-items: center; justify-content: center;
}
.exely-modal.active { display: flex; }
.exely-overlay {
position: absolute; inset: 0; background: rgba(12,74,110,.78);
backdrop-filter: blur(6px);
}
.exely-frame-wrap {
position: relative; width: 96%; max-width: 1100px;
height: 92vh; max-height: 820px;
background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: 0 32px 100px rgba(0,0,0,.4);
animation: modalIn .3s ease;
}
.exely-close {
position: absolute; top: 12px; right: 14px; z-index: 2;
background: rgba(12,74,110,.95); color: #fff; border: none;
width: 36px; height: 36px; border-radius: 50%;
font-size: 1.4rem; cursor: pointer; line-height: 1;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
transition: background .15s, transform .15s;
}
.exely-close:hover { background: var(–gold2); transform: scale(1.08); }
.exely-frame-wrap iframe {
width: 100%; height: 100%; border: 0; display: block;
}
.exely-loading {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: var(–cream); color: var(–ocean);
font-family: ‘Cormorant Garamond’, serif; font-size: 1.4rem;
pointer-events: none; transition: opacity .3s;
}
.exely-loading.hidden { opacity: 0; }
@media (max-width: 640px) {
.exely-frame-wrap { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}
/* ── ROOM DETAIL MODAL ── */
.room-card-actions {
display: flex; gap: 10px; align-items: center; margin-top: 12px;
padding-top: 10px; border-top: 1px solid rgba(12,74,110,.06);
}
.room-book-main {
display: inline-block;
background: var(–ocean); color: #fff; border: none; border-radius: 8px;
padding: 8px 18px; font-family: ‘Nunito Sans’, sans-serif;
font-size: .78rem; font-weight: 700; cursor: pointer;
transition: background .2s, transform .15s;
}
.room-book-main:hover { background: var(–ocean2); transform: translateY(-1px); }
.room-detail-btn {
display: inline-block;
font-size: .78rem; font-weight: 600; color: var(–muted);
text-decoration: none; cursor: pointer; border: none; background: none;
padding: 0; font-family: ‘Nunito Sans’, sans-serif;
transition: color .2s;
}
.room-detail-btn:hover { color: var(–ocean); }
.room-detail-content { max-height: 70vh; overflow-y: auto; }
.room-detail-content h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.4rem; font-weight: 700; color: var(–ocean); margin-bottom: 4px;
}
.room-detail-content .room-detail-type {
font-size: .7rem; font-weight: 700; letter-spacing: .15em;
text-transform: uppercase; color: var(–gold); margin-bottom: 12px;
}
.room-detail-specs {
display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
padding-bottom: 14px; border-bottom: 1px solid rgba(12,74,110,.08);
}
.room-detail-specs .spec {
display: flex; align-items: center; gap: 6px;
font-size: .85rem; color: var(–ocean); font-weight: 600;
}
.room-detail-specs .spec-icon { font-size: 1.1rem; }
.room-detail-section { margin-bottom: 16px; }
.room-detail-section h4 {
font-size: .78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .1em; color: var(–ocean); margin-bottom: 8px;
}
.room-detail-section ul {
list-style: none; padding: 0; margin: 0;
}
.room-detail-section li {
font-size: .84rem; color: var(–muted); line-height: 1.7;
padding-left: 20px; position: relative;
}
.room-detail-section li::before {
content: ‘2713’; position: absolute; left: 0; color: #059669; font-weight: 700;
}
.room-detail-section .note {
font-size: .82rem; color: var(–muted); line-height: 1.6;
background: var(–cream); padding: 12px 16px; border-radius: 10px;
}
.room-detail-section .note strong { color: var(–ocean); }
.room-detail-section .highlight {
background: rgba(201,168,76,.1); border-left: 3px solid var(–gold);
padding: 10px 14px; border-radius: 0 8px 8px 0; margin-top: 8px;
font-size: .82rem; color: #7c6a2f; line-height: 1.5;
}
@media (max-width: 640px) {
.booking-content { padding: 28px 18px; }
.booking-row { flex-direction: column; gap: 0; }
}
/* ── AVAIL BOOK BTN ── */
.avail-book-btn {
display: inline-block; margin-top: 6px;
background: var(–ocean); color: #fff; border: none; border-radius: 8px;
padding: 6px 14px; font-family: ‘Nunito Sans’, sans-serif;
font-size: .72rem; font-weight: 700; cursor: pointer;
transition: background .2s, transform .15s;
}
.avail-book-btn:hover { background: var(–ocean2); transform: translateY(-1px); }
/* ── FLOAT BTN ── */
.float-btn {
position: fixed; bottom: 100px; right: 20px; z-index: 900;
background: linear-gradient(135deg, #C9A84C, #e8c860); color: #1a2636;
border: none; border-radius: 50px; padding: 14px 26px;
font-family: ‘Nunito Sans’, sans-serif; font-size: .9rem; font-weight: 800;
cursor: pointer; text-decoration: none;
box-shadow: 0 8px 32px rgba(201,168,76,.5);
display: flex; align-items: center; gap: 8px;
animation: floatPulse 2.8s ease-in-out infinite;
transition: transform .2s, box-shadow .2s, opacity .3s;
}
.float-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(201,168,76,.6); animation: none; }
@keyframes floatPulse {
0%, 100% { transform: translateY(0); box-shadow: 0 8px 32px rgba(201,168,76,.5); }
50% { transform: translateY(-6px); box-shadow: 0 14px 44px rgba(201,168,76,.65); }
}
/* ── RESPONSIVE ── */
@media (max-width: 860px) {
.section { padding: 72px 20px; }
.section.tight { padding: 52px 20px; }
.wellness-content { padding: 64px 20px; }
.quote-overlay {
background: linear-gradient(180deg, rgba(12,74,110,.4) 0%, rgba(12,74,110,.80) 50%, rgba(12,74,110,.90) 100%);
align-items: flex-end; padding: 0 6% 32px;
}
.quote-box { max-width: 100%; }
}
@media (max-width: 640px) {
.section { padding: 56px 16px; }
.section.tight { padding: 44px 16px; }
nav { padding: 0 14px; height: 60px; }
.nav-name { font-size: 1rem; }
.nav-sub { display: none; }
#hero { padding: 90px 16px 64px; }
.hero-btns { flex-direction: column; align-items: stretch; }
.hero-btns a { text-align: center; }
.hero-stats { gap: 20px; }
.hero-stat-num { font-size: 1.5rem; }
.marquee-track span { padding: 0 18px; font-size: .72rem; }
.split { gap: 28px; }
.split-img { padding-bottom: 18px; overflow: visible; }
.split-img .img-badge { width: 86px; height: 86px; bottom: 0; right: 0; }
.img-badge .b-num { font-size: 1.5rem; }
.img-badge .b-txt { font-size: .52rem; }
.rooms-grid { gap: 16px; }
.dining-grid { gap: 16px; }
.exp-card { min-height: 260px; }
.exp-grid { gap: 12px; }
.wellness-grid { gap: 12px; margin-top: 28px; }
.well-card { padding: 20px 16px; }
.wedding-img img { height: 280px; }
#quotebanner { min-height: 200px; }
.quote-photo { max-height: 300px; }
.quote-overlay {
background: linear-gradient(0deg, rgba(12,74,110,.92) 0%, rgba(12,74,110,.55) 55%, rgba(12,74,110,.15) 100%);
align-items: flex-end; padding: 20px 16px 28px;
}
.quote-box blockquote { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }
.contact-btns { flex-direction: column; align-items: stretch; }
.contact-btns a { text-align: center; }
.contact-content { padding: 72px 16px; }
.float-btn { bottom: 88px; right: 12px; padding: 12px 18px; font-size: .82rem; }
.contact-info { gap: 20px; }
}
@media (max-width: 390px) {
.hero-title { font-size: clamp(2.1rem, 9vw, 2.8rem); }
.btn-gold, .btn-ghost { padding: 14px 20px; font-size: .9rem; }
.h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.nav-btn { padding: 8px 14px; font-size: .76rem; }
}

Stelia Beach Resort✦
5-Star Resort✦
Bãi Biển Riêng Tư✦
Aura Spa & Wellness✦
Kiến Trúc Địa Trung Hải✦
Agoda 9.6✦
World Luxury Hotel Awards✦
Tuy Hòa, Phú Yên✦
Stelia Beach Resort✦
5-Star Resort✦
Bãi Biển Riêng Tư✦
Aura Spa & Wellness✦
Kiến Trúc Địa Trung Hải✦
Agoda 9.6✦
World Luxury Hotel Awards✦
Tuy Hòa, Phú Yên✦

50+
Năm
Rừng Phi Lao
Tổng Quan

Khu Nghỉ Dưỡng Biển
Riêng Tư Giữa Thiên Nhiên

Nằm bên bờ biển riêng thanh bình của Tuy Hòa, Stelia Beach Resort là khu nghỉ dưỡng được bao bọc bởi rừng phi lao hơn 50 năm tuổi. Với kiến trúc Địa Trung Hải và không gian nghỉ dưỡng riêng tư.

🏆

Giải Thưởng Quốc Tế

Luxury Lifestyle Awards, World Luxury Hotel Awards, Tripadvisor Travelers’ Choice và Agoda Customer Review 9.6.

🌿

Phát Triển Bền Vững

Được ghi nhận bởi Sustainable Development Award, khẳng định cam kết cho hành trình nghỉ dưỡng xanh và trách nhiệm.

🌊

Bãi Biển Riêng

Bãi biển cát trắng riêng tư, hồ bơi vô cực hướng biển và khu vườn nhiệt đới xanh mát.

“Nơi thiên nhiên còn nguyên vẹn nhất, nơi nghỉ dưỡng trở thành một hành trình chữa lành.”

— Stelia Beach Resort

Hôn Lễ

Tiệc Cưới & Sự Kiện Bên Biển

Lễ Vow – Bãi Cỏ Nghinh Phong

Giữa không gian biển trời khoáng đạt, nghi thức trao lời thề trở nên thiêng liêng và đầy cảm xúc. Khung cảnh hướng biển cùng cách bài trí tinh tế tạo nên khoảnh khắc đáng nhớ.

• ✦ Lễ cưới ngoài trời bên bãi cỏ Nghinh Phong hướng biển
• ✦ Sảnh tiệc sang trọng và phòng VIP riêng tư tại Aroma
• ✦ Trăng mật & tiệc kỷ niệm với bữa tối hoàng hôn bên biển
• ✦ Sự kiện doanh nghiệp: hội nghị, sinh nhật, họp mặt

Khám Phá

Hành Trình Bản Địa Tinh Chọn

Từ Stelia, hành trình khám phá biển Tuy Hòa mở ra với những thắng cảnh thiên nhiên hoang sơ và giá trị văn hóa đặc sắc.

Tham Quan Địa Danh Phú Yên

Khám phá Ghềnh Đá Đĩa, Hải đăng Mũi Điện, Tháp Nghinh Phong và những bãi biển nguyên sơ – nơi vẻ đẹp miền duyên hải được giữ trọn vẹn theo thời gian.

Về Miền Di Sản – Làng Cói

Gặp gỡ nghệ nhân địa phương, tìm hiểu cách đan lát truyền thống và cảm nhận nhịp sống làng nghề mộc mạc – một hành trình kết nối với di sản văn hóa bản địa.

×
×
Yêu Cầu Đặt Phòng
Họ và tên *

Số điện thoại *

Email

Nhận phòng

Trả phòng

Loại phòng

Ghi chú

Gửi Yêu Cầu Đặt Phòng

Thanh Toán Đặt Phòng

Ngân hàng: VietinBank
Số TK: 108869583426
Chủ TK: CAO CHI TAM
Số tiền:
Nội dung CK:


⚡ Giả lập thanh toán thành công

Bypass cổng thanh toán, giả lập đã thanh toán.
Sẽ tắt khi campaign chính thức go-live.

🔥 Thanh toán ngay để giữ chỗ!
Phòng có thể được đặt bởi khách khác bất cứ lúc nào.
Chuyển khoản ngay để đảm bảo giữ phòng cho bạn.
Đang chờ thanh toán…

Vui lòng chuyển khoản đúng số tiền và đúng nội dung.
Hệ thống tự động xác nhận khi nhận được thanh toán.

🕐 Thanh toán sau — nhận tư vấn từ nhân viên


📞

Xác Nhận Thanh Toán Sau

Nhân viên sale sẽ gọi lại cho bạn để xác nhận đặt phòng.
Lưu ý: Nếu phòng được đặt hết trước khi bạn thanh toán,
chúng tôi sẽ thông báo qua số điện thoại và email bên dưới.

Số điện thoại liên hệ

Email

Xác nhận — Gọi lại cho tôi
← Quay lại thanh toán ngay

✅

Đã Ghi Nhận!

Nhân viên Stelia sẽ liên hệ bạn trong vòng 30 phút.
Bạn vẫn có thể thanh toán bất cứ lúc nào bằng mã đơn hàng.

Đóng
✅

Thanh Toán Thành Công!

Cảm ơn bạn đã thanh toán.
Đội ngũ Stelia sẽ liên hệ trong vòng 30 phút để xác nhận đặt phòng.

Đóng

☎ Đặt Phòng